@ai-group/chat-sdk 3.7.5 → 3.8.0-alpha.2

package/dist/cjs/components/XAdkChatbot/index.js

@@ -38,11 +38,12 @@ var import_clsx = __toESM(require("clsx"));
 var import_icons = require("@ant-design/icons");
 var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
 var import_styles = require("./styles");
+var import_utils = require("./utils");
 var import_MarkdownRender = __toESM(require("./components/MarkdownRender"));
 var import_FunctionCallRender = __toESM(require("./components/FunctionCallRender"));
 var import_FileGallery = __toESM(require("../FileGallery"));
 var import_XAdkThoughtChain = __toESM(require("../XAdkThoughtChain"));
-var import_utils = require("../../utils");
+var import_utils2 = require("../../utils");
 var import_runtime = require("../../presets/runtime");
 var import_FunctionCallRender2 = require("../../types/FunctionCallRender");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -53,6 +54,10 @@ var XAdkChatbot = (0, import_react.forwardRef)(
     prologue,
     suggestions,
     messages,
+    renderBeforeGroup,
+    renderAfterGroup,
+    renderGroup,
+    history,
     showFnCallDetail,
     onConfirm,
     onSuggest,
@@ -80,7 +85,9 @@ var XAdkChatbot = (0, import_react.forwardRef)(
     toolKindResolver,
     strategies,
     preset,
-    empty
+    empty,
+    showUserActions,
+    userActions
   }, ref) => {
     const styles = (0, import_styles.useStyles)();
     const listRef = (0, import_react.useRef)(null);
@@ -90,11 +97,128 @@ var XAdkChatbot = (0, import_react.forwardRef)(
     const prevInitializedRef = (0, import_react.useRef)(false);
     const prevSessionIdRef = (0, import_react.useRef)(sessionId);
     const previousMessageCountRef = (0, import_react.useRef)(messages.length);
+    const historyRef = (0, import_react.useRef)(history);
+    historyRef.current = history;
+    const messagesRef = (0, import_react.useRef)(messages);
+    messagesRef.current = messages;
+    const historyRequestRef = (0, import_react.useRef)(false);
+    const historyRequestIdRef = (0, import_react.useRef)(0);
+    const historyRequestControllerRef = (0, import_react.useRef)(null);
+    const historyRefreshRef = (0, import_react.useRef)(false);
+    const historyRefreshIdRef = (0, import_react.useRef)(0);
+    const historyRefreshControllerRef = (0, import_react.useRef)(null);
+    const prependAnchorRef = (0, import_react.useRef)(null);
+    const skipNextAutoScrollRef = (0, import_react.useRef)(false);
+    const prependExpiryRef = (0, import_react.useRef)(null);
+    const loadMoreHistory = (0, import_react.useCallback)(() => {
+      var _a;
+      const pagination = historyRef.current;
+      const el = listRef.current;
+      if (!(pagination == null ? void 0 : pagination.hasMore) || pagination.loading || historyRequestRef.current || !el)
+        return;
+      const direction = pagination.direction ?? "top";
+      if (direction === "top") {
+        if (prependExpiryRef.current)
+          clearTimeout(prependExpiryRef.current);
+        const currentMessages = messagesRef.current;
+        prependAnchorRef.current = {
+          sessionId: prevSessionIdRef.current,
+          firstMessageId: (_a = currentMessages[0]) == null ? void 0 : _a.id,
+          messageCount: currentMessages.length,
+          scrollTop: el.scrollTop,
+          scrollHeight: el.scrollHeight
+        };
+      }
+      historyRequestRef.current = true;
+      const requestId = ++historyRequestIdRef.current;
+      const controller = new AbortController();
+      historyRequestControllerRef.current = controller;
+      void Promise.resolve().then(() => pagination.onLoadMore({ signal: controller.signal })).catch(() => {
+        if (requestId !== historyRequestIdRef.current || controller.signal.aborted)
+          return;
+        prependAnchorRef.current = null;
+        import_antd.message.error("加载历史消息失败，请重试");
+      }).finally(() => {
+        if (requestId === historyRequestIdRef.current) {
+          historyRequestRef.current = false;
+          historyRequestControllerRef.current = null;
+          prependExpiryRef.current = setTimeout(() => {
+            prependAnchorRef.current = null;
+            prependExpiryRef.current = null;
+          }, 500);
+        }
+      });
+    }, []);
+    const refreshHistory = (0, import_react.useCallback)(() => {
+      const pagination = historyRef.current;
+      if (!(pagination == null ? void 0 : pagination.onRefresh) || pagination.refreshing || historyRefreshRef.current)
+        return;
+      historyRefreshRef.current = true;
+      const requestId = ++historyRefreshIdRef.current;
+      const controller = new AbortController();
+      historyRefreshControllerRef.current = controller;
+      void Promise.resolve().then(() => {
+        var _a;
+        return (_a = pagination.onRefresh) == null ? void 0 : _a.call(pagination, { signal: controller.signal });
+      }).catch(() => {
+        if (!controller.signal.aborted)
+          import_antd.message.error("刷新历史消息失败，请重试");
+      }).finally(() => {
+        if (requestId === historyRefreshIdRef.current) {
+          historyRefreshRef.current = false;
+          historyRefreshControllerRef.current = null;
+        }
+      });
+    }, []);
+    (0, import_react.useLayoutEffect)(() => {
+      var _a;
+      const anchor = prependAnchorRef.current;
+      const el = listRef.current;
+      if (!anchor || !el)
+        return;
+      if (anchor.sessionId !== sessionId) {
+        prependAnchorRef.current = null;
+        return;
+      }
+      if (messages.length <= anchor.messageCount || ((_a = messages[0]) == null ? void 0 : _a.id) === anchor.firstMessageId)
+        return;
+      el.scrollTop = anchor.scrollTop + el.scrollHeight - anchor.scrollHeight;
+      skipNextAutoScrollRef.current = true;
+      prependAnchorRef.current = null;
+      if (prependExpiryRef.current)
+        clearTimeout(prependExpiryRef.current);
+      prependExpiryRef.current = null;
+    }, [messages, sessionId]);
     const scrollToBottom = (0, import_react.useCallback)((behavior = "auto") => {
       var _a;
       (_a = messagesEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior });
     }, []);
-    (0, import_react.useImperativeHandle)(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+    const getScrollContainer = (0, import_react.useCallback)(() => listRef.current, []);
+    const getMessagePosition = (0, import_react.useCallback)((messageId) => {
+      const list = listRef.current;
+      if (!list)
+        return null;
+      const group = Array.from(list.children).find(
+        (element) => element instanceof HTMLElement && element.dataset.messageId === messageId
+      );
+      if (!group)
+        return null;
+      return group.getBoundingClientRect().top - list.getBoundingClientRect().top + list.scrollTop;
+    }, []);
+    const scrollToMessage = (0, import_react.useCallback)(
+      (messageId, behavior = "smooth") => {
+        const list = listRef.current;
+        const top = getMessagePosition(messageId);
+        if (list && top !== null)
+          list.scrollTo({ top, behavior });
+      },
+      [getMessagePosition]
+    );
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({ scrollToBottom, getScrollContainer, getMessagePosition, scrollToMessage }),
+      [scrollToBottom, getScrollContainer, getMessagePosition, scrollToMessage]
+    );
     const mergedStrategies = (0, import_react.useMemo)(
       () => (0, import_runtime.mergeChatStrategies)(preset, strategies),
       [preset, strategies]
@@ -110,7 +234,7 @@ var XAdkChatbot = (0, import_react.forwardRef)(
       },
       [toolKindResolver, mergedStrategies]
     );
-    const parseProcessMessage = mergedStrategies.parseProcessMessage ?? import_utils.parseAgentMessage;
+    const parseProcessMessage = mergedStrategies.parseProcessMessage ?? import_utils2.parseAgentMessage;
     const resourceLinkSchemes = mergedStrategies.markdownResourceLinkSchemes;
     (0, import_react.useEffect)(() => {
       if (!initialized)
@@ -149,6 +273,7 @@ var XAdkChatbot = (0, import_react.forwardRef)(
       };
     }, [initialized, messages]);
     (0, import_react.useEffect)(() => {
+      var _a, _b;
       if (sessionId === void 0)
         return;
       if (prevSessionIdRef.current === sessionId)
@@ -156,10 +281,31 @@ var XAdkChatbot = (0, import_react.forwardRef)(
       prevSessionIdRef.current = sessionId;
       prevInitializedRef.current = false;
       userHasScrolledRef.current = false;
+      (_a = historyRequestControllerRef.current) == null ? void 0 : _a.abort();
+      (_b = historyRefreshControllerRef.current) == null ? void 0 : _b.abort();
+      prependAnchorRef.current = null;
+      historyRequestRef.current = false;
+      historyRequestIdRef.current += 1;
+      historyRefreshRef.current = false;
+      historyRefreshIdRef.current += 1;
+      if (prependExpiryRef.current)
+        clearTimeout(prependExpiryRef.current);
+      prependExpiryRef.current = null;
     }, [sessionId]);
+    (0, import_react.useEffect)(() => () => {
+      var _a, _b;
+      (_a = historyRequestControllerRef.current) == null ? void 0 : _a.abort();
+      (_b = historyRefreshControllerRef.current) == null ? void 0 : _b.abort();
+      if (prependExpiryRef.current)
+        clearTimeout(prependExpiryRef.current);
+    }, []);
     (0, import_react.useEffect)(() => {
       const previousCount = previousMessageCountRef.current;
       previousMessageCountRef.current = messages.length;
+      if (skipNextAutoScrollRef.current || prependAnchorRef.current) {
+        skipNextAutoScrollRef.current = false;
+        return;
+      }
       const hasNewUserMessage = messages.slice(previousCount).some((message) => message.role === "user");
       if (hasNewUserMessage) {
         userHasScrolledRef.current = false;
@@ -203,8 +349,15 @@ var XAdkChatbot = (0, import_react.forwardRef)(
       if (isAtBottom) {
         userHasScrolledRef.current = false;
       }
+      const pagination = historyRef.current;
+      if (pagination == null ? void 0 : pagination.hasMore) {
+        const threshold = pagination.threshold ?? 80;
+        const atLoadEdge = (pagination.direction ?? "top") === "top" ? currentTop <= threshold : el.scrollHeight - currentTop - el.clientHeight <= threshold;
+        if (atLoadEdge)
+          loadMoreHistory();
+      }
       lastScrollTopRef.current = currentTop;
-    }, []);
+    }, [loadMoreHistory]);
     (0, import_react.useEffect)(() => {
       const listElement = listRef.current;
       if (!listElement)
@@ -214,6 +367,13 @@ var XAdkChatbot = (0, import_react.forwardRef)(
         listElement.removeEventListener("scroll", handleScroll);
       };
     }, [handleScroll]);
+    (0, import_react.useEffect)(() => {
+      if (!initialized || !(history == null ? void 0 : history.hasMore) || history.loading)
+        return;
+      const el = listRef.current;
+      if (el && el.scrollHeight <= el.clientHeight + 1)
+        loadMoreHistory();
+    }, [history == null ? void 0 : history.hasMore, history == null ? void 0 : history.loading, initialized, loadMoreHistory, messages]);
     const chatGroups = (0, import_react.useMemo)(() => {
       if (!enableGrouping) {
         return messages.map((msg) => ({
@@ -260,10 +420,11 @@ var XAdkChatbot = (0, import_react.forwardRef)(
     }, [messages, enableGrouping]);
     const renderBotGroup = (0, import_react.useCallback)(
       (group, isLastGroup, renderFunctionCall2) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { msgs, allFiles } = group;
         if (!enableProcessParsing) {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.botMsg, children: msgs.map((msg, i) => {
-            var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.botMsg, "data-message-id": group.id, children: msgs.map((msg, i) => {
+            var _a2;
             if (msg.text) {
               return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_MarkdownRender.default,
@@ -285,7 +446,7 @@ var XAdkChatbot = (0, import_react.forwardRef)(
                   msg,
                   showDetail: showFnCallDetail,
                   onConfirm,
-                  kind: resolveToolKind((_a = msg.functionCall) == null ? void 0 : _a.name, msg),
+                  kind: resolveToolKind((_a2 = msg.functionCall) == null ? void 0 : _a2.name, msg),
                   renderApproval: mergedStrategies.renderApproval,
                   renderHandoff: mergedStrategies.renderHandoff
                 },
@@ -397,24 +558,45 @@ var XAdkChatbot = (0, import_react.forwardRef)(
         flushProcessItems();
         const fullTextToCopy = msgs.filter((m) => !m.functionCall && !m.functionResponse).map((m) => m.text || "").join("");
         const lastBotMsg = msgs[msgs.length - 1];
-        const hasProcess = nodes.some((n) => n.type === "process");
         const isGroupLoading = loading && isLastGroup;
         const actionProps = { message: group, isLastBotMsg: isLastGroup };
         const actionExtraNode = actionsExtra == null ? void 0 : actionsExtra(actionProps);
+        const firstProcessIdx = nodes.findIndex((n) => n.type === "process");
         const lastProcessIdx = nodes.findLastIndex((n) => n.type === "process");
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.botMsg, children: [
+        const processItems = nodes.slice(firstProcessIdx, lastProcessIdx + 1).flatMap(
+          (node) => node.type === "process" ? node.items : [
+            {
+              type: "text",
+              key: node.key,
+              title: "过程分析",
+              content: node.content
+            }
+          ]
+        );
+        const activeItem = processItems[processItems.length - 1];
+        const activeStep = (activeItem == null ? void 0 : activeItem.type) === "tool" ? String(
+          ((_c = (_b = (_a = activeItem.msg) == null ? void 0 : _a.functionCall) == null ? void 0 : _b.args) == null ? void 0 : _c.agentName) || ((_f = (_e = (_d = activeItem.msg) == null ? void 0 : _d.functionCall) == null ? void 0 : _e.args) == null ? void 0 : _f.componentName) || ((_h = (_g = activeItem.msg) == null ? void 0 : _g.functionCall) == null ? void 0 : _h.name) || ""
+        ) : typeof (activeItem == null ? void 0 : activeItem.title) === "string" ? activeItem.title : "";
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.botMsg, "data-message-id": group.id, children: [
           nodes.map((node, idx) => {
+            if (node.type === "text" && idx > firstProcessIdx && idx < lastProcessIdx) {
+              return null;
+            }
             if (node.type === "process") {
-              const isLastProcess = idx === lastProcessIdx;
+              if (idx !== firstProcessIdx) {
+                return null;
+              }
               return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_XAdkThoughtChain.default,
                 {
-                  loading: isLastProcess && isGroupLoading,
-                  title: "思维链已完成",
-                  items: node.items,
+                  collapsible: true,
+                  loading: isGroupLoading,
+                  title: "已完成",
+                  activeStep,
+                  items: processItems,
                   showFnCallDetail,
                   onConfirm,
-                  defaultOpen: isLastProcess && isGroupLoading,
+                  defaultOpen: isGroupLoading,
                   renderFunctionCall: renderFunctionCall2,
                   toolKindResolver: (name) => resolveToolKind(name),
                   strategies: mergedStrategies
@@ -502,43 +684,93 @@ var XAdkChatbot = (0, import_react.forwardRef)(
       ]
     );
     const renderUserGroup = (0, import_react.useCallback)(
-      (group) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.userMsg, children: group.msgs.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.userContainer, children: [
-          m.fileData && m.fileData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: m.fileData.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_FileGallery.default,
-            {
-              file,
-              align: "left",
-              style: { marginBottom: "16px" },
-              onClick: onFileClick
-            },
-            index
-          )) }),
-          m.text && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              className: styles.card,
-              onCopy: (event) => {
-                event.preventDefault();
-                event.clipboardData.setData("text/plain", m.text || "");
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_MarkdownRender.default,
-                {
-                  text: m.text,
-                  compact: true,
-                  bareUrlAsText: true,
-                  highlightPlainMentions: true,
-                  resourceLinkSchemes,
-                  onFileClick,
-                  onResourceLinkClick,
-                  renderResourceLink,
-                  markdownExtensions: mergedMarkdownExtensions
-                }
-              )
-            }
-          )
-        ] }, m.id || i)) }, group.id);
+      (group, nextGroup) => {
+        var _a;
+        const compactWithNextText = group.msgs.some((message) => {
+          var _a2;
+          return Boolean((_a2 = message.fileData) == null ? void 0 : _a2.length);
+        }) && group.msgs.every((message) => {
+          var _a2;
+          return !((_a2 = message.text) == null ? void 0 : _a2.trim());
+        }) && (nextGroup == null ? void 0 : nextGroup.role) === "user" && nextGroup.msgs.some((message) => {
+          var _a2;
+          return Boolean((_a2 = message.text) == null ? void 0 : _a2.trim());
+        });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: styles.userMsg,
+            "data-message-id": group.id,
+            style: compactWithNextText ? { marginBottom: 8 } : void 0,
+            children: [
+              group.msgs.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.userContainer, children: [
+                m.fileData && m.fileData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: m.fileData.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_FileGallery.default,
+                  {
+                    file,
+                    align: "left",
+                    style: {
+                      marginBottom: compactWithNextText && i === group.msgs.length - 1 && index === m.fileData.length - 1 ? 0 : 16
+                    },
+                    onClick: onFileClick
+                  },
+                  index
+                )) }),
+                m.text && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: styles.card,
+                    "data-xadk-user-card": true,
+                    onCopy: (event) => {
+                      event.preventDefault();
+                      const selected = (0, import_utils.getSelectionText)(event.currentTarget);
+                      event.clipboardData.setData(
+                        "text/plain",
+                        selected || m.text || ""
+                      );
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_MarkdownRender.default,
+                      {
+                        text: m.text,
+                        compact: true,
+                        bareUrlAsText: true,
+                        highlightPlainMentions: true,
+                        resourceLinkSchemes,
+                        onFileClick,
+                        onResourceLinkClick,
+                        renderResourceLink,
+                        markdownExtensions: mergedMarkdownExtensions
+                      }
+                    )
+                  }
+                )
+              ] }, m.id || i)),
+              showUserActions && group.msgs.some((message) => {
+                var _a2;
+                return Boolean((_a2 = message.text) == null ? void 0 : _a2.trim());
+              }) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `x-user-actions ${styles.userActions}`, children: (userActions == null ? void 0 : userActions({ message: group })) ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.userTime, children: (0, import_utils.formatTimestamp)((_a = group.msgs[group.msgs.length - 1]) == null ? void 0 : _a.timestamp) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: "复制内容", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_icons.CopyOutlined,
+                  {
+                    className: styles.userActionIcon,
+                    onClick: () => {
+                      const container = document.querySelector(
+                        `[data-message-id="${group.id}"]`
+                      );
+                      const selected = (0, import_utils.getSelectionText)(container);
+                      const fullText = group.msgs.map((message) => message.text || "").join("");
+                      (0, import_copy_to_clipboard.default)(selected || fullText);
+                      import_antd.message.success("复制成功");
+                    }
+                  }
+                ) })
+              ] }) })
+            ]
+          },
+          group.id
+        );
       },
       [
         styles,
@@ -546,7 +778,9 @@ var XAdkChatbot = (0, import_react.forwardRef)(
         onResourceLinkClick,
         renderResourceLink,
         mergedMarkdownExtensions,
-        resourceLinkSchemes
+        resourceLinkSchemes,
+        showUserActions,
+        userActions
       ]
     );
     const renderSuggestions = () => {
@@ -576,6 +810,10 @@ var XAdkChatbot = (0, import_react.forwardRef)(
       ) }) }, item)) });
     };
     const isEmpty = messages.length === 0 && !prologue && (!suggestions || suggestions.length === 0);
+    const historyControls = history && (history.hasMore || history.loading || history.onRefresh) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.historyControls, children: [
+      history.onRefresh && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: refreshHistory, disabled: history.refreshing, children: history.refreshing ? "正在刷新..." : "刷新" }),
+      (history.hasMore || history.loading) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: loadMoreHistory, disabled: history.loading, children: history.loading ? "正在加载..." : "加载更多" })
+    ] });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)(styles.wrapper, className), style, children: [
       isEmpty && empty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.emptyWrapper, children: typeof empty === "function" ? empty() : empty }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -585,6 +823,7 @@ var XAdkChatbot = (0, import_react.forwardRef)(
           ref: listRef,
           style: isEmpty ? { flex: 0 } : void 0,
           children: [
+            ((history == null ? void 0 : history.direction) ?? "top") === "top" && historyControls,
             prologue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.prologue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_MarkdownRender.default,
               {
@@ -596,13 +835,22 @@ var XAdkChatbot = (0, import_react.forwardRef)(
                 markdownExtensions: mergedMarkdownExtensions
               }
             ) }),
-            chatGroups.map(
-              (group, idx) => group.role === "user" ? renderUserGroup(group) : renderBotGroup(
+            chatGroups.map((group, idx) => {
+              const context = {
                 group,
-                idx === chatGroups.length - 1,
-                renderFunctionCall
-              )
-            ),
+                index: idx,
+                previousGroup: chatGroups[idx - 1],
+                nextGroup: chatGroups[idx + 1]
+              };
+              const defaultNode = group.role === "user" ? renderUserGroup(group, chatGroups[idx + 1]) : renderBotGroup(group, idx === chatGroups.length - 1, renderFunctionCall);
+              const customNode = renderGroup == null ? void 0 : renderGroup({ ...context, defaultNode });
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+                renderBeforeGroup == null ? void 0 : renderBeforeGroup(context),
+                customNode === void 0 ? defaultNode : customNode,
+                renderAfterGroup == null ? void 0 : renderAfterGroup(context)
+              ] }, group.id);
+            }),
+            (history == null ? void 0 : history.direction) === "bottom" && historyControls,
             renderSuggestions(),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: messagesEndRef })
           ]