fcr-ui-scene 3.6.4 → 3.7.1

package/lib/{modules/annotation/components → fragments/annotation}/toolbar/store.d.ts

@@ -1,9 +1,12 @@
 import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
-import { FcrUIPrivilegeProvider } from '../../../../providers/privilege-provider';
+import { FcrUIPrivilegeProvider } from '../../../providers/privilege-provider';
+import { FcrUISharedConfirmDataSource } from '../../../shared-data-source/confirm-data';
 export declare class AnnotationToolbarStore {
+    protected logger: import("agora-foundation/lib/logger").Logger;
     private _privilegeProvider;
     private _tipsTimer;
     private _disposer;
+    private _sharedConfirmDataSource;
     accessor observables: {
         currentTool: FcrBoardToolType;
         currentShape: FcrBoardShape;
@@ -17,10 +20,21 @@ export declare class AnnotationToolbarStore {
     };
     accessor isTipsVisible: boolean;
     accessor popoverVisible: boolean;
+    accessor toolbarCoords: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
     get hasAnnotationAllowWritePermission(): boolean;
     get allowAnnotationWriteState(): boolean;
-    constructor({ privilegeProvider }: {
+    get mousePosition(): {
+        x: number;
+        y: number;
+    };
+    constructor({ privilegeProvider, sharedConfirmDataSource, }: {
         privilegeProvider: FcrUIPrivilegeProvider;
+        sharedConfirmDataSource: FcrUISharedConfirmDataSource;
     });
     redo(): void;
     undo(): void;
@@ -30,6 +44,16 @@ export declare class AnnotationToolbarStore {
     setShape(shape: FcrBoardShape): void;
     setStrokeColor(color: string): void;
     setStrokeWidth(strokeWidth: number): void;
+    setToolbarCoords(coords: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
+    updatePosition(position: {
+        x: number;
+        y: number;
+    }): void;
     onTooltipMount(dom: HTMLDivElement): void;
     onTooltipUnmount(): void;
     setPopoverVisible(visible: boolean): void;

package/lib/{modules/annotation/components → fragments/annotation}/toolbar/store.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AnnotationToolbarStore = exports.AnnotationToolbarContext = void 0;
+require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.push.js");
@@ -55,12 +56,13 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _mobx = require("mobx");
-var _type = require("../../../whiteboard/type");
 var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
-var _rendererEvent = require("../../../../utilities/renderer-event");
 var _decorator = require("agora-foundation/lib/decorator");
+var _type = require("../../../modules/whiteboard/type");
+var _rendererEvent = require("../../../utilities/renderer-event");
+var _logger = require("../../../utilities/logger");
 var _AnnotationToolbarStore;
-var _initProto, _init_observables, _init_isTipsVisible, _init_popoverVisible, _setToolDecs, _setPenDecs, _setShapeDecs, _setStrokeColorDecs, _setStrokeWidthDecs, _onTooltipMountDecs, _onTooltipUnmountDecs, _setPopoverVisibleDecs, _ref;
+var _initProto, _init_observables, _init_isTipsVisible, _init_popoverVisible, _init_toolbarCoords, _setToolDecs, _setPenDecs, _setShapeDecs, _setStrokeColorDecs, _setStrokeWidthDecs, _setToolbarCoordsDecs, _updatePositionDecs, _onTooltipMountDecs, _onTooltipUnmountDecs, _setPopoverVisibleDecs, _ref;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
@@ -75,13 +77,17 @@ var colors = ['#E2E2E2', '#968D86', '#5A7D75', '#A1C473', '#51BD69', '#50E3C2',
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
-_ref = (_setToolDecs = [_mobx.action, _mobx.action.bound], _setPenDecs = [_mobx.action, _mobx.action.bound], _setShapeDecs = [_mobx.action, _mobx.action.bound], _setStrokeColorDecs = [_mobx.action, _mobx.action.bound], _setStrokeWidthDecs = [_mobx.action, _mobx.action.bound], _onTooltipMountDecs = [_mobx.action, _mobx.action.bound], _onTooltipUnmountDecs = [_mobx.action, _mobx.action.bound], _setPopoverVisibleDecs = [_mobx.action, _mobx.action.bound], "_privilegeProvider");
+var _D = /*#__PURE__*/new WeakMap();
+_ref = (_setToolDecs = [_mobx.action, _mobx.action.bound], _setPenDecs = [_mobx.action, _mobx.action.bound], _setShapeDecs = [_mobx.action, _mobx.action.bound], _setStrokeColorDecs = [_mobx.action, _mobx.action.bound], _setStrokeWidthDecs = [_mobx.action, _mobx.action.bound], _setToolbarCoordsDecs = [_mobx.action, _mobx.action.bound], _updatePositionDecs = [_mobx.action, _mobx.action.bound], _onTooltipMountDecs = [_mobx.action, _mobx.action.bound], _onTooltipUnmountDecs = [_mobx.action, _mobx.action.bound], _setPopoverVisibleDecs = [_mobx.action, _mobx.action.bound], "logger");
 var AnnotationToolbarStore = exports.AnnotationToolbarStore = /*#__PURE__*/function () {
   function AnnotationToolbarStore(_ref2) {
     var _this = this;
-    var privilegeProvider = _ref2.privilegeProvider;
+    var privilegeProvider = _ref2.privilegeProvider,
+      sharedConfirmDataSource = _ref2.sharedConfirmDataSource;
     (0, _classCallCheck2["default"])(this, AnnotationToolbarStore);
-    (0, _defineProperty2["default"])(this, _ref, void _initProto(this));
+    (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.createLogger)({
+      prefix: 'AnnotationToolbarStore'
+    })));
     (0, _defineProperty2["default"])(this, "_tipsTimer", null);
     (0, _defineProperty2["default"])(this, "_disposer", []);
     _classPrivateFieldInitSpec(this, _A, _init_observables(this, {
@@ -97,6 +103,13 @@ var AnnotationToolbarStore = exports.AnnotationToolbarStore = /*#__PURE__*/funct
     }));
     _classPrivateFieldInitSpec(this, _B, _init_isTipsVisible(this, true));
     _classPrivateFieldInitSpec(this, _C, _init_popoverVisible(this, false));
+    _classPrivateFieldInitSpec(this, _D, _init_toolbarCoords(this, {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    }));
+    this._sharedConfirmDataSource = sharedConfirmDataSource;
     this.setStrokeColor(colors[7]);
     this._privilegeProvider = privilegeProvider;
     this._disposer.push((0, _mobx.reaction)(function () {
@@ -131,6 +144,14 @@ var AnnotationToolbarStore = exports.AnnotationToolbarStore = /*#__PURE__*/funct
     set: function set(v) {
       _classPrivateFieldSet(_C, this, v);
     }
+  }, {
+    key: "toolbarCoords",
+    get: function get() {
+      return _classPrivateFieldGet(_D, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_D, this, v);
+    }
   }, {
     key: "hasAnnotationAllowWritePermission",
     get: function get() {
@@ -141,6 +162,11 @@ var AnnotationToolbarStore = exports.AnnotationToolbarStore = /*#__PURE__*/funct
     get: function get() {
       return this._privilegeProvider.allowAnnotationWriteState();
     }
+  }, {
+    key: "mousePosition",
+    get: function get() {
+      return this._sharedConfirmDataSource.position;
+    }
   }, {
     key: "redo",
     value: function redo() {
@@ -214,11 +240,33 @@ var AnnotationToolbarStore = exports.AnnotationToolbarStore = /*#__PURE__*/funct
         payload: strokeWidth
       });
     }
+  }, {
+    key: "setToolbarCoords",
+    value: function setToolbarCoords(coords) {
+      this.toolbarCoords = coords;
+    }
+  }, {
+    key: "updatePosition",
+    value: function updatePosition(position) {
+      this._sharedConfirmDataSource.setPosition(position);
+    }
   }, {
     key: "onTooltipMount",
     value: function onTooltipMount(dom) {
       var _this2 = this;
       if (dom) {
+        var react = dom.getBoundingClientRect();
+        var x = react.x,
+          y = react.y,
+          width = react.width,
+          height = react.height;
+        this.logger.info("[AnnotationToolbarStore] onTooltipMount: x=".concat(x, ", y=").concat(y, ", width=").concat(width, ", height=").concat(height));
+        this.setToolbarCoords({
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        });
         this.isTipsVisible = true;
         if (!this._tipsTimer) {
           this._tipsTimer = setTimeout(function () {
@@ -270,9 +318,10 @@ var AnnotationToolbarStore = exports.AnnotationToolbarStore = /*#__PURE__*/funct
   }]);
 }();
 _AnnotationToolbarStore = AnnotationToolbarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_AnnotationToolbarStore, [[_mobx.observable, 1, "observables"], [_mobx.observable, 1, "isTipsVisible"], [_mobx.observable, 1, "popoverVisible"], [_setToolDecs, 18, "setTool"], [_setPenDecs, 18, "setPen"], [_setShapeDecs, 18, "setShape"], [_setStrokeColorDecs, 18, "setStrokeColor"], [_setStrokeWidthDecs, 18, "setStrokeWidth"], [_onTooltipMountDecs, 18, "onTooltipMount"], [_onTooltipUnmountDecs, 18, "onTooltipUnmount"], [_setPopoverVisibleDecs, 18, "setPopoverVisible"], [_decorator.bound, 2, "setAllowAnnotationWrite"]], []).e, 4);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_AnnotationToolbarStore, [[_mobx.observable, 1, "observables"], [_mobx.observable, 1, "isTipsVisible"], [_mobx.observable, 1, "popoverVisible"], [_mobx.observable, 1, "toolbarCoords"], [_setToolDecs, 18, "setTool"], [_setPenDecs, 18, "setPen"], [_setShapeDecs, 18, "setShape"], [_setStrokeColorDecs, 18, "setStrokeColor"], [_setStrokeWidthDecs, 18, "setStrokeWidth"], [_setToolbarCoordsDecs, 18, "setToolbarCoords"], [_updatePositionDecs, 18, "updatePosition"], [_onTooltipMountDecs, 18, "onTooltipMount"], [_onTooltipUnmountDecs, 18, "onTooltipUnmount"], [_setPopoverVisibleDecs, 18, "setPopoverVisible"], [_decorator.bound, 2, "setAllowAnnotationWrite"]], []).e, 5);
 _init_observables = _applyDecs$e[0];
 _init_isTipsVisible = _applyDecs$e[1];
 _init_popoverVisible = _applyDecs$e[2];
-_initProto = _applyDecs$e[3];
+_init_toolbarCoords = _applyDecs$e[3];
+_initProto = _applyDecs$e[4];
 var AnnotationToolbarContext = exports.AnnotationToolbarContext = /*#__PURE__*/(0, _react.createContext)({});

package/lib/{modules/annotation/components → fragments/annotation}/toolbar/view.js

@@ -10,17 +10,20 @@ var _mobxReact = require("mobx-react");
 var _item = require("./components/item/item");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _react = require("react");
-var _useElectron = require("../../../dialog/hooks/useElectron");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _colorTool = require("./components/color-tool");
 var _penTool = require("./components/pen-tool");
 var _graphicTool = require("./components/graphic-tool");
 var _store = require("./store");
 var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
-var _annotationMenu = _interopRequireDefault(require("../../../components/annotation-menu"));
 var _tips = require("./components/tips");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 require("./style.css");
+var _useElectron = require("../../../modules/dialog/hooks/useElectron");
+var _annotationMenu = _interopRequireDefault(require("../../../modules/components/annotation-menu"));
+var _renderer = require("../../../utilities/renderer");
+var _rendererEvent = require("../../../utilities/renderer-event");
+var _constant = require("../../../utilities/constant");
 var _jsxRuntime = require("react/jsx-runtime");
 var AnnotationToolbar = exports.AnnotationToolbar = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_useElectron.DialogInstanceContext),
@@ -44,20 +47,50 @@ var AnnotationToolbar = exports.AnnotationToolbar = (0, _mobxReact.observer)(fun
     allowAnnotationWriteState = _useContext2.allowAnnotationWriteState,
     setAllowAnnotationWrite = _useContext2.setAllowAnnotationWrite,
     setPopoverVisible = _useContext2.setPopoverVisible,
-    popoverVisible = _useContext2.popoverVisible;
+    popoverVisible = _useContext2.popoverVisible,
+    setToolbarCoords = _useContext2.setToolbarCoords,
+    mousePosition = _useContext2.mousePosition,
+    toolbarCoords = _useContext2.toolbarCoords;
   var handleBlur = function handleBlur() {
     setPopoverVisible(false);
   };
+  var handleDrag = function handleDrag(e) {
+    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
+      x = _e$currentTarget$getB.x,
+      y = _e$currentTarget$getB.y,
+      width = _e$currentTarget$getB.width,
+      height = _e$currentTarget$getB.height;
+    setToolbarCoords({
+      x: x,
+      y: y,
+      width: width,
+      height: height
+    });
+  };
+  var handleLeave = function handleLeave() {
+    (0, _rendererEvent.sendEvent)({
+      action: _constant.FcrUIRendererEventAction.SET_ANNOTATION_TO_FOCUS,
+      payload: true
+    });
+  };
   (0, _react.useEffect)(function () {
     browserWindow === null || browserWindow === void 0 || browserWindow.on('blur', handleBlur);
     return function () {
       browserWindow === null || browserWindow === void 0 || browserWindow.off('blur', handleBlur);
     };
   }, [popoverVisible]);
+  (0, _react.useEffect)(function () {
+    if ((0, _renderer.isMac)()) return;
+    if (mousePosition.x > toolbarCoords.x && mousePosition.y > toolbarCoords.y && mousePosition.x < toolbarCoords.x + toolbarCoords.width && mousePosition.y < toolbarCoords.y + toolbarCoords.height) {
+      browserWindow === null || browserWindow === void 0 || browserWindow.setAlwaysOnTop(true, 'pop-up-menu');
+    }
+  }, [mousePosition]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "annotation-toolbar",
     ref: onTooltipMount,
     onMouseDown: onTooltipUnmount,
+    onMouseMove: handleDrag,
+    onMouseLeave: handleLeave,
     children: [isTipsVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tips.AnnotationToolbarTips, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "annotation-toolbar-inner",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {

package/lib/fragments/annotation/view.d.ts

@@ -1,3 +1,4 @@
+import './style.css';
 import '../../modules/annotation/board-cursor.css';
 declare const View: () => import("react/jsx-runtime").JSX.Element;
 export default View;

package/lib/fragments/annotation/view.js

@@ -6,25 +6,67 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _mobxReact = require("mobx-react");
+require("core-js/modules/es.array.concat.js");
 var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _store = require("./store");
+require("./style.css");
 require("../../modules/annotation/board-cursor.css");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _rendererEvent = require("../../utilities/renderer-event");
+var _constant = require("../../utilities/constant");
+var _renderer = require("../../utilities/renderer");
 var _jsxRuntime = require("react/jsx-runtime");
 var View = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_store.AnnotationStoreContext),
+  var _useContext = (0, _react.useContext)(_store.FragmentAnnotationStoreContext),
     handleBoardDomLoad = _useContext.handleBoardDomLoad,
-    currentTool = _useContext.currentTool;
+    currentTool = _useContext.currentTool,
+    isIgnore = _useContext.isIgnore,
+    drawing = _useContext.drawing,
+    setDrawing = _useContext.setDrawing;
   var cursorClassname = "board-widget-cursor-".concat(currentTool);
-  var boardWidgetAppCls = (0, _classnames["default"])('board-widget-app', cursorClassname.toLowerCase());
+  var boardWidgetAppCls = (0, _classnames["default"])('fragment-annotation-wrapper', 'board-widget-app', cursorClassname.toLowerCase(), {
+    'fragment-annotation-wrapper-visible-hidden': isIgnore
+  });
+  var handleMouseMove = function handleMouseMove(e) {
+    requestIdleCallback(function (idle) {
+      if (!drawing && idle.timeRemaining() > 0) {
+        console.log("[annotation-fragment][View] mouse move event screen position, x: ".concat(e.screenX, ", y: ").concat(e.screenY));
+        (0, _rendererEvent.sendEvent)({
+          action: _constant.FcrUIRendererEventAction.FRAGMENT_ANNOTATION_MOUSE_MOVE,
+          payload: {
+            x: e.screenX,
+            y: e.screenY
+          }
+        });
+      }
+    }, {
+      timeout: 1000
+    });
+    // !drawing &&
+    //   sendEvent({
+    //     action: FcrUIRendererEventAction.FRAGMENT_ANNOTATION_MOUSE_MOVE,
+    //     payload: {
+    //       x: e.clientX,
+    //       y: e.clientY,
+    //     },
+    //   });
+  };
+  (0, _react.useEffect)(function () {
+    if ((0, _renderer.isMac)()) return;
+    drawing ? window.removeEventListener('mousemove', handleMouseMove) : window.addEventListener('mousemove', handleMouseMove);
+    return function () {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [drawing]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: boardWidgetAppCls,
-    style: {
-      width: '100vw',
-      height: '100vh',
-      overflow: 'hidden'
+    onMouseDown: function onMouseDown() {
+      return setDrawing(true);
     },
+    onMouseUp: function onMouseUp() {
+      return setDrawing(false);
+    },
+    className: boardWidgetAppCls,
     ref: handleBoardDomLoad
   });
 });

package/lib/modules/action-bar/components/apps/index.js

@@ -1,60 +1,76 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Apps = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
-var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _react = require("react");
 var _store = require("../../store");
 var _mobxReact = require("mobx-react");
 var _item = require("../item");
-var _appList = require("./app-list");
+var _appList = require("../../../components/apps/app-list");
+var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Apps = exports.Apps = (0, _mobxReact.observer)(function (_ref) {
   var id = _ref.id,
     order = _ref.order;
+  var t = (0, _i18n.useI18n)();
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
-    toggleLayoutBarLock = _useContext.toggleLayoutBarLock;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var onAppClick = function onAppClick() {
-    setVisible(false);
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-    content: 'Apps',
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
-      popoverProps: {
-        trigger: 'click',
-        visible: visible,
-        showArrow: false,
-        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {
-          onAppClick: onAppClick
-        }),
-        overlayInnerStyle: {
-          boxShadow: 'var(--fcr_web_light_dropup_m)',
-          border: 'none',
-          width: '374px',
-          height: 'auto'
-        },
-        onVisibleChange: function onVisibleChange(visible) {
-          toggleLayoutBarLock(visible);
-          setVisible(visible);
-        }
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
+    appItemOptions = _useContext.appItemOptions,
+    appActionbarPopoverVisible = _useContext.appActionbarPopoverVisible,
+    setAppActionbarPopoverVisible = _useContext.setAppActionbarPopoverVisible;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
+    popoverProps: {
+      trigger: 'click',
+      visible: appActionbarPopoverVisible,
+      showArrow: false,
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {
+        appItemProps: appItemOptions.map(function (v) {
+          return _objectSpread(_objectSpread({}, v), {}, {
+            name: t(v.name)
+          });
+        })
+      }),
+      overlayInnerStyle: {
+        boxShadow: 'var(--fcr_web_light_dropup_m)',
+        border: 'none',
+        width: '374px',
+        height: 'auto'
       },
-      id: id,
-      order: order,
-      icon: _type.FcrIconType.FCR_MOREAPP,
-      title: "Apps",
-      iconColors: {
-        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      onVisibleChange: function onVisibleChange(visible) {
+        toggleLayoutBarLock(visible);
+        setAppActionbarPopoverVisible(visible);
       }
-    })
+    },
+    id: id,
+    order: order,
+    icon: _type.FcrIconType.FCR_MOREAPP,
+    title: "Apps",
+    iconColors: {
+      iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+    }
   });
 });

package/lib/modules/action-bar/components/chat/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Chat = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _item = require("../item");
 require("./index.css");
@@ -33,22 +32,6 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
     newMessageTooltipVisible = _useContext.newMessageTooltipVisible,
     hideNewMessageTooltip = _useContext.hideNewMessageTooltip,
     allNewMessage = _useContext.allNewMessage;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    tooltipVisible = _useState2[0],
-    setTooltipVisible = _useState2[1];
-  var handleTooltipVisibleChange = function handleTooltipVisibleChange(visible) {
-    if (visible && newMessageTooltipVisible) {
-      setTooltipVisible(false);
-    } else {
-      setTooltipVisible(visible);
-    }
-  };
-  (0, _react.useEffect)(function () {
-    if (newMessageTooltipVisible) {
-      setTooltipVisible(false);
-    }
-  }, [newMessageTooltipVisible]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-action-bar-chat-wrapper",
     children: [allNewMessage > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -79,22 +62,16 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
         message: latestMessage,
         onClose: hideNewMessageTooltip
       }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-        mouseEnterDelay: 0,
-        onVisibleChange: handleTooltipVisibleChange,
-        visible: tooltipVisible,
-        content: tooltip,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
-          onClick: toggleChat,
-          id: id,
-          order: order,
-          className: "fcr-action-bar-chat",
-          icon: _type.FcrIconType.FCR_WEB_CHAT,
-          title: title,
-          iconColors: {
-            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
-          }
-        })
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+        onClick: toggleChat,
+        id: id,
+        order: order,
+        className: "fcr-action-bar-chat",
+        icon: _type.FcrIconType.FCR_WEB_CHAT,
+        title: title,
+        iconColors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
       })
     })]
   });
@@ -106,6 +83,7 @@ var FcrChatroomTooltipContent = function FcrChatroomTooltipContent(_ref2) {
   var transI18n = (0, _i18n.useI18n)();
   var isPrivateMessage = false;
   var nickName = (message === null || message === void 0 ? void 0 : message.from.userName) || '';
+  var avatarImage = (message === null || message === void 0 ? void 0 : message.from.avatar) || '';
   var msg = (message === null || message === void 0 ? void 0 : message.type) === _type2.FcrChatRoomMessageType.Text ? message.content : '';
   msg = (0, _react.useMemo)(function () {
     return msg;
@@ -130,7 +108,8 @@ var FcrChatroomTooltipContent = function FcrChatroomTooltipContent(_ref2) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
       size: 32,
       textSize: 15,
-      nickName: nickName
+      nickName: nickName,
+      avatarImage: avatarImage
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames["default"])('fcr-chatroom-tooltip-content-text', 'fcr-chatroom-tooltip-content-text-width'),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/modules/action-bar/components/collapse/index.js

@@ -37,10 +37,10 @@ var _record = require("../record");
 var _screenShare = require("../screen-share");
 var _security = require("../security");
 var _settings = require("../settings");
-var _apps = require("../apps");
 require("../../index.css");
 var _triggerSubscribeLanguage = require("../trigger-subscribe-language");
 var _enums = require("../../enums");
+var _apps = require("../apps");
 var _jsxRuntime = require("react/jsx-runtime");
 // import { LiveStreaming } from './components/live-streaming';
 

package/lib/modules/action-bar/components/leave/index.js

@@ -40,10 +40,10 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
   var _useContext = (0, _react.useContext)(_store.ActionBarContext),
     localUserRole = _useContext.localUserRole,
     toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
-    popoverOpened = _useContext.popoverOpened,
     _setPopoverOpened = _useContext.setPopoverOpened,
     stateBarLeaveMeeting = _useContext.stateBarLeaveMeeting,
-    setStateBarLeaveMeeting = _useContext.setStateBarLeaveMeeting;
+    setStateBarLeaveMeeting = _useContext.setStateBarLeaveMeeting,
+    endMeetingPopoverOpened = _useContext.endMeetingPopoverOpened;
   var popOverRef = (0, _react.useRef)(false);
   var onPopoverChanged = function onPopoverChanged(v) {
     _setPopoverOpened(v);
@@ -52,12 +52,12 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
     props.onPopoverChanged(v);
   };
   var buttonProps = (0, _react.useMemo)(function () {
-    return popoverOpened ? {
+    return endMeetingPopoverOpened ? {
       type: 'gray'
     } : {
       styleType: 'danger'
     };
-  }, [popoverOpened]);
+  }, [endMeetingPopoverOpened]);
   var leaveMeetingContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_leaveMeeting.LeaveMeeting, {
     setPopoverOpened: function setPopoverOpened(value) {
       _setPopoverOpened(value);
@@ -105,10 +105,10 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
     };
   }, [stateBarLeaveMeeting]);
   (0, _react.useEffect)(function () {
-    if (popoverOpened) {
-      onPopoverChanged(popoverOpened);
+    if (endMeetingPopoverOpened) {
+      onPopoverChanged(endMeetingPopoverOpened);
     }
-  }, [popoverOpened]);
+  }, [endMeetingPopoverOpened]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
       showArrow: false,
@@ -116,7 +116,7 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
       overlayInnerStyle: {
         width: 280
       },
-      visible: popoverOpened,
+      visible: endMeetingPopoverOpened,
       onVisibleChange: onPopoverChanged,
       trigger: "click",
       placement: "topRight",
@@ -125,7 +125,7 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
         shape: "rounded",
         size: "XS"
       }, buttonProps), {}, {
-        children: popoverOpened ? transI18n('fmt_toolbar_button_cancel') : localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave')
+        children: endMeetingPopoverOpened ? transI18n('fmt_toolbar_button_cancel') : localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave')
       }))
     }), stateBarLeaveMeeting && LeaveMeetingPortal()]
   });