fcr-ui-scene 1.0.40 → 3.1.0

package/lib/modules/device-settings/video-settings/video-settings.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VideoSettings = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.iterator.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.to-string.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
+var _dialog = require("agora-ui-foundation/lib/components/dialog");
+require("agora-ui-foundation/lib/components/local-video-player/index.css");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _useNamespace = require("../common/useNamespace");
+var _context = require("../context");
+require("./index.css");
+var _videoEffect = require("../../device-pretest/settings/video-effect");
+var _store = require("../store");
+var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
+var _virtualBackgroundSetting = require("../../device-pretest/settings/virtual-background-setting");
+var _beauty = require("../../device-pretest/settings/beauty");
+var _videoSettingsBasic = require("./video-settings-basic");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2["default"])(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var LocalVideoPlayer = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('agora-ui-foundation/lib/components/local-video-player'));
+  });
+});
+var VideoSettings = exports.VideoSettings = (0, _mobxReact.observer)(function () {
+  var ns = (0, _useNamespace.useNamespace)('device-settings-video');
+  var containerRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    containerDom = _useState2[0],
+    setContainerDom = _useState2[1];
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    config = _useContext.config,
+    toggleLocalMirror = _useContext.toggleLocalMirror,
+    isLocalMirrorEnabled = _useContext.isLocalMirrorEnabled,
+    isLocalEditBeautyOptions = _useContext.isLocalEditBeautyOptions,
+    setVideoOrientation = _useContext.setVideoOrientation,
+    setBeautyOptions = _useContext.setBeautyOptions,
+    currentBeautyKey = _useContext.currentBeautyKey,
+    beautyOptions = _useContext.beautyOptions,
+    toggleLocalMirrorPreview = _useContext.toggleLocalMirrorPreview,
+    cameraDeviceId = _useContext.cameraDeviceId,
+    cameraEnabled = _useContext.cameraEnabled,
+    startVideo = _useContext.startVideo,
+    stopVideo = _useContext.stopVideo,
+    showForceOpenEffectDialog = _useContext.showForceOpenEffectDialog,
+    handleForceOpenVideoEffect = _useContext.handleForceOpenVideoEffect,
+    handleCancelForceOpenVideoEffect = _useContext.handleCancelForceOpenVideoEffect,
+    currentVirtualBackgroundName = _useContext.currentVirtualBackgroundName,
+    enableVirtualBackground = _useContext.enableVirtualBackground,
+    setEditBeautyKey = _useContext.setEditBeautyKey,
+    enableBeautyEffect = _useContext.enableBeautyEffect,
+    setCameraDevice = _useContext.setCameraDevice,
+    cameraDeviceList = _useContext.cameraDeviceList,
+    enableBeauty = _useContext.enableBeauty;
+  var _useState3 = (0, _react.useState)(beautyOptions[currentBeautyKey] || _store.DEFAULT_BEAUTY_VALUE),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    currentEditValue = _useState4[0],
+    setCurrentEditValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(_localVideoPlayer.VideoViewType.SELFIE_VIEW),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    currentVideoViewType = _useState6[0],
+    setCurrentVideoViewType = _useState6[1];
+  var currentBeautyKeyRef = (0, _react.useRef)(currentBeautyKey);
+  (0, _react.useEffect)(function () {
+    if (!isLocalMirrorEnabled) {
+      setCurrentVideoViewType(_localVideoPlayer.VideoViewType.SELFIE_VIEW);
+    }
+  }, [isLocalMirrorEnabled]);
+  (0, _react.useEffect)(function () {
+    setContainerDom(containerRef.current);
+  }, []);
+  (0, _react.useEffect)(function () {
+    setCurrentEditValue(beautyOptions[currentBeautyKey] || _store.DEFAULT_BEAUTY_VALUE);
+    currentBeautyKeyRef.current = currentBeautyKey;
+  }, [currentBeautyKey]);
+  var handleBeautyValueChange = function handleBeautyValueChange(value) {
+    setCurrentEditValue(value);
+    setBeautyOptions((0, _defineProperty2["default"])({}, currentBeautyKeyRef.current, value));
+  };
+  var handleResetBeautyValueChange = function handleResetBeautyValueChange() {
+    setCurrentEditValue(_store.DEFAULT_BEAUTY_VALUE);
+    setBeautyOptions((0, _defineProperty2["default"])({}, currentBeautyKeyRef.current, _store.DEFAULT_BEAUTY_VALUE));
+  };
+  var handleVideoViewChange = function handleVideoViewChange(key) {
+    toggleLocalMirrorPreview(key === _localVideoPlayer.VideoViewType.SELFIE_VIEW);
+    setCurrentVideoViewType(key);
+  };
+  var _useState7 = (0, _react.useState)('basic'),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    activeTab = _useState8[0],
+    setActiveTab = _useState8[1];
+  var handleActiveTab = function handleActiveTab(tabKey) {
+    setActiveTab(tabKey);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    ref: containerRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+      fallback: 'loading...',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LocalVideoPlayer, {
+        isLocalMirrorEnabled: isLocalMirrorEnabled,
+        userName: (config === null || config === void 0 ? void 0 : config.userName) || '',
+        isLocalEditBeautyOptions: isLocalEditBeautyOptions,
+        handleResetBeautyValueChange: handleResetBeautyValueChange,
+        currentEditValue: currentEditValue,
+        containerDom: containerDom,
+        handleBeautyValueChange: handleBeautyValueChange,
+        setVideoOrientation: setVideoOrientation,
+        cameraDeviceId: cameraDeviceId,
+        cameraEnabled: cameraEnabled,
+        startLocalVideo: function startLocalVideo(view) {
+          startVideo(isLocalMirrorEnabled, view);
+        },
+        stopLocalVideo: stopVideo,
+        currentVideoViewType: currentVideoViewType,
+        handleVideoViewChange: handleVideoViewChange
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoEffect.VideoEffect, {
+      currentTab: activeTab,
+      handleActiveTab: handleActiveTab,
+      tabContents: {
+        'basic': /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoSettingsBasic.VideoSettingsBasic, {
+          cameraDeviceId: cameraDeviceId !== null && cameraDeviceId !== void 0 ? cameraDeviceId : '',
+          setCameraDevice: setCameraDevice,
+          cameraDeviceList: cameraDeviceList
+        }),
+        'virtual-background': /*#__PURE__*/(0, _jsxRuntime.jsx)(_virtualBackgroundSetting.VirtualBackgroundSetting, {
+          currentVirtualBackgroundName: currentVirtualBackgroundName,
+          enableVirtualBackground: enableVirtualBackground
+        }),
+        'beauty-filter': /*#__PURE__*/(0, _jsxRuntime.jsx)(_beauty.Beauty, {
+          enableBeauty: enableBeauty,
+          setEditBeautyKey: setEditBeautyKey,
+          currentBeautyKey: currentBeautyKey,
+          enableBeautyEffect: enableBeautyEffect,
+          beautySettingOption: beautyOptions
+        })
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('mirror-video'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+          label: "\u955C\u50CF\u6211\u7684\u89C6\u9891",
+          checked: isLocalMirrorEnabled,
+          onChange: function onChange(enable) {
+            toggleLocalMirror(enable);
+            if (enable) {
+              setCurrentVideoViewType(_localVideoPlayer.VideoViewType.SELFIE_VIEW);
+            } else {
+              setCurrentVideoViewType(_localVideoPlayer.VideoViewType.CAMERA_VIEW);
+            }
+          }
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.FcrBasicConfirmDialog, {
+      visible: showForceOpenEffectDialog,
+      onOk: handleForceOpenVideoEffect,
+      getContainer: function getContainer() {
+        return containerRef.current;
+      },
+      onCancel: handleCancelForceOpenVideoEffect,
+      title: "\u8BBE\u5907\u6027\u80FD\u8FC7\u4F4E\uFF0C\u4E0D\u5EFA\u8BAE\u4F7F\u7528\u7279\u6548",
+      text: "\u4F60\u7684\u8BBE\u5907\u6027\u80FD\u8BC4\u5206\u4F4E\u4E8E\u6700\u4F73\u4F53\u9A8C\u7684\u8981\u6C42\uFF0C\u5982\u679C\u542F\u7528\u5F53\u524D\u529F\u80FD\u53EF\u80FD\u4F1A\u5BFC\u81F4\u8BBE\u5907\u53D1\u70ED\u548C\u5361\u987F",
+      cancelText: "\u53D6\u6D88",
+      okText: "\u786E\u5B9A\u5F00\u542F"
+    })]
+  });
+});
+var _default = exports["default"] = VideoSettings;

package/lib/modules/device-settings/view.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import './index.css';
+import './state/index.css';
+import './video-settings/index.css';
+import './audio-settings/index.css';
+import './storage-settings/index.css';
+import 'agora-ui-foundation/lib/components/tabs/index.css';
+import 'agora-ui-foundation/lib/components/volume-indicator/index.css';
+import 'agora-ui-foundation/lib/components/slider/index.css';
+export declare const DeviceSettingsView: FC;

package/lib/modules/device-settings/view.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeviceSettingsView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.iterator.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.to-string.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _env = require("agora-foundation/lib/utilities/env");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _useNamespace = require("./common/useNamespace");
+var _mobxReact = require("mobx-react");
+var _context = require("./context");
+var _store = require("./store");
+require("./index.css");
+require("./state/index.css");
+require("./video-settings/index.css");
+require("./audio-settings/index.css");
+require("./storage-settings/index.css");
+require("agora-ui-foundation/lib/components/tabs/index.css");
+require("agora-ui-foundation/lib/components/volume-indicator/index.css");
+require("agora-ui-foundation/lib/components/slider/index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2["default"])(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; } // import { State } from './state';
+// import { AudioSettings } from './audio-settings/audio-settings';
+// import { VideoSettings } from './video-settings/video-settings';
+// import { StorageSettings } from './storage-settings/storage-settings';
+// import { State } from './state';
+var State = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./state'));
+  });
+});
+var AudioSettings = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./audio-settings/audio-settings'));
+  });
+});
+var VideoSettings = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./video-settings/video-settings'));
+  });
+});
+var StorageSettings = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./storage-settings/storage-settings'));
+  });
+});
+var GeneralSettings = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./general-settings/general-settings'));
+  });
+});
+var tabContents = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _store.DeviceSettingTab.GENERAL, /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+  fallback: 'loading...',
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GeneralSettings, {})
+})), _store.DeviceSettingTab.AUDIO, /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+  fallback: 'loading...',
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AudioSettings, {})
+})), _store.DeviceSettingTab.VIDEO, /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+  fallback: 'loading...',
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoSettings, {})
+})), _store.DeviceSettingTab.STORAGE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+  fallback: 'loading...',
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StorageSettings, {})
+})), _store.DeviceSettingTab.STATE, /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
+  fallback: 'loading...',
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(State, {})
+}));
+var DeviceSettingsView = exports.DeviceSettingsView = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    dialogConfig = _useContext.dialogConfig,
+    setDialogConfig = _useContext.setDialogConfig;
+  var t = (0, _i18n.useI18n)();
+  var ns = (0, _useNamespace.useNamespace)('device-settings');
+  var getListItemCls = function getListItemCls(tabKey) {
+    return (0, _classnames["default"])(ns.e('nav-list-item'), ns.is('active', dialogConfig.activeTab === tabKey));
+  };
+  var getSurroundingCls = function getSurroundingCls(color) {
+    return (0, _classnames["default"])(ns.e('surrounding'), ns.em('surrounding', color));
+  };
+  var tabClickHandler = function tabClickHandler(tabKey) {
+    return function () {
+      setDialogConfig({
+        activeTab: tabKey
+      });
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.b(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('nav'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.GENERAL),
+          onClick: tabClickHandler(_store.DeviceSettingTab.GENERAL),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('orange'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_SETTING,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "\u5E38\u89C4\u8BBE\u7F6E"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.AUDIO),
+          onClick: tabClickHandler(_store.DeviceSettingTab.AUDIO),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('green'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_MUTE,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('device_option_voice')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.VIDEO),
+          onClick: tabClickHandler(_store.DeviceSettingTab.VIDEO),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('purple'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_CAMERA,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('device_option_video')
+          })]
+        }), (0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.STORAGE),
+          onClick: tabClickHandler(_store.DeviceSettingTab.STORAGE),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('storage'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              style: {
+                width: 24,
+                height: 22,
+                borderRadius: 6,
+                display: 'inline-block'
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: t('device_option_storage')
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+          className: getListItemCls(_store.DeviceSettingTab.STATE),
+          onClick: tabClickHandler(_store.DeviceSettingTab.STATE),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getSurroundingCls('blue'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_COMPUTERDATA,
+              colors: {
+                iconPrimary: 'white'
+              },
+              size: 24
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: "\u8D28\u91CF\u7EDF\u8BA1"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])(ns.e('tab-content-wrapper'), ns.is('tab-content-video-wrapper', dialogConfig.activeTab === 'video'), {
+        'is-electron': (0, _env.isElectron)()
+      }),
+      children: tabContents[dialogConfig.activeTab]
+    })]
+  });
+});

package/lib/modules/dialog/components/chat/electron.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+export declare const ChatElectronDialog: ({ children, chatAction }: PropsWithChildren<{
+    chatAction: React.ReactNode;
+}>) => null;

package/lib/modules/dialog/components/chat/electron.js

@@ -0,0 +1,59 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatElectronDialog = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _context = require("../../context");
+var _dialogs = require("../../dialogs");
+var _constant = require("../../../../utilities/constant");
+var _renderer = require("../../../../utilities/renderer");
+var _reactDom = require("react-dom");
+var _ = require(".");
+var _platform = require("../../../../utilities/platform");
+var _jsxRuntime = require("react/jsx-runtime");
+var ChatElectronDialog = exports.ChatElectronDialog = (0, _mobxReact.observer)(function (_ref) {
+  var children = _ref.children,
+    chatAction = _ref.chatAction;
+  var store = (0, _react.useContext)(_context.StoreContext);
+  (0, _react.useEffect)(function () {
+    var node;
+    window.runtime.openRendererWindow('chat', function (dom, browserWindow) {
+      _dialogs.dialogWindows.set(_constant.DialogKey.CHAT, browserWindow);
+      node = dom;
+      (0, _platform.isWindows)() && browserWindow.show(); // 修复 windows 下打开白屏的问题
+
+      if (store.currentDialogBounds.height) {
+        (0, _dialogs.setDialogBounds)(browserWindow, {
+          y: store.currentDialogBounds.y
+        });
+      }
+      (0, _renderer.handleWillClose)(browserWindow, function () {
+        (0, _reactDom.unmountComponentAtNode)(node);
+        _dialogs.dialogWindows["delete"](_constant.DialogKey.CHAT);
+        store.closeChatFromDialog();
+      });
+      (0, _reactDom.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+        value: store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ChatDialogContent, {
+          chatAction: chatAction,
+          children: children
+        })
+      }), dom);
+    }, {
+      frame: false,
+      fullscreen: false,
+      maximizable: false,
+      y: store.currentDialogBounds.y,
+      show: !(0, _platform.isWindows)()
+    });
+    return function () {
+      node && (0, _reactDom.unmountComponentAtNode)(node);
+      window.runtime.closeRendererWindow('chat');
+    };
+  }, []);
+  return null;
+});

package/lib/modules/dialog/components/chat/index.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+export declare const ChatDialogContent: ({ children, chatAction, }: PropsWithChildren<{
+    chatAction: React.ReactNode;
+}>) => import("react/jsx-runtime").JSX.Element;
+export declare const ChatDialog: ({ children, chatAction }: PropsWithChildren<{
+    chatAction: React.ReactNode;
+}>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatDialogContent = exports.ChatDialog = void 0;
+var _env = require("agora-foundation/lib/utilities/env");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _reactRnd = require("react-rnd");
+var _context = require("../../context");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
+var _type = require("agora-edu-core/lib/type");
+var _electron = require("./electron");
+var _jsxRuntime = require("react/jsx-runtime");
+var ChatDialogContent = exports.ChatDialogContent = (0, _mobxReact.observer)(function (_ref) {
+  var children = _ref.children,
+    chatAction = _ref.chatAction;
+  var _useContext = (0, _react.useContext)(_context.StoreContext),
+    closeChatFromDialog = _useContext.closeChatFromDialog,
+    moveChatFromDialogToAside = _useContext.moveChatFromDialogToAside,
+    chatRoomState = _useContext.chatRoomState;
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-chat-dialog-wrapper",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+      showClose: true,
+      rootClassName: 'chat-can-draggable',
+      title: chatRoomState === _type.FcrChatRoomConnectionState.Connected ? transI18n('fmt_chat_label_chat') : transI18n('fmt_aside_status_connecting'),
+      onTypeChange: moveChatFromDialogToAside,
+      onClose: closeChatFromDialog,
+      otherActions: chatAction,
+      type: _windowHeader.WindowType.WINDOW
+    }), children]
+  });
+});
+var ChatDialog = exports.ChatDialog = (0, _mobxReact.observer)(function (_ref2) {
+  var children = _ref2.children,
+    chatAction = _ref2.chatAction;
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.ChatElectronDialog, {
+      chatAction: chatAction,
+      children: children
+    });
+  }
+  var width = window.innerWidth;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    "default": {
+      width: 320,
+      height: 350,
+      x: width / 2 - 320 / 2,
+      y: 0
+    },
+    bounds: '.fcr-layout-content',
+    cancel: ".frc-window-header__operates",
+    minWidth: 320,
+    minHeight: 350,
+    dragHandleClassName: "chat-can-draggable",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChatDialogContent, {
+      chatAction: chatAction,
+      children: children
+    })
+  });
+});

package/lib/modules/dialog/components/confirm/electron.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
+declare const ConfirmElectronDialog: ({ children, params, }: PropsWithChildren<{
+    params: Partial<ConfirmContentProps> & {
+        height?: number;
+        x?: number;
+        y?: number;
+    };
+}>) => null;
+export default ConfirmElectronDialog;

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

@@ -0,0 +1,84 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _context2 = require("../../context");
+var _reactDom = require("react-dom");
+var _renderer = require("../../../../utilities/renderer");
+var _jsxRuntime = require("react/jsx-runtime");
+var ConfirmElectronDialog = (0, _mobxReact.observer)(function (_ref) {
+  var children = _ref.children,
+    params = _ref.params;
+  var store = (0, _react.useContext)(_context2.StoreContext);
+  (0, _react.useEffect)(function () {
+    var node;
+    (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var _ref3, x, y;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return store.setWorkArea();
+          case 2:
+            _context.t0 = _context.sent;
+            if (_context.t0) {
+              _context.next = 5;
+              break;
+            }
+            _context.t0 = {
+              x: 0,
+              y: 0
+            };
+          case 5:
+            _ref3 = _context.t0;
+            x = _ref3.x;
+            y = _ref3.y;
+            window.runtime.openRendererWindow('confirm-dialog', function (dom, browserWindow) {
+              node = dom;
+              browserWindow.focus(); // 这里打开的confirm dialog 不会走 openRendererWindow 中的 focus 逻辑，所以单独 focus 一下
+
+              (0, _renderer.handleWillClose)(browserWindow, function () {
+                (0, _reactDom.unmountComponentAtNode)(node);
+              });
+              (0, _reactDom.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.StoreContext.Provider, {
+                value: store,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "fcr-confirm-dialog-wrapper",
+                  children: children
+                })
+              }), dom);
+            }, {
+              frame: false,
+              fullscreen: false,
+              maximizable: false,
+              width: (params === null || params === void 0 ? void 0 : params.width) || 415,
+              height: (params === null || params === void 0 ? void 0 : params.height) || 190,
+              minWidth: 255,
+              minHeight: 160,
+              maxWidth: 620,
+              maxHeight: 700,
+              x: x + ((params === null || params === void 0 ? void 0 : params.x) || 0),
+              y: y + ((params === null || params === void 0 ? void 0 : params.y) || 0)
+            });
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+    return function () {
+      node && (0, _reactDom.unmountComponentAtNode)(node);
+      window.runtime.closeRendererWindow('confirm-dialog');
+    };
+  }, []);
+  return null;
+});
+var _default = exports["default"] = ConfirmElectronDialog;

package/lib/modules/dialog/components/confirm/index.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
+export declare const ConfirmDialog: FC<PropsWithChildren<{
+    dialogType: string;
+    params: (ConfirmContentProps & {
+        height?: number;
+        x?: number;
+        y?: number;
+    }) | undefined;
+}>>;