/* global React, ReactDOM */ /* ============================================================= ELEKTRIX · AI Chat Widget (Floating, language-aware) ============================================================= */ (function () { const { useState, useEffect, useRef, useCallback } = React; const CONFIG = Object.freeze({ api: { endpoint: "https://orange-silence-633f.alex-grunberer.workers.dev", model: "claude-sonnet-4-20250514", maxTokens: 250, }, ui: { accentColor: "#C5F23D", accentColorDark: "#111111", bubbleDark: "#1e1e22", surfaceDark: "#0a0a0a", surfaceMid: "#1a1a1a", borderDark: "#2a2a2a", borderMid: "#333333", textLight: "#f4f4f1", textMuted: "#666666", chatWidth: "340px", chatHeight: "480px", fabSize: "56px", }, chat: { maxHistoryLength: 10, greetingDE: "Hallo! Ich bin der Assistent von ELEKTRIX – dein Elektriker in Mölten. Wie kann ich helfen?", greetingIT: "Ciao! Sono l'assistente di ELEKTRIX. Come posso aiutarla?", errorDE: "Verbindungsfehler. Bitte kontaktieren Sie uns: info@elektrix.it", errorIT: "Errore di connessione. Scriva a: info@elektrix.it", }, }); const BUSINESS_INFO = ` ELEKTRIX – Elektriker in Mölten (BZ), Südtirol. Tätig seit 2019. Direkt und persönlich, kein Callcenter. Telefon: +39 347 948 9636 E-Mail: info@elektrix.it PEC: elektrix@pec.bz.it Adresse: 39010 Mölten (BZ) Einzugsgebiet: Mölten, Bozen/Bolzano, Etschtal, Sarntal, Burggrafenamt. Reaktionszeit: 48 Stunden werktags. Sprachen: Deutsch · Italiano. Leistungen: 1. Elektro & Beleuchtung – Hausinstallation, Schaltanlagen, KNX/Smart Home, Notbeleuchtung 2. Antennentechnik – SAT, DVB-T2, Multischalter, Signalmessung 3. Glasfaser – FTTH, Spleißarbeiten, LAN Cat6/7, WLAN Mesh 4. Photovoltaik – Module, Wechselrichter, Batteriespeicher, Wallbox, Netzanmeldung `.trim(); const SYSTEM_PROMPT = `Du bist der Informations-Assistent von ELEKTRIX. ERLAUBT: - Fragen zu Leistungen, Einzugsgebiet und Kontakt beantworten - Max. 2–3 Sätze, freundlich und direkt - Sprache des Nutzers erkennen und auf Deutsch ODER Italiano antworten NICHT ERLAUBT: - Preise oder Angebote nennen - Termine vereinbaren - Technische Beratung geben - Bei solchen Anfragen stets auf direkten Kontakt verweisen: +39 347 948 9636 oder info@elektrix.it BETRIEBSINFOS: ${BUSINESS_INFO}`; const QUICK_SUGGESTIONS = [ { german: "Was macht ihr?", italian: "Cosa fate?" }, { german: "Glasfaser", italian: "Fibra ottica" }, { german: "Photovoltaik", italian: "Fotovoltaico" }, { german: "Kontakt", italian: "Contatti" }, ]; function buildApiHistory(messages) { return messages .slice(-CONFIG.chat.maxHistoryLength) .map(({ role, text }) => ({ role: role === "bot" ? "assistant" : "user", content: text, })); } const createUserMessage = (text) => ({ role: "user", text }); const createBotMessage = (text) => ({ role: "bot", text }); const extractReplyText = (apiResponse) => (apiResponse.content || []) .filter(b => b.type === "text") .map(b => b.text) .join(""); const getGreeting = (lang) => lang === "it" ? CONFIG.chat.greetingIT : CONFIG.chat.greetingDE; const getErrorMessage = (lang) => lang === "it" ? CONFIG.chat.errorIT : CONFIG.chat.errorDE; const getSuggestionLabel = (s, lang) => lang === "it" ? s.italian : s.german; async function callClaudeAPI(messages) { const response = await fetch(CONFIG.api.endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: CONFIG.api.model, max_tokens: CONFIG.api.maxTokens, system: SYSTEM_PROMPT, messages: buildApiHistory(messages), }), }); if (!response.ok) throw new Error(`API error: ${response.status}`); return response.json(); } function useLanguageSync() { const [language, setLanguage] = useState("de"); useEffect(() => { const readLanguage = () => setLanguage(document.documentElement.lang === "it" ? "it" : "de"); const observer = new MutationObserver(readLanguage); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] }); readLanguage(); return () => observer.disconnect(); }, []); return language; } function useChatMessages(language) { const [messages, setMessages] = useState([]); const [isLoading, setIsLoading] = useState(false); const initGreeting = useCallback(() => { setMessages([createBotMessage(getGreeting(language))]); }, [language]); const sendMessage = useCallback(async (text) => { if (!text.trim() || isLoading) return; const updated = [...messages, createUserMessage(text)]; setMessages(updated); setIsLoading(true); try { const apiResponse = await callClaudeAPI(updated); const replyText = extractReplyText(apiResponse) || getErrorMessage(language); setMessages(prev => [...prev, createBotMessage(replyText)]); } catch { setMessages(prev => [...prev, createBotMessage(getErrorMessage(language))]); } finally { setIsLoading(false); } }, [messages, isLoading, language]); return { messages, isLoading, initGreeting, sendMessage }; } function MessageBubble({ message }) { const isUser = message.role === "user"; return (
{message.text}
); } function TypingIndicator() { const dot = (delay) => ({ width: "6px", height: "6px", borderRadius: "50%", background: CONFIG.ui.textMuted, display: "inline-block", animation: "ekx-bounce 1.2s infinite", animationDelay: `${delay}s`, }); return (
); } function QuickChips({ suggestions, language, onSelect }) { return (
{suggestions.map((s, i) => ( ))}
); } function ChatInput({ language, isDisabled, onSend }) { const [text, setText] = useState(""); const ref = useRef(null); const submit = () => { if (!text.trim()) return; onSend(text); setText(""); }; const onKey = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } }; const canSend = !isDisabled && text.trim().length > 0; const placeholder = language === "it" ? "La sua domanda…" : "Deine Frage…"; return (