All Components

Data Binding

The Chat enables you to bind the message list to streaming data.

Data Model

The Chat component defines interfaces for the following entities:

  • User—A unique participant in the conversation.
  • Message—The metadata and content of each message.
  • Attachment—The multimedia or additional information which is associated with a chat message.
  • Action—A suggested quick action in reply to a message. For example, a text reply, external link, or phone call.

As a minimum data-binding configuration for the Chat, provide a list of messages and a user instance which identify the local participant.

User Identity

The user entity identifies the local user. The messages that are authored by the user appear on the right-hand side of the message list.

import { User } from '@progress/kendo-angular-conversational-ui';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chat [user]="user"></kendo-chat>
  `
})
export class AppComponent {
  public user: User = {
    id: 1,                      // Required field
    name: 'Jane',               // Optional
    avatarUrl: '/profile.png'   // Optional
  };
}

Binding to Message Data

Typically, Chat messages stream from a remote service. To bind the Chat to the stream, utilize the built-in async pipe.

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { interval } from 'rxjs/observable/interval';
import { scan } from 'rxjs/operators/scan';
import { map } from 'rxjs/operators/map';

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-chat [messages]="feed | async" [user]="user"></kendo-chat>
  `
})
export class AppComponent {
  public readonly user: User = {
    id: 1
  };

  public readonly bot: User = {
    id: 0
  };

  public feed: Observable<Message[]>;

  constructor() {
    this.feed = interval(1000).pipe(
        // Make a message
        map((x: number): Message =>  {
          return {
            author: this.bot,
            text: `Message # ${x + 1}`
          };
        }),

        // Merge messages into an array
        scan((acc, x) => [...acc, x], [])
    );
  }
}
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);

Posting Messages

When you set up the messages stream, add the locally posted messages:

  1. Publish the local messages on an observable stream.
  2. Merge the messages with the service responses.

The following example demonstrates how to accept the local messages in the sendMessage event and merge them with the incoming messages.

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { interval } from 'rxjs/observable/interval';
import { scan } from 'rxjs/operators/scan';
import { map } from 'rxjs/operators/map';
import { merge } from 'rxjs/observable/merge';

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

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

  public readonly bot: User = {
    id: 0
  };

  public feed: Observable<Message[]>;
  private local: Subject<Message> = new Subject<Message>();

  constructor() {
    const mockStream = interval(1000).pipe(
        // Make a message
        map((x: number): Message =>  {
          return {
            author: this.bot,
            text: `Message # ${x + 1}`
          };
        })
    );

    this.feed = merge(
      mockStream,
      this.local
    ).pipe(
      scan((acc, x) => [...acc, x], [])
    );
  }

  public sendMessage(e: SendMessageEvent): void {
    console.log(e);
    this.local.next(e.message);
  }
}
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);
In this article