How to append bot's reply into web-chat?

Question

I am unable to get the response from the bot and append it to the web-chat provided by the MS Botframework.

Here's what I have done so far:

Created a bot on https://dev.botframework.com/ (without migration)
Integrated Web Chat and Direct Line
Created a flask listener server and generated HTTPS using ngrok
Gave created server's address as messaging endpoint for the bot

Generated a HTML page using below code (running locally without any server)

<html>
  <head>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  </head>
  <body>
    <div id="bot"/>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: 'direct_line_secret_key' },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
    </script>
  </body>
</html>

Now I am able to send message from the UI as user, and able to capture it in the flask listener server.
But how do I reply from the server so that message will come from bot and append to the UI?

Am I missing something?

I have tried https://directline.botframework.com/v3/directline/conversations/{convoId}/activities to POST a request but that again comes back to server only and does not append to web-chat.

data = json.dumps({"type": "message","from":{"id":"botid"},"text": "Hii!"})

requests.post('https://directline.botframework.com/v3/directline/conversations/' + r['conversation']['id'] + '/activities', 
headers={"Authorization": "Bearer " + "secret_key", "Content-Type": "application/json", "Content-Length": "512"},data=data

NOTE: I am using botframework only for the web-chat UI and nothing else.

EDIT 1:

sent this from web-chat ui

http://bcebb07a.ngrok.io/webhook' [POST]> ************************************************************************** {'type': 'message', 'id': '5DvIa5ImiPF4G6WnGlPYyY|0000002', 'timestamp': '2018-06-05T06:51:45.3174659Z', 'serviceUrl': 'https://directline.botframework.com/', 'channelId': 'directline', 'from': {'id': 'sid'}, 'conversation': {'id': '5DvIa5ImiPF4G6WnGlPYyY'}, 'recipient': {'id': 'one_assist@CrbpWod1mw8', 'name': 'OneAssist'}, 'textFormat': 'plain', 'locale': 'en-US', 'text': 'hello how are you', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.5'}} 5DvIa5ImiPF4G6WnGlPYyY
#################################################################### {'messages': [{'id':
'5DvIa5ImiPF4G6WnGlPYyY|0000000', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:32:50.9651813Z', 'from': 'sid', 'text': 'hello', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.0'}, 'images': [], 'attachments': []}, {'id': '5DvIa5ImiPF4G6WnGlPYyY|0000001', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:47:14.1602925Z', 'from': 'sid', 'text': 'how are you', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.3'}, 'images': [], 'attachments': []}, {'id': '5DvIa5ImiPF4G6WnGlPYyY|0000002', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:51:45.3174659Z', 'from': 'sid', 'text': 'hello how are you', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.5'}, 'images': [], 'attachments': []}], 'watermark': '2'}

{ "error": { "code": "BotError", "message": "Failed to send activity: bot timed out" }, "httpStatusCode": 504 } 127.0.0.1 - - [05/Jun/2018 12:22:12] "POST /webhook HTTP/1.1" 200 - ************************************************************************** http://bcebb07a.ngrok.io/webhook' [POST]> ************************************************************************** {'type': 'conversationUpdate', 'id': 'D3XJ6CAaVsc', 'timestamp': '2018-06-05T06:51:56.7508828Z', 'serviceUrl': 'https://directline.botframework.com/', 'channelId': 'directline', 'from': {'id': '5DvIa5ImiPF4G6WnGlPYyY'}, 'conversation': {'id': '5DvIa5ImiPF4G6WnGlPYyY'}, 'recipient': {'id': 'one_assist@CrbpWod1mw8', 'name': 'OneAssist'}, 'membersAdded': [{'id': 'botid'}]} 5DvIa5ImiPF4G6WnGlPYyY
#################################################################### {'messages': [{'id':
'5DvIa5ImiPF4G6WnGlPYyY|0000000', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:32:50.9651813Z', 'from': 'sid', 'text': 'hello', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.0'}, 'images': [], 'attachments': []}, {'id': '5DvIa5ImiPF4G6WnGlPYyY|0000001', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:47:14.1602925Z', 'from': 'sid', 'text': 'how are you', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.3'}, 'images': [], 'attachments': []}, {'id': '5DvIa5ImiPF4G6WnGlPYyY|0000002', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:51:45.3174659Z', 'from': 'sid', 'text': 'hello how are you', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.5'}, 'images': [], 'attachments': []}], 'watermark': '2'}

{ "error": { "code": "BotError", "message": "Failed to send activity: bot timed out" }, "httpStatusCode": 504 } 127.0.0.1 - - [05/Jun/2018 12:22:32] "POST /webhook HTTP/1.1" 200 -

# sent this from the server code ************************************************************************** http://bcebb07a.ngrok.io/webhook' [POST]> ************************************************************************** {'type': 'message', 'id': '5DvIa5ImiPF4G6WnGlPYyY|0000003', 'timestamp': '2018-06-05T06:52:16.6925987Z', 'serviceUrl': 'https://directline.botframework.com/', 'channelId': 'directline', 'from': {'id': 'botid'}, 'conversation': {'id': '5DvIa5ImiPF4G6WnGlPYyY'}, 'recipient': {'id': 'one_assist@CrbpWod1mw8', 'name': 'OneAssist'}, 'text': 'Hii!'} 5DvIa5ImiPF4G6WnGlPYyY
#################################################################### {'messages': [{'id':
'5DvIa5ImiPF4G6WnGlPYyY|0000000', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:32:50.9651813Z', 'from': 'sid', 'text': 'hello', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.0'}, 'images': [], 'attachments': []}, {'id': '5DvIa5ImiPF4G6WnGlPYyY|0000001', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:47:14.1602925Z', 'from': 'sid', 'text': 'how are you', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.3'}, 'images': [], 'attachments': []}, {'id': '5DvIa5ImiPF4G6WnGlPYyY|0000002', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:51:45.3174659Z', 'from': 'sid', 'text': 'hello how are you', 'channelData': {'clientActivityId': '1528180308547.7414264322396316.5'}, 'images': [], 'attachments': []}, {'id': '5DvIa5ImiPF4G6WnGlPYyY|0000003', 'conversationId': '5DvIa5ImiPF4G6WnGlPYyY', 'created': '2018-06-05T06:52:16.6925987Z', 'from': 'botid', 'text': 'Hii!', 'images': [], 'attachments': []}], 'watermark': '3'} https://directline.botframework.com/v3/directline/conversations/5DvIa5ImiPF4G6WnGlPYyY/activities/

https://directline.botframework.com/v3/conversations/5DvIa5ImiPF4G6WnGlPYyY/activities { "error": { "code": "BotError", "message": "Failed to send activity: bot timed out" }, "httpStatusCode": 504 }

Is your bot working fine in the Test in Web Chat option in the Azure portal ? — Anita George
@AnitaGeorge no, i was able to get message at backend but not able to send it back to UI — sid8491
What does the activity you are sending to webchat look like? — D4RKCIDE
Do you have a repo for your implementation of the bot framework? The webchat itself communicates with the bot via a Get polling request or a stream that is opened when a chat window is created. More info on that can be found here. Implementing one of these endpoints should help towards solving this issue. But it would be easier to answer with more information on your bot. — Mark B
@JasonSowers data = json.dumps({"type": "message","from":{"id":"botid"},"text": "Hii!"}). updated in the question as well — sid8491

Morph Morph · Accepted Answer · 2018-06-05T11:53:37

I had a similar issue while using ngrok and I notice in your logs there are references to 127.0.0.1. Try adding the -host-header parameter to your ngrok command line.

For example I use

ngrok http -host-header=localhost:55486 55486

Where 55486 is the port number my endpoint sits on.

How to append bot's reply into web-chat?

sent this from web-chat ui

1 Answers