Update index.html

index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
   <title>BubbleGuard – Safe Chat</title>
 
-  <!-- Favicon & CSS: use RELATIVE paths (no leading /) -->
+  <!-- RELATIVE paths (no leading /) -->
   <link rel="icon" href="logo.png">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="styles.css" rel="stylesheet">
@@ -32,7 +32,6 @@
 
     <!-- Chat -->
     <main id="chat" class="container chat-wrap" aria-live="polite" aria-label="Chat history">
-      <!-- Greeting -->
       <div class="row-start">
         <img src="avatar_female.png" alt="" class="avatar" onerror="this.style.display='none'">
         <div class="bubble-them bubble shadow-bubble">
@@ -44,8 +43,6 @@
 
     <!-- Composer -->
     <footer class="composer-wrap">
-
-      <!-- Reply banner -->
       <div id="replyBanner" class="reply-banner d-none" role="status" aria-live="polite">
         <div class="rb-body">
           <div class="rb-line">
@@ -58,7 +55,6 @@
 
       <div class="container composer">
         <input id="fileImg" type="file" accept="image/*" class="d-none" aria-hidden="true">
-
         <button id="btnImg" class="btn btn-ico" title="Attach image" aria-label="Attach image">＋</button>
 
         <div class="input-shell">
@@ -77,7 +73,6 @@
         <button id="btnSend" class="btn send-ios" aria-label="Send">↑</button>
       </div>
 
-      <!-- Toast -->
       <div class="toast-zone">
         <div id="toast" class="toast ios-toast" role="alert" aria-live="assertive" aria-atomic="true">
           <div class="toast-body" id="toastBody">Hello</div>
@@ -86,30 +81,20 @@
     </footer>
   </div>
 
-  <!-- Bootstrap JS -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
-  <!-- App Script -->
   <script>
-    // ---------- Config (RELATIVE API helper) ----------
-    const api = (p) => new URL(p, window.location.href).toString(); // use: api('check_text')
+    // ---------- API helper (always relative) ----------
+    const api = (p) => new URL(String(p).replace(/^\/+/, ''), window.location.href).toString();
 
     // ---------- JSON guard ----------
     async function fetchJSON(url, opts) {
       const res = await fetch(url, Object.assign({ headers: { 'Accept': 'application/json' } }, opts || {}));
       const ct = (res.headers.get('content-type') || '').toLowerCase();
       const text = await res.text();
-      if (!ct.includes('application/json')) {
-        throw new Error('Non-JSON from API: ' + text.slice(0, 160));
-      }
-      let body;
-      try { body = JSON.parse(text); } catch (e) {
-        throw new Error('Invalid JSON: ' + text.slice(0, 160));
-      }
-      if (!res.ok) {
-        const msg = (body && (body.detail || body.error)) || (res.status + ' ' + res.statusText);
-        throw new Error(msg);
-      }
+      if (!ct.includes('application/json')) throw new Error('Non-JSON: ' + text.slice(0, 160));
+      let body; try { body = JSON.parse(text); } catch { throw new Error('Invalid JSON: ' + text.slice(0,160)); }
+      if (!res.ok) throw new Error(body.detail || res.status + ' ' + res.statusText);
       return body;
     }
 
@@ -126,14 +111,14 @@
 
     // ---------- Health ----------
     (async () => {
+      const el = document.getElementById('health');
       try {
         const j = await fetchJSON(api('health'));
         const t = j.text_thresholds || {};
-        document.getElementById('health').textContent =
-          `Online · ${j.device} · T=${t.TEXT_UNSAFE_THR ?? '-'} · S=${t.SHORT_MSG_UNSAFE_THR ?? '-'}`;
+        el.textContent = `Online · ${j.device} · T=${t.TEXT_UNSAFE_THR ?? '-'} · S=${t.SHORT_MSG_UNSAFE_THR ?? '-'}`;
       } catch (e) {
-        document.getElementById('health').textContent = 'Offline';
         console.warn('health error:', e);
+        el.textContent = 'Offline';
       }
     })();
 
@@ -150,7 +135,7 @@
     const showToast = (msg) => { toastBody.textContent = msg; toast.show(); };
     const esc = (s)=>s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 
-    // ---------- Reactions & Reply state ----------
+    // ---------- Reactions & Reply ----------
     const REACTIONS = ["👍","❤️","😂","😮","😢"];
     let replyTarget = null;
 
@@ -221,7 +206,6 @@
     function cancelReply(){ replyTarget = null; $('replyBanner').classList.add('d-none'); }
     $('replyCancel').onclick = cancelReply;
 
-    // ---------- Bubble creators ----------
     function armBubbleInteractions(bubble, isThem=false){
       let pressTimer = null;
       const startPress = ()=>{ pressTimer=setTimeout(()=>showReactionsPop(bubble), 380); };
@@ -277,7 +261,6 @@
       return b;
     }
 
-    // ---------- Blast helper ----------
     function blastBubble({ html, side='you', preview=true, icon='🚫', removeDelay=900 }){
       const content = preview
         ? `<span class="unsafe-icon" aria-hidden="true">${icon}</span><span class="unsafe-preview">${html}</span>`
@@ -287,10 +270,7 @@
       setTimeout(()=> bubble.closest('.row-start, .row-end')?.remove(), removeDelay);
     }
 
-    // ---------- Input behavior ----------
-    const typing = $('typing');
     function setTyping(on){ typing.classList.toggle('d-none', !on); }
-    const input = $('input');
     input.addEventListener('input', ()=>{
       input.style.height='auto';
       input.style.height=Math.min(input.scrollHeight, 140)+'px';
@@ -299,9 +279,9 @@
       if(e.key==='Escape'){ input.value=''; input.style.height='auto'; }
       if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); sendText(); }
     });
+
     const normalizeInputText = (t)=> t.replace(/[’‘]/g,"'").replace(/[“”]/g,'"').replace(/\s+/g,' ').trim();
 
-    // ---------- Send text ----------
     async function sendText(){
       let t = normalizeInputText(input.value);
       if(!t) return;
@@ -311,7 +291,7 @@
         t = `${quoted}${t}`;
       }
 
-      setTyping(true); $('btnSend').disabled=true;
+      setTyping(true); btnSend.disabled=true;
       try{
         const fd = new FormData(); fd.append('text', t);
         const j = await fetchJSON(api('check_text'), { method: 'POST', body: fd });
@@ -324,14 +304,14 @@
       }catch(e){ showToast('Error: '+e.message); }
       finally{
         input.value=''; input.style.height='auto';
-        setTyping(false); $('btnSend').disabled=false;
+        setTyping(false); btnSend.disabled=false;
       }
     }
-    $('btnSend').onclick = sendText;
+    btnSend.onclick = sendText;
 
-    // ---------- Image ----------
-    $('btnImg').onclick = ()=> $('fileImg').click();
-    $('fileImg').onchange = async ()=>{ const f=$('fileImg').files[0]; if(f) await handleImage(f); $('fileImg').value=''; };
+    // Image
+    btnImg.onclick = ()=> fileImg.click();
+    fileImg.onchange = async ()=>{ if(fileImg.files[0]) await handleImage(fileImg.files[0]); fileImg.value=''; };
 
     async function handleImage(file){
       setTyping(true);
@@ -359,9 +339,9 @@
       else showToast('Only images supported via drop.');
     }, false);
 
-    // ---------- Voice ----------
+    // Voice
     let mediaStream=null, mediaRecorder=null, chunks=[], tick=null, startTs=0;
-    const btnStart=$('btnStart'), btnStop=$('btnStop'), recTimer=$('recTimer');
+    const fmt = (t)=>{ const m=Math.floor(t/60), s=Math.floor(t%60); return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; };
 
     const pickMime = () => {
       const prefs=['audio/webm;codecs=opus','audio/webm','audio/mp4;codecs=mp4a.40.2','audio/mp4','audio/ogg;codecs=opus','audio/ogg'];
@@ -373,7 +353,6 @@
       btnStart.disabled=recording; btnStop.disabled=!recording;
       recTimer.classList.toggle('d-none',!recording);
     }
-    const fmt = (t)=>{ const m=Math.floor(t/60), s=Math.floor(t%60); return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; };
 
     btnStart.onclick = async ()=>{
       try{