fcr-ui-scene 3.7.9-alpha → 3.8.0

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

@@ -56,6 +56,8 @@ var _schedule = require("agora-foundation/lib/schedule");
 var _microphone = require("./components/microphone");
 var _carmera = require("./components/carmera");
 var _boundaryDetector = require("./components/boundary-detector");
+var _appsPopover = require("./components/apps-popover");
+var _hooks = require("./hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -291,7 +293,9 @@ var ControlBar = (0, _mobxReact.observer)(function () {
   var _useContext5 = (0, _react.useContext)(_store.StoreContext),
     draggableArea = _useContext5.draggableArea,
     currentShareDisplayId = _useContext5.currentShareDisplayId,
-    updateWindowBounds = _useContext5.updateWindowBounds;
+    updateWindowBounds = _useContext5.updateWindowBounds,
+    setArea = _useContext5.setArea,
+    removeArea = _useContext5.removeArea;
   var updatePosition = (0, _react.useContext)(_context.DragStateUpdaterContext);
   var _useContext6 = (0, _react.useContext)(_context.ControlBarCalculationUpdaterContext),
     setDimensions = _useContext6.setDimensions,
@@ -329,7 +333,7 @@ var ControlBar = (0, _mobxReact.observer)(function () {
   (0, _react.useLayoutEffect)(function () {
     if (visibility === 'hidden') {
       var timerId = setTimeout(function () {
-        updateWindowBounds();
+        updateWindowBounds(draggableArea);
         timerId = setTimeout(function () {
           if (!containerRef.current) return;
           var bounds = containerRef.current.getBoundingClientRect();
@@ -348,6 +352,7 @@ var ControlBar = (0, _mobxReact.observer)(function () {
       };
     }
   }, [visibility]);
+  (0, _hooks.usePopoverWatcher)(containerRef, setArea, removeArea);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: containerRef,
     className: rootClassNames,
@@ -464,10 +469,8 @@ var MeetingControlGroup = (0, _mobxReact.observer)(function () {
 var SecurityMenuSection = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
   var hasSecurityPermission = _ref4.hasSecurityPermission;
   if (!hasSecurityPermission) return null;
-  var _useContext0 = (0, _react.useContext)(_store.StoreContext),
-    setPopoverArea = _useContext0.setPopoverArea;
-  var _useContext1 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext1.isShareActionNavHidden;
+  var _useContext0 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext0.isShareActionNavHidden;
   var _useState1 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
     showSecurityPopover = _useState10[0],
@@ -475,19 +478,9 @@ var SecurityMenuSection = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
   var handleVisibilityChange = (0, _react.useCallback)(function (visible) {
     setShowSecurityPopover(visible);
   }, []);
-  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
-    console.log('SecurityMenu boundaries changed', boundaries);
-    setPopoverArea(boundaries);
-  }, []);
   (0, _react.useEffect)(function () {
     if (isShareActionNavHidden) {
       setShowSecurityPopover(false);
-      setPopoverArea({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      });
     }
   }, [isShareActionNavHidden]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
@@ -499,10 +492,7 @@ var SecurityMenuSection = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
       backgroundColor: 'none',
       borderRadius: 'var(--fcr_cornerradius_l)'
     },
-    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
-      onBoundariesChanged: handleBoundariesChanged,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {})
-    }),
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {}),
     trigger: "click",
     visible: showSecurityPopover,
     onVisibleChange: handleVisibilityChange,
@@ -518,8 +508,8 @@ var SecurityMenuSection = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
 
 // 参与者区块
 var ParticipantSection = /*#__PURE__*/(0, _react.memo)(function () {
-  var _useContext10 = (0, _react.useContext)(_store.StoreContext),
-    handleOpenParticipant = _useContext10.handleOpenParticipant;
+  var _useContext1 = (0, _react.useContext)(_store.StoreContext),
+    handleOpenParticipant = _useContext1.handleOpenParticipant;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.ParticipantButton, {
     onTooltipButtonClick: handleOpenParticipant
   });
@@ -527,8 +517,8 @@ var ParticipantSection = /*#__PURE__*/(0, _react.memo)(function () {
 
 // 屏幕分享区块
 var ShareScreenSection = /*#__PURE__*/(0, _react.memo)(function () {
-  var _useContext11 = (0, _react.useContext)(_store.StoreContext),
-    handleNewShare = _useContext11.handleNewShare;
+  var _useContext10 = (0, _react.useContext)(_store.StoreContext),
+    handleNewShare = _useContext10.handleNewShare;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScreenButton.ShareScreenButton, {
     onCreateNewShareButtonClick: handleNewShare
   });
@@ -544,12 +534,12 @@ var MoreActionsSection = (0, _mobxReact.observer)(function () {
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
     isShowMeetingDetailPortal = _useState14[0],
     setIsShowMeetingDetailPortal = _useState14[1];
-  var _useContext12 = (0, _react.useContext)(_store.StoreContext),
-    newMessageCount = _useContext12.newMessageCount,
-    hasChatPermission = _useContext12.hasChatPermission,
-    setPopoverArea = _useContext12.setPopoverArea;
-  var _useContext13 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext13.isShareActionNavHidden;
+  var _useContext11 = (0, _react.useContext)(_store.StoreContext),
+    newMessageCount = _useContext11.newMessageCount,
+    hasChatPermission = _useContext11.hasChatPermission,
+    setAppActionbarPopoverVisible = _useContext11.setAppActionbarPopoverVisible;
+  var _useContext12 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext12.isShareActionNavHidden;
   (0, _react.useEffect)(function () {
     if (!moreVisible) {
       setIsShowMeetingDetailPortal(false);
@@ -560,19 +550,10 @@ var MoreActionsSection = (0, _mobxReact.observer)(function () {
   }, [moreVisible]);
   var handlePopoverClose = (0, _react.useCallback)(function () {
     setMoreVisible(false);
-    setPopoverArea({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    });
   }, []);
   var preventDefault = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
-  }, []);
-  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
-    console.log('More boundaries changed');
-    setPopoverArea(boundaries);
+    setAppActionbarPopoverVisible(false);
   }, []);
   var handlerVisibleChange = function handlerVisibleChange(visible) {
     setMoreVisible(visible);
@@ -580,25 +561,19 @@ var MoreActionsSection = (0, _mobxReact.observer)(function () {
   (0, _react.useEffect)(function () {
     if (isShareActionNavHidden) {
       setMoreVisible(false);
-      setPopoverArea({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      });
+      setAppActionbarPopoverVisible(false);
     }
   }, [isShareActionNavHidden]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.FcrBadge, {
     count: newMessageCount,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       onClick: preventDefault,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
-        visible: moreVisible,
-        onButtonClick: handleMoreButtonClick,
-        onVisibleChange: handlerVisibleChange,
-        morePopoverContent: isShowMeetingDetailPortal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
-          onBoundariesChanged: handleBoundariesChanged,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreActions.MorePopoverContent, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appsPopover.AppsPopover, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
+          visible: moreVisible,
+          onButtonClick: handleMoreButtonClick,
+          onVisibleChange: handlerVisibleChange,
+          morePopoverContent: isShowMeetingDetailPortal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreActions.MorePopoverContent, {
             closePopover: handlePopoverClose,
             hasChatPermission: hasChatPermission
           })
@@ -610,12 +585,25 @@ var MoreActionsSection = (0, _mobxReact.observer)(function () {
 
 // 音频分享区块
 var ShareAudioSection = (0, _mobxReact.observer)(function () {
-  var _useContext14 = (0, _react.useContext)(_store.StoreContext),
-    setShareWithAudioState = _useContext14.setShareWithAudioState,
-    isSharingWithAudio = _useContext14.isSharingWithAudio,
-    setShareAudioMode = _useContext14.setShareAudioMode,
-    audioShareMode = _useContext14.audioShareMode;
+  var _useContext13 = (0, _react.useContext)(_store.StoreContext),
+    setShareWithAudioState = _useContext13.setShareWithAudioState,
+    isSharingWithAudio = _useContext13.isSharingWithAudio,
+    setShareAudioMode = _useContext13.setShareAudioMode,
+    audioShareMode = _useContext13.audioShareMode;
+  var _useContext14 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext14.isShareActionNavHidden;
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    popoverVisible = _useState16[0],
+    setPopoverVisible = _useState16[1];
+  (0, _react.useEffect)(function () {
+    if (isShareActionNavHidden) {
+      setPopoverVisible(false);
+    }
+  }, [isShareActionNavHidden]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareAudio.ShareAudio, {
+    popoverVisible: popoverVisible,
+    setPopoverVisible: setPopoverVisible,
     shareWithAudio: isSharingWithAudio,
     currentAudioChannel: audioShareMode,
     toggleShareWithAudio: setShareWithAudioState,

package/lib/modules/dialog/components/confirm/index.js

@@ -127,7 +127,6 @@ var ConfirmWindow = exports.ConfirmWindow = (0, _mobxReact.observer)(function (_
     return function () {
       clearTimeout(windowFocusTimerRef.current);
       calculateMethods["delete"](confirm);
-      handleConfirmMouseout();
     };
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, bind()), {}, {

package/lib/modules/dialog/components/dialog-container/component/body.d.ts

@@ -1,5 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
 import '../index.css';
+import { FcrUIDialogKey } from '../../../../../utilities/constant';
 type DialogBodyProps = PropsWithChildren<{
     title: string | React.ReactNode;
     actions: React.ReactNode;
@@ -7,6 +8,13 @@ type DialogBodyProps = PropsWithChildren<{
     closable: boolean;
     onClose?: () => void;
     hasSystemShadow?: boolean;
+    showTopIcon?: boolean;
+    dialogKey: FcrUIDialogKey;
+    dialogId?: string;
 }>;
+export declare const TopButton: (props: {
+    dialogKey: FcrUIDialogKey;
+    dialogId?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogContainerBody: FC<DialogBodyProps>;
 export {};

package/lib/modules/dialog/components/dialog-container/component/body.js

@@ -1,13 +1,42 @@
 "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.DialogContainerBody = void 0;
+exports.TopButton = exports.DialogContainerBody = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
 require("../index.css");
 var _env = require("agora-foundation/lib/utilities/env");
+var _store = require("../../../store.base");
+var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
+var TopButton = exports.TopButton = function TopButton(props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    getDialogWindow = _useContext.getDialogWindow;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isAlwaysOnTop = _useState2[0],
+    setIsAlwaysOnTop = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+    onClick: function onClick() {
+      var browserWindow = getDialogWindow(dialogKey);
+      browserWindow.setAlwaysOnTop(!isAlwaysOnTop, 'screen-saver');
+      setIsAlwaysOnTop(!isAlwaysOnTop);
+    },
+    icon: isAlwaysOnTop ? _type.FcrIconType.FCR_UNTOP : _type.FcrIconType.FCR_TOP,
+    className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
+    iconColors: {
+      iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+    }
+  });
+};
 var DialogContainerBody = exports.DialogContainerBody = function DialogContainerBody(_ref) {
   var actions = _ref.actions,
     title = _ref.title,
@@ -15,7 +44,12 @@ var DialogContainerBody = exports.DialogContainerBody = function DialogContainer
     onClose = _ref.onClose,
     autoHeight = _ref.autoHeight,
     closable = _ref.closable,
-    hasSystemShadow = _ref.hasSystemShadow;
+    hasSystemShadow = _ref.hasSystemShadow,
+    _ref$showTopIcon = _ref.showTopIcon,
+    showTopIcon = _ref$showTopIcon === void 0 ? false : _ref$showTopIcon,
+    dialogKey = _ref.dialogKey,
+    _ref$dialogId = _ref.dialogId,
+    dialogId = _ref$dialogId === void 0 ? '' : _ref$dialogId;
   // const { bind } = useContext(DialogContainerStore);
 
   // const { resizable } = isElectron() ? useContext(DialogInstanceContext) : { resizable: false };
@@ -39,7 +73,9 @@ var DialogContainerBody = exports.DialogContainerBody = function DialogContainer
   } : {};
   var hasClose = closable;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-dialog-container ".concat(!hasSystemShadow && 'fcr-dialog-container_shadow'),
+    className: (0, _classnames["default"])('fcr-dialog-container', {
+      'fcr-dialog-container_shadow': (0, _env.isElectron)() && hasSystemShadow ? false : true
+    }),
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
@@ -53,9 +89,12 @@ var DialogContainerBody = exports.DialogContainerBody = function DialogContainer
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
         children: title
-      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-dialog-container-actions",
-        children: actions
+        children: [actions, showTopIcon && (0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopButton, {
+          dialogKey: dialogKey,
+          dialogId: dialogId
+        })]
       })]
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
       className: "fcr-dialog-container-content",

package/lib/modules/dialog/components/dialog-container/index.css

@@ -64,7 +64,10 @@
   padding-right: 10px;
 }
 
-.fcr-dialog-container-content {
+.fcr-dialog-container-actions .frc-window-header__icon {
+  margin-left: 5px;
+}
+· .fcr-dialog-container-content {
   position: relative;
   border-bottom-left-radius: var(--fcr_cornerradius_xl);
   border-bottom-right-radius: var(--fcr_cornerradius_xl);

package/lib/modules/dialog/components/dialog-container/index.d.ts

@@ -12,6 +12,7 @@ type DialogContainerProps = PropsWithChildren<{
     dialogId?: string;
     closable?: boolean;
     autoHeight?: boolean;
+    showTopIcon?: boolean;
     style?: React.CSSProperties;
     maxWidth?: number;
     maxHeight?: number;

package/lib/modules/dialog/components/dialog-container/index.js

@@ -47,20 +47,26 @@ var DialogContainer = exports.DialogContainer = (0, _mobxReact.observer)(functio
     children = _ref.children,
     actions = _ref.actions,
     autoHeight = _ref.autoHeight,
+    showTopIcon = _ref.showTopIcon,
     closable = _ref.closable,
     style = _ref.style,
     maxWidth = _ref.maxWidth,
     maxHeight = _ref.maxHeight,
     minWidth = _ref.minWidth,
     minHeight = _ref.minHeight,
-    hasSystemShadow = _ref.hasSystemShadow;
+    hasSystemShadow = _ref.hasSystemShadow,
+    dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId;
   var dialogBody = /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.DialogContainerBody, {
     title: title,
     actions: actions,
     autoHeight: autoHeight !== null && autoHeight !== void 0 ? autoHeight : true,
     closable: closable !== null && closable !== void 0 ? closable : true,
+    showTopIcon: showTopIcon,
     onClose: _onClose,
     hasSystemShadow: hasSystemShadow,
+    dialogKey: dialogKey,
+    dialogId: dialogId,
     children: children
   });
   if ((0, _env.isElectron)()) return dialogBody;
@@ -123,6 +129,7 @@ var DialogContainer = exports.DialogContainer = (0, _mobxReact.observer)(functio
     minHeight: minHeight,
     maxWidth: maxWidth,
     maxHeight: maxHeight,
+    bounds: "window",
     onDragStop: function onDragStop(e, d) {
       updatePosition({
         x: d.x,

package/lib/modules/dialog/components/normal-window/index.d.ts

@@ -18,6 +18,7 @@ type FcrUIDialogProps = {
     maxWidth?: number;
     maxHeight?: number;
     hasSystemShadow?: boolean;
+    showTopIcon?: boolean;
 };
 export declare const NormalWindow: FC<FcrUIDialogProps>;
 export {};

package/lib/modules/dialog/components/normal-window/index.js

@@ -27,7 +27,8 @@ var NormalWindow = exports.NormalWindow = (0, _mobxReact.observer)(function (_re
     minHeight = _ref.minHeight,
     maxWidth = _ref.maxWidth,
     maxHeight = _ref.maxHeight,
-    hasSystemShadow = _ref.hasSystemShadow;
+    hasSystemShadow = _ref.hasSystemShadow,
+    showTopIcon = _ref.showTopIcon;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     getDialogRootNode = _useContext.getDialogRootNode,
     handleDialogClose = _useContext.handleDialogClose;
@@ -48,6 +49,7 @@ var NormalWindow = exports.NormalWindow = (0, _mobxReact.observer)(function (_re
     maxHeight: maxHeight,
     autoHeight: autoHeight,
     hasSystemShadow: hasSystemShadow,
+    showTopIcon: showTopIcon,
     children: body
   });
   if ((0, _env.isElectron)()) {

package/lib/modules/dialog/dialogs/caption/index.d.ts

@@ -0,0 +1,21 @@
+import type { FC, PropsWithChildren } from 'react';
+import { FcrUIDialogProps } from '../../type';
+type CaptionDialogProps = PropsWithChildren<FcrUIDialogProps>;
+export declare const windowConfig: {
+    title: string;
+    frame: false;
+    maximizable: false;
+    minimizable: false;
+    fullscreenable: false;
+    trafficLightPosition: {
+        x: number;
+        y: number;
+    };
+    resizable: false;
+    width: number;
+    height: number;
+    maxHeight: number;
+    alwaysOnTop: true;
+};
+export declare const CaptionDialog: FC<CaptionDialogProps>;
+export {};

package/lib/modules/dialog/dialogs/caption/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowConfig = exports.CaptionDialog = void 0;
+var _normalWindow = require("../../components/normal-window");
+var _jsxRuntime = require("react/jsx-runtime");
+var title = 'Caption Translation';
+var windowConfig = exports.windowConfig = {
+  title: title,
+  frame: false,
+  maximizable: false,
+  minimizable: false,
+  fullscreenable: false,
+  trafficLightPosition: {
+    x: 0,
+    y: 0
+  },
+  resizable: false,
+  width: 750,
+  height: 92,
+  maxHeight: 132,
+  alwaysOnTop: true
+};
+var CaptionDialog = exports.CaptionDialog = function CaptionDialog(props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId,
+    children = props.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow.NormalWindow, {
+    width: windowConfig.width,
+    height: windowConfig.height,
+    dialogKey: dialogKey,
+    dialogId: dialogId,
+    showTopIcon: false,
+    closable: false,
+    body: children,
+    maxHeight: windowConfig.maxHeight,
+    hasSystemShadow: true
+  });
+};

package/lib/modules/dialog/dialogs/chat/components/actions.js

@@ -31,9 +31,9 @@ var ChatActions = exports.ChatActions = (0, _mobxReact.observer)(function (_ref)
     mouseEnterDelay: 0,
     trigger: "hover",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
-      icon: _type.FcrIconType.FCR_WINDOWPAGE_BIGGER,
+      icon: _type.FcrIconType.FCR_TOGGLE_DIALOG,
       onClick: handleChatWindowAttach,
-      className: "frc-window-header__icon fcr-no-drag",
+      className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
       iconColors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext1)'
       }

package/lib/modules/dialog/dialogs/confirm/index.js

@@ -47,7 +47,7 @@ var ConfirmDialog = exports.ConfirmDialog = (0, _mobxReact.observer)(function (_
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.ConfirmWindow, {
         id: confirm.id,
         confirm: confirm.params
-      }, index);
+      }, confirm.id);
     })
   });
   if ((0, _env.isElectron)()) {

package/lib/modules/dialog/dialogs/participant/components/actions.js

@@ -19,9 +19,9 @@ var ParticipantActions = exports.ParticipantActions = function ParticipantAction
     mouseEnterDelay: 0,
     trigger: "hover",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
-      icon: _type.FcrIconType.FCR_WINDOWPAGE_BIGGER,
+      icon: _type.FcrIconType.FCR_TOGGLE_DIALOG,
       onClick: handleMergeView,
-      className: "frc-window-header__icon fcr-no-drag",
+      className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
       iconColors: {
         iconPrimary: 'var(--fcr_ui_scene_icontext1)'
       }

package/lib/modules/dialog/dialogs/subtitles-history/index.d.ts

@@ -0,0 +1,27 @@
+import type { FC, PropsWithChildren } from 'react';
+import { FcrUIDialogProps } from '../../type';
+type SubtitlesHistoryDialogProps = PropsWithChildren<FcrUIDialogProps> & {
+    header: React.ReactNode;
+    actions: React.ReactNode;
+};
+export declare const windowConfig: {
+    title: string;
+    frame: false;
+    maximizable: false;
+    minimizable: false;
+    fullscreenable: false;
+    trafficLightPosition: {
+        x: number;
+        y: number;
+    };
+    resizable: true;
+    width: number;
+    height: number;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    alwaysOnTop: false;
+};
+export declare const SubtitlesHistoryDialog: FC<SubtitlesHistoryDialogProps>;
+export {};

package/lib/modules/dialog/dialogs/subtitles-history/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowConfig = exports.SubtitlesHistoryDialog = void 0;
+var _normalWindow = require("../../components/normal-window");
+var _jsxRuntime = require("react/jsx-runtime");
+var title = 'Subtitles History';
+var windowConfig = exports.windowConfig = {
+  title: title,
+  frame: false,
+  maximizable: false,
+  minimizable: false,
+  fullscreenable: false,
+  trafficLightPosition: {
+    x: 0,
+    y: 0
+  },
+  resizable: true,
+  width: 500,
+  height: 460,
+  minWidth: 320,
+  minHeight: 400,
+  maxWidth: 620,
+  maxHeight: 900,
+  alwaysOnTop: false
+};
+var SubtitlesHistoryDialog = exports.SubtitlesHistoryDialog = function SubtitlesHistoryDialog(props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId,
+    header = props.header,
+    actions = props.actions,
+    children = props.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_normalWindow.NormalWindow, {
+    width: windowConfig.width,
+    height: windowConfig.height,
+    dialogKey: dialogKey,
+    dialogId: dialogId,
+    header: header,
+    actions: actions,
+    body: children,
+    minWidth: windowConfig.minWidth,
+    minHeight: windowConfig.minHeight,
+    maxWidth: windowConfig.maxWidth,
+    maxHeight: windowConfig.maxHeight,
+    hasSystemShadow: true,
+    showTopIcon: true
+  });
+};

package/lib/modules/dialog/store.base.d.ts

@@ -29,7 +29,7 @@ export declare abstract class DialogStoreBase implements FcrUIManagedObject {
     release(): void;
     abstract getDialogRootNode(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
     abstract getDialogRendererWindow(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
-    abstract getDialogWindow(dialogKey: FcrUIDialogKey, dialogId: string): FcrUIWindow;
+    abstract getDialogWindow(dialogKey: FcrUIDialogKey, dialogId?: string): FcrUIWindow;
     abstract handleConfirmMouseover(): void;
     abstract handleConfirmMouseout(): void;
     abstract removeObserverWindow(id: string): void;

package/lib/modules/dialog/store.browser.d.ts

@@ -4,7 +4,7 @@ import { FcrUIWindow } from '../../providers/window/type';
 export default class DialogStore extends DialogStoreBase {
     getDialogRendererWindow(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
     getDialogRootNode(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
-    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId: string): FcrUIWindow;
+    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId?: string): FcrUIWindow;
     handleMouseover(): void;
     handleMouseout(): void;
     handleSceneMounted(): void;

package/lib/modules/dialog/store.electron.d.ts

@@ -8,9 +8,7 @@ export default class DialogStore extends DialogStoreBase {
     private _renderer;
     private _mouseDetectProvider;
     private _confirmWindow;
-    private _subWindow;
     private _mouseOverState;
-    private _subWindowObserver;
     private _confirmWindowObserver;
     private _detactObserver;
     protected _dialogInfoObserver: FcrUIDialogObserver;
@@ -19,7 +17,7 @@ export default class DialogStore extends DialogStoreBase {
     constructor(args: DialogStoreArgs);
     getDialogRootNode(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
     getDialogRendererWindow(dialogKey: FcrUIDialogKey, dialogId: string): HTMLElement;
-    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId: string): FcrUIWindow;
+    getDialogWindow(dialogKey: FcrUIDialogKey, dialogId?: string): FcrUIWindow;
     handleConfirmMouseover(): void;
     handleConfirmMouseout(): void;
     handleSceneMounted(): void;

package/lib/modules/dialog/store.electron.js

@@ -87,12 +87,6 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
     _this = _callSuper(this, DialogStore, [args]);
     (0, _defineProperty2["default"])(_this, "_windowProvider", void _initProto(_this));
     (0, _defineProperty2["default"])(_this, "_mouseOverState", false);
-    (0, _defineProperty2["default"])(_this, "_subWindowObserver", {
-      onReady: function onReady() {
-        // @ts-ignore
-        _this._subWindow.rendererWindow.FcrUIMainWindowRenderer = window.FcrUIMainWindowRenderer;
-      }
-    });
     (0, _defineProperty2["default"])(_this, "_confirmWindowObserver", {
       onReady: function onReady() {
         var _window$screen = window.screen,
@@ -149,8 +143,6 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
     });
     _this.dialogProvider.addObserver(_this._dialogInfoObserver);
     _this._confirmWindow = _this._windowProvider.getWindowById(_constant.FcrUIDialogKey.CONFIRM, _constant.FcrUIDialogKey.CONFIRM);
-    _this._subWindow = _this._windowProvider.getWindowById(_constant.FcrUIDialogKey.SUB_WINDOW, _constant.FcrUIDialogKey.SUB_WINDOW);
-    _this._subWindow.addObserver(_this._subWindowObserver);
     _this._confirmWindow.addObserver(_this._confirmWindowObserver);
     _this.dialogProvider.openDialog(_constant.FcrUIDialogKey.CONFIRM);
     return _this;
@@ -255,7 +247,6 @@ var DialogStore = exports["default"] = /*#__PURE__*/function (_DialogStoreBase)
     value: function release() {
       _superPropGet(DialogStore, "release", this, 3)([]);
       this._confirmWindow.removeObserver(this._confirmWindowObserver);
-      this._subWindow.removeObserver(this._subWindowObserver);
       this.dialogProvider.removeObserver(this._dialogInfoObserver);
       this._mouseDetectProvider.deleteDetectArea(_struct.FcrUIDetectAreaID.Confirm);
       this._mouseDetectProvider.removeObserver(this._detactObserver);