Update app.py

app.py

@@ -33,7 +33,8 @@ def get_groq_response(message, category):
 # Chatbot function
 def chatbot(user_input, category, history=[]):
     bot_response = get_groq_response(user_input, category)
-    history.append((f"You: {user_input}", f"Bot: {bot_response}"))
+    history.append({"role": "user", "content": user_input})
+    history.append({"role": "assistant", "content": bot_response})
     return history, history
 
 # Gradio Interface with enhanced styling
@@ -100,20 +101,23 @@ with chat_interface:
     with gr.Row():
         send_button = gr.Button("Send")
     with gr.Row():
-        chatbot_output = gr.Chatbot(label="Chat History")
+        chatbot_output = gr.Chatbot(label="Chat History", type="messages")
     with gr.Row():
-        copy_button = gr.Button("Copy Response")
-    
-    # Add functionality to handle interactions
-    def handle_chat(user_input, category, history):
-        if not user_input.strip():
-            return history, history
-        updated_history, _ = chatbot(user_input, category, history)
-        return updated_history, updated_history
-
-    # JavaScript for copying the last bot response
-    copy_js = """
-        function copyLastResponse() {
+        # Custom HTML button
+        gr.HTML("""
+        <button id="copy-btn" style="
+            background: linear-gradient(90deg, #f9f9f9, #e6e6e6);
+            color: #555;
+            padding: 0.8rem 1.5rem;
+            font-size: 1rem;
+            font-weight: bold;
+            border-radius: 20px;
+            border: none;
+            cursor: pointer;
+            transition: transform 0.2s ease, background 0.2s ease;
+        ">Copy Response</button>
+        <script>
+        document.getElementById('copy-btn').addEventListener('click', () => {
             const responses = document.querySelectorAll('.bot-message');
             if (responses.length > 0) {
                 const lastResponse = responses[responses.length - 1].innerText;
@@ -123,16 +127,15 @@ with chat_interface:
             } else {
                 alert('No bot response to copy!');
             }
-        }
-    """
+        });
+        </script>
+        """)
 
+    # Add functionality to handle interactions
     send_button.click(
-        handle_chat,
+        chatbot,
         inputs=[user_input, category_dropdown, chatbot_output],
         outputs=[chatbot_output, chatbot_output]
     )
 
-    # Attach the copy button functionality
-    copy_button.click(None, _js=copy_js)
-
 chat_interface.launch()