Update app.py

app.py

@@ -50,6 +50,9 @@ Edge Cases & Important Considerations:
 REMINDER: Your primary objective is to serve as a helpful Python chatbot, reasoning about context before each response, and outputting clear, appropriate conversational replies.
 """
 
+# -----------------------------
+# OpenAI message state (internal)
+# -----------------------------
 def init_messages():
     return [
         {
@@ -58,11 +61,24 @@ def init_messages():
         }
     ]
 
+# -----------------------------
+# Gradio Chatbot UI history (messages format)
+# Each item must be: {"role": "...", "content": "..."}
+# -----------------------------
+def append_ui_history(chat_history, user_text, assistant_text):
+    if chat_history is None:
+        chat_history = []
+    chat_history = chat_history + [
+        {"role": "user", "content": user_text},
+        {"role": "assistant", "content": assistant_text},
+    ]
+    return chat_history
+
 def respond(user_text, chat_history, messages):
     if messages is None:
         messages = init_messages()
 
-    # add user turn
+    # add user turn for OpenAI
     messages.append(
         {
             "role": "user",
@@ -85,7 +101,7 @@ def respond(user_text, chat_history, messages):
 
     assistant_text = response.output_text
 
-    # add assistant turn
+    # add assistant turn for OpenAI
     messages.append(
         {
             "role": "assistant",
@@ -93,8 +109,8 @@ def respond(user_text, chat_history, messages):
         }
     )
 
-    # update UI chat history (tuple format)
-    chat_history = (chat_history or []) + [(user_text, assistant_text)]
+    # update UI history (messages format)
+    chat_history = append_ui_history(chat_history, user_text, assistant_text)
 
     return "", chat_history, messages
 
@@ -102,7 +118,6 @@ def respond(user_text, chat_history, messages):
 # -----------------------------
 # Gradio UI
 # -----------------------------
-
 FAQ_QUESTIONS = [
     "What is the difference between a list, tuple, and set in Python?",
     "How do I use dictionaries effectively in Python?",
@@ -157,7 +172,7 @@ with gr.Blocks(elem_id="app_container") as demo:
     # Header Row
     with gr.Row():
         with gr.Column(scale=1, min_width=80):
-            logo = gr.Image(
+            gr.Image(
                 value=LOGO_URL,
                 label=None,
                 show_label=False,
@@ -181,10 +196,12 @@ with gr.Blocks(elem_id="app_container") as demo:
 
     gr.Markdown("---")
 
+    # State for OpenAI messages
     state = gr.State(init_messages())
 
+    # Two-column layout
     with gr.Row(equal_height=True):
-        # LEFT
+        # LEFT: FAQ + Quick Ask
         with gr.Column(scale=4, min_width=320):
             with gr.Group(elem_classes=["faq-box"]):
                 gr.Markdown("### FAQ — Most Asked Python Questions")
@@ -208,12 +225,13 @@ with gr.Blocks(elem_id="app_container") as demo:
                     value=None
                 )
 
-        # RIGHT
+        # RIGHT: Chat area
         with gr.Column(scale=8, min_width=520):
             chatbot = gr.Chatbot(
                 height=520,
-                label="Conversation",
-                type="tuples"   # ✅ IMPORTANT FIX
+                label="Conversation"
+                # No bubble_full_width
+                # No type=
             )
 
             with gr.Row():
@@ -234,6 +252,7 @@ with gr.Blocks(elem_id="app_container") as demo:
     for b, q in zip(faq_buttons, FAQ_QUESTIONS):
         b.click(fn=lambda q=q: set_question(q), inputs=None, outputs=msg)
 
+    # Optional quick preference: append hint to textbox (UI-only)
     def apply_quick_pref(pref, current_text):
         if not pref:
             return current_text
@@ -243,9 +262,11 @@ with gr.Blocks(elem_id="app_container") as demo:
 
     quick.change(fn=apply_quick_pref, inputs=[quick, msg], outputs=msg)
 
+    # Submit logic
     msg.submit(respond, inputs=[msg, chatbot, state], outputs=[msg, chatbot, state])
     send.click(respond, inputs=[msg, chatbot, state], outputs=[msg, chatbot, state])
 
+    # Clear
     clear.click(fn=clear_all, inputs=None, outputs=[chatbot, state, msg])
 
 demo.launch(