aws-samples / aws-lex-web-ui

Sample Amazon Lex chat bot web interface
Other
745 stars 471 forks source link

Custom Button onClick #222

Closed AndrewAdamson closed 8 months ago

AndrewAdamson commented 4 years ago

Using the Vuejs version of the web-ui. Wonder if anyone could point me down the right path for the below :

1) I'd like to return a list of buttons for the user to click on - this is a list of possible values during the validation stage of an intent. I'm using html responses from lex to display my lex responses. 2) When the user clicks, I'd like to run a dispatch.('postTextMessage') to send a string to lex as if the user was typing the value in.

This is not using response cards - I believe their is a limit of 10 buttons in a card and the button list I return could be >10.

I can return button tags from my lex response pretty easy but I'm unsure how to tie that into an action doing it this way. I've looked at the actions.js file and I can analyze my sessionAttributes inside the postTextMessage function but still unsure how to tie a button click to the buttons i render.

justin-john commented 4 years ago

@beetes-juice You can add as many as response cards and each can have 5 buttons. You should avoid adding the title and subtitle in response cards in lex and in UI you can hide by config "shouldDisplayResponseCardTitle" to false.

For validation, you should add the Lambda Function as a validation Code Hook in AWS Lex. This will help to validate the user input and return user something is wrong on validation failure or proceed to fulfillment on validation success.

khalilmd commented 4 years ago

@beetes-juice The lex limit for buttons returned in a response card is 5. You can bypass this limitation by using the lex-web-ui to render the buttons via appContext.altMessages.responseCard in the session attributes.

You can read more about it in the following readme: https://github.com/aws-samples/aws-lex-web-ui/blob/63efee2251eeadda3e2b26b66e3ae7eca1403421/lex-web-ui/README.md#response-cards