单击按钮调用聊天机器人框架

Question

我是 React js 的新手，我想使用直线令牌调用聊天机器人。我有下面给出的代码。我的需要是在单击按钮时调用聊天机器人并且必须最小化。我不知道该怎么做，这似乎是一个简单的问题。帮我解决一下。提前致谢。

import React from "react";
import { DirectLine } from 'botframework-directlinejs'; 
import ReactWebChat from 'botframework-webchat';
import "./Login.css";

export default class extends React.Component {
    constructor(props) { 
        super(props);
            this.directLine=new DirectLine({ token: '' });
      }
      Chat = ()=> {
        <ReactWebChat directLine={ this.directLine } />
      }
    render(){
        return (
            <div className="image">
                <img src={require('../src/Images/banner.jpg')} ></img>
            <form>
            <div className="ChatBot" > <button onClick={this.Chat} >Click</button>
            </div>
            </form>
            </div>
        );
    }
}

并且我需要自定义聊天机器人框架的样式。我该如何实施。上面的代码可能不对。请帮我弄清楚。

Answer 1

您可以关注微软提供的this sample。对于您所要求的功能（最小化聊天 window），这是一个很好的起点。基本上，您创建了这两个 React 组件：

MinimizableWebChat.js & WebChat.js

我不会查看代码，因为示例的 README 中有实现的详细描述。但是在 MinimizableWebChat.js 中，您处理存储的创建、令牌的获取以及最小化处理。在 WebChat.js 中，您可以使用 createStyleSet 方法来自定义 WebChat。您可以看到可以通过该方法设置的所有属性 here。希望能帮到你。

单击按钮调用聊天机器人框架

Call chatbot framework on button click

chatbot

reactjs

web-chat