@vertesia/ui 0.78.0 → 0.79.1

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

@@ -1,13 +1,12 @@
 import { useRef, useState, useEffect } from "react";
 import { ColumnLayout, ContentObject, ContentObjectItem, ComplexSearchQuery } from '@vertesia/common';
 import {
-   
     Button, Divider, ErrorBox, SidePanel, Spinner, useIntersectionObserver, useToast,
     FilterProvider, FilterBtn, FilterBar, FilterClear, Filter as BaseFilter
 } 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';
@@ -19,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" },
@@ -91,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,
     );
@@ -102,10 +101,11 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const [filters, setFilters] = useState<BaseFilter[]>([]);
 
     const loadMoreRef = useRef<HTMLDivElement>(null);
-    
+
     // 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(() => {
@@ -117,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);
@@ -151,10 +157,14 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
         } else if (query && query.full_text) {
             search.query.full_text = query.full_text;
             search.search().then(() => setIsReady(true));
-        } else {
-            delete search.query.vector;
-            delete search.query.full_text;
-            search.search().then(() => setIsReady(true));
+        } else if (query === undefined) {
+            // Only clear search if this is a user-initiated clear (not initialization)
+            // The VectorSearchWidget calls onChange(undefined) during initialization
+            if (isReady) {
+                delete search.query.vector;
+                delete search.query.full_text;
+                search.search().then(() => setIsReady(true));
+            }
         }
     };
 
@@ -194,19 +204,93 @@ 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>
             }
+            <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
@@ -226,7 +310,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
                                 <ContentDispositionButton onUpdate={setIsGridView} />
                             </div>
                         </div>
-                        <div className="flex gap-2 items-center">
+                        <div className="flex gap-2 items-center pt-2">
                             <FilterBar />
                             <FilterClear />
                         </div>
@@ -248,19 +332,6 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
                     </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
-            />
-            {
-                isLoading && <div className='flex justify-center'><Spinner size='xl' /></div>
-            }
-            <div ref={loadMoreRef} />
         </div>
     );
 }
@@ -279,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}>
@@ -289,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}