@alpaca-editor/core 1.0.4096 → 1.0.4098

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

@@ -3,32 +3,318 @@ import { Select } from "../../../../../components/ui/select";
 import { Input } from "../../../../../components/ui/input";
 import { Button } from "../../../../../components/ui/button";
 import { CheckCircle, RefreshCw } from "lucide-react";
+import { useEditContext } from "../../../../client/editContext";
+import type { ItemDescriptor } from "../../../../pageModel";
+import { getChildren } from "../../../../services/contentService";
+import type { ItemTreeNodeData } from "../../../../services/contentService";
+import { findByName, resolvePathUnderContent } from "../utils";
 
 interface ProviderOption {
   value: string;
   label: string;
 }
 
-interface ProviderSectionProps {
-  aiProvider: string;
-  aiOptions: ProviderOption[];
-  onProviderChange: (value: string) => void;
-  apiKey: string;
-  onApiKeyChange: (value: string) => void;
-  aiBusy: boolean;
-  onAddEndpoint: () => void;
-}
+export function ProviderSection() {
+  const editContext = useEditContext();
+  const [aiProvider, setAiProvider] = React.useState<string>("");
+  const [apiKey, setApiKey] = React.useState<string>("");
+  const [aiBusy, setAiBusy] = React.useState(false);
+  const [aiError, setAiError] = React.useState<string | null>(null);
+  const [endpoints, setEndpoints] = React.useState<ItemTreeNodeData[]>([]);
+  const [loadingEndpoints, setLoadingEndpoints] = React.useState(false);
+  const [endpointsError, setEndpointsError] = React.useState<string | null>(
+    null,
+  );
+  const lastLoadAtRef = React.useRef<number>(0);
+  const isLoadingRef = React.useRef<boolean>(false);
+
+  const userLang = editContext?.contentEditorItem?.language || "en";
+  const sessionId = editContext?.sessionId;
+
+  const aiOptions = React.useMemo<ProviderOption[]>(
+    () => [
+      { value: "openai", label: "OpenAI" },
+      { value: "azure-openai", label: "Azure OpenAI" },
+      { value: "openrouter", label: "OpenRouter" },
+    ],
+    [],
+  );
+
+  const loadEndpoints = React.useCallback(
+    async (options?: { force?: boolean }) => {
+      if (!sessionId) return;
+      try {
+        const now = Date.now();
+        const MIN_INTERVAL_MS = 2000;
+        if (!options?.force) {
+          if (isLoadingRef.current) return;
+          if (now - lastLoadAtRef.current < MIN_INTERVAL_MS) return;
+        }
+        isLoadingRef.current = true;
+        lastLoadAtRef.current = now;
+        setLoadingEndpoints(true);
+        setEndpointsError(null);
+
+        const settingsItem = await resolvePathUnderContent(
+          sessionId,
+          userLang,
+          ["Settings", "Editor"],
+        );
+        if (!settingsItem) {
+          setEndpoints([]);
+          return;
+        }
+
+        const children = (await getChildren(
+          settingsItem.id,
+          sessionId!,
+          [],
+          false,
+          userLang,
+          "path",
+        )) as unknown as ItemTreeNodeData[];
+        const aiEndpointsParent = findByName(children, "Ai Endpoints");
+        if (!aiEndpointsParent) {
+          setEndpoints([]);
+          return;
+        }
+
+        const epChildren = (await getChildren(
+          aiEndpointsParent.id,
+          sessionId!,
+          [],
+          false,
+          userLang,
+          "path",
+        )) as unknown as ItemTreeNodeData[];
+        setEndpoints(epChildren || []);
+      } catch (e: any) {
+        setEndpointsError(e?.message || "Failed to load AI endpoints");
+      } finally {
+        isLoadingRef.current = false;
+        setLoadingEndpoints(false);
+      }
+    },
+    [sessionId, userLang],
+  );
+
+  const createAiEndpoint = React.useCallback(async () => {
+    if (!aiProvider || !editContext) return;
+    try {
+      setAiBusy(true);
+      setAiError(null);
+
+      const settingsItem = await resolvePathUnderContent(
+        editContext.sessionId,
+        userLang,
+        ["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;
+      }
 
-export function ProviderSection(props: ProviderSectionProps) {
-  const {
-    aiProvider,
-    aiOptions,
-    onProviderChange,
-    apiKey,
-    onApiKeyChange,
-    aiBusy,
-    onAddEndpoint,
-  } = props;
+      // 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",
+          });
+        }
+      }
+
+      editContext.requestRefresh?.("immediate");
+      editContext.showToast?.(
+        `Added '${endpointName}' AI endpoint successfully`,
+      );
+      await loadEndpoints({ force: true });
+      setAiProvider("");
+      setApiKey("");
+    } catch (e: any) {
+      setAiError(e?.message || "Failed to add AI endpoint");
+    } finally {
+      setAiBusy(false);
+    }
+  }, [aiProvider, editContext, userLang, apiKey, loadEndpoints]);
+
+  React.useEffect(() => {
+    loadEndpoints({ force: true });
+  }, [loadEndpoints]);
 
   return (
     <>
@@ -40,10 +326,58 @@ export function ProviderSection(props: ProviderSectionProps) {
           </span>
         </div>
       </div>
-      <div className="mt-3 flex items-center gap-2">
+      <div className="mt-3">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-xs text-gray-600">Existing endpoints</span>
+          <Button
+            size="sm"
+            disabled={loadingEndpoints}
+            onClick={() => loadEndpoints({ force: true })}
+          >
+            {loadingEndpoints ? (
+              <RefreshCw
+                strokeWidth={1}
+                className="h-4 w-4 animate-spin"
+              />
+            ) : (
+              <RefreshCw strokeWidth={1} className="h-4 w-4" />
+            )}
+            Refresh
+          </Button>
+        </div>
+        <div className="mt-2">
+          {endpointsError && (
+            <div className="rounded border border-red-200 bg-red-50 p-2 text-xs whitespace-pre-wrap text-red-700">
+              {endpointsError}
+            </div>
+          )}
+          {!endpointsError && (
+            <>
+              {loadingEndpoints ? (
+                <div className="text-xs text-gray-500 flex items-center gap-2">
+                  <RefreshCw
+                    strokeWidth={1}
+                    className="h-4 w-4 animate-spin"
+                  />
+                  Loading endpoints…
+                </div>
+              ) : endpoints.length > 0 ? (
+                <ul className="list-disc pl-5 text-xs text-gray-700">
+                  {endpoints.map((ep) => (
+                    <li key={ep.id}>{ep.displayName || ep.name}</li>
+                  ))}
+                </ul>
+              ) : (
+                <div className="text-xs text-gray-500">No AI endpoints found.</div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+      <div className="mt-3 flex flex-col items-stretch gap-2">
         <Select
           value={aiProvider}
-          onValueChange={onProviderChange}
+          onValueChange={setAiProvider}
           options={aiOptions}
           placeholder="Choose provider"
         />
@@ -52,14 +386,14 @@ export function ProviderSection(props: ProviderSectionProps) {
             type="password"
             placeholder="API key"
             value={apiKey}
-            onChange={(e) => onApiKeyChange(e.target.value)}
-            className="w-56"
+            onChange={(e) => setApiKey(e.target.value)}
+            
           />
         )}
         <Button
           size="sm"
           disabled={!aiProvider || !apiKey || aiBusy}
-          onClick={onAddEndpoint}
+          onClick={createAiEndpoint}
         >
           {aiBusy ? (
             <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
@@ -69,6 +403,11 @@ export function ProviderSection(props: ProviderSectionProps) {
           Add endpoint
         </Button>
       </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}
+        </div>
+      )}
     </>
   );
 }

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button } from "../../../../../components/ui/button";
 import { AlertCircle, CheckCircle, RefreshCw } from "lucide-react";
-import type { StepState } from "../index";
+import type { StepState } from "../types";
 
 interface RequiredContainerDef {
   name: string;

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

@@ -0,0 +1,139 @@
+import React from "react";
+import { useEditContext } from "../../../../client/editContext";
+import type { ItemDescriptor } from "../../../../pageModel";
+import { getChildren } from "../../../../services/contentService";
+import type { ItemTreeNodeData } from "../../../../services/contentService";
+import type { StepState } from "../types";
+import { RequiredContainersList } from "./RequiredContainersList";
+import { findByName, resolvePathUnderContent } from "../utils";
+
+interface RequiredContainerDef {
+  name: string;
+  templateId: string;
+}
+
+export function RequiredContainersSection() {
+  const editContext = useEditContext();
+  const userLang = editContext?.contentEditorItem?.language || "en";
+
+  const requiredContainers = React.useMemo<RequiredContainerDef[]>(
+    () => [
+      { 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 [editorSettingsItem, setEditorSettingsItem] =
+    React.useState<ItemDescriptor | null>(null);
+  const [containersError, setContainersError] = React.useState<string | null>(
+    null,
+  );
+  const [containerStates, setContainerStates] = React.useState<
+    Record<string, StepState>
+  >({});
+  const [busyMap, setBusyMap] = React.useState<Record<string, boolean>>({});
+
+  const checkRequiredContainers = React.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(
+        editContext?.sessionId,
+        userLang,
+        ["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, userLang]);
+
+  React.useEffect(() => {
+    checkRequiredContainers();
+  }, [checkRequiredContainers]);
+
+  const createContainer = React.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 (
+    <RequiredContainersList
+      requiredContainers={requiredContainers}
+      containerStates={containerStates}
+      busyMap={busyMap}
+      canFix={!!editorSettingsItem}
+      containersError={containersError}
+      onFixContainer={createContainer}
+    />
+  );
+}