From 32501d09053548c9556e976b2405db06bae4d1d5 Mon Sep 17 00:00:00 2001
From: Priyanshu Verma <priyanshuverma@outlook.in>
Date: Sat, 12 Oct 2024 04:55:58 +0000
Subject: [PATCH] feat: copy and delet actions

---
 api_routes.py          | 21 +++++++++++++++++
 static/js/chatbot.js   | 52 ++++++++++++++++++++++++++++++++++++++++++
 templates/chatbot.html | 12 +++++++++-
 3 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/api_routes.py b/api_routes.py
index 7b306aa..fe8806a 100644
--- a/api_routes.py
+++ b/api_routes.py
@@ -277,3 +277,24 @@ def api_anonymous_chatbot() -> Union[Response, tuple[Response, int]]:
             "updated_chats": chat_to_pass,
         }
     )
+
+
+@api_bp.route("/api/chat/<int:chat_id>/delete", methods=["POST"])
+@login_required
+def api_chat_delete(chat_id: int) -> Union[Response, tuple[Response, int]]:
+    chat: Chat = Chat.query.get_or_404(chat_id)
+    if chat.user_id != current_user.uid:
+        return (
+            jsonify({"error": "Unauthorized access."}),
+            403,
+        )
+    chat.query.filter_by(id=chat_id).delete()
+
+    db.session.commit()
+
+    return (
+        jsonify(
+            {"success": True, "message": "Message deleted.", "chat": chat.chatbot_id}
+        ),
+        200,
+    )
diff --git a/static/js/chatbot.js b/static/js/chatbot.js
index b0ef78f..3a92468 100644
--- a/static/js/chatbot.js
+++ b/static/js/chatbot.js
@@ -184,4 +184,56 @@ if (window.location.pathname.includes("update")) {
   }
 
   messageForm.addEventListener("submit", sendMessage);
+
+  // COPY BUTTON
+  var copyButtons = document.querySelectorAll(".copy-btn");
+
+  copyButtons.forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      var parentContainer = btn.closest(".flex.flex-col");
+
+      // Select the chat-response element inside the parent container
+      var responseElement = parentContainer.querySelector(".chat-response");
+      var responseText = responseElement.getAttribute("data-response");
+
+      if (responseText) {
+        console.log("Copied To clipboard");
+        navigator.clipboard.writeText(responseText);
+      }
+    });
+  });
+
+  // DELETE CHAT
+  var deleteButtons = document.querySelectorAll(".delete-btn");
+
+  deleteButtons.forEach(function (btn) {
+    btn.addEventListener("click", async function () {
+      var chatId = btn.getAttribute("data-id");
+
+      console.log(chatId);
+      try {
+        const response = await fetch(`/api/chat/${chatId}/delete`, {
+          method: "POST",
+        });
+
+        const data = await response.json(); // Assuming the server responds with JSON
+
+        if (!response.ok) {
+          throw new Error(data.message);
+        }
+
+        if (data.success) {
+          loadContent(`/chatbot/${data.chat}`);
+          setTimeout(scrollToBottom, 100);
+        } else {
+          // Handle errors returned by the server
+          document.getElementById("error").textContent =
+            data.message || "An error occurred.";
+        }
+      } catch (error) {
+        console.error("failed:", error);
+        document.getElementById("error").textContent = error.message;
+      }
+    });
+  });
 }
diff --git a/templates/chatbot.html b/templates/chatbot.html
index c4130ae..e0597f7 100644
--- a/templates/chatbot.html
+++ b/templates/chatbot.html
@@ -48,7 +48,17 @@ <h1 class="text-4xl font-extrabold dark:text-dark text-center">{{ chatbot.name }
                     {% endautoescape %}
                 </p>
                 <!-- Speak button aligned at the bottom -->
-                <div class="flex justify-end mt-2">
+                <div class="flex justify-end mt-2 space-x-2">
+                    <button
+                        class="bg-red-500 hover:bg-red-600 text-white rounded-full p-2 drop-shadow transition duration-200 flex items-center justify-center delete-btn"
+                        data-id="{{ chat.id }}" title="Delete">
+                        <i class="fa-solid fa-trash-alt"></i>
+                    </button>
+                    <button type="button"
+                        class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 drop-shadow transition duration-200 flex items-center justify-center copy-btn"
+                        title="Copy">
+                        <i class="fa-solid fa-copy"></i>
+                    </button>
                     <button type="button"
                         class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 drop-shadow transition duration-200 flex items-center justify-center speak-btn"
                         title="Speak">