feat: page split & add simulation configuration

app.py

@@ -62,6 +62,48 @@ def _patient_choices() -> list[tuple[str, str]]:
 # ---------------------------------------------------------------------------
 # HTML helpers
 # ---------------------------------------------------------------------------
+def build_recap_html(hadm_id: str, model: str, cefr: str, personality: str, recall: str, confusion: str) -> str:
+    patient = PATIENT_DICT.get(hadm_id, {})
+    patient_label = (
+        f"Age {patient.get('age')} · {patient.get('gender')} · {patient.get('diagnosis', 'Unknown')}"
+        if patient else "—"
+    )
+    personality_label = next((l for l, v in PERSONALITY_CHOICES if v == personality), personality)
+    cefr_label        = next((l for l, v in CEFR_CHOICES if v == cefr), cefr)
+    recall_label      = next((l for l, v in RECALL_CHOICES if v == recall), recall)
+    confusion_label   = next((l for l, v in CONFUSION_CHOICES if v == confusion), confusion)
+
+    def _card(label, value):
+        return (
+            "<div style='padding:10px 14px;background:var(--background-fill-primary,#fff);"
+            "border:1px solid var(--border-color-primary);border-radius:8px'>"
+            f"<div style='font-size:11px;font-weight:600;letter-spacing:0.06em;"
+            f"text-transform:uppercase;color:var(--body-text-color-subdued);margin-bottom:4px'>{label}</div>"
+            f"<div style='font-size:13px;font-weight:500;line-height:1.4'>{value}</div>"
+            "</div>"
+        )
+
+    items = [
+        _card("Patient", patient_label),
+        _card("Personality", personality_label),
+        _card("Model", model),
+        _card("Language Proficiency", cefr_label),
+        _card("Medical History Recall", recall_label),
+        _card("Cognitive Confusion", confusion_label),
+    ]
+
+    grid_items = "".join(items)
+    return (
+        "<div style='background:var(--color-accent-soft,#f0f7ff);"
+        "border:1px solid var(--border-color-primary);border-radius:10px;"
+        "padding:16px 20px;margin-bottom:8px'>"
+        "<div style='font-weight:600;font-size:14px;margin-bottom:12px'>📋 Simulation Configuration</div>"
+        f"<div style='display:grid;grid-template-columns:1fr 1fr;gap:8px'>{grid_items}</div>"
+        "</div>"
+    )
+
+
+
 def _row(label: str, val) -> str:
     val = str(val) if val not in (None, "") else "N/A"
     return (
@@ -156,15 +198,36 @@ CUSTOM_CSS = """
                  'Segoe UI', sans-serif !important;
 }
 
-/* ── Compact radio pills ────────────────────────────────────────── */
-.compact-radio .wrap {
-    gap: 6px !important;
+/* ── Page background ────────────────────────────────────────────── */
+body, .gradio-container, .main, footer {
+    background-color: #f3f4f6 !important;
 }
-.compact-radio label {
-    padding: 6px 14px !important;
-    border-radius: 8px !important;
-    font-size: 13px !important;
-    min-width: unset !important;
+
+/* ── White shadow cards for form sections ───────────────────────── */
+.form-card {
+    background: #ffffff !important;
+    border-radius: 14px !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05) !important;
+    border: none !important;
+    padding: 20px 24px !important;
+}
+.form-card > .gap,
+.form-card > div {
+    background: transparent !important;
+    border: none !important;
+    gap: 12px !important;
+}
+
+/* ── Card section title (replaces gray header bar) ──────────────── */
+.card-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+    padding-bottom: 10px;
+    margin-bottom: 2px;
+    border-bottom: 1px solid #e5e7eb;
+    display: block;
+    text-align: center;
 }
 
 /* ── Tooltip descriptions ───────────────────────────────────────── */
@@ -175,11 +238,40 @@ CUSTOM_CSS = """
     line-height: 1.4;
 }
 
+/* ── Transparent HTML tip containers ────────────────────────────── */
+.tip-html,
+.tip-html > div,
+.tip-html > .prose {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* ── CEFR radio — clean pill style ─────────────────────────────── */
+.compact-radio .wrap {
+    gap: 6px !important;
+}
+.compact-radio label {
+    padding: 5px 14px !important;
+    border-radius: 8px !important;
+    font-size: 13px !important;
+    min-width: unset !important;
+}
+
 /* ── Mode cards ─────────────────────────────────────────────────── */
 .mode-card {
-    border: 1px solid var(--border-color-primary);
-    border-radius: 12px;
-    padding: 20px;
+    background: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 14px !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
+    padding: 20px !important;
+}
+
+/* ── Start simulation button shadow ─────────────────────────────── */
+#start-btn > button {
+    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.30) !important;
+    font-size: 15px !important;
 }
 """
 
@@ -215,21 +307,28 @@ def _make_tip_html(tips: dict, selected: str) -> str:
 # ---------------------------------------------------------------------------
 # Callbacks — Setup
 # ---------------------------------------------------------------------------
+def go_to_setup():
+    return gr.update(visible=False), gr.update(visible=True)
+
+
 def start_simulation(
     hadm_id: str,
     api_key_input: str,
     model: str,
     cefr: str,
     personality: str,
-    recall: str,
-    confusion: str,
+    recall_high: bool,
+    confusion_high: bool,
 ):
+    recall = "high" if recall_high else "low"
+    confusion = "high" if confusion_high else "normal"
     def _no_change():
         return (
             gr.update(),              # patient_agent_state
             gr.update(),              # sim_config_state
             gr.update(visible=True),  # setup_section
             gr.update(visible=False), # mode_section
+            gr.update(value=""),      # recap_display
         )
 
     if not hadm_id:
@@ -277,10 +376,13 @@ def start_simulation(
         gr.Warning(f"Failed to initialize patient agent: {e}")
         return _no_change()
 
+    recap = build_recap_html(hadm_id, model, cefr, personality, recall, confusion)
+
     sim_config = {
         "patient": patient,
         "api_key": api_key,
         "model": model,
+        "recap_html": recap,
     }
 
     return (
@@ -288,6 +390,7 @@ def start_simulation(
         sim_config,
         gr.update(visible=False),  # hide setup_section
         gr.update(visible=True),   # show mode_section
+        gr.update(value=recap),    # recap_display
     )
 
 
@@ -299,6 +402,7 @@ def back_to_setup():
         gr.update(visible=False),  # hide mode_section
         gr.update(visible=False),  # hide chat_section
         gr.update(visible=False),  # hide auto_section
+        gr.update(value=""),       # clear recap_display
     )
 
 
@@ -309,7 +413,7 @@ def start_manual(profile_mode: str, agent, sim_config: dict):
     if agent is None or sim_config is None:
         gr.Warning("Session expired. Please restart.")
         return (
-            gr.update(), gr.update(),
+            gr.update(), gr.update(), gr.update(),
             gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
         )
 
@@ -322,6 +426,7 @@ def start_manual(profile_mode: str, agent, sim_config: dict):
     )
     return (
         profile_html,
+        sim_config.get("recap_html", ""),  # show recap in left panel
         [],                         # empty chat history
         gr.update(visible=False),   # hide mode_section
         gr.update(visible=False),   # hide auto_section
@@ -353,8 +458,9 @@ def back_to_setup_from_chat(agent):
     if agent is not None:
         agent.reset_history(verbose=False)
     return (
-        gr.update(),               # keep chat log
+        [],                        # clear chat log
         "",                        # clear profile html
+        "",                        # clear chat recap
         None,                      # clear patient_agent_state
         None,                      # clear sim_config_state
         gr.update(visible=True),   # show setup_section
@@ -374,6 +480,7 @@ _AUTO_OUTPUTS_UPDATE = (
     gr.update(visible=True),        # mode_section
     gr.update(visible=False),       # auto_section
     gr.update(visible=False),       # chat_section
+    gr.update(),                    # auto_recap
 )
 
 
@@ -400,18 +507,22 @@ def start_auto(agent, sim_config: dict):
         yield _AUTO_OUTPUTS_UPDATE
         return
 
-    # Switch to auto_section immediately with empty chatbot
+    # Switch to auto_section immediately with empty chatbot; set recap once
     chat_history = []
-    yield chat_history, gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
+    recap_html = sim_config.get("recap_html", "")
+    yield chat_history, gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), recap_html
 
     def _append(role: str, content: str):
         chat_history.append({"role": role, "content": content})
 
+    def _yield():
+        return chat_history, gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update()
+
     try:
         # Doctor greets first
         doctor_greet = doctor.doctor_greet
         _append("user", doctor_greet)
-        yield chat_history, gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
+        yield _yield()
 
         for inference_idx in range(MAX_AUTO_INFERENCES):
             is_last = inference_idx == MAX_AUTO_INFERENCES - 1
@@ -423,7 +534,7 @@ def start_auto(agent, sim_config: dict):
                 verbose=False,
             )
             _append("assistant", patient_response)
-            yield chat_history, gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
+            yield _yield()
 
             # Doctor responds
             doctor_input = chat_history[-1]["content"]
@@ -435,21 +546,45 @@ def start_auto(agent, sim_config: dict):
                 verbose=False,
             )
             _append("user", doctor_response)
-            yield chat_history, gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
+            yield _yield()
 
             if detect_ed_termination(doctor_response):
                 break
 
     except Exception as e:
         gr.Warning(f"Simulation error: {e}")
-        yield chat_history, gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
+        yield _yield()
+
+
+def back_to_mode_from_auto(agent):
+    if agent is not None:
+        agent.reset_history(verbose=False)
+    return (
+        [],                        # clear auto chatbot log
+        "",                        # clear auto recap
+        gr.update(visible=True),   # show mode_section
+        gr.update(visible=False),  # hide auto_section
+    )
+
+
+def back_to_mode_from_chat(agent):
+    if agent is not None:
+        agent.reset_history(verbose=False)
+    return (
+        [],                        # clear chat log
+        "",                        # clear profile html
+        "",                        # clear chat recap
+        gr.update(visible=True),   # show mode_section
+        gr.update(visible=False),  # hide chat_section
+    )
 
 
 def back_to_setup_from_auto(agent):
     if agent is not None:
         agent.reset_history(verbose=False)
     return (
-        gr.update(),               # keep auto chatbot log
+        [],                        # clear auto chatbot log
+        "",                        # clear auto recap
         None,                      # clear patient_agent_state
         None,                      # clear sim_config_state
         gr.update(visible=True),   # show setup_section
@@ -466,25 +601,47 @@ with gr.Blocks(title="PatientSim", theme=gr.themes.Soft(), css=CUSTOM_CSS) as de
     patient_agent_state = gr.State(None)
     sim_config_state = gr.State(None)
 
-    # ── Header ──────────────────────────────────────────────────────────────
-    gr.Markdown(
-        "# 🏥 PatientSim — ED Consultation Demo\n"
-        "An interactive simulator for realistic doctor–patient interactions "
-        "([NeurIPS 2025](https://openreview.net/forum?id=1THAjdP4QJ)). "
-        "Configure a patient and persona below, then choose your simulation mode."
-    )
+    # ── Intro section ────────────────────────────────────────────────────────
+    with gr.Column(visible=True) as intro_section:
+        gr.Markdown(
+            "# 🏥 PatientSim — ED Consultation Demo\n\n"
+            "**PatientSim** is a research framework for simulating realistic emergency department "
+            "doctor–patient interactions, presented at "
+            "[NeurIPS 2025 (Datasets & Benchmarks)](https://openreview.net/forum?id=1THAjdP4QJ).\n\n"
+            "Large language models act as patients with **controllable personas** — you choose their "
+            "personality, language proficiency, medical history recall, and cognitive state — producing "
+            "diverse and realistic consultation scenarios for training and evaluation.\n\n"
+            "---\n\n"
+            "### What you can do here\n\n"
+            "| Mode | Description |\n"
+            "|------|-------------|\n"
+            "| 🤖 **Auto Simulation** | Watch an AI doctor conduct a full consultation with the simulated patient and arrive at a differential diagnosis — no input required. |\n"
+            "| 🩺 **Practice Mode** | You play the doctor. Consult the simulated patient, gather medical history, and work toward a diagnosis yourself. |\n\n"
+            "---\n\n"
+            "### How to get started\n"
+            "1. Click **Get Started** below.\n"
+            "2. Enter your API key and select a patient case and persona.\n"
+            "3. Choose a simulation mode and begin."
+        )
+        get_started_btn = gr.Button("Get Started →", variant="primary", size="lg")
 
     # ── Setup section ────────────────────────────────────────────────────────
-    with gr.Column(visible=True) as setup_section:
+    with gr.Column(visible=False) as setup_section:
+        gr.Markdown(
+            "# 🏥 PatientSim — Setup\n\n"
+            "Configure your session below. Select the patient case you want to simulate, "
+            "choose the AI model to power the patient, and define the patient's persona across "
+            "four behavioral axes. When ready, click **Start Simulation**."
+        )
 
-        with gr.Group():
-            gr.Markdown("#### 🔑 Connection")
+        with gr.Group(elem_classes=["form-card"]):
+            gr.HTML("<span class='card-title'>🔑 Connection</span>")
             with gr.Row():
                 api_key_input = gr.Textbox(
                     label="API Key",
                     placeholder="Google AI or OpenAI API key (or set via env var)",
                     type="password",
-                    scale=2,
+                    scale=3,
                 )
                 model_dd = gr.Dropdown(
                     choices=BACKEND_MODELS,
@@ -493,25 +650,25 @@ with gr.Blocks(title="PatientSim", theme=gr.themes.Soft(), css=CUSTOM_CSS) as de
                     scale=1,
                 )
 
-        with gr.Group():
-            gr.Markdown("#### 🩺 Patient Case")
+        with gr.Group(elem_classes=["form-card"]):
+            gr.HTML("<span class='card-title'>🩺 Patient Case</span>")
             patient_dd = gr.Dropdown(
                 choices=_patient_choices(),
                 label="Select a patient case",
             )
 
-        with gr.Group():
-            gr.Markdown("#### 🎭 Patient Persona")
+        with gr.Group(elem_classes=["form-card"]):
+            gr.HTML("<span class='card-title'>🎭 Patient Persona</span>")
             with gr.Row():
                 with gr.Column(min_width=200):
-                    personality_radio = gr.Radio(
+                    personality_dd = gr.Dropdown(
                         choices=PERSONALITY_CHOICES,
                         value="plain",
                         label="Personality",
-                        elem_classes=["compact-radio"],
                     )
                     personality_tip = gr.HTML(
-                        value=_make_tip_html(PERSONALITY_TIPS, "plain")
+                        value=_make_tip_html(PERSONALITY_TIPS, "plain"),
+                        elem_classes=["tip-html"],
                     )
                 with gr.Column(min_width=200):
                     cefr_radio = gr.Radio(
@@ -521,35 +678,35 @@ with gr.Blocks(title="PatientSim", theme=gr.themes.Soft(), css=CUSTOM_CSS) as de
                         elem_classes=["compact-radio"],
                     )
                     cefr_tip = gr.HTML(
-                        value=_make_tip_html(CEFR_TIPS, "C")
+                        value=_make_tip_html(CEFR_TIPS, "C"),
+                        elem_classes=["tip-html"],
                     )
             with gr.Row():
                 with gr.Column(min_width=200):
-                    recall_radio = gr.Radio(
-                        choices=RECALL_CHOICES,
-                        value="high",
-                        label="Medical History Recall",
-                        elem_classes=["compact-radio"],
-                    )
-                    recall_tip = gr.HTML(
-                        value=_make_tip_html(RECALL_TIPS, "high")
+                    recall_toggle = gr.Checkbox(
+                        label="High Medical History Recall",
+                        value=True,
+                        info="Enabled: patient usually recalls events accurately.  Disabled: often forgets key medical events.",
                     )
                 with gr.Column(min_width=200):
-                    confusion_radio = gr.Radio(
-                        choices=CONFUSION_CHOICES,
-                        value="normal",
-                        label="Cognitive Confusion",
-                        elem_classes=["compact-radio"],
-                    )
-                    confusion_tip = gr.HTML(
-                        value=_make_tip_html(CONFUSION_TIPS, "normal")
+                    confusion_toggle = gr.Checkbox(
+                        label="High Cognitive Confusion",
+                        value=False,
+                        info="Enabled: patient is highly dazed and disoriented.  Disabled: clear mental status.",
                     )
 
-        start_btn = gr.Button("▶  Start Simulation", variant="primary", size="lg")
+        start_btn = gr.Button("▶  Start Simulation", variant="primary", size="lg", elem_id="start-btn")
 
     # ── Mode selection section ───────────────────────────────────────────────
     with gr.Column(visible=False) as mode_section:
-        gr.Markdown("## Choose Simulation Mode")
+        gr.Markdown(
+            "## Choose Simulation Mode\n\n"
+            "Your patient agent is ready. Review your configuration below, then pick a mode. "
+            "**Auto Simulation** runs a fully automated consultation so you can observe the "
+            "system in action. **Practice Mode** puts you in the doctor's seat for hands-on "
+            "training."
+        )
+        recap_display = gr.HTML()
         with gr.Row(equal_height=True):
 
             # Auto simulation card
@@ -586,9 +743,16 @@ with gr.Blocks(title="PatientSim", theme=gr.themes.Soft(), css=CUSTOM_CSS) as de
     # ── Auto simulation section ──────────────────────────────────────────────
     with gr.Column(visible=False) as auto_section:
         with gr.Row():
+            back_from_auto_to_mode_btn = gr.Button("← Mode Selection", scale=0)
             back_from_auto_btn = gr.Button("← Back to Setup", scale=0)
 
-        gr.Markdown("### Auto Simulation Result")
+        gr.Markdown(
+            "### 🤖 Auto Simulation\n\n"
+            "An AI doctor is conducting the consultation. The doctor will ask questions, "
+            "gather medical history, and conclude with a differential diagnosis. "
+            "**Doctor** messages appear on the left; **Patient** responses on the right."
+        )
+        auto_recap = gr.HTML()
         auto_chatbot = gr.Chatbot(
             label="Doctor–Patient Dialogue",
             height=560,
@@ -602,13 +766,21 @@ with gr.Blocks(title="PatientSim", theme=gr.themes.Soft(), css=CUSTOM_CSS) as de
 
     # ── Manual chat section ──────────────────────────────────────────────────
     with gr.Column(visible=False) as chat_section:
+        gr.Markdown(
+            "### 🩺 Practice Mode\n\n"
+            "You are the attending physician. Type your questions and responses in the box "
+            "below to consult the simulated patient. Use the patient profile panel on the "
+            "left for reference. Try to gather sufficient history to reach a differential diagnosis."
+        )
         with gr.Row():
+            back_from_chat_to_mode_btn = gr.Button("← Mode Selection", scale=1)
             back_from_chat_btn = gr.Button("← Back to Setup", scale=1)
             reset_btn = gr.Button("↺  Reset Conversation", scale=1)
 
         with gr.Row(equal_height=False):
             with gr.Column(scale=1, min_width=280):
                 profile_display = gr.HTML()
+                chat_recap = gr.HTML()
 
             with gr.Column(scale=2):
                 chatbot = gr.Chatbot(
@@ -639,10 +811,16 @@ with gr.Blocks(title="PatientSim", theme=gr.themes.Soft(), css=CUSTOM_CSS) as de
 
     # ── Event wiring ─────────────────────────────────────────────────────────
 
+    # Intro → Setup
+    get_started_btn.click(
+        fn=go_to_setup,
+        outputs=[intro_section, setup_section],
+    )
+
     # Tooltip updates
-    personality_radio.change(
+    personality_dd.change(
         fn=lambda v: _make_tip_html(PERSONALITY_TIPS, v),
-        inputs=[personality_radio],
+        inputs=[personality_dd],
         outputs=[personality_tip],
     )
     cefr_radio.change(
@@ -650,64 +828,66 @@ with gr.Blocks(title="PatientSim", theme=gr.themes.Soft(), css=CUSTOM_CSS) as de
         inputs=[cefr_radio],
         outputs=[cefr_tip],
     )
-    recall_radio.change(
-        fn=lambda v: _make_tip_html(RECALL_TIPS, v),
-        inputs=[recall_radio],
-        outputs=[recall_tip],
-    )
-    confusion_radio.change(
-        fn=lambda v: _make_tip_html(CONFUSION_TIPS, v),
-        inputs=[confusion_radio],
-        outputs=[confusion_tip],
-    )
 
     # Start simulation → mode selection
     start_btn.click(
         fn=start_simulation,
-        inputs=[patient_dd, api_key_input, model_dd, cefr_radio, personality_radio, recall_radio, confusion_radio],
-        outputs=[patient_agent_state, sim_config_state, setup_section, mode_section],
+        inputs=[patient_dd, api_key_input, model_dd, cefr_radio, personality_dd, recall_toggle, confusion_toggle],
+        outputs=[patient_agent_state, sim_config_state, setup_section, mode_section, recap_display],
     )
 
     # Back to setup from mode selection
     back_from_mode_btn.click(
         fn=back_to_setup,
-        outputs=[patient_agent_state, sim_config_state, setup_section, mode_section, chat_section, auto_section],
+        outputs=[patient_agent_state, sim_config_state, setup_section, mode_section, chat_section, auto_section, recap_display],
     )
 
     # Auto simulation
-    auto_btn.click(
+    auto_event = auto_btn.click(
         fn=start_auto,
         inputs=[patient_agent_state, sim_config_state],
-        outputs=[auto_chatbot, mode_section, auto_section, chat_section],
+        outputs=[auto_chatbot, mode_section, auto_section, chat_section, auto_recap],
+    )
+    back_from_auto_to_mode_btn.click(
+        fn=back_to_mode_from_auto,
+        inputs=[patient_agent_state],
+        outputs=[auto_chatbot, auto_recap, mode_section, auto_section],
+        cancels=[auto_event],
     )
     back_from_auto_btn.click(
         fn=back_to_setup_from_auto,
-        outputs=[auto_chatbot, patient_agent_state, sim_config_state, setup_section, mode_section, auto_section, chat_section],
+        inputs=[patient_agent_state],
+        outputs=[auto_chatbot, auto_recap, patient_agent_state, sim_config_state, setup_section, mode_section, auto_section, chat_section],
+        cancels=[auto_event],
     )
 
     # Manual practice
     manual_btn.click(
         fn=start_manual,
         inputs=[profile_mode_radio, patient_agent_state, sim_config_state],
-        outputs=[profile_display, chatbot, mode_section, auto_section, chat_section],
+        outputs=[profile_display, chat_recap, chatbot, mode_section, auto_section, chat_section],
     )
-    back_from_chat_btn.click(
-        fn=back_to_setup_from_chat,
-        inputs=[patient_agent_state],
-        outputs=[chatbot, profile_display, patient_agent_state, sim_config_state, setup_section, mode_section, auto_section, chat_section],
-    )
-
-    # Chat interactions
-    _chat_outputs = [chatbot, msg_box]
-    send_btn.click(
+    chat_event_send = send_btn.click(
         fn=chat,
         inputs=[msg_box, chatbot, patient_agent_state],
-        outputs=_chat_outputs,
+        outputs=[chatbot, msg_box],
     )
-    msg_box.submit(
+    chat_event_submit = msg_box.submit(
         fn=chat,
         inputs=[msg_box, chatbot, patient_agent_state],
-        outputs=_chat_outputs,
+        outputs=[chatbot, msg_box],
+    )
+    back_from_chat_to_mode_btn.click(
+        fn=back_to_mode_from_chat,
+        inputs=[patient_agent_state],
+        outputs=[chatbot, profile_display, chat_recap, mode_section, chat_section],
+        cancels=[chat_event_send, chat_event_submit],
+    )
+    back_from_chat_btn.click(
+        fn=back_to_setup_from_chat,
+        inputs=[patient_agent_state],
+        outputs=[chatbot, profile_display, chat_recap, patient_agent_state, sim_config_state, setup_section, mode_section, auto_section, chat_section],
+        cancels=[chat_event_send, chat_event_submit],
     )
     reset_btn.click(
         fn=reset_chat,