How to programmatically clear the content of the input field (sendbox) in the chat window | MS Bot framework | Directline bot

Question

I'm using QnAMaker in the back end for my chat bot, which is running in direct line bot channel. In a situation i want to clear the contents in the input field, for that i've used the following simple JavaScript line

document.querySelector("[aria-label='Sendbox']").value ="";

It clears the content at that moment, however it appears again when we click inside the input field to type the next question. Hence the content is actually not cleared.

So suggest me a way with which i should programmatically clear the input field (sendbox) of the chat window permanently.

score 4 · Accepted Answer · answered Mar 09 '20 at 16:50

You might be interested in this answer: How to add AutoComplete/AutoSuggestion in Microsoft botframework webchat using React.js

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

You're trying to edit the contents of the send box without using the Redux store, and so Web Chat isn't aware of the changes you're trying to make. If you use the WEB_CHAT/SET_SEND_BOX action with empty text then you can clear the send box correctly.

thanks for the detailed explanation, i found the solution based on your input. — Jegan Baskaran, Mar 10 '20 at 08:36

score 0 · Answer 2 · answered Mar 10 '20 at 08:35

The exact solution for the issue is the following piece of code.

function clearinput()
{

                    store.dispatch({
                    type: 'WEB_CHAT/SET_SEND_BOX',
                    payload: {

                            text: "",
                         }
                    });
                         document.querySelector("[aria-label='Sendbox']").value ="";


}

thanks Kyle Delaney for the detailed explanation, based on your input I've achieved it.

You don't need the `document.querySelector` part – Kyle Delaney Mar 10 '20 at 17:41 — Kyle Delaney, Mar 10 '20 at 17:41

How to programmatically clear the content of the input field (sendbox) in the chat window | MS Bot framework | Directline bot

2 Answers2