Update app.py

app.py

@@ -2,12 +2,14 @@ import gradio as gr
 import os
 from groq import Groq
 
-# Initialize the Groq client
-# Retrieve API key from Colab's userdata
-os.environ["GROQ_API_KEY"] = userdata.get('ChatBot_API')
-client = Groq(api_key=os.environ.get("GROQ_API_KEY"))
+# Initialize the Groq client via Hugging Face Secrets
+api_key = os.environ.get("GROQ_API_KEY")
+if not api_key:
+    raise ValueError("GROQ_API_KEY environment variable not found. Please add it as a Secret in your Space Settings.")
 
-# Custom CSS to give it a sleek, modern look
+client = Groq(api_key=api_key)
+
+# Custom CSS for modern styling
 custom_css = """
 .gradio-container { background-color: #0b0f19; font-family: 'Inter', sans-serif; }
 #title-header { text-align: center; margin-bottom: 20px; }
@@ -18,20 +20,31 @@ custom_css = """
 
 def chat_stream(message, history, model, system_prompt, temperature, max_tokens):
     """
-    Custom chat function built for gr.Chatbot component format.
-    history is a list of dicts: [{"role": "user", "content": "..."}, ...]
+    Handles streaming responses using the standard history list layout.
     """
-    # 1. Start with the custom system prompt
+    if not message.strip():
+        yield history
+        return
+
+    # 1. Initialize message list with system prompt
     messages = [{"role": "system", "content": system_prompt}]
 
-    # 2. Append the conversation history
+    # 2. Add conversation history
     for turn in history:
-        messages.append({"role": turn["role"], "content": turn["content"]})
+        # turn is typically [user_message, assistant_message]
+        if turn[0]:
+            messages.append({"role": "user", "content": turn[0]})
+        if turn[1]:
+            messages.append({"role": "assistant", "content": turn[1]})
 
-    # 3. Append current user message
+    # 3. Add the current user message
     messages.append({"role": "user", "content": message})
+    
+    # 4. Append user message to history visually before generating
+    history.append([message, ""])
+    yield history
 
-    # 4. Stream response from Groq
+    # 5. Stream from Groq
     try:
         stream = client.chat.completions.create(
             model=model,
@@ -45,16 +58,17 @@ def chat_stream(message, history, model, system_prompt, temperature, max_tokens)
         for chunk in stream:
             if chunk.choices[0].delta.content:
                 partial_response += chunk.choices[0].delta.content
-                yield partial_response
+                # Update the last assistant turn in history
+                history[-1][1] = partial_response
+                yield history
 
     except Exception as e:
-        yield f"⚠️ Error connecting to Groq: {str(e)}"
+        history[-1][1] = f"⚠️ Error connecting to Groq: {str(e)}"
+        yield history
 
+# Build the layout manually without gr.ChatInterface macros
+with gr.Blocks() as demo:
 
-# Building the Interactive Interface using Blocks
-with gr.Blocks() as demo: # Removed css and theme from Blocks constructor
-
-    # Title Section - Replaced gr.Div with gr.Markdown
     gr.Markdown("# 🚀 Personal AI ChatBot", elem_id="title-header")
     gr.Markdown("A fully customizable, hyper-fast LLM workspace.")
 
@@ -94,27 +108,29 @@ with gr.Blocks() as demo: # Removed css and theme from Blocks constructor
 
         # --- RIGHT COLUMN: CHAT INTERFACE ---
         with gr.Column(scale=3):
-            chatbot = gr.Chatbot(
-                elem_classes="chat-window"
-                # Removed bubble_full_width as it's not a valid argument for gr.Chatbot
-            )
+            chatbot = gr.Chatbot(elem_classes="chat-window")
 
-            # Textbox and setup for user interaction
             msg_input = gr.Textbox(
                 placeholder="Type your message here and press Enter...",
                 show_label=False,
                 container=False
             )
+            
+            clear_btn = gr.Button("🗑️ Clear Conversation")
 
-            # Wrap everything into Gradio's chat system
-            gr.ChatInterface(
+            # Native component wiring
+            msg_input.submit(
                 fn=chat_stream,
-                chatbot=chatbot,
-                textbox=msg_input,
-                additional_inputs=[model_select, system_input, temp_slider, tokens_slider]
-                # Removed type="messages" as it's not a valid argument for gr.ChatInterface
+                inputs=[msg_input, chatbot, model_select, system_input, temp_slider, tokens_slider],
+                outputs=[chatbot]
+            ).then(
+                fn=lambda: "", 
+                inputs=None, 
+                outputs=[msg_input]
             )
+            
+            # Clear chat utility logic
+            clear_btn.click(fn=lambda: [], inputs=None, outputs=[chatbot])
 
 if __name__ == "__main__":
-    # Moved css and theme to launch()
     demo.launch(css=custom_css, theme=gr.themes.Soft())