ChatComponent

Represents the Kendo UI Chat component for Angular.

import { Component } from '@angular/core';
import { Message, User, SendMessageEvent } from '@progress/kendo-angular-conversational-ui';

const bot: User = {
  id: 0
};

const user: User = {
  id: 1
};

const hello: Message = {
  text: 'Hello!',
  author: bot
};

@Component({
    selector: 'my-app',
    template: `
      <kendo-chat
        [messages]="feed"
        [user]="user"
        (sendMessage)="sendMessage($event)"
      >
      </kendo-chat>
    `
})
export class AppComponent {
  public feed: Message[] = [ hello ];
  public readonly user: User = user;
  public readonly bot: User = bot;

  public sendMessage(e: SendMessageEvent): void {
    const echo: Message = {
      author: bot,
      text: `You said: "${ e.message.text }"`
    };

    this.feed = [...this.feed, e.message, echo];
  }
 }
import { NgModule } from '@angular/core';
import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChatModule } from '@progress/kendo-angular-conversational-ui';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, ChatModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Selector

kendo-chat

Inputs

messages Message[]

Sets the messages of the Chat.
The message timestamp, if provided, tracks unique messages.
For more information, refer to ngFor - Change Tracking.

user User

Sets the User instance for the local user.
The User ID identifies messages that are authored by the local user.

Events

executeAction EventEmitter<ExecuteActionEvent>

Fires when the user clicks a quick action button.
The Chat internally handles the reply, openUrl, and call known actions.

Emits the ExecuteActionEvent.
The event is preventable. If preventDefault is called, the built-in action will be suppressed.

sendMessage EventEmitter<SendMessageEvent>

Fires when the user types a message and clicks the Send button or presses Enter.
Emits the SendMessageEvent.

The message is not automatically appended to the messages array.