feat: ElevenLabs Audio-Dialog für Expertenblick (Netzer/Delling TTS)

frontend/src/components/TipModal.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react';
-import { Sparkles, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
+import { Sparkles, ChevronDown, ChevronUp, Loader2, Volume2, Square } from 'lucide-react';
 import { Match, api } from '../api/client';
 import styles from './TipModal.module.css';
 
@@ -78,6 +78,50 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
   const [insightError, setInsightError] = useState(false);
   const insightFetched = useRef(false);
 
+  // Audio State
+  const [audioLoading, setAudioLoading] = useState(false);
+  const [audioPlaying, setAudioPlaying] = useState(false);
+  const [audioError, setAudioError] = useState(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  async function handlePlayAudio() {
+    // Stop wenn gerade läuft
+    if (audioPlaying && audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+      setAudioPlaying(false);
+      return;
+    }
+    setAudioError(false);
+    setAudioLoading(true);
+    try {
+      const res = await fetch('/api/agent/insight-audio', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ dialogText: insightText }),
+      });
+      if (!res.ok) throw new Error('Audio-Generierung fehlgeschlagen');
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const audio = new Audio(url);
+      audioRef.current = audio;
+      audio.onended = () => {
+        setAudioPlaying(false);
+        URL.revokeObjectURL(url);
+      };
+      audio.onerror = () => {
+        setAudioPlaying(false);
+        setAudioError(true);
+      };
+      setAudioLoading(false);
+      setAudioPlaying(true);
+      await audio.play();
+    } catch {
+      setAudioLoading(false);
+      setAudioError(true);
+    }
+  }
+
   function handleToggleInsight() {
     const opening = !insightOpen;
     setInsightOpen(opening);
@@ -198,14 +242,34 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
 
         {/* Expertenblick */}
         <div className={styles.insightWrapper}>
-          <button className={styles.insightToggle} onClick={handleToggleInsight}>
-            <Sparkles size={14} className={styles.insightIcon} />
-            <span>Expertenblick</span>
-            {insightOpen
-              ? <ChevronUp size={14} className={styles.insightChevron} />
-              : <ChevronDown size={14} className={styles.insightChevron} />
-            }
-          </button>
+          <div className={styles.insightToggleRow}>
+            <button className={styles.insightToggle} onClick={handleToggleInsight}>
+              <Sparkles size={14} className={styles.insightIcon} />
+              <span>Expertenblick</span>
+              {insightOpen
+                ? <ChevronUp size={14} className={styles.insightChevron} />
+                : <ChevronDown size={14} className={styles.insightChevron} />
+              }
+            </button>
+
+            {/* Play-Button – nur wenn Dialog fertig geladen */}
+            {insightOpen && !insightLoading && !insightError && insightText && (
+              <button
+                className={styles.audioBtn}
+                onClick={handlePlayAudio}
+                disabled={audioLoading}
+                title={audioPlaying ? 'Stop' : 'Dialog anhören'}
+              >
+                {audioLoading
+                  ? <Loader2 size={13} className={styles.insightSpinner} />
+                  : audioPlaying
+                    ? <Square size={13} />
+                    : <Volume2 size={13} />
+                }
+                <span>{audioPlaying ? 'Stop' : 'Anhören'}</span>
+              </button>
+            )}
+          </div>
 
           {insightOpen && (
             <div className={styles.insightPanel}>
@@ -221,18 +285,28 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
               ) : (
                 <div className={styles.insightText}>
                   {insightText.split('\n').filter(l => l.trim()).map((line, i) => {
-                    // **Label:** Value aufsplitten
-                    const match = line.match(/^\*\*(.+?):\*\*\s*(.*)$/);
-                    if (match) {
-                      // Inline **fett** im Value-Teil rendern
-                      const valueParts = match[2].split(/(\*\*.+?\*\*)/g).map((part, j) =>
+                    // Dialog-Format: **Delling:** "..." oder **Netzer:** "..."
+                    const dialogMatch = line.match(/^\*\*(Delling|Netzer):\*\*\s*["„]?(.+?)[""]?\s*$/);
+                    if (dialogMatch) {
+                      const speaker = dialogMatch[1] as 'Delling' | 'Netzer';
+                      return (
+                        <div key={i} className={`${styles.dialogLine} ${styles[`speaker${speaker}`]}`}>
+                          <span className={styles.dialogSpeaker}>{speaker}</span>
+                          <span className={styles.dialogText}>„{dialogMatch[2].replace(/^["„]|[""]$/g, '')}"</span>
+                        </div>
+                      );
+                    }
+                    // Fallback: **Label:** Value (alter Stil)
+                    const labelMatch = line.match(/^\*\*(.+?):\*\*\s*(.*)$/);
+                    if (labelMatch) {
+                      const valueParts = labelMatch[2].split(/(\*\*.+?\*\*)/g).map((part, j) =>
                         part.startsWith('**') && part.endsWith('**')
                           ? <strong key={j}>{part.slice(2, -2)}</strong>
                           : part
                       );
                       return (
                         <div key={i} className={styles.insightLine}>
-                          <span className={styles.insightLabel}>{match[1]}</span>
+                          <span className={styles.insightLabel}>{labelMatch[1]}</span>
                           <span className={styles.insightValue}>{valueParts}</span>
                         </div>
                       );
@@ -240,6 +314,11 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
                     return <div key={i} className={styles.insightLine}>{line}</div>;
                   })}
                   {insightLoading && <span className={styles.insightCursor} />}
+                  {audioError && (
+                    <div className={styles.insightErrorMsg} style={{ marginTop: '0.5rem' }}>
+                      Audio nicht verfügbar.
+                    </div>
+                  )}
                 </div>
               )}
             </div>