Using with Microsoft Bot Framework

The Chat provides integration options for connecting the component to chat bots which are built with Microsoft Bot Framework.

Travel Agent Chat Bot

The following example demonstrates how to connect the Chat to chat bots which run on Azure Bot Service and use the Direct Line protocol to create a Travel Agent Chat Bot.

ts

import { Component, ViewEncapsulation } from '@angular/core';
import { Subject, Observable, merge } from 'rxjs';
import { scan } from 'rxjs/operators';
import { Message, User, Action, SendMessageEvent } from '@progress/kendo-angular-conversational-ui';
import { Agent } from './agent';

// API secret
const secret = 'YOUR API SECRET';

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'my-app',
  styles: [`
    .k-card-image {
      max-width: 250px;
    }
  `],
  template: `
      <kendo-chat
        [messages]="feed | async"
        [user]="user"
        (sendMessage)="sendMessage($event)"
      >
        <ng-template kendoChatAttachmentTemplate let-att>
          <ng-container [ngSwitch]="att.contentType">
            <kendo-chat-hero-card *ngSwitchCase="'application/vnd.microsoft.card.hero'"
              imageUrl="{{ att.content.images ? att.content.images[0]?.url : '' }}"
              [title]="att.content.title || att.content.text"
              [subtitle]="att.content.subtitle"
              [actions]="att.content.buttons"
              (executeAction)="heroAction($event)"
            >
            </kendo-chat-hero-card>

            <adaptive-card [data]="att.content" *ngSwitchCase="'application/vnd.microsoft.card.adaptive'">
            </adaptive-card>

            <div class="k-card" *ngSwitchDefault>
              {{ att.content | json }}
            </div>
          </ng-container>
        </ng-template>
      </kendo-chat>
    `
})
export class AppComponent {
  public feed: Observable<Message[]>;

  public readonly user: User = {
    id: 'User'
  };

  public readonly bot: User = {
    id: 'Botyo-BotTesting',
    name: 'Travel Agent',
    avatarUrl: 'https://demos.telerik.com/kendo-ui/content/chat/VacationBot.png'
  };

  private agent: Agent = new Agent(this.bot, secret);
  private local: Subject<Message> = new Subject<Message>();

  constructor() {
    // Merge local and remote messages into a single stream
    this.feed = merge(
      this.local,
      this.agent.responses
    ).pipe(
      // ... and emit an array of all messages
      scan((acc: Message[], x: Message) => [...acc, x], [])
    );
  }

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

  public heroAction(button: Action): void {
    if (button.type === 'imBack') {
      const message = {
        author: this.user,
        text: button.value
      };

      this.send(message);
    }
  }

  private send(message: Message) {
    this.local.next(message);
    this.local.next({
      author: this.bot,
      typing: true
    });

    this.agent.submit(message);
  }
}

ts

import { NgModule } from '@angular/core';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChatModule } from '@progress/kendo-angular-conversational-ui';
import { AppComponent } from './app.component';
import { AdaptiveCardComponent } from './adaptive-card.component';

@NgModule({
  imports: [
    CommonModule,
    ChatModule
  ],
  declarations: [
    AppComponent,
    AdaptiveCardComponent
  ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

ts

import { Subject } from 'rxjs';
import { Activity, CardAction, DirectLine } from 'botframework-directlinejs';
import { Action, Attachment, Message, User } from '@progress/kendo-angular-conversational-ui';
import { IResponse } from './shared/models';

export class Agent {
  public readonly responses: Subject<Message> = new Subject<Message>();
  private client: DirectLine;

  constructor(private user: User, secret: string) {
    this.client = new DirectLine({ secret });

    this.client.activity$.subscribe((data: Activity) => this.onResponse(data));
  }

  public submit(msg: Message): void {
    const req = this.client.postActivity({
      type: 'message',
      from: { id: msg.author.id },
      text: msg.text
    });

    req.subscribe(data => this.onResponse(data));
  }

  private onResponse(response: IResponse): void {
    if (!response.from || response.from.id !== this.user.id) {
      return;
    }

    const timestamp = new Date(response.timestamp);
    const message: Message = {
      attachments: response.attachments as Attachment[],
      author: this.user,
      suggestedActions: this.mapActions(response.suggestedActions),
      text: response.text,
      timestamp,
      typing: response.type === 'typing'
    };

    this.responses.next(message);
  }

  private mapActions(data: {
    actions: CardAction[];
    to?: string[];
  }): Action[] {
    if (!data || !data.actions) {
      return [];
    }

    return data.actions.map(action => ({
      type: action.type === 'imBack' ? 'reply' : action.type,
      title: action.title,
      value: action.value
    }));
  }
}

ts

import { Component, Input, ElementRef, HostBinding, ViewChild } from '@angular/core';
import { AdaptiveCard, HostConfig } from 'adaptivecards';

@Component({
  selector: 'adaptive-card',
  template: `
    <div #body class='k-card-body'>
    </div>
  `
})
export class AdaptiveCardComponent {
  @Input()
  public set data(data: unknown) {
    this.cardData = data;
    this.card.parse(data);

    if (this.body) {
      const content = this.card.render();
      this.body.nativeElement.append(content);
    }
  }

  public get data(): unknown {
    return this.cardData;
  }

  @HostBinding('class.k-card')
  public cssClass = true;

  @ViewChild('body')
  public body: ElementRef;

  private cardData: unknown;
  private card: AdaptiveCard = new AdaptiveCard();

  constructor() {
    this.card.hostConfig = new HostConfig({
      fontFamily: 'Segoe UI, Helvetica Neue, sans-serif'
    });
  }
}

Suggested Links

• Microsoft Bot Framework
• Azure Bot Service
• API Reference of the Chat Component