Skip to content

Commit d5fe0ee

Browse files
ramsribramsrib
committed
refactored the vapi config and changed styles to use native css
1 parent 2cb2d17 commit d5fe0ee

File tree

20 files changed

+522
-340
lines changed

20 files changed

+522
-340
lines changed

‎NOTES.md‎

Lines changed: 58 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,11 @@ Located at `src/components/VapiWidget.tsx`, this component handles:
6969
interface VapiWidgetProps {
7070
// Required
7171
publicKey: string; // VAPI public key
72-
vapiConfig: any; // Flexible VAPI configuration (assistantId, assistant object, etc.)
72+
73+
// VAPI Configuration (provide at least one)
74+
assistantId?: string; // VAPI assistant ID (supported by both voice and chat)
75+
assistant?: any; // Full assistant object (voice only)
76+
assistantOverrides?: any; // Assistant overrides (supported by both voice and chat)
7377

7478
// API Configuration
7579
apiUrl?: string; // Optional custom API URL for chat mode
@@ -129,23 +133,32 @@ The widget manages several state variables:
129133

130134
### VAPI Integration
131135

132-
The widget uses a flexible `vapiConfig` prop that supports:
136+
The widget supports three types of VAPI configuration:
133137

134138
```typescript
135-
// Simple assistant ID
136-
vapiConfig: "assistant-id"
139+
// Simple assistant ID (supports both voice and chat)
140+
assistantId: "assistant-id"
137141

138-
// Assistant configuration object
139-
vapiConfig: {
140-
assistantId: "assistant-id",
141-
// ... other VAPI options
142+
// Assistant with overrides (supports both voice and chat)
143+
assistantId: "assistant-id"
144+
assistantOverrides: {
145+
variableValues: { name: 'John' },
142146
}
143147

144-
// Inline assistant definition
145-
vapiConfig: {
146-
assistant: {
147-
// ... full assistant configuration
148+
// Full assistant object (voice only)
149+
assistant: {
150+
model: {
151+
provider: 'openai',
152+
model: 'gpt-4o-mini',
153+
messages: [
154+
{ role: 'system', content: 'You are a helpful assistant.' }
155+
]
156+
},
157+
voice: {
158+
provider: '11labs',
159+
voiceId: 'burt'
148160
}
161+
// ... full assistant configuration
149162
}
150163
```
151164

@@ -162,7 +175,7 @@ function App() {
162175
return (
163176
<VapiWidget
164177
publicKey="your-vapi-public-key"
165-
vapiConfig="your-assistant-id"
178+
assistantId="your-assistant-id"
166179
position="bottom-right"
167180
theme="light"
168181
accentColor="#3B82F6"
@@ -179,22 +192,22 @@ function App() {
179192
```tsx
180193
<VapiWidget
181194
publicKey="your-vapi-public-key"
182-
vapiConfig="your-assistant-id"
195+
assistantId="your-assistant-id"
183196
mode="chat"
184197
theme="dark"
185198
size="full"
186199
onMessage={(msg) => console.log('Message:', msg)}
187200
/>
188201
```
189202

190-
#### Hybrid Mode
203+
#### Hybrid Mode with Assistant Overrides
191204

192205
```tsx
193206
<VapiWidget
194207
publicKey="your-vapi-public-key"
195-
vapiConfig={{
196-
assistantId: 'your-assistant-id',
197-
// Additional VAPI options
208+
assistantId="your-assistant-id"
209+
assistantOverrides={{
210+
variableValues: { name: 'John' },
198211
}}
199212
mode="hybrid"
200213
showTranscript={true}
@@ -203,6 +216,27 @@ function App() {
203216
/>
204217
```
205218

219+
#### Voice Mode with Full Assistant Object
220+
221+
```tsx
222+
<VapiWidget
223+
publicKey="your-vapi-public-key"
224+
assistant={{
225+
model: {
226+
provider: 'openai',
227+
model: 'gpt-4o-mini',
228+
messages: [{ role: 'system', content: 'You are a helpful assistant.' }],
229+
},
230+
voice: {
231+
provider: '11labs',
232+
voiceId: 'burt',
233+
},
234+
}}
235+
mode="voice"
236+
size="full"
237+
/>
238+
```
239+
206240
### 2. HTML Embedding (Data Attributes)
207241

208242
```html
@@ -216,7 +250,7 @@ function App() {
216250
data-client-widget="VapiWidget"
217251
data-props='{
218252
"publicKey": "your-vapi-public-key",
219-
"vapiConfig": "your-assistant-id",
253+
"assistantId": "your-assistant-id",
220254
"mode": "hybrid",
221255
"position": "bottom-right",
222256
"theme": "dark",
@@ -236,8 +270,8 @@ const widget = new WidgetLoader({
236270
component: 'VapiWidget',
237271
props: {
238272
publicKey: 'your-vapi-public-key',
239-
vapiConfig: {
240-
assistantId: 'your-assistant-id',
273+
assistantId: 'your-assistant-id',
274+
assistantOverrides: {
241275
model: 'gpt-4',
242276
},
243277
mode: 'chat',
@@ -456,13 +490,13 @@ Test different configurations:
456490

457491
```tsx
458492
// Test voice mode
459-
<VapiWidget publicKey="..." vapiConfig="..." mode="voice" />
493+
<VapiWidget publicKey="..." assistantId="..." mode="voice" />
460494

461495
// Test chat mode
462-
<VapiWidget publicKey="..." vapiConfig="..." mode="chat" />
496+
<VapiWidget publicKey="..." assistantId="..." mode="chat" />
463497

464498
// Test hybrid mode
465-
<VapiWidget publicKey="..." vapiConfig="..." mode="hybrid" />
499+
<VapiWidget publicKey="..." assistantId="..." mode="hybrid" />
466500
```
467501

468502
## Troubleshooting
@@ -502,12 +536,3 @@ Enable detailed logging:
502536
// Check console for detailed logs
503537
window.DEBUG_VAPI = true;
504538
```
505-
506-
## Migration Guide
507-
508-
If upgrading from an older version:
509-
510-
1. Replace `assistantId` prop with `vapiConfig`
511-
2. Update size values: `sm` → `compact`, `md` → `compact`, `lg` → `full`
512-
3. Update color prop: `primaryColor` → `accentColor`
513-
4. Add `mode` prop if using chat or hybrid functionality

‎README.md‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,25 @@ The simplest way to add the widget to your website:
4747

4848
### Required Props
4949

50-
| Prop | Type | Description |
51-
| ------------ | ------------------ | ----------------------------------------- |
52-
| `publicKey` | `string` | Your VAPI public API key |
53-
| `vapiConfig` | `string \| object` | VAPI assistant ID or configuration object |
50+
| Prop | Type | Description |
51+
| ----------- | -------- | ------------------------ |
52+
| `publicKey` | `string` | Your VAPI public API key |
53+
54+
### VAPI Configuration Props
55+
56+
| Prop | Type | Description |
57+
| -------------------- | -------- | ------------------------------------------------------ |
58+
| `assistantId` | `string` | VAPI assistant ID (supported by both voice and chat) |
59+
| `assistant` | `object` | Full assistant configuration object (voice only) |
60+
| `assistantOverrides` | `object` | Assistant overrides (supported by both voice and chat) |
61+
62+
> **Note**: You must provide at least one of `assistantId`, `assistant`, or both `assistantId` and `assistantOverrides`.
5463
5564
### Optional Props
5665

5766
| Prop | Type | Default | Description |
5867
| ------------------------- | -------------------------------------------------------------- | ----------------------- | ---------------------------------- |
59-
| `mode` | `'voice' \| 'chat' \| 'hybrid'` | `'voice'` | Widget interaction mode |
68+
| `mode` | `'voice' \| 'chat' \| 'hybrid'` | `'chat'` | Widget interaction mode |
6069
| `theme` | `'light' \| 'dark'` | `'light'` | Color theme |
6170
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Screen position |
6271
| `size` | `'tiny' \| 'compact' \| 'full'` | `'full'` | Widget size |
@@ -98,7 +107,7 @@ function App() {
98107
return (
99108
<VapiWidget
100109
publicKey="your-vapi-public-key"
101-
vapiConfig="your-assistant-id"
110+
assistantId="your-assistant-id"
102111
mode="hybrid"
103112
position="bottom-right"
104113
theme="light"
@@ -147,7 +156,7 @@ Use this approach if your environment doesn't support custom elements or for bet
147156
```tsx
148157
<VapiWidget
149158
publicKey="pk_123"
150-
vapiConfig="asst_456"
159+
assistantId="asst_456"
151160
mode="voice"
152161
size="tiny"
153162
showTranscript={false}
@@ -159,21 +168,21 @@ Use this approach if your environment doesn't support custom elements or for bet
159168
```tsx
160169
<VapiWidget
161170
publicKey="pk_123"
162-
vapiConfig="asst_456"
171+
assistantId="asst_456"
163172
mode="chat"
164173
theme="dark"
165174
accentColor="#8B5CF6"
166175
/>
167176
```
168177

169-
### Hybrid Mode with Consent
178+
### Hybrid Mode with Assistant Overrides
170179

171180
```tsx
172181
<VapiWidget
173182
publicKey="pk_123"
174-
vapiConfig={{
175-
assistantId: 'asst_456',
176-
model: 'gpt-4',
183+
assistantId="asst_456"
184+
assistantOverrides={{
185+
variableValues: { name: 'John' },
177186
}}
178187
mode="hybrid"
179188
requireConsent={true}
@@ -182,12 +191,33 @@ Use this approach if your environment doesn't support custom elements or for bet
182191
/>
183192
```
184193

194+
### Voice-Only with Full Assistant Object
195+
196+
```tsx
197+
<VapiWidget
198+
publicKey="pk_123"
199+
assistant={{
200+
model: {
201+
provider: 'openai',
202+
model: 'gpt-4o-mini',
203+
messages: [{ role: 'system', content: 'You are a helpful assistant.' }],
204+
},
205+
voice: {
206+
provider: '11labs',
207+
voiceId: 'burt',
208+
},
209+
}}
210+
mode="voice"
211+
size="full"
212+
/>
213+
```
214+
185215
### Custom Styling
186216

187217
```tsx
188218
<VapiWidget
189219
publicKey="pk_123"
190-
vapiConfig="asst_456"
220+
assistantId="asst_456"
191221
baseColor="#1a1a1a"
192222
accentColor="#ff6b6b"
193223
buttonBaseColor="#2a2a2a"

‎example/src/App.tsx‎

Lines changed: 16 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -38,32 +38,21 @@ function App() {
3838
showTranscript: true,
3939
// Vapi Configuration
4040
publicKey: import.meta.env.VITE_VAPI_API_KEY || 'your-vapi-public-key',
41-
vapiConfigType: 'assistantId',
4241
assistantId: import.meta.env.VITE_VAPI_ASSISTANT_ID || 'demo-assistant-id',
43-
assistantOverrides: JSON.stringify(
44-
{
45-
variableValues: { name: 'John' },
42+
assistantOverrides: {
43+
variableValues: { name: 'John' },
44+
},
45+
assistant: {
46+
model: {
47+
provider: 'openai',
48+
model: 'gpt-4o-mini',
49+
messages: [{ role: 'system', content: 'You are a helpful assistant.' }],
4650
},
47-
null,
48-
2
49-
),
50-
assistantObject: JSON.stringify(
51-
{
52-
model: {
53-
provider: 'openai',
54-
model: 'gpt-4o-mini',
55-
messages: [
56-
{ role: 'system', content: 'You are a helpful assistant.' },
57-
],
58-
},
59-
voice: {
60-
provider: '11labs',
61-
voiceId: 'burt',
62-
},
51+
voice: {
52+
provider: '11labs',
53+
voiceId: 'burt',
6354
},
64-
null,
65-
2
66-
),
55+
},
6756
});
6857

6958
const [copied, setCopied] = useState(false);
@@ -73,27 +62,6 @@ function App() {
7362
setConfig((prev) => ({ ...prev, [key]: value }));
7463
};
7564

76-
const generateVapiConfig = () => {
77-
try {
78-
switch (config.vapiConfigType) {
79-
case 'assistantId':
80-
return config.assistantId;
81-
case 'assistantWithOverrides':
82-
return {
83-
assistantId: config.assistantId,
84-
assistantOverrides: JSON.parse(config.assistantOverrides),
85-
};
86-
case 'assistantObject':
87-
return JSON.parse(config.assistantObject);
88-
default:
89-
return config.assistantId;
90-
}
91-
} catch (error) {
92-
console.error('Invalid JSON in vapi config:', error);
93-
return config.assistantId; // Fallback
94-
}
95-
};
96-
9765
const generateEmbedCode = () => {
9866
const attributes = [
9967
`mode="${config.mode}"`,
@@ -198,16 +166,15 @@ function App() {
198166
</div>
199167

200168
{/* Preview Panel */}
201-
<WidgetPreview
202-
config={config}
203-
generateVapiConfig={generateVapiConfig}
204-
/>
169+
<WidgetPreview config={config} />
205170
</div>
206171

207172
{/* Live Widget - Only show for widget view */}
208173
<VapiWidget
209174
publicKey={config.publicKey}
210-
vapiConfig={generateVapiConfig()}
175+
assistantId={config.assistantId}
176+
assistantOverrides={config.assistantOverrides}
177+
assistant={config.assistant}
211178
position={config.position}
212179
mode={config.mode}
213180
theme={config.theme}

0 commit comments

Comments
 (0)