Overlay custom timer on chatbot

app.py

@@ -53,38 +53,54 @@ el.addEventListener('agent-timer:stop', () => {
 });
 """
 
+chatbot_overlay_css = """
+#timer-display {
+    position: absolute;
+    bottom: 0px;
+}
+"""
+
 with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column():
-            gr.Markdown("## Stop Gradio chatbot timer at the last (not first) yielded agent message")
+            gr.Markdown(
+                """
+                ## Gradio chatbot timer that stops at the last (not first) yielded agent message
+
+                **Submit any user message to launch a chatbot simulation that responds with two assistant messages with a 4-second delay before each one.**
+                
+                - The built-in `gr.Chatbot` timer (*lower right*) stops after the first message.
+                - The custom timer (*lower left*) keeps going until the last message is yielded.
+                - The custom timer is implemented in JavaScript and CSS and depends on `gr.HTML` capabilities in Gradio 6.
+                """
+            )
             input = gr.Textbox(
-                "Start the simulation with two assistant messages after 4-second delays",
+                "Start the timers!",
                 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)
+                - 2025-07-25: Create demo to support [Gradio issue #11637](https://github.com/gradio-app/gradio/issues/11637) (Gradio 5.38.2)
+                - 2026-05-30: Add custom timer using [gr.HTML](https://huggingface.co/blog/gradio-html-one-shot-apps) (Gradio 6.15.2)
                 """
             )
         with gr.Column():
             chatbot = gr.Chatbot()
+            gr.HTML(value=timer_html, js_on_load=timer_js, elem_id="timer-display")
 
     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,
         chatbot,
+    ).then(
+        # Start custom timer
+        lambda: None, None, None,
+        js="() => document.getElementById('agent-timer')"
+           "?.dispatchEvent(new CustomEvent('agent-timer:start'))",
     ).then(
         # Update chatbot UI with assistant messages
         interact_with_agent,
@@ -97,4 +113,4 @@ with gr.Blocks() as demo:
            "?.dispatchEvent(new CustomEvent('agent-timer:stop'))",
     )
 
-demo.launch()
+demo.launch(css=chatbot_overlay_css)