如何在Angular5应用程序中使用Microsoft Bot Framework web聊天

如果安装的BotFramework WebChat版本大于 0.10.7 ,您可以在ng应用程序中直接使用BotFramework WebChat。

• 安装webchat sdk: npm install botframework-webchat

• 填充样式文件 .angular-cli.json 文件:

  "styles": [
    "../node_modules/botframework-webchat/botchat.css",
    "../node_modules/botframework-webchat/botchat-fullwindow.css"
  ],
  

• 尝试组件中的示例,如中所述 https://github.com/Microsoft/BotFramework-WebChat/issues/478 :

  import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
  import {App} from "botframework-webchat";
  @Component({
    selector: 'app-root',
    template: `<div id="bot-chat-container" #botWindow></div>`,
  })
  export class AppComponent implements OnInit {
  
    @ViewChild("botWindow") botWindowElement: ElementRef;
  
    ngOnInit(): void {
      App({
        directLine: {secret: 'secret goes here'},
        user: {id: 'user'},
        bot: {id: 'bot'},
      }, this.botWindowElement.nativeElement)
    }
  }