fcr-ui-scene 3.8.1-beta → 3.8.2

package/lib-es/modules/chat/components/chat-select/select-item/index.js

@@ -0,0 +1,150 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+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; }
+import { FcrUserRole } from 'fcr-core/lib/type';
+import { observer } from 'mobx-react';
+import { getNameColor } from 'agora-ui-foundation/lib/components/avatar/helper';
+import classNames from 'classnames';
+import { USER_ALL } from '../../../types';
+import { TextBubble } from 'agora-ui-foundation/lib/components/text-bubble';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrAvatar } from 'agora-ui-foundation/lib/components/avatar';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default observer(function (props) {
+  var key = props.key,
+    style = props.style,
+    onSelect = props.onSelect,
+    type = props.type,
+    isSelf = props.isSelf,
+    currentUser = props.currentUser,
+    filterKey = props.filterKey;
+  var t = useI18n();
+  return /*#__PURE__*/_jsxs("div", {
+    className: isSelf ? 'candidate-container-selected' : 'candidate-container',
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      pointerEvents: 'all'
+    }),
+    onClick: function onClick(_) {
+      onSelect(currentUser);
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        background: getNameColor(currentUser.userName)
+      },
+      className: classNames('candidate-avatar', {
+        'candidate-avatar-all': currentUser.userId === USER_ALL
+      }),
+      children: type === 'private-chat' && currentUser.userName === USER_ALL ? /*#__PURE__*/_jsx(FcrIcon, {
+        size: 16,
+        type: FcrIconType.FCR_USERS,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        }
+      }) :
+      /*#__PURE__*/
+      // currentUser.userName.charAt(0).toLocaleUpperCase()
+      _jsx(FcrAvatar, {
+        isShowFirstLetter: true,
+        size: 32,
+        nickName: currentUser.userName === USER_ALL ? t('fmt_chat_option_all') : currentUser.userName,
+        textSize: 14,
+        avatarImage: currentUser.avatar
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "candidate",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "candidate-info",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classNames('candidate-name', {
+            'candidate-name-active': isSelf
+          }),
+          style: {
+            color: getNameColor(currentUser.userName)
+          },
+          children: highlightMatches(currentUser.userName, filterKey).map(function (value, i) {
+            return /*#__PURE__*/_jsx("span", {
+              className: value !== null && value !== void 0 && value.isHighlight ? 'candidate-highlight' : '',
+              children: value.data
+            }, "".concat(i));
+          })
+        }), currentUser.userId !== USER_ALL && (currentUser.userRole === FcrUserRole.COHOST || currentUser.userRole === FcrUserRole.HOST) && /*#__PURE__*/_jsx(TextBubble, {
+          txt: t(currentUser.userRole === FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost'),
+          styles: {
+            width: 'fit-content'
+          },
+          type: "gray",
+          lineHeight: "small",
+          classnames: currentUser.userRole === FcrUserRole.HOST ? 'host' : 'cohost'
+        })]
+      }), isSelf ? /*#__PURE__*/_jsx("div", {
+        className: "candidate-select",
+        children: /*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_CHOOSEIT,
+          size: 24,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon2)'
+          }
+        })
+      }) : null]
+    })]
+  }, key);
+});
+function highlightMatches(str, matchStr) {
+  var result = [];
+  var matchLen = matchStr.length;
+  var start = 0;
+  if (matchStr.length === 0) {
+    return [{
+      data: str,
+      isHighlight: false
+    }];
+  }
+
+  // 转换为小写进行匹配，但保留原始字符串用于显示
+  var lowerStr = str.toLowerCase();
+  var lowerMatchStr = matchStr.toLowerCase();
+  while (start < str.length) {
+    var matchStart = lowerStr.indexOf(lowerMatchStr, start);
+    if (matchStart === -1) {
+      result.push({
+        data: str.slice(start),
+        isHighlight: false
+      });
+      break;
+    }
+    if (start !== matchStart) {
+      result.push({
+        data: str.slice(start, matchStart),
+        isHighlight: false
+      });
+    }
+
+    // 使用原始字符串中对应位置的文本进行高亮
+    result.push({
+      data: str.slice(matchStart, matchStart + matchLen),
+      isHighlight: true
+    });
+    start = matchStart + matchLen;
+  }
+  return result;
+}

package/lib-es/modules/chat/components/chat-tabs/index.js

@@ -0,0 +1,53 @@
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+import { StoreContext } from '../../store';
+import { FcrTabs } from 'agora-ui-foundation/lib/components/tabs';
+import chatReddotImg from '../../../../../public/assets/fcr_chat_reddot.svg';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrUIRoomType } from '../../../../type';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default observer(function () {
+  var _useContext = useContext(StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex,
+    handlerActiveTab = _useContext.handlerActiveTab;
+  var chatRoomWaitingRoomStore = chatRoomStores[FcrUIRoomType.WAITING_ROOM];
+  var chatRoomMainRoomStore = chatRoomStores[FcrUIRoomType.MAIN_ROOM];
+  var t = useI18n();
+  return /*#__PURE__*/_jsx("div", {
+    className: "chat-tabs-container",
+    children: chatRoomWaitingRoomStore && chatRoomMainRoomStore && chatRoomWaitingRoomStore.userCount > 0 ? /*#__PURE__*/_jsx(FcrTabs, {
+      items: [{
+        label: /*#__PURE__*/_jsxs("div", {
+          className: "chat-container-icon",
+          children: [chatRoomMainRoomStore.unReadMsgCount > 0 && /*#__PURE__*/_jsx("div", {
+            className: "fcr-action-bar-chat-unread-count",
+            children: chatRoomMainRoomStore.unReadMsgCount > 99 ? /*#__PURE__*/_jsx("img", {
+              src: chatReddotImg
+            }) : chatRoomMainRoomStore.unReadMsgCount
+          }), t('fmt_waitingroom_sidebar_chat_label_meeting', {
+            reason1: chatRoomMainRoomStore.userCount
+          })]
+        }),
+        key: "".concat(FcrUIRoomType.MAIN_ROOM)
+      }, {
+        label: /*#__PURE__*/_jsxs("div", {
+          className: "chat-container-icon",
+          children: [chatRoomWaitingRoomStore.unReadMsgCount > 0 && /*#__PURE__*/_jsx("div", {
+            className: "fcr-action-bar-chat-unread-count",
+            children: chatRoomWaitingRoomStore.unReadMsgCount > 99 ? /*#__PURE__*/_jsx("img", {
+              src: chatReddotImg
+            }) : chatRoomWaitingRoomStore.unReadMsgCount
+          }), t('fmt_waitingroom_sidebar_label_waiting', {
+            reason1: chatRoomWaitingRoomStore.userCount
+          })]
+        }),
+        key: "".concat(FcrUIRoomType.WAITING_ROOM)
+      }],
+      activeKey: "".concat(activeTabIndex),
+      onChange: function onChange(key) {
+        handlerActiveTab(key);
+      }
+    }) : null
+  });
+});

package/lib-es/modules/chat/components/message-list/chat-empty/index.js

@@ -0,0 +1,18 @@
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import DefaultPage from '../../../../../../public/assets/fcr_defaultpage.png';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  var t = useI18n();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-no-data-chat",
+    children: [/*#__PURE__*/_jsx("img", {
+      style: {
+        width: 138,
+        height: 100
+      },
+      src: DefaultPage
+    }), /*#__PURE__*/_jsx("span", {
+      children: t('fmt_chat_tips_nodata')
+    })]
+  });
+});

package/lib-es/modules/chat/components/message-list/history-unread-message-button/index.js

@@ -0,0 +1,48 @@
+import "core-js/modules/es.array.find-index.js";
+import { LatestButton } from 'agora-ui-foundation/lib/components/latest-button';
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+import { StoreContext } from '../../../store';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export default observer(function (props) {
+  var t = useI18n();
+  var _useContext = useContext(StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex;
+  var _ref = chatRoomStores[activeTabIndex],
+    messageList = _ref.messageList,
+    historyUnreadCount = _ref.historyUnreadCount,
+    updateHistoryUnReadCount = _ref.updateHistoryUnReadCount,
+    readMsgIndex = _ref.readMsgIndex,
+    updateReadMsgIndex = _ref.updateReadMsgIndex;
+  var historyMsgVisible = props.historyMsgVisible,
+    scrollToIdx = props.scrollToIdx,
+    setHistoryMsgVisible = props.setHistoryMsgVisible;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: historyMsgVisible && messageList.length > 0 && historyUnreadCount > 0 ? /*#__PURE__*/_jsx(LatestButton, {
+      onClick: function onClick() {
+        var len = messageList.length;
+        // 回到历史消息指定位置
+        var idx = (readMsgIndex === null || readMsgIndex === void 0 ? void 0 : readMsgIndex.index) < 0 ? 0 : messageList.findIndex(function (msg) {
+          return msg.id === readMsgIndex.msgId;
+        });
+        scrollToIdx(idx);
+        setHistoryMsgVisible(false);
+        updateReadMsgIndex && updateReadMsgIndex({
+          index: len - 1,
+          msgId: messageList[len - 1].id
+        });
+        updateHistoryUnReadCount(0);
+      },
+      txt: "".concat(t('fmt_chat_tips_newmessage', {
+        reason1: historyUnreadCount
+      })),
+      iconTransform: true,
+      direction: "top",
+      styles: {
+        zIndex: 999
+      }
+    }) : null
+  });
+});

package/lib-es/modules/chat/components/message-list/index.js

@@ -0,0 +1,327 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.find-index.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/web.timers.js";
+import React, { useState, useEffect, useContext, useCallback, useRef } from 'react';
+import '../../index.css';
+import { AutoSizer, List } from 'react-virtualized';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { StoreContext } from '../../store';
+import { observer } from 'mobx-react';
+import throttle from 'lodash/throttle';
+import { isWindows } from '../../../../utilities/platform';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { autorun } from 'mobx';
+import ChatEmpty from './chat-empty';
+import HistoryUnreadMessageButton from './history-unread-message-button';
+import ScrollBottomButton from './scroll-bottom-button';
+import MessageItem from './message-item';
+
+// 当向上滚动时，且超出底部 10 条，点击需要回到底部，如果此时有新的消息，那么展示未读的新消息
+// 当滚动条在最底部时，有新消息时，自动滚动到最新消息
+// 初始化时，如果有历史消息未读，展示未读条数，并且要回到指定的位置
+
+// 消息列表
+// 显示的消息列表
+// 未读消息列表
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var genRequestAnimationFrame = function genRequestAnimationFrame(cb) {
+  return isElectron() && isWindows() ? setTimeout(cb, 0) : requestAnimationFrame(cb);
+};
+export var MessageList = observer(function (_ref) {
+  var styles = _ref.styles,
+    updateReadMsgIndex = _ref.updateReadMsgIndex,
+    localUserId = _ref.userId,
+    setMultiSelectActive = _ref.setMultiSelectActive,
+    multiSelectActive = _ref.multiSelectActive;
+  var t = useI18n();
+  var _useContext = useContext(StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex,
+    copyMap = _useContext.copyMap;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    storeMsgs = _ref2.messageList,
+    readMsgIndex = _ref2.readMsgIndex,
+    needCbBottomCount = _ref2.needCbBottomCount,
+    list = _ref2.list,
+    mostRecentHeight = _ref2.mostRecentHeight,
+    mostRecentWidth = _ref2.mostRecentWidth,
+    cache = _ref2.cache,
+    scrollHeight = _ref2.scrollHeight,
+    scrollTop = _ref2.scrollTop,
+    clientHeight = _ref2.clientHeight,
+    firstMsgId = _ref2.firstMsgId,
+    readIdx = _ref2.readIdx,
+    viewIdx = _ref2.viewIdx,
+    hasHistoryMsg = _ref2.hasHistoryMsg,
+    newMsgsUnReadCnt = _ref2.newMsgsUnReadCnt,
+    isHost = _ref2.isHost,
+    isCohost = _ref2.isCohost,
+    initReadInfo = _ref2.initReadInfo,
+    updateScrollInfo = _ref2.updateScrollInfo,
+    updateHasHistoryMsg = _ref2.updateHasHistoryMsg,
+    updateHistoryCnt = _ref2.updateHistoryUnreadCnt,
+    updateViewIdx = _ref2.updateViewIdx,
+    updateReadIdx = _ref2.updateReadIdx,
+    updateFirstMsgId = _ref2.updateFirstMsgId,
+    updateHistoryUnReadCount = _ref2.updateHistoryUnReadCount,
+    updateList = _ref2.updateList,
+    updateMostRecentHeight = _ref2.updateMostRecentHeight,
+    updateMostRecentWidth = _ref2.updateMostRecentWidth,
+    permitPrivateChat = _ref2.permitPrivateChat,
+    lastScrollTop = _ref2.lastScrollTop,
+    setLastScrollTop = _ref2.setLastScrollTop,
+    needRecomputeRowIdMap = _ref2.needRecomputeRowIdMap;
+  var _useState = useState(storeMsgs !== null && storeMsgs !== void 0 ? storeMsgs : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    messageList = _useState2[0],
+    setMessageList = _useState2[1];
+  var _useState3 = useState(messageList.length - 1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrollIndex = _useState4[0],
+    setScrollIndex = _useState4[1];
+  var firstRowsRendered = undefined;
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    latestBtnVisible = _useState6[0],
+    setLatestBtnVisible = _useState6[1];
+  var latestBtnVisibleFlagRef = useRef(false);
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    historyMsgVisible = _useState8[0],
+    setHistoryMsgVisible = _useState8[1];
+  var latestBtnVisibleTimer = undefined;
+  // const [checkboxVisible, setCheckboxVisible] = useState<boolean>(false);
+  // const [copyMap, setCopyMap] = useState<Map<number, boolean>>(new Map());
+
+  useEffect(function () {
+    initReadInfo();
+    return function () {
+      updateReadInfo();
+      clearTimeout(latestBtnVisibleTimer);
+    };
+  }, []);
+  var updateReadInfo = function updateReadInfo(data) {
+    updateReadMsgIndex && messageList.length > 0 && updateReadMsgIndex(data);
+    updateHistoryUnReadCount(0);
+    updateHasHistoryMsg(false);
+  };
+  useEffect(function () {
+    setMessageList(storeMsgs);
+  }, [storeMsgs]);
+  useEffect(function () {
+    // 视口位置在最底部时, 滚动到最新消息
+    var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < cache.rowHeight({
+      index: readIdx
+    });
+    if (isBottom) {
+      genRequestAnimationFrame(function () {
+        scrollToIdx(messageList.length - 1);
+      });
+    } else {
+      var len = messageList.length;
+      if (readMsgIndex.index === len - 2 && messageList[len - 1].uid === localUserId) {
+        scrollToIdx(len - 1);
+      }
+    }
+
+    // TODO: 优化, 消息队列中, 后部分消息高度不会变, 是否可以使用 cache 中已有的高度?
+    // 消息列表从头更新, 重新计算每条消息的高度
+    if (firstMsgId && messageList[0].id !== firstMsgId) {
+      var _messageList$;
+      cache.clearAll();
+      list === null || list === void 0 || list.recomputeRowHeights();
+      updateFirstMsgId((_messageList$ = messageList[0]) === null || _messageList$ === void 0 ? void 0 : _messageList$.id);
+    }
+    // const last2Idx = messageList.length - 2;
+    // if (last2Idx >= 0) {
+    //   // 防止 margin 堆叠, 动态计算倒数第二条消息高度
+    //   cache.clear(last2Idx, 0);
+    //   list?.recomputeRowHeights(last2Idx);
+    // }
+  }, [messageList]);
+  useEffect(function () {
+    var disposer = autorun(function () {
+      needRecomputeRowIdMap.forEach(function (idx, id) {
+        cache.clear(idx, 0);
+        list === null || list === void 0 || list.recomputeRowHeights(idx);
+      });
+    });
+    return function () {
+      return disposer();
+    };
+  }, []);
+  useEffect(function () {
+    var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
+    if (newMsgsUnReadCnt === 0 || isBottom) {
+      return;
+    }
+    // 当有新消息来时，视口不在底部，需要提示有新消息
+    setLatestBtnVisible(true);
+    latestBtnVisibleFlagRef.current = true;
+    scrollToIdx(viewIdx);
+  }, [newMsgsUnReadCnt]);
+  var rowRenderer = function rowRenderer(messageList) {
+    return function (_ref3) {
+      var index = _ref3.index,
+        parent = _ref3.parent,
+        style = _ref3.style;
+      var datum = messageList[index % messageList.length];
+      return /*#__PURE__*/_jsx(MessageItem, {
+        messageItem: datum,
+        style: style,
+        setMultiSelectActive: setMultiSelectActive,
+        multiSelectActive: multiSelectActive,
+        index: index,
+        localUserId: localUserId,
+        parent: parent,
+        scrollToIdx: scrollToIdx
+      }, datum.id);
+    };
+  };
+  var scrollToIdx = useCallback(function (idx) {
+    var rowCount = messageList.length;
+    var scrollIdx = Math.min(rowCount - 1, idx);
+    if (isNaN(scrollIdx)) {
+      scrollIdx = undefined;
+    }
+    setScrollIndex(scrollIdx);
+  }, [messageList]);
+  var handleScroll = function handleScroll(params) {
+    var listScrollHeight = params.scrollHeight,
+      listScrollTop = params.scrollTop,
+      listClientHeight = params.clientHeight;
+    updateScrollInfo(listScrollHeight, listScrollTop, listClientHeight);
+    updateScrollIndexByScroll();
+  };
+  var updateScrollIndexByScroll = throttle(function () {
+    if (scrollTop !== 0 && scrollHeight - scrollTop === clientHeight && latestBtnVisible) {
+      setLatestBtnVisible(false);
+      scrollToIdx(messageList.length - 1);
+    }
+  }, 200);
+  var handleRowRendered = function handleRowRendered(params) {
+    var stopIndex = params.stopIndex,
+      startIndex = params.startIndex;
+
+    // 历史未读消息
+    var lastReadIdx = messageList.findIndex(function (msg) {
+      return msg.id === readMsgIndex.msgId;
+    });
+    var hasHistoryUnRead = readMsgIndex.index < 0 || lastReadIdx < 0 || readMsgIndex.index < startIndex;
+    if (messageList.length > 0 && stopIndex >= messageList.length - 1 && hasHistoryUnRead && startIndex > 0 && hasHistoryMsg) {
+      var unReadCnt = 0;
+      if (lastReadIdx === -1) {
+        unReadCnt = startIndex - 1;
+      } else if (lastReadIdx >= 0) {
+        unReadCnt = startIndex - lastReadIdx;
+      }
+      updateHistoryCnt(unReadCnt);
+      unReadCnt > 0 && setHistoryMsgVisible(true);
+      updateHasHistoryMsg(false);
+    }
+
+    // 视口已经滚动到所有历史未读消息之前
+    var unreadIdx = messageList.findIndex(function (msg) {
+      return msg.id === readMsgIndex.msgId;
+    });
+    if (stopIndex <= unreadIdx) {
+      setHistoryMsgVisible(false);
+    }
+    updateViewIdx(stopIndex);
+    if (firstRowsRendered) {
+      firstRowsRendered = false;
+      return;
+    }
+    var latestIdx = messageList.length - 1;
+    // 往上滚动超过 40 条
+    if (latestIdx - stopIndex >= needCbBottomCount && !latestBtnVisibleFlagRef.current) {
+      latestBtnVisibleFlagRef.current = true;
+      clearTimeout(latestBtnVisibleTimer);
+      latestBtnVisibleTimer = setTimeout(function () {
+        var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
+        !isBottom && setLatestBtnVisible(true);
+      }, 500);
+    }
+    if (latestIdx - stopIndex < 10 && latestBtnVisibleFlagRef.current) {
+      latestBtnVisibleFlagRef.current = false;
+      setTimeout(function () {
+        setLatestBtnVisible(false);
+      }, 500);
+    }
+
+    // 视口出现新消息
+    if (stopIndex > readIdx) {
+      updateReadIdx(stopIndex);
+    }
+  };
+  useEffect(function () {
+    var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
+    if (isBottom) {
+      return;
+    }
+  }, [readMsgIndex]);
+  useEffect(function () {
+    // 重新计算高度
+    cache.clearAll();
+    list === null || list === void 0 || list.recomputeRowHeights();
+    if (lastScrollTop !== undefined) {
+      list === null || list === void 0 || list.scrollToPosition(lastScrollTop);
+      setLastScrollTop(undefined);
+    }
+  }, [multiSelectActive]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: 'fcr-message-list',
+    style: {},
+    children: [/*#__PURE__*/_jsx(HistoryUnreadMessageButton, {
+      historyMsgVisible: historyMsgVisible,
+      scrollToIdx: scrollToIdx,
+      setHistoryMsgVisible: setHistoryMsgVisible
+    }), /*#__PURE__*/_jsx(ScrollBottomButton, {
+      latestBtnVisible: latestBtnVisible,
+      scrollToIdx: scrollToIdx,
+      setLatestBtnVisible: setLatestBtnVisible,
+      scrollIndex: scrollIndex,
+      latestBtnVisibleFlagRef: latestBtnVisibleFlagRef
+    }), messageList.length === 0 && /*#__PURE__*/_jsx(ChatEmpty, {}), /*#__PURE__*/_jsx(AutoSizer, {
+      style: {
+        alignSelf: 'stretch'
+      },
+      children: function children(_ref4) {
+        var height = _ref4.height,
+          width = _ref4.width;
+        if (height !== mostRecentHeight || width !== mostRecentWidth) {
+          cache.clearAll();
+          if (list) {
+            list.recomputeRowHeights();
+          }
+        }
+        updateMostRecentHeight(height);
+        updateMostRecentWidth(width);
+        return /*#__PURE__*/_jsx(List, {
+          ref: function ref(_ref5) {
+            updateList(_ref5);
+          },
+          style: {
+            padding: 'inherit',
+            scrollbarWidth: 'none'
+          },
+          onScroll: handleScroll,
+          onRowsRendered: handleRowRendered,
+          width: width,
+          height: height,
+          rowHeight: cache.rowHeight,
+          rowCount: messageList.length,
+          rowRenderer: rowRenderer(messageList),
+          deferredMeasurementCache: cache,
+          overscanRowCount: 0,
+          scrollToIndex: latestBtnVisible ? undefined : scrollIndex
+        });
+      }
+    })]
+  });
+});