Added chat first message

Author: ramsrib

README.md

@@ -84,10 +84,11 @@ The simplest way to add the widget to your website:
 | `emptyVoiceActiveMessage` | `string`                                                       | -                       | Message during active voice call   |
 | `emptyChatMessage`        | `string`                                                       | -                       | Message when chat is empty         |
 | `emptyHybridMessage`      | `string`                                                       | -                       | Message for hybrid mode            |
+| `firstChatMessage`        | `string`                                                       | -                       | Initial assistant message in chat  |
 | `requireConsent`          | `boolean`                                                      | `false`                 | Show consent form before first use |
-| `termsContent`            | `string`                                                       | -                       | Custom consent form text           |
-| `localStorageKey`         | `string`                                                       | `'vapi_widget_consent'` | Key for storing consent            |
-| `showTranscript`          | `boolean`                                                      | `true`                  | Show/hide voice transcript         |
+| `termsContent`            | `string`                                                       | _(default message)_     | Terms & conditions text            |
+| `localStorageKey`         | `string`                                                       | `"vapi_widget_consent"` | Key for storing consent            |
+| `showTranscript`          | `boolean`                                                      | `false`                 | Show/hide voice transcript         |
 
 ### Event Callbacks
 
@@ -133,6 +134,7 @@ Use the widget as a custom HTML element with kebab-case attributes - the cleanes
   theme="dark"
   accent-color="#8B5CF6"
   require-consent="true"
+  first-chat-message="Welcome! How can I assist you?"
 ></vapi-widget>
 ```
 
@@ -174,6 +176,7 @@ Use this approach if your environment doesn't support custom elements or for bet
   mode="chat"
   theme="dark"
   accentColor="#8B5CF6"
+  firstChatMessage="Hello! How can I help you today?"
 />
 ```
 

example/src/App.tsx

@@ -18,7 +18,7 @@ import VapiConfigurationSection from './components/builder/VapiConfigurationSect
 
 function App() {
   const [config, setConfig] = useState<WidgetConfig>({
-    mode: 'voice',
+    mode: 'chat',
     theme: 'light',
     // Default colors matching VapiWidget defaults
     baseColor: '#ffffff', // Light mode default (automatically switches to #000000 in dark mode)
@@ -35,7 +35,8 @@ function App() {
     termsContent:
       'By clicking "Agree," and each time I interact with this AI agent, I consent to the recording, storage, and sharing of my communications with third-party service providers, and as otherwise described in our Terms of Service.',
     localStorageKey: 'vapi_widget_consent',
-    showTranscript: true,
+    showTranscript: false,
+    firstChatMessage: 'Hey, How can I help you today?',
     // Vapi Configuration
     publicKey: import.meta.env.VITE_VAPI_API_KEY || 'your-vapi-public-key',
     assistantId: import.meta.env.VITE_VAPI_ASSISTANT_ID || 'demo-assistant-id',
@@ -75,6 +76,9 @@ function App() {
       `require-consent="${config.requireConsent}"`,
       `local-storage-key="${config.localStorageKey}"`,
       `show-transcript="${config.showTranscript}"`,
+      config.firstChatMessage
+        ? `first-chat-message="${config.firstChatMessage}"`
+        : null,
     ]
       .filter(Boolean)
       .join(' ');
@@ -187,6 +191,7 @@ function App() {
             termsContent={config.termsContent}
             localStorageKey={config.localStorageKey}
             showTranscript={config.showTranscript}
+            firstChatMessage={config.firstChatMessage}
             onCallStart={() => console.log('Call started')}
             onCallEnd={() => console.log('Call ended')}
             onMessage={(message) => console.log('Message:', message)}

example/src/components/builder/ModeSection.tsx

@@ -36,57 +36,57 @@ const ModeSection: React.FC<ModeSectionProps> = ({
     <div className="grid grid-cols-2 gap-4">
       <div
         className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
-          mode === 'voice'
+          mode === 'chat'
             ? 'border-teal-500 bg-teal-50'
             : 'border-gray-300 hover:border-gray-400'
         }`}
-        onClick={() => onModeChange('voice')}
+        onClick={() => onModeChange('chat')}
       >
         <div className="flex items-center space-x-3">
           <div
             className={`w-10 h-10 rounded-lg flex items-center justify-center ${
-              mode === 'voice' ? 'bg-teal-500' : 'bg-gray-200'
+              mode === 'chat' ? 'bg-teal-500' : 'bg-gray-200'
             }`}
           >
-            <MicrophoneIcon
+            <ChatCircleIcon
               size={20}
               weight="fill"
-              className={mode === 'voice' ? 'text-white' : 'text-gray-500'}
+              className={mode === 'chat' ? 'text-white' : 'text-gray-500'}
             />
           </div>
           <div>
-            <h3 className="font-medium text-gray-900">Voice</h3>
+            <h3 className="font-medium text-gray-900">Chat</h3>
             <p className="text-sm text-gray-600">
-              Users will speak with the widget
+              Users will text with the widget
             </p>
           </div>
         </div>
       </div>
 
       <div
         className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
-          mode === 'chat'
+          mode === 'voice'
             ? 'border-teal-500 bg-teal-50'
             : 'border-gray-300 hover:border-gray-400'
         }`}
-        onClick={() => onModeChange('chat')}
+        onClick={() => onModeChange('voice')}
       >
         <div className="flex items-center space-x-3">
           <div
             className={`w-10 h-10 rounded-lg flex items-center justify-center ${
-              mode === 'chat' ? 'bg-teal-500' : 'bg-gray-200'
+              mode === 'voice' ? 'bg-teal-500' : 'bg-gray-200'
             }`}
           >
-            <ChatCircleIcon
+            <MicrophoneIcon
               size={20}
               weight="fill"
-              className={mode === 'chat' ? 'text-white' : 'text-gray-500'}
+              className={mode === 'voice' ? 'text-white' : 'text-gray-500'}
             />
           </div>
           <div>
-            <h3 className="font-medium text-gray-900">Chat</h3>
+            <h3 className="font-medium text-gray-900">Voice</h3>
             <p className="text-sm text-gray-600">
-              Users will text with the widget
+              Users will speak with the widget
             </p>
           </div>
         </div>

example/src/components/builder/VapiConfigurationSection.tsx

@@ -131,6 +131,24 @@ const VapiConfigurationSection: React.FC<VapiConfigurationSectionProps> = ({
             Complete assistant configuration object (only used for voice calls)
           </p>
         </div>
+
+        {/* First Chat Message */}
+        <div>
+          <label className="block text-sm font-medium mb-2 text-gray-700">
+            First Chat Message
+            <span className="text-xs text-gray-500 ml-2">(Chat Only)</span>
+          </label>
+          <input
+            type="text"
+            value={config.firstChatMessage || ''}
+            onChange={(e) => updateConfig('firstChatMessage', e.target.value)}
+            className="w-full p-2 rounded-md border bg-white border-gray-300 text-gray-900 text-sm"
+            placeholder="Hey, How can I help you today?"
+          />
+          <p className="text-xs mt-1 text-gray-500">
+            The initial message displayed when the chat opens
+          </p>
+        </div>
       </div>
     </div>
   );

example/src/types/index.ts

@@ -15,6 +15,7 @@ export interface WidgetConfig {
   termsContent: string;
   localStorageKey: string;
   showTranscript: boolean;
+  firstChatMessage?: string;
 
   // Vapi Configuration
   apiUrl?: string;

src/components/VapiWidget.tsx

@@ -39,10 +39,11 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
   emptyVoiceActiveMessage = 'Listening...',
   emptyChatMessage = 'Type a message to start chatting',
   emptyHybridMessage = 'Use voice or text to communicate',
+  firstChatMessage,
   requireConsent = false,
   termsContent = 'By clicking "Agree," and each time I interact with this AI agent, I consent to the recording, storage, and sharing of my communications with third-party service providers, and as otherwise described in our Terms of Service.',
   localStorageKey = 'vapi_widget_consent',
-  showTranscript = true,
+  showTranscript = false,
   onCallStart,
   onCallEnd,
   onMessage,
@@ -62,6 +63,7 @@ const VapiWidget: React.FC<VapiWidgetProps> = ({
     assistant,
     assistantOverrides,
     apiUrl,
+    firstChatMessage,
     onCallStart,
     onCallEnd,
     onMessage,

src/components/types.ts

@@ -34,6 +34,9 @@ export interface VapiWidgetProps {
   emptyChatMessage?: string;
   emptyHybridMessage?: string;
 
+  // Initial Chat Message
+  firstChatMessage?: string;
+
   // Legal & Consent
   requireConsent?: boolean;
   termsContent?: string;

src/hooks/useVapiChat.ts

@@ -32,6 +32,7 @@ export interface UseVapiChatOptions {
   assistantOverrides?: AssistantOverrides;
   apiUrl?: string;
   sessionId?: string;
+  firstChatMessage?: string;
   onMessage?: (message: ChatMessage) => void;
   onError?: (error: Error) => void;
 }
@@ -167,11 +168,23 @@ export const useVapiChat = ({
   assistantOverrides,
   apiUrl,
   sessionId: initialSessionId,
+  firstChatMessage,
   onMessage,
   onError,
 }: UseVapiChatOptions): VapiChatState &
   VapiChatHandlers & { isEnabled: boolean } => {
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [messages, setMessages] = useState<ChatMessage[]>(() => {
+    if (enabled && firstChatMessage) {
+      return [
+        {
+          role: 'assistant',
+          content: firstChatMessage,
+          timestamp: new Date(),
+        },
+      ];
+    }
+    return [];
+  });
   const [isTyping, setIsTyping] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [sessionId, setSessionId] = useState<string | undefined>(
@@ -258,9 +271,30 @@ export const useVapiChat = ({
             onMessage
           );
 
+        let input: string | Array<{ role: string; content: string }>;
+        if (
+          firstChatMessage &&
+          firstChatMessage.trim() !== '' &&
+          messages.length === 1 &&
+          messages[0].role === 'assistant'
+        ) {
+          input = [
+            {
+              role: 'assistant',
+              content: firstChatMessage,
+            },
+            {
+              role: 'user',
+              content: text.trim(),
+            },
+          ];
+        } else {
+          input = text.trim();
+        }
+
         const abort = await clientRef.current!.streamChat(
           {
-            input: text.trim(),
+            input,
             assistantId: assistantId!,
             assistantOverrides,
             sessionId,
@@ -291,11 +325,24 @@ export const useVapiChat = ({
       addMessage,
       onError,
       onMessage,
+      firstChatMessage,
+      messages,
     ]
   );
 
   const clearMessages = useCallback(() => {
-    setMessages([]);
+    // Reset to firstChatMessage if provided, otherwise empty array
+    if (enabled && firstChatMessage) {
+      setMessages([
+        {
+          role: 'assistant',
+          content: firstChatMessage,
+          timestamp: new Date(),
+        },
+      ]);
+    } else {
+      setMessages([]);
+    }
 
     // Abort any ongoing stream
     abortFnRef.current?.();
@@ -310,7 +357,7 @@ export const useVapiChat = ({
 
     // Clear sessionId when clearing messages to start fresh
     setSessionId(undefined);
-  }, []);
+  }, [enabled, firstChatMessage]);
 
   return {
     // State

src/hooks/useVapiWidget.ts

@@ -14,6 +14,7 @@ export interface UseVapiWidgetOptions {
   assistant?: any;
   assistantOverrides?: AssistantOverrides;
   apiUrl?: string;
+  firstChatMessage?: string;
   onCallStart?: () => void;
   onCallEnd?: () => void;
   onMessage?: (message: any) => void;
@@ -27,6 +28,7 @@ export const useVapiWidget = ({
   assistant,
   assistantOverrides,
   apiUrl,
+  firstChatMessage,
   onCallStart,
   onCallEnd,
   onMessage,
@@ -97,6 +99,7 @@ export const useVapiWidget = ({
     apiUrl,
     onMessage, // Keep the callback for external notifications
     onError,
+    firstChatMessage,
   } as UseVapiChatOptions);
 
   // Combine voice and chat conversations

src/utils/vapiChatClient.ts

@@ -7,7 +7,7 @@ export interface AssistantOverrides {
 }
 
 export interface VapiChatMessage {
-  input: string;
+  input: string | Array<{ role: string; content: string }>;
   assistantId: string;
   assistantOverrides?: AssistantOverrides;
   sessionId?: string;