Update app.py

app.py

@@ -129,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": [
@@ -144,17 +144,20 @@ def manual_curl_example():
 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("# 🔍 Groq API Debug Tool with Memory")
     
     with gr.Tab("Chat with Memory"):
-        gr.Markdown("Chat with Grok, maintain history, and summarize by topic")
+        gr.Markdown("Chat with Groq, maintain history, and summarize by topic")
         
         chatbot = gr.Chatbot(
             label="Conversation",
             container=True,
             height=500,
-            elem_classes="chatbot-container"
+            elem_classes="chatbot-container",
+            bubble_full_width=False
         )
         with gr.Row(elem_classes="input-container"):
             chat_input = gr.Textbox(
@@ -181,8 +184,7 @@ with gr.Blocks(title="Grok Debug with Memory", css="""
         chat_button.click(
             groq_with_memory,
             inputs=[chat_input, topic_input, summarize_checkbox],
-            outputs=[chatbot],
-            _js="() => { setTimeout(() => document.querySelector('.chatbot-container').scrollTop = document.querySelector('.chatbot-container').scrollHeight, 100); }"
+            outputs=[chatbot]
         ).then(
             update_chatbot_display,
             outputs=[chatbot]