@alpaca-editor/core 1.0.3902 → 1.0.3904

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

@@ -1,430 +0,0 @@
-import { StepComponentProps } from "../../config/types";
-
-import { CreatePage } from "./CreatePage";
-import { useEffect, useState } from "react";
-import { PageViewer } from "../../editor/page-viewer/PageViewer";
-import {
-  useEditContext,
-  useModifiedFieldsContext,
-} from "../../editor/client/editContext";
-
-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";
-import { InputTextarea } from "primereact/inputtextarea";
-
-import { convertToAiPageModel } from "../../editor/ai/aiPageModel";
-import { WizardBox } from "../WizardBox";
-import { Layers, PanelsTopLeft } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { WizardBoxConnector } from "../WizardBoxConnector";
-
-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 modifiedFieldsContext = useModifiedFieldsContext();
-
-  const pageCreator = usePageCreator(pageItem, wizard, setPageModel);
-
-  if (!parentItem) return "No parent item";
-
-  useEffect(() => {
-    editContext?.setMode("edit");
-    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) {
-        editContext?.itemsRepository.clear();
-        modifiedFieldsContext?.clear();
-        await wipeComponents(pageItem.descriptor);
-
-        setPageModel((prev) => ({
-          ...prev,
-          components: [],
-          message: "",
-        }));
-
-        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);
-
-      // Get the existing page model
-      const existingPageModel = await convertToAiPageModel(
-        editContext.page!,
-        editContext,
-      );
-
-      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 ${pageItem.descriptor.language}.
-              Input data: ${JSON.stringify(data)}`,
-
-            name: "system",
-            role: "system",
-          },
-        ], //Fill image ids into picture / image fields.
-        editContext,
-        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 (
-      <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>
-        <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"
-        />
-      </div>
-    );
-  };
-
-  return (
-    <div className="flex h-full">
-      <WizardBox
-        title="Generate content"
-        icon={<Layers />}
-        description="Generate content for the page"
-        className="w-96"
-      >
-        <div className="flex h-full flex-col items-stretch">
-          <div className="relative flex-1">
-            <div className="absolute inset-0 overflow-y-auto 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>
-          </div>
-          <div className="py-2">
-            <div className="flex w-full gap-2">
-              <ActionButton
-                onClick={createLayout}
-                disabled={
-                  isLoading ||
-                  isCreatingComponents ||
-                  !data.selectedComponentTypes ||
-                  data.selectedComponentTypes.length === 0
-                }
-                isLoading={
-                  isLoading ||
-                  isCreatingComponents ||
-                  !!editContext?.activeFieldActions.find(
-                    (action) => action.state === "running",
-                  )
-                }
-                loadingText="Working"
-                className="w-full flex-1"
-              >
-                {internalState.componentsCreated
-                  ? "Reset and regenerate content"
-                  : "Generate 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>
-      </WizardBox>
-      <WizardBoxConnector className="mt-6" />
-      <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"
-      >
-        <div
-          className={cn(
-            "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;
-};