Update app.py

app.py

@@ -51,6 +51,20 @@ DEFAULT_MODELS = [
     "groq/compound",
 ]
 
+# ==================== HELPER: CONVERT HISTORY TO CHATBOT FORMAT ====================
+def to_chatbot_messages(history: List[List[str]]) -> List[Dict[str, str]]:
+    """
+    Convert internal history format (list of [user, assistant]) to Gradio Chatbot format.
+    Returns a list of dicts with 'role' and 'content'.
+    """
+    messages = []
+    for user_msg, assistant_msg in history:
+        if user_msg:
+            messages.append({"role": "user", "content": user_msg})
+        if assistant_msg and assistant_msg != "⏳ Thinking...":
+            messages.append({"role": "assistant", "content": assistant_msg})
+    return messages
+
 # ==================== GROQ API CLIENT ====================
 class GroqClient:
     def __init__(self, api_key: str):
@@ -244,7 +258,7 @@ def refresh_models(api_key: str) -> gr.update:
 
 def process_chat(
     message: str,
-    history: List[List[str]],
+    history: List[List[str]],          # internal format: list of [user, assistant]
     model: str,
     temperature: float,
     max_tokens: int,
@@ -254,61 +268,62 @@ def process_chat(
 ) -> tuple:
     """Process chat message with Groq API and auto-fallback"""
     if not api_key and not GROQ_API_KEY:
-        return history + [[message, "❌ Error: Please provide a Groq API Key in settings or environment variable."]], "", "⚠️ No API Key"
+        new_history = history + [[message, "❌ Error: Please provide a Groq API Key in settings or environment variable."]]
+        return to_chatbot_messages(new_history), "", "⚠️ No API Key"
 
     key = api_key or GROQ_API_KEY
     client = GroqClient(key)
 
-    # Build messages
-    messages = []
+    # Build messages for API
+    api_messages = []
     if system_prompt:
-        messages.append({"role": "system", "content": system_prompt})
+        api_messages.append({"role": "system", "content": system_prompt})
 
     for human, assistant in history:
-        messages.append({"role": "user", "content": human})
+        api_messages.append({"role": "user", "content": human})
         if assistant:
-            messages.append({"role": "assistant", "content": assistant})
+            api_messages.append({"role": "assistant", "content": assistant})
 
-    messages.append({"role": "user", "content": message})
+    api_messages.append({"role": "user", "content": message})
 
-    # Show typing indicator
-    history = history + [[message, "⏳ Thinking..."]]
-    yield history, "", f"🔄 Using {model}..."
+    # Show typing indicator: update chatbot with temporary assistant message
+    temp_history = history + [[message, "⏳ Thinking..."]]
+    yield to_chatbot_messages(temp_history), "", f"🔄 Using {model}..."
 
     # Get response with fallback
     response, model_used = client.chat_completion(
-        messages=messages,
+        messages=api_messages,
         model=model,
         temperature=temperature,
         max_tokens=max_tokens,
         retry_with_fallback=auto_fallback
     )
 
-    # Update history
+    # Update internal history
     if "error" in response:
         error_msg = f"❌ Error: {response['error']}"
         if "detail" in response:
             error_msg += f"\n\nDetails: {response['detail']}"
-        history[-1][1] = error_msg
+        history.append([message, error_msg])
         status = f"❌ Error with {model_used}"
     else:
         try:
             content = response["choices"][0]["message"]["content"]
             usage = response.get("usage", {})
 
-            # Add model info footer
             fallback_notice = ""
             if model_used != model:
                 fallback_notice = f" (⚠️ Fallback from {model})"
 
             info = f"\n\n---\n*Model: {model_used}{fallback_notice} | Tokens: {usage.get('total_tokens', 'N/A')}*"
-            history[-1][1] = content + info
+            history.append([message, content + info])
             status = f"✅ Success with {model_used}" + (" (fallback)" if model_used != model else "")
         except Exception as e:
-            history[-1][1] = f"❌ Error parsing response: {str(e)}"
+            history.append([message, f"❌ Error parsing response: {str(e)}"])
             status = f"❌ Parse Error"
 
-    yield history, "", status
+    # Convert to chatbot format and yield final result
+    yield to_chatbot_messages(history), "", status
 
 def export_to_github(
     history: List[List[str]],
@@ -370,7 +385,7 @@ def format_conversation(history: List[List[str]]) -> str:
 
 def clear_chat():
     """Clear chat history"""
-    return [], "", "🔄 Ready"
+    return [], [], "🔄 Ready"   # returns (empty chatbot messages, empty internal history, status)
 
 def debug_request(
     message: str,
@@ -526,7 +541,6 @@ button:hover {
 
 # ==================== GRADIO INTERFACE ====================
 def create_interface():
-    # FIX: Removed css parameter from Blocks constructor
     with gr.Blocks(title="Groq AI Studio Pro") as demo:
 
         # Header
@@ -543,18 +557,17 @@ def create_interface():
                     </div>
                 """)
 
-        # State
+        # State (internal history as list of lists)
         state_history = gr.State([])
 
         with gr.Row():
             # Left Panel - Chat
             with gr.Column(scale=3):
                 with gr.Group(elem_classes="glass-panel"):
-                    # FIX: Removed bubble_full_width and show_copy_button parameters
                     chatbot = gr.Chatbot(
                         label="Conversation",
-                        elem_classes="chatbot"
-                        # show_copy_button is removed because it's not supported in Gradio 6.0
+                        elem_classes="chatbot",
+                        type="messages"  # Ensure it uses the messages format (default in Gradio 6)
                     )
 
                     with gr.Row():
@@ -658,21 +671,24 @@ def create_interface():
 
         send_event = msg_input.submit(
             process_chat,
-            [msg_input, chatbot, model_dropdown, temperature, max_tokens, system_prompt, api_key_input, auto_fallback],
+            [msg_input, state_history, model_dropdown, temperature, max_tokens, system_prompt, api_key_input, auto_fallback],
             [chatbot, msg_input, status_text]
         )
 
         send_btn.click(
             process_chat,
-            [msg_input, chatbot, model_dropdown, temperature, max_tokens, system_prompt, api_key_input, auto_fallback],
+            [msg_input, state_history, model_dropdown, temperature, max_tokens, system_prompt, api_key_input, auto_fallback],
             [chatbot, msg_input, status_text]
         )
 
-        clear_btn.click(clear_chat, outputs=[chatbot, state_history, status_text])
+        clear_btn.click(
+            clear_chat,
+            outputs=[chatbot, state_history, status_text]
+        )
 
         debug_btn.click(
             debug_request,
-            [msg_input, chatbot, model_dropdown, temperature, max_tokens, system_prompt, api_key_input],
+            [msg_input, state_history, model_dropdown, temperature, max_tokens, system_prompt, api_key_input],
             [debug_output]
         ).then(lambda: gr.update(visible=True), outputs=[debug_row])
 
@@ -706,5 +722,4 @@ def create_interface():
 # Launch
 if __name__ == "__main__":
     demo = create_interface()
-    # FIX: Moved CSS to launch() method
     demo.launch(server_name="0.0.0.0", server_port=7860, css=CUSTOM_CSS)