Update index.html

Switch voice to Whisper + SSE fallback

index.html

@@ -8,198 +8,101 @@
   <meta name="apple-mobile-web-app-title" content="DE Assistant" />
   <meta name="theme-color" content="#1a1a2e" />
   <link rel="manifest" href="/manifest.json" />
-  <link rel="apple-touch-icon" href="/icon-192.png" />
   <title>DE Knowledge Assistant</title>
   <style>
-    /* ── Reset & tokens ─────────────────────────────────────── */
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg:        #0d0d1a;
-      --surface:   #1a1a2e;
-      --surface2:  #16213e;
-      --accent:    #e94560;
-      --accent2:   #0f3460;
-      --user-bg:   #0f3460;
-      --bot-bg:    #1a1a2e;
-      --text:      #e0e0e0;
-      --text-dim:  #888;
-      --border:    #2a2a4a;
-      --green:     #00c896;
-      --radius:    18px;
-      --safe-top:  env(safe-area-inset-top, 0px);
-      --safe-bot:  env(safe-area-inset-bottom, 0px);
+    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+    :root{
+      --bg:#0d0d1a; --surface:#1a1a2e; --surface2:#16213e;
+      --accent:#e94560; --accent2:#0f3460; --user-bg:#0f3460; --bot-bg:#1a1a2e;
+      --text:#e0e0e0; --text-dim:#888; --border:#2a2a4a;
+      --green:#00c896; --red:#ff4655;
+      --radius:18px; --safe-top:env(safe-area-inset-top,0px);
+      --safe-bot:env(safe-area-inset-bottom,0px);
     }
-
-    html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont,
-      "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
-
-    /* ── Layout ─────────────────────────────────────────────── */
-    #app { display: flex; flex-direction: column; height: 100dvh;
-           padding-top: var(--safe-top); }
-
-    /* ── Header ─────────────────────────────────────────────── */
-    header {
-      display: flex; align-items: center; gap: 12px;
-      padding: 14px 18px;
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-    }
-    .logo { width: 36px; height: 36px; border-radius: 10px;
-            background: linear-gradient(135deg, var(--accent), var(--accent2));
-            display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
-    .header-text h1 { font-size: 15px; font-weight: 700; }
-    .header-text p  { font-size: 11px; color: var(--text-dim); }
-    #status-dot { width: 8px; height: 8px; border-radius: 50%;
-                  background: #555; margin-left: auto; flex-shrink: 0; transition: background .3s; }
-    #status-dot.ready   { background: var(--green); box-shadow: 0 0 6px var(--green); }
-    #status-dot.loading { background: #f5a623; animation: pulse 1s infinite; }
-
-    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
-
-    /* ── Messages ───────────────────────────────────────────── */
-    #messages { flex: 1; overflow-y: auto; padding: 16px 14px;
-                scroll-behavior: smooth; }
-    #messages::-webkit-scrollbar { width: 4px; }
-    #messages::-webkit-scrollbar-track { background: transparent; }
-    #messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-
-    .msg { display: flex; gap: 10px; margin-bottom: 16px; animation: fadeIn .25s ease; }
-    @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
-
-    .msg.user  { flex-direction: row-reverse; }
-    .msg.bot   { flex-direction: row; }
-
-    .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid;
-              place-items: center; font-size: 14px; flex-shrink: 0; align-self: flex-end; }
-    .msg.user .avatar { background: var(--accent); }
-    .msg.bot  .avatar { background: var(--accent2); }
-
-    .bubble { max-width: min(75vw, 520px); padding: 12px 16px;
-              border-radius: var(--radius); line-height: 1.6; font-size: 14px;
-              word-wrap: break-word; }
-    .msg.user .bubble { background: var(--user-bg); border-bottom-right-radius: 4px; }
-    .msg.bot  .bubble { background: var(--bot-bg); border: 1px solid var(--border);
-                        border-bottom-left-radius: 4px; }
-
-    /* markdown-ish inside bubbles */
-    .bubble code { background: rgba(255,255,255,.08); padding: 2px 6px;
-                   border-radius: 4px; font-family: "SF Mono", Menlo, monospace;
-                   font-size: 12px; }
-    .bubble pre  { background: #0a0a1a; border: 1px solid var(--border);
-                   border-radius: 10px; padding: 12px; overflow-x: auto;
-                   margin: 8px 0; }
-    .bubble pre code { background: none; padding: 0; font-size: 12px; }
-    .bubble strong { color: #fff; }
-    .bubble p  { margin-bottom: 8px; }
-    .bubble p:last-child { margin-bottom: 0; }
-    .bubble ul { padding-left: 18px; }
-    .bubble li { margin-bottom: 4px; }
-    .bubble blockquote { border-left: 3px solid var(--accent);
-                         padding-left: 12px; color: var(--text-dim); margin: 8px 0; }
-
-    /* sources badge */
-    .sources { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
-    .source-chip { font-size: 10px; background: rgba(15,52,96,.6);
-                   border: 1px solid var(--accent2); border-radius: 20px;
-                   padding: 3px 9px; color: #a0b4d0; }
-
-    /* typing indicator */
-    .typing-dots span { display: inline-block; width: 6px; height: 6px;
-                         border-radius: 50%; background: var(--text-dim);
-                         margin: 0 2px; animation: bounce .9s infinite; }
-    .typing-dots span:nth-child(2) { animation-delay: .15s; }
-    .typing-dots span:nth-child(3) { animation-delay: .3s;  }
-    @keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
-
-    /* ── Welcome card ───────────────────────────────────────── */
-    #welcome { text-align: center; padding: 40px 20px; }
-    #welcome .icon { font-size: 52px; margin-bottom: 12px; }
-    #welcome h2 { font-size: 20px; margin-bottom: 8px; }
-    #welcome p  { color: var(--text-dim); font-size: 13px; max-width: 280px; margin: 0 auto 20px; }
-    .starters { display: flex; flex-direction: column; gap: 8px; max-width: 340px; margin: 0 auto; }
-    .starter-btn { background: var(--surface); border: 1px solid var(--border);
-                   border-radius: 12px; padding: 11px 16px; color: var(--text);
-                   font-size: 13px; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
-    .starter-btn:hover { border-color: var(--accent); background: var(--surface2); }
-
-    /* ── Input bar ──────────────────────────────────────────── */
-    #input-bar {
-      display: flex; align-items: flex-end; gap: 8px;
-      padding: 10px 14px calc(10px + var(--safe-bot));
-      background: var(--surface);
-      border-top: 1px solid var(--border);
-    }
-
-    #msg-input {
-      flex: 1; background: var(--surface2); border: 1px solid var(--border);
-      border-radius: 22px; padding: 10px 16px; color: var(--text);
-      font-size: 15px; resize: none; min-height: 44px; max-height: 120px;
-      line-height: 1.4; outline: none; font-family: inherit;
-      transition: border-color .2s;
-    }
-    #msg-input:focus { border-color: var(--accent); }
-    #msg-input::placeholder { color: var(--text-dim); }
-
-    .icon-btn {
-      width: 44px; height: 44px; border-radius: 50%; border: none;
-      cursor: pointer; display: grid; place-items: center;
-      font-size: 18px; flex-shrink: 0; transition: transform .15s, background .2s;
-    }
-    .icon-btn:active { transform: scale(.9); }
-
-    #send-btn { background: var(--accent); }
-    #send-btn:disabled { background: #555; cursor: not-allowed; }
-
-    #voice-btn { background: var(--surface2); border: 1px solid var(--border); }
-    #voice-btn.recording {
-      background: var(--accent) !important;
-      animation: ripple 1.2s ease-out infinite;
-    }
-    @keyframes ripple {
-      0%  { box-shadow: 0 0 0 0 rgba(233,69,96,.6); }
-      70% { box-shadow: 0 0 0 16px rgba(233,69,96,0); }
-      100%{ box-shadow: 0 0 0 0 rgba(233,69,96,0); }
-    }
-
-    /* ── Voice overlay ──────────────────────────────────────── */
-    #voice-overlay {
-      display: none; position: fixed; inset: 0; background: rgba(0,0,0,.8);
-      backdrop-filter: blur(10px); flex-direction: column;
-      align-items: center; justify-content: center; gap: 20px; z-index: 100;
-    }
-    #voice-overlay.active { display: flex; }
-    #voice-wave { font-size: 64px; animation: pulse 1s infinite; }
-    #voice-transcript { color: #ddd; font-size: 16px; max-width: 300px;
-                        text-align: center; min-height: 40px; }
-    #voice-cancel { background: var(--surface); border: 1px solid var(--border);
-                    color: var(--text); border-radius: 50px; padding: 12px 28px;
-                    font-size: 15px; cursor: pointer; }
-
-    /* ── Toast ──────────────────────────────────────────────── */
-    #toast { position: fixed; bottom: calc(90px + var(--safe-bot)); left: 50%;
-             transform: translateX(-50%) translateY(20px);
-             background: #222; border: 1px solid var(--border); border-radius: 20px;
-             padding: 8px 18px; font-size: 13px; opacity: 0; pointer-events: none;
-             transition: opacity .3s, transform .3s; white-space: nowrap; z-index: 50; }
-    #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+    html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)}
+    #app{display:flex;flex-direction:column;height:100dvh;padding-top:var(--safe-top)}
+ 
+    header{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
+    .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:18px;flex-shrink:0}
+    .header-text h1{font-size:15px;font-weight:700}
+    .header-text p{font-size:11px;color:var(--text-dim)}
+    #status-dot{width:8px;height:8px;border-radius:50%;background:#555;margin-left:auto;flex-shrink:0;transition:background .3s}
+    #status-dot.ready{background:var(--green);box-shadow:0 0 6px var(--green)}
+    #status-dot.loading{background:#f5a623;animation:pulse 1s infinite}
+    #status-dot.error{background:var(--red);box-shadow:0 0 6px var(--red)}
+    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
+ 
+    #messages{flex:1;overflow-y:auto;padding:16px 14px;scroll-behavior:smooth}
+    #messages::-webkit-scrollbar{width:4px}
+    #messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
+ 
+    .msg{display:flex;gap:10px;margin-bottom:16px;animation:fadeIn .25s ease}
+    @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+    .msg.user{flex-direction:row-reverse}
+    .avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex-shrink:0;align-self:flex-end}
+    .msg.user .avatar{background:var(--accent)}
+    .msg.bot .avatar{background:var(--accent2)}
+    .bubble{max-width:min(75vw,520px);padding:12px 16px;border-radius:var(--radius);line-height:1.6;font-size:14px;word-wrap:break-word}
+    .msg.user .bubble{background:var(--user-bg);border-bottom-right-radius:4px}
+    .msg.bot .bubble{background:var(--bot-bg);border:1px solid var(--border);border-bottom-left-radius:4px}
+    .bubble code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:4px;font-family:"SF Mono",Menlo,monospace;font-size:12px}
+    .bubble pre{background:#0a0a1a;border:1px solid var(--border);border-radius:10px;padding:12px;overflow-x:auto;margin:8px 0}
+    .bubble pre code{background:none;padding:0;font-size:12px}
+    .bubble strong{color:#fff}
+    .bubble p{margin-bottom:8px}
+    .bubble p:last-child{margin-bottom:0}
+    .bubble ul{padding-left:18px}
+    .bubble blockquote{border-left:3px solid var(--accent);padding-left:12px;color:var(--text-dim);margin:8px 0}
+ 
+    .typing-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-dim);margin:0 2px;animation:bounce .9s infinite}
+    .typing-dots span:nth-child(2){animation-delay:.15s}
+    .typing-dots span:nth-child(3){animation-delay:.3s}
+    @keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
+ 
+    #welcome{text-align:center;padding:40px 20px}
+    #welcome .icon{font-size:52px;margin-bottom:12px}
+    #welcome h2{font-size:20px;margin-bottom:8px}
+    #welcome p{color:var(--text-dim);font-size:13px;max-width:280px;margin:0 auto 20px}
+    .starters{display:flex;flex-direction:column;gap:8px;max-width:340px;margin:0 auto}
+    .starter-btn{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 16px;color:var(--text);font-size:13px;cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
+    .starter-btn:hover{border-color:var(--accent);background:var(--surface2)}
+ 
+    #input-bar{display:flex;align-items:flex-end;gap:8px;padding:10px 14px calc(10px + var(--safe-bot));background:var(--surface);border-top:1px solid var(--border)}
+    #msg-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:22px;padding:10px 16px;color:var(--text);font-size:15px;resize:none;min-height:44px;max-height:120px;line-height:1.4;outline:none;font-family:inherit;transition:border-color .2s}
+    #msg-input:focus{border-color:var(--accent)}
+    #msg-input::placeholder{color:var(--text-dim)}
+ 
+    .icon-btn{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;font-size:18px;flex-shrink:0;transition:transform .15s,background .2s}
+    .icon-btn:active{transform:scale(.9)}
+    #send-btn{background:var(--accent)}
+    #send-btn:disabled{background:#555;cursor:not-allowed}
+    #voice-btn{background:var(--surface2);border:1px solid var(--border)}
+    #voice-btn.recording{background:var(--accent)!important;animation:ripple 1.2s ease-out infinite}
+    @keyframes ripple{0%{box-shadow:0 0 0 0 rgba(233,69,96,.6)}70%{box-shadow:0 0 0 16px rgba(233,69,96,0)}100%{box-shadow:0 0 0 0 rgba(233,69,96,0)}}
+ 
+    #voice-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:100}
+    #voice-overlay.active{display:flex}
+    #voice-wave{font-size:64px;animation:pulse 1s infinite}
+    #voice-status{color:#ddd;font-size:16px;max-width:300px;text-align:center;min-height:40px}
+    #voice-timer{color:var(--text-dim);font-size:13px;font-variant-numeric:tabular-nums}
+    #voice-stop{background:var(--accent);border:none;color:#fff;border-radius:50px;padding:12px 28px;font-size:15px;cursor:pointer;font-weight:600}
+    #voice-cancel{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:50px;padding:10px 24px;font-size:14px;cursor:pointer}
+ 
+    #toast{position:fixed;bottom:calc(90px + var(--safe-bot));left:50%;transform:translateX(-50%) translateY(20px);background:#222;border:1px solid var(--border);border-radius:20px;padding:8px 18px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:90vw;text-align:center;z-index:50}
+    #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
   </style>
 </head>
 <body>
 <div id="app">
-  <!-- Header -->
   <header>
     <div class="logo">🗄️</div>
     <div class="header-text">
       <h1>DE Knowledge Assistant</h1>
       <p id="header-sub">Connecting…</p>
     </div>
-    <div id="status-dot" title="Agent status"></div>
+    <div id="status-dot"></div>
   </header>
-
-  <!-- Messages -->
+ 
   <div id="messages">
     <div id="welcome">
       <div class="icon">⚡</div>
@@ -213,118 +116,113 @@
       </div>
     </div>
   </div>
-
-  <!-- Input bar -->
+ 
   <div id="input-bar">
-    <button id="voice-btn" class="icon-btn" onclick="toggleVoice()" title="Voice input">🎤</button>
+    <button id="voice-btn" class="icon-btn" onclick="startVoice()" title="Voice input">🎤</button>
     <textarea id="msg-input" rows="1" placeholder="Ask a data engineering question…"
       onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea>
     <button id="send-btn" class="icon-btn" onclick="sendMessage()" title="Send">➤</button>
   </div>
 </div>
-
-<!-- Voice overlay -->
+ 
 <div id="voice-overlay">
   <div id="voice-wave">🎙️</div>
-  <div id="voice-transcript">Listening…</div>
-  <button id="voice-cancel" onclick="stopVoice()">✕ Cancel</button>
+  <div id="voice-status">Recording…</div>
+  <div id="voice-timer">0:00</div>
+  <button id="voice-stop" onclick="stopVoice(true)">✓ Done — Transcribe</button>
+  <button id="voice-cancel" onclick="stopVoice(false)">✕ Cancel</button>
 </div>
-
-<!-- Toast -->
+ 
 <div id="toast"></div>
-
+ 
 <script>
-// ── State ────────────────────────────────────────────────────────────────────
+// ═══════════════════════════════════════════════════════════════════════════
+// State & globals
+// ═══════════════════════════════════════════════════════════════════════════
+const BASE_URL = window.location.origin;
 const state = {
   history: [],
   isLoading: false,
-  recognition: null,
+  mediaRecorder: null,
+  audioChunks: [],
+  recordStart: 0,
+  timerInterval: null,
   synthesis: window.speechSynthesis || null,
-  voiceActive: false,
-  currentUtterance: null,
+  voiceInputUsed: false,
 };
-
-const BASE_URL = window.location.origin;
-
-// ── DOM helpers ──────────────────────────────────────────────────────────────
+ 
+// ═══════════════════════════════════════════════════════════════════════════
+// DOM helpers
+// ═══════════════════════════════════════════════════════════════════════════
 const $ = id => document.getElementById(id);
-const msgInput    = $('msg-input');
-const messages    = $('messages');
-const sendBtn     = $('send-btn');
-const voiceBtn    = $('voice-btn');
-const statusDot   = $('status-dot');
-const headerSub   = $('header-sub');
-const welcome     = $('welcome');
-const voiceOverlay = $('voice-overlay');
-const voiceTranscript = $('voice-transcript');
-
-// ── Health check ─────────────────────────────────────────────────────────────
+const msgInput  = $('msg-input');
+const messages  = $('messages');
+const sendBtn   = $('send-btn');
+const voiceBtn  = $('voice-btn');
+const statusDot = $('status-dot');
+const headerSub = $('header-sub');
+ 
+// ═══════════════════════════════════════════════════════════════════════════
+// Health check
+// ═══════════════════════════════════════════════════════════════════════════
 async function checkHealth() {
   try {
     const r = await fetch(`${BASE_URL}/api/health`);
     const data = await r.json();
-    statusDot.className = 'ready';
-    headerSub.textContent = `${data.vectorstore_docs.toLocaleString()} chunks · Groq`;
+    statusDot.className = data.groq_key_set ? 'ready' : 'error';
+    headerSub.textContent = data.groq_key_set
+      ? `${data.vectorstore_docs.toLocaleString()} chunks · Groq`
+      : '⚠️ GROQ_API_KEY missing — check Space secrets';
   } catch {
     statusDot.className = 'loading';
-    headerSub.textContent = 'Agent initialising…';
+    headerSub.textContent = 'Server starting…';
     setTimeout(checkHealth, 3000);
   }
 }
 checkHealth();
-
-// ── Markdown renderer (no deps) ───────────────────────────────────────────────
+ 
+// ═══════════════════════════════════════════════════════════════════════════
+// Markdown rendering (dependency-free)
+// ═══════════════════════════════════════════════════════════════════════════
+function escHtml(s) {
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+ 
 function renderMarkdown(text) {
   return text
-    // code blocks
-    .replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) =>
+    .replace(/```(\w*)\n?([\s\S]*?)```/g, (_,lang,code) =>
       `<pre><code class="lang-${lang}">${escHtml(code.trim())}</code></pre>`)
-    // inline code
-    .replace(/`([^`]+)`/g, (_, c) => `<code>${escHtml(c)}</code>`)
-    // bold
+    .replace(/`([^`]+)`/g, (_,c) => `<code>${escHtml(c)}</code>`)
     .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    // italic
     .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    // headings
     .replace(/^### (.+)$/gm, '<p><strong>$1</strong></p>')
     .replace(/^## (.+)$/gm,  '<p><strong>$1</strong></p>')
-    // bullets
     .replace(/^[-•] (.+)$/gm, '<li>$1</li>')
     .replace(/(<li>[\s\S]+?<\/li>)/g, '<ul>$1</ul>')
-    // numbered lists
     .replace(/^\d+\. (.+)$/gm, '<li>$1</li>')
-    // emoji-prefixed tips
     .replace(/^(💡.+)$/gm, '<blockquote>$1</blockquote>')
-    // newlines → paragraphs
     .replace(/\n\n+/g, '</p><p>')
     .replace(/^(?!<)(.+)/gm, '$1')
-    .replace(/^<p><\/p>$|^<\/p><p>$/gm, '')
     .trim();
 }
-function escHtml(s) {
-  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-}
-
-// ── Message rendering ─────────────────────────────────────────────────────────
-function appendMessage(role, content, streaming = false) {
-  if (welcome.style.display !== 'none' || document.getElementById('welcome')) {
-    if ($('welcome')) $('welcome').remove();
-  }
-
+ 
+// ═══════════════════════════════════════════════════════════════════════════
+// Message rendering
+// ═══════════════════════════════════════════════════════════════════════════
+function appendMessage(role, content) {
+  $('welcome')?.remove();
   const wrap = document.createElement('div');
   wrap.className = `msg ${role}`;
   wrap.innerHTML = `
-    <div class="avatar">${role === 'user' ? '🧑' : '🤖'}</div>
-    <div class="bubble" id="bubble-${Date.now()}">${
-      role === 'user' ? escHtml(content) : renderMarkdown(content)
-    }</div>`;
+    <div class="avatar">${role==='user'?'🧑':'🤖'}</div>
+    <div class="bubble">${role==='user' ? escHtml(content) : renderMarkdown(content)}</div>`;
   messages.appendChild(wrap);
   messages.scrollTop = messages.scrollHeight;
   return wrap.querySelector('.bubble');
 }
-
+ 
 function showTyping() {
-  if ($('welcome')) $('welcome').remove();
+  $('welcome')?.remove();
   const wrap = document.createElement('div');
   wrap.className = 'msg bot';
   wrap.id = 'typing-indicator';
@@ -334,222 +232,267 @@ function showTyping() {
   messages.appendChild(wrap);
   messages.scrollTop = messages.scrollHeight;
 }
-
+ 
 function removeTyping() { $('typing-indicator')?.remove(); }
-
-// ── Send flow ─────────────────────────────────────────────────────────────────
+ 
+// ═══════════════════════════════════════════════════════════════════════════
+// Send flow — tries streaming first, falls back to /api/chat-simple
+// ═══════════════════════════════════════════════════════════════════════════
 async function sendMessage(text) {
   const msg = (text || msgInput.value).trim();
   if (!msg || state.isLoading) return;
-
+ 
   msgInput.value = '';
   autoResize(msgInput);
   state.isLoading = true;
   sendBtn.disabled = true;
   statusDot.className = 'loading';
-
+ 
   appendMessage('user', msg);
   showTyping();
-
-  // Stop any ongoing TTS
   state.synthesis?.cancel();
-
+ 
+  try {
+    const full = await streamWithFallback(msg);
+ 
+    state.history.push({ role:'user', content:msg });
+    state.history.push({ role:'assistant', content:full });
+    if (state.history.length > 12) state.history = state.history.slice(-12);
+ 
+    if (state.voiceInputUsed && state.synthesis && full) {
+      speakText(stripMarkdown(full));
+      state.voiceInputUsed = false;
+    }
+  } catch (err) {
+    removeTyping();
+    appendMessage('bot', `⚠️ **Error:** ${err.message}`);
+  } finally {
+    state.isLoading = false;
+    sendBtn.disabled = false;
+    statusDot.className = 'ready';
+  }
+}
+ 
+async function streamWithFallback(msg) {
+  // ── Try SSE streaming first ────────────────────────────────────────────
   try {
     const res = await fetch(`${BASE_URL}/api/chat`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ message: msg, history: state.history, stream: true }),
     });
-
-    removeTyping();
-
-    if (!res.ok) throw new Error(`Server error ${res.status}`);
-
-    const bubble = appendMessage('bot', '');
-    let full = '';
-
-    // Server-Sent Events streaming
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ 
     const reader = res.body.getReader();
     const decoder = new TextDecoder();
-    let buffer = '';
-
+    let buffer = '', full = '', bubble = null, firstChunkAt = Date.now();
+ 
+    // If no real data arrives in 25s, abort and fall back
+    const watchdog = setTimeout(() => reader.cancel('timeout'), 25000);
+ 
     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(':')) continue;               // comment / heartbeat
         if (!line.startsWith('data: ')) continue;
         const payload = line.slice(6).trim();
-        if (payload === '[DONE]') break;
+        if (payload === '[DONE]') { clearTimeout(watchdog); return full; }
         try {
           const { chunk } = JSON.parse(payload);
           if (chunk) {
+            if (!bubble) { removeTyping(); bubble = appendMessage('bot',''); }
             full += chunk;
             bubble.innerHTML = renderMarkdown(full);
             messages.scrollTop = messages.scrollHeight;
           }
-        } catch { /* skip malformed */ }
+        } catch { /* ignore malformed */ }
       }
     }
-
-    // Update history
-    state.history.push({ role: 'user', content: msg });
-    state.history.push({ role: 'assistant', content: full });
-    if (state.history.length > 12) state.history = state.history.slice(-12);
-
-    // Auto-speak response if voice mode was used
-    if (state.voiceActive && state.synthesis) {
-      speakText(stripMarkdown(full));
+    clearTimeout(watchdog);
+    if (full) return full;
+    throw new Error('Empty stream');
+  } catch (streamErr) {
+    // ── Fall back to the non-streaming endpoint ────────────────────────
+    console.warn('SSE failed, falling back to /api/chat-simple:', streamErr);
+    toast('Streaming blocked — using fallback', 2000);
+ 
+    const res = await fetch(`${BASE_URL}/api/chat-simple`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message: msg, history: state.history, stream: false }),
+    });
+    if (!res.ok) {
+      const errText = await res.text();
+      throw new Error(`Server returned ${res.status}: ${errText}`);
     }
-
-  } catch (err) {
+    const data = await res.json();
     removeTyping();
-    appendMessage('bot', `⚠️ Error: ${err.message}. Check that the server is running and GROQ_API_KEY is set.`);
-  } finally {
-    state.isLoading = false;
-    sendBtn.disabled = false;
-    statusDot.className = 'ready';
+    appendMessage('bot', data.response);
+    return data.response;
   }
 }
-
+ 
 function sendStarter(btn) { sendMessage(btn.textContent.trim()); }
-
-// ── Text-to-Speech ────────────────────────────────────────────────────────────
+ 
+// ═══════════════════════════════════════════════════════════════════════════
+// Voice INPUT — MediaRecorder + server-side Groq Whisper
+// (No more `webkitSpeechRecognition` → no more "network" errors)
+// ═══════════════════════════════════════════════════════════════════════════
+async function startVoice() {
+  if (state.mediaRecorder) { stopVoice(false); return; }
+ 
+  if (!navigator.mediaDevices?.getUserMedia) {
+    toast('🎤 This browser does not support audio recording');
+    return;
+  }
+ 
+  let stream;
+  try {
+    stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  } catch (err) {
+    toast(err.name === 'NotAllowedError'
+      ? '🎤 Microphone permission denied'
+      : `🎤 Mic error: ${err.name}`);
+    return;
+  }
+ 
+  // Pick the best-supported mime type
+  const mimeCandidates = ['audio/webm;codecs=opus','audio/webm','audio/mp4','audio/ogg'];
+  const mimeType = mimeCandidates.find(t => MediaRecorder.isTypeSupported(t)) || '';
+ 
+  state.audioChunks = [];
+  state.mediaRecorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+  state.voiceInputUsed = true;
+ 
+  state.mediaRecorder.ondataavailable = e => {
+    if (e.data.size > 0) state.audioChunks.push(e.data);
+  };
+ 
+  state.mediaRecorder.onstop = async () => {
+    stream.getTracks().forEach(t => t.stop());
+    const submitted = state.mediaRecorder._submit !== false;
+    const chunks = state.audioChunks;
+    state.mediaRecorder = null;
+    state.audioChunks = [];
+ 
+    if (!submitted || !chunks.length) return;
+ 
+    $('voice-status').textContent = 'Transcribing…';
+    $('voice-wave').textContent = '⏳';
+ 
+    const blob = new Blob(chunks, { type: mimeType || 'audio/webm' });
+    const ext  = (mimeType.includes('mp4') ? 'm4a'
+                 : mimeType.includes('ogg') ? 'ogg'
+                 : 'webm');
+ 
+    const fd = new FormData();
+    fd.append('audio', blob, `recording.${ext}`);
+ 
+    try {
+      const res = await fetch(`${BASE_URL}/api/transcribe`, { method:'POST', body: fd });
+      const data = await res.json();
+      closeVoiceOverlay();
+ 
+      if (!res.ok) throw new Error(data.detail || 'Transcription failed');
+      const text = (data.text || '').trim();
+      if (!text) { toast('No speech detected'); return; }
+ 
+      msgInput.value = text;
+      autoResize(msgInput);
+      sendMessage(text);
+    } catch (err) {
+      closeVoiceOverlay();
+      toast(`Voice error: ${err.message}`, 5000);
+    }
+  };
+ 
+  // ── Open overlay, start timer ──────────────────────────────────────────
+  state.recordStart = Date.now();
+  $('voice-status').textContent = 'Recording… speak your question';
+  $('voice-wave').textContent = '🎙️';
+  $('voice-timer').textContent = '0:00';
+  $('voice-overlay').classList.add('active');
+  voiceBtn.classList.add('recording');
+ 
+  state.timerInterval = setInterval(() => {
+    const s = Math.floor((Date.now() - state.recordStart) / 1000);
+    $('voice-timer').textContent = `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`;
+    if (s >= 60) stopVoice(true);   // auto-stop at 60s
+  }, 200);
+ 
+  state.mediaRecorder.start();
+}
+ 
+function stopVoice(submit) {
+  clearInterval(state.timerInterval);
+  if (!state.mediaRecorder) { closeVoiceOverlay(); return; }
+  state.mediaRecorder._submit = submit;
+  try { state.mediaRecorder.stop(); } catch { closeVoiceOverlay(); }
+}
+ 
+function closeVoiceOverlay() {
+  $('voice-overlay').classList.remove('active');
+  voiceBtn.classList.remove('recording');
+  clearInterval(state.timerInterval);
+}
+ 
+// ═══════════════════════════════════════════════════════════════════════════
+// Voice OUTPUT — browser SpeechSynthesis (free, no API)
+// ═══════════════════════════════════════════════════════════════════════════
 function speakText(text) {
   if (!state.synthesis) return;
   state.synthesis.cancel();
-  const utt = new SpeechSynthesisUtterance(text.slice(0, 800)); // limit TTS length
+  const utt = new SpeechSynthesisUtterance(text.slice(0, 800));
   utt.rate = 1.05;
-  utt.pitch = 1;
-  // Prefer a natural English voice
   const voices = state.synthesis.getVoices();
-  const preferred = voices.find(v => v.lang.startsWith('en') && v.localService)
-                 || voices.find(v => v.lang.startsWith('en'))
-                 || voices[0];
-  if (preferred) utt.voice = preferred;
+  const pref = voices.find(v => v.lang.startsWith('en') && v.localService)
+            || voices.find(v => v.lang.startsWith('en'))
+            || voices[0];
+  if (pref) utt.voice = pref;
   state.synthesis.speak(utt);
 }
-
-function stripMarkdown(text) {
-  return text.replace(/```[\s\S]*?```/g, 'code block')
-             .replace(/`([^`]+)`/g, '$1')
-             .replace(/\*\*(.+?)\*\*/g, '$1')
-             .replace(/\*(.+?)\*/g, '$1')
-             .replace(/^#+\s/gm, '')
-             .replace(/^[-•] /gm, '')
-             .replace(/💡/g, 'Pro tip:');
-}
-
-// ── Voice Input ───────────────────────────────────────────────────────────────
-function setupSpeechRecognition() {
-  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
-  if (!SR) return null;
-
-  const rec = new SR();
-  rec.continuous = false;
-  rec.interimResults = true;
-  rec.lang = 'en-US';
-
-  rec.onstart = () => {
-    voiceOverlay.classList.add('active');
-    voiceBtn.classList.add('recording');
-    voiceTranscript.textContent = 'Listening…';
-  };
-
-  rec.onresult = e => {
-    let interim = '', final = '';
-    for (let r of e.results) {
-      if (r.isFinal) final += r[0].transcript;
-      else interim += r[0].transcript;
-    }
-    voiceTranscript.textContent = final || interim || 'Listening…';
-    if (final) msgInput.value = final;
-  };
-
-  rec.onerror = err => {
-    stopVoice();
-    if (err.error === 'not-allowed') toast('🎤 Microphone permission denied');
-    else toast(`Voice error: ${err.error}`);
-  };
-
-  rec.onend = () => {
-    voiceOverlay.classList.remove('active');
-    voiceBtn.classList.remove('recording');
-    state.voiceActive = false;
-    const text = msgInput.value.trim();
-    if (text) sendMessage(text);
-  };
-
-  return rec;
-}
-
-function toggleVoice() {
-  if (state.voiceActive) { stopVoice(); return; }
-
-  if (!state.recognition) {
-    state.recognition = setupSpeechRecognition();
-  }
-
-  if (!state.recognition) {
-    toast('🎤 Voice not supported in this browser. Try Chrome on Android or Safari on iOS 14.5+.');
-    return;
-  }
-
-  state.voiceActive = true;
-  try { state.recognition.start(); }
-  catch { state.voiceActive = false; toast('Could not start microphone'); }
+ 
+function stripMarkdown(t) {
+  return t.replace(/```[\s\S]*?```/g,'code block')
+          .replace(/`([^`]+)`/g,'$1')
+          .replace(/\*\*(.+?)\*\*/g,'$1')
+          .replace(/\*(.+?)\*/g,'$1')
+          .replace(/^#+\s/gm,'')
+          .replace(/^[-•]\s/gm,'')
+          .replace(/💡/g,'Pro tip:');
 }
-
-function stopVoice() {
-  state.voiceActive = false;
-  state.recognition?.abort();
-  voiceOverlay.classList.remove('active');
-  voiceBtn.classList.remove('recording');
-}
-
-// ── UI helpers ────────────────────────────────────────────────────────────────
+ 
+// ═══════════════════════════════════════════════════════════════════════════
+// UI helpers
+// ═══════════════════════════════════════════════════════════════════════════
 function autoResize(el) {
   el.style.height = 'auto';
   el.style.height = Math.min(el.scrollHeight, 120) + 'px';
 }
-
 function handleKey(e) {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault();
-    sendMessage();
-  }
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
 }
-
-function toast(msg, duration = 3000) {
+function toast(msg, dur = 3000) {
   const t = $('toast');
   t.textContent = msg;
   t.classList.add('show');
-  setTimeout(() => t.classList.remove('show'), duration);
+  setTimeout(() => t.classList.remove('show'), dur);
 }
-
-// ── PWA install banner ────────────────────────────────────────────────────────
-let deferredPrompt;
-window.addEventListener('beforeinstallprompt', e => {
-  e.preventDefault();
-  deferredPrompt = e;
-  setTimeout(() => {
-    toast('📲 Add to Home Screen for the best experience!', 5000);
-  }, 3000);
-});
-
-// ── Service worker ────────────────────────────────────────────────────────────
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/sw.js').catch(() => {});
-}
-
-// Load voices async (required for some browsers)
+ 
+// Load voices async (iOS fix)
 if (state.synthesis) {
   state.synthesis.onvoiceschanged = () => state.synthesis.getVoices();
   state.synthesis.getVoices();
 }
+ 
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js').catch(() => {});
+}
 </script>
 </body>
-</html>
+</html>