Fix chat styling, add clickable emotions, and dev ergonomics

UI:
- Apply custom CSS/theme via mount_gradio_app (Gradio 6 reads them there,
not on gr.Blocks), so the grey message panels actually disappear
- Hide the chatbot's top-right Clear/trash button
- Turn the emotion legend into clickable chip-buttons: tapping an emotion
makes it chime in directly on the conversation so far
- Move "Start fresh" above the conversation box

Agents:
- Feed readable, name-tagged transcripts to the model instead of raw HTML
- Widen history context window from 8 to 100 turns
- Fall back to canned lines (not the string "None") on empty model replies

Dev:
- Load .env via python-dotenv if present
- DEV=1 enables uvicorn hot reload

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

agents.py

@@ -12,6 +12,7 @@ back to a lightweight keyword-based simulation so the UI is always usable.
 
 from __future__ import annotations
 
+import html
 import json
 import re
 from concurrent.futures import ThreadPoolExecutor
@@ -22,6 +23,8 @@ CHIME_MAX_TOKENS = 120
 REFLECT_MAX_TOKENS = 160
 TEMPERATURE = 0.7
 TOP_P = 0.95
+# How many of the most recent turns to feed back to the agents as context.
+HISTORY_TURNS = 100
 
 
 def _get(obj, key: str, default=None):
@@ -51,6 +54,8 @@ def _chat_text(
     message = _get(choice, "message")
     if message is not None:
         content = _get(message, "content", "")
+        if content is None:
+            content = ""
         if isinstance(content, list):
             return "".join(str(_get(part, "text", part)) for part in content).strip()
         return str(content).strip()
@@ -58,13 +63,40 @@ def _chat_text(
     return str(_get(choice, "text", "")).strip()
 
 
+_TAG_RE = re.compile(r"<[^>]+>")
+
+
+def _readable(turn: dict) -> str:
+    """Turn one stored chat entry into a clean 'Speaker: text' line.
+
+    User messages are already plain text. Assistant entries are the HTML
+    bubbles produced in app.py, so we strip the markup and recover the
+    emotion's name (the bubble's first inner line) as the speaker label.
+    """
+    role = turn.get("role")
+    content = str(turn.get("content", ""))
+
+    if role == "user":
+        text = content.strip()
+        return f"You: {text}" if text else ""
+
+    # Assistant bubble: split on tags, then unescape, to get [label, body...].
+    parts = _TAG_RE.sub("\n", content.replace("<br>", " ").replace("<br/>", " "))
+    chunks = [html.unescape(p).strip() for p in parts.splitlines()]
+    chunks = [c for c in chunks if c]
+    if not chunks:
+        return ""
+    if len(chunks) == 1:
+        return f"Emotions: {chunks[0]}"
+    label = chunks[0]  # e.g. "😨 Fear" or "A gentle reflection"
+    body = " ".join(chunks[1:])
+    return f"{label}: {body}"
+
+
 def _history_text(history: list[dict]) -> str:
-    """Flatten recent conversation into a short transcript for context."""
-    lines = []
-    for turn in history[-8:]:
-        who = "You" if turn["role"] == "user" else turn.get("name", "Emotion")
-        lines.append(f"{who}: {turn['content']}")
-    return "\n".join(lines)
+    """Flatten recent conversation into a clean, readable transcript."""
+    lines = [_readable(turn) for turn in history[-HISTORY_TURNS:]]
+    return "\n".join(line for line in lines if line)
 
 
 # --------------------------------------------------------------------------- #
@@ -148,7 +180,7 @@ def emotion_reply(key: str, message: str, history: list[dict], client) -> str:
         f"React as {emo.name}."
     )
     try:
-        return _chat_text(
+        text = _chat_text(
             client,
             [
                 {"role": "system", "content": system},
@@ -156,6 +188,7 @@ def emotion_reply(key: str, message: str, history: list[dict], client) -> str:
             ],
             max_tokens=CHIME_MAX_TOKENS,
         )
+        return text or _fallback_line(key, message)
     except Exception:
         return _fallback_line(key, message)
 

app.py

@@ -11,6 +11,7 @@ from __future__ import annotations
 
 import html
 import os
+from functools import partial
 
 from authlib.integrations.starlette_client import OAuth
 from fastapi import FastAPI, Request
@@ -20,15 +21,25 @@ from huggingface_hub import InferenceClient
 from starlette.middleware.sessions import SessionMiddleware
 import uvicorn
 
-from agents import run_turn
+from agents import emotion_reply, run_turn
 from emotions import EMOTIONS, EMOTION_ORDER
 
+# Load variables from a local .env file if python-dotenv is available, so that
+# HF_TOKEN, Google OAuth creds, etc. don't have to be exported by hand. Real
+# shell environment variables still take precedence.
+try:
+    from dotenv import load_dotenv
+
+    load_dotenv()
+except ImportError:
+    pass
+
 GOOGLE_CLIENT_ID = os.environ.get("GOOGLE_CLIENT_ID")
 GOOGLE_CLIENT_SECRET = os.environ.get("GOOGLE_CLIENT_SECRET")
 GOOGLE_ALLOWED_DOMAIN = os.environ.get("GOOGLE_ALLOWED_DOMAIN", "").lstrip("@")
 GOOGLE_AUTH_ENABLED = bool(GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET)
 SESSION_SECRET = os.environ.get("SESSION_SECRET", "inside-out-dev-session-secret")
-HF_MODEL = "openai/gpt-oss-20b"
+HF_MODEL = "Qwen/Qwen3.6-27B:ovhcloud" # "google/gemma-4-26B-A4B-it:deepinfra" # "openai/gpt-oss-20b"
 SHOW_LOGIN = os.environ.get("SHOW_LOGIN", "").lower() in {"1", "true", "yes"}
 
 oauth = OAuth()
@@ -61,46 +72,112 @@ CSS = """
     -webkit-background-clip: text; background-clip: text; color: transparent;
 }
 #subtitle { text-align:center; color:#6b6480; font-size:1.02rem; margin-bottom:10px; }
-#legend { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0 14px; }
-.emo-chip {
-    display:inline-flex; align-items:center; gap:6px;
-    padding:6px 13px; border-radius:999px; font-size:0.86rem; font-weight:600;
-    color:#3a3550; background:#ffffffcc; border:1.5px solid var(--c);
-    box-shadow:0 2px 8px rgba(120,100,180,0.10);
+#legend-hint { text-align:center; color:#9a93ad; font-size:0.82rem; margin:2px 0 6px; }
+/* Emotion chips are now clickable buttons. */
+#legend {
+    display:flex !important; flex-wrap:wrap; gap:8px;
+    justify-content:center; margin:4px 0 14px;
+    background:transparent !important; border:0 !important;
+}
+#legend .emo-btn {
+    flex:0 0 auto !important; width:auto !important; min-width:0 !important;
+    padding:6px 14px !important; border-radius:999px !important;
+    font-size:0.86rem !important; font-weight:600 !important;
+    color:#3a3550 !important; background:#ffffffcc !important;
+    border:1.5px solid #d7cdef !important;
+    box-shadow:0 2px 8px rgba(120,100,180,0.10) !important;
     backdrop-filter: blur(4px);
+    transition: transform .12s ease, box-shadow .12s ease;
 }
-.emo-chip .dot { width:10px; height:10px; border-radius:50%; background:var(--c);
-    box-shadow:0 0 10px var(--c); }
-.gr-chatbot, #chat { border:none !important; background:transparent !important; }
-#chat .message-row { padding: 2px 0 !important; }
-#chat .message,
-#chat .message-content,
+#legend .emo-btn:hover {
+    transform: translateY(-1px);
+    box-shadow:0 5px 14px rgba(120,100,180,0.22) !important;
+}
+/* --- Chat surface: no grey boxes, let the bubbles breathe --- */
+.gr-chatbot, #chat {
+    border:none !important;
+    background:transparent !important;
+    box-shadow:none !important;
+}
+/* Neutralise the grey bubble fill at the source: whichever wrapper class
+   this gradio version uses, none of them can paint the grey anymore. */
+#chat, #chat * { --background-fill-secondary: transparent !important; }
+
+#chat .bubble-wrap,
+#chat .bot-row,
+#chat .user-row,
+#chat .message-wrap,
+#chat .panel,
+#chat .bubble { background: transparent !important; }
+#chat .message-row { padding: 4px 0 !important; }
+
+/* Bot / assistant messages: the colored inner cards stand on their own */
 #chat .bot,
-#chat .user {
+#chat .message.bot,
+#chat .bubble,
+#chat .bot .message-content,
+#chat .message,
+#chat .message-content {
     background: transparent !important;
     border: 0 !important;
     box-shadow: none !important;
-}
-#chat .message-content {
     padding: 0 !important;
 }
-#chat button[aria-label*="copy" i] {
-    display: none !important;
+
+/* User messages: a soft glowing purple bubble */
+#chat .user,
+#chat .message.user {
+    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%) !important;
+    color: #fff !important;
+    border: 0 !important;
+    border-radius: 16px 16px 4px 16px !important;
+    box-shadow: 0 6px 18px rgba(139,92,246,0.30) !important;
+    padding: 9px 14px !important;
+    max-width: 78%;
+}
+#chat .user *,
+#chat .message.user * { color: #fff !important; background: transparent !important; }
+
+#chat button[aria-label*="copy" i],
+#chat button[aria-label*="clear" i] { display: none !important; }
+
+/* --- Composer: a floating rounded pill --- */
+#composer {
+    gap: 8px !important;
+    background: #ffffffcc;
+    border: 1.5px solid #e7dcff;
+    border-radius: 999px;
+    padding: 6px 8px 6px 18px;
+    box-shadow: 0 8px 24px rgba(140,110,210,0.12);
+    backdrop-filter: blur(6px);
+    align-items: center;
+}
+#composer textarea, #composer input[type="text"] {
+    background: transparent !important;
+    border: 0 !important;
+    box-shadow: none !important;
+    font-size: 1rem !important;
+    resize: none !important;
+}
+#composer button {
+    border-radius: 999px !important;
+    border: 0 !important;
+    background: linear-gradient(135deg, #f59e42, #f0533b) !important;
+    color: #fff !important;
+    font-weight: 700 !important;
+    box-shadow: 0 4px 12px rgba(240,83,59,0.30) !important;
 }
 footer { display:none !important; }
 #reflect-note { color:#8a83a0; font-size:0.85rem; text-align:center; margin-top:6px; }
 """
 
-
-def legend_html() -> str:
-    chips = []
-    for k in EMOTION_ORDER:
-        e = EMOTIONS[k]
-        chips.append(
-            f'<div class="emo-chip" style="--c:{e.color}">'
-            f'<span class="dot"></span>{e.emoji} {e.name}</div>'
-        )
-    return '<div id="legend">' + "".join(chips) + "</div>"
+# Tint each emotion chip-button with its own color.
+CSS += "".join(
+    f"#emo-btn-{k} {{ border-color:{EMOTIONS[k].color} !important; "
+    f"color:{EMOTIONS[k].color} !important; }}\n"
+    f"#emo-btn-{k}:hover {{ background:{EMOTIONS[k].color}14 !important; }}\n"
+    for k in EMOTION_ORDER
+)
 
 
 def _safe_html(text: str) -> str:
@@ -134,6 +211,20 @@ def reflect_bubble(text: str, allow_html: bool = False) -> dict:
     return {"role": "assistant", "content": content}
 
 
+def _make_client():
+    """Build the HF inference client, or None when no token is configured."""
+    token = os.environ.get("HF_TOKEN")
+    return InferenceClient(token=token, model=HF_MODEL) if token else None
+
+
+def _last_user_message(chat_history: list[dict]) -> str:
+    """Most recent thing the person actually typed, for context."""
+    for turn in reversed(chat_history):
+        if turn.get("role") == "user":
+            return str(turn.get("content", "")).strip()
+    return ""
+
+
 def respond(
     message: str,
     chat_history: list[dict] | None,
@@ -143,10 +234,7 @@ def respond(
     if not message:
         return "", chat_history
 
-    client = None
-    token = os.environ.get("HF_TOKEN")
-    if token:
-        client = InferenceClient(token=token, model=HF_MODEL)
+    client = _make_client()
 
     chat_history = chat_history + [{"role": "user", "content": message}]
 
@@ -157,6 +245,25 @@ def respond(
     return "", chat_history
 
 
+def chime(emo_key: str, chat_history: list[dict] | None):
+    """The user tapped an emotion chip - let that emotion speak up directly.
+
+    It reacts to the conversation so far (the most recent thing the person
+    said, plus recent history). No orchestrator, no reflection - just this one
+    emotion chiming in.
+    """
+    chat_history = list(chat_history or [])
+    client = _make_client()
+
+    context = _last_user_message(chat_history)
+    if not context:
+        context = "They haven't said anything yet - gently invite them to share."
+
+    text = emotion_reply(emo_key, context, chat_history, client)
+    chat_history.append(bubble(emo_key, text))
+    return chat_history
+
+
 def greeting() -> list[dict]:
     text = (
         "Hi there. This is a safe little space inside your head.<br>"
@@ -192,7 +299,24 @@ def create_demo(show_login: bool = False) -> gr.Blocks:
             '<div id="subtitle">Share what\'s on your mind, and let your emotions '
             'chime in to help you discover how you really feel.</div>'
         )
-        gr.HTML(legend_html())
+        gr.HTML(
+            '<div id="legend-hint">Tap an emotion to let it speak up</div>'
+        )
+        emo_buttons: dict[str, gr.Button] = {}
+        with gr.Row(elem_id="legend"):
+            for k in EMOTION_ORDER:
+                e = EMOTIONS[k]
+                emo_buttons[k] = gr.Button(
+                    f"{e.emoji} {e.name}",
+                    elem_id=f"emo-btn-{k}",
+                    elem_classes="emo-btn",
+                    size="sm",
+                    variant="secondary",
+                )
+
+        clear = gr.Button(
+            "Start fresh", size="sm", variant="secondary", elem_id="start-fresh"
+        )
 
         chatbot = gr.Chatbot(
             value=greeting(),
@@ -204,7 +328,7 @@ def create_demo(show_login: bool = False) -> gr.Blocks:
             group_consecutive_messages=False,
         )
 
-        with gr.Row():
+        with gr.Row(elem_id="composer"):
             msg = gr.Textbox(
                 placeholder="What's on your mind today?",
                 show_label=False,
@@ -214,17 +338,14 @@ def create_demo(show_login: bool = False) -> gr.Blocks:
             )
             send = gr.Button("Share", variant="primary", scale=1)
 
-        with gr.Accordion("Settings", open=False):
-            clear = gr.Button("Start fresh")
-
         gr.HTML('<div id="reflect-note">Made with love.</div>')
 
         send.click(respond, [msg, chatbot], [msg, chatbot])
         msg.submit(respond, [msg, chatbot], [msg, chatbot])
         clear.click(lambda: greeting(), None, chatbot)
+        for k, btn in emo_buttons.items():
+            btn.click(partial(chime, k), chatbot, chatbot)
 
-    blocks.theme = THEME
-    blocks.css = CSS
     return blocks
 
 
@@ -307,10 +428,20 @@ app = gr.mount_gradio_app(
     server,
     demo,
     path="/",
+    theme=THEME,
+    css=CSS,
     auth_dependency=_google_user if GOOGLE_AUTH_ENABLED else None,
     ssr_mode=False,
 )
 
 
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=int(os.environ.get("PORT", "7860")))
+    # Set DEV=1 to hot-reload on file changes (uvicorn watches the source and
+    # re-imports the module, so CSS, callbacks, and the FastAPI mount all refresh).
+    dev = os.environ.get("DEV", "").lower() in {"1", "true", "yes"}
+    uvicorn.run(
+        "app:app" if dev else app,
+        host="0.0.0.0",
+        port=int(os.environ.get("PORT", "7860")),
+        reload=dev,
+    )

requirements.txt

@@ -3,4 +3,5 @@ fastapi>=0.115
 gradio>=6.0
 huggingface_hub>=0.22.2
 itsdangerous>=2.1
+python-dotenv>=1.0
 uvicorn>=0.30