All Components

Message Templates

You can customize the Chat messages by using templates.

Attachments are not part of the message template. For more information, refer to the section on customizing message attachments.

Defining Message Templates

To customize the appearance of Chat messages, define a MessageTemplate.

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-chat [messages]="messages" [user]="user">
      <ng-template kendoChatMessageTemplate let-message>
          The message text is "{{ message.text }}"
      </ng-template>
    </kendo-chat>
  `
})
export class AppComponent {
  public readonly user: User = {
    id: 1
  };

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

  public messages: Message[] = [{
    author: this.bot,
    text: 'A sample 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);

Displaying Markdown Content

The following example demonstrates how to render Markdown by utilizing the marked library.

import { Component } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { merge } from 'rxjs/observable/merge';
import { from } from 'rxjs/observable/from';
import { scan } from 'rxjs/operators/scan';
import * as marked from 'marked';

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)"
      >
        <ng-template kendoChatMessageTemplate let-message>
          <div [innerHTML]="renderMarkdown(message.text)">
          </div>
        </ng-template>
      </kendo-chat>
    `
})
export class AppComponent {
  public feed: Observable<Message[]>;

  public readonly user: User = {
    id: 1,
    name: 'User'
  };

  public readonly bot: User = {
    id: 0,
    name: 'Bot'
  };

  private local: Subject<Message> = new Subject<Message>();

  constructor() {
    const hello: Message = {
      author: this.bot,
      text: 'Type in some _Markdown_ to see it **rendered** here'
    };

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

  public sendMessage(e: SendMessageEvent): void {
    this.local.next(e.message);
  }

  public renderMarkdown(md: string): string {
    const parser = marked.setOptions({});
    return parser.parse(md);
  }
}
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