How to Append word suggestions to the chat input area of bot using react js?

Question

I'm building a chatbot application using botframework. I'm using react js as my front end and .net core as back end to generate token. As the chat input area is builtin on the webchat, i'm unable to take the id or class of webchat's input area. I want to add autosuggestion to the bot whenever a keypress is done on the chat input area. How to solve this?

Answer 1

You said:

As the chat input area is builtin on the webchat, i'm unable to take the id or class of webchat's input area.

This indicates that your question is about how to read user input from Web Chat's input area and/or how to programmatically write text to Web Chat's input area. I explained how to do both of those things in my answer to your other question:

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

EDIT: I've since realized that you may be wanting a way to access the send box element for the purpose of positioning your new popup element. You've mentioned wanting an alternative to jQuery, and I think no jQuery will be needed if you use the document object model normally. This Stack Overflow post might help you there: Get element inside element by class and ID - JavaScript

As seen in this thread that I linked previously, auto-suggestions are not a feature of Web Chat and it is inappropriate to turn to Stack Overflow to request that people build new features for you for free. If you want to build this feature yourself then I recommend continuing to learn more about UI elements, Web Chat, HTML, JavaScript, and React. As you try to complete your project, if you ever need help with one specific problem you're facing then that's when you should be posting a question on Stack Overflow. In order to get a good answer you will need to be a good asker by explaining the work you've done and what you've already tried and by providing links to documents you've referred to, etc. The question of how to build this entire new Web Chat feature is too broad for Stack Overflow, so here are some examples of good questions you might end up asking after you've put a reasonable amount of effort into figuring out the answer on your own:

• How do I find the ID of a preexisting element on a web page that I want to modify?
• What kind of UI element is appropriate for auto-complete suggestions in a web browser?
• How do I query an Azure database to find auto-complete suggestions based on user-entered text?

Notice that these examples are specific pieces of the question of how to implement your word suggestion project. Being specific like this about what you need will help you find the right experts to help you solve your problems. While I can answer your Web Chat-related questions, when you increase the scope of your question to include things that aren't Web Chat-related then you're making it harder to find one person who can give you one answer because they'd need to be an expert in many different things.