0

I am new to react js and i want to call chatbot using directline token. I have the code given below. My need is to call the chatbot when the button is clicked and must get minimzed. I don't know how to do that and this appears to be a simple question. Help me in resolving it. Thanks in advance.

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>
        );
    }
}

and i need to customize the style of chat bot framework. How can i implement it. The above code maybe not right. Kindly help me in figuring it out.

Basil
  • 41
  • 7

1 Answers1

3

You can follow this sample provided by Microsoft. It is a good starting point for the features you're asking for (minimizing the chat window). Basically, you create a these two React components:

MinimizableWebChat.js & WebChat.js

I won't be going through the code since the README of the sample has a detailed description of the implementation. But in MinimizableWebChat.js you handle the creation of the store, handling the fetching of the token, and the handling of the minimization. In WebChat.js you can use the createStyleSet method to customize the WebChat as you wish. You can see all the properties you can set from that method here. I hope I was able to help you.

Armend Ukehaxhaj
  • 533
  • 6
  • 17
  • While passing my bot framework link ,I am getting a CORS policy error. "blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.". How can i solve it. – Basil Feb 04 '20 at 09:49
  • If you are running this purely local, check my solution [here](https://stackoverflow.com/questions/60085336/how-should-a-botframework-webchat-conversation-be-maintained-for-over-an-hour) on how to include CORS in your token server. If running local, but tunneling to ABS via ngrok, then enable "Enhanced authentication options" on your Direct Line channel and include your URI (`http://localhost:3000`, for example). Depending on your need, you may need to include the URI in the CORS policy of your app service, as well. – Steven Kanberg Feb 07 '20 at 20:21
  • Also, a side note about the "minimizable web chat" sample. The code has undergone recent updates that are not reflected in the docs. Keep that in mind, if you run into an errors and want to compare the code and docs. I spun the new code up just the other day and it works great. – Steven Kanberg Feb 07 '20 at 20:27
  • currently my edited code contains an issue i was trying to solve that this past few days. whenever i minimize my chat and maximizes it the chat starts from the starting with the old messages still present there. Can you help me in solving that – Basil Feb 18 '20 at 08:18
  • That's because in the ```MinimizableWebChat``` component the ```WebChat``` component is loaded only once, and then only the ```display``` property is changed (set to ```none``` if the WebChat is minimized). Here is a possible solution: In the ```handleMinimizeButtonClick``` method you can call ```setToken(null);```, and then the WebChat component would request another token, meaning a new conversation. – Armend Ukehaxhaj Feb 18 '20 at 11:58
  • i used session storage mechanism and now i can preserve my chat. Thanks all for the opinions. – Basil Feb 19 '20 at 05:24