@alpaca-editor/core 1.0.4095 → 1.0.4097

package/src/editor/client/hooks/useSocketMessageHandler.ts

@@ -244,6 +244,9 @@ export function useSocketMessageHandler(deps: {
       if (message.type === "edit-operation") {
         const op = message.payload as EditOperation;
         if (op.type === "edit-field") {
+          // Ignore our own edit-field operations to avoid redundant updates
+          if (op.sessionId && op.sessionId === sessionId) return;
+          
           const editFieldOperation = op as any;
           const field = await itemsRepository.getField({
             item: {

package/src/editor/client/itemsRepository.ts

@@ -68,9 +68,7 @@ const TEMPLATE_SECTION_TEMPLATE_ID = "E269FBB5-3750-427A-9149-7AA950B49301"; //
 /**
  * Checks if an item change represents a template-related modification that should trigger cache clearing
  */
-const isTemplateChange = async (
-  change: ItemChange
-): Promise<boolean> => {
+const isTemplateChange = async (change: ItemChange): Promise<boolean> => {
   try {
     // Check if the item is under the /sitecore/templates path
     if (
@@ -483,6 +481,7 @@ export function useItemsRepository(
 
       if (itemsToFetch.length !== 0) {
         const time = Date.now();
+        const startSequence = saveSequenceCounter.current;
         await fetchItemsFromServer(itemsToFetch);
 
         const getFieldValue = (
@@ -515,8 +514,9 @@ export function useItemsRepository(
               modifiedField.fieldId,
             );
 
-            // If our cached modified value is different from the server, update the cached value
-            if (isOutdated(modifiedField)) {
+            // Avoid clobbering in-flight edits: only sync to server value if not dirty
+            if (isOutdated(modifiedField) && !modifiedField.isDirty) {
+              console.log("Syncing to server value", modifiedField.fieldId, modifiedField.item.id, modifiedField.item.language, modifiedField.item.version, serverValue);
               return { ...modifiedField, value: serverValue };
             }
 
@@ -532,6 +532,7 @@ export function useItemsRepository(
         };
 
         const isOutdated = (x: ModifiedField) => {
+          if (x.saveSequence > startSequence) return false;
           if (x.timestamp > time) return false;
           const item = itemsMap.current.get(generateKey(x.item));
           if (!item) return true;

package/src/editor/control-center/Setup.tsx

@@ -16,7 +16,7 @@ export function Setup() {
   return (
     <div className="h-full overflow-auto p-4">
       <div className="mb-4 text-lg font-semibold text-gray-800">Setup</div>
-      <div className="grid grid-cols-1 gap-4">
+      <div className="grid grid-cols-1 gap-4 max-w-xl">
         {steps.map((Step, idx) => (
           <Step key={idx} />
         ))}

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

@@ -0,0 +1,296 @@
+import React from "react";
+import { Button } from "../../../../components/ui/button";
+import { AlertCircle, 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";
+import type { StepState } from "./types";
+
+// Sitecore IDs and constants used by AI models/endpoints
+const AI_MODELS_CONTAINER_TEMPLATE_ID = "e5f6a7b8-9c0d-1e2f-3a4b-5c6d7e8f9a0b";
+const AI_MODEL_TEMPLATE_ID = "d2e3f4a5-4b5c-5c6d-bf0b-3e4f5a6b7c8e";
+const MODEL_NAME_FIELD_ID = "f1e2d3c4-5b6a-7980-8e9f-1a2b3c4d5e6f";
+const MODEL_ENDPOINT_FIELD_ID = "cbade708-ce95-4f54-81b7-308ea61a76a6";
+const EDITOR_SETTINGS_EMBEDDINGS_MODEL_FIELD_ID = "08d0579d-3bf2-4777-981f-3f0856da948e"; // Embeddings Model (Droptree)
+
+const DEFAULT_EMBEDDINGS_MODEL_NAME = "text-embedding-3-large";
+
+export function EmbeddingsModelSection() {
+  const editContext = useEditContext();
+  const [state, setState] = React.useState<StepState>("checking");
+  const [error, setError] = React.useState<string | null>(null);
+  const [isBusy, setIsBusy] = React.useState(false);
+  const [currentModelName, setCurrentModelName] = React.useState<string | null>(
+    null,
+  );
+
+  const userLang = editContext?.contentEditorItem?.language || "en";
+
+  const statusIcon = React.useCallback((s: StepState) => {
+    if (s === "success")
+      return <CheckCircle className="h-4 w-4 text-green-600" strokeWidth={1} />;
+    if (s === "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 checkStatus = React.useCallback(async () => {
+    try {
+      setState("checking");
+      setError(null);
+      setCurrentModelName(null);
+
+      const settingsItem = await resolvePathUnderContent(
+        editContext?.sessionId,
+        userLang,
+        ["Settings", "Editor"],
+      );
+      if (!settingsItem) {
+        setState("error");
+        setError("Editor settings item not found. Create it first.");
+        return;
+      }
+
+      // Read the Embeddings Model droptree field
+      const field = await editContext!.itemsRepository.getField({
+        item: { id: settingsItem.id, language: userLang, version: 0 },
+        fieldId: EDITOR_SETTINGS_EMBEDDINGS_MODEL_FIELD_ID,
+      });
+
+      const raw = (field?.rawValue || "").trim();
+      if (!raw) {
+        setState("error");
+        return;
+      }
+
+      // Normalize ID braces and load the model item to get its display name
+      const modelId = raw.replace(/^[{(]+|[})]+$/g, "");
+      const model = await editContext!.itemsRepository.getItem({
+        id: `{${modelId}}`,
+        language: userLang,
+        version: 0,
+      });
+      if (!model) {
+        setState("error");
+        setError(
+          "Embeddings Model points to a missing item. Please fix to re-create and assign.",
+        );
+        return;
+      }
+
+      setCurrentModelName(model.name);
+      setState("success");
+    } catch (e: any) {
+      setState("error");
+      setError(e?.message || "Failed to check embeddings model");
+    }
+  }, [editContext, userLang]);
+
+  React.useEffect(() => {
+    checkStatus();
+  }, [checkStatus]);
+
+  const ensureEmbeddingsModel = React.useCallback(async () => {
+    if (!editContext) return;
+    try {
+      setIsBusy(true);
+      setError(null);
+
+      const settingsItem = await resolvePathUnderContent(
+        editContext.sessionId,
+        userLang,
+        ["Settings", "Editor"],
+      );
+      if (!settingsItem)
+        throw new Error("Editor settings item not found. Create it first.");
+
+      // Load children under /Settings/Editor
+      const editorChildren = (await getChildren(
+        settingsItem.id,
+        editContext.sessionId!,
+        [],
+        false,
+        userLang,
+        "path",
+      )) as unknown as ItemTreeNodeData[];
+
+      // Find endpoints container and choose OpenAI or Azure OpenAI endpoint
+      const endpointsContainer = findByName(editorChildren, "Ai Endpoints");
+      if (!endpointsContainer) {
+        throw new Error(
+          "No AI endpoints found. Please add an OpenAI or Azure OpenAI endpoint first.",
+        );
+      }
+      const endpointChildren = (await getChildren(
+        endpointsContainer.id,
+        editContext.sessionId!,
+        [],
+        false,
+        userLang,
+        "path",
+      )) as unknown as ItemTreeNodeData[];
+      const openAi = findByName(endpointChildren, "OpenAI");
+      const azureOpenAi = findByName(endpointChildren, "Azure OpenAI");
+      const selectedEndpoint = openAi || azureOpenAi;
+      if (!selectedEndpoint) {
+        throw new Error(
+          "No OpenAI or Azure OpenAI endpoint exists. Add one in 'Provider' section.",
+        );
+      }
+
+      // Ensure Ai Models container exists
+      let modelsContainer = findByName(editorChildren, "Ai Models");
+      if (!modelsContainer) {
+        const createdModels = await editContext.operations.createItem(
+          settingsItem,
+          AI_MODELS_CONTAINER_TEMPLATE_ID,
+          "Ai Models",
+        );
+        if (!createdModels)
+          throw new Error("Failed to create 'Ai Models' container");
+        modelsContainer = {
+          id: createdModels.id,
+          name: "Ai Models",
+          displayName: "Ai Models",
+          thumbUrl: "",
+          previewUrl: "",
+          templateId: "",
+          icon: "",
+          hasChildren: false,
+          isComponent: false,
+          language: userLang,
+          version: 0,
+          hasLayout: false,
+        } as unknown as ItemTreeNodeData;
+      }
+
+      // Find or create the "text-embedding-3-large" model
+      const modelChildren = (await getChildren(
+        modelsContainer.id,
+        editContext.sessionId!,
+        [],
+        false,
+        userLang,
+        "path",
+      )) as unknown as ItemTreeNodeData[];
+
+      let modelNode = findByName(modelChildren, DEFAULT_EMBEDDINGS_MODEL_NAME);
+      let modelDescriptor: ItemDescriptor | null = null;
+
+      if (modelNode) {
+        modelDescriptor = {
+          id: modelNode.id,
+          language: userLang,
+          version: 0,
+        } as ItemDescriptor;
+      } else {
+        const createdModel = await editContext.operations.createItem(
+          {
+            id: modelsContainer.id,
+            language: userLang,
+            version: 0,
+          } as ItemDescriptor,
+          AI_MODEL_TEMPLATE_ID,
+          DEFAULT_EMBEDDINGS_MODEL_NAME,
+        );
+        if (!createdModel)
+          throw new Error(
+            `Failed to create model '${DEFAULT_EMBEDDINGS_MODEL_NAME}'`,
+          );
+        modelDescriptor = createdModel;
+
+        // Set Model Name field
+        await editContext.operations.editField({
+          field: {
+            fieldId: MODEL_NAME_FIELD_ID,
+            item: {
+              id: modelDescriptor.id,
+              language: userLang,
+              version: 0,
+            },
+          },
+          value: DEFAULT_EMBEDDINGS_MODEL_NAME,
+          rawValue: DEFAULT_EMBEDDINGS_MODEL_NAME,
+          refresh: "delayed",
+        });
+      }
+
+      // Link model to the selected endpoint
+      const endpointGuid = `{${(selectedEndpoint.id as string)
+        .replace(/[{}()]/g, "")
+        .toUpperCase()}}`;
+      await editContext.operations.editField({
+        field: {
+          fieldId: MODEL_ENDPOINT_FIELD_ID,
+          item: { id: modelDescriptor!.id, language: userLang, version: 0 },
+        },
+        rawValue: endpointGuid,
+        refresh: "delayed",
+      });
+
+      // Assign model to Editor settings' Embeddings Model field
+      const modelGuid = `{${(modelDescriptor!.id as string)
+        .replace(/[{}()]/g, "")
+        .toUpperCase()}}`;
+      await editContext.operations.editField({
+        field: {
+          fieldId: EDITOR_SETTINGS_EMBEDDINGS_MODEL_FIELD_ID,
+          item: { id: settingsItem.id, language: userLang, version: 0 },
+        },
+        rawValue: modelGuid,
+        refresh: "immediate",
+      });
+
+      editContext.requestRefresh?.("immediate");
+      editContext.showToast?.(
+        `Embeddings model set to '${DEFAULT_EMBEDDINGS_MODEL_NAME}'`,
+      );
+      await checkStatus();
+    } catch (e: any) {
+      setError(e?.message || "Failed to ensure embeddings model");
+      setState("error");
+    } finally {
+      setIsBusy(false);
+    }
+  }, [editContext, userLang, checkStatus]);
+
+  return (
+    <div className="mt-3">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          {statusIcon(state)}
+          <span className="text-sm text-gray-700">
+            {state === "success"
+              ? `Embeddings model: ${currentModelName}`
+              : state === "error"
+                ? "Embeddings model not assigned"
+                : "Checking embeddings model..."}
+          </span>
+        </div>
+        {state !== "success" && (
+          <Button size="sm" onClick={ensureEmbeddingsModel} disabled={isBusy}>
+            {isBusy ? (
+              <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
+            ) : (
+              <CheckCircle strokeWidth={1} className="h-4 w-4" />
+            )}
+            Fix
+          </Button>
+        )}
+      </div>
+      {error && (
+        <div className="mt-2 rounded border border-yellow-200 bg-yellow-50 p-2 text-xs whitespace-pre-wrap text-yellow-800">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default EmbeddingsModelSection;
+
+

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

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { Card } from "../../../../components/ui/card";
+import { useEditContext } from "../../../client/editContext";
+import { SparklesIcon } from "lucide-react";
+import { RequiredContainersSection } from "./required-containers/RequiredContainersSection";
+import { ProviderSection } from "./provider/ProviderSection";
+import { GenerateToolsSection } from "./tools/GenerateToolsSection";
+import type { StepState } from "./types";
+
+export function AiSetupStep() {
+  const editContext = useEditContext();
+  const [aiState, setAiState] = useState<StepState>("idle");
+  const userLang = editContext?.contentEditorItem?.language || "en";
+
+  // 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";
+
+  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)."
+    >
+      <RequiredContainersSection />
+
+      <ProviderSection />
+
+      <GenerateToolsSection />
+    </Card>
+  );
+}
+
+export default AiSetupStep;