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

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

@@ -54,6 +54,10 @@ var XAdkChatbot = (0, import_react.forwardRef)(
     prologue,
     suggestions,
     messages,
+    renderBeforeGroup,
+    renderAfterGroup,
+    renderGroup,
+    history,
     showFnCallDetail,
     onConfirm,
     onSuggest,
@@ -93,6 +97,98 @@ 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 });
@@ -177,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)
@@ -184,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;
@@ -231,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)
@@ -242,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) => ({
@@ -552,67 +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, "data-message-id": group.id, 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,
-              "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
-                }
-              )
-            }
-          ),
-          showUserActions && /* @__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)(m.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 card = document.querySelector(
-                    `[data-message-id="${group.id}"] [data-xadk-user-card]`
-                  );
-                  const selected = (0, import_utils.getSelectionText)(
-                    card
-                  );
-                  (0, import_copy_to_clipboard.default)(selected || m.text || "");
-                  import_antd.message.success("复制成功");
-                }
-              }
-            ) })
-          ] }) })
-        ] }, 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,
@@ -652,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)(
@@ -661,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,
               {
@@ -672,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 })
           ]