@agilemotion/oui-react-js 1.6.9 → 1.7.0

package/dist/components/layout/Layout.js

@@ -27,6 +27,7 @@ var _VideoPlayer = _interopRequireDefault(require("../media/VideoPlayer"));
 var _Portlet = _interopRequireDefault(require("../Portlet"));
 var _TabPanel = _interopRequireDefault(require("../TabPanel"));
 var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTemplateDesigner"));
+var _ChatRoomWrapper = _interopRequireDefault(require("../media/chat/ChatRoomWrapper"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof 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; }
@@ -83,135 +84,188 @@ const Layout = exports.Layout = /*#__PURE__*/_react.default.forwardRef((props, r
     if (_Utils.default.isNull(component.id)) {
       return null;
     } else {
-      return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(Layout, {
-        handle: createComponentHandle(component),
-        config: component,
-        ref: /*#__PURE__*/_react.default.createRef(),
-        tableRow: props.tableRow,
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'toolbar' ? /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        tableRow: props.tableRow,
-        key: index,
-        ref: /*#__PURE__*/_react.default.createRef(),
-        viewId: props.viewId
-      }) : component.type === 'tab' ? /*#__PURE__*/_react.default.createElement(_TabPanel.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        tableRow: props.tableRow,
-        key: index,
-        ref: /*#__PURE__*/_react.default.createRef(),
-        viewId: props.viewId
-      }) : component.type === 'dataGrid' ? /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'form' ? /*#__PURE__*/_react.default.createElement(_Form.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId,
-        className: 'defaultForm'
-      }) : component.type === 'htmlPanel' ? /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        viewId: props.viewId,
-        key: index,
-        ref: /*#__PURE__*/_react.default.createRef()
-      }) : component.type === 'portlet' ? /*#__PURE__*/_react.default.createElement(_Portlet.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        viewId: props.viewId,
-        ref: /*#__PURE__*/_react.default.createRef()
-      }) : component.type === 'tree' ? /*#__PURE__*/_react.default.createElement(_Tree.Tree, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'titleBar' ? /*#__PURE__*/_react.default.createElement(_TitleBar.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'stepperTitleBar' ? /*#__PURE__*/_react.default.createElement(_StepperTitleBar.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'alertBar' ? /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'signatureTemplateDesigner' ? /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'documentViewer' ? /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'vcRoom' ? /*#__PURE__*/_react.default.createElement(_VCRoom.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'userVideo' ? /*#__PURE__*/_react.default.createElement(_Video.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'videoPlayer' ? /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'signaturePanel' ? /*#__PURE__*/_react.default.createElement(_SignaturePanel.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'dialog' ? /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'calendar' ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'templateDesigner' ? /*#__PURE__*/_react.default.createElement(_TemplateDesigner.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : component.type === 'documentTemplateDesigner' ? /*#__PURE__*/_react.default.createElement(_DocumentTemplateDesigner.default, {
-        config: component,
-        handle: createComponentHandle(component),
-        ref: /*#__PURE__*/_react.default.createRef(),
-        key: index,
-        viewId: props.viewId
-      }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
+      switch (component.type) {
+        case 'layout':
+          return /*#__PURE__*/_react.default.createElement(Layout, {
+            handle: createComponentHandle(component),
+            config: component,
+            ref: /*#__PURE__*/_react.default.createRef(),
+            tableRow: props.tableRow,
+            key: index,
+            viewId: props.viewId
+          });
+        case 'toolbar':
+          return /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            tableRow: props.tableRow,
+            key: index,
+            ref: /*#__PURE__*/_react.default.createRef(),
+            viewId: props.viewId
+          });
+        case 'tab':
+          return /*#__PURE__*/_react.default.createElement(_TabPanel.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            tableRow: props.tableRow,
+            key: index,
+            ref: /*#__PURE__*/_react.default.createRef(),
+            viewId: props.viewId
+          });
+        case 'dataGrid':
+          return /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'form':
+          return /*#__PURE__*/_react.default.createElement(_Form.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId,
+            className: 'defaultForm'
+          });
+        case 'htmlPanel':
+          return /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            viewId: props.viewId,
+            key: index,
+            ref: /*#__PURE__*/_react.default.createRef()
+          });
+        case 'portlet':
+          return /*#__PURE__*/_react.default.createElement(_Portlet.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            viewId: props.viewId,
+            ref: /*#__PURE__*/_react.default.createRef()
+          });
+        case 'tree':
+          return /*#__PURE__*/_react.default.createElement(_Tree.Tree, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'titleBar':
+          return /*#__PURE__*/_react.default.createElement(_TitleBar.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'stepperTitleBar':
+          return /*#__PURE__*/_react.default.createElement(_StepperTitleBar.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'alertBar':
+          return /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'signatureTemplateDesigner':
+          return /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'documentViewer':
+          return /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'vcRoom':
+          return /*#__PURE__*/_react.default.createElement(_VCRoom.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'userVideo':
+          return /*#__PURE__*/_react.default.createElement(_Video.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'videoPlayer':
+          return /*#__PURE__*/_react.default.createElement(_VideoPlayer.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'signaturePanel':
+          return /*#__PURE__*/_react.default.createElement(_SignaturePanel.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'dialog':
+          return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'calendar':
+          return /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'templateDesigner':
+          return /*#__PURE__*/_react.default.createElement(_TemplateDesigner.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'documentTemplateDesigner':
+          return /*#__PURE__*/_react.default.createElement(_DocumentTemplateDesigner.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'chatRoom':
+          return /*#__PURE__*/_react.default.createElement(_ChatRoomWrapper.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            ref: /*#__PURE__*/_react.default.createRef(),
+            key: index,
+            viewId: props.viewId
+          });
+        default:
+          return /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
+      }
     }
   }
   const api = () => {
@@ -263,7 +317,7 @@ const Layout = exports.Layout = /*#__PURE__*/_react.default.forwardRef((props, r
       border: 'none',
       minWidth: '128px',
       width: 'auto',
-      height: 'auto',
+      height: '100%',
       margin: 0,
       padding: 0
     }, component);

package/dist/components/media/Toolbar.js

@@ -33,6 +33,7 @@ const Toolbar = props => {
   const [raisedHandsNames, setRaisedHandsNames] = (0, _react.useState)([]);
   const [buttonVisibility, setButtonVisibility] = (0, _react.useState)({});
   const [allButtonsVisible, setAllButtonsVisible] = (0, _react.useState)(false);
+  const buttonStripRef = (0, _react.useRef)();
   const [testButtons, setTestButtons] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
     let buttons = [];
@@ -184,6 +185,7 @@ const Toolbar = props => {
   }, roomStatus === 'SESSION_ENDED' ? /*#__PURE__*/_react.default.createElement("div", {
     className: 'row centered-flex-box button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, null)) : /*#__PURE__*/_react.default.createElement("div", {
+    ref: buttonStripRef,
     className: 'row flex-nowrap',
     style: {
       justifyContent: 'right',
@@ -209,6 +211,7 @@ const Toolbar = props => {
   }, isHost && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('record', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Record"
@@ -243,6 +246,7 @@ const Toolbar = props => {
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('video', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Video"
@@ -278,6 +282,7 @@ const Toolbar = props => {
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('audio', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Audio"
@@ -305,6 +310,7 @@ const Toolbar = props => {
   }, "Mic"))))))), ' ', roomStatus === 'SESSION' && !whiteBoardShown && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper col no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('shareScreen', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Share"
@@ -348,6 +354,7 @@ const Toolbar = props => {
   }, participants.length), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('people', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "People"
@@ -371,9 +378,10 @@ const Toolbar = props => {
     className: 'button-wrapper'
   }, hasUnreadChats && /*#__PURE__*/_react.default.createElement("div", {
     className: 'marker'
-  }, hasUnreadChats), /*#__PURE__*/_react.default.createElement("div", {
+  }, '1'), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('chat', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: "Chat"
@@ -400,6 +408,7 @@ const Toolbar = props => {
   }, raisedHands.length), /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    root: buttonStripRef,
     onVisibilityChange: visible => handleVisibilityChange('raiseHand', visible)
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: raisedHands.length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, renderRaisedHandsToolTip()) : handRaised ? 'Lower hand' : 'Raise hand'
@@ -644,7 +653,15 @@ const Toolbar = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'PEOPLE'
-  })), /*#__PURE__*/_react.default.createElement("div", null, participants.length, "\xA0People"))), !buttonVisibility.raiseHand && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", null, participants.length, "\xA0People"))), roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'button-wrapper no-margin no-padding'
+  }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    onClick: () => {
+      showChat();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'CHAT_BUBBLE'
+  })), /*#__PURE__*/_react.default.createElement("div", null, hasUnreadChats ? '1' : '', "\xA0Chat"))), !buttonVisibility.raiseHand && roomStatus === 'SESSION' && /*#__PURE__*/_react.default.createElement("div", {
     className: 'button-wrapper no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
     onClick: () => {

package/dist/components/media/ToolbarButton.js

@@ -13,8 +13,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const ToolbarButton = props => {
   const ref = (0, _react.useRef)();
-  const isVisible = (0, _UseIsVisible.useIsVisible)(ref);
+  const isVisible = (0, _UseIsVisible.useIsVisible)(ref, props.root?.current);
   const [visible, setVisible] = (0, _react.useState)(null);
+  const [contentWidth, setContentWidth] = (0, _react.useState)(null);
   const {
     children
   } = props;
@@ -25,6 +26,9 @@ const ToolbarButton = props => {
     } else {
       setVisible(isVisible);
       props.onVisibilityChange(isVisible);
+      if (isVisible) {
+        setContentWidth(ref.current.getBoundingClientRect().right - ref.current.getBoundingClientRect().left);
+      }
     }
   }, [isVisible]);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -34,7 +38,7 @@ const ToolbarButton = props => {
     }
   }, !isVisible ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: '100%'
+      width: contentWidth ? contentWidth : '100%'
     }
   }, "\xA0") : children);
 };

package/dist/components/media/TrainingRoom.js

@@ -101,6 +101,9 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
             setScreenShared(false);
             setStartScreenSharing(false);
             break;
+          case _VCEventType.VCEventType.CHAT_MESSAGE:
+            onMessage(be.payload);
+            break;
           case _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED:
             hangUp();
             alert('Connection error - Please check your network connection and re-join the meeting');
@@ -109,6 +112,17 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
       }
     };
   };
+  const onMessage = message => {
+    if (sideBarTab !== 'Chat') {
+      let chatMessage = message.chatMessage;
+      if (_ApplicationManager.default.getUserDetails().username !== chatMessage.participant.username) {
+        handleMessageArrived({
+          message: chatMessage.participant.name + " " + chatMessage.participant.name + (chatMessage.content && chatMessage.content.trim().length > 0 ? " - " + chatMessage.content : '')
+        });
+        setHasUnreadChats(true);
+      }
+    }
+  };
   const onRaiseHand = payload => {
     raisedHands.push(payload.userId);
     setRaisedHands([].concat(raisedHands));
@@ -258,7 +272,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     }).then(initialContext => {
       setDisplayState(initialContext ? initialContext.windowDisplayState : 'MAXIMIZED');
     });
-    _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.REQUEST_TO_JOIN_MEETING, _VCEventType.VCEventType.USER_JOINED, _VCEventType.VCEventType.USER_LEFT_MEETING, _VCEventType.VCEventType.SYSTEM_EVENT, _VCEventType.VCEventType.SOCKET_CONNECT, _VCEventType.VCEventType.SOCKET_DISCONNECT, _VCEventType.VCEventType.RAISE_HAND, _VCEventType.VCEventType.LOWER_HAND, _VCEventType.VCEventType.PEER_DISCONNECT, _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED, _VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, _VCEventType.VCEventType.SHARING_STOPPED, _VCEventType.VCEventType.END_SESSION, _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED);
+    _VCEventManager.default.addSubscriptions(eventHandler, _VCEventType.VCEventType.REQUEST_TO_JOIN_MEETING, _VCEventType.VCEventType.USER_JOINED, _VCEventType.VCEventType.USER_LEFT_MEETING, _VCEventType.VCEventType.SYSTEM_EVENT, _VCEventType.VCEventType.SOCKET_CONNECT, _VCEventType.VCEventType.SOCKET_DISCONNECT, _VCEventType.VCEventType.RAISE_HAND, _VCEventType.VCEventType.LOWER_HAND, _VCEventType.VCEventType.PEER_DISCONNECT, _VCEventType.VCEventType.CONSUMER_TRANSPORT_FAILED, _VCEventType.VCEventType.CREATE_TRANSPORT_FAILED, _VCEventType.VCEventType.SHARING_STOPPED, _VCEventType.VCEventType.END_SESSION, _VCEventType.VCEventType.CHAT_MESSAGE, _VCEventType.VCEventType.AUDIO_VISUAL_SETTINGS_CHANGED);
     document.addEventListener('sideBarToggleEvent', handleSidebarToggle);
     _ApplicationManager.default.setHasActiveMeeting(true);
     return () => {
@@ -533,8 +547,8 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defau
     onHostVideoMute: participant => {
       changeOtherParticipantAVSettings(participant.userId, participant.audioMuted, true);
     }
-  }))), sideBarOpen && sideBarTab && displayState === 'MAXIMIZED' && roomStatus === Status.SESSION && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'closable-panel-container'
+  }))), sideBarOpen && sideBarTab && roomStatus === Status.SESSION && /*#__PURE__*/_react.default.createElement("div", {
+    className: displayState === 'MAXIMIZED' ? 'closable-panel-container' : 'closable-panel-container-pinned'
   }, /*#__PURE__*/_react.default.createElement(_ClosablePanel.default, {
     closeHandler: e => {
       setSideBarOpen(false);

package/dist/components/media/VCRoom.css

@@ -37,6 +37,18 @@
   margin-left: 16px;
 }
 
+.closable-panel-container-pinned {
+  background-color: #f9f9f9;
+  color: #000000;
+  height: 380px;
+  width: 20%;
+  min-width: 288px;
+  margin-left: 8px;
+  position: absolute;
+  bottom: 8px;
+  border: 1px solid #e1e1e1;
+}
+
 .participants-container {
   width: 25%;
   height: 100%;

package/dist/components/media/VCRoomWorkspace.js

@@ -117,11 +117,11 @@ const VCRoomWorkspace = props => {
           googCpuOveruseThreshold: 70
         }
       },
-      preferCurrentTab: true,
+      preferCurrentTab: false,
       selfBrowserSurface: 'include',
       systemAudio: 'exclude',
       surfaceSwitching: 'exclude',
-      monitorTypeSurfaces: 'exclude'
+      monitorTypeSurfaces: 'include'
     };
     _SocketManager.default.emitEvent(_VCEventType.VCEventType.CANCEL_SCREEN_SHARE, {
       roomId: props.meetingId
@@ -518,7 +518,7 @@ const VCRoomWorkspace = props => {
     }
   }, (roomStatus === 'LOBBY' || props.allUserParticipantsLeft) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      height: displayState === 'MAXIMIZED' ? 'calc(100% - 232px)' : '100%',
+      height: displayState === 'MAXIMIZED' ? 'calc(100% - 232px)' : 'calc(100% - 120px)',
       fontSize: '28px',
       width: '100%',
       justifyContent: 'center',

package/dist/components/media/chat/ChatRoom.js

@@ -70,6 +70,7 @@ const ChatRoom = props => {
     };
   };
   const fetchChat = () => {
+    alert("MEETING ID : ", selectedChat.meetingId);
     (0, _RestUtils.sendRequest)(`${location + '/' + _ApplicationManager.default.getContextRoot()}/calendar/api/v1/chat/fetchMeetingChat/${selectedChat.meetingId}`, response => {
       if (response && response.id) {
         setSelectedChat(response);
@@ -102,7 +103,6 @@ const ChatRoom = props => {
     }
   };
   const onDeleteMessage = payload => {
-    console.log("\n\n\n\nDELETE MESSAGE PAYLOAD : ", payload);
     console.log("MESSAGES : ", messages);
     let msg = messages.find(m => m.id === payload.messageId);
     console.log(msg);
@@ -135,7 +135,7 @@ const ChatRoom = props => {
     if (selectedChat.type === 'CALENDAR_MEETING' || selectedChat.title) {
       return selectedChat.title;
     }
-    return _Utils.default.getChatMeetingTitle(selectedChat.participants, currentUser.userId, 58);
+    return '';
   };
   (0, _react.useEffect)(() => {
     setSelectedChat(props.selectedChat);
@@ -627,17 +627,11 @@ const ChatRoom = props => {
       }
     }, selectedChat.type === 'CALENDAR_MEETING' || selectedChat.participants.length > 2 ? /*#__PURE__*/_react.default.createElement(_reactFeather.Calendar, null) : _Utils.default.getInitials(selectedChat.participants.find(p => p.username !== currentUser.username).name))), /*#__PURE__*/_react.default.createElement("h5", null, getChatRoomTitle())), /*#__PURE__*/_react.default.createElement("div", {
       className: "chatroom__headerright"
-    }, !props.chatTab && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-      title: "Add People"
-    }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-      onClick: e => {
-        openAddPeopleDialog(e);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_icons.GroupAdd, null)))))), mode === 'CHAT' ? /*#__PURE__*/_react.default.createElement("div", {
+    }, !props.chatTab && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), mode === 'CHAT' ? /*#__PURE__*/_react.default.createElement("div", {
       id: "messages",
       ref: messagesEndRef,
       className: "chatroom__body"
-    }, messages.sort((a, b) => new Date(a.createdDate) - new Date(b.createdDate))?.map(renderMessage)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), mode === 'CHAT' && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("form", {
+    }, messages.sort((a, b) => new Date(a.createdDate) - new Date(b.createdDate))?.map(renderMessage)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), mode === 'CHAT' && !props.readOnly && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("form", {
       className: "chatroom__sendMessage"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "message__imageSelector",