@vertesia/ui 0.80.0-dev.20251121 → 0.80.0

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

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useState } from "react";
+import { useUserSession } from "@vertesia/ui/session";
+import { DocAnalyzerProgress, DocProcessorOutputFormat, MarkdownRenditionFormat, WorkflowExecutionStatus } from "@vertesia/common";
+
+// Maximum text size before cropping (128K characters)
+const MAX_TEXT_DISPLAY_SIZE = 128 * 1024;
+
+/**
+ * Hook for managing object text loading and cropping.
+ */
+export function useObjectText(objectId: string, initialText?: string, loadOnMount = false) {
+    const { store } = useUserSession();
+
+    const [fullText, setFullText] = useState<string | undefined>(initialText);
+    const [displayText, setDisplayText] = useState<string | undefined>(() => {
+        if (initialText && initialText.length > MAX_TEXT_DISPLAY_SIZE) {
+            return initialText.substring(0, MAX_TEXT_DISPLAY_SIZE);
+        }
+        return initialText;
+    });
+    const [isLoading, setIsLoading] = useState(false);
+    const [isCropped, setIsCropped] = useState(
+        () => !!initialText && initialText.length > MAX_TEXT_DISPLAY_SIZE
+    );
+
+    const loadText = useCallback(() => {
+        setIsLoading(true);
+        store.objects
+            .getObjectText(objectId)
+            .then((res) => {
+                setFullText(res.text);
+                if (res.text.length > MAX_TEXT_DISPLAY_SIZE) {
+                    setDisplayText(res.text.substring(0, MAX_TEXT_DISPLAY_SIZE));
+                    setIsCropped(true);
+                } else {
+                    setDisplayText(res.text);
+                    setIsCropped(false);
+                }
+            })
+            .catch((err) => {
+                console.error("Failed to load text", err);
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    }, [objectId, store]);
+
+    useEffect(() => {
+        if (loadOnMount && !displayText) {
+            loadText();
+        }
+    }, [loadOnMount, displayText, loadText]);
+
+    return {
+        fullText,
+        displayText,
+        isLoading,
+        isCropped,
+        loadText,
+    };
+}
+
+/**
+ * Hook for polling PDF/document processing status.
+ */
+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);
+
+    useEffect(() => {
+        if (!shouldPoll) return;
+
+        let interrupted = false;
+
+        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);
+
+                    if (r.status === WorkflowExecutionStatus.RUNNING) {
+                        // Workflow is running, poll every 2 seconds for progress
+                        if (!interrupted) {
+                            setTimeout(poll, 2000);
+                        }
+                    } else {
+                        // Workflow completed or terminal state
+                        setIsComplete(true);
+                    }
+                })
+                .catch(() => {
+                    // No workflow found yet, poll every 10 seconds to check if one starts
+                    if (!interrupted) {
+                        setTimeout(poll, 10000);
+                    }
+                });
+        }
+
+        poll();
+        return () => { interrupted = true; };
+    }, [shouldPoll, objectId, client]);
+
+    return {
+        progress,
+        status,
+        outputFormat,
+        isComplete,
+    };
+}
+
+/**
+ * Hook for managing Office document to PDF conversion.
+ */
+export function useOfficePdfConversion(objectId: string, enabled: boolean) {
+    const { client } = useUserSession();
+
+    const [pdfUrl, setPdfUrl] = useState<string | undefined>();
+    const [isConverting, setIsConverting] = useState(false);
+    const [error, setError] = useState<string | undefined>();
+
+    const triggerConversion = useCallback(async () => {
+        if (!enabled || isConverting) return;
+
+        setIsConverting(true);
+        setError(undefined);
+
+        const pollForPdf = async (isFirstCall: boolean) => {
+            try {
+                const response = await client.objects.getRendition(objectId, {
+                    format: MarkdownRenditionFormat.pdf,
+                    generate_if_missing: isFirstCall,
+                    sign_url: true,
+                    block_on_generation: false,
+                });
+
+                if (response.status === "generating") {
+                    // Poll every 5 seconds
+                    setTimeout(() => pollForPdf(false), 5000);
+                } else if (response.status === "found" && response.renditions?.length) {
+                    setPdfUrl(response.renditions[0]);
+                    setIsConverting(false);
+                } else if (response.status === "failed") {
+                    setError("PDF conversion failed");
+                    setIsConverting(false);
+                }
+            } catch (err) {
+                console.error("Failed to convert Office document to PDF:", err);
+                setError("Failed to convert to PDF");
+                setIsConverting(false);
+            }
+        };
+
+        await pollForPdf(true);
+    }, [objectId, enabled, isConverting, client]);
+
+    return {
+        pdfUrl,
+        isConverting,
+        error,
+        triggerConversion,
+    };
+}

package/src/features/store/objects/layout/DocumentTableColumn.tsx

@@ -84,13 +84,13 @@ export class DocumentTableColumn {
         const type = this.layout.type || 'string';
         const baseType = type.indexOf('?') > 0 ? type.substring(0, type.indexOf('?')) : type;
         
-        if (baseType === 'objectId' && this.previewObject) {
+        if ((baseType === 'objectId' || baseType === 'objectLink') && this.previewObject) {
             const i = type.indexOf('?');
             const params = i > 0 ? new URLSearchParams(type.substring(i + 1)) : undefined;
-            const objectIdRenderer = renderers.objectId(params, (_id: string) => {
+            const renderer = renderers[baseType](params, (_id: string) => {
                 this.previewObject!(object.id);
             });
-            return objectIdRenderer(object, index);
+            return renderer(object, index);
         }
         
         // Otherwise use the type-based renderer with the resolved value

package/src/features/store/objects/layout/knowledge.md

@@ -32,6 +32,7 @@ Complete list of supported types:
 3. **date** - Date/time display
 4. **objectId** - object id with preview button
 5. **objectName** - object name display
+6. **objectLink** - *(deprecated)* alias for objectId, kept for backward compatibility
 
 ### Column Types and Renderers
 Built-in renderers with parameters:

package/src/features/store/objects/layout/renderers.tsx

@@ -131,6 +131,31 @@ const renderers: Record<string, (params?: URLSearchParams, onClick?: (id: string
             );
         };
     },
+    // objectLink - same implementation as objectId but defaults to slice=-7
+    objectLink(_params?: URLSearchParams, onClick?: (id: string) => void) {
+        const transforms: ((value: string) => string)[] = [];
+        const hasSlice = true;
+        transforms.push((value) => value.slice(-7));
+
+        return (value: any, index: number) => {
+            const displayValue = transforms.reduce((v, t) => t(v), value.id);
+            return (
+                <td key={index} className="flex justify-between items-center gap-2 max-w-48">
+                    {hasSlice ? "~" : ""}{displayValue}
+                    <Button
+                        variant="ghost"
+                        alt="Preview Object"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onClick?.(value.id);
+                        }}
+                    >
+                        <Eye className="size-4" />
+                    </Button>
+                </td>
+            );
+        };
+    },
     typeLink(_params?: URLSearchParams, _onClick?: (id: string) => void) {
         return (value: any, index: number) => {
             return <td key={index}>{value?.name || "n/a"}</td>;

package/src/features/utils/index.ts

@@ -1,3 +1,5 @@
 export * from "./text.js";
 export * from "./mimeType.js";
-export * from "./rendition.js";
+export * from "./rendition.js";
+export * from "./print.js";
+export * from "./workflowStatus.js";

package/src/features/utils/mimeType.ts

@@ -3,7 +3,16 @@ const IMAGE_PREFIX = 'image/'
 const PDF_PREFIX = 'application/pdf'
 const VIDEO_PREFIX = 'video/'
 
+// Office document MIME types that can be converted to PDF for preview
+const PREVIEWABLE_AS_PDF_TYPES = [
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
+    'application/msword', // .doc
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
+    'application/vnd.ms-powerpoint', // .ppt
+]
+
 export const isCsv = (type: string) => type === CSV_PREFIX || CSV_PREFIX.includes(type)
 export const isImage = (type: string) => type.startsWith(IMAGE_PREFIX) || IMAGE_PREFIX.includes(type)
 export const isPdf = (type: string) => type === PDF_PREFIX || PDF_PREFIX.includes(type)
-export const isVideo = (type: string) => type.startsWith(VIDEO_PREFIX) || VIDEO_PREFIX.includes(type)
+export const isVideo = (type: string) => type.startsWith(VIDEO_PREFIX) || VIDEO_PREFIX.includes(type)
+export const isPreviewableAsPdf = (type: string) => PREVIEWABLE_AS_PDF_TYPES.includes(type)

package/src/features/utils/print.ts

@@ -0,0 +1,189 @@
+/**
+ * Print styles for markdown content export to PDF.
+ * These styles ensure tables and other elements render properly in print mode,
+ * independent from the application theme.
+ */
+const PRINT_STYLES = `
+@media print {
+  body {
+    margin: 24px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #111827;
+    background-color: #ffffff;
+  }
+
+  .vprose {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  .vprose h1 {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 1.5rem 0 0.75rem;
+  }
+
+  .vprose h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin: 1.25rem 0 0.75rem;
+  }
+
+  .vprose h3 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 1rem 0 0.5rem;
+  }
+
+  .vprose p {
+    margin: 0 0 0.5rem;
+  }
+
+  .vprose ul,
+  .vprose ol {
+    margin: 0.5rem 0 0.5rem 1.5rem;
+    padding: 0;
+  }
+
+  .vprose li {
+    margin: 0.25rem 0;
+  }
+
+  .vprose table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+  }
+
+  .vprose th,
+  .vprose td {
+    border: 1px solid #d1d5db;
+    padding: 0.5rem 0.75rem;
+    vertical-align: top;
+  }
+
+  .vprose thead th {
+    background-color: #f3f4f6;
+    font-weight: 600;
+  }
+
+  .vprose pre,
+  .vprose code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 12px;
+  }
+
+  .vprose pre {
+    padding: 0.75rem;
+    border-radius: 4px;
+    border: 1px solid #e5e7eb;
+    background-color: #f9fafb;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  /* Hide chart action buttons when printing */
+  .chart-actions {
+    display: none !important;
+  }
+
+  /* Hide interactive elements in agent conversation when printing */
+  .print-hidden,
+  [class*="print:hidden"],
+  button[title="Copy message"],
+  button[title="Copy to clipboard"],
+  button[title="Export as PNG"],
+  .message-actions {
+    display: none !important;
+  }
+
+  /* Prevent page breaks inside elements */
+  .vprose table,
+  .vprose pre,
+  .vprose blockquote,
+  .vprose figure,
+  .vprose img,
+  .recharts-wrapper,
+  [class*="chart"],
+  [class*="Chart"] {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  /* Keep headings with following content */
+  .vprose h1,
+  .vprose h2,
+  .vprose h3,
+  .vprose h4,
+  .vprose h5,
+  .vprose h6 {
+    break-after: avoid;
+    page-break-after: avoid;
+  }
+
+  /* Keep list items together when possible */
+  .vprose li {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}
+`;
+
+/**
+ * Opens the browser print dialog with the content of a given HTML element.
+ * Uses a hidden iframe to avoid opening a new window.
+ *
+ * @param sourceElement - The HTML element whose content to print
+ * @param title - The document title for the printed page
+ * @returns true if print dialog was opened successfully, false otherwise
+ */
+export function printElementToPdf(sourceElement: HTMLElement, title: string): boolean {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return false;
+    }
+
+    // Use a hidden iframe to avoid opening a new window
+    const iframe = document.createElement("iframe");
+    iframe.style.position = "fixed";
+    iframe.style.right = "0";
+    iframe.style.bottom = "0";
+    iframe.style.width = "0";
+    iframe.style.height = "0";
+    iframe.style.border = "0";
+    iframe.style.visibility = "hidden";
+    document.body.appendChild(iframe);
+
+    const iframeWindow = iframe.contentWindow;
+    if (!iframeWindow) {
+        iframe.parentNode?.removeChild(iframe);
+        return false;
+    }
+
+    const doc = iframeWindow.document;
+    doc.open();
+    doc.write(`<!doctype html><html><head><title>${title}</title></head><body></body></html>`);
+    doc.close();
+    doc.title = title;
+
+    const styles = document.querySelectorAll<HTMLLinkElement | HTMLStyleElement>("link[rel=\"stylesheet\"], style");
+    styles.forEach((node) => {
+        doc.head.appendChild(node.cloneNode(true));
+    });
+
+    // Add dedicated print styles
+    const printStyle = doc.createElement("style");
+    printStyle.textContent = PRINT_STYLES;
+    doc.head.appendChild(printStyle);
+
+    doc.body.innerHTML = sourceElement.innerHTML;
+    iframeWindow.focus();
+    iframeWindow.print();
+
+    setTimeout(() => {
+        iframe.parentNode?.removeChild(iframe);
+    }, 1000);
+
+    return true;
+}

package/src/features/utils/workflowStatus.ts

@@ -0,0 +1,44 @@
+import { WorkflowExecutionStatus } from "@vertesia/common";
+
+/**
+ * Get the semantic color class for a workflow execution status.
+ */
+export function getWorkflowStatusColor(status?: WorkflowExecutionStatus): string {
+    switch (status) {
+        case WorkflowExecutionStatus.RUNNING:
+            return "text-info";
+        case WorkflowExecutionStatus.COMPLETED:
+            return "text-success";
+        case WorkflowExecutionStatus.FAILED:
+            return "text-destructive";
+        case WorkflowExecutionStatus.TERMINATED:
+        case WorkflowExecutionStatus.CANCELED:
+            return "text-attention";
+        default:
+            return "text-muted";
+    }
+}
+
+/**
+ * Get a human-readable name for a workflow execution status.
+ */
+export function getWorkflowStatusName(status?: WorkflowExecutionStatus): string {
+    switch (status) {
+        case WorkflowExecutionStatus.RUNNING:
+            return "Running";
+        case WorkflowExecutionStatus.COMPLETED:
+            return "Completed";
+        case WorkflowExecutionStatus.FAILED:
+            return "Failed";
+        case WorkflowExecutionStatus.CONTINUED_AS_NEW:
+            return "Continued As New";
+        case WorkflowExecutionStatus.TERMINATED:
+            return "Terminated";
+        case WorkflowExecutionStatus.TIMED_OUT:
+            return "Timed Out";
+        case WorkflowExecutionStatus.CANCELED:
+            return "Canceled";
+        default:
+            return "Unknown";
+    }
+}

package/src/router/HistoryNavigator.ts

@@ -66,6 +66,10 @@ export interface NavigateOptions {
      * if defined, indicate whether the basePath will be used as a top-level base path or a nested base path.
      */
     isBasePathNested?: boolean;
+    // Number of steps to go back in history, which will pop the history stack instead of pushing a new entry
+    stepsBack?: number;
+    // the title to set for the new history entry
+    title?: string;
 }
 
 function getElementHrefAsUrl(elem: HTMLElement) {
@@ -113,6 +117,11 @@ export class HistoryNavigator {
     }
 
     navigate(to: string, options: NavigateOptions = {}) {
+        if (options.stepsBack && options.stepsBack > 0) {
+            this.stepBack(options.stepsBack, options);
+            return;
+        }
+
         if (options.basePath) {
             let basePath = options.basePath;
             if (!basePath.startsWith('/')) {
@@ -124,6 +133,24 @@ export class HistoryNavigator {
         this._navigate(new URL(to, window.location.href), 'navigate', options);
     }
 
+    stepBack(steps: number, options: NavigateOptions = {}) {
+        const historyChain = window.history.state.historyChain || [];
+        const to = historyChain.length >= steps
+            ? new URL(historyChain[historyChain.length - steps].href, window.location.href)
+            : new URL(window.location.origin, window.location.href);
+        this._navigate(to, 'popState', options);
+
+        const stateToStore = {
+            from: window.location.href,
+            historyChain: historyChain.slice(0, -steps),
+            data: options.state || undefined,
+            title: options.title || document.title
+        };
+        
+        window.history['replaceState'](stateToStore, '', to.href);
+        this.fireLocationChange(new AfterLocationChangeEvent('popState', to, options.state));
+    }
+
     _navigate(to: URL, type: LocationChangeType, options: NavigateOptions) {
         const beforeEvent = new BeforeLocationChangeEvent(type, to, options.state);
         this.fireLocationChange(beforeEvent);
@@ -133,7 +160,7 @@ export class HistoryNavigator {
         
         // Build navigation chain by preserving previous history
         const currentState = window.history.state;
-        const currentTitle = document.title;
+        const currentTitle = options.title || document.title;
         
         // Create new history chain entry
         const newChainEntry = {
@@ -160,7 +187,8 @@ export class HistoryNavigator {
         const stateToStore = {
             from: window.location.href,
             historyChain: historyChain,
-            data: options.state || undefined
+            data: options.state || undefined,
+            title: options.title || document.title
         };
         
         window.history[options.replace ? 'replaceState' : 'pushState'](stateToStore, '', to.href);

package/src/shell/login/UserInfo.tsx

@@ -2,6 +2,7 @@ import { getTenantIdFromProject } from "@vertesia/common";
 import { VTabs, VTabsBar, VTabsPanel, VTooltip } from "@vertesia/ui/core";
 import { Env } from "@vertesia/ui/env";
 import { useUserSession } from "@vertesia/ui/session";
+// Package version is now passed as prop from the consuming application
 import { Check, CopyIcon } from "lucide-react";
 import { useState } from "react";
 
@@ -61,6 +62,7 @@ export default function InfoList() {
                     <InfoItems title="Server" value={server} />
                     <InfoItems title="Store" value={store} />
                     <InfoItems title="App Version" value={Env.version} />
+                    <InfoItems title="SDK Version" value={Env.sdkVersion || 'unknown'} />
                 </div>
         }
     ];

package/src/shell/login/UserSessionMenu.tsx

@@ -1,4 +1,4 @@
-import { AuthTokenPayload } from "@vertesia/common";
+import { AuthTokenPayload, Permission } from "@vertesia/common";
 import { Avatar, Button, MenuList, ModeToggle, Spinner } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { Popover } from "@vertesia/ui/widgets";
@@ -6,6 +6,8 @@ import clsx from "clsx";
 import { useState } from "react";
 import SignInModal from "./SignInModal";
 import InfoList from "./UserInfo";
+import { useNavigate } from "@vertesia/ui/router";
+import { useUserPermissions } from "@vertesia/ui/features";
 interface UserSessionMenuProps {
     name?: string
     picture?: string;
@@ -38,9 +40,13 @@ interface UserSessionPopupProps {
 }
 function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopupProps) {
     const session = useUserSession();
+    const navigate = useNavigate();
+    const perms = useUserPermissions();
     const { user } = session;
     if (!session || !user) return null;
 
+    const isProjectManager = perms.hasPermission(Permission.project_admin);
+
     return (
         <Popover strategy='fixed' placement='bottom-start' zIndex={100}>
             <Popover.Trigger click>
@@ -68,6 +74,11 @@ function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopup
                         </div>
                         <div className='py-2'>
                             <MenuList>
+                                {isProjectManager && (
+                                    <MenuList.Item className='px-2' onClick={() => navigate('/settings', { replace: true })}>
+                                        Settings
+                                    </MenuList.Item>
+                                )}
                                 <MenuList.Item className='px-2' onClick={() => session.logout()}>
                                     Sign out
                                 </MenuList.Item>

package/src/widgets/form/Form.tsx

@@ -1,8 +1,8 @@
 
-import { Plus, Trash2 } from "lucide-react";
+import type { JSONSchemaObject } from "@vertesia/common";
 import { Button, FormItem } from "@vertesia/ui/core";
 import clsx from "clsx";
-import type { JSONSchemaObject } from "@vertesia/common";
+import { Plus, Trash2 } from "lucide-react";
 import { ComponentType, ReactNode, SyntheticEvent, useState } from "react";
 import { FormContext, FormContextProvider, InputComponentProps, useForm } from "./FormContext.js";
 import { ManagedListProperty, ManagedObject, ManagedObjectBase, ManagedProperty, Node } from "./ManagedObject.js";
@@ -94,10 +94,15 @@ export function ScalarField({ object, editor, inline = false }: ScalarFieldProps
         object.value = object.schema.isNumber ? parseFloat(value) : value
     }
 
+    if (object.isListItem) {
+        // List items don't need the FormItem wrapper (no label, description, etc.)
+        return <Component object={object} type={inputType} onChange={handleOnChange} disabled={disabled} />;
+    }
+
     return (
         <FormItem label={object.title} required={object.schema.isRequired} description={object.schema.description}
             className={clsx('flex', inline ? 'flex-row items-center' : 'flex-col')}>
-            {!object.isListItem && <Component object={object} type={inputType} onChange={handleOnChange} disabled={disabled} />}
+            <Component object={object} type={inputType} onChange={handleOnChange} disabled={disabled} />
         </FormItem>
     )
 }