fcr-ui-scene 3.4.4 → 3.5.0

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

@@ -1,84 +1,48 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.push.js");
-require("core-js/modules/es.object.define-properties.js");
+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.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.iterator.filter.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", {
   value: true
 });
 exports.MessageList = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.find-index.js");
 require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.map.js");
 require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.for-each.js");
-require("core-js/modules/esnext.map.delete-all.js");
-require("core-js/modules/esnext.map.emplace.js");
-require("core-js/modules/esnext.map.every.js");
-require("core-js/modules/esnext.map.filter.js");
-require("core-js/modules/esnext.map.find.js");
-require("core-js/modules/esnext.map.find-key.js");
-require("core-js/modules/esnext.map.includes.js");
-require("core-js/modules/esnext.map.key-of.js");
-require("core-js/modules/esnext.map.map-keys.js");
-require("core-js/modules/esnext.map.map-values.js");
-require("core-js/modules/esnext.map.merge.js");
-require("core-js/modules/esnext.map.reduce.js");
-require("core-js/modules/esnext.map.some.js");
-require("core-js/modules/esnext.map.update.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");
 var _reactVirtualized = require("react-virtualized");
-var _messageBubble = require("agora-ui-foundation/lib/components/message-bubble");
-var _messageLabel = require("agora-ui-foundation/lib/components/message-label");
-var _avatar = require("agora-ui-foundation/lib/components/avatar");
-var _util = require("../../util");
-var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
-var _latestButton = require("agora-ui-foundation/lib/components/latest-button");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _store = require("../../store");
 var _mobxReact = require("mobx-react");
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
-var _multiSelect = require("agora-ui-foundation/lib/components/multi-select");
-var _multiSelectCheckbox = require("agora-ui-foundation/lib/components/multi-select-checkbox");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _copyText = require("../../../../utilities/copyText");
 var _platform = require("../../../../utilities/platform");
 var _env = require("agora-foundation/lib/utilities/env");
-var _fcr_defaultpage = _interopRequireDefault(require("../../../../../public/assets/fcr_defaultpage.png"));
-var _types = require("../../types");
 var _mobx = require("mobx");
+var _chatEmpty = _interopRequireDefault(require("./chat-empty"));
+var _historyUnreadMessageButton = _interopRequireDefault(require("./history-unread-message-button"));
+var _scrollBottomButton = _interopRequireDefault(require("./scroll-bottom-button"));
+var _messageItem = _interopRequireDefault(require("./message-item"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-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; } // 当向上滚动时，且超出底部 10 条，点击需要回到底部，如果此时有新的消息，那么展示未读的新消息
+// 当向上滚动时，且超出底部 10 条，点击需要回到底部，如果此时有新的消息，那么展示未读的新消息
 // 当滚动条在最底部时，有新消息时，自动滚动到最新消息
 // 初始化时，如果有历史消息未读，展示未读条数，并且要回到指定的位置
+
 // 消息列表
 // 显示的消息列表
 // 未读消息列表
@@ -90,15 +54,12 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     updateReadMsgIndex = _ref.updateReadMsgIndex,
     localUserId = _ref.userId,
     setMultiSelectActive = _ref.setMultiSelectActive,
-    multiSelectActive = _ref.multiSelectActive,
-    copyMap = _ref.copyMap,
-    setCopyMap = _ref.setCopyMap,
-    selectCnt = _ref.selectCnt,
-    copyTips = _ref.copyTips;
+    multiSelectActive = _ref.multiSelectActive;
   var t = (0, _i18n.useI18n)();
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     chatRoomStores = _useContext.chatRoomStores,
-    activeTabIndex = _useContext.activeTabIndex;
+    activeTabIndex = _useContext.activeTabIndex,
+    copyMap = _useContext.copyMap;
   var _ref2 = chatRoomStores[activeTabIndex],
     storeMsgs = _ref2.messageList,
     readMsgIndex = _ref2.readMsgIndex,
@@ -113,7 +74,6 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     firstMsgId = _ref2.firstMsgId,
     readIdx = _ref2.readIdx,
     viewIdx = _ref2.viewIdx,
-    historyUnReadCount = _ref2.historyUnreadCount,
     hasHistoryMsg = _ref2.hasHistoryMsg,
     newMsgsUnReadCnt = _ref2.newMsgsUnReadCnt,
     isHost = _ref2.isHost,
@@ -129,7 +89,6 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     updateList = _ref2.updateList,
     updateMostRecentHeight = _ref2.updateMostRecentHeight,
     updateMostRecentWidth = _ref2.updateMostRecentWidth,
-    forceNotifyMsgs = _ref2.forceNotifyMsgs,
     permitPrivateChat = _ref2.permitPrivateChat,
     lastScrollTop = _ref2.lastScrollTop,
     setLastScrollTop = _ref2.setLastScrollTop,
@@ -147,7 +106,7 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     latestBtnVisible = _useState6[0],
     setLatestBtnVisible = _useState6[1];
-  var latestBtnVisibleFlag = false;
+  var latestBtnVisibleFlagRef = (0, _react.useRef)(false);
   var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     historyMsgVisible = _useState8[0],
@@ -195,12 +154,12 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
       list === null || list === void 0 || list.recomputeRowHeights();
       updateFirstMsgId((_messageList$ = messageList[0]) === null || _messageList$ === void 0 ? void 0 : _messageList$.id);
     }
-    var last2Idx = messageList.length - 2;
-    if (last2Idx >= 0) {
-      // 防止 margin 堆叠, 动态计算倒数第二条消息高度
-      cache.clear(last2Idx, 0);
-      list === null || list === void 0 || list.recomputeRowHeights(last2Idx);
-    }
+    // const last2Idx = messageList.length - 2;
+    // if (last2Idx >= 0) {
+    //   // 防止 margin 堆叠, 动态计算倒数第二条消息高度
+    //   cache.clear(last2Idx, 0);
+    //   list?.recomputeRowHeights(last2Idx);
+    // }
   }, [messageList]);
   (0, _react.useEffect)(function () {
     var disposer = (0, _mobx.autorun)(function () {
@@ -220,242 +179,36 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     }
     // 当有新消息来时，视口不在底部，需要提示有新消息
     setLatestBtnVisible(true);
-    latestBtnVisibleFlag = true;
+    latestBtnVisibleFlagRef.current = true;
     scrollToIdx(viewIdx);
   }, [newMsgsUnReadCnt]);
-  var handleCopyMsg = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, time, publisherNickName, targetNickname) {
-      var msgHandled;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            msgHandled = (0, _i18n.getLanguage)() === 'zh' ? "".concat(publisherNickName, "\u5BF9").concat(targetNickname, "\u8BF4(").concat(time, ")\n").concat(msg) : "".concat(publisherNickName, " said to ").concat(targetNickname, "(").concat(time, ")\n").concat(msg);
-            _context.next = 3;
-            return (0, _copyText.copyText)(msgHandled);
-          case 3:
-            copyTips === null || copyTips === void 0 || copyTips();
-          case 4:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function handleCopyMsg(_x, _x2, _x3, _x4) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  var handleSelectMsg = function handleSelectMsg(idx, checked) {
-    var _copyMap = new Map(copyMap);
-    if (checked) {
-      _copyMap === null || _copyMap === void 0 || _copyMap.set(idx, checked);
-      setCopyMap && setCopyMap(_copyMap !== null && _copyMap !== void 0 ? _copyMap : new Map());
-    } else {
-      _copyMap["delete"](idx);
-      setCopyMap && setCopyMap(_copyMap !== null && _copyMap !== void 0 ? _copyMap : new Map());
-    }
-
-    // const _scrollTop = list?.getOffsetForRow({ index: idx });
-    // cache.clear(idx, 0);
-    // // TODO: 宽高改变后需要回到视口位置
-    // // 强制渲染列表
-    // list?.recomputeRowHeights(idx);
-    // list?.scrollToPosition(_scrollTop);
-  };
   var rowRenderer = function rowRenderer(messageList) {
-    return function (_ref4) {
-      var _arr, _arr2, _arr3, _arr4, _datum$img;
-      var index = _ref4.index,
-        key = _ref4.key,
-        parent = _ref4.parent,
-        style = _ref4.style;
+    return function (_ref3) {
+      var index = _ref3.index,
+        key = _ref3.key,
+        parent = _ref3.parent,
+        style = _ref3.style;
       var datum = messageList[index % messageList.length];
-      var publisherRole = datum.role,
-        time = datum.time,
-        _datum$msg = datum.msg,
-        msg = _datum$msg === void 0 ? '' : _datum$msg,
-        color = datum.color,
-        publisherNickName = datum.nickName,
-        publisherUid = datum.uid,
-        isPrivate = datum.isPrivate,
-        targetNickname = datum.target,
-        chatLevel = datum.chatLevel;
-      var arr = messageList;
-      var idx = index;
-      var systemMsg = datum.systemMsg;
-      var publisherIsSelf = publisherUid === localUserId;
-      var checked = (copyMap === null || copyMap === void 0 ? void 0 : copyMap.get(idx)) || false;
-      var checkDisabled = (selectCnt !== null && selectCnt !== void 0 ? selectCnt : 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);
-      }
-      var isManager = publisherRole === 'host' || publisherRole === 'union-host';
-      var isFile = datum !== null && datum !== void 0 && (_datum$img = datum.img) !== null && _datum$img !== void 0 && _datum$img.url ? true : false;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.CellMeasurer, {
-        cache: cache,
-        columnIndex: 0,
-        rowIndex: index,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageItem["default"], {
+        messageItem: datum,
+        style: style,
+        setMultiSelectActive: setMultiSelectActive,
+        multiSelectActive: multiSelectActive,
+        index: index,
+        localUserId: localUserId,
         parent: parent,
-        children: function children() {
-          var _arr5, _datum$img2, _arr6;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), {}, {
-              display: 'flex',
-              flexDirection: 'column'
-            }, systemMsg ? {
-              width: '100%'
-            } : {
-              width: 'auto'
-            }), systemMsg ? {} : publisherIsSelf ? {
-              marginRight: 15,
-              marginLeft: multiSelectActive ? 8 : 25,
-              alignItems: 'flex-end',
-              right: 0
-            } : {
-              marginRight: 15,
-              marginLeft: multiSelectActive ? 8 : 15,
-              alignItems: 'flex-start'
-            }), {}, {
-              pointerEvents: 'all'
-            }, index === 0 ? {
-              paddingTop: 10
-            } : {}),
-            id: String(idx),
-            children: systemMsg ? publisherRole === 'system' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
-              txt: (0, _util.handleMessageTime)(time),
-              type: "transparent",
-              bold: true,
-              lineHeight: "small",
-              styles: {
-                marginBottom: 16
-              }
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
-              classnames: "fcr-line-system-message",
-              txt: "".concat((0, _util.handleChatLevelChangedSystemMsg)(t, chatLevel, publisherRole, publisherNickName, publisherIsSelf)),
-              marginBottom: 15
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [needLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageLabel.MessageLabel, {
-                handleClickPrivateChat: function handleClickPrivateChat() {
-                  _handleClickPrivateChat(publisherUid);
-                },
-                styles: {
-                  marginLeft: publisherUid !== localUserId && multiSelectActive ? 24 : 0
-                },
-                color: color,
-                time: (0, _util.handleMessageTime)(time),
-                publisher: publisherNickName,
-                avatar: publisherUid !== localUserId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
-                  size: 24,
-                  textSize: 24,
-                  nickName: publisherNickName
-                }) : null,
-                publisherIsSelf: publisherIsSelf,
-                targetIsSelf: isPrivate,
-                target: targetNickname || _types.ALL_TO_USER.userName,
-                isPrivate: isPrivate,
-                tag: isManager ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: (0, _classnames["default"])('fcr-msg-tag', {
-                    'fcr-msg-tag--union': publisherRole === 'union-host'
-                  }),
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    children: publisherRole === 'host' ? t('fmt_role_host') : t('fmt_role_cohost')
-                  })
-                }) : null
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: "fcr-line-message",
-                style: {
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: publisherIsSelf ? multiSelectActive ? 'space-between' : 'flex-end' : 'flex-start',
-                  flexDirection: 'row',
-                  width: '100%'
-                },
-                children: [multiSelectActive && !systemMsg && /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiSelectCheckbox.MultiSelectCheckbox, {
-                  self: publisherIsSelf,
-                  checked: checked,
-                  nextMsgBelongSameUser: ((_arr5 = arr[idx + 1]) === null || _arr5 === void 0 ? void 0 : _arr5.uid) === publisherUid,
-                  checkDisabled: checkDisabled || isFile,
-                  onChange: function onChange(checked) {
-                    handleSelectMsg(idx, checked);
-                  }
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  onClick: function onClick() {
-                    if (!multiSelectActive || checkDisabled) {
-                      return;
-                    }
-                    var newChecked = !checked;
-                    handleSelectMsg(idx, newChecked);
-                  },
-                  style: {
-                    // marginLeft: uid !== userId && multiSelectActive ? 24 : 0,
-                  },
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageBubble.MessageBubble, {
-                    file: datum === null || datum === void 0 || (_datum$img2 = datum.img) === null || _datum$img2 === void 0 ? void 0 : _datum$img2.url,
-                    msg: msg,
-                    role: publisherRole,
-                    isSelf: publisherIsSelf
-                    // 消息间间距
-                    ,
-                    marginBottom: ((_arr6 = arr[idx + 1]) === null || _arr6 === void 0 ? void 0 : _arr6.uid) === publisherUid ? 'small' : 'large',
-                    styles: {
-                      marginLeft: publisherUid !== localUserId && !multiSelectActive ? 34 : 0,
-                      width: 'auto'
-                    },
-                    onCopy: (/*#__PURE__*/function () {
-                      var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(type) {
-                        var currentScrollTop;
-                        return _regenerator["default"].wrap(function _callee2$(_context2) {
-                          while (1) switch (_context2.prev = _context2.next) {
-                            case 0:
-                              if (!(type === 'singling')) {
-                                _context2.next = 5;
-                                break;
-                              }
-                              _context2.next = 3;
-                              return handleCopyMsg(msg, (0, _util.handleMessageTime)(time), publisherIsSelf && isPrivate ? t('fmt_settings_labels_you') : publisherNickName, // 你
-                              targetNickname !== null && targetNickname !== void 0 ? targetNickname : _types.ALL_TO_USER.userName);
-                            case 3:
-                              _context2.next = 6;
-                              break;
-                            case 5:
-                              if (type === 'multiple') {
-                                currentScrollTop = list === null || list === void 0 ? void 0 : list.getOffsetForRow({
-                                  index: idx
-                                });
-                                scrollToIdx(viewIdx);
-                                setLastScrollTop(currentScrollTop);
-                                setMultiSelectActive && setMultiSelectActive(true);
-                              }
-                            case 6:
-                            case "end":
-                              return _context2.stop();
-                          }
-                        }, _callee2);
-                      }));
-                      return function (_x5) {
-                        return _ref5.apply(this, arguments);
-                      };
-                    }()),
-                    onPrivate: function onPrivate() {
-                      _handleClickPrivateChat(publisherUid);
-                    }
-                  })
-                })]
-              })]
-            })
-          });
-        }
+        scrollToIdx: scrollToIdx
       }, key);
     };
   };
-  var scrollToIdx = function scrollToIdx(idx) {
+  var scrollToIdx = (0, _react.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,
@@ -504,16 +257,16 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
     }
     var latestIdx = messageList.length - 1;
     // 往上滚动超过 40 条
-    if (latestIdx - stopIndex >= needCbBottomCount && !latestBtnVisibleFlag) {
-      latestBtnVisibleFlag = true;
+    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 && latestBtnVisibleFlag) {
-      latestBtnVisibleFlag = false;
+    if (latestIdx - stopIndex < 10 && latestBtnVisibleFlagRef.current) {
+      latestBtnVisibleFlagRef.current = false;
       setTimeout(function () {
         setLatestBtnVisible(false);
       }, 500);
@@ -539,84 +292,26 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
       setLastScrollTop(undefined);
     }
   }, [multiSelectActive]);
-  var _handleClickPrivateChat = function _handleClickPrivateChat(userId) {
-    permitPrivateChat(userId);
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: 'fcr-message-list',
     style: {},
-    children: [historyMsgVisible && messageList.length > 0 && historyUnReadCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_latestButton.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, latestBtnVisible === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_latestButton.LatestButton, {
-      onClick: function onClick() {
-        var _messageList;
-        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);
-          }
-        }
-        setLatestBtnVisible(false);
-        latestBtnVisibleFlag = false;
-        updateReadMsgIndex && updateReadMsgIndex({
-          index: len - 1,
-          msgId: (_messageList = messageList[len - 1]) === null || _messageList === void 0 ? void 0 : _messageList.id
-        });
-      },
-      txt: "".concat(
-      // readIdx === messageList.length - 1
-      newMsgsUnReadCnt === 0 ? t('fmt_chat_button_latestlocation') // 回到最新位置
-      : t('fmt_chat_tips_newmessage', {
-        reason1: newMsgsUnReadCnt || messageList.length - 1 - readIdx
-      })),
-      styles: {
-        zIndex: 999
-      }
-    }) : null, messageList.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fcr-no-data-chat",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        style: {
-          width: 138,
-          height: 100
-        },
-        src: _fcr_defaultpage["default"]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: t('fmt_chat_tips_nodata')
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_historyUnreadMessageButton["default"], {
+      historyMsgVisible: historyMsgVisible,
+      scrollToIdx: scrollToIdx,
+      setHistoryMsgVisible: setHistoryMsgVisible
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_scrollBottomButton["default"], {
+      latestBtnVisible: latestBtnVisible,
+      scrollToIdx: scrollToIdx,
+      setLatestBtnVisible: setLatestBtnVisible,
+      scrollIndex: scrollIndex,
+      latestBtnVisibleFlagRef: latestBtnVisibleFlagRef
+    }), messageList.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatEmpty["default"], {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
       style: {
         alignSelf: 'stretch'
       },
-      children: function children(_ref6) {
-        var height = _ref6.height,
-          width = _ref6.width;
+      children: function children(_ref4) {
+        var height = _ref4.height,
+          width = _ref4.width;
         if (height !== mostRecentHeight || width !== mostRecentWidth) {
           cache.clearAll();
           if (list) {
@@ -626,8 +321,8 @@ var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref)
         updateMostRecentHeight(height);
         updateMostRecentWidth(width);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List, {
-          ref: function ref(_ref7) {
-            updateList(_ref7);
+          ref: function ref(_ref5) {
+            updateList(_ref5);
           },
           style: {
             padding: 'inherit',

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

@@ -10,8 +10,6 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -50,6 +48,8 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
     activeTabIndex = _useContext.activeTabIndex,
     copyMap = _useContext.copyMap,
     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,
@@ -91,6 +91,35 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
   }
   var isManager = publisherRole === 'host' || publisherRole === 'union-host';
   var isFile = datum !== null && datum !== void 0 && datum.img ? true : false;
+  (0, _react.useEffect)(function () {
+    // 标点符号特殊处理
+    // 如果是自己发的消息 由于有flex-end 如果标点符号大于1行, 则设置为100% （不然没法换行）
+    // 如果不是自己发的消息，每条都设置为100%
+    if (messageContainerRef.current && messageItemRef.current) {
+      var messageContainerWidth = messageContainerRef.current.offsetWidth;
+      var messageItemWidth = messageItemRef.current.offsetWidth;
+      if (publisherIsSelf) {
+        if (messageItemWidth > messageContainerWidth) {
+          messageItemRef.current.style.width = '100%';
+          // 由于动态计算了宽度，导致高度不对，所以需要重新计算高度
+          cache.clear(idx, 0);
+          list === null || list === void 0 || list.recomputeRowHeights(idx);
+        }
+      } else {
+        messageItemRef.current.style.width = '100%';
+        var childElement = messageItemRef.current.firstElementChild;
+        if (childElement) {
+          // 消息不是本人发的 有头像 如果长度大于父容器需要减去34px
+          if (childElement.offsetWidth > messageContainerWidth - 34) {
+            childElement.style.width = 'calc(100% - 34px)';
+            // 由于动态计算了宽度，导致高度不对，所以需要重新计算高度
+            cache.clear(idx, 0);
+            list === null || list === void 0 || list.recomputeRowHeights(idx);
+          }
+        }
+      }
+    }
+  }, []);
   var handleCopyMsg = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, time, publisherNickName, targetNickname) {
       var msgHandled;
@@ -127,6 +156,7 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
     children: function children() {
       var _arr5;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: messageContainerRef,
         style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), {}, {
           display: 'flex',
           flexDirection: 'column'
@@ -142,7 +172,8 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
         } : {
           marginRight: 15,
           marginLeft: multiSelectActive ? 8 : 15,
-          alignItems: 'flex-start'
+          alignItems: 'flex-start',
+          right: 0
         }), {}, {
           pointerEvents: 'all'
         }, index === 0 ? {
@@ -216,9 +247,7 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
                 var newChecked = !checked;
                 handleSelectMsg(idx, newChecked);
               },
-              style: {
-                // marginLeft: uid !== userId && multiSelectActive ? 24 : 0,
-              },
+              ref: messageItemRef,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageBubble.MessageBubble, {
                 file: datum === null || datum === void 0 ? void 0 : datum.img,
                 msg: msg,
@@ -228,8 +257,7 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
                 ,
                 marginBottom: 'small',
                 styles: {
-                  marginLeft: publisherUid !== localUserId && !multiSelectActive ? 34 : 0,
-                  width: 'auto'
+                  marginLeft: publisherUid !== localUserId && !multiSelectActive ? 34 : 0
                 },
                 onCopy: (/*#__PURE__*/function () {
                   var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(type) {

package/lib/modules/chat/index.css

@@ -74,3 +74,12 @@
   margin-left: 15px;
   width: 100%;
 }
+
+.fcr-line-message .fcr-message-bubble span {
+  display: block;
+  overflow-wrap: break-word;
+}
+
+.fcr-line-message-container {
+  width: 100%;
+}