UI: animated Clod mark while waiting for the reply

app.py

@@ -18,6 +18,7 @@ GPU_SECONDS = int(os.environ.get("GPU_SECONDS", "60"))
 MAX_NEW = int(os.environ.get("MAX_NEW", "900"))
 MAX_HISTORY_TURNS = 8
 THINK_TITLE = "Thought for 0.2 seconds"
+PENDING = '<span class="cl-pending" aria-label="Clod is thinking"></span>'  # animated mark, styled in CSS
 
 FAKE = os.environ.get("CLOD_FAKE") == "1"  # UI testing without a model: canned replies
 # A fixed banner, independent of the model, for messages that look like an emergency or a crisis.
@@ -72,7 +73,7 @@ def to_messages(history):
         meta = turn.get("metadata") or {}
         if meta.get("title"): continue
         role, content = turn.get("role"), text_of(turn.get("content")).strip()
-        if role in ("user", "assistant") and content:
+        if role in ("user", "assistant") and content and content != PENDING:
             msgs.append({"role": role, "content": content})
     return msgs[-2 * MAX_HISTORY_TURNS - 1:]
 
@@ -127,27 +128,24 @@ def on_user(message, history):
 
 
 def on_bot(history, think, temperature):
-    history = list(history or [])
+    history = [m for m in (history or []) if not (isinstance(m, dict) and text_of(m.get("content")) == PENDING)]
     if not history or history[-1].get("role") != "user":
         yield history; return
     msgs = to_messages(history)
     base = history
+    pending = {"role": "assistant", "content": PENDING}
     if EMERGENCY.search(msgs[-1]["content"]):
         base = base + [{"role": "assistant", "content": "", "metadata": {"title": SAFETY_NOTE}}]
-        yield base
+        yield base + [pending]
     elif SAFETY_TOPIC.search(msgs[-1]["content"]):
         base = base + [{"role": "assistant", "content": "", "metadata": {"title": CAUTION_NOTE}}]
-        yield base
-    thought_msg = {"role": "assistant", "content": "", "metadata": {"title": THINK_TITLE}} if think else None
-    reply_msg = {"role": "assistant", "content": "…"}
+        yield base + [pending]
     for raw in stream_reply(msgs, think, temperature):
         th, rep = split_thought(raw, think)
+        reply_msg = {"role": "assistant", "content": rep} if rep else pending
         if think:
-            thought_msg = {"role": "assistant", "content": th or "hmm", "metadata": {"title": THINK_TITLE}}
-            reply_msg = {"role": "assistant", "content": rep or "…"}
-            yield base + [thought_msg, reply_msg]
+            yield base + [{"role": "assistant", "content": th or "hmm", "metadata": {"title": THINK_TITLE}}, reply_msg]
         else:
-            reply_msg = {"role": "assistant", "content": rep or "…"}
             yield base + [reply_msg]
 
 
@@ -214,7 +212,10 @@ def chip_prompt(label):
 
 
 def on_user_ui(message, history):
+    before = len(history or [])
     history, cleared = on_user(message, history)
+    if len(history) > before:  # a message was sent: the animated mark holds its place until the first token
+        history = history + [{"role": "assistant", "content": PENDING}]
     started = bool(history)
     return gr.update(value=history, visible=started), cleared, gr.update(visible=not started), gr.update(visible=not started)
 
@@ -559,6 +560,23 @@ gradio-app, .gradio-container, .gradio-container > .main, .gradio-container > .m
 @media (max-width: 900px) { .cl-about-link { display: inline-block; } }
 """
 
+import urllib.parse as _up
+_MARK_URI = "data:image/svg+xml," + _up.quote(clod_mark(64, "x").replace('class="x" ', 'xmlns="http://www.w3.org/2000/svg" '))
+CSS += """
+/* --- pending indicator: the Clod mark wobbles (Claude's spark pulses); a crumb keeps falling off --- */
+#cl-chat .cl-pending { display: inline-block; position: relative; width: 30px; height: 30px; margin: 4px 0 2px;
+  background: url("%s") center / contain no-repeat; animation: clwobble 1.15s ease-in-out infinite; transform-origin: 50%% 50%%; vertical-align: middle; }
+#cl-chat .cl-pending::after { content: ""; position: absolute; left: 62%%; top: 64%%; width: 4px; height: 4px; border-radius: 50%%; background: #7a5236;
+  animation: clcrumb 1.15s ease-in infinite; }
+@keyframes clwobble { 0%% { transform: rotate(0) scale(1); } 22%% { transform: rotate(-16deg) scale(1.08); } 48%% { transform: rotate(11deg) scale(.93); }
+  72%% { transform: rotate(-5deg) scale(1.04); } 100%% { transform: rotate(0) scale(1); } }
+@keyframes clcrumb { 0%%, 15%% { transform: translate(0, 0); opacity: 0; } 25%% { opacity: 1; } 100%% { transform: translate(5px, 18px); opacity: 0; } }
+#cl-chat .bot-row:has(.cl-pending) .message-buttons, #cl-chat .message-row:has(.cl-pending) ~ .message-buttons { display: none !important; }
+#cl-chat .bot-row:has(.cl-pending), #cl-chat .bot-row:has(.cl-pending) * { opacity: 1 !important; }
+#cl-chat .cl-pending { width: 34px !important; height: 34px !important; }
+@media (prefers-reduced-motion: reduce) { #cl-chat .cl-pending, #cl-chat .cl-pending::after { animation: none; } }
+""" % _MARK_URI
+
 THEME = gr.themes.Base(primary_hue="orange", neutral_hue="stone", font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui"]).set(
     body_background_fill="#f5f4ee", body_background_fill_dark="#f5f4ee", background_fill_primary="#f5f4ee", background_fill_primary_dark="#f5f4ee",
     background_fill_secondary="#efede4", background_fill_secondary_dark="#efede4", block_background_fill="#f5f4ee", block_background_fill_dark="#f5f4ee",