cometchat-react-ui-kit2
Version:
CometChat UI Kit for React App
962 lines (922 loc) • 55.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CometChatMessageList = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _chat = require("@cometchat-pro/chat");
var _ = require("..");
var _2 = require("../..");
var _spinner = _interopRequireDefault(require("./resources/spinner.svg"));
var _hooks = require("./hooks");
var _controller = require("./controller");
var _style = require("./style");
var _CometChatMessageConstants = require("../CometChatMessageConstants");
var _Shared = require("../../Shared");
var _3 = require("../");
var _SmartRepliesConfiguration = require("../CometChatSmartReplies/SmartRepliesConfiguration");
var _NewMessageIndicatorConfiguration = require("../CometChatNewMessageIndicator/NewMessageIndicatorConfiguration");
var _MessageBubbleConfiguration = require("../Bubbles/CometChatMessageBubble/MessageBubbleConfiguration");
var _DateConfiguration = require("../../Shared/PrimaryComponents/CometChatConfiguration/DateConfiguration");
var _this = void 0;
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/**
*
* CometChatMessageList component retrieves the latest messages and presents them inside a message bubble, that a CometChat logged-in user has been a part of.
* The state of the component is communicated via 3 states i.e empty, loading and error
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*
*/
var CometChatMessageList = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
/**
* Destructuring prop values
*/
var limit = props.limit,
user = props.user,
group = props.group,
alignment = props.alignment,
messageTypes = props.messageTypes,
excludeMessageOptions = props.excludeMessageOptions,
customMessageOptions = props.customMessageOptions,
excludeMessageTypes = props.excludeMessageTypes,
onlyUnread = props.onlyUnread,
hideMessagesFromBlockedUsers = props.hideMessagesFromBlockedUsers,
hideDeletedMessages = props.hideDeletedMessages,
tags = props.tags,
loadingIconURL = props.loadingIconURL,
customView = props.customView,
emptyText = props.emptyText,
errorText = props.errorText,
hideError = props.hideError,
customIncomingMessageSound = props.customIncomingMessageSound,
enableSoundForMessages = props.enableSoundForMessages,
sentMessageInputData = props.sentMessageInputData,
receivedMessageInputData = props.receivedMessageInputData,
style = props.style,
theme = props.theme,
messageBubbleConfiguration = props.messageBubbleConfiguration,
emojiKeyboardConfiguration = props.emojiKeyboardConfiguration,
smartRepliesConfiguration = props.smartRepliesConfiguration,
newMessageIndicatorConfiguration = props.newMessageIndicatorConfiguration,
dateConfiguration = props.dateConfiguration;
var lastScrollTop = 0;
var loggedInUserRef = _react["default"].useRef(null);
var _React$useState = _react["default"].useState(0),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
messageCount = _React$useState2[0],
setMessageCount = _React$useState2[1];
var _React$useState3 = _react["default"].useState([]),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
messageList = _React$useState4[0],
setMessageList = _React$useState4[1];
var _React$useState5 = _react["default"].useState(0),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
unreadMessageCount = _React$useState6[0],
setUnreadMessageCount = _React$useState6[1];
var _React$useState7 = _react["default"].useState(null),
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
callbackData = _React$useState8[0],
setCallbackData = _React$useState8[1];
var _React$useState9 = _react["default"].useState((0, _2.localize)("LOADING")),
_React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
decoratorMessage = _React$useState10[0],
setDecoratorMessage = _React$useState10[1];
var _React$useState11 = _react["default"].useState(null),
_React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
chatWith = _React$useState12[0],
setChatWith = _React$useState12[1];
var _React$useState13 = _react["default"].useState(null),
_React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
chatWithType = _React$useState14[0],
setChatWithType = _React$useState14[1];
var messageTypesRef = _react["default"].useRef(null);
var messageCategoryRef = _react["default"].useRef(null);
var messageListManagerRef = _react["default"].useRef(null);
var messageListEndRef = _react["default"].useRef(null);
var _React$useState15 = _react["default"].useState({}),
_React$useState16 = (0, _slicedToArray2["default"])(_React$useState15, 2),
viewEmojiTray = _React$useState16[0],
setViewEmojiTray = _React$useState16[1];
var _React$useState17 = _react["default"].useState(null),
_React$useState18 = (0, _slicedToArray2["default"])(_React$useState17, 2),
messageToReact = _React$useState18[0],
setMessageToReact = _React$useState18[1];
var _React$useState19 = _react["default"].useState({}),
_React$useState20 = (0, _slicedToArray2["default"])(_React$useState19, 2),
newMessage = _React$useState20[0],
setnewMessage = _React$useState20[1];
var _theme = new _2.CometChatTheme(theme !== null && theme !== void 0 ? theme : {});
var _messageBubbleConfiguration = messageBubbleConfiguration || new _MessageBubbleConfiguration.MessageBubbleConfiguration({});
var _emojiKeyboardConfiguration = emojiKeyboardConfiguration || new _3.EmojiKeyboardConfiguration({});
var _newMessageIndicatorConfiguration = newMessageIndicatorConfiguration || new _NewMessageIndicatorConfiguration.NewMessageIndicatorConfiguration({});
var _dateConfiguration = dateConfiguration || new _DateConfiguration.DateConfiguration({
pattern: "dayDateFormat"
});
/**
* Update messagelist
*/
_react["default"].useImperativeHandle(ref, function () {
return {
addMessage: addMessage,
updateMessage: updateMessage,
removeMessage: removeMessage,
deleteMessage: deleteMessage,
scrollToBottom: scrollToBottom,
translateMessage: translateMessage,
reactToMessages: reactToMessages
};
});
var messageListCallback = function messageListCallback(listenerName) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
setCallbackData({
name: listenerName,
args: [].concat(args)
});
};
var errorHandler = function errorHandler(errorCode) {
_.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageError, errorCode);
};
var reInitializeMessageBuilder = function reInitializeMessageBuilder() {
resetChatWindow();
setDecoratorMessage("loading");
messageListManagerRef.current.removeListeners();
messageListManagerRef.current = new _controller.MessageListManager(limit, user, group, onlyUnread, hideDeletedMessages, hideMessagesFromBlockedUsers, tags, messageTypesRef.current, messageCategoryRef.current);
(0, _hooks.fetchMessages)(messageListManagerRef === null || messageListManagerRef === void 0 ? void 0 : messageListManagerRef.current).then(function (messagelist) {
messageHandler(messagelist, true);
setMessageList(messagelist);
messageListManagerRef.current.attachListeners(messageListCallback);
});
};
/**
* add new message to the messageList
*/
var addMessage = function addMessage(message) {
var messagelist = (0, _toConsumableArray2["default"])(messageList);
messagelist.push(message);
setMessageList(messagelist);
// scrollToBottom()
};
/**
* Set unreadCount when new message is received
*/
var updateUnreadMessageCount = function updateUnreadMessageCount() {
setUnreadMessageCount(unreadMessageCount + 1);
};
/**
*
* @param {*} message
* Function to play notification sound if sound for messages is enabled.
* It checks for custom sound and if not provided plays default sound.
*/
var playNotificationSound = function playNotificationSound(message) {
var _message$metadata;
if ((message === null || message === void 0 ? void 0 : message.category) === _2.MessageCategoryConstants.message) {
if (enableSoundForMessages) {
if (customIncomingMessageSound) {
_2.CometChatSoundManager.play(_2.CometChatSoundManager.Sound.incomingMessage, customIncomingMessageSound);
} else {
_2.CometChatSoundManager.play(_2.CometChatSoundManager.Sound.incomingMessage);
}
}
} else if ((message === null || message === void 0 ? void 0 : message.category) !== _2.MessageCategoryConstants.message && message !== null && message !== void 0 && (_message$metadata = message.metadata) !== null && _message$metadata !== void 0 && _message$metadata.incrementUnreadCount) {
if (enableSoundForMessages) {
if (customIncomingMessageSound) {
_2.CometChatSoundManager.play(customIncomingMessageSound);
} else {
_2.CometChatSoundManager.play(_2.CometChatSoundManager.Sound.incomingMessage);
}
}
}
};
/**
* Update message
*/
var updateMessage = function updateMessage(message) {
var withMuid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var messageKey;
var messagelist = (0, _toConsumableArray2["default"])(messageList);
if (withMuid) {
messageKey = messagelist.findIndex(function (m) {
return m.muid === message.muid;
});
} else {
messageKey = messagelist.findIndex(function (m) {
return m.id === message.id;
});
}
if (messageKey > -1) {
var messageObject = _objectSpread(_objectSpread({}, messageList[messageKey]), message);
messagelist.splice(messageKey, 1, messageObject);
setMessageCount(messagelist.length);
setMessageList(messagelist);
}
};
/**
* Update message as read; show double blue tick
*/
var updateMessageAsRead = function updateMessageAsRead(message) {
var messagelist = (0, _toConsumableArray2["default"])(messageList);
var messageKey = messagelist.findIndex(function (m) {
return m.id === message.messageId;
});
if (messageKey > -1) {
var messageObject = _objectSpread({}, messageList[messageKey]);
messageObject.readAt = message.getReadAt();
messagelist.splice(messageKey, 1, messageObject);
setMessageList(messagelist);
}
};
/**
* Update message as deleted; show deleted message bubble
*/
var removeMessage = function removeMessage(message) {
var messages = (0, _toConsumableArray2["default"])(messageList);
var messageKey = messages.findIndex(function (m) {
return m.id === message.id;
});
if (messageKey > -1) {
if (hideDeletedMessages) {
messages.splice(messageKey, 1);
} else {
var messageObject = _objectSpread(_objectSpread({}, messages[messageKey]), message);
messages.splice(messageKey, 1, messageObject);
}
setMessageList(function () {
return messages;
});
}
};
/**
*
* @param {*} message
* emits markAsRead Event
*/
var markMessageAsRead = function markMessageAsRead(message) {
if (!(message !== null && message !== void 0 && message.readAt)) {
_chat.CometChat.markAsRead(message)["catch"](function (error) {
errorHandler(error);
});
}
};
var handleNewMessages = function handleNewMessages(message) {
//handling dom lag - increment count only for main message list
setnewMessage(message);
var messageReceivedHandler = function messageReceivedHandler(message) {
//if the user has not scrolled in chat window(scroll is at the bottom of the chat window)
setMessageCount(messageCount + 1);
if (messageListEndRef.current.scrollHeight - messageListEndRef.current.scrollTop - messageListEndRef.current.clientHeight <= 1) {
if (messageCount > _.messageConstants.maximumNumOfMessages) {
reInitializeMessageBuilder();
} else {
playNotificationSound(message);
addMessage(message);
scrollToBottom();
markMessageAsRead(message);
_.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageRead, message);
}
} else {
//if the user has scrolled up in chat window
playNotificationSound(message);
addMessage(message);
updateUnreadMessageCount();
}
};
/**
* message receiver is chat window group
*/
if (chatWithType === _2.ReceiverTypeConstants.group && message.getReceiverType() === _2.ReceiverTypeConstants.group && message.getReceiverId() === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.guid)) {
messageReceivedHandler(message);
} else if (chatWithType === _2.ReceiverTypeConstants.user && message.getReceiverType() === _2.ReceiverTypeConstants.user) {
var _loggedInUserRef$curr, _loggedInUserRef$curr2;
/**
* If the message sender is chat window user and message receiver is logged-in user
* OR
* If the message sender is logged-in user and message receiver is chat window user
*/
if (message.getSender().uid === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.uid) && message.getReceiverId() === (loggedInUserRef === null || loggedInUserRef === void 0 ? void 0 : (_loggedInUserRef$curr = loggedInUserRef.current) === null || _loggedInUserRef$curr === void 0 ? void 0 : _loggedInUserRef$curr.uid) || message.getSender().uid === (loggedInUserRef === null || loggedInUserRef === void 0 ? void 0 : (_loggedInUserRef$curr2 = loggedInUserRef.current) === null || _loggedInUserRef$curr2 === void 0 ? void 0 : _loggedInUserRef$curr2.uid) && message.getReceiverId() === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.uid)) {
messageReceivedHandler(message);
}
}
};
var handleNewCustomMessages = function handleNewCustomMessages(message) {
var _loggedInUserRef$curr3, _loggedInUserRef$curr4;
var customMessageReceivedHandler = function customMessageReceivedHandler(message) {
setMessageCount(messageCount + 1);
//if the user has not scrolled in chat window(scroll is at the bottom of the chat window)
if (messageListEndRef.current.scrollHeight - messageListEndRef.current.scrollTop - messageListEndRef.current.clientHeight <= 1) {
if (messageCount > _.messageConstants.maximumNumOfMessages) {
reInitializeMessageBuilder();
} else {
playNotificationSound(message);
addMessage(message);
// scrollToBottom();
markMessageAsRead(message);
_.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageRead, message);
}
} else {
//if the user has scrolled in chat window
playNotificationSound(message);
addMessage(message);
updateUnreadMessageCount();
}
};
if (chatWithType === _2.ReceiverTypeConstants.group && message.getReceiverType() === _2.ReceiverTypeConstants.group && ((_loggedInUserRef$curr3 = loggedInUserRef.current) === null || _loggedInUserRef$curr3 === void 0 ? void 0 : _loggedInUserRef$curr3.uid) === message.getSender().uid && message.getReceiverId() === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.guid) && (message.type === _.CometChatCustomMessageTypes.poll || message.type === _.CometChatCustomMessageTypes.document || message.type === _.CometChatCustomMessageTypes.whiteboard)) {
playNotificationSound();
addMessage(message);
// scrollToBottom();
} else if (chatWithType === _2.ReceiverTypeConstants.group && message.getReceiverType() === _2.ReceiverTypeConstants.group && message.getReceiverId() === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.guid)) {
customMessageReceivedHandler(message, _2.ReceiverTypeConstants.group);
} else if (chatWithType === _2.ReceiverTypeConstants.user && message.getReceiverType() === _2.ReceiverTypeConstants.user && message.getSender().uid === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.uid)) {
customMessageReceivedHandler(message, _2.ReceiverTypeConstants.user);
} else if (chatWithType === _2.ReceiverTypeConstants.user && message.getReceiverType() === _2.ReceiverTypeConstants.user && ((_loggedInUserRef$curr4 = loggedInUserRef.current) === null || _loggedInUserRef$curr4 === void 0 ? void 0 : _loggedInUserRef$curr4.uid) === message.getSender().uid && message.getReceiverId() === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.uid) && (message.type === _.CometChatCustomMessageTypes.poll || message.type === _.CometChatCustomMessageTypes.document || message.type === _.CometChatCustomMessageTypes.whiteboard)) {
playNotificationSound(message);
addMessage(message);
// scrollToBottom();
}
};
var handleMessageDeliveryAndReadReceipt = function handleMessageDeliveryAndReadReceipt(messageReceipt) {
var _messageReceipt$getSe;
//read receipts
if ((messageReceipt === null || messageReceipt === void 0 ? void 0 : messageReceipt.getReceiverType()) === _2.ReceiverTypeConstants.user && (messageReceipt === null || messageReceipt === void 0 ? void 0 : (_messageReceipt$getSe = messageReceipt.getSender()) === null || _messageReceipt$getSe === void 0 ? void 0 : _messageReceipt$getSe.getUid()) === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.uid) && (messageReceipt === null || messageReceipt === void 0 ? void 0 : messageReceipt.getReceiver()) === loggedInUserRef.current.uid) {
if ((messageReceipt === null || messageReceipt === void 0 ? void 0 : messageReceipt.getReceiptType()) === "delivery") {
updateMessageAsDelivered(messageReceipt);
} else if ((messageReceipt === null || messageReceipt === void 0 ? void 0 : messageReceipt.getReceiptType()) === "read") {
updateMessageAsRead(messageReceipt);
}
} else if ((messageReceipt === null || messageReceipt === void 0 ? void 0 : messageReceipt.getReceiverType()) === _2.ReceiverTypeConstants.group && (messageReceipt === null || messageReceipt === void 0 ? void 0 : messageReceipt.getReceiver()) === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.guid)) {}
};
var handleMessageDelete = function handleMessageDelete(message) {
if (chatWithType === _2.ReceiverTypeConstants.group && message.getReceiverType() === _2.ReceiverTypeConstants.group && message.getReceiverId() === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.guid)) {
removeMessage(message);
} else if (chatWith === _2.ReceiverTypeConstants.user && message.getReceiverType() === _2.ReceiverTypeConstants.user && message.getSender().uid === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.uid)) {
removeMessage(message);
}
};
var handleMessageEdit = function handleMessageEdit(message) {
if (chatWithType === _2.ReceiverTypeConstants.group && message.getReceiverType() === _2.ReceiverTypeConstants.group && message.getReceiverId() === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.guid)) {
updateMessage(message);
} else if (chatWithType === _2.ReceiverTypeConstants.user && message.getReceiverType() === _2.ReceiverTypeConstants.user && loggedInUserRef.current.uid === message.getReceiverId() && message.getSender().uid === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.uid)) {
updateMessage(message);
} else if (chatWithType === _2.ReceiverTypeConstants.user && message.getReceiverType() === _2.ReceiverTypeConstants.user && loggedInUserRef.current.uid === message.getSender().uid && message.getReceiverId() === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.uid)) {
updateMessage(message);
}
};
var handleNewGroupActionMessage = function handleNewGroupActionMessage(message) {
if (chatWithType === _2.ReceiverTypeConstants.group && message.getReceiverType() === _2.ReceiverTypeConstants.group && message.getReceiverId() === (chatWith === null || chatWith === void 0 ? void 0 : chatWith.guid)) {
playNotificationSound(message);
addMessage(message);
// scrollToBottom();
markMessageAsRead(message);
_.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageRead, message);
}
};
/**
* update message list
*/
var prependMessages = function prependMessages(messages) {
var messagelist = [].concat((0, _toConsumableArray2["default"])(messages), (0, _toConsumableArray2["default"])(messageList));
setMessageList(messagelist);
setMessageCount(messagelist.length);
};
var messageHandler = function messageHandler(messagelist, scroll, val) {
messagelist.forEach(function (message) {
var _message$getSender, _loggedInUserRef$curr5;
//if the sender of the message is not the loggedin user, mark the message as read.
if ((message === null || message === void 0 ? void 0 : (_message$getSender = message.getSender()) === null || _message$getSender === void 0 ? void 0 : _message$getSender.getUid()) !== ((_loggedInUserRef$curr5 = loggedInUserRef.current) === null || _loggedInUserRef$curr5 === void 0 ? void 0 : _loggedInUserRef$curr5.uid) && !(message !== null && message !== void 0 && message.readAt)) {
if (message.getReceiverType() === _2.ReceiverTypeConstants.user) {
markMessageAsRead(message);
_.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageRead, message);
} else if (message.getReceiverType() === _2.ReceiverTypeConstants.group) {
markMessageAsRead(message);
_.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageRead, message);
}
}
});
if (scroll) {
var lastScrollPoint = val || 0;
scrollToBottom(lastScrollPoint);
}
};
var scrollToBottom = function scrollToBottom() {
var scrollHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
setTimeout(function () {
if (messageListEndRef) {
messageListEndRef.current.scrollTop = messageListEndRef.current.scrollHeight - scrollHeight;
}
});
};
var handleScroll = function handleScroll(event) {
var scrollTop = event.currentTarget.scrollTop;
var scrollHeight = event.currentTarget.scrollHeight;
lastScrollTop = scrollHeight - scrollTop;
var top = Math.round(scrollTop) === 0;
if (top && messageList.length) {
(0, _hooks.fetchMessages)(messageListManagerRef === null || messageListManagerRef === void 0 ? void 0 : messageListManagerRef.current).then(function (messagelist) {
prependMessages(messagelist);
messageHandler(messagelist, true, lastScrollTop);
})["catch"](function (error) {
errorHandler(error);
setDecoratorMessage((0, _2.localize)("SOMETHING_WRONG"));
});
}
};
/**
* Update message as delivered; show double grey tick
*/
var updateMessageAsDelivered = function updateMessageAsDelivered(message) {
var messagelist = (0, _toConsumableArray2["default"])(messageList);
var messageKey = messagelist.findIndex(function (m) {
return m.id === message.messageId;
});
if (messageKey > -1) {
var messageObject = _objectSpread({}, messageList[messageKey]);
messageObject.deliveredAt = message.getDeliveredAt();
messagelist === null || messagelist === void 0 ? void 0 : messagelist.splice(messageKey, 1, messageObject);
setMessageList(messagelist);
}
};
/**
* Upon scrolling to bottom, reload the chat if messages cross the maximum count,
* or else render and update (mark them as read) the stored messages
*/
var scrolledToBottom = function scrolledToBottom() {
if (unreadMessageCount <= 0) {
return false;
}
var totalMessageCount = messageList.length + unreadMessageCount;
var message = messageList[messageList.length - 1];
if (totalMessageCount > _.messageConstants.maximumNumOfMessages) {
reInitializeMessageBuilder();
} else {
setUnreadMessageCount(0);
scrollToBottom();
markMessageAsRead(message);
_.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageRead, message);
}
};
/**
* upon scrolling to the bottom, update the unread messagess
*/
/**
* reset message list
*/
var resetChatWindow = function resetChatWindow() {
setMessageList([]);
setUnreadMessageCount(0);
setMessageCount(0);
setnewMessage({});
};
var handlers = {
onTextMessageReceived: handleNewMessages,
onMediaMessageReceived: handleNewMessages,
onCustomMessageReceived: handleNewCustomMessages,
onMessagesDelivered: handleMessageDeliveryAndReadReceipt,
onMessagesRead: handleMessageDeliveryAndReadReceipt,
onMessageDeleted: handleMessageDelete,
onMessageEdited: handleMessageEdit,
onGroupMemberScopeChanged: handleNewGroupActionMessage,
onGroupMemberKicked: handleNewGroupActionMessage,
onGroupMemberBanned: handleNewGroupActionMessage,
onGroupMemberUnbanned: handleNewGroupActionMessage,
onMemberAddedToGroup: handleNewGroupActionMessage,
onGroupMemberLeft: handleNewGroupActionMessage,
onGroupMemberJoined: handleNewGroupActionMessage
};
(0, _hooks.Hooks)(limit, user, group, excludeMessageTypes, onlyUnread, hideDeletedMessages, hideMessagesFromBlockedUsers, tags, messageTypes, loggedInUserRef, messageList, setMessageList, setDecoratorMessage, setChatWith, setChatWithType, messageHandler, messageListCallback, handlers, callbackData, messageTypesRef, messageCategoryRef, messageListManagerRef, _2.localize, errorHandler, chatWith, chatWithType, setMessageCount, setnewMessage);
/**
*
* @param {*} message
* returns translated text and push it into metadata of message Object
*/
var translateMessage = function translateMessage(message) {
var messageId = message.id;
var messageText = message.text;
var translateToLanguage = _2.CometChatLocalize.getLocale();
var translateMessage = "";
_chat.CometChat.callExtension(_2.ExtensionConstants.messageTranslation, "POST", _2.ExtensionURLs.translate, {
msgId: messageId,
text: messageText,
languages: [translateToLanguage]
}).then(function (result) {
if (result !== null && result !== void 0 && result.hasOwnProperty("translations") && result.translations.length) {
var messageTranslation = result.translations[0];
translateMessage = "".concat(messageTranslation["message_translated"]);
if (message.hasOwnProperty("metadata")) {
Object.assign(message.metadata, {
translatedText: translateMessage
});
} else {
Object.assign(message, {
metadata: {
translatedText: translateMessage
}
});
}
updateMessage(message);
}
})["catch"](function (error) {
errorHandler(error);
});
};
/**
*
* @param {*} message
* emits edit Message event
*/
var editMessage = function editMessage(message) {
_.CometChatMessageEvents.emit(_.CometChatMessageEvents.onMessageEdit, {
message: message,
status: _CometChatMessageConstants.messageStatus.inprogress
});
};
/**
*
* @param {*} message
* copies message text to the clipboard
*/
var copyMessage = function copyMessage(message) {
navigator.clipboard.writeText(message.text);
};
/**
*
* @param {*} message
* Deletes the selected message
*/
var deleteMessage = function deleteMessage(message) {
_chat.CometChat.deleteMessage(message.id).then(function (deletedMessage) {
removeMessage(deletedMessage);
})["catch"](function (error) {
errorHandler(error);
});
};
/**
*
* @param {*} message
* @param {*} event
* set visibility of Emoji Tray to true
*/
var onReactToMessages = function onReactToMessages(message, event, emoji) {
// To remove reaction by clicking on the reacted emoji
if (emoji) {
reactToMessages(message, emoji);
}
// Open EmojiTray When clicked on Reaction messageOption or Add Reaction button
else {
setMessageToReact(message);
setViewEmojiTray(function (old) {
return {
emojiTrayPreview: !old.emojiTrayPreview,
event: event
};
});
}
};
/**
*
* @param {*} emojiObject
* triggers reactToMessages function after closing the emojiKeyboard
*/
var onReactionSelected = function onReactionSelected(emojiObject) {
setViewEmojiTray(function (old) {
return {
emojiTrayPreview: !old.emojiTrayPreview
};
});
reactToMessages(messageToReact, emojiObject);
};
/**
*
* @returns EmojiKeyboard inside tooltip
*/
var emojiBoard = function emojiBoard() {
if (viewEmojiTray.emojiTrayPreview) {
var _viewEmojiTray$event, _viewEmojiTray$event2;
return /*#__PURE__*/_react["default"].createElement(_2.CometChatPopover, {
position: "top",
x: viewEmojiTray === null || viewEmojiTray === void 0 ? void 0 : (_viewEmojiTray$event = viewEmojiTray.event) === null || _viewEmojiTray$event === void 0 ? void 0 : _viewEmojiTray$event.clientX,
y: viewEmojiTray === null || viewEmojiTray === void 0 ? void 0 : (_viewEmojiTray$event2 = viewEmojiTray.event) === null || _viewEmojiTray$event2 === void 0 ? void 0 : _viewEmojiTray$event2.clientY,
style: (0, _style.emojiBoardToolTipStyle)(_theme)
}, /*#__PURE__*/_react["default"].createElement(_2.CometChatEmojiKeyboard, {
style: (0, _style.emojiKeyBoardStyle)(_theme),
hideSearch: _emojiKeyboardConfiguration.hideSearch,
theme: _theme,
onClick: onReactionSelected.bind(_this) || _emojiKeyboardConfiguration.onClick
}));
} else {
return null;
}
};
/**
*
* @param {*} message
* @param {*} emoji
* Calls extension reaction to Messages
*/
var reactToMessages = function reactToMessages(message, emoji) {
var _loggedInUserRef$curr6, _loggedInUserRef$curr7, _loggedInUserRef$curr8, _loggedInUserRef$curr9;
var reactionObject = {};
var newMessageObject = {};
var messageObject = _objectSpread({}, message);
var userObject = {};
if (loggedInUserRef !== null && loggedInUserRef !== void 0 && (_loggedInUserRef$curr6 = loggedInUserRef.current) !== null && _loggedInUserRef$curr6 !== void 0 && (_loggedInUserRef$curr7 = _loggedInUserRef$curr6.avatar) !== null && _loggedInUserRef$curr7 !== void 0 && _loggedInUserRef$curr7.length) {
userObject["avatar"] = loggedInUserRef.current.avatar;
}
if (loggedInUserRef !== null && loggedInUserRef !== void 0 && (_loggedInUserRef$curr8 = loggedInUserRef.current) !== null && _loggedInUserRef$curr8 !== void 0 && (_loggedInUserRef$curr9 = _loggedInUserRef$curr8.name) !== null && _loggedInUserRef$curr9 !== void 0 && _loggedInUserRef$curr9.length) {
userObject["name"] = loggedInUserRef.current.name;
}
var emojiObject = (0, _defineProperty2["default"])({}, emoji, (0, _defineProperty2["default"])({}, loggedInUserRef.current.uid, userObject));
var reactionExtensionsData = (0, _2.getExtensionsData)(messageObject, _2.ExtensionConstants.reactions);
if (reactionExtensionsData) {
if (reactionExtensionsData[emoji]) {
//if the reactions metadata has the selected emoji/reaction for the loggedin user
if (reactionExtensionsData[emoji][loggedInUserRef.current.uid]) {
reactionObject = _objectSpread({}, messageObject["metadata"]["@injected"]["extensions"]["reactions"]);
delete reactionObject[emoji][loggedInUserRef.current.uid];
} else {
reactionObject = _objectSpread(_objectSpread({}, messageObject["metadata"]["@injected"]["extensions"]["reactions"]), {}, (0, _defineProperty2["default"])({}, emoji, _objectSpread(_objectSpread({}, messageObject["metadata"]["@injected"]["extensions"]["reactions"][emoji]), {}, (0, _defineProperty2["default"])({}, loggedInUserRef.current.uid, userObject))));
}
} else {
reactionObject = _objectSpread(_objectSpread({}, messageObject["metadata"]["@injected"]["extensions"]["reactions"]), emojiObject);
}
} else {
if (!messageObject.hasOwnProperty("metadata")) {
messageObject["metadata"] = {};
}
if (!messageObject["metadata"].hasOwnProperty("@injected")) {
messageObject["metadata"]["@injected"] = {};
}
if (!messageObject["metadata"]["@injected"].hasOwnProperty("extensions")) {
messageObject["metadata"]["@injected"]["extensions"] = {};
}
if (!messageObject["metadata"]["@injected"]["extensions"].hasOwnProperty("reactions")) {
messageObject["metadata"]["@injected"]["extensions"]["reactions"] = {};
}
reactionObject = _objectSpread({}, emojiObject);
}
var metadataObject = {
metadata: _objectSpread(_objectSpread({}, messageObject["metadata"]), {}, {
"@injected": _objectSpread(_objectSpread({}, messageObject["metadata"]["@injected"]), {}, {
extensions: _objectSpread(_objectSpread({}, messageObject["metadata"]["@injected"]["extensions"]), {}, {
reactions: _objectSpread({}, reactionObject)
})
})
})
};
newMessageObject = _objectSpread(_objectSpread({}, messageObject), {}, {
data: _objectSpread(_objectSpread({}, messageObject), metadataObject)
}, metadataObject);
updateMessage(newMessageObject);
_chat.CometChat.callExtension(_2.ExtensionConstants.reactions, "POST", _2.ExtensionURLs.reaction, {
msgId: message.id,
emoji: emoji
})["catch"](function (error) {
errorHandler(error);
updateMessage(message);
});
};
/**
*
* @param {*} messageOptions
* Sets MessageOptions Onclick function
*/
var setOptionsCallbackData = function setOptionsCallbackData(messageOptions) {
var optionsList = (0, _toConsumableArray2["default"])(messageOptions);
optionsList.forEach(function (eachMessageOption) {
switch (eachMessageOption.id) {
case _2.MessageOptionConstants.deleteMessage:
if (eachMessageOption.onClick === null) {
eachMessageOption.onClick = deleteMessage.bind(_this);
}
break;
case _2.MessageOptionConstants.editMessage:
if (eachMessageOption.onClick === null) {
eachMessageOption.onClick = editMessage.bind(_this);
}
break;
case _2.MessageOptionConstants.copyMessage:
if (eachMessageOption.onClick === null) {
eachMessageOption.onClick = copyMessage.bind(_this);
}
break;
case _2.MessageOptionConstants.reactToMessage:
if (eachMessageOption.onClick === null) {
eachMessageOption.onClick = onReactToMessages.bind(_this);
}
break;
case _2.MessageOptionConstants.translateMessage:
if (eachMessageOption.onClick === null) {
eachMessageOption.onClick = translateMessage.bind(_this);
}
break;
default:
break;
}
});
return optionsList;
};
/**
*
* @param {*} messageObject
* @returns messageOptions according to the type of message and sender's identity
*/
var filterMessageOptions = function filterMessageOptions(messageObject) {
var _messageTypes = messageTypes && messageTypes.length ? messageTypes : (0, _.getDefaultTypes)();
var messageOptions = [];
// If User sends messageTypes as
_messageTypes.forEach(function (messageTemplateObject) {
// Checking Message types for Template object and message object to set options
if (messageTemplateObject.type === messageObject.type) {
messageOptions = messageTemplateObject.options.filter(function (option) {
var _loggedInUserRef$curr10, _messageObject$sender, _loggedInUserRef$curr11, _messageObject$sender2;
return (
// Segregating Sender and receiver options.
((_loggedInUserRef$curr10 = loggedInUserRef.current) === null || _loggedInUserRef$curr10 === void 0 ? void 0 : _loggedInUserRef$curr10.uid) === (messageObject === null || messageObject === void 0 ? void 0 : (_messageObject$sender = messageObject.sender) === null || _messageObject$sender === void 0 ? void 0 : _messageObject$sender.uid) && option.optionFor === _2.MessageOptionForConstants.sender || option.optionFor === _2.MessageOptionForConstants.both || ((_loggedInUserRef$curr11 = loggedInUserRef.current) === null || _loggedInUserRef$curr11 === void 0 ? void 0 : _loggedInUserRef$curr11.uid) !== (messageObject === null || messageObject === void 0 ? void 0 : (_messageObject$sender2 = messageObject.sender) === null || _messageObject$sender2 === void 0 ? void 0 : _messageObject$sender2.uid) && option.optionFor === _2.MessageOptionForConstants.receiver || option.optionFor === _2.MessageOptionForConstants.both
);
});
}
});
// If user exclude's an option from options list
if (excludeMessageOptions && excludeMessageOptions.length) {
excludeMessageOptions.forEach(function (excludeOption) {
messageOptions.forEach(function (option) {
if (option.id === excludeOption) {
var index = messageOptions.indexOf(option);
if (index > -1) {
messageOptions.splice(index, 1); // 2nd parameter means remove one item only
}
}
});
});
}
// If user sends in customMessageOptions
if (customMessageOptions !== null && customMessageOptions !== void 0 && customMessageOptions.length) {
customMessageOptions.forEach(function (option) {
messageOptions.push(option);
});
}
// Setting callback data for Message Option's onClick
return setOptionsCallbackData(messageOptions);
};
/**
*
* @param {*} message
* @returns filtering custom View from message Types sent in by the user
*/
var filterCustomView = function filterCustomView(message) {
if (messageTypes !== null && messageTypes !== void 0 && messageTypes.length) {
var templateObject = messageTypes.filter(function (messageTemplateObject) {
return messageTemplateObject.type === message.type && messageTemplateObject.customView;
});
if (templateObject !== null && templateObject !== void 0 && templateObject.customView) {
return templateObject.customView;
}
return null;
}
};
/**
*
* @param {*} customView
* @returns customView for handling empty,error and loading states
*/
var getCustomView = function getCustomView(customView) {
return /*#__PURE__*/_react["default"].createElement(customView, props);
};
var getMessageContainer = function getMessageContainer() {
var _localize;
var messageContainer = null;
if (messageList.length === 0 && (decoratorMessage === null || decoratorMessage === void 0 ? void 0 : decoratorMessage.toLowerCase()) === (0, _2.localize)("LOADING").toLowerCase()) {
messageContainer = /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.decoratorMsgStyle)(style),
className: "messagelist__decorator-message"
}, customView !== null && customView !== void 0 && customView.loading ? getCustomView(customView.loading, props) : /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.decoratorMsgImgStyle)(style, loadingIconURL, _theme),
className: "decorator-message"
}));
} else if (messageList.length === 0 && (decoratorMessage === null || decoratorMessage === void 0 ? void 0 : decoratorMessage.toLowerCase()) === (0, _2.localize)("NO_MESSAGES_FOUND").toLowerCase()) {
messageContainer = /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.decoratorMsgStyle)(style),
className: "messagelist__decorator-message"
}, customView !== null && customView !== void 0 && customView.empty ? getCustomView(customView === null || customView === void 0 ? void 0 : customView.empty, props) : /*#__PURE__*/_react["default"].createElement("p", {
style: (0, _style.decoratorMsgTxtStyle)(style, _2.fontHelper, _theme, decoratorMessage, _2.localize),
className: "decorator-message"
}, emptyText));
} else if ((decoratorMessage === null || decoratorMessage === void 0 ? void 0 : decoratorMessage.toLowerCase()) === ((_localize = (0, _2.localize)("NO_MESSAGE_TYPE_SET")) === null || _localize === void 0 ? void 0 : _localize.toLowerCase())) {
messageContainer = /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.decoratorMsgStyle)(style),
className: "messagelist__decorator-message"
}, customView !== null && customView !== void 0 && customView.empty ? getCustomView(customView === null || customView === void 0 ? void 0 : customView.empty, props) : /*#__PURE__*/_react["default"].createElement("p", {
style: (0, _style.decoratorMsgTxtStyle)(style, _2.fontHelper, _theme, decoratorMessage, _2.localize),
className: "decorator-message"
}, decoratorMessage));
} else if (!hideError && (decoratorMessage === null || decoratorMessage === void 0 ? void 0 : decoratorMessage.toLowerCase()) === (0, _2.localize)("SOMETHING_WRONG").toLowerCase()) {
messageContainer = /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.decoratorMsgStyle)(style),
className: "messagelist__decorator-message"
}, customView !== null && customView !== void 0 && customView.error ? getCustomView(customView.error, props) : /*#__PURE__*/_react["default"].createElement("p", {
style: (0, _style.decoratorMsgTxtStyle)(style, _2.fontHelper, _theme, decoratorMessage, _2.localize),
className: "decorator-message"
}, errorText));
}
return messageContainer;
};
/**
* Empty new Message Received State to close Smart reply Preview
*/
var onClose = function onClose() {
setnewMessage({});
};
var _smartRepliesConfiguration = smartRepliesConfiguration || new _SmartRepliesConfiguration.SmartRepliesConfiguration({
onClose: onClose
});
/**
*
* @returns smart suggestions to the user as per the message received
*/
var getSmartReplies = function getSmartReplies() {
if (Object.keys(newMessage).length) {
return /*#__PURE__*/_react["default"].createElement(_.CometChatSmartReplies, {
messageObject: newMessage,
customOutgoingMessageSound: _smartRepliesConfiguration.customOutgoingMessageSound,
enableSoundForMessages: _smartRepliesConfiguration.enableSoundForMessages,
loggedInUser: loggedInUserRef.current,
onClick: _smartRepliesConfiguration.onClick,
style: (0, _style.smartReplyStyle)(_theme),
onClose: onClose.bind(_this)
});
}
};
/**
*
* @returns new Message Indicator banner
*/
var newMessageIndicator = function newMessageIndicator() {
if (unreadMessageCount >= 1) {
var text = unreadMessageCount > 1 ? "".concat(unreadMessageCount, " ").concat((0, _2.localize)("NEW_MESSAGES")) : "".concat(unreadMessageCount, " ").concat((0, _2.localize)("NEW_MESSAGE"));
return /*#__PURE__*/_react["default"].createElement(_.CometChatNewMessageIndicator, {
text: text,
onClick: scrolledToBottom.bind(_this) || _newMessageIndicatorConfiguration.onClick,
Icon: _newMessageIndicatorConfiguration.Icon,
style: (0, _style.messageIndicatorStyle)(_theme)
});
}
return null;
};
/**
*
* @returns Items to render in Message List Component
*/
var renderItems = function renderItems() {
// to hold date value for first message
var previousMessageDate = null;
return messageList.map(function (eachMessage) {
var _previousMessageDate, _previousMessageDate2, _previousMessageDate3, _dateConfiguration$st, _theme$palette, _theme$palette2, _dateConfiguration$st2, _theme$typography, _loggedInUserRef$curr12, _eachMessage$sender, _loggedInUserRef$curr13, _eachMessage$sender2;
// date label component
var dateSeparator = null;
// Converting Unix timeStamp to readable date format
var currentMessageDate = new Date(eachMessage.sentAt * 1000);
var currentDate = currentMessageDate.getDate() + "-" + currentMessageDate.getMonth + "-" + currentMessageDate.getFullYear();
var previousDate = ((_previousMessageDate = previousMessageDate) === null || _previousMessageDate === void 0 ? void 0 : _previousMessageDate.getDate()) + "-" + ((_previousMessageDate2 = previousMessageDate) === null || _previousMessageDate2 === void 0 ? void 0 : _previousMessageDate2.getMonth) + "-" + ((_previousMessageDate3 = previousMessageDate) === null || _previousMessageDate3 === void 0 ? void 0 : _previousMessageDate3.getFullYear());
var pattern = _dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : _dateConfiguration.pattern;
var customPattern = _dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : _dateConfiguration.customPattern;
var dateStyle = new _Shared.DateStyles(_objectSpread(_objectSpread({}, _dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : _dateConfiguration.style), {}, {
textColor: (_dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : (_dateConfiguration$st = _dateConfiguration.style) === null || _dateConfiguration$st === void 0 ? void 0 : _dateConfiguration$st.textColor) || (_theme === null || _theme === void 0 ? void 0 : (_theme$palette = _theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.accent500[_theme === null || _theme === void 0 ? void 0 : (_theme$palette2 = _theme.palette) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.mode]),
textFont: (_dateConfiguration === null || _dateConfiguration === void 0 ? void 0 : (_dateConfiguration$st2 = _dateConfiguration.style) === null || _dateConfiguration$st2 === void 0 ? void 0 : _dateConfiguration$st2.textFont) || (0, _2.fontHelper)(_theme === null || _theme === void 0 ? void 0 : (_theme$typography = _theme.typography) === null || _theme$typography === void 0 ? void 0 : _theme$typography.caption2)
}));
// Comparing Date, Month, Year of the two dates
if (previousDate !== currentDate) {
dateSeparator = /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.messageDateContainerStyle)(_theme)
}, /*#__PURE__*/_react["default"].createElement("div", {
style: (0, _style.messageDateStyle)(_theme)
}, /*#__PURE__*/_react["default"].createElement(_Shared.CometChatDate, {
timestamp: eachMessage === null || eachMessage === void 0 ? void 0 : eachMessage.sentAt,
pattern: pattern,
customPattern: customPattern,
style: dateStyle
})));
}
previousMessageDate = currentMessageDate;
var messageKey = eachMessage.id || eachMessage.muid;
var className = "message__".concat(eachMessage.type, " message__kit__background");
var alignmentValue = _2.MessageBubbleAlignmentConstants.left;
var background;
var messageBubbleData = {};
if (alignment === (_2.MessageListAlignmentConstants === null || _2.MessageListAlignmentConstants === void 0 ? void 0 : _2.MessageListAlignmentConstants.standard) && ((_loggedInUserRef$curr12 = loggedInUserRef.current) === null || _loggedInUserRef$curr12 === void 0 ? void 0 : _loggedInUserRef$curr12.uid) === (eachMessage === null || eachMessage === void 0 ? void 0 : (_eachMessage$sender = eachMessage.sender) === null || _eachMessage$sender === void 0 ? void 0 : _eachMessage$sender.uid)) {
alignmentValue = _2.MessageBubbleAlignmentConstants.right;
background = {
background: _theme.palette.primary[_theme.palette.mode]
};
messageBubbleData = sentMessageInputData;
} else if (alignment === (_2.MessageListAlignmentConstants === null || _2.MessageListAlignmentConstants === void 0 ? void 0 : _2.MessageListAlignmentConstants.left) && ((_loggedInUserRef$curr13 = loggedInUserRef.current) === null || _loggedInUserRef$curr13 === void 0 ? void 0 : _loggedInUserRef$curr13.uid) === (eachMessage === null || eachMessage