aws-samples / aws-lex-web-ui Goto Github PK

Hi, I'm very new to Lex and still in the process of learning how to get it to work properly. I've just recently deployed my bot via an Amazon S3 static webpage. I was wondering if it is possible to send multiple messages to the user with each containing information that the user requested.

For example, (my bot takes input from the user and runs a SQL search through a RDS instance)
if the User wants to search for events via their ID number, would it be possible to display the results of said search via a series of messages, with each message containing one result?

I'm only asking this because my bot doesn't display line breaks in the output. Please see the following image to see what I mean:

this is despite my Lambda function (written in C#) having the \n line break in the output method. How can I get the bot to display each result on its own line, if that's possible?

When you are using iframes and set the parentOrigin during the initial CF stack creation, if you later go back to change the parentOrigin value on the CF stack, the configuration file in the S3 bucket doesn't get updated and you get a CORS issue as show below. To correct this, requires a manual update to the config file in S3.

[Error] Origin <..removed...> is not allowed by Access-Control-Allow-Origin.

[Error] Failed to load resource: Origin <..removed...> is not allowed by Access-Control-Allow-Origin. (lex-web-ui-loader-config.json, line 0)

[Error] XMLHttpRequest cannot load https://<...removed...>/lex-web-ui-loader-config.json due to access control checks.

I'm not familiar with Vue.js and I can't seem to find any CSS or other styling controls for customizing the colors. I figure it should be simple but the documentation is confusing. Can anyone help me?

I have entered the Cognito ID and Name for my lex bot is the aws-config.json. The error message I am getting is TypeError: lexClient is undefined.

Also, I tried the alternative version of the Mobile Hub. However it keeps asking me to download a file when I am open the index.html. What do you mean by syncing the files to avoid that?

I get this issue when trying to deploy using the pipeline mode. I haven't changed any of the default settings apart from selecting my own bot which I created in the same region.

What am I doing wrong?

Thanks

In addition to the default Lex slot types, would it be possible to do add a custom step on the chat bot - for instance, request a user to upload a file or photo (and store it on S3), then return to the Lex flow?

1. in mobile browsers where voice is not supported the microphone still appears
2. voice gets stuck in listening mode in some browsers

I am using the iFrame snippet to embed into a HTML page and get the chat window. I have requirement of customizing the ToolbarContainer.vue.
I have modifications in the file - ToolbarContainer.vue
Run > npm run build from the root folder of this repo
committed everything into AmazonCodeCommit
Used Amazon Code Build to deploy this.
However the changes in the vue component is not getting reflected. Is there something wrong in the steps that I am doing?

1. Is there an option to include response cards with Initial text.
   ex. Hello, welcome to myBot. I can help you with below today.
   Btn_BookCar, Btn_BookHotel, etc..

2. How to authenticate&authorize the users from Lex-Web-UI and generate the temporary credentials based on the token received from 3rd party IDP.

3. I have placed the index.html in a S3 bucket and made it public. If i enable restrict access, i am not able to reach lexRuntime though i provide valid IdentityPoolID (Public)

Either embed in a response card title or button or just embed as part of a regular response

https://giphy.com/embed/tczJoRU7XwBS8

Is anybody, who is in charge of this repo, still working on this Project?

At least the Fact that atoa has been unassigned from Issues by hyandell on the 14th of March makes be believe that.
Though I have to admit that atoa did mere pull requests 23 days ago (25th April).

The latest release ...All files are from the same origin and in the same directory...

Appreciate all pointers...

Thanks...

(index):82 Error: chatbot loading time out
at readyManager.onConfigEventTimeout (iframe-component-loader.js:356)
(anonymous) @ (index):82
Promise.catch (async)
(anonymous) @ (index):81
(index):117 Uncaught TypeError: Cannot read property 'style' of null
at (index):117
(anonymous) @ (index):117
setTimeout (async)
document.getElementById.onclick @ (index):116

Did someone create an electron version of this web ui?

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.

Hey,
I am wondering if there is something that I need to implement to make this sample GDPR compliant?

I am not saving something in AWS Lex by myself.
My bot basically answers Questions and detects some Slots that I use to perform some actions on the parent page.

Does anybody have an Idea?
Thank you!

I'm playing around with chatbots and deployed the scheduler example which was pretty straightforward (thanks!). I have however hit an issue which I think is related to WebRTC in iOS browsers. When loading the page in iOS Safari (ios 11.1.1) I'm given the prompt for microphone access and when granted the page reads the first prompt then changes to "listening" but just kinda sticks there and doesn't actually ingest what the user says. I can tap the stop button but the audio is never transcribed. Has anyone else experienced this? It only happens on iOS (both Chrome and Safari)... all Android browsers works well.

It seems like it should be obvious, but nothing is working for me.

What is the command sequence to rebuild the parent of the lex-web-ui vue component? After I build from the vue directory, how do I get that into the parent build?

Doing npm run build from the vue then doing npm run build from the parent doesn't seem to work, and I've tried other things as well.

I am facing issue in accessing session attributes in Lex Web UI. The session attributes gets cleared every time intent has been called. Though it works fine in Lex Console.

On a separate note, does this supports IE11 ?

I am following this URL : https://aws.amazon.com/blogs/machine-learning/deploy-a-web-ui-for-your-chatbot/.

The parent url and web url both are working fine after creation. The snippet url which i got and adding to my HTML file then i am getting this error.

actions.js:656 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://dataprocessor-codebuilddeploy-lcomu6-webappbucket-l97imh236z77.s3.amazonaws.com') does not match the recipient window's origin ('http://localhost:3000')

Followed this one as well davidjbradshaw/iframe-resizer#443 but hardluck.

can anyone please tell me how to remove this error or where i am going wrong.

Hi Team,

I have deployed the sample lex order flower bot on Mobile Hub and added a response card 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. How can I fix it?

Thanks!

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

Hi, When I send a text message I receive a error from Cognito. The error is given below.

I was unable to process your message. NotAuthorizedException: Unauthenticated access is not supported for this identity pool.

Is it possible to change the AWS-Config at runtime, in order to address another Chatbot?

My ChatBots are deployed on the same AWS Server and can be addressed with the same PoolID.
I have noticed that I can send a dynamic config to the ChatBot UI.
Is it possible to make changes there?

My Idea is to use multiple ChatBots and address them depending on Webpage Settings / Status.
Aiming for use in a SinglePageApplication where the addressed ChatBot shall change depending on the displayed content.

I hope what I have requested is possible.

When I am feeding address through speech ,address speech to text conversion not occurring correctly ,Why ?
Is it possible to integrate amazon lex with google speech to text api or any third party api for the above task.

Hi Team,

I have using a sample Amazon Lex web interface. Chatbot is integrated with integrated with my web page.
It is working fine with text inputs but I get the error only whenever i try to use voice input for the first time.

I couldn't start the conversation. Please try again. (AccessDeniedException: User: arn:aws:sts::XX73XXX9XXXX:assumed-role/carmobilehub_unauth_MOBILEHUB_709XXXX3X/CognitoIdentityCredentials is not authorized to perform: polly:SynthesizeSpeech)

If i use text input for the first time and then try with voice input it works fine. I guess the issue might be in lex-web-ui.mi.js file.

PLease help

Thanks,
Suneet

HI, I dont want to offer the audio part to my customer, is there a way to disable it and have a lightweight js that can only support text and cards? or at least just disable the audio part.

Hey Oliver!
Is there a way to place the same Chatbot on multiple pages of a website yet?
We have multiple domains where the same chatbot needs to live without any modifications, so wanted to see if we can extend the parent origin to multiple domains without creating multiple JSON config files.

Thanks!
Chirag

For address translation and for all speech to text translation , I want to use third party api such as google speech api then after getting correct address in text form I want to send text address to amazon lex by using same lex web UI interface. How this can be incorporated in your existing logic.
If this is possible please share code for it.

I am trying to run the sample AWS-Lex-Web-UI from the https://github.com/awslabs/aws-lex-web-ui#sample-site. As per the directions i am able to create the cognito pool id and also saved in the chatbot-ui-loader-config.json and tried with npm start. Server started at localhost:8000 but i am not able to run any one of the bot command.

Does anybody already implemented in the WEB-UI part using the sample example. I want to export(newly created one) my bot from AWS-LEX to my local server. So that i can run it locally.

I have to integrate the iframe lex ui into my website. I tried the https://github.com/awslabs/aws-lex-web-ui#iframe but unable to implement. I am not getting any error while inspecting as well. i have filled all the configurations related to iam and cognito pool ids.

This one is lex-web-ui and working fine. But i need the iframe version of this to be integrated with the website which i am having in my website (node.js).

please suggest where my approach is going wrong.

Thanks,
Dileep

Using the default content, you can type "modify" in the admin tester and ES returns answer "Admin.001" wiht a score of 1.97.

However, when you type "modify" into the Client UI, it says "Sorry, can you please repeat that?"

Note: the problem goes away if you were to add "modify" as an alternate question for Admin.001.

I don't see the unsuccessful Client-side queries in the logs... am thinking they cut out somewhere in Lambda before getting logged? Or there is an ES score threshold? Would love a point in the right direction to debug. Thx.

If the response card contains more than 1 object, how would it be showing on the web interface ? as a list or carousel etc

After stack completes, attempt to open ParentPageUrl fails with error:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>1D7247125DABCC0B</RequestId>
<HostId>
eif4IhxexB9KxvoPyIo8i1qbpDzMG8LPoDx0TLV8C0JTb/1HAgwzcQc9PkXnr/LxoBGDLeyLKUQ=
</HostId>
</Error>

On closer examination, opening CodeBuildUrl shows CodeBuild step has failed, running 'npm update -g npm'
see screenshot below.

This seems like a new issue - not encountered recently when i last installed the UI.

Is there a way to add a delay between the message sent by user and the message posted on the iframe by Lex? Like a set 3 second delay to make the conversation seem more human-like?

Magically make any English (text) bot multi-language by seamlessly integrating Amazon Translate to translate utterances to English, and bot responses back to local language.

Hi,

I want to implement login functionality in lex web ui and after successful login i want to set user id in session attribute which i want to pass using get method. how this can be done ,Kindly let me know.

Thanks,
Tushar Choudhary

How can we change the colour of response cards?

Thanks in advance

You can change in the class lex-web-ui.js in line 4190.
Class identifier "red lighten-5"
red to green / grey etc.
Alternatively add "style":"background-color: #fff"

The UI fails to load in Firefox. I think this is because vue.js is being loaded from a CDN with a certificate that is no longer trusted by Firefox. (https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js) I am attaching a screen shot that shows what happens when I try to pull the resource directly in Firefox.

On another note, this project has been super helpful to get a Lex bot up and running on the web. Thank you!

Hi,
I am using https:// protocol, mic giving above error in chrome, working fine in Mozilla Firefox.
Here is code give error at audio.play() line

setAudioAutoPlay(context) {
    if (audio.autoplay) {
      return Promise.resolve();
    }
    return new Promise((resolve, reject) => {
      audio.play();
      // eslint-disable-next-line no-param-reassign
      audio.onended = () => {
        context.commit('setAudioAutoPlay', { audio, status: true });
        resolve();
      };
      // eslint-disable-next-line no-param-reassign
      audio.onerror = (err) => {
        context.commit('setAudioAutoPlay', { audio, status: false });
        reject(new Error(`setting audio autoplay failed: ${err}`));
      };
    });
  },

How can I run this project as shown in the image?

I want to have latitude and longitude of user ,can you please tell me how to use geolocation in index.html for sending the latitude and longitude to bot

while waiting for a response from lex the ui should show some loading icon

I deployed my custom bot and changed src/index.js to change bot title , color but it is still taking order flowers. Bot is working fine even though.

Hi,
I configured in config files and working fine in text mode, but recorder not working in any browser. gives
"error while initRecorder TypeError: navigator.mediaDevices.getUserMedia is not a function(…)"

is i need to run my local server on https:// instead http://?
what configuration should i do to run demo site in http mode with recorder?

I am trying to send session attributes to Lex when the user starts interacting with the web-ui. My intention for the chatbot is to send an email to the user at the end of the conversation. I have a site that utilizes Amazon Cognito User Pools and I can retrieve the signed in user's email address on the browser end.

My lambda function is able to handle the incoming session attributes from a PostText request (this works when I do the request outside the web-ui). However, I need to handle this PostText request when ever the user interacts with the web-ui.

So everytime the user types a message in the web-ui, their email address (session attribute) is passed to Amazon Lex.

How do I pass values to this function from the web browser?

Lex-Web-Ui.js

` __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_createClass___default()(_class, [{
key: 'initCredentials',
value: function initCredentials(credentials) {
this.credentials = credentials;
this.lexRuntimeClient.config.credentials = this.credentials;
this.userId = credentials.identityId ? credentials.identityId : this.userId;
}
}, {
key: 'postText',
value: function postText(inputText) {
var _this = this;

  var sessionAttributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

  var sessionAttr = getUserAttributes();

  console.log(sessionAttr);

  var postTextReq = this.lexRuntimeClient.postText({
    botAlias: this.botAlias,
    botName: this.botName,
    userId: this.userId,
    inputText: inputText,
    sessionAttributes:  [PASS VALUE HERE]
  });
  return this.credentials.getPromise().then(function (creds) {
    return creds && _this.initCredentials(creds);
  }).then(function () {
    return postTextReq.promise();
  });
}

},`

Does not work with IE.
I encounter this error:
[Vue warn]: Error in render: "TypeError: Object doesn't support property or method 'includes'"

is there any way to get access to audio streams? I would like to disable microphone when I leave my bot page. I couldn't find anything that can let me access all existing media tracks.

At the moment they are stored in the recorder instance, however, there is no way to access it.

I modified the code and added another action

// lex-web-ui.js: line 5764
getRecorder: function getRecorder() {
  return recorder;
},

with that change, I can access the recorder instance and everything on it