@alpaca-editor/core 1.0.3762-mono

package/dist/editor/field-types/SingleLineText.js

@@ -0,0 +1,92 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleLineText = SingleLineText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inputtext_1 = require("primereact/inputtext");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+function SingleLineText({ field, readOnly, updateFieldValue, }) {
+    const editContextRef = (0, editContext_1.useEditContextRef)();
+    const editContext = (0, editContext_1.useEditContext)();
+    const modifiedFieldsContext = (0, editContext_1.useModifiedFieldsContext)();
+    const inputRef = (0, react_1.useRef)(null);
+    // const [selectionStart, setSelectionStart] = useState(0);
+    // const [selectionEnd, setSelectionEnd] = useState(0);
+    if (!editContextRef.current)
+        return;
+    const fieldItem = field.descriptor.item;
+    const [value, setValue] = (0, react_1.useState)(undefined);
+    const modifiedField = modifiedFieldsContext?.modifiedFields.find((x) => x.fieldId === field.id &&
+        x.item.id === fieldItem.id &&
+        x.item.language === fieldItem.language &&
+        x.item.version === fieldItem.version);
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current !== document.activeElement) {
+            if (field.isHistoric)
+                setValue(field.value);
+            else {
+                setValue(modifiedField?.value ?? field.value);
+            }
+        }
+    }, [field.value, modifiedFieldsContext?.modifiedFields]);
+    if (!fieldItem)
+        return;
+    const handleChange = (e) => {
+        if (editContextRef.current?.operations.undoing) {
+            return;
+        }
+        const newValue = e.target.value;
+        if (newValue !== value) {
+            setValue(newValue);
+            updateFieldValue(newValue);
+        }
+    };
+    const handleSelect = (e) => {
+        const target = e.target;
+        const range = {
+            fieldId: field.id,
+            startOffset: target.selectionStart || 0,
+            endOffset: target.selectionEnd || 0,
+            text: target.value.slice(target.selectionStart || 0, target.selectionEnd || 0),
+        };
+        editContextRef.current?.setSelectedRange(range);
+    };
+    (0, react_1.useEffect)(() => {
+        if (editContextRef.current?.focusedField?.fieldId === field.id &&
+            editContextRef.current?.focusedField?.item.id === fieldItem.id &&
+            editContextRef.current?.focusedField?.item.language ===
+                fieldItem.language &&
+            editContextRef.current?.focusedField?.item.version === fieldItem.version) {
+            const range = editContextRef.current.selectedRange;
+            if (range && inputRef.current) {
+                inputRef.current.setSelectionRange(range.startOffset, range.endOffset);
+                // setSelectionStart(range.startOffset);
+                // setSelectionEnd(range.endOffset);
+            }
+        }
+    }, [editContext?.selectedRange]);
+    // // Calculate the position of the highlight
+    // const getHighlightStyle = () => {
+    //   if (!inputRef.current || selectionStart === selectionEnd) return {};
+    //   const text = value || "";
+    //   const beforeSelection = text.slice(0, selectionStart);
+    //   const selection = text.slice(selectionStart, selectionEnd);
+    //   // Use a temporary span to measure text width
+    //   const temp = document.createElement("span");
+    //   temp.style.font = window.getComputedStyle(inputRef.current).font;
+    //   temp.style.visibility = "hidden";
+    //   temp.style.position = "absolute";
+    //   document.body.appendChild(temp);
+    //   temp.textContent = beforeSelection;
+    //   const startPos = temp.getBoundingClientRect().width + 5; // padding
+    //   temp.textContent = selection;
+    //   const width = temp.getBoundingClientRect().width;
+    //   document.body.removeChild(temp);
+    //   return {
+    //     left: `${startPos}px`,
+    //     width: `${width}px`,
+    //   };
+    // };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { ref: inputRef, value: value || "", disabled: readOnly, className: "p-1.5 focus-shadow text-sm", style: { width: "100%" }, onChange: handleChange, onSelect: handleSelect }, fieldItem.id + field.id + fieldItem.language + fieldItem.version) }));
+}

package/dist/editor/field-types/TreeListEditor.js

@@ -0,0 +1,137 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TreeListEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const splitter_1 = require("primereact/splitter");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const listbox_1 = require("primereact/listbox");
+const editService_1 = require("../services/editService");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+const utils_1 = require("../utils");
+const ItemSearch_1 = __importDefault(require("../ui/ItemSearch"));
+const button_1 = require("primereact/button");
+const ContentTree_1 = __importDefault(require("../ContentTree"));
+function TreeListEditor({ field, readOnly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [selectedItemNodesInTree, setSelectedItemNodesInTree] = (0, react_1.useState)([]);
+    const [selectedFromList, setSelectedFromList] = (0, react_1.useState)([]);
+    const overlayPanelRef = (0, react_1.useRef)(null);
+    const [currentItemId, setCurrentItemId] = (0, react_1.useState)("");
+    const [rootItemIds, setRootItemIds] = (0, react_1.useState)([]);
+    const [values, setValues] = (0, react_1.useState)([]);
+    const [hoveredItemId, setHoveredItemId] = (0, react_1.useState)();
+    const [hoveredItem, setHoveredItem] = (0, react_1.useState)();
+    if (!editContext)
+        return;
+    (0, react_1.useEffect)(() => {
+        const loadItem = async () => {
+            if (!hoveredItemId)
+                return;
+            const item = await editContext.itemsRepository.getItem({
+                id: hoveredItemId,
+                language: editContext.currentItemDescriptor?.language ?? "en",
+                version: 0,
+            });
+            if (item)
+                setHoveredItem(item);
+        };
+        loadItem();
+    }, [hoveredItemId]);
+    (0, react_1.useEffect)(() => {
+        if (editContext.lockedField?.fieldId === field.descriptor.fieldId &&
+            editContext.lockedField.item.id == field.descriptor.item.id &&
+            editContext.lockedField.item.language == field.descriptor.item.language &&
+            editContext.lockedField.item.version == field.descriptor.item.version)
+            return;
+        setValues(field.value || []);
+    }, [field.value]);
+    (0, react_1.useEffect)(() => {
+        const loadLookupSources = async () => {
+            const datasources = await (0, editService_1.getLookupSources)(field, editContext.sessionId);
+            if (datasources.length) {
+                setRootItemIds(datasources.map((x) => x.id));
+            }
+            else
+                setRootItemIds(["{11111111-1111-1111-1111-111111111111}"]);
+        };
+        loadLookupSources();
+    }, [field.id, field.descriptor.item.id]);
+    const trimPath = (path) => {
+        const splitPath = path.split("/");
+        if (splitPath.length > 2) {
+            return (splitPath[splitPath.length - 2] + "/" + splitPath[splitPath.length - 1]);
+        }
+        return path;
+    };
+    async function removeFromList(items) {
+        const newValues = values.filter((x) => !items.find((i) => x.id == i.id));
+        setValues(newValues);
+        await editContext?.operations.editField({
+            field: field.descriptor,
+            value: newValues,
+            rawValue: newValues.map((x) => (0, utils_1.normalizeGuid)(x.id)).join("|"),
+            refresh: "waitForQuietPeriod",
+        });
+    }
+    async function addToList(itemNodes) {
+        setSelectedItemNodesInTree([]);
+        const newValues = [...values];
+        itemNodes.forEach((node) => {
+            if (!newValues.find((x) => x.id == node.id)) {
+                newValues.push({
+                    id: node.id,
+                    path: node.path || node.name,
+                    name: node.name,
+                    icon: node.icon,
+                    idPath: node.idPath,
+                });
+            }
+        });
+        setValues(newValues);
+        await editContext?.operations.editField({
+            field: field.descriptor,
+            value: newValues,
+            rawValue: newValues.map((x) => (0, utils_1.normalizeGuid)(x.id)).join("|"),
+            refresh: "waitForQuietPeriod",
+        });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "border focus-shadow border-gray-200", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-white mb-1 p-2 border-b border-gray-200", children: (0, jsx_runtime_1.jsx)(ItemSearch_1.default, { rootItemIds: rootItemIds.map((x) => (0, utils_1.normalizeGuid)(x)), itemSelected: async (item) => {
+                        addToList([
+                            {
+                                id: item.id,
+                                path: item.path || item.name,
+                                idPath: item.idPath,
+                                name: item.name || "",
+                                icon: item.icon,
+                            },
+                        ]);
+                    } }) }), (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "h-60", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "relative", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { expandIdPath: hoveredItem?.idPath, language: editContext.currentItemDescriptor?.language ?? "en", onDoubleClick: (node) => {
+                                    if (!readOnly)
+                                        addToList([node]);
+                                }, selectionMode: "multiple", selectedItemIds: selectedItemNodesInTree.length
+                                    ? selectedItemNodesInTree.map((x) => x.id)
+                                    : hoveredItemId
+                                        ? [hoveredItemId]
+                                        : [], onSelectionChange: (e) => {
+                                    setSelectedItemNodesInTree(e);
+                                }, rootItemIds: rootItemIds, includeItemPath: true }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { children: (0, jsx_runtime_1.jsx)("div", { className: "h-full w-full relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-100 flex flex-col justify-center gap-1 p-1", children: [(0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { label: "Add", icon: "pi pi-angle-right", onClick: () => addToList(selectedItemNodesInTree), disabled: readOnly }), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { label: "Remove", icon: "pi pi-angle-left", onClick: () => removeFromList(selectedFromList), disabled: readOnly })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-full relative", children: (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { className: "absolute inset-0 overflow-auto text-xs", options: values, optionLabel: "path", metaKeySelection: true, emptyMessage: "None selected", multiple: true, value: selectedFromList, onChange: (e) => setSelectedFromList(e.value), itemTemplate: (option) => ((0, jsx_runtime_1.jsxs)("div", { className: "select-none hover:bg-gray-50 relative group flex items-center gap-1", onMouseEnter: async () => {
+                                                    setHoveredItemId(option.id);
+                                                    // setExpandIdPath(option.idPath || "");
+                                                    setSelectedItemNodesInTree([option]);
+                                                }, onDoubleClick: () => {
+                                                    if (!readOnly)
+                                                        removeFromList([option]);
+                                                }, children: [(0, jsx_runtime_1.jsx)("img", { src: option.icon, className: "w-4 h-4 mr-2" }), trimPath(option.path), " ", (0, jsx_runtime_1.jsx)("button", { className: "opacity-0 group-hover:opacity-100 transition-opacity", onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            setCurrentItemId(option.id);
+                                                            overlayPanelRef.current?.toggle(e);
+                                                        }, title: "Open", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-arrow-up-right text-xs text-gray-500" }) })] })) }) })] }) }) })] }), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: overlayPanelRef, className: "p-0", showCloseIcon: true, children: (0, jsx_runtime_1.jsx)("div", { className: "p-3", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end gap-2", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: "px-3 py-1 bg-blue-500 text-white rounded text-sm", onClick: () => {
+                                editContext.loadItem(currentItemId);
+                                overlayPanelRef.current?.hide();
+                            }, children: "Open" }) }) }) })] }));
+}

package/dist/editor/fieldTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/editor/media-selector/AiImageSearch.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiImageSearch = AiImageSearch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_debounce_1 = require("use-debounce");
+const editorAiContext_1 = require("../ai/editorAiContext");
+const aiService_1 = require("../services/aiService");
+const editContext_1 = require("../client/editContext");
+const progressspinner_1 = require("primereact/progressspinner");
+const inputtext_1 = require("primereact/inputtext");
+const Thumbnails_1 = require("./Thumbnails");
+const splitter_1 = require("primereact/splitter");
+const Preview_1 = require("./Preview");
+const DialogButtons_1 = __importDefault(require("../ui/DialogButtons"));
+const button_1 = require("primereact/button");
+function AiImageSearch({ onMediaSelected, onHide, }) {
+    const [prompt, setPrompt] = (0, react_1.useState)("");
+    const [loadingPrompt, setLoadingPrompt] = (0, react_1.useState)(false);
+    const [loadingThumbnails, setLoadingThumbnails] = (0, react_1.useState)(false);
+    const [images, setImages] = (0, react_1.useState)([]);
+    const [selectedImage, setSelectedImage] = (0, react_1.useState)();
+    const editContext = (0, editContext_1.useEditContext)();
+    const currentSuggestionRequest = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        suggestPrompt();
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    const suggestPrompt = async () => {
+        if (editContext) {
+            setPrompt("");
+            setLoadingPrompt(true);
+            if (currentSuggestionRequest.current) {
+                currentSuggestionRequest.current.abort();
+            }
+            const abortController = new AbortController();
+            currentSuggestionRequest.current = abortController;
+            try {
+                const result = await (0, aiService_1.executePrompt)([
+                    {
+                        content: "Please extract search terms from the field context that can be used to find a matching image. " +
+                            "I will use the search terms to find an image and populate the image field. If the component does not provide enough context, " +
+                            "also get content from the parent component using the get-content function. " +
+                            "Do not consider current image field contents. " +
+                            "Reply with search terms only!",
+                        name: "user",
+                        role: "user",
+                    },
+                ], editContext, editorAiContext_1.createEditorAiContext, ["get-content"], true, { signal: abortController.signal });
+                setLoadingPrompt(false);
+                const newPrompt = result.responseText.replaceAll("\n", "");
+                setPrompt(newPrompt);
+            }
+            catch (error) {
+                if (error instanceof Error && error.name !== "AbortError") {
+                    console.error("Failed to fetch prompt:", error);
+                }
+                setLoadingPrompt(false);
+            }
+            finally {
+                currentSuggestionRequest.current = null;
+            }
+        }
+    };
+    const handleSearch = (0, use_debounce_1.useDebouncedCallback)(async (searchPrompt) => {
+        if (!editContext)
+            return;
+        setLoadingThumbnails(true);
+        const result = await (0, aiService_1.executeSearch)({
+            query: searchPrompt,
+            editContext,
+            maxResults: 50,
+            index: "media",
+            skipValidation: true,
+        });
+        if (result.type == "success") {
+            setImages(result.data);
+        }
+        else {
+            editContext.showToast({
+                severity: "error",
+                summary: "Error searching",
+                detail: result.response.statusText,
+            });
+        }
+        setLoadingThumbnails(false);
+    }, 300);
+    const onPromptChange = (e) => {
+        const newPrompt = e.target.value;
+        setPrompt(newPrompt);
+        if (currentSuggestionRequest.current) {
+            currentSuggestionRequest.current.abort();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (prompt) {
+            handleSearch(prompt);
+        }
+    }, [prompt]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "flex-1 border-0", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "flex flex-col pt-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 text-sm pt-2 px-2 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Search prompt", (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)(inputtext_1.InputText, { ref: inputRef, value: prompt, onChange: onPromptChange, className: "flex-1" }), loadingPrompt && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center h-10", children: (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "24px", height: "24px" } }) })), !loadingPrompt && ((0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-sparkles", onClick: () => suggestPrompt(), label: "Suggest", size: "small" }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 relative", children: [loadingThumbnails && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center h-full", children: (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "24px", height: "24px" } }) })), (0, jsx_runtime_1.jsx)(Thumbnails_1.Thumbnails, { images: images, selectedImage: selectedImage, setSelectedImage: setSelectedImage, onMediaSelected: onMediaSelected, onHide: onHide })] })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: " relative", children: (0, jsx_runtime_1.jsx)(Preview_1.Preview, { selectedImage: selectedImage }) })] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { disabled: !selectedImage, onClick: () => {
+                            onMediaSelected(selectedImage.id);
+                            onHide();
+                        }, children: "Select" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => onHide(), children: "Cancel" })] })] }));
+}

package/dist/editor/media-selector/AiImageSearchPrompt.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiImageSearchPrompt = AiImageSearchPrompt;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
+const inputtext_1 = require("primereact/inputtext");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const aiService_1 = require("../services/aiService");
+const editorAiContext_1 = require("../ai/editorAiContext");
+const progressspinner_1 = require("primereact/progressspinner");
+function AiImageSearchPrompt({ onSearchPromptChange, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const inputRef = (0, react_1.useRef)(null);
+    const [prompt, setPrompt] = (0, react_1.useState)("");
+    const [loadingPrompt, setLoadingPrompt] = (0, react_1.useState)(false);
+    const currentSuggestionRequest = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        onSearchPromptChange(prompt);
+    }, [prompt]);
+    const suggestPrompt = async () => {
+        if (editContext) {
+            setPrompt("");
+            setLoadingPrompt(true);
+            if (currentSuggestionRequest.current) {
+                currentSuggestionRequest.current.abort();
+            }
+            const abortController = new AbortController();
+            currentSuggestionRequest.current = abortController;
+            try {
+                const result = await (0, aiService_1.executePrompt)([
+                    {
+                        content: "Please extract search terms from the field context that can be used to find a matching image. " +
+                            "I will use the search terms to find an image and populate the image field. If the component does not provide enough context, " +
+                            "also get content from the parent component using the get-content function. " +
+                            "Do not consider current image field contents. " +
+                            "Reply with search terms only!",
+                        name: "user",
+                        role: "user",
+                    },
+                ], editContext, editorAiContext_1.createEditorAiContext, ["get-content"], true, { signal: abortController.signal });
+                setLoadingPrompt(false);
+                const newPrompt = result.responseText.replaceAll("\n", "");
+                setPrompt(newPrompt);
+            }
+            catch (error) {
+                if (error instanceof Error && error.name !== "AbortError") {
+                    console.error("Failed to fetch prompt:", error);
+                }
+                setLoadingPrompt(false);
+            }
+            finally {
+                currentSuggestionRequest.current = null;
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center m-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-search text-gray-500" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { ref: inputRef, value: prompt, onChange: (e) => setPrompt(e.target.value), className: "flex-1" }), loadingPrompt && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center h-10", children: (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "24px", height: "24px" } }) })), !loadingPrompt && ((0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-sparkles", onClick: () => suggestPrompt(), label: "Suggest", size: "small" }))] }));
+}

package/dist/editor/media-selector/MediaSelector.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog_1 = require("primereact/dialog");
+const TreeSelector_1 = require("./TreeSelector");
+const MediaSelector = ({ visible, onHide, onMediaSelected, selectedIdPath, mode, language, }) => {
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, header: mode === "video" ? "Select Video" : "Select Image", "data-testid": "media-selector-dialog", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col h-full ", children: (0, jsx_runtime_1.jsx)(TreeSelector_1.TreeSelector, { language: language, selectedIdPath: selectedIdPath, onHide: onHide, onMediaSelected: onMediaSelected, mode: mode === "video" ? "video" : "image" }) }) }));
+};
+exports.MediaSelector = MediaSelector;

package/dist/editor/media-selector/Preview.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Preview = Preview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Preview({ selectedImage }) {
+    if (!selectedImage)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "m-4 flex justify-center align-center absolute inset-0", children: (0, jsx_runtime_1.jsx)("img", { src: selectedImage?.previewUrl, className: "object-contain", fetchPriority: "high" }) }));
+}

package/dist/editor/media-selector/Thumbnails.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thumbnails = Thumbnails;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+function Thumbnails({ images, selectedImage, setSelectedImage, onMediaSelected, onHide, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col absolute inset-0 overflow-auto p-2", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap content-start items-start gap-2", children: images?.map((t) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)(selectedImage?.id == t.id ? "shadow-md" : "", "w-24 flex flex-col justify-between hover:shadow-md cursor-pointer p-1"), onDoubleClick: () => {
+                    onMediaSelected(t.id);
+                    onHide();
+                }, onClick: () => setSelectedImage(t), children: [(0, jsx_runtime_1.jsx)("div", { className: "h-24 w-24 flex justify-center items-center", children: (0, jsx_runtime_1.jsx)("img", { src: t.thumbUrl }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs break-all", children: t.name })] }, t.id))) }) }));
+}

package/dist/editor/media-selector/TreeSelector.js

@@ -0,0 +1,171 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ContentTree_1 = __importDefault(require("../ContentTree"));
+const splitter_1 = require("primereact/splitter");
+const react_1 = require("react");
+const contentService_1 = require("../services/contentService");
+const editContext_1 = require("../client/editContext");
+const button_1 = require("primereact/button");
+const aiService_1 = require("../services/aiService");
+const fileupload_1 = require("primereact/fileupload");
+const DialogButtons_1 = __importDefault(require("../ui/DialogButtons"));
+const Icons_1 = require("../ui/Icons");
+const Thumbnails_1 = require("./Thumbnails");
+const Preview_1 = require("./Preview");
+const UploadZone_1 = require("./UploadZone");
+const AiImageSearchPrompt_1 = require("./AiImageSearchPrompt");
+const use_debounce_1 = require("use-debounce");
+const progressspinner_1 = require("primereact/progressspinner");
+const TreeSelector = ({ onHide, onMediaSelected, selectedIdPath, language, mode, }) => {
+    const [selectedFolderId, setSelectedFolderId] = (0, react_1.useState)();
+    const [images, setImages] = (0, react_1.useState)();
+    const [selectedImage, setSelectedImage] = (0, react_1.useState)();
+    const [selectedImageId, setSelectedImageId] = (0, react_1.useState)();
+    const [expandedIdPath, setExpandedIdPath] = (0, react_1.useState)();
+    const [searchPrompt, setSearchPrompt] = (0, react_1.useState)();
+    const [loadingThumbnails, setLoadingThumbnails] = (0, react_1.useState)(false);
+    const selection = selectedFolderId ? [selectedFolderId] : [];
+    const editContext = (0, editContext_1.useEditContext)();
+    const [history, setHistory] = (0, react_1.useState)(() => {
+        const savedHistory = localStorage.getItem("editor.mediahistory");
+        return savedHistory ? JSON.parse(savedHistory) : [];
+    });
+    (0, react_1.useEffect)(() => {
+        if (selectedIdPath) {
+            const path = selectedIdPath.split("/");
+            if (path.length > 1) {
+                setSelectedFolderId(path[path.length - 2]);
+                setSelectedImageId(path[path.length - 1]?.toLowerCase().substring(1, 37));
+            }
+            setExpandedIdPath(selectedIdPath);
+        }
+        if (!selectedIdPath) {
+            setExpandedIdPath(history[0]?.idPath);
+            setSelectedFolderId(history[0]?.id);
+            setSelectedImageId(undefined);
+        }
+    }, [selectedIdPath]);
+    (0, react_1.useEffect)(() => {
+        loadThumbnailsAndSelectImage();
+    }, [selectedFolderId]);
+    const updateHistory = async () => {
+        if (!selectedFolderId)
+            return;
+        const item = await editContext?.itemsRepository.getItem({
+            id: selectedFolderId,
+            language: "en",
+            version: 0,
+        });
+        setHistory((history) => {
+            if (!item?.idPath || !item.name)
+                return history;
+            const newEntry = {
+                name: item.name,
+                id: item.id,
+                idPath: item?.idPath,
+            };
+            const newHistory = [
+                newEntry,
+                ...history.filter((x) => x.idPath !== newEntry.idPath).slice(0, 4),
+            ];
+            if (typeof window !== "undefined")
+                localStorage.setItem("editor.mediahistory", JSON.stringify(newHistory));
+            return newHistory;
+        });
+    };
+    async function loadThumbnailsAndSelectImage() {
+        setSelectedImage(undefined);
+        setImages([]);
+        const images = await loadThumbnails(selectedFolderId);
+        if (selectedImageId)
+            setSelectedImage(images?.find((x) => x.id === selectedImageId));
+    }
+    async function loadThumbnails(selectedFolderId) {
+        if (searchPrompt) {
+            await search(searchPrompt);
+            return;
+        }
+        if (!selectedFolderId)
+            setImages([]);
+        else {
+            setLoadingThumbnails(true);
+            const children = await (0, contentService_1.getChildren)(selectedFolderId, editContext.sessionId, mode === "video"
+                ? [
+                    "e76adbdf-87d1-4fcb-ba71-274f7dbf5670",
+                    "374d3a99-c098-4cd2-8fbc-dc2d1ca1c904",
+                ]
+                : [
+                    "C97BA923-8009-4858-BDD5-D8BE5FCCECF7",
+                    "F1828A2C-7E5D-4BBD-98CA-320474871548",
+                ], false, language);
+            setImages(children);
+            setLoadingThumbnails(false);
+            return children;
+        }
+    }
+    const searchDebounced = (0, use_debounce_1.useDebouncedCallback)(async (searchPrompt) => {
+        return search(searchPrompt);
+    }, 300);
+    const search = async (searchPrompt) => {
+        if (!editContext)
+            return;
+        setSearchPrompt(searchPrompt);
+        if (searchPrompt.length == 0)
+            return;
+        setLoadingThumbnails(true);
+        const result = await (0, aiService_1.executeSearch)({
+            query: searchPrompt,
+            rootItemIds: selectedFolderId ? [selectedFolderId] : undefined,
+            editContext,
+            maxResults: 50,
+            index: "media",
+            skipValidation: true,
+        });
+        if (result.type == "success") {
+            setImages(result.data);
+        }
+        else {
+            editContext.showToast({
+                severity: "error",
+                summary: "Error searching",
+                detail: result.response.statusText,
+            });
+        }
+        setLoadingThumbnails(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "flex-1 border-0", children: [(0, jsx_runtime_1.jsxs)(splitter_1.SplitterPanel, { size: 25, className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto p-2", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemIds: ["3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1"], selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], onItemInserted: (item) => {
+                                            setSelectedFolderId(item.id);
+                                        }, expandIdPath: expandedIdPath ?? "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
+                                            const selectedNode = selection[0];
+                                            if (selectedNode)
+                                                setSelectedFolderId(selectedNode.id);
+                                            else
+                                                setSelectedFolderId(undefined);
+                                        }, language: language }) }) }), history.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "my-2 flex items-center gap-1 border-t border-gray-300 px-2 pt-2 text-xs text-gray-500", children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}), " Recent Locations"] }), history.map((x) => ((0, jsx_runtime_1.jsx)("div", { className: "mx-5 flex cursor-pointer gap-1 text-xs hover:text-gray-400", onClick: () => {
+                                            setSelectedFolderId(x.id);
+                                            setExpandedIdPath(x.idPath);
+                                        }, children: x.name }, x.idPath)))] }))] }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full w-full flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(AiImageSearchPrompt_1.AiImageSearchPrompt, { onSearchPromptChange: searchDebounced }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1", children: [loadingThumbnails && ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full items-center", children: (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "24px", height: "24px" } }) })), !loadingThumbnails && ((0, jsx_runtime_1.jsx)(Thumbnails_1.Thumbnails, { images: images ?? [], selectedImage: selectedImage, setSelectedImage: setSelectedImage, onMediaSelected: () => {
+                                                updateHistory();
+                                                onMediaSelected(selectedImage.id);
+                                            }, onHide: onHide }))] }), selectedFolderId && ((0, jsx_runtime_1.jsx)(UploadZone_1.UploadZone, { selectedFolderId: selectedFolderId, uploadCompleted: () => {
+                                        loadThumbnailsAndSelectImage();
+                                    } }))] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "relative", children: (0, jsx_runtime_1.jsx)(Preview_1.Preview, { selectedImage: selectedImage }) })] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(fileupload_1.FileUpload, { mode: "basic", 
+                        // disabled={electedFolderId}
+                        auto: true, chooseLabel: "Upload", accept: "image/*,video/*", url: "/alpaca/editor/upload?folder=" + selection[0], onUpload: async ({ xhr }) => {
+                            updateHistory();
+                            const response = JSON.parse(xhr.responseText);
+                            const thumbs = await loadThumbnails(selectedFolderId);
+                            setSelectedImage(thumbs?.find((x) => x.id === response.id));
+                        } }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: !selectedImage, onClick: () => {
+                            updateHistory();
+                            onMediaSelected(selectedImage.id);
+                            onHide();
+                        }, children: "Select" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => onHide(), children: "Cancel" })] })] }));
+};
+exports.TreeSelector = TreeSelector;