fcr-ui-scene-mobile 3.4.0

package/lib/modules/chat/util.d.ts

@@ -0,0 +1,6 @@
+import { AllowChatLevelType } from 'agora-ui-foundation/lib/components/chat-manager';
+import { RoleType } from 'agora-ui-foundation/lib/components/message-bubble';
+import { FcrUserRole } from '../../type';
+export declare const handleMessageTime: (time: number | string) => string;
+export declare const breakWord: (str?: string) => string | undefined;
+export declare const handleChatLevelChangedSystemMsg: (t: any, chatLevel: AllowChatLevelType, publisherRole: RoleType | FcrUserRole | undefined, publisherUsername: string | undefined, isSelf: boolean) => string;

package/lib/modules/chat/util.js

@@ -0,0 +1,69 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleMessageTime = exports.handleChatLevelChangedSystemMsg = exports.breakWord = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.date.to-string.js");
+var _type = require("../../type");
+var handleMessageTime = exports.handleMessageTime = function handleMessageTime(time) {
+  if (typeof time === 'string') {
+    return time;
+  }
+  var now = new Date();
+  var nowYear = now.getFullYear();
+  var date = new Date(time);
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  var hour = date.getHours();
+  var minute = date.getMinutes();
+  var amOrPm = hour >= 12 ? 'PM' : 'AM';
+  var hh = hour % 12;
+  var mm = minute < 10 ? '0' + minute : minute;
+  if (year === nowYear) {
+    // hh:mm (ap / pm)
+    if (year === nowYear && date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) {
+      return "".concat(hh, ":").concat(mm, " ").concat(amOrPm);
+    }
+    // mm-dd hh:mm (ap / pm)
+    return "".concat(month, "-").concat(day, " ").concat(hh, ":").concat(mm, " ").concat(amOrPm);
+  } else {
+    // yyyy-mm-dd hh:mm (ap / pm)
+    return "".concat(year, "-").concat(month, "-").concat(day, " ").concat(hh, ":").concat(mm, " ").concat(amOrPm);
+  }
+};
+var MAX_NAME_LENGTH = 6;
+var breakWord = exports.breakWord = function breakWord(str) {
+  if (!str) return str;
+  if (str.length <= MAX_NAME_LENGTH) {
+    return str;
+  }
+  return str.slice(0, MAX_NAME_LENGTH - 1) + '...';
+};
+var handleChatLevelChangedSystemMsg = exports.handleChatLevelChangedSystemMsg = function handleChatLevelChangedSystemMsg(t, chatLevel, publisherRole, publisherUsername, isSelf) {
+  var needMsgPrefix = chatLevel === 'everyone' || chatLevel === 'no_one';
+  var msgPrefix = '';
+  if (needMsgPrefix) {
+    msgPrefix = "".concat(publisherRole === 'union-host' || publisherRole === _type.FcrUserRole.COHOST ? t('fmt_role_cohost') : t('fmt_role_host'), " (").concat(isSelf ? t('fmt_participant_label_Me') : breakWord(publisherUsername), ") ");
+  }
+  var msg = msgPrefix;
+  switch (chatLevel) {
+    case 'everyone':
+      msg += t('fmt_chat_tips_freechat');
+      break;
+    case 'public':
+      msg += t('fmt_chat_tips_onlypublic');
+      break;
+    case 'private_to_manager':
+      msg += t('fmt_additional_tips_chatpermissionchange');
+      break;
+    case 'no_one':
+      msg += t('fmt_chat_tips_muteroom');
+      break;
+  }
+  return msg;
+};

package/lib/modules/chat/view.d.ts

@@ -0,0 +1,11 @@
+export declare const View: ({ updateReadIndex, sendMsg, userId: localUserId, singling, handleClickUploadImage, }: {
+    updateReadIndex: (data?: {
+        index: number;
+        msgId: string;
+    }) => void;
+    sendMsg: (msg: string) => void;
+    userId: string;
+    singling?: boolean;
+    handleClickUploadImage: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ChatAction: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/chat/view.js

@@ -0,0 +1,414 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.View = exports.ChatAction = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.find.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.array.map.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.array.unshift.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.filter.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.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");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _store = require("./store");
+var _messageList = require("./message-list");
+var _contex = require("./contex");
+var _chatWrapperMobile = require("agora-ui-foundation/lib/components/chat-wrapper-mobile");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _react = require("react");
+var _chatBar = require("./chat-bar");
+var _type = require("../../type");
+var _util = require("./util");
+var _copyText = require("../../utilities/copyText");
+var _chatManager = require("agora-ui-foundation/lib/components/chat-manager");
+var _type2 = require("fcr-core/lib/room-control/chatroom-control/type");
+var _fcrCore = require("fcr-core");
+var _tabs = require("agora-ui-foundation/lib/components/tabs");
+var _constant = require("../../utilities/constant");
+var _context3 = require("../layout/context");
+var _chatSelect = require("./chat-select");
+var _store2 = require("../layout/store");
+var _jsxRuntime = require("react/jsx-runtime");
+var View = exports.View = (0, _mobxReact.observer)(function (_ref) {
+  var updateReadIndex = _ref.updateReadIndex,
+    sendMsg = _ref.sendMsg,
+    localUserId = _ref.userId,
+    singling = _ref.singling,
+    handleClickUploadImage = _ref.handleClickUploadImage;
+  var t = (0, _i18n.useI18n)();
+  var defaultProps = {
+    errorMsg: t('fmt_chat_tips_exceedlimit'),
+    forbiddenTxt: t('fmt_chat_button_muteall'),
+    styles: {
+      display: 'flex'
+    }
+  };
+  var styles = defaultProps.styles,
+    forbiddenTxt = defaultProps.forbiddenTxt,
+    errorMsg = defaultProps.errorMsg;
+  var _useContext = (0, _react.useContext)(_contex.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex,
+    handlerActiveTab = _useContext.handlerActiveTab;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    setTargetUser = _ref2.setTargetUser,
+    privateTargetUser = _ref2.privateTargetUser,
+    remoteUsers = _ref2.remoteUsers,
+    targetUserIsOnline = _ref2.targetUserIsOnline,
+    localIsManager = _ref2.localIsManager,
+    chatLevel = _ref2.chatLevel,
+    messageList = _ref2.messageList,
+    textMsgInfo = _ref2.textMsgInfo,
+    updateChatTextMsg = _ref2.updateChatTextMsg,
+    privateTargetList = _ref2.privateTargetList,
+    resetTargetUser = _ref2.resetTargetUser,
+    handleToast = _ref2.handleToast,
+    chatRoomState = _ref2.chatRoomState,
+    isHost = _ref2.isHost,
+    hasChatPermission = _ref2.hasChatPermission,
+    hasChatSendPrivatePermission = _ref2.hasChatSendPrivatePermission,
+    filterChatMember = _ref2.filterChatMember,
+    hasSendMessagePermission = _ref2.hasSendMessagePermission;
+  var _useContext2 = (0, _react.useContext)(_context3.LayoutStoreContext),
+    currentSlotType = _useContext2.currentSlotType,
+    updateCurrentModule = _useContext2.updateCurrentModule;
+  var handleTargetChange = function handleTargetChange(user) {
+    setTargetUser(user);
+    updateCurrentModule(_store2.SlotsType.Chat);
+  };
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    multiSelectActive = _useState2[0],
+    setMultiSelectActive = _useState2[1];
+  var _useState3 = (0, _react.useState)(new Map()),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    copyMap = _useState4[0],
+    setCopyMap = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    selectCnt = _useState6[0],
+    setSelectCnt = _useState6[1];
+  var _useState7 = (0, _react.useState)((0, _toConsumableArray2["default"])(privateTargetList)),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    targetList = _useState8[0],
+    setTargetList = _useState8[1];
+  (0, _react.useEffect)(function () {
+    var _users$;
+    var users = (0, _toConsumableArray2["default"])(targetList);
+    if (((_users$ = users[0]) === null || _users$ === void 0 ? void 0 : _users$.userId) === _store.USER_ALL) {
+      if (chatLevel !== 'everyone' && chatLevel !== 'public' && !localIsManager) {
+        users.shift();
+      }
+    } else if (chatLevel === 'everyone' || chatLevel == 'public' || localIsManager) {
+      users.unshift({
+        userId: _store.USER_ALL,
+        userName: t('fmt_chat_option_all'),
+        userRole: _type.FcrUserRole.ROBOT,
+        connectorType: _fcrCore.FcrRoomConnectorType.NONE
+      });
+    }
+    remoteUsers.forEach(function (user) {
+      if (!users.find(function (u) {
+        return u.userId === user.userId;
+      })) {
+        users.push(user);
+      }
+    });
+    users = users.filter(function (user) {
+      return remoteUsers.find(function (u) {
+        return u.userId === user.userId;
+      }) || user.userId === privateTargetUser.userId || user.userId === _store.USER_ALL;
+    });
+    users = users.map(function (user) {
+      var _remoteUsers$find;
+      return (_remoteUsers$find = remoteUsers.find(function (u) {
+        return u.userId === user.userId;
+      })) !== null && _remoteUsers$find !== void 0 ? _remoteUsers$find : user;
+    });
+    users = filterChatMember((0, _toConsumableArray2["default"])(users));
+    setTargetList((0, _toConsumableArray2["default"])(users));
+  }, [privateTargetList, chatLevel, remoteUsers]);
+  var handleMultiCopyMsg = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var msgHandled, msgIndex;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            msgHandled = '';
+            msgIndex = Array.from(copyMap.keys()).sort();
+            msgIndex.forEach(function (msgIdx, arrIdx) {
+              var idxMsg = messageList[msgIdx];
+              if (idxMsg) {
+                var _messageList$prevIdx, _messageList$prevIdx2, _messageList$prevIdx3;
+                var msg = idxMsg.msg,
+                  time = idxMsg.time,
+                  publisherUid = idxMsg.uid,
+                  publisherNickName = idxMsg.nickName,
+                  targetNickname = idxMsg.target,
+                  isPrivate = idxMsg.isPrivate,
+                  publisherRole = idxMsg.role;
+                var senderNickname = publisherUid === localUserId && isPrivate ? t('fmt_settings_labels_you') : publisherNickName;
+                var prevIdx = msgIndex[arrIdx - 1];
+                var needLabel = prevIdx ? ((_messageList$prevIdx = messageList[prevIdx]) === null || _messageList$prevIdx === void 0 ? void 0 : _messageList$prevIdx.uid) !== publisherUid || ((_messageList$prevIdx2 = messageList[prevIdx]) === null || _messageList$prevIdx2 === void 0 ? void 0 : _messageList$prevIdx2.isPrivate) !== isPrivate || ((_messageList$prevIdx3 = messageList[prevIdx]) === null || _messageList$prevIdx3 === void 0 ? void 0 : _messageList$prevIdx3.role) !== publisherRole : false;
+                // 2. 复制多条消息, 一个人发的多条消息, 时间前缀只会有一个, 消息累加
+                if (needLabel) {
+                  msgHandled += (0, _i18n.getLanguage)() === 'zh' ? "".concat(senderNickname, "\u5BF9").concat(targetNickname, "\u8BF4(").concat((0, _util.handleMessageTime)(time), ")\n").concat(msg, "\n") : "".concat(senderNickname, " said to ").concat(targetNickname, "(").concat((0, _util.handleMessageTime)(time), ")\n").concat(msg, "\n");
+                } else {
+                  msgHandled += "".concat(msg, "\n");
+                }
+              }
+            });
+            _context.next = 5;
+            return (0, _copyText.copyText)(msgHandled);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleMultiCopyMsg() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  (0, _react.useEffect)(function () {
+    setSelectCnt(copyMap.size);
+  }, [copyMap.size]);
+  var resetMultiSelectStates = function resetMultiSelectStates() {
+    setMultiSelectActive(false);
+    copyMap.clear();
+    setCopyMap(copyMap);
+    setSelectCnt(0);
+  };
+  var chatSelectNoTitle = localIsManager || chatLevel === 'everyone' || chatLevel === 'no_one';
+  var copyTips = function copyTips() {
+    handleToast({
+      id: 'copy-multi-msg',
+      toastProps: {
+        type: 'normal',
+        content: t('fmt_statusbar_status_coppied'),
+        size: 'small'
+      }
+    });
+  };
+  var messageBarTitle = (0, _react.useMemo)(function () {
+    return chatSelectNoTitle ? undefined : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "assign-host-title",
+      children: chatLevel === 'public' ? t('fmt_chat_option_onlypublic') : t('fmt_chat_option_onlyprivate')
+    });
+  }, [chatLevel, chatSelectNoTitle]);
+  return currentSlotType === _store2.SlotsType.ChatSelect ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: 'fcr-chat-select-tabs-container',
+      children: [' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatSelect.ChatSelect, {
+        title: messageBarTitle,
+        type: "private-chat",
+        candidateUsers: (0, _store.sortUsers)(targetList),
+        selectedUid: privateTargetUser.userId,
+        onSelect: handleTargetChange
+      })]
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "chat-tabs-container",
+      children: chatRoomStores[_constant.RoomType.WAITING_ROOM] && chatRoomStores[_constant.RoomType.WAITING_ROOM].userCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
+        items: [{
+          label: t('fmt_waitingroom_sidebar_chat_label_meeting'),
+          key: _constant.RoomType.MAIN_ROOM
+        }, {
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "chat-container-icon",
+            children: [chatRoomStores[_constant.RoomType.WAITING_ROOM].hasNewMsg ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "chat-container-red"
+            }) : null, t('fmt_waitingroom_sidebar_label_waiting', {
+              reason1: chatRoomStores[_constant.RoomType.WAITING_ROOM].userCount
+            })]
+          }),
+          key: _constant.RoomType.WAITING_ROOM
+        }],
+        activeKey: activeTabIndex,
+        onChange: function onChange(key) {
+          handlerActiveTab(key);
+        }
+      }) : null
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatWrapperMobile.ChatWrapper, {
+      styles: styles,
+      errorMsg: errorMsg,
+      forbiddenTxt: forbiddenTxt,
+      singling: singling,
+      forbidden: !localIsManager && !hasChatPermission && !hasChatSendPrivatePermission,
+      isHost: isHost,
+      handMsg: function handMsg(msg) {
+        if (chatRoomState !== _type2.FcrChatRoomConnectionState.Connected) {
+          handleToast({
+            id: 'send-msg-offline',
+            toastProps: {
+              type: 'error',
+              content: t('fmt_chat_tips_Networkconnect'),
+              size: 'small'
+            }
+          });
+          return;
+        }
+        if (!localIsManager) {
+          if (privateTargetUser.userId === _store.USER_NONE) {
+            handleToast({
+              id: 'send-msg-to-none',
+              toastProps: {
+                type: 'normal',
+                content: t('fmt_chat_tips_selectchat'),
+                size: 'small'
+              }
+            });
+            return;
+          }
+
+          // if (
+          //   chatLevel === 'no_one' ||
+          //   (chatLevel !== 'everyone' &&
+          //     privateTargetUser.userId !== USER_ALL &&
+          //     !isManager(privateTargetUser.userRole))
+          // ) {
+          //   handleToast({
+          //     id: 'send-msg-to-none',
+          //     toastProps: {
+          //       type: 'normal',
+          //       content: t('fmt_chat_tips_permissionchange'),
+          //       size: 'small',
+          //     },
+          //   });
+          //   resetTargetUser();
+          //   return;
+          // }
+
+          if (privateTargetUser.userId === _store.USER_ALL && !hasSendMessagePermission()) {
+            // handleToast({
+            //   id: 'send-msg-to-none',
+            //   toastProps: {
+            //     type: 'normal',
+            //     content: t('fmt_chat_tips_permissionchange'),
+            //     size: 'small',
+            //   },
+            // });
+            return;
+          } else if (privateTargetUser.userId !== _store.USER_ALL && !hasChatSendPrivatePermission) {
+            // handleToast({
+            //   id: 'send-msg-to-none',
+            //   toastProps: {
+            //     type: 'normal',
+            //     content: t('fmt_chat_tips_permissionchange'),
+            //     size: 'small',
+            //   },
+            // });
+            resetTargetUser();
+            return;
+          }
+        }
+        sendMsg(msg);
+      },
+      handleClickUploadImage: handleClickUploadImage,
+      msgBarElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatBar.MessageBar, {
+        selectedUserId: privateTargetUser.userId,
+        users: targetList,
+        onTargetChange: handleTargetChange,
+        title: messageBarTitle,
+        onClick: function onClick() {
+          updateCurrentModule(_store2.SlotsType.ChatSelect);
+        }
+      }),
+      targetUserIsOnline: targetUserIsOnline,
+      privateTarget: privateTargetUser.userId,
+      selectTargetNickname: privateTargetUser.userName,
+      multiSelectActive: multiSelectActive,
+      selectCnt: selectCnt,
+      onSelectCancel: function onSelectCancel() {
+        resetMultiSelectStates();
+      },
+      onSelectConfirm: /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return handleMultiCopyMsg();
+            case 2:
+              resetMultiSelectStates();
+              copyTips();
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      })),
+      defaultMsg: textMsgInfo.textMsg,
+      updateChatTextMsg: updateChatTextMsg,
+      autoSizeParams: {
+        minHeight: 20,
+        maxHeight: 160,
+        initHeight: (textMsgInfo === null || textMsgInfo === void 0 ? void 0 : textMsgInfo.height) || 20
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageList.MessageList, {
+        updateReadMsgIndex: updateReadIndex,
+        userId: localUserId,
+        setMultiSelectActive: setMultiSelectActive,
+        multiSelectActive: multiSelectActive,
+        copyMap: copyMap,
+        setCopyMap: setCopyMap,
+        selectCnt: selectCnt,
+        copyTips: copyTips
+      })
+    })]
+  });
+});
+var ChatAction = exports.ChatAction = (0, _mobxReact.observer)(function () {
+  var _useContext3 = (0, _react.useContext)(_contex.StoreContext),
+    chatRoomStores = _useContext3.chatRoomStores;
+  var _ref5 = chatRoomStores[_constant.RoomType.MAIN_ROOM],
+    isHostOrCoHost = _ref5.isHostOrCoHost,
+    setAllowChat = _ref5.setAllowChat,
+    setAllowChatWithPayload = _ref5.setAllowChatWithPayload,
+    chatLevel = _ref5.chatLevel;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatManager.ChatManager, {
+    isManager: isHostOrCoHost,
+    setAllowChat: setAllowChat,
+    setAllowChatWithPayload: setAllowChatWithPayload,
+    allowChatLevel: chatLevel
+  });
+});

package/lib/modules/layout/bottom-drawer/index.css

@@ -0,0 +1,34 @@
+.fcr-bottom-drawer {
+  border-top: 1px solid var(--fcr_ui_scene_line1, rgba(74, 76, 95, 0.5));
+  border-top-right-radius: var(--fcr_cornerradius_xxl);
+  border-top-left-radius: var(--fcr_cornerradius_xxl);
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  height: 572px;
+  width: 100%;
+
+  box-shadow: 0px -10px 25px 0px var(--fcr_ui_scene_black1);
+}
+
+.fcr-bottom-drawer .leave-container {
+  width: 100%;
+  height: 100%;
+  padding: 0 15px;
+  max-height: unset;
+  position: unset;
+}
+
+.fcr-bottom-drawer .leave-container .fcr-no-data {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.fcr-bottom-drawer .leave-container .fcr-no-data svg {
+  width: 50%;
+}

package/lib/modules/layout/bottom-drawer/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+declare const BottomDrawerWrapper: () => import("react/jsx-runtime").JSX.Element;
+export default BottomDrawerWrapper;

package/lib/modules/layout/bottom-drawer/index.js

@@ -0,0 +1,129 @@
+"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.object.to-string.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", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.index-of.js");
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _react = _interopRequireWildcard(require("react"));
+var _drawerHeader = require("../drawer-header");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _mobxReact = require("mobx-react");
+var _context = require("../context");
+var _store = require("../store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _popup = require("agora-ui-foundation/lib/components/popup");
+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; }
+var BottomDrawer = (0, _mobxReact.observer)(function (_ref) {
+  (0, _objectDestructuringEmpty2["default"])(_ref);
+  var _useContext = (0, _react.useContext)(_context.LayoutStoreContext),
+    currentModule = _useContext.currentModule,
+    currentSlotType = _useContext.currentSlotType,
+    closeCurrentModule = _useContext.closeCurrentModule,
+    updateCurrentModule = _useContext.updateCurrentModule;
+  var cls = (0, _classnames["default"])('fcr-bottom-drawer', {});
+  var t = (0, _i18n.useI18n)();
+  var title = (0, _react.useMemo)(function () {
+    switch (currentSlotType) {
+      case _store.SlotsType.Chat:
+        return t('fmt_chat_label_chat');
+      case _store.SlotsType.ChatSelect:
+        return t('fmt_chat_labels_sendto');
+      default:
+        return '';
+    }
+  }, [currentSlotType]);
+  var keyBoardHeightCache = (0, _react.useRef)(0);
+  var bottomDrawerHeight = (0, _react.useRef)(0);
+  var bottomDrawerEl = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (bottomDrawerEl.current) {
+      bottomDrawerHeight.current = bottomDrawerEl.current.offsetHeight;
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    var drawerEl = document.getElementById('bottom-drawer');
+    drawerEl && (drawerEl.style.bottom = '0px');
+  }, [currentSlotType, currentModule]);
+
+  // 键盘唤起时，底部抽屉上移导致 input 不在视窗内
+  (0, _react.useEffect)(function () {
+    var _keyBoardHeightCache$;
+    var u = navigator.userAgent;
+    if (!(u.indexOf('Android') > -1) || currentSlotType !== _store.SlotsType.ChatSelect) {
+      return;
+    }
+    var el = document.getElementById('bottom-drawer');
+    var initialWindowHeight = window.innerHeight;
+    var keyboardHeight = (_keyBoardHeightCache$ = keyBoardHeightCache.current) !== null && _keyBoardHeightCache$ !== void 0 ? _keyBoardHeightCache$ : 0;
+    var screenHeight = document.body.offsetHeight;
+    var nowHeight = null;
+    var handleResize = function handleResize() {
+      var currentWindowHeight = window.innerHeight;
+      nowHeight = document.body.offsetHeight;
+      if (nowHeight && nowHeight < screenHeight) {
+        keyboardHeight = initialWindowHeight - currentWindowHeight;
+        if (!keyBoardHeightCache.current) {
+          keyBoardHeightCache.current = keyboardHeight;
+        }
+        //键盘唤起
+        el && (el.style.bottom = -keyboardHeight + 'px');
+      } else {
+        //键盘收起
+        el && (el.style.bottom = 0 + 'px');
+      }
+    };
+    window.onresize = handleResize;
+    return function () {
+      window.onresize = null;
+    };
+  }, [currentSlotType]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popup.FcrPopup, {
+    elId: 'popup-bottom-drawer',
+    showCloseButton: false,
+    visible: currentSlotType !== _store.SlotsType.None,
+    onMaskClick: function onMaskClick() {
+      closeCurrentModule();
+    },
+    onClose: function onClose() {
+      closeCurrentModule();
+    },
+    bodyStyle: {
+      height: '572px'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: cls,
+      id: 'bottom-drawer',
+      ref: bottomDrawerEl,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_drawerHeader.DrawerHeader, {
+        title: title,
+        type: currentSlotType === _store.SlotsType.ChatSelect ? 'center' : 'space-between',
+        onClose: closeCurrentModule,
+        onReturn: currentSlotType === _store.SlotsType.ChatSelect ? function () {
+          updateCurrentModule(_store.SlotsType.Chat);
+        } : undefined
+      }), currentModule]
+    })
+  });
+});
+var BottomDrawerWrapper = function BottomDrawerWrapper() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomDrawer, {})
+  });
+};
+var _default = exports["default"] = BottomDrawerWrapper;

package/lib/modules/layout/components/Layout.d.ts

@@ -0,0 +1 @@
+export declare const Layout: () => import("react/jsx-runtime").JSX.Element;