How to add AutoComplete/AutoSuggestion in Microsoft botframework webchat using React.js

Question

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 it

Answer 1

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