feat: delete all chats

api_routes.py

@@ -277,3 +277,26 @@ def api_anonymous_chatbot() -> Union[Response, tuple[Response, int]]:
             "updated_chats": chat_to_pass,
         }
     )
+
+
+@api_bp.route("/api/chatbot/<int:chatbot_id>/clear", methods=["POST"])
+@login_required
+def api_clear_chats(chatbot_id: int) -> Union[Response, tuple[Response, int]]:
+    """API endpoint to clear messages of a chatbot."""
+
+    deleted_count = Chat.query.filter_by(
+        chatbot_id=chatbot_id,
+        user_id=current_user.uid,
+    ).delete()
+    # Commit the changes to the database
+    db.session.commit()
+
+    return (
+        jsonify(
+            {
+                "success": True,
+                "message": f"Deleted {deleted_count} messages for chatbot ID {chatbot_id}.",
+            }
+        ),
+        200,
+    )

static/js/chatbot.js

@@ -184,4 +184,30 @@ if (window.location.pathname.includes("update")) {
   }
 
   messageForm.addEventListener("submit", sendMessage);
+
+  // CLEAR CHATS
+  async function deleteChats(event) {
+    event.preventDefault(); // Prevent the default form submission
+    let confirmation = confirm("Are you sure you want to delete all chats?");
+    if (!confirmation) return;
+
+    try {
+      var form = event.target; // Get the form that triggered the event
+      const response = await fetch(form.action, { method: "POST" });
+
+      if (response.ok) {
+        const result = await response.json(); // Parse the JSON response
+
+        // Optionally update the UI or reload the content
+        loadContent(window.location.pathname); // Reload current content if needed
+      } else {
+        console.error("Failed delete chatbot:", response.statusText);
+      }
+    } catch (error) {
+      console.error("delete failed:", error);
+    }
+  }
+  document
+    .getElementById("delete-chats-form")
+    .addEventListener("submit", deleteChats);
 }

templates/chatbot.html

@@ -6,19 +6,30 @@
     class="flex flex-col border-x-2 border-lighter dark:border-darker max-w-7xl mx-auto rounded-sm dark:bg-dark bg-light dark:text-dark h-screen">
     <div class="flex items-center justify-between m-3">
         <div class="flex items-center space-x-2">
+            <a href="{{ url_for('routes.dashboard') }}" onclick="navigate(event, '/dashboard')" class="block mt-2">
+                <button type="button"
+                    class="shadow bg-blue-500 text-white rounded-full  transition-colors hover:bg-blue-600">
+                    <svg class="h-10 w-10 p-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M15 18l-6-6 6-6"></path>
+                    </svg>
+                </button>
+            </a>
             <img src="{{ chatbot.avatar }}" alt="{{ chatbot.name }}'s avatar"
                 class="w-10 h-10 border rounded-full dark:border-darker mr-3">
             <h1 class="text-4xl font-extrabold dark:text-dark text-center">{{ chatbot.name }}</h1>
         </div>
-        <a href="{{ url_for('routes.dashboard') }}" onclick="navigate(event, '/dashboard')" class="block mb-4">
-            <button type="button"
-                class="shadow bg-blue-500 text-white rounded-full  transition-colors hover:bg-blue-600">
-                <svg class="h-10 w-10 p-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M15 18l-6-6 6-6"></path>
-                </svg>
-            </button>
-        </a>
+        <div class="flex items-center justify-center">
+
+
+            <form id="delete-chats-form" action="/api/chatbot/{{ chatbot.id }}/clear">
+                <button type="submit"
+                    class="text-red-500 hover:text-red-600 transition duration-300 p-2 rounded hover:bg-red-100 dark:hover:bg-red-700/10 dark:text-red-400 dark:hover:text-red-300"
+                    title="Delete">
+                    <i class="fas fa-trash-alt"></i>
+                </button>
+            </form>
+        </div>
     </div>
     <!-- Separator Line -->
     <hr