v3

2026-10-30 22:10:03 +01:00
parent 7f26f9b015
commit 90ffa635a0
161 changed files with 19042 additions and 111 deletions
@@ -0,0 +1,64 @@
+/* Espace enfant : dialogue texte uniquement. Aucun WebSocket/audio/MCP. */
+(() => {
+  'use strict';
+  const $ = id => document.getElementById(id);
+  const session = JSON.parse($('dona-child-session').textContent);
+  const messages = $('child-messages');
+  const form = $('child-form');
+  const input = $('child-input');
+  const send = $('child-send');
+  let busy = false;
+  function bubble(text, role, loading=false) {
+    const article=document.createElement('article');article.className='chat-turn '+role+(loading?' loading':'');
+    if (role==='scratch') {
+      const pic=document.createElement('img');pic.src='/static/img/scratch-cat-user.png';pic.alt='Le chat Scratch';pic.className='chat-avatar scratch-avatar';article.append(pic);
+    } else {
+      const avatar=document.createElement('div');avatar.className='user-avatar';avatar.textContent='🙂';avatar.setAttribute('aria-hidden','true');article.append(avatar);
+    }
+    const copy=document.createElement('div');copy.className='turn-copy';
+    const speaker=document.createElement('span');speaker.className='speaker';speaker.textContent=role==='scratch'?'Scratch':'Moi';
+    const textBox=document.createElement('div');textBox.className='chat-bubble';textBox.textContent=text;
+    copy.append(speaker,textBox);article.append(copy);messages.append(article);
+    messages.scrollTop=messages.scrollHeight;
+    return article;
+  }
+  async function post(url,data) {
+    const r=await fetch(url,{method:'POST',credentials:'same-origin',headers:{
+      'Content-Type':'application/json','X-Dona-Enfant':'1'
+    },body:JSON.stringify(data)});
+    let payload={};try{payload=await r.json();}catch(_){}
+    if(!r.ok)throw new Error(payload.error||'Connexion impossible');
+    return payload;
+  }
+  form.addEventListener('submit',async event=>{
+    event.preventDefault();
+    if(busy)return;
+    const text=input.value.trim();if(!text)return;
+    busy=true;send.disabled=true;input.disabled=true;
+    input.value='';bubble(text,'you');
+    const pending=bubble('Scratch réfléchit…','scratch',true);
+    try {
+      const result=await post('/api/enfant/message',{session,message:text});
+      pending.querySelector('.chat-bubble').textContent=result.reply||'Je n’ai pas compris, on réessaie ?';
+      pending.classList.remove('loading');
+    } catch(err) {
+      pending.querySelector('.chat-bubble').textContent=err.message;
+      pending.classList.remove('loading');
+    } finally {
+      busy=false;send.disabled=false;input.disabled=false;input.focus();
+      messages.scrollTop=messages.scrollHeight;
+    }
+  });
+  input.addEventListener('keydown',event=>{
+    if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();form.requestSubmit();}
+  });
+  $('child-clear').addEventListener('click',async()=>{
+    if(busy)return;
+    try {
+      await post('/api/enfant/clear',{session});
+      messages.replaceChildren();
+      bubble('Coucou ! 😺 On commence une nouvelle histoire ?','scratch');
+    } catch(err){bubble(err.message,'scratch');}
+    input.focus();
+  });
+})();