Update app.py

chatbox enhanced style

app.py

@@ -14,14 +14,14 @@ print(f"🔑 API Key Found: {'Yes' if API_KEY else 'No'}")
 # In-memory chat history storage
 chat_history: List[Dict[str, str]] = []
 
-def groq_with_memory(message: str, topic: str = "general", summarize: bool = False, max_history: int = 10) -> str:
-    """Groq API call with chat history and optional summarization"""
+def groq_with_memory(message: str, topic: str = "general", summarize: bool = False, max_history: int = 10) -> List[List[str]]:
+    """Groq API call with chat history and optional summarization, returning chatbot format"""
     
     if not API_KEY:
-        return "❌ No API Key found"
+        return [[None, "❌ No API Key found"]]
     
     if not message.strip():
-        return "❌ Empty message"
+        return [[None, "❌ Empty message"]]
     
     try:
         headers = {
@@ -84,27 +84,34 @@ def groq_with_memory(message: str, topic: str = "general", summarize: bool = Fal
                     "topic": topic,
                     "timestamp": datetime.now().isoformat()
                 })
-                return response_content
+                # Return in chatbot format: [[user_message, assistant_response]]
+                return [[message.strip(), response_content]]
             else:
-                return f"❌ No choices in response: {json.dumps(result, indent=2)}"
+                error_msg = f"❌ No choices in response: {json.dumps(result, indent=2)}"
+                return [[message.strip(), error_msg]]
         else:
-            return f"❌ HTTP {response.status_code}: {response.text}"
+            error_msg = f"❌ HTTP {response.status_code}: {response.text}"
+            return [[message.strip(), error_msg]]
             
     except requests.exceptions.Timeout:
-        return "❌ Request timeout (30s)"
+        return [[message.strip(), "❌ Request timeout (30s)"]]
     except requests.exceptions.ConnectionError:
-        return "❌ Connection error - cannot reach Groq API"
+        return [[message.strip(), "❌ Connection error - cannot reach Groq API"]]
     except json.JSONDecodeError:
-        return f"❌ Invalid JSON response: {response.text}"
+        return [[message.strip(), f"❌ Invalid JSON response: {response.text}"]]
     except Exception as e:
-        return f"❌ Unexpected error: {str(e)}"
+        return [[message.strip(), f"❌ Unexpected error: {str(e)}"]]
+
+def update_chatbot_display() -> List[List[str]]:
+    """Update the chatbot display with the entire chat history"""
+    return [[msg["content"], None] if msg["role"] == "user" else [None, msg["content"]] for msg in chat_history]
 
 def clear_history():
     """Clear the chat history"""
     chat_history.clear()
-    return "✅ Chat history cleared"
+    return [], "✅ Chat history cleared"
 
-def view_history(topic: str = None):
+def view_history(topic: str = None) -> str:
     """View the chat history, optionally filtered by topic"""
     if not chat_history:
         return "❌ No chat history available"
@@ -122,7 +129,7 @@ def manual_curl_example():
     
     curl_cmd = f'''curl -X POST "{API_URL}" \\
   -H "Authorization: Bearer {API_KEY}" \\
-  -H "Content-Type: application/json" \\
+  -H "Content-Type: "application/json" \\
   -d '{{
     "model": "llama3-8b-8192",
     "messages": [
@@ -134,37 +141,51 @@ def manual_curl_example():
     return curl_cmd
 
 # Create Gradio interface
-with gr.Blocks(title="Groq Debug with Memory") as demo:
+with gr.Blocks(title="Grok Debug with Memory", css="""
+    .chatbot-container { max-height: 500px; overflow-y: auto; }
+    .input-container { position: sticky; bottom: 0; background: white; padding: 10px; }
+""") as demo:
     gr.Markdown("# 🔍 Groq API Debug Tool with Memory")
     
     with gr.Tab("Chat with Memory"):
-        gr.Markdown("Chat with Groq, maintain history, and summarize by topic")
+        gr.Markdown("Chat with Grok, maintain history, and summarize by topic")
         
-        chat_input = gr.Textbox(
-            label="Message",
-            placeholder="Enter your message",
-            value="Hello, how can you help me today?"
-        )
-        topic_input = gr.Textbox(
-            label="Topic",
-            placeholder="Enter topic (e.g., 'coding', 'general')",
-            value="general"
-        )
-        summarize_checkbox = gr.Checkbox(
-            label="Summarize conversation for this topic",
-            value=False
-        )
-        chat_button = gr.Button("Send Message", variant="primary")
-        chat_output = gr.Textbox(
-            label="Response",
-            lines=10,
-            max_lines=20
+        chatbot = gr.Chatbot(
+            label="Conversation",
+            container=True,
+            height=500,
+            elem_classes="chatbot-container"
         )
+        with gr.Row(elem_classes="input-container"):
+            chat_input = gr.Textbox(
+                label="Message",
+                placeholder="Enter your message",
+                value="Hello, how can you help me today?",
+                show_label=False,
+                container=False
+            )
+            topic_input = gr.Textbox(
+                label="Topic",
+                placeholder="Enter topic (e.g., 'coding', 'general')",
+                value="general",
+                show_label=False,
+                container=False,
+                scale=1
+            )
+            summarize_checkbox = gr.Checkbox(
+                label="Summarize",
+                value=False
+            )
+            chat_button = gr.Button("Send", variant="primary")
         
         chat_button.click(
             groq_with_memory,
             inputs=[chat_input, topic_input, summarize_checkbox],
-            outputs=[chat_output]
+            outputs=[chatbot],
+            _js="() => { setTimeout(() => document.querySelector('.chatbot-container').scrollTop = document.querySelector('.chatbot-container').scrollHeight, 100); }"
+        ).then(
+            update_chatbot_display,
+            outputs=[chatbot]
         )
     
     with gr.Tab("View History"):
@@ -189,7 +210,7 @@ with gr.Blocks(title="Groq Debug with Memory") as demo:
         )
         clear_button.click(
             clear_history,
-            outputs=[history_output]
+            outputs=[chatbot, history_output]
         )
     
     with gr.Tab("Manual Test"):