Update index.html

index.html

@@ -5,9 +5,6 @@
   <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
   <title>BubbleGuard – Safe Chat</title>
 
-  <!-- Force your Space (owner/space). Change if you rename it. -->
-  <meta name="hf-space" content="MetiMiester/BubbleGuard">
-
   <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">
@@ -82,23 +79,8 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
   <script>
-    // ----- API origin (prefer your Space container) -----
-    function computeSpaceOrigin() {
-      const meta = document.querySelector('meta[name="hf-space"]')?.content;
-      if (meta && meta.includes('/')) {
-        const [org, space] = meta.split('/');
-        return `https://${org}-${space}.hf.space`.toLowerCase();
-      }
-      if (location.hostname.endsWith('.hf.space')) return location.origin;
-      if (location.hostname.endsWith('huggingface.co')) {
-        const m = location.pathname.match(/^\/spaces\/([^/]+)\/([^/?#]+)/);
-        if (m) return `https://${m[1]}-${m[2]}.hf.space`.toLowerCase();
-      }
-      const rm = (document.referrer||'').match(/huggingface\.co\/spaces\/([^/]+)\/([^/?#]+)/);
-      if (rm) return `https://${rm[1]}-${rm[2]}.hf.space`.toLowerCase();
-      return location.origin;
-    }
-    const SPACE_ORIGIN = computeSpaceOrigin();
+    // ---- Hard-wire your Space origin (change if you rename it) ----
+    const SPACE_ORIGIN = "https://metimiester-bubbleguard.hf.space";  // <<— EDIT if org/space changes
     const api = (p) => `${SPACE_ORIGIN}/${String(p).replace(/^\/+/, '')}`;
 
     async function fetchJSON(url, opts) {
@@ -111,7 +93,7 @@
       return body;
     }
 
-    // ----- Theme -----
+    // ---- Theme ----
     const setTheme = (t)=> document.documentElement.setAttribute('data-bs-theme', t);
     const saved = localStorage.getItem('bg-theme');
     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -122,7 +104,7 @@
       setTheme(next); localStorage.setItem('bg-theme', next);
     };
 
-    // ----- Health -----
+    // ---- Health ----
     (async () => {
       const el = document.getElementById('health');
       try {
@@ -131,11 +113,11 @@
         el.textContent = `Online · ${j.device} · T=${t.TEXT_UNSAFE_THR ?? '-'} · S=${t.SHORT_MSG_UNSAFE_THR ?? '-'}`;
       } catch (e) {
         console.warn('health error:', e);
-        el.textContent = 'Checking…';
+        el.textContent = 'Offline – ' + (e.message || e);
       }
     })();
 
-    // ----- DOM helpers -----
+    // ---- Helpers ----
     const $ = (id)=>document.getElementById(id);
     const chat = $('chat'), input=$('input'), typing=$('typing');
     const btnSend=$('btnSend'), btnImg=$('btnImg'), fileImg=$('fileImg');
@@ -148,7 +130,7 @@
     const showToast = (msg) => { toastBody.textContent = msg; toast.show(); };
     const esc = (s)=>s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 
-    // ----- Reactions & Reply -----
+    // ---- Reactions/Reply (same as before) ----
     const REACTIONS = ["👍","❤️","😂","😮","😢"];
     let replyTarget = null;
 
@@ -156,22 +138,15 @@
       const meta = bubble.querySelector('.meta');
       if(!meta) return;
       let ticks = meta.querySelector('.ticks');
-      if(!ticks){
-        ticks = document.createElement('span');
-        ticks.className = 'ticks';
-        meta.appendChild(ticks);
-      }
+      if(!ticks){ ticks = document.createElement('span'); ticks.className = 'ticks'; meta.appendChild(ticks); }
       ticks.innerHTML = double ? '<span class="tick-double"></span>' : '<span class="tick-solo"></span>';
     }
-
     function showReactionsPop(bubble){
       hideReactionsPop();
       const pop = document.createElement('div');
-      pop.className = 'react-pop';
-      pop.setAttribute('role','menu');
+      pop.className = 'react-pop'; pop.setAttribute('role','menu');
       REACTIONS.forEach(e=>{
-        const b=document.createElement('button');
-        b.type='button'; b.textContent=e; b.setAttribute('aria-label',`React ${e}`);
+        const b=document.createElement('button'); b.type='button'; b.textContent=e; b.setAttribute('aria-label',`React ${e}`);
         b.onclick = (ev)=>{ ev.stopPropagation(); toggleReaction(bubble, e); hideReactionsPop(); };
         pop.appendChild(b);
       });
@@ -179,7 +154,6 @@
       setTimeout(()=>document.addEventListener('click', hideReactionsPop, { once:true }), 0);
     }
     function hideReactionsPop(){ document.querySelectorAll('.react-pop').forEach(p=>p.remove()); }
-
     function toggleReaction(bubble, emoji){
       bubble._reactions = bubble._reactions || new Map();
       const meKey = `me:${emoji}`;
@@ -189,32 +163,22 @@
     }
     function renderReactions(bubble){
       const counts = {};
-      (bubble._reactions||new Map()).forEach((v,k)=>{
-        const em = k.split(':')[1];
-        counts[em] = (counts[em]||0) + 1;
-      });
+      (bubble._reactions||new Map()).forEach((v,k)=>{ const em = k.split(':')[1]; counts[em] = (counts[em]||0) + 1; });
       let row = bubble.querySelector('.react-row');
-      if(!row){
-        row = document.createElement('div'); row.className='react-row';
-        bubble.appendChild(row);
-      }
+      if(!row){ row = document.createElement('div'); row.className='react-row'; bubble.appendChild(row); }
       row.innerHTML = '';
       Object.entries(counts).sort((a,b)=>b[1]-a[1]).forEach(([em,c])=>{
-        const chip = document.createElement('span');
-        chip.className='react-chip';
-        chip.innerHTML = `${em} <span class="count">${c}</span>`;
+        const chip = document.createElement('span'); chip.className='react-chip'; chip.innerHTML = `${em} <span class="count">${c}</span>`;
         row.appendChild(chip);
       });
       if(Object.keys(counts).length===0) row.remove();
     }
-
     function startReply(bubble){
       const textNode = bubble.querySelector('.copy')?.textContent ?? '';
       replyTarget = { el: bubble, text: textNode.trim().slice(0, 60) };
       $('replySnippet').textContent = replyTarget.text || '(media)';
       $('replyBanner').classList.remove('d-none');
-      bubble.classList.add('swipe-hint');
-      setTimeout(()=>bubble.classList.remove('swipe-hint'), 900);
+      bubble.classList.add('swipe-hint'); setTimeout(()=>bubble.classList.remove('swipe-hint'), 900);
     }
     function cancelReply(){ replyTarget = null; $('replyBanner').classList.add('d-none'); }
     $('replyCancel').onclick = cancelReply;
@@ -223,23 +187,15 @@
       let pressTimer = null;
       const startPress = ()=>{ pressTimer=setTimeout(()=>showReactionsPop(bubble), 380); };
       const endPress   = ()=>{ clearTimeout(pressTimer); };
-
       bubble.addEventListener('contextmenu', (e)=>{ e.preventDefault(); showReactionsPop(bubble); });
       bubble.addEventListener('pointerdown', startPress);
       bubble.addEventListener('pointerup', endPress);
       bubble.addEventListener('pointerleave', endPress);
-
       if(isThem){
         let sx=0, dx=0;
         bubble.addEventListener('touchstart', (e)=>{ sx = e.touches[0].clientX; dx=0; }, {passive:true});
-        bubble.addEventListener('touchmove', (e)=>{
-          dx = e.touches[0].clientX - sx;
-          if(dx>12) bubble.style.transform = `translateX(${Math.min(dx, 72)}px)`;
-        }, {passive:true});
-        bubble.addEventListener('touchend', ()=>{
-          if(dx>56) startReply(bubble);
-          bubble.style.transform = '';
-        });
+        bubble.addEventListener('touchmove', (e)=>{ dx = e.touches[0].clientX - sx; if(dx>12) bubble.style.transform = `translateX(${Math.min(dx, 72)}px)`; }, {passive:true});
+        bubble.addEventListener('touchend', ()=>{ if(dx>56) startReply(bubble); bubble.style.transform = ''; });
       }
     }
 
@@ -253,12 +209,8 @@
         <img src="avatar_male.png" alt="" class="avatar" onerror="this.style.display='none'">
       `;
       chat.appendChild(row); scrollBottom();
-      const b = row.querySelector('.bubble-you');
-      armBubbleInteractions(b, false);
-      setTimeout(()=>markDelivered(b, true), 450);
-      return b;
+      const b = row.querySelector('.bubble-you'); armBubbleInteractions(b, false); setTimeout(()=>markDelivered(b, true), 450); return b;
     }
-
     function bubbleThem(html) {
       const row = document.createElement('div'); row.className='row-start';
       row.innerHTML = `
@@ -269,41 +221,25 @@
         </div>
       `;
       chat.appendChild(row); scrollBottom();
-      const b = row.querySelector('.bubble-them');
-      armBubbleInteractions(b, true);
-      return b;
+      const b = row.querySelector('.bubble-them'); armBubbleInteractions(b, true); return b;
     }
 
     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>`
-        : `<span class="unsafe-icon" aria-hidden="true">${icon}</span>`;
+      const content = preview ? `<span class="unsafe-icon" aria-hidden="true">${icon}</span><span class="unsafe-preview">${html}</span>`
+                              : `<span class="unsafe-icon" aria-hidden="true">${icon}</span>`;
       const bubble = side === 'you' ? bubbleMe(content) : bubbleThem(content);
-      bubble.classList.add('bubble-blast');
-      setTimeout(()=> bubble.closest('.row-start, .row-end')?.remove(), removeDelay);
+      bubble.classList.add('bubble-blast'); setTimeout(()=> bubble.closest('.row-start, .row-end')?.remove(), removeDelay);
     }
 
     function setTyping(on){ typing.classList.toggle('d-none', !on); }
-    input.addEventListener('input', ()=>{
-      input.style.height='auto';
-      input.style.height=Math.min(input.scrollHeight, 140)+'px';
-    });
-    input.addEventListener('keydown',(e)=>{
-      if(e.key==='Escape'){ input.value=''; input.style.height='auto'; }
-      if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); sendText(); }
-    });
+    input.addEventListener('input', ()=>{ input.style.height='auto'; input.style.height=Math.min(input.scrollHeight, 140)+'px'; });
+    input.addEventListener('keydown',(e)=>{ 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();
 
     async function sendText(){
-      let t = normalizeInputText(input.value);
-      if(!t) return;
-
-      if(replyTarget){
-        const quoted = replyTarget.text ? `> ${replyTarget.text}\n` : '';
-        t = `${quoted}${t}`;
-      }
-
+      let t = normalizeInputText(input.value); if(!t) return;
+      if(replyTarget){ const quoted = replyTarget.text ? `> ${replyTarget.text}\n` : ''; t = `${quoted}${t}`; }
       setTyping(true); btnSend.disabled=true;
       try{
         const fd = new FormData(); fd.append('text', t);
@@ -315,16 +251,12 @@
           showToast('Message blocked as unsafe' + reason);
         }
       }catch(e){ showToast('Error: '+e.message); }
-      finally{
-        input.value=''; input.style.height='auto';
-        setTyping(false); btnSend.disabled=false;
-      }
+      finally{ input.value=''; input.style.height='auto'; setTyping(false); btnSend.disabled=false; }
     }
     const btnSend = document.getElementById('btnSend'); btnSend.onclick = sendText;
 
-    // ----- Image -----
-    const btnImg = document.getElementById('btnImg');
-    const fileImg = document.getElementById('fileImg');
+    // ---- Image ----
+    const btnImg = document.getElementById('btnImg'); const fileImg = document.getElementById('fileImg');
     btnImg.onclick = ()=> fileImg.click();
     fileImg.onchange = async ()=>{ if(fileImg.files[0]) await handleImage(fileImg.files[0]); fileImg.value=''; };
 
@@ -333,13 +265,9 @@
       try{
         const fd = new FormData(); fd.append('file', file);
         const j = await fetchJSON(api('api/check_image'), { method: 'POST', body: fd });
-        if(j.safe){
-          const url = URL.createObjectURL(file);
-          bubbleMe(`<img src="${url}" class="chat-image" alt="Sent image">`);
-        } else {
-          blastBubble({ html: 'Image blocked', side: 'you', preview: false, icon: '🖼️' });
-          const reason = j.unsafe_prob!=null?` (p=${(+j.unsafe_prob).toFixed(2)})`:''; showToast('Image blocked as unsafe' + reason);
-        }
+        if(j.safe){ const url = URL.createObjectURL(file); bubbleMe(`<img src="${url}" class="chat-image" alt="Sent image">`); }
+        else { blastBubble({ html: 'Image blocked', side: 'you', preview: false, icon: '🖼️' });
+               const reason = j.unsafe_prob!=null?` (p=${(+j.unsafe_prob).toFixed(2)})`:''; showToast('Image blocked as unsafe' + reason); }
       }catch(e){ showToast('Error: '+e.message); }
       finally{ setTyping(false); }
     }
@@ -347,62 +275,27 @@
     // Drag & Drop (image only)
     ['dragenter','dragover'].forEach(ev=>document.addEventListener(ev, e=>{ e.preventDefault(); chat.classList.add('drop'); }, false));
     ;['dragleave','drop'].forEach(ev=>document.addEventListener(ev, e=>{ e.preventDefault(); chat.classList.remove('drop'); }, false));
-    document.addEventListener('drop', async (e)=>{
-      const f = e.dataTransfer?.files?.[0];
-      if(!f) return;
-      if (f.type.startsWith('image/')) await handleImage(f);
-      else showToast('Only images supported via drop.');
-    }, false);
+    document.addEventListener('drop', async (e)=>{ const f=e.dataTransfer?.files?.[0]; if(!f) return; if(f.type.startsWith('image/')) await handleImage(f); else showToast('Only images supported via drop.'); }, false);
 
-    // ----- Voice -----
+    // ---- Voice ----
     let mediaStream=null, mediaRecorder=null, chunks=[], tick=null, startTs=0;
     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'];
-      for(const m of prefs) if (window.MediaRecorder && MediaRecorder.isTypeSupported(m)) return m;
-      return '';
-    };
+    const pickMime = () => { const prefs=['audio/webm;codecs=opus','audio/webm','audio/mp4;codecs=mp4a.40.2','audio/mp4','audio/ogg;codecs=opus','audio/ogg']; for(const m of prefs) if (window.MediaRecorder && MediaRecorder.isTypeSupported(m)) return m; return ''; };
     async function ensureMic(){ if(!mediaStream) mediaStream = await navigator.mediaDevices.getUserMedia({audio:true}); }
-    function setRecUI(recording){
-      btnStart.disabled=recording; btnStop.disabled=!recording;
-      recTimer.classList.toggle('d-none',!recording);
-    }
+    function setRecUI(r){ btnStart.disabled=r; btnStop.disabled=!r; recTimer.classList.toggle('d-none',!r); }
 
-    btnStart.onclick = async ()=>{
-      try{
-        await ensureMic(); chunks=[];
-        const mime = pickMime();
-        mediaRecorder = new MediaRecorder(mediaStream, mime? {mimeType:mime}:{});
-        mediaRecorder.ondataavailable = e => { if(e.data && e.data.size) chunks.push(e.data); };
-        mediaRecorder.onstop = onRecordingStop;
-        mediaRecorder.start(250);
-        startTs = Date.now();
-        tick = setInterval(()=> recTimer.textContent = fmt((Date.now()-startTs)/1000), 300);
-        setRecUI(true);
-        setTimeout(()=>{ if(mediaRecorder && mediaRecorder.state==='recording') btnStop.click(); }, 60000);
-      }catch(e){ showToast('Mic error: '+e.message); }
-    };
-    btnStop.onclick = ()=>{
-      if(mediaRecorder && mediaRecorder.state==='recording'){ mediaRecorder.stop(); }
-      if(tick){ clearInterval(tick); tick=null; }
-      setRecUI(false);
-    };
+    const btnStart=document.getElementById('btnStart'); const btnStop=document.getElementById('btnStop'); const recTimer=document.getElementById('recTimer');
+    btnStart.onclick = async ()=>{ try{ await ensureMic(); chunks=[]; const mime=pickMime(); mediaRecorder=new MediaRecorder(mediaStream, mime?{mimeType:mime}:{}); mediaRecorder.ondataavailable=e=>{ if(e.data&&e.data.size) chunks.push(e.data); }; mediaRecorder.onstop=onRecordingStop; mediaRecorder.start(250); startTs=Date.now(); tick=setInterval(()=> recTimer.textContent=fmt((Date.now()-startTs)/1000),300); setRecUI(true); setTimeout(()=>{ if(mediaRecorder && mediaRecorder.state==='recording') btnStop.click(); },60000); }catch(e){ showToast('Mic error: '+e.message); } };
+    btnStop.onclick = ()=>{ if(mediaRecorder && mediaRecorder.state==='recording'){ mediaRecorder.stop(); } if(tick){ clearInterval(tick); tick=null; } setRecUI(false); };
 
     async function onRecordingStop(){
       try{
         setTyping(true);
-        const type = mediaRecorder?.mimeType || 'audio/webm';
-        const blob = new Blob(chunks, { type });
-        const fd = new FormData(); fd.append('file', blob, 'voice');
+        const type=mediaRecorder?.mimeType||'audio/webm'; const blob=new Blob(chunks,{type}); const fd=new FormData(); fd.append('file', blob, 'voice');
         const j = await fetchJSON(api('api/check_audio'), { method:'POST', body: fd });
-        if(j.safe){
-          const url = URL.createObjectURL(blob);
-          bubbleMe(`<audio controls src="${url}" class="audio-ios"></audio>`);
-        }else{
-          blastBubble({ html: 'Voice note blocked', side: 'you', preview: false, icon: '🔊' });
-          const reason = j.unsafe_prob!=null?` (p=${(+j.unsafe_prob).toFixed(2)})`:''; showToast('Voice note blocked as unsafe' + reason);
-        }
+        if(j.safe){ const url=URL.createObjectURL(blob); bubbleMe(`<audio controls src="${url}" class="audio-ios"></audio>`); }
+        else { blastBubble({ html: 'Voice note blocked', side: 'you', preview: false, icon: '🔊' });
+               const reason = j.unsafe_prob!=null?` (p=${(+j.unsafe_prob).toFixed(2)})`:''; showToast('Voice note blocked as unsafe' + reason); }
       }catch(e){ showToast('Error: '+e.message); }
       finally{ setTyping(false); }
     }