@alpaca-editor/core 1.0.3762-mono

package/dist/page-wizard/steps/CreatePageAndLayoutStep.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreatePageAndLayoutStep = CreatePageAndLayoutStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Splitter_1 = require("../../editor/ui/Splitter");
+const CreatePage_1 = require("./CreatePage");
+const react_1 = require("react");
+const PageViewer_1 = require("../../editor/page-viewer/PageViewer");
+const editContext_1 = require("../../editor/client/editContext");
+const utils_1 = require("primereact/utils");
+const ComponentTypesSelector_1 = require("./ComponentTypesSelector");
+const ActionButton_1 = require("../../components/ActionButton");
+const schema_1 = require("./schema");
+const service_1 = require("../service");
+const aiService_1 = require("../../editor/services/aiService");
+const usePageCreator_1 = require("./usePageCreator");
+const use_debounce_1 = require("use-debounce");
+function CreatePageAndLayoutStep({ wizard, step, parentItem, pageModel, setPageModel, data, setData, internalState, setInternalState, setStepCompleted, }) {
+    const [pageLoaded, setPageLoaded] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const editContext = (0, editContext_1.useEditContext)();
+    const [abortController, setAbortController] = (0, react_1.useState)();
+    const [message, setMessage] = (0, react_1.useState)();
+    const [isCreatingComponents, setIsCreatingComponents] = (0, react_1.useState)(false);
+    const pageItem = internalState.pageItem;
+    const pageCreator = (0, usePageCreator_1.usePageCreator)(pageItem, wizard, setPageModel);
+    if (!parentItem)
+        return "No parent item";
+    (0, react_1.useEffect)(() => {
+        if (!internalState.layoutInstructions) {
+            setInternalState({
+                ...internalState,
+                layoutInstructions: step.instructions,
+            });
+        }
+    }, []);
+    const createComponents = async () => {
+        if (!pageLoaded)
+            return;
+        if (pageModel?.components && !isCreatingComponents) {
+            try {
+                setIsCreatingComponents(true);
+                await pageCreator.createComponentsRecursively(pageModel.components, "root");
+                setInternalState((prev) => ({
+                    ...prev,
+                    componentsCreated: true,
+                }));
+            }
+            finally {
+                setIsCreatingComponents(false);
+            }
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (internalState.componentsCreated &&
+            !isCreatingComponents &&
+            !isLoading) {
+            editContext?.requestRefresh("immediate");
+        }
+    }, [isCreatingComponents, isLoading]);
+    const createComponentsThrottled = (0, use_debounce_1.useThrottledCallback)(createComponents, 300);
+    (0, react_1.useEffect)(() => {
+        createComponentsThrottled();
+    }, [pageModel]);
+    (0, react_1.useEffect)(() => {
+        if (editContext &&
+            editContext.page &&
+            editContext.page.item &&
+            pageItem &&
+            pageItem.id === editContext.page.item.descriptor.id)
+            setPageLoaded(true);
+    }, [editContext?.page, pageItem]);
+    if (!pageItem) {
+        return ((0, jsx_runtime_1.jsx)(CreatePage_1.CreatePage, { wizard: wizard, parentItem: parentItem, setPageItem: (pageItem) => setInternalState((prev) => ({ ...prev, pageItem })), pageItem: pageItem, pageModel: pageModel, setPageModel: setPageModel, step: step, data: data }));
+    }
+    const createLayout = async () => {
+        try {
+            if (!editContext)
+                return;
+            setIsLoading(true);
+            setStepCompleted(false);
+            if (internalState.componentsCreated) {
+                await (0, service_1.wipeComponents)(pageItem.descriptor);
+                setPageModel((prev) => ({
+                    ...prev,
+                    components: [],
+                }));
+                editContext?.requestRefresh("immediate");
+            }
+            // Parse schema if it's a string
+            const schema = typeof wizard.schema === "string"
+                ? JSON.parse(wizard.schema)
+                : wizard.schema;
+            // Filter the schema based on selected component types and placeholders
+            const filteredSchema = (0, schema_1.convertPageSchemaToWizardComponents)(schema, data.selectedComponentTypes);
+            const localAbortController = new AbortController();
+            setAbortController(localAbortController);
+            const result = await (0, aiService_1.executePrompt)([
+                {
+                    content: `${internalState.layoutInstructions?.trim()} Reply with a json object of type PageModel = { components: Component[]; message: string; }; 
+              Component = {  name: string, type: string;  fields: Field[]; placeholder?: string; children?: Component[]; }; 
+              Field = {  name: string;  value: string;  type: string; };
+              Generate a descriptive name for each component including the topic.
+              Only use component types that are in the page schema.
+           
+              Component types: ${JSON.stringify(filteredSchema)} Root level component types ${filteredSchema
+                        .filter((c) => c.allowedOnRoot)
+                        .map((c) => c.type)
+                        .join(", ")}
+              Tell the user your reasoning in the message field.
+              Fill image ids into picture / image fields.
+              The language of the page is ${pageItem.descriptor.language}.
+              Input data: ${JSON.stringify(data)}`,
+                    name: "system",
+                    role: "system",
+                },
+            ], editContext, service_1.createWizardAiContext, [""], true, { signal: localAbortController.signal }, step.aiModel || "o3-mini-low", (response) => {
+                try {
+                    const newLayout = JSON.parse(response.content);
+                    if (newLayout) {
+                        setPageModel((prev) => mergeLayout(prev, newLayout));
+                    }
+                    setMessage(newLayout.message);
+                }
+                catch (parseError) { }
+            });
+            const pageModel = JSON.parse(result.content);
+            setPageModel((prev) => mergeLayout(prev, pageModel));
+            setMessage(pageModel.message);
+            setStepCompleted(true);
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    // Custom instructions panel
+    const customInstructionsPanel = () => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold", children: "Instructions" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3 text-xs text-gray-500", children: "Provide guidance for the AI when generating your layout" }), (0, jsx_runtime_1.jsx)("textarea", { value: internalState.layoutInstructions, onChange: (e) => setInternalState({
+                        ...internalState,
+                        layoutInstructions: e.target.value,
+                    }), placeholder: "Example: Make it modern and minimalist. Focus on images. Include a hero section at the top.", className: "w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 h-48" })] }));
+    };
+    const panels = [
+        {
+            name: "settings",
+            content: ((0, jsx_runtime_1.jsxs)("div", { className: "pr-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Page item" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500", children: pageItem.path }), (0, jsx_runtime_1.jsx)(ComponentTypesSelector_1.ComponentTypeSelector, { selectedComponentTypes: data.selectedComponentTypes, setSelectedComponentTypes: (selectedTypes) => {
+                            setData({
+                                ...data,
+                                selectedComponentTypes: selectedTypes,
+                            });
+                        }, schema: wizard.schema, data: data, setData: setData, step: step }), customInstructionsPanel(), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { onClick: createLayout, disabled: isLoading ||
+                                    !data.selectedComponentTypes ||
+                                    data.selectedComponentTypes.length === 0, isLoading: isLoading, loadingText: "Working", className: "flex-1", children: internalState.componentsCreated
+                                    ? "Delete and Regenerate Layout"
+                                    : "Generate Layout" }), isLoading && ((0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { isLoading: false, onClick: () => abortController?.abort("User aborted"), children: "Abort" }))] }), message && (0, jsx_runtime_1.jsx)("div", { className: "mt-2 text-xs", children: message })] })),
+            defaultSize: 400,
+        },
+        {
+            name: "layout",
+            content: ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("px-6", pageLoaded ? "h-full" : "h-0"), children: (0, jsx_runtime_1.jsx)(PageViewer_1.PageViewer, { name: "single", mode: editContext?.previewMode ? "view" : "edit", showFormEditor: false, followEditsDefault: true, pageViewContext: editContext.pageView }) })),
+            defaultSize: "auto",
+        },
+    ];
+    return (0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { panels: panels });
+}
+/**
+ * Merges a new layout with the previous layout
+ * - Keeps all previous components
+ * - Adds new components
+ * - Updates existing fields with new values
+ * - Adds new fields
+ */
+const mergeLayout = (prev, newLayout) => {
+    if (!prev)
+        return newLayout;
+    // Merge top-level properties
+    const result = {
+        name: newLayout.name || prev.name,
+        message: newLayout.message,
+        metaDescription: prev.metaDescription,
+        metaKeywords: prev.metaKeywords,
+        components: [...(prev.components || [])],
+    };
+    // Function to merge components recursively
+    const mergeComponents = (existingComponents, newComponents) => {
+        if (!newComponents?.length)
+            return existingComponents;
+        const result = [...existingComponents];
+        for (const newComp of newComponents) {
+            // Try to find a matching component by type and name
+            const existingIndex = result.findIndex((comp) => comp.type === newComp.type && comp.name === newComp.name);
+            if (existingIndex >= 0) {
+                // Update existing component
+                const existing = result[existingIndex];
+                // Merge fields - update existing fields and add new ones
+                const mergedFields = [...(existing.fields || [])];
+                for (const newField of newComp.fields || []) {
+                    const fieldIndex = mergedFields.findIndex((f) => f.name === newField.name);
+                    if (fieldIndex >= 0) {
+                        mergedFields[fieldIndex].value = newField.value; // Update existing field
+                        mergedFields[fieldIndex].type = newField.type;
+                    }
+                    else {
+                        mergedFields.push(newField); // Add new field
+                    }
+                }
+                // Recursive merge of children components
+                const mergedChildren = mergeComponents(existing.children || [], newComp.children || []);
+                // Create updated component
+                result[existingIndex] = {
+                    ...existing,
+                    fields: mergedFields,
+                    children: mergedChildren,
+                    placeholder: newComp.placeholder || existing.placeholder,
+                };
+            }
+            else {
+                // Add new component
+                result.push(newComp);
+            }
+        }
+        return result;
+    };
+    // Merge components recursively
+    result.components = mergeComponents(result.components, newLayout.components || []);
+    return result;
+};

package/dist/page-wizard/steps/EditButton.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditButton = EditButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function EditButton({ field, onEdit, className = "" }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onEdit, className: `inline-flex items-center justify-center p-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${className}`, "aria-label": `Edit ${field.name || "field"}`, title: `Edit ${field.name || "field"}`, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" }) }) }));
+}

package/dist/page-wizard/steps/FieldEditor.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldEditor = FieldEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_1 = require("primereact/editor");
+function FieldEditor({ field, onFieldEdited, }) {
+    const [fieldValue, setFieldValue] = (0, react_1.useState)("");
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (isEditing) {
+            const value = field.value;
+            setFieldValue(typeof value === "string" ? value : "");
+        }
+    }, [isEditing]);
+    if (!isEditing) {
+        return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setIsEditing(true), className: "cursor-pointer mb-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "font-bold text-gray-900", children: [field.name, ":"] }), (0, jsx_runtime_1.jsx)("div", { className: "text-gray-700 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:my-1 [&_p]:my-1", dangerouslySetInnerHTML: { __html: field.value } })] }));
+    }
+    const isRichText = field.type === "Rich Text";
+    const handleSave = () => {
+        console.log(`Saving changes to field ${field.name}:`, fieldValue);
+        field.value = fieldValue;
+        setIsEditing(false);
+        onFieldEdited();
+    };
+    const handleCancel = () => {
+        setIsEditing(false);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-1000", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-full max-w-lg", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-lg font-medium text-gray-900 mb-4", children: ["Edit ", field.name || "Field"] }), isRichText ? ((0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)(editor_1.Editor, { className: "w-full h-64 p-2 border border-gray-300 rounded-md", value: fieldValue, onTextChange: (e) => setFieldValue(e.htmlValue || "") }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("textarea", { className: "w-full p-2 border border-gray-300 rounded-md", value: fieldValue, onChange: (e) => setFieldValue(e.target.value) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end space-x-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleCancel, className: "inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleSave, className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", children: "Save" })] })] }) }));
+}

package/dist/page-wizard/steps/Generate.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+const Icons_1 = require("../../editor/ui/Icons");
+const Icons_2 = require("../../editor/ui/Icons");
+function Generate({ title }) {
+    console.log("Generate", title);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("flex flex-col justify-center items-center h-full transition-all duration-300 animate-fadeIn text-canvas-pink"), children: (0, jsx_runtime_1.jsxs)("div", { className: "mb-20", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center ml-20 animate-sparkle w-auto min-h-10 delay-700", children: (0, jsx_runtime_1.jsx)(Icons_2.SparkleIconSmall, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center ml-5 animate-sparkle w-auto min-h-20", children: (0, jsx_runtime_1.jsx)(Icons_1.SparkleIconBig, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center mr-20 animate-sparkle w-auto min-h-10 delay-500", children: (0, jsx_runtime_1.jsx)(Icons_2.SparkleIconSmall, {}) })] }) }));
+}
+exports.default = Generate;

package/dist/page-wizard/steps/ImagesStep.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagesStep = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ScrollingContentTree_1 = require("../../editor/ScrollingContentTree");
+const Splitter_1 = require("../../editor/ui/Splitter");
+const editContext_1 = require("../../editor/client/editContext");
+const aiService_1 = require("../../editor/services/aiService");
+const service_1 = require("../service");
+const ActionButton_1 = require("../../components/ActionButton");
+const utils_1 = require("primereact/utils");
+const button_1 = require("primereact/button");
+const dialog_1 = require("primereact/dialog");
+const ImagesStep = (props) => {
+    const mediaRootId = "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1";
+    const [selectedFolderId, setSelectedFolderId] = (0, react_1.useState)(mediaRootId);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const editContext = (0, editContext_1.useEditContext)();
+    const propName = props.step.propertyName || "images";
+    const [showFolderDialog, setShowFolderDialog] = (0, react_1.useState)(false);
+    const [selectedFolder, setSelectedFolder] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (props.data[propName]?.length > 0) {
+            props.setStepCompleted(true);
+        }
+    }, [props.data]);
+    const findMatchingImages = async () => {
+        setIsLoading(true);
+        setError(null);
+        props.setData((prevData) => ({
+            ...prevData,
+            [propName]: [],
+        }));
+        try {
+            // First, ask AI for keywords based on the content
+            const aiPromptResult = await (0, aiService_1.executePrompt)([
+                {
+                    content: `You are an AI assistant for building a web page. You will later have to create images for the page. 
+                     Please anaylze the provided data and suggest a number of images and specific keywords per image. The keywords will be used to find matching images in the image library.                 
+                     Response JSON format: { images: Image[] } type Image = { title: string,  keywords: string[] }
+                     Input data: ${JSON.stringify(props.data)}
+                     Instructions: ${props.step.instructions}`,
+                    name: "system",
+                    role: "system",
+                },
+            ], editContext, service_1.createWizardAiContext, [""], true, undefined, "o3-mini-low");
+            const images = JSON.parse(aiPromptResult.content).images;
+            // Create an array of promises for all search operations
+            const searchPromises = images.map(async (image) => {
+                const searchResult = await (0, aiService_1.executeSearch)({
+                    query: image.keywords.join(" "),
+                    rootItemIds: selectedFolderId ? [selectedFolderId] : undefined,
+                    editContext: editContext,
+                    maxResults: 6,
+                    index: "media",
+                    skipValidation: true,
+                });
+                if (searchResult.type === "success") {
+                    const thumbnails = searchResult.data.map((thumbnail) => ({
+                        name: thumbnail.name,
+                        id: thumbnail.id,
+                        thumbUrl: thumbnail.thumbUrl,
+                        description: thumbnail.description,
+                    }));
+                    props.setInternalState((state) => ({
+                        ...state,
+                        thumbnails: [
+                            ...(state.thumbnails || []),
+                            ...thumbnails.filter((newThumb) => !(state.thumbnails || []).some((existingThumb) => existingThumb.id === newThumb.id)),
+                        ],
+                    }));
+                    props.setData((prevData) => ({
+                        ...prevData,
+                        [propName]: [
+                            ...(prevData[propName] || []),
+                            {
+                                ...image,
+                                options: thumbnails,
+                            },
+                        ],
+                    }));
+                }
+                else {
+                    setError(`Error searching for images: ${searchResult.response.statusText}`);
+                }
+            });
+            // Wait for all search operations to complete
+            await Promise.all(searchPromises);
+        }
+        catch (err) {
+            setError(`Error finding matching images: ${err instanceof Error ? err.message : String(err)}`);
+            console.error("Error in findMatchingImages:", err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const loadFolder = async () => {
+            if (selectedFolderId) {
+                const item = await editContext?.itemsRepository.getItem({
+                    id: selectedFolderId,
+                    language: "en",
+                    version: 1,
+                });
+                console.log("ITEM", item);
+                setSelectedFolder(item);
+            }
+        };
+        loadFolder();
+    }, [selectedFolderId]);
+    console.log("FOLDER", selectedFolder, selectedFolderId);
+    const panels = [
+        {
+            name: "Settings",
+            defaultSize: 400,
+            content: ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col gap-2 pr-6 pb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mb-2 rounded-md border border-gray-400 bg-white p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2 text-sm font-bold text-gray-800", children: "Image library folder" }), selectedFolder && ((0, jsx_runtime_1.jsx)("div", { className: "mb-2 text-sm text-gray-500", children: selectedFolder.path })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Change Folder", onClick: () => {
+                                    setShowFolderDialog(true);
+                                } }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Select Folder", visible: showFolderDialog, onHide: () => {
+                                    setShowFolderDialog(false);
+                                }, style: { width: "50vw", height: "50vh" }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex h-full flex-col", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { rootItemId: mediaRootId, onSelectionChange: (selection) => {
+                                            const selectedNode = selection[0];
+                                            if (selectedNode)
+                                                setSelectedFolderId(selectedNode.id);
+                                            else
+                                                setSelectedFolderId(mediaRootId);
+                                            setShowFolderDialog(false);
+                                        } }) }) })] }), (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { onClick: findMatchingImages, isLoading: isLoading, disabled: isLoading, loadingText: "Searching...", children: "Find Matching Images" })] })),
+        },
+        {
+            name: "Images",
+            defaultSize: "auto",
+            content: ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-4 p-4 pt-0", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [error && (0, jsx_runtime_1.jsx)("div", { className: "text-red-500", children: error }), props.data[propName]?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-4", children: props.data[propName]?.map((image, index) => ((0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.classNames)("rounded border border-gray-400 bg-white p-4 text-sm", index % 2 === 0
+                                        ? "animate-fadeRight"
+                                        : "animate-fadeLeft"), children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-3 text-lg", children: image.title }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-5", children: image.options?.map((option, thumbnailIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex h-28 w-28 cursor-pointer items-center justify-center border border-gray-400", onClick: () => {
+                                                    props.setData((prevData) => ({
+                                                        ...prevData,
+                                                        [propName]: prevData[propName].map((img, imgIndex) => ({
+                                                            ...img,
+                                                            options: imgIndex !== index
+                                                                ? img.options
+                                                                : img.options?.map((option, optionIndex) => optionIndex === thumbnailIndex
+                                                                    ? {
+                                                                        ...option,
+                                                                        selected: !option.selected,
+                                                                    }
+                                                                    : option),
+                                                        })),
+                                                    }));
+                                                }, children: [(0, jsx_runtime_1.jsx)("img", { src: option.thumbUrl, alt: option.name }, thumbnailIndex), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("peer ring-offset-background focus-visible:ring-ring pointer-events-none absolute right-1 bottom-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", option.selected
+                                                            ? "text-canvas-pink border-canvas-pink bg-white"
+                                                            : ""), children: option.selected && ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M20 6 9 17l-5-5" }) })) })] }, thumbnailIndex))) })] }, index))) }))] }) }) })),
+        },
+    ];
+    return (0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { panels: panels });
+};
+exports.ImagesStep = ImagesStep;

package/dist/page-wizard/steps/LayoutStep.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutStep = LayoutStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../../editor/client/editContext");
+const aiService_1 = require("../../editor/services/aiService");
+const service_1 = require("../service");
+const Components_1 = require("./Components");
+const Splitter_1 = require("../../editor/ui/Splitter");
+const schema_1 = require("./schema");
+const ActionButton_1 = require("../../components/ActionButton");
+const ComponentTypesSelector_1 = require("./ComponentTypesSelector");
+function LayoutStep({ wizard, step, data, setData, setStepCompleted, internalState, setInternalState, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const abortController = new AbortController();
+    const localAbortController = abortController || new AbortController();
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [message, setMessage] = (0, react_1.useState)();
+    const [selectedComponentTypes, setSelectedComponentTypes] = (0, react_1.useState)([]);
+    const [customInstructions, setCustomInstructions] = (0, react_1.useState)();
+    if (!editContext) {
+        return null;
+    }
+    (0, react_1.useEffect)(() => {
+        if (data.pageModel?.components?.length) {
+            setStepCompleted(!isLoading);
+        }
+    }, [data.pageModel, isLoading]);
+    (0, react_1.useEffect)(() => {
+        setCustomInstructions(step.instructions);
+    }, []);
+    const createLayout = async () => {
+        try {
+            setIsLoading(true);
+            // Parse schema if it's a string
+            const schema = typeof wizard.schema === "string"
+                ? JSON.parse(wizard.schema)
+                : wizard.schema;
+            // Filter the schema based on selected component types and placeholders
+            const filteredSchema = (0, schema_1.convertPageSchemaToWizardComponents)(schema, selectedComponentTypes);
+            const result = await (0, aiService_1.executePrompt)([
+                {
+                    content: `${customInstructions?.trim()} Reply with a json object of type PageModel = { name: string; metaDescription: string; components: Component[]; message: string; }; 
+              Component = {  name: string, type: string;  fields: Field[]; placeholder?: string; children?: Component[]; }; 
+              Field = {  name: string;  value: string;  type: string; };
+              Generate a descriptive name for each component including the topic.
+              Only use component types that are in the page schema. Also suggest a page name following default sitecore item naming conventions (no underscores, no white space, no umlaute, no special characters, hyphens are allowed) and the page meta description.
+              Component types: ${JSON.stringify(filteredSchema)} Root level component types ${filteredSchema
+                        .filter((c) => c.allowedOnRoot)
+                        .map((c) => c.type)
+                        .join(", ")}
+              Tell the user your reasoning in the message field.
+              Fill image ids into picture / image fields.
+              Input data: ${JSON.stringify(data)}`,
+                    name: "system",
+                    role: "system",
+                },
+            ], editContext, service_1.createWizardAiContext, [""], true, { signal: localAbortController.signal }, "o3-mini-low", (response) => {
+                try {
+                    const newLayout = JSON.parse(response.content);
+                    if (newLayout) {
+                        setData((prev) => ({
+                            ...prev,
+                            pageModel: newLayout,
+                        }));
+                    }
+                    setMessage(newLayout.message);
+                }
+                catch (parseError) { }
+            });
+            const pageModel = JSON.parse(result.content);
+            setData({
+                ...data,
+                pageModel: JSON.parse(result.content),
+                customInstructions,
+            });
+            setMessage(pageModel.message);
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    // Toggle placeholder selection
+    // Regenerate layout with current selected component types and placeholders
+    const regenerateLayout = () => {
+        createLayout();
+    };
+    (0, react_1.useEffect)(() => {
+        if (!selectedComponentTypes.length)
+            return;
+        // Only set custom instructions if they're not already set or if step.instructions has changed
+        if (customInstructions !== step.instructions) {
+            setCustomInstructions(step.instructions);
+        }
+    }, [step.instructions, selectedComponentTypes]);
+    // Custom instructions panel
+    const customInstructionsPanel = () => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-bold", children: "Instructions" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3 text-xs text-gray-500", children: "Provide guidance for the AI when generating your layout" }), (0, jsx_runtime_1.jsx)("textarea", { value: customInstructions, onChange: (e) => setCustomInstructions(e.target.value), placeholder: "Example: Make it modern and minimalist. Focus on images. Include a hero section at the top.", className: "w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 h-48", disabled: isLoading })] }));
+    };
+    const settingsPanel = {
+        name: "Settings",
+        collapsible: false,
+        defaultSize: 450,
+        content: ((0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 overflow-auto flex flex-col h-full pr-4", children: [customInstructionsPanel(), (0, jsx_runtime_1.jsx)(ComponentTypesSelector_1.ComponentTypeSelector, { selectedComponentTypes: selectedComponentTypes, setSelectedComponentTypes: setSelectedComponentTypes, schema: wizard.schema, data: data, setData: setData, step: step }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { onClick: regenerateLayout, disabled: isLoading || selectedComponentTypes.length === 0, isLoading: isLoading, loadingText: "Working", className: "flex-1", children: data.pageModel ? "Regenerate Layout" : "Generate Layout" }), isLoading && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                                localAbortController.abort();
+                                setIsLoading(false);
+                            }, className: "bg-red-500 text-white px-2 py-1 rounded text-xs hover:bg-red-600 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "pi pi-times" }), "Abort"] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 p-2", children: message })] })),
+    };
+    const layoutPanel = {
+        name: "Layout",
+        defaultSize: "auto",
+        collapsible: false,
+        content: ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-2 flex flex-col justify-center items-center text-gray-600", children: (0, jsx_runtime_1.jsx)(Components_1.Components, { pageModel: data.pageModel, onComponentRemoved: () => setData({ ...data }), onFieldEdited: () => setData({ ...data }), thumbnails: internalState.thumbnails, setInternalState: setInternalState }) })),
+    };
+    return ((0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { panels: [settingsPanel, layoutPanel], localStorageKey: "editor.page-wizard.layout" }));
+}