fix(ui): Fix pagination for documents #320 solved

surfsense_web/components/chat/ChatInputGroup.tsx

@@ -39,10 +39,17 @@ const DocumentSelector = React.memo(
 	}) => {
 		const { search_space_id } = useParams();
 		const [isOpen, setIsOpen] = useState(false);
+		const [pageIndex, setPageIndex] = useState(0);
+		const [pageSize, setPageSize] = useState(100); // Larger page size for document selector
+
+		// Calculate skip value for pagination
+		const skip = pageIndex * pageSize;
 
 		const { documents, loading, isLoaded, fetchDocuments } = useDocuments(
 			Number(search_space_id),
-			true
+			true,
+			skip,
+			pageSize
 		);
 
 		const handleOpenChange = useCallback(
@@ -104,6 +111,14 @@ const DocumentSelector = React.memo(
 									onSelectionChange={handleSelectionChange}
 									onDone={handleDone}
 									initialSelectedDocuments={selectedDocuments}
+									pageIndex={pageIndex}
+									pageSize={pageSize}
+									onPageIndexChange={setPageIndex}
+									onPageSizeChange={(newSize) => {
+										setPageSize(newSize);
+										setPageIndex(0);
+									}}
+									canNext={documents.length === pageSize}
 								/>
 							) : null}
 						</div>

surfsense_web/components/chat/DocumentsDataTable.tsx

@@ -41,6 +41,11 @@ interface DocumentsDataTableProps {
 	onSelectionChange: (documents: Document[]) => void;
 	onDone: () => void;
 	initialSelectedDocuments?: Document[];
+	pageIndex?: number;
+	pageSize?: number;
+	onPageIndexChange?: (pageIndex: number) => void;
+	onPageSizeChange?: (pageSize: number) => void;
+	canNext?: boolean;
 }
 
 // Combine EnumConnectorName with additional document types
@@ -181,6 +186,11 @@ export function DocumentsDataTable({
 	onSelectionChange,
 	onDone,
 	initialSelectedDocuments = [],
+	pageIndex = 0,
+	pageSize = 100,
+	onPageIndexChange,
+	onPageSizeChange,
+	canNext = false,
 }: DocumentsDataTableProps) {
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -400,35 +410,33 @@ export function DocumentsDataTable({
 			{/* Footer Pagination */}
 			<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 text-xs sm:text-sm text-muted-foreground border-t pt-3 md:pt-4 flex-shrink-0">
 				<div className="text-center sm:text-left">
-					Showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}{" "}
-					to{" "}
-					{Math.min(
-						(table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
-						table.getFilteredRowModel().rows.length
-					)}{" "}
-					of {table.getFilteredRowModel().rows.length} documents
+					Showing {pageIndex * pageSize + 1} to{" "}
+					{Math.min((pageIndex + 1) * pageSize, pageIndex * pageSize + documents.length)} of{" "}
+					{canNext
+						? `${(pageIndex + 1) * pageSize}+`
+						: `${pageIndex * pageSize + documents.length}`}{" "}
+					documents
 				</div>
 				<div className="flex items-center justify-center sm:justify-end space-x-2">
 					<Button
 						variant="outline"
 						size="sm"
-						onClick={() => table.previousPage()}
-						disabled={!table.getCanPreviousPage()}
+						onClick={() => onPageIndexChange?.(pageIndex - 1)}
+						disabled={pageIndex === 0}
 						className="text-xs sm:text-sm"
 					>
 						Previous
 					</Button>
 					<div className="flex items-center space-x-1 text-xs sm:text-sm">
 						<span>Page</span>
-						<strong>{table.getState().pagination.pageIndex + 1}</strong>
-						<span>of</span>
-						<strong>{table.getPageCount()}</strong>
+						<strong>{pageIndex + 1}</strong>
+						{canNext && <span>+</span>}
 					</div>
 					<Button
 						variant="outline"
 						size="sm"
-						onClick={() => table.nextPage()}
-						disabled={!table.getCanNextPage()}
+						onClick={() => onPageIndexChange?.(pageIndex + 1)}
+						disabled={!canNext}
 						className="text-xs sm:text-sm"
 					>
 						Next