@vertesia/ui 0.79.0 → 0.79.2

package/src/features/store/objects/DocumentSearchResults.tsx

@@ -6,7 +6,7 @@ import {
 } from '@vertesia/ui/core';
 import { useNavigate } from "@vertesia/ui/router";
 import { TypeRegistry, useUserSession } from '@vertesia/ui/session';
-import { Download, RefreshCw, Eye } from 'lucide-react';
+import { Download, RefreshCw, ExternalLink } from 'lucide-react';
 import { useDocumentFilterGroups, useDocumentFilterHandler } from "../../facets/DocumentsFacetsNav";
 import { VectorSearchWidget } from './components/VectorSearchWidget';
 import { ContentDispositionButton } from './components/ContentDispositionButton';
@@ -18,8 +18,8 @@ import { ContentOverview } from './components/ContentOverview';
 import { useDownloadDocument } from './components/useDownloadObject';
 
 const defaultLayout: ColumnLayout[] = [
-    { name: "ID", field: "id", type: "string?slice=-7" },
-    { name: "Name", field: ".", type: "objectLink" },
+    { name: "ID", field: "id", type: "objectId?slice=-7" },
+    { name: "Name", field: ".", type: "objectName" },
     { name: "Type", field: "type.name", type: "string" },
     { name: "Status", field: "status", type: "string" },
     { name: "Updated At", field: "updated_at", type: "date" },
@@ -90,7 +90,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const [isReady, setIsReady] = useState(false);
     const [selectedObject, setSelectedObject] = useState<ContentObjectItem | null>(null);
     const { typeRegistry } = useUserSession();
-    const { search, isLoading, error, objects } = useWatchDocumentSearchResult();
+    const { search, isLoading, error, objects, hasMore } = useWatchDocumentSearchResult();
     const [actualLayout, setActualLayout] = useState<ColumnLayout[]>(
         typeRegistry ? layout || getTableLayout(typeRegistry, search.query.type) : defaultLayout,
     );
@@ -105,6 +105,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     // Trigger initial search when component mounts
     useEffect(() => {
         if (!isReady && objects.length === 0) {
+            setLoaded(0);
             // Manually set loading state to show spinner during initial load
             search._updateRunningState(true);
             search.search().then(() => {
@@ -116,6 +117,12 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
         }
     }, []);
 
+    useEffect(() => {
+        if (objects.length < loaded) {
+            setLoaded(objects.length);
+        }
+    }, [objects.length, loaded]);
+
     useIntersectionObserver(loadMoreRef, () => {
         if (isReady && objects.length > 0 && objects.length != loaded) {
             setIsReady(false);
@@ -197,75 +204,134 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
                 } else {
                     url.searchParams.delete('filters');
                 }
-                window.history.replaceState({}, '', url.toString());
+                window.history.replaceState(window.history.state || {}, '', url.toString());
             }
         } catch (error) {
             console.error("Failed to clean start/end filters from URL:", error);
         }
     }
 
+    const navigate = useNavigate();
+    const onRowClick = (object: ContentObjectItem) => {
+        navigate(`/objects/${object.id}`);
+    }
+
+    const previewObject = (objectId: string) => {
+        const obj = objects.find(o => o.id === objectId) || null;
+        setSelectedObject(obj);
+    }
+
     return (
         <div className="flex flex-col gap-y-2">
             <OverviewDrawer object={selectedObject} onClose={() => setSelectedObject(null)} />
             {
                 error && <ErrorBox title="Error">{error.message}</ErrorBox>
             }
-            <div className="sticky top-0 z-10 bg-background pb-2">
-                {
-                    allowFilter && (
-                        <FilterProvider
-                            filterGroups={filterGroups}
-                            filters={filters}
-                            setFilters={handleFilterChange}
-                        >
-                            <div className="flex flex-row gap-4 items-center justify-between w-full">
-                                <div className="flex gap-2 items-center w-2/3">
-                                    {
-                                        allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} className="w-full" />
-                                    }
-                                    <FilterBtn />
-                                </div>
-                                <div className="flex gap-1 items-center">
-                                    <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
-                                    <ContentDispositionButton onUpdate={setIsGridView} />
-                                </div>
-                            </div>
-                            <div className="flex gap-2 items-center">
-                                <FilterBar />
-                                <FilterClear />
-                            </div>
-                        </FilterProvider>
-                    )
-                }
-                {
-                    !allowFilter && (
+            <Toolsbar
+                isLoading={isLoading}
+                refreshTrigger={refreshTrigger}
+                allowFilter={allowFilter}
+                allowSearch={allowSearch}
+                filterGroups={filterGroups}
+                filters={filters}
+                handleFilterChange={handleFilterChange}
+                handleVectorSearch={handleVectorSearch}
+                handleRefetch={handleRefetch}
+                setIsGridView={setIsGridView}
+            />
+            <DocumentTable
+                objects={objects}
+                isLoading={!objects.length && isLoading}
+                layout={actualLayout}
+                onRowClick={onRowClick}
+                previewObject={previewObject}
+                selectedObject={selectedObject}
+                onUpload={onUpload}
+                isGridView={isGridView}
+                collectionId={searchContext.collectionId} // Pass the collection ID from context
+            />
+            {hasMore ? (
+                <div ref={loadMoreRef} className="w-full flex justify-center" >
+                    <Spinner size='xl' />
+                </div>
+            ) : (
+                <div className="text-muted text-center text-sm py-1">
+                    {`All ${objects.length} objects loaded.`}
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface ToolsbarProps {
+    isLoading: boolean;
+    refreshTrigger: number;
+    allowFilter: boolean;
+    allowSearch: boolean;
+    filterGroups: ReturnType<typeof useDocumentFilterGroups>;
+    filters: BaseFilter[];
+    handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>>;
+    handleVectorSearch: (query?: ComplexSearchQuery) => void;
+    handleRefetch: () => void;
+    setIsGridView: React.Dispatch<React.SetStateAction<boolean>>;
+}
+function Toolsbar(props: ToolsbarProps) {
+    const {
+        isLoading,
+        refreshTrigger,
+        allowFilter,
+        allowSearch,
+        filterGroups,
+        filters,
+        handleFilterChange,
+        handleVectorSearch,
+        handleRefetch,
+        setIsGridView
+    } = props;
+
+    return (
+        <div className="sticky top-0 z-10 bg-background py-2">
+            {
+                allowFilter && (
+                    <FilterProvider
+                        filterGroups={filterGroups}
+                        filters={filters}
+                        setFilters={handleFilterChange}
+                    >
                         <div className="flex flex-row gap-4 items-center justify-between w-full">
                             <div className="flex gap-2 items-center w-2/3">
                                 {
-                                    allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} />
+                                    allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} className="w-full" />
                                 }
+                                <FilterBtn />
                             </div>
                             <div className="flex gap-1 items-center">
                                 <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
                                 <ContentDispositionButton onUpdate={setIsGridView} />
                             </div>
                         </div>
-                    )
-                }
-            </div>
-            <DocumentTable
-                objects={objects}
-                isLoading={!objects.length && isLoading}
-                layout={actualLayout}
-                onRowClick={setSelectedObject}
-                onUpload={onUpload}
-                isGridView={isGridView}
-                collectionId={searchContext.collectionId} // Pass the collection ID from context
-            />
+                        <div className="flex gap-2 items-center pt-2">
+                            <FilterBar />
+                            <FilterClear />
+                        </div>
+                    </FilterProvider>
+                )
+            }
             {
-                isLoading && <div className='flex justify-center'><Spinner size='xl' /></div>
+                !allowFilter && (
+                    <div className="flex flex-row gap-4 items-center justify-between w-full">
+                        <div className="flex gap-2 items-center w-2/3">
+                            {
+                                allowSearch && <VectorSearchWidget onChange={handleVectorSearch} isLoading={isLoading} refresh={refreshTrigger} />
+                            }
+                        </div>
+                        <div className="flex gap-1 items-center">
+                            <Button variant="outline" onClick={handleRefetch} alt="Refresh"><RefreshCw size={16} /></Button>
+                            <ContentDispositionButton onUpdate={setIsGridView} />
+                        </div>
+                    </div>
+                )
             }
-            <div ref={loadMoreRef} />
         </div>
     );
 }
@@ -284,7 +350,7 @@ function OverviewDrawer({ object, onClose }: OverviewDrawerProps) {
         <SidePanel title={object.properties?.title || object.name} isOpen={true} onClose={onClose}>
             <div className="flex items-center gap-x-2">
                 <Button variant="ghost" size="sm" title="Open Object" onClick={() => navigate(`/objects/${object.id}`)}>
-                    <Eye className="size-4" />
+                    <ExternalLink className="size-4" />
                 </Button>
                 {object.content?.source && (
                     <Button variant="ghost" size="sm" title="Download" onClick={onDownload}>
@@ -294,7 +360,7 @@ function OverviewDrawer({ object, onClose }: OverviewDrawerProps) {
             </div>
             <Divider className="my-2" />
             <div className="pt-2">
-                <ContentOverview object={object as unknown as ContentObject} loadText />
+                <ContentOverview key={object.id} object={object as ContentObject} loadText />
             </div>
         </SidePanel>
     ) : null;

package/src/features/store/objects/DocumentTable.tsx

@@ -10,8 +10,8 @@ import { useDocumentSearch } from "./search/DocumentSearchContext";
 import { FileWithMetadata, DocumentUploadModal, useSmartFileUploadProcessing } from "./upload";
 
 const defaultLayout: ExtendedColumnLayout[] = [
-    { name: "ID", field: "id", type: "string?slice=-7" },
-    { name: "Name", field: ".", type: "objectLink" },
+    { name: "ID", field: "id", type: "objectId?slice=-7" },
+    { name: "Name", field: ".", type: "objectName" },
     { name: "Type", field: "type.name", type: "string" },
     { name: "Status", field: "status", type: "string" },
     { name: "Updated At", field: "updated_at", type: "date" },
@@ -19,6 +19,8 @@ const defaultLayout: ExtendedColumnLayout[] = [
 
 interface DocumentTableProps extends DocumentTableImplProps {
     isGridView?: boolean;
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
     onUpload?: (files: File[], type: string | null, collectionId?: string) => Promise<unknown>; // if defined, accept drag drop to upload
     collectionId?: string; // Important: Add collection ID to ensure uploads go to the right collection
 }
@@ -303,6 +305,8 @@ interface DocumentTableImplProps {
     onSelectionChange?: (selection: DocumentSelection) => void;
     highlightRow?: (item: ContentObjectItem) => boolean;
     rowActions?: (item: ContentObjectItem) => React.ReactNode[];
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
     isGridView?: boolean;
 }
 function DocumentTableImpl({
@@ -311,6 +315,8 @@ function DocumentTableImpl({
     isLoading,
     onRowClick,
     onSelectionChange,
+    previewObject,
+    selectedObject,
     isGridView,
 }: DocumentTableImplProps) {
     const selection = useOptionalDocumentSelection();
@@ -363,8 +369,8 @@ function DocumentTableImpl({
     const columns = useMemo(() => {
         // avoid rendering empty layouts
         const actualLayout = layout.length > 0 ? layout : defaultLayout;
-        return actualLayout.map((col) => new DocumentTableColumn(col));
-    }, [layout]);
+        return actualLayout.map((col) => new DocumentTableColumn(col, previewObject));
+    }, [layout, previewObject]);
 
     return isGridView ? (
         <DocumentGridView
@@ -372,6 +378,8 @@ function DocumentTableImpl({
             isLoading={isLoading}
             columns={columns}
             onRowClick={onRowClick}
+            previewObject={previewObject}
+            selectedObject={selectedObject}
             selection={selection}
             toggleAll={toggleAll}
             onSelectionChange={_onSelectionChange}
@@ -382,6 +390,8 @@ function DocumentTableImpl({
             isLoading={isLoading}
             columns={columns}
             onRowClick={onRowClick}
+            previewObject={previewObject}
+            selectedObject={selectedObject}
             selection={selection}
             toggleAll={toggleAll}
             onSelectionChange={_onSelectionChange}