update examples to support rich messaging (#88)

Author: Spencer Lepine

CHANGELOG.md

@@ -3,6 +3,12 @@
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.1] - 2023-2-23
+### Added
+- Custom Chat Widget - Include Rich Messaging suppport
+- cloudformationTemplates - Include Rich Messaging suppport
+  - Amazon Connect Chat now allows your agents and customers to use rich text formatting when composing a message, enabling them to quickly add emphasis and structure to messages, improving comprehension. The available formatting options include bold, italics, hyperlinks, bulleted lists, and numbered lists. [Learn more](https://docs.aws.amazon.com/connect/latest/adminguide/enable-text-formatting-chat.html)
+
 ## [1.3.0] - 2023-1-19
 ### Added
 - cloudformationTemplates - startChatContactAPI - Introduce Persistent Chat

README.md

@@ -52,15 +52,15 @@ If your instance was created before the release of the chat feature, here's an o
 3. Your existing contacts flows will also work for chat! You just need to update them to specify how you want them to work.
     We've added the following action blocks:
 
-    - [Wait](https://docs.aws.amazon.com/connect/latest/adminguide/contact-blocks.html#wait)
-    - [Set disconnect flow](https://docs.aws.amazon.com/connect/latest/adminguide/contact-blocks.html#set-disconnect-flow)
+    - [Wait](https://docs.aws.amazon.com/connect/latest/adminguide/wait.html)
+    - [Set disconnect flow](https://docs.aws.amazon.com/connect/latest/adminguide/set-disconnect-flow.html)
 
     And updated these blocks for chat:
 
-    - [Play prompt](https://docs.aws.amazon.com/connect/latest/adminguide/contact-blocks.html#play)
-    - [Get customer input](https://docs.aws.amazon.com/connect/latest/adminguide/contact-blocks.html#get-customer-input)
-    - [Store customer input](https://docs.aws.amazon.com/connect/latest/adminguide/contact-blocks.html#store-customer-input)
-    - [Set recording behavior](https://docs.aws.amazon.com/connect/latest/adminguide/contact-blocks.html#set-recording-behavior)
+    - [Play prompt](https://docs.aws.amazon.com/connect/latest/adminguide/play.html)
+    - [Get customer input](https://docs.aws.amazon.com/connect/latest/adminguide/get-customer-input.html)
+    - [Store customer input](https://docs.aws.amazon.com/connect/latest/adminguide/store-customer-input.html)
+    - [Set recording behavior](https://docs.aws.amazon.com/connect/latest/adminguide/set-recording-behavior.html)
 
 4. Your metric reports and the contact trace records will now reflect chat as a channel. Note the following metrics:
 

cloudformationTemplates/asyncCustomerChatUX/README.md

@@ -126,6 +126,40 @@ If you want to enable sending attachments for Amazon Connect Chat the customer c
     },successHandler, failureHandler)
 ```
 
+## Enabling rich messaging
+
+Amazon Connect Chat now allows your agents and customers to use rich text formatting when composing a message, enabling them to quickly add emphasis and structure to messages, improving comprehension. The available formatting options include bold, italics, hyperlinks, bulleted lists, and numbered lists. [Documentation](https://docs.aws.amazon.com/connect/latest/adminguide/enable-text-formatting-chat.html)
+
+1. To enable rich messaging, include the new param when invoking `initiateChat`:
+
+```js
+  connect.ChatInterface.initiateChat({
+    contactFlowId: "${contactFlowId}",
+    instanceId: "${instanceId}",
+    // ...
+    supportedMessagingContentTypes: "text/plain,text/markdown", // include 'text/markdown' for rich messaging support
+    featurePermissions: {
+      ATTACHMENTS: false,
+      MESSAGING_MARKDOWN: true
+    }
+  },successHandler, failureHandler)
+```
+
+2. If updating an exisiting CFN stack, the startChatContact lambda function needs to be updated.
+
+Be sure to pass `supportedMessagingContentTypes` input to `startChatContact()`:
+
+```js
+function startChatContact(body) {
+    return new Promise(function (resolve, reject) {
+        var startChat = {
+            // ...
+            ...(!!body["SupportedMessagingContentTypes"] && { "SupportedMessagingContentTypes": body["SupportedMessagingContentTypes"] })
+        };
+    })
+}
+```
+
 ## Enabling message receipts
 
 Render and send read/delivered message receipts for customer chat-interface. Enable the feature [in the admin console](https://docs.aws.amazon.com/connect/latest/adminguide/message-receipts.html), and update [`chat-interface`](https://github.com/amazon-connect/amazon-connect-chat-interface#message-receipts) to generate latest webpack bundle.

cloudformationTemplates/asyncCustomerChatUX/js/startChatContact.js

@@ -49,8 +49,7 @@ exports.handler = (event, context, callback) => {
                 console.log("start chat result "+ JSON.stringify(startChatResult));
 
                 var contactId = startChatResult.ContactId;
-
-                updatePreviousConnectionData(previousConnectionData.currentContactId, startChatResult.ContactId).then((updateStatus) => {
+                updatePreviousConnectionData(previousConnectionData.currentContactId, contactId).then((updateStatus) => {
                     console.log("update was successful? " + updateStatus);
 
                     putNewConnectionData(previousConnectionData.currentContactId, startChatResult, userId, displayName).then((status) => {
@@ -69,7 +68,7 @@ exports.handler = (event, context, callback) => {
 };
 
 function startChatContact(contactFlowId, username, body, instanceId) {
-        return new Promise(function (resolve, reject) {
+    return new Promise(function (resolve, reject) {
         var startChat = {
             "InstanceId": instanceId == "" ? process.env.INSTANCE_ID : instanceId,
             "ContactFlowId": contactFlowId == "" ? process.env.CONTACT_FLOW_ID : contactFlowId,
@@ -79,7 +78,9 @@ function startChatContact(contactFlowId, username, body, instanceId) {
             },
             "ParticipantDetails": {
                 "DisplayName": body["ParticipantDetails"]["DisplayName"]
-            }
+            },
+            // Enable rich messaging: https://docs.aws.amazon.com/connect/latest/adminguide/enable-text-formatting-chat.html
+            ...(!!body["SupportedMessagingContentTypes"] && { "SupportedMessagingContentTypes": body["SupportedMessagingContentTypes"] })
         };
 
         connect.startChatContact(startChat, function(err, data) {
@@ -92,7 +93,6 @@ function startChatContact(contactFlowId, username, body, instanceId) {
                 resolve(data);
             }
         });
-
     });
 }