@alpaca-editor/core 1.0.3896 → 1.0.3898

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

@@ -11,6 +11,9 @@ import { LanguageSelector } from "../../editor/menubar/LanguageSelector";
 import { InputText } from "primereact/inputtext";
 import { InputTextarea } from "primereact/inputtextarea";
 import { getItemDescriptor } from "../../editor/utils";
+import { WizardBox } from "../WizardBox";
+import { WizardBoxConnector } from "../WizardBoxConnector";
+import { Settings, FileText } from "lucide-react";
 
 export function CreatePage({
   wizard,
@@ -192,92 +195,135 @@ export function CreatePage({
   };
 
   return (
-    <div className="pr-6" style={{ viewTransitionName: "page-properties" }}>
-      <div className="mb-4">
-        <div className="mb-1 text-sm font-medium">Target Parent Item</div>
-        <div className="mb-4 break-after-all text-xs">
-          {fullParentItem?.path}
+    <div className="flex h-full">
+      <WizardBox
+        title="Page Setup"
+        icon={<Settings />}
+        description="Configure the target location and language for your new page"
+        className="w-96"
+      >
+        <div className="flex h-full flex-col items-stretch">
+          <div className="relative flex-1">
+            <div className="absolute inset-0 overflow-y-auto pr-6">
+              <div className="mb-4">
+                <div className="mb-1 text-sm font-medium">
+                  Target Parent Item
+                </div>
+                <div className="mb-4 break-after-all text-xs">
+                  {fullParentItem?.path}
+                </div>
+              </div>
+              <div className="relative mb-4">
+                <label
+                  htmlFor="language"
+                  className="mb-1 block text-sm font-medium"
+                >
+                  Language
+                </label>
+                <div className="w-fit">
+                  <LanguageSelector
+                    selectedLanguage={language}
+                    darkMode={true}
+                    disabled={isBuilding || isGenerating}
+                    onLanguageSelected={(language) =>
+                      setLanguage(language.languageCode)
+                    }
+                    showAllLanguages={true}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-      <div className="relative mb-4">
-        <label htmlFor="language" className="mb-1 block text-sm font-medium">
-          Language
-        </label>
-        <div className="w-fit">
-          <LanguageSelector
-            selectedLanguage={language}
-            darkMode={true}
-            disabled={isBuilding || isGenerating}
-            onLanguageSelected={(language) =>
-              setLanguage(language.languageCode)
-            }
-            showAllLanguages={true}
-          />
-        </div>
-      </div>
-      <div className="mb-4">
-        <label htmlFor="pageName" className="mb-1 block text-sm font-medium">
-          Page Name
-        </label>
-        <InputText
-          id="pageName"
-          type="text"
-          disabled={!!pageItem || isBuilding || isGenerating}
-          className="w-full rounded border p-2 text-sm"
-          value={pageModel.name}
-          onChange={(e) => handleInputChange("name", e.target.value)}
-          placeholder="Enter page name"
-        />
-        {validationMessage && (
-          <div className="mt-2 text-sm text-red-500">{validationMessage}</div>
-        )}
-      </div>
+      </WizardBox>
+      <WizardBoxConnector className="mt-6" />
+      <WizardBox
+        title="Page Details"
+        icon={<FileText />}
+        description="Define the page name and meta information for SEO optimization"
+        className="flex-1"
+      >
+        <div className="flex h-full flex-col items-stretch">
+          <div className="relative flex-1">
+            <div className="absolute inset-0 overflow-y-auto pr-6">
+              <div className="mb-4">
+                <label
+                  htmlFor="pageName"
+                  className="mb-1 block text-sm font-medium"
+                >
+                  Page Name
+                </label>
+                <InputText
+                  id="pageName"
+                  type="text"
+                  disabled={!!pageItem || isBuilding || isGenerating}
+                  className="w-full rounded border p-2 text-sm"
+                  value={pageModel.name}
+                  onChange={(e) => handleInputChange("name", e.target.value)}
+                  placeholder="Enter page name"
+                />
+                {validationMessage && (
+                  <div className="mt-2 text-sm text-red-500">
+                    {validationMessage}
+                  </div>
+                )}
+              </div>
 
-      <div className="mb-4">
-        <label
-          htmlFor="metaDescription"
-          className="mb-1 block text-sm font-medium"
-        >
-          Meta Description
-        </label>
-        <InputTextarea
-          id="metaDescription"
-          disabled={!!pageItem || isBuilding || isGenerating}
-          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"
-          disabled={!!pageItem || isBuilding || isGenerating}
-          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>
-      {!pageItem && (
-        <ActionButton
-          disabled={isBuilding || isGenerating || !!validationMessage}
-          className="flex-1"
-          onClick={() => {
-            createPage();
-          }}
-          isLoading={isBuilding || isGenerating}
-          loadingText={isGenerating ? "Generating..." : "Create Page"}
-        >
-          Create Page
-        </ActionButton>
-      )}
+              <div className="mb-4">
+                <label
+                  htmlFor="metaDescription"
+                  className="mb-1 block text-sm font-medium"
+                >
+                  Meta Description
+                </label>
+                <InputTextarea
+                  id="metaDescription"
+                  disabled={!!pageItem || isBuilding || isGenerating}
+                  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"
+                  disabled={!!pageItem || isBuilding || isGenerating}
+                  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>
+          {!pageItem && (
+            <div className="py-2">
+              <ActionButton
+                disabled={isBuilding || isGenerating || !!validationMessage}
+                className="w-full"
+                onClick={() => {
+                  createPage();
+                }}
+                isLoading={isBuilding || isGenerating}
+                loadingText={isGenerating ? "Generating..." : "Create Page"}
+              >
+                Create Page
+              </ActionButton>
+            </div>
+          )}
+        </div>
+      </WizardBox>
     </div>
   );
 }

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

@@ -1,4 +1,3 @@
-import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
 import { StepComponentProps } from "../../config/types";
 
 import { CreatePage } from "./CreatePage";
@@ -8,7 +7,7 @@ import {
   useEditContext,
   useModifiedFieldsContext,
 } from "../../editor/client/editContext";
-import { classNames } from "primereact/utils";
+
 import { ComponentTypeSelector } from "./ComponentTypesSelector";
 import { ActionButton } from "../../components/ActionButton";
 import { convertPageSchemaToWizardComponents } from "./schema";
@@ -21,6 +20,10 @@ import { useThrottledCallback } from "use-debounce";
 import { InputTextarea } from "primereact/inputtextarea";
 
 import { convertToAiPageModel } from "../../editor/ai/aiPageModel";
+import { WizardBox } from "../WizardBox";
+import { Layers, PanelsTopLeft } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { WizardBoxConnector } from "../WizardBoxConnector";
 
 export function CreatePageAndLayoutStep({
   wizard,
@@ -164,8 +167,6 @@ export function CreatePageAndLayoutStep({
         editContext,
       );
 
-      console.log("MODEL: ", existingPageModel);
-
       const result = await executePrompt(
         [
           {
@@ -184,14 +185,15 @@ export function CreatePageAndLayoutStep({
                 .map((c) => c.type)
                 .join(", ")}
               Tell the user your reasoning in the message field.
-              Fill image ids into picture / image fields.
+              If the user provided image ids, fill them into picture / image fields with an "id:" prefix. The image id needs to be guid.
+              If you dont have a matching image id, provide a description of a picture that you would like to use with a "generate:" prefix instead.
               The language of the page is ${pageItem.descriptor.language}.
               Input data: ${JSON.stringify(data)}`,
 
             name: "system",
             role: "system",
           },
-        ],
+        ], //Fill image ids into picture / image fields.
         editContext,
         createWizardAiContext,
         { allowedFunctions: [] },
@@ -247,11 +249,15 @@ export function CreatePageAndLayoutStep({
     );
   };
 
-  const panels: SplitterPanel[] = [
-    {
-      name: "settings",
-      content: (
-        <div className="flex h-full flex-col">
+  return (
+    <div className="flex h-full">
+      <WizardBox
+        title="Generate content"
+        icon={<Layers />}
+        description="Generate content for the page"
+        className="w-96"
+      >
+        <div className="flex h-full flex-col items-stretch">
           <div className="relative flex-1">
             <div className="absolute inset-0 overflow-y-auto pr-6">
               <div className="text-sm font-medium">Page item</div>
@@ -272,8 +278,8 @@ export function CreatePageAndLayoutStep({
               {customInstructionsPanel()}
             </div>
           </div>
-          <div className="p-2">
-            <div className="flex gap-2">
+          <div className="py-2">
+            <div className="flex w-full gap-2">
               <ActionButton
                 onClick={createLayout}
                 disabled={
@@ -282,13 +288,19 @@ export function CreatePageAndLayoutStep({
                   !data.selectedComponentTypes ||
                   data.selectedComponentTypes.length === 0
                 }
-                isLoading={isLoading || isCreatingComponents}
+                isLoading={
+                  isLoading ||
+                  isCreatingComponents ||
+                  !!editContext?.activeFieldActions.find(
+                    (action) => action.state === "running",
+                  )
+                }
                 loadingText="Working"
-                className="flex-1"
+                className="w-full flex-1"
               >
                 {internalState.componentsCreated
-                  ? "Reset and Regenerate Layout"
-                  : "Generate Layout"}
+                  ? "Reset and regenerate content"
+                  : "Generate content"}
               </ActionButton>
 
               {isLoading && (
@@ -303,13 +315,21 @@ export function CreatePageAndLayoutStep({
             {message && <div className="mt-2 text-xs">{message}</div>}
           </div>
         </div>
-      ),
-      defaultSize: 400,
-    },
-    {
-      name: "layout",
-      content: (
-        <div className={classNames("px-6", pageLoaded ? "h-full" : "h-0")}>
+      </WizardBox>
+      <WizardBoxConnector className="mt-6" />
+      <WizardBox
+        title="Page preview"
+        icon={<PanelsTopLeft />}
+        description="After finalizing the page, you can edit, further enhance the content and share the page with your team for collaboration."
+        noPadding={true}
+        className="flex-1"
+      >
+        <div
+          className={cn(
+            "border-t border-gray-200",
+            pageLoaded ? "h-full" : "h-0",
+          )}
+        >
           <PageViewer
             name="single"
             compareView={false}
@@ -318,12 +338,9 @@ export function CreatePageAndLayoutStep({
             pageViewContext={editContext!.pageView}
           />
         </div>
-      ),
-      defaultSize: "auto",
-    },
-  ];
-
-  return <Splitter panels={panels}></Splitter>;
+      </WizardBox>
+    </div>
+  );
 }
 
 /**

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

@@ -1,31 +1,59 @@
 import { classNames } from "primereact/utils";
-import { SparkleIconBig } from "../../editor/ui/Icons";
-import { SparkleIconSmall } from "../../editor/ui/Icons";
+import { Logo } 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 />
+    <>
+      <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="mb-20">
+          <div className="flex justify-center">
+            <div className="h-64 w-64 animate-pulse">
+              <div className="magic-logo h-full w-full">
+                <Logo />
+              </div>
+            </div>
+          </div>
         </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 className="text-theme-secondary text-center text-sm font-medium">
+          {title}
         </div>
       </div>
-    </div>
+    </>
   );
 }