@alpaca-editor/core 1.0.3906 → 1.0.3908

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

@@ -18,6 +18,7 @@ type Thumbnail = {
   id: string;
   name: string;
   thumbUrl?: string;
+  previewUrl?: string;
   description?: string;
   selected?: boolean;
 };
@@ -28,6 +29,43 @@ type Image = {
   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);
@@ -78,7 +116,7 @@ export const ImagesStep = (props: StepComponentProps) => {
         createWizardAiContext,
         {},
         undefined,
-        "o3-mini-low",
+        "gpt-4.1",
       );
       const images = JSON.parse(aiPromptResult.content).images;
 
@@ -99,6 +137,7 @@ export const ImagesStep = (props: StepComponentProps) => {
               name: thumbnail.name,
               id: thumbnail.id,
               thumbUrl: thumbnail.thumbUrl,
+              previewUrl: thumbnail.previewUrl,
               description: thumbnail.description,
             }),
           );
@@ -314,8 +353,9 @@ export const ImagesStep = (props: StepComponentProps) => {
                                   }));
                                 }}
                               >
-                                <img
-                                  src={option.thumbUrl}
+                                <ResponsiveImage
+                                  thumbUrl={option.thumbUrl}
+                                  previewUrl={option.previewUrl}
                                   alt={option.name}
                                   className="h-full w-full object-cover"
                                 />

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

@@ -89,7 +89,7 @@ export function LayoutStep({
         createWizardAiContext,
         {},
         { signal: localAbortController.signal },
-        "o3-mini-low",
+        "gpt-4.1",
         (response) => {
           try {
             const newLayout = JSON.parse(response.content) as WizardPageModel;

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["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

@@ -91,7 +91,7 @@ export function SelectStep({
         createWizardAiContext,
         { allowedFunctions: [] },
         undefined,
-        step.aiModel || "o3-mini-low",
+        step.aiModel || "gpt-4.1",
       );
 
       // Parse the result and set options

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3906";
-export const buildDate = "2025-05-28 01:46:33";
+export const version = "1.0.3908";
+export const buildDate = "2025-05-29 01:53:46";

package/src/splash-screen/NewPage.tsx

@@ -10,7 +10,6 @@ import {
   loadInsertOptions,
 } from "../editor/services/editService";
 import { InputText } from "primereact/inputtext";
-import { Button } from "primereact/button";
 import { getAbsoluteIconUrl, getItemDescriptor } from "../editor/utils";
 import { classNames } from "primereact/utils";
 import { useEditContext } from "../client-components";
@@ -22,6 +21,10 @@ import { getWizards } from "../page-wizard/service";
 import { Wizard } from "../page-wizard/PageWizard";
 import { Card } from "../components/ui/card";
 import { CardConnector } from "../components/ui/CardConnector";
+import { Logo } from "../editor/ui/Icons";
+import { ActionButton } from "../components/ActionButton";
+import { FilePenLine, Palette } from "lucide-react";
+
 export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
   const [selectedItem, setSelectedItem] = useState<ItemDescriptor | null>(null);
   const [isValid, setIsValid] = useState<boolean>(false);
@@ -145,121 +148,147 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
   };
 
   return (
-    <div className="flex h-full flex-col bg-gray-50 p-4 md:flex-row">
-      <div className="tour-pick-location flex-1">
-        <Card
-          icon={<i className="pi pi-map-marker text-sm"></i>}
-          title="Pick Location"
-          description="Select where to create your new page"
-          noPadding
-          className="h-full"
-        >
-          <div className="relative h-full">
-            <div className="absolute inset-0 overflow-auto">
-              <ScrollingContentTree
-                selectedItemId={selectedItem?.id || selectedItemId}
-                onSelectionChange={(selection) => {
-                  const selected = selection[0] as ItemTreeNodeData;
-                  if (selected) setSelectedItem(selected);
-                }}
-              />
-            </div>
+    <div className="flex h-full flex-col gap-6 bg-gray-100 p-4 md:p-8">
+      {/* Header with icon, title, description, and back button */}
+      <div className="flex gap-4">
+        <Logo className="h-8 w-8" />
+        <div className="flex-1 text-neutral-800">
+          <div className="text-lg font-semibold md:text-xl">
+            Create New Page
           </div>
-        </Card>
-      </div>
+          <div className="mt-1 text-xs font-light md:text-sm">
+            Select a location, choose a template or wizard, and name your new
+            page
+          </div>
+        </div>
 
-      {/* Card Connector - only visible when location is selected */}
-      {selectedItem && <CardConnector />}
+        <div className="flex items-start">
+          <ActionButton onClick={() => editContext?.switchView("open-page")}>
+            Open Existing
+          </ActionButton>
+        </div>
+      </div>
 
-      {/* Second card - only visible when location is selected */}
-      {selectedItem && (
-        <div className="flex flex-1 flex-col">
+      {/* Content */}
+      <div className="flex flex-1 flex-col md:flex-row">
+        <div className="tour-pick-location flex-1">
           <Card
-            icon={<i className="pi pi-palette text-sm"></i>}
-            title="Choose Template or Wizard"
-            description="Select a template or wizard to create your page"
+            icon={<i className="pi pi-map-marker text-sm"></i>}
+            title="Pick Location"
+            description="Select where to create your new page"
+            noPadding
+            className="h-full"
           >
-            <div className="tour-choose-template">
-              <div className="flex min-h-12 flex-wrap gap-3">
-                {!insertOptions?.length && (
-                  <div>No page templates available here.</div>
-                )}
-                {insertOptionsAndWizards?.map((option) => (
-                  <div
-                    key={option.id}
-                    onClick={() => setSelectedTemplate(option.id)}
-                    className={classNames(
-                      "mb-2 flex cursor-pointer flex-col items-center rounded bg-gray-100 p-2 text-sm",
-                      selectedTemplate === option.id
-                        ? "tour-selected-template bg-gray-200 outline-2 outline-offset-2 outline-gray-200"
-                        : "bg-gray-100",
-                    )}
-                  >
-                    {
-                      <img
-                        src={getAbsoluteIconUrl(option.icon)}
-                        width="32"
-                        height="32"
-                      ></img>
-                    }
-                    {option.name}
-                  </div>
-                ))}
+            <div className="h-full px-4 pb-4 md:px-6">
+              <div className="relative h-full">
+                <div className="absolute inset-0 overflow-auto">
+                  <ScrollingContentTree
+                    selectedItemId={selectedItem?.id || selectedItemId}
+                    onSelectionChange={(selection) => {
+                      const selected = selection[0] as ItemTreeNodeData;
+                      if (selected) setSelectedItem(selected);
+                    }}
+                  />
+                </div>
               </div>
-              {selectedTemplate &&
-                wizards?.find((x) => x.id === selectedTemplate) && (
-                  <div className="mt-4">
-                    <Button
-                      onClick={launchWizard}
-                      label="Start Wizard"
-                      id="launch-wizard-button"
-                    />
-                  </div>
-                )}
             </div>
           </Card>
+        </div>
 
-          {/* Name Your Page card - only visible when template is selected */}
-          {selectedTemplate &&
-            insertOptions?.find((x) => x.id === selectedTemplate) && (
-              <>
-                <CardConnector direction="vertical" />
-                <Card
-                  icon={<i className="pi pi-file-edit text-sm"></i>}
-                  title="Name Your Page"
-                  description="Enter a name for your new page"
-                >
-                  <div>
-                    <InputText
-                      className="w-full"
-                      value={name}
-                      id="new-page-name"
-                      onChange={(e) => setName(e.target.value)}
-                      onKeyDown={(ev) => {
-                        if (ev.key === "Enter" && isValid) handleOk();
-                      }}
-                      data-testid="new-page-name"
-                      placeholder="Enter page name..."
-                    />
-                    {validationMessage && (
-                      <div className="mt-2 text-red-500">
-                        {validationMessage}
-                      </div>
-                    )}
+        {/* Card Connector - only visible when location is selected */}
+        {selectedItem && <CardConnector />}
+
+        {/* Second card - only visible when location is selected */}
+        {selectedItem && (
+          <div className="flex flex-1 flex-col">
+            <Card
+              icon={<Palette className="h-4 w-4" />}
+              title="Choose Template or Wizard"
+              description="Select a template or wizard to create your page"
+            >
+              <div className="tour-choose-template">
+                <div className="flex min-h-8 flex-wrap gap-3">
+                  {!insertOptions?.length && (
+                    <div className="text-sm text-gray-500">
+                      You cannot insert content at the selected location.
+                    </div>
+                  )}
+                  {insertOptionsAndWizards?.map((option) => (
+                    <div
+                      key={option.id}
+                      onClick={() => setSelectedTemplate(option.id)}
+                      className={classNames(
+                        "hover:border-theme-secondary flex h-23 min-w-34 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-gray-200 text-xs",
+                        selectedTemplate === option.id
+                          ? "bg-theme-secondary-light border-theme-secondary"
+                          : "bg-white",
+                      )}
+                    >
+                      {
+                        <img
+                          src={getAbsoluteIconUrl(option.icon)}
+                          width="32"
+                          height="32"
+                        ></img>
+                      }
+                      {option.name}
+                    </div>
+                  ))}
+                </div>
+                {selectedTemplate &&
+                  wizards?.find((x) => x.id === selectedTemplate) && (
                     <div className="mt-4">
-                      <Button
-                        onClick={handleOk}
-                        label="Create"
-                        disabled={!isValid}
-                        id="create-new-page-button"
+                      <ActionButton onClick={launchWizard} isLoading={false}>
+                        Start wizard
+                      </ActionButton>
+                    </div>
+                  )}
+              </div>
+            </Card>
+
+            {/* Name Your Page card - only visible when template is selected */}
+            {selectedTemplate &&
+              insertOptions?.find((x) => x.id === selectedTemplate) && (
+                <>
+                  <CardConnector direction="vertical" />
+                  <Card
+                    icon={<FilePenLine />}
+                    title="Name Your Page"
+                    description="Enter a name for your new page"
+                  >
+                    <div>
+                      <InputText
+                        className="w-full rounded p-1.5 text-xs"
+                        value={name}
+                        id="new-page-name"
+                        onChange={(e) => setName(e.target.value)}
+                        onKeyDown={(ev) => {
+                          if (ev.key === "Enter" && isValid) handleOk();
+                        }}
+                        data-testid="new-page-name"
+                        placeholder="Enter page name..."
                       />
+                      {validationMessage && (
+                        <div className="mt-2 text-red-500">
+                          {validationMessage}
+                        </div>
+                      )}
+                      <div className="mt-4">
+                        <ActionButton
+                          onClick={handleOk}
+                          disabled={!isValid}
+                          isLoading={false}
+                        >
+                          Create page
+                        </ActionButton>
+                      </div>
                     </div>
-                  </div>
-                </Card>
-              </>
-            )}
-        </div>
-      )}
+                  </Card>
+                </>
+              )}
+          </div>
+        )}
+      </div>
     </div>
   );
 }