fcr-ui-scene 3.7.8 → 3.8.0-alpha

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

@@ -255,14 +255,22 @@
   }
 }
 
-.fcr-state-bar__full-screen {
+.fcr-state-bar__time {
+}
+
+.fcr-state-bar__layout {
+}
+
+.fcr-state-bar__full-screen,
+.fcr-sate-bar__subtitles-history-state {
   border-radius: var(--fcr_cornerradius_xxs);
   border: 1px solid var(--fcr_ui_scene_line1);
   padding: 2px;
   cursor: pointer;
   background: var(--fcr_web_ui_scene_fill2);
 }
-.fcr-state-bar__full-screen:hover {
+.fcr-state-bar__full-screen:hover,
+.fcr-sate-bar__subtitles-history-state:hover {
   background: var(--fcr_web_ui_scene_hover);
 }
 .fcr-state-bar__full-screen:hover .fcr-state-bar__full-screen-icon path {
@@ -273,6 +281,69 @@
   fill: var(--fcr_web_ui_scene_mainicon1);
 }
 
+.fcr-sate-bar__subtitles-history-state__animation {
+  animation: fcr-sate-bar__subtitles-history-state__animation 1.5s 0.5s 1 linear;
+}
+
+@keyframes fcr-sate-bar__subtitles-history-state__animation {
+  0% {
+    background: var(--fcr_ui_scene_ramp_brand1);
+  }
+  25% {
+    background: var(--fcr_ui_scene_ramp_brand2);
+  }
+  50% {
+    background: var(--fcr_ui_scene_ramp_brand1);
+  }
+  75% {
+    background: var(--fcr_ui_scene_ramp_brand2);
+  }
+  100% {
+    background: var(--fcr_web_ui_scene_fill2);
+  }
+}
+
+.fcr-subtitles-history-state-panel {
+  padding: 15px;
+  text-align: left;
+  color: var(--fcr_ui_scene_icontext1);
+}
+.fcr-subtitles-history-state-panel__title {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: var(--fcr_font_weight_m);
+  margin-bottom: 12px;
+}
+.fcr-subtitles-history-state-panel__text {
+  font-size: 12px;
+  line-height: 16px;
+  margin-bottom: 12px;
+}
+.fcr-subtitles-history-state-panel__actions {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+.fcr-subtitles-history-state-panel__actions button {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+.fcr-subtitles-history-state-panel__actions__left.fcr-button {
+  width: 132px;
+  padding: 0 10px;
+  flex-grow: 1;
+  letter-spacing: 4px;
+}
+.fcr-subtitles-history-state-panel__actions__right.fcr-button {
+  min-width: 32px;
+  padding: 0;
+  background: var(--fcr_ui_scene_ramp_red6);
+  /*  fcr-button 上的 border 属性为 important，此处不需要显示borer，故将其覆盖。 */
+  border-color: transparent !important;
+}
+.fcr-subtitles-history-state-panel__actions__right.fcr-button:hover {
+  background: var(--fcr_ui_scene_ramp_red6);
+}
+
 /* network-quality */
 .fcr-network-quality {
 }

package/lib/modules/state-bar/main-scene/store.base.d.ts

@@ -9,6 +9,7 @@ export declare abstract class StateBarMainSceneStoreBase extends StateBarStoreBa
     private _sharedVideoWindowDataSource;
     private _sharedMemberDataSource;
     private _abilityProvider;
+    private _sttProvider;
     private _screenShareProvider;
     constructor(args: StateBarStoreArgs);
     get isSharingScreen(): boolean;
@@ -19,6 +20,7 @@ export declare abstract class StateBarMainSceneStoreBase extends StateBarStoreBa
     get totalMinuteText(): string;
     get meetingTimeStatus(): import("../../../shared-data/meeting-time").MeetingStatus;
     get meetingTime(): string;
+    get isShowSubtitlesHistoryState(): boolean;
     get layoutView(): FcrUIVideoWindowLayoutType;
     toggleLayout(layout: FcrUIVideoWindowLayoutType): void;
 }

package/lib/modules/state-bar/main-scene/store.base.js

@@ -76,6 +76,7 @@ var StateBarMainSceneStoreBase = exports.StateBarMainSceneStoreBase = /*#__PURE_
     _this._sharedMemberDataSource = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_MEMBER_DATA_SOURCE);
     _this._abilityProvider = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ABILITY_PROVIDER);
     _this._sharedVideoWindowDataSource = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_VIDEO_WINDOW_DATA_SOURCE);
+    _this._sttProvider = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_STT_PROVIDER);
     _this._screenShareProvider = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_SCREEN_SHARE_PROVIDER);
     return _this;
   }
@@ -120,6 +121,11 @@ var StateBarMainSceneStoreBase = exports.StateBarMainSceneStoreBase = /*#__PURE_
     get: function get() {
       return this._sharedMeetingTimeDataSource.meetingTime;
     }
+  }, {
+    key: "isShowSubtitlesHistoryState",
+    get: function get() {
+      return this._sttProvider.transcribingState;
+    }
   }, {
     key: "layoutView",
     get: function get() {
@@ -133,6 +139,6 @@ var StateBarMainSceneStoreBase = exports.StateBarMainSceneStoreBase = /*#__PURE_
   }]);
 }(_store.StateBarStoreBase);
 _StateBarMainSceneStoreBase = StateBarMainSceneStoreBase;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarMainSceneStoreBase, [[_mobx.computed, 3, "localUser"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_decorator.bound, 2, "toggleLayout"]], [], 0, void 0, _store.StateBarStoreBase).e, 1);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarMainSceneStoreBase, [[_mobx.computed, 3, "localUser"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_mobx.computed, 3, "isShowSubtitlesHistoryState"], [_decorator.bound, 2, "toggleLayout"]], [], 0, void 0, _store.StateBarStoreBase).e, 1);
 _initProto = _applyDecs$e[0];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/state-bar/main-scene/store.browser.js

@@ -77,7 +77,7 @@ var StateBarBrowserStore = exports["default"] = /*#__PURE__*/function (_StateBar
     get: function get() {
       // 浏览器环境中，如果正在共享屏幕则禁用布局切换
       // 复用 state-bar/store.browser.ts 中的逻辑
-      return this.isSharingScreen;
+      return this.isSharingScreen || this.isLiveStreaming;
     }
   }]);
 }(_store.StateBarMainSceneStoreBase);

package/lib/modules/state-bar/main-scene/store.electron.js

@@ -104,7 +104,7 @@ var StateBarElectronStore = exports["default"] = /*#__PURE__*/function (_StateBa
       }
 
       // 如果正在共享屏幕，则禁用布局切换
-      return this.isSharingScreen;
+      return this.isSharingScreen || this.isLiveStreaming;
     }
   }]);
 }(_store.StateBarMainSceneStoreBase);

package/lib/modules/state-bar/store.base.d.ts

@@ -12,6 +12,7 @@ export declare abstract class StateBarStoreBase {
     private _messageProvider;
     private _localStorageProvider;
     private _sharedLayoutDataSource;
+    private _sharedSettingDataSource;
     private _roomObserver;
     private _dialogProvider;
     private _isMainRoom;
@@ -38,7 +39,9 @@ export declare abstract class StateBarStoreBase {
     get hasStartCloudRecordingPermission(): boolean;
     get hasStopLiveStreamingPermission(): boolean;
     get hasGetLiveStreamingLinkPermission(): boolean;
+    get hasStopTranscribePermission(): boolean;
     get password(): string | undefined;
+    abstract get isShowSubtitlesHistoryState(): boolean;
     get isSharingScreen(): boolean;
     abstract get isUserHost(): boolean;
     abstract get isLayoutSwitchDisabled(): boolean;
@@ -55,6 +58,8 @@ export declare abstract class StateBarStoreBase {
     addFullScreenChangeEventListener(handle: () => void): void;
     removeFullScreenChangeEventListener(handle: () => void): void;
     isLockRoomEnabled(): boolean;
+    openTranscribeView(): void;
+    stopTranscribing(): void;
     setNetworkStatus(networkStatus: NetworkStatus): void;
     abstract toggleLayout(layout: FcrUIVideoWindowLayoutType): void;
     toggleLayoutBarLock(state: boolean): void;

package/lib/modules/state-bar/store.base.js

@@ -159,6 +159,7 @@ var StateBarStoreBase = exports.StateBarStoreBase = /*#__PURE__*/function () {
     this._sharedLayoutDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_LAYOUT_DATA_SOURCE);
     this._localStorageProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_LOCAL_STORAGE_PROVIDER);
     this._eventProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_EVENT_PROVIDER);
+    this._sharedSettingDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_SETTING_DATA_SOURCE);
     this.attendeeCount = 0;
     this.isLiveStreaming = this._roomControl.getLiveStreamingState() === _type.FcrLiveStreamingState.STARTED;
     if (this.isLiveStreaming) {
@@ -191,6 +192,12 @@ var StateBarStoreBase = exports.StateBarStoreBase = /*#__PURE__*/function () {
       if (asideLayout.chat === false) {
         _this.asideOpenedItem["delete"]('chat');
       }
+      if (asideLayout.subtitlesHistory) {
+        _this.asideOpenedItem.add('subtitlesHistory');
+      }
+      if (asideLayout.subtitlesHistory === false) {
+        _this.asideOpenedItem["delete"]('subtitlesHistory');
+      }
       _this._setBrowserWidth(window.innerWidth)(); // 打开或关闭边栏
     }), function () {
       window.removeEventListener('resize', resizeHandler);
@@ -334,6 +341,11 @@ var StateBarStoreBase = exports.StateBarStoreBase = /*#__PURE__*/function () {
     get: function get() {
       return this._privilegeProvider.hasGetLiveStreamingLinkPermission();
     }
+  }, {
+    key: "hasStopTranscribePermission",
+    get: function get() {
+      return this._privilegeProvider.hasStopTranscribePermission();
+    }
   }, {
     key: "password",
     get: function get() {
@@ -397,6 +409,16 @@ var StateBarStoreBase = exports.StateBarStoreBase = /*#__PURE__*/function () {
     value: function isLockRoomEnabled() {
       return this._privilegeProvider.isLockRoomEnabled();
     }
+  }, {
+    key: "openTranscribeView",
+    value: function openTranscribeView() {
+      this._eventProvider.sendEvent(_constant.FcrUIAction.TOGGLE_SUBTITLES_HISTORY_VIEW, true);
+    }
+  }, {
+    key: "stopTranscribing",
+    value: function stopTranscribing() {
+      this._eventProvider.sendEvent(_constant.FcrUIAction.STOP_SUBTITLES_HISTORY);
+    }
   }, {
     key: "setNetworkStatus",
     value: function setNetworkStatus(networkStatus) {
@@ -428,6 +450,10 @@ var StateBarStoreBase = exports.StateBarStoreBase = /*#__PURE__*/function () {
         activeTab: activeTab,
         highlightSelector: highlightSelector
       });
+      this._sharedSettingDataSource.setDialogConfig({
+        activeTab: activeTab,
+        highlightSelector: highlightSelector
+      });
     }
   }, {
     key: "stopLiveStreamingDialog",
@@ -479,9 +505,10 @@ var StateBarStoreBase = exports.StateBarStoreBase = /*#__PURE__*/function () {
   }, {
     key: "toastCannotToggleLayoutWhenSharing",
     value: function toastCannotToggleLayoutWhenSharing() {
+      var generateI18nKey = this.isLiveStreaming ? 'fmt_livestream_unable_switch_grid_view' : 'fmt_statusbar_hover_unable_switch_grid_view';
       this._messageProvider.showToast({
         type: 'normal',
-        message: (0, _i18n.transI18n)('fmt_statusbar_hover_unable_switch_grid_view')
+        message: (0, _i18n.transI18n)(generateI18nKey)
       });
     }
   }, {
@@ -582,7 +609,7 @@ var StateBarStoreBase = exports.StateBarStoreBase = /*#__PURE__*/function () {
   }]);
 }();
 _StateBarStoreBase = StateBarStoreBase;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStoreBase, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "password"], [_decorator.bound, 2, "isLockRoomEnabled"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_decorator.bound, 2, "toggleLayoutBarLock"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_decorator.bound, 2, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_decorator.bound, 2, "showNotification"], [_decorator.bound, 2, "closeNotification"], [_decorator.bound, 2, "toastCannotToggleLayoutWhenSharing"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"], [_decorator.bound, 2, "_handleEvent"], [_decorator.bound, 2, "getLocalMeetingTime"]], []).e, 10);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStoreBase, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "hasStopTranscribePermission"], [_mobx.computed, 3, "password"], [_decorator.bound, 2, "isLockRoomEnabled"], [_decorator.bound, 2, "openTranscribeView"], [_decorator.bound, 2, "stopTranscribing"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_decorator.bound, 2, "toggleLayoutBarLock"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_decorator.bound, 2, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_decorator.bound, 2, "showNotification"], [_decorator.bound, 2, "closeNotification"], [_decorator.bound, 2, "toastCannotToggleLayoutWhenSharing"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"], [_decorator.bound, 2, "_handleEvent"], [_decorator.bound, 2, "getLocalMeetingTime"]], []).e, 10);
 _init_networkStatus = _applyDecs$e[0];
 _init_isLiveStreaming = _applyDecs$e[1];
 _init_liveStreamingPlayUrl = _applyDecs$e[2];

package/lib/modules/state-bar/subtitles-history-state.d.ts

@@ -0,0 +1,7 @@
+type PanelProps = {
+    stopDisabled: boolean;
+    onOpen: () => void;
+    onStop: () => void;
+};
+export declare const SubtitlesHistoryState: (props: PanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/state-bar/subtitles-history-state.js

@@ -0,0 +1,108 @@
+"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.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.SubtitlesHistoryState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _button = require("agora-ui-foundation/lib/components/button");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["onOpen"];
+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 Panel = (0, _mobxReact.observer)(function (props) {
+  var t = (0, _i18n.useI18n)();
+  var onOpen = props.onOpen,
+    onStop = props.onStop,
+    stopDisabled = props.stopDisabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-subtitles-history-state-panel",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-subtitles-history-state-panel__title",
+      children: t('fmt_ai_transcriptions_sidebar_label_realtime_translation')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-subtitles-history-state-panel__text",
+      children: t('fmt_ai_rtt_window_label_converting_stt')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-subtitles-history-state-panel__actions",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        className: "fcr-subtitles-history-state-panel__actions__left",
+        type: "secondary-bordered",
+        size: "XS",
+        onClick: onOpen,
+        children: t('fmt_ai_rtt_window_button_view_stt_content')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        transparent: true,
+        content: stopDisabled ? t('fmt_ai_rtt_tips_only_host_stop') : t('fmt_ai_rtt_window_button_stop_stt'),
+        placement: "rightTop",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+          className: "fcr-subtitles-history-state-panel__actions__right",
+          size: "XS",
+          disabled: stopDisabled,
+          onClick: onStop,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_RECORDING_STOP,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            },
+            size: 28
+          })
+        })
+      })]
+    })]
+  });
+});
+var SubtitlesHistoryState = exports.SubtitlesHistoryState = (0, _mobxReact.observer)(function (props) {
+  var _onOpen = props.onOpen,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var onOpen = (0, _react.useCallback)(function () {
+    setVisible(false);
+    _onOpen();
+  }, [_onOpen]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    showArrow: false,
+    trigger: "click",
+    placement: "bottom",
+    overlayClassName: "fcr-sate-bar__subtitles-history-state-popover",
+    visible: visible,
+    onVisibleChange: setVisible,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, _objectSpread(_objectSpread({}, restProps), {}, {
+      onOpen: onOpen
+    })),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-sate-bar__subtitles-history-state fcr-sate-bar__subtitles-history-state__animation",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_SUBTITIESHISTORY2,
+        size: 22
+      })
+    })
+  });
+});

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

@@ -37,6 +37,7 @@ var _constant = require("../../utilities/constant");
 var _type4 = require("../../type");
 var _browserApi = require("../../utilities/browser-api");
 var _lodash = require("lodash");
+var _subtitlesHistoryState = require("./subtitles-history-state");
 var _jsxRuntime = require("react/jsx-runtime");
 var MyFcrToolTip = exports.MyFcrToolTip = function MyFcrToolTip(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
@@ -68,6 +69,10 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
     closeNotification = _useContext.closeNotification,
     isRoomDetailSupported = _useContext.isRoomDetailSupported,
     isLayoutSwitchDisabled = _useContext.isLayoutSwitchDisabled,
+    isShowSubtitlesHistoryState = _useContext.isShowSubtitlesHistoryState,
+    hasStopTranscribePermission = _useContext.hasStopTranscribePermission,
+    openTranscribeView = _useContext.openTranscribeView,
+    stopTranscribing = _useContext.stopTranscribing,
     enterFullScreen = _useContext.enterFullScreen,
     exitFullScreen = _useContext.exitFullScreen,
     getIsFullScreen = _useContext.getIsFullScreen,
@@ -206,7 +211,17 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
       }), isLiveStreaming && /*#__PURE__*/(0, _jsxRuntime.jsx)(_liveStreamingState.LiveStreamingState, {})]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: ns.e('right-nav'),
-      children: [isRecording && /*#__PURE__*/(0, _jsxRuntime.jsx)(_recording.Recording, {}), isMainRoom && shouldShowMeetingTime && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [isRecording && /*#__PURE__*/(0, _jsxRuntime.jsx)(_recording.Recording, {}), isShowSubtitlesHistoryState && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+        placement: "bottom",
+        content: t('fmt_ai_rtt_tips_transcribing'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitlesHistoryState.SubtitlesHistoryState, {
+            stopDisabled: !hasStopTranscribePermission,
+            onOpen: openTranscribeView,
+            onStop: stopTranscribing
+          })
+        })
+      }), isMainRoom && shouldShowMeetingTime && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: ns.e('time'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingTime.MeetingTime, {})
       }), attendeeCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/modules/state-bar/waiting-scene/store.base.d.ts

@@ -7,5 +7,6 @@ export declare abstract class StateBarWaitingSceneStoreBase extends StateBarStor
     get isUserHost(): boolean;
     get isRoomDetailSupported(): boolean;
     get layoutView(): FcrUIVideoWindowLayoutType;
+    get isShowSubtitlesHistoryState(): boolean;
     toggleLayout(layout: FcrUIVideoWindowLayoutType): void;
 }

package/lib/modules/state-bar/waiting-scene/store.base.js

@@ -41,6 +41,11 @@ var StateBarWaitingSceneStoreBase = exports.StateBarWaitingSceneStoreBase = /*#_
       this.logger.error('WaitingScene does not support layoutView');
       return _type.FcrUIVideoWindowLayoutType.Gallery;
     }
+  }, {
+    key: "isShowSubtitlesHistoryState",
+    get: function get() {
+      return false;
+    }
   }, {
     key: "toggleLayout",
     value: function toggleLayout(layout) {

package/lib/modules/subtitles-history/components/actions.d.ts

@@ -0,0 +1,5 @@
+type ActionsProps = {
+    settingSlot: React.ReactNode;
+};
+export declare const Actions: (props: ActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/subtitles-history/components/actions.js

@@ -0,0 +1,36 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Actions = void 0;
+var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _store = require("../store.base");
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _env = require("agora-foundation/lib/utilities/env");
+var _jsxRuntime = require("react/jsx-runtime");
+var Actions = exports.Actions = (0, _mobxReact.observer)(function (props) {
+  var _useContext = (0, _react.useContext)(_store.SubtitlesHistoryContext),
+    isLocalUserScreenSharing = _useContext.isLocalUserScreenSharing,
+    moveDialogToAside = _useContext.moveDialogToAside;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [props.settingSlot, (!(0, _env.isElectron)() || !isLocalUserScreenSharing) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: (0, _i18n.transI18n)('fmt_uimanager_option_mergeview'),
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+        icon: _type.FcrIconType.FCR_TOGGLE_DIALOG,
+        onClick: moveDialogToAside,
+        className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
+        iconColors: {
+          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+        }
+      })
+    })]
+  });
+});

package/lib/modules/subtitles-history/components/list-item.d.ts

@@ -0,0 +1,12 @@
+import { FcrUISttTranscribingItem } from '../../../providers/stt-provider/type';
+type SubtitlesHistoryListItemProps = {
+    item: FcrUISttTranscribingItem;
+    style: React.CSSProperties;
+    showTwoLine: boolean;
+    isTranslateLanguageOpened: boolean;
+    rowIndex: number;
+    isLast: boolean;
+    onResizeIndex: (index: number) => void;
+};
+export declare const SubtitlesHistoryListItem: import("react").ForwardRefExoticComponent<SubtitlesHistoryListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/modules/subtitles-history/components/list-item.js

@@ -0,0 +1,105 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubtitlesHistoryListItem = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.date.to-string.js");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var getDateText = function getDateText(time) {
+  var date = new Date(time);
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  var hour = date.getHours();
+  var minute = date.getMinutes();
+  var hh = hour < 10 ? '0' + hour : hour;
+  var mm = minute < 10 ? '0' + minute : minute;
+  var now = new Date();
+  if (year === now.getFullYear()) {
+    if (month === now.getMonth() + 1) {
+      if (day === now.getDate()) {
+        return "".concat(hh, ":").concat(mm);
+      }
+      return "".concat(day, " ").concat(hh, ":").concat(mm);
+    }
+    return "".concat(month, "-").concat(day, " ").concat(hh, ":").concat(mm);
+  }
+  return "".concat(year, "-").concat(month, "-").concat(day, " ").concat(hh, ":").concat(mm);
+};
+var renderSentence = function renderSentence(item, showTwoLine, isTranslateLanguageOpened) {
+  /** 没有开启双语显示但是开启了翻译时, 首行要显示的翻译语言 */
+  var firstLineTranslateLanguage = !showTwoLine && isTranslateLanguageOpened && item.translation;
+
+  /** 开启双语显示时, 并且开启了翻译时, 第二行要显示的翻译语言 */
+  var secondLineTranslateLanguage = showTwoLine && isTranslateLanguageOpened && item.translation;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-subtitles-history__list__item__head-icon",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+        nickName: item.transcript.owner.userName,
+        avatarImage: item.transcript.owner.avatar,
+        size: 32,
+        textSize: 14,
+        borderRadius: 10
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-subtitles-history__list__item__info",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-subtitles-history__list__item__info__name",
+          children: item.transcript.owner.userName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-subtitles-history__list__item__info__time",
+          children: getDateText(item.startTs)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-subtitles-history__list__item__text",
+        children: firstLineTranslateLanguage ? firstLineTranslateLanguage.text || '...' : item.transcript.text
+      }), secondLineTranslateLanguage && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-subtitles-history__list__item__text--translation",
+        children: secondLineTranslateLanguage.text || '...'
+      })]
+    })]
+  });
+};
+var renderAction = function renderAction(item) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-subtitles-history__list__item__action",
+    children: item.actionType === 'START_TRANSLATION' ? (0, _i18n.transI18n)('fmt_ai_transcriptions_sidebar_tips_turnon') : (0, _i18n.transI18n)('fmt_ai_transcriptions_sidebar_tips_turnoff')
+  });
+};
+var SubtitlesHistoryListItem = exports.SubtitlesHistoryListItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var item = props.item,
+    style = props.style,
+    rowIndex = props.rowIndex,
+    showTwoLine = props.showTwoLine,
+    isTranslateLanguageOpened = props.isTranslateLanguageOpened,
+    isLast = props.isLast,
+    onResizeIndex = props.onResizeIndex;
+  var prevItem = (0, _react.useRef)(item);
+  var content;
+  (0, _react.useEffect)(function () {
+    if (isLast) return;
+    if (prevItem.current !== item) {
+      prevItem.current = item;
+      onResizeIndex(rowIndex);
+    }
+  }, [item, rowIndex, isLast]);
+  if (item.type === 'sentence') {
+    content = renderSentence(item, showTwoLine, isTranslateLanguageOpened);
+  } else {
+    content = renderAction(item);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    style: style,
+    className: "fcr-subtitles-history__list__item",
+    children: content
+  });
+});

package/lib/modules/subtitles-history/components/list.d.ts

@@ -0,0 +1,10 @@
+import type { FcrUISttTranscribingItem } from '../../../providers/stt-provider/type';
+import { FcrLanguage } from 'fcr-core/lib/type';
+type SubtitlesHistoryListProps = {
+    list: FcrUISttTranscribingItem[];
+    isOpen: boolean;
+    translateLanguage: FcrLanguage | null;
+    isTwoLineTranscribingEnabled: boolean;
+};
+export declare const SubtitlesHistoryList: (props: SubtitlesHistoryListProps) => import("react/jsx-runtime").JSX.Element;
+export {};