// ============================================================ // Gaussia Chatbot — Widget IA multi-provider // ============================================================ // // CONFIGURATION — Modifier le bloc ci-dessous pour switcher de provider // // ▸ provider: "claude" | "openai" | "custom" // → "claude" : utilise l'API Anthropic (clé sk-ant-...) // → "openai" : utilise l'API OpenAI (clé sk-...) // → "custom" : tout endpoint compatible OpenAI (Mistral, Groq, local…) // // ▸ apiKey: à remplacer par votre vraie clé, ou injecter via env // ⚠️ NE JAMAIS committer une clé en clair dans un repo public. // En production, passez par un proxy backend (ex: /api/chat). // const CHATBOT_CONFIG = { provider: "claude", // ← changer ici pour switcher models: { // — ANTHROPIC (Claude) — // Créez une clé sur https://console.anthropic.com // Modèles dispo : claude-haiku-4-5-20251001 (rapide/pas cher) // claude-sonnet-4-20250514 (plus puissant) claude: { apiUrl: "https://api.anthropic.com/v1/messages", model: "claude-haiku-4-5-20251001", max_tokens: 500, }, // — OPENAI — // Créez une clé sur https://platform.openai.com/api-keys // Modèles dispo : gpt-4o-mini (rapide/pas cher), gpt-4o (puissant) openai: { apiUrl: "https://api.openai.com/v1/chat/completions", model: "gpt-4o-mini", max_tokens: 500, }, // — CUSTOM (endpoint compatible OpenAI) — // Fonctionne avec Mistral, Groq, Together, LM Studio, Ollama, etc. // Adaptez apiUrl et model selon votre provider. custom: { apiUrl: "https://ton-endpoint.com/v1/chat/completions", model: "ton-modele", max_tokens: 500, }, }, // Clé API — à remplacer ou injecter via variable d'environnement // En production, utilisez un proxy backend pour ne pas exposer la clé côté client. apiKey: "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", }; // ============================================================ // SYSTEM PROMPT — Personnalisez ce texte avec vos offres // ============================================================ const SYSTEM_PROMPT = `Tu es l'assistant virtuel de Gaussia, une agence française spécialisée en IA et automation pour PME, ETI et startups. Tu t'appelles Gauss. PERSONNALITÉ : - Chaleureux, professionnel, direct — jamais corporate ni robotique - Tu tutoies si le visiteur tutoie, sinon tu vouvoies - Réponses courtes (2-4 phrases max), claires, en français - Tu utilises des emojis avec parcimonie (1 max par message) OFFRES GAUSSIA (à orienter naturellement selon le contexte) : 1. **Audit** (4 900 € fixe) — Cartographie des processus, calcul ROI, 3 chantiers prioritaires, roadmap actionnable, restitution + ateliers (2 jours). Idéal pour valider un cap avant d'investir. 2. **Build** (sur devis, forfait) — Conception et déploiement complet : agents IA + automatisations, intégrations SI, mise en prod + monitoring, formation équipes. Inclut tout l'Audit. 3. **Partner** (à partir de 3 500 €/mois) — Accompagnement continu : roadmap trimestrielle, support prioritaire SLA 4h, nouveaux agents & automations, veille IA, canal Slack dédié. SERVICES : - Agents IA sur-mesure (Claude, LLM, RAG) - Automatisations workflow (n8n, Make, Zapier) - Intégrations & connecteurs (API, webhooks, sync CRM/ERP) - Formation des équipes (workshops, docs, coaching) MÉTHODE (4 étapes) : 1. Cartographie (1 sem.) → 2. Pilote (2-3 sem.) → 3. Déploiement (3-6 sem.) → 4. Transmission (continu) RÉSULTATS TYPIQUES : - +40h récupérées par semaine - -68% d'erreurs manuelles - Déploiement en 3-6 semaines - Agents opérationnels 24/7 RÈGLES : - Si la question porte sur les tarifs/prix → présente l'offre la plus adaptée avec le prix, suggère de réserver un audit - Si la question porte sur les délais → explique la méthode en 4 étapes - Si la question porte sur la sécurité des données → rassure : hébergement européen, pas d'entraînement sur les données client, contrats DPA - Si la question porte sur la tech → rassure : pas besoin d'être tech, Gaussia forme les équipes - Si tu ne sais pas répondre → propose de contacter l'équipe : contact@gaussia.fr ou réserver un créneau sur https://cal.eu/gaussia - Ne propose JAMAIS une offre de manière forcée — oriente naturellement selon le besoin exprimé - Pour toute prise de RDV, dirige vers : https://cal.eu/gaussia`; // ============================================================ // callAI — Fonction universelle multi-provider // ============================================================ async function callAI(messages) { const { provider, models, apiKey } = CHATBOT_CONFIG; const cfg = models[provider]; if (!cfg) throw new Error(`Provider "${provider}" inconnu. Utilisez "claude", "openai" ou "custom".`); // — CLAUDE (Anthropic) — // Format spécifique : system séparé, messages sans rôle "system" if (provider === "claude") { const systemMsg = messages.find(m => m.role === "system"); const userMsgs = messages.filter(m => m.role !== "system"); const res = await fetch(cfg.apiUrl, { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": apiKey, "anthropic-version": "2023-06-01", "anthropic-dangerous-direct-browser-access": "true", }, body: JSON.stringify({ model: cfg.model, max_tokens: cfg.max_tokens, system: systemMsg?.content || "", messages: userMsgs, }), }); if (!res.ok) { const err = await res.text(); throw new Error(`Claude API error ${res.status}: ${err}`); } const data = await res.json(); return data.content?.[0]?.text || "Désolé, je n'ai pas pu générer de réponse."; } // — OPENAI & CUSTOM (format OpenAI-compatible) — // Fonctionne avec OpenAI, Mistral, Groq, Together, Ollama, etc. const headers = { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}`, }; const res = await fetch(cfg.apiUrl, { method: "POST", headers, body: JSON.stringify({ model: cfg.model, max_tokens: cfg.max_tokens, messages, }), }); if (!res.ok) { const err = await res.text(); throw new Error(`${provider} API error ${res.status}: ${err}`); } const data = await res.json(); return data.choices?.[0]?.message?.content || "Désolé, je n'ai pas pu générer de réponse."; } // ============================================================ // Composant React — ChatBot Widget // ============================================================ function ChatBot() { const [open, setOpen] = useState(false); const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const [hasGreeted, setHasGreeted] = useState(false); const scrollRef = useRef(null); const inputRef = useRef(null); const { isMobile } = useResponsive(); // Greeting on first open useEffect(() => { if (open && !hasGreeted) { setMessages([{ role: 'assistant', content: "Bonjour ! 👋 Je suis Gauss, l'assistant Gaussia. Posez-moi vos questions sur nos services, tarifs ou méthode — je suis là pour vous aiguiller.", }]); setHasGreeted(true); } }, [open, hasGreeted]); // Auto-scroll useEffect(() => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } }, [messages, loading]); // Focus input on open useEffect(() => { if (open && inputRef.current) { setTimeout(() => inputRef.current.focus(), 300); } }, [open]); const sendMessage = async () => { const text = input.trim(); if (!text || loading) return; const userMsg = { role: 'user', content: text }; const updated = [...messages, userMsg]; setMessages(updated); setInput(''); setLoading(true); try { const apiMessages = [ { role: 'system', content: SYSTEM_PROMPT }, ...updated, ]; const reply = await callAI(apiMessages); setMessages(prev => [...prev, { role: 'assistant', content: reply }]); } catch (err) { console.error('Chatbot error:', err); setMessages(prev => [...prev, { role: 'assistant', content: "Oups, je rencontre un souci technique. Vous pouvez nous écrire directement à [contact@gaussia.fr](mailto:contact@gaussia.fr) ou [réserver un créneau](https://cal.eu/gaussia).", }]); } finally { setLoading(false); } }; const handleKeyDown = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }; // Quick suggestions shown after greeting const suggestions = [ "Quels sont vos tarifs ?", "Comment ça marche ?", "C'est quoi un agent IA ?", ]; const handleSuggestion = (text) => { setInput(text); setTimeout(() => { const userMsg = { role: 'user', content: text }; const updated = [...messages, userMsg]; setMessages(updated); setInput(''); setLoading(true); callAI([{ role: 'system', content: SYSTEM_PROMPT }, ...updated]) .then(reply => setMessages(prev => [...prev, { role: 'assistant', content: reply }])) .catch(() => setMessages(prev => [...prev, { role: 'assistant', content: "Oups, un souci technique. Écrivez-nous à contact@gaussia.fr." }])) .finally(() => setLoading(false)); }, 50); }; // Simple markdown-lite renderer (bold, links) const renderContent = (text) => { const parts = text.split(/(\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\))/g); return parts.map((part, i) => { const boldMatch = part.match(/^\*\*(.+)\*\*$/); if (boldMatch) return {boldMatch[1]}; const linkMatch = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/); if (linkMatch) return {linkMatch[1]}; return {part}; }); }; const showSuggestions = messages.length === 1 && messages[0].role === 'assistant'; return ( <> {/* Floating bubble */} {/* Chat window */} {open && (
{/* Header */}
Gauss
Assistant Gaussia · en ligne
{/* Messages area */}
{messages.map((msg, i) => (
{renderContent(msg.content)}
))} {/* Quick suggestions */} {showSuggestions && (
{suggestions.map(s => ( ))}
)} {/* Typing indicator */} {loading && (
)}
{/* Input bar */}
setInput(e.target.value)} onKeyDown={handleKeyDown} placeholder="Posez votre question…" disabled={loading} style={{ flex: 1, padding: '10px 14px', borderRadius: 12, border: '1px solid var(--line-strong)', background: 'var(--bg)', color: 'var(--text)', fontSize: 14, fontFamily: 'var(--sans)', outline: 'none', transition: 'border-color 0.2s', letterSpacing: '-0.005em', }} onFocus={e => e.target.style.borderColor = 'var(--accent)'} onBlur={e => e.target.style.borderColor = 'var(--line-strong)'} />
{/* Powered by */}
Propulsé par Gaussia · IA
)} ); } Object.assign(window, { ChatBot });