fix merge conflicts
This commit is contained in:
Cole Goldsmith
parent
e4ae80860a
commit
99fd1d7215
2 changed files with 310 additions and 406 deletions
|
|
@ -7,7 +7,6 @@ import {
|
||||||
FolderOpen,
|
FolderOpen,
|
||||||
Loader2,
|
Loader2,
|
||||||
PlugZap,
|
PlugZap,
|
||||||
Plus,
|
|
||||||
Upload,
|
Upload,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
|
|
@ -29,15 +28,7 @@ import { useTask } from "@/contexts/task-context";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import type { File as SearchFile } from "@/src/app/api/queries/useGetSearchQuery";
|
import type { File as SearchFile } from "@/src/app/api/queries/useGetSearchQuery";
|
||||||
|
|
||||||
interface KnowledgeDropdownProps {
|
export function KnowledgeDropdown() {
|
||||||
active?: boolean;
|
|
||||||
variant?: "navigation" | "button";
|
|
||||||
}
|
|
||||||
|
|
||||||
export function KnowledgeDropdown({
|
|
||||||
active,
|
|
||||||
variant = "navigation",
|
|
||||||
}: KnowledgeDropdownProps) {
|
|
||||||
const { addTask } = useTask();
|
const { addTask } = useTask();
|
||||||
const { refetch: refetchTasks } = useGetTasksQuery();
|
const { refetch: refetchTasks } = useGetTasksQuery();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
@ -498,28 +489,16 @@ export function KnowledgeDropdown({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div ref={dropdownRef} className="relative">
|
<div ref={dropdownRef} className="relative">
|
||||||
<button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => !isLoading && setIsOpen(!isOpen)}
|
onClick={() => !isLoading && setIsOpen(!isOpen)}
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
className={cn(
|
|
||||||
variant === "button"
|
|
||||||
? "rounded-lg h-12 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
: "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
|
|
||||||
variant === "navigation" && active
|
|
||||||
? "bg-accent text-accent-foreground shadow-sm"
|
|
||||||
: variant === "navigation"
|
|
||||||
? "text-foreground hover:text-accent-foreground"
|
|
||||||
: "",
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{variant === "button" ? (
|
|
||||||
<>
|
<>
|
||||||
{isLoading ? (
|
{isLoading &&
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
) : (
|
}
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
<span>
|
<span>
|
||||||
{isLoading
|
{isLoading
|
||||||
? fileUploading
|
? fileUploading
|
||||||
|
|
@ -542,34 +521,7 @@ export function KnowledgeDropdown({
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
</Button>
|
||||||
<>
|
|
||||||
<div className="flex items-center flex-1">
|
|
||||||
{isLoading ? (
|
|
||||||
<Loader2 className="h-4 w-4 mr-3 shrink-0 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<Upload
|
|
||||||
className={cn(
|
|
||||||
"h-4 w-4 mr-3 shrink-0",
|
|
||||||
active
|
|
||||||
? "text-accent-foreground"
|
|
||||||
: "text-muted-foreground group-hover:text-foreground",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
Knowledge
|
|
||||||
</div>
|
|
||||||
{!isLoading && (
|
|
||||||
<ChevronDown
|
|
||||||
className={cn(
|
|
||||||
"h-4 w-4 transition-transform",
|
|
||||||
isOpen && "rotate-180",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{isOpen && !isLoading && (
|
{isOpen && !isLoading && (
|
||||||
<div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50">
|
<div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50">
|
||||||
|
|
|
||||||
|
|
@ -2,22 +2,19 @@
|
||||||
|
|
||||||
import type { ColDef, GetRowIdParams } from "ag-grid-community";
|
import type { ColDef, GetRowIdParams } from "ag-grid-community";
|
||||||
import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
|
import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
|
||||||
import { Building2, Cloud, HardDrive, Search, Trash2, X } from "lucide-react";
|
import { Cloud, FileIcon, Search, Trash2, X } from "lucide-react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import {
|
import {
|
||||||
type ChangeEvent,
|
type ChangeEvent,
|
||||||
useCallback,
|
useCallback,
|
||||||
useEffect,
|
useEffect,
|
||||||
useRef,
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { SiGoogledrive } from "react-icons/si";
|
|
||||||
import { TbBrandOnedrive } from "react-icons/tb";
|
|
||||||
import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
|
import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
|
||||||
import { ProtectedRoute } from "@/components/protected-route";
|
import { ProtectedRoute } from "@/components/protected-route";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||||
import { useLayout } from "@/contexts/layout-context";
|
|
||||||
import { useTask } from "@/contexts/task-context";
|
import { useTask } from "@/contexts/task-context";
|
||||||
import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
|
import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
|
||||||
import "@/components/AgGrid/registerAgGridModules";
|
import "@/components/AgGrid/registerAgGridModules";
|
||||||
|
|
@ -28,319 +25,272 @@ 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 GoogleDriveIcon from "../settings/icons/google-drive-icon";
|
||||||
|
import OneDriveIcon from "../settings/icons/one-drive-icon";
|
||||||
|
import SharePointIcon from "../settings/icons/share-point-icon";
|
||||||
|
import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
|
||||||
|
|
||||||
// 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" />
|
<GoogleDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />
|
||||||
);
|
);
|
||||||
case "onedrive":
|
case "onedrive":
|
||||||
return (
|
return <OneDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />;
|
||||||
<TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" />
|
case "sharepoint":
|
||||||
);
|
return (
|
||||||
case "sharepoint":
|
<SharePointIcon 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" />
|
<FileIcon 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, refreshTasks } = useTask();
|
const { isMenuOpen, files: taskFiles, refreshTasks } = useTask();
|
||||||
const { totalTopOffset } = useLayout();
|
const {
|
||||||
const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
|
selectedFilter,
|
||||||
useKnowledgeFilter();
|
setSelectedFilter,
|
||||||
const [selectedRows, setSelectedRows] = useState<File[]>([]);
|
parsedFilterData,
|
||||||
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
|
isPanelOpen,
|
||||||
|
queryOverride,
|
||||||
|
} = useKnowledgeFilter();
|
||||||
|
const [selectedRows, setSelectedRows] = useState<File[]>([]);
|
||||||
|
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
|
||||||
|
|
||||||
const deleteDocumentMutation = useDeleteDocument();
|
const deleteDocumentMutation = useDeleteDocument();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
refreshTasks();
|
refreshTasks();
|
||||||
}, [refreshTasks]);
|
}, [refreshTasks]);
|
||||||
|
|
||||||
const { data: searchData = [], isFetching } = useGetSearchQuery(
|
const { data: searchData = [], isFetching } = useGetSearchQuery(
|
||||||
parsedFilterData?.query || "*",
|
queryOverride,
|
||||||
parsedFilterData,
|
parsedFilterData
|
||||||
);
|
);
|
||||||
// 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,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// Create a map of task files by filename for quick lookup
|
// Create a map of task files by filename for quick lookup
|
||||||
const taskFileMap = new Map(
|
const taskFileMap = new Map(
|
||||||
taskFilesAsFiles.map((file) => [file.filename, file]),
|
taskFilesAsFiles.map((file) => [file.filename, file])
|
||||||
);
|
);
|
||||||
|
|
||||||
// Override backend files with task file status if they exist
|
// Override backend files with task file status if they exist
|
||||||
const backendFiles = (searchData as File[])
|
const backendFiles = (searchData as File[])
|
||||||
.map((file) => {
|
.map((file) => {
|
||||||
const taskFile = taskFileMap.get(file.filename);
|
const taskFile = taskFileMap.get(file.filename);
|
||||||
if (taskFile) {
|
if (taskFile) {
|
||||||
// Override backend file with task file data (includes status)
|
// Override backend file with task file data (includes status)
|
||||||
return { ...file, ...taskFile };
|
return { ...file, ...taskFile };
|
||||||
}
|
}
|
||||||
return file;
|
return file;
|
||||||
})
|
})
|
||||||
.filter((file) => {
|
.filter((file) => {
|
||||||
// Only filter out files that are currently processing AND in taskFiles
|
// Only filter out files that are currently processing AND in taskFiles
|
||||||
const taskFile = taskFileMap.get(file.filename);
|
const taskFile = taskFileMap.get(file.filename);
|
||||||
return !taskFile || taskFile.status !== "processing";
|
return !taskFile || taskFile.status !== "processing";
|
||||||
});
|
});
|
||||||
|
|
||||||
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 handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
|
const gridRef = useRef<AgGridReact>(null);
|
||||||
gridRef.current?.api.setGridOption("quickFilterText", e.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const gridRef = useRef<AgGridReact>(null);
|
const columnDefs = [
|
||||||
|
{
|
||||||
|
field: "filename",
|
||||||
|
headerName: "Source",
|
||||||
|
checkboxSelection: (params: CustomCellRendererProps<File>) =>
|
||||||
|
(params?.data?.status || "active") === "active",
|
||||||
|
headerCheckboxSelection: true,
|
||||||
|
initialFlex: 2,
|
||||||
|
minWidth: 220,
|
||||||
|
cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
|
||||||
|
// Read status directly from data on each render
|
||||||
|
const status = data?.status || "active";
|
||||||
|
const isActive = status === "active";
|
||||||
|
console.log(data?.filename, status, "a");
|
||||||
|
return (
|
||||||
|
<div className="flex items-center overflow-hidden w-full">
|
||||||
|
<div
|
||||||
|
className={`transition-opacity duration-200 ${
|
||||||
|
isActive ? "w-0" : "w-7"
|
||||||
|
}`}
|
||||||
|
></div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors text-left flex-1 overflow-hidden"
|
||||||
|
onClick={() => {
|
||||||
|
if (!isActive) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
router.push(
|
||||||
|
`/knowledge/chunks?filename=${encodeURIComponent(
|
||||||
|
data?.filename ?? ""
|
||||||
|
)}`
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getSourceIcon(data?.connector_type)}
|
||||||
|
<span className="font-medium text-foreground truncate">
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "size",
|
||||||
|
headerName: "Size",
|
||||||
|
valueFormatter: (params: CustomCellRendererProps<File>) =>
|
||||||
|
params.value ? `${Math.round(params.value / 1024)} KB` : "-",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "mimetype",
|
||||||
|
headerName: "Type",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "owner",
|
||||||
|
headerName: "Owner",
|
||||||
|
valueFormatter: (params: CustomCellRendererProps<File>) =>
|
||||||
|
params.data?.owner_name || params.data?.owner_email || "—",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "chunkCount",
|
||||||
|
headerName: "Chunks",
|
||||||
|
valueFormatter: (params: CustomCellRendererProps<File>) =>
|
||||||
|
params.data?.chunkCount?.toString() || "-",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "avgScore",
|
||||||
|
headerName: "Avg score",
|
||||||
|
cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
|
||||||
|
return (
|
||||||
|
<span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded">
|
||||||
|
{value?.toFixed(2) ?? "-"}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: "status",
|
||||||
|
headerName: "Status",
|
||||||
|
cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
|
||||||
|
console.log(data?.filename, data?.status, "b");
|
||||||
|
// Default to 'active' status if no status is provided
|
||||||
|
const status = data?.status || "active";
|
||||||
|
return <StatusBadge status={status} />;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
|
||||||
|
const status = data?.status || "active";
|
||||||
|
if (status !== "active") {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return <KnowledgeActionsDropdown filename={data?.filename || ""} />;
|
||||||
|
},
|
||||||
|
cellStyle: {
|
||||||
|
alignItems: "center",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
colId: "actions",
|
||||||
|
filter: false,
|
||||||
|
minWidth: 0,
|
||||||
|
width: 40,
|
||||||
|
resizable: false,
|
||||||
|
sortable: false,
|
||||||
|
initialFlex: 0,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const columnDefs = [
|
const defaultColDef: ColDef<File> = {
|
||||||
{
|
resizable: false,
|
||||||
field: "filename",
|
suppressMovable: true,
|
||||||
headerName: "Source",
|
initialFlex: 1,
|
||||||
checkboxSelection: (params: CustomCellRendererProps<File>) =>
|
minWidth: 100,
|
||||||
(params?.data?.status || "active") === "active",
|
};
|
||||||
headerCheckboxSelection: true,
|
|
||||||
initialFlex: 2,
|
|
||||||
minWidth: 220,
|
|
||||||
cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
|
|
||||||
// Read status directly from data on each render
|
|
||||||
const status = data?.status || "active";
|
|
||||||
const isActive = status === "active";
|
|
||||||
console.log(data?.filename, status, "a");
|
|
||||||
return (
|
|
||||||
<div className="flex items-center overflow-hidden w-full">
|
|
||||||
<div
|
|
||||||
className={`transition-opacity duration-200 ${isActive ? "w-0" : "w-7"}`}
|
|
||||||
></div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors text-left flex-1 overflow-hidden"
|
|
||||||
onClick={() => {
|
|
||||||
if (!isActive) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
router.push(
|
|
||||||
`/knowledge/chunks?filename=${encodeURIComponent(
|
|
||||||
data?.filename ?? "",
|
|
||||||
)}`,
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{getSourceIcon(data?.connector_type)}
|
|
||||||
<span className="font-medium text-foreground truncate">
|
|
||||||
{value}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "size",
|
|
||||||
headerName: "Size",
|
|
||||||
valueFormatter: (params: CustomCellRendererProps<File>) =>
|
|
||||||
params.value ? `${Math.round(params.value / 1024)} KB` : "-",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "mimetype",
|
|
||||||
headerName: "Type",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "owner",
|
|
||||||
headerName: "Owner",
|
|
||||||
valueFormatter: (params: CustomCellRendererProps<File>) =>
|
|
||||||
params.data?.owner_name || params.data?.owner_email || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "chunkCount",
|
|
||||||
headerName: "Chunks",
|
|
||||||
valueFormatter: (params: CustomCellRendererProps<File>) => params.data?.chunkCount?.toString() || "-",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "avgScore",
|
|
||||||
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">
|
|
||||||
{value?.toFixed(2) ?? "-"}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: "status",
|
|
||||||
headerName: "Status",
|
|
||||||
cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
|
|
||||||
console.log(data?.filename, data?.status, "b");
|
|
||||||
// Default to 'active' status if no status is provided
|
|
||||||
const status = data?.status || "active";
|
|
||||||
return <StatusBadge status={status} />;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
cellRenderer: ({ data }: CustomCellRendererProps<File>) => {
|
|
||||||
const status = data?.status || "active";
|
|
||||||
if (status !== "active") {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return <KnowledgeActionsDropdown filename={data?.filename || ""} />;
|
|
||||||
},
|
|
||||||
cellStyle: {
|
|
||||||
alignItems: "center",
|
|
||||||
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 onSelectionChanged = useCallback(() => {
|
||||||
resizable: false,
|
if (gridRef.current) {
|
||||||
suppressMovable: true,
|
const selectedNodes = gridRef.current.api.getSelectedRows();
|
||||||
initialFlex: 1,
|
setSelectedRows(selectedNodes);
|
||||||
minWidth: 100,
|
}
|
||||||
};
|
}, []);
|
||||||
|
|
||||||
const onSelectionChanged = useCallback(() => {
|
const handleBulkDelete = async () => {
|
||||||
if (gridRef.current) {
|
if (selectedRows.length === 0) return;
|
||||||
const selectedNodes = gridRef.current.api.getSelectedRows();
|
|
||||||
setSelectedRows(selectedNodes);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleBulkDelete = async () => {
|
try {
|
||||||
if (selectedRows.length === 0) return;
|
// Delete each file individually since the API expects one filename at a time
|
||||||
|
const deletePromises = selectedRows.map((row) =>
|
||||||
|
deleteDocumentMutation.mutateAsync({ filename: row.filename })
|
||||||
|
);
|
||||||
|
|
||||||
try {
|
await Promise.all(deletePromises);
|
||||||
// Delete each file individually since the API expects one filename at a time
|
|
||||||
const deletePromises = selectedRows.map((row) =>
|
|
||||||
deleteDocumentMutation.mutateAsync({ filename: row.filename }),
|
|
||||||
);
|
|
||||||
|
|
||||||
await Promise.all(deletePromises);
|
toast.success(
|
||||||
|
`Successfully deleted ${selectedRows.length} document${
|
||||||
|
selectedRows.length > 1 ? "s" : ""
|
||||||
|
}`
|
||||||
|
);
|
||||||
|
setSelectedRows([]);
|
||||||
|
setShowBulkDeleteDialog(false);
|
||||||
|
|
||||||
toast.success(
|
// Clear selection in the grid
|
||||||
`Successfully deleted ${selectedRows.length} document${
|
if (gridRef.current) {
|
||||||
selectedRows.length > 1 ? "s" : ""
|
gridRef.current.api.deselectAll();
|
||||||
}`,
|
}
|
||||||
);
|
} catch (error) {
|
||||||
setSelectedRows([]);
|
toast.error(
|
||||||
setShowBulkDeleteDialog(false);
|
error instanceof Error
|
||||||
|
? error.message
|
||||||
// Clear selection in the grid
|
: "Failed to delete some documents"
|
||||||
if (gridRef.current) {
|
);
|
||||||
gridRef.current.api.deselectAll();
|
}
|
||||||
}
|
};
|
||||||
} catch (error) {
|
|
||||||
toast.error(
|
|
||||||
error instanceof Error
|
|
||||||
? error.message
|
|
||||||
: "Failed to delete some documents",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<>
|
||||||
className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${
|
<div className="flex flex-col h-full">
|
||||||
isMenuOpen && isPanelOpen
|
|
||||||
? "md:right-[704px]"
|
|
||||||
: // Both open: 384px (menu) + 320px (KF panel)
|
|
||||||
isMenuOpen
|
|
||||||
? "md:right-96"
|
|
||||||
: // Only menu open: 384px
|
|
||||||
isPanelOpen
|
|
||||||
? "md:right-80"
|
|
||||||
: // Only KF panel open: 320px
|
|
||||||
"md:right-6" // Neither open: 24px
|
|
||||||
}`}
|
|
||||||
style={{ top: `${totalTopOffset}px` }}
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Search Input Area */}
|
{/* Search Input Area */}
|
||||||
<div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
|
<div className="flex-1 flex items-center flex-shrink-0 flex-wrap-reverse gap-3 mb-6">
|
||||||
<form className="flex gap-3">
|
<KnowledgeSearchInput />
|
||||||
<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
|
{/* //TODO: Implement sync button */}
|
||||||
{selectedFilter?.name && (
|
{/* <Button
|
||||||
<div
|
|
||||||
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
|
|
||||||
filterAccentClasses[parsedFilterData?.color || "zinc"]
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span className="truncate">{selectedFilter?.name}</span>
|
|
||||||
<X
|
|
||||||
aria-label="Remove filter"
|
|
||||||
className="h-4 w-4 flex-shrink-0 cursor-pointer"
|
|
||||||
onClick={() => setSelectedFilter(null)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<Search
|
|
||||||
className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
|
|
||||||
name="search-query"
|
|
||||||
id="search-query"
|
|
||||||
type="text"
|
|
||||||
placeholder="Enter your search query..."
|
|
||||||
onChange={handleTableSearch}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/* <Button
|
|
||||||
type="submit"
|
|
||||||
variant="outline"
|
|
||||||
className="rounded-lg p-0 flex-shrink-0"
|
|
||||||
>
|
|
||||||
{isFetching ? (
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<Search className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
</Button> */}
|
|
||||||
{/* //TODO: Implement sync button */}
|
|
||||||
{/* <Button
|
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="rounded-lg flex-shrink-0"
|
className="rounded-lg flex-shrink-0"
|
||||||
|
|
@ -348,69 +298,71 @@ 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
|
Delete
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</form>
|
<div className="ml-auto">
|
||||||
</div>
|
<KnowledgeDropdown />
|
||||||
<AgGridReact
|
</div>
|
||||||
className="w-full overflow-auto"
|
</div>
|
||||||
columnDefs={columnDefs as ColDef<File>[]}
|
<AgGridReact
|
||||||
defaultColDef={defaultColDef}
|
className="w-full overflow-auto"
|
||||||
loading={isFetching}
|
columnDefs={columnDefs as ColDef<File>[]}
|
||||||
ref={gridRef}
|
defaultColDef={defaultColDef}
|
||||||
rowData={fileResults}
|
loading={isFetching}
|
||||||
rowSelection="multiple"
|
ref={gridRef}
|
||||||
rowMultiSelectWithClick={false}
|
rowData={fileResults}
|
||||||
suppressRowClickSelection={true}
|
rowSelection="multiple"
|
||||||
getRowId={(params: GetRowIdParams<File>) => params.data?.filename}
|
rowMultiSelectWithClick={false}
|
||||||
domLayout="normal"
|
suppressRowClickSelection={true}
|
||||||
onSelectionChanged={onSelectionChanged}
|
getRowId={(params: GetRowIdParams<File>) => params.data?.filename}
|
||||||
noRowsOverlayComponent={() => (
|
domLayout="normal"
|
||||||
<div className="text-center pb-[45px]">
|
onSelectionChanged={onSelectionChanged}
|
||||||
<div className="text-lg text-primary font-semibold">
|
noRowsOverlayComponent={() => (
|
||||||
No knowledge
|
<div className="text-center pb-[45px]">
|
||||||
</div>
|
<div className="text-lg text-primary font-semibold">
|
||||||
<div className="text-sm mt-1 text-muted-foreground">
|
No knowledge
|
||||||
Add files from local or your preferred cloud.
|
</div>
|
||||||
</div>
|
<div className="text-sm mt-1 text-muted-foreground">
|
||||||
</div>
|
Add files from local or your preferred cloud.
|
||||||
)}
|
</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>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ProtectedSearchPage() {
|
export default function ProtectedSearchPage() {
|
||||||
return (
|
return (
|
||||||
<ProtectedRoute>
|
<ProtectedRoute>
|
||||||
<SearchPage />
|
<SearchPage />
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue