fcr-ui-scene 3.8.1 → 3.9.0-alpha

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

@@ -1,13 +1,10 @@
 "use strict";
 
-require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -17,10 +14,14 @@ exports.MessageList = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.array.find-index.js");
 require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/web.timers.js");
 var _react = _interopRequireWildcard(require("react"));
 require("../../index.css");
@@ -29,7 +30,7 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _store = require("../../store");
 var _mobxReact = require("mobx-react");
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
-var _platform = require("../../../../utilities/platform");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _env = require("agora-foundation/lib/utilities/env");
 var _mobx = require("mobx");
 var _chatEmpty = _interopRequireDefault(require("./chat-empty"));
@@ -46,7 +47,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // 显示的消息列表
 // 未读消息列表
 var genRequestAnimationFrame = function genRequestAnimationFrame(cb) {
-  return (0, _env.isElectron)() && (0, _platform.isWindows)() ? setTimeout(cb, 0) : requestAnimationFrame(cb);
+  return (0, _env.isElectron)() && (0, _env.isWindows)() ? setTimeout(cb, 0) : requestAnimationFrame(cb);
 };
 var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref) {
   var styles = _ref.styles,
@@ -59,48 +60,46 @@ var MessageList = exports.MessageList = (0, _mobxReact.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 = (0, _react.useState)(storeMsgs !== null && storeMsgs !== void 0 ? storeMsgs : []),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     messageList = _useState2[0],
     setMessageList = _useState2[1];
-  var _useState3 = (0, _react.useState)(messageList.length - 1),
+  var _useState3 = (0, _react.useState)(undefined),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     scrollIndex = _useState4[0],
     setScrollIndex = _useState4[1];
-  var firstRowsRendered = undefined;
+  var isFirstResizeRef = (0, _react.useRef)(true);
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     latestBtnVisible = _useState6[0],
@@ -130,14 +129,16 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     setMessageList(storeMsgs);
   }, [storeMsgs]);
   (0, _react.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) {
@@ -147,30 +148,58 @@ var MessageList = exports.MessageList = (0, _mobxReact.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 = (0, _react.useRef)(true);
+  var isRecomputingRef = (0, _react.useRef)(false);
+  var debouncedRecomputeRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var disposer = (0, _mobx.autorun)(function () {
-      needRecomputeRowIdMap.forEach(function (idx, id) {
-        cache.clear(idx, 0);
-        list === null || list === void 0 || list.recomputeRowHeights(idx);
+    debouncedRecomputeRef.current = (0, _debounce["default"])(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]);
+  (0, _react.useEffect)(function () {
+    var disposer = (0, _mobx.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]);
   (0, _react.useEffect)(function () {
     var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
     if (newMsgsUnReadCnt === 0 || isBottom) {
@@ -181,24 +210,6 @@ var MessageList = exports.MessageList = (0, _mobxReact.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__*/(0, _jsxRuntime.jsx)(_messageItem["default"], {
-        messageItem: datum,
-        style: style,
-        setMultiSelectActive: setMultiSelectActive,
-        multiSelectActive: multiSelectActive,
-        index: index,
-        localUserId: localUserId,
-        parent: parent,
-        scrollToIdx: scrollToIdx
-      }, datum.id);
-    };
-  };
   var scrollToIdx = (0, _react.useCallback)(function (idx) {
     var rowCount = messageList.length;
     var scrollIdx = Math.min(rowCount - 1, idx);
@@ -207,6 +218,23 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     }
     setScrollIndex(scrollIdx);
   }, [messageList]);
+  var rowRenderer = (0, _react.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__*/(0, _jsxRuntime.jsx)(_messageItem["default"], {
+      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,
@@ -249,10 +277,6 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
       setHistoryMsgVisible(false);
     }
     updateViewIdx(stopIndex);
-    if (firstRowsRendered) {
-      firstRowsRendered = false;
-      return;
-    }
     var latestIdx = messageList.length - 1;
     // 往上滚动超过 40 条
     if (latestIdx - stopIndex >= needCbBottomCount && !latestBtnVisibleFlagRef.current) {
@@ -269,19 +293,16 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
         setLatestBtnVisible(false);
       }, 500);
     }
-
-    // 视口出现新消息
     if (stopIndex > readIdx) {
       updateReadIdx(stopIndex);
     }
   };
+  var isFirstMultiSelectRef = (0, _react.useRef)(true);
   (0, _react.useEffect)(function () {
-    var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
-    if (isBottom) {
+    if (isFirstMultiSelectRef.current) {
+      isFirstMultiSelectRef.current = false;
       return;
     }
-  }, [readMsgIndex]);
-  (0, _react.useEffect)(function () {
     // 重新计算高度
     cache.clearAll();
     list === null || list === void 0 || list.recomputeRowHeights();
@@ -307,17 +328,27 @@ var MessageList = exports.MessageList = (0, _mobxReact.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__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List, {
           ref: function ref(_ref5) {
             updateList(_ref5);
@@ -332,8 +363,7 @@ var MessageList = exports.MessageList = (0, _mobxReact.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/modules/chat/components/message-list/message-item/index.js

@@ -36,12 +36,13 @@ var _avatar = require("agora-ui-foundation/lib/components/avatar");
 var _multiSelect = require("agora-ui-foundation/lib/components/multi-select");
 var _reactVirtualized = require("react-virtualized");
 var _util = require("../../../util");
-var _browserApi = require("../../../../../utilities/browser-api");
+var _copyText = require("agora-ui-foundation/lib/utilities/copy-text");
 var _jsxRuntime = require("react/jsx-runtime");
 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) { (0, _defineProperty2["default"])(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; }
 var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
   var _copyMap$size, _arr, _arr2, _arr3, _arr4;
+  // console.log('MessageItem render, index:', props.index);
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     chatRoomStores = _useContext.chatRoomStores,
     activeTabIndex = _useContext.activeTabIndex,
@@ -49,15 +50,14 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
     handleSelectMsg = _useContext.handleSelectMsg;
   var messageContainerRef = (0, _react.useRef)(null);
   var messageItemRef = (0, _react.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,
@@ -85,63 +85,85 @@ var _default = exports["default"] = (0, _mobxReact.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) >= _multiSelect.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
+  (0, _react.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 = (0, _react.useRef)(cache);
+  var listRef = (0, _react.useRef)(list);
+  var lastWidthRef = (0, _react.useRef)(0);
   (0, _react.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 = (0, _react.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]);
+  (0, _react.useEffect)(function () {
+    lastWidthRef.current = 0;
     adjustMessageWidth();
     var container = messageContainerRef.current;
     if (!container) {
@@ -160,14 +182,14 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
     return function () {
       return window.removeEventListener('resize', adjustMessageWidth);
     };
-  }, [cache, idx, list, multiSelectActive, publisherIsSelf, publisherUid, localUserId]);
+  }, [adjustMessageWidth]);
   var handleCopyMsg = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, time, publisherNickName, targetNickname) {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, time, publisherNickName, targetNickname) {
       return _regenerator["default"].wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.next = 1;
-            return (0, _browserApi.copyText)(msg);
+            return (0, _copyText.copyText)(msg);
           case 1:
             handleToast({
               id: 'copy-multi-msg',
@@ -184,7 +206,7 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
       }, _callee);
     }));
     return function handleCopyMsg(_x, _x2, _x3, _x4) {
-      return _ref2.apply(this, arguments);
+      return _ref.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.CellMeasurer, {
@@ -303,7 +325,7 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
                   marginLeft: publisherUid !== localUserId && !multiSelectActive ? 34 : 0
                 },
                 onCopy: (/*#__PURE__*/function () {
-                  var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(type) {
+                  var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(type) {
                     var currentScrollTop;
                     return _regenerator["default"].wrap(function (_context2) {
                       while (1) switch (_context2.prev = _context2.next) {
@@ -323,7 +345,7 @@ var _default = exports["default"] = (0, _mobxReact.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);
                           }
@@ -334,7 +356,7 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
                     }, _callee2);
                   }));
                   return function (_x5) {
-                    return _ref3.apply(this, arguments);
+                    return _ref2.apply(this, arguments);
                   };
                 }()),
                 onPrivate: function onPrivate() {

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

@@ -37,14 +37,12 @@ var _default = exports["default"] = (0, _mobxReact.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/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/modules/chat/store.js

@@ -71,6 +71,7 @@ var _chatRoomStore = require("./chat-room-store");
 var _type4 = require("../../type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _objectManager = require("../../object-manager");
+var _type5 = require("../../modules/toast-manager/type");
 var _ChatStore;
 var _initProto, _init_chatRoomStores, _init_activeTabIndex, _init_copyMap, _handlerActiveTabDecs, _handleSelectMsgDecs, _changeChatAsideDecs, _clearCopyMapDecs, _releaseDecs, _handleReceiveMessageDecs, _ref;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -300,9 +301,8 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
                 _context.next = 4;
                 break;
               }
-              this._messageProvider.showToast({
-                type: 'error',
-                message: (0, _i18n.transI18n)('fmt_chat_toast_infraction_error')
+              this._messageProvider.showToastByKey({
+                key: _type5.FcrUIToastKey.FMT_CHAT_TOAST_INFRACTION_ERROR
               });
               return _context.abrupt("return");
             case 4:
@@ -329,8 +329,10 @@ var ChatStore = exports["default"] = /*#__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(_constant.FcrUIDialogKey.CHAT);
+      if (!isCurrentTab || !isChatVisible) {
+        var chatRoomStore = this.getChatRoomStore(type);
         chatRoomStore.setUnReadMsgCount(notifyMsgs.length + chatRoomStore.unReadMsgCount);
         this._chatProvider.latestsMessageInfo = {
           notifyMsgs: notifyMsgs,