Documentation agent

1
import { useState, useEffect } from 'react';
2
import Vapi from '@vapi-ai/web';
3
4
export default function VoiceWidget() {
5
  const [vapi, setVapi] = useState(null);
6
  const [isConnected, setIsConnected] = useState(false);
7
  const [transcript, setTranscript] = useState([]);
8
9
  useEffect(() => {
10
    // Initialize Vapi Web SDK for client-side voice interactions
11
    const vapiInstance = new Vapi('YOUR_PUBLIC_API_KEY');
12
    setVapi(vapiInstance);
13
14
    // Handle call lifecycle events
15
    vapiInstance.on('call-start', () => setIsConnected(true));
16
    vapiInstance.on('call-end', () => setIsConnected(false));
17
    
18
    // Handle real-time conversation messages
19
    vapiInstance.on('message', (msg) => {
20
      if (msg.type === 'transcript') {
21
        setTranscript(prev => [...prev, { role: msg.role, text: msg.transcript }]);
22
      }
23
    });
24
25
    // Cleanup on component unmount
26
    return () => vapiInstance?.stop();
27
  }, []);
28
29
  // Start voice conversation with documentation assistant
30
  const startCall = () => vapi?.start('YOUR_ASSISTANT_ID');
31
  const endCall = () => vapi?.stop();
32
33
  return (
34
    <div style={{ position: 'fixed', bottom: 24, right: 24, background: '#000', color: '#fff', borderRadius: 12, padding: 20, width: 300 }}>
35
      {!isConnected ? (
36
        <button onClick={startCall} style={{ background: '#12A594', color: '#fff', border: 'none', borderRadius: 8, padding: '12px 24px' }}>
37
          Start Voice Chat
38
        </button>
39
      ) : (
40
        <div>
41
          <div style={{ maxHeight: 200, overflowY: 'auto', marginBottom: 16 }}>
42
            {transcript.map((msg, i) => (
43
              <div key={i} style={{ marginBottom: 8, textAlign: msg.role === 'user' ? 'right' : 'left' }}>
44
                <span style={{ background: msg.role === 'user' ? '#12A594' : '#333', padding: '8px 12px', borderRadius: 12, display: 'inline-block' }}>
45
                  {msg.text}
46
                </span>
47
              </div>
48
            ))}
49
          </div>
50
          <button onClick={endCall} style={{ background: '#e5e7eb', color: '#000', border: 'none', borderRadius: 8, padding: '8px 16px' }}>
51
            End Call
52
          </button>
53
        </div>
54
      )}
55
    </div>
56
  );
57
}