@truedat/ai 8.5.4 → 8.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/ai",
-  "version": "8.5.4",
+  "version": "8.5.6",
   "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.4",
+    "@truedat/test": "8.5.6",
     "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": "75272567eb3ec948a5cdeb8346ef9cacac58267f"
+  "gitHead": "41e5e6138f5622558bae4151e720c040c4581162"
 }

package/src/api.js

@@ -16,12 +16,14 @@ const API_SUGGESTIONS_REQUEST = "/api/suggestions/request";
 const API_TRANSLATIONS_AVAILABILITY_CHECK =
   "/api/translations/availability_check";
 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_SOCKET_ENDPOINT = "/api/socket";
 
 export {
   API_ACTION,
+  API_AGENT_LAYER_CONVERSATIONS,
   API_ACTIONS,
   API_ACTIONS_SEARCH,
   API_ACTION_SET_ACTIVE,

package/src/components/AiRoutes.js

@@ -10,6 +10,7 @@ import Actions from "./actions/Actions";
 import Action from "./actions/Action";
 import ActionEdit from "./actions/ActionEdit";
 import ActionNew from "./actions/ActionNew";
+import AssistantPage from "./assistant/AssistantPage";
 
 export default function AiRoutes() {
   return (
@@ -52,6 +53,8 @@ export default function AiRoutes() {
         <Route path={":id"} element={<Action />} />
       </Route>
 
+      <Route path={"ai-assistant"} element={<AssistantPage />} />
+
       <Route path="*" element={null} />
     </Routes>
   );

package/src/components/assistant/Assistant.js

@@ -1,123 +1,231 @@
-import { useRef, useState, useCallback, useEffect } from "react";
+import { useRef, useState, useCallback, useEffect, useMemo } from "react";
 import { useWebContext } from "@truedat/core/webContext";
+import { Icon } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router";
+import truedatLogo from "assets/truedat-logo-home-no-text.png";
 
 import useAssistantSocket from "./hooks/useAssistantSocket";
 import useAgentConversation from "./hooks/useAgentConversation";
-import AssistantBubble from "./AssistantBubble";
+import useAgentConversations from "../../hooks/useAgentConversations";
 import AssistantChat from "./AssistantChat";
 
-const FADE_DURATION_MS = 150;
 const EMPTY_CONVERSATION = [];
+const PANEL_ANIM_MS = 200;
+const AI_ASSISTANT_PATH = "/ai-assistant";
 
 const Assistant = () => {
-  const { disable_td_ai: disableTdAi = false } = useWebContext();
+  const {
+    disable_td_ai: disableTdAi = false,
+    assistant: {
+      name: assistantName = null,
+      welcome_message: welcomeMessage = null,
+      exact = false,
+    } = {},
+  } = useWebContext();
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
 
   const [isOpen, setIsOpen] = useState(false);
-  const { conversationId, startNewConversation } = useAgentConversation(isOpen);
-  const [contentFadeOut, setContentFadeOut] = useState(false);
-  const [contentFadeIn, setContentFadeIn] = useState(false);
-
+  const [isClosing, setIsClosing] = useState(false);
+  const { conversationId, startNewConversation, selectConversation } =
+    useAgentConversation(isOpen);
+  const { conversations, refresh: refreshConversations } = useAgentConversations();
   const [conversation, setConversation] = useState(EMPTY_CONVERSATION);
-  const prevConversationIdRef = useRef(null);
+  const [conversationTitle, setConversationTitle] = useState(null);
 
-  const containerRef = useRef(null);
+  const prevConversationIdRef = useRef(null);
   const serverMessageHandlerRef = useRef(null);
-  const pendingTransitionEndRef = useRef(false);
-  const fadeTimeoutRef = useRef(null);
-  const fadeInTimeoutRef = useRef(null);
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const closeTimerRef = useRef(null);
+
+  useEffect(() => {
+    const handleOpen = (e) => {
+      const id = e.detail?.conversationId;
+      if (!id) return;
+      clearTimeout(closeTimerRef.current);
+      setIsClosing(false);
+      selectConversation(id);
+      setIsOpen(true);
+    };
+    window.addEventListener("assistant:open", handleOpen);
+    return () => window.removeEventListener("assistant:open", handleOpen);
+  }, [selectConversation]);
 
   useEffect(() => {
     if (conversationId !== prevConversationIdRef.current) {
       prevConversationIdRef.current = conversationId;
       if (conversationId != null) {
         setConversation(EMPTY_CONVERSATION);
+        const fromList = conversations.find(
+          (c) => String(c.id) === String(conversationId)
+        );
+        setConversationTitle(fromList?.title ?? null);
       }
     }
-  }, [conversationId]);
+  }, [conversationId, conversations]);
+
+  useEffect(() => () => clearTimeout(closeTimerRef.current), []);
 
   const onChannelJoined = useCallback(() => {}, []);
-  const handleServerMessage = useCallback((event, payload) => {
-    serverMessageHandlerRef.current?.(event, payload);
-  }, []);
+  const handleServerMessage = useCallback(
+    (event, payload) => {
+      if (event === "history") {
+        const messages = payload.messages || [];
+        const restored = 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,
+                },
+          );
+        setConversation(restored);
+        return;
+      }
+      if (event === "title") {
+        const title = payload?.title;
+        if (title) {
+          setConversationTitle(title);
+          refreshConversations();
+        }
+        return;
+      }
+      serverMessageHandlerRef.current?.(event, payload);
+    },
+    [refreshConversations],
+  );
+
   const handleNewChat = useCallback(() => {
     setConversation(EMPTY_CONVERSATION);
     startNewConversation();
   }, [startNewConversation]);
 
+  const handleLoadLastConversation = useCallback(() => {
+    if (conversations.length === 0) return;
+    selectConversation(conversations[0].id);
+  }, [conversations, selectConversation]);
+
+  const handleMoreConversations = useCallback(() => {
+    const isInteracted =
+      conversationId != null &&
+      conversations.some((c) => String(c.id) === String(conversationId));
+    navigate(
+      AI_ASSISTANT_PATH,
+      isInteracted ? { state: { conversationId } } : undefined
+    );
+  }, [navigate, conversationId, conversations]);
+
+  const startClose = useCallback(() => {
+    setIsClosing(true);
+    closeTimerRef.current = setTimeout(() => {
+      setIsOpen(false);
+      setIsClosing(false);
+    }, PANEL_ANIM_MS);
+  }, []);
+
+  const handleClose = useCallback(() => startClose(), [startClose]);
+
+  const handleToggle = useCallback(() => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (isClosing) {
+      clearTimeout(closeTimerRef.current);
+      setIsClosing(false);
+    } else {
+      startClose();
+    }
+  }, [isOpen, isClosing, startClose]);
+
   const effectiveConversationId = isOpen ? conversationId : null;
+  const currentTitle = useMemo(
+    () =>
+      conversationTitle ??
+      conversations.find((c) => String(c.id) === String(conversationId))?.title ??
+      null,
+    [conversationTitle, conversationId, conversations]
+  );
   const { socketReady, sendPrompt } = useAssistantSocket(disableTdAi, {
     conversationId: effectiveConversationId,
     onChannelJoined,
     onServerMessage: handleServerMessage,
+    assistantName,
+    welcomeMessage,
+    exact,
   });
 
-  const handleTransitionEnd = useCallback(() => {
-    if (!pendingTransitionEndRef.current) return;
-    pendingTransitionEndRef.current = false;
-    setContentFadeIn(true);
-    fadeInTimeoutRef.current = setTimeout(() => {
-      setContentFadeIn(false);
-    }, FADE_DURATION_MS);
-  }, []);
-
   useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    el.addEventListener("transitionend", handleTransitionEnd);
-    return () => {
-      el.removeEventListener("transitionend", handleTransitionEnd);
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (
+        panelRef.current &&
+        !panelRef.current.contains(e.target) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target)
+      ) {
+        startClose();
+      }
     };
-  }, [handleTransitionEnd]);
-
-  useEffect(() => {
-    return () => {
-      if (fadeTimeoutRef.current) clearTimeout(fadeTimeoutRef.current);
-      if (fadeInTimeoutRef.current) clearTimeout(fadeInTimeoutRef.current);
-    };
-  }, []);
-
-  const startOpenTransition = useCallback(() => {
-    setContentFadeOut(true);
-    fadeTimeoutRef.current = setTimeout(() => {
-      setContentFadeOut(false);
-      setIsOpen(true);
-      pendingTransitionEndRef.current = true;
-    }, FADE_DURATION_MS);
-  }, []);
-
-  const startCloseTransition = useCallback(() => {
-    setContentFadeOut(true);
-    fadeTimeoutRef.current = setTimeout(() => {
-      setContentFadeOut(false);
-      setIsOpen(false);
-      pendingTransitionEndRef.current = true;
-    }, FADE_DURATION_MS);
-  }, []);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, startClose]);
 
   if (!socketReady) return null;
 
+  const isLogoSrcString = typeof truedatLogo === "string";
+
   return (
-    <div
-      ref={containerRef}
-      className={`assistant-container assistant-container--${isOpen ? "open" : "closed"}`}
-    >
-      {isOpen ? (
-        <AssistantChat
-          conversation={conversation}
-          setConversation={setConversation}
-          onNewChat={handleNewChat}
-          onClose={startCloseTransition}
-          onSendMessage={sendPrompt}
-          serverMessageHandlerRef={serverMessageHandlerRef}
-          fadeOut={contentFadeOut}
-          fadeIn={contentFadeIn}
-        />
-      ) : (
-        <AssistantBubble
-          onClick={startOpenTransition}
-          fadeOut={contentFadeOut}
-          fadeIn={contentFadeIn}
-        />
+    <div className="assistant-container">
+      <button
+        ref={triggerRef}
+        type="button"
+        className={[
+          "assistant-bubble",
+          isOpen && !isClosing && "assistant-bubble--active",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        onClick={handleToggle}
+        aria-label={formatMessage({ id: "assistant.bubble.label" })}
+        aria-expanded={isOpen && !isClosing}
+      >
+        {isLogoSrcString ? (
+          <img src={truedatLogo} alt="" className="assistant-bubble__logo" />
+        ) : (
+          <Icon name="comments" />
+        )}
+      </button>
+      {isOpen && (
+        <div
+          ref={panelRef}
+          className={[
+            "assistant-panel",
+            isClosing && "assistant-panel--closing",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          <AssistantChat
+            conversation={conversation}
+            setConversation={setConversation}
+            onNewChat={handleNewChat}
+            onClose={handleClose}
+            onSendMessage={sendPrompt}
+            onLoadLastConversation={
+              conversations.length > 0 ? handleLoadLastConversation : undefined
+            }
+            onMoreConversations={handleMoreConversations}
+            serverMessageHandlerRef={serverMessageHandlerRef}
+            title={currentTitle}
+          />
+        </div>
       )}
     </div>
   );

package/src/components/assistant/AssistantChat.js

@@ -42,7 +42,7 @@ function getContentFromPayload(event, payload) {
       const err = payload.error;
       const errMsg =
         err && typeof err === "object"
-          ? err.message ?? err.reason ?? JSON.stringify(err)
+          ? (err.message ?? err.reason ?? JSON.stringify(err))
           : String(err ?? "");
       return { content: errMsg, isError: true, priority, source };
     }
@@ -50,7 +50,7 @@ function getContentFromPayload(event, payload) {
       const log = payload.content;
       const logMsg =
         log && typeof log === "object"
-          ? log.message ?? log.level ?? JSON.stringify(log)
+          ? (log.message ?? log.level ?? JSON.stringify(log))
           : String(log ?? "");
       return { content: logMsg, isError: false, priority, source };
     }
@@ -66,10 +66,7 @@ function appendStreamChunk(prev, source, chunk, priority) {
     last?.streaming &&
     last?.source === source;
   if (sameSource) {
-    return [
-      ...prev.slice(0, -1),
-      { ...last, content: last.content + chunk },
-    ];
+    return [...prev.slice(0, -1), { ...last, content: last.content + chunk }];
   }
   return [
     ...prev,
@@ -105,7 +102,8 @@ function buildRenderItems(messages) {
       logBuffer.push(msg);
     } else {
       if (logBuffer.length > 0) {
-        const isFollowedByP0 = msg.eventType === "response" && msg.priority === 0;
+        const isFollowedByP0 =
+          msg.eventType === "response" && msg.priority === 0;
         result.push({
           type: "thinking-block",
           items: logBuffer,
@@ -116,7 +114,11 @@ function buildRenderItems(messages) {
         logBuffer = [];
         startIdx = null;
       }
-      result.push({ type: "message", msg, key: `${msg.eventType}-${msg.index}` });
+      result.push({
+        type: "message",
+        msg,
+        key: `${msg.eventType}-${msg.index}`,
+      });
     }
   });
   if (logBuffer.length > 0) {
@@ -137,9 +139,12 @@ const AssistantChat = ({
   onNewChat,
   onClose,
   onSendMessage,
+  onLoadLastConversation,
+  onMoreConversations,
   serverMessageHandlerRef,
   fadeOut,
   fadeIn,
+  title,
 }) => {
   const { formatMessage } = useIntl();
   const [inputValue, setInputValue] = useState("");
@@ -179,15 +184,26 @@ const AssistantChat = ({
     const ref = serverMessageHandlerRef;
     if (!ref) return;
     ref.current = (event, payload) => {
-      const { content, isError, priority, source } = getContentFromPayload(event, payload);
+      const { content, isError, priority, source } = getContentFromPayload(
+        event,
+        payload,
+      );
       if (event === "stream") {
         requestAnimationFrame(() => {
-          setConversation((prev) => appendStreamChunk(prev, source, content, priority));
+          setConversation((prev) =>
+            appendStreamChunk(prev, source, content, priority),
+          );
         });
       } else if (event === "log") {
         setConversation((prev) => [
           ...prev,
-          { eventType: "log", side: "agent", content: content || " ", priority, source },
+          {
+            eventType: "log",
+            side: "agent",
+            content: content || " ",
+            priority,
+            source,
+          },
         ]);
       } else if (event === "error" && Number(priority) === 2) {
         setConversation((prev) => [
@@ -223,17 +239,17 @@ const AssistantChat = ({
 
   const visibleMessages = useMemo(
     () => getVisibleMessages(conversation),
-    [conversation]
+    [conversation],
   );
 
   const renderItems = useMemo(
     () => buildRenderItems(visibleMessages),
-    [visibleMessages]
+    [visibleMessages],
   );
 
   const canSendMessages = useMemo(
     () => conversation.some((m) => m.side === "agent"),
-    [conversation]
+    [conversation],
   );
 
   const handleSubmit = useCallback(
@@ -252,7 +268,7 @@ const AssistantChat = ({
         onSendMessage(text);
       }
     },
-    [inputValue, onSendMessage, canSendMessages]
+    [inputValue, onSendMessage, canSendMessages],
   );
 
   const handleKeyDown = useCallback(
@@ -263,7 +279,7 @@ const AssistantChat = ({
         handleSubmit();
       }
     },
-    [handleSubmit, canSendMessages]
+    [handleSubmit, canSendMessages],
   );
 
   const handleNewChat = useCallback(() => {
@@ -320,7 +336,7 @@ const AssistantChat = ({
         if (!entry) return;
         setShowScrollToBottom(!entry.isIntersecting);
       },
-      { root, threshold: 0 }
+      { root, threshold: 0 },
     );
     io.observe(sentinel);
     return () => io.disconnect();
@@ -346,24 +362,56 @@ const AssistantChat = ({
 
   return (
     <div className={className}>
+      <div className="assistant-chat__header">
+        <span className="assistant-chat__header-title">
+          {title || <FormattedMessage id="assistant.newConversation" />}
+        </span>
+        <button
+          type="button"
+          className="assistant-chat__action assistant-chat__action--close"
+          onClick={onClose}
+          aria-label={formatMessage({ id: "assistant.actions.close" })}
+        >
+          <Icon name="close" />
+        </button>
+      </div>
       <div className="assistant-chat__actions">
         <button
           type="button"
-          className="assistant-chat__action assistant-chat__action--new-chat"
+          className="assistant-chat__action"
           onClick={handleNewChat}
           aria-label={formatMessage({ id: "assistant.actions.newChat" })}
+          title={formatMessage({ id: "assistant.actions.newChat" })}
         >
           <Icon name="comment outline" />
           <FormattedMessage id="assistant.actions.newChat" />
         </button>
-        <button
-          type="button"
-          className="assistant-chat__action assistant-chat__action--close"
-          onClick={onClose}
-          aria-label={formatMessage({ id: "assistant.actions.close" })}
-        >
-          <Icon name="close" />
-        </button>
+        {onLoadLastConversation && (
+          <button
+            type="button"
+            className="assistant-chat__action"
+            onClick={onLoadLastConversation}
+            aria-label={formatMessage({ id: "assistant.actions.loadLast" })}
+            title={formatMessage({ id: "assistant.actions.loadLast" })}
+          >
+            <Icon name="history" />
+            <FormattedMessage id="assistant.actions.loadLast" />
+          </button>
+        )}
+        {onMoreConversations && (
+          <button
+            type="button"
+            className="assistant-chat__action"
+            onClick={onMoreConversations}
+            aria-label={formatMessage({
+              id: "assistant.actions.moreConversations",
+            })}
+            title={formatMessage({ id: "assistant.actions.moreConversations" })}
+          >
+            <Icon name="expand arrows alternate" />
+            <FormattedMessage id="assistant.actions.moreConversations" />
+          </button>
+        )}
       </div>
       <div className="assistant-chat__messages-wrapper">
         <div
@@ -386,7 +434,8 @@ const AssistantChat = ({
             const { msg } = item;
             const isP0 = msg.priority === 0;
             const isErrorP0 = msg.isError && isP0;
-            const sourceLabel = isP0 && msg.source ? getSourceLabel(msg.source) : null;
+            const sourceLabel =
+              isP0 && msg.source ? getSourceLabel(msg.source) : null;
             return (
               <div
                 key={item.key}
@@ -395,10 +444,14 @@ const AssistantChat = ({
                   `assistant-chat__message--${msg.eventType}`,
                   `assistant-chat__message--${msg.side}`,
                   isErrorP0 && "assistant-chat__message--error",
-                ].filter(Boolean).join(" ")}
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
               >
                 {sourceLabel && (
-                  <div className="assistant-chat__message-source">{sourceLabel}</div>
+                  <div className="assistant-chat__message-source">
+                    {sourceLabel}
+                  </div>
                 )}
                 <div className="assistant-chat__message-content">
                   {msg.content?.trim() ? (
@@ -431,7 +484,9 @@ const AssistantChat = ({
             type="button"
             className="assistant-chat__scroll-to-bottom"
             onClick={scrollToBottom}
-            aria-label={formatMessage({ id: "assistant.actions.scrollToBottom" })}
+            aria-label={formatMessage({
+              id: "assistant.actions.scrollToBottom",
+            })}
           >
             <Icon name="chevron down" />
           </button>
@@ -481,17 +536,23 @@ AssistantChat.propTypes = {
   onNewChat: PropTypes.func,
   onClose: PropTypes.func.isRequired,
   onSendMessage: PropTypes.func,
+  onLoadLastConversation: PropTypes.func,
+  onMoreConversations: PropTypes.func,
   serverMessageHandlerRef: PropTypes.shape({ current: PropTypes.any }),
   fadeOut: PropTypes.bool,
   fadeIn: PropTypes.bool,
+  title: PropTypes.string,
 };
 
 AssistantChat.defaultProps = {
   onNewChat: undefined,
   onSendMessage: undefined,
+  onLoadLastConversation: undefined,
+  onMoreConversations: undefined,
   serverMessageHandlerRef: null,
   fadeOut: false,
   fadeIn: false,
+  title: null,
 };
 
 export default AssistantChat;