refactored the vapi config and changed styles to use native css

Author: ramsrib

NOTES.md

@@ -69,7 +69,11 @@ Located at `src/components/VapiWidget.tsx`, this component handles:
 interface VapiWidgetProps {
   // Required
   publicKey: string; // VAPI public key
-  vapiConfig: any; // Flexible VAPI configuration (assistantId, assistant object, etc.)
+
+  // VAPI Configuration (provide at least one)
+  assistantId?: string; // VAPI assistant ID (supported by both voice and chat)
+  assistant?: any; // Full assistant object (voice only)
+  assistantOverrides?: any; // Assistant overrides (supported by both voice and chat)
 
   // API Configuration
   apiUrl?: string; // Optional custom API URL for chat mode
@@ -129,23 +133,32 @@ The widget manages several state variables:
 
 ### VAPI Integration
 
-The widget uses a flexible `vapiConfig` prop that supports:
+The widget supports three types of VAPI configuration:
 
 ```typescript
-// Simple assistant ID
-vapiConfig: "assistant-id"
+// Simple assistant ID (supports both voice and chat)
+assistantId: "assistant-id"
 
-// Assistant configuration object
-vapiConfig: {
-  assistantId: "assistant-id",
-  // ... other VAPI options
+// Assistant with overrides (supports both voice and chat)
+assistantId: "assistant-id"
+assistantOverrides: {
+  variableValues: { name: 'John' },
 }
 
-// Inline assistant definition
-vapiConfig: {
-  assistant: {
-    // ... full assistant configuration
+// Full assistant object (voice only)
+assistant: {
+  model: {
+    provider: 'openai',
+    model: 'gpt-4o-mini',
+    messages: [
+      { role: 'system', content: 'You are a helpful assistant.' }
+    ]
+  },
+  voice: {
+    provider: '11labs',
+    voiceId: 'burt'
   }
+  // ... full assistant configuration
 }
 ```
 
@@ -162,7 +175,7 @@ function App() {
   return (
     <VapiWidget
       publicKey="your-vapi-public-key"
-      vapiConfig="your-assistant-id"
+      assistantId="your-assistant-id"
       position="bottom-right"
       theme="light"
       accentColor="#3B82F6"
@@ -179,22 +192,22 @@ function App() {
 ```tsx
 <VapiWidget
   publicKey="your-vapi-public-key"
-  vapiConfig="your-assistant-id"
+  assistantId="your-assistant-id"
   mode="chat"
   theme="dark"
   size="full"
   onMessage={(msg) => console.log('Message:', msg)}
 />
 ```
 
-#### Hybrid Mode
+#### Hybrid Mode with Assistant Overrides
 
 ```tsx
 <VapiWidget
   publicKey="your-vapi-public-key"
-  vapiConfig={{
-    assistantId: 'your-assistant-id',
-    // Additional VAPI options
+  assistantId="your-assistant-id"
+  assistantOverrides={{
+    variableValues: { name: 'John' },
   }}
   mode="hybrid"
   showTranscript={true}
@@ -203,6 +216,27 @@ function App() {
 />
 ```
 
+#### Voice Mode with Full Assistant Object
+
+```tsx
+<VapiWidget
+  publicKey="your-vapi-public-key"
+  assistant={{
+    model: {
+      provider: 'openai',
+      model: 'gpt-4o-mini',
+      messages: [{ role: 'system', content: 'You are a helpful assistant.' }],
+    },
+    voice: {
+      provider: '11labs',
+      voiceId: 'burt',
+    },
+  }}
+  mode="voice"
+  size="full"
+/>
+```
+
 ### 2. HTML Embedding (Data Attributes)
 
 ```html
@@ -216,7 +250,7 @@ function App() {
       data-client-widget="VapiWidget"
       data-props='{
       "publicKey": "your-vapi-public-key",
-      "vapiConfig": "your-assistant-id",
+      "assistantId": "your-assistant-id",
       "mode": "hybrid",
       "position": "bottom-right",
       "theme": "dark",
@@ -236,8 +270,8 @@ const widget = new WidgetLoader({
   component: 'VapiWidget',
   props: {
     publicKey: 'your-vapi-public-key',
-    vapiConfig: {
-      assistantId: 'your-assistant-id',
+    assistantId: 'your-assistant-id',
+    assistantOverrides: {
       model: 'gpt-4',
     },
     mode: 'chat',
@@ -456,13 +490,13 @@ Test different configurations:
 
 ```tsx
 // Test voice mode
-<VapiWidget publicKey="..." vapiConfig="..." mode="voice" />
+<VapiWidget publicKey="..." assistantId="..." mode="voice" />
 
 // Test chat mode
-<VapiWidget publicKey="..." vapiConfig="..." mode="chat" />
+<VapiWidget publicKey="..." assistantId="..." mode="chat" />
 
 // Test hybrid mode
-<VapiWidget publicKey="..." vapiConfig="..." mode="hybrid" />
+<VapiWidget publicKey="..." assistantId="..." mode="hybrid" />
 ```
 
 ## Troubleshooting
@@ -502,12 +536,3 @@ Enable detailed logging:
 // Check console for detailed logs
 window.DEBUG_VAPI = true;
 ```
-
-## Migration Guide
-
-If upgrading from an older version:
-
-1. Replace `assistantId` prop with `vapiConfig`
-2. Update size values: `sm` → `compact`, `md` → `compact`, `lg` → `full`
-3. Update color prop: `primaryColor` → `accentColor`
-4. Add `mode` prop if using chat or hybrid functionality

README.md

@@ -47,16 +47,25 @@ The simplest way to add the widget to your website:
 
 ### Required Props
 
-| Prop         | Type               | Description                               |
-| ------------ | ------------------ | ----------------------------------------- |
-| `publicKey`  | `string`           | Your VAPI public API key                  |
-| `vapiConfig` | `string \| object` | VAPI assistant ID or configuration object |
+| Prop        | Type     | Description              |
+| ----------- | -------- | ------------------------ |
+| `publicKey` | `string` | Your VAPI public API key |
+
+### VAPI Configuration Props
+
+| Prop                 | Type     | Description                                            |
+| -------------------- | -------- | ------------------------------------------------------ |
+| `assistantId`        | `string` | VAPI assistant ID (supported by both voice and chat)   |
+| `assistant`          | `object` | Full assistant configuration object (voice only)       |
+| `assistantOverrides` | `object` | Assistant overrides (supported by both voice and chat) |
+
+> **Note**: You must provide at least one of `assistantId`, `assistant`, or both `assistantId` and `assistantOverrides`.
 
 ### Optional Props
 
 | Prop                      | Type                                                           | Default                 | Description                        |
 | ------------------------- | -------------------------------------------------------------- | ----------------------- | ---------------------------------- |
-| `mode`                    | `'voice' \| 'chat' \| 'hybrid'`                                | `'voice'`               | Widget interaction mode            |
+| `mode`                    | `'voice' \| 'chat' \| 'hybrid'`                                | `'chat'`                | Widget interaction mode            |
 | `theme`                   | `'light' \| 'dark'`                                            | `'light'`               | Color theme                        |
 | `position`                | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'`        | Screen position                    |
 | `size`                    | `'tiny' \| 'compact' \| 'full'`                                | `'full'`                | Widget size                        |
@@ -98,7 +107,7 @@ function App() {
   return (
     <VapiWidget
       publicKey="your-vapi-public-key"
-      vapiConfig="your-assistant-id"
+      assistantId="your-assistant-id"
       mode="hybrid"
       position="bottom-right"
       theme="light"
@@ -147,7 +156,7 @@ Use this approach if your environment doesn't support custom elements or for bet
 ```tsx
 <VapiWidget
   publicKey="pk_123"
-  vapiConfig="asst_456"
+  assistantId="asst_456"
   mode="voice"
   size="tiny"
   showTranscript={false}
@@ -159,21 +168,21 @@ Use this approach if your environment doesn't support custom elements or for bet
 ```tsx
 <VapiWidget
   publicKey="pk_123"
-  vapiConfig="asst_456"
+  assistantId="asst_456"
   mode="chat"
   theme="dark"
   accentColor="#8B5CF6"
 />
 ```
 
-### Hybrid Mode with Consent
+### Hybrid Mode with Assistant Overrides
 
 ```tsx
 <VapiWidget
   publicKey="pk_123"
-  vapiConfig={{
-    assistantId: 'asst_456',
-    model: 'gpt-4',
+  assistantId="asst_456"
+  assistantOverrides={{
+    variableValues: { name: 'John' },
   }}
   mode="hybrid"
   requireConsent={true}
@@ -182,12 +191,33 @@ Use this approach if your environment doesn't support custom elements or for bet
 />
 ```
 
+### Voice-Only with Full Assistant Object
+
+```tsx
+<VapiWidget
+  publicKey="pk_123"
+  assistant={{
+    model: {
+      provider: 'openai',
+      model: 'gpt-4o-mini',
+      messages: [{ role: 'system', content: 'You are a helpful assistant.' }],
+    },
+    voice: {
+      provider: '11labs',
+      voiceId: 'burt',
+    },
+  }}
+  mode="voice"
+  size="full"
+/>
+```
+
 ### Custom Styling
 
 ```tsx
 <VapiWidget
   publicKey="pk_123"
-  vapiConfig="asst_456"
+  assistantId="asst_456"
   baseColor="#1a1a1a"
   accentColor="#ff6b6b"
   buttonBaseColor="#2a2a2a"

example/src/App.tsx

@@ -38,32 +38,21 @@ function App() {
     showTranscript: true,
     // Vapi Configuration
     publicKey: import.meta.env.VITE_VAPI_API_KEY || 'your-vapi-public-key',
-    vapiConfigType: 'assistantId',
     assistantId: import.meta.env.VITE_VAPI_ASSISTANT_ID || 'demo-assistant-id',
-    assistantOverrides: JSON.stringify(
-      {
-        variableValues: { name: 'John' },
+    assistantOverrides: {
+      variableValues: { name: 'John' },
+    },
+    assistant: {
+      model: {
+        provider: 'openai',
+        model: 'gpt-4o-mini',
+        messages: [{ role: 'system', content: 'You are a helpful assistant.' }],
       },
-      null,
-      2
-    ),
-    assistantObject: JSON.stringify(
-      {
-        model: {
-          provider: 'openai',
-          model: 'gpt-4o-mini',
-          messages: [
-            { role: 'system', content: 'You are a helpful assistant.' },
-          ],
-        },
-        voice: {
-          provider: '11labs',
-          voiceId: 'burt',
-        },
+      voice: {
+        provider: '11labs',
+        voiceId: 'burt',
       },
-      null,
-      2
-    ),
+    },
   });
 
   const [copied, setCopied] = useState(false);
@@ -73,27 +62,6 @@ function App() {
     setConfig((prev) => ({ ...prev, [key]: value }));
   };
 
-  const generateVapiConfig = () => {
-    try {
-      switch (config.vapiConfigType) {
-        case 'assistantId':
-          return config.assistantId;
-        case 'assistantWithOverrides':
-          return {
-            assistantId: config.assistantId,
-            assistantOverrides: JSON.parse(config.assistantOverrides),
-          };
-        case 'assistantObject':
-          return JSON.parse(config.assistantObject);
-        default:
-          return config.assistantId;
-      }
-    } catch (error) {
-      console.error('Invalid JSON in vapi config:', error);
-      return config.assistantId; // Fallback
-    }
-  };
-
   const generateEmbedCode = () => {
     const attributes = [
       `mode="${config.mode}"`,
@@ -198,16 +166,15 @@ function App() {
             </div>
 
             {/* Preview Panel */}
-            <WidgetPreview
-              config={config}
-              generateVapiConfig={generateVapiConfig}
-            />
+            <WidgetPreview config={config} />
           </div>
 
           {/* Live Widget - Only show for widget view */}
           <VapiWidget
             publicKey={config.publicKey}
-            vapiConfig={generateVapiConfig()}
+            assistantId={config.assistantId}
+            assistantOverrides={config.assistantOverrides}
+            assistant={config.assistant}
             position={config.position}
             mode={config.mode}
             theme={config.theme}