Giter Club home page Giter Club logo

aws-lex-web-ui's Introduction

Sample Amazon Lex Web Interface

Overview

This is a sample Amazon Lex web interface. It provides a chatbot UI component that can be integrated in your website. The interface allows a user to interact with a Lex bot directly from a browser using text or voice.

It can be used as a full page chatbot UI:

Or embedded into an existing site as a chatbot widget:

Features

  • Mobile ready responsive UI with full page or embeddable widget modes
  • Support for voice and text with the ability to seamless switch from one mode to the other
  • Voice support provides automatic silence detection, transcriptions and ability to interrupt responses and replay recordings
  • Display of Lex response cards
  • Ability to programmatically configure and interact with the chatbot UI using JavaScript
  • Connect interactive messaging support

Getting Started

The easiest way to test drive the chatbot UI is to deploy it using the AWS CloudFormation templates provided by this project. Once you have launched the CloudFormation stack, you will get a fully working demo site hosted in your account.

These are the currently supported regions. Click a button to launch it in the desired region.

Region Launch CloudFormation Template
Northern Virginia us-east-1
Oregon us-west-2
Ireland eu-west-1
Sydney ap-southeast-2
Singapore ap-southeast-1a
Seoul ap-northeast-2
London eu-west-2
Tokyo ap-northeast-1
Frankfurt eu-central-1
Canada (Central) ca-central-1

By default, the CloudFormation template creates a sample Lex bot and a Amazon Cognito Identity Pool to get you started. It copies the chatbot UI web application to an Amazon S3 bucket including a dynamically created configuration file. The CloudFormation stack outputs links to the demo and related configuration once deployed. See the CloudFormation Deployment section for details.

You can modify the configuration of the deployed demo site to customize the chatbot UI. It can also be further configured to be embedded it on your web site. See the sections below for code samples and a description of the configuration and deployment options.

New regions supporting Lex only support Lex Version 2. A default install of Lex Web Ui with no target Bot specified attempts to install a sample Lex Version 1 Bot and will fail in these new regions. In regions adding Lex support, a Lex Version 2 Bot should be deployed prior to deploying Lex Web UI.

Integrating into your Site and Deploying

In addition to the CloudFormation deployment mentioned above, there are other methods to integrate and deploy this project. Here is a summary of the various methods:

# Method Description Use Case
1 CloudFormation Deployment using the CloudFormation templates provided by this project Fully automated deployment of a hosted web application to an S3 bucket with an optional CI/CD pipeline. By default, it also creates a Cognito Identity Pool and a sample Lex bot Use when you want to have a infrastructure as code approach that automatically builds and configures the chatbot UI resources
2 Use the pre-built libraries from the dist directory of this repo We provide a pre-built version of the chatbot UI component and a loader library that you can use on your web site as a stand alone page or as an embeddable iframe Use when you have an existing site and want to add the chatbot UI to it by simply copying or referencing the library files
3 Use npm to install and use the chatbot UI as a Vue component Enables developers to consume this project as an npm package that provides a Vue component. See the Npm Install and Vue Component Use section for details Use when developing front-end based web applications built using JavaScript and bundled with tools such as webpack

See the Usage and Deployment sections below for details.

Usage

This project provides a set of JavaScript libraries used to dynamically insert the chatbot UI in a web page. The chatbot UI is loaded and customized by including these libraries in your code and calling their functions with configuration parameters.

The chatbot UI can be displayed either as a full page or embedded in an iframe. In this section, you will find a brief overview of the libraries and configuration parameters. It is useful to get familiar with the concepts described in the Libraries and Configuration sections before jumping to the code examples.

Libraries

The list below describes the libraries produced by this project. Pre-built versions of the libraries are found under the dist directory of this repository.

  1. Chatbot UI component. A UI widget packaged as a JavaScript reusable component that can be plugged in a web application. The library is provided by the lex-web-ui.js file under the dist directory. It is bundled from the source under the lex-web-ui directory. This library is geared to be used as an import in a webpack based web application but can also be instantiated directly in a web page provided that you manually load the dependencies and explicitly pass the configuration. See the component's README for details
  2. Loader. A script that adds the chatbot UI component library described in the item above to a web page. It facilitates the configuration and dependency loading process. The library is provided by the lex-web-ui-loader.js file under the dist directory. It is bundled from the sources under the src/lex-web-ui-loader directory. This library is used by adding a few script tags to an HTML page. See the loader README for details

Configuration

The chatbot UI component requires a configuration object pointing to an existing Lex bot and to an Amazon Cognito Identity Pool to create credentials used to authenticate the Lex API calls from the browser. The configuration object is also used to customize its behavior and UI elements of the chatbot UI component.

The CloudFormation deployment method, from this project, help with building a base configuration file. When deploying with it, the base configuration is automatically pointed to the the resources created in the deployment (i.e. Lex and Cognito).

You can override the configuration at run time by passing parameters to the library functions or using various dynamic configuration methods provided by the loader library (e.g. JSON file, events). For details, see the ChatBot UI Configuration Loading section of the loader library documentation and the Configuration and Customization section of the chatbot UI component documentation.

Connect Interactive Messaging

Lex Web UI supports both ListPicker and TimePicker templateTypes and can be sent using the same JSON structure as utilized by Connect.

ListPicker display in Web UI:

TimePicker in Web UI:

Additionally, Lex Web UI supports a DateTimePicker templateType which will give the end user an open-ended selector for a date/time variable to send back to Lex. DateTimePicker format expected:

{
   "templateType":"TimePicker",                                 (mandatory)
   "version":"1.0",                                             (mandatory)
   "data":{                                                     (mandatory)
      "content":{                                               (mandatory)
         "title":"Schedule appointment",                       (mandatory)
      }
   }
} 

DateTimePicker in Web UI:

Examples

The examples below are organized around the following use cases:

  1. Stand-Alone Page
  2. Iframe
  3. Npm Install and Vue Component Use

Stand-Alone Page

To render the chatbot UI as a stand-alone full page, you can use two alternatives: 1) directly use the chatbot UI component library or 2) use the loader library. These libraries (see Libraries) provide pre-built JavaScript and CSS files that are ready to be included directly into an HTML file to display a full page chatbot UI.

When you use the chatbot UI component directly, you have to manually load the component's dependencies and provide its configuration as a parameter. The loader library alternative provides more configuration options and automates the process of loading dependencies. It encapsulates the chatbot UI component in an automated load process.

Stand-Alone Page Using the Loader Library

The loader library provides the easiest way to display the chatbot UI. The entry point to this library is the lex-web-ui-loader.js script. This script facilitates the process of loading run-time dependencies and configuration.

If you deploy using the CloudFormation method, you will get an S3 bucket with the loader library script and related files in a way that is ready to be used. Alternatively, you can copy the files from the dist directory of this repository to your web server and include the loader.

In its most simple setup, you can use the loader library like this:

<!-- include the loader library script -->
<script src="./lex-web-ui-loader.js"></script>
<script>
  /*
    The loader library creates a global object named ChatBotUiLoader
    It includes the FullPageLoader constructor
    An instance of FullPageLoader has the load function which kicks off
    the load process
  */

  // The following statement instantiate FullPageLoader and
  // calls the load function.
  // It is assumed that the configuration is present in the
  // default JSON file: ./lex-web-ui-loader-config.json
  new ChatBotUiLoader.FullPageLoader().load();
</script>

Stand-Alone API through the Loader Library

Similar to the iFrame loading technique described later, the FullPageComponentLoader now provides an API allowing a subset of events to be sent to the Lex Web UI Component. These events are ping and postText. See the full page for description of this API.

Stand-Alone details

For more details and other code examples about using the loader script in a full page setup, see the full page section of the loader documentation. You can also see the source of the index.html page used in the demo site.

Stand-Alone Page Directly Using the ChatBot UI Component

Directly loading the chatbot UI component works at a lower level than using the loader library as described above. This approach can be used if you want to manually control the rendering, configuration and dependency loading process.

The entry point to the chatbot UI component is the lex-web-ui.js JavaScript file. The UI CSS styles are contained in the lex-web-ui.css file. The component depends on the Vue, Vuex, Vuetify and AWS SDK libraries. You should either host these dependencies on your site or load them from a third-party CDN.

The HTML code below is an illustration of directly loading the chatbot UI library and its dependencies.

NOTE: The versions of the links below may need to be pointed to the latest supported versions.

<html>
  <head>
    <!-- Font Dependencies -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">

    <!-- Vuetify CSS Dependencies -->
    <link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet" type="text/css">

    <!-- LexWebUi CSS from dist directory -->
    <link href="./lex-web-ui.css" rel="stylesheet" type="text/css">
    <!-- page specific LexWebUi styling -->
    <style type="text/css">
      #lex-web-ui-app { display: flex; height: 100%; width: 100%; }
      body, html { overflow-y: auto; overflow-x: hidden; }
    </style>
  </head>
  <body>
    <!-- application will be dynamically mounted here -->
    <div id="lex-web-ui"></div>

    <!--
      Vue, Vuex, Vuetifiy and AWS SDK dependencies must be loaded before lex-web-ui.js.
      Loading from third party CDN for quick testing
    -->
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.149.0.min.js"></script>

    <!-- LexWebUi Library from dist directory -->
    <script src="./lex-web-ui.js"></script>

    <!-- instantiate the web ui with a basic config -->
    <script>
      // LexWebUi supports numerous configuration options. Here
      // is an example using just a couple of the required options.
      var config = {
        cognito: {
          // Your Cognito Pool Id - this is required to provide AWS credentials
          poolId: '<your cognito pool id>'
        },
        lex: {
          // Lex Bot Name in your account
          botName: '<your lex bot name>'
        }
      };
      // load the LexWebUi component
      var lexWebUi = new LexWebUi.Loader(config);
      // instantiate Vue
      new Vue({
        el: '#lex-web-ui',
        store: lexWebUi.store,
        template: '<div id="lex-web-ui-app"><lex-web-ui/></div>',
      });
    </script>
  </body>
</html>

Iframe

You can embed the chatbot UI into an existing page using an iframe. This approach provides a self-contained widget that can interact with the parent page hosting the iframe. The lex-web-ui-loader.js loader library provides the functionality to add it as an iframe in a page.

This loader script dynamically creates the iframe tag and supports passing asynchronous configuration using events and JSON files. It also provides an API between the iframe and the parent page which can be used to pass Lex state and other events. These features are detailed in the Iframe Embedding section of the library.

The HTML code below is a basic example of a parent page that adds the chatbot UI as an iframe. In this scenario, the libraries and related files from the dist directory of this repo are hosted in the same directory as the parent page. If hosting the iframe on the same domain as your parent page is desired, you must deploy the iframe code into your own environment to allow the use of SAMEORIGIN configurations.

Please note that the loaderOptions variable has an iframeSrcPath field which defines the path to the full page chatbot UI. This variable can be pointed to a page like the one described in the stand-alone page section.

<html>
  <head>
    <title>My Parent Page</title>
  </head>
  <body>
    <h1>Welcome to my parent page</h1>
    <!-- loader script -->
    <script src="./lex-web-ui-loader.js"></script>
    <script>
      /*
        The loader library creates a global object named ChatBotUiLoader
        It includes the IframeLoader constructor
        An instance of IframeLoader has the load function which kicks off
        the load process
      */

      // options for the loader constructor
      var loaderOptions = {
        // you can put the chatbot UI config in a JSON file
        configUrl: './chatbot-ui-loader-config.json',

        // the full page chatbot UI that will be iframed
        iframeSrcPath: './chatbot-index.html#/?lexWebUiEmbed=true'
      };

      // The following statement instantiates the IframeLoader
      var iframeLoader = new ChatBotUiLoader.IframeLoader(loaderOptions);

      // chatbot UI config
      // The loader can also obtain these values from other sources such
      // as a JSON file or events. The configUrl variable in the
      // loaderOptions above can be used to put these config values in a file
      // instead of explicitly passing it as an argument.
      var chatbotUiConfig = {
        ui: {
          // origin of the parent site where you are including the chatbot UI
          // set to window.location.origin since hosting on same site
          parentOrigin: window.location.origin,
        },
        iframe: {
          // origin hosting the HTML file that will be embedded in the iframe
          // set to window.location.origin since hosting on same site
          iframeOrigin: window.location.origin,
        },
        cognito: {
          // Your Cognito Pool Id - this is required to provide AWS credentials
          poolId: '<your cognito pool id>'
        },
        connect: {
          contactFlowId : '<your contact flow id>',
          instanceId : '<your instance id>',
          apiGatewayEndpoint : '<your api gateway endpoint>',
        },
        lex: {
          // Lex Bot Name in your account
          botName: '<your lex bot name>'
        }
      };

      // Call the load function which returns a promise that is resolved
      // once the component is loaded or is rejected if there is an error
      iframeLoader.load(chatbotUiConfig)
        .then(function () {
          console.log('iframe loaded');
        })
        .catch(function (err) {
          console.error(err);
        });
    </script>
  </body>
</html>

For more examples showing how to include the chatbot UI as an iframe, see the source of the parent.html page and the Iframe Embedding documentation of the loader library.

Npm Install and Vue Component Use

You can use the npm package manager to install this project. The npm installation provides a library that you can import as a module into your JavaScript code. The component is built as a reusable Vue plugin. This approach is geared to be used in a webpack based project.

Package installation using npm:

# install npm package from github repo
npm install --save awslabs/aws-lex-web-ui
# you may need to install co-dependencies:
npm install --save vue vuex vuetify material-design-icons roboto-fontface

This is a quick example showing how to import the library in your project:

// assumes that a bundler like webpack will handle import/require
// using es6 module
import LexWebUi from 'aws-lex-web-ui';
// or using require
var LexWebUi = require('aws-lex-web-ui');
// import the debug non-minimized version
import LexWebUi from 'aws-lex-web-ui/dist/lex-web-ui';

The source of the chatbot UI component resides under the lex-web-ui directory. For further details about the chatbot UI component see its README file.

Sample Site

This repository provides a sample site that you can use as a base for development. The site is a couple of HTML pages can be found in the src/website directory. The pages includes the index.html file which loads the chatbot UI in a stand-alone page and the parent.html which page loads the chatbot UI in an iframe.

These pages are the same ones that are deployed by the CloudFormation deployment method in this project. It uses the lex-web-ui-loader.js loader library to display and configure the chatbot UI. You can run a development version of this sample site on your machine.

Running Locally

This project provides a simple HTTP server to serve the sample site. You can run the server using Node.js on your local machine or a test server. Please note that running locally is only designed for testing purposes as the localhost only runs on HTTP and does not use a secure HTTPs configuration.

The chatbot UI requires proper configuration values in the files located under the src/config directory. Modify the values in the lex-web-ui-loader-config.json file under the src/config directory. If you deployed the demo site using the CloudFormation templates provided by this project, you can copy the automatically generated config files from the S3 buckets to your development host.

As a minimum,you would need to pass an existing Cognito Pool Id and Lex Bot name. For example, set the appropriate values in the src/config/lex-web-ui-loader-config.json file:

  ...
  cognito: {
    "poolId": "us-east-1:deadbeef-fade-babe-cafe-0123456789ab"
  },
  lex: {
    "botName": "myHelpBot"
  }
  ...

Before you run the local development server, you need to install the development dependencies with the command:

npm install

To start the HTTP server web on port 8000, issue the command:

# serves http://localhost:8000/index.html
# and http://localhost:8000/parent.html
npm start

If you want to hack the libraries under the src/lex-web-ui-loader directory, the project provides a hot reloadable webpack dev server setup with the following command:

# runs on port 8000
npm run dev

For a more advanced local host development and test environment, see the Dependencies and Build Setup documentation of the chatbot UI component.

Deploying

This project provides AWS CloudFormation templates that can be used to launch a fully configured working demo site and related resources (e.g. Lex bot and Cognito Identity Pool).

The CloudFormation deployment is the preferred method as it allows to automatically build, configure and deploy the application (including an optional CI/CD pipeline) and it provides a higher degree of flexibility when integrating with an existing environment.

CloudFormation Deployment

The CloudFormation stack creates a web app in an S3 bucket which you can link from your site. The S3 bucket also hosts the configuration, JavaScript and CSS files which can be loaded by your existing web pages. The CloudFormation deployment is documented in the README file under the templates directory.

Building and Deploying your own LexWebUi

If you want to modify or change LexWebUi functionality follow this release process once you are satisfied and have tested your code modifications. You'll need to create an S3 bucket to hold the bootstrap artifacts. Replace "yourbootstrapbucketname" with the name of your bucket to complete the upload.

npm install
cd lex-web-ui
npm install
cd ../build
./release.sh
export BUCKET="yourbootstrapbucketname"
./upload-bootstrap.sh

Note that "yourbootstrapbucket" (S3 bucket) must allow objects with public-read acl to be added. This approach is described in the image below. Please be aware of the security implications of allowing public-read acl. Do not add any sensitive data into this bucket as it will be publicly readable.

Once you've uploaded your distribution to your own bootstrap bucket, you can launch an installation of LexWebUi in the AWS region where this bucket is located by using the master.yaml from your bootstrap bucket. You can also update an existing LexWebUi installation by performing a stack update replacing the current template with the template you just uploaded to your bootstrap bucket. Note that for either a fresh installation or an update, you need to change the BootstrapBucket parameter to be the name of your bootstrap bucket and the BootstrapPrefix parameter to be just "artifacts".

BuildImage

New Features

Changes in version 0.19.0

Two changes in version 0.19.0 are the ability to forward chat history as a transcript to an agent when Connect Live Chat is initiated. Details on use of the transcript can be found in Connect Live Chat Agent Readme. This version also updates the OPTIONS method in the API to configure CORS to only allow requests from the WebAppParentOrigin.

Changes in version 0.18.2

Add feature for connect live chat. Allow client to optionally interact with an agent via Connect. See Connect Live Chat Agent Readme for additional details.

Notable changes in version 0.18.1

The Lex Web Ui now supports configuration of multiple Lex V2 Bot Locale IDs using a comma separated list in the parameter LexV2BotLocaleId. The default Locale ID is en_US. Other supported values are de_DE, en_AU, en_GB, es_419, es_ES, es_US, fr_CA, fr_FR, it_IT, and ja_JP. See "https://docs.aws.amazon.com/lexv2/latest/dg/lex2.0.pdf" for the current list of supported Locale IDs.

When multiple Locale IDs are specified in LexV2BotLocaleId, the Lex Web UI toolbar menu will allow the user to select the locale to use. The user selected locale ID is preserved across page refreshes. The locale selection menu items will be disabled if the user is the middle of completing an intent as the locale ID can't be changed at this time. The selected locale ID will be displayed in the toolbar.

Lex Web Ui is now available in the Canada (Central) region - ca-central-1

For a complete list of fixes/changes in this version see CHANGELOG.md.

Fixes/changes in version 0.18.0

  • Move from webpack V3 to webpack V4 in the lex-web-ui component.
  • Move to npm version 7.10.0.
  • Update component package versions.
  • Resolve dependabot alerts.
  • Fix to resolve update problem where Cognito Supported Identity Providers is reset to just Cognito. An update will now preserve the existing Supported Identity Providers.
  • Set AWS sdk to version 2.875.0.
  • Improve Lex V2 support to handle responseCard defined as a session attribute in sessionAttributes.appContext.responseCard.
  • Removed support for AWS Mobile Hub based distribution.

Fixes/changes in version 0.17.9

  • New support for Lex Version 2 Bots - added template parameters for V2 Bot Id, Bot Alias Id, and Locale Id. When a V1 Bot name is provided, the template will configure resources to use the V1 bot. When the V1 Bot name is left empty and the V2 Bot parameters are specified, the template will configure resources to use the V2 Bot. V1 Bot parameters take precedence over V2 Bot parameters if both are supplied.
  • The Lex Web Ui can now be configured to send an initial utterance to the bot to get an intent started. A new template parameter named WebAppConfBotInitialUtterance is available. If left empty, no initial utterance is sent to the Bot which is the default behavior.
  • Changed format of the date message displayed on a message to use "n min ago" to assist with accessibility when displaying this value.
  • Changed behavior of ShouldLoadIframeMinimized setting. In prior releases, the last known state of the iframe took priority over this setting. In this release, when ShouldLoadIframeMinimized is set to true and the parent page is loaded or refreshed, the Bot iframe will always appear minimized. If this parameter is set to false, the last known state of the Bot is used to either show the iframe or minimize the iframe.
  • Changed loginutils.js to prevent the parent page or the full page from looping if login fails through cognito. With this change, up to 5 attempts will be performed before failing with an alert message presented to the user.
  • Support mixed case web ParentOrigin URLs and WebAppPath in Cognito user pool to prevent login failures due to case mismatch.
  • Support multiple values for WebAppPath. This allows the LexWebUI with login enabled to be deployed on multiple pages on the same site (origin).
  • Update the Cognito Callback and Signout URLs in the Cognito UserPool when ParentPageOrigin and WebAppPath parameters are updated in CloudFormation.

Fixes in version 0.17.8

  • Fix for pipeline based deployments - issue 264 - template error
  • Fix to full page web client (index.html) using forceLogin to require a redirect to login page
  • Fix to move to python 3.8 Lambda Runtime for yaml CloudFormation template embedded functions which remove use of boto3 vendored library
  • Add ability for Lex Web UI to automatically retry a request if the Lex bot times out after 30 seconds using a configurable number of attempts. By default the timeout retry feature is disabled. When enabled, the default retry count is 1.

Fixes in version 0.17.7

  • Build script fix
  • Move min button icon to the left of text

Fixes in version 0.17.6

  • Additional fixes to support upgrades. Upgrades from 0.17.1 and above are supported. Older versions will need to perform a fresh install to migrate to this version.

Fixes in version 0.17.5

  • Fix to allow use of CF template upgrade to disable WebAppConfHelp, WebAppConfPositiveFeedback, and WebAppConfNegativeFeedback
  • Fix to improve resizing of lex-web-ui button at bottom of page when text is used in addition to icon

Features in version 0.17.4

  • Improved upgrade support.
    • The CloudFormation upgrade stack operation from the AWS Console should now be used to change configuration using the available parameters. After the upgrade is complete, the lex-web-ui-loader-config.json file deployed to the web app S3 bucket will be updated with the values specified in the template. Prior versions of the config file are archived using a date timestamp in the S3 bucket should you need to refer to prior configuration values.
    • Users can now upgrade to new versions of Lex-Web-Ui using the AWS CloudFormation console by replacing the template and specifying the S3 template location from the original regional S3 bucket. As new releases of Lex-Web-Ui are published to the distribution repositories, you can now upgrade to this version using the CloudFormation Upgrade/replace template process.
    • After an upgrade, the CloudFront distribution cache will need to be invalidated for the changes to be seen immediately.
  • Chat history can now be preserved and redisplayed when the user comes back to the original parent page hosting the Lex-Web-Ui. This features is controlled using the SaveHistory template parameter. When this feature is enabled, a new menu is visible in the user interface that allows the user to clear chat history. The following are the methods you can enable this feature. Note that you can toggle this feature on and off using the upgrade process.
    • During a new deployment, specify true for the Save History parameter
    • Using the new upgrade feature, specify true for Save History parameter in the CloudFormation console.
  • Lambda function upgrade to Python 3.7.

Fixes in version 0.17.3

  • Added loader config option (forceLogin) to templates which configures UI to require the user to authenticate through Cognito prior to using the bot.
  • Added loader config option (minButtonContent) which allows text to be added to the button which appears on the parent page when the iframe is minimized.
  • Added XRay support to Lambda functions.
  • Added VPC actions to Lambda IAM Roles to support future deployment of Lambdas in VPC.
  • Encrypted S3 buckets using AES-256 default KMS key
  • Prebuilt deployments now available for Singapore, Tokyo, London, and Frankfurt regions

Fixes in version 0.17.2

  • Added option to hide message bubble on button click
  • Resolved current github dependabot security issues
  • Use default encryption for all S3 buckets using AES-256 encryption
  • Added instructions in readme for adding additional vue components

Fixes in version 0.17.1

  • Create uniquely named Cognito UserPool on stack creation
  • Removed display of Back button in title bar and instead provide a replay button using the text from prior message directly in the message bubble. Back button can be re-enabled though configuration json if desired.
  • Enhanced css attributes of the minimized chatbot button to help allow clicking on items in the parent window as well as selecting text next the button.

New Features in version 0.17.0

  • Improved screen reader / accessibility features
  • Added CloudFormation stack outputs for CloudFront and S3 bucket
  • Use response card defined in session attribute "appContext" over that defined by Lex based response Card
  • lex web ui now supports greater than 5 buttons when response card is defined in session attributes "appcontext"
  • Updated dependent packages in package-lock.json identified by Dependabot security alerts
  • Resolved additional CloudFront CORS issues
  • See CHANGELOG for additional details

New Features in version 0.16.0

  • Lex-web-ui now ships with cloudfront as the default distribution method
    • better load times
    • non public access to S3 bucket
    • better future integration to cloudfront features such as WAF and Lambda@Edge
  • Updated package.json dependencies

New Features in version 0.15.0

  • Moved to Webpack 4
  • Changed default parameter ShowResponseCardTitle to be false - was default of true
  • Added back default parameter BotAlias of '$LATEST'. The '$LATEST' alias should only be used for manual testing. Amazon Lex limits the number of runtime requests that you can make to the $LATEST version of the bot.

Toolbar Buttons

  • Help Button

Sends a help message to the bot - Back Button
Resends the previous message

aws-lex-web-ui's People

Contributors

ajeesh13 avatar akash-m-s avatar anamorph avatar ashjnaik avatar atjohns avatar atoa avatar bobpskier avatar chrislott avatar danypoudrier avatar dcanivel avatar dependabot[bot] avatar devsdd avatar gokula-krishna-dev avatar israelias avatar jboyer2012 avatar johncalhoun avatar justin-john avatar lucasguffey avatar meduncan avatar pandrel-aws avatar pdkn avatar rimarms avatar rstrahan avatar syoon1 avatar t-jones avatar timothyjones avatar tomjames19 avatar tonystrawberry avatar zhengjie28 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

aws-lex-web-ui's Issues

Is this repo dead?

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).

Embed the lex chatbot UI into an existing page using an iframe

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.

sampleparent

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).

samplehome

please suggest where my approach is going wrong.

Thanks,
Dileep

iframe loading timeout

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

recorder not working while demo run on the local development server

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?

Delay time between messages

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?

Multiple Messages - Display failure

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.

Updating the CloudFormation Stack with new parentOrigin does not update config file in S3

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.

Not able to set it up locally.

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.

err

How to edit vue component and rebuild?

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.

remove audio part

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.

Response Card Color

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"

Error encountered using IE

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

image

iOS Safari blocking speech input

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.

Broken in Firefox

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!

cdn-jsdelivr-vue-insecure-connection

Mobile voice not working

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

No results with short queries (although they do score in Tester in ES)

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.

ChatBot AWS-Config

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.

How do I Integrate with a Lex Bot that I have built?

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?

Run locally

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

Modifying vue component

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?

how to use third party speech to text conversion in existing lex web ui logic

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.

Address not getting converted correctly through speeech

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.

Getting Error while deployed from cloud formation

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.

Creating an additional span

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

Loading icon

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

Access denied opening parentPageUrl, WebAppURL, or SnippetURL

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.

image

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

Access denied exception only for first voice request from Web UI to Lex

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

Passing session attributes through Lex Web-Ui

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();
  });
}

},`

GDPR Compliance?

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!

Custom Styles

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?

Sending multiple messages to User

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:
lex output

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?

The element has no supported sources. audio.play();

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}`));
      };
    });
  },

get access to audio streams

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

Prompt Response Cards not displayed on Mobile Hub Deployment

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!

File/photo upload

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?

response cards

  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)

how to implement login page in lex-web-ui

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

Place the same bot on multiple pages

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.