feat: support voice reconnect

Author: stevenbdf

src/components/VapiWidget.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useVapiWidget } from '../hooks';
 
 import { VapiWidgetProps, ColorScheme, StyleConfig } from './types';
@@ -61,6 +61,8 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   // Voice configuration
   voiceShowTranscript,
   showTranscript = false, // deprecated
+  voiceAutoReconnect = false,
+  reconnectStorageKey = 'vapi_widget_web_call',
   // Consent configuration
   consentRequired,
   requireConsent = false, // deprecated
@@ -77,14 +79,39 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   onMessage,
   onError,
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  // Create storage key for expanded state
+  const expandedStorageKey = `vapi_widget_expanded`;
+
+  // Initialize expanded state from localStorage
+  const [isExpanded, setIsExpanded] = useState(() => {
+    try {
+      const stored = localStorage.getItem(expandedStorageKey);
+      return stored === 'true';
+    } catch {
+      return false;
+    }
+  });
+
   const [hasConsent, setHasConsent] = useState(false);
   const [chatInput, setChatInput] = useState('');
   const [showEndScreen, setShowEndScreen] = useState(false);
 
   const conversationEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // Custom setter that updates both state and localStorage
+  const updateExpandedState = useCallback(
+    (expanded: boolean) => {
+      setIsExpanded(expanded);
+      try {
+        localStorage.setItem(expandedStorageKey, expanded.toString());
+      } catch (error) {
+        console.warn('Failed to save expanded state to localStorage:', error);
+      }
+    },
+    [expandedStorageKey]
+  );
+
   const effectiveBorderRadius = borderRadius ?? radius;
   const effectiveBaseBgColor = baseBgColor ?? baseColor;
   const effectiveAccentColor = accentColor ?? '#14B8A6';
@@ -122,6 +149,8 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
     assistantOverrides,
     apiUrl,
     firstChatMessage: effectiveChatFirstMessage,
+    voiceAutoReconnect,
+    reconnectStorageKey,
     onCallStart: effectiveOnVoiceStart,
     onCallEnd: effectiveOnVoiceEnd,
     onMessage,
@@ -232,11 +261,11 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   };
 
   const handleConsentCancel = () => {
-    setIsExpanded(false);
+    updateExpandedState(false);
   };
 
   const handleToggleCall = async () => {
-    await vapi.voice.toggleCall();
+    await vapi.voice.toggleCall({ force: voiceAutoReconnect });
   };
 
   const handleSendMessage = async () => {
@@ -260,7 +289,7 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
     setShowEndScreen(false);
 
     if (vapi.voice.isCallActive) {
-      vapi.voice.endCall();
+      vapi.voice.endCall({ force: voiceAutoReconnect });
     }
 
     setChatInput('');
@@ -297,11 +326,11 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
       setShowEndScreen(false);
       setChatInput('');
     }
-    setIsExpanded(false);
+    updateExpandedState(false);
   };
 
   const handleFloatingButtonClick = () => {
-    setIsExpanded(true);
+    updateExpandedState(true);
   };
 
   const renderConversationMessages = () => {

src/components/types.ts

@@ -48,6 +48,8 @@ export interface VapiWidgetProps {
 
   // Voice Configuration
   voiceShowTranscript?: boolean;
+  voiceAutoReconnect?: boolean;
+  reconnectStorageKey?: string;
 
   // Consent Configuration
   consentRequired?: boolean;

src/hooks/useVapiCall.ts

@@ -1,6 +1,20 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import Vapi from '@vapi-ai/web';
 
+interface StoredCallData {
+  webCallUrl: string;
+  id?: string;
+  artifactPlan?: {
+    videoRecordingEnabled?: boolean;
+  };
+  assistant?: {
+    voice?: {
+      provider?: string;
+    };
+  };
+  timestamp: number;
+}
+
 export interface VapiCallState {
   isCallActive: boolean;
   isSpeaking: boolean;
@@ -11,16 +25,20 @@ export interface VapiCallState {
 
 export interface VapiCallHandlers {
   startCall: () => Promise<void>;
-  endCall: () => Promise<void>;
-  toggleCall: () => Promise<void>;
+  endCall: (opts?: { force?: boolean }) => Promise<void>;
+  toggleCall: (opts?: { force?: boolean }) => Promise<void>;
   toggleMute: () => void;
+  reconnect: () => Promise<void>;
+  clearStoredCall: () => void;
 }
 
 export interface UseVapiCallOptions {
   publicKey: string;
   callOptions: any;
   apiUrl?: string;
   enabled?: boolean;
+  roomDeleteOnUserLeaveEnabled?: boolean;
+  reconnectStorageKey?: string;
   onCallStart?: () => void;
   onCallEnd?: () => void;
   onMessage?: (message: any) => void;
@@ -37,6 +55,8 @@ export const useVapiCall = ({
   callOptions,
   apiUrl,
   enabled = true,
+  roomDeleteOnUserLeaveEnabled = false,
+  reconnectStorageKey = 'vapi_widget_web_call',
   onCallStart,
   onCallEnd,
   onMessage,
@@ -63,6 +83,54 @@ export const useVapiCall = ({
     onTranscript,
   });
 
+  // localStorage utilities
+  const storeCallData = useCallback(
+    (call: any) => {
+      if (!roomDeleteOnUserLeaveEnabled) {
+        // Extract webCallUrl from the call object
+        // The webCallUrl can be in call.webCallUrl or call.transport.callUrl
+        const webCallUrl =
+          (call as any).webCallUrl || (call.transport as any)?.callUrl;
+
+        if (webCallUrl) {
+          const webCallToStore = {
+            webCallUrl,
+            id: call.id,
+            artifactPlan: call.artifactPlan,
+            assistant: call.assistant,
+            timestamp: Date.now(),
+          };
+          localStorage.setItem(
+            reconnectStorageKey,
+            JSON.stringify(webCallToStore)
+          );
+          console.log('Stored call data for reconnection:', webCallToStore);
+        } else {
+          console.warn(
+            'No webCallUrl found in call object, cannot store for reconnection'
+          );
+        }
+      }
+    },
+    [roomDeleteOnUserLeaveEnabled, reconnectStorageKey]
+  );
+
+  const getStoredCallData = useCallback((): StoredCallData | null => {
+    try {
+      const stored = localStorage.getItem(reconnectStorageKey);
+      if (!stored) return null;
+
+      return JSON.parse(stored);
+    } catch {
+      localStorage.removeItem(reconnectStorageKey);
+      return null;
+    }
+  }, [reconnectStorageKey]);
+
+  const clearStoredCall = useCallback(() => {
+    localStorage.removeItem(reconnectStorageKey);
+  }, [reconnectStorageKey]);
+
   useEffect(() => {
     callbacksRef.current = {
       onCallStart,
@@ -90,6 +158,8 @@ export const useVapiCall = ({
       setVolumeLevel(0);
       setIsSpeaking(false);
       setIsMuted(false);
+      // Clear stored call data on successful call end
+      clearStoredCall();
       callbacksRef.current.onCallEnd?.();
     };
 
@@ -144,7 +214,7 @@ export const useVapiCall = ({
       vapi.removeListener('message', handleMessage);
       vapi.removeListener('error', handleError);
     };
-  }, [vapi]);
+  }, [vapi, clearStoredCall]);
 
   useEffect(() => {
     return () => {
@@ -161,33 +231,68 @@ export const useVapiCall = ({
     }
 
     try {
-      console.log('Starting call with options:', callOptions);
+      console.log('Starting call with configuration:', callOptions);
+      console.log('Starting call with options:', {
+        roomDeleteOnUserLeaveEnabled,
+      });
       setConnectionStatus('connecting');
-      await vapi.start(callOptions);
+      const call = await vapi.start(
+        // assistant
+        callOptions,
+        // assistant overrides,
+        undefined,
+        // squad
+        undefined,
+        // workflow
+        undefined,
+        // workflow overrides
+        undefined,
+        // options
+        {
+          roomDeleteOnUserLeaveEnabled,
+        }
+      );
+
+      // Store call data for reconnection if call was successful and auto-reconnect is enabled
+      if (call && !roomDeleteOnUserLeaveEnabled) {
+        storeCallData(call);
+      }
     } catch (error) {
       console.error('Error starting call:', error);
       setConnectionStatus('disconnected');
       callbacksRef.current.onError?.(error as Error);
     }
-  }, [vapi, callOptions, enabled]);
+  }, [vapi, callOptions, enabled, roomDeleteOnUserLeaveEnabled, storeCallData]);
 
-  const endCall = useCallback(async () => {
-    if (!vapi) {
-      console.log('Cannot end call: no vapi instance');
-      return;
-    }
+  const endCall = useCallback(
+    async ({ force = false }: { force?: boolean } = {}) => {
+      if (!vapi) {
+        console.log('Cannot end call: no vapi instance');
+        return;
+      }
 
-    console.log('Ending call');
-    vapi.stop();
-  }, [vapi]);
+      console.log('Ending call with force:', force);
+      if (force) {
+        // end vapi call and delete daily room
+        vapi.end();
+      } else {
+        // simply disconnect from daily room
+        vapi.stop();
+      }
+    },
+    [vapi]
+  );
 
-  const toggleCall = useCallback(async () => {
-    if (isCallActive) {
-      await endCall();
-    } else {
-      await startCall();
-    }
-  }, [isCallActive, startCall, endCall]);
+  const toggleCall = useCallback(
+    async ({ force = false }: { force?: boolean } = {}) => {
+      if (isCallActive) {
+        await endCall({ force });
+      } else {
+        await startCall();
+      }
+    },
+    [isCallActive, startCall, endCall]
+  );
 
   const toggleMute = useCallback(() => {
     if (!vapi || !isCallActive) {
@@ -200,6 +305,53 @@ export const useVapiCall = ({
     setIsMuted(newMutedState);
   }, [vapi, isCallActive, isMuted]);
 
+  const reconnect = useCallback(async () => {
+    if (!vapi || !enabled) {
+      console.error('Cannot reconnect: no vapi instance or not enabled');
+      return;
+    }
+
+    const storedData = getStoredCallData();
+    if (!storedData) {
+      console.warn('No stored call data found for reconnection');
+      return;
+    }
+
+    setConnectionStatus('connecting');
+    try {
+      await vapi.reconnect({
+        webCallUrl: storedData.webCallUrl,
+        id: storedData.id,
+        artifactPlan: storedData.artifactPlan,
+        assistant: storedData.assistant,
+      });
+      console.log('Successfully reconnected to call');
+    } catch (error) {
+      setConnectionStatus('disconnected');
+      console.error('Reconnection failed:', error);
+      clearStoredCall();
+      callbacksRef.current.onError?.(error as Error);
+    }
+  }, [vapi, enabled, getStoredCallData, clearStoredCall]);
+
+  // Check for stored call data on initialization and attempt reconnection
+  useEffect(() => {
+    if (!vapi || !enabled || roomDeleteOnUserLeaveEnabled) {
+      return;
+    }
+
+    const storedData = getStoredCallData();
+    if (storedData) {
+      reconnect();
+    }
+  }, [
+    vapi,
+    enabled,
+    roomDeleteOnUserLeaveEnabled,
+    getStoredCallData,
+    reconnect,
+  ]);
+
   return {
     // State
     isCallActive,
@@ -212,5 +364,7 @@ export const useVapiCall = ({
     endCall,
     toggleCall,
     toggleMute,
+    reconnect,
+    clearStoredCall,
   };
 };