Response Cards not displayed in the order flower bot

[smemon89]

Hi Team,

I have deployed the sample lex order flower bot and added 2 response cards in the Lex bot using Prompt Response Card. However, I am unable to render the Response cards. There are no errors- it just displays the text message.

I am using text and response card field being returned at the response in the Network tab of Developer Tools. How can I fix it? Thanks

[bobpskier]

You should be able to get this to work as in the examples shown below. In the Lex console UI, for the Slot you must specify a proper url, title, and subtitle. I could not tell from your question if the response card is being returned to the browser or is empty. If it is empty, most likely an adjustment in the definition of the prompt response card is needed. Note that in the Lex UI Console you need to specify all three values: url, title, and subtitle. Without all three the response card will not be returned to the browser by Lex. I've also noticed that Lex will not return the response card if the URL is not in a proper format. For example if the path has double "//" as in "http://www.example.com/images//image1.png" Lex will not return the response card.

[smemon89]

Great the problem is solved.

I have one more quick question. let's say I have used response card from for one message and when the user clicks one of the buttons on the response card it will open another response card. I have configured this.

Now my question is when the user clicks the button from first response card and when the list of the button displays for another response card. I want that user should be able to still click any buttons on the first response card. Is this possible? Because currently when I press the button and when the other response card display, I am no longer able to click the first response cards button.

Please advise.

Thank you

On Fri, May 10, 2019 at 10:28 AM bobpskier notifications@github.com wrote:

You should be able to get this to work as in the examples shown below. In the Lex console UI, for the Slot you must specify a proper url, title, and subtitle. I could not tell from your question if the response card is being returned to the browser or is empty. If it is empty, most likely an adjustment in the definition of the prompt response card is needed. Note that in the Lex UI Console you need to specify all three values: url, title, and subtitle. Without all three the response card will not be returned to the browser by Lex. I've also noticed that Lex will not return the response card if the URL is not in a proper format. For example if the path has double "//" as in "http://www.example.com/images//image1.png" Lex will not return the response card.

[image: image] https://user-images.githubusercontent.com/11319101/57534291-ef158200-72fc-11e9-9493-44ee58a11dc9.png

[image: image] https://user-images.githubusercontent.com/11319101/57534317-f9d01700-72fc-11e9-8d16-c5e7cb2e6667.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aws-samples/aws-lex-web-ui/issues/149#issuecomment-491308855, or mute the thread https://github.com/notifications/unsubscribe-auth/ALB4HHTKLJBCNI5EZLPCQZ3PUWA7ZANCNFSM4HL5SUCQ .

[bobpskier]

The button or buttons are associated with a specific response card. Once the first response card is "complete" and the first slot is satisfied, acting on the first button for a second response card and slot could produce unexpected behavior. Hence it is no longer clickable. You can have up to six buttons in a response card that would all be active. Can you manually cary forward appropriate buttons on the second slot prompt response card? For example, if you have "tulips" on the first prompt as a button, can you have "tulips" and "order today" on the second response card as two separate buttons? The response card would then present buttons that would be known to work for that prompt. This would work for up to six buttons.

[smemon89]

Makes sense. Let me try.

I have a quick follow-up question. As discussed earlier, you provided me a solution to fill out all the details in the response like URL, title and subtitle. Then only it will work on the LEX UI. I did that and it did work. But the issue is this logic works for few response card and few response card are working without URL. It is very unexpected behavior from Lex.

Please advise.

On Fri, May 10, 2019 at 5:20 PM bobpskier notifications@github.com wrote:

The button or buttons are associated with a specific response card. Once the first response card is "complete" and the first slot is satisfied, acting on the first button for a second response card and slot could produce unexpected behavior. Hence it is no longer clickable. You can have up to six buttons in a response card that would all be active. Can you manually cary forward appropriate buttons on the second slot prompt response card? For example, if you have "tulips" on the first prompt as a button, can you have "tulips" and "order today" on the second response card as two separate buttons? The response card would then present buttons that would be known to work for that prompt. This would work for up to six buttons.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aws-samples/aws-lex-web-ui/issues/149#issuecomment-491433622, or mute the thread https://github.com/notifications/unsubscribe-auth/ALB4HHU7SHXFKR5HQD66R6LPUXRJJANCNFSM4HL5SUCQ .

[abhilashdonepudi]

We are also having the same issue. We are not sure why the following code is looking for version 1. We are dynamically generating the response card.

shouldDisplayResponseCard() { return ( this.message.responseCard && (this.message.responseCard.version === '1' || this.message.responseCard.version === 1) && this.message.responseCard.contentType === 'application/vnd.amazonaws.card.generic' && 'genericAttachments' in this.message.responseCard && this.message.responseCard.genericAttachments instanceof Array );

[rahulss14]

I have passed the url in my lambda function in generic attachments . It is showing the response card in the test console but not in web ui.

[bobpskier]

@rahulss14 Can you post the response card (json) being returned and consumed by the lex-web-ui? You can find this using the lex-web-ui parent.html page. It is a small page that identifies content being returned to the ui after calling lex. Near the bottom on the left is a section titled Lex Response Card. This identifies the response card returned by the lex service. It should look something similar to

{
  "version": "1",
  "contentType": "application/vnd.amazonaws.card.generic",
  "genericAttachments": [
    {
      "title": "title",
      "subTitle": "subtitle",
      "attachmentLinkUrl": null,
      "imageUrl": "http://yourdomain/yourimage.png"
    }
  ]
}

[rahulss14]

@bobpskier Sir I changed the version from 0 to 1 in my lambda function It has now started displaying response cards but in a haphazard manner .Also why is only version:1 allowed .

[bobpskier]

Most likely the number of attachments each with fairly long titles is resulting in rendering issues. If you have just a couple of entries in the array does the display render any better? Any thoughts on using markdown or html response to render these better? I might try this first rather than sending back an array of genericAttachments. Version 1 is the version which provides support for genericAttachments. I've not seen any subsequent versions of the response card format. If its not version 1 then processing of the genericAttachments is not attempted.

[rahulss14]

Thank you so much sir the long titles were causing the problem . How Can we use a carousel instead ?

On 09-Nov-2019, at 3:32 AM, bobpskier notifications@github.com wrote:

 Most likely the number of attachments each with fairly long titles is resulting in rendering issues. If you have just a couple of entries in the array does the display render any better? Any thoughts on using markdown or html response to render these better? I might try this first rather than sending back an array of genericAttachments. Version 1 is the version which provides support for genericAttachments. I've not seen any subsequent versions of the response card format. If its not version 1 then processing of the genericAttachments is not attempted.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[CraigGoodspeed]

Thank you so much sir the long titles were causing the problem . How Can we use a carousel instead ? … On 09-Nov-2019, at 3:32 AM, bobpskier @.***> wrote:  Most likely the number of attachments each with fairly long titles is resulting in rendering issues. If you have just a couple of entries in the array does the display render any better? Any thoughts on using markdown or html response to render these better? I might try this first rather than sending back an array of genericAttachments. Version 1 is the version which provides support for genericAttachments. I've not seen any subsequent versions of the response card format. If its not version 1 then processing of the genericAttachments is not attempted. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Firstly a big thank you! this is awesome saved me a ton of time!

I am not sure if you still need the carousel, but i managed to get one going.

"vue-flickity": "^1.2.1" --> lex-web-ui/package.json

Message.vue and ResponseCard.vue are attached.

This does however force the carousel also styling is a bit wonky (I am in the process of getting a POC up so I havent had the time to style it properly. carousel.zip )

[iota-008]

i was able to solve this by sending a plain text message along with image response card, in messages array, in response from lambda. I was using lex v2.