@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,34 @@
+import { WizardField } from "../PageWizard";
+
+interface EditButtonProps {
+  field: WizardField;
+  onEdit: () => void;
+  className?: string;
+}
+
+export function EditButton({ field, onEdit, className = "" }: EditButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onEdit}
+      className={`inline-flex items-center justify-center p-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${className}`}
+      aria-label={`Edit ${field.name || "field"}`}
+      title={`Edit ${field.name || "field"}`}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-4 w-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+        />
+      </svg>
+    </button>
+  );
+}

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,60 @@
+import { classNames } from "primereact/utils";
+import { Logo } from "../../editor/ui/Icons";
+
+interface GenerateProps {
+  title: string;
+}
+
+function Generate({ title }: GenerateProps) {
+  return (
+    <>
+      <style>
+        {`
+          @keyframes colorShift {
+            0% { color: #9650FB; }
+            25% { color: #FF6B9D; }
+            50% { color: #4ECDC4; }
+            75% { color: #45B7D1; }
+            100% { color: #9650FB; }
+          }
+          
+          @keyframes sparkle {
+            0%, 100% { 
+              transform: scale(1);
+              filter: drop-shadow(0 0 20px currentColor) brightness(1);
+            }
+            50% { 
+              transform: scale(1.1);
+              filter: drop-shadow(0 0 30px currentColor) brightness(1.3);
+            }
+          }
+          
+          .magic-logo {
+            animation: colorShift 3s ease-in-out infinite, sparkle 2s ease-in-out infinite;
+            filter: drop-shadow(0 0 20px currentColor);
+          }
+        `}
+      </style>
+      <div
+        className={classNames(
+          "animate-fadeIn flex h-full flex-col items-center justify-center transition-all duration-300",
+        )}
+      >
+        <div className="md:mb-20">
+          <div className="flex items-center justify-center">
+            <div className="h-48 w-48 animate-pulse md:h-64 md:w-64">
+              <div className="magic-logo h-full w-full">
+                <Logo />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="text-theme-secondary text-center text-sm font-medium">
+          {title}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Generate;

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

@@ -0,0 +1,382 @@
+import { StepComponentProps } from "../../config/types";
+import { useEffect, useState } from "react";
+import { ScrollingContentTree } from "../../editor/ScrollingContentTree";
+import { ItemTreeNodeData } from "../../editor/services/contentService";
+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";
+import { WizardBox } from "../WizardBox";
+import { WizardBoxConnector } from "../WizardBoxConnector";
+import { Settings, Images, ChevronDown, Check } from "lucide-react";
+
+type Thumbnail = {
+  id: string;
+  name: string;
+  thumbUrl?: string;
+  previewUrl?: string;
+  description?: string;
+  selected?: boolean;
+};
+
+type Image = {
+  title: string;
+  keywords: string[];
+  options?: Thumbnail[];
+};
+
+// Responsive image component that chooses the best image size
+const ResponsiveImage = ({
+  thumbUrl,
+  previewUrl,
+  alt,
+  className,
+}: {
+  thumbUrl?: string;
+  previewUrl?: string;
+  alt: string;
+  className?: string;
+}) => {
+  // If we have both URLs, use srcset to let browser choose
+  if (thumbUrl && previewUrl) {
+    return (
+      <img
+        src={thumbUrl} // fallback for older browsers
+        srcSet={`${thumbUrl} 96w, ${previewUrl} 400w`}
+        sizes="(max-width: 640px) calc(50vw - 1rem), (max-width: 768px) calc(33vw - 1rem), calc(16.666vw - 1rem)"
+        alt={alt}
+        className={className}
+        loading="lazy"
+      />
+    );
+  }
+
+  // Fallback to available URL
+  return (
+    <img
+      src={previewUrl || thumbUrl}
+      alt={alt}
+      className={className}
+      loading="lazy"
+    />
+  );
+};
+
+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.fields.propertyName || "images";
+
+  const [showFolderDialog, setShowFolderDialog] = useState<boolean>(false);
+  const [collapsedSections, setCollapsedSections] = useState<Set<number>>(
+    new Set(),
+  );
+
+  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.fields.instructions}`,
+
+            name: "system",
+            role: "system",
+          },
+        ],
+        editContext!,
+        createWizardAiContext,
+        {},
+        undefined,
+        "gpt-4.1",
+      );
+      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,
+              previewUrl: thumbnail.previewUrl,
+              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,
+        });
+
+        setSelectedFolder(item);
+      }
+    };
+    loadFolder();
+  }, [selectedFolderId]);
+
+  function SearchButton() {
+    return (
+      <ActionButton
+        onClick={findMatchingImages}
+        isLoading={isLoading}
+        disabled={isLoading}
+        className="w-full"
+      >
+        Find Matching Images
+      </ActionButton>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col md:flex-row">
+      <WizardBox
+        title="Settings"
+        icon={<Settings />}
+        description="Configure image search settings and find matching images"
+        className="w-96"
+        collapsible="mobileOnly"
+        defaultCollapsed="mobileOnly"
+        footer={<SearchButton />}
+      >
+        <div className="flex h-full flex-col gap-4">
+          <div className="flex-1 overflow-y-auto">
+            <div className="relative mb-4 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="flex h-full flex-col p-1">
+                  <div className="relative flex-1">
+                    <ScrollingContentTree
+                      rootItemId={mediaRootId}
+                      onSelectionChange={(selection) => {
+                        const selectedNode = selection[0] as ItemTreeNodeData;
+                        if (selectedNode) setSelectedFolderId(selectedNode.id);
+                        else setSelectedFolderId(mediaRootId);
+                        setShowFolderDialog(false);
+                      }}
+                    />
+                  </div>
+                </div>
+              </Dialog>
+            </div>
+          </div>
+        </div>
+      </WizardBox>
+      <WizardBoxConnector />
+      <WizardBox
+        title="Images"
+        icon={<Images />}
+        description="Select images from the search results"
+        noPadding={true}
+        className="relative flex-1"
+      >
+        <div className="absolute inset-0 overflow-auto">
+          <div className="p-3 md:p-6">
+            {error && <div className="mb-4 text-red-500">{error}</div>}
+
+            {props.data[propName]?.length > 0 && (
+              <div className="space-y-6">
+                {props.data[propName]?.map((image: Image, index: number) => {
+                  const isCollapsed = collapsedSections.has(index);
+
+                  return (
+                    <div key={index} className="space-y-4">
+                      <button
+                        onClick={() => {
+                          const newCollapsed = new Set(collapsedSections);
+                          if (isCollapsed) {
+                            newCollapsed.delete(index);
+                          } else {
+                            newCollapsed.add(index);
+                          }
+                          setCollapsedSections(newCollapsed);
+                        }}
+                        className="flex w-full items-center justify-between text-left"
+                      >
+                        <h3 className="font-medium text-gray-900 md:text-lg">
+                          {image.title}
+                        </h3>
+                        <ChevronDown
+                          className={classNames(
+                            "h-5 w-5 text-gray-500 transition-transform",
+                            isCollapsed ? "-rotate-90" : "rotate-0",
+                          )}
+                        />
+                      </button>
+
+                      {!isCollapsed && (
+                        <div className="grid grid-cols-6 gap-4">
+                          {image.options?.map(
+                            (option: Thumbnail, thumbnailIndex: number) => (
+                              <div
+                                key={thumbnailIndex}
+                                className={classNames(
+                                  "relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 transition-all",
+                                  option.selected
+                                    ? "border-purple-500 ring-2 ring-purple-200"
+                                    : "border-gray-200 hover:border-gray-300",
+                                )}
+                                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,
+                                    ),
+                                  }));
+                                }}
+                              >
+                                <ResponsiveImage
+                                  thumbUrl={option.thumbUrl}
+                                  previewUrl={option.previewUrl}
+                                  alt={option.name}
+                                  className="h-full w-full object-cover"
+                                />
+                                {option.selected && (
+                                  <div className="absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-purple-500 text-white">
+                                    <Check className="h-4 w-4" />
+                                  </div>
+                                )}
+                              </div>
+                            ),
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </WizardBox>
+    </div>
+  );
+};