`; setEmbedCode(code); }; const copyToClipboard = () => { navigator.clipboard.writeText(embedCode); alert('Embed code copied to clipboard!'); }; return (

Deploy Agent: {agent?.name}

Choose where you want your AI agent to appear

{/* Platform Selection */}

Select Platforms

{platforms.map(platform => ( ))}
{/* Website Widget Configuration */} {selectedPlatforms.includes('website') && (

Website Widget Settings

setWidgetColor(e.target.value)} className="w-16 h-12 border border-gray-300 rounded-lg cursor-pointer" /> setWidgetColor(e.target.value)} className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent outline-none" />
{embedCode && ( 
                                                {embedCode}
)}
)} {/* Social Media Integration */} {selectedPlatforms.some(p => p !== 'website') && (

Social Media Integration

Connect your social media accounts to deploy your agent

{selectedPlatforms.filter(p => p !== 'website').map(platformId => { const platform = platforms.find(p => p.id === platformId); return (
{platform.name}
); })}
)} {/* Preview */}

Preview

Website preview area

{/* Widget Button */}
{agent?.avatar ? ( Agent avatar ) : ( {agent?.customName || 'Chatbot'} )}
{/* Chat Window Preview (Expanded State) */}
{agent?.avatar ? ( Agent avatar ) : (
{agent?.customName || 'Chatbot'}
)}

{agent?.customName || agent?.name || 'Chatbot'}

● Online

Chat messages appear here...

{/* Deploy Button */}
); } function DigitalTwin({ agent, setCurrentView, currentUser, agents, setAgents }) { const [micEnabled, setMicEnabled] = useState(agent?.digitalTwin?.microphone?.enabled || false); const [isRecording, setIsRecording] = useState(false); const [audioLevel, setAudioLevel] = useState(0); const [transcriptions, setTranscriptions] = useState([ { id: 1, text: 'Customer asked about pricing for enterprise plan', timestamp: '2025-11-10 14:30', processed: true }, { id: 2, text: 'Discussion about integration capabilities with Salesforce', timestamp: '2025-11-10 14:25', processed: true } ]); const [emailEnabled, setEmailEnabled] = useState(agent?.digitalTwin?.email?.enabled || false); const [emailAccount, setEmailAccount] = useState(agent?.digitalTwin?.email?.connectedAccount || ''); const [emailPassword, setEmailPassword] = useState(''); const [emailProvider, setEmailProvider] = useState('gmail'); const [processedEmails, setProcessedEmails] = useState([ { id: 1, from: 'client@company.com', subject: 'Question about API rate limits', snippet: 'Hi, I wanted to know more about...', timestamp: '2025-11-10 13:45', processed: true }, { id: 2, from: 'support@customer.com', subject: 'Integration issues', snippet: 'We are experiencing some problems...', timestamp: '2025-11-10 12:30', processed: true } ]); const canEdit = currentUser?.role === 'admin' || currentUser?.role === 'editor'; const startRecording = async () => { if (!canEdit) { alert('You do not have permission to use this feature'); return; } try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); setIsRecording(true); // Simulate audio level visualization const interval = setInterval(() => { setAudioLevel(Math.random() * 100); }, 100); // In production, this would send audio to speech-to-text service setTimeout(() => { setIsRecording(false); clearInterval(interval); setAudioLevel(0); stream.getTracks().forEach(track => track.stop()); // Add mock transcription setTranscriptions(prev => [{ id: prev.length + 1, text: 'New conversation transcribed from microphone', timestamp: new Date().toLocaleString(), processed: false }, ...prev]); }, 5000); } catch (err) { alert('Microphone access denied. Please enable microphone permissions.'); } }; const stopRecording = () => { setIsRecording(false); setAudioLevel(0); }; const connectEmail = () => { if (!emailAccount || !emailPassword) { alert('Please enter email and password'); return; } setEmailEnabled(true); alert(`Connected to ${emailAccount}. Email ingestion started!`); // Update agent with email config const updatedAgents = agents.map(a => a.id === agent.id ? { ...a, digitalTwin: { ...a.digitalTwin, email: { enabled: true, connectedAccount: emailAccount, emailsProcessed: processedEmails.length, lastSync: new Date().toLocaleString() } } } : a ); setAgents(updatedAgents); }; const syncEmails = () => { alert('Syncing emails...'); // Simulate email sync setTimeout(() => { setProcessedEmails(prev => [{ id: prev.length + 1, from: 'newclient@email.com', subject: 'Product inquiry', snippet: 'I am interested in learning more about...', timestamp: new Date().toLocaleString(), processed: false }, ...prev]); alert('Email sync complete!'); }, 1500); }; if (!canEdit) { return (

Access Denied

Only administrators and editors can access digital twin features.

); } return (

Digital Twin: {agent?.name}

Train your agent by listening to conversations and reading emails

{/* Stats Cards */}

Transcriptions Processed

{transcriptions.length}

Emails Processed

{processedEmails.length}

{/* Microphone Section */}

Voice Conversation Ingestion

Listen to and learn from live conversations

{micEnabled && (
{isRecording && (
)}
{isRecording && (

Recording in progress...

{[...Array(20)].map((_, i) => (
))}
)}

The agent will transcribe and learn from the conversation in real-time

{/* Transcriptions List */}

Recent Transcriptions

{transcriptions.map(trans => (

{trans.text}

{trans.processed ? 'Processed' : 'Processing'}

{trans.timestamp}

))}
)}
{/* Email Integration Section */}

Email Account Integration

Ingest and learn from designated email conversations

{!emailEnabled ? (

Connect Email Account

setEmailAccount(e.target.value)} placeholder="support@company.com" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none" />
setEmailPassword(e.target.value)} placeholder="••••••••" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none" />

For Gmail, use an App Password. Learn how

Security Notice

Your credentials are encrypted and stored securely. We only access emails to train your agent.

) : (

Connected to {emailAccount}

Last synced: {agent?.digitalTwin?.email?.lastSync || 'Just now'}

{/* Processed Emails List */}

Processed Emails

{processedEmails.map(email => (

{email.from}

{email.subject}

{email.snippet}

{email.processed ? 'Trained' : 'Training'}

{email.timestamp}

))}
)}
{/* Info Panel */}

How Digital Twin Works

Voice Learning: Record conversations and the agent will transcribe and learn from communication patterns, tone, and frequently asked questions

Email Intelligence: Connect your support email to automatically process customer inquiries and build a comprehensive knowledge base

Continuous Learning: The agent improves over time by analyzing real interactions and adapting responses to match your communication style

Privacy First: All data is encrypted and only used to train your specific agent. You can delete training data at any time

); } ReactDOM.render(, document.getElementById('root'));