@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,227 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

@@ -1,281 +0,0 @@
-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>
-  );
-}