Amazon Connect Chat Interface is a light interface to create a customer widget for getting started with Amazon Connect chat. This package contains some lightweight components to render chat out of the box in your website, with a thin layer on top of ChatJS to manage your chat session.
An example of how you can add this package to an html page is described in the local-testing folder. You can see other examples in this GitHub repo as well.
Importing this file into your project will place a ChatInterface object on the window, which contains a method to initiateChat.
To initiate the chat, you will pass in some details about your Connect instance, the requesting user, and the API Gateway generated
via the getting started process.
To make local modifications to this package and test them on your webpage, simply make your edits and run npm install && npm run dev-build to produce the
Webpack built file and the sourcemaps. You can import these in the same fashion as the getting started examples.
To build the production version of this package, simply run npm install && npm run build. These will generate a minified built file, with console logs stripped and other Webpack optimizations.
Import this into your package as is described in the GitHub examples.
To customize the theme, determine which aspect(s) of the chat interface you would like to modify, make your changes and build the file as described above.
Occasionally, a component will pull a style value from src/theme/defaultTheme.js, so it is important to be aware of this source of customization.
See below sections for high level description of each major component.
A commonly requested feature for the Connect Chat Interface is to play a sound when a new message is received from the agent. This can be done via the 
onMessage event.
An implementation might look like the following, in the constructor of ChatSession.js (although you can set this up anywhere you have access to the ChatJs chatSession object):
const audioObj = new Audio('my-notification-sound.mp3');
this.session.onMessage(event => {
const { chatDetails, data } = event;
if (data.ParticipantRole === "AGENT") {
audioObj.play();
}
});Note that for larger audio files you may need to more gracefully handle when the audio is actually available to play: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio#determining_when_playback_can_begin.
High level overview of some of the major components below, to help understand the chat interface.
Chat.js serves as the top level UI wrapper for the chat experience. It contains the styling for the Header, and invokes the ChatTranscriptor, ChatComposer, and ChatActionBar.
For example, we can update the Header background color by updating the background to red in Chat.js.
const HeaderWrapper = styled.div`
background: #3F5773;
text-align: center;
padding: 20px;
color: #fff;
border-radius: 3px;
`
Before:
After:
The Chat Transcriptor is responsible for rendering the transcript of the Chat in the widget. It handles typing events, sent messages, received messages, and scrolling.
Make changes here to update message bubbles, chat background, and more.
The action bar covers the UI underneath the chat input area. For the default chat widget experience, it contains the functionality to end a chat and close the chat window.
A customization to the action bar background in this file to palette.lightGreen might look as follows:
The chat composer is responsible for the editable text area where the customer constructs and sends their messages.
Changes can be made here for the hint text ("Type a message"), as well as the edit container styles.
Example changing FormattedMessage hint text to "What's on your mind?":
