Update app.py

app.py

@@ -74,26 +74,10 @@ def groq_with_memory(message: str, topic: str = "general", summarize: bool = Fal
     except Exception as e:
         return f"❌ Error: {str(e)}"
 
-def chat_with_groq(message: str, history: List[List[str]], topic: str = "general", summarize: bool = False) -> tuple:
-    """
-    Function for Gradio Chatbot
-    Returns: (updated_history, empty_string_for_textbox)
-    """
-    if not message.strip():
-        return history, ""
-    
-    # Get response from Groq
-    response = groq_with_memory(message, topic, summarize)
-    
-    # Add to gradio chat history format
-    history.append([message, response])
-    
-    return history, ""
-
-def clear_chat():
-    """Clear both chat histories"""
+def clear_history():
+    """Clear the chat history"""
     chat_history.clear()
-    return [], "✅ Chat history cleared"
+    return "✅ Chat history cleared", ""
 
 def view_history(topic: str = None):
     """View chat history with optional topic filter"""
@@ -102,7 +86,7 @@ def view_history(topic: str = None):
     
     filtered = [msg for msg in chat_history if topic is None or msg.get("topic") == topic]
     return "\n".join(
-        f"[{msg.get('timestamp', 'N/A')}] {msg['role'].capitalize()}: {msg['content']}"
+        f"[{msg['timestamp']}] {msg['role'].capitalize()}: {msg['content']}"
         for msg in filtered
     )
 
@@ -116,120 +100,157 @@ def manual_curl_example():
   -d '{{"model": "llama-3.3-70b-versatile", "messages": [{{"role": "user", "content": "Hello"}}], "max_tokens": 1000}}'
 """
 
+def process_message(message: str, topic: str, summarize: bool):
+    """Process message and clear input"""
+    if not message.strip():
+        return "❌ Please enter a message", ""
+    
+    response = groq_with_memory(message, topic, summarize)
+    return response, ""
+
 # Gradio Interface
-with gr.Blocks(title="Groq Chat Debugger", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="Groq Chat Interface", theme=gr.themes.Soft()) as demo:
     gr.Markdown("## 💬 Groq API Chat Interface")
     
     with gr.Tab("💬 Chat"):
+        # Response area at top
+        response_output = gr.Textbox(
+            label="🤖 AI Response", 
+            lines=15,
+            interactive=False,
+            placeholder="AI responses will appear here...",
+            show_copy_button=True
+        )
+        
+        gr.Markdown("---")
+        
+        # Input area at bottom
         with gr.Row():
             with gr.Column(scale=3):
-                # Main chatbot interface
-                chatbot = gr.Chatbot(
-                    label="Chat with Groq",
-                    height=500,
-                    show_copy_button=True
+                msg_input = gr.Textbox(
+                    label="✍️ Your Message", 
+                    placeholder="Type your message here...",
+                    lines=3,
+                    max_lines=10
                 )
-                
-                with gr.Row():
-                    msg_input = gr.Textbox(
-                        label="Your Message",
-                        placeholder="Ketik pesan Anda di sini...",
-                        scale=4
-                    )
-                    send_btn = gr.Button("Send 📤", variant="primary", scale=1)
-                
+            
             with gr.Column(scale=1):
-                # Settings panel
-                gr.Markdown("### ⚙️ Settings")
                 topic_input = gr.Textbox(
-                    label="Topic", 
+                    label="🏷️ Topic", 
                     value="general",
-                    placeholder="general"
+                    placeholder="conversation topic"
                 )
                 summarize_cb = gr.Checkbox(
                     label="📋 Summarize conversation",
                     value=False
                 )
-                clear_btn = gr.Button("🗑️ Clear Chat", variant="stop")
-                
-                # Stats
-                gr.Markdown("### 📊 Stats")
-                stats_output = gr.Textbox(
-                    label="Chat Stats",
-                    value=f"API Status: {'✅ Ready' if API_KEY else '❌ No Key'}",
-                    interactive=False,
-                    lines=3
-                )
+        
+        with gr.Row():
+            send_btn = gr.Button("📤 Send Message", variant="primary", scale=2)
+            clear_btn = gr.Button("🗑️ Clear Response", variant="secondary", scale=1)
         
         # Event handlers
         send_btn.click(
-            chat_with_groq,
-            inputs=[msg_input, chatbot, topic_input, summarize_cb],
-            outputs=[chatbot, msg_input]
+            process_message,
+            inputs=[msg_input, topic_input, summarize_cb],
+            outputs=[response_output, msg_input]
         )
         
-        msg_input.submit(  # Enter key support
-            chat_with_groq,
-            inputs=[msg_input, chatbot, topic_input, summarize_cb],
-            outputs=[chatbot, msg_input]
+        # Enter key support (Shift+Enter for new line, Enter to send)
+        msg_input.submit(
+            process_message,
+            inputs=[msg_input, topic_input, summarize_cb],
+            outputs=[response_output, msg_input]
         )
         
         clear_btn.click(
-            clear_chat,
-            outputs=[chatbot, stats_output]
+            lambda: ("", ""),
+            outputs=[response_output, msg_input]
         )
     
     with gr.Tab("📜 History"):
-        gr.Markdown("### View and manage your chat history")
+        gr.Markdown("### Chat History Management")
+        
         with gr.Row():
             history_topic = gr.Textbox(
-                label="Filter by Topic",
-                placeholder="Leave empty to see all"
+                label="🔍 Filter by Topic",
+                placeholder="Leave empty to see all conversations"
             )
             view_btn = gr.Button("👀 View History", variant="primary")
+            clear_history_btn = gr.Button("🗑️ Clear All History", variant="stop")
         
         history_output = gr.Textbox(
-            label="Chat History", 
-            lines=15,
-            interactive=False
+            label="📚 Chat History", 
+            lines=20,
+            interactive=False,
+            show_copy_button=True
         )
         
-        view_btn.click(
-            view_history, 
-            inputs=[history_topic], 
-            outputs=[history_output]
-        )
+        view_btn.click(view_history, inputs=[history_topic], outputs=[history_output])
+        clear_history_btn.click(clear_history, outputs=[history_output, response_output])
     
     with gr.Tab("🔧 API Tools"):
-        gr.Markdown(f"""
-        ### API Configuration
-        **Status:** {'✅ Connected' if API_KEY else '❌ No API Key Set'}  
-        **Endpoint:** `{API_URL}`  
-        **Available Models:** 
-        - `llama-3.3-70b-versatile` (Default)
-        - `llama3-8b-8192`
-        - `mixtral-8x7b-32768`
+        gr.Markdown("### API Configuration & Testing")
+        
+        # API Status
+        api_status = gr.Markdown(f"""
+        **🔌 API Status:** {'✅ Ready' if API_KEY else '❌ No API Key Set'}  
+        **🌐 Endpoint:** `{API_URL}`  
+        **🤖 Available Models:**
+        - `llama-3.3-70b-versatile` (Default - Most Capable)
+        - `llama3-8b-8192` (Fast)  
+        - `llama3-70b-8192` (Balanced)
+        - `mixtral-8x7b-32768` (Long Context)
         """)
         
-        curl_btn = gr.Button("📋 Generate cURL Example")
+        # cURL Generator
+        gr.Markdown("### 📋 Generate cURL Command")
+        curl_btn = gr.Button("📋 Generate cURL Example", variant="primary")
         curl_output = gr.Code(
             label="cURL Command", 
-            language="shell",
-            lines=8
+            language="bash",
+            lines=8,
+            show_copy_button=True
         )
         curl_btn.click(manual_curl_example, outputs=[curl_output])
         
+        # Setup Instructions
         if not API_KEY:
             gr.Markdown("""
-            ### ⚠️ Setup Instructions
-            1. Get your API key from [Groq Console](https://console.groq.com/)
-            2. Set environment variable: `export GROQ_API_KEY="your-key-here"`
-            3. Restart the application
+            ### ⚠️ Setup Required
+            
+            **To use this interface:**
+            1. 🔑 Get your API key from [Groq Console](https://console.groq.com/)
+            2. 💻 Set environment variable:
+               ```bash
+               export GROQ_API_KEY="your-groq-api-key-here"
+               ```
+            3. 🔄 Restart the application
+            
+            **Alternative:** Set in your system environment or `.env` file
             """)
+        else:
+            gr.Markdown("""
+            ### ✅ Ready to Chat!
+            
+            **Tips for better conversations:**
+            - 🎯 Use specific topics to organize conversations
+            - 📋 Enable summarization for long conversations  
+            - 🔄 Check history to review past interactions
+            - 💡 Try different models in the API for various needs
+            """)
+
+# Launch message
+print("🚀 Starting Groq Chat Interface...")
+print(f"🌐 Access at: http://localhost:7860")
+if API_KEY:
+    print("✅ API Key detected - Ready to chat!")
+else:
+    print("⚠️  No API Key found - Please set GROQ_API_KEY environment variable")
 
 if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0", 
         server_port=7860,
-        share=False  # Set True if you want public link
+        show_error=True
     )