diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..a4672446
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,3 @@
+dist/*.js -diff
+dist/*.css -diff
+dist/*.map -diff
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7ae0797..c04915ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,86 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).
+## [0.8.0] - 2017-07-24
+This release makes it easier to include the chatbot UI into existing
+sites. The project now distributes a pre-built library in the dist
+directory. This allows to use the chatbot UI without having to build the
+application. The root directory of the repo now contains a package.json
+file to make it easier to npm install it.
+
+There are a few breaking changes regarding the supported URL parameters
+which now use the `lexWebUi` prefix to avoid conflicts when including
+the component in an existing site.
+
+### Changed
+- **[BREAKING]** Changed config passing URL query parameter from `config`
+ to `lexWebUiConfig`
+- **[BREAKING]** Changed URL query parameter to run in embedded mode from
+ `embed` to `lexWebUiEmbed`
+- The `parentOrigin` config variable now defaults to
+ `window.location.origin` to support single origin iframe setups
+ without having to set it in the the JSON config file
+- Restructured Vuex store including:
+ * Split state, mutations and actions to individual files
+ * Moved audio, recorder, aws credentials/clients out of the state.
+ Those now exist as module variables visible from the store actions
+ * AWS credentials from parent are now manually recreated to avoid
+ including the AWS SDK as part of the store
+- Changed from using vuex mapGetter in components to instead use the
+ store state variables. This was done to avoid redistributing vuex
+ in the built library and to support vuex being loaded outside of the
+ chatbot ui.
+- Moved Vue component initialization from LexApp.vue to LexWeb.vue
+- Moved Page component to LexApp.vue from LexWeb.vue
+- Moved webpack related import config from recorder to the general
+ webpack config
+- Commented out webrtc-adapter import in preparation to deprecating it
+- Changed constructor arguments of lex client to accept a
+ lexRuntime client instead of AWS credentials or SDK config. This allows
+ redistributing without having to include AWS SDK as a direct dependency
+- Changed iframe container class name
+- Rearranged the README files. The main README contains info about the
+ npm package and instructions to use the library. The CloudFormation and
+ application details where move to different README files.
+
+### Added
+- Created a Vue plugin that can be used to instantiate the chatbot ui
+ both as an import in a webpack based project or by directly sourcing
+ the library in a script tag. The plugin registers itself and adds
+ a property named `$lexWebUi` to the Vue class. It adds a global Vue
+ component name `LexWebUi`
+- Added a distribution build config and related scripts
+- Added an example on how to encode the URL query parameter config
+- Added a new config object key `urlQueryParams` holding the url query
+ parameters
+
+## [0.7.1] - 2017-07-17
+This release adds basic unit and e2e testing. Various components were
+refactored to enable this.
+
+### Changed
+- Synched vue build environment with latest vue cli template
+- Refactored store to make it more modular and easier to test including:
+ * It no longer exports a Vuex object but instead exports an object that
+ can be used as a vuex constructor argument
+ * It no longer uses the global AWS object. It now creates its own AWS
+ Config object
+ * It no longer creates the bot audio element. The Audio element is set
+ with an action
+- Moved Vuex store instantiation to the LexApp component
+- Refactored the lex run time client library to accept an AWS SDK Config
+ object to avoid using the global one
+
+### Added
+- Added setup for running e2e test including:
+ * Added nightwatch chrome options to fake devices for mocking mic
+ * Changed nightwatch runner to connect dev server if already running
+ * Basic e2e test for stand-alone and iframe
+- Added setup to run unit tests including an initial set of basic tests
+ for the vuex store and the LexWeb Vue component
+- Added version from package.js to vuex store state
+- Added babel-polyfill as an npm dev dependency for unit testing
+
## [0.7.0] - 2017-07-14
### Added
- Added capability to send messages from parent page to iframe using
diff --git a/README.md b/README.md
index d4b1bd03..296bda8d 100644
--- a/README.md
+++ b/README.md
@@ -1,263 +1,69 @@
# Sample Amazon Lex Web Interface
-## Overview
-This repository provides a set of
-[AWS CloudFormation](https://aws.amazon.com/cloudformation/) templates to
-automatically build and deploy a sample
-[Amazon Lex](https://aws.amazon.com/lex/)
-web interface.
-
-## Web UI Application
-The sample chatbot web user interface can be used to interact with an
-Amazon Lex bot using text or voice with a webRTC capable browser.
-
-The interface interacts with AWS services directly from the browser. Here
-is a diagram of how the application works:
-
-
-
-For details about the web app, see the accompanying
-[README](lex-web-ui/README.md) file and the source under the
-[lex-web-ui](lex-web-ui) directory.
+> Sample Amazon Lex Web Interface
+## Overview
+This repository provides a sample [Amazon Lex](https://aws.amazon.com/lex/)
+web interface that can be integrated in your website. This web interface
+allows to interact with a Lex bot directly from a browser using by text
+or voice (from a webRTC capable browser).
Here is a screenshot of it:
-
-
-## Launching
-To deploy a CloudFormation stack with a working demo of the application,
-follow the steps below:
-
-1. Click the following CloudFormation button to launch your own copy of
-the sample application stack in the us-east-1 (N. Virginia) AWS region:
-[![cloudformation-launch-stack](https://s3.amazonaws.com/cloudformation-examples/cloudformation-launch-stack.png)](https://console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/new?stackName=lex-web-ui&templateURL=https://s3.amazonaws.com/aws-bigdata-blog/artifacts/aws-lex-web-ui/artifacts/templates/master.yaml).
-You can accept the defaults in the CloudFormation Create Stack Wizard up
-until the last step. At the last step, when prompted to create the stack,
-select the checkmark that says: "I acknowledge that AWS CloudFormation
-might create IAM resources with custom names". It takes about 10 minutes
-for the CloudFormation stacks to got to `CREATE_COMPLETE` status.
-2. Once the status of all the CloudFormation stacks
-is `CREATE_COMPLETE`, click on the `PipelineUrl` link in the output
-section of the master stack. This will take you to the CodePipeline
-console. You can monitor the progress of the deployment pipeline from
-there. It takes about 10 minutes to build and deploy the application.
-3. Once the pipeline has deployed successfully, go back to the
-output section of the master CloudFormation stack and click on the
-`ParentPageUrl` link. You can also browse to the `WebAppUrl` link. Those
-links will take you to the sample application running as an embedded
-iframe or as a stand-alone web application respectively.
-
-## CloudFormation Stack
-### Diagram
-Here is a diagram of the CloudFormation stack created by this project:
-
-
-
-### CloudFormation Resources
-The CloudFormation stack creates the following resources in your AWS account:
-
-- A [Amazon Lex](http://docs.aws.amazon.com/lex/latest/dg/what-is.html)
-bot. You can optionally pass the bot name of an existing one to avoid
-creating a new one.
-- A [Cognito Identity Pool](http://docs.aws.amazon.com/cognito/latest/developerguide/identity-pools.html)
-used to pass temporary AWS credentials to the web app. You can optionally
-pass the ID of an existing Cognito Identity Pool to avoid creating a
-new one.
-- A [CodeCommit](https://aws.amazon.com/codecommit/)
-repository loaded with the source code in this project
-- A continuous delivery pipeline using [CodePipeline](https://aws.amazon.com/codepipeline/)
-and [CodeBuild](https://aws.amazon.com/codebuild/).
-The pipeline automatically builds and deploys changes to the app committed
- to the CodeCommit repo.
-- An [S3](https://aws.amazon.com/s3/) bucket to store build artifacts
-- Two S3 buckets to host the web application (parent and iframe). The
- pipeline deploys to this bucket.
-- [Lambda](https://aws.amazon.com/lambda/) functions used as CloudFormation
-[Custom Resources](http://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/template-custom-resources.html)
-to facilitate custom provisioning logic
-- [CloudWatch Logs](http://docs.aws.amazon.com/AmazonCloudWatch/latest/logs/WhatIsCloudWatchLogs.html)
-groups automatically created to log the output of Lambda the functions
-- Associated [IAM roles](http://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles.html)
-for all of the above
-
-### CloudFormation Templates
-The CloudFormation launch button above launches a master stack that in
-turn creates various nested stacks. The following table lists the
-CloudFormation templates used to create these stacks:
-
-| Template | Description |
-| --- | --- |
-| [templates/master.yaml](templates/master.yaml) | This is the master template used to deploy all the stacks. It uses nested sub-templates to include the ones listed below. |
-| [templates/lexbot.yaml](templates/lexbot.yaml) | Lex bot and associated resources (i.e. intents and slot types). |
-| [templates/cognito.yaml](templates/cognito.yaml) | Cognito Identity Pool and IAM role for unauthenticated identity access. |
-| [templates/coderepo.yaml](templates/coderepo.yaml) | CodeCommit repo dynamically initialized with the files in this repo using CodeBuild and a custom resource. |
-| [templates/pipeline.yaml](templates/pipeline.yaml) | Continuous deployment pipeline of the Lex Web UI Application using CodePipeline and CodeBuild. The pipeline takes the source from CodeCommit, builds the Lex web UI application using CodeBuild and deploys the app to an S3 bucket. |
-
-### Parameters
-When launching the stack, you will see a list of available parameters
-and a brief explanation of each one. You can take the default values of
-most of the CloudFormation parameters. The parameters that you may need
-to modify are:
-
-- `BotName`: Name of pre-existing Lex bot. This is an optional parameter.
- If left empty, a sample bot will be created based on the
- [OrderFlowers](http://docs.aws.amazon.com/lex/latest/dg/gs-bp.html)
- bot in the Lex
- [Getting Started](http://docs.aws.amazon.com/lex/latest/dg/gs-console.html)
- documentation.
-- `CognitoIdentityPoolId`: Id of an existing Cognito Identity Pool.
- This is an optional parameter. If left empty, a Cognito Identity Pool
- will be automatically created. The pool ID is used by the web ui to
- get AWS credentials for making calls to Lex and Polly.
-- `ParentOrigin`: [Origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
- of the parent window. Only needed if you wish to embed the web app
- into an existing site using an iframe. The origin is used to control
- which sites can communicate with the iframe
-
-### Output
-Once the CloudFormation stack is successfully launched, the status of
-all nested stacks will be in the `CREATE_COMPLETE` green status. At
-this point, the master stack will reference the resources in the output
-section. Here is a list of the output variables:
-
-- `PipelineUrl`: Link to CodePipeline in the AWS console. After the stack
-is successfully launched, the pipeline automatically starts the build and
-deployment process. You can click on this link to monitor the pipeline.
-- `CodeCommitRepoUrl`: CodeCommit repository clone URL. You can clone
-the repo using this link and push changes to it to have the pipeline
-build and deploy the web app
-- `WebAppUrl`: URL of the web app running on a full page. The
-web app will be available once the pipeline has completed deploying
-- `ParentPageUrl`: URL of the web app running in an iframe. This is an
-optional output that is returned only when the stack creates the sample
-when page. It is not returned if an existing origin is passed as a
-parameter to the stack during creation.
-- `CognitoIdentityPoolId`: Pool ID of the Cognito Identity Pool created
-by the stack. This is an optional output that is returned only when the
-stack creates a Cognito Identity Pool. It is not returned if an existing
-pool ID was passed as a parameter to the stack during creation.
-
-## Deployment Pipeline
-When the stacks have completed launching, you can see the status of
-the pipeline as it builds and deploys the application. The link to the
-pipeline in the AWS console can be found in the `PipelineUrl` output
-variable of the master stack.
-
-Once the pipeline successfully finishes deploying, you should be able to
-browse to the web app. The web app URL can be found in the `WebAppUrl`
-output variable.
-
-The source of this project is automatically forked into a CodeCommit
-repository created by the CloudFormation stack. Any changes pushed to
-the master branch of this forked repo will automatically kick off the
-pipeline which runs a CodeBuild job to build and deploy a new version
-of the web app. You will need to
-[setup](http://docs.aws.amazon.com/codecommit/latest/userguide/setting-up.html)
-CodeCommit to push changes to this repo. You can obtain the CodeCommit
-git clone URL from the `CodeCommitRepoUrl` output variable of the
-master stack.
-
-Here is a diagram of the deployment pipeline:
-
-
-
-## Directory Structure
-This project contains the following main directories:
-
-```
- .
- |__ build # Makefile used for uploading the project sources into S3
- |__ lex-web-ui # sample Lex web ui application source
- |__ templates # cloudformation templates and related lambda functions
- |__ custom-resources # lambda functions used in cfn custom resources
-```
-# How do I ...?
-
-## Use or deploy my own bot?
-The `BotName` CloudFormation parameter can be used to point the
-stack to an existing bot. In the application, you can also change
-the configuration files or pass parameters to it (see the application
-[README](lex-web-ui/README.md) file for details).
-
-If you want to make changes to the sample
-bot deployed by the stack, you can edit the
-[bot-definition.json](templates/custom-resources/bot-definition.json)
-file. This file is used by the
-[lex-manager.py](templates/custom-resources/lex-manager.py) which is
-run in Lambda by a CloudFormation Custom Resource in the bot stack
-created by the
-[lexbot.yaml](templates/lexbot.yaml) template.
-The bot definition is in a JSON file that contains all the resources
-associated with the bot including intents and slot types.
-
-The lex-manager.py script can be also used as a stand-alone shell script.
-It allows to export existing bots (including associated resources like
-intents and slot types) into a JSON file. The same script can be
-used to import a bot definition into an account or to recursively delete
-a bot and associated resources. Here is the script usage:
+
+
+## Integrating into your Site
+You can consume this project as a library that renders the chatbot
+UI component in your site. The library can be included in your web
+application by importing it as a module in a
+[webpack](https://webpack.github.io/)
+based project or by directly sourcing it in an HTML `
+
+
+
+
+
+
+
+