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

frontend/src/components/TipModal.module.css

@@ -323,6 +323,96 @@
   margin-bottom: 20px;
 }
 
+/* Toggle-Zeile mit Play-Button */
+.insightToggleRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.insightToggleRow .insightToggle {
+  flex: 1;
+}
+
+/* Audio-Play-Button */
+.audioBtn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 9px 12px;
+  background: linear-gradient(135deg, rgba(75,183,248,0.12) 0%, rgba(75,183,248,0.05) 100%);
+  border: 1px solid rgba(75,183,248,0.3);
+  border-radius: 12px;
+  color: var(--cyan);
+  font-size: 12px;
+  font-weight: 700;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  cursor: pointer;
+  transition: all 0.18s;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.audioBtn:hover:not(:disabled) {
+  background: linear-gradient(135deg, rgba(75,183,248,0.2) 0%, rgba(75,183,248,0.08) 100%);
+  border-color: rgba(75,183,248,0.5);
+}
+
+.audioBtn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* Dialog-Format: Delling / Netzer */
+.dialogLine {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  margin-bottom: 6px;
+  animation: insightFadeIn 0.2s ease;
+}
+
+.dialogLine:last-child {
+  margin-bottom: 0;
+}
+
+.speakerDelling {
+  background: rgba(148, 163, 184, 0.06);
+  border-left: 2px solid rgba(148,163,184,0.4);
+  align-items: flex-start;
+}
+
+.speakerNetzer {
+  background: rgba(254, 174, 50, 0.06);
+  border-left: 2px solid rgba(254,174,50,0.5);
+  align-items: flex-start;
+}
+
+.dialogSpeaker {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 2px;
+}
+
+.speakerDelling .dialogSpeaker {
+  color: rgba(148,163,184,0.8);
+}
+
+.speakerNetzer .dialogSpeaker {
+  color: var(--gold);
+}
+
+.dialogText {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-primary);
+  font-style: italic;
+}
+
 .insightToggle {
   width: 100%;
   display: flex;

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>