Implement custom timer

README.md

@@ -4,7 +4,7 @@ emoji: 🐨
 colorFrom: yellow
 colorTo: pink
 sdk: gradio
-sdk_version: 5.38.2
+sdk_version: 6.15.2
 app_file: app.py
 pinned: false
 license: mit

app.py

@@ -2,20 +2,22 @@ import gradio as gr
 import time
 
 # Inspired by: https://www.gradio.app/guides/agents-and-tool-usage
+# Custom timer solution described by Claude Sonnet 4.6:
+#   https://claude.ai/share/d7adc776-05f2-4c2b-a93a-9cf6089dd7be 
 
 
 def interact_with_agent(prompt, messages=[]):
     """Simulate generation of two assistant messages after delays"""
-    time.sleep(2)
+    time.sleep(4)
     messages.append(
         gr.ChatMessage(
-            role="assistant", content="Progress timer stops here (or becomes invisible)"
+            role="assistant", content="First message — gr.Chatbot() timer stops here"
         )
     )
     yield messages
-    time.sleep(2)
+    time.sleep(4)
     messages.append(
-        gr.ChatMessage(role="assistant", content="But I want it to stop here")
+        gr.ChatMessage(role="assistant", content="Second message — Custom timer stops here")
     )
     yield messages
 
@@ -23,16 +25,62 @@ def interact_with_agent(prompt, messages=[]):
 def str_to_message(content, role="user"):
     return [gr.ChatMessage(role=role, content=content)]
 
+timer_html = """
+<div id="agent-timer" style="font-family: monospace;"></div>
+"""
+
+timer_js = """
+let startTime = null;
+let interval = null;
+const el = element.querySelector('#agent-timer');
+
+el.addEventListener('agent-timer:start', () => {
+    startTime = Date.now();
+    el.textContent = '⏱ 0.0s';
+    interval = setInterval(() => {
+        const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+        el.textContent = '⏱ ' + elapsed + 's';
+    }, 100);
+});
+
+el.addEventListener('agent-timer:stop', () => {
+    if (interval) {
+        clearInterval(interval);
+        interval = null;
+        const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+        el.textContent = '✓ ' + elapsed + 's';
+    }
+});
+"""
 
 with gr.Blocks() as demo:
-    chatbot = gr.Chatbot(
-        type="messages",
-    )
-    input = gr.Textbox(
-        "Start the simulation with two assistant messages after 2-second delays",
-        autofocus=True,
-    )
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## Stop Gradio chatbot timer at the last (not first) yielded agent message")
+            input = gr.Textbox(
+                "Start the simulation with two assistant messages after 4-second delays",
+                label="User message",
+                autofocus=True,
+                submit_btn=True,
+            )
+            gr.Markdown("### Custom timer")
+            timer_display = gr.HTML(value=timer_html, js_on_load=timer_js, container=True)
+            gr.Markdown(
+                """
+                ### App history
+                - 2025-07-25: Wrote to support [Gradio issue #11637](https://github.com/gradio-app/gradio/issues/11637) (Gradio 5.38.2)
+                - 2026-05-30: Implemented custom timer using [gr.HTML](https://huggingface.co/blog/gradio-html-one-shot-apps) (Gradio 6.15.2)
+                """
+            )
+        with gr.Column():
+            chatbot = gr.Chatbot()
+
     input.submit(
+        # Start custom timer
+        lambda: None, None, None,
+        js="() => document.getElementById('agent-timer')"
+           "?.dispatchEvent(new CustomEvent('agent-timer:start'))",
+    ).then(
         # Update chatbot UI with user message immediately
         str_to_message,
         input,
@@ -42,9 +90,11 @@ with gr.Blocks() as demo:
         interact_with_agent,
         [input, chatbot],
         chatbot,
-    )
-    gr.Markdown(
-        "Reported as [Gradio issue #11637](https://github.com/gradio-app/gradio/issues/11637)"
+    ).then(
+        # Stop custom timer
+        lambda: None, None, None,
+        js="() => document.getElementById('agent-timer')"
+           "?.dispatchEvent(new CustomEvent('agent-timer:stop'))",
     )
 
 demo.launch()