@alpaca-editor/core 1.0.4093 → 1.0.4095

package/src/editor/control-center/setup-steps/AiSetupStep.tsx

@@ -7,7 +7,12 @@ import { useEditContext } from "../../client/editContext";
 import { ItemDescriptor } from "../../pageModel";
 import { getChildren } from "../../services/contentService";
 import type { ItemTreeNodeData } from "../../services/contentService";
-import { CheckCircle, RefreshCw, SparklesIcon, AlertCircle } from "lucide-react";
+import {
+  CheckCircle,
+  RefreshCw,
+  SparklesIcon,
+  AlertCircle,
+} from "lucide-react";
 import { contentItemId } from "../../../config/config";
 
 type StepState = "idle" | "checking" | "success" | "error";
@@ -32,20 +37,36 @@ export function AiSetupStep() {
   const [aiError, setAiError] = useState<string | null>(null);
   const [apiKey, setApiKey] = useState<string>("");
 
-  const [editorSettingsItem, setEditorSettingsItem] = useState<ItemDescriptor | null>(null);
+  const [editorSettingsItem, setEditorSettingsItem] =
+    useState<ItemDescriptor | null>(null);
   const [containersError, setContainersError] = useState<string | null>(null);
   const requiredContainers = useMemo(
     () => [
       { name: "Ai Models", templateId: "e5f6a7b8-9c0d-1e2f-3a4b-5c6d7e8f9a0b" },
-      { name: "Ai Endpoints", templateId: "4592f2e0-06e4-470e-9820-7fd4ea148e00" },
-      { name: "Ai Profiles", templateId: "4298ab78-2aaa-4d5f-bb3a-0bd321b86063" },
-      { name: "Ai Schemas", templateId: "5214a52b-6c45-4671-97f2-703fe24e3d09" },
+      {
+        name: "Ai Endpoints",
+        templateId: "4592f2e0-06e4-470e-9820-7fd4ea148e00",
+      },
+      {
+        name: "Ai Profiles",
+        templateId: "4298ab78-2aaa-4d5f-bb3a-0bd321b86063",
+      },
+      {
+        name: "Ai Schemas",
+        templateId: "5214a52b-6c45-4671-97f2-703fe24e3d09",
+      },
       { name: "Ai Quotas", templateId: "7a08ff28-70ed-459b-a7f2-db2a78d88f46" },
-      { name: "AI Generators", templateId: "9430a3e9-7397-4598-9a55-2b263c927497" },
+      {
+        name: "AI Generators",
+        templateId: "9430a3e9-7397-4598-9a55-2b263c927497",
+      },
+      { name: "AI Tools", templateId: "7e3f9d9d-8e84-4e57-b12e-6e9c99d4fd11" },
     ],
     [],
   );
-  const [containerStates, setContainerStates] = useState<Record<string, StepState>>({});
+  const [containerStates, setContainerStates] = useState<
+    Record<string, StepState>
+  >({});
   const [busyMap, setBusyMap] = useState<Record<string, boolean>>({});
 
   const userLang = editContext?.contentEditorItem?.language || "en";
@@ -85,6 +106,270 @@ export function AiSetupStep() {
     [editContext?.sessionId, userLang],
   );
 
+  // IDs for tool templates/fields
+  const AI_TOOLS_TEMPLATE_ID = "7e3f9d9d-8e84-4e57-b12e-6e9c99d4fd11"; // container
+  const AI_TOOL_TEMPLATE_ID = "a2e8a0d9-7b1f-4d1a-a2d8-8f3ea6d6f0b1"; // item template
+  const FIELD_FUNCTION_NAME_ID = "3d9f2b1a-9d44-4d26-8a1b-92f0fb4d3a2c";
+  const FIELD_LABEL_ID = "5a19f5a5-1d21-4b6a-9f83-6f3fc0b34b2e";
+  const FIELD_DESCRIPTION_ID = "6b2e4b8e-8a9f-4d8f-9f6e-1a2b3c4d5e6f";
+
+  const [toolsBusy, setToolsBusy] = useState(false);
+  const [toolsError, setToolsError] = useState<string | null>(null);
+
+  const ensureAiToolsAndGenerate = useCallback(async () => {
+    if (!editContext) return;
+    try {
+      setToolsBusy(true);
+      setToolsError(null);
+
+      // Resolve /Settings/Editor
+      const settingsItem = await resolvePathUnderContent([
+        "Settings",
+        "Editor",
+      ]);
+      if (!settingsItem)
+        throw new Error("Editor settings item not found. Create it first.");
+
+      // Ensure AI Tools container exists
+      const editorChildren = (await getChildren(
+        settingsItem.id,
+        editContext.sessionId!,
+        [],
+        false,
+        userLang,
+        "path",
+      )) as unknown as ItemTreeNodeData[];
+
+      let aiToolsParent = findByName(editorChildren, "AI Tools");
+      if (!aiToolsParent) {
+        const created = await editContext.operations.createItem(
+          settingsItem,
+          AI_TOOLS_TEMPLATE_ID,
+          "AI Tools",
+        );
+        if (!created) throw new Error("Failed to create 'AI Tools' container");
+        aiToolsParent = {
+          id: created.id,
+          name: "AI Tools",
+          displayName: "AI Tools",
+          thumbUrl: "",
+          previewUrl: "",
+          templateId: "",
+          icon: "",
+          hasChildren: false,
+          isComponent: false,
+          language: userLang,
+          version: 0,
+          hasLayout: false,
+        } as unknown as ItemTreeNodeData;
+      }
+
+      // Get existing tool items under AI Tools
+      const toolChildren = (await getChildren(
+        aiToolsParent.id,
+        editContext.sessionId!,
+        [],
+        false,
+        userLang,
+        "path",
+      )) as unknown as ItemTreeNodeData[];
+
+      const findChildByLabel = (label: string) =>
+        findByName(toolChildren, label);
+
+      // Known tool functions (aligned with backend function names)
+      const tools: {
+        functionName: string;
+        label: string;
+        description?: string;
+      }[] = [
+        {
+          functionName: "get-content",
+          label: "Get Content",
+          description: "Returns page content or selected components",
+        },
+        {
+          functionName: "edit-field",
+          label: "Edit Field",
+          description: "Edits a field on the page or datasource",
+        },
+        {
+          functionName: "suggest-field-edit",
+          label: "Suggest Field Edit",
+          description: "Suggests changes to a field's content",
+        },
+        {
+          functionName: "create-item",
+          label: "Create Item",
+          description: "Creates a new item using a template",
+        },
+        {
+          functionName: "load-item",
+          label: "Load Item",
+          description: "Loads an item for context",
+        },
+        {
+          functionName: "get-items",
+          label: "Get Items",
+          description: "Finds items by criteria",
+        },
+        {
+          functionName: "get-children",
+          label: "Get Children",
+          description: "Lists child items under a parent",
+        },
+        {
+          functionName: "get-insertoptions",
+          label: "Get Insert Options",
+          description: "Lists available insert templates for an item",
+        },
+        {
+          functionName: "add-component",
+          label: "Add Component",
+          description: "Adds a component to a placeholder",
+        },
+        {
+          functionName: "remove-component",
+          label: "Remove Component",
+          description: "Removes a component from the page",
+        },
+        {
+          functionName: "move-components",
+          label: "Move Components",
+          description: "Moves components between placeholders",
+        },
+        {
+          functionName: "get-placeholders",
+          label: "Get Placeholders",
+          description: "Lists placeholders for a component",
+        },
+        {
+          functionName: "get-component-props-and-placeholders",
+          label: "Get Component Props and Placeholders",
+          description: "Returns component prop schema and placeholders",
+        },
+        {
+          functionName: "search-content",
+          label: "Search Content",
+          description: "Searches content across the index",
+        },
+        {
+          functionName: "search-images",
+          label: "Search Images",
+          description: "Searches images for use in content",
+        },
+        {
+          functionName: "google-search",
+          label: "Google Search",
+          description: "Performs a web search",
+        },
+        {
+          functionName: "scrape-webpage",
+          label: "Scrape Webpage",
+          description: "Fetches a webpage and extracts content",
+        },
+        {
+          functionName: "edit-image",
+          label: "Edit Image",
+          description: "Uses AI to modify an image",
+        },
+        {
+          functionName: "get-picture-description",
+          label: "Get Picture Description",
+          description: "Describes an image",
+        },
+        {
+          functionName: "add-comment",
+          label: "Add Comment",
+          description: "Adds a comment to the page",
+        },
+        {
+          functionName: "get-comments",
+          label: "Get Comments",
+          description: "Lists comments on the page",
+        },
+        {
+          functionName: "get-suggestions",
+          label: "Get Suggestions",
+          description: "Provides AI suggestions",
+        },
+      ];
+
+      // Create or update tool items
+      for (const t of tools) {
+        let node = findChildByLabel(t.label);
+        if (!node) {
+          const created = await editContext.operations.createItem(
+            {
+              id: aiToolsParent.id,
+              language: userLang,
+              version: 0,
+            } as ItemDescriptor,
+            AI_TOOL_TEMPLATE_ID,
+            t.label,
+          );
+          if (!created) throw new Error(`Failed to create tool '${t.label}'`);
+          node = {
+            id: created.id,
+            name: t.label,
+            displayName: t.label,
+            thumbUrl: "",
+            previewUrl: "",
+            templateId: "",
+            icon: "",
+            hasChildren: false,
+            isComponent: false,
+            language: userLang,
+            version: 0,
+            hasLayout: false,
+          } as unknown as ItemTreeNodeData;
+        }
+
+        // Set Function Name
+        await editContext.operations.editField({
+          field: {
+            fieldId: FIELD_FUNCTION_NAME_ID,
+            item: { id: node.id, language: userLang, version: 0 },
+          },
+          value: t.functionName,
+          rawValue: t.functionName,
+          refresh: "delayed",
+        });
+
+        // Set Label
+        await editContext.operations.editField({
+          field: {
+            fieldId: FIELD_LABEL_ID,
+            item: { id: node.id, language: userLang, version: 0 },
+          },
+          value: t.label,
+          rawValue: t.label,
+          refresh: "delayed",
+        });
+
+        // Set Description
+        if (t.description) {
+          await editContext.operations.editField({
+            field: {
+              fieldId: FIELD_DESCRIPTION_ID,
+              item: { id: node.id, language: userLang, version: 0 },
+            },
+            value: t.description,
+            rawValue: t.description,
+            refresh: "delayed",
+          });
+        }
+      }
+
+      setAiState("success");
+      editContext.requestRefresh?.("immediate");
+    } catch (e: any) {
+      setToolsError(e?.message || "Failed to generate AI tools");
+    } finally {
+      setToolsBusy(false);
+    }
+  }, [editContext, resolvePathUnderContent, userLang]);
+
   const createAiEndpoint = useCallback(async () => {
     if (!aiProvider || !editContext) return;
     try {
@@ -243,7 +528,8 @@ export function AiSetupStep() {
             modelTemplateId,
             modelName,
           );
-          if (!createdModel) throw new Error(`Failed to create model '${modelName}'`);
+          if (!createdModel)
+            throw new Error(`Failed to create model '${modelName}'`);
           modelNode = {
             id: createdModel.id,
             name: modelName,
@@ -300,7 +586,10 @@ export function AiSetupStep() {
       for (const rc of requiredContainers) initialStates[rc.name] = "checking";
       setContainerStates(initialStates);
 
-      const settingsItem = await resolvePathUnderContent(["Settings", "Editor"]);
+      const settingsItem = await resolvePathUnderContent([
+        "Settings",
+        "Editor",
+      ]);
       if (!settingsItem) {
         setEditorSettingsItem(null);
         const errorMsg = "Editor settings item not found. Create it first.";
@@ -374,39 +663,54 @@ export function AiSetupStep() {
         {requiredContainers
           .filter((rc) => containerStates[rc.name] === "error")
           .map((rc) => (
-          <div key={rc.name} className="flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
-              {containerStates[rc.name] === "checking" ? (
-                <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin text-amber-600" />
-              ) : containerStates[rc.name] === "success" ? (
-                <CheckCircle strokeWidth={1} className="h-4 w-4 text-green-600" />
-              ) : (
-                <AlertCircle strokeWidth={1} className="h-4 w-4 text-red-600" />
-              )}
-              <span className="text-sm text-gray-700">
-                {containerStates[rc.name] === "checking"
-                  ? `Checking ${rc.name}...`
-                  : containerStates[rc.name] === "success"
-                    ? `${rc.name} present`
-                    : `${rc.name} missing`}
-              </span>
-            </div>
-            {containerStates[rc.name] !== "success" && (
-              <Button
-                size="sm"
-                onClick={() => createContainer(rc.name, rc.templateId)}
-                disabled={!editorSettingsItem || !!busyMap[rc.name]}
-              >
-                {busyMap[rc.name] ? (
-                  <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
+            <div
+              key={rc.name}
+              className="flex items-center justify-between gap-2"
+            >
+              <div className="flex items-center gap-2">
+                {containerStates[rc.name] === "checking" ? (
+                  <RefreshCw
+                    strokeWidth={1}
+                    className="h-4 w-4 animate-spin text-amber-600"
+                  />
+                ) : containerStates[rc.name] === "success" ? (
+                  <CheckCircle
+                    strokeWidth={1}
+                    className="h-4 w-4 text-green-600"
+                  />
                 ) : (
-                  <CheckCircle strokeWidth={1} className="h-4 w-4" />
+                  <AlertCircle
+                    strokeWidth={1}
+                    className="h-4 w-4 text-red-600"
+                  />
                 )}
-                Fix
-              </Button>
-            )}
-          </div>
-        ))}
+                <span className="text-sm text-gray-700">
+                  {containerStates[rc.name] === "checking"
+                    ? `Checking ${rc.name}...`
+                    : containerStates[rc.name] === "success"
+                      ? `${rc.name} present`
+                      : `${rc.name} missing`}
+                </span>
+              </div>
+              {containerStates[rc.name] !== "success" && (
+                <Button
+                  size="sm"
+                  onClick={() => createContainer(rc.name, rc.templateId)}
+                  disabled={!editorSettingsItem || !!busyMap[rc.name]}
+                >
+                  {busyMap[rc.name] ? (
+                    <RefreshCw
+                      strokeWidth={1}
+                      className="h-4 w-4 animate-spin"
+                    />
+                  ) : (
+                    <CheckCircle strokeWidth={1} className="h-4 w-4" />
+                  )}
+                  Fix
+                </Button>
+              )}
+            </div>
+          ))}
       </div>
       {containersError && (
         <div className="mt-2 rounded border border-yellow-200 bg-yellow-50 p-2 text-xs whitespace-pre-wrap text-yellow-800">
@@ -450,6 +754,24 @@ export function AiSetupStep() {
           Add endpoint
         </Button>
       </div>
+      <div className="mt-4 flex items-center gap-2">
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={toolsBusy}
+          onClick={ensureAiToolsAndGenerate}
+        >
+          {toolsBusy ? (
+            <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
+          ) : (
+            <CheckCircle strokeWidth={1} className="h-4 w-4" />
+          )}
+          Generate AI tool items
+        </Button>
+        {toolsError && (
+          <span className="text-xs text-red-600">{toolsError}</span>
+        )}
+      </div>
       {aiError && (
         <div className="mt-2 rounded border border-red-200 bg-red-50 p-2 text-xs whitespace-pre-wrap text-red-700">
           {aiError}

package/src/editor/field-types/DateFieldEditor.tsx

@@ -114,8 +114,9 @@ export function DateFieldEditor({
         <Button
           variant="outline"
           data-empty={!date}
+          size="sm"
           className={cn(
-            "bg-gray-5 justify-start p-1 text-left text-xs font-normal",
+            "bg-gray-5 h-7.5 justify-start p-0 text-left text-xs font-normal",
             !date && "text-muted-foreground",
           )}
           disabled={readOnly}

package/src/editor/field-types/DateTimeFieldEditor.tsx

@@ -250,7 +250,7 @@ export function DateTimeFieldEditor({
           <PopoverTrigger asChild>
             <Button
               variant="ghost"
-              className="bg-gray-5 h-8 w-12 p-1 text-xs"
+              className="bg-gray-5 h-7.5 w-12 text-xs"
               disabled={readOnly || !date}
             >
               {minutes.toString().padStart(2, "0")}

package/src/editor/field-types/DropLinkEditor.tsx

@@ -42,11 +42,13 @@ export function DropLinkEditor({
   }, [field, editContext.sessionId]);
 
   // Convert ItemIdAndName[] to SelectOption[] - memoized to prevent recreation
-  const selectOptions: SelectOption[] = useMemo(() => 
-    lazyItems.map((item) => ({
-      value: item.id,
-      label: item.name,
-    })), [lazyItems]
+  const selectOptions: SelectOption[] = useMemo(
+    () =>
+      lazyItems.map((item) => ({
+        value: item.id,
+        label: item.name,
+      })),
+    [lazyItems],
   );
 
   return (
@@ -61,7 +63,7 @@ export function DropLinkEditor({
       options={selectOptions}
       placeholder="Select"
       disabled={readOnly}
-      className="md:w-14rem w-full"
+      className="md:w-14rem w-full rounded-sm"
       loading={lazyLoading}
       onLazyLoad={onLazyLoad}
       emptyMessage="No options available"

package/src/editor/field-types/DropListEditor.tsx

@@ -43,17 +43,19 @@ export function DropListEditor({
   }, [field, editContext.sessionId]);
 
   // Convert ItemIdAndName[] to SelectOption[] using name for both value and label - memoized
-  const selectOptions: SelectOption[] = useMemo(() => 
-    lazyItems.map((item) => ({
-      value: item.name,
-      label: item.name,
-    })), [lazyItems]
+  const selectOptions: SelectOption[] = useMemo(
+    () =>
+      lazyItems.map((item) => ({
+        value: item.name,
+        label: item.name,
+      })),
+    [lazyItems],
   );
 
   // Find the current value or show unknown value - memoized
-  const currentValue = useMemo(() => 
-    lazyItems.find((o) => o.name === field.value)?.name || field.value,
-    [lazyItems, field.value]
+  const currentValue = useMemo(
+    () => lazyItems.find((o) => o.name === field.value)?.name || field.value,
+    [lazyItems, field.value],
   );
 
   return (
@@ -68,7 +70,7 @@ export function DropListEditor({
       options={selectOptions}
       placeholder="Select"
       disabled={readOnly}
-      className="md:w-14rem w-full"
+      className="md:w-14rem w-full rounded-sm"
       loading={lazyLoading}
       onLazyLoad={onLazyLoad}
       emptyMessage="No options available"

package/src/editor/field-types/InternalLinkFieldEditor.tsx

@@ -121,7 +121,7 @@ export function InternalLinkFieldEditor({
         <PopoverTrigger asChild disabled={readOnly}>
           <div
             className={classNames(
-              "justiy-between focus-shadow bg-gray-5 flex cursor-pointer justify-between border p-1.5 text-xs",
+              "justiy-between focus-shadow bg-gray-5 flex cursor-pointer justify-between rounded-sm border p-1.5 text-xs",
               readOnly ? "cursor-default bg-gray-100" : "",
             )}
           >

package/src/editor/field-types/LinkFieldEditor.tsx

@@ -6,6 +6,7 @@ import { Link, LinkEditorDialog } from "../LinkEditorDialog";
 import { useEditContext } from "../client/editContext";
 import { LinkField } from "../fieldTypes";
 import { classNames } from "primereact/utils";
+import { Link as LinkIcon } from "lucide-react";
 
 export function LinkFieldEditor({
   field,
@@ -44,7 +45,7 @@ export function LinkFieldEditor({
         }}
       >
         <div>{field.value.url}</div>
-        <i className="pi pi-link"></i>
+        <LinkIcon className="h-4 w-4" strokeWidth={1} />
       </div>
       {showDialog && (
         <LinkEditorDialog