@alpaca-editor/core 1.0.4018 → 1.0.4026

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

@@ -25,10 +25,13 @@ import { executePrompt } from "../../editor/services/aiService";
 import { usePageCreator } from "./usePageCreator";
 import { useThrottledCallback } from "use-debounce";
 import { InputTextarea } from "primereact/inputtextarea";
-import { InputText } from "primereact/inputtext";
+import { Input } from "../../components/ui/input";
 import { LanguageSelector } from "../../editor/menubar/LanguageSelector";
 import { EditControls } from "../../editor/menubar/toolbar-sections/EditControls";
-import { getFilteredInputData } from "../utils/dataAccessor";
+import {
+  getFilteredInputData,
+  processPromptTemplate,
+} from "../utils/dataAccessor";
 
 import { WizardBox } from "../WizardBox";
 import { Wand2, PanelsTopLeft, Settings, Blocks } from "lucide-react";
@@ -36,6 +39,16 @@ import { cn } from "../../lib/utils";
 import { WizardBoxConnector } from "../WizardBoxConnector";
 import { ItemDescriptor, FullItem } from "../../editor/pageModel";
 import Generate from "./Generate";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
+import { ChevronDown, Folder, Trash } from "lucide-react";
+import { ScrollingContentTree } from "../../editor/ScrollingContentTree";
+import ItemSearch from "../../editor/ui/ItemSearch";
+import { normalizeGuid } from "../../editor/utils";
+import { classNames } from "primereact/utils";
 
 export function ContentStep({
   wizard,
@@ -69,20 +82,170 @@ export function ContentStep({
     parentItem?.language || "en",
   );
   const [fullParentItem, setFullParentItem] = useState<FullItem>();
+
   const [nameValidation, setNameValidation] = useState<{
     isValid: boolean;
     message?: string;
   }>({ isValid: false });
 
+  // Add target folder selection state
+  const [targetFolder, setTargetFolder] = useState<ItemDescriptor | null>(
+    parentItem || null,
+  );
+
+  const [isSelectingFolder, setIsSelectingFolder] = useState(false);
+  const [folderSelectionResult, setFolderSelectionResult] = useState<{
+    id: string;
+    path: string;
+  } | null>(null);
+  const [showFolderTree, setShowFolderTree] = useState(false);
+
   const modifiedFieldsContext = useModifiedFieldsContext();
 
   const pageCreator = usePageCreator(pageItem, wizard, setPageModel);
 
   if (!parentItem) return "No parent item";
 
+  // Add target folder selection function
+  const selectTargetItem = useCallback(async () => {
+    if (!editContext || !step.fields.targetItemPrompt) return;
+
+    setIsSelectingFolder(true);
+
+    try {
+      const abortController = new AbortController();
+
+      const prompt = step.fields.targetItemPrompt;
+
+      // Process template expressions in the folder selection prompt
+      const templateResult = processPromptTemplate(prompt, data);
+
+      console.log("ContentStep: templateResult", prompt, templateResult.value);
+
+      if (templateResult.error) {
+        console.error(
+          "Template processing error in target item prompt:",
+          templateResult.error,
+        );
+        setMessage(`Template Error: ${templateResult.error}`);
+        setIsSelectingFolder(false);
+        return;
+      }
+
+      const processedPrompt = templateResult.value;
+
+      const result = await executePrompt(
+        [
+          {
+            content: `${processedPrompt?.trim()} 
+            You can use get-children to explore existing items and create-item to create new items if needed.
+            Reply with a json object of type { id: string; path: string; } containing the ID and path of the target item.
+            The language of the content is ${language}.
+            Current parent item: ${fullParentItem?.path || parentItem?.id}
+            `,
+            name: "system",
+            role: "system",
+            id: crypto.randomUUID(),
+          },
+        ],
+        { editContext, createAiContext: createWizardAiContext },
+        {
+          allowedFunctions: ["get-children", "create-item"],
+          model: step.fields.aiModel || "gpt-4.1",
+        },
+        { signal: abortController.signal },
+        (response) => {
+          try {
+            const folderResult = JSON.parse(response.content) as {
+              id: string;
+              path: string;
+            };
+
+            if (folderResult.id && folderResult.path) {
+              setFolderSelectionResult(folderResult);
+              // Update target folder with the selected folder
+              setTargetFolder({
+                id: folderResult.id,
+                language: language,
+              } as ItemDescriptor);
+            }
+          } catch (parseError: unknown) {}
+        },
+      );
+
+      if (result && result.messages && result.messages.length > 0) {
+        const lastMessage = result.messages[result.messages.length - 1];
+        if (lastMessage && lastMessage.content) {
+          const folderResult = JSON.parse(lastMessage.content) as {
+            id: string;
+            path: string;
+          };
+
+          if (folderResult.id && folderResult.path) {
+            setFolderSelectionResult(folderResult);
+            // Update target folder with the selected folder
+            setTargetFolder({
+              id: folderResult.id,
+              language: language,
+            } as ItemDescriptor);
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error selecting target folder", error);
+    } finally {
+      setIsSelectingFolder(false);
+    }
+  }, [
+    editContext,
+    step.fields.selectTargetFolderPrompt,
+    language,
+    parentItem,
+    data,
+  ]);
+
+  const handleFolderSelection = useCallback(
+    async (folderId: string) => {
+      if (!editContext) return;
+
+      try {
+        const folderItem = await editContext.itemsRepository.getItem({
+          id: folderId,
+          language: language,
+          version: 0,
+        });
+
+        if (folderItem) {
+          setTargetFolder({
+            id: folderId,
+            language: language,
+          } as ItemDescriptor);
+
+          setFolderSelectionResult({
+            id: folderId,
+            path: folderItem.path,
+          });
+
+          setFullParentItem(folderItem);
+          setShowFolderTree(false);
+        }
+      } catch (error) {
+        console.error("Error loading selected folder:", error);
+      }
+    },
+    [editContext, language],
+  );
+
+  const clearFolderSelection = useCallback(() => {
+    setTargetFolder(parentItem);
+    setFolderSelectionResult(null);
+    setFullParentItem(undefined);
+    setShowFolderTree(false);
+  }, [parentItem]);
+
   const checkPageName = useCallback(async () => {
-    if (!parentItem) {
-      setNameValidation({ isValid: false, message: "No parent item" });
+    if (!targetFolder) {
+      setNameValidation({ isValid: false, message: "No target folder" });
       return false;
     }
 
@@ -98,7 +261,7 @@ export function ContentStep({
     try {
       // Check if page with same name already exists
       const children = await getChildren(
-        parentItem.id,
+        targetFolder.id,
         editContext?.sessionId ?? "",
         [],
         false,
@@ -129,7 +292,7 @@ export function ContentStep({
       return false;
     }
   }, [
-    parentItem,
+    targetFolder,
     pageModel.name,
     editContext?.sessionId,
     editContext?.contentEditorItem?.language,
@@ -145,7 +308,7 @@ export function ContentStep({
   };
 
   const createPageIfNeeded = useCallback(async (): Promise<boolean> => {
-    if (!editContext || !parentItem || pageItem) return true; // Page already exists
+    if (!editContext || !targetFolder || pageItem) return true; // Page already exists
 
     try {
       if (!(await checkPageName())) {
@@ -155,8 +318,8 @@ export function ContentStep({
 
       const result = await editContext.operations.createItem(
         {
-          ...getItemDescriptor(parentItem),
-          language: parentItem.language || "en",
+          ...getItemDescriptor(targetFolder),
+          language: targetFolder.language || "en",
         },
         wizard.templateId,
         pageModel.name,
@@ -180,7 +343,7 @@ export function ContentStep({
     }
   }, [
     editContext,
-    parentItem,
+    targetFolder,
     pageItem,
     checkPageName,
     wizard.templateId,
@@ -302,17 +465,19 @@ export function ContentStep({
     }
   }, [pageModel.name, checkPageName]);
 
-  // Load parent item details
+  // Load target folder details
   useEffect(() => {
-    const loadParentItem = async () => {
-      if (!parentItem) return;
-      const item = await editContext?.itemsRepository.getItem(parentItem);
+    const loadTargetItem = async () => {
+      if (!targetFolder) return;
+      const item = await editContext?.itemsRepository.getItem(targetFolder);
+      setFullParentItem(item);
+      // Also set fullParentItem for backward compatibility
       setFullParentItem(item);
     };
-    loadParentItem();
-  }, [parentItem]);
+    loadTargetItem();
+  }, [parentItem, editContext]);
 
-  // Auto-generate page name and meta description if not set
+  // Auto-generate page name and select target folder if not set
   useEffect(() => {
     if (!editContext) return;
 
@@ -326,19 +491,37 @@ export function ContentStep({
       try {
         const abortController = new AbortController();
 
+        // Process template expressions in the prompt
+        const templateResult = processPromptTemplate(
+          pageNameInstructions,
+          data,
+        );
+
+        if (templateResult.error) {
+          console.error(
+            "Template processing error in page name prompt:",
+            templateResult.error,
+          );
+          setMessage(`Template Error: ${templateResult.error}`);
+          setIsGenerating(false);
+          return;
+        }
+
+        const processedInstructions = templateResult.value;
+
         const result = await executePrompt(
           [
             {
-              content: `${pageNameInstructions?.trim()} Reply with a json object of type PageModel = { name: string; };                       
+              content: `${processedInstructions?.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",
               role: "system",
               id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
             },
           ],
           { editContext, createAiContext: createWizardAiContext },
-          { model: "o4-mini-high" },
+          { model: step.fields.aiModel || "gpt-4.1" },
           { signal: abortController.signal },
           (response) => {
             try {
@@ -371,8 +554,33 @@ export function ContentStep({
       }
     };
 
-    if (!pageModel.name) generatePageName();
-  }, []);
+    // Run page name generation and folder selection in parallel
+    const runInitialGeneration = async () => {
+      const promises = [];
+
+      // Generate page name if not set
+      if (!pageModel.name) {
+        promises.push(generatePageName());
+      }
+
+      // Select target folder if prompt is configured and folder not yet selected
+      if (step.fields.targetItemPrompt && !folderSelectionResult) {
+        promises.push(selectTargetItem());
+      }
+
+      // Run both in parallel
+      if (promises.length > 0) {
+        await Promise.all(promises);
+      }
+    };
+
+    runInitialGeneration();
+  }, [
+    pageModel.name,
+    folderSelectionResult,
+    step.fields.targetItemPrompt,
+    selectTargetItem,
+  ]);
 
   const createComponents = async () => {
     if (!pageLoaded) return;
@@ -562,9 +770,27 @@ export function ContentStep({
       // Filter input data based on "Input Properties" field if specified
       const inputData = getFilteredInputData(step, data);
 
+      // Process template expressions in the layout instructions
+      const templateResult = processPromptTemplate(
+        internalState.layoutInstructions || "",
+        data,
+      );
+
+      if (templateResult.error) {
+        console.error(
+          "Template processing error in layout instructions:",
+          templateResult.error,
+        );
+        setMessage(`Template Error: ${templateResult.error}`);
+        setIsLoading(false);
+        return;
+      }
+
+      const processedInstructions = templateResult.value;
+
       const prompt = [
         {
-          content: `${internalState.layoutInstructions ? internalState.layoutInstructions?.trim() : ""} Reply with a json object of type PageModel = { fields: Field[]; components: Component[]; message: string; }; 
+          content: `${processedInstructions ? processedInstructions?.trim() : ""} Reply with a json object of type PageModel = { fields: Field[]; components: Component[]; message: string; }; 
             Component = { id: string | undefined, name: string, type: string;  fields: Field[]; placeholder?: string; children?: Component[]; }; 
             Field = {  name: string;  value: string;  type: string; };
             Generate a descriptive name for each component including the topic.
@@ -588,7 +814,7 @@ export function ContentStep({
             Tell the user your reasoning in the message field.
            
             The language of the page is ${editContextRef.current!.page!.item!.language}.
-            Input data: ${JSON.stringify(inputData)}`,
+            `,
 
           name: "system",
           role: "system",
@@ -596,12 +822,6 @@ 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 page fields: ", schema.pageFields);
-      console.log("PAGE WIZARD schema: ", filteredSchema);
-
       const result = await executePrompt(
         prompt,
         {
@@ -672,7 +892,9 @@ export function ContentStep({
           collapsible="yes"
           summary={
             <div className="flex flex-col gap-2 text-xs break-all text-gray-500">
-              <div>Folder: {fullParentItem?.path}</div>
+              <div>
+                Folder: {folderSelectionResult?.path || fullParentItem?.path}
+              </div>
               <div>Language: {language}</div>
               <div>Name: {pageModel.name || "Not set"}</div>
             </div>
@@ -681,24 +903,33 @@ export function ContentStep({
         >
           <div className="flex flex-col items-stretch">
             <div className="relative flex-1">
-              {isGenerating ? (
+              {isGenerating || isSelectingFolder ? (
                 <div className="mt-4 flex h-full items-center justify-center pb-4">
-                  <Generate title="Generating page name..." size="medium" />
+                  <Generate
+                    title={
+                      isGenerating && isSelectingFolder
+                        ? "Generating page name and selecting folder..."
+                        : isGenerating
+                          ? "Generating page name..."
+                          : "Selecting folder..."
+                    }
+                    size="medium"
+                  />
                 </div>
               ) : (
                 <>
                   <div className="mb-4">
                     <label
                       htmlFor="pageName"
-                      className="mb-1 block text-sm font-medium"
+                      className="mb-1 block text-xs font-medium"
                     >
                       Page Name
                     </label>
-                    <InputText
+                    <Input
                       id="pageName"
                       type="text"
                       disabled={!!pageItem}
-                      className={`w-full rounded border p-2 text-sm ${
+                      className={`bg-gray-5 w-full rounded border md:text-xs ${
                         !nameValidation.isValid
                           ? "border-red-500"
                           : nameValidation.isValid && pageModel.name
@@ -706,7 +937,7 @@ export function ContentStep({
                             : ""
                       }`}
                       value={pageModel.name}
-                      onChange={(e) =>
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                         handleInputChange("name", e.target.value)
                       }
                       placeholder="Enter page name"
@@ -724,12 +955,106 @@ export function ContentStep({
                   </div>
 
                   <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 text-gray-600">
-                      {fullParentItem?.path || "Loading..."}
+                    <div className="mb-1 text-xs font-medium">
+                      Target Folder
                     </div>
+                    {isSelectingFolder ? (
+                      <div className="mb-4 flex items-center gap-2 text-xs text-gray-600">
+                        <Generate title="Selecting folder..." size="medium" />
+                        Selecting folder...
+                      </div>
+                    ) : (
+                      <div className="mb-4">
+                        <div className="relative">
+                          <Popover
+                            open={showFolderTree}
+                            onOpenChange={setShowFolderTree}
+                          >
+                            <PopoverTrigger asChild>
+                              <div
+                                className={classNames(
+                                  "focus-shadow bg-gray-5 flex cursor-pointer justify-between border p-1.5 text-xs hover:bg-gray-100",
+                                )}
+                              >
+                                <div className="flex items-center gap-2">
+                                  <Folder className="h-4 w-4" strokeWidth={1} />
+                                  <span className="break-all">
+                                    {folderSelectionResult?.path ||
+                                      fullParentItem?.path ||
+                                      "Loading..."}
+                                  </span>
+                                </div>
+                                <ChevronDown
+                                  strokeWidth={1}
+                                  className={`h-4 w-4 transition-transform duration-200 ${
+                                    showFolderTree ? "rotate-180" : "rotate-0"
+                                  }`}
+                                />
+                              </div>
+                            </PopoverTrigger>
+
+                            <PopoverContent
+                              className="w-96 p-0"
+                              align="start"
+                              side="bottom"
+                            >
+                              <div className="border-b border-gray-200 bg-white p-2">
+                                <ItemSearch
+                                  rootItemIds={[
+                                    normalizeGuid(
+                                      parentItem?.id ||
+                                        "11111111-1111-1111-1111-111111111111",
+                                    ),
+                                  ]}
+                                  autoFocus={true}
+                                  itemSelected={(item) => {
+                                    handleFolderSelection(item.id);
+                                  }}
+                                />
+                              </div>
+
+                              {folderSelectionResult && (
+                                <button
+                                  className="w-full cursor-pointer rounded border-b bg-gray-50 p-1 px-4 text-left text-xs hover:bg-gray-100"
+                                  onClick={clearFolderSelection}
+                                >
+                                  <div className="flex items-center gap-2">
+                                    <Trash
+                                      className="h-4 w-4"
+                                      strokeWidth={1}
+                                    />{" "}
+                                    Reset to original folder
+                                  </div>
+                                </button>
+                              )}
+
+                              <div className="relative h-64 border-x border-b">
+                                <ScrollingContentTree
+                                  key={`folder-tree-${showFolderTree ? "open" : "closed"}-${targetFolder?.id || "none"}`}
+                                  selectedItemId={targetFolder?.id}
+                                  rootItemIds={[
+                                    parentItem?.id ||
+                                      "11111111-1111-1111-1111-111111111111",
+                                  ]}
+                                  expandedItemId={targetFolder?.id}
+                                  scrollToSelected={true}
+                                  onSelectionChange={(nodes) => {
+                                    if (nodes[0]?.id) {
+                                      handleFolderSelection(nodes[0].id);
+                                    }
+                                  }}
+                                />
+                              </div>
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                        {step.fields.targetItemPrompt && parentItem && (
+                          <div className="mt-1 text-xs text-green-600">
+                            ✓ Folder selected by AI
+                          </div>
+                        )}
+                      </div>
+                    )}
                   </div>
 
                   <div className="relative mb-4">
@@ -801,6 +1126,7 @@ export function ContentStep({
                   disabled={
                     isLoading ||
                     isCreatingComponents ||
+                    isSelectingFolder ||
                     !data.selectedComponentTypes ||
                     data.selectedComponentTypes.length === 0 ||
                     (!pageItem &&
@@ -811,11 +1137,18 @@ export function ContentStep({
                   isLoading={
                     isLoading ||
                     isCreatingComponents ||
+                    isSelectingFolder ||
                     !!editContext?.activeFieldActions.find(
                       (action) => action.state === "running",
                     )
                   }
-                  loadingText={"Working"}
+                  loadingText={
+                    isSelectingFolder
+                      ? "Selecting folder..."
+                      : isGenerating
+                        ? "Generating..."
+                        : "Working"
+                  }
                   className="w-full flex-1"
                 >
                   {!pageItem ? "Create page" : "Delete & Regenerate content"}

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

@@ -9,7 +9,11 @@ import {
   fetchItemStubs,
 } from "../../editor/services/contentService";
 import { ItemDescriptor } from "../../editor/pageModel";
-import { evaluateDataExpression, setDataProperty } from "../utils/dataAccessor";
+import {
+  evaluateDataExpression,
+  setDataProperty,
+  processPromptTemplate,
+} from "../utils/dataAccessor";
 import { executePrompt } from "../../editor/services/aiService";
 import { createWizardAiContext } from "../service";
 import { ActionButton } from "../../components/ActionButton";
@@ -177,12 +181,28 @@ export function FindItemsStep({
     // Evaluate only the input properties that should be included
     const evaluatedInputData = evaluateDataExpression(inputProperties, data);
 
+    // Process template expressions in system instructions
+    const systemInstructionsResult = processPromptTemplate(
+      step.fields.systemInstructions || "",
+      data,
+    );
+
+    if (systemInstructionsResult.error) {
+      console.error(
+        "Template processing error in system instructions:",
+        systemInstructionsResult.error,
+      );
+      setAiError(`Template Error: ${systemInstructionsResult.error}`);
+      setLoadingAI(false);
+      return;
+    }
+
     const basePrompt = `
-${step.fields.systemInstructions}
+${systemInstructionsResult.value || ""}
 
 You need to suggest relevant content items from a content tree. Here are the details:
 
-Input Data: ${JSON.stringify(evaluatedInputData)}
+
 Source Root IDs: ${JSON.stringify(rootItemIds)}
 Multi-select: ${multiSelect}
 Max selections needed: ${multiSelect ? "multiple" : "1"}

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

@@ -71,7 +71,7 @@ export function LayoutStep({
               Where components are of type Component = { id: string; name: string; fields: FieldDefinition[]; styles: string; };
               And fields are of type FieldDefinition = { name: string; type: string; value: string; };
               
-              Input data: ${JSON.stringify(data)}
+              
               
               Types: Row: Use this to group components horizontally. Section: Use this to group components with a background color or spacing. Title: Use for titles and headings. Text: Use for general text content. Quote: Use for quotes and callouts. Image: Use for images and media. TeaserList: Use for lists of items with images and descriptions. Test: Component for testing and prototyping.
               

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

@@ -62,7 +62,7 @@ export function MetaDataStep({
             {
               content: `${metaInstructions?.trim()} Reply with a json object of type PageModel = { metaDescription: string; metaKeywords: string; };
                 The language of the page is ${parentItem?.language || "en"}.
-                Input data: ${JSON.stringify(data)}`,
+                `,
               name: "system",
               role: "system",
               id: crypto.randomUUID(), // Use proper UUID instead of Date.now()