Merge pull request #15 from VapiAI/sri/add-mute-button

Add mute button to voice widget

Author: ramsrib

src/components/VapiWidget.tsx

@@ -386,7 +386,9 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
           isCallActive={vapi.voice.isCallActive}
           connectionStatus={vapi.voice.connectionStatus}
           isAvailable={vapi.voice.isAvailable}
+          isMuted={vapi.voice.isMuted}
           onToggleCall={handleToggleCall}
+          onToggleMute={vapi.voice.toggleMute}
           startButtonText={effectiveStartButtonText}
           endButtonText={effectiveEndButtonText}
           colors={colors}
@@ -417,9 +419,11 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
           connectionStatus={vapi.voice.connectionStatus}
           isChatAvailable={vapi.chat.isAvailable}
           isVoiceAvailable={vapi.voice.isAvailable}
+          isMuted={vapi.voice.isMuted}
           onInputChange={handleChatInputChange}
           onSendMessage={handleSendMessage}
           onToggleCall={handleToggleCall}
+          onToggleMute={vapi.voice.toggleMute}
           colors={colors}
           styles={styles}
           inputRef={inputRef}

src/components/types.ts

@@ -185,7 +185,9 @@ export interface VoiceControlsProps {
   isCallActive: boolean;
   connectionStatus: 'disconnected' | 'connecting' | 'connected';
   isAvailable: boolean;
+  isMuted: boolean;
   onToggleCall: () => void;
+  onToggleMute: () => void;
   startButtonText: string;
   endButtonText: string;
   colors: ColorScheme;
@@ -208,9 +210,11 @@ export interface HybridControlsProps {
   connectionStatus: 'disconnected' | 'connecting' | 'connected';
   isChatAvailable: boolean;
   isVoiceAvailable: boolean;
+  isMuted: boolean;
   onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onSendMessage: () => void;
   onToggleCall: () => void;
+  onToggleMute: () => void;
   colors: ColorScheme;
   styles: StyleConfig;
   inputRef?: React.RefObject<HTMLInputElement>;

src/components/widget/controls/HybridControls.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import {
   PaperPlaneTiltIcon,
   MicrophoneIcon,
+  MicrophoneSlashIcon,
   StopIcon,
+  WaveformIcon,
 } from '@phosphor-icons/react';
 import { HybridControlsProps } from '../../types';
 
@@ -12,9 +14,11 @@ const HybridControls: React.FC<HybridControlsProps> = ({
   connectionStatus,
   isChatAvailable,
   isVoiceAvailable,
+  isMuted,
   onInputChange,
   onSendMessage,
   onToggleCall,
+  onToggleMute,
   colors,
   styles,
   inputRef,
@@ -66,6 +70,23 @@ const HybridControls: React.FC<HybridControlsProps> = ({
     >
       <PaperPlaneTiltIcon size={20} weight="fill" />
     </button>
+    {isCallActive && connectionStatus === 'connected' && (
+      <button
+        onClick={onToggleMute}
+        className="h-10 w-10 flex items-center justify-center rounded-lg transition-all hover:opacity-90 active:scale-95"
+        style={{
+          backgroundColor: isMuted ? '#ef4444' : colors.accentColor,
+          color: colors.ctaButtonTextColor || 'white',
+        }}
+        title={isMuted ? 'Unmute microphone' : 'Mute microphone'}
+      >
+        {isMuted ? (
+          <MicrophoneSlashIcon size={20} weight="fill" />
+        ) : (
+          <MicrophoneIcon size={20} weight="fill" />
+        )}
+      </button>
+    )}
     <button
       onClick={onToggleCall}
       disabled={!isVoiceAvailable && !isCallActive}
@@ -91,7 +112,7 @@ const HybridControls: React.FC<HybridControlsProps> = ({
       ) : isCallActive ? (
         <StopIcon size={20} weight="fill" />
       ) : (
-        <MicrophoneIcon size={20} weight="fill" />
+        <WaveformIcon size={20} weight="bold" />
       )}
     </button>
   </div>

src/components/widget/controls/VoiceControls.tsx

@@ -1,17 +1,41 @@
 import React from 'react';
-import { MicrophoneIcon, StopIcon } from '@phosphor-icons/react';
+import {
+  MicrophoneIcon,
+  StopIcon,
+  MicrophoneSlashIcon,
+  WaveformIcon,
+} from '@phosphor-icons/react';
 import { VoiceControlsProps } from '../../types';
 
 const VoiceControls: React.FC<VoiceControlsProps> = ({
   isCallActive,
   connectionStatus,
   isAvailable,
+  isMuted,
   onToggleCall,
+  onToggleMute,
   startButtonText,
   endButtonText,
   colors,
 }) => (
-  <div className="flex items-center justify-center">
+  <div className="flex items-center justify-center space-x-2">
+    {isCallActive && connectionStatus === 'connected' && (
+      <button
+        onClick={onToggleMute}
+        className="h-12 w-12 flex items-center justify-center rounded-full transition-all hover:opacity-90 active:scale-95"
+        style={{
+          backgroundColor: isMuted ? '#ef4444' : colors.accentColor,
+          color: colors.ctaButtonTextColor || 'white',
+        }}
+        title={isMuted ? 'Unmute microphone' : 'Mute microphone'}
+      >
+        {isMuted ? (
+          <MicrophoneSlashIcon size={20} weight="fill" />
+        ) : (
+          <MicrophoneIcon size={20} weight="fill" />
+        )}
+      </button>
+    )}
     <button
       onClick={onToggleCall}
       disabled={!isAvailable && !isCallActive}
@@ -37,7 +61,7 @@ const VoiceControls: React.FC<VoiceControlsProps> = ({
         </>
       ) : (
         <>
-          <MicrophoneIcon size={16} weight="fill" />
+          <WaveformIcon size={16} weight="bold" />
           <span>{startButtonText}</span>
         </>
       )}

src/hooks/useVapiCall.ts

@@ -6,12 +6,14 @@ export interface VapiCallState {
   isSpeaking: boolean;
   volumeLevel: number;
   connectionStatus: 'disconnected' | 'connecting' | 'connected';
+  isMuted: boolean;
 }
 
 export interface VapiCallHandlers {
   startCall: () => Promise<void>;
   endCall: () => Promise<void>;
   toggleCall: () => Promise<void>;
+  toggleMute: () => void;
 }
 
 export interface UseVapiCallOptions {
@@ -47,6 +49,7 @@ export const useVapiCall = ({
 
   const [isCallActive, setIsCallActive] = useState(false);
   const [isSpeaking, setIsSpeaking] = useState(false);
+  const [isMuted, setIsMuted] = useState(false);
   const [volumeLevel, setVolumeLevel] = useState(0);
   const [connectionStatus, setConnectionStatus] = useState<
     'disconnected' | 'connecting' | 'connected'
@@ -86,6 +89,7 @@ export const useVapiCall = ({
       setConnectionStatus('disconnected');
       setVolumeLevel(0);
       setIsSpeaking(false);
+      setIsMuted(false);
       callbacksRef.current.onCallEnd?.();
     };
 
@@ -185,15 +189,28 @@ export const useVapiCall = ({
     }
   }, [isCallActive, startCall, endCall]);
 
+  const toggleMute = useCallback(() => {
+    if (!vapi || !isCallActive) {
+      console.log('Cannot toggle mute: no vapi instance or call not active');
+      return;
+    }
+
+    const newMutedState = !isMuted;
+    vapi.setMuted(newMutedState);
+    setIsMuted(newMutedState);
+  }, [vapi, isCallActive, isMuted]);
+
   return {
     // State
     isCallActive,
     isSpeaking,
     volumeLevel,
     connectionStatus,
+    isMuted,
     // Handlers
     startCall,
     endCall,
     toggleCall,
+    toggleMute,
   };
 };