@truedat/ai 8.4.8 → 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ai",
-  "version": "8.4.8",
+  "version": "8.5.0",
   "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.4.8",
+    "@truedat/test": "8.4.9",
     "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": "7829e377f78c3cfc66e449f5dc31a8b03c0f5f00"
+  "gitHead": "c09665b24b178f5002c4f1d93ac4ce81e16bc62f"
 }

package/src/api.js

@@ -17,6 +17,7 @@ const API_TRANSLATIONS_AVAILABILITY_CHECK =
   "/api/translations/availability_check";
 const API_TRANSLATIONS_REQUEST = "/api/translations/request";
 const API_AGENT_LAYER_CONVERSATION = "/api/agent_layer/conversation";
+const API_AGENT_LAYER_RUN = "/api/agent_layer/run";
 const API_SOCKET_ENDPOINT = "/api/socket";
 
 export {
@@ -37,5 +38,6 @@ export {
   API_TRANSLATIONS_AVAILABILITY_CHECK,
   API_TRANSLATIONS_REQUEST,
   API_AGENT_LAYER_CONVERSATION,
+  API_AGENT_LAYER_RUN,
   API_SOCKET_ENDPOINT,
 };

package/src/components/StructureSuggestions.js

@@ -0,0 +1,147 @@
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { useParams, useLocation } from "react-router";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Icon, Loader, Message } from "semantic-ui-react";
+import { defaultColumnsForStructureSelector } from "@truedat/dd/selectors";
+import StructuresSearchResults from "@truedat/dd/components/StructuresSearchResults";
+import useAssistantSocket from "./assistant/hooks/useAssistantSocket";
+import ThinkingOutLoud from "./ThinkingOutLoud";
+import { useAgentLayerRun } from "../hooks/useAgentLayerRun";
+import {
+  reasonColumnDefinition,
+  similarityColumnDefinition,
+} from "./structureSuggestionColumns";
+
+export const StructureSuggestions = ({
+  selectedStructure,
+  handleSelectedStructure,
+  selectable,
+}) => {
+  const { business_concept_id: id } = useParams();
+  const { state } = useLocation();
+  const prompt = state?.prompt;
+
+  const baseColumns = useSelector(defaultColumnsForStructureSelector);
+  const columns = useMemo(
+    () => [
+      ...baseColumns,
+      similarityColumnDefinition,
+      reasonColumnDefinition,
+    ],
+    [baseColumns]
+  );
+
+  const { trigger: fetchSuggestions, data: runData } = useAgentLayerRun();
+
+  const [logItems, setLogItems] = useState([]);
+  const [structures, setStructures] = 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_business_concept_structures_links",
+        params: { business_concept_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 = [];
+      }
+      setStructures(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="structures.suggestions.error.header" />
+          </Message.Header>
+          <FormattedMessage id="structures.suggestions.error.body" />
+        </Message.Content>
+      </Message>
+    );
+  }
+
+  if (structures !== null) {
+    return (
+      <StructuresSearchResults
+        columns={columns}
+        size="small"
+        structures={structures}
+        selectedStructure={selectedStructure}
+        onSelect={handleSelectedStructure}
+        labelResults={false}
+        pagination={false}
+        selectable={selectable}
+      />
+    );
+  }
+
+  if (logItems.length === 0) {
+    return <Loader active inline="centered" />;
+  }
+
+  return <ThinkingOutLoud items={logItems} active={true} />;
+};
+
+StructureSuggestions.propTypes = {
+  handleSelectedStructure: PropTypes.func,
+  selectedStructure: PropTypes.object,
+  selectable: PropTypes.bool,
+};
+
+export default StructureSuggestions;

package/src/components/ThinkingOutLoud.js

@@ -0,0 +1,157 @@
+import { useState, useMemo, useRef, useEffect, useLayoutEffect } from "react";
+import PropTypes from "prop-types";
+import { Icon } from "semantic-ui-react";
+
+/** Converts e.g. "workflow_normalizer_ff83ae63.agent_normalize_10015c7d" → "Agent Normalize" */
+export function getSourceLabel(source) {
+  if (!source) return "";
+  const segment = source.includes(".") ? source.split(".").pop() : source;
+  const withoutUuid = segment.replace(/_[0-9a-f]{8,}$/i, "");
+  return withoutUuid
+    .split("_")
+    .filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
+/**
+ * Groups flat log items into sections by priority-1 source.
+ * priority-2 log items are nested under the last priority-1 section.
+ * `error` events with priority 2 are inline errors in the thinking block (styled in red).
+ */
+function buildSections(logItems) {
+  const sections = [];
+  let current = null;
+  logItems.forEach((item) => {
+    const p = item.priority ?? 1;
+    const isThinkingInlineError = item.eventType === "error" && Number(p) === 2;
+    if (isThinkingInlineError) {
+      if (!current) {
+        current = { source: null, label: "Processing", items: [] };
+      }
+      current.items.push({ ...item, level: 3 });
+      return;
+    }
+    const level = p <= 1 ? 1 : 2;
+    if (level === 1) {
+      if (!current || current.source !== item.source) {
+        if (current) sections.push(current);
+        current = {
+          source: item.source,
+          label: getSourceLabel(item.source),
+          items: [],
+        };
+      }
+      current.items.push({ ...item, level: 1 });
+    } else {
+      if (!current) {
+        current = { source: null, label: "Processing", items: [] };
+      }
+      current.items.push({ ...item, level: 2 });
+    }
+  });
+  if (current) sections.push(current);
+  return sections;
+}
+
+function ThinkingSection({ section, isLast, active, collapsed }) {
+  const [open, setOpen] = useState(!collapsed);
+  const bodyRef = useRef(null);
+  const isActive = active && isLast;
+
+  useEffect(() => {
+    if (collapsed) setOpen(false);
+  }, [collapsed]);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    const el = bodyRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, [open, section.items]);
+
+  return (
+    <div className="thinking-section">
+      <button
+        type="button"
+        className="thinking-section__header"
+        onClick={() => setOpen((o) => !o)}
+      >
+        <Icon name={open ? "chevron down" : "chevron right"} />
+        <span className="thinking-section__label">{section.label}</span>
+        {isActive && (
+          <span className="thinking-section__spinner">
+            <span className="thinking-section__spinner-dot" />
+          </span>
+        )}
+      </button>
+      {open && (
+        <div ref={bodyRef} className="thinking-section__body">
+          {section.items.map((item, i) => (
+            <div
+              key={i}
+              className={`thinking-section__item thinking-section__item--${item.level}`}
+            >
+              {item.level === 2 && (
+                <span className="thinking-section__item-source">
+                  {getSourceLabel(item.source)}:{" "}
+                </span>
+              )}
+              {item.level === 3 && item.source && (
+                <span className="thinking-section__item-source">
+                  {getSourceLabel(item.source)}:{" "}
+                </span>
+              )}
+              {item.content}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+ThinkingSection.propTypes = {
+  section: PropTypes.shape({
+    source: PropTypes.string,
+    label: PropTypes.string,
+    items: PropTypes.array,
+  }).isRequired,
+  isLast: PropTypes.bool,
+  active: PropTypes.bool,
+  collapsed: PropTypes.bool,
+};
+
+/**
+ * Renders streamed agent log lines (thinking out loud) grouped into collapsible sections.
+ * Expects items shaped like assistant log events: `eventType` "log" or inline "error" with priority 2.
+ */
+const ThinkingOutLoud = ({ items, active, collapsed }) => {
+  const sections = useMemo(() => buildSections(items), [items]);
+  return (
+    <div className="thinking-block">
+      {sections.map((section, i) => (
+        <ThinkingSection
+          key={`${section.source ?? "unknown"}-${i}`}
+          section={section}
+          isLast={i === sections.length - 1}
+          active={active}
+          collapsed={collapsed}
+        />
+      ))}
+    </div>
+  );
+};
+
+ThinkingOutLoud.propTypes = {
+  items: PropTypes.array.isRequired,
+  active: PropTypes.bool,
+  collapsed: PropTypes.bool,
+};
+
+ThinkingOutLoud.defaultProps = {
+  active: false,
+  collapsed: false,
+};
+
+export default ThinkingOutLoud;

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

@@ -0,0 +1,290 @@
+import { act, waitFor } from "@testing-library/react";
+import { useParams, useLocation } from "react-router";
+import { useSelector } from "react-redux";
+import { render } from "@truedat/test/render";
+import StructuresSearchResults from "@truedat/dd/components/StructuresSearchResults";
+import useAssistantSocket from "../assistant/hooks/useAssistantSocket";
+import ThinkingOutLoud from "../ThinkingOutLoud";
+import { useAgentLayerRun } from "../../hooks/useAgentLayerRun";
+import StructureSuggestions from "../StructureSuggestions";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: jest.fn(),
+  useLocation: jest.fn(),
+}));
+
+jest.mock("react-redux", () => ({
+  ...jest.requireActual("react-redux"),
+  useSelector: jest.fn(),
+}));
+
+jest.mock("@truedat/dd/selectors", () => ({
+  defaultColumnsForStructureSelector: jest.fn(),
+}));
+
+jest.mock("@truedat/dd/components/StructuresSearchResults", () =>
+  jest.fn(() => <div>MockSearchResults</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("StructureSuggestions", () => {
+  const mockFetchSuggestions = jest.fn();
+  const mockColumns = [{ name: "name", fieldSelector: (x) => x.name }];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    useParams.mockReturnValue({ business_concept_id: "123" });
+    useLocation.mockReturnValue({ state: { prompt: "find structures" } });
+    useSelector.mockReturnValue(mockColumns);
+    useAssistantSocket.mockImplementation(() => {});
+
+    useAgentLayerRun.mockReturnValue({
+      trigger: mockFetchSuggestions,
+      data: null,
+    });
+  });
+
+  it("calls fetchSuggestions on mount with business_concept_id and prompt", async () => {
+    render(
+      <StructureSuggestions
+        selectedStructure={null}
+        handleSelectedStructure={jest.fn()}
+        selectable={true}
+      />
+    );
+
+    await waitFor(() =>
+      expect(mockFetchSuggestions).toHaveBeenCalledWith({
+        workflow: "suggest_business_concept_structures_links",
+        params: { business_concept_id: "123", prompt: "find structures" },
+      })
+    );
+  });
+
+  it("calls fetchSuggestions without prompt when prompt is missing", async () => {
+    useLocation.mockReturnValue({ state: null });
+
+    render(
+      <StructureSuggestions
+        selectedStructure={null}
+        handleSelectedStructure={jest.fn()}
+        selectable={true}
+      />
+    );
+
+    await waitFor(() =>
+      expect(mockFetchSuggestions).toHaveBeenCalledWith({
+        workflow: "suggest_business_concept_structures_links",
+        params: { business_concept_id: "123", 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(
+      <StructureSuggestions
+        selectedStructure={null}
+        handleSelectedStructure={jest.fn()}
+        selectable={true}
+      />
+    );
+
+    expect(rendered.queryByText(/mockthinkingoutloud/i)).not.toBeInTheDocument();
+    expect(rendered.queryByText(/mocksearchresults/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(
+      <StructureSuggestions
+        selectedStructure={null}
+        handleSelectedStructure={jest.fn()}
+        selectable={true}
+      />
+    );
+
+    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(
+      <StructureSuggestions
+        selectedStructure={null}
+        handleSelectedStructure={jest.fn()}
+        selectable={true}
+      />
+    );
+
+    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(
+      <StructureSuggestions
+        selectedStructure={null}
+        handleSelectedStructure={jest.fn()}
+        selectable={true}
+      />
+    );
+
+    expect(useAssistantSocket).toHaveBeenCalledWith(
+      false,
+      expect.objectContaining({ conversationId: "state-1" })
+    );
+  });
+
+  it("shows StructuresSearchResults when stream priority-0 arrives", async () => {
+    const structures = [{ id: "s1" }, { id: "s2" }];
+    let capturedOnServerMessage;
+
+    useAssistantSocket.mockImplementation((_, { onServerMessage }) => {
+      capturedOnServerMessage = onServerMessage;
+    });
+
+    useAgentLayerRun.mockReturnValue({
+      trigger: mockFetchSuggestions,
+      data: { data: { data: { agent_state_id: "state-1" } } },
+    });
+
+    const rendered = render(
+      <StructureSuggestions
+        selectedStructure={null}
+        handleSelectedStructure={jest.fn()}
+        selectable={false}
+      />
+    );
+
+    act(() => {
+      capturedOnServerMessage("stream", {
+        priority: 0,
+        content: JSON.stringify({ result: structures }),
+      });
+    });
+
+    await waitFor(() =>
+      expect(rendered.queryByText(/mocksearchresults/i)).toBeInTheDocument()
+    );
+
+    expect(rendered.queryByText(/mockthinkingoutloud/i)).not.toBeInTheDocument();
+
+    const props = StructuresSearchResults.mock.calls.at(-1)[0];
+    expect(props.structures).toEqual(structures);
+    expect(props.selectable).toBe(false);
+  });
+
+  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(
+      <StructureSuggestions
+        selectedStructure={null}
+        handleSelectedStructure={jest.fn()}
+        selectable={true}
+      />
+    );
+
+    act(() => {
+      capturedOnServerMessage("error", {
+        priority: 0,
+        error: { message: "Something failed" },
+      });
+    });
+
+    await waitFor(() =>
+      expect(rendered.queryByText(/mockthinkingoutloud/i)).not.toBeInTheDocument()
+    );
+
+    expect(rendered.queryByText(/mocksearchresults/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(
+      <StructureSuggestions
+        selectedStructure={null}
+        handleSelectedStructure={jest.fn()}
+        selectable={true}
+      />
+    );
+
+    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");
+    });
+  });
+});