@agilemotion/oui-react-js 1.3.8 → 1.3.9

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

@@ -0,0 +1,926 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _Send = _interopRequireDefault(require("@material-ui/icons/Send"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+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 _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 _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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const {
+  electron
+} = window;
+
+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);
+  const [messages, setMessages] = (0, _react.useState)([]);
+  const [newParticipants, setNewParticipants] = (0, _react.useState)([]);
+  const [confirm, setImgUploadConfirm] = (0, _react.useState)('');
+  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 socketEventHandlerApi = () => {
+    return {
+      get id() {
+        return 'chat-room-122991829';
+      },
+
+      on: (eventType, be) => {
+        switch (eventType) {
+          case _types.MessageType.CHAT_MESSAGE:
+            onMessage(be.payload);
+            break;
+
+          case _types.MessageType.DELETE_CHAT_MESSAGE:
+            onDeleteMessage(be.payload);
+            break;
+
+          case _types.MessageType.SYSTEM_EVENT:
+            onSystemEvent(be.payload);
+            break;
+        }
+      }
+    };
+  };
+
+  const fetchChat = () => {
+    (0, _RestService.get)("".concat(_AppManager.default.getAPIHost(), "/api/v1/chat/fetchMeetingChat/").concat(selectedChat.meetingId), response => {
+      if (response && response.id) {
+        setSelectedChat(response);
+      }
+    }, e => {}, '', false);
+  };
+
+  const closePollHandler = (e, poll) => {
+    (0, _RestService.post)("".concat(_AppManager.default.getAPIHost(), "/api/v1/poll/close"), response => {
+      sendMessage(e, "Poll: ".concat(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)("".concat(_AppManager.default.getAPIHost(), "/api/v1/poll/vote"), response => {
+      if (!props.chatTab) {
+        props.addedPeopleHandler();
+      }
+    }, e => {}, data);
+  };
+
+  const onSystemEvent = payload => {
+    console.log(messages);
+
+    if (payload.systemEventType === "NEW_POLL_VOTE") {
+      let find = messages.find(msg => msg.poll && msg.poll.id === payload.data.pollId);
+
+      if (find) {//find.totalVotes++;
+      }
+    }
+  };
+
+  const onMessage = payload => {
+    if (selectedChat && selectedChat.id === payload.roomId) {
+      if (props.onMessage) {
+        props.onMessage(payload.chatMessage, selectedChat);
+      }
+
+      if (payload.chatMessage.type === 'EVENT') {
+        if (props.chatTab) {
+          fetchChat();
+        } else {
+          props.addedPeopleHandler();
+        }
+      }
+
+      selectedChat.messages.push(payload.chatMessage);
+      loadMessages();
+    }
+  };
+
+  const onDeleteMessage = payload => {
+    let msg = messages.find(m => m.id === payload.messageId);
+
+    if (msg) {
+      msg.active = false;
+      setRefresher(!refresher);
+    }
+  };
+
+  const onDownload = document => {
+    let documentFileUrl = '';
+
+    let accessToken = _AppManager.default.get("accessToken");
+
+    if (document.id) {
+      documentFileUrl = "".concat(_AppManager.default.getAPIHost(), "/api/v1/document/download/").concat(document.id, "?access_token=").concat(accessToken);
+    } else {
+      const encodedDocumentLocation = encodeURIComponent(document.location);
+      documentFileUrl = "".concat(_AppManager.default.getAPIHost(), "/api/v1/document/download/location?documentLocation=").concat(encodedDocumentLocation, "&access_token=").concat(accessToken);
+    }
+
+    electron.ipcRenderer.sendMessage('downloadFile', {
+      payload: {
+        fileURL: documentFileUrl
+      }
+    });
+  };
+
+  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)("".concat(_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));
+      setMessages(filteredMessages);
+    }
+
+    setLoading(false);
+  };
+
+  const getChatRoomTitle = () => {
+    if (selectedChat.type === 'CALENDAR_MEETING' || selectedChat.title) {
+      return selectedChat.title;
+    }
+
+    return _Utils.default.getChatMeetingTitle(selectedChat.participants, currentUser.userId, 58);
+  };
+
+  (0, _react.useEffect)(() => {
+    setSelectedChat(props.selectedChat);
+  }, [props.selectedChat]);
+  (0, _react.useEffect)(() => {
+    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);
+  }, []);
+  (0, _react.useEffect)(() => {
+    socketEventHandler.api = socketEventHandlerApi();
+  });
+  (0, _react.useEffect)(() => {
+    return () => {
+      _SocketManager.default.removeSubscriptions(socketEventHandler);
+    };
+  }, []);
+
+  const scrollToBottom = () => {
+    var _messagesEndRef$curre;
+
+    (_messagesEndRef$curre = messagesEndRef.current) === null || _messagesEndRef$curre === void 0 ? void 0 : _messagesEndRef$curre.scrollIntoView({
+      behavior: 'smooth'
+    });
+  };
+
+  const handleChange = e => {
+    setMessage(e.target.value);
+  };
+
+  const participantsUserIds = () => {
+    return selectedChat.participants.filter(user => user.userId !== currentUser.userId).map(user => user.userId);
+  };
+
+  const sendMessage = (e, finalMessage = null, poll = null) => {
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (message || documents || finalMessage || poll) {
+      let mType = 'TEXT';
+
+      if (documents && documents.length > 0) {
+        let combinedSize = 0;
+
+        for (const doc of documents) {
+          combinedSize = combinedSize + parseInt(doc.size);
+        }
+
+        if (combinedSize > 7500000) {
+          _AppManager.default.fireEvent(_types.SystemEventType.API_ERROR, {
+            message: 'Attachment should be not more than 7.5MB.'
+          });
+
+          return;
+        }
+
+        mType = 'FILE';
+      } else if (poll) {
+        mType = 'POLL';
+      } else if (finalMessage) {
+        mType = 'EVENT';
+      }
+
+      const msg = {
+        createdDate: new Date(),
+        type: mType,
+        active: true,
+        content: finalMessage ? finalMessage : message,
+        participant: currentUser
+      };
+
+      if (documents && documents.length > 0) {
+        msg.documents = documents;
+        setClearUploadedFileSwitch(!clearUploadedFileSwitch);
+      }
+
+      if (poll) {
+        msg.poll = poll;
+      }
+
+      msg.participant.active = true;
+      const participantsToSignalIds = participantsUserIds();
+
+      _SocketManager.default.emitEvent(_types.MessageType.CHAT_MESSAGE, {
+        roomId: selectedChat.id,
+        chatMessage: msg,
+        participantsToSignalIds,
+        skipAlert: props.chatTab || finalMessage,
+        newChat: selectedChat.messages.length === 0,
+        meetingId: props.meetingId ? props.meetingId : null
+      }).then(data => {
+        msg.id = data.id;
+        setMessages(oldMsgs => [...oldMsgs, msg]);
+        selectedChat.messages.push(msg);
+
+        if (props.onMessage && selectedChat) {
+          props.onMessage(msg, selectedChat);
+        }
+      }).catch(error => {});
+    }
+
+    setMessage('');
+    setImgUploadConfirm('');
+    setDocuments(null);
+  };
+
+  const callNow = e => {
+    e.preventDefault();
+    sendMessage(e, "".concat(currentUser.name, " has started a call."));
+    (0, _RestService.get)("".concat(_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)("".concat(_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);
+  };
+
+  const renderFileThumbnail = message => {
+    const {
+      documents
+    } = message;
+    const thumbnails = [];
+    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", {
+          key: index,
+          className: 'col'
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          key: index,
+          src: document.payload,
+          alt: "",
+          style: {
+            width: 250,
+            height: 'auto'
+          }
+        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+          component: "span",
+          onClick: () => {
+            onDownload(documents[index]);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          id: 'DOWNLOAD'
+        }))));
+      }
+
+      if (doc.type.includes('pdf')) {
+        thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          style: {
+            borderBottom: '0.7px solid black'
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'col'
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          key: index,
+          src: require('../../assets/img/files/pdf.png'),
+          alt: "",
+          style: {
+            width: 250,
+            height: 'auto'
+          }
+        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+          component: "span",
+          onClick: () => onDownload(documents[index])
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          id: 'DOWNLOAD'
+        }))));
+      } else if (doc.type.includes('doc')) {
+        thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          style: {
+            borderBottom: '5px solid black'
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'col'
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          key: index,
+          src: require('../../assets/img/files/doc.png'),
+          alt: "",
+          style: {
+            width: 250,
+            height: 'auto'
+          }
+        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+          component: "span",
+          onClick: () => onDownload(documents[index])
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          id: 'DOWNLOAD'
+        }))));
+      } else if (doc.type.includes('word')) {
+        thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          style: {
+            borderBottom: '5px solid black'
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'col'
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          key: index,
+          src: require('../../assets/img/files/word.png'),
+          alt: "",
+          style: {
+            width: 250,
+            height: 'auto'
+          }
+        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+          component: "span",
+          onClick: () => onDownload(documents[index])
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          id: 'DOWNLOAD'
+        }))));
+      } else if (doc.type.includes('xls')) {
+        thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          style: {
+            borderBottom: '5px solid black'
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'col'
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          key: index,
+          src: require('../../assets/img/files/xls.png'),
+          alt: "",
+          style: {
+            width: 250,
+            height: 'auto'
+          }
+        })), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+          component: "span",
+          onClick: () => onDownload(documents[index])
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          id: 'DOWNLOAD'
+        }))));
+      } else {
+        thumbnails.push( /*#__PURE__*/_react.default.createElement("div", {
+          key: index
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'col',
+          style: {
+            borderBottom: '0.7px solid black',
+            paddingBottom: '8px',
+            borderWidth: '50%'
+          }
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          key: index,
+          src: require('../../assets/img/files/php.png'),
+          alt: "",
+          style: {
+            width: 100,
+            height: 'auto'
+          }
+        }), /*#__PURE__*/_react.default.createElement("p", {
+          style: {
+            marginTop: '4px'
+          }
+        }, documents[index].name)), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+          component: "span",
+          onClick: () => onDownload(documents[index])
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          id: 'DOWNLOAD'
+        }))));
+      }
+    });
+    return thumbnails;
+  };
+
+  const renderLink = ({
+    attributes,
+    content
+  }) => {
+    const {
+      href
+    } = attributes;
+    return /*#__PURE__*/_react.default.createElement("a", {
+      onClick: () => {
+        window.open(href);
+      }
+    }, content);
+  };
+
+  const deleteChatMessage = message => {
+    const participantsToSignalIds = participantsUserIds();
+
+    _SocketManager.default.emitEvent(_types.MessageType.DELETE_CHAT_MESSAGE, {
+      messageId: message.id,
+      participantsToSignalIds
+    }).then(data => {
+      message.active = false;
+      setRefresher(!refresher);
+    }).catch(error => {});
+  };
+
+  const renderMessages = (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", {
+        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"
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'row',
+        style: {
+          margin: '4px 0'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'col',
+        style: {
+          fontStyle: 'italic'
+        }
+      }, "deleted"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        id: 'BLOCK'
+      }))))));
+    } else {
+      if (message.type === 'FILE') {
+        if (message.participant.userId === currentUser.userId) {
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: index,
+            className: "chatroom__message"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "mychat"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: 'row',
+            style: {
+              margin: '4px 0 0 0'
+            }
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: 'col chat-time'
+          }, (0, _moment.default)(message.createdDate).format('DD/MM, HH:mm')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+            component: "span",
+            onClick: () => {
+              deleteChatMessage(message);
+            }
+          }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+            id: 'DELETE'
+          })))), renderFileThumbnail(message), /*#__PURE__*/_react.default.createElement("p", {
+            key: index
+          }, message.content)));
+        }
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          className: "chatroom__message"
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "peerchat"
+        }, /*#__PURE__*/_react.default.createElement(_core.Avatar, null, _Utils.default.getInitials(message.participant.name)), /*#__PURE__*/_react.default.createElement("div", {
+          className: "peer"
+        }, /*#__PURE__*/_react.default.createElement("span", null, message.participant.name), /*#__PURE__*/_react.default.createElement("span", null, (0, _moment.default)(message.createdDate).format('DD/MM, HH:mm')), /*#__PURE__*/_react.default.createElement("div", null, renderFileThumbnail(message)), /*#__PURE__*/_react.default.createElement("p", {
+          key: index
+        }, message.content))));
+      } else if (message.type === 'TEXT') {
+        if (message.participant.userId === currentUser.userId) {
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: index,
+            className: "chatroom__message"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "mychat"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: 'row',
+            style: {
+              margin: '4px 0 0 0'
+            }
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: 'col chat-time'
+          }, (0, _moment.default)(message.createdDate).format('DD/MM, HH:mm')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+            component: "span",
+            onClick: () => {
+              deleteChatMessage(message);
+            }
+          }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+            id: 'DELETE'
+          })))), /*#__PURE__*/_react.default.createElement(_linkifyReact.default, {
+            key: index,
+            options: {
+              render: renderLink
+            }
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            key: index,
+            style: {
+              marginBottom: '4px'
+            }
+          }, message.content.split('\n').map((token, index) => {
+            return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, token, /*#__PURE__*/_react.default.createElement("br", null));
+          })))));
+        }
+
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          className: "chatroom__message"
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "peerchat"
+        }, /*#__PURE__*/_react.default.createElement(_core.Avatar, null, _Utils.default.getInitials(message.participant.name)), /*#__PURE__*/_react.default.createElement("div", {
+          className: "peer"
+        }, /*#__PURE__*/_react.default.createElement("span", null, message.participant.name), /*#__PURE__*/_react.default.createElement("span", null, (0, _moment.default)(message.createdDate).format('DD/MM, HH:mm')), /*#__PURE__*/_react.default.createElement(_linkifyReact.default, {
+          key: index,
+          options: {
+            render: renderLink
+          }
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          style: {
+            marginBottom: '4px'
+          }
+        }, message.content.split('\n').map((token, index) => {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, token, /*#__PURE__*/_react.default.createElement("br", null));
+        }))))));
+      } else if (message.type === 'EVENT') {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "cv-poll-choice"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "cv-poll-choice-details"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "cv-choice-percentage"
+        }, /*#__PURE__*/_react.default.createElement(_icons.Info, {
+          className: "selected-choice-icon"
+        })), /*#__PURE__*/_react.default.createElement("span", {
+          className: "cv-choice-text"
+        }, message.content)), /*#__PURE__*/_react.default.createElement("span", {
+          className: 'cv-choice-percent-chart event',
+          style: {
+            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) {
+    var _messages$sort;
+
+    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: "".concat(_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"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'chat-avatar'
+    }, /*#__PURE__*/_react.default.createElement(_core.Avatar, {
+      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", {
+      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)))), /*#__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", {
+      id: "messages",
+      className: "chatroom__body"
+    }, (_messages$sort = messages.sort((a, b) => new Date(a.createdDate) - new Date(b.createdDate))) === null || _messages$sort === void 0 ? void 0 : _messages$sort.map(renderMessages), /*#__PURE__*/_react.default.createElement("div", {
+      ref: messagesEndRef
+    }, "\xA0")), mode === 'CHAT' && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("form", {
+      className: "chatroom__sendMessage"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "message__imageSelector",
+      style: {
+        width: '72px'
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'chat-input',
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "file-upload chats-file-upload",
+      style: {
+        zIndex: !_Utils.default.isNull(documents) ? 1 : 0
+      }
+    }, /*#__PURE__*/_react.default.createElement(_File.default, {
+      enableFile: true,
+      multiple: true,
+      id: 'documents',
+      iconColor: props.chatTab ? 'white' : null,
+      value: documents,
+      clearUploadedFileSwitch: clearUploadedFileSwitch,
+      valueChangeHandler: (value, id) => {
+        setDocuments(value);
+      }
+    })), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+      style: {
+        zIndex: !_Utils.default.isNull(documents) ? 0 : 1,
+        color: props.chatTab ? 'white' : null
+      },
+      labelText: documents ? "" : "Type a new message",
+      disabled: !_Utils.default.isNull(documents),
+      multiline: true,
+      id: "message",
+      formControlProps: {
+        fullWidth: true
+      },
+      color: props.chatTab ? 'white' : null,
+      autoFocus: true,
+      inputProps: {
+        endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+          position: "end"
+        }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+          style: _LoginStyle.default.inputAdornmentIcon,
+          type: "submit",
+          onClick: e => {
+            sendMessage(e);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Send.default, {
+          style: {
+            fontSize: '24px',
+            color: props.chatTab ? 'white' : null
+          }
+        }))),
+        value: message,
+        onChange: e => {
+          handleChange(e);
+        }
+      }
+    })))));
+  } else if (!loading && selectedChat) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: 'centered-flex-box'
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "emptychat"
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: 'centered-flex-box',
+      style: {
+        fontSize: '20px',
+        fontWeight: 'bold'
+      }
+    }, "You're starting a new conversation"), /*#__PURE__*/_react.default.createElement("p", {
+      className: 'centered-flex-box',
+      style: {
+        fontSize: '16px'
+      }
+    }, "Type your first message below"), /*#__PURE__*/_react.default.createElement(_LottieIcon.default, {
+      id: 'chat'
+    })));
+  } else {
+    return null;
+  }
+};
+
+var _default = ChatRoom;
+exports.default = _default;