@agilemotion/oui-react-js 1.6.6 → 1.6.8

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.location = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
 var _Send = _interopRequireDefault(require("@material-ui/icons/Send"));
@@ -12,36 +12,31 @@ var _reactRouterDom = require("react-router-dom");
 require("./ChatRooms.scss");
 var _moment = _interopRequireDefault(require("moment"));
 var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
-var _LoginStyle = _interopRequireDefault(require("../view/security/LoginStyle"));
-var _CustomInput = _interopRequireDefault(require("../customInput/CustomInput"));
-var _LottieIcon = _interopRequireDefault(require("../LottieIcon"));
+var _Styles = _interopRequireDefault(require("./Styles"));
+var _CustomInput = _interopRequireDefault(require("../../customInput/CustomInput"));
+var _LottieIcon = _interopRequireDefault(require("../../LottieIcon"));
 var _reactFeather = require("react-feather");
-var _Utils = _interopRequireDefault(require("../../Utils"));
-var _SocketManager = _interopRequireDefault(require("../../service/SocketManager"));
-var _types = require("../../types");
-var _AppManager = _interopRequireDefault(require("../../../common/service/AppManager"));
+var _Utils = _interopRequireDefault(require("../../../Utils"));
+var _VCEventType = require("../VCEventType");
 var _icons = require("@material-ui/icons");
-var _AutoComplete = _interopRequireDefault(require("../customInput/AutoComplete"));
-var _RestService = require("../../service/RestService");
-var _reactstrap = require("reactstrap");
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-var _ChatPoll = _interopRequireDefault(require("./ChatPoll"));
 var _linkifyReact = _interopRequireDefault(require("linkify-react"));
-var _File = _interopRequireDefault(require("../customInput/File"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _PollContainer = _interopRequireDefault(require("./PollContainer"));
+var _File = _interopRequireDefault(require("../../customInput/File"));
+var _ApplicationManager = _interopRequireDefault(require("../../../ApplicationManager"));
+var _RestUtils = require("../../../RestUtils");
+var _pdfIcon = _interopRequireDefault(require("../../../assets/img/pdf-icon.png"));
+var _doc = _interopRequireDefault(require("../../../assets/img/doc.png"));
+var _word = _interopRequireDefault(require("../../../assets/img/word.png"));
+var _excel = _interopRequireDefault(require("../../../assets/img/excel.png"));
+var _VCEventManager = _interopRequireDefault(require("../VCEventManager"));
+var _SocketManager = _interopRequireDefault(require("../../SocketManager"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
 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; }
-const {
-  electron
-} = window;
+const location = exports.location = window.location.protocol + '//' + window.location.hostname;
 const ChatRoom = props => {
   const navigate = (0, _reactRouterDom.useNavigate)();
   const [refresher, setRefresher] = (0, _react.useState)(false);
-  const [currentUser, setCurrentUser] = (0, _react.useState)(_AppManager.default.getUserDetails());
   const [message, setMessage] = (0, _react.useState)('');
   const [selectedChat, setSelectedChat] = (0, _react.useState)(props.selectedChat);
   const [documents, setDocuments] = (0, _react.useState)(null);
@@ -51,10 +46,9 @@ const ChatRoom = props => {
   const messagesEndRef = (0, _react.useRef)(null);
   const [loading, setLoading] = (0, _react.useState)(true);
   const [mode, setMode] = (0, _react.useState)('CHAT');
-  const [currentVote, setCurrentVote] = (0, _react.useState)([]);
   const [clearUploadedFileSwitch, setClearUploadedFileSwitch] = (0, _react.useState)(false);
-  const [openAddPeople, setOpenAddPeople] = (0, _react.useState)(false);
   const [socketEventHandler] = (0, _react.useState)({});
+  const [currentUser, setCurrentUser] = (0, _react.useState)(_ApplicationManager.default.getUserDetails());
   const socketEventHandlerApi = () => {
     return {
       get id() {
@@ -62,13 +56,13 @@ const ChatRoom = props => {
       },
       on: (eventType, be) => {
         switch (eventType) {
-          case _types.MessageType.CHAT_MESSAGE:
+          case _VCEventType.VCEventType.CHAT_MESSAGE:
             onMessage(be.payload);
             break;
-          case _types.MessageType.DELETE_CHAT_MESSAGE:
+          case _VCEventType.VCEventType.DELETE_CHAT_MESSAGE:
             onDeleteMessage(be.payload);
             break;
-          case _types.MessageType.SYSTEM_EVENT:
+          case _VCEventType.VCEventType.SYSTEM_EVENT:
             onSystemEvent(be.payload);
             break;
         }
@@ -76,36 +70,11 @@ const ChatRoom = props => {
     };
   };
   const fetchChat = () => {
-    (0, _RestService.get)(`${_AppManager.default.getAPIHost()}/api/v1/chat/fetchMeetingChat/${selectedChat.meetingId}`, response => {
+    (0, _RestUtils.sendRequest)(`${location + '/' + _ApplicationManager.default.getContextRoot()}/calendar/api/v1/chat/fetchMeetingChat/${selectedChat.meetingId}`, response => {
       if (response && response.id) {
         setSelectedChat(response);
       }
-    }, e => {}, '', false);
-  };
-  const closePollHandler = (e, poll) => {
-    (0, _RestService.post)(`${_AppManager.default.getAPIHost()}/api/v1/poll/close`, response => {
-      sendMessage(e, `Poll: ${poll.question} has been closed.`);
-      if (props.chatTab) {
-        fetchChat();
-      } else {
-        props.addedPeopleHandler();
-      }
-    }, e => {}, {
-      id: poll.id
-    });
-  };
-  const submitPollVoteHandler = poll => {
-    let chatParticipant = selectedChat.participants.find(p => p.userId === currentUser.userId);
-    const data = {
-      pollId: poll.id,
-      optionId: poll.selectedOption,
-      chatParticipant: chatParticipant
-    };
-    (0, _RestService.post)(`${_AppManager.default.getAPIHost()}/api/v1/poll/vote`, response => {
-      if (!props.chatTab) {
-        props.addedPeopleHandler();
-      }
-    }, e => {}, data);
+    }, e => {}, true, false);
   };
   const onSystemEvent = payload => {
     console.log(messages);
@@ -133,43 +102,31 @@ 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);
     if (msg) {
       msg.active = false;
       setRefresher(!refresher);
     }
   };
-  const onDownload = document => {
-    let documentFileUrl = '';
-    let accessToken = _AppManager.default.get("accessToken");
-    if (document.id) {
-      documentFileUrl = `${_AppManager.default.getAPIHost()}/api/v1/document/download/${document.id}?access_token=${accessToken}`;
-    } else {
-      const encodedDocumentLocation = encodeURIComponent(document.location);
-      documentFileUrl = `${_AppManager.default.getAPIHost()}/api/v1/document/download/location?documentLocation=${encodedDocumentLocation}&access_token=${accessToken}`;
-    }
-    electron.ipcRenderer.sendMessage('downloadFile', {
-      payload: {
-        fileURL: documentFileUrl
-      }
-    });
+  const onDownload = (fileName, url) => {
+    fetch(url).then(response => response.blob()).then(blob => {
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = fileName;
+      link.click();
+    }).catch(console.error);
   };
   const loadMessages = () => {
     scrollToBottom();
     if (selectedChat) {
       const newMessages = [].concat(selectedChat.messages);
-
-      // TODO. @Nsovo. This code is very unreliable. it breaks randomly. Please check if a user exists in the chat. If not call the back end to add them and then filter their messages from he current date
-      // NB : @Amu has change the code to first find a user and do a null check so that it does not break
       let find = selectedChat.participants.find(p => p.userId === currentUser.userId);
-      if (_Utils.default.isNull(find)) {
-        (0, _RestService.post)(`${_AppManager.default.getAPIHost()}/api/v1/chat/addParticipants`, response => {}, e => {}, {
-          chatId: selectedChat.id,
-          participants: [_AppManager.default.getUserDetails()]
-        });
-      }
       const dateAddedToChat = find ? find.dateAddedToChat : new Date();
       const filteredMessages = newMessages.filter(txt => dateAddedToChat === null || new Date(dateAddedToChat) < new Date(txt.createdDate));
+      console.log("FILTERED : ", filteredMessages);
       setMessages(filteredMessages);
     }
     setLoading(false);
@@ -187,32 +144,41 @@ const ChatRoom = props => {
     scrollToBottom();
   }, [messages]);
   (0, _react.useEffect)(() => {
-    setMessage('');
-    setDocuments(null);
-    loadMessages();
-  }, [selectedChat]);
-  (0, _react.useEffect)(() => {
-    setCurrentUser(_AppManager.default.getUserDetails());
-    _SocketManager.default.addSubscriptions(socketEventHandler, _types.MessageType.DELETE_CHAT_MESSAGE, _types.MessageType.CHAT_MESSAGE, _types.MessageType.SYSTEM_EVENT);
-  }, []);
+    if (selectedChat && currentUser) {
+      setMessage('');
+      setDocuments(null);
+      let find = selectedChat.participants.find(p => p.userId === currentUser.userId);
+      if (_Utils.default.isNull(find)) {
+        (0, _RestUtils.postData)(`${location + '/' + _ApplicationManager.default.getContextRoot()}/calendar/api/v1/chat/addParticipants`, () => {}, e => {}, true, {
+          chatId: selectedChat.id,
+          participants: [currentUser]
+        });
+      }
+      loadMessages();
+    }
+  }, [selectedChat, currentUser]);
   (0, _react.useEffect)(() => {
     socketEventHandler.api = socketEventHandlerApi();
   });
   (0, _react.useEffect)(() => {
+    _VCEventManager.default.addSubscriptions(socketEventHandler, _VCEventType.VCEventType.DELETE_CHAT_MESSAGE, _VCEventType.VCEventType.CHAT_MESSAGE, _VCEventType.VCEventType.SYSTEM_EVENT);
     return () => {
-      _SocketManager.default.removeSubscriptions(socketEventHandler);
+      _VCEventManager.default.removeSubscriptions(socketEventHandler);
     };
   }, []);
   const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({
-      behavior: 'smooth'
-    });
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scroll({
+        top: messagesEndRef.current.scrollHeight,
+        behavior: 'smooth'
+      });
+    }
   };
   const handleChange = e => {
     setMessage(e.target.value);
   };
   const participantsUserIds = () => {
-    return selectedChat.participants.filter(user => user.userId !== currentUser.userId).map(user => user.userId);
+    return selectedChat.participants.filter(user => user.username !== currentUser.username).map(user => user.username);
   };
   const sendMessage = function (e) {
     let finalMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -228,7 +194,7 @@ const ChatRoom = props => {
           combinedSize = combinedSize + parseInt(doc.size);
         }
         if (combinedSize > 7500000) {
-          _AppManager.default.fireEvent(_types.SystemEventType.API_ERROR, {
+          _ApplicationManager.default.alert(_ApplicationManager.default.getTopView().id, SystemEventType.API_ERROR, {
             message: 'Attachment should be not more than 7.5MB.'
           });
           return;
@@ -255,13 +221,14 @@ const ChatRoom = props => {
       }
       msg.participant.active = true;
       const participantsToSignalIds = participantsUserIds();
-      _SocketManager.default.emitEvent(_types.MessageType.CHAT_MESSAGE, {
+      _SocketManager.default.emitEvent(_VCEventType.VCEventType.CHAT_MESSAGE, {
         roomId: selectedChat.id,
         chatMessage: msg,
         participantsToSignalIds,
         skipAlert: props.chatTab || finalMessage,
         newChat: selectedChat.messages.length === 0,
-        meetingId: props.meetingId ? props.meetingId : null
+        meetingId: props.meetingId ? props.meetingId : null,
+        profile: _ApplicationManager.default.getUserDetails().profile
       }).then(data => {
         msg.id = data.id;
         setMessages(oldMsgs => [...oldMsgs, msg]);
@@ -275,53 +242,6 @@ const ChatRoom = props => {
     setImgUploadConfirm('');
     setDocuments(null);
   };
-  const callNow = e => {
-    e.preventDefault();
-    sendMessage(e, `${currentUser.name} has started a call.`);
-    (0, _RestService.get)(`${_AppManager.default.getAPIHost()}/api/v1/meeting/generateId`, response => {
-      const directCallRoom = {
-        id: response
-      };
-      const participantsToSignalIds = participantsUserIds();
-      _SocketManager.default.emitEvent(_types.MessageType.CALL_MULTIPLE_USER, {
-        room: directCallRoom.id,
-        usersToCall: participantsToSignalIds,
-        callerId: _SocketManager.default.socket.id,
-        name: currentUser.name
-      }).catch(error => {});
-      navigate("/view/meetingRoom", {
-        state: {
-          displayMode: 'window',
-          selectedMeeting: directCallRoom,
-          videoMuted: true,
-          audioMuted: false,
-          isDirectCall: true,
-          isHost: true,
-          usersToCall: participantsToSignalIds
-        }
-      });
-    }, e => {}, '', true);
-  };
-  const addPeople = e => {
-    if (newParticipants.length > 0) {
-      newParticipants.forEach(participant => {
-        selectedChat.participants.push(participant);
-      });
-      (0, _RestService.post)(`${_AppManager.default.getAPIHost()}/api/v1/chat/addParticipants`, response => {
-        sendMessage(e, newParticipants[0].name + ' has join the conversation.');
-        setNewParticipants([]);
-        setOpenAddPeople(false);
-        props.addedPeopleHandler();
-      }, e => {}, {
-        chatId: selectedChat.id,
-        participants: newParticipants
-      });
-    }
-  };
-  const handleClose = e => {
-    setNewParticipants([]);
-    setOpenAddPeople(false);
-  };
   const openAddPeopleDialog = e => {
     setOpenAddPeople(true);
   };
@@ -330,54 +250,68 @@ const ChatRoom = props => {
       documents
     } = message;
     const thumbnails = [];
+    // TODO : Make docs URL path a config
+    const documentDownloadUrl = location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/download';
+    const tokensQueryString = 'access_token=' + sessionStorage.getItem('accessToken') + '&idToken=' + sessionStorage.getItem('idToken');
     documents.forEach((doc, index) => {
       if (doc.type.includes('image')) {
-        return thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
-          style: {
-            borderBottom: '5px solid black'
-          }
-        }, /*#__PURE__*/_react.default.createElement("div", {
+        return thumbnails.push( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
           key: index,
           className: 'col'
         }, /*#__PURE__*/_react.default.createElement("img", {
           key: index,
-          src: document.payload,
+          src: doc.payload ? doc.payload : `${documentDownloadUrl + '/' + doc.repositoryId + '?' + tokensQueryString}`,
           alt: "",
           style: {
             width: 250,
             height: 'auto'
           }
-        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+        })), message.participant.username !== currentUser.username && /*#__PURE__*/_react.default.createElement("div", {
+          className: 'row no-margin no-padding'
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
           component: "span",
           onClick: () => {
-            onDownload(documents[index]);
+            onDownload(documents[index].name, `${documentDownloadUrl + '/' + doc.repositoryId + '?' + tokensQueryString}`);
           }
         }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
           id: 'DOWNLOAD'
-        }))));
+        }))), /*#__PURE__*/_react.default.createElement("div", {
+          class: 'col no-margin no-padding',
+          style: {
+            fontSize: '14px',
+            marginTop: '14px'
+          }
+        }, doc.name))));
       }
       if (doc.type.includes('pdf')) {
         thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
-          key: index,
-          style: {
-            borderBottom: '0.7px solid black'
-          }
+          key: index
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: 'col'
         }, /*#__PURE__*/_react.default.createElement("img", {
           key: index,
-          src: require('../../assets/img/files/pdf.png'),
+          src: _pdfIcon.default,
           alt: "",
           style: {
             width: 250,
             height: 'auto'
           }
-        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+        })), message.participant.username !== currentUser.username && /*#__PURE__*/_react.default.createElement("div", {
+          className: 'row no-margin no-padding'
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
           component: "span",
-          onClick: () => onDownload(documents[index])
+          onClick: () => {
+            onDownload(documents[index].name, `${documentDownloadUrl + '/' + doc.repositoryId + '?' + tokensQueryString}`);
+          }
         }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
           id: 'DOWNLOAD'
-        }))));
+        }))), /*#__PURE__*/_react.default.createElement("div", {
+          class: 'col no-margin no-padding',
+          style: {
+            fontSize: '14px',
+            marginTop: '14px'
+          }
+        }, doc.name))));
       } else if (doc.type.includes('doc')) {
         thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
           key: index,
@@ -388,18 +322,28 @@ const ChatRoom = props => {
           className: 'col'
         }, /*#__PURE__*/_react.default.createElement("img", {
           key: index,
-          src: require('../../assets/img/files/doc.png'),
+          src: _doc.default,
           alt: "",
           style: {
             width: 250,
             height: 'auto'
           }
-        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+        })), message.participant.username !== currentUser.username && /*#__PURE__*/_react.default.createElement("div", {
+          className: 'row no-margin no-padding'
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
           component: "span",
-          onClick: () => onDownload(documents[index])
+          onClick: () => {
+            onDownload(documents[index].name, `${documentDownloadUrl + '/' + doc.repositoryId + '?' + tokensQueryString}`);
+          }
         }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
           id: 'DOWNLOAD'
-        }))));
+        }))), /*#__PURE__*/_react.default.createElement("div", {
+          class: 'col no-margin no-padding',
+          style: {
+            fontSize: '14px',
+            marginTop: '14px'
+          }
+        }, doc.name))));
       } else if (doc.type.includes('word')) {
         thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
           key: index,
@@ -410,18 +354,28 @@ const ChatRoom = props => {
           className: 'col'
         }, /*#__PURE__*/_react.default.createElement("img", {
           key: index,
-          src: require('../../assets/img/files/word.png'),
+          src: _word.default,
           alt: "",
           style: {
             width: 250,
             height: 'auto'
           }
-        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+        })), message.participant.username !== currentUser.username && /*#__PURE__*/_react.default.createElement("div", {
+          className: 'row no-margin no-padding'
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
           component: "span",
-          onClick: () => onDownload(documents[index])
+          onClick: () => {
+            onDownload(documents[index].name, `${documentDownloadUrl + '/' + doc.repositoryId + '?' + tokensQueryString}`);
+          }
         }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
           id: 'DOWNLOAD'
-        }))));
+        }))), /*#__PURE__*/_react.default.createElement("div", {
+          class: 'col no-margin no-padding',
+          style: {
+            fontSize: '14px',
+            marginTop: '14px'
+          }
+        }, doc.name))));
       } else if (doc.type.includes('xls')) {
         thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
           key: index,
@@ -432,18 +386,28 @@ const ChatRoom = props => {
           className: 'col'
         }, /*#__PURE__*/_react.default.createElement("img", {
           key: index,
-          src: require('../../assets/img/files/xls.png'),
+          src: _excel.default,
           alt: "",
           style: {
             width: 250,
             height: 'auto'
           }
-        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+        })), message.participant.username !== currentUser.username && /*#__PURE__*/_react.default.createElement("div", {
+          className: 'row no-margin no-padding'
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
           component: "span",
-          onClick: () => onDownload(documents[index])
+          onClick: () => {
+            onDownload(documents[index].name, `${documentDownloadUrl + '/' + doc.repositoryId + '?' + tokensQueryString}`);
+          }
         }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
           id: 'DOWNLOAD'
-        }))));
+        }))), /*#__PURE__*/_react.default.createElement("div", {
+          class: 'col no-margin no-padding',
+          style: {
+            fontSize: '14px',
+            marginTop: '14px'
+          }
+        }, doc.name))));
       } else {
         thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
           key: index
@@ -456,7 +420,7 @@ const ChatRoom = props => {
           }
         }, /*#__PURE__*/_react.default.createElement("img", {
           key: index,
-          src: require('../../assets/img/files/php.png'),
+          src: _excel.default,
           alt: "",
           style: {
             width: 100,
@@ -466,12 +430,22 @@ const ChatRoom = props => {
           style: {
             marginTop: '4px'
           }
-        }, documents[index].name)), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+        }, documents[index].name)), /*#__PURE__*/_react.default.createElement("div", {
+          className: 'row no-margin no-padding'
+        }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
           component: "span",
-          onClick: () => onDownload(documents[index])
+          onClick: () => {
+            onDownload(documents[index].name, `${documentDownloadUrl + '/' + doc.repositoryId + '?' + tokensQueryString}`);
+          }
         }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
           id: 'DOWNLOAD'
-        }))));
+        }))), /*#__PURE__*/_react.default.createElement("div", {
+          class: 'col no-margin no-padding',
+          style: {
+            fontSize: '14px',
+            marginTop: '14px'
+          }
+        }, doc.name))));
       }
     });
     return thumbnails;
@@ -492,47 +466,44 @@ const ChatRoom = props => {
   };
   const deleteChatMessage = message => {
     const participantsToSignalIds = participantsUserIds();
-    _SocketManager.default.emitEvent(_types.MessageType.DELETE_CHAT_MESSAGE, {
+    _SocketManager.default.emitEvent(_VCEventType.VCEventType.DELETE_CHAT_MESSAGE, {
       messageId: message.id,
-      participantsToSignalIds
+      participantsToSignalIds,
+      profile: _ApplicationManager.default.getUserDetails().profile,
+      userId: _ApplicationManager.default.getUserDetails().username
     }).then(data => {
       message.active = false;
       setRefresher(!refresher);
     }).catch(error => {});
   };
-  const renderMessages = (message, index) => {
+  const renderMessage = (message, index) => {
     if (!message.active) {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: index,
         className: 'chatroom__message row no-margin'
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: message.participant.userId === currentUser.userId ? "mychat" : "peerchat"
-      }, message.participant.userId !== currentUser.userId && /*#__PURE__*/_react.default.createElement("div", {
+        className: message.participant.username === currentUser.username ? "mychat-deleted" : "peerchat"
+      }, message.participant.username !== currentUser.username && /*#__PURE__*/_react.default.createElement("div", {
         style: {
           paddingRight: '12px'
         }
       }, /*#__PURE__*/_react.default.createElement(_core.Avatar, null, _Utils.default.getInitials(message.participant.name))), /*#__PURE__*/_react.default.createElement("div", {
         style: {
-          border: message.participant.userId === currentUser.userId ? null : "1px solid #525f7f",
-          borderRadius: message.participant.userId === currentUser.userId ? null : "16px",
-          padding: message.participant.userId === currentUser.userId ? null : "0 8px"
+          border: message.participant.username === currentUser.username ? null : "1px solid #525f7f",
+          borderRadius: message.participant.username === currentUser.username ? null : "16px",
+          padding: message.participant.username === currentUser.username ? null : "0 8px"
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'row',
-        style: {
-          margin: '4px 0'
-        }
+        className: 'row no-margin no-padding'
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'col',
+        className: 'col no-margin no-padding',
         style: {
           fontStyle: 'italic'
         }
-      }, "deleted"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        id: 'BLOCK'
-      }))))));
+      }, "deleted")))));
     } else {
       if (message.type === 'FILE') {
-        if (message.participant.userId === currentUser.userId) {
+        if (message.participant.username === currentUser.username) {
           return /*#__PURE__*/_react.default.createElement("div", {
             key: index,
             className: "chatroom__message"
@@ -567,7 +538,7 @@ const ChatRoom = props => {
           key: index
         }, message.content))));
       } else if (message.type === 'TEXT') {
-        if (message.participant.userId === currentUser.userId) {
+        if (message.participant.username === currentUser.username) {
           return /*#__PURE__*/_react.default.createElement("div", {
             key: index,
             className: "chatroom__message"
@@ -595,7 +566,7 @@ const ChatRoom = props => {
           }, /*#__PURE__*/_react.default.createElement("div", {
             key: index,
             style: {
-              marginBottom: '4px'
+              margin: '0 8px'
             }
           }, message.content.split('\n').map((token, index) => {
             return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, token, /*#__PURE__*/_react.default.createElement("br", null));
@@ -616,7 +587,7 @@ const ChatRoom = props => {
         }, /*#__PURE__*/_react.default.createElement("div", {
           key: index,
           style: {
-            marginBottom: '4px'
+            margin: '0 0 4px 4px'
           }
         }, message.content.split('\n').map((token, index) => {
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, token, /*#__PURE__*/_react.default.createElement("br", null));
@@ -638,68 +609,13 @@ const ChatRoom = props => {
             width: '100%'
           }
         }));
-      } else {
-        return /*#__PURE__*/_react.default.createElement(_PollContainer.default, {
-          poll: message.poll,
-          chatTab: props.chatTab,
-          pollCreator: message.participant,
-          createdDate: message.createdDate,
-          submitPollVoteHandler: poll => submitPollVoteHandler(poll),
-          pollParticipantIDs: selectedChat.participants.map(p => p.userId),
-          currentUser: currentUser,
-          closePollHandler: (e, poll) => closePollHandler(e, poll),
-          numberOfPollParticipants: selectedChat.participants.length
-        });
       }
     }
   };
   if (selectedChat && messages) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "chatroom"
-    }, /*#__PURE__*/_react.default.createElement(_Dialog.default, {
-      open: openAddPeople,
-      onClose: handleClose
     }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        width: '560px',
-        height: '100%',
-        maxHeight: '100%',
-        overflowX: 'hidden',
-        overflowY: 'auto',
-        padding: '32px',
-        backgroundColor: '#FFFFFF',
-        marginTop: '2px'
-      }
-    }, /*#__PURE__*/_react.default.createElement("h5", {
-      style: {
-        fontSize: '24px'
-      }
-    }, "Add People"), /*#__PURE__*/_react.default.createElement(_reactstrap.Form, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        marginTop: '8px'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.default, {
-      id: "participants",
-      label: 'Participants',
-      invalidText: 'invalid participants',
-      value: newParticipants,
-      multiple: true,
-      showImages: true,
-      searchAttribute: 'name',
-      validationRegex: /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/,
-      valueChangeHandler: (value, id) => {
-        setNewParticipants(value);
-      },
-      optionsUrl: `${_AppManager.default.getAPIHost()}/api/v1/auth/search`,
-      fullWidth: true
-    }))))), /*#__PURE__*/_react.default.createElement(_DialogActions.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: handleClose
-    }, "CANCEL"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: addPeople,
-      variant: 'contained',
-      size: "large",
-      color: 'primary'
-    }, "ADD"))), /*#__PURE__*/_react.default.createElement("div", {
       className: "chatroom__header"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "chatroom__headerleft"
@@ -709,7 +625,7 @@ const ChatRoom = props => {
       style: {
         backgroundColor: props.chatTab ? 'transparent' : null
       }
-    }, selectedChat.type === 'CALENDAR_MEETING' || selectedChat.participants.length > 2 ? /*#__PURE__*/_react.default.createElement(_reactFeather.Calendar, null) : _Utils.default.getInitials(selectedChat.participants.find(p => p.userId !== currentUser.userId).name))), /*#__PURE__*/_react.default.createElement("h5", null, getChatRoomTitle())), /*#__PURE__*/_react.default.createElement("div", {
+    }, 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"
@@ -717,33 +633,11 @@ const ChatRoom = props => {
       onClick: e => {
         openAddPeopleDialog(e);
       }
-    }, /*#__PURE__*/_react.default.createElement(_icons.GroupAdd, null)))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-      title: "Poll"
-    }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-      onClick: e => {
-        setMode('POLL');
-      }
-    }, /*#__PURE__*/_react.default.createElement(_icons.Poll, {
-      style: {
-        color: props.chatTab ? 'white' : null,
-        marginTop: props.chatTab ? '8px' : null
-      }
-    }))))), mode === 'POLL' ? /*#__PURE__*/_react.default.createElement(_ChatPoll.default, {
-      chatTab: props.chatTab,
-      participants: selectedChat.participants,
-      createPollHandler: pollData => {
-        sendMessage(null, null, pollData);
-        setMode('CHAT');
-      },
-      cancelPollHandler: () => {
-        setMode('CHAT');
-      }
-    }) : /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement(_icons.GroupAdd, 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(renderMessages), /*#__PURE__*/_react.default.createElement("div", {
-      ref: messagesEndRef
-    }, "\xA0")), 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' && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("form", {
       className: "chatroom__sendMessage"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "message__imageSelector",
@@ -788,15 +682,14 @@ const ChatRoom = props => {
         endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
           position: "end"
         }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-          style: _LoginStyle.default.inputAdornmentIcon,
+          style: _Styles.default.inputAdornmentIcon,
           type: "submit",
           onClick: e => {
             sendMessage(e);
           }
         }, /*#__PURE__*/_react.default.createElement(_Send.default, {
           style: {
-            fontSize: '24px',
-            color: props.chatTab ? 'white' : null
+            fontSize: '24px'
           }
         }))),
         value: message,