format
This commit is contained in:
Lucas Oliveira
parent
abb0c9868c
commit
3e10f97659
1 changed files with 267 additions and 267 deletions
|
|
@ -24,230 +24,230 @@ import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
|
||||||
|
|
||||||
// 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 } = useTask();
|
const { isMenuOpen } = 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);
|
||||||
};
|
};
|
||||||
|
|
||||||
const fileResults = data as File[];
|
const fileResults = data as File[];
|
||||||
|
|
||||||
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: true,
|
||||||
headerCheckboxSelection: true,
|
headerCheckboxSelection: true,
|
||||||
initialFlex: 2,
|
initialFlex: 2,
|
||||||
minWidth: 220,
|
minWidth: 220,
|
||||||
cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
|
cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors"
|
className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
router.push(
|
router.push(
|
||||||
`/knowledge/chunks?filename=${encodeURIComponent(
|
`/knowledge/chunks?filename=${encodeURIComponent(
|
||||||
data?.filename ?? "",
|
data?.filename ?? "",
|
||||||
)}`,
|
)}`,
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{getSourceIcon(data?.connector_type)}
|
{getSourceIcon(data?.connector_type)}
|
||||||
<span className="font-medium text-foreground truncate">
|
<span className="font-medium text-foreground truncate">
|
||||||
{value}
|
{value}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "size",
|
field: "size",
|
||||||
headerName: "Size",
|
headerName: "Size",
|
||||||
valueFormatter: (params) =>
|
valueFormatter: (params) =>
|
||||||
params.value ? `${Math.round(params.value / 1024)} KB` : "-",
|
params.value ? `${Math.round(params.value / 1024)} KB` : "-",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "mimetype",
|
field: "mimetype",
|
||||||
headerName: "Type",
|
headerName: "Type",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "owner",
|
field: "owner",
|
||||||
headerName: "Owner",
|
headerName: "Owner",
|
||||||
valueFormatter: (params) =>
|
valueFormatter: (params) =>
|
||||||
params.data?.owner_name || params.data?.owner_email || "—",
|
params.data?.owner_name || params.data?.owner_email || "—",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "chunkCount",
|
field: "chunkCount",
|
||||||
headerName: "Chunks",
|
headerName: "Chunks",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "avgScore",
|
field: "avgScore",
|
||||||
headerName: "Avg score",
|
headerName: "Avg score",
|
||||||
initialFlex: 0.5,
|
initialFlex: 0.5,
|
||||||
cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
|
cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
|
||||||
return (
|
return (
|
||||||
<span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
|
<span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
|
||||||
{value.toFixed(2)}
|
{value.toFixed(2)}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// LOOK HERE LUCAS!!!!
|
// LOOK HERE LUCAS!!!!
|
||||||
// {
|
// {
|
||||||
// field: "status",
|
// field: "status",
|
||||||
// headerName: "Status",
|
// headerName: "Status",
|
||||||
// cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
|
// cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
|
||||||
// // Default to 'active' status if no status is provided
|
// // Default to 'active' status if no status is provided
|
||||||
// const status = data?.status || "processing";
|
// const status = data?.status || "processing";
|
||||||
// return <StatusBadge status={status} />;
|
// return <StatusBadge status={status} />;
|
||||||
// },
|
// },
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
|
cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
|
||||||
return <KnowledgeActionsDropdown filename={data?.filename || ""} />;
|
return <KnowledgeActionsDropdown filename={data?.filename || ""} />;
|
||||||
},
|
},
|
||||||
cellStyle: {
|
cellStyle: {
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
padding: 0,
|
padding: 0,
|
||||||
},
|
},
|
||||||
colId: "actions",
|
colId: "actions",
|
||||||
filter: false,
|
filter: false,
|
||||||
minWidth: 0,
|
minWidth: 0,
|
||||||
width: 40,
|
width: 40,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
sortable: false,
|
sortable: false,
|
||||||
initialFlex: 0,
|
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 gap-2 focus-within:border-foreground transition-colors !py-0">
|
<div className="primary-input min-h-10 !flex items-center flex-nowrap gap-2 focus-within:border-foreground transition-colors !py-0">
|
||||||
{selectedFilter?.name && (
|
{selectedFilter?.name && (
|
||||||
<div className="flex items-center gap-1 bg-blue-500/20 text-blue-400 px-1.5 py-0.5 rounded max-w-[300px]">
|
<div className="flex items-center gap-1 bg-blue-500/20 text-blue-400 px-1.5 py-0.5 rounded max-w-[300px]">
|
||||||
<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>
|
||||||
)}
|
)}
|
||||||
<input
|
<input
|
||||||
className="bg-transparent w-full h-full focus:outline-none focus-visible:outline-none placeholder:font-mono"
|
className="bg-transparent w-full h-full focus:outline-none focus-visible:outline-none 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"
|
||||||
|
|
@ -258,8 +258,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"
|
||||||
|
|
@ -267,70 +267,70 @@ 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="autoHeight"
|
domLayout="autoHeight"
|
||||||
onSelectionChanged={onSelectionChanged}
|
onSelectionChanged={onSelectionChanged}
|
||||||
noRowsOverlayComponent={() => (
|
noRowsOverlayComponent={() => (
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
|
<Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
|
||||||
<p className="text-lg text-muted-foreground">
|
<p className="text-lg text-muted-foreground">
|
||||||
No documents found
|
No documents found
|
||||||
</p>
|
</p>
|
||||||
<p className="text-sm text-muted-foreground/70 mt-2">
|
<p className="text-sm text-muted-foreground/70 mt-2">
|
||||||
Try adjusting your search terms
|
Try adjusting your search terms
|
||||||
</p>
|
</p>
|
||||||
</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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue