@alpaca-editor/core 1.0.0

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

@@ -0,0 +1,256 @@
+import { useState, useEffect } from "react";
+import { WizardData } from "../PageWizard";
+import { useEditContext } from "../../editor/client/editContext";
+import { executePrompt } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { classNames } from "primereact/utils";
+import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
+import { InputTextarea } from "primereact/inputtextarea";
+import { StepComponentProps } from "../../config/types";
+import { ActionButton } from "../../components/ActionButton";
+import Generate from "./Generate";
+type Option = {
+  title: string;
+  description: string;
+  id: string;
+};
+
+type Response = {
+  options: Option[];
+};
+
+export function SelectStep({
+  step,
+  data,
+  setData,
+  setStepCompleted,
+  internalState,
+  setInternalState,
+}: StepComponentProps) {
+  const editContext = useEditContext();
+  const [options, setOptions] = useState<Option[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+  const [instructions, setInstructions] = useState(step.instructions);
+
+  // Get the property name from the step or use "choice" as default
+  const propertyName = step.propertyName || "selectedOptions";
+
+  useEffect(() => {
+    if (data[propertyName]?.length) {
+      setStepCompleted(true);
+    }
+  }, [data]);
+
+  // Initialize the property in data
+  useEffect(() => {
+    if (!data[propertyName]) {
+      setData((prevData: WizardData) => ({
+        ...prevData,
+        [propertyName]: [],
+      }));
+    }
+  }, [propertyName, setData]);
+
+  const generateOptions = async () => {
+    if (!editContext) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Create a prompt based on step instructions and data
+      const prompt = `${instructions}\n\nCurrent data: ${JSON.stringify(
+        data,
+        null,
+        2
+      )}`;
+
+      // Call the executePrompt function with the prompt
+      const result = await executePrompt(
+        [
+          {
+            content: `You are a helpful assistant that generates options for a wizard select step.
+              Generate a JSON array of options based on the instructions and current data.            
+              ONLY respond with a valid JSON array without any explanation or additional text.
+              JSON format: {options: {title: string, description: string}[] }`,
+            name: "system",
+            role: "system",
+          },
+          {
+            content: prompt,
+            name: "user",
+            role: "user",
+          },
+        ],
+        editContext,
+        createWizardAiContext,
+        [""],
+        true,
+        undefined,
+        step.aiModel || "o3-mini-low"
+      );
+
+      // Parse the result and set options
+      if (result && result.content) {
+        try {
+          const generatedOptions = JSON.parse(result.content) as Response;
+          for (let i = 0; i < generatedOptions.options.length; i++) {
+            generatedOptions.options[i]!.id = i.toString();
+          }
+
+          setOptions(generatedOptions.options);
+          setInternalState((state: any) => ({
+            ...state,
+            [step.id + "options"]: generatedOptions.options,
+          }));
+        } catch (parseError) {
+          console.error("Error parsing options:", parseError);
+          setError(
+            "Failed to parse options. The response was not in the expected format."
+          );
+        }
+      } else {
+        setError("No options were generated. Please try again.");
+      }
+    } catch (err) {
+      setError("Failed to generate options. Please try again.");
+      console.error("Error generating options:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Generate options on component mount
+  useEffect(() => {
+    if (internalState[step.id + "options"]?.length > 0) {
+      setOptions(internalState[step.id + "options"]);
+      return;
+    }
+    generateOptions();
+  }, [editContext, step.instructions, internalState]);
+
+  // Sync data[propertyName] with selectedOptions state
+  useEffect(() => {
+    const currentSelections = (data[propertyName] as Array<Option>) || [];
+    setSelectedOptions(currentSelections.map((option: Option) => option.id));
+  }, [data, propertyName]);
+
+  // Handle option selection
+  const handleOptionSelect = (option: Option) => {
+    setData((prevData: WizardData) => {
+      const currentData = [
+        ...((prevData[propertyName] as Array<Option>) || []),
+      ];
+      const isSelected = currentData.some((o: Option) => o.id === option.id);
+
+      let updatedData;
+      if (isSelected) {
+        // Remove option if already selected
+        updatedData = currentData.filter((o: Option) => o.id !== option.id);
+      } else {
+        // Add option if not selected
+        updatedData = [...currentData, option];
+      }
+
+      return {
+        ...prevData,
+        [propertyName]: updatedData,
+      };
+    });
+  };
+
+  if (error) {
+    return (
+      <div className="text-red-500 p-4">
+        {error}
+        <button
+          className="ml-4 px-2 py-1 bg-blue-500 text-white rounded"
+          onClick={() => window.location.reload()}
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  const optionsPanel: SplitterPanel = {
+    name: "options",
+    defaultSize: "auto",
+    content: (
+      <div className="p-4 h-full">
+        {loading && (
+          <div className="flex items-center justify-center h-full">
+            <Generate title="Generating options..." />
+          </div>
+        )}
+        {!loading && (
+          <div>
+            {options.length === 0 ? (
+              <div className="text-gray-500 p-4">
+                No options available. Try refreshing the page.
+              </div>
+            ) : (
+              options.map((option, index) => {
+                const isSelected = selectedOptions.includes(option.id);
+
+                return (
+                  <div
+                    key={option.id}
+                    className={classNames(
+                      "mb-3 flex items-center p-3 rounded bg-white border-2",
+                      index % 2 === 0
+                        ? "animate-fadeRight"
+                        : "animate-fadeLeft",
+                      isSelected
+                        ? "text-canvas-pink border-canvas-pink"
+                        : "text-gray-600 border-gray-300"
+                    )}
+                    onClick={() => handleOptionSelect(option)}
+                  >
+                    <div className="flex flex-col flex-1 cursor-pointer">
+                      <div className="font-medium">{option.title}</div>
+                      <div className="text-xs text-gray-600">
+                        {option.description}
+                      </div>
+                    </div>
+                    {isSelected && (
+                      <div className="text-canvas-pink ml-2">✓</div>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        )}
+      </div>
+    ),
+  };
+
+  const settingsPanel: SplitterPanel = {
+    name: "settings",
+    defaultSize: 400,
+    content: (
+      <div className="flex flex-col gap-2 pr-6">
+        <h3 className="text-sm font-bold">Instructions</h3>
+        <InputTextarea
+          className="h-48 text-sm"
+          value={instructions}
+          onChange={(e) => setInstructions(e.target.value)}
+          placeholder="Enter instructions for the options"
+        />
+        <ActionButton
+          onClick={generateOptions}
+          isLoading={loading}
+          disabled={loading}
+          loadingText="Thinking..."
+        >
+          Regenerate Options
+        </ActionButton>
+      </div>
+    ),
+  };
+
+  return <Splitter panels={[settingsPanel, optionsPanel]} />;
+}

package/src/page-wizard/steps/schema.ts

@@ -0,0 +1,180 @@
+import {
+  WizardSchemaComponent,
+  PageSchema,
+  SchemaComponent,
+  WizardSchemaField,
+} from "../PageWizard";
+type WizardSchemaComponentAccumulator = {
+  name: string;
+  type: string;
+  fields: WizardSchemaField[];
+  validParentPlaceholders: Set<string>;
+  validChildComponentTypes: Set<string>;
+  allowedOnRoot: boolean;
+};
+
+export function convertPageSchemaToWizardComponents(
+  pageSchema: PageSchema,
+  whitelist: string[]
+): WizardSchemaComponent[] {
+  const componentMap = new Map<string, WizardSchemaComponentAccumulator>();
+
+  /**
+   * Recursively processes a SchemaComponent.
+   *
+   * @param component - The current SchemaComponent to process.
+   * @param parentPlaceholder - The name of the placeholder where the component appears.
+   * @param isRoot - True if the component is at the root level.
+   * @param parentAccumulator - The accumulator of the parent component (if the parent is allowed).
+   */
+  function processComponent(
+    component: SchemaComponent,
+    parentPlaceholder: string,
+    isRoot: boolean,
+    parentAccumulator?: WizardSchemaComponentAccumulator
+  ): void {
+    const isAllowed = whitelist.includes(component.type);
+    let currentAccumulator: WizardSchemaComponentAccumulator | undefined =
+      undefined;
+
+    if (isAllowed) {
+      // If a parent accumulator exists (and is allowed), record the child's type as a valid child type.
+      if (parentAccumulator) {
+        parentAccumulator.validChildComponentTypes.add(component.type);
+      }
+
+      if (componentMap.has(component.typeId)) {
+        currentAccumulator = componentMap.get(component.typeId)!;
+        currentAccumulator.validParentPlaceholders.add(parentPlaceholder);
+        // Mark as allowed on root if encountered at the root level in any instance.
+        if (isRoot) {
+          currentAccumulator.allowedOnRoot = true;
+        }
+      } else {
+        currentAccumulator = {
+          name: component.typeId, // using typeId as the wizard component name
+          type: component.type,
+          fields: component.fields.map((field) => ({
+            name: field.name,
+            type: field.type,
+          })),
+          validParentPlaceholders: new Set([parentPlaceholder]),
+          validChildComponentTypes: new Set<string>(),
+          allowedOnRoot: isRoot,
+        };
+        componentMap.set(component.typeId, currentAccumulator);
+      }
+    }
+    // Process child components regardless of whether the current component is allowed.
+    for (const placeholder of component.placeholders) {
+      for (const child of placeholder.components) {
+        processComponent(child, placeholder.name, false, currentAccumulator);
+      }
+    }
+  }
+
+  // Process each top-level component in the PageSchema.
+  for (const placeholder of pageSchema) {
+    for (const component of placeholder.components) {
+      processComponent(component, placeholder.name, true);
+    }
+  }
+
+  // Convert accumulators to final WizardSchemaComponent objects.
+  const wizardComponents: WizardSchemaComponent[] = [];
+  for (const acc of componentMap.values()) {
+    const wizardComponent: WizardSchemaComponent = {
+      type: acc.type,
+      fields: acc.fields,
+      allowedChildrenComponentTypes: Array.from(acc.validChildComponentTypes),
+      allowedOnRoot: acc.allowedOnRoot,
+    };
+    // Only include validParentPlaceholders if there is more than one.
+    if (acc.validParentPlaceholders.size > 1) {
+      wizardComponent.availableParentPlaceholders = Array.from(
+        acc.validParentPlaceholders
+      );
+    }
+    wizardComponents.push(wizardComponent);
+  }
+
+  return wizardComponents;
+}
+
+/**
+ * Finds a placeholder (by its name) where a child component of type `childComponentType`
+ * can be placed inside a parent of type `parentComponentType`. For a parentComponentType
+ * equal to "root" (case‑insensitive), the function searches among top‑level placeholders.
+ *
+ * @param schema - The PageSchema (an array of SchemaPlaceholders).
+ * @param parentComponentType - The type of the parent component, or "root" to indicate top‑level.
+ * @param childComponentType - The type of the child component to place.
+ * @returns The name of a valid placeholder or undefined if none is found.
+ */
+export function getPlaceholder(
+  schema: PageSchema,
+  parentComponentType: string,
+  childComponentType: string
+): string | undefined {
+  // Check for the special case where we want to place at the root level.
+  if (parentComponentType.toLowerCase() === "root") {
+    // First, look for a top-level placeholder that already contains a component
+    // of the given childComponentType.
+    for (const topPlaceholder of schema) {
+      if (
+        topPlaceholder.components.some((c) => c.type === childComponentType)
+      ) {
+        return topPlaceholder.name;
+      }
+    }
+    // If not found, return the first top-level placeholder that is empty.
+    for (const topPlaceholder of schema) {
+      if (topPlaceholder.components.length === 0) {
+        return topPlaceholder.name;
+      }
+    }
+    return undefined;
+  }
+
+  // Recursive helper to search through nested SchemaComponents.
+  function searchComponents(components: SchemaComponent[]): string | undefined {
+    for (const component of components) {
+      // If this component matches the desired parent type, check its placeholders.
+      if (component.type === parentComponentType) {
+        // First, try to find a placeholder that already has a child of the desired type.
+        for (const placeholder of component.placeholders) {
+          if (
+            placeholder.components.some(
+              (child) => child.type === childComponentType
+            )
+          ) {
+            return placeholder.name;
+          }
+        }
+        // Otherwise, pick an empty placeholder.
+        for (const placeholder of component.placeholders) {
+          if (placeholder.components.length === 0) {
+            return placeholder.name;
+          }
+        }
+      }
+      // Recurse into any placeholders in the current component.
+      for (const placeholder of component.placeholders) {
+        const result = searchComponents(placeholder.components);
+        if (result) {
+          return result;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  // Search through all top-level placeholders' components.
+  for (const topPlaceholder of schema) {
+    const result = searchComponents(topPlaceholder.components);
+    if (result) {
+      return result;
+    }
+  }
+  return undefined;
+}

package/src/page-wizard/steps/usePageCreator.ts

@@ -0,0 +1,279 @@
+import { Dispatch, SetStateAction, useMemo } from "react";
+import {
+  SchemaComponent,
+  Wizard,
+  WizardPageComponent,
+  WizardPageModel,
+  WizardField,
+} from "../PageWizard";
+import { useEditContextRef } from "../../editor/client/editContext";
+import { useEditContext } from "../../editor/client/editContext";
+import { getComponentById } from "../../editor/componentTreeHelper";
+import { getPlaceholder } from "./schema";
+import { normalizeGuid } from "../../editor/utils";
+import { ItemDescriptor } from "../../editor/pageModel";
+
+export function usePageCreator(
+  pageItem: ItemDescriptor | undefined,
+  wizard: Wizard,
+  setPageModel: Dispatch<SetStateAction<WizardPageModel>>
+) {
+  const editContext = useEditContext();
+  const editContextRef = useEditContextRef();
+
+  // Function to build a map of all components from wizard schema
+  const buildComponentTypeMap = () => {
+    const componentMap = new Map<string, string>();
+    const fieldIdsMap = new Map<string, string>();
+    const placeholderMap = new Map<string, string>();
+
+    const processComponentsRecursively = (components: SchemaComponent[]) => {
+      for (const component of components) {
+        // Store the mapping from component type to typeId
+        componentMap.set(component.type, component.typeId);
+        placeholderMap.set(component.typeId, component.type);
+
+        // Process nested components in placeholders
+        if (component.placeholders && component.placeholders.length > 0) {
+          for (const placeholder of component.placeholders) {
+            if (placeholder.components && placeholder.components.length > 0) {
+              processComponentsRecursively(placeholder.components);
+            }
+          }
+        }
+        if (component.fields && component.fields.length > 0) {
+          for (const field of component.fields) {
+            fieldIdsMap.set(component.typeId + "_" + field.name, field.id);
+          }
+        }
+      }
+    };
+
+    // Start processing from the root level of the schema
+    if (wizard.schema && wizard.schema.length > 0) {
+      for (const placeholder of wizard.schema) {
+        if (placeholder.components && placeholder.components.length > 0) {
+          processComponentsRecursively(placeholder.components);
+        }
+      }
+    }
+
+    return { componentMap, fieldIdsMap };
+  };
+
+  // Build the component type to typeId map
+  const mappings = useMemo(() => buildComponentTypeMap(), [wizard.schema]);
+
+  const createNewComponent = async (
+    component: WizardPageComponent,
+    parentComponentType: string,
+    index: number,
+    parentComponentId?: string
+  ): Promise<ItemDescriptor | undefined> => {
+    if (!editContext) return undefined;
+    const { componentMap } = mappings;
+    // Get the typeId from the map using the component type
+    const typeId = componentMap.get(component.type) || component.type;
+
+    // 1. Add the component to the placeholder
+    console.log(
+      `Adding component ${component.type} (typeId: ${typeId}) to placeholder ${parentComponentId} at index ${index}`
+    );
+
+    const placeholderKey =
+      component.placeholder ||
+      getPlaceholder(wizard.schema, parentComponentType, component.type);
+
+    const placeholderId = parentComponentId
+      ? placeholderKey + "_" + normalizeGuid(parentComponentId)
+      : placeholderKey;
+
+    if (!placeholderId) {
+      console.error("Placeholder ID not found", component);
+      return undefined;
+    }
+
+    const addComponentOp = await editContext.operations.addComponent(
+      typeId, // Use typeId instead of just type
+      placeholderId,
+      index
+    );
+
+    if (!addComponentOp?.componentId) {
+      console.error(
+        "Failed to add component",
+        component,
+        "Result Op:",
+        addComponentOp
+      );
+      return undefined;
+    }
+
+    // Wait for the component to be created
+    const componentId = addComponentOp.componentId;
+    console.log("Waiting for component to be created", componentId);
+
+    let createdComponent;
+    let attempts = 0;
+    const maxAttempts = 40;
+
+    while (!createdComponent && attempts < maxAttempts) {
+      if (editContextRef.current?.page) {
+        createdComponent = getComponentById(
+          componentId,
+          editContextRef.current?.page
+        );
+        if (createdComponent) {
+          break;
+        }
+      }
+      if (createdComponent) break;
+
+      await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 100ms between attempts
+      attempts++;
+    }
+
+    if (!createdComponent) {
+      console.error(
+        "Timeout waiting for component to appear in page model",
+        componentId
+      );
+    }
+
+    const componentDescriptor = {
+      ...addComponentOp.mainItem,
+      id: addComponentOp.componentId,
+    };
+
+    console.log("Component created:", componentDescriptor);
+
+    return componentDescriptor;
+  };
+
+  const findComponent = (components: WizardPageComponent[], path: number[]) => {
+    const child = components[path[0]!];
+    if (!child) return null;
+    if (path.length === 1) return child;
+    return findComponent(child.children || [], path.slice(1));
+  };
+
+  // Function to recursively create components from the page model
+  const createComponentsRecursively = async (
+    components: WizardPageComponent[],
+    parentComponentType: string,
+    parentComponentId?: string,
+    parentPath?: number[]
+  ) => {
+    if (!editContext || !pageItem) return;
+
+    const { fieldIdsMap, componentMap } = mappings;
+
+    // Process each component in the array
+    for (let i = 0; i < components.length; i++) {
+      const component = components[i];
+      const componentPath = [...(parentPath || []), i];
+
+      if (!component?.id) {
+        if (!component?.type || !component?.fields) {
+          continue;
+        }
+
+        const descriptor = await createNewComponent(
+          component,
+          parentComponentType,
+          i,
+          parentComponentId
+        );
+        if (!descriptor) continue;
+        component.id = descriptor.id;
+        setPageModel((prev) => {
+          const component = findComponent(prev.components, componentPath);
+          if (component) {
+            component.id = descriptor.id;
+          }
+          return {
+            ...prev,
+          };
+        });
+      }
+
+      if (component.fields && component.fields.length > 0) {
+        const typeId = componentMap.get(component.type) || component.type;
+
+        // 2. Edit fields of the component
+        for (const field of component.fields) {
+          if (
+            !field.name ||
+            !field.value ||
+            field.value + field.type === field.writtenValue
+          ) {
+            continue;
+          }
+
+          const fieldId = fieldIdsMap.get(typeId + "_" + field.name);
+
+          if (!fieldId) {
+            console.error("Field not found", field);
+            continue;
+          }
+
+          const fieldDescriptor = {
+            fieldId: fieldId.toLowerCase().replace(/[{}]/g, ""),
+            item: {
+              id: component.id,
+              language: pageItem.language,
+              version: pageItem.version,
+            },
+          };
+
+          console.log(
+            `Editing field ${field.name} of component ${component.id} with value ${field.value}`
+          );
+
+          let rawValue = field.value;
+          let value = field.value as any;
+
+          if (field.type === "Picture") {
+            value = {
+              Variants: [{ Name: "Landscape", MediaId: field.value }],
+            };
+            rawValue = JSON.stringify(value);
+          }
+
+          await editContext.operations.editField({
+            field: fieldDescriptor,
+            value: value,
+            rawValue: rawValue,
+            refresh: "none",
+          });
+
+          setPageModel((prev) => {
+            const component = findComponent(prev.components, componentPath);
+            if (component) {
+              const prevField: WizardField | undefined = component.fields.find(
+                (f: WizardField) => f.name === field.name
+              );
+              if (prevField) {
+                prevField.writtenValue = field.value + field.type;
+              }
+            }
+            return {
+              ...prev,
+            };
+          });
+        }
+      }
+
+      // 3. Recursively process placeholders
+      if (component.children && component.children.length > 0) {
+        await createComponentsRecursively(
+          component.children,
+          component.type,
+          component.id,
+          componentPath
+        );
+      }
+    }
+  };
+  return { createComponentsRecursively };
+}