How to make sendMessage() accessible to the window object?

[kelkmere]

I want to send message from JS to the server. While I can do it through directLine, there's no chat bubble inserted to .wc-message-groups as it seems that is controlled by React.

Some people in this thread suggests making sendMessage() public but with my limited knowledge in React I am having difficulty making it work.

Any general direction on how to achieve this?

[billba]

I'm not clear exactly what you're trying to achieve here. Can you provide more detail than "send message from JS to the server"?

[kelkmere]

When a users click a custom button of my bot, I use directLine to post an activity of message type to the server:

$('body').on('click', '[data-postback]', function(e) {    
    botConnection
        .postActivity({
            from: user,
            type: 'message',
            text: $(this).attr('data-postback')
        })
        .subscribe();
});

This is basically the same as user typing in the built-in text input and click the send button. The only problem with my method is there's no chat bubble inserted to the right of the chat window telling user which button they clicked.

Using built-in text input:
https://user-images.githubusercontent.com/29800709/34635646-8ddf3554-f2cd-11e7-81ed-05e7a436cd80.JPG

Using custom button and directLine:
https://user-images.githubusercontent.com/29800709/34635655-aa8e6bfc-f2cd-11e7-9b9a-c3b8b8446c2b.JPG
https://user-images.githubusercontent.com/29800709/34635656-aabb554a-f2cd-11e7-95a0-d0e15523a373.JPG

[mrPrateek95]

Not a clean method but you can use this.

//Fill the input field : Using a Hack. This might break after the next React update
//Source: https://github.com/facebook/react/issues/11488
var input = document.getElementsByClassName("wc-shellinput")[0];
var lastValue = input.value;
input.value = **YOUR TEXT**;
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);

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

[compulim]

Currently, we do not expose any APIs. But it's something in our plan.

[compulim]

We now expose API on Web Chat v4. You can access the API via two ways:

• Via React UI
  • Sample here
  • For this approach, you are going to create some new React UI components that talk to Web Chat
• Via Redux store
  • Sample here
  • For this approach, you are going to use the API with or without React (or any other UI frameworks)
  • This approach is best when you want to send a message via Web Chat without any UI