Tipp-Bestätigung
+Nach "Tipp bestätigen" kurze Erfolgsanimation: Card pulsiert grün, Häkchen fliegt rein, subtiles Haptic-Feedback (Vibration auf Mobile). Statt nur Modal schließen → "Dein Tipp ist drin! 🎯" mit sanfter Animation.
+
-
- );
-}
-
-// ============================================================
-// Mini Markdown Renderer
-// Unterstützt: ## Header, **bold**, *italic*, --- Trennlinie, - Listen
-// ============================================================
-function renderMarkdown(text: string): React.ReactNode[] {
- const lines = text.split('\n');
- const result: React.ReactNode[] = [];
- let listBuffer: string[] = [];
- let keyCounter = 0;
- const k = () => keyCounter++;
-
- function flushList() {
- if (listBuffer.length === 0) return;
- result.push(
-
- {choices.map((c) => (
-
- ))}
-
-
-
-
-
- -
- {listBuffer.map((item, i) => (
-
- {inlineFormat(item)} - ))} -
- ); - continue; - } - // ## H2 - if (line.startsWith('## ')) { - flushList(); - result.push( -
- {inlineFormat(line.slice(3))}
-
- );
- continue;
- }
- // # H1
- if (line.startsWith('# ')) {
- flushList();
- result.push(
-
- {inlineFormat(line.slice(2))}
-
- );
- continue;
- }
- // Listenpunkt - oder *
- if (/^[-*]\s/.test(line)) {
- listBuffer.push(line.slice(2));
- continue;
- }
- // Leere Zeile
- if (line.trim() === '') {
- flushList();
- result.push();
- continue;
- }
- // Normaler Absatz
- flushList();
- result.push(
- {inlineFormat(line)}
- );
- }
- flushList();
- return result;
-}
-
-// ============================================================
-// Types
-// ============================================================
-interface Message {
- id: string;
- role: 'user' | 'assistant';
- content: string;
- timestamp: Date;
-}
-
-// ============================================================
-// Quick-Action Chips
-// ============================================================
-const QUICK_ACTIONS = [
- { label: '🎯 Tipp-Empfehlung', prompt: 'Gib mir eine Tipp-Empfehlung für die nächsten Spiele der WM 2026!' },
- { label: '📊 Head-to-Head', prompt: 'Zeig mir ein interessantes Head-to-Head zwischen zwei WM-Teams!' },
- { label: '⚡ Fun Fact', prompt: 'Erzähl mir einen kuriosen oder legendären Fun Fact aus der WM-Geschichte!' },
- { label: '🏆 WM-Rekorde', prompt: 'Was sind die spektakulärsten Rekorde aller WM-Turniere?' },
-];
-
-// ============================================================
-// API: Streaming Chat-Anfrage
-// ============================================================
-async function sendMessage(
- messages: Array<{ role: 'user' | 'assistant'; content: string }>,
- onChunk: (text: string) => void,
- onDone: () => void,
- onError: (err: string) => void
-) {
- try {
- const res = await fetch('/api/agent/chat', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ messages }),
- });
-
- if (!res.ok) {
- const data = await res.json().catch(() => ({}));
- onError(data.error ?? `HTTP ${res.status}`);
- return;
- }
-
- const reader = res.body?.getReader();
- if (!reader) { onError('Stream nicht verfügbar'); return; }
-
- const decoder = new TextDecoder();
- let buffer = '';
-
- while (true) {
- const { done, value } = await reader.read();
- if (done) break;
-
- buffer += decoder.decode(value, { stream: true });
- const lines = buffer.split('\n');
- buffer = lines.pop() ?? '';
-
- for (const line of lines) {
- if (!line.startsWith('data: ')) continue;
- const payload = line.slice(6).trim();
- if (payload === '[DONE]') { onDone(); return; }
- try {
- const parsed = JSON.parse(payload);
- if (parsed.text) onChunk(parsed.text);
- if (parsed.error) { onError(parsed.error); return; }
- } catch {
- // ignore parse errors
- }
- }
- }
- onDone();
- } catch (err) {
- onError(err instanceof Error ? err.message : 'Netzwerkfehler');
- }
-}
-
-// ============================================================
-// AgentChat Component
-// ============================================================
-export default function AgentChat() {
- const [isOpen, setIsOpen] = useState(false);
- const [messages, setMessages] = useState
- {/* Header */}
-
- 
-
-
- {/* Messages */}
-
-
-
- Günther
- Statistiken · Tipps · Fun Facts
-
- {messages.length === 0 && (
-
-
- {/* Quick Actions (nur beim ersten Öffnen, solange kein Chat läuft) */}
- {showQuickActions && messages.length === 0 && (
-
- Frag mich alles rund um Fußball, WM & EM! ⚽
-
- )}
-
- {messages.map((msg, idx) => {
- const isLastAssistant =
- msg.role === 'assistant' && idx === messages.length - 1;
- const isStreaming = isLoading && streamingIdRef.current === msg.id;
- const { before, choices, hasChoices } =
- msg.role === 'assistant' && !isStreaming
- ? parseChoices(msg.content)
- : { before: msg.content, choices: [], hasChoices: false };
-
- return (
-
-
- );
- })}
-
-
- {msg.role === 'assistant' ? (
- <>
- {/* Typing Indicator solange Inhalt noch leer */}
- {msg.content === '' && isStreaming ? (
- {
- const text =
- selected.length === choices.length
- ? 'Analysiere bitte alle Spiele.'
- : 'Analysiere bitte: ' + selected.join(', ');
- handleSend(text);
- }}
- />
- )}
-
- ) : (
- msg.content
- )}
-
-
-
-
-
-
- ) : (
-
- {renderMarkdown(hasChoices ? before : msg.content)}
-
- )}
- {/* Choice-Selector: nur bei letzter Assistenten-Nachricht */}
- {hasChoices && isLastAssistant && (
- {formatTime(msg.timestamp)}
-
-
- )}
-
- {/* Input Area */}
- Schnellauswahl
-
- {QUICK_ACTIONS.map((qa) => (
-
- ))}
-
-
-