Reapply "Usability improvements"

ramsrib · ramsrib · commit c59533d7cfa6 · 2025-07-03T15:57:13.000-07:00
This reverts commit 8970778.
diff --git a/src/components/AnimatedStatusIcon.tsx b/src/components/AnimatedStatusIcon.tsx
@@ -29,6 +29,8 @@ export interface AnimatedStatusIconProps {
   isTyping?: boolean;
   /** Whether there's an error */
   isError?: boolean;
+  /** Volume level (0-1) for volume-responsive animations */
+  volumeLevel?: number;
   /** Base color for inactive bars */
   baseColor?: string;
   /** Override animation type */
@@ -61,6 +63,7 @@ const AnimatedStatusIcon: React.FC<AnimatedStatusIconProps> = ({
   isSpeaking,
   isTyping,
   isError,
+  volumeLevel = 0,
   baseColor = '#9CA3AF',
   animationType: overrideAnimationType,
   animationSpeed: overrideAnimationSpeed,
@@ -226,30 +229,97 @@ const AnimatedStatusIcon: React.FC<AnimatedStatusIconProps> = ({
       }
 
       case 'scale': {
-        // Scale animation for line layout
+        // Speech pattern animation - each bar reacts differently to volume
         if (useLineLayout && 'delay' in bar) {
           const lineBar = bar as LineBar;
-          const cycleTime = (time + lineBar.delay) % 1;
-          const scaleTime = cycleTime < 0.5 ? cycleTime * 2 : 2 - cycleTime * 2;
 
-          // Ease in-out cubic
-          const easeInOutCubic = (t: number) => {
-            return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-          };
-
-          const easedTime = easeInOutCubic(scaleTime);
-          // Scale from base height to max height while maintaining the relative proportions
-          const scaleFactor = 1 + easedTime * 0.5; // Scale up to 1.5x
-          const height = lineBar.baseHeight * scaleFactor;
-          const y = 12 - height / 2; // Keep bars centered vertically
+          // Use volume level to determine overall activity
+          const volumeIntensity = Math.max(0, Math.min(1, volumeLevel));
+
+          // Each bar has different sensitivity and frequency response
+          const barCharacteristics = [
+            { sensitivity: 0.8, frequency: 1.2, baseActivity: 0.3 }, // Bar 0 - Low freq, less sensitive
+            { sensitivity: 1.0, frequency: 1.8, baseActivity: 0.4 }, // Bar 1 - Mid-low freq
+            { sensitivity: 1.2, frequency: 2.5, baseActivity: 0.5 }, // Bar 2 - Center, most responsive
+            { sensitivity: 1.0, frequency: 2.0, baseActivity: 0.4 }, // Bar 3 - Mid-high freq
+            { sensitivity: 0.9, frequency: 1.5, baseActivity: 0.35 }, // Bar 4 - High freq
+          ];
+
+          const barChar = barCharacteristics[index] || barCharacteristics[2];
+
+          // Create dynamic time-based variation for each bar
+          const time = animationTime % 1;
+          const barTime = (time * barChar.frequency) % 1;
+
+          // Generate pseudo-random speech-like pattern
+          const speechPattern =
+            Math.sin(barTime * 2 * Math.PI) * 0.3 +
+            Math.sin(barTime * 6 * Math.PI) * 0.2 +
+            Math.sin(barTime * 12 * Math.PI) * 0.1;
+
+          // Each bar responds differently based on volume and its characteristics
+          const barResponse = volumeIntensity * barChar.sensitivity;
+
+          // Combine base activity, volume response, and speech pattern
+          const activity = Math.max(
+            0,
+            Math.min(
+              1,
+              barChar.baseActivity +
+                barResponse * 0.6 +
+                speechPattern * volumeIntensity * 0.4
+            )
+          );
+
+          // Scale the bar height based on activity
+          const heightScale = 0.7 + activity * 1.1; // Range from 0.7x to 1.8x
+          const height = lineBar.baseHeight * heightScale;
+          const y = 12 - height / 2;
+
+          // Opacity varies with activity
+          const opacity = 0.4 + activity * 0.6;
 
           return {
-            opacity: 1,
+            opacity,
             height,
             y,
             transform: '',
           };
         }
+
+        // For circular layout, create a wave-like speech pattern
+        if (!useLineLayout) {
+          const volumeIntensity = Math.max(0, Math.min(1, volumeLevel));
+          const time = animationTime % 1;
+
+          // Create different wave patterns for each bar
+          const barAngle = (index / actualBarCount) * 2 * Math.PI;
+          const wavePattern =
+            Math.sin(time * 4 * Math.PI + barAngle) * 0.3 +
+            Math.sin(time * 8 * Math.PI + barAngle * 2) * 0.2 +
+            Math.sin(time * 16 * Math.PI + barAngle * 3) * 0.1;
+
+          // Each bar has different sensitivity based on position
+          const positionSensitivity =
+            0.7 + 0.3 * Math.sin(barAngle + Math.PI / 4);
+
+          const activity = Math.max(
+            0,
+            Math.min(
+              1,
+              0.3 +
+                volumeIntensity * positionSensitivity * 0.5 +
+                wavePattern * volumeIntensity * 0.2
+            )
+          );
+
+          return {
+            opacity: 0.4 + activity * 0.6,
+            transform:
+              activity > 0.5 ? `scale(${1 + (activity - 0.5) * 0.4})` : '',
+          };
+        }
+
         return { opacity: 1, transform: '' };
       }
 
diff --git a/src/components/VapiWidget.tsx b/src/components/VapiWidget.tsx
@@ -8,7 +8,7 @@ import { sizeStyles, radiusStyles, positionStyles } from './constants';
 import ConsentForm from './widget/ConsentForm';
 import FloatingButton from './widget/FloatingButton';
 import WidgetHeader from './widget/WidgetHeader';
-import VolumeIndicator from './widget/conversation/VolumeIndicator';
+import AnimatedStatusIcon from './AnimatedStatusIcon';
 import ConversationMessage from './widget/conversation/Message';
 import EmptyConversation from './widget/conversation/EmptyState';
 import VoiceControls from './widget/controls/VoiceControls';
@@ -35,7 +35,7 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   mainLabel = 'Talk with AI',
   startButtonText = 'Start',
   endButtonText = 'End Call',
-  emptyVoiceMessage = 'Click the microphone to start talking',
+  emptyVoiceMessage = 'Click the start button to begin a conversation',
   emptyVoiceActiveMessage = 'Listening...',
   emptyChatMessage = 'Type a message to start chatting',
   emptyHybridMessage = 'Use voice or text to communicate',
@@ -127,8 +127,9 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
       !showTranscript &&
       vapi.voice.isCallActive &&
       (mode === 'voice' || mode === 'hybrid');
+    const showingEmptyState = !vapi.voice.isCallActive;
 
-    if (isEmpty || hideTranscript) {
+    if (isEmpty || hideTranscript || showingEmptyState) {
       return {
         display: 'flex',
         alignItems: 'center',
@@ -253,27 +254,26 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   };
 
   const renderConversationArea = () => {
-    const shouldShowTranscript =
-      showTranscript ||
-      mode === 'chat' ||
-      (mode === 'hybrid' && !vapi.voice.isCallActive);
-
-    const shouldShowVolumeIndicator =
-      !shouldShowTranscript && vapi.voice.isCallActive;
-
-    if (shouldShowTranscript) {
-      return renderConversationMessages();
-    }
-
-    if (shouldShowVolumeIndicator) {
-      return (
-        <VolumeIndicator
-          volumeLevel={vapi.voice.volumeLevel}
-          isCallActive={vapi.voice.isCallActive}
-          isSpeaking={vapi.voice.isSpeaking}
-          theme={styles.theme}
-        />
-      );
+    if (vapi.voice.isCallActive) {
+      const shouldShowTranscript =
+        showTranscript || mode === 'chat' || mode === 'hybrid';
+
+      if (shouldShowTranscript) {
+        return renderConversationMessages();
+      } else {
+        return (
+          <AnimatedStatusIcon
+            size={150}
+            connectionStatus={vapi.voice.connectionStatus}
+            isCallActive={vapi.voice.isCallActive}
+            isSpeaking={vapi.voice.isSpeaking}
+            isTyping={vapi.chat.isTyping}
+            volumeLevel={vapi.voice.volumeLevel}
+            baseColor={colors.accentColor}
+            colors={colors.accentColor}
+          />
+        );
+      }
     }
 
     return (
@@ -371,6 +371,7 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
 
         {/* Conversation Area */}
         <div
+          className="vapi-conversation-area"
           style={{
             ...getConversationAreaStyle(),
             ...getConversationLayoutStyle(),
@@ -402,6 +403,7 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
             connectionStatus={vapi.voice.connectionStatus}
             isSpeaking={vapi.voice.isSpeaking}
             isTyping={vapi.chat.isTyping}
+            volumeLevel={vapi.voice.volumeLevel}
             onClick={handleFloatingButtonClick}
             onToggleCall={handleToggleCall}
             mainLabel={mainLabel}
diff --git a/src/components/types.ts b/src/components/types.ts
@@ -74,6 +74,7 @@ export interface FloatingButtonProps {
   connectionStatus: 'disconnected' | 'connecting' | 'connected';
   isSpeaking: boolean;
   isTyping: boolean;
+  volumeLevel: number;
   onClick: () => void;
   onToggleCall?: () => void;
   mainLabel: string;
diff --git a/src/components/widget/FloatingButton.tsx b/src/components/widget/FloatingButton.tsx
@@ -8,6 +8,7 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({
   connectionStatus,
   isSpeaking,
   isTyping,
+  volumeLevel,
   onClick,
   onToggleCall,
   mainLabel,
@@ -68,6 +69,7 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({
           isTyping={isTyping}
           baseColor={colors.accentColor}
           colors={colors.accentColor}
+          volumeLevel={volumeLevel}
         />
 
         {(styles.size === 'compact' || styles.size === 'full') &&
diff --git a/src/components/widget/conversation/Message.tsx b/src/components/widget/conversation/Message.tsx
@@ -11,12 +11,12 @@ const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
   <div className="markdown-content">
     <ReactMarkdown
       components={{
-        p: ({ children }) => <p className="mb-1 last:mb-0">{children}</p>,
+        p: ({ children }) => <p className="mb-3 last:mb-0">{children}</p>,
         ul: ({ children }) => (
-          <ul className="list-disc list-inside mb-1 last:mb-0">{children}</ul>
+          <ul className="list-disc list-inside mb-3 last:mb-0">{children}</ul>
         ),
         ol: ({ children }) => (
-          <ol className="list-decimal list-inside mb-1 last:mb-0">
+          <ol className="list-decimal list-inside mb-3 last:mb-0">
             {children}
           </ol>
         ),
@@ -57,7 +57,7 @@ const MarkdownMessage: React.FC<MarkdownMessageProps> = ({
           <h3 className="text-sm font-bold mb-1">{children}</h3>
         ),
         blockquote: ({ children }) => (
-          <blockquote className="border-l-2 pl-2 my-1 opacity-80">
+          <blockquote className="border-l-2 pl-2 my-3 opacity-80">
             {children}
           </blockquote>
         ),
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -8,3 +8,14 @@
     box-sizing: border-box;
   }
 }
+
+/* Hide scrollbar completely */
+.vapi-conversation-area {
+  /* Firefox */
+  scrollbar-width: none;
+}
+
+/* Webkit browsers */
+.vapi-conversation-area::-webkit-scrollbar {
+  display: none;
+}
diff --git a/tests/widget-embed.spec.ts b/tests/widget-embed.spec.ts
@@ -35,7 +35,9 @@ test.describe('VapiWidget Embed Tests', () => {
     // Verify the widget has created some content (React root or shadow DOM)
     const widgetInitialized = await page.evaluate(() => {
       const widget = document.querySelector('#vapi-widget-1');
-      if (!widget) return false;
+      if (!widget) {
+        return false;
+      }
       // Check for React root or any child elements
       return (
         widget.children.length > 0 ||
@@ -74,7 +76,9 @@ test.describe('VapiWidget Embed Tests', () => {
     // Verify the widget has been initialized
     const widgetInitialized = await page.evaluate(() => {
       const widget = document.querySelector('#vapi-widget-2');
-      if (!widget) return false;
+      if (!widget) {
+        return false;
+      }
       return (
         widget.children.length > 0 ||
         widget.shadowRoot !== null ||
@@ -111,7 +115,9 @@ test.describe('VapiWidget Embed Tests', () => {
     // Verify the custom element has been initialized
     const widgetInitialized = await page.evaluate(() => {
       const widget = document.querySelector('vapi-widget');
-      if (!widget) return false;
+      if (!widget) {
+        return false;
+      }
       return (
         widget.children.length > 0 ||
         widget.shadowRoot !== null ||
