@vertesia/ui 0.82.1 → 0.82.2

package/lib/esm/features/store/objects/ExportPropertiesModal.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Modal, ModalBody, ModalTitle, SelectBox, Spinner } from "@vertesia/ui/core";
+import { useState } from "react";
+export var ExportTypes;
+(function (ExportTypes) {
+    ExportTypes["CSV"] = "CSV";
+    ExportTypes["JSON"] = "JSON";
+})(ExportTypes || (ExportTypes = {}));
+;
+export function ExportPropertiesModal({ isExporting, isOpen, onClose }) {
+    const title = "Export Object Properties";
+    return (_jsxs(Modal, { onClose: () => onClose(undefined), isOpen: isOpen, children: [_jsx(ModalTitle, { children: title }), _jsxs(ModalBody, { children: [!isExporting &&
+                        _jsx(SelectPanel, { onClose: onClose }), isExporting &&
+                        _jsx(WaitingPanel, {})] })] }));
+}
+function SelectPanel({ onClose }) {
+    const [exportType, setExportType] = useState(undefined);
+    const [exportAll, setExportAll] = useState(undefined);
+    const selectionOption = ["Export selected objects", "Export all objects"];
+    const exportAllBoolean = (option) => {
+        return option == selectionOption[1];
+    };
+    const onSubmit = () => {
+        onClose(exportType, exportAllBoolean(exportAll));
+    };
+    return (_jsxs(ModalBody, { className: "min-h-[104px] pt-0 flex flex-col gap-y-4", children: [_jsx("div", { className: 'h-1/3', children: _jsx(SelectBox, { options: selectionOption, value: exportAll, onChange: setExportAll, placeholder: "Choose what to export", className: "h-full w-full text-sm", filterBy: "name", isClearable: true }) }), _jsxs("div", { className: 'h-1/2 flex flex-col gap-y-8 content-between', children: [_jsx(SelectBox, { options: Object.values(ExportTypes), value: exportType, onChange: setExportType, placeholder: "Choose a format", className: "h-full w-full text-sm", filterBy: "name", isClearable: true }), _jsx(Button, { className: "w-full", isDisabled: !exportType || !exportAll, onClick: onSubmit, children: "Export Properties" })] })] }));
+}
+function WaitingPanel({}) {
+    return (_jsx(ModalBody, { className: "min-h-[84px] pt-0", children: _jsxs("div", { className: 'h-full grid flex-col gap-y-2 content-between justify-items-center', children: [_jsxs("div", { className: "text-sm flex flex-col gap-x-2", children: [_jsx("p", { children: "EXPORT IS IN PROGRESS" }), _jsx("p", { className: "pt-2 grid justify-items-center", children: "PLEASE WAIT" })] }), _jsx(Spinner, { size: 'lg' })] }) }));
+}
+//# sourceMappingURL=ExportPropertiesModal.js.map

package/lib/esm/features/store/objects/ExportPropertiesModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportPropertiesModal.js","sourceRoot":"","sources":["../../../../../src/features/store/objects/ExportPropertiesModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC7F,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,CAAN,IAAY,WAEX;AAFD,WAAY,WAAW;IACnB,0BAAW,CAAA;IAAE,4BAAa,CAAA;AAC9B,CAAC,EAFW,WAAW,KAAX,WAAW,QAEtB;AAAA,CAAC;AAOF,MAAM,UAAU,qBAAqB,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAA8B;IAC9F,MAAM,KAAK,GAAG,0BAA0B,CAAC;IAEzC,OAAO,CACH,MAAC,KAAK,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,aACpD,KAAC,UAAU,cAAE,KAAK,GAAc,EAChC,MAAC,SAAS,eACL,CAAC,WAAW;wBACT,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,GAAI,EAEpC,WAAW;wBACR,KAAC,YAAY,KAAG,IAEZ,IACR,CACX,CAAA;AACL,CAAC;AAKD,SAAS,WAAW,CAAC,EAAE,OAAO,EAAoB;IAC9C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAC5E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAE1E,MAAM,eAAe,GAAa,CAAC,yBAAyB,EAAE,oBAAoB,CAAC,CAAC;IAEpF,MAAM,gBAAgB,GAAG,CAAC,MAA0B,EAAE,EAAE;QACpD,OAAO,MAAM,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,OAAO,CAAC,UAAU,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;IACrD,CAAC,CAAA;IAED,OAAO,CACH,MAAC,SAAS,IAAC,SAAS,EAAC,0CAA0C,aAC3D,cAAK,SAAS,EAAC,OAAO,YAClB,KAAC,SAAS,IACN,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAC,uBAAuB,EACnC,SAAS,EAAC,uBAAuB,EACjC,QAAQ,EAAC,MAAM,EACf,WAAW,SACb,GACA,EACN,eAAK,SAAS,EAAC,6CAA6C,aACxD,KAAC,SAAS,IACN,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EACnC,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,uBAAuB,EACjC,QAAQ,EAAC,MAAM,EACf,WAAW,SACb,EAEF,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAE,CAAC,UAAU,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,kCAA4B,IAC7G,IACE,CACf,CAAA;AACL,CAAC;AAGD,SAAS,YAAY,CAAC,EAAsB;IACxC,OAAO,CACH,KAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,YACpC,eAAK,SAAS,EAAC,mEAAmE,aAC9E,eAAK,SAAS,EAAC,+BAA+B,aAC1C,gDAA4B,EAC5B,YAAG,SAAS,EAAC,gCAAgC,4BAAgB,IAC3D,EACN,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,GAAG,IACnB,GACE,CACf,CAAA;AACL,CAAC"}

package/lib/esm/features/store/objects/components/ContentDispositionButton.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LayoutGrid, TableProperties } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@vertesia/ui/core';
+const LAST_DISPLAYED_VIEW = 'vertesia.content_store.lastDisplayedView';
+export function ContentDispositionButton({ onUpdate }) {
+    const [isGridView, setIsGridView] = useState(localStorage.getItem(LAST_DISPLAYED_VIEW) === "grid");
+    const updateView = () => {
+        if (isGridView) {
+            toggleTableView();
+        }
+        else {
+            toggleGridView();
+        }
+    };
+    const toggleGridView = () => {
+        localStorage.setItem(LAST_DISPLAYED_VIEW, "grid");
+        setIsGridView(true);
+        onUpdate(true);
+    };
+    const toggleTableView = () => {
+        localStorage.setItem(LAST_DISPLAYED_VIEW, "table");
+        setIsGridView(false);
+        onUpdate(false);
+    };
+    return (_jsx(Button, { variant: "outline", onClick: updateView, alt: isGridView ? "Table View" : "Thumbnail View", children: isGridView
+            ? _jsx(TableProperties, {})
+            : _jsx(LayoutGrid, {}) }));
+}
+ContentDispositionButton.LAST_DISPLAYED_VIEW = LAST_DISPLAYED_VIEW;
+//# sourceMappingURL=ContentDispositionButton.js.map

package/lib/esm/features/store/objects/components/ContentDispositionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentDispositionButton.js","sourceRoot":"","sources":["../../../../../../src/features/store/objects/components/ContentDispositionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,mBAAmB,GAAG,0CAA0C,CAAA;AAKtE,MAAM,UAAU,wBAAwB,CAAC,EAAE,QAAQ,EAA2C;IAC1F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAK,MAAM,CAAC,CAAA;IAElG,MAAM,UAAU,GAAG,GAAG,EAAE;QACpB,IAAI,UAAU,EAAE,CAAC;YACb,eAAe,EAAE,CAAA;QACrB,CAAC;aAAM,CAAC;YACJ,cAAc,EAAE,CAAA;QACpB,CAAC;IACL,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,GAAG,EAAE;QACxB,YAAY,CAAC,OAAO,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAA;QACjD,aAAa,CAAC,IAAI,CAAC,CAAA;QACnB,QAAQ,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,YAAY,CAAC,OAAO,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAA;QAClD,aAAa,CAAC,KAAK,CAAC,CAAA;QACpB,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnB,CAAC,CAAA;IAED,OAAO,CACH,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,YAExF,UAAU;YACN,CAAC,CAAC,KAAC,eAAe,KAAG;YACrB,CAAC,CAAC,KAAC,UAAU,KAAG,GAEnB,CACZ,CAAA;AACL,CAAC;AAED,wBAAwB,CAAC,mBAAmB,GAAG,mBAAmB,CAAA"}

package/lib/esm/features/store/objects/components/ContentOverview.js

@@ -0,0 +1,520 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, memo, useRef } from "react";
+import { useUserSession } from "@vertesia/ui/session";
+import { Button, Portal, ResizableHandle, ResizablePanel, ResizablePanelGroup, Spinner, useToast, Modal, ModalBody, ModalFooter, ModalTitle } from "@vertesia/ui/core";
+import { JSONDisplay, MarkdownRenderer, Progress, XMLViewer } from "@vertesia/ui/widgets";
+import { ContentNature, ContentObjectStatus, ImageRenditionFormat, POSTER_RENDITION_NAME, WorkflowExecutionStatus, PDF_RENDITION_NAME } from "@vertesia/common";
+import { Copy, Download, SquarePen, AlertTriangle, FileSearch } from "lucide-react";
+import { isPreviewableAsPdf, printElementToPdf, getWorkflowStatusColor, getWorkflowStatusName } from "../../../utils/index.js";
+import { PropertiesEditorModal } from "./PropertiesEditorModal";
+import { NavLink } from "@vertesia/ui/router";
+import { MagicPdfView } from "../../../magic-pdf";
+import { SimplePdfViewer } from "../../../pdf-viewer";
+import { useObjectText, usePdfProcessingStatus, useOfficePdfConversion } from "./useContentPanelHooks.js";
+// Web-supported image formats for browser display
+const WEB_SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
+// Web-supported video formats for browser display
+const WEB_SUPPORTED_VIDEO_FORMATS = ['video/mp4', 'video/webm'];
+// Panel height constants for consistent layout
+const PANEL_HEIGHTS = {
+    /** Main resizable panel group */
+    main: "h-[calc(100vh-208px)]",
+    /** Properties panel content area */
+    properties: "h-[calc(100vh-228px)]",
+    /** Text/PDF content panel */
+    content: "h-[calc(100vh-218px)]",
+    /** Video max height */
+    video: "max-h-[calc(100vh-268px)]",
+};
+/**
+ * Custom markdown components for the content overview.
+ * Handles internal links to store objects and provides consistent styling.
+ */
+const createMarkdownComponents = () => ({
+    a: ({ node, ...props }) => {
+        const href = props.href || "";
+        if (href.includes("/store/objects/")) {
+            return (_jsx(NavLink, { topLevelNav: true, href: href, className: "text-info", children: props.children }));
+        }
+        return _jsx("a", { ...props, target: "_blank", rel: "noopener noreferrer" });
+    },
+    p: ({ node, ...props }) => (_jsx("p", { ...props, className: "my-0" })),
+    pre: ({ node, ...props }) => (_jsx("pre", { ...props, className: "my-2 p-2 rounded" })),
+    code: ({ node, className, children, ...props }) => {
+        const match = /language-(\w+)/.exec(className || "");
+        const isInline = !match;
+        return (_jsx("code", { ...props, className: isInline ? "px-1.5 py-0.5 rounded" : "text-muted", children: children }));
+    },
+    h1: ({ node, ...props }) => (_jsx("h1", { ...props, className: "font-bold text-2xl my-2" })),
+    h2: ({ node, ...props }) => (_jsx("h2", { ...props, className: "font-bold text-xl my-2" })),
+    h3: ({ node, ...props }) => (_jsx("h3", { ...props, className: "font-bold text-lg my-2" })),
+    li: ({ node, ...props }) => _jsx("li", { ...props }),
+});
+/**
+ * Check if an object is in created or processing status.
+ */
+function isCreatedOrProcessingStatus(status) {
+    return status === ContentObjectStatus.created || status === ContentObjectStatus.processing;
+}
+/**
+ * Get the content processor type from object metadata.
+ */
+function getContentProcessorType(object) {
+    return object.metadata?.content_processor?.type;
+}
+/**
+ * Check if text content appears to be markdown based on common patterns.
+ */
+function looksLikeMarkdown(text) {
+    if (!text)
+        return false;
+    return (text.includes("\n# ") ||
+        text.includes("\n## ") ||
+        text.includes("\n### ") ||
+        text.includes("\n* ") ||
+        text.includes("\n- ") ||
+        text.includes("\n+ ") ||
+        text.includes("![") ||
+        text.includes("]("));
+}
+var PanelView;
+(function (PanelView) {
+    PanelView["Text"] = "text";
+    PanelView["Image"] = "image";
+    PanelView["Video"] = "video";
+    PanelView["Pdf"] = "pdf";
+})(PanelView || (PanelView = {}));
+export function ContentOverview({ object, loadText, refetch, }) {
+    const toast = useToast();
+    const handleCopyContent = async (content, type) => {
+        try {
+            await navigator.clipboard.writeText(content);
+            toast({
+                status: "success",
+                title: `${type === "text" ? "Content" : "Properties"} copied`,
+                description: `Successfully copied ${type} to clipboard`,
+                duration: 2000,
+            });
+        }
+        catch (err) {
+            console.error(`Failed to copy ${type}:`, err);
+            toast({
+                status: "error",
+                title: "Copy failed",
+                description: `Failed to copy ${type} to clipboard`,
+                duration: 5000,
+            });
+        }
+    };
+    return (_jsx(_Fragment, { children: _jsxs(ResizablePanelGroup, { direction: "horizontal", className: PANEL_HEIGHTS.main, children: [_jsx(ResizablePanel, { className: "min-w-[100px]", children: _jsx(PropertiesPanel, { object: object, refetch: refetch ?? (() => Promise.resolve()), handleCopyContent: handleCopyContent }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { className: "min-w-[100px]", children: _jsx(DataPanel, { object: object, loadText: loadText ?? false, handleCopyContent: handleCopyContent, refetch: refetch }) })] }) }));
+}
+function PropertiesPanel({ object, refetch, handleCopyContent }) {
+    const [viewCode, setViewCode] = useState(false);
+    const [isPropertiesModalOpen, setPropertiesModalOpen] = useState(false);
+    const handleOpenPropertiesModal = () => {
+        setPropertiesModalOpen(true);
+    };
+    const handleClosePropertiesModal = () => {
+        setPropertiesModalOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between items-center px-2", children: [_jsxs("div", { className: "flex items-center gap-1 bg-muted mb-2 p-1 rounded", children: [_jsx(Button, { variant: `${viewCode ? "ghost" : "primary"}`, size: "sm", alt: "Preview properties", onClick: () => setViewCode(!viewCode), children: "Properties" }), _jsx(Button, { variant: `${viewCode ? "primary" : "ghost"}`, size: "sm", alt: "View in JSON format", onClick: () => setViewCode(!viewCode), children: "JSON" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [object.properties && (_jsx(Button, { variant: "ghost", size: "sm", title: "Copy properties", onClick: () => handleCopyContent(JSON.stringify(object.properties, null, 2), "properties"), children: _jsx(Copy, { className: "size-4" }) })), _jsx(Button, { variant: "ghost", size: "sm", onClick: handleOpenPropertiesModal, title: "Edit properties", className: "flex items-center gap-2", children: _jsx(SquarePen, { className: "size-4" }) })] })] }), object.properties ? (_jsx("div", { className: `${PANEL_HEIGHTS.properties} overflow-auto px-2`, children: _jsx(JSONDisplay, { value: object.properties, viewCode: viewCode }) })) : (_jsx("div", { className: `${PANEL_HEIGHTS.properties} overflow-auto px-2`, children: _jsx("div", { children: "No properties defined" }) })), _jsx(PropertiesEditorModal, { isOpen: isPropertiesModalOpen, onClose: handleClosePropertiesModal, object: object, refetch: refetch })] }));
+}
+function DataPanel({ object, loadText, handleCopyContent, refetch }) {
+    const isImage = object?.metadata?.type === ContentNature.Image;
+    const isVideo = object?.metadata?.type === ContentNature.Video;
+    const isPdf = object?.content?.type === 'application/pdf';
+    const isPreviewableAsPdfDoc = object?.content?.type ? isPreviewableAsPdf(object.content.type) : false;
+    const isCreatedOrProcessing = isCreatedOrProcessingStatus(object?.status);
+    // Check if PDF rendition exists for Office documents
+    const metadata = object.metadata;
+    const pdfRendition = metadata?.renditions?.find(r => r.name === PDF_RENDITION_NAME);
+    // Determine initial panel view
+    const getInitialView = () => {
+        if (isVideo)
+            return PanelView.Video;
+        if (isImage)
+            return PanelView.Image;
+        return PanelView.Text;
+    };
+    const [currentPanel, setCurrentPanel] = useState(getInitialView());
+    // Use custom hooks for text loading, PDF processing, and Office conversion
+    const { fullText, displayText, isLoading: isLoadingText, isCropped: isTextCropped, } = useObjectText(object.id, object.text, loadText);
+    // Poll for PDF/document processing status when object is created or processing
+    const shouldPollProgress = (isPdf || isPreviewableAsPdfDoc) && isCreatedOrProcessing;
+    const { progress: pdfProgress, status: pdfStatus, outputFormat: pdfOutputFormat, isComplete: processingComplete, } = usePdfProcessingStatus(object.id, shouldPollProgress);
+    // Office document PDF conversion
+    const { pdfUrl: officePdfUrl, isConverting: officePdfConverting, error: officePdfError, triggerConversion: triggerOfficePdfConversion, } = useOfficePdfConversion(object.id, isPreviewableAsPdfDoc);
+    // Reload object when PDF processing completes
+    useEffect(() => {
+        if (processingComplete && pdfStatus === WorkflowExecutionStatus.COMPLETED) {
+            refetch?.();
+        }
+    }, [processingComplete, pdfStatus, refetch]);
+    // Show processing panel when workflow is running (for both PDFs and Office documents)
+    const showProcessingPanel = (isPdf || isPreviewableAsPdfDoc) && isCreatedOrProcessing && !processingComplete && pdfStatus === WorkflowExecutionStatus.RUNNING;
+    const textContainerRef = useRef(null);
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex justify-between items-center px-2 shrink-0", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsxs("div", { className: "flex items-center gap-1 bg-muted p-1 rounded", children: [isImage &&
+                                        _jsx(Button, { variant: currentPanel === PanelView.Image ? "primary" : "ghost", size: "sm", alt: "View Image", onClick: () => setCurrentPanel(PanelView.Image), children: "Image" }), isVideo &&
+                                        _jsx(Button, { variant: currentPanel === PanelView.Video ? "primary" : "ghost", size: "sm", alt: "View Video", onClick: () => setCurrentPanel(PanelView.Video), children: "Video" }), _jsx(Button, { variant: currentPanel === PanelView.Text ? "primary" : "ghost", size: "sm", alt: "View Text", onClick: () => setCurrentPanel(PanelView.Text), children: "Text" }), isPdf &&
+                                        _jsx(Button, { variant: currentPanel === PanelView.Pdf ? "primary" : "ghost", size: "sm", alt: "View PDF", onClick: () => setCurrentPanel(PanelView.Pdf), children: "PDF" }), isPreviewableAsPdfDoc && (_jsx(Button, { variant: currentPanel === PanelView.Pdf ? "primary" : "ghost", size: "sm", alt: "View as PDF", onClick: () => {
+                                            setCurrentPanel(PanelView.Pdf);
+                                            if (!pdfRendition && !officePdfUrl && !officePdfConverting) {
+                                                triggerOfficePdfConversion();
+                                            }
+                                        }, disabled: officePdfConverting, children: officePdfConverting ? _jsx(Spinner, { size: "sm" }) : "PDF" }))] }), _jsx(PdfActions, { object: object })] }), currentPanel === PanelView.Text && !showProcessingPanel && (_jsx(TextActions, { object: object, text: displayText, fullText: fullText, handleCopyContent: handleCopyContent, textContainerRef: textContainerRef })), currentPanel === PanelView.Pdf && isPreviewableAsPdfDoc && (pdfRendition || officePdfUrl) && (_jsx(OfficePdfActions, { object: object, pdfRendition: pdfRendition, officePdfUrl: officePdfUrl }))] }), currentPanel === PanelView.Image && (_jsx(ImagePanel, { object: object })), currentPanel === PanelView.Video && (_jsx(VideoPanel, { object: object })), currentPanel === PanelView.Pdf && isPdf && (_jsx(PdfPreviewPanel, { object: object })), currentPanel === PanelView.Pdf && isPreviewableAsPdfDoc && (_jsx(OfficePdfPreviewPanel, { pdfRendition: pdfRendition, officePdfUrl: officePdfUrl, officePdfConverting: officePdfConverting, officePdfError: officePdfError, onConvert: triggerOfficePdfConversion })), currentPanel === PanelView.Text && showProcessingPanel && (_jsx(PdfProcessingPanel, { progress: pdfProgress, status: pdfStatus, outputFormat: pdfOutputFormat })), currentPanel === PanelView.Text && !showProcessingPanel && isLoadingText && (_jsx("div", { className: "flex justify-center items-center flex-1", children: _jsx(Spinner, { size: "lg" }) })), currentPanel === PanelView.Text && !showProcessingPanel && !isLoadingText && (_jsx(TextPanel, { object: object, text: displayText, isTextCropped: isTextCropped, textContainerRef: textContainerRef }))] }));
+}
+function TextActions({ object, text, fullText, handleCopyContent, textContainerRef, }) {
+    const { client } = useUserSession();
+    const toast = useToast();
+    const [loadingFormat, setLoadingFormat] = useState(null);
+    const [isPdfModalOpen, setIsPdfModalOpen] = useState(false);
+    const content = object.content;
+    const isMarkdown = content &&
+        content.type &&
+        content.type === "text/markdown";
+    // Get content processor type for file extension detection
+    const contentProcessorType = getContentProcessorType(object);
+    const handleExportDocument = async (format) => {
+        // Prevent multiple concurrent exports
+        if (loadingFormat)
+            return;
+        setLoadingFormat(format);
+        // Show immediate feedback
+        toast({
+            status: "info",
+            title: `Preparing ${format.toUpperCase()}`,
+            description: "Fetching your document...",
+            duration: 2000,
+        });
+        try {
+            // Request document rendition from the server
+            const response = await client.objects.getRendition(object.id, {
+                format: format, // We're extending the format type
+                generate_if_missing: true,
+                sign_url: true,
+            });
+            if (response.status === "generating") {
+                toast({
+                    status: "info",
+                    title: "Generating document",
+                    description: `Please wait while we prepare your ${format.toUpperCase()} file...`,
+                    duration: 5000,
+                });
+                // Poll for completion
+                setTimeout(() => handleExportDocument(format), 3000);
+                return;
+            }
+            if (response.status === "failed") {
+                throw new Error("Document generation failed");
+            }
+            // Download the generated file or open in new window
+            if (response.renditions && response.renditions.length > 0) {
+                const downloadUrl = response.renditions[0];
+                if (format === 'pdf') {
+                    // Open PDF in new window
+                    window.open(downloadUrl, '_blank');
+                    toast({
+                        status: "success",
+                        title: "PDF opened",
+                        description: "PDF document opened in a new window",
+                        duration: 2000,
+                    });
+                }
+                else {
+                    // Download DOCX file
+                    const link = document.createElement("a");
+                    link.href = downloadUrl;
+                    link.download = `${object.name || "document"}.${format}`;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    toast({
+                        status: "success",
+                        title: "Document exported",
+                        description: `Successfully exported to ${format.toUpperCase()} format`,
+                        duration: 2000,
+                    });
+                }
+            }
+        }
+        catch (err) {
+            console.error(`Failed to export document as ${format}:`, err);
+            toast({
+                status: "error",
+                title: "Export failed",
+                description: `Failed to export document to ${format.toUpperCase()} format`,
+                duration: 5000,
+            });
+        }
+        finally {
+            setLoadingFormat(null);
+        }
+    };
+    const handleExportDocx = () => handleExportDocument("docx");
+    const handleClientPdfExport = () => {
+        if (!textContainerRef.current) {
+            toast({
+                status: "error",
+                title: "PDF export failed",
+                description: "No content available to export",
+                duration: 3000,
+            });
+            return;
+        }
+        setIsPdfModalOpen(true);
+    };
+    const handleConfirmClientPdfExport = () => {
+        if (!textContainerRef.current) {
+            toast({
+                status: "error",
+                title: "PDF export failed",
+                description: "No content available to export",
+                duration: 3000,
+            });
+            return;
+        }
+        const baseName = object.name || object.id;
+        const pdfTitle = `${baseName || "document"} - content`;
+        const success = printElementToPdf(textContainerRef.current, pdfTitle);
+        if (!success) {
+            toast({
+                status: "error",
+                title: "PDF export failed",
+                description: "Unable to open print preview",
+                duration: 4000,
+            });
+            return;
+        }
+        toast({
+            status: "success",
+            title: "PDF export ready",
+            description: "Use your browser's Print dialog to save as PDF",
+            duration: 4000,
+        });
+        setIsPdfModalOpen(false);
+    };
+    const handleDownloadText = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!fullText)
+            return;
+        // Determine file extension based on content processor type
+        let ext = "txt";
+        let mimeType = "text/plain";
+        if (contentProcessorType === "xml") {
+            ext = "xml";
+            mimeType = "text/xml";
+        }
+        else if (contentProcessorType === "markdown" || isMarkdown) {
+            ext = "md";
+            mimeType = "text/markdown";
+        }
+        const blob = new Blob([fullText], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const filename = `${object.name || "document"}.${ext}`;
+        // Use the download attribute with an anchor, but avoid triggering navigation
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        link.style.display = "none";
+        // Temporarily remove from DOM event flow
+        setTimeout(() => {
+            link.click();
+            URL.revokeObjectURL(url);
+        }, 0);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-[41px] text-lg font-semibold flex justify-between items-center px-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [fullText && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", title: "Copy text", onClick: () => handleCopyContent(fullText, "text"), children: _jsx(Copy, { className: "size-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", title: "Download text", onClick: handleDownloadText, children: _jsx(Download, { className: "size-4" }) })] })), isMarkdown && text && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: handleExportDocx, disabled: loadingFormat !== null, className: "flex items-center gap-2", children: [loadingFormat === "docx" ? (_jsx(Spinner, { size: "sm" })) : (_jsx(Download, { className: "size-4" })), "DOCX"] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: handleClientPdfExport, className: "flex items-center gap-2", children: [_jsx(Download, { className: "size-4" }), "PDF"] })] }))] }) }), _jsxs(Modal, { isOpen: isPdfModalOpen, onClose: () => setIsPdfModalOpen(false), children: [_jsx(ModalTitle, { children: "Export document as PDF" }), _jsxs(ModalBody, { children: [_jsx("p", { className: "mb-2", children: "This will open your browser's print dialog with the current document content." }), _jsx("p", { className: "text-sm text-muted", children: "To save a PDF, choose \"Save as PDF\" or a similar option in the print dialog." })] }), _jsxs(ModalFooter, { align: "right", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsPdfModalOpen(false), children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleConfirmClientPdfExport, children: "Open print dialog" })] })] })] }));
+}
+const TextPanel = memo(({ object, text, isTextCropped, textContainerRef, }) => {
+    const content = object.content;
+    const isCreatedOrProcessing = isCreatedOrProcessingStatus(object?.status);
+    // Check content processor type for XML
+    const contentProcessorType = getContentProcessorType(object);
+    const isXml = contentProcessorType === "xml";
+    // Check if content type is markdown or plain text
+    const isMarkdownOrText = content &&
+        content.type &&
+        (content.type === "text/markdown" || content.type === "text/plain");
+    // Render as markdown if it's markdown/text type OR if text looks like markdown (but not if XML)
+    const shouldRenderAsMarkdown = !isXml && (isMarkdownOrText || looksLikeMarkdown(text));
+    return (text ? (_jsxs(_Fragment, { children: [isTextCropped && (_jsx("div", { className: "px-2 py-2 bg-attention/10 border-l-4 border-attention mx-2 mb-2 rounded", children: _jsxs("div", { className: "flex items-center gap-2 text-attention", children: [_jsx(AlertTriangle, { className: "size-4" }), _jsx("span", { className: "text-sm font-semibold", children: "Showing first 128K characters only" })] }) })), _jsx("div", { className: `max-w-7xl px-2 ${PANEL_HEIGHTS.content} overflow-auto`, ref: textContainerRef, children: isXml ? (_jsx("div", { className: "px-4 py-2", children: _jsx(XMLViewer, { xml: text, collapsible: true }) })) : shouldRenderAsMarkdown ? (_jsx("div", { className: "vprose prose-sm p-1", children: _jsx(MarkdownRenderer, { components: createMarkdownComponents(), children: text }) })) : (_jsx("pre", { className: "text-wrap bg-muted text-muted p-2", children: text })) })] })) :
+        _jsx("div", { className: "px-2", children: _jsx("div", { children: isCreatedOrProcessing ? "Extracting content..." : "No content" }) }));
+});
+function ImagePanel({ object }) {
+    const { client } = useUserSession();
+    const [imageUrl, setImageUrl] = useState();
+    const content = object.content;
+    const isImage = object.metadata && object.metadata.type === ContentNature.Image;
+    useEffect(() => {
+        if (isImage) {
+            const loadImage = async () => {
+                const isOriginalWebSupported = content?.type && WEB_SUPPORTED_IMAGE_FORMATS.includes(content.type);
+                try {
+                    const rendition = await client.objects.getRendition(object.id, {
+                        format: ImageRenditionFormat.jpeg,
+                        generate_if_missing: false,
+                        sign_url: true,
+                    });
+                    if (rendition.status === "found" && rendition.renditions?.length) {
+                        // Use rendition URL directly
+                        setImageUrl(rendition.renditions[0]);
+                    }
+                    else if (isOriginalWebSupported) {
+                        // Fall back to original file only if web-supported
+                        const downloadUrl = await client.files.getDownloadUrl(object.content.source);
+                        setImageUrl(downloadUrl.url);
+                    }
+                }
+                catch (error) {
+                    // Fall back to original file only if web-supported
+                    if (isOriginalWebSupported) {
+                        const downloadUrl = await client.files.getDownloadUrl(object.content.source);
+                        setImageUrl(downloadUrl.url);
+                    }
+                }
+            };
+            loadImage();
+        }
+    }, []);
+    return (_jsx("div", { className: "mb-4 px-2", children: imageUrl ? (_jsx("img", { src: imageUrl, alt: object.name, className: "w-full object-contain" })) : (_jsx(Spinner, { size: "md" })) }));
+}
+function VideoPanel({ object }) {
+    const { client } = useUserSession();
+    const [videoUrl, setVideoUrl] = useState();
+    const [posterUrl, setPosterUrl] = useState();
+    const [isLoading, setIsLoading] = useState(true);
+    const content = object.content;
+    const isVideo = object.metadata?.type === ContentNature.Video;
+    // Check if there are mp4 or webm renditions available in metadata
+    const metadata = object.metadata;
+    const renditions = metadata?.renditions || [];
+    // Find mp4 or webm rendition by mime type, preferring mp4
+    const webRendition = renditions.find(r => r.content.type === 'video/mp4') ||
+        renditions.find(r => r.content.type === 'video/webm');
+    // Check if original file is web-compatible
+    const isOriginalWebSupported = content?.type && WEB_SUPPORTED_VIDEO_FORMATS.includes(content.type);
+    // Get poster
+    const poster = renditions.find(r => r.name === POSTER_RENDITION_NAME);
+    useEffect(() => {
+        const loadPoster = async () => {
+            if (poster?.content?.source) {
+                try {
+                    const response = await client.files.getDownloadUrl(poster.content.source);
+                    setPosterUrl(response.url);
+                }
+                catch (error) {
+                    console.error("Failed to load poster image", error);
+                }
+            }
+        };
+        loadPoster();
+    }, [poster, client]);
+    useEffect(() => {
+        if (isVideo && (webRendition?.content?.source || isOriginalWebSupported)) {
+            const loadVideoUrl = async () => {
+                try {
+                    let downloadUrl;
+                    if (webRendition?.content?.source) {
+                        // Use rendition if available
+                        downloadUrl = await client.files.getDownloadUrl(webRendition.content.source);
+                    }
+                    else if (isOriginalWebSupported && content?.source) {
+                        // Fall back to original file if web-supported
+                        downloadUrl = await client.files.getDownloadUrl(content.source);
+                    }
+                    if (downloadUrl) {
+                        setVideoUrl(downloadUrl.url);
+                    }
+                }
+                catch (error) {
+                    console.error("Failed to get video URL", error);
+                }
+                finally {
+                    setIsLoading(false);
+                }
+            };
+            loadVideoUrl();
+        }
+        else {
+            setIsLoading(false);
+        }
+    }, [isVideo, webRendition, isOriginalWebSupported, content?.source, client]);
+    return (_jsx("div", { className: "mb-4 px-2", children: !webRendition && !isOriginalWebSupported ? (_jsx("div", { className: "flex justify-center items-center h-[400px] text-muted", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { children: "No web-compatible video rendition available" }), _jsx("p", { className: "text-sm mt-2", children: "MP4 or WebM format required" })] }) })) : isLoading ? (_jsx("div", { className: "flex justify-center items-center h-[400px]", children: _jsx(Spinner, { size: "md" }) })) : videoUrl ? (_jsx("video", { src: videoUrl, poster: posterUrl, controls: true, className: `w-full ${PANEL_HEIGHTS.video} object-contain`, children: "Your browser does not support the video tag." })) : (_jsx("div", { className: "flex justify-center items-center h-[400px] text-muted", children: "Failed to load video" })) }));
+}
+function PdfActions({ object }) {
+    const [isPdfPreviewOpen, setPdfPreviewOpen] = useState(false);
+    // Check if PDF has been processed (content_processor.type is xml or markdown)
+    const contentProcessorType = getContentProcessorType(object);
+    const hasPdfAnalysis = contentProcessorType === "xml" || contentProcessorType === "markdown";
+    if (!hasPdfAnalysis)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setPdfPreviewOpen(true), title: "Side by side view", children: _jsx(FileSearch, { className: "size-4" }) }), isPdfPreviewOpen && (_jsx(Portal, { children: _jsx(MagicPdfView, { objectId: object.id, onClose: () => setPdfPreviewOpen(false) }) }))] }));
+}
+function OfficePdfActions({ object, pdfRendition, officePdfUrl, }) {
+    const { client } = useUserSession();
+    const toast = useToast();
+    const [isDownloading, setIsDownloading] = useState(false);
+    const handleDownloadPdf = async () => {
+        setIsDownloading(true);
+        try {
+            let downloadUrl = officePdfUrl;
+            // If we have a rendition source but no signed URL yet, get a signed URL
+            if (!downloadUrl && pdfRendition?.content?.source) {
+                const response = await client.files.getDownloadUrl(pdfRendition.content.source, `${object.name || 'document'}.pdf`, 'attachment');
+                downloadUrl = response.url;
+            }
+            if (downloadUrl) {
+                // Open in new tab - browser will handle as download due to content-disposition
+                window.open(downloadUrl, '_blank');
+            }
+        }
+        catch (err) {
+            console.error('Failed to download PDF:', err);
+            toast({
+                status: 'error',
+                title: 'Download failed',
+                description: 'Failed to download the PDF file',
+                duration: 5000,
+            });
+        }
+        finally {
+            setIsDownloading(false);
+        }
+    };
+    return (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: handleDownloadPdf, disabled: isDownloading, title: "Download PDF", children: isDownloading ? _jsx(Spinner, { size: "sm" }) : _jsx(Download, { className: "size-4" }) }) }));
+}
+function PdfPreviewPanel({ object }) {
+    return (_jsx("div", { className: PANEL_HEIGHTS.content, children: _jsx(SimplePdfViewer, { object: object, className: "h-full" }) }));
+}
+/**
+ * Panel for displaying Office documents converted to PDF.
+ * Handles the various states: converting, error, showing PDF.
+ */
+function OfficePdfPreviewPanel({ pdfRendition, officePdfUrl, officePdfConverting, officePdfError, onConvert, }) {
+    if (officePdfConverting) {
+        return (_jsxs("div", { className: "flex flex-col justify-center items-center flex-1 gap-2", children: [_jsx(Spinner, { size: "lg" }), _jsx("span", { className: "text-muted", children: "Converting to PDF..." })] }));
+    }
+    if (officePdfError) {
+        return (_jsxs("div", { className: "flex flex-col justify-center items-center flex-1 gap-2 text-destructive", children: [_jsx(AlertTriangle, { className: "size-8" }), _jsx("span", { children: officePdfError })] }));
+    }
+    if (pdfRendition?.content?.source) {
+        return (_jsx("div", { className: PANEL_HEIGHTS.content, children: _jsx(SimplePdfViewer, { source: pdfRendition.content.source, className: "h-full" }) }));
+    }
+    if (officePdfUrl) {
+        return (_jsx("div", { className: PANEL_HEIGHTS.content, children: _jsx(SimplePdfViewer, { url: officePdfUrl, className: "h-full" }) }));
+    }
+    return (_jsx("div", { className: "flex flex-col justify-center items-center flex-1 gap-2", children: _jsx(Button, { onClick: onConvert, children: "Convert to PDF" }) }));
+}
+function PdfProcessingPanel({ progress, status, outputFormat }) {
+    const statusColor = getWorkflowStatusColor(status);
+    const statusName = getWorkflowStatusName(status);
+    // Show detailed progress (tables, images, visuals) for XML processing
+    const isXmlProcessing = outputFormat === "xml";
+    // Ensure percent is a valid number (handle undefined and NaN from division by zero)
+    const percent = progress?.percent != null && !isNaN(progress.percent) ? progress.percent : 0;
+    return (_jsxs("div", { className: "px-4 py-4", children: [progress && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(ProgressLine, { name: isXmlProcessing ? "Analyze Layouts" : "Analyze Page", progress: progress.pages }), isXmlProcessing && (_jsxs(_Fragment, { children: [_jsx(ProgressLine, { name: "Extract Tables", progress: progress.tables }), _jsx(ProgressLine, { name: "Describe Images", progress: progress.images }), _jsx(ProgressLine, { name: "Process Visually", progress: progress.visuals })] }))] }), _jsxs("div", { className: "pt-2 text-sm text-muted", children: ["Progress: ", percent, "%", _jsx("span", { className: "px-2", children: "\u2022" }), _jsx("span", { className: statusColor, children: statusName }), progress.started_at && (_jsxs(_Fragment, { children: [_jsx("span", { className: "px-2", children: "\u2022" }), _jsxs("span", { children: [((Date.now() - progress.started_at) / 1000).toFixed(0), " sec. elapsed"] })] }))] }), _jsx(Progress, { percent: percent })] })), !progress && (_jsxs("div", { className: "flex items-center gap-2 text-muted", children: [_jsx(Spinner, { size: "sm" }), _jsx("span", { children: "Loading processing status..." })] }))] }));
+}
+function ProgressLine({ name, progress }) {
+    return (_jsxs("div", { className: "flex gap-2 text-sm", children: [_jsxs("span", { className: "text-muted min-w-36", children: [name, ":"] }), _jsxs("span", { children: [progress.processed, " of ", progress.total] })] }));
+}
+//# sourceMappingURL=ContentOverview.js.map