All Components

Suggested Actions

The Chat messages may contain suggestions for quick actions such as preset replies.

The Chat displays suggested actions for the last message only.

Supported Action Types

The Chat provides built-in support for the following action types:

  • openUrl—Opens a new browser window with the specified URL.
  • reply—Sends the action value as a reply in the Chat.
  • call—Treats the value as a phone number. Similar to clicking a telephone link.
  • other—Handled by user code in the ExecuteActionEvent.

Defining Quick Actions

To define quick actions for a message:

  1. Populate the suggestedActions field of the message.
  2. Set the value and type for each Action.
import { Component } from '@angular/core';
import { Message, User, Action, ExecuteActionEvent, SendMessageEvent } from '@progress/kendo-angular-conversational-ui';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chat
      [messages]="messages"
      [user]="user"
      (executeAction)="onAction($event)"
      (sendMessage)="sendMessage($event)"
    >
    </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',
    suggestedActions: [{
      value: 'A sample reply',
      type: 'reply'
    }, {
      title: 'A sample link',
      value: '#link',
      type: 'openUrl'
    }, {
      title: 'Place a call',
      value: '555-123-456',
      type: 'call'
    }, {
      title: 'A custom action',
      value: 'Custom action clicked',
      type: 'alert'
    }]
  }];

  public onAction(e: ExecuteActionEvent): void {
    if (e.action.type === 'alert') {
      alert(e.action.value);
    }
  }

  public sendMessage(e: SendMessageEvent): void {
    this.messages = [...this.messages, 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