fcr-ui-scene 3.4.5 → 3.5.0

package/lib/modules/action-bar/switch-output-language-room/notification-bar/index.js

@@ -0,0 +1,99 @@
+"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.NotificationBar = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.async-iterator.filter.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.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _interpreter = _interopRequireDefault(require("./components/interpreter"));
+var _virtualImage = _interopRequireDefault(require("./components/virtual-image"));
+var _store = require("../../store");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var NotificationBar = exports.NotificationBar = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    openInterpreterDialog = _useContext.openInterpreterDialog,
+    users = _useContext.users,
+    interpreterUsers = _useContext.interpreterUsers,
+    interpreterUsersOffline = _useContext.interpreterUsersOffline,
+    folded = _useContext.folded;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showNotification = _useState2[0],
+    setShowNotification = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    hidden = _useState4[0],
+    setHidden = _useState4[1];
+  var shareScreenBarRef = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    interpreterOffline = _useState6[0],
+    setInterpreterOffline = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    reEnterInterperter = _useState8[0],
+    setReEnterInterperter = _useState8[1];
+  (0, _react.useEffect)(function () {
+    var offline = (interpreterUsers === null || interpreterUsers === void 0 ? void 0 : interpreterUsers.filter(function (user) {
+      return !users.map(function (u) {
+        return u.userId;
+      }).includes(user.userId);
+    })) || [];
+    setInterpreterOffline(offline);
+    if (offline.length > 0) {
+      setShowNotification(true);
+    }
+  }, [users, interpreterUsers]);
+  (0, _react.useEffect)(function () {
+    var reEnter = (interpreterOffline === null || interpreterOffline === void 0 ? void 0 : interpreterOffline.filter(function (user) {
+      return users.map(function (u) {
+        return u.userId;
+      }).includes(user.userId);
+    })) || [];
+    setReEnterInterperter(reEnter);
+  }, [users]);
+  (0, _react.useEffect)(function () {
+    if (showNotification) {
+      setReEnterInterperter([]);
+    }
+  }, [showNotification]);
+  var show = showNotification && (reEnterInterperter.length > 0 || interpreterOffline.length > 0);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: shareScreenBarRef,
+    className: (0, _classnames["default"])('notification-bar', {
+      'notification-bar-hidden': folded
+    }),
+    children: [show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreter["default"], {
+      offline: interpreterOffline,
+      reenter: reEnterInterperter,
+      onClose: function onClose() {
+        return setShowNotification(!showNotification);
+      },
+      onAssign: function onAssign() {
+        openInterpreterDialog();
+      }
+    }), (interpreterUsersOffline || show) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualImage["default"], {
+      hidden: hidden,
+      onClick: function onClick() {
+        setShowNotification(!showNotification);
+        setHidden(showNotification);
+      }
+    })]
+  });
+});

package/lib/modules/action-bar/type.d.ts

@@ -0,0 +1,6 @@
+export declare enum ConnectType {
+    NONE = 0,
+    COMPUTER = 1,
+    PHONE = 2
+}
+export type ConnectionTabType = 'computer' | 'phone';

package/lib/modules/action-bar/type.js

@@ -0,0 +1,13 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConnectType = void 0;
+var ConnectType = exports.ConnectType = /*#__PURE__*/function (ConnectType) {
+  ConnectType[ConnectType["NONE"] = 0] = "NONE";
+  ConnectType[ConnectType["COMPUTER"] = 1] = "COMPUTER";
+  ConnectType[ConnectType["PHONE"] = 2] = "PHONE";
+  return ConnectType;
+}({});

package/lib/modules/action-bar/types.d.ts

@@ -2,9 +2,9 @@ import { FcrIconProps } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
 import { PopoverProps } from 'agora-ui-foundation/lib/components/popover';
 import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
-import { FcrRoomType } from 'fcr-core/lib/room-control/type';
 import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
 import { MouseEventHandler } from 'react';
+import { FcrUIRoomType } from '../../type';
 export interface Item {
     name: string;
     width: number;
@@ -14,12 +14,6 @@ export type ActionBarItemPlacementProps = {
     placement: 'left' | 'mid' | 'right';
 };
 export type FcrActionBarProps = {};
-export type ActionBarCollapseContext = {
-    setItem: (id: string, item: Item) => void;
-    visibleList: string[];
-    collapseList?: string[];
-    toggleLayoutBarLock: (state: boolean) => void;
-};
 export interface ActionBarItemProps extends React.ComponentProps<'div'> {
     className?: string;
     icon: FcrIconType | React.ReactNode;
@@ -39,11 +33,12 @@ export interface AppItemProps {
     name: string;
     onClick: MouseEventHandler<HTMLDivElement>;
     fcrToolTipProps?: ToolTipProps;
-    fcrIconProps: FcrIconProps;
+    fcrIconProps?: FcrIconProps;
     permission: boolean;
+    imgSrc?: string;
 }
-export interface AppItemsPorps {
-    closeActionBarItemWithPopover?: (visible: boolean) => void;
+export interface AppListPorps {
+    onAppClick?: () => void;
 }
 export interface InterpreterPropsType {
     id: string;
@@ -76,7 +71,7 @@ export interface MenuItemProps {
 export interface StopCloudRecordingProps {
     stopCloudRecording: () => void;
 }
-export interface guideTooltipPropsRef {
+export interface GuideToolTipPropsRef {
     setShow: React.Dispatch<React.SetStateAction<boolean>>;
     show: boolean;
 }
@@ -89,6 +84,6 @@ export interface FcrCloudRecordingParams {
     action: 'start' | 'pause' | 'resume' | 'stop';
 }
 export type ChatRoomStoreMap = {
-    [K in FcrRoomType]?: number;
+    [K in FcrUIRoomType]?: number;
 };
-export type RoomTypeKeys = keyof typeof FcrRoomType;
+export type RoomTypeKeys = keyof typeof FcrUIRoomType;

package/lib/modules/action-bar/view.js

@@ -68,11 +68,7 @@ var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function (pro
     setShowArrow = _useContext.setShowArrow,
     showArrow = _useContext.showArrow,
     toggleFold = _useContext.toggleFold,
-    isMainRoom = _useContext.isMainRoom,
-    interpreterState = _useContext.interpreterState,
-    interpreter = _useContext.interpreter,
-    hasEnableInterpreterPermission = _useContext.hasEnableInterpreterPermission,
-    hasDisableInterpreterPermission = _useContext.hasDisableInterpreterPermission;
+    isMainRoom = _useContext.isMainRoom;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [!folded && showArrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleToolbarBtn, {
       toggleFold: toggleFold,
@@ -102,8 +98,7 @@ var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function (pro
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_placement.ActionBarItemPlacement, {
           placement: "mid",
           children: !opened && isMainRoom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.ActionBarCollapseItems, {
-            appItemOptions: appItemOptions,
-            children: _collapse.midActionOrderMap
+            appItemOptions: appItemOptions
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_placement.ActionBarItemPlacement, {
           placement: "right",
@@ -112,6 +107,6 @@ var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function (pro
           })
         })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_triggerOutputLanguage.TriggerOutputLanguage, {}), hasEnableInterpreterPermission && hasDisableInterpreterPermission && interpreterState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_notificationBar.NotificationBar, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_triggerOutputLanguage.TriggerOutputLanguage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_notificationBar.NotificationBar, {})]
   });
 });

package/lib/modules/audio-stream/index.d.ts

@@ -18,7 +18,9 @@ export declare class AudioStreamUIModule extends UIModule {
     private _interpreterProvider;
     private _eventProvider;
     private _deviceProvider;
-    private _streamObserverMap;
+    private _indicateTimerId;
+    private _volumeTimerId;
+    private _streamControlObserverMap;
     private get _localUser();
     mainRoomControlProvider?: FcrUIMainRoomControlProvider;
     interpreterProvider?: FcrUIInterpreterProvider;
@@ -40,4 +42,7 @@ export declare class AudioStreamUIModule extends UIModule {
     private _handleJoinInterpretingRoomSuccess;
     private _handleLeaveInterpretingRoom;
     private _createStreamObserver;
+    private _clearTimer;
+    private _setMainRoomVolume;
+    private _restoreVolumeByMainRoom;
 }

package/lib/modules/audio-stream/index.js

@@ -10,14 +10,13 @@ exports.AudioStreamUIModule = void 0;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.map.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.string.iterator.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.find.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -38,6 +37,7 @@ 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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -47,6 +47,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _base = require("../../base");
 var _fcrCore = require("fcr-core");
 var _constant = require("../../utilities/constant");
+var _imports = require("fcr-core/lib/imports");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var EventType = /*#__PURE__*/function (EventType) {
@@ -61,7 +62,9 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
     _this = _callSuper(this, AudioStreamUIModule, [parentNode, rootNode]);
     (0, _defineProperty2["default"])(_this, "_isPstn", false);
     (0, _defineProperty2["default"])(_this, "_disposers", []);
-    (0, _defineProperty2["default"])(_this, "_streamObserverMap", new Map());
+    (0, _defineProperty2["default"])(_this, "_indicateTimerId", null);
+    (0, _defineProperty2["default"])(_this, "_volumeTimerId", null);
+    (0, _defineProperty2["default"])(_this, "_streamControlObserverMap", new Map());
     (0, _defineProperty2["default"])(_this, "_turnOnMainRoomAudio", function () {
       var streamControl = _this._streamControl;
       if (streamControl) {
@@ -101,26 +104,30 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
       }
     });
     // 切换翻译官房间音频
-    (0, _defineProperty2["default"])(_this, "_toggleInterperterRemoteAudio", function (roomControl, event, key) {
+    (0, _defineProperty2["default"])(_this, "_toggleInterperterRemoteAudio", function (roomControl, event) {
       var _ref = roomControl.getRoomInfo() || {},
         roomId = _ref.roomId;
       var roomStreamControl = roomControl.getStreamControl();
       if (roomId) {
         if (event === EventType.START) {
-          _this.logger.info("".concat(roomId, "  addObserver ").concat(!_this._streamObserverMap.has(roomId) ? 'succeed' : 'fail', " "));
-          if (!_this._streamObserverMap.has(roomId)) {
+          _this.logger.info("".concat(roomId, "  addObserver ").concat(!_this._streamControlObserverMap.has(roomId) ? 'succeed' : 'fail', " "));
+          if (!_this._streamControlObserverMap.has(roomId)) {
             var streamObserver = _this._createStreamObserver(roomStreamControl);
-            _this._streamObserverMap.set(roomId, streamObserver);
+            _this._streamControlObserverMap.set(roomId, {
+              streamObserver: streamObserver,
+              roomStreamControl: roomStreamControl
+            });
             roomStreamControl.addObserver(streamObserver);
           }
           _this._handleRemoteAudio(roomStreamControl, roomStreamControl.getStreamList());
         }
         if (event === EventType.STOP) {
-          var _streamObserver = _this._streamObserverMap.get(roomId);
+          var _ref2 = _this._streamControlObserverMap.get(roomId) || {},
+            _streamObserver = _ref2.streamObserver;
           _this.logger.info("".concat(roomId, "  removeObserver ").concat(!!_streamObserver ? 'succeed' : 'fail', " "));
           if (_streamObserver) {
             roomStreamControl.removeObserver(_streamObserver);
-            _this._streamObserverMap["delete"](roomId);
+            _this._streamControlObserverMap["delete"](roomId);
           }
           _this._handleStopAudio(roomStreamControl, roomStreamControl.getStreamList());
         }
@@ -171,7 +178,7 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
       switch (action) {
         // 切换语言房间订阅  ( 翻译官切换收听语言房间 为输出的语音房间时 单独出发订阅订阅 )
         case _constant.FcrUIAction.TOGGLE_INTERPRETER_REMOTE_AUDIO:
-          _this._toggleInterperterRemoteAudio(payload.roomControl, payload.event, 'FcrUIAction.TOGGLE_INTERPRETER_REMOTE_AUDIO');
+          _this._toggleInterperterRemoteAudio(payload.roomControl, payload.event);
           break;
         //  切换收主房间(原声)订阅
         case _constant.FcrUIAction.TOGGLE_MAINROOM_REMOTE_AUDIO:
@@ -181,12 +188,12 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
     });
     (0, _defineProperty2["default"])(_this, "_handleJoinInterpretingRoomSuccess", function (param) {
       if (param.isToggleInterperterRemoteAudio) {
-        _this._toggleInterperterRemoteAudio(param.control, EventType.START, '_handleJoinInterpretingRoomSuccess');
+        _this._toggleInterperterRemoteAudio(param.control, EventType.START);
       }
     });
     (0, _defineProperty2["default"])(_this, "_handleLeaveInterpretingRoom", function (param) {
       if (param.isToggleInterperterRemoteAudio) {
-        _this._toggleInterperterRemoteAudio(param.control, EventType.STOP, '_handleLeaveInterpretingRoom');
+        _this._toggleInterperterRemoteAudio(param.control, EventType.STOP);
       }
     });
     (0, _defineProperty2["default"])(_this, "_createStreamObserver", function (streamControl) {
@@ -251,6 +258,32 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
         onStreamsRemoved: onStreamsRemoved
       };
     });
+    (0, _defineProperty2["default"])(_this, "_setMainRoomVolume", function (volume) {
+      var mainStreamControl = _this._streamControl;
+      mainStreamControl.getStreamList().forEach(function (stream) {
+        var needSetVolume = [_imports.AgoraRteMediaStreamType.AUDIO, _imports.AgoraRteMediaStreamType.BOTH].includes(stream.streamType);
+        if (needSetVolume) mainStreamControl.adjustRemoteAudioStreamVolume(stream.streamId, volume);
+      });
+      _this._clearTimer();
+    });
+    (0, _defineProperty2["default"])(_this, "_restoreVolumeByMainRoom", function () {
+      if (_this._volumeTimerId) return;
+      var startValue = 25; // 主房间初始音量
+      var endValue = 100; // 最大音量
+      var duration = 2000; // 在 2 秒内逐渐放大
+      var interval = 50; // 更新间隔为 50ms
+
+      var volume = startValue;
+      var steps = (endValue - startValue) / (duration / interval);
+      _this._volumeTimerId = setInterval(function () {
+        volume += steps;
+        if (volume >= endValue) {
+          volume = endValue;
+          _this._clearTimer();
+        }
+        _this._setMainRoomVolume(volume);
+      }, interval);
+    });
     _this.parentNode = parentNode;
     _this.rootNode = rootNode;
     _this._eventObserver = {
@@ -258,7 +291,18 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
     };
     _this._interpreterObserver = {
       onJoinInterpretingRoomSuccess: _this._handleJoinInterpretingRoomSuccess,
-      onLeaveInterpretingRoom: _this._handleLeaveInterpretingRoom
+      onLeaveInterpretingRoom: _this._handleLeaveInterpretingRoom,
+      onSubscribeLanguageVolumePrioritized: function onSubscribeLanguageVolumePrioritized(enable) {
+        if (enable) {
+          _this._setMainRoomVolume(25);
+        } else {
+          if (!_this._indicateTimerId) {
+            _this._indicateTimerId = setTimeout(function () {
+              _this._restoreVolumeByMainRoom();
+            }, 6000);
+          }
+        }
+      }
     };
     _this._deviceObserver = {
       onAudioConnected: function onAudioConnected() {
@@ -310,11 +354,30 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
       this._interpreterProvider.removeObserver(this._interpreterObserver);
       this._streamControl.removeObserver(this._streamObserver);
       this._deviceProvider.removeObserver(this._deviceObserver);
+      this._streamControlObserverMap.forEach(function (_ref3, key) {
+        var roomStreamControl = _ref3.roomStreamControl,
+          streamObserver = _ref3.streamObserver;
+        roomStreamControl.removeObserver(streamObserver);
+      });
+      this._streamControlObserverMap.clear();
+      this._clearTimer();
     }
   }, {
     key: "getComponent",
     value: function getComponent() {
       return null;
     }
+  }, {
+    key: "_clearTimer",
+    value: function _clearTimer() {
+      if (this._indicateTimerId) {
+        clearTimeout(this._indicateTimerId);
+        this._indicateTimerId = null;
+      }
+      if (this._volumeTimerId) {
+        clearInterval(this._volumeTimerId);
+        this._volumeTimerId = null;
+      }
+    }
   }]);
 }(_base.UIModule);

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

@@ -0,0 +1,80 @@
+.fcr-message-bar {
+  height: 100%;
+  width: 100%;
+  padding: 4px;
+
+  display: flex;
+  align-items: center;
+  padding: 4px 8px 14px;
+
+  font-size: 10px;
+  color: var(--fcr_ui_scene_icontext1);
+  line-height: 10px;
+
+  border-top-left-radius: var(--fcr_cornerradius_m);
+  border-top-right-radius: var(--fcr_cornerradius_m);
+
+  margin-bottom: -10px;
+
+  background-color: var(--fcr_web_ui_scene_fill4_popup);
+
+  min-height: calc(32px + 10px);
+
+  position: relative;
+}
+
+.fcr-message-bar > span:first-child {
+  margin-right: 4px;
+  font-size: 12px;
+}
+
+.fcr-message-bar > .fcr-select-wrapper {
+  height: 24px;
+  width: 35px;
+}
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected {
+  height: 24px;
+  width: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select {
+  justify-content: center;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected > .fcr-select__icon {
+  height: 16px;
+  width: 16px;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected > span {
+  font-family: 'Helvetica Neue';
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__options > .fcr-select__option {
+  display: flex;
+  padding: 4px 4px 4px 6px;
+}
+
+.fcr-tip-all {
+}
+
+.fcr-tip-private {
+  color: var(--fcr_ui_scene_ramp_yellow6);
+}
+
+.fcr-message-bar .fcr-icon-text-wrapper svg {
+  cursor: pointer;
+}
+
+.fcr-msg-bar-break-max-width {
+  max-width: 75px;
+}

package/lib/modules/chat/chat-bar/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import './index.css';
+import { FcrUserInfo } from 'fcr-core/lib/type';
+export interface MessageBarProps {
+    styles?: CSSProperties;
+    users?: FcrUserInfo[];
+    onTargetChange?: (target: FcrUserInfo) => void;
+    selectedUser?: FcrUserInfo;
+    title?: React.ReactNode;
+}
+export declare const MessageBar: ({ styles, users, selectedUser, onTargetChange, title, }: React.PropsWithChildren<MessageBarProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/chat/chat-bar/index.js

@@ -0,0 +1,142 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.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.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");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageBar = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
+var _iconText = require("agora-ui-foundation/lib/components/icon-text");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+require("./index.css");
+var _chatSelect = require("../chat-select");
+var _store = require("../store");
+var _mobxReact = require("mobx-react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type2 = require("fcr-core/lib/room-control/type");
+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 MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
+  var _selectedUser$userId, _selectedUser$userNam;
+  var styles = _ref.styles,
+    _ref$users = _ref.users,
+    users = _ref$users === void 0 ? [] : _ref$users,
+    selectedUser = _ref.selectedUser,
+    onTargetChange = _ref.onTargetChange,
+    title = _ref.title;
+  var t = (0, _i18n.useI18n)();
+  var cls = (0, _classnames["default"])('fcr-message-bar', {});
+  // 每次打开聊天窗, 默认 All
+  var _useState = (0, _react.useState)(t('fmt_chat_labels_sendto')),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tips = _useState2[0],
+    setTips = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    popoverOpened = _useState4[0],
+    setPopoverOpened = _useState4[1];
+  var onPopoverChanged = function onPopoverChanged(visible) {
+    setPopoverOpened(visible);
+  };
+  var selectedUserId = (_selectedUser$userId = selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) !== null && _selectedUser$userId !== void 0 ? _selectedUser$userId : _store.USER_ALL;
+  var handleSelected = function handleSelected(user) {
+    setPopoverOpened(false);
+    onTargetChange && onTargetChange(user);
+  };
+  (0, _react.useEffect)(function () {
+    setTips(selectedUserId === _store.USER_ALL ? t('fmt_chat_labels_sendto') : t('fmt_chats_label_privatechat'));
+  }, [selectedUserId]);
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex,
+    roomType = _useContext.roomType;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    chatLevel = _ref2.chatLevel,
+    privateTargetUser = _ref2.privateTargetUser,
+    localIsManager = _ref2.localIsManager;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    style: _objectSpread({}, styles),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "fcr-tip-".concat(selectedUserId === _store.USER_ALL ? t('fmt_chat_option_all') : t('fmt_chats_label_privatechat')),
+      children: tips
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayInnerStyle: {
+        boxShadow: 'none',
+        border: 'none',
+        width: 255
+      },
+      placement: "bottomLeft",
+      overlayClassName: "fcr-action-bar--device-popover",
+      visible: popoverOpened,
+      onVisibleChange: onPopoverChanged,
+      trigger: "click",
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatSelect.ChatSelect, {
+        title: title,
+        type: "private-chat",
+        candidateUsers: (0, _store.sortUsers)(users),
+        selectedUid: selectedUserId,
+        onSelect: handleSelected
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick() {
+          if ((users === null || users === void 0 ? void 0 : users.length) <= 1) {
+            return;
+          }
+          setPopoverOpened(!popoverOpened);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+          styles: {
+            padding: '4px 1px 4px 4px',
+            borderRadius: 6,
+            backgroundColor: 'var(--fcr_web_ui_scene_fill2)'
+          },
+          txt: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconText.IconText, {
+            classnames: {
+              'fcr-break-one-line fcr-word-break': true,
+              'fcr-msg-bar-break-max-width': true
+            }
+            // TODO: 当选中的 uid 为 None 时，需要提示选择管理员
+            ,
+            txt: privateTargetUser.userId === _store.USER_NONE && !localIsManager ? t('fmt_chat_tips_selecthost') : (_selectedUser$userNam = selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userName) !== null && _selectedUser$userNam !== void 0 ? _selectedUser$userNam : _store.USER_ALL,
+            icon: _type.FcrIconType.FCR_DROPDOWN,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)',
+              fontSize: '12px'
+            },
+            fontSize: "medium",
+            iconTransform: popoverOpened,
+            enable: true,
+            isHideIcon: roomType === _type2.FcrRoomType.Mainroom ? (users === null || users === void 0 ? void 0 : users.length) <= 1 : false,
+            onClick: function onClick() {
+              setPopoverOpened(!popoverOpened);
+            },
+            iconReverse: true
+          })
+        })
+      })
+    })]
+  });
+});