@alpaca-editor/core 1.0.4096 → 1.0.4098

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

@@ -1,106 +1,17 @@
-import React, { useCallback, useMemo, useState } from "react";
+import { useState } from "react";
 import { Card } from "../../../../components/ui/card";
 import { useEditContext } from "../../../client/editContext";
-import { ItemDescriptor } from "../../../pageModel";
-import { getChildren } from "../../../services/contentService";
-import type { ItemTreeNodeData } from "../../../services/contentService";
 import { SparklesIcon } from "lucide-react";
-import { contentItemId } from "../../../../config/config";
-import { RequiredContainersList } from "./required-containers/RequiredContainersList";
+import { RequiredContainersSection } from "./required-containers/RequiredContainersSection";
 import { ProviderSection } from "./provider/ProviderSection";
 import { GenerateToolsSection } from "./tools/GenerateToolsSection";
-
-export type StepState = "idle" | "checking" | "success" | "error";
-
-function findByName(
-  items: ItemTreeNodeData[],
-  name: string,
-): ItemTreeNodeData | undefined {
-  const target = name.toLowerCase();
-  return items.find(
-    (x) =>
-      (((x.displayName as string) || x.name || "") as string).toLowerCase() ===
-      target,
-  );
-}
+import type { StepState } from "./types";
 
 export function AiSetupStep() {
   const editContext = useEditContext();
   const [aiState, setAiState] = useState<StepState>("idle");
-  const [aiProvider, setAiProvider] = useState<string>("");
-  const [aiBusy, setAiBusy] = useState(false);
-  const [aiError, setAiError] = useState<string | null>(null);
-  const [apiKey, setApiKey] = useState<string>("");
-
-  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 Quotas", templateId: "7a08ff28-70ed-459b-a7f2-db2a78d88f46" },
-      {
-        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 [busyMap, setBusyMap] = useState<Record<string, boolean>>({});
-
   const userLang = editContext?.contentEditorItem?.language || "en";
 
-  const aiOptions = useMemo(
-    () => [
-      { value: "openai", label: "OpenAI" },
-      { value: "azure-openai", label: "Azure OpenAI" },
-      { value: "openrouter", label: "OpenRouter" },
-    ],
-    [],
-  );
-
-  const resolvePathUnderContent = React.useCallback(
-    async (names: string[]): Promise<ItemDescriptor | null> => {
-      if (!editContext?.sessionId) return null;
-      let currentId = contentItemId;
-      for (const segment of names) {
-        const children = (await getChildren(
-          currentId,
-          editContext.sessionId,
-          [],
-          false,
-          userLang,
-          "path",
-        )) as unknown as ItemTreeNodeData[];
-        const next = findByName(children, segment);
-        if (!next) return null;
-        currentId = next.id;
-      }
-      return {
-        id: currentId,
-        language: userLang,
-        version: 0,
-      } as ItemDescriptor;
-    },
-    [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
@@ -108,582 +19,18 @@ export function AiSetupStep() {
   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 {
-      setAiBusy(true);
-      setAiError(null);
-
-      const settingsItem = await resolvePathUnderContent([
-        "Settings",
-        "Editor",
-      ]);
-      if (!settingsItem)
-        throw new Error("Editor settings item not found. Create it first.");
-
-      const children = (await getChildren(
-        settingsItem.id,
-        editContext.sessionId!,
-        [],
-        false,
-        userLang,
-        "path",
-      )) as unknown as ItemTreeNodeData[];
-      let aiEndpointsParent = findByName(children, "Ai Endpoints");
-      if (!aiEndpointsParent) {
-        const aiEndpointsTemplateId = "4592f2e0-06e4-470e-9820-7fd4ea148e00";
-        const createdContainer = await editContext.operations.createItem(
-          settingsItem,
-          aiEndpointsTemplateId,
-          "Ai Endpoints",
-        );
-        if (!createdContainer)
-          throw new Error("Failed to create 'Ai Endpoints' container");
-        aiEndpointsParent = {
-          id: createdContainer.id,
-          name: "Ai Endpoints",
-          thumbUrl: "",
-          previewUrl: "",
-          templateId: "",
-          icon: "",
-          hasChildren: false,
-          isComponent: false,
-          displayName: "Ai Endpoints",
-          language: userLang,
-          version: 0,
-          hasLayout: false,
-        } as unknown as ItemTreeNodeData;
-      }
-
-      const endpointTemplateId = "a6358b92-a9ea-4dd8-b4e1-7d6d3a3b9c40";
-      const endpointName =
-        aiProvider === "openai"
-          ? "OpenAI"
-          : aiProvider === "azure-openai"
-            ? "Azure OpenAI"
-            : "Open Router";
-
-      // Find or create endpoint
-      let endpointItem: ItemDescriptor | null = null;
-      const epChildren = (await getChildren(
-        aiEndpointsParent!.id,
-        editContext.sessionId!,
-        [],
-        false,
-        userLang,
-        "path",
-      )) as unknown as ItemTreeNodeData[];
-      const existingEndpoint = findByName(epChildren, endpointName);
-      if (existingEndpoint) {
-        endpointItem = {
-          id: existingEndpoint.id,
-          language: userLang,
-          version: 0,
-        } as ItemDescriptor;
-      } else {
-        const created = await editContext.operations.createItem(
-          {
-            id: aiEndpointsParent!.id,
-            language: userLang,
-            version: 0,
-          } as ItemDescriptor,
-          endpointTemplateId,
-          endpointName,
-        );
-        if (!created) throw new Error("Failed to create AI endpoint");
-        endpointItem = created;
-      }
-
-      // Set API key if provided
-      if (apiKey && endpointItem) {
-        const apiKeyFieldId = "db07ae53-459a-4314-89b3-ab2721df2b4f";
-        await editContext.operations.editField({
-          field: {
-            fieldId: apiKeyFieldId,
-            item: {
-              id: endpointItem.id,
-              language: userLang,
-              version: 0,
-            },
-          },
-          value: apiKey,
-          rawValue: apiKey,
-          refresh: "delayed",
-        });
-      }
-
-      // Ensure Ai Models container exists
-      let aiModelsParent = findByName(children, "Ai Models");
-      if (!aiModelsParent) {
-        const aiModelsTemplateId = "e5f6a7b8-9c0d-1e2f-3a4b-5c6d7e8f9a0b";
-        const createdModels = await editContext.operations.createItem(
-          settingsItem,
-          aiModelsTemplateId,
-          "Ai Models",
-        );
-        if (!createdModels)
-          throw new Error("Failed to create 'Ai Models' container");
-        aiModelsParent = {
-          id: createdModels.id,
-          name: "Ai Models",
-          thumbUrl: "",
-          previewUrl: "",
-          templateId: "",
-          icon: "",
-          hasChildren: false,
-          isComponent: false,
-          displayName: "Ai Models",
-          language: userLang,
-          version: 0,
-          hasLayout: false,
-        } as unknown as ItemTreeNodeData;
-      }
-
-      // Create default models if missing and link to endpoint
-      const modelsToEnsure = ["gpt-5", "gpt5-high", "image-1"];
-      const modelTemplateId = "d2e3f4a5-4b5c-5c6d-bf0b-3e4f5a6b7c8e";
-      const modelNameFieldId = "f1e2d3c4-5b6a-7980-8e9f-1a2b3c4d5e6f";
-      const modelEndpointFieldId = "cbade708-ce95-4f54-81b7-308ea61a76a6";
-
-      const modelChildren = (await getChildren(
-        aiModelsParent.id,
-        editContext.sessionId!,
-        [],
-        false,
-        userLang,
-        "path",
-      )) as unknown as ItemTreeNodeData[];
-
-      for (const modelName of modelsToEnsure) {
-        let modelNode = findByName(modelChildren, modelName);
-        if (!modelNode) {
-          const createdModel = await editContext.operations.createItem(
-            {
-              id: aiModelsParent.id,
-              language: userLang,
-              version: 0,
-            } as ItemDescriptor,
-            modelTemplateId,
-            modelName,
-          );
-          if (!createdModel)
-            throw new Error(`Failed to create model '${modelName}'`);
-          modelNode = {
-            id: createdModel.id,
-            name: modelName,
-            displayName: modelName,
-            thumbUrl: "",
-            previewUrl: "",
-            templateId: "",
-            icon: "",
-            hasChildren: false,
-            isComponent: false,
-            language: userLang,
-            version: 0,
-            hasLayout: false,
-          } as unknown as ItemTreeNodeData;
-
-          await editContext.operations.editField({
-            field: {
-              fieldId: modelNameFieldId,
-              item: { id: modelNode.id, language: userLang, version: 0 },
-            },
-            value: modelName,
-            rawValue: modelName,
-            refresh: "delayed",
-          });
-
-          const endpointGuid = `{${(endpointItem!.id as string)
-            .replace(/[{}()]/g, "")
-            .toUpperCase()}}`;
-          await editContext.operations.editField({
-            field: {
-              fieldId: modelEndpointFieldId,
-              item: { id: modelNode.id, language: userLang, version: 0 },
-            },
-            rawValue: endpointGuid,
-            refresh: "delayed",
-          });
-        }
-      }
-
-      setAiState("success");
-      editContext.requestRefresh?.("immediate");
-    } catch (e: any) {
-      setAiState("error");
-      setAiError(e?.message || "Failed to add AI endpoint");
-    } finally {
-      setAiBusy(false);
-    }
-  }, [aiProvider, editContext, userLang, resolvePathUnderContent, apiKey]);
-
-  const checkRequiredContainers = useCallback(async () => {
-    try {
-      setContainersError(null);
-      const initialStates: Record<string, StepState> = {};
-      for (const rc of requiredContainers) initialStates[rc.name] = "checking";
-      setContainerStates(initialStates);
-
-      const settingsItem = await resolvePathUnderContent([
-        "Settings",
-        "Editor",
-      ]);
-      if (!settingsItem) {
-        setEditorSettingsItem(null);
-        const errorMsg = "Editor settings item not found. Create it first.";
-        setContainersError(errorMsg);
-        const errorStates: Record<string, StepState> = {};
-        for (const rc of requiredContainers) errorStates[rc.name] = "error";
-        setContainerStates(errorStates);
-        return;
-      }
-
-      setEditorSettingsItem(settingsItem);
-      const children = (await getChildren(
-        settingsItem.id,
-        editContext!.sessionId!,
-        [],
-        false,
-        userLang,
-        "path",
-      )) as unknown as ItemTreeNodeData[];
-
-      const states: Record<string, StepState> = {};
-      for (const rc of requiredContainers) {
-        const exists = !!findByName(children, rc.name);
-        states[rc.name] = exists ? "success" : "error";
-      }
-      setContainerStates(states);
-    } catch (e: any) {
-      setContainersError(e?.message || "Failed to check AI containers");
-      const errorStates: Record<string, StepState> = {};
-      for (const rc of requiredContainers) errorStates[rc.name] = "error";
-      setContainerStates(errorStates);
-    }
-  }, [editContext, requiredContainers, resolvePathUnderContent, userLang]);
-
-  React.useEffect(() => {
-    checkRequiredContainers();
-  }, [checkRequiredContainers]);
-
-  const createContainer = useCallback(
-    async (name: string, templateId: string) => {
-      if (!editorSettingsItem || !editContext) return;
-      try {
-        setBusyMap((s) => ({ ...s, [name]: true }));
-        setContainersError(null);
-
-        const created = await editContext.operations.createItem(
-          editorSettingsItem,
-          templateId,
-          name,
-        );
-
-        if (!created) throw new Error(`Failed to create '${name}'`);
-        setContainerStates((s) => ({ ...s, [name]: "success" }));
-      } catch (e: any) {
-        setContainersError(e?.message || `Failed to create '${name}'`);
-        setContainerStates((s) => ({ ...s, [name]: "error" }));
-      } finally {
-        setBusyMap((s) => ({ ...s, [name]: false }));
-      }
-    },
-    [editorSettingsItem, editContext],
-  );
-
   return (
     <Card
+      className="w-full"
       icon={<SparklesIcon strokeWidth={1} className="h-5 w-5" />}
       title="AI setup"
       description="Add an AI endpoint (OpenAI, Azure OpenAI, or OpenRouter)."
     >
-      <RequiredContainersList
-        requiredContainers={requiredContainers}
-        containerStates={containerStates}
-        busyMap={busyMap}
-        canFix={!!editorSettingsItem}
-        containersError={containersError}
-        onFixContainer={createContainer}
-      />
-
-      <ProviderSection
-        aiProvider={aiProvider}
-        aiOptions={aiOptions}
-        onProviderChange={setAiProvider}
-        apiKey={apiKey}
-        onApiKeyChange={setApiKey}
-        aiBusy={aiBusy}
-        onAddEndpoint={createAiEndpoint}
-      />
+      <RequiredContainersSection />
 
-      <GenerateToolsSection
-        toolsBusy={toolsBusy}
-        toolsError={toolsError}
-        onGenerateTools={ensureAiToolsAndGenerate}
-      />
+      <ProviderSection />
 
-      {aiError && (
-        <div className="mt-2 rounded border border-red-200 bg-red-50 p-2 text-xs whitespace-pre-wrap text-red-700">
-          {aiError}
-        </div>
-      )}
+      <GenerateToolsSection />
     </Card>
   );
 }