Spaces:

Shresthh03
/

Chatbot-2

Sleeping

App Files Files Community

Shresthh03 commited on Oct 22

Commit

cb00eb0

verified ·

1 Parent(s): 04c7f03

Update it.

Browse files

Files changed (1) hide show

index.html +104 -159

index.html CHANGED Viewed

@@ -3,24 +3,25 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<title>Serenity — Emotional Support</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
   body { transition: background 1.2s ease; background: linear-gradient(135deg,#f2f6ff,#fff0f6); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue"; }
   .card { max-width:960px; margin:28px auto; display:flex; gap:20px; align-items:flex-start; padding:20px; border-radius:18px; background: rgba(255,255,255,0.55); box-shadow: 0 10px 30px rgba(12,12,20,0.08); backdrop-filter: blur(8px); }
   .left { width:220px; display:flex; flex-direction:column; align-items:center; gap:12px; }
   .avatarOrb, .avatarHum { width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
-  .avatarOrb { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0.05)), radial-gradient(circle at 60% 60%, rgba(120,170,255,0.5), rgba(80,100,255,0.2)); box-shadow: 0 6px 30px rgba(80,110,255,0.18); animation: breathe 4.5s ease-in-out infinite; }
-  .avatarHum { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7), rgba(255,255,255,0.05)), linear-gradient(135deg,#fef3c7,#fbcfe8); box-shadow: 0 6px 30px rgba(200,120,200,0.12); animation: breathe 5s ease-in-out infinite; display:none; }
-  @keyframes breathe { 0%{transform:scale(1);opacity:0.9;}50%{transform:scale(1.08);opacity:1;}100%{transform:scale(1);opacity:0.92;} }
   .status { font-size:14px; color:#334155; text-align:center; }
   .controls { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
-  .controls button, .controls select { padding:8px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:600; }
   .main { flex:1; display:flex; flex-direction:column; gap:12px; }
-  .chatWindow { height:520px; background:rgba(255,255,255,0.85); border-radius:12px; padding:18px; overflow:auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
   .bubble { max-width:72%; padding:12px 14px; border-radius:14px; margin:8px 0; line-height:1.35; }
-  .bubble.user { margin-left:auto; background:linear-gradient(135deg,#e6f0ff,#d7e9ff); color:#07235a; border-bottom-right-radius:4px; }
-  .bubble.bot { margin-right:auto; background:linear-gradient(135deg,#fdf7ff,#fff1f7); color:#2b2b2b; border-bottom-left-radius:4px; }
   .typeIndicator { font-style:italic; color:#64748b; padding:6px 0; text-align:left; }
   .inputRow { display:flex; gap:8px; margin-top:10px; }
   .inputRow input { flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(10,10,10,0.06); outline:none; font-size:16px; }
@@ -43,10 +44,8 @@
     </div>
     <div class="controls">
-      <button id="switchStyle" class="bg-white/80">Switch Style</button>
-      <select id="voiceSelect" class="rounded-lg">
-        <!-- options populated by JS -->
-      </select>
     </div>
     <div class="small">Tip: Allow microphone access to speak</div>
@@ -72,15 +71,13 @@
 </div>
 <script>
-/* ---------- Utilities and session setup ---------- */
 const sessionKey = "serenity_session";
 let sessionId = localStorage.getItem(sessionKey);
 if(!sessionId){
-  // create simple random id
   sessionId = 's_' + Math.random().toString(36).slice(2,12);
   localStorage.setItem(sessionKey, sessionId);
 }
 const chatWindow = document.getElementById("chatWindow");
 const messageInput = document.getElementById("messageInput");
 const sendBtn = document.getElementById("sendBtn");
@@ -95,23 +92,21 @@ const micStop = document.getElementById("micStop");
 const newChatBtn = document.getElementById("newChat");
 const feedbackBtn = document.getElementById("feedback");
-let listening = false;
 let recognition = null;
 let voices = [];
-let chosenVoice = null;
-/* ---------- Voice profiles list (names represent target style; actual voice chosen from browser) ---------- */
-const VOICE_PROFILES = [
-  { id:'calm_male', label:'Calm Male', pitch:0.85, rate:0.95 },
-  { id:'deep_male', label:'Deep Male', pitch:0.6, rate:0.9 },
-  { id:'soothing_male', label:'Soothing Male', pitch:0.9, rate:0.85 },
-  { id:'gentle_female', label:'Gentle Loving Female', pitch:1.3, rate:0.95 },
-  { id:'feminine_female', label:'Feminine Female', pitch:1.45, rate:1.0 },
-  { id:'deep_female', label:'Deep & Soar Female', pitch:0.9, rate:0.9 },
-  { id:'soothing_female', label:'Soothing Female', pitch:1.2, rate:0.85 },
-  { id:'neutral', label:'Neutral Soothing', pitch:1.0, rate:1.0 }
 ];
 function appendBubble(who, text){
   const d = document.createElement("div");
   d.className = 'bubble ' + (who === "user" ? 'user' : 'bot');
@@ -121,132 +116,94 @@ function appendBubble(who, text){
 }
 function escapeHtml(str){ return (str||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
-/* ---------- color transitions (soft palette) ---------- */
-const SOFT_GRADIENTS = [
-  "linear-gradient(135deg,#EFF6FF,#FFF0F6)", // blue->pink
-  "linear-gradient(135deg,#F0FDF4,#ECFEFF)", // green -> aqua
-  "linear-gradient(135deg,#FEF3C7,#FCE7F3)", // warm
-  "linear-gradient(135deg,#F3E8FF,#FEF3F3)", // lavender
-  "linear-gradient(135deg,#FDF2F8,#EEF2FF)"  // pastel
-];
-let bgIndex = 0;
-function cycleBackground() {
-  bgIndex = (bgIndex + 1) % SOFT_GRADIENTS.length;
-  document.body.style.background = SOFT_GRADIENTS[bgIndex];
-}
-setInterval(cycleBackground, 18000); // every 18s
-/* ---------- Avatar breathing + thinking animation control ---------- */
-function setAvatarThinking(on){
-  if(on){
-    orb.style.transform = "scale(1.08)";
-    orb.style.boxShadow = "0 10px 40px rgba(80,110,255,0.28)";
-  } else {
-    orb.style.transform = "";
-    orb.style.boxShadow = "";
-  }
-}
-/* ---------- Populate voice select using available browser voices ---------- */
 function populateVoiceList(){
-  voices = speechSynthesis.getVoices() || [];
-  // create optgroups: prefer names that contain "male"/"female" etc but fallback to first N
   voiceSelect.innerHTML = "";
-  // add a "best match" option for each profile
-  VOICE_PROFILES.forEach(profile=>{
     const opt = document.createElement("option");
-    opt.value = profile.id;
-    opt.text = profile.label;
     voiceSelect.appendChild(opt);
   });
-  // choose default
-  voiceSelect.value = localStorage.getItem("serenity_voice") || "neutral";
 }
 populateVoiceList();
-if (typeof speechSynthesis !== "undefined") {
   speechSynthesis.onvoiceschanged = populateVoiceList;
 }
-voiceSelect.addEventListener("change", ()=>{
-  localStorage.setItem("serenity_voice", voiceSelect.value);
-});
-/* ---------- Typing indicator helpers ---------- */
-function showTyping(){
-  typingIndicator.style.display = "block";
-  setAvatarThinking(true);
-}
-function hideTyping(){
-  typingIndicator.style.display = "none";
-  setAvatarThinking(false);
 }
-/* ---------- Microphone: Web Speech API ---------- */
-if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window){
   const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
   recognition = new SR();
   recognition.lang = "en-US";
   recognition.interimResults = false;
-  recognition.continuous = false;
-  recognition.onresult = (e) => {
     const txt = e.results[e.results.length-1][0].transcript;
     messageInput.value = txt;
     sendMessage();
   };
-  recognition.onend = () => { listening = false; micStart.disabled=false; micStop.disabled=true; setAvatarThinking(false); }
-  recognition.onerror = (ev) => { listening = false; micStart.disabled=false; micStop.disabled=true; setAvatarThinking(false); console.warn("speech error",ev); }
-  micStart.onclick = () => { try { recognition.start(); listening=true; micStart.disabled=true; micStop.disabled=false; setAvatarThinking(true);} catch(e){ console.warn(e);} };
-  micStop.onclick = () => { if(recognition) recognition.stop(); listening=false; micStart.disabled=false; micStop.disabled=true; setAvatarThinking(false); speechSynthesis.cancel(); };
-} else {
-  micStart.disabled = true; micStop.disabled = true;
-}
-/* ---------- Avatar switch ---------- */
-switchStyle.onclick = () => {
-  if(orb.style.display === "none" || getComputedStyle(orb).display === "none"){
-    orb.style.display = ""; hum.style.display = "none";
-  } else {
-    orb.style.display = "none"; hum.style.display = "";
-  }
 }
-/* ---------- New chat / feedback ---------- */
-newChatBtn.onclick = () => {
   chatWindow.innerHTML = "";
-  // clear memory for session
-  fetch("/reset_session", {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({session:sessionId})}).catch(()=>{});
-  appendBubbleLocal("Serenity","New conversation started. How are you feeling today?");
-}
-feedbackBtn.onclick = ()=>{ window.alert("Thanks — we appreciate feedback. ❤️"); }
-/* append local bot message */
-function appendBubbleLocal(name,text){ appendBubble("bot", text); }
-/* ---------- Speak text with profile mapping ---------- */
-function speakText(text){
-  if(!text) return;
-  // build utterance
-  const utter = new SpeechSynthesisUtterance(text);
-  const profileId = voiceSelect.value || "neutral";
-  const profile = VOICE_PROFILES.find(p=>p.id===profileId) || VOICE_PROFILES[7];
-  utter.pitch = profile.pitch;
-  utter.rate = profile.rate;
-  // try to select an actual voice that matches gender/character
-  const available = speechSynthesis.getVoices();
-  let match = null;
-  const prefer = ["male","microsoft","david","mark","john","alex","daniel","robert","mike"];
-  const preferF = ["female","zira","sarah","linda","kate","mary","victoria","eva"];
-  if(profileId.includes("male")){
-    match = available.find(v => prefer.some(p=>v.name.toLowerCase().includes(p)));
-  } else if(profileId.includes("female")){
-    match = available.find(v => preferF.some(p=>v.name.toLowerCase().includes(p)));
-  }
-  if(!match) match = available.find(v=>v.lang && v.lang.toLowerCase().includes("en")) || available[0];
-  if(match) utter.voice = match;
-  speechSynthesis.cancel();
-  speechSynthesis.speak(utter);
 }
-/* ---------- Send message to backend ---------- */
 async function sendMessage(){
   const txt = messageInput.value.trim();
   if(!txt) return;
@@ -255,51 +212,39 @@ async function sendMessage(){
   showTyping();
   try{
-    const res = await fetch("/chat", {
-      method:"POST",
-      headers:{"Content-Type":"application/json"},
-      body: JSON.stringify({ session: sessionId, message: txt })
-    });
     const j = await res.json();
     hideTyping();
-    appendBubble("bot", j.reply || j.response || "Sorry — something went wrong.");
-    assistantMood.textContent = (j.emotion ? j.emotion.charAt(0).toUpperCase()+j.emotion.slice(1) : "Calm") + " • Supportive";
-    // gentle background change per emotion
-    const e = (j.emotion || "neutral").toLowerCase();
-    if(e==="sadness") document.body.style.background="linear-gradient(135deg,#dbeafe,#eef2ff)";
-    else if(e==="joy"||e==="love") document.body.style.background="linear-gradient(135deg,#fff7ed,#fff1f2)";
-    else if(e==="anger") document.body.style.background="linear-gradient(135deg,#fff1f0,#ffe7e8)";
-    else if(e==="crisis") document.body.style.background="linear-gradient(135deg,#f8fafc,#fef2f2)";
     else document.body.style.background = SOFT_GRADIENTS[bgIndex];
-    // avatar thinking pulse while speaking
-    setAvatarThinking(true);
     speakText(j.reply || j.response || "");
-    // stop thinking after speak ends
-    setTimeout(()=> setAvatarThinking(false), 900);
   }catch(err){
     hideTyping();
-    appendBubble("bot","Oops — I couldn't connect. Try again in a moment.");
     console.error(err);
   }
 }
 sendBtn.addEventListener("click", sendMessage);
-messageInput.addEventListener("keydown", (e)=>{ if(e.key==="Enter") sendMessage(); });
-/* ---------- On first load, request init greeting once ---------- */
 (async function init(){
-  // call backend with init flag so it responds only once
   try{
-    const res = await fetch("/chat", {
-      method:"POST",
-      headers:{"Content-Type":"application/json"},
-      body: JSON.stringify({ session: sessionId, init: true })
-    });
     const j = await res.json();
-    appendBubble("bot", j.reply || "Hey there! I'm Serenity — what's your name?");
-    assistantMood.textContent = (j.emotion ? j.emotion : "Calm") + " • Supportive";
   }catch(e){
-    appendBubble("bot","Hey there! I'm Serenity — what's your name?");
   }
 })();
 </script>

 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Serenity — Emotional Companion</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
   body { transition: background 1.2s ease; background: linear-gradient(135deg,#f2f6ff,#fff0f6); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue"; }
   .card { max-width:960px; margin:28px auto; display:flex; gap:20px; align-items:flex-start; padding:20px; border-radius:18px; background: rgba(255,255,255,0.55); box-shadow: 0 10px 30px rgba(12,12,20,0.08); backdrop-filter: blur(8px); }
   .left { width:220px; display:flex; flex-direction:column; align-items:center; gap:12px; }
   .avatarOrb, .avatarHum { width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
+  .avatarOrb { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0.05)), radial-gradient(circle at 60% 60%, rgba(120,170,255,0.5), rgba(80,100,255,0.2)); box-shadow: 0 6px 30px rgba(80,110,255,0.18); animation: breatheOrb 4.5s ease-in-out infinite; }
+  .avatarHum { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7), rgba(255,255,255,0.05)), linear-gradient(135deg,#fef3c7,#fbcfe8); box-shadow: 0 6px 30px rgba(200,120,200,0.12); animation: breatheHum 5s ease-in-out infinite; display:none; }
+  @keyframes breatheOrb { 0%{transform:scale(1);opacity:0.9;}50%{transform:scale(1.08);opacity:1;}100%{transform:scale(1);opacity:0.92;} }
+  @keyframes breatheHum { 0%{transform:scale(1);opacity:0.9;}50%{transform:scale(1.06);opacity:1;}100%{transform:scale(1);opacity:0.92;} }
   .status { font-size:14px; color:#334155; text-align:center; }
   .controls { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
+  .controls button, .controls select { padding:8px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:600; background:rgba(255,255,255,0.9); }
   .main { flex:1; display:flex; flex-direction:column; gap:12px; }
+  .chatWindow { height:520px; background:rgba(255,255,255,0.9); border-radius:12px; padding:18px; overflow:auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
   .bubble { max-width:72%; padding:12px 14px; border-radius:14px; margin:8px 0; line-height:1.35; }
+  .bubble.user { margin-left:auto; background:linear-gradient(135deg,#e6f0ff,#d7e9ff); color:#07235a; border-bottom-right-radius:4px; text-align:right; }
+  .bubble.bot { margin-right:auto; background:linear-gradient(135deg,#fdf7ff,#fff1f7); color:#2b2b2b; border-bottom-left-radius:4px; text-align:left; }
   .typeIndicator { font-style:italic; color:#64748b; padding:6px 0; text-align:left; }
   .inputRow { display:flex; gap:8px; margin-top:10px; }
   .inputRow input { flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(10,10,10,0.06); outline:none; font-size:16px; }
     </div>
     <div class="controls">
+      <button id="switchStyle" class="">Switch Style</button>
+      <select id="voiceSelect" class="rounded-lg" title="Choose voice/personality"></select>
     </div>
     <div class="small">Tip: Allow microphone access to speak</div>
 </div>
 <script>
+/* ---------- Session + DOM refs ---------- */
 const sessionKey = "serenity_session";
 let sessionId = localStorage.getItem(sessionKey);
 if(!sessionId){
   sessionId = 's_' + Math.random().toString(36).slice(2,12);
   localStorage.setItem(sessionKey, sessionId);
 }
 const chatWindow = document.getElementById("chatWindow");
 const messageInput = document.getElementById("messageInput");
 const sendBtn = document.getElementById("sendBtn");
 const newChatBtn = document.getElementById("newChat");
 const feedbackBtn = document.getElementById("feedback");
 let recognition = null;
+let listening = false;
 let voices = [];
+const VOICES = [
+  {id:'calm_male', label:'Calm Male', pitch:0.85, rate:0.95},
+  {id:'deep_male', label:'Deep Male', pitch:0.6, rate:0.9},
+  {id:'soothing_male', label:'Soothing Male', pitch:0.9, rate:0.85},
+  {id:'gentle_female', label:'Gentle Loving Female', pitch:1.3, rate:0.95},
+  {id:'feminine_female', label:'Feminine Female', pitch:1.45, rate:1.0},
+  {id:'deep_female', label:'Deep & Soar Female', pitch:0.9, rate:0.9},
+  {id:'soothing_female', label:'Soothing Female', pitch:1.2, rate:0.85},
+  {id:'neutral', label:'Neutral Soothing', pitch:1.0, rate:1.0}
 ];
+/* ---------- small UI helpers ---------- */
 function appendBubble(who, text){
   const d = document.createElement("div");
   d.className = 'bubble ' + (who === "user" ? 'user' : 'bot');
 }
 function escapeHtml(str){ return (str||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+/* ---------- voice list population ---------- */
 function populateVoiceList(){
+  const avail = speechSynthesis.getVoices() || [];
   voiceSelect.innerHTML = "";
+  VOICES.forEach(v=>{
     const opt = document.createElement("option");
+    opt.value = v.id;
+    opt.text = v.label;
     voiceSelect.appendChild(opt);
   });
+  const saved = localStorage.getItem("serenity_voice") || "neutral";
+  voiceSelect.value = saved;
 }
 populateVoiceList();
+if(typeof speechSynthesis !== "undefined"){
   speechSynthesis.onvoiceschanged = populateVoiceList;
 }
+voiceSelect.addEventListener("change", ()=> localStorage.setItem("serenity_voice", voiceSelect.value));
+/* ---------- typing / avatar ---------- */
+function showTyping(){ typingIndicator.style.display = "block"; orb.style.transform = "scale(1.08)"; }
+function hideTyping(){ typingIndicator.style.display = "none"; orb.style.transform = ""; }
+function speakText(text){
+  if(!window.speechSynthesis) return;
+  const utter = new SpeechSynthesisUtterance(text);
+  const profileId = voiceSelect.value || "neutral";
+  const profile = VOICES.find(v => v.id === profileId) || VOICES[7];
+  utter.pitch = profile.pitch;
+  utter.rate = profile.rate;
+  // choose a matching voice if possible
+  const avail = speechSynthesis.getVoices() || [];
+  let match = null;
+  if(profileId.includes("male")) {
+    match = avail.find(v=>/male|man|david|john|alex|daniel|microsoft/i.test(v.name));
+  } else if(profileId.includes("female")) {
+    match = avail.find(v=>/female|zira|susan|sarah|microsoft|victoria/i.test(v.name));
+  }
+  if(!match) match = avail.find(v=>/en-|en_/.test(v.lang)) || avail[0];
+  if(match) utter.voice = match;
+  speechSynthesis.cancel();
+  speechSynthesis.speak(utter);
 }
+/* ---------- background gentle cycling ---------- */
+const SOFT_GRADIENTS = [
+  "linear-gradient(135deg,#EFF6FF,#FFF0F6)",
+  "linear-gradient(135deg,#F0FDF4,#ECFEFF)",
+  "linear-gradient(135deg,#FEF3C7,#FCE7F3)",
+  "linear-gradient(135deg,#F3E8FF,#FEF3F3)",
+  "linear-gradient(135deg,#FDF2F8,#EEF2FF)"
+];
+let bgIndex = 0;
+setInterval(()=>{ bgIndex=(bgIndex+1)%SOFT_GRADIENTS.length; document.body.style.background = SOFT_GRADIENTS[bgIndex]; }, 18000);
+/* ---------- mic controls ---------- */
+if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window){
   const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
   recognition = new SR();
   recognition.lang = "en-US";
   recognition.interimResults = false;
+  recognition.onresult = (e)=> {
     const txt = e.results[e.results.length-1][0].transcript;
     messageInput.value = txt;
     sendMessage();
   };
+  recognition.onend = ()=> { listening=false; micStart.disabled=false; micStop.disabled=true; orb.style.transform=""; }
+  recognition.onerror = ()=> { listening=false; micStart.disabled=false; micStop.disabled=true; orb.style.transform=""; }
+  micStart.onclick = ()=> { try{ recognition.start(); listening=true; micStart.disabled=true; micStop.disabled=false; orb.style.transform="scale(1.08)"; }catch(e){} };
+  micStop.onclick = ()=> { if(recognition) recognition.stop(); listening=false; micStart.disabled=false; micStop.disabled=true; speechSynthesis.cancel(); orb.style.transform=""; };
+} else { micStart.disabled=true; micStop.disabled=true; }
+/* ---------- avatar switch ---------- */
+switchStyle.onclick = ()=> {
+  if(orb.style.display === "none" || getComputedStyle(orb).display === "none") { orb.style.display=""; hum.style.display="none"; }
+  else { orb.style.display="none"; hum.style.display=""; }
 }
+/* ---------- reset session ---------- */
+newChatBtn.onclick = async ()=> {
   chatWindow.innerHTML = "";
+  try{
+    await fetch("/reset_session", {method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify({session:sessionId})});
+  }catch(e){}
+  appendBubble("bot","New conversation started. How are you feeling today?");
 }
+/* ---------- send message ---------- */
 async function sendMessage(){
   const txt = messageInput.value.trim();
   if(!txt) return;
   showTyping();
   try{
+    const body = { session: sessionId, message: txt, personality: voiceSelect.value || "neutral" };
+    const res = await fetch("/chat", {method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify(body)});
     const j = await res.json();
     hideTyping();
+    appendBubble("bot", j.reply || j.response || "Sorry — I couldn't form a reply.");
+    assistantMood.textContent = ((j.emotion||"Calm").charAt(0).toUpperCase() + (j.emotion||"Calm").slice(1)) + " • Supportive";
+    // gentle background changes by emotion
+    const emotion = (j.emotion||"neutral").toLowerCase();
+    if(emotion==="sadness") document.body.style.background="linear-gradient(135deg,#dbeafe,#eef2ff)";
+    else if(emotion==="joy"||emotion==="love") document.body.style.background="linear-gradient(135deg,#fff7ed,#fff1f2)";
+    else if(emotion==="anger") document.body.style.background="linear-gradient(135deg,#fff1f0,#ffe7e8)";
+    else if(emotion==="crisis") document.body.style.background="linear-gradient(135deg,#f8fafc,#fef2f2)";
     else document.body.style.background = SOFT_GRADIENTS[bgIndex];
+    // speak
     speakText(j.reply || j.response || "");
   }catch(err){
     hideTyping();
+    appendBubble("bot","Oops — couldn't connect. Try again in a moment.");
     console.error(err);
   }
 }
 sendBtn.addEventListener("click", sendMessage);
+messageInput.addEventListener("keydown", (e)=> { if(e.key==="Enter") sendMessage(); });
+/* ---------- init greeting (ask name if needed) ---------- */
 (async function init(){
   try{
+    const res = await fetch("/chat", {method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify({session:sessionId, init:true})});
     const j = await res.json();
+    appendBubble("bot", j.reply || "Hey there — I'm Serenity. What's your name?");
+    assistantMood.textContent = (j.emotion || "Calm") + " • Supportive";
   }catch(e){
+    appendBubble("bot","Hey there — I'm Serenity. What's your name?");
   }
 })();
 </script>