Implement document deletion functionality in KnowledgeActionsDropdown

- Added a delete confirmation dialog to the KnowledgeActionsDropdown component.
- Integrated useDeleteDocument mutation for handling document deletion.
- Updated the dropdown to pass the filename prop for targeted deletions.
- Enhanced user feedback with success and error messages upon deletion.

frontend/components/knowledge-actions-dropdown.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { EllipsisVertical } from "lucide-react";
+import { useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,18 +9,59 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "./ui/button";
+import { DeleteConfirmationDialog } from "./confirmation-dialog";
+import { useDeleteDocument } from "@/app/api/mutations/useDeleteDocument";
+import { toast } from "sonner";
 
-export function KnowledgeActionsDropdown() {
+interface KnowledgeActionsDropdownProps {
-  return (
+  filename: string;
-    <DropdownMenu>
-      <DropdownMenuTrigger>
-        <Button variant="ghost" className="hover:bg-transparent">
-          <EllipsisVertical className="h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent side="right" sideOffset={-10}>
-        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
 }
+
+export const KnowledgeActionsDropdown = ({
+  filename,
+}: KnowledgeActionsDropdownProps) => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const deleteDocumentMutation = useDeleteDocument();
+
+  const handleDelete = async () => {
+    try {
+      await deleteDocumentMutation.mutateAsync({ filename });
+      toast.success(`Successfully deleted "${filename}"`);
+      setShowDeleteDialog(false);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete document"
+      );
+    }
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="ghost" className="hover:bg-transparent">
+            <EllipsisVertical className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="right" sideOffset={-10}>
+          <DropdownMenuItem
+            className="text-destructive focus:text-destructive"
+            onClick={() => setShowDeleteDialog(true)}
+          >
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DeleteConfirmationDialog
+        open={showDeleteDialog}
+        onOpenChange={setShowDeleteDialog}
+        title="Delete Document"
+        description={`Are you sure you want to delete "${filename}"? This will remove all chunks and data associated with this document. This action cannot be undone.`}
+        confirmText="Delete"
+        onConfirm={handleDelete}
+        isLoading={deleteDocumentMutation.isPending}
+      />
+    </>
+  );
+};

frontend/src/app/api/mutations/useDeleteDocument.ts

@@ -0,0 +1,45 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+interface DeleteDocumentRequest {
+  filename: string;
+}
+
+interface DeleteDocumentResponse {
+  success: boolean;
+  deleted_chunks: number;
+  filename: string;
+  message: string;
+}
+
+const deleteDocument = async (
+  data: DeleteDocumentRequest
+): Promise<DeleteDocumentResponse> => {
+  const response = await fetch("/api/documents/delete-by-filename", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || "Failed to delete document");
+  }
+
+  return response.json();
+};
+
+export const useDeleteDocument = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteDocument,
+    onSuccess: () => {
+      // Invalidate and refetch search queries to update the UI
+      queryClient.invalidateQueries({ queryKey: ["search"] });
+    },
+  });
+};

frontend/src/app/knowledge/page.tsx

@@ -133,8 +133,8 @@ function SearchPage() {
       },
     },
     {
-      cellRenderer: () => {
+      cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
-        return <KnowledgeActionsDropdown />;
+        return <KnowledgeActionsDropdown filename={data?.filename || ""} />;
       },
       cellStyle: {
         alignItems: "center",