@truedat/ai 8.14.2 → 8.14.3

package/src/components/providers/Providers.js

@@ -9,6 +9,7 @@ import {
   Icon,
   Label,
   List,
+  Message,
   Segment,
 } from "semantic-ui-react";
 
@@ -16,39 +17,62 @@ import {
   useProviders,
   useProviderCreate,
   useProviderDelete,
+  useProviderEnable,
   useProviderUpdate,
 } from "@truedat/ai/hooks/useProviders";
+import { useIndices } from "@truedat/ai/hooks/useIndices";
+import { serverErrors } from "../../serverErrors";
 import ProviderEditor from "./ProviderEditor";
 
-const agentColors = {
-  fast: "yellow",
-  high: "blue",
-  thinking: "purple",
-};
-
 const NEW_PROVIDER = {
   name: "",
   type: "openai",
   properties: {},
 };
 
+const deleteErrorMessages = (error, formatMessage) => {
+  const errors = serverErrors(error);
+  return errors.indices
+    ? [
+        formatMessage({
+          id: "providers.embeddingModels.error.providerHasModels",
+        }),
+      ]
+    : _.flatten(_.values(errors));
+};
+
 export default function Providers() {
   const { formatMessage } = useIntl();
   const { data, loading, mutate } = useProviders();
   const [selectedProvider, setSelectedProvider] = useState();
   const [isDirty, setDirty] = useState(false);
+  const [deleteError, setDeleteError] = useState();
 
   const providers = _.flow(_.prop("data"), _.orderBy(["id"], ["asc"]))(data);
+  const noneEnabled = !_.isEmpty(providers) && !_.some("enabled_at")(providers);
+  const { data: indices } = useIndices();
+  const enabledModelCounts = _.flow(
+    _.filter("enabled_at"),
+    _.countBy("provider"),
+  )(indices);
 
-  const setStateNewProvider = () => setSelectedProvider(NEW_PROVIDER);
+  // A delete error belongs to the provider it failed on
+  const selectProvider = (provider) => {
+    setDeleteError(undefined);
+    setSelectedProvider(provider);
+  };
+  const setStateNewProvider = () => selectProvider(NEW_PROVIDER);
   const clearForm = () => {
     setSelectedProvider(null);
+    setDeleteError(undefined);
     setDirty(false);
   };
 
   const { trigger: createProvider, isMutating: isCreating } =
     useProviderCreate();
 
+  const { trigger: enableProvider } = useProviderEnable();
+
   const { trigger: updateProvider, isMutating: isUpdating } =
     useProviderUpdate(selectedProvider);
 
@@ -56,17 +80,27 @@ export default function Providers() {
     useProviderDelete(selectedProvider);
 
   const isSubmitting = isCreating || isUpdating || isDeleting;
-  const onProviderCreate = async (provider) => {
-    const mutateProvider = selectedProvider?.id
-      ? updateProvider
-      : createProvider;
-    await mutateProvider({ provider });
+  const onProviderCreate = async (provider, { enable } = {}) => {
+    if (selectedProvider?.id) {
+      await updateProvider({ provider });
+    } else {
+      const response = await createProvider({ provider });
+      const created = response?.data?.data;
+      if (enable && created?.id && !created.enabled_at) {
+        await enableProvider({ id: created.id });
+      }
+    }
     clearForm();
     mutate();
   };
 
   const onProviderDelete = async (provider) => {
-    await deleteProvider({ provider });
+    try {
+      await deleteProvider({ provider });
+    } catch (error) {
+      setDeleteError(deleteErrorMessages(error, formatMessage));
+      return;
+    }
     clearForm();
     mutate();
   };
@@ -88,6 +122,12 @@ export default function Providers() {
           </Header.Subheader>
         </Header.Content>
       </Header>
+      {noneEnabled ? (
+        <Message
+          warning
+          content={formatMessage({ id: "providers.enabled.banner" })}
+        />
+      ) : null}
       <Grid>
         <GridColumn width={4}>
           <Button fluid onClick={setStateNewProvider} disabled={isDirty}>
@@ -98,7 +138,7 @@ export default function Providers() {
               providers.map((provider, key) => (
                 <List.Item
                   key={key}
-                  onClick={() => !isDirty && setSelectedProvider(provider)}
+                  onClick={() => !isDirty && selectProvider(provider)}
                 >
                   <List.Content>
                     <List.Header>
@@ -106,18 +146,28 @@ export default function Providers() {
                         formatMessage({
                           id: "providers.form.name.new",
                         })}
-                      {provider.agents && (
+                      {provider.enabled_at && (
                         <Label
-                          color={agentColors[provider.agents]}
+                          color="yellow"
                           size="small"
                           style={{ marginLeft: "0.5em" }}
                         >
-                          {formatMessage({
-                            id: `providers.agent.${provider.agents}`,
-                            defaultMessage: provider.agents,
-                          })}
+                          {formatMessage({ id: "providers.enabled.badge" })}
                         </Label>
                       )}
+                      {provider.type !== "anthropic" &&
+                        enabledModelCounts[provider.id] > 0 && (
+                          <Label
+                            basic
+                            size="small"
+                            style={{ marginLeft: "0.5em" }}
+                          >
+                            {formatMessage(
+                              { id: "providers.embeddingModels.enabledCount" },
+                              { count: enabledModelCounts[provider.id] },
+                            )}
+                          </Label>
+                        )}
                     </List.Header>
                   </List.Content>
                 </List.Item>
@@ -143,7 +193,10 @@ export default function Providers() {
               onSubmit={onProviderCreate}
               onDelete={selectedProvider?.id ? onProviderDelete : null}
               isSubmitting={isSubmitting}
+              deleteError={deleteError}
+              onDismissDeleteError={() => setDeleteError(undefined)}
               setDirty={setDirty}
+              onRefresh={mutate}
             />
           ) : (
             <Header as="h2" icon textAlign="center">

package/src/components/providers/__tests__/EmbeddingModels.spec.js

@@ -0,0 +1,455 @@
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/react";
+import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
+import EmbeddingModels from "../EmbeddingModels";
+
+const mockCreate = jest.fn();
+const mockEnable = jest.fn();
+const mockDisable = jest.fn();
+const mockMutate = jest.fn();
+let mockIndices = [];
+
+jest.mock("@truedat/ai/hooks/useIndices", () => ({
+  useIndices: () => ({ data: mockIndices, loading: false, mutate: mockMutate }),
+  useIndexCreate: () => ({ trigger: mockCreate, isMutating: false }),
+  useIndexEnable: () => ({ trigger: mockEnable, isMutating: false }),
+  useIndexDisable: () => ({ trigger: mockDisable, isMutating: false }),
+}));
+
+const provider = { id: 5, name: "gemini", type: "gemini" };
+const idx = (over) => ({
+  id: 1,
+  embedding: "gemini-embedding-001",
+  index_type: "suggestions",
+  index_params: { dims: 2048 },
+  provider: 5,
+  enabled_at: null,
+  ...over,
+});
+
+const setup = (p = provider) => {
+  const user = userEvent.setup({ delay: null });
+  const rendered = render(<EmbeddingModels provider={p} />);
+  return { user, ...rendered };
+};
+
+describe("<EmbeddingModels />", () => {
+  beforeEach(() => {
+    jest.useRealTimers();
+    jest.clearAllMocks();
+    mockCreate.mockResolvedValue({});
+    mockEnable.mockResolvedValue({});
+    mockDisable.mockResolvedValue({});
+    mockIndices = [];
+  });
+
+  it("shows the unsupported message and no list for Anthropic (06-4)", () => {
+    mockIndices = [idx({ provider: 9 })];
+    const { getByText, queryByText } = setup({ id: 9, type: "anthropic" });
+    expect(getByText("providers.embeddingModels.unsupported")).toBeVisible();
+    expect(queryByText("gemini-embedding-001")).not.toBeInTheDocument();
+    expect(
+      queryByText("providers.embeddingModels.add"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("lists only the models of the provider with name, purpose, dims and state (06-4)", () => {
+    mockIndices = [
+      idx({ id: 1, enabled_at: "2026-01-01T00:00:00Z" }),
+      idx({
+        id: 2,
+        embedding: "other-model",
+        index_type: "rag",
+        index_params: { dims: 768 },
+        enabled_at: "2026-01-02T00:00:00Z",
+      }),
+      idx({ id: 3, embedding: "off-model" }),
+      idx({ id: 4, embedding: "foreign", provider: 99 }),
+    ];
+    const { getByText, queryByText, getAllByText, getAllByRole } = setup();
+    expect(getByText("gemini-embedding-001")).toBeVisible();
+    expect(getByText("other-model")).toBeVisible();
+    expect(getByText("off-model")).toBeVisible();
+    expect(queryByText("foreign")).not.toBeInTheDocument();
+    expect(getAllByText("2048")).toHaveLength(2);
+    expect(getByText("768")).toBeVisible();
+    expect(getAllByText("providers.embeddingModels.purpose.rag")).toHaveLength(
+      1,
+    );
+    expect(
+      getAllByRole("checkbox", { name: "providers.embeddingModels.disable" }),
+    ).toHaveLength(2);
+    expect(
+      getAllByRole("checkbox", { name: "providers.embeddingModels.enable" }),
+    ).toHaveLength(1);
+    expect(queryByText(/providers.embeddingModels.state/)).toBeNull();
+  });
+
+  it("shows the purpose as a teal or violet label (13-3)", () => {
+    mockIndices = [
+      idx({ id: 1 }),
+      idx({ id: 2, embedding: "r", index_type: "rag" }),
+    ];
+    const { getByText } = setup();
+    const suggestions = getByText(
+      "providers.embeddingModels.purpose.suggestions",
+    );
+    const rag = getByText("providers.embeddingModels.purpose.rag");
+    expect(suggestions).toHaveClass("ui", "label", "teal");
+    expect(rag).toHaveClass("ui", "label", "violet");
+  });
+
+  it("has no delete control and keeps the locked hint behind a ? icon (13-4, 13-7)", async () => {
+    mockIndices = [idx()];
+    const {
+      user,
+      queryByRole,
+      queryByText,
+      findByText,
+      getByTestId,
+      container,
+    } = setup();
+    expect(
+      queryByRole("button", { name: "providers.embeddingModels.delete" }),
+    ).toBeNull();
+    expect(queryByText("providers.embeddingModels.delete")).toBeNull();
+    expect(container.querySelector(".trash")).toBeNull();
+    expect(queryByText("providers.embeddingModels.locked")).toBeNull();
+    await user.hover(getByTestId("help-locked"));
+    expect(await findByText("providers.embeddingModels.locked")).toBeVisible();
+  });
+
+  it("shows the empty text and the locked hint icon (06-6)", () => {
+    const { getByText, getByTestId } = setup();
+    expect(getByText("providers.embeddingModels.empty")).toBeVisible();
+    expect(getByTestId("help-locked")).toBeVisible();
+  });
+
+  it("shows headers without ? icons, and the collection name", () => {
+    mockIndices = [idx({ collection_name: "gemini_suggestions" })];
+    const { getByText, getByRole, container } = setup();
+    for (const key of [
+      "providers.embeddingModels.form.embedding",
+      "providers.embeddingModels.form.collection",
+      "providers.embeddingModels.form.purpose",
+      "providers.embeddingModels.form.dims",
+      "providers.form.enabled",
+    ]) {
+      expect(getByRole("columnheader", { name: key })).toBeVisible();
+    }
+    expect(getByText("gemini_suggestions")).toBeVisible();
+    expect(container.querySelector("thead .icon")).toBeNull();
+  });
+
+  it("creates a model with collection_name, index_type, provider_id and dims (13-6)", async () => {
+    const {
+      user,
+      getByText,
+      getByPlaceholderText,
+      getByRole,
+      getByTestId,
+      findByText,
+    } = setup();
+    await user.click(getByText("providers.embeddingModels.add"));
+    await user.type(
+      getByPlaceholderText(
+        "providers.embeddingModels.form.collection.placeholder",
+      ),
+      "catalog_rag",
+    );
+    await user.type(
+      getByPlaceholderText("providers.embeddingModels.form.embedding"),
+      "text-embedding-3-small",
+    );
+    await user.click(getByRole("listbox"));
+    await user.click(
+      getByRole("option", { name: "providers.embeddingModels.purpose.rag" }),
+    );
+    await user.type(
+      getByPlaceholderText("providers.embeddingModels.form.dims"),
+      "1536",
+    );
+    await user.hover(getByTestId("help-dims"));
+    expect(
+      await findByText("providers.embeddingModels.form.dims.hint"),
+    ).toBeVisible();
+    await user.click(getByRole("button", { name: "actions.save" }));
+    await waitFor(() => expect(mockCreate).toHaveBeenCalledTimes(1));
+    expect(mockCreate.mock.calls[0][0]).toEqual({
+      index: {
+        embedding: "text-embedding-3-small",
+        collection_name: "catalog_rag",
+        index_type: "rag",
+        provider_id: 5,
+        index_params: { dims: 1536 },
+      },
+    });
+    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
+  });
+
+  it("omits index_params when dims is empty (06-5)", async () => {
+    const { user, getByText, getByPlaceholderText, getByRole } = setup();
+    await user.click(getByText("providers.embeddingModels.add"));
+    await user.type(
+      getByPlaceholderText("providers.embeddingModels.form.embedding"),
+      "m",
+    );
+    await user.type(
+      getByPlaceholderText(
+        "providers.embeddingModels.form.collection.placeholder",
+      ),
+      "col",
+    );
+    await user.click(getByRole("button", { name: "actions.save" }));
+    await waitFor(() => expect(mockCreate).toHaveBeenCalled());
+    expect(mockCreate.mock.calls[0][0]).toEqual({
+      index: {
+        embedding: "m",
+        collection_name: "col",
+        index_type: "suggestions",
+        provider_id: 5,
+      },
+    });
+  });
+
+  it("shows an index_params server error next to dimensions (06-5)", async () => {
+    mockCreate.mockRejectedValue({
+      response: { data: { errors: { index_params: ["dims is required"] } } },
+    });
+    const { user, getByText, getByPlaceholderText, getByRole, findByText } =
+      setup();
+    await user.click(getByText("providers.embeddingModels.add"));
+    await user.type(
+      getByPlaceholderText("providers.embeddingModels.form.embedding"),
+      "unknown",
+    );
+    await user.type(
+      getByPlaceholderText(
+        "providers.embeddingModels.form.collection.placeholder",
+      ),
+      "col",
+    );
+    await user.click(getByRole("button", { name: "actions.save" }));
+    expect(await findByText("dims is required")).toBeVisible();
+  });
+
+  it("shows a collection_name server error once, under the field (13-6)", async () => {
+    mockCreate.mockRejectedValue({
+      response: {
+        data: { errors: { collection_name: ["has already been taken"] } },
+      },
+    });
+    const { user, getByText, getByPlaceholderText, getByRole, findAllByText } =
+      setup();
+    await user.click(getByText("providers.embeddingModels.add"));
+    await user.type(
+      getByPlaceholderText("providers.embeddingModels.form.embedding"),
+      "m",
+    );
+    await user.type(
+      getByPlaceholderText(
+        "providers.embeddingModels.form.collection.placeholder",
+      ),
+      "taken",
+    );
+    await user.click(getByRole("button", { name: "actions.save" }));
+    expect(await findAllByText("has already been taken")).toHaveLength(1);
+  });
+
+  describe("clearing server errors", () => {
+    const fillAndFail = async (errors) => {
+      mockCreate.mockRejectedValue({ response: { data: { errors } } });
+      const r = setup();
+      await r.user.click(r.getByText("providers.embeddingModels.add"));
+      await r.user.type(
+        r.getByPlaceholderText("providers.embeddingModels.form.embedding"),
+        "m",
+      );
+      await r.user.type(
+        r.getByPlaceholderText(
+          "providers.embeddingModels.form.collection.placeholder",
+        ),
+        "taken",
+      );
+      await r.user.click(r.getByRole("button", { name: "actions.save" }));
+      return r;
+    };
+
+    it("clears the collection name error as soon as the field changes", async () => {
+      const r = await fillAndFail({
+        collection_name: ["has already been taken"],
+        embedding: ["can't be blank"],
+      });
+      expect(await r.findByText("has already been taken")).toBeVisible();
+      await r.user.type(
+        r.getByPlaceholderText(
+          "providers.embeddingModels.form.collection.placeholder",
+        ),
+        "2",
+      );
+      expect(r.queryByText("has already been taken")).not.toBeInTheDocument();
+      // Other fields keep their own error
+      expect(r.getByText("can't be blank")).toBeVisible();
+    });
+
+    it("clears the dimensions error when the model name or the dimensions change", async () => {
+      const r = await fillAndFail({ index_params: ["dims is required"] });
+      expect(await r.findByText("dims is required")).toBeVisible();
+      await r.user.type(
+        r.getByPlaceholderText("providers.embeddingModels.form.embedding"),
+        "x",
+      );
+      expect(r.queryByText("dims is required")).not.toBeInTheDocument();
+
+      mockCreate.mockRejectedValue({
+        response: { data: { errors: { index_params: ["dims is required"] } } },
+      });
+      await r.user.click(r.getByRole("button", { name: "actions.save" }));
+      expect(await r.findByText("dims is required")).toBeVisible();
+      await r.user.type(
+        r.getByPlaceholderText("providers.embeddingModels.form.dims"),
+        "8",
+      );
+      expect(r.queryByText("dims is required")).not.toBeInTheDocument();
+    });
+
+    it("lets the general form error be dismissed and keeps the field errors", async () => {
+      const r = await fillAndFail({
+        provider_id: ["anthropic providers do not offer embedding models"],
+        collection_name: ["has already been taken"],
+      });
+      expect(
+        await r.findByText("anthropic providers do not offer embedding models"),
+      ).toBeVisible();
+      await r.user.click(r.container.querySelector(".message .close.icon"));
+      expect(
+        r.queryByText("anthropic providers do not offer embedding models"),
+      ).not.toBeInTheDocument();
+      expect(r.getByText("has already been taken")).toBeVisible();
+    });
+  });
+
+  it("lets the enable and disable errors be dismissed", async () => {
+    mockIndices = [idx({ id: 3 })];
+    mockEnable.mockRejectedValue({
+      response: { data: { errors: { detail: ["Not allowed"] } } },
+    });
+    const { user, getByRole, findByText, queryByText, container } = setup();
+    await user.click(
+      getByRole("checkbox", { name: "providers.embeddingModels.enable" }),
+    );
+    expect(await findByText("Not allowed")).toBeVisible();
+    await user.click(container.querySelector(".message .close.icon"));
+    expect(queryByText("Not allowed")).not.toBeInTheDocument();
+  });
+
+  it("validates the collection name as typed and gates Save (13-5)", async () => {
+    const { user, getByText, getByPlaceholderText, getByRole, queryByText } =
+      setup();
+    await user.click(getByText("providers.embeddingModels.add"));
+    const save = getByRole("button", { name: "actions.save" });
+    const hint = "providers.embeddingModels.form.collection.hint";
+    const collection = getByPlaceholderText(
+      "providers.embeddingModels.form.collection.placeholder",
+    );
+    expect(
+      getByText("providers.embeddingModels.form.collection"),
+    ).toBeVisible();
+    expect(queryByText(hint)).toBeNull();
+    await user.type(
+      getByPlaceholderText("providers.embeddingModels.form.embedding"),
+      "m",
+    );
+    expect(save).toBeDisabled();
+    await user.type(collection, "Bad-Name");
+    expect(save).toBeDisabled();
+    await user.clear(collection);
+    await user.type(collection, "good_name1");
+    expect(save).toBeEnabled();
+    await user.clear(collection);
+    await user.type(collection, "a".repeat(61));
+    expect(save).toBeDisabled();
+    await user.clear(collection);
+    await user.type(collection, "a".repeat(60));
+    expect(save).toBeEnabled();
+  });
+
+  it("enables at once and disables only after confirmation (13-1, 13-2)", async () => {
+    mockIndices = [
+      idx({ id: 1, enabled_at: "2026-01-01T00:00:00Z" }),
+      idx({ id: 3, embedding: "off-model" }),
+    ];
+    const { user, getByRole, getByText } = setup();
+    await user.click(
+      getByRole("checkbox", { name: "providers.embeddingModels.disable" }),
+    );
+    expect(mockDisable).not.toHaveBeenCalled();
+    expect(
+      getByText("providers.embeddingModels.disable.confirm.header"),
+    ).toBeVisible();
+    expect(
+      getByText("providers.embeddingModels.disable.confirm.content"),
+    ).toBeVisible();
+    await user.click(
+      getByRole("button", { name: /modal-affirmative-action/i }),
+    );
+    await waitFor(() => expect(mockDisable).toHaveBeenCalledWith({ id: 1 }));
+    await waitFor(() => expect(mockMutate).toHaveBeenCalled());
+    await user.click(
+      getByRole("checkbox", { name: "providers.embeddingModels.enable" }),
+    );
+    await waitFor(() => expect(mockEnable).toHaveBeenCalledWith({ id: 3 }));
+  });
+
+  it.each([["suggestions"], ["rag"]])(
+    "shows the %s backfill notice after enabling until dismissed (06-7)",
+    async (purpose) => {
+      mockIndices = [idx({ id: 3, index_type: purpose })];
+      const { user, getByRole, findByText, queryByText, container } = setup();
+      expect(
+        queryByText(`providers.embeddingModels.backfill.${purpose}`),
+      ).not.toBeInTheDocument();
+      await user.click(
+        getByRole("checkbox", { name: "providers.embeddingModels.enable" }),
+      );
+      expect(
+        await findByText(`providers.embeddingModels.backfill.${purpose}`),
+      ).toBeVisible();
+      await user.click(container.querySelector(".message .close.icon"));
+      expect(
+        queryByText(`providers.embeddingModels.backfill.${purpose}`),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it("shows the server error and no backfill notice when enabling fails", async () => {
+    mockIndices = [idx({ id: 3 })];
+    mockEnable.mockRejectedValue({
+      response: { data: { errors: { detail: ["Not allowed"] } } },
+    });
+    const { user, getByRole, findByText, queryByText } = setup();
+    await user.click(
+      getByRole("checkbox", { name: "providers.embeddingModels.enable" }),
+    );
+    expect(await findByText("Not allowed")).toBeVisible();
+    expect(
+      queryByText("providers.embeddingModels.backfill.suggestions"),
+    ).not.toBeInTheDocument();
+    expect(mockMutate).toHaveBeenCalled();
+  });
+
+  it("shows the server error and keeps the notice when disabling fails", async () => {
+    mockIndices = [idx({ id: 1, enabled_at: "2026-01-01T00:00:00Z" })];
+    mockDisable.mockRejectedValue({
+      response: { data: { errors: { detail: ["Cannot disable"] } } },
+    });
+    const { user, getByRole, findByText } = setup();
+    await user.click(
+      getByRole("checkbox", { name: "providers.embeddingModels.disable" }),
+    );
+    await user.click(
+      getByRole("button", { name: /modal-affirmative-action/i }),
+    );
+    expect(await findByText("Cannot disable")).toBeVisible();
+  });
+});