made failed and processing files not accessible and deletable

This commit is contained in:
Lucas Oliveira 2025-10-02 18:00:09 -03:00
parent a8938bdf38
commit db715c122b

View file

@ -17,270 +17,280 @@ import "@/components/AgGrid/registerAgGridModules";
import "@/components/AgGrid/agGridStyles.css"; import "@/components/AgGrid/agGridStyles.css";
import { toast } from "sonner"; import { toast } from "sonner";
import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdown"; import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdown";
import { filterAccentClasses } from "@/components/knowledge-filter-panel";
import { StatusBadge } from "@/components/ui/status-badge"; import { StatusBadge } from "@/components/ui/status-badge";
import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog"; import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
import { useDeleteDocument } from "../api/mutations/useDeleteDocument"; import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
import { filterAccentClasses } from "@/components/knowledge-filter-panel";
// Function to get the appropriate icon for a connector type // Function to get the appropriate icon for a connector type
function getSourceIcon(connectorType?: string) { function getSourceIcon(connectorType?: string) {
switch (connectorType) { switch (connectorType) {
case "google_drive": case "google_drive":
return ( return (
<SiGoogledrive className="h-4 w-4 text-foreground flex-shrink-0" /> <SiGoogledrive className="h-4 w-4 text-foreground flex-shrink-0" />
); );
case "onedrive": case "onedrive":
return ( return (
<TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" /> <TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" />
); );
case "sharepoint": case "sharepoint":
return <Building2 className="h-4 w-4 text-foreground flex-shrink-0" />; return <Building2 className="h-4 w-4 text-foreground flex-shrink-0" />;
case "s3": case "s3":
return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />; return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />;
default: default:
return ( return (
<HardDrive className="h-4 w-4 text-muted-foreground flex-shrink-0" /> <HardDrive className="h-4 w-4 text-muted-foreground flex-shrink-0" />
); );
} }
} }
function SearchPage() { function SearchPage() {
const router = useRouter(); const router = useRouter();
const { isMenuOpen, files: taskFiles } = useTask(); const { isMenuOpen, files: taskFiles } = useTask();
const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } = const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
useKnowledgeFilter(); useKnowledgeFilter();
const [selectedRows, setSelectedRows] = useState<File[]>([]); const [selectedRows, setSelectedRows] = useState<File[]>([]);
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false); const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
const deleteDocumentMutation = useDeleteDocument(); const deleteDocumentMutation = useDeleteDocument();
const { data = [], isFetching } = useGetSearchQuery( const { data = [], isFetching } = useGetSearchQuery(
parsedFilterData?.query || "*", parsedFilterData?.query || "*",
parsedFilterData parsedFilterData,
); );
const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => { const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
gridRef.current?.api.setGridOption("quickFilterText", e.target.value); gridRef.current?.api.setGridOption("quickFilterText", e.target.value);
}; };
// Convert TaskFiles to File format and merge with backend results // Convert TaskFiles to File format and merge with backend results
const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => { const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => {
return { return {
filename: taskFile.filename, filename: taskFile.filename,
mimetype: taskFile.mimetype, mimetype: taskFile.mimetype,
source_url: taskFile.source_url, source_url: taskFile.source_url,
size: taskFile.size, size: taskFile.size,
connector_type: taskFile.connector_type, connector_type: taskFile.connector_type,
status: taskFile.status, status: taskFile.status,
}; };
}); });
const backendFiles = data as File[]; const backendFiles = data as File[];
const filteredTaskFiles = taskFilesAsFiles.filter((taskFile) => { const filteredTaskFiles = taskFilesAsFiles.filter((taskFile) => {
return ( return (
taskFile.status !== "active" && taskFile.status !== "active" &&
!backendFiles.some( !backendFiles.some(
(backendFile) => backendFile.filename === taskFile.filename (backendFile) => backendFile.filename === taskFile.filename,
) )
); );
}); });
// Combine task files first, then backend files // Combine task files first, then backend files
const fileResults = [...backendFiles, ...filteredTaskFiles]; const fileResults = [...backendFiles, ...filteredTaskFiles];
const gridRef = useRef<AgGridReact>(null); const gridRef = useRef<AgGridReact>(null);
const [columnDefs] = useState<ColDef<File>[]>([ const [columnDefs] = useState<ColDef<File>[]>([
{ {
field: "filename", field: "filename",
headerName: "Source", headerName: "Source",
checkboxSelection: true, checkboxSelection: (data) => (data?.data?.status || "active") === "active",
headerCheckboxSelection: true, headerCheckboxSelection: true,
initialFlex: 2, initialFlex: 2,
minWidth: 220, minWidth: 220,
cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => { cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
return ( return (
<button <div className="flex items-center overflow-hidden w-full">{((data?.status || "active") !== "active") &&
type="button" <div className="min-w-7"></div>
className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors text-left w-full" }
onClick={() => { <button
router.push( type="button"
`/knowledge/chunks?filename=${encodeURIComponent( className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors text-left flex-1 overflow-hidden"
data?.filename ?? "" onClick={() => {
)}` if ((data?.status || "active") !== "active") {
); return;
}} }
> router.push(
{getSourceIcon(data?.connector_type)} `/knowledge/chunks?filename=${encodeURIComponent(
<span className="font-medium text-foreground truncate"> data?.filename ?? "",
{value} )}`,
</span> );
</button> }}
); >
}, {getSourceIcon(data?.connector_type)}
}, <span className="font-medium text-foreground truncate">
{ {value}
field: "size", </span>
headerName: "Size", </button></div>
valueFormatter: (params) => );
params.value ? `${Math.round(params.value / 1024)} KB` : "-", },
}, },
{ {
field: "mimetype", field: "size",
headerName: "Type", headerName: "Size",
}, valueFormatter: (params) =>
{ params.value ? `${Math.round(params.value / 1024)} KB` : "-",
field: "owner", },
headerName: "Owner", {
valueFormatter: (params) => field: "mimetype",
params.data?.owner_name || params.data?.owner_email || "—", headerName: "Type",
}, },
{ {
field: "chunkCount", field: "owner",
headerName: "Chunks", headerName: "Owner",
valueFormatter: (params) => params.data?.chunkCount?.toString() || "-", valueFormatter: (params) =>
}, params.data?.owner_name || params.data?.owner_email || "—",
{ },
field: "avgScore", {
headerName: "Avg score", field: "chunkCount",
initialFlex: 0.5, headerName: "Chunks",
cellRenderer: ({ value }: CustomCellRendererProps<File>) => { valueFormatter: (params) => params.data?.chunkCount?.toString() || "-",
return ( },
<span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded"> {
{value?.toFixed(2) ?? "-"} field: "avgScore",
</span> headerName: "Avg score",
); initialFlex: 0.5,
}, cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
}, return (
{ <span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded">
field: "status", {value?.toFixed(2) ?? "-"}
headerName: "Status", </span>
cellRenderer: ({ data }: CustomCellRendererProps<File>) => { );
// Default to 'active' status if no status is provided },
const status = data?.status || "active"; },
return <StatusBadge status={status} />; {
}, field: "status",
}, headerName: "Status",
{ cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
cellRenderer: ({ data }: CustomCellRendererProps<File>) => { // Default to 'active' status if no status is provided
return <KnowledgeActionsDropdown filename={data?.filename || ""} />; const status = data?.status || "active";
}, return <StatusBadge status={status} />;
cellStyle: { },
alignItems: "center", },
display: "flex", {
justifyContent: "center", cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
padding: 0, const status = data?.status || "active";
}, if (status !== "active") {
colId: "actions", return null;
filter: false, }
minWidth: 0, return <KnowledgeActionsDropdown filename={data?.filename || ""} />;
width: 40, },
resizable: false, cellStyle: {
sortable: false, alignItems: "center",
initialFlex: 0, display: "flex",
}, justifyContent: "center",
]); padding: 0,
},
colId: "actions",
filter: false,
minWidth: 0,
width: 40,
resizable: false,
sortable: false,
initialFlex: 0,
},
]);
const defaultColDef: ColDef<File> = { const defaultColDef: ColDef<File> = {
resizable: false, resizable: false,
suppressMovable: true, suppressMovable: true,
initialFlex: 1, initialFlex: 1,
minWidth: 100, minWidth: 100,
}; };
const onSelectionChanged = useCallback(() => { const onSelectionChanged = useCallback(() => {
if (gridRef.current) { if (gridRef.current) {
const selectedNodes = gridRef.current.api.getSelectedRows(); const selectedNodes = gridRef.current.api.getSelectedRows();
setSelectedRows(selectedNodes); setSelectedRows(selectedNodes);
} }
}, []); }, []);
const handleBulkDelete = async () => { const handleBulkDelete = async () => {
if (selectedRows.length === 0) return; if (selectedRows.length === 0) return;
try { try {
// Delete each file individually since the API expects one filename at a time // Delete each file individually since the API expects one filename at a time
const deletePromises = selectedRows.map((row) => const deletePromises = selectedRows.map((row) =>
deleteDocumentMutation.mutateAsync({ filename: row.filename }) deleteDocumentMutation.mutateAsync({ filename: row.filename }),
); );
await Promise.all(deletePromises); await Promise.all(deletePromises);
toast.success( toast.success(
`Successfully deleted ${selectedRows.length} document${ `Successfully deleted ${selectedRows.length} document${
selectedRows.length > 1 ? "s" : "" selectedRows.length > 1 ? "s" : ""
}` }`,
); );
setSelectedRows([]); setSelectedRows([]);
setShowBulkDeleteDialog(false); setShowBulkDeleteDialog(false);
// Clear selection in the grid // Clear selection in the grid
if (gridRef.current) { if (gridRef.current) {
gridRef.current.api.deselectAll(); gridRef.current.api.deselectAll();
} }
} catch (error) { } catch (error) {
toast.error( toast.error(
error instanceof Error error instanceof Error
? error.message ? error.message
: "Failed to delete some documents" : "Failed to delete some documents",
); );
} }
}; };
return ( return (
<div <div
className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${ className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
isMenuOpen && isPanelOpen isMenuOpen && isPanelOpen
? "md:right-[704px]" ? "md:right-[704px]"
: // Both open: 384px (menu) + 320px (KF panel) : // Both open: 384px (menu) + 320px (KF panel)
isMenuOpen isMenuOpen
? "md:right-96" ? "md:right-96"
: // Only menu open: 384px : // Only menu open: 384px
isPanelOpen isPanelOpen
? "md:right-80" ? "md:right-80"
: // Only KF panel open: 320px : // Only KF panel open: 320px
"md:right-6" // Neither open: 24px "md:right-6" // Neither open: 24px
}`} }`}
> >
<div className="flex-1 flex flex-col min-h-0 px-6 py-6"> <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-lg font-semibold">Project Knowledge</h2> <h2 className="text-lg font-semibold">Project Knowledge</h2>
<KnowledgeDropdown variant="button" /> <KnowledgeDropdown variant="button" />
</div> </div>
{/* Search Input Area */} {/* Search Input Area */}
<div className="flex-shrink-0 mb-6 xl:max-w-[75%]"> <div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
<form className="flex gap-3"> <form className="flex gap-3">
<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]"> <div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
{selectedFilter?.name && ( {selectedFilter?.name && (
<div <div
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${ className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
filterAccentClasses[parsedFilterData?.color || "zinc"] filterAccentClasses[parsedFilterData?.color || "zinc"]
}`} }`}
> >
<span className="truncate">{selectedFilter?.name}</span> <span className="truncate">{selectedFilter?.name}</span>
<X <X
aria-label="Remove filter" aria-label="Remove filter"
className="h-4 w-4 flex-shrink-0 cursor-pointer" className="h-4 w-4 flex-shrink-0 cursor-pointer"
onClick={() => setSelectedFilter(null)} onClick={() => setSelectedFilter(null)}
/> />
</div> </div>
)} )}
<Search <Search
className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground" className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
strokeWidth={1.5} strokeWidth={1.5}
/> />
<input <input
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono" className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
name="search-query" name="search-query"
id="search-query" id="search-query"
type="text" type="text"
placeholder="Search your documents..." placeholder="Search your documents..."
onChange={handleTableSearch} onChange={handleTableSearch}
/> />
</div> </div>
{/* <Button {/* <Button
type="submit" type="submit"
variant="outline" variant="outline"
className="rounded-lg p-0 flex-shrink-0" className="rounded-lg p-0 flex-shrink-0"
@ -291,8 +301,8 @@ function SearchPage() {
<Search className="h-4 w-4" /> <Search className="h-4 w-4" />
)} )}
</Button> */} </Button> */}
{/* //TODO: Implement sync button */} {/* //TODO: Implement sync button */}
{/* <Button {/* <Button
type="button" type="button"
variant="outline" variant="outline"
className="rounded-lg flex-shrink-0" className="rounded-lg flex-shrink-0"
@ -300,69 +310,69 @@ function SearchPage() {
> >
Sync Sync
</Button> */} </Button> */}
{selectedRows.length > 0 && ( {selectedRows.length > 0 && (
<Button <Button
type="button" type="button"
variant="destructive" variant="destructive"
className="rounded-lg flex-shrink-0" className="rounded-lg flex-shrink-0"
onClick={() => setShowBulkDeleteDialog(true)} onClick={() => setShowBulkDeleteDialog(true)}
> >
<Trash2 className="h-4 w-4" /> Delete <Trash2 className="h-4 w-4" /> Delete
</Button> </Button>
)} )}
</form> </form>
</div> </div>
<AgGridReact <AgGridReact
className="w-full overflow-auto" className="w-full overflow-auto"
columnDefs={columnDefs} columnDefs={columnDefs}
defaultColDef={defaultColDef} defaultColDef={defaultColDef}
loading={isFetching} loading={isFetching}
ref={gridRef} ref={gridRef}
rowData={fileResults} rowData={fileResults}
rowSelection="multiple" rowSelection="multiple"
rowMultiSelectWithClick={false} rowMultiSelectWithClick={false}
suppressRowClickSelection={true} suppressRowClickSelection={true}
getRowId={(params) => params.data.filename} getRowId={(params) => params.data.filename}
domLayout="normal" domLayout="normal"
onSelectionChanged={onSelectionChanged} onSelectionChanged={onSelectionChanged}
noRowsOverlayComponent={() => ( noRowsOverlayComponent={() => (
<div className="text-center pb-[45px]"> <div className="text-center pb-[45px]">
<div className="text-lg text-primary font-semibold"> <div className="text-lg text-primary font-semibold">
No knowledge No knowledge
</div> </div>
<div className="text-sm mt-1 text-muted-foreground"> <div className="text-sm mt-1 text-muted-foreground">
Add files from local or your preferred cloud. Add files from local or your preferred cloud.
</div> </div>
</div> </div>
)} )}
/> />
</div> </div>
{/* Bulk Delete Confirmation Dialog */} {/* Bulk Delete Confirmation Dialog */}
<DeleteConfirmationDialog <DeleteConfirmationDialog
open={showBulkDeleteDialog} open={showBulkDeleteDialog}
onOpenChange={setShowBulkDeleteDialog} onOpenChange={setShowBulkDeleteDialog}
title="Delete Documents" title="Delete Documents"
description={`Are you sure you want to delete ${ description={`Are you sure you want to delete ${
selectedRows.length selectedRows.length
} document${ } document${
selectedRows.length > 1 ? "s" : "" selectedRows.length > 1 ? "s" : ""
}? This will remove all chunks and data associated with these documents. This action cannot be undone. }? This will remove all chunks and data associated with these documents. This action cannot be undone.
Documents to be deleted: Documents to be deleted:
${selectedRows.map((row) => `${row.filename}`).join("\n")}`} ${selectedRows.map((row) => `${row.filename}`).join("\n")}`}
confirmText="Delete All" confirmText="Delete All"
onConfirm={handleBulkDelete} onConfirm={handleBulkDelete}
isLoading={deleteDocumentMutation.isPending} isLoading={deleteDocumentMutation.isPending}
/> />
</div> </div>
); );
} }
export default function ProtectedSearchPage() { export default function ProtectedSearchPage() {
return ( return (
<ProtectedRoute> <ProtectedRoute>
<SearchPage /> <SearchPage />
</ProtectedRoute> </ProtectedRoute>
); );
} }