Update app.py

app.py

@@ -239,16 +239,31 @@ def generate_response(message, history, max_tokens, temperature, top_p):
         yield "No response generated."
 
 def chat_interface(message, history, max_tokens, temperature, top_p):
-    """Main chat interface with improved streaming"""
+    """Main chat interface with improved streaming for messages format"""
     if not message.strip():
         return history, ""
 
-    # Add user message to history
-    history.append([message, ""])
+    # Add user message to history (messages format)
+    history.append({"role": "user", "content": message})
 
     # Generate response with streaming
-    for partial_response in generate_response(message, history[:-1], max_tokens, temperature, top_p):
-        history[-1][1] = partial_response
+    # Convert messages format to tuples for generate_response compatibility
+    history_tuples = []
+    for i in range(0, len(history) - 1, 2):  # Process pairs
+        user_msg = history[i] if i < len(history) else None
+        assistant_msg = history[i + 1] if i + 1 < len(history) else None
+        
+        if user_msg and user_msg.get("role") == "user":
+            user_content = user_msg.get("content", "")
+            assistant_content = assistant_msg.get("content", "") if assistant_msg and assistant_msg.get("role") == "assistant" else ""
+            history_tuples.append([user_content, assistant_content])
+    
+    # Add assistant message placeholder
+    history.append({"role": "assistant", "content": ""})
+    
+    # Generate response with streaming
+    for partial_response in generate_response(message, history_tuples, max_tokens, temperature, top_p):
+        history[-1]["content"] = partial_response
         yield history, ""
 
     return history, ""
@@ -610,10 +625,10 @@ with gr.Blocks(
                 chatbot = gr.Chatbot(
                     [],
                     elem_id="chatbot",
-                    bubble_full_width=False,
                     height=650,
                     show_copy_button=True,
                     show_share_button=True,
+                    type='messages',  # Use openai-style messages format
                     avatar_images=(
                         "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/themes/utils/profile_avatar.png", 
                         "🤖"
@@ -623,8 +638,7 @@ with gr.Blocks(
                     latex_delimiters=[
                         {"left": "$$", "right": "$$", "display": True},
                         {"left": "$", "right": "$", "display": False}
-                    ],
-                    elem_classes=["modern-chatbot"]
+                    ]
                 )
 
             # Input Section
@@ -637,21 +651,18 @@ with gr.Blocks(
                         autofocus=True,
                         scale=8,
                         lines=1,
-                        max_lines=5,
-                        elem_classes=["modern-input"]
+                        max_lines=5
                     )
                     with gr.Column(scale=1, min_width=120):
                         send_btn = gr.Button(
                             "🚀 Send", 
                             variant="primary", 
-                            size="lg",
-                            elem_classes=["send-button"]
+                            size="lg"
                         )
                         clear_btn = gr.Button(
                             "🗑️ Clear", 
                             variant="secondary", 
-                            size="sm",
-                            elem_classes=["clear-button"]
+                            size="sm"
                         )
 
         # Settings Sidebar
@@ -669,8 +680,7 @@ with gr.Blocks(
                     value=2048,
                     step=1,
                     label="🎯 Max Tokens",
-                    info="Maximum number of tokens to generate",
-                    elem_classes=["modern-slider"]
+                    info="Maximum number of tokens to generate"
                 )
 
                 temperature = gr.Slider(
@@ -679,8 +689,7 @@ with gr.Blocks(
                     value=0.7,
                     step=0.1,
                     label="🌡️ Temperature",
-                    info="Controls randomness in generation",
-                    elem_classes=["modern-slider"]
+                    info="Controls randomness in generation"
                 )
 
                 top_p = gr.Slider(
@@ -689,16 +698,14 @@ with gr.Blocks(
                     value=0.9,
                     step=0.05,
                     label="🎲 Top-p (Nucleus Sampling)",
-                    info="Controls diversity of generation",
-                    elem_classes=["modern-slider"]
+                    info="Controls diversity of generation"
                 )
 
                 with gr.Row():
                     stop_btn = gr.Button(
                         "⏹️ Stop Generation", 
                         variant="stop", 
-                        size="sm",
-                        elem_classes=["stop-button"]
+                        size="sm"
                     )
 
             # Model Information Panel
@@ -755,8 +762,7 @@ with gr.Blocks(
             ],
             inputs=msg,
             label="",
-            examples_per_page=6,
-            elem_classes=["modern-examples"]
+            examples_per_page=6
         )
 
     # Event handlers