@agentscope-ai/chat 1.1.60 → 1.1.61-beta.1775617662658

package/components/Bubble/BubbleList.tsx

@@ -3,9 +3,9 @@ import type { BubbleProps } from './interface';
 import ScrollToBottom from './ScrollToBottom';
 import Style from './style/list';
 import { useProviderContext } from '@agentscope-ai/chat';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import cls from 'classnames';
-import { useInViewport, useMount, usePrevious } from 'ahooks';
+import { useInViewport, usePrevious } from 'ahooks';
 import { usePaginationItems } from './hooks/usePaginationItemsData';
 import { Spin } from 'antd';
 
@@ -45,6 +45,9 @@ export interface BubbleListProps extends React.HTMLAttributes<HTMLDivElement> {
   };
   pagination?: boolean;
   order?: 'asc' | 'desc';
+  onLoadMore?: () => Promise<{ noMore: boolean }>;
+  onLoadMoreStart?: () => void;
+  onLoadMoreEnd?: () => void;
 }
 
 interface BubbleListContentProps {
@@ -55,16 +58,30 @@ interface BubbleListContentProps {
   scrollRef: React.RefObject<HTMLElement | null>;
   listClassName?: string;
   children?: React.ReactNode | React.ReactNode[];
+  onLoadMoreStart?: () => void;
+  onLoadMoreEnd?: () => void;
 }
 
-function BubbleListContent({ order, paginationItems, noMore, loadMore, scrollRef, children }: BubbleListContentProps) {
+function BubbleListContent(props: BubbleListContentProps) {
+  const { order, paginationItems, noMore, loadMore, scrollRef, children, onLoadMoreStart, onLoadMoreEnd } = props;
   const handleLoadMore = useCallback(() => {
     return loadMore(scrollRef);
   }, [loadMore, scrollRef]);
 
+  const moreUI = useMemo(() => {
+    if (noMore) return null;
+    return (
+      <LoadMore
+        handleLoadMore={handleLoadMore}
+        onLoadMoreStart={onLoadMoreStart}
+        onLoadMoreEnd={onLoadMoreEnd}
+      />
+    );
+  }, [handleLoadMore, onLoadMoreStart, onLoadMoreEnd, noMore]);
+
   return (
     <>
-      {order === 'asc' && !noMore ? <LoadMore handleLoadMore={handleLoadMore} /> : null}
+      {order === 'asc' && !noMore ? moreUI : null}
       {children ? children : paginationItems.map(({ key, ...bubble }, index) => {
         const isLast = index === paginationItems.length - 1;
         return (
@@ -75,12 +92,18 @@ function BubbleListContent({ order, paginationItems, noMore, loadMore, scrollRef
           />
         )
       })}
-      {order === 'desc' && !noMore ? <LoadMore handleLoadMore={handleLoadMore} /> : null}
+      {order === 'desc' && !noMore ? moreUI : null}
     </>
   );
 }
 
-function LoadMore({ handleLoadMore }: { handleLoadMore: () => Promise<void> }) {
+interface LoadMoreProps {
+  handleLoadMore: () => Promise<void>;
+  onLoadMoreStart?: () => void;
+  onLoadMoreEnd?: () => void;
+}
+
+function LoadMore({ handleLoadMore, onLoadMoreStart, onLoadMoreEnd }: LoadMoreProps) {
   const ref = useRef(null);
   const [inViewport] = useInViewport(ref)
   const [loading, setLoading] = useState(false)
@@ -92,13 +115,15 @@ function LoadMore({ handleLoadMore }: { handleLoadMore: () => Promise<void> }) {
     if (inViewport && previousInViewport === undefined) return;
     if (loading) return;
     if (inViewport) {
+      onLoadMoreStart?.();
       setLoading(true);
       handleLoadMore().finally(() => {
         setLoading(false);
+        onLoadMoreEnd?.();
       });
     }
 
-  }, [previousInViewport, inViewport, loading, handleLoadMore])
+  }, [previousInViewport, inViewport, loading, handleLoadMore, onLoadMoreStart, onLoadMoreEnd])
 
   return <div ref={ref} className={`${prefixCls}-load-more`}><Spin spinning={true} /></div>
 }
@@ -108,6 +133,7 @@ const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps>
     items = [],
     order = 'asc',
   } = props;
+  const [serverNoMore, setServerNoMore] = useState(false);
 
   const [showScrollToBottom, setShowScrollToBottom] = useState(false);
   const scrollRef = React.useRef<HTMLDivElement | null>(null);
@@ -169,10 +195,39 @@ const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps>
   }), [scrollToBottom]);
 
 
-  const { items: paginationItems, noMore, loadMore } = usePaginationItems(items, {
-    enable: props.pagination,
+  const enableServerPagination = Boolean(props.pagination && props.onLoadMore);
+  const { items: localPaginationItems, noMore: localNoMore, loadMore: localLoadMore } = usePaginationItems(items, {
+    enable: Boolean(props.pagination && !enableServerPagination),
     order,
   });
+  const loadMoreFromServer = useCallback(async (innerScrollRef?: React.RefObject<HTMLElement | null>) => {
+    const scrollEl = innerScrollRef?.current;
+    const prevScrollHeight = scrollEl?.scrollHeight ?? 0;
+    const result = await props.onLoadMore?.();
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+
+    if (scrollEl) {
+      const newScrollHeight = scrollEl.scrollHeight;
+      scrollEl.scrollTop += newScrollHeight - prevScrollHeight;
+    }
+    setServerNoMore(Boolean(result?.noMore));
+  }, [props.onLoadMore]);
+
+  const paginationItems = enableServerPagination ? items : localPaginationItems;
+  const noMore = enableServerPagination ? serverNoMore : localNoMore;
+  const loadMore = enableServerPagination ? loadMoreFromServer : localLoadMore;
+
+  useEffect(() => {
+    if (!enableServerPagination) return;
+    if (items.length === 0) {
+      setServerNoMore(false);
+    }
+  }, [enableServerPagination, items.length]);
+
+  useEffect(() => {
+    if (!enableServerPagination) return;
+    setServerNoMore(false);
+  }, [enableServerPagination, props.onLoadMore]);
 
   useEffect(() => {
     scrollToBottom('auto');
@@ -218,6 +273,8 @@ const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps>
           noMore={noMore}
           loadMore={loadMore}
           scrollRef={scrollRef as React.RefObject<HTMLElement | null>}
+          onLoadMoreStart={props.onLoadMoreStart}
+          onLoadMoreEnd={props.onLoadMoreEnd}
         >
           {props.children}
         </BubbleListContent>

package/components/ChatAnywhere/Chat/index.tsx

@@ -10,15 +10,46 @@ import Style from './style';
 
 export default forwardRef(function (_, ref) {
   const messages = useChatAnywhere(v => v.messages);
+  const setMessages = useChatAnywhere(v => v.setMessages);
+  const onLoadMore = useChatAnywhere(v => v.onLoadMore);
   const safeMessages = [...(messages || [])].reverse();
   const { getPrefixCls } = useProviderContext();
   const prefixCls = getPrefixCls('chat-anywhere');
   const uiConfig = useChatAnywhere(v => v.uiConfig);
   const [ready, setReady] = useState(false);
   const prevMessagesLengthRef = React.useRef(safeMessages.length);
+  const loadingMoreRef = React.useRef(false);
+
+  const handleLoadMoreStart = React.useCallback(() => {
+    loadingMoreRef.current = true;
+  }, []);
+
+  const handleLoadMoreEnd = React.useCallback(() => {
+    loadingMoreRef.current = false;
+  }, []);
+
+  const handleLoadMore = React.useCallback(async () => {
+    if (!onLoadMore) {
+      return { noMore: true };
+    }
+    const result = await onLoadMore();
+    const nextMessages = result?.messages || [];
+
+    if (nextMessages.length > 0) {
+      setMessages((prev) => {
+        const existedIds = new Set(prev.map((item) => item.id));
+        const mergedHistory = nextMessages
+          .filter((item) => !existedIds.has(item.id))
+          .map((item) => ({ ...item, history: true }));
+        return [...mergedHistory, ...prev];
+      });
+    }
+
+    return { noMore: result?.noMore ?? true };
+  }, [onLoadMore, setMessages]);
 
   React.useEffect(() => {
-    if (safeMessages.length > prevMessagesLengthRef.current) {
+    if (safeMessages.length > prevMessagesLengthRef.current && !loadingMoreRef.current) {
       // New messages in desc mode should always bring viewport to latest bottom.
       (ref as any)?.chatRef?.current?.scrollToBottom?.();
     }
@@ -46,6 +77,9 @@ export default forwardRef(function (_, ref) {
         pagination={uiConfig?.bubbleList?.pagination}
         order="desc"
         style={{ height: 0, flex: emptyMessage ? 0 : 1 }}
+        onLoadMore={handleLoadMore}
+        onLoadMoreStart={handleLoadMoreStart}
+        onLoadMoreEnd={handleLoadMoreEnd}
         // @ts-ignore
         ref={ref.chatRef}
         items={safeMessages}

package/components/ChatAnywhere/Input/index.tsx

@@ -381,6 +381,7 @@ export default forwardRef(function (_, ref) {
         sendDisabled={sendDisabled}
         allowEmptySubmit={(onInput.allowEmptySubmit ?? true) && hasSubmittableFiles}
         header={senderHeader}
+        footer={onInput.footer}
         prefix={<>
           {uploadPrefixNodes}
           {onInput?.morePrefixActions}

package/components/ChatAnywhere/hooks/ChatAnywhereProvider.tsx

@@ -206,6 +206,11 @@ export interface IChatAnywhereContext {
    * @descriptionEn UI configuration object for customizing interface appearance and behavior
    */
   uiConfig?: IChatAnywhereConfig['uiConfig'];
+  /**
+   * @description 加载更多消息的回调函数
+   * @descriptionEn Callback function for loading more messages
+   */
+  onLoadMore?: IChatAnywhereConfig['onLoadMore'];
 };
 
 

package/components/ChatAnywhere/hooks/types.ts

@@ -69,6 +69,11 @@ export interface TMessage {
    * @descriptionEn Processing status of the message, affects display effects
    */
   msgStatus?: 'finished' | 'interrupted' | 'generating' | 'error';
+  /**
+   * @description 是否为历史消息（通常由后端分页加载）
+   * @descriptionEn Whether this is a historical message (usually loaded by server-side pagination)
+   */
+  history?: boolean;
 }
 
 export interface IChatAnywhereConfigUIConfig {
@@ -151,6 +156,11 @@ export interface IChatAnywhereConfigOnInput {
    * @descriptionEn Input field header components
    */
   header?: React.ReactElement | React.ReactElement[];
+  /**
+   * @description 输入框底部组件
+   * @descriptionEn Input field footer components
+   */
+  footer?: React.ReactNode;
   /**
    * @description 是否启用用户focus时展开输入框组件
    * @descriptionEn Whether to enable the user focus to expand the input box component
@@ -296,6 +306,14 @@ export interface IChatAnywhereConfig {
    * @descriptionEn Configuration options for file upload functionality
    */
   onUpload?: IChatAnywhereConfigOnUpload[];
+  /**
+   * @description 加载更多消息的回调函数
+   * @descriptionEn Callback function for loading more messages
+   */
+  onLoadMore?(): Promise<{
+    messages: TMessage[];
+    noMore: boolean;
+  }>;
 }
 
 export interface IChatAnywhereRef extends IChatAnywhereContext {

package/components/Sender/index.tsx

@@ -185,6 +185,11 @@ export interface SenderProps extends Pick<TextareaProps, 'placeholder' | 'onKeyP
    * @descriptionEn Header UI
    */
   header?: React.ReactNode;
+  /**
+   * @description 底部 UI
+   * @descriptionEn Footer UI
+   */
+  footer?: React.ReactNode;
   /**
    * @description 最大文本长度
    * @descriptionEn Max content length
@@ -658,6 +663,7 @@ const ForwardSender = React.forwardRef<SenderRef, SenderProps>((props, ref) => {
             </ActionButtonContext.Provider>
           </div>
         </div>
+        {props.footer}
       </div>
     </div>
   </>

package/lib/Bubble/BubbleList.d.ts

@@ -33,6 +33,11 @@ export interface BubbleListProps extends React.HTMLAttributes<HTMLDivElement> {
     };
     pagination?: boolean;
     order?: 'asc' | 'desc';
+    onLoadMore?: () => Promise<{
+        noMore: boolean;
+    }>;
+    onLoadMoreStart?: () => void;
+    onLoadMoreEnd?: () => void;
 }
 declare const ForwardBubbleList: React.ForwardRefExoticComponent<BubbleListProps & React.RefAttributes<BubbleListRef>>;
 export default ForwardBubbleList;

package/lib/Bubble/BubbleList.js

@@ -1,5 +1,8 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["key"];
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -17,7 +20,7 @@ import Bubble from "./Bubble";
 import ScrollToBottom from "./ScrollToBottom";
 import Style from "./style/list";
 import { useProviderContext } from "./..";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import cls from 'classnames';
 import { useInViewport, usePrevious } from 'ahooks';
 import { usePaginationItems } from "./hooks/usePaginationItemsData";
@@ -26,34 +29,42 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function BubbleListContent(_ref) {
-  var order = _ref.order,
-    paginationItems = _ref.paginationItems,
-    noMore = _ref.noMore,
-    loadMore = _ref.loadMore,
-    scrollRef = _ref.scrollRef,
-    children = _ref.children;
+function BubbleListContent(props) {
+  var order = props.order,
+    paginationItems = props.paginationItems,
+    noMore = props.noMore,
+    loadMore = props.loadMore,
+    scrollRef = props.scrollRef,
+    children = props.children,
+    onLoadMoreStart = props.onLoadMoreStart,
+    onLoadMoreEnd = props.onLoadMoreEnd;
   var handleLoadMore = useCallback(function () {
     return loadMore(scrollRef);
   }, [loadMore, scrollRef]);
+  var moreUI = useMemo(function () {
+    if (noMore) return null;
+    return /*#__PURE__*/_jsx(LoadMore, {
+      handleLoadMore: handleLoadMore,
+      onLoadMoreStart: onLoadMoreStart,
+      onLoadMoreEnd: onLoadMoreEnd
+    });
+  }, [handleLoadMore, onLoadMoreStart, onLoadMoreEnd, noMore]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [order === 'asc' && !noMore ? /*#__PURE__*/_jsx(LoadMore, {
-      handleLoadMore: handleLoadMore
-    }) : null, children ? children : paginationItems.map(function (_ref2, index) {
-      var key = _ref2.key,
-        bubble = _objectWithoutProperties(_ref2, _excluded);
+    children: [order === 'asc' && !noMore ? moreUI : null, children ? children : paginationItems.map(function (_ref, index) {
+      var key = _ref.key,
+        bubble = _objectWithoutProperties(_ref, _excluded);
       var isLast = index === paginationItems.length - 1;
       return /*#__PURE__*/_createElement(Bubble, _objectSpread(_objectSpread({}, bubble), {}, {
         isLast: isLast,
         key: bubble.id || key || index
       }));
-    }), order === 'desc' && !noMore ? /*#__PURE__*/_jsx(LoadMore, {
-      handleLoadMore: handleLoadMore
-    }) : null]
+    }), order === 'desc' && !noMore ? moreUI : null]
   });
 }
-function LoadMore(_ref3) {
-  var handleLoadMore = _ref3.handleLoadMore;
+function LoadMore(_ref2) {
+  var handleLoadMore = _ref2.handleLoadMore,
+    onLoadMoreStart = _ref2.onLoadMoreStart,
+    onLoadMoreEnd = _ref2.onLoadMoreEnd;
   var ref = useRef(null);
   var _useInViewport = useInViewport(ref),
     _useInViewport2 = _slicedToArray(_useInViewport, 1),
@@ -70,12 +81,14 @@ function LoadMore(_ref3) {
     if (inViewport && previousInViewport === undefined) return;
     if (loading) return;
     if (inViewport) {
+      onLoadMoreStart === null || onLoadMoreStart === void 0 || onLoadMoreStart();
       setLoading(true);
       handleLoadMore().finally(function () {
         setLoading(false);
+        onLoadMoreEnd === null || onLoadMoreEnd === void 0 || onLoadMoreEnd();
       });
     }
-  }, [previousInViewport, inViewport, loading, handleLoadMore]);
+  }, [previousInViewport, inViewport, loading, handleLoadMore, onLoadMoreStart, onLoadMoreEnd]);
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     className: "".concat(prefixCls, "-load-more"),
@@ -92,8 +105,12 @@ var BubbleList = function BubbleList(props, ref) {
     order = _props$order === void 0 ? 'asc' : _props$order;
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    showScrollToBottom = _useState4[0],
-    setShowScrollToBottom = _useState4[1];
+    serverNoMore = _useState4[0],
+    setServerNoMore = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showScrollToBottom = _useState6[0],
+    setShowScrollToBottom = _useState6[1];
   var scrollRef = React.useRef(null);
   var isAtBottomRef = React.useRef(true);
   var _useProviderContext2 = useProviderContext(),
@@ -155,13 +172,62 @@ var BubbleList = function BubbleList(props, ref) {
       })
     };
   }, [scrollToBottom]);
+  var enableServerPagination = Boolean(props.pagination && props.onLoadMore);
   var _usePaginationItems = usePaginationItems(items, {
-      enable: props.pagination,
+      enable: Boolean(props.pagination && !enableServerPagination),
       order: order
     }),
-    paginationItems = _usePaginationItems.items,
-    noMore = _usePaginationItems.noMore,
-    loadMore = _usePaginationItems.loadMore;
+    localPaginationItems = _usePaginationItems.items,
+    localNoMore = _usePaginationItems.noMore,
+    localLoadMore = _usePaginationItems.loadMore;
+  var loadMoreFromServer = useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(innerScrollRef) {
+      var _scrollEl$scrollHeigh, _props$onLoadMore;
+      var scrollEl, prevScrollHeight, result, newScrollHeight;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            scrollEl = innerScrollRef === null || innerScrollRef === void 0 ? void 0 : innerScrollRef.current;
+            prevScrollHeight = (_scrollEl$scrollHeigh = scrollEl === null || scrollEl === void 0 ? void 0 : scrollEl.scrollHeight) !== null && _scrollEl$scrollHeigh !== void 0 ? _scrollEl$scrollHeigh : 0;
+            _context.next = 4;
+            return (_props$onLoadMore = props.onLoadMore) === null || _props$onLoadMore === void 0 ? void 0 : _props$onLoadMore.call(props);
+          case 4:
+            result = _context.sent;
+            _context.next = 7;
+            return new Promise(function (resolve) {
+              return requestAnimationFrame(function () {
+                return resolve();
+              });
+            });
+          case 7:
+            if (scrollEl) {
+              newScrollHeight = scrollEl.scrollHeight;
+              scrollEl.scrollTop += newScrollHeight - prevScrollHeight;
+            }
+            setServerNoMore(Boolean(result === null || result === void 0 ? void 0 : result.noMore));
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [props.onLoadMore]);
+  var paginationItems = enableServerPagination ? items : localPaginationItems;
+  var noMore = enableServerPagination ? serverNoMore : localNoMore;
+  var loadMore = enableServerPagination ? loadMoreFromServer : localLoadMore;
+  useEffect(function () {
+    if (!enableServerPagination) return;
+    if (items.length === 0) {
+      setServerNoMore(false);
+    }
+  }, [enableServerPagination, items.length]);
+  useEffect(function () {
+    if (!enableServerPagination) return;
+    setServerNoMore(false);
+  }, [enableServerPagination, props.onLoadMore]);
   useEffect(function () {
     scrollToBottom('auto');
   }, [items.length, scrollToBottom]);
@@ -193,6 +259,8 @@ var BubbleList = function BubbleList(props, ref) {
           noMore: noMore,
           loadMore: loadMore,
           scrollRef: scrollRef,
+          onLoadMoreStart: props.onLoadMoreStart,
+          onLoadMoreEnd: props.onLoadMoreEnd,
           children: props.children
         })]
       }), /*#__PURE__*/_jsx(ScrollToBottom, {

package/lib/ChatAnywhere/Chat/index.js

@@ -1,7 +1,12 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
@@ -29,6 +34,12 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
   var messages = useChatAnywhere(function (v) {
     return v.messages;
   });
+  var setMessages = useChatAnywhere(function (v) {
+    return v.setMessages;
+  });
+  var onLoadMore = useChatAnywhere(function (v) {
+    return v.onLoadMore;
+  });
   var safeMessages = _toConsumableArray(messages || []).reverse();
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
@@ -41,8 +52,58 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
     ready = _useState2[0],
     setReady = _useState2[1];
   var prevMessagesLengthRef = React.useRef(safeMessages.length);
+  var loadingMoreRef = React.useRef(false);
+  var handleLoadMoreStart = React.useCallback(function () {
+    loadingMoreRef.current = true;
+  }, []);
+  var handleLoadMoreEnd = React.useCallback(function () {
+    loadingMoreRef.current = false;
+  }, []);
+  var handleLoadMore = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _result$noMore;
+    var result, nextMessages;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (onLoadMore) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", {
+            noMore: true
+          });
+        case 2:
+          _context.next = 4;
+          return onLoadMore();
+        case 4:
+          result = _context.sent;
+          nextMessages = (result === null || result === void 0 ? void 0 : result.messages) || [];
+          if (nextMessages.length > 0) {
+            setMessages(function (prev) {
+              var existedIds = new Set(prev.map(function (item) {
+                return item.id;
+              }));
+              var mergedHistory = nextMessages.filter(function (item) {
+                return !existedIds.has(item.id);
+              }).map(function (item) {
+                return _objectSpread(_objectSpread({}, item), {}, {
+                  history: true
+                });
+              });
+              return [].concat(_toConsumableArray(mergedHistory), _toConsumableArray(prev));
+            });
+          }
+          return _context.abrupt("return", {
+            noMore: (_result$noMore = result === null || result === void 0 ? void 0 : result.noMore) !== null && _result$noMore !== void 0 ? _result$noMore : true
+          });
+        case 8:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [onLoadMore, setMessages]);
   React.useEffect(function () {
-    if (safeMessages.length > prevMessagesLengthRef.current) {
+    if (safeMessages.length > prevMessagesLengthRef.current && !loadingMoreRef.current) {
       var _chatRef, _chatRef$scrollToBott;
       // New messages in desc mode should always bring viewport to latest bottom.
       ref === null || ref === void 0 || (_chatRef = ref.chatRef) === null || _chatRef === void 0 || (_chatRef = _chatRef.current) === null || _chatRef === void 0 || (_chatRef$scrollToBott = _chatRef.scrollToBottom) === null || _chatRef$scrollToBott === void 0 || _chatRef$scrollToBott.call(_chatRef);
@@ -63,7 +124,10 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
         style: {
           height: 0,
           flex: emptyMessage ? 0 : 1
-        }
+        },
+        onLoadMore: handleLoadMore,
+        onLoadMoreStart: handleLoadMoreStart,
+        onLoadMoreEnd: handleLoadMoreEnd
         // @ts-ignore
         ,
         ref: ref.chatRef,

package/lib/ChatAnywhere/Input/index.js

@@ -426,6 +426,7 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
         sendDisabled: sendDisabled,
         allowEmptySubmit: ((_onInput$allowEmptySu = onInput.allowEmptySubmit) !== null && _onInput$allowEmptySu !== void 0 ? _onInput$allowEmptySu : true) && hasSubmittableFiles,
         header: senderHeader,
+        footer: onInput.footer,
         prefix: /*#__PURE__*/_jsxs(_Fragment, {
           children: [uploadPrefixNodes, onInput === null || onInput === void 0 ? void 0 : onInput.morePrefixActions]
         }),

package/lib/ChatAnywhere/hooks/ChatAnywhereProvider.d.ts

@@ -141,6 +141,11 @@ export interface IChatAnywhereContext {
      * @descriptionEn UI configuration object for customizing interface appearance and behavior
      */
     uiConfig?: IChatAnywhereConfig['uiConfig'];
+    /**
+     * @description 加载更多消息的回调函数
+     * @descriptionEn Callback function for loading more messages
+     */
+    onLoadMore?: IChatAnywhereConfig['onLoadMore'];
 }
 export type ChatAnywhereRef = ReturnType<typeof useMessages> & ReturnType<typeof useInput> & ReturnType<typeof useSessionList> & {
     setInputContent: (content: string, fileList?: UploadFile[][]) => void;

package/lib/ChatAnywhere/hooks/types.d.ts

@@ -67,6 +67,11 @@ export interface TMessage {
      * @descriptionEn Processing status of the message, affects display effects
      */
     msgStatus?: 'finished' | 'interrupted' | 'generating' | 'error';
+    /**
+     * @description 是否为历史消息（通常由后端分页加载）
+     * @descriptionEn Whether this is a historical message (usually loaded by server-side pagination)
+     */
+    history?: boolean;
 }
 export interface IChatAnywhereConfigUIConfig {
     /**
@@ -147,6 +152,11 @@ export interface IChatAnywhereConfigOnInput {
      * @descriptionEn Input field header components
      */
     header?: React.ReactElement | React.ReactElement[];
+    /**
+     * @description 输入框底部组件
+     * @descriptionEn Input field footer components
+     */
+    footer?: React.ReactNode;
     /**
      * @description 是否启用用户focus时展开输入框组件
      * @descriptionEn Whether to enable the user focus to expand the input box component
@@ -294,6 +304,14 @@ export interface IChatAnywhereConfig {
      * @descriptionEn Configuration options for file upload functionality
      */
     onUpload?: IChatAnywhereConfigOnUpload[];
+    /**
+     * @description 加载更多消息的回调函数
+     * @descriptionEn Callback function for loading more messages
+     */
+    onLoadMore?(): Promise<{
+        messages: TMessage[];
+        noMore: boolean;
+    }>;
 }
 export interface IChatAnywhereRef extends IChatAnywhereContext {
     /**

package/lib/Sender/index.d.ts

@@ -147,6 +147,11 @@ export interface SenderProps extends Pick<TextareaProps, 'placeholder' | 'onKeyP
      * @descriptionEn Header UI
      */
     header?: React.ReactNode;
+    /**
+     * @description 底部 UI
+     * @descriptionEn Footer UI
+     */
+    footer?: React.ReactNode;
     /**
      * @description 最大文本长度
      * @descriptionEn Max content length

package/lib/Sender/index.js

@@ -428,7 +428,7 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
               children: actionNode
             })]
           })]
-        })]
+        }), props.footer]
       })]
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/chat",
-  "version": "1.1.60",
+  "version": "1.1.61-beta.1775617662658",
   "description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
   "license": "Apache-2.0",
   "sideEffects": [

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/README.md

@@ -1,75 +0,0 @@
-# agentscope-runtime-starter-webui
-
-## node version
-
-> =22
-
-## install
-
-```
-$ npm run install
-```
-
-## dev
-
-```
-$ npm run dev
-```
-
-## build
-
-```
-$ npm run build
-```
-
-## Core Code
-```tsx
-import { AgentScopeRuntimeWebUI } from '@agentscope-ai/chat';
-
-const options = {
-  theme: {
-    colorPrimary: '#615CED',
-    darkMode: true,
-    prefix: 'agentscope-runtime-webui',
-    leftHeader: {
-      logo: 'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
-      title: 'Runtime WebUI',
-    },
-  },
-  sender: {
-    maxLength: 10000,
-    disclaimer:
-      'AI can also make mistakes, so please check carefully and use it with caution',
-  },
-
-  welcome: {
-    greeting: 'Hello, how can I help you today?',
-    description:
-      'I am a helpful assistant that can help you with your questions.',
-    avatar:
-      'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
-    prompts: [
-      {
-        value: 'Hello',
-      },
-      {
-        value: 'How are you?',
-      },
-      {
-        value: 'What can you do?',
-      },
-    ],
-  },
-  api: {
-    baseURL: 'YOUR_API_URL',
-    token: 'YOUR_API_TOKEN', // is not required
-  },
-};
-
-
-<AgentScopeRuntimeWebUI
-  options={options}
-/>
-
-
-```

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/eslint.config.js

@@ -1,28 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>AgentScope Runtime Starter WebUI</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "agentscope-runtime-starter-webui",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite --host",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@agentscope-ai/icons": "^1.0.46",
-    "@agentscope-ai/chat": "1.1.59-beta.1775119922876",
-    "@agentscope-ai/design": "^1.0.19",
-    "antd": "^5.29.1",
-    "antd-style": "^3.7.1",
-    "react": "^18",
-    "react-dom": "^18"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.25.0",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.0.0",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5"
-  }
-}

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/src/App.tsx

@@ -1,20 +0,0 @@
-import Chat from './components/Chat';
-
-import { createGlobalStyle } from 'antd-style';
-
-
-const GlobalStyle = createGlobalStyle`
-* {
-  margin: 0;
-  box-sizing: border-box;
-}
-`;
-
-function App() {
-  return <>
-    <GlobalStyle />
-    <Chat />
-  </>
-}
-
-export default App

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/src/components/Cards/Weather.tsx

@@ -1,234 +0,0 @@
-import { createStyles } from 'antd-style';
-
-interface IToolContentItem {
-  type: string;
-  object?: string;
-  status: string;
-  delta?: boolean | null;
-  msg_id?: string;
-  index?: number;
-  error?: unknown;
-  sequence_number?: number | null;
-  data: {
-    name: string;
-    arguments?: string;
-    output?: string;
-  };
-}
-
-interface IToolMessage {
-  id: string;
-  object?: string;
-  type: string;
-  role: string;
-  status: string;
-  content: IToolContentItem[];
-  code?: string | null;
-  message?: string | null;
-}
-
-export interface IWeatherItem {
-  location: string;
-  weather: string;
-  temperature: number;
-  date: string;
-}
-
-function parseOutput(data: IToolMessage): IWeatherItem[] {
-  const outputContent = data.content[1]?.data;
-  try {
-    // @ts-ignore
-    return JSON.parse(JSON.parse(outputContent.output));
-  } catch {
-    return [];
-  }
-}
-
-const weatherIcons: Record<string, string> = {
-  sunny: '☀️',
-  cloudy: '☁️',
-  rainy: '🌧️',
-  snowy: '❄️',
-  stormy: '⛈️',
-  windy: '💨',
-  foggy: '🌫️',
-};
-
-const weatherLabels: Record<string, string> = {
-  sunny: '晴',
-  cloudy: '多云',
-  rainy: '雨',
-  snowy: '雪',
-  stormy: '暴风雨',
-  windy: '大风',
-  foggy: '雾',
-};
-
-function formatDate(dateStr: string) {
-  const d = new Date(dateStr);
-  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-  const month = d.getMonth() + 1;
-  const day = d.getDate();
-  const today = new Date();
-  const isToday =
-    d.getFullYear() === today.getFullYear() &&
-    d.getMonth() === today.getMonth() &&
-    d.getDate() === today.getDate();
-  return {
-    weekday: isToday ? '今天' : weekdays[d.getDay()],
-    date: `${month}/${day}`,
-  };
-}
-
-const useStyles = createStyles(({ token, css }) => ({
-  wrapper: css`
-    border-radius: 12px;
-    border: 1px solid ${token.colorBorderSecondary};
-    background: ${token.colorBgElevated};
-    overflow: hidden;
-  `,
-  header: css`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 14px 16px;
-    border-bottom: 1px solid ${token.colorBorderSecondary};
-  `,
-  locationRow: css`
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  `,
-  locationIcon: css`
-    font-size: 16px;
-    line-height: 1;
-  `,
-  locationText: css`
-    font-size: 14px;
-    font-weight: 600;
-    color: ${token.colorText};
-  `,
-  todayTemp: css`
-    font-size: 22px;
-    font-weight: 700;
-    color: ${token.colorText};
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  `,
-  todayWeather: css`
-    font-size: 13px;
-    font-weight: 400;
-    color: ${token.colorTextSecondary};
-  `,
-  container: css`
-    display: flex;
-    overflow-x: auto;
-    padding: 14px 12px;
-  `,
-  card: css`
-    flex: 1;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 12px;
-    border-radius: 10px;
-    min-width: 72px;
-    transition: background 0.2s;
-    cursor: default;
-    &:hover {
-      background: ${token.colorFillQuaternary};
-    }
-  `,
-  todayCard: css`
-    background: ${token.colorPrimaryBg};
-    &:hover {
-      background: ${token.colorPrimaryBgHover};
-    }
-  `,
-  weekday: css`
-    font-size: 12px;
-    font-weight: 500;
-    color: ${token.colorTextSecondary};
-    line-height: 1;
-  `,
-  todayWeekday: css`
-    color: ${token.colorPrimary};
-    font-weight: 600;
-  `,
-  date: css`
-    font-size: 11px;
-    color: ${token.colorTextQuaternary};
-    line-height: 1;
-  `,
-  icon: css`
-    font-size: 26px;
-    line-height: 1;
-  `,
-  temp: css`
-    font-size: 15px;
-    font-weight: 600;
-    color: ${token.colorText};
-    line-height: 1;
-  `,
-  label: css`
-    font-size: 11px;
-    color: ${token.colorTextTertiary};
-    line-height: 1;
-  `,
-}));
-
-export default function Weather(props: { data: IToolMessage }) {
-  const items = parseOutput(props.data);
-  const { styles, cx } = useStyles();
-
-  if (!items.length) return null;
-
-  const todayItem = items.find((_, i) => {
-    const { weekday } = formatDate(items[i].date);
-    return weekday === '今天';
-  }) || items[0];
-
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.header}>
-        <div className={styles.locationRow}>
-          <span className={styles.locationIcon}>📍</span>
-          <span className={styles.locationText}>{items[0].location}</span>
-        </div>
-        <div className={styles.todayTemp}>
-          {weatherIcons[todayItem.weather] || '🌤️'} {todayItem.temperature}°
-          <span className={styles.todayWeather}>
-            {weatherLabels[todayItem.weather] || todayItem.weather}
-          </span>
-        </div>
-      </div>
-      <div className={styles.container}>
-        {items.map((item) => {
-          const { weekday, date } = formatDate(item.date);
-          const isToday = weekday === '今天';
-          return (
-            <div
-              key={item.date}
-              className={cx(styles.card, isToday && styles.todayCard)}
-            >
-              <span className={cx(styles.weekday, isToday && styles.todayWeekday)}>
-                {weekday}
-              </span>
-              <span className={styles.date}>{date}</span>
-              <span className={styles.icon}>
-                {weatherIcons[item.weather] || '🌤️'}
-              </span>
-              <span className={styles.temp}>{item.temperature}°</span>
-              <span className={styles.label}>
-                {weatherLabels[item.weather] || item.weather}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/src/components/Chat/defaultConfig.ts

@@ -1,54 +0,0 @@
-import { IAgentScopeRuntimeWebUIOptions } from '@agentscope-ai/chat';
-import Weather from '../Cards/Weather';
-
-
-const config: IAgentScopeRuntimeWebUIOptions = {
-  customToolRenderConfig: {
-    'weather search mock': Weather,
-  },
-  theme: {
-    colorPrimary: '#615CED',
-    darkMode: true,
-    prefix: 'agentscope-runtime-webui',
-    leftHeader: {
-      logo: 'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
-      title: 'Runtime WebUI',
-    },
-  },
-  sender: {
-    maxLength: 10000,
-    disclaimer:
-      'AI can also make mistakes, so please check carefully and use it with caution',
-  },
-  session: {
-    multiple: false,
-  },
-
-  welcome: {
-    greeting: 'Hello, how can I help you today?',
-    description:
-      'I am a helpful assistant that can help you with your questions.',
-    avatar:
-      'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
-    prompts: [
-      {
-        value: 'Hello',
-      },
-      {
-        value: 'How are you?',
-      },
-      {
-        value: 'What can you do?',
-      },
-    ],
-  },
-  api: {
-    baseURL: 'https://highcodnvvwbdks-ptzchpamaz.cn-beijing.fcapp.run/process',
-    token: '32a3e4da-528a-462d-a270-74b10cb21d75',
-    enableHistoryMessages: true,
-  },
-};
-
-
-
-export default config 

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/src/components/Chat/index.tsx

@@ -1,11 +0,0 @@
-import { AgentScopeRuntimeWebUI, IAgentScopeRuntimeWebUIOptions } from '@agentscope-ai/chat';
-import defaultConfig from './defaultConfig';
-
-export default function () {
-
-  return <div style={{ height: '100vh' }}>
-    <AgentScopeRuntimeWebUI
-      options={defaultConfig as unknown as IAgentScopeRuntimeWebUIOptions}
-    />
-  </div>;
-}

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/src/main.tsx

@@ -1,9 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/src/vite-env.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="vite/client" />
-
-declare const BASE_URL: string;
-declare const TOKEN: string;

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/tsconfig.app.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/tsconfig.node.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/components/AgentScopeRuntimeWebUI/bailian-high-code-webui/vite.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  define: {},
-  plugins: [react()],
-})