Update app.py

app.py

@@ -96,10 +96,18 @@ def generate_response(message, history, max_tokens, temperature, top_p):
 
     # Prepare conversation history
     messages = []
-    for user_msg, assistant_msg in history:
-        messages.append({"role": "user", "content": user_msg})
-        if assistant_msg:
-            messages.append({"role": "assistant", "content": assistant_msg})
+
+    # Handle both old tuple format and new message format
+    for item in history:
+        if isinstance(item, dict):
+            # New message format
+            messages.append(item)
+        elif isinstance(item, (list, tuple)) and len(item) == 2:
+            # Old tuple format
+            user_msg, assistant_msg = item
+            messages.append({"role": "user", "content": user_msg})
+            if assistant_msg:
+                messages.append({"role": "assistant", "content": assistant_msg})
 
     # Add current message
     messages.append({"role": "user", "content": message})
@@ -179,12 +187,15 @@ def chat_interface(message, history, max_tokens, temperature, top_p):
     if not message.strip():
         return history, ""
 
-    # Add user message to history
-    history.append([message, ""])
+    # Add user message to history in the new message format
+    history.append({"role": "user", "content": message})
+
+    # Add placeholder for assistant response
+    history.append({"role": "assistant", "content": ""})
 
     # Generate response with streaming
-    for partial_response in generate_response(message, history[:-1], max_tokens, temperature, top_p):
-        history[-1][1] = partial_response
+    for partial_response in generate_response(message, history[:-2], max_tokens, temperature, top_p):
+        history[-1]["content"] = partial_response
         yield history, ""
 
     return history, ""
@@ -492,7 +503,7 @@ with gr.Blocks(
     """
 ) as demo:
     # Header Section
-    with gr.Row(elem_classes="header-container animate-fade-in"):
+    with gr.Row():
         with gr.Column():
             gr.HTML("""
                 <div style="text-align: center; padding: 20px 0;">
@@ -541,7 +552,7 @@ with gr.Blocks(
                     """)
 
     # Main Chat Interface
-    with gr.Row(elem_classes="chat-container animate-fade-in"):
+    with gr.Row():
         with gr.Column(scale=4):
             # Status indicator
             gr.HTML("""
@@ -559,12 +570,11 @@ with gr.Blocks(
             chatbot = gr.Chatbot(
                 [],
                 elem_id="chatbot",
-                elem_classes="chat-container",
-                bubble_full_width=False,
+                type='messages',
                 height=650,
                 show_copy_button=True,
                 show_share_button=True,
-                avatar_images=("👤", "�"),
+                avatar_images=("👤", "🤖"),
                 render_markdown=True,
                 sanitize_html=False,  # Allow HTML for thinking and ser blocks
                 latex_delimiters=[
@@ -576,7 +586,7 @@ with gr.Blocks(
             )
 
             # Enhanced input section
-            with gr.Row(elem_classes="input-container"):
+            with gr.Row():
                 with gr.Column(scale=1):
                     msg = gr.Textbox(
                         container=False,
@@ -584,25 +594,22 @@ with gr.Blocks(
                         label="",
                         autofocus=True,
                         lines=1,
-                        max_lines=4,
-                        elem_classes="message-input"
+                        max_lines=4
                     )
                 with gr.Column(scale=0, min_width=120):
                     with gr.Row():
                         send_btn = gr.Button(
                             "🚀 Send",
                             variant="primary",
-                            size="lg",
-                            elem_classes="send-button"
+                            size="lg"
                         )
                         clear_btn = gr.Button(
                             "🗑️",
                             variant="secondary",
-                            size="lg",
-                            elem_classes="clear-button"
+                            size="lg"
                         )
 
-        with gr.Column(scale=1, min_width=320, elem_classes="parameter-panel"):
+        with gr.Column(scale=1, min_width=320):
             # Parameter header
             gr.HTML("""
                 <div style="text-align: center; margin-bottom: 20px;">
@@ -618,8 +625,7 @@ with gr.Blocks(
                 value=2048,
                 step=50,
                 label="🎯 Max Tokens",
-                info="Maximum number of tokens to generate",
-                elem_classes="parameter-slider"
+                info="Maximum number of tokens to generate"
             )
 
             temperature = gr.Slider(
@@ -628,8 +634,7 @@ with gr.Blocks(
                 value=0.7,
                 step=0.1,
                 label="🌡️ Temperature",
-                info="Higher = more creative, Lower = more focused",
-                elem_classes="parameter-slider"
+                info="Higher = more creative, Lower = more focused"
             )
 
             top_p = gr.Slider(
@@ -638,8 +643,7 @@ with gr.Blocks(
                 value=0.9,
                 step=0.05,
                 label="🎲 Top-p",
-                info="Nucleus sampling threshold",
-                elem_classes="parameter-slider"
+                info="Nucleus sampling threshold"
             )
 
             # Action buttons
@@ -647,8 +651,7 @@ with gr.Blocks(
                 stop_btn = gr.Button(
                     "⏹️ Stop",
                     variant="stop",
-                    scale=1,
-                    elem_classes="action-button"
+                    scale=1
                 )
 
             # Model information card
@@ -679,7 +682,7 @@ with gr.Blocks(
             """)
     
     # Enhanced Examples Section
-    with gr.Row(elem_classes="examples-container animate-fade-in"):
+    with gr.Row():
         with gr.Column():
             gr.HTML("""
                 <div style="text-align: center; margin: 24px 0 16px 0;">
@@ -704,8 +707,7 @@ with gr.Blocks(
                     ["🔬 How does CRISPR gene editing work in simple terms?"]
                 ],
                 inputs=msg,
-                examples_per_page=6,
-                elem_classes="example-grid"
+                examples_per_page=6
             )
 
     # Event handlers
@@ -738,7 +740,7 @@ with gr.Blocks(
     )
 
     # Enhanced Footer
-    with gr.Row(elem_classes="footer-container animate-fade-in"):
+    with gr.Row():
         with gr.Column():
             gr.HTML("""
                 <div style="text-align: center; padding: 20px 0;">