@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,227 @@
+import { useEffect, useState } from "react";
+import { WizardData, WizardPageModel } from "../PageWizard";
+
+import { useEditContext } from "../../editor/client/editContext";
+import { executePrompt } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { Components } from "./Components";
+import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
+import { convertPageSchemaToWizardComponents } from "./schema";
+import { StepComponentProps } from "../../config/types";
+import { ActionButton } from "../../components/ActionButton";
+import { ComponentTypeSelector } from "./ComponentTypesSelector";
+export function LayoutStep({
+  wizard,
+  step,
+  data,
+  setData,
+  setStepCompleted,
+  internalState,
+  setInternalState,
+}: StepComponentProps) {
+  const editContext = useEditContext();
+  const abortController = new AbortController();
+
+  const localAbortController = abortController || new AbortController();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [message, setMessage] = useState<string>();
+
+  const [selectedComponentTypes, setSelectedComponentTypes] = useState<
+    string[]
+  >([]);
+
+  const [customInstructions, setCustomInstructions] = useState<string>();
+
+  if (!editContext) {
+    return null;
+  }
+
+  useEffect(() => {
+    if (data.pageModel?.components?.length) {
+      setStepCompleted(!isLoading);
+    }
+  }, [data.pageModel, isLoading]);
+
+  useEffect(() => {
+    setCustomInstructions(step.fields.instructions);
+  }, []);
+
+  const createLayout = async () => {
+    try {
+      setIsLoading(true);
+
+      // 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,
+        selectedComponentTypes,
+      );
+
+      const result = await executePrompt(
+        [
+          {
+            content: `${customInstructions?.trim()} Reply with a json object of type PageModel = { name: string; metaDescription: string; 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. Also suggest a page name following default sitecore item naming conventions (no underscores, no white space, no umlaute, no special characters, hyphens are allowed) and the page meta description.
+              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.
+              Input data: ${JSON.stringify(data)}`,
+
+            name: "system",
+            role: "system",
+          },
+        ],
+        editContext,
+        createWizardAiContext,
+        {},
+        { signal: localAbortController.signal },
+        "gpt-4.1",
+        (response) => {
+          try {
+            const newLayout = JSON.parse(response.content) as WizardPageModel;
+
+            if (newLayout) {
+              setData((prev: WizardData) => ({
+                ...prev,
+                pageModel: newLayout,
+              }));
+            }
+
+            setMessage(newLayout.message);
+          } catch (parseError: unknown) {}
+        },
+      );
+
+      const pageModel = JSON.parse(result.content);
+
+      setData({
+        ...data,
+        pageModel: JSON.parse(result.content),
+        customInstructions,
+      });
+
+      setMessage(pageModel.message);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Toggle placeholder selection
+
+  // Regenerate layout with current selected component types and placeholders
+  const regenerateLayout = () => {
+    createLayout();
+  };
+
+  useEffect(() => {
+    if (!selectedComponentTypes.length) return;
+
+    // Only set custom instructions if they're not already set or if step.instructions has changed
+    if (customInstructions !== step.fields.instructions) {
+      setCustomInstructions(step.fields.instructions);
+    }
+  }, [step.fields.instructions, selectedComponentTypes]);
+
+  // Custom instructions panel
+  const customInstructionsPanel = () => {
+    return (
+      <div className="mb-4">
+        <h3 className="text-sm font-bold">Instructions</h3>
+        <div className="mb-3 text-xs text-gray-500">
+          Provide guidance for the AI when generating your layout
+        </div>
+        <textarea
+          value={customInstructions}
+          onChange={(e) => setCustomInstructions(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"
+          disabled={isLoading}
+        />
+      </div>
+    );
+  };
+
+  const settingsPanel: SplitterPanel = {
+    name: "Settings",
+    collapsible: false,
+    defaultSize: 450,
+    content: (
+      <div className="absolute inset-0 flex h-full flex-col overflow-auto pr-4">
+        {customInstructionsPanel()}
+        <ComponentTypeSelector
+          selectedComponentTypes={selectedComponentTypes}
+          setSelectedComponentTypes={setSelectedComponentTypes}
+          schema={wizard.schema}
+          data={data}
+          setData={setData}
+          step={step}
+        />
+        <div className="flex gap-2">
+          <ActionButton
+            onClick={regenerateLayout}
+            disabled={isLoading || selectedComponentTypes.length === 0}
+            isLoading={isLoading}
+            loadingText="Working"
+            className="flex-1"
+          >
+            {data.pageModel ? "Regenerate Layout" : "Generate Layout"}
+          </ActionButton>
+          {/* Abort button - only visible when loading */}
+          {isLoading && (
+            <button
+              onClick={() => {
+                localAbortController.abort();
+                setIsLoading(false);
+              }}
+              className="flex items-center gap-1 rounded bg-red-500 px-2 py-1 text-xs text-white hover:bg-red-600"
+            >
+              <span className="pi pi-times"></span>
+              Abort
+            </button>
+          )}
+        </div>
+        <div className="p-2 text-xs text-gray-500">{message}</div>
+      </div>
+    ),
+  };
+
+  const layoutPanel: SplitterPanel = {
+    name: "Layout",
+    defaultSize: "auto",
+    collapsible: false,
+    content: (
+      <div className="absolute inset-2 flex flex-col items-center justify-center text-gray-600">
+        <Components
+          pageModel={data.pageModel}
+          onComponentRemoved={() => setData({ ...data })}
+          onFieldEdited={() => setData({ ...data })}
+          thumbnails={internalState.thumbnails}
+          setInternalState={setInternalState}
+        />
+      </div>
+    ),
+  };
+
+  return (
+    <Splitter
+      panels={[settingsPanel, layoutPanel]}
+      localStorageKey="editor.page-wizard.layout"
+    />
+  );
+}

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

@@ -0,0 +1,173 @@
+import { useEffect, useState } from "react";
+import { FullItem } from "../../editor/pageModel";
+import { WizardPageModel } from "../PageWizard";
+import { executePrompt } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { useEditContext } from "../../editor/client/editContext";
+import { InputTextarea } from "primereact/inputtextarea";
+import { WizardBox } from "../WizardBox";
+import { FileText } from "lucide-react";
+import { StepComponentProps } from "../../config/types";
+import Generate from "./Generate";
+
+export function MetaDataStep({
+  parentItem,
+  pageModel,
+  setPageModel,
+  step,
+  data,
+  setStepCompleted,
+}: StepComponentProps) {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [fullParentItem, setFullParentItem] = useState<FullItem>();
+  const editContext = useEditContext();
+
+  useEffect(() => {
+    if (!editContext) return;
+
+    if (editContext.mode !== "edit") {
+      editContext.setMode("edit");
+    }
+  }, [editContext]);
+
+  useEffect(() => {
+    const loadParentItem = async () => {
+      if (!parentItem) return;
+      const item = await editContext?.itemsRepository.getItem(parentItem);
+      setFullParentItem(item);
+    };
+    loadParentItem();
+  }, [parentItem]);
+
+  // Mark step as completed immediately since this is now just informational
+  useEffect(() => {
+    setStepCompleted(true);
+  }, [setStepCompleted]);
+
+  // Auto-generate meta description and keywords if not set
+  useEffect(() => {
+    if (!editContext) return;
+
+    const generateMetaFields = async () => {
+      const metaInstructions =
+        step.fields["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 = { metaDescription: string; metaKeywords: string; };               
+              Generate SEO-optimized meta description and keywords.
+              The language of the page is ${parentItem?.language || "en"}.
+              Input data: ${JSON.stringify(data)}`,
+              name: "system",
+              role: "system",
+            },
+          ],
+          editContext,
+          createWizardAiContext,
+          {},
+          { signal: abortController.signal },
+          "gpt-4.1",
+          (response) => {
+            try {
+              const newLayout = JSON.parse(response.content) as WizardPageModel;
+
+              setPageModel({
+                ...pageModel,
+                metaDescription: newLayout.metaDescription,
+                metaKeywords: newLayout.metaKeywords,
+              });
+            } catch (parseError: unknown) {}
+          },
+        );
+
+        const pageModelResult = JSON.parse(result.content) as WizardPageModel;
+        setPageModel({
+          ...pageModel,
+          metaDescription: pageModelResult.metaDescription,
+          metaKeywords: pageModelResult.metaKeywords,
+        });
+      } catch (error) {
+        console.error("Error generating meta fields", error);
+      } finally {
+        setIsGenerating(false);
+      }
+    };
+
+    if (!pageModel.metaDescription && !pageModel.metaKeywords) {
+      generateMetaFields();
+    }
+  }, []);
+
+  const handleInputChange = (field: keyof typeof pageModel, value: string) => {
+    const updatedPageModel = {
+      ...pageModel,
+      [field]: value,
+    };
+
+    setPageModel(updatedPageModel);
+  };
+
+  return (
+    <div className="flex h-full flex-col md:flex-row">
+      <WizardBox
+        title="SEO Settings"
+        icon={<FileText />}
+        description="Configure meta information for SEO optimization"
+        className="flex-1"
+      >
+        <div className="flex h-full flex-col items-stretch">
+          <div className="relative flex-1">
+            {isGenerating ? (
+              <div className="flex h-full items-center justify-center">
+                <Generate title="Generating SEO fields..." />
+              </div>
+            ) : (
+              <>
+                <div className="mb-4">
+                  <label
+                    htmlFor="metaDescription"
+                    className="mb-1 block text-sm font-medium"
+                  >
+                    Meta Description
+                  </label>
+                  <InputTextarea
+                    id="metaDescription"
+                    className="min-h-[100px] w-full rounded border p-2 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="mb-1 block text-sm font-medium"
+                  >
+                    Meta Keywords
+                  </label>
+                  <InputTextarea
+                    id="metaKeywords"
+                    className="min-h-[100px] w-full rounded border p-2 text-sm"
+                    value={pageModel.metaKeywords}
+                    onChange={(e) =>
+                      handleInputChange("metaKeywords", e.target.value)
+                    }
+                    placeholder="Enter meta keywords"
+                  />
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </WizardBox>
+    </div>
+  );
+}

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

@@ -0,0 +1,281 @@
+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 { InputTextarea } from "primereact/inputtextarea";
+import { StepComponentProps } from "../../config/types";
+import { ActionButton } from "../../components/ActionButton";
+import Generate from "./Generate";
+import { WizardBox } from "../WizardBox";
+import { WizardBoxConnector } from "../WizardBoxConnector";
+import { Settings, CheckSquare } from "lucide-react";
+
+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.fields.instructions);
+
+  // Get the property name from the step or use "choice" as default
+  const propertyName = step.fields.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 = `${step.fields.systemInstructions}\n${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,
+        { allowedFunctions: [] },
+        undefined,
+        step.fields.aiModel || "gpt-4.1",
+      );
+
+      // 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();
+  }, [step.fields.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="p-4 text-red-500">
+        {error}
+        <button
+          className="ml-4 rounded bg-blue-500 px-2 py-1 text-white"
+          onClick={() => window.location.reload()}
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col md:flex-row">
+      <WizardBox
+        title={step.fields.configureTitle || "Configuration"}
+        icon={<Settings />}
+        description={
+          step.fields.configureDescription ||
+          "Configure instructions and regenerate options"
+        }
+        className="md:w-96"
+      >
+        <div className="flex h-full flex-col items-stretch">
+          <div className="relative flex-1">
+            <div className="absolute inset-0 overflow-y-auto">
+              <h3 className="text-sm font-bold">Instructions</h3>
+              <InputTextarea
+                className="h-48 w-full text-sm"
+                value={instructions}
+                onChange={(e) => setInstructions(e.target.value)}
+                placeholder="Enter instructions for generating the options"
+              />
+            </div>
+          </div>
+          <div className="py-2">
+            <ActionButton
+              onClick={generateOptions}
+              isLoading={loading}
+              disabled={loading}
+              loadingText="Thinking..."
+              className="w-full"
+            >
+              Regenerate Options
+            </ActionButton>
+          </div>
+        </div>
+      </WizardBox>
+      <WizardBoxConnector />
+      <WizardBox
+        title={step.fields.selectOptionsTitle || "Select Options"}
+        icon={<CheckSquare />}
+        description={
+          step.fields.selectOptionsDescription ||
+          "Choose from the generated options below"
+        }
+        className="flex-1"
+      >
+        <div className="h-full">
+          {loading && (
+            <div className="flex h-full items-center justify-center">
+              <Generate
+                title={
+                  step.fields.generatingOptionsText || "Generating options..."
+                }
+              />
+            </div>
+          )}
+          {!loading && (
+            <div>
+              {options.length === 0 ? (
+                <div className="p-4 text-gray-500">
+                  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 rounded border-2 bg-white p-3",
+                        index % 2 === 0
+                          ? "animate-fadeRight"
+                          : "animate-fadeLeft",
+                        isSelected
+                          ? "text-theme-secondary border-theme-secondary"
+                          : "border-gray-300 text-gray-600",
+                      )}
+                      onClick={() => handleOptionSelect(option)}
+                    >
+                      <div className="flex flex-1 cursor-pointer flex-col">
+                        <div className="font-medium">{option.title}</div>
+                        <div className="text-xs text-gray-600">
+                          {option.description}
+                        </div>
+                      </div>
+                      {isSelected && (
+                        <div className="bg-theme-secondary ml-2 flex h-6 w-6 items-center justify-center rounded-full text-white">
+                          ✓
+                        </div>
+                      )}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+        </div>
+      </WizardBox>
+    </div>
+  );
+}