fix(ui): Fix pagination for documents

#320 fixed
This commit is contained in:
sanwalsulehri 2025-09-19 16:04:22 +05:00
parent b11bec1c65
commit 798cf788f5
24 changed files with 218 additions and 187 deletions

View file

@ -15,7 +15,7 @@ import {
Trash2, Trash2,
} from "lucide-react"; } from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useId, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -84,6 +84,7 @@ const MotionCard = motion(Card);
export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps) { export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps) {
const router = useRouter(); const router = useRouter();
const podcastTitleId = useId();
const [chats, setChats] = useState<Chat[]>([]); const [chats, setChats] = useState<Chat[]>([]);
const [filteredChats, setFilteredChats] = useState<Chat[]>([]); const [filteredChats, setFilteredChats] = useState<Chat[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@ -280,7 +281,7 @@ export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps)
const payload = { const payload = {
type: "CHAT", type: "CHAT",
ids: [currentChatId], // Single chat ID ids: [currentChatId], // Single chat ID
search_space_id: parseInt(searchSpaceId), search_space_id: parseInt(searchSpaceId, 10),
podcast_title: currentTitle, podcast_title: currentTitle,
}; };
@ -830,9 +831,9 @@ export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps)
<div className="space-y-4 py-2"> <div className="space-y-4 py-2">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="podcast-title">Podcast Title</Label> <Label htmlFor={podcastTitleId}>Podcast Title</Label>
<Input <Input
id="podcast-title" id={podcastTitleId}
placeholder="Enter podcast title" placeholder="Enter podcast title"
value={podcastTitle} value={podcastTitle}
onChange={(e) => updateCurrentChatTitle(e.target.value)} onChange={(e) => updateCurrentChatTitle(e.target.value)}

View file

@ -4,7 +4,7 @@ import { format } from "date-fns";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { Calendar as CalendarIcon, Edit, Plus, RefreshCw, Trash2 } from "lucide-react"; import { Calendar as CalendarIcon, Edit, Plus, RefreshCw, Trash2 } from "lucide-react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useId, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { import {
AlertDialog, AlertDialog,
@ -63,6 +63,8 @@ export default function ConnectorsPage() {
const params = useParams(); const params = useParams();
const searchSpaceId = params.search_space_id as string; const searchSpaceId = params.search_space_id as string;
const today = new Date(); const today = new Date();
const startDateId = useId();
const endDateId = useId();
const { connectors, isLoading, error, deleteConnector, indexConnector } = const { connectors, isLoading, error, deleteConnector, indexConnector } =
useSearchSourceConnectors(); useSearchSourceConnectors();
@ -346,11 +348,11 @@ export default function ConnectorsPage() {
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="start-date">Start Date</Label> <Label htmlFor={startDateId}>Start Date</Label>
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
id="start-date" id={startDateId}
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-start text-left font-normal", "w-full justify-start text-left font-normal",
@ -373,11 +375,11 @@ export default function ConnectorsPage() {
</Popover> </Popover>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="end-date">End Date</Label> <Label htmlFor={endDateId}>End Date</Label>
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
id="end-date" id={endDateId}
variant="outline" variant="outline"
className={cn( className={cn(
"w-full justify-start text-left font-normal", "w-full justify-start text-left font-normal",

View file

@ -41,7 +41,7 @@ export default function AirtableConnectorPage() {
setDoesConnectorExist(true); setDoesConnectorExist(true);
} }
}); });
}, []); }, [fetchConnectors]);
const handleConnectAirtable = async () => { const handleConnectAirtable = async () => {
setIsConnecting(true); setIsConnecting(true);

View file

@ -2,7 +2,7 @@
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { ArrowLeft, Check, CircleAlert, Github, Info, ListChecks, Loader2 } from "lucide-react"; import { ArrowLeft, Check, CircleAlert, Info, ListChecks, Loader2 } from "lucide-react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";

View file

@ -1,14 +1,11 @@
"use client"; "use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react"; import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@ -44,7 +41,7 @@ export default function GoogleCalendarConnectorPage() {
setDoesConnectorExist(true); setDoesConnectorExist(true);
} }
}); });
}, []); }, [fetchConnectors]);
// Handle Google OAuth connection // Handle Google OAuth connection
const handleConnectGoogle = async () => { const handleConnectGoogle = async () => {

View file

@ -1,14 +1,11 @@
"use client"; "use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react"; import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@ -43,7 +40,7 @@ export default function GoogleGmailConnectorPage() {
setDoesConnectorExist(true); setDoesConnectorExist(true);
} }
}); });
}, []); }, [fetchConnectors]);
// Handle Google OAuth connection // Handle Google OAuth connection
const handleConnectGoogle = async () => { const handleConnectGoogle = async () => {

View file

@ -76,8 +76,15 @@ export function DocumentsTableShell({
const toggleAll = (checked: boolean) => { const toggleAll = (checked: boolean) => {
const next = new Set(selectedIds); const next = new Set(selectedIds);
if (checked) sorted.forEach((d) => next.add(d.id)); if (checked) {
else sorted.forEach((d) => next.delete(d.id)); sorted.forEach((d) => {
next.add(d.id);
});
} else {
sorted.forEach((d) => {
next.delete(d.id);
});
}
setSelectedIds(next); setSelectedIds(next);
}; };

View file

@ -26,11 +26,13 @@ export default function DocumentsTable() {
const params = useParams(); const params = useParams();
const searchSpaceId = Number(params.search_space_id); const searchSpaceId = Number(params.search_space_id);
const [pageIndex, setPageIndex] = useState(0); const [pageIndex, setPageIndex] = useState(0);
const [pageSize, setPageSize] = useState(10); const [pageSize, setPageSize] = useState(10);
const { documents, loading, error, refreshDocuments, deleteDocument, hasMore } = const { documents, loading, error, refreshDocuments, deleteDocument, hasMore } = useDocuments(
useDocuments(searchSpaceId, { pageIndex, pageSize }); searchSpaceId,
{ pageIndex, pageSize }
);
const [data, setData] = useState<Document[]>([]); const [data, setData] = useState<Document[]>([]);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
@ -42,7 +44,7 @@ export default function DocumentsTable() {
content: true, content: true,
created_at: true, created_at: true,
}); });
// pageIndex/pageSize state moved above to feed the hook // pageIndex/pageSize state moved above to feed the hook
const [sortKey, setSortKey] = useState<SortKey>("title"); const [sortKey, setSortKey] = useState<SortKey>("title");
const [sortDesc, setSortDesc] = useState(false); const [sortDesc, setSortDesc] = useState(false);
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set()); const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
@ -63,11 +65,11 @@ export default function DocumentsTable() {
return result; return result;
}, [data, debouncedSearch, activeTypes]); }, [data, debouncedSearch, activeTypes]);
// Server-side pagination: we filter only the current page's data client-side // Server-side pagination: we filter only the current page's data client-side
const pageDocs = filtered; const pageDocs = filtered;
const total = pageIndex * pageSize + pageDocs.length + (hasMore ? 1 : 0) - 1; const total = pageIndex * pageSize + pageDocs.length + (hasMore ? 1 : 0) - 1;
const pageStart = pageIndex * pageSize; const pageStart = pageIndex * pageSize;
const pageEnd = pageStart + pageDocs.length; const _pageEnd = pageStart + pageDocs.length;
const onToggleType = (type: string, checked: boolean) => { const onToggleType = (type: string, checked: boolean) => {
setActiveTypes((prev) => (checked ? [...prev, type] : prev.filter((t) => t !== type))); setActiveTypes((prev) => (checked ? [...prev, type] : prev.filter((t) => t !== type)));
@ -154,32 +156,32 @@ export default function DocumentsTable() {
pageIndex={pageIndex} pageIndex={pageIndex}
pageSize={pageSize} pageSize={pageSize}
total={total} total={total}
onPageSizeChange={async (s) => { onPageSizeChange={async (s) => {
setPageIndex(0); setPageIndex(0);
setPageSize(s); setPageSize(s);
await refreshDocuments?.({ pageIndex: 0, pageSize: s }); await refreshDocuments?.({ pageIndex: 0, pageSize: s });
}} }}
onFirst={async () => { onFirst={async () => {
setPageIndex(0); setPageIndex(0);
await refreshDocuments?.({ pageIndex: 0, pageSize }); await refreshDocuments?.({ pageIndex: 0, pageSize });
}} }}
onPrev={async () => { onPrev={async () => {
const next = Math.max(0, pageIndex - 1); const next = Math.max(0, pageIndex - 1);
if (next !== pageIndex) { if (next !== pageIndex) {
setPageIndex(next); setPageIndex(next);
await refreshDocuments?.({ pageIndex: next, pageSize }); await refreshDocuments?.({ pageIndex: next, pageSize });
} }
}} }}
onNext={async () => { onNext={async () => {
if (hasMore) { if (hasMore) {
const next = pageIndex + 1; const next = pageIndex + 1;
setPageIndex(next); setPageIndex(next);
await refreshDocuments?.({ pageIndex: next, pageSize }); await refreshDocuments?.({ pageIndex: next, pageSize });
} }
}} }}
onLast={() => {}} onLast={() => {}}
canPrev={pageIndex > 0} canPrev={pageIndex > 0}
canNext={hasMore} canNext={hasMore}
id={id} id={id}
/> />
</motion.div> </motion.div>

View file

@ -72,7 +72,7 @@ export default function WebpageCrawler() {
body: JSON.stringify({ body: JSON.stringify({
document_type: "CRAWLED_URL", document_type: "CRAWLED_URL",
content: urls, content: urls,
search_space_id: parseInt(search_space_id), search_space_id: parseInt(search_space_id, 10),
}), }),
} }
); );

View file

@ -81,7 +81,7 @@ export default function YouTubeVideoAdder() {
body: JSON.stringify({ body: JSON.stringify({
document_type: "YOUTUBE_VIDEO", document_type: "YOUTUBE_VIDEO",
content: videoUrls, content: videoUrls,
search_space_id: parseInt(search_space_id), search_space_id: parseInt(search_space_id, 10),
}), }),
} }
); );

View file

@ -9,7 +9,7 @@ export default function SearchSpaceDashboardPage() {
useEffect(() => { useEffect(() => {
router.push(`/dashboard/${search_space_id}/chats`); router.push(`/dashboard/${search_space_id}/chats`);
}, []); }, [router.push, search_space_id]);
return <></>; return <></>;
} }

View file

@ -175,7 +175,7 @@ export default function PodcastsPageClient({ searchSpaceId }: PodcastsPageClient
} }
// Filter by search space // Filter by search space
result = result.filter((podcast) => podcast.search_space_id === parseInt(searchSpaceId)); result = result.filter((podcast) => podcast.search_space_id === parseInt(searchSpaceId, 10));
// Sort podcasts // Sort podcasts
result.sort((a, b) => { result.sort((a, b) => {

View file

@ -101,7 +101,7 @@ export default function ResearcherPage() {
const customHandlerAppend = async ( const customHandlerAppend = async (
message: Message | CreateMessage, message: Message | CreateMessage,
chatRequestOptions?: { data?: any } _chatRequestOptions?: { data?: any }
) => { ) => {
const newChatId = await createChat(message.content, researchMode, selectedConnectors); const newChatId = await createChat(message.content, researchMode, selectedConnectors);
if (newChatId) { if (newChatId) {
@ -122,7 +122,7 @@ export default function ResearcherPage() {
setIsLoading(true); setIsLoading(true);
loadChatData(chatIdParam); loadChatData(chatIdParam);
} }
}, [token, isNewChat, chatIdParam]); }, [token, isNewChat, chatIdParam, loadChatData, setIsLoading]);
// Restore chat state from localStorage on page load // Restore chat state from localStorage on page load
useEffect(() => { useEffect(() => {
@ -142,6 +142,7 @@ export default function ResearcherPage() {
setSelectedConnectors, setSelectedConnectors,
setSearchMode, setSearchMode,
setResearchMode, setResearchMode,
restoreChatState,
]); ]);
const loadChatData = async (chatId: string) => { const loadChatData = async (chatId: string) => {
@ -187,7 +188,15 @@ export default function ResearcherPage() {
) { ) {
updateChat(chatIdParam, handler.messages, researchMode, selectedConnectors); updateChat(chatIdParam, handler.messages, researchMode, selectedConnectors);
} }
}, [handler.messages, handler.status, chatIdParam, isNewChat]); }, [
handler.messages,
handler.status,
chatIdParam,
isNewChat,
researchMode,
selectedConnectors,
updateChat,
]);
if (isLoading) { if (isLoading) {
return ( return (

View file

@ -1,5 +1,5 @@
{ {
"$schema": "https://biomejs.dev/schemas/2.1.2/schema.json", "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
"vcs": { "vcs": {
"enabled": true, "enabled": true,
"clientKind": "git", "clientKind": "git",

View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { ChevronDown, ChevronUp, ExternalLink, FileText, Loader2 } from "lucide-react"; import { ChevronDown, ChevronUp, ExternalLink, Loader2 } from "lucide-react";
import type React from "react"; import type React from "react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { MarkdownViewer } from "@/components/markdown-viewer"; import { MarkdownViewer } from "@/components/markdown-viewer";

View file

@ -40,10 +40,10 @@ const DocumentSelector = React.memo(
const { search_space_id } = useParams(); const { search_space_id } = useParams();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const { documents, loading, isLoaded, fetchDocuments } = useDocuments( const { documents, loading, isLoaded, fetchDocuments } = useDocuments(Number(search_space_id), {
Number(search_space_id), lazy: true,
true pageSize: 50,
); });
const handleOpenChange = useCallback( const handleOpenChange = useCallback(
(open: boolean) => { (open: boolean) => {

View file

@ -206,14 +206,14 @@ export function DocumentsDataTable({
if (hasChanges && Object.keys(initialRowSelection).length > 0) { if (hasChanges && Object.keys(initialRowSelection).length > 0) {
setRowSelection(initialRowSelection); setRowSelection(initialRowSelection);
} }
}, [initialRowSelection]); }, [initialRowSelection, rowSelection]);
// Initialize row selection on mount // Initialize row selection on mount
useEffect(() => { useEffect(() => {
if (Object.keys(rowSelection).length === 0 && Object.keys(initialRowSelection).length > 0) { if (Object.keys(rowSelection).length === 0 && Object.keys(initialRowSelection).length > 0) {
setRowSelection(initialRowSelection); setRowSelection(initialRowSelection);
} }
}, []); }, [initialRowSelection, rowSelection]);
const filteredDocuments = useMemo(() => { const filteredDocuments = useMemo(() => {
if (documentTypeFilter === "ALL") return documents; if (documentTypeFilter === "ALL") return documents;
@ -240,7 +240,7 @@ export function DocumentsDataTable({
const selectedRows = table.getFilteredSelectedRowModel().rows; const selectedRows = table.getFilteredSelectedRowModel().rows;
const selectedDocuments = selectedRows.map((row) => row.original); const selectedDocuments = selectedRows.map((row) => row.original);
onSelectionChange(selectedDocuments); onSelectionChange(selectedDocuments);
}, [rowSelection, onSelectionChange, table]); }, [onSelectionChange, table]);
const handleClearAll = () => setRowSelection({}); const handleClearAll = () => setRowSelection({});

View file

@ -65,7 +65,7 @@ export function AssignRolesStep({ onPreferencesUpdated }: AssignRolesStepProps)
const handleRoleAssignment = async (role: string, configId: string) => { const handleRoleAssignment = async (role: string, configId: string) => {
const newAssignments = { const newAssignments = {
...assignments, ...assignments,
[role]: configId === "" ? "" : parseInt(configId), [role]: configId === "" ? "" : parseInt(configId, 10),
}; };
setAssignments(newAssignments); setAssignments(newAssignments);
@ -80,15 +80,15 @@ export function AssignRolesStep({ onPreferencesUpdated }: AssignRolesStepProps)
const numericAssignments = { const numericAssignments = {
long_context_llm_id: long_context_llm_id:
typeof newAssignments.long_context_llm_id === "string" typeof newAssignments.long_context_llm_id === "string"
? parseInt(newAssignments.long_context_llm_id) ? parseInt(newAssignments.long_context_llm_id, 10)
: newAssignments.long_context_llm_id, : newAssignments.long_context_llm_id,
fast_llm_id: fast_llm_id:
typeof newAssignments.fast_llm_id === "string" typeof newAssignments.fast_llm_id === "string"
? parseInt(newAssignments.fast_llm_id) ? parseInt(newAssignments.fast_llm_id, 10)
: newAssignments.fast_llm_id, : newAssignments.fast_llm_id,
strategic_llm_id: strategic_llm_id:
typeof newAssignments.strategic_llm_id === "string" typeof newAssignments.strategic_llm_id === "string"
? parseInt(newAssignments.strategic_llm_id) ? parseInt(newAssignments.strategic_llm_id, 10)
: newAssignments.strategic_llm_id, : newAssignments.strategic_llm_id,
}; };

View file

@ -93,7 +93,7 @@ export function LLMRoleManager() {
const handleRoleAssignment = (role: string, configId: string) => { const handleRoleAssignment = (role: string, configId: string) => {
const newAssignments = { const newAssignments = {
...assignments, ...assignments,
[role]: configId === "unassigned" ? "" : parseInt(configId), [role]: configId === "unassigned" ? "" : parseInt(configId, 10),
}; };
setAssignments(newAssignments); setAssignments(newAssignments);
@ -121,19 +121,19 @@ export function LLMRoleManager() {
long_context_llm_id: long_context_llm_id:
typeof assignments.long_context_llm_id === "string" typeof assignments.long_context_llm_id === "string"
? assignments.long_context_llm_id ? assignments.long_context_llm_id
? parseInt(assignments.long_context_llm_id) ? parseInt(assignments.long_context_llm_id, 10)
: undefined : undefined
: assignments.long_context_llm_id, : assignments.long_context_llm_id,
fast_llm_id: fast_llm_id:
typeof assignments.fast_llm_id === "string" typeof assignments.fast_llm_id === "string"
? assignments.fast_llm_id ? assignments.fast_llm_id
? parseInt(assignments.fast_llm_id) ? parseInt(assignments.fast_llm_id, 10)
: undefined : undefined
: assignments.fast_llm_id, : assignments.fast_llm_id,
strategic_llm_id: strategic_llm_id:
typeof assignments.strategic_llm_id === "string" typeof assignments.strategic_llm_id === "string"
? assignments.strategic_llm_id ? assignments.strategic_llm_id
? parseInt(assignments.strategic_llm_id) ? parseInt(assignments.strategic_llm_id, 10)
: undefined : undefined
: assignments.strategic_llm_id, : assignments.strategic_llm_id,
}; };

View file

@ -1,6 +1,6 @@
import { dirname } from "node:path";
import { fileURLToPath } from "node:url";
import { FlatCompat } from "@eslint/eslintrc"; import { FlatCompat } from "@eslint/eslintrc";
import { dirname } from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url); const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename); const __dirname = dirname(__filename);

View file

@ -30,69 +30,81 @@ export type DocumentType =
| "AIRTABLE_CONNECTOR"; | "AIRTABLE_CONNECTOR";
export function useDocuments( export function useDocuments(
searchSpaceId: number, searchSpaceId: number,
optionsOrLazy?: boolean | { pageIndex?: number; pageSize?: number; lazy?: boolean } optionsOrLazy?: boolean | { pageIndex?: number; pageSize?: number; lazy?: boolean }
) { ) {
const lazy = typeof optionsOrLazy === "boolean" ? optionsOrLazy : optionsOrLazy?.lazy ?? false; const lazy = typeof optionsOrLazy === "boolean" ? optionsOrLazy : (optionsOrLazy?.lazy ?? false);
const pageIndex = typeof optionsOrLazy === "object" && optionsOrLazy?.pageIndex !== undefined ? optionsOrLazy.pageIndex : 0; const pageIndex =
const pageSize = typeof optionsOrLazy === "object" && optionsOrLazy?.pageSize !== undefined ? optionsOrLazy.pageSize : 50; typeof optionsOrLazy === "object" && optionsOrLazy?.pageIndex !== undefined
? optionsOrLazy.pageIndex
: 0;
const pageSize =
typeof optionsOrLazy === "object" && optionsOrLazy?.pageSize !== undefined
? optionsOrLazy.pageSize
: 50;
const [documents, setDocuments] = useState<Document[]>([]); const [documents, setDocuments] = useState<Document[]>([]);
const [loading, setLoading] = useState(!lazy); const [loading, setLoading] = useState(!lazy);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [isLoaded, setIsLoaded] = useState(false); const [isLoaded, setIsLoaded] = useState(false);
const [hasMore, setHasMore] = useState(false); const [hasMore, setHasMore] = useState(false);
const fetchDocuments = useCallback(async (override?: { pageIndex?: number; pageSize?: number }) => { const fetchDocuments = useCallback(
if (isLoaded && lazy && !override) return; async (override?: { pageIndex?: number; pageSize?: number }) => {
if (isLoaded && lazy && !override) return;
const effectivePageIndex = override?.pageIndex ?? pageIndex; const effectivePageIndex = override?.pageIndex ?? pageIndex;
const effectivePageSize = override?.pageSize ?? pageSize; const effectivePageSize = override?.pageSize ?? pageSize;
const skip = effectivePageIndex * effectivePageSize; const skip = effectivePageIndex * effectivePageSize;
const limit = effectivePageSize; const limit = effectivePageSize;
try { try {
setLoading(true); setLoading(true);
const url = new URL(`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`); const url = new URL(`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`);
if (searchSpaceId) url.searchParams.set("search_space_id", String(searchSpaceId)); if (searchSpaceId) url.searchParams.set("search_space_id", String(searchSpaceId));
url.searchParams.set("skip", String(skip)); url.searchParams.set("skip", String(skip));
url.searchParams.set("limit", String(limit)); url.searchParams.set("limit", String(limit));
const response = await fetch(url.toString(), { const response = await fetch(url.toString(), {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`, Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
}, },
method: "GET", method: "GET",
}); });
if (!response.ok) { if (!response.ok) {
toast.error("Failed to fetch documents"); toast.error("Failed to fetch documents");
throw new Error("Failed to fetch documents"); throw new Error("Failed to fetch documents");
} }
const data = await response.json(); const data = await response.json();
setDocuments(data); setDocuments(data);
setHasMore(Array.isArray(data) && data.length === effectivePageSize); setHasMore(Array.isArray(data) && data.length === effectivePageSize);
setError(null); setError(null);
setIsLoaded(true); setIsLoaded(true);
} catch (err: any) { } catch (err: any) {
setError(err.message || "Failed to fetch documents"); setError(err.message || "Failed to fetch documents");
console.error("Error fetching documents:", err); console.error("Error fetching documents:", err);
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, [searchSpaceId, isLoaded, lazy, pageIndex, pageSize]); },
[searchSpaceId, isLoaded, lazy, pageIndex, pageSize]
);
useEffect(() => { useEffect(() => {
if (!lazy && searchSpaceId !== undefined && searchSpaceId !== null) { if (!lazy && searchSpaceId !== undefined && searchSpaceId !== null) {
fetchDocuments(); fetchDocuments();
} }
}, [searchSpaceId, lazy, fetchDocuments, pageIndex, pageSize]); }, [searchSpaceId, lazy, fetchDocuments]);
const refreshDocuments = useCallback(async (override?: { pageIndex?: number; pageSize?: number }) => { const refreshDocuments = useCallback(
setIsLoaded(false); async (override?: { pageIndex?: number; pageSize?: number }) => {
await fetchDocuments(override); setIsLoaded(false);
}, [fetchDocuments]); await fetchDocuments(override);
},
[fetchDocuments]
);
// Function to delete a document // Function to delete a document
const deleteDocument = useCallback( const deleteDocument = useCallback(
@ -133,9 +145,9 @@ export function useDocuments(
isLoaded, isLoaded,
fetchDocuments, // Manual fetch function for lazy mode fetchDocuments, // Manual fetch function for lazy mode
refreshDocuments, refreshDocuments,
deleteDocument, deleteDocument,
hasMore, hasMore,
pageIndex, pageIndex,
pageSize, pageSize,
}; };
} }

View file

@ -79,7 +79,7 @@ export function useLLMConfigs() {
useEffect(() => { useEffect(() => {
fetchLLMConfigs(); fetchLLMConfigs();
}, []); }, [fetchLLMConfigs]);
const createLLMConfig = async (config: CreateLLMConfig): Promise<LLMConfig | null> => { const createLLMConfig = async (config: CreateLLMConfig): Promise<LLMConfig | null> => {
try { try {
@ -216,7 +216,7 @@ export function useLLMPreferences() {
useEffect(() => { useEffect(() => {
fetchPreferences(); fetchPreferences();
}, []); }, [fetchPreferences]);
const updatePreferences = async (newPreferences: Partial<LLMPreferences>): Promise<boolean> => { const updatePreferences = async (newPreferences: Partial<LLMPreferences>): Promise<boolean> => {
try { try {

View file

@ -54,7 +54,7 @@ export function useLogs(searchSpaceId?: number, filters: LogFilters = {}) {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// Memoize filters to prevent infinite re-renders // Memoize filters to prevent infinite re-renders
const memoizedFilters = useMemo(() => filters, [JSON.stringify(filters)]); const memoizedFilters = useMemo(() => filters, [filters]);
const buildQueryParams = useCallback( const buildQueryParams = useCallback(
(customFilters: LogFilters = {}) => { (customFilters: LogFilters = {}) => {

View file

@ -53,6 +53,47 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
}, },
]); ]);
// Update connector source items when connectors change
const updateConnectorSourceItems = useCallback((currentConnectors: SearchSourceConnector[]) => {
// Start with the default hardcoded connectors
const defaultConnectors: ConnectorSourceItem[] = [
{
id: 1,
name: "Crawled URL",
type: "CRAWLED_URL",
sources: [],
},
{
id: 2,
name: "File",
type: "FILE",
sources: [],
},
{
id: 3,
name: "Extension",
type: "EXTENSION",
sources: [],
},
{
id: 4,
name: "Youtube Video",
type: "YOUTUBE_VIDEO",
sources: [],
},
];
// Add the API connectors
const apiConnectors: ConnectorSourceItem[] = currentConnectors.map((connector, index) => ({
id: 1000 + index, // Use a high ID to avoid conflicts with hardcoded IDs
name: connector.name,
type: connector.connector_type,
sources: [],
}));
setConnectorSourceItems([...defaultConnectors, ...apiConnectors]);
}, []);
const fetchConnectors = useCallback(async () => { const fetchConnectors = useCallback(async () => {
if (isLoaded && lazy) return; // Avoid redundant calls in lazy mode if (isLoaded && lazy) return; // Avoid redundant calls in lazy mode
@ -94,7 +135,11 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}, [isLoaded, lazy]); }, [
isLoaded,
lazy, // Update connector source items when connectors change
updateConnectorSourceItems,
]);
useEffect(() => { useEffect(() => {
if (!lazy) { if (!lazy) {
@ -108,47 +153,6 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
await fetchConnectors(); await fetchConnectors();
}, [fetchConnectors]); }, [fetchConnectors]);
// Update connector source items when connectors change
const updateConnectorSourceItems = (currentConnectors: SearchSourceConnector[]) => {
// Start with the default hardcoded connectors
const defaultConnectors: ConnectorSourceItem[] = [
{
id: 1,
name: "Crawled URL",
type: "CRAWLED_URL",
sources: [],
},
{
id: 2,
name: "File",
type: "FILE",
sources: [],
},
{
id: 3,
name: "Extension",
type: "EXTENSION",
sources: [],
},
{
id: 4,
name: "Youtube Video",
type: "YOUTUBE_VIDEO",
sources: [],
},
];
// Add the API connectors
const apiConnectors: ConnectorSourceItem[] = currentConnectors.map((connector, index) => ({
id: 1000 + index, // Use a high ID to avoid conflicts with hardcoded IDs
name: connector.name,
type: connector.connector_type,
sources: [],
}));
setConnectorSourceItems([...defaultConnectors, ...apiConnectors]);
};
/** /**
* Create a new search source connector * Create a new search source connector
*/ */