fcr-ui-scene 3.3.0 → 3.3.1

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-language/index.d.ts

@@ -0,0 +1,11 @@
+import { FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+import './index.css';
+import { InitInterpreterItemModelType } from '../../../../constant';
+export declare const OptionItem: (props: {
+    model: FcrLanguage;
+}) => import("react/jsx-runtime").JSX.Element;
+interface PickLanguageProps {
+    model: InitInterpreterItemModelType;
+}
+declare const _default: (props: PickLanguageProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-language/index.js

@@ -0,0 +1,141 @@
+"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["default"] = exports.OptionItem = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _select = require("agora-ui-foundation/lib/components/select");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _react = require("react");
+var _context = require("../../../../context");
+var _mobxReact = require("mobx-react");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+require("./index.css");
+var _useLanguageConfig = require("./useLanguageConfig");
+var _constant = require("../../../../constant");
+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 OptionItem = exports.OptionItem = (0, _mobxReact.observer)(function (props) {
+  var model = props.model;
+  var option = (0, _useLanguageConfig.useLanguageConfig)()(model);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-simultaneous-interpretation__pick-Language-container-select-option",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      className: "fcr-simultaneous-interpretation__pick-Language-container-select-option-img",
+      src: option.imgSrc,
+      alt: "",
+      style: {
+        width: 20,
+        height: 20
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-simultaneous-interpretation__pick-Language-container-select-option-text",
+      children: option.text
+    })]
+  });
+});
+var PickLanguage = function PickLanguage(props) {
+  var model = props.model;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    updateInterpreterUsers = _useContext.updateInterpreterUsers,
+    interpreterState = _useContext.interpreterState,
+    interpreterUsersEditState = _useContext.interpreterUsersEditState,
+    languageList = _useContext.languageList;
+  var handleChange = function handleChange(data) {
+    updateInterpreterUsers(_objectSpread(_objectSpread({}, model), data));
+  };
+  var targetValue = model[_constant.InterpreterItemType.INPUT_LANGUAGE];
+  var sourceValue = model[_constant.InterpreterItemType.OUTPUT_LANGUAGE];
+  var targetOptions = (0, _react.useMemo)(function () {
+    return languageList.map(function (ele) {
+      return {
+        text: ele,
+        value: ele,
+        disabled: ele === sourceValue,
+        render: function render(option) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, {
+            model: ele
+          });
+        }
+      };
+    });
+  }, [languageList, sourceValue]);
+  var sourceOptions = (0, _react.useMemo)(function () {
+    return languageList.map(function (ele) {
+      return {
+        text: ele,
+        value: ele,
+        disabled: ele === targetValue,
+        render: function render(option) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, {
+            model: ele
+          });
+        }
+      };
+    });
+  }, [languageList, targetValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-simultaneous-interpretation__pick-Language-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+      className: "fcr-simultaneous-interpretation__pick-Language-container-select",
+      options: targetOptions,
+      disabled: !interpreterUsersEditState && interpreterState,
+      value: targetValue,
+      showSearch: true,
+      onChange: function onChange(value) {
+        handleChange((0, _defineProperty2["default"])({}, _constant.InterpreterItemType.INPUT_LANGUAGE, value));
+      },
+      placeholder: '语言' // 请选择设备
+      ,
+      styleType: "white"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      placement: "top",
+      content: "2\u79CD\u8BED\u8A00\u90FD\u9700\u652F\u6301\u8F93\u51FA,\u975E\u5355\u5411\u8F93\u51FA",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_TRANSLANGUAGE,
+          size: 24,
+          className: "fcr-simultaneous-interpretation__pick-Language-container-icon"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+      showSearch: true,
+      className: "fcr-simultaneous-interpretation__pick-Language-container-select",
+      options: sourceOptions,
+      value: sourceValue,
+      onChange: function onChange(value) {
+        handleChange((0, _defineProperty2["default"])({}, _constant.InterpreterItemType.OUTPUT_LANGUAGE, value));
+      },
+      placeholder: '语言' // 请选择设备
+      ,
+      styleType: "white",
+      disabled: !interpreterUsersEditState && interpreterState
+    })]
+  });
+};
+var _default = exports["default"] = (0, _mobxReact.observer)(PickLanguage);

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig/index.d.ts

@@ -0,0 +1,11 @@
+import { FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+export interface LanguageConfig {
+    value: FcrLanguage;
+    imgSrc: string;
+    text: string;
+    abbr: string;
+}
+export declare const languageConfigList: {
+    [key in FcrLanguage]: LanguageConfig;
+};
+export declare const useLanguageConfig: () => (key: FcrLanguage) => LanguageConfig;

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig/index.js

@@ -0,0 +1,119 @@
+"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.useLanguageConfig = exports.languageConfigList = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _types = require("fcr-core/lib/room-control/interpreter-control/types");
+var _fcr_cn = _interopRequireDefault(require("./images/fcr_cn.png"));
+var _fcr_en = _interopRequireDefault(require("./images/fcr_en.png"));
+var _fcr_jp = _interopRequireDefault(require("./images/fcr_jp.png"));
+var _fcr_ko = _interopRequireDefault(require("./images/fcr_ko.png"));
+var _fcr_de = _interopRequireDefault(require("./images/fcr_de.png"));
+var _fcr_fr = _interopRequireDefault(require("./images/fcr_fr.png"));
+var _fcr_ru = _interopRequireDefault(require("./images/fcr_ru.png"));
+var _fcr_pt = _interopRequireDefault(require("./images/fcr_pt.png"));
+var _fcr_es = _interopRequireDefault(require("./images/fcr_es.png"));
+var _fcr_it = _interopRequireDefault(require("./images/fcr_it.png"));
+var _fcr_ar = _interopRequireDefault(require("./images/fcr_ar.png"));
+var _fcr_id = _interopRequireDefault(require("./images/fcr_id.png"));
+var _fcr_hi = _interopRequireDefault(require("./images/fcr_hi.png"));
+var _fcr_th = _interopRequireDefault(require("./images/fcr_th.png"));
+var _fcr_vi = _interopRequireDefault(require("./images/fcr_vi.png"));
+var _fcr_ms = _interopRequireDefault(require("./images/fcr_ms.png"));
+var _fcr_tr = _interopRequireDefault(require("./images/fcr_tr.png"));
+var _languageConfigList;
+var languageConfigList = exports.languageConfigList = (_languageConfigList = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_languageConfigList, _types.FcrLanguage.ZH, {
+  value: _types.FcrLanguage.ZH,
+  imgSrc: _fcr_cn["default"],
+  text: '中文',
+  abbr: '中'
+}), _types.FcrLanguage.EN, {
+  value: _types.FcrLanguage.EN,
+  imgSrc: _fcr_en["default"],
+  text: 'English',
+  abbr: 'EN'
+}), _types.FcrLanguage.JP, {
+  value: _types.FcrLanguage.JP,
+  imgSrc: _fcr_jp["default"],
+  text: '日本語',
+  abbr: 'JP'
+}), _types.FcrLanguage.KO, {
+  value: _types.FcrLanguage.KO,
+  imgSrc: _fcr_ko["default"],
+  text: '한국어',
+  abbr: 'KO'
+}), _types.FcrLanguage.DE, {
+  value: _types.FcrLanguage.DE,
+  imgSrc: _fcr_de["default"],
+  text: 'Deutsch',
+  abbr: 'DE'
+}), _types.FcrLanguage.FR, {
+  value: _types.FcrLanguage.FR,
+  imgSrc: _fcr_fr["default"],
+  text: 'français',
+  abbr: 'EN'
+}), _types.FcrLanguage.RU, {
+  value: _types.FcrLanguage.RU,
+  imgSrc: _fcr_ru["default"],
+  text: 'русский',
+  abbr: 'EN'
+}), _types.FcrLanguage.PT, {
+  value: _types.FcrLanguage.PT,
+  imgSrc: _fcr_pt["default"],
+  text: 'português',
+  abbr: 'PT'
+}), _types.FcrLanguage.ES, {
+  value: _types.FcrLanguage.ES,
+  imgSrc: _fcr_es["default"],
+  text: 'español',
+  abbr: 'ES'
+}), _types.FcrLanguage.IT, {
+  value: _types.FcrLanguage.IT,
+  imgSrc: _fcr_it["default"],
+  text: 'italiano',
+  abbr: 'IT'
+}), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_languageConfigList, _types.FcrLanguage.AR, {
+  value: _types.FcrLanguage.AR,
+  imgSrc: _fcr_ar["default"],
+  text: 'العربية',
+  abbr: 'AR'
+}), _types.FcrLanguage.ID, {
+  value: _types.FcrLanguage.ID,
+  imgSrc: _fcr_id["default"],
+  text: 'BahasaIndonesia',
+  abbr: 'ID'
+}), _types.FcrLanguage.HI, {
+  value: _types.FcrLanguage.HI,
+  imgSrc: _fcr_hi["default"],
+  text: 'हिन्दी	',
+  abbr: 'HI'
+}), _types.FcrLanguage.TH, {
+  value: _types.FcrLanguage.TH,
+  imgSrc: _fcr_th["default"],
+  text: 'ภาษาไทย',
+  abbr: 'TH'
+}), _types.FcrLanguage.VI, {
+  value: _types.FcrLanguage.VI,
+  imgSrc: _fcr_vi["default"],
+  text: 'Tiếng Việt',
+  abbr: 'VI'
+}), _types.FcrLanguage.MS, {
+  value: _types.FcrLanguage.MS,
+  imgSrc: _fcr_ms["default"],
+  text: 'Bahasa Melayu',
+  abbr: 'MS'
+}), _types.FcrLanguage.TR, {
+  value: _types.FcrLanguage.TR,
+  imgSrc: _fcr_tr["default"],
+  text: 'español',
+  abbr: 'Türkçe'
+}));
+var useLanguageConfig = exports.useLanguageConfig = function useLanguageConfig() {
+  return function (key) {
+    return languageConfigList[key];
+  };
+};

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-user/index.css

@@ -0,0 +1,41 @@
+.fcr-simultaneous-interpretation__select-user {
+  width: 183px;
+  height: 32px;
+}
+
+.fcr-simultaneous-interpretation__select-user .fcr-select__options {
+  max-height: 340px;
+  overflow-y: overlay;
+}
+
+.fcr-simultaneous-interpretation__select-user-options-item {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+.fcr-simultaneous-interpretation__select-user-options-item:hover
+  .fcr-simultaneous-interpretation__select-user-options-item-user-name {
+  font-weight: 800;
+}
+.fcr-simultaneous-interpretation__select-user-options-item-avatar {
+  margin-right: 8px;
+  text-align: center;
+}
+
+.fcr-simultaneous-interpretation__select-user-options-item-avatar .fcr-avatar {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+.fcr-simultaneous-interpretation__select-user-options-item-user {
+  font-size: 13px;
+  color: var(--fcr_ui_scene_icontext1);
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+
+.fcr-simultaneous-interpretation__select-user-options-item-user-name {
+  /* min-width: 40px; */
+  /* text-align: center; */
+}
+.fcr-simultaneous-interpretation__select-user-options-item-user-role {
+}

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-user/index.d.ts

@@ -0,0 +1,12 @@
+import { FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
+import './index.css';
+import { InitInterpreterItemModelType } from '../../../../constant';
+type InterpreterItemPropertyKeys = keyof FcrInterpreterUserInfo;
+export type ObjectSatisfyingAnyInterpreterItemProperty = {
+    [K in InterpreterItemPropertyKeys]?: FcrInterpreterUserInfo[K];
+};
+interface PickUserProps {
+    model: InitInterpreterItemModelType;
+}
+declare const _default: (props: PickUserProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/modules/Interpreter/interpreter-list/interpreter-item/components/pick-user/index.js

@@ -0,0 +1,118 @@
+"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/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");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.some.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.map.js");
+require("core-js/modules/esnext.async-iterator.some.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.iterator.some.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _select = require("agora-ui-foundation/lib/components/select");
+var _context = require("../../../../context");
+var _mobxReact = require("mobx-react");
+var _i18n = require("../../../../../../hooks/i18n");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _constant = require("../../../../constant");
+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 OptionItem = (0, _mobxReact.observer)(function (props) {
+  var model = props.model;
+  var getUserRole = (0, _i18n.useUserRoleI18n)();
+  var userRole = getUserRole(model.userRole);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-simultaneous-interpretation__select-user-options-item",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-simultaneous-interpretation__select-user-options-item-avatar'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+        size: 24,
+        nickName: model.userName,
+        textSize: 13
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-simultaneous-interpretation__select-user-options-item-user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-simultaneous-interpretation__select-user-options-item-user-name",
+        children: model.userName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-simultaneous-interpretation__select-user-options-item-user-role",
+        children: "(".concat(userRole, ")")
+      })]
+    })]
+  });
+});
+var PickUser = function PickUser(props) {
+  var _initUsers$find;
+  var model = props.model;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    updateInterpreterUsers = _useContext.updateInterpreterUsers,
+    interpreterState = _useContext.interpreterState,
+    interpreterUsersEditState = _useContext.interpreterUsersEditState,
+    initUsers = _useContext.initUsers,
+    localInterpreterUsers = _useContext.localInterpreterUsers;
+  var handleChange = function handleChange(data) {
+    updateInterpreterUsers(_objectSpread(_objectSpread({}, model), data));
+  };
+  var options = (0, _react.useMemo)(function () {
+    return initUsers.map(function (ele) {
+      var isExist = localInterpreterUsers.some(function (item) {
+        return item[_constant.InterpreterItemType.ID] === ele[_constant.InterpreterItemType.ID];
+      });
+      return {
+        text: ele[_constant.InterpreterItemType.INTERPRETER],
+        value: ele[_constant.InterpreterItemType.ID],
+        render: function render(option) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, {
+            model: ele
+          });
+        },
+        disabled: ele.isOffLine || isExist
+      };
+    });
+  }, [initUsers, localInterpreterUsers]);
+  var value = model[_constant.InterpreterItemType.ID];
+  var isOffLine = (_initUsers$find = initUsers.find(function (ele) {
+    return ele[_constant.InterpreterItemType.ID] === value;
+  })) === null || _initUsers$find === void 0 ? void 0 : _initUsers$find.isOffLine;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+    className: "fcr-simultaneous-interpretation__select-user",
+    showSearch: true,
+    options: options,
+    value: value,
+    onChange: function onChange(value) {
+      handleChange((0, _defineProperty2["default"])({}, _constant.InterpreterItemType.ID, value));
+    },
+    disabled: !interpreterUsersEditState && interpreterState,
+    placeholder: '搜索名称',
+    styleType: "white",
+    tag: isOffLine ? '离会' : ''
+  });
+};
+var _default = exports["default"] = (0, _mobxReact.observer)(PickUser);

package/lib/modules/Interpreter/interpreter-list/interpreter-item/index.css

@@ -0,0 +1,34 @@
+.fcr-simultaneous-interpretation__interpreter-Item-container {
+  height: 102px;
+  margin-top: 10px;
+  padding: 16px 15px 20px;
+  background: var(--fcr_mobile_ui_scene_color_popup_block5);
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+}
+
+.fcr-simultaneous-interpretation__interpreter-Item-container-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 12px;
+}
+.fcr-simultaneous-interpretation__interpreter-Item-container-top-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--fcr_ui_scene_icontext1);
+}
+/* .fcr-simultaneous-interpretation__interpreter-Item-container-top-icon {
+   
+ }   */
+.fcr-simultaneous-interpretation__interpreter-Item-container-config {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 22px;
+  width: 100%;
+}

package/lib/modules/Interpreter/interpreter-list/interpreter-item/index.d.ts

@@ -0,0 +1,8 @@
+import './index.css';
+import { InitInterpreterItemModelType } from '../../constant';
+interface InterpreterItemProps {
+    model: InitInterpreterItemModelType;
+    index: number;
+}
+declare const _default: (props: InterpreterItemProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/modules/Interpreter/interpreter-list/interpreter-item/index.js

@@ -0,0 +1,65 @@
+"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["default"] = void 0;
+require("core-js/modules/es.array.concat.js");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _pickUser = _interopRequireDefault(require("./components/pick-user"));
+var _pickLanguage = _interopRequireDefault(require("./components/pick-language"));
+var _react = require("react");
+var _context = require("../../context");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+require("./index.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var InterpreterItem = function InterpreterItem(props) {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    deleteInterpreterUsers = _useContext.deleteInterpreterUsers,
+    interpreterUsersEditState = _useContext.interpreterUsersEditState,
+    localInterpreterUsers = _useContext.localInterpreterUsers,
+    interpreterState = _useContext.interpreterState;
+  var model = props.model,
+    index = props.index;
+  var t = (0, _i18n.useI18n)();
+  var isShow = localInterpreterUsers.length > 1 && (interpreterUsersEditState || !interpreterState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-simultaneous-interpretation__interpreter-Item-container'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-simultaneous-interpretation__interpreter-Item-container-top",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-simultaneous-interpretation__interpreter-Item-container-top-title",
+        children: "".concat(t('fmt_ai_transcriptions_setting_label_translator')).concat(index + 1)
+      }), isShow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        mouseEnterDelay: 0,
+        trigger: "hover",
+        placement: "top",
+        content: "\u5220\u9664",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            className: "fcr-simultaneous-interpretation__interpreter-Item-container-top-icon",
+            type: _type.FcrIconType.FCR_DELETE4,
+            onClick: function onClick() {
+              deleteInterpreterUsers(model);
+            },
+            size: 20
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-simultaneous-interpretation__interpreter-Item-container-config",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_pickUser["default"], {
+        model: model
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_pickLanguage["default"], {
+        model: model
+      })]
+    })]
+  });
+};
+var _default = exports["default"] = (0, _mobxReact.observer)(InterpreterItem);