@alpaca-editor/core 1.0.4008 → 1.0.4010

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

@@ -27,7 +27,7 @@ import { useThrottledCallback } from "use-debounce";
 import { InputTextarea } from "primereact/inputtextarea";
 import { InputText } from "primereact/inputtext";
 import { LanguageSelector } from "../../editor/menubar/LanguageSelector";
-import { evaluateDataExpressionToObject } from "../utils/dataAccessor";
+import { getFilteredInputData } from "../utils/dataAccessor";
 
 import { WizardBox } from "../WizardBox";
 import { Wand2, PanelsTopLeft, Settings, Blocks } from "lucide-react";
@@ -316,8 +316,9 @@ export function ContentStep({
     if (!editContext) return;
 
     const generatePageName = async () => {
-      const metaInstructions =
-        step.fields["Instructions for generating item name and meta fields"];
+      const pageNameInstructions =
+        step.fields.pageNamePrompt ||
+        "The item name should be a valid sitecore item name. Spaces are allowed but no special characters or Umlaute.";
 
       setIsGenerating(true);
 
@@ -327,8 +328,7 @@ export function ContentStep({
         const result = await executePrompt(
           [
             {
-              content: `${metaInstructions?.trim()} Reply with a json object of type PageModel = { name: string; };               
-              The item name should be a valid sitecore item name. Spaces are allowed but no special characters or Umlaute.
+              content: `${pageNameInstructions?.trim()} Reply with a json object of type PageModel = { name: string; };                       
               The language of the page is ${language}.
               Input data: ${JSON.stringify(data)}`,
               name: "system",
@@ -560,25 +560,7 @@ export function ContentStep({
       console.log("Existing page model: ", existingPageModel);
 
       // Filter input data based on "Input Properties" field if specified
-      const getFilteredData = () => {
-        const inputProperties = step.fields.inputProperties;
-        console.log("Input properties: ", inputProperties);
-        if (!inputProperties || !inputProperties.trim()) {
-          return data; // Return all data if no input properties specified
-        }
-
-        // Use evaluateDataExpressionToObject to handle both simple properties and JavaScript expressions
-        const result = evaluateDataExpressionToObject(inputProperties, data);
-
-        if (result.error) {
-          console.warn("Error evaluating input properties:", result.error);
-          return data; // Fall back to all data if evaluation fails
-        }
-
-        return result.value ?? data; // Return evaluated result or fall back to all data
-      };
-
-      const inputData = getFilteredData();
+      const inputData = getFilteredInputData(step, data);
 
       const prompt = [
         {
@@ -604,9 +586,7 @@ export function ContentStep({
               .map((c) => c.type)
               .join(", ")}
             Tell the user your reasoning in the message field.
-            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.
-             In any case the field value must start with "id:" or "generate:", nothing else. Do not inject json into picture fields even if the existing value is json.
+           
             The language of the page is ${editContextRef.current!.page!.item!.language}.
             Input data: ${JSON.stringify(inputData)}`,
 
@@ -615,8 +595,9 @@ export function ContentStep({
         },
       ];
 
+      console.log("PAGE WIZARD DATA: ", data);
+      console.log("PAGE WIZARD INPUTDATA: ", inputData);
       console.log("PAGE WIZARD PROMPT: ", prompt?.[0]?.content);
-      console.log("PAGE WIZARD DATA: ", inputData);
       console.log("PAGE WIZARD page fields: ", schema.pageFields);
       console.log("PAGE WIZARD schema: ", filteredSchema);
 
@@ -650,7 +631,7 @@ export function ContentStep({
         const lastMessage = result.messages[result.messages.length - 1];
         if (lastMessage && lastMessage.content) {
           const finalLayout = JSON.parse(lastMessage.content);
-          console.log("RESULT LAYOUT: ", result, finalLayout);
+          console.log("RESULT LAYOUT: ", finalLayout);
           setPageModel((prev) => mergeLayout(prev, finalLayout));
         }
       }
@@ -698,8 +679,8 @@ export function ContentStep({
           <div className="flex flex-col items-stretch">
             <div className="relative flex-1">
               {isGenerating ? (
-                <div className="flex h-full items-center justify-center">
-                  <Generate title="Generating page name..." />
+                <div className="flex h-full items-center justify-center pb-4">
+                  <Generate title="Generating page name..." size="medium" />
                 </div>
               ) : (
                 <>

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

@@ -3,9 +3,10 @@ import { Logo } from "../../editor/ui/Icons";
 
 interface GenerateProps {
   title: string;
+  size?: "medium" | "large";
 }
 
-function Generate({ title }: GenerateProps) {
+function Generate({ title, size }: GenerateProps) {
   return (
     <>
       <style>
@@ -40,7 +41,7 @@ function Generate({ title }: GenerateProps) {
           "animate-fadeIn flex h-full flex-col items-center justify-center transition-all duration-300",
         )}
       >
-        <div className="md:mb-20">
+        <div className={size === "medium" ? "md:mb-5" : "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">

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

@@ -6,7 +6,7 @@ import { createWizardAiContext } from "../service";
 import { ActionButton } from "../../components/ActionButton";
 import Generate from "./Generate";
 import { WizardBox } from "../WizardBox";
-import { WizardBoxConnector } from "../WizardBoxConnector";
+
 import { Settings, Layout, ChevronDown, ChevronRight } from "lucide-react";
 import { InputTextarea } from "primereact/inputtextarea";
 import { evaluateDataExpression, setDataProperty } from "../utils/dataAccessor";
@@ -15,6 +15,7 @@ type StructureElement = {
   type: string;
   content: string;
   description?: string;
+  headline?: string;
 };
 
 export function StructureStep({
@@ -79,6 +80,28 @@ export function StructureStep({
     }
   }, [data, inputProperties]);
 
+  // Auto-execute structure generation on component mount if no existing structure
+  useEffect(() => {
+    const { value: existingStructure } = evaluateDataExpression(
+      inputProperties,
+      data,
+    );
+
+    // Only auto-execute if:
+    // 1. No existing structure
+    // 2. We have edit context
+    // 3. We have system instructions configured
+    // 4. Not already loading
+    if (
+      !existingStructure &&
+      editContext &&
+      step.fields.systemInstructions &&
+      !loading
+    ) {
+      generateStructure();
+    }
+  }, [editContext, step.fields.systemInstructions]); // Dependencies that indicate readiness
+
   // Generate structure using AI
   const generateStructure = async () => {
     if (!editContext) {
@@ -207,7 +230,7 @@ ${JSON.stringify(data)}`;
   };
 
   if (loading) {
-    return <Generate title="Generating page structure..." />;
+    return <Generate title="Analyzing content..." />;
   }
 
   return (
@@ -298,7 +321,7 @@ ${JSON.stringify(data)}`;
                         >
                           {element.description && (
                             <p className="text-sm font-medium text-gray-700">
-                              {element.description}
+                              {element.headline || element.description}
                             </p>
                           )}
                           <p className="text-xs text-blue-600 hover:text-blue-800">

package/src/page-wizard/utils/dataAccessor.ts

@@ -273,3 +273,29 @@ export function useDataExpression<T = any>(
 ): DataAccessResult<T> {
   return evaluateDataExpression<T>(expression, data);
 }
+
+/**
+ * Filters input data based on the "inputProperties" field from a wizard step
+ * @param step - The wizard step containing the inputProperties field
+ * @param data - The data object to filter
+ * @returns Filtered data object or original data if no input properties specified
+ */
+export function getFilteredInputData(
+  step: { fields: { [key: string]: string } },
+  data: any,
+): any {
+  const inputProperties = step.fields.inputProperties;
+  if (!inputProperties || !inputProperties.trim()) {
+    return data; // Return all data if no input properties specified
+  }
+
+  // Use evaluateDataExpressionToObject to handle both simple properties and JavaScript expressions
+  const result = evaluateDataExpressionToObject(inputProperties, data);
+
+  if (result.error) {
+    console.warn("Error evaluating input properties:", result.error);
+    return data; // Fall back to all data if evaluation fails
+  }
+
+  return result.value ?? data; // Return evaluated result or fall back to all data
+}

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4008";
-export const buildDate = "2025-07-18 01:54:14";
+export const version = "1.0.4010";
+export const buildDate = "2025-07-22 01:46:42";