feat: add cookie option for voice reconnect

Author: stevenbdf

README.md

@@ -100,8 +100,9 @@ The simplest way to add the widget to your website:
 | `chatPlaceholder`         | `string`                                                                          | `'Type your message...'` | Chat input placeholder text                                                             |
 | **Voice Configuration**   |                                                                                   |                          |                                                                                         |
 | `voiceShowTranscript`     | `boolean`                                                                         | `false`                  | Show/hide voice transcript                                                              |
-| `voiceAutoReconnect`      | `boolean`                                                                         | `false`                  | Auto-reconnect to an active web call within the same browser tab (uses session storage) |
-| `reconnectStorageKey`     | `string`                                                                          | `'vapi_widget_web_call'` | Key for storing reconnection data (uses session storage)                                |
+| `voiceAutoReconnect`      | `boolean`                                                                         | `false`                  | Auto-reconnect to an active web call (see `voiceReconnectStorage` for scope)            |
+| `voiceReconnectStorage`   | `'session' \| 'cookies'`                                                          | `'session'`              | Storage type: 'session' (same tab only) or 'cookies' (same tab across subdomains)       |
+| `reconnectStorageKey`     | `string`                                                                          | `'vapi_widget_web_call'` | Key for storing reconnection data                                                       |
 | **Consent Configuration** |                                                                                   |                          |                                                                                         |
 | `consentRequired`         | `boolean`                                                                         | `false`                  | Show consent form before first use                                                      |
 | `consentTitle`            | `string`                                                                          | `"Terms and conditions"` | Consent form title                                                                      |
@@ -286,6 +287,19 @@ Use this approach if your environment doesn't support custom elements or for bet
   mode="voice"
   voiceAutoReconnect={true}
 />
+````
+
+### Voice with Cross-Subdomain Reconnection
+
+```tsx
+<VapiWidget
+  publicKey="pk_123"
+  assistantId="asst_456"
+  mode="voice"
+  voiceAutoReconnect={true}
+  voiceReconnectStorage="cookies"
+/>
+```
 
 ## Development
 

package-lock.json

@@ -74,6 +74,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.53.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^24.0.6",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
@@ -102,6 +103,7 @@
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
     "@phosphor-icons/react": "^2.1.10",
+    "js-cookie": "^3.0.5",
     "react-colorful": "^5.6.1",
     "react-markdown": "^10.1.0"
   }

package.json

@@ -62,6 +62,7 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   voiceShowTranscript,
   showTranscript = false, // deprecated
   voiceAutoReconnect = false,
+  voiceReconnectStorage = 'session',
   reconnectStorageKey = 'vapi_widget_web_call',
   // Consent configuration
   consentRequired,
@@ -150,6 +151,7 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
     apiUrl,
     firstChatMessage: effectiveChatFirstMessage,
     voiceAutoReconnect,
+    voiceReconnectStorage,
     reconnectStorageKey,
     onCallStart: effectiveOnVoiceStart,
     onCallEnd: effectiveOnVoiceEnd,

src/components/VapiWidget.tsx

@@ -49,6 +49,7 @@ export interface VapiWidgetProps {
   // Voice Configuration
   voiceShowTranscript?: boolean;
   voiceAutoReconnect?: boolean;
+  voiceReconnectStorage?: 'session' | 'cookies';
   reconnectStorageKey?: string;
 
   // Consent Configuration

src/components/types.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import Vapi from '@vapi-ai/web';
 import * as vapiCallStorage from '../utils/vapiCallStorage';
+import type { StorageType } from '../utils/vapiCallStorage';
 
 export interface VapiCallState {
   isCallActive: boolean;
@@ -25,6 +26,7 @@ export interface UseVapiCallOptions {
   apiUrl?: string;
   enabled?: boolean;
   voiceAutoReconnect?: boolean;
+  voiceReconnectStorage?: StorageType;
   reconnectStorageKey?: string;
   onCallStart?: () => void;
   onCallEnd?: () => void;
@@ -43,6 +45,7 @@ export const useVapiCall = ({
   apiUrl,
   enabled = true,
   voiceAutoReconnect = false,
+  voiceReconnectStorage = 'session',
   reconnectStorageKey = 'vapi_widget_web_call',
   onCallStart,
   onCallEnd,
@@ -98,7 +101,10 @@ export const useVapiCall = ({
       setIsSpeaking(false);
       setIsMuted(false);
       // Clear stored call data on successful call end
-      vapiCallStorage.clearStoredCall(reconnectStorageKey);
+      vapiCallStorage.clearStoredCall(
+        reconnectStorageKey,
+        voiceReconnectStorage
+      );
       callbacksRef.current.onCallEnd?.();
     };
 
@@ -153,7 +159,7 @@ export const useVapiCall = ({
       vapi.removeListener('message', handleMessage);
       vapi.removeListener('error', handleError);
     };
-  }, [vapi, reconnectStorageKey]);
+  }, [vapi, reconnectStorageKey, voiceReconnectStorage]);
 
   useEffect(() => {
     return () => {
@@ -194,14 +200,26 @@ export const useVapiCall = ({
 
       // Store call data for reconnection if call was successful and auto-reconnect is enabled
       if (call && voiceAutoReconnect) {
-        vapiCallStorage.storeCallData(reconnectStorageKey, call, callOptions);
+        vapiCallStorage.storeCallData(
+          reconnectStorageKey,
+          call,
+          callOptions,
+          voiceReconnectStorage
+        );
       }
     } catch (error) {
       console.error('Error starting call:', error);
       setConnectionStatus('disconnected');
       callbacksRef.current.onError?.(error as Error);
     }
-  }, [vapi, callOptions, enabled, voiceAutoReconnect, reconnectStorageKey]);
+  }, [
+    vapi,
+    callOptions,
+    enabled,
+    voiceAutoReconnect,
+    voiceReconnectStorage,
+    reconnectStorageKey,
+  ]);
 
   const endCall = useCallback(
     async ({ force = false }: { force?: boolean } = {}) => {
@@ -250,7 +268,10 @@ export const useVapiCall = ({
       return;
     }
 
-    const storedData = vapiCallStorage.getStoredCallData(reconnectStorageKey);
+    const storedData = vapiCallStorage.getStoredCallData(
+      reconnectStorageKey,
+      voiceReconnectStorage
+    );
 
     if (!storedData) {
       console.warn('No stored call data found for reconnection');
@@ -264,7 +285,10 @@ export const useVapiCall = ({
       console.warn(
         'CallOptions have changed since last call, clearing stored data and skipping reconnection'
       );
-      vapiCallStorage.clearStoredCall(reconnectStorageKey);
+      vapiCallStorage.clearStoredCall(
+        reconnectStorageKey,
+        voiceReconnectStorage
+      );
       return;
     }
 
@@ -281,14 +305,17 @@ export const useVapiCall = ({
     } catch (error) {
       setConnectionStatus('disconnected');
       console.error('Reconnection failed:', error);
-      vapiCallStorage.clearStoredCall(reconnectStorageKey);
+      vapiCallStorage.clearStoredCall(
+        reconnectStorageKey,
+        voiceReconnectStorage
+      );
       callbacksRef.current.onError?.(error as Error);
     }
-  }, [vapi, enabled, reconnectStorageKey, callOptions]);
+  }, [vapi, enabled, reconnectStorageKey, voiceReconnectStorage, callOptions]);
 
   const clearStoredCall = useCallback(() => {
-    vapiCallStorage.clearStoredCall(reconnectStorageKey);
-  }, [reconnectStorageKey]);
+    vapiCallStorage.clearStoredCall(reconnectStorageKey, voiceReconnectStorage);
+  }, [reconnectStorageKey, voiceReconnectStorage]);
 
   useEffect(() => {
     if (!vapi || !enabled || !voiceAutoReconnect) {

src/hooks/useVapiCall.ts

@@ -16,6 +16,7 @@ export interface UseVapiWidgetOptions {
   apiUrl?: string;
   firstChatMessage?: string;
   voiceAutoReconnect?: boolean;
+  voiceReconnectStorage?: 'session' | 'cookies';
   reconnectStorageKey?: string;
   onCallStart?: () => void;
   onCallEnd?: () => void;
@@ -32,6 +33,7 @@ export const useVapiWidget = ({
   apiUrl,
   firstChatMessage,
   voiceAutoReconnect = false,
+  voiceReconnectStorage = 'session',
   reconnectStorageKey,
   onCallStart,
   onCallEnd,
@@ -68,6 +70,7 @@ export const useVapiWidget = ({
     apiUrl,
     enabled: voiceEnabled,
     voiceAutoReconnect,
+    voiceReconnectStorage,
     reconnectStorageKey,
     onCallStart: () => {
       // In hybrid mode, clear all conversations when starting voice