Revert "Usability improvements"

ramsrib · ramsrib · commit 89707784dbe8 · 2025-07-03T12:44:44.000-07:00
This reverts commit 6d06e58.
diff --git a/src/components/AnimatedStatusIcon.tsx b/src/components/AnimatedStatusIcon.tsx
@@ -29,8 +29,6 @@ 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 */
@@ -63,7 +61,6 @@ const AnimatedStatusIcon: React.FC<AnimatedStatusIconProps> = ({
   isSpeaking,
   isTyping,
   isError,
-  volumeLevel = 0,
   baseColor = '#9CA3AF',
   animationType: overrideAnimationType,
   animationSpeed: overrideAnimationSpeed,
@@ -229,97 +226,30 @@ const AnimatedStatusIcon: React.FC<AnimatedStatusIconProps> = ({
       }
 
       case 'scale': {
-        // Speech pattern animation - each bar reacts differently to volume
+        // Scale animation for line layout
         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;
 
-          // 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;
+          // 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
 
           return {
-            opacity,
+            opacity: 1,
             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 AnimatedStatusIcon from './AnimatedStatusIcon';
+import VolumeIndicator from './widget/conversation/VolumeIndicator';
 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 start button to begin a conversation',
+  emptyVoiceMessage = 'Click the microphone to start talking',
   emptyVoiceActiveMessage = 'Listening...',
   emptyChatMessage = 'Type a message to start chatting',
   emptyHybridMessage = 'Use voice or text to communicate',
@@ -127,9 +127,8 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
       !showTranscript &&
       vapi.voice.isCallActive &&
       (mode === 'voice' || mode === 'hybrid');
-    const showingEmptyState = !vapi.voice.isCallActive;
 
-    if (isEmpty || hideTranscript || showingEmptyState) {
+    if (isEmpty || hideTranscript) {
       return {
         display: 'flex',
         alignItems: 'center',
@@ -254,26 +253,27 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   };
 
   const renderConversationArea = () => {
-    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}
-          />
-        );
-      }
+    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}
+        />
+      );
     }
 
     return (
@@ -371,7 +371,6 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
 
         {/* Conversation Area */}
         <div
-          className="vapi-conversation-area"
           style={{
             ...getConversationAreaStyle(),
             ...getConversationLayoutStyle(),
@@ -403,7 +402,6 @@ 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,7 +74,6 @@ 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,7 +8,6 @@ const FloatingButton: React.FC<FloatingButtonProps> = ({
   connectionStatus,
   isSpeaking,
   isTyping,
-  volumeLevel,
   onClick,
   onToggleCall,
   mainLabel,
@@ -69,7 +68,6 @@ 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-3 last:mb-0">{children}</p>,
+        p: ({ children }) => <p className="mb-1 last:mb-0">{children}</p>,
         ul: ({ children }) => (
-          <ul className="list-disc list-inside mb-3 last:mb-0">{children}</ul>
+          <ul className="list-disc list-inside mb-1 last:mb-0">{children}</ul>
         ),
         ol: ({ children }) => (
-          <ol className="list-decimal list-inside mb-3 last:mb-0">
+          <ol className="list-decimal list-inside mb-1 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-3 opacity-80">
+          <blockquote className="border-l-2 pl-2 my-1 opacity-80">
             {children}
           </blockquote>
         ),
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -8,14 +8,3 @@
     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,9 +35,7 @@ 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 ||
@@ -76,9 +74,7 @@ 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 ||
@@ -115,9 +111,7 @@ 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 ||
