Update app.py

app.py

@@ -52,7 +52,7 @@ def clear_chat():
     return [], ""
 
 # =====================================================
-# CSS (Light/Dark + Gradio 6 UI FIX)
+# CSS (Light/Dark + UI FIX + Hover Buttons)
 # =====================================================
 custom_css = """
 /* ---------- Color System ---------- */
@@ -129,6 +129,7 @@ h1 {
   overflow-wrap: break-word !important;
 
   box-sizing: border-box !important;
+  position: relative;
 }
 
 /* 🔧 REMOVE BLACK GHOST BLOCKS */
@@ -164,6 +165,29 @@ h1 {
   border-bottom-left-radius: 4px;
 }
 
+/* ---------- Hover Copy/Edit ---------- */
+.msg-actions {
+  display: none;
+  gap: 6px;
+  position: absolute;
+  bottom: -18px;
+  right: 6px;
+}
+
+.message:hover .msg-actions {
+  display: flex;
+}
+
+.msg-actions button {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  border: none;
+  background: #00000055;
+  color: white;
+  cursor: pointer;
+}
+
 /* ---------- Input ---------- */
 textarea {
   background: var(--surface) !important;
@@ -219,7 +243,7 @@ with gr.Blocks(title="GROQ AI CHATBOT") as demo:
         "<div class='subtitle'>Fast, reliable AI powered by Groq & LLaMA-3.3</div>"
     )
 
-    chatbot = gr.Chatbot(elem_classes="chatbot")
+    chatbot = gr.Chatbot(elem_classes="chatbot", show_copy_button=False)
     state = gr.State([])
 
     with gr.Row():
@@ -235,8 +259,25 @@ with gr.Blocks(title="GROQ AI CHATBOT") as demo:
     txt.submit(chat_with_groq, [txt, state], [chatbot, txt])
     clear.click(clear_chat, outputs=[chatbot, txt], show_progress=False)
 
+    gr.HTML("""
+    <script>
+    document.addEventListener("click", function(e){
+      if(e.target.classList.contains("copy-btn")){
+        const msg = e.target.closest(".message").innerText;
+        navigator.clipboard.writeText(msg);
+      }
+      if(e.target.classList.contains("edit-btn")){
+        const msg = e.target.closest(".message").innerText;
+        const box = document.querySelector("textarea");
+        box.value = msg;
+        box.focus();
+      }
+    });
+    </script>
+    """)
+
 # =====================================================
-# Launch (Gradio 6)
+# Launch
 # =====================================================
 if __name__ == "__main__":
     demo.launch(css=custom_css)