@alpaca-editor/core 1.0.4086 → 1.0.4088

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

@@ -0,0 +1,462 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Card } from "../../../components/ui/card";
+import { Button } from "../../../components/ui/button";
+import { Select } from "../../../components/ui/select";
+import { Input } from "../../../components/ui/input";
+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 { contentItemId } from "../../../config/config";
+
+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,
+  );
+}
+
+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" },
+    ],
+    [],
+  );
+  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],
+  );
+
+  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]);
+
+  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
+      icon={<SparklesIcon strokeWidth={1} className="h-5 w-5" />}
+      title="AI setup"
+      description="Add an AI endpoint (OpenAI, Azure OpenAI, or OpenRouter)."
+    >
+      <div className="flex flex-col gap-2">
+        {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" />
+                ) : (
+                  <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">
+          {containersError}
+        </div>
+      )}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <CheckCircle strokeWidth={1} className="h-4 w-4 text-green-600" />
+          <span className="text-sm text-gray-700">
+            Select provider and add endpoint
+          </span>
+        </div>
+      </div>
+      <div className="mt-3 flex items-center gap-2">
+        <Select
+          value={aiProvider}
+          onValueChange={setAiProvider}
+          options={aiOptions}
+          placeholder="Choose provider"
+        />
+        {aiProvider && (
+          <Input
+            type="password"
+            placeholder="API key"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            className="w-56"
+          />
+        )}
+        <Button
+          size="sm"
+          disabled={!aiProvider || !apiKey || aiBusy}
+          onClick={createAiEndpoint}
+        >
+          {aiBusy ? (
+            <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
+          ) : (
+            <CheckCircle strokeWidth={1} className="h-4 w-4" />
+          )}
+          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>
+      )}
+    </Card>
+  );
+}
+
+export default AiSetupStep;

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

@@ -0,0 +1,84 @@
+import React, { useCallback, useState } from "react";
+import { Card } from "../../../components/ui/card";
+import { Button } from "../../../components/ui/button";
+import { get } from "../../services/serviceHelper";
+import { CheckCircle, AlertCircle, Database, RefreshCw } from "lucide-react";
+
+type StepState = "idle" | "checking" | "success" | "error";
+
+type SystemStatusResponse = {
+  messages?: { message: string; severity: "info" | "warning" | "error" }[];
+};
+
+export function DbSetupStep() {
+  const [dbState, setDbState] = useState<StepState>("checking");
+  const [dbError, setDbError] = useState<string | null>(null);
+
+  const statusIcon = useCallback((state: StepState) => {
+    if (state === "success")
+      return <CheckCircle className="h-4 w-4 text-green-600" strokeWidth={1} />;
+    if (state === "error")
+      return <AlertCircle className="h-4 w-4 text-red-600" strokeWidth={1} />;
+    return (
+      <RefreshCw
+        className="h-4 w-4 animate-spin text-amber-600"
+        strokeWidth={1}
+      />
+    );
+  }, []);
+
+  const checkDb = useCallback(async () => {
+    try {
+      setDbState("checking");
+      setDbError(null);
+      const res = await get<SystemStatusResponse>("/alpaca/editor/status");
+      const errors =
+        res?.data?.messages?.filter((m) => m.severity === "error") || [];
+      if (errors.length > 0) {
+        setDbState("error");
+        setDbError(errors.map((x) => x.message).join("\n"));
+      } else {
+        setDbState("success");
+      }
+    } catch (e: any) {
+      setDbState("error");
+      setDbError(e?.message || "Failed to check DB status");
+    }
+  }, []);
+
+  React.useEffect(() => {
+    checkDb();
+  }, [checkDb]);
+
+  return (
+    <Card
+      icon={<Database strokeWidth={1} className="h-5 w-5" />}
+      title="Database setup"
+      description="Verifies that all DB migrations ran successfully."
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          {statusIcon(dbState)}
+          <span className="text-sm text-gray-700">
+            {dbState === "success"
+              ? "All migrations are applied"
+              : dbState === "error"
+                ? "There are migration issues"
+                : "Checking..."}
+          </span>
+        </div>
+        <Button size="sm" variant="outline" onClick={checkDb}>
+          <RefreshCw strokeWidth={1} className="h-4 w-4" />
+          Recheck
+        </Button>
+      </div>
+      {dbError && (
+        <div className="mt-2 rounded border border-red-200 bg-red-50 p-2 text-xs whitespace-pre-wrap text-red-700">
+          {dbError}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default DbSetupStep;

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

@@ -0,0 +1,56 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Card } from "../../../components/ui/card";
+import { Button } from "../../../components/ui/button";
+import { Badge } from "../../../components/ui/badge";
+import { ExternalLink, Link2 } from "lucide-react";
+import { getCombinedIndexStatus } from "../../services/indexService";
+import { useEditContext } from "../../client/editContext";
+
+export function IndexSetupStep() {
+  const [indexCount, setIndexCount] = useState<number | null>(null);
+  const [indexLoading, setIndexLoading] = useState(false);
+  const editContext = useEditContext();
+
+  const goToIndexPanel = useCallback(() => {
+    editContext?.switchView("control-center");
+    editContext?.updateUrl({ ccpanel: "index" });
+  }, [editContext]);
+
+  const loadIndex = useCallback(async () => {
+    try {
+      setIndexLoading(true);
+      const data = await getCombinedIndexStatus();
+      const count = data?.indexStatus?.numberOfIndexedItems ?? null;
+      setIndexCount(typeof count === "number" ? count : null);
+    } finally {
+      setIndexLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadIndex();
+  }, [loadIndex]);
+
+  return (
+    <Card
+      icon={<Link2 strokeWidth={1} className="h-5 w-5" />}
+      title="Search index"
+      description="Shows number of indexed items and links to Index panel."
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">
+            Indexed Items:{" "}
+            {indexLoading ? "..." : (indexCount ?? 0).toLocaleString()}
+          </Badge>
+        </div>
+        <Button size="sm" variant="outline" onClick={goToIndexPanel}>
+          <ExternalLink strokeWidth={1} className="h-4 w-4" />
+          Open Index
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
+export default IndexSetupStep;