@progress/kendo-angular-conversational-ui

/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, NgZone, Renderer2, SimpleChanges, OnInit, ViewContainerRef } from '@angular/core'; import { AttachmentTemplateDirective } from './templates/attachment-template.directive'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { ExecuteActionEvent, FileAction, Message, SendMessageEvent, FileActionEvent, FileDownloadEvent, SendButtonSettings, FilesLayoutMode, MessageSettings } from './api'; import { MessageBoxType } from './common/models/message-box-options'; import { ChatMessageBoxTemplateDirective } from './templates/message-box.directive'; import { MessageBoxComponent } from './message-box.component'; import { MessageWidthMode } from './api/message-width-mode'; import { ChatService } from './common/chat.service'; import { ChatHeaderTemplateDirective } from './templates/header-template.directive'; import { SpeechToTextButtonSettings } from '@progress/kendo-angular-buttons'; import { MessageAction, MessageActionEvent } from './api/message-action'; import { ChatSuggestion } from './api/chat-suggestion.interface'; import { SelectEvent, FileSelectSettings } from '@progress/kendo-angular-upload'; import { ChatFile } from './api/chat-file-interface'; import { ConversationalUIModelFields } from './common/models/model-fields'; import { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive'; import { ChatStatusTemplateDirective } from './templates/status-template.directive'; import { ChatSuggestionTemplateDirective } from './templates/suggestion-template.directive'; import { ContextMenuComponent, ContextMenuPopupEvent } from '@progress/kendo-angular-menu'; import { NoDataTemplateDirective, MessageTemplateDirective, AuthorMessageContentTemplateDirective, ReceiverMessageContentTemplateDirective, ReceiverMessageTemplateDirective, AuthorMessageTemplateDirective, MessageContentTemplateDirective } from './chat.directives'; import { ChatUserStatusTemplateDirective } from './templates/user-status-template.directive'; import { QuickActionsLayoutMode, SuggestionsLayoutMode } from './api/suggestions-layout'; import { TimestampVisibilityMode } from './api/timestamp-visibility'; import * as i0 from "@angular/core"; /** * Represents the [Kendo UI Chat component for Angular](slug:overview_convui). * * 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}, {@link AttachmentTemplateDirective}, {@link ChatHeaderTemplateDirective}, {@link ChatMessageBoxTemplateDirective}, {@link MessageContentTemplateDirective}, {@link MessageTemplateDirective},{@link ChatStatusTemplateDirective}, {@link ChatSuggestionTemplateDirective}, {@link ChatTimestampTemplateDirective}, {@link ChatNoDataTemplateDirective}, {@link ChatUserStatusTemplateDirective}, {@link AuthorMessageContentTemplateDirective}, {@link ReceiverMessageContentTemplateDirective}, {@link ReceiverMessageTemplateDirective}, {@link AuthorMessageTemplateDirective}. */ 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](slug:databinding_chat) 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](slug:message_chat)). * @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 */ enableSpeechToText: boolean | SpeechToTextButtonSettings; /** * Sets the File Select settings. * * @default true */ enableFileSelect: boolean | FileSelectSettings; /** * 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 { fillMode: 'solid', rounded: 'full', size: 'medium', themeColor: 'primary', icon: 'paper-plane', svgIcon: paperPlaneIcon} */ sendButtonSettings: SendButtonSettings; /** * 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; /** * 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 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](slug:api_conversational-ui_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>; 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; userStatusTemplate: ChatUserStatusTemplateDirective; messageBox: MessageBoxComponent; /** * @hidden */ messageList: ViewContainerRef; /** * @hidden * Returns processed messages when model fields are used, otherwise returns original messages. */ get processedMessages(): Message[]; /** * Gets the actions available in the message context menu. * * @hidden */ get contextMenuActions(): any[]; /** * @hidden */ get localizationText(): LocalizationService; /** * @hidden */ autoScroll: boolean; /** * @hidden */ pinIcon: import("@progress/kendo-svg-icons").SVGIcon; /** * @hidden */ deleteIcon: import("@progress/kendo-svg-icons").SVGIcon; /** * @hidden */ pinnedMessage: Message; private direction; private subs; private _modelFields; private _messageContextMenuActions; private _fileActions; private _cachedProcessedMessages; private _lastMessagesReference; private _lastModelFields; private _cachedContextMenuActions; private _lastContextMenuActionsReference; 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(): void; /** * @hidden */ onContextMenuAction(action: MessageAction): void; /** * @hidden */ handleMenuClose(event: ContextMenuPopupEvent): void; /** * @hidden */ onActionButtonClick(event: MouseEvent): void; private findLastPinnedMessage; private updateChatServiceProperties; 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; }; "enableSpeechToText": { "alias": "enableSpeechToText"; "required": false; }; "enableFileSelect": { "alias": "enableFileSelect"; "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; }; "sendButtonSettings": { "alias": "sendButtonSettings"; "required": false; }; "modelFields": { "alias": "modelFields"; "required": false; }; }, { "sendMessage": "sendMessage"; "toolbarActionClick": "toolbarActionClick"; "contextMenuActionClick": "contextMenuActionClick"; "fileActionClick": "fileActionClick"; "download": "download"; "executeAction": "executeAction"; "suggestionExecute": "suggestionExecute"; "fileSelect": "fileSelect"; "fileRemove": "fileRemove"; "unpin": "unpin"; "inputValueChange": "inputValueChange"; }, ["attachmentTemplate", "chatHeaderTemplate", "chatNoDataTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "suggestionTemplate", "statusTemplate", "messageBoxTemplate", "userStatusTemplate"], never, true, never>; }