@truedat/ai 8.5.4 → 8.5.7

package/src/components/assistant/AssistantPage.js

@@ -0,0 +1,139 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+import { useLocation } from "react-router";
+import { FormattedMessage } from "react-intl";
+import { Icon } from "semantic-ui-react";
+import { useWebContext } from "@truedat/core/webContext";
+
+import useAssistantSocket from "./hooks/useAssistantSocket";
+import useAgentConversation from "./hooks/useAgentConversation";
+import useAgentConversations from "../../hooks/useAgentConversations";
+import AssistantPageChat from "./AssistantPageChat";
+import AssistantConversations from "./AssistantConversations";
+
+const EMPTY_CONVERSATION = [];
+
+const historyToConversation = (messages) =>
+  (messages || [])
+    .filter((m) => m.role === "user" || m.role === "assistant")
+    .map((m) =>
+      m.role === "user"
+        ? { eventType: "request", side: "user", content: m.message }
+        : {
+            eventType: "response",
+            side: "agent",
+            content: m.message,
+            streaming: false,
+            source: "history",
+            priority: 0,
+          }
+    );
+
+const AssistantPage = () => {
+  const {
+    disable_td_ai: disableTdAi = false,
+    assistant: {
+      name: assistantName = null,
+      welcome_message: welcomeMessage = null,
+      exact = false,
+    } = {},
+  } = useWebContext();
+  const { state: locationState } = useLocation();
+
+  const { conversationId, startNewConversation, selectConversation } =
+    useAgentConversation(true, locationState?.conversationId ?? null);
+  const { conversations, refresh: refreshConversations } =
+    useAgentConversations();
+  const [conversation, setConversation] = useState(EMPTY_CONVERSATION);
+
+  const prevConversationIdRef = useRef(null);
+  const serverMessageHandlerRef = useRef(null);
+
+  useEffect(() => {
+    if (conversationId !== prevConversationIdRef.current) {
+      prevConversationIdRef.current = conversationId;
+      if (conversationId != null) {
+        setConversation(EMPTY_CONVERSATION);
+      }
+    }
+  }, [conversationId]);
+
+  const onChannelJoined = useCallback(() => {}, []);
+
+  const handleServerMessage = useCallback(
+    (event, payload) => {
+      if (event === "history") {
+        setConversation(historyToConversation(payload.messages));
+        return;
+      }
+      if (event === "title") {
+        refreshConversations();
+        return;
+      }
+      serverMessageHandlerRef.current?.(event, payload);
+    },
+    [setConversation, refreshConversations]
+  );
+
+  const handleSelectConversation = useCallback(
+    (id) => {
+      selectConversation(id);
+    },
+    [selectConversation]
+  );
+
+  const handleNewConversation = useCallback(() => {
+    startNewConversation();
+    refreshConversations();
+  }, [startNewConversation, refreshConversations]);
+
+  const handleContinueInPanel = useCallback(() => {
+    if (!conversationId) return;
+    window.dispatchEvent(
+      new CustomEvent("assistant:open", { detail: { conversationId } })
+    );
+  }, [conversationId]);
+
+  const { socketReady, sendPrompt } = useAssistantSocket(disableTdAi, {
+    conversationId,
+    onChannelJoined,
+    onServerMessage: handleServerMessage,
+    assistantName,
+    welcomeMessage,
+    exact,
+  });
+
+  if (!socketReady) return null;
+
+  return (
+    <div className="ai-assistant-page">
+      <AssistantConversations
+        conversations={conversations}
+        activeId={conversationId}
+        onSelect={handleSelectConversation}
+        onNewConversation={handleNewConversation}
+      />
+      <div className="ai-assistant-main">
+        {conversationId && (
+          <div className="ai-assistant-main__toolbar">
+            <button
+              type="button"
+              className="ai-assistant-main__continue"
+              onClick={handleContinueInPanel}
+            >
+              <Icon name="window restore outline" />
+              <FormattedMessage id="assistant.actions.continueInPanel" />
+            </button>
+          </div>
+        )}
+        <AssistantPageChat
+          conversation={conversation}
+          setConversation={setConversation}
+          onSendMessage={sendPrompt}
+          serverMessageHandlerRef={serverMessageHandlerRef}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AssistantPage;

package/src/components/assistant/AssistantPageChat.js

@@ -0,0 +1,447 @@
+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 [];
+  return conversation.map((item, idx) => ({ ...item, index: idx }));
+}
+
+function getContentFromPayload(event, payload) {
+  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;
+      const streamChunk =
+        typeof c === "string"
+          ? c
+          : c && typeof c === "object" && typeof c.message === "string"
+            ? c.message
+            : "";
+      return { content: streamChunk, isError: false, priority, source };
+    }
+    case "error": {
+      const err = payload.error;
+      const errMsg =
+        err && typeof err === "object"
+          ? err.message ?? err.reason ?? JSON.stringify(err)
+          : String(err ?? "");
+      return { content: errMsg, isError: true, priority, source };
+    }
+    case "log": {
+      const log = payload.content;
+      const logMsg =
+        log && typeof log === "object"
+          ? log.message ?? log.level ?? JSON.stringify(log)
+          : String(log ?? "");
+      return { content: logMsg, isError: false, priority, source };
+    }
+    default:
+      return { content: "", isError: false, priority, source };
+  }
+}
+
+function appendStreamChunk(prev, source, chunk, priority) {
+  const last = prev[prev.length - 1];
+  const sameSource =
+    last?.eventType === "response" &&
+    last?.streaming &&
+    last?.source === source;
+  if (sameSource) {
+    return [...prev.slice(0, -1), { ...last, content: last.content + chunk }];
+  }
+  return [
+    ...prev,
+    {
+      eventType: "response",
+      side: "agent",
+      content: chunk || " ",
+      streaming: true,
+      source,
+      priority,
+    },
+  ];
+}
+
+function isThinkingStreamMessage(msg) {
+  return (
+    msg.eventType === "log" ||
+    (msg.eventType === "error" && Number(msg.priority) === 2)
+  );
+}
+
+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 AssistantPageChat = ({
+  conversation,
+  setConversation,
+  onSendMessage,
+  serverMessageHandlerRef,
+}) => {
+  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;
+    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, priority, source } = getContentFromPayload(
+        event,
+        payload
+      );
+      if (event === "stream") {
+        requestAnimationFrame(() => {
+          setConversation((prev) =>
+            appendStreamChunk(prev, source, content, priority)
+          );
+        });
+      } else if (event === "log") {
+        setConversation((prev) => [
+          ...prev,
+          {
+            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) => [
+          ...prev,
+          {
+            eventType: "response",
+            side: "agent",
+            content: content || "Error",
+            isError: true,
+            priority,
+            source,
+          },
+        ]);
+      }
+      scrollToBottomAfterSendRef.current = true;
+    };
+    return () => {
+      ref.current = null;
+    };
+  }, [serverMessageHandlerRef, setConversation]);
+
+  const visibleMessages = useMemo(
+    () => getVisibleMessages(conversation),
+    [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;
+      setConversation((prev) => [
+        ...prev,
+        { eventType: "request", side: "user", content: text },
+      ]);
+      setInputValue("");
+      if (typeof onSendMessage === "function") onSendMessage(text);
+    },
+    [inputValue, onSendMessage, canSendMessages, setConversation]
+  );
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        if (!canSendMessages) return;
+        handleSubmit();
+      }
+    },
+    [handleSubmit, canSendMessages]
+  );
+
+  const scrollToBottom = useCallback(() => {
+    const el = messagesRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+  }, []);
+
+  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 = scrollHeight - scrollTop - clientHeight <= SCROLL_AT_BOTTOM_THRESHOLD;
+    setShowScrollToBottom(!atBottom);
+  }, []);
+
+  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);
+      };
+    }
+
+    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
+  }, []);
+
+  useLayoutEffect(() => {
+    const el = messagesRef.current;
+    if (!el || !scrollToBottomAfterSendRef.current) return;
+    scrollToBottomAfterSendRef.current = false;
+    requestAnimationFrame(() => {
+      el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+    });
+  }, [visibleMessages.length]);
+
+  return (
+    <div className="ai-assistant-chat">
+      <div className="assistant-chat__messages-wrapper">
+        <div
+          ref={messagesRef}
+          className="assistant-chat__messages"
+          role="log"
+          aria-label={formatMessage({ id: "assistant.messages.history" })}
+        >
+          {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
+            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"
+            className="assistant-chat__scroll-to-bottom"
+            onClick={scrollToBottom}
+            aria-label={formatMessage({
+              id: "assistant.actions.scrollToBottom",
+            })}
+          >
+            <Icon name="chevron down" />
+          </button>
+        )}
+      </div>
+      <div className="assistant-chat__footer">
+        <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="arrow up" />
+          </button>
+        </form>
+        <div className="assistant-chat__disclaimer">
+          <FormattedMessage id="assistant.disclaimer" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AssistantPageChat.propTypes = {
+  conversation: PropTypes.arrayOf(PropTypes.object).isRequired,
+  setConversation: PropTypes.func.isRequired,
+  onSendMessage: PropTypes.func,
+  serverMessageHandlerRef: PropTypes.shape({ current: PropTypes.any }),
+};
+
+AssistantPageChat.defaultProps = {
+  onSendMessage: undefined,
+  serverMessageHandlerRef: null,
+};
+
+export default AssistantPageChat;

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

@@ -19,9 +19,24 @@ jest.mock("../hooks/useAgentConversation", () =>
   jest.fn(() => ({
     conversationId: null,
     startNewConversation: jest.fn(),
+    selectConversation: jest.fn(),
   }))
 );
 
+jest.mock("../../../hooks/useAgentConversations", () =>
+  jest.fn(() => ({
+    conversations: [],
+    loading: false,
+    error: null,
+    refresh: jest.fn(),
+  }))
+);
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: jest.fn(() => jest.fn()),
+}));
+
 describe("<Assistant />", () => {
   it("renders nothing when socket is not ready", async () => {
     useAssistantSocket.mockReturnValue({

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

@@ -25,6 +25,24 @@ describe("<AssistantChat />", () => {
     expect(rendered.container).toMatchSnapshot();
   });
 
+  it("shows the title in the header when provided", async () => {
+    const rendered = render(
+      <AssistantChat {...defaultProps} title="My Conversation Title" />
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.getByText("My Conversation Title")).toBeInTheDocument();
+  });
+
+  it("shows default new conversation text when title is not provided", async () => {
+    const rendered = render(<AssistantChat {...defaultProps} title={null} />);
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByText("assistant.newConversation")
+    ).toBeInTheDocument();
+  });
+
   it("groups logs in a thinking block and auto-collapses when a priority-0 response arrives", async () => {
     const conversation = [
       {