search

aws-samples / aws-lex-web-ui

Sample Amazon Lex chat bot web interface
Other
726 stars 461 forks source link

Creating an additional span #7

Closed sunnykeerthi closed 6 years ago

sunnykeerthi commented 6 years ago

Hi,

The UI that was provided is really beautiful and awesome. Here on top of what ever was provided, I was trying to do the below tasks.

  1. Insert an image just next to the chat bubble.
  2. Add date and time nearby that chat bubble.

But I'm really sorry to say that the code is quite confusing (That's my bad, I've no idea about the Vue.js), I've deployed the files to my S3 and running them. Please let me know how can I add my own html entities like buttons/span/div etc...

Thanks

atoa commented 6 years ago

Hello,

Thanks for the feedback. Theses are valid features that we may tackle in the future but can't commit resources to it right now. In the mean time, here are some notes for future reference or if you/someone wants to to take a stab at it:

  1. The chat bubble responses from the bot are implemented in the Message.vue file. It uses a Chip component from the Vuetify library. The chip component supports adding avatars/pictures
  2. Similar to the previous item, this could be displayed by the Message.vue component. The Vuex store keeps all the messages in the messages object which is updated using the pushMessage action. This would require adding a date field to the message object in the various places where the pushMessage action is called.
  3. [Please let me know how can I add my own html entities like buttons/span/div etc...] Not sure where you would like to add html entities. As you have seen, this project uses Vue.js. It also uses the awesome Vuetify component framework for the UI widgets. The Vue components implemented by this project can be found under the lex-web-ui/src/components directory. At this point, the chat bubbles do not support raw HTML in bot responses. The chatbot responses are deliberately inserted as text to prevent injection issues (i.e. XSS. In some cases, HTML is stripped or encoded in the responses. This logic is found in the MessageText.vue component. There is an opportunity here to add a new feature to accept/sanitize HTML from a whitelist of tags or to use a simple markup (e.g. markdown). There is a challenge of handling these tags in voice responses.

I'll keep this issue open as a feature request.

atoa commented 6 years ago

The latest release (https://github.com/awslabs/aws-lex-web-ui/releases/tag/0.12.0) added support for Bot avatars and message dates. That takes care of item 1) and 2) in the list above.

The feature are controlled by the avatarImageUrl and showMessageDate config fields under the ui key:

https://github.com/awslabs/aws-lex-web-ui/blob/bd9e9f32fbb25ec8658bb3d1775a5ba735f59fbc/lex-web-ui/src/config/index.js#L159-L163