Update app.py

app.py

@@ -302,75 +302,63 @@ PREDEFINED = [
     "How do I remove a package with apt?"
 ]
 
-# ---------- Handlers ----------
-def send_no_attn(message, history):
-    """Add (user, bot) to history and return updated history + clear input."""
+# ---------- Reply functions for custom Chatbot UI ----------
+def reply_no_attn(message, history):
     if not message or not str(message).strip():
-        return history, ""  # no change, clear input
-    reply = generate_reply_no_attn(message)
-    if history is None:
-        history = []
-    history = history + [(message, reply)]
+        return history + [{"role": "user", "content": message}], ""
+    bot_reply = generate_reply_no_attn(message)
+    history = history + [
+        {"role": "user", "content": message},
+        {"role": "assistant", "content": bot_reply}
+    ]
     return history, ""
 
-def send_attn(message, history):
+def reply_attn(message, history):
     if not message or not str(message).strip():
-        return history, ""
-    reply = generate_reply_attn(message)
-    if history is None:
-        history = []
-    history = history + [(message, reply)]
+        return history + [{"role": "user", "content": message}], ""
+    bot_reply = generate_reply_attn(message)
+    history = history + [
+        {"role": "user", "content": message},
+        {"role": "assistant", "content": bot_reply}
+    ]
     return history, ""
 
-def clear_history():
-    return [], ""
-
-# ---------- UI: two chatboxes side-by-side, dropdown populates input (not auto-send) ----------
 with gr.Blocks() as demo:
     gr.Markdown("## Ubuntu Chatbot Comparison — No Attention (left) vs Attention (right)")
-    gr.Markdown("Choose a quick prompt (populates input) or type your own. Press Enter or click Send. Clear clears history.")
+    gr.Markdown("Use dropdown to quickly fill the chat input. Each chat keeps its own history. Clear button is built in per chat.")
 
     with gr.Row():
-        # LEFT: no-attn
+        # Left column: No Attention Model
         with gr.Column(scale=1):
             gr.Markdown("### No Attention Model")
-            chat_no = gr.Chatbot(label="No-Attn Chat", height=420)
-
+            chatbot_left = gr.Chatbot(label="No Attention Chatbot")
             with gr.Row():
-                dd_no = gr.Dropdown(PREDEFINED, label="Quick prompts", interactive=True)
-                clear_no = gr.Button("Clear Chat")
-
-            inp_no = gr.Textbox(placeholder="Type here for no-attn model...", lines=1)
-            send_no = gr.Button("Send")
-
-            # Dropdown populates the textbox (not auto-send)
-            dd_no.select(lambda x: gr.update(value=x), inputs=[dd_no], outputs=[inp_no])
-
-            # Enter or Send -> call send_no_attn
-            inp_no.submit(send_no_attn, inputs=[inp_no, chat_no], outputs=[chat_no, inp_no])
-            send_no.click(send_no_attn, inputs=[inp_no, chat_no], outputs=[chat_no, inp_no])
-
-            # Clear button
-            clear_no.click(lambda: ([], ""), inputs=None, outputs=[chat_no, inp_no])
-
-        # RIGHT: attn
+                txt_left = gr.Textbox(show_label=False, placeholder="Type your message here...").style(container=False)
+                send_left = gr.Button("Send")
+            dd_left = gr.Dropdown(choices=PREDEFINED, label="Quick prompts (left)", interactive=True)
+            def set_input_left(selected):
+                return selected
+            dd_left.change(fn=set_input_left, inputs=dd_left, outputs=txt_left)
+            def clear_left():
+                return [], ""
+            send_left.click(fn=reply_no_attn, inputs=[txt_left, chatbot_left], outputs=[chatbot_left, txt_left])
+            chatbot_left.clear(fn=clear_left, inputs=None, outputs=[chatbot_left, txt_left])
+
+        # Right column: With Attention Model
         with gr.Column(scale=1):
-            gr.Markdown("### Attention Model")
-            chat_att = gr.Chatbot(label="Attn Chat", height=420)
-
+            gr.Markdown("### With Attention Model")
+            chatbot_right = gr.Chatbot(label="Attention Chatbot")
             with gr.Row():
-                dd_att = gr.Dropdown(PREDEFINED, label="Quick prompts", interactive=True)
-                clear_att = gr.Button("Clear Chat")
-
-            inp_att = gr.Textbox(placeholder="Type here for attention model...", lines=1)
-            send_att = gr.Button("Send")
-
-            dd_att.select(lambda x: gr.update(value=x), inputs=[dd_att], outputs=[inp_att])
-
-            inp_att.submit(send_attn, inputs=[inp_att, chat_att], outputs=[chat_att, inp_att])
-            send_att.click(send_attn, inputs=[inp_att, chat_att], outputs=[chat_att, inp_att])
-
-            clear_att.click(lambda: ([], ""), inputs=None, outputs=[chat_att, inp_att])
+                txt_right = gr.Textbox(show_label=False, placeholder="Type your message here...").style(container=False)
+                send_right = gr.Button("Send")
+            dd_right = gr.Dropdown(choices=PREDEFINED, label="Quick prompts (right)", interactive=True)
+            def set_input_right(selected):
+                return selected
+            dd_right.change(fn=set_input_right, inputs=dd_right, outputs=txt_right)
+            def clear_right():
+                return [], ""
+            send_right.click(fn=reply_attn, inputs=[txt_right, chatbot_right], outputs=[chatbot_right, txt_right])
+            chatbot_right.clear(fn=clear_right, inputs=None, outputs=[chatbot_right, txt_right])
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()