fcr-ui-scene 3.8.1 → 3.8.2

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

@@ -0,0 +1,103 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useContext, useState } from 'react';
+import '../index.css';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { StoreContext } from '../../../store.base';
+import { FcrIconButton } from 'agora-ui-foundation/lib/components/icon-button';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import classNames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var TopButton = function TopButton(props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId;
+  var _useContext = useContext(StoreContext),
+    getDialogWindow = _useContext.getDialogWindow;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAlwaysOnTop = _useState2[0],
+    setIsAlwaysOnTop = _useState2[1];
+  return /*#__PURE__*/_jsx(FcrIconButton, {
+    onClick: function onClick() {
+      var browserWindow = getDialogWindow(dialogKey);
+      browserWindow.setAlwaysOnTop(!isAlwaysOnTop, 'screen-saver');
+      setIsAlwaysOnTop(!isAlwaysOnTop);
+    },
+    icon: isAlwaysOnTop ? FcrIconType.FCR_UNTOP : FcrIconType.FCR_TOP,
+    className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
+    iconColors: {
+      iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+    }
+  });
+};
+export var DialogContainerBody = function DialogContainerBody(_ref) {
+  var actions = _ref.actions,
+    title = _ref.title,
+    children = _ref.children,
+    onClose = _ref.onClose,
+    autoHeight = _ref.autoHeight,
+    closable = _ref.closable,
+    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 };
+
+  var hasTitleOrActions = title || actions;
+  var resizable = false;
+  var electronContentHeight = 'calc(100vh - 76px)'; /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */
+  var contentHeight = 'calc(100% - 46px)'; /* 浏览器不需要减去阴影，高度需要 100% 减去 46px title */
+
+  if (autoHeight) {
+    electronContentHeight = 'auto';
+  }
+  if (isElectron()) {
+    contentHeight = electronContentHeight;
+  }
+  if (resizable) {
+    contentHeight = 'calc(100% - 46px)'; /* 当窗口需要拉伸时，会传值为 false 的 hasCustomShadow 过来，高度不需要自适应，所以内容区高度为 100vh 减去 title 高度 46px */
+  }
+  var contentStyle = hasTitleOrActions ? {
+    height: contentHeight
+  } : {};
+  var hasClose = closable;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames('fcr-dialog-container', {
+      'fcr-dialog-container_shadow': isElectron() && hasSystemShadow ? false : true
+    }),
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    children: [hasTitleOrActions ? /*#__PURE__*/_jsxs("header", {
+      className: "fcr-dialog-container-header"
+      // {...bind?.()}
+      ,
+      children: [actions && /*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsx("h2", {
+        children: title
+      }), actions && /*#__PURE__*/_jsxs("div", {
+        className: "fcr-dialog-container-actions",
+        children: [actions, showTopIcon && isElectron() && /*#__PURE__*/_jsx(TopButton, {
+          dialogKey: dialogKey,
+          dialogId: dialogId
+        })]
+      })]
+    }) : null, /*#__PURE__*/_jsx("section", {
+      className: "fcr-dialog-container-content",
+      style: contentStyle,
+      children: children
+    }), hasClose ? /*#__PURE__*/_jsx("a", {
+      className: "fcr-dialog-container-close",
+      onClick: onClose,
+      children: /*#__PURE__*/_jsx("span", {
+        children: "\xD7"
+      })
+    }) : null]
+  });
+};

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

@@ -0,0 +1,112 @@
+.fcr-dialog-container {
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  position: relative;
+  flex: 1;
+  width: 100%;
+  /* height: 100%; 此处设置 100% 会影响自适应高度布局 */
+  box-sizing: border-box;
+  overflow: hidden;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+  font-size: 14px;
+  z-index: 0;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+.fcr-dialog-container_shadow {
+  box-shadow: var(--fcr_web_light_dropup);
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-header {
+  width: 100%;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  -webkit-app-region: drag;
+  color: var(--fcr_ui_scene_icontext1);
+  justify-content: center;
+  cursor: move;
+  border-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-header h2 {
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  flex: 3;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-dialog-container-actions {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 10px;
+}
+
+.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);
+  overflow: hidden;
+}
+
+.fcr-dialog-container-content::-webkit-scrollbar {
+  display: none;
+}
+
+.fcr-dialog-container .fcr-dialog-container-content:first-child {
+  border-top-left-radius: var(--fcr_cornerradius_xl);
+  border-top-right-radius: var(--fcr_cornerradius_xl);
+}
+
+.fcr-dialog-container-close {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--fcr_ui_scene_ramp_red6);
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  display: block;
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+  text-align: center;
+  line-height: 14px;
+}
+
+.fcr-dialog-container-close span {
+  display: none;
+}
+
+.fcr-dialog-container-close:hover span {
+  display: block;
+  color: #fff;
+}
+
+.fcr-dialog-container-close:hover {
+  color: var(--fcr_ui_scene_ramp_red7);
+}

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

@@ -0,0 +1,135 @@
+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";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.parse-int.js";
+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 React from 'react';
+import { useState } from 'react';
+import { observer } from 'mobx-react';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { DialogContainerBody } from './component/body';
+import { Rnd } from 'react-rnd';
+import { WEB_DIALOG_LAYER } from '../../level-config';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DialogContainer = observer(function (_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    title = _ref.title,
+    _onClose = _ref.onClose,
+    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,
+    dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId;
+  var dialogBody = /*#__PURE__*/_jsx(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 (isElectron()) return dialogBody;
+  var _useState = useState({
+      width: width || 400,
+      height: height || 160
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    webSize = _useState2[0],
+    updateSize = _useState2[1];
+  var windowWidth = window.innerWidth;
+  var windowHeight = window.innerHeight;
+  var x = windowWidth / 2 - webSize.width / 2;
+  var y = windowHeight / 2 - webSize.height / 2;
+  var _useState3 = useState({
+      x: x,
+      y: y
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    updatePosition = _useState4[1];
+
+  // 应用尺寸限制的辅助函数
+  var constrainSize = function constrainSize(newSize) {
+    var constrainedWidth = newSize.width;
+    var constrainedHeight = newSize.height;
+
+    // 应用最小尺寸限制
+    if (minWidth && constrainedWidth < minWidth) {
+      constrainedWidth = minWidth;
+    }
+    if (minHeight && constrainedHeight < minHeight) {
+      constrainedHeight = minHeight;
+    }
+
+    // 应用最大尺寸限制
+    if (maxWidth && constrainedWidth > maxWidth) {
+      constrainedWidth = maxWidth;
+    }
+    if (maxHeight && constrainedHeight > maxHeight) {
+      constrainedHeight = maxHeight;
+    }
+    return {
+      width: constrainedWidth,
+      height: constrainedHeight
+    };
+  };
+  return /*#__PURE__*/_jsx(Rnd, {
+    dragHandleClassName: 'fcr-dialog-container-header',
+    style: _objectSpread({
+      position: 'absolute',
+      touchAction: 'none',
+      display: 'flex',
+      flexDirection: 'column',
+      zIndex: WEB_DIALOG_LAYER.NORMAL_DIALOG
+    }, style),
+    size: webSize,
+    position: position,
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
+    bounds: "window",
+    onDragStop: function onDragStop(e, d) {
+      updatePosition({
+        x: d.x,
+        y: d.y
+      });
+    },
+    onResizeStop: function onResizeStop(e, direction, ref, delta, position) {
+      var newSize = constrainSize({
+        width: parseInt(ref.style.width),
+        height: parseInt(ref.style.height)
+      });
+      updateSize(newSize);
+      updatePosition(position);
+    },
+    children: dialogBody
+  });
+});

package/lib-es/modules/dialog/components/host-area-container/index.js

@@ -0,0 +1,146 @@
+import { createContext } from 'react';
+// import renderer from '../../../../utilities/renderer';
+
+export var HotAreaContext = /*#__PURE__*/createContext({
+  placement: 'top'
+});
+export var HotAreaContainer = function HotAreaContainer(props) {
+  // const { children, width, height, placement = 'top', dialogKey } = props;
+  // // const {
+  // //   recordShareBounds,
+  // //   currentShareBounds,
+  // //   currentShareId,
+  // //   currentShareType,
+  // //   allApplicationWindows,
+  // // } = useContext(StoreContext);
+  // // const { browserWindow, newRendererWindow } = isElectron()
+  // //   ? useContext(DialogInstanceContext)
+  // //   : {};
+  // const windowFocusTimerRef = useRef<NodeJS.Timeout>();
+  // const [navCurrentPosition, setNavCurrentPosition] = useState(placement);
+  // const rndRef = useRef<any>(null);
+  // const { nearDisplayBounds: bounds } = useMemo(
+  //   () => followCorrectDisplay({ dialogKey: FcrUIDialogKey.ANNOTATION_TOOL }),
+  //   [],
+  // ) || {
+  //   nearDisplayBounds: {
+  //     width: 0,
+  //     height: 0,
+  //   },
+  // };
+  // const [coordination, setCoordination] = useState({
+  //   x: bounds.width / 2 - width / 2,
+  //   y: bounds.height - height - 60,
+  // });
+  // const bind = useDrag(({ delta: [dx, dy] }) => {
+  //   const x = coordination.x + dx;
+  //   const y = coordination.y + dy;
+  //   const maxX = bounds.width - (rndRef.current?.offsetWidth || width);
+  //   const maxY = bounds.height - height;
+  //   handleDragStop({
+  //     lastX: Math.max(0, Math.min(maxX, x)),
+  //     lastY: Math.max(0, Math.min(maxY, y)),
+  //   });
+  // });
+  // const handleDragStop = (data: { lastX: number; lastY: number }) => {
+  //   const { lastX: x, lastY: y } = data;
+  //   setCoordination({ x, y });
+  //   // 控制栏左上角在屏幕Y轴的最大坐标
+  //   const MAX_Y = bounds.height - height;
+  //   if (y >= MAX_Y) {
+  //     setNavCurrentPosition('bottom');
+  //   } else if (y <= 0) {
+  //     setNavCurrentPosition('top');
+  //   }
+  // };
+  // const handleMouseEnter = () => {
+  //   browserWindow?.focus();
+  //   browserWindow?.setIgnoreMouseEvents(false, { forward: true });
+  // };
+  // const handleMouseLeave = (e?: any) => {
+  //   browserWindow?.setIgnoreMouseEvents(true, { forward: true });
+  // };
+  // const handleMouseMove = () => {
+  //   browserWindow?.moveTop();
+  //   browserWindow?.focus();
+  //   browserWindow?.setIgnoreMouseEvents(false, { forward: true });
+  // };
+  // function getScreenBounds() {
+  //   // 当电脑系统更改主屏幕为非共享屏幕时，会导致正在共享屏幕的 x, y 坐标发生改变，并触发 merics-changed 事件，去重新计算 controlbar 的热区位置
+  //   // 但当初分享屏幕时是通过所选择屏幕的 bounds 通过 currentShareBounds 传递到热区计算函数获知到热区应该在哪个显示器上的
+  //   // 因此当系统的主屏幕发生改变，再次通过这个 currentShareBounds 获取的 x, y 坐标就是错误的，以下逻辑既是对此情况做出相应处理
+  //   // 同一个 currentShareBounds 代表选择分享的屏幕没有发生变化，通过它作为 key 去存屏幕信息。当存在这个 key 时，取出来去拿屏幕 id 去匹配，并重新赋值 x，y
+  //   let screenBounds = undefined;
+  //   if (recordShareBounds.has(currentShareBounds)) {
+  //     const { x: ox, y: oy, ...bounds } = recordShareBounds.get(currentShareBounds)!;
+  //     const { x, y } = renderer.getAllDisplays().find((display) => bounds.displayId === display.id)
+  //       ?.bounds || { x: ox, y: oy };
+  //     screenBounds = { x, y, ...bounds };
+  //     browserWindow?.setBounds(screenBounds);
+  //   } else {
+  //     recordShareBounds.clear();
+  //     screenBounds = getCurrentSharingWorkArea({
+  //       currentShareBounds,
+  //     });
+  //     recordShareBounds.set(currentShareBounds, screenBounds);
+  //   }
+  //   return screenBounds;
+  // }
+  // function checkMouseOver() {
+  //   if (windowFocusTimerRef.current) clearInterval(windowFocusTimerRef.current);
+  //   const screenBounds = getScreenBounds();
+  //   browserWindow &&
+  //     newRendererWindow &&
+  //     handleCheckMouseOver({
+  //       elem: rndRef.current,
+  //       browserWindow,
+  //       screenBounds,
+  //       newRendererWindow,
+  //       callback(timerId) {
+  //         windowFocusTimerRef.current = timerId;
+  //       },
+  //       dialog: dialogKey,
+  //     });
+  // }
+  // useEffect(() => {
+  //   isWindows() ? checkMouseOver() : getScreenBounds();
+  //   // TODO: screen
+  //   // @ts-ignore
+  //   window.runtime.screen.addListener(
+  //     // @ts-ignore
+  //     'display-metrics-changed',
+  //     isWindows() ? checkMouseOver : getScreenBounds,
+  //   );
+  //   handleMouseLeave();
+  //   return () => {
+  //     // TODO: screen
+  //     // @ts-ignore
+  //     window.runtime.screen.removeListener(
+  //       // @ts-ignore
+  //       'display-metrics-changed',
+  //       isWindows() ? checkMouseOver : getScreenBounds,
+  //     );
+  //     clearInterval(windowFocusTimerRef.current);
+  //   };
+  // }, [currentShareId]);
+  // return currentShareId ? (
+  //   <div
+  //     {...bind()}
+  //     style={{
+  //       width: 'fit-content',
+  //       transform: `translate(${coordination.x}px, ${coordination.y}px)`,
+  //     }}>
+  //     <div
+  //       ref={rndRef}
+  //       onMouseEnter={handleMouseEnter}
+  //       onMouseLeave={handleMouseLeave}
+  //       onMouseOver={handleMouseEnter}
+  //       onMouseMove={handleMouseMove}
+  //       onClick={handleMouseMove}>
+  //       <HotAreaContext.Provider value={{ placement }}>{children}</HotAreaContext.Provider>
+  //     </div>
+  //   </div>
+  // ) : (
+  //   <></>
+  // );
+};

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

@@ -0,0 +1,53 @@
+import { useCallback, useContext } from 'react';
+import { observer } from 'mobx-react';
+import { StoreContext } from '../../store.base';
+import { isElectron } from 'agora-foundation/lib/utilities/env';
+import { createPortal } from 'react-dom';
+import { DialogContainer } from '../dialog-container';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var NormalWindow = observer(function (_ref) {
+  var dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId,
+    body = _ref.body,
+    title = _ref.title,
+    actions = _ref.actions,
+    closable = _ref.closable,
+    autoHeight = _ref.autoHeight,
+    width = _ref.width,
+    height = _ref.height,
+    header = _ref.header,
+    minWidth = _ref.minWidth,
+    minHeight = _ref.minHeight,
+    maxWidth = _ref.maxWidth,
+    maxHeight = _ref.maxHeight,
+    hasSystemShadow = _ref.hasSystemShadow,
+    showTopIcon = _ref.showTopIcon;
+  var _useContext = useContext(StoreContext),
+    getDialogRootNode = _useContext.getDialogRootNode,
+    handleDialogClose = _useContext.handleDialogClose;
+  var onClose = useCallback(function () {
+    handleDialogClose(dialogId);
+  }, [dialogId]);
+  var container = /*#__PURE__*/_jsx(DialogContainer, {
+    title: title || header,
+    dialogKey: dialogKey,
+    actions: actions,
+    onClose: onClose,
+    closable: closable,
+    width: width,
+    height: height,
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
+    autoHeight: autoHeight,
+    hasSystemShadow: hasSystemShadow,
+    showTopIcon: showTopIcon,
+    children: body
+  });
+  if (isElectron()) {
+    var dialogRoot = getDialogRootNode(dialogKey, dialogId);
+    return /*#__PURE__*/createPortal(container, dialogRoot);
+  }
+  return container;
+});

package/lib-es/modules/dialog/dialogs/annotation-tool/index.js

@@ -0,0 +1,47 @@
+import { observer } from 'mobx-react';
+import { NormalWindow } from '../../components/normal-window';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var title = 'Annotation tool bar';
+export var windowConfig = {
+  y: 0,
+  x: 0,
+  maximizable: false,
+  backgroundColor: '#00000000',
+  hiddenInMissionControl: true,
+  hasShadow: false,
+  useContentSize: true,
+  minimizable: false,
+  resizable: false,
+  title: title,
+  type: 'panel',
+  skipTaskbar: true,
+  width: 800,
+  height: 100,
+  movable: false,
+  transparent: true
+};
+var hooksConfig = {
+  hasCustomShadow: false,
+  disableShortcutClose: true,
+  alwaysOnTop: 'screen-saver',
+  fullScreen: true,
+  ignoreMouseEvents: true
+};
+export var AnnotationBarDialog = observer(function (_ref) {
+  var dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId,
+    children = _ref.children;
+  // const body = (
+  //   <HotAreaContainer width={800} height={90} dialogKey={FcrUIDialogKey.ANNOTATION_TOOL}>
+  //     {children}
+  //   </HotAreaContainer>
+  // );
+
+  var body = children;
+  return /*#__PURE__*/_jsx(NormalWindow, {
+    dialogKey: dialogKey,
+    dialogId: dialogId,
+    title: title,
+    body: body
+  });
+});

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

@@ -0,0 +1,35 @@
+import { NormalWindow } from '../../components/normal-window';
+import { jsx as _jsx } from "react/jsx-runtime";
+var title = 'Caption Translation';
+export var 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
+};
+export var CaptionDialog = function CaptionDialog(props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId,
+    children = props.children;
+  return /*#__PURE__*/_jsx(NormalWindow, {
+    width: windowConfig.width,
+    height: windowConfig.height,
+    dialogKey: dialogKey,
+    dialogId: dialogId,
+    showTopIcon: false,
+    closable: false,
+    body: children,
+    maxHeight: windowConfig.maxHeight,
+    hasSystemShadow: true
+  });
+};

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

@@ -0,0 +1,36 @@
+import { observer } from 'mobx-react';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrIconButton } from 'agora-ui-foundation/lib/components/icon-button';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useContext } from 'react';
+import { StoreContext } from '../../../../chat/store';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ChatActions = observer(function (_ref) {
+  var dialogId = _ref.dialogId;
+  var _useContext = useContext(StoreContext),
+    changeChatAside = _useContext.changeChatAside;
+  var transI18n = useI18n();
+
+  // TODO:
+  var isSharingScreen = false;
+  var isSharingScreenOwner = false;
+  var isMeSharingScreen = isSharingScreen && isSharingScreenOwner;
+  var handleChatWindowAttach = function handleChatWindowAttach() {
+    changeChatAside();
+  };
+  var result = !isMeSharingScreen ? /*#__PURE__*/_jsx(FcrToolTip, {
+    content: transI18n('fmt_uimanager_option_mergeview'),
+    mouseEnterDelay: 0,
+    trigger: "hover",
+    children: /*#__PURE__*/_jsx(FcrIconButton, {
+      icon: FcrIconType.FCR_TOGGLE_DIALOG,
+      onClick: handleChatWindowAttach,
+      className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
+      iconColors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    })
+  }) : null;
+  return result;
+});