fcr-ui-scene 3.8.1-beta → 3.8.2

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

@@ -0,0 +1,29 @@
+import { FcrIconButton } from 'agora-ui-foundation/lib/components/icon-button';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import { SubtitlesHistoryContext } from '../store.base';
+import { useContext } from 'react';
+import { observer } from 'mobx-react';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export var Actions = observer(function (props) {
+  var _useContext = useContext(SubtitlesHistoryContext),
+    isLocalUserScreenSharing = _useContext.isLocalUserScreenSharing,
+    moveDialogToAside = _useContext.moveDialogToAside;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [props.settingSlot, (!isElectron() || !isLocalUserScreenSharing) && /*#__PURE__*/_jsx(FcrToolTip, {
+      content: transI18n('fmt_uimanager_option_mergeview'),
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      children: /*#__PURE__*/_jsx(FcrIconButton, {
+        icon: 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-es/modules/subtitles-history/components/list-item.js

@@ -0,0 +1,95 @@
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.date.to-string.js";
+import { FcrAvatar } from 'agora-ui-foundation/lib/components/avatar';
+import { forwardRef, useEffect, useRef } from 'react';
+import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "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 && day === now.getDate()) {
+      return "".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__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fcr-subtitles-history__list__item__head-icon",
+      children: /*#__PURE__*/_jsx(FcrAvatar, {
+        nickName: item.transcript.owner.userName,
+        avatarImage: item.transcript.owner.avatar,
+        size: 32,
+        textSize: 14,
+        borderRadius: 10
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fcr-subtitles-history__list__item__info",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fcr-subtitles-history__list__item__info__name",
+          children: item.transcript.owner.userName
+        }), /*#__PURE__*/_jsx("div", {
+          className: "fcr-subtitles-history__list__item__info__time",
+          children: getDateText(item.startTs)
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fcr-subtitles-history__list__item__text",
+        children: firstLineTranslateLanguage ? firstLineTranslateLanguage.text || '...' : item.transcript.text
+      }), secondLineTranslateLanguage && /*#__PURE__*/_jsx("div", {
+        className: "fcr-subtitles-history__list__item__text--translation",
+        children: secondLineTranslateLanguage.text || '...'
+      })]
+    })]
+  });
+};
+var renderAction = function renderAction(item) {
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-subtitles-history__list__item__action",
+    children: item.actionType === 'START_TRANSLATION' ? transI18n('fmt_ai_transcriptions_sidebar_tips_turnon') : transI18n('fmt_ai_transcriptions_sidebar_tips_turnoff')
+  });
+};
+export var SubtitlesHistoryListItem = /*#__PURE__*/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 = useRef(item);
+  var content;
+  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__*/_jsx("div", {
+    ref: ref,
+    style: style,
+    className: "fcr-subtitles-history__list__item",
+    children: content
+  });
+});

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

@@ -0,0 +1,175 @@
+import "core-js/modules/web.timers.js";
+import { isWindows } from 'agora-foundation/lib/utilities/env';
+import { isElectron } from 'agora-rte-sdk/lib/imports';
+import { observer } from 'mobx-react';
+import { useCallback, useEffect, useRef } from 'react';
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
+import { SubtitlesHistoryListItem } from './list-item';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrIconAnimation } from 'agora-ui-foundation/lib/components/icon-animation';
+import { FcrIconAnimationType } from 'agora-ui-foundation/lib/components/icon-animation/type';
+import { debounce } from 'lodash';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var genRequestAnimationFrame = function genRequestAnimationFrame(cb) {
+  return isElectron() && isWindows() ? setTimeout(cb, 0) : requestAnimationFrame(cb);
+};
+export var SubtitlesHistoryList = observer(function (props) {
+  var list = props.list,
+    isOpen = props.isOpen,
+    translateLanguage = props.translateLanguage,
+    isTwoLineTranscribingEnabled = props.isTwoLineTranscribingEnabled;
+  var rowCount = list.length;
+  var cache = useRef(new CellMeasurerCache({}));
+  var listRef = useRef(null);
+  var listFirstId = useRef('');
+  var listLastId = useRef('');
+  var listSizeRef = useRef({
+    width: 0,
+    height: 0
+  });
+  var lastRenderedStopIndexRef = useRef(0);
+  var scrollParamsRef = useRef({
+    scrollTop: 0,
+    scrollHeight: 0,
+    clientHeight: 0
+  });
+  var handleScroll = function handleScroll(params) {
+    var scrollTop = params.scrollTop,
+      scrollHeight = params.scrollHeight,
+      clientHeight = params.clientHeight;
+    scrollParamsRef.current = {
+      scrollTop: scrollTop,
+      scrollHeight: scrollHeight,
+      clientHeight: clientHeight
+    };
+  };
+  var handleRowsRendered = function handleRowsRendered(_ref) {
+    var stopIndex = _ref.stopIndex;
+    lastRenderedStopIndexRef.current = stopIndex;
+  };
+  var getIsScrollInBottom = function getIsScrollInBottom() {
+    var _scrollParamsRef$curr = scrollParamsRef.current,
+      scrollTop = _scrollParamsRef$curr.scrollTop,
+      scrollHeight = _scrollParamsRef$curr.scrollHeight,
+      clientHeight = _scrollParamsRef$curr.clientHeight;
+    if (clientHeight === 0) {
+      return true;
+    }
+    if (scrollHeight < clientHeight) {
+      return true;
+    }
+    return Math.abs(scrollHeight - scrollTop - clientHeight) < 3;
+  };
+  var scrollTargetIndex = function scrollTargetIndex(index) {
+    genRequestAnimationFrame(function () {
+      var _listRef$current;
+      (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.scrollToRow(index);
+    });
+  };
+  var scrollToBottom = function scrollToBottom() {
+    scrollTargetIndex(rowCount - 1);
+  };
+  useEffect(function () {
+    var lastItem = list[rowCount - 1];
+    if (!lastItem || !listRef.current) return;
+    var isScrollInBottom = getIsScrollInBottom();
+    if (listFirstId.current !== list[0].id) {
+      listFirstId.current = list[0].id;
+      cache.current.clearAll();
+      listRef.current.recomputeRowHeights();
+      if (!isScrollInBottom) {
+        scrollTargetIndex(lastRenderedStopIndexRef.current);
+      }
+    } else if (listLastId.current === lastItem.id) {
+      cache.current.clear(rowCount - 1, 0);
+      listRef.current.recomputeRowHeights(rowCount - 1);
+    }
+    if (isScrollInBottom) {
+      scrollToBottom();
+    }
+    listLastId.current = lastItem.id;
+  }, [list[rowCount - 1]]);
+  useEffect(function () {
+    var _listRef$current2;
+    cache.current.clearAll();
+    (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.recomputeRowHeights();
+  }, [translateLanguage, isTwoLineTranscribingEnabled]);
+  var onResize = useCallback(debounce(function (info) {
+    var _listRef$current3;
+    if (listSizeRef.current.width === info.width) {
+      return;
+    }
+    listSizeRef.current = info;
+    cache.current.clearAll();
+    (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 || _listRef$current3.recomputeRowHeights();
+  }, 50), []);
+  var onResizeIndex = useCallback(function (index) {
+    var _listRef$current4;
+    cache.current.clear(index, 0);
+    (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 || _listRef$current4.recomputeRowHeights(index);
+  }, []);
+  var rowRenderer = function rowRenderer(_ref2) {
+    var index = _ref2.index,
+      key = _ref2.key,
+      style = _ref2.style,
+      parent = _ref2.parent;
+    var item = list[index];
+    return /*#__PURE__*/_jsx(CellMeasurer, {
+      cache: cache.current,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index,
+      children: /*#__PURE__*/_jsx(SubtitlesHistoryListItem, {
+        rowIndex: index,
+        item: item,
+        style: style,
+        showTwoLine: isTwoLineTranscribingEnabled,
+        isTranslateLanguageOpened: translateLanguage !== null,
+        onResizeIndex: onResizeIndex,
+        isLast: index === rowCount - 1
+      })
+    }, item.id);
+  };
+  var noRowsRenderer = function noRowsRenderer() {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "fcr-subtitles-history__waiting-input",
+      children: [/*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_HOST,
+        size: 32,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        },
+        style: {
+          backgroundColor: 'var(--fcr_ui_scene_ramp_purple4)',
+          borderRadius: 'var(--fcr_cornerradius_m)'
+        }
+      }), /*#__PURE__*/_jsx(FcrIconAnimation, {
+        type: FcrIconAnimationType.FCR_SUBTITLES_HISTORY_ANIMATION,
+        style: {
+          marginLeft: 10
+        }
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsx(AutoSizer, {
+    onResize: onResize,
+    children: function children(_ref3) {
+      var height = _ref3.height,
+        width = _ref3.width;
+      return /*#__PURE__*/_jsx(List, {
+        ref: listRef,
+        className: "fcr-subtitles-history__list",
+        height: height,
+        width: width,
+        rowCount: rowCount,
+        onRowsRendered: handleRowsRendered,
+        noRowsRenderer: noRowsRenderer,
+        onScroll: handleScroll,
+        rowRenderer: rowRenderer,
+        rowHeight: cache.current.rowHeight,
+        deferredMeasurementCache: cache.current
+      });
+    }
+  });
+});

package/lib-es/modules/subtitles-history/components/respond-dialog-content.js

@@ -0,0 +1,36 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.function.name.js";
+import { FcrCheckbox } from 'agora-ui-foundation/lib/components/checkbox';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export var RespondDialogContent = function RespondDialogContent(props) {
+  var name = props.name,
+    _onChange = props.onChange,
+    _props$initialChecked = props.initialChecked,
+    initialChecked = _props$initialChecked === void 0 ? false : _props$initialChecked;
+  var t = useI18n();
+  var _useState = useState(initialChecked),
+    _useState2 = _slicedToArray(_useState, 2),
+    checked = _useState2[0],
+    setChecked = _useState2[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("p", {
+      style: {
+        marginBottom: 20
+      },
+      children: t('fmt_ai_rtt_window_label_enable_request_content', {
+        reason1: name
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(FcrCheckbox, {
+        label: t('fmt_ai_rtt_window_option_decline_all_request'),
+        checked: checked,
+        onChange: function onChange() {
+          setChecked(!checked);
+          _onChange(!checked);
+        }
+      })
+    })]
+  });
+};

package/lib-es/modules/subtitles-history/components/settings/index.css

@@ -0,0 +1,5 @@
+.fcr-subtitles-history-settings__icon.frc-window-header__icon:hover svg,
+.fcr-subtitles-history-settings__icon.frc-window-header__icon:hover path {
+  stroke: var(--fcr_ui_scene_ramp_brand6);
+  fill: transparent;
+}

package/lib-es/modules/subtitles-history/components/settings/index.js

@@ -0,0 +1,46 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import { CaptionMenu } from '../../../components/caption-menu';
+import { FcrIconButton } from 'agora-ui-foundation/lib/components/icon-button';
+import './index.css';
+import { SubtitlesHistoryContext } from '../../store.base';
+import { useContext } from 'react';
+import { observer } from 'mobx-react';
+import { FcrUICaptionMenuType } from '../../../components/caption-menu/translation-setting-options';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SubtitlesHistorySettings = observer(function () {
+  var _useContext = useContext(SubtitlesHistoryContext),
+    settingProps = _useContext.settingProps;
+  return /*#__PURE__*/_jsx(FcrPopover, {
+    showArrow: false,
+    trigger: "click",
+    content: /*#__PURE__*/_jsx(CaptionMenu, _objectSpread({
+      menuType: FcrUICaptionMenuType.TRANSCRIBING
+    }, settingProps)),
+    placement: "bottomLeft",
+    children: /*#__PURE__*/_jsx(FcrIconButton, {
+      className: "fcr-subtitles-history-settings__icon frc-window-header__icon fcr-no-drag ",
+      icon: FcrIconType.FCR_SETTING2,
+      iconColors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    })
+  });
+});

package/lib-es/modules/subtitles-history/components/timer.js

@@ -0,0 +1,36 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/web.timers.js";
+import { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Timer = function Timer(props) {
+  var handleTimeOver = props.handleTimeOver;
+  var _useState = useState(10),
+    _useState2 = _slicedToArray(_useState, 2),
+    seconds = _useState2[0],
+    setSeconds = _useState2[1];
+  var timerId = useRef(null);
+  var secondsRef = useRef(seconds);
+  useEffect(function () {
+    var _timer = function timer() {
+      timerId.current = window.setTimeout(function () {
+        if (secondsRef.current <= 0) {
+          timerId.current = null;
+          handleTimeOver();
+        } else {
+          secondsRef.current -= 1;
+          setSeconds(secondsRef.current);
+          _timer();
+        }
+      }, 1000);
+    };
+    _timer();
+    return function () {
+      if (timerId.current) {
+        clearTimeout(timerId.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("span", {
+    children: seconds
+  });
+};

package/lib-es/modules/subtitles-history/components/title.js

@@ -0,0 +1,8 @@
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Title = function Title() {
+  var transI18n = useI18n();
+  return /*#__PURE__*/_jsx("span", {
+    children: transI18n('fmt_ai_transcriptions_toolbar_button_realtime_transcription')
+  });
+};

package/lib-es/modules/subtitles-history/empty.js

@@ -0,0 +1,14 @@
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import DefaultPage from '../../../public/assets/fcr_defaultpage.png';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  var t = useI18n();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-no-data-subtitles-history",
+    children: [/*#__PURE__*/_jsx("img", {
+      src: DefaultPage
+    }), /*#__PURE__*/_jsx("span", {
+      children: t('fmt_ai_summary_detail_label_no_content')
+    })]
+  });
+});

package/lib-es/modules/subtitles-history/index.css

@@ -0,0 +1,129 @@
+.fcr-subtitles-history__header {
+  display: flex;
+  align-items: center;
+  padding: 7px 12px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fcr_ui_scene_icontext1);
+  background-color: var(--fcr_web_ui_scene_fill4_popup);
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-no-data-subtitles-history {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.fcr-no-data-subtitles-history img {
+  width: 138px;
+  height: 100;
+  object-fit: contain;
+  margin-bottom: 20px;
+}
+
+.fcr-no-data-subtitles-history span {
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 14px;
+  font-family: PingFang HK;
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-subtitles-history-wrapper {
+  padding: 5px 15px 0 15px;
+  height: 100%;
+}
+
+.fcr-dialog-container .fcr-subtitles-history-wrapper-electron {
+  height: calc(100% - 46px);
+}
+
+.fcr-subtitles-history-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.fcr-subtitles-history__content {
+  margin: 24px 0 12px 0;
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.fcr-subtitles-history__waiting-input {
+  display: flex;
+  align-items: center;
+}
+
+.fcr-subtitles-history__list__item {
+  display: flex;
+  padding-bottom: 24px;
+}
+
+.fcr-subtitles-history__list__item__action {
+  margin: 0 auto;
+  width: 128px;
+  height: 30px;
+  color: var(--fcr_ui_scene_icontext1);
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 30px;
+  text-align: center;
+  background: var(--fcr_chat_bg);
+  border-radius: var(--fcr_cornerradius_xxxxl);
+}
+
+.fcr-subtitles-history__list__item__head-icon {
+  margin-right: 12px;
+}
+
+.fcr-subtitles-history__list__item__info {
+  display: flex;
+  margin-bottom: 6px;
+  font-size: 12px;
+  line-height: 1;
+}
+.fcr-subtitles-history__list__item__info__name {
+  margin-right: 8px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+.fcr-subtitles-history__list__item__info__time {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.fcr-subtitles-history__list__item__text,
+.fcr-subtitles-history__list__item__text--translation {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-subtitles-history__list__item__text--translation {
+  margin-top: 6px;
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-subtitles-history__footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+
+.fcr-subtitles-history__footer__btn {
+  width: 100%;
+}
+
+.fcr-ui-subtitles-history-request-dialog .fcr-confirm-content-title {
+  text-align: center;
+}
+
+.fcr-ui-subtitles-history-request-dialog .fcr-button {
+  width: 50%;
+  flex-shrink: 1;
+}

package/lib-es/modules/subtitles-history/index.js

@@ -0,0 +1,89 @@
+import "core-js/modules/es.reflect.construct.js";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/es.array.concat.js";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { UIModule } from '../../base';
+import { Actions } from './components/actions';
+import { SubtitlesHistorySettings } from './components/settings';
+import { Title } from './components/title';
+import './index.css';
+import SubtitlesHistoryStoryBase, { SubtitlesHistoryContext } from './store.base';
+import SubtitlesHistoryStoryElectron from './store.electron';
+import { SubtitlesHistory } from './view';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SubtitlesHistoryUIModule = /*#__PURE__*/function (_UIModule) {
+  function SubtitlesHistoryUIModule() {
+    var _this;
+    _classCallCheck(this, SubtitlesHistoryUIModule);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, SubtitlesHistoryUIModule, [].concat(args));
+    _defineProperty(_this, "_store", null);
+    return _this;
+  }
+  _inherits(SubtitlesHistoryUIModule, _UIModule);
+  return _createClass(SubtitlesHistoryUIModule, [{
+    key: "store",
+    get: function get() {
+      if (!this._store) {
+        throw new Error('SubtitlesHistory store is not initialized');
+      }
+      return this._store;
+    }
+  }, {
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var args = {
+        objectManager: this.objectManager
+      };
+      this._store = isElectron() ? new SubtitlesHistoryStoryElectron(args) : new SubtitlesHistoryStoryBase(args);
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      var _this$_store;
+      (_this$_store = this._store) === null || _this$_store === void 0 || _this$_store.release();
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/_jsx(SubtitlesHistoryContext.Provider, {
+        value: this.store,
+        children: /*#__PURE__*/_jsx(SubtitlesHistory, {})
+      });
+    }
+  }, {
+    key: "getHeaderComponent",
+    value: function getHeaderComponent() {
+      return /*#__PURE__*/_jsx(Title, {});
+    }
+  }, {
+    key: "getActionsComponent",
+    value: function getActionsComponent() {
+      return /*#__PURE__*/_jsx(SubtitlesHistoryContext.Provider, {
+        value: this.store,
+        children: /*#__PURE__*/_jsx(Actions, {
+          settingSlot: /*#__PURE__*/_jsx(SubtitlesHistorySettings, {})
+        })
+      });
+    }
+  }, {
+    key: "getSettingsComponent",
+    value: function getSettingsComponent() {
+      return /*#__PURE__*/_jsx(SubtitlesHistoryContext.Provider, {
+        value: this.store,
+        children: /*#__PURE__*/_jsx(SubtitlesHistorySettings, {})
+      });
+    }
+  }]);
+}(UIModule);