@progress/kendo-angular-conversational-ui

/**----------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2, SimpleChanges, ViewContainerRef } from '@angular/core'; import { SpeechToTextButtonSettings } from '@progress/kendo-angular-buttons'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { ContextMenuComponent, ContextMenuPopupEvent } from '@progress/kendo-angular-menu'; import { SelectEvent } from '@progress/kendo-angular-upload'; import { LicenseMessage } from '@progress/kendo-licensing'; import { SVGIcon } from '@progress/kendo-svg-icons'; import { FileSelectButtonSettings } from '../promptbox/common/models'; import { ExecuteActionEvent, FileAction, FileActionEvent, FileDownloadEvent, FilesLayoutMode, Message, MessageSettings, ResendMessageEvent, SendButtonSettings, SendMessageEvent } from './api'; import { ChatFile } from './api/chat-file-interface'; import { ChatLoadMoreEvent } from './api/chat-load-more-event'; import { ChatReferencedMessageClickEvent } from './api/chat-referenced-message-click-event'; import { ChatSuggestion } from './api/chat-suggestion.interface'; import { MessageAction, MessageActionEvent } from './api/message-action'; import { MessageBoxSettings, MessageBoxType } from './api/message-box'; import { MessageWidthMode } from './api/message-width-mode'; import { ScrollMode } from './api/scroll-mode'; import { QuickActionsLayoutMode, SuggestionsLayoutMode } from './api/suggestions-layout'; import { TimestampVisibilityMode } from './api/timestamp-visibility'; import { AuthorMessageContentTemplateDirective, AuthorMessageTemplateDirective, MessageContentTemplateDirective, MessageTemplateDirective, NoDataTemplateDirective, ReceiverMessageContentTemplateDirective, ReceiverMessageTemplateDirective } from './chat.directives'; import { ChatService } from './common/chat.service'; import { ConversationalUIModelFields } from './common/models/model-fields'; import { EndlessScrollState } from './common/endless-scroll-state'; import { MessageBoxComponent } from './message-box.component'; import { AttachmentTemplateDirective } from './templates/attachment-template.directive'; import { ChatHeaderTemplateDirective } from './templates/header-template.directive'; import { ChatMessageBoxEndAffixTemplateDirective } from './templates/message-box-end-affix-template.directive'; import { ChatMessageBoxStartAffixTemplateDirective } from './templates/message-box-start-affix-template.directive'; import { ChatMessageBoxTopAffixTemplateDirective } from './templates/message-box-top-affix-template.directive'; import { ChatMessageBoxTemplateDirective } from './templates/message-box.directive'; import { ChatStatusTemplateDirective } from './templates/status-template.directive'; import { ChatSuggestionTemplateDirective } from './templates/suggestion-template.directive'; import { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive'; import { ChatUserStatusTemplateDirective } from './templates/user-status-template.directive'; import * as i0 from "@angular/core"; /** * Represents the [Kendo UI Chat component for Angular](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/chat). * * Provides a conversational UI for chat-based applications. * Supports message templates, attachments, localization, and user actions. * * @example * ```html * <kendo-chat * [messages]="messages" * [authorId]="authorId" * (sendMessage)="onSendMessage($event)" * (executeAction)="onExecuteAction($event)"> * </kendo-chat> * ``` * * @remarks * Supported children components are: {@link CustomMessagesComponent}, {@link HeroCardComponent}. */ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy { private localization; private zone; private renderer; private element; private chatService; /** * Sets the Chat messages. * Accepts an array of `Message` objects, but can also accept custom data types. * For more information, check [Data Binding](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/chat/data-binding) section in the documentation. */ messages: any[]; /** * Sets the ID that represents the local user. */ authorId: string | number; /** * Determines the type of input used in the message box. * ([see example](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/chat/message)). * @default 'textarea' * * @hidden */ messageBoxType: MessageBoxType; /** * Sets the height of the Chat component. * Accepts a string with CSS units (for example, `'400px'`, `'50%'`) or a number (interpreted as pixels). * The minimum height is `600px`. */ height: string | number; /** * Sets the width of the Chat component. * Accepts a string with CSS units (for example, `'400px'`, `'50%'`) or a number (interpreted as pixels). * The minimum width is `320px`. */ width: string | number; /** * Sets the placeholder text for the message input box. */ placeholder: string; /** * Controls the width of the message between the predefined options. * * @default 'standard' */ messageWidthMode: MessageWidthMode; /** * Controls the visibility of timestamps in messages. * * @default 'focus' */ timestampVisibility: TimestampVisibilityMode; /** * Controls the visibility of usernames in messages. * When set to `true`, the username displays above each message bubble. * * @default true */ showUsername: boolean; /** * Controls the avatar visibility for the messages. * When set to `true`, the user avatar displays next to each message bubble. * * @default true */ showAvatar: boolean; /** * Enables the expand or collapse functionality for messages. * * @default false */ allowMessageCollapse: boolean; /** * Sets the Speech to Text button settings. * * @default true */ speechToTextButton: boolean | SpeechToTextButtonSettings; /** * Sets the File Select Button settings. * * @default true */ fileSelectButton: boolean | FileSelectButtonSettings; /** * Sets the message box settings. */ messageBoxSettings: MessageBoxSettings; /** * Sets the actions of the message toolbar. * These actions display in the message toolbar and let you perform specific operations on the message. * * @default [] */ messageToolbarActions: MessageAction[]; /** * Sets the value of the Message Box. * * @default '' */ inputValue: string; /** * Sets the settings for the author's messages. */ authorMessageSettings: MessageSettings; /** * Sets the settings for the receivers' messages. */ receiverMessageSettings: MessageSettings; /** * Sets the default actions that display in the message context menu. * * @default [{ id: 'copy', label: 'Copy', icon: 'copy', svgIcon: copyIcon, disabled: false }, { id: 'reply', label: 'Reply', icon: 'undo', svgIcon: undoIcon, disabled: false }] */ defaultContextMenuActions: MessageAction[]; /** * Sets the actions that display in the message as a context menu. * These actions display as menu items and let you perform specific operations on the message. * The default actions are `copy` and `reply` and are defined by their `id`. */ set messageContextMenuActions(actions: MessageAction[] | null); get messageContextMenuActions(): MessageAction[]; /** * Sets the default actions that display in the file actions DropDownButton. * * @default [{ id: 'download', label: 'Download', icon: 'download', svgIcon: downloadIcon, disabled: false }] */ defaultFileActions: FileAction[]; /** * Sets the actions that display in the file as items of a DropDownButton. * These actions display when you click the file DropDownButton and let you perform specific operations on the file. * The default action is `download` and is defined by its `id`. * * @default [{ id: 'download', label: 'Download', icon: 'download', svgIcon: downloadIcon, disabled: false }] */ set fileActions(actions: FileAction[] | null); get fileActions(): FileAction[]; /** * Sets the layout of the files in the message bubble. * * @default 'vertical' */ set messageFilesLayout(layout: FilesLayoutMode); /** * Sets the layout of the suggestions above the message input box. * * @default 'scroll' */ set suggestionsLayout(layoutMode: SuggestionsLayoutMode); /** * Sets the layout of the quick actions suggested below the messages. * * @default 'scroll' */ set quickActionsLayout(layoutMode: QuickActionsLayoutMode); /** * Sets the suggestions that display in the message input box. * Suggestions display as a list of clickable items that let you quickly insert predefined text into the message input. * * @default [] */ suggestions: ChatSuggestion[]; /** * Sets the send button settings for the Chat component. * Allows customization of the send button appearance, icons and disabled state. * * @default true */ sendButton: boolean | SendButtonSettings; /** * @hidden */ set sendButtonSettings(value: boolean | SendButtonSettings); get sendButtonSettings(): boolean | SendButtonSettings; /** * Controls the scrolling behavior of the message list. * * @default 'scrollable' */ scrollMode: ScrollMode; /** * Sets the number of messages loaded per page in endless scroll mode. * Ignored in `scrollable` mode. * * @default 50 */ pageSize: number; /** * Sets the minimum distance from the top of the visible message area that prevents auto-scrolling when a new receiver message arrives. * Accepts a percentage string (for example, `'30%'`) or a pixel value as a number. Set to `0` to always auto-scroll to new messages. * * Has no effect on author messages, which always scroll to the bottom. * * For more details, refer to the [Auto-Scroll Threshold](slug:scroll_modes_chat#auto-scroll-threshold) article. * * @default '20%' */ autoScrollThreshold: number | string; /** * Sets the total number of messages in the conversation when using endless scrolling with remote data source. For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation. */ total: number; /** * Sets the index of the first message in the currently loaded batch within the full conversation. * Used with remote data sources in endless scroll mode to compute the range for the next [`loadMore`](slug:api_conversational-ui_chatcomponent#loadMore) call. * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation. */ startIndex: number; /** * Sets the exclusive end index of the currently loaded batch within the full conversation. * Used with remote data sources in endless scroll mode to determine whether more messages exist beyond the current batch. * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation. */ endIndex: number; /** * Sets the full set of pinned messages in the conversation. * Used with remote data sources in endless scroll mode to render the pinned message indicator when the pinned message is outside the currently loaded batch. * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation. * * @default [] */ pinnedMessages: Message[]; /** * Sets the messages that serve as reply targets for messages in the currently loaded batch but exist outside it. * Used with remote data sources in endless scroll mode to render reply previews when the replied-to message is not in the current batch. * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation. * * @default [] */ repliedToMessages: Message[]; /** * Sets the names of the model fields from which the Chat reads its data. * Lets you map custom data types to the expected `Message` format. */ set modelFields(value: ConversationalUIModelFields); get modelFields(): ConversationalUIModelFields; /** * Controls whether a scroll to bottom button is rendered at the bottom of the Chat. Displayed only when the user has scrolled the component upward. * * @default true */ scrollToBottomButton: boolean; /** * Sets the loading state of the Chat component. * When set to `true`, a loading button is displayed instead of the send button. * * @default false */ loading: boolean; /** * Fires when the user sends a message by clicking the **Send** button or pressing **Enter**. * * The message is not automatically added to the `messages` array. */ sendMessage: EventEmitter<SendMessageEvent>; /** * Fires when the user clicks the resend button on a failed message. */ resendMessage: EventEmitter<ResendMessageEvent>; /** * Fires when the user clicks a quick action button in the message toolbar. */ toolbarActionClick: EventEmitter<MessageActionEvent>; /** * Fires when the user clicks an action in the message context menu. */ contextMenuActionClick: EventEmitter<MessageActionEvent>; /** * Fires when the user clicks an action in the file context menu. */ fileActionClick: EventEmitter<FileActionEvent>; /** * Fires when the user clicks an action in the file context menu. */ download: EventEmitter<FileDownloadEvent>; /** * Fires when the user clicks a quick action button. * The Chat internally handles [known actions](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/actiontype) such as `reply`, `openUrl`, and `call`. * * The event is preventable. Calling [`preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) suppresses the built-in action. */ executeAction: EventEmitter<ExecuteActionEvent>; /** * Fires when the user clicks a suggestion in the message input box. */ suggestionExecute: EventEmitter<ChatSuggestion>; /** * Fires when the user selects a file in the message input box. */ fileSelect: EventEmitter<SelectEvent>; /** * Fires when the user removes a file from the message input box. */ fileRemove: EventEmitter<ChatFile>; /** * Fires when the user unpins the pinned message. * This event triggers when the user clicks the delete button on the pinned message. */ unpin: EventEmitter<Message>; /** * Fires when the user types in the message input box. */ inputValueChange: EventEmitter<string>; /** * Fires when the user scrolls near the edge of the rendered message window in endless scroll mode. */ loadMore: EventEmitter<ChatLoadMoreEvent>; /** * Fires when the user clicks a referenced message (pinned indicator or reply preview). */ referencedMessageClick: EventEmitter<ChatReferencedMessageClickEvent>; get className(): string; get dirAttr(): string; set messagesContextMenu(contextMenu: ContextMenuComponent); attachmentTemplate: AttachmentTemplateDirective; chatHeaderTemplate: ChatHeaderTemplateDirective; chatNoDataTemplate: NoDataTemplateDirective; authorMessageContentTemplate: AuthorMessageContentTemplateDirective; receiverMessageContentTemplate: ReceiverMessageContentTemplateDirective; messageContentTemplate: MessageContentTemplateDirective; authorMessageTemplate: AuthorMessageTemplateDirective; receiverMessageTemplate: ReceiverMessageTemplateDirective; messageTemplate: MessageTemplateDirective; timestampTemplate: ChatTimestampTemplateDirective; suggestionTemplate: ChatSuggestionTemplateDirective; statusTemplate: ChatStatusTemplateDirective; messageBoxTemplate: ChatMessageBoxTemplateDirective; messageBoxStartAffixTemplate: ChatMessageBoxStartAffixTemplateDirective; messageBoxEndAffixTemplate: ChatMessageBoxEndAffixTemplateDirective; messageBoxTopAffixTemplate: ChatMessageBoxTopAffixTemplateDirective; userStatusTemplate: ChatUserStatusTemplateDirective; messageBox: MessageBoxComponent; /** * @hidden */ messageList: ViewContainerRef; /** * @hidden * Returns processed messages when model fields are used, otherwise returns original messages. */ get processedMessages(): Message[]; /** * @hidden * Returns `true` when the Chat is in remote endless scroll mode. * Remote mode is active whenever the consumer provides a `total`. */ get isRemoteMode(): boolean; /** * @hidden * Returns the messages to render — sliced in endless mode, full in scrollable mode. * In remote mode, returns processedMessages as-is (consumer already provides only the current batch). */ get renderedMessages(): Message[]; /** * @hidden */ isOwnMessage(message: Message): boolean; /** * Gets the actions available in the message context menu. * * @hidden */ get contextMenuActions(): any[]; /** * @hidden */ get localizationText(): LocalizationService; /** * @hidden */ autoScroll: boolean; /** * @hidden */ pinIcon: SVGIcon; /** * @hidden */ deleteIcon: SVGIcon; /** * @hidden */ pinnedMessage: Message; /** * @hidden */ scrollToBottomIcon: SVGIcon; /** * @hidden */ endlessState: EndlessScrollState; /** * @hidden */ showLicenseWatermark: boolean; /** * @hidden */ licenseMessage?: LicenseMessage; private anchor; private direction; private subs; private _modelFields; private _messageContextMenuActions; private _fileActions; private _cachedProcessedMessages; private _lastMessagesReference; private _lastModelFields; private _cachedContextMenuActions; private _lastContextMenuActionsReference; private _previousMessagesLength; private _previousLastMessageId; private _hasProcessedMessages; private _pendingScrollAction; private _scrollHandledBeforePaint; private _lastNewMessageId; private _cachedRenderedMessages; private _renderedMessagesSource; private _renderedMessagesStart; private _renderedMessagesEnd; private _pendingRemoteScrollToMessageId; private _remoteScrollToBottom; constructor(localization: LocalizationService, zone: NgZone, renderer: Renderer2, element: ElementRef, chatService: ChatService); /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnChanges(changes: SimpleChanges): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ dispatchAction(e: ExecuteActionEvent): void; /** * @hidden */ textFor(key: string): string; /** * @hidden */ scrollToPinnedMessage(event?: MouseEvent): void; /** * @hidden */ onNearTop(): void; /** * @hidden */ onNearBottom(): void; /** * @hidden */ onScrollToBottomClick(): void; /** * @hidden */ handleReferencedMessageClick(messageId: string | number, type: 'pinned' | 'reply'): void; /** * @hidden */ onContextMenuAction(action: MessageAction): void; /** * @hidden */ handleMenuClose(event: ContextMenuPopupEvent): void; /** * @hidden */ onActionButtonClick(event: MouseEvent): void; /** * @hidden */ onMessageListResize(): void; /** * Schedules the new-message scroll adjustment on zone.onStable so it runs * after Angular renders the new DOM but before the browser paints, * preventing a visible intermediate frame. */ private scheduleNewMessageScroll; private detectNewMessageScrollAction; private getLastNewMessageElement; private findLastPinnedMessage; private initEndlessScroll; private handleMessagesChange; private handleRemoteMessagesChange; private handleRemoteReferencedMessageClick; private handlePendingRemoteScroll; private updateChatServiceProperties; private validateRemoteInputs; private mergeWithDefaultActions; static ɵfac: i0.ɵɵFactoryDeclaration<ChatComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<ChatComponent, "kendo-chat", never, { "messages": { "alias": "messages"; "required": false; }; "authorId": { "alias": "authorId"; "required": false; }; "messageBoxType": { "alias": "messageBoxType"; "required": false; }; "height": { "alias": "height"; "required": false; }; "width": { "alias": "width"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "messageWidthMode": { "alias": "messageWidthMode"; "required": false; }; "timestampVisibility": { "alias": "timestampVisibility"; "required": false; }; "showUsername": { "alias": "showUsername"; "required": false; }; "showAvatar": { "alias": "showAvatar"; "required": false; }; "allowMessageCollapse": { "alias": "allowMessageCollapse"; "required": false; }; "speechToTextButton": { "alias": "speechToTextButton"; "required": false; }; "fileSelectButton": { "alias": "fileSelectButton"; "required": false; }; "messageBoxSettings": { "alias": "messageBoxSettings"; "required": false; }; "messageToolbarActions": { "alias": "messageToolbarActions"; "required": false; }; "inputValue": { "alias": "inputValue"; "required": false; }; "authorMessageSettings": { "alias": "authorMessageSettings"; "required": false; }; "receiverMessageSettings": { "alias": "receiverMessageSettings"; "required": false; }; "messageContextMenuActions": { "alias": "messageContextMenuActions"; "required": false; }; "fileActions": { "alias": "fileActions"; "required": false; }; "messageFilesLayout": { "alias": "messageFilesLayout"; "required": false; }; "suggestionsLayout": { "alias": "suggestionsLayout"; "required": false; }; "quickActionsLayout": { "alias": "quickActionsLayout"; "required": false; }; "suggestions": { "alias": "suggestions"; "required": false; }; "sendButton": { "alias": "sendButton"; "required": false; }; "sendButtonSettings": { "alias": "sendButtonSettings"; "required": false; }; "scrollMode": { "alias": "scrollMode"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "autoScrollThreshold": { "alias": "autoScrollThreshold"; "required": false; }; "total": { "alias": "total"; "required": false; }; "startIndex": { "alias": "startIndex"; "required": false; }; "endIndex": { "alias": "endIndex"; "required": false; }; "pinnedMessages": { "alias": "pinnedMessages"; "required": false; }; "repliedToMessages": { "alias": "repliedToMessages"; "required": false; }; "modelFields": { "alias": "modelFields"; "required": false; }; "scrollToBottomButton": { "alias": "scrollToBottomButton"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "sendMessage": "sendMessage"; "resendMessage": "resendMessage"; "toolbarActionClick": "toolbarActionClick"; "contextMenuActionClick": "contextMenuActionClick"; "fileActionClick": "fileActionClick"; "download": "download"; "executeAction": "executeAction"; "suggestionExecute": "suggestionExecute"; "fileSelect": "fileSelect"; "fileRemove": "fileRemove"; "unpin": "unpin"; "inputValueChange": "inputValueChange"; "loadMore": "loadMore"; "referencedMessageClick": "referencedMessageClick"; }, ["attachmentTemplate", "chatHeaderTemplate", "chatNoDataTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "suggestionTemplate", "statusTemplate", "messageBoxTemplate", "messageBoxStartAffixTemplate", "messageBoxEndAffixTemplate", "messageBoxTopAffixTemplate", "userStatusTemplate"], never, true, never>; }