fcr-ui-scene 3.3.0 → 3.4.0

package/lib/modules/action-bar/switch-input-language-room/index.css

@@ -0,0 +1,86 @@
+.switch-language-channels-bar {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--fcr_ui_scene_white8);
+  border-radius: 30px;
+  padding: 5px;
+}
+.switch-language-channels-action {
+  /* width: 50%; */
+  height: 100%;
+  padding: 3px;
+}
+.switch-language-channels-action-bg {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 8.5px 19.5px;
+}
+
+.switch-language-channels-action-icon {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: rgba(63, 59, 83, 1);
+}
+
+.switch-language-channels-action__checked {
+  border-radius: 25px;
+  border: 1px solid var(--fcr_ui_scene_card3);
+  border-radius: 25px;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-bg {
+  border-radius: 25px;
+  background: linear-gradient(
+    180deg,
+    #00cae0 0%,
+    #15d5ea 4.76%,
+    #6ae7f5 8.48%,
+    #64e8f7 25.6%,
+    #64e8f7 48%,
+    #00cae0 77.38%,
+    #00cae0 100%
+  );
+  box-shadow: 0px 4px 4px 0px rgba(4, 173, 191, 1) inset;
+}
+.switch-language-channels-action__checked .switch-language-channels-action-icon {
+  background: rgba(217, 217, 217, 1);
+}
+.switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_black10);
+  font-size: 20px;
+  margin-left: 8px;
+}
+
+.switch-language-channels-action__checked .switch-language-channels-action-text {
+  color: var(--fcr_ui_scene_white10);
+}
+.switch-language-channels-guide-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.switch-language-channels-guide-content-icon {
+  height: 32px;
+  width: 32px;
+  border-radius: 16px;
+  background: var(--fcr_ui_scene_card3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 12px;
+}
+.switch-language-channels-guide-content-text {
+  width: 200px;
+  line-height: 19.5px;
+  font-size: 13px;
+}
+
+.switch-language-loading {
+  border-radius: 30px;
+}

package/lib/modules/action-bar/switch-input-language-room/index.d.ts

@@ -0,0 +1,16 @@
+import { FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+import './index.css';
+interface SwitchInputLanguageRoomProps {
+}
+export declare enum OpeneStateType {
+    CLOSE = 0,
+    OPEN = 1
+}
+export interface OptionsType {
+    label: string;
+    imgSrc: string;
+    value: FcrLanguage;
+    openeState: OpeneStateType;
+}
+export declare const SwitchInputLanguageRoom: (props: SwitchInputLanguageRoomProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,236 @@
+"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.SwitchInputLanguageRoom = exports.OpeneStateType = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.map.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.find.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _reactRnd = require("react-rnd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _store = require("../store");
+var _useLanguageConfig = require("../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _guideTooltip = require("../switch-output-language-room/guide-tooltip");
+var _loadingWrapper = require("../../interpreter/loading-wrapper");
+require("./index.css");
+var _constant = require("../../interpreter/constant");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var OpeneStateType = exports.OpeneStateType = /*#__PURE__*/function (OpeneStateType) {
+  OpeneStateType[OpeneStateType["CLOSE"] = 0] = "CLOSE";
+  OpeneStateType[OpeneStateType["OPEN"] = 1] = "OPEN";
+  return OpeneStateType;
+}({});
+var SwitchInputLanguageRoom = exports.SwitchInputLanguageRoom = (0, _mobxReact.observer)(function (props) {
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    changeInputLanguage = _useContext.changeInputLanguage,
+    interpreter = _useContext.interpreter,
+    toggleLanguageRoom = _useContext.toggleLanguageRoom,
+    changeInputLanguageByMain = _useContext.changeInputLanguageByMain,
+    closeAllLanguageRoomInput = _useContext.closeAllLanguageRoomInput;
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  var transI18n = (0, _i18n.useI18n)();
+  var position = (0, _react.useMemo)(function () {
+    var windowWidth = window.innerWidth;
+    var width = 210;
+    var height = 60;
+    var x = windowWidth / 2 - width / 2;
+    return {
+      x: x,
+      y: -86,
+      width: width,
+      height: height
+    };
+  }, []);
+  var guideContent = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "switch-language-channels-guide-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "switch-language-channels-guide-content-icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_INTERPRETATION2,
+          size: 25,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "switch-language-channels-guide-content-text",
+        children: transI18n('fmt_interpretation_interpreter_toast_label_change_channel')
+      })]
+    });
+  }, []);
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    languageRoomList = _useState2[0],
+    setLanguageRoomList = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var handleClick = function handleClick(value, _languageRoomList) {
+    setLoading(true);
+    try {
+      changeInputLanguage({
+        language: value,
+        options: _languageRoomList,
+        callback: function callback(languageRoomList) {
+          setLanguageRoomList(languageRoomList);
+          setLoading(false);
+        }
+      });
+    } catch (error) {
+      setLoading(false);
+    }
+  };
+  var outputLanguageRoom = (0, _react.useMemo)(function () {
+    var _languageRoomList$fin;
+    return (_languageRoomList$fin = languageRoomList.find(function (ele) {
+      return ele.openeState === OpeneStateType.OPEN;
+    })) === null || _languageRoomList$fin === void 0 ? void 0 : _languageRoomList$fin.value;
+  }, [languageRoomList]);
+  var mergeLanguageRoom = function mergeLanguageRoom() {
+    var _ref = interpreter || {},
+      sourceLanguage = _ref.sourceLanguage,
+      targetLanguage = _ref.targetLanguage;
+    return [sourceLanguage, targetLanguage].map(function (language) {
+      var languageConfig = getLanguageConfig(language);
+      var abbr = languageConfig.abbr,
+        imgSrc = languageConfig.imgSrc,
+        value = languageConfig.value;
+      var initOpeneState = value === sourceLanguage ? OpeneStateType.OPEN : OpeneStateType.CLOSE;
+      var preLanguageRoom = languageRoomList.find(function (languageRoom) {
+        return languageRoom.value === language;
+      });
+      return {
+        label: abbr,
+        imgSrc: imgSrc,
+        value: value,
+        openeState: preLanguageRoom ? preLanguageRoom.openeState : initOpeneState
+      };
+    });
+  };
+  (0, _react.useEffect)(function () {
+    setLoading(true);
+    try {
+      changeInputLanguageByMain({
+        close: true,
+        callback: function callback(res) {
+          if (res) {
+            var newLanguageRoomList = mergeLanguageRoom();
+            var leftRoomList = languageRoomList.filter(function (preRoom) {
+              return !newLanguageRoomList.find(function (room) {
+                return room.value === preRoom.value;
+              });
+            });
+            closeAllLanguageRoomInput({
+              options: leftRoomList,
+              callback: function callback() {
+                toggleLanguageRoom({
+                  actionType: _constant.UpdateType.LEFT,
+                  languageRoomList: leftRoomList,
+                  callback: function callback() {
+                    toggleLanguageRoom({
+                      actionType: _constant.UpdateType.JOIN,
+                      languageRoomList: newLanguageRoomList,
+                      callback: function callback() {
+                        handleClick(newLanguageRoomList[1].value, newLanguageRoomList);
+                      }
+                    });
+                  }
+                });
+              }
+            });
+          } else {
+            setLoading(false);
+          }
+        }
+      });
+    } catch (error) {
+      setLoading(false);
+    }
+  }, [interpreter]);
+  var unloadRef = (0, _react.useRef)();
+  unloadRef.current = function () {
+    changeInputLanguageByMain({
+      close: false,
+      callback: function callback() {
+        closeAllLanguageRoomInput({
+          options: languageRoomList,
+          callback: function callback() {
+            toggleLanguageRoom({
+              actionType: _constant.UpdateType.LEFT,
+              languageRoomList: languageRoomList
+            });
+          }
+        });
+      }
+    });
+  };
+  (0, _react.useEffect)(function () {
+    return function () {
+      unloadRef.current && unloadRef.current();
+    };
+  }, []);
+  var guideTooltip = (0, _react.useRef)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    "default": position,
+    bounds: "window",
+    enableResizing: false,
+    onDragStart: function onDragStart() {
+      if (guideTooltip.current) {
+        if (guideTooltip.current.show) {
+          guideTooltip.current.setShow(false);
+        }
+      }
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingWrapper.LoadingWrapper, {
+      maskClassName: "switch-language-loading",
+      loading: loading,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_guideTooltip.GuideTooltip, {
+        content: "",
+        guideContent: guideContent,
+        ref: guideTooltip,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "switch-language-channels-bar",
+          children: languageRoomList.map(function (ele) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              onClick: function onClick() {
+                handleClick(ele.value, languageRoomList);
+              },
+              className: (0, _classnames["default"])('switch-language-channels-action', {
+                'switch-language-channels-action__checked': outputLanguageRoom === ele.value
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "switch-language-channels-action-bg",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  className: "switch-language-channels-action-icon",
+                  src: ele.imgSrc
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "switch-language-channels-action-text",
+                  children: ele.label
+                })]
+              })
+            }, ele.value);
+          })
+        })
+      })
+    })
+  });
+});

package/lib/modules/action-bar/switch-output-language-room/drop-menu.d.ts

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

package/lib/modules/action-bar/switch-output-language-room/drop-menu.js

@@ -0,0 +1,197 @@
+"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.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.SecurityMenu = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.filter.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.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _store = require("../store");
+var _react = require("react");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _mobxReact = require("mobx-react");
+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 SecurityMenu = exports.SecurityMenu = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    isLockRoomEnabled = _useContext.isLockRoomEnabled,
+    setLockRoomEnabled = _useContext.setLockRoomEnabled,
+    allowChat = _useContext.allowChat,
+    setAllowChat = _useContext.setAllowChat,
+    allowUnmuteSelfAudio = _useContext.allowUnmuteSelfAudio,
+    setAllowUnmuteSelfAudio = _useContext.setAllowUnmuteSelfAudio,
+    allowUnmuteSelfVideo = _useContext.allowUnmuteSelfVideo,
+    setAllowUnmuteSelfVideo = _useContext.setAllowUnmuteSelfVideo,
+    setAllowScreenShare = _useContext.setAllowScreenShare,
+    setAllowBoardWrite = _useContext.setAllowBoardWrite,
+    isBoardWriteEnabled = _useContext.isBoardWriteEnabled,
+    hasLockRoomPermission = _useContext.hasLockRoomPermission,
+    hasEnableStartSharePermission = _useContext.hasEnableStartSharePermission,
+    hasAllowChatPermission = _useContext.hasAllowChatPermission,
+    hasEnableStartAudioPermission = _useContext.hasEnableStartAudioPermission,
+    hasEnableStartVideoPermission = _useContext.hasEnableStartVideoPermission,
+    hasEnableChangeNamePermission = _useContext.hasEnableChangeNamePermission,
+    hasAllowWriteBoardPermission = _useContext.hasAllowWriteBoardPermission,
+    isScreenShareAndBoardEnabled = _useContext.isScreenShareAndBoardEnabled;
+  var transI18n = (0, _i18n.useI18n)();
+  var allActions = [];
+  if (hasLockRoomPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: isLockRoomEnabled(),
+        label: transI18n('fmt_screenshare_controlbar_security_list_lock'),
+        styleType: "white"
+      }),
+      key: 'lock_room',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setLockRoomEnabled(!isLockRoomEnabled());
+      }
+    });
+  }
+  allActions.push({
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_security_options_activatewaitingroom'),
+      styleType: "white"
+    }),
+    key: 'enable_waiting_room',
+    type: 'disabled',
+    onButtonClick: function onButtonClick() {},
+    classNames: 'room-control-drop-with-under-line'
+  });
+  allActions.push({
+    title: transI18n('fmt_screenshare_options_allow'),
+    key: 'allow_attendee_title',
+    type: 'title'
+  });
+  if (hasEnableStartSharePermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: isScreenShareAndBoardEnabled,
+        label: transI18n('fmt_screenshare_screen_and_board'),
+        styleType: "white"
+      }),
+      key: 'share_screen',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        return setAllowScreenShare();
+      }
+    });
+  }
+  if (hasAllowWriteBoardPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: isBoardWriteEnabled,
+        label: transI18n('fmt_screenshare_options_editable'),
+        styleType: "white"
+      }),
+      key: 'share_screen',
+      type: 'primary',
+      onButtonClick: setAllowBoardWrite
+    });
+  }
+  if (hasAllowChatPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: allowChat(),
+        label: transI18n('fmt_chat_label_chat'),
+        styleType: "white"
+      }),
+      key: 'chat',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setAllowChat(!allowChat());
+      }
+    });
+  }
+  if (hasEnableStartAudioPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: allowUnmuteSelfAudio(),
+        label: transI18n('fmt_screenshare_controlbar_security_list_participant_unmute'),
+        styleType: "white"
+      }),
+      key: 'unmute_yourself',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setAllowUnmuteSelfAudio(!allowUnmuteSelfAudio());
+      }
+    });
+  }
+  if (hasEnableStartVideoPermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: allowUnmuteSelfVideo(),
+        label: transI18n('fmt_security_options_openvideo'),
+        styleType: "white"
+      }),
+      key: 'start_video',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {
+        setAllowUnmuteSelfVideo(!allowUnmuteSelfVideo());
+      }
+    });
+  }
+  if (hasEnableChangeNamePermission) {
+    allActions.push({
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: transI18n('fmt_additional_label_change_name_self'),
+        styleType: "white"
+      }),
+      key: 'rename',
+      type: 'disabled',
+      onButtonClick: function onButtonClick() {},
+      classNames: 'room-control-drop-with-under-line'
+    });
+  }
+  allActions.push({
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+      checked: false,
+      label: transI18n('fmt_security_options_removemultiple'),
+      styleType: "white"
+    }),
+    key: 'remove_fcr-participants',
+    type: 'danger',
+    onButtonClick: function onButtonClick() {},
+    classNames: 'room-control-drop-disable'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+    options: allActions.filter(function (v) {
+      return v.type !== 'disabled';
+    }).map(function (v) {
+      if (v.type === 'primary') {
+        return _objectSpread(_objectSpread({}, v), {}, {
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "security-drop-menu-checkbox",
+            children: v.title
+          })
+        });
+      }
+      return _objectSpread({}, v);
+    })
+  });
+});

package/lib/modules/action-bar/switch-output-language-room/guide-tooltip/index.css

@@ -0,0 +1,18 @@
+.fcr-guide-tooltip {
+  max-width: none;
+}
+.fcr-guide-tooltip-close-btn {
+  margin-left: 10px;
+  /* float: left; */
+  display: inline;
+}
+
+.fcr-guide-tooltip-close-container {
+  position: relative;
+  padding-right: 20px;
+}
+.fcr-guide-tooltip-close-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}

package/lib/modules/action-bar/switch-output-language-room/guide-tooltip/index.d.ts

@@ -0,0 +1,14 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import './index.css';
+export interface guideTooltipPropsRef {
+    setShow: React.Dispatch<React.SetStateAction<boolean>>;
+    show: boolean;
+}
+interface GuideTooltipProps extends ToolTipProps {
+    children: React.ReactNode;
+    guideContent: string | React.ReactNode;
+    initShowGuide?: boolean;
+    onClose?: (visible: boolean) => any;
+}
+export declare const GuideTooltip: import("react").ForwardRefExoticComponent<GuideTooltipProps & import("react").RefAttributes<unknown>>;
+export {};

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

@@ -0,0 +1,72 @@
+"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.GuideTooltip = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _react = require("react");
+require("./index.css");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var GuideTooltip = exports.GuideTooltip = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    content = props.content,
+    guideContent = props.guideContent,
+    _props$initShowGuide = props.initShowGuide,
+    initShowGuide = _props$initShowGuide === void 0 ? true : _props$initShowGuide,
+    onClose = props.onClose;
+  var _useState = (0, _react.useState)(initShowGuide),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var showGuideRef = (0, _react.useRef)(initShowGuide);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      setShow: setShow,
+      show: show
+    };
+  }, [show]);
+  var close = function close() {
+    setShow(false);
+    showGuideRef.current = false;
+    onClose && onClose(false);
+  };
+  var guideContentDom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-guide-tooltip-close-container",
+    children: [guideContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      className: "fcr-guide-tooltip-close-btn",
+      type: _type.FcrIconType.FCR_CLOSED,
+      onClick: close,
+      size: 14,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext3)'
+      }
+    })]
+  });
+  (0, _react.useEffect)(function () {
+    if (initShowGuide) {
+      showGuideRef.current = true;
+      setShow(true);
+    }
+  }, [guideContent]);
+  var onVisibleChange = function onVisibleChange(visible) {
+    if (!showGuideRef.current) {
+      setShow(visible);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    overlayClassName: "fcr-guide-tooltip",
+    mouseEnterDelay: 0,
+    onVisibleChange: onVisibleChange
+    // content={showGuideContetRef.current}
+    ,
+    content: showGuideRef.current ? guideContentDom : content,
+    visible: show,
+    children: children
+  });
+});

package/lib/modules/action-bar/switch-output-language-room/index.d.ts

@@ -0,0 +1,12 @@
+import { FcrLanguage } from 'fcr-core/lib/room-control/interpreter-control/types';
+export type CloseAllLanguageRoomType = typeof CLOSE_ALL_LANGUAGE_ROOM;
+export type LanguageRoomOptionValue = FcrLanguage | CloseAllLanguageRoomType;
+export interface LanguageRoomOption {
+    text: string;
+    value: LanguageRoomOptionValue;
+}
+export declare const CLOSE_ALL_LANGUAGE_ROOM = "CLOSE_ALL_LANGUAGE_ROOM";
+export declare const SwitchOutputLanguageRoom: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element | null;