@alpaca-editor/core 1.0.3902 → 1.0.3904

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

@@ -0,0 +1,648 @@
+import { StepComponentProps } from "../../config/types";
+
+import { useEffect, useState, useCallback, useRef } from "react";
+import { getChildren } from "../../editor/services/contentService";
+import { getItemDescriptor } from "../../editor/utils";
+import { PageViewer } from "../../editor/page-viewer/PageViewer";
+import {
+  useEditContext,
+  useEditContextRef,
+  useModifiedFieldsContext,
+} from "../../editor/client/editContext";
+import { ExecutionResult } from "../../editor/services/serviceHelper";
+
+import {
+  ComponentTypeSelector,
+  getComponentTypeSelectorSummary,
+} 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";
+import { InputTextarea } from "primereact/inputtextarea";
+
+import { convertToAiPageModel } from "../../editor/ai/aiPageModel";
+import { WizardBox } from "../WizardBox";
+import { Wand2, PanelsTopLeft } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { WizardBoxConnector } from "../WizardBoxConnector";
+import { ItemDescriptor } from "@/editor/pageModel";
+
+export function ContentStep({
+  wizard,
+  step,
+  parentItem,
+  pageModel,
+  setPageModel,
+  data,
+  setData,
+  internalState,
+  setInternalState,
+  setStepCompleted,
+}: StepComponentProps) {
+  const [pageLoaded, setPageLoaded] = useState(false);
+  const pageLoadedRef = useRef(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [availableComponentTypes, setAvailableComponentTypes] = useState<
+    string[]
+  >([]);
+
+  const editContext = useEditContext();
+  const editContextRef = useEditContextRef();
+  const [abortController, setAbortController] = useState<AbortController>();
+  const [message, setMessage] = useState<string>();
+  const [isCreatingComponents, setIsCreatingComponents] = useState(false);
+  const [pageItem, setPageItem] = useState<ItemDescriptor>();
+
+  const modifiedFieldsContext = useModifiedFieldsContext();
+
+  const pageCreator = usePageCreator(pageItem, wizard, setPageModel);
+
+  if (!parentItem) return "No parent item";
+
+  const checkPageName = useCallback(async () => {
+    if (!parentItem) return false;
+
+    // Check if page name is valid
+    if (!pageModel.name || pageModel.name.trim().length < 3) {
+      return false;
+    }
+
+    // Check if page with same name already exists
+    const children = await getChildren(
+      parentItem.id,
+      editContext?.sessionId ?? "",
+      [],
+      false,
+      editContext?.contentEditorItem?.language || "en",
+    );
+
+    if (
+      children.find(
+        (x) =>
+          x.name.toLocaleLowerCase() ===
+          pageModel.name.trim().toLocaleLowerCase(),
+      )
+    ) {
+      return false;
+    }
+
+    return true;
+  }, [
+    parentItem,
+    pageModel.name,
+    editContext?.sessionId,
+    editContext?.contentEditorItem?.language,
+  ]);
+
+  const createPageIfNeeded = useCallback(async (): Promise<boolean> => {
+    if (!editContext || !parentItem || 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(parentItem),
+          language: parentItem.language || "en",
+        },
+        wizard.templateId,
+        pageModel.name,
+      );
+
+      if (result) {
+        editContext?.loadItem(result, { addToBrowseHistory: true });
+        const item = await editContext?.itemsRepository.getItem(result);
+        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,
+    parentItem,
+    pageItem,
+    checkPageName,
+    wizard.templateId,
+    pageModel.name,
+    setPageItem,
+  ]);
+
+  useEffect(() => {
+    editContext?.setMode("edit");
+    if (!internalState.layoutInstructions) {
+      setInternalState({
+        ...internalState,
+        layoutInstructions: step.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 (reusing logic from ComponentTypeSelector)
+        const extractComponentTypes = (items: any): string[] => {
+          if (!items || !Array.isArray(items)) return [];
+          let types: string[] = [];
+          for (const item of items) {
+            if ("type" in item) {
+              types.push(item.type);
+            }
+            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),
+                  ];
+                }
+              }
+            }
+            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: string[] = [];
+          if (step["preselectedComponents"]) {
+            stepPreselectedTypes = step["preselectedComponents"]
+              .split(/[,\n\r]+/)
+              .map((type: string) => type.trim())
+              .filter((type: string) => 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);
+      }
+    }
+  }, []);
+
+  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 (!pageItem) {
+  //     setPageItem(pageItem);
+  //   }
+  // }, [pageItem]);
+
+  useEffect(() => {
+    if (
+      editContext &&
+      editContext.page &&
+      editContext.page.item &&
+      pageItem &&
+      pageItem.id === editContext.page.item.descriptor.id
+    ) {
+      setPageLoaded(true);
+      pageLoadedRef.current = true;
+    }
+  }, [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;
+      if (!currentPageItem) {
+        const pageCreated = await createPageIfNeeded();
+        if (!pageCreated) {
+          setMessage(
+            "Failed to create page. Please check the page name and try again.",
+          );
+          setIsLoading(false);
+          return;
+        }
+
+        // Wait for pageLoaded to become true before continuing
+        const waitForPageLoaded = async (): Promise<boolean> => {
+          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;
+        };
+
+        const isPageLoaded = await waitForPageLoaded();
+        if (!isPageLoaded) {
+          setMessage("Page creation timed out. Please try again.");
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      if (internalState.componentsCreated) {
+        if (currentPageItem) {
+          const wipeResult: ExecutionResult<any> = 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?.clear();
+
+        setPageModel((prev) => ({
+          ...prev,
+          components: [],
+          message: "",
+        }));
+
+        editContextRef.current?.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);
+
+      // Get the existing page model
+      const existingPageModel = await convertToAiPageModel(
+        editContextRef.current?.page!,
+        editContextRef.current!,
+      );
+
+      const result = await executePrompt(
+        [
+          {
+            content: `${internalState.layoutInstructions?.trim()} Reply with a json object of type PageModel = { 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.
+              Existing page model: ${JSON.stringify(existingPageModel)}
+            Fill empty fields of existing components before you insert new components.
+              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.
+              If the user provided image ids, fill them into picture / image fields with an "id:" prefix. The image id needs to be guid.
+              If you dont have a matching image id, provide a description of a picture that you would like to use with a "generate:" prefix instead.
+              The language of the page is ${editContextRef.current!.contentEditorItem!.language}.
+              Input data: ${JSON.stringify(data)}`,
+
+            name: "system",
+            role: "system",
+          },
+        ], //Fill image ids into picture / image fields.
+        editContextRef.current!,
+        createWizardAiContext,
+        { allowedFunctions: [] },
+        { 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 = result;
+
+      console.log("RESULT MODEL: ", pageModel);
+
+      setPageModel((prev) => mergeLayout(prev, pageModel));
+      //setMessage(pageModel.message);
+      setStepCompleted(true);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Custom instructions panel
+  const customInstructionsPanel = () => {
+    return (
+      <InputTextarea
+        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="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 (
+    <div className="flex h-full flex-col md:flex-row">
+      <div className="flex flex-col items-stretch">
+        <WizardBox
+          title="Content modules"
+          icon={<Wand2 />}
+          description="Select the component types the AI can choose from"
+          className="w-full md:w-96"
+          collapsible="yes"
+          defaultCollapsed="yes"
+          summary=<div className="text-xs">
+            {getComponentTypeSelectorSummary(
+              data.selectedComponentTypes,
+              availableComponentTypes,
+            )}
+          </div>
+        >
+          <ComponentTypeSelector
+            selectedComponentTypes={data.selectedComponentTypes}
+            setSelectedComponentTypes={(selectedTypes) => {
+              setData({
+                ...data,
+                selectedComponentTypes: selectedTypes,
+              });
+            }}
+            schema={wizard.schema}
+            data={data}
+            setData={setData}
+            step={step}
+          />
+        </WizardBox>
+        <WizardBoxConnector direction="vertical" />
+        <WizardBox
+          title="Generate content"
+          icon={<Wand2 />}
+          collapsible="yes"
+          defaultCollapsed="mobileOnly"
+          description="Refine instructions and generate content"
+          className="w-full md:w-96"
+          footer={
+            <div>
+              <div className="flex w-full gap-2">
+                <ActionButton
+                  onClick={createLayout}
+                  disabled={
+                    isLoading ||
+                    isCreatingComponents ||
+                    !data.selectedComponentTypes ||
+                    data.selectedComponentTypes.length === 0 ||
+                    (!pageItem &&
+                      (!pageModel.name || pageModel.name.trim().length < 3))
+                  }
+                  isLoading={
+                    isLoading ||
+                    isCreatingComponents ||
+                    !!editContext?.activeFieldActions.find(
+                      (action) => action.state === "running",
+                    )
+                  }
+                  loadingText={"Working"}
+                  className="w-full flex-1"
+                >
+                  {!pageItem ? "Create page" : "Delete & Regenerate content"}
+                </ActionButton>
+
+                {isLoading && (
+                  <ActionButton
+                    isLoading={false}
+                    onClick={() => abortController?.abort("User aborted")}
+                  >
+                    Abort
+                  </ActionButton>
+                )}
+              </div>
+              {message && <div className="mt-2 text-xs">{message}</div>}
+            </div>
+          }
+        >
+          <div>{customInstructionsPanel()}</div>
+        </WizardBox>
+      </div>
+      {pageItem && (
+        <>
+          <WizardBoxConnector />
+          <WizardBox
+            title="Page preview"
+            icon={<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}
+          >
+            <div
+              className={cn(
+                "min-h-[300px] border-t border-gray-200",
+                pageLoaded ? "h-full" : "h-0",
+              )}
+            >
+              <PageViewer
+                name="single"
+                compareView={false}
+                showFormEditor={false}
+                followEditsDefault={true}
+                pageViewContext={editContext!.pageView}
+              />
+            </div>
+          </WizardBox>
+        </>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 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/Generate.tsx

@@ -40,9 +40,9 @@ function Generate({ title }: GenerateProps) {
           "animate-fadeIn flex h-full flex-col items-center justify-center transition-all duration-300",
         )}
       >
-        <div className="mb-20">
-          <div className="flex justify-center">
-            <div className="h-64 w-64 animate-pulse">
+        <div className="md:mb-20">
+          <div className="flex items-center justify-center">
+            <div className="h-48 w-48 animate-pulse md:h-64 md:w-64">
               <div className="magic-logo h-full w-full">
                 <Logo />
               </div>