@truedat/ai 8.14.2 → 8.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ai",
-  "version": "8.14.2",
+  "version": "8.14.3",
   "description": "Truedat Web Artificial Intelligence package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -45,7 +45,7 @@
       ]
     },
     "transformIgnorePatterns": [
-      "/node_modules/(?!marked|turndown|@tiptap|react-router|cookie-es)/"
+      "/node_modules/(?!(marked|turndown|@tiptap|react-router|cookie-es|query-string|decode-uri-component|split-on-first|filter-obj)/)"
     ]
   },
   "devDependencies": {
@@ -53,7 +53,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.14.2",
+    "@truedat/test": "8.14.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -83,5 +83,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "3814d239579315d817ba0e3467771e6a128e5788"
+  "gitHead": "ca5cc79e39ed78a1b5e317d825832e0676b011f6"
 }

package/src/api.js

@@ -5,8 +5,14 @@ const API_ACTION_SET_ACTIVE = "/api/actions/:id/set_active";
 const API_PROMPTS = "/api/prompts";
 const API_PROMPT = "/api/prompts/:id";
 const API_PROMPT_SET_ACTIVE = "/api/prompts/:id/set_active";
+const API_INDICES = "/api/indices";
+const API_INDEX = "/api/indices/:id";
+const API_INDEX_ENABLE = "/api/indices/:id/enable";
+const API_INDEX_DISABLE = "/api/indices/:id/disable";
 const API_PROVIDERS = "/api/providers";
 const API_PROVIDER = "/api/providers/:id";
+const API_PROVIDER_ENABLE = "/api/providers/:id/enable";
+const API_PROVIDER_DISABLE = "/api/providers/:id/disable";
 const API_PROVIDER_CHAT = "/api/providers/:id/chat_completion";
 const API_TRANSLATIONS_AVAILABILITY_CHECK =
   "/api/translations/availability_check";
@@ -14,6 +20,8 @@ const API_TRANSLATIONS_REQUEST = "/api/translations/request";
 const API_AGENT_LAYER_CONVERSATIONS = "/api/agent_layer/conversations";
 const API_AGENT_LAYER_CONVERSATION = "/api/agent_layer/conversation";
 const API_AGENT_LAYER_RUN = "/api/agent_layer/run";
+const API_AGENT_LAYER_CUSTOM_INSTRUCTIONS =
+  "/api/agent_layer/custom_instructions";
 const API_SOCKET_ENDPOINT = "/api/socket";
 
 export {
@@ -25,12 +33,19 @@ export {
   API_PROMPTS,
   API_PROMPT,
   API_PROMPT_SET_ACTIVE,
+  API_INDICES,
+  API_INDEX,
+  API_INDEX_ENABLE,
+  API_INDEX_DISABLE,
   API_PROVIDERS,
   API_PROVIDER,
+  API_PROVIDER_ENABLE,
+  API_PROVIDER_DISABLE,
   API_PROVIDER_CHAT,
   API_TRANSLATIONS_AVAILABILITY_CHECK,
   API_TRANSLATIONS_REQUEST,
   API_AGENT_LAYER_CONVERSATION,
   API_AGENT_LAYER_RUN,
+  API_AGENT_LAYER_CUSTOM_INSTRUCTIONS,
   API_SOCKET_ENDPOINT,
 };

package/src/components/AiRoutes.js

@@ -5,6 +5,7 @@ import { useCanAssistant } from "./assistant/hooks/useAgentConversation";
 
 import Prompts from "./prompts/Prompts";
 import Providers from "./providers/Providers";
+import CustomInstructions from "./customInstructions/CustomInstructions";
 import AiSandbox from "./aiSandbox/AiSandbox";
 import Actions from "./actions/Actions";
 import Action from "./actions/Action";
@@ -35,6 +36,13 @@ export default function AiRoutes() {
         <Route index element={<Providers />} />
       </Route>
 
+      <Route
+        path={"custom-instructions"}
+        element={<ProtectedRoute authorization={"manage_ai"} />}
+      >
+        <Route index element={<CustomInstructions />} />
+      </Route>
+
       <Route
         path={"aiSandbox"}
         element={<ProtectedRoute authorization={"manage_ai"} />}

package/src/components/__tests__/CustomInstructions.spec.js

@@ -0,0 +1,263 @@
+import { MemoryRouter, Routes, Route, Link } from "react-router";
+import { SWRConfig } from "swr";
+import { waitFor, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
+import { apiJson, apiJsonDelete, apiJsonPut } from "@truedat/core/services/api";
+import CustomInstructions from "../customInstructions/CustomInstructions";
+
+jest.mock("@truedat/core/services/api", () => ({
+  apiJson: jest.fn(),
+  apiJsonDelete: jest.fn(),
+  apiJsonPut: jest.fn(),
+}));
+
+const messages = {
+  en: {
+    "customInstructions.title": "Custom instructions",
+    "customInstructions.content": "Instructions",
+    "customInstructions.counter": "{count} / {max} characters",
+    "customInstructions.notice": "NOTICE guidance only",
+    "customInstructions.updatedBy": "Last updated by {user}",
+    "customInstructions.saved": "SAVED",
+    "customInstructions.removed": "REMOVED",
+    "customInstructions.remove": "Remove",
+    "customInstructions.remove.confirm.header": "REMOVE HEADER",
+    "customInstructions.remove.confirm.content": "REMOVE CONTENT",
+    "actions.save": "Save",
+    "actions.discard.confirmation.header": "Discard?",
+    "actions.discard.confirmation.content": "Unsaved changes",
+    "confirmation.yes": "Yes",
+    "confirmation.no": "No",
+  },
+};
+
+const empty = {
+  data: { data: { content: "", updated_by: null, updated_at: null } },
+};
+
+const setup = () =>
+  render(
+    <SWRConfig value={{ provider: () => new Map(), dedupingInterval: 0 }}>
+      <MemoryRouter initialEntries={["/custom-instructions"]}>
+        <Routes>
+          <Route
+            path="/custom-instructions"
+            element={
+              <>
+                <CustomInstructions />
+                <Link to="/other">leave</Link>
+              </>
+            }
+          />
+          <Route path="/other" element={<div>other page</div>} />
+        </Routes>
+      </MemoryRouter>
+    </SWRConfig>,
+    { messages },
+  );
+
+describe("<CustomInstructions />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    apiJson.mockResolvedValue(empty);
+  });
+
+  it("loads from the API, shows the notice always, empty field, no last changed line", async () => {
+    setup();
+    expect(screen.getByText("NOTICE guidance only")).toBeInTheDocument();
+    const field = await screen.findByRole("textbox");
+    expect(field).toHaveValue("");
+    expect(apiJson).toHaveBeenCalledWith(
+      "/api/agent_layer/custom_instructions",
+    );
+    expect(screen.queryByText(/Last updated by/)).not.toBeInTheDocument();
+    expect(screen.getByText("0 / 2000 characters")).toBeInTheDocument();
+    expect(screen.getByText("NOTICE guidance only")).toBeInTheDocument();
+  });
+
+  it("shows stored text and last changed line", async () => {
+    apiJson.mockResolvedValue({
+      data: {
+        data: {
+          content: "Ignore system2",
+          updated_by: "bob",
+          updated_at: "2026-10-28T10:00:00Z",
+        },
+      },
+    });
+    setup();
+    expect(
+      await screen.findByDisplayValue("Ignore system2"),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Last updated by bob/)).toBeInTheDocument();
+  });
+
+  it("disables save while unchanged and enables it after editing", async () => {
+    setup();
+    const field = await screen.findByRole("textbox");
+    const save = screen.getByRole("button", { name: "Save" });
+    expect(save).toBeDisabled();
+    await userEvent.type(field, "abc");
+    expect(save).toBeEnabled();
+    expect(screen.getByText("3 / 2000 characters")).toBeInTheDocument();
+  });
+
+  it("blocks saving above 2000 characters", async () => {
+    setup();
+    const field = await screen.findByRole("textbox");
+    await userEvent.click(field);
+    await userEvent.paste("x".repeat(2001));
+    expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
+  });
+
+  it("saves with PUT, shows saved message and updated line", async () => {
+    apiJsonPut.mockResolvedValue({
+      data: {
+        data: {
+          content: "abc",
+          updated_by: "alice",
+          updated_at: "2026-10-28T11:00:00Z",
+        },
+      },
+    });
+    setup();
+    await userEvent.type(await screen.findByRole("textbox"), "abc");
+    await userEvent.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() =>
+      expect(apiJsonPut).toHaveBeenCalledWith(
+        "/api/agent_layer/custom_instructions",
+        { custom_instructions: { content: "abc" } },
+      ),
+    );
+    expect(await screen.findByText("SAVED")).toBeInTheDocument();
+    expect(screen.getByText(/Last updated by alice/)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
+  });
+
+  describe("removing", () => {
+    const confirmYes = () =>
+      screen.getByRole("button", { name: "modal-affirmative-action" });
+    const stored = {
+      data: {
+        data: {
+          content: "Ignore system2",
+          updated_by: "bob",
+          updated_at: "2026-10-28T10:00:00Z",
+        },
+      },
+    };
+
+    it("has no Remove button when nothing is stored", async () => {
+      setup();
+      await screen.findByRole("textbox");
+      expect(
+        screen.queryByRole("button", { name: "Remove" }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("asks for confirmation, then deletes and clears the field", async () => {
+      apiJson.mockResolvedValue(stored);
+      apiJsonDelete.mockResolvedValue({
+        data: { data: { content: "", updated_by: null, updated_at: null } },
+      });
+      setup();
+      const field = await screen.findByDisplayValue("Ignore system2");
+      await userEvent.click(screen.getByRole("button", { name: "Remove" }));
+      expect(apiJsonDelete).not.toHaveBeenCalled();
+      expect(screen.getByText("REMOVE HEADER")).toBeInTheDocument();
+      await userEvent.click(confirmYes());
+      await waitFor(() =>
+        expect(apiJsonDelete).toHaveBeenCalledWith(
+          "/api/agent_layer/custom_instructions",
+        ),
+      );
+      expect(apiJsonPut).not.toHaveBeenCalled();
+      expect(await screen.findByText("REMOVED")).toBeInTheDocument();
+      expect(screen.queryByText(/Last updated by/)).not.toBeInTheDocument();
+      expect(field).toHaveValue("");
+      expect(
+        screen.queryByRole("button", { name: "Remove" }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("keeps the text when the confirmation is declined", async () => {
+      apiJson.mockResolvedValue(stored);
+      setup();
+      await screen.findByDisplayValue("Ignore system2");
+      await userEvent.click(screen.getByRole("button", { name: "Remove" }));
+      await userEvent.click(
+        screen.getByRole("button", { name: "modal-negative-action" }),
+      );
+      expect(apiJsonDelete).not.toHaveBeenCalled();
+      expect(screen.getByDisplayValue("Ignore system2")).toBeInTheDocument();
+    });
+
+    it("shows the server error and keeps the text when removing fails", async () => {
+      apiJson.mockResolvedValue(stored);
+      apiJsonDelete.mockRejectedValue({
+        response: { status: 403, data: { errors: { content: ["forbidden"] } } },
+      });
+      setup();
+      await screen.findByDisplayValue("Ignore system2");
+      await userEvent.click(screen.getByRole("button", { name: "Remove" }));
+      await userEvent.click(confirmYes());
+      expect(await screen.findByText(/forbidden/)).toBeInTheDocument();
+      expect(screen.getByDisplayValue("Ignore system2")).toBeInTheDocument();
+    });
+  });
+
+  it.each([403, 422])(
+    "shows the server message on %s and keeps the text",
+    async (status) => {
+      apiJsonPut.mockRejectedValue({
+        response: { status, data: { errors: { content: ["too long"] } } },
+      });
+      setup();
+      const field = await screen.findByRole("textbox");
+      await userEvent.type(field, "abc");
+      await userEvent.click(screen.getByRole("button", { name: "Save" }));
+      expect(await screen.findByText(/too long/)).toBeInTheDocument();
+      expect(field).toHaveValue("abc");
+      expect(screen.queryByText("SAVED")).not.toBeInTheDocument();
+    },
+  );
+
+  it("asks for confirmation when leaving with unsaved changes", async () => {
+    setup();
+    await userEvent.type(await screen.findByRole("textbox"), "abc");
+    await userEvent.click(screen.getByText("leave"));
+    expect(await screen.findByText("Discard?")).toBeInTheDocument();
+    expect(screen.queryByText("other page")).not.toBeInTheDocument();
+    await userEvent.click(screen.getByLabelText("modal-affirmative-action"));
+    expect(await screen.findByText("other page")).toBeInTheDocument();
+  });
+
+  it("leaves without confirmation when unchanged", async () => {
+    setup();
+    await screen.findByRole("textbox");
+    await userEvent.click(screen.getByText("leave"));
+    expect(await screen.findByText("other page")).toBeInTheDocument();
+  });
+
+  it("trims before counting and counts an emoji as one character", async () => {
+    setup();
+    const field = await screen.findByRole("textbox");
+    await userEvent.click(field);
+    await userEvent.paste("  hi \u{1F44D}   \n");
+    expect(screen.getByText("4 / 2000 characters")).toBeInTheDocument();
+  });
+
+  it("allows saving 2000 characters plus trailing whitespace and blocks 2001", async () => {
+    setup();
+    const field = await screen.findByRole("textbox");
+    await userEvent.click(field);
+    await userEvent.paste("x".repeat(1999) + "\u{1F44D}" + "   ");
+    expect(screen.getByText("2000 / 2000 characters")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save" })).toBeEnabled();
+    await userEvent.clear(field);
+    await userEvent.paste("x".repeat(2000) + "\u{1F44D}  ");
+    expect(screen.getByText("2001 / 2000 characters")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
+  });
+});

package/src/components/constants.js

@@ -12,14 +12,10 @@ export const providerTypes = [
   "llm_gateway",
 ];
 
-export const agentTypes = ["fast", "high", "thinking"];
-
 export const usePromptResourceTypeOptions = () =>
   useOptions(promptResourceTypes, "resourceMappings.resourceType");
 export const useProviderTypeOptions = () =>
   useOptions(providerTypes, "providers.type");
-export const useAgentTypeOptions = () =>
-  useOptions(agentTypes, "providers.agent");
 
 const useOptions = (list, formatPrefix) => {
   const { formatMessage } = useIntl();

package/src/components/customInstructions/CustomInstructions.js

@@ -0,0 +1,178 @@
+import _ from "lodash/fp";
+import { useState } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import {
+  Button,
+  Container,
+  Form,
+  Header,
+  Icon,
+  Message,
+  Segment,
+} from "semantic-ui-react";
+import ConfirmModal from "@truedat/core/components/ConfirmModal";
+import {
+  useCustomInstructions,
+  useCustomInstructionsDelete,
+  useCustomInstructionsUpdate,
+} from "../../hooks/useCustomInstructions";
+import { serverErrors } from "../../serverErrors";
+import { useLeaveConfirmation } from "./useLeaveConfirmation";
+
+export const MAX_LENGTH = 2000;
+
+// Same rule as td-ai: trim first, then count graphemes.
+const graphemeCount = (text) => {
+  const trimmed = text.trim();
+  if (typeof Intl !== "undefined" && Intl.Segmenter) {
+    return Array.from(new Intl.Segmenter().segment(trimmed)).length;
+  }
+  return Array.from(trimmed).length;
+};
+
+const errorMessages = (error) => {
+  const data = error?.response?.data;
+  const fromErrors = _.flow(
+    serverErrors,
+    _.values,
+    _.flatten,
+    _.map((e) => (_.isString(e) ? e : JSON.stringify(e))),
+  )(error);
+  if (!_.isEmpty(fromErrors)) return fromErrors;
+  return [data?.message || error?.message || String(error)];
+};
+
+export default function CustomInstructions() {
+  const { formatMessage } = useIntl();
+  const { data, loading, mutate } = useCustomInstructions();
+  const { trigger: update, isMutating: isSaving } =
+    useCustomInstructionsUpdate();
+  const { trigger: remove, isMutating: isRemoving } =
+    useCustomInstructionsDelete();
+  const isMutating = isSaving || isRemoving;
+  const [draft, setDraft] = useState(null);
+  const [errors, setErrors] = useState([]);
+  const [saved, setSaved] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  const stored = data?.content || "";
+  const value = draft ?? stored;
+  const isDirty = draft !== null && draft !== stored;
+  const length = graphemeCount(value);
+  const tooLong = length > MAX_LENGTH;
+  const leave = useLeaveConfirmation(isDirty);
+
+  const onChange = (_e, { value }) => {
+    setDraft(value);
+    setSaved(false);
+  };
+
+  const request = async (send, message) => {
+    setErrors([]);
+    try {
+      const response = await send();
+      await mutate(response, false);
+      setDraft(null);
+      setSaved(message);
+    } catch (error) {
+      setSaved(false);
+      setErrors(errorMessages(error));
+    }
+  };
+
+  const onSave = () =>
+    request(
+      () => update({ custom_instructions: { content: value } }),
+      "customInstructions.saved",
+    );
+  const onRemove = () => {
+    setRemoving(false);
+    return request(() => remove(), "customInstructions.removed");
+  };
+
+  return (
+    <Segment loading={loading}>
+      <Header as="h2">
+        <Icon
+          circular
+          name={formatMessage({
+            id: "customInstructions.header.icon",
+            defaultMessage: "clipboard list",
+          })}
+        />
+        <Header.Content>
+          <FormattedMessage id="customInstructions.title" />
+        </Header.Content>
+      </Header>
+      <Message
+        info
+        content={formatMessage({ id: "customInstructions.notice" })}
+      />
+      <Form>
+        <Form.TextArea
+          label={formatMessage({ id: "customInstructions.content" })}
+          placeholder={formatMessage({ id: "customInstructions.placeholder" })}
+          rows={12}
+          value={value}
+          onChange={onChange}
+          error={tooLong}
+        />
+        <div style={{ textAlign: "right" }}>
+          {formatMessage(
+            { id: "customInstructions.counter" },
+            { count: length, max: MAX_LENGTH },
+          )}
+        </div>
+        {data?.updated_by && (
+          <p>
+            {formatMessage(
+              { id: "customInstructions.updatedBy" },
+              { user: data.updated_by },
+            )}
+            {data.updated_at &&
+              ` - ${new Date(data.updated_at).toLocaleString()}`}
+          </p>
+        )}
+        {!_.isEmpty(errors) && <Message negative list={errors} />}
+        {saved && <Message positive content={formatMessage({ id: saved })} />}
+        <Container textAlign="right">
+          <Button
+            primary
+            loading={isMutating}
+            disabled={!isDirty || tooLong || isMutating}
+            onClick={onSave}
+            content={formatMessage({ id: "actions.save" })}
+          />
+          {!_.isEmpty(stored) && (
+            <Button
+              color="red"
+              basic
+              disabled={isMutating}
+              onClick={() => setRemoving(true)}
+              content={formatMessage({ id: "customInstructions.remove" })}
+            />
+          )}
+        </Container>
+      </Form>
+      <ConfirmModal
+        open={removing}
+        onClose={() => setRemoving(false)}
+        onConfirm={onRemove}
+        header={formatMessage({
+          id: "customInstructions.remove.confirm.header",
+        })}
+        content={formatMessage({
+          id: "customInstructions.remove.confirm.content",
+        })}
+      />
+      <ConfirmModal
+        open={leave.open}
+        onOpen={_.noop}
+        onClose={leave.onCancel}
+        onConfirm={leave.onConfirm}
+        header={formatMessage({ id: "actions.discard.confirmation.header" })}
+        content={formatMessage({ id: "actions.discard.confirmation.content" })}
+      />
+    </Segment>
+  );
+}

package/src/components/customInstructions/useLeaveConfirmation.js

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+
+// The app runs under BrowserRouter, which has no navigation blocker, so
+// in-app link clicks are intercepted while the form is dirty.
+export const useLeaveConfirmation = (isDirty) => {
+  const navigate = useNavigate();
+  const [target, setTarget] = useState(null);
+
+  useEffect(() => {
+    if (!isDirty) return undefined;
+    const onClick = (e) => {
+      const anchor = e.target?.closest?.("a[href]");
+      if (
+        !anchor ||
+        e.defaultPrevented ||
+        e.button !== 0 ||
+        e.metaKey ||
+        e.ctrlKey ||
+        e.shiftKey ||
+        e.altKey ||
+        (anchor.target && anchor.target !== "_self")
+      ) {
+        return;
+      }
+      const url = new URL(anchor.href, window.location.href);
+      if (url.origin !== window.location.origin) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setTarget(`${url.pathname}${url.search}${url.hash}`);
+    };
+    const onBeforeUnload = (e) => e.preventDefault();
+    document.addEventListener("click", onClick, true);
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => {
+      document.removeEventListener("click", onClick, true);
+      window.removeEventListener("beforeunload", onBeforeUnload);
+    };
+  }, [isDirty]);
+
+  return {
+    open: target !== null,
+    onCancel: () => setTarget(null),
+    onConfirm: () => {
+      const to = target;
+      setTarget(null);
+      navigate(to);
+    },
+  };
+};