+ {/* Header */}
+
+
+
+ {/* Provider selector */}
+
+
+
+
+
+ {/* ElevenLabs Agent ID (conditional) */}
+ {provider === 'elevenlabs' && (
+
+
+ setAgentId(e.target.value)}
+ placeholder="Your ElevenLabs Agent ID"
+ disabled={status !== 'idle'}
+ className="rounded-lg border border-orange-500/20 bg-gray-900 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50 w-64"
+ />
+
+ )}
+
+
+ {/* Status */}
+
+
+ {getModeIndicator()}
+
+
+
+
+ {/* Tools indicator */}
+ {provider === 'openai' && (
+
+
+
+ Tools enabled:
+ getCurrentTime
+ •
+ getWeather
+ •
+ setReminder
+ •
+ searchKnowledge
+
+
+ )}
+
+ {/* Messages area */}
+
+ {messages.length === 0 && status === 'idle' && (
+
+
+
Voice Chat with Tools
+
+ Click "Start Conversation" to begin talking with the AI
+
+
+ Try asking: "What time is it?" or "What's the weather in San
+ Francisco?"
+
+
+ )}
+
+ {messages.map((message) => (
+
+
+ {message.role === 'assistant' ? (
+
+ AI
+
+ ) : (
+
+ U
+
+ )}
+
+ {message.parts.map((part, idx) => {
+ if (part.type === 'audio') {
+ return (
+
+ {part.transcript}
+
+ )
+ }
+ if (part.type === 'text') {
+ return (
+
+ {part.content}
+
+ )
+ }
+ return null
+ })}
+ {message.interrupted && (
+
+ (interrupted)
+
+ )}
+
+
+
+ ))}
+
+ {/* Pending transcripts */}
+ {pendingUserTranscript && (
+
+
+
+ U
+
+
{pendingUserTranscript}...
+
+
+ )}
+
+ {pendingAssistantTranscript && (
+
+
+
+ AI
+
+
+ {pendingAssistantTranscript}...
+
+
+
+ )}
+
+
+
+
+ {/* Error display */}
+ {error && (
+
+ Error: {error.message}
+
+ )}
+
+ {/* Audio visualization & controls */}
+
+ {/* Volume meters and waveforms */}
+ {status === 'connected' && (
+
+ {/* Input (Microphone) */}
+
+
+
+
+ {Math.round(inputLevel * 100)}%
+
+
+
+ {/* Output (Speaker) */}
+
+
+
+
+ {Math.round(outputLevel * 100)}%
+
+
+
+
+ )}
+
+ {/* Controls */}
+
+ {status === 'idle' ? (
+
+ ) : (
+ <>
+ {mode === 'speaking' && (
+
+ )}
+
+
+ )}
+
+
+