@alpaca-editor/core 1.0.0

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

@@ -0,0 +1,102 @@
+import { useState, useEffect } from "react";
+
+import { WizardField } from "../PageWizard";
+import { TextField } from "../../editor/fieldTypes";
+
+import { Editor } from "primereact/editor";
+
+export function FieldEditor({
+  field,
+  onFieldEdited,
+}: {
+  field: WizardField;
+  onFieldEdited: () => void;
+}) {
+  const [fieldValue, setFieldValue] = useState<string>("");
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      const value = (field as TextField).value;
+      setFieldValue(typeof value === "string" ? value : "");
+    }
+  }, [isEditing]);
+
+  if (!isEditing) {
+    return (
+      <div
+        onClick={() => setIsEditing(true)}
+        className="cursor-pointer mb-2"
+      >
+        <div className="font-bold text-gray-900">{field.name}:</div>
+        <div
+          className="text-gray-700 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:my-1 [&_p]:my-1"
+          dangerouslySetInnerHTML={{ __html: field.value }}
+        ></div>
+        {/* <SimpleIconButton
+       
+          label="Edit"
+          icon="pi pi-pencil"
+        /> */}
+      </div>
+    );
+  }
+
+  const isRichText = field.type === "Rich Text";
+
+  const handleSave = () => {
+    console.log(`Saving changes to field ${field.name}:`, fieldValue);
+    field.value = fieldValue;
+    setIsEditing(false);
+    onFieldEdited();
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-1000">
+      <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-lg">
+        <h3 className="text-lg font-medium text-gray-900 mb-4">
+          Edit {field.name || "Field"}
+        </h3>
+
+        {isRichText ? (
+          <div className="mb-4">
+            <Editor
+              className="w-full h-64 p-2 border border-gray-300 rounded-md"
+              value={fieldValue}
+              onTextChange={(e) => setFieldValue(e.htmlValue || "")}
+            />
+          </div>
+        ) : (
+          <div className="mb-4">
+            <textarea
+              className="w-full p-2 border border-gray-300 rounded-md"
+              value={fieldValue}
+              onChange={(e) => setFieldValue(e.target.value)}
+            />
+          </div>
+        )}
+
+        <div className="flex justify-end space-x-3">
+          <button
+            type="button"
+            onClick={handleCancel}
+            className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleSave}
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { classNames } from "primereact/utils";
+import { SparkleIconBig } from "../../editor/ui/Icons";
+import { SparkleIconSmall } from "../../editor/ui/Icons";
+
+interface GenerateProps {
+  title: string;
+}
+
+function Generate({ title }: GenerateProps) {
+  console.log("Generate", title);
+  return (
+    <div
+      className={classNames(
+        "flex flex-col justify-center items-center h-full transition-all duration-300 animate-fadeIn text-canvas-pink"
+      )}
+    >
+      <div className="mb-20">
+        <div className="flex justify-center ml-20 animate-sparkle w-auto min-h-10 delay-700">
+          <SparkleIconSmall />
+        </div>
+        <div className="flex justify-center ml-5 animate-sparkle w-auto min-h-20">
+          <SparkleIconBig />
+        </div>
+        <div className="flex justify-center mr-20 animate-sparkle w-auto min-h-10 delay-500">
+          <SparkleIconSmall />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Generate;

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

@@ -0,0 +1,318 @@
+import { StepComponentProps } from "../../config/types";
+import { useEffect, useState } from "react";
+import { ScrollingContentTree } from "../../editor/ScrollingContentTree";
+import { ItemTreeNodeData } from "../../editor/services/contentService";
+import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
+import { useEditContext } from "../../editor/client/editContext";
+import { executePrompt, executeSearch } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { ActionButton } from "../../components/ActionButton";
+import { classNames } from "primereact/utils";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { FullItem } from "../../editor/pageModel";
+type Thumbnail = {
+  id: string;
+  name: string;
+  thumbUrl?: string;
+  description?: string;
+  selected?: boolean;
+};
+
+type Image = {
+  title: string;
+  keywords: string[];
+  options?: Thumbnail[];
+};
+
+export const ImagesStep = (props: StepComponentProps) => {
+  const mediaRootId = "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1";
+  const [selectedFolderId, setSelectedFolderId] = useState<string>(mediaRootId);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const editContext = useEditContext();
+
+  const propName = props.step.propertyName || "images";
+
+  const [showFolderDialog, setShowFolderDialog] = useState<boolean>(false);
+
+  const [selectedFolder, setSelectedFolder] = useState<FullItem>();
+
+  useEffect(() => {
+    if (props.data[propName]?.length > 0) {
+      props.setStepCompleted(true);
+    }
+  }, [props.data]);
+
+  const findMatchingImages = async () => {
+    setIsLoading(true);
+    setError(null);
+    props.setData((prevData) => ({
+      ...prevData,
+      [propName]: [],
+    }));
+
+    try {
+      // First, ask AI for keywords based on the content
+      const aiPromptResult = await executePrompt(
+        [
+          {
+            content: `You are an AI assistant for building a web page. You will later have to create images for the page. 
+                     Please anaylze the provided data and suggest a number of images and specific keywords per image. The keywords will be used to find matching images in the image library.                 
+                     Response JSON format: { images: Image[] } type Image = { title: string,  keywords: string[] }
+                     Input data: ${JSON.stringify(props.data)}
+                     Instructions: ${props.step.instructions}`,
+
+            name: "system",
+            role: "system",
+          },
+        ],
+        editContext!,
+        createWizardAiContext,
+        [""],
+        true,
+        undefined,
+        "o3-mini-low",
+      );
+      const images = JSON.parse(aiPromptResult.content).images;
+
+      // Create an array of promises for all search operations
+      const searchPromises = images.map(async (image: Image) => {
+        const searchResult = await executeSearch({
+          query: image.keywords.join(" "),
+          rootItemIds: selectedFolderId ? [selectedFolderId] : undefined,
+          editContext: editContext!,
+          maxResults: 6,
+          index: "media",
+          skipValidation: true,
+        });
+
+        if (searchResult.type === "success") {
+          const thumbnails = (searchResult.data as Thumbnail[]).map(
+            (thumbnail) => ({
+              name: thumbnail.name,
+              id: thumbnail.id,
+              thumbUrl: thumbnail.thumbUrl,
+              description: thumbnail.description,
+            }),
+          );
+
+          props.setInternalState((state: any) => ({
+            ...state,
+            thumbnails: [
+              ...(state.thumbnails || []),
+              ...thumbnails.filter(
+                (newThumb: Thumbnail) =>
+                  !(state.thumbnails || []).some(
+                    (existingThumb: Thumbnail) =>
+                      existingThumb.id === newThumb.id,
+                  ),
+              ),
+            ],
+          }));
+
+          props.setData((prevData) => ({
+            ...prevData,
+
+            [propName]: [
+              ...(prevData[propName] || []),
+              {
+                ...image,
+                options: thumbnails,
+              },
+            ],
+          }));
+        } else {
+          setError(
+            `Error searching for images: ${searchResult.response.statusText}`,
+          );
+        }
+      });
+
+      // Wait for all search operations to complete
+      await Promise.all(searchPromises);
+    } catch (err) {
+      setError(
+        `Error finding matching images: ${
+          err instanceof Error ? err.message : String(err)
+        }`,
+      );
+      console.error("Error in findMatchingImages:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const loadFolder = async () => {
+      if (selectedFolderId) {
+        const item = await editContext?.itemsRepository.getItem({
+          id: selectedFolderId,
+          language: "en",
+          version: 1,
+        });
+        console.log("ITEM", item);
+        setSelectedFolder(item);
+      }
+    };
+    loadFolder();
+  }, [selectedFolderId]);
+
+  console.log("FOLDER", selectedFolder, selectedFolderId);
+
+  const panels: SplitterPanel[] = [
+    {
+      name: "Settings",
+      defaultSize: 400,
+      content: (
+        <div className="flex h-full flex-col gap-2 pr-6 pb-4">
+          <div className="relative mb-2 rounded-md border border-gray-400 bg-white p-4">
+            <div className="mb-2 text-sm font-bold text-gray-800">
+              Image library folder
+            </div>
+            {selectedFolder && (
+              <div className="mb-2 text-sm text-gray-500">
+                {selectedFolder.path}
+              </div>
+            )}
+            <Button
+              label="Change Folder"
+              onClick={() => {
+                setShowFolderDialog(true);
+              }}
+            />
+            <Dialog
+              header="Select Folder"
+              visible={showFolderDialog}
+              onHide={() => {
+                setShowFolderDialog(false);
+              }}
+              style={{ width: "50vw", height: "50vh" }}
+            >
+              <div className="relative flex h-full flex-col">
+                <ScrollingContentTree
+                  rootItemId={mediaRootId}
+                  onSelectionChange={(selection) => {
+                    const selectedNode = selection[0] as ItemTreeNodeData;
+                    if (selectedNode) setSelectedFolderId(selectedNode.id);
+                    else setSelectedFolderId(mediaRootId);
+                    setShowFolderDialog(false);
+                  }}
+                />
+              </div>
+            </Dialog>
+          </div>
+          <ActionButton
+            onClick={findMatchingImages}
+            isLoading={isLoading}
+            disabled={isLoading}
+            loadingText="Searching..."
+          >
+            Find Matching Images
+          </ActionButton>
+        </div>
+      ),
+    },
+    {
+      name: "Images",
+      defaultSize: "auto",
+      content: (
+        <div className="absolute inset-0 overflow-auto">
+          <div className="flex flex-col gap-4 p-4 pt-0">
+            <div className="flex items-center gap-4">
+              {error && <div className="text-red-500">{error}</div>}
+
+              {props.data[propName]?.length > 0 && (
+                <div className="flex flex-col gap-4">
+                  {props.data[propName]?.map((image: Image, index: number) => (
+                    <span
+                      key={index}
+                      className={classNames(
+                        "rounded border border-gray-400 bg-white p-4 text-sm",
+                        index % 2 === 0
+                          ? "animate-fadeRight"
+                          : "animate-fadeLeft",
+                      )}
+                    >
+                      <div className="mb-3 text-lg">{image.title}</div>
+                      <div className="flex flex-wrap gap-5">
+                        {image.options?.map(
+                          (option: Thumbnail, thumbnailIndex: number) => (
+                            <div
+                              key={thumbnailIndex}
+                              className="relative flex h-28 w-28 cursor-pointer items-center justify-center border border-gray-400"
+                              onClick={() => {
+                                props.setData((prevData) => ({
+                                  ...prevData,
+                                  [propName]: prevData[propName].map(
+                                    (img: Image, imgIndex: number) =>
+                                      ({
+                                        ...img,
+                                        options:
+                                          imgIndex !== index
+                                            ? img.options
+                                            : img.options?.map(
+                                                (
+                                                  option,
+                                                  optionIndex: number,
+                                                ) =>
+                                                  optionIndex === thumbnailIndex
+                                                    ? {
+                                                        ...option,
+                                                        selected:
+                                                          !option.selected,
+                                                      }
+                                                    : option,
+                                              ),
+                                      }) as Image,
+                                  ),
+                                }));
+                              }}
+                            >
+                              <img
+                                key={thumbnailIndex}
+                                src={option.thumbUrl}
+                                alt={option.name}
+                              />
+                              <div
+                                className={classNames(
+                                  "peer ring-offset-background focus-visible:ring-ring pointer-events-none absolute right-1 bottom-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+                                  option.selected
+                                    ? "text-canvas-pink border-canvas-pink bg-white"
+                                    : "",
+                                )}
+                              >
+                                {option.selected && (
+                                  <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  >
+                                    <path d="M20 6 9 17l-5-5"></path>
+                                  </svg>
+                                )}
+                              </div>
+                            </div>
+                          ),
+                        )}
+                      </div>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  return <Splitter panels={panels} />;
+};

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

@@ -0,0 +1,228 @@
+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.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,
+        [""],
+        true,
+        { signal: localAbortController.signal },
+        "o3-mini-low",
+        (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.instructions) {
+      setCustomInstructions(step.instructions);
+    }
+  }, [step.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="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 h-48"
+          disabled={isLoading}
+        />
+      </div>
+    );
+  };
+
+  const settingsPanel: SplitterPanel = {
+    name: "Settings",
+    collapsible: false,
+    defaultSize: 450,
+    content: (
+      <div className="absolute inset-0 overflow-auto flex flex-col h-full 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="bg-red-500 text-white px-2 py-1 rounded text-xs hover:bg-red-600 flex items-center gap-1"
+            >
+              <span className="pi pi-times"></span>
+              Abort
+            </button>
+          )}
+        </div>
+        <div className="text-xs text-gray-500 p-2">{message}</div>
+      </div>
+    ),
+  };
+
+  const layoutPanel: SplitterPanel = {
+    name: "Layout",
+    defaultSize: "auto",
+    collapsible: false,
+    content: (
+      <div className="absolute inset-2 flex flex-col justify-center items-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"
+    />
+  );
+}