Update app.py

app.py

@@ -33,9 +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({"role": "user", "content": user_input})
-    history.append({"role": "assistant", "content": bot_response})
-    return history, bot_response
+    history.append((f"You: {user_input}", f"Bot: {bot_response}"))
+    return history, history
 
 # Gradio Interface with enhanced styling
 chat_interface = gr.Blocks(css="""
@@ -53,8 +52,8 @@ body {
     100% { background-position: 0% 50%; }
 }
 button {
-    background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
-    color: #333;
+    background: linear-gradient(90deg, #6a11cb, #2575fc);
+    color: white;
     padding: 0.8rem 1.5rem;
     font-size: 1rem;
     font-weight: bold;
@@ -64,8 +63,8 @@ button {
     transition: transform 0.2s ease, background 0.2s ease;
 }
 button:hover {
-    background: linear-gradient(90deg, #c2e9fb, #a1c4fd);
-    transform: scale(1.05);
+    background: linear-gradient(90deg, #2575fc, #6a11cb);
+    transform: scale(1.1);
 }
 header {
     text-align: center;
@@ -85,6 +84,19 @@ header {
     max-height: 300px;
     overflow-y: auto;
 }
+.copy-btn {
+    margin-left: 5px;
+    background: #ff7eb3;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+.copy-btn:hover {
+    background: #ff4f81;
+}
 """)
 
 with chat_interface:
@@ -101,33 +113,27 @@ with chat_interface:
     with gr.Row():
         send_button = gr.Button("Send")
     with gr.Row():
-        chatbot_output = gr.Chatbot(label="Chat History", type="messages")
-    with gr.Row():
-        copy_button = gr.Button("Copy Response")
-    with gr.Row():
-        copy_message = gr.HTML("")  # To display the confirmation message
+        with gr.Column() as chat_container:
+            chatbot_output = gr.Chatbot(label="Chat History")
+
+    # Add copy-to-clipboard button
+    def add_copy_buttons(history):
+        enhanced_history = []
+        for user, bot in history:
+            copy_button = (
+                f'<button class="copy-btn" onclick="navigator.clipboard.writeText(`{bot}`)">Copy</button>'
+            )
+            bot_with_copy = f"{bot} {copy_button}"
+            enhanced_history.append((user, bot_with_copy))
+        return enhanced_history
 
     # Add functionality to handle interactions
     def handle_chat(user_input, category, history):
         if not user_input.strip():
             return history, history
-        updated_history, bot_response = chatbot(user_input, category, history)
-        return updated_history, updated_history
-
-    def handle_copy(last_bot_response):
-        # Copy the last bot response to clipboard using the JavaScript in Gradio.
-        return gr.HTML(f"""
-        <script>
-            const copyText = '{last_bot_response}';
-            navigator.clipboard.writeText(copyText)
-                .then(() => {{
-                    alert('Response copied to clipboard!');
-                }})
-                .catch(() => {{
-                    alert('Failed to copy!');
-                }});
-        </script>
-        """), "Response copied to clipboard!"
+        updated_history, _ = chatbot(user_input, category, history)
+        enhanced_history = add_copy_buttons(updated_history)
+        return enhanced_history, enhanced_history
 
     send_button.click(
         handle_chat,
@@ -135,10 +141,4 @@ with chat_interface:
         outputs=[chatbot_output, chatbot_output]
     )
 
-    copy_button.click(
-        handle_copy,
-        inputs=[chatbot_output],
-        outputs=[copy_message]  # Display the copy confirmation message
-    )
-
 chat_interface.launch()