Update app.py

app.py

@@ -10,18 +10,19 @@ API_URL = "https://api.groq.com/openai/v1/chat/completions"
 API_KEY = os.getenv("GROQ_API_KEY")
 
 print(f"🔑 API Key Found: {'Yes' if API_KEY else 'No'}")
+print(f"🔑 API Key Preview: {API_KEY[:10] + '...' if API_KEY else 'None'}")
 
 # 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) -> tuple[List[List[str]], str]:
+    """Groq API call with chat history and optional summarization, returning chatbot format and cleared input"""
     
     if not API_KEY:
-        return "❌ No API Key found"
+        return [[None, "❌ No API Key found. Please set GROQ_API_KEY in Hugging Face Spaces Settings > Secrets. Go to https://console.groq.com/keys to get your key."]], ""
     
     if not message.strip():
-        return "❌ Empty message"
+        return [[None, "❌ Empty message"]], ""
     
     try:
         headers = {
@@ -44,7 +45,6 @@ def groq_with_memory(message: str, topic: str = "general", summarize: bool = Fal
         messages = [{"role": msg["role"], "content": msg["content"]} for msg in recent_history]
         
         if summarize:
-            # Create a prompt to summarize the conversation
             summary_prompt = f"Summarize the following conversation history for the topic '{topic}':\n\n"
             for msg in recent_history:
                 if msg["topic"] == topic:
@@ -77,34 +77,39 @@ def groq_with_memory(message: str, topic: str = "general", summarize: bool = Fal
             result = response.json()
             if "choices" in result and len(result["choices"]) > 0:
                 response_content = result["choices"][0]["message"]["content"]
-                # Add assistant's response to history
                 chat_history.append({
                     "role": "assistant",
                     "content": response_content,
                     "topic": topic,
                     "timestamp": datetime.now().isoformat()
                 })
-                return response_content
+                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"
@@ -118,7 +123,7 @@ def view_history(topic: str = None):
 def manual_curl_example():
     """Generate curl command for manual testing"""
     if not API_KEY:
-        return "❌ No API key to generate curl"
+        return "❌ No API key to generate curl. Set GROQ_API_KEY in Hugging Face Spaces Settings > Secrets."
     
     curl_cmd = f'''curl -X POST "{API_URL}" \\
   -H "Authorization: Bearer {API_KEY}" \\
@@ -134,37 +139,52 @@ def manual_curl_example():
     return curl_cmd
 
 # Create Gradio interface
-with gr.Blocks(title="Groq Debug with Memory") as demo:
-    gr.Markdown("# 🔍 Groq API Debug Tool with Memory")
+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; }
+    .chatbot .message.user { text-align: left; background: #e6f3ff; padding: 10px; border-radius: 10px; margin: 5px; }
+    .chatbot .message.assistant { text-align: right; background: #f0f0f0; padding: 10px; border-radius: 10px; margin: 5px; }
+""") as demo:
+    gr.Markdown("# 🔍 Grok API Debug Tool with Memory")
     
     with gr.Tab("Chat with Memory"):
         gr.Markdown("Chat with Groq, 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",
+            bubble_full_width=False
         )
+        with gr.Row(elem_classes="input-container"):
+            chat_input = gr.Textbox(
+                label="Message",
+                placeholder="Type your message here...",
+                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, chat_input]
+        ).then(
+            update_chatbot_display,
+            outputs=[chatbot]
         )
     
     with gr.Tab("View History"):
@@ -189,7 +209,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"):
@@ -225,6 +245,10 @@ with gr.Blocks(title="Groq Debug with Memory") as demo:
         - `llama3-70b-8192`
         - `mixtral-8x7b-32768`
         - `gemma-7b-it`
+        
+        **API Key Setup:**
+        - Ensure GROQ_API_KEY is set in Hugging Face Spaces Settings > Secrets.
+        - Get your key from https://console.groq.com/keys.
         """)
 
 if __name__ == "__main__":