@alpaca-editor/core 1.0.3939 → 1.0.3942

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

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

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

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

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