@cometchat/chat-uikit-angular
Version:
Ready-to-use Chat UI Components for Angular (JavaScript/Web)
22,115 lines • 1.41 MB
JavaScript
import { ConversationUtils, CometChatMentionsFormatter, CometChatUIKitLoginListener, UserMentionStyle, CometChatUrlsFormatter, CallingDetailsUtils, ExtensionsDataSource as ExtensionsDataSource$1, CollaborativeDocumentConstants, ExtensionsId, CollaborativeWhiteboardConstants, PollsConstants, CometChatUIKitUtility, CometChatSoundManager, SmartRepliesConfiguration, StickersConstants, StickersConfiguration, CometChatUIKitSharedSettings, CometChatUIKitCalls, StorageUtils, InteractiveMessageUtils, OutgoingCallStyle, OutgoingCallConfiguration, CallScreenConfiguration, CallButtonsStyle, IncomingCallStyle, UsersStyle, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, ConversationsStyle, MessageInformationStyle, ReactionsConfiguration, MessageInformationConfiguration, MessageTranslationConstants, MessageTranslationStyle, CalendarStyle, TimeSlotStyle, SchedulerBubbleStyle, ReactionsStyle, FormBubbleStyle, CardBubbleStyle, LinkPreviewConstants, ThumbnailGenerationConstants, MessageListStyle, LinkPreviewStyle, SmartRepliesConstants, ReactionListStyle, ReactionListConfiguration, ReactionInfoStyle, ReactionInfoConfiguration, GroupMemberUtils, GroupMembersStyle, UserMemberWrapperConfiguration, MessageComposerStyle, MessageListConfiguration, MessageComposerConfiguration, ThreadedMessagesStyle, TransferOwnershipStyle, AddMembersConfiguration, BannedMembersConfiguration, GroupMembersConfiguration, TransferOwnershipConfiguration, DetailsUtils, DetailsStyle, MessageHeaderConfiguration, ThreadedMessagesConfiguration, DetailsConfiguration, MessagesStyle, GroupsStyle, UsersConfiguration, GroupsConfiguration, ContactsStyle, TabItemStyle, MessagesConfiguration, ConversationsConfiguration, ContactsConfiguration, WithMessagesStyle, CreateGroupConfiguration, JoinGroupConfiguration, CallLogsStyle, CallLogParticipantsStyle, CallLogRecordingsStyle, CallLogHistoryStyle, CallButtonsConfiguration, CallLogParticipantsConfiguration, CallLogHistoryConfiguration, CallLogRecordingsConfiguration, CallLogDetailsStyle, CallLogDetailsConfiguration, CallLogsConfiguration, WithDetailsStyle } from '@cometchat/uikit-shared';
export * from '@cometchat/uikit-shared';
import { CometChatMessageOption, CometChatUIKitConstants, localize, fontHelper, CometChatMessageTemplate, CometChatMessageComposerAction, MentionsTargetElement, MessageBubbleAlignment, CometChatTheme, CometChatMessageEvents, MessageStatus, CometChatUIEvents, ChatSdkEventInitializer, CometChatLocalize, CallWorkflow, CometChatCallEvents, IconButtonAlignment, TitleAlignment, States, DatePatterns, SelectionMode, UserPresencePlacement, CometChatUserEvents, CometChatGroupEvents, CometChatConversationEvents, MessageListAlignment, Receipts, TimestampAlignment, DocumentIconAlignment, Placement, UserMemberListType, AuxiliaryButtonAlignment, PreviewMessageMode, TabAlignment, TabsVisibility, CometChatCallDetailsTemplate, CometChatCallDetailsOption } from '@cometchat/uikit-resources';
export * from '@cometchat/uikit-resources';
import { CallscreenStyle, AvatarStyle, ListItemStyle, ConfirmDialogStyle, DateStyle, ReceiptStyle, BadgeStyle, MenuListStyle, QuickViewStyle, InputStyle, LabelStyle, RadioButtonStyle, CheckboxStyle, DropdownStyle, SingleSelectStyle, ChangeScopeStyle, MediaRecorderStyle, CreateGroupStyle, JoinGroupStyle } from '@cometchat/uikit-elements';
export { ActionSheetStyle, AvatarStyle, BackdropStyle, BadgeStyle, ButtonGroupStyle, CallscreenStyle, CardStyle, ChangeScopeStyle, CheckboxStyle, CometChatActionItem, CometChatActionSheet, CometChatAudioBubble, CometChatAvatar, CometChatBackdrop, CometChatBadge, CometChatButton, CometChatButtonGroup, CometChatCallscreenWrapper, CometChatCard, CometChatChangeScope, CometChatCheckbox, CometChatConfirmDialog, CometChatContextMenu, CometChatCreateGroup, CometChatDate, CometChatDivider, CometChatDocumentBubble, CometChatDraggable, CometChatDropdown, CometChatEmoji, CometChatEmojiKeyboard, CometChatFileBubble, CometChatFullScreenViewer, CometChatIcon, CometChatIconButton, CometChatImageBubble, CometChatInput, CometChatJoinGroup, CometChatLabel, CometChatListItem, CometChatLiveReaction, CometChatLoader, CometChatMediaRecorder, CometChatMenuList, CometChatMessageInput, CometChatModal, CometChatPanel, CometChatPopover, CometChatPreview, CometChatQuickView, CometChatRadioButton, CometChatReceipt, CometChatSearchInput, CometChatSingleSelect, CometChatStatusIndicator, CometChatTextBubble, CometChatTextInput, CometChatVideoBubble, ConfirmDialogStyle, ContextMenuStyle, CreateGroupStyle, DateStyle, DocumentBubbleStyle, DropdownStyle, EmojiKeyboardStyle, Emojis, FileBubbleStyle, FullScreenViewerStyle, IconStyle, ImageBubbleStyle, InputStyle, JoinGroupStyle, LabelStyle, ListItemStyle, LoaderStyle, MediaRecorderStyle, MenuListStyle, MessageInputStyle, ModalStyle, PanelStyle, PopoverStyle, PreviewStyle, QuickViewStyle, RadioButtonStyle, ReceiptStyle, SearchInputStyle, SingleSelectStyle, TextBubbleStyle, TextInputStyle, auxiliaryButtonAlignmentEnum, layoutType } from '@cometchat/uikit-elements';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import * as i0 from '@angular/core';
import { Injectable, Component, ViewChild, Input, ChangeDetectionStrategy, NgModule, CUSTOM_ELEMENTS_SCHEMA, ViewChildren, EventEmitter, Output } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule, DatePipe } from '@angular/common';
import { FormsModule } from '@angular/forms';
import * as i2 from '@angular/platform-browser';
class MessageUtils {
/**
* Creates an option to edit message.
* @param {CometChatTheme} theme - The theme object.
* @return {CometChatMessageOption} - Returns a new message option.
*/
getEditOption(theme) {
return new CometChatMessageOption({
id: CometChatUIKitConstants.MessageOption.editMessage,
title: localize("EDIT"),
iconURL: "assets/editicon.svg",
onClick: null,
iconTint: theme.palette.getAccent600(),
backgroundColor: "transparent",
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent600(),
});
}
/**
* Creates an option to react to a message.
* @param {CometChatTheme} theme - The theme object.
* @return {CometChatMessageOption} - Returns a new message option.
*/
getReactionOption(theme) {
return new CometChatMessageOption({
id: CometChatUIKitConstants.MessageOption.reactToMessage,
title: localize("REACT"),
iconURL: "assets/addreaction.svg",
onClick: undefined,
iconTint: theme.palette.getAccent600(),
backgroundColor: "transparent",
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent600(),
});
}
/**
* Creates an option to get info about a message.
* @param {CometChatTheme} theme - The theme object.
* @return {CometChatMessageOption} - Returns a new message option.
*/
getMessageInfoOption(theme) {
return new CometChatMessageOption({
id: CometChatUIKitConstants.MessageOption.messageInformation,
title: localize("INFO"),
iconURL: "assets/Info.svg",
onClick: null,
iconTint: theme.palette.getAccent600(),
backgroundColor: "transparent",
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent600(),
});
}
/**
* Creates an option to send a private message.
* @param {CometChatTheme} theme - The theme object.
* @return {CometChatMessageOption} - Returns a new message option.
*/
getMessagePrivatelyOption(theme) {
return new CometChatMessageOption({
id: CometChatUIKitConstants.MessageOption.sendMessagePrivately,
title: localize("MESSAGE_PRIVATELY"),
iconURL: "assets/message-privately.svg",
onClick: null,
iconTint: theme.palette.getAccent600(),
backgroundColor: "transparent",
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent600(),
});
}
/**
* Creates an option to delete a message.
* @param {CometChatTheme} theme - The theme object.
* @return {CometChatMessageOption} - Returns a new message option.
*/
getDeleteOption(theme) {
return new CometChatMessageOption({
id: CometChatUIKitConstants.MessageOption.deleteMessage,
title: localize("DELETE"),
iconURL: "assets/deleteicon.svg",
onClick: null,
iconTint: theme.palette.getAccent600(),
backgroundColor: "transparent",
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent600(),
});
}
/**
* Creates an option to reply to a message in a thread.
* @param {CometChatTheme} theme - The theme object.
* @return {CometChatMessageOption} - Returns a new message option.
*/
getReplyInThreadOption(theme) {
return new CometChatMessageOption({
id: CometChatUIKitConstants.MessageOption.replyInThread,
title: localize("REPLY"),
iconURL: "assets/threadicon.svg",
onClick: null,
iconTint: theme.palette.getAccent600(),
backgroundColor: "transparent",
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent600(),
});
}
/**
* Creates an option to copy a message.
* @param {CometChatTheme} theme - The theme object.
* @return {CometChatMessageOption} - Returns a new message option.
*/
getCopyOption(theme) {
return new CometChatMessageOption({
id: CometChatUIKitConstants.MessageOption.copyMessage,
title: localize("COPY"),
iconURL: "assets/Copy.svg",
onClick: null,
iconTint: theme.palette.getAccent600(),
backgroundColor: "transparent",
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent600(),
});
}
/**
* Checks if a message is sent by current logged in user.
* @param {CometChat.User} loggedInUser - The current logged in user.
* @param {CometChat.BaseMessage} message - The message to check.
* @return {boolean} - Returns true if message is sent by current logged in user, otherwise false.
*/
isSentByMe(loggedInUser, message) {
return loggedInUser.getUid() === message.getSender().getUid();
}
/**
* Fetches options for text messages.
* @param {CometChat.User} loggedInUser - The current logged in user.
* @param {CometChat.BaseMessage} messageObject - The message object.
* @param {CometChatTheme} theme - The theme object.
* @param {CometChat.Group} group - The group object.
* @return {Array<CometChatMessageOption>} - Returns an array of message options.
*/
getTextMessageOptions(loggedInUser, messageObject, theme, group) {
let isSentByMe = this.isSentByMe(loggedInUser, messageObject);
let isParticipant = false;
if (group?.getScope() == CometChatUIKitConstants.groupMemberScope.participant) {
isParticipant = true;
}
let messageOptionList = [];
messageOptionList.push(this.getReactionOption(theme));
if (!messageObject.getParentMessageId()) {
messageOptionList.push(this.getReplyInThreadOption(theme));
}
messageOptionList.push(this.getCopyOption(theme));
if (isSentByMe || (!isParticipant && group)) {
messageOptionList.push(this.getEditOption(theme));
}
if (isSentByMe) {
messageOptionList.push(this.getMessageInfoOption(theme));
}
if (isSentByMe || (!isParticipant && group))
messageOptionList.push(this.getDeleteOption(theme));
if (group && !isSentByMe) {
messageOptionList.push(this.getMessagePrivatelyOption(theme));
}
return messageOptionList;
}
/**
* Fetches options for image messages.
* @param {CometChat.User} loggedInUser - The current logged in user.
* @param {CometChat.BaseMessage} messageObject - The message object.
* @param {CometChatTheme} theme - The theme object.
* @param {CometChat.Group} group - The group object.
* @return {Array<CometChatMessageOption>} - Returns an array of message options.
*/
getImageMessageOptions(loggedInUser, messageObject, theme, group) {
let messageOptionList = [];
messageOptionList = ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
return messageOptionList;
}
/**
* Fetches options for video messages.
* @param {CometChat.User} loggedInUser - The current logged in user.
* @param {CometChat.BaseMessage} messageObject - The message object.
* @param {CometChatTheme} theme - The theme object.
* @param {CometChat.Group} group - (Optional) The group object.
* @return {Array<CometChatMessageOption>} - Returns an array of message options.
*/
getVideoMessageOptions(loggedInUser, messageObject, theme, group) {
let messageOptionList = [];
messageOptionList = ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
return messageOptionList;
}
/**
* Fetches options for audio messages.
* @param {CometChat.User} loggedInUser - The current logged in user.
* @param {CometChat.BaseMessage} messageObject - The message object.
* @param {CometChatTheme} theme - The theme object.
* @param {CometChat.Group} group - (Optional) The group object.
* @return {Array<CometChatMessageOption>} - Returns an array of message options.
*/
getAudioMessageOptions(loggedInUser, messageObject, theme, group) {
let messageOptionList = [];
messageOptionList = ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
return messageOptionList;
}
/**
* Fetches options for file messages.
* @param {CometChat.User} loggedInUser - The current logged in user.
* @param {CometChat.BaseMessage} messageObject - The message object.
* @param {CometChatTheme} theme - The theme object.
* @param {CometChat.Group} group - (Optional) The group object.
* @return {Array<CometChatMessageOption>} - Returns an array of message options.
*/
getFileMessageOptions(loggedInUser, messageObject, theme, group) {
let messageOptionList = [];
messageOptionList = ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
return messageOptionList;
}
getBottomView(_messageObject, _alignment) {
return null;
}
getSchedulerMessageTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.scheduler,
category: CometChatUIKitConstants.MessageCategory.interactive,
options: ChatConfigurator.getDataSource().getMessageOptions,
});
}
getTextMessageTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.text,
category: CometChatUIKitConstants.MessageCategory.message,
options: ChatConfigurator.getDataSource().getMessageOptions,
});
}
getAudioMessageTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.audio,
category: CometChatUIKitConstants.MessageCategory.message,
options: ChatConfigurator.getDataSource().getMessageOptions,
});
}
getVideoMessageTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.video,
category: CometChatUIKitConstants.MessageCategory.message,
options: ChatConfigurator.getDataSource().getMessageOptions,
});
}
getImageMessageTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.image,
category: CometChatUIKitConstants.MessageCategory.message,
options: ChatConfigurator.getDataSource().getMessageOptions,
});
}
getGroupActionTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.groupMember,
category: CometChatUIKitConstants.MessageCategory.action,
});
}
getFileMessageTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.file,
category: CometChatUIKitConstants.MessageCategory.message,
options: ChatConfigurator.getDataSource().getMessageOptions,
});
}
getFormMessageTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.form,
category: CometChatUIKitConstants.MessageCategory.interactive,
options: ChatConfigurator.getDataSource().getMessageOptions,
});
}
getCardMessageTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.card,
category: CometChatUIKitConstants.MessageCategory.interactive,
options: ChatConfigurator.getDataSource().getMessageOptions,
});
}
/**
* Function to check if a user's status should be visible
* @param {CometChat.User | CometChat.GroupMember} user - The user whose status visibility is to be checked.
* @return {boolean} - Returns `true` if the user's status should be hidden (blocked or offline), `false` otherwise.
*/
getUserStatusVisibility(user) {
let userBlockedFlag = false;
if (user) {
if (user.getBlockedByMe() || user.getHasBlockedMe() || user.getStatus() === CometChatUIKitConstants.userStatusType.offline) {
userBlockedFlag = true;
}
}
return userBlockedFlag;
}
getAllMessageTemplates() {
return [
ChatConfigurator.getDataSource().getTextMessageTemplate(),
ChatConfigurator.getDataSource().getImageMessageTemplate(),
ChatConfigurator.getDataSource().getVideoMessageTemplate(),
ChatConfigurator.getDataSource().getAudioMessageTemplate(),
ChatConfigurator.getDataSource().getFileMessageTemplate(),
ChatConfigurator.getDataSource().getGroupActionTemplate(),
ChatConfigurator.getDataSource().getFormMessageTemplate(),
ChatConfigurator.getDataSource().getCardMessageTemplate(),
ChatConfigurator.getDataSource().getSchedulerMessageTemplate(),
];
}
getMessageTemplate(messageType, messageCategory) {
let _template = null;
if (messageCategory != CometChatUIKitConstants.MessageCategory.call) {
switch (messageType) {
case CometChatUIKitConstants.MessageTypes.text:
_template = ChatConfigurator.getDataSource().getTextMessageTemplate();
break;
case CometChatUIKitConstants.MessageTypes.image:
_template =
ChatConfigurator.getDataSource().getImageMessageTemplate();
break;
case CometChatUIKitConstants.MessageTypes.video:
_template =
ChatConfigurator.getDataSource().getVideoMessageTemplate();
break;
case CometChatUIKitConstants.MessageTypes.groupMember:
_template = ChatConfigurator.getDataSource().getGroupActionTemplate();
break;
case CometChatUIKitConstants.MessageTypes.file:
_template = ChatConfigurator.getDataSource().getFileMessageTemplate();
break;
case CometChatUIKitConstants.MessageTypes.audio:
_template =
ChatConfigurator.getDataSource().getAudioMessageTemplate();
break;
case CometChatUIKitConstants.MessageTypes.form:
_template = ChatConfigurator.getDataSource().getFormMessageTemplate();
break;
case CometChatUIKitConstants.MessageTypes.card:
_template = ChatConfigurator.getDataSource().getCardMessageTemplate();
break;
case CometChatUIKitConstants.MessageTypes.scheduler:
_template =
ChatConfigurator.getDataSource().getSchedulerMessageTemplate();
break;
}
}
return _template;
}
getMessageOptions(loggedInUser, messageObject, theme, group) {
let _optionList = [];
if (messageObject.getCategory() ==
CometChatUIKitConstants.MessageCategory.message) {
switch (messageObject.getType()) {
case CometChatUIKitConstants.MessageTypes.text:
_optionList = ChatConfigurator.getDataSource().getTextMessageOptions(loggedInUser, messageObject, theme, group);
break;
case CometChatUIKitConstants.MessageTypes.image:
_optionList = ChatConfigurator.getDataSource().getImageMessageOptions(loggedInUser, messageObject, theme, group);
break;
case CometChatUIKitConstants.MessageTypes.video:
_optionList = ChatConfigurator.getDataSource().getVideoMessageOptions(loggedInUser, messageObject, theme, group);
break;
case CometChatUIKitConstants.MessageTypes.groupMember:
_optionList = [];
break;
case CometChatUIKitConstants.MessageTypes.file:
_optionList = ChatConfigurator.getDataSource().getFileMessageOptions(loggedInUser, messageObject, theme, group);
break;
case CometChatUIKitConstants.MessageTypes.audio:
_optionList = ChatConfigurator.getDataSource().getAudioMessageOptions(loggedInUser, messageObject, theme, group);
break;
}
}
else if (messageObject.getCategory() ==
CometChatUIKitConstants.MessageCategory.custom ||
messageObject.getCategory() ==
CometChatUIKitConstants.MessageCategory.interactive) {
_optionList = ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
}
return _optionList;
}
getCommonOptions(loggedInUser, messageObject, theme, group) {
let isSentByMe = this.isSentByMe(loggedInUser, messageObject);
let isParticipant = false;
if (group?.getScope() == CometChatUIKitConstants.groupMemberScope.participant)
isParticipant = true;
let messageOptionList = [];
messageOptionList.push(this.getReactionOption(theme));
if (!messageObject?.getParentMessageId()) {
messageOptionList.push(this.getReplyInThreadOption(theme));
}
if (isSentByMe) {
messageOptionList.push(this.getMessageInfoOption(theme));
}
if (isSentByMe || (!isParticipant && group))
messageOptionList.push(this.getDeleteOption(theme));
if (group && !isSentByMe) {
messageOptionList.push(this.getMessagePrivatelyOption(theme));
}
return messageOptionList;
}
getAllMessageTypes() {
return [
CometChatUIKitConstants.MessageTypes.text,
CometChatUIKitConstants.MessageTypes.image,
CometChatUIKitConstants.MessageTypes.audio,
CometChatUIKitConstants.MessageTypes.video,
CometChatUIKitConstants.MessageTypes.file,
CometChatUIKitConstants.MessageTypes.groupMember,
CometChatUIKitConstants.MessageTypes.form,
CometChatUIKitConstants.MessageTypes.card,
CometChatUIKitConstants.MessageTypes.scheduler,
];
}
addList() {
return "<Message Utils>";
}
getAllMessageCategories() {
return [
CometChatUIKitConstants.MessageCategory.message,
CometChatUIKitConstants.MessageCategory.action,
CometChatUIKitConstants.MessageCategory.interactive,
];
}
getAuxiliaryOptions(id, user, group) {
return null;
}
getId() {
return "messageUtils";
}
getActionMessage(message) {
try {
if (message instanceof CometChat.Action) {
const action = message.getAction();
const actionBy = message.getActionBy();
const actionOn = message.getActionOn();
const byString = actionBy.getName();
const forString = action === CometChatUIKitConstants.groupMemberAction.JOINED ||
action === CometChatUIKitConstants.groupMemberAction.LEFT
? ""
: actionOn.getName();
switch (action) {
case CometChatUIKitConstants.groupMemberAction.ADDED:
return `${byString} ${localize("ADDED")} ${forString}`;
case CometChatUIKitConstants.groupMemberAction.JOINED:
return `${byString} ${localize("JOINED")}`;
case CometChatUIKitConstants.groupMemberAction.LEFT:
return `${byString} ${localize("LEFT")}`;
case CometChatUIKitConstants.groupMemberAction.KICKED:
return `${byString} ${localize("KICKED")} ${forString}`;
case CometChatUIKitConstants.groupMemberAction.BANNED:
return `${byString} ${localize("BANNED")} ${forString}`;
case CometChatUIKitConstants.groupMemberAction.UNBANNED:
return `${byString} ${localize("UNBANNED")} ${forString}`;
case CometChatUIKitConstants.groupMemberAction.SCOPE_CHANGE:
return `${byString} ${localize("MADE")} ${forString} ${message.getNewScope()}`;
default:
return "";
}
}
else {
return "";
}
}
catch (e) {
return "";
}
}
imageAttachmentOption(theme) {
return new CometChatMessageComposerAction({
id: CometChatUIKitConstants.MessageTypes.image,
title: localize("ATTACH_IMAGE"),
iconURL: "assets/photolibrary.svg",
onClick: null,
iconTint: theme.palette.getAccent700(),
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent700(),
borderRadius: "8px",
background: theme.palette.getAccent100(),
});
}
videoAttachmentOption(theme) {
return new CometChatMessageComposerAction({
id: CometChatUIKitConstants.MessageTypes.video,
title: localize("ATTACH_VIDEO"),
iconURL: "assets/video.svg",
onClick: null,
iconTint: theme.palette.getAccent700(),
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent700(),
borderRadius: "8px",
background: theme.palette.getAccent100(),
});
}
audioAttachmentOption(theme) {
return new CometChatMessageComposerAction({
id: CometChatUIKitConstants.MessageTypes.audio,
title: localize("ATTACH_AUDIO"),
iconURL: "assets/audio-file.svg",
onClick: null,
iconTint: theme.palette.getAccent700(),
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent700(),
borderRadius: "8px",
background: theme.palette.getAccent100(),
});
}
fileAttachmentOption(theme) {
return new CometChatMessageComposerAction({
id: CometChatUIKitConstants.MessageTypes.file,
title: localize("ATTACH_FILE"),
iconURL: "assets/attachment-file.svg",
onClick: null,
iconTint: theme.palette.getAccent700(),
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent700(),
borderRadius: "8px",
background: theme.palette.getAccent100(),
});
}
getAttachmentOptions(theme, user, group, id) {
let actions = [
this.imageAttachmentOption(theme),
this.videoAttachmentOption(theme),
this.audioAttachmentOption(theme),
this.fileAttachmentOption(theme),
];
return actions;
}
getLastConversationMessage(conversation, loggedInUser, additionalConfigurations) {
let config = {
...additionalConfigurations,
textFormatters: additionalConfigurations?.textFormatters &&
additionalConfigurations?.textFormatters.length
? [...additionalConfigurations.textFormatters]
: [this.getMentionsTextFormatter({ theme: additionalConfigurations.theme, disableMentions: additionalConfigurations.disableMentions })],
};
let message = ConversationUtils.getLastConversationMessage(conversation, loggedInUser, config);
let messageObject = conversation?.getLastMessage();
if (messageObject) {
let textFormatters = config.textFormatters;
if (config && !config.disableMentions) {
let mentionsTextFormatter;
for (let i = 0; i < textFormatters.length; i++) {
if (textFormatters[i] instanceof CometChatMentionsFormatter) {
mentionsTextFormatter = textFormatters[i];
mentionsTextFormatter.setMessage(messageObject);
if (messageObject.getMentionedUsers().length) {
mentionsTextFormatter.setCometChatUserGroupMembers(messageObject.getMentionedUsers());
}
mentionsTextFormatter.setLoggedInUser(CometChatUIKitLoginListener.getLoggedInUser());
}
if (mentionsTextFormatter) {
break;
}
}
if (!mentionsTextFormatter) {
mentionsTextFormatter =
ChatConfigurator.getDataSource().getMentionsTextFormatter({
messageObject,
...config,
alignment: null,
theme: additionalConfigurations.theme,
});
textFormatters.push(mentionsTextFormatter);
}
}
if (messageObject &&
messageObject instanceof CometChat.TextMessage) {
for (let i = 0; i < textFormatters.length; i++) {
message = textFormatters[i].getFormattedText(message, { mentionsTargetElement: MentionsTargetElement.conversation });
}
}
}
return message;
}
/**
* Adds styled @ for every mention in the text by matching uid
*
* @param {CometChat.TextMessage} message
* @param {string} subtitle
* @returns {void}
*/
getMentionsFormattedText(message, subtitle, mentionsFormatterParams) {
const regex = /<@uid:(.*?)>/g;
let messageText = message.getText();
let messageTextTmp = subtitle;
let match = regex.exec(messageText);
let cometChatUsers = [];
let mentionedUsers = message.getMentionedUsers();
while (match !== null) {
let user;
for (let i = 0; i < mentionedUsers.length; i++) {
if (match[1] == mentionedUsers[i].getUid()) {
user = mentionedUsers[i];
}
}
if (user) {
cometChatUsers.push(user);
}
match = regex.exec(messageText);
}
let mentionsFormatter = this.getMentionsTextFormatter(mentionsFormatterParams);
mentionsFormatter.setClasses(["cc-mentions"]);
mentionsFormatter.setCometChatUserGroupMembers(cometChatUsers);
messageTextTmp = mentionsFormatter.getFormattedText(messageTextTmp, mentionsFormatterParams);
return messageTextTmp;
}
getAIOptions(theme, id) {
return [];
}
getAllTextFormatters(formatterParams) {
let formatters = [];
const mentionsFormatter = formatterParams.disableMentions ? null : ChatConfigurator.getDataSource().getMentionsTextFormatter(formatterParams);
const urlTextFormatter = ChatConfigurator.getDataSource().getUrlTextFormatter(formatterParams);
if (mentionsFormatter) {
formatters.push(mentionsFormatter);
}
if (urlTextFormatter) {
formatters.push(urlTextFormatter);
}
return formatters;
}
getMentionsTextFormatter(params) {
let mentionsTextFormatter = new CometChatMentionsFormatter();
if (params && params.theme) {
mentionsTextFormatter.setComposerMentionStyle(new UserMentionStyle({
loggedInUserTextFont: fontHelper(params.theme.typography.text2),
loggedInUserTextColor: params.theme.palette.getPrimary(),
loggedInUserTextBackground: "",
mentionTextFont: fontHelper(params.theme.typography.text2),
mentionTextColor: params.theme.palette.getPrimary(),
mentionTextBackground: "",
}));
mentionsTextFormatter.setConversationMentionStyle(new UserMentionStyle({
loggedInUserTextFont: fontHelper(params.theme.typography.text3),
loggedInUserTextColor: params.theme.palette.getPrimary(),
loggedInUserTextBackground: "",
mentionTextFont: fontHelper(params.theme.typography.text3),
mentionTextColor: params.theme.palette.getPrimary(),
mentionTextBackground: "",
}));
mentionsTextFormatter.setRightBubbleMentionStyle(new UserMentionStyle({
loggedInUserTextFont: fontHelper(params.theme.typography.text3),
loggedInUserTextColor: params.theme.palette.getTertiary(),
loggedInUserTextBackground: "",
mentionTextFont: fontHelper(params.theme.typography.text3),
mentionTextColor: params.theme.palette.getTertiary(),
mentionTextBackground: "",
}));
mentionsTextFormatter.setLeftBubbleMentionStyle(new UserMentionStyle({
loggedInUserTextFont: fontHelper(params.theme.typography.text3),
loggedInUserTextColor: params.theme.palette.getPrimary(),
loggedInUserTextBackground: "",
mentionTextFont: fontHelper(params.theme.typography.text3),
mentionTextColor: params.theme.palette.getPrimary(),
mentionTextBackground: "",
}));
}
return mentionsTextFormatter;
}
getUrlTextFormatter(params = {}) {
let urlTextFormatter = new CometChatUrlsFormatter([
/(https?:\/\/[^\s]+)/g,
]);
if (params.alignment == MessageBubbleAlignment.left) {
urlTextFormatter.setStyle({
formattedTextColor: params.theme.palette.getPrimary(),
formattedTextFont: fontHelper(params.theme.typography.text3),
});
}
else {
urlTextFormatter.setStyle({
formattedTextColor: params.theme.palette.getTertiary(),
formattedTextFont: fontHelper(params.theme.typography.text3),
});
}
return urlTextFormatter;
}
}
class ChatConfigurator {
static init(initialSource) {
this.dataSource = initialSource ?? new MessageUtils();
if (!initialSource) {
this.names = [];
}
this.names.push(this.dataSource.getId());
}
static enable(callback) {
let oldSource = this.dataSource;
let newSource = callback(oldSource);
if (!this.names.find((nm) => nm == newSource.getId())) {
this.dataSource = newSource;
this.names.push(this.dataSource.getId());
}
}
static getDataSource() {
return this.dataSource;
}
}
ChatConfigurator.names = ["message utils"];
class DataSourceDecorator {
constructor(dataSource) {
this.dataSource = dataSource;
}
getTextMessageOptions(loggedInUser, messageObject, theme, group) {
return (this.dataSource ?? new MessageUtils()).getTextMessageOptions(loggedInUser, messageObject, theme, group);
}
getImageMessageOptions(loggedInUser, messageObject, theme, group) {
return (this.dataSource ?? new MessageUtils()).getImageMessageOptions(loggedInUser, messageObject, theme, group);
}
getVideoMessageOptions(loggedInUser, messageObject, theme, group) {
return (this.dataSource ?? new MessageUtils()).getVideoMessageOptions(loggedInUser, messageObject, theme, group);
}
getAudioMessageOptions(loggedInUser, messageObject, theme, group) {
return (this.dataSource ?? new MessageUtils()).getAudioMessageOptions(loggedInUser, messageObject, theme, group);
}
getFileMessageOptions(loggedInUser, messageObject, theme, group) {
return (this.dataSource ?? new MessageUtils()).getFileMessageOptions(loggedInUser, messageObject, theme, group);
}
getTextMessageTemplate() {
return (this.dataSource ?? new MessageUtils()).getTextMessageTemplate();
}
getImageMessageTemplate() {
return (this.dataSource ?? new MessageUtils()).getImageMessageTemplate();
}
getVideoMessageTemplate() {
return (this.dataSource ?? new MessageUtils()).getVideoMessageTemplate();
}
getAudioMessageTemplate() {
return (this.dataSource ?? new MessageUtils()).getAudioMessageTemplate();
}
getFileMessageTemplate() {
return (this.dataSource ?? new MessageUtils()).getFileMessageTemplate();
}
getFormMessageTemplate() {
return (this.dataSource ?? new MessageUtils()).getFormMessageTemplate();
}
getCardMessageTemplate() {
return (this.dataSource ?? new MessageUtils()).getCardMessageTemplate();
}
getGroupActionTemplate() {
return (this.dataSource ?? new MessageUtils()).getGroupActionTemplate();
}
getSchedulerMessageTemplate() {
return (this.dataSource ?? new MessageUtils()).getSchedulerMessageTemplate();
}
getAllMessageTemplates() {
return (this.dataSource ?? new MessageUtils()).getAllMessageTemplates();
}
getMessageTemplate(messageType, messageCategory) {
return (this.dataSource ?? new MessageUtils()).getMessageTemplate(messageType, messageCategory);
}
getMessageOptions(loggedInUser, messageObject, theme, group) {
return (this.dataSource ?? new MessageUtils()).getMessageOptions(loggedInUser, messageObject, theme, group);
}
getCommonOptions(loggedInUser, messageObject, theme, group) {
return (this.dataSource ?? new MessageUtils()).getCommonOptions(loggedInUser, messageObject, theme, group);
}
getDeleteOption(theme) {
return (this.dataSource ?? new MessageUtils()).getDeleteOption(theme);
}
getReplyInThreadOption(theme) {
return (this.dataSource ?? new MessageUtils()).getReplyInThreadOption(theme);
}
getEditOption(theme) {
return (this.dataSource ?? new MessageUtils()).getEditOption(theme);
}
getAttachmentOptions(theme = new CometChatTheme({}), user, group, id) {
return (this.dataSource ?? new MessageUtils()).getAttachmentOptions(theme, user, group, id);
}
getAllMessageTypes() {
return (this.dataSource ?? new MessageUtils()).getAllMessageTypes();
}
getAllMessageCategories() {
return (this.dataSource ?? new MessageUtils()).getAllMessageCategories();
}
getAuxiliaryOptions(id, user, group) {
return (this.dataSource ?? new MessageUtils()).getAuxiliaryOptions(id, user, group);
}
getId() {
return (this.dataSource ?? new MessageUtils()).getId();
}
getLastConversationMessage(conversation, loggedInUser, additionalParams) {
return (this.dataSource ?? new MessageUtils()).getLastConversationMessage(conversation, loggedInUser, additionalParams);
}
getAIOptions(theme, id, aiOptionsStyles) {
return (this.dataSource ?? new MessageUtils()).getAIOptions(theme, id, aiOptionsStyles);
}
getAllTextFormatters(formatterParams) {
let formatters = [];
const mentionsFormatter = formatterParams.disableMentions ? null : (this.dataSource ?? new MessageUtils()).getMentionsTextFormatter(formatterParams);
const urlTextFormatter = (this.dataSource ?? new MessageUtils()).getUrlTextFormatter(formatterParams);
if (mentionsFormatter) {
formatters.push(mentionsFormatter);
}
if (urlTextFormatter) {
formatters.push(urlTextFormatter);
}
return formatters;
}
getMentionsTextFormatter(formatterParams) {
return (this.dataSource ?? new MessageUtils()).getMentionsTextFormatter(formatterParams);
}
getUrlTextFormatter(formatterParams) {
return (this.dataSource ?? new MessageUtils()).getUrlTextFormatter(formatterParams);
}
getMentionsFormattedText(message, subtitle, mentionsFormatterParams) {
return (this.dataSource ?? new MessageUtils()).getMentionsFormattedText(message, subtitle, mentionsFormatterParams);
}
}
class CallingExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
this.onLogout();
}
// end active call when user logs out
onLogout() {
var listenerID = "logout_listener";
CometChat.addLoginListener(listenerID, new CometChat.LoginListener({
logoutSuccess: () => {
let call = CometChat.getActiveCall();
if (call) {
CometChat.endCall(call.getSessionId());
}
else {
return;
}
},
logoutFailure: (error) => {
console.log("LoginListener :: logoutFailure", error);
},
}));
}
getAllMessageTypes() {
const types = super.getAllMessageTypes();
if (!types.includes(CometChatUIKitConstants.calls.meeting)) {
types.push(CometChatUIKitConstants.calls.meeting);
}
if (!types.includes(CometChatUIKitConstants.MessageTypes.audio)) {
types.push(CometChatUIKitConstants.MessageTypes.audio);
}
if (!types.includes(CometChatUIKitConstants.MessageTypes.video)) {
types.push(CometChatUIKitConstants.MessageTypes.video);
}
return types;
}
getId() {
return "calling";
}
getAllMessageCategories() {
const categories = super.getAllMessageCategories();
if (!categories.includes(CometChatUIKitConstants.MessageCategory.call)) {
categories.push(CometChatUIKitConstants.MessageCategory.call);
}
if (!categories.includes(CometChatUIKitConstants.MessageCategory.custom)) {
categories.push(CometChatUIKitConstants.MessageCategory.custom);
}
return categories;
}
checkIfTemplateTypeExist(template, type) {
return template.some((obj) => obj.type === type);
}
checkIfTemplateCategoryExist(template, category) {
return template.some((obj) => obj.category === category);
}
getAllMessageTemplates() {
const templates = super.getAllMessageTemplates();
if (!this.checkIfTemplateTypeExist(templates, CometChatUIKitConstants.calls.meeting)) {
templates.push(this.getDirectCallTemplate());
}
if (!this.checkIfTemplateCategoryExist(templates, CometChatUIKitConstants.MessageCategory.call)) {
templates.push(...this.getDefaultCallTemplate());
}
return templates;
}
getDirectCallTemplate() {
return new CometChatMessageTemplate({
type: CometChatUIKitConstants.calls.meeting,
category: CometChatUIKitConstants.MessageCategory.custom,
options: (loggedInUser, messageObject, theme, group) => {
return ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
},
});
}
getDefaultCallTemplate() {
let templates = [
new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.audio,
category: CometChatUIKitConstants.MessageCategory.call,
}),
new CometChatMessageTemplate({
type: CometChatUIKitConstants.MessageTypes.video,
category: CometChatUIKitConstants.MessageCategory.call,
}),
];
return templates;
}
getLastConversationMessage(conversation, loggedInUser, additionalParams) {
let actionMessage = "";
if (conversation.getLastMessage() &&
conversation.getLastMessage().category ==
CometChatUIKitConstants.MessageCategory.call) {
let call = conversation.getLastMessage();
actionMessage = CallingDetailsUtils.getCallStatus(call, loggedInUser);
}
else if (conversation?.getLastMessage() &&
conversation.getLastMessage().type ==
CometChatUIKitConstants.calls.meeting) {
let message = conversation.getLastMessage();
if (!message.getSender() ||
message?.getSender()?.getUid() == loggedInUser.getUid()) {
actionMessage = localize("YOU_INITIATED_GROUP_CALL");
}
else {
actionMessage = `${message.getSender().getName()} ${localize("INITIATED_GROUP_CALL")}`;
}
let messageObject = conversation.getLastMessage();
if (messageObject &&
messageObject.getMentionedUsers().length &&
messageObject instanceof CometChat.TextMessage &&
additionalParams &&
!additionalParams.disableMentions) {
actionMessage = this.getMentionsFormattedText(messageObject, actionMessage, additionalParams);
}
}
else {
actionMessage = super.getLastConversationMessage(conversation, loggedInUser, additionalParams);
}
return actionMessage;
}
}
class CallingExtension extends ExtensionsDataSource$1 {
getExtensionId() {
return '';
}
addExtension() {
}
enable() {
ChatConfigurator.enable((dataSource) => new CallingExtensionDecorator(dataSource));
}
}
class CollaborativeDocumentExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getAllMessageTypes() {
const types = super.getAllMessageTypes();
if (!types.includes(CollaborativeDocumentConstants.extension_document)) {
types.push(CollaborativeDocumentConstants.extension_document);
}
return types;
}
getId() {
return "collaborativedocument";
}
getAllMessageCategories() {
const categories = super.getAllMessageCategories();
if (!categories.includes(CometChatUIKitConstants.MessageCategory.custom)) {
categories.push(CometChatUIKitConstants.MessageCategory.custom);
}
return categories;
}
checkIfTemplateExist(template, type) {
return template.some((obj) => obj.type === type);
}
getAllMessageTemplates() {
const templates = super.getAllMessageTemplates();
if (!this.checkIfTemplateExist(templates, CollaborativeDocumentConstants.extension_document)) {
templates.push(this.getDocumentTemplate());
}
return templates;
}
getDocumentTemplate() {
return new CometChatMessageTemplate({
type: CollaborativeDocumentConstants.extension_document,
category: CometChatUIKitConstants.MessageCategory.custom,
options: (loggedInUser, messageObject, theme, group) => {
return ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
},
});
}
getAttachmentOptions(theme = new CometChatTheme({}), user, group, id) {
if (!id?.parentMessageId) {
let receiverType = user
? CometChatUIKitConstants.MessageReceiverType.user
: CometChatUIKitConstants.MessageReceiverType.group;
let receiverId = user
? user.getUid()
: group?.getGuid();
const messageComposerActions = super.getAttachmentOptions(theme, user, group, id);
let newAction = new CometChatMessageComposerAction({
id: CollaborativeDocumentConstants.document,
title: localize("COLLABORATIVE_DOCUMENT"),
iconURL: "assets/collaborativedocument.svg",
iconTint: theme.palette.getAccent700(),
titleColor: theme.palette.getAccent600(),
titleFont: fontHelper(theme.typography.subtitle1),
background: theme.palette.getAccent100(),
onClick: () => {
CometChat.callExtension(CollaborativeDocumentConstants.document, CollaborativeDocumentConstants.post, CollaborativeDocumentConstants.v1_create, {
receiver: receiverId,
receiverType: receiverType,
})
.then((res) => { })
.catch((error) => {
console.log(error);
});
},
});
messageComposerActions.push(newAction);
return messageComposerActions;
}
else {
return super.getAttachmentOptions(theme, user, group, id);
}
}
getLastConversationMessage(conversation, loggedInUser, additionalConfigurations) {
const message = conversation.getLastMessage();
if (message != null &&
message.getType() == CollaborativeDocumentConstants.extension_document &&
message.getCategory() == CometChatUIKitConstants.MessageCategory.custom) {
return localize("CUSTOM_MESSAGE_DOCUMENT");
}
else {
return super.getLastConversationMessage(conversation, loggedInUser, additionalConfigurations);
}
}
}
class CollaborativeDocumentExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new CollaborativeDocumentExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.document;
}
}
class CollaborativeWhiteBoardExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getAllMessageTypes() {
const types = super.getAllMessageTypes();
if (!types.includes(CollaborativeWhiteboardConstants.extension_whiteboard)) {
types.push(CollaborativeWhiteboardConstants.extension_whiteboard);
}
return types;
}
getId() {
return "collaborativewhiteboard";
}
getAllMessageCategories() {
const categories = super.getAllMessageCategories();
if (!categories.includes(CometChatUIKitConstants.MessageCategory.custom)) {
categories.push(CometChatUIKitConstants.MessageCategory.custom);
}
return categories;
}
checkIfTemplateExist(template, type) {
return template.some((obj) => obj.type === type);
}
getAllMessageTemplates() {
const templates = super.getAllMessageTemplates();
if (!this.checkIfTemplateExist(templates, CollaborativeWhiteboardConstants.extension_whiteboard)) {
templates.push(this.getWhiteBoardTemplate());
}
return templates;
}
getWhiteBoardTemplate() {
return new CometChatMessageTemplate({
type: CollaborativeWhiteboardConstants.extension_whiteboard,
category: CometChatUIKitConstants.MessageCategory.custom,
options: (loggedInUser, messageObject, theme, group) => {
return ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
},
});
}
getAttachmentOptions(theme = new CometChatTheme({}), user, group, id) {
if (!id?.parentMessageId) {
let receiverType = user
? CometChatUIKitConstants.MessageReceiverType.user
: CometChatUIKitConstants.MessageReceiverType.group;
let receiverId = user
? user.getUid()
: group?.getGuid();
const messageComposerActions = super.getAttachmentOptions(theme, user, group, id);
let newAction = new CometChatMessageComposerAction({
id: CollaborativeWhiteboardConstants.whiteboard,
title: localize("COLLABORATIVE_WHITEBOARD"),
iconURL: "assets/collaborativewhiteboard.svg",
iconTint: theme.palette.getAccent700(),
titleColor: theme.palette.getAccent600(),
titleFont: fontHelper(theme.typography.subtitle1),
background: theme.palette.getAccent100(),
onClick: () => {
CometChat.callExtension(CollaborativeWhiteboardConstants.whiteboard, CollaborativeWhiteboardConstants.post, CollaborativeWhiteboardConstants.v1_create, {
receiver: receiverId,
receiverType: receiverType,
})
.then((res) => { })
.catch((error) => {
console.log(error);
});
},
});
messageComposerActions.push(newAction);
return messageComposerActions;
}
else {
return super.getAttachmentOptions(theme, user, group, id);
}
}
getLastConversationMessage(conversation, loggedInUser, additionalConfigurations) {
const message = conversation.getLastMessage();
if (message != null &&
message.getType() ==
CollaborativeWhiteboardConstants.extension_whiteboard &&
message.getCategory() == CometChatUIKitConstants.MessageCategory.custom) {
return localize("CUSTOM_MESSAGE_WHITEBOARD");
}
else {
return super.getLastConversationMessage(conversation, loggedInUser, additionalConfigurations);
}
}
}
class CollaborativeWhiteBoardExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new CollaborativeWhiteBoardExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.whiteboard;
}
}
class ImageModerationExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getId() {
return "imagemoderation";
}
}
class ImageModerationExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new ImageModerationExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.imageModeration;
}
}
class LinkPreviewExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getId() {
return "linkpreview";
}
}
class LinkPreviewExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new LinkPreviewExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.linkPreview;
}
}
class MessageTranslationExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getTextMessageOptions(loggedInUser, messageObject, theme, group) {
let options = super.getTextMessageOptions(loggedInUser, messageObject, theme, group);
if (!this.checkIfOptionExist(options, CometChatUIKitConstants.MessageOption.translateMessage)) {
let newOption = new CometChatMessageOption({
id: CometChatUIKitConstants.MessageOption.translateMessage,
title: localize("TRANSLATE"),
iconURL: "assets/translation.svg",
onClick: null,
iconTint: theme.palette.getAccent600(),
backgroundColor: "transparent",
titleFont: fontHelper(theme.typography.subtitle1),
titleColor: theme.palette.getAccent600()
});
options.push(newOption);
}
return options;
}
checkIfOptionExist(template, id) {
return template.some(obj => obj.id === id);
}
getId() {
return "messagetranslation";
}
}
class MessageTranslationExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new MessageTranslationExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.messageTranslation;
}
}
class PollsExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getId() {
return "polls";
}
getAllMessageTypes() {
const types = super.getAllMessageTypes();
if (!types.includes(PollsConstants.extension_poll)) {
types.push(PollsConstants.extension_poll);
}
return types;
}
getAllMessageCategories() {
const categories = super.getAllMessageCategories();
if (!categories.includes(CometChatUIKitConstants.MessageCategory.custom)) {
categories.push(CometChatUIKitConstants.MessageCategory.custom);
}
return categories;
}
checkIfTemplateExist(template, type) {
return template.some((obj) => obj.type === type);
}
getAllMessageTemplates() {
const templates = super.getAllMessageTemplates();
if (!this.checkIfTemplateExist(templates, PollsConstants.extension_poll)) {
templates.push(this.getPollsTemplate());
}
return templates;
}
getPollsTemplate() {
return new CometChatMessageTemplate({
type: PollsConstants.extension_poll,
category: CometChatUIKitConstants.MessageCategory.custom,
options: (loggedInUser, messageObject, theme, group) => {
return ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
},
});
}
getAttachmentOptions(theme = new CometChatTheme({}), user, group, id) {
if (!id?.parentMessageId) {
const messageComposerActions = super.getAttachmentOptions(theme, user, group, id);
let newAction = new CometChatMessageComposerAction({
id: PollsConstants.extension_poll,
title: localize("POLLS"),
iconURL: "assets/polls.svg",
iconTint: theme.palette.getAccent700(),
titleColor: theme.palette.getAccent600(),
titleFont: fontHelper(theme.typography.subtitle1),
background: theme.palette.getAccent100(),
onClick: null,
});
messageComposerActions.push(newAction);
return messageComposerActions;
}
else {
return super.getAttachmentOptions(theme, user, group, id);
}
}
getLastConversationMessage(conversation, loggedInUser, additionalConfigurations) {
const message = conversation.getLastMessage();
if (message != null &&
message.getType() == PollsConstants.extension_poll &&
message.getCategory() == CometChatUIKitConstants.MessageCategory.custom) {
return localize("CUSTOM_MESSAGE_POLL");
}
else {
return super.getLastConversationMessage(conversation, loggedInUser, additionalConfigurations);
}
}
}
class PollsExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new PollsExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.polls;
}
}
class SmartReplyExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
this.LISTENER_ID = "smartreply__listener";
this.currentMessage = null;
this.sendReply = (reply, message, onError, customSoundForMessages = "", disableSoundForMessages = false) => {
let ReceiverType = this.activeUser ? CometChatUIKitConstants.MessageReceiverType.user : CometChatUIKitConstants.MessageReceiverType.group;
if (reply && reply.trim().length > 0 && message) {
let newMessage;
if (message.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.user) {
newMessage = new CometChat.TextMessage(message.getSender().getUid(), reply.trim(), ReceiverType);
newMessage.setReceiver(this.activeUser);
}
else {
const group = message.getReceiver();
newMessage = new CometChat.TextMessage(group.getGuid(), reply.trim(), ReceiverType);
newMessage.setReceiver(this.activeGroup);
}
if (message.getParentMessageId() > 0) {
newMessage.setParentMessageId(message.getParentMessageId());
}
newMessage.setCategory(CometChatUIKitConstants.MessageCategory.message);
newMessage.setSender(this.loggedInUser);
newMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
newMessage.setMuid(CometChatUIKitUtility.ID());
CometChatMessageEvents.ccMessageSent.next({
message: newMessage,
status: MessageStatus.inprogress
});
if (!disableSoundForMessages) {
CometChatSoundManager.play(customSoundForMessages ?? CometChatSoundManager.Sound.outgoingMessage);
}
CometChat.sendMessage(newMessage).then((message) => {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.success
});
})
.catch((error) => {
newMessage.setMetadata({
error: true
});
CometChatMessageEvents.ccMessageSent.next({
message: newMessage,
status: MessageStatus.error
});
});
}
};
this.configuration = new SmartRepliesConfiguration({});
this.addMessageListener();
this.configuration.ccSmartRepliesClicked = this.sendReply;
}
addMessageListener() {
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
}).catch((error) => {
console.log(error);
});
CometChat.addMessageListener(this.LISTENER_ID, {
onTextMessageReceived: (textMessage) => {
if (textMessage != null) {
if (textMessage.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.user &&
this.activeUser != null) {
if (textMessage.getSender() != null &&
textMessage.getSender().getUid() != null &&
this.activeUser.getUid() == textMessage.getSender().getUid()) {
CometChatUIEvents.ccShowPanel.next({
configuration: this.configuration,
message: textMessage
});
}
}
else if (textMessage.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.group &&
this.activeGroup != null) {
if (this.activeGroup.getGuid() != null &&
this.activeGroup.getGuid() == textMessage.getReceiverId()) {
CometChatUIEvents.ccShowPanel.next({
configuration: this.configuration,
message: textMessage
});
}
}
}
},
});
CometChatUIEvents.ccActiveChatChanged.subscribe((data) => {
this.currentMessage = data.message;
this.activeUser = data.user;
this.activeGroup = data.group;
if (data.message != null && data.message.getType() == CometChatUIKitConstants.MessageTypes.text &&
data.message.getSender() != null &&
this.loggedInUser != null &&
data.message.getSender().getUid() != null &&
data.message.getSender().getUid() != this.loggedInUser.getUid()) {
CometChatUIEvents.ccShowPanel.next({
configuration: this.configuration,
message: data.message
});
}
});
CometChatMessageEvents.ccMessageSent.subscribe(() => {
CometChatUIEvents.ccHidePanel.next();
this.currentMessage = null;
});
}
getId() {
return "smartreply";
}
}
class SmartReplyExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new SmartReplyExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.smartReply;
}
}
function CometChatException(error) {
return new CometChat.CometChatException({
message: error?.message,
details: error?.details,
code: error?.code,
name: error?.name
});
}
class StickersExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
this.sendStickerMessage = (sticker, loggedInUser, user, group, parentMessageid, onError, customSoundForMessages = "", disableSoundForMessages = false) => {
let receiverId = user?.getUid() || group?.getGuid();
let receiverType = user
? CometChatUIKitConstants.MessageReceiverType.user
: CometChatUIKitConstants.MessageReceiverType.group;
try {
const customData = {
sticker_url: sticker.url,
sticker_name: sticker.name,
};
const customType = StickersConstants.sticker;
const customMessage = new CometChat.CustomMessage(receiverId, receiverType, customType, customData);
if (parentMessageid) {
customMessage.setParentMessageId(parentMessageid);
}
customMessage.shouldUpdateConversation(true);
customMessage.setMetadata({ incrementUnreadCount: true });
customMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
customMessage.setMuid(CometChatUIKitUtility.ID());
if (CometChatUIKitLoginListener.getLoggedInUser()) {
customMessage.setSender(CometChatUIKitLoginListener.getLoggedInUser());
}
CometChatMessageEvents.ccMessageSent.next({
message: customMessage,
status: MessageStatus.inprogress,
});
if (!disableSoundForMessages) {
CometChatSoundManager.play(customSoundForMessages ?? CometChatSoundManager.Sound.outgoingMessage);
}
CometChat.sendCustomMessage(customMessage)
.then((message) => {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.success,
});
})
.catch((error) => {
customMessage.setMetadata({
error: true,
});
CometChatMessageEvents.ccMessageSent.next({
message: customMessage,
status: MessageStatus.error,
});
});
}
catch (error) {
if (onError) {
onError(CometChatException(error));
}
}
};
this.newDataScorce = dataSource;
this.configuration = new StickersConfiguration({});
this.configuration.ccStickerClicked = this.sendStickerMessage;
}
getDataScorce() {
return this.newDataScorce;
}
getAllMessageTemplates() {
let template = super.getAllMessageTemplates();
if (!this.checkIfTemplateExist(template, StickersConstants.sticker)) {
template.push(this.getStickerTemplate());
return template;
}
return template;
}
getAuxiliaryOptions(id, user, group) {
return { configuration: this.configuration, id: StickersConstants.sticker };
}
getStickerTemplate() {
return new CometChatMessageTemplate({
type: StickersConstants.sticker,
category: CometChatUIKitConstants.MessageCategory.custom,
options: (loggedInUser, messageObject, theme, group) => {
return ChatConfigurator.getDataSource().getCommonOptions(loggedInUser, messageObject, theme, group);
},
});
}
checkIfTemplateExist(template, type) {
return template.some((obj) => obj.type === type);
}
getAllMessageCategories() {
let categories = super.getAllMessageCategories();
if (!categories.some((category) => category === CometChatUIKitConstants.MessageCategory.custom)) {
categories.push(CometChatUIKitConstants.MessageCategory.custom);
}
return categories;
}
getAllMessageTypes() {
let types = super.getAllMessageTypes();
if (!types.some((category) => category === CometChatUIKitConstants.MessageCategory.custom)) {
types.push(StickersConstants.sticker);
}
return types;
}
getId() {
return "stickers";
}
getLastConversationMessage(conversation, loggedInUser, additionalConfigurations) {
const message = conversation.getLastMessage();
if (message != null &&
message.getType() == StickersConstants.sticker &&
message.getCategory() == CometChatUIKitConstants.MessageCategory.custom) {
return localize("CUSTOM_MESSAGE_STICKER");
}
else {
return super.getLastConversationMessage(conversation, loggedInUser, additionalConfigurations);
}
}
}
class StickersExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new StickersExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.stickers;
}
}
class TextModeratorExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getId() {
return "textmoderator";
}
getModeratedtext(message) {
let text = CometChatUIKitUtility.getExtensionData(message);
if (text?.trim()?.length > 0) {
return text;
}
else {
return message.getText();
}
}
getLastConversationMessage(conversation, loggedInUser, additionalConfigurations) {
const message = conversation.getLastMessage();
if (message &&
!message.getDeletedAt() &&
message.getType() === CometChatUIKitConstants.MessageTypes.text &&
message.getCategory() === CometChatUIKitConstants.MessageCategory.message) {
let subtitle = this.getModeratedtext(message);
let messageObj = conversation.getLastMessage();
let config = {
...additionalConfigurations,
textFormatters: additionalConfigurations?.textFormatters &&
additionalConfigurations?.textFormatters.length
? [...additionalConfigurations.textFormatters]
: [this.getMentionsTextFormatter({ theme: additionalConfigurations.theme, disableMentions: additionalConfigurations.disableMentions })],
};
let textFormatters = config.textFormatters;
if (config && !config.disableMentions) {
let mentionsTextFormatter;
for (let i = 0; i < textFormatters.length; i++) {
if (textFormatters[i] instanceof CometChatMentionsFormatter) {
mentionsTextFormatter = textFormatters[i];
mentionsTextFormatter.setMessage(messageObj);
if (messageObj.getMentionedUsers().length) {
mentionsTextFormatter.setCometChatUserGroupMembers(messageObj.getMentionedUsers());
}
mentionsTextFormatter.setLoggedInUser(CometChatUIKitLoginListener.getLoggedInUser());
if (mentionsTextFormatter) {
break;
}
}
}
if (!mentionsTextFormatter) {
mentionsTextFormatter =
ChatConfigurator.getDataSource().getMentionsTextFormatter({
messageObj,
...config,
alignment: null,
theme: additionalConfigurations.theme,
});
textFormatters.push(mentionsTextFormatter);
}
}
if (messageObj &&
messageObj instanceof CometChat.TextMessage) {
for (let i = 0; i < textFormatters.length; i++) {
subtitle = textFormatters[i].getFormattedText(subtitle, { mentionsTargetElement: MentionsTargetElement.conversation });
}
}
if (message &&
conversation?.getConversationType() != CometChat.RECEIVER_TYPE.USER) {
if (message?.getSender().getUid() ==
CometChatUIKitLoginListener?.getLoggedInUser()?.getUid()) {
subtitle = `${localize("YOU")}: ${subtitle}`;
}
else {
subtitle = `${message?.getSender().getName()}: ${subtitle}`;
}
}
return subtitle;
}
else {
return super.getLastConversationMessage(conversation, loggedInUser, additionalConfigurations);
}
}
}
class TextModeratorExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new TextModeratorExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.profanityFilter;
}
enable() {
const promise1 = CometChat.isExtensionEnabled(ExtensionsId.profanityFilter);
const promise2 = CometChat.isExtensionEnabled(ExtensionsId.dataMasking);
Promise.all([promise1, promise2]).then((values) => {
if (values.includes(true)) {
this.addExtension();
}
});
}
}
class ThumbnailGenerationExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getId() {
return "thumbnailgeneration";
}
}
class ThumbnailGenerationExtension extends ExtensionsDataSource$1 {
addExtension() {
ChatConfigurator.enable((dataSource) => new ThumbnailGenerationExtensionDecorator(dataSource));
}
getExtensionId() {
return ExtensionsId.thumbnailGeneration;
}
}
class AIExtensionDataSource {
}
class AIConversationSummaryDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
this.newDataSource = dataSource;
}
getId() {
return "aiconversationsummary";
}
getAIOptions(theme, id, aiOptionsStyles) {
if (!id?.parentMessageId) {
const messageComposerActions = super.getAIOptions(theme, id, aiOptionsStyles);
let newAction = new CometChatMessageComposerAction({
title: localize("GENERATE_SUMMARY"),
id: "ai-conversation-summary",
iconURL: "",
iconTint: "",
titleColor: aiOptionsStyles?.listItemTextColor || theme.palette.getAccent600(),
titleFont: aiOptionsStyles?.listItemTextFont ||
fontHelper(theme.typography.subtitle1),
background: aiOptionsStyles?.listItemBackground || theme.palette.getAccent100(),
});
messageComposerActions.push(newAction);
return messageComposerActions;
}
else {
return super.getAIOptions(theme, id, aiOptionsStyles);
}
}
}
class AIConversationSummaryExtension extends AIExtensionDataSource {
constructor() {
super();
}
addExtension() {
ChatConfigurator.enable((dataSource) => new AIConversationSummaryDecorator(dataSource));
}
getExtensionId() {
return "conversation-summary";
}
async enable() {
if (await CometChat.isAIFeatureEnabled(this.getExtensionId())) {
this.addExtension();
}
}
}
class AISmartRepliesExtensionDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getId() {
return "aismartreply";
}
getAIOptions(theme, id, aiOptionsStyles) {
if (!id?.parentMessageId) {
const messageComposerActions = super.getAIOptions(theme, id, aiOptionsStyles);
let newAction = new CometChatMessageComposerAction({
title: localize("SUGGEST_A_REPLY"),
id: "ai-smart-reply",
iconURL: "",
iconTint: "",
titleColor: aiOptionsStyles?.listItemTextColor || theme.palette.getAccent600(),
titleFont: aiOptionsStyles?.listItemTextFont ||
fontHelper(theme.typography.subtitle1),
background: aiOptionsStyles?.listItemBackground || theme.palette.getAccent100(),
});
messageComposerActions.push(newAction);
return messageComposerActions;
}
else {
return super.getAIOptions(theme, id, aiOptionsStyles);
}
}
}
class AISmartRepliesExtension extends AIExtensionDataSource {
constructor() {
super();
}
addExtension() {
ChatConfigurator.enable((dataSource) => new AISmartRepliesExtensionDecorator(dataSource));
}
getExtensionId() {
return "smart-replies";
}
async enable() {
if (await CometChat.isAIFeatureEnabled(this.getExtensionId())) {
this.addExtension();
}
}
}
class AIConversationStarterDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
}
getId() {
return "aiconversationstarter";
}
getAIOptions(theme, id, aiOptionsStyles) {
if (!id?.parentMessageId) {
const messageComposerActions = super.getAIOptions(theme, id, aiOptionsStyles);
let newAction = new CometChatMessageComposerAction({
title: localize("SUGGEST_A_REPLY"),
id: "ai-conversation-starter",
iconURL: "",
iconTint: "",
titleColor: aiOptionsStyles?.listItemTextColor || theme.palette.getAccent600(),
titleFont: aiOptionsStyles?.listItemTextFont ||
fontHelper(theme.typography.subtitle1),
background: aiOptionsStyles?.listItemBackground || theme.palette.getAccent100(),
});
messageComposerActions.push(newAction);
return messageComposerActions;
}
else {
return super.getAIOptions(theme, id, aiOptionsStyles);
}
}
}
class AIConversationStarterExtension extends AIExtensionDataSource {
constructor() {
super();
}
addExtension() {
ChatConfigurator.enable((dataSource) => new AIConversationStarterDecorator(dataSource));
}
getExtensionId() {
return "conversation-starter";
}
async enable() {
if (await CometChat.isAIFeatureEnabled(this.getExtensionId())) {
this.addExtension();
}
}
}
class AIAssistBotDecorator extends DataSourceDecorator {
constructor(dataSource) {
super(dataSource);
this.aiBotsList = [];
this.fetchAiBots();
}
getId() {
return "aiassistbot";
}
getAIOptions(theme, id, aiOptionsStyles) {
let title;
if (this.aiBotsList && this.aiBotsList.length == 1) {
title = `${localize("COMETCHAT_ASK_BOT")} ${this.aiBotsList[0]?.name}`;
}
else {
title = localize("COMETCHAT_ASK_AI_BOT");
}
if (!id?.parentMessageId && this.aiBotsList && this.aiBotsList.length > 0) {
const messageComposerActions = super.getAIOptions(theme, id, aiOptionsStyles);
let newAction = new CometChatMessageComposerAction({
title: title,
id: "ai-bots",
onClick: () => {
return this.aiBotsList;
},
iconURL: "",
iconTint: "",
titleColor: aiOptionsStyles?.listItemTextColor || theme.palette.getAccent600(),
titleFont: aiOptionsStyles?.listItemTextFont ||
fontHelper(theme.typography.subtitle1),
background: aiOptionsStyles?.listItemBackground || theme.palette.getAccent100(),
});
messageComposerActions.push(newAction);
return messageComposerActions;
}
else {
return super.getAIOptions(theme, id, aiOptionsStyles);
}
}
async fetchAiBots() {
try {
let tags = ["aibot"];
let botsRequest = new CometChat.UsersRequestBuilder()
.setLimit(30)
.setTags(tags)
.build();
const botList = await botsRequest.fetchNext();
botList.forEach((e) => {
let newAction = new CometChatMessageComposerAction({
id: e.uid,
title: e.name,
iconURL: e.avatar,
onClick: () => {
return e;
},
});
this.aiBotsList.push(newAction);
});
}
catch (error) {
console.error("An error occurred while fetching AI bots:", error);
}
}
}
class AIAssistBotExtension extends AIExtensionDataSource {
constructor() {
super();
}
addExtension() {
ChatConfigurator.enable((dataSource) => new AIAssistBotDecorator(dataSource));
}
getExtensionId() {
return "bots";
}
async enable() {
if (await CometChat.isAIFeatureEnabled(this.getExtensionId())) {
this.addExtension();
}
}
}
class CometChatUIKit {
static getDataSource() {
return ChatConfigurator.getDataSource();
}
static init(uiKitSettings) {
// perform sdk init taking values from uiKitSettings
CometChatUIKit.uiKitSettings = uiKitSettings;
if (window) {
window.CometChatUiKit = {
name: "@cometchat/chat-uikit-angular",
version: "4.3.25",
};
}
if (CometChatUIKitSharedSettings) {
CometChatUIKitSharedSettings.uikitSettings = CometChatUIKit?.uiKitSettings;
}
if (!CometChatUIKit.checkAuthSettings())
return undefined;
const appSettingsBuilder = new CometChat.AppSettingsBuilder();
if (uiKitSettings.getRoles()) {
appSettingsBuilder.subscribePresenceForRoles(uiKitSettings.getRoles());
}
else if (uiKitSettings.getSubscriptionType() === "ALL_USERS") {
appSettingsBuilder.subscribePresenceForAllUsers();
}
else if (uiKitSettings.getSubscriptionType() === "FRIENDS") {
appSettingsBuilder.subscribePresenceForFriends();
}
appSettingsBuilder.autoEstablishSocketConnection(uiKitSettings.isAutoEstablishSocketConnection());
appSettingsBuilder.setRegion(uiKitSettings.getRegion());
appSettingsBuilder.overrideAdminHost(uiKitSettings.getAdminHost());
appSettingsBuilder.overrideClientHost(uiKitSettings.getClientHost());
const appSettings = appSettingsBuilder.build();
return new Promise((resolve, reject) => {
CometChat.init(uiKitSettings?.appId, appSettings)
.then(() => {
CometChat.setSource("uikit-v4", "web", "angular");
CometChatUIKit.getLoggedinUser()
?.then((user) => {
if (user) {
CometChatUIKitLoginListener.setLoggedInUser(user);
ChatConfigurator.init();
this.initiateAfterLogin();
}
resolve(user);
})
.catch((error) => {
reject(error);
});
})
.catch((error) => {
return reject(error);
});
});
}
static getLoggedinUser() {
return new Promise((resolve, reject) => {
CometChat.getLoggedinUser()
.then((user) => {
return resolve(user);
})
.catch((error) => {
return reject(error);
})
.catch((error) => {
return reject(error);
});
});
}
static enableCalling() {
if (CometChatUIKitCalls) {
const callAppSetting = new CometChatUIKitCalls.CallAppSettingsBuilder()
.setAppId(CometChatUIKit.uiKitSettings?.appId)
.setRegion(CometChatUIKit.uiKitSettings?.region)
.build();
CometChatUIKitCalls.init(callAppSetting).then(() => {
console.log("CometChatCalls initialization success");
if (this.uiKitSettings?.getCallingExtension()) {
this.uiKitSettings?.getCallingExtension().enable();
}
else {
this.defaultCallingExtension.enable();
}
}, (error) => {
console.log("CometChatCalls initialization failed with error:", error);
});
}
}
static initiateAfterLogin() {
if (CometChatUIKit.uiKitSettings != null) {
CometChat.getConversationUpdateSettings().then((res) => {
CometChatUIKit.conversationUpdateSettings = res;
});
this.enableCalling();
let extensionList = this.uiKitSettings?.extensions || this.defaultExtensions;
let aiFeaturesList = Array.isArray(this.uiKitSettings?.aiFeatures)
? this.uiKitSettings?.aiFeatures
: this.defaultAIFeatures;
ChatSdkEventInitializer.attachListeners();
CometChatUIKitLoginListener.attachListener();
if (extensionList.length > 0) {
extensionList.forEach((extension) => {
extension?.enable();
});
}
if (aiFeaturesList.length > 0) {
aiFeaturesList.forEach((aiFeatures) => {
aiFeatures?.enable();
});
}
}
}
static async login(details) {
if (!CometChatUIKit.checkAuthSettings())
return undefined;
return new Promise((resolve, reject) => {
CometChatUIKit.getLoggedinUser()
?.then((user) => {
if (user) {
CometChatUIKitLoginListener.setLoggedInUser(user);
resolve(user);
CometChatUIKitLoginListener.setLoggedInUser(user);
ChatConfigurator.init();
this.initiateAfterLogin();
}
else {
let args = details.uid
? [details.uid, CometChatUIKit.uiKitSettings.authKey]
: [details.authToken];
CometChat.login(...args)
.then((user) => {
CometChatUIKitLoginListener.setLoggedInUser(user);
resolve(user);
CometChatUIKitLoginListener.setLoggedInUser(user);
ChatConfigurator.init();
this.initiateAfterLogin();
})
.catch((error) => {
reject(error);
});
}
})
.catch((error) => {
reject(error);
});
});
}
static async createUser(user) {
if (!CometChatUIKit.checkAuthSettings())
return undefined;
return new Promise((resolve, reject) => {
CometChat.createUser(user, CometChatUIKit.uiKitSettings.authKey)
.then((user) => {
resolve(user);
})
.catch((error) => {
reject(error);
});
});
}
static async updateUser(user) {
if (!CometChatUIKit.checkAuthSettings())
return undefined;
return new Promise((resolve, reject) => {
CometChat.updateUser(user, CometChatUIKit.uiKitSettings.authKey)
.then((user) => {
resolve(user);
})
.catch((error) => {
reject(error);
});
});
}
static async logout() {
if (!CometChatUIKit.checkAuthSettings())
return undefined;
return new Promise((resolve, reject) => {
CometChat.logout()
.then((message) => {
StorageUtils.removeItem(CometChatUIKitConstants.calls.activecall);
CometChatUIKitLoginListener.removeLoggedInUser();
resolve(message);
CometChatUIKitLoginListener.removeLoggedInUser();
})
.catch((error) => {
reject(error);
});
});
}
// Error handling to give better logs
static checkAuthSettings() {
if (CometChatUIKit.uiKitSettings == null) {
return false;
}
if (CometChatUIKit.uiKitSettings.appId == null) {
return false;
}
return true;
}
/**
* Sends a form message and emits events based on the message status.
* @param message - The form message to be sent.
* @param disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.
*/
static sendFormMessage(message, disableLocalEvents = false) {
message.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
if (!message?.getMuid()) {
message.setMuid(CometChatUIKitUtility.ID());
if (CometChatUIKitLoginListener.getLoggedInUser()) {
message.setSender(CometChatUIKitLoginListener.getLoggedInUser());
}
}
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.inprogress,
});
}
CometChat.sendInteractiveMessage(message)
.then((message) => {
let interactiveMessage = InteractiveMessageUtils.convertInteractiveMessage(message);
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: interactiveMessage,
status: MessageStatus.success,
});
}
})
.catch((error) => {
message.setMetadata({ error });
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.error,
});
}
});
}
static sendCardMessage(message, disableLocalEvents = false) {
message.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
if (!message?.getMuid()) {
message.setMuid(CometChatUIKitUtility.ID());
if (CometChatUIKitLoginListener.getLoggedInUser()) {
message.setSender(CometChatUIKitLoginListener.getLoggedInUser());
}
}
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.inprogress,
});
}
CometChat.sendInteractiveMessage(message)
.then((message) => {
let interactiveMessage = InteractiveMessageUtils.convertInteractiveMessage(message);
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: interactiveMessage,
status: MessageStatus.success,
});
}
})
.catch((error) => {
message.setMetadata({ error });
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.error,
});
}
});
}
static sendCustomInteractiveMessage(message, disableLocalEvents = false) {
message.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
if (!message?.getMuid()) {
message.setMuid(CometChatUIKitUtility.ID());
if (CometChatUIKitLoginListener.getLoggedInUser()) {
message.setSender(CometChatUIKitLoginListener.getLoggedInUser());
}
}
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.inprogress,
});
}
CometChat.sendInteractiveMessage(message)
.then((message) => {
let interactiveMessage = InteractiveMessageUtils.convertInteractiveMessage(message);
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: interactiveMessage,
status: MessageStatus.success,
});
}
})
.catch((error) => {
message.setMetadata({ error });
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.error,
});
}
});
}
// Helper methods to send messages
// [sendCustomMessage] used to send a custom message
static sendCustomMessage(message) {
return new Promise((resolve, reject) => {
message.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
if (!message?.getMuid()) {
message.setMuid(CometChatUIKitUtility.ID());
if (CometChatUIKitLoginListener.getLoggedInUser()) {
message.setSender(CometChatUIKitLoginListener.getLoggedInUser());
}
}
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.inprogress,
});
CometChat.sendCustomMessage(message)
.then((message) => {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.success,
});
resolve(message);
})
.catch((error) => {
message.setMetadata({ error: true });
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.error,
});
reject(error);
});
});
}
// Helper methods to send messages
// [sendTextMessage] used to send a custom message
static sendTextMessage(message) {
return new Promise((resolve, reject) => {
message.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
if (!message?.getMuid()) {
message.setMuid(CometChatUIKitUtility.ID());
if (CometChatUIKitLoginListener.getLoggedInUser()) {
message.setSender(CometChatUIKitLoginListener.getLoggedInUser());
}
}
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.inprogress,
});
CometChat.sendMessage(message)
.then((message) => {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.success,
});
resolve(message);
})
.catch((error) => {
message.setMetadata({ error: true });
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.error,
});
reject(error);
});
});
}
// Helper methods to send messages
// [sendMediaMessage] used to send a custom message
static sendMediaMessage(message) {
return new Promise((resolve, reject) => {
message.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
if (!message?.getMuid()) {
message.setMuid(CometChatUIKitUtility.ID());
if (CometChatUIKitLoginListener.getLoggedInUser()) {
message.setSender(CometChatUIKitLoginListener.getLoggedInUser());
}
}
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.inprogress,
});
CometChat.sendMediaMessage(message)
.then((message) => {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.success,
});
resolve(message);
})
.catch((error) => {
message.setMetadata({ error: true });
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.error,
});
reject(error);
});
});
}
/**
* Sends a scheduler message and emits events based on the message status.
* @param message - The scheduler message to be sent.
* @param disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.
*/
static sendSchedulerMessage(message, disableLocalEvents = false) {
message.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
if (!message?.getMuid()) {
message.setMuid(CometChatUIKitUtility.ID());
if (CometChatUIKitLoginListener.getLoggedInUser()) {
message.setSender(CometChatUIKitLoginListener.getLoggedInUser());
}
}
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.inprogress,
});
}
CometChat.sendInteractiveMessage(message)
.then((message) => {
let interactiveMessage = InteractiveMessageUtils.convertInteractiveMessage(message);
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: interactiveMessage,
status: MessageStatus.success,
});
}
})
.catch((error) => {
message.setMetadata({ error });
if (!disableLocalEvents) {
CometChatMessageEvents.ccMessageSent.next({
message: message,
status: MessageStatus.error,
});
}
});
}
}
CometChatUIKit.SoundManager = CometChatSoundManager;
CometChatUIKit.Localize = CometChatLocalize;
CometChatUIKit.defaultExtensions = [
new StickersExtension(),
new SmartReplyExtension(),
new CollaborativeWhiteBoardExtension(),
new CollaborativeDocumentExtension(),
new MessageTranslationExtension(),
new TextModeratorExtension(),
new ThumbnailGenerationExtension(),
new LinkPreviewExtension(),
new PollsExtension(),
new ImageModerationExtension(),
];
/**
* Default callingExtension included in the UI Kit.
* @type {CallingExtensionDataSource}
*/
CometChatUIKit.defaultCallingExtension = new CallingExtension();
CometChatUIKit.defaultAIFeatures = [
new AIConversationStarterExtension(),
new AISmartRepliesExtension(),
new AIConversationSummaryExtension(),
new AIAssistBotExtension(),
];
class DataSource {
}
///Protocol class every Extension enabler should extend,
class ExtensionsDataSource {
}
class CometChatThemeService {
constructor() {
this.theme = new CometChatTheme({});
}
}
CometChatThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
CometChatThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThemeService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThemeService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
/**
*
* CometChatOngoingCallComponent is a component whic shows outgoing call screen for default audio and video call.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatOngoingCallComponent {
constructor(themeService) {
this.themeService = themeService;
this.ongoingCallStyle = {
maxHeight: "100%",
maxWidth: "100%",
border: "none",
borderRadius: "0",
background: "#1c2226",
minHeight: "400px",
minWidth: "400px",
};
this.resizeIconHoverText = localize("RESIZE");
this.sessionID = "";
this.minimizeIconURL = "assets/reduce-size.svg";
this.maximizeIconURL = "assets/increase-size.svg";
this.callWorkflow = CallWorkflow.directCalling;
this.onError = (error) => {
console.log(error);
};
this.getCallBuilder = () => {
if (this.callSettingsBuilder) {
return this.callSettingsBuilder;
}
else {
const callSettings = new CometChatUIKitCalls.CallSettingsBuilder()
.enableDefaultLayout(true)
.setIsAudioOnlyCall(false)
.setCallListener(new CometChatUIKitCalls.OngoingCallListener({
onCallEnded: () => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
CometChatUIKitCalls.endSession();
if (this.callWorkflow == CallWorkflow.defaultCalling) {
CometChatUIKitCalls.endCall();
CometChat.clearActiveCall();
CometChatCallEvents.ccCallEnded.next({});
}
},
onCallEndButtonPressed: () => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
if (this.callWorkflow == CallWorkflow.defaultCalling) {
CometChat.endCall(this.sessionID).then((call) => {
CometChatUIKitCalls.endSession();
CometChatCallEvents.ccCallEnded.next(call);
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
else {
CometChatCallEvents.ccCallEnded.next({});
CometChatUIKitCalls.endSession();
}
},
onError: (error) => {
if (this.onError) {
this.onError(error);
}
},
}))
.build();
return callSettings;
}
};
this.startCall = () => {
if (this.loggedInUser) {
const authToken = this.loggedInUser.getAuthToken();
const sessionID = this.sessionID;
CometChatUIKitCalls.generateToken(sessionID, authToken).then((res) => {
CometChatUIKitCalls.startSession(res?.token, this.getCallBuilder(), this.callScreenFrame.nativeElement)
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}, (err) => {
if (this.onError) {
this.onError(err);
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
else {
CometChat.getLoggedinUser().then((user) => {
const authToken = user.getAuthToken();
const sessionID = this.sessionID;
CometChatUIKitCalls.generateToken(sessionID, authToken).then((res) => {
CometChatUIKitCalls.startSession(res?.token, this.getCallBuilder(), this.callScreenFrame.nativeElement);
}, (error) => {
if (this.onError) {
this.onError(error);
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
});
}
};
}
ngOnInit() {
this.setongoingCallStyle();
}
ngOnChanges(changes) {
if (changes["sessionID"] && changes["sessionID"].currentValue) {
this.startCall();
}
}
setongoingCallStyle() {
let defaultStyle = new CallscreenStyle({
maxHeight: "100%",
maxWidth: "100%",
border: "none",
borderRadius: "0",
background: "#1c2226",
minHeight: "400px",
minWidth: "400px",
minimizeIconTint: this.themeService.theme.palette.getAccent("dark"),
maximizeIconTint: this.themeService.theme.palette.getAccent("dark"),
});
this.ongoingCallStyle = { ...defaultStyle, ...this.ongoingCallStyle };
}
}
CometChatOngoingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOngoingCallComponent, deps: [{ token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatOngoingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: { ongoingCallStyle: "ongoingCallStyle", resizeIconHoverText: "resizeIconHoverText", sessionID: "sessionID", minimizeIconURL: "minimizeIconURL", maximizeIconURL: "maximizeIconURL", callSettingsBuilder: "callSettingsBuilder", callWorkflow: "callWorkflow", onError: "onError" }, viewQueries: [{ propertyName: "callScreenFrame", first: true, predicate: ["callscreenView"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cometchat-callscreen-wrapper *ngIf=\"sessionID\" [callscreenStyle]=\"ongoingCallStyle\" [resizeIconHoverText]=\"resizeIconHoverText\" [minimizeIconURL]=\"minimizeIconURL\" [maximizeIconURL]=\"maximizeIconURL\">\n <div #callscreenView class=\"cc-callscreen__view\"></div>\n</cometchat-callscreen-wrapper>\n", styles: [".cc-callscreen__view{height:100%;width:100%}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOngoingCallComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-ongoing-call", template: "<cometchat-callscreen-wrapper *ngIf=\"sessionID\" [callscreenStyle]=\"ongoingCallStyle\" [resizeIconHoverText]=\"resizeIconHoverText\" [minimizeIconURL]=\"minimizeIconURL\" [maximizeIconURL]=\"maximizeIconURL\">\n <div #callscreenView class=\"cc-callscreen__view\"></div>\n</cometchat-callscreen-wrapper>\n", styles: [".cc-callscreen__view{height:100%;width:100%}\n"] }]
}], ctorParameters: function () { return [{ type: CometChatThemeService }]; }, propDecorators: { callScreenFrame: [{
type: ViewChild,
args: ["callscreenView", { static: false }]
}], ongoingCallStyle: [{
type: Input
}], resizeIconHoverText: [{
type: Input
}], sessionID: [{
type: Input
}], minimizeIconURL: [{
type: Input
}], maximizeIconURL: [{
type: Input
}], callSettingsBuilder: [{
type: Input
}], callWorkflow: [{
type: Input
}], onError: [{
type: Input
}] } });
/**
*
* CometChatOutgoingCallComponent is a component whic shows outgoing call screen for default audio and video call.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatOutgoingCallComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.declineButtonText = localize("CANCEL");
this.declineButtonIconURL = "assets/close2x.svg";
this.onError = (error) => {
console.log(error);
};
this.disableSoundForCalls = false;
this.avatarStyle = {
borderRadius: "50%",
width: "180px",
height: "180px",
};
this.outgoingCallStyle = {};
this.buttonStyle = {
height: "fit-content",
width: "fit-content",
buttonTextFont: "400 12px Inter",
buttonTextColor: "RGBA(20, 20, 20, 0.58)",
borderRadius: "8px",
border: "none",
buttonIconTint: "white",
background: "",
iconBackground: "red",
padding: "12px"
};
this.subtitleText = localize("CALLING");
this.cardStyle = {
height: "100%",
width: "100%",
border: "inherite",
borderRadius: "inherite",
background: "transparent",
titleFont: "700 22px Inter",
titleColor: "black",
};
this.iconAlignment = IconButtonAlignment.top;
this.iconStyle = {
height: "16px",
width: "16px",
iconTint: "RGBA(20, 20, 20, 0.68)"
};
this.onClose = () => {
CometChatSoundManager.pause();
if (this.onCloseClicked) {
this.onCloseClicked();
}
};
this.wrapperStyle = () => {
return {
height: this.outgoingCallStyle.height,
width: this.outgoingCallStyle.width,
background: this.outgoingCallStyle.background,
border: this.outgoingCallStyle.border,
borderRadius: this.outgoingCallStyle.borderRadius
};
};
}
ngOnChanges(changes) {
if (changes["call"] && changes["call"].currentValue) {
if (!this.disableSoundForCalls) {
setTimeout(() => {
this.playAudio();
});
}
this.setThemeStyle();
}
}
ngOnInit() {
}
playAudio() {
if (this.customSoundForCalls) {
CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingCall, this.customSoundForCalls);
}
else {
CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingCall);
}
}
ngOnDestroy() {
CometChatSoundManager.pause();
}
getAvatarURL() {
return this.call?.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user ? this.call?.getReceiver()?.getAvatar() : this.call?.getReceiver()?.getIcon();
}
setThemeStyle() {
this.setAvatarStyle();
this.setOutgoingCallStyle();
this.cardStyle.titleColor = this.outgoingCallStyle.titleTextColor;
this.cardStyle.titleFont = this.outgoingCallStyle.titleTextFont;
}
setOutgoingCallStyle() {
let defaultStyle = new OutgoingCallStyle({
width: "360px",
height: "581px",
background: this.themeService.theme.palette.getBackground(),
border: "none",
borderRadius: "8px",
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
subtitleTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
subtitleTextColor: this.themeService.theme.palette.getAccent600(),
declineButtonTextFont: fontHelper(this.themeService.theme.typography.caption1),
declineButtonTextColor: this.themeService.theme.palette.getAccent600(),
declineButtonIconTint: this.themeService.theme.palette.getAccent("dark"),
declineButtonIconBackground: this.themeService.theme.palette.getError()
});
this.outgoingCallStyle = { ...defaultStyle, ...this.outgoingCallStyle };
this.buttonStyle = {
height: "fit-content",
width: "fit-content",
buttonTextFont: this.outgoingCallStyle.declineButtonTextFont,
buttonTextColor: this.outgoingCallStyle.declineButtonTextColor,
borderRadius: "8px",
border: "none",
buttonIconTint: this.outgoingCallStyle.declineButtonIconTint,
background: "",
iconBackground: this.outgoingCallStyle.declineButtonIconBackground,
padding: "12px",
display: "flex",
flexDirection: "column"
};
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "50%",
width: "180px",
height: "180px",
border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
subtitleStyle() {
return {
textFont: this.outgoingCallStyle.subtitleTextFont,
textColor: this.outgoingCallStyle.subtitleTextColor
};
}
}
CometChatOutgoingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOutgoingCallComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatOutgoingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatOutgoingCallComponent, selector: "cometchat-outgoing-call", inputs: { call: "call", declineButtonText: "declineButtonText", declineButtonIconURL: "declineButtonIconURL", customView: "customView", onError: "onError", disableSoundForCalls: "disableSoundForCalls", customSoundForCalls: "customSoundForCalls", avatarStyle: "avatarStyle", outgoingCallStyle: "outgoingCallStyle", onCloseClicked: "onCloseClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-outgoing-call__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-outgoing-call__custom-view\" *ngIf=\"customView; else elseBlock;\">\n <ng-container *ngTemplateOutlet=\"customView\">\n\n </ng-container>\n </div>\n<ng-template #elseBlock>\n <cometchat-card [title]=\"call.getReceiver().getName()\" [cardStyle]=\"cardStyle\" [avatarName]=\"call.getReceiver().getName()\" [avatarURL]=\"getAvatarURL()\" [avatarStyle]=\"avatarStyle\" >\n <cometchat-label slot=\"subtitleView\" [labelStyle]=\"subtitleStyle()\" [text]=\"subtitleText\"> </cometchat-label>\n <div slot=\"bottomView\">\n <cometchat-icon-button (cc-button-clicked)=\"onClose()\" [text]=\"declineButtonText\" [iconURL]=\"declineButtonIconURL\" [alignment]=\"iconAlignment\" [buttonStyle]=\"buttonStyle\">\n\n </cometchat-icon-button>\n </div>\n </cometchat-card>\n</ng-template>\n</div>\n", styles: [".cc-outgoing-call__wrapper{height:100%;width:100%}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOutgoingCallComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-outgoing-call", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-outgoing-call__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-outgoing-call__custom-view\" *ngIf=\"customView; else elseBlock;\">\n <ng-container *ngTemplateOutlet=\"customView\">\n\n </ng-container>\n </div>\n<ng-template #elseBlock>\n <cometchat-card [title]=\"call.getReceiver().getName()\" [cardStyle]=\"cardStyle\" [avatarName]=\"call.getReceiver().getName()\" [avatarURL]=\"getAvatarURL()\" [avatarStyle]=\"avatarStyle\" >\n <cometchat-label slot=\"subtitleView\" [labelStyle]=\"subtitleStyle()\" [text]=\"subtitleText\"> </cometchat-label>\n <div slot=\"bottomView\">\n <cometchat-icon-button (cc-button-clicked)=\"onClose()\" [text]=\"declineButtonText\" [iconURL]=\"declineButtonIconURL\" [alignment]=\"iconAlignment\" [buttonStyle]=\"buttonStyle\">\n\n </cometchat-icon-button>\n </div>\n </cometchat-card>\n</ng-template>\n</div>\n", styles: [".cc-outgoing-call__wrapper{height:100%;width:100%}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { call: [{
type: Input
}], declineButtonText: [{
type: Input
}], declineButtonIconURL: [{
type: Input
}], customView: [{
type: Input
}], onError: [{
type: Input
}], disableSoundForCalls: [{
type: Input
}], customSoundForCalls: [{
type: Input
}], avatarStyle: [{
type: Input
}], outgoingCallStyle: [{
type: Input
}], onCloseClicked: [{
type: Input
}] } });
/**
*
* CometChatCallButtonsComponent is a component which shows buttons for audio and video call for 1v1 and group call.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatCallButtonsComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.voiceCallIconURL = "assets/Audio-Call2x.svg";
this.voiceCallIconText = localize("VOICE_CALL");
this.voiceCallIconHoverText = localize("VOICE_CALL");
this.videoCallIconURL = "assets/Video-call2x.svg";
this.videoCallIconText = localize("VIDEO_CALL");
this.videoCallIconHoverText = localize("VIDEO_CALL");
this.onError = (error) => {
console.log(error);
};
this.callButtonsStyle = {
width: "100%",
height: "100%",
border: "none",
borderRadius: "0",
background: "transparent"
};
this.outgoingCallConfiguration = new OutgoingCallConfiguration({});
this.ongoingCallConfiguration = new CallScreenConfiguration({});
this.disableButtons = false;
this.showOngoingCall = false;
this.sessionId = "";
this.callbuttonsListenerId = "callbuttons_" + new Date().getTime();
this.loggedInUser = null;
this.buttonStyle = {
height: "100%",
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
};
this.voiceCallButtonStyle = {
buttonIconTint: "RGB(51, 153, 255)",
buttonTextFont: "400 12px Inter",
buttonTextColor: "RGB(51, 153, 255)",
padding: "8px 32px"
};
this.videoCallButtonStyle = {
buttonIconTint: "RGB(51, 153, 255)",
buttonTextFont: "400 12px Inter",
buttonTextColor: "RGB(51, 153, 255)",
padding: "8px 32px"
};
this.showOutgoingCallscreen = false;
this.outgoingCallStyle = {
width: "360px",
height: "581px",
titleTextFont: "700 22px Inter",
titleTextColor: "RGB(20, 20, 20)",
subtitleTextFont: "400 15px Inter",
subtitleTextColor: "RGBA(20, 20, 20, 0.58)",
borderRadius: "8px"
};
this.ongoingCallStyle = {};
this.activeCall = null;
this.cancelOutgoingCall = () => {
CometChatSoundManager.pause();
CometChat.rejectCall(this.call.getSessionId(), CometChatUIKitConstants.calls.cancelled)
.then((call) => {
this.disableButtons = false;
this.showOutgoingCallscreen = false;
CometChatCallEvents.ccCallRejected.next(call);
this.call = null;
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.showOutgoingCallscreen = false;
this.ref.detectChanges();
};
this.setOngoingCallStyle = () => {
let defaultStyle = new CallscreenStyle({
maxHeight: "100%",
maxWidth: "100%",
border: "none",
borderRadius: "0",
background: "#1c2226",
minHeight: "400px",
minWidth: "400px",
minimizeIconTint: this.themeService.theme.palette.getAccent900(),
maximizeIconTint: this.themeService.theme.palette.getAccent900(),
});
this.ongoingCallStyle = { ...defaultStyle, ...this.ongoingCallStyle };
};
this.wrapperStyle = () => {
return {
height: this.callButtonsStyle?.height,
width: this.callButtonsStyle?.width,
background: this.callButtonsStyle?.background,
border: this.callButtonsStyle?.border,
borderRadius: this.callButtonsStyle?.borderRadius
};
};
}
ngOnInit() {
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.setThemeStyle();
this.attachListeners();
this.subscribeToEvents();
}
ngOnDestroy() {
this.removeListener();
this.unsubscribeToEvents();
}
getCallBuilder() {
const audioOnlyCall = this.activeCall?.getType() === CometChatUIKitConstants.MessageTypes.audio;
const builder = this.ongoingCallConfiguration?.callSettingsBuilder ? this.ongoingCallConfiguration.callSettingsBuilder(audioOnlyCall, this.user, this.group)
: new CometChatUIKitCalls.CallSettingsBuilder().enableDefaultLayout(true).setIsAudioOnlyCall(audioOnlyCall);
builder.setCallListener(new CometChatUIKitCalls.OngoingCallListener({
onCallEnded: () => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
if (this.call?.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
CometChatUIKitCalls.endSession();
CometChat.clearActiveCall();
this.closeCallScreen();
}
},
onCallEndButtonPressed: () => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
if (this.call?.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
CometChat.endCall(this.sessionId).then((call) => {
CometChatUIKitCalls.endSession();
CometChatCallEvents.ccCallEnded.next(call);
this.closeCallScreen();
})
.catch((err) => {
if (this.onError) {
this.onError(err);
}
});
}
else {
this.closeCallScreen();
}
},
onError: (error) => {
if (this.onError) {
this.onError(error);
}
},
}));
return builder.build();
}
closeCallScreen() {
this.disableButtons = false;
this.activeCall = null;
this.showOngoingCall = false;
this.sessionId = "";
this.showOutgoingCallscreen = false;
this.call = null;
this.ref.detectChanges();
}
openOngoingCallScreen(call) {
this.showOutgoingCallscreen = false;
this.activeCall = call;
this.sessionId = call.getSessionId();
this.showOngoingCall = true;
this.ref.detectChanges();
}
initiateCall(type) {
const receiverType = this.user ? CometChatUIKitConstants.MessageReceiverType.user : CometChatUIKitConstants.MessageReceiverType.group;
const receiverId = this.user ? this.user.getUid() : this.group.getGuid();
const call = new CometChat.Call(receiverId, type, receiverType);
CometChat.initiateCall(call)
.then((outgoingCall) => {
this.call = outgoingCall;
this.showOutgoingCallscreen = true;
this.ref.detectChanges();
CometChatCallEvents.ccOutgoingCall.next(outgoingCall);
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
initiateAudioCall() {
if (this.user) {
this.initiateCall(CometChatUIKitConstants.MessageTypes.audio);
}
}
initiateVideoCall() {
if (this.user) {
this.initiateCall(CometChatUIKitConstants.MessageTypes.video);
}
else {
this.sessionId = this.group.getGuid();
this.sendCustomMessage();
this.showOngoingCall = true;
this.ref.detectChanges();
}
}
sendCustomMessage() {
const receiverType = this.user ? CometChatUIKitConstants.MessageReceiverType.user : CometChatUIKitConstants.MessageReceiverType.group;
const receiverId = this.user ? this.user.getUid() : this.group.getGuid();
const customData = { "sessionID": this.sessionId, "sessionId": this.sessionId, "callType": CometChatUIKitConstants.MessageTypes.video };
const customType = CometChatUIKitConstants.calls.meeting;
const conversationId = `group_${this.sessionId}`;
const customMessage = new CometChat.CustomMessage(receiverId, receiverType, customType, customData);
customMessage.setSender(this.loggedInUser);
customMessage.shouldUpdateConversation(true);
customMessage.setMetadata({ incrementUnreadCount: true });
customMessage.setReceiver(receiverType);
customMessage.setConversationId(conversationId);
customMessage.sentAt = CometChatUIKitUtility.getUnixTimestamp();
customMessage.muid = CometChatUIKitUtility.ID();
// custom message
CometChatMessageEvents.ccMessageSent.next({
message: customMessage,
status: MessageStatus.inprogress
});
CometChat.sendCustomMessage(customMessage).then((msg) => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, msg);
CometChatMessageEvents.ccMessageSent.next({
message: msg,
status: MessageStatus.success
});
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
getVoiceCallButtonStyle(disableButtons) {
const buttonIconTint = disableButtons
? this.themeService.theme.palette.getAccent600()
: this.callButtonsStyle?.voiceCallIconTint;
return {
...this.videoCallButtonStyle,
buttonIconTint,
};
}
getVideoCallButtonStyle(disableButtons) {
const buttonIconTint = disableButtons
? this.themeService.theme.palette.getAccent600()
: this.callButtonsStyle?.videoCallIconTint;
return {
...this.videoCallButtonStyle,
buttonIconTint,
};
}
attachListeners() {
CometChat.addCallListener(this.callbuttonsListenerId, new CometChat.CallListener({
onIncomingCallReceived: (call) => {
this.call = call;
this.disableButtons = true;
this.ref.detectChanges();
},
onIncomingCallCancelled: (call) => {
this.disableButtons = false;
this.ref.detectChanges();
},
onOutgoingCallRejected: (call) => {
if (this.call && this.call.getSessionId() == call.getSessionId()) {
this.disableButtons = false;
this.call = null;
this.showOutgoingCallscreen = false;
this.ref.detectChanges();
}
},
onOutgoingCallAccepted: (call) => {
if (this.call && this.call.getSessionId() == call.getSessionId() && this.showOutgoingCallscreen) {
this.call = call;
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, call);
this.openOngoingCallScreen(call);
}
},
onCallEndedMessageReceived: (call) => {
this.disableButtons = false;
this.call = null;
this.ref.detectChanges();
}
}));
}
removeListener() {
CometChat.removeCallListener(this.callbuttonsListenerId);
}
subscribeToEvents() {
this.ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe((call) => {
this.disableButtons = false;
this.ref.detectChanges();
});
this.ccOutgoingCall = CometChatCallEvents.ccOutgoingCall.subscribe((call) => {
this.disableButtons = true;
this.ref.detectChanges();
});
this.ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe((call) => {
this.closeCallScreen();
});
}
unsubscribeToEvents() {
this.ccCallRejected?.unsubscribe();
this.ccOutgoingCall?.unsubscribe();
this.ccCallEnded?.unsubscribe();
}
setThemeStyle() {
this.setcallButtonsStyle();
this.setOngoingCallStyle();
}
setcallButtonsStyle() {
let defaultStyle = new CallButtonsStyle({
width: "100%",
height: "100%",
background: "transparent",
border: "none",
borderRadius: "0",
voiceCallIconTint: this.themeService.theme.palette.getPrimary(),
videoCallIconTint: this.themeService.theme.palette.getPrimary(),
voiceCallIconTextFont: fontHelper(this.themeService.theme.typography.caption1),
videoCallIconTextFont: fontHelper(this.themeService.theme.typography.caption1),
voiceCallIconTextColor: this.themeService.theme.palette.getPrimary(),
videoCallIconTextColor: this.themeService.theme.palette.getPrimary(),
buttonPadding: "8px 32px",
buttonBackground: this.themeService.theme.palette.getAccent100(),
buttonBorder: "0",
buttonBorderRadius: "8px"
});
this.callButtonsStyle = { ...defaultStyle, ...this.callButtonsStyle };
this.voiceCallButtonStyle = {
buttonIconTint: this.disableButtons ? this.themeService.theme.palette.getAccent600() : this.callButtonsStyle.voiceCallIconTint,
buttonTextFont: this.callButtonsStyle.voiceCallIconTextFont,
buttonTextColor: this.callButtonsStyle.voiceCallIconTextColor,
padding: this.callButtonsStyle.buttonPadding,
background: this.callButtonsStyle.buttonBackground,
border: this.callButtonsStyle.border,
borderRadius: this.callButtonsStyle.buttonBorderRadius,
...this.buttonStyle
};
this.videoCallButtonStyle = {
buttonIconTint: this.disableButtons ? this.themeService.theme.palette.getAccent600() : this.callButtonsStyle.videoCallIconTint,
buttonTextFont: this.callButtonsStyle.videoCallIconTextFont,
buttonTextColor: this.callButtonsStyle.videoCallIconTextColor,
padding: this.callButtonsStyle.buttonPadding,
background: this.callButtonsStyle.buttonBackground,
border: this.callButtonsStyle.border,
borderRadius: this.callButtonsStyle.buttonBorderRadius,
...this.buttonStyle
};
}
}
CometChatCallButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallButtonsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatCallButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: { user: "user", group: "group", voiceCallIconURL: "voiceCallIconURL", voiceCallIconText: "voiceCallIconText", voiceCallIconHoverText: "voiceCallIconHoverText", videoCallIconURL: "videoCallIconURL", videoCallIconText: "videoCallIconText", videoCallIconHoverText: "videoCallIconHoverText", onVoiceCallClick: "onVoiceCallClick", onVideoCallClick: "onVideoCallClick", onError: "onError", callButtonsStyle: "callButtonsStyle", outgoingCallConfiguration: "outgoingCallConfiguration", ongoingCallConfiguration: "ongoingCallConfiguration" }, ngImport: i0, template: "<div class=\"cc-call-buttons__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-call-buttons-buttons\">\n <cometchat-button [disabled]=\"disableButtons ? true : false\" *ngIf=\"user\" (cc-button-clicked)=\"initiateAudioCall()\"\n [buttonStyle]=\"getVoiceCallButtonStyle(disableButtons)\" [text]=\"voiceCallIconText\"\n [hoverText]=\"voiceCallIconHoverText\" [iconURL]=\"voiceCallIconURL\"></cometchat-button>\n <cometchat-button [disabled]=\"disableButtons ? true : false\" *ngIf=\"user || group\"\n (cc-button-clicked)=\"initiateVideoCall()\" [buttonStyle]=\"getVideoCallButtonStyle(disableButtons)\"\n [text]=\"videoCallIconText\" [hoverText]=\"videoCallIconHoverText\" [iconURL]=\"videoCallIconURL\"></cometchat-button>\n </div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\"\n [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\"\n [ongoingCallStyle]=\"ongoingCallConfiguration.ongoingCallStyle || ongoingCallStyle\" [sessionID]=\"sessionId\"\n [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n<cometchat-backdrop *ngIf=\"showOutgoingCallscreen\">\n <cometchat-outgoing-call [customSoundForCalls]=\"outgoingCallConfiguration.customSoundForCalls\"\n [onError]=\"outgoingCallConfiguration.onError\"\n [disableSoundForCalls]=\"outgoingCallConfiguration.disableSoundForCalls\"\n [avatarStyle]=\"outgoingCallConfiguration.avatarStyle\" [customView]=\"outgoingCallConfiguration.customView\"\n [declineButtonIconURL]=\"outgoingCallConfiguration.declineButtonIconURL\"\n [onCloseClicked]=\"outgoingCallConfiguration.onCloseClicked || cancelOutgoingCall\"\n [outgoingCallStyle]=\"outgoingCallConfiguration.outgoingCallStyle || outgoingCallStyle\"\n [call]=\"call!\"></cometchat-outgoing-call>\n</cometchat-backdrop>", styles: [".cc-call-buttons__wrapper{height:100%;width:100%}.cc-call-buttons-buttons{display:flex;gap:8px}\n"], components: [{ type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatOutgoingCallComponent, selector: "cometchat-outgoing-call", inputs: ["call", "declineButtonText", "declineButtonIconURL", "customView", "onError", "disableSoundForCalls", "customSoundForCalls", "avatarStyle", "outgoingCallStyle", "onCloseClicked"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallButtonsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-call-buttons", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-buttons__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-call-buttons-buttons\">\n <cometchat-button [disabled]=\"disableButtons ? true : false\" *ngIf=\"user\" (cc-button-clicked)=\"initiateAudioCall()\"\n [buttonStyle]=\"getVoiceCallButtonStyle(disableButtons)\" [text]=\"voiceCallIconText\"\n [hoverText]=\"voiceCallIconHoverText\" [iconURL]=\"voiceCallIconURL\"></cometchat-button>\n <cometchat-button [disabled]=\"disableButtons ? true : false\" *ngIf=\"user || group\"\n (cc-button-clicked)=\"initiateVideoCall()\" [buttonStyle]=\"getVideoCallButtonStyle(disableButtons)\"\n [text]=\"videoCallIconText\" [hoverText]=\"videoCallIconHoverText\" [iconURL]=\"videoCallIconURL\"></cometchat-button>\n </div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\"\n [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\"\n [ongoingCallStyle]=\"ongoingCallConfiguration.ongoingCallStyle || ongoingCallStyle\" [sessionID]=\"sessionId\"\n [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n<cometchat-backdrop *ngIf=\"showOutgoingCallscreen\">\n <cometchat-outgoing-call [customSoundForCalls]=\"outgoingCallConfiguration.customSoundForCalls\"\n [onError]=\"outgoingCallConfiguration.onError\"\n [disableSoundForCalls]=\"outgoingCallConfiguration.disableSoundForCalls\"\n [avatarStyle]=\"outgoingCallConfiguration.avatarStyle\" [customView]=\"outgoingCallConfiguration.customView\"\n [declineButtonIconURL]=\"outgoingCallConfiguration.declineButtonIconURL\"\n [onCloseClicked]=\"outgoingCallConfiguration.onCloseClicked || cancelOutgoingCall\"\n [outgoingCallStyle]=\"outgoingCallConfiguration.outgoingCallStyle || outgoingCallStyle\"\n [call]=\"call!\"></cometchat-outgoing-call>\n</cometchat-backdrop>", styles: [".cc-call-buttons__wrapper{height:100%;width:100%}.cc-call-buttons-buttons{display:flex;gap:8px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { user: [{
type: Input
}], group: [{
type: Input
}], voiceCallIconURL: [{
type: Input
}], voiceCallIconText: [{
type: Input
}], voiceCallIconHoverText: [{
type: Input
}], videoCallIconURL: [{
type: Input
}], videoCallIconText: [{
type: Input
}], videoCallIconHoverText: [{
type: Input
}], onVoiceCallClick: [{
type: Input
}], onVideoCallClick: [{
type: Input
}], onError: [{
type: Input
}], callButtonsStyle: [{
type: Input
}], outgoingCallConfiguration: [{
type: Input
}], ongoingCallConfiguration: [{
type: Input
}] } });
class CometchatListComponent {
constructor() {
this.list = [];
this.searchText = localize("SEARCH");
this.searchIconURL = "assets/search.svg";
this.listStyle = {
height: "100%",
width: "100%",
};
this.searchPlaceholderText = "";
this.hideSearch = false;
this.hideError = false;
this.title = "";
this.titleAlignment = TitleAlignment.left;
this.state = States.loaded;
this.errorStateText = "";
this.emptyStateText = "";
this.loadingIconURL = "assets/Spinner.svg";
this.showSectionHeader = false;
this.sectionHeaderField = "name";
this.DateSeparatorPattern = DatePatterns.DayDate;
this.dateSeparatorStyle = {
height: "",
width: "",
};
this.states = States;
this.numberOfTopScroll = 0;
this.searchStyle = {};
this.iconStyle = {};
/**
* listening to bottom scroll using intersection observer
*/
this.ioBottom = () => {
const options = {
root: this.listScroll?.nativeElement,
rootMargin: "-100% 0px 100px 0px",
threshold: 0,
};
const callback = (entries) => {
if (entries[0].isIntersecting &&
this.onScrolledToBottom &&
this.list?.length > 0) {
this.onScrolledToBottom();
}
};
var observer = new IntersectionObserver(callback, options);
observer.observe(this.bottom?.nativeElement);
};
/**
* listening to top scroll using intersection observer
*/
this.ioTop = () => {
const options = {
root: this.listScroll?.nativeElement,
rootMargin: "200px 0px 0px 0px",
threshold: 1.0,
};
const callback = (entries) => {
if (entries[0].isIntersecting) {
this.numberOfTopScroll++;
if (this.onScrolledToTop && this.numberOfTopScroll > 1) {
this.onScrolledToTop();
}
}
};
var observer = new IntersectionObserver(callback, options);
// observer.observe(this.top.nativeElement);
};
this.searchEvent = (event) => {
this.searchText = event?.detail?.searchText;
if (this.onSearch) {
this.onSearch(this.searchText);
}
};
/**
* styling part
*/
this.chatsListStyle = () => {
return {
height: this.listStyle.height,
background: this.listStyle.background,
};
};
this.messageContainerStyle = () => {
return {
width: this.listStyle.width,
};
};
this.errorStyle = () => {
return {
textFont: this.listStyle.errorStateTextFont,
textColor: this.listStyle.errorStateTextColor,
};
};
this.emptyStyle = () => {
return {
textFont: this.listStyle.emptyStateTextFont,
textColor: this.listStyle.emptyStateTextColor,
};
};
this.wrapperStyle = () => {
return {
height: this.listStyle.height,
width: this.listStyle.width,
background: this.listStyle.background,
border: this.listStyle.border,
borderRadius: this.listStyle.borderRadius,
};
};
this.headerTitle = () => {
let postiton = this.titleAlignment == TitleAlignment.left
? { textAlign: "left" }
: { textAlign: "center" };
return {
font: this.listStyle.titleTextFont,
color: this.listStyle.titleTextColor,
...postiton,
};
};
this.sectionHeaderStyle = () => {
return {
font: this.listStyle?.sectionHeaderTextFont,
color: this.listStyle?.sectionHeaderTextColor,
};
};
this.headerStyle = () => {
return {
height: "fit-content",
marginBottom: "12px",
};
};
this.listStyles = () => {
return {
height: "100%",
};
};
}
ngOnInit() {
this.iconStyle = this.listStyle.loadingIconTint;
(this.searchStyle.searchTextFont = this.listStyle?.searchTextFont),
(this.searchStyle.searchTextColor = this.listStyle?.searchTextColor),
(this.searchStyle.placeholderTextFont =
this.listStyle?.searchPlaceholderTextFont),
(this.searchStyle.placeholderTextColor =
this.listStyle?.searchPlaceholderTextColor),
(this.searchStyle.searchIconTint = this.listStyle?.searchIconTint);
(this.searchStyle.background = this.listStyle?.searchBackground),
(this.searchStyle.borderRadius = this.listStyle.searchBorderRadius);
this.searchStyle.border = this.listStyle.searchBorder;
}
ngAfterViewInit() {
this.ioBottom();
}
ngOnChanges(changes) { }
}
CometchatListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometchatListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CometchatListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometchatListComponent, selector: "cometchat-list", inputs: { listItemView: "listItemView", onScrolledToBottom: "onScrolledToBottom", onScrolledToTop: "onScrolledToTop", list: "list", onSearch: "onSearch", getSectionHeader: "getSectionHeader", searchText: "searchText", searchIconURL: "searchIconURL", listStyle: "listStyle", searchPlaceholderText: "searchPlaceholderText", hideSearch: "hideSearch", hideError: "hideError", title: "title", titleAlignment: "titleAlignment", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", state: "state", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", DateSeparatorPattern: "DateSeparatorPattern", dateSeparatorStyle: "dateSeparatorStyle" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-list__wrapper\">\n <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}\n </div>\n <div class=\"cc-list__search-input\">\n <cometchat-search-input [searchInputStyle]=\"searchStyle\"\n [placeholderText]=\"searchPlaceholderText\" *ngIf=\"!hideSearch\"\n [searchIconURL]=\"searchIconURL\"\n (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n </div>\n </div>\n <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n <div class=\"list__top\" #top>\n </div>\n <div class=\"decorator__message\"\n *ngIf=\"state == states.loading || state == states.error || state == states.empty \"\n [ngStyle]=\"messageContainerStyle()\">\n <div class=\"loading__view\" *ngIf=\"state == states.loading\">\n <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\"\n *ngIf=\"!loadingStateView\">\n </cometchat-loader>\n <span class=\"custom__view--loading\" *ngIf=\"loadingStateView\">\n <ng-container *ngTemplateOutlet=\"loadingStateView\">\n </ng-container>\n </span>\n </div>\n <div class=\"error__view\" *ngIf=\"state == states.error && !hideError\">\n <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"!errorStateView\"\n [text]=\"errorStateText\">\n </cometchat-label>\n <span class=\"custom__view--error\" *ngIf=\"errorStateView\">\n <ng-container *ngTemplateOutlet=\"errorStateView\">\n </ng-container>\n </span>\n </div>\n <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n <cometchat-label [labelStyle]=\"emptyStyle()\"\n *ngIf=\"state == states.empty && !emptyStateView\"\n [text]=\"emptyStateText\">\n </cometchat-label>\n <span class=\"custom__view--empty\" *ngIf=\"emptyStateView\">\n <ng-container *ngTemplateOutlet=\"emptyStateView\">\n </ng-container>\n </span>\n </div>\n </div>\n <div class=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n <div *ngIf=\"!getSectionHeader\">\n <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n <div *ngIf=\"\n list[i - 1][sectionHeaderField][0].toUpperCase() !==\n list[i][sectionHeaderField][0].toUpperCase()\n \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n {{ list[i][sectionHeaderField][0].toUpperCase() }}\n </div>\n </div>\n <ng-template #elseBlock>\n <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n {{\n list[i][sectionHeaderField][0].toUpperCase()\n }}\n </div>\n </ng-template>\n </div>\n <div *ngIf=\"getSectionHeader && getSectionHeader(item,i)\"\n [ngStyle]=\"sectionHeaderStyle()\">\n <cometchat-date [timestamp]=\"getSectionHeader(item,i)\"\n [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n </cometchat-date>\n </div>\n\n </div>\n <ng-container\n *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n </ng-container>\n </div>\n <div class=\"list__bottom\" #bottom>\n </div>\n </div>\n</div>\n", styles: [".cc-list{display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.listitem__view{display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.decorator__message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center;width:100%;text-overflow:ellipsis;text-wrap:balance}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometchatListComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-list", template: "<div class=\"cc-list__wrapper\">\n <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}\n </div>\n <div class=\"cc-list__search-input\">\n <cometchat-search-input [searchInputStyle]=\"searchStyle\"\n [placeholderText]=\"searchPlaceholderText\" *ngIf=\"!hideSearch\"\n [searchIconURL]=\"searchIconURL\"\n (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n </div>\n </div>\n <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n <div class=\"list__top\" #top>\n </div>\n <div class=\"decorator__message\"\n *ngIf=\"state == states.loading || state == states.error || state == states.empty \"\n [ngStyle]=\"messageContainerStyle()\">\n <div class=\"loading__view\" *ngIf=\"state == states.loading\">\n <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\"\n *ngIf=\"!loadingStateView\">\n </cometchat-loader>\n <span class=\"custom__view--loading\" *ngIf=\"loadingStateView\">\n <ng-container *ngTemplateOutlet=\"loadingStateView\">\n </ng-container>\n </span>\n </div>\n <div class=\"error__view\" *ngIf=\"state == states.error && !hideError\">\n <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"!errorStateView\"\n [text]=\"errorStateText\">\n </cometchat-label>\n <span class=\"custom__view--error\" *ngIf=\"errorStateView\">\n <ng-container *ngTemplateOutlet=\"errorStateView\">\n </ng-container>\n </span>\n </div>\n <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n <cometchat-label [labelStyle]=\"emptyStyle()\"\n *ngIf=\"state == states.empty && !emptyStateView\"\n [text]=\"emptyStateText\">\n </cometchat-label>\n <span class=\"custom__view--empty\" *ngIf=\"emptyStateView\">\n <ng-container *ngTemplateOutlet=\"emptyStateView\">\n </ng-container>\n </span>\n </div>\n </div>\n <div class=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n <div *ngIf=\"!getSectionHeader\">\n <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n <div *ngIf=\"\n list[i - 1][sectionHeaderField][0].toUpperCase() !==\n list[i][sectionHeaderField][0].toUpperCase()\n \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n {{ list[i][sectionHeaderField][0].toUpperCase() }}\n </div>\n </div>\n <ng-template #elseBlock>\n <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n {{\n list[i][sectionHeaderField][0].toUpperCase()\n }}\n </div>\n </ng-template>\n </div>\n <div *ngIf=\"getSectionHeader && getSectionHeader(item,i)\"\n [ngStyle]=\"sectionHeaderStyle()\">\n <cometchat-date [timestamp]=\"getSectionHeader(item,i)\"\n [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n </cometchat-date>\n </div>\n\n </div>\n <ng-container\n *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n </ng-container>\n </div>\n <div class=\"list__bottom\" #bottom>\n </div>\n </div>\n</div>\n", styles: [".cc-list{display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.listitem__view{display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.decorator__message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center;width:100%;text-overflow:ellipsis;text-wrap:balance}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { listScroll: [{
type: ViewChild,
args: ["listScroll", { static: false }]
}], bottom: [{
type: ViewChild,
args: ["bottom", { static: false }]
}], top: [{
type: ViewChild,
args: ["top", { static: false }]
}], listItemView: [{
type: Input
}], onScrolledToBottom: [{
type: Input
}], onScrolledToTop: [{
type: Input
}], list: [{
type: Input
}], onSearch: [{
type: Input
}], getSectionHeader: [{
type: Input
}], searchText: [{
type: Input
}], searchIconURL: [{
type: Input
}], listStyle: [{
type: Input
}], searchPlaceholderText: [{
type: Input
}], hideSearch: [{
type: Input
}], hideError: [{
type: Input
}], title: [{
type: Input
}], titleAlignment: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateView: [{
type: Input
}], state: [{
type: Input
}], errorStateText: [{
type: Input
}], emptyStateText: [{
type: Input
}], loadingIconURL: [{
type: Input
}], showSectionHeader: [{
type: Input
}], sectionHeaderField: [{
type: Input
}], DateSeparatorPattern: [{
type: Input
}], dateSeparatorStyle: [{
type: Input
}] } });
class CometChatList {
}
CometChatList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatList, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatList.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatList, declarations: [CometchatListComponent], imports: [CommonModule,
FormsModule], exports: [CometchatListComponent] });
CometChatList.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatList, imports: [[
CommonModule,
FormsModule,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatList, decorators: [{
type: NgModule,
args: [{
declarations: [CometchatListComponent],
imports: [
CommonModule,
FormsModule,
],
exports: [CometchatListComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class CometChatOutgoingCall {
}
CometChatOutgoingCall.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOutgoingCall, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatOutgoingCall.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOutgoingCall, declarations: [CometChatOutgoingCallComponent], imports: [CommonModule,
CometChatList], exports: [CometChatOutgoingCallComponent] });
CometChatOutgoingCall.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOutgoingCall, imports: [[
CommonModule,
CometChatList,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOutgoingCall, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatOutgoingCallComponent],
imports: [
CommonModule,
CometChatList,
],
exports: [CometChatOutgoingCallComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatOngoingCall {
}
CometChatOngoingCall.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOngoingCall, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatOngoingCall.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOngoingCall, declarations: [CometChatOngoingCallComponent], imports: [CommonModule,
CometChatList], exports: [CometChatOngoingCallComponent] });
CometChatOngoingCall.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOngoingCall, imports: [[
CommonModule,
CometChatList,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOngoingCall, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatOngoingCallComponent],
imports: [
CommonModule,
CometChatList,
],
exports: [CometChatOngoingCallComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatCallButtons {
}
CometChatCallButtons.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallButtons, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatCallButtons.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallButtons, declarations: [CometChatCallButtonsComponent], imports: [CommonModule,
CometChatOutgoingCall,
CometChatOngoingCall], exports: [CometChatCallButtonsComponent] });
CometChatCallButtons.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallButtons, imports: [[
CommonModule,
CometChatOutgoingCall,
CometChatOngoingCall
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallButtons, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatCallButtonsComponent],
imports: [
CommonModule,
CometChatOutgoingCall,
CometChatOngoingCall
],
exports: [CometChatCallButtonsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
/**
*
* CometChatIncomingCallComponent is a component which shows outgoing call screen for default audio and video call.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatIncomingCallComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.disableSoundForCalls = false;
this.acceptButtonText = localize("ACCEPT");
this.declineButtonText = localize("DECLINE");
this.ongoingCallConfiguration = new CallScreenConfiguration({});
this.onError = (error) => {
console.log(error);
};
this.listItemStyle = {
height: "100%",
width: "100%",
background: "",
activeBackground: "",
border: "",
};
this.avatarStyle = {
borderRadius: "16px",
width: "38px",
height: "38px",
};
this.incomingCallStyle = {
width: "fit-content",
height: "fit-content",
};
this.incomingcallListenerId = "incomingcall_" + new Date().getTime();
this.subtitleText = localize("INCOMING_CALL");
this.buttonStyle = {
height: "100%",
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
padding: "8px 28px"
};
this.ongoingCallStyle = {};
this.showOngoingCall = false;
this.showIncomingCallScreen = false;
this.sessionId = "";
this.acceptButtonStyle = {};
this.declineButtonStyle = {};
this.loggedInUser = null;
this.iconStyle = {
height: "16px",
width: "16px",
iconTint: "RGBA(20, 20, 20, 0.68)"
};
this.activeCall = null;
this.localStorageChange = (event) => {
if (event?.key !== CometChatUIKitConstants.calls.activecall) {
return false;
}
if (event.newValue || event.oldValue) {
let call;
if (event.newValue) {
call = JSON.parse(event.newValue);
}
else if (event.oldValue) {
call = JSON.parse(event.oldValue);
}
if (this.call?.getSessionId() === call?.sessionId) {
this.showIncomingCallScreen = false;
CometChatSoundManager.pause();
this.call = null;
this.ref.detectChanges();
}
}
return;
};
this.setOngoingCallStyle = () => {
let defaultStyle = new CallscreenStyle({
maxHeight: "100%",
maxWidth: "100%",
border: "none",
borderRadius: "0",
background: "#1c2226",
minHeight: "400px",
minWidth: "400px",
minimizeIconTint: this.themeService.theme.palette.getAccent900(),
maximizeIconTint: this.themeService.theme.palette.getAccent900(),
});
this.ongoingCallStyle = { ...defaultStyle, ...this.ongoingCallStyle };
};
this.checkForActiveCallAndEndCall = () => {
let call = CometChat.getActiveCall();
return new Promise((resolve, reject) => {
if (!call) {
return resolve({ success: true });
}
let sessionID = call?.getSessionId();
CometChat.endCall(sessionID)
.then((response) => {
return resolve(response);
})
.catch((error) => {
return reject(error);
});
});
};
this.subtitleStyle = () => {
return {
textFont: this.incomingCallStyle.subtitleTextFont,
textColor: this.incomingCallStyle.subtitleTextColor
};
};
this.wrapperStyle = () => {
return {
height: this.incomingCallStyle.height,
width: this.incomingCallStyle.width,
background: this.incomingCallStyle.background,
border: this.incomingCallStyle.border,
borderRadius: this.incomingCallStyle.borderRadius,
padding: "8px"
};
};
}
ngOnChanges(changes) {
if (changes["call"] && changes["call"]?.currentValue) {
this.showCall(this.call);
}
}
playAudio() {
if (this.customSoundForCalls) {
CometChatSoundManager.play(CometChatSoundManager.Sound.incomingCall, this.customSoundForCalls);
}
else {
CometChatSoundManager.play(CometChatSoundManager.Sound.incomingCall);
}
}
isCallActive(call) {
let isCurrentCall = false;
if (StorageUtils.getItem(CometChatUIKitConstants.calls.activecall)) {
let oldCall = StorageUtils.getItem(CometChatUIKitConstants.calls.activecall);
if (oldCall && oldCall.sessionId == call.getSessionId()) {
isCurrentCall = true;
}
else {
isCurrentCall = false;
}
}
else {
isCurrentCall = false;
}
return isCurrentCall;
}
showCall(call) {
if (!this.isCallActive(call) && this.loggedInUser?.getUid() != call?.getSender()?.getUid() && !this.call) {
if (!this.disableSoundForCalls) {
setTimeout(() => {
this.playAudio();
}, 100);
}
this.call = call;
this.showIncomingCallScreen = true;
this.ref.detectChanges();
}
else {
if (this.loggedInUser?.getUid() == call?.getSender()?.getUid()) {
CometChatSoundManager.pause();
return;
}
CometChatSoundManager.pause();
this.rejectIncomingCall(CometChatUIKitConstants.calls.busy, call);
}
}
attachListeners() {
CometChat.addCallListener(this.incomingcallListenerId, new CometChat.CallListener({
onIncomingCallReceived: (call) => {
if (!CometChat.getActiveCall() && !StorageUtils.getItem(CometChatUIKitConstants.calls.activecall)) {
this.showCall(call);
this.ref.detectChanges();
}
else {
CometChatSoundManager.pause();
this.rejectIncomingCall(CometChatUIKitConstants.calls.busy, call);
}
},
onIncomingCallCancelled: (call) => {
CometChatSoundManager.pause();
this.call = null;
this.ref.detectChanges();
},
onOutgoingCallRejected: (call) => {
if (this.call && call.getReceiverId() == call.getReceiverId() && this.showIncomingCallScreen) {
CometChatSoundManager.pause();
this.closeCallScreen();
}
},
onOutgoingCallAccepted: (call) => {
if (this.call && call.getReceiverId() == call.getReceiverId() && this.showIncomingCallScreen) {
CometChatSoundManager.pause();
this.closeCallScreen();
}
},
}));
}
removeListener() {
CometChat.removeCallListener(this.incomingcallListenerId);
}
ngOnInit() {
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
StorageUtils.attachChangeDetection(this.localStorageChange);
this.attachListeners();
this.setThemeStyle();
this.ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe((call) => {
this.closeCallScreen();
});
}
closeCallScreen() {
this.showOngoingCall = false;
this.activeCall = null;
this.call = null;
this.sessionId = "";
this.ref.detectChanges();
}
ngOnDestroy() {
StorageUtils.detachChangeDetection(this.localStorageChange);
this.removeListener();
this.ccCallEnded?.unsubscribe();
}
getCallTypeIcon() {
if (this.call?.getType() == CometChatUIKitConstants.MessageTypes.audio) {
return "assets/Audio-Call.svg";
}
else {
return "assets/Video-call.svg";
}
}
acceptIncomingCall() {
CometChatSoundManager.pause();
if (this.onAccept && this.call) {
this.onAccept(this.call);
}
else {
this.checkForActiveCallAndEndCall()
.then((response) => {
CometChat.acceptCall(this.call.getSessionId())
.then((call) => {
CometChatCallEvents.ccCallAccepted.next(call);
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, call);
this.showOngoingCall = true;
this.activeCall = call;
this.sessionId = call?.getSessionId();
this.showIncomingCallScreen = false;
this.call = call;
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
}
rejectIncomingCall(reason = CometChatUIKitConstants.calls.rejected, call) {
let currentCall = call ?? this.call;
CometChatSoundManager.pause();
if (this.onDecline && currentCall) {
this.onDecline(currentCall);
}
else {
CometChat.rejectCall(currentCall.getSessionId(), reason)
.then((rejectedCall) => {
CometChatSoundManager.pause();
CometChatCallEvents.ccCallRejected.next(rejectedCall);
if (!call) {
this.showOngoingCall = false;
this.activeCall = null;
this.call = null;
this.ref.detectChanges();
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
}
getCallBuilder() {
let audioOnlyCall = this.activeCall?.getType() == CometChatUIKitConstants.MessageTypes.audio ? true : false;
const builder = this.ongoingCallConfiguration?.callSettingsBuilder?.(this.activeCall) ||
new CometChatUIKitCalls.CallSettingsBuilder().enableDefaultLayout(true).setIsAudioOnlyCall(audioOnlyCall);
if (this.activeCall?.getType() === CometChatUIKitConstants.calls.meeting) {
return undefined;
}
builder.setCallListener(new CometChatUIKitCalls.OngoingCallListener({
onCallEnded: () => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
if (this.call?.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
CometChatUIKitCalls.endSession();
CometChat.clearActiveCall();
this.closeCallScreen();
CometChatCallEvents.ccCallEnded.next({});
}
},
onCallEndButtonPressed: () => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
if (this.call?.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
CometChat.endCall(this.sessionId).then((call) => {
CometChatUIKitCalls.endSession();
CometChatCallEvents.ccCallEnded.next(call);
this.closeCallScreen();
})
.catch((err) => {
if (this.onError) {
this.onError(err);
}
});
}
else {
this.closeCallScreen();
}
},
onError: (error) => {
console.log("Error :", error);
},
}));
return builder.build();
}
setThemeStyle() {
this.setincomingCallStyle();
this.setAvatarStyle();
this.setOngoingCallStyle();
this.iconStyle.iconTint = this.incomingCallStyle.subtitleTextColor;
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "100%",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "transparent",
borderRadius: "0",
titleFont: this.incomingCallStyle.titleTextFont,
titleColor: this.incomingCallStyle.titleTextColor,
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: "transparent"
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setincomingCallStyle() {
let defaultStyle = new IncomingCallStyle({
width: "fit-content",
height: "fit-content",
background: this.themeService.theme.palette.getAccent800("light"),
border: "none",
borderRadius: "8px",
titleTextFont: fontHelper(this.themeService.theme.typography.title2),
titleTextColor: this.themeService.theme.palette.getAccent("dark"),
subtitleTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
subtitleTextColor: this.themeService.theme.palette.getAccent800("dark"),
acceptButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
acceptButtonTextColor: this.themeService.theme.palette.getAccent("dark"),
acceptButtonBackground: this.themeService.theme.palette.getPrimary(),
acceptButtonBorderRadius: "8px",
acceptButtonBorder: "none",
declineButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
declineButtonTextColor: this.themeService.theme.palette.getAccent("dark"),
declineButtonBackground: this.themeService.theme.palette.getError(),
declineButtonBorderRadius: "8px",
declineButtonBorder: "none",
});
this.incomingCallStyle = { ...defaultStyle, ...this.incomingCallStyle };
this.setListItemStyle();
this.acceptButtonStyle = {
border: this.incomingCallStyle.acceptButtonBorder,
borderRadius: this.incomingCallStyle.acceptButtonBorderRadius,
background: this.incomingCallStyle.acceptButtonBackground,
buttonTextFont: this.incomingCallStyle.acceptButtonTextFont,
buttonTextColor: this.incomingCallStyle.acceptButtonTextColor,
...this.buttonStyle
};
this.declineButtonStyle = {
border: this.incomingCallStyle.declineButtonBorder,
borderRadius: this.incomingCallStyle.declineButtonBorderRadius,
background: this.incomingCallStyle.declineButtonBackground,
buttonTextFont: this.incomingCallStyle.declineButtonTextFont,
buttonTextColor: this.incomingCallStyle.declineButtonTextColor,
...this.buttonStyle
};
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "16px",
width: "38px",
height: "38px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
}
CometChatIncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatIncomingCallComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatIncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatIncomingCallComponent, selector: "cometchat-incoming-call", inputs: { call: "call", disableSoundForCalls: "disableSoundForCalls", customSoundForCalls: "customSoundForCalls", onAccept: "onAccept", onDecline: "onDecline", acceptButtonText: "acceptButtonText", declineButtonText: "declineButtonText", subtitleView: "subtitleView", ongoingCallConfiguration: "ongoingCallConfiguration", onError: "onError", listItemStyle: "listItemStyle", avatarStyle: "avatarStyle", incomingCallStyle: "incomingCallStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-incoming-call__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"call && showIncomingCallScreen\">\n <div class=\"cc-incoming-call__listitem\">\n <cometchat-list-item [title]=\"call.getSender().getName()\"\n [listItemStyle]=\"listItemStyle\"\n [hideSeparator]=\"true\" >\n <div slot=\"subtitleView\" class=\"cc-incoming-call__subtitle-view\" *ngIf=\"subtitleView;else subtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #subtitle>\n <div slot=\"subtitleView\" class=\"cc-incoming-call__subtitle-view\">\n <div class=\"cc-call__icon\">\n <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"getCallTypeIcon()\"></cometchat-icon>\n </div>\n <cometchat-label class=\"cc-call__type\" [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n </cometchat-label>\n </div>\n </ng-template>\n <div slot=\"tailView\" class=\"cc-incoming-call__tail-view\">\n <div class=\"tail__view\">\n <div class=\"cc-incoming-call__avatar\">\n <cometchat-avatar [avatarStyle]=\"avatarStyle\" [image]=\"call.getSender().getAvatar()\" [name]=\"call.getSender().getName()\">\n\n </cometchat-avatar>\n </div>\n </div>\n </div>\n </cometchat-list-item>\n </div>\n <div class=\"cc-incoming-call-buttons\">\n <cometchat-button (cc-button-clicked)=\"rejectIncomingCall()\" [buttonStyle]=\"declineButtonStyle\" [text]=\"declineButtonText\"></cometchat-button>\n <cometchat-button (cc-button-clicked)=\"acceptIncomingCall()\" [buttonStyle]=\"acceptButtonStyle\" [text]=\"acceptButtonText\" ></cometchat-button>\n </div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall && activeCall && !showIncomingCallScreen\"\n [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\"\n [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\"\n [ongoingCallStyle]=\"ongoingCallConfiguration.ongoingCallStyle || ongoingCallStyle\" [sessionID]=\"sessionId\"\n [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>", styles: [".cc-incoming-call__wrapper{position:absolute;left:8px;top:8px;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;min-height:104px;min-width:230px;z-index:100;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;align-items:flex-start}.cc-incoming-call-buttons{display:flex;gap:8px}.cc-incoming-call__tail-view{position:relative}.cc-incoming-call__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}.cc-incoming-call__listitem{width:100%;margin-left:-4px}\n"], components: [{ type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatIncomingCallComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-incoming-call", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-incoming-call__wrapper\" [ngStyle]=\"wrapperStyle()\" *ngIf=\"call && showIncomingCallScreen\">\n <div class=\"cc-incoming-call__listitem\">\n <cometchat-list-item [title]=\"call.getSender().getName()\"\n [listItemStyle]=\"listItemStyle\"\n [hideSeparator]=\"true\" >\n <div slot=\"subtitleView\" class=\"cc-incoming-call__subtitle-view\" *ngIf=\"subtitleView;else subtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #subtitle>\n <div slot=\"subtitleView\" class=\"cc-incoming-call__subtitle-view\">\n <div class=\"cc-call__icon\">\n <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"getCallTypeIcon()\"></cometchat-icon>\n </div>\n <cometchat-label class=\"cc-call__type\" [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n </cometchat-label>\n </div>\n </ng-template>\n <div slot=\"tailView\" class=\"cc-incoming-call__tail-view\">\n <div class=\"tail__view\">\n <div class=\"cc-incoming-call__avatar\">\n <cometchat-avatar [avatarStyle]=\"avatarStyle\" [image]=\"call.getSender().getAvatar()\" [name]=\"call.getSender().getName()\">\n\n </cometchat-avatar>\n </div>\n </div>\n </div>\n </cometchat-list-item>\n </div>\n <div class=\"cc-incoming-call-buttons\">\n <cometchat-button (cc-button-clicked)=\"rejectIncomingCall()\" [buttonStyle]=\"declineButtonStyle\" [text]=\"declineButtonText\"></cometchat-button>\n <cometchat-button (cc-button-clicked)=\"acceptIncomingCall()\" [buttonStyle]=\"acceptButtonStyle\" [text]=\"acceptButtonText\" ></cometchat-button>\n </div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall && activeCall && !showIncomingCallScreen\"\n [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\"\n [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\"\n [ongoingCallStyle]=\"ongoingCallConfiguration.ongoingCallStyle || ongoingCallStyle\" [sessionID]=\"sessionId\"\n [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>", styles: [".cc-incoming-call__wrapper{position:absolute;left:8px;top:8px;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;min-height:104px;min-width:230px;z-index:100;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;align-items:flex-start}.cc-incoming-call-buttons{display:flex;gap:8px}.cc-incoming-call__tail-view{position:relative}.cc-incoming-call__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}.cc-incoming-call__listitem{width:100%;margin-left:-4px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { call: [{
type: Input
}], disableSoundForCalls: [{
type: Input
}], customSoundForCalls: [{
type: Input
}], onAccept: [{
type: Input
}], onDecline: [{
type: Input
}], acceptButtonText: [{
type: Input
}], declineButtonText: [{
type: Input
}], subtitleView: [{
type: Input
}], ongoingCallConfiguration: [{
type: Input
}], onError: [{
type: Input
}], listItemStyle: [{
type: Input
}], avatarStyle: [{
type: Input
}], incomingCallStyle: [{
type: Input
}] } });
class CometChatIncomingCall {
}
CometChatIncomingCall.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatIncomingCall, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatIncomingCall.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatIncomingCall, declarations: [CometChatIncomingCallComponent], imports: [CommonModule,
CometChatList,
CometChatOngoingCall], exports: [CometChatIncomingCallComponent] });
CometChatIncomingCall.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatIncomingCall, imports: [[
CommonModule,
CometChatList,
CometChatOngoingCall
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatIncomingCall, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatIncomingCallComponent],
imports: [
CommonModule,
CometChatList,
CometChatOngoingCall
],
exports: [CometChatIncomingCallComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatUsersComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.disableUsersPresence = false;
this.hideSeparator = false;
this.searchPlaceholder = localize("SEARCH");
this.hideError = false;
this.selectionMode = SelectionMode.none;
this.searchIconURL = "assets/search.svg";
this.hideSearch = false;
this.title = localize("USERS");
this.onError = (error) => {
console.log(error);
};
this.loadingIconURL = "assets/Spinner.svg";
this.showSectionHeader = true;
this.sectionHeaderField = "name";
this.emptyStateText = localize("NO_USERS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.titleAlignment = TitleAlignment.left;
this.usersStyle = {
width: "100%",
height: "100%",
separatorColor: "rgb(222 222 222 / 46%)",
};
this.listItemStyle = {
height: "100%",
width: "100%",
};
this.statusIndicatorStyle = {
height: "10px",
width: "10px",
borderRadius: "16px",
};
this.avatarStyle = {
borderRadius: "16px",
width: "28px",
height: "28px",
};
this.searchKeyword = "";
this.userPresencePlacement = UserPresencePlacement.bottom;
this.disableLoadingState = false;
this.fetchingUsers = false;
this.userChecked = "";
this.listStyle = {};
this.state = States.loading;
this.selectionmodeEnum = SelectionMode;
this.usersList = [];
this.limit = 30;
this.userListenerId = "userlist_" + new Date().getTime();
this.firstReload = false;
this.connectionListenerId = "connection_" + new Date().getTime();
this.previousSearchKeyword = "";
this.isWebsocketReconnected = false;
this.selectedUsers = {};
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: "#2196F3",
uncheckedBackgroundColor: "#ccc"
};
this.onScrolledToBottom = null;
this.fetchUsersOnSearchKeyWordChange = () => {
if (this.fetchingUsers) {
clearTimeout(this.fetchTimeOut);
this.fetchTimeOut = setTimeout(() => {
this.searchForUser();
}, 800);
}
else {
this.searchForUser();
}
};
this.searchForUser = () => {
this.setRequestBuilder();
if (!this.disableLoadingState) {
this.usersList = [];
}
this.fetchNextUsersList();
};
/**
* @param {CometChat.User} user
*/
this.onClick = (user) => {
if (this.onItemClick) {
this.onItemClick(user);
}
};
/**
* @param {CometChat.User} user
*/
this.getActiveUser = (user) => {
if (this.selectionMode == SelectionMode.none || !this.selectionMode) {
if (user.getUid() == this.activeUser?.getUid()) {
return true;
}
else {
return false;
}
}
else
return false;
};
/**
* @param {CometChat.User} user
*/
this.getStatusIndicatorColor = (user) => {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(user) || this.disableUsersPresence;
if (!userStatusVisibility) {
return (this.usersStyle?.onlineStatusColor ??
this.themeService?.theme.palette.getSuccess());
}
return null;
};
/**
* @param {CometChat.User} user
*/
this.getStatusIndicatorStyle = (user) => {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(user) || this.disableUsersPresence;
if (!userStatusVisibility) {
return (this.statusIndicatorStyle);
}
return null;
};
/**
* @param {CometChat.User} user
*/
this.updateUser = (user) => {
let userlist = [...this.usersList];
//search for user
let userKey = userlist.findIndex((u, k) => u.getUid() == user.getUid());
//if found in the list, update user object
if (userKey > -1) {
userlist.splice(userKey, 1, user);
this.usersList = [...userlist];
this.ref.detectChanges();
}
};
this.addMembersToList = (user, event) => {
let selected = event?.detail?.checked;
if (this.selectionMode === this.selectionmodeEnum.single) {
this.userChecked = user.getUid();
}
if (this.onSelect) {
this.onSelect(user, selected);
}
if (selected) {
this.selectedUsers[user.getUid()] = user;
}
else {
delete this.selectedUsers[user.getUid()];
}
this.ref.detectChanges();
};
this.fetchNextUsersList = (state = States.loading) => {
this.onScrolledToBottom = null;
if (!(this.disableLoadingState && state == States.loading)) {
this.state = state;
}
if (this.requestBuilder &&
this.requestBuilder.pagination &&
(this.requestBuilder.pagination.current_page == 0 ||
this.requestBuilder.pagination.current_page !=
this.requestBuilder.pagination.total_pages)) {
this.fetchingUsers = true;
this.onScrolledToBottom = this.fetchNextUsersList;
this.ref.detectChanges();
try {
this.requestBuilder.fetchNext().then((userList) => {
if (userList.length <= 0) {
if (this.onEmpty) {
this.onEmpty();
this.previousSearchKeyword = "";
}
}
if (userList.length <= 0 &&
(this.usersList?.length <= 0 || this.disableLoadingState)) {
this.state = States.empty;
this.ref.detectChanges();
}
else {
if (!this.disableLoadingState) {
if (this.isWebsocketReconnected) {
this.usersList = userList;
this.isWebsocketReconnected = false;
}
else {
this.usersList = [...this.usersList, ...userList];
}
}
else {
if (this.searchKeyword != this.previousSearchKeyword ||
[0, 1].includes(this.requestBuilder.pagination.current_page)) {
this.usersList = userList;
}
else {
this.usersList = [...this.usersList, ...userList];
}
}
this.state = States.loaded;
this.ref.detectChanges();
}
if (this.firstReload) {
this.attachConnectionListeners();
this.firstReload = false;
}
this.fetchingUsers = false;
this.previousSearchKeyword = this.searchKeyword;
}, (error) => {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.fetchingUsers = false;
this.ref.detectChanges();
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
if (this.usersList?.length <= 0) {
this.state = States.error;
this.ref.detectChanges();
}
this.fetchingUsers = false;
}
}
};
/**
* @param {string} key
*/
this.onSearch = (key) => {
try {
this.searchKeyword = key;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.setRequestBuilder();
if (!this.disableLoadingState) {
this.usersList = [];
this.ref.detectChanges();
}
if (!this.fetchingUsers) {
this.fetchNextUsersList();
}
}, 500);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
this.userStyle = () => {
return {
height: this.usersStyle.height,
width: this.usersStyle.width,
background: this.usersStyle.background,
border: this.usersStyle.border,
borderRadius: this.usersStyle.borderRadius,
};
};
this.state = States.loading;
}
ngOnInit() {
this.firstReload = true;
this.state = States.loading;
this.isWebsocketReconnected = false;
this.setThemeStyle();
this.subscribeToEvents();
CometChat.getLoggedinUser()
.then((user) => {
this.setRequestBuilder();
if (!this.fetchingUsers) {
this.fetchNextUsersList();
}
this.attachListeners();
this.loggedInUser = user;
this.onScrolledToBottom = this.fetchNextUsersList;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
ngOnChanges(changes) {
if (changes["searchKeyword"]) {
this.fetchUsersOnSearchKeyWordChange();
}
}
onUserSelected(user, event) {
let selected = event?.detail?.checked;
if (this.onSelect) {
this.onSelect(user, selected);
}
}
fetchNewUsers() {
this.setRequestBuilder();
let state = this.firstReload ? States.loading : States.loaded;
this.fetchNextUsersList(state);
}
// subscribe to global events
subscribeToEvents() {
this.ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe((user) => {
if (this.activeUser && user.getUid() == this.activeUser.getUid()) {
this.activeUser = user;
this.updateUser(user);
this.ref.detectChanges();
}
});
this.ccUserUnBlocked = CometChatUserEvents.ccUserUnblocked.subscribe((user) => {
if (this.activeUser && user.getUid() == this.activeUser.getUid()) {
this.activeUser = user;
this.updateUser(user);
this.ref.detectChanges();
}
});
}
unsubscribeToEvents() {
this.ccUserBlocked?.unsubscribe();
this.ccUserUnBlocked?.unsubscribe();
}
ngOnDestroy() {
this.usersRequest = null;
this.ref.detach();
this.removeListener();
this.state = States.loaded;
this.unsubscribeToEvents();
}
isUserSelected(user) {
return user.getUid() === this.userChecked
|| this.selectedUsers?.[user.getUid()];
}
attachConnectionListeners() {
CometChat.addConnectionListener(this.connectionListenerId, new CometChat.ConnectionListener({
onConnected: () => {
this.isWebsocketReconnected = true;
console.log("ConnectionListener =>connected");
this.fetchNewUsers();
},
inConnecting: () => {
console.log("ConnectionListener => In connecting");
},
onDisconnected: () => {
this.isWebsocketReconnected = false;
console.log("ConnectionListener => On Disconnected");
},
}));
}
attachListeners() {
this.state = States.loading;
this.ref.detectChanges();
//Attaching User Listeners to dynamilcally update when a user comes online and goes offline
CometChat.addUserListener(this.userListenerId, new CometChat.UserListener({
onUserOnline: (onlineUser) => {
/* when someuser/friend comes online, user will be received here */
this.updateUser(onlineUser);
},
onUserOffline: (offlineUser) => {
/* when someuser/friend went offline, user will be received here */
this.updateUser(offlineUser);
},
}));
}
removeListener() {
CometChat.removeUserListener(this.userListenerId);
this.userListenerId = "";
CometChat.removeConnectionListener(this.connectionListenerId);
}
setRequestBuilder() {
if (!this.searchKeyword) {
this.previousSearchKeyword = "";
}
if (this.searchRequestBuilder && this.searchKeyword) {
this.requestBuilder = this.searchRequestBuilder
.setSearchKeyword(this.searchKeyword)
.build();
}
else if (this.usersRequestBuilder) {
this.requestBuilder = this.usersRequestBuilder
.setSearchKeyword(this.searchKeyword)
.build();
}
else {
this.requestBuilder = new CometChat.UsersRequestBuilder()
.setLimit(this.limit)
.setSearchKeyword(this.searchKeyword)
.build();
}
return this.requestBuilder;
}
setThemeStyle() {
this.setUsersStyle();
this.setListItemStyle();
this.setAvatarStyle();
this.setStatusStyle();
this.listStyle = {
titleTextFont: this.usersStyle.titleTextFont,
titleTextColor: this.usersStyle.titleTextColor,
emptyStateTextFont: this.usersStyle.emptyStateTextFont,
emptyStateTextColor: this.usersStyle.emptyStateTextColor,
errorStateTextFont: this.usersStyle.errorStateTextFont,
errorStateTextColor: this.usersStyle.errorStateTextColor,
loadingIconTint: this.usersStyle.loadingIconTint,
separatorColor: this.usersStyle.separatorColor,
searchIconTint: this.usersStyle.searchIconTint,
searchBorder: this.usersStyle.searchBorder,
searchBorderRadius: this.usersStyle.searchBorderRadius,
searchBackground: this.usersStyle.searchBackground,
searchPlaceholderTextFont: this.usersStyle.searchPlaceholderTextFont,
searchPlaceholderTextColor: this.usersStyle.searchPlaceholderTextColor,
searchTextFont: this.usersStyle.searchTextFont,
searchTextColor: this.usersStyle.searchTextColor,
sectionHeaderTextColor: this.usersStyle.sectionHeaderTextColor,
sectionHeaderTextFont: this.usersStyle.sectionHeaderTextFont,
};
this.ref.detectChanges();
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: this.themeService.theme.palette.getAccent100(),
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: this.themeService.theme.palette.getAccent50(),
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "28px",
height: "28px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setStatusStyle() {
let defaultStyle = {
height: "12px",
width: "12px",
border: "none",
borderRadius: "24px",
};
this.statusIndicatorStyle = {
...defaultStyle,
...this.statusIndicatorStyle,
};
}
setUsersStyle() {
let defaultStyle = new UsersStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
separatorColor: this.themeService.theme.palette.getAccent400(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
sectionHeaderTextColor: this.themeService.theme.palette.getAccent600(),
sectionHeaderTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
searchIconTint: this.themeService.theme.palette.getAccent600(),
searchPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
searchBackground: this.themeService.theme.palette.getAccent100(),
searchPlaceholderTextFont: fontHelper(this.themeService.theme.typography.text3),
searchTextColor: this.themeService.theme.palette.getAccent600(),
searchTextFont: fontHelper(this.themeService.theme.typography.text3),
});
this.usersStyle = { ...defaultStyle, ...this.usersStyle };
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
};
}
}
CometChatUsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersComponent, selector: "cometchat-users", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", listItemView: "listItemView", menu: "menu", options: "options", activeUser: "activeUser", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", emptyStateView: "emptyStateView", onSelect: "onSelect", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", usersStyle: "usersStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", onItemClick: "onItemClick", searchKeyword: "searchKeyword", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n <div class=\"cc-menus\" *ngIf=\"menu\">\n\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n\n</div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-user>\n <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n [userPresencePlacement]=\"userPresencePlacement\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n </ng-container>\n </div>\n\n <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n <cometchat-menu-list [data]=\"options(user)\">\n\n </cometchat-menu-list>\n </div>\n <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n <ng-template #tailView>\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\"></cometchat-checkbox>\n\n </div>\n </ng-template>\n </cometchat-list-item>\n\n </ng-template>\n</div>\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-users", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n <div class=\"cc-menus\" *ngIf=\"menu\">\n\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n\n</div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-user>\n <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n [userPresencePlacement]=\"userPresencePlacement\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n </ng-container>\n </div>\n\n <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n <cometchat-menu-list [data]=\"options(user)\">\n\n </cometchat-menu-list>\n </div>\n <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n <ng-template #tailView>\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\"></cometchat-checkbox>\n\n </div>\n </ng-template>\n </cometchat-list-item>\n\n </ng-template>\n</div>\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { usersRequestBuilder: [{
type: Input
}], searchRequestBuilder: [{
type: Input
}], subtitleView: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], listItemView: [{
type: Input
}], menu: [{
type: Input
}], options: [{
type: Input
}], activeUser: [{
type: Input
}], hideSeparator: [{
type: Input
}], searchPlaceholder: [{
type: Input
}], hideError: [{
type: Input
}], selectionMode: [{
type: Input
}], searchIconURL: [{
type: Input
}], hideSearch: [{
type: Input
}], title: [{
type: Input
}], onError: [{
type: Input
}], emptyStateView: [{
type: Input
}], onSelect: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingIconURL: [{
type: Input
}], showSectionHeader: [{
type: Input
}], sectionHeaderField: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], titleAlignment: [{
type: Input
}], usersStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], avatarStyle: [{
type: Input
}], onItemClick: [{
type: Input
}], searchKeyword: [{
type: Input
}], onEmpty: [{
type: Input
}], userPresencePlacement: [{
type: Input
}], disableLoadingState: [{
type: Input
}] } });
/**
*
* CometChatAddMembersComponentComponent is used to render group members to add
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatAddMembersComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.disableUsersPresence = false;
this.backButtonIconURL = "assets/backbutton.svg";
this.closeButtonIconURL = "assets/close2x.svg";
this.showBackButton = true;
this.hideSeparator = false;
this.selectionMode = SelectionMode.multiple;
this.searchPlaceholder = "Search Members";
this.hideError = false;
this.searchIconURL = "assets/search.svg";
this.hideSearch = false;
this.title = localize("ADD_MEMBERS");
this.onError = (error) => {
console.log(error);
};
this.buttonText = localize("ADD_MEMBERS");
this.loadingIconURL = "assets/Spinner.svg";
this.listItemStyle = {};
this.showSectionHeader = false;
this.sectionHeaderField = "name";
this.emptyStateText = localize("NO_USERS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.titleAlignment = TitleAlignment.center;
this.titleAlignmentEnum = TitleAlignment;
this.selectionmodeEnum = SelectionMode;
this.addMembersStyle = {};
/**
* @deprecated This property is deprecated as of version 4.3.14. Use `statusIndicatorStyle` instead.
*/
this.StatusIndicatorStyle = {};
this.statusIndicatorStyle = {};
this.avatarStyle = {};
this.actionMessagesList = [];
this.addMemberButtonStyle = {
height: "100%",
width: "100%",
background: "rgb(51, 153, 255)",
padding: "8px",
buttonTextColor: "white",
buttonTextFont: "",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "none",
borderRadius: "8px"
};
this.searchKeyword = "";
this.usersList = [];
this.userListenerId = "userlist_" + new Date().getTime();
this.usersStyle = {
width: "100%",
height: "100%",
background: "",
border: "",
borderRadius: "",
searchBackground: "#efefef",
onlineStatusColor: "",
separatorColor: "rgb(222 222 222 / 46%)",
sectionHeaderTextFont: "",
sectionHeaderTextColor: ""
};
this.membersList = [];
this.addedMembers = [];
/**
* @param {string} uid
*/
this.addRemoveUsers = (user, selected) => {
if (this.onSelect) {
this.onSelect(user, selected);
}
else {
let key = this.membersList.findIndex((m) => m.getUid() === user.getUid());
if (key >= 0) {
this.membersList.splice(key, 1);
}
else {
let member = new CometChat.GroupMember(user.getUid(), CometChatUIKitConstants.groupMemberScope.participant);
member.setName(user.getName());
member.setGuid(this.group.getGuid());
this.membersList.push(member);
}
}
this.ref.detectChanges();
};
this.addMembersToGroup = () => {
if (this.group && this.membersList.length > 0) {
if (this.onAddMembersButtonClick) {
this.onAddMembersButtonClick(this.group.getGuid(), this.membersList);
this.ref.detectChanges();
return;
}
else {
CometChat.addMembersToGroup(this.group.getGuid(), this.membersList, []).then((response) => {
for (const key in response) {
if (response.hasOwnProperty(key) && response[key] === "success") {
const matchingUser = this.membersList.find((user) => user.getUid() === key);
if (matchingUser) {
this.createActionMessage(matchingUser);
if (!matchingUser.getScope()) {
matchingUser.setScope(CometChatUIKitConstants.groupMemberScope.participant);
}
this.addedMembers.push(matchingUser);
}
}
}
this.group.setMembersCount(this.group.getMembersCount() + this.addedMembers?.length || 0);
CometChatGroupEvents.ccGroupMemberAdded.next({
messages: this.actionMessagesList,
usersAdded: this.addedMembers,
userAddedIn: this.group,
userAddedBy: this.loggedInUser
});
this.membersList = [];
this.addedMembers = [];
this.actionMessagesList = [];
if (this.onBack) {
this.onBack();
}
this.ref.detectChanges();
})
.catch((err) => {
console.log(err);
this.membersList = [];
this.ref.detectChanges();
});
}
}
else {
return;
}
};
// styles
this.backButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.addMembersStyle.backButtonIconTint || this.themeService.theme.palette.getPrimary()
};
};
this.closeButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.addMembersStyle.closeButtonIconTint || this.themeService.theme.palette.getPrimary()
};
};
this.wrapperStyle = () => {
return {
height: this.addMembersStyle.height,
width: this.addMembersStyle.width,
background: this.addMembersStyle.background,
border: this.addMembersStyle.border,
borderRadius: this.addMembersStyle.borderRadius
};
};
this.addMembersStyles = () => {
return {
padding: this.addMembersStyle.padding
};
};
}
ngOnInit() {
this.setUsersStyle();
this.setAddMembersStyle();
this.membersList = [];
this.addedMembers = [];
this.actionMessagesList = [];
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
closeClicked() {
if (this.onClose) {
this.onClose();
}
}
backClicked() {
if (this.onBack) {
this.onBack();
}
}
createActionMessage(actionOn) {
let actionMessage = new CometChat.Action(this.group.getGuid(), CometChatUIKitConstants.MessageTypes.groupMember, CometChatUIKitConstants.MessageReceiverType.group, CometChatUIKitConstants.MessageCategory.action);
actionMessage.setAction(CometChatUIKitConstants.groupMemberAction.ADDED);
actionMessage.setActionBy(this.loggedInUser);
actionMessage.setActionFor(this.group);
actionMessage.setActionOn(actionOn);
actionMessage.setReceiver(this.group);
actionMessage.setSender(this.loggedInUser);
actionMessage.setConversationId("group_" + this.group.getGuid());
actionMessage.setMuid(CometChatUIKitUtility.ID());
actionMessage.setMessage(`${this.loggedInUser?.getName()} added ${actionOn.getName()}`);
actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
this.actionMessagesList.push(actionMessage);
}
setAddMembersStyle() {
let defaultStyle = new AddMembersStyle({
background: this.themeService.theme.palette.getBackground(),
border: `none`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
separatorColor: this.themeService.theme.palette.getAccent400(),
width: "100%",
height: "100%",
borderRadius: "none",
searchPlaceholderTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
searchPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
searchTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
searchTextColor: this.themeService.theme.palette.getAccent400(),
searchIconTint: this.themeService.theme.palette.getAccent600(),
searchBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
searchBorderRadius: "8px",
searchBackground: this.themeService.theme.palette.getAccent50(),
closeButtonIconTint: this.themeService.theme.palette.getPrimary(),
backButtonIconTint: this.themeService.theme.palette.getPrimary(),
addMembersButtonBackground: this.themeService.theme.palette.getPrimary(),
addMembersButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
addMembersButtonTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
padding: "0 100px"
});
this.addMembersStyle = { ...defaultStyle, ...this.addMembersStyle };
this.addMemberButtonStyle.background = this.addMembersStyle.addMembersButtonBackground;
this.addMemberButtonStyle.buttonTextFont = this.addMembersStyle.addMembersButtonTextFont;
this.addMemberButtonStyle.buttonTextColor = this.addMembersStyle.addMembersButtonTextColor;
}
setUsersStyle() {
let defaultStyle = new UsersStyle({
background: this.themeService.theme.palette.getBackground(),
border: "none",
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
separatorColor: this.themeService.theme.palette.getAccent400(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
searchIconTint: this.themeService.theme.palette.getAccent600(),
searchPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
searchBackground: this.themeService.theme.palette.getAccent100(),
searchPlaceholderTextFont: fontHelper(this.themeService.theme.typography.text3),
searchTextColor: this.themeService.theme.palette.getAccent600(),
searchTextFont: fontHelper(this.themeService.theme.typography.text3)
});
this.usersStyle = { ...defaultStyle, ...this.addMembersStyle };
}
}
CometChatAddMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatAddMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatAddMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", hideError: "hideError", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", buttonText: "buttonText", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", listItemStyle: "listItemStyle", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", onAddMembersButtonClick: "onAddMembersButtonClick", titleAlignment: "titleAlignment", addMembersStyle: "addMembersStyle", StatusIndicatorStyle: "StatusIndicatorStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle" }, ngImport: i0, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-back-button\">\n <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n </cometchat-button>\n </div>\n <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n <div class=\"cc-users\">\n <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n [hideSearch]=\"hideSearch\"\n [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [avatarStyle]=\"avatarStyle\"\n [searchIconURL]=\"searchIconURL\"\n [searchRequestBuilder]=\"searchRequestBuilder\"\n [usersStyle]=\"usersStyle\"\n [subtitleView]=\"subtitleView\"\n [options]=\"options\"\n [usersRequestBuilder]=\"usersRequestBuilder\"\n [emptyStateView]=\"emptyStateView\"\n [onSelect]=\" addRemoveUsers\"\n [sectionHeaderField]=\"sectionHeaderField\"\n [loadingIconURL]=\"loadingIconURL\"\n [errorStateView]=\"errorStateView\"\n [loadingStateView]=\"loadingStateView\"\n [titleAlignment]=\"titleAlignment\"\n [showSectionHeader]=\"showSectionHeader\"\n [listItemView]=\"listItemView\"\n [menu]=\"menu\"\n [hideSeparator]=\"hideSeparator\"\n [hideError]=\"hideError\"\n [selectionMode]=\" selectionMode\"\n [listItemStyle]=\"listItemStyle\"\n [title]=\"title\" >\n\n </cometchat-users>\n </div>\n <div class=\"cc-add-members__buttons\">\n <cometchat-button class=\"cc-add-members__buttons--add\" [text]=\"buttonText\" [buttonStyle]=\"addMemberButtonStyle\" (click)=\"addMembersToGroup()\" ></cometchat-button>\n\n </div>\n </div>\n <div class=\"cc-close-button\">\n <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n </cometchat-button>\n </div>\n</div>", styles: [".cc-add-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-add-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-users{height:90%}.cc-add-members__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-add-members__buttons--add{height:42px;width:100%}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatAddMembersComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-add-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-back-button\">\n <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n </cometchat-button>\n </div>\n <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n <div class=\"cc-users\">\n <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n [hideSearch]=\"hideSearch\"\n [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [avatarStyle]=\"avatarStyle\"\n [searchIconURL]=\"searchIconURL\"\n [searchRequestBuilder]=\"searchRequestBuilder\"\n [usersStyle]=\"usersStyle\"\n [subtitleView]=\"subtitleView\"\n [options]=\"options\"\n [usersRequestBuilder]=\"usersRequestBuilder\"\n [emptyStateView]=\"emptyStateView\"\n [onSelect]=\" addRemoveUsers\"\n [sectionHeaderField]=\"sectionHeaderField\"\n [loadingIconURL]=\"loadingIconURL\"\n [errorStateView]=\"errorStateView\"\n [loadingStateView]=\"loadingStateView\"\n [titleAlignment]=\"titleAlignment\"\n [showSectionHeader]=\"showSectionHeader\"\n [listItemView]=\"listItemView\"\n [menu]=\"menu\"\n [hideSeparator]=\"hideSeparator\"\n [hideError]=\"hideError\"\n [selectionMode]=\" selectionMode\"\n [listItemStyle]=\"listItemStyle\"\n [title]=\"title\" >\n\n </cometchat-users>\n </div>\n <div class=\"cc-add-members__buttons\">\n <cometchat-button class=\"cc-add-members__buttons--add\" [text]=\"buttonText\" [buttonStyle]=\"addMemberButtonStyle\" (click)=\"addMembersToGroup()\" ></cometchat-button>\n\n </div>\n </div>\n <div class=\"cc-close-button\">\n <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n </cometchat-button>\n </div>\n</div>", styles: [".cc-add-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-add-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-users{height:90%}.cc-add-members__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-add-members__buttons--add{height:42px;width:100%}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { usersRequestBuilder: [{
type: Input
}], searchRequestBuilder: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], menu: [{
type: Input
}], options: [{
type: Input
}], backButtonIconURL: [{
type: Input
}], closeButtonIconURL: [{
type: Input
}], showBackButton: [{
type: Input
}], hideSeparator: [{
type: Input
}], selectionMode: [{
type: Input
}], searchPlaceholder: [{
type: Input
}], hideError: [{
type: Input
}], searchIconURL: [{
type: Input
}], hideSearch: [{
type: Input
}], title: [{
type: Input
}], onError: [{
type: Input
}], onBack: [{
type: Input
}], onClose: [{
type: Input
}], onSelect: [{
type: Input
}], buttonText: [{
type: Input
}], group: [{
type: Input
}], emptyStateView: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingIconURL: [{
type: Input
}], listItemStyle: [{
type: Input
}], showSectionHeader: [{
type: Input
}], sectionHeaderField: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], onAddMembersButtonClick: [{
type: Input
}], titleAlignment: [{
type: Input
}], addMembersStyle: [{
type: Input
}], StatusIndicatorStyle: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], avatarStyle: [{
type: Input
}] } });
/**
*
* CometChatMessageHeader is a used to render listitem component.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatMessageHeaderComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.avatarStyle = {
borderRadius: "16px",
width: "28px",
height: "28px",
border: "none",
};
this.statusIndicatorStyle = {
borderRadius: "16px",
width: "10px",
height: "10px",
border: "none",
};
this.messageHeaderStyle = {
width: "100%",
height: "100%",
};
this.listItemStyle = {
width: "",
height: "100%",
border: "none",
borderRadius: "2px",
separatorColor: "",
activeBackground: "transparent",
hoverBackground: "transparent"
};
this.disableUsersPresence = false;
this.disableTyping = false;
/**
* @deprecated
*
* This property is deprecated as of version 4.3.7 due to newer property 'passwordGroupIcon'. It will be removed in subsequent versions.
*/
this.protectedGroupIcon = "assets/Locked.svg";
this.passwordGroupIcon = undefined;
this.privateGroupIcon = "assets/Private.svg";
this.backButtonIconURL = "assets/backbutton.svg";
this.hideBackButton = false;
this.onError = (error) => {
console.log(error);
};
this.onBack = () => { };
this.groupsListenerId = "groupsList_" + new Date().getTime();
this.userListenerId = "userlist_" + new Date().getTime();
this.subtitleText = "";
this.isTyping = false;
this.theme = new CometChatTheme({});
/**
* @param {CometChat.User} user
*/
this.getStatusIndicatorStyle = (user) => {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(user) || this.disableUsersPresence;
if (!userStatusVisibility) {
return (this.statusIndicatorStyle);
}
return null;
};
this.statusColor = {
online: "#00f300",
private: "#00f300",
password: "#F7A500",
public: ""
};
this.backButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "none",
background: "transparent",
buttonIconTint: ""
};
this.checkStatusType = () => {
if (this.user) {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(this.user) || this.disableUsersPresence;
return userStatusVisibility ? null : this.statusColor[this.user?.getStatus()];
}
else if (this.group) {
return this.statusColor[this.group?.getType()];
}
else
return;
};
this.handleGroupEvent = (group, user, hasJoined, newScope) => {
if (this.group.getGuid() !== group.getGuid()) {
return;
}
if (user.getUid() === this.loggedInUser?.getUid()) {
group.setHasJoined(hasJoined);
if (newScope) {
group.setScope(newScope);
}
}
this.group = group;
this.ref.detectChanges();
this.updateSubtitle();
};
this.setTypingIndicatorText = (typing) => {
const sender = typing.getSender();
const receiverId = typing.getReceiverId();
const loggedInUser = this.loggedInUser;
if (this.user && sender.getUid() === this.user?.getUid() && loggedInUser?.getUid() === receiverId) {
const isBlocked = this.user.getBlockedByMe() || this.user.getHasBlockedMe();
if (isBlocked) {
return;
}
this.subtitleText = localize("IS_TYPING");
this.ref.detectChanges();
}
else if (this.group && this.group.getGuid() === receiverId) {
this.subtitleText = `${sender.getName()} ${localize("IS_TYPING")}`;
this.ref.detectChanges();
}
};
this.headerStyle = () => {
const headerStyle = this.getHeadersStyle();
return {
width: headerStyle.width,
height: headerStyle.height,
border: headerStyle.border,
borderRadius: headerStyle.borderRadius,
background: headerStyle.background,
};
};
this.subtitleStyle = () => {
const headerStyle = this.getHeadersStyle();
if (this.user && this.user.getStatus() == CometChatUIKitConstants.userStatusType.online) {
return {
textFont: headerStyle.subtitleTextFont,
textColor: this.themeService.theme.palette.getPrimary()
};
}
else {
return {
textFont: this.isTyping ? headerStyle.typingIndicatorTextFont : headerStyle.subtitleTextFont,
textColor: this.isTyping ? headerStyle.typingIndicatorTextColor : headerStyle.subtitleTextColor
};
}
};
}
ngOnChanges(changes) {
if (changes["user"] || changes["group"]) {
this.removeListener();
if (!this.loggedInUser) {
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
this.attachListeners();
this.updateSubtitle();
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
else {
this.attachListeners();
this.updateSubtitle();
}
}
}
ngOnInit() {
this.setListItemStyle();
this.setAvatarStyle();
this.setStatusStyle();
this.subscribeToEvents();
this.backButtonStyle.buttonIconTint = this.messageHeaderStyle?.backButtonIconTint || this.themeService.theme.palette.getPrimary();
this.statusColor.online = this.messageHeaderStyle.onlineStatusColor ?? this.themeService.theme.palette.getSuccess();
}
// subscribe to global events
subscribeToEvents() {
this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.userAddedIn.getGuid()) {
this.group == item?.userAddedIn;
this.ref.detectChanges();
this.updateSubtitle();
}
});
this.ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.kickedFrom.getGuid()) {
this.group == item?.kickedFrom;
this.ref.detectChanges();
this.updateSubtitle();
}
});
this.ccGroupMemberJoined = CometChatGroupEvents.ccGroupMemberJoined.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.joinedGroup.getGuid()) {
this.group == item?.joinedGroup;
this.ref.detectChanges();
this.updateSubtitle();
}
});
this.ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.kickedFrom.getGuid()) {
this.group == item?.kickedFrom;
this.ref.detectChanges();
this.updateSubtitle();
}
});
this.ccOwnershipChanged = CometChatGroupEvents.ccOwnershipChanged.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.group.getGuid()) {
this.group == item?.group;
this.ref.detectChanges();
this.updateSubtitle();
}
});
this.ccGroupLeft = CometChatGroupEvents.ccGroupLeft.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.leftGroup.getGuid() && this.loggedInUser?.getUid() == item?.userLeft?.getUid()) {
this.group == item?.leftGroup;
this.ref.detectChanges();
this.updateSubtitle();
}
});
}
// unsubscribe to subscribed events.
unsubscribeToEvents() {
this.ccGroupMemberAdded?.unsubscribe();
this.ccGroupMemberBanned?.unsubscribe();
this.ccGroupMemberJoined?.unsubscribe();
this.ccGroupMemberKicked?.unsubscribe();
this.ccOwnershipChanged?.unsubscribe();
this.ccUserBlocked?.unsubscribe();
this.ccUserUnblocked?.unsubscribe();
this.ccGroupLeft?.unsubscribe();
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "transparent",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: "",
hoverBackground: "transparent"
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setStatusStyle() {
let defaultStyle = {
height: "12px",
width: "12px",
border: "none",
borderRadius: "24px",
};
if (!this.disableUsersPresence) {
this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
}
else {
this.statusIndicatorStyle = {};
}
}
getHeadersStyle() {
const defaultValues = this.messageHeaderStyle;
let defaultStyle = new MessageHeaderStyle({
background: defaultValues.background || this.themeService.theme.palette.getBackground(),
border: defaultValues.border || `none`,
onlineStatusColor: defaultValues.onlineStatusColor || this.themeService.theme.palette.getSuccess(),
privateGroupIconBackground: defaultValues.privateGroupIconBackground || this.themeService.theme.palette.getSuccess(),
passwordGroupIconBackground: defaultValues.passwordGroupIconBackground || "RGB(247, 165, 0)",
backButtonIconTint: defaultValues.backButtonIconTint || this.themeService.theme.palette.getPrimary(),
subtitleTextColor: defaultValues.subtitleTextColor || this.themeService.theme.palette.getAccent600(),
subtitleTextFont: defaultValues.subtitleTextFont || fontHelper(this.themeService.theme.typography.subtitle2),
typingIndicatorTextColor: defaultValues.typingIndicatorTextColor || this.themeService.theme.palette.getPrimary(),
typingIndicatorTextFont: defaultValues.typingIndicatorTextFont || fontHelper(this.themeService.theme.typography.subtitle1),
height: defaultValues.height || "45px",
width: defaultValues.width || "100%",
});
return defaultStyle;
}
onBackClicked() {
if (this.onBack) {
this.onBack();
}
}
updateSubtitle() {
const count = this.group?.getMembersCount();
const membersText = localize(count > 1 ? "MEMBERS" : "MEMBER");
if (this.user) {
let userStatusVisibility = this.user.getBlockedByMe() || this.user.getHasBlockedMe() || this.disableUsersPresence;
this.subtitleText = userStatusVisibility ? "" : this.user.getStatus();
this.ref.detectChanges();
}
else {
this.subtitleText = `${count} ${membersText}`;
this.ref.detectChanges();
}
}
getSubtitleView() {
return this.subtitleView(this.user || this.group);
}
checkGroupType() {
let image = "";
if (this.group) {
switch (this.group?.getType()) {
case CometChatUIKitConstants.GroupTypes.password:
image = this.passwordGroupIcon || this.protectedGroupIcon;
break;
case CometChatUIKitConstants.GroupTypes.private:
image = this.privateGroupIcon;
break;
default:
image = "";
break;
}
}
return image;
}
updateUserStatus(user) {
if (this.user && this.user.getUid() && this.user.getUid() === user.getUid()) {
this.user.setStatus(user.getStatus());
this.updateSubtitle();
}
// this.ref.detectChanges();
}
attachListeners() {
try {
CometChat.addUserListener(this.userListenerId, new CometChat.UserListener({
onUserOnline: (onlineUser) => {
/* when someuser/friend comes online, user will be received here */
this.updateUserStatus(onlineUser);
},
onUserOffline: (offlineUser) => {
/* when someuser/friend went offline, user will be received here */
this.updateUserStatus(offlineUser);
},
}));
if (this.user) {
this.ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe((item) => {
if (item.getUid() == this.user.getUid())
this.updateUserStatus(item);
});
this.ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe((item) => {
if (item.getUid() == this.user.getUid())
this.updateUserStatus(item);
});
}
if (!this.disableTyping) {
this.onTypingStarted = CometChatMessageEvents.onTypingStarted.subscribe((typingIndicator) => {
this.isTyping = true;
this.setTypingIndicatorText(typingIndicator);
});
this.onTypingEnded = CometChatMessageEvents.onTypingEnded.subscribe((typingIndicator) => {
this.isTyping = false;
this.updateSubtitle();
});
}
CometChat.addGroupListener(this.groupsListenerId, new CometChat.GroupListener({
onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
this.handleGroupEvent(changedGroup, changedUser, true, newScope);
},
onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
this.handleGroupEvent(kickedFrom, kickedUser, false);
},
onMemberAddedToGroup: (message, userAdded, userAddedBy, userAddedIn) => {
this.handleGroupEvent(userAddedIn, userAdded, true);
},
onGroupMemberLeft: (message, leavingUser, group) => {
this.handleGroupEvent(group, leavingUser, false);
},
onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
this.handleGroupEvent(joinedGroup, joinedUser, true);
}
}));
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
removeListener() {
CometChat.removeUserListener(this.userListenerId);
this.onTypingStarted?.unsubscribe();
this.onTypingEnded?.unsubscribe();
}
ngOnDestroy() {
this.removeListener();
this.unsubscribeToEvents();
}
}
CometChatMessageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatMessageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: { avatarStyle: "avatarStyle", statusIndicatorStyle: "statusIndicatorStyle", messageHeaderStyle: "messageHeaderStyle", listItemStyle: "listItemStyle", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", disableTyping: "disableTyping", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", privateGroupIcon: "privateGroupIcon", menu: "menu", user: "user", group: "group", backButtonIconURL: "backButtonIconURL", hideBackButton: "hideBackButton", listItemView: "listItemView", onError: "onError", onBack: "onBack" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-header__wrapper\" [ngStyle]=\"headerStyle()\">\n <div class=\"cc-message-header\">\n <div class=\"cc-message-header__back-button\" *ngIf=\"!hideBackButton\">\n <cometchat-button [iconURL]=\"backButtonIconURL\"\n [buttonStyle]=\"backButtonStyle\"\n (cc-button-clicked)=\"onBackClicked()\"></cometchat-button>\n </div>\n <div class=\"cc-message-header__listitem\">\n <cometchat-list-item *ngIf=\"!listItemView;else listitem\"\n [avatarName]=\"user?.getName() || this.group?.getName()\"\n [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\"\n [listItemStyle]=\"listItemStyle\"\n [statusIndicatorColor]=\"checkStatusType()\"\n [statusIndicatorIcon]=\"checkGroupType()\"\n [title]=\"this.user?.getName() || this.group?.getName()\"\n [hideSeparator]=\"true\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n [avatarStyle]=\"avatarStyle\">\n <div slot=\"subtitleView\">\n <div *ngIf=\"!subtitleView; else subtitle\">\n <cometchat-label [text]=\"subtitleText\"\n [labelStyle]=\"subtitleStyle()\">\n\n </cometchat-label>\n </div>\n <ng-template #subtitle>\n <ng-container\n *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n\n </ng-container>\n </ng-template>\n\n </div>\n </cometchat-list-item>\n <ng-template #listitem>\n <ng-container *ngTemplateOutlet=\"listItemView\">\n\n </ng-container>\n </ng-template>\n </div>\n </div>\n <div class=\"cc-message-header__menu\" *ngIf=\"menu\">\n <ng-container *ngTemplateOutlet=\"menu;context:{ $implicit: user ?? group }\">\n\n </ng-container>\n </div>\n</div>\n", styles: [".cc-message-header__wrapper{display:flex;align-items:center;justify-content:space-between;flex-direction:row;padding:8px;box-sizing:border-box}.cc-message-header__back-button{margin-right:8px}.cc-message-header{display:flex;align-items:center;justify-content:flex-start;height:100%;width:100%}.cc-message-header__listitem{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start}.cc-message-header__menu{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:flex-end;padding:12px}cometchat-list-item{width:100%}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'cometchat-message-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-header__wrapper\" [ngStyle]=\"headerStyle()\">\n <div class=\"cc-message-header\">\n <div class=\"cc-message-header__back-button\" *ngIf=\"!hideBackButton\">\n <cometchat-button [iconURL]=\"backButtonIconURL\"\n [buttonStyle]=\"backButtonStyle\"\n (cc-button-clicked)=\"onBackClicked()\"></cometchat-button>\n </div>\n <div class=\"cc-message-header__listitem\">\n <cometchat-list-item *ngIf=\"!listItemView;else listitem\"\n [avatarName]=\"user?.getName() || this.group?.getName()\"\n [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\"\n [listItemStyle]=\"listItemStyle\"\n [statusIndicatorColor]=\"checkStatusType()\"\n [statusIndicatorIcon]=\"checkGroupType()\"\n [title]=\"this.user?.getName() || this.group?.getName()\"\n [hideSeparator]=\"true\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n [avatarStyle]=\"avatarStyle\">\n <div slot=\"subtitleView\">\n <div *ngIf=\"!subtitleView; else subtitle\">\n <cometchat-label [text]=\"subtitleText\"\n [labelStyle]=\"subtitleStyle()\">\n\n </cometchat-label>\n </div>\n <ng-template #subtitle>\n <ng-container\n *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n\n </ng-container>\n </ng-template>\n\n </div>\n </cometchat-list-item>\n <ng-template #listitem>\n <ng-container *ngTemplateOutlet=\"listItemView\">\n\n </ng-container>\n </ng-template>\n </div>\n </div>\n <div class=\"cc-message-header__menu\" *ngIf=\"menu\">\n <ng-container *ngTemplateOutlet=\"menu;context:{ $implicit: user ?? group }\">\n\n </ng-container>\n </div>\n</div>\n", styles: [".cc-message-header__wrapper{display:flex;align-items:center;justify-content:space-between;flex-direction:row;padding:8px;box-sizing:border-box}.cc-message-header__back-button{margin-right:8px}.cc-message-header{display:flex;align-items:center;justify-content:flex-start;height:100%;width:100%}.cc-message-header__listitem{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start}.cc-message-header__menu{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:flex-end;padding:12px}cometchat-list-item{width:100%}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { avatarStyle: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], messageHeaderStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], subtitleView: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], disableTyping: [{
type: Input
}], protectedGroupIcon: [{
type: Input
}], passwordGroupIcon: [{
type: Input
}], privateGroupIcon: [{
type: Input
}], menu: [{
type: Input
}], user: [{
type: Input
}], group: [{
type: Input
}], backButtonIconURL: [{
type: Input
}], hideBackButton: [{
type: Input
}], listItemView: [{
type: Input
}], onError: [{
type: Input
}], onBack: [{
type: Input
}] } });
class CometChatMessageHeader {
}
CometChatMessageHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageHeader, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatMessageHeader.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageHeader, declarations: [CometChatMessageHeaderComponent], imports: [CommonModule], exports: [CometChatMessageHeaderComponent] });
CometChatMessageHeader.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageHeader, providers: [DatePipe], imports: [[
CommonModule,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageHeader, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatMessageHeaderComponent],
imports: [
CommonModule,
],
exports: [CometChatMessageHeaderComponent],
providers: [DatePipe],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatUsers {
}
CometChatUsers.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsers, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatUsers.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsers, declarations: [CometChatUsersComponent], imports: [CommonModule,
FormsModule,
CometChatList], exports: [CometChatUsersComponent] });
CometChatUsers.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsers, imports: [[
CommonModule,
FormsModule,
CometChatList
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsers, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatUsersComponent],
imports: [
CommonModule,
FormsModule,
CometChatList
],
exports: [CometChatUsersComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatAddMembers {
}
CometChatAddMembers.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatAddMembers, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatAddMembers.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatAddMembers, declarations: [CometChatAddMembersComponent], imports: [CommonModule, FormsModule, CometChatMessageHeader, CometChatUsers], exports: [CometChatAddMembersComponent] });
CometChatAddMembers.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatAddMembers, imports: [[CommonModule, FormsModule, CometChatMessageHeader, CometChatUsers]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatAddMembers, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatAddMembersComponent],
imports: [CommonModule, FormsModule, CometChatMessageHeader, CometChatUsers],
exports: [CometChatAddMembersComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
/**
*
* CometChatBannedMembersComponent is used to render list of banned members
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatBannedMembersComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.disableUsersPresence = true;
this.backButtonIconURL = "assets/backbutton.svg";
this.closeButtonIconURL = "assets/close2x.svg";
this.showBackButton = true;
this.hideSeparator = false;
this.selectionMode = SelectionMode.none;
this.searchPlaceholder = "Search Members";
this.searchIconURL = "assets/search.svg";
this.hideSearch = true;
this.title = localize("BANNED_MEMBERS");
this.onError = (error) => {
console.log(error);
};
this.loadingIconURL = "assets/Spinner.svg";
this.emptyStateText = localize("NO_BANNED_MEMBERS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.titleAlignment = TitleAlignment.center;
this.unbanIconURL = "assets/close2x.svg";
this.statusIndicatorStyle = {
height: "10px",
width: "10px",
borderRadius: "16px",
border: ""
};
this.menuListStyle = {
width: "",
height: "",
border: "none",
borderRadius: "8px",
background: "white",
textFont: "400 15px Inter",
textColor: "black",
iconTint: "rgb(51, 153, 255)",
iconBackground: "transparent",
iconBorder: "none",
iconBorderRadius: "0",
submenuWidth: "100%",
submenuHeight: "100%",
submenuBorder: "1px solid #e8e8e8",
submenuBorderRadius: "8px",
submenuBackground: "white",
};
this.unbanIconStyle = {
border: "none",
background: "transparent",
buttonIconTint: "rgb(51, 153, 255)"
};
this.titleAlignmentEnum = TitleAlignment;
this.selectionmodeEnum = SelectionMode;
this.avatarStyle = {
borderRadius: "16px",
width: "32px",
height: "32px",
};
this.bannedMembersStyle = {
width: "100%",
height: "100%",
background: "",
border: "",
borderRadius: "",
padding: "0 100px"
};
this.listItemStyle = {
height: "100%",
width: "100%",
background: "",
activeBackground: "transparent",
borderRadius: "grey",
titleFont: "",
titleColor: "",
border: "",
hoverBackground: "transparent",
separatorColor: "rgb(222 222 222 / 46%)"
};
this.searchKeyword = "";
this.listStyle = new ListStyle({});
this.limit = 30;
this.state = States.loading;
this.bannedMembers = [];
this.scopes = [];
this.membersListenerId = "bannedMembers_" + new Date().getTime();
this.membersList = [];
this.onScrolledToBottom = null;
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: "#2196F3",
uncheckedBackgroundColor: "#ccc"
};
/**
* @param {CometChat.GroupMember} member
*/
this.getStatusIndicatorColor = (member) => {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(member) || this.disableUsersPresence;
if (!userStatusVisibility) {
return this.bannedMembersStyle.onlineStatusColor ?? this.themeService.theme.palette.getSuccess();
}
return null;
};
this.unBanMember = (member) => {
CometChat.unbanGroupMember(this.group.getGuid(), member.getUid()).then(() => {
CometChatGroupEvents.ccGroupMemberUnbanned.next({
unbannedBy: this.loggedInUser,
unbannedFrom: this.group,
unbannedUser: member
});
this.updateMember(member);
}).catch((err) => {
if (this.onError) {
this.onError(err);
}
});
};
/**
* @param {CometChat.User} member
*/
this.updateMember = (member) => {
let memberlist = [...this.bannedMembers];
//search for user
let userKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
//if found in the list, update user object
if (userKey > -1) {
memberlist.splice(userKey, 1);
this.bannedMembers = [...memberlist];
this.ref.detectChanges();
}
else {
memberlist.push(member);
this.bannedMembers = [...memberlist];
this.ref.detectChanges();
}
};
/**
* @param {CometChat.User} member
*/
this.updateMemberStatus = (member) => {
let memberlist = [...this.bannedMembers];
//search for user
let userKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
//if found in the list, update user object
if (userKey > -1) {
let user = memberlist[userKey];
user.setStatus(member.getStatus());
memberlist.splice(userKey, 1, user);
this.bannedMembers = [...memberlist];
this.ref.detectChanges();
}
};
this.fetchNextBannedMembers = () => {
this.onScrolledToBottom = null;
if (this.bannedMembersRequest && this.bannedMembersRequest.pagination && (this.bannedMembersRequest.pagination.current_page == 0 || this.bannedMembersRequest.pagination.current_page != this.bannedMembersRequest.pagination.total_pages)) {
this.onScrolledToBottom = this.fetchNextBannedMembers;
this.state = States.loading;
this.ref.detectChanges();
try {
this.bannedMembersRequest.fetchNext().then((bannedMembers) => {
this.state = States.loading;
if ((bannedMembers.length <= 0 && this.bannedMembers?.length <= 0) || (bannedMembers.length === 0 && this.bannedMembers?.length <= 0)) {
this.state = States.empty;
this.ref.detectChanges();
}
else {
this.state = States.loaded;
this.bannedMembers = [...this.bannedMembers, ...bannedMembers];
this.ref.detectChanges();
}
}, (error) => {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.ref.detectChanges();
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.ref.detectChanges();
}
}
else {
this.state = States.loaded;
}
};
/**
* @param {string} key
*/
this.onSearch = (key) => {
try {
this.searchKeyword = key;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
const request = this.searchRequestBuilder ? this.searchRequestBuilder.setSearchKeyword(this.searchKeyword).build() : this.getRequestBuilder();
this.bannedMembersRequest = request;
this.bannedMembers = [];
this.fetchNextBannedMembers();
}, 500);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
this.membersStyles = () => {
return {
padding: this.bannedMembersStyle.padding
};
};
// styles
this.backButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.bannedMembersStyle.backButtonIconTint || this.themeService.theme.palette.getPrimary()
};
};
this.closeButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.bannedMembersStyle.closeButtonIconTint || this.themeService.theme.palette.getPrimary()
};
};
this.wrapperStyle = () => {
return {
height: this.bannedMembersStyle.height,
width: this.bannedMembersStyle.width,
background: this.bannedMembersStyle.background,
border: this.bannedMembersStyle.border,
borderRadius: this.bannedMembersStyle.borderRadius
};
};
}
ngOnInit() {
this.attachListeners();
this.onScrolledToBottom = this.fetchNextBannedMembers;
this.setThemeStyle();
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
this.bannedMembersRequest = this.getRequestBuilder();
this.fetchNextBannedMembers();
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
backClicked() {
if (this.onBack) {
this.onBack();
}
}
closeClicked() {
if (this.onClose) {
this.onClose();
}
}
onMembersSelected(member, event) {
let selected = event.detail.checked;
if (this.onSelect) {
this.onSelect(member, selected);
}
}
attachListeners() {
//Attaching User Listeners to dynamilcally update when a user comes online and goes offline
CometChat.addUserListener(this.membersListenerId, new CometChat.UserListener({
onUserOnline: (onlineUser) => {
/* when someuser/friend comes online, user will be received here */
this.updateMemberStatus(onlineUser);
},
onUserOffline: (offlineUser) => {
/* when someuser/friend went offline, user will be received here */
this.updateMemberStatus(offlineUser);
},
}));
CometChat.addGroupListener(this.membersListenerId, new CometChat.GroupListener({
onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
this.updateMember(bannedUser);
},
onGroupMemberUnbanned: (message, unbannedUser, unbannedBy, unbannedFrom) => {
this.updateMember(unbannedUser);
},
}));
}
removeListener() {
CometChat.removeUserListener(this.membersListenerId);
this.membersListenerId = "";
}
getRequestBuilder() {
if (this.searchRequestBuilder) {
return this.searchRequestBuilder.build();
}
else if (this.bannedMembersRequestBuilder) {
return this.bannedMembersRequestBuilder.build();
}
else {
return new CometChat.BannedMembersRequestBuilder(this.group?.getGuid())
.setLimit(this.limit)
.setSearchKeyword(this.searchKeyword)
.build();
}
}
subscribeToEvents() {
this.ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
if (item?.kickedFrom?.getGuid() == this.group.getGuid()) {
this.updateMember(item?.kickedUser);
}
});
}
// unsubscribe to subscribed events.
unsubscribeToEvents() {
this.ccGroupMemberBanned.unsubscribe();
}
setThemeStyle() {
this.setBanMembersStyle();
this.setListItemStyle();
this.setAvatarStyle();
this.setStatusStyle();
this.menuListStyle.background = this.themeService.theme.palette.getBackground();
this.menuListStyle.iconBackground = this.themeService.theme.palette.getBackground();
this.menuListStyle.iconTint = this.themeService.theme.palette.getAccent400();
this.menuListStyle.submenuBackground = this.themeService.theme.palette.getBackground();
this.menuListStyle.textFont = fontHelper(this.themeService.theme.typography.caption1);
this.menuListStyle.textColor = this.themeService.theme.palette.getAccent500();
this.unbanIconStyle.buttonIconTint = this.bannedMembersStyle.unbanIconTint;
}
setBanMembersStyle() {
let defaultStyle = new BannedMembersStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
separatorColor: this.themeService.theme.palette.getAccent400(),
width: "100%",
height: "100%",
borderRadius: "none",
searchIconTint: this.themeService.theme.palette.getAccent600(),
searchPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
searchBackground: this.themeService.theme.palette.getAccent100(),
searchPlaceholderTextFont: fontHelper(this.themeService.theme.typography.text3),
searchTextColor: this.themeService.theme.palette.getAccent600(),
searchTextFont: fontHelper(this.themeService.theme.typography.text3),
searchBorderRadius: "8px",
closeButtonIconTint: this.themeService.theme.palette.getPrimary(),
backButtonIconTint: this.themeService.theme.palette.getPrimary(),
padding: "0 100px",
unbanIconTint: this.themeService.theme.palette.getPrimary()
});
this.bannedMembersStyle = { ...defaultStyle, ...this.bannedMembersStyle };
this.listStyle = {
titleTextFont: this.bannedMembersStyle.titleTextFont,
titleTextColor: this.bannedMembersStyle.titleTextColor,
emptyStateTextFont: this.bannedMembersStyle.emptyStateTextFont,
emptyStateTextColor: this.bannedMembersStyle.emptyStateTextColor,
errorStateTextFont: this.bannedMembersStyle.errorStateTextFont,
errorStateTextColor: this.bannedMembersStyle.errorStateTextColor,
loadingIconTint: this.bannedMembersStyle.loadingIconTint,
separatorColor: this.bannedMembersStyle.separatorColor,
searchIconTint: this.bannedMembersStyle.searchIconTint,
searchBorder: this.bannedMembersStyle.searchBorder,
searchBorderRadius: this.bannedMembersStyle.searchBorderRadius,
searchBackground: this.bannedMembersStyle.searchBackground,
searchPlaceholderTextFont: this.bannedMembersStyle.searchPlaceholderTextFont,
searchPlaceholderTextColor: this.bannedMembersStyle.searchPlaceholderTextColor,
searchTextFont: this.bannedMembersStyle.searchTextFont,
searchTextColor: this.bannedMembersStyle.searchTextColor,
};
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
};
}
setStatusStyle() {
let defaultStyle = {
height: "12px",
width: "12px",
border: "none",
borderRadius: "24px",
};
this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: ""
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
}
CometChatBannedMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatBannedMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatBannedMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: { bannedMembersRequestBuilder: "bannedMembersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onSelect: "onSelect", onBack: "onBack", onClose: "onClose", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", unbanIconURL: "unbanIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", bannedMembersStyle: "bannedMembersStyle", listItemStyle: "listItemStyle" }, ngImport: i0, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-banned-members__back\">\n <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\" (cc-button-clicked)=\"backClicked()\" >\n\n </cometchat-button>\n </div>\n <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n </div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [title]=\"title\"\n\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-bannedMember>\n <cometchat-list-item [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [statusIndicatorColor]=\"getStatusIndicatorColor(bannedMember)\" [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <div slot=\"menuView\" *ngIf=\"options\">\n <cometchat-menu-list [data]=\"options(bannedMember)\" [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n </div>\n <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n <ng-template #changeScope>\n <div slot=\"tailView\">\n <div class=\"cc-banned-members__unban\">\n <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n </cometchat-button>\n </div>\n </div>\n </ng-template>\n </cometchat-list-item>\n <ng-template #tailView>\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-radio-button>\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-checkbox>\n </div>\n </ng-template>\n </ng-template>\n </div>\n <div class=\"cc-close-button\">\n <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n </cometchat-button>\n </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatBannedMembersComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-banned-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-banned-members__back\">\n <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\" (cc-button-clicked)=\"backClicked()\" >\n\n </cometchat-button>\n </div>\n <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n </div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [title]=\"title\"\n\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-bannedMember>\n <cometchat-list-item [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [statusIndicatorColor]=\"getStatusIndicatorColor(bannedMember)\" [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <div slot=\"menuView\" *ngIf=\"options\">\n <cometchat-menu-list [data]=\"options(bannedMember)\" [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n </div>\n <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n <ng-template #changeScope>\n <div slot=\"tailView\">\n <div class=\"cc-banned-members__unban\">\n <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n </cometchat-button>\n </div>\n </div>\n </ng-template>\n </cometchat-list-item>\n <ng-template #tailView>\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-radio-button>\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMembersSelected(bannedMember,$event)\"></cometchat-checkbox>\n </div>\n </ng-template>\n </ng-template>\n </div>\n <div class=\"cc-close-button\">\n <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n </cometchat-button>\n </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { bannedMembersRequestBuilder: [{
type: Input
}], searchRequestBuilder: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], menu: [{
type: Input
}], options: [{
type: Input
}], backButtonIconURL: [{
type: Input
}], closeButtonIconURL: [{
type: Input
}], showBackButton: [{
type: Input
}], hideSeparator: [{
type: Input
}], selectionMode: [{
type: Input
}], searchPlaceholder: [{
type: Input
}], searchIconURL: [{
type: Input
}], hideSearch: [{
type: Input
}], title: [{
type: Input
}], onError: [{
type: Input
}], onSelect: [{
type: Input
}], onBack: [{
type: Input
}], onClose: [{
type: Input
}], group: [{
type: Input
}], emptyStateView: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingIconURL: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], titleAlignment: [{
type: Input
}], unbanIconURL: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], avatarStyle: [{
type: Input
}], bannedMembersStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}] } });
class CometChatBannedMembers {
}
CometChatBannedMembers.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatBannedMembers, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatBannedMembers.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatBannedMembers, declarations: [CometChatBannedMembersComponent], imports: [CommonModule, FormsModule, CometChatMessageHeader, CometChatUsers, CometChatList], exports: [CometChatBannedMembersComponent] });
CometChatBannedMembers.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatBannedMembers, imports: [[CommonModule, FormsModule, CometChatMessageHeader, CometChatUsers, CometChatList]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatBannedMembers, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatBannedMembersComponent],
imports: [CommonModule, FormsModule, CometChatMessageHeader, CometChatUsers, CometChatList],
exports: [CometChatBannedMembersComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
/**
*
* CometChatConversation is a wrapper component consists of CometChatListBaseComponent and ConversationListComponent.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatConversationsComponent {
constructor(ngZone, ref, themeService, sanitizer) {
this.ngZone = ngZone;
this.ref = ref;
this.themeService = themeService;
this.sanitizer = sanitizer;
this.title = localize("CHATS"); //Title of the component
this.searchPlaceHolder = localize("SEARCH"); // placeholder text of search input
this.disableUsersPresence = false;
/**
* @deprecated
*
* This property is deprecated as of version 4.3.16 due to newer property 'hideReceipt'. It will be removed in subsequent versions.
*/
this.disableReceipt = false;
this.hideReceipt = false;
this.disableTyping = false;
this.deliveredIcon = "assets/message-delivered.svg";
this.readIcon = "assets/message-read.svg";
this.errorIcon = "assets/warning-small.svg";
this.datePattern = DatePatterns.DayDateTime;
this.onError = (error) => {
console.log(error);
};
this.sentIcon = "assets/message-sent.svg";
this.privateGroupIcon = "assets/Private.svg";
/**
* @deprecated
*
* This property is deprecated as of version 4.3.7 due to newer property 'passwordGroupIcon'. It will be removed in subsequent versions.
*/
this.protectedGroupIcon = "assets/Locked.svg";
this.passwordGroupIcon = undefined;
this.customSoundForMessages = "";
this.activeConversation = null; //selected conversation
this.searchIconURL = "assets/search.svg"; //image URL of the search icon
this.hideSearch = true; //switch on/ff search input
this.loadingIconURL = "assets/Spinner.svg";
this.emptyStateText = localize("NO_CHATS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.titleAlignment = TitleAlignment.left;
this.hideSeparator = false;
this.searchPlaceholder = localize("SEARCH");
this.hideError = false;
this.selectionMode = SelectionMode.none;
this.disableSoundForMessages = false;
this.confirmDialogTitle = localize("DELETE_CONVERSATION");
this.confirmButtonText = localize("DELETE");
this.cancelButtonText = localize("CANCEL");
this.confirmDialogMessage = localize("WOULD__YOU_LIKE_TO_DELETE_THIS_CONVERSATION");
this.deleteConversationDialogStyle = new ConfirmDialogStyle({
confirmButtonBackground: this.themeService.theme.palette.getError(),
cancelButtonBackground: this.themeService.theme.palette.getSecondary(),
confirmButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
confirmButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
cancelButtonTextColor: this.themeService.theme.palette.getAccent900("dark"),
cancelButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
messageTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
messageTextColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
height: "100%",
width: "100%",
borderRadius: "8px",
});
this.backdropStyle = {
height: "100%",
width: "100%",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed",
};
this.badgeStyle = {
width: "25px",
height: "15px",
background: "#5aaeff",
textColor: "white",
textFont: "400 13px Inter, sans-serif",
borderRadius: "16px",
};
this.dateStyle = {
textFont: "400 11px Inter, sans-serif",
textColor: "rgba(20, 20, 20, 0.58)",
};
this.conversationsStyle = {
width: "",
height: "",
border: "",
borderRadius: "",
};
this.listItemStyle = {
height: "97%",
width: "100%",
};
this.statusIndicatorStyle = {
height: "10px",
width: "10px",
borderRadius: "16px",
};
this.typingIndicatorText = localize("IS_TYPING");
this.threadIndicatorText = localize("IN_A_THREAD");
this.avatarStyle = {};
this.receiptStyle = {};
this.iconStyle = {
iconTint: "lightgrey",
height: "20px",
width: "20px",
};
this.listStyle = new ListStyle({});
this.menustyle = {
width: "",
height: "",
border: "none",
borderRadius: "8px",
background: "transparent",
textFont: "",
textColor: "black",
iconTint: "grey",
iconBackground: "transparent",
iconBorder: "none",
iconBorderRadius: "0",
submenuWidth: "70px",
submenuHeight: "20px",
submenuBorder: "1px solid #e8e8e8",
submenuBorderRadius: "8px",
submenuBackground: "white",
};
this.typingListenerId = "conversation__LISTENER" + new Date().getTime();
this.callListenerId = "call_" + new Date().getTime();
this.connectionListenerId = "connection_" + new Date().getTime();
this.selectionmodeEnum = SelectionMode;
this.isDialogOpen = false;
this.isEmpty = false;
this.isLoading = true;
this.state = States.loading;
this.statusColor = {
online: "",
private: "",
password: "#F7A500",
public: "",
};
this.limit = 30;
this.isError = false;
this.conversationList = [];
this.scrolledToBottom = false;
this.checkItemChange = false;
this.showConfirmDialog = false;
this.conversationToBeDeleted = null;
this.userListenerId = "chatlist_user_" + new Date().getTime();
this.groupListenerId = "chatlist_group_" + new Date().getTime();
this.groupToUpdate = {};
this.conversationType = undefined;
this.enablePolls = false;
this.enableStickers = false;
this.enableWhiteboard = false;
this.enableDocument = false;
this.threadIconURL = "assets/thread-arrow.svg";
this.confirmDialogStyle = {
height: "100%",
width: "100%",
borderRadius: "8px",
};
this.modalStyle = {
height: "230px",
width: "270px",
};
this.firstReload = false;
this.isActive = true;
this.contactsNotFound = false;
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: "#2196F3",
uncheckedBackgroundColor: "#ccc"
};
/**
* Properties for internal use
*/
this.localize = localize;
//To be enabled in UMC
// @Input() mentionsIconURL!: string;
this.disableMentions = false;
/**
* Properties for internal use
*/
/**
* passing this callback to menuList component on delete click
* @param {CometChat.Conversation} conversation
*/
this.deleteConversationOnClick = () => {
this.showConfirmationDialog(this.conversationToBeDeleted);
};
// callback for confirmDialogComponent
this.onConfirmClick = () => {
this.deleteSelectedConversation();
};
this.getStatusIndicatorStyle = (conversation) => {
const convWith = conversation.getConversationWith();
if (convWith instanceof CometChat.User) {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(convWith);
if (!this.disableUsersPresence && !userStatusVisibility) {
return this.statusIndicatorStyle;
}
return null;
}
else if (conversation.getConversationType() === CometChatUIKitConstants.MessageReceiverType.group) {
return {
height: "12px",
width: "12px",
borderRadius: "16px",
};
}
else {
return null;
}
};
this.setSubtitle = (conversationObject) => {
if (this.typingIndicator) {
const isTyping = conversationObject?.conversationWith?.guid ==
this.typingIndicator.getReceiverId();
if (isTyping) {
return `${this.typingIndicator.getSender().getName()} ${this.typingIndicatorText}`;
}
else if (conversationObject?.conversationWith?.uid ==
this.typingIndicator?.getSender().getUid() &&
this.typingIndicator.getReceiverType() !==
CometChatUIKitConstants.MessageReceiverType.group) {
return this.typingIndicatorText;
}
}
let subtitle = ChatConfigurator.getDataSource().getLastConversationMessage(conversationObject, this.loggedInUser, {
disableMentions: this.disableMentions,
theme: this.themeService.theme,
mentionsTargetElement: MentionsTargetElement.conversation,
textFormatters: this.textFormatters
});
let icon = conversationObject?.getLastMessage()?.getType() ==
CometChatUIKitConstants.MessageTypes.audio
? "📞 "
: "📹 ";
return this.sanitizer.bypassSecurityTrustHtml(conversationObject?.getLastMessage()?.getCategory() ==
CometChatUIKitConstants.MessageCategory.call
? icon + subtitle
: subtitle);
};
// callback for confirmDialogComponent
this.onCancelClick = () => {
this.isDialogOpen = false;
this.conversationToBeDeleted = null;
this.ref.detectChanges();
};
this.getMessageReceipt = (conversation) => {
let receipt = MessageReceiptUtils.getReceiptStatus(conversation.getLastMessage());
return receipt;
};
this.optionsStyle = {
background: "transparent",
border: "none",
};
/**
* Fetches Conversations Details with all the users
*/
this.getConversation = (states = States.loading) => {
if (this.requestBuilder &&
this.requestBuilder.pagination &&
(this.requestBuilder.pagination.current_page == 0 ||
this.requestBuilder.pagination.current_page !=
this.requestBuilder.pagination.total_pages)) {
try {
this.state = states;
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
this.fetchNextConversation()
.then((conversationList) => {
conversationList.forEach((conversation) => {
if (this.activeConversation &&
this.activeConversation !== null &&
this.activeConversation.getConversationType() ===
conversation.getConversationType()) {
if (this.activeConversation.getConversationId() ==
conversation.getConversationId()) {
conversation.setUnreadMessageCount(0);
//conversation.setUnreadMentionInMessageCount(0);
}
}
});
if (states == States.loaded) {
this.conversationList = [...conversationList];
}
else {
this.conversationList = [
...this.conversationList,
...conversationList,
];
}
if (conversationList.length <= 0 &&
this.conversationList?.length <= 0) {
this.ngZone.run(() => {
if (this.state != States.empty) {
this.state = States.empty;
this.ref.detectChanges();
}
this.ref.detach(); // Detach the change detector
});
}
else {
this.ngZone.run(() => {
this.ref.detectChanges();
if (this.state != States.loaded) {
this.state = States.loaded;
this.ref.detectChanges();
}
this.ref.detach(); // Detach the change detector
});
}
if (this.firstReload) {
this.attachConnectionListeners();
this.firstReload = false;
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
if (this.conversationList?.length <= 0) {
this.state = States.error;
this.ref.detectChanges();
}
});
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
this.state = States.error;
this.ref.detectChanges();
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
};
/**
* Updates the conversation list's last message , badgeCount , user presence based on activities propagated by listeners
*/
this.conversationUpdated = (key, item = null, message, options = null) => {
try {
switch (key) {
case CometChatUIKitConstants.userStatusType.online:
case CometChatUIKitConstants.userStatusType.offline: {
this.updateUser(item);
break;
}
case CometChatUIKitConstants.messages.MESSAGE_READ: {
this.updateConversation(message, false);
break;
}
case CometChatUIKitConstants.messages.MESSAGE_DELIVERED: {
this.updateConversation(message, false);
break;
}
case CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED:
case CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED:
case CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED:
case CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED:
if (!this.disableReceipt) {
this.markMessageAsDelivered(message);
}
this.updateConversation(message);
break;
case CometChatUIKitConstants.groupMemberAction.ADDED:
case CometChatUIKitConstants.groupMemberAction.BANNED:
case CometChatUIKitConstants.groupMemberAction.JOINED:
case CometChatUIKitConstants.groupMemberAction.KICKED:
case CometChatUIKitConstants.groupMemberAction.LEFT:
case CometChatUIKitConstants.groupMemberAction.UNBANNED:
case CometChatUIKitConstants.groupMemberAction.SCOPE_CHANGE:
this.updateConversation(message);
break;
case CometChatUIKitConstants.messages.MESSAGE_EDITED:
case CometChatUIKitConstants.messages.MESSAGE_DELETED:
this.conversationEditedDeleted(message);
break;
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
/**
* @param {CometChat.BaseMessage} message
*/
this.markMessageAsDelivered = (message) => {
if (!message.hasOwnProperty("deliveredAt")) {
CometChat.markAsDelivered(message);
}
};
/**
* @param {CometChat.BaseMessage} readMessage
*/
this.getUinx = () => {
return String(Math.round(+new Date() / 1000));
};
/**
* showing dialog for confirm and cancel
* @param {CometChat.Conversation|{}} conversation
*/
this.showConfirmationDialog = (conversation) => {
this.isDialogOpen = true;
this.conversationToBeDeleted = conversation;
this.ref.detectChanges();
};
this.styles = {
wrapperStyle: () => {
return {
height: this.conversationsStyle.height,
width: this.conversationsStyle.width,
border: this.conversationsStyle.border ||
`1px solid ${this.themeService.theme.palette.getAccent400()}`,
borderRadius: this.conversationsStyle.borderRadius,
background: this.conversationsStyle.background ||
this.themeService.theme.palette.getBackground(),
};
},
};
this.subtitleStyle = (conversation) => {
if (this.typingIndicator &&
((this.typingIndicator.getReceiverType() ==
CometChatUIKitConstants.MessageReceiverType.user &&
this.typingIndicator.getSender().getUid() ==
conversation.conversationWith?.uid) ||
this.typingIndicator.getReceiverId() ==
conversation.conversationWith?.guid)) {
return {
font: this.conversationsStyle.typingIndictorTextColor,
color: this.conversationsStyle.typingIndictorTextColor,
};
}
return {
font: this.conversationsStyle.lastMessageTextFont,
color: this.conversationsStyle.lastMessageTextColor,
};
};
this.itemThreadIndicatorStyle = () => {
return {
textFont: this.conversationsStyle.threadIndicatorTextFont ||
fontHelper(this.themeService.theme.typography.caption2),
textColor: this.conversationsStyle.threadIndicatorTextColor ||
this.themeService.theme.palette.getAccent400(),
};
};
}
onConversationSelected(conversation, event) {
let selected = event.detail.checked;
if (this.onSelect) {
this.onSelect(conversation, selected);
}
}
//To be enabled in UMC
// getMentionIconStyle(): IconStyle {
// return new IconStyle({
// height: "16px",
// width: "16px",
// iconTint:
// this.conversationsStyle?.mentionIconTint ??
// this.themeService.theme.palette.getPrimary(),
// });
// }
/**
* @param {CometChat.Conversation} conversation
*/
checkStatusType(conversation) {
let item = conversation.getConversationWith();
if (item instanceof CometChat.User) {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(item) || this.disableUsersPresence;
if (!userStatusVisibility)
return this.statusColor[item?.getStatus()];
else
return null;
}
else {
return this.statusColor[item?.getType()];
}
}
getExtensionData(messageObject) {
let messageText;
//xss extensions data
const xssData = CometChatUIKitUtility.checkMessageForExtensionsData(messageObject, "xss-filter");
if (xssData &&
CometChatUIKitUtility.checkHasOwnProperty(xssData, "sanitized_text") &&
CometChatUIKitUtility.checkHasOwnProperty(xssData, "hasXSS") &&
xssData.hasXSS === "yes") {
messageText = xssData.sanitized_text;
}
//datamasking extensions data
const maskedData = CometChatUIKitUtility.checkMessageForExtensionsData(messageObject, "data-masking");
if (maskedData &&
CometChatUIKitUtility.checkHasOwnProperty(maskedData, "data") &&
CometChatUIKitUtility.checkHasOwnProperty(maskedData.data, "sensitive_data") &&
CometChatUIKitUtility.checkHasOwnProperty(maskedData.data, "message_masked") &&
maskedData.data.sensitive_data === "yes") {
messageText = maskedData.data.message_masked;
}
//profanity extensions data
const profaneData = CometChatUIKitUtility.checkMessageForExtensionsData(messageObject, "profanity-filter");
if (profaneData &&
CometChatUIKitUtility.checkHasOwnProperty(profaneData, "profanity") &&
CometChatUIKitUtility.checkHasOwnProperty(profaneData, "message_clean") &&
profaneData.profanity === "yes") {
messageText = profaneData.message_clean;
}
return messageText || messageObject.text;
}
//To be enabled in UMC
// getUnreadMentionsIconStyle() {
// return {
// paddingRight: "3px",
// };
// }
checkGroupType(conversation) {
let image = "";
if (conversation.getConversationType() ==
CometChatUIKitConstants.MessageReceiverType.group) {
let group = conversation.getConversationWith();
switch (group.getType()) {
case CometChatUIKitConstants.GroupTypes.password:
image = this.passwordGroupIcon || this.protectedGroupIcon;
break;
case CometChatUIKitConstants.GroupTypes.private:
image = this.privateGroupIcon;
break;
default:
image = "";
break;
}
}
return image;
}
getDate() {
return this.datePattern ?? DatePatterns.DayDateTime;
}
ngOnInit() {
this.firstReload = true;
if (!this.conversationsRequestBuilder) {
this.conversationsRequestBuilder =
new CometChat.ConversationsRequestBuilder()
.setLimit(this.limit);
}
this.setConversationOptions();
this.setThemeStyle();
this.subscribeToEvents();
this.attachListeners(this.conversationUpdated);
this.requestBuilder = this.conversationsRequestBuilder.build();
if (this.requestBuilder?.getConversationType()) {
this.conversationType = this.requestBuilder.getConversationType();
}
this.getConversation();
}
/**
* Determines if the last message should trigger an update based on its category and type.
*
* @param message - The last message sent or received in the conversation.
* @returns {boolean} - Returns true if the message should trigger an update, false otherwise.
*/
checkIfLastMessageShouldUpdate(message) {
if (this.conversationType && this.conversationType != message.getReceiverType()) {
return false;
}
// Checking if the message is a custom message
let isCustomMessage = message?.getCategory() === CometChatUIKitConstants.MessageCategory.custom;
// Check if the message is a reply to another message
if (message?.getParentMessageId() && !CometChatUIKit.conversationUpdateSettings?.shouldUpdateOnMessageReplies()) {
return false;
}
if (isCustomMessage) {
if (message?.getParentMessageId() && CometChatUIKit.conversationUpdateSettings?.shouldUpdateOnMessageReplies() && this.shouldIncrementForCustomMessage(message)) {
return true;
}
return this.shouldIncrementForCustomMessage(message);
}
// Check if the message is an action message
if (message?.getCategory() === CometChatUIKitConstants.MessageCategory.action) {
// Check if the message is a group member action
if (message?.getType() === CometChatUIKitConstants.MessageTypes.groupMember) {
return CometChatUIKit.conversationUpdateSettings?.shouldUpdateOnGroupActions();
}
// By default, action messages should trigger an update
return true;
}
// Check if the message is a call (either audio or video)
if (message?.getCategory() === CometChatUIKitConstants.MessageCategory.call &&
(message?.getType() === CometChatUIKitConstants.MessageTypes.audio ||
message.getType() === CometChatUIKitConstants.MessageTypes.video)) {
return CometChatUIKit.conversationUpdateSettings?.shouldUpdateOnCallActivities();
}
// By default, messages should trigger an update
return true;
}
shouldIncrementForCustomMessage(message) {
const metadata = message.getMetadata();
// Checking if the custom message should increment the unread message counter
return message.willUpdateConversation()
|| (metadata && metadata.hasOwnProperty("incrementUnreadCount") && metadata.incrementUnreadCount) || CometChatUIKit.conversationUpdateSettings?.shouldUpdateOnCustomMessages();
}
attachConnectionListeners() {
CometChat.addConnectionListener(this.connectionListenerId, new CometChat.ConnectionListener({
onConnected: () => {
console.log("ConnectionListener =>connected");
this.fetchNewConversations();
},
inConnecting: () => {
console.log("ConnectionListener => In connecting");
},
onDisconnected: () => {
console.log("ConnectionListener => On Disconnected");
},
}));
}
updateConversationObject(conversation) {
if (conversation.getLastMessage() && this.checkIfLastMessageShouldUpdate(conversation.getLastMessage())) {
let index = this.conversationList.findIndex((element) => element.getConversationId() == conversation.getConversationId());
this.conversationList.splice(index, 1, conversation);
this.ref.detectChanges();
}
}
subscribeToEvents() {
if (!this.conversationType || this.conversationType == CometChatUIKitConstants.MessageReceiverType.group) {
this.ccGroupMemberScopeChanged =
CometChatGroupEvents.ccGroupMemberScopeChanged.subscribe((item) => {
let conversation = this.getConversationFromGroup(item.group);
if (conversation) {
conversation.setLastMessage(item.message);
this.updateConversationObject(conversation);
}
});
this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
let group = item.userAddedIn;
let actionMessage = item.messages;
let conversation = this.getConversationFromGroup(item.userAddedIn);
conversation?.setConversationWith(group);
conversation?.setLastMessage(actionMessage[actionMessage?.length - 1]);
this.updateConversationObject(conversation);
});
this.ccGroupMemberKicked =
CometChatGroupEvents.ccGroupMemberKicked.subscribe((item) => {
let conversation = this.getConversationFromGroup(item.kickedFrom);
if (conversation) {
conversation.setLastMessage(item.message);
this.updateConversationObject(conversation);
}
});
this.ccGroupMemberBanned =
CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
let conversation = this.getConversationFromGroup(item.kickedFrom);
if (conversation) {
conversation.setLastMessage(item.message);
this.updateConversationObject(conversation);
}
});
this.ccGroupDeleted = CometChatGroupEvents.ccGroupDeleted.subscribe((item) => {
let conversation = this.getConversationFromGroup(item);
if (conversation) {
this.removeConversation(conversation);
}
});
this.ccGroupLeft = CometChatGroupEvents.ccGroupLeft.subscribe((item) => {
let conversationKey = this.conversationList.findIndex((c) => c?.getConversationType() ===
CometChatUIKitConstants.MessageReceiverType.group &&
c?.getConversationWith().getGuid() ==
item.leftGroup.getGuid());
if (conversationKey >= 0) {
let conversation = this.conversationList[conversationKey];
this.removeConversation(conversation);
if (this.activeConversation &&
this.activeConversation?.getConversationId() ==
conversation?.getConversationId()) {
this.activeConversation = null;
}
}
});
}
if (!this.conversationType || this.conversationType == CometChatUIKitConstants.MessageReceiverType.user) {
this.ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe((item) => {
let conversation = this.getConversationFromUser(item);
if (conversation && !this.requestBuilder?.isIncludeBlockedUsers()) {
this.removeConversation(conversation);
}
else {
this.updateUser(item);
}
this.ref.detectChanges();
});
this.ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe((item) => {
let conversation = this.getConversationFromUser(item);
if (conversation && this.requestBuilder?.isIncludeBlockedUsers()) {
this.updateUser(item);
}
this.ref.detectChanges();
});
}
this.ccMessageEdit = CometChatMessageEvents.ccMessageEdited.subscribe((object) => {
if (!this.conversationType || this.conversationType == object?.message?.getReceiverType()) {
let message = object.message;
if (object.status == MessageStatus.success) {
this.updateEditedMessage(message);
}
}
});
this.ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe((obj) => {
let message = obj.message;
if (obj.status == MessageStatus.success) {
this.updateConversation(message, false);
}
});
this.ccMessageDelete = CometChatMessageEvents.ccMessageDeleted.subscribe((messageObject) => {
this.updateConversation(messageObject);
this.ref.detectChanges();
});
this.ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe((messageObject) => {
if (!this.conversationType || this.conversationType == messageObject.getReceiverType()) {
CometChat.CometChatHelper.getConversationFromMessage(messageObject).then((conversation) => {
if (conversation &&
this.activeConversation &&
conversation?.getConversationId() ==
this.activeConversation?.getConversationId()) {
this.updateEditedMessage(messageObject);
this.resetUnreadCount();
}
});
}
});
this.ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe((call) => {
if (call && Object.keys(call).length > 0) {
this.updateConversation(call);
}
});
this.ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe((call) => {
this.updateConversation(call);
});
this.ccOutgoingCall = CometChatCallEvents.ccOutgoingCall.subscribe((call) => {
this.updateConversation(call);
});
this.ccCallAccepted = CometChatCallEvents.ccCallAccepted.subscribe((call) => {
this.updateConversation(call);
});
}
unsubscribeToEvents() {
this.ccGroupMemberAdded?.unsubscribe();
this.ccGroupMemberKicked?.unsubscribe();
this.ccGroupMemberBanned?.unsubscribe();
this.ccMessageEdit?.unsubscribe();
this.ccMessageSent?.unsubscribe();
this.ccMessageEdited?.unsubscribe();
this.ccMessageDelete?.unsubscribe();
this.ccGroupDeleted?.unsubscribe();
this.ccGroupLeft?.unsubscribe();
this.ccUserBlocked?.unsubscribe();
this.ccUserUnblocked?.unsubscribe();
this.ccMessageRead?.unsubscribe();
}
getConversationFromUser(user) {
let index = this.conversationList.findIndex((element) => element.getConversationType() ==
CometChatUIKitConstants.MessageReceiverType.user &&
element.getConversationWith().getUid() ==
user.getUid());
if (index >= 0) {
return this.conversationList[index];
}
return null;
}
getConversationFromGroup(group) {
let index = this.conversationList.findIndex((element) => element.getConversationType() ==
CometChatUIKitConstants.MessageReceiverType.group &&
element.getConversationWith().getGuid() ==
group.getGuid());
if (index >= 0) {
return this.conversationList[index];
}
return null;
}
ngOnChanges(change) {
try {
if (change["activeConversation"]) {
this.resetUnreadCount();
this.ref.detectChanges();
}
if (change["conversationsStyle"]) {
this.setThemeStyle();
}
/**
* When user sends message conversationList is updated with latest message
*/
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
ngOnDestroy() {
try {
this.removeListeners();
this.unsubscribeToEvents();
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
this.ref.detectChanges();
}
// getting default conversation option and adding callback in it
setConversationOptions() {
if (this.options) {
return;
}
this.conversationOptions = ConversationUtils.getDefaultOptions();
this.conversationOptions.forEach((element) => {
if (!element.onClick &&
element.id == CometChatUIKitConstants.ConversationOptions.delete) {
element.onClick = this.deleteConversationOnClick;
}
});
return;
}
// reset unread count
onClick(conversation) {
if (this.onItemClick) {
this.onItemClick(conversation);
}
}
// set unread count
resetUnreadCount() {
if (this.activeConversation) {
const conversationlist = [
...this.conversationList,
];
//Gets the index of user which comes offline/online
const conversationKey = conversationlist.findIndex((conversationObj) => conversationObj?.getConversationId() ===
this.activeConversation?.getConversationId());
if (conversationKey > -1) {
let conversationObj = conversationlist[conversationKey];
let newConversationObj = conversationObj;
newConversationObj.setUnreadMessageCount(0);
//newConversationObj.setUnreadMentionInMessageCount(0);
newConversationObj.getLastMessage()?.setMuid(this.getUinx());
conversationlist.splice(conversationKey, 1, newConversationObj);
this.conversationList = [...conversationlist];
this.ref.detectChanges();
}
}
}
// sets property from theme to style object
setThemeStyle() {
this.setAvatarStyle();
this.setBadgeStyle();
this.setConfirmDialogStyle();
this.setConversationsStyle();
this.setListItemStyle();
this.setDateStyle();
this.setStatusStyle();
this.setReceiptStyle();
this.statusColor.private =
this.conversationsStyle?.privateGroupIconBackground;
this.statusColor.online = this.conversationsStyle?.onlineStatusColor;
this.statusColor.password =
this.conversationsStyle?.passwordGroupIconBackground;
this.listStyle = {
titleTextFont: this.conversationsStyle.titleTextFont,
titleTextColor: this.conversationsStyle.titleTextColor,
emptyStateTextFont: this.conversationsStyle.emptyStateTextFont,
emptyStateTextColor: this.conversationsStyle.emptyStateTextColor,
errorStateTextFont: this.conversationsStyle.errorStateTextFont,
errorStateTextColor: this.conversationsStyle.errorStateTextColor,
loadingIconTint: this.conversationsStyle.loadingIconTint,
separatorColor: this.conversationsStyle.separatorColor,
};
this.iconStyle.iconTint = this.themeService.theme.palette.getAccent400();
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "97%",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: this.themeService.theme.palette.getAccent50(),
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: this.themeService.theme.palette.getAccent50(),
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setStatusStyle() {
let defaultStyle = {
height: "12px",
width: "12px",
border: "none",
borderRadius: "24px",
};
this.statusIndicatorStyle = {
...defaultStyle,
...this.statusIndicatorStyle,
};
}
setConversationsStyle() {
let defaultStyle = new ConversationsStyle({
lastMessageTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
lastMessageTextColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
separatorColor: this.themeService.theme.palette.getAccent400(),
privateGroupIconBackground: this.themeService.theme.palette.getSuccess(),
passwordGroupIconBackground: "RGB(247, 165, 0)",
typingIndictorTextColor: this.themeService.theme.palette.getPrimary(),
typingIndictorTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
threadIndicatorTextFont: fontHelper(this.themeService.theme.typography.caption2),
threadIndicatorTextColor: this.themeService.theme.palette.getAccent600(),
});
this.conversationsStyle = { ...defaultStyle, ...this.conversationsStyle };
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
};
}
setDateStyle() {
let defaultStyle = new DateStyle({
textFont: fontHelper(this.themeService.theme.typography.caption2),
textColor: this.themeService.theme.palette.getAccent600(),
background: "transparent",
});
this.dateStyle = { ...defaultStyle, ...this.dateStyle };
}
setReceiptStyle() {
let defaultStyle = new ReceiptStyle({
waitIconTint: this.themeService.theme.palette.getAccent700(),
sentIconTint: this.themeService.theme.palette.getAccent600(),
deliveredIconTint: this.themeService.theme.palette.getAccent600(),
readIconTint: this.themeService.theme.palette.getPrimary(),
errorIconTint: this.themeService.theme.palette.getError(),
height: "20px",
width: "20px",
background: "transparent"
});
this.receiptStyle = { ...defaultStyle, ...this.receiptStyle };
}
setBadgeStyle() {
let defaultStyle = new BadgeStyle({
textFont: fontHelper(this.themeService.theme.typography.subtitle2),
textColor: this.themeService.theme.palette.getAccent("dark"),
background: this.themeService.theme.palette.getPrimary(),
height: "16px",
borderRadius: "16px",
width: "24px",
});
this.badgeStyle = { ...defaultStyle, ...this.badgeStyle };
}
setConfirmDialogStyle() {
let defaultStyle = new ConfirmDialogStyle({
confirmButtonBackground: this.themeService.theme.palette.getError(),
cancelButtonBackground: this.themeService.theme.palette.getSecondary(),
confirmButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
confirmButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
cancelButtonTextColor: this.themeService.theme.palette.getAccent900("dark"),
cancelButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
messageTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
messageTextColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
height: "100%",
width: "350px",
borderRadius: "8px",
});
this.deleteConversationDialogStyle = {
...defaultStyle,
...this.deleteConversationDialogStyle,
};
}
// checking if user has his own configuration else will use default configuration
/**
* @param {Object={}} config
* @param {Object} defaultConfig?
* @returns defaultConfig
*/
// calling subtitle callback from configurations
/**
* @param {CometChat.Conversation} conversation
*/
/**
* Fetches the coversation based on the conversationRequest config
*/
fetchNextConversation() {
try {
return this.requestBuilder.fetchNext();
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
updateEditedMessage(message) {
let index = this.conversationList.findIndex((conversationObj) => conversationObj.getLastMessage() &&
conversationObj.getLastMessage().getId() ==
message?.getId());
if (index >= 0) {
this.conversationEditedDeleted(message);
}
}
/**
* attaches Listeners for user activity , group activities and calling
* @param callback
*/
/**
* @param {Function} callback
*/
attachListeners(callback) {
try {
if (!this.disableUsersPresence && (!this.conversationType || this.conversationType == CometChatUIKitConstants.MessageReceiverType.user)) {
CometChat.addUserListener(this.userListenerId, new CometChat.UserListener({
onUserOnline: (onlineUser) => {
/* when someuser/friend comes online, user will be received here */
callback(CometChatUIKitConstants.userStatusType.online, onlineUser);
},
onUserOffline: (offlineUser) => {
/* when someuser/friend went offline, user will be received here */
callback(CometChatUIKitConstants.userStatusType.offline, offlineUser);
},
}));
}
if (!this.conversationType || this.conversationType == CometChatUIKitConstants.MessageReceiverType.group) {
CometChat.addGroupListener(this.groupListenerId, new CometChat.GroupListener({
onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
this.updateConversation(message);
},
onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
if (this.loggedInUser?.getUid() === kickedUser.getUid()) {
this.removeConversationFromMessage(kickedFrom);
}
else {
this.updateConversation(message);
}
},
onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
if (this.loggedInUser?.getUid() === bannedUser.getUid()) {
this.removeConversationFromMessage(bannedFrom);
}
else {
this.updateConversation(message);
}
},
onMemberAddedToGroup: (message, userAdded, userAddedBy, userAddedIn) => {
this.updateConversation(message);
},
onGroupMemberLeft: (message, leavingUser, group) => {
this.updateConversation(message);
},
onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
this.updateConversation(message);
},
}));
}
CometChat.addCallListener(this.callListenerId, new CometChat.CallListener({
onIncomingCallReceived: (call) => {
this.updateConversation(call);
},
onIncomingCallCancelled: (call) => {
this.updateConversation(call);
},
onOutgoingCallRejected: (call) => {
this.updateConversation(call);
},
onOutgoingCallAccepted: (call) => {
this.updateConversation(call);
},
onCallEndedMessageReceived: (call) => {
this.updateConversation(call);
},
}));
// SDK listeners
this.onTextMessageReceived =
CometChatMessageEvents.onTextMessageReceived.subscribe((textMessage) => {
callback(CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED, null, textMessage);
});
this.onMediaMessageReceived =
CometChatMessageEvents.onMediaMessageReceived.subscribe((mediaMessage) => {
callback(CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED, null, mediaMessage);
});
this.onCustomMessageReceived =
CometChatMessageEvents.onCustomMessageReceived.subscribe((customMessage) => {
callback(CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED, null, customMessage);
});
this.onFormMessageReceived =
CometChatMessageEvents.onFormMessageReceived.subscribe((formMessage) => {
callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, formMessage);
});
this.onSchedulerMessageReceived =
CometChatMessageEvents.onSchedulerMessageReceived.subscribe((formMessage) => {
callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, formMessage);
});
this.onCardMessageReceived =
CometChatMessageEvents.onCardMessageReceived.subscribe((cardMessage) => {
callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, cardMessage);
});
this.onCustomInteractiveMessageReceived =
CometChatMessageEvents.onCustomInteractiveMessageReceived.subscribe((customMessage) => {
callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, customMessage);
});
this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
if (!this.disableReceipt && messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user && (!this.conversationType || this.conversationType == messageReceipt.getReceiverType())) {
this.markAsRead(messageReceipt);
}
});
this.onMessagesReadByAll = CometChatMessageEvents.onMessagesReadByAll.subscribe((messageReceipt) => {
if (!this.disableReceipt && messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group && (!this.conversationType || this.conversationType == messageReceipt.getReceiverType())) {
this.markAsRead(messageReceipt);
}
});
this.onMessagesDeliveredToAll = CometChatMessageEvents.onMessagesDeliveredToAll.subscribe((messageReceipt) => {
if (!this.disableReceipt && messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group && (!this.conversationType || this.conversationType == messageReceipt?.getReceiverType())) {
this.updateDeliveredMessage(messageReceipt);
}
});
this.onMessageDeleted = CometChatMessageEvents.onMessageDeleted.subscribe((deletedMessage) => {
callback(CometChatUIKitConstants.messages.MESSAGE_DELETED, null, deletedMessage);
});
this.onMessageEdited = CometChatMessageEvents.onMessageEdited.subscribe((editedMessage) => {
callback(CometChatUIKitConstants.messages.MESSAGE_EDITED, null, editedMessage);
});
this.onMessagesDelivered =
CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
if (!this.disableReceipt && messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user && (!this.conversationType || this.conversationType == messageReceipt?.getReceiverType())) {
this.updateDeliveredMessage(messageReceipt);
}
});
this.onTypingStarted = CometChatMessageEvents.onTypingStarted.subscribe((typingIndicator) => {
if (!this.conversationType || this.conversationType == typingIndicator?.getReceiverType()) {
if (!this.disableTyping) {
this.typingIndicator = typingIndicator;
this.ref.detectChanges();
}
}
});
this.onTypingEnded = CometChatMessageEvents.onTypingEnded.subscribe((typingIndicator) => {
if (!this.conversationType || this.conversationType == typingIndicator?.getReceiverType()) {
this.typingIndicator = null;
this.ref.detectChanges();
}
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
fetchNewConversations() {
this.requestBuilder = this.conversationsRequestBuilder.build();
if (this.requestBuilder?.getConversationType()) {
this.conversationType = this.requestBuilder.getConversationType();
}
this.conversationList = [];
this.getConversation(States.loaded);
}
removeConversationFromMessage(group) {
let conversation = this.getConversationFromGroup(group);
if (conversation) {
this.updateConversationList(conversation);
}
}
/**
* Removes all listeners
*/
removeListeners() {
try {
CometChat.removeUserListener(this.userListenerId);
CometChat.removeGroupListener(this.groupListenerId);
CometChat.removeConnectionListener(this.connectionListenerId);
this.onTextMessageReceived?.unsubscribe();
this.onMediaMessageReceived?.unsubscribe();
this.onCustomMessageReceived?.unsubscribe();
this.onFormMessageReceived?.unsubscribe();
this.onSchedulerMessageReceived?.unsubscribe();
this.onCardMessageReceived?.unsubscribe();
this.onCustomInteractiveMessageReceived?.unsubscribe();
this.onMessagesRead?.unsubscribe();
this.onMessagesDeliveredToAll?.unsubscribe();
this.onMessagesReadByAll?.unsubscribe();
this.onMessageDeleted?.unsubscribe();
this.onMessageEdited?.unsubscribe();
this.onMessagesDelivered?.unsubscribe();
this.onTypingStarted?.unsubscribe();
this.onTypingEnded?.unsubscribe();
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
isReceiptDisable(conversation) {
let item = conversation.getConversationWith();
let message = conversation.getLastMessage();
if (!(this.disableReceipt || this.hideReceipt) &&
message &&
!message?.getDeletedAt() &&
message?.getCategory() !=
CometChatUIKitConstants.MessageCategory.action &&
message?.getCategory() != CometChatUIKitConstants.MessageCategory.call &&
(!this.typingIndicator ||
(item?.uid != this.typingIndicator.getReceiverId() &&
item?.guid != this.typingIndicator.getReceiverId())) &&
message.getSender()?.getUid() == this.loggedInUser?.getUid()) {
return true;
}
else {
return false;
}
}
markAsRead(readMessage) {
let conversationlist = [...this.conversationList];
const conversationKey = conversationlist.findIndex((conversationObj) => conversationObj.getLastMessage().getId() == Number(readMessage.getMessageId()) && conversationObj.getLastMessage().getSender().getUid() == this.loggedInUser?.getUid());
if (conversationKey > -1) {
let newConversationObject;
if (!conversationlist[conversationKey].getLastMessage().getReadAt()) {
newConversationObject = conversationlist[conversationKey];
newConversationObject.getLastMessage().setReadAt(readMessage.getReadAt());
newConversationObject.setUnreadMessageCount(0);
newConversationObject.getLastMessage().setMuid(this.getUinx());
conversationlist.splice(conversationKey, 1, newConversationObject);
this.conversationList = [...conversationlist];
this.ref.detectChanges();
}
}
}
/**
* Updates Detail when user comes online/offline
* @param
*/
/**
* @param {CometChat.User|CometChat.Group|null} user
*/
updateUser(user) {
try {
//when user updates
const conversationlist = [
...this.conversationList,
];
//Gets the index of user which comes offline/online
const conversationKey = conversationlist.findIndex((conversationObj) => conversationObj.getConversationType() ===
CometChatUIKitConstants.MessageReceiverType.user &&
conversationObj.getConversationWith().getUid() ===
user.getUid());
if (conversationKey > -1) {
let conversationObj = conversationlist[conversationKey];
let conversationWithObj = conversationObj.getConversationWith();
conversationWithObj.setStatus(user.getStatus());
let newConversationObj = conversationObj;
newConversationObj.setConversationWith(conversationWithObj);
newConversationObj.getLastMessage().setMuid(this.getUinx());
conversationlist.splice(conversationKey, 1, newConversationObj);
this.conversationList = conversationlist;
this.ref.detectChanges();
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
this.ref.detectChanges();
}
}
/**
*
* Gets the last message
* @param conversation
/**
* @param {CometChat.BaseMessage} message
* @param {CometChat.Conversation|{}} conversation
*/
makeLastMessage(message, conversation = {}) {
const newMessage = message;
return newMessage;
}
updateConversationWithForGroup(message, conversation) {
if (message.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.group &&
conversation.getConversationType() === CometChatUIKitConstants.MessageReceiverType.group) {
const isSameGroup = message.getReceiver().getGuid() ===
message.getActionFor().getGuid();
if (isSameGroup) {
let updatedGroup = conversation.getConversationWith();
updatedGroup.setMembersCount(message.getActionFor().getMembersCount());
conversation.setConversationWith(updatedGroup);
}
}
}
/**
*
* Updates Conversations as Text/Custom Messages are received
* @param
*
*/
/**
* @param {CometChat.BaseMessage} message
* @param {boolean} notification
*/
updateConversation(message, notification = true) {
let metadata;
if (message instanceof CometChat.CustomMessage) {
metadata = message.getMetadata();
}
try {
if (this.checkIfLastMessageShouldUpdate(message)) {
this.makeConversation(message)
.then((response) => {
let isCustomMessage = message instanceof CometChat.CustomMessage;
const conversationKey = response.conversationKey;
const conversationObj = response.conversationObj;
const conversationList = response.conversationList;
if (conversationKey > -1) {
// if sender is not logged in user then increment count
let unreadMessageCount = (this.loggedInUser?.getUid() != message.getSender().getUid() ||
this.loggedInUser?.getUid() == message.getReceiverId())
? this.makeUnreadMessageCount(conversationObj)
: this.makeUnreadMessageCount(conversationObj) - 1;
let lastMessageObj = this.makeLastMessage(message, conversationObj);
let newConversationObj = conversationObj;
if (message instanceof CometChat.Action) {
this.updateConversationWithForGroup(message, newConversationObj);
}
newConversationObj.setLastMessage(lastMessageObj);
if (message.getCategory() != CometChatUIKitConstants.MessageCategory.action) {
newConversationObj.setUnreadMessageCount(unreadMessageCount);
}
if (lastMessageObj.getSender().getUid() != this.loggedInUser?.getUid()) {
let timesLoggedInUserIsMentioned = 0;
let mentionedUsers = lastMessageObj.getMentionedUsers();
if (mentionedUsers.length) {
for (let i = 0; i < mentionedUsers.length; i++) {
if (mentionedUsers[i].getUid() == this.loggedInUser?.getUid()) {
timesLoggedInUserIsMentioned++;
}
}
}
}
conversationList.splice(conversationKey, 1);
conversationList.unshift(newConversationObj);
this.conversationList = [...conversationList];
if (this.loggedInUser?.getUid() == message.getSender().getUid()) {
this.activeConversation = newConversationObj;
}
if (notification &&
this.loggedInUser?.getUid() != message?.getSender()?.getUid()) {
if (!this.disableSoundForMessages) {
this.playAudio();
}
this.ref.detectChanges();
}
}
else {
let incrementCount = this.loggedInUser?.getUid() != message.getSender().getUid() ? 1 : 0;
let lastMessageObj = this.makeLastMessage(message);
conversationObj.setLastMessage(lastMessageObj);
if (message instanceof CometChat.Action) {
this.updateConversationWithForGroup(message, conversationObj);
}
if (message.getCategory() != CometChatUIKitConstants.MessageCategory.action) {
conversationObj.setUnreadMessageCount(incrementCount);
}
conversationList.unshift(conversationObj);
this.conversationList = conversationList;
this.ref.detectChanges();
if (notification &&
this.loggedInUser?.getUid() != message?.getSender()?.getUid()) {
if (!this.disableSoundForMessages) {
this.playAudio();
}
this.ref.detectChanges();
}
}
if (this.state != States.loaded) {
this.state = States.loaded;
}
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
this.ref.detectChanges();
});
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
this.ref.detectChanges();
}
updateDeliveredMessage(messageReceipt) {
let conversationList = [...this.conversationList];
let conversationKey = conversationList.findIndex((c) => c.getLastMessage().getId() == Number(messageReceipt.getMessageId()) && c.getLastMessage().getSender().getUid() == this.loggedInUser?.getUid());
let conversationObj;
if (conversationKey > -1) {
conversationObj = conversationList[conversationKey];
if (!conversationObj.getLastMessage().getDeliveredAt()) {
conversationObj.getLastMessage().setDeliveredAt(Number(this.getUinx()));
conversationObj.getLastMessage().setMuid(this.getUinx());
conversationList.splice(conversationKey, 1, conversationObj);
this.conversationList = [...conversationList];
this.ref.detectChanges();
}
}
}
/**
*
* Gets The Count of Unread Messages
* @param
*/
/**
* @param {any} conversation
* @param {any} operator
*/
makeUnreadMessageCount(conversation, operator = null) {
if (Object.keys(conversation).length === 0) {
return 1;
}
let unreadMessageCount = conversation.getUnreadMessageCount();
if (this.activeConversation &&
this.activeConversation.getConversationId() ===
conversation.getConversationId()) {
unreadMessageCount += 1;
}
else if ((this.activeConversation &&
this.activeConversation.hasOwnProperty("guid") &&
conversation.getConversationWith().hasOwnProperty("guid") &&
this.activeConversation.getConversationWith().getGuid() ===
conversation.getConversationWith().getGuid()) ||
(this.activeConversation &&
this.activeConversation.hasOwnProperty("uid") &&
conversation.getConversationWith().hasOwnProperty("uid") &&
this.activeConversation.getConversationWith().getUid() ===
conversation.getConversationWith().getUid())) {
unreadMessageCount = 0;
}
else {
if (operator && operator === "decrement") {
unreadMessageCount = unreadMessageCount ? unreadMessageCount - 1 : 0;
}
else {
unreadMessageCount = unreadMessageCount + 1;
}
}
return unreadMessageCount;
}
/**
* Changes detail of conversations
* @param
*/
/**
* @param {CometChat.BaseMessage} message
*/
makeConversation(message) {
const promise = new Promise((resolve, reject) => {
let conversationKey = this.conversationList.findIndex((c) => c?.getConversationId() === message?.getConversationId());
if (conversationKey >= 0) {
let conversation = this.conversationList[conversationKey];
resolve({
conversationKey: conversationKey,
conversationObj: conversation,
conversationList: this.conversationList,
});
}
else {
CometChat.CometChatHelper.getConversationFromMessage(message)
.then((conversation) => {
if (conversation?.getConversationWith() instanceof CometChat.Group &&
!conversation.getConversationWith().getScope()) {
conversation.getConversationWith().setHasJoined(true);
conversation.getConversationWith().setScope(CometChatUIKitConstants.groupMemberScope.participant);
}
resolve({
conversationKey: -1,
conversationObj: conversation,
conversationList: this.conversationList,
});
this.ref.detectChanges();
})
.catch((error) => reject(error));
}
});
return promise;
}
/**
* Updates Conversation View when message is edited or deleted
*/
conversationEditedDeleted(message) {
try {
this.makeConversation(message)
.then((response) => {
const conversationKey = response.conversationKey;
const conversationObj = response.conversationObj;
const conversationList = response.conversationList;
if (conversationKey > -1) {
let lastMessageObj = conversationObj.getLastMessage();
if (lastMessageObj.getId() === message.getId()) {
conversationObj.setLastMessage(message);
conversationObj.getLastMessage().setMuid(this.getUinx());
conversationList.splice(conversationKey, 1, conversationObj);
this.conversationList = [...conversationList];
this.ref.detectChanges();
}
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
this.ref.detectChanges();
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
/**
* If User scrolls to the bottom of the current Conversation list than fetch next items of the Conversation list and append
* @param Event
*/
/**
* Plays Audio When Message is Received
*/
playAudio() {
try {
if (!this.disableSoundForMessages) {
if (this.customSoundForMessages) {
CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessageFromOther, this.customSoundForMessages);
}
else {
CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessageFromOther);
}
}
else {
return;
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
/*
* Updates the convesation list when deleted.
* Adding Conversation Object to CometchatService
*/
/**
* @param {CometChat.Conversation|{}} conversation
*/
updateConversationList(conversation) {
let index = this.conversationList.findIndex((element) => element?.getConversationId() == conversation?.getConversationId());
this.conversationList.splice(index, 1);
this.ref.detectChanges();
}
onOptionClick(event, conversation) {
let option = event?.detail?.data;
this.conversationToBeDeleted = conversation;
if (option) {
option.onClick();
}
}
/**
* show confirm dialog screen
* @param {CometChat.Conversation|{}} conversaton
*/
// check is there is any active conversation and mark it as active
getActiveConversation(conversation) {
if (this.selectionMode == SelectionMode.none || !this.selectionMode) {
return (this.activeConversation &&
this.activeConversation?.conversationId ==
conversation?.conversationId);
}
else {
return false;
}
}
/**
* handle confirm dialog response
* @param {string} value
*/
// calling cometchat.deleteConversation method
deleteSelectedConversation() {
if (this.conversationToBeDeleted) {
if (this.activeConversation &&
this.activeConversation.getConversationId() ==
this.conversationToBeDeleted.getConversationId()) {
this.activeConversation = null;
}
let conversationWith;
let conversationType = this.conversationToBeDeleted.getConversationType();
if (conversationType === CometChatUIKitConstants.MessageReceiverType.user) {
conversationWith = this.conversationToBeDeleted.getConversationWith().getUid();
}
else {
conversationWith = this.conversationToBeDeleted.getConversationWith().getGuid();
}
CometChat.deleteConversation(conversationWith, conversationType).then((deletedConversation) => {
CometChatConversationEvents.ccConversationDeleted.next(this.conversationToBeDeleted);
this.updateConversationList(this.conversationToBeDeleted);
this.conversationToBeDeleted = null;
this.ref.detectChanges();
});
this.isDialogOpen = false;
this.ref.detectChanges();
}
}
// exposed methods to users.
updateLastMessage(message) {
this.updateConversation(message);
}
removeConversation(conversation) {
this.updateConversationList(conversation);
}
}
CometChatConversationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
CometChatConversationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: { subtitleView: "subtitleView", title: "title", options: "options", searchPlaceHolder: "searchPlaceHolder", disableUsersPresence: "disableUsersPresence", disableReceipt: "disableReceipt", hideReceipt: "hideReceipt", disableTyping: "disableTyping", deliveredIcon: "deliveredIcon", readIcon: "readIcon", errorIcon: "errorIcon", datePattern: "datePattern", onError: "onError", sentIcon: "sentIcon", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", customSoundForMessages: "customSoundForMessages", activeConversation: "activeConversation", searchIconURL: "searchIconURL", hideSearch: "hideSearch", conversationsRequestBuilder: "conversationsRequestBuilder", emptyStateView: "emptyStateView", onSelect: "onSelect", loadingIconURL: "loadingIconURL", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", listItemView: "listItemView", menu: "menu", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", disableSoundForMessages: "disableSoundForMessages", confirmDialogTitle: "confirmDialogTitle", confirmButtonText: "confirmButtonText", cancelButtonText: "cancelButtonText", confirmDialogMessage: "confirmDialogMessage", onItemClick: "onItemClick", deleteConversationDialogStyle: "deleteConversationDialogStyle", backdropStyle: "backdropStyle", badgeStyle: "badgeStyle", dateStyle: "dateStyle", conversationsStyle: "conversationsStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", typingIndicatorText: "typingIndicatorText", threadIndicatorText: "threadIndicatorText", avatarStyle: "avatarStyle", receiptStyle: "receiptStyle", loggedInUser: "loggedInUser", disableMentions: "disableMentions", textFormatters: "textFormatters" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-conversations\" [ngStyle]=\"styles.wrapperStyle()\">\n <cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"isDialogOpen\">\n <cometchat-confirm-dialog [title]=\"confirmDialogTitle\"\n [messageText]=\"confirmDialogMessage\" [cancelButtonText]=\"cancelButtonText\"\n [confirmButtonText]=\"confirmButtonText\"\n (cc-confirm-clicked)=\"onConfirmClick()\"\n (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"deleteConversationDialogStyle\">\n </cometchat-confirm-dialog>\n </cometchat-backdrop>\n <div class=\"cc-conversations__menus\" *ngIf=\"menu\">\n\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n\n </div>\n <cometchat-list [state]=\"state\" [searchIconURL]=\"searchIconURL\"\n [hideError]=\"hideError\" [emptyStateText]=\"emptyStateText\"\n [loadingIconURL]=\"loadingIconURL\" [titleAlignment]=\"titleAlignment\"\n [loadingStateView]=\"loadingStateView\" [listStyle]=\"listStyle\"\n [emptyStateView]=\"emptyStateView\" [errorStateText]=\"errorStateText\"\n [errorStateView]=\"errorStateView\" [onScrolledToBottom]=\"getConversation\"\n [list]=\"conversationList\"\n [listItemView]=\"listItemView ? listItemView : listItem\" [title]=\"title\"\n [hideSearch]=\"hideSearch\"></cometchat-list>\n</div>\n<ng-template #listItem let-conversation>\n <cometchat-list-item [hideSeparator]=\"hideSeparator\"\n [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"getStatusIndicatorStyle(conversation)\"\n [id]=\"conversation?.conversationId\"\n [isActive]=\"getActiveConversation(conversation)\"\n (cc-listitem-clicked)=\"onClick(conversation)\"\n [title]=\"conversation?.conversationWith?.name\"\n [statusIndicatorIcon]=\"checkGroupType(conversation)\"\n [statusIndicatorColor]=\"checkStatusType(conversation)\"\n [listItemStyle]=\"listItemStyle\"\n [avatarURL]=\"conversation?.conversationWith?.avatar || conversation?.conversationWith?.icon\"\n [avatarName]=\"conversation?.conversationWith?.name\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView;else conversationSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: conversation }\">\n </ng-container>\n </div>\n <ng-template #conversationSubtitle>\n\n <div class=\"cc-conversations__subtitle-view \" slot=\"subtitleView\">\n <div class=\"cc-conversations__threadview\"\n *ngIf=\"conversation?.lastMessage?.parentMessageId\">\n <cometchat-label [labelStyle]=\"itemThreadIndicatorStyle()\"\n [text]=\"threadIndicatorText\"> </cometchat-label>\n <cometchat-icon [URL]=\"threadIconURL\"\n [iconStyle]=\"iconStyle\"></cometchat-icon>\n\n </div>\n <div class=\"cc-conversations__subtitle\">\n <div class=\"cc-conversations__readreceipt\"\n *ngIf=\"isReceiptDisable(conversation)\">\n <cometchat-receipt [receipt]=\"getMessageReceipt(conversation)\"\n [receiptStyle]=\"receiptStyle\" [sentIcon]=\"sentIcon\"\n [errorIcon]=\"errorIcon\" [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n </div>\n\n <div [ngStyle]=\"subtitleStyle(conversation)\" class=\"cc-subtitle__text\"\n [innerHTML]=\"setSubtitle(conversation)\"></div>\n </div>\n\n </div>\n </ng-template>\n <div slot=\"menuView\" class=\"cc-conversations__optionsview\"\n *ngIf=\"selectionMode == selectionmodeEnum.none\">\n <div *ngIf=\"options\">\n <cometchat-menu-list [data]=\"options(conversation)\"\n (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n [menuListStyle]=\"menustyle\">\n\n </cometchat-menu-list>\n </div>\n <div *ngIf=\"!options && conversationOptions\">\n <cometchat-menu-list [data]=\"conversationOptions\"\n (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n [menuListStyle]=\"menustyle\">\n\n </cometchat-menu-list>\n </div>\n </div>\n <div slot=\"tailView\" class=\"cc-conversations__tail-view\">\n <div class=\"tail__view\"\n *ngIf=\"selectionMode == selectionmodeEnum.none && conversation?.lastMessage\">\n <div class=\"cc-date\">\n <cometchat-date *ngIf=\"conversation?.lastMessage\"\n [dateStyle]=\"dateStyle\"\n [timestamp]=\"conversation?.lastMessage?.sentAt\"\n [pattern]=\"getDate()\"></cometchat-date>\n </div>\n <div class=\"cc-conversations__badge\">\n <!-- <cometchat-icon *ngIf=\"conversation?.getUnreadMentionInMessageCount()\" [ngStyle]=\"getUnreadMentionsIconStyle()\" [iconStyle]=getMentionIconStyle() [URL]=\"mentionsIconURL\"></cometchat-icon> -->\n <cometchat-badge [count]=\"conversation?.unreadMessageCount\"\n [badgeStyle]=\"badgeStyle\"></cometchat-badge>\n </div>\n </div>\n <div class=\"cc-conversations__selection-view\"\n *ngIf=\"selectionMode != selectionmodeEnum.none\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n </div>\n </cometchat-list-item>\n <ng-template #tailView>\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\">\n <cometchat-radio-button\n (cc-radio-button-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-radio-button>\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\"\n (cc-checkbox-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-checkbox>\n </div>\n </ng-template>\n</ng-template>\n", styles: [".cc-conversations{height:100%;width:100%;box-sizing:border-box;margin-bottom:16px;position:relative}.cc-conversations__selection-view{position:relative}.tail__view{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.cc-subtitle__text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.cc-conversations__menus{position:absolute;right:12px;padding:4px;cursor:pointer}.cc-menus__icon{height:24px;width:24px}.cc-conversations__subtitle-view{display:flex;align-items:center;width:90%;flex-direction:column;justify-content:flex-start}.cc-conversations__subtitle{display:flex;justify-content:flex-start;width:100%;align-items:center;min-height:22px}.cc-conversations__threadview{height:12px;display:flex;justify-content:flex-start;width:100%;align-items:center}.cc-conversations__badge{display:flex;align-items:flex-end;justify-content:flex-end;width:100%;padding-right:8px}cometchat-list-item{padding:0 8px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-conversations", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-conversations\" [ngStyle]=\"styles.wrapperStyle()\">\n <cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"isDialogOpen\">\n <cometchat-confirm-dialog [title]=\"confirmDialogTitle\"\n [messageText]=\"confirmDialogMessage\" [cancelButtonText]=\"cancelButtonText\"\n [confirmButtonText]=\"confirmButtonText\"\n (cc-confirm-clicked)=\"onConfirmClick()\"\n (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"deleteConversationDialogStyle\">\n </cometchat-confirm-dialog>\n </cometchat-backdrop>\n <div class=\"cc-conversations__menus\" *ngIf=\"menu\">\n\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n\n </div>\n <cometchat-list [state]=\"state\" [searchIconURL]=\"searchIconURL\"\n [hideError]=\"hideError\" [emptyStateText]=\"emptyStateText\"\n [loadingIconURL]=\"loadingIconURL\" [titleAlignment]=\"titleAlignment\"\n [loadingStateView]=\"loadingStateView\" [listStyle]=\"listStyle\"\n [emptyStateView]=\"emptyStateView\" [errorStateText]=\"errorStateText\"\n [errorStateView]=\"errorStateView\" [onScrolledToBottom]=\"getConversation\"\n [list]=\"conversationList\"\n [listItemView]=\"listItemView ? listItemView : listItem\" [title]=\"title\"\n [hideSearch]=\"hideSearch\"></cometchat-list>\n</div>\n<ng-template #listItem let-conversation>\n <cometchat-list-item [hideSeparator]=\"hideSeparator\"\n [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"getStatusIndicatorStyle(conversation)\"\n [id]=\"conversation?.conversationId\"\n [isActive]=\"getActiveConversation(conversation)\"\n (cc-listitem-clicked)=\"onClick(conversation)\"\n [title]=\"conversation?.conversationWith?.name\"\n [statusIndicatorIcon]=\"checkGroupType(conversation)\"\n [statusIndicatorColor]=\"checkStatusType(conversation)\"\n [listItemStyle]=\"listItemStyle\"\n [avatarURL]=\"conversation?.conversationWith?.avatar || conversation?.conversationWith?.icon\"\n [avatarName]=\"conversation?.conversationWith?.name\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView;else conversationSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: conversation }\">\n </ng-container>\n </div>\n <ng-template #conversationSubtitle>\n\n <div class=\"cc-conversations__subtitle-view \" slot=\"subtitleView\">\n <div class=\"cc-conversations__threadview\"\n *ngIf=\"conversation?.lastMessage?.parentMessageId\">\n <cometchat-label [labelStyle]=\"itemThreadIndicatorStyle()\"\n [text]=\"threadIndicatorText\"> </cometchat-label>\n <cometchat-icon [URL]=\"threadIconURL\"\n [iconStyle]=\"iconStyle\"></cometchat-icon>\n\n </div>\n <div class=\"cc-conversations__subtitle\">\n <div class=\"cc-conversations__readreceipt\"\n *ngIf=\"isReceiptDisable(conversation)\">\n <cometchat-receipt [receipt]=\"getMessageReceipt(conversation)\"\n [receiptStyle]=\"receiptStyle\" [sentIcon]=\"sentIcon\"\n [errorIcon]=\"errorIcon\" [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n </div>\n\n <div [ngStyle]=\"subtitleStyle(conversation)\" class=\"cc-subtitle__text\"\n [innerHTML]=\"setSubtitle(conversation)\"></div>\n </div>\n\n </div>\n </ng-template>\n <div slot=\"menuView\" class=\"cc-conversations__optionsview\"\n *ngIf=\"selectionMode == selectionmodeEnum.none\">\n <div *ngIf=\"options\">\n <cometchat-menu-list [data]=\"options(conversation)\"\n (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n [menuListStyle]=\"menustyle\">\n\n </cometchat-menu-list>\n </div>\n <div *ngIf=\"!options && conversationOptions\">\n <cometchat-menu-list [data]=\"conversationOptions\"\n (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n [menuListStyle]=\"menustyle\">\n\n </cometchat-menu-list>\n </div>\n </div>\n <div slot=\"tailView\" class=\"cc-conversations__tail-view\">\n <div class=\"tail__view\"\n *ngIf=\"selectionMode == selectionmodeEnum.none && conversation?.lastMessage\">\n <div class=\"cc-date\">\n <cometchat-date *ngIf=\"conversation?.lastMessage\"\n [dateStyle]=\"dateStyle\"\n [timestamp]=\"conversation?.lastMessage?.sentAt\"\n [pattern]=\"getDate()\"></cometchat-date>\n </div>\n <div class=\"cc-conversations__badge\">\n <!-- <cometchat-icon *ngIf=\"conversation?.getUnreadMentionInMessageCount()\" [ngStyle]=\"getUnreadMentionsIconStyle()\" [iconStyle]=getMentionIconStyle() [URL]=\"mentionsIconURL\"></cometchat-icon> -->\n <cometchat-badge [count]=\"conversation?.unreadMessageCount\"\n [badgeStyle]=\"badgeStyle\"></cometchat-badge>\n </div>\n </div>\n <div class=\"cc-conversations__selection-view\"\n *ngIf=\"selectionMode != selectionmodeEnum.none\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n </div>\n </cometchat-list-item>\n <ng-template #tailView>\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\">\n <cometchat-radio-button\n (cc-radio-button-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-radio-button>\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\"\n (cc-checkbox-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-checkbox>\n </div>\n </ng-template>\n</ng-template>\n", styles: [".cc-conversations{height:100%;width:100%;box-sizing:border-box;margin-bottom:16px;position:relative}.cc-conversations__selection-view{position:relative}.tail__view{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.cc-subtitle__text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.cc-conversations__menus{position:absolute;right:12px;padding:4px;cursor:pointer}.cc-menus__icon{height:24px;width:24px}.cc-conversations__subtitle-view{display:flex;align-items:center;width:90%;flex-direction:column;justify-content:flex-start}.cc-conversations__subtitle{display:flex;justify-content:flex-start;width:100%;align-items:center;min-height:22px}.cc-conversations__threadview{height:12px;display:flex;justify-content:flex-start;width:100%;align-items:center}.cc-conversations__badge{display:flex;align-items:flex-end;justify-content:flex-end;width:100%;padding-right:8px}cometchat-list-item{padding:0 8px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }, { type: i2.DomSanitizer }]; }, propDecorators: { subtitleView: [{
type: Input
}], title: [{
type: Input
}], options: [{
type: Input
}], searchPlaceHolder: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], disableReceipt: [{
type: Input
}], hideReceipt: [{
type: Input
}], disableTyping: [{
type: Input
}], deliveredIcon: [{
type: Input
}], readIcon: [{
type: Input
}], errorIcon: [{
type: Input
}], datePattern: [{
type: Input
}], onError: [{
type: Input
}], sentIcon: [{
type: Input
}], privateGroupIcon: [{
type: Input
}], protectedGroupIcon: [{
type: Input
}], passwordGroupIcon: [{
type: Input
}], customSoundForMessages: [{
type: Input
}], activeConversation: [{
type: Input
}], searchIconURL: [{
type: Input
}], hideSearch: [{
type: Input
}], conversationsRequestBuilder: [{
type: Input
}], emptyStateView: [{
type: Input
}], onSelect: [{
type: Input
}], loadingIconURL: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], titleAlignment: [{
type: Input
}], listItemView: [{
type: Input
}], menu: [{
type: Input
}], hideSeparator: [{
type: Input
}], searchPlaceholder: [{
type: Input
}], hideError: [{
type: Input
}], selectionMode: [{
type: Input
}], disableSoundForMessages: [{
type: Input
}], confirmDialogTitle: [{
type: Input
}], confirmButtonText: [{
type: Input
}], cancelButtonText: [{
type: Input
}], confirmDialogMessage: [{
type: Input
}], onItemClick: [{
type: Input
}], deleteConversationDialogStyle: [{
type: Input
}], backdropStyle: [{
type: Input
}], badgeStyle: [{
type: Input
}], dateStyle: [{
type: Input
}], conversationsStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], typingIndicatorText: [{
type: Input
}], threadIndicatorText: [{
type: Input
}], avatarStyle: [{
type: Input
}], receiptStyle: [{
type: Input
}], loggedInUser: [{
type: Input
}], disableMentions: [{
type: Input
}], textFormatters: [{
type: Input
}] } });
class CometChatConversations {
}
CometChatConversations.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversations, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatConversations.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversations, declarations: [CometChatConversationsComponent], imports: [CommonModule,
CometChatList], exports: [CometChatConversationsComponent] });
CometChatConversations.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversations, imports: [[
CommonModule,
CometChatList
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversations, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatConversationsComponent],
imports: [
CommonModule,
CometChatList
],
exports: [CometChatConversationsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatMessageBubbleComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.messageBubbleStyle = {
width: "100%",
height: "auto",
background: "",
borderRadius: "12px",
border: "none"
};
this.alignment = MessageBubbleAlignment.right;
this.options = [];
this.id = undefined;
this.optionsStyle = {
width: "",
height: "",
border: "1px solid #e8e8e8",
borderRadius: "8px",
submenuWidth: "100%",
submenuHeight: "inherit",
submenuBorder: "1px solid #e8e8e8",
submenuBorderRadius: "8px",
moreIconTint: "grey"
};
this.moreIconURL = "assets/moreicon.svg";
this.topMenuSize = 3;
this.theme = new CometChatTheme({});
this.uikitConstant = MessageBubbleAlignment;
this.isHovering = false;
this.wrapperStyle = () => {
switch (this.alignment) {
case MessageBubbleAlignment.right:
return {
display: "flex",
justifyContent: "flex-end"
};
case MessageBubbleAlignment.left:
return {
display: "flex",
justifyContent: "flex-start"
};
case MessageBubbleAlignment.center:
return {
display: "flex",
justifyContent: "center"
};
default:
return {
display: "flex",
justifyContent: "center"
};
}
};
this.bubbleStyle = () => {
return {
...this.messageBubbleStyle,
display: "flex",
flexDirection: "column",
alignItems: "flex-start"
};
};
this.optionsStyles = () => {
return {
justifyContent: this.alignment == MessageBubbleAlignment.left ? "flex-start" : "flex-end",
top: this.headerView && this.alignment == MessageBubbleAlignment.left ? "-8px" : "-28px",
background: this.optionsStyle?.background,
border: 'none',
borderRadius: this.optionsStyle?.borderRadius,
};
};
}
ngOnChanges(changes) {
}
ngOnInit() {
this.optionsStyle = new MenuListStyle({
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
borderRadius: "8px",
background: this.themeService.theme.palette.getBackground(),
submenuWidth: "100%",
submenuHeight: "100%",
submenuBorder: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
submenuBorderRadius: "8px",
submenuBackground: this.themeService.theme.palette.getBackground(),
moreIconTint: this.themeService.theme.palette.getAccent()
});
}
/**
* hide show menu options on hover
* @param {MouseEvent} event?
*/
hideShowMenuOption(event) {
setTimeout(() => {
this.isHovering = event?.type === "mouseenter";
this.ref.detectChanges();
}, 0);
}
/**
* @param {any} event
*/
onOptionClick(event) {
const onClick = event?.detail?.data?.onClick;
if (onClick) {
onClick(this.id, event?.detail?.event);
}
this.isHovering = false;
this.ref.detectChanges();
}
bubbleAlignmentStyle() {
return {
display: "flex",
justifyContent: "flex-start",
alignItems: this.alignment == MessageBubbleAlignment.left ? "flex-start" : "flex-end",
};
}
titleStyle() {
return {
display: "flex",
justifyContent: this.alignment == MessageBubbleAlignment.left ? "flex-start" : "flex-end",
alignItems: "flex-start"
};
}
}
CometChatMessageBubbleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageBubbleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatMessageBubbleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: { messageBubbleStyle: "messageBubbleStyle", alignment: "alignment", options: "options", id: "id", leadingView: "leadingView", headerView: "headerView", replyView: "replyView", contentView: "contentView", threadView: "threadView", footerView: "footerView", bottomView: "bottomView", statusInfoView: "statusInfoView", moreIconURL: "moreIconURL", topMenuSize: "topMenuSize" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-bubble__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-message-bubble__container\"\n (mouseenter)=\"hideShowMenuOption($event)\"\n (mouseleave)=\"hideShowMenuOption($event)\">\n <div class=\"cc-message-bubble__avatar\" *ngIf=\"leadingView\">\n <ng-container *ngTemplateOutlet=\"leadingView\">\n </ng-container>\n </div>\n <div class=\"cc-message-bubble\" [ngStyle]=\"bubbleAlignmentStyle()\">\n <div class=\"cc-message-bubble__title\" [ngStyle]=\"titleStyle()\"\n *ngIf=\"headerView\">\n <ng-container [ngTemplateOutlet]=\"headerView\">\n </ng-container>\n </div>\n <div class=\"cc-messageoptions\"\n *ngIf=\"options && options.length >= 1 && isHovering\"\n [ngStyle]=\"optionsStyles()\">\n <cometchat-menu-list [parentClassName]=\"'cc-message-list__wrapper'\" [moreIconURL]=\"moreIconURL\"\n [topMenuSize]=\"topMenuSize\" [menuListStyle]=\"optionsStyle\"\n [data]=\"options\" (cc-menu-clicked)=\"onOptionClick($event)\">\n </cometchat-menu-list>\n </div>\n <div class=\"cc-message-bubble__content\" [ngStyle]=\"bubbleStyle()\">\n <ng-container *ngTemplateOutlet=\"replyView\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentView\">\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"statusInfoView\">\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"bottomView\">\n </ng-container>\n\n <div>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"footerView\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"threadView\">\n </ng-container>\n\n </div>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}.cc-message-bubble__wrapper{position:relative}.cc-message-bubble__container{padding-right:8px;border-radius:inherit;display:flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;max-width:65%}.cc-message-bubble{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;min-width:0;padding:8px 2px;border-radius:inherit;height:100%}.cc-message-bubble__avatar{position:relative;border-radius:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;padding:8px 4px;margin-top:5px}.cc-message-bubble__title:empty:before{display:none}.cc-message-bubble__title:empty:after{display:block;width:100%;height:20px;padding:0 8px}.cc-message-bubble__content{border-radius:8px;width:100%;overflow:hidden}.cc-message-bubble__content .ng-star-inserted{border-radius:inherit}.cc-messageoptions{position:absolute;top:-4px;display:flex;align-items:center;justify-content:flex-end;z-index:1}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageBubbleComponent, decorators: [{
type: Component,
args: [{ selector: 'cometchat-message-bubble', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-bubble__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-message-bubble__container\"\n (mouseenter)=\"hideShowMenuOption($event)\"\n (mouseleave)=\"hideShowMenuOption($event)\">\n <div class=\"cc-message-bubble__avatar\" *ngIf=\"leadingView\">\n <ng-container *ngTemplateOutlet=\"leadingView\">\n </ng-container>\n </div>\n <div class=\"cc-message-bubble\" [ngStyle]=\"bubbleAlignmentStyle()\">\n <div class=\"cc-message-bubble__title\" [ngStyle]=\"titleStyle()\"\n *ngIf=\"headerView\">\n <ng-container [ngTemplateOutlet]=\"headerView\">\n </ng-container>\n </div>\n <div class=\"cc-messageoptions\"\n *ngIf=\"options && options.length >= 1 && isHovering\"\n [ngStyle]=\"optionsStyles()\">\n <cometchat-menu-list [parentClassName]=\"'cc-message-list__wrapper'\" [moreIconURL]=\"moreIconURL\"\n [topMenuSize]=\"topMenuSize\" [menuListStyle]=\"optionsStyle\"\n [data]=\"options\" (cc-menu-clicked)=\"onOptionClick($event)\">\n </cometchat-menu-list>\n </div>\n <div class=\"cc-message-bubble__content\" [ngStyle]=\"bubbleStyle()\">\n <ng-container *ngTemplateOutlet=\"replyView\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentView\">\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"statusInfoView\">\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"bottomView\">\n </ng-container>\n\n <div>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"footerView\">\n </ng-container>\n <ng-container *ngTemplateOutlet=\"threadView\">\n </ng-container>\n\n </div>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}.cc-message-bubble__wrapper{position:relative}.cc-message-bubble__container{padding-right:8px;border-radius:inherit;display:flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;max-width:65%}.cc-message-bubble{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;min-width:0;padding:8px 2px;border-radius:inherit;height:100%}.cc-message-bubble__avatar{position:relative;border-radius:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;padding:8px 4px;margin-top:5px}.cc-message-bubble__title:empty:before{display:none}.cc-message-bubble__title:empty:after{display:block;width:100%;height:20px;padding:0 8px}.cc-message-bubble__content{border-radius:8px;width:100%;overflow:hidden}.cc-message-bubble__content .ng-star-inserted{border-radius:inherit}.cc-messageoptions{position:absolute;top:-4px;display:flex;align-items:center;justify-content:flex-end;z-index:1}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { messageBubbleStyle: [{
type: Input
}], alignment: [{
type: Input
}], options: [{
type: Input
}], id: [{
type: Input
}], leadingView: [{
type: Input
}], headerView: [{
type: Input
}], replyView: [{
type: Input
}], contentView: [{
type: Input
}], threadView: [{
type: Input
}], footerView: [{
type: Input
}], bottomView: [{
type: Input
}], statusInfoView: [{
type: Input
}], moreIconURL: [{
type: Input
}], topMenuSize: [{
type: Input
}] } });
class AIAssistBotMessageListComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.messagesList = [];
this.botMessagesList = [];
this.hideSearch = true;
this.subtitleText = localize("COMETCHAT_ASK_BOT_SUBTITLE");
this.sendIconUrl = "assets/Send.svg";
this.waitIcon = "assets/wait.svg";
this.errorIcon = "assets/warning-small.svg";
this.botFirstMessageText = localize("COMETCHAT_BOT_FIRST_MESSAGE");
this.closeButtonIconURL = "assets/close2x.svg";
this.sendButtonIconURL = "assets/Send.svg";
this.avatarStyle = {
borderRadius: "16px",
width: "28px",
height: "28px",
};
this.aiBotChatHeaderStyle = {
backGround: "rgba(20, 20, 20, 0.15)",
};
this.aiBotChatContainerStyle = {
backGround: "rgba(255,255,255)",
};
this.datePattern = DatePatterns.time;
this.bubbleDateStyle = {};
this.messageTemplate = [];
this.alignment = MessageListAlignment.standard;
this.receipts = Receipts.wait;
this.currentMessageObject = null;
this.typesMap = {};
this.messageTypesMap = {};
this.textInputStyle = {
width: "98%",
dividerColor: "transparent",
background: "transparent",
border: "2px solid red transparent",
};
this.sendButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.themeService.theme.palette.getPrimary(),
};
this.messageInputChanged = (event) => {
const text = event?.detail?.value?.trim();
this.inputValue = text;
};
this.closeButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.themeService.theme.palette.getPrimary(),
};
this.labelStyle = {
textFont: "400 11px Inter",
textColor: "grey",
};
}
ngOnInit() {
this.setAvatarStyle();
this.setAiBotChatHeader();
this.setAiBotChatContainerStyle();
let receiverId = this.user
? this.user?.getUid()
: this.group?.getGuid();
let receiverType = this.user
? CometChatUIKitConstants.MessageReceiverType.user
: CometChatUIKitConstants.MessageReceiverType.group;
let firstMessage = new CometChat.TextMessage(this.currentAskAIBot?.id, this.botFirstMessageText, receiverType);
firstMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
this.botMessagesList.push(firstMessage);
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.setMessagesStyle();
this.subscribeToEvents();
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "28px",
height: "28px",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setAiBotChatHeader() {
let defaultStyle = {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "10px",
height: "40px",
background: this.themeService.theme?.palette.getAccent200(),
};
this.aiBotChatHeaderStyle = {
...defaultStyle,
...this.aiBotChatHeaderStyle,
};
}
setAiBotChatContainerStyle() {
let defaultStyle = {
background: this.themeService.theme.palette.getBackground(),
};
this.aiBotChatContainerStyle = {
...defaultStyle,
...this.aiBotChatContainerStyle,
};
}
ngOnDestroy() {
this.unSubscribeToEvent();
}
subscribeToEvents() {
this.ccChatChanged = CometChatUIEvents.ccActiveChatChanged.subscribe(() => {
CometChatUIEvents.ccShowPanel.next({
child: { showBotView: false },
});
});
}
unSubscribeToEvent() {
this.ccChatChanged?.unsubscribe();
}
onError(error) {
throw new Error("Method not implemented.");
}
generateRandomString(length) {
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let randomString = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
randomString += characters.charAt(randomIndex);
}
return randomString;
}
handleClick() {
this.receipts = Receipts.wait;
let receiverId = this.user
? this.user?.getUid()
: this.group?.getGuid();
let receiverType = this.user
? CometChatUIKitConstants.MessageReceiverType.user
: CometChatUIKitConstants.MessageReceiverType.group;
let botUid = this.currentAskAIBot?.id;
let question = this.inputValue;
this.inputRef?.nativeElement?.emptyInputField();
let query = new CometChat.TextMessage(this.loggedInUser.getUid(), question, receiverType);
// Generate a random string for the message ID
let randomString = this.generateRandomString(10); // Specify the desired length
// Convert the random string to a number (may not be the best practice)
let randomStringAsNumber = parseInt(randomString, 36); // 36 is the radix for alphanumeric characters
query.setId(randomStringAsNumber);
query.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
this.currentMessageObject = query;
if (question.trim().length > 0) {
this.botMessagesList.push(query);
CometChat.askBot(receiverId, receiverType, botUid, question)
.then((response) => {
return response;
})
.then((messageText) => {
this.inputValue = "";
this.receipts = null;
let answer = new CometChat.TextMessage(botUid, messageText, receiverType);
answer.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
this.botMessagesList.push(answer);
this.ref.detectChanges();
})
.catch((error) => {
this.receipts = Receipts.error;
console.error("error", error);
});
}
}
setMessageBubbleStyle(msg) {
let style;
if (msg.getReceiverId() !== this.loggedInUser?.getUid()) {
style = {
background: this.themeService.theme.palette.getAccent100(),
borderRadius: "12px",
};
}
else {
style = {
background: this.themeService.theme.palette.getPrimary(),
borderRadius: "12px",
};
}
return style;
}
getBubbleAlignment(message) {
return message.getReceiverId() !== this.loggedInUser?.getUid()
? MessageBubbleAlignment.left
: MessageBubbleAlignment.right;
}
onCloseDetails() {
CometChatUIEvents.ccShowPanel.next({
child: { showBotView: false },
});
}
setMessagesStyle() {
this.bubbleDateStyle = {
textColor: this.themeService.theme.palette.getAccent600(),
textFont: fontHelper(this.themeService.theme.typography.caption2),
padding: "3px"
};
}
getBotTitleStyle() {
return {
font: fontHelper(this.themeService.theme.typography.subtitle1),
color: this.themeService.theme.palette.getAccent(),
};
}
getBotSubtitleStyle() {
return {
font: fontHelper(this.themeService.theme.typography.caption2),
color: this.themeService.theme.palette.getAccent500(),
};
}
}
AIAssistBotMessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
AIAssistBotMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: { hideSearch: "hideSearch", footerView: "footerView", user: "user", group: "group", currentAskAIBot: "currentAskAIBot", subtitleText: "subtitleText", sendIconUrl: "sendIconUrl", waitIcon: "waitIcon", errorIcon: "errorIcon", botFirstMessageText: "botFirstMessageText", closeButtonIconURL: "closeButtonIconURL", sendButtonIconURL: "sendButtonIconURL", avatarStyle: "avatarStyle", aiBotChatHeaderStyle: "aiBotChatHeaderStyle", aiBotChatContainerStyle: "aiBotChatContainerStyle", datePattern: "datePattern", alignment: "alignment" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"cc-ai-assist-message-list__wrapper\"\n [ngStyle]=\"aiBotChatContainerStyle\">\n <div class=\"cc-ai-assist-message-list__header-view\"\n [ngStyle]=\"aiBotChatHeaderStyle\">\n <div class=\"cc-ai-assist-message-list__header-avatar\">\n <cometchat-avatar [image]=\"currentAskAIBot?.iconURL\"\n [avatarStyle]=\"avatarStyle\">\n </cometchat-avatar>\n <div class=\"cc-ai-assist-message-list__header-bot-name\">\n\n\n <div [ngStyle]=\"getBotTitleStyle()\">\n {{currentAskAIBot?.title}}\n </div>\n <div [ngStyle]=\"getBotSubtitleStyle()\">\n {{subtitleText}}\n </div>\n </div>\n\n </div>\n\n <cometchat-button [iconURL]=\"closeButtonIconURL\"\n class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n </div>\n <div class=\"cc-ai-assist-message-list\">\n <cometchat-list [listItemView]=\"listItem\" [list]=\"botMessagesList\"\n [hideSearch]=\"hideSearch\">\n </cometchat-list>\n <ng-template #listItem let-message>\n <cometchat-message-bubble [bottomView]=\"null\"\n [statusInfoView]=\"statusInfoView\" [threadView]=\"null\"\n [contentView]=\"contentView\"\n [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n [alignment]=\"getBubbleAlignment(message)\" [leadingView]=\"leadingView\"\n [headerView]=\"bubbleHeader\">\n <ng-template #contentView>\n <div class=\"cc-ai-assist-message\">\n {{message.data.text}}\n </div>\n </ng-template>\n <ng-template #leadingView>\n\n </ng-template>\n <ng-template #bubbleHeader>\n\n </ng-template>\n <ng-template #statusInfoView>\n <div class=\"cc__assist-bot__statusinfo\">\n\n <cometchat-date [pattern]=\"datePattern\"\n [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"bubbleDateStyle\"></cometchat-date>\n <cometchat-receipt\n *ngIf=\"message?.receiverId !==currentAskAIBot.id && message?.getId()===currentMessageObject?.getId()\"\n [receipt]=\"receipts\" [waitIcon]=\"waitIcon\"\n [errorIcon]=\"errorIcon\"></cometchat-receipt>\n </div>\n </ng-template>\n </cometchat-message-bubble>\n <hr>\n </ng-template>\n </div>\n\n <div class=\"cc-ai-assist__input-wrapper\">\n <div class=\"cc-ai-assist__input\">\n <cometchat-text-input [textInputStyle]=\"textInputStyle\" #inputRef\n (cc-text-input-changed)=\"messageInputChanged($event)\"\n (cc-text-input-entered)=\"handleClick()\"></cometchat-text-input>\n <cometchat-button [iconURL]=\"sendIconUrl\"\n (cc-button-clicked)=\"handleClick()\"\n [buttonStyle]=\"sendButtonStyle\"></cometchat-button>\n </div>\n </div>\n</div>\n", styles: [".cc-ai-assist-message-list__wrapper{position:absolute;right:0;top:0;background-color:#fff;width:50%;height:100%}.cc-ai-assist-message-list__header-view{display:flex;justify-content:space-between;align-items:center;height:5%;padding:5px;background-color:#14141426}.cc-ai-assist-message-list__header-avatar{display:flex;align-items:center;gap:8px}.cc-ai-assist-message-list__header-bot-name{display:flex;flex-direction:column}.cc-ai-assist-message-list__header-bot-name>small{color:#14141494;font-family:inter}.cc-ai-assist-message-list{height:85%;border-bottom:1px solid RGB(229,231,233)}.cc-ai-assist-message{padding:8px 12px}.cc-ai-assist__input-wrapper{width:100%;height:7%;position:absolute;bottom:0;padding-left:7px}.cc-ai-assist__input{display:flex;width:98%;align-items:center}cometchat-text-input{width:95%}.cc__assist-bot__statusinfo{display:flex;justify-content:flex-end;align-items:center;width:100%;padding:0 4px;box-sizing:border-box}cometchat-date{margin-top:-2px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }, { type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "statusInfoView", "moreIconURL", "topMenuSize"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageListComponent, decorators: [{
type: Component,
args: [{ selector: "aiassist-bot-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-ai-assist-message-list__wrapper\"\n [ngStyle]=\"aiBotChatContainerStyle\">\n <div class=\"cc-ai-assist-message-list__header-view\"\n [ngStyle]=\"aiBotChatHeaderStyle\">\n <div class=\"cc-ai-assist-message-list__header-avatar\">\n <cometchat-avatar [image]=\"currentAskAIBot?.iconURL\"\n [avatarStyle]=\"avatarStyle\">\n </cometchat-avatar>\n <div class=\"cc-ai-assist-message-list__header-bot-name\">\n\n\n <div [ngStyle]=\"getBotTitleStyle()\">\n {{currentAskAIBot?.title}}\n </div>\n <div [ngStyle]=\"getBotSubtitleStyle()\">\n {{subtitleText}}\n </div>\n </div>\n\n </div>\n\n <cometchat-button [iconURL]=\"closeButtonIconURL\"\n class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n </div>\n <div class=\"cc-ai-assist-message-list\">\n <cometchat-list [listItemView]=\"listItem\" [list]=\"botMessagesList\"\n [hideSearch]=\"hideSearch\">\n </cometchat-list>\n <ng-template #listItem let-message>\n <cometchat-message-bubble [bottomView]=\"null\"\n [statusInfoView]=\"statusInfoView\" [threadView]=\"null\"\n [contentView]=\"contentView\"\n [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n [alignment]=\"getBubbleAlignment(message)\" [leadingView]=\"leadingView\"\n [headerView]=\"bubbleHeader\">\n <ng-template #contentView>\n <div class=\"cc-ai-assist-message\">\n {{message.data.text}}\n </div>\n </ng-template>\n <ng-template #leadingView>\n\n </ng-template>\n <ng-template #bubbleHeader>\n\n </ng-template>\n <ng-template #statusInfoView>\n <div class=\"cc__assist-bot__statusinfo\">\n\n <cometchat-date [pattern]=\"datePattern\"\n [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"bubbleDateStyle\"></cometchat-date>\n <cometchat-receipt\n *ngIf=\"message?.receiverId !==currentAskAIBot.id && message?.getId()===currentMessageObject?.getId()\"\n [receipt]=\"receipts\" [waitIcon]=\"waitIcon\"\n [errorIcon]=\"errorIcon\"></cometchat-receipt>\n </div>\n </ng-template>\n </cometchat-message-bubble>\n <hr>\n </ng-template>\n </div>\n\n <div class=\"cc-ai-assist__input-wrapper\">\n <div class=\"cc-ai-assist__input\">\n <cometchat-text-input [textInputStyle]=\"textInputStyle\" #inputRef\n (cc-text-input-changed)=\"messageInputChanged($event)\"\n (cc-text-input-entered)=\"handleClick()\"></cometchat-text-input>\n <cometchat-button [iconURL]=\"sendIconUrl\"\n (cc-button-clicked)=\"handleClick()\"\n [buttonStyle]=\"sendButtonStyle\"></cometchat-button>\n </div>\n </div>\n</div>\n", styles: [".cc-ai-assist-message-list__wrapper{position:absolute;right:0;top:0;background-color:#fff;width:50%;height:100%}.cc-ai-assist-message-list__header-view{display:flex;justify-content:space-between;align-items:center;height:5%;padding:5px;background-color:#14141426}.cc-ai-assist-message-list__header-avatar{display:flex;align-items:center;gap:8px}.cc-ai-assist-message-list__header-bot-name{display:flex;flex-direction:column}.cc-ai-assist-message-list__header-bot-name>small{color:#14141494;font-family:inter}.cc-ai-assist-message-list{height:85%;border-bottom:1px solid RGB(229,231,233)}.cc-ai-assist-message{padding:8px 12px}.cc-ai-assist__input-wrapper{width:100%;height:7%;position:absolute;bottom:0;padding-left:7px}.cc-ai-assist__input{display:flex;width:98%;align-items:center}cometchat-text-input{width:95%}.cc__assist-bot__statusinfo{display:flex;justify-content:flex-end;align-items:center;width:100%;padding:0 4px;box-sizing:border-box}cometchat-date{margin-top:-2px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { hideSearch: [{
type: Input
}], footerView: [{
type: Input
}], user: [{
type: Input
}], group: [{
type: Input
}], currentAskAIBot: [{
type: Input
}], subtitleText: [{
type: Input
}], sendIconUrl: [{
type: Input
}], waitIcon: [{
type: Input
}], errorIcon: [{
type: Input
}], botFirstMessageText: [{
type: Input
}], closeButtonIconURL: [{
type: Input
}], sendButtonIconURL: [{
type: Input
}], avatarStyle: [{
type: Input
}], aiBotChatHeaderStyle: [{
type: Input
}], aiBotChatContainerStyle: [{
type: Input
}], datePattern: [{
type: Input
}], inputRef: [{
type: ViewChild,
args: ["inputRef", { static: false }]
}], alignment: [{
type: Input
}] } });
/**
*
* CometChatMessageInformationComponent is a used to render listitem component.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatMessageInformationComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.closeIconURL = "assets/close2x.svg";
this.title = localize("MESSAGE_INFORMATION");
this.onError = (error) => {
console.log(error);
};
this.messageInformationStyle = {
height: "500px",
width: "500px"
};
this.readIcon = "assets/message-read.svg";
this.deliveredIcon = "assets/message-delivered.svg";
this.listItemStyle = {};
this.emptyStateText = localize("NO_RECIPIENTS");
this.errorStateText = localize("SOMETHING_WRONG");
this.loadingIconURL = "assets/Spinner.svg";
this.receipts = [];
this.receiptStyle = new ReceiptStyle({
waitIconTint: this.themeService.theme.palette.getAccent700(),
sentIconTint: this.themeService.theme.palette.getAccent600(),
deliveredIconTint: this.themeService.theme.palette.getAccent600(),
readIconTint: this.themeService.theme.palette.getPrimary(),
errorIconTint: this.themeService.theme.palette.getError(),
height: "20px",
width: "20px",
background: "transparent"
});
this.isUserType = false;
this.deliveredReceipt = Receipts.delivered;
this.readReceipt = Receipts.read;
this.listStyle = {};
this.messageText = localize("MESSAGE");
this.receiptInfoText = localize("RECEIPT_INFORMATION");
this.emptyLabelStyle = {
textFont: '400 11px Inter',
textColor: "black"
};
this.dateStyle = {};
this.loggedInUser = null;
this.dividerStyle = {};
this.states = States.loading;
this.closeButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.themeService.theme.palette.getPrimary()
};
};
this.wrapperStyle = () => {
return {
height: this.messageInformationStyle.height,
width: this.messageInformationStyle.width,
background: this.messageInformationStyle.background,
border: this.messageInformationStyle.border,
borderRadius: this.messageInformationStyle.borderRadius
};
};
this.getCaptionStyle = () => {
return {
textFont: this.messageInformationStyle.captionTextFont,
textColor: this.messageInformationStyle.captionTextColor
};
};
}
ngOnChanges(changes) {
}
getDatePattern(timestamp) {
if (this.receiptDatePattern) {
return this.receiptDatePattern(timestamp);
}
else {
return undefined;
}
}
ngOnInit() {
this.setTheme();
CometChatUIKit.getLoggedinUser().then((user) => {
if (user) {
this.loggedInUser = user;
this.getMessageReceipts();
this.addMessageEventListeners();
}
});
}
setTheme() {
this.setMessageInfoStyle();
this.setListItemStyle();
this.listStyle = {
titleTextFont: this.messageInformationStyle.titleTextFont,
titleTextColor: this.messageInformationStyle.titleTextColor,
emptyStateTextFont: this.messageInformationStyle.emptyStateTextFont,
emptyStateTextColor: this.messageInformationStyle.emptyStateTextColor,
errorStateTextFont: this.messageInformationStyle.errorStateTextFont,
errorStateTextColor: this.messageInformationStyle.errorStateTextColor,
loadingIconTint: this.messageInformationStyle.loadingIconTint,
};
this.dividerStyle = {
background: this.messageInformationStyle.dividerTint,
height: "1px",
width: "100%",
};
this.dateStyle = {
textFont: '400 11px Inter',
textColor: this.themeService.theme.palette.getAccent600(),
background: "transparent",
height: "100%",
width: "100%",
};
this.ref.detectChanges();
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "fit-content",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "transparent",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: "transparent"
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setMessageInfoStyle() {
let defaultStyle = new MessageInformationStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
borderRadius: "8px",
subtitleTextColor: this.themeService.theme.palette.getAccent600(),
subtitleTextFont: fontHelper(this.themeService.theme.typography.caption2),
dividerTint: this.themeService.theme.palette.getAccent100(),
height: "500px",
width: "500px",
captionTextColor: this.themeService.theme.palette.getAccent600(),
captionTextFont: fontHelper(this.themeService.theme.typography.caption2)
});
this.messageInformationStyle = { ...defaultStyle, ...this.messageInformationStyle };
}
ngOnDestroy() {
this.onMessagesDelivered.unsubscribe();
this.onMessagesRead.unsubscribe();
}
addMessageEventListeners() {
try {
this.onMessagesDelivered = CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
if (this.message?.getId() == Number(messageReceipt.getMessageId())) {
this.updateReceipt(messageReceipt);
this.message?.setDeliveredAt(messageReceipt.getDeliveredAt());
this.ref.detectChanges();
}
});
this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
if (this.message?.getId() == Number(messageReceipt.getMessageId())) {
this.updateReceipt(messageReceipt);
this.message?.setReadAt(messageReceipt.getReadAt());
this.ref.detectChanges();
}
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
getAvatarUrl() {
return this.isUserType ? this.message.getReceiver().getAvatar() : "";
}
getUserReceipt() {
return this.message.getReadAt() || this.message.getDeliveredAt();
}
getMessageReceipt() {
let receipt = MessageReceiptUtils.getReceiptStatus(this.message);
return receipt;
}
updateReceipt(receipt) {
let messageKey = this.receipts.findIndex((m) => m.getSender().getUid() === receipt.getSender().getUid());
if (messageKey > -1) {
if (receipt.getReceiptType() == receipt.RECEIPT_TYPE.READ_RECEIPT) {
this.receipts[messageKey].setReadAt(receipt.getReadAt());
}
else {
this.receipts[messageKey].setDeliveredAt(receipt.getDeliveredAt());
}
}
this.ref.detectChanges();
}
getMessageReceipts() {
if (this.message.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
this.isUserType = true;
this.emptyStateText = localize("NO_RECIPIENT");
this.states = States.loaded;
this.ref.detectChanges();
}
else {
this.emptyStateText = localize("NO_RECIPIENTS");
this.states = States.loading;
this.isUserType = false;
CometChat.getMessageReceipts(this.message.getId()).then((receipts) => {
this.receipts = receipts.filter((receipt) => receipt.getSender().getUid() !== this.loggedInUser?.getUid());
this.states = this.receipts.length > 0 ? States.loaded : States.empty;
this.ref.detectChanges();
})
.catch((err) => {
this.states = States.error;
});
}
}
closeClicked() {
if (this.onClose) {
this.onClose();
}
}
getSubtitleStyle() {
return {
textFont: this.messageInformationStyle.subtitleTextFont,
textColor: this.messageInformationStyle.subtitleTextColor
};
}
getTitleStyle() {
return {
textFont: this.messageInformationStyle.titleTextFont,
textColor: this.messageInformationStyle.titleTextColor
};
}
}
CometChatMessageInformationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageInformationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatMessageInformationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: { closeIconURL: "closeIconURL", message: "message", title: "title", template: "template", bubbleView: "bubbleView", subtitleView: "subtitleView", listItemView: "listItemView", receiptDatePattern: "receiptDatePattern", onError: "onError", messageInformationStyle: "messageInformationStyle", readIcon: "readIcon", deliveredIcon: "deliveredIcon", onClose: "onClose", listItemStyle: "listItemStyle", emptyStateText: "emptyStateText", errorStateText: "errorStateText", emptyStateView: "emptyStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", errorStateView: "errorStateView" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-information__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-message-information__header\">\n <div class=\"cc-message-information__title\">\n <cometchat-label [text]=\"title\"\n [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n </div>\n <div class=\"cc-close-button\">\n <cometchat-button [iconURL]=\"closeIconURL\"\n [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n </cometchat-button>\n </div>\n </div>\n <div class=\"cc-message-information__bubble\">\n <cometchat-label class=\"cc-message-information__caption\"\n [labelStyle]=\"getCaptionStyle()\" [text]=\"messageText\"></cometchat-label>\n <div class=\"cc-message-information__bubble-view\">\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n <ng-container\n *ngTemplateOutlet=\"bubbleView; context:{ $implicit: message }\">\n </ng-container>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n </div>\n </div>\n <div class=\"cc-message-information__list-item\">\n <cometchat-label class=\"cc-message-information__caption\"\n [labelStyle]=\"getCaptionStyle()\"\n [text]=\"receiptInfoText\"></cometchat-label>\n <div class=\"cc-message-information__bubble-view\"\n *ngIf=\"isUserType; else listView\">\n <ng-container *ngIf=\"listItemView; else userListitem\">\n <ng-container\n *ngTemplateOutlet=\"listItemView; context:{ $implicit: message }\">\n </ng-container>\n </ng-container>\n <ng-template #userListitem>\n <div *ngIf=\"!getUserReceipt(); else userReceiptView\"\n class=\"cc-empty-state-view\">\n <cometchat-label *ngIf=\"!emptyStateView else customEmptyView\"\n [text]=\"emptyStateText\"\n [labelStyle]=\"emptyLabelStyle\"></cometchat-label>\n <ng-template #customEmptyView>\n <ng-container *ngTemplateOutlet=\"emptyStateView\">\n </ng-container>\n </ng-template>\n </div>\n <ng-template #userReceiptView>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n <cometchat-list-item [hideSeparator]=\"true\" [id]=\"message.getId()\"\n [title]=\"message.getReceiver().getName()\"\n [listItemStyle]=\"listItemStyle\" [avatarURL]=\"getAvatarUrl()\"\n [avatarName]=\"message.getReceiver().getName()\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #userSubtitle>\n <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n <div class=\"cc-list-item__subtitle\">\n <div class=\"cc-list-item__delivered-receipt\"\n *ngIf=\"message.getDeliveredAt()\">\n <div class=\"cc-list-item__receipt\">\n <cometchat-receipt [receipt]=\"deliveredReceipt\"\n [receiptStyle]=\"receiptStyle\"\n [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Delivered'\"\n [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n </div>\n <cometchat-date [timestamp]=\"message.getDeliveredAt()\"\n [dateStyle]=\"dateStyle\"></cometchat-date>\n </div>\n <div class=\"cc-list-item__read-receipt\"\n *ngIf=\"message.getReadAt()\">\n <div class=\"cc-list-item__receipt\">\n <cometchat-receipt [receipt]=\"readReceipt\"\n [receiptStyle]=\"receiptStyle\"\n [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Read'\"\n [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n </div>\n <cometchat-date [timestamp]=\"message.getReadAt()\"\n [dateStyle]=\"dateStyle\"></cometchat-date>\n </div>\n </div>\n </div>\n </ng-template>\n </cometchat-list-item>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n </ng-template>\n </ng-template>\n </div>\n </div>\n</div>\n<!-- list item view -->\n<ng-template #listView>\n <cometchat-list [list]=\"receipts\"\n [listItemView]=\"listItemView ? listItemView : listItem\" [hideSearch]=\"true\"\n [state]=\"states\" [emptyStateText]=\"emptyStateText\"\n [errorStateText]=\"errorStateText\" [loadingIconURL]=\"loadingIconURL\"\n [loadingStateView]=\"loadingStateView\" [errorStateView]=\"errorStateView\"\n [emptyStateView]=\"emptyStateView\" [title]=\"''\"></cometchat-list>\n</ng-template>\n<ng-template #listItem let-messageReceipt>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n <cometchat-list-item [hideSeparator]=\"true\"\n [title]=\"messageReceipt.getSender().getName()\"\n [listItemStyle]=\"listItemStyle\"\n [avatarURL]=\"messageReceipt.getSender()?.getAvatar()\"\n [avatarName]=\"messageReceipt.getSender().getName()\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #userSubtitle>\n <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n <div class=\"cc-list-item__subtitle\">\n <div class=\"cc-list-item__delivered-receipt\"\n *ngIf=\"messageReceipt.getDeliveredAt()\">\n <div class=\"cc-list-item__receipt\">\n <cometchat-receipt [receipt]=\"deliveredReceipt\"\n [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Delivered'\"\n [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n </div>\n <cometchat-date [timestamp]=\"messageReceipt.getDeliveredAt()\"\n [dateStyle]=\"dateStyle\"></cometchat-date>\n </div>\n <div class=\"cc-list-item__read-receipt\"\n *ngIf=\"messageReceipt.getReadAt()\">\n <div class=\"cc-list-item__receipt\">\n <cometchat-receipt [receipt]=\"readReceipt\"\n [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Read'\"\n [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n </div>\n <cometchat-date [timestamp]=\"messageReceipt.getReadAt()\"\n [dateStyle]=\"dateStyle\"></cometchat-date>\n </div>\n </div>\n </div>\n </ng-template>\n </cometchat-list-item>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n</ng-template>\n", styles: [".cc-message-information__wrapper{height:500px;width:500px;background-color:#fff;padding:8px;display:flex;overflow:hidden;flex-direction:column}*{margin:0;padding:0;box-sizing:border-box}.cc-message-information__title{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}.cc-close-button{padding:8px 0}.cc-message-information__header{display:flex;flex-direction:row;justify-content:flex-end}.cc-message-information__bubble-header{display:flex;align-items:flex-start;justify-content:flex-start;padding-bottom:2px}.cc-message-information__bubble-view{overflow-y:auto;max-height:150px;overflow-x:hidden}.cc-message-information__bubble,.cc-message-information__list-item{margin:8px 0;overflow:hidden}.cc-list-item__delivered-receipt,.cc-list-item__read-receipt{display:flex;justify-content:space-between}.cc-list-item__receipt{display:flex}cometchat-label{display:flex;align-items:center;justify-content:flex-start}.cc-empty-state-view{display:flex;align-items:flex-start;justify-content:center}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageInformationComponent, decorators: [{
type: Component,
args: [{ selector: 'cometchat-message-information', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-information__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-message-information__header\">\n <div class=\"cc-message-information__title\">\n <cometchat-label [text]=\"title\"\n [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n </div>\n <div class=\"cc-close-button\">\n <cometchat-button [iconURL]=\"closeIconURL\"\n [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n </cometchat-button>\n </div>\n </div>\n <div class=\"cc-message-information__bubble\">\n <cometchat-label class=\"cc-message-information__caption\"\n [labelStyle]=\"getCaptionStyle()\" [text]=\"messageText\"></cometchat-label>\n <div class=\"cc-message-information__bubble-view\">\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n <ng-container\n *ngTemplateOutlet=\"bubbleView; context:{ $implicit: message }\">\n </ng-container>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n </div>\n </div>\n <div class=\"cc-message-information__list-item\">\n <cometchat-label class=\"cc-message-information__caption\"\n [labelStyle]=\"getCaptionStyle()\"\n [text]=\"receiptInfoText\"></cometchat-label>\n <div class=\"cc-message-information__bubble-view\"\n *ngIf=\"isUserType; else listView\">\n <ng-container *ngIf=\"listItemView; else userListitem\">\n <ng-container\n *ngTemplateOutlet=\"listItemView; context:{ $implicit: message }\">\n </ng-container>\n </ng-container>\n <ng-template #userListitem>\n <div *ngIf=\"!getUserReceipt(); else userReceiptView\"\n class=\"cc-empty-state-view\">\n <cometchat-label *ngIf=\"!emptyStateView else customEmptyView\"\n [text]=\"emptyStateText\"\n [labelStyle]=\"emptyLabelStyle\"></cometchat-label>\n <ng-template #customEmptyView>\n <ng-container *ngTemplateOutlet=\"emptyStateView\">\n </ng-container>\n </ng-template>\n </div>\n <ng-template #userReceiptView>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n <cometchat-list-item [hideSeparator]=\"true\" [id]=\"message.getId()\"\n [title]=\"message.getReceiver().getName()\"\n [listItemStyle]=\"listItemStyle\" [avatarURL]=\"getAvatarUrl()\"\n [avatarName]=\"message.getReceiver().getName()\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #userSubtitle>\n <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n <div class=\"cc-list-item__subtitle\">\n <div class=\"cc-list-item__delivered-receipt\"\n *ngIf=\"message.getDeliveredAt()\">\n <div class=\"cc-list-item__receipt\">\n <cometchat-receipt [receipt]=\"deliveredReceipt\"\n [receiptStyle]=\"receiptStyle\"\n [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Delivered'\"\n [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n </div>\n <cometchat-date [timestamp]=\"message.getDeliveredAt()\"\n [dateStyle]=\"dateStyle\"></cometchat-date>\n </div>\n <div class=\"cc-list-item__read-receipt\"\n *ngIf=\"message.getReadAt()\">\n <div class=\"cc-list-item__receipt\">\n <cometchat-receipt [receipt]=\"readReceipt\"\n [receiptStyle]=\"receiptStyle\"\n [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Read'\"\n [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n </div>\n <cometchat-date [timestamp]=\"message.getReadAt()\"\n [dateStyle]=\"dateStyle\"></cometchat-date>\n </div>\n </div>\n </div>\n </ng-template>\n </cometchat-list-item>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n </ng-template>\n </ng-template>\n </div>\n </div>\n</div>\n<!-- list item view -->\n<ng-template #listView>\n <cometchat-list [list]=\"receipts\"\n [listItemView]=\"listItemView ? listItemView : listItem\" [hideSearch]=\"true\"\n [state]=\"states\" [emptyStateText]=\"emptyStateText\"\n [errorStateText]=\"errorStateText\" [loadingIconURL]=\"loadingIconURL\"\n [loadingStateView]=\"loadingStateView\" [errorStateView]=\"errorStateView\"\n [emptyStateView]=\"emptyStateView\" [title]=\"''\"></cometchat-list>\n</ng-template>\n<ng-template #listItem let-messageReceipt>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n <cometchat-list-item [hideSeparator]=\"true\"\n [title]=\"messageReceipt.getSender().getName()\"\n [listItemStyle]=\"listItemStyle\"\n [avatarURL]=\"messageReceipt.getSender()?.getAvatar()\"\n [avatarName]=\"messageReceipt.getSender().getName()\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #userSubtitle>\n <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n <div class=\"cc-list-item__subtitle\">\n <div class=\"cc-list-item__delivered-receipt\"\n *ngIf=\"messageReceipt.getDeliveredAt()\">\n <div class=\"cc-list-item__receipt\">\n <cometchat-receipt [receipt]=\"deliveredReceipt\"\n [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Delivered'\"\n [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n </div>\n <cometchat-date [timestamp]=\"messageReceipt.getDeliveredAt()\"\n [dateStyle]=\"dateStyle\"></cometchat-date>\n </div>\n <div class=\"cc-list-item__read-receipt\"\n *ngIf=\"messageReceipt.getReadAt()\">\n <div class=\"cc-list-item__receipt\">\n <cometchat-receipt [receipt]=\"readReceipt\"\n [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\"\n [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Read'\"\n [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n </div>\n <cometchat-date [timestamp]=\"messageReceipt.getReadAt()\"\n [dateStyle]=\"dateStyle\"></cometchat-date>\n </div>\n </div>\n </div>\n </ng-template>\n </cometchat-list-item>\n <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n</ng-template>\n", styles: [".cc-message-information__wrapper{height:500px;width:500px;background-color:#fff;padding:8px;display:flex;overflow:hidden;flex-direction:column}*{margin:0;padding:0;box-sizing:border-box}.cc-message-information__title{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}.cc-close-button{padding:8px 0}.cc-message-information__header{display:flex;flex-direction:row;justify-content:flex-end}.cc-message-information__bubble-header{display:flex;align-items:flex-start;justify-content:flex-start;padding-bottom:2px}.cc-message-information__bubble-view{overflow-y:auto;max-height:150px;overflow-x:hidden}.cc-message-information__bubble,.cc-message-information__list-item{margin:8px 0;overflow:hidden}.cc-list-item__delivered-receipt,.cc-list-item__read-receipt{display:flex;justify-content:space-between}.cc-list-item__receipt{display:flex}cometchat-label{display:flex;align-items:center;justify-content:flex-start}.cc-empty-state-view{display:flex;align-items:flex-start;justify-content:center}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { closeIconURL: [{
type: Input
}], message: [{
type: Input
}], title: [{
type: Input
}], template: [{
type: Input
}], bubbleView: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], receiptDatePattern: [{
type: Input
}], onError: [{
type: Input
}], messageInformationStyle: [{
type: Input
}], readIcon: [{
type: Input
}], deliveredIcon: [{
type: Input
}], onClose: [{
type: Input
}], listItemStyle: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], emptyStateView: [{
type: Input
}], loadingIconURL: [{
type: Input
}], loadingStateView: [{
type: Input
}], errorStateView: [{
type: Input
}] } });
/**
*
* CometChatMessageList is a wrapper component for messageBubble
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatMessageListComponent {
constructor(ngZone, ref, themeService) {
this.ngZone = ngZone;
this.ref = ref;
this.themeService = themeService;
this.hideError = false;
this.hideDateSeparator = false;
this.errorStateText = localize("SOMETHING_WRONG");
this.emptyStateText = localize("NO_MESSAGES_FOUND");
this.loadingIconURL = "assets/Spinner.svg";
/**
* @deprecated
*
* This property is deprecated as of version 4.3.16 due to newer property 'hideReceipt'. It will be removed in subsequent versions.
*/
this.disableReceipt = false;
this.hideReceipt = false;
this.disableSoundForMessages = false;
this.customSoundForMessages = "";
this.readIcon = "assets/message-read.svg";
this.deliveredIcon = "assets/message-delivered.svg";
this.sentIcon = "assets/message-sent.svg";
this.waitIcon = "assets/wait.svg";
this.errorIcon = "assets/warning-small.svg";
this.aiErrorIcon = "assets/ai-error.svg";
this.aiEmptyIcon = "assets/ai-empty.svg";
this.alignment = MessageListAlignment.standard;
this.showAvatar = true;
this.datePattern = DatePatterns.time;
this.timestampAlignment = TimestampAlignment.bottom;
this.DateSeparatorPattern = DatePatterns.DayDateTime;
this.templates = [];
this.newMessageIndicatorText = "";
this.scrollToBottomOnNewMessages = false;
this.thresholdValue = 1000;
this.unreadMessageThreshold = 30;
this.reactionsConfiguration = new ReactionsConfiguration({});
this.disableReactions = false;
this.emojiKeyboardStyle = {};
this.threadIndicatorIcon = "assets/threadIndicatorIcon.svg";
this.avatarStyle = {
borderRadius: "16px",
width: "28px",
height: "28px",
};
this.backdropStyle = {
height: "100%",
width: "100%",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed",
};
this.dateSeparatorStyle = {
height: "",
width: "",
};
this.messageListStyle = {
nameTextFont: "400 11px Inter",
emptyStateTextFont: "700 22px Inter",
errorStateTextFont: "700 22px Inter",
};
this.onError = (error) => {
console.log(error);
};
this.messageInformationConfiguration = new MessageInformationConfiguration({});
this.disableMentions = false;
this.state = States.loading;
this.optionsStyle = {
width: "",
height: "",
border: "1px solid #e8e8e8",
borderRadius: "8px",
background: "white",
submenuWidth: "100%",
submenuHeight: "100%",
submenuBorder: "1px solid #e8e8e8",
submenuBorderRadius: "8px",
submenuBackground: "white",
moreIconTint: "grey",
};
this.receiptStyle = {};
this.documentBubbleAlignment = DocumentIconAlignment.right;
this.callBubbleAlignment = DocumentIconAlignment.left;
this.imageModerationStyle = {};
this.timestampEnum = TimestampAlignment;
this.chatChanged = true;
this.starterErrorStateText = localize("SOMETHING_WRONG");
this.starterEmptyStateText = localize("NO_MESSAGES_FOUND");
this.starterLoadingStateText = localize("GENERATING_ICEBREAKERS");
this.summaryErrorStateText = localize("SOMETHING_WRONG");
this.summaryEmptyStateText = localize("NO_MESSAGES_FOUND");
this.summaryLoadingStateText = localize("GENERATING_SUMMARY");
this.timeStampColor = "";
this.timeStampFont = "";
this.smartReplyStyle = {
width: "100%",
height: "100%",
border: "none",
};
this.conversationStarterStyle = {};
this.conversationSummaryStyle = {
width: "100%",
height: "100%",
border: "none",
titleFont: "",
titleColor: "",
closeIconTint: "",
boxShadow: "",
textFont: "",
textColor: "",
background: "",
};
this.showSmartReply = false;
this.enableConversationStarter = false;
this.showConversationStarter = false;
this.conversationStarterState = States.loading;
this.conversationStarterReplies = [];
this.enableConversationSummary = false;
this.showConversationSummary = false;
this.conversationSummaryState = States.loading;
this.conversationSummary = [];
this.getUnreadCount = 0;
this.smartReplyMessage = null;
this.enableSmartReply = false;
this.timeStampBackground = "";
this.linkPreviewStyle = {};
this.unreadMessagesStyle = {};
this.modalStyle = {
height: "fit-content",
width: "fit-content",
closeIconTint: "blue",
};
this.dividerStyle = {
height: "1px",
width: "100%",
background: "grey",
};
this.pollBubbleStyle = {};
this.labelStyle = {
textFont: "400 11px Inter",
textColor: "grey",
};
this.imageBubbleStyle = {
height: "auto",
width: "100%",
border: "none",
borderRadius: "8px 8px 0px 0px",
background: "transparent",
};
this.messagesList = [];
this.bubbleDateStyle = {};
this.whiteboardIconURL = "assets/collaborativewhiteboard.svg";
this.documentIconURL = "assets/collaborativedocument.svg";
this.directCallIconURL = "assets/Video-call2x.svg";
this.placeholderIconURL = "/assets/placeholder.png";
this.downloadIconURL = "assets/download.svg";
this.translationStyle = {};
this.documentBubbleStyle = {};
this.callBubbleStyle = {};
this.whiteboardTitle = localize("COLLABORATIVE_WHITEBOARD");
this.whiteboardSubitle = localize("DRAW_WHITEBOARD_TOGETHER");
this.whiteboardButtonText = localize("OPEN_WHITEBOARD");
this.documentTitle = localize("COLLABORATIVE_DOCUMENT");
this.documentSubitle = localize("DRAW_DOCUMENT_TOGETHER");
this.documentButtonText = localize("OPEN_DOCUMENT");
this.joinCallButtonText = localize("JOIN");
this.localize = localize;
this.reinitialized = false;
this.addReactionIconURL = "assets/addreaction.svg";
this.MessageTypesConstant = CometChatUIKitConstants.MessageTypes;
this.callConstant = CometChatUIKitConstants.MessageCategory.call;
this.typesMap = {};
this.messageTypesMap = {};
this.theme = new CometChatTheme({});
this.groupListenerId = "group_" + new Date().getTime();
this.callListenerId = "call_" + new Date().getTime();
this.states = States;
this.MessageCategory = CometChatUIKitConstants.MessageCategory;
this.numberOfTopScroll = 0;
this.keepRecentMessages = true;
this.messageTemplate = [];
this.openContactsView = false;
this.isOnBottom = false;
this.UnreadCount = [];
this.newMessageCount = 0;
this.type = "";
this.confirmText = localize("YES");
this.cancelText = localize("NO");
this.warningText = "Are you sure want to see unsafe content?";
this.threadedAlignment = MessageBubbleAlignment.left;
this.messageInfoAlignment = MessageBubbleAlignment.right;
this.openEmojiKeyboard = false;
this.keyboardAlignment = Placement.right;
this.popoverStyle = {
height: "330px",
width: "325px",
};
this.videoBubbleStyle = {
height: "130px",
width: "230px",
border: "none",
borderRadius: "8px",
background: "transparent",
};
this.threadViewAlignment = MessageBubbleAlignment.left;
this.enableDataMasking = false;
this.enableThumbnailGeneration = false;
this.enableLinkPreview = false;
this.enablePolls = false;
this.enableReactions = false;
this.enableImageModeration = false;
this.enableStickers = false;
this.enableWhiteboard = false;
this.enableDocument = false;
this.showOngoingCall = false;
this.enableCalling = false;
this.ongoingCallStyle = {};
this.sessionId = "";
this.openMessageInfoPage = false;
this.firstReload = false;
this.isWebsocketReconnected = false;
this.connectionListenerId = "connection_" + new Date().getTime();
this.lastMessageId = 0;
this.isConnectionReestablished = false;
this.closeIconURL = "assets/close2x.svg";
this.threadOpenIcon = "assets/side-arrow.svg";
this.confirmDialogStyle = {};
this.messageToReact = null;
this.limit = 30;
this.types = [];
this.categories = [];
this.callbacks = new Map();
this.closeContactsPage = () => {
this.openContactsView = false;
this.ref.detectChanges();
};
this.addReaction = (event) => {
let emoji = event?.detail?.id;
this.popoverRef.nativeElement.openContentView(event);
if (this.messageToReact) {
this.reactToMessage(emoji, this.messageToReact);
}
};
this.getCallActionMessage = (call) => {
return CallingDetailsUtils.getCallStatus(call, this.loggedInUser);
};
this.isMobileView = () => {
return window.innerWidth <= 768;
};
this.showEmojiKeyboard = (id, event) => {
let message = this.getMessageById(id);
if (message) {
this.messageToReact = message;
if (this.isMobileView()) {
let bubbleRef = this.getBubbleById(String(id));
if (bubbleRef) {
const rect = bubbleRef.nativeElement.getBoundingClientRect();
const isAtTop = rect.top < innerHeight / 2;
const isAtBottom = rect.bottom > window.innerHeight / 2;
if (isAtTop) {
this.keyboardAlignment = Placement.bottom;
}
else if (isAtBottom) {
this.keyboardAlignment = Placement.top;
}
}
}
else {
this.keyboardAlignment =
message.getSender()?.getUid() == this.loggedInUser?.getUid()
? Placement.left
: Placement.right;
}
this.ref.detectChanges();
this.popoverRef.nativeElement.openContentView(event);
}
};
this.setBubbleView = () => {
this.messageTemplate.forEach((element) => {
this.messageTypesMap[element.category + '_' + element.type] = element;
});
};
this.openThreadView = (message) => {
if (this.onThreadRepliesClick) {
this.onThreadRepliesClick(message, this.threadMessageBubble);
}
};
this.threadCallback = (id) => {
let messageObject = this.getMessageById(id);
this.openThreadView(messageObject);
};
this.deleteCallback = (id) => {
let messageObject = this.getMessageById(id);
this.deleteMessage(messageObject);
};
this.editCallback = (id) => {
let messageObject = this.getMessageById(id);
this.onEditMessage(messageObject);
};
this.copyCallback = (id) => {
let messageObject = this.getMessageById(id);
this.onCopyMessage(messageObject);
};
this.messagePrivatelyCallback = (id) => {
let messageObject = this.getMessageById(id);
this.sendMessagePrivately(messageObject);
};
this.messageInfoCallback = (id) => {
let messageObject = this.getMessageById(id);
this.openMessageInfo(messageObject);
};
this.closeMessageInfoPage = () => {
this.openMessageInfoPage = false;
this.ref.detectChanges();
};
this.updateTranslatedMessage = (translation) => {
var receivedMessage = translation;
var translatedText = receivedMessage.translations[0].message_translated;
let messageList = [...this.messagesList];
let messageKey = messageList.findIndex((m) => m.getId() === receivedMessage.msgId);
let data;
if (messageKey > -1) {
var messageObj = messageList[messageKey];
if (messageObj.getMetadata()) {
data = messageObj.getMetadata();
}
else {
messageObj.setMetadata({});
data = messageObj.getMetadata();
}
data[MessageTranslationConstants.translated_message] = translatedText;
var newMessageObj = messageObj;
messageList.splice(messageKey, 1, newMessageObj);
this.messagesList = [...messageList];
this.ref.detectChanges();
}
};
this.translateMessage = (id) => {
let message = this.getMessageById(id);
if (message) {
CometChat.callExtension(MessageTranslationConstants.message_translation, MessageTranslationConstants.post, MessageTranslationConstants.v2_translate, {
msgId: message.getId(),
text: message.getText(),
languages: navigator.languages,
})
.then((result) => {
if (result?.translations[0]?.message_translated !=
message?.getText()) {
this.updateTranslatedMessage(result);
this.ref.detectChanges();
}
else {
return;
}
// Result of translations
})
.catch((error) => { });
}
};
/**
* Filters out the 'add reaction' option if reactions are disabled.
*
* @param {CometChatMessageOption[]} options - The original set of message options.
* @returns {CometChatMessageOption[]} The filtered set of message options.
*/
this.filterEmojiOptions = (options) => {
if (!this.disableReactions) {
return options;
}
return options.filter((option) => {
return option.id !== CometChatUIKitConstants.MessageOption.reactToMessage;
});
};
/**
* Checks if the 'statusInfoView' is present in the default template provided by the user
* If present, returns the user-defined template, otherwise returns null.
*
* @param message Message object for which the status info view needs to be fetched
* @returns User-defined TemplateRef if present, otherwise null
*/
this.getContentView = (message) => {
if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.contentView) {
return this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.contentView(message);
}
else {
return message.getDeletedAt()
? this.typesMap[CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.text]
: this.typesMap[message.getCategory() + '_' + message?.getType()];
}
};
this.setBubbleAlignment = (message) => {
let alignment = MessageBubbleAlignment.center;
if (this.alignment == MessageListAlignment.left) {
alignment = MessageBubbleAlignment.left;
}
else {
if (message?.getType() ==
CometChatUIKitConstants.MessageTypes.groupMember ||
message.getCategory() == this.callConstant) {
alignment = MessageBubbleAlignment.center;
}
else if (!message?.getSender() ||
(message?.getSender().getUid() == this.loggedInUser.getUid() &&
message?.getType() !=
CometChatUIKitConstants.MessageTypes.groupMember)) {
alignment = MessageBubbleAlignment.right;
}
else {
alignment = MessageBubbleAlignment.left;
}
}
return alignment;
};
this.getBubbleWrapper = (message) => {
let view;
if (this.messageTypesMap &&
this.messageTypesMap[message?.getCategory() + '_' + message?.getType()] &&
this.messageTypesMap[message?.getCategory() + '_' + message?.getType()].bubbleView) {
view = this.messageTypesMap[message?.getCategory() + '_' + message?.getType()].bubbleView(message);
return view;
}
else {
view = null;
return view;
}
};
this.setTranslationStyle = (message) => {
var isLeftAligned = this.alignment !== MessageListAlignment.left;
var isUserSentMessage = !message?.getSender() ||
this.loggedInUser.getUid() === message?.getSender().getUid();
if (!isLeftAligned) {
return new MessageTranslationStyle({
translatedTextFont: fontHelper(this.themeService.theme.typography.text3),
translatedTextColor: this.themeService.theme.palette.getAccent("light"),
helpTextColor: this.themeService.theme.palette.getAccent700(),
helpTextFont: fontHelper(this.themeService.theme.typography.caption2),
background: "transparent",
});
}
else {
if (isUserSentMessage) {
return new MessageTranslationStyle({
translatedTextFont: fontHelper(this.themeService.theme.typography.text3),
translatedTextColor: this.themeService.theme.palette.getAccent("dark"),
helpTextColor: this.themeService.theme.palette.getAccent700("dark"),
helpTextFont: fontHelper(this.themeService.theme.typography.caption2),
background: "transparent",
});
}
else {
return new MessageTranslationStyle({
translatedTextFont: fontHelper(this.themeService.theme.typography.text3),
translatedTextColor: this.themeService.theme.palette.getAccent("light"),
helpTextColor: this.themeService.theme.palette.getAccent700(),
helpTextFont: fontHelper(this.themeService.theme.typography.caption2),
background: "transparent",
});
}
}
};
this.setTextBubbleStyle = (message) => {
let isInfoBubble = this.messageInfoObject && message.getId() && this.messageInfoObject.getId() == message.getId();
var isDeleted = message.getDeletedAt();
var notLeftAligned = this.alignment !== MessageListAlignment.left;
var isTextMessage = message.getCategory() ===
CometChatUIKitConstants.MessageCategory.message &&
message?.getType() === CometChatUIKitConstants.MessageTypes.text;
var isUserSentMessage = !message?.getSender() ||
this.loggedInUser.getUid() === message?.getSender().getUid();
var isGroupMemberMessage = message?.getType() === CometChatUIKitConstants.MessageTypes.groupMember;
if (!isDeleted && notLeftAligned && isTextMessage && isUserSentMessage) {
return {
textFont: fontHelper(this.themeService.theme.typography.text3),
textColor: this.themeService.theme.palette.getAccent900("light"),
bubblePadding: isInfoBubble ? "8px 12px" : "8px 12px 0 12px"
};
}
if (!isDeleted &&
notLeftAligned &&
isTextMessage &&
!isUserSentMessage &&
!isGroupMemberMessage) {
return {
textFont: fontHelper(this.themeService.theme.typography.text3),
textColor: this.themeService.theme.palette.getAccent(),
bubblePadding: "8px 12px 2px 12px"
};
}
if (isGroupMemberMessage) {
return {
textFont: fontHelper(this.themeService.theme.typography.subtitle2),
textColor: this.themeService.theme.palette.getAccent600(),
};
}
if (!notLeftAligned && isTextMessage) {
return {
textFont: fontHelper(this.themeService.theme.typography.text2),
textColor: this.themeService.theme.palette.getAccent(),
};
}
return {
textFont: fontHelper(this.themeService.theme.typography.text2),
textColor: this.themeService.theme.palette.getAccent400(),
bubblePadding: "8px 12px"
};
};
/*
* isPartOfCurrentChatForUIEvent: To check if the message belongs for this list and is not part of thread even for current list
it only runs for UI event because it assumes logged in user is always sender
* @param: message: CometChat.BaseMessage
*/
this.isPartOfCurrentChatForUIEvent = (message) => {
const receiverId = message?.getReceiverId();
const receiverType = message?.getReceiverType();
if (this.parentMessageId) {
if (message.getParentMessageId() === this.parentMessageId) {
return true;
}
else {
return false;
}
}
else {
if (message.getParentMessageId()) {
return false;
}
if (this.user) {
if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && receiverId === this.user.getUid()) {
return true;
}
}
else if (this.group) {
if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && receiverId === this.group.getGuid()) {
return true;
}
}
return false;
}
};
/*
* isPartOfCurrentChatForSDKEvent: To check if the message belongs for this list and is not part of thread even for current list
it only runs for SDK event because it needs senderId to check if the message is sent by the same user
* @param: message: CometChat.BaseMessage
*/
this.isPartOfCurrentChatForSDKEvent = (message) => {
const receiverId = message?.getReceiverId();
const receiverType = message?.getReceiverType();
const senderId = message?.getSender()?.getUid();
if (this.parentMessageId) {
if (message.getParentMessageId() === this.parentMessageId) {
return true;
}
else {
return false;
}
}
else {
if (message.getParentMessageId()) {
return false;
}
if (this.user) {
if (receiverType === CometChatUIKitConstants.MessageReceiverType.user && (receiverId === this.user.getUid() || senderId === this.user.getUid())) {
return true;
}
else {
return false;
}
}
else if (this.group) {
if (receiverType === CometChatUIKitConstants.MessageReceiverType.group && (receiverId === this.group.getGuid())) {
return true;
}
else {
return false;
}
}
return false;
}
};
/*
* isThreadOfCurrentChatForUIEvent: To check if the message belongs thread of this list,
it only runs for UI event because it assumes logged in user is always sender
* @param: message: CometChat.BaseMessage
*/
this.isThreadOfCurrentChatForUIEvent = (message) => {
if (!message.getParentMessageId()) {
return false;
}
const receiverId = message?.getReceiverId();
if (this.user) {
if (receiverId === this.user.getUid()) {
return true;
}
}
else if (this.group) {
if (receiverId === this.group.getGuid()) {
return true;
}
}
return false;
};
/*
* isThreadOfCurrentChatForSDKEvent: To check if the message belongs thread of this list,
it only runs for SDK event because it needs senderId to check if the message is sent by the same user
* @param: message: CometChat.BaseMessage
*/
this.isThreadOfCurrentChatForSDKEvent = (message) => {
if (!message.getParentMessageId()) {
return false;
}
const receiverId = message?.getReceiverId();
const senderId = message?.getSender()?.getUid();
if (this.user) {
if (receiverId === this.user.getUid() || senderId === this.user.getUid()) {
return true;
}
}
else if (this.group) {
if (receiverId === this.group.getGuid()) {
return true;
}
}
return false;
};
this.startDirectCall = (sessionId, message) => {
this.sessionId = sessionId;
this.showOngoingCall = true;
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, message);
this.ref.detectChanges();
};
this.launchCollaborativeWhiteboardDocument = (url) => {
window.open(url + `&username=${this.loggedInUser?.getName()}`, "", "fullscreen=yes, scrollbars=auto");
};
this.openConfirmDialog = false;
this.openFullscreenView = false;
this.imageurlToOpen = "";
this.fullScreenViewerStyle = {
closeIconTint: "blue",
};
this.onConfirmClick = () => {
this.openConfirmDialog = false;
if (this.closeImageModeration) {
this.closeImageModeration();
}
this.ref.detectChanges();
};
this.setOngoingCallStyle = () => {
let defaultStyle = new CallscreenStyle({
maxHeight: "100%",
maxWidth: "100%",
border: "none",
borderRadius: "0",
background: "#1c2226",
minHeight: "400px",
minWidth: "400px",
minimizeIconTint: this.themeService.theme.palette.getAccent900(),
maximizeIconTint: this.themeService.theme.palette.getAccent900(),
});
this.ongoingCallStyle = { ...defaultStyle, ...this.ongoingCallStyle };
};
/**
* Listener To Receive Messages in Real Time
* @param
*/
this.fetchPreviousMessages = () => {
if (this.reinitialized) {
if (this.messagesRequestBuilder) {
this.requestBuilder = CometChatUIKitUtility.clone(this.messagesRequestBuilder);
}
else {
this.requestBuilder = new CometChat.MessagesRequestBuilder()
.setLimit(this.limit)
.setTypes(this.types)
.setMessageId(this.messagesList[0].getId())
.setCategories(this.categories)
.hideReplies(true);
if (this.user) {
this.requestBuilder = this.requestBuilder.setUID(this.user?.getUid()).build();
}
else if (this.group) {
this.requestBuilder = this.requestBuilder.setGUID(this.group?.getGuid()).build();
}
}
}
this.requestBuilder
.fetchPrevious()
.then((messageList) => {
if (messageList && messageList.length > 0) {
messageList = messageList.map((message, i) => {
if (message.getCategory() ===
CometChatUIKitConstants.MessageCategory.interactive) {
return InteractiveMessageUtils.convertInteractiveMessage(message);
}
else {
return message;
}
});
}
this.state = States.loading;
// No Messages Found
if (messageList.length === 0 && this.messagesList.length === 0) {
this.state = States.empty;
if (!this.parentMessageId && this.enableConversationStarter) {
this.fetchConversationStarter();
}
this.ref.detectChanges();
return;
}
if (messageList && messageList.length > 0) {
if (this.getUnreadCount >= this.unreadMessageThreshold &&
this.enableConversationSummary) {
this.fetchConversationSummary();
}
this.showConversationStarter = false;
this.conversationStarterReplies = [];
if (this.firstReload) {
this.lastMessageId = Number(messageList[messageList.length - 1].getId());
}
let lastMessage = messageList[messageList.length - 1];
let isSentByMe = lastMessage?.getSender()?.getUid() ==
this.loggedInUser?.getUid();
if (!isSentByMe &&
!lastMessage.getDeliveredAt()) {
//mark the message as delivered
if (!this.disableReceipt) {
CometChat.markAsDelivered(lastMessage).then((receipt) => {
let messageKey = this.messagesList.findIndex((m) => m.getId() === Number(receipt?.getMessageId()));
if (messageKey > -1) {
this.markAllMessagAsDelivered(messageKey);
}
});
}
}
if (!lastMessage?.getReadAt() && !isSentByMe) {
if (!this.disableReceipt) {
CometChat.markAsRead(lastMessage)
.then((receipt) => {
let messageKey = this.messagesList.findIndex((m) => m.getId() === Number(receipt?.getMessageId()));
if (messageKey > -1) {
this.markAllMessagAsRead(messageKey);
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
else {
this.UnreadCount = [];
this.ref.detectChanges();
}
}
this.state = States.loaded;
this.ref.detectChanges();
//if the sender of the message is not the loggedin user, mark it as read.
let prevScrollHeight = this.listScroll?.nativeElement.scrollHeight;
setTimeout(() => {
this.listScroll.nativeElement.scrollTop =
this.listScroll?.nativeElement.scrollHeight - prevScrollHeight;
}, 100);
this.showSmartReply = false;
this.smartReplyMessage = null;
this.prependMessages(messageList);
}
else {
this.state = States.loaded;
}
if (this.firstReload) {
this.attachConnectionListener();
this.firstReload = false;
}
this.ref.detectChanges();
}, (error) => {
this.state = States.error;
if (this.onError) {
this.onError(CometChatException(error));
}
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
if (this.messagesList?.length <= 0) {
this.state = States.error;
this.ref.detectChanges();
}
});
};
this.fetchNextMessage = () => {
let index = this.messagesList.length - 1;
let messageId;
if (this.reinitialized ||
(this.lastMessageId > 0 && this.isWebsocketReconnected)) {
if (this.isWebsocketReconnected) {
this.fetchActionMessages();
messageId = this.lastMessageId;
}
else {
messageId = this.messagesList[index].getId();
}
if (this.messagesRequestBuilder) {
this.requestBuilder = this.user
? this.messagesRequestBuilder
.setUID(this.user?.getUid())
.setMessageId(messageId)
.build()
: this.messagesRequestBuilder
.setGUID(this.group?.getGuid())
.setMessageId(messageId)
.build();
}
else {
this.requestBuilder = new CometChat.MessagesRequestBuilder()
.setLimit(this.limit)
.setTypes(this.types)
.setMessageId(messageId)
.setCategories(this.categories)
.hideReplies(true);
if (this.user) {
this.requestBuilder.setUID(this.user?.getUid()).build();
}
else if (this.group) {
this.requestBuilder.setGUID(this.group?.getGuid()).build();
}
}
this.requestBuilder
.fetchNext()
.then((messageList) => {
if (messageList && messageList.length > 0) {
messageList = messageList.map((message, i) => {
if (message.getCategory() ===
CometChatUIKitConstants.MessageCategory.interactive) {
return InteractiveMessageUtils.convertInteractiveMessage(message);
}
else {
return message;
}
});
}
this.state = States.loading;
// No Messages Found
if (messageList.length === 0 && this.messagesList.length === 0) {
this.state = States.empty;
this.ref.detectChanges();
return;
}
if (messageList && messageList.length) {
if (this.isOnBottom) {
let lastMessage = messageList[messageList.length - 1];
this.lastMessageId = Number(messageList[messageList.length - 1].getId());
this.firstReload = false;
if (!lastMessage?.getReadAt() &&
lastMessage?.getSender().getUid() !=
this.loggedInUser?.getUid()) {
if (!this.disableReceipt) {
CometChat.markAsRead(lastMessage);
}
else {
this.UnreadCount = [];
this.ref.detectChanges();
}
}
if (!lastMessage?.getDeliveredAt() &&
lastMessage?.getSender().getUid() !=
this.loggedInUser?.getUid()) {
this.markMessageAsDelivered(lastMessage);
this.markAllMessagAsDelivered(messageList.length - 1);
}
this.state = States.loaded;
this.scrollToBottom();
this.appendMessages(messageList);
this.isWebsocketReconnected = false;
this.ref.detectChanges();
}
else {
let lastMessage = messageList[messageList.length - 1];
this.lastMessageId = Number(messageList[messageList.length - 1].getId());
this.firstReload = false;
if (this.scrollToBottomOnNewMessages) {
setTimeout(() => {
this.scrollToBottom();
}, 100);
}
else {
let countText = localize("NEW_MESSAGES");
if (this.newMessageIndicatorText &&
this.newMessageIndicatorText != "") {
countText = this.newMessageIndicatorText;
}
else {
countText =
this.UnreadCount.length > 0
? localize("NEW_MESSAGES")
: localize("NEW_MESSAGE");
}
this.UnreadCount.push(...messageList);
this.newMessageCount =
" ↓ " + this.UnreadCount.length + " " + countText;
this.ref.detectChanges();
}
if (!lastMessage?.getDeliveredAt() &&
lastMessage?.getSender().getUid() !=
this.loggedInUser?.getUid()) {
this.markMessageAsDelivered(lastMessage);
this.markAllMessagAsDelivered(messageList.length - 1);
}
this.state = States.loaded;
this.appendMessages(messageList);
this.isWebsocketReconnected = false;
this.ref.detectChanges();
}
}
}, (error) => {
this.state = States.error;
console.log(error);
if (this.onError) {
this.onError(CometChatException(error));
}
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
if (this.messagesList?.length <= 0) {
this.state = States.error;
this.ref.detectChanges();
}
});
}
};
this.appendMessages = (messages) => {
if (!this.isPartOfCurrentChatForSDKEvent(messages[0])) {
return;
}
this.messagesList.push(...messages);
this.messageCount = this.messagesList.length;
if (this.messageCount > this.thresholdValue) {
this.keepRecentMessages = true;
this.reInitializeMessageBuilder();
}
this.state = States.loaded;
this.ref.detectChanges();
};
/**
* translate message then call update message
* @param {CometChat.BaseMessage} message
*/
// translateMessage(message: CometChat.BaseMessage) {
// }
/**
* @param {CometChat.BaseMessage} message
*/
this.markMessageAsDelivered = (message) => {
if (!this.disableReceipt &&
message?.getSender().getUid() !== this.loggedInUser?.getUid() &&
message.hasOwnProperty("deliveredAt") === false) {
CometChat.markAsDelivered(message);
}
};
/**
* @param {CometChat.BaseMessage} message
* @param {string} type
*/
this.messageReceivedHandler = (message) => {
++this.messageCount;
if (message.getParentMessageId()) {
// this.updateReplyCount(message);
this.updateUnreadReplyCount(message);
this.addMessage(message);
}
else {
if (this.messageCount > this.thresholdValue) {
this.keepRecentMessages = true;
this.reInitializeMessageBuilder();
}
this.addMessage(message);
if (!this.isOnBottom) {
if (this.scrollToBottomOnNewMessages) {
setTimeout(() => {
this.scrollToBottom();
}, 100);
}
else {
let countText = localize("NEW_MESSAGES");
if (this.newMessageIndicatorText &&
this.newMessageIndicatorText != "") {
countText = this.newMessageIndicatorText;
}
else {
countText =
this.UnreadCount.length > 0
? localize("NEW_MESSAGES")
: localize("NEW_MESSAGE");
}
this.UnreadCount.push(message);
this.newMessageCount =
" ↓ " + this.UnreadCount.length + " " + countText;
this.ref.detectChanges();
}
}
}
if (!this.disableSoundForMessages) {
this.playAudio();
}
//handling dom lag - increment count only for main message list
if (message.hasOwnProperty("parentMessageId") === false &&
this.parentMessageId) {
++this.messageCount;
this.ref.detectChanges();
}
else if (message.hasOwnProperty("parentMessageId") === true &&
this.parentMessageId) {
if (message.getParentMessageId() === this.parentMessageId &&
this.isOnBottom) {
if (!this.disableReceipt) {
CometChat.markAsRead(message).then(() => {
CometChatMessageEvents.ccMessageRead.next(message);
});
}
else {
this.UnreadCount = [];
this.ref.detectChanges();
}
this.ref.detectChanges();
}
}
else {
}
};
this.getCallBuilder = () => {
const callSettings = new CometChatUIKitCalls.CallSettingsBuilder()
.enableDefaultLayout(true)
.setIsAudioOnlyCall(false)
.setCallListener(new CometChatUIKitCalls.OngoingCallListener({
onCallEndButtonPressed: () => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
CometChatCallEvents.ccCallEnded.next({});
},
onError: (error) => {
if (this.onError) {
this.onError(error);
}
},
}))
.build();
return callSettings;
};
this.reInitializeMessageBuilder = () => {
if (!this.parentMessageId) {
this.messageCount = 0;
}
this.requestBuilder = null;
CometChat.removeGroupListener(this.groupListenerId);
CometChat.removeCallListener(this.callListenerId);
this.reInitializeMessageList();
};
/**
* Emits an Action Indicating that a message was deleted by the user/person you are chatting with
* @param {CometChat.BaseMessage} message
*/
/**
* Detects if the message that was edit is your current open conversation window
* @param {CometChat.BaseMessage} message
*/
this.messageEdited = (message) => {
try {
if (this.group &&
message.getReceiverType() ===
CometChatUIKitConstants.MessageReceiverType.group &&
message.getReceiverId() === this.group?.getGuid()) {
this.updateEditedMessage(message);
}
else if (this.user &&
message.getReceiverType() ===
CometChatUIKitConstants.MessageReceiverType.user &&
this.loggedInUser?.getUid() === message.getReceiverId() &&
message?.getSender().getUid() === this.user?.getUid()) {
this.updateEditedMessage(message);
}
else if (this.user &&
message.getReceiverType() ===
CometChatUIKitConstants.MessageReceiverType.user &&
this.loggedInUser?.getUid() === message?.getSender().getUid() &&
message.getReceiverId() === this.user?.getUid()) {
this.updateEditedMessage(message);
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
this.updateInteractiveMessage = (receipt) => {
if (this.loggedInUser.getUid() === receipt.getSender().getUid()) {
const message = this.getMessageById(receipt.getMessageId());
if (message) {
if (String(message?.getId()) == String(receipt.getMessageId())) {
const interaction = receipt.getInteractions();
message.setInteractions(interaction);
this.updateEditedMessage(InteractiveMessageUtils.convertInteractiveMessage(message));
}
}
}
};
/**
* Emits an Action Indicating that a message was deleted by the user/person you are chatting with
* @param {CometChat.BaseMessage} message
*/
this.updateEditedMessage = (message) => {
var messageList = this.messagesList;
// let newMessage = CometChatUIKitUtility.clone(message);
var messageKey = messageList.findIndex((m) => m.getId() === message.getId());
if (messageKey > -1) {
this.messagesList[messageKey] = message;
this.ref.detectChanges();
}
// if (messageKey > -1) {
// this.messagesList = [
// ...messageList.slice(0, messageKey),
// message,
// ...messageList.slice(messageKey + 1),
// ];
// this.ref.detectChanges();
// }
};
/**
* @param {CometChat.BaseMessage} message
* @param {string} type
*/
this.customMessageReceivedHandler = (message) => {
++this.messageCount;
// add received message to messages list
if (message.getParentMessageId()) {
// this.updateReplyCount(message);
this.updateUnreadReplyCount(message);
this.addMessage(message);
}
else {
if (this.messageCount > this.thresholdValue) {
this.keepRecentMessages = true;
this.reInitializeMessageBuilder();
}
this.addMessage(message);
if (!this.isOnBottom) {
if (this.scrollToBottomOnNewMessages) {
setTimeout(() => {
this.scrollToBottom();
}, 100);
}
else {
let countText = localize("NEW_MESSAGES");
if (this.newMessageIndicatorText &&
this.newMessageIndicatorText != "") {
countText = this.newMessageIndicatorText;
}
else {
countText =
this.UnreadCount.length > 0
? localize("NEW_MESSAGES")
: localize("NEW_MESSAGE");
}
this.UnreadCount.push(message);
this.newMessageCount =
" ↓ " + this.UnreadCount.length + " " + countText;
this.ref.detectChanges();
}
}
}
if (!this.disableSoundForMessages) {
this.playAudio();
}
//handling dom lag - increment count only for main message list
if (message.hasOwnProperty("parentMessageId") === false &&
!this.parentMessageId) {
++this.messageCount;
//if the user has not scrolled in chat window(scroll is at the bottom of the chat window)
}
else if (message.hasOwnProperty("parentMessageId") === true &&
this.parentMessageId &&
this.isOnBottom) {
if (message.getParentMessageId() === this.parentMessageId) {
if (!this.disableReceipt) {
CometChat.markAsRead(message).then(() => {
CometChatMessageEvents.ccMessageRead.next(message);
});
}
else {
this.UnreadCount = [];
this.ref.detectChanges();
}
}
}
else {
}
this.ref.detectChanges();
};
/**
* Returns formatters for the text bubbles
*
* @param {CometChat.BaseMessage} message
* @returns
*/
this.getTextFormatters = (message) => {
let alignment = this.setBubbleAlignment(message);
let config = {
textFormatters: this.textFormatters && this.textFormatters.length
? [...this.textFormatters]
: ChatConfigurator.getDataSource().getAllTextFormatters({
disableMentions: this.disableMentions,
theme: this.themeService.theme,
alignment,
}),
};
let textFormatters = config.textFormatters;
let urlTextFormatter;
if (!this.disableMentions) {
let mentionsTextFormatter;
for (let i = 0; i < textFormatters.length; i++) {
if (textFormatters[i] instanceof CometChatMentionsFormatter) {
mentionsTextFormatter = textFormatters[i];
mentionsTextFormatter.setMessage(message);
if (message.getMentionedUsers().length) {
mentionsTextFormatter.setCometChatUserGroupMembers(message.getMentionedUsers());
}
mentionsTextFormatter.setLoggedInUser(CometChatUIKitLoginListener.getLoggedInUser());
if (urlTextFormatter) {
break;
}
}
if (textFormatters[i] instanceof CometChatUrlsFormatter) {
urlTextFormatter = textFormatters[i];
if (mentionsTextFormatter) {
break;
}
}
}
if (!mentionsTextFormatter) {
mentionsTextFormatter =
ChatConfigurator.getDataSource().getMentionsTextFormatter({
message,
...config,
alignment,
theme: this.themeService.theme,
});
textFormatters.push(mentionsTextFormatter);
}
}
else {
for (let i = 0; i < textFormatters.length; i++) {
if (textFormatters[i] instanceof CometChatUrlsFormatter) {
urlTextFormatter = textFormatters[i];
break;
}
}
}
if (!urlTextFormatter) {
urlTextFormatter = ChatConfigurator.getDataSource().getUrlTextFormatter({
theme: this.themeService.theme,
alignment,
});
textFormatters.push(urlTextFormatter);
}
for (let i = 0; i < textFormatters.length; i++) {
textFormatters[i].setMessageBubbleAlignment(alignment);
textFormatters[i].setMessage(message);
}
return textFormatters;
};
// public methods
this.addMessage = (message) => {
this.messagesList.push(message);
if (message.getId()) {
this.lastMessageId = Number(message.getId());
}
if (!message?.getSender() ||
this.loggedInUser?.getUid() == message?.getSender()?.getUid() ||
this.isOnBottom) {
this.scrollToBottom();
}
if (this.state != States.loaded) {
this.state = States.loaded;
}
this.ref.detectChanges();
};
/**
* callback for copy message
* @param {CometChat.TextMessage} object
*/
this.onCopyMessage = (object) => {
let text = object.getText();
if (!this.disableMentions &&
object.getMentionedUsers &&
object.getMentionedUsers().length) {
text = this.getMentionsTextWithoutStyle(object);
}
navigator.clipboard.writeText(text);
};
/**
* callback for editMessage option
* @param {CometChat.BaseMessage} object
*/
this.onEditMessage = (object) => {
CometChatMessageEvents.ccMessageEdited.next({
message: object,
status: MessageStatus.inprogress,
});
};
this.removeMessage = (message) => {
try {
var messageKey = this.messagesList.findIndex((msg) => msg?.getId() === message.getId());
if (messageKey > -1) {
this.messagesList.splice(messageKey, 1, message);
this.messagesList = [...this.messagesList];
this.ref.detectChanges();
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
this.deleteMessage = (message) => {
try {
var messageId = message.getId();
CometChat.deleteMessage(messageId)
.then((deletedMessage) => {
CometChatMessageEvents.ccMessageDeleted.next(deletedMessage);
// this.ref.detectChanges()
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
this.scrollToBottom = () => {
try {
setTimeout(() => {
this.listScroll?.nativeElement.scroll({
top: this.listScroll?.nativeElement.scrollHeight,
left: 0,
});
this.isOnBottom = true;
this.ref.detectChanges();
}, 10);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
/**
* Updates the count of unread reply messages for a given message.
*
* @param {CometChat.BaseMessage} message - The message for which the reply count is being updated.
*/
this.updateUnreadReplyCount = (message) => {
try {
let messageList = [...this.messagesList];
let messageKey = messageList.findIndex((m) => m.getId() === message.getParentMessageId());
if (messageKey > -1) {
const messageObj = messageList[messageKey];
// let unreadReplyCount = messageObj.getUnreadReplyCount()
// ? messageObj.getUnreadReplyCount()
// : 0;
// unreadReplyCount = unreadReplyCount + 1;
// messageObj.setUnreadReplyCount(unreadReplyCount);
messageList.splice(messageKey, 1, messageObj);
this.messagesList = [...messageList];
}
// eslint-disable-next-line
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
this.closeSmartReply = () => {
this.showSmartReply = false;
this.smartReplyMessage = null;
this.ref.detectChanges();
};
this.closeConversationSummary = () => {
this.showConversationSummary = false;
this.ref.detectChanges();
};
this.sendReply = (event) => {
let reply = event?.detail?.reply;
if (this.smartReplyConfig.ccSmartRepliesClicked) {
this.smartReplyConfig.ccSmartRepliesClicked(reply, this.smartReplyMessage, this.onError, this.customSoundForMessages, this.disableSoundForMessages);
this.closeSmartReply();
}
};
this.sendConversationStarter = (event) => {
let reply = event?.detail?.reply;
CometChatUIEvents.ccComposeMessage.next(reply);
this.showConversationStarter = false;
this.conversationStarterReplies = [];
this.ref.detectChanges();
};
/**
* styling part
*/
this.getBubbleDateStyle = (message) => {
let isSentByMe = this.isSentByMe(message) && this.alignment != MessageListAlignment.left;
let isTextMessage = message.getType() == CometChatUIKitConstants.MessageTypes.text;
return {
textColor: this.messageListStyle.TimestampTextColor || this.themeService.theme.palette.getAccent600(),
textFont: this.messageListStyle.TimestampTextFont ||
fontHelper(this.themeService.theme.typography.caption3),
padding: "0px",
display: "block",
};
};
this.chatsListStyle = () => {
return {
height: this.messageListStyle.height,
background: this.messageListStyle.background,
};
};
this.messageContainerStyle = () => {
return {
width: this.messageListStyle.width,
};
};
this.errorStyle = () => {
return {
textFont: this.messageListStyle.errorStateTextFont,
textColor: this.messageListStyle.errorStateTextColor,
};
};
this.conversationStarterStateStyle = () => {
return {
textFont: fontHelper(this.theme.typography.title2),
textColor: this.theme.palette.getAccent600(),
};
};
this.conversationSummaryStateStyle = () => {
return {
textFont: fontHelper(this.theme.typography.title2),
textColor: this.theme.palette.getAccent600(),
};
};
this.emptyStyle = () => {
return {
textFont: this.messageListStyle.emptyStateTextFont,
textColor: this.messageListStyle.emptyStateTextColor,
};
};
this.loadingStyle = {
iconTint: this.messageListStyle?.loadingIconTint,
};
this.conversationStarterLoader = () => {
return {
iconTint: this.theme.palette.getAccent600(),
};
};
this.conversationSummaryLoader = () => {
return {
iconTint: this.theme.palette.getAccent600(),
};
};
this.getSchedulerBubbleStyle = (messgae) => {
let avatarStyle = new AvatarStyle({
borderRadius: "50%",
width: "48px",
height: "48px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
});
let listItemStyle = new ListItemStyle({
height: "auto",
width: "100%",
background: "inherit",
activeBackground: "transparent",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.text1),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: "",
hoverBackground: "transparent",
});
let calendarStyle = new CalendarStyle({
height: "100%",
width: "100%",
border: "none",
borderRadius: "0",
background: "transparent",
dateTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
dateTextColor: this.themeService.theme.palette.getAccent(),
dayTextFont: fontHelper(this.themeService.theme.typography.text2),
dayTextColor: this.themeService.theme.palette.getAccent(),
monthYearTextFont: fontHelper(this.themeService.theme.typography.text2),
monthYearTextColor: this.themeService.theme.palette.getAccent(),
defaultDateTextBackground: "transparent",
disabledDateTextColor: this.themeService.theme.palette.getAccent400(),
disabledDateTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
disabledDateTextBackground: "transparent",
titleTextFont: fontHelper(this.themeService.theme.typography.text1),
titleTextColor: this.themeService.theme.palette.getAccent(),
timezoneTextFont: fontHelper(this.themeService.theme.typography.caption2),
timezoneTextColor: this.themeService.theme.palette.getAccent(),
arrowButtonTextColor: this.themeService.theme.palette.getAccent(),
arrowButtonTextFont: fontHelper(this.themeService.theme.typography.title2),
});
let timeSlotStyle = new TimeSlotStyle({
background: "transparent",
height: "fit-content",
width: "100%",
border: "none",
borderRadius: "0",
calendarIconTint: this.themeService.theme.palette.getAccent(),
timezoneIconTint: this.themeService.theme.palette.getAccent(),
emptySlotIconTint: this.themeService.theme.palette.getAccent500(),
emptySlotTextColor: this.themeService.theme.palette.getAccent500(),
emptySlotTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
dateTextColor: this.themeService.theme.palette.getAccent(),
dateTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
seperatorTint: this.themeService.theme.palette.getAccent100(),
slotBackground: this.themeService.theme.palette.getAccent900(),
slotBorder: "none",
slotBorderRadius: "8px",
slotTextColor: this.themeService.theme.palette.getAccent(),
slotTextFont: fontHelper(this.themeService.theme.typography.caption2),
timezoneTextColor: this.themeService.theme.palette.getAccent(),
timezoneTextFont: fontHelper(this.themeService.theme.typography.caption2),
titleTextColor: this.themeService.theme.palette.getAccent(),
titleTextFont: fontHelper(this.themeService.theme.typography.text1),
});
let qucikViewStyle = new QuickViewStyle({
background: this.themeService.theme.palette.getAccent50(),
height: "fit-content",
width: "100%",
titleFont: fontHelper(this.themeService.theme.typography.subtitle2),
titleColor: this.themeService.theme.palette.getAccent(),
subtitleFont: fontHelper(this.themeService.theme.typography.subtitle2),
subtitleColor: this.themeService.theme.palette.getAccent600(),
leadingBarTint: this.themeService.theme.palette.getPrimary(),
leadingBarWidth: "4px",
borderRadius: "8px",
});
return new SchedulerBubbleStyle({
avatarStyle: avatarStyle,
listItemStyle: listItemStyle,
quickViewStyle: qucikViewStyle,
dateSelectorStyle: calendarStyle,
timeSlotSelectorStyle: timeSlotStyle,
backButtonIconTint: this.themeService.theme.palette.getPrimary(),
background: "transparent",
height: "100%",
width: "100%",
border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
borderRadius: "8px",
loadingIconTint: this.themeService.theme.palette.getAccent600(),
suggestedTimeBackground: this.themeService.theme.palette.getAccent900(),
suggestedTimeBorder: `1px solid ${this.themeService.theme.palette.getPrimary()}`,
suggestedTimeBorderRadius: "8px",
suggestedTimeDisabledBackground: this.themeService.theme.palette.getAccent50(),
suggestedTimeDisabledBorder: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
suggestedTimeDisabledBorderRadius: "8px",
suggestedTimeDisabledTextColor: this.themeService.theme.palette.getAccent700(),
suggestedTimeDisabledTextFont: fontHelper(this.themeService.theme.typography.text3),
suggestedTimeTextColor: this.themeService.theme.palette.getPrimary(),
suggestedTimeTextFont: fontHelper(this.themeService.theme.typography.text3),
moreButtonDisabledTextBackground: "transparent",
moreButtonDisabledTextBorder: "none",
moreButtonDisabledTextBorderRadius: "0",
moreButtonDisabledTextColor: this.themeService.theme.palette.getAccent600(),
moreButtonDisabledTextFont: fontHelper(this.themeService.theme.typography.caption2),
moreButtonTextBackground: "transparent",
moreButtonTextBorder: "none",
moreButtonTextBorderRadius: "0",
moreButtonTextColor: this.themeService.theme.palette.getPrimary(),
moreButtonTextFont: fontHelper(this.themeService.theme.typography.caption2),
goalCompletionTextColor: this.themeService.theme.palette.getAccent(),
goalCompletionTextFont: fontHelper(this.themeService.theme.typography.text3),
errorTextColor: this.themeService.theme.palette.getError(),
errorTextFont: fontHelper(this.themeService.theme.typography.text3),
scheduleButtonStyle: {
iconHeight: "20px",
iconWidth: "20px",
buttonIconTint: this.themeService.theme.palette.getAccent(),
buttonTextFont: fontHelper(this.themeService.theme.typography.name),
buttonTextColor: this.themeService.theme.palette.getAccent("dark"),
border: "none",
borderRadius: "8px",
background: this.themeService.theme.palette.getPrimary(),
width: "100%",
display: "flex",
justifyContent: "center",
padding: "8px",
},
seperatorTint: this.themeService.theme.palette.getAccent200(),
subtitleTextColor: this.themeService.theme.palette.getAccent400(),
subtitleTextFont: fontHelper(this.themeService.theme.typography.name),
summaryTextColor: this.themeService.theme.palette.getAccent(),
summaryTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
timezoneTextColor: this.themeService.theme.palette.getAccent600(),
timezoneTextFont: fontHelper(this.themeService.theme.typography.caption2),
titleTextColor: this.themeService.theme.palette.getAccent(),
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
timezoneIconTint: this.themeService.theme.palette.getAccent(),
calendarIconTint: this.themeService.theme.palette.getAccent(),
clockIconTint: this.themeService.theme.palette.getAccent(),
});
};
/**
* Handles when a reaction item is clicked.
* @param {CometChat.Reaction} reaction - The clicked reaction.
* @param {CometChat.BaseMessage} message - The message the reaction is associated with.
*/
this.onReactionItemClicked = (reaction, message) => {
if (reaction?.getReactedBy()?.getUid() === this.loggedInUser?.getUid()) {
this.reactToMessage(reaction?.getReaction(), message);
}
};
/**
* Handles adding a reaction when clicked.
* @param {CometChat.ReactionCount} reaction - The clicked reaction.
* @param {CometChat.BaseMessage} message - The message the reaction is associated with.
*/
this.addReactionOnClick = (reaction, message) => {
let onReactClick = this.reactionsConfiguration?.reactionClick;
if (onReactClick) {
onReactClick(reaction, message);
}
else {
this.reactToMessage(reaction?.getReaction(), message);
}
};
/**
* Get style object based on message type.
* @param {CometChat.BaseMessage} message - The message object.
* @return {object} The style object.
*/
this.getStatusInfoStyle = (message) => {
// Base styles that are common for both conditions
const baseStyle = {
display: "flex",
alignItems: "flex-end",
gap: "1px",
padding: "8px",
};
// If message type is audio or video
if (this.isAudioOrVideoMessage(message)) {
return {
...baseStyle,
justifyContent: "center",
height: "fit-content",
borderRadius: "22px",
padding: "3px 5px",
paddingTop: "2px",
position: "relative",
marginTop: "-26px",
marginRight: "6px",
background: this.themeService.theme.palette.getAccent500("dark"),
width: "fit-content",
alignSelf: "flex-end",
marginBottom: "6px",
};
}
// Style for other types of messages
return {
...baseStyle,
justifyContent: "flex-end",
alignItems: "flex-end",
padding: "0px 8px 4px 8px",
};
};
this.wrapperStyle = () => {
return {
height: this.messageListStyle.height,
width: this.messageListStyle.width,
background: this.messageListStyle.background,
border: this.messageListStyle.border,
borderRadius: this.messageListStyle.borderRadius,
};
};
this.listStyle = () => {
return {
height: this.showSmartReply ? "92%" : "100%",
};
};
/**
* Styling for unread thread replies
* @returns LabelStyle
*/
this.getUnreadRepliesCountStyle = () => {
return {
borderRadius: "10px",
width: "15px",
height: "15px",
border: "none",
background: this.messageListStyle?.threadReplyUnreadBackground,
color: this.messageListStyle?.threadReplyUnreadTextColor,
font: this.messageListStyle?.threadReplyUnreadTextFont,
display: "flex",
justifyContent: "center",
alignItems: "center",
};
};
}
ngOnChanges(changes) {
try {
if (changes["user"] || changes["group"]) {
this.chatChanged = true;
}
if (changes[CometChatUIKitConstants.MessageReceiverType.user] ||
changes[CometChatUIKitConstants.MessageReceiverType.group]) {
this.showConversationStarter = false;
this.showConversationSummary = false;
this.conversationStarterReplies = [];
this.conversationSummary = [];
this.state = States.loading;
this.messagesList = [];
this.ref.detectChanges();
this.showEnabledExtensions();
this.numberOfTopScroll = 0;
if (!this.loggedInUser) {
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
this.messagesList = [];
if (this.user) {
if (Object.keys(this.user).length > 1) {
this.user = this.user;
this.type = CometChatUIKitConstants.MessageReceiverType.user;
this.createRequestBuilder();
}
else {
CometChat.getUser(this.user).then((user) => {
this.user = user;
this.type = CometChatUIKitConstants.MessageReceiverType.user;
this.createRequestBuilder();
});
}
}
else if (this.group) {
if (Object.keys(this.group).length > 1) {
this.group = this.group;
this.type = CometChatUIKitConstants.MessageReceiverType.group;
this.createRequestBuilder();
}
else {
CometChat.getGroup(this.group).then((group) => {
this.group = group;
this.type = CometChatUIKitConstants.MessageReceiverType.group;
this.createRequestBuilder();
});
}
}
this.scrollToBottom();
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
sendMessage(message, receiverId, receiverType) {
if (message.getType() == CometChatUIKitConstants.MessageTypes.text) {
const newMessage = new CometChat.TextMessage(receiverId, message.getText(), receiverType);
return new Promise((resolve, reject) => {
CometChatUIKit.sendTextMessage(newMessage)
.then((message) => {
resolve(message);
})
.catch((err) => {
reject(err);
});
});
}
else {
const uploadedFile = message?.data?.attachments[0];
const newMessage = new CometChat.MediaMessage(receiverId, "", message.getType(), receiverType);
let attachment = new CometChat.Attachment(uploadedFile);
newMessage.setAttachment(attachment);
return new Promise((resolve, reject) => {
CometChatUIKit.sendMediaMessage(newMessage)
.then((message) => {
resolve(message);
})
.catch((err) => {
reject(err);
});
});
}
}
getCallBubbleTitle(message) {
if (!message.getSender() ||
message.getSender().getUid() == this.loggedInUser.getUid()) {
return localize("YOU_INITIATED_GROUP_CALL");
}
else {
return `${message.getSender().getName()} ${localize("INITIATED_GROUP_CALL")}`;
}
}
ngOnDestroy() {
this.showConversationStarter = false;
this.showConversationSummary = false;
this.unsubscribeToEvents();
try {
//Removing Message Listeners
CometChat.removeGroupListener(this.groupListenerId);
CometChat.removeCallListener(this.callListenerId);
CometChat.removeConnectionListener(this.connectionListenerId);
this.onTextMessageReceived?.unsubscribe();
this.onMediaMessageReceived?.unsubscribe();
this.onMessageReactionAdded?.unsubscribe();
this.onMessageReactionRemoved?.unsubscribe();
this.onCustomMessageReceived?.unsubscribe();
this.onFormMessageReceived?.unsubscribe();
this.onSchedulerMessageReceived?.unsubscribe();
this.onCardMessageReceived?.unsubscribe();
this.onCustomInteractiveMessageReceived?.unsubscribe();
this.onMessagesDelivered?.unsubscribe();
this.onMessagesRead?.unsubscribe();
this.onMessagesDeliveredToAll?.unsubscribe();
this.onMessagesReadByAll?.unsubscribe();
this.onMessageDeleted?.unsubscribe();
this.onMessageEdited?.unsubscribe();
this.onTransientMessageReceived?.unsubscribe();
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
this.ref.detectChanges();
}
/**
* Creates a new ReactionsStyle object with the defined or default styles.
*
* @returns {ReactionsStyle} Returns an instance of ReactionsStyle with the set or default styles.
*/
getReactionsStyle() {
const reactionsStyle = this.reactionsConfiguration?.reactionsStyle || {};
return new ReactionsStyle({
height: reactionsStyle?.height || "fit-content",
width: reactionsStyle?.width || "fit-content",
border: reactionsStyle?.border || "none",
borderRadius: reactionsStyle?.borderRadius || "0",
background: reactionsStyle?.background || "transparent",
activeReactionBackground: reactionsStyle?.activeReactionBackground ||
this.themeService.theme.palette.getPrimary150(),
reactionBackground: reactionsStyle?.reactionBackground ||
this.themeService.theme.palette.getBackground(),
reactionBorder: reactionsStyle?.reactionBorder ||
`1px solid ${this.themeService.theme.palette.getAccent100()}`,
activeReactionBorder: reactionsStyle?.activeReactionBorder ||
`1px solid ${this.themeService.theme.palette.getPrimary500()}`,
reactionBorderRadius: reactionsStyle?.reactionBorderRadius || "12px",
activeReactionCountTextColor: reactionsStyle?.activeReactionCountTextColor ||
this.themeService.theme.palette.getAccent(),
activeReactionCountTextFont: reactionsStyle?.activeReactionCountTextFont ||
fontHelper(this.themeService.theme.typography.caption1),
reactionCountTextFont: reactionsStyle?.reactionCountTextFont ||
fontHelper(this.themeService.theme.typography.caption1),
reactionCountTextColor: reactionsStyle?.reactionCountTextColor ||
this.themeService.theme.palette.getAccent(),
reactionBoxShadow: reactionsStyle?.reactionBoxShadow || "rgba(0, 0, 0, 0.1) 0px 4px 12px",
reactionEmojiFont: reactionsStyle?.reactionEmojiFont ||
fontHelper(this.themeService.theme.typography.subtitle1),
});
}
getBubbleById(id) {
let targetBubble;
this.messageBubbleRef.forEach((bubble) => {
if (bubble.nativeElement.id === id)
targetBubble = bubble;
});
return targetBubble;
}
openMessageInfo(messageObject) {
this.openMessageInfoPage = true;
this.messageInfoObject = messageObject;
this.ref.detectChanges();
}
sendMessagePrivately(messageObject) {
CometChatUIEvents.ccOpenChat.next({ user: messageObject.getSender() });
}
getMessageById(id) {
let messageKey = this.messagesList.findIndex((m) => m.getId() == id);
if (messageKey > -1) {
return this.messagesList[messageKey];
}
else {
return false;
}
}
isTranslated(message) {
let translatedMessageObject = message;
if (translatedMessageObject &&
translatedMessageObject?.data?.metadata &&
translatedMessageObject?.data?.metadata[MessageTranslationConstants.translated_message]) {
return translatedMessageObject.data.metadata[MessageTranslationConstants.translated_message];
}
else {
return null;
}
}
setOptionsCallback(options, id) {
options?.forEach((element) => {
switch (element.id) {
case CometChatUIKitConstants.MessageOption.deleteMessage:
if (!element.onClick) {
element.onClick = this.deleteCallback;
}
break;
case CometChatUIKitConstants.MessageOption.editMessage:
if (!element.onClick) {
element.onClick = this.editCallback;
}
break;
case CometChatUIKitConstants.MessageOption.translateMessage:
if (!element.onClick) {
element.onClick = this.translateMessage;
}
break;
case CometChatUIKitConstants.MessageOption.copyMessage:
if (!element.onClick) {
element.onClick = this.copyCallback;
}
break;
case CometChatUIKitConstants.MessageOption.reactToMessage:
if (!element.onClick || !element.customView) {
element.onClick = this.showEmojiKeyboard;
}
break;
case CometChatUIKitConstants.MessageOption.replyInThread:
if (!element.onClick) {
element.onClick = this.threadCallback;
}
break;
case CometChatUIKitConstants.MessageOption.sendMessagePrivately:
if (!element.onClick) {
element.onClick = this.messagePrivatelyCallback;
}
break;
case CometChatUIKitConstants.MessageOption.messageInformation:
if (!element.onClick) {
element.onClick = this.messageInfoCallback;
}
break;
default:
break;
}
});
return options;
}
/**
* send message options based on type
* @param {CometChat.BaseMessage} msgObject
*/
setMessageOptions(msgObject) {
let options;
if (this.messageTemplate &&
this.messageTemplate.length > 0 &&
!msgObject?.getDeletedAt() &&
msgObject?.getType() != CometChatUIKitConstants.MessageTypes.groupMember) {
this.messageTemplate.forEach((element) => {
if (msgObject?.getId() &&
element.type == msgObject?.getType() &&
element?.options) {
options =
this.setOptionsCallback(element?.options(this.loggedInUser, msgObject, this.themeService.theme, this.group), msgObject?.getId()) || [];
}
});
}
else {
options = [];
}
options = this.filterEmojiOptions(options);
return options;
}
/**
* Reacts to a message by either adding or removing the reaction.
*
* @param {string} emoji - The emoji used for the reaction.
* @param {CometChat.BaseMessage} message - The message that was reacted to.
*/
reactToMessage(emoji, message) {
const messageId = message?.getId();
const msgObject = this.getMessageById(messageId);
const reactions = msgObject?.getReactions() || [];
const emojiObject = reactions?.find((reaction) => {
return reaction?.reaction == emoji;
});
if (emojiObject && emojiObject?.getReactedByMe()) {
const updatedReactions = [];
reactions.forEach((reaction) => {
if (reaction?.getReaction() == emoji) {
if (reaction?.getCount() === 1) {
return;
}
else {
reaction.setCount(reaction?.getCount() - 1);
reaction.setReactedByMe(false);
updatedReactions.push(reaction);
}
}
else {
updatedReactions.push(reaction);
}
});
msgObject.setReactions(updatedReactions);
this.updateMessage(msgObject);
CometChat.removeReaction(messageId, emoji)
.then((message) => { })
.catch((error) => {
// Return old message object instead of
this.updateMessage(msgObject); //need changes
console.log(error);
});
}
else {
const updatedReactions = [];
const reactionAvailable = reactions.find((reaction) => {
return reaction?.getReaction() == emoji;
});
reactions.forEach((reaction) => {
if (reaction?.getReaction() == emoji) {
reaction.setCount(reaction?.getCount() + 1);
reaction.setReactedByMe(true);
updatedReactions.push(reaction);
}
else {
updatedReactions.push(reaction);
}
});
if (!reactionAvailable) {
const react = new CometChat.ReactionCount(emoji, 1, true);
updatedReactions.push(react);
}
msgObject.setReactions(updatedReactions);
this.updateMessage(msgObject);
CometChat.addReaction(messageId, emoji)
.then((response) => { })
.catch((error) => {
console.log(error);
this.updateMessage(msgObject);
});
}
}
getClonedReactionObject(message) {
return CometChatUIKitUtility.clone(message);
}
/**
* passing style based on message object
* @param {CometChat.BaseMessage} messageObject
*/
setMessageBubbleStyle(msg) {
let style;
if (msg?.getDeletedAt()) {
style = {
background: "transparent",
border: `1px dashed ${this.themeService.theme.palette.getAccent400()}`,
borderRadius: "12px",
};
}
else if (msg?.getType() == CometChatUIKitConstants.calls.meeting &&
(!msg?.getSender() ||
msg?.getSender().getUid() == this.loggedInUser.getUid())) {
style = {
background: this.themeService.theme.palette.getPrimary(),
border: `none`,
borderRadius: "12px",
};
// } else if (this.getLinkPreview(msg as CometChat.TextMessage)) {
// style = {
// borderRadius: "8px",
// background: this.themeService.theme.palette.getAccent100(),
// };
}
else if (msg?.getType() == StickersConstants.sticker) {
style = {
background: "transparent",
borderRadius: "12px",
};
}
else if (!msg?.getDeletedAt() &&
msg?.getCategory() == CometChatUIKitConstants.MessageCategory.message &&
msg?.getType() == CometChatUIKitConstants.MessageTypes.text &&
(!msg?.getSender() ||
this.loggedInUser.getUid() == msg?.getSender().getUid())) {
style = {
background: this.alignment == MessageListAlignment.left
? this.themeService.theme.palette.getAccent100()
: this.themeService.theme.palette.getPrimary(),
borderRadius: "12px",
};
}
else if (!msg?.getDeletedAt() &&
msg?.getCategory() == CometChatUIKitConstants.MessageCategory.message &&
msg?.getType() == CometChatUIKitConstants.MessageTypes.audio) {
style = {
borderRadius: "",
background: this.themeService.theme.palette.getSecondary(),
};
}
else if (msg?.getType() == CometChatUIKitConstants.MessageTypes.groupMember ||
msg?.getCategory() == this.callConstant) {
style = {
background: "transparent",
borderRadius: "12px",
border: `1px solid ${this.themeService.theme.palette.getSecondary()}`,
};
}
else if (!msg?.getDeletedAt() &&
msg?.getCategory() === CometChatUIKitConstants.MessageCategory.interactive) {
return {
background: this.themeService.theme.palette.getSecondary(),
width: "300px",
};
}
else {
if (msg?.getSender() &&
msg?.getSender().getUid() != this.loggedInUser.getUid()) {
style = {
background: this.themeService.theme.palette.getSecondary(),
borderRadius: "12px",
};
}
else {
style = {
background: this.themeService.theme.palette.getSecondary(),
borderRadius: "12px",
};
}
}
return style;
}
getSessionId(message) {
let data = message.getData();
return data?.customData?.sessionID;
}
getWhiteboardDocument(message) {
try {
if (message?.getData()) {
var data = message.getData();
if (data?.metadata) {
var metadata = data?.metadata;
if (CometChatUIKitUtility.checkHasOwnProperty(metadata, "@injected")) {
var injectedObject = metadata["@injected"];
if (injectedObject?.extensions) {
var extensionObject = injectedObject.extensions;
return extensionObject[CollaborativeWhiteboardConstants.whiteboard]
? extensionObject[CollaborativeWhiteboardConstants.whiteboard]
.board_url
: extensionObject[CollaborativeDocumentConstants.document]
.document_url;
}
}
}
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
openLinkURL(event) {
window.open(event?.detail?.url, "_blank");
}
getSticker(message) {
try {
let stickerData = null;
if (CometChatUIKitUtility.checkHasOwnProperty(message, StickersConstants.data) &&
CometChatUIKitUtility.checkHasOwnProperty(message.getData(), StickersConstants.custom_data)) {
stickerData = message.data.customData;
if (CometChatUIKitUtility.checkHasOwnProperty(stickerData, StickersConstants.sticker_url)) {
return stickerData.sticker_url;
}
else {
return "";
}
}
else {
return "";
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
/**
* Checks if the 'headerView' is present in the default template provided by the user
* If present, returns the user-defined template, otherwise returns null.
*
* @param message Message object for which the status info view needs to be fetched
* @returns User-defined TemplateRef if present, otherwise null
*/
getHeaderView(message) {
let view = null;
if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.headerView) {
view = this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.headerView(message);
return view;
}
else {
return null;
}
}
/**
* Checks if the 'footerView' is present in the default template provided by the user
* If present, returns the user-defined template, otherwise returns null.
*
* @param message Message object for which the status info view needs to be fetched
* @returns User-defined TemplateRef if present, otherwise null
*/
getFooterView(message) {
let view = null;
if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.footerView) {
view = this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.footerView(message);
return view;
}
else {
return null;
}
}
/**
* Checks if the 'bottomView' is present in the default template provided by the user
* If present, returns the user-defined template, otherwise returns null.
*
* @param message Message object for which the status info view needs to be fetched
* @returns User-defined TemplateRef if present, otherwise null
*/
getBottomView(message) {
if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.bottomView) {
return this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.bottomView(message);
}
else {
return null;
}
}
/**
* Checks if the 'statusInfoView' is present in the default template provided by the user
* If present, returns the user-defined template, otherwise returns null.
*
* @param message Message object for which the status info view needs to be fetched
* @returns User-defined TemplateRef if present, otherwise null
*/
getStatusInfoView(message) {
if (this.messageTypesMap[message.getCategory() + '_' + message?.getType()] &&
this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.statusInfoView) {
return this.messageTypesMap[message.getCategory() + '_' + message?.getType()]?.statusInfoView(message);
}
else {
return null;
}
}
isAudioOrVideoMessage(message) {
const messageType = message?.getType();
const typesToCheck = [
CometChatUIKitConstants.MessageTypes.image,
CometChatUIKitConstants.MessageTypes.video,
];
return typesToCheck.includes(messageType);
}
getFormMessageBubbleStyle() {
const textStyle = new InputStyle({
width: "100%",
height: "30px",
border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
borderRadius: "6px",
padding: "0px 0px 0px 5px",
placeholderTextColor: this.themeService.theme.palette.getAccent400(),
placeholderTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
textFont: fontHelper(this.themeService.theme.typography.subtitle2),
textColor: this.themeService.theme.palette.getAccent(),
background: this.themeService.theme.palette.getBackground(),
});
const labelStyle = new LabelStyle({
textFont: fontHelper(this.themeService.theme.typography.subtitle1),
textColor: this.themeService.theme.palette.getAccent(),
background: "transparent",
});
const radioButtonStyle = new RadioButtonStyle({
height: "16px",
width: "16px",
border: "none",
labelTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
labelTextColor: this.themeService.theme.palette.getAccent600(),
borderRadius: "4px",
background: "",
});
const checkboxStyle = new CheckboxStyle({
height: "16px",
width: "16px",
border: "none",
borderRadius: "4px",
background: "",
labelTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
labelTextColor: this.themeService.theme.palette.getAccent(),
});
const dropdownStyle = new DropdownStyle({
height: "35px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
borderRadius: "6px",
activeTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
activeTextColor: this.themeService.theme.palette.getAccent(),
arrowIconTint: this.themeService.theme.palette.getAccent700(),
textFont: fontHelper(this.themeService.theme.typography.subtitle2),
textColor: this.themeService.theme.palette.getAccent(),
optionBackground: this.themeService.theme.palette.getBackground(),
optionBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
optionHoverBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
hoverTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
hoverTextColor: this.themeService.theme.palette.getAccent(),
hoverTextBackground: this.themeService.theme.palette.getAccent100(),
});
const buttonGroupStyle = {
height: "40px",
width: "100%",
background: this.themeService.theme.palette.getPrimary(),
border: `none`,
borderRadius: "6px",
buttonTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
buttonTextColor: this.themeService.theme.palette.getBackground(),
justifyContent: "center",
};
const singleSelectStyle = new SingleSelectStyle({
height: "100%",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
border: "none",
borderRadius: "12px",
activeTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
activeTextColor: this.themeService.theme.palette.getAccent(),
activeTextBackground: this.themeService.theme.palette.getAccent100(),
textFont: fontHelper(this.themeService.theme.typography.subtitle2),
textColor: this.themeService.theme.palette.getAccent(),
optionBackground: this.themeService.theme.palette.getBackground(),
optionBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
optionBorderRadius: "3px",
hoverTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
hoverTextColor: this.themeService.theme.palette.getAccent(),
hoverTextBackground: this.themeService.theme.palette.getAccent100(),
});
const quickViewStyle = new QuickViewStyle({
background: "transparent",
height: "fit-content",
width: "100%",
titleFont: fontHelper(this.themeService.theme.typography.subtitle2),
titleColor: this.themeService.theme.palette.getPrimary(),
subtitleFont: fontHelper(this.themeService.theme.typography.subtitle2),
subtitleColor: this.themeService.theme.palette.getAccent600(),
leadingBarTint: this.themeService.theme.palette.getPrimary(),
leadingBarWidth: "4px",
borderRadius: "8px",
});
return new FormBubbleStyle({
width: "300px",
height: "fit-content",
border: "none",
background: "transparent",
wrapperBackground: this.themeService.theme.palette.getBackground(),
borderRadius: "8px",
wrapperBorderRadius: "8px",
textInputStyle: textStyle,
labelStyle: labelStyle,
radioButtonStyle: radioButtonStyle,
checkboxStyle: checkboxStyle,
dropdownStyle: dropdownStyle,
buttonStyle: buttonGroupStyle,
singleSelectStyle: singleSelectStyle,
quickViewStyle: quickViewStyle,
titleColor: this.themeService.theme.palette.getAccent(),
titleFont: fontHelper(this.themeService.theme.typography.title1),
goalCompletionTextColor: this.themeService.theme.palette.getAccent(),
goalCompletionTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
wrapperPadding: "2px",
datePickerBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
datePickerBorderRadius: "6px",
datePickerFont: fontHelper(this.themeService.theme.typography.subtitle2),
datePickerFontColor: this.themeService.theme.palette.getAccent(),
});
}
getCardMessageBubbleStyle() {
const buttonStyle = {
height: "40px",
width: "100%",
background: "transparent",
border: `none`,
borderRadius: "0px",
buttonTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
buttonTextColor: `${this.themeService.theme.palette.getPrimary()}`,
justifyContent: "center",
};
return new CardBubbleStyle({
background: "transparent",
borderRadius: "8px",
height: "fit-content",
width: "300px",
imageHeight: "auto",
imageWidth: "100%",
imageRadius: "8px",
imageBackgroundColor: "transparent",
descriptionFontColor: this.themeService.theme.palette.getAccent(),
descriptionFont: fontHelper(this.themeService.theme.typography.subtitle2),
buttonStyle: buttonStyle,
dividerTintColor: this.themeService.theme.palette.getAccent100(),
wrapperBackground: this.themeService.theme.palette.getBackground(),
wrapperBorderRadius: "8px",
wrapperPadding: "2px",
disabledButtonColor: this.themeService.theme.palette.getAccent600(),
});
}
getCallBubbleStyle(message) {
var isLeftAligned = this.alignment == MessageListAlignment.left;
var isUserSentMessage = !message?.getSender() ||
this.loggedInUser.getUid() === message?.getSender().getUid();
if (isUserSentMessage && !isLeftAligned) {
return {
titleFont: fontHelper(this.themeService.theme.typography.text2),
titleColor: this.themeService.theme.palette.getAccent("dark"),
iconTint: this.themeService.theme.palette.getAccent("dark"),
buttonTextFont: fontHelper(this.themeService.theme.typography.text2),
buttonTextColor: this.themeService.theme.palette.getPrimary(),
buttonBackground: this.themeService.theme.palette.getAccent("dark"),
width: "240px",
};
}
else {
return {
titleFont: fontHelper(this.themeService.theme.typography.text2),
titleColor: this.themeService.theme.palette.getAccent(),
iconTint: this.themeService.theme.palette.getPrimary(),
buttonTextFont: fontHelper(this.themeService.theme.typography.text2),
buttonTextColor: this.themeService.theme.palette.getPrimary(),
buttonBackground: this.themeService.theme.palette.getAccent("dark"),
width: "240px",
};
}
}
getBubbleAlignment(message) {
return this.alignment == MessageListAlignment.left ||
(message.getSender() &&
message.getSender().getUid() != this.loggedInUser.getUid())
? MessageBubbleAlignment.left
: MessageBubbleAlignment.right;
}
getCallTypeIcon(message) {
if (message.getType() == CometChatUIKitConstants.MessageTypes.audio) {
return "assets/Audio-Call.svg";
}
else {
return "assets/Video-call.svg";
}
}
callStatusStyle(message) {
if (message.getCategory() == this.callConstant) {
let missedCallTextColor = CallingDetailsUtils.isMissedCall(message, this.loggedInUser)
? this.themeService.theme.palette.getError()
: this.themeService.theme.palette.getAccent600();
return {
buttonTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
buttonTextColor: missedCallTextColor,
borderRadius: "10px",
border: "none",
buttonIconTint: missedCallTextColor,
background: "transparent",
iconBackground: "transparent",
padding: "8px 12px",
gap: "4px",
height: "25px",
justifyContent: "center",
};
}
else {
return null;
}
}
setFileBubbleStyle(message) {
var isFileMessage = message.getCategory() ===
CometChatUIKitConstants.MessageCategory.message &&
message?.getType() === CometChatUIKitConstants.MessageTypes.file;
if (isFileMessage) {
return {
titleFont: fontHelper(this.theme.typography.subtitle1),
titleColor: this.themeService.theme.palette.getAccent(),
subtitleFont: fontHelper(this.theme.typography.subtitle2),
subtitleColor: this.themeService.theme.palette.getAccent600(),
iconTint: this.themeService.theme.palette.getPrimary(),
};
}
else {
return;
}
}
ngAfterViewInit() {
this.ioBottom();
this.ioTop();
this.checkMessageTemplate();
}
getStartCallFunction(message) {
let sessionId = this.getSessionId(message);
let callback = this.callbacks.get(sessionId);
if (!callback) {
callback = (sessionId) => this.startDirectCall(sessionId, message);
this.callbacks.set(sessionId, callback);
}
return callback;
}
/**
* Extracting types and categories from template
*
*/
checkMessageTemplate() {
this.typesMap = {
[CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.text]: this.textBubble,
[CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.file]: this.fileBubble,
[CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.audio]: this.audioBubble,
[CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.video]: this.videoBubble,
[CometChatUIKitConstants.MessageCategory.message + '_' + CometChatUIKitConstants.MessageTypes.image]: this.imageBubble,
[CometChatUIKitConstants.MessageCategory.action + '_' + CometChatUIKitConstants.MessageTypes.groupMember]: this.textBubble,
custom_extension_sticker: this.stickerBubble,
custom_extension_whiteboard: this.whiteboardBubble,
custom_extension_document: this.documentBubble,
custom_extension_poll: this.pollBubble,
custom_meeting: this.directCalling,
[CometChatUIKitConstants.MessageCategory.call + '_' + CometChatUIKitConstants.MessageTypes.audio]: this.audioBubble,
[CometChatUIKitConstants.MessageCategory.call + '_' + CometChatUIKitConstants.MessageTypes.video]: this.videoBubble,
[CometChatUIKitConstants.MessageCategory.interactive + '_' + CometChatUIKitConstants.MessageTypes.scheduler]: this.schedulerBubble,
[CometChatUIKitConstants.MessageCategory.interactive + '_' + CometChatUIKitConstants.MessageTypes.form]: this.formBubble,
[CometChatUIKitConstants.MessageCategory.interactive + '_' + CometChatUIKitConstants.MessageTypes.card]: this.cardBubble,
};
if (this.messageTemplate.length <= 0) {
this.createRequestBuilder();
}
this.setBubbleView();
}
getPollBubbleData(message, type) {
let data = message.getCustomData();
if (type) {
return data[type];
}
else {
return message.getSender().getUid();
}
}
getThreadCount(message) {
var replyCount = message?.getReplyCount() || 0;
var suffix = replyCount === 1 ? localize("REPLY") : localize("REPLIES");
return `${replyCount} ${suffix}`;
}
showEnabledExtensions() {
if (ChatConfigurator.names.includes("textmoderator")) {
this.enableDataMasking = true;
}
if (ChatConfigurator.names.includes("thumbnailgeneration")) {
this.enableThumbnailGeneration = true;
}
if (ChatConfigurator.names.includes("linkpreview")) {
this.enableLinkPreview = true;
}
if (ChatConfigurator.names.includes("polls")) {
this.enablePolls = true;
}
if (ChatConfigurator.names.includes("reactions")) {
this.enableReactions = true;
}
if (ChatConfigurator.names.includes("imagemoderation")) {
this.enableImageModeration = true;
}
if (ChatConfigurator.names.includes("stickers")) {
this.enableStickers = true;
}
if (ChatConfigurator.names.includes("collaborativewhiteboard")) {
this.enableWhiteboard = true;
}
if (ChatConfigurator.names.includes("collaborativedocument")) {
this.enableDocument = true;
}
if (ChatConfigurator.names.includes("calling")) {
this.enableCalling = true;
}
if (ChatConfigurator.names.includes("aiconversationstarter")) {
this.enableConversationStarter = true;
}
if (ChatConfigurator.names.includes("aiconversationsummary")) {
this.enableConversationSummary = true;
}
}
openImageInFullScreen(message) {
this.imageurlToOpen = message?.data?.attachments[0]?.url;
this.openFullscreenView = true;
this.ref.detectChanges();
}
closeImageInFullScreen() {
this.imageurlToOpen = "";
this.openFullscreenView = false;
this.ref.detectChanges();
}
openWarningDialog(event) {
this.closeImageModeration = event?.detail?.onConfirm;
this.openConfirmDialog = true;
this.ref.detectChanges();
}
onCancelClick() {
this.openConfirmDialog = false;
this.ref.detectChanges();
}
getTextMessage(message) {
var text = this.enableDataMasking
? CometChatUIKitUtility.getExtensionData(message)
: null;
return text?.trim()?.length > 0 ? text : message.getText();
}
getLinkPreview(message) {
try {
if (message?.getMetadata() && this.enableLinkPreview) {
var metadata = message.getMetadata();
var injectedObject = metadata[LinkPreviewConstants.injected];
if (injectedObject && injectedObject?.extensions) {
var extensionsObject = injectedObject.extensions;
if (extensionsObject &&
CometChatUIKitUtility.checkHasOwnProperty(extensionsObject, LinkPreviewConstants.link_preview)) {
var linkPreviewObject = extensionsObject[LinkPreviewConstants.link_preview];
if (linkPreviewObject &&
CometChatUIKitUtility.checkHasOwnProperty(linkPreviewObject, LinkPreviewConstants.links) &&
linkPreviewObject[LinkPreviewConstants.links].length) {
return linkPreviewObject[LinkPreviewConstants.links][0];
}
else {
return null;
}
}
else {
return null;
}
}
}
else {
return null;
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
getImageThumbnail(msg) {
var message = msg;
let imageURL = "";
if (this.enableThumbnailGeneration) {
try {
var metadata = message.getMetadata();
var injectedObject = metadata?.[ThumbnailGenerationConstants.injected];
var extensionsObject = injectedObject?.extensions;
var thumbnailGenerationObject = extensionsObject[ThumbnailGenerationConstants.thumbnail_generation];
var imageToDownload = thumbnailGenerationObject?.url_medium;
if (imageToDownload) {
imageURL = imageToDownload;
}
else {
imageURL = message?.data?.attachments
? message?.data?.attachments[0]?.url
: "";
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
else {
imageURL = message?.data?.attachments
? message?.data?.attachments[0]?.url
: "";
}
return imageURL;
}
getLinkPreviewDetails(key, message) {
let linkPreviewObject = this.getLinkPreview(message);
if (Object.keys(linkPreviewObject).length > 0) {
return linkPreviewObject[key];
}
else {
return "";
}
}
ngOnInit() {
this.isWebsocketReconnected = false;
this.firstReload = true;
this.setMessagesStyle();
this.setAvatarStyle();
this.setDateStyle();
this.subscribeToEvents();
this.addMessageEventListeners();
this.setOngoingCallStyle();
this.state = States.loading;
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.dateSeparatorStyle.background =
this.dateSeparatorStyle.background ||
this.themeService.theme.palette.getAccent600();
this.dividerStyle.background =
this.themeService.theme.palette.getAccent100();
this.labelStyle.textColor = this.messageListStyle.nameTextColor || this.labelStyle.textColor;
this.labelStyle.textFont = this.messageListStyle.nameTextFont || this.labelStyle.textFont;
this.loadingStyle.iconTint = this.messageListStyle.loadingIconTint || this.loadingStyle.iconTint;
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "28px",
height: "28px",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setDateStyle() {
let defaultStyle = new DateStyle({
textFont: fontHelper(this.themeService.theme.typography.subtitle2),
textColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
height: "100%",
width: "100%",
border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
borderRadius: "8px",
padding: "6px 12px",
});
this.dateSeparatorStyle = { ...defaultStyle, ...this.dateSeparatorStyle };
}
setMessagesStyle() {
this.popoverStyle = {
height: "330px",
width: "325px",
border: `none`,
borderRadius: "8px",
boxShadow: `${this.themeService.theme.palette.getAccent400()} 0px 0px 8px`
};
let defaultEmojiStyle = {
height: "330px",
width: "325px",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
borderRadius: "8px",
...this.emojiKeyboardStyle
};
this.emojiKeyboardStyle = defaultEmojiStyle;
this.unreadMessagesStyle = {
height: "100%",
width: "100%",
display: "flex",
justifyContent: "center",
border: "none",
borderRadius: "12px",
padding: "8px",
background: this.themeService.theme.palette.getPrimary(),
buttonTextColor: this.themeService.theme.palette.getAccent("dark"),
buttonTextFont: fontHelper(this.themeService.theme.typography.text3),
};
this.smartReplyStyle = {
replyTextFont: fontHelper(this.themeService.theme.typography.caption1),
replyTextColor: this.themeService.theme.palette.getAccent(),
replyBackground: this.themeService.theme.palette.getBackground(),
boxShadow: `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`,
closeIconTint: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
...this.smartReplyStyle,
};
this.conversationStarterStyle = {
replyTextFont: fontHelper(this.themeService.theme.typography.caption1),
replyTextColor: this.themeService.theme.palette.getAccent(),
replyBackground: this.themeService.theme.palette.getBackground(),
boxShadow: `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`,
closeIconTint: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
...this.conversationStarterStyle,
};
this.conversationSummaryStyle = {
...this.conversationSummaryStyle,
width: "100%",
height: "fit-content",
borderRadius: "8px",
background: this.themeService.theme.palette.getBackground(),
boxShadow: `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`,
textFont: fontHelper(this.themeService.theme.typography.caption2),
closeIconTint: this.themeService.theme.palette.getAccent600(),
textColor: this.themeService.theme.palette.getAccent(),
titleFont: fontHelper(this.themeService.theme.typography.title2),
border: "1px solid #6851D6",
};
this.fullScreenViewerStyle.closeIconTint =
this.themeService.theme.palette.getPrimary();
let defaultStyle = new MessageListStyle({
background: this.themeService.theme.palette.getBackground(),
border: `none`,
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
nameTextFont: fontHelper(this.themeService.theme.typography.caption2),
nameTextColor: this.themeService.theme.palette.getAccent600(),
threadReplyTextFont: fontHelper(this.themeService.theme.typography.text2),
threadReplyIconTint: this.themeService.theme.palette.getAccent500(),
threadReplyTextColor: this.themeService.theme.palette.getAccent(),
threadReplyUnreadBackground: this.themeService.theme.palette.getPrimary(),
threadReplyUnreadTextColor: this.themeService.theme.palette.getAccent900(),
threadReplyUnreadTextFont: fontHelper(this.themeService.theme.typography.caption2),
TimestampTextFont: fontHelper(this.themeService.theme.typography.caption3),
});
this.messageListStyle = { ...defaultStyle, ...this.messageListStyle };
this.linkPreviewStyle = new LinkPreviewStyle({
titleColor: this.themeService.theme.palette.getAccent(),
titleFont: fontHelper(this.themeService.theme.typography.title2),
descriptionColor: this.themeService.theme.palette.getAccent600(),
descriptionFont: fontHelper(this.themeService.theme.typography.subtitle2),
background: "transparent",
height: "100%",
width: "100%",
});
this.documentBubbleStyle = {
titleFont: fontHelper(this.themeService.theme.typography.text2),
titleColor: this.themeService.theme.palette.getAccent(),
subtitleFont: fontHelper(this.themeService.theme.typography.subtitle2),
subtitleColor: this.themeService.theme.palette.getAccent600(),
iconTint: this.themeService.theme.palette.getAccent700(),
buttonTextFont: fontHelper(this.themeService.theme.typography.text2),
buttonTextColor: this.themeService.theme.palette.getPrimary(),
buttonBackground: "transparent",
separatorColor: this.themeService.theme.palette.getAccent200(),
};
this.pollBubbleStyle = {
borderRadius: "8px",
background: "transparent",
votePercentTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
votePercentTextColor: this.themeService.theme.palette.getAccent600(),
pollQuestionTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
pollQuestionTextColor: this.themeService.theme.palette.getAccent(),
pollOptionTextFont: fontHelper(this.themeService.theme.typography.text2),
pollOptionTextColor: this.themeService.theme.palette.getAccent(),
pollOptionBackground: this.themeService.theme.palette.getAccent900(),
optionsIconTint: this.themeService.theme.palette.getAccent600(),
totalVoteCountTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
totalVoteCountTextColor: this.themeService.theme.palette.getAccent600(),
selectedPollOptionBackground: this.themeService.theme.palette.getAccent200(),
userSelectedOptionBackground: this.themeService.theme.palette.getPrimary(),
pollOptionBorder: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
pollOptionBorderRadius: "8px",
};
this.imageModerationStyle = {
filterColor: this.themeService.theme.palette.getPrimary(),
height: "100%",
width: "100%",
border: "none",
warningTextColor: this.themeService.theme.palette.getAccent("dark"),
warningTextFont: fontHelper(this.themeService.theme.typography.title2),
borderRadius: "8px",
};
this.confirmDialogStyle = {
confirmButtonBackground: this.themeService.theme.palette.getError(),
cancelButtonBackground: this.themeService.theme.palette.getSecondary(),
confirmButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
confirmButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
cancelButtonTextColor: this.themeService.theme.palette.getAccent900("dark"),
cancelButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
messageTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
messageTextColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
height: "100%",
width: "100%",
border: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
borderRadius: "8px",
};
}
getReceiptStyle(message) {
const isTextMessage = message?.getType() === CometChatUIKitConstants.MessageTypes.text &&
this.alignment != MessageListAlignment.left;
this.receiptStyle = new ReceiptStyle({
waitIconTint: this.themeService.theme.palette.getAccent700(),
sentIconTint: this.themeService.theme.palette.getAccent600(),
deliveredIconTint: this.themeService.theme.palette.getAccent600(),
readIconTint: isTextMessage
? this.themeService.theme.palette.getBackground()
: this.themeService.theme.palette.getPrimary(),
errorIconTint: this.themeService.theme.palette.getError(),
height: "11px",
width: "12px",
background: "transparent"
});
return { ...this.receiptStyle };
}
createRequestBuilder() {
if (!this.templates || this.templates?.length == 0) {
this.messageTemplate =
ChatConfigurator.getDataSource().getAllMessageTemplates();
this.categories =
ChatConfigurator.getDataSource().getAllMessageCategories();
this.types = ChatConfigurator.getDataSource().getAllMessageTypes();
}
else {
this.messageTemplate = this.templates;
}
this.state = States.loading;
this.requestBuilder = null;
if (this.user || this.group) {
if (this.user) {
this.requestBuilder = this.messagesRequestBuilder
? CometChatUIKitUtility.clone(this.messagesRequestBuilder)
: new CometChat.MessagesRequestBuilder()
.setLimit(this.limit)
.setTypes(this.types)
.setCategories(this.categories)
.hideReplies(true);
this.requestBuilder = this.requestBuilder.setUID(this.user.getUid()).build();
}
else {
this.requestBuilder = this.messagesRequestBuilder
? CometChatUIKitUtility.clone(this.messagesRequestBuilder)
: new CometChat.MessagesRequestBuilder()
.setLimit(this.limit)
.setTypes(this.types)
.hideReplies(true)
.setCategories(this.categories);
this.requestBuilder = this.requestBuilder.setGUID(this.group?.getGuid()).build();
}
this.computeUnreadCount();
this.fetchPreviousMessages();
}
}
computeUnreadCount() {
if (this.user || this.group) {
if (this.user) {
CometChat.getUnreadMessageCountForUser(this.user?.getUid()).then((res) => {
const dynamicKey = this.user?.getUid();
this.getUnreadCount = res[dynamicKey];
}, (error) => { });
}
else {
CometChat.getUnreadMessageCountForGroup(this.group?.getGuid()).then((res) => {
const dynamicKey = this.group?.getGuid();
this.getUnreadCount = res[dynamicKey];
}, (error) => { });
}
}
}
fetchActionMessages() {
let requestBuilder = new CometChat.MessagesRequestBuilder()
.setType(CometChatUIKitConstants.MessageCategory.message)
.setCategory(CometChatUIKitConstants.MessageCategory.action)
.setMessageId(this.lastMessageId)
.setLimit(this.limit);
if (this.user) {
requestBuilder.setUID(this.user?.getUid());
}
else if (this.group) {
requestBuilder.setGUID(this.group?.getGuid());
}
requestBuilder.build()
.fetchNext()
.then((messages) => {
if (messages && messages.length > 0) {
messages.forEach((message) => {
if (message.getActionOn() instanceof
CometChat.BaseMessage) {
let messageKey = this.messagesList.findIndex((m) => m.getId() ===
message.getActionOn().getId());
if (messageKey >= 0) {
this.messagesList[messageKey] = message.getActionOn();
}
}
});
this.messagesList = [...this.messagesList];
this.ref.detectChanges();
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
if (this.messagesList?.length <= 0) {
this.state = States.error;
this.ref.detectChanges();
}
});
}
attachConnectionListener() {
CometChat.addConnectionListener(this.connectionListenerId, new CometChat.ConnectionListener({
onConnected: () => {
this.isWebsocketReconnected = true;
this.fetchNextMessage();
console.log("ConnectionListener => connected");
},
onDisconnected: () => {
this.isWebsocketReconnected = false;
console.log("ConnectionListener => On Disconnected");
},
}));
}
addMessageEventListeners() {
try {
CometChat.addGroupListener(this.groupListenerId, new CometChat.GroupListener({
onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
this.messageUpdate(CometChatUIKitConstants.groupMemberAction.SCOPE_CHANGE, message, changedGroup, { user: changedUser, scope: newScope });
},
onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
this.messageUpdate(CometChatUIKitConstants.groupMemberAction.KICKED, message, kickedFrom, {
user: kickedUser,
hasJoined: false,
});
},
onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
this.messageUpdate(CometChatUIKitConstants.groupMemberAction.BANNED, message, bannedFrom, {
user: bannedUser,
});
},
onGroupMemberUnbanned: (message, unbannedUser, unbannedBy, unbannedFrom) => {
this.messageUpdate(CometChatUIKitConstants.groupMemberAction.UNBANNED, message, unbannedFrom, { user: unbannedUser });
},
onMemberAddedToGroup: (message, userAdded, userAddedBy, userAddedIn) => {
this.messageUpdate(CometChatUIKitConstants.groupMemberAction.ADDED, message, userAddedIn, {
user: userAdded,
hasJoined: true,
});
},
onGroupMemberLeft: (message, leavingUser, group) => {
this.messageUpdate(CometChatUIKitConstants.groupMemberAction.LEFT, message, group, {
user: leavingUser,
});
},
onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
this.messageUpdate(CometChatUIKitConstants.groupMemberAction.JOINED, message, joinedGroup, {
user: joinedUser,
});
},
}));
if (this.enableCalling) {
CometChat.addCallListener(this.callListenerId, new CometChat.CallListener({
onIncomingCallReceived: (call) => {
if (this.isPartOfCurrentChatForSDKEvent(call)) {
this.addMessage(call);
}
},
onIncomingCallCancelled: (call) => {
if (this.isPartOfCurrentChatForSDKEvent(call)) {
this.addMessage(call);
}
},
onOutgoingCallRejected: (call) => {
if (this.isPartOfCurrentChatForSDKEvent(call)) {
this.addMessage(call);
}
},
onOutgoingCallAccepted: (call) => {
if (this.isPartOfCurrentChatForSDKEvent(call)) {
this.addMessage(call);
}
},
onCallEndedMessageReceived: (call) => {
if (this.isPartOfCurrentChatForSDKEvent(call)) {
this.addMessage(call);
}
},
}));
}
if (!this.disableReactions) {
this.onMessageReactionAdded =
CometChatMessageEvents.onMessageReactionAdded.subscribe((reactionReceipt) => {
this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_REACTION_ADDED, reactionReceipt);
});
this.onMessageReactionRemoved =
CometChatMessageEvents.onMessageReactionRemoved.subscribe((reactionReceipt) => {
this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_REACTION_REMOVED, reactionReceipt);
});
}
this.onTextMessageReceived =
CometChatMessageEvents.onTextMessageReceived.subscribe((message) => {
this.messageUpdate(CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED, message);
});
this.onMediaMessageReceived =
CometChatMessageEvents.onMediaMessageReceived.subscribe((message) => {
this.messageUpdate(CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED, message);
});
this.onCustomMessageReceived =
CometChatMessageEvents.onCustomMessageReceived.subscribe((message) => {
this.messageUpdate(CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED, message);
});
this.onFormMessageReceived =
CometChatMessageEvents.onFormMessageReceived.subscribe((message) => {
this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
});
this.onSchedulerMessageReceived =
CometChatMessageEvents.onSchedulerMessageReceived.subscribe((message) => {
this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
});
this.onCardMessageReceived =
CometChatMessageEvents.onCardMessageReceived.subscribe((message) => {
this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
});
this.onCustomInteractiveMessageReceived =
CometChatMessageEvents.onCustomInteractiveMessageReceived.subscribe((message) => {
this.messageUpdate(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, message);
});
this.onMessagesDelivered =
CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELIVERED, messageReceipt);
}
});
this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_READ, messageReceipt);
}
});
this.onMessagesReadByAll = CometChatMessageEvents.onMessagesReadByAll.subscribe((messageReceipt) => {
if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group) {
this.messageReadAndDelivered(messageReceipt, true);
this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_READ, messageReceipt);
}
});
this.onMessagesDeliveredToAll = CometChatMessageEvents.onMessagesDeliveredToAll.subscribe((messageReceipt) => {
if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group) {
this.messageReadAndDelivered(messageReceipt, true);
this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELIVERED, messageReceipt);
}
});
this.onMessageDeleted = CometChatMessageEvents.onMessageDeleted.subscribe((deletedMessage) => {
this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELETED, deletedMessage);
});
this.onMessageEdited = CometChatMessageEvents.onMessageEdited.subscribe((editedMessage) => {
this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_EDITED, editedMessage);
});
this.onTransientMessageReceived =
CometChatMessageEvents.onTransientMessageReceived.subscribe((transientMessage) => {
let liveReaction = transientMessage.getData();
if (transientMessage.getReceiverType() ==
CometChatUIKitConstants.MessageReceiverType.user &&
this.user &&
transientMessage?.getSender().getUid() == this.user.getUid() &&
transientMessage.getReceiverId() == this.loggedInUser?.getUid() &&
liveReaction["type"] == "live_reaction") {
CometChatMessageEvents.ccLiveReaction.next(liveReaction["reaction"]);
return;
}
else if (transientMessage.getReceiverType() ==
CometChatUIKitConstants.MessageReceiverType.group &&
this.group &&
transientMessage.getReceiverId() == this.group.getGuid() &&
transientMessage?.getSender().getUid() !=
this.loggedInUser?.getUid() &&
liveReaction["type"] == "live_reaction") {
CometChatMessageEvents.ccLiveReaction.next(liveReaction["reaction"]);
return;
}
});
this.onInteractionGoalCompleted =
CometChatMessageEvents.onInteractionGoalCompleted.subscribe((receipt) => {
this.messageUpdate(CometChatUIKitConstants.messages.INTERACTION_GOAL_COMPLETED, receipt);
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
/**
*
* @param
*/
/**
* Updates messageList on basis of user activity or group activity or calling activity
* @param {any=null} key
* @param {CometChat.MessageReceipt | CometChat.BaseMessage} message
* @param {CometChat.Group | null=null} group
* @param {any=null} options
*/
messageUpdate(key = null, message = null, group = null, options = null) {
try {
this.showConversationStarter = false;
this.showConversationSummary = false;
this.conversationStarterReplies = [];
this.conversationSummary = [];
this.ref.detectChanges();
switch (key) {
case CometChatUIKitConstants.messages.TEXT_MESSAGE_RECEIVED:
case CometChatUIKitConstants.messages.MEDIA_MESSAGE_RECEIVED:
this.markMessageAsDelivered(message);
if (this.isPartOfCurrentChatForSDKEvent(message)) {
this.messageReceived(message);
}
if (this.isThreadOfCurrentChatForSDKEvent(message)) {
this.updateReplyCount(message);
}
break;
case CometChatUIKitConstants.messages.MESSAGE_DELIVERED:
case CometChatUIKitConstants.messages.MESSAGE_READ:
this.messageReadAndDelivered(message);
break;
case CometChatUIKitConstants.messages.MESSAGE_DELETED:
case CometChatUIKitConstants.messages.MESSAGE_EDITED: {
this.messageEdited(message);
break;
}
case CometChatUIKitConstants.groupMemberAction.SCOPE_CHANGE:
case CometChatUIKitConstants.groupMemberAction.JOINED:
case CometChatUIKitConstants.groupMemberAction.LEFT:
case CometChatUIKitConstants.groupMemberAction.ADDED:
case CometChatUIKitConstants.groupMemberAction.KICKED:
case CometChatUIKitConstants.groupMemberAction.BANNED:
case CometChatUIKitConstants.groupMemberAction.UNBANNED: {
if (this.isPartOfCurrentChatForSDKEvent(message)) {
this.addMessage(message);
}
break;
}
case CometChatUIKitConstants.messages.CUSTOM_MESSAGE_RECEIVED:
case CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED:
if (this.isPartOfCurrentChatForSDKEvent(message)) {
this.customMessageReceived(message);
}
if (this.isThreadOfCurrentChatForSDKEvent(message)) {
this.updateReplyCount(message);
}
break;
case CometChatUIKitConstants.messages.INTERACTION_GOAL_COMPLETED:
if (this.isPartOfCurrentChatForSDKEvent(message)) {
this.updateInteractiveMessage(message);
}
break;
case CometChatUIKitConstants.messages.MESSAGE_REACTION_ADDED:
this.onReactionUpdated(message, true);
break;
case CometChatUIKitConstants.messages.MESSAGE_REACTION_REMOVED:
this.onReactionUpdated(message, false);
break;
default:
return;
}
this.ref.detectChanges();
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
/**
* Updates a message's reactions based on a new reaction.
*
* @param {CometChat.ReactionEvent} message - The new message reaction.
* @param {boolean} isAdded - True if the reaction was added, false if it was removed.
* @returns {boolean} Returns false if the message was not found, true otherwise.
*/
onReactionUpdated(message, isAdded) {
const messageId = message.getReaction()?.getMessageId();
const messageObject = this.getMessageById(messageId);
if (!messageObject) {
return false;
}
let action;
if (isAdded) {
action = CometChat.REACTION_ACTION.REACTION_ADDED;
}
else {
action = CometChat.REACTION_ACTION.REACTION_REMOVED;
}
let modifiedMessage = CometChat.CometChatHelper.updateMessageWithReactionInfo(messageObject, message.getReaction(), action);
if (modifiedMessage instanceof CometChat.BaseMessage) {
this.updateMessage(modifiedMessage);
}
return true;
}
/**
* When Message is Received
* @param message
*/
/**
* @param {CometChat.BaseMessage} message
*/
messageReceived(message) {
try {
if (message.getReceiverId() === this.group?.getGuid() ||
(message?.getSender().getUid() === this.user?.getUid() &&
message.getReceiverId() === this.loggedInUser?.getUid())) {
if ((!message?.getReadAt() &&
!message?.getParentMessageId() &&
this.isOnBottom) ||
(!message?.getReadAt() &&
message.getParentMessageId() &&
this.parentMessageId &&
this.isOnBottom)) {
if (!this.disableReceipt) {
CometChat.markAsRead(message).then(() => {
CometChatMessageEvents.ccMessageRead.next(message);
});
}
else {
this.UnreadCount = [];
this.ref.detectChanges();
}
CometChatMessageEvents.ccMessageRead.next(message);
}
this.messageReceivedHandler(message);
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
this.ref.detectChanges();
}
/**
* Updating the reply count of Thread Parent Message
* @param {CometChat.BaseMessage} messages
*/
updateReplyCount(messages) {
try {
var receivedMessage = messages;
let messageList = [...this.messagesList];
let messageKey = messageList.findIndex((m) => m.getId() === receivedMessage.getParentMessageId());
if (messageKey > -1) {
var messageObj = messageList[messageKey];
let replyCount = messageObj.getReplyCount()
? messageObj.getReplyCount()
: 0;
replyCount = replyCount + 1;
messageObj.setReplyCount(replyCount);
messageList.splice(messageKey, 1, messageObj);
this.messagesList = [...messageList];
this.ref.detectChanges();
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
playAudio() {
if (!this.disableSoundForMessages) {
if (this.customSoundForMessages) {
CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessage, this.customSoundForMessages);
}
else {
CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessage);
}
}
}
reInitializeMessageList() {
this.reinitialized = true;
this.groupListenerId = "group_" + new Date().getTime();
this.callListenerId = "call_" + new Date().getTime();
this.addMessageEventListeners();
if (this.messagesRequestBuilder) {
if (this.keepRecentMessages) {
this.messagesList.splice(1, this.messagesList.length - 30);
}
else {
this.messagesList.splice(30);
}
this.requestBuilder = this.user
? this.messagesRequestBuilder.setUID(this.user.getUid()).build()
: this.messagesRequestBuilder.setGUID(this.group.getGuid()).build();
}
else {
if (this.keepRecentMessages) {
this.messagesList.splice(1, this.messagesList.length - 30);
this.scrollToBottom();
}
else {
this.messagesList.splice(30);
}
}
this.ref.detectChanges();
}
getMessageReceipt(message) {
let receipt = MessageReceiptUtils.getReceiptStatus(message);
return receipt;
}
messageReadAndDelivered(message, isGroupReceipt = false) {
try {
if (isGroupReceipt) {
let messageKey = this.messagesList.findIndex((m) => m.getId() == Number(message.getMessageId()));
if (messageKey > -1) {
this.messagesList[messageKey].setDeliveredAt(message.getDeliveredAt());
this.ref.detectChanges();
}
console.log(message.getReceiptType());
message.getReceiptType() == message.RECEIPT_TYPE.DELIVERED_TO_ALL_RECEIPT && this.markAllMessagAsDelivered(messageKey);
message.getReceiptType() == message.RECEIPT_TYPE.READ_BY_ALL_RECEIPT && this.markAllMessagAsRead(messageKey);
}
else if (message.getSender().getUid() !== this.loggedInUser?.getUid()) {
if (message.getReceiptType() == CometChatUIKitConstants.messages.DELIVERY) {
//search for message
let messageKey = this.messagesList.findIndex((m) => m.getId() == Number(message.getMessageId()));
if (messageKey > -1) {
this.messagesList[messageKey].setDeliveredAt(message.getDeliveredAt());
this.ref.detectChanges();
}
this.markAllMessagAsDelivered(messageKey);
}
else if (message.getReceiptType() == CometChatUIKitConstants.messages.READ) {
//search for message
let messageKey = this.messagesList.findIndex((m) => m.getId() == Number(message.getMessageId()));
this.ref.detectChanges();
this.markAllMessagAsRead(messageKey);
}
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
this.ref.detectChanges();
}
/**
* @param {CometChat.BaseMessage} readMessage
*/
markAllMessagAsRead(messageKey) {
for (let i = messageKey; i >= 0; i--) {
if (!this.messagesList[i].getReadAt()) {
this.messagesList[i].setReadAt(CometChatUIKitUtility.getUnixTimestamp());
this.ref.detectChanges();
}
}
CometChatMessageEvents.ccMessageRead.next(this.messagesList[messageKey]);
}
markAllMessagAsDelivered(messageKey) {
for (let i = messageKey; i >= 0; i--) {
if (!this.messagesList[i].getDeliveredAt()) {
this.messagesList[i].setDeliveredAt(CometChatUIKitUtility.getUnixTimestamp());
this.ref.detectChanges();
}
}
}
/**
* Emits an Action Indicating that Group Data has been updated
* @param
*/
/**
* When custom messages are received eg. Poll, Stickers emits action to update message list
* @param message
*/
/**
* @param {CometChat.BaseMessage} message
*/
customMessageReceived(message) {
try {
this.markMessageAsDelivered(message);
if (message.getReceiverId() === this.group?.getGuid() ||
(message?.getSender().getUid() === this.user?.getUid() &&
message.getReceiverId() === this.loggedInUser?.getUid())) {
if ((!message?.getReadAt() &&
!message?.getParentMessageId() &&
this.isOnBottom) ||
(!message?.getReadAt() &&
message.getParentMessageId() &&
this.parentMessageId &&
this.isOnBottom)) {
if (!this.disableReceipt) {
CometChat.markAsRead(message).then(() => {
CometChatMessageEvents.ccMessageRead.next(message);
});
}
else {
this.UnreadCount = [];
this.ref.detectChanges();
}
}
this.customMessageReceivedHandler(message);
}
else if (this.loggedInUser?.getUid() == message.getSender().getUid()) {
this.customMessageReceivedHandler(message);
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
this.ref.detectChanges();
return true;
}
/**
* Compares two dates and sets Date on a a new day
*/
/**
* @param {number} firstDate
* @param {number} secondDate
*/
isDateDifferent(firstDate, secondDate) {
let firstDateObj, secondDateObj;
firstDateObj = new Date(firstDate * 1000);
secondDateObj = new Date(secondDate * 1000);
return (firstDateObj.getDate() !== secondDateObj.getDate() ||
firstDateObj.getMonth() !== secondDateObj.getMonth() ||
firstDateObj.getFullYear() !== secondDateObj.getFullYear());
}
/**
* prepend Fetched Messages
* @param {CometChat.BaseMessage} messages
*/
prependMessages(messages) {
try {
if (!this.isPartOfCurrentChatForSDKEvent(messages[0])) {
return;
}
this.messagesList = [...messages, ...this.messagesList];
this.messageCount = this.messagesList.length;
if (this.messageCount > this.thresholdValue) {
this.keepRecentMessages = false;
this.reInitializeMessageBuilder();
}
this.ngZone.run(() => {
if (this.state != States.loaded) {
this.state = States.loaded;
}
this.ref.detach(); // Detach the change detector
});
if (this.chatChanged) {
CometChatUIEvents.ccActiveChatChanged.next({
user: this.user,
group: this.group,
message: messages[messages?.length - 1],
unreadMessageCount: this.getUnreadCount,
});
this.chatChanged = false;
this.scrollToBottom();
}
}
catch (error) {
this.state = States.error;
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
/**
* listening to bottom scroll using intersection observer
*/
ioBottom() {
var options = {
root: this.listScroll?.nativeElement,
rootMargin: "-100% 0px 100px 0px",
threshold: 0,
};
var callback = (entries) => {
var lastMessage = this.UnreadCount[this.UnreadCount.length - 1];
this.isOnBottom = entries[0].isIntersecting;
if (this.isOnBottom) {
this.fetchNextMessage();
if (!this.disableReceipt && this.UnreadCount?.length > 0) {
CometChat.markAsRead(lastMessage).then((res) => {
this.UnreadCount = [];
let messageKey = this.messagesList.findIndex((m) => m.getId() === Number(res?.getMessageId()));
if (messageKey > -1) {
this.markAllMessagAsRead(messageKey);
}
this.ref.detectChanges();
CometChatMessageEvents.ccMessageRead.next(lastMessage);
});
}
else {
this.UnreadCount = [];
this.ref.detectChanges();
}
}
};
var observer = new IntersectionObserver(callback, options);
observer.observe(this.bottom?.nativeElement);
}
/**
* listening to top scroll using intersection observer
*/
ioTop() {
var options = {
root: this.listScroll?.nativeElement,
rootMargin: "200px 0px 0px 0px",
threshold: 1.0,
};
var callback = (entries) => {
if (entries[0].isIntersecting) {
this.numberOfTopScroll++;
if (this.numberOfTopScroll > 1) {
this.fetchPreviousMessages();
}
}
};
var observer = new IntersectionObserver(callback, options);
observer.observe(this.top?.nativeElement);
}
/**
* This is to ensure that the uid doesn't get copied when clicking on the copy option.
* This function changes the uid regex to '@userName' without formatting
*
* @param {CometChat.TextMessage} message
* @returns
*/
getMentionsTextWithoutStyle(message) {
const regex = /<@uid:(.*?)>/g;
let messageText = message.getText();
let messageTextTmp = message.getText();
let match = regex.exec(messageText);
let mentionedUsers = message.getMentionedUsers();
while (match !== null) {
let user;
for (let i = 0; i < mentionedUsers.length; i++) {
if (match[1] == mentionedUsers[i].getUid()) {
user = mentionedUsers[i];
}
}
if (user) {
messageTextTmp = messageTextTmp.replace(match[0], "@" + user.getName() + "");
}
match = regex.exec(messageText);
}
return messageTextTmp;
}
/**
* callback for deleteMessage
* @param {CometChat.BaseMessage} object
*/
/**
* @param {CometChat.BaseMessage} messages
*/
messageSent(messages) {
var message = messages;
var messageList = [...this.messagesList];
let messageKey = messageList.findIndex((m) => m.getMuid() === message.getMuid());
if (messageKey > -1) {
messageList.splice(messageKey, 1, message);
}
this.messagesList = messageList;
this.ref.detectChanges();
this.scrollToBottom();
}
updateMessage(message, muid = false) {
if (muid) {
this.messageSent(message);
}
else {
this.updateEditedMessage(message);
}
}
/**
* Returns the style configuration for the thread view of a message.
*
* @param {CometChat.BaseMessage} message - The message that the style configuration is for.
* @returns {Object} The style configuration object.
*/
getThreadViewStyle(message) {
return {
height: "100%",
width: "100%",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.messageListStyle.threadReplyIconTint,
display: "flex",
flexFlow: this.isSentByMe(message) && this.alignment != MessageListAlignment.left
? "row-reverse"
: "row",
alignItems: "flex-start",
buttonTextColor: this.messageListStyle?.threadReplyTextColor,
buttonTextFont: this.messageListStyle?.threadReplyTextFont,
iconHeight: "15px",
iconWidth: "15px",
gap: "4px",
};
}
/**
* Checks if a message was sent by the currently logged in user.
*
* @param {CometChat.BaseMessage} message - The message to check.
* @returns {boolean} Returns true if the message is sent by the logged in user, false otherwise.
*/
isSentByMe(message) {
let sentByMe = !message?.getSender() ||
message.getSender().getUid() == this.loggedInUser?.getUid();
return sentByMe;
}
showHeaderTitle(message) {
if (this.alignment == MessageListAlignment.left) {
return true;
}
else {
if (this.group &&
message?.getCategory() !=
CometChatUIKitConstants.MessageCategory.action &&
message?.getSender() &&
message?.getSender().getUid() != this.loggedInUser?.getUid() &&
this.alignment == MessageListAlignment.standard) {
return true;
}
else {
return false;
}
}
}
/**
* Method to subscribe the required Rxjs events when the CometChatMessageListComponent loads
*/
subscribeToEvents() {
this.ccShowPanel = CometChatUIEvents.ccShowPanel.subscribe((data) => {
if (data.child?.showConversationSummaryView) {
this.fetchConversationSummary();
}
this.smartReplyConfig = data.configuration;
this.smartReplyMessage = data.message;
var smartReplyObject = data.message?.metadata?.[SmartRepliesConstants.injected]?.extensions?.[SmartRepliesConstants.smart_reply];
if (this.isPartOfCurrentChatForSDKEvent(this.smartReplyMessage) && smartReplyObject && !smartReplyObject.error) {
this.enableSmartReply = true;
this.showSmartReply = true;
this.ref.detectChanges();
}
});
this.ccHidePanel = CometChatUIEvents.ccHidePanel.subscribe(() => {
this.smartReplyMessage = null;
this.enableSmartReply = false;
this.showSmartReply = false;
});
this.ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe((message) => {
if (message && message.getParentMessageId()) {
const messageObj = this.getMessageById(message.getParentMessageId());
// if (messageObj && messageObj.getUnreadReplyCount()) {
// messageObj.setUnreadReplyCount(0);
// this.updateMessage(messageObj);
// }
}
});
this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
item;
this.appendMessages(item.messages);
});
this.ccGroupMemberBanned =
CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
if (this.isPartOfCurrentChatForUIEvent(item.message)) {
this.addMessage(item.message);
}
});
this.ccGroupMemberKicked =
CometChatGroupEvents.ccGroupMemberKicked.subscribe((item) => {
if (this.isPartOfCurrentChatForUIEvent(item.message)) {
this.addMessage(item.message);
}
});
this.ccGroupMemberScopeChanged =
CometChatGroupEvents.ccGroupMemberScopeChanged.subscribe((item) => {
if (this.isPartOfCurrentChatForUIEvent(item.message)) {
this.addMessage(item.message);
}
});
this.ccGroupLeft = CometChatGroupEvents.ccGroupLeft.subscribe((item) => {
if (this.isPartOfCurrentChatForUIEvent(item.message)) {
this.addMessage(item.message);
}
});
this.ccMessageEdit = CometChatMessageEvents.ccMessageEdited.subscribe((object) => {
if (object?.status == MessageStatus.success) {
if (this.isPartOfCurrentChatForSDKEvent(object.message)) {
this.updateMessage(object.message);
}
}
});
this.ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe((obj) => {
if (obj.message) {
let message = obj.message;
switch (obj.status) {
case MessageStatus.inprogress: {
if (this.isPartOfCurrentChatForUIEvent(message)) {
this.addMessage(message);
}
break;
}
case MessageStatus.success: {
this.showConversationStarter = false;
this.conversationStarterReplies = [];
this.showConversationSummary = false;
this.conversationSummary = [];
this.ref.detectChanges();
if (this.isThreadOfCurrentChatForUIEvent(message)) {
this.updateReplyCount(message);
}
this.updateMessage(message, true);
break;
}
case MessageStatus.error: {
if (!message.getSender() || this.isPartOfCurrentChatForUIEvent(message)) {
this.updateMessage(message);
}
}
}
}
});
this.ccMessageDelete = CometChatMessageEvents.ccMessageDeleted.subscribe((messageObject) => {
this.removeMessage(messageObject);
this.ref.detectChanges();
});
this.ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe((call) => {
this.showOngoingCall = false;
this.sessionId = "";
if (call && Object.keys(call).length > 0) {
if (this.isPartOfCurrentChatForUIEvent(call)) {
this.addMessage(call);
}
}
this.ref.detectChanges();
});
this.ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe((call) => {
if (this.isPartOfCurrentChatForUIEvent(call)) {
this.addMessage(call);
}
});
this.ccOutgoingCall = CometChatCallEvents.ccOutgoingCall.subscribe((call) => {
if (this.isPartOfCurrentChatForUIEvent(call)) {
this.addMessage(call);
}
});
this.ccCallAccepted = CometChatCallEvents.ccCallAccepted.subscribe((call) => {
if (this.isPartOfCurrentChatForUIEvent(call)) {
this.addMessage(call);
}
});
}
showStatusInfo(message) {
if (message?.getCategory() != this.MessageCategory.action &&
!message.getDeletedAt() &&
message?.getCategory() != this.MessageCategory.call &&
message?.getSentAt()) {
return true;
}
else {
return false;
}
}
shouldShowMessage(message, disableReceipt, hideReceipt) {
return (!message.getDeletedAt() &&
!(disableReceipt || hideReceipt) &&
(!message.getSender() || this.loggedInUser.getUid() === message.getSender()?.getUid()) &&
message.getCategory() !== this.MessageCategory.action &&
message.getCategory() !== this.MessageCategory.call);
}
fetchConversationStarter() {
this.showConversationStarter = true;
this.conversationStarterState = States.loading;
let receiverType = this.user
? CometChatUIKitConstants.MessageReceiverType.user
: CometChatUIKitConstants.MessageReceiverType.group;
let receiverId = this.user
? this.user.getUid()
: this.group.getGuid();
CometChat.getConversationStarter(receiverId, receiverType)
.then((response) => {
if (response) {
Object.keys(response).forEach((reply) => {
if (response[reply] && response[reply] != "") {
this.conversationStarterReplies.push(response[reply]);
}
});
if (this.conversationStarterReplies &&
this.conversationStarterReplies.length > 0 &&
this.messagesList?.length <= 0) {
this.conversationStarterState = States.loaded;
this.ref.detectChanges();
}
else {
this.conversationStarterState = States.empty;
this.ref.detectChanges();
}
}
else {
this.conversationStarterState = States.empty;
this.ref.detectChanges();
}
})
.catch((err) => {
if (this.onError) {
this.onError(err);
}
this.conversationStarterState = States.error;
this.ref.detectChanges();
});
}
fetchConversationSummary() {
this.showConversationSummary = true;
this.conversationSummaryState = States.loading;
this.ref.detectChanges();
let receiverType = this.user
? CometChatUIKitConstants.MessageReceiverType.user
: CometChatUIKitConstants.MessageReceiverType.group;
let receiverId = this.user
? this.user.getUid()
: this.group.getGuid();
let apiConfiguration = this.apiConfiguration;
CometChat.getConversationSummary(receiverId, receiverType, apiConfiguration)
.then((response) => {
// throw new Error("Parameter is not a number!");
if (response) {
this.conversationSummary = [response];
}
if (this.conversationSummary && this.conversationSummary.length > 0) {
this.conversationSummaryState = States.loaded;
this.ref.detectChanges();
}
else {
this.conversationSummaryState = States.empty;
this.ref.detectChanges();
}
})
.catch((err) => {
if (this.onError) {
this.onError(err);
}
this.conversationSummaryState = States.error;
this.ref.detectChanges();
});
return this.conversationSummary;
}
getReplies() {
let smartReply = this.smartReplyMessage;
var smartReplyObject = smartReply?.metadata?.[SmartRepliesConstants.injected]?.extensions?.[SmartRepliesConstants.smart_reply];
if (smartReplyObject?.reply_positive &&
smartReplyObject?.reply_neutral &&
smartReplyObject?.reply_negative) {
var { reply_positive, reply_neutral, reply_negative } = smartReplyObject;
return [reply_positive, reply_neutral, reply_negative];
}
return null;
}
/**
* Method to unsubscribe all the Rxjs events when the CometChatMessageListComponent gets destroy
*/
unsubscribeToEvents() {
this.ccGroupMemberAdded?.unsubscribe();
this.ccGroupMemberBanned?.unsubscribe();
this.ccGroupMemberJoined?.unsubscribe();
this.ccGroupMemberKicked?.unsubscribe();
this.ccOwnershipChanged?.unsubscribe();
this.ccGroupLeft?.unsubscribe();
this.ccMessageEdit?.unsubscribe();
this.ccMessageSent?.unsubscribe();
this.ccLiveReaction?.unsubscribe();
this.ccMessageDelete?.unsubscribe();
this.ccGroupMemberScopeChanged?.unsubscribe();
this.ccShowPanel?.unsubscribe();
this.ccMessageRead?.unsubscribe();
this.ccHidePanel?.unsubscribe();
this.ccCallEnded?.unsubscribe();
this.ccCallRejected?.unsubscribe();
this.ccOutgoingCall?.unsubscribe();
this.ccCallAccepted?.unsubscribe();
}
/**
* Returns the appropriate thread icon based on the sender of the message.
*
* @param {CometChat.BaseMessage} message - The message for which the thread icon is being determined.
* @returns {boolean} The icon for the thread. If the message was sent by the logged in user, returns 'threadRightArrow'. Otherwise, returns 'threadIndicatorIcon'.
*/
getThreadIconAlignment(message) {
let sentByMe = this.isSentByMe(message) &&
this.alignment === MessageListAlignment.standard;
return sentByMe ? false : true;
}
/**
* Configuration for the reaction list.
* This includes styles for the avatar, list items, and reaction history.
* @returns {ReactionListConfiguration} - The configured reaction list.
*/
getReactionListConfiguration() {
const avatarStyle = new AvatarStyle({
borderRadius: "50%",
width: "35px",
height: "35px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderWidth: "0",
outerViewBorderRadius: "0",
outerViewBorderColor: "",
outerViewBorderSpacing: "0",
});
const listItemStyle = new ListItemStyle({
activeBackground: this.themeService.theme.palette.getBackground(),
hoverBackground: this.themeService.theme.palette.getBackground(),
titleFont: fontHelper(this.themeService.theme.typography.subtitle1),
titleColor: this.themeService.theme.palette.getAccent(),
separatorColor: this.themeService.theme.palette.getAccent100(),
});
const reactionHistoryStyle = new ReactionListStyle({
width: "320px",
height: "300px",
borderRadius: "12px",
background: this.themeService.theme.palette.getBackground(),
border: "none",
errorIconTint: this.themeService.theme.palette.getAccent400(),
loadingIconTint: this.themeService.theme.palette.getAccent400(),
sliderEmojiCountFont: fontHelper(this.themeService.theme.typography.text2),
sliderEmojiFont: fontHelper(this.themeService.theme.typography.text1),
subtitleTextColor: this.themeService.theme.palette.getAccent500(),
subtitleTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
tailViewFont: fontHelper(this.themeService.theme.typography.title1),
dividerTint: this.themeService.theme.palette.getAccent100(),
sliderEmojiCountColor: this.themeService.theme.palette.getAccent500(),
activeEmojiBackground: this.themeService.theme.palette.getAccent100(),
});
return new ReactionListConfiguration({
avatarStyle: this.reactionsConfiguration?.reactionListConfiguration?.avatarStyle ||
avatarStyle,
errorIconURL: this.reactionsConfiguration?.reactionListConfiguration?.errorIconURL ||
"",
listItemStyle: this.reactionsConfiguration?.reactionListConfiguration?.listItemStyle ||
listItemStyle,
loadingIconURL: this.reactionsConfiguration?.reactionListConfiguration
?.loadingIconURL || "",
reactionListStyle: this.reactionsConfiguration?.reactionListConfiguration
?.reactionListStyle || reactionHistoryStyle,
reactionItemClicked: this.reactionsConfiguration?.reactionListConfiguration
?.reactionItemClicked || this.onReactionItemClicked,
reactionsRequestBuilder: this.reactionsConfiguration?.reactionListConfiguration
?.reactionsRequestBuilder || undefined,
});
}
/**
* Configuration for the reaction info.
* This includes styles for the reaction info display.
* @returns {ReactionInfoConfiguration} - The configured reaction info.
*/
getReactionInfoConfiguration() {
const config = this.reactionsConfiguration?.reactionInfoConfiguration || {};
const reactionInfoStyle = new ReactionInfoStyle({
background: config?.reactionInfoStyle?.background ||
this.themeService.theme.palette.getAccent(),
border: config?.reactionInfoStyle?.border || "none",
borderRadius: config?.reactionInfoStyle?.borderRadius || "12px",
errorIconTint: config?.reactionInfoStyle?.errorIconTint ||
this.themeService.theme.palette.getBackground(),
loadingIconTint: config?.reactionInfoStyle?.loadingIconTint ||
this.themeService.theme.palette.getBackground(),
namesColor: config?.reactionInfoStyle?.namesColor ||
this.themeService.theme.palette.getBackground(),
namesFont: config?.reactionInfoStyle?.namesFont ||
fontHelper(this.themeService.theme.typography.subtitle2),
reactedTextColor: config?.reactionInfoStyle?.reactedTextColor ||
this.themeService.theme.palette.getAccent700("dark"),
reactedTextFont: config?.reactionInfoStyle?.reactedTextFont ||
fontHelper(this.themeService.theme.typography.subtitle2),
reactionFontSize: config?.reactionInfoStyle?.reactionFontSize || "37px",
});
return new ReactionInfoConfiguration({
reactionInfoStyle: reactionInfoStyle,
reactionsRequestBuilder: config?.reactionsRequestBuilder || undefined,
errorIconURL: config?.errorIconURL || "",
loadingIconURL: config?.loadingIconURL || "",
});
}
/**
* Styling for reactions component
*
*/
getReactionsWrapperStyle(message) {
let alignment = this.setBubbleAlignment(message);
return {
width: "100%",
paddingTop: "5px",
boxSizing: "border-box",
display: "flex",
marginTop: "-9px",
justifyContent: alignment === MessageBubbleAlignment.left ? "flex-start" : "flex-end",
};
}
getThreadViewAlignment(message) {
return {
display: "flex",
justifyContent: this.isSentByMe(message) &&
this.alignment == MessageListAlignment.standard
? "flex-end"
: "flex-start",
};
}
}
CometChatMessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: { hideError: "hideError", hideDateSeparator: "hideDateSeparator", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", user: "user", group: "group", disableReceipt: "disableReceipt", hideReceipt: "hideReceipt", disableSoundForMessages: "disableSoundForMessages", customSoundForMessages: "customSoundForMessages", readIcon: "readIcon", deliveredIcon: "deliveredIcon", sentIcon: "sentIcon", waitIcon: "waitIcon", errorIcon: "errorIcon", aiErrorIcon: "aiErrorIcon", aiEmptyIcon: "aiEmptyIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", unreadMessageThreshold: "unreadMessageThreshold", reactionsConfiguration: "reactionsConfiguration", disableReactions: "disableReactions", emojiKeyboardStyle: "emojiKeyboardStyle", apiConfiguration: "apiConfiguration", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", threadIndicatorIcon: "threadIndicatorIcon", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError", messageInformationConfiguration: "messageInformationConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }, { propertyName: "textBubble", first: true, predicate: ["textBubble"], descendants: true }, { propertyName: "threadMessageBubble", first: true, predicate: ["threadMessageBubble"], descendants: true }, { propertyName: "fileBubble", first: true, predicate: ["fileBubble"], descendants: true }, { propertyName: "audioBubble", first: true, predicate: ["audioBubble"], descendants: true }, { propertyName: "videoBubble", first: true, predicate: ["videoBubble"], descendants: true }, { propertyName: "imageBubble", first: true, predicate: ["imageBubble"], descendants: true }, { propertyName: "formBubble", first: true, predicate: ["formBubble"], descendants: true }, { propertyName: "cardBubble", first: true, predicate: ["cardBubble"], descendants: true }, { propertyName: "stickerBubble", first: true, predicate: ["stickerBubble"], descendants: true }, { propertyName: "documentBubble", first: true, predicate: ["documentBubble"], descendants: true }, { propertyName: "whiteboardBubble", first: true, predicate: ["whiteboardBubble"], descendants: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true }, { propertyName: "directCalling", first: true, predicate: ["directCalling"], descendants: true }, { propertyName: "schedulerBubble", first: true, predicate: ["schedulerBubble"], descendants: true }, { propertyName: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }, { propertyName: "messageBubbleRef", predicate: ["messageBubbleRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n *ngIf=\"!openContactsView\">\n\n <div class=\"cc-message-list__header-view\">\n <div *ngIf=\"headerView\">\n <ng-container *ngTemplateOutlet=\"headerView\">\n </ng-container>\n </div>\n </div>\n <div class=\"cc-message-list\" #listScroll\n [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n <div class=\"cc-message-list__top\" #top>\n </div>\n <div class=\"cc-message-list__decorator-message\"\n *ngIf=\"state == states.loading || state == states.error || state == states.empty \"\n [ngStyle]=\"messageContainerStyle()\">\n <div class=\"cc-message-list__loading-view\"\n *ngIf=\"state == states.loading \">\n <cometchat-loader [iconURL]=\"loadingIconURL\"\n [loaderStyle]=\"loadingStyle\">\n </cometchat-loader>\n <span class=\"cc-message-list__customview--loading\"\n *ngIf=\"state == states.loading && loadingStateView\">\n <ng-container *ngTemplateOutlet=\"loadingStateView\">\n </ng-container>\n </span>\n </div>\n <div class=\"cc-message-list__error-view\"\n *ngIf=\"state == states.error && !hideError \">\n <cometchat-label [labelStyle]=\"errorStyle()\"\n *ngIf=\"state == states.error && !errorStateView\"\n [text]=\"errorStateText\">\n </cometchat-label>\n <span class=\"cc-message-list__custom-view--error\"\n *ngIf=\"state == states.error && errorStateView\">\n <ng-container *ngTemplateOutlet=\"errorStateView\">\n </ng-container>\n </span>\n </div>\n <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n <span class=\"cc-message-list__custom-view--empty\"\n *ngIf=\"state == states.empty && emptyStateView\">\n <ng-container *ngTemplateOutlet=\"emptyStateView\">\n </ng-container>\n </span>\n </div>\n </div>\n <div class=\"cc-message-list__bubble\"\n *ngFor=\"let message of messagesList; let i = index\">\n <div class=\"cc-message-list__date-container\"\n *ngIf=\"(i === 0) && message?.getSentAt() && !hideDateSeparator\">\n <span class=\"cc-message-list__date\">\n <cometchat-date [timestamp]=\"message!.getSentAt()\"\n [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n </cometchat-date>\n </span>\n </div>\n <div class=\"cc-message-list__date-container\"\n *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt() && !hideDateSeparator\">\n <span class=\"cc-message-list__date\">\n <cometchat-date [timestamp]=\"message?.getSentAt()\"\n [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n </cometchat-date>\n </span>\n </div>\n <div *ngIf=\"getBubbleWrapper(message)\">\n <ng-container\n *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n [id]=\"message?.getId()\">\n <cometchat-message-bubble\n [leadingView]=\" showAvatar ? leadingView : null\"\n [bottomView]=\"getBottomView(message)\"\n [statusInfoView]=\"showStatusInfo(message) ? statusInfoView : null\"\n [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n [footerView]=\"getFooterView(message) || reactionView\"\n [contentView]=\"contentView\" [threadView]=\"threadView\"\n [id]=\"message?.getId() || message?.getMuid()\"\n [options]=\"setMessageOptions(message)\"\n [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n [alignment]=\"setBubbleAlignment(message)\">\n <ng-template #contentView>\n <ng-container\n *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n </ng-container>\n </ng-template>\n <ng-template #reactionView>\n <cometchat-reactions\n *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n [messageObject]=\"getClonedReactionObject(message)\"\n [alignment]=\"setBubbleAlignment(message)\"\n [reactionsStyle]=\"getReactionsStyle()\"\n [reactionClick]=\"addReactionOnClick\"\n [reactionListConfiguration]=\"getReactionListConfiguration()\"\n [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n </ng-template>\n <ng-template #statusInfoView>\n <div class=\"cc-message-list__bubble-status-info\"\n [ngStyle]=\"getStatusInfoStyle(message)\">\n <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n <ng-container\n *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #bubbleFooter>\n <div class=\"cc-message-list__bubble-date\"\n *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n <cometchat-date [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\"\n [pattern]=\"datePattern\">\n </cometchat-date>\n </div>\n <div\n *ngIf=\"shouldShowMessage(message, disableReceipt, hideReceipt)\"\n class=\"cc-message-list__receipt\">\n <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n [receiptStyle]=\"getReceiptStyle(message)\"\n [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n [errorIcon]=\"errorIcon\"></cometchat-receipt>\n </div>\n </ng-template>\n </div>\n </ng-template>\n <ng-template #leadingView>\n <div\n *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n [avatarStyle]=\"avatarStyle\"\n [image]=\"message?.getSender()?.getAvatar()\">\n </cometchat-avatar>\n </div>\n </ng-template>\n <ng-template #bubbleHeader>\n <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n <ng-container\n *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #defaultHeader>\n <div class=\"cc-message-list__bubble-header\"\n *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n <cometchat-label [text]=\"message?.getSender()?.getName()\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n <cometchat-date [pattern]=\"datePattern\"\n [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\"\n *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n </div>\n </ng-template>\n </ng-template>\n <ng-template #threadView>\n <div class=\"cc-message-list__threadreplies\"\n *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n [ngStyle]=\"getThreadViewAlignment(message)\">\n <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n [mirrorIcon]=\"getThreadIconAlignment(message)\"\n [buttonStyle]=\"getThreadViewStyle(message)\"\n (cc-button-clicked)=\"openThreadView(message)\"\n [text]='getThreadCount(message)'>\n <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n class=\"cc-message-list__unread-thread\"\n *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n {{message.getUnreadReplyCount()}}\n </span> -->\n\n </cometchat-icon-button>\n </div>\n </ng-template>\n </cometchat-message-bubble>\n </div>\n </div>\n <div class=\"cc-message-list__bottom\" #bottom>\n </div>\n\n </div>\n <div class=\"cc-message-list__message-indicator\"\n *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary ? '20%' : '13%'}\">\n <cometchat-button [text]=\"newMessageCount\"\n [buttonStyle]=\"unreadMessagesStyle\"\n (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n </div>\n <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: 'auto'}\">\n\n <div *ngIf=\"footerView;else footer\">\n <ng-container *ngTemplateOutlet=\"footerView\">\n </ng-container>\n </div>\n <ng-template #footer>\n\n <div class=\"cc-message-list__smart-replies\"\n *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n (cc-close-clicked)=\"closeSmartReply()\">\n </smart-replies>\n </div>\n\n\n <div class=\"cc-message-list__conversation-starters\"\n *ngIf=\"enableConversationStarter && showConversationStarter\">\n <cometchat-ai-card [state]=\"conversationStarterState\"\n [loadingStateText]=\"starterLoadingStateText\"\n [emptyStateText]=\"starterEmptyStateText\"\n [errorStateText]=\"errorStateText\">\n <smart-replies\n *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n [smartReplyStyle]=\"conversationStarterStyle\"\n [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n (cc-reply-clicked)=\"sendConversationStarter($event)\"\n [closeIconURL]=\"''\">\n </smart-replies>\n </cometchat-ai-card>\n </div>\n\n <div class=\"cc-message-list__conversation-summary\"\n *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n <cometchat-ai-card [state]=\"conversationSummaryState\"\n [loadingStateText]=\"summaryLoadingStateText\"\n [emptyStateText]=\"summaryEmptyStateText\"\n [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n [emptyIconURL]=\"aiEmptyIcon\">\n <cometchat-panel\n *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n title=\"Conversation Summary\" [text]=\"conversationSummary\"\n (cc-close-clicked)=\"closeConversationSummary()\">\n </cometchat-panel>\n </cometchat-ai-card>\n\n </div>\n\n </ng-template>\n </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n <cometchat-text-bubble\n *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n [textStyle]=\"setTextBubbleStyle(message)\"\n [text]=\"message?.message\"></cometchat-text-bubble>\n <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n [textStyle]=\"setTextBubbleStyle(message)\"\n [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n <cometchat-text-bubble\n *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n (cc-link-clicked)=\"openLinkURL($event)\"\n *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n [title]=\"getLinkPreviewDetails('title',message)\"\n [description]=\"getLinkPreviewDetails('description',message)\"\n [URL]=\"getLinkPreviewDetails('url',message)\"\n [image]=\"getLinkPreviewDetails('image',message)\"\n [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n <cometchat-text-bubble\n *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n </link-preview>\n <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n *ngIf=\"isTranslated(message)\"\n [messageTranslationStyle]=\"setTranslationStyle(message)\"\n [translatedText]=\"isTranslated(message)\"\n [textFormatters]=\"getTextFormatters(message)\">\n <cometchat-text-bubble\n *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n <cometchat-icon-button [disabled]=\"true\"\n *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n [iconURL]=\"getCallTypeIcon(message)\"\n [buttonStyle]=\"callStatusStyle(message)\"\n [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n <cometchat-audio-bubble\n *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n <cometchat-icon-button [disabled]=\"true\"\n *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n [iconURL]=\"getCallTypeIcon(message)\"\n [buttonStyle]=\"callStatusStyle(message)\"\n [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n <cometchat-video-bubble\n *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n [videoStyle]=\"videoBubbleStyle\"\n [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n [imageModerationStyle]=\"imageModerationStyle\">\n <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n (cc-image-clicked)=\"openImageInFullScreen(message)\"\n *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n [src]=\" getImageThumbnail(message)\"\n [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n <cometchat-form-bubble [message]=\"message\"\n [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n <cometchat-card-bubble [message]=\"message\"\n [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n <cometchat-image-bubble [src]=\"getSticker(message)\"\n [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n <cometchat-document-bubble [hideSeparator]=\"false\"\n [iconAlignment]=\"documentBubbleAlignment\"\n [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n [buttonText]=\"whiteboardButtonText\"\n [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n <cometchat-document-bubble [hideSeparator]=\"false\"\n [iconAlignment]=\"documentBubbleAlignment\"\n [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n [buttonText]=\"documentButtonText\"\n [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n <cometchat-document-bubble [hideSeparator]=\"true\"\n [iconAlignment]=\"callBubbleAlignment\"\n [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n [loggedInUser]=\"loggedInUser\"\n [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n [pollQuestion]=\"getPollBubbleData(message,'question')\"\n [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n [senderUid]=\"getPollBubbleData(message)\"\n [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n <div *ngIf=\"getBubbleWrapper(message)\">\n <ng-container\n *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n [bottomView]=\"getBottomView(message)\"\n [statusInfoView]=\"showStatusInfo(message) ? statusInfoView : null\"\n [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n [id]=\"message?.getId() || message?.getMuid()\"\n [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n [alignment]=\"threadedAlignment\">\n <ng-template #contentView>\n <ng-container\n *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n </ng-container>\n </ng-template>\n <ng-template #statusInfoView>\n <div class=\"cc-message-list__bubble-status-info\"\n [ngStyle]=\"getStatusInfoStyle(message)\">\n <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n <ng-container\n *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #bubbleFooter>\n <div class=\"cc-message-list__bubble-date\"\n *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n <cometchat-date [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n </cometchat-date>\n </div>\n <div\n *ngIf=\"shouldShowMessage(message, disableReceipt, hideReceipt)\"\n class=\"cc-message-list__receipt\">\n <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n [readIcon]=\"deliveredIcon\"\n [errorIcon]=\"errorIcon\"></cometchat-receipt>\n </div>\n </ng-template>\n </div>\n </ng-template>\n <ng-template #leadingView>\n <div\n *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n [avatarStyle]=\"avatarStyle\"\n [image]=\"message?.getSender()?.getAvatar()\">\n </cometchat-avatar>\n </div>\n </ng-template>\n <ng-template #bubbleHeader>\n <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n <ng-container\n *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #defaultHeader>\n <div class=\"cc-message-list__bubble-header\"\n *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n <cometchat-label [text]=\"message?.getSender()?.getName()\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n <cometchat-date [pattern]=\"datePattern\"\n [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\"\n *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n </div>\n </ng-template>\n </ng-template>\n </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!-- -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n [placement]=\"keyboardAlignment\">\n <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n slot=\"content\"\n [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"confirmDialogStyle\">\n\n </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n <div *ngIf=\"getBubbleWrapper(message)\">\n <ng-container\n *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n [bottomView]=\"getBottomView(message)\"\n [statusInfoView]=\"getStatusInfoView(message)\"\n [footerView]=\"getFooterView(message)\"\n [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n [alignment]=\"messageInfoAlignment\">\n <ng-template #contentView>\n <ng-container\n *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n </ng-container>\n </ng-template>\n <ng-template #leadingView>\n <div\n *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n [avatarStyle]=\"avatarStyle\"\n [image]=\"message?.getSender()?.getAvatar()\">\n </cometchat-avatar>\n </div>\n </ng-template>\n <ng-template #bubbleHeader>\n <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n <ng-container\n *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #defaultHeader>\n <div class=\"cc-message-list__bubble-header\"\n *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n <cometchat-label [text]=\"message?.getSender()?.getName()\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n <cometchat-date [pattern]=\"datePattern\"\n [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\"\n *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n </div>\n </ng-template>\n </ng-template>\n </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n <cometchat-message-information\n [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n [readIcon]=\"messageInformationConfiguration.readIcon\"\n [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n [onError]=\"messageInformationConfiguration.onError\"\n [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n [listItemView]=\"messageInformationConfiguration.listItemView \"\n [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n [onClose]=\"messageInformationConfiguration.onClose ?? closeMessageInfoPage\"\n [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n [message]=\"messageInfoObject\">\n\n </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}cometchat-document-bubble{width:100%;overflow:hidden}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "statusInfoView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n *ngIf=\"!openContactsView\">\n\n <div class=\"cc-message-list__header-view\">\n <div *ngIf=\"headerView\">\n <ng-container *ngTemplateOutlet=\"headerView\">\n </ng-container>\n </div>\n </div>\n <div class=\"cc-message-list\" #listScroll\n [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n <div class=\"cc-message-list__top\" #top>\n </div>\n <div class=\"cc-message-list__decorator-message\"\n *ngIf=\"state == states.loading || state == states.error || state == states.empty \"\n [ngStyle]=\"messageContainerStyle()\">\n <div class=\"cc-message-list__loading-view\"\n *ngIf=\"state == states.loading \">\n <cometchat-loader [iconURL]=\"loadingIconURL\"\n [loaderStyle]=\"loadingStyle\">\n </cometchat-loader>\n <span class=\"cc-message-list__customview--loading\"\n *ngIf=\"state == states.loading && loadingStateView\">\n <ng-container *ngTemplateOutlet=\"loadingStateView\">\n </ng-container>\n </span>\n </div>\n <div class=\"cc-message-list__error-view\"\n *ngIf=\"state == states.error && !hideError \">\n <cometchat-label [labelStyle]=\"errorStyle()\"\n *ngIf=\"state == states.error && !errorStateView\"\n [text]=\"errorStateText\">\n </cometchat-label>\n <span class=\"cc-message-list__custom-view--error\"\n *ngIf=\"state == states.error && errorStateView\">\n <ng-container *ngTemplateOutlet=\"errorStateView\">\n </ng-container>\n </span>\n </div>\n <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n <span class=\"cc-message-list__custom-view--empty\"\n *ngIf=\"state == states.empty && emptyStateView\">\n <ng-container *ngTemplateOutlet=\"emptyStateView\">\n </ng-container>\n </span>\n </div>\n </div>\n <div class=\"cc-message-list__bubble\"\n *ngFor=\"let message of messagesList; let i = index\">\n <div class=\"cc-message-list__date-container\"\n *ngIf=\"(i === 0) && message?.getSentAt() && !hideDateSeparator\">\n <span class=\"cc-message-list__date\">\n <cometchat-date [timestamp]=\"message!.getSentAt()\"\n [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n </cometchat-date>\n </span>\n </div>\n <div class=\"cc-message-list__date-container\"\n *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt() && !hideDateSeparator\">\n <span class=\"cc-message-list__date\">\n <cometchat-date [timestamp]=\"message?.getSentAt()\"\n [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n </cometchat-date>\n </span>\n </div>\n <div *ngIf=\"getBubbleWrapper(message)\">\n <ng-container\n *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n [id]=\"message?.getId()\">\n <cometchat-message-bubble\n [leadingView]=\" showAvatar ? leadingView : null\"\n [bottomView]=\"getBottomView(message)\"\n [statusInfoView]=\"showStatusInfo(message) ? statusInfoView : null\"\n [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n [footerView]=\"getFooterView(message) || reactionView\"\n [contentView]=\"contentView\" [threadView]=\"threadView\"\n [id]=\"message?.getId() || message?.getMuid()\"\n [options]=\"setMessageOptions(message)\"\n [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n [alignment]=\"setBubbleAlignment(message)\">\n <ng-template #contentView>\n <ng-container\n *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n </ng-container>\n </ng-template>\n <ng-template #reactionView>\n <cometchat-reactions\n *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n [messageObject]=\"getClonedReactionObject(message)\"\n [alignment]=\"setBubbleAlignment(message)\"\n [reactionsStyle]=\"getReactionsStyle()\"\n [reactionClick]=\"addReactionOnClick\"\n [reactionListConfiguration]=\"getReactionListConfiguration()\"\n [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n </ng-template>\n <ng-template #statusInfoView>\n <div class=\"cc-message-list__bubble-status-info\"\n [ngStyle]=\"getStatusInfoStyle(message)\">\n <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n <ng-container\n *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #bubbleFooter>\n <div class=\"cc-message-list__bubble-date\"\n *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n <cometchat-date [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\"\n [pattern]=\"datePattern\">\n </cometchat-date>\n </div>\n <div\n *ngIf=\"shouldShowMessage(message, disableReceipt, hideReceipt)\"\n class=\"cc-message-list__receipt\">\n <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n [receiptStyle]=\"getReceiptStyle(message)\"\n [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n [errorIcon]=\"errorIcon\"></cometchat-receipt>\n </div>\n </ng-template>\n </div>\n </ng-template>\n <ng-template #leadingView>\n <div\n *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n [avatarStyle]=\"avatarStyle\"\n [image]=\"message?.getSender()?.getAvatar()\">\n </cometchat-avatar>\n </div>\n </ng-template>\n <ng-template #bubbleHeader>\n <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n <ng-container\n *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #defaultHeader>\n <div class=\"cc-message-list__bubble-header\"\n *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n <cometchat-label [text]=\"message?.getSender()?.getName()\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n <cometchat-date [pattern]=\"datePattern\"\n [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\"\n *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n </div>\n </ng-template>\n </ng-template>\n <ng-template #threadView>\n <div class=\"cc-message-list__threadreplies\"\n *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n [ngStyle]=\"getThreadViewAlignment(message)\">\n <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n [mirrorIcon]=\"getThreadIconAlignment(message)\"\n [buttonStyle]=\"getThreadViewStyle(message)\"\n (cc-button-clicked)=\"openThreadView(message)\"\n [text]='getThreadCount(message)'>\n <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n class=\"cc-message-list__unread-thread\"\n *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n {{message.getUnreadReplyCount()}}\n </span> -->\n\n </cometchat-icon-button>\n </div>\n </ng-template>\n </cometchat-message-bubble>\n </div>\n </div>\n <div class=\"cc-message-list__bottom\" #bottom>\n </div>\n\n </div>\n <div class=\"cc-message-list__message-indicator\"\n *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary ? '20%' : '13%'}\">\n <cometchat-button [text]=\"newMessageCount\"\n [buttonStyle]=\"unreadMessagesStyle\"\n (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n </div>\n <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: 'auto'}\">\n\n <div *ngIf=\"footerView;else footer\">\n <ng-container *ngTemplateOutlet=\"footerView\">\n </ng-container>\n </div>\n <ng-template #footer>\n\n <div class=\"cc-message-list__smart-replies\"\n *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n (cc-close-clicked)=\"closeSmartReply()\">\n </smart-replies>\n </div>\n\n\n <div class=\"cc-message-list__conversation-starters\"\n *ngIf=\"enableConversationStarter && showConversationStarter\">\n <cometchat-ai-card [state]=\"conversationStarterState\"\n [loadingStateText]=\"starterLoadingStateText\"\n [emptyStateText]=\"starterEmptyStateText\"\n [errorStateText]=\"errorStateText\">\n <smart-replies\n *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n [smartReplyStyle]=\"conversationStarterStyle\"\n [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n (cc-reply-clicked)=\"sendConversationStarter($event)\"\n [closeIconURL]=\"''\">\n </smart-replies>\n </cometchat-ai-card>\n </div>\n\n <div class=\"cc-message-list__conversation-summary\"\n *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n <cometchat-ai-card [state]=\"conversationSummaryState\"\n [loadingStateText]=\"summaryLoadingStateText\"\n [emptyStateText]=\"summaryEmptyStateText\"\n [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n [emptyIconURL]=\"aiEmptyIcon\">\n <cometchat-panel\n *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n title=\"Conversation Summary\" [text]=\"conversationSummary\"\n (cc-close-clicked)=\"closeConversationSummary()\">\n </cometchat-panel>\n </cometchat-ai-card>\n\n </div>\n\n </ng-template>\n </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n <cometchat-text-bubble\n *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n [textStyle]=\"setTextBubbleStyle(message)\"\n [text]=\"message?.message\"></cometchat-text-bubble>\n <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n [textStyle]=\"setTextBubbleStyle(message)\"\n [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n <cometchat-text-bubble\n *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n (cc-link-clicked)=\"openLinkURL($event)\"\n *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n [title]=\"getLinkPreviewDetails('title',message)\"\n [description]=\"getLinkPreviewDetails('description',message)\"\n [URL]=\"getLinkPreviewDetails('url',message)\"\n [image]=\"getLinkPreviewDetails('image',message)\"\n [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n <cometchat-text-bubble\n *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n </link-preview>\n <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n *ngIf=\"isTranslated(message)\"\n [messageTranslationStyle]=\"setTranslationStyle(message)\"\n [translatedText]=\"isTranslated(message)\"\n [textFormatters]=\"getTextFormatters(message)\">\n <cometchat-text-bubble\n *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n <cometchat-icon-button [disabled]=\"true\"\n *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n [iconURL]=\"getCallTypeIcon(message)\"\n [buttonStyle]=\"callStatusStyle(message)\"\n [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n <cometchat-audio-bubble\n *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n <cometchat-icon-button [disabled]=\"true\"\n *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n [iconURL]=\"getCallTypeIcon(message)\"\n [buttonStyle]=\"callStatusStyle(message)\"\n [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n <cometchat-video-bubble\n *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n [videoStyle]=\"videoBubbleStyle\"\n [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n [imageModerationStyle]=\"imageModerationStyle\">\n <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n (cc-image-clicked)=\"openImageInFullScreen(message)\"\n *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n [src]=\" getImageThumbnail(message)\"\n [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n <cometchat-form-bubble [message]=\"message\"\n [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n <cometchat-card-bubble [message]=\"message\"\n [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n <cometchat-image-bubble [src]=\"getSticker(message)\"\n [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n <cometchat-document-bubble [hideSeparator]=\"false\"\n [iconAlignment]=\"documentBubbleAlignment\"\n [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n [buttonText]=\"whiteboardButtonText\"\n [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n <cometchat-document-bubble [hideSeparator]=\"false\"\n [iconAlignment]=\"documentBubbleAlignment\"\n [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n [buttonText]=\"documentButtonText\"\n [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n <cometchat-document-bubble [hideSeparator]=\"true\"\n [iconAlignment]=\"callBubbleAlignment\"\n [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n [loggedInUser]=\"loggedInUser\"\n [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n [pollQuestion]=\"getPollBubbleData(message,'question')\"\n [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n [senderUid]=\"getPollBubbleData(message)\"\n [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n <div *ngIf=\"getBubbleWrapper(message)\">\n <ng-container\n *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n [bottomView]=\"getBottomView(message)\"\n [statusInfoView]=\"showStatusInfo(message) ? statusInfoView : null\"\n [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n [id]=\"message?.getId() || message?.getMuid()\"\n [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n [alignment]=\"threadedAlignment\">\n <ng-template #contentView>\n <ng-container\n *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n </ng-container>\n </ng-template>\n <ng-template #statusInfoView>\n <div class=\"cc-message-list__bubble-status-info\"\n [ngStyle]=\"getStatusInfoStyle(message)\">\n <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n <ng-container\n *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #bubbleFooter>\n <div class=\"cc-message-list__bubble-date\"\n *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n <cometchat-date [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n </cometchat-date>\n </div>\n <div\n *ngIf=\"shouldShowMessage(message, disableReceipt, hideReceipt)\"\n class=\"cc-message-list__receipt\">\n <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n [readIcon]=\"deliveredIcon\"\n [errorIcon]=\"errorIcon\"></cometchat-receipt>\n </div>\n </ng-template>\n </div>\n </ng-template>\n <ng-template #leadingView>\n <div\n *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n [avatarStyle]=\"avatarStyle\"\n [image]=\"message?.getSender()?.getAvatar()\">\n </cometchat-avatar>\n </div>\n </ng-template>\n <ng-template #bubbleHeader>\n <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n <ng-container\n *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #defaultHeader>\n <div class=\"cc-message-list__bubble-header\"\n *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n <cometchat-label [text]=\"message?.getSender()?.getName()\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n <cometchat-date [pattern]=\"datePattern\"\n [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\"\n *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n </div>\n </ng-template>\n </ng-template>\n </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!-- -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n [placement]=\"keyboardAlignment\">\n <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n slot=\"content\"\n [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"confirmDialogStyle\">\n\n </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n <div *ngIf=\"getBubbleWrapper(message)\">\n <ng-container\n *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n [bottomView]=\"getBottomView(message)\"\n [statusInfoView]=\"getStatusInfoView(message)\"\n [footerView]=\"getFooterView(message)\"\n [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n [alignment]=\"messageInfoAlignment\">\n <ng-template #contentView>\n <ng-container\n *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n </ng-container>\n </ng-template>\n <ng-template #leadingView>\n <div\n *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n [avatarStyle]=\"avatarStyle\"\n [image]=\"message?.getSender()?.getAvatar()\">\n </cometchat-avatar>\n </div>\n </ng-template>\n <ng-template #bubbleHeader>\n <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n <ng-container\n *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n </ng-container>\n </div>\n <ng-template #defaultHeader>\n <div class=\"cc-message-list__bubble-header\"\n *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n <cometchat-label [text]=\"message?.getSender()?.getName()\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n <cometchat-date [pattern]=\"datePattern\"\n [timestamp]=\"message?.getSentAt()\"\n [dateStyle]=\"getBubbleDateStyle(message)\"\n *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n </div>\n </ng-template>\n </ng-template>\n </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n <cometchat-message-information\n [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n [readIcon]=\"messageInformationConfiguration.readIcon\"\n [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n [onError]=\"messageInformationConfiguration.onError\"\n [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n [listItemView]=\"messageInformationConfiguration.listItemView \"\n [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n [onClose]=\"messageInformationConfiguration.onClose ?? closeMessageInfoPage\"\n [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n [message]=\"messageInfoObject\">\n\n </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}cometchat-document-bubble{width:100%;overflow:hidden}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"] }]
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { listScroll: [{
type: ViewChild,
args: ["listScroll", { static: false }]
}], bottom: [{
type: ViewChild,
args: ["bottom", { static: false }]
}], top: [{
type: ViewChild,
args: ["top", { static: false }]
}], textBubble: [{
type: ViewChild,
args: ["textBubble", { static: false }]
}], threadMessageBubble: [{
type: ViewChild,
args: ["threadMessageBubble", { static: false }]
}], fileBubble: [{
type: ViewChild,
args: ["fileBubble", { static: false }]
}], audioBubble: [{
type: ViewChild,
args: ["audioBubble", { static: false }]
}], videoBubble: [{
type: ViewChild,
args: ["videoBubble", { static: false }]
}], imageBubble: [{
type: ViewChild,
args: ["imageBubble", { static: false }]
}], formBubble: [{
type: ViewChild,
args: ["formBubble", { static: false }]
}], cardBubble: [{
type: ViewChild,
args: ["cardBubble", { static: false }]
}], stickerBubble: [{
type: ViewChild,
args: ["stickerBubble", { static: false }]
}], documentBubble: [{
type: ViewChild,
args: ["documentBubble", { static: false }]
}], whiteboardBubble: [{
type: ViewChild,
args: ["whiteboardBubble", { static: false }]
}], popoverRef: [{
type: ViewChild,
args: ["popoverRef", { static: false }]
}], directCalling: [{
type: ViewChild,
args: ["directCalling", { static: false }]
}], schedulerBubble: [{
type: ViewChild,
args: ["schedulerBubble", { static: false }]
}], pollBubble: [{
type: ViewChild,
args: ["pollBubble", { static: false }]
}], messageBubbleRef: [{
type: ViewChildren,
args: ["messageBubbleRef"]
}], hideError: [{
type: Input
}], hideDateSeparator: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateView: [{
type: Input
}], errorStateText: [{
type: Input
}], emptyStateText: [{
type: Input
}], loadingIconURL: [{
type: Input
}], user: [{
type: Input
}], group: [{
type: Input
}], disableReceipt: [{
type: Input
}], hideReceipt: [{
type: Input
}], disableSoundForMessages: [{
type: Input
}], customSoundForMessages: [{
type: Input
}], readIcon: [{
type: Input
}], deliveredIcon: [{
type: Input
}], sentIcon: [{
type: Input
}], waitIcon: [{
type: Input
}], errorIcon: [{
type: Input
}], aiErrorIcon: [{
type: Input
}], aiEmptyIcon: [{
type: Input
}], alignment: [{
type: Input
}], showAvatar: [{
type: Input
}], datePattern: [{
type: Input
}], timestampAlignment: [{
type: Input
}], DateSeparatorPattern: [{
type: Input
}], templates: [{
type: Input
}], messagesRequestBuilder: [{
type: Input
}], newMessageIndicatorText: [{
type: Input
}], scrollToBottomOnNewMessages: [{
type: Input
}], thresholdValue: [{
type: Input
}], unreadMessageThreshold: [{
type: Input
}], reactionsConfiguration: [{
type: Input
}], disableReactions: [{
type: Input
}], emojiKeyboardStyle: [{
type: Input
}], apiConfiguration: [{
type: Input
}], onThreadRepliesClick: [{
type: Input
}], headerView: [{
type: Input
}], footerView: [{
type: Input
}], parentMessageId: [{
type: Input
}], threadIndicatorIcon: [{
type: Input
}], avatarStyle: [{
type: Input
}], backdropStyle: [{
type: Input
}], dateSeparatorStyle: [{
type: Input
}], messageListStyle: [{
type: Input
}], onError: [{
type: Input
}], messageInformationConfiguration: [{
type: Input
}], disableMentions: [{
type: Input
}], textFormatters: [{
type: Input
}] } });
/**
*
* CometChatGroupMembersComponent is used to render list of group members
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatGroupMembersComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.disableUsersPresence = false;
this.backButtonIconURL = "assets/backbutton.svg";
this.closeButtonIconURL = "assets/close2x.svg";
this.showBackButton = true;
this.hideSeparator = false;
this.selectionMode = SelectionMode.none;
this.searchPlaceholder = "Search Members";
this.searchIconURL = "assets/search.svg";
this.hideSearch = true;
this.title = localize("MEMBERS");
this.onError = (error) => {
console.log(error);
};
this.backdropStyle = {
height: "100%",
width: "100%",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed",
};
this.loadingIconURL = "assets/Spinner.svg";
this.emptyStateText = localize("NO_USERS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.titleAlignment = TitleAlignment.center;
this.dropdownIconURL = "assets/down-arrow.svg";
this.statusIndicatorStyle = {
height: "10px",
width: "10px",
borderRadius: "16px",
border: "",
};
this.avatarStyle = {
borderRadius: "16px",
width: "32px",
height: "32px",
};
this.groupMembersStyle = {
width: "100%",
height: "100%",
border: "",
borderRadius: "",
};
this.groupScopeStyle = new ChangeScopeStyle({
height: "200px",
width: "280px",
closeIconTint: "",
buttonBackground: "",
});
this.listItemStyle = {
height: "100%",
width: "100%",
background: "",
activeBackground: "transparent",
borderRadius: "grey",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "",
hoverBackground: "transparent",
separatorColor: "rgba(222 222 222 / 46%)",
};
this.userPresencePlacement = UserPresencePlacement.bottom;
this.disableLoadingState = false;
this.listStyle = {};
this.menuListStyle = {
width: "",
height: "",
border: "none",
borderRadius: "8px",
background: "white",
submenuWidth: "100%",
submenuHeight: "100%",
submenuBorder: "1px solid #e8e8e8",
submenuBorderRadius: "8px",
submenuBackground: "white",
moreIconTint: "rgb(51, 153, 255)",
};
this.modalStyle = {
height: "212px",
width: "360px",
background: "white",
borderRadius: "12px",
border: "none",
};
this.limit = 30;
this.moreIconURL = "assets/moreicon.svg";
this.searchKeyword = "";
this.onScrolledToBottom = null;
this.isString = (data) => typeof data == "string";
this.isArray = (data) => typeof data == "object" && data?.length > 0;
this.getOptions = (member) => {
let options = GroupMemberUtils.getViewMemberOptions(member, this.group, this.loggedInUser?.getUid(), this.themeService.theme);
return options;
};
this.titleAlignmentEnum = TitleAlignment;
this.selectionmodeEnum = SelectionMode;
this.state = States.loading;
this.groupMembers = [];
this.scopes = [];
this.membersListenerId = "memberlist_" + new Date().getTime();
this.changeScope = false;
this.fetchingGroups = false;
this.previousSearchKeyword = "";
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: "#2196F3",
uncheckedBackgroundColor: "#ccc"
};
this.memberScope = [];
this.membersList = [];
this.onClick = (groupMember) => {
if (this.onItemClick) {
this.onItemClick(groupMember);
}
};
this.searchKeyWordUpdated = () => {
if (this.fetchingGroups) {
clearTimeout(this.fetchTimeOut);
this.fetchTimeOut = setTimeout(() => {
this.searchForGroupMembers();
}, 800);
}
else {
this.searchForGroupMembers();
}
};
this.searchForGroupMembers = () => {
const request = this.searchRequestBuilder
? this.searchRequestBuilder.setSearchKeyword(this.searchKeyword).build()
: this.getRequestBuilder();
this.groupsRequest = request;
if (!this.disableLoadingState) {
this.groupMembers = [];
}
this.fetchNextGroupMembers();
};
/**
* @param {CometChat.GroupMember} member
*/
this.getStatusIndicatorColor = (member) => {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(member) || this.disableUsersPresence;
if (!userStatusVisibility) {
return this.groupMembersStyle.onlineStatusColor ?? this.themeService.theme.palette.getSuccess();
}
return null;
};
/**
* @param {CometChat.GroupMember} member
*/
this.getStatusIndicatorStyle = (member) => {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(member) || this.disableUsersPresence;
if (!userStatusVisibility) {
return (this.statusIndicatorStyle);
}
return null;
};
this.handleMenuAction = (menu, groupMember) => {
if (menu?.detail?.data?.onClick) {
menu?.detail?.data?.onClick(groupMember);
return;
}
let id = menu?.detail?.data?.id;
this.selectedMember = groupMember;
this.memberScope = GroupMemberUtils.allowScopeChange(this.group, groupMember);
if (id == CometChatUIKitConstants.GroupMemberOptions.changeScope) {
this.changeScope = true;
this.scopes = [];
}
else if (id == CometChatUIKitConstants.GroupMemberOptions.ban) {
this.changeScope = false;
this.blockMember(groupMember);
}
else if (id == CometChatUIKitConstants.GroupMemberOptions.kick) {
this.kickMember(groupMember);
}
};
this.blockMember = (member) => {
CometChat.banGroupMember(this.group.getGuid(), member.getUid()).then(() => {
this.group.setMembersCount(this.group.getMembersCount() - 1);
this.addRemoveMember(member);
CometChatGroupEvents.ccGroupMemberBanned.next({
kickedBy: this.loggedInUser,
kickedFrom: this.group,
kickedUser: member,
message: this.createActionMessage(member, CometChatUIKitConstants.groupMemberAction.BANNED),
});
});
};
this.kickMember = (member) => {
CometChat.kickGroupMember(this.group.getGuid(), member.getUid())
.then(() => {
this.group.setMembersCount(this.group.getMembersCount() - 1);
this.addRemoveMember(member);
CometChatGroupEvents.ccGroupMemberKicked.next({
kickedBy: this.loggedInUser,
kickedFrom: this.group,
kickedUser: member,
message: this.createActionMessage(member, CometChatUIKitConstants.groupMemberAction.KICKED),
});
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
};
/**
* @param {CometChat.User} member
*/
this.updateMemberStatus = (member) => {
let memberlist = [...this.groupMembers];
//search for user
let userKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
//if found in the list, update user object
if (userKey > -1) {
let user = memberlist[userKey];
user.setStatus(member.getStatus());
memberlist.splice(userKey, 1, user);
this.groupMembers = [...memberlist];
this.ref.detectChanges();
}
};
this.updateMember = (member) => {
let memberlist = [...this.groupMembers];
//search for user
let userKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
//if found in the list, update user object
if (userKey > -1) {
let user = memberlist[userKey];
memberlist.splice(userKey, 1, user);
this.groupMembers = [...memberlist];
this.ref.detectChanges();
}
};
this.addRemoveMember = (member) => {
let memberlist = [...this.groupMembers];
//search for user
let memberKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
//if found in the list, update user object
if (memberKey > -1) {
memberlist.splice(memberKey, 1);
this.groupMembers = [...memberlist];
this.ref.detectChanges();
}
else {
this.groupMembers.push(member);
this.ref.detectChanges();
}
};
this.fetchNextGroupMembers = () => {
this.onScrolledToBottom = null;
if (this.groupsRequest &&
this.groupsRequest.pagination &&
(this.groupsRequest.pagination.current_page == 0 ||
this.groupsRequest.pagination.current_page !=
this.groupsRequest.pagination.total_pages)) {
this.fetchingGroups = true;
this.onScrolledToBottom = this.fetchNextGroupMembers;
try {
this.groupsRequest.fetchNext().then((groupMembers) => {
if (!this.disableLoadingState) {
this.state = States.loading;
}
if (groupMembers.length <= 0) {
if (this.onEmpty) {
this.onEmpty();
this.previousSearchKeyword = '';
}
}
if (groupMembers.length <= 0 &&
(this.groupMembers?.length <= 0)) {
this.state = States.empty;
this.ref.detectChanges();
}
else {
if (!this.disableLoadingState) {
this.groupMembers = [...this.groupMembers, ...groupMembers];
}
else {
if (this.searchKeyword != this.previousSearchKeyword ||
[0, 1].includes(this.groupsRequest.pagination.current_page)) {
this.previousSearchKeyword = this.searchKeyword;
this.groupMembers = groupMembers;
}
else {
this.groupMembers = [...this.groupMembers, ...groupMembers];
}
}
this.state = States.loaded;
this.ref.detectChanges();
}
this.fetchingGroups = false;
this.previousSearchKeyword = this.searchKeyword;
}, (error) => {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.ref.detectChanges();
this.fetchingGroups = false;
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.ref.detectChanges();
this.fetchingGroups = false;
}
}
else {
this.state = States.loaded;
return;
}
};
/**
* @param {string} key
*/
this.onSearch = (key) => {
this.searchKeyword = key;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
const request = this.getRequestBuilder();
this.groupsRequest = request;
if (!this.disableLoadingState) {
this.groupMembers = [];
}
this.fetchNextGroupMembers();
}, 500);
};
this.membersStyle = () => {
return {
padding: this.groupMembersStyle.padding,
};
};
// styles
this.backButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.groupMembersStyle.backButtonIconTint ||
this.themeService.theme.palette.getPrimary(),
};
};
this.closeButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.groupMembersStyle.closeButtonIconTint ||
this.themeService.theme.palette.getPrimary(),
};
};
this.wrapperStyle = () => {
return {
height: this.groupMembersStyle.height,
width: this.groupMembersStyle.width,
background: this.groupMembersStyle.background ||
this.themeService.theme.palette.getBackground(),
border: this.groupMembersStyle.border,
borderRadius: this.groupMembersStyle.borderRadius,
};
};
this.getScopeStyle = () => {
return {
textFont: this.groupScopeStyle.textFont,
textColor: this.groupScopeStyle.textColor,
};
};
}
closeClicked() {
if (this.onClose) {
this.onClose();
}
}
backClicked() {
if (this.onBack) {
this.onBack();
}
}
onMemberSelected(member, event) {
let selected = event?.detail?.checked;
if (this.onSelect) {
this.onSelect(member, selected);
}
}
ngOnInit() {
this.onScrolledToBottom = this.fetchNextGroupMembers;
this.setThemeStyle();
this.attachListeners();
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
this.groupsRequest = this.getRequestBuilder();
if (!this.fetchingGroups) {
this.fetchNextGroupMembers();
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
ngOnChanges(changes) {
if (changes["searchKeyword"]) {
this.searchKeyWordUpdated();
}
}
ngOnDestroy() {
this.removeListener();
}
changeMemberScope(event) {
CometChat.updateGroupMemberScope(this.group.getGuid(), this.selectedMember.getUid(), event?.detail?.value)
.then((member) => {
let scope = event?.detail?.value;
this.changeScope = false;
this.selectedMember?.setScope(scope);
this.updateMember(this.selectedMember);
CometChatGroupEvents.ccGroupMemberScopeChanged.next({
scopeChangedFrom: this.selectedMember?.getScope(),
scopeChangedTo: scope,
message: this.createActionMessage(this.selectedMember, CometChatUIKitConstants.groupMemberAction.SCOPE_CHANGE),
group: this.group,
updatedUser: this.selectedMember,
});
this.selectedMember = null;
this.changeScope = false;
})
.catch((err) => {
this.changeScope = false;
this.selectedMember = null;
});
}
createActionMessage(actionOn, action) {
const messageUtils = new MessageUtils();
let actionMessage = new CometChat.Action(this.group.getGuid(), CometChatUIKitConstants.MessageTypes.groupMember, CometChatUIKitConstants.MessageReceiverType.group, CometChatUIKitConstants.MessageCategory.action);
actionMessage.setAction(action);
actionMessage.setActionBy(this.loggedInUser);
actionMessage.setActionFor(this.group);
actionMessage.setActionOn(actionOn);
actionMessage.setReceiver(this.group);
actionMessage.setSender(this.loggedInUser);
actionMessage.setConversationId("group_" + this.group.getGuid());
actionMessage.setMuid(CometChatUIKitUtility.ID());
actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
actionMessage.setReceiverType(CometChatUIKitConstants.MessageReceiverType.group);
actionMessage.data = {
extras: {
scope: {
new: actionOn.getScope(),
},
},
};
actionMessage.setNewScope(actionOn.getScope());
actionMessage.setMessage(messageUtils.getActionMessage(actionMessage));
return actionMessage;
}
attachListeners() {
//Attaching User Listeners to dynamilcally update when a user comes online and goes offline
CometChat.addUserListener(this.membersListenerId, new CometChat.UserListener({
onUserOnline: (onlineUser) => {
/* when someuser/friend comes online, user will be received here */
this.updateMemberStatus(onlineUser);
},
onUserOffline: (offlineUser) => {
/* when someuser/friend went offline, user will be received here */
this.updateMemberStatus(offlineUser);
},
}));
CometChat.addGroupListener(this.membersListenerId, new CometChat.GroupListener({
onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
if (changedUser.getUid() == this.loggedInUser?.getUid()) {
changedGroup.setScope(newScope);
}
this.updateMember(changedUser);
},
onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
this.addRemoveMember(kickedUser);
},
onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
this.addRemoveMember(bannedUser);
},
onGroupMemberUnbanned: (message, unbannedUser, unbannedBy, unbannedFrom) => {
if (unbannedUser.getUid() == this.loggedInUser?.getUid()) {
unbannedFrom.setHasJoined(false);
}
this.addRemoveMember(unbannedUser);
},
onMemberAddedToGroup: (message, userAdded, userAddedBy, userAddedIn) => {
let member = new CometChat.GroupMember(userAdded.getUid(), CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT);
member.setName(userAdded.getName());
member.setGuid(this.group.getGuid());
member.setUid(userAdded.getUid());
if (userAdded.getUid() == this.loggedInUser?.getUid()) {
userAddedIn.setHasJoined(true);
}
this.addRemoveMember(member);
},
onGroupMemberLeft: (message, leavingUser, group) => {
if (leavingUser.getUid() == this.loggedInUser?.getUid()) {
group.setHasJoined(false);
}
this.addRemoveMember(leavingUser);
},
onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
this.addRemoveMember(joinedUser);
},
}));
}
removeListener() {
CometChat.removeUserListener(this.membersListenerId);
this.membersListenerId = "";
}
getRequestBuilder() {
if (!this.searchKeyword) {
this.previousSearchKeyword = "";
}
if (this.searchRequestBuilder) {
return this.searchRequestBuilder
.setSearchKeyword(this.searchKeyword)
.build();
}
else if (this.groupMemberRequestBuilder) {
return this.groupMemberRequestBuilder
.setSearchKeyword(this.searchKeyword)
.build();
}
else {
return new CometChat.GroupMembersRequestBuilder(this.group.getGuid())
.setLimit(this.limit)
.setSearchKeyword(this.searchKeyword)
.build();
}
}
setThemeStyle() {
this.setGroupMembersStyle();
this.setScopeStyle();
this.setListItemStyle();
this.setAvatarStyle();
this.setStatusStyle();
this.menuListStyle = new MenuListStyle({
border: "none",
borderRadius: "8px",
background: "transparent",
submenuWidth: "100%",
submenuHeight: "100%",
submenuBorder: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
submenuBorderRadius: "8px",
submenuBackground: this.themeService.theme.palette.getBackground(),
moreIconTint: this.themeService.theme.palette.getPrimary(),
});
this.modalStyle.boxShadow = `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`;
this.modalStyle.background =
this.themeService.theme.palette.getBackground();
this.groupScopeStyle.closeIconTint =
this.groupScopeStyle.closeIconTint || this.themeService.theme.palette.getPrimary();
this.groupScopeStyle.buttonBackground =
this.groupScopeStyle.buttonBackground || this.themeService.theme.palette.getPrimary();
}
setGroupMembersStyle() {
let defaultStyle = new GroupMembersStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
separatorColor: this.themeService.theme.palette.getAccent400(),
width: "100%",
height: "100%",
borderRadius: "none",
searchIconTint: this.themeService.theme.palette.getAccent600(),
searchPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
searchBackground: this.themeService.theme.palette.getAccent100(),
searchPlaceholderTextFont: fontHelper(this.themeService.theme.typography.text3),
searchTextColor: this.themeService.theme.palette.getAccent600(),
searchTextFont: fontHelper(this.themeService.theme.typography.text3),
searchBorderRadius: "8px",
closeButtonIconTint: this.themeService.theme.palette.getPrimary(),
backButtonIconTint: this.themeService.theme.palette.getPrimary(),
padding: "0 100px",
});
this.groupMembersStyle = { ...defaultStyle, ...this.groupMembersStyle };
this.listStyle = {
titleTextFont: this.groupMembersStyle.titleTextFont ||
fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.groupMembersStyle.titleTextColor ||
this.themeService.theme.palette.getAccent(),
emptyStateTextFont: this.groupMembersStyle.emptyStateTextFont,
emptyStateTextColor: this.groupMembersStyle.emptyStateTextColor,
errorStateTextFont: this.groupMembersStyle.errorStateTextFont,
errorStateTextColor: this.groupMembersStyle.errorStateTextColor,
loadingIconTint: this.groupMembersStyle.loadingIconTint,
separatorColor: this.groupMembersStyle.separatorColor,
searchIconTint: this.groupMembersStyle.searchIconTint,
searchBorder: this.groupMembersStyle.searchBorder,
searchBorderRadius: this.groupMembersStyle.searchBorderRadius,
searchBackground: this.groupMembersStyle.searchBackground,
searchPlaceholderTextFont: this.groupMembersStyle.searchPlaceholderTextFont,
searchPlaceholderTextColor: this.groupMembersStyle.searchPlaceholderTextColor,
searchTextFont: this.groupMembersStyle.searchTextFont,
searchTextColor: this.groupMembersStyle.searchTextColor,
};
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
};
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: "",
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setStatusStyle() {
let defaultStyle = {
height: "12px",
width: "12px",
border: "none",
borderRadius: "24px",
};
this.statusIndicatorStyle = {
...defaultStyle,
...this.statusIndicatorStyle,
};
}
setScopeStyle() {
let defaultStyle = new ChangeScopeStyle({
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
activeTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
activeTextColor: this.themeService.theme.palette.getAccent(),
activeTextBackground: this.themeService.theme.palette.getAccent200(),
arrowIconTint: this.themeService.theme.palette.getAccent900(),
textFont: fontHelper(this.themeService.theme.typography.subtitle1),
textColor: this.themeService.theme.palette.getAccent600(),
optionBackground: this.themeService.theme.palette.getBackground(),
optionBorder: "none",
optionBorderRadius: "0",
hoverTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
hoverTextColor: this.themeService.theme.palette.getAccent900(),
hoverTextBackground: this.themeService.theme.palette.getAccent100(),
buttonTextFont: fontHelper(this.themeService.theme.typography.title2),
buttonTextColor: this.themeService.theme.palette.getAccent("dark"),
buttonBackground: this.themeService.theme.palette.getPrimary(),
closeIconTint: this.themeService.theme.palette.getPrimary(),
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
borderRadius: "8px",
height: "200px",
width: "280px",
});
this.groupScopeStyle = { ...defaultStyle, ...this.groupScopeStyle };
}
}
CometChatGroupMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatGroupMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: { groupMemberRequestBuilder: "groupMemberRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", tailView: "tailView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", backdropStyle: "backdropStyle", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", dropdownIconURL: "dropdownIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", groupMembersStyle: "groupMembersStyle", groupScopeStyle: "groupScopeStyle", listItemStyle: "listItemStyle", onItemClick: "onItemClick", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState", searchKeyword: "searchKeyword" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-group-members__back\">\n <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n (cc-button-clicked)=\"backClicked()\">\n\n </cometchat-button>\n </div>\n <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n <div class=\"cc-group-members__menus\">\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n </div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n [onSearch]=\"onSearch\" [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n [searchPlaceholderText]=\"searchPlaceholder\" [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"\n [title]=\"title\" [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-groupMember>\n <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\"\n [avatarName]=\"groupMember?.name\" [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"getStatusIndicatorStyle(groupMember)\" [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(groupMember)\"\n [userPresencePlacement]=\"userPresencePlacement\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n <cometchat-menu-list [data]=\"options(groupMember)\" [menuListStyle]=\"menuListStyle\"\n (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n </div>\n <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n <div *ngIf=\"tailView\">\n <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n </ng-container>\n\n </div>\n <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\">\n </cometchat-radio-button>\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n </div>\n </div>\n <div *ngIf=\"!tailView\">\n <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n <cometchat-menu-list [moreIconURL]=\"moreIconURL\" *ngIf=\"isArray(getOptions(groupMember))\"\n [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\"\n (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\">\n </cometchat-menu-list>\n <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\"\n [labelStyle]=\"getScopeStyle()\">\n\n </cometchat-label>\n\n </div>\n </div>\n </div>\n </cometchat-list-item>\n\n </ng-template>\n </div>\n <div class=\"cc-group-members__close\" *ngIf=\"closeButtonIconURL\">\n <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\"\n (cc-button-clicked)=\"closeClicked()\">\n\n </cometchat-button>\n </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden;box-sizing:border-box}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembersComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-group-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-group-members__back\">\n <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n (cc-button-clicked)=\"backClicked()\">\n\n </cometchat-button>\n </div>\n <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n <div class=\"cc-group-members__menus\">\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n </div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n [onSearch]=\"onSearch\" [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n [searchPlaceholderText]=\"searchPlaceholder\" [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"\n [title]=\"title\" [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-groupMember>\n <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\"\n [avatarName]=\"groupMember?.name\" [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"getStatusIndicatorStyle(groupMember)\" [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(groupMember)\"\n [userPresencePlacement]=\"userPresencePlacement\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n <cometchat-menu-list [data]=\"options(groupMember)\" [menuListStyle]=\"menuListStyle\"\n (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n </div>\n <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n <div *ngIf=\"tailView\">\n <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n </ng-container>\n\n </div>\n <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\">\n </cometchat-radio-button>\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n </div>\n </div>\n <div *ngIf=\"!tailView\">\n <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n <cometchat-menu-list [moreIconURL]=\"moreIconURL\" *ngIf=\"isArray(getOptions(groupMember))\"\n [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\"\n (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\">\n </cometchat-menu-list>\n <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\"\n [labelStyle]=\"getScopeStyle()\">\n\n </cometchat-label>\n\n </div>\n </div>\n </div>\n </cometchat-list-item>\n\n </ng-template>\n </div>\n <div class=\"cc-group-members__close\" *ngIf=\"closeButtonIconURL\">\n <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\"\n (cc-button-clicked)=\"closeClicked()\">\n\n </cometchat-button>\n </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden;box-sizing:border-box}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { groupMemberRequestBuilder: [{
type: Input
}], searchRequestBuilder: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], tailView: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], menu: [{
type: Input
}], options: [{
type: Input
}], backButtonIconURL: [{
type: Input
}], closeButtonIconURL: [{
type: Input
}], showBackButton: [{
type: Input
}], hideSeparator: [{
type: Input
}], selectionMode: [{
type: Input
}], searchPlaceholder: [{
type: Input
}], searchIconURL: [{
type: Input
}], hideSearch: [{
type: Input
}], title: [{
type: Input
}], onError: [{
type: Input
}], backdropStyle: [{
type: Input
}], onBack: [{
type: Input
}], onClose: [{
type: Input
}], onSelect: [{
type: Input
}], group: [{
type: Input
}], emptyStateView: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingIconURL: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], titleAlignment: [{
type: Input
}], dropdownIconURL: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], avatarStyle: [{
type: Input
}], groupMembersStyle: [{
type: Input
}], groupScopeStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], onItemClick: [{
type: Input
}], onEmpty: [{
type: Input
}], userPresencePlacement: [{
type: Input
}], disableLoadingState: [{
type: Input
}], searchKeyword: [{
type: Input
}] } });
class CometChatUserMemberWrapperComponent {
constructor(themeService) {
this.themeService = themeService;
this.userMemberListTypeEnum = UserMemberListType;
this.listItemStyle = new ListItemStyle({
height: 'fit-content'
});
this.getUsersStyle = () => {
return {
border: '1px solid ' + this.themeService.theme.palette.getAccent300(),
background: this.themeService.theme.palette.getBackground(),
borderRadius: '12px 12px 12px 12px'
};
};
this.getGroupMemebersStyle = () => {
return {
border: '1px solid ' + this.themeService.theme.palette.getAccent300(),
padding: "0px",
background: this.themeService.theme.palette.getBackground(),
borderRadius: '12px 12px 12px 12px',
};
};
}
}
CometChatUserMemberWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUserMemberWrapperComponent, deps: [{ token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatUserMemberWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: { userMemberListType: "userMemberListType", onItemClick: "onItemClick", listItemView: "listItemView", avatarStyle: "avatarStyle", statusIndicatorStyle: "statusIndicatorStyle", searchKeyword: "searchKeyword", group: "group", subtitleView: "subtitleView", usersRequestBuilder: "usersRequestBuilder", disableUsersPresence: "disableUsersPresence", userPresencePlacement: "userPresencePlacement", hideSeperator: "hideSeperator", loadingStateView: "loadingStateView", onEmpty: "onEmpty", onError: "onError", groupMemberRequestBuilder: "groupMemberRequestBuilder", loadingIconUrl: "loadingIconUrl", disableLoadingState: "disableLoadingState" }, ngImport: i0, template: "<div class=\"cc__wrapper\">\n <cometchat-users *ngIf=\"userMemberListType == userMemberListTypeEnum.users\" [title]=\"''\" [hideSearch]=true\n [hideSeparator]=hideSeperator [showSectionHeader]=false [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"statusIndicatorStyle\" [searchKeyword]=\"searchKeyword\" [listItemView]=\"listItemView\"\n [usersRequestBuilder]=\"usersRequestBuilder\" [subtitleView]=\"subtitleView\" [loadingStateView]=\"loadingStateView\"\n [onEmpty]=\"onEmpty\" [loadingIconURL]=\"loadingIconUrl\" [userPresencePlacement]=\"userPresencePlacement\"\n [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [usersStyle]=\"getUsersStyle()\">\n\n</cometchat-users>\n\n<cometchat-group-members *ngIf=\"userMemberListType == userMemberListTypeEnum.groupmembers\" [group]=\"group\" [title]=\"''\"\n [hideSearch]=true [showBackButton]=hideSeperator [hideSeparator]=false\n [groupMemberRequestBuilder]=\"groupMemberRequestBuilder\" [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"statusIndicatorStyle\" [listItemView]=\"listItemView\" [subtitleView]=\"subtitleView\"\n [options]=null [tailView]=emptyTailView [closeButtonIconURL]=undefined [searchKeyword]=\"searchKeyword\"\n [onEmpty]=\"onEmpty\" [userPresencePlacement]=\"userPresencePlacement\"\n [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [groupMembersStyle]=\"getGroupMemebersStyle()\">\n</cometchat-group-members>\n\n<ng-template #emptyTailView></ng-template>\n</div>", styles: ["*{height:100%;width:100%;margin:0;padding:0}.cc__wrapper{height:100%;width:100%;overflow:hidden}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUserMemberWrapperComponent, decorators: [{
type: Component,
args: [{ selector: 'cometchat-user-member-wrapper', template: "<div class=\"cc__wrapper\">\n <cometchat-users *ngIf=\"userMemberListType == userMemberListTypeEnum.users\" [title]=\"''\" [hideSearch]=true\n [hideSeparator]=hideSeperator [showSectionHeader]=false [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"statusIndicatorStyle\" [searchKeyword]=\"searchKeyword\" [listItemView]=\"listItemView\"\n [usersRequestBuilder]=\"usersRequestBuilder\" [subtitleView]=\"subtitleView\" [loadingStateView]=\"loadingStateView\"\n [onEmpty]=\"onEmpty\" [loadingIconURL]=\"loadingIconUrl\" [userPresencePlacement]=\"userPresencePlacement\"\n [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [usersStyle]=\"getUsersStyle()\">\n\n</cometchat-users>\n\n<cometchat-group-members *ngIf=\"userMemberListType == userMemberListTypeEnum.groupmembers\" [group]=\"group\" [title]=\"''\"\n [hideSearch]=true [showBackButton]=hideSeperator [hideSeparator]=false\n [groupMemberRequestBuilder]=\"groupMemberRequestBuilder\" [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"statusIndicatorStyle\" [listItemView]=\"listItemView\" [subtitleView]=\"subtitleView\"\n [options]=null [tailView]=emptyTailView [closeButtonIconURL]=undefined [searchKeyword]=\"searchKeyword\"\n [onEmpty]=\"onEmpty\" [userPresencePlacement]=\"userPresencePlacement\"\n [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [groupMembersStyle]=\"getGroupMemebersStyle()\">\n</cometchat-group-members>\n\n<ng-template #emptyTailView></ng-template>\n</div>", styles: ["*{height:100%;width:100%;margin:0;padding:0}.cc__wrapper{height:100%;width:100%;overflow:hidden}\n"] }]
}], ctorParameters: function () { return [{ type: CometChatThemeService }]; }, propDecorators: { userMemberListType: [{
type: Input
}], onItemClick: [{
type: Input
}], listItemView: [{
type: Input
}], avatarStyle: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], searchKeyword: [{
type: Input
}], group: [{
type: Input
}], subtitleView: [{
type: Input
}], usersRequestBuilder: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], userPresencePlacement: [{
type: Input
}], hideSeperator: [{
type: Input
}], loadingStateView: [{
type: Input
}], onEmpty: [{
type: Input
}], onError: [{
type: Input
}], groupMemberRequestBuilder: [{
type: Input
}], loadingIconUrl: [{
type: Input
}], disableLoadingState: [{
type: Input
}] } });
/**
*
* CometChatMessageComposer is used to send message to user or group.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatMessageComposerComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.disableSoundForMessages = false;
/**
* @deprecated
*
* This property is deprecated as of version 4.3.19 due to newer property 'customSoundForMessages'. It will be removed in subsequent versions.
*/
this.customSoundForMessage = "";
this.customSoundForMessages = "";
this.disableTypingEvents = false;
this.text = "";
this.placeholderText = localize("ENTER_YOUR_MESSAGE_HERE");
this.attachmentIconURL = "assets/Plus.svg";
this.auxiliaryButtonsAlignment = AuxiliaryButtonAlignment.right;
this.parentMessageId = 0;
this.hideLiveReaction = true;
this.LiveReactionIconURL = "assets/heart-reaction.png";
this.backButtonIconURL = "assets/backbutton.svg";
this.InfoSimpleIcon = "assets/InfoSimpleIcon.svg";
this.messageComposerStyle = {
height: "100%",
width: "100%",
borderRadius: "12px",
maxInputHeight: "100px",
};
this.onError = (error) => {
console.log(error);
};
this.backdropStyle = {
height: "100%",
width: "100%",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed",
};
this.actionSheetStyle = {
layoutModeIconTint: "rgba(20, 20, 20, 0.04)",
borderRadius: "inherit",
background: "rgb(255,255,255)",
border: "none",
width: "100%",
height: "100%",
titleFont: "500 15px Inter, sans-serif",
titleColor: "#141414",
listItemBackground: "",
ActionSheetSeparatorTint: "1px solid RGBA(20, 20, 20, 0.08)",
listItemIconBackground: "",
listItemIconTint: ""
};
this.aiActionSheetStyle = {
layoutModeIconTint: "rgba(20, 20, 20, 0.04)",
borderRadius: "inherit",
background: "rgb(255,255,255)",
border: "none",
width: "100%",
height: "100%",
titleFont: "500 15px Inter, sans-serif",
titleColor: "#141414",
listItemBackground: "transparent",
ActionSheetSeparatorTint: "1px solid RGBA(20, 20, 20, 0.08)",
};
this.hideVoiceRecording = false;
this.mediaRecorderStyle = {};
this.aiOptionsStyle = {};
this.aiIconURL = "assets/ai-bot.svg";
this.voiceRecordingIconURL = "assets/mic.svg";
this.voiceRecordingCloseIconURL = "assets/close2x.svg";
this.voiceRecordingStartIconURL = "assets/mic.svg";
this.voiceRecordingStopIconURL = "assets/stop.svg";
this.voiceRecordingSubmitIconURL = "assets/Send.svg";
this.hideLayoutMode = false;
this.emojiIconURL = "assets/Stipop.svg";
this.childEvent = new EventEmitter();
this.userMemberWrapperConfiguration = new UserMemberWrapperConfiguration({});
this.textFormatters = [];
this.sendButtonIconURL = "assets/Send.svg";
this.mentionsFormatterInstanceId = "composer_" + Date.now();
this.composerActions = [];
this.states = States;
this.mentionsSearchTerm = "";
this.showListForMentions = false;
this.mentionsSearchCount = 1;
this.lastEmptySearchTerm = "";
this.smartReplyState = States.loading;
this.showMentionsCountWarning = false;
this.initialText = "";
this.loadingStateText = localize("GENERATING_REPLIES");
this.errorStateText = localize("SOMETHING_WRONG");
this.emptyStateText = localize("NO_MESSAGES_FOUND");
this.showCreatePolls = false;
this.showStickerKeyboard = false;
this.showActionSheetItem = false;
this.showActionSheetItemAI = false;
this.showSmartReply = false;
this.showAiFeatures = false;
this.repliesArray = [];
this.aiBotList = [];
this.currentAskAIBot = "";
this.isAiMoreThanOne = false;
this.showPreview = false;
this.aiFeaturesCloseCallback = null;
this.textFormatterList = this.textFormatters
? [...this.textFormatters]
: [];
this.mentionedUsers = [];
this.acceptHandlers = {
"image/*": this.onImageChange.bind(this),
"video/*": this.onVideoChange.bind(this),
"audio/*": this.onAudioChange.bind(this),
"file/*": this.onFileChange.bind(this),
};
this.enableStickerKeyboard = false;
this.toggleMediaRecorded = false;
this.showAiBotList = false;
this.mentionsTypeSetByUser = false;
this.stickerConfiguration = {};
this.closeButtonIconURL = "assets/plus-rotated.svg";
this.buttons = [];
this.aiActionButtons = [];
this.smartReplyStyle = {
width: "100%",
height: "fit-content",
border: "none",
};
this.sendButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: "rgba(20, 20, 20, 0.58)",
background: "transparent",
};
this.liveReactionStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: "red",
background: "transparent",
display: "flex",
justifyContent: "center",
alignItems: "center",
};
this.localize = localize;
this.emojiButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: "grey",
background: "transparent",
};
this.stickerButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: "grey",
background: "transparent",
};
this.mediaRecorderButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: "grey",
background: "transparent",
};
this.emojiKeyboardStyle = {
width: "100%",
height: "100%",
border: "none",
textFont: this.messageComposerStyle?.emojiKeyboardTextFont,
textColor: this.messageComposerStyle?.emojiKeyboardTextColor,
background: this.themeService.theme.palette.getBackground(),
borderRadius: "12px",
activeIconTint: this.themeService.theme.palette.getPrimary(),
iconTint: this.themeService.theme.palette.getAccent600()
};
this.stickerKeyboardStyle = {};
this.textInputStyle = {};
this.previewStyle = {
height: "100%",
width: "100%",
};
this.createPollStyle = {};
this.emojiPopover = {
width: "315px",
height: "320px",
border: "none",
background: "transparent",
borderRadius: "8px",
boxShadow: "0px 0px 8px rgba(20, 20, 20, 0.2)",
};
this.stickerPopover = {
width: "300px",
height: "320px",
border: "none",
background: "transparent",
borderRadius: "8px",
boxShadow: "0px 0px 8px rgba(20, 20, 20, 0.2)",
};
this.aiPopover = {
width: "280px",
height: "280px",
border: "none",
background: "transparent",
borderRadius: "8px",
boxShadow: "0px 0px 8px rgba(20, 20, 20, 0.2)",
};
this.mediaRecordedPopover = {
width: "250px",
height: "100px",
borderRadius: "8px",
boxShadow: "0px 0px 8px rgba(20, 20, 20, 0.2)",
};
this.popoverStyle = {
width: "275px",
height: "280px",
border: "none",
background: "transparent",
borderRadius: "8px",
boxShadow: "0px 0px 8px rgba(20, 20, 20, 0.2)",
};
this.emojiButtonIconURL = "assets/Stipop.svg";
this.stickerButtonIconURL = "assets/Stickers.svg";
this.messageText = "";
this.attachmentButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: "grey",
background: "transparent",
};
this.auxilaryPlacement = Placement.top;
this.messageSending = false;
this.editPreviewText = "";
this.showSendButton = false;
this.showEmojiKeyboard = false;
this.isAiEnabled = false;
this.smartReplies = [];
this.mentionStyleLocal = new UserMentionStyle({});
this.sendMessageOnEnter = (event) => {
this.showMentionsCountWarning = false;
this.showListForMentions = false;
this.sendTextMessage(event.detail.value);
this.clearComposer();
this.showSendButton = false;
this.disableSendButton();
};
this.messageInputChanged = (event) => {
const text = event?.detail?.value?.trim();
this.sendButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: text
? this.messageComposerStyle?.sendIconTint
: this.themeService.theme.palette.getAccent200(),
background: "transparent",
};
if (!text) {
this.showSendButton = false;
}
else {
this.showSendButton = true;
}
if (this.onTextChange) {
this.onTextChange(text);
}
this.messageText = text;
if (text) {
this.startTyping();
}
else {
this.endTyping();
}
};
this.appendEmoji = (event) => {
if (this.text === event?.detail.id) {
this.text = "" + "";
this.ref.detectChanges();
}
this.text = event?.detail.id;
this.ref.detectChanges();
};
this.openCreatePolls = () => {
this.showCreatePolls = true;
if (this.showActionSheetItem) {
this.actionSheetRef.nativeElement.click();
this.showActionSheetItem = !this.showActionSheetItem;
}
this.ref.detectChanges();
};
this.closeCreatePolls = () => {
this.showCreatePolls = false;
this.ref.detectChanges();
};
this.sendRecordedMedia = (event) => {
let file = event?.detail?.file;
if (file) {
this.sendRecordedAudio(file);
}
this.closeMediaRecorder();
this.ref.detectChanges();
};
this.sendRecordedAudio = (file) => {
try {
const uploadedFile = file;
const reader = new FileReader();
reader.addEventListener("load", () => {
const newFile = new File([reader.result], `audio-recording-${this.getFormattedDate()}.wav`, uploadedFile);
this.sendMediaMessage(newFile, CometChatUIKitConstants.MessageTypes.audio);
}, false);
reader.readAsArrayBuffer(uploadedFile);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
return true;
};
/*
* isPartOfCurrentChatForUIEvent: To check if the message belongs for this list and is not part of thread even for current list
it only runs for UI event because it assumes logged in user is always sender
* @param: message: CometChat.BaseMessage
*/
this.isPartOfCurrentChatForUIEvent = (message) => {
if (this.parentMessageId) {
if (message.getParentMessageId() === this.parentMessageId) {
return true;
}
else {
return false;
}
}
else {
if (message.getParentMessageId()) {
return false;
}
if (this.user) {
if (message.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.user &&
message?.getReceiverId() === this.user.getUid()) {
return true;
}
}
else if (this.group) {
if (message.getReceiverType() === CometChatUIKitConstants.MessageReceiverType.group &&
message?.getReceiverId() === this.group.getGuid()) {
return true;
}
}
return false;
}
};
this.handleActions = (event) => {
let action = event?.detail?.action;
this.showAiFeatures = false;
if (action.onClick) {
action.onClick();
}
if (this.showActionSheetItem) {
this.showActionSheetItem = false;
this.actionSheetRef.nativeElement.click();
}
};
this.inputChangeHandler = (event) => {
const handler = this.acceptHandlers[this.inputElementRef.nativeElement.accept] ||
this.onFileChange.bind(this);
handler(event);
if (this.inputElementRef?.nativeElement && this.inputElementRef.nativeElement?.value) {
this.inputElementRef.nativeElement.value = "";
}
};
this.sendSticker = (event) => {
this.stickerButtonRef?.nativeElement?.click();
this.showStickerKeyboard = false;
let sticker = event?.detail?.stickerURL;
let stickerName = event?.detail?.stickerName;
if (this.stickerConfiguration?.configuration?.ccStickerClicked) {
this.stickerConfiguration?.configuration?.ccStickerClicked({
name: stickerName,
url: sticker,
}, this.loggedInUser, this.user, this.group, this.parentMessageId, this.onError, this.customSoundForMessage || this.customSoundForMessages, this.disableSoundForMessages);
}
};
this.openImagePicker = () => {
this.inputElementRef.nativeElement.type = "file";
this.inputElementRef.nativeElement.accept = "image/*";
this.inputElementRef.nativeElement.click();
this.closePopovers();
};
this.openFilePicker = () => {
this.inputElementRef.nativeElement.type = "file";
this.inputElementRef.nativeElement.accept = "file/*";
this.inputElementRef.nativeElement.click();
this.closePopovers();
};
this.openvideoPicker = () => {
this.inputElementRef.nativeElement.type = "file";
this.inputElementRef.nativeElement.accept = "video/*";
this.inputElementRef.nativeElement.click();
this.closePopovers();
};
this.openAudioPicker = () => {
this.inputElementRef.nativeElement.type = "file";
this.inputElementRef.nativeElement.accept = "audio/*";
this.inputElementRef.nativeElement.click();
this.closePopovers();
};
this.openActionSheet = (event) => {
if (event?.detail?.hasOwnProperty("isOpen")) {
this.showActionSheetItem = false;
this.ref.detectChanges();
return;
}
this.showActionSheetItem = !this.showActionSheetItem;
this.closeMediaRecorder();
if (this.showEmojiKeyboard) {
this.emojiButtonRef.nativeElement.click();
this.showEmojiKeyboard = !this.showEmojiKeyboard;
}
if (this.showStickerKeyboard) {
this.stickerButtonRef.nativeElement.click();
this.showStickerKeyboard = !this.showStickerKeyboard;
this.ref.detectChanges();
}
if (this.showAiFeatures) {
this.aiButtonRef.nativeElement.click();
this.showAiFeatures = !this.showAiFeatures;
this.ref.detectChanges();
}
else {
return;
}
};
this.handleAiFeaturesClose = (callback) => {
this.aiFeaturesCloseCallback = callback;
};
this.closeSmartReply = () => {
this.showAiFeatures = false;
this.ref.detectChanges();
return;
};
this.openAiFeatures = (event) => {
if (this.aiFeaturesCloseCallback) {
this.aiFeaturesCloseCallback();
}
if (event?.detail?.hasOwnProperty("isOpen")) {
this.showAiFeatures = false;
this.ref.detectChanges();
return;
}
this.showAiFeatures = !this.showAiFeatures;
this.closeMediaRecorder();
if (this.showEmojiKeyboard) {
this.emojiButtonRef.nativeElement.click();
this.showEmojiKeyboard = !this.showEmojiKeyboard;
}
if (this.showStickerKeyboard) {
this.stickerButtonRef.nativeElement.click();
this.showStickerKeyboard = !this.showStickerKeyboard;
this.ref.detectChanges();
}
if (this.showActionSheetItem) {
this.actionSheetRef.nativeElement.click();
this.showActionSheetItem = !this.showActionSheetItem;
this.ref.detectChanges();
}
else {
this.showActionSheetItemAI = true;
return;
}
};
this.openEmojiKeyboard = (event) => {
if (event?.detail?.hasOwnProperty("isOpen")) {
this.showEmojiKeyboard = false;
this.ref.detectChanges();
return;
}
this.showEmojiKeyboard = !this.showEmojiKeyboard;
this.closeMediaRecorder();
if (this.showActionSheetItem) {
this.actionSheetRef.nativeElement.click();
this.showActionSheetItem = !this.showActionSheetItem;
this.ref.detectChanges();
}
if (this.showStickerKeyboard) {
this.stickerButtonRef.nativeElement.click();
this.showStickerKeyboard = !this.showStickerKeyboard;
this.ref.detectChanges();
}
if (this.showAiFeatures) {
this.aiButtonRef.nativeElement.click();
this.showAiFeatures = !this.showAiFeatures;
this.ref.detectChanges();
}
else {
return;
}
};
this.openMediaRecorded = (event) => {
if (event?.detail?.hasOwnProperty("isOpen")) {
this.toggleMediaRecorded = false;
this.ref.detectChanges();
return;
}
this.toggleMediaRecorded = !this.toggleMediaRecorded;
this.ref.detectChanges();
if (this.showActionSheetItem) {
this.actionSheetRef.nativeElement.click();
this.showActionSheetItem = !this.showActionSheetItem;
this.ref.detectChanges();
}
if (this.showEmojiKeyboard) {
this.emojiButtonRef.nativeElement.click();
this.showEmojiKeyboard = !this.showEmojiKeyboard;
this.ref.detectChanges();
}
if (this.showStickerKeyboard) {
this.stickerButtonRef.nativeElement.click();
this.showStickerKeyboard = !this.showStickerKeyboard;
this.ref.detectChanges();
}
if (this.showAiFeatures) {
this.aiButtonRef.nativeElement.click();
this.showAiFeatures = !this.showAiFeatures;
this.ref.detectChanges();
}
else {
return;
}
};
this.openStickerKeyboard = (event) => {
if (event?.detail?.hasOwnProperty("isOpen")) {
this.showStickerKeyboard = false;
this.ref.detectChanges();
return;
}
this.showStickerKeyboard = !this.showStickerKeyboard;
this.closeMediaRecorder();
this.ref.detectChanges();
if (this.showActionSheetItem) {
this.actionSheetRef.nativeElement.click();
this.showActionSheetItem = !this.showActionSheetItem;
this.ref.detectChanges();
}
if (this.showEmojiKeyboard) {
this.emojiButtonRef.nativeElement.click();
this.showEmojiKeyboard = !this.showEmojiKeyboard;
this.ref.detectChanges();
}
else {
return;
}
};
/**
* Check for developer provided instance of MentionsTextFormatter
* If not provided, add default
* If provided, check if style is provided via configuration, then add style.
*/
this.initializeMentionsFormatter = () => {
if (!this.disableMentions) {
this.mentionsTextFormatterInstance.setMentionsTextStyle(this.getMentionsStyle());
let foundMentionsFormatter;
if (this.textFormatters.length) {
for (let i = 0; i < this.textFormatterList.length; i++) {
if (this.textFormatterList[i] instanceof CometChatMentionsFormatter) {
foundMentionsFormatter = this.textFormatterList[i];
this.mentionsTextFormatterInstance = foundMentionsFormatter;
break;
}
}
}
if (foundMentionsFormatter) {
this.mentionsTextFormatterInstance = foundMentionsFormatter;
}
if (!this.mentionsTextFormatterInstance.getKeyUpCallBack() ||
this.mentionsTextFormatterInstance.getKeyDownCallBack()) {
this.mentionsTextFormatterInstance.setKeyUpCallBack(this.searchMentions);
this.mentionsTextFormatterInstance.setKeyDownCallBack(this.searchMentions);
this.mentionsTextFormatterInstance.setId(this.mentionsFormatterInstanceId);
}
if (!foundMentionsFormatter) {
this.textFormatterList.push(this.mentionsTextFormatterInstance);
}
}
};
this.getMentionsStyle = () => {
return this.mentionStyleLocal;
};
this.getSmartReplies = () => {
this.showSmartReply = true;
this.repliesArray = [];
this.showActionSheetItemAI = false;
this.showAiBotList = false;
this.smartReplyState = States.loading;
this.ref.detectChanges();
return new Promise((resolve, reject) => {
let receiverId = this.user
? this.user?.getUid()
: this.group?.getGuid();
let receiverType = this.user
? CometChatUIKitConstants.MessageReceiverType.user
: CometChatUIKitConstants.MessageReceiverType.group;
CometChat.getSmartReplies(receiverId, receiverType)
.then((response) => {
let repliesArray = [];
Object.keys(response).forEach((reply) => {
if (response[reply] && response[reply] != "") {
this.repliesArray.push(response[reply]);
repliesArray.push(response[reply]);
}
});
resolve(repliesArray);
this.smartReplyState = States.loaded;
this.ref.detectChanges();
})
.catch((err) => {
this.smartReplyState = States.error;
this.ref.detectChanges();
return reject(err);
});
});
};
this.showAiBotMessageListMethod = (action) => {
this.aiBotList = action;
this.showActionSheetItemAI = false;
this.showAiBotList = true;
this.aiActionButtons.length = 0;
this.aiBotList.forEach((e, i) => {
const newButton = {
id: e.id,
title: e.title,
onClick: async () => {
CometChatUIEvents.ccShowPanel.next({
child: { bot: e, showBotView: true },
});
},
};
this.aiActionButtons.push(newButton);
});
this.ref.detectChanges();
};
this.sendReply = (event) => {
let reply = event?.detail?.reply;
CometChatUIEvents.ccComposeMessage.next(reply);
this.repliesArray = [];
this.showActionSheetItemAI = false;
this.showAiFeatures = false;
this.aiButtonRef.nativeElement.click();
this.ref.detectChanges();
};
this.backButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.themeService.theme.palette.getPrimary(),
};
};
/**
* Accepts search term from mentionsTextFormatter and opens the mentions select list
*
* @param {string} searchTerm
* @returns {void}
*/
this.searchMentions = (searchTerm) => {
if (!(searchTerm && searchTerm.length)) {
this.mentionsSearchTerm = "";
this.showListForMentions = false;
this.mentionsSearchCount = 1;
this.ref.detectChanges();
return;
}
if (!this.lastEmptySearchTerm ||
!searchTerm
.split("@")[1]
.toLowerCase()
.startsWith(this.lastEmptySearchTerm.toLowerCase())) {
this.mentionsSearchTerm =
searchTerm.split("@")[1] && searchTerm.split("@")[1].length
? searchTerm.split("@")[1]
: "";
this.showListForMentions = true;
this.mentionsSearchCount++;
this.lastEmptySearchTerm = undefined;
this.ref.detectChanges();
}
};
/**
* Called when clicking a user from the mentions list.
* Add the user to mentions text formatter instance and then call rerender to style the mention
* within message input.
*
* @param {CometChat.User} user
*/
this.defaultMentionsItemClickHandler = (user) => {
let cometChatUsers = [user];
this.mentionsTextFormatterInstance.setCometChatUserGroupMembers(cometChatUsers);
this.mentionsTextFormatterInstance.setLoggedInUser(this.loggedInUser);
this.mentionedUsers = [
...this.mentionsTextFormatterInstance.getCometChatUserGroupMembers(),
];
this.mentionsTextFormatterInstance.reRender();
this.showListForMentions = false;
this.mentionsSearchTerm = "";
this.ref.detectChanges();
};
/**
* Close mentions list if search returns empty list
*/
this.defaultOnEmptyForMentions = () => {
this.lastEmptySearchTerm = this.mentionsSearchTerm;
this.showListForMentions = false;
this.mentionsSearchTerm = "";
this.ref.detectChanges();
};
this.getMentionInfoIconStyle = () => {
return {
height: "fit-content",
width: "fit-content",
buttonTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
buttonTextColor: this.themeService.theme.palette.getAccent600(),
borderRadius: "8px",
border: "none",
buttonIconTint: this.themeService.theme.palette.getAccent600(),
padding: "8px",
iconHeight: "20px",
iconWidth: "20px",
iconBackground: "transparent",
gap: "5px",
};
};
this.handleClickOutside = (event) => {
if (this.userMemberWrapperRef) {
const userMemberWrapperRect = this.userMemberWrapperRef?.nativeElement?.getBoundingClientRect();
const isOutsideClick = event?.clientX <= userMemberWrapperRect?.left ||
event?.clientX >= userMemberWrapperRect?.right ||
event?.clientY >= userMemberWrapperRect?.top ||
event?.clientY <= userMemberWrapperRect?.bottom;
if (isOutsideClick) {
this.showListForMentions = false;
this.mentionsSearchTerm = "";
this.ref.detectChanges();
}
}
};
}
disableSendButton() {
this.sendButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: this.themeService.theme.palette.getAccent200(),
background: "transparent",
};
this.ref.detectChanges();
}
sendReaction() {
let receiverId = this.user
? this.user?.getUid()
: this.group?.getGuid();
let receiverType = this.user
? CometChatUIKitConstants.MessageReceiverType.user
: CometChatUIKitConstants.MessageReceiverType.group;
let data = {
type: "live_reaction",
reaction: "heart",
};
let transientMessage = new CometChat.TransientMessage(receiverId, receiverType, data);
CometChat.sendTransientMessage(transientMessage);
CometChatMessageEvents.ccLiveReaction.next("heart");
return;
}
closeMediaRecorder(event) {
if (this.toggleMediaRecorded) {
this.mediaRecordedRef.nativeElement.click();
this.toggleMediaRecorded = !this.toggleMediaRecorded;
this.ref.detectChanges();
}
}
getFormattedDate() {
const currentDate = new Date();
const year = currentDate.getFullYear().toString();
const month = this.padZero(currentDate.getMonth() + 1);
const day = this.padZero(currentDate.getDate());
const hours = this.padZero(currentDate.getHours());
const minutes = this.padZero(currentDate.getMinutes());
const seconds = this.padZero(currentDate.getSeconds());
return `${year}${month}${day}${hours}${minutes}${seconds}`;
}
padZero(num) {
return num.toString().padStart(2, "0");
}
addAttachmentCallback() {
this.composerActions?.forEach((element) => {
switch (element.id) {
case CometChatUIKitConstants.MessageTypes.audio:
if (!element.onClick) {
element.onClick = this.openAudioPicker;
}
break;
case CometChatUIKitConstants.MessageTypes.video:
if (!element.onClick) {
element.onClick = this.openvideoPicker;
}
break;
case CometChatUIKitConstants.MessageTypes.file:
if (!element.onClick) {
element.onClick = this.openFilePicker;
}
break;
case CometChatUIKitConstants.MessageTypes.image:
if (!element.onClick) {
element.onClick = this.openImagePicker;
}
break;
case "extension_poll":
if (!element.onClick) {
element.onClick = this.openCreatePolls;
}
break;
}
});
}
subscribeToEvents() {
this.ccMessageEdit = CometChatMessageEvents.ccMessageEdited.subscribe((object) => {
let parentId = object?.message?.getParentMessageId();
if ((this.parentMessageId && parentId && parentId == this.parentMessageId) || (!this.parentMessageId && !parentId)) {
if (object?.status == MessageStatus.inprogress) {
this.messageToBeEdited = object.message;
if (this.isPartOfCurrentChatForUIEvent(object?.message)) {
this.openEditPreview();
}
}
if (object?.status === MessageStatus.success && object.message instanceof CometChat.TextMessage) {
this.closePreview();
}
}
});
this.ccComposeMessage = CometChatUIEvents.ccComposeMessage.subscribe((text) => {
this.text = text;
this.ref.detectChanges();
});
this.ccShowMentionsCountWarning =
CometChatUIEvents.ccShowMentionsCountWarning.subscribe((data) => {
if (data.id == this.mentionsFormatterInstanceId) {
if (data.showWarning) {
this.showMentionsCountWarning = true;
return;
}
this.showMentionsCountWarning = false;
}
});
}
openEditPreview() {
let messageTextWithMentionTags = this.checkForMentions(this.messageToBeEdited);
this.clearComposer();
this.inputRef.nativeElement.text = "";
this.text = this.messageToBeEdited.getText();
this.editPreviewText = messageTextWithMentionTags;
this.showPreview = true;
this.ref.detectChanges();
}
/**
* Adds @ for every mention the message by matching uid
*
* @param {string} message
* @returns {void}
*/
checkForMentions(message) {
const regex = /<@uid:(.*?)>/g;
let messageText = message.getText();
let messageTextTmp = messageText;
let match = regex.exec(messageText);
let mentionedUsers = message.getMentionedUsers();
let cometChatUsersGroupMembers = [];
while (match !== null) {
let user;
for (let i = 0; i < mentionedUsers.length; i++) {
if (match[1] == mentionedUsers[i].getUid()) {
user = mentionedUsers[i];
}
}
if (user) {
messageTextTmp = messageTextTmp.replace(match[0], "@" + user.getName());
cometChatUsersGroupMembers.push(user);
}
match = regex.exec(messageText);
}
this.mentionsTextFormatterInstance.setCometChatUserGroupMembers(cometChatUsersGroupMembers);
this.mentionsTextFormatterInstance.setLoggedInUser(this.loggedInUser);
return messageTextTmp;
}
unsubscribeToEvents() {
this.ccMessageEdit?.unsubscribe();
this.ccShowMentionsCountWarning?.unsubscribe();
}
closeModals() {
if (this.showActionSheetItem) {
this.actionSheetRef?.nativeElement?.click();
this.showActionSheetItem = false;
}
if (this.showEmojiKeyboard) {
this.emojiButtonRef?.nativeElement?.click();
this.showEmojiKeyboard = false;
}
if (this.showStickerKeyboard) {
this.stickerButtonRef?.nativeElement?.click();
this.showStickerKeyboard = false;
}
if (this.toggleMediaRecorded) {
this.mediaRecordedRef?.nativeElement?.click();
this.toggleMediaRecorded = false;
}
if (this.showAiFeatures) {
this.aiButtonRef?.nativeElement?.click();
this.showAiFeatures = false;
this.showAiBotList = false;
}
}
callConversationSummaryMethod() {
this.showAiFeatures = false;
this.aiButtonRef.nativeElement.click();
CometChatUIEvents.ccShowPanel.next({
child: { showConversationSummaryView: true },
});
}
clearComposer() {
this.text = "";
this.messageText = "";
this.inputRef?.nativeElement?.emptyInputField();
}
ngOnChanges(changes) {
if (changes["user"] || changes["group"]) {
this.userOrGroupChanged(changes);
if (this.initialText !== this.text) {
this.clearComposer();
}
this.text = this.initialText || "";
}
if (changes["text"]?.currentValue) {
this.initialText = changes["text"].currentValue;
this.text = this.initialText;
}
}
userOrGroupChanged(changes) {
if (this.showPreview) {
this.closePreview();
}
if (!this.disableMentions) {
this.showListForMentions = false;
if (changes["group"] && this.group) {
if (this.userMemberWrapperConfiguration?.userMemberListType == undefined) {
this.userMemberListType = UserMemberListType.groupmembers;
}
this.groupMembersRequestBuilder = this.userMemberWrapperConfiguration
.groupMemberRequestBuilder
? this.userMemberWrapperConfiguration.groupMemberRequestBuilder
: new CometChat.GroupMembersRequestBuilder(this.group.getGuid()).setLimit(15);
}
if (changes["user"] && this.user) {
if (this.userMemberWrapperConfiguration?.userMemberListType == undefined) {
this.userMemberListType = UserMemberListType.users;
}
this.usersRequestBuilder = this.userMemberWrapperConfiguration
.usersRequestBuilder
? this.userMemberWrapperConfiguration.usersRequestBuilder
: new CometChat.UsersRequestBuilder().setLimit(15);
}
}
this.showAiBotList = false;
this.showSmartReply = false;
this.closeModals();
this.messageText = this.text;
if (this.inputRef && this.inputRef.nativeElement) {
setTimeout(() => {
this.inputRef?.nativeElement?.emptyInputField();
this.inputRef?.nativeElement?.pasteHtmlAtCaret(this.text);
}, 0);
}
this.showSendButton = false;
this.composerId = this.getComposerId();
if (this.attachmentOptions) {
this.composerActions = this.attachmentOptions(this.user || this.group, this.composerId);
this.addAttachmentCallback();
}
else {
this.composerActions =
ChatConfigurator.getDataSource()?.getAttachmentOptions(this.themeService.theme, this.user, this.group, this.composerId);
this.addAttachmentCallback();
}
for (let i = 0; i < this.textFormatterList.length; i++) {
this.textFormatterList[i].setComposerConfig(this.user, this.group, this.composerId);
}
}
ngOnDestroy() {
this.unsubscribeToEvents();
this.mentionsTextFormatterInstance.cleanup();
}
customSendMethod(message) {
this.showSendButton = false;
this.sendTextMessage(message);
this.disableSendButton();
this.ref.detectChanges();
}
/**
* @param {String=""} textMsg
*/
sendTextMessage(textMsg = "") {
this.endTyping();
try {
// Dont Send Blank text messages -- i.e --- messages that only contain spaces
if (this.messageText?.trim()?.length == 0 &&
textMsg?.trim()?.length == 0) {
return false;
}
// wait for the previous message to be sent before sending the current message
if (this.messageSending) {
return false;
}
this.messageSending = true;
// If its an Edit and Send Message Operation , use Edit Message Function
if (this.messageToBeEdited) {
this.editMessage();
this.ref.detectChanges();
return false;
}
let { receiverId, receiverType } = this.getReceiverDetails();
let messageInput;
if (textMsg !== null) {
messageInput = textMsg.trim();
}
else {
messageInput = this.messageText.trim();
}
let textMessage = new CometChat.TextMessage(receiverId, messageInput, receiverType);
if (this.parentMessageId) {
textMessage.setParentMessageId(this.parentMessageId);
}
if (this.mentionedUsers.length) {
let userObjects = [];
for (let i = 0; i < this.mentionedUsers.length; i++) {
userObjects.push(this.mentionedUsers[i] instanceof CometChat.GroupMember
? this.mentionedUsers[i]
: this.mentionedUsers[i]);
}
textMessage.setMentionedUsers(userObjects);
this.mentionedUsers = [];
}
textMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
textMessage.setMuid(CometChatUIKitUtility.ID());
if (this.loggedInUser) {
textMessage.setSender(this.loggedInUser);
}
this.showMentionsCountWarning = false;
// play audio after action generation
if (!this.disableSoundForMessages) {
this.playAudio();
}
//clearing Message Input Box
this.clearComposer();
this.messageSending = false;
for (let i = 0; i < this.textFormatterList.length; i++) {
textMessage = this.textFormatterList[i].formatMessageForSending(textMessage);
}
// End Typing Indicator Function
this.closePopovers();
if (!this.onSendButtonClick) {
CometChatMessageEvents.ccMessageSent.next({
message: textMessage,
status: MessageStatus.inprogress,
});
CometChat.sendMessage(textMessage)
.then((message) => {
let messageObject = message;
CometChatMessageEvents.ccMessageSent.next({
message: messageObject,
status: MessageStatus.success,
});
// Change the send button to reaction button
setTimeout(() => {
this.showSendButton = false;
this.ref.detectChanges();
}, 500);
this.mentionsTextFormatterInstance.resetCometChatUserGroupMembers();
})
.catch((error) => {
textMessage.setMetadata({
error: true,
});
CometChatMessageEvents.ccMessageSent.next({
message: textMessage,
status: MessageStatus.error,
});
});
}
else {
this.onSendButtonClick(textMessage, PreviewMessageMode.none);
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
return true;
}
onAiBackButtonClick() {
this.showActionSheetItemAI = true;
this.ref.detectChanges();
}
editMessage() {
try {
const messageToBeEdited = this.messageToBeEdited;
let { receiverId, receiverType } = this.getReceiverDetails();
let messageText = this.messageText.trim();
let mentionedUsers = [];
if (messageToBeEdited.getMentionedUsers()) {
mentionedUsers = messageToBeEdited.getMentionedUsers();
messageText =
this.mentionsTextFormatterInstance.getOriginalText(messageText);
this.mentionsTextFormatterInstance.setCometChatUserGroupMembers(mentionedUsers);
messageText =
this.mentionsTextFormatterInstance.getOriginalText(messageText);
}
let textMessage = new CometChat.TextMessage(receiverId, messageText, receiverType);
if (mentionedUsers.length) {
textMessage.setMentionedUsers(mentionedUsers);
}
textMessage.setId(messageToBeEdited.id);
this.closePreview();
this.endTyping();
this.showMentionsCountWarning = false;
for (let i = 0; i < this.textFormatterList.length; i++) {
textMessage = this.textFormatterList[i].formatMessageForSending(textMessage);
}
if (!this.onSendButtonClick) {
CometChat.editMessage(textMessage)
.then((message) => {
this.messageSending = false;
CometChatMessageEvents.ccMessageEdited.next({
message: message,
status: MessageStatus.success,
});
this.mentionsTextFormatterInstance.resetCometChatUserGroupMembers();
})
.catch((error) => {
this.messageSending = false;
if (this.onError) {
this.onError(error);
}
});
}
else {
this.onSendButtonClick(textMessage, PreviewMessageMode.edit);
this.mentionsTextFormatterInstance.resetCometChatUserGroupMembers();
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
getReceiverDetails() {
let receiverId;
let receiverType;
let isBlocked = false;
if (this.user && this.user.getUid()) {
receiverId = this.user.getUid();
receiverType = CometChatUIKitConstants.MessageReceiverType.user;
isBlocked = this.user.getBlockedByMe() || this.user.getHasBlockedMe();
}
else if (this.group && this.group.getGuid()) {
receiverId = this.group.getGuid();
receiverType = CometChatUIKitConstants.MessageReceiverType.group;
}
return { receiverId: receiverId, receiverType: receiverType, isBlocked };
}
playAudio() {
if (!this.disableSoundForMessages) {
if (this.customSoundForMessage || this.customSoundForMessages) {
CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage, this.customSoundForMessage || this.customSoundForMessages);
}
else {
CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage);
}
}
}
/**
* @param {} timer=null
* @param {string=""} metadata
*/
startTyping(timer = null, metadata = "") {
if (!this.disableTypingEvents) {
try {
let typingInterval = timer || 5000;
let { receiverId, receiverType, isBlocked } = this.getReceiverDetails();
if (isBlocked) {
return;
}
let typingMetadata = metadata || undefined;
let typingNotification = new CometChat.TypingIndicator(receiverId, receiverType, typingMetadata);
CometChat.startTyping(typingNotification);
this.storeTypingInterval = setTimeout(() => {
this.endTyping();
}, typingInterval);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
}
endTyping(metadata = null) {
if (!this.disableTypingEvents) {
try {
let { receiverId, receiverType, isBlocked } = this.getReceiverDetails();
if (isBlocked) {
return;
}
let typingMetadata = metadata || undefined;
let typingNotification = new CometChat.TypingIndicator(receiverId, receiverType, typingMetadata);
CometChat.endTyping(typingNotification);
clearTimeout(this.storeTypingInterval);
this.storeTypingInterval = null;
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
}
/**
* @param {File | CometChat.MediaMessage} messageInput
* @param {string} messageType
*/
sendMediaMessage(messageInput, messageType) {
try {
if (this.messageSending) {
return false;
}
this.messageSending = true;
const { receiverId, receiverType } = this.getReceiverDetails();
let mediaMessage = new CometChat.MediaMessage(receiverId, messageInput, messageType, receiverType);
if (this.parentMessageId) {
mediaMessage.setParentMessageId(this.parentMessageId);
}
mediaMessage.setType(messageType);
mediaMessage.setMetadata({
["file"]: messageInput,
});
mediaMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
mediaMessage.setMuid(CometChatUIKitUtility.ID());
if (this.loggedInUser) {
mediaMessage.setSender(this.loggedInUser);
}
if (!this.disableSoundForMessages) {
this.playAudio();
}
this.messageSending = false;
this.closePopovers();
if (!this.onSendButtonClick) {
CometChatMessageEvents.ccMessageSent.next({
message: mediaMessage,
status: MessageStatus.inprogress,
});
CometChat.sendMessage(mediaMessage)
.then((response) => {
this.messageSending = false;
response.setMuid(mediaMessage.getMuid());
CometChatMessageEvents.ccMessageSent.next({
message: response,
status: MessageStatus.success,
});
})
.catch((error) => {
mediaMessage.setMetadata({
error: true,
});
CometChatMessageEvents.ccMessageSent.next({
message: mediaMessage,
status: MessageStatus.error,
});
this.messageSending = false;
});
}
else {
this.onSendButtonClick(mediaMessage, PreviewMessageMode.none);
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
return true;
}
/**
* @param {any} event
*/
onVideoChange(event) {
try {
if (!event.target.files[0]) {
return false;
}
const uploadedFile = event.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
const newFile = new File([reader.result], uploadedFile.name, uploadedFile);
this.sendMediaMessage(newFile, CometChatUIKitConstants.MessageTypes.video);
}, false);
reader.readAsArrayBuffer(uploadedFile);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
return true;
}
/**
* @param {any} event
*/
onAudioChange(event) {
try {
if (!event.target.files[0]) {
return false;
}
const uploadedFile = event.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
const newFile = new File([reader.result], uploadedFile.name, uploadedFile);
this.sendMediaMessage(newFile, CometChatUIKitConstants.MessageTypes.audio);
}, false);
reader.readAsArrayBuffer(uploadedFile);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
return true;
}
/**
* @param {any} event
*/
onImageChange(event) {
try {
if (!event.target.files[0]) {
return false;
}
const uploadedFile = event.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
const newFile = new File([reader.result], uploadedFile.name, uploadedFile);
this.sendMediaMessage(newFile, CometChatUIKitConstants.MessageTypes.image);
}, false);
reader.readAsArrayBuffer(uploadedFile);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
return true;
}
/**
* @param {any} event
*/
onFileChange(event) {
try {
if (!event.target.files["0"]) {
return false;
}
const uploadedFile = event.target.files["0"];
var reader = new FileReader();
reader.addEventListener("load", () => {
const newFile = new File([reader.result], uploadedFile.name, uploadedFile);
this.sendMediaMessage(newFile, CometChatUIKitConstants.MessageTypes.file);
}, false);
reader.readAsArrayBuffer(uploadedFile);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
return true;
}
handleOutsideClick() {
this.showActionSheetItem = false;
this.showStickerKeyboard = false;
this.showAiFeatures = false;
this.toggleMediaRecorded = false;
this.showEmojiKeyboard = false;
this.ref.detectChanges();
}
closePopovers() {
if (this.showEmojiKeyboard) {
this.emojiButtonRef.nativeElement.click();
this.showEmojiKeyboard = !this.showEmojiKeyboard;
}
if (this.showActionSheetItem) {
this.actionSheetRef.nativeElement.click();
this.showActionSheetItem = !this.showActionSheetItem;
}
}
getComposerId() {
const user = this.user;
if (user !== undefined) {
return {
user: user?.getUid(),
group: null,
parentMessageId: this.parentMessageId,
};
}
const group = this.group;
if (group !== undefined) {
return {
user: null,
group: group?.getGuid(),
parentMessageId: this.parentMessageId,
};
}
return { user: null, group: null, parentMessageId: this.parentMessageId };
}
ngOnInit() {
this.setTheme();
this.textFormatterList = this.textFormatters
? this.textFormatters
: [];
document.addEventListener("click", this.handleClickOutside);
this.mentionsTextFormatterInstance =
ChatConfigurator.getDataSource().getMentionsTextFormatter({
theme: this.themeService.theme,
});
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.initializeMentionsFormatter();
this.actions = ChatConfigurator.getDataSource().getAIOptions(this.themeService.theme, this.getComposerId(), this.aiOptionsStyle);
this.aiBotList = [];
this.subscribeToEvents();
this.enableStickerKeyboard = true;
this.stickerConfiguration =
ChatConfigurator.getDataSource()?.getAuxiliaryOptions(this.composerId, this.user, this.group);
if (this.stickerConfiguration?.id == StickersConstants.sticker) {
this.enableStickerKeyboard = true;
}
else {
this.enableStickerKeyboard = false;
}
this.enableAiFeatures();
}
enableAiFeatures() {
if (this.actions && this.actions.length > 0) {
this.isAiEnabled = true;
this.actions.forEach((action) => {
if (action.id === "ai-smart-reply") {
const newButton = {
...action,
title: action.title,
onClick: this.getSmartReplies,
};
this.buttons.push(newButton);
this.ref.detectChanges();
}
if (action.id === "ai-conversation-summary") {
const newButton = {
...action,
title: action.title,
id: action.id,
onClick: async () => this.callConversationSummaryMethod(),
};
this.buttons.push(newButton);
this.ref.detectChanges();
}
if (action.id === "ai-bots") {
const newButton = {
...action,
title: action.title,
id: action.id,
onClick: async () => this.showAiBotMessageListMethod(action.onClick()),
};
this.buttons.push(newButton);
this.ref.detectChanges();
}
});
}
}
composerWrapperStyle() {
return {
height: this.messageComposerStyle?.height,
width: this.messageComposerStyle?.width,
background: this.messageComposerStyle?.background,
border: this.messageComposerStyle?.border,
borderRadius: this.messageComposerStyle?.borderRadius,
};
}
setTheme() {
this.emojiPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
this.stickerPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
this.mediaRecordedPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
this.aiPopover.background = this.themeService.theme.palette.getBackground();
this.aiPopover.boxShadow = `0px 0px 32px ${this.themeService.theme.palette.getAccent50()}`;
this.setComposerStyle();
this.actionSheetStyle = {
layoutModeIconTint: this.actionSheetStyle.layoutModeIconTint ||
this.themeService.theme.palette.getAccent(),
borderRadius: this.actionSheetStyle?.borderRadius || "inherit",
background: this.actionSheetStyle.background || this.themeService.theme.palette.getBackground(),
border: this.actionSheetStyle.border || "none",
width: this.actionSheetStyle.width || "100%",
height: this.actionSheetStyle.height || "100%",
titleFont: this.actionSheetStyle.titleFont ||
fontHelper(this.themeService.theme.typography.title2),
titleColor: this.actionSheetStyle.titleColor ||
this.themeService.theme.palette.getAccent(),
ActionSheetSeparatorTint: this.actionSheetStyle.ActionSheetSeparatorTint ||
this.themeService.theme.palette.getAccent400(),
listItemBackground: this.actionSheetStyle.listItemBackground || this.themeService.theme.palette.getBackground(),
listItemIconTint: this.actionSheetStyle.listItemIconTint || this.themeService.theme.palette.getAccent700(),
listItemIconBackground: this.actionSheetStyle.listItemIconBackground || 'transparent',
};
this.popoverStyle.background = this.actionSheetStyle.background || this.themeService.theme.palette.getBackground();
this.aiActionSheetStyle = {
layoutModeIconTint: this.aiActionSheetStyle.layoutModeIconTint ||
this.themeService.theme.palette.getAccent(),
borderRadius: "inherit",
background: this.themeService.theme.palette.getBackground(),
border: "none",
width: "100%",
height: "100%",
titleFont: this.aiActionSheetStyle.titleFont ||
fontHelper(this.themeService.theme.typography.title2),
titleColor: this.aiActionSheetStyle.titleColor ||
this.themeService.theme.palette.getAccent(),
ActionSheetSeparatorTint: this.aiActionSheetStyle.ActionSheetSeparatorTint ||
`1px solid ${this.themeService.theme.palette.getAccent400()}`,
};
this.textInputStyle = {
height: "100%",
width: "100%",
maxHeight: this.messageComposerStyle?.maxInputHeight || "100px",
border: this.messageComposerStyle?.inputBorder,
borderRadius: this.messageComposerStyle?.inputBorderRadius,
background: this.messageComposerStyle?.inputBackground,
textFont: this.messageComposerStyle?.textFont,
textColor: this.messageComposerStyle?.textColor,
dividerColor: this.messageComposerStyle?.dividerTint,
};
this.disableSendButton();
this.previewStyle = {
height: "100%",
width: "100%",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
background: this.themeService.theme.palette.getBackground(),
previewTitleFont: this.messageComposerStyle?.previewTitleFont ||
fontHelper(this.themeService.theme.typography.subtitle1),
previewTitleColor: this.messageComposerStyle?.previewTitleColor ||
this.themeService.theme.palette.getAccent400(),
previewSubtitleColor: this.messageComposerStyle?.previewSubtitleColor ||
this.themeService.theme.palette.getAccent400(),
previewSubtitleFont: this.messageComposerStyle?.previewSubtitleFont ||
fontHelper(this.themeService.theme.typography.subtitle2),
closeButtonIconTint: this.messageComposerStyle?.closePreviewTint ||
this.themeService.theme.palette.getAccent600(),
borderRadius: '12px'
};
let buttonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
};
let defaultMediaRecorderStyle = new MediaRecorderStyle({
startIconTint: this.themeService.theme.palette.getError(),
submitIconTint: this.themeService.theme.palette.getAccent600(),
stopIconTint: this.themeService.theme.palette.getError(),
closeIconTint: this.themeService.theme.palette.getAccent600(),
height: "100%",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
timerTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
timerTextColor: this.themeService.theme.palette.getAccent400(),
});
this.mediaRecordedPopover.background =
this.themeService.theme.palette.getBackground();
this.mediaRecorderStyle.border = `1px solid ${this.themeService.theme.palette.getAccent100()}`;
this.mediaRecorderStyle = {
...defaultMediaRecorderStyle,
...this.mediaRecorderStyle,
};
this.emojiPopover.boxShadow = `0px 0px 8px ${this.themeService.theme.palette.getAccent50()}`;
this.stickerPopover.boxShadow = `0px 0px 8px ${this.themeService.theme.palette.getAccent50()}`;
this.mediaRecordedPopover.boxShadow = `0px 0px 8px ${this.themeService.theme.palette.getAccent50()}`;
this.emojiButtonStyle = {
buttonIconTint: this.messageComposerStyle?.emojiIconTint ||
this.themeService.theme.palette.getAccent600(),
...buttonStyle,
};
this.stickerButtonStyle = {
buttonIconTint: this.themeService.theme.palette.getAccent600(),
...buttonStyle,
};
this.mediaRecorderButtonStyle = {
buttonIconTint: this.messageComposerStyle?.voiceRecordingIconTint ||
this.themeService.theme.palette.getAccent600(),
...buttonStyle,
};
this.emojiKeyboardStyle = {
width: "100%",
height: "100%",
border: "none",
textFont: this.messageComposerStyle?.emojiKeyboardTextFont,
textColor: this.messageComposerStyle?.emojiKeyboardTextColor,
background: this.themeService.theme.palette.getBackground(),
borderRadius: "12px",
activeIconTint: this.themeService.theme.palette.getPrimary(),
iconTint: this.themeService.theme.palette.getAccent600()
};
this.stickerKeyboardStyle = {
width: "100%",
height: "100%",
border: "none",
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
borderRadius: "12px",
categoryBackground: this.themeService.theme.palette.getBackground(),
};
this.attachmentButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: this.messageComposerStyle?.attachIcontint ||
this.themeService.theme.palette.getAccent600(),
background: "transparent",
};
this.createPollStyle = {
placeholderTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
placeholderTextColor: this.themeService.theme.palette.getAccent600(),
deleteIconTint: this.themeService.theme.palette.getAccent600(),
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
closeIconTint: this.themeService.theme.palette.getPrimary(),
questionInputBackground: this.themeService.theme.palette.getAccent100(),
optionInputBackground: this.themeService.theme.palette.getAccent100(),
answerHelpTextFont: fontHelper(this.themeService.theme.typography.caption1),
answerHelpTextColor: this.themeService.theme.palette.getAccent400(),
addAnswerIconTint: this.themeService.theme.palette.getPrimary(),
createPollButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
createPollButtonTextColor: this.themeService.theme.palette.getAccent("dark"),
createPollButtonBackground: this.themeService.theme.palette.getPrimary(),
addAnswerTextFont: fontHelper(this.themeService.theme.typography.text2),
addAnswerTextColor: this.themeService.theme.palette.getPrimary(),
errorTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
errorTextColor: this.themeService.theme.palette.getError(),
optionPlaceholderTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
optionPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
questionInputTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
questionInputTextColor: this.themeService.theme.palette.getAccent600(),
optionInputTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
optionInputTextColor: this.themeService.theme.palette.getAccent600(),
width: "360px",
height: "620px",
border: "",
borderRadius: "8px",
background: this.themeService.theme.palette.getAccent900(),
};
}
setComposerStyle() {
let defaultStyle = new MessageComposerStyle({
background: this.themeService.theme.palette.getBackground(),
border: `none`,
height: "100%",
width: "100%",
borderRadius: "0",
liveReactionIconTint: "red",
attachIcontint: this.themeService.theme.palette.getAccent500(),
sendIconTint: this.themeService.theme.palette.getPrimary(),
emojiIconTint: this.themeService.theme.palette.getAccent500(),
inputBackground: this.themeService.theme.palette.getAccent100(),
inputBorder: "none",
inputBorderRadius: "12px",
dividerTint: this.themeService.theme.palette.getAccent200(),
textFont: fontHelper(this.themeService.theme.typography.subtitle1),
textColor: this.themeService.theme.palette.getAccent(),
emojiKeyboardTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
emojiKeyboardTextColor: this.themeService.theme.palette.getAccent400(),
previewTitleFont: fontHelper(this.themeService.theme.typography.subtitle1),
previewTitleColor: this.themeService.theme.palette.getAccent(),
previewSubtitleFont: fontHelper(this.themeService.theme.typography.subtitle2),
previewSubtitleColor: this.themeService.theme.palette.getAccent600(),
closePreviewTint: this.themeService.theme.palette.getAccent500(),
maxInputHeight: "100px",
});
this.messageComposerStyle = {
...defaultStyle,
...this.messageComposerStyle,
};
if (!this.hideLiveReaction) {
this.liveReactionStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
buttonIconTint: this.messageComposerStyle?.liveReactionIconTint,
background: "transparent",
display: "flex",
justifyContent: "center",
alignItems: "center",
};
}
}
closePreview() {
this.showSendButton = false;
this.showListForMentions = false;
this.showMentionsCountWarning = false;
this.showPreview = false;
this.editPreviewText = "";
this.messageToBeEdited = null;
this.clearComposer();
this.disableSendButton();
this.ref.detectChanges();
}
}
CometChatMessageComposerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatMessageComposerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: { user: "user", group: "group", disableSoundForMessages: "disableSoundForMessages", customSoundForMessage: "customSoundForMessage", customSoundForMessages: "customSoundForMessages", disableTypingEvents: "disableTypingEvents", text: "text", placeholderText: "placeholderText", headerView: "headerView", onTextChange: "onTextChange", attachmentIconURL: "attachmentIconURL", attachmentOptions: "attachmentOptions", secondaryButtonView: "secondaryButtonView", auxilaryButtonView: "auxilaryButtonView", auxiliaryButtonsAlignment: "auxiliaryButtonsAlignment", sendButtonView: "sendButtonView", parentMessageId: "parentMessageId", hideLiveReaction: "hideLiveReaction", LiveReactionIconURL: "LiveReactionIconURL", backButtonIconURL: "backButtonIconURL", mentionsWarningText: "mentionsWarningText", mentionsWarningStyle: "mentionsWarningStyle", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", actionSheetStyle: "actionSheetStyle", aiActionSheetStyle: "aiActionSheetStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", aiOptionsStyle: "aiOptionsStyle", aiIconURL: "aiIconURL", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL", hideLayoutMode: "hideLayoutMode", emojiIconURL: "emojiIconURL", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters", sendButtonIconURL: "sendButtonIconURL" }, outputs: { childEvent: "childEvent" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "emojiButtonRef", first: true, predicate: ["emojiButtonRef"], descendants: true }, { propertyName: "actionSheetRef", first: true, predicate: ["actionSheetRef"], descendants: true }, { propertyName: "stickerButtonRef", first: true, predicate: ["stickerButtonRef"], descendants: true }, { propertyName: "mediaRecordedRef", first: true, predicate: ["mediaRecordedRef"], descendants: true }, { propertyName: "aiButtonRef", first: true, predicate: ["aiButtonRef"], descendants: true }, { propertyName: "userMemberWrapperRef", first: true, predicate: ["userMemberWrapperRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n <div class=\"cc-messagecomposer__mentions\" *ngIf=\"showListForMentions\"\n #userMemberWrapperRef>\n <cometchat-user-member-wrapper [userMemberListType]=\"userMemberListType\"\n [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n [usersRequestBuilder]=\"usersRequestBuilder\"\n [searchKeyword]=\"mentionsSearchTerm\"\n [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n [onEmpty]=\"defaultOnEmptyForMentions\"\n [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n [disableLoadingState]=\"true\"\n [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n <div *ngIf=\"showMentionsCountWarning\"\n class=\"cc-messagecomposer__mentions-limit-exceeded\">\n <cometchat-icon-button\n [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n [iconURL]=\"InfoSimpleIcon\"\n [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n </div>\n\n </div>\n <div class=\"cc-message-composer__header-view\"\n *ngIf=\"headerView; else messagePreview\">\n <ng-container\n *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n </ng-container>\n </div>\n <ng-template #messagePreview>\n <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n <cometchat-preview [previewStyle]=\"previewStyle\"\n [previewSubtitle]=\"editPreviewText\"\n (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n </div>\n </ng-template>\n <div class=\"cc-message-composer__input\">\n\n <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n #inputRef [text]=\"text\"\n (cc-text-input-changed)=\"messageInputChanged($event)\"\n [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n [textFormatters]=\"textFormatters\">\n\n <div data-slot=\"secondaryView\">\n <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n <ng-container\n *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n </ng-container>\n </div>\n <ng-template #secondaryButton>\n <div class=\"cc-message-composer__attachbutton\">\n <cometchat-popover\n (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n <cometchat-action-sheet slot=\"content\"\n [title]=\"localize('ADD_TO_CHAT')\" [actions]=\"composerActions\"\n [actionSheetStyle]=\"actionSheetStyle\"\n (cc-actionsheet-clicked)=\"handleActions($event)\"\n [hideLayoutMode]=\"hideLayoutMode\"\n >\n </cometchat-action-sheet>\n <cometchat-button #actionSheetRef slot=\"children\"\n (cc-button-clicked)=\"openActionSheet($event)\"\n [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem) ? attachmentIconURL : closeButtonIconURL\"\n [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n </cometchat-popover>\n </div>\n </ng-template>\n </div>\n\n <div class=\"cc-message-composer__auxiliary\" data-slot=\"auxilaryView\">\n <div class=\"cc-message-composer__custom-auxiliary-view\"\n *ngIf=\"auxilaryButtonView\">\n <ng-container\n *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n </ng-container>\n </div>\n <!-- AI Cards -->\n <div class=\"cc-message-composer__stickerkeyboard\"\n *ngIf=\"!auxilaryButtonView\">\n <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n <cometchat-ai-card [state]=\"smartReplyState\"\n *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n slot=\"content\" [loadingStateText]=\"loadingStateText\"\n [emptyStateText]=\"emptyStateText\"\n [errorStateText]=\"errorStateText\">\n <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n <div class=\"cc-message-composer__smartreply-header\">\n <div class=\"cc-message-composer__back-button\">\n <cometchat-button\n *ngIf=\"repliesArray && repliesArray.length > 0 \"\n [iconURL]=\"backButtonIconURL\"\n (cc-button-clicked)=\"onAiBackButtonClick()\"\n [buttonStyle]=\"backButtonStyle()\">\n </cometchat-button>\n </div>\n <div class=\"cc-message-composer__smartreply-header-view\">\n <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n </div>\n </div>\n\n <div class=\"cc-message-composer__smartreply-content\">\n <smart-replies\n *ngIf=\"repliesArray && repliesArray.length > 0 \"\n [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n </smart-replies>\n </div>\n\n\n\n\n\n </div>\n </cometchat-ai-card>\n\n <div *ngIf=\"showAiBotList && !showActionSheetItemAI\"\n slot=\"content\">\n <div class=\"cc-message-composer__aibotlist\">\n <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n [iconURL]=\"backButtonIconURL\"\n (cc-button-clicked)=\"onAiBackButtonClick()\"\n [buttonStyle]=\"backButtonStyle()\">\n </cometchat-button>\n <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n </div>\n <cometchat-action-sheet\n *ngIf=\"showAiBotList && !showActionSheetItemAI\" slot=\"content\"\n [actions]=\"aiActionButtons\" [title]=\"localize('AI')\"\n [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n (cc-actionsheet-clicked)=\"handleActions($event)\">\n </cometchat-action-sheet>\n </div>\n\n <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n [actions]=\"buttons\" [title]=\"localize('AI')\"\n [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n (cc-actionsheet-clicked)=\"handleActions($event)\">\n </cometchat-action-sheet>\n\n <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n slot=\"children\" #aiButtonRef\n (cc-button-clicked)=\"openAiFeatures($event)\"\n [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n </cometchat-popover>\n </div>\n\n <div class=\"cc-message-composer__stickerkeyboard\"\n *ngIf=\"enableStickerKeyboard && !auxilaryButtonView\">\n <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n <stickers-keyboard slot=\"content\"\n [stickerStyle]=\"stickerKeyboardStyle\"\n (cc-sticker-clicked)=\"sendSticker($event)\">\n </stickers-keyboard>\n <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n #stickerButtonRef\n (cc-button-clicked)=\"openStickerKeyboard($event)\"\n [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n </cometchat-popover>\n </div>\n <div class=\"cc-message-composer__emojikeyboard\"\n *ngIf=\"!auxilaryButtonView\">\n <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n <cometchat-emoji-keyboard slot=\"content\"\n [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n (cc-emoji-clicked)=\"appendEmoji($event)\">\n </cometchat-emoji-keyboard>\n <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n [iconURL]=\" !showEmojiKeyboard || (!showEmojiKeyboard && showActionSheetItem) ? emojiIconURL : closeButtonIconURL\"\n [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n </cometchat-popover>\n </div>\n <div class=\"cc-message-composer__mediarecorder\"\n *ngIf=\"!hideVoiceRecording\">\n <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n [popoverStyle]=\"mediaRecordedPopover\"\n [placement]=\"auxilaryPlacement\">\n\n <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n submitButtonIconText=\"\"\n [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n [startIconURL]=\"voiceRecordingStartIconURL\"\n [stopIconURL]=\"voiceRecordingStopIconURL\"\n [closeIconURL]=\"voiceRecordingCloseIconURL\"\n (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n slot=\"content\"\n [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n slot=\"children\" #mediaRecordedRef\n (cc-button-clicked)=\"openMediaRecorded($event)\"\n [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n </cometchat-popover>\n </div>\n </div>\n <div data-slot=\"primaryView\">\n <div *ngIf=\"sendButtonView;else sendButton\">\n <ng-container\n *ngTemplateOutlet=\"sendButtonView;context:{ item: user ?? group, composerId:composerId }\">\n </ng-container>\n </div>\n <ng-template #sendButton>\n <div class=\"cc-message-composer__sendbutton\"\n *ngIf=\"showSendButton || hideLiveReaction\">\n <cometchat-button [iconURL]=\"sendButtonIconURL\"\n [buttonStyle]=\"sendButtonStyle\"\n [hoverText]=\"localize('SEND_MESSAGE')\"\n [disabled]=\"!showSendButton\"\n (cc-button-clicked)=\"customSendMethod(messageText)\">\n </cometchat-button>\n </div>\n <div class=\"cc-message-composer__livereaction\"\n *ngIf=\"!hideLiveReaction && !showSendButton\">\n <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n [hoverText]=\"localize('LIVE_REACTION')\"\n [buttonStyle]=\"liveReactionStyle\"\n (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n </div>\n </ng-template>\n </div>\n </cometchat-text-input>\n </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n <create-poll [user]=\"user\" [group]=\"group\"\n (cc-close-clicked)=\"closeCreatePolls()\"\n [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"], components: [{ type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: ["userMemberListType", "onItemClick", "listItemView", "avatarStyle", "statusIndicatorStyle", "searchKeyword", "group", "subtitleView", "usersRequestBuilder", "disableUsersPresence", "userPresencePlacement", "hideSeperator", "loadingStateView", "onEmpty", "onError", "groupMemberRequestBuilder", "loadingIconUrl", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposerComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-message-composer", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n <div class=\"cc-messagecomposer__mentions\" *ngIf=\"showListForMentions\"\n #userMemberWrapperRef>\n <cometchat-user-member-wrapper [userMemberListType]=\"userMemberListType\"\n [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n [usersRequestBuilder]=\"usersRequestBuilder\"\n [searchKeyword]=\"mentionsSearchTerm\"\n [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n [onEmpty]=\"defaultOnEmptyForMentions\"\n [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n [disableLoadingState]=\"true\"\n [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n <div *ngIf=\"showMentionsCountWarning\"\n class=\"cc-messagecomposer__mentions-limit-exceeded\">\n <cometchat-icon-button\n [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n [iconURL]=\"InfoSimpleIcon\"\n [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n </div>\n\n </div>\n <div class=\"cc-message-composer__header-view\"\n *ngIf=\"headerView; else messagePreview\">\n <ng-container\n *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n </ng-container>\n </div>\n <ng-template #messagePreview>\n <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n <cometchat-preview [previewStyle]=\"previewStyle\"\n [previewSubtitle]=\"editPreviewText\"\n (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n </div>\n </ng-template>\n <div class=\"cc-message-composer__input\">\n\n <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n #inputRef [text]=\"text\"\n (cc-text-input-changed)=\"messageInputChanged($event)\"\n [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n [textFormatters]=\"textFormatters\">\n\n <div data-slot=\"secondaryView\">\n <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n <ng-container\n *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n </ng-container>\n </div>\n <ng-template #secondaryButton>\n <div class=\"cc-message-composer__attachbutton\">\n <cometchat-popover\n (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n <cometchat-action-sheet slot=\"content\"\n [title]=\"localize('ADD_TO_CHAT')\" [actions]=\"composerActions\"\n [actionSheetStyle]=\"actionSheetStyle\"\n (cc-actionsheet-clicked)=\"handleActions($event)\"\n [hideLayoutMode]=\"hideLayoutMode\"\n >\n </cometchat-action-sheet>\n <cometchat-button #actionSheetRef slot=\"children\"\n (cc-button-clicked)=\"openActionSheet($event)\"\n [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem) ? attachmentIconURL : closeButtonIconURL\"\n [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n </cometchat-popover>\n </div>\n </ng-template>\n </div>\n\n <div class=\"cc-message-composer__auxiliary\" data-slot=\"auxilaryView\">\n <div class=\"cc-message-composer__custom-auxiliary-view\"\n *ngIf=\"auxilaryButtonView\">\n <ng-container\n *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n </ng-container>\n </div>\n <!-- AI Cards -->\n <div class=\"cc-message-composer__stickerkeyboard\"\n *ngIf=\"!auxilaryButtonView\">\n <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n <cometchat-ai-card [state]=\"smartReplyState\"\n *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n slot=\"content\" [loadingStateText]=\"loadingStateText\"\n [emptyStateText]=\"emptyStateText\"\n [errorStateText]=\"errorStateText\">\n <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n <div class=\"cc-message-composer__smartreply-header\">\n <div class=\"cc-message-composer__back-button\">\n <cometchat-button\n *ngIf=\"repliesArray && repliesArray.length > 0 \"\n [iconURL]=\"backButtonIconURL\"\n (cc-button-clicked)=\"onAiBackButtonClick()\"\n [buttonStyle]=\"backButtonStyle()\">\n </cometchat-button>\n </div>\n <div class=\"cc-message-composer__smartreply-header-view\">\n <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n </div>\n </div>\n\n <div class=\"cc-message-composer__smartreply-content\">\n <smart-replies\n *ngIf=\"repliesArray && repliesArray.length > 0 \"\n [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n </smart-replies>\n </div>\n\n\n\n\n\n </div>\n </cometchat-ai-card>\n\n <div *ngIf=\"showAiBotList && !showActionSheetItemAI\"\n slot=\"content\">\n <div class=\"cc-message-composer__aibotlist\">\n <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n [iconURL]=\"backButtonIconURL\"\n (cc-button-clicked)=\"onAiBackButtonClick()\"\n [buttonStyle]=\"backButtonStyle()\">\n </cometchat-button>\n <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n </div>\n <cometchat-action-sheet\n *ngIf=\"showAiBotList && !showActionSheetItemAI\" slot=\"content\"\n [actions]=\"aiActionButtons\" [title]=\"localize('AI')\"\n [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n (cc-actionsheet-clicked)=\"handleActions($event)\">\n </cometchat-action-sheet>\n </div>\n\n <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n [actions]=\"buttons\" [title]=\"localize('AI')\"\n [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n (cc-actionsheet-clicked)=\"handleActions($event)\">\n </cometchat-action-sheet>\n\n <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n slot=\"children\" #aiButtonRef\n (cc-button-clicked)=\"openAiFeatures($event)\"\n [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n </cometchat-popover>\n </div>\n\n <div class=\"cc-message-composer__stickerkeyboard\"\n *ngIf=\"enableStickerKeyboard && !auxilaryButtonView\">\n <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n <stickers-keyboard slot=\"content\"\n [stickerStyle]=\"stickerKeyboardStyle\"\n (cc-sticker-clicked)=\"sendSticker($event)\">\n </stickers-keyboard>\n <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n #stickerButtonRef\n (cc-button-clicked)=\"openStickerKeyboard($event)\"\n [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n </cometchat-popover>\n </div>\n <div class=\"cc-message-composer__emojikeyboard\"\n *ngIf=\"!auxilaryButtonView\">\n <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n <cometchat-emoji-keyboard slot=\"content\"\n [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n (cc-emoji-clicked)=\"appendEmoji($event)\">\n </cometchat-emoji-keyboard>\n <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n [iconURL]=\" !showEmojiKeyboard || (!showEmojiKeyboard && showActionSheetItem) ? emojiIconURL : closeButtonIconURL\"\n [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n </cometchat-popover>\n </div>\n <div class=\"cc-message-composer__mediarecorder\"\n *ngIf=\"!hideVoiceRecording\">\n <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n [popoverStyle]=\"mediaRecordedPopover\"\n [placement]=\"auxilaryPlacement\">\n\n <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n submitButtonIconText=\"\"\n [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n [startIconURL]=\"voiceRecordingStartIconURL\"\n [stopIconURL]=\"voiceRecordingStopIconURL\"\n [closeIconURL]=\"voiceRecordingCloseIconURL\"\n (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n slot=\"content\"\n [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n slot=\"children\" #mediaRecordedRef\n (cc-button-clicked)=\"openMediaRecorded($event)\"\n [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n </cometchat-popover>\n </div>\n </div>\n <div data-slot=\"primaryView\">\n <div *ngIf=\"sendButtonView;else sendButton\">\n <ng-container\n *ngTemplateOutlet=\"sendButtonView;context:{ item: user ?? group, composerId:composerId }\">\n </ng-container>\n </div>\n <ng-template #sendButton>\n <div class=\"cc-message-composer__sendbutton\"\n *ngIf=\"showSendButton || hideLiveReaction\">\n <cometchat-button [iconURL]=\"sendButtonIconURL\"\n [buttonStyle]=\"sendButtonStyle\"\n [hoverText]=\"localize('SEND_MESSAGE')\"\n [disabled]=\"!showSendButton\"\n (cc-button-clicked)=\"customSendMethod(messageText)\">\n </cometchat-button>\n </div>\n <div class=\"cc-message-composer__livereaction\"\n *ngIf=\"!hideLiveReaction && !showSendButton\">\n <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n [hoverText]=\"localize('LIVE_REACTION')\"\n [buttonStyle]=\"liveReactionStyle\"\n (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n </div>\n </ng-template>\n </div>\n </cometchat-text-input>\n </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n <create-poll [user]=\"user\" [group]=\"group\"\n (cc-close-clicked)=\"closeCreatePolls()\"\n [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { inputElementRef: [{
type: ViewChild,
args: ["inputElement", { static: false }]
}], inputRef: [{
type: ViewChild,
args: ["inputRef", { static: false }]
}], emojiButtonRef: [{
type: ViewChild,
args: ["emojiButtonRef", { static: false }]
}], actionSheetRef: [{
type: ViewChild,
args: ["actionSheetRef", { static: false }]
}], stickerButtonRef: [{
type: ViewChild,
args: ["stickerButtonRef", { static: false }]
}], mediaRecordedRef: [{
type: ViewChild,
args: ["mediaRecordedRef", { static: false }]
}], aiButtonRef: [{
type: ViewChild,
args: ["aiButtonRef", { static: false }]
}], userMemberWrapperRef: [{
type: ViewChild,
args: ["userMemberWrapperRef", { static: false }]
}], user: [{
type: Input
}], group: [{
type: Input
}], disableSoundForMessages: [{
type: Input
}], customSoundForMessage: [{
type: Input
}], customSoundForMessages: [{
type: Input
}], disableTypingEvents: [{
type: Input
}], text: [{
type: Input
}], placeholderText: [{
type: Input
}], headerView: [{
type: Input
}], onTextChange: [{
type: Input
}], attachmentIconURL: [{
type: Input
}], attachmentOptions: [{
type: Input
}], secondaryButtonView: [{
type: Input
}], auxilaryButtonView: [{
type: Input
}], auxiliaryButtonsAlignment: [{
type: Input
}], sendButtonView: [{
type: Input
}], parentMessageId: [{
type: Input
}], hideLiveReaction: [{
type: Input
}], LiveReactionIconURL: [{
type: Input
}], backButtonIconURL: [{
type: Input
}], mentionsWarningText: [{
type: Input
}], mentionsWarningStyle: [{
type: Input
}], messageComposerStyle: [{
type: Input
}], onSendButtonClick: [{
type: Input
}], onError: [{
type: Input
}], backdropStyle: [{
type: Input
}], actionSheetStyle: [{
type: Input
}], aiActionSheetStyle: [{
type: Input
}], hideVoiceRecording: [{
type: Input
}], mediaRecorderStyle: [{
type: Input
}], aiOptionsStyle: [{
type: Input
}], aiIconURL: [{
type: Input
}], voiceRecordingIconURL: [{
type: Input
}], voiceRecordingCloseIconURL: [{
type: Input
}], voiceRecordingStartIconURL: [{
type: Input
}], voiceRecordingStopIconURL: [{
type: Input
}], voiceRecordingSubmitIconURL: [{
type: Input
}], hideLayoutMode: [{
type: Input
}], emojiIconURL: [{
type: Input
}], childEvent: [{
type: Output
}], userMemberWrapperConfiguration: [{
type: Input
}], disableMentions: [{
type: Input
}], textFormatters: [{
type: Input
}], sendButtonIconURL: [{
type: Input
}] } });
/**
*
* CometChatThreadedMessagesComponent is a wrapper component for messageList, messageBubble, messageComposer component.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatThreadedMessagesComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.title = localize("THREAD");
this.closeIconURL = "assets/close2x.svg";
this.messageListConfiguration = new MessageListConfiguration({});
this.userMemberWrapperConfiguration = new UserMemberWrapperConfiguration({});
this.messageComposerConfiguration = new MessageComposerConfiguration({});
this.threadedMessagesStyle = {
width: "100%",
height: "100%",
background: this.themeService.theme.palette.getBackground(),
borderRadius: "none",
border: "none",
titleColor: this.themeService.theme.palette.getAccent(),
titleFont: fontHelper(this.themeService.theme.typography.title1),
closeIconTint: this.themeService.theme.palette.getPrimary()
};
this.hideMessageComposer = false;
this.disableSoundForMessages = false;
this.limit = 30;
this.composerStyles = {
width: "100%",
height: "100%",
border: "none",
borderRadius: "12px",
background: this.themeService.theme.palette.getAccent900(),
inputBackground: this.themeService.theme.palette.getSecondary(),
textFont: fontHelper(this.themeService.theme.typography.subtitle1),
textColor: this.themeService.theme.palette.getAccent(), // done
};
this.avatarStyle = {
borderRadius: "16px",
width: "28px",
height: "28px",
border: "none",
backgroundColor: "white",
nameTextColor: "rgb(20,20,20)",
backgroundSize: "cover",
nameTextFont: "500 16px Inter",
outerViewBorderSpacing: "",
};
this.statusIndicatorStyle = {
borderRadius: "16px",
width: "10px",
height: "10px",
border: "none",
};
this.listItemStyle = {
background: "white",
titleColor: "black",
titleFont: "500 16px Inter",
width: "",
height: "100%",
border: "none",
borderRadius: "2px",
separatorColor: "",
activeBackground: "transparent",
hoverBackground: "transparent"
};
this.actionButtonStyle = {
height: "100%",
width: "100%",
border: "none",
borderTop: "1px solid #e1e1e1",
borderBottom: "1px solid #e1e1e1",
borderRadius: "0",
background: "transparent",
buttonTextFont: "500 15px Inter",
buttonTextColor: "black",
padding: "8px"
};
this.buttonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: "#7dbfff"
};
this.titleStyle = {
textFont: "700 22px Inter",
textColor: "black",
background: "transparent",
};
}
ngOnInit() {
this.requestBuilder = new CometChat.MessagesRequestBuilder()
.setCategories(ChatConfigurator.getDataSource().getAllMessageCategories())
.setTypes(ChatConfigurator.getDataSource().getAllMessageTypes())
.hideReplies(true)
.setLimit(this.limit)
.setParentMessageId(this.parentMessage.getId());
this.addMessageEventListeners();
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
if (this.parentMessage?.getSender().getUid() === this.loggedInUser?.getUid()) {
if (this.parentMessage?.getReceiverType() === CometChat.RECEIVER_TYPE.USER) {
this.user = this.parentMessage.getReceiver();
}
else {
this.group = this.parentMessage.getReceiver();
}
this.ref.detectChanges();
}
else if (this.parentMessage?.getReceiverType() === CometChat.RECEIVER_TYPE.USER) {
this.user = this.parentMessage?.getSender();
this.ref.detectChanges();
}
else if (this.parentMessage?.getReceiverType() === CometChat.RECEIVER_TYPE.GROUP) {
this.group = this.parentMessage?.getReceiver();
this.ref.detectChanges();
}
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.setTheme();
this.subscribeToEvents();
}
ngOnChanges(change) {
}
ngOnDestroy() {
this.unsubscribeToEvents();
try {
//Removing Message Listeners
this.onMessagesDelivered?.unsubscribe();
this.onMessagesRead?.unsubscribe();
this.onMessageDeleted?.unsubscribe();
this.onMessageEdited?.unsubscribe();
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
updateMessage(message) {
if (this.parentMessage?.getId() == message.getId()) {
this.parentMessage = message;
this.ref.detectChanges();
}
}
updateReceipt(messageReceipt) {
if (Number(messageReceipt?.getMessageId()) == this.parentMessage?.getId()) {
if (messageReceipt.getReadAt()) {
this.parentMessage.setReadAt(messageReceipt.getReadAt());
}
else if (messageReceipt.getDeliveredAt()) {
this.parentMessage.setDeliveredAt(messageReceipt.getDeliveredAt());
}
this.ref.detectChanges();
}
}
addMessageEventListeners() {
try {
this.onMessagesDelivered = CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
this.updateReceipt(messageReceipt);
}
});
this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
this.updateReceipt(messageReceipt);
}
});
this.onMessagesReadByAll = CometChatMessageEvents.onMessagesReadByAll.subscribe((messageReceipt) => {
this.updateReceipt(messageReceipt);
});
this.onMessagesDeliveredToAll = CometChatMessageEvents.onMessagesDeliveredToAll.subscribe((messageReceipt) => {
this.updateReceipt(messageReceipt);
});
this.onMessageDeleted = CometChatMessageEvents.onMessageDeleted.subscribe((deletedMessage) => {
this.updateMessage(deletedMessage);
});
this.onMessageEdited = CometChatMessageEvents.onMessageEdited.subscribe((editedMessage) => {
this.updateMessage(editedMessage);
});
this.onTextMessageReceived =
CometChatMessageEvents.onTextMessageReceived.subscribe((message) => {
if (message.getParentMessageId() && message.getParentMessageId() == this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
this.onMediaMessageReceived =
CometChatMessageEvents.onMediaMessageReceived.subscribe((message) => {
if (message.getParentMessageId() && message.getParentMessageId() == this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
this.onCustomMessageReceived =
CometChatMessageEvents.onCustomMessageReceived.subscribe((message) => {
if (message.getParentMessageId() && message.getParentMessageId() == this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
this.onFormMessageReceived =
CometChatMessageEvents.onFormMessageReceived.subscribe((message) => {
if (message.getParentMessageId() && message.getParentMessageId() == this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
this.onSchedulerMessageReceived =
CometChatMessageEvents.onSchedulerMessageReceived.subscribe((message) => {
if (message.getParentMessageId() && message.getParentMessageId() == this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
this.onCardMessageReceived =
CometChatMessageEvents.onCardMessageReceived.subscribe((message) => {
if (message.getParentMessageId() && message.getParentMessageId() == this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
this.onCustomInteractiveMessageReceived =
CometChatMessageEvents.onCustomInteractiveMessageReceived.subscribe((message) => {
if (message.getParentMessageId() && message.getParentMessageId() == this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
getThreadCount() {
const replyCount = this.parentMessage?.getReplyCount() || 0;
const suffix = replyCount === 1 ? localize("REPLY") : localize("REPLIES");
return `${replyCount} ${suffix}`;
}
subscribeToEvents() {
this.ccMessageSent = CometChatMessageEvents.ccMessageSent.subscribe(({ status, message }) => {
if (status === MessageStatus.success && message?.getParentMessageId() === this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
this.ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(({ status, message }) => {
if (status === MessageStatus.success && message?.getId() === this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
this.ccMessageDeleted = CometChatMessageEvents.ccMessageDeleted.subscribe((message) => {
if (message?.getId() === this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
this.ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe((message) => {
if (message?.getId() === this.parentMessage?.getId()) {
this.ref.detectChanges();
}
});
}
unsubscribeToEvents() {
this.ccMessageDeleted?.unsubscribe();
this.ccMessageEdited?.unsubscribe();
this.ccMessageRead?.unsubscribe();
this.ccMessageSent?.unsubscribe();
this.onCardMessageReceived?.unsubscribe();
this.onFormMessageReceived?.unsubscribe();
this.onSchedulerMessageReceived?.unsubscribe();
this.onTextMessageReceived?.unsubscribe();
this.onCustomInteractiveMessageReceived?.unsubscribe();
this.onCustomMessageReceived?.unsubscribe();
this.onMediaMessageReceived?.unsubscribe();
this.onMessagesReadByAll?.unsubscribe();
this.onMessagesDeliveredToAll?.unsubscribe();
}
closeView() {
if (this.onClose) {
this.onClose();
}
}
setThreadedMessagesStyle() {
let defaultStyle = new ThreadedMessagesStyle({
width: "100%",
height: "100%",
background: this.themeService.theme.palette.getBackground(),
borderRadius: "none",
border: "none",
titleColor: this.themeService.theme.palette.getAccent(),
titleFont: fontHelper(this.themeService.theme.typography.title1),
closeIconTint: this.themeService.theme.palette.getPrimary()
});
this.threadedMessagesStyle = {
...defaultStyle,
...this.threadedMessagesStyle
};
}
setTheme() {
this.setThreadedMessagesStyle();
this.buttonStyle.buttonIconTint = this.threadedMessagesStyle.closeIconTint || this.themeService.theme.palette.getPrimary();
this.actionButtonStyle.background = this.themeService.theme.palette.getBackground();
this.actionButtonStyle.buttonTextFont = fontHelper(this.themeService.theme.typography.subtitle1);
this.actionButtonStyle.buttonTextColor = this.themeService.theme.palette.getAccent600();
this.titleStyle = {
textFont: this.threadedMessagesStyle.titleFont || fontHelper(this.themeService.theme.typography.title1),
textColor: this.threadedMessagesStyle.titleColor || this.themeService.theme.palette.getAccent(),
background: "transparent"
};
this.ref.detectChanges();
}
wrapperStyle() {
return {
background: this.threadedMessagesStyle.background || this.themeService.theme.palette.getBackground(),
height: this.threadedMessagesStyle.height,
width: this.threadedMessagesStyle.width,
border: this.threadedMessagesStyle.border,
borderRadius: this.threadedMessagesStyle.borderRadius
};
}
}
CometChatThreadedMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle", hideMessageComposer: "hideMessageComposer", messageComposerView: "messageComposerView", messageListView: "messageListView", disableSoundForMessages: "disableSoundForMessages" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-threaded-messages__header\">\n <div class=\"cc-threaded-messages__title\">\n <cometchat-label [text]=\"title\"\n [labelStyle]=\"titleStyle\"></cometchat-label>\n </div>\n <div class=\"cc-threaded-messages__close\">\n <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n (cc-button-clicked)=\"closeView()\"></cometchat-button>\n </div>\n </div>\n <div class=\"cc-threaded-messages__bubble-view\">\n <ng-container\n *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n </ng-container>\n </div>\n <div class=\"cc-threaded-messages__action-view\">\n <ng-container\n *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n </div>\n <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n <cometchat-message-list #messageListRef\n [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n [parentMessageId]=\"parentMessage?.getId()\"\n [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n [user]=\"user\" [group]=\"group\"\n [errorStateView]=\"messageListConfiguration.errorStateView\"\n [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n [readIcon]=\"messageListConfiguration.readIcon\"\n [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n [sentIcon]=\"messageListConfiguration.sentIcon\"\n [waitIcon]=\"messageListConfiguration.waitIcon\"\n [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n [errorIcon]=\"messageListConfiguration.errorIcon\"\n [alignment]=\"messageListConfiguration.alignment\"\n [showAvatar]=\"messageListConfiguration.showAvatar\"\n [datePattern]=\"messageListConfiguration.datePattern\"\n [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n [templates]=\"messageListConfiguration.templates\"\n [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n [headerView]=\"messageListConfiguration.headerView\"\n [footerView]=\"messageListConfiguration.footerView\"\n [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\"\n [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n [onError]=\"messageListConfiguration.onError\"\n [hideError]=\"messageListConfiguration.hideError\"\n [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n [disableSoundForMessages]=\"disableSoundForMessages\"\n [disableMentions]=\"messageListConfiguration.disableMentions\"\n [textFormatters]=\"messageListConfiguration?.textFormatters\">\n </cometchat-message-list>\n </div>\n <ng-container *ngIf=\"messageListView\">\n <ng-container\n *ngTemplateOutlet=\"messageListView;context:{ user: user, group: group,parentMessage:parentMessage }\">\n </ng-container>\n </ng-container>\n <div class=\"cc-threaded-messages__composer\"\n *ngIf=\"!hideMessageComposer && !messageComposerView\">\n <cometchat-message-composer #messageComposerRef\n [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n [text]=\"messageComposerConfiguration.text\"\n [headerView]=\"messageComposerConfiguration.headerView\"\n [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n [onError]=\"messageComposerConfiguration.onError\"\n [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n [disableSoundForMessages]=\"disableSoundForMessages\"\n >\n </cometchat-message-composer>\n </div>\n <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n <ng-container\n *ngTemplateOutlet=\"messageComposerView;context:{ user: user, group: group,parentMessage:parentMessage }\">\n </ng-container>\n </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow:hidden}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%;max-height:15em;overflow:auto;min-height:60px}.cc-threaded-messages__action-view{height:36px}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex-grow:1;overflow:hidden;height:100%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"], components: [{ type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "hideReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "customSoundForMessages", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters", "sendButtonIconURL"], outputs: ["childEvent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-threaded-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-threaded-messages__header\">\n <div class=\"cc-threaded-messages__title\">\n <cometchat-label [text]=\"title\"\n [labelStyle]=\"titleStyle\"></cometchat-label>\n </div>\n <div class=\"cc-threaded-messages__close\">\n <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n (cc-button-clicked)=\"closeView()\"></cometchat-button>\n </div>\n </div>\n <div class=\"cc-threaded-messages__bubble-view\">\n <ng-container\n *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n </ng-container>\n </div>\n <div class=\"cc-threaded-messages__action-view\">\n <ng-container\n *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n </div>\n <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n <cometchat-message-list #messageListRef\n [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n [parentMessageId]=\"parentMessage?.getId()\"\n [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n [user]=\"user\" [group]=\"group\"\n [errorStateView]=\"messageListConfiguration.errorStateView\"\n [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n [readIcon]=\"messageListConfiguration.readIcon\"\n [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n [sentIcon]=\"messageListConfiguration.sentIcon\"\n [waitIcon]=\"messageListConfiguration.waitIcon\"\n [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n [errorIcon]=\"messageListConfiguration.errorIcon\"\n [alignment]=\"messageListConfiguration.alignment\"\n [showAvatar]=\"messageListConfiguration.showAvatar\"\n [datePattern]=\"messageListConfiguration.datePattern\"\n [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n [templates]=\"messageListConfiguration.templates\"\n [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n [headerView]=\"messageListConfiguration.headerView\"\n [footerView]=\"messageListConfiguration.footerView\"\n [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n [messageInformationConfiguration]=\"messageListConfiguration.messageInformationConfiguration\"\n [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n [onError]=\"messageListConfiguration.onError\"\n [hideError]=\"messageListConfiguration.hideError\"\n [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n [disableSoundForMessages]=\"disableSoundForMessages\"\n [disableMentions]=\"messageListConfiguration.disableMentions\"\n [textFormatters]=\"messageListConfiguration?.textFormatters\">\n </cometchat-message-list>\n </div>\n <ng-container *ngIf=\"messageListView\">\n <ng-container\n *ngTemplateOutlet=\"messageListView;context:{ user: user, group: group,parentMessage:parentMessage }\">\n </ng-container>\n </ng-container>\n <div class=\"cc-threaded-messages__composer\"\n *ngIf=\"!hideMessageComposer && !messageComposerView\">\n <cometchat-message-composer #messageComposerRef\n [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n [text]=\"messageComposerConfiguration.text\"\n [headerView]=\"messageComposerConfiguration.headerView\"\n [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n [onError]=\"messageComposerConfiguration.onError\"\n [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n [disableSoundForMessages]=\"disableSoundForMessages\"\n >\n </cometchat-message-composer>\n </div>\n <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n <ng-container\n *ngTemplateOutlet=\"messageComposerView;context:{ user: user, group: group,parentMessage:parentMessage }\">\n </ng-container>\n </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow:hidden}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%;max-height:15em;overflow:auto;min-height:60px}.cc-threaded-messages__action-view{height:36px}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex-grow:1;overflow:hidden;height:100%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { onClose: [{
type: Input
}], onError: [{
type: Input
}], parentMessage: [{
type: Input
}], title: [{
type: Input
}], closeIconURL: [{
type: Input
}], bubbleView: [{
type: Input
}], messageActionView: [{
type: Input
}], messageListConfiguration: [{
type: Input
}], userMemberWrapperConfiguration: [{
type: Input
}], messageComposerConfiguration: [{
type: Input
}], threadedMessagesStyle: [{
type: Input
}], hideMessageComposer: [{
type: Input
}], messageComposerView: [{
type: Input
}], messageListView: [{
type: Input
}], disableSoundForMessages: [{
type: Input
}] } });
/**
*
* CometChatTransferOwnershipComponent is used to render users list to transfer wonership
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatTransferOwnershipComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.disableUsersPresence = false;
this.closeButtonIconURL = "assets/close2x.svg";
this.hideSeparator = false;
this.searchPlaceholder = localize("SEARCH");
this.searchIconURL = "assets/search.svg";
this.hideSearch = true;
this.title = localize("TRANSFER_OWNERSHIP");
this.onError = (error) => {
console.log(error);
};
this.loadingIconURL = "assets/Spinner.svg";
this.emptyStateText = localize("NO_GROUPS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.statusIndicatorStyle = {
height: "10px",
width: "10px",
borderRadius: "16px",
border: ""
};
this.transferOwnershipStyle = {
width: "360px",
height: "650px",
borderRadius: "8px",
};
this.transferButtonText = localize("TRANSFER_OWNERSHIP");
this.cancelButtonText = localize("CANCEL");
this.avatarStyle = {
borderRadius: "16px",
width: "32px",
height: "32px",
};
this.groupMembersStyle = {
width: "100%",
height: "100%",
background: "",
border: "",
borderRadius: "8px",
padding: "0"
};
this.listItemStyle = {
height: "100%",
width: "100%",
background: "",
separatorColor: "rgb(222 222 222 / 46%)"
};
this.titleAlignment = TitleAlignment.center;
this.selectionMode = SelectionMode.none;
this.showBackButton = false;
this.transferButtonStyle = {
height: "100%",
width: "100%",
background: "rgb(51, 153, 255)",
padding: "8px",
buttonTextColor: "white",
buttonTextFont: "600 15px Inter, sans-serif",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "none",
borderRadius: "8px"
};
this.cancelButtonStyle = {
height: "100%",
width: "100%",
background: "white",
padding: "8px",
buttonTextColor: "black",
buttonTextFont: "600 15px Inter, sans-serif",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "1px solid #e0e0e0",
borderRadius: "8px"
};
this.onOwnerSelected = (member) => {
this.selectedMember = member;
};
this.onTransferClick = () => {
CometChat.getUser(this.selectedMember?.getUid()).then((user) => {
this.selectedUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
if (this.onTransferOwnership) {
this.onTransferOwnership(this.selectedMember);
this.selectedMember = null;
}
else {
if (this.selectedMember) {
CometChat.transferGroupOwnership(this.group.getGuid(), this.selectedMember.getUid()).then((response) => {
this.group.setOwner(this.selectedMember.getUid());
CometChatGroupEvents.ccOwnershipChanged.next({
group: this.group,
newOwner: this.selectedMember
});
this.selectedMember = null;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
}
};
this.closeClicked = () => {
if (this.onClose) {
this.onClose();
}
};
this.membersStyle = () => {
return {
height: this.groupMembersStyle.height,
width: this.groupMembersStyle.width,
background: this.groupMembersStyle.background,
border: this.groupMembersStyle.border,
borderRadius: this.groupMembersStyle.borderRadius
};
};
this.wrapperStyle = () => {
return {
height: this.transferOwnershipStyle.height || "650px",
width: this.transferOwnershipStyle.width || "360px",
background: this.transferOwnershipStyle.background,
border: this.transferOwnershipStyle.border,
borderRadius: this.transferOwnershipStyle.borderRadius
};
};
this.getScopeStyle = () => {
return {
textFont: this.transferOwnershipStyle.MemberScopeTextFont,
textColor: this.transferOwnershipStyle.MemberScopeTextColor
};
};
}
ngOnInit() {
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.setThemeStyle();
}
setThemeStyle() {
this.setGroupMembersStyle();
this.setListItemStyle();
this.setAvatarStyle();
this.setownershipStyle();
this.setStatusStyle();
this.transferButtonStyle.buttonTextFont = this.transferOwnershipStyle.transferButtonTextFont || fontHelper(this.themeService.theme.typography.subtitle1);
this.transferButtonStyle.buttonTextColor = this.transferOwnershipStyle.transferButtonTextColor || this.themeService.theme.palette.getAccent900();
this.transferButtonStyle.background = this.themeService.theme.palette.getPrimary();
this.cancelButtonStyle.background = this.themeService.theme.palette.getSecondary();
this.cancelButtonStyle.buttonTextFont = this.transferOwnershipStyle.cancelButtonTextFont || fontHelper(this.themeService.theme.typography.subtitle1);
this.cancelButtonStyle.buttonTextColor = this.transferOwnershipStyle.cancelButtonTextColor || this.themeService.theme.palette.getAccent();
this.ref.detectChanges();
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "transparent",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: "transparent"
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setGroupMembersStyle() {
let defaultStyle = new GroupMembersStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
separatorColor: this.themeService.theme.palette.getAccent400(),
width: "100%",
height: "100%",
borderRadius: "none",
searchIconTint: this.themeService.theme.palette.getAccent600(),
searchPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
searchBackground: this.themeService.theme.palette.getAccent100(),
searchPlaceholderTextFont: fontHelper(this.themeService.theme.typography.text3),
searchTextColor: this.themeService.theme.palette.getAccent600(),
searchTextFont: fontHelper(this.themeService.theme.typography.text3),
searchBorderRadius: "8px",
closeButtonIconTint: this.themeService.theme.palette.getPrimary(),
backButtonIconTint: this.themeService.theme.palette.getPrimary(),
padding: "0 100px",
});
this.groupMembersStyle = { ...defaultStyle, ...this.groupMembersStyle };
this.ref.detectChanges();
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "28px",
height: "28px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setStatusStyle() {
let defaultStyle = {
height: "10px",
width: "10px",
border: "none",
borderRadius: "24px",
};
this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
}
setownershipStyle() {
let defaultStyle = new TransferOwnershipStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
MemberScopeTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
MemberScopeTextColor: this.themeService.theme.palette.getAccent600(),
transferButtonTextFont: fontHelper(this.themeService.theme.typography.title2),
transferButtonTextColor: this.themeService.theme.palette.getAccent("dark"),
cancelButtonTextFont: fontHelper(this.themeService.theme.typography.title2),
cancelButtonTextColor: this.themeService.theme.palette.getAccent("light"),
width: "360px",
height: "650px",
borderRadius: "8px",
});
this.transferOwnershipStyle = { ...defaultStyle, ...this.transferOwnershipStyle };
}
}
CometChatTransferOwnershipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTransferOwnershipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatTransferOwnershipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatTransferOwnershipComponent, selector: "cometchat-transfer-ownership", inputs: { groupMemberRequestBuilder: "groupMemberRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", options: "options", closeButtonIconURL: "closeButtonIconURL", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onClose: "onClose", onTransferOwnership: "onTransferOwnership", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", statusIndicatorStyle: "statusIndicatorStyle", transferOwnershipStyle: "transferOwnershipStyle", transferButtonText: "transferButtonText", cancelButtonText: "cancelButtonText", avatarStyle: "avatarStyle", groupMembersStyle: "groupMembersStyle", listItemStyle: "listItemStyle", titleAlignment: "titleAlignment" }, ngImport: i0, template: "\n<div class=\"cc-transfer-ownership\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-transfer-ownership__members\">\n <cometchat-group-members [listItemView]=\"listItemView\" [searchRequestBuilder]=\"searchRequestBuilder\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [loadingStateView]=\"loadingStateView\"\n [hideSeparator]=\"hideSeparator\" [emptyStateText]=\"emptyStateText\"\n [groupMemberRequestBuilder]=\"groupMemberRequestBuilder\" [hideSearch]=\"false\"\n [closeButtonIconURL]=\"closeButtonIconURL\" [listItemStyle]=\"listItemStyle\" [emptyStateView]=\"emptyStateView\"\n [searchPlaceholder]=\"searchPlaceholder\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [avatarStyle]=\"avatarStyle\" [groupMembersStyle]=\"groupMembersStyle\" [onError]=\"onError\"\n [subtitleView]=\"subtitleView\" [disableUsersPresence]=\"disableUsersPresence\" [onClose]=\"closeClicked\"\n [tailView]=\"tailView\" [selectionMode]=\"selectionMode\"\n [titleAlignment]=\"titleAlignment\" [group]=\"group\" [showBackButton]=\"showBackButton\" [title]=\"title\" [options]=\"options\">\n </cometchat-group-members>\n </div>\n <div class=\"cc-transfer-ownership-buttons\">\n <cometchat-button class=\"cc-transfer-ownership__buttons--confirm\" [text]=\"transferButtonText\"\n [buttonStyle]=\"transferButtonStyle\" (cc-button-clicked)=\"onTransferClick()\" [disabled]=\"selectedMember ? false : true\"></cometchat-button>\n <cometchat-button class=\"cc-transfer-ownership__buttons--cancel\" [text]=\"cancelButtonText\"\n [buttonStyle]=\"cancelButtonStyle\" (cc-button-clicked)=\"closeClicked()\"></cometchat-button>\n </div>\n </div>\n<!-- view for member scope -->\n<ng-template #tailView let-groupMember>\n <div class=\"cc-transfer-ownership-tailview\">\n <cometchat-label [text]=\"groupMember?.scope\" [labelStyle]=\"getScopeStyle()\">\n </cometchat-label>\n <cometchat-radio-button (cc-radio-button-changed)=\"onOwnerSelected(groupMember)\" *ngIf=\"groupMember && groupMember.getUid() != group?.getOwner()\"></cometchat-radio-button>\n </div>\n </ng-template>", styles: [".cc-transfer-ownership__buttons--confirm,.cc-transfer-ownership__buttons--cancel{height:42px;width:100%}.cc-transfer-ownership{width:320px;height:650%;background-color:#fff;box-shadow:0 0 10px #00000080;display:flex;flex-direction:column;padding:8px;justify-content:space-between;position:relative}.modal-header{display:flex;justify-content:center;align-items:center;height:40px}.cc-transfer-ownership-tailview{display:flex;justify-content:flex-end;align-items:flex-start}.cc-transfer-ownership__members{height:85%}.cc-transfer-ownership-buttons{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:15%;gap:10px}\n"], components: [{ type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTransferOwnershipComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-transfer-ownership", changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div class=\"cc-transfer-ownership\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-transfer-ownership__members\">\n <cometchat-group-members [listItemView]=\"listItemView\" [searchRequestBuilder]=\"searchRequestBuilder\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [loadingStateView]=\"loadingStateView\"\n [hideSeparator]=\"hideSeparator\" [emptyStateText]=\"emptyStateText\"\n [groupMemberRequestBuilder]=\"groupMemberRequestBuilder\" [hideSearch]=\"false\"\n [closeButtonIconURL]=\"closeButtonIconURL\" [listItemStyle]=\"listItemStyle\" [emptyStateView]=\"emptyStateView\"\n [searchPlaceholder]=\"searchPlaceholder\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [avatarStyle]=\"avatarStyle\" [groupMembersStyle]=\"groupMembersStyle\" [onError]=\"onError\"\n [subtitleView]=\"subtitleView\" [disableUsersPresence]=\"disableUsersPresence\" [onClose]=\"closeClicked\"\n [tailView]=\"tailView\" [selectionMode]=\"selectionMode\"\n [titleAlignment]=\"titleAlignment\" [group]=\"group\" [showBackButton]=\"showBackButton\" [title]=\"title\" [options]=\"options\">\n </cometchat-group-members>\n </div>\n <div class=\"cc-transfer-ownership-buttons\">\n <cometchat-button class=\"cc-transfer-ownership__buttons--confirm\" [text]=\"transferButtonText\"\n [buttonStyle]=\"transferButtonStyle\" (cc-button-clicked)=\"onTransferClick()\" [disabled]=\"selectedMember ? false : true\"></cometchat-button>\n <cometchat-button class=\"cc-transfer-ownership__buttons--cancel\" [text]=\"cancelButtonText\"\n [buttonStyle]=\"cancelButtonStyle\" (cc-button-clicked)=\"closeClicked()\"></cometchat-button>\n </div>\n </div>\n<!-- view for member scope -->\n<ng-template #tailView let-groupMember>\n <div class=\"cc-transfer-ownership-tailview\">\n <cometchat-label [text]=\"groupMember?.scope\" [labelStyle]=\"getScopeStyle()\">\n </cometchat-label>\n <cometchat-radio-button (cc-radio-button-changed)=\"onOwnerSelected(groupMember)\" *ngIf=\"groupMember && groupMember.getUid() != group?.getOwner()\"></cometchat-radio-button>\n </div>\n </ng-template>", styles: [".cc-transfer-ownership__buttons--confirm,.cc-transfer-ownership__buttons--cancel{height:42px;width:100%}.cc-transfer-ownership{width:320px;height:650%;background-color:#fff;box-shadow:0 0 10px #00000080;display:flex;flex-direction:column;padding:8px;justify-content:space-between;position:relative}.modal-header{display:flex;justify-content:center;align-items:center;height:40px}.cc-transfer-ownership-tailview{display:flex;justify-content:flex-end;align-items:flex-start}.cc-transfer-ownership__members{height:85%}.cc-transfer-ownership-buttons{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:15%;gap:10px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { groupMemberRequestBuilder: [{
type: Input
}], searchRequestBuilder: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], options: [{
type: Input
}], closeButtonIconURL: [{
type: Input
}], hideSeparator: [{
type: Input
}], searchPlaceholder: [{
type: Input
}], searchIconURL: [{
type: Input
}], hideSearch: [{
type: Input
}], title: [{
type: Input
}], onError: [{
type: Input
}], onClose: [{
type: Input
}], onTransferOwnership: [{
type: Input
}], group: [{
type: Input
}], emptyStateView: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingIconURL: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], transferOwnershipStyle: [{
type: Input
}], transferButtonText: [{
type: Input
}], cancelButtonText: [{
type: Input
}], avatarStyle: [{
type: Input
}], groupMembersStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], titleAlignment: [{
type: Input
}] } });
/**
*
* CometChatDetailsComponent renders details of user or group.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatDetailsComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.title = localize("DETAILS");
this.closeButtonIconURL = "assets/close2x.svg";
this.hideProfile = false;
this.disableUsersPresence = false;
this.privateGroupIcon = "assets/Private.svg";
/**
* @deprecated
*
* This property is deprecated as of version 4.3.7 due to newer property 'passwordGroupIcon'. It will be removed in subsequent versions.
*/
this.protectedGroupIcon = "assets/Locked.svg";
this.passwordGroupIcon = undefined;
this.onError = (error) => {
console.log(error);
};
this.leaveGroupConfirmButtonText = localize("LEAVE_GROUP");
this.leaveGroupCancelButtonText = localize("CANCEL");
this.leaveGroupDialogMessage = localize("LEAVE_CONFIRM");
this.leaveGroupDialogStyle = {
confirmButtonBackground: "RGB(51, 153, 255)",
cancelButtonBackground: "RGBA(20, 20, 20, 0.06)",
confirmButtonTextColor: "white",
confirmButtonTextFont: "600 15px Inter",
cancelButtonTextColor: "black",
cancelButtonTextFont: "600 15px Inter",
titleFont: "",
titleColor: "",
messageTextFont: "400 13px Inter",
messageTextColor: "RGBA(20, 20, 20, 0.58)",
background: "white",
border: "1px solid #F2F2F2",
height: "180px",
width: "360px"
};
this.deleteGroupConfirmButtonText = localize("DELETE");
this.deleteGroupDialogMessage = localize("DELETE_CONFIRM");
this.deleteGroupCancelButtonText = localize("CANCEL");
this.deleteGroupDialogStyle = {
height: "180px",
width: "360px"
};
this.transferOwnershipConfirmButtonText = localize("TRANSFER_OWNERSHIP");
this.transferOwnershipDialogMessage = localize("TRANSFER_CONFIRM");
this.transferOwnershipCancelButtonText = localize("CANCEL");
this.transferOwnershipDialogStyle = {
height: "180px",
width: "360px"
};
this.addMembersConfiguration = new AddMembersConfiguration({});
this.bannedMembersConfiguration = new BannedMembersConfiguration({});
this.groupMembersConfiguration = new GroupMembersConfiguration({});
this.transferOwnershipConfiguration = new TransferOwnershipConfiguration({});
this.backiconurl = "assets/backbutton.svg";
this.statusIndicatorStyle = {
height: "10px",
width: "10px",
borderRadius: "16px",
border: ""
};
this.backdropStyle = {
height: "100%",
width: "100%",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed"
};
this.avatarStyle = {
borderRadius: "16px",
width: "28px",
height: "28px",
border: "none",
};
this.detailsStyle = {
width: "100%",
height: "100%",
border: "",
borderRadius: ""
};
this.listItemStyle = {
height: "100%",
width: "100%",
background: "",
activeBackground: "transparent",
borderRadius: "grey",
titleFont: "600 15px Inter",
titleColor: "black",
border: "",
hoverBackground: "transparent",
separatorColor: "rgb(222 222 222 / 46%)"
};
this.showTransferDialog = false;
this.defaultTemplate = [];
this.loggedInUser = null;
this.openViewMembersPage = false;
this.openBannedMembersPage = false;
this.openAddMembersPage = false;
this.confirmLeaveGroupModal = false;
this.openTransferOwnershipModal = false;
this.selectionmodeEnum = SelectionMode.multiple;
this.statusColor = {
private: "",
password: "#F7A500",
public: ""
};
this.closeButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.detailsStyle.closeButtonIconTint || this.themeService.theme.palette.getPrimary()
};
this.buttonStyle = {
height: "100%",
width: "100%",
border: "none",
borderRadius: "0",
background: "transparent",
buttonTextColor: this.themeService.theme.palette.getPrimary() || "rgba(51, 153, 255)",
buttonTextFont: "500 16px Inter"
};
this.dividerStyle = {
background: "rgb(222 222 222 / 46%)",
height: "1px",
width: "100%"
};
this.deleteGroupModal = false;
this.subtitleText = "";
this.userListenerId = "userlist_" + new Date().getTime();
this.membersListenerId = "memberlist_" + new Date().getTime();
this.checkStatusType = () => {
if (this.user) {
let userStatusVisibility = !this.disableUsersPresence && !new MessageUtils().getUserStatusVisibility(this.user);
return userStatusVisibility ? this.statusColor[this.user?.getStatus()] : null;
}
else if (this.group) {
return this.statusColor[this.group?.getType()];
}
else
return null;
};
this.viewMembers = () => {
this.openViewMembersPage = !this.openViewMembersPage;
this.openBannedMembersPage = false;
this.openAddMembersPage = false;
this.ref.detectChanges();
};
this.addMembers = () => {
this.openAddMembersPage = !this.openAddMembersPage;
this.openBannedMembersPage = false;
this.openViewMembersPage = false;
this.ref.detectChanges();
};
this.bannedMembers = () => {
this.openAddMembersPage = false;
this.openViewMembersPage = false;
this.openBannedMembersPage = !this.openBannedMembersPage;
this.ref.detectChanges();
};
this.onBackForAddMembers = () => {
this.addMembers();
if (this.addMembersConfiguration?.onBack) {
this.addMembersConfiguration?.onBack();
}
};
this.openTransferOwnership = () => {
this.openTransferOwnershipModal = !this.openTransferOwnershipModal;
this.confirmLeaveGroupModal = false;
};
this.onCloseDetails = () => {
if (this.onClose) {
this.onClose();
}
};
this.subtitleStyle = () => {
let hideUserStatus = this.user ? new MessageUtils().getUserStatusVisibility(this.user) : true;
if (!this.disableUsersPresence && !hideUserStatus) {
return {
textFont: this.detailsStyle.subtitleTextFont,
textColor: this.themeService.theme.palette.getPrimary()
};
}
else {
return {
textFont: this.detailsStyle.subtitleTextFont,
textColor: this.detailsStyle.subtitleTextColor
};
}
};
/**
* @param {CometChat.Group} group
*/
this.getGroupIcon = (group) => {
let status;
if (group) {
switch (group.getType()) {
case CometChatUIKitConstants.GroupTypes.password:
status = this.passwordGroupIcon || this.protectedGroupIcon;
break;
case CometChatUIKitConstants.GroupTypes.private:
status = this.privateGroupIcon;
break;
default:
status = null;
break;
}
}
return status;
};
this.getTemplateOptions = (template) => {
if (template.options) {
return template.options(this.user, this.group, template.id);
}
else
return [];
};
this.wrapperStyle = () => {
return {
width: this.detailsStyle.width,
height: this.detailsStyle.height,
border: this.detailsStyle.border,
borderRadius: this.detailsStyle.borderRadius,
background: this.detailsStyle.background,
};
};
this.marginStyle = () => {
return {
padding: this.detailsStyle?.padding
};
};
}
getTitleStyle() {
return {
textFont: this.detailsStyle.titleTextFont || fontHelper(this.themeService.theme.typography.title1),
textColor: this.detailsStyle.titleTextColor || this.themeService.theme.palette.getAccent()
};
}
getCustomOptionView(option) {
return option?.customView;
}
ngOnChanges(changes) {
if (changes["user"] || changes["group"]) {
if (this.loggedInUser) {
this.getTemplate();
}
else {
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
this.getTemplate();
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
}
}
getTemplate() {
if (this.data) {
this.defaultTemplate = this.data;
this.ref.detectChanges();
}
else {
this.defaultTemplate = DetailsUtils.getDefaultDetailsTemplate(this.loggedInUser, this.user, this.group, this.themeService.theme);
this.ref.detectChanges();
}
}
removeListener() {
CometChat.removeUserListener(this.userListenerId);
CometChat.removeGroupListener(this.membersListenerId);
}
ngOnDestroy() {
this.removeListener();
this.defaultTemplate = [];
this.onCloseDetails();
this.unsubscribeToEvents();
}
ngOnInit() {
this.setThemeStyle();
this.subscribeToEvents();
this.statusColor.online = this.detailsStyle.onlineStatusColor || this.themeService.theme.palette.getSuccess();
this.attachListeners();
this.updateSubtitle();
}
subscribeToEvents() {
this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
this.group = item?.userAddedIn;
this.group = item?.userAddedIn;
this.updateSubtitle();
this.ref.detectChanges();
});
this.ccGroupMemberJoined = CometChatGroupEvents.ccGroupMemberJoined.subscribe((item) => {
this.group = item?.joinedGroup;
this.updateSubtitle();
this.ref.detectChanges();
});
this.ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe((item) => {
this.group = item?.kickedFrom;
this.updateSubtitle();
this.ref.detectChanges();
});
this.ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
this.group = item?.kickedFrom;
this.updateSubtitle();
this.ref.detectChanges();
});
this.ccOwnershipChanged = CometChatGroupEvents.ccOwnershipChanged.subscribe((item) => {
this.group = item?.group;
this.updateSubtitle();
this.confirmLeaveGroupModal = false;
this.openTransferOwnershipModal = false;
this.ref.detectChanges();
});
}
unsubscribeToEvents() {
this.ccGroupMemberAdded?.unsubscribe();
this.ccGroupMemberJoined?.unsubscribe();
this.ccGroupMemberKicked?.unsubscribe();
this.ccGroupMemberBanned?.unsubscribe();
this.ccOwnershipChanged?.unsubscribe();
}
updateSubtitle() {
const count = this.group?.getMembersCount();
const membersText = localize(count > 1 ? "MEMBERS" : "MEMBER");
if (this.user) {
let userStatusVisibility = !this.disableUsersPresence && !this.user.getBlockedByMe() && !this.user.getHasBlockedMe();
this.subtitleText = userStatusVisibility ? this.user.getStatus() : "";
}
else if (this.group) {
this.subtitleText = `${count} ${membersText}`;
}
this.ref.detectChanges();
}
getButtonStyle(option) {
return {
height: "100%",
width: "100%",
border: "none",
borderRadius: "0",
buttonTextFont: option?.titleFont,
buttonTextColor: option?.titleColor,
background: option?.backgroundColor || "transparent"
};
}
checkGroupType() {
let image = "";
if (this.group) {
switch (this.group?.getType()) {
case CometChatUIKitConstants.GroupTypes.password:
image = this.passwordGroupIcon || this.protectedGroupIcon;
break;
case CometChatUIKitConstants.GroupTypes.private:
image = this.privateGroupIcon;
break;
default:
image = "";
break;
}
}
return image;
}
updateUserStatus(user) {
if (this.user && this.user.getUid() && this.user.getUid() === user.getUid()) {
this.user.setStatus(user.getStatus());
this.updateSubtitle();
}
// this.ref.detectChanges();
}
attachListeners() {
try {
if (!this.disableUsersPresence) {
CometChat.addUserListener(this.userListenerId, new CometChat.UserListener({
onUserOnline: (onlineUser) => {
/* when someuser/friend comes online, user will be received here */
this.updateUserStatus(onlineUser);
},
onUserOffline: (offlineUser) => {
/* when someuser/friend went offline, user will be received here */
this.updateUserStatus(offlineUser);
},
}));
}
CometChat.addGroupListener(this.membersListenerId, new CometChat.GroupListener({
onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
if (changedUser.getUid() == this.loggedInUser?.getUid()) {
changedGroup.setScope(newScope);
this.group = changedGroup;
this.getTemplate();
}
},
}));
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
getSectionHeaderStyle(template) {
return {
textFont: template.titleFont,
textColor: template.titleColor
};
}
onOptionClick(option) {
const { onClick, id } = option;
if (onClick) {
onClick(this.user ?? this.group);
return;
}
switch (id) {
case CometChatUIKitConstants.UserOptions.viewProfile:
if (this.user?.getLink()) {
window.location.href = this.user.getLink();
}
break;
case CometChatUIKitConstants.UserOptions.block:
this.blockUser();
break;
case CometChatUIKitConstants.UserOptions.unblock:
this.unBlockUser();
break;
case CometChatUIKitConstants.GroupOptions.viewMembers:
this.viewMembers();
break;
case CometChatUIKitConstants.GroupOptions.addMembers:
this.addMembers();
break;
case CometChatUIKitConstants.GroupOptions.bannedMembers:
this.bannedMembers();
break;
case CometChatUIKitConstants.GroupOptions.leave:
this.leaveGroup();
break;
case CometChatUIKitConstants.GroupOptions.delete:
this.showDeleteDialog();
break;
default:
break;
}
}
onTransferClick() {
if (this.group.getOwner() == this.loggedInUser?.getUid()) {
this.openTransferOwnershipModal = true;
this.confirmLeaveGroupModal = false;
this.showTransferDialog = false;
}
}
onLeaveClick() {
CometChat.leaveGroup(this.group.getGuid())
.then((response) => {
this.group.setMembersCount(this.group.getMembersCount() - 1);
this.group.setHasJoined(false);
this.updateSubtitle();
this.ref.detectChanges();
this.openTransferOwnershipModal = false;
this.confirmLeaveGroupModal = false;
this.onCloseDetails();
CometChatGroupEvents.ccGroupLeft.next({
userLeft: this.loggedInUser,
leftGroup: this.group,
message: this.createUserLeftAction(this.loggedInUser, CometChatUIKitConstants.groupMemberAction.LEFT)
});
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
createActionMessage(actionOn, action) {
let actionMessage = new CometChat.Action(this.group.getGuid(), CometChatUIKitConstants.MessageTypes.groupMember, CometChatUIKitConstants.MessageReceiverType.group, CometChatUIKitConstants.MessageCategory.action);
actionMessage.setAction(action);
actionMessage.setActionBy(this.loggedInUser);
actionMessage.setActionFor(this.group);
actionMessage.setActionOn(actionOn);
actionMessage.setReceiver(this.group);
actionMessage.setSender(this.loggedInUser);
actionMessage.setConversationId("group_" + this.group.getGuid());
actionMessage.setMuid(CometChatUIKitUtility.ID());
actionMessage.setMessage(`${this.loggedInUser?.getName()} ${action} ${actionOn.getName()}`);
actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
actionMessage.setNewScope(actionOn.getScope());
actionMessage.setReceiverType(CometChatUIKitConstants.MessageReceiverType.group);
return actionMessage;
}
createUserLeftAction(actionOn, action) {
let actionMessage = new CometChat.Action(this.group.getGuid(), CometChatUIKitConstants.MessageTypes.groupMember, CometChatUIKitConstants.MessageReceiverType.group, CometChatUIKitConstants.MessageCategory.action);
actionMessage.setAction(action);
actionMessage.setActionBy(this.loggedInUser);
actionMessage.setActionFor(this.group);
actionMessage.setActionOn(actionOn);
actionMessage.setReceiver(this.group);
actionMessage.setSender(this.loggedInUser);
actionMessage.setConversationId("group_" + this.group.getGuid());
actionMessage.setMuid(CometChatUIKitUtility.ID());
actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
actionMessage.setReceiverType(CometChatUIKitConstants.MessageReceiverType.group);
let message = CometChatUIKitConstants.groupMemberAction.LEFT ? `${this.loggedInUser?.getName()} ${action}` : `${this.loggedInUser?.getName()} ${action} ${actionOn.getName()}`;
actionMessage.setMessage(message);
return actionMessage;
}
onCancelClick() {
this.confirmLeaveGroupModal = false;
this.deleteGroupModal = false;
this.showTransferDialog = false;
}
blockUser() {
// block user
if (this.user && !this.user.getBlockedByMe()) {
CometChat.blockUsers([this.user.getUid()]).then(() => {
this.user.setBlockedByMe(true);
CometChatUserEvents.ccUserBlocked.next(this.user);
this.updateSubtitle();
this.getTemplate();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
}
unBlockUser() {
// unblock user
if (this.user && this.user.getBlockedByMe()) {
CometChat.unblockUsers([this.user.getUid()]).then(() => {
this.user.setBlockedByMe(false);
CometChatUserEvents.ccUserUnblocked.next(this.user);
this.getTemplate();
this.updateSubtitle();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
}
leaveGroup() {
if (this.group.getOwner() == this.loggedInUser?.getUid()) {
this.showTransferDialog = true;
this.confirmLeaveGroupModal = false;
}
else {
this.showTransferDialog = false;
}
this.confirmLeaveGroupModal = true;
this.ref.detectChanges();
}
showDeleteDialog() {
this.deleteGroupModal = true;
}
deleteGroup() {
this.deleteGroupModal = false;
CometChat.deleteGroup(this.group?.getGuid()).then(() => {
this.deleteGroupModal = false;
CometChatGroupEvents.ccGroupDeleted.next(this.group);
this.onCloseDetails();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
/**
* @param {CometChat.Group} group
*/
getStatusIndicatorColor(group) {
return this.statusColor[group?.getType()];
}
setThemeStyle() {
this.setDetailsStyle();
this.setAvatarStyle();
this.setStatusStyle();
this.setListItemStyle();
this.setConfirmDialogStyle();
this.statusColor.private = this.detailsStyle.privateGroupIconBackground;
this.statusColor.online = this.detailsStyle.onlineStatusColor;
this.statusColor.password = this.detailsStyle.passwordGroupIconBackground;
}
setConfirmDialogStyle() {
let defaultStyle = new ConfirmDialogStyle({
confirmButtonBackground: this.themeService.theme.palette.getPrimary(),
cancelButtonBackground: this.themeService.theme.palette.getSecondary(),
confirmButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
confirmButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
cancelButtonTextColor: this.themeService.theme.palette.getAccent900("dark"),
cancelButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
messageTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
messageTextColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
height: "100%",
width: "350px",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
borderRadius: "8px"
});
let defaultDeleteDialogStyle = new ConfirmDialogStyle({
confirmButtonBackground: this.themeService.theme.palette.getError(),
cancelButtonBackground: this.themeService.theme.palette.getSecondary(),
confirmButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
confirmButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
cancelButtonTextColor: this.themeService.theme.palette.getAccent900("dark"),
cancelButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
messageTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
messageTextColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
height: "100%",
width: "350px",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
borderRadius: "8px"
});
this.leaveGroupDialogStyle = { ...defaultStyle, ...this.leaveGroupDialogStyle };
this.transferOwnershipDialogStyle = { ...defaultStyle, ...this.transferOwnershipDialogStyle };
this.deleteGroupDialogStyle = { ...defaultDeleteDialogStyle, ...this.deleteGroupDialogStyle };
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "transparent",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: "transparent"
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setStatusStyle() {
let defaultStyle = {
height: "12px",
width: "12px",
border: "none",
borderRadius: "24px",
};
this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
}
setDetailsStyle() {
let defaultStyle = new DetailsStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
privateGroupIconBackground: this.themeService.theme.palette.getSuccess(),
passwordGroupIconBackground: "RGB(247, 165, 0)",
closeButtonIconTint: this.themeService.theme.palette.getPrimary(),
width: "100%",
height: "100%",
borderRadius: "",
subtitleTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
subtitleTextColor: this.themeService.theme.palette.getAccent600(),
padding: "0 100px"
});
this.detailsStyle = { ...defaultStyle, ...this.detailsStyle };
}
}
CometChatDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatDetailsComponent, selector: "cometchat-details", inputs: { group: "group", user: "user", title: "title", closeButtonIconURL: "closeButtonIconURL", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", data: "data", disableUsersPresence: "disableUsersPresence", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", onError: "onError", onClose: "onClose", leaveGroupConfirmButtonText: "leaveGroupConfirmButtonText", leaveGroupCancelButtonText: "leaveGroupCancelButtonText", leaveGroupDialogMessage: "leaveGroupDialogMessage", leaveGroupDialogStyle: "leaveGroupDialogStyle", deleteGroupConfirmButtonText: "deleteGroupConfirmButtonText", deleteGroupDialogMessage: "deleteGroupDialogMessage", deleteGroupCancelButtonText: "deleteGroupCancelButtonText", deleteGroupDialogStyle: "deleteGroupDialogStyle", transferOwnershipConfirmButtonText: "transferOwnershipConfirmButtonText", transferOwnershipDialogMessage: "transferOwnershipDialogMessage", transferOwnershipCancelButtonText: "transferOwnershipCancelButtonText", transferOwnershipDialogStyle: "transferOwnershipDialogStyle", addMembersConfiguration: "addMembersConfiguration", bannedMembersConfiguration: "bannedMembersConfiguration", groupMembersConfiguration: "groupMembersConfiguration", transferOwnershipConfiguration: "transferOwnershipConfiguration", statusIndicatorStyle: "statusIndicatorStyle", backdropStyle: "backdropStyle", avatarStyle: "avatarStyle", detailsStyle: "detailsStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-details__header\">\n <cometchat-label [text]=\"title\"\n [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n <cometchat-button [iconURL]=\"closeButtonIconURL\"\n class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n </div>\n <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n [listItemStyle]=\"listItemStyle\"\n [statusIndicatorColor]=\"checkStatusType()\"\n [statusIndicatorIcon]=\"checkGroupType()\"\n [title]=\"this.user?.getName() ?? this.group?.getName()\"\n [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [avatarStyle]=\"avatarStyle\">\n <div slot=\"subtitleView\">\n <div *ngIf=\"!subtitleView; else subtitle\">\n <cometchat-label [text]=\"subtitleText\"\n [labelStyle]=\"subtitleStyle()\">\n </cometchat-label>\n </div>\n <ng-template #subtitle>\n <ng-container\n *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n </ng-container>\n </ng-template>\n </div>\n </cometchat-list-item>\n </div>\n <div class=\"cc-details__section-list\"\n *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n <cometchat-label [text]=\"item.title\"\n [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n </div>\n <div class=\"cc-details__options-wrapper\"\n *ngIf=\"getTemplateOptions(item)\">\n <div class=\"cc-details__options\"\n *ngFor=\"let option of getTemplateOptions(item)\">\n <div class=\"cc-details__option\"\n *ngIf=\"!getCustomOptionView(option);else customView\"\n (click)=\"onOptionClick(option)\">\n <div class=\"cc-details__option-title\">\n <cometchat-button [text]=\"option.title\"\n [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n </div>\n </div>\n <cometchat-divider\n [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n </div>\n <ng-template #customView>\n <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n </ng-container>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #listitem>\n <ng-container *ngTemplateOutlet=\"customProfileView\">\n </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n <cometchat-add-members\n [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n [onSelect]=\"addMembersConfiguration?.onSelect!\"\n [onError]=\"addMembersConfiguration?.onError!\"\n [hideError]=\"addMembersConfiguration?.hideError!\"\n [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n [options]=\"addMembersConfiguration?.options!\"\n [menu]=\"addMembersConfiguration?.menu\"\n [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n [selectionMode]=\"selectionmodeEnum\"\n [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n [onBack]=\"onBackForAddMembers\"\n [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n [listItemView]=\"addMembersConfiguration?.listItemView\">\n </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n <cometchat-banned-members\n [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n [onSelect]=\"bannedMembersConfiguration.onSelect\"\n [onError]=\"bannedMembersConfiguration.onError\"\n [hideError]=\"bannedMembersConfiguration.hideError\"\n [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n [options]=\"bannedMembersConfiguration.options\"\n [menu]=\"bannedMembersConfiguration.menu\"\n [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n [onClose]=\"onCloseDetails\"\n [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n <cometchat-group-members\n [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n [onSelect]=\"groupMembersConfiguration.onSelect\"\n [onError]=\"groupMembersConfiguration.onError\"\n [hideError]=\"groupMembersConfiguration.hideError\"\n [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n [options]=\"groupMembersConfiguration.options\"\n [menu]=\"groupMembersConfiguration.menu\"\n [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n [group]=\"group\"\n [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n *ngIf=\"confirmLeaveGroupModal\">\n <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n [cancelButtonText]=\"leaveGroupCancelButtonText\"\n [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n <cometchat-confirm-dialog [title]=\"''\"\n [messageText]=\"transferOwnershipDialogMessage\"\n [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n (cc-confirm-clicked)=\"onTransferClick()\"\n (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n *ngIf=\"openTransferOwnershipModal\">\n <cometchat-transfer-ownership\n [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n [onError]=\"transferOwnershipConfiguration.onError\"\n [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n [options]=\"transferOwnershipConfiguration.options\"\n [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n <cometchat-confirm-dialog [title]=\"''\"\n [messageText]=\"deleteGroupDialogMessage\"\n [cancelButtonText]=\"deleteGroupCancelButtonText\"\n [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"], components: [{ type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onBack", "onClose", "onSelect", "buttonText", "group", "emptyStateView", "errorStateView", "loadingIconURL", "listItemStyle", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "onAddMembersButtonClick", "titleAlignment", "addMembersStyle", "StatusIndicatorStyle", "statusIndicatorStyle", "avatarStyle"] }, { type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: ["bannedMembersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "onBack", "onClose", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "unbanIconURL", "statusIndicatorStyle", "avatarStyle", "bannedMembersStyle", "listItemStyle"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }, { type: CometChatTransferOwnershipComponent, selector: "cometchat-transfer-ownership", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "options", "closeButtonIconURL", "hideSeparator", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onClose", "onTransferOwnership", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "statusIndicatorStyle", "transferOwnershipStyle", "transferButtonText", "cancelButtonText", "avatarStyle", "groupMembersStyle", "listItemStyle", "titleAlignment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-details__header\">\n <cometchat-label [text]=\"title\"\n [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n <cometchat-button [iconURL]=\"closeButtonIconURL\"\n class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n </div>\n <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n [listItemStyle]=\"listItemStyle\"\n [statusIndicatorColor]=\"checkStatusType()\"\n [statusIndicatorIcon]=\"checkGroupType()\"\n [title]=\"this.user?.getName() ?? this.group?.getName()\"\n [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [avatarStyle]=\"avatarStyle\">\n <div slot=\"subtitleView\">\n <div *ngIf=\"!subtitleView; else subtitle\">\n <cometchat-label [text]=\"subtitleText\"\n [labelStyle]=\"subtitleStyle()\">\n </cometchat-label>\n </div>\n <ng-template #subtitle>\n <ng-container\n *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n </ng-container>\n </ng-template>\n </div>\n </cometchat-list-item>\n </div>\n <div class=\"cc-details__section-list\"\n *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n <cometchat-label [text]=\"item.title\"\n [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n </div>\n <div class=\"cc-details__options-wrapper\"\n *ngIf=\"getTemplateOptions(item)\">\n <div class=\"cc-details__options\"\n *ngFor=\"let option of getTemplateOptions(item)\">\n <div class=\"cc-details__option\"\n *ngIf=\"!getCustomOptionView(option);else customView\"\n (click)=\"onOptionClick(option)\">\n <div class=\"cc-details__option-title\">\n <cometchat-button [text]=\"option.title\"\n [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n </div>\n </div>\n <cometchat-divider\n [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n </div>\n <ng-template #customView>\n <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n </ng-container>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n<ng-template #listitem>\n <ng-container *ngTemplateOutlet=\"customProfileView\">\n </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n <cometchat-add-members\n [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n [onSelect]=\"addMembersConfiguration?.onSelect!\"\n [onError]=\"addMembersConfiguration?.onError!\"\n [hideError]=\"addMembersConfiguration?.hideError!\"\n [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n [options]=\"addMembersConfiguration?.options!\"\n [menu]=\"addMembersConfiguration?.menu\"\n [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n [selectionMode]=\"selectionmodeEnum\"\n [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n [onBack]=\"onBackForAddMembers\"\n [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n [listItemView]=\"addMembersConfiguration?.listItemView\">\n </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n <cometchat-banned-members\n [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n [onSelect]=\"bannedMembersConfiguration.onSelect\"\n [onError]=\"bannedMembersConfiguration.onError\"\n [hideError]=\"bannedMembersConfiguration.hideError\"\n [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n [options]=\"bannedMembersConfiguration.options\"\n [menu]=\"bannedMembersConfiguration.menu\"\n [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n [onClose]=\"onCloseDetails\"\n [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n <cometchat-group-members\n [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n [onSelect]=\"groupMembersConfiguration.onSelect\"\n [onError]=\"groupMembersConfiguration.onError\"\n [hideError]=\"groupMembersConfiguration.hideError\"\n [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n [options]=\"groupMembersConfiguration.options\"\n [menu]=\"groupMembersConfiguration.menu\"\n [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n [group]=\"group\"\n [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n *ngIf=\"confirmLeaveGroupModal\">\n <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n [cancelButtonText]=\"leaveGroupCancelButtonText\"\n [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n <cometchat-confirm-dialog [title]=\"''\"\n [messageText]=\"transferOwnershipDialogMessage\"\n [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n (cc-confirm-clicked)=\"onTransferClick()\"\n (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n *ngIf=\"openTransferOwnershipModal\">\n <cometchat-transfer-ownership\n [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n [onError]=\"transferOwnershipConfiguration.onError\"\n [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n [options]=\"transferOwnershipConfiguration.options\"\n [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n <cometchat-confirm-dialog [title]=\"''\"\n [messageText]=\"deleteGroupDialogMessage\"\n [cancelButtonText]=\"deleteGroupCancelButtonText\"\n [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { group: [{
type: Input
}], user: [{
type: Input
}], title: [{
type: Input
}], closeButtonIconURL: [{
type: Input
}], hideProfile: [{
type: Input
}], subtitleView: [{
type: Input
}], customProfileView: [{
type: Input
}], data: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], privateGroupIcon: [{
type: Input
}], protectedGroupIcon: [{
type: Input
}], passwordGroupIcon: [{
type: Input
}], onError: [{
type: Input
}], onClose: [{
type: Input
}], leaveGroupConfirmButtonText: [{
type: Input
}], leaveGroupCancelButtonText: [{
type: Input
}], leaveGroupDialogMessage: [{
type: Input
}], leaveGroupDialogStyle: [{
type: Input
}], deleteGroupConfirmButtonText: [{
type: Input
}], deleteGroupDialogMessage: [{
type: Input
}], deleteGroupCancelButtonText: [{
type: Input
}], deleteGroupDialogStyle: [{
type: Input
}], transferOwnershipConfirmButtonText: [{
type: Input
}], transferOwnershipDialogMessage: [{
type: Input
}], transferOwnershipCancelButtonText: [{
type: Input
}], transferOwnershipDialogStyle: [{
type: Input
}], addMembersConfiguration: [{
type: Input
}], bannedMembersConfiguration: [{
type: Input
}], groupMembersConfiguration: [{
type: Input
}], transferOwnershipConfiguration: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], backdropStyle: [{
type: Input
}], avatarStyle: [{
type: Input
}], detailsStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}] } });
/**
*
* CometChatMessages is a wrapper component for messageList, messageHeader, messageComposer and liveReaction component.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatMessagesComponent {
constructor(ref, themeService, elementRef) {
this.ref = ref;
this.themeService = themeService;
this.elementRef = elementRef;
this.hideMessageComposer = false;
this.messageHeaderConfiguration = new MessageHeaderConfiguration({});
this.messageListConfiguration = new MessageListConfiguration({});
this.messageComposerConfiguration = new MessageComposerConfiguration({});
this.threadedMessageConfiguration = new ThreadedMessagesConfiguration({});
this.detailsConfiguration = new DetailsConfiguration({});
this.messagesStyle = {
width: "100%",
height: "100%",
background: "white",
borderRadius: "none",
};
this.hideMessageHeader = false;
this.hideDetails = false;
this.conversationSummaryClicked = new EventEmitter();
this.callButtonsStyle = {
width: "100%",
height: "100%",
border: "none",
borderRadius: "0",
background: "transparent",
buttonPadding: "0",
buttonBackground: "transparent",
buttonBorder: "0 4px",
buttonBorderRadius: "8px",
};
this.messageToBeEdited = null;
this.liveReaction = false;
this.reactionName = "assets/heart-reaction.png";
this.messageToReact = null;
this.composerStyles = {
width: "100%",
height: "100%",
border: "none",
borderRadius: "12px",
background: this.themeService.theme.palette.getAccent900(),
inputBackground: this.themeService.theme.palette.getSecondary(),
textFont: fontHelper(this.themeService.theme.typography.subtitle1),
textColor: this.themeService.theme.palette.getAccent(), // done
};
this.liveReactionTimeout = 0;
this.openThreadedMessages = false;
this.showAiBotChat = false;
this.disableUsersPresence = false;
/**
* @deprecated
*
* This property is deprecated as of version 4.3.7 due to newer property 'passwordGroupIcon'. It will be removed in subsequent versions.
*/
this.protectedGroupIcon = "assets/Locked.svg";
this.passwordGroupIcon = undefined;
this.privateGroupIcon = "assets/Private.svg";
this.headerStyle = new MessageHeaderStyle({});
this.backButtonIconURL = "assets/backbutton.svg";
this.hideBackIcon = true;
this.avatarStyle = {
borderRadius: "16px",
width: "28px",
height: "28px",
border: "none",
backgroundColor: "white",
nameTextColor: "rgb(20,20,20)",
backgroundSize: "cover",
nameTextFont: "500 16px Inter",
outerViewBorderSpacing: "",
};
this.statusIndicatorStyle = {
borderRadius: "16px",
width: "10px",
height: "10px",
border: "none",
};
this.messageHeaderStyle = {
width: "100%",
height: "100%",
background: "transparent",
border: "none",
borderRadius: "0",
backButtonIconTint: "#3399FF",
onlineStatusColor: "#00f300",
subtitleTextColor: "grey",
subtitleTextFont: "400 14px Inter",
typingIndicatorTextColor: "#3399FF",
typingIndicatorTextFont: "400 13px Inter",
};
this.listItemStyle = {
background: "white",
titleColor: "black",
titleFont: "500 16px Inter",
width: "",
height: "100%",
border: "none",
borderRadius: "2px",
separatorColor: "",
activeBackground: "transparent",
hoverBackground: "transparent",
};
this.infoIconStyle = "assets/Info.svg";
this.detailsButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.themeService.theme.palette.getPrimary(),
padding: "0 8px",
};
this.enableCalling = false;
this.liveReactionStyle = {
height: "20px",
width: "25px",
background: "red"
};
this.openDetails = false;
this.openThreadView = (message, bubble) => {
this.threadMessageObject = message;
this.parentBubbleView = bubble;
this.openThreadedMessages = true;
this.ref.detectChanges();
};
this.openDetailsPage = () => {
this.openDetails = true;
this.ref.detectChanges();
};
this.closeDetailsPage = () => {
this.openDetails = false;
this.ref.detectChanges();
};
this.closeThreadView = () => {
if (this.threadedMessageConfiguration.onClose) {
this.threadedMessageConfiguration.onClose();
}
this.threadMessageObject = null;
this.openThreadedMessages = false;
this.ref.detectChanges();
};
/**
* @param {string} reactionName
*/
this.liveReactionStart = (reactionName) => {
if (this.liveReaction) {
this.reactionName = "";
this.liveReaction = false;
this.ref.detectChanges();
}
this.reactionName = reactionName;
this.liveReaction = true;
this.ref.detectChanges();
setTimeout(() => {
this.reactionName = "";
this.liveReaction = false;
this.ref.detectChanges();
}, 1500);
this.ref.detectChanges();
};
}
ngOnInit() {
this.subscribeToEvents();
this.setMessagesStyle();
this.liveReactionStyle = {
height: "20px",
width: "25px",
background: this.messageComposerConfiguration?.messageComposerStyle?.liveReactionIconTint || "red"
};
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
if (ChatConfigurator.names.includes("calling")) {
this.enableCalling = true;
}
}
subscribeToEvents() {
this.ccLiveReaction = CometChatMessageEvents.ccLiveReaction.subscribe((reactionName) => {
if (reactionName && reactionName == "heart") {
let iconURL = this.messageComposerConfiguration.LiveReactionIconURL ??
"assets/heart-reaction.png";
this.liveReactionStart(iconURL);
this.ref.detectChanges();
}
});
this.ccGroupDeleted = CometChatGroupEvents.ccGroupDeleted.subscribe((group) => {
if (this.group && this.group.getGuid() == group.getGuid()) {
this.openDetails = false;
this.openThreadedMessages = false;
this.group = group;
this.ref.detectChanges();
}
});
this.ccGroupLeft = CometChatGroupEvents.ccGroupLeft.subscribe((item) => {
if (this.group && this.group.getGuid() == item.leftGroup.getGuid()) {
if (this.loggedInUser?.getUid() == item?.userLeft.getUid()) {
this.openDetails = false;
this.openThreadedMessages = false;
}
this.group = item.leftGroup;
this.ref.detectChanges();
}
});
this.ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe((user) => {
if (this.user && user.getUid() == this.user.getUid()) {
this.user = user;
this.ref.detectChanges();
}
});
this.ccUserUnBlocked = CometChatUserEvents.ccUserUnblocked.subscribe((user) => {
if (this.user && user.getUid() == this.user.getUid()) {
this.user = user;
this.ref.detectChanges();
}
});
this.ccShowPanel = CometChatUIEvents.ccShowPanel.subscribe((e) => {
this.currentAskAIBot = e.child?.bot;
if (e.child?.showBotView) {
this.showAiBotChat = true;
}
else {
this.showAiBotChat = false;
}
this.ref.detectChanges();
});
}
setDetailsTemplate() {
if (this.detailsConfiguration.data) {
return this.detailsConfiguration.data(this.user, this.group);
}
return;
}
unsubscribeToEvents() {
this.ccLiveReaction?.unsubscribe();
this.ccGroupDeleted?.unsubscribe();
this.ccGroupLeft?.unsubscribe();
this.ccUserBlocked?.unsubscribe();
this.ccUserUnBlocked?.unsubscribe();
this.ccShowPanel?.unsubscribe();
}
setMessagesStyle() {
let defaultStyle = new MessagesStyle({
width: "100%",
height: "100%",
background: this.themeService.theme.palette.getBackground(),
borderRadius: "none",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
});
this.messagesStyle = {
...defaultStyle,
...this.messagesStyle,
};
this.detailsConfiguration.detailsStyle.border =
this.detailsConfiguration.detailsStyle.border ?? "none";
this.detailsConfiguration.addMembersConfiguration.addMembersStyle.border =
this.detailsConfiguration.addMembersConfiguration.addMembersStyle
.border ?? "none";
this.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.border =
this.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle
.border ?? "none";
this.detailsConfiguration.groupMembersConfiguration.groupMembersStyle.border =
this.detailsConfiguration.groupMembersConfiguration.groupMembersStyle
.border ?? "none";
}
getAuxilaryView() {
if (this.messageHeaderConfiguration.menu) {
return this.messageHeaderConfiguration.menu;
}
else if (this.auxiliaryMenu) {
return this.auxiliaryMenu;
}
else {
return null;
}
}
ngOnChanges(change) {
try {
if (change[CometChatUIKitConstants.MessageReceiverType.user] ||
change[CometChatUIKitConstants.MessageReceiverType.group]) {
this.openThreadedMessages = false;
this.openDetails = false;
if (this.user) {
if (Object.keys(this.user).length === 1) {
CometChat.getUser(this.user).then((user) => {
this.user = user;
});
}
}
else if (this.group) {
if (Object.keys(this.group).length === 1) {
CometChat.getGroup(this.group).then((group) => {
this.group = group;
});
}
}
}
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
ngOnDestroy() {
this.ccLiveReaction.unsubscribe();
this.openThreadedMessages = false;
this.openDetails = false;
}
chatListStyle() {
return {
background: this.messagesStyle.background ||
this.themeService.theme.palette.getBackground(),
height: this.messagesStyle.height,
width: this.messagesStyle.width,
border: this.messagesStyle.border,
borderRadius: this.messagesStyle.borderRadius,
};
}
/**
* public methods
* messageListRef methods
* This metthod will append message in message list
* @param {CometChat.BaseMessage} message
*/
addMessage(message) {
this.messageListRef.addMessage(message);
}
/**
* This method will update the message in messageList
* @param {CometChat.BaseMessage} message
*/
updateMessage(message, muid = false) {
this.messageListRef.updateMessage(message, muid);
}
/**
* This method will remove the message from messageList
* @param {CometChat.BaseMessage} message
*/
removeMessage(message) {
this.messageListRef.removeMessage(message);
}
/**
* This method will delete and remove the message from messageList
* @param {CometChat.BaseMessage} message
*/
deleteMessage(message) {
this.messageListRef.deleteMessage(message);
}
/**
* this method will send a text message
* @param {string} text
*/
sendTextMessage(text) {
this.messageComposerRef.sendTextMessage(text);
}
/**
* this method will open preview of the message
* @param {CometChat.BaseMessage} message
* @param {string} mode
*/
previewMessage(message, mode = "") {
this.messageComposerRef.messageToBeEdited = message;
this.messageComposerRef.openEditPreview();
}
}
CometChatMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
CometChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: { user: "user", group: "group", currentAskAIBot: "currentAskAIBot", hideMessageComposer: "hideMessageComposer", disableTyping: "disableTyping", messageHeaderConfiguration: "messageHeaderConfiguration", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessageConfiguration: "threadedMessageConfiguration", detailsConfiguration: "detailsConfiguration", customSoundForIncomingMessages: "customSoundForIncomingMessages", customSoundForOutgoingMessages: "customSoundForOutgoingMessages", disableSoundForMessages: "disableSoundForMessages", messagesStyle: "messagesStyle", messageHeaderView: "messageHeaderView", messageComposerView: "messageComposerView", messageListView: "messageListView", hideMessageHeader: "hideMessageHeader", hideDetails: "hideDetails", auxiliaryMenu: "auxiliaryMenu" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-messages__wrapper\">\n <cometchat-backdrop *ngIf=\"showAiBotChat\">\n <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n </cometchat-backdrop>\n <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n <div *ngIf=\"messageHeaderView; else customHeaderView\"\n class=\"cc-messages__header-customview\">\n <ng-container\n *ngTemplateOutlet=\"messageHeaderView;context:{ user: user, group: group }\">\n </ng-container>\n </div>\n <ng-template #customHeaderView>\n <cometchat-message-header [user]=\"user\" [group]=\"group\"\n [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n [menu]=\"headerMenu\"\n [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n [onError]=\"messageHeaderConfiguration.onError\"\n [onBack]=\"messageHeaderConfiguration.onBack\"\n [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n </cometchat-message-header>\n </ng-template>\n </div>\n <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n <cometchat-message-list #messageListRef\n [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n [messageInformationConfiguration]=\"\n messageListConfiguration.messageInformationConfiguration\"\n [disableSoundForMessages]=\"disableSoundForMessages\"\n [customSoundForMessages]=\"customSoundForIncomingMessages\"\n [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n [user]=\"user\" [group]=\"group\"\n [errorStateView]=\"messageListConfiguration.errorStateView\"\n [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n [readIcon]=\"messageListConfiguration.readIcon\"\n [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n [sentIcon]=\"messageListConfiguration.sentIcon\"\n [waitIcon]=\"messageListConfiguration.waitIcon\"\n [errorIcon]=\"messageListConfiguration.errorIcon\"\n [alignment]=\"messageListConfiguration.alignment\"\n [showAvatar]=\"messageListConfiguration.showAvatar\"\n [datePattern]=\"messageListConfiguration.datePattern\"\n [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n [templates]=\"messageListConfiguration.templates\"\n [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n [headerView]=\"messageListConfiguration.headerView\"\n [footerView]=\"messageListConfiguration.footerView\"\n [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n [onError]=\"messageListConfiguration.onError\"\n [hideError]=\"messageListConfiguration.hideError\"\n [disableMentions]=\"messageListConfiguration.disableMentions\"\n [textFormatters]=\"messageListConfiguration?.textFormatters\">\n </cometchat-message-list>\n </div>\n <ng-container *ngIf=\"messageListView\">\n <ng-container\n *ngTemplateOutlet=\"messageListView;context:{ user: user, group: group }\">\n </ng-container>\n </ng-container>\n\n <div class=\"cc-messages__composer\"\n *ngIf=\"!messageComposerView && !hideMessageComposer\">\n <cometchat-message-composer #messageComposerRef\n [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n [disableSoundForMessages]=\"disableSoundForMessages\"\n [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n [headerView]=\"messageComposerConfiguration.headerView\"\n [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n [onError]=\"messageComposerConfiguration.onError\"\n [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n [voiceRecordingIconURL]=\"messageComposerConfiguration.voiceRecordingIconURL\"\n [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n >\n </cometchat-message-composer>\n </div>\n <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n class=\"cc-messages__composer--customview\">\n <ng-container\n *ngTemplateOutlet=\"messageComposerView;context:{ user: user, group: group }\">\n </ng-container>\n </div>\n </div>\n <div class=\"cc-messages__livereaction\">\n <cometchat-live-reaction *ngIf=\"liveReaction\"\n [reactionIconURL]=\"reactionName\"\n [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n </div>\n <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n [onError]=\"threadedMessageConfiguration.onError\"\n [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n [messageListView]=\"threadedMessageConfiguration.messageListView\"\n [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n ></cometchat-threaded-messages>\n </div>\n\n <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n <cometchat-details\n [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n [data]=\"setDetailsTemplate()\"\n [customProfileView]=\"detailsConfiguration.customProfileView\"\n [subtitleView]=\"detailsConfiguration.subtitleView\"\n [hideProfile]=\"detailsConfiguration.hideProfile\"\n [onError]=\"detailsConfiguration.onError\"\n [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n [user]=\"user\" [group]=\"group\"></cometchat-details>\n </div>\n</div>\n<ng-template #headerMenu>\n <div class=\"cc-messages__headermenu\">\n <div class=\"cc-messages__auxiliarymenu\"\n *ngIf=\"getAuxilaryView(); else elseBlock\">\n <ng-container\n *ngTemplateOutlet=\"getAuxilaryView();context:{ user: user, group: group }\">\n </ng-container>\n </div>\n <ng-template #elseBlock>\n <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n [callButtonsStyle]=\"callButtonsStyle\">\n </cometchat-call-buttons>\n </ng-template>\n <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n [buttonStyle]=\"detailsButtonStyle\"\n (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: ["hideSearch", "footerView", "user", "group", "currentAskAIBot", "subtitleText", "sendIconUrl", "waitIcon", "errorIcon", "botFirstMessageText", "closeButtonIconURL", "sendButtonIconURL", "avatarStyle", "aiBotChatHeaderStyle", "aiBotChatContainerStyle", "datePattern", "alignment"] }, { type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "passwordGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "hideReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "customSoundForMessages", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters", "sendButtonIconURL"], outputs: ["childEvent"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "userMemberWrapperConfiguration", "messageComposerConfiguration", "threadedMessagesStyle", "hideMessageComposer", "messageComposerView", "messageListView", "disableSoundForMessages"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-messages__wrapper\">\n <cometchat-backdrop *ngIf=\"showAiBotChat\">\n <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n </cometchat-backdrop>\n <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n <div *ngIf=\"messageHeaderView; else customHeaderView\"\n class=\"cc-messages__header-customview\">\n <ng-container\n *ngTemplateOutlet=\"messageHeaderView;context:{ user: user, group: group }\">\n </ng-container>\n </div>\n <ng-template #customHeaderView>\n <cometchat-message-header [user]=\"user\" [group]=\"group\"\n [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n [menu]=\"headerMenu\"\n [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n [onError]=\"messageHeaderConfiguration.onError\"\n [onBack]=\"messageHeaderConfiguration.onBack\"\n [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n </cometchat-message-header>\n </ng-template>\n </div>\n <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n <cometchat-message-list #messageListRef\n [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n [messageInformationConfiguration]=\"\n messageListConfiguration.messageInformationConfiguration\"\n [disableSoundForMessages]=\"disableSoundForMessages\"\n [customSoundForMessages]=\"customSoundForIncomingMessages\"\n [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n [user]=\"user\" [group]=\"group\"\n [errorStateView]=\"messageListConfiguration.errorStateView\"\n [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n [hideReceipt]=\"messageListConfiguration.hideReceipt\"\n [readIcon]=\"messageListConfiguration.readIcon\"\n [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n [sentIcon]=\"messageListConfiguration.sentIcon\"\n [waitIcon]=\"messageListConfiguration.waitIcon\"\n [errorIcon]=\"messageListConfiguration.errorIcon\"\n [alignment]=\"messageListConfiguration.alignment\"\n [showAvatar]=\"messageListConfiguration.showAvatar\"\n [datePattern]=\"messageListConfiguration.datePattern\"\n [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n [templates]=\"messageListConfiguration.templates\"\n [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n [headerView]=\"messageListConfiguration.headerView\"\n [footerView]=\"messageListConfiguration.footerView\"\n [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n [onError]=\"messageListConfiguration.onError\"\n [hideError]=\"messageListConfiguration.hideError\"\n [disableMentions]=\"messageListConfiguration.disableMentions\"\n [textFormatters]=\"messageListConfiguration?.textFormatters\">\n </cometchat-message-list>\n </div>\n <ng-container *ngIf=\"messageListView\">\n <ng-container\n *ngTemplateOutlet=\"messageListView;context:{ user: user, group: group }\">\n </ng-container>\n </ng-container>\n\n <div class=\"cc-messages__composer\"\n *ngIf=\"!messageComposerView && !hideMessageComposer\">\n <cometchat-message-composer #messageComposerRef\n [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n [disableSoundForMessages]=\"disableSoundForMessages\"\n [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n [headerView]=\"messageComposerConfiguration.headerView\"\n [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n [onError]=\"messageComposerConfiguration.onError\"\n [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n [voiceRecordingIconURL]=\"messageComposerConfiguration.voiceRecordingIconURL\"\n [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n >\n </cometchat-message-composer>\n </div>\n <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n class=\"cc-messages__composer--customview\">\n <ng-container\n *ngTemplateOutlet=\"messageComposerView;context:{ user: user, group: group }\">\n </ng-container>\n </div>\n </div>\n <div class=\"cc-messages__livereaction\">\n <cometchat-live-reaction *ngIf=\"liveReaction\"\n [reactionIconURL]=\"reactionName\"\n [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n </div>\n <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n [onError]=\"threadedMessageConfiguration.onError\"\n [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n [messageListView]=\"threadedMessageConfiguration.messageListView\"\n [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n ></cometchat-threaded-messages>\n </div>\n\n <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n <cometchat-details\n [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n [data]=\"setDetailsTemplate()\"\n [customProfileView]=\"detailsConfiguration.customProfileView\"\n [subtitleView]=\"detailsConfiguration.subtitleView\"\n [hideProfile]=\"detailsConfiguration.hideProfile\"\n [onError]=\"detailsConfiguration.onError\"\n [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n [user]=\"user\" [group]=\"group\"></cometchat-details>\n </div>\n</div>\n<ng-template #headerMenu>\n <div class=\"cc-messages__headermenu\">\n <div class=\"cc-messages__auxiliarymenu\"\n *ngIf=\"getAuxilaryView(); else elseBlock\">\n <ng-container\n *ngTemplateOutlet=\"getAuxilaryView();context:{ user: user, group: group }\">\n </ng-container>\n </div>\n <ng-template #elseBlock>\n <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n [callButtonsStyle]=\"callButtonsStyle\">\n </cometchat-call-buttons>\n </ng-template>\n <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n [buttonStyle]=\"detailsButtonStyle\"\n (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }, { type: i0.ElementRef }]; }, propDecorators: { messageComposerRef: [{
type: ViewChild,
args: ["messageComposerRef", { static: false }]
}], messageListRef: [{
type: ViewChild,
args: ["messageListRef", { static: false }]
}], user: [{
type: Input
}], group: [{
type: Input
}], currentAskAIBot: [{
type: Input
}], hideMessageComposer: [{
type: Input
}], disableTyping: [{
type: Input
}], messageHeaderConfiguration: [{
type: Input
}], messageListConfiguration: [{
type: Input
}], messageComposerConfiguration: [{
type: Input
}], threadedMessageConfiguration: [{
type: Input
}], detailsConfiguration: [{
type: Input
}], customSoundForIncomingMessages: [{
type: Input
}], customSoundForOutgoingMessages: [{
type: Input
}], disableSoundForMessages: [{
type: Input
}], messagesStyle: [{
type: Input
}], messageHeaderView: [{
type: Input
}], messageComposerView: [{
type: Input
}], messageListView: [{
type: Input
}], hideMessageHeader: [{
type: Input
}], hideDetails: [{
type: Input
}], auxiliaryMenu: [{
type: Input
}] } });
class CometChatTabsComponent {
constructor(ref) {
this.ref = ref;
this.tabAlignment = TabAlignment.top;
this.disableDragging = true;
this.tabsStyle = { height: "100%", width: "100%" };
this.tabs = [];
this.keepAlive = false;
this.openViewOnCLick = (tabItem) => {
if (tabItem && tabItem.childView) {
this.childView = tabItem.childView;
this.activeTab = tabItem;
this.ref.detectChanges();
}
};
}
ngOnInit() {
}
ngOnChanges() {
let index = this.tabs.findIndex((item) => item.isActive === true);
if (this.tabs.length > 0) {
this.openViewOnCLick(this.tabs[index && index >= 0 ? index : 0]);
}
}
getButtonStyle(tab) {
const { style = {} } = tab || {};
const { id } = this.activeTab || {};
const active = id === tab?.id;
var textStyle = tab.iconURL ? {} : {
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "7px"
};
return {
background: active ? style.activeBackground : style.background,
buttonTextFont: active ? style.activeTitleTextFont : style.titleTextFont,
buttonTextColor: active ? style.activeTitleTextColor : style.titleTextColor,
buttonIconTint: active ? style.activeIconTint : style.iconTint,
height: style.height,
width: style.width,
border: style.border,
borderRadius: style.borderRadius,
gap: "0",
padding: "0",
cursor: "pointer",
...textStyle
};
}
showTabs(tab) {
return {
display: tab.id == this.activeTab.id ? "block" : "none"
};
}
getTabsStyle() {
const alignment = (() => {
switch (this.tabAlignment) {
case TabAlignment.top:
return {
top: "0",
left: "0",
};
default:
return {
bottom: "0",
left: "0",
};
}
})();
return {
background: this.tabsStyle.background,
border: this.tabsStyle.border,
borderRadius: this.tabsStyle.borderRadius,
...alignment,
position: this.disableDragging ? "initial" : "absolute"
};
}
getWrapperStyle() {
return (() => {
switch (this.tabAlignment) {
case TabAlignment.top:
return {
display: "flex",
justifyContent: "flex-start",
flexDirection: "column"
};
default:
return {
display: "flex",
justifyContent: "flex-start",
flexDirection: "column-reverse"
};
}
})();
}
getTabsPlacement() {
return {
display: "flex",
flexDirection: "row"
};
}
}
CometChatTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CometChatTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatTabsComponent, selector: "cometchat-tabs", inputs: { tabAlignment: "tabAlignment", disableDragging: "disableDragging", tabsStyle: "tabsStyle", tabs: "tabs", keepAlive: "keepAlive" }, usesOnChanges: true, ngImport: i0, template: " <div class=\"cc-tabs-wrapper\" [ngStyle]=\"getWrapperStyle()\">\n <div class=\"cc-tabs\" [ngStyle]=\"getTabsStyle()\">\n <cometchat-draggable [draggableStyle]=\"tabsStyle\" *ngIf=\"!disableDragging; else fixedTabs\">\n <ng-container *ngTemplateOutlet=\"tabsContainer\">\n </ng-container>\n </cometchat-draggable>\n <ng-template #fixedTabs>\n <ng-container *ngTemplateOutlet=\"tabsContainer\">\n </ng-container>\n </ng-template>\n </div>\n <div class=\"cc-child-view\" *ngIf=\"!keepAlive; else aliveTabs\">\n\n\n <ng-container [ngTemplateOutlet]=\"childView\" >\n\n </ng-container>\n </div>\n\n\n</div>\n<ng-template #previousChild>\n <ng-container [ngTemplateOutlet]=\"previousTab.childView\" >\n\n </ng-container>\n</ng-template>\n<ng-template #tabsContainer>\n <div class=\"cc__tab-item\" [ngStyle]=\"getTabsPlacement()\">\n <cometchat-icon-button [alignment]=\"'column'\" *ngFor=\"let tab of tabs\" [iconURL]=\"tab.iconURL\" [text]=\"tab.title\" [buttonStyle]=\"getButtonStyle(tab)\" (cc-button-clicked)=\"openViewOnCLick(tab)\"></cometchat-icon-button>\n </div>\n\n</ng-template>\n\n<ng-template #aliveTabs>\n <div class=\"cc-child-view\" >\n <div [ngStyle]=\"showTabs(tab)\" class=\"cc-child-container\" *ngFor=\"let tab of tabs\">\n <ng-container [ngTemplateOutlet]=\"tab.childView\" >\n\n </ng-container>\n </div>\n\n </div>\n</ng-template>", styles: [".cc-tabs-wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start}.cc-child-view{height:100%;width:100%;overflow:hidden}.cc-tabs{height:-moz-fit-content;height:fit-content;margin:8px 0 12px}.cc__tab-item{display:flex;height:100%;width:100%}cometchat-icon-button{height:inherit;width:inherit}.cc-child-container{height:100%;width:100%;display:none}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabsComponent, decorators: [{
type: Component,
args: [{ selector: 'cometchat-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: " <div class=\"cc-tabs-wrapper\" [ngStyle]=\"getWrapperStyle()\">\n <div class=\"cc-tabs\" [ngStyle]=\"getTabsStyle()\">\n <cometchat-draggable [draggableStyle]=\"tabsStyle\" *ngIf=\"!disableDragging; else fixedTabs\">\n <ng-container *ngTemplateOutlet=\"tabsContainer\">\n </ng-container>\n </cometchat-draggable>\n <ng-template #fixedTabs>\n <ng-container *ngTemplateOutlet=\"tabsContainer\">\n </ng-container>\n </ng-template>\n </div>\n <div class=\"cc-child-view\" *ngIf=\"!keepAlive; else aliveTabs\">\n\n\n <ng-container [ngTemplateOutlet]=\"childView\" >\n\n </ng-container>\n </div>\n\n\n</div>\n<ng-template #previousChild>\n <ng-container [ngTemplateOutlet]=\"previousTab.childView\" >\n\n </ng-container>\n</ng-template>\n<ng-template #tabsContainer>\n <div class=\"cc__tab-item\" [ngStyle]=\"getTabsPlacement()\">\n <cometchat-icon-button [alignment]=\"'column'\" *ngFor=\"let tab of tabs\" [iconURL]=\"tab.iconURL\" [text]=\"tab.title\" [buttonStyle]=\"getButtonStyle(tab)\" (cc-button-clicked)=\"openViewOnCLick(tab)\"></cometchat-icon-button>\n </div>\n\n</ng-template>\n\n<ng-template #aliveTabs>\n <div class=\"cc-child-view\" >\n <div [ngStyle]=\"showTabs(tab)\" class=\"cc-child-container\" *ngFor=\"let tab of tabs\">\n <ng-container [ngTemplateOutlet]=\"tab.childView\" >\n\n </ng-container>\n </div>\n\n </div>\n</ng-template>", styles: [".cc-tabs-wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start}.cc-child-view{height:100%;width:100%;overflow:hidden}.cc-tabs{height:-moz-fit-content;height:fit-content;margin:8px 0 12px}.cc__tab-item{display:flex;height:100%;width:100%}cometchat-icon-button{height:inherit;width:inherit}.cc-child-container{height:100%;width:100%;display:none}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabAlignment: [{
type: Input
}], disableDragging: [{
type: Input
}], tabsStyle: [{
type: Input
}], tabs: [{
type: Input
}], keepAlive: [{
type: Input
}] } });
/**
*
* CometChatGroups is a wrapper component which consists of CometChatListBaseComponent and CometChatGroupListComponent.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatGroupsComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.hideSeparator = false;
this.selectionMode = SelectionMode.none;
this.searchPlaceholder = localize("SEARCH");
this.hideError = false;
this.searchIconURL = "assets/search.svg";
this.hideSearch = false;
this.title = localize("GROUPS");
this.onError = (error) => {
console.log(error);
};
this.loadingIconURL = "assets/Spinner.svg";
this.privateGroupIcon = "assets/Private.svg";
/**
* @deprecated
*
* This property is deprecated as of version 4.3.7 due to newer property 'passwordGroupIcon'. It will be removed in subsequent versions.
*/
this.protectedGroupIcon = "assets/Locked.svg";
this.passwordGroupIcon = undefined;
this.emptyStateText = localize("NO_GROUPS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.titleAlignment = TitleAlignment.left;
this.selectionmodeEnum = SelectionMode;
this.state = States.loading;
this.statusIndicatorStyle = {
height: "12px",
width: "12px",
borderRadius: "16px"
};
this.avatarStyle = {
borderRadius: "16px",
width: "32px",
height: "32px",
};
this.groupsStyle = {
width: "100%",
height: "100%",
separatorColor: "rgb(222 222 222 / 46%)"
};
this.listItemStyle = {};
this.listStyle = {};
this.limit = 30;
this.searchKeyword = "";
this.groupsList = [];
this.groupsListenerId = "groupsList_" + new Date().getTime();
this.loggedInUser = null;
this.statusColor = {
private: "",
password: "#F7A500",
public: ""
};
this.firstReload = false;
this.connectionListenerId = "connection_" + new Date().getTime();
this.onScrolledToBottom = null;
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: "#2196F3",
uncheckedBackgroundColor: "#ccc"
};
/**
* @param {CometChat.Group} group
*/
this.getGroupIcon = (group) => {
let status;
if (group) {
switch (group.getType()) {
case CometChatUIKitConstants.GroupTypes.password:
status = this.passwordGroupIcon || this.protectedGroupIcon;
break;
case CometChatUIKitConstants.GroupTypes.private:
status = this.privateGroupIcon;
break;
default:
status = null;
break;
}
}
return status;
};
this.findGroupIndex = (groupToFind) => {
let groupIndex = this.groupsList.findIndex((g, k) => g.getGuid() === groupToFind.getGuid());
return groupIndex;
};
this.fetchNextGroupList = (state = States.loading) => {
this.onScrolledToBottom = null;
this.state = state;
this.ref.detectChanges();
if (this.requestBuilder && this.requestBuilder?.pagination && (this.requestBuilder.pagination?.current_page == 0 || this.requestBuilder.pagination?.current_page != this.requestBuilder.pagination.total_pages)) {
this.onScrolledToBottom = this.fetchNextGroupList;
try {
this.requestBuilder.fetchNext().then((groupList) => {
if ((groupList.length <= 0 && this.groupsList?.length <= 0) || (groupList.length === 0 && this.groupsList?.length <= 0)) {
this.state = States.empty;
this.ref.detectChanges();
}
else {
if (state == States.loaded) {
this.groupsList = [...groupList];
}
else {
this.groupsList = [...this.groupsList, ...groupList];
}
this.state = States.loaded;
this.ref.detectChanges();
}
if (this.firstReload) {
this.attachConnectionListeners();
this.firstReload = false;
}
}, (error) => {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.ref.detectChanges();
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
if (this.groupsList?.length <= 0) {
this.state = States.error;
this.ref.detectChanges();
}
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.ref.detectChanges();
}
}
else {
this.state = States.loaded;
this.ref.detectChanges();
}
};
/**
* @param {CometChat.Group} group
*/
this.onClick = (group) => {
if (this.onItemClick) {
this.onItemClick(group);
}
};
/**
* @param {CometChat.Group} group
*/
this.getMemberCount = (group) => {
return group.getMembersCount() > 1 ? group.getMembersCount() + " " + localize("MEMBERS") : group.getMembersCount() + " " + localize("MEMBER");
};
/**
* @param {CometChat.Group} group
*/
this.getActiveGroup = (group) => {
if (this.selectionMode == SelectionMode.none || !this.selectionMode) {
if (group.getGuid() == this.activeGroup?.getGuid()) {
return true;
}
else {
return false;
}
}
else {
return false;
}
};
/**
* @param {string} key
*/
this.onSearch = (key) => {
try {
this.searchKeyword = key;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.setRequestBuilder();
this.groupsList = [];
this.ref.detectChanges();
this.fetchNextGroupList();
}, 500);
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
this.groupStyle = () => {
return {
height: this.groupsStyle.height,
width: this.groupsStyle.width,
background: this.groupsStyle.background,
border: this.groupsStyle.border,
borderRadius: this.groupsStyle.borderRadius
};
};
this.subtitleStyle = () => {
return {
font: this.groupsStyle.subTitleTextFont,
color: this.groupsStyle.subTitleTextColor
};
};
this.state = States.loading;
}
ngOnChanges(changes) {
}
ngOnInit() {
this.firstReload = true;
this.onScrolledToBottom = this.fetchNextGroupList;
this.setThemeStyle();
this.subscribeToEvents();
CometChat.getLoggedinUser().then((user) => {
this.setRequestBuilder();
this.fetchNextGroupList();
this.loggedInUser = user;
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.state = States.loading;
this.attachListeners();
}
onGroupSelected(group, event) {
let selected = event?.detail?.checked;
if (this.onSelect) {
this.onSelect(group, selected);
}
}
// subscribe to global events
subscribeToEvents() {
this.ccGroupDeleted = CometChatGroupEvents.ccGroupDeleted.subscribe((group) => {
this.removeGroup(group);
if (this.activeGroup && group.getGuid() == this.activeGroup.getGuid()) {
this.activeGroup = null;
this.ref.detectChanges();
}
});
this.ccGroupCreated = CometChatGroupEvents.ccGroupCreated.subscribe((group) => {
this.addGroup(group);
if (!this.activeGroup) {
this.activeGroup = group;
}
});
this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
if (this.activeGroup && this.activeGroup.getGuid() == item?.userAddedIn.getGuid()) {
this.activeGroup == item?.userAddedIn;
this.ref.detectChanges();
}
this.updateGroup(item?.userAddedIn);
});
this.ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
if (this.activeGroup && this.activeGroup.getGuid() == item?.kickedFrom.getGuid()) {
this.activeGroup == item?.kickedFrom;
this.ref.detectChanges();
}
this.updateGroup(item?.kickedFrom);
});
this.ccGroupMemberJoined = CometChatGroupEvents.ccGroupMemberJoined.subscribe((item) => {
if (this.activeGroup && this.activeGroup.getGuid() == item?.joinedGroup.getGuid()) {
this.activeGroup == item?.joinedGroup;
this.ref.detectChanges();
}
this.updateGroup(item?.joinedGroup);
});
this.ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe((item) => {
if (this.activeGroup && this.activeGroup.getGuid() == item?.kickedFrom.getGuid()) {
this.activeGroup == item?.kickedFrom;
this.ref.detectChanges();
}
this.updateGroup(item?.kickedFrom);
});
this.ccOwnershipChanged = CometChatGroupEvents.ccOwnershipChanged.subscribe((item) => {
if (this.activeGroup && this.activeGroup.getGuid() == item?.group.getGuid()) {
this.activeGroup == item?.group;
this.ref.detectChanges();
}
this.updateGroup(item?.group);
});
this.ccGroupLeft = CometChatGroupEvents.ccGroupLeft.subscribe((item) => {
if (item.leftGroup.getType() == CometChatUIKitConstants.GroupTypes.private) {
this.removeGroup(item.leftGroup);
}
else {
this.updateGroup(item.leftGroup);
}
});
}
// unsubscribe to subscribed events.
unsubscribeToEvents() {
this.ccGroupMemberAdded?.unsubscribe();
this.ccGroupMemberBanned?.unsubscribe();
this.ccGroupMemberJoined?.unsubscribe();
this.ccGroupMemberKicked?.unsubscribe();
this.ccOwnershipChanged?.unsubscribe();
this.ccGroupLeft?.unsubscribe();
}
ngOnDestroy() {
this.unsubscribeToEvents();
this.groupsRequest = null;
this.ref.detach();
this.removeListener();
}
/**
* @param {CometChat.Group} group
*/
updateGroup(group) {
let groupsList = [...this.groupsList];
//search for group
let groupKey = groupsList.findIndex((g, k) => g.getGuid() === group.getGuid());
if (groupKey > -1) {
groupsList.splice(groupKey, 1, group);
this.groupsList = groupsList;
this.ref.detectChanges();
}
}
fetchNewUsers() {
this.setRequestBuilder();
let state = this.firstReload ? States.loading : States.loaded;
this.fetchNextGroupList(state);
}
attachConnectionListeners() {
CometChat.addConnectionListener(this.connectionListenerId, new CometChat.ConnectionListener({
onConnected: () => {
console.log("ConnectionListener =>connected");
this.fetchNewUsers();
},
inConnecting: () => {
console.log("ConnectionListener => In connecting");
},
onDisconnected: () => {
console.log("ConnectionListener => On Disconnected");
}
}));
}
attachListeners() {
CometChat.addGroupListener(this.groupsListenerId, new CometChat.GroupListener({
onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
const groupIndex = this.findGroupIndex(changedGroup);
if (groupIndex > -1) {
let groupsList = [...this.groupsList];
const groupFound = groupsList[groupIndex];
if (changedUser.getUid() == this.loggedInUser?.getUid()) {
groupFound.setScope(newScope);
this.ref.detectChanges();
}
groupsList.splice(groupIndex, 1, groupFound);
this.groupsList = groupsList;
}
},
onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
const groupIndex = this.findGroupIndex(kickedFrom);
if (groupIndex > -1) {
let groupsList = [...this.groupsList];
let groupFound = groupsList[groupIndex];
if (kickedUser.getUid() === this.loggedInUser?.getUid()) {
groupFound.setHasJoined(false);
}
groupFound.setMembersCount(kickedFrom.getMembersCount());
groupsList.splice(groupIndex, 1, groupFound);
this.groupsList = groupsList;
this.ref.detectChanges();
}
},
onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
const groupIndex = this.findGroupIndex(bannedFrom);
if (groupIndex > -1) {
let groupsList = [...this.groupsList];
let groupFound = groupsList[groupIndex];
if (bannedUser.getUid() === this.loggedInUser?.getUid()) {
this.removeGroup(bannedFrom);
return;
}
groupFound.setMembersCount(bannedFrom.getMembersCount());
groupsList.splice(groupIndex, 1, groupFound);
this.groupsList = groupsList;
this.ref.detectChanges();
}
},
onGroupMemberUnbanned: (message, unbannedUser, unbannedBy, unbannedFrom) => {
const groupIndex = this.findGroupIndex(unbannedFrom);
if (groupIndex > -1) {
let groupsList = [...this.groupsList];
let groupFound = groupsList[groupIndex];
if (unbannedUser.getUid() === this.loggedInUser?.getUid()) {
groupFound.setHasJoined(false);
}
groupsList.splice(groupIndex, 1, groupFound);
this.groupsList = groupsList;
}
else {
this.addGroup(unbannedFrom);
}
this.ref.detectChanges();
},
onMemberAddedToGroup: (message, userAdded, userAddedBy, userAddedIn) => {
if (this.searchKeyword)
return;
const groupIndex = this.findGroupIndex(userAddedIn);
if (groupIndex > -1) {
let groupsList = [...this.groupsList];
let groupFound = groupsList[groupIndex];
if (userAdded.getUid() === this.loggedInUser?.getUid()) {
groupFound.setHasJoined(true);
}
groupFound.setMembersCount(userAddedIn.getMembersCount());
groupsList.splice(groupIndex, 1, groupFound);
this.groupsList = groupsList;
}
else {
userAddedIn.setHasJoined(true);
this.addGroup(userAddedIn);
}
this.ref.detectChanges();
},
onGroupMemberLeft: (message, leavingUser, group) => {
const groupIndex = this.findGroupIndex(group);
if (groupIndex > -1) {
let groupsList = [...this.groupsList];
let groupFound = groupsList[groupIndex];
if (leavingUser.getUid() === this.loggedInUser?.getUid()) {
groupFound.setHasJoined(false);
}
groupFound.setMembersCount(group.getMembersCount());
groupsList.splice(groupIndex, 1, groupFound);
this.groupsList = groupsList;
this.ref.detectChanges();
}
},
onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
const groupIndex = this.findGroupIndex(joinedGroup);
if (groupIndex > -1) {
let groupsList = [...this.groupsList];
let groupFound = groupsList[groupIndex];
if (joinedUser.getUid() === this.loggedInUser?.getUid()) {
groupFound.setHasJoined(true);
}
groupFound.setMembersCount(joinedGroup.getMembersCount());
groupsList.splice(groupIndex, 1, groupFound);
this.groupsList = groupsList;
this.ref.detectChanges();
}
},
}));
}
removeListener() {
CometChat.removeGroupListener(this.groupsListenerId);
CometChat.removeConnectionListener(this.connectionListenerId);
}
/**
* @param {CometChat.Group} group
*/
getStatusIndicatorColor(group) {
return this.statusColor[group?.getType()];
}
setRequestBuilder() {
if (!this.groupsRequestBuilder) {
this.groupsRequestBuilder = new CometChat.GroupsRequestBuilder()
.setLimit(this.limit)
.setSearchKeyword(this.searchKeyword);
}
if (this.searchRequestBuilder) {
this.requestBuilder = this.searchRequestBuilder.build();
}
this.requestBuilder = this.groupsRequestBuilder.setSearchKeyword(this.searchKeyword).build();
}
/**
* @param {CometChat.Group} group
*/
removeGroup(group) {
let groupsList = [...this.groupsList];
//search for group
let groupKey = groupsList.findIndex((g, k) => g.getGuid() === group.getGuid());
if (groupKey > -1) {
groupsList.splice(groupKey, 1);
this.groupsList = groupsList;
this.ref.detectChanges();
}
}
/**
* addGroup
* @param group
*/
addGroup(group) {
this.groupsList.unshift(group);
this.ref.detectChanges();
}
setThemeStyle() {
this.setGroupsStyle();
this.setListItemStyle();
this.setAvatarStyle();
this.setStatusStyle();
this.statusColor.private = this.groupsStyle.privateGroupIconBackground ?? this.themeService.theme.palette.getSuccess();
this.statusColor.password = this.groupsStyle.passwordGroupIconBackground ?? "#F7A500";
this.listStyle = {
titleTextFont: this.groupsStyle.titleTextFont,
titleTextColor: this.groupsStyle.titleTextColor,
emptyStateTextFont: this.groupsStyle.emptyStateTextFont,
emptyStateTextColor: this.groupsStyle.emptyStateTextColor,
errorStateTextFont: this.groupsStyle.errorStateTextFont,
errorStateTextColor: this.groupsStyle.errorStateTextColor,
loadingIconTint: this.groupsStyle.loadingIconTint,
separatorColor: this.groupsStyle.separatorColor,
searchIconTint: this.groupsStyle.searchIconTint,
searchBorder: this.groupsStyle.searchBorder,
searchBorderRadius: this.groupsStyle.searchBorderRadius,
searchBackground: this.groupsStyle.searchBackground,
searchPlaceholderTextFont: this.groupsStyle.searchPlaceholderTextFont,
searchPlaceholderTextColor: this.groupsStyle.searchPlaceholderTextColor,
searchTextFont: this.groupsStyle.searchTextFont,
searchTextColor: this.groupsStyle.searchTextColor,
};
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: this.themeService.theme.palette.getAccent100(),
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: this.themeService.theme.palette.getAccent50()
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setStatusStyle() {
let defaultStyle = {
height: "12px",
width: "12px",
border: "none",
borderRadius: "24px",
};
this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
}
setGroupsStyle() {
let defaultStyle = new GroupsStyle({
subTitleTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
subTitleTextColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
separatorColor: this.themeService.theme.palette.getAccent400(),
privateGroupIconBackground: this.themeService.theme.palette.getSuccess(),
passwordGroupIconBackground: "RGB(247, 165, 0)",
searchIconTint: this.themeService.theme.palette.getAccent600(),
searchPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
searchBackground: this.themeService.theme.palette.getAccent100(),
searchPlaceholderTextFont: fontHelper(this.themeService.theme.typography.text3),
searchTextColor: this.themeService.theme.palette.getAccent600(),
searchTextFont: fontHelper(this.themeService.theme.typography.text3)
});
this.groupsStyle = { ...defaultStyle, ...this.groupsStyle };
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
};
}
}
CometChatGroupsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatGroupsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupsComponent, selector: "cometchat-groups", inputs: { groupsRequestBuilder: "groupsRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", menu: "menu", options: "options", activeGroup: "activeGroup", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", hideError: "hideError", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onSelect: "onSelect", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", groupsStyle: "groupsStyle", listItemStyle: "listItemStyle", onItemClick: "onItemClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-groups\" [ngStyle]=\"groupStyle()\">\n <div class=\"cc-menus\" *ngIf=\"menu\">\n\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n\n</div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n [list]=\"groupsList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-group>\n <cometchat-list-item [title]=\"group?.name\" [avatarURL]=\"group?.icon\" [avatarName]=\"group?.name\"\n [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [statusIndicatorColor]=\"getStatusIndicatorColor(group)\" [statusIndicatorIcon]=\"getGroupIcon(group)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(group)\" [isActive]=\"getActiveGroup(group)\">\n <div slot=\"subtitleView\" class=\"cc-groups__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: group }\">\n </ng-container>\n </div>\n <ng-template #groupSubtitle>\n <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-groups__subtitle-view\"> {{getMemberCount(group)}} </div>\n </ng-template>\n\n <div slot=\"menuView\" class=\"cc-groups__options\" *ngIf=\"options\">\n <cometchat-menu-list [data]=\"options(group)\">\n\n </cometchat-menu-list>\n </div>\n <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-groups__tail-view\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n </cometchat-list-item>\n <ng-template #tailView>\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"onGroupSelected(group,$event)\"></cometchat-radio-button>\n\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onGroupSelected(group,$event)\"></cometchat-checkbox>\n\n </div>\n </ng-template>\n </ng-template>\n</div>", styles: [".cc-groups{height:100%;width:100%;box-sizing:border-box}.cc-groups__tail-view{position:relative}.cc-menus{position:absolute;right:12px;top:6px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-groups", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-groups\" [ngStyle]=\"groupStyle()\">\n <div class=\"cc-menus\" *ngIf=\"menu\">\n\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n\n</div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n [list]=\"groupsList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-group>\n <cometchat-list-item [title]=\"group?.name\" [avatarURL]=\"group?.icon\" [avatarName]=\"group?.name\"\n [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n [statusIndicatorColor]=\"getStatusIndicatorColor(group)\" [statusIndicatorIcon]=\"getGroupIcon(group)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(group)\" [isActive]=\"getActiveGroup(group)\">\n <div slot=\"subtitleView\" class=\"cc-groups__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: group }\">\n </ng-container>\n </div>\n <ng-template #groupSubtitle>\n <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-groups__subtitle-view\"> {{getMemberCount(group)}} </div>\n </ng-template>\n\n <div slot=\"menuView\" class=\"cc-groups__options\" *ngIf=\"options\">\n <cometchat-menu-list [data]=\"options(group)\">\n\n </cometchat-menu-list>\n </div>\n <div slot=\"tailView\" *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-groups__tail-view\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n </cometchat-list-item>\n <ng-template #tailView>\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"onGroupSelected(group,$event)\"></cometchat-radio-button>\n\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onGroupSelected(group,$event)\"></cometchat-checkbox>\n\n </div>\n </ng-template>\n </ng-template>\n</div>", styles: [".cc-groups{height:100%;width:100%;box-sizing:border-box}.cc-groups__tail-view{position:relative}.cc-menus{position:absolute;right:12px;top:6px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { groupsRequestBuilder: [{
type: Input
}], searchRequestBuilder: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], menu: [{
type: Input
}], options: [{
type: Input
}], activeGroup: [{
type: Input
}], hideSeparator: [{
type: Input
}], selectionMode: [{
type: Input
}], searchPlaceholder: [{
type: Input
}], hideError: [{
type: Input
}], searchIconURL: [{
type: Input
}], hideSearch: [{
type: Input
}], title: [{
type: Input
}], onError: [{
type: Input
}], onSelect: [{
type: Input
}], emptyStateView: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingIconURL: [{
type: Input
}], privateGroupIcon: [{
type: Input
}], protectedGroupIcon: [{
type: Input
}], passwordGroupIcon: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], titleAlignment: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], avatarStyle: [{
type: Input
}], groupsStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], onItemClick: [{
type: Input
}] } });
/**
*
* CometChatContactsComponent is used to render group members to add
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatContactsComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.title = localize("NEW_CHAT");
this.usersTabTitle = localize("USERS");
this.groupsTabTitle = localize("GROUPS");
this.usersConfiguration = new UsersConfiguration({});
this.groupsConfiguration = new GroupsConfiguration({});
this.closeIconURL = "assets/close2x.svg";
this.contactsStyle = {};
this.selectionMode = SelectionMode.none;
this.tabVisibility = TabsVisibility.usersAndGroups;
this.selectionLimit = 5;
this.tabs = [];
this.hideSubmitButton = true;
this.submitButtonText = "Submit";
this.selection = SelectionMode;
// public properties
this.usersRequestBuilder = new CometChat.UsersRequestBuilder().setLimit(30).hideBlockedUsers(true);
this.usersSearchRequestBuilder = new CometChat.UsersRequestBuilder().setLimit(30).hideBlockedUsers(true);
this.groupsRequestBuilder = new CometChat.GroupsRequestBuilder().setLimit(30).joinedOnly(true);
this.groupsSearchRequestBuilder = new CometChat.GroupsRequestBuilder().setLimit(30).joinedOnly(true);
this.tabItemStyle = {};
this.usersList = [];
this.groupsList = [];
this.submitButtonStyle = {
height: "100%",
width: "100%",
background: "rgb(51, 153, 255)",
padding: "8px",
buttonTextColor: "white",
buttonTextFont: "",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "none",
borderRadius: "8px"
};
this.titleStyle = {};
this.errorStyle = {};
this.isLimitReached = false;
this.tabsStyle = {};
this.onGroupSelected = (group) => {
var key = this.groupsList.findIndex((m) => m?.getGuid() === group.getGuid());
if (key >= 0) {
this.groupsList.splice(key, 1);
}
else {
this.groupsList.push(group);
}
this.isLimitReached = this.groupsList.length + this.usersList.length > this.selectionLimit;
this.ref.detectChanges();
};
this.onUserSelected = (user) => {
const key = this.usersList.findIndex((m) => m?.getUid() === user.getUid());
if (key >= 0) {
this.usersList.splice(key, 1);
}
else {
this.usersList.push(user);
}
this.isLimitReached = this.groupsList.length + this.usersList.length > this.selectionLimit;
this.ref.detectChanges();
};
this.userClicked = (user) => {
if (this.onItemClick) {
this.onItemClick(user);
}
};
this.groupClicked = (group) => {
if (this.onItemClick) {
this.onItemClick(undefined, group);
}
};
}
ngOnInit() {
this.setcontactsStyle();
this.usersList = [];
this.groupsList = [];
}
ngAfterViewInit() {
if (this.tabs?.length <= 0) {
if (this.tabVisibility == TabsVisibility.usersAndGroups) {
this.tabs = [
{
childView: this.usersRef,
title: this.usersTabTitle,
id: "users",
style: this.tabItemStyle
},
{
childView: this.groupsRef,
title: this.groupsTabTitle,
id: "groups",
style: this.tabItemStyle
}
];
}
else {
if (this.tabVisibility == TabsVisibility.users) {
this.tabs = [
{
childView: this.usersRef,
title: this.usersTabTitle,
id: "users",
style: this.tabItemStyle
}
];
}
else {
this.tabs = [
{
childView: this.groupsRef,
title: this.groupsTabTitle,
id: "groups",
style: this.tabItemStyle
}
];
}
}
this.ref.detectChanges();
}
}
closeClicked() {
if (this.onClose) {
this.onClose();
}
}
submitClicked() {
if (this.onSubmitButtonClick) {
this.onSubmitButtonClick(this.usersList, this.groupsList);
}
}
setcontactsStyle() {
let defaultStyle = new ContactsStyle({
background: this.themeService.theme.palette.getBackground(),
border: `none`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
errorStateTextColor: this.themeService.theme.palette.getError(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title2),
width: "100%",
height: "100%",
borderRadius: "none",
closeIconTint: this.themeService.theme.palette.getPrimary(),
submitButtonBackground: this.themeService.theme.palette.getPrimary(),
submitButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
submitButtonTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
padding: "0 100px",
tabBackground: "transparent",
tabTitleTextFont: fontHelper(this.themeService.theme.typography.text2),
tabTitleTextColor: this.themeService.theme.palette.getAccent(),
activeTabTitleTextFont: fontHelper(this.themeService.theme.typography.text2),
activeTabTitleTextColor: this.themeService.theme.palette.getAccent("light"),
activeTabBackground: this.themeService.theme.palette.getAccent900("light"),
activeTabBorder: "none",
tabHeight: "fit-content",
tabWidth: "100%"
});
this.contactsStyle = { ...defaultStyle, ...this.contactsStyle };
this.submitButtonStyle.background = this.contactsStyle.submitButtonBackground;
this.submitButtonStyle.buttonTextFont = this.contactsStyle.submitButtonTextFont;
this.submitButtonStyle.buttonTextColor = this.contactsStyle.submitButtonTextColor;
this.tabsStyle = {
background: this.themeService.theme.palette.getAccent100(),
borderRadius: "8px",
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`
};
this.tabItemStyle = new TabItemStyle({
height: this.contactsStyle.tabHeight,
width: this.contactsStyle.tabWidth,
background: this.contactsStyle.tabBackground,
activeBackground: this.contactsStyle.activeTabBackground,
titleTextColor: this.contactsStyle.tabTitleTextColor,
titleTextFont: this.contactsStyle.tabTitleTextFont,
activeIconTint: this.themeService.theme.palette.getPrimary(),
activeTitleTextColor: this.contactsStyle.activeTabTitleTextColor,
activeTitleTextFont: this.contactsStyle.activeTabTitleTextFont,
borderRadius: "8px"
});
this.closeButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.contactsStyle.closeIconTint || this.themeService.theme.palette.getPrimary()
};
this.wrapperStyle = {
height: this.contactsStyle.height,
width: this.contactsStyle.width,
background: this.contactsStyle.background,
border: this.contactsStyle.border,
borderRadius: this.contactsStyle.borderRadius
};
this.contactsPadding = {
padding: this.contactsStyle.padding
};
this.titleStyle = {
textFont: this.contactsStyle.titleTextFont,
textColor: this.contactsStyle.titleTextColor
};
this.errorStyle = {
textFont: this.contactsStyle.errorStateTextFont,
textColor: this.contactsStyle.errorStateTextColor
};
}
}
CometChatContactsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatContactsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatContactsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: { title: "title", usersTabTitle: "usersTabTitle", groupsTabTitle: "groupsTabTitle", usersConfiguration: "usersConfiguration", groupsConfiguration: "groupsConfiguration", onSubmitButtonClick: "onSubmitButtonClick", closeIconURL: "closeIconURL", contactsStyle: "contactsStyle", selectionMode: "selectionMode", onClose: "onClose", onItemClick: "onItemClick", tabVisibility: "tabVisibility", selectionLimit: "selectionLimit", tabs: "tabs", hideSubmitButton: "hideSubmitButton", submitButtonText: "submitButtonText" }, viewQueries: [{ propertyName: "usersRef", first: true, predicate: ["usersRef"], descendants: true }, { propertyName: "groupsRef", first: true, predicate: ["groupsRef"], descendants: true }], ngImport: i0, template: "<div class=\"cc-contacts\" [ngStyle]=\"wrapperStyle\">\n <div class=\"cc-contacts-title\">\n <cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n </div>\n <div class=\"cc-contacts-error\" *ngIf=\"isLimitReached\">\n <cometchat-label [text]=\"'max limit has reached'\"\n [labelStyle]=\"errorStyle\"></cometchat-label>\n </div>\n <div class=\"cc-contacts__wrapper\" [ngStyle]=\"contactsPadding\">\n <div class=\"cc-tabs\">\n <cometchat-tabs [tabs]=\"tabs\" [tabsStyle]=\"tabsStyle\" [keepAlive]=\"true\">\n <ng-template #usersRef>\n <cometchat-users [onItemClick]=\"usersConfiguration.onItemClick || userClicked\"\n [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder || usersRequestBuilder\"\n [hideSearch]=\"usersConfiguration.hideSearch\"\n [StatusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n [avatarStyle]=\"usersConfiguration.avatarStyle\"\n [searchIconURL]=\"usersConfiguration.searchIconURL\"\n [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder || usersSearchRequestBuilder\"\n [usersStyle]=\"usersConfiguration.usersStyle\"\n [subtitleView]=\"usersConfiguration.subtitleView\"\n [options]=\"usersConfiguration.options\"\n [emptyStateView]=\"usersConfiguration.emptyStateView\"\n [onSelect]=\"usersConfiguration.onSelect || onUserSelected\"\n [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n [errorStateView]=\"usersConfiguration.errorStateView\"\n [loadingStateView]=\"usersConfiguration.loadingStateView\"\n [listItemView]=\"usersConfiguration.listItemView\"\n [menu]=\"usersConfiguration.menu\"\n [hideSeparator]=\"usersConfiguration.hideSeparator\"\n [hideError]=\"usersConfiguration.hideError\"\n [selectionMode]=\"selectionMode\" [title]=\"''\"\n [disableUsersPresence]=\"usersConfiguration.disableUsersPresence\"\n ></cometchat-users>\n </ng-template>\n <ng-template #groupsRef>\n <cometchat-groups [onItemClick]=\"groupsConfiguration.onItemClick || groupClicked\"\n [groupsRequestBuilder]=\"groupsConfiguration.groupsRequestBuilder || groupsRequestBuilder\"\n [hideSearch]=\"groupsConfiguration.hideSearch\"\n [StatusIndicatorStyle]=\"groupsConfiguration.statusIndicatorStyle\"\n [avatarStyle]=\"groupsConfiguration.avatarStyle\"\n [searchIconURL]=\"groupsConfiguration.searchIconURL\"\n [searchRequestBuilder]=\"groupsConfiguration.searchRequestBuilder || groupsSearchRequestBuilder\"\n [groupsStyle]=\"groupsConfiguration.groupsStyle\"\n [subtitleView]=\"groupsConfiguration.subtitleView\"\n [options]=\"groupsConfiguration.options\"\n [emptyStateView]=\"groupsConfiguration.emptyStateView\"\n [onSelect]=\"groupsConfiguration.onSelect || onGroupSelected\"\n [loadingIconURL]=\"groupsConfiguration.loadingIconURL\"\n [errorStateView]=\"groupsConfiguration.errorStateView\"\n [loadingStateView]=\"groupsConfiguration.loadingStateView\"\n [listItemView]=\"groupsConfiguration.listItemView\"\n [menu]=\"groupsConfiguration.menu\"\n [hideSeparator]=\"groupsConfiguration.hideSeparator\"\n [hideError]=\"groupsConfiguration.hideError\"\n [selectionMode]=\"selectionMode\" [title]=\"''\"></cometchat-groups>\n </ng-template>\n </cometchat-tabs>\n </div>\n <div class=\"cc-contacts__buttons\" *ngIf=\"selectionMode != selection.none && !hideSubmitButton\">\n <cometchat-button [disabled]=\"isLimitReached\"\n class=\"cc-contacts__buttons--add\" [text]=\"submitButtonText\"\n [buttonStyle]=\"submitButtonStyle\"\n (click)=\"submitClicked()\"></cometchat-button>\n </div>\n </div>\n <div class=\"cc-close-button\">\n <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"closeButtonStyle\"\n (cc-button-clicked)=\"closeClicked()\">\n </cometchat-button>\n </div>\n</div>\n", styles: [".cc-contacts{display:flex;height:100%;width:100%;overflow:hidden;flex-direction:column}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-contacts__wrapper{height:100%;padding:8px;overflow:hidden;display:flex;flex-direction:column}.cc-close-button{position:absolute;right:8px;padding:8px}.cc-contacts__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-contacts__buttons--add{height:42px;width:100%}.cc-tabs{display:flex;height:100%;width:100%;overflow:hidden}cometchat-tabs{height:100%;width:100%}.cc-contacts-title,.cc-contacts-error{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}\n"], components: [{ type: CometChatTabsComponent, selector: "cometchat-tabs", inputs: ["tabAlignment", "disableDragging", "tabsStyle", "tabs", "keepAlive"] }, { type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatGroupsComponent, selector: "cometchat-groups", inputs: ["groupsRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "menu", "options", "activeGroup", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "emptyStateView", "errorStateView", "loadingIconURL", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "statusIndicatorStyle", "avatarStyle", "groupsStyle", "listItemStyle", "onItemClick"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatContactsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-contacts", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-contacts\" [ngStyle]=\"wrapperStyle\">\n <div class=\"cc-contacts-title\">\n <cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n </div>\n <div class=\"cc-contacts-error\" *ngIf=\"isLimitReached\">\n <cometchat-label [text]=\"'max limit has reached'\"\n [labelStyle]=\"errorStyle\"></cometchat-label>\n </div>\n <div class=\"cc-contacts__wrapper\" [ngStyle]=\"contactsPadding\">\n <div class=\"cc-tabs\">\n <cometchat-tabs [tabs]=\"tabs\" [tabsStyle]=\"tabsStyle\" [keepAlive]=\"true\">\n <ng-template #usersRef>\n <cometchat-users [onItemClick]=\"usersConfiguration.onItemClick || userClicked\"\n [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder || usersRequestBuilder\"\n [hideSearch]=\"usersConfiguration.hideSearch\"\n [StatusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n [avatarStyle]=\"usersConfiguration.avatarStyle\"\n [searchIconURL]=\"usersConfiguration.searchIconURL\"\n [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder || usersSearchRequestBuilder\"\n [usersStyle]=\"usersConfiguration.usersStyle\"\n [subtitleView]=\"usersConfiguration.subtitleView\"\n [options]=\"usersConfiguration.options\"\n [emptyStateView]=\"usersConfiguration.emptyStateView\"\n [onSelect]=\"usersConfiguration.onSelect || onUserSelected\"\n [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n [errorStateView]=\"usersConfiguration.errorStateView\"\n [loadingStateView]=\"usersConfiguration.loadingStateView\"\n [listItemView]=\"usersConfiguration.listItemView\"\n [menu]=\"usersConfiguration.menu\"\n [hideSeparator]=\"usersConfiguration.hideSeparator\"\n [hideError]=\"usersConfiguration.hideError\"\n [selectionMode]=\"selectionMode\" [title]=\"''\"\n [disableUsersPresence]=\"usersConfiguration.disableUsersPresence\"\n ></cometchat-users>\n </ng-template>\n <ng-template #groupsRef>\n <cometchat-groups [onItemClick]=\"groupsConfiguration.onItemClick || groupClicked\"\n [groupsRequestBuilder]=\"groupsConfiguration.groupsRequestBuilder || groupsRequestBuilder\"\n [hideSearch]=\"groupsConfiguration.hideSearch\"\n [StatusIndicatorStyle]=\"groupsConfiguration.statusIndicatorStyle\"\n [avatarStyle]=\"groupsConfiguration.avatarStyle\"\n [searchIconURL]=\"groupsConfiguration.searchIconURL\"\n [searchRequestBuilder]=\"groupsConfiguration.searchRequestBuilder || groupsSearchRequestBuilder\"\n [groupsStyle]=\"groupsConfiguration.groupsStyle\"\n [subtitleView]=\"groupsConfiguration.subtitleView\"\n [options]=\"groupsConfiguration.options\"\n [emptyStateView]=\"groupsConfiguration.emptyStateView\"\n [onSelect]=\"groupsConfiguration.onSelect || onGroupSelected\"\n [loadingIconURL]=\"groupsConfiguration.loadingIconURL\"\n [errorStateView]=\"groupsConfiguration.errorStateView\"\n [loadingStateView]=\"groupsConfiguration.loadingStateView\"\n [listItemView]=\"groupsConfiguration.listItemView\"\n [menu]=\"groupsConfiguration.menu\"\n [hideSeparator]=\"groupsConfiguration.hideSeparator\"\n [hideError]=\"groupsConfiguration.hideError\"\n [selectionMode]=\"selectionMode\" [title]=\"''\"></cometchat-groups>\n </ng-template>\n </cometchat-tabs>\n </div>\n <div class=\"cc-contacts__buttons\" *ngIf=\"selectionMode != selection.none && !hideSubmitButton\">\n <cometchat-button [disabled]=\"isLimitReached\"\n class=\"cc-contacts__buttons--add\" [text]=\"submitButtonText\"\n [buttonStyle]=\"submitButtonStyle\"\n (click)=\"submitClicked()\"></cometchat-button>\n </div>\n </div>\n <div class=\"cc-close-button\">\n <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"closeButtonStyle\"\n (cc-button-clicked)=\"closeClicked()\">\n </cometchat-button>\n </div>\n</div>\n", styles: [".cc-contacts{display:flex;height:100%;width:100%;overflow:hidden;flex-direction:column}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-contacts__wrapper{height:100%;padding:8px;overflow:hidden;display:flex;flex-direction:column}.cc-close-button{position:absolute;right:8px;padding:8px}.cc-contacts__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-contacts__buttons--add{height:42px;width:100%}.cc-tabs{display:flex;height:100%;width:100%;overflow:hidden}cometchat-tabs{height:100%;width:100%}.cc-contacts-title,.cc-contacts-error{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { usersRef: [{
type: ViewChild,
args: ["usersRef"]
}], groupsRef: [{
type: ViewChild,
args: ["groupsRef"]
}], title: [{
type: Input
}], usersTabTitle: [{
type: Input
}], groupsTabTitle: [{
type: Input
}], usersConfiguration: [{
type: Input
}], groupsConfiguration: [{
type: Input
}], onSubmitButtonClick: [{
type: Input
}], closeIconURL: [{
type: Input
}], contactsStyle: [{
type: Input
}], selectionMode: [{
type: Input
}], onClose: [{
type: Input
}], onItemClick: [{
type: Input
}], tabVisibility: [{
type: Input
}], selectionLimit: [{
type: Input
}], tabs: [{
type: Input
}], hideSubmitButton: [{
type: Input
}], submitButtonText: [{
type: Input
}] } });
/**
*
* CometChatConversationsWithMessagesComponent is a wrapper component for CometChatMessagesComponent and CometChatConversations component to show chats and messages in one screen
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatConversationsWithMessagesComponent {
constructor(elementRef, ref, themeService) {
this.elementRef = elementRef;
this.ref = ref;
this.themeService = themeService;
this.isMobileView = false;
this.messageText = localize("NO_CHATS_SELECTED");
this.conversationsWithMessagesStyle = {};
this.messagesConfiguration = new MessagesConfiguration({});
this.conversationConfiguration = new ConversationsConfiguration({});
this.onError = (error) => {
console.log(error);
};
this.startNewConversationIconURL = "assets/new-chat.svg";
this.hideStartNewConversation = false;
this.StartConversationConfiguration = new ContactsConfiguration({});
this.theme = new CometChatTheme({});
/**
* Properties for internal use
*/
this.showStartConversation = false;
this.labelStyle = {
background: "transparent",
textFont: "700 22px Inter",
textColor: "rgba(20, 20, 20, 0.33)"
};
this.hideSearch = true;
this.startConversationButtonStyle = {};
this.sideBarStyle = {};
this.groupListenerId = "withmessages_group_" + new Date().getTime();
this.onBack = () => {
this.user = null;
this.group = null;
this.activeConversation = null;
};
this.onContactClicked = (user, group) => {
this.showStartConversation = false;
if (user) {
this.group = null;
this.user = user;
this.ref.detectChanges();
}
if (group) {
this.user = null;
this.group = group;
this.ref.detectChanges();
}
};
this.onItemClick = (conversation) => {
this.activeConversation = conversation;
this.showStartConversation = false;
if (conversation.getConversationType() && conversation.getConversationType() == CometChatUIKitConstants.MessageReceiverType.user) {
this.group = null;
this.user = conversation.getConversationWith();
this.ref.detectChanges();
}
else if (conversation.getConversationType() && conversation.getConversationType() == CometChatUIKitConstants.MessageReceiverType.group) {
this.user = null;
this.group = conversation.getConversationWith();
this.ref.detectChanges();
}
};
this.closeStartConversation = () => {
if (this.StartConversationConfiguration.onClose) {
this.StartConversationConfiguration.onClose();
}
this.showStartConversation = false;
};
this.emptyMessageStyle = () => {
return {
background: this.conversationsWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
height: this.conversationsWithMessagesStyle.height,
width: `calc(${this.conversationsWithMessagesStyle.width} - 280px)`,
border: "none",
borderRadius: this.conversationsWithMessagesStyle.borderRadius,
};
};
this.chatsWrapperStyles = () => {
return {
height: this.conversationsWithMessagesStyle.height,
width: this.conversationsWithMessagesStyle.width,
border: this.conversationsWithMessagesStyle.border,
borderRadius: this.conversationsWithMessagesStyle.borderRadius,
background: this.conversationsWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
position: 'relative'
};
};
this.contactsWrapperStyles = () => {
return {
background: this.StartConversationConfiguration.contactsStyle.background || this.themeService.theme.palette.getBackground(),
};
};
}
ngOnChanges(changes) {
if (changes["isMobileView"]) {
if (this.isMobileView) {
this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = false;
if (!this.messagesConfiguration.detailsConfiguration.detailsStyle.padding) {
this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 8px";
}
if (!this.messagesConfiguration.detailsConfiguration.addMembersConfiguration.addMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.addMembersConfiguration.addMembersStyle.padding = "0 8px";
}
if (!this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding = "0 8px";
}
if (!this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding = "0 8px";
}
this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
this.StartConversationConfiguration.contactsStyle.padding = "0 8px";
this.StartConversationConfiguration = { ...this.StartConversationConfiguration };
this.messagesConfiguration = { ...this.messagesConfiguration };
}
else if (!this.isMobileView) {
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.height = "500px";
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.width = "500px";
this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = true;
if (!this.messagesConfiguration.detailsConfiguration.detailsStyle.padding) {
this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 100px";
}
if (!this.messagesConfiguration.detailsConfiguration.addMembersConfiguration.addMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.addMembersConfiguration.addMembersStyle.padding = "0 100px";
}
if (!this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding = "0 100px";
}
if (!this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding = "0 100px";
}
this.StartConversationConfiguration.contactsStyle.padding = "0 100px";
this.StartConversationConfiguration = { ...this.StartConversationConfiguration };
this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
this.messagesConfiguration = { ...this.messagesConfiguration };
}
setTimeout(() => {
this.updateBackdropHeight();
}, 100);
}
if (changes["user"] || changes["group"]) {
this.setActiveChat();
}
}
triggerStartConversation() {
this.showStartConversation = true;
}
removeChatOnGroupAction(leftUser, message) {
const isSameUser = this.loggedInUser?.getUid() === leftUser.getUid();
const actionForGroup = message.getActionFor() instanceof CometChat.Group;
if (isSameUser && this.activeConversation && this.activeConversation.getConversationWith() instanceof CometChat.Group) {
let group = this.activeConversation.getConversationWith();
if (actionForGroup) {
let actionOnGroup = message.getActionFor();
if (actionOnGroup.getGuid() === group.getGuid()) {
this.activeConversation = null;
this.user = null;
this.group = null;
this.ref.detectChanges();
}
}
}
}
attachGroupListeners() {
CometChat.addGroupListener(this.groupListenerId, new CometChat.GroupListener({
onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
this.removeChatOnGroupAction(kickedUser, message);
},
onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
this.removeChatOnGroupAction(bannedUser, message);
},
}));
}
setWithMessagesStyle() {
let defaultStyle = new WithMessagesStyle({
width: "100%",
height: "100%",
background: this.themeService.theme.palette.getBackground(),
borderRadius: "none",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
messageTextColor: this.themeService.theme.palette.getAccent600(),
messageTextFont: fontHelper(this.themeService.theme.typography.title1),
});
this.conversationsWithMessagesStyle = {
...defaultStyle,
...this.conversationsWithMessagesStyle
};
this.labelStyle.textFont = this.conversationsWithMessagesStyle.messageTextFont;
this.labelStyle.textColor = this.conversationsWithMessagesStyle.messageTextColor;
this.messagesConfiguration.messagesStyle.border = this.messagesConfiguration.messagesStyle.border ?? "none";
this.conversationConfiguration.conversationsStyle.border = this.conversationConfiguration.conversationsStyle.border ?? "none";
if (!this.conversationConfiguration?.conversationsStyle?.border || this.conversationConfiguration?.conversationsStyle?.border == "none") {
this.sideBarStyle = { borderRight: this.conversationsWithMessagesStyle.border };
}
}
ngAfterViewInit() {
this.updateBackdropHeight();
}
updateBackdropHeight() {
let divHeight = this.elementRef.nativeElement.offsetHeight;
let divWidth = this.elementRef.nativeElement.offsetWidth;
if (divHeight === 0 || divWidth === 0) {
const rect = this.elementRef.nativeElement.getBoundingClientRect();
divHeight = rect.height;
divWidth = rect.width;
}
let backdropStyle = {
height: divHeight + "px",
width: divWidth + "px",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed"
};
if (this.isMobileView) {
this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.height = (divHeight - 30) + "px";
this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.width = divWidth + "px";
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.height = divHeight + "px";
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.width = divWidth + "px";
}
else {
this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.height = "650px";
this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.width = "360px";
}
this.messagesConfiguration.messageListConfiguration.backdropStyle = this.messagesConfiguration.messageListConfiguration.backdropStyle || backdropStyle;
this.conversationConfiguration.backdropStyle = this.conversationConfiguration.backdropStyle || backdropStyle;
this.messagesConfiguration.detailsConfiguration.backdropStyle = this.messagesConfiguration.detailsConfiguration.backdropStyle || backdropStyle;
this.messagesConfiguration.messageComposerConfiguration.backdropStyle = this.messagesConfiguration.messageComposerConfiguration.backdropStyle || backdropStyle;
this.messagesConfiguration.detailsConfiguration.backdropStyle = this.messagesConfiguration.detailsConfiguration.backdropStyle || backdropStyle;
this.messagesConfiguration.detailsConfiguration.groupMembersConfiguration.backdropStyle = this.messagesConfiguration.detailsConfiguration.groupMembersConfiguration.backdropStyle || backdropStyle;
this.ref.detectChanges();
}
setActiveChat() {
let type = this.user ? CometChatUIKitConstants.MessageReceiverType.user : CometChatUIKitConstants.MessageReceiverType.group;
this.activeConversation = null;
let conversationWith = this.user?.getUid() || this.group?.getGuid();
CometChat.getConversation(conversationWith, type).then((conversation) => {
this.activeConversation = conversation;
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
ngOnInit() {
this.StartConversationConfiguration.usersConfiguration.usersStyle.border = "none";
this.StartConversationConfiguration.groupsConfiguration.groupsStyle.border = "none";
this.startConversationButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: '0',
background: "transparent",
buttonIconTint: this.themeService.theme.palette.getPrimary()
};
this.StartConversationConfiguration = { ...this.StartConversationConfiguration };
this.setWithMessagesStyle();
if (!this.messagesConfiguration.messageHeaderConfiguration.onBack) {
this.messagesConfiguration.messageHeaderConfiguration.onBack = this.onBack;
}
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
this.attachGroupListeners();
this.subscribeToEvents();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
ngOnDestroy() {
this.unsubscribeToEvents();
CometChat.removeGroupListener(this.groupListenerId);
}
// subscribe to global events
subscribeToEvents() {
this.ccConversationDeleted = CometChatConversationEvents.ccConversationDeleted.subscribe((conversation) => {
this.removeActiveChatList(conversation); //to make m messages section empty after deleting conversation from conversationlist
});
this.ccGroupDeleted = CometChatGroupEvents.ccGroupDeleted.subscribe((group) => {
if (this.group && group.getGuid() == this.group.getGuid()) {
this.group = null;
this.activeConversation = null;
this.ref.detectChanges();
}
});
this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.userAddedIn.getGuid()) {
this.group = item?.userAddedIn;
this.ref.detectChanges();
}
});
this.ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.kickedFrom.getGuid()) {
this.group = item?.kickedFrom;
this.ref.detectChanges();
}
});
this.ccGroupMemberJoined = CometChatGroupEvents.ccGroupMemberJoined.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.joinedGroup.getGuid()) {
this.group = item?.joinedGroup;
this.ref.detectChanges();
}
});
this.ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.kickedFrom.getGuid()) {
this.group = item?.kickedFrom;
this.ref.detectChanges();
}
});
this.ccOwnershipChanged = CometChatGroupEvents.ccOwnershipChanged.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.group.getGuid()) {
this.group = item?.group;
this.activeConversation?.setConversationWith(this.group);
this.ref.detectChanges();
}
});
this.ccGroupLeft = CometChatGroupEvents.ccGroupLeft.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.leftGroup.getGuid() && this.loggedInUser?.getUid() == item?.userLeft?.getUid()) {
this.group = null;
this.activeConversation = null;
this.ref.detectChanges();
}
});
// open chat and mark as active conversation
this.ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe((item) => {
this.user = item.user ? item.user : null;
this.group = item.group ? item.group : null;
this.setActiveChat();
});
}
// unsubscribe to subscribed events.
unsubscribeToEvents() {
this.ccConversationDeleted?.unsubscribe();
this.ccGroupDeleted?.unsubscribe();
this.ccGroupMemberAdded?.unsubscribe();
this.ccGroupMemberBanned?.unsubscribe();
this.ccGroupMemberJoined?.unsubscribe();
this.ccGroupMemberKicked?.unsubscribe();
this.ccOwnershipChanged?.unsubscribe();
this.ccGroupLeft?.unsubscribe();
this.ccOpenChat?.unsubscribe();
}
/**
* remove active chat screen after deleting the conversation.
* @param {CometChat.Conversation} conversation
*/
removeActiveChatList(conversation) {
const conversationType = conversation.getConversationType();
const conversationWith = conversation.getConversationWith();
if (conversationType === CometChatUIKitConstants.MessageReceiverType.user && this.user && this.user.getUid() === conversationWith.getUid()) {
this.user = null;
this.ref.detectChanges();
}
else if (conversationType === CometChatUIKitConstants.MessageReceiverType.group && this.group && this.group.getGuid() === conversationWith.getGuid()) {
this.group = null;
this.ref.detectChanges();
}
else {
return;
}
}
}
CometChatConversationsWithMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessagesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatConversationsWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatConversationsWithMessagesComponent, selector: "cometchat-conversations-with-messages", inputs: { user: "user", group: "group", isMobileView: "isMobileView", messageText: "messageText", conversationsWithMessagesStyle: "conversationsWithMessagesStyle", messagesConfiguration: "messagesConfiguration", conversationConfiguration: "conversationConfiguration", onError: "onError", startNewConversationIconURL: "startNewConversationIconURL", hideStartNewConversation: "hideStartNewConversation", StartConversationConfiguration: "StartConversationConfiguration" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n [ngStyle]=\"sideBarStyle\">\n <cometchat-conversations #conversationRef\n [activeConversation]=\"activeConversation\"\n [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n [subtitleView]=\"conversationConfiguration.subtitleView\"\n [options]=\"conversationConfiguration.options\"\n [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n [hideReceipt]=\"conversationConfiguration.hideReceipt\"\n [disableTyping]=\"conversationConfiguration.disableTyping\"\n [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n [readIcon]=\"conversationConfiguration.readIcon\"\n [waitIcon]=\"conversationConfiguration.waitIcon\"\n [errorIcon]=\"conversationConfiguration.errorIcon\"\n [datePattern]=\"conversationConfiguration.datePattern\"\n [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n [sentIcon]=\"conversationConfiguration.sentIcon\"\n [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n [onSelect]=\"conversationConfiguration.onSelect\"\n [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n [errorStateView]=\"conversationConfiguration.errorStateView\"\n [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n [listItemView]=\"conversationConfiguration.listItemView\"\n [menu]=\"conversationConfiguration.menu || startConversationButton\"\n [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n [hideError]=\"conversationConfiguration.hideError\"\n [selectionMode]=\"conversationConfiguration.selectionMode\"\n [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n [dateStyle]=\"conversationConfiguration.dateStyle\"\n [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n [textFormatters]=\"conversationConfiguration?.textFormatters\"\n [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n </div>\n <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n *ngIf=\"!showStartConversation && (user || group)\">\n <!--Message List Screen-->\n <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n [disableTyping]=\"messagesConfiguration.disableTyping\"\n [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n [messageListView]=\"messagesConfiguration.messageListView\"\n [hideDetails]=\"messagesConfiguration.hideDetails!\"\n [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n </cometchat-messages>\n <!--Message List Screen ENDS-->\n </div>\n <div class=\"cc-with-messages__start-conversation\"\n [ngStyle]=\"contactsWrapperStyles()\"\n [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n <cometchat-contacts [onItemClick]=\"onContactClicked\"\n [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n [onClose]=\"closeStartConversation\"\n [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n [tabs]=\"StartConversationConfiguration?.tabs!\"\n [onSubmitButtonClick]=\"StartConversationConfiguration?.onSubmitButtonClick!\"\n [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n </div>\n <div class=\"cc-decorator__message--empty\"\n *ngIf=\"!user && !group && !showStartConversation\"\n [ngStyle]=\"emptyMessageStyle()\">\n <cometchat-label [text]=\"messageText\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>\n <ng-template #startConversationButton>\n <cometchat-button *ngIf=\"!hideStartNewConversation\"\n [iconURL]=\"startNewConversationIconURL\"\n [buttonStyle]=\"startConversationButtonStyle\"\n (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatConversationsComponent, selector: "cometchat-conversations", inputs: ["subtitleView", "title", "options", "searchPlaceHolder", "disableUsersPresence", "disableReceipt", "hideReceipt", "disableTyping", "deliveredIcon", "readIcon", "errorIcon", "datePattern", "onError", "sentIcon", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "customSoundForMessages", "activeConversation", "searchIconURL", "hideSearch", "conversationsRequestBuilder", "emptyStateView", "onSelect", "loadingIconURL", "errorStateView", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "listItemView", "menu", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "disableSoundForMessages", "confirmDialogTitle", "confirmButtonText", "cancelButtonText", "confirmDialogMessage", "onItemClick", "deleteConversationDialogStyle", "backdropStyle", "badgeStyle", "dateStyle", "conversationsStyle", "listItemStyle", "statusIndicatorStyle", "typingIndicatorText", "threadIndicatorText", "avatarStyle", "receiptStyle", "loggedInUser", "disableMentions", "textFormatters"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }, { type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: ["title", "usersTabTitle", "groupsTabTitle", "usersConfiguration", "groupsConfiguration", "onSubmitButtonClick", "closeIconURL", "contactsStyle", "selectionMode", "onClose", "onItemClick", "tabVisibility", "selectionLimit", "tabs", "hideSubmitButton", "submitButtonText"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessagesComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-conversations-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n [ngStyle]=\"sideBarStyle\">\n <cometchat-conversations #conversationRef\n [activeConversation]=\"activeConversation\"\n [onItemClick]=\"conversationConfiguration.onItemClick || onItemClick\"\n [conversationsStyle]=\"conversationConfiguration.conversationsStyle\"\n [statusIndicatorStyle]=\"conversationConfiguration?.statusIndicatorStyle\"\n [avatarStyle]=\"conversationConfiguration?.avatarStyle!\"\n [subtitleView]=\"conversationConfiguration.subtitleView\"\n [options]=\"conversationConfiguration.options\"\n [disableUsersPresence]=\"conversationConfiguration.disableUsersPresence\"\n [disableReceipt]=\"conversationConfiguration.disableReceipt\"\n [hideReceipt]=\"conversationConfiguration.hideReceipt\"\n [disableTyping]=\"conversationConfiguration.disableTyping\"\n [deliveredIcon]=\"conversationConfiguration.deliveredIcon\"\n [readIcon]=\"conversationConfiguration.readIcon\"\n [waitIcon]=\"conversationConfiguration.waitIcon\"\n [errorIcon]=\"conversationConfiguration.errorIcon\"\n [datePattern]=\"conversationConfiguration.datePattern\"\n [receiptStyle]=\"conversationConfiguration.receiptStyle\"\n [sentIcon]=\"conversationConfiguration.sentIcon\"\n [privateGroupIcon]=\"conversationConfiguration.privateGroupIcon\"\n [protectedGroupIcon]=\"conversationConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"conversationConfiguration.passwordGroupIcon\"\n [customSoundForMessages]=\"conversationConfiguration.customSoundForMessages\"\n [conversationsRequestBuilder]=\"conversationConfiguration.conversationsRequestBuilder\"\n [emptyStateView]=\"conversationConfiguration.emptyStateView\"\n [onSelect]=\"conversationConfiguration.onSelect\"\n [loadingIconURL]=\"conversationConfiguration.loadingIconURL\"\n [errorStateView]=\"conversationConfiguration.errorStateView\"\n [loadingStateView]=\"conversationConfiguration.loadingStateView\"\n [titleAlignment]=\"conversationConfiguration.titleAlignment\"\n [listItemView]=\"conversationConfiguration.listItemView\"\n [menu]=\"conversationConfiguration.menu || startConversationButton\"\n [hideSeparator]=\"conversationConfiguration.hideSeparator\"\n [hideError]=\"conversationConfiguration.hideError\"\n [selectionMode]=\"conversationConfiguration.selectionMode\"\n [disableSoundForMessages]=\"conversationConfiguration.disableSoundForMessages\"\n [deleteConversationDialogStyle]=\"conversationConfiguration.deleteConversationDialogStyle\"\n [badgeStyle]=\"conversationConfiguration.badgeStyle\"\n [dateStyle]=\"conversationConfiguration.dateStyle\"\n [listItemStyle]=\"conversationConfiguration.listItemStyle\"\n [backdropStyle]=\"conversationConfiguration.backdropStyle\"\n [textFormatters]=\"conversationConfiguration?.textFormatters\"\n [disableMentions]=\"conversationConfiguration.disableMentions\"></cometchat-conversations>\n </div>\n <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n *ngIf=\"!showStartConversation && (user || group)\">\n <!--Message List Screen-->\n <cometchat-messages #messagesRef [user]=\"user!\" [group]=\"group!\"\n [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n [disableTyping]=\"messagesConfiguration.disableTyping\"\n [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n [messageListView]=\"messagesConfiguration.messageListView\"\n [hideDetails]=\"messagesConfiguration.hideDetails!\"\n [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\">\n </cometchat-messages>\n <!--Message List Screen ENDS-->\n </div>\n <div class=\"cc-with-messages__start-conversation\"\n [ngStyle]=\"contactsWrapperStyles()\"\n [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"showStartConversation\">\n\n <cometchat-contacts [onItemClick]=\"onContactClicked\"\n [usersConfiguration]=\"StartConversationConfiguration?.usersConfiguration!\"\n [groupsConfiguration]=\"StartConversationConfiguration?.groupsConfiguration!\"\n [closeIconURL]=\"StartConversationConfiguration?.closeIconURL!\"\n [contactsStyle]=\"StartConversationConfiguration?.contactsStyle!\"\n [selectionMode]=\"StartConversationConfiguration?.selectionMode!\"\n [onClose]=\"closeStartConversation\"\n [tabVisibility]=\"StartConversationConfiguration?.tabVisibility!\"\n [selectionLimit]=\"StartConversationConfiguration?.selectionLimit!\"\n [tabs]=\"StartConversationConfiguration?.tabs!\"\n [onSubmitButtonClick]=\"StartConversationConfiguration?.onSubmitButtonClick!\"\n [hideSubmitButton]=\"StartConversationConfiguration?.hideSubmitButton!\"></cometchat-contacts>\n </div>\n <div class=\"cc-decorator__message--empty\"\n *ngIf=\"!user && !group && !showStartConversation\"\n [ngStyle]=\"emptyMessageStyle()\">\n <cometchat-label [text]=\"messageText\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>\n <ng-template #startConversationButton>\n <cometchat-button *ngIf=\"!hideStartNewConversation\"\n [iconURL]=\"startNewConversationIconURL\"\n [buttonStyle]=\"startConversationButtonStyle\"\n (cc-button-clicked)=\"triggerStartConversation()\"></cometchat-button>\n\n </ng-template>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box;overflow:hidden}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main,.cc-with-messages__start-conversation{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { user: [{
type: Input
}], group: [{
type: Input
}], isMobileView: [{
type: Input
}], messageText: [{
type: Input
}], conversationsWithMessagesStyle: [{
type: Input
}], messagesConfiguration: [{
type: Input
}], conversationConfiguration: [{
type: Input
}], onError: [{
type: Input
}], startNewConversationIconURL: [{
type: Input
}], hideStartNewConversation: [{
type: Input
}], StartConversationConfiguration: [{
type: Input
}] } });
class CometChatMessageBubble {
}
CometChatMessageBubble.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageBubble, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatMessageBubble.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageBubble, declarations: [CometChatMessageBubbleComponent], imports: [CommonModule], exports: [CometChatMessageBubbleComponent] });
CometChatMessageBubble.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageBubble, imports: [[
CommonModule,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageBubble, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatMessageBubbleComponent],
imports: [
CommonModule,
],
exports: [CometChatMessageBubbleComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatTabs {
}
CometChatTabs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatTabs.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, declarations: [CometChatTabsComponent], imports: [CommonModule], exports: [CometChatTabsComponent] });
CometChatTabs.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, imports: [[
CommonModule,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatTabsComponent],
imports: [
CommonModule,
],
exports: [CometChatTabsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatGroups {
}
CometChatGroups.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroups, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatGroups.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroups, declarations: [CometChatGroupsComponent], imports: [CommonModule,
CometChatList], exports: [CometChatGroupsComponent] });
CometChatGroups.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroups, imports: [[
CommonModule,
CometChatList,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroups, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatGroupsComponent],
imports: [
CommonModule,
CometChatList,
],
exports: [CometChatGroupsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatContacts {
}
CometChatContacts.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatContacts, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatContacts.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatContacts, declarations: [CometChatContactsComponent], imports: [CommonModule, FormsModule, CometChatUsers, CometChatTabs, CometChatGroups], exports: [CometChatContactsComponent] });
CometChatContacts.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatContacts, imports: [[CommonModule, FormsModule, CometChatUsers, CometChatTabs, CometChatGroups]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatContacts, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatContactsComponent],
imports: [CommonModule, FormsModule, CometChatUsers, CometChatTabs, CometChatGroups],
exports: [CometChatContactsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatMessageInformation {
}
CometChatMessageInformation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageInformation, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatMessageInformation.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageInformation, declarations: [CometChatMessageInformationComponent], imports: [CommonModule,
CometChatList], exports: [CometChatMessageInformationComponent] });
CometChatMessageInformation.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageInformation, imports: [[
CommonModule,
CometChatList
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageInformation, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatMessageInformationComponent],
imports: [
CommonModule,
CometChatList
],
exports: [CometChatMessageInformationComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatMessageList {
}
CometChatMessageList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageList, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatMessageList.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageList, declarations: [CometChatMessageListComponent], imports: [CommonModule,
CometChatMessageBubble,
CometChatOngoingCall,
CometChatContacts,
CometChatMessageInformation], exports: [CometChatMessageListComponent] });
CometChatMessageList.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageList, providers: [DatePipe], imports: [[
CommonModule,
CometChatMessageBubble,
CometChatOngoingCall,
CometChatContacts,
CometChatMessageInformation,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageList, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatMessageListComponent],
imports: [
CommonModule,
CometChatMessageBubble,
CometChatOngoingCall,
CometChatContacts,
CometChatMessageInformation,
],
exports: [CometChatMessageListComponent],
providers: [DatePipe],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class AIAssistBotMessageList {
}
AIAssistBotMessageList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageList, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AIAssistBotMessageList.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageList, declarations: [AIAssistBotMessageListComponent], imports: [CommonModule, CometChatList, CometChatMessageBubble, FormsModule], exports: [AIAssistBotMessageListComponent] });
AIAssistBotMessageList.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageList, imports: [[CommonModule, CometChatList, CometChatMessageBubble, FormsModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageList, decorators: [{
type: NgModule,
args: [{
declarations: [AIAssistBotMessageListComponent],
imports: [CommonModule, CometChatList, CometChatMessageBubble, FormsModule],
exports: [AIAssistBotMessageListComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class CometChatGroupMembers {
}
CometChatGroupMembers.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembers, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatGroupMembers.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembers, declarations: [CometChatGroupMembersComponent], imports: [CommonModule, FormsModule, CometChatMessageHeader, CometChatUsers, CometChatList], exports: [CometChatGroupMembersComponent] });
CometChatGroupMembers.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembers, imports: [[CommonModule, FormsModule, CometChatMessageHeader, CometChatUsers, CometChatList]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembers, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatGroupMembersComponent],
imports: [CommonModule, FormsModule, CometChatMessageHeader, CometChatUsers, CometChatList],
exports: [CometChatGroupMembersComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatUserMemberWrapper {
}
CometChatUserMemberWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUserMemberWrapper, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatUserMemberWrapper.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUserMemberWrapper, declarations: [CometChatUserMemberWrapperComponent], imports: [CommonModule, CometChatUsers, CometChatGroupMembers], exports: [CometChatUserMemberWrapperComponent] });
CometChatUserMemberWrapper.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUserMemberWrapper, imports: [[CommonModule, CometChatUsers, CometChatGroupMembers]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUserMemberWrapper, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatUserMemberWrapperComponent],
imports: [CommonModule, CometChatUsers, CometChatGroupMembers],
exports: [CometChatUserMemberWrapperComponent],
}]
}] });
class CometChatMessageComposer {
}
CometChatMessageComposer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatMessageComposer.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, declarations: [CometChatMessageComposerComponent], imports: [CommonModule, AIAssistBotMessageList, CometChatUserMemberWrapper], exports: [CometChatMessageComposerComponent] });
CometChatMessageComposer.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, imports: [[CommonModule, AIAssistBotMessageList, CometChatUserMemberWrapper]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposer, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatMessageComposerComponent],
imports: [CommonModule, AIAssistBotMessageList, CometChatUserMemberWrapper],
exports: [CometChatMessageComposerComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class CometChatThreadedMessages {
}
CometChatThreadedMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessages, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatThreadedMessages.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessages, declarations: [CometChatThreadedMessagesComponent], imports: [CommonModule,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer], exports: [CometChatThreadedMessagesComponent] });
CometChatThreadedMessages.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessages, imports: [[
CommonModule,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessages, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatThreadedMessagesComponent],
imports: [
CommonModule,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
],
exports: [CometChatThreadedMessagesComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatTransferOwnership {
}
CometChatTransferOwnership.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTransferOwnership, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatTransferOwnership.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTransferOwnership, declarations: [CometChatTransferOwnershipComponent], imports: [CommonModule, FormsModule, CometChatGroupMembers], exports: [CometChatTransferOwnershipComponent] });
CometChatTransferOwnership.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTransferOwnership, imports: [[CommonModule, FormsModule, CometChatGroupMembers]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTransferOwnership, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatTransferOwnershipComponent],
imports: [CommonModule, FormsModule, CometChatGroupMembers],
exports: [CometChatTransferOwnershipComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatDetails {
}
CometChatDetails.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetails, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatDetails.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetails, declarations: [CometChatDetailsComponent], imports: [CommonModule, CometChatAddMembers, CometChatBannedMembers, CometChatGroupMembers, CometChatTransferOwnership], exports: [CometChatDetailsComponent] });
CometChatDetails.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetails, imports: [[
CommonModule, CometChatAddMembers, CometChatBannedMembers, CometChatGroupMembers, CometChatTransferOwnership
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetails, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatDetailsComponent],
imports: [
CommonModule, CometChatAddMembers, CometChatBannedMembers, CometChatGroupMembers, CometChatTransferOwnership
],
exports: [CometChatDetailsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CometChatMessages {
}
CometChatMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessages, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatMessages.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessages, declarations: [CometChatMessagesComponent], imports: [CommonModule,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
CometChatThreadedMessages,
CometChatDetails,
CometChatCallButtons,
AIAssistBotMessageList], exports: [CometChatMessagesComponent] });
CometChatMessages.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessages, imports: [[
CommonModule,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
CometChatThreadedMessages,
CometChatDetails,
CometChatCallButtons,
AIAssistBotMessageList,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessages, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatMessagesComponent],
imports: [
CommonModule,
CometChatMessageHeader,
CometChatMessageList,
CometChatMessageComposer,
CometChatThreadedMessages,
CometChatDetails,
CometChatCallButtons,
AIAssistBotMessageList,
],
exports: [CometChatMessagesComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class CometChatConversationsWithMessages {
}
CometChatConversationsWithMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessages, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatConversationsWithMessages.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessages, declarations: [CometChatConversationsWithMessagesComponent], imports: [CommonModule,
CometChatConversations,
CometChatMessages,
CometChatContacts], exports: [CometChatConversationsWithMessagesComponent] });
CometChatConversationsWithMessages.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessages, imports: [[
CommonModule,
CometChatConversations,
CometChatMessages,
CometChatContacts
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsWithMessages, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatConversationsWithMessagesComponent],
imports: [
CommonModule,
CometChatConversations,
CometChatMessages,
CometChatContacts
],
exports: [CometChatConversationsWithMessagesComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
/**
*
* CometChatGroupsWithMessagesComponent is a wrapper component for CometChatMessagesComponent and CometChatConversations component to show chats and messages in one screen
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatGroupsWithMessagesComponent {
constructor(elementRef, ref, themeService) {
this.elementRef = elementRef;
this.ref = ref;
this.themeService = themeService;
this.isMobileView = false;
this.hideCreateGroup = false;
this.messageText = localize("NO_GROUPS_SELECTED");
this.groupsWithMessagesStyle = {
width: "100%",
height: "100%",
borderRadius: "none",
};
this.messagesConfiguration = new MessagesConfiguration({});
this.createGroupConfiguration = new CreateGroupConfiguration({});
this.joinGroupConfiguration = new JoinGroupConfiguration({});
this.groupsConfiguration = new GroupsConfiguration({});
this.onError = (error) => {
console.log(error);
};
this.theme = new CometChatTheme({});
this.backdropStyle = {};
this.createGroupStyle = {};
this.joinGroupStyle = {};
this.messageHeaderStyle = {};
this.listItemStyle = {};
/**
* Properties for internal use
*/
this.createIconURL = "assets/create-button.svg";
this.createGroupButtonStyle = {};
this.labelStyle = {
background: "transparent",
textFont: "700 22px Inter",
textColor: "rgba(20, 20, 20, 0.33)"
};
this.openCreateGroupPage = false;
this.openPasswordModal = false;
this.sideBarStyle = {};
this.onBack = () => {
this.group = null;
this.user = null;
this.ref.detectChanges();
};
this.closeCreateGroup = () => {
this.openCreateGroupPage = false;
this.ref.detectChanges();
};
this.closeJoinGroup = () => {
this.openPasswordModal = false;
};
this.onItemClick = (group) => {
this.openPasswordModal = false;
if (group.getHasJoined()) {
this.group = group;
this.user = null;
this.ref.detectChanges();
return;
}
if (group.getType() == CometChatUIKitConstants.GroupTypes.password) {
this.group = null;
this.protectedGroup = group;
this.openPasswordModal = true;
this.ref.detectChanges();
return;
}
CometChat.joinGroup(group).then((groupJoined) => {
CometChatGroupEvents.ccGroupMemberJoined.next({
joinedGroup: groupJoined,
joinedUser: this.loggedInUser
});
group.setHasJoined(true);
this.group = group;
this.user = null;
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
};
this.setCreateGroupStyles = () => {
let defaultStyle = new CreateGroupStyle({
boxShadow: `0px 0px 8px ${this.themeService.theme.palette.getAccent50()}`,
groupTypeTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
groupTypeBorder: `1px solid ${this.themeService.theme.palette.getAccent600()}`,
groupTypeBorderRadius: "0",
groupTypeTextColor: this.themeService.theme.palette.getAccent(),
groupTypeTextBackground: "transparent",
groupTypeBackground: this.themeService.theme.palette.getAccent100(),
groupTypeBoxShadow: "",
activeGroupTypeTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
activeGroupTypeTextColor: this.themeService.theme.palette.getAccent(),
activeGroupTypeBackground: this.themeService.theme.palette.getAccent900(),
activeGroupTypeBoxShadow: `${this.themeService.theme.palette.getAccent200()} 0 3px 8px 0`,
activeGroupTypeBorderRadius: "8px",
activeGroupTypeBorder: "none",
groupTypeTextBoxShadow: "none",
groupTypeTextBorderRadius: "0",
closeIconTint: this.themeService.theme.palette.getPrimary(),
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
errorTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
errorTextBackground: this.themeService.theme.palette.getError(),
errorTextBorderRadius: "8px",
errorTextBorder: "none",
errorTextColor: this.themeService.theme.palette.getError(),
nameInputPlaceholderTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
nameInputPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
nameInputBackground: this.themeService.theme.palette.getAccent100(),
nameInputTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
nameInputTextColor: this.themeService.theme.palette.getAccent(),
nameInputBorder: "none",
nameInputBorderRadius: "8px",
nameInputBoxShadow: `${this.themeService.theme.palette.getAccent100()} 0 0 0 1px`,
passwordInputPlaceholderTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
passwordInputPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
passwordInputBackground: this.themeService.theme.palette.getAccent100(),
passwordInputBorder: "none",
passwordInputBorderRadius: "8px",
passwordInputBoxShadow: `${this.themeService.theme.palette.getAccent100()} 0 0 0 1px`,
passwordInputTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
passwordInputTextColor: this.themeService.theme.palette.getAccent(),
createGroupButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
createGroupButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
createGroupButtonBackground: this.themeService.theme.palette.getPrimary(),
createGroupButtonBorderRadius: "8px",
createGroupButtonBorder: "none",
height: "620px",
width: "360px",
borderRadius: "8px",
background: this.themeService.theme.palette.getBackground()
});
this.createGroupStyle = { ...defaultStyle, ...this.createGroupConfiguration.createGroupStyle };
};
this.setJoinGroupStyles = () => {
let defaultStyle = new JoinGroupStyle({
boxShadow: `0px 0px 8px ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
passwordInputPlaceholderTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
passwordInputPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
passwordInputBackground: this.themeService.theme.palette.getAccent100(),
passwordInputBorder: "none",
passwordInputBorderRadius: "8px",
passwordInputBoxShadow: `${this.themeService.theme.palette.getAccent100()} 0 0 0 1px`,
passwordInputTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
passwordInputTextColor: this.themeService.theme.palette.getAccent(),
height: "100%",
width: "100%",
joinButtonTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
joinButtonTextColor: this.themeService.theme.palette.getAccent("dark"),
joinButtonBackground: this.themeService.theme.palette.getPrimary(),
joinButtonBorderRadius: "8px",
joinButtonBorder: "none",
background: this.themeService.theme.palette.getBackground()
});
this.joinGroupStyle = { ...defaultStyle, ...this.joinGroupConfiguration.joinGroupStyle };
};
this.onGroupJoined = (event) => {
let group = event?.detail?.response;
this.openPasswordModal = false;
this.protectedGroup = null;
if (group) {
this.group = group;
this.user = null;
}
};
this.emptyMessageStyle = () => {
return {
background: this.groupsWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
height: this.groupsWithMessagesStyle.height,
width: `calc(${this.groupsWithMessagesStyle.width} - 280px)`,
border: "none",
borderRadius: this.groupsWithMessagesStyle.borderRadius,
};
};
this.groupsWrapperStyles = () => {
return {
height: this.groupsWithMessagesStyle.height,
width: this.groupsWithMessagesStyle.width,
border: this.groupsWithMessagesStyle.border,
borderRadius: this.groupsWithMessagesStyle.borderRadius,
background: this.groupsWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
position: 'relative'
};
};
}
ngOnChanges(changes) {
if (changes["isMobileView"]) {
if (this.isMobileView) {
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.height = "100%";
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.width = "100%";
this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = false;
if (!this.messagesConfiguration.detailsConfiguration.detailsStyle.padding) {
this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 8px";
}
if (!this.messagesConfiguration.detailsConfiguration.addMembersConfiguration.addMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.addMembersConfiguration.addMembersStyle.padding = "0 8px";
}
if (!this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding = "0 8px";
}
if (!this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding = "0 8px";
}
this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
this.messagesConfiguration = { ...this.messagesConfiguration };
this.joinGroupConfiguration.messageHeaderConfiguration.hideBackButton = false;
this.joinGroupConfiguration.messageHeaderConfiguration = { ...this.joinGroupConfiguration.messageHeaderConfiguration };
this.joinGroupConfiguration = { ...this.joinGroupConfiguration };
}
else if (!this.isMobileView) {
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.height = "500px";
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.width = "500px";
this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = true;
if (!this.messagesConfiguration.detailsConfiguration.detailsStyle.padding) {
this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 100px";
}
if (!this.messagesConfiguration.detailsConfiguration.addMembersConfiguration.addMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.addMembersConfiguration.addMembersStyle.padding = "0 100px";
}
if (!this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding = "0 100px";
}
if (!this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding) {
this.messagesConfiguration.detailsConfiguration.bannedMembersConfiguration.bannedMembersStyle.padding = "0 100px";
}
this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
this.messagesConfiguration = { ...this.messagesConfiguration };
this.joinGroupConfiguration.messageHeaderConfiguration.hideBackButton = true;
this.joinGroupConfiguration.messageHeaderConfiguration = { ...this.joinGroupConfiguration.messageHeaderConfiguration };
this.joinGroupConfiguration = { ...this.joinGroupConfiguration };
}
setTimeout(() => {
this.updateBackdropHeight();
}, 100);
}
}
ngAfterViewInit() {
this.updateBackdropHeight();
}
openCreateGroup() {
this.openCreateGroupPage = true;
}
updateBackdropHeight() {
let divHeight = this.elementRef.nativeElement.offsetHeight;
let divWidth = this.elementRef.nativeElement.offsetWidth;
if (divHeight === 0 || divWidth === 0) {
const rect = this.elementRef.nativeElement.getBoundingClientRect();
divHeight = rect.height;
divWidth = rect.width;
}
let backdropStyle = {
height: divHeight + "px",
width: divWidth + "px",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed"
};
if (this.isMobileView) {
this.createGroupStyle.height = (divHeight - 30) + "px";
this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.height = (divHeight - 30) + "px";
this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.width = divWidth + "px";
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.height = divHeight + "px";
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.width = divWidth + "px";
}
else {
this.createGroupStyle.height = this.createGroupConfiguration.createGroupStyle.height || "620px";
this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.height = "650px";
this.messagesConfiguration.detailsConfiguration.transferOwnershipConfiguration.transferOwnershipStyle.width = "360px";
}
this.createGroupStyle = { ...this.createGroupStyle };
this.backdropStyle = backdropStyle;
this.messagesConfiguration.messageListConfiguration.backdropStyle = backdropStyle;
this.messagesConfiguration.detailsConfiguration.backdropStyle = backdropStyle;
this.messagesConfiguration.messageComposerConfiguration.backdropStyle = backdropStyle;
this.messagesConfiguration.detailsConfiguration.groupMembersConfiguration.backdropStyle = backdropStyle;
this.ref.detectChanges();
}
ngOnInit() {
this.createGroupButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: '0',
background: "transparent",
buttonIconTint: this.themeService.theme.palette.getPrimary()
};
this.setWithMessagesStyle();
this.setCreateGroupStyles();
this.setListItemStyle();
this.setJoinGroupStyles();
if (!this.messagesConfiguration.messageHeaderConfiguration.onBack) {
this.messagesConfiguration.messageHeaderConfiguration.onBack = this.onBack;
}
this.subscribeToEvents();
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
setWithMessagesStyle() {
let defaultStyle = new WithMessagesStyle({
width: "100%",
height: "100%",
background: this.themeService.theme.palette.getBackground(),
borderRadius: "none",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
messageTextColor: this.themeService.theme.palette.getAccent600(),
messageTextFont: fontHelper(this.themeService.theme.typography.title1),
});
this.groupsWithMessagesStyle = {
...defaultStyle,
...this.groupsWithMessagesStyle
};
this.labelStyle.textFont = this.groupsWithMessagesStyle.messageTextFont;
this.labelStyle.textColor = this.groupsWithMessagesStyle.messageTextColor;
this.messagesConfiguration.messagesStyle.border = this.messagesConfiguration.messagesStyle.border ?? "none";
this.groupsConfiguration.groupsStyle.border = this.groupsConfiguration.groupsStyle.border ?? "none";
if (!this.groupsConfiguration?.groupsStyle?.border || this.groupsConfiguration?.groupsStyle?.border == "none") {
this.sideBarStyle = { borderRight: this.groupsWithMessagesStyle.border };
}
}
setHeadersStyle() {
let defaultStyle = new MessageHeaderStyle({
background: this.themeService.theme.palette.getBackground(),
border: `none`,
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
privateGroupIconBackground: this.themeService.theme.palette.getSuccess(),
passwordGroupIconBackground: "RGB(247, 165, 0)",
backButtonIconTint: this.themeService.theme.palette.getPrimary(),
subtitleTextColor: this.themeService.theme.palette.getAccent600(),
subtitleTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
typingIndicatorTextColor: this.themeService.theme.palette.getPrimary(),
typingIndicatorTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
});
this.messageHeaderStyle = { ...defaultStyle, ...this.joinGroupConfiguration.messageHeaderConfiguration.messageHeaderStyle };
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "transparent",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: "",
hoverBackground: "transparent"
});
this.listItemStyle = { ...defaultStyle, ...this.joinGroupConfiguration.messageHeaderConfiguration.listItemStyle };
}
ngOnDestroy() {
this.unsubscribeToEvents();
}
updatedCreatedGroup(event) {
let group = event?.detail?.group;
if (group) {
this.group = group;
this.user = null;
this.openCreateGroupPage = false;
this.ref.detectChanges();
CometChatGroupEvents.ccGroupCreated.next(group);
}
}
// subscribe to global events
subscribeToEvents() {
this.ccGroupDeleted = CometChatGroupEvents.ccGroupDeleted.subscribe((group) => {
if (this.group && group.getGuid() == this.group.getGuid()) {
this.group = null;
this.ref.detectChanges();
}
});
this.ccGroupCreated = CometChatGroupEvents.ccGroupCreated.subscribe((group) => {
if (group) {
this.group = group;
this.user = null;
this.openCreateGroupPage = false;
this.ref.detectChanges();
}
});
this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.userAddedIn.getGuid()) {
this.group = item?.userAddedIn;
this.ref.detectChanges();
}
});
this.ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.kickedFrom.getGuid()) {
this.group = item?.kickedFrom;
this.ref.detectChanges();
}
});
this.ccGroupMemberJoined = CometChatGroupEvents.ccGroupMemberJoined.subscribe((item) => {
if (this.protectedGroup && this.protectedGroup.getGuid() == item?.joinedGroup.getGuid()) {
this.openPasswordModal = false;
this.protectedGroup = null;
this.group = item?.joinedGroup;
this.ref.detectChanges();
}
});
this.ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.kickedFrom.getGuid()) {
this.group = item?.kickedFrom;
this.ref.detectChanges();
}
});
this.ccOwnershipChanged = CometChatGroupEvents.ccOwnershipChanged.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.group.getGuid()) {
this.group = item?.group;
this.ref.detectChanges();
}
});
this.ccGroupLeft = CometChatGroupEvents.ccGroupLeft.subscribe((item) => {
if (this.group && this.group.getGuid() == item?.leftGroup.getGuid() && this.loggedInUser?.getUid() == item?.userLeft?.getUid()) {
this.group = item?.leftGroup;
this.ref.detectChanges();
}
});
// open chat and mark as active conversation
this.ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe((item) => {
this.user = item.user ? item.user : null;
this.group = item.group ? item.group : null;
this.ref.detectChanges();
});
}
// unsubscribe to subscribed events.
unsubscribeToEvents() {
this.ccGroupDeleted?.unsubscribe();
this.ccGroupMemberAdded?.unsubscribe();
this.ccGroupMemberBanned?.unsubscribe();
this.ccGroupMemberJoined?.unsubscribe();
this.ccGroupMemberKicked?.unsubscribe();
this.ccOwnershipChanged?.unsubscribe();
this.ccGroupLeft?.unsubscribe();
this.ccOpenChat?.unsubscribe();
}
}
CometChatGroupsWithMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupsWithMessagesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatGroupsWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupsWithMessagesComponent, selector: "cometchat-groups-with-messages", inputs: { group: "group", isMobileView: "isMobileView", hideCreateGroup: "hideCreateGroup", messageText: "messageText", groupsWithMessagesStyle: "groupsWithMessagesStyle", messagesConfiguration: "messagesConfiguration", createGroupConfiguration: "createGroupConfiguration", joinGroupConfiguration: "joinGroupConfiguration", groupsConfiguration: "groupsConfiguration", onError: "onError" }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["groupRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messagesRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"groupsWrapperStyles()\">\n <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n [ngStyle]=\"sideBarStyle\">\n <cometchat-groups #groupRef [activeGroup]=\"group\"\n [hideSearch]=\"groupsConfiguration.hideSearch\"\n [searchIconURL]=\"groupsConfiguration.searchIconURL\"\n [searchRequestBuilder]=\"groupsConfiguration.searchRequestBuilder\"\n [onItemClick]=\"groupsConfiguration.onItemClick || onItemClick\"\n [groupsStyle]=\"groupsConfiguration.groupsStyle\"\n [subtitleView]=\"groupsConfiguration.subtitleView\"\n [options]=\"groupsConfiguration.options\"\n [privateGroupIcon]=\"groupsConfiguration.privateGroupIcon\"\n [protectedGroupIcon]=\"groupsConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"groupsConfiguration.passwordGroupIcon\"\n [groupsRequestBuilder]=\"groupsConfiguration.groupsRequestBuilder\"\n [emptyStateView]=\"groupsConfiguration.emptyStateView\"\n [onSelect]=\"groupsConfiguration.onSelect\"\n [loadingIconURL]=\"groupsConfiguration.loadingIconURL\"\n [errorStateView]=\"groupsConfiguration.errorStateView\"\n [loadingStateView]=\"groupsConfiguration.loadingStateView\"\n [titleAlignment]=\"groupsConfiguration.titleAlignment\"\n [listItemView]=\"groupsConfiguration.listItemView\"\n [menu]=\"groupsConfiguration.menu || createGroupButton\"\n [hideSeparator]=\"groupsConfiguration.hideSeparator\"\n [hideError]=\"groupsConfiguration.hideError\"\n [selectionMode]=\"groupsConfiguration.selectionMode\"\n [listItemStyle]=\"groupsConfiguration.listItemStyle\"></cometchat-groups>\n </div>\n <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n *ngIf=\"(group || user) && !openPasswordModal\">\n <!--Message List Screen-->\n <cometchat-messages #messagesRef [group]=\"group!\"\n [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n [disableTyping]=\"messagesConfiguration.disableTyping\"\n [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n [messageListView]=\"messagesConfiguration.messageListView\" [user]=\"user!\"\n [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\"\n [hideDetails]=\"messagesConfiguration.hideDetails!\">\n </cometchat-messages>\n <!--Message List Screen ENDS-->\n </div>\n <div class=\"cc-decorator__message--empty\"\n *ngIf=\"!user && !group && !openPasswordModal\"\n [ngStyle]=\"emptyMessageStyle()\">\n <cometchat-label [text]=\"messageText\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>\n <div class=\"cc-with-messages__joingroup\"\n *ngIf=\"openPasswordModal && !group && !user\" [ngStyle]=\"emptyMessageStyle()\"\n [ngClass]=\"{mobile : isMobileView}\">\n <cometchat-join-group [group]=\"protectedGroup!\"\n [joinGroupStyle]=\"joinGroupStyle\"\n (cc-joingroup-joined)=\"onGroupJoined($event)\"\n [errorCallback]=\"joinGroupConfiguration.onError\"\n [joinClick]=\"joinGroupConfiguration.joinClick\">\n <cometchat-message-header slot=\"headerView\" [group]=\"protectedGroup!\"\n [subtitleView]=\"joinGroupConfiguration.messageHeaderConfiguration.subtitleView\"\n [disableUsersPresence]=\"joinGroupConfiguration.messageHeaderConfiguration.disableUsersPresence\"\n [protectedGroupIcon]=\"joinGroupConfiguration.messageHeaderConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"joinGroupConfiguration.messageHeaderConfiguration.passwordGroupIcon\"\n [privateGroupIcon]=\"joinGroupConfiguration.messageHeaderConfiguration.privateGroupIcon\"\n [menu]=\"joinGroupConfiguration.messageHeaderConfiguration.menu\"\n [messageHeaderStyle]=\"messageHeaderStyle\"\n [backButtonIconURL]=\"joinGroupConfiguration.messageHeaderConfiguration.backButtonIconURL\"\n [hideBackButton]=\"joinGroupConfiguration.messageHeaderConfiguration.hideBackButton\"\n [onError]=\"joinGroupConfiguration.messageHeaderConfiguration.onError\"\n [onBack]=\"joinGroupConfiguration.messageHeaderConfiguration.onBack || closeJoinGroup\"\n [listItemStyle]=\"listItemStyle\"\n [statusIndicatorStyle]=\"joinGroupConfiguration.messageHeaderConfiguration.statusIndicatorStyle\"\n [avatarStyle]=\"joinGroupConfiguration.messageHeaderConfiguration.avatarStyle\">\n </cometchat-message-header>\n </cometchat-join-group>\n </div>\n</div>\n<ng-template #createGroupButton>\n <cometchat-button *ngIf=\"!hideCreateGroup\" [iconURL]=\"createIconURL\"\n [buttonStyle]=\"createGroupButtonStyle\"\n (cc-button-clicked)=\"openCreateGroup()\"></cometchat-button>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openCreateGroupPage\" [backdropStyle]=\"backdropStyle\">\n <cometchat-create-group [createGroupStyle]=\"createGroupStyle\"\n [hideCloseButton]=\"createGroupConfiguration.hideCloseButton\"\n [closeButtonIconURL]=\"createGroupConfiguration.closeButtonIconURL\"\n [createClick]=\"createGroupConfiguration.createClick\"\n [closeCallback]=\"closeCreateGroup\">\n\n </cometchat-create-group>\n</cometchat-backdrop>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}.cc-with-messages__joingroup{width:calc(100% - 280px);height:100%}\n"], components: [{ type: CometChatGroupsComponent, selector: "cometchat-groups", inputs: ["groupsRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "menu", "options", "activeGroup", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "emptyStateView", "errorStateView", "loadingIconURL", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "statusIndicatorStyle", "avatarStyle", "groupsStyle", "listItemStyle", "onItemClick"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }, { type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "passwordGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupsWithMessagesComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-groups-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"groupsWrapperStyles()\">\n <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\"\n [ngStyle]=\"sideBarStyle\">\n <cometchat-groups #groupRef [activeGroup]=\"group\"\n [hideSearch]=\"groupsConfiguration.hideSearch\"\n [searchIconURL]=\"groupsConfiguration.searchIconURL\"\n [searchRequestBuilder]=\"groupsConfiguration.searchRequestBuilder\"\n [onItemClick]=\"groupsConfiguration.onItemClick || onItemClick\"\n [groupsStyle]=\"groupsConfiguration.groupsStyle\"\n [subtitleView]=\"groupsConfiguration.subtitleView\"\n [options]=\"groupsConfiguration.options\"\n [privateGroupIcon]=\"groupsConfiguration.privateGroupIcon\"\n [protectedGroupIcon]=\"groupsConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"groupsConfiguration.passwordGroupIcon\"\n [groupsRequestBuilder]=\"groupsConfiguration.groupsRequestBuilder\"\n [emptyStateView]=\"groupsConfiguration.emptyStateView\"\n [onSelect]=\"groupsConfiguration.onSelect\"\n [loadingIconURL]=\"groupsConfiguration.loadingIconURL\"\n [errorStateView]=\"groupsConfiguration.errorStateView\"\n [loadingStateView]=\"groupsConfiguration.loadingStateView\"\n [titleAlignment]=\"groupsConfiguration.titleAlignment\"\n [listItemView]=\"groupsConfiguration.listItemView\"\n [menu]=\"groupsConfiguration.menu || createGroupButton\"\n [hideSeparator]=\"groupsConfiguration.hideSeparator\"\n [hideError]=\"groupsConfiguration.hideError\"\n [selectionMode]=\"groupsConfiguration.selectionMode\"\n [listItemStyle]=\"groupsConfiguration.listItemStyle\"></cometchat-groups>\n </div>\n <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\"\n *ngIf=\"(group || user) && !openPasswordModal\">\n <!--Message List Screen-->\n <cometchat-messages #messagesRef [group]=\"group!\"\n [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n [disableTyping]=\"messagesConfiguration.disableTyping\"\n [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n [messageListView]=\"messagesConfiguration.messageListView\" [user]=\"user!\"\n [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\"\n [hideDetails]=\"messagesConfiguration.hideDetails!\">\n </cometchat-messages>\n <!--Message List Screen ENDS-->\n </div>\n <div class=\"cc-decorator__message--empty\"\n *ngIf=\"!user && !group && !openPasswordModal\"\n [ngStyle]=\"emptyMessageStyle()\">\n <cometchat-label [text]=\"messageText\"\n [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>\n <div class=\"cc-with-messages__joingroup\"\n *ngIf=\"openPasswordModal && !group && !user\" [ngStyle]=\"emptyMessageStyle()\"\n [ngClass]=\"{mobile : isMobileView}\">\n <cometchat-join-group [group]=\"protectedGroup!\"\n [joinGroupStyle]=\"joinGroupStyle\"\n (cc-joingroup-joined)=\"onGroupJoined($event)\"\n [errorCallback]=\"joinGroupConfiguration.onError\"\n [joinClick]=\"joinGroupConfiguration.joinClick\">\n <cometchat-message-header slot=\"headerView\" [group]=\"protectedGroup!\"\n [subtitleView]=\"joinGroupConfiguration.messageHeaderConfiguration.subtitleView\"\n [disableUsersPresence]=\"joinGroupConfiguration.messageHeaderConfiguration.disableUsersPresence\"\n [protectedGroupIcon]=\"joinGroupConfiguration.messageHeaderConfiguration.protectedGroupIcon\"\n [passwordGroupIcon]=\"joinGroupConfiguration.messageHeaderConfiguration.passwordGroupIcon\"\n [privateGroupIcon]=\"joinGroupConfiguration.messageHeaderConfiguration.privateGroupIcon\"\n [menu]=\"joinGroupConfiguration.messageHeaderConfiguration.menu\"\n [messageHeaderStyle]=\"messageHeaderStyle\"\n [backButtonIconURL]=\"joinGroupConfiguration.messageHeaderConfiguration.backButtonIconURL\"\n [hideBackButton]=\"joinGroupConfiguration.messageHeaderConfiguration.hideBackButton\"\n [onError]=\"joinGroupConfiguration.messageHeaderConfiguration.onError\"\n [onBack]=\"joinGroupConfiguration.messageHeaderConfiguration.onBack || closeJoinGroup\"\n [listItemStyle]=\"listItemStyle\"\n [statusIndicatorStyle]=\"joinGroupConfiguration.messageHeaderConfiguration.statusIndicatorStyle\"\n [avatarStyle]=\"joinGroupConfiguration.messageHeaderConfiguration.avatarStyle\">\n </cometchat-message-header>\n </cometchat-join-group>\n </div>\n</div>\n<ng-template #createGroupButton>\n <cometchat-button *ngIf=\"!hideCreateGroup\" [iconURL]=\"createIconURL\"\n [buttonStyle]=\"createGroupButtonStyle\"\n (cc-button-clicked)=\"openCreateGroup()\"></cometchat-button>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openCreateGroupPage\" [backdropStyle]=\"backdropStyle\">\n <cometchat-create-group [createGroupStyle]=\"createGroupStyle\"\n [hideCloseButton]=\"createGroupConfiguration.hideCloseButton\"\n [closeButtonIconURL]=\"createGroupConfiguration.closeButtonIconURL\"\n [createClick]=\"createGroupConfiguration.createClick\"\n [closeCallback]=\"closeCreateGroup\">\n\n </cometchat-create-group>\n</cometchat-backdrop>\n", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}.cc-with-messages__joingroup{width:calc(100% - 280px);height:100%}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { groupRef: [{
type: ViewChild,
args: ["groupRef", { static: false }]
}], messageListRef: [{
type: ViewChild,
args: ["messagesRef", { static: false }]
}], group: [{
type: Input
}], isMobileView: [{
type: Input
}], hideCreateGroup: [{
type: Input
}], messageText: [{
type: Input
}], groupsWithMessagesStyle: [{
type: Input
}], messagesConfiguration: [{
type: Input
}], createGroupConfiguration: [{
type: Input
}], joinGroupConfiguration: [{
type: Input
}], groupsConfiguration: [{
type: Input
}], onError: [{
type: Input
}] } });
class CometChatGroupsWithMessages {
}
CometChatGroupsWithMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupsWithMessages, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatGroupsWithMessages.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupsWithMessages, declarations: [CometChatGroupsWithMessagesComponent], imports: [CommonModule,
CometChatGroups,
CometChatMessages,
CometChatMessageHeader], exports: [CometChatGroupsWithMessagesComponent] });
CometChatGroupsWithMessages.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupsWithMessages, imports: [[
CommonModule,
CometChatGroups,
CometChatMessages,
CometChatMessageHeader
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupsWithMessages, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatGroupsWithMessagesComponent],
imports: [
CommonModule,
CometChatGroups,
CometChatMessages,
CometChatMessageHeader
],
exports: [CometChatGroupsWithMessagesComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
/**
*
* CometChatUsersWithMessagesComponent is a wrapper component for CometChatMessagesComponent and CometChatConversations component to show chats and messages in one screen
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
class CometChatUsersWithMessagesComponent {
constructor(elementRef, ref, themeService) {
this.elementRef = elementRef;
this.ref = ref;
this.themeService = themeService;
this.isMobileView = false;
this.messageText = localize("NO_USERS_SELECTED");
this.usersWithMessagesStyle = {
width: "100%",
height: "100%",
borderRadius: "none",
};
this.messagesConfiguration = new MessagesConfiguration({});
this.usersConfiguration = new UsersConfiguration({});
this.onError = (error) => {
console.log(error);
};
this.theme = new CometChatTheme({});
this.labelStyle = {
background: "transparent",
textFont: "700 22px Inter",
textColor: "rgba(20, 20, 20, 0.33)"
};
this.sideBarStyle = {};
this.onBack = () => {
this.user = null;
};
this.onItemClick = (user) => {
this.user = user;
this.ref.detectChanges();
};
this.emptyMessageStyle = () => {
return {
background: this.usersWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
height: this.usersWithMessagesStyle.height,
width: `calc(${this.usersWithMessagesStyle.width} - 280px)`,
border: "none",
borderRadius: this.usersWithMessagesStyle.borderRadius,
};
};
this.usersWrapperStyles = () => {
return {
height: this.usersWithMessagesStyle.height,
width: this.usersWithMessagesStyle.width,
border: this.usersWithMessagesStyle.border,
borderRadius: this.usersWithMessagesStyle.borderRadius,
background: this.usersWithMessagesStyle.background || this.themeService.theme.palette.getBackground(),
position: 'relative'
};
};
}
ngAfterViewInit() {
this.updateBackdropHeight();
}
updateBackdropHeight() {
let divHeight = this.elementRef.nativeElement.offsetHeight;
let divWidth = this.elementRef.nativeElement.offsetWidth;
if (divHeight === 0 || divWidth === 0) {
const rect = this.elementRef.nativeElement.getBoundingClientRect();
divHeight = rect.height;
divWidth = rect.width;
}
let backdropStyle = {
height: divHeight + "px",
width: divWidth + "px",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed"
};
this.messagesConfiguration.messageListConfiguration.backdropStyle = backdropStyle;
this.messagesConfiguration.detailsConfiguration.backdropStyle = backdropStyle;
this.messagesConfiguration.messageComposerConfiguration.backdropStyle = backdropStyle;
this.messagesConfiguration.detailsConfiguration.groupMembersConfiguration.backdropStyle = backdropStyle;
this.ref.detectChanges();
}
ngOnChanges(changes) {
if (changes["isMobileView"]) {
if (this.isMobileView) {
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.height = "100%";
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.width = "100%";
this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 8px";
this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = false;
this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
this.messagesConfiguration = { ...this.messagesConfiguration };
}
else if (!this.isMobileView) {
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.height = "500px";
this.messagesConfiguration.messageListConfiguration.messageInformationConfiguration.messageInformationStyle.width = "500px";
this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 100px";
this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = true;
this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
this.messagesConfiguration = { ...this.messagesConfiguration };
}
setTimeout(() => {
this.updateBackdropHeight();
}, 100);
}
}
ngOnInit() {
this.setWithMessagesStyle();
if (!this.messagesConfiguration.messageHeaderConfiguration.onBack) {
this.messagesConfiguration.messageHeaderConfiguration.onBack = this.onBack;
}
this.subscribeToEvents();
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
setWithMessagesStyle() {
let defaultStyle = new WithMessagesStyle({
width: "100%",
height: "100%",
background: this.themeService.theme.palette.getBackground(),
borderRadius: "none",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
messageTextColor: this.themeService.theme.palette.getAccent600(),
messageTextFont: fontHelper(this.themeService.theme.typography.title1),
});
this.usersWithMessagesStyle = {
...defaultStyle,
...this.usersWithMessagesStyle
};
this.labelStyle.textFont = this.usersWithMessagesStyle.messageTextFont;
this.labelStyle.textColor = this.usersWithMessagesStyle.messageTextColor;
this.messagesConfiguration.messagesStyle.border = this.messagesConfiguration.messagesStyle.border ?? "none";
this.usersConfiguration.usersStyle.border = this.usersConfiguration.usersStyle.border ?? "none";
if (!this.usersConfiguration?.usersStyle?.border || this.usersConfiguration?.usersStyle?.border == "none") {
this.sideBarStyle = { borderRight: this.usersWithMessagesStyle.border };
}
}
ngOnDestroy() {
this.unsubscribeToEvents();
}
// subscribe to global events
subscribeToEvents() {
this.ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe((user) => {
if (this.user && user.getUid() == this.user.getUid()) {
this.user = user;
this.ref.detectChanges();
}
});
this.ccUserUnBlocked = CometChatUserEvents.ccUserUnblocked.subscribe((user) => {
if (this.user && user.getUid() == this.user.getUid()) {
this.user = user;
this.ref.detectChanges();
}
});
}
// unsubscribe to subscribed events.
unsubscribeToEvents() {
this.ccUserBlocked?.unsubscribe();
this.ccUserUnBlocked?.unsubscribe();
}
}
CometChatUsersWithMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessagesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatUsersWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersWithMessagesComponent, selector: "cometchat-users-with-messages", inputs: { user: "user", isMobileView: "isMobileView", messageText: "messageText", usersWithMessagesStyle: "usersWithMessagesStyle", messagesConfiguration: "messagesConfiguration", usersConfiguration: "usersConfiguration", onError: "onError" }, viewQueries: [{ propertyName: "userRef", first: true, predicate: ["usersRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messagesRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"usersWrapperStyles()\">\n <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n <cometchat-users\n #usersRef\n [activeUser]=\"user\"\n [hideSearch]=\"usersConfiguration.hideSearch\"\n [searchIconURL]=\"usersConfiguration.searchIconURL\"\n [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder\"\n [onItemClick]=\"usersConfiguration.onItemClick || onItemClick\"\n [usersStyle]=\"usersConfiguration.usersStyle\"\n [subtitleView]=\"usersConfiguration.subtitleView\"\n [options]=\"usersConfiguration.options\"\n [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder\"\n [emptyStateView]=\"usersConfiguration.emptyStateView\"\n [onSelect]=\"usersConfiguration.onSelect\"\n [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n [errorStateView]=\"usersConfiguration.errorStateView\"\n [loadingStateView]=\"usersConfiguration.loadingStateView\"\n [titleAlignment]=\"usersConfiguration.titleAlignment\"\n [showSectionHeader]=\"usersConfiguration.showSectionHeader\"\n [listItemView]=\"usersConfiguration.listItemView\"\n [menu]=\"usersConfiguration.menu\"\n [hideSeparator]=\"usersConfiguration.hideSeparator\"\n [hideError]=\"usersConfiguration.hideError\"\n [selectionMode]=\"usersConfiguration.selectionMode\"\n [listItemStyle]=\"usersConfiguration.listItemStyle\"\n [statusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n ></cometchat-users>\n </div>\n <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user\">\n <!--Message List Screen-->\n <cometchat-messages\n #messagesRef\n [user]=\"user!\"\n [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n [disableTyping]=\"messagesConfiguration.disableTyping\"\n [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n [messageListView]=\"messagesConfiguration.messageListView\"\n [hideDetails]=\"messagesConfiguration.hideDetails!\"\n [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\"\n >\n </cometchat-messages>\n <!--Message List Screen ENDS-->\n </div>\n <div class=\"cc-decorator__message--empty\" *ngIf=\"!user\" [ngStyle]=\"emptyMessageStyle()\">\n <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>\n</div>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessagesComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-users-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"usersWrapperStyles()\">\n <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n <cometchat-users\n #usersRef\n [activeUser]=\"user\"\n [hideSearch]=\"usersConfiguration.hideSearch\"\n [searchIconURL]=\"usersConfiguration.searchIconURL\"\n [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder\"\n [onItemClick]=\"usersConfiguration.onItemClick || onItemClick\"\n [usersStyle]=\"usersConfiguration.usersStyle\"\n [subtitleView]=\"usersConfiguration.subtitleView\"\n [options]=\"usersConfiguration.options\"\n [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder\"\n [emptyStateView]=\"usersConfiguration.emptyStateView\"\n [onSelect]=\"usersConfiguration.onSelect\"\n [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n [errorStateView]=\"usersConfiguration.errorStateView\"\n [loadingStateView]=\"usersConfiguration.loadingStateView\"\n [titleAlignment]=\"usersConfiguration.titleAlignment\"\n [showSectionHeader]=\"usersConfiguration.showSectionHeader\"\n [listItemView]=\"usersConfiguration.listItemView\"\n [menu]=\"usersConfiguration.menu\"\n [hideSeparator]=\"usersConfiguration.hideSeparator\"\n [hideError]=\"usersConfiguration.hideError\"\n [selectionMode]=\"usersConfiguration.selectionMode\"\n [listItemStyle]=\"usersConfiguration.listItemStyle\"\n [statusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n ></cometchat-users>\n </div>\n <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user\">\n <!--Message List Screen-->\n <cometchat-messages\n #messagesRef\n [user]=\"user!\"\n [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n [disableTyping]=\"messagesConfiguration.disableTyping\"\n [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n [messageListView]=\"messagesConfiguration.messageListView\"\n [hideDetails]=\"messagesConfiguration.hideDetails!\"\n [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\"\n >\n </cometchat-messages>\n <!--Message List Screen ENDS-->\n </div>\n <div class=\"cc-decorator__message--empty\" *ngIf=\"!user\" [ngStyle]=\"emptyMessageStyle()\">\n <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>\n</div>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { userRef: [{
type: ViewChild,
args: ["usersRef", { static: false }]
}], messageListRef: [{
type: ViewChild,
args: ["messagesRef", { static: false }]
}], user: [{
type: Input
}], isMobileView: [{
type: Input
}], messageText: [{
type: Input
}], usersWithMessagesStyle: [{
type: Input
}], messagesConfiguration: [{
type: Input
}], usersConfiguration: [{
type: Input
}], onError: [{
type: Input
}] } });
class CometChatUsersWithMessages {
}
CometChatUsersWithMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessages, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatUsersWithMessages.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessages, declarations: [CometChatUsersWithMessagesComponent], imports: [CommonModule,
CometChatUsers,
CometChatMessages], exports: [CometChatUsersWithMessagesComponent] });
CometChatUsersWithMessages.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessages, imports: [[
CommonModule,
CometChatUsers,
CometChatMessages,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessages, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatUsersWithMessagesComponent],
imports: [
CommonModule,
CometChatUsers,
CometChatMessages,
],
exports: [CometChatUsersWithMessagesComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
class CallLogUtils {
static isSentByMe(call, loggedInUser) {
const senderUid = call.getInitiator()?.getUid();
return !senderUid || senderUid === loggedInUser?.getUid();
}
static isMissedCall(call, loggedInUser) {
const callStatus = call.getStatus();
const sentByMe = this.isSentByMe(call, loggedInUser);
// If the user sent the call and it was unanswered, it's not counted as missed
if (sentByMe && callStatus === CometChatUIKitConstants.calls.unanswered) {
return false;
}
// The following statuses are considered missed for the receiver
const missedStatuses = [
CometChatUIKitConstants.calls.unanswered,
CometChatUIKitConstants.calls.cancelled,
];
// If the user didn't send the call and the status matches one of the missed statuses, it's a missed call
return !sentByMe && missedStatuses.includes(callStatus);
}
static getCallStatusWithType(call, loggedInUser, includeType = false) {
if (!call || !loggedInUser) {
return "";
}
let callMessageText = "";
const callStatus = call.getStatus();
const sentByMe = this.isSentByMe(call, loggedInUser);
const missedCall = this.isMissedCall(call, loggedInUser);
const callTypeKey = "_";
if (missedCall) {
callMessageText = `MISSED${callTypeKey}CALL`;
}
else {
switch (callStatus) {
case CometChatUIKitConstants.calls.initiated:
callMessageText = sentByMe
? `OUTGOING${callTypeKey}CALL`
: `INCOMING${callTypeKey}CALL`;
break;
case CometChatUIKitConstants.calls.ongoing:
callMessageText = sentByMe
? `ONGOING${callTypeKey}CALL`
: `ONGOING${callTypeKey}CALL`;
break;
case CometChatUIKitConstants.calls.ended:
callMessageText = sentByMe
? `OUTGOING${callTypeKey}CALL`
: `INCOMING${callTypeKey}CALL`;
break;
case CometChatUIKitConstants.calls.unanswered:
callMessageText = sentByMe
? `UNANSWERED${callTypeKey}CALL`
: `MISSED${callTypeKey}CALL`;
break;
case CometChatUIKitConstants.calls.cancelled:
callMessageText = sentByMe
? `CANCELLED${callTypeKey}CALL`
: `MISSED${callTypeKey}CALL`;
break;
case CometChatUIKitConstants.calls.rejected:
callMessageText = sentByMe
? `REJECTED${callTypeKey}CALL`
: `MISSED${callTypeKey}CALL`;
break;
case CometChatUIKitConstants.calls.busy:
callMessageText = sentByMe
? `UNANSWERED${callTypeKey}CALL`
: `MISSED${callTypeKey}CALL`;
break;
default:
callMessageText = `INCOMING${callTypeKey}CALL`;
}
}
return localize(callMessageText);
}
static convertMinutesToHoursMinutesSeconds(minutes) {
const hours = Math.floor(minutes / 60);
const remainingMinutes = Math.floor(minutes % 60);
const seconds = Math.floor((minutes - Math.floor(minutes)) * 60);
let hoursString = "";
let minutesString = "";
let secondsString = "";
if (hours > 0) {
hoursString = `${hours}h`;
}
if (remainingMinutes > 0) {
minutesString = `${remainingMinutes}m`;
}
if (seconds >= 0) {
secondsString = `${seconds}s`;
}
return `${hoursString} ${minutesString} ${secondsString}`;
}
static convertSecondsToHoursMinutesSeconds(seconds) {
const hours = Math.floor(seconds / 3600);
const remainingMinutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = Math.floor((seconds % 3600) % 60);
let hoursString = "";
let minutesString = "";
let secondsString = "";
if (hours > 0) {
hoursString = `${hours}h`;
}
if (remainingMinutes > 0) {
minutesString = `${remainingMinutes}m`;
}
if (remainingSeconds >= 0) {
secondsString = `${remainingSeconds}s`;
}
return `${hoursString} ${minutesString} ${secondsString}`;
}
static isDateDifferent(firstDate, secondDate) {
let firstDateObj, secondDateObj;
firstDateObj = new Date(firstDate * 1000);
secondDateObj = new Date(secondDate * 1000);
return (firstDateObj.getDate() !== secondDateObj.getDate() ||
firstDateObj.getMonth() !== secondDateObj.getMonth() ||
firstDateObj.getFullYear() !== secondDateObj.getFullYear());
}
}
class CometchatCallLogsComponent {
constructor(elementRef, ref, themeService) {
this.elementRef = elementRef;
this.ref = ref;
this.themeService = themeService;
this.title = localize("CALLS");
this.titleAlignment = TitleAlignment.left;
this.emptyStateText = localize("NO_CALLS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.loadingIconURL = "assets/Spinner.svg";
this.infoIconUrl = "assets/InfoIcon.svg";
this.missedAudioCallIconUrl = "assets/missedAudioCallIconUrl.svg";
this.missedVideoCallIconUrl = "assets/missedVideoCallIconUrl.svg";
this.outgoingAudioCallIconUrl = "assets/outgoingAudioCallIconUrl.svg";
this.outgoingVideoCallIconUrl = "assets/outgoingVideoCallIconUrl.svg";
this.incomingAudioCallIconUrl = "assets/incomingAudioCallIconUrl.svg";
this.incomingVideoCallIconUrl = "assets/incomingVideoCallIconUrl.svg";
this.onError = (error) => {
console.log(error);
};
this.datePattern = DatePatterns.time;
this.DateSeparatorPattern = DatePatterns.DayDate;
this.callLogsStyle = {
width: "100%",
height: "100%",
};
this.avatarStyle = {
borderRadius: "16px",
width: "32px",
height: "32px",
};
this.hideSeparator = false;
this.dateSeparatorStyle = {
height: "",
width: "",
};
this.outgoingCallConfiguration = new OutgoingCallConfiguration({});
this.hideError = false;
this.showSectionHeader = true;
this.showMoreInfo = false;
this.sectionHeaderField = "initiatedAt";
this.backdropStyle = {};
this.dateStyle = {};
this.listItemStyle = {};
this.ongoingCallConfiguration = new CallScreenConfiguration({});
this.state = States.loading;
this.listStyle = {};
this.sessionId = "";
this.callLogsListenerId = "calllogscalling" + new Date().getTime();
this.ongoingCallStyle = {};
this.showOngoingCall = false;
this.limit = 30;
this.callsList = [];
this.callsListenerId = "callsList_" + new Date().getTime();
this.loggedInUser = null;
this.authToken = "";
this.showOutgoingCallscreen = false;
this.onScrolledToBottom = null;
this.outgoingCallStyle = {
width: "360px",
height: "581px",
titleTextFont: "700 22px Inter",
titleTextColor: "RGB(20, 20, 20)",
subtitleTextFont: "400 15px Inter",
subtitleTextColor: "RGBA(20, 20, 20, 0.58)",
borderRadius: "8px",
};
this.fetchNextCallLogsList = () => {
this.onScrolledToBottom = null;
this.state = States.loading;
this.ref.detectChanges();
this.callsRequest.fetchNext()
.then((callList) => {
if (callList?.length > 0) {
this.onScrolledToBottom = this.fetchNextCallLogsList;
this.ref.detectChanges();
}
if (callList.length <= 0 && this.callsList?.length <= 0) {
this.state = States.empty;
this.ref.detectChanges();
}
else {
this.state = States.loaded;
this.callsList = [...this.callsList, ...callList];
if (this.callsList.length < 1) {
this.state = States.empty;
this.ref.detectChanges();
}
this.ref.detectChanges();
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
this.state = States.error;
this.ref.detectChanges();
}
this.state = States.error;
this.ref.detectChanges();
});
};
this.handleInfoClick = (call) => {
this.selectedOrActiveCallLogObject = call;
this.ref.detectChanges();
if (this.onInfoClick) {
this.onInfoClick(call);
}
};
this.getActiveCall = (call) => {
if (call.getSessionID() !== undefined &&
call.getSessionID() === this.selectedOrActiveCallLogObject?.getSessionID()) {
return true;
}
else {
return false;
}
};
this.getSectionHeader = (call, index) => {
if (this.callsList && this.callsList.length > 0 && index === 0) {
return this.callsList[0]["initiatedAt"];
}
if (this.callsList &&
this.callsList.length > 0 &&
index > 0 &&
CallLogUtils.isDateDifferent(this.callsList[index - 1]["initiatedAt"], this.callsList[index]["initiatedAt"])) {
return call.getInitiatedAt();
}
};
this.onListItemClickCall = (call) => {
let receiverID = call.getReceiver().uid;
let callType = call?.type;
let receiverType = call?.receiverType;
if (this.loggedInUser?.getUid() === call?.getInitiator()?.getUid()) {
receiverID = call.getReceiver()?.uid;
}
else {
receiverID = call.getInitiator()?.uid;
}
let localCallObj = new CometChat.Call(receiverID, callType, receiverType);
if (receiverType == CometChat.RECEIVER_TYPE.USER) {
CometChat.initiateCall(localCallObj)
.then((outGoingCall) => {
this.cometchatCallObject = outGoingCall;
this.showOutgoingCallscreen = true;
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
};
this.cancelOutgoingCall = () => {
CometChatSoundManager.pause();
CometChat.rejectCall(this.cometchatCallObject.getSessionId(), CometChatUIKitConstants.calls.cancelled)
.then((call) => {
this.showOutgoingCallscreen = false;
CometChatCallEvents.ccCallRejected.next(call);
this.cometchatCallObject = null;
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.showOutgoingCallscreen = false;
this.ref.detectChanges();
};
this.callLogStyle = () => {
return {
height: this.callLogsStyle.height,
width: this.callLogsStyle.width,
background: this.callLogsStyle.background,
border: this.callLogsStyle.border,
borderRadius: this.callLogsStyle.borderRadius,
};
};
this.subtitleStyle = () => {
return {
font: this.callLogsStyle.callStatusTextFont,
color: this.callLogsStyle.callStatusTextColor,
};
};
this.infoButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.callLogsStyle.infoIconTint,
};
};
this.setOngoingCallStyle = () => {
let defaultStyle = new CallscreenStyle({
maxHeight: "100%",
maxWidth: "100%",
border: "none",
borderRadius: "0",
background: "#1c2226",
minHeight: "400px",
minWidth: "400px",
minimizeIconTint: this.themeService.theme.palette.getAccent900(),
maximizeIconTint: this.themeService.theme.palette.getAccent900(),
});
this.ongoingCallStyle = { ...defaultStyle, ...this.ongoingCallStyle };
};
this.state = States.loading;
}
ngOnInit() {
this.setThemeStyle();
this.attachListeners();
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
this.authToken = this.loggedInUser.getAuthToken();
this.callsRequest = this.getRequestBuilder();
this.fetchNextCallLogsList();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
attachListeners() {
CometChat.addCallListener(this.callLogsListenerId, new CometChat.CallListener({
onIncomingCallReceived: (call) => {
this.cometchatCallObject = call;
this.ref.detectChanges();
},
onIncomingCallCancelled: (call) => {
this.cometchatCallObject = null;
this.ref.detectChanges();
},
onOutgoingCallRejected: (call) => {
if (this.cometchatCallObject && this.cometchatCallObject.getSessionId() == call.getSessionId()) {
this.cometchatCallObject = null;
this.showOutgoingCallscreen = false;
this.ref.detectChanges();
}
},
onOutgoingCallAccepted: (call) => {
if (this.cometchatCallObject && this.cometchatCallObject.getSessionId() == call.getSessionId()) {
this.cometchatCallObject = call;
this.openOngoingCallScreen(call);
}
},
onCallEndedMessageReceived: (call) => {
this.cometchatCallObject = null;
this.ref.detectChanges();
},
}));
}
ngOnDestroy() {
this.callsRequest = null;
this.removeListener();
this.ref.detach();
}
removeListener() {
CometChat.removeCallListener(this.callLogsListenerId);
}
getSubtitle(call) {
return CallLogUtils.getCallStatusWithType(call, this.loggedInUser);
}
getCallerName(call) {
if (this.loggedInUser?.getUid() === call?.getInitiator()?.getUid()) {
return call?.getReceiver()?.getName();
}
return call.getInitiator()?.getName();
}
getAvatarUrl(call) {
if (this.loggedInUser?.getUid() === call?.getInitiator()?.getUid()) {
return call?.receiver?.avatar || call?.receiver?.icon;
}
return call.initiator?.avatar || call?.initiator?.icon;
}
getRequestBuilder() {
if (this.callLogRequestBuilder) {
return this.callLogRequestBuilder?.build();
}
else {
return new CometChatUIKitCalls.CallLogRequestBuilder()
.setLimit(this.limit)
.setCallCategory("call")
.setAuthToken(this.authToken)
.build();
}
}
getCallTypeIcon(call) {
const missedCall = CallLogUtils.isMissedCall(call, this.loggedInUser);
const callType = call.getType();
let icon;
if (missedCall) {
if (callType === CometChat.CALL_TYPE.AUDIO) {
icon = this.missedAudioCallIconUrl;
}
else {
icon = this.missedVideoCallIconUrl;
}
}
else if (call.getInitiator().getUid() === this.loggedInUser.getUid()) {
if (callType === CometChat.CALL_TYPE.AUDIO) {
icon = this.outgoingAudioCallIconUrl;
}
else {
icon = this.outgoingVideoCallIconUrl;
}
}
else {
if (callType === CometChat.CALL_TYPE.AUDIO) {
icon = this.incomingAudioCallIconUrl;
}
else {
icon = this.incomingVideoCallIconUrl;
}
}
return icon;
}
setThemeStyle() {
this.setAvatarStyle();
this.setDateStyle();
this.setCallLogsStyle();
this.listStyle = {
titleTextFont: this.callLogsStyle.titleFont,
titleTextColor: this.callLogsStyle.titleColor,
emptyStateTextFont: this.callLogsStyle.emptyStateTextFont,
emptyStateTextColor: this.callLogsStyle.emptyStateTextColor,
errorStateTextFont: this.callLogsStyle.errorStateTextFont,
errorStateTextColor: this.callLogsStyle.errorStateTextColor,
loadingIconTint: this.callLogsStyle.loadingIconTint,
separatorColor: this.callLogsStyle.dateSeparatorTextColor,
sectionHeaderTextColor: this.callLogsStyle.dateSeparatorTextColor || "rgba(20, 20, 20, 0.46)",
sectionHeaderTextFont: this.callLogsStyle.dateSeparatorTextFont,
};
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setDateStyle() {
let defaultStyle = new DateStyle({
textFont: fontHelper(this.themeService.theme.typography.caption2),
textColor: this.themeService.theme.palette.getAccent600(),
background: "transparent",
});
this.dateStyle = { ...defaultStyle, ...this.dateStyle };
}
getListItemStyle(call) {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: this.themeService.theme.palette.getAccent100(),
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
// titleColor: this.isMissedCall(call, this.loggedInUser!)
titleColor: CallLogUtils.isMissedCall(call, this.loggedInUser)
? this.themeService.theme.palette.getError()
: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
padding: "10px",
hoverBackground: this.themeService.theme.palette.getAccent50(),
});
return { ...defaultStyle, ...this.listItemStyle };
}
setCallLogsStyle() {
let defaultStyle = new CallLogsStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
dateSeparatorTextColor: this.themeService.theme.palette.getAccent600(),
dateTextColor: this.themeService.theme.palette.getAccent600(),
dateTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
missedCallIconTint: this.themeService.theme.palette.getAccent600(),
borderRadius: "",
infoIconTint: this.themeService.theme.palette.getPrimary(),
outgoingCallIconTint: this.themeService.theme.palette.getAccent600(),
incomingCallIconTint: this.themeService.theme.palette.getAccent600(),
callStatusTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
callStatusTextColor: this.themeService.theme.palette.getAccent600(),
dateSeparatorTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
});
this.callLogsStyle = { ...defaultStyle, ...this.callLogsStyle };
}
getCallBuilder() {
let audioOnlyCall = this.activeCall?.getType() == CometChatUIKitConstants.MessageTypes.audio
? true
: false;
const callSettings = new CometChatUIKitCalls.CallSettingsBuilder()
.enableDefaultLayout(true)
.setIsAudioOnlyCall(audioOnlyCall)
.setCallListener(new CometChatUIKitCalls.OngoingCallListener({
onCallEnded: () => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
if (this.cometchatCallObject?.getReceiverType() ==
CometChatUIKitConstants.MessageReceiverType.user) {
CometChatUIKitCalls.endSession();
CometChat.clearActiveCall();
this.closeCallScreen();
}
},
onCallEndButtonPressed: () => {
StorageUtils.setItem(CometChatUIKitConstants.calls.activecall, null);
if (this.cometchatCallObject?.getReceiverType() ==
CometChatUIKitConstants.MessageReceiverType.user) {
CometChat.endCall(this.sessionId)
.then((call) => {
CometChatUIKitCalls.endSession();
CometChatCallEvents.ccCallEnded.next(call);
this.closeCallScreen();
})
.catch((err) => {
if (this.onError) {
this.onError(err);
}
});
}
else {
this.closeCallScreen();
}
},
onError: (error) => {
if (this.onError) {
this.onError(error);
}
},
}))
.build();
return callSettings;
}
closeCallScreen() {
this.cometchatCallObject = null;
this.showOngoingCall = false;
this.sessionId = "";
this.showOutgoingCallscreen = false;
this.cometchatCallObject = null;
this.ref.detectChanges();
}
openOngoingCallScreen(call) {
this.showOutgoingCallscreen = false;
this.cometchatCallObject = call;
this.sessionId = call.getSessionId();
this.showOngoingCall = true;
this.ref.detectChanges();
}
getDirectionIconStyle(call) {
let tint;
const missedCall = CallLogUtils.isMissedCall(call, this.loggedInUser);
if (missedCall) {
tint =
this.callLogsStyle.missedCallIconTint ||
this.themeService.theme.palette.getAccent600();
}
else if (call.getInitiator().getUid() === this.loggedInUser?.getUid()) {
tint =
this.callLogsStyle.outgoingCallIconTint ||
this.themeService.theme.palette.getAccent600();
}
else {
tint =
this.callLogsStyle.incomingCallIconTint ||
this.themeService.theme.palette.getAccent600();
}
return {
height: "18px",
width: "18px",
border: "none",
borderRadius: "0",
background: "transparent",
iconTint: tint,
};
}
}
CometchatCallLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometchatCallLogsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometchatCallLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometchatCallLogsComponent, selector: "cometchat-call-logs", inputs: { title: "title", titleAlignment: "titleAlignment", listItemView: "listItemView", subtitleView: "subtitleView", tailView: "tailView", menu: "menu", emptyStateView: "emptyStateView", errorStateView: "errorStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", loadingStateView: "loadingStateView", loadingIconURL: "loadingIconURL", infoIconUrl: "infoIconUrl", missedAudioCallIconUrl: "missedAudioCallIconUrl", missedVideoCallIconUrl: "missedVideoCallIconUrl", outgoingAudioCallIconUrl: "outgoingAudioCallIconUrl", outgoingVideoCallIconUrl: "outgoingVideoCallIconUrl", incomingAudioCallIconUrl: "incomingAudioCallIconUrl", incomingVideoCallIconUrl: "incomingVideoCallIconUrl", callLogRequestBuilder: "callLogRequestBuilder", cometchatCallObject: "cometchatCallObject", onItemClick: "onItemClick", onInfoClick: "onInfoClick", onError: "onError", activeCall: "activeCall", datePattern: "datePattern", DateSeparatorPattern: "DateSeparatorPattern", callLogsStyle: "callLogsStyle", avatarStyle: "avatarStyle", hideSeparator: "hideSeparator", dateSeparatorStyle: "dateSeparatorStyle", outgoingCallConfiguration: "outgoingCallConfiguration", hideError: "hideError", showSectionHeader: "showSectionHeader", showMoreInfo: "showMoreInfo", sectionHeaderField: "sectionHeaderField", backdropStyle: "backdropStyle", dateStyle: "dateStyle", listItemStyle: "listItemStyle", ongoingCallConfiguration: "ongoingCallConfiguration" }, ngImport: i0, template: "<div class=\"cc-call-logs\" [ngStyle]=\"callLogStyle()\">\n <div class=\"cc-menus\" *ngIf=\"menu\">\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n </div>\n <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItemView ? listItemView : listItem\"\n [onScrolledToBottom]=\"onScrolledToBottom\" [list]=\"callsList\" [hideError]=\"hideError\" [title]=\"title\"\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\" [titleAlignment]=\"titleAlignment\"\n [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\" [sectionHeaderField]=\"sectionHeaderField\"\n [showSectionHeader]=\"showSectionHeader\" [errorStateView]=\"errorStateView\" [errorStateText]=\"errorStateText\"\n [listStyle]=\"listStyle\" [state]=\"state\" [getSectionHeader]=\"getSectionHeader!\">\n </cometchat-list>\n\n <ng-template #listItem let-call>\n\n <cometchat-list-item [title]=\"getCallerName(call)\" [avatarURL]=\"getAvatarUrl(call)\"\n [avatarName]=\"getCallerName(call)\" [listItemStyle]=\"getListItemStyle(call)\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onListItemClickCall(call)\"\n [isActive]=\"getActiveCall(call)\">\n <div slot=\"subtitleView\" class=\"cc-call-logs__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #groupSubtitle>\n <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-call-logs__subtitle-view\">\n <div class=\"cc-call__icon\">\n <cometchat-icon [iconStyle]=\"getDirectionIconStyle(call)\" [URL]=\"getCallTypeIcon(call)\"></cometchat-icon>\n </div>\n <div class=\"cc-call__type\">\n {{getSubtitle(call)}}\n </div>\n </div>\n </ng-template>\n <div slot=\"tailView\" class=\"cc-call-logs__tail-view\" *ngIf=\"tailView;else defaultTailView\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n <ng-template #defaultTailView>\n <div slot=\"tailView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-call-logs__subtitle-view\">\n <div class=\"tail__view\">\n <div class=\"cc-call-logs__date\">\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.initiatedAt\"\n [pattern]=\"datePattern\"></cometchat-date>\n <cometchat-button *ngIf=\"showMoreInfo\" [iconURL]=\"infoIconUrl\" class=\"cc-details__close-button\"\n [buttonStyle]=\"infoButtonStyle()\" (cc-button-clicked)=\"handleInfoClick(call)\"></cometchat-button>\n </div>\n </div>\n </div>\n </ng-template>\n\n\n\n </cometchat-list-item>\n\n </ng-template>\n\n\n</div>\n\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\"\n [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\" [sessionID]=\"sessionId\"\n [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n\n<cometchat-backdrop *ngIf=\"showOutgoingCallscreen\" [backdropStyle]=\"backdropStyle\">\n\n <cometchat-outgoing-call [customSoundForCalls]=\"outgoingCallConfiguration.customSoundForCalls\"\n [onError]=\"outgoingCallConfiguration.onError\"\n [disableSoundForCalls]=\"outgoingCallConfiguration.disableSoundForCalls\"\n [avatarStyle]=\"outgoingCallConfiguration.avatarStyle\" [customView]=\"outgoingCallConfiguration.customView\"\n [declineButtonIconURL]=\"outgoingCallConfiguration.declineButtonIconURL\"\n [onCloseClicked]=\"outgoingCallConfiguration.onCloseClicked || cancelOutgoingCall\"\n [outgoingCallStyle]=\"outgoingCallConfiguration.outgoingCallStyle || outgoingCallStyle\"\n [call]=\"cometchatCallObject!\"></cometchat-outgoing-call>\n</cometchat-backdrop>", styles: [".cc-call-logs{height:100%;width:100%;box-sizing:border-box;padding-bottom:24px}.cc-call-logs__tail-view{position:relative}.cc-call-logs__date{display:flex;gap:3px}.cc-menus{position:absolute;right:12px;top:6px}.cc-call-logs__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatOutgoingCallComponent, selector: "cometchat-outgoing-call", inputs: ["call", "declineButtonText", "declineButtonIconURL", "customView", "onError", "disableSoundForCalls", "customSoundForCalls", "avatarStyle", "outgoingCallStyle", "onCloseClicked"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometchatCallLogsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-call-logs", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-logs\" [ngStyle]=\"callLogStyle()\">\n <div class=\"cc-menus\" *ngIf=\"menu\">\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n </div>\n <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItemView ? listItemView : listItem\"\n [onScrolledToBottom]=\"onScrolledToBottom\" [list]=\"callsList\" [hideError]=\"hideError\" [title]=\"title\"\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\" [titleAlignment]=\"titleAlignment\"\n [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\" [sectionHeaderField]=\"sectionHeaderField\"\n [showSectionHeader]=\"showSectionHeader\" [errorStateView]=\"errorStateView\" [errorStateText]=\"errorStateText\"\n [listStyle]=\"listStyle\" [state]=\"state\" [getSectionHeader]=\"getSectionHeader!\">\n </cometchat-list>\n\n <ng-template #listItem let-call>\n\n <cometchat-list-item [title]=\"getCallerName(call)\" [avatarURL]=\"getAvatarUrl(call)\"\n [avatarName]=\"getCallerName(call)\" [listItemStyle]=\"getListItemStyle(call)\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onListItemClickCall(call)\"\n [isActive]=\"getActiveCall(call)\">\n <div slot=\"subtitleView\" class=\"cc-call-logs__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #groupSubtitle>\n <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-call-logs__subtitle-view\">\n <div class=\"cc-call__icon\">\n <cometchat-icon [iconStyle]=\"getDirectionIconStyle(call)\" [URL]=\"getCallTypeIcon(call)\"></cometchat-icon>\n </div>\n <div class=\"cc-call__type\">\n {{getSubtitle(call)}}\n </div>\n </div>\n </ng-template>\n <div slot=\"tailView\" class=\"cc-call-logs__tail-view\" *ngIf=\"tailView;else defaultTailView\">\n <ng-container *ngTemplateOutlet=\"tailView\">\n </ng-container>\n </div>\n <ng-template #defaultTailView>\n <div slot=\"tailView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-call-logs__subtitle-view\">\n <div class=\"tail__view\">\n <div class=\"cc-call-logs__date\">\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.initiatedAt\"\n [pattern]=\"datePattern\"></cometchat-date>\n <cometchat-button *ngIf=\"showMoreInfo\" [iconURL]=\"infoIconUrl\" class=\"cc-details__close-button\"\n [buttonStyle]=\"infoButtonStyle()\" (cc-button-clicked)=\"handleInfoClick(call)\"></cometchat-button>\n </div>\n </div>\n </div>\n </ng-template>\n\n\n\n </cometchat-list-item>\n\n </ng-template>\n\n\n</div>\n\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\"\n [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\" [sessionID]=\"sessionId\"\n [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n\n<cometchat-backdrop *ngIf=\"showOutgoingCallscreen\" [backdropStyle]=\"backdropStyle\">\n\n <cometchat-outgoing-call [customSoundForCalls]=\"outgoingCallConfiguration.customSoundForCalls\"\n [onError]=\"outgoingCallConfiguration.onError\"\n [disableSoundForCalls]=\"outgoingCallConfiguration.disableSoundForCalls\"\n [avatarStyle]=\"outgoingCallConfiguration.avatarStyle\" [customView]=\"outgoingCallConfiguration.customView\"\n [declineButtonIconURL]=\"outgoingCallConfiguration.declineButtonIconURL\"\n [onCloseClicked]=\"outgoingCallConfiguration.onCloseClicked || cancelOutgoingCall\"\n [outgoingCallStyle]=\"outgoingCallConfiguration.outgoingCallStyle || outgoingCallStyle\"\n [call]=\"cometchatCallObject!\"></cometchat-outgoing-call>\n</cometchat-backdrop>", styles: [".cc-call-logs{height:100%;width:100%;box-sizing:border-box;padding-bottom:24px}.cc-call-logs__tail-view{position:relative}.cc-call-logs__date{display:flex;gap:3px}.cc-menus{position:absolute;right:12px;top:6px}.cc-call-logs__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { title: [{
type: Input
}], titleAlignment: [{
type: Input
}], listItemView: [{
type: Input
}], subtitleView: [{
type: Input
}], tailView: [{
type: Input
}], menu: [{
type: Input
}], emptyStateView: [{
type: Input
}], errorStateView: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], loadingStateView: [{
type: Input
}], loadingIconURL: [{
type: Input
}], infoIconUrl: [{
type: Input
}], missedAudioCallIconUrl: [{
type: Input
}], missedVideoCallIconUrl: [{
type: Input
}], outgoingAudioCallIconUrl: [{
type: Input
}], outgoingVideoCallIconUrl: [{
type: Input
}], incomingAudioCallIconUrl: [{
type: Input
}], incomingVideoCallIconUrl: [{
type: Input
}], callLogRequestBuilder: [{
type: Input
}], cometchatCallObject: [{
type: Input
}], onItemClick: [{
type: Input
}], onInfoClick: [{
type: Input
}], onError: [{
type: Input
}], activeCall: [{
type: Input
}], datePattern: [{
type: Input
}], DateSeparatorPattern: [{
type: Input
}], callLogsStyle: [{
type: Input
}], avatarStyle: [{
type: Input
}], hideSeparator: [{
type: Input
}], dateSeparatorStyle: [{
type: Input
}], outgoingCallConfiguration: [{
type: Input
}], hideError: [{
type: Input
}], showSectionHeader: [{
type: Input
}], showMoreInfo: [{
type: Input
}], sectionHeaderField: [{
type: Input
}], backdropStyle: [{
type: Input
}], dateStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], ongoingCallConfiguration: [{
type: Input
}] } });
class CometChatCallLogs {
}
CometChatCallLogs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogs, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatCallLogs.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogs, declarations: [CometchatCallLogsComponent], imports: [CommonModule,
CometChatList,
CometChatOutgoingCall,
CometChatOngoingCall], exports: [CometchatCallLogsComponent] });
CometChatCallLogs.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogs, imports: [[
CommonModule,
CometChatList,
CometChatOutgoingCall,
CometChatOngoingCall,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogs, decorators: [{
type: NgModule,
args: [{
declarations: [CometchatCallLogsComponent],
imports: [
CommonModule,
CometChatList,
CometChatOutgoingCall,
CometChatOngoingCall,
],
exports: [CometchatCallLogsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class CometChatCallLogParticipantsComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.title = localize("PARTICIPANTS");
this.backIconUrl = "assets/backbutton.svg";
this.datePattern = DatePatterns.DayDateTime;
this.onError = (error) => {
console.log(error);
};
this.hideSeparator = false;
this.avatarStyle = {
borderRadius: "16px",
width: "32px",
height: "32px",
};
this.dateStyle = {};
this.CallLogParticipantsStyle = {
width: "100%",
height: "100%",
};
this.listItemStyle = {};
this.participantsList = [];
this.loggedInUser = null;
this.state = States.loaded;
this.listStyle = {};
this.limit = 30;
this.callStyle = () => {
return {
height: this.CallLogParticipantsStyle.height,
width: this.CallLogParticipantsStyle.width,
background: this.CallLogParticipantsStyle.background,
border: this.CallLogParticipantsStyle.border,
borderRadius: this.CallLogParticipantsStyle.borderRadius,
};
};
this.subtitleStyle = () => {
return {
font: this.CallLogParticipantsStyle.callStatusFont,
color: this.CallLogParticipantsStyle.callStatusColor,
};
};
this.titleStyle = () => {
return {
font: this.CallLogParticipantsStyle.titleFont,
color: this.CallLogParticipantsStyle.titleColor,
background: "transparent",
};
};
this.handleBackClick = () => {
if (this.onBackClick) {
this.onBackClick();
}
};
this.backButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.CallLogParticipantsStyle.backIconTint ||
this.themeService.theme.palette.getPrimary(),
};
};
this.state = States.loading;
}
ngOnInit() {
this.setThemeStyle();
CometChat.getLoggedInUser()?.then((user) => {
this.participantsList = this.call?.getParticipants();
this.ref.detectChanges();
this.state = States.loaded;
this.loggedInUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
getTailView(totalSeconds) {
return CallLogUtils.convertMinutesToHoursMinutesSeconds(totalSeconds);
}
setThemeStyle() {
this.setAvatarStyle();
this.setDateStyle();
this.setCallsStyle();
this.listStyle = {
titleTextFont: this.CallLogParticipantsStyle.titleFont,
titleTextColor: this.CallLogParticipantsStyle.titleColor,
};
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setDateStyle() {
let defaultStyle = new DateStyle({
textFont: fontHelper(this.themeService.theme.typography.caption2),
textColor: this.themeService.theme.palette.getAccent600(),
background: "transparent",
});
this.dateStyle = { ...defaultStyle, ...this.dateStyle };
}
getListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: this.themeService.theme.palette.getAccent100(),
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent50(),
hoverBackground: this.themeService.theme.palette.getAccent50(),
});
return { ...defaultStyle, ...this.listItemStyle };
}
setCallsStyle() {
let defaultStyle = new CallLogParticipantsStyle({
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
callStatusFont: fontHelper(this.themeService.theme.typography.subtitle2),
callStatusColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
backIconTint: this.themeService.theme.palette.getPrimary(),
});
this.CallLogParticipantsStyle = {
...defaultStyle,
...this.CallLogParticipantsStyle,
};
}
}
CometChatCallLogParticipantsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogParticipantsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatCallLogParticipantsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallLogParticipantsComponent, selector: "cometchat-call-log-participants", inputs: { title: "title", call: "call", backIconUrl: "backIconUrl", onBackClick: "onBackClick", datePattern: "datePattern", subtitleView: "subtitleView", listItemView: "listItemView", onError: "onError", hideSeparator: "hideSeparator", avatarStyle: "avatarStyle", dateStyle: "dateStyle", CallLogParticipantsStyle: "CallLogParticipantsStyle", listItemStyle: "listItemStyle" }, ngImport: i0, template: "<div class=\"cc-call-log-participants\">\n\n <div class=\"cc-call-log-participants__header\">\n\n <div *ngIf=\"onBackClick\">\n <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n (cc-button-clicked)=\"handleBackClick()\"></cometchat-button>\n\n </div>\n <div [ngStyle]=\"titleStyle()\">\n {{title}}\n </div>\n </div>\n\n <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItemView ? listItemView : listItem\" [list]=\"participantsList\"\n [listStyle]=\"listStyle\">\n </cometchat-list>\n <ng-template #listItem let-participant>\n <cometchat-list-item [title]=\"participant.name\" [avatarURL]=\"participant.avatar\" [avatarName]=\"participant.name\"\n [hideSeparator]=\"hideSeparator\" [listItemStyle]=\"getListItemStyle()\">\n <div slot=\"subtitleView\" class=\"cc-call-log-participants__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #groupSubtitle>\n <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-call-log-participants__subtitle-view\">\n <div class=\"cc-call__type\">\n {{ getTailView(participant.totalDurationInMinutes)! }}\n </div>\n </div>\n </ng-template>\n\n <div slot=\"tailView\" class=\"cc-call-log-participants__tail-view\">\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()!\"\n [pattern]=\"datePattern\"></cometchat-date>\n\n\n </div>\n </cometchat-list-item>\n <ng-template #tailView>\n\n </ng-template>\n </ng-template>\n</div>", styles: [".cc-call-log-participants{height:100%;width:100%;box-sizing:border-box;padding:10px 10px 24px}.cc-call-log-participants__header{display:flex;align-items:center;gap:15px;padding:4px 0}.cc-call-logs-participants__tail-view{position:relative}.cc-call-logs-participants__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogParticipantsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-call-log-participants", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-log-participants\">\n\n <div class=\"cc-call-log-participants__header\">\n\n <div *ngIf=\"onBackClick\">\n <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n (cc-button-clicked)=\"handleBackClick()\"></cometchat-button>\n\n </div>\n <div [ngStyle]=\"titleStyle()\">\n {{title}}\n </div>\n </div>\n\n <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItemView ? listItemView : listItem\" [list]=\"participantsList\"\n [listStyle]=\"listStyle\">\n </cometchat-list>\n <ng-template #listItem let-participant>\n <cometchat-list-item [title]=\"participant.name\" [avatarURL]=\"participant.avatar\" [avatarName]=\"participant.name\"\n [hideSeparator]=\"hideSeparator\" [listItemStyle]=\"getListItemStyle()\">\n <div slot=\"subtitleView\" class=\"cc-call-log-participants__subtitle-view\" *ngIf=\"subtitleView;else groupSubtitle\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #groupSubtitle>\n <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-call-log-participants__subtitle-view\">\n <div class=\"cc-call__type\">\n {{ getTailView(participant.totalDurationInMinutes)! }}\n </div>\n </div>\n </ng-template>\n\n <div slot=\"tailView\" class=\"cc-call-log-participants__tail-view\">\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()!\"\n [pattern]=\"datePattern\"></cometchat-date>\n\n\n </div>\n </cometchat-list-item>\n <ng-template #tailView>\n\n </ng-template>\n </ng-template>\n</div>", styles: [".cc-call-log-participants{height:100%;width:100%;box-sizing:border-box;padding:10px 10px 24px}.cc-call-log-participants__header{display:flex;align-items:center;gap:15px;padding:4px 0}.cc-call-logs-participants__tail-view{position:relative}.cc-call-logs-participants__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { title: [{
type: Input
}], call: [{
type: Input
}], backIconUrl: [{
type: Input
}], onBackClick: [{
type: Input
}], datePattern: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], onError: [{
type: Input
}], hideSeparator: [{
type: Input
}], avatarStyle: [{
type: Input
}], dateStyle: [{
type: Input
}], CallLogParticipantsStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}] } });
class CometChatCallLogParticipants {
}
CometChatCallLogParticipants.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogParticipants, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatCallLogParticipants.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogParticipants, declarations: [CometChatCallLogParticipantsComponent], imports: [CommonModule, CometChatList], exports: [CometChatCallLogParticipantsComponent] });
CometChatCallLogParticipants.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogParticipants, imports: [[CommonModule, CometChatList]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogParticipants, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatCallLogParticipantsComponent],
imports: [CommonModule, CometChatList],
exports: [CometChatCallLogParticipantsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class CometChatCallLogRecordingsComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.title = localize("RECORDING");
this.backIconURL = "assets/backbutton.svg";
this.datePattern = DatePatterns.DayDateTime;
this.downloadIconURL = "assets/download.svg";
this.hideDownloadButton = false;
this.onError = (error) => {
console.log(error);
};
this.avatarStyle = {
borderRadius: "16px",
width: "32px",
height: "32px",
};
this.dateStyle = {};
this.CallLogRecordingsStyle = {
width: "100%",
height: "100%",
};
this.listItemStyle = {};
this.recordingsList = [];
this.loggedInUser = null;
this.state = States.loading;
this.listStyle = {};
this.limit = 30;
this.iconStyle = {
height: "16px",
width: "16px",
iconTint: "RGBA(20, 20, 20, 0.68)",
};
this.download = async (url) => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to download file (HTTP status: ${response.status})`);
}
const blob = await response.blob();
// Create a temporary link element
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = "file.mp4"; // Set the desired file name here
link.style.display = "none";
// Append the link to the body and trigger the download
document.body.appendChild(link);
link.click();
// Clean up
document.body.removeChild(link);
}
catch (error) {
console.error("Error downloading file:", error);
}
};
this.callStyle = () => {
return {
height: this.CallLogRecordingsStyle.height,
width: this.CallLogRecordingsStyle.width,
background: this.CallLogRecordingsStyle.background,
border: this.CallLogRecordingsStyle.border,
borderRadius: this.CallLogRecordingsStyle.borderRadius,
};
};
this.subtitleStyle = () => {
return {
font: this.CallLogRecordingsStyle.recordingDurationFont,
color: this.CallLogRecordingsStyle.recordingDurationColor,
};
};
this.backButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.CallLogRecordingsStyle?.backIconTint,
};
};
this.downLoadIconStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.CallLogRecordingsStyle?.backIconTint,
};
};
this.handleBackClick = () => {
if (this.onBackClick) {
this.onBackClick();
this.ref.detectChanges();
}
};
this.titleStyle = () => {
return {
font: this.CallLogRecordingsStyle.titleFont,
color: this.CallLogRecordingsStyle.titleColor,
background: "transparent",
};
};
this.state = States.loading;
}
ngOnInit() {
this.setThemeStyle();
CometChat.getLoggedInUser()
.then((user) => {
this.loggedInUser = user;
this.recordingsList = this.call?.getRecordings();
this.state = States.loaded;
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
handleDownloadClick(item) {
if (this.onDownloadClick) {
this.onDownloadClick(item);
}
else {
this.download(item?.getRecordingURL());
}
}
getSubtitle(totalSeconds) {
return CallLogUtils.convertMinutesToHoursMinutesSeconds(totalSeconds);
}
setThemeStyle() {
this.iconStyle.iconTint = this.themeService.theme.palette.getAccent600();
this.setAvatarStyle();
this.setDateStyle();
this.setCallRecordingsStyle();
this.listStyle = {
titleTextFont: this.CallLogRecordingsStyle.titleFont,
titleTextColor: this.CallLogRecordingsStyle.titleColor,
};
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setDateStyle() {
let defaultStyle = new DateStyle({
textFont: fontHelper(this.themeService.theme.typography.caption2),
textColor: this.themeService.theme.palette.getAccent600(),
background: "transparent",
});
this.dateStyle = { ...defaultStyle, ...this.dateStyle };
}
getListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: this.themeService.theme.palette.getAccent100(),
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
border: "none",
separatorColor: "rgb(222 222 222 / 46%)" ||
this.themeService.theme.palette.getAccent200(),
hoverBackground: this.themeService.theme.palette.getAccent50(),
padding: "0",
});
return { ...defaultStyle, ...this.listItemStyle };
}
setCallRecordingsStyle() {
let defaultStyle = new CallLogRecordingsStyle({
recordingDurationFont: fontHelper(this.themeService.theme.typography.subtitle2),
recordingDurationColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
backIconTint: this.themeService.theme.palette.getPrimary(),
dateTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
dateTextColor: this.themeService.theme.palette.getAccent600(),
});
this.CallLogRecordingsStyle = {
...this.CallLogRecordingsStyle,
...defaultStyle,
};
}
}
CometChatCallLogRecordingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogRecordingsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatCallLogRecordingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallLogRecordingsComponent, selector: "cometchat-call-log-recordings", inputs: { title: "title", call: "call", onBackClick: "onBackClick", backIconURL: "backIconURL", datePattern: "datePattern", subtitleView: "subtitleView", listItemView: "listItemView", downloadIconURL: "downloadIconURL", onDownloadClick: "onDownloadClick", hideDownloadButton: "hideDownloadButton", onError: "onError", avatarStyle: "avatarStyle", dateStyle: "dateStyle", CallLogRecordingsStyle: "CallLogRecordingsStyle", listItemStyle: "listItemStyle", options: "options" }, ngImport: i0, template: "<div class=\"cc-call-log-recordings\" [ngStyle]=\"callStyle()\">\n\n <div class=\"cc-call-log-recordings__header\">\n\n <div *ngIf=\"onBackClick\">\n <cometchat-button [iconURL]=\"backIconURL\" class=\"cc-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n (cc-button-clicked)=\"handleBackClick()\"></cometchat-button>\n\n </div>\n <div [ngStyle]=\"titleStyle()\">\n {{title}}\n </div>\n </div>\n <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItem\" [list]=\"recordingsList\"\n [title]=\"''\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n\n <ng-template #listItem let-recording>\n <cometchat-list-item [title]=\"recording.rid\" [avatarURL]=\"recording?.avatar\" [listItemStyle]=\"getListItemStyle()\">\n \n <div slot=\"subtitleView\" *ngIf=\"subtitleView;else defaultSubtitleView\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #defaultSubtitleView>\n <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-call-log-recordings__subtitle-view\">\n <div class=\"cc-call__type\">\n {{getSubtitle(recording.duration)}}\n\n </div>\n </div>\n </ng-template>\n\n\n <div slot=\"tailView\" class=\"cc-call-log-recordings__tail-view\">\n\n\n <div class=\"tail__view\">\n <div class=\"cc-call-log-recordings__date\">\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"recording?.endTime\"\n [pattern]=\"datePattern\"></cometchat-date>\n <cometchat-button *ngIf=\"!hideDownloadButton\" [iconURL]=\"downloadIconURL\" class=\"cc-details__close-button\"\n [buttonStyle]=\"downLoadIconStyle()\"\n (cc-button-clicked)=\"handleDownloadClick(recording)\"></cometchat-button>\n </div>\n </div>\n\n </div>\n </cometchat-list-item>\n\n </ng-template>\n</div>", styles: [".cc-call-log-recordings{height:100%;width:100%;box-sizing:border-box;padding:5px 5px 24px}.cc-call-log-recordings__header{display:flex;align-items:center;gap:15px}.cc-call-log-recordings__date{display:flex;flex-direction:row;gap:3px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogRecordingsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-call-log-recordings", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-log-recordings\" [ngStyle]=\"callStyle()\">\n\n <div class=\"cc-call-log-recordings__header\">\n\n <div *ngIf=\"onBackClick\">\n <cometchat-button [iconURL]=\"backIconURL\" class=\"cc-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n (cc-button-clicked)=\"handleBackClick()\"></cometchat-button>\n\n </div>\n <div [ngStyle]=\"titleStyle()\">\n {{title}}\n </div>\n </div>\n <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItem\" [list]=\"recordingsList\"\n [title]=\"''\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n\n <ng-template #listItem let-recording>\n <cometchat-list-item [title]=\"recording.rid\" [avatarURL]=\"recording?.avatar\" [listItemStyle]=\"getListItemStyle()\">\n \n <div slot=\"subtitleView\" *ngIf=\"subtitleView;else defaultSubtitleView\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <ng-template #defaultSubtitleView>\n <div slot=\"subtitleView\" [ngStyle]=\"subtitleStyle()\" class=\"cc-call-log-recordings__subtitle-view\">\n <div class=\"cc-call__type\">\n {{getSubtitle(recording.duration)}}\n\n </div>\n </div>\n </ng-template>\n\n\n <div slot=\"tailView\" class=\"cc-call-log-recordings__tail-view\">\n\n\n <div class=\"tail__view\">\n <div class=\"cc-call-log-recordings__date\">\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"recording?.endTime\"\n [pattern]=\"datePattern\"></cometchat-date>\n <cometchat-button *ngIf=\"!hideDownloadButton\" [iconURL]=\"downloadIconURL\" class=\"cc-details__close-button\"\n [buttonStyle]=\"downLoadIconStyle()\"\n (cc-button-clicked)=\"handleDownloadClick(recording)\"></cometchat-button>\n </div>\n </div>\n\n </div>\n </cometchat-list-item>\n\n </ng-template>\n</div>", styles: [".cc-call-log-recordings{height:100%;width:100%;box-sizing:border-box;padding:5px 5px 24px}.cc-call-log-recordings__header{display:flex;align-items:center;gap:15px}.cc-call-log-recordings__date{display:flex;flex-direction:row;gap:3px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { title: [{
type: Input
}], call: [{
type: Input
}], onBackClick: [{
type: Input
}], backIconURL: [{
type: Input
}], datePattern: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], downloadIconURL: [{
type: Input
}], onDownloadClick: [{
type: Input
}], hideDownloadButton: [{
type: Input
}], onError: [{
type: Input
}], avatarStyle: [{
type: Input
}], dateStyle: [{
type: Input
}], CallLogRecordingsStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], options: [{
type: Input
}] } });
class CometChatCallLogRecordings {
}
CometChatCallLogRecordings.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogRecordings, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatCallLogRecordings.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogRecordings, declarations: [CometChatCallLogRecordingsComponent], imports: [CommonModule, CometChatList], exports: [CometChatCallLogRecordingsComponent] });
CometChatCallLogRecordings.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogRecordings, imports: [[CommonModule, CometChatList]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogRecordings, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatCallLogRecordingsComponent],
imports: [CommonModule, CometChatList],
exports: [CometChatCallLogRecordingsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class CometChatCallLogHistoryComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.title = localize("CALL_HISTORY");
this.emptyStateText = localize("NO_CALLS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.loadingIconURL = "assets/Spinner.svg";
this.backIconUrl = "assets/backbutton.svg";
this.DateSeparatorPattern = DatePatterns.time;
this.hideSeparator = false;
this.dateSeparatorStyle = {
height: "",
width: "",
};
this.hideError = false;
this.onError = (error) => {
console.log(error);
};
this.showSectionHeader = true;
this.sectionHeaderField = "initiatedAt";
this.datePattern = DatePatterns.DayDateTime;
this.avatarStyle = {
borderRadius: "16px",
width: "32px",
height: "32px",
};
this.dateStyle = {};
this.CallLogHistoryStyle = {
width: "100%",
height: "100%",
};
this.listItemStyle = {};
this.state = States.loading;
this.listStyle = {};
this.limit = 30;
this.callHistory = [];
this.callsListenerId = "callsList_" + new Date().getTime();
this.loggedInUser = null;
this.authToken = "";
this.showOutgoingCallscreen = false;
this.onScrolledToBottom = null;
this.fetchNextCallHistoryList = () => {
this.onScrolledToBottom = null;
this.state = States.loading;
this.ref.detectChanges();
try {
this.callsRequest.fetchNext()
.then((callHistory) => {
if (callHistory?.length > 0) {
this.onScrolledToBottom = this.fetchNextCallHistoryList;
this.ref.detectChanges();
}
if ((callHistory.length <= 0 && this.callHistory?.length <= 0) ||
(callHistory.length === 0 && this.callHistory?.length <= 0)) {
this.state = States.empty;
this.ref.detectChanges();
}
else {
this.state = States.loaded;
this.callHistory = [...this.callHistory, ...callHistory];
this.ref.detectChanges();
}
}, (error) => {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.ref.detectChanges();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
catch (error) {
this.state = States.error;
this.ref.detectChanges();
if (this.onError) {
this.onError(CometChatException(error));
}
}
};
this.callLogHistoryStyle = () => {
return {
height: this.CallLogHistoryStyle.height,
width: this.CallLogHistoryStyle.width,
background: this.CallLogHistoryStyle.background,
border: this.CallLogHistoryStyle.border,
borderRadius: this.CallLogHistoryStyle.borderRadius,
};
};
this.subtitleStyle = () => {
return {
font: this.CallLogHistoryStyle.dateTextColor,
color: this.CallLogHistoryStyle.dateTextFont,
};
};
this.tailViewStyle = () => {
return {
font: this.CallLogHistoryStyle.callDurationTextFont,
color: this.CallLogHistoryStyle.callDurationTextColor,
};
};
this.backButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.CallLogHistoryStyle.backIconTint ||
this.themeService.theme.palette.getPrimary(),
};
};
this.getSectionHeader = (call, index) => {
if (this.callHistory && this.callHistory.length > 0 && index === 0) {
return this.callHistory[0]["initiatedAt"];
}
if (this.callHistory &&
index > 0 &&
CallLogUtils.isDateDifferent(this.callHistory[index - 1]["initiatedAt"], this.callHistory[index]["initiatedAt"])) {
return call.initiatedAt;
}
};
this.handleBackClick = () => {
if (this.onBackClick) {
this.onBackClick();
this.ref.detectChanges();
}
};
this.titleStyle = () => {
return {
font: this.CallLogHistoryStyle.titleFont,
color: this.CallLogHistoryStyle.titleColor,
background: "transparent",
};
};
this.state = States.loading;
}
ngOnInit() {
this.setThemeStyle();
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
this.authToken = this.loggedInUser.getAuthToken();
this.callsRequest = this.getRequestBuilder?.();
this.fetchNextCallHistoryList();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.state = States.loading;
}
handleItemClick(call) {
if (this.onItemClick) {
this.onItemClick(call);
}
}
ngOnDestroy() {
this.callsRequest = null;
this.ref.detach();
}
getSubtitle(call) {
return CallLogUtils.getCallStatusWithType(call, this.loggedInUser);
}
getRequestBuilder() {
if (this.callLogRequestBuilder) {
return this.callLogRequestBuilder?.build();
}
else {
if (this.user) {
return new CometChatUIKitCalls.CallLogRequestBuilder()
.setLimit(this.limit)
.setCallCategory("call")
.setAuthToken(this.authToken)
.setUid(this.user.getUid())
.build();
}
else if (this.group) {
return new CometChatUIKitCalls.CallLogRequestBuilder()
.setLimit(this.limit)
.setCallCategory("call")
.setAuthToken(this.authToken)
.setGuid(this.group.getGuid())
.build();
}
else {
return null;
}
}
}
setThemeStyle() {
this.setAvatarStyle();
this.setDateStyle();
this.setCallLogHistoryStyle();
this.listStyle = {
titleTextFont: this.CallLogHistoryStyle.titleFont,
titleTextColor: this.CallLogHistoryStyle.titleColor,
emptyStateTextFont: this.CallLogHistoryStyle.emptyStateTextFont,
emptyStateTextColor: this.CallLogHistoryStyle.emptyStateTextColor,
errorStateTextFont: this.CallLogHistoryStyle.errorStateTextFont,
errorStateTextColor: this.CallLogHistoryStyle.errorStateTextColor,
loadingIconTint: this.CallLogHistoryStyle.loadingIconTint,
separatorColor: this.CallLogHistoryStyle.dateSeparatorTextColor,
sectionHeaderTextColor: this.CallLogHistoryStyle.dateSeparatorTextColor,
sectionHeaderTextFont: this.CallLogHistoryStyle.dateSeparatorTextFont,
};
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setDateStyle() {
let defaultStyle = new DateStyle({
textFont: fontHelper(this.themeService.theme.typography.subtitle2),
textColor: this.themeService.theme.palette.getAccent600(),
background: "transparent",
});
this.dateStyle = { ...defaultStyle, ...this.dateStyle };
}
getListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: this.themeService.theme.palette.getAccent100(),
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
border: "none",
separatorColor: "rgb(222 222 222 / 46%)" ||
this.themeService.theme.palette.getAccent200(),
hoverBackground: this.themeService.theme.palette.getAccent50(),
padding: "0",
});
return { ...defaultStyle, ...this.listItemStyle };
}
setCallLogHistoryStyle() {
let defaultStyle = new CallLogHistoryStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
backIconTint: this.themeService.theme.palette.getPrimary(),
dateTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
dateSeparatorTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
dateSeparatorTextColor: this.themeService.theme.palette.getAccent400(),
callDurationTextFont: fontHelper(this.themeService.theme.typography.caption1),
callDurationTextColor: this.themeService.theme.palette.getAccent500(),
callStatusTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
callStatusTextColor: this.themeService.theme.palette.getAccent400(),
dividerColor: this.themeService.theme.palette.getAccent600(),
});
this.CallLogHistoryStyle = { ...defaultStyle, ...this.CallLogHistoryStyle };
}
getTailView(totalSeconds) {
return CallLogUtils.convertMinutesToHoursMinutesSeconds(totalSeconds);
}
}
CometChatCallLogHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogHistoryComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatCallLogHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallLogHistoryComponent, selector: "cometchat-call-log-history", inputs: { user: "user", group: "group", title: "title", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingStateView: "loadingStateView", subtitleView: "subtitleView", listItemView: "listItemView", menu: "menu", emptyStateText: "emptyStateText", errorStateText: "errorStateText", loadingIconURL: "loadingIconURL", backIconUrl: "backIconUrl", onItemClick: "onItemClick", onBackClick: "onBackClick", callLogRequestBuilder: "callLogRequestBuilder", DateSeparatorPattern: "DateSeparatorPattern", hideSeparator: "hideSeparator", dateSeparatorStyle: "dateSeparatorStyle", hideError: "hideError", onError: "onError", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", datePattern: "datePattern", avatarStyle: "avatarStyle", dateStyle: "dateStyle", CallLogHistoryStyle: "CallLogHistoryStyle", listItemStyle: "listItemStyle" }, ngImport: i0, template: "<div class=\"cc-call-log-history\" [ngStyle]=\"callLogHistoryStyle()\">\n <div class=\"cc-call-log-history__header\">\n\n <div *ngIf=\"onBackClick\">\n <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n (cc-button-clicked)=\"handleBackClick()\"></cometchat-button>\n\n </div>\n <div [ngStyle]=\"titleStyle()\">\n {{title}}\n </div>\n </div>\n <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItemView ? listItemView : listItem\"\n [onScrolledToBottom]=\"onScrolledToBottom\" [list]=\"callHistory\" [hideError]=\"hideError\" [title]=\"''\"\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\" [loadingStateView]=\"loadingStateView\"\n [emptyStateView]=\"emptyStateView\" [errorStateText]=\"emptyStateText\" [sectionHeaderField]=\"sectionHeaderField\"\n [showSectionHeader]=\"showSectionHeader\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\"\n [getSectionHeader]=\"getSectionHeader\">\n </cometchat-list>\n\n <ng-template #listItem let-call>\n\n <cometchat-list-item [listItemStyle]=\"getListItemStyle()\" [title]=\"''\" [hideSeparator]=\"false\"\n (cc-listitem-clicked)=\"handleItemClick(call)\">\n\n\n <div slot=\"subtitleView\">\n <div *ngIf=\"!subtitleView; else subtitle\" style=\"margin-left: 10px;\">\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n [pattern]=\"DateSeparatorPattern\"></cometchat-date>\n <cometchat-label [text]=\"getSubtitle(call)\" [labelStyle]=\"subtitleStyle()\">\n </cometchat-label>\n </div>\n <ng-template #subtitle>\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n </ng-container>\n </ng-template>\n </div>\n\n <div slot=\"tailView\" class=\"cc-call-log-history__tail-view\">\n \n <div> {{ getTailView(call?.getTotalDurationInMinutes()!) }} </div>\n </div>\n </cometchat-list-item>\n <ng-template #tailView>\n\n </ng-template>\n </ng-template>\n\n\n</div>", styles: [".cc-call-log-history{height:100%;width:100%;box-sizing:border-box;padding:10px 10px 24px}.cc-call-log-history__header{display:flex;align-items:center;gap:15px}.cc-call-log-history__tail-view{position:relative}.cc-call-log-history__tail-view>div{color:RGBA(20,20,20,.68)}.cc-menus{position:absolute;right:12px;top:6px}.cc-call-log-history__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogHistoryComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-call-log-history", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-log-history\" [ngStyle]=\"callLogHistoryStyle()\">\n <div class=\"cc-call-log-history__header\">\n\n <div *ngIf=\"onBackClick\">\n <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n (cc-button-clicked)=\"handleBackClick()\"></cometchat-button>\n\n </div>\n <div [ngStyle]=\"titleStyle()\">\n {{title}}\n </div>\n </div>\n <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItemView ? listItemView : listItem\"\n [onScrolledToBottom]=\"onScrolledToBottom\" [list]=\"callHistory\" [hideError]=\"hideError\" [title]=\"''\"\n [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\" [loadingStateView]=\"loadingStateView\"\n [emptyStateView]=\"emptyStateView\" [errorStateText]=\"emptyStateText\" [sectionHeaderField]=\"sectionHeaderField\"\n [showSectionHeader]=\"showSectionHeader\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\"\n [getSectionHeader]=\"getSectionHeader\">\n </cometchat-list>\n\n <ng-template #listItem let-call>\n\n <cometchat-list-item [listItemStyle]=\"getListItemStyle()\" [title]=\"''\" [hideSeparator]=\"false\"\n (cc-listitem-clicked)=\"handleItemClick(call)\">\n\n\n <div slot=\"subtitleView\">\n <div *ngIf=\"!subtitleView; else subtitle\" style=\"margin-left: 10px;\">\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n [pattern]=\"DateSeparatorPattern\"></cometchat-date>\n <cometchat-label [text]=\"getSubtitle(call)\" [labelStyle]=\"subtitleStyle()\">\n </cometchat-label>\n </div>\n <ng-template #subtitle>\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n </ng-container>\n </ng-template>\n </div>\n\n <div slot=\"tailView\" class=\"cc-call-log-history__tail-view\">\n \n <div> {{ getTailView(call?.getTotalDurationInMinutes()!) }} </div>\n </div>\n </cometchat-list-item>\n <ng-template #tailView>\n\n </ng-template>\n </ng-template>\n\n\n</div>", styles: [".cc-call-log-history{height:100%;width:100%;box-sizing:border-box;padding:10px 10px 24px}.cc-call-log-history__header{display:flex;align-items:center;gap:15px}.cc-call-log-history__tail-view{position:relative}.cc-call-log-history__tail-view>div{color:RGBA(20,20,20,.68)}.cc-menus{position:absolute;right:12px;top:6px}.cc-call-log-history__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { user: [{
type: Input
}], group: [{
type: Input
}], title: [{
type: Input
}], emptyStateView: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingStateView: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], menu: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], loadingIconURL: [{
type: Input
}], backIconUrl: [{
type: Input
}], onItemClick: [{
type: Input
}], onBackClick: [{
type: Input
}], callLogRequestBuilder: [{
type: Input
}], DateSeparatorPattern: [{
type: Input
}], hideSeparator: [{
type: Input
}], dateSeparatorStyle: [{
type: Input
}], hideError: [{
type: Input
}], onError: [{
type: Input
}], showSectionHeader: [{
type: Input
}], sectionHeaderField: [{
type: Input
}], datePattern: [{
type: Input
}], avatarStyle: [{
type: Input
}], dateStyle: [{
type: Input
}], CallLogHistoryStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}] } });
class CometChatCallLogHistory {
}
CometChatCallLogHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogHistory, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatCallLogHistory.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogHistory, declarations: [CometChatCallLogHistoryComponent], imports: [CommonModule, CometChatList], exports: [CometChatCallLogHistoryComponent] });
CometChatCallLogHistory.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogHistory, imports: [[CommonModule, CometChatList]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogHistory, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatCallLogHistoryComponent],
imports: [CommonModule, CometChatList],
exports: [CometChatCallLogHistoryComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class CallDetailUtils {
static getDefaultCallTemplate(callLog, loggedInUser, theme) {
return [
this.getPrimaryDetailsTemplate(callLog, loggedInUser, theme),
this.getSecondaryDetailsTemplate(callLog, loggedInUser, theme),
];
}
static getPrimaryDetailsTemplate(callLog, loggedInUser, theme) {
const template = new CometChatCallDetailsTemplate({
id: "callControls",
hideSectionSeparator: true,
sectionSeparatorColor: "red",
options: (user, group) => {
return this.getPrimaryOptions(user ?? undefined, group ?? undefined, callLog ?? undefined, loggedInUser ?? undefined, theme ?? undefined);
},
});
return template;
}
static getPrimaryOptions(user, group, callLog, loggedInUser, theme) {
const options = [];
if (user) {
options.push(new CometChatCallDetailsOption({
id: "calls",
}));
}
options.push(new CometChatCallDetailsOption({
id: "callStatus",
title: callLog?.getInitiatedAt(),
titleFont: fontHelper(theme.typography.subtitle1),
backgroundColor: "rgba(20, 20, 20, 0.04)",
}));
return options;
}
static getSecondaryDetailsTemplate(callLog, loggedInUser, theme) {
const template = new CometChatCallDetailsTemplate({
id: "callOptions",
hideSectionSeparator: true,
options: () => {
return this.getSecondaryOptions(callLog ?? undefined, theme ?? undefined);
},
});
return template;
}
static getSecondaryOptions(callLog, theme) {
const options = [];
const localizedParticipants = "Participants";
const localizedRecording = "Recordings";
const localizedHistory = "History";
options.push(new CometChatCallDetailsOption({
id: "participants",
title: localizedParticipants,
tail: callLog.participants.length,
backgroundColor: "rgba(20, 20, 20, 0.04)",
}));
if (callLog?.hasRecording) {
options.push(new CometChatCallDetailsOption({
id: "recordings",
title: localizedRecording,
tail: callLog.recordings.length,
backgroundColor: "rgba(20, 20, 20, 0.04)",
}));
}
options.push(new CometChatCallDetailsOption({
id: "callHistory",
title: localizedHistory,
backgroundColor: "rgba(20, 20, 20, 0.04)",
}));
return options;
}
}
class CometChatCallLogDetailsComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.title = localize("CALL_DETAILS");
this.hideProfile = false;
this.backIconUrl = "assets/backbutton.svg";
this.greaterThanIconURL = "assets/greaterThanIcon.svg";
this.callButtonsConfiguration = new CallButtonsConfiguration({});
this.callLogParticipantsConfiguration = new CallLogParticipantsConfiguration({});
this.callLogHistoryConfiguration = new CallLogHistoryConfiguration({});
this.callLogRecordingsConfiguration = new CallLogRecordingsConfiguration({});
this.onError = (error) => {
console.log(error);
};
this.datePattern = DatePatterns.time;
this.datePattern2 = DatePatterns.DayDate;
this.data = [];
this.avatarStyle = {
borderRadius: "16px",
width: "28px",
height: "28px",
border: "none",
};
this.labelStyle = {
textFont: '600 22px sans-serif, Inter',
textColor: 'rgb(20, 20, 20)'
};
this.callDetailsStyle = {
width: "100%",
height: "100%",
};
this.listItemStyle = {};
this.dateStyle = {};
this.callButtonsStyle = {
width: "100%",
height: "100%",
border: "none",
borderRadius: "0",
background: "transparent",
};
this.iconStyle = {
height: "16px",
width: "16px",
iconTint: "RGBA(20, 20, 20, 0.68)",
};
this.defaultTemplate = [];
this.authToken = "";
this.loggedInUser = null;
this.showCallLogDetailOptionList = true;
this.showCometChatMessages = true;
this.showParticipantsList = false;
this.showCallRecordingList = false;
this.showCallHistory = false;
this.userListenerId = "userlist_" + new Date().getTime();
this.limit = 5;
this.onItemClick = (call) => {
this.call = call;
this.showCallLogDetailOptionList = true;
this.showCallHistory = false;
this.ref.detectChanges();
};
this.types = [];
this.categories = [];
this.getTemplateOptions = (template) => {
if (template.options) {
return template.options(this.user, this.group, template.id);
}
else
return [];
};
this.onOptionClick = (option) => {
if (option?.onClick) {
option.onClick(this.call);
}
else {
switch (option.id) {
case "participants":
this.showCallLogDetailOptionList = false;
this.showParticipantsList = true;
this.ref.detectChanges();
break;
case "recordings":
this.showCallLogDetailOptionList = false;
this.showCallRecordingList = true;
this.ref.detectChanges();
break;
case "callHistory":
this.showCallLogDetailOptionList = false;
this.showCallHistory = true;
this.ref.detectChanges();
break;
default:
break;
}
}
};
this.handlePageOnBackClick = () => {
this.showCallHistory = false;
this.showCallRecordingList = false;
this.showParticipantsList = false;
this.showCometChatMessages = false;
this.showCallLogDetailOptionList = true;
this.ref.detectChanges();
};
this.wrapperStyle = () => {
return {
width: this.callDetailsStyle.width,
height: this.callDetailsStyle.height,
border: this.callDetailsStyle.border,
borderRadius: this.callDetailsStyle.borderRadius,
background: this.callDetailsStyle.background,
padding: '16px',
};
};
this.profileContainerStyle = () => {
return {
height: "auto",
width: "100%",
minHeight: "150px",
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
boxSizing: "border-box",
gap: "8px",
};
};
this.getTailViewStyle = () => {
return {
font: fontHelper(this.themeService?.theme.typography.text3),
color: this.themeService.theme.palette.getAccent600()
};
};
this.backButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.themeService.theme.palette.getPrimary(),
};
};
}
getTitleStyle() {
return {
textFont: this.callDetailsStyle.titleFont ||
fontHelper(this.themeService.theme.typography.title1),
textColor: this.callDetailsStyle.titleColor ||
this.themeService.theme.palette.getAccent(),
};
}
ngOnChanges(changes) {
if (changes["user"] || changes["group"]) {
this.showCallLogDetailOptionList = true;
this.showParticipantsList = false;
this.showCallRecordingList = false;
this.showCallHistory = false;
this.showCometChatMessages = false;
}
}
removeListener() {
CometChat.removeUserListener(this.userListenerId);
}
ngOnInit() {
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
this.authToken = this.loggedInUser.getAuthToken();
this.getTemplate();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
this.setThemeStyle();
}
trackByFnOption(index, option) {
return option.id;
}
getTemplate() {
if (this.data && this.data?.length > 0) {
this.defaultTemplate = this.data;
this.ref.detectChanges();
}
else {
this.defaultTemplate = CallDetailUtils.getDefaultCallTemplate(this.call, this.loggedInUser, this.themeService.theme);
this.ref.detectChanges();
}
}
getCustomOptionView(option) {
return option?.customView;
}
getSectionHeaderStyle(template) {
return {
textFont: template.titleFont,
textColor: template.titleColor,
};
}
getButtonStyle(option) {
return {
height: "100%",
width: "100%",
border: "none",
borderRadius: "0",
buttonTextFont: option?.titleFont,
buttonTextColor: option?.titleColor,
background: option?.backgroundColor || "transparent",
};
}
subtitleStyle(template) {
return {
textFont: template.titleFont,
textColor: template.titleColor,
};
}
showDataSectionStyle(template) {
return {
textFont: template.titleFont,
textColor: template.titleColor,
};
}
setThemeStyle() {
this.setDetailsStyle();
this.setAvatarStyle();
this.setListItemStyle();
this.setDateStyle();
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getAccent50() ||
this.themeService.theme.palette.getBackground(),
activeBackground: "transparent",
borderRadius: "5px",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: this.themeService.theme.palette.getAccent100(),
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "46px",
height: "46px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setDetailsStyle() {
let defaultStyle = new CallLogDetailsStyle({
background: this.themeService.theme.palette.getBackground(),
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
backIconTint: this.themeService.theme.palette.getPrimary(),
width: "100%",
height: "100%",
borderRadius: "",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
});
this.callDetailsStyle = { ...defaultStyle, ...this.callDetailsStyle };
}
setDateStyle() {
let defaultStyle = new DateStyle({
textFont: fontHelper(this.themeService.theme.typography.caption2),
textColor: this.themeService.theme.palette.getAccent600(),
background: "transparent",
});
this.dateStyle = { ...defaultStyle, ...this.dateStyle };
}
getTailView(totalSeconds) {
return CallLogUtils.convertMinutesToHoursMinutesSeconds(totalSeconds);
}
getSubtitle(call) {
return CallLogUtils.getCallStatusWithType(call, this.loggedInUser);
}
getListItemStyle(option) {
return {
height: "auto",
width: "100%",
background: option?.backgroundColor ||
this.themeService.theme.palette.getBackground(),
borderRadius: "8px",
titleFont: option?.titleFont ||
fontHelper(this.themeService.theme.typography.title2),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: this.themeService.theme.palette.getAccent100(),
};
}
}
CometChatCallLogDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatCallLogDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallLogDetailsComponent, selector: "cometchat-call-log-details", inputs: { call: "call", group: "group", user: "user", title: "title", onBackClick: "onBackClick", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", backIconUrl: "backIconUrl", greaterThanIconURL: "greaterThanIconURL", callButtonsConfiguration: "callButtonsConfiguration", callLogParticipantsConfiguration: "callLogParticipantsConfiguration", callLogHistoryConfiguration: "callLogHistoryConfiguration", callLogRecordingsConfiguration: "callLogRecordingsConfiguration", onError: "onError", datePattern: "datePattern", datePattern2: "datePattern2", data: "data", avatarStyle: "avatarStyle", labelStyle: "labelStyle", callDetailsStyle: "callDetailsStyle", listItemStyle: "listItemStyle", dateStyle: "dateStyle", callButtonsStyle: "callButtonsStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-call-log-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n\n <div class=\"cc-call-log-details__header\"\n *ngIf=\"onBackClick && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-call-log-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n (cc-button-clicked)=\"onBackClick()\"></cometchat-button>\n <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n </div>\n\n <div class=\"cc-call-log-details\">\n <div class=\"cc-call-log-details__profile\"\n *ngIf=\"!hideProfile && showCallLogDetailOptionList && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n\n\n <div class=\" cc-call-log-details__default-profile\" *ngIf=\"!customProfileView;else listitem\" [ngStyle]=\"profileContainerStyle()\">\n <cometchat-avatar [name]=\"user?.getName() ?? group?.getName()\" [avatarStyle]=\"avatarStyle\"\n [image]=\"user?.getAvatar() ?? group?.getIcon()\">\n </cometchat-avatar>\n\n <cometchat-label [text]=\"user?.getName() ?? this.group?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>\n </div>\n <div class=\"cc-call-log-details__section-list\"\n *ngIf=\"showCallLogDetailOptionList && defaultTemplate && defaultTemplate.length > 0\">\n <div class=\"cc-call-log-details__section\" *ngFor=\"let item of defaultTemplate\">\n <div class=\"cc-call-log-details__section-separator\" *ngIf=\"item.title\">\n <cometchat-label [text]=\"item.title\"></cometchat-label>\n </div>\n <div class=\"cc-call-log-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n <div class=\"cc-call-log-details__options\" *ngFor=\"let option of getTemplateOptions(item); trackBy: trackByFnOption \">\n <div class=\"cc-call-log-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\">\n <div class=\"cc-call-log-details__option-element\">\n\n <div class=\"cc-call-log-details__calling-default-option\" *ngIf=\"option.id=='calls'\">\n\n <cometchat-call-buttons [user]=\"user\" [group]=\"group\"\n [callButtonsStyle]=\"callButtonsConfiguration.callButtonsStyle\"\n [onVideoCallClick]=\"callButtonsConfiguration.onVideoCallClick\"\n [onVoiceCallClick]=\"callButtonsConfiguration.onVoiceCallClick\"\n [videoCallIconURL]=\"callButtonsConfiguration.videoCallIconURL\"\n [voiceCallIconURL]=\"callButtonsConfiguration.voiceCallIconURL\"></cometchat-call-buttons>\n </div>\n <cometchat-list-item *ngIf=\"option.id==='callStatus'\" [listItemStyle]=\"getListItemStyle(option)\"\n [hideSeparator]=\"true\">\n <div class=\"cc-call-log-details__call-Status\" slot=\"subtitleView\" >\n <div *ngIf=\"!subtitleView; else subtitle\" style=\"width: 100%;\">\n <div> <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n [pattern]=\"datePattern2\">\n </cometchat-date></div>\n\n <div\n class=\"cc-call-log-details__call-Status__subTitle\">\n <div>\n\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n [pattern]=\"datePattern\">\n </cometchat-date>\n <cometchat-label [text]=\"getSubtitle(call)\" [labelStyle]=\"subtitleStyle(option)\">\n </cometchat-label>\n </div>\n <div class=\"cc-call-log-details__call-Status__tailview\" [style]=\"getTailViewStyle()\"> {{ getTailView(call?.getTotalDurationInMinutes()!) }}\n </div>\n\n </div>\n\n\n </div>\n\n <ng-template #subtitle>\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n </ng-container>\n </ng-template>\n </div>\n\n\n </cometchat-list-item>\n <cometchat-list-item *ngIf=\"option.id!=='calls' && option.id!=='callStatus' \"\n (cc-listitem-clicked)=\"onOptionClick(option)\" [listItemStyle]=\"getListItemStyle(option)\"\n [title]=\"option.title\" [hideSeparator]=\"true\">\n \n <div slot=\"tailView\" class=\"cc-call-log-details__secondary-view__tail-view\" [style]=\"getTailViewStyle()\"\n >\n {{option.tail}}\n <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"greaterThanIconURL\"></cometchat-icon>\n </div>\n\n \n\n </cometchat-list-item>\n\n </div>\n </div>\n <ng-template #customView>\n <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n </ng-container>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n\n\n\n <div *ngIf=\"showParticipantsList || showCallRecordingList || showCallHistory\" style=\" height: 100%;\">\n\n <div *ngIf=\"showParticipantsList\" style=\"height: 100%;\">\n <cometchat-call-log-participants [call]=\"call\"\n [onBackClick]=\"callLogParticipantsConfiguration.onBackClick || handlePageOnBackClick\"\n [backIconUrl]=\"callLogParticipantsConfiguration.backIconUrl || backIconUrl\"\n [avatarStyle]=\"callLogParticipantsConfiguration.avatarStyle\"\n [onItemClick]=\"callLogParticipantsConfiguration.onItemClick!\"\n [datePattern]=\"callLogParticipantsConfiguration.datePattern\"\n [subtitleView]=\"callLogParticipantsConfiguration.subtitleView\"\n [listItemView]=\"callLogParticipantsConfiguration.listItemView\"\n\n [listItemStyle]=\"callLogParticipantsConfiguration.listItemStyle\" [callLogParticipantsStyle]=\"\n callLogParticipantsConfiguration.callLogParticipantsStyle\"\n \n [tailView]=\"callLogParticipantsConfiguration.tailView\"></cometchat-call-log-participants>\n </div>\n <div *ngIf=\"showCallRecordingList\" style=\"height:100%;\">\n <cometchat-call-log-recordings [call]=\"call\"\n [backIconUrl]=\"callLogRecordingsConfiguration.backIconUrl || backIconUrl\" [onBackClick]=\"\n callLogRecordingsConfiguration.onBackClick || handlePageOnBackClick\n \" [onItemClick]=\"callLogRecordingsConfiguration.onItemClick!\"\n [datePattern]=\"callLogRecordingsConfiguration.datePattern!\"\n [listItemStyle]=\"callLogRecordingsConfiguration.listItemStyle\" callLogRecordingsStyle=\"\n callLogRecordingsConfiguration.callLogRecordingsStyle\n callLogRecordingsConfiguration.hideDownloadButton || false\n \" [onDownloadClick]=\"callLogRecordingsConfiguration.onDownloadClick!\"\n [listItemView]=\"callLogRecordingsConfiguration.listItemView\"\n [subtitleView]=\"callLogRecordingsConfiguration.subtitleView\"\n [tailView]=\"callLogRecordingsConfiguration.tailView\"></cometchat-call-log-recordings>\n </div>\n <div *ngIf=\"showCallHistory\" style=\"height: 100%; \">\n <cometchat-call-log-history [call]=\"call\" [user]=\"user\" [group]=\"group\" [onBackClick]=\"handlePageOnBackClick\"\n [backIconUrl]=\"callLogHistoryConfiguration.backIconUrl || backIconUrl\"\n [emptyStateView]=\"callLogHistoryConfiguration.emptyStateView\"\n [errorStateView]=\"callLogHistoryConfiguration.errorStateView\"\n [loadingIconURL]=\"callLogHistoryConfiguration.loadingIconURL\"\n [loadingStateView]=\"callLogHistoryConfiguration.loadingStateView\"\n [tailView]=\"callLogHistoryConfiguration.tailView\" [callLogRequestBuilder]=\"\n callLogHistoryConfiguration.callLogRequestBuilder\n \" [onItemClick]=\"callLogHistoryConfiguration.onItemClick || onItemClick\" [onBackClick]=\"\n callLogHistoryConfiguration.onBackClick || handlePageOnBackClick\n \" [listItemStyle]=\"callLogHistoryConfiguration.listItemStyle\"\n [datePattern]=\"callLogHistoryConfiguration.datePattern\" [dateSeparatorPattern]=\"\n callLogHistoryConfiguration.dateSeparatorPattern\n \" [callLogHistoryStyle]=\"\n callLogHistoryConfiguration.callLogHistoryStyle\n \" [onError]=\"callLogHistoryConfiguration.onError!\"></cometchat-call-log-history>\n </div>\n\n </div>\n </div>\n</div>\n\n\n<ng-template #listitem>\n <ng-container *ngTemplateOutlet=\"customProfileView\">\n </ng-container>\n</ng-template>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-call-log-details__header{display:flex;gap:10px;align-items:center;height:3%}.cc-call-log-details{height:98%}.cc-call-log-details__profile{display:flex;align-items:center;justify-content:center}.cc-call-log-details__default-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.cc-call-log-details__section{margin:10px 3px 3px}.cc-call-log-details__option{margin-top:5px}.cc-call-log-details__calling-default-option{display:flex;align-items:center;justify-content:center;margin:10px}.cc-call-log-details__call-Status{display:flex;justify-content:space-between}.cc-call-log-details__call-Status__subTitle{display:flex;justify-content:space-between;margin:10px 0;padding-right:8px;width:100%}.cc-call-log-details__call-Status__tailview{color:gray}.cc-call-log-details__secondary-view__tail-view{display:flex;align-items:center;justify-content:center;gap:5px;color:RGBA(20,20,20,.68)}\n"], components: [{ type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }, { type: CometChatCallLogParticipantsComponent, selector: "cometchat-call-log-participants", inputs: ["title", "call", "backIconUrl", "onBackClick", "datePattern", "subtitleView", "listItemView", "onError", "hideSeparator", "avatarStyle", "dateStyle", "CallLogParticipantsStyle", "listItemStyle"] }, { type: CometChatCallLogRecordingsComponent, selector: "cometchat-call-log-recordings", inputs: ["title", "call", "onBackClick", "backIconURL", "datePattern", "subtitleView", "listItemView", "downloadIconURL", "onDownloadClick", "hideDownloadButton", "onError", "avatarStyle", "dateStyle", "CallLogRecordingsStyle", "listItemStyle", "options"] }, { type: CometChatCallLogHistoryComponent, selector: "cometchat-call-log-history", inputs: ["user", "group", "title", "emptyStateView", "errorStateView", "loadingStateView", "subtitleView", "listItemView", "menu", "emptyStateText", "errorStateText", "loadingIconURL", "backIconUrl", "onItemClick", "onBackClick", "callLogRequestBuilder", "DateSeparatorPattern", "hideSeparator", "dateSeparatorStyle", "hideError", "onError", "showSectionHeader", "sectionHeaderField", "datePattern", "avatarStyle", "dateStyle", "CallLogHistoryStyle", "listItemStyle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogDetailsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-call-log-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-log-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n\n <div class=\"cc-call-log-details__header\"\n *ngIf=\"onBackClick && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-call-log-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n (cc-button-clicked)=\"onBackClick()\"></cometchat-button>\n <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n </div>\n\n <div class=\"cc-call-log-details\">\n <div class=\"cc-call-log-details__profile\"\n *ngIf=\"!hideProfile && showCallLogDetailOptionList && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n\n\n <div class=\" cc-call-log-details__default-profile\" *ngIf=\"!customProfileView;else listitem\" [ngStyle]=\"profileContainerStyle()\">\n <cometchat-avatar [name]=\"user?.getName() ?? group?.getName()\" [avatarStyle]=\"avatarStyle\"\n [image]=\"user?.getAvatar() ?? group?.getIcon()\">\n </cometchat-avatar>\n\n <cometchat-label [text]=\"user?.getName() ?? this.group?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>\n </div>\n <div class=\"cc-call-log-details__section-list\"\n *ngIf=\"showCallLogDetailOptionList && defaultTemplate && defaultTemplate.length > 0\">\n <div class=\"cc-call-log-details__section\" *ngFor=\"let item of defaultTemplate\">\n <div class=\"cc-call-log-details__section-separator\" *ngIf=\"item.title\">\n <cometchat-label [text]=\"item.title\"></cometchat-label>\n </div>\n <div class=\"cc-call-log-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n <div class=\"cc-call-log-details__options\" *ngFor=\"let option of getTemplateOptions(item); trackBy: trackByFnOption \">\n <div class=\"cc-call-log-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\">\n <div class=\"cc-call-log-details__option-element\">\n\n <div class=\"cc-call-log-details__calling-default-option\" *ngIf=\"option.id=='calls'\">\n\n <cometchat-call-buttons [user]=\"user\" [group]=\"group\"\n [callButtonsStyle]=\"callButtonsConfiguration.callButtonsStyle\"\n [onVideoCallClick]=\"callButtonsConfiguration.onVideoCallClick\"\n [onVoiceCallClick]=\"callButtonsConfiguration.onVoiceCallClick\"\n [videoCallIconURL]=\"callButtonsConfiguration.videoCallIconURL\"\n [voiceCallIconURL]=\"callButtonsConfiguration.voiceCallIconURL\"></cometchat-call-buttons>\n </div>\n <cometchat-list-item *ngIf=\"option.id==='callStatus'\" [listItemStyle]=\"getListItemStyle(option)\"\n [hideSeparator]=\"true\">\n <div class=\"cc-call-log-details__call-Status\" slot=\"subtitleView\" >\n <div *ngIf=\"!subtitleView; else subtitle\" style=\"width: 100%;\">\n <div> <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n [pattern]=\"datePattern2\">\n </cometchat-date></div>\n\n <div\n class=\"cc-call-log-details__call-Status__subTitle\">\n <div>\n\n <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n [pattern]=\"datePattern\">\n </cometchat-date>\n <cometchat-label [text]=\"getSubtitle(call)\" [labelStyle]=\"subtitleStyle(option)\">\n </cometchat-label>\n </div>\n <div class=\"cc-call-log-details__call-Status__tailview\" [style]=\"getTailViewStyle()\"> {{ getTailView(call?.getTotalDurationInMinutes()!) }}\n </div>\n\n </div>\n\n\n </div>\n\n <ng-template #subtitle>\n <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n </ng-container>\n </ng-template>\n </div>\n\n\n </cometchat-list-item>\n <cometchat-list-item *ngIf=\"option.id!=='calls' && option.id!=='callStatus' \"\n (cc-listitem-clicked)=\"onOptionClick(option)\" [listItemStyle]=\"getListItemStyle(option)\"\n [title]=\"option.title\" [hideSeparator]=\"true\">\n \n <div slot=\"tailView\" class=\"cc-call-log-details__secondary-view__tail-view\" [style]=\"getTailViewStyle()\"\n >\n {{option.tail}}\n <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"greaterThanIconURL\"></cometchat-icon>\n </div>\n\n \n\n </cometchat-list-item>\n\n </div>\n </div>\n <ng-template #customView>\n <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n </ng-container>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n\n\n\n <div *ngIf=\"showParticipantsList || showCallRecordingList || showCallHistory\" style=\" height: 100%;\">\n\n <div *ngIf=\"showParticipantsList\" style=\"height: 100%;\">\n <cometchat-call-log-participants [call]=\"call\"\n [onBackClick]=\"callLogParticipantsConfiguration.onBackClick || handlePageOnBackClick\"\n [backIconUrl]=\"callLogParticipantsConfiguration.backIconUrl || backIconUrl\"\n [avatarStyle]=\"callLogParticipantsConfiguration.avatarStyle\"\n [onItemClick]=\"callLogParticipantsConfiguration.onItemClick!\"\n [datePattern]=\"callLogParticipantsConfiguration.datePattern\"\n [subtitleView]=\"callLogParticipantsConfiguration.subtitleView\"\n [listItemView]=\"callLogParticipantsConfiguration.listItemView\"\n\n [listItemStyle]=\"callLogParticipantsConfiguration.listItemStyle\" [callLogParticipantsStyle]=\"\n callLogParticipantsConfiguration.callLogParticipantsStyle\"\n \n [tailView]=\"callLogParticipantsConfiguration.tailView\"></cometchat-call-log-participants>\n </div>\n <div *ngIf=\"showCallRecordingList\" style=\"height:100%;\">\n <cometchat-call-log-recordings [call]=\"call\"\n [backIconUrl]=\"callLogRecordingsConfiguration.backIconUrl || backIconUrl\" [onBackClick]=\"\n callLogRecordingsConfiguration.onBackClick || handlePageOnBackClick\n \" [onItemClick]=\"callLogRecordingsConfiguration.onItemClick!\"\n [datePattern]=\"callLogRecordingsConfiguration.datePattern!\"\n [listItemStyle]=\"callLogRecordingsConfiguration.listItemStyle\" callLogRecordingsStyle=\"\n callLogRecordingsConfiguration.callLogRecordingsStyle\n callLogRecordingsConfiguration.hideDownloadButton || false\n \" [onDownloadClick]=\"callLogRecordingsConfiguration.onDownloadClick!\"\n [listItemView]=\"callLogRecordingsConfiguration.listItemView\"\n [subtitleView]=\"callLogRecordingsConfiguration.subtitleView\"\n [tailView]=\"callLogRecordingsConfiguration.tailView\"></cometchat-call-log-recordings>\n </div>\n <div *ngIf=\"showCallHistory\" style=\"height: 100%; \">\n <cometchat-call-log-history [call]=\"call\" [user]=\"user\" [group]=\"group\" [onBackClick]=\"handlePageOnBackClick\"\n [backIconUrl]=\"callLogHistoryConfiguration.backIconUrl || backIconUrl\"\n [emptyStateView]=\"callLogHistoryConfiguration.emptyStateView\"\n [errorStateView]=\"callLogHistoryConfiguration.errorStateView\"\n [loadingIconURL]=\"callLogHistoryConfiguration.loadingIconURL\"\n [loadingStateView]=\"callLogHistoryConfiguration.loadingStateView\"\n [tailView]=\"callLogHistoryConfiguration.tailView\" [callLogRequestBuilder]=\"\n callLogHistoryConfiguration.callLogRequestBuilder\n \" [onItemClick]=\"callLogHistoryConfiguration.onItemClick || onItemClick\" [onBackClick]=\"\n callLogHistoryConfiguration.onBackClick || handlePageOnBackClick\n \" [listItemStyle]=\"callLogHistoryConfiguration.listItemStyle\"\n [datePattern]=\"callLogHistoryConfiguration.datePattern\" [dateSeparatorPattern]=\"\n callLogHistoryConfiguration.dateSeparatorPattern\n \" [callLogHistoryStyle]=\"\n callLogHistoryConfiguration.callLogHistoryStyle\n \" [onError]=\"callLogHistoryConfiguration.onError!\"></cometchat-call-log-history>\n </div>\n\n </div>\n </div>\n</div>\n\n\n<ng-template #listitem>\n <ng-container *ngTemplateOutlet=\"customProfileView\">\n </ng-container>\n</ng-template>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-call-log-details__header{display:flex;gap:10px;align-items:center;height:3%}.cc-call-log-details{height:98%}.cc-call-log-details__profile{display:flex;align-items:center;justify-content:center}.cc-call-log-details__default-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.cc-call-log-details__section{margin:10px 3px 3px}.cc-call-log-details__option{margin-top:5px}.cc-call-log-details__calling-default-option{display:flex;align-items:center;justify-content:center;margin:10px}.cc-call-log-details__call-Status{display:flex;justify-content:space-between}.cc-call-log-details__call-Status__subTitle{display:flex;justify-content:space-between;margin:10px 0;padding-right:8px;width:100%}.cc-call-log-details__call-Status__tailview{color:gray}.cc-call-log-details__secondary-view__tail-view{display:flex;align-items:center;justify-content:center;gap:5px;color:RGBA(20,20,20,.68)}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { call: [{
type: Input
}], group: [{
type: Input
}], user: [{
type: Input
}], title: [{
type: Input
}], onBackClick: [{
type: Input
}], hideProfile: [{
type: Input
}], subtitleView: [{
type: Input
}], customProfileView: [{
type: Input
}], backIconUrl: [{
type: Input
}], greaterThanIconURL: [{
type: Input
}], callButtonsConfiguration: [{
type: Input
}], callLogParticipantsConfiguration: [{
type: Input
}], callLogHistoryConfiguration: [{
type: Input
}], callLogRecordingsConfiguration: [{
type: Input
}], onError: [{
type: Input
}], datePattern: [{
type: Input
}], datePattern2: [{
type: Input
}], data: [{
type: Input
}], avatarStyle: [{
type: Input
}], labelStyle: [{
type: Input
}], callDetailsStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], dateStyle: [{
type: Input
}], callButtonsStyle: [{
type: Input
}] } });
class CometChatCallLogDetails {
}
CometChatCallLogDetails.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogDetails, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatCallLogDetails.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogDetails, declarations: [CometChatCallLogDetailsComponent], imports: [CommonModule,
CometChatCallButtons,
CometChatList,
CometChatCallLogParticipants,
CometChatCallLogRecordings,
CometChatCallLogHistory,
CometChatCallLogs], exports: [CometChatCallLogDetailsComponent] });
CometChatCallLogDetails.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogDetails, imports: [[
CommonModule,
CometChatCallButtons,
CometChatList,
CometChatCallLogParticipants,
CometChatCallLogRecordings,
CometChatCallLogHistory,
CometChatCallLogs,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogDetails, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatCallLogDetailsComponent],
imports: [
CommonModule,
CometChatCallButtons,
CometChatList,
CometChatCallLogParticipants,
CometChatCallLogRecordings,
CometChatCallLogHistory,
CometChatCallLogs,
],
exports: [CometChatCallLogDetailsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class CometChatCallLogsWithDetailsComponent {
constructor(elementRef, ref, themeService) {
this.elementRef = elementRef;
this.ref = ref;
this.themeService = themeService;
this.isMobileView = false;
this.messageText = localize("NO_CALLS_SELECTED");
this.withDetailsStyle = {};
this.showMoreInfo = true;
this.backdropStyle = {};
this.callLogDetailsConfiguration = new CallLogDetailsConfiguration({});
this.callLogConfiguration = new CallLogsConfiguration({});
this.onError = (error) => {
console.log(error);
};
this.computedCallLogDetailsConfig = new CallLogDetailsConfiguration({});
this.labelStyle = {
background: "transparent",
textFont: "700 22px Inter",
textColor: "rgba(20, 20, 20, 0.33)",
};
this.onBackClick = () => {
this.user = null;
this.group = null;
this.activeCall = null;
};
this.onInfoClick = (call) => {
this.call = call;
this.setActiveCallLog();
};
this.emptyMessageStyle = () => {
return {
background: this.withDetailsStyle.background ||
this.themeService.theme.palette.getBackground(),
height: this.withDetailsStyle.height,
width: `calc(${this.withDetailsStyle.width} - 280px)`,
border: this.withDetailsStyle.border,
borderRadius: this.withDetailsStyle.borderRadius,
};
};
this.chatsWrapperStyles = () => {
return {
height: this.withDetailsStyle.height,
width: this.withDetailsStyle.width,
border: this.withDetailsStyle.border,
borderRadius: this.withDetailsStyle.borderRadius,
background: this.withDetailsStyle.background ||
this.themeService.theme.palette.getBackground(),
};
};
}
ngOnChanges(changes) {
if (changes["user"] || changes["group"]) {
this.setActiveCallLog();
}
if (changes["isMobileView"]) {
if (this.isMobileView) {
this.backdropStyle.height = "100%";
this.backdropStyle.width = "100%";
this.computedCallLogDetailsConfig =
this.computedCallLogDetailsConfiguration();
}
else if (!this.isMobileView) {
this.backdropStyle.height = "100%";
this.backdropStyle.width = "100%";
this.computedCallLogDetailsConfig =
this.computedCallLogDetailsConfiguration();
}
setTimeout(() => {
this.updateBackdropHeight();
}, 100);
}
}
updateBackdropHeight() {
let divHeight = this.elementRef.nativeElement.offsetHeight;
let divWidth = this.elementRef.nativeElement.offsetWidth;
if (divHeight === 0 || divWidth === 0) {
const rect = this.elementRef.nativeElement.getBoundingClientRect();
divHeight = rect.height;
divWidth = rect.width;
}
this.backdropStyle = {
height: divHeight + "px",
width: divWidth + "px",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed",
};
if (this.isMobileView) {
this.backdropStyle.height = divHeight + "px";
this.backdropStyle.width = divWidth + "px";
}
else {
this.backdropStyle.height = divHeight + "px";
this.backdropStyle.width = divWidth + "px";
}
this.backdropStyle.height = divHeight + "px";
this.backdropStyle.width = divWidth + "px";
}
setWithDetailsStyle() {
let defaultStyle = new WithDetailsStyle({
width: "100%",
height: "100%",
background: this.themeService.theme.palette.getBackground(),
borderRadius: "none",
border: "none",
messageTextColor: this.themeService.theme.palette.getAccent600(),
messageTextFont: fontHelper(this.themeService.theme.typography.title1),
});
this.withDetailsStyle = {
...defaultStyle,
...this.withDetailsStyle,
};
this.labelStyle.textFont = this.withDetailsStyle.messageTextFont;
this.labelStyle.textColor = this.withDetailsStyle.messageTextColor;
}
setActiveCallLog() {
this.activeCall = this.call;
if (this.call.getInitiator().getUid() == this.loggedInUser?.getUid()) {
if (this.call.getReceiverType() ==
CometChatUIKitConstants.MessageReceiverType.user) {
this.user = this.call.getReceiver();
this.group = null;
}
else {
this.user = null;
this.group = this.call.getReceiver();
}
}
else {
this.user = this.call.getInitiator();
}
}
ngOnInit() {
this.computedCallLogDetailsConfig =
this.computedCallLogDetailsConfiguration();
this.updateBackdropHeight();
this.setWithDetailsStyle();
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
computedCallLogDetailsConfiguration() {
const config = new CallLogDetailsConfiguration({});
Object.assign(config, this.callLogDetailsConfiguration);
config.callLogDetailsStyle = {
...config.callLogDetailsStyle,
border: `1px solid ${this.themeService.theme.palette?.getAccent100()}`,
};
if (this.isMobileView)
config.onBackClick = () => {
this.activeCall = null;
this.user = null;
this.group = null;
};
return config;
}
}
CometChatCallLogsWithDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogsWithDetailsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatCallLogsWithDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallLogsWithDetailsComponent, selector: "cometchat-call-logs-with-details", inputs: { isMobileView: "isMobileView", messageText: "messageText", withDetailsStyle: "withDetailsStyle", showMoreInfo: "showMoreInfo", backdropStyle: "backdropStyle", call: "call", callLogDetailsConfiguration: "callLogDetailsConfiguration", callLogConfiguration: "callLogConfiguration", onError: "onError" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-details__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n <div class=\"cc-with-details__sidebar\" [ngClass]=\"{mobile : isMobileView}\">\n <cometchat-call-logs [activeCall]=\"activeCall\" [showMoreInfo]=\"showMoreInfo\" [backdropStyle]=\"backdropStyle\"\n [activeCall]=\"activeCall\" [titleAlignment]=\"callLogConfiguration?.titleAlignment!\"\n [emptyStateView]=\"callLogConfiguration.emptyStateView\" \n [errorStateView]=\"callLogConfiguration.errorStateView\"\n [subtitleView]=\"callLogConfiguration.subtitleView\" \n [listItemView]=\"callLogConfiguration.listItemView\" \n [tailView]=\"callLogConfiguration.tailView\" \n [loadingIconURL]=\"callLogConfiguration.loadingIconURL\" [loadingStateView]=\"callLogConfiguration.loadingStateView\"\n [callLogRequestBuilder]=\"callLogConfiguration.callLogRequestBuilder\"\n [onItemClick]=\"callLogConfiguration.onItemClick!\" [onInfoClick]=\"callLogConfiguration.onInfoClick || onInfoClick! \"\n [onError]=\"callLogConfiguration.onError!\" [listItemStyle]=\"callLogConfiguration.listItemStyle\"\n [infoIconUrl]=\"callLogConfiguration.infoIconUrl\" [datePattern]=\"callLogConfiguration.datePattern\"\n [dateSeparatorPattern]=\"callLogConfiguration.dateSeparatorPattern\"\n [incomingAudioCallIconUrl]=\"callLogConfiguration.incomingAudioCallIconUrl\"\n [incomingVideoCallIconUrl]=\"callLogConfiguration.incomingVideoCallIconUrl\"\n [outgoingAudioCallIconUrl]=\"callLogConfiguration.outgoingAudioCallIconUrl\"\n [outgoingVideoCallIconUrl]=\"callLogConfiguration.outgoingVideoCallIconUrl\"\n [missedAudioCallIconUrl]=\"callLogConfiguration.missedAudioCallIconUrl\"\n [missedVideoCallIconUrl]=\"callLogConfiguration.missedVideoCallIconUrl\"\n [callLogsStyle]=\"callLogConfiguration.callLogsStyle\" [avatarStyle]=\"callLogConfiguration.avatarStyle\"\n [hideSeparator]=\"callLogConfiguration.hideSeparator\"\n [outgoingCallConfiguration]=\"callLogConfiguration.outgoingCallConfiguration\"></cometchat-call-logs>\n </div>\n <div class=\"cc-with-details__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"activeCall && (user || group)\">\n <!--call details Screen-->\n <cometchat-call-log-details [user]=\"user!\" [group]=\"group!\" [call]=\"call\"\n [backIconUrl]=\"computedCallLogDetailsConfig.backIconUrl\" [avatarStyle]=\"computedCallLogDetailsConfig.avatarStyle\"\n [onBackClick]=\"computedCallLogDetailsConfig.onBackClick || onBackClick\"\n [callLogHistoryConfiguration]=\"computedCallLogDetailsConfig.callLogHistoryConfiguration\"\n [callLogParticipantsConfiguration]=\"computedCallLogDetailsConfig.callLogParticipantsConfiguration\"\n [callLogRecordingsConfiguration]=\"computedCallLogDetailsConfig.callLogRecordingsConfiguration\"\n [callLogDetailStyle]=\"computedCallLogDetailsConfig.callLogDetailsStyle\">\n </cometchat-call-log-details>\n </div>\n\n <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group\" [ngStyle]=\"emptyMessageStyle()\">\n <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>", styles: [".cc-with-details__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-details__sidebar{width:280px;height:100%;position:relative}.cc-with-details__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometchatCallLogsComponent, selector: "cometchat-call-logs", inputs: ["title", "titleAlignment", "listItemView", "subtitleView", "tailView", "menu", "emptyStateView", "errorStateView", "emptyStateText", "errorStateText", "loadingStateView", "loadingIconURL", "infoIconUrl", "missedAudioCallIconUrl", "missedVideoCallIconUrl", "outgoingAudioCallIconUrl", "outgoingVideoCallIconUrl", "incomingAudioCallIconUrl", "incomingVideoCallIconUrl", "callLogRequestBuilder", "cometchatCallObject", "onItemClick", "onInfoClick", "onError", "activeCall", "datePattern", "DateSeparatorPattern", "callLogsStyle", "avatarStyle", "hideSeparator", "dateSeparatorStyle", "outgoingCallConfiguration", "hideError", "showSectionHeader", "showMoreInfo", "sectionHeaderField", "backdropStyle", "dateStyle", "listItemStyle", "ongoingCallConfiguration"] }, { type: CometChatCallLogDetailsComponent, selector: "cometchat-call-log-details", inputs: ["call", "group", "user", "title", "onBackClick", "hideProfile", "subtitleView", "customProfileView", "backIconUrl", "greaterThanIconURL", "callButtonsConfiguration", "callLogParticipantsConfiguration", "callLogHistoryConfiguration", "callLogRecordingsConfiguration", "onError", "datePattern", "datePattern2", "data", "avatarStyle", "labelStyle", "callDetailsStyle", "listItemStyle", "dateStyle", "callButtonsStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogsWithDetailsComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-call-logs-with-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-details__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n <div class=\"cc-with-details__sidebar\" [ngClass]=\"{mobile : isMobileView}\">\n <cometchat-call-logs [activeCall]=\"activeCall\" [showMoreInfo]=\"showMoreInfo\" [backdropStyle]=\"backdropStyle\"\n [activeCall]=\"activeCall\" [titleAlignment]=\"callLogConfiguration?.titleAlignment!\"\n [emptyStateView]=\"callLogConfiguration.emptyStateView\" \n [errorStateView]=\"callLogConfiguration.errorStateView\"\n [subtitleView]=\"callLogConfiguration.subtitleView\" \n [listItemView]=\"callLogConfiguration.listItemView\" \n [tailView]=\"callLogConfiguration.tailView\" \n [loadingIconURL]=\"callLogConfiguration.loadingIconURL\" [loadingStateView]=\"callLogConfiguration.loadingStateView\"\n [callLogRequestBuilder]=\"callLogConfiguration.callLogRequestBuilder\"\n [onItemClick]=\"callLogConfiguration.onItemClick!\" [onInfoClick]=\"callLogConfiguration.onInfoClick || onInfoClick! \"\n [onError]=\"callLogConfiguration.onError!\" [listItemStyle]=\"callLogConfiguration.listItemStyle\"\n [infoIconUrl]=\"callLogConfiguration.infoIconUrl\" [datePattern]=\"callLogConfiguration.datePattern\"\n [dateSeparatorPattern]=\"callLogConfiguration.dateSeparatorPattern\"\n [incomingAudioCallIconUrl]=\"callLogConfiguration.incomingAudioCallIconUrl\"\n [incomingVideoCallIconUrl]=\"callLogConfiguration.incomingVideoCallIconUrl\"\n [outgoingAudioCallIconUrl]=\"callLogConfiguration.outgoingAudioCallIconUrl\"\n [outgoingVideoCallIconUrl]=\"callLogConfiguration.outgoingVideoCallIconUrl\"\n [missedAudioCallIconUrl]=\"callLogConfiguration.missedAudioCallIconUrl\"\n [missedVideoCallIconUrl]=\"callLogConfiguration.missedVideoCallIconUrl\"\n [callLogsStyle]=\"callLogConfiguration.callLogsStyle\" [avatarStyle]=\"callLogConfiguration.avatarStyle\"\n [hideSeparator]=\"callLogConfiguration.hideSeparator\"\n [outgoingCallConfiguration]=\"callLogConfiguration.outgoingCallConfiguration\"></cometchat-call-logs>\n </div>\n <div class=\"cc-with-details__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"activeCall && (user || group)\">\n <!--call details Screen-->\n <cometchat-call-log-details [user]=\"user!\" [group]=\"group!\" [call]=\"call\"\n [backIconUrl]=\"computedCallLogDetailsConfig.backIconUrl\" [avatarStyle]=\"computedCallLogDetailsConfig.avatarStyle\"\n [onBackClick]=\"computedCallLogDetailsConfig.onBackClick || onBackClick\"\n [callLogHistoryConfiguration]=\"computedCallLogDetailsConfig.callLogHistoryConfiguration\"\n [callLogParticipantsConfiguration]=\"computedCallLogDetailsConfig.callLogParticipantsConfiguration\"\n [callLogRecordingsConfiguration]=\"computedCallLogDetailsConfig.callLogRecordingsConfiguration\"\n [callLogDetailStyle]=\"computedCallLogDetailsConfig.callLogDetailsStyle\">\n </cometchat-call-log-details>\n </div>\n\n <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group\" [ngStyle]=\"emptyMessageStyle()\">\n <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n </div>", styles: [".cc-with-details__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-details__sidebar{width:280px;height:100%;position:relative}.cc-with-details__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { isMobileView: [{
type: Input
}], messageText: [{
type: Input
}], withDetailsStyle: [{
type: Input
}], showMoreInfo: [{
type: Input
}], backdropStyle: [{
type: Input
}], call: [{
type: Input
}], callLogDetailsConfiguration: [{
type: Input
}], callLogConfiguration: [{
type: Input
}], onError: [{
type: Input
}] } });
class CometChatCallLogsWithDetails {
}
CometChatCallLogsWithDetails.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogsWithDetails, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CometChatCallLogsWithDetails.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogsWithDetails, declarations: [CometChatCallLogsWithDetailsComponent], imports: [CommonModule,
CometChatCallLogs,
CometChatCallLogDetails,
CometChatOutgoingCall,
CometChatMessages], exports: [CometChatCallLogsWithDetailsComponent] });
CometChatCallLogsWithDetails.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogsWithDetails, imports: [[
CommonModule,
CometChatCallLogs,
CometChatCallLogDetails,
CometChatOutgoingCall,
CometChatMessages,
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogsWithDetails, decorators: [{
type: NgModule,
args: [{
declarations: [CometChatCallLogsWithDetailsComponent],
imports: [
CommonModule,
CometChatCallLogs,
CometChatCallLogDetails,
CometChatOutgoingCall,
CometChatMessages,
],
exports: [CometChatCallLogsWithDetailsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
/*
* Public API Surface of angular-chat-ui-kit
*/
/**
* Generated bundle index. Do not edit.
*/
export { AIAssistBotDecorator, AIAssistBotExtension, AIConversationStarterDecorator, AIConversationStarterExtension, AIConversationSummaryDecorator, AIConversationSummaryExtension, AIExtensionDataSource, AISmartRepliesExtension, AISmartRepliesExtensionDecorator, CallingExtension, CallingExtensionDecorator, ChatConfigurator, CollaborativeDocumentExtension, CollaborativeDocumentExtensionDecorator, CollaborativeWhiteBoardExtension, CollaborativeWhiteBoardExtensionDecorator, CometChatAddMembers, CometChatAddMembersComponent, CometChatBannedMembers, CometChatBannedMembersComponent, CometChatCallButtons, CometChatCallButtonsComponent, CometChatCallLogDetails, CometChatCallLogDetailsComponent, CometChatCallLogHistory, CometChatCallLogHistoryComponent, CometChatCallLogParticipants, CometChatCallLogParticipantsComponent, CometChatCallLogRecordings, CometChatCallLogRecordingsComponent, CometChatCallLogs, CometChatCallLogsWithDetails, CometChatCallLogsWithDetailsComponent, CometChatContacts, CometChatContactsComponent, CometChatConversations, CometChatConversationsComponent, CometChatConversationsWithMessages, CometChatConversationsWithMessagesComponent, CometChatDetails, CometChatDetailsComponent, CometChatGroupMembers, CometChatGroupMembersComponent, CometChatGroups, CometChatGroupsComponent, CometChatGroupsWithMessages, CometChatGroupsWithMessagesComponent, CometChatIncomingCall, CometChatIncomingCallComponent, CometChatList, CometChatMessageBubble, CometChatMessageBubbleComponent, CometChatMessageComposer, CometChatMessageComposerComponent, CometChatMessageHeader, CometChatMessageHeaderComponent, CometChatMessageInformation, CometChatMessageInformationComponent, CometChatMessageList, CometChatMessageListComponent, CometChatMessages, CometChatMessagesComponent, CometChatOngoingCall, CometChatOngoingCallComponent, CometChatOutgoingCall, CometChatOutgoingCallComponent, CometChatTabs, CometChatTabsComponent, CometChatThemeService, CometChatThreadedMessages, CometChatThreadedMessagesComponent, CometChatTransferOwnership, CometChatTransferOwnershipComponent, CometChatUIKit, CometChatUserMemberWrapper, CometChatUserMemberWrapperComponent, CometChatUsers, CometChatUsersComponent, CometChatUsersWithMessages, CometChatUsersWithMessagesComponent, CometchatCallLogsComponent, CometchatListComponent, DataSource, DataSourceDecorator, ExtensionsDataSource, ImageModerationExtension, ImageModerationExtensionDecorator, LinkPreviewExtension, LinkPreviewExtensionDecorator, MessageTranslationExtension, MessageTranslationExtensionDecorator, MessageUtils, PollsExtension, PollsExtensionDecorator, SmartReplyExtension, SmartReplyExtensionDecorator, StickersExtension, StickersExtensionDecorator, TextModeratorExtension, TextModeratorExtensionDecorator, ThumbnailGenerationExtension, ThumbnailGenerationExtensionDecorator };
//# sourceMappingURL=cometchat-chat-uikit-angular.mjs.map