我想将Kendo-react与Microsoft Bot框架集成

时间:2019-08-22 10:16:28

标签: reactjs kendo-ui

我采用了kendo-react追踪版本,我在尝试使用在Azure上托管的机器人的秘密密钥时如何运行它。但这是行不通的。 如果我对如何集成bot有任何建议,将对您有所帮助。 我已经安装了所有必需的软件包。

下面是完整的代码。

import { Chat } from '@progress/kendo-react-conversational-ui';
import '@progress/kendo-theme-default/dist/all.css';
import React, { Component } from 'react'
import { DirectLine } from 'botframework-directlinejs';

 class App extends Component {
   constructor(props) {
     super(props)

     this.state = { messages: [] };
     this.client = new DirectLine({
      secret: "SECRET KEY"
      });
      this.client.activity$.subscribe(
            activity => this.onResponse(activity)
        );

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

        this.addNewMessage = this.addNewMessage.bind(this);
   }

   parseText = ( event ) => {
    if (event.action !== undefined) {
        return event.action.value;
    } else if ( event.value ) {
        return event.value;
    } else {
        return event.message.text;
    }
}

   onResponse = (activity) => {
    let newMsg;
    if (activity.from.id === this.bot.id) {
        newMsg = {
            text: activity.text,
            author: this.bot,
            typing: activity.type === "typing",
            timestamp: new Date(activity.timestamp),
            suggestedActions: this.parseActions(activity.suggestedActions),
            attachments: activity.attachments ? activity.attachments : []
        };

        this.setState((prevState) => {
            return { messages: [...prevState.messages, newMsg] };
        });
    }
}


   addNewMessage = (event) => {
    let value = this.parseText(event);
    this.client.postActivity({
        from: { id: this.user.id, name: this.user.name },
        type: 'message',
        text: value
    }).subscribe(
        id => console.log("Posted activity, assigned ID ", id),
        error => console.log("Error posting activity", error)
    );
    if (!event.value) {
        this.setState((prevState) => {
            return { messages: [...prevState.messages, { author: this.user, text: value, timestamp: new Date() }] };
        });
    }
};


  render() {
    return (
      <Chat
      messages={this.state.messages}
      user={this.user}
      onMessageSend = {this.addNewMessage}
      />
    )
  }
}

export default App

应该首先提示来自bot的响应,但是即使我发送Hi消息也无法正常工作。 这是输出的样子

Output

1 个答案:

答案 0 :(得分:0)

设置看起来不错,您能否确定是否调用了“ onResponse”事件?以及事件中是否有任何活动。如果问题出在连接或聊天组件以及如何设置响应,这可以为您提供信息。