@parhelia/page-wizard 0.1.11004 → 0.1.11005

package/dist/dist/steps/ContentStep.js

@@ -0,0 +1,808 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { Card, Textarea, Input, useEditContext, useEditContextRef, useFieldsEditContext, getChildren, getItemDescriptor, convertToAiPageModel, executePromptWithJsonResult, useItemNameValidation, ActionButton, getLanguagesAndVersions, Button, Popover, PopoverTrigger, cn, EditControls, LanguageSelector, PageViewer, PopoverContent, ScrollingContentTree, normalizeGuid, ItemSearch } from "@parhelia/core";
+import { convertPageSchemaToWizardComponents } from "./schema";
+import { createWizardAiContext, wipeComponents } from "../service";
+import { Blocks, ChevronDown, Folder, PanelsTopLeft, RotateCcw, Settings, Trash, Wand2, } from "lucide-react";
+import Generate from "./Generate";
+import { usePageCreator } from "./usePageCreator";
+import { getFilteredInputData, processPromptTemplate, } from "../utils/dataAccessor";
+import { useThrottledCallback } from "use-debounce";
+import { WizardBoxConnector } from "../WizardBoxConnector";
+import { ComponentTypeSelector, getComponentTypeSelectorSummary } from "./ComponentTypesSelector";
+function mergeLayout(previous, incoming) {
+    const next = {
+        ...previous,
+        ...incoming,
+        name: incoming.name ?? previous.name ?? "",
+        metaDescription: incoming.metaDescription ?? previous.metaDescription ?? "",
+        metaKeywords: incoming.metaKeywords ?? previous.metaKeywords ?? "",
+        fields: Array.isArray(incoming.fields) ? incoming.fields : previous.fields ?? [],
+        components: Array.isArray(incoming.components)
+            ? incoming.components
+            : previous.components ?? [],
+    };
+    if (incoming?.message)
+        next.message = incoming.message;
+    return next;
+}
+export function ContentStep({ wizard, step, parentItem, pageModel, setPageModel, data, setData, internalState, setInternalState, setStepCompleted, }) {
+    const [pageLoaded, setPageLoaded] = useState(false);
+    const pageLoadedRef = useRef(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [availableComponentTypes, setAvailableComponentTypes] = useState([]);
+    const editContext = useEditContext();
+    const editContextRef = useEditContextRef();
+    const [abortController, setAbortController] = useState();
+    const [message, setMessage] = useState();
+    const [isCreatingComponents, setIsCreatingComponents] = useState(false);
+    const [pageItem, setPageItem] = useState();
+    const [showDataObject, setShowDataObject] = useState(false);
+    // New state for name and language functionality
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [language, setLanguage] = useState(data.language || parentItem?.language || "en");
+    const [fullParentItem, setFullParentItem] = useState();
+    const [nameValidation, setNameValidation] = useState({ isValid: false });
+    // Add target folder selection state
+    const [targetFolder, setTargetFolder] = useState(parentItem || null);
+    const [isSelectingFolder, setIsSelectingFolder] = useState(false);
+    const [folderSelectionResult, setFolderSelectionResult] = useState(null);
+    const [showFolderTree, setShowFolderTree] = useState(false);
+    const hasRunInitialGenerationRef = useRef(false);
+    const modifiedFieldsContext = useFieldsEditContext();
+    const { validateItemName } = useItemNameValidation();
+    if (!parentItem)
+        return "No parent item";
+    // Ensure a non-null page model locally and synchronize with upstream when provided
+    const defaultPageModel = {
+        components: [],
+        name: "",
+        metaDescription: "",
+        metaKeywords: "",
+        fields: [],
+    };
+    const [model, setModel] = useState(() => (pageModel ? { ...defaultPageModel, ...pageModel } : defaultPageModel));
+    useEffect(() => {
+        if (pageModel) {
+            setModel((prev) => ({ ...prev, ...pageModel }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pageModel]);
+    const updateModel = useCallback((value) => {
+        setModel((prev) => {
+            const next = typeof value === "function" ? value(prev) : value;
+            setPageModel?.(next);
+            return next;
+        });
+    }, [setPageModel]);
+    const pageCreator = usePageCreator(pageItem, wizard, updateModel);
+    // Add target folder selection function
+    const selectTargetItem = useCallback(async () => {
+        if (!editContext || !step.fields.targetItemPrompt)
+            return;
+        setIsSelectingFolder(true);
+        try {
+            const abortController = new AbortController();
+            const prompt = step.fields.targetItemPrompt;
+            // Process template expressions in the folder selection prompt
+            const templateResult = processPromptTemplate(prompt, data);
+            if (templateResult.error) {
+                console.error("Template processing error in target item prompt:", templateResult.error);
+                setMessage(`Template Error: ${templateResult.error}`);
+                setIsSelectingFolder(false);
+                return;
+            }
+            const processedPrompt = templateResult.value;
+            const promptContent = `${processedPrompt?.trim()} 
+				You can use get-children to explore existing items and create-item to create new items if needed.
+				Reply with a json object of type { id: string; path: string; } containing the ID and path of the target item.
+				The language of the content is ${language}.
+				Current parent item: ${fullParentItem?.path || parentItem?.id}
+				`;
+            console.log("PROMPT (selectTargetItem):", promptContent);
+            const result = await executePromptWithJsonResult([
+                {
+                    content: promptContent,
+                    name: "system",
+                    role: "system",
+                    id: crypto.randomUUID(),
+                },
+            ], { editContext, createAiContext: createWizardAiContext }, {
+                allowedFunctions: ["get-children", "create-item"],
+                model: step.fields.aiModel || undefined,
+            }, { signal: abortController.signal }, (response) => {
+                try {
+                    if (response.id && response.path) {
+                        setFolderSelectionResult(response);
+                        // Update target folder with the selected folder
+                        setTargetFolder({
+                            id: response.id,
+                            language: language,
+                        });
+                    }
+                }
+                catch (parseError) { }
+            });
+            if (result && result.id && result.path) {
+                setFolderSelectionResult(result);
+                // Update target folder with the selected folder
+                setTargetFolder({
+                    id: result.id,
+                    language: language,
+                });
+            }
+        }
+        catch (error) {
+            console.error("Error selecting target folder", error);
+        }
+        finally {
+            setIsSelectingFolder(false);
+        }
+    }, [
+        editContext,
+        step.fields.selectTargetFolderPrompt,
+        language,
+        parentItem,
+        data,
+    ]);
+    const handleFolderSelection = useCallback(async (folderId) => {
+        if (!editContext)
+            return;
+        try {
+            const folderItem = await editContext.itemsRepository.getItem({
+                id: folderId,
+                language: language,
+                version: 0,
+            });
+            if (folderItem) {
+                setTargetFolder({
+                    id: folderId,
+                    language: language,
+                });
+                setFolderSelectionResult({
+                    id: folderId,
+                    path: folderItem.path,
+                });
+                setFullParentItem(folderItem);
+                setShowFolderTree(false);
+            }
+        }
+        catch (error) {
+            console.error("Error loading selected folder:", error);
+        }
+    }, [editContext, language]);
+    const clearFolderSelection = useCallback(() => {
+        setTargetFolder(parentItem);
+        setFolderSelectionResult(null);
+        setFullParentItem(undefined);
+        setShowFolderTree(false);
+    }, [parentItem]);
+    const generatePageName = useCallback(async () => {
+        if (!editContext)
+            return;
+        const pageNameInstructions = step.fields.pageNamePrompt ||
+            "The item name should be a valid sitecore item name. Spaces are allowed but no special characters or Umlaute.";
+        setIsGenerating(true);
+        try {
+            const abortController = new AbortController();
+            const templateResult = processPromptTemplate(pageNameInstructions, data);
+            if (templateResult.error) {
+                console.error("Template processing error in page name prompt:", templateResult.error);
+                setMessage(`Template Error: ${templateResult.error}`);
+                setIsGenerating(false);
+                return;
+            }
+            const processedInstructions = templateResult.value;
+            const promptContent = `${processedInstructions?.trim()} Reply with a json object of type PageModel = { name: string; };                       
+				  The language of the page is ${language}.
+				  `;
+            console.log("PROMPT (generatePageName):", promptContent);
+            const pageModelResult = await executePromptWithJsonResult([
+                {
+                    content: `${processedInstructions?.trim()} Reply with a json object of type PageModel = { name: string; };                       
+				  The language of the page is ${language}.`,
+                    name: "system",
+                    role: "system",
+                    id: crypto.randomUUID(),
+                },
+                {
+                    content: promptContent,
+                    name: "user",
+                    role: "user",
+                    id: crypto.randomUUID(),
+                },
+            ], { editContext, createAiContext: createWizardAiContext }, { model: step.fields.aiModel || undefined }, { signal: abortController.signal });
+            if (pageModelResult && pageModelResult.name) {
+                setPageModel?.((prev) => ({ ...prev, name: pageModelResult.name }));
+            }
+        }
+        catch (error) {
+            console.error("Error generating page name", error);
+        }
+        finally {
+            setIsGenerating(false);
+        }
+    }, [
+        editContext,
+        language,
+        updateModel,
+        step.fields.aiModel,
+        step.fields.pageNamePrompt,
+        data,
+    ]);
+    const checkPageName = useCallback(async () => {
+        if (!targetFolder) {
+            setNameValidation({ isValid: false, message: "No target folder" });
+            return false;
+        }
+        // Check if page name is valid
+        if (!model.name || model.name.trim().length < 3) {
+            setNameValidation({
+                isValid: false,
+                message: "Page name must be at least 3 characters long",
+            });
+            return false;
+        }
+        // Validate against editor settings (regex, invalid chars, max length)
+        const basicValidation = validateItemName
+            ? validateItemName(model.name.trim())
+            : { isValid: true };
+        if (!basicValidation.isValid) {
+            setNameValidation(basicValidation);
+            return false;
+        }
+        try {
+            // Check if page with same name already exists
+            const children = await getChildren(targetFolder.id, editContext?.sessionId ?? "", [], false, editContext?.contentEditorItem?.language || "en");
+            if (children.find((x) => x.name.toLocaleLowerCase() ===
+                model.name.trim().toLocaleLowerCase())) {
+                setNameValidation({
+                    isValid: false,
+                    message: "A page with this name already exists",
+                });
+                return false;
+            }
+            setNameValidation({ isValid: true });
+            return true;
+        }
+        catch (error) {
+            setNameValidation({
+                isValid: false,
+                message: "Error checking page name",
+            });
+            return false;
+        }
+    }, [
+        targetFolder,
+        model.name,
+        editContext?.sessionId,
+        editContext?.contentEditorItem?.language,
+    ]);
+    const handleInputChange = (field, value) => {
+        const updatedPageModel = {
+            ...model,
+            [field]: value,
+        };
+        updateModel(updatedPageModel);
+    };
+    const createPageIfNeeded = useCallback(async () => {
+        if (!editContext || !targetFolder || pageItem)
+            return true; // Page already exists
+        try {
+            if (!(await checkPageName())) {
+                console.error("Page name validation failed");
+                return false;
+            }
+            const result = await editContext.operations.createItem({
+                ...getItemDescriptor(targetFolder),
+                language: language || targetFolder.language || "en",
+            }, wizard.templateId, model.name);
+            if (result) {
+                // Ensure the result has the correct language
+                const resultWithLanguage = {
+                    ...result,
+                    language: language || targetFolder.language || "en",
+                    version: 0,
+                };
+                editContext?.loadItem(resultWithLanguage, { addToBrowseHistory: true });
+                const item = await editContext?.itemsRepository.getItem(resultWithLanguage);
+                if (item && setPageItem) {
+                    setPageItem(item);
+                    return true;
+                }
+                else {
+                    console.error("Failed to load newly created item", result);
+                    return false;
+                }
+            }
+            return false;
+        }
+        catch (error) {
+            console.error("Error creating page", error);
+            return false;
+        }
+    }, [
+        editContext,
+        targetFolder,
+        pageItem,
+        checkPageName,
+        wizard.templateId,
+        model.name,
+        setPageItem,
+        language,
+    ]);
+    useEffect(() => {
+        editContext?.setMode("preview");
+        if (!internalState?.layoutInstructions) {
+            setInternalState?.({
+                ...(internalState ?? {}),
+                layoutInstructions: step.fields.instructions,
+            });
+        }
+        // Extract available component types from schema
+        if (wizard.schema) {
+            try {
+                const schema = typeof wizard.schema === "string"
+                    ? JSON.parse(wizard.schema)
+                    : wizard.schema;
+                // Extract component types (updated logic from ComponentTypeSelector)
+                const extractComponentTypes = (items) => {
+                    if (!items)
+                        return [];
+                    let types = [];
+                    if ("placeholders" in items && Array.isArray(items.placeholders)) {
+                        for (const placeholder of items.placeholders) {
+                            if (placeholder.components &&
+                                Array.isArray(placeholder.components)) {
+                                types = [
+                                    ...types,
+                                    ...extractComponentTypes(placeholder.components),
+                                ];
+                            }
+                        }
+                        return types;
+                    }
+                    if (!Array.isArray(items))
+                        return [];
+                    for (const item of items) {
+                        // Add the current component type if it exists
+                        if ("type" in item) {
+                            types.push(item.type);
+                        }
+                        // Process components in placeholders recursively
+                        if ("placeholders" in item && Array.isArray(item.placeholders)) {
+                            for (const placeholder of item.placeholders) {
+                                if (placeholder.components &&
+                                    Array.isArray(placeholder.components)) {
+                                    types = [
+                                        ...types,
+                                        ...extractComponentTypes(placeholder.components),
+                                    ];
+                                }
+                            }
+                        }
+                        // Process components directly (for top-level structure)
+                        if ("components" in item && Array.isArray(item.components)) {
+                            types = [...types, ...extractComponentTypes(item.components)];
+                        }
+                    }
+                    return types;
+                };
+                const componentTypes = extractComponentTypes(schema);
+                const uniqueTypes = Array.from(new Set(componentTypes)).sort();
+                setAvailableComponentTypes(uniqueTypes);
+                // Initialize selected component types if not already set
+                if (!data.selectedComponentTypes ||
+                    !Array.isArray(data.selectedComponentTypes)) {
+                    // Parse preselected components from step if available
+                    let stepPreselectedTypes = [];
+                    if (step.fields["preselectedComponents"]) {
+                        stepPreselectedTypes = step.fields["preselectedComponents"]
+                            .split(/[,\n\r]+/)
+                            .map((type) => type.trim())
+                            .filter((type) => type && uniqueTypes.includes(type));
+                    }
+                    // Set initial selection
+                    const initialSelection = stepPreselectedTypes.length > 0
+                        ? stepPreselectedTypes
+                        : uniqueTypes;
+                    setData({
+                        ...data,
+                        selectedComponentTypes: initialSelection,
+                    });
+                }
+            }
+            catch (error) {
+                console.error("Error extracting component types:", error);
+            }
+        }
+    }, []);
+    // Check page name whenever it changes
+    useEffect(() => {
+        if (model.name && !pageItem) {
+            checkPageName();
+        }
+    }, [model.name, checkPageName]);
+    // Load target folder details
+    useEffect(() => {
+        const loadTargetItem = async () => {
+            if (!targetFolder)
+                return;
+            const item = await editContext?.itemsRepository.getItem(targetFolder);
+            setFullParentItem(item);
+            // Also set fullParentItem for backward compatibility
+            setFullParentItem(item);
+        };
+        loadTargetItem();
+    }, [parentItem, editContext]);
+    // Auto-generate page name and select target folder only once on initial load
+    useEffect(() => {
+        if (!editContext)
+            return;
+        if (hasRunInitialGenerationRef.current)
+            return;
+        hasRunInitialGenerationRef.current = true;
+        const runInitialGeneration = async () => {
+            const promises = [];
+            if (!model.name) {
+                promises.push(generatePageName());
+            }
+            if (step.fields.targetItemPrompt && !folderSelectionResult) {
+                promises.push(selectTargetItem());
+            }
+            if (promises.length > 0) {
+                await Promise.all(promises);
+            }
+        };
+        runInitialGeneration();
+    }, []);
+    const createComponents = async () => {
+        if (!pageLoaded)
+            return;
+        if (model && !isCreatingComponents) {
+            try {
+                setIsCreatingComponents(true);
+                // Update page-level fields first
+                if (model.fields && model.fields.length > 0) {
+                    await pageCreator.updatePageFields(model.fields);
+                }
+                // Then create components
+                if (model.components) {
+                    console.log("Creating components", model.components);
+                    await pageCreator.createComponentsRecursively(model.components, "root");
+                }
+                setInternalState?.((prev) => ({
+                    ...(prev ?? {}),
+                    componentsCreated: true,
+                }));
+            }
+            finally {
+                setIsCreatingComponents(false);
+            }
+        }
+    };
+    useEffect(() => {
+        if (internalState?.componentsCreated &&
+            !isCreatingComponents &&
+            !isLoading) {
+            editContext?.requestRefresh("immediate");
+        }
+    }, [isCreatingComponents, isLoading]);
+    const createComponentsThrottled = useThrottledCallback(createComponents, 300);
+    useEffect(() => {
+        createComponentsThrottled();
+    }, [model]);
+    useEffect(() => {
+        if (editContext &&
+            editContext.activeFieldActions &&
+            !editContext.activeFieldActions.find((x) => x.state === "running")) {
+            console.log("$$$ Refreshing!");
+            editContext.requestRefresh("immediate");
+        }
+    }, [editContext?.activeFieldActions]);
+    useEffect(() => {
+        if (editContext &&
+            editContext.page &&
+            editContext.page.item &&
+            pageItem &&
+            pageItem.id === editContext.page.item.descriptor.id) {
+            if (!pageLoaded) {
+                setTimeout(() => {
+                    setPageLoaded(true);
+                    pageLoadedRef.current = true;
+                }, 1000);
+            }
+        }
+    }, [editContext?.page, pageItem]);
+    const createLayout = async () => {
+        try {
+            if (!editContext)
+                return;
+            setMessage("");
+            setIsLoading(true);
+            setStepCompleted(false);
+            // Create page if it doesn't exist yet
+            let currentPageItem = pageItem;
+            // Wait for pageLoaded to become true before continuing
+            const waitForPageLoaded = async () => {
+                const maxWaitTime = 10000; // 10 seconds max wait
+                const pollInterval = 100; // Check every 100ms
+                let elapsed = 0;
+                while (elapsed < maxWaitTime) {
+                    // Check if page is loaded using the ref which gets updated by the useEffect
+                    if (pageLoadedRef.current) {
+                        return true;
+                    }
+                    await new Promise((resolve) => setTimeout(resolve, pollInterval));
+                    elapsed += pollInterval;
+                }
+                return false;
+            };
+            if (!currentPageItem) {
+                const pageCreated = await createPageIfNeeded();
+                if (!pageCreated) {
+                    setMessage("Failed to create page. Please check the page name and try again.");
+                    setIsLoading(false);
+                    return;
+                }
+                const isPageLoaded = await waitForPageLoaded();
+                if (!isPageLoaded) {
+                    setMessage("Page creation timed out. Please try again.");
+                    setIsLoading(false);
+                    return;
+                }
+                // Update currentPageItem from the loaded page, ensuring it has the correct language
+                if (editContextRef.current?.page?.item) {
+                    const loadedItem = editContextRef.current.page.item;
+                    // Ensure the loaded item matches the selected language
+                    if (language && language !== loadedItem.language) {
+                        // Try to load in the correct language
+                        const itemInLanguage = {
+                            id: loadedItem.descriptor.id,
+                            language: language,
+                            version: 0,
+                        };
+                        editContextRef.current?.loadItem(itemInLanguage, {
+                            addToBrowseHistory: false,
+                        });
+                        await waitForPageLoaded();
+                        const correctedItem = await editContextRef.current?.itemsRepository.getItem(itemInLanguage);
+                        if (correctedItem) {
+                            currentPageItem = correctedItem;
+                            setPageItem(correctedItem);
+                        }
+                        else {
+                            currentPageItem = loadedItem;
+                            setPageItem(loadedItem);
+                        }
+                    }
+                    else {
+                        currentPageItem = loadedItem;
+                        setPageItem(loadedItem);
+                    }
+                }
+            }
+            if (internalState.componentsCreated) {
+                console.log("Wiping components");
+                if (currentPageItem) {
+                    const wipeResult = await wipeComponents(getItemDescriptor(currentPageItem));
+                    if (wipeResult.type !== "success") {
+                        console.error("Failed to wipe components:", wipeResult);
+                        setMessage(wipeResult.summary ||
+                            "Failed to clear existing components. Please try again.");
+                        setIsLoading(false);
+                        return;
+                    }
+                }
+                editContextRef.current?.itemsRepository.clear();
+                modifiedFieldsContext?.clearModifiedFields();
+                modifiedFieldsContext?.clearRecentEdits();
+                setInternalState?.((prev) => ({
+                    ...(prev ?? {}),
+                    componentsCreated: false,
+                }));
+                updateModel((prev) => ({
+                    ...prev,
+                    components: [],
+                    message: "",
+                }));
+                pageLoadedRef.current = false;
+                // Reload the current page item to ensure we stay on the same page
+                if (currentPageItem) {
+                    editContextRef.current?.loadItem(getItemDescriptor(currentPageItem), {
+                        addToBrowseHistory: false,
+                    });
+                }
+                editContextRef.current?.requestRefresh("immediate");
+                await waitForPageLoaded();
+                console.log("Page loaded after wipe");
+            }
+            // 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 = convertPageSchemaToWizardComponents(schema, data.selectedComponentTypes);
+            const localAbortController = new AbortController();
+            setAbortController(localAbortController);
+            // Get the existing page model; TODO make optional
+            const existingPageModel = await convertToAiPageModel(editContextRef.current?.page, editContextRef.current, filteredSchema);
+            console.log("Existing page model: ", existingPageModel);
+            // Filter input data based on "Input Properties" field if specified
+            const inputData = getFilteredInputData(step, data);
+            // Process template expressions in the layout instructions
+            const templateResult = processPromptTemplate(internalState.layoutInstructions || "", data);
+            if (templateResult.error) {
+                console.error("Template processing error in layout instructions:", templateResult.error);
+                setMessage(`Template Error: ${templateResult.error}`);
+                setIsLoading(false);
+                return;
+            }
+            const processedInstructions = templateResult.value;
+            const prompt = [
+                {
+                    content: `${processedInstructions ? processedInstructions?.trim() : ""} Reply with a json object of type PageModel = { fields: Field[]; components: Component[]; message: string; }; 
+            Component = { id: string | undefined, 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.
+              Keep existing components with their ids. Leave id field empty for new components.
+              To generate images write generate: <keywords> into the picture / image field value.
+            ${(existingPageModel && `Existing page model: ${JSON.stringify(existingPageModel)}`) || ""}
+          Fill empty fields of existing components before you insert new components. Page fields: ${JSON.stringify(schema.pageFields.map((f) => {
+                        return {
+                            name: f.name,
+                            type: f.type,
+                        };
+                    }))}
+            Available 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.
+           
+            The language of the page is ${language || editContextRef.current.page.item.language}.
+            `,
+                    name: "system",
+                    role: "system",
+                    id: crypto.randomUUID(), // Add required id property
+                },
+            ];
+            console.log("PROMPT: ", prompt, filteredSchema, existingPageModel);
+            const result = await executePromptWithJsonResult(prompt, {
+                editContext: editContextRef.current,
+                createAiContext: createWizardAiContext,
+            }, {
+                allowedFunctions: [],
+                model: step.fields.aiModel || undefined,
+                endpoint: "/parhelia/page-wizard/prompt",
+            }, { signal: localAbortController.signal }, (response) => {
+                try {
+                    setPageModel?.((prev) => mergeLayout(prev, response));
+                    setMessage(response.message);
+                }
+                catch (parseError) { }
+            });
+            console.log("RESULT LAYOUT: ", result);
+            // Before setting pageModel (which triggers component creation), ensure we're on the correct language version
+            if (language && editContextRef.current?.page?.item) {
+                const currentPageLanguage = editContextRef.current.page.item.language;
+                if (language !== currentPageLanguage) {
+                    console.log(`Language mismatch detected. Current: ${currentPageLanguage}, Selected: ${language}. Switching...`);
+                    try {
+                        // Get available language versions for the item
+                        const languagesData = await getLanguagesAndVersions(getItemDescriptor(editContextRef.current.page.item));
+                        if (languagesData?.data) {
+                            const targetLanguageInfo = languagesData.data.languages.find((lang) => lang.languageCode === language);
+                            // If the language version doesn't exist, create it
+                            if (!targetLanguageInfo || targetLanguageInfo.versions === 0) {
+                                console.log(`Creating new language version for ${language}...`);
+                                await editContextRef.current?.operations.createVersion({
+                                    id: editContextRef.current.page.item.id,
+                                    language: language,
+                                    version: 0,
+                                });
+                            }
+                            // Load the item in the selected language
+                            const languageVersionItem = {
+                                id: editContextRef.current.page.item.id,
+                                language: language,
+                                version: 0,
+                            };
+                            editContextRef.current?.loadItem(languageVersionItem, {
+                                addToBrowseHistory: false,
+                            });
+                            // Wait for the page to load in the new language
+                            const isPageLoaded = await waitForPageLoaded();
+                            if (!isPageLoaded) {
+                                setMessage("Failed to load page in selected language.");
+                                setIsLoading(false);
+                                return;
+                            }
+                            // Update pageItem to the new language version
+                            const updatedItem = await editContextRef.current?.itemsRepository.getItem(languageVersionItem);
+                            if (updatedItem) {
+                                setPageItem(updatedItem);
+                            }
+                            console.log(`Successfully switched to language version: ${language}`);
+                        }
+                    }
+                    catch (error) {
+                        console.error("Error switching language version:", error);
+                        setMessage(`Failed to switch to language ${language}. Please try again.`);
+                        setIsLoading(false);
+                        return;
+                    }
+                }
+            }
+            setPageModel?.((prev) => mergeLayout(prev, result));
+            setStepCompleted(true);
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    // Custom instructions panel
+    const customInstructionsPanel = () => {
+        return (_jsx(Textarea, { value: internalState?.layoutInstructions ?? "", onChange: (e) => setInternalState?.((prev) => ({
+                ...(prev ?? {}),
+                layoutInstructions: e.target.value,
+            })), placeholder: "Example: Make it modern and minimalist. Focus on images. Include a hero section at the top.", className: "h-48 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none" }));
+    };
+    return (_jsxs("div", { className: "flex h-full flex-col md:flex-row", children: [_jsxs("div", { className: "flex flex-col items-stretch overflow-y-auto md:h-full", children: [_jsx(Card, { title: "Page Setup", icon: _jsx(Settings, {}), description: "Configure the page name, target location and language for your new page", collapsible: "yes", summary: _jsxs("div", { className: "flex flex-col gap-2 text-xs break-all text-gray-500", children: [_jsxs("div", { children: ["Folder: ", folderSelectionResult?.path || fullParentItem?.path] }), _jsxs("div", { children: ["Language: ", language] }), _jsxs("div", { children: ["Name: ", model.name || "Not set"] })] }), className: "w-full md:w-96", children: _jsx("div", { className: "flex flex-col items-stretch", children: _jsx("div", { className: "relative flex-1", children: isGenerating || isSelectingFolder ? (_jsx("div", { className: "mt-4 flex h-full items-center justify-center pb-4", children: _jsx(Generate, { title: isGenerating && isSelectingFolder
+                                            ? "Generating page name and selecting folder..."
+                                            : isGenerating
+                                                ? "Generating page name..."
+                                                : "Selecting folder...", size: "medium" }) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-4", children: [_jsx("label", { htmlFor: "pageName", className: "mb-1 block text-xs font-medium", children: "Page Name" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: "pageName", type: "text", disabled: !!pageItem, className: `bg-gray-5 w-full rounded border md:text-xs ${!nameValidation.isValid
+                                                                ? "border-red-500"
+                                                                : nameValidation.isValid && model.name
+                                                                    ? "border-green-500"
+                                                                    : ""}`, value: pageModel?.name, onChange: (e) => handleInputChange("name", e.target.value), placeholder: "Enter page name" }), !pageItem && (_jsx(Button, { size: "sm", onClick: () => generatePageName(), disabled: isGenerating, title: "Recreate name", children: _jsx(RotateCcw, { className: "h-4 w-4", strokeWidth: 1 }) }))] }), nameValidation.message && !nameValidation.isValid && (_jsx("div", { className: "mt-1 text-xs text-red-600", children: nameValidation.message })), nameValidation.isValid && pageModel?.name && (_jsx("div", { className: "mt-1 text-xs text-green-600", children: "\u2713 Page name is available" }))] }), _jsxs("div", { className: "mb-4", children: [_jsx("div", { className: "mb-1 text-xs font-medium", children: "Target Folder" }), isSelectingFolder ? (_jsxs("div", { className: "mb-4 flex items-center gap-2 text-xs text-gray-600", children: [_jsx(Generate, { title: "Selecting folder...", size: "medium" }), "Selecting folder..."] })) : (_jsxs("div", { className: "mb-4", children: [_jsx("div", { className: "relative", children: _jsxs(Popover, { open: showFolderTree, onOpenChange: setShowFolderTree, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: cn("focus-shadow bg-gray-5 flex cursor-pointer justify-between border p-1.5 text-xs hover:bg-gray-100"), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Folder, { className: "h-4 w-4", strokeWidth: 1 }), _jsx("span", { className: "break-all", children: folderSelectionResult?.path ||
+                                                                                                fullParentItem?.path ||
+                                                                                                "Loading..." })] }), _jsx(ChevronDown, { strokeWidth: 1, className: `h-4 w-4 transition-transform duration-200 ${showFolderTree ? "rotate-180" : "rotate-0"}` })] }) }), _jsxs(PopoverContent, { className: "w-96 p-0", align: "start", side: "bottom", children: [_jsx("div", { className: "border-b border-gray-200 bg-white p-2", children: _jsx(ItemSearch, { rootItemIds: [
+                                                                                        normalizeGuid(parentItem?.id ||
+                                                                                            "11111111-1111-1111-1111-111111111111"),
+                                                                                    ], autoFocus: true, itemSelected: (item) => {
+                                                                                        handleFolderSelection(item.id);
+                                                                                    } }) }), folderSelectionResult && (_jsx("button", { className: "w-full cursor-pointer rounded border-b bg-gray-50 p-1 px-4 text-left text-xs hover:bg-gray-100", onClick: clearFolderSelection, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Trash, { className: "h-4 w-4", strokeWidth: 1 }), " ", "Reset to original folder"] }) })), _jsx("div", { className: "relative h-64 border-x border-b", children: _jsx(ScrollingContentTree, { selectedItemId: targetFolder?.id, rootItemIds: [
+                                                                                        parentItem?.id ||
+                                                                                            "11111111-1111-1111-1111-111111111111",
+                                                                                    ], expandedItemId: targetFolder?.id, scrollToSelected: true, onSelectionChange: (nodes) => {
+                                                                                        if (nodes[0]?.id) {
+                                                                                            handleFolderSelection(nodes[0].id);
+                                                                                        }
+                                                                                    } }, `folder-tree-${showFolderTree ? "open" : "closed"}-${targetFolder?.id || "none"}`) })] })] }) }), step.fields.targetItemPrompt && parentItem && (_jsx("div", { className: "mt-1 text-xs text-green-600", children: "\u2713 Folder selected by AI" }))] }))] }), _jsxs("div", { className: "relative mb-4", children: [_jsx("label", { htmlFor: "language", className: "mb-1 block text-xs font-medium", children: "Language" }), _jsx("div", { className: "w-fit", children: _jsx(LanguageSelector, { selectedLanguage: language, disabled: isGenerating, onLanguageSelected: (language) => {
+                                                            const languageCode = language.languageCode;
+                                                            setLanguage(languageCode);
+                                                            setData({
+                                                                ...data,
+                                                                language: languageCode,
+                                                            });
+                                                        }, showAllLanguages: true }) })] })] })) }) }) }), _jsx(WizardBoxConnector, { direction: "vertical" }), _jsx(Card, { title: "Content modules", icon: _jsx(Blocks, {}), description: "Select the component types the AI can choose from", className: "w-full md:w-96", collapsible: "yes", defaultCollapsed: "yes", summary: _jsx("div", { className: "text-xs text-gray-500", children: getComponentTypeSelectorSummary(data.selectedComponentTypes, availableComponentTypes) }), children: _jsx(ComponentTypeSelector, { selectedComponentTypes: data.selectedComponentTypes, setSelectedComponentTypes: (selectedTypes) => {
+                                setData({
+                                    ...data,
+                                    selectedComponentTypes: selectedTypes,
+                                });
+                            }, schema: wizard.schema, data: data, setData: setData, step: step, availableComponentTypes: availableComponentTypes }) }), _jsx(WizardBoxConnector, { direction: "vertical" }), _jsxs(Card, { title: "Generate content", icon: _jsx(Wand2, {}), collapsible: "yes", defaultCollapsed: "mobileOnly", description: "Refine instructions and generate content", className: "w-full md:w-96", footer: _jsxs("div", { children: [_jsxs("div", { className: "flex w-full gap-2", children: [_jsx(ActionButton, { onClick: createLayout, disabled: isLoading ||
+                                                isCreatingComponents ||
+                                                isSelectingFolder ||
+                                                !data.selectedComponentTypes ||
+                                                data.selectedComponentTypes.length === 0 ||
+                                                (!pageItem &&
+                                                    (!pageModel?.name ||
+                                                        pageModel?.name.trim().length < 3 ||
+                                                        !nameValidation.isValid)), isLoading: isLoading ||
+                                                isCreatingComponents ||
+                                                isSelectingFolder ||
+                                                !!editContext?.activeFieldActions.find((action) => action.state === "running"), loadingText: isSelectingFolder
+                                                ? "Selecting folder..."
+                                                : isGenerating
+                                                    ? "Generating..."
+                                                    : "Working", className: "w-full flex-1", children: !pageItem ? "Create page" : "Delete & Regenerate content" }), isLoading && (_jsx(ActionButton, { isLoading: false, onClick: () => abortController?.abort("User aborted"), children: "Abort" }))] }), message && _jsx("div", { className: "mt-2 text-xs", children: message })] }), children: [_jsx("div", { children: customInstructionsPanel() }), _jsxs("div", { className: "mt-2", children: [_jsxs("button", { className: "flex items-center text-xs text-blue-600 hover:underline", onClick: () => setShowDataObject(!showDataObject), children: [_jsx(ChevronDown, { strokeWidth: 1, className: `mr-1 h-4 w-4 transition-transform duration-200 ${showDataObject ? "rotate-180" : "rotate-0"}` }), showDataObject
+                                                ? "Hide data available to instructions"
+                                                : "Show data available to instructions"] }), _jsxs("div", { className: "mt-2 text-xs text-gray-600", children: [_jsx("div", { className: "font-medium", children: "Referencing data in instructions" }), _jsx("div", { children: "Use curly braces to inject values from the data object:" }), _jsxs("div", { className: "mt-1 grid gap-1", children: [_jsxs("div", { children: [_jsx("code", { children: "{title}" }), " inserts ", _jsx("code", { children: "data.title" })] }), _jsxs("div", { children: [_jsx("code", { children: "{data.user.name}" }), " inserts a nested property"] }), _jsxs("div", { children: [_jsx("code", { children: "{items.filter(x => x.active).length}" }), " supports JavaScript expressions"] }), _jsxs("div", { children: [_jsx("code", { children: "{data}" }), " inserts the entire data object as JSON"] })] }), _jsx("div", { className: "mt-1", children: "Arrays/objects are inserted as JSON text." })] }), showDataObject && (_jsx("div", { className: "mt-2 rounded border border-gray-200 bg-gray-50 p-2", children: _jsx("pre", { className: "max-h-64 overflow-auto text-xs break-words whitespace-pre-wrap", children: JSON.stringify(data, null, 2) }) }))] })] })] }), pageItem && (_jsxs(_Fragment, { children: [_jsx(WizardBoxConnector, {}), _jsx(Card, { title: "Page preview", icon: _jsx(PanelsTopLeft, {}), description: "After finalizing the page, you can edit, further enhance the content and share the page with your team for collaboration.", noPadding: true, className: "flex-1", showFullscreenButton: true, headerActions: _jsx(EditControls, { hideSuggestions: true }), children: _jsx("div", { className: cn("min-h-[300px] border-t border-gray-200", pageLoaded ? "h-full" : "h-0"), children: _jsx("div", { className: "bg-gray-5 h-full", children: _jsx(PageViewer, { name: "single", compareView: false, showFormEditor: editContext?.mode === "edit", followEditsDefault: true, pageViewContext: editContext.pageView, noMargins: true }) }) }) })] }))] }));
+}
+//# sourceMappingURL=ContentStep.js.map