@truedat/ai 8.4.8 → 8.4.9

package/src/components/assistant/AssistantChat.js

@@ -1,33 +1,32 @@
-import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import {
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+} from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Icon } from "semantic-ui-react";
 import { MarkdownReader } from "@truedat/core/components";
+import ThinkingOutLoud, { getSourceLabel } from "../ThinkingOutLoud";
 
 const SCROLL_AT_BOTTOM_THRESHOLD = 50;
 
+const SCROLL_OVERFLOW_EPSILON = 4;
+const MAX_INPUT_LINES = 10;
+
 function getVisibleMessages(conversation) {
   if (!conversation || conversation.length === 0) return [];
-  let lastRequestOrResponseIndex = -1;
-  for (let i = conversation.length - 1; i >= 0; i--) {
-    const eventType = conversation[i].eventType;
-    if (eventType === "request" || eventType === "response") {
-      lastRequestOrResponseIndex = i;
-      break;
-    }
-  }
-  return conversation
-    .map((item, idx) => ({ ...item, index: idx }))
-    .filter(
-      (item) =>
-        item.eventType === "request" ||
-        item.eventType === "response" ||
-        (item.eventType === "log" && item.index > lastRequestOrResponseIndex)
-    );
+  return conversation.map((item, idx) => ({ ...item, index: idx }));
 }
 
 function getContentFromPayload(event, payload) {
-  if (!payload || typeof payload !== "object") return { content: "", isError: false };
+  const priority = payload?.priority ?? null;
+  const source = payload?.source ?? null;
+  if (!payload || typeof payload !== "object")
+    return { content: "", isError: false, priority, source };
   switch (event) {
     case "stream": {
       const c = payload.content;
@@ -37,7 +36,7 @@ function getContentFromPayload(event, payload) {
           : c && typeof c === "object" && typeof c.message === "string"
             ? c.message
             : "";
-      return { content: streamChunk, isError: false };
+      return { content: streamChunk, isError: false, priority, source };
     }
     case "error": {
       const err = payload.error;
@@ -45,7 +44,7 @@ function getContentFromPayload(event, payload) {
         err && typeof err === "object"
           ? err.message ?? err.reason ?? JSON.stringify(err)
           : String(err ?? "");
-      return { content: errMsg, isError: true };
+      return { content: errMsg, isError: true, priority, source };
     }
     case "log": {
       const log = payload.content;
@@ -53,14 +52,14 @@ function getContentFromPayload(event, payload) {
         log && typeof log === "object"
           ? log.message ?? log.level ?? JSON.stringify(log)
           : String(log ?? "");
-      return { content: logMsg, isError: false };
+      return { content: logMsg, isError: false, priority, source };
     }
     default:
-      return { content: "", isError: false };
+      return { content: "", isError: false, priority, source };
   }
 }
 
-function appendStreamChunk(prev, source, chunk) {
+function appendStreamChunk(prev, source, chunk, priority) {
   const last = prev[prev.length - 1];
   const sameSource =
     last?.eventType === "response" &&
@@ -80,10 +79,58 @@ function appendStreamChunk(prev, source, chunk) {
       content: chunk || " ",
       streaming: true,
       source,
+      priority,
     },
   ];
 }
 
+function isThinkingStreamMessage(msg) {
+  return (
+    msg.eventType === "log" ||
+    (msg.eventType === "error" && Number(msg.priority) === 2)
+  );
+}
+
+/**
+ * Converts a flat list of visible messages into render items:
+ * consecutive log messages (and inline thinking errors) are bundled into a "thinking-block".
+ */
+function buildRenderItems(messages) {
+  const result = [];
+  let logBuffer = [];
+  let startIdx = null;
+  messages.forEach((msg) => {
+    if (isThinkingStreamMessage(msg)) {
+      if (startIdx === null) startIdx = msg.index;
+      logBuffer.push(msg);
+    } else {
+      if (logBuffer.length > 0) {
+        const isFollowedByP0 = msg.eventType === "response" && msg.priority === 0;
+        result.push({
+          type: "thinking-block",
+          items: logBuffer,
+          active: false,
+          collapsed: isFollowedByP0,
+          key: `thinking-${startIdx}`,
+        });
+        logBuffer = [];
+        startIdx = null;
+      }
+      result.push({ type: "message", msg, key: `${msg.eventType}-${msg.index}` });
+    }
+  });
+  if (logBuffer.length > 0) {
+    result.push({
+      type: "thinking-block",
+      items: logBuffer,
+      active: true,
+      collapsed: false,
+      key: `thinking-${startIdx}`,
+    });
+  }
+  return result;
+}
+
 const AssistantChat = ({
   conversation,
   setConversation,
@@ -96,24 +143,63 @@ const AssistantChat = ({
 }) => {
   const { formatMessage } = useIntl();
   const [inputValue, setInputValue] = useState("");
+  const [inputExpanded, setInputExpanded] = useState(false);
   const [showScrollToBottom, setShowScrollToBottom] = useState(false);
   const messagesRef = useRef(null);
+  const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
   const scrollToBottomAfterSendRef = useRef(false);
 
+  const syncTextareaHeight = useCallback(() => {
+    const el = inputRef.current;
+    if (!el) return;
+
+    const style = window.getComputedStyle(el);
+    const lh = parseFloat(style.lineHeight) || 20;
+    const padY = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+    const maxHeight = lh * MAX_INPUT_LINES + padY;
+
+    // overflow:hidden means no scrollbar → stable width → reliable scrollHeight in one read.
+    // overflow:auto only once content exceeds the max line count, when height is already
+    // capped so the scrollbar cannot trigger further reflow.
+    el.style.overflowY = "hidden";
+    el.style.height = "auto";
+    const h = Math.min(el.scrollHeight, maxHeight);
+    el.style.height = `${h}px`;
+    el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+
+    setInputExpanded(h > lh + padY + 2);
+  }, []);
+
+  useLayoutEffect(() => {
+    syncTextareaHeight();
+  }, [inputValue, syncTextareaHeight]);
+
   useEffect(() => {
     const ref = serverMessageHandlerRef;
     if (!ref) return;
     ref.current = (event, payload) => {
-      const { content, isError } = getContentFromPayload(event, payload);
+      const { content, isError, priority, source } = getContentFromPayload(event, payload);
       if (event === "stream") {
-        const source = payload?.source ?? null;
         requestAnimationFrame(() => {
-          setConversation((prev) => appendStreamChunk(prev, source, content));
+          setConversation((prev) => appendStreamChunk(prev, source, content, priority));
         });
       } else if (event === "log") {
         setConversation((prev) => [
           ...prev,
-          { eventType: "log", side: "agent", content: content || " " },
+          { eventType: "log", side: "agent", content: content || " ", priority, source },
+        ]);
+      } else if (event === "error" && Number(priority) === 2) {
+        setConversation((prev) => [
+          ...prev,
+          {
+            eventType: "error",
+            side: "agent",
+            content: content || " ",
+            priority: 2,
+            source,
+            isError: true,
+          },
         ]);
       } else {
         setConversation((prev) => [
@@ -123,6 +209,8 @@ const AssistantChat = ({
             side: "agent",
             content: content || "Error",
             isError: true,
+            priority,
+            source,
           },
         ]);
       }
@@ -138,9 +226,20 @@ const AssistantChat = ({
     [conversation]
   );
 
+  const renderItems = useMemo(
+    () => buildRenderItems(visibleMessages),
+    [visibleMessages]
+  );
+
+  const canSendMessages = useMemo(
+    () => conversation.some((m) => m.side === "agent"),
+    [conversation]
+  );
+
   const handleSubmit = useCallback(
     (e) => {
       e?.preventDefault?.();
+      if (!canSendMessages) return;
       const text = inputValue.trim();
       if (!text) return;
       scrollToBottomAfterSendRef.current = true;
@@ -153,17 +252,18 @@ const AssistantChat = ({
         onSendMessage(text);
       }
     },
-    [inputValue, onSendMessage]
+    [inputValue, onSendMessage, canSendMessages]
   );
 
   const handleKeyDown = useCallback(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
+        if (!canSendMessages) return;
         handleSubmit();
       }
     },
-    [handleSubmit]
+    [handleSubmit, canSendMessages]
   );
 
   const handleNewChat = useCallback(() => {
@@ -178,28 +278,63 @@ const AssistantChat = ({
     }
   }, []);
 
-  const checkScrollPosition = useCallback(() => {
+  const checkScrollPositionFallback = useCallback(() => {
     const el = messagesRef.current;
     if (!el) return;
+    const { scrollHeight, scrollTop, clientHeight } = el;
+    if (clientHeight < 2) {
+      setShowScrollToBottom(false);
+      return;
+    }
+    const hasOverflow = scrollHeight > clientHeight + SCROLL_OVERFLOW_EPSILON;
+    if (!hasOverflow) {
+      setShowScrollToBottom(false);
+      return;
+    }
     const atBottom =
-      el.scrollHeight - el.scrollTop - el.clientHeight <=
-      SCROLL_AT_BOTTOM_THRESHOLD;
-    setShowScrollToBottom((prev) => (prev !== !atBottom ? !atBottom : prev));
+      scrollHeight - scrollTop - clientHeight <= SCROLL_AT_BOTTOM_THRESHOLD;
+    setShowScrollToBottom(!atBottom);
   }, []);
 
-  useEffect(() => {
-    const el = messagesRef.current;
-    if (!el) return;
-    checkScrollPosition();
-    if (scrollToBottomAfterSendRef.current) {
-      scrollToBottomAfterSendRef.current = false;
-      requestAnimationFrame(() => {
-        el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+  // Scroll-to-bottom button: IntersectionObserver on a bottom sentinel is reliable on first
+  // paint (pre-loaded chats); scrollHeight vs clientHeight can mis-report before layout settles.
+  useLayoutEffect(() => {
+    const root = messagesRef.current;
+    const sentinel = messagesEndRef.current;
+    if (!root || !sentinel) return undefined;
+
+    if (typeof IntersectionObserver !== "function") {
+      checkScrollPositionFallback();
+      const rafId = requestAnimationFrame(() => {
+        checkScrollPositionFallback();
       });
+      root.addEventListener("scroll", checkScrollPositionFallback);
+      return () => {
+        cancelAnimationFrame(rafId);
+        root.removeEventListener("scroll", checkScrollPositionFallback);
+      };
     }
-    el.addEventListener("scroll", checkScrollPosition);
-    return () => el.removeEventListener("scroll", checkScrollPosition);
-  }, [checkScrollPosition, visibleMessages.length]);
+
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry) return;
+        setShowScrollToBottom(!entry.isIntersecting);
+      },
+      { root, threshold: 0 }
+    );
+    io.observe(sentinel);
+    return () => io.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- one observer; DOM/layout updates re-fire intersection
+  }, []);
+
+  useLayoutEffect(() => {
+    const el = messagesRef.current;
+    if (!el || !scrollToBottomAfterSendRef.current) return;
+    scrollToBottomAfterSendRef.current = false;
+    requestAnimationFrame(() => {
+      el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+    });
+  }, [visibleMessages.length]);
 
   const className = [
     "assistant-chat",
@@ -237,21 +372,60 @@ const AssistantChat = ({
           role="log"
           aria-label={formatMessage({ id: "assistant.messages.history" })}
         >
-          {visibleMessages.map((msg) => (
-            <div
-              key={`${msg.eventType}-${msg.index}`}
-              className={`assistant-chat__message assistant-chat__message--${msg.eventType} assistant-chat__message--${msg.side}`}
-            >
-              <div className="assistant-chat__message-content">
-                {msg.side === "agent" && msg.content?.trim() ? (
-                  <MarkdownReader content={msg.content} />
-                ) : (
-                  msg.content
+          {renderItems.map((item) => {
+            if (item.type === "thinking-block") {
+              return (
+                <ThinkingOutLoud
+                  key={item.key}
+                  items={item.items}
+                  active={item.active}
+                  collapsed={item.collapsed}
+                />
+              );
+            }
+            const { msg } = item;
+            const isP0 = msg.priority === 0;
+            const isErrorP0 = msg.isError && isP0;
+            const sourceLabel = isP0 && msg.source ? getSourceLabel(msg.source) : null;
+            return (
+              <div
+                key={item.key}
+                className={[
+                  "assistant-chat__message",
+                  `assistant-chat__message--${msg.eventType}`,
+                  `assistant-chat__message--${msg.side}`,
+                  isErrorP0 && "assistant-chat__message--error",
+                ].filter(Boolean).join(" ")}
+              >
+                {sourceLabel && (
+                  <div className="assistant-chat__message-source">{sourceLabel}</div>
                 )}
+                <div className="assistant-chat__message-content">
+                  {msg.content?.trim() ? (
+                    <MarkdownReader content={msg.content} />
+                  ) : (
+                    msg.content
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
+          <div
+            ref={messagesEndRef}
+            className="assistant-chat__messages-end"
+            aria-hidden
+          />
         </div>
+        {!canSendMessages && (
+          <div
+            className="assistant-chat__waiting"
+            role="status"
+            aria-live="polite"
+            aria-label={formatMessage({ id: "assistant.chat.loading" })}
+          >
+            <span className="assistant-chat__waiting-spinner" aria-hidden />
+          </div>
+        )}
         {showScrollToBottom && (
           <button
             type="button"
@@ -264,22 +438,33 @@ const AssistantChat = ({
         )}
       </div>
       <div className="assistant-chat__footer">
-        <form className="assistant-chat__input-row" onSubmit={handleSubmit}>
-          <input
-            type="text"
+        <form
+          className={[
+            "assistant-chat__input-row",
+            inputExpanded && "assistant-chat__input-row--expanded",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+          onSubmit={handleSubmit}
+        >
+          <textarea
+            ref={inputRef}
+            rows={1}
             className="assistant-chat__input"
             placeholder={formatMessage({ id: "assistant.input.placeholder" })}
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
             onKeyDown={handleKeyDown}
             aria-label={formatMessage({ id: "assistant.input.label" })}
+            disabled={!canSendMessages}
           />
           <button
             type="submit"
             className="assistant-chat__send"
             aria-label={formatMessage({ id: "assistant.actions.send" })}
+            disabled={!canSendMessages}
           >
-            <Icon name="send" />
+            <Icon name="arrow up" />
           </button>
         </form>
         <div className="assistant-chat__disclaimer">

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

@@ -24,4 +24,83 @@ describe("<AssistantChat />", () => {
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("groups logs in a thinking block and auto-collapses when a priority-0 response arrives", async () => {
+    const conversation = [
+      {
+        eventType: "log",
+        side: "agent",
+        content: "Workflow started",
+        priority: 1,
+        source: "workflow_normalizer",
+      },
+      {
+        eventType: "log",
+        side: "agent",
+        content: "Calling tool",
+        priority: 2,
+        source: "workflow_normalizer.agent_normalize_10015c7d",
+      },
+      {
+        eventType: "response",
+        side: "agent",
+        content: "Final answer",
+        priority: 0,
+        source: "welcome",
+      },
+    ];
+
+    const rendered = render(
+      <AssistantChat {...defaultProps} conversation={conversation} />
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.container.querySelector(".thinking-block")).toBeInTheDocument();
+    expect(rendered.container.querySelector(".thinking-section__body")).not.toBeInTheDocument();
+    expect(rendered.container.querySelector(".thinking-section__header")).toBeInTheDocument();
+  });
+
+  it("shows source label for priority-0 response messages", async () => {
+    const conversation = [
+      {
+        eventType: "response",
+        side: "agent",
+        content: "Final answer",
+        priority: 0,
+        source: "workflow_normalizer_ff83ae63.agent_normalize_10015c7d",
+      },
+    ];
+
+    const rendered = render(
+      <AssistantChat {...defaultProps} conversation={conversation} />
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("Agent Normalize")).toBeInTheDocument();
+    expect(rendered.getByText("Final answer")).toBeInTheDocument();
+  });
+
+  it("renders priority-0 errors with error style and source label", async () => {
+    const conversation = [
+      {
+        eventType: "response",
+        side: "agent",
+        content: "Something failed",
+        isError: true,
+        priority: 0,
+        source: "workflow_normalizer",
+      },
+    ];
+
+    const rendered = render(
+      <AssistantChat {...defaultProps} conversation={conversation} />
+    );
+    await waitForLoad(rendered);
+
+    const errorMessage = rendered.container.querySelector(
+      ".assistant-chat__message--error"
+    );
+    expect(errorMessage).toBeInTheDocument();
+    expect(rendered.getByText("Workflow Normalizer")).toBeInTheDocument();
+  });
 });

package/src/components/assistant/__tests__/__snapshots__/AssistantChat.spec.js.snap

@@ -39,22 +39,45 @@ exports[`<AssistantChat /> matches the latest snapshot 1`] = `
         role="log"
       >
         <div
-          class="assistant-chat__message assistant-chat__message--log assistant-chat__message--agent"
+          class="thinking-block"
         >
           <div
-            class="assistant-chat__message-content"
+            class="thinking-section"
           >
+            <button
+              class="thinking-section__header"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="chevron down icon"
+              />
+              <span
+                class="thinking-section__label"
+              />
+              <span
+                class="thinking-section__spinner"
+              >
+                <span
+                  class="thinking-section__spinner-dot"
+                />
+              </span>
+            </button>
             <div
-              class="markdown-reader"
+              class="thinking-section__body"
             >
-              <p>
+              <div
+                class="thinking-section__item thinking-section__item--1"
+              >
                 Requesting connection
-              </p>
-              
-
+              </div>
             </div>
           </div>
         </div>
+        <div
+          aria-hidden="true"
+          class="assistant-chat__messages-end"
+        />
       </div>
     </div>
     <div
@@ -63,12 +86,12 @@ exports[`<AssistantChat /> matches the latest snapshot 1`] = `
       <form
         class="assistant-chat__input-row"
       >
-        <input
+        <textarea
           aria-label="assistant.input.label"
           class="assistant-chat__input"
           placeholder="assistant.input.placeholder"
-          type="text"
-          value=""
+          rows="1"
+          style="overflow-y: hidden; height: 0px;"
         />
         <button
           aria-label="assistant.actions.send"
@@ -77,7 +100,7 @@ exports[`<AssistantChat /> matches the latest snapshot 1`] = `
         >
           <i
             aria-hidden="true"
-            class="send icon"
+            class="arrow up icon"
           />
         </button>
       </form>

package/src/components/index.js

@@ -1,4 +1,5 @@
 import AiRoutes from "./AiRoutes";
 import TranslationModal from "./TranslationModal";
 import Assistant from "./assistant/Assistant";
-export { AiRoutes, TranslationModal, Assistant };
+import ThinkingOutLoud, { getSourceLabel } from "./ThinkingOutLoud";
+export { AiRoutes, TranslationModal, Assistant, ThinkingOutLoud, getSourceLabel };

package/src/components/structureSuggestionColumns.js

@@ -0,0 +1,44 @@
+import _ from "lodash/fp";
+import { FormattedMessage } from "react-intl";
+import { Popup } from "semantic-ui-react";
+
+const similarityColumnDecorator = (similarity) => {
+  if (similarity == null || Number.isNaN(Number(similarity))) {
+    return <span>—</span>;
+  }
+  const n = Number(similarity);
+  return (
+    <Popup
+      content={<FormattedMessage id="suggestions.similarity.cosine.popup" />}
+      trigger={<span>{n.toFixed(3)}</span>}
+    />
+  );
+};
+
+const reasonColumnDecorator = (reason) => {
+  if (reason == null || reason === "") {
+    return <span>—</span>;
+  }
+  return (
+    <span
+      style={{ whiteSpace: "normal", wordBreak: "break-word" }}
+      title={String(reason)}
+    >
+      {String(reason)}
+    </span>
+  );
+};
+
+export const similarityColumnDefinition = {
+  name: "similarity",
+  fieldSelector: _.prop("similarity"),
+  fieldDecorator: similarityColumnDecorator,
+  width: 1,
+};
+
+export const reasonColumnDefinition = {
+  name: "reason",
+  fieldSelector: _.prop("reason"),
+  fieldDecorator: reasonColumnDecorator,
+  width: 3,
+};

package/src/hooks/useAgentLayerRun.js

@@ -0,0 +1,9 @@
+import useSWRMutations from "swr/mutation";
+import { apiJsonPost } from "@truedat/core/services/api";
+import { API_AGENT_LAYER_RUN } from "../api";
+
+export const useAgentLayerRun = () => {
+  return useSWRMutations(API_AGENT_LAYER_RUN, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};