angular - 如何在 Angular5 应用程序中使用 Microsoft Bot Framework 网络聊天

Question

我需要一种在我的 Angular 5 应用程序中嵌入网络聊天的方法。我已经尝试过此处描述的非 react 网站方式:https://github.com/Microsoft/BotFramework-WebChat并且有效。

有没有办法只使用组件而不是加载整个 js 文件来在我的 Angualar 5 应用程序中获取聊天窗口？

Answer 1

如果您安装的 BotFramework-WebChat 版本高于 0.10.7，您可以直接在 ng 应用程序中使用 BotFramework-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)
    }
  }