fcr-ui-scene 3.4.2 → 3.4.4

package/lib/electron/app.js

@@ -35,6 +35,7 @@ var hookApp = exports.hookApp = function hookApp(app) {
   var isWindowDestroyed = function isWindowDestroyed(window) {
     return window.isDestroyed();
   };
+  app.commandLine.appendSwitch('ignore-certificate-errors');
   var appUserModelId = process.argv.find(function (arg) {
     return arg.startsWith('--app-user-model-id=');
   });

package/lib/modules/action-bar/action-bar-collapes-items.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import './index.css';
+import { AppItemProps } from './components/apps/app-item';
 interface Item {
     name: string;
     width: number;
@@ -13,5 +14,7 @@ type ActionBarCollapseContext = {
 };
 export declare const actionBarCollapseContext: import("react").Context<ActionBarCollapseContext>;
 export declare const midActionOrderMap: import("react/jsx-runtime").JSX.Element[];
-export declare const ActionBarCollapseItems: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionBarCollapseItems: ({ children, appItemOptions }: PropsWithChildren<{
+    appItemOptions: AppItemProps[];
+}>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/modules/action-bar/action-bar-collapes-items.js

@@ -33,17 +33,24 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _mobx = require("mobx");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _chat = require("./chat");
-var _context = require("./context");
-var _more = require("./more");
-var _participants = require("./participants");
-var _record = require("./record");
-var _liveStreaming = require("./live-streaming");
-var _screenShare = require("./screen-share");
-var _security = require("./security");
-var _settings = require("./settings");
+var _chat = require("./components/chat");
+var _store = require("./store");
+var _more = require("./components/more");
+var _participants = require("./components/participants");
+var _record = require("./components/record");
+var _screenShare = require("./components/screen-share");
+var _security = require("./components/security");
+var _settings = require("./components/settings");
+var _apps = require("./components/apps");
 require("./index.css");
+var _triggerOutputLanguageRoom = require("./trigger-output-language-room");
 var _jsxRuntime = require("react/jsx-runtime");
+// import { LiveStreaming } from './components/live-streaming';
+var MidActionOrderMapKey = /*#__PURE__*/function (MidActionOrderMapKey) {
+  MidActionOrderMapKey["SwitchOutputLanguageRoomKey"] = "SwitchOutputLanguageRoom";
+  MidActionOrderMapKey["Apps"] = "Apps";
+  return MidActionOrderMapKey;
+}(MidActionOrderMapKey || {});
 var actionBarCollapseContext = exports.actionBarCollapseContext = /*#__PURE__*/(0, _react.createContext)({
   setItem: function setItem() {},
   visibleList: [],
@@ -69,19 +76,24 @@ var midActionOrderMap = exports.midActionOrderMap = [/*#__PURE__*/(0, _jsxRuntim
 // <Board id="Whiteboard" key="Whiteboard" order={6} />,
 // <BreakoutRoom id="BreakoutRoom" key="BreakoutRoom" order={7} />,
 // <Respond id="Respond" key="Respond" order={8} />,
+// <LiveStreaming id="LiveStreaming" key="LiveStreaming" order={9} />,
 (0, _jsxRuntime.jsx)(_settings.Settings, {
   id: "Settings",
-  order: 9
-}, "Settings"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_liveStreaming.LiveStreaming, {
-  id: "LiveStreaming",
   order: 10
-}, "LiveStreaming"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
-  id: "More",
+}, "Settings"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_triggerOutputLanguageRoom.TriggerOutputLanguageRoom, {
+  id: MidActionOrderMapKey.SwitchOutputLanguageRoomKey,
   order: 11
+}, MidActionOrderMapKey.SwitchOutputLanguageRoomKey), /*#__PURE__*/(0, _jsxRuntime.jsx)(_apps.Apps, {
+  id: MidActionOrderMapKey.Apps,
+  order: 12
+}, MidActionOrderMapKey.Apps), /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
+  id: "More",
+  order: 13
 }, "More")];
 var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.observer)(function (_ref) {
-  var children = _ref.children;
-  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+  var children = _ref.children,
+    appItemOptions = _ref.appItemOptions;
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     hasStartScreenSharePermission = _useContext.hasStartScreenSharePermission,
     hasStartLiveStreamingPermission = _useContext.hasStartLiveStreamingPermission,
     toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
@@ -90,7 +102,8 @@ var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.obs
     hasEnableStartAudioPermission = _useContext.hasEnableStartAudioPermission,
     hasEnableChangeNamePermission = _useContext.hasEnableChangeNamePermission,
     hasEnableStartVideoPermission = _useContext.hasEnableStartVideoPermission,
-    hasLockRoomPermission = _useContext.hasLockRoomPermission;
+    hasLockRoomPermission = _useContext.hasLockRoomPermission,
+    interpreterState = _useContext.interpreterState;
   var _useState = (0, _react.useState)(function () {
       return _mobx.observable.map();
     }),
@@ -119,14 +132,18 @@ var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.obs
         //   return hasStartScreenSharePermission;
         case 'Security':
           return hasSecurityPermissions;
-        case 'LiveStreaming':
-          return hasStartLiveStreamingPermission;
+        // case 'LiveStreaming':
+        //   return hasStartLiveStreamingPermission;
+        case MidActionOrderMapKey.SwitchOutputLanguageRoomKey:
+          return interpreterState;
+        case MidActionOrderMapKey.Apps:
+          return appItemOptions.length > 0;
         default:
           return true;
       }
     };
     return Array.from(items.values()).filter(filter);
-  }, [hasStartScreenSharePermission, hasStartLiveStreamingPermission, hasSecurityPermissions, itemKeys]);
+  }, [hasStartScreenSharePermission, hasStartLiveStreamingPermission, hasSecurityPermissions, itemKeys, interpreterState, appItemOptions]);
   // if container width is not enough, collapse the items by order
   // if container width is enough, show all items
   // detect container width change by resize observer
@@ -173,7 +190,7 @@ var ActionBarCollapseItems = exports.ActionBarCollapseItems = (0, _mobxReact.obs
         resizeObserver.disconnect();
       };
     }
-  }, [itemKeys, filteredItems]);
+  }, [itemKeys, filteredItems, interpreterState]);
   var collapseList = filteredItems.filter(function (item) {
     return !visibleList.includes(item.name);
   }).map(function (item) {

package/lib/modules/action-bar/components/apps/useWidgetList.d.ts

@@ -0,0 +1,7 @@
+declare const useWidgetList: (closeActionBarItemWithPopover?: (visible: boolean) => void) => {
+    name: string;
+    onClick: () => void;
+    imgSrc: string;
+    permission: boolean;
+}[];
+export default useWidgetList;

package/lib/modules/action-bar/components/apps/useWidgetList.js

@@ -0,0 +1,43 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.to-string.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/web.dom-collections.for-each.js");
+var _react = require("react");
+var _store = require("../../store");
+var useWidgetList = function useWidgetList(closeActionBarItemWithPopover) {
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    registeredWidgetConfigs = _useContext.registeredWidgetConfigs,
+    openWidget = _useContext.openWidget;
+  var _onClick = function onClick(widgetId) {
+    openWidget(widgetId);
+    closeActionBarItemWithPopover && closeActionBarItemWithPopover(false);
+  };
+  return (0, _react.useMemo)(function () {
+    var widgetConfigs = [];
+    registeredWidgetConfigs.forEach(function (widgetConfig) {
+      widgetConfigs.push(widgetConfig);
+    });
+    return widgetConfigs.map(function (widgetConfig) {
+      return {
+        name: widgetConfig.id,
+        onClick: function onClick() {
+          _onClick(widgetConfig.id);
+        },
+        imgSrc: widgetConfig.icon,
+        permission: true
+      };
+    });
+  }, [registeredWidgetConfigs]);
+};
+var _default = exports["default"] = useWidgetList;

package/lib/modules/action-bar/components/leave/assign-host.d.ts

@@ -1,3 +1,10 @@
 import './index.css';
-import { AssignHostProps } from '../../types';
+import { FcrUserInfo } from 'fcr-core/lib/type';
+interface AssignHostProps {
+    remoteUsers: FcrUserInfo[];
+    assignHost: (user: FcrUserInfo) => void;
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    handleKeepConnect: () => void;
+}
 export declare const AssignHost: (props: AssignHostProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/action-bar/components/leave/assign-host.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 require("./index.css");
-var _chatSelect = require("../../../chat/components/chat-select");
+var _chatSelect = require("../../../chat/chat-select");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props) {

package/lib/modules/action-bar/components/leave/leave-meeting.d.ts

@@ -1,3 +1,18 @@
 import './index.css';
-import { LeaveMeetingProps } from '../../types';
+import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
+interface LeaveMeetingProps {
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    end: () => void;
+    leave: () => void;
+    isLocked: boolean;
+    keepPhoneAudioConnection: () => void;
+    localUserRole: FcrUserRole;
+    remoteUsers: FcrUserInfo[];
+    hasAssignHostBeforeLeavingPermission: boolean;
+    hasEndRoomPermission: boolean;
+    isPstnUser: boolean;
+    assignHost: (user: FcrUserInfo) => void;
+    setHeight?: () => void;
+}
 export declare const LeaveMeeting: import("react").ForwardRefExoticComponent<LeaveMeetingProps & import("react").RefAttributes<unknown>>;
+export {};

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

@@ -9,13 +9,13 @@ 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 _mobxReact = require("mobx-react");
-var _device = require("./device");
 var _react = require("react");
-var _context = require("./context");
+var _store = require("./store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _microphone = require("../components/device-control/components/microphone");
 var _jsxRuntime = require("react/jsx-runtime");
 var SmallerActionbar = exports.SmallerActionbar = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.ActionBarContext),
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     microphoneEnabled = _useContext.microphoneEnabled,
     enableMicrophone = _useContext.enableMicrophone,
     toggleFold = _useContext.toggleFold;
@@ -43,8 +43,8 @@ var SmallerActionbar = exports.SmallerActionbar = (0, _mobxReact.observer)(funct
         onClick: function onClick() {
           return enableMicrophone(!microphoneEnabled);
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_device.AudioRecordinDeviceIcon, {
-          micEnabled: microphoneEnabled
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphone.MicrophoneControl, {
+          showTitle: false
         })
       })
     })]

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

@@ -25,6 +25,8 @@
 
 .fcr-message-bar > span:first-child {
   margin-right: 4px;
+  font-size: 12px;
+  font-weight: 300;
 }
 
 .fcr-message-bar > .fcr-select-wrapper {
@@ -77,3 +79,7 @@
 .fcr-msg-bar-break-max-width {
   max-width: 75px;
 }
+
+.fcr-message-bar .fcr-text-bubble {
+  font-weight: 300;
+}

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

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

@@ -1,7 +1,6 @@
 "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");
@@ -9,9 +8,7 @@ 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/esnext.async-iterator.filter.js");
 require("core-js/modules/esnext.async-iterator.for-each.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");
@@ -19,11 +16,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MessageBar = void 0;
-require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
 require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.filter.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");
@@ -36,18 +33,16 @@ 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 _users$filter, _selectedUser$userId, _selectedUser$userNam;
   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,
+    selectedUser = _ref.selectedUser,
     onTargetChange = _ref.onTargetChange,
     title = _ref.title;
   var t = (0, _i18n.useI18n)();
@@ -61,9 +56,16 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     popoverOpened = _useState4[0],
     setPopoverOpened = _useState4[1];
+  var hasParticipant = users === null || users === void 0 || (_users$filter = users.filter(function (user) {
+    return user.userId !== _store.USER_ALL;
+  })) === null || _users$filter === void 0 ? void 0 : _users$filter.length;
   var onPopoverChanged = function onPopoverChanged(visible) {
+    if (!hasParticipant) {
+      return;
+    }
     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);
@@ -71,10 +73,14 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
   (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;
+  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),
@@ -99,32 +105,38 @@ var MessageBar = exports.MessageBar = (0, _mobxReact.observer)(function (_ref) {
         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);
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+          styles: {
+            padding: '4px 1px 4px 4px',
+            borderRadius: 6,
+            backgroundColor: 'var(--fcr_web_ui_scene_fill2)'
           },
-          iconReverse: true
+          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: !hasParticipant,
+            onClick: function onClick() {
+              if (!hasParticipant) {
+                return;
+              }
+              setPopoverOpened(!popoverOpened);
+            },
+            iconReverse: true
+          })
         })
       })
     })]

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

@@ -1,9 +1,15 @@
 .leave-container {
   position: relative;
-  padding: 20px;
+  padding: 8px 20px 20px;
   max-height: 368px;
 }
 
+.fcr-dialog-body .leave-container {
+  position: relative;
+  max-height: 368px;
+  padding: 0px;
+}
+
 .leave-confirm {
   width: 100%;
   height: 36px;
@@ -51,6 +57,7 @@
   align-items: center;
   cursor: pointer;
   width: 215px !important;
+  border-radius: var(--fcr_cornerradius_l);
 }
 
 .candidate-container-selected {
@@ -58,31 +65,37 @@
   align-items: center;
   cursor: pointer;
   width: 215px !important;
-
+  border-radius: var(--fcr_cornerradius_l);
+}
+.candidate-container-selected:hover,
+.candidate-container:hover {
   background: var(--fcr_web_ui_scene_hover);
-  border-radius: var(--fcr_cornerradius_s);
 }
 
 .candidate-avatar {
-  width: 26px;
-  height: 26px;
+  width: 32px;
+  height: 32px;
   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;
+  margin-right: 5px;
+}
+.candidate-avatar .fcr-avatar {
+  border-radius: var(--fcr_cornerradius_m);
 }
 
 .candidate-avatar-all {
   background: var(--for_head1);
+  width: 32px;
+  height: 32px;
 }
 
 .candidate {
@@ -152,6 +165,13 @@
   flex-direction: column;
 }
 
+.fcr-no-data img {
+  margin-top: 20px;
+  width: 50%;
+  object-fit: contain;
+  margin-bottom: 20px;
+}
+
 .fcr-no-data span {
   font-weight: 400;
   font-size: 13px;

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

@@ -1,5 +1,5 @@
 import './index.css';
-import { FcrUserInfo } from 'agora-edu-core/lib/type';
+import { FcrUserInfo } from 'fcr-core/lib/type';
 interface ChatSelectProps {
     type: 'assign-host' | 'private-chat';
     title?: React.ReactNode;

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

@@ -1,11 +1,21 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.for-each.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/esnext.async-iterator.for-each.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.ChatSelect = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.includes.js");
@@ -28,7 +38,7 @@ var _mobxReact = require("mobx-react");
 var _react = require("react");
 require("./index.css");
 var _reactVirtualized = require("react-virtualized");
-var _type2 = require("agora-edu-core/lib/type");
+var _type2 = require("fcr-core/lib/type");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _store = require("../store");
 var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
@@ -36,6 +46,8 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _fcr_defaultpage = _interopRequireDefault(require("../../../../public/assets/fcr_defaultpage.png"));
 var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
 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; }
 function highlightMatches(str, matchStr) {
   var result = [];
   var matchLen = matchStr.length;
@@ -104,7 +116,9 @@ var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: selectedUid === users[index].userId ? 'candidate-container-selected' : 'candidate-container',
-      style: style,
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        pointerEvents: 'all'
+      }),
       onClick: function onClick(_) {
         var user = filterUsers[index];
         onSelect(user);
@@ -142,11 +156,11 @@ var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
             style: {
               color: (0, _helper.getNameColor)(datum.userName)
             },
-            children: highlightMatches(datum.userName, filterKey).map(function (value) {
+            children: highlightMatches(datum.userName, filterKey).map(function (value, i) {
               return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: value !== null && value !== void 0 && value.isHighlight ? 'candidate-highlight' : '',
                 children: value.data
-              });
+              }, "".concat(i));
             })
           }), datum.userId !== _store.USER_ALL && (datum.userRole === _type2.FcrUserRole.COHOST || datum.userRole === _type2.FcrUserRole.HOST) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
             txt: t(datum.userRole === _type2.FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost'),

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

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