@alpaca-editor/core 1.0.3997 → 1.0.4007

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

@@ -0,0 +1,546 @@
+import { useState, useEffect } from "react";
+import { StepComponentProps } from "../../config/types";
+import { useEditContext } from "../../editor/client/editContext";
+import ContentTree from "../../editor/ContentTree";
+import { Button } from "../../components/ui/button";
+import { normalizeGuid } from "../../editor/utils";
+import {
+  ItemTreeNodeData,
+  fetchItemStubs,
+} from "../../editor/services/contentService";
+import { ItemDescriptor } from "../../editor/pageModel";
+import { evaluateDataExpression, setDataProperty } from "../utils/dataAccessor";
+import { executePrompt } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { ActionButton } from "../../components/ActionButton";
+import Generate from "./Generate";
+import { Sparkles } from "lucide-react";
+
+export function FindItemsStep({
+  step,
+  data,
+  setData,
+  setStepCompleted,
+  internalState,
+  setInternalState,
+}: StepComponentProps) {
+  const editContext = useEditContext();
+  const [selectedItems, setSelectedItems] = useState<ItemTreeNodeData[]>([]);
+  const [rootItemIds, setRootItemIds] = useState<string[]>([]);
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [aiSuggestions, setAiSuggestions] = useState<string[]>([]);
+  const [aiSuggestedItems, setAiSuggestedItems] = useState<ItemTreeNodeData[]>(
+    [],
+  );
+  const [loadingAI, setLoadingAI] = useState(false);
+  const [loadingAIItems, setLoadingAIItems] = useState(false);
+  const [aiError, setAiError] = useState<string | null>(null);
+  const [hasInputData, setHasInputData] = useState(false);
+
+  // Get configuration from step fields
+  const sources = step.fields?.sources || "";
+  const multiSelect = step.fields?.multiSelect === "1" ? true : false;
+  const inputProperties =
+    (typeof step.fields?.inputProperties === "string"
+      ? step.fields.inputProperties
+      : null) ||
+    (typeof step.fields?.propertyName === "string"
+      ? step.fields.propertyName
+      : null) ||
+    "selectedItems";
+  const propertyName =
+    (typeof step.fields?.propertyName === "string"
+      ? step.fields.propertyName
+      : null) || "selectedItems";
+  const displayProperty = step.fields?.displayProperty || "selectedItemIds";
+
+  useEffect(() => {
+    // Initialize root item IDs from sources configuration
+    if (typeof sources === "string") {
+      const rootIds = sources.split("|").map((source: string) => {
+        return normalizeGuid(source);
+      });
+      setRootItemIds(rootIds);
+    } else {
+      // Default root if no sources specified
+      setRootItemIds(["{11111111-1111-1111-1111-111111111111}"]);
+    }
+  }, [sources]);
+
+  useEffect(() => {
+    // Only restore selectedItems from internalState (user's manual selections)
+    const stepKey = `selectedItems_${step.id}`;
+    const storedItems = internalState?.[stepKey];
+    if (storedItems && Array.isArray(storedItems)) {
+      setSelectedItems(storedItems);
+      // Also restore selected values from stored items
+      const storedIds = storedItems.map((item) => item.id);
+      setSelectedValues(storedIds);
+    }
+  }, [data, internalState, step.id]);
+
+  useEffect(() => {
+    // Mark step as completed if we have selections (for multi-select) or exactly one (for single-select)
+    const hasValidSelection = multiSelect
+      ? selectedValues.length > 0
+      : selectedValues.length === 1;
+
+    setStepCompleted(hasValidSelection);
+  }, [selectedValues, multiSelect, setStepCompleted]);
+
+  useEffect(() => {
+    // Check if there's meaningful input data that could benefit from AI suggestions
+    const hasData = data && Object.keys(data).length > 0;
+    const hasTextualData = Object.values(data || {}).some(
+      (value) => typeof value === "string" && value.trim().length > 0,
+    );
+    setHasInputData(hasData && hasTextualData);
+  }, [data]);
+
+  useEffect(() => {
+    // Auto-generate AI suggestions when the step opens and has meaningful input data
+    if (
+      hasInputData &&
+      step.fields?.systemInstructions &&
+      selectedItems.length === 0
+    ) {
+      generateAISuggestions();
+    }
+  }, [hasInputData, step.fields?.systemInstructions]);
+
+  // Fetch item details from AI-suggested IDs
+  const fetchAISuggestedItems = async (itemIds: string[]) => {
+    if (
+      !editContext ||
+      !editContext.currentItemDescriptor?.language ||
+      itemIds.length === 0
+    ) {
+      return;
+    }
+
+    setLoadingAIItems(true);
+    try {
+      // Convert item IDs to ItemDescriptors
+      const itemDescriptors: ItemDescriptor[] = itemIds.map((id) => ({
+        id: normalizeGuid(id),
+        language: editContext.currentItemDescriptor!.language,
+        version: 0, // Use latest version
+      }));
+
+      // Fetch item stubs to get names and display data
+      const itemStubs = await fetchItemStubs(itemDescriptors);
+
+      if (itemStubs) {
+        // Convert ItemStubs to ItemTreeNodeData format
+        const suggestedItems: ItemTreeNodeData[] = itemStubs.map((stub) => ({
+          id: stub.id,
+          name: stub.name || stub.id,
+          displayName: stub.name,
+          templateId: stub.templateId || "",
+          icon: stub.icon || "",
+          hasChildren: false,
+          isComponent: false,
+          thumbUrl: "",
+          previewUrl: "",
+          language: stub.language,
+          version: stub.version,
+          hasLayout: false,
+        }));
+
+        setAiSuggestedItems(suggestedItems);
+
+        // Auto-apply suggestions
+        const itemsToApply = multiSelect
+          ? suggestedItems
+          : suggestedItems.slice(0, 1);
+
+        if (itemsToApply.length > 0) {
+          handleSelectionChange(itemsToApply);
+
+          // Clear suggestions after applying them
+          setTimeout(() => {
+            setAiSuggestions([]);
+            setAiSuggestedItems([]);
+          }, 2000); // Show the "applied" message for 2 seconds before clearing
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching AI suggested items:", error);
+      setAiError("Failed to load item details for suggestions.");
+    } finally {
+      setLoadingAIItems(false);
+    }
+  };
+
+  // Generate AI suggestions for item selection
+  const generateAISuggestions = async () => {
+    if (!editContext) {
+      setAiError("No edit context defined.");
+      return;
+    }
+    if (!step.fields?.systemInstructions) {
+      setAiError("No system instructions defined in step configuration.");
+      return;
+    }
+
+    setLoadingAI(true);
+    setAiError(null);
+
+    // Evaluate only the input properties that should be included
+    const evaluatedInputData = evaluateDataExpression(inputProperties, data);
+
+    const basePrompt = `
+${step.fields.systemInstructions}
+
+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"}
+
+You can use the get-children function to traverse the content tree and find relevant items.
+Start from the root IDs provided and explore the tree to find items that match the input data.
+
+Return a JSON object with suggested item IDs in this format:
+{
+  "suggestions": ["item-id-1", "item-id-2", ...],
+  "reasoning": "Brief explanation of why these items were selected"
+} Do not add comments to the JSON.`;
+
+    // Log input data for AI processing but don't auto-populate selections
+    console.log(
+      "INPUT DATA FOR AI PROCESSING: ",
+      evaluatedInputData,
+      basePrompt,
+    );
+
+    try {
+      const result = await executePrompt(
+        [
+          {
+            content: `You are an expert content curator helping to find relevant items from a content tree. You can traverse the tree using the get-children function. Return ONLY a valid JSON object with suggestions and reasoning.`,
+            name: "system",
+            role: "system",
+          },
+          {
+            content: basePrompt,
+            name: "user",
+            role: "user",
+          },
+        ],
+        editContext,
+        createWizardAiContext,
+        { allowedFunctions: ["get-children"] },
+        undefined,
+        step.fields.aiModel || "gpt-4.1",
+      );
+
+      console.log("AI RESULT: ", result);
+
+      // Parse the result and set suggestions
+      if (result && result.messages && result.messages.length > 0) {
+        try {
+          const lastMessage = result.messages[result.messages.length - 1];
+          if (lastMessage && lastMessage.content) {
+            const suggestions = JSON.parse(lastMessage.content) as {
+              suggestions: string[];
+              reasoning?: string;
+            };
+
+            const suggestionIds = suggestions.suggestions || [];
+            setAiSuggestions(suggestionIds);
+            setAiError(null); // Clear any previous errors
+            console.log("AI Reasoning:", suggestions.reasoning);
+
+            // Fetch full item details for the suggestions
+            await fetchAISuggestedItems(suggestionIds);
+          }
+        } catch (parseError) {
+          console.error("Error parsing AI suggestions:", parseError);
+          setAiError(
+            "Failed to parse AI suggestions. The response was not in the expected format.",
+          );
+        }
+      } else {
+        setAiError("No suggestions were generated. Please try again.");
+      }
+    } catch (err) {
+      setAiError("Failed to generate suggestions. Please try again.");
+      console.error("Error generating AI suggestions:", err);
+    } finally {
+      setLoadingAI(false);
+    }
+  };
+
+  const handleSelectionChange = (selectedNodes: ItemTreeNodeData[]) => {
+    const nodes = selectedNodes || [];
+    setSelectedItems(nodes);
+
+    // Store selectedItems in internalState for persistence using step-specific key
+    const stepKey = `selectedItems_${step.id}`;
+    setInternalState((prev: any) => ({
+      ...prev,
+      [stepKey]: nodes,
+    }));
+
+    let newValues: string[];
+    if (multiSelect) {
+      // For multi-select, keep all selected items
+      newValues = nodes.map((node) => node.id);
+    } else {
+      // For single-select, keep only the last selected item
+      const lastNode = nodes[nodes.length - 1];
+      newValues = lastNode ? [lastNode.id] : [];
+    }
+
+    setSelectedValues(newValues);
+
+    // Update data with selected item IDs
+    setData((prevData) => {
+      const updatedData = setDataProperty(
+        propertyName,
+        multiSelect ? newValues : newValues[0] || null,
+        prevData,
+      );
+      return setDataProperty(displayProperty, newValues, updatedData);
+    });
+  };
+
+  const handleAddItem = (node: ItemTreeNodeData) => {
+    if (multiSelect) {
+      // Check if item is already selected
+      const isAlreadySelected = selectedItems.some(
+        (item) => item.id === node.id,
+      );
+      if (!isAlreadySelected) {
+        const newItems = [...selectedItems, node];
+        handleSelectionChange(newItems);
+      }
+    } else {
+      // For single select, replace the selection
+      handleSelectionChange([node]);
+    }
+  };
+
+  const handleRemoveItem = (itemId: string) => {
+    const newItems = selectedItems.filter((item) => item.id !== itemId);
+    handleSelectionChange(newItems);
+  };
+
+  const handleClearSelection = () => {
+    setSelectedItems([]);
+    setSelectedValues([]);
+
+    // Clear from internalState too using step-specific key
+    const stepKey = `selectedItems_${step.id}`;
+    setInternalState((prev: any) => ({
+      ...prev,
+      [stepKey]: [],
+    }));
+
+    setData((prevData) => {
+      const updatedData = setDataProperty(
+        propertyName,
+        multiSelect ? [] : null,
+        prevData,
+      );
+      return setDataProperty(displayProperty, [], updatedData);
+    });
+  };
+
+  if (!editContext) {
+    return <div>Loading...</div>;
+  }
+
+  if (loadingAI) {
+    return (
+      <Generate title="AI is analyzing content and finding suggestions..." />
+    );
+  }
+
+  if (loadingAIItems) {
+    return <Generate title="Loading item details for AI suggestions..." />;
+  }
+
+  return (
+    <div className="flex h-full flex-col gap-4">
+      <div className="flex-shrink-0">
+        <div className="flex items-center justify-end gap-2">
+          <span className="text-sm text-gray-600">
+            {multiSelect ? "Multi-select enabled" : "Single selection"}
+          </span>
+          {selectedValues.length > 0 && (
+            <Button variant="outline" size="sm" onClick={handleClearSelection}>
+              Clear Selection
+            </Button>
+          )}
+          {hasInputData && step.fields?.systemInstructions && (
+            <ActionButton onClick={generateAISuggestions} disabled={loadingAI}>
+              <div className="flex items-center gap-2">
+                <Sparkles className="h-4 w-4" />
+                Get AI Suggestions
+              </div>
+            </ActionButton>
+          )}
+        </div>
+
+        {selectedValues.length > 0 && (
+          <div className="mt-4 rounded-md bg-blue-50 p-3">
+            <h4 className="text-sm font-medium text-blue-900">
+              Selected Items ({selectedValues.length}):
+            </h4>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {selectedItems.length > 0
+                ? selectedItems.map((item) => (
+                    <span
+                      key={item.id}
+                      className="inline-flex items-center gap-1 rounded-md bg-blue-100 px-2 py-1 text-xs text-blue-800"
+                    >
+                      {item.icon && (
+                        <img src={item.icon} alt="" className="h-3 w-3" />
+                      )}
+                      {item.name}
+                      {multiSelect && (
+                        <button
+                          onClick={() => handleRemoveItem(item.id)}
+                          className="ml-1 rounded-full p-0.5 hover:bg-blue-200 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                          title="Remove item"
+                        >
+                          <svg
+                            className="h-3 w-3"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M6 18L18 6M6 6l12 12"
+                            />
+                          </svg>
+                        </button>
+                      )}
+                    </span>
+                  ))
+                : // Fallback to show IDs if full items aren't loaded yet
+                  selectedValues.map((id) => (
+                    <span
+                      key={typeof id === "string" ? id : JSON.stringify(id)}
+                      className="inline-flex items-center gap-1 rounded-md bg-blue-100 px-2 py-1 text-xs text-blue-800"
+                    >
+                      {typeof id === "string" ? id : JSON.stringify(id)}
+                      {multiSelect && (
+                        <button
+                          onClick={() => handleRemoveItem(id)}
+                          className="ml-1 rounded-full p-0.5 hover:bg-blue-200 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                          title="Remove item"
+                        >
+                          <svg
+                            className="h-3 w-3"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M6 18L18 6M6 6l12 12"
+                            />
+                          </svg>
+                        </button>
+                      )}
+                    </span>
+                  ))}
+            </div>
+          </div>
+        )}
+
+        {/* AI Error Message */}
+        {aiError && (
+          <div className="rounded-md bg-red-50 p-3 text-sm text-red-700">
+            {aiError}
+          </div>
+        )}
+
+        {/* AI Suggestions Applied */}
+        {(aiSuggestions.length > 0 || aiSuggestedItems.length > 0) && (
+          <div className="rounded-md bg-green-50 p-3">
+            <h4 className="text-sm font-medium text-green-900">
+              AI Suggestions Applied (
+              {Math.max(aiSuggestions.length, aiSuggestedItems.length)}):
+            </h4>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {aiSuggestedItems.length > 0
+                ? aiSuggestedItems.map((item) => (
+                    <span
+                      key={item.id}
+                      className="inline-flex items-center gap-1 rounded-md bg-green-100 px-2 py-1 text-xs text-green-800"
+                    >
+                      {item.icon && (
+                        <img src={item.icon} alt="" className="h-3 w-3" />
+                      )}
+                      {item.name}
+                    </span>
+                  ))
+                : aiSuggestions.map((suggestionId) => (
+                    <span
+                      key={suggestionId}
+                      className="inline-flex items-center rounded-md bg-green-100 px-2 py-1 text-xs text-green-800"
+                    >
+                      {suggestionId}
+                    </span>
+                  ))}
+            </div>
+            <p className="mt-2 text-xs text-green-700">
+              These items were automatically selected by AI based on your input
+              data.
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1 overflow-hidden rounded-md border border-gray-300">
+        <div className="h-full overflow-auto bg-white p-2">
+          <ContentTree
+            language={editContext.currentItemDescriptor?.language ?? "en"}
+            selectionMode={multiSelect ? "multiple" : "single"}
+            selectedItemIds={selectedValues}
+            rootItemIds={rootItemIds}
+            includeItemPath={true}
+            onDoubleClick={handleAddItem}
+          />
+        </div>
+      </div>
+
+      <div className="flex-shrink-0 rounded-md bg-gray-50 p-3">
+        <div className="text-sm text-gray-600">
+          <strong>Instructions:</strong>
+          <ul className="mt-1 list-inside list-disc space-y-1">
+            <li>Browse the content tree to find the items you need</li>
+            {multiSelect ? (
+              <>
+                <li>Double-click on an item to add it to your selection</li>
+                <li>Click the × button on selected items to remove them</li>
+              </>
+            ) : (
+              <li>Double-click on an item to select it</li>
+            )}
+            {hasInputData && step.fields?.systemInstructions && (
+              <li>
+                AI will automatically analyze your input data and suggest
+                relevant items, or use "Get AI Suggestions" to regenerate
+                suggestions
+              </li>
+            )}
+            <li>
+              Selected items will be saved to the "{propertyName}" property
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -118,7 +118,19 @@ export const ImagesStep = (props: StepComponentProps) => {
         undefined,
         "gpt-4.1",
       );
-      const images = JSON.parse(aiPromptResult.content).images;
+
+      let images: Image[] = [];
+      if (
+        aiPromptResult &&
+        aiPromptResult.messages &&
+        aiPromptResult.messages.length > 0
+      ) {
+        const lastMessage =
+          aiPromptResult.messages[aiPromptResult.messages.length - 1];
+        if (lastMessage && lastMessage.content) {
+          images = JSON.parse(lastMessage.content).images;
+        }
+      }
 
       // Create an array of promises for all search operations
       const searchPromises = images.map(async (image: Image) => {

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

@@ -92,29 +92,40 @@ export function LayoutStep({
         "gpt-4.1",
         (response) => {
           try {
-            const newLayout = JSON.parse(response.content) as WizardPageModel;
-
-            if (newLayout) {
-              setData((prev: WizardData) => ({
-                ...prev,
-                pageModel: newLayout,
-              }));
+            // Handle streaming response - might have different structure during streaming
+            const content =
+              response.content ||
+              response.messages?.[response.messages.length - 1]?.content;
+            if (content) {
+              const newLayout = JSON.parse(content) as WizardPageModel;
+
+              if (newLayout) {
+                setData((prev: WizardData) => ({
+                  ...prev,
+                  pageModel: newLayout,
+                }));
+              }
+
+              setMessage(newLayout.message);
             }
-
-            setMessage(newLayout.message);
           } catch (parseError: unknown) {}
         },
       );
 
-      const pageModel = JSON.parse(result.content);
+      if (result && result.messages && result.messages.length > 0) {
+        const lastMessage = result.messages[result.messages.length - 1];
+        if (lastMessage && lastMessage.content) {
+          const pageModel = JSON.parse(lastMessage.content);
 
-      setData({
-        ...data,
-        pageModel: JSON.parse(result.content),
-        customInstructions,
-      });
+          setData({
+            ...data,
+            pageModel: JSON.parse(lastMessage.content),
+            customInstructions,
+          });
 
-      setMessage(pageModel.message);
+          setMessage(pageModel.message);
+        }
+      }
     } catch (error) {
       console.error(error);
     } finally {

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

@@ -75,23 +75,36 @@ export function MetaDataStep({
           "gpt-4.1",
           (response) => {
             try {
-              const newLayout = JSON.parse(response.content) as WizardPageModel;
-
-              setPageModel({
-                ...pageModel,
-                metaDescription: newLayout.metaDescription,
-                metaKeywords: newLayout.metaKeywords,
-              });
+              // Handle streaming response - might have different structure during streaming
+              const content =
+                response.content ||
+                response.messages?.[response.messages.length - 1]?.content;
+              if (content) {
+                const newLayout = JSON.parse(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,
-        });
+        if (result && result.messages && result.messages.length > 0) {
+          const lastMessage = result.messages[result.messages.length - 1];
+          if (lastMessage && lastMessage.content) {
+            const pageModelResult = JSON.parse(
+              lastMessage.content,
+            ) as WizardPageModel;
+            setPageModel({
+              ...pageModel,
+              metaDescription: pageModelResult.metaDescription,
+              metaKeywords: pageModelResult.metaKeywords,
+            });
+          }
+        }
       } catch (error) {
         console.error("Error generating meta fields", error);
       } finally {