/* ============================================================================ Vocal · Bot Studio — bots.vocal.ch Console dédiée à la conception, l'entraînement, le test et la publication des bots vocaux IA. Backend partagé : api.vocal.ch (worker ch-vocal-api). ============================================================================ */ const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment } = React; const CONFIG = { API_URL: 'https://api.vocal.ch', MY_URL: 'https://my.vocal.ch', DEV_URL: 'https://developers.vocal.ch', }; // ==================== ADMIN IMPERSONATION + CROSS-SUBDOMAIN SSO ==================== // Si on arrive depuis my.vocal.ch ou adm.vocal.ch avec un token, on l'adopte. (() => { try { const params = new URLSearchParams(window.location.search); const tok = params.get('impersonate_token') || params.get('token'); if (tok) { localStorage.setItem('vocal_my_token', tok); const userB64 = params.get('impersonate_user') || params.get('user'); if (userB64) { try { const u = JSON.parse(decodeURIComponent(escape(atob(userB64)))); localStorage.setItem('vocal_my_user', JSON.stringify(u)); } catch (e) {} } sessionStorage.setItem('vocal_my_impersonating', '1'); const clean = window.location.pathname + window.location.hash; window.history.replaceState(null, '', clean); } } catch (e) {} })(); // ==================== CONSTANTS ==================== const LANGS = [ { id: 'fr', label: 'Français' }, { id: 'de', label: 'Deutsch' }, { id: 'en', label: 'English' }, { id: 'it', label: 'Italiano' }, ]; const VOICES = [ { id: 'alloy', label: 'Alloy — neutre & polyvalent', provider: 'openai' }, { id: 'echo', label: 'Echo — masculin chaleureux', provider: 'openai' }, { id: 'fable', label: 'Fable — narratif', provider: 'openai' }, { id: 'onyx', label: 'Onyx — masculin grave', provider: 'openai' }, { id: 'nova', label: 'Nova — féminin énergique', provider: 'openai' }, { id: 'shimmer', label: 'Shimmer — féminin doux', provider: 'openai' }, ]; const SECTOR_TEMPLATES = [ { id: 'restaurant', iconKey: 'Utensils', kind: 'resto', title: 'Restaurant', desc: 'Réservations, horaires, menu du jour, allergènes, take-away.', features: ['Réservations', 'Carte du jour', 'Allergènes', 'Take-away'], defaults: { name: 'Bot Restaurant', description: 'Assistant vocal pour mon restaurant', language: 'fr', voice: 'nova', greeting: 'Bonjour, restaurant {NOM}, j\'écoute !', instructions: 'Tu es l\'hôte vocal du restaurant {NOM} situé à {VILLE}. Tu prends les réservations (date, heure, nombre de personnes, nom). Tu peux annoncer les horaires d\'ouverture, le menu du jour, les allergènes courants. Tu es chaleureux, concis. Si la demande sort de ton périmètre, tu transfères au {TRANSFERT}.', appointments_enabled: true, appointment_duration_minutes: 90, }, }, { id: 'medical', iconKey: 'Stethoscope', kind: 'medical', title: 'Cabinet médical / dentaire', desc: 'Prise de rendez-vous, urgences, ordonnances, instructions pré-RDV.', features: ['Prise de RDV', 'Urgences', 'Triage léger', 'FAQ patient'], defaults: { name: 'Bot Cabinet médical', description: 'Assistant vocal pour mon cabinet médical', language: 'fr', voice: 'shimmer', greeting: 'Cabinet du Dr {NOM}, bonjour. Je suis l\'assistant vocal, comment puis-je vous aider ?', instructions: 'Tu es l\'assistant vocal du cabinet médical du Dr {NOM}. Tu prends les rendez-vous, indiques les horaires d\'ouverture, donnes les consignes de préparation pour les examens. Tu NE donnes JAMAIS de conseil médical. En cas d\'urgence vitale, tu rediriges immédiatement vers le 144. Pour toute question médicale, tu transfères au {TRANSFERT} ou tu indiques de rappeler aux heures d\'ouverture.', appointments_enabled: true, appointment_duration_minutes: 20, }, }, { id: 'legal', iconKey: 'Gavel', kind: 'legal', title: 'Cabinet d\'avocat / fiduciaire', desc: 'Premier contact qualifié, qualification BANT, prise de rendez-vous.', features: ['Qualification client', 'Lead scoring', 'RDV consultation', 'FAQ honoraires'], defaults: { name: 'Bot Cabinet juridique', description: 'Assistant vocal pour cabinet d\'avocat / fiduciaire', language: 'fr', voice: 'echo', greeting: 'Étude {NOM}, bonjour. Je suis l\'assistant de premier contact.', instructions: 'Tu es l\'assistant vocal de l\'étude {NOM}. Tu qualifies les nouveaux dossiers (type de litige/dossier, urgence, budget approximatif), tu donnes les horaires, tu fixes une consultation initiale (45 min). Tu NE donnes JAMAIS de conseil juridique au téléphone. Tu transfères au {TRANSFERT} les dossiers urgents ou complexes.', appointments_enabled: true, appointment_duration_minutes: 45, lead_scoring_enabled: true, }, }, { id: 'garage', iconKey: 'Wrench', kind: 'garage', title: 'Garage / atelier auto', desc: 'Prise de RDV service, devis pneus, rappel CT, urgences dépannage.', features: ['RDV service', 'Devis express', 'Rappel CT', 'Dépannage'], defaults: { name: 'Bot Garage', description: 'Assistant vocal pour mon garage', language: 'fr', voice: 'onyx', greeting: 'Garage {NOM}, bonjour, comment puis-je vous aider ?', instructions: 'Tu es l\'assistant du garage {NOM}. Tu prends des rendez-vous service (vidange, pneus, contrôle technique, diagnostic), tu donnes les horaires, les marques travaillées et les délais habituels. Pour un dépannage ou un véhicule en panne, tu transfères immédiatement au {TRANSFERT}. Pour les devis précis, tu prends les coordonnées et fais rappeler.', appointments_enabled: true, appointment_duration_minutes: 30, }, }, { id: 'ecom', iconKey: 'Cart', kind: 'ecom', title: 'E-commerce', desc: 'Suivi de commande, retours, FAQ produit, intégration Shopify.', features: ['Suivi commande', 'Politique retour', 'FAQ produit', 'API Shopify'], defaults: { name: 'Bot E-commerce', description: 'Assistant vocal pour ma boutique en ligne', language: 'fr', voice: 'nova', greeting: 'Boutique {NOM}, bonjour ! Comment puis-je vous aider avec votre commande ?', instructions: 'Tu es l\'assistant vocal de la boutique {NOM}. Tu peux répondre sur le statut d\'une commande (demande le n°), expliquer la politique de retour (14 jours), donner les délais de livraison, répondre aux questions produit en t\'appuyant sur la base de connaissance. Pour les SAV complexes ou réclamations, tu transfères au {TRANSFERT}.', appointments_enabled: false, }, }, { id: 'beauty', iconKey: 'Scissors', kind: 'beauty', title: 'Salon de coiffure / beauté', desc: 'Prise de RDV, prestations, prix, conseils produits.', features: ['RDV multi-prestation', 'Tarifs', 'Confirmation SMS', 'Annulation'], defaults: { name: 'Bot Salon', description: 'Assistant vocal pour mon salon de beauté', language: 'fr', voice: 'shimmer', greeting: 'Salon {NOM}, bonjour ! Souhaitez-vous prendre rendez-vous ?', instructions: 'Tu es l\'assistante du salon {NOM}. Tu prends les rendez-vous en demandant la prestation (coupe, couleur, brushing, soin…), la coiffeuse préférée, la date et l\'heure. Tu donnes les tarifs courants et les durées approximatives. Tu confirmes par SMS.', appointments_enabled: true, appointment_duration_minutes: 60, }, }, { id: 'blank', iconKey: 'Sparkles', kind: 'other', title: 'Bot vierge', desc: 'Partez d\'une page blanche pour un cas d\'usage spécifique.', features: ['Configuration libre', 'Sources URL', 'KB Q&A', 'Voix premium'], defaults: { name: 'Mon bot', description: '', language: 'fr', voice: 'alloy', greeting: 'Bonjour, je vous écoute.', instructions: 'Tu es un assistant vocal professionnel. Tu réponds de manière concise et claire. Si tu ne sais pas répondre, tu proposes de rappeler le client.', appointments_enabled: false, }, }, ]; // Voix de démonstration pour la marketplace (à remplacer par GET /marketplace/voices côté API). const MARKETPLACE_VOICES_DEMO = [ { id: 'mkt_1', name: 'Sophie · Romande', creator: 'Studio Léman', desc: 'Voix féminine douce, accent romand, idéale médical/beauté.', tags: ['FR-CH', 'féminin', 'doux'], price_chf: 19, calls_used: 1240 }, { id: 'mkt_2', name: 'Markus · Bern', creator: 'Voiceworks GmbH', desc: 'Voix masculine grave, Schwizerdütsch berniñois, garage/PME.', tags: ['DE-CH', 'masculin', 'grave'], price_chf: 24, calls_used: 870 }, { id: 'mkt_3', name: 'Luca · Ticino', creator: 'Studio Tre', desc: 'Voix masculine chaleureuse, italien tessinois, restaurant/hôtel.', tags: ['IT-CH', 'masculin', 'chaud'], price_chf: 22, calls_used: 540 }, { id: 'mkt_4', name: 'Emma · Geneva', creator: 'Lac Voice', desc: 'Voix féminine premium, accent genevois pro, juridique/finance.', tags: ['FR-CH', 'féminin', 'pro'], price_chf: 29, calls_used: 2110 }, { id: 'mkt_5', name: 'Hans · Zürich', creator: 'Voiceworks GmbH', desc: 'Voix masculine corporate, Schwizerdütsch zurichois, B2B.', tags: ['DE-CH', 'masculin', 'corporate'], price_chf: 26, calls_used: 1620 }, { id: 'mkt_6', name: 'Léa · Vaud', creator: 'Vocal Originals', desc: 'Voix féminine jeune et dynamique, parfait e-commerce romand.', tags: ['FR-CH', 'féminin', 'jeune'], price_chf: 21, calls_used: 980 }, ]; // ==================== FORMATTERS ==================== function fmtDate(d) { if (!d) return '-'; return new Date(d).toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit', year: 'numeric' }); } function fmtDateTime(d) { if (!d) return '-'; const x = new Date(d); return `${String(x.getDate()).padStart(2,'0')}/${String(x.getMonth()+1).padStart(2,'0')}/${x.getFullYear()} ${String(x.getHours()).padStart(2,'0')}:${String(x.getMinutes()).padStart(2,'0')}`; } function fmtDuration(s) { if (!s) return '-'; const m = Math.floor(s/60); const sec = s%60; if (m === 0) return `${sec}s`; return `${m}m${sec>0?String(sec).padStart(2,'0')+'s':''}`; } function fmtCurrency(amount, currency = 'CHF') { if (amount === null || amount === undefined) return '-'; return `${Number(amount).toFixed(2)} ${currency}`; } function fmtRelative(d) { if (!d) return '-'; const diff = (Date.now() - new Date(d).getTime()) / 1000; if (diff < 60) return 'à l\'instant'; if (diff < 3600) return `il y a ${Math.floor(diff / 60)} min`; if (diff < 86400) return `il y a ${Math.floor(diff / 3600)} h`; if (diff < 604800) return `il y a ${Math.floor(diff / 86400)} j`; return fmtDate(d); } // ==================== ICONS (subset) ==================== const Icon = (path, viewBox = '0 0 24 24') => ({ className = 'w-5 h-5' }) => ( {path} ); const Icons = { Robot: Icon(), Home: Icon(), Settings: Icon(<>), Sparkles: Icon(), Mic: Icon(<>), Globe: Icon(), Document: Icon(), Brain: Icon(), Database: Icon(<>), Play: Icon(<>), Beaker: Icon(), Phone: Icon(), Calendar: Icon(), AlertCircle: Icon(), Clock: Icon(), Chart: Icon(), Plus: Icon(), ChevronLeft: Icon(), ChevronRight: Icon(), ChevronDown: Icon(), Trash: Icon(), Edit: Icon(), Send: Icon(), PaperPlane: Icon(), Refresh: Icon(), Menu: Icon(), LogOut: Icon(), Check: Icon(), X: Icon(), Upload: Icon(), Star: Icon(), Lightning: Icon(), Branch: Icon(<>), External: Icon(), Search: Icon(), Phone2: Icon(), Headset: Icon(), Bolt: Icon(), Layers: Icon(), Utensils: Icon(), Stethoscope: Icon(), Gavel: Icon(), Wrench: Icon(), Cart: Icon(), Scissors: Icon(<>), Lightbulb: Icon(), }; // ==================== API ==================== const api = { token: null, async req(path, options = {}) { const headers = { 'Content-Type': 'application/json', ...options.headers }; if (this.token) headers['Authorization'] = `Bearer ${this.token}`; try { const resp = await fetch(`${CONFIG.API_URL}${path}`, { ...options, headers }); const data = await resp.json().catch(() => ({})); if (!resp.ok && !data.error) data.error = `HTTP ${resp.status}`; data._status = resp.status; return data; } catch (e) { return { error: 'Erreur réseau', _status: 0 }; } }, get(path) { return this.req(path); }, post(path, body) { return this.req(path, { method: 'POST', body: JSON.stringify(body || {}) }); }, put(path, body) { return this.req(path, { method: 'PUT', body: JSON.stringify(body || {}) }); }, del(path) { return this.req(path, { method: 'DELETE' }); }, }; // ==================== NOTIFICATIONS ==================== const useNotifications = () => { const show = useCallback((message, type = 'info') => { const el = document.createElement('div'); el.style.cssText = 'position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;padding:0.85rem 1.2rem;border-radius:12px;font-size:0.85rem;font-weight:600;color:#fff;box-shadow:0 12px 32px rgba(15,23,42,0.18);max-width:360px;font-family:Plus Jakarta Sans,sans-serif;animation:fadeIn 0.2s ease;'; const colors = { success: '#16a34a', error: '#dc2626', info: '#6366f1', warning: '#ea580c' }; el.style.background = colors[type] || colors.info; el.textContent = message; document.body.appendChild(el); setTimeout(() => { el.style.opacity = '0'; el.style.transform = 'translateY(8px)'; el.style.transition = 'all 0.25s'; setTimeout(() => el.remove(), 280); }, 3500); }, []); return useMemo(() => ({ success: (m) => show(m, 'success'), error: (m) => show(m, 'error'), info: (m) => show(m, 'info'), warning: (m) => show(m, 'warning'), }), [show]); }; // ==================== ROUTING ==================== function parseHash() { const h = (window.location.hash || '').replace('#', ''); if (!h) return { view: 'bots' }; if (h.startsWith('bot-')) { const parts = h.slice(4).split('/'); const botId = parseInt(parts[0]); if (!Number.isFinite(botId)) return { view: 'bots' }; return { view: 'bot-detail', botId, panel: parts[1] || 'overview' }; } const tops = ['bots', 'templates', 'marketplace', 'analytics', 'account']; return { view: tops.includes(h) ? h : 'bots' }; } function buildHash(view, opts = {}) { if (view === 'bot-detail') return `bot-${opts.botId}/${opts.panel || 'overview'}`; return view; } // ==================== CONTEXT ==================== const AppContext = createContext(); const useApp = () => useContext(AppContext); const AppProvider = ({ children }) => { const [user, setUser] = useState(() => { const saved = localStorage.getItem('vocal_my_user'); const token = localStorage.getItem('vocal_my_token'); if (saved && token) { api.token = token; try { return { ...JSON.parse(saved), token }; } catch { return null; } } return null; }); const [route, setRoute] = useState(parseHash); const [sidebarOpen, setSidebarOpen] = useState(false); const notify = useNotifications(); useEffect(() => { const onHash = () => setRoute(parseHash()); window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); const navigate = useCallback((view, opts = {}) => { const next = view === 'bot-detail' ? { view, botId: opts.botId, panel: opts.panel || 'overview' } : { view }; setRoute(next); setSidebarOpen(false); try { window.history.pushState(null, '', `#${buildHash(view, opts)}`); } catch (e) {} }, []); const login = useCallback((userData, token) => { api.token = token; setUser({ ...userData, token }); localStorage.setItem('vocal_my_user', JSON.stringify(userData)); localStorage.setItem('vocal_my_token', token); notify.success('Connexion réussie'); }, [notify]); const logout = useCallback(() => { api.post('/auth/logout').catch(() => {}); api.token = null; setUser(null); localStorage.removeItem('vocal_my_user'); localStorage.removeItem('vocal_my_token'); notify.info('Déconnexion réussie'); }, [notify]); const value = useMemo(() => ({ user, setUser, route, navigate, login, logout, sidebarOpen, setSidebarOpen, notify, }), [user, route, navigate, login, logout, sidebarOpen, notify]); return {children}; }; // ==================== LOGIN ==================== const LoginScreen = () => { const { login } = useApp(); const [email, setEmail] = useState(''); const [code, setCode] = useState(''); const [step, setStep] = useState('email'); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); useEffect(() => { const params = new URLSearchParams(window.location.search); const magicEmail = params.get('email'); const magicCode = params.get('code'); if (magicEmail && magicCode) { window.history.replaceState({}, '', window.location.pathname); setLoading(true); fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: magicEmail, code: magicCode }), }).then(r => r.json()).then(data => { if (data.success && data.token) login(data.user || { email: magicEmail }, data.token); else { setEmail(magicEmail); setStep('code'); setError(data.error || 'Lien expiré'); } }).catch(() => { setEmail(magicEmail); setStep('code'); setError('Erreur réseau'); }) .finally(() => setLoading(false)); } }, []); const handleSendCode = async (e) => { e.preventDefault(); if (!email) return; setLoading(true); setError(''); try { const r = await fetch(`${CONFIG.API_URL}/auth/request-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }), }).then(r => r.json()); if (r.success) setStep('code'); else setError(r.error || 'Erreur'); } catch (e) { setError('Erreur réseau'); } finally { setLoading(false); } }; const handleVerify = async (e) => { e.preventDefault(); if (!code) return; setLoading(true); setError(''); try { const r = await fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, code }), }).then(r => r.json()); if (r.success && r.token) login(r.user || { email }, r.token); else setError(r.error || 'Code invalide'); } catch (e) { setError('Erreur réseau'); } finally { setLoading(false); } }; return (
Vocal Bot Studio

{step === 'email' ? 'Concevez vos bots vocaux' : 'Vérifiez votre email'}

{step === 'email' ? 'Recevez un code de connexion sécurisé à usage unique. Aucun mot de passe à gérer.' : `Un code à 6 chiffres a été envoyé à ${email}.`}

{error &&
{error}
} {step === 'email' ? (
setEmail(e.target.value)} placeholder="vous@entreprise.ch" required autoFocus />
Vous avez déjà un compte sur my.vocal.ch ? Utilisez la même adresse.
) : (
setCode(e.target.value.replace(/\D/g, ''))} placeholder="123456" required autoFocus style={{ letterSpacing: '0.6em', textAlign: 'center', fontSize: '1.25rem', fontWeight: 700 }} />
)}
); }; // ==================== SHARED COMPONENTS ==================== const PageHeader = ({ title, subtitle, actions, breadcrumb }) => { const { setSidebarOpen } = useApp(); return (
{breadcrumb &&
{breadcrumb}
}

{title}

{subtitle &&

{subtitle}

}
{actions &&
{actions}
}
); }; const SoonBanner = ({ endpoint, children }) => (
Aperçu produit. {children || 'Cette section affiche l\'UX cible. '} {endpoint && <>Pour activer le mode live, branchez l'endpoint {endpoint} côté ch-vocal-api.} {' '} { e.preventDefault(); window.open('https://github.com/', '_blank'); }} style={{ color: '#713f12', textDecoration: 'underline' }}>Voir spec V2_FEATURES.md
); const EmptyState = ({ icon: I = Icons.Sparkles, title, desc, action }) => (

{title}

{desc &&

{desc}

} {action}
); const Spinner = ({ size = 24 }) => ( ); const StatusDot = ({ status }) => { const cls = status === 'active' ? 'live' : status === 'draft' ? 'draft' : 'paused'; const label = status === 'active' ? 'En production' : status === 'draft' ? 'Brouillon' : 'En pause'; return <>{label}; }; // ==================== SIDEBAR ==================== const TOP_LEVEL_NAV = [ { id: 'bots', label: 'Mes bots', icon: Icons.Robot, section: 'studio' }, { id: 'templates', label: 'Templates par secteur', icon: Icons.Layers, section: 'studio' }, { id: 'marketplace', label: 'Marketplace voix', icon: Icons.Mic, section: 'studio' }, { id: 'analytics', label: 'Analytics globales', icon: Icons.Chart, section: 'compte' }, { id: 'account', label: 'Réglages compte', icon: Icons.Settings, section: 'compte' }, ]; const TOP_LEVEL_SECTIONS = { studio: 'BOT STUDIO', compte: 'COMPTE' }; const BOT_NAV = [ { id: 'overview', label: 'Vue d\'ensemble', icon: Icons.Home, section: 'config' }, { id: 'config', label: 'Configuration', icon: Icons.Settings, section: 'config' }, { id: 'personality', label: 'Personnalité & prompt', icon: Icons.Brain, section: 'config' }, { id: 'voice', label: 'Voix & ton', icon: Icons.Mic, section: 'config' }, { id: 'sources', label: 'Sources URL/PDF', icon: Icons.Globe, section: 'know' }, { id: 'knowledge', label: 'Connaissances Q&A', icon: Icons.Document, section: 'know' }, { id: 'learnings', label: 'Apprentissages auto', icon: Icons.Sparkles, section: 'know' }, { id: 'dataset', label: 'Dataset (CSV)', icon: Icons.Database, section: 'know', soon: true }, { id: 'simulator', label: 'Simulator (live)', icon: Icons.Play, section: 'test' }, { id: 'abtest', label: 'A/B testing', icon: Icons.Beaker, section: 'test', soon: true }, { id: 'conversations', label: 'Conversations', icon: Icons.Phone2, section: 'test' }, { id: 'appointments', label: 'Rendez-vous', icon: Icons.Calendar, section: 'biz' }, { id: 'leads', label: 'Lead scoring', icon: Icons.AlertCircle, section: 'biz' }, { id: 'lines', label: 'Lignes connectées', icon: Icons.Headset, section: 'biz' }, { id: 'versions', label: 'Versions', icon: Icons.Branch, section: 'hist', soon: true }, { id: 'analytics', label: 'Analytics', icon: Icons.Chart, section: 'hist', soon: true }, ]; const BOT_SECTIONS = { config: 'CONFIGURATION', know: 'CONNAISSANCE', test: 'TEST & QUALITÉ', biz: 'COMMERCIAL', hist: 'HISTORIQUE', }; const Sidebar = ({ currentBot }) => { const { user, route, navigate, logout, sidebarOpen, setSidebarOpen } = useApp(); const inBotMode = route.view === 'bot-detail' && currentBot; const groupedTop = Object.entries(TOP_LEVEL_SECTIONS).map(([key, label]) => ({ label, items: TOP_LEVEL_NAV.filter(i => i.section === key), })); const groupedBot = Object.entries(BOT_SECTIONS).map(([key, label]) => ({ label, items: BOT_NAV.filter(i => i.section === key), })); return ( <> {sidebarOpen &&
setSidebarOpen(false)} />} ); }; /* ============================================================================ TOP-LEVEL VIEWS ============================================================================ */ // ==================== BOTS LIST ==================== const BotsListView = () => { const { navigate, notify } = useApp(); const [bots, setBots] = useState(null); const [creating, setCreating] = useState(false); const load = useCallback(async () => { const r = await api.get('/my/bots'); if (r?.error) notify.error(r.error); else setBots(r.bots || r.data || []); }, [notify]); useEffect(() => { load(); }, [load]); const createBlank = async () => { setCreating(true); const r = await api.post('/my/bots', { name: 'Nouveau bot', voice: 'alloy', language: 'fr', greeting: 'Bonjour, je vous écoute.' }); setCreating(false); if (r?.error) return notify.error(r.error); notify.success('Bot créé'); const id = r.bot?.id || r.id; if (id) navigate('bot-detail', { botId: id, panel: 'config' }); else load(); }; return ( <> } />
{bots === null ? (
) : bots.length === 0 ? (
} /> ) : (
{bots.map(b => (
navigate('bot-detail', { botId: b.id })}>

{b.name}

{b.description || 'Aucune description.'}

{b.voice || 'alloy'} {(b.language || 'fr').toUpperCase()} {b.created_at && {fmtRelative(b.created_at)}}
))}
Nouveau bot
Page blanche · 1 min de setup
)}
); }; // ==================== TEMPLATES ==================== const TemplatesView = () => { const { navigate, notify } = useApp(); const [picked, setPicked] = useState(null); const [creating, setCreating] = useState(false); const instantiate = async (tpl) => { setCreating(true); const r = await api.post('/my/bots', { ...tpl.defaults, source_template: tpl.id }); setCreating(false); if (r?.error) return notify.error(r.error); notify.success(`Bot "${tpl.title}" créé`); const id = r.bot?.id || r.id; if (id) navigate('bot-detail', { botId: id, panel: 'personality' }); }; return ( <> navigate('bots')}> Retour} />
{SECTOR_TEMPLATES.map(tpl => { const TplIcon = Icons[tpl.iconKey] || Icons.Sparkles; return (
setPicked(tpl)}>

{tpl.title}

{tpl.desc}

{tpl.features.map(f => {f})}
); })}
{picked && ( setPicked(null)} title={`Template : ${picked.title}`}>

{picked.desc}

Aperçu du prompt
{picked.defaults.instructions}
Message d'accueil
"{picked.defaults.greeting}"
 )} ); }; // ==================== MARKETPLACE ==================== const MarketplaceView = () => { const { navigate, notify } = useApp(); const [voices, setVoices] = useState(null); const [filter, setFilter] = useState(''); useEffect(() => { let cancelled = false; api.get('/marketplace/voices').then(r => { if (cancelled) return; if (Array.isArray(r?.voices)) setVoices(r.voices); else setVoices(MARKETPLACE_VOICES_DEMO); }); return () => { cancelled = true; }; }, []); const filtered = useMemo(() => { const list = voices || []; if (!filter) return list; const q = filter.toLowerCase(); return list.filter(v => v.name.toLowerCase().includes(q) || v.tags.some(t => t.toLowerCase().includes(q)) || (v.creator || '').toLowerCase().includes(q)); }, [voices, filter]); return ( <> navigate('bots')}> Retour} />
Marketplace en aperçu. Affiche 6 voix de démo. Pour passer en live, créez les tables voice_marketplace_listings, voice_marketplace_subscriptions, voice_marketplace_payouts (voir YANNICK/V2_FEATURES.md) puis branchez les endpoints.
setFilter(e.target.value)} />
{voices === null ? (
) : (
{filtered.map(v => (
{v.name[0]}
{v.name}
par {v.creator}
{v.desc}
{v.tags.map(t => {t})}
{Array.from({ length: 28 }).map((_, i) => ( ))}
CHF {v.price_chf} / mois
{v.calls_used.toLocaleString('fr-CH')} appels ce mois
))}
)}

Vendre votre voix sur Vocal

Publiez vos voix clonées et touchez 70% du revenu. KYC Stripe Identity requis.

); }; // ==================== GLOBAL ANALYTICS ==================== const GlobalAnalyticsView = () => { const { navigate } = useApp(); return ( <>
Rapports cross-bots agrégés (volume d'appels par bot, taux de résolution, escalade humaine, NPS, coût total OpenAI).

Performance par bot

Visualisations à connecter aux endpoints d'analytics.
); }; const KpiCard = ({ label, value, trend }) => (
{label}
{value}
{trend &&
{trend.text}
}
); // ==================== ACCOUNT SETTINGS ==================== const AccountSettingsView = () => { const { user, logout } = useApp(); return ( <>

Profil

Pour modifier ces informations, rendez-vous sur my.vocal.ch › Paramètres.

Sessions

); }; // ==================== MODAL ==================== const Modal = ({ title, children, onClose }) => (
e.stopPropagation()}>

{title}

{children}
); /* ============================================================================ BOT DETAIL — router for the 16 panels ============================================================================ */ const BotDetailView = ({ botId, panel, onBotLoaded }) => { const { navigate, notify } = useApp(); const [bot, setBot] = useState(null); const [loading, setLoading] = useState(true); const [form, setForm] = useState({}); const [editMode, setEditMode] = useState(false); const [saving, setSaving] = useState(false); const load = useCallback(async () => { setLoading(true); const r = await api.get(`/my/bots/${botId}`); if (r?.error) { notify.error(r.error); setLoading(false); if (r._status === 404) navigate('bots'); return; } const b = r.bot || r; setBot(b); onBotLoaded?.(b); setForm({ name: b.name || '', description: b.description || '', instructions: b.instructions || '', voice: b.voice || 'alloy', language: b.language || 'fr', greeting: b.greeting || '', human_transfer_number: b.human_transfer_number || '', learn_from_calls: !!b.learn_from_calls, max_call_duration: b.max_call_duration || 600, is_active: !!b.is_active, appointments_enabled: !!b.appointments_enabled, appointment_duration_minutes: b.appointment_duration_minutes || 30, appointment_buffer_minutes: b.appointment_buffer_minutes || 0, appointment_business_hours: b.appointment_business_hours || '', appointment_notify_email: b.appointment_notify_email || '', appointment_max_days_ahead: b.appointment_max_days_ahead || 30, lead_scoring_enabled: !!b.lead_scoring_enabled, lead_scoring_prompt: b.lead_scoring_prompt || '', custom_voice_provider: b.custom_voice_provider || '', custom_voice_id: b.custom_voice_id || '', }); setLoading(false); }, [botId, notify, navigate, onBotLoaded]); useEffect(() => { load(); }, [load]); const save = async (overrides = {}) => { setSaving(true); const r = await api.put(`/my/bots/${botId}`, { ...form, ...overrides }); setSaving(false); if (r?.error) return notify.error(r.error); notify.success('Bot mis à jour'); setEditMode(false); load(); }; const remove = async () => { if (!confirm('Supprimer ce bot ? Cette action est irréversible.')) return; const r = await api.del(`/my/bots/${botId}`); if (r?.error) return notify.error(r.error); notify.success('Bot supprimé'); navigate('bots'); }; const togglePublish = async () => { const next = !bot.is_active; await save({ is_active: next }); }; if (loading || !bot) { return ( <>
); } const breadcrumb = ( <> { e.preventDefault(); navigate('bots'); }}>Mes bots › {bot.name} ); const actions = ( <> {bot.is_active ? : } ); const PANEL_TITLES = { overview: 'Vue d\'ensemble', config: 'Configuration générale', personality: 'Personnalité & prompt', voice: 'Voix & ton', sources: 'Sources URL/PDF', knowledge: 'Connaissances Q&A', learnings: 'Apprentissages auto', dataset: 'Dataset', simulator: 'Simulator (chat live)', abtest: 'A/B testing', conversations: 'Conversations', appointments: 'Rendez-vous', leads: 'Lead scoring', lines: 'Lignes connectées', versions: 'Versions', analytics: 'Analytics', }; return ( <>
{panel === 'overview' && } {panel === 'config' && { setEditMode(false); load(); }} />} {panel === 'personality' && } {panel === 'voice' && } {panel === 'sources' && } {panel === 'knowledge' && } {panel === 'learnings' && } {panel === 'dataset' && } {panel === 'simulator' && } {panel === 'abtest' && } {panel === 'conversations' && } {panel === 'appointments' && } {panel === 'leads' && } {panel === 'lines' && } {panel === 'versions' && } {panel === 'analytics' && }
); }; /* ============================================================================ BOT PANELS ============================================================================ */ // ---------- Overview ---------- const BotOverviewPanel = ({ bot, navigate }) => ( <>

Démarrage rapide

Paramètres rapides

Numéro de transfert humain
{bot.human_transfer_number || Non configuré}
Durée max d'appel
{fmtDuration(bot.max_call_duration || 600)}
Rendez-vous
{bot.appointments_enabled ? `Activé · ${bot.appointment_duration_minutes || 30} min` : Désactivé}
Lead scoring
{bot.lead_scoring_enabled ? 'Activé' : Désactivé}
); const ChecklistItem = ({ done, title, panel, navigate, botId }) => ( ); // ---------- Config (général) ---------- const BotConfigPanel = ({ form, setForm, editMode, setEditMode, saving, onSave, onCancel }) => (

Configuration générale

Nom, description, comportement de base, transfert humain.

{!editMode ? :
}
setForm(f => ({ ...f, name: e.target.value }))} />
setForm(f => ({ ...f, description: e.target.value }))} placeholder="Ex: Assistant vocal pour mon restaurant à Lausanne" />