Update app.py

app.py

@@ -3,124 +3,115 @@ import gradio as gr
 from groq import Groq
 
 # 1. Setup API Client
-# Ensure GROQ_API_KEY is set in your Space Settings > Secrets
 api_key = os.environ.get("GROQ_API_KEY")
 client = Groq(api_key=api_key)
 
-# 2. Responsive UI Styling
+# 2. SEPARATED CSS: Distinct styles for Chatbot and Sidebar
 custom_css = """
-.gradio-container { max-height: 100vh !important; overflow: hidden !important; }
+/* Container & Layout */
+.gradio-container { max-width: 1200px; margin: auto; }
+
+/* Chatbot Panel Styles */
 #chatbot-window { 
-     height: 65vh !important; 
-     border-radius: 12px; 
-     border: 1px solid #e0e0e0; 
-     background: white; 
+    height: 600px !important; 
+    border-radius: 12px; 
+    border: 1px solid #e0e0e0; 
+    background-color: #ffffff;
+}
+
+/* Sidebar Specific Styles */
+.sidebar-panel { 
+    background-color: rgba(128, 128, 128, 0.05); 
+    padding: 20px !important; 
+    border-radius: 12px;
+    border: 1px solid #eee;
+}
+
+/* LinkedIn Icon Animation */
+.linkedin-icon:hover { 
+    transform: scale(1.1) rotate(5deg); 
+    transition: transform 0.3s ease; 
 }
 """
 
 # 3. Secure Chat Logic
 def chat_with_groq(message, history, model, temperature, system_prompt):
-    """
-    Cleans history to remove Gradio-specific metadata that causes 400 errors.
-    """
-    # Initialize with System Prompt
     cleaned_messages = [{"role": "system", "content": system_prompt}]
-        
-    # Scrub history for clean role/content pairs
     for msg in history:
-        cleaned_messages.append({
-            "role": msg["role"],
-            "content": msg["content"]
-        })
-        
-    # Add current user prompt
+        cleaned_messages.append({"role": msg["role"], "content": msg["content"]})
     cleaned_messages.append({"role": "user", "content": message})
-    
+
     try:
-        # High-speed inference via Groq
         response = client.chat.completions.create(
             model=model, 
             messages=cleaned_messages, 
             temperature=temperature, 
             stream=True
         )
-                
         partial_message = ""
         for chunk in response:
             if chunk.choices[0].delta.content:
                 partial_message += chunk.choices[0].delta.content
                 yield partial_message
-                    
     except Exception as e:
         yield f"⚠️ API Error: {str(e)}"
 
-# 4. Build the Interface
+# 4. Interface Setup
 with gr.Blocks() as demo:
     gr.Markdown("# ⚡ Groq Professional Studio")
-    gr.Markdown("Everything is running smoothly on my end. Please let me know if you encounter any errors!")
-        
+    
     with gr.Row():
-        # Main Interaction Area
+        # --- MAIN CHATBOT COLUMN ---
         with gr.Column(scale=4):
             chatbot = gr.Chatbot(elem_id="chatbot-window") 
             with gr.Row():
-                msg_input = gr.Textbox(
-                    placeholder="Ask me anything...", 
-                    container=False, 
-                    scale=9
-                )
+                msg_input = gr.Textbox(placeholder="Ask me anything...", container=False, scale=9)
                 submit_btn = gr.Button("Send", variant="primary", scale=1)
         
-        # Settings Sidebar
-        
-        with gr.Column(scale=1):
+        # --- SETTINGS SIDEBAR COLUMN ---
+        with gr.Column(scale=1, elem_classes="sidebar-panel"):
             gr.Markdown("### ⚙️ Settings")
             model_choice = gr.Dropdown(
                 choices=["llama-3.3-70b-versatile", "llama-3.1-8b-instant"],
-                value="llama-3.3-70b-versatile", 
-                label="Select Model"
+                value="llama-3.3-70b-versatile", label="Select Model"
             )
             temp = gr.Slider(0.0, 1.0, 0.7, label="Temperature")
-            sys_msg = gr.Textbox(
-                value="You are a professional assistant.", 
-                label="System Prompt", 
-                lines=3
-            )
+            sys_msg = gr.Textbox(value="You are a professional assistant.", label="System Prompt", lines=3)
             clear = gr.Button("Clear Chat", variant="stop")
-            # Footer Section with LinkedIn Icon
-    
 
-    # --- UI Event Flow ---
+            # LINKEDIN OPTION: Added directly below Clear Chat inside the Sidebar
+            gr.HTML("""
+                <div style="text-align: center; margin-top: 25px; padding-top: 15px; border-top: 1px solid #ddd;">
+                    <p style="font-size: 0.85em; color: #666; margin-bottom: 10px;"><b>Developer Support</b></p>
+                    <a href="https://www.linkedin.com/in/YOUR_LINKEDIN_USERNAME" target="_blank" style="text-decoration: none;">
+                        <svg class="linkedin-icon" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24" fill="#0077b5">
+                            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                        </svg>
+                    </a>
+                    <p style="font-size: 0.75em; color: #888; margin-top: 5px;">Hassan Naseer | NUTECH</p>
+                </div>
+            """)
+
+    # --- Event Handling ---
     def user_turn(msg, hist):
-        # Update UI state with user message
         hist.append({"role": "user", "content": msg})
         return "", hist
 
     def bot_turn(hist, m, t, s):
-        # Get response for the last user message
         user_msg = hist[-1]["content"]
         gen = chat_with_groq(user_msg, hist[:-1], m, t, s)
-                
         hist.append({"role": "assistant", "content": ""})
         for chunk in gen:
             hist[-1]["content"] = chunk
             yield hist
 
-    # Link Input Actions
     msg_input.submit(user_turn, [msg_input, chatbot], [msg_input, chatbot], queue=False).then(
         bot_turn, [chatbot, model_choice, temp, sys_msg], chatbot
     )
     submit_btn.click(user_turn, [msg_input, chatbot], [msg_input, chatbot], queue=False).then(
         bot_turn, [chatbot, model_choice, temp, sys_msg], chatbot
     )
-        
-    # Clear Workspace
     clear.click(lambda: [], None, chatbot, queue=False)
 
-# 5. Production Launch
 if __name__ == "__main__":
-    # Settings moved to launch() for Gradio 6 compatibility
-    demo.launch(
-        theme=gr.themes.Soft(primary_hue="blue"), 
-        css=custom_css
-    )
+    demo.launch(theme=gr.themes.Soft(primary_hue="blue"), css=custom_css)