@truedat/ai 8.5.6 → 8.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ai",
-  "version": "8.5.6",
+  "version": "8.5.8",
   "description": "Truedat Web Artificial Intelligence package",
   "sideEffects": false,
   "module": "src/index.js",
@@ -50,7 +50,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.5.6",
+    "@truedat/test": "8.5.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -80,5 +80,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "41e5e6138f5622558bae4151e720c040c4581162"
+  "gitHead": "61ad9443b3d822d30dcfa977f5fad3494b3ed5b4"
 }

package/src/components/ConceptSuggestions.js

@@ -0,0 +1,128 @@
+import { useEffect, useState, useCallback } from "react";
+import { useParams, useLocation } from "react-router";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Icon, Loader, Message } from "semantic-ui-react";
+import { ConceptSelectorTable } from "@truedat/bg/concepts/relations/components/ConceptSelector";
+import useAssistantSocket from "./assistant/hooks/useAssistantSocket";
+import ThinkingOutLoud from "./ThinkingOutLoud";
+import { useAgentLayerRun } from "../hooks/useAgentLayerRun";
+import {
+  reasonColumnDefinition,
+  similarityColumnDefinition,
+} from "./structureSuggestionColumns";
+
+const extraColumns = [similarityColumnDefinition, reasonColumnDefinition];
+
+export const ConceptSuggestions = ({ selectedConcept, handleConceptSelected }) => {
+  const { id } = useParams();
+  const { state } = useLocation();
+  const prompt = state?.prompt;
+
+  const { trigger: fetchSuggestions, data: runData } = useAgentLayerRun();
+
+  const [logItems, setLogItems] = useState([]);
+  const [concepts, setConcepts] = useState(null);
+  const [hasError, setHasError] = useState(false);
+
+  const agentStateId = runData?.data?.data?.agent_state_id
+    ? String(runData.data.data.agent_state_id)
+    : null;
+
+  useEffect(() => {
+    if (id) {
+      fetchSuggestions({
+        workflow: "suggest_structure_concept_links",
+        params: { structure_id: id, prompt },
+      });
+    }
+  }, [id, prompt]);
+
+  const handleServerMessage = useCallback((event, payload) => {
+    const priority = payload?.priority ?? null;
+    const source = payload?.source ?? null;
+
+    if (event === "stream" && Number(priority) === 0) {
+      const content = payload?.content;
+      let parsed;
+      try {
+        const raw = typeof content === "string" ? JSON.parse(content) : content;
+        parsed = Array.isArray(raw) ? raw : (raw?.result ?? []);
+      } catch {
+        parsed = [];
+      }
+      setConcepts(parsed);
+      return;
+    }
+
+    if (event === "error" && Number(priority) !== 2) {
+      setHasError(true);
+      return;
+    }
+
+    if (event === "log" || (event === "error" && Number(priority) === 2)) {
+      const content =
+        event === "log"
+          ? (() => {
+              const log = payload?.content;
+              return log && typeof log === "object"
+                ? log.message ?? log.level ?? JSON.stringify(log)
+                : String(log ?? "");
+            })()
+          : (() => {
+              const err = payload?.error;
+              return err && typeof err === "object"
+                ? err.message ?? err.reason ?? JSON.stringify(err)
+                : String(err ?? "");
+            })();
+
+      setLogItems((prev) => [
+        ...prev,
+        { eventType: event, content: content || " ", priority, source },
+      ]);
+    }
+  }, []);
+
+  useAssistantSocket(!agentStateId, {
+    conversationId: agentStateId,
+    onServerMessage: handleServerMessage,
+  });
+
+  if (hasError) {
+    return (
+      <Message icon negative>
+        <Icon name="warning circle" />
+        <Message.Content>
+          <Message.Header>
+            <FormattedMessage id="concepts.suggestions.error.header" />
+          </Message.Header>
+          <FormattedMessage id="concepts.suggestions.error.body" />
+        </Message.Content>
+      </Message>
+    );
+  }
+
+  if (concepts !== null) {
+    return (
+      <ConceptSelectorTable
+        concepts={concepts}
+        selectedConcept={selectedConcept}
+        handleConceptSelected={handleConceptSelected}
+        extraColumns={extraColumns}
+      />
+    );
+  }
+
+  if (logItems.length === 0) {
+    return <Loader active inline="centered" />;
+  }
+
+  return <ThinkingOutLoud items={logItems} active={true} />;
+};
+
+ConceptSuggestions.propTypes = {
+  selectedConcept: PropTypes.object,
+  handleConceptSelected: PropTypes.func,
+};
+
+export default ConceptSuggestions;

package/src/components/SuggestLinkButton.js

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { Button, Form, Popup } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+export const SuggestLinkButton = ({ onSubmit, floated }) => {
+  const { formatMessage } = useIntl();
+  const [open, setOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+
+  const handleSubmit = () => {
+    setOpen(false);
+    onSubmit(prompt);
+  };
+
+  return (
+    <Popup
+      on="click"
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      content={
+        <Form style={{ minWidth: "300px" }}>
+          <Form.Field>
+            <label>{formatMessage({ id: "links.suggest.prompt.label" })}</label>
+            <Form.Input
+              value={prompt}
+              onChange={(_, { value }) => setPrompt(value)}
+              placeholder={formatMessage({
+                id: "links.suggest.prompt.placeholder",
+              })}
+            />
+          </Form.Field>
+          <Button
+            primary
+            content={formatMessage({ id: "links.suggest.submit" })}
+            onClick={handleSubmit}
+          />
+        </Form>
+      }
+      position="bottom center"
+      trigger={
+        <Button
+          className="td-icon-text-control"
+          secondary
+          active={open}
+          floated={floated}
+          icon="lightbulb outline"
+          content={<FormattedMessage id="links.actions.suggest" />}
+        />
+      }
+    />
+  );
+};
+
+SuggestLinkButton.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  floated: PropTypes.string,
+};
+
+export default SuggestLinkButton;

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

@@ -0,0 +1,268 @@
+import { act, waitFor } from "@testing-library/react";
+import { useParams, useLocation } from "react-router";
+import { render } from "@truedat/test/render";
+import { ConceptSelectorTable } from "@truedat/bg/concepts/relations/components/ConceptSelector";
+import useAssistantSocket from "../assistant/hooks/useAssistantSocket";
+import ThinkingOutLoud from "../ThinkingOutLoud";
+import { useAgentLayerRun } from "../../hooks/useAgentLayerRun";
+import ConceptSuggestions from "../ConceptSuggestions";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: jest.fn(),
+  useLocation: jest.fn(),
+}));
+
+jest.mock("@truedat/bg/concepts/relations/components/ConceptSelector", () => ({
+  ConceptSelectorTable: jest.fn(() => <div>MockConceptSelectorTable</div>),
+}));
+
+jest.mock("../ThinkingOutLoud", () => ({
+  __esModule: true,
+  default: jest.fn(() => <div>MockThinkingOutLoud</div>),
+  getSourceLabel: jest.fn((s) => s),
+}));
+
+jest.mock("../assistant/hooks/useAssistantSocket", () => jest.fn());
+
+jest.mock("../../hooks/useAgentLayerRun", () => ({
+  useAgentLayerRun: jest.fn(),
+}));
+
+describe("ConceptSuggestions", () => {
+  const mockFetchSuggestions = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    useParams.mockReturnValue({ id: "42" });
+    useLocation.mockReturnValue({ state: { prompt: "find concepts" } });
+    useAssistantSocket.mockImplementation(() => {});
+
+    useAgentLayerRun.mockReturnValue({
+      trigger: mockFetchSuggestions,
+      data: null,
+    });
+  });
+
+  it("calls fetchSuggestions on mount with structure_id and prompt", async () => {
+    render(
+      <ConceptSuggestions
+        selectedConcept={null}
+        handleConceptSelected={jest.fn()}
+      />
+    );
+
+    await waitFor(() =>
+      expect(mockFetchSuggestions).toHaveBeenCalledWith({
+        workflow: "suggest_structure_concept_links",
+        params: { structure_id: "42", prompt: "find concepts" },
+      })
+    );
+  });
+
+  it("calls fetchSuggestions without prompt when prompt is missing", async () => {
+    useLocation.mockReturnValue({ state: null });
+
+    render(
+      <ConceptSuggestions
+        selectedConcept={null}
+        handleConceptSelected={jest.fn()}
+      />
+    );
+
+    await waitFor(() =>
+      expect(mockFetchSuggestions).toHaveBeenCalledWith({
+        workflow: "suggest_structure_concept_links",
+        params: { structure_id: "42", prompt: undefined },
+      })
+    );
+  });
+
+  it("shows spinner while waiting for first log item", () => {
+    useAgentLayerRun.mockReturnValue({
+      trigger: mockFetchSuggestions,
+      data: { data: { data: { agent_state_id: "state-1" } } },
+    });
+
+    const rendered = render(
+      <ConceptSuggestions
+        selectedConcept={null}
+        handleConceptSelected={jest.fn()}
+      />
+    );
+
+    expect(rendered.queryByText(/mockthinkingoutloud/i)).not.toBeInTheDocument();
+    expect(rendered.queryByText(/mockconceptselectortable/i)).not.toBeInTheDocument();
+  });
+
+  it("shows ThinkingOutLoud once log items arrive", async () => {
+    let capturedOnServerMessage;
+
+    useAssistantSocket.mockImplementation((_, { onServerMessage }) => {
+      capturedOnServerMessage = onServerMessage;
+    });
+
+    useAgentLayerRun.mockReturnValue({
+      trigger: mockFetchSuggestions,
+      data: { data: { data: { agent_state_id: "state-1" } } },
+    });
+
+    const rendered = render(
+      <ConceptSuggestions
+        selectedConcept={null}
+        handleConceptSelected={jest.fn()}
+      />
+    );
+
+    act(() => {
+      capturedOnServerMessage("log", {
+        priority: 1,
+        source: "agent_x",
+        content: "Processing...",
+      });
+    });
+
+    await waitFor(() =>
+      expect(rendered.queryByText(/mockthinkingoutloud/i)).toBeInTheDocument()
+    );
+  });
+
+  it("disables socket when agent_state_id is not yet available", () => {
+    render(
+      <ConceptSuggestions
+        selectedConcept={null}
+        handleConceptSelected={jest.fn()}
+      />
+    );
+
+    expect(useAssistantSocket).toHaveBeenCalledWith(
+      true,
+      expect.objectContaining({ conversationId: null })
+    );
+  });
+
+  it("connects socket with agent_state_id when available", () => {
+    useAgentLayerRun.mockReturnValue({
+      trigger: mockFetchSuggestions,
+      data: { data: { data: { agent_state_id: "state-1" } } },
+    });
+
+    render(
+      <ConceptSuggestions
+        selectedConcept={null}
+        handleConceptSelected={jest.fn()}
+      />
+    );
+
+    expect(useAssistantSocket).toHaveBeenCalledWith(
+      false,
+      expect.objectContaining({ conversationId: "state-1" })
+    );
+  });
+
+  it("shows ConceptSelectorTable when stream priority-0 arrives", async () => {
+    const concepts = [{ id: "c1" }, { id: "c2" }];
+    let capturedOnServerMessage;
+
+    useAssistantSocket.mockImplementation((_, { onServerMessage }) => {
+      capturedOnServerMessage = onServerMessage;
+    });
+
+    useAgentLayerRun.mockReturnValue({
+      trigger: mockFetchSuggestions,
+      data: { data: { data: { agent_state_id: "state-1" } } },
+    });
+
+    const rendered = render(
+      <ConceptSuggestions
+        selectedConcept={null}
+        handleConceptSelected={jest.fn()}
+      />
+    );
+
+    act(() => {
+      capturedOnServerMessage("stream", {
+        priority: 0,
+        content: JSON.stringify({ result: concepts }),
+      });
+    });
+
+    await waitFor(() =>
+      expect(rendered.queryByText(/mockconceptselectortable/i)).toBeInTheDocument()
+    );
+
+    expect(rendered.queryByText(/mockthinkingoutloud/i)).not.toBeInTheDocument();
+
+    const props = ConceptSelectorTable.mock.calls.at(-1)[0];
+    expect(props.concepts).toEqual(concepts);
+  });
+
+  it("shows error message when error priority-0 arrives", async () => {
+    let capturedOnServerMessage;
+
+    useAssistantSocket.mockImplementation((_, { onServerMessage }) => {
+      capturedOnServerMessage = onServerMessage;
+    });
+
+    useAgentLayerRun.mockReturnValue({
+      trigger: mockFetchSuggestions,
+      data: { data: { data: { agent_state_id: "state-1" } } },
+    });
+
+    const rendered = render(
+      <ConceptSuggestions
+        selectedConcept={null}
+        handleConceptSelected={jest.fn()}
+      />
+    );
+
+    act(() => {
+      capturedOnServerMessage("error", {
+        priority: 0,
+        error: { message: "Something failed" },
+      });
+    });
+
+    await waitFor(() =>
+      expect(rendered.queryByText(/mockthinkingoutloud/i)).not.toBeInTheDocument()
+    );
+
+    expect(rendered.queryByText(/mockconceptselectortable/i)).not.toBeInTheDocument();
+  });
+
+  it("adds log events to ThinkingOutLoud items", async () => {
+    let capturedOnServerMessage;
+
+    useAssistantSocket.mockImplementation((_, { onServerMessage }) => {
+      capturedOnServerMessage = onServerMessage;
+    });
+
+    useAgentLayerRun.mockReturnValue({
+      trigger: mockFetchSuggestions,
+      data: { data: { data: { agent_state_id: "state-1" } } },
+    });
+
+    render(
+      <ConceptSuggestions
+        selectedConcept={null}
+        handleConceptSelected={jest.fn()}
+      />
+    );
+
+    act(() => {
+      capturedOnServerMessage("log", {
+        priority: 1,
+        source: "agent_x",
+        content: "Processing...",
+      });
+    });
+
+    await waitFor(() => {
+      const lastCall = ThinkingOutLoud.mock.calls.at(-1)[0];
+      expect(lastCall.items).toHaveLength(1);
+      expect(lastCall.items[0].content).toBe("Processing...");
+      expect(lastCall.items[0].eventType).toBe("log");
+    });
+  });
+});

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

@@ -0,0 +1,40 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { SuggestLinkButton } from "../SuggestLinkButton";
+
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({ formatMessage: ({ id }) => id }),
+  FormattedMessage: ({ id }) => id,
+}));
+
+describe("SuggestLinkButton", () => {
+  it("renders the trigger button", () => {
+    render(<SuggestLinkButton onSubmit={jest.fn()} />);
+    expect(screen.getByText("links.actions.suggest")).toBeInTheDocument();
+  });
+
+  it("calls onSubmit with the prompt value when submitted", async () => {
+    const onSubmit = jest.fn();
+    render(<SuggestLinkButton onSubmit={onSubmit} />);
+
+    fireEvent.click(screen.getByText("links.actions.suggest"));
+
+    const input = screen.getByPlaceholderText("links.suggest.prompt.placeholder");
+    fireEvent.change(input, { target: { value: "my prompt" } });
+
+    fireEvent.click(screen.getByText("links.suggest.submit"));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledWith("my prompt"));
+  });
+
+  it("calls onSubmit with empty string when no prompt entered", async () => {
+    const onSubmit = jest.fn();
+    render(<SuggestLinkButton onSubmit={onSubmit} />);
+
+    fireEvent.click(screen.getByText("links.actions.suggest"));
+    fireEvent.click(screen.getByText("links.suggest.submit"));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledWith(""));
+  });
+});

package/src/components/actions/Actions.js

@@ -1,11 +1,4 @@
-import {
-  Header,
-  Icon,
-  Segment,
-  Grid,
-  Container,
-  Button,
-} from "semantic-ui-react";
+import { Header, Icon, Segment, Button } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router";
 import { ACTION_NEW } from "@truedat/core/routes";
@@ -32,19 +25,17 @@ export function ActionsContent() {
           </Header.Subheader>
         </Header.Content>
       </Header>
-      <Grid>
-        <Grid.Column width={8}>{/* filters */}</Grid.Column>
-        <Grid.Column width={8}>
-          <Container textAlign="right">
-            <Button
-              primary
-              as={Link}
-              to={ACTION_NEW}
-              content={<FormattedMessage id="ai.actions.actions.create" />}
-            />
-          </Container>
-        </Grid.Column>
-      </Grid>
+
+      <Button
+        primary
+        floated="right"
+        as={Link}
+        to={ACTION_NEW}
+        content={<FormattedMessage id="ai.actions.actions.create" />}
+      />
+
+      <Segment clearing basic />
+
       <ActionsTable />
     </Segment>
   );

package/src/components/actions/__tests__/__snapshots__/Action.spec.js.snap

@@ -71,13 +71,17 @@ exports[`<Action /> matches the latest snapshot 1`] = `
             aria-hidden="true"
             class="ellipsis vertical icon"
           />
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
           <div
             class="left menu transition"
           >
             <a
               aria-checked="false"
               aria-selected="true"
-              class="selected item"
+              class="selected item td-icon-text-control"
               data-discover="true"
               href="/tasks/3/edit"
               role="option"

package/src/components/actions/__tests__/__snapshots__/ActionActions.spec.js.snap

@@ -12,13 +12,17 @@ exports[`<ActionActions /> matches the latest snapshot 1`] = `
       aria-hidden="true"
       class="ellipsis vertical icon"
     />
+    <i
+      aria-hidden="true"
+      class="dropdown icon"
+    />
     <div
       class="left menu transition"
     >
       <a
         aria-checked="false"
         aria-selected="true"
-        class="selected item"
+        class="selected item td-icon-text-control"
         data-discover="true"
         href="/tasks/3/edit"
         role="option"

package/src/components/actions/__tests__/__snapshots__/ActionEdit.spec.js.snap

@@ -235,7 +235,7 @@ exports[`<ActionEdit /> matches the latest snapshot 1`] = `
       class="ai-action-edit-form-actions actions"
     >
       <a
-        class="ui secondary button"
+        class="ui secondary button td-icon-text-control"
         data-discover="true"
         href="/"
         role="button"

package/src/components/actions/__tests__/__snapshots__/ActionForm.spec.js.snap

@@ -191,7 +191,7 @@ exports[`<ActionForm /> matches the latest snapshot when is creating 1`] = `
     class="ai-action-edit-form-actions actions"
   >
     <a
-      class="ui secondary button"
+      class="ui secondary button td-icon-text-control"
       data-discover="true"
       href="/"
       role="button"
@@ -386,7 +386,7 @@ exports[`<ActionForm /> matches the latest snapshot when is editing 1`] = `
     class="ai-action-edit-form-actions actions"
   >
     <a
-      class="ui secondary button"
+      class="ui secondary button td-icon-text-control"
       data-discover="true"
       href="/"
       role="button"

package/src/components/actions/__tests__/__snapshots__/ActionNew.spec.js.snap

@@ -250,7 +250,7 @@ exports[`<ActionNew /> matches the latest snapshot 1`] = `
       class="ai-action-edit-form-actions actions"
     >
       <a
-        class="ui secondary button"
+        class="ui secondary button td-icon-text-control"
         data-discover="true"
         href="/"
         role="button"

package/src/components/actions/__tests__/__snapshots__/Actions.spec.js.snap

@@ -23,29 +23,17 @@ exports[`<Actions /> matches the latest snapshot 1`] = `
         </div>
       </div>
     </h2>
-    <div
-      class="ui grid"
+    <a
+      class="ui primary right floated button"
+      data-discover="true"
+      href="/tasks/new"
+      role="button"
     >
-      <div
-        class="eight wide column"
-      />
-      <div
-        class="eight wide column"
-      >
-        <div
-          class="ui right aligned container"
-        >
-          <a
-            class="ui primary button"
-            data-discover="true"
-            href="/tasks/new"
-            role="button"
-          >
-            ai.actions.actions.create
-          </a>
-        </div>
-      </div>
-    </div>
+      ai.actions.actions.create
+    </a>
+    <div
+      class="ui basic clearing segment"
+    />
     <h4
       class="ui header"
     >

package/src/components/assistant/__tests__/AssistantConversations.spec.js

@@ -33,6 +33,21 @@ const defaultProps = {
 };
 
 describe("<AssistantConversations />", () => {
+  beforeAll(() => {
+    jest.spyOn(Date.prototype, "toLocaleString").mockImplementation(
+      function (_, options) {
+        return new Intl.DateTimeFormat("en", {
+          ...options,
+          timeZone: "UTC",
+        }).format(this);
+      }
+    );
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
   });