Multiple Messages - Display failure

[AutoMationMaestro]

Hi,

When I set my Bot up to send back 2 Message as Response (2 Containers), the iframe Bot displays the following:

{"messages":[{"type":"PlainText","group":1,"value":"This is sample Response 1 from Container 1."},{"type":"PlainText","group":2,"value":"And this is sample Response 2 from Container 2"}]}

Can I make this work by myself? If yes, where do I change the markup of these messages? If no, is anybody already working on this issue?

Thanks in advance.

[Achraf112Ben]

@JohnCalhoun I'm having the same bug. is there a fix yet?!

[bobpskier]

Yes still open. I’ll see if I can generate a fix for this. Message.vue is at lex-web-ui/src/components/Message.vue. The actual fix will probably be in lex-web-ui/src/store/actions.js where the response from Lex is parsed and a new Message is constructed that is placed in the MessageList. This area needs to be updated to handle an array of messages in the response.

[bobpskier]

I pushed a change to the develop branch that will allow multiple PlainText based messages in the lex response to be handled and displayed / played back in the ui. Would love to have another pair of eyes test this out.

[JiaLeXian]

I got the same problem for multiple messages. still no fix

[bobpskier]

Current version 0.14.2 will display multiple messages in separate bubbles when they are provided in the Lex Response.

[JiaLeXian]

Not sure it's the 0.14.2 version. Where can I check it. I just followed the blogposthttps://aws.amazon.com/blogs/machine-learning/greetings-visitor-engage-your-web-users-with-amazon-lex/

Also, shall I download the lex-web-ui.js file as part of the web site

Thank you.

[bobpskier]

Hi Cathy, The blogpost you referred to just now is not using this open source project. The one you referenced provides a very simplistic html example for interacting with Lex. It is not going to display a UI for your bot in the way you expect. The example in this GitHub repository, aws-lex-web-ui, provides a much richer implementation supporting things like markdown, multiple messages, response cards, login, etc.

The full description of getting up and running is provided at https://aws.amazon.com/blogs/machine-learning/deploy-a-web-ui-for-your-chatbot/. Take a minute to do a quick read on this blog post.

Once you understand the basics, then scroll down to the section titled: "Deploy the chatbot UI to kick the tires" and then click on the Launch Stack button. This template will setup everything need to get a chatbot ui running, it will create some sample html pages, and provide help getting this integrated on an existing website.

After clicking on the Launch Stack button. The following sequence of forms will be displayed:

Select Template click Next (no changes needed)

Specify Details Only change the following and leave the rest as the defaults BotName: CheckupTwo [I think this is the name of the bot you are building in your account] WebAppConfBotInitialText: I am Dr. X. I know everything about how to get clear skin. Type 'hi' to wake me up. WebAppConfBotInitialSpeech: Say or type 'hi' to wake me up. WebAppConfToolbarTitle: Clear Skin Info [What ever you want for a title on the web page for the chat bot] click Next to continue

Options click Next to continue (no changes needed)

Review check the box next to "I acknowledge that AWS CloudFormation might create IAM resources with custom names." click on Create

This is going to launch a CloudFormation stack with three nested sub stacks. Once all four stacks show CREATE_COMPLETE. Click on the lex-web-ui stack so that you can review the outputs from running the template. In the Outputs tab there will be several helpful links. The ParentPageUrl is clickable and takes you to an iframe based example page where you can chat with your bot. The WebAppUrl is clickable and takes you to a full page based example where you can chat with your bot. The SnippetUrl is clickable and has the script section you need to insert on a web page to load the chatbot as an iframe on existing pages. This Snippet of code replaces most everything on the page you provided.

Let me know if this is helpful to get you started.

[JiaLeXian]

Hi Bobpskier,

Thanks for the detailed walkthrough. I tried the CloudFormation approach and when I clicked the WebAppUrl. It works well. Thanks!

But I am stuck in the part to publish it as my website. I tried the Stand Alone Page and copied the code with my botname and ID: `

as my html file. I got following errors in the console:

lex-web-ui.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND lex-web-ui.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND vue.js:8260 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools vue.js:8270 You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html test.html:48 Uncaught ReferenceError: LexWebUi is not defined at test.html:48

Plus, which document shall I look into to change the CSS part.

Or shall I just point the website itself to the WebAppUrl, but not insert the html file to the website's html. I tried to insert the Snippet into the website html, but it didn't work either.

Thank you so much.

[bobpskier]

There are multiple approaches you can follow to integrate the ui.

The easiest is to use the Snippet and paste this to an existing website. However, this probably did not work for you as CORS needs to be properly configured on the S3 bucket containing he output from the CloudFormation template. There is a parameter on the CloudFormation template that sets this up for you when you run the template. This parameter is named WebAppParentOrigin. It is empty by default. In your scenario you'd set this to 'http://www.cathyxian.com'. Then insert the resulting snippet in the main page. To get to this setup you can delete the CloudFormation stack you created and rerun the CloudFormation stack. Use the same parameters as before but also make sure WebAppParentOrigin is set. Next use the new SnippetUrl from this output to obtain the new snippet and use this on the existing page.

The second general approach is to copy the contents of the S3 bucket including the folders that contain the javascript source and css to your website. You will probably need to manually copy in selected portions of index.html. Use the Full Page Loader to bring up the bot similar to what the current index.html provides. This avoid the CORS configuration.

You'll find the css used by the lex-web-ui in two locations: lex-web-ui.css and lex-web-ui-loader.css.

Also note that your website is using "http". In Chrome this does not allow access to the microphone. You'll need to use an "https" based site to enable the microphone in the chatbot.

[rovus]

Hi,

I found that when user creates multiple response messages and then adds response card, this response card is displaying for each message.

I've created pull request #131 that fixes that issue.

Could you, please, review it and, if it's ok, merge it?

[urvashi0107]

I have deployed the UI using CloudFormation and need to change the Parent home page (where the chatbot opens in an iframe). Any leads on how that can be done?

[Ausaf50]

Has this been fixed yet ? I am trying to send multiple messages from my lambda function as response. But the same error is occuring as stated in the thread.

[bobpskier]

Yes its been fixed. Version 0.14.2 contained the change. Which version are you on? Sending multiple messages from lambda can be achieved as long as the messages property is encoded as a string rather than an object. An example is below. This is the format returned by the Lex after configuring a response with multiple messages directly in the AWS console.

{"dialogState":"Fulfilled","intentName":"SendResponse","message":"{\"messages\":[{\"type\":\"PlainText\",\"group\":1,\"value\":\"This is message one\"},{\"type\":\"PlainText\",\"group\":2,\"value\":\"This is message two\"}]}","messageFormat":"Composite","responseCard":null,"sessionAttributes":{"localTimeZone":"\"America/Los_Angeles\""},"slotToElicit":null,"slots":{}}

[Ausaf50]

@bobpskier Need some help . Please give response to every point if possible :

1. If I simply create a bot on Lex(Without using AWS-LEX-WEB-UI files) with intents and try to return multiple messages from lambda using the way you specified, will it not work ? Isn't Lex configured to give multiple responses ?
2. Can you provide me the steps for using our own S3 bucket to host this project . Then would I be able to send multiple responses as done in your last comment?

[bobpskier]

Responses are below.

1) Lex is a service for building conversational interfaces using voice and text. A response from Lex to a request from a user interface such as the aws-lex-web-ui can provide just a single message or can include multiple messages. The user interface must respond appropriately. In most situations Lex usually does not return multiple messages in a single response object. However your Lambda function or a Bot's intent configured using the AWS Console can be instructed to return multiple messages in one response.

The image below shows how the AWS console can be used to configure a Bot to return multiple messages for an intent.

The aws-lex-web-ui will interpret a response from Lex for this intent and display multiple messages in its user interface as shown below.

The key when using a Lambda handler to generate a Response that returns multiple messages is to encode this as a string. I've tried to indicate this below. This is per the Lex api specification for a response.

{"dialogState":"Fulfilled","intentName":"SendResponse","message":"{\"messages\":[{\"type\":\"PlainText\",\"group\":1,\"value\":\"This is message one\"},{\"type\":\"PlainText\",\"group\":2,\"value\":\"This is message two\"}]}","messageFormat":"Composite","responseCard":null,"sessionAttributes":{"localTimeZone":"\"America/New_York\""},"slotToElicit":null,"slots":{}}

2) I'm not sure what you are asking for in this question: "Can you provide me the steps for using our own S3 bucket to host this project?".

You do not need to rebuild the aws-lex-web-ui to support multiple messages in a Lex response. It is enabled by default.

The aws-lex-web-ui will be deployed into your own S3 bucket using the Launch Stack in the main blog post for the aws-lex-web-ui. After creating this stack, the aws-lex-web-ui will be deployed into a new S3 bucket and it will be able to interact with the Bot specified while launching the stack.

If you want to rebuild the project from source code and change the aws-lex-web-ui implementation you would first clone the github repo to a local system of yours. Then you would follow the build and deployment instructions for the project.

Typically after cloning the repository one would run in a shell from the top level folder the following:

npm install
cd lex-web-ui
npm install
cd ../build
./release.sh
export BUCKET=<S3_BUCKET_YOU_CREATE_TO_HOST_ARTIFACTS_FROM_BUILD>
./upload-bootstrap.sh

Now you can upload and run the "templates/master.yaml" from your local repository within CloudFormation. When running this template, you would only need to change BootstrapBucket to be the name of your S3 Bucket from above and the BootstrapPrefix to be "artifacts".

These instructions should get you started rebuilding the aws-lex-web-ui from source code. Still I'm not sure why you believe you need to do this.

If the Bot's Intent is configured to return multiple messages using the AWS console or the Bot's Lambda Fulfillment handler executes code and creates a response with multiple messages, the aws-lex-web-ui will display multiple messages as in the example above.

[JohnAbe]

@bobpskier I see that the Test bot console gives this response {"dialogState":"Fulfilled","intentName":"SendResponse","message":"{"messages":[{"type":"PlainText","group":1,"value":"This is message one"},{"type":"PlainText","group":2,"value":"This is message two"}]}","messageFormat":"Composite","responseCard":null,"sessionAttributes":{"localTimeZone":""America/New_York""},"slotToElicit":null,"slots":{}} if I configure messages in the Response tab, but this has another key (dialogState vs dialogAction) compared to what is expected from Lambda to Lex

Also, on trying to send a string value for 'message' key as is expected by actions.js (has a response.message.includes('{"messages":') condition) in the lex-web-ui component, Lex itself is throwing an error. So, the response is not reaching the UI. Only an 'invalid Lambda response' error is reaching the UI.

When, 'message' key in the response is provided a string value which includes "{\"messages\":", Lex throws an error as it seems to expect the {"content":"text","contentType":""} format. This is the error it throws-

An error has occurred: Invalid Lambda Response: Received invalid response from Lambda: Can not construct instance of Message: no String-argument constructor/factory method to deserialize from String value

[jawwadturabi]

@JohnAbe there is any update on how you solve it?

[parameshwaran-Lister]

any update on the above even i am facing the issue what jawwadturabi faces

[SameulPaul]

I was able to add multiple messages from lamba by passing the value in content as below. In the Test bot, this will look like a string. However in the lex web ui it does show as 2 different messages. The group field didnt make any difference.

'dialogAction': { 'type': 'Close', 'fulfillmentState': "Fulfilled", 'message': { "contentType":"PlainText", "content":'{"messages":[{"type":"PlainText","group":1,"value":"This is msgs 1"},{"type":"PlainText","group":1,"value":"This is msg 2"}]}' } }

[i-tiresias]

Thanks for the input @SameulPaul . Seemed promising, unfortunately it doesn't work for me, in test bot or web UI. There's no error, but it's returning the 'message' content as a string, including the braces etc.

@bobpskier any chance of addressing the issue raised by @JohnAbe, and built on by @SameulPaul ?

Feels like a bunch of users are close to achieving this feature that is obviously in demand. Just need confirmation if it will work in deployment or not.