@vertesia/ui 1.0.0 → 1.1.0-dev.20260427.060440Z

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

@@ -237,73 +237,71 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
 
     return (
         <>
-            <div className="flex justify-between items-center px-2">
-                <div className="flex items-center gap-1 bg-muted mb-2 p-1 rounded">
-                    <Button
-                        variant={`${viewCode ? "ghost" : "primary"}`}
-                        size="sm"
-                        alt={t('store.previewProperties')}
-                        onClick={() => setViewCode(!viewCode)}
-                    >
-                        Properties
-                    </Button>
-                    <Button
-                        variant={`${viewCode ? "primary" : "ghost"}`}
-                        size="sm"
-                        alt={t('store.viewInJsonFormat')}
-                        onClick={() => setViewCode(!viewCode)}
-                    >
-                        JSON
-                    </Button>
-                </div>
-                <div className="flex items-center gap-2">
-                    {object.properties && (
+            <div className="flex flex-col h-full">
+                <div className="flex justify-between items-center px-2">
+                    <div className="flex items-center gap-1 bg-muted mb-2 p-1 rounded">
+                        <Button
+                            variant={`${viewCode ? "ghost" : "primary"}`}
+                            size="sm"
+                            alt={t('store.previewProperties')}
+                            onClick={() => setViewCode(!viewCode)}
+                        >
+                            Properties
+                        </Button>
+                        <Button
+                            variant={`${viewCode ? "primary" : "ghost"}`}
+                            size="sm"
+                            alt={t('store.viewInJsonFormat')}
+                            onClick={() => setViewCode(!viewCode)}
+                        >
+                            JSON
+                        </Button>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        {object.properties && (
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                title="Copy properties"
+                                onClick={() =>
+                                    handleCopyContent(
+                                        JSON.stringify(
+                                            object.properties,
+                                            null,
+                                            2,
+                                        ),
+                                        "properties",
+                                    )
+                                }
+                            >
+                                <Copy className="size-4" />
+                            </Button>
+                        )}
                         <Button
                             variant="ghost"
                             size="sm"
-                            title="Copy properties"
-                            onClick={() =>
-                                handleCopyContent(
-                                    JSON.stringify(
-                                        object.properties,
-                                        null,
-                                        2,
-                                    ),
-                                    "properties",
-                                )
-                            }
+                            onClick={handleOpenPropertiesModal}
+                            title="Edit properties"
+                            className="flex items-center gap-2"
                         >
-                            <Copy className="size-4" />
+                            <SquarePen className="size-4" />
                         </Button>
-                    )}
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={handleOpenPropertiesModal}
-                        title="Edit properties"
-                        className="flex items-center gap-2"
-                    >
-                        <SquarePen className="size-4" />
-                    </Button>
+                    </div>
                 </div>
-            </div>
 
-            {
-                object.properties ? (
-                    <div className={`h-full px-2`}>
+                {object.properties ? (
+                    <div className="flex-1 min-h-0 px-2">
                         <JSONDisplay
                             value={object.properties}
                             viewCode={viewCode}
-
                         />
                     </div>
                 ) : (
-                    <div className={`h-full px-2`}>
+                    <div className="flex-1 min-h-0 px-2">
                         <div>{t('store.noPropertiesDefined')}</div>
                     </div>
-                )
-            }
-            {/* Properties Editor Modal */}
+                )}
+            </div>
             <PropertiesEditorModal
                 isOpen={isPropertiesModalOpen}
                 onClose={handleClosePropertiesModal}
@@ -337,6 +335,13 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
     };
 
     const [currentPanel, setCurrentPanel] = useState<PanelView>(getInitialView());
+    const [hasVisitedPdfPanel, setHasVisitedPdfPanel] = useState(currentPanel === PanelView.Pdf);
+
+    useEffect(() => {
+        if (currentPanel === PanelView.Pdf) {
+            setHasVisitedPdfPanel(true);
+        }
+    }, [currentPanel]);
 
     // Text editing state
     const [isEditing, setIsEditing] = useState(false);
@@ -358,8 +363,10 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
         loadText: reloadText,
     } = useObjectText(object.id, object.text, loadText);
 
-    // Poll for PDF/document processing status when object is created or processing
-    const shouldPollProgress = (isPdf || isPreviewableAsPdfDoc) && isCreatedOrProcessing;
+    // Only poll while the active panel can actually surface processing progress.
+    const shouldPollProgress = (isPdf || isPreviewableAsPdfDoc)
+        && isCreatedOrProcessing
+        && (currentPanel === PanelView.Text || currentPanel === PanelView.Pdf);
     const {
         progress: pdfProgress,
         status: pdfStatus,
@@ -375,15 +382,19 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
         triggerConversion: triggerOfficePdfConversion,
     } = useOfficePdfConversion(object.id, isPreviewableAsPdfDoc);
 
-    // Reload object when PDF processing completes
+    // Load text once processing completes without triggering a full object refetch
+    // (which would flash the page-level loading spinner).
     useEffect(() => {
         if (processingComplete && pdfStatus === WorkflowExecutionStatus.COMPLETED) {
-            refetch?.();
+            reloadText();
         }
-    }, [processingComplete, pdfStatus, refetch]);
+    }, [processingComplete, pdfStatus, reloadText]);
 
     // Show processing panel when workflow is running (for both PDFs and Office documents)
     const showProcessingPanel = (isPdf || isPreviewableAsPdfDoc) && isCreatedOrProcessing && !processingComplete && pdfStatus === WorkflowExecutionStatus.RUNNING;
+    const showPdfPreviewPanel = currentPanel === PanelView.Pdf && !showProcessingPanel;
+    const showPdfProcessingPanel = showProcessingPanel && (currentPanel === PanelView.Text || currentPanel === PanelView.Pdf);
+    const keepPdfPreviewMounted = hasVisitedPdfPanel && !showProcessingPanel;
 
     const textContainerRef = useRef<HTMLDivElement | null>(null);
 
@@ -489,27 +500,33 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                     />
                 )}
             </div>
-            <div className={getPanelVisibility(currentPanel === PanelView.Image)}>
-                <ImagePanel object={object} />
-            </div>
-            <div className={getPanelVisibility(currentPanel === PanelView.Video)}>
-                <VideoPanel object={object} />
-            </div>
-            <div className={getPanelVisibility(currentPanel === PanelView.Audio)}>
-                <AudioPanel object={object} />
-            </div>
-            {hasTranscript && (
-                <div className={getPanelVisibility(currentPanel === PanelView.Transcript)}>
+            {currentPanel === PanelView.Image && (
+                <div className={getPanelVisibility(true)}>
+                    <ImagePanel object={object} />
+                </div>
+            )}
+            {currentPanel === PanelView.Video && (
+                <div className={getPanelVisibility(true)}>
+                    <VideoPanel object={object} />
+                </div>
+            )}
+            {currentPanel === PanelView.Audio && (
+                <div className={getPanelVisibility(true)}>
+                    <AudioPanel object={object} />
+                </div>
+            )}
+            {hasTranscript && currentPanel === PanelView.Transcript && (
+                <div className={getPanelVisibility(true)}>
                     <TranscriptPanel object={object} handleCopyContent={handleCopyContent} />
                 </div>
             )}
-            {isPdf && (
-                <div className={getPanelVisibility(currentPanel === PanelView.Pdf)}>
+            {isPdf && keepPdfPreviewMounted && (
+                <div className={getPanelVisibility(showPdfPreviewPanel)}>
                     <PdfPreviewPanel object={object} />
                 </div>
             )}
-            {isPreviewableAsPdfDoc && (
-                <div className={getPanelVisibility(currentPanel === PanelView.Pdf)}>
+            {isPreviewableAsPdfDoc && keepPdfPreviewMounted && (
+                <div className={getPanelVisibility(showPdfPreviewPanel)}>
                     <OfficePdfPreviewPanel
                         pdfRendition={pdfRendition}
                         officePdfUrl={officePdfUrl}
@@ -519,24 +536,28 @@ function DataPanel({ object, loadText, handleCopyContent, refetch }: { object: C
                     />
                 </div>
             )}
-            {showProcessingPanel && (
-                <div className={getPanelVisibility(currentPanel === PanelView.Text)}>
+            {showPdfProcessingPanel && (
+                <div className={getPanelVisibility(true)}>
                     <PdfProcessingPanel progress={pdfProgress} status={pdfStatus} outputFormat={pdfOutputFormat} />
                 </div>
             )}
-            <div className={getPanelVisibility(currentPanel === PanelView.Text && !showProcessingPanel && isLoadingText)}>
-                <div className="flex justify-center items-center flex-1">
-                    <Spinner size="lg" />
+            {currentPanel === PanelView.Text && !showProcessingPanel && isLoadingText && (
+                <div className={getPanelVisibility(true)}>
+                    <div className="flex justify-center items-center flex-1">
+                        <Spinner size="lg" />
+                    </div>
                 </div>
-            </div>
-            <div className={getPanelVisibility(currentPanel === PanelView.Text && !showProcessingPanel && !isLoadingText)}>
-                <TextPanel
-                    object={object}
-                    text={displayText}
-                    isTextCropped={isTextCropped}
-                    textContainerRef={textContainerRef}
-                />
-            </div>
+            )}
+            {currentPanel === PanelView.Text && !showProcessingPanel && !isLoadingText && (
+                <div className={getPanelVisibility(true)}>
+                    <TextPanel
+                        object={object}
+                        text={displayText}
+                        isTextCropped={isTextCropped}
+                        textContainerRef={textContainerRef}
+                    />
+                </div>
+            )}
             {isEditing && currentPanel === PanelView.Text && fullText != null && (
                 <TextEditorPanel
                     object={object}
@@ -1279,4 +1300,4 @@ function ProgressLine({ name, progress }: { name: string, progress: { total: num
             <span>{progress.processed} of {progress.total}</span>
         </div>
     );
-}
+}

package/src/features/store/objects/components/useContentPanelHooks.ts

@@ -83,52 +83,87 @@ export function useObjectText(objectId: string, initialText?: string, loadOnMoun
 export function usePdfProcessingStatus(objectId: string, shouldPoll: boolean) {
     const { client } = useUserSession();
 
-    const [progress, setProgress] = useState<DocAnalyzerProgress | undefined>();
-    const [status, setStatus] = useState<WorkflowExecutionStatus | undefined>();
-    const [outputFormat, setOutputFormat] = useState<DocProcessorOutputFormat | undefined>();
-    const [isComplete, setIsComplete] = useState(false);
+    const [state, setState] = useState<{
+        progress?: DocAnalyzerProgress;
+        status?: WorkflowExecutionStatus;
+        outputFormat?: DocProcessorOutputFormat;
+        isComplete: boolean;
+    }>({ isComplete: false });
 
     useEffect(() => {
         if (!shouldPoll) return;
 
         let interrupted = false;
+        let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+        const updateStateIfChanged = (
+            nextProgress: DocAnalyzerProgress | undefined,
+            nextStatus: WorkflowExecutionStatus | undefined,
+            nextOutputFormat: DocProcessorOutputFormat | undefined,
+            nextIsComplete: boolean,
+        ) => {
+            setState((prev) => {
+                const prevProgress = JSON.stringify(prev.progress ?? null);
+                const nextProgressSignature = JSON.stringify(nextProgress ?? null);
+
+                if (
+                    prev.status === nextStatus
+                    && prev.outputFormat === nextOutputFormat
+                    && prev.isComplete === nextIsComplete
+                    && prevProgress === nextProgressSignature
+                ) {
+                    return prev;
+                }
+
+                return {
+                    progress: nextProgress,
+                    status: nextStatus,
+                    outputFormat: nextOutputFormat,
+                    isComplete: nextIsComplete,
+                };
+            });
+        };
 
         function poll() {
             if (interrupted) return;
 
             client.objects.analyze(objectId).getStatus()
                 .then((r) => {
-                    setProgress(r.progress);
-                    setStatus(r.status);
-                    setOutputFormat(r.output_format ?? r.progress?.output_format);
+                    const nextOutputFormat = r.output_format ?? r.progress?.output_format;
 
                     if (r.status === WorkflowExecutionStatus.RUNNING) {
+                        updateStateIfChanged(r.progress, r.status, nextOutputFormat, false);
                         // Workflow is running, poll every 2 seconds for progress
                         if (!interrupted) {
-                            setTimeout(poll, 2000);
+                            timeoutId = setTimeout(poll, 2000);
                         }
                     } else {
                         // Workflow completed or terminal state
-                        setIsComplete(true);
+                        updateStateIfChanged(r.progress, r.status, nextOutputFormat, true);
                     }
                 })
                 .catch(() => {
                     // No workflow found yet, poll every 10 seconds to check if one starts
                     if (!interrupted) {
-                        setTimeout(poll, 10000);
+                        timeoutId = setTimeout(poll, 10000);
                     }
                 });
         }
 
         poll();
-        return () => { interrupted = true; };
+        return () => {
+            interrupted = true;
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
     }, [shouldPoll, objectId, client]);
 
     return {
-        progress,
-        status,
-        outputFormat,
-        isComplete,
+        progress: state.progress,
+        status: state.status,
+        outputFormat: state.outputFormat,
+        isComplete: state.isComplete,
     };
 }
 

package/src/features/store/objects/selection/ObjectsActionContext.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useMemo } from 'react';
 
-import { ColumnLayout } from '@vertesia/common';
+import { ContentObjectTypeItem } from '@vertesia/common';
 import { ErrorBox, useFetch, useToast } from '@vertesia/ui/core';
 import { useUserSession } from '@vertesia/ui/session';
 import { useUITranslation } from '../../../../i18n/index.js';
@@ -29,9 +29,9 @@ const DEFAULT_ACTIONS: ObjectsActionSpec[] = [
 
 interface ObjectsActionContextProps {
     children: ReactNode;
-    table_layout?: ColumnLayout[];
+    type?: ContentObjectTypeItem;
 }
-export function ObjectsActionContextProvider({ children, table_layout }: ObjectsActionContextProps) {
+export function ObjectsActionContextProvider({ children, type }: ObjectsActionContextProps) {
     const { t } = useUITranslation();
     const selection = useDocumentSelection();
     const toast = useToast();
@@ -55,12 +55,12 @@ export function ObjectsActionContextProvider({ children, table_layout }: Objects
 
     const context = useMemo(() => {
         const context = new ObjectsActionContext({
-            selection, toast, client, search, table_layout
+            selection, toast, client, search, type
         });
         context.allActions = DEFAULT_ACTIONS;
         context.wfRules = rules!;
         return context;
-    }, [selection, rules, table_layout]);
+    }, [selection, rules, type]);
 
     if (error) {
         return <ErrorBox title={t('store.failedToFetchWorkflows')}>{error.message}</ErrorBox>

package/src/features/store/objects/selection/ObjectsActionSpec.ts

@@ -1,5 +1,5 @@
 import { VertesiaClient } from "@vertesia/client";
-import { ColumnLayout } from "@vertesia/common";
+import { ColumnLayout, ContentObjectTypeItem } from "@vertesia/common";
 import { ToastFn } from "@vertesia/ui/core";
 import { DocumentSelection } from '../DocumentSelectionProvider';
 import { DocumentSearch } from '../search/DocumentSearchContext';
@@ -22,6 +22,7 @@ export interface ObjectsActionParams {
     toast: ToastFn,
     search: DocumentSearch,
     table_layout?: ColumnLayout[],
+    type?: ContentObjectTypeItem,
 }
 
 export interface ActionComponentTypeProps {

package/src/features/store/objects/selection/SelectionActions.tsx

@@ -1,11 +1,12 @@
-import { ColumnLayout } from '@vertesia/common';
+import { ContentObjectTypeItem } from '@vertesia/common';
 import { Button, Popover, PopoverContent, PopoverTrigger, SelectList } from '@vertesia/ui/core';
 import clsx from 'clsx';
 import { EllipsisVertical, X } from 'lucide-react';
 
 import { useState } from "react";
 import { useUITranslation } from '../../../../i18n/index.js';
-import { DocumentSelection, DocumentUploadModal, useDocumentSelection } from "../../../store";
+import { DocumentSelection, useDocumentSelection } from "../DocumentSelectionProvider.js";
+import { DocumentUploadModal } from "../upload/DocumentUploadModal.js";
 import { ExportPropertiesAction } from "./actions/ExportPropertiesAction";
 import { StartWorkflowAction } from "./actions/StartWorkflowComponent";
 import { ObjectsActionContextProvider } from "./ObjectsActionContext";
@@ -13,9 +14,9 @@ import { useObjectsActionContext } from "./ObjectsActionHooks";
 import { ObjectsActionSpec } from "./ObjectsActionSpec";
 
 interface SelectionActionsProps {
-    table_layout?: ColumnLayout[];
+    type?: ContentObjectTypeItem;
 }
-export function SelectionActions({ table_layout }: SelectionActionsProps) {
+export function SelectionActions({ type }: SelectionActionsProps) {
     const selection = useDocumentSelection();
     const size = selection.size();
     const plural = size > 1 ? "s" : "";
@@ -28,7 +29,7 @@ export function SelectionActions({ table_layout }: SelectionActionsProps) {
     };
 
     return (
-        <ObjectsActionContextProvider table_layout={table_layout}>
+        <ObjectsActionContextProvider type={type}>
             <div className="flex items-center gap-x-2">
                 {hasSelection && !hasSingleSelection &&
                     <div className="flex items-center gap-x-1 shrink-0">

package/src/features/store/objects/selection/actions/ExportPropertiesAction.tsx

@@ -55,14 +55,17 @@ export function ExportPropertiesComponent({ action, objectIds }: ActionComponent
                 }
             }
 
+            const typeId = ctx.params?.type?.id ?? query.type;
+            const table_layout = ctx.params?.type?.table_layout ?? undefined;
+
             getObjectIds().then((Ids) => {
                 // When exporting all, send search result if a vector search was used
-                // otherwise send the query.
+                // otherwise send the query — always constrained to the current content type.
                 store.objects.exportProperties({
                     objectIds: Ids,
                     type: exportType,
-                    query: exportAll && !query.vector ? query : { type: query.type },
-                    table_layout: ctx.params?.table_layout,
+                    query: exportAll && !query.vector ? { ...query, type: typeId } : { type: typeId },
+                    table_layout: table_layout,
                 }).then((response) => {
                     let data;
 
@@ -102,6 +105,12 @@ export function ExportPropertiesComponent({ action, objectIds }: ActionComponent
             });
         } else {
             setOpen(false);
+            toast({
+                status: 'error',
+                title: t('store.actions.errorExportProperties'),
+                description: 'No objects selected for export',
+                duration: 5000
+            });
         }
     }