fcr-ui-scene 1.0.40 → 3.1.0

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/view.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import './index.css';
+type FcrActionBarProps = {};
+export declare const FcrActionBar: FC<FcrActionBarProps>;
+export {};

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

@@ -0,0 +1,80 @@
+"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.FcrActionBar = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _itemPlacement = require("./item-placement");
+var _device = require("./device");
+var _actionBarCollapesItems = require("./action-bar-collapes-items");
+require("./index.css");
+var _leave = require("./leave");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _smaller = require("./smaller");
+var _mobxReact = require("mobx-react");
+var _context = require("./context");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function (props) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    opened = _useState2[0],
+    setOpenState = _useState2[1];
+  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+    toggleFold = _useContext.toggleFold,
+    folded = _useContext.folded,
+    setShowArrow = _useContext.setShowArrow,
+    showArrow = _useContext.showArrow;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-action-bar', {
+      'fcr-action-bar-fold-style': folded
+    }),
+    onMouseEnter: function onMouseEnter() {
+      setShowArrow(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setShowArrow(false);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar--fold-hotarea"
+    }), !folded && showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      placement: "top",
+      content: transI18n('fmt_settings_options_toolbarcollapse'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-bar--fold",
+        onClick: toggleFold,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_DROPDOWN,
+          colors: {
+            iconPrimary: 'black'
+          }
+        })
+      })
+    }), folded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_smaller.SmallerActionbar, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+        placement: "left",
+        children: !opened && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_device.MicrophoneDevice, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_device.CameraDevice, {})]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+        placement: "mid",
+        children: !opened && /*#__PURE__*/(0, _jsxRuntime.jsx)(_actionBarCollapesItems.ActionBarCollapseItems, {
+          children: _actionBarCollapesItems.midActionOrderMap
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+        placement: "right",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_leave.End, {
+          onPopoverChanged: setOpenState
+        })
+      })]
+    })]
+  });
+});

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

@@ -0,0 +1,21 @@
+import { UIModule } from '../../base';
+import { FcrStreamControl, FcrUserControl } from 'agora-edu-core';
+import { FcrDeviceStreamStore } from '../../common/device-stream-store';
+export declare class AudioStreamUIModule extends UIModule {
+    private _streamControl;
+    private _userControl;
+    private _deviceStreamStore;
+    constructor({ streamControl, userControl, deviceStreamStore, }: {
+        streamControl: FcrStreamControl;
+        userControl: FcrUserControl;
+        deviceStreamStore: FcrDeviceStreamStore;
+    });
+    init(): void;
+    getComponent(): null;
+    protected onUnload(): void;
+    private _handleStreamsAdded;
+    private _handleStreamsUpdated;
+    private _handleStreamsRemoved;
+    private _playRemoteAudio;
+    private _hasPstn;
+}

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

@@ -0,0 +1,119 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AudioStreamUIModule = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.object.values.js");
+require("core-js/modules/web.dom-collections.for-each.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"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _type = require("agora-edu-core/lib/type");
+var _base = require("../../base");
+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 AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_UIModule) {
+  function AudioStreamUIModule(_ref) {
+    var _this;
+    var streamControl = _ref.streamControl,
+      userControl = _ref.userControl,
+      deviceStreamStore = _ref.deviceStreamStore;
+    (0, _classCallCheck2["default"])(this, AudioStreamUIModule);
+    _this = _callSuper(this, AudioStreamUIModule);
+    (0, _defineProperty2["default"])(_this, "_handleStreamsAdded", function (roomId, events) {
+      var streams = events.map(function (event) {
+        return event.modifiedStream;
+      });
+      _this._playRemoteAudio(streams);
+    });
+    (0, _defineProperty2["default"])(_this, "_handleStreamsUpdated", function (roomId, events) {
+      var streams = events.map(function (event) {
+        return event.modifiedStream;
+      });
+      _this._playRemoteAudio(streams);
+    });
+    (0, _defineProperty2["default"])(_this, "_handleStreamsRemoved", function (roomId, events) {
+      events.forEach(function (event) {
+        if (event.modifiedStream.owner.userId === _this._userControl.getLocalUser().userId) {
+          return;
+        }
+        _this.logger.info('stop play remote audio', event.modifiedStream.streamId);
+        _this._streamControl.stopPlayRemoteAudioStream(event.modifiedStream.streamId);
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "_playRemoteAudio", function (streams) {
+      var localStreams = _this._streamControl.getStreamsByUserId(_this._userControl.getLocalUser().userId);
+      if (_this._hasPstn(localStreams)) {
+        _this.logger.info('found local PSTN stream, close microphone');
+        // close microphone as audio input and output through mobile phone
+        _this._deviceStreamStore.enableMicrophoneWithStream(false);
+        _this.logger.info('found local PSTN stream, stop play all remote audio');
+        streams.forEach(function (stream) {
+          // stop playing all remote audio streams
+          if (stream.owner.userId !== _this._userControl.getLocalUser().userId) {
+            _this.logger.info('stop play remote audio', stream.streamId);
+            _this._streamControl.stopPlayRemoteAudioStream(stream.streamId);
+          }
+        });
+      } else {
+        streams.forEach(function (stream) {
+          if (stream.owner.userId !== _this._userControl.getLocalUser().userId) {
+            if ((stream.streamType === _type.FcrStreamType.AUDIO || stream.streamType === _type.FcrStreamType.BOTH) && stream.audioSourceState === _type.FcrMediaSourceState.STARTED) {
+              _this.logger.info('start play remote audio', stream.streamId);
+              _this._streamControl.startPlayRemoteAudioStream(stream.streamId);
+            } else {
+              _this.logger.info('stop play remote audio', stream.streamId);
+              _this._streamControl.stopPlayRemoteAudioStream(stream.streamId);
+            }
+          }
+        });
+      }
+    });
+    _this._streamControl = streamControl;
+    _this._userControl = userControl;
+    _this._deviceStreamStore = deviceStreamStore;
+    _this.init();
+    streamControl.addObserver({
+      onStreamsAdded: _this._handleStreamsAdded,
+      onStreamsUpdated: _this._handleStreamsUpdated,
+      onStreamsRemoved: _this._handleStreamsRemoved
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(AudioStreamUIModule, _UIModule);
+  return (0, _createClass2["default"])(AudioStreamUIModule, [{
+    key: "init",
+    value: function init() {
+      var streams = this._streamControl.getStreams();
+      this._playRemoteAudio(Object.values(streams));
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent() {
+      return null;
+    }
+  }, {
+    key: "onUnload",
+    value: function onUnload() {}
+  }, {
+    key: "_hasPstn",
+    value: function _hasPstn(streams) {
+      var _this2 = this;
+      var pstnStream = streams.find(function (stream) {
+        return stream.connectorType === _type.FcrRoomConnectorType.PSTN && stream.owner.userId === _this2._userControl.getLocalUser().userId;
+      });
+      return !!pstnStream;
+    }
+  }]);
+}(_base.UIModule);

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

@@ -0,0 +1,79 @@
+.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;
+}
+
+.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 'agora-edu-core/lib/type';
+export interface MessageBarProps {
+    styles?: CSSProperties;
+    users?: FcrUserInfo[];
+    onTargetChange?: (target: FcrUserInfo) => void;
+    selectedUserId?: string;
+    title?: React.ReactNode;
+}
+export declare const MessageBar: ({ styles, users, selectedUserId, onTargetChange, title, }: React.PropsWithChildren<MessageBarProps>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,125 @@
+"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/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageBar = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.object.to-string.js");
+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 _contex = require("../contex");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+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 _users$find$userName, _users$find;
+  var styles = _ref.styles,
+    _ref$users = _ref.users,
+    users = _ref$users === void 0 ? [] : _ref$users,
+    _ref$selectedUserId = _ref.selectedUserId,
+    selectedUserId = _ref$selectedUserId === void 0 ? _store.USER_ALL : _ref$selectedUserId,
+    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 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)(_contex.StoreContext),
+    chatLevel = _useContext.chatLevel,
+    privateTargetUser = _useContext.privateTargetUser,
+    localIsManager = _useContext.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)(_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') : (_users$find$userName = (_users$find = users.find(function (user) {
+            return user.userId === selectedUserId;
+          })) === null || _users$find === void 0 ? void 0 : _users$find.userName) !== null && _users$find$userName !== void 0 ? _users$find$userName : _store.USER_ALL,
+          icon: _type.FcrIconType.FCR_DROPDOWN,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          },
+          iconTransform: popoverOpened,
+          enable: true,
+          onClick: function onClick() {
+            setPopoverOpened(!popoverOpened);
+          },
+          iconReverse: true
+        })
+      })
+    })]
+  });
+});

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

@@ -0,0 +1,156 @@
+.leave-container {
+  position: relative;
+  padding: 20px;
+  max-height: 368px;
+}
+
+.leave-confirm {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_l);
+
+  font-family: Helvetica Neue;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+
+  cursor: pointer;
+}
+
+.assign-host-search {
+  width: 100%;
+  height: 36px;
+  margin-top: 10px;
+}
+
+.assign-host-border {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 0px;
+  margin-top: 10px;
+  border-top: 1px solid var(--fcr_ui_scene_line1, rgba(74, 76, 95, 0.5));
+}
+
+.assign-host-body {
+  margin-top: 10px;
+}
+
+.candidate-list {
+  padding-right: 5px;
+}
+
+.candidate-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 215px !important;
+}
+
+.candidate-container-selected {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 215px !important;
+
+  background: var(--fcr_web_ui_scene_hover);
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.candidate-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: var(--fcr_cornerradius_s);
+
+  background: var(--for_head5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 5px;
+  /* text */
+  color: var(--fcr_ui_scene_white10);
+  font-family: Verdana;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 14px;
+}
+
+.candidate-avatar-all {
+  background: var(--for_head1);
+}
+
+.candidate {
+  /* text */
+  font-family: Verdana;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 12px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  max-width: calc(215px - 26px - 16px);
+  height: 20px;
+  margin: 0 3px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.candidate:first-child,
+.candidate:nth-child(2) {
+  flex-grow: 1;
+}
+
+.candidate-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.candidate-select {
+  width: 24px;
+  height: 24px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-left: auto;
+}
+
+.candidate-info .fcr-text-bubble {
+  color: var(--fcr_ui_scene_inverse);
+  padding: 2px 5px;
+  margin-top: 4px;
+  border-radius: 3px;
+  font-weight: 400;
+}
+
+.candidate-info .host {
+  background: var(--fcr_ui_scene_icontext5);
+}
+
+.candidate-info .cohost {
+  background: #83bc53;
+}
+
+.candidate-highlight {
+  background: var(--fcr_ui_scene_ramp_brand3);
+}
+
+.fcr-no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.fcr-no-data span {
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 14px;
+  font-family: PingFang HK;
+  color: var(--fcr_ui_scene_icontext2);
+}

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

@@ -0,0 +1,12 @@
+import './index.css';
+import { FcrUserInfo } from 'agora-edu-core/lib/type';
+interface ChatSelectProps {
+    type: 'assign-host' | 'private-chat';
+    title?: React.ReactNode;
+    bottomBar?: React.ReactNode;
+    candidateUsers: FcrUserInfo[];
+    selectedUid: string;
+    onSelect: (user: FcrUserInfo) => void;
+}
+export declare const ChatSelect: ({ type, title, bottomBar, candidateUsers: users, selectedUid, onSelect }: ChatSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};