@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 { MessageTemplateDirective } from './templates/message-template.directive'; import { ExecuteActionEvent, FileAction, Message, SendMessageEvent, FileActionEvent, FileDownloadEvent, SendButtonSettings, MessageToolbarVisibility } 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 * 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 MessageTemplateDirective}, {@link ChatStatusTemplateDirective}, {@link ChatSuggestionTemplateDirective}, {@link ChatTimestampTemplateDirective}. */ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy { private localization; private zone; private renderer; private element; private chatService; /** * Defines the array of messages displayed in the Chat. * Each message can include a timestamp for unique identification. * For more information, see [ngFor - Change Tracking](link:site.data.urls.angular['ngforof']#change-propagation). */ messages: Message[]; /** * Specifies the id representing 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; /** * Switches the width of the message between the predefined options. * * @default 'standard' */ messageWidthMode: MessageWidthMode; /** * 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; /** * Specifies the actions available in 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; /** * Specifies the default actions available 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[]; /** * Specifies the actions available 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[]; /** * Specifies the default actions available in the file actions DropDownButton. */ defaultFileActions: FileAction[]; /** * Specifies the actions available 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 suggestions to 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 visibility of the message toolbar. * * @default 'hidden' */ messageToolbarVisibility: MessageToolbarVisibility; /** * 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 structures to the expected `Message` format. */ set modelFields(value: ConversationalUIModelFields); get modelFields(): ConversationalUIModelFields; /** * Emits 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>; /** * Emits when the user clicks a quick action button in the message toolbar. */ toolbarActionClick: EventEmitter<MessageActionEvent>; /** * Emits when the user clicks an action in the message context menu. */ contextMenuActionClick: EventEmitter<MessageActionEvent>; /** * Emits when the user clicks an action in the file context menu. */ fileActionClick: EventEmitter<FileActionEvent>; /** * Emits when the user clicks an action in the file context menu. */ download: EventEmitter<FileDownloadEvent>; /** * Emits 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>; /** * Emits when the user clicks a suggestion in the message input box. */ suggestionExecute: EventEmitter<ChatSuggestion>; /** * Emits when the user selects a file in the message input box. */ fileSelect: EventEmitter<SelectEvent>; /** * Emits when the user removes a file from the message input box. */ fileRemove: EventEmitter<ChatFile>; /** * Emits when the user unpins the pinned message. * This event triggers when the user clicks the delete button on the pinned message. */ unpin: EventEmitter<Message>; /** * Emits when the user types in the message input box. */ inputValueChange: EventEmitter<string>; get className(): string; get dirAttr(): string; attachmentTemplate: AttachmentTemplateDirective; chatHeaderTemplate: ChatHeaderTemplateDirective; messageTemplate: MessageTemplateDirective; timestampTemplate: ChatTimestampTemplateDirective; suggestionTemplate: ChatSuggestionTemplateDirective; statusTemplate: ChatStatusTemplateDirective; messageBoxTemplate: ChatMessageBoxTemplateDirective; messageBox: MessageBoxComponent; /** * @hidden */ messageList: ViewContainerRef; /** * @hidden * Returns processed messages when model fields are used, otherwise returns original messages */ get processedMessages(): Message[]; /** * @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; 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; 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; }; "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; }; "messageContextMenuActions": { "alias": "messageContextMenuActions"; "required": false; }; "fileActions": { "alias": "fileActions"; "required": false; }; "suggestions": { "alias": "suggestions"; "required": false; }; "messageToolbarVisibility": { "alias": "messageToolbarVisibility"; "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", "messageTemplate", "timestampTemplate", "suggestionTemplate", "statusTemplate", "messageBoxTemplate"], never, true, never>; }