Вызов фреймворка чат-бота по нажатию кнопки

Я новичок в реакции на 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>
        );
    }
}

и мне нужно настроить стиль фреймворка чат-бота. Как я могу это реализовать. Приведенный выше код может быть неправильным. Пожалуйста, помогите мне разобраться.