UNPKG

@cometchat/chat-uikit-angular

Version:

Ready-to-use Chat UI Components for Angular (JavaScript/Web)

449 lines 104 kB
import { DetailsConfiguration, MessageComposerConfiguration, MessageHeaderConfiguration, MessageHeaderStyle, MessageListConfiguration, MessagesStyle, ThreadedMessagesConfiguration, } from "@cometchat/uikit-shared"; import { ChangeDetectionStrategy, Component, EventEmitter, Input, ViewChild, } from "@angular/core"; import { CometChatGroupEvents, CometChatMessageEvents, CometChatUIEvents, CometChatUIKitConstants, CometChatUserEvents, fontHelper, } from "@cometchat/uikit-resources"; import { ChatConfigurator } from "../../Shared/Framework/ChatConfigurator"; import { CometChat } from "@cometchat/chat-sdk-javascript"; import { CometChatException } from "../../Shared/Utils/ComeChatException"; import * as i0 from "@angular/core"; import * as i1 from "../../CometChatTheme.service"; import * as i2 from "../../Shared/Views/AIAssistBotMessageList/aiassist-bot-message-list/aiassist-bot-message-list.component"; import * as i3 from "../../CometChatMessageHeader/cometchat-message-header/cometchat-message-header.component"; import * as i4 from "../../CometChatMessageList/cometchat-message-list/cometchat-message-list.component"; import * as i5 from "../../CometChatMessageComposer/cometchat-message-composer/cometchat-message-composer.component"; import * as i6 from "../../CometChatThreadedMessages/cometchat-threaded-messages/cometchat-threaded-messages.component"; import * as i7 from "../../CometChatDetails/cometchat-details/cometchat-details.component"; import * as i8 from "../../Calls/CometChatCallButtons/cometchat-call-buttons/cometchat-call-buttons.component"; import * as i9 from "@angular/common"; /** * * CometChatMessages is a wrapper component for messageList, messageHeader, messageComposer and liveReaction component. * * @version 1.0.0 * @author CometChatTeam * @copyright © 2022 CometChat Inc. * */ export 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: i1.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 [newMessageIndicatorStyle]=\"messageListConfiguration.newMessageIndicatorStyle\"\n [newMessageIndicatorIconUrl]=\"messageListConfiguration.newMessageIndicatorIconUrl\"\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%;position:relative}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: i2.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: i3.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: i4.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", "newMessageIndicatorIconUrl", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "newMessageIndicatorStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: i5.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: i6.CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "userMemberWrapperConfiguration", "messageComposerConfiguration", "threadedMessagesStyle", "hideMessageComposer", "messageComposerView", "messageListView", "disableSoundForMessages"] }, { type: i7.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: i8.CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i9.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 [newMessageIndicatorStyle]=\"messageListConfiguration.newMessageIndicatorStyle\"\n [newMessageIndicatorIconUrl]=\"messageListConfiguration.newMessageIndicatorIconUrl\"\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%;position:relative}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: i1.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 }] } }); //# sourceMappingURL