new commit

.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  extends: 'airbnb-base',
+  rules: {
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+  }
+}

.gitattributes

@@ -0,0 +1,4 @@
+dist/*.js -diff
+dist/*.css -diff
+dist/*.map -diff
+dist/*.zip -diff

.gitignore

@@ -0,0 +1,6 @@
+out/
+node_modules/
+.DS_Store
+.idea/
+py_modules/
+*/*/py_modules/

.npmignore

@@ -0,0 +1,5 @@
+build
+config
+img
+lex-web-ui
+Makefile

LICENSE

@@ -0,0 +1,26 @@
+Amazon Software License
+1. Definitions
+“Licensor” means any person or entity that distributes its Work.
+
+“Software” means the original work of authorship made available under this License.
+
+“Work” means the Software and any additions to or derivative works of the Software that are made available under this License.
+
+The terms “reproduce,” “reproduction,” “derivative works,” and “distribution” have the meaning as provided under U.S. copyright law; provided, however, that for the purposes of this License, derivative works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work.
+
+Works, including the Software, are “made available” under this License by including in or with the Work either (a) a copyright notice referencing the applicability of this License to the Work, or (b) a copy of this License.
+2. License Grants
+2.1 Copyright Grant. Subject to the terms and conditions of this License, each Licensor grants to you a perpetual, worldwide, non-exclusive, royalty-free, copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, sublicense and distribute its Work and any resulting derivative works in any form.
+2.2 Patent Grant. Subject to the terms and conditions of this License, each Licensor grants to you a perpetual, worldwide, non-exclusive, royalty-free patent license to make, have made, use, sell, offer for sale, import, and otherwise transfer its Work, in whole or in part. The foregoing license applies only to the patent claims licensable by Licensor that would be infringed by Licensor’s Work (or portion thereof) individually and excluding any combinations with any other materials or technology.
+3. Limitations
+3.1 Redistribution. You may reproduce or distribute the Work only if (a) you do so under this License, (b) you include a complete copy of this License with your distribution, and (c) you retain without modification any copyright, patent, trademark, or attribution notices that are present in the Work.
+3.2 Derivative Works. You may specify that additional or different terms apply to the use, reproduction, and distribution of your derivative works of the Work (“Your Terms”) only if (a) Your Terms provide that the use limitation in Section 3.3 applies to your derivative works, and (b) you identify the specific derivative works that are subject to Your Terms. Notwithstanding Your Terms, this License (including the redistribution requirements in Section 3.1) will continue to apply to the Work itself.
+3.3 Use Limitation. The Work and any derivative works thereof only may be used or intended for use with the web services, computing platforms or applications provided by Amazon.com, Inc. or its affiliates, including Amazon Web Services, Inc.
+3.4 Patent Claims. If you bring or threaten to bring a patent claim against any Licensor (including any claim, cross-claim or counterclaim in a lawsuit) to enforce any patents that you allege are infringed by any Work, then your rights under this License from such Licensor (including the grants in Sections 2.1 and 2.2) will terminate immediately.
+3.5 Trademarks. This License does not grant any rights to use any Licensor’s or its affiliates’ names, logos, or trademarks, except as necessary to reproduce the notices described in this License.
+3.6 Termination. If you violate any term of this License, then your rights under this License (including the grants in Sections 2.1 and 2.2) will terminate immediately.
+4. Disclaimer of Warranty.
+THE WORK IS PROVIDED “AS IS” WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WARRANTIES OR CONDITIONS OF M ERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE OR NON-INFRINGEMENT. YOU BEAR THE RISK OF UNDERTAKING ANY ACTIVITIES UNDER THIS LICENSE. SOME STATES’ CONSUMER LAWS DO NOT ALLOW EXCLUSION OF AN IMPLIED WARRANTY, SO THIS DISCLAIMER MAY NOT APPLY TO YOU.
+5. Limitation of Liability.
+EXCEPT AS PROHIBITED BY APPLICABLE LAW, IN NO EVENT AND UNDER NO LEGAL THEORY, WHETHER IN TORT (INCLUDING NEGLIGENCE), CONTRACT, OR OTHERWISE SHALL ANY LICENSOR BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY DIRECT, INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES ARISING OUT OF OR RELATED TO THIS LICENSE, THE USE OR INABILITY TO USE THE WORK (INCLUDING BUT NOT LIMITED TO LOSS OF GOODWILL, BUSINESS INTERRUPTION, LOST PROFITS OR DATA, COMPUTER FAILURE OR MALFUNCTION, OR ANY OTHER COMM ERCIAL DAMAGES OR LOSSES), EVEN IF THE LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+Effective Date – April 18, 2008 © 2008 Amazon.com, Inc. or its affiliates. All rights reserved.

Makefile

@@ -0,0 +1,153 @@
+# This Makefile is used to configure and deploy the sample app.
+# It is used in CodeBuild by the CloudFormation stack.
+# It can also be run from a local dev environment.
+# It can either deploy a full build or use the prebuilt library in
+# in the dist directory
+
+# environment file provides config parameters
+CONFIG_ENV := config/env.mk
+include $(CONFIG_ENV)
+
+all: build
+.PHONY: all
+
+WEBAPP_DIR := ./lex-web-ui
+BUILD_DIR := build
+DIST_DIR := dist
+SRC_DIR := src
+CONFIG_DIR := $(SRC_DIR)/config
+
+# merge existing user modified lex-web-ui-loader-config.json during upgrade
+# replace user custom-chatbot-style.css files during upgrade
+CURRENT_CONFIG_FILE := $(WEBAPP_DIR)/current/user-lex-web-ui-loader-config.json
+USER_CUSTOM_CSS_COPY := $(WEBAPP_DIR)/current/user-custom-chatbot-style.css
+
+# this install all the npm dependencies needed to build from scratch
+install-deps:
+	@echo "[INFO] Installing loader npm dependencies"
+	npm install
+	@echo "[INFO] Installing component npm dependencies"
+	cd $(WEBAPP_DIR) && npm install
+.PHONY: install-deps
+
+
+load-current-config:
+	@echo "[INFO] Downloading current lex-web-ui-loader-config.json from s3 to merge user changes"
+	@echo "[INFO] Downloading s3://$(WEBAPP_BUCKET)/lex-web-ui-loader-config.json if it exists or load defaults"
+	-aws s3 ls "s3://$(WEBAPP_BUCKET)/lex-web-ui-loader-config.json" && \
+    	aws s3 cp "s3://$(WEBAPP_BUCKET)/lex-web-ui-loader-config.json" "$(CURRENT_CONFIG_FILE)" || \
+        cp "$(CONFIG_DIR)/default-lex-web-ui-loader-config.json" "$(CURRENT_CONFIG_FILE)"
+	@echo "[INFO] Downloading s3://$(WEBAPP_BUCKET)/custom-chatbot-style.css file if it exists or load defaults"
+	-aws s3 ls "s3://$(WEBAPP_BUCKET)/custom-chatbot-style.css" && \
+    	aws s3 cp "s3://$(WEBAPP_BUCKET)/custom-chatbot-style.css" "$(USER_CUSTOM_CSS_COPY)" || \
+        cp "$(DIST_DIR)/custom-chatbot-style.css" "$(USER_CUSTOM_CSS_COPY)"
+.PHONY: load-current-config
+
+# BUILD_TYPE controls whether the configuration is done for a full build or
+# for using the prebuilt/dist libraries
+# Expected values: full || dist
+# If empty, probably this is being run locally or from an external script
+BUILD_TYPE ?= $()
+
+# updates the config files with values from the environment
+UPDATE_CONFIG_SCRIPT := $(BUILD_DIR)/update-lex-web-ui-config.js
+export CURRENT_CONFIG_FILE ?= $(realpath $(CURRENT_CONFIG_FILE))
+export WEBAPP_CONFIG_PROD ?= $(realpath $(WEBAPP_DIR)/src/config/config.prod.json)
+export WEBAPP_CONFIG_DEV ?= $(realpath $(WEBAPP_DIR)/src/config/config.dev.json)
+export LOADER_CONFIG ?= $(realpath $(SRC_DIR)/config/lex-web-ui-loader-config.json)
+CONFIG_FILES := \
+	$(WEBAPP_CONFIG_PROD) \
+	$(WEBAPP_CONFIG_DEV) \
+	$(LOADER_CONFIG)
+config: $(UPDATE_CONFIG_SCRIPT) $(CONFIG_ENV) $(CONFIG_FILES)
+	@echo "[INFO] Running config script: [$(<)]"
+	node $(<)
+.PHONY: config
+
+build: config
+	@echo "[INFO] Building component in dir [$(WEBAPP_DIR)]"
+	cd $(WEBAPP_DIR) && npm run build
+	cd $(WEBAPP_DIR) && npm run build-dist
+	@echo "[INFO] Building loader"
+	npm run build-dev
+	npm run build-prod
+	@echo "[INFO Building Dist"
+	cd $(DIST_DIR) && make
+.PHONY: build
+
+# creates an HTML file with a JavaScript snippet showing how to load the iframe
+CREATE_IFRAME_SNIPPET_SCRIPT := $(BUILD_DIR)/create-iframe-snippet-file.sh
+export IFRAME_SNIPPET_FILE := $(DIST_DIR)/iframe-snippet.html
+$(IFRAME_SNIPPET_FILE): $(CREATE_IFRAME_SNIPPET_SCRIPT)
+	@echo "[INFO] Creating iframe snippet file: [$(@)]"
+	bash $(?)
+create-iframe-snippet: $(IFRAME_SNIPPET_FILE)
+
+# used by the Pipeline deployment mode when building from scratch
+WEBAPP_DIST_DIR := $(WEBAPP_DIR)/dist
+CODEBUILD_BUILD_ID ?= none
+deploy-to-s3: create-iframe-snippet
+	@[ "$(WEBAPP_BUCKET)" ] || \
+ 		(echo "[ERROR] WEBAPP_BUCKET env var not set" ; exit 1)
+	@echo "[INFO] deploying to S3 webapp bucket: [$(WEBAPP_BUCKET)]"
+	@echo "[INFO] copying build: [$(CODEBUILD_BUILD_ID)]"
+	aws s3 cp --recursive "$(WEBAPP_DIST_DIR)" \
+		"s3://$(WEBAPP_BUCKET)/builds/$(CODEBUILD_BUILD_ID)/"
+	@echo "[INFO] copying new version"
+	aws s3 cp --recursive \
+		"s3://$(WEBAPP_BUCKET)/builds/$(CODEBUILD_BUILD_ID)/" \
+		"s3://$(WEBAPP_BUCKET)/"
+	aws s3 cp \
+		--metadata-directive REPLACE --cache-control max-age=0 \
+		"s3://$(WEBAPP_BUCKET)/builds/$(CODEBUILD_BUILD_ID)/custom-chatbot-style.css" \
+		"s3://$(WEBAPP_BUCKET)/"
+	@[ "$(PARENT_PAGE_BUCKET)" ] && \
+		( echo "[INFO] synching parent page to bucket: [$(PARENT_PAGE_BUCKET)]" && \
+		aws s3 sync \
+			--exclude '*' \
+			--metadata-directive REPLACE --cache-control max-age=0 \
+			--include 'lex-web-ui-loader-config.json' \
+			"$(CONFIG_DIR)" "s3://$(PARENT_PAGE_BUCKET)/" && \
+		aws s3 sync \
+			--exclude '*' \
+			--include 'lex-web-ui-loader.*' \
+			--include 'parent.html' \
+			--include 'iframe-snippet.html' \
+			"$(DIST_DIR)" "s3://$(PARENT_PAGE_BUCKET)/" ) || \
+		echo "[INFO] no parent bucket to deploy"
+	@echo "[INFO] all done deploying"
+.PHONY: deploy-to-s3
+
+# Run by CodeBuild deployment mode when which uses the prebuilt libraries
+# Can also be used to easily copy local changes to a bucket
+sync-website: create-iframe-snippet
+	@[ "$(WEBAPP_BUCKET)" ] || \
+		(echo "[ERROR] WEBAPP_BUCKET variable not set" ; exit 1)
+	@echo "[INFO] copying web site files"
+	aws s3 sync \
+		--exclude Makefile \
+		--exclude custom-chatbot-style.css \
+		"$(DIST_DIR)" s3://$(WEBAPP_BUCKET)
+	@echo "[INFO] Restoring existing custom css file"
+	@[ -f "$(USER_CUSTOM_CSS_COPY)" ] && \
+	aws s3 cp \
+		--metadata-directive REPLACE --cache-control max-age=0 \
+		"$(USER_CUSTOM_CSS_COPY)" "s3://$(WEBAPP_BUCKET)/custom-chatbot-style.css"
+	@echo "[INFO] Saving a backup copy of previous loader config json"
+	aws s3 cp \
+		"$(CURRENT_CONFIG_FILE)" "s3://$(WEBAPP_BUCKET)/lex-web-ui-loader-config.$(shell date +%Y%m%d%H%M%S).json"
+#   For CodePipeline based distribution / builds where the custom style is managed in
+#   Source control, uncomment the next four lines such that the css file is updated
+#   on each CodePipeline/CodeBuild invocation.
+#	@echo "[INFO] copying custom-chatbot-style.css and setting cache max-age=0"
+#	aws s3 cp \
+#		--metadata-directive REPLACE --cache-control max-age=0 \
+#		"$(DIST_DIR)/custom-chatbot-style.css" s3://$(WEBAPP_BUCKET)
+	@echo "[INFO] copying config files"
+	aws s3 sync  \
+		--exclude '*' \
+		--metadata-directive REPLACE --cache-control max-age=0 \
+		--include 'lex-web-ui-loader-config.json' \
+		"$(CONFIG_DIR)" s3://$(WEBAPP_BUCKET)
+	@echo "[INFO] all done deploying"
+.PHONY: sync-website

NOTICE

@@ -0,0 +1,2 @@
+aws-lex-web-ui
+Copyright 2017-2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.

README-connect-live-chat.md

@@ -0,0 +1,141 @@
+# Transfer to Amazon Connect Live Chat
+
+This feature allows users of the Lex Web UI to have conversations with an Amazon Connect Live Agent. When the user
+requests a transfer, all subsequent messages are sent to Connect Live Chat Agent and responses from the Agent are 
+displayed back to the user as a message bubble. The conversation continues between user and agent until
+either party disconnects. Once disconnected, messages are again sent to the Lex bot.
+
+## Setup
+
+### Configure a Connect Instance
+
+The following procedure configures a Connect contact flow to use for live chat. In this example, the Sample inbound
+contact flow is used to handle the incoming live chat. In practice, a new inbound flow should be developed as well as a 
+disconnect flow that displays a message once the session is terminated. 
+
+1. Set up a [Connect Instance](https://docs.aws.amazon.com/connect/latest/adminguide/amazon-connect-instances.html)
+2. Once you login to your instance, select **Routing** then **Contact flows**
+![connect contact flows](./img/connect-contact-flows.png)
+3. Find **Sample inbound flow (first contact experience)** from the list
+4. Expand **Show additional flow information** and take note of the Contact Flow ID (in blue below) and Instance ID (in red).
+You are going to need to pass these values during the creation of the CloudFormation stacks below
+![connect flow details](./img/connect-flow-details.png)
+5. If desired, [Enable Attachments]([https://docs.aws.amazon.com/connect/latest/adminguide/enable-attachments.html]) 
+to attach the bot transcript as a file for the agent to review. You will also have to set the ConnectAttachChatTranscript 
+CloudFormation parameter to true. When configuring CORS for the S3 bucket used for attachments, you should use the CloudFront distribution domain name (for example, 
+d111111abcdef8.cloudfront.net) that is deployed with this Lex-Web-UI stack, unless you are providing a CNAME 
+custom URL in front of it, in which case you should use the CNAME. In addition, the origin of the "Connect Contact
+Control Panel" should also be included in the CORS definition. In sample below, 
+replace "https://connectinstance.my.connect.aws" with the origin of your "Connect Contact Control Panel". If using
+the default Contact Control Panel this will be the same as the origin of the "Connect Login" URL. 
+In the example replace "https://d111111abcdef8.cloudfront.net" with the origin of your "lex-web-ui" distribution as noted earlier.
+```
+[
+    {
+        "AllowedHeaders": [
+            "*"
+        ],
+        "AllowedMethods": [
+            "PUT",
+            "GET"
+        ],
+        "AllowedOrigins": [
+            "https://connectinstance.my.connect.aws",
+            "https://d111111abcdef8.cloudfront.net"
+        ],
+        "ExposeHeaders": []
+    }
+]
+```
+
+## Deploy or update the Lex Web UI Stack
+
+### Using the standard distribution template (master.yaml)
+
+Deploy a new Lex Web UI or update an existing Lex Web UI from the standard deployment repos. 
+
+For a new stack, fill in the required values just as you would for any Lex Web Ui deployment.
+
+At the end of the parameter list, you will notice new parameters that control enabling the Connect Live Chat feature.
+
+1. Set ShouldEnableLiveChat to true
+2. Add additional ConnectLiveChatTerms as a comma separated list if terms other than 'live chat' should be supported
+3. Fill in ConnectInstanceId
+4. Fill in ConnectContactFlowId
+5. Change the ConnectPromptForNameMessage if desired
+6. Change the ConnectWaitForAgentMessage if desired
+7. Change the wait message interval, ConnectWaitForAgentMessageIntervalInSeconds, from 60 seconds to some other value if desired. 
+8. Change the ConnectAgentJoinedMessage if desired. {Agent} will be replaced by the agent's name.
+9. Change the ConnectAgentLeftMessage if desired. {Agent} will be replaced by the agent's name.
+10. Change the ConnectChatEndedMessage if desired
+11. Change ConnectAttachChatTranscript to true if you would like to also attach the chat transcript as a file. This will also require enabling chat attachments in the Amazon Connect instance, as noted above in the Configure a Connect Instance section of this document.
+
+THe last two properties adjust the message displayed while the user is waiting for an agent and frequency of this
+message. You can also control this type behavior from the contact flow. If using the contact flow to display wait
+messages to the user, set the ConnectWaitForAgentMessageIntervalInSeconds to 0.
+
+Once you have the parameters set, Create or update your stack.
+
+### Using the pipeline template
+
+The pipeline templates setup a new pipeline and code commit repo which deploys LexWebUi. The master-pipeline.yaml
+template can be used to create a new pipeline and kick off execution of the pipeline. For a new pipeline, the same
+parameters described above can be specified. When complete, the newly deployed Lex Web Ui
+will have an updated lex-web-ui-loader-config.json file containing all the values specified for Connect Live Chat. 
+Future modifications to connect live chat parameters should occur in the lex-web-ui-loader-config.json file and 
+then be committed to code commit repo for deployment.
+
+The new parameters configurable in lex-web-ui-loader-config.json are shown below. 
+
+```
+  "connect": {
+    "contactFlowId" : "YOUR CONTACT FLOW ID",
+    "instanceId" : "YOUR CONNECT INSTANCE ID",
+    "apiGatewayEndpoint" : "Your newly created Amazon API Gateway endpoint",
+    "promptForNameMessage": "Before starting a live chat, please tell me your name?",
+    "waitingForAgentMessage": "Thanks for waiting. An agent will be with you when available.",
+    "waitingForAgentMessageIntervalSeconds": 60,
+    "agentJoinedMessage": "{Agent} has joined.",
+    "agentLeftMessage": "{Agent} has left.", 
+    "chatEndedMessage": "Chat ended.",
+    "attachChatTranscript": true
+  },
+```
+
+## Usage
+
+Once the stack creation has completed, you can open the parent page hosting the Lex Web UI on your browser.
+
+On a separate browser window or tab, sign in as an agent on 
+the [Amazon Connect Contact Control Panel (CCP)](https://docs.aws.amazon.com/connect/latest/adminguide/agent-user-guide.html) 
+to receive the live agent contacts originated from the Lex Web UI.
+
+Back on the Lex Web UI parent page, select the **menu** button on the Lex Web UI toolbar 
+and then the **live chat** button to start a chat session with the agent. At this point 
+the user and agent should be able to interact with each other. Users can also invoke the live chat feature using
+"live chat" for text input. 
+
+To disconnect from Live Chat, click the hangup button next to text input or use the menu to "Stop Live Chat". 
+
+## Connect Disconnect Flow logic
+
+The LexWebUi observes messages from Connect to present responses to the user. It monitors for a specific message
+to disconnect the user. This message is 'application/vnd.amazonaws.connect.event.chat.ended'. When this message is
+received, the LexWebUi will terminate the live agent chat and resume normal operation chatting with the configured
+Lex Bot. 
+
+Connect sends this message when the "Disconnect" block is executed in a contact flow.
+
+In Connect's "Sample disconnect flow", "Disconnect" is used after waiting for 15 minutes. While waiting, the LexWebUi
+will continue to send messages to Connect Live Chat rather then sending messages to the Lex Bot.
+
+If you desire to terminate Live Chat in LexWebUi as soon as the Agent terminates the chat in the CCP, configure the 
+flow performing the disconnect to terminate immediately as in the following modified "Sample disconnect flow".
+
+![sample disconnect flow](./img/sample_disconnect_flow.png)
+
+## Session Attributes
+
+Connect live chat will send any Lex session attributes that are prefixed with `connect_` on the attribute key. Also, if there is a session attribute key `topic`, that will also be sent to Amazon Connect.
+
+Session attributes can be used to branch in a contact flow to a pre-defined queue, or pass other information that the contact flow may require.  Attributes are accessible in a contact flow by using the Check contact attributes block, with the attribute type value of `User Defined`.