@alpaca-editor/core 1.0.0

package/src/page-wizard/steps/CreatePage.tsx

@@ -0,0 +1,285 @@
+import { useEffect, useState } from "react";
+import { ActionButton } from "../../components/ActionButton";
+import { useDebouncedCallback } from "use-debounce";
+import { FullItem, ItemDescriptor } from "../../editor/pageModel";
+import { getChildren } from "../../editor/services/contentService";
+import { Wizard, WizardData, WizardPageModel, WizardStep } from "../PageWizard";
+import { executePrompt } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { useEditContext } from "../../editor/client/editContext";
+import { LanguageSelector } from "../../editor/menubar/LanguageSelector";
+
+export function CreatePage({
+  wizard,
+  parentItem,
+  setPageItem,
+  pageItem,
+  pageModel,
+  setPageModel,
+  step,
+  data,
+}: {
+  wizard: Wizard;
+  parentItem: ItemDescriptor;
+  setPageItem: (item: FullItem) => void;
+  pageItem?: FullItem;
+  pageModel: WizardPageModel;
+  setPageModel: (model: WizardPageModel) => void;
+  step: WizardStep;
+  data: WizardData;
+}) {
+  const [validationMessage, setValidationMessage] = useState<string>();
+  const [isBuilding, setIsBuilding] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [language, setLanguage] = useState<string>(parentItem.language || "en");
+  const [previousLanguage, setPreviousLanguage] = useState<string>(language);
+  const [fullParentItem, setFullParentItem] = useState<FullItem>();
+  const editContext = useEditContext();
+
+  useEffect(() => {
+    if (!editContext) return;
+
+    const generateNameAndMetaDescription = async () => {
+      const metaInstructions =
+        step["Instructions for generating item name and meta fields"];
+
+      setIsGenerating(true);
+
+      try {
+        const abortController = new AbortController();
+
+        const result = await executePrompt(
+          [
+            {
+              content: `${metaInstructions?.trim()} Reply with a json object of type PageModel = { name: string; metaDescription: string; metaKeywords: string; };               
+              The item name should be a valid sitecore item name. Spaces are allowed but no special characters or Umlaute.
+              The language of the page is ${language}.
+              Input data: ${JSON.stringify(data)}`,
+              name: "system",
+              role: "system",
+            },
+          ],
+          editContext,
+          createWizardAiContext,
+          [""],
+          true,
+          { signal: abortController.signal },
+          "o3-mini-low",
+          (response) => {
+            try {
+              const newLayout = JSON.parse(response.content) as WizardPageModel;
+
+              setPageModel({
+                ...pageModel,
+                name: newLayout.name,
+                metaDescription: newLayout.metaDescription,
+                metaKeywords: newLayout.metaKeywords,
+              });
+            } catch (parseError: unknown) {}
+          }
+        );
+
+        const pageModel = JSON.parse(result.content) as WizardPageModel;
+        setPageModel({
+          ...pageModel,
+          name: pageModel.name,
+          metaDescription: pageModel.metaDescription,
+          metaKeywords: pageModel.metaKeywords,
+        });
+      } catch (error) {
+        console.error("Error generating name and meta description", error);
+      } finally {
+        setIsGenerating(false);
+      }
+    };
+
+    if (!pageModel.name || language !== previousLanguage) {
+      generateNameAndMetaDescription();
+      setPreviousLanguage(language);
+    }
+  }, [language, pageModel.name, previousLanguage, data, step, editContext]);
+
+  useEffect(() => {
+    const loadParentItem = async () => {
+      if (!parentItem) return;
+      const item = await editContext?.itemsRepository.getItem(parentItem);
+      setFullParentItem(item);
+    };
+    loadParentItem();
+  }, [parentItem]);
+
+  const checkName = async () => {
+    if (!parentItem) return;
+    let valid: boolean =
+      !!wizard.templateId && pageModel.name.trim().length >= 3;
+    if (valid) {
+      const children = await getChildren(
+        parentItem.id,
+        editContext?.sessionId ?? "",
+        [],
+        false,
+        editContext?.contentEditorItem?.language || "en"
+      );
+      if (
+        children.find(
+          (x) =>
+            x.name.toLocaleLowerCase() ===
+            pageModel.name.trim().toLocaleLowerCase()
+        )
+      ) {
+        valid = false;
+        setValidationMessage("A page with this name already exists.");
+      }
+    } else {
+      if (pageModel.name.trim().length > 0 && pageModel.name.trim().length < 3)
+        setValidationMessage("Name is too short.");
+      else setValidationMessage(undefined);
+    }
+
+    if (valid) setValidationMessage(undefined);
+    return valid;
+  };
+
+  const checkNameValidDebounced = useDebouncedCallback(
+    async () => checkName(),
+    500
+  );
+
+  useEffect(() => {
+    checkNameValidDebounced();
+  }, [pageModel.name]);
+
+  const createPage = () => {
+    setTimeout(async () => {
+      if (!editContext || !parentItem) return;
+      try {
+        if (!(await checkName())) return;
+        setIsBuilding(true);
+        const result = await editContext.operations.createItem(
+          { ...parentItem, language },
+          wizard.templateId,
+          pageModel.name
+        );
+        if (result) {
+          editContext?.loadItem(result, { addToBrowseHistory: true });
+          const item = await editContext?.itemsRepository.getItem(result);
+          if (item) setPageItem(item);
+          else console.error("Failed to load newly created item", result);
+
+          console.log("Page created", result, "Page model", pageModel);
+        }
+      } catch (error) {
+        console.error("Error creating page", error);
+      } finally {
+        setIsBuilding(false);
+      }
+    }, 1);
+  };
+
+  const handleInputChange = (field: keyof typeof pageModel, value: string) => {
+    const updatedPageModel = {
+      ...pageModel,
+      [field]: value,
+    };
+
+    setPageModel(updatedPageModel);
+  };
+
+  return (
+    <div className="pr-6" style={{ viewTransitionName: "page-properties" }}>
+      <div className="mb-4">
+        <div className="text-sm font-medium mb-1">Target Parent Item</div>
+        <div className="mb-4 text-xs break-after-all">
+          {fullParentItem?.path}
+        </div>
+      </div>
+      <div className="mb-4 relative">
+        <label
+          htmlFor="language"
+          className="block text-sm font-medium mb-1"
+        >
+          Language
+        </label>
+        <div className="w-fit">
+          <LanguageSelector
+            selectedLanguage={language}
+            darkMode={true}
+            disabled={isBuilding || isGenerating}
+            onLanguageSelected={(language) =>
+              setLanguage(language.languageCode)
+            }
+            showAllLanguages={true}
+          />
+        </div>
+      </div>
+      <div className="mb-4">
+        <label
+          htmlFor="pageName"
+          className="block text-sm font-medium mb-1"
+        >
+          Page Name
+        </label>
+        <input
+          id="pageName"
+          type="text"
+          disabled={!!pageItem || isBuilding || isGenerating}
+          className="w-full p-2 border rounded text-sm"
+          value={pageModel.name}
+          onChange={(e) => handleInputChange("name", e.target.value)}
+          placeholder="Enter page name"
+        />
+        {validationMessage && (
+          <div className="mt-2 text-sm text-red-500">
+            {validationMessage}
+          </div>
+        )}
+      </div>
+
+      <div className="mb-4">
+        <label
+          htmlFor="metaDescription"
+          className="block text-sm font-medium mb-1"
+        >
+          Meta Description
+        </label>
+        <textarea
+          id="metaDescription"
+          disabled={!!pageItem || isBuilding || isGenerating}
+          className="w-full p-2 border rounded min-h-[100px]  text-sm"
+          value={pageModel.metaDescription}
+          onChange={(e) => handleInputChange("metaDescription", e.target.value)}
+          placeholder="Enter meta description"
+        />
+      </div>
+      <div className="mb-4">
+        <label
+          htmlFor="metaKeywords"
+          className="block text-sm font-medium mb-1"
+        >
+          Meta Keywords
+        </label>
+        <textarea
+          id="metaKeywords"
+          disabled={!!pageItem || isBuilding || isGenerating}
+          className="w-full p-2 border rounded min-h-[100px]  text-sm"
+          value={pageModel.metaKeywords}
+          onChange={(e) => handleInputChange("metaKeywords", e.target.value)}
+          placeholder="Enter meta keywords"
+        />
+      </div>
+      {!pageItem && (
+        <ActionButton
+          disabled={isBuilding || isGenerating || !!validationMessage}
+          className="flex-1"
+          onClick={() => {
+            createPage();
+          }}
+          isLoading={isBuilding || isGenerating}
+          loadingText={isGenerating ? "Generating..." : "Create Page"}
+        >
+          Create Page
+        </ActionButton>
+      )}
+    </div>
+  );
+}

package/src/page-wizard/steps/CreatePageAndLayoutStep.tsx

@@ -0,0 +1,384 @@
+import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
+import { StepComponentProps } from "../../config/types";
+
+import { CreatePage } from "./CreatePage";
+import { useEffect, useState } from "react";
+import { PageViewer } from "../../editor/page-viewer/PageViewer";
+import { useEditContext } from "../../editor/client/editContext";
+import { classNames } from "primereact/utils";
+import { ComponentTypeSelector } from "./ComponentTypesSelector";
+import { ActionButton } from "../../components/ActionButton";
+import { convertPageSchemaToWizardComponents } from "./schema";
+import { WizardPageModel } from "../PageWizard";
+import { createWizardAiContext, wipeComponents } from "../service";
+
+import { executePrompt } from "../../editor/services/aiService";
+import { usePageCreator } from "./usePageCreator";
+import { useThrottledCallback } from "use-debounce";
+
+export function CreatePageAndLayoutStep({
+  wizard,
+  step,
+  parentItem,
+  pageModel,
+  setPageModel,
+  data,
+  setData,
+  internalState,
+  setInternalState,
+  setStepCompleted,
+}: StepComponentProps) {
+  const [pageLoaded, setPageLoaded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const editContext = useEditContext();
+  const [abortController, setAbortController] = useState<AbortController>();
+  const [message, setMessage] = useState<string>();
+  const [isCreatingComponents, setIsCreatingComponents] = useState(false);
+
+  const pageItem = internalState.pageItem;
+
+  const pageCreator = usePageCreator(pageItem, wizard, setPageModel);
+
+  if (!parentItem) return "No parent item";
+
+  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: any) => ({
+          ...prev,
+          componentsCreated: true,
+        }));
+      } finally {
+        setIsCreatingComponents(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (
+      internalState.componentsCreated &&
+      !isCreatingComponents &&
+      !isLoading
+    ) {
+      editContext?.requestRefresh("immediate");
+    }
+  }, [isCreatingComponents, isLoading]);
+
+  const createComponentsThrottled = useThrottledCallback(createComponents, 300);
+
+  useEffect(() => {
+    createComponentsThrottled();
+  }, [pageModel]);
+
+  useEffect(() => {
+    if (
+      editContext &&
+      editContext.page &&
+      editContext.page.item &&
+      pageItem &&
+      pageItem.id === editContext.page.item.descriptor.id
+    )
+      setPageLoaded(true);
+  }, [editContext?.page, pageItem]);
+
+  if (!pageItem) {
+    return (
+      <CreatePage
+        wizard={wizard}
+        parentItem={parentItem}
+        setPageItem={(pageItem) =>
+          setInternalState((prev: any) => ({ ...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 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 = convertPageSchemaToWizardComponents(
+        schema,
+        data.selectedComponentTypes
+      );
+
+      const localAbortController = new AbortController();
+      setAbortController(localAbortController);
+
+      const result = await 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,
+        createWizardAiContext,
+        [""],
+        true,
+        { signal: localAbortController.signal },
+        step.aiModel || "o3-mini-low",
+        (response) => {
+          try {
+            const newLayout = JSON.parse(response.content) as WizardPageModel;
+
+            if (newLayout) {
+              setPageModel((prev) => mergeLayout(prev, newLayout));
+            }
+
+            setMessage(newLayout.message);
+          } catch (parseError: unknown) {}
+        }
+      );
+
+      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 (
+      <div className="mb-4">
+        <h3 className="text-sm font-semibold">Instructions</h3>
+        <div className="mb-3 text-xs text-gray-500">
+          Provide guidance for the AI when generating your layout
+        </div>
+        <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"
+        />
+      </div>
+    );
+  };
+
+  const panels: SplitterPanel[] = [
+    {
+      name: "settings",
+      content: (
+        <div className="pr-6">
+          <div className="text-sm font-medium">Page item</div>
+          <div className="text-xs text-gray-500">{pageItem.path}</div>
+          <ComponentTypeSelector
+            selectedComponentTypes={data.selectedComponentTypes}
+            setSelectedComponentTypes={(selectedTypes) => {
+              setData({
+                ...data,
+                selectedComponentTypes: selectedTypes,
+              });
+            }}
+            schema={wizard.schema}
+            data={data}
+            setData={setData}
+            step={step}
+          />
+          {customInstructionsPanel()}
+          <div className="flex gap-2">
+            <ActionButton
+              onClick={createLayout}
+              disabled={
+                isLoading ||
+                !data.selectedComponentTypes ||
+                data.selectedComponentTypes.length === 0
+              }
+              isLoading={isLoading}
+              loadingText="Working"
+              className="flex-1"
+            >
+              {internalState.componentsCreated
+                ? "Delete and Regenerate Layout"
+                : "Generate Layout"}
+            </ActionButton>
+
+            {isLoading && (
+              <ActionButton
+                isLoading={false}
+                onClick={() => abortController?.abort("User aborted")}
+              >
+                Abort
+              </ActionButton>
+            )}
+          </div>
+          {message && <div className="mt-2 text-xs">{message}</div>}
+        </div>
+      ),
+      defaultSize: 400,
+    },
+    {
+      name: "layout",
+      content: (
+        <div
+          className={classNames("px-6", pageLoaded ? "h-full" : "h-0")}
+        >
+          <PageViewer
+            name="single"
+            mode={editContext?.previewMode ? "view" : "edit"}
+            showFormEditor={false}
+            followEditsDefault={true}
+            pageViewContext={editContext!.pageView}
+          />
+        </div>
+      ),
+      defaultSize: "auto",
+    },
+  ];
+
+  return <Splitter panels={panels}></Splitter>;
+}
+
+/**
+ * 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: WizardPageModel | null,
+  newLayout: WizardPageModel
+): WizardPageModel => {
+  if (!prev) return newLayout;
+
+  // Merge top-level properties
+  const result: WizardPageModel = {
+    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: any[],
+    newComponents: any[]
+  ): any[] => {
+    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/src/page-wizard/steps/EditButton.tsx

@@ -0,0 +1,34 @@
+import { WizardField } from "../PageWizard";
+
+interface EditButtonProps {
+  field: WizardField;
+  onEdit: () => void;
+  className?: string;
+}
+
+export function EditButton({ field, onEdit, className = "" }: EditButtonProps) {
+  return (
+    <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"}`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-4 w-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <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"
+        />
+      </svg>
+    </button>
+  );
+}