@vertesia/ui 0.76.0 → 0.78.0

package/src/core/hooks/PortalContainerProvider.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+const PortalContainerContext = React.createContext<HTMLElement | undefined>(undefined);
+
+function findOrCreatePortalContainer(root: ShadowRoot | Document, id = "plugin-portal-container") {
+    // look only at direct children
+    for (const child of Array.from(root.children)) {
+        if (child instanceof HTMLElement && child.id === id) {
+            return child;
+        }
+    }
+    // not found → create
+    const container = document.createElement("div");
+    container.id = id;
+    root.appendChild(container);
+    return container;
+}
+
+export function PortalContainerProvider({
+    children,
+    id = "plugin-portal-container",
+}: {
+    children: React.ReactNode;
+    id?: string;
+}) {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const [container, setContainer] = React.useState<HTMLElement | null | undefined>(undefined);
+
+    React.useEffect(() => {
+        if (ref.current) {
+            const root = ref.current.getRootNode();
+            if (root instanceof ShadowRoot || root instanceof Document) {
+                const container = findOrCreatePortalContainer(root, id);
+                setContainer(container);
+            } else {
+                setContainer(null);
+            }
+        }
+    }, [id]);
+
+    // If container not discovered yet → render hidden marker only
+    if (container === undefined) {
+        return <div ref={ref} style={{ display: "none" }} />;
+    }
+
+    // Once container is resolved (null or HTMLElement) → provide it
+    return (
+        <PortalContainerContext.Provider value={container || undefined}>
+            {children}
+        </PortalContainerContext.Provider>
+    );
+}
+
+export function usePortalContainer() {
+    return React.useContext(PortalContainerContext);
+}

package/src/core/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from "./CompositeState.js"
+export * from "./PortalContainerProvider.js"
 export * from "./SharedState.js"
 export * from "./useClickOutside.js"
 export * from "./useCopyToClipboard.js"

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

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 import { ColumnLayout, ContentObject, ContentObjectItem, ComplexSearchQuery } from '@vertesia/common';
 import {
    
@@ -12,6 +12,7 @@ import { useDocumentFilterGroups, useDocumentFilterHandler } from "../../facets/
 import { VectorSearchWidget } from './components/VectorSearchWidget';
 import { ContentDispositionButton } from './components/ContentDispositionButton';
 import { DocumentTable } from './DocumentTable';
+import { ExtendedColumnLayout } from './layout/DocumentTableColumn';
 import { useDocumentSearch, useWatchDocumentSearchFacets, useWatchDocumentSearchResult } from './search/DocumentSearchContext';
 import { useDocumentUploadHandler } from './upload/useUploadHandler';
 import { ContentOverview } from './components/ContentOverview';
@@ -101,6 +102,21 @@ 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) {
+            // Manually set loading state to show spinner during initial load
+            search._updateRunningState(true);
+            search.search().then(() => {
+                setIsReady(true);
+            }).catch(err => {
+                console.error('Initial search failed:', err);
+                search._updateRunningState(false);
+            });
+        }
+    }, []);
+
     useIntersectionObserver(loadMoreRef, () => {
         if (isReady && objects.length > 0 && objects.length != loaded) {
             setIsReady(false);
@@ -126,7 +142,8 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
                     {
                         name: "Search Score",
                         field: "score",
-                    } satisfies ColumnLayout,
+                        render: (item) => (item as any).score?.toFixed(4) || "0.0000"
+                    } satisfies ExtendedColumnLayout,
                 ];
                 setActualLayout(layout);
             }

package/src/features/store/objects/components/DocumentIcon.tsx

@@ -77,8 +77,8 @@ export function DocumentIcon({ selection, document, onSelectionChange, onRowClic
                 )
             }
             <Separator className='bg-gray-200 h-[2px]' />
-            <CardContent className="p-2 flex flex-col gap-1">
-                <div className="flex flex-col">
+            <CardContent className="p-2 flex flex-col">
+                <div className="flex flex-col overflow-hidden">
                     <VTooltip
                         placement='top'
                         description={document.properties?.title ?? document.name}>
@@ -94,6 +94,11 @@ export function DocumentIcon({ selection, document, onSelectionChange, onRowClic
                         ) : <p className="text-xs text-muted">{"\u2002"}</p>
                     }
                 </div>
+                {document.score && (
+                    <div className="text-xs text-muted w-full flex justify-end">    
+                        Score: {(document.score).toFixed(4) ?? "-"}
+                    </div>
+                )}
             </CardContent>
         </Card>
     )

package/src/features/store/objects/search/DocumentSearchContext.ts

@@ -107,9 +107,11 @@ export class DocumentSearch implements SearchInterface {
             facets: includeFacets ? this.facetSpecs : undefined
         };
 
-        return this.collectionId ?
+        const request = this.collectionId ?
             this.client.collections.searchMembers(this.collectionId, payload)
             : this.client.objects.search(payload);
+            
+        return request;
     }
 
     _facetsRequest() {
@@ -126,7 +128,7 @@ export class DocumentSearch implements SearchInterface {
     }
 
     _search(loadMore = false, noFacets = false) {
-        if (this.isRunning) { // avoid searching when a search is pending
+        if (this.isRunning && loadMore) { // avoid searching when a search is pending, but allow initial search
             return Promise.resolve(false);
         }
         this.result.value = {
@@ -165,7 +167,10 @@ export class DocumentSearch implements SearchInterface {
     }
 
     search(noFacets = false) {
-        if (this.isRunning) return Promise.resolve(false);
+        // Allow initial search even if isLoading is true (for initial page load)
+        if (this.isRunning && this.objects.length > 0) {
+            return Promise.resolve(false);
+        }
         return this._search(false, noFacets);
     }
 

package/src/shell/apps/AppProjectSelector.tsx

@@ -1,11 +1,11 @@
 import { ProjectRef, RequireAtLeastOne } from "@vertesia/common";
 import { SelectBox, useFetch } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
+import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
 import { useState } from "react";
 
 interface AppProjectSelectorProps {
     app: RequireAtLeastOne<{ id?: string, name?: string }, 'id' | 'name'>;
-    onChange: (value: ProjectRef) => void;
+    onChange?: (value: ProjectRef) => void | boolean;
     placeholder?: string;
 }
 export function AppProjectSelector({ app, onChange, placeholder }: AppProjectSelectorProps) {
@@ -14,11 +14,23 @@ export function AppProjectSelector({ app, onChange, placeholder }: AppProjectSel
         return client.apps.getAppInstallationProjects(app);
     }, [app.id, app.name])
 
+    const _onChange = (project: ProjectRef) => {
+        if (onChange) {
+            if (!onChange(project)) {
+                // if onChange returns true then the defualt on change is called
+                return;
+            }
+        }
+        // default on change
+        localStorage.setItem(LastSelectedAccountId_KEY, project.account);
+        localStorage.setItem(LastSelectedProjectId_KEY + '-' + project.account, project.id);
+        window.location.reload();
+    }
+
     if (error) {
         return <span className='text-red-600'>Error: failed to fetch projects: {error.message}</span>
     }
-
-    return <SelectProject placeholder={placeholder} initialValue={project?.id} projects={projects || []} onChange={onChange} />
+    return <SelectProject placeholder={placeholder} initialValue={project?.id} projects={projects || []} onChange={_onChange} />
 }
 
 interface SelectProjectProps {
@@ -28,17 +40,16 @@ interface SelectProjectProps {
     placeholder?: string;
 }
 function SelectProject({ initialValue, projects, onChange, placeholder = "Select Project" }: Readonly<SelectProjectProps>) {
-    const [value, setValue] = useState<ProjectRef | undefined>(() => {
-        return initialValue ? projects.find(p => p.id === initialValue) : undefined
-    });
+    const [value, setValue] = useState<ProjectRef | undefined>();
     const _onChange = (value: ProjectRef) => {
         setValue(value)
         onChange(value)
     }
+    let actualValue = !value && initialValue ? projects.find(p => p.id === initialValue) : value;
     return (
         <SelectBox
             by="id"
-            value={value}
+            value={actualValue}
             options={projects}
             optionLabel={(option) => option.name}
             placeholder={placeholder}

package/src/shell/apps/index.ts

@@ -1,3 +1,3 @@
 export * from "./AppInstallationProvider";
+export * from "./AppProjectSelector";
 export * from "./StandaloneApp";
-export * from "./AppProjectSelector";