fcr-ui-scene 3.8.2 → 3.9.0-alpha

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

@@ -1,10 +1,14 @@
 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.array.from.js";
+import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.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.dom-collections.iterator.js";
 import "core-js/modules/web.timers.js";
 import React, { useState, useEffect, useContext, useCallback, useRef } from 'react';
 import '../../index.css';
@@ -13,7 +17,8 @@ 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 debounce from 'lodash/debounce';
+import { isWindows } from 'agora-foundation/lib/utilities/env';
 import { isElectron } from 'agora-foundation/lib/utilities/env';
 import { autorun } from 'mobx';
 import ChatEmpty from './chat-empty';
@@ -43,48 +48,46 @@ export var MessageList = observer(function (_ref) {
     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 chatRoomStore = chatRoomStores[activeTabIndex];
+  var storeMsgs = chatRoomStore.messageList,
+    readMsgIndex = chatRoomStore.readMsgIndex,
+    needCbBottomCount = chatRoomStore.needCbBottomCount,
+    list = chatRoomStore.list,
+    mostRecentHeight = chatRoomStore.mostRecentHeight,
+    mostRecentWidth = chatRoomStore.mostRecentWidth,
+    cache = chatRoomStore.cache,
+    scrollHeight = chatRoomStore.scrollHeight,
+    scrollTop = chatRoomStore.scrollTop,
+    clientHeight = chatRoomStore.clientHeight,
+    firstMsgId = chatRoomStore.firstMsgId,
+    readIdx = chatRoomStore.readIdx,
+    viewIdx = chatRoomStore.viewIdx,
+    hasHistoryMsg = chatRoomStore.hasHistoryMsg,
+    newMsgsUnReadCnt = chatRoomStore.newMsgsUnReadCnt,
+    initReadInfo = chatRoomStore.initReadInfo,
+    updateScrollInfo = chatRoomStore.updateScrollInfo,
+    updateHasHistoryMsg = chatRoomStore.updateHasHistoryMsg,
+    updateHistoryCnt = chatRoomStore.updateHistoryUnreadCnt,
+    updateViewIdx = chatRoomStore.updateViewIdx,
+    updateReadIdx = chatRoomStore.updateReadIdx,
+    updateFirstMsgId = chatRoomStore.updateFirstMsgId,
+    updateHistoryUnReadCount = chatRoomStore.updateHistoryUnReadCount,
+    updateList = chatRoomStore.updateList,
+    updateMostRecentHeight = chatRoomStore.updateMostRecentHeight,
+    updateMostRecentWidth = chatRoomStore.updateMostRecentWidth,
+    lastScrollTop = chatRoomStore.lastScrollTop,
+    setLastScrollTop = chatRoomStore.setLastScrollTop,
+    needRecomputeRowIdMap = chatRoomStore.needRecomputeRowIdMap,
+    clearNeedRecomputeRowIdMap = chatRoomStore.clearNeedRecomputeRowIdMap;
   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),
+  var _useState3 = useState(undefined),
     _useState4 = _slicedToArray(_useState3, 2),
     scrollIndex = _useState4[0],
     setScrollIndex = _useState4[1];
-  var firstRowsRendered = undefined;
+  var isFirstResizeRef = useRef(true);
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     latestBtnVisible = _useState6[0],
@@ -114,14 +117,16 @@ export var MessageList = observer(function (_ref) {
     setMessageList(storeMsgs);
   }, [storeMsgs]);
   useEffect(function () {
+    var _messageList$, _messageList$3;
+    // 消息列表为空时不处理
+    if (messageList.length === 0) return;
+
     // 视口位置在最底部时, 滚动到最新消息
     var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < cache.rowHeight({
       index: readIdx
     });
     if (isBottom) {
-      genRequestAnimationFrame(function () {
-        scrollToIdx(messageList.length - 1);
-      });
+      scrollToIdx(messageList.length - 1);
     } else {
       var len = messageList.length;
       if (readMsgIndex.index === len - 2 && messageList[len - 1].uid === localUserId) {
@@ -131,30 +136,58 @@ export var MessageList = observer(function (_ref) {
 
     // TODO: 优化, 消息队列中, 后部分消息高度不会变, 是否可以使用 cache 中已有的高度?
     // 消息列表从头更新, 重新计算每条消息的高度
-    if (firstMsgId && messageList[0].id !== firstMsgId) {
-      var _messageList$;
+    if (firstMsgId && (_messageList$ = messageList[0]) !== null && _messageList$ !== void 0 && _messageList$.id && messageList[0].id !== firstMsgId) {
+      var _messageList$2;
       cache.clearAll();
       list === null || list === void 0 || list.recomputeRowHeights();
-      updateFirstMsgId((_messageList$ = messageList[0]) === null || _messageList$ === void 0 ? void 0 : _messageList$.id);
+      updateFirstMsgId((_messageList$2 = messageList[0]) === null || _messageList$2 === void 0 ? void 0 : _messageList$2.id);
+    } else if (!firstMsgId && (_messageList$3 = messageList[0]) !== null && _messageList$3 !== void 0 && _messageList$3.id) {
+      var _messageList$4;
+      updateFirstMsgId((_messageList$4 = messageList[0]) === null || _messageList$4 === void 0 ? void 0 : _messageList$4.id);
     }
-    // const last2Idx = messageList.length - 2;
-    // if (last2Idx >= 0) {
-    //   // 防止 margin 堆叠, 动态计算倒数第二条消息高度
-    //   cache.clear(last2Idx, 0);
-    //   list?.recomputeRowHeights(last2Idx);
-    // }
   }, [messageList]);
+  var isFirstAutorunRef = useRef(true);
+  var isRecomputingRef = useRef(false);
+  var debouncedRecomputeRef = useRef(null);
   useEffect(function () {
-    var disposer = autorun(function () {
-      needRecomputeRowIdMap.forEach(function (idx, id) {
-        cache.clear(idx, 0);
-        list === null || list === void 0 || list.recomputeRowHeights(idx);
+    debouncedRecomputeRef.current = debounce(function () {
+      if (isRecomputingRef.current || needRecomputeRowIdMap.size === 0) return;
+      isRecomputingRef.current = true;
+
+      // 先获取数据，然后立即清空 Map，防止循环触发
+      var indices = Array.from(needRecomputeRowIdMap.values());
+      var minIndex = Math.min.apply(Math, indices);
+      clearNeedRecomputeRowIdMap();
+      indices.forEach(function (idx) {
+        return cache.clear(idx, 0);
+      });
+      list === null || list === void 0 || list.recomputeRowHeights(minIndex);
+      genRequestAnimationFrame(function () {
+        isRecomputingRef.current = false;
       });
+    }, 50);
+    return function () {
+      var _debouncedRecomputeRe;
+      (_debouncedRecomputeRe = debouncedRecomputeRef.current) === null || _debouncedRecomputeRe === void 0 || _debouncedRecomputeRe.cancel();
+    };
+  }, [cache, list, clearNeedRecomputeRowIdMap]);
+  useEffect(function () {
+    var disposer = autorun(function () {
+      var _debouncedRecomputeRe2;
+      if (needRecomputeRowIdMap.size === 0) return;
+      if (isFirstAutorunRef.current) {
+        isFirstAutorunRef.current = false;
+        clearNeedRecomputeRowIdMap();
+        return;
+      }
+      // 如果正在重计算，跳过本次触发
+      if (isRecomputingRef.current) return;
+      (_debouncedRecomputeRe2 = debouncedRecomputeRef.current) === null || _debouncedRecomputeRe2 === void 0 || _debouncedRecomputeRe2.call(debouncedRecomputeRef);
     });
     return function () {
-      return disposer();
+      disposer();
     };
-  }, []);
+  }, [clearNeedRecomputeRowIdMap]);
   useEffect(function () {
     var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
     if (newMsgsUnReadCnt === 0 || isBottom) {
@@ -165,24 +198,6 @@ export var MessageList = observer(function (_ref) {
     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);
@@ -191,6 +206,23 @@ export var MessageList = observer(function (_ref) {
     }
     setScrollIndex(scrollIdx);
   }, [messageList]);
+  var rowRenderer = useCallback(function (_ref2) {
+    var index = _ref2.index,
+      parent = _ref2.parent,
+      style = _ref2.style;
+    console.log('rowRenderer called for index:', index);
+    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);
+  }, [messageList, setMultiSelectActive, multiSelectActive, localUserId, scrollToIdx]);
   var handleScroll = function handleScroll(params) {
     var listScrollHeight = params.scrollHeight,
       listScrollTop = params.scrollTop,
@@ -233,10 +265,6 @@ export var MessageList = observer(function (_ref) {
       setHistoryMsgVisible(false);
     }
     updateViewIdx(stopIndex);
-    if (firstRowsRendered) {
-      firstRowsRendered = false;
-      return;
-    }
     var latestIdx = messageList.length - 1;
     // 往上滚动超过 40 条
     if (latestIdx - stopIndex >= needCbBottomCount && !latestBtnVisibleFlagRef.current) {
@@ -253,19 +281,16 @@ export var MessageList = observer(function (_ref) {
         setLatestBtnVisible(false);
       }, 500);
     }
-
-    // 视口出现新消息
     if (stopIndex > readIdx) {
       updateReadIdx(stopIndex);
     }
   };
+  var isFirstMultiSelectRef = useRef(true);
   useEffect(function () {
-    var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
-    if (isBottom) {
+    if (isFirstMultiSelectRef.current) {
+      isFirstMultiSelectRef.current = false;
       return;
     }
-  }, [readMsgIndex]);
-  useEffect(function () {
     // 重新计算高度
     cache.clearAll();
     list === null || list === void 0 || list.recomputeRowHeights();
@@ -291,17 +316,27 @@ export var MessageList = observer(function (_ref) {
       style: {
         alignSelf: 'stretch'
       },
-      children: function children(_ref4) {
-        var height = _ref4.height,
-          width = _ref4.width;
+      onResize: function onResize(_ref3) {
+        var width = _ref3.width,
+          height = _ref3.height;
+        if (isFirstResizeRef.current) {
+          isFirstResizeRef.current = false;
+          updateMostRecentHeight(height);
+          updateMostRecentWidth(width);
+          return;
+        }
         if (height !== mostRecentHeight || width !== mostRecentWidth) {
           cache.clearAll();
           if (list) {
             list.recomputeRowHeights();
           }
+          updateMostRecentHeight(height);
+          updateMostRecentWidth(width);
         }
-        updateMostRecentHeight(height);
-        updateMostRecentWidth(width);
+      },
+      children: function children(_ref4) {
+        var height = _ref4.height,
+          width = _ref4.width;
         return /*#__PURE__*/_jsx(List, {
           ref: function ref(_ref5) {
             updateList(_ref5);
@@ -316,8 +351,7 @@ export var MessageList = observer(function (_ref) {
           height: height,
           rowHeight: cache.rowHeight,
           rowCount: messageList.length,
-          rowRenderer: rowRenderer(messageList),
-          deferredMeasurementCache: cache,
+          rowRenderer: rowRenderer,
           overscanRowCount: 0,
           scrollToIndex: latestBtnVisible ? undefined : scrollIndex
         });

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

@@ -25,16 +25,17 @@ import { ALL_TO_USER } from '../../../types';
 import classNames from 'classnames';
 import { MultiSelectCheckbox } from 'agora-ui-foundation/lib/components/multi-select-checkbox';
 import { MessageBubble } from 'agora-ui-foundation/lib/components/message-bubble';
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect, useRef, useCallback } from 'react';
 import { StoreContext } from '../../../store';
 import { FcrAvatar } from 'agora-ui-foundation/lib/components/avatar';
 import { MAX_SELECT_CNT } from 'agora-ui-foundation/lib/components/multi-select';
 import { CellMeasurer } from 'react-virtualized';
 import { handleChatLevelChangedSystemMsg, handleMessageTime } from '../../../util';
-import { copyText } from '../../../../../utilities/browser-api';
+import { copyText } from 'agora-ui-foundation/lib/utilities/copy-text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default observer(function (props) {
   var _copyMap$size, _arr, _arr2, _arr3, _arr4;
+  // console.log('MessageItem render, index:', props.index);
   var _useContext = useContext(StoreContext),
     chatRoomStores = _useContext.chatRoomStores,
     activeTabIndex = _useContext.activeTabIndex,
@@ -42,15 +43,14 @@ export default observer(function (props) {
     handleSelectMsg = _useContext.handleSelectMsg;
   var messageContainerRef = useRef(null);
   var messageItemRef = useRef(null);
-  var _ref = chatRoomStores[activeTabIndex],
-    messageList = _ref.messageList,
-    list = _ref.list,
-    cache = _ref.cache,
-    needRecomputeRowIdMap = _ref.needRecomputeRowIdMap,
-    viewIdx = _ref.viewIdx,
-    setLastScrollTop = _ref.setLastScrollTop,
-    permitPrivateChat = _ref.permitPrivateChat,
-    handleToast = _ref.handleToast;
+  var chatRoomStore = chatRoomStores[activeTabIndex];
+  var messageList = chatRoomStore.messageList,
+    list = chatRoomStore.list,
+    cache = chatRoomStore.cache,
+    setLastScrollTop = chatRoomStore.setLastScrollTop,
+    permitPrivateChat = chatRoomStore.permitPrivateChat,
+    handleToast = chatRoomStore.handleToast,
+    addNeedRecomputeRowId = chatRoomStore.addNeedRecomputeRowId;
   var datum = props.messageItem,
     index = props.index,
     localUserId = props.localUserId,
@@ -78,63 +78,85 @@ export default observer(function (props) {
   var checked = (copyMap === null || copyMap === void 0 ? void 0 : copyMap.get(idx)) || false;
   var checkDisabled = ((_copyMap$size = copyMap.size) !== null && _copyMap$size !== void 0 ? _copyMap$size : 0) >= MAX_SELECT_CNT && !checked;
   var needLabel = ((_arr = arr[idx - 1]) === null || _arr === void 0 ? void 0 : _arr.uid) !== publisherUid || ((_arr2 = arr[idx - 1]) === null || _arr2 === void 0 ? void 0 : _arr2.isPrivate) !== isPrivate || ((_arr3 = arr[idx - 1]) === null || _arr3 === void 0 ? void 0 : _arr3.role) !== publisherRole || ((_arr4 = arr[idx - 1]) === null || _arr4 === void 0 ? void 0 : _arr4.target) !== targetNickname;
-  if (needLabel) {
-    needRecomputeRowIdMap.set(datum.id, idx);
-  }
+
+  // 这里代码之前写的有问题，直接改写了observable的state
+  useEffect(function () {
+    if (needLabel) {
+      addNeedRecomputeRowId(datum.id, idx);
+    }
+  }, [needLabel, datum.id, idx, addNeedRecomputeRowId]);
   var isManager = publisherRole === 'host' || publisherRole === 'union-host';
   var isFile = datum !== null && datum !== void 0 && datum.img ? true : false;
+  var cacheRef = useRef(cache);
+  var listRef = useRef(list);
+  var lastWidthRef = useRef(0);
   useEffect(function () {
-    var adjustMessageWidth = function adjustMessageWidth() {
-      if (!messageContainerRef.current || !messageItemRef.current) {
-        return;
-      }
-      var messageContainerWidth = messageContainerRef.current.offsetWidth;
-      if (messageContainerWidth === 0) {
-        return;
-      }
-      var widthChanged = false;
-      var prevItemWidth = messageItemRef.current.style.width;
-      messageItemRef.current.style.width = '';
-      var naturalItemWidth = messageItemRef.current.offsetWidth;
-      var nextItemWidth = '';
-      if (publisherIsSelf) {
-        if (naturalItemWidth > messageContainerWidth) {
-          nextItemWidth = '100%';
-        }
-      } else {
+    cacheRef.current = cache;
+    listRef.current = list;
+  }, [cache, list]);
+  var adjustMessageWidth = useCallback(function () {
+    if (!messageContainerRef.current || !messageItemRef.current) {
+      return;
+    }
+    var messageContainerWidth = messageContainerRef.current.offsetWidth;
+    if (messageContainerWidth === 0) {
+      return;
+    }
+
+    // 如果容器宽度没变，跳过处理
+    if (lastWidthRef.current === messageContainerWidth) {
+      return;
+    }
+    lastWidthRef.current = messageContainerWidth;
+
+    // console.log('adjustMessageWidth', messageContainerWidth);
+
+    var widthChanged = false;
+    var prevItemWidth = messageItemRef.current.style.width;
+    messageItemRef.current.style.width = '';
+    var naturalItemWidth = messageItemRef.current.offsetWidth;
+    var nextItemWidth = '';
+    if (publisherIsSelf) {
+      if (naturalItemWidth > messageContainerWidth) {
         nextItemWidth = '100%';
       }
-      if (nextItemWidth !== prevItemWidth) {
-        messageItemRef.current.style.width = nextItemWidth;
-        widthChanged = true;
-      } else {
-        messageItemRef.current.style.width = prevItemWidth;
-      }
-      if (!publisherIsSelf) {
-        var childElement = messageItemRef.current.firstElementChild;
-        if (childElement) {
-          var prevChildWidth = childElement.style.width;
-          childElement.style.width = '';
-          var avatarOffset = publisherUid !== localUserId && !multiSelectActive ? 34 : 0;
-          var availableWidth = Math.max(messageContainerWidth - avatarOffset, 0);
-          var naturalChildWidth = childElement.offsetWidth;
-          var nextChildWidth = '';
-          if (naturalChildWidth > availableWidth) {
-            nextChildWidth = avatarOffset > 0 ? "calc(100% - ".concat(avatarOffset, "px)") : '100%';
-          }
-          if (nextChildWidth !== prevChildWidth) {
-            childElement.style.width = nextChildWidth;
-            widthChanged = true;
-          } else {
-            childElement.style.width = prevChildWidth;
-          }
+    } else {
+      nextItemWidth = '100%';
+    }
+    if (nextItemWidth !== prevItemWidth) {
+      messageItemRef.current.style.width = nextItemWidth;
+      widthChanged = true;
+    } else {
+      messageItemRef.current.style.width = prevItemWidth;
+    }
+    if (!publisherIsSelf) {
+      var childElement = messageItemRef.current.firstElementChild;
+      if (childElement) {
+        var prevChildWidth = childElement.style.width;
+        childElement.style.width = '';
+        var avatarOffset = publisherUid !== localUserId && !multiSelectActive ? 34 : 0;
+        var availableWidth = Math.max(messageContainerWidth - avatarOffset, 0);
+        var naturalChildWidth = childElement.offsetWidth;
+        var nextChildWidth = '';
+        if (naturalChildWidth > availableWidth) {
+          nextChildWidth = avatarOffset > 0 ? "calc(100% - ".concat(avatarOffset, "px)") : '100%';
+        }
+        if (nextChildWidth !== prevChildWidth) {
+          childElement.style.width = nextChildWidth;
+          widthChanged = true;
+        } else {
+          childElement.style.width = prevChildWidth;
         }
       }
-      if (widthChanged) {
-        cache.clear(idx, 0);
-        list === null || list === void 0 || list.recomputeRowHeights(idx);
-      }
-    };
+    }
+    if (widthChanged) {
+      var _listRef$current;
+      cacheRef.current.clear(idx, 0);
+      (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.recomputeRowHeights(idx);
+    }
+  }, [idx, multiSelectActive, publisherIsSelf, publisherUid, localUserId]);
+  useEffect(function () {
+    lastWidthRef.current = 0;
     adjustMessageWidth();
     var container = messageContainerRef.current;
     if (!container) {
@@ -153,9 +175,9 @@ export default observer(function (props) {
     return function () {
       return window.removeEventListener('resize', adjustMessageWidth);
     };
-  }, [cache, idx, list, multiSelectActive, publisherIsSelf, publisherUid, localUserId]);
+  }, [adjustMessageWidth]);
   var handleCopyMsg = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(msg, time, publisherNickName, targetNickname) {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(msg, time, publisherNickName, targetNickname) {
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -177,7 +199,7 @@ export default observer(function (props) {
       }, _callee);
     }));
     return function handleCopyMsg(_x, _x2, _x3, _x4) {
-      return _ref2.apply(this, arguments);
+      return _ref.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/_jsx(CellMeasurer, {
@@ -296,7 +318,7 @@ export default observer(function (props) {
                   marginLeft: publisherUid !== localUserId && !multiSelectActive ? 34 : 0
                 },
                 onCopy: (/*#__PURE__*/function () {
-                  var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(type) {
+                  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(type) {
                     var currentScrollTop;
                     return _regeneratorRuntime.wrap(function (_context2) {
                       while (1) switch (_context2.prev = _context2.next) {
@@ -316,7 +338,7 @@ export default observer(function (props) {
                             currentScrollTop = list === null || list === void 0 ? void 0 : list.getOffsetForRow({
                               index: idx
                             });
-                            scrollToIdx(viewIdx);
+                            scrollToIdx(chatRoomStore.viewIdx);
                             setLastScrollTop(currentScrollTop);
                             setMultiSelectActive && setMultiSelectActive(true);
                           }
@@ -327,7 +349,7 @@ export default observer(function (props) {
                     }, _callee2);
                   }));
                   return function (_x5) {
-                    return _ref3.apply(this, arguments);
+                    return _ref2.apply(this, arguments);
                   };
                 }()),
                 onPrivate: function onPrivate() {

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

@@ -30,14 +30,12 @@ export default observer(function (props) {
         forceNotifyMsgs();
         var len = messageList.length;
 
-        // 回到最新消息的第一条
-        if (readIdx === len - 1) {
-          // 没有新消息
-          if (scrollIndex === len - 1) {
-            list === null || list === void 0 || list.scrollToPosition(scrollHeight - clientHeight);
-          } else {
-            scrollToIdx(len - 1);
-          }
+        // 滚动到最新消息
+        if (scrollIndex === len - 1) {
+          // scrollIndex 已经是最后一条，直接滚动到底部
+          list === null || list === void 0 || list.scrollToPosition(scrollHeight - clientHeight);
+        } else {
+          scrollToIdx(len - 1);
         }
         setLatestBtnVisible(false);
         latestBtnVisibleFlagRef.current = false;

package/lib-es/modules/chat/index.css

@@ -108,17 +108,9 @@
   width: 100%;
 }
 
-.fcr-chat-container-box-web,
-.fcr-chat-container-box-electron {
+.fcr-chat-container-box {
   width: 100%;
   display: flex;
   flex-direction: column;
-}
-
-.fcr-chat-container-box-web {
   height: 100%;
 }
-
-.fcr-chat-container-box-electron {
-  height: calc(100% - 46px);
-}

package/lib-es/modules/chat/store.js

@@ -74,6 +74,7 @@ import { ChatRoomStore } from './chat-room-store';
 import { FcrUIRoomType } from '../../type';
 import { transI18n } from 'agora-ui-foundation/lib/i18n';
 import { FcrUIObjectKeys } from '../../object-manager';
+import { FcrUIToastKey } from '../../modules/toast-manager/type';
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
@@ -291,9 +292,8 @@ var ChatStore = /*#__PURE__*/function () {
                 _context.next = 4;
                 break;
               }
-              this._messageProvider.showToast({
-                type: 'error',
-                message: transI18n('fmt_chat_toast_infraction_error')
+              this._messageProvider.showToastByKey({
+                key: FcrUIToastKey.FMT_CHAT_TOAST_INFRACTION_ERROR
               });
               return _context.abrupt("return");
             case 4:
@@ -320,8 +320,10 @@ var ChatStore = /*#__PURE__*/function () {
   }, {
     key: "_handleReceiveMessage",
     value: function _handleReceiveMessage(notifyMsgs, type) {
-      var chatRoomStore = this.getChatRoomStore(type);
-      if (this.activeTabIndex !== type || !this._sharedLayoutDataSource.asideLayout.chat) {
+      var isCurrentTab = this.activeTabIndex === type;
+      var isChatVisible = this._sharedLayoutDataSource.asideLayout.chat || this._dialogProvider.isDialogOpened(FcrUIDialogKey.CHAT);
+      if (!isCurrentTab || !isChatVisible) {
+        var chatRoomStore = this.getChatRoomStore(type);
         chatRoomStore.setUnReadMsgCount(notifyMsgs.length + chatRoomStore.unReadMsgCount);
         this._chatProvider.latestsMessageInfo = {
           notifyMsgs: notifyMsgs,

package/lib-es/modules/chat/view.js

@@ -44,9 +44,7 @@ import { FcrChatRoomConnectionState } from 'fcr-core/lib/room-control/chatroom-c
 import { FcrRoomConnectorType } from 'fcr-core';
 import { USER_ALL, USER_NONE } from './types';
 import ChatTabs from './components/chat-tabs';
-import { copyText } from '../../utilities/browser-api';
-import classNames from 'classnames';
-import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { copyText } from 'agora-ui-foundation/lib/utilities/copy-text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var Chat = observer(function (_ref) {
   var _chatRoomStores$FcrUI;
@@ -190,10 +188,7 @@ export var Chat = observer(function (_ref) {
     });
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames({
-      'fcr-chat-container-box-web': !isElectron(),
-      'fcr-chat-container-box-electron': isElectron()
-    }),
+    className: "fcr-chat-container-box",
     children: [/*#__PURE__*/_jsx(ChatTabs, {}), /*#__PURE__*/_jsx("div", {
       style: _objectSpread({}, styles),
       children: /*#__PURE__*/_jsx(ChatWrapper, {