CODEWITHSUNDEEP
javascriptjqueryhtmlbotframeworkdirect-line-botframework
user6269864
user6269864

Reputation:

Insert a text into a textbox and simulate click on the button in Bot Framework's Web Chat

Fiddle here: https://jsfiddle.net/chpaeeL9/1/

Microsoft Bot Framework has a webchat module that allows you to talk to your bot.

When the user clicks the Say Hi button, I want to place some text into the webchat's textbox, and click the Send button inside the webchat using JavaScript.

Sounds like something too easy, but it wasn't. Here's the code that I currently have, and it doesn't work: the click event somehow is not triggered.

$('#sayhibutton').click(function() {
  $('.wc-console').addClass('has-text'); // works
  $('.wc-shellinput').val("Hi bot!").change(); // works
  $('.wc-send').click(); // doesn't work!
  $('.wc-send svg').click(); // doesn't work either
});

Update: if that helps, it seems the interface is written using React.

Update: my question is different from my previous question about how to avoid iframes in webchat.

Upvotes: 1

Views: 1606

Answers (2)

Mohanad Haddadin
Mohanad Haddadin

Reputation: 589

this is an issue with react try this, 

var input = document.getElementsByClassName("wc-shellinput")[0];
        var lastValue = input.value;
        input.value = 'YOUR MESSAGE';
        var event = new CustomEvent('input', { bubbles: true });
        // hack React15
        event.simulated = true;
        // hack React16
        var tracker = input._valueTracker;
        if (tracker) {
            tracker.setValue(lastValue);
        }
        input.dispatchEvent(event);

        //send the message 
        $(".wc-send:first").click();

to read more see this post: https://github.com/Microsoft/BotFramework-WebChat/issues/680

Upvotes: 0

user6269864
user6269864

Reputation:

OK, for the lack of a better option my solution was a pretty dirty and ugly one.

Save the code in botchat.js into a file and reference that saved file from the HTML, rather than the CDN version.

Pretty-print the file in Chrome and find the line that says: 

e.prototype.sendMessage = function() {
  this.props.inputText.trim().length > 0 && this.props.sendMessage(this.props.inputText)
}

Replace the middle line with this: 

this.textInput.value.trim().length > 0 && this.props.sendMessage(this.textInput.value)

This basically means to take the message text from this.textInput.value rather than from this.props.inputText, or in other words, take it directly from the textinput's DOM node.

Somehow triggering the change event on a textbox doesn't cause an actual change event on the textbox, which is why we need to do this.

Upvotes: 3

Related Questions