2

I'm trying to add autosuggestion/autocomplete function in my bot-framework web chat(v-4) using react js. In which i want to fetch input data from azure table. Heard that its not recommended to use j-query inside React js. Looking for a solution to add this.

I'm looking for a solution like in the below image, PFA. And the code which i used for React is attached below,

React.js file

import React from 'react';
import { DirectLine, ConnectionStatus } from 'botframework-directlinejs';
import ReactWebChat from 'botframework-webchat';
import './ChatComponent.css';


export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            token: '',
            conversationId:'',
            directLine: {},
            view: false,
            feedBack: null,
            value: '',
            popupContent: '',
            storeValue:''
        };
        this.handleTokenGeneration = this.handleTokenGeneration.bind(this);
        this.handleChange = this.handleChange.bind(this);

    }

    handleTokenGeneration = async () => {
        console.log("handleTokenGeneration");
        const response = await fetch(`api/TokenGenerationService/GetToken`);
        const data = await response.json();
        this.setState({ token: data.categoryObject.token, conversationId: data.categoryObject.conversationId });
        console.log("conversationId");
    };

    async componentDidMount() {
        try {
            await this.handleTokenGeneration();          

        } catch (error) {
            console.log("error in fetchung token");
            console.log(error);
        }

        this.state.directLine = new DirectLine({ token: this.state.token });
        this.setState({ view: true });

    }


    handleChange = (event) => {
        this.setState({ value: event.target.value });
    }

    render() {

        if (!this.state.view) {
            return <div />
        } else {        
            return (             

                <div className="react-container webchat" >
                    <ReactWebChat directLine={this.state.directLine} webSocket={true}  userID='2656' username='res' store={this.state.storeValue} />

                    <footer className="chat-footer" >                     

                        <div className="foot-footer">
                            Was I helpful ?
                            <span className="feedback"  >Yes</span><span>|</span><span className="feedback" >No</span>
                        </div>
                    </footer>
                </div>
            );
        }
    }

}

I'm looking for something like this. Please find the attached file below

Thomas Martin
  • 666
  • 2
  • 6
  • 26
  • You might be interested in reading [this thread](https://github.com/microsoft/BotFramework-WebChat/issues/476). It started before Web Chat v4 was released but it's still relevant. It sounds like you have too much data for normal suggested actions and you also don't want to rely on a mobile OS's builtin autocomplete. Are you looking for a solution that specifically pertains to drawing the suggestions from your Azure table or would you like something more generalized that could also work by drawing questions from QnA Maker for example, like the thread describes? – Kyle Delaney Feb 14 '20 at 18:09
  • @KyleDelaney Hi thanks for the reply. I had already read that article about autosuggestion but it didn't help. I'm building a chat application using bot framework v.4 using react js and all i want now is to fetch data from azure when a key-press is done in the chat input area. I did that using J-query in the previous version of my project but as i'm using react js now i want to write that in react. – Thomas Martin Feb 17 '20 at 06:02
  • Is my answer acceptable? – Kyle Delaney Feb 18 '20 at 21:46
  • @KyleDelaney It couldn't help my problem but it helps in another way and I'm working on it. Will surely let you know once i'm done. – Thomas Martin Feb 19 '20 at 04:59
  • Can you explain why my answer doesn't help your problem? If you have another question besides the one you asked here, would you consider accepting my answer and asking a new question with the specific details about what you need? – Kyle Delaney Feb 19 '20 at 18:15
  • @KyleDelaney Hi kyle, for your understanding please find the code i used for React, that is attached above with the question. What i'm trying is to implement autosuggestion whenever i type something to the input area of my web-chat. It should fetch data from my azure table. I'm using react js as my front end and .net core as back end to generate token for calling bot-framework web-chat to the front end. The bot is working fine but i want to do some customization's and for that i'm trying to do this. Is there any builtin feature in bot-framework to add autosuggestion? – Thomas Martin Feb 20 '20 at 05:44
  • No, there is no builtin feature in bot-framework to add autosuggestion. Can you explain why my answer is not acceptable in terms of what additional information you need? – Kyle Delaney Feb 20 '20 at 18:20
  • Hi @KyleDelaney still my issue is not resolved, could you please go through the code which i attached above and help me out? – Thomas Martin Feb 24 '20 at 04:35
  • Do you see in your code where you're setting `store={this.state.storeValue}`? That's where you're supposed to put the Redux store I've described. – Kyle Delaney Feb 24 '20 at 21:31

1 Answers1

2

Web Chat uses Redux which has a Redux store that can use Redux middleware. Web chat has an action called WEB_CHAT/SET_SEND_BOX that can be used to respond to what the user types in the text input box like this:

const store = window.WebChat.createStore(
    {},
    store => next => action => {
        if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
            const user_entered_text = action.payload.text;

            // Use the text to query the Azure database and display suggestions
        }
        return next(action);
    }
);

When the user clicks on a suggestion or presses the right key, you can use that same action to change what's in the text input box like this:

store.dispatch({
    type: 'WEB_CHAT/SET_SEND_BOX',
    payload: {
        text: user_selected_suggestion,
    }
});

There are samples in the Web Chat repo that may help with using Redux actions in Web Chat

Kyle Delaney
  • 11,616
  • 6
  • 39
  • 66