From d35a7acd175148ef26fae9ff0813efc843962dca Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Fri, 14 Dec 2018 15:57:20 -0800
Subject: [PATCH] Add avatar image support (#1486)

* Add avatar image support and move avatar initials props to styleOptions

* Add sample

* Update PR number

* Remove memoize style

* Update verbiage

* Using CroppedImage for centering
---
 CHANGELOG.md                                  | 12 ++++-
 README.md                                     |  1 +
 packages/component/src/Activity/Avatar.js     | 54 +++++++++++++++----
 .../src/Activity/CarouselFilmStrip.js         | 21 ++------
 .../component/src/Activity/StackedLayout.js   | 12 ++---
 packages/component/src/Composer.js            | 36 ++++++++++---
 .../component/src/Styles/StyleSet/Avatar.js   |  9 +++-
 .../src/Styles/defaultStyleSetOptions.js      | 27 ++++++----
 .../index.html                                | 50 +++++++++++++++++
 .../index.html                                |  6 ++-
 10 files changed, 172 insertions(+), 56 deletions(-)
 create mode 100644 samples/04.b.display-user-bot-images-styling/index.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d404a6efb2..233f9d5cde 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 <!-- CHANGELOG line template
 ### Added/Changed/Removed
-- Added something, by [@johndoe](https://github.com/johndoe) in PR [#XXX](https://github.com/Microsoft/BotFramework-WebChat/pull/XXX)
+- Added something, by [@johndoe](https://github.com/johndoe), in PR [#XXX](https://github.com/Microsoft/BotFramework-WebChat/pull/XXX)
 
 ### Fixed
 - Fix [#XXX](https://github.com/Microsoft/BotFramework-WebChat/issues/XXX). Patched something, by [@johndoe](https://github.com/johndoe) in PR [#XXX](https://github.com/Microsoft/BotFramework-WebChat/pull/XXX)
@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [Unreleased]
 ### Added
 - Fix [#1383](https://github.com/Microsoft/BotFramework-WebChat/issues/1383). Added options to hide upload button, by [@compulim](https://github.com/compulim) in PR [#1491](https://github.com/Microsoft/BotFramework-WebChat/pull/1491)
+- Added support of avatar image, thru `styleOptions.botAvatarImage` and `styleOptions.userAvatarImage`, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)
+
+### Changed
+- Moved `botAvatarImage` and `userAvatarImage` to `styleOptions.botAvatarImage` and `styleOptions.userAvatarImage` respectively, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)
 
 ### Fixed
 - Fix [#1360](https://github.com/Microsoft/BotFramework-WebChat/issues/1360). Added `roles` to components of Web Chat, by [@corinagum](https://github.com/corinagum) in PR [#1462](https://github.com/Microsoft/BotFramework-WebChat/pull/1462)
@@ -25,6 +29,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Samples
 - UI: [Hide upload button](https://microsoft.github.io/BotFramework-WebChat/05.d.hide-upload-button-styling/), in [#1491](https://github.com/Microsoft/BotFramework-WebChat/pull/1491)
 
+### Removed
+- `botAvatarImage` and `userAvatarImage` props, as they are moved inside `styleOptions`, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)
+
+### Samples
+- UI: [Avatar image](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling/), in [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)
+
 ## [4.2.0] - 2018-12-11
 ### Added
 - Build: Development build now include instrumentation code, updated build scripts
diff --git a/README.md b/README.md
index a77f58834a..3fdb051c45 100644
--- a/README.md
+++ b/README.md
@@ -215,6 +215,7 @@ npm run prepublishOnly
 | [`03.a.host-with-react`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react)                                                                       | Demonstrates how to create a React component that hosts the full-featured Web Chat.                                                                                                                                                 | [Demo](https://microsoft.github.io/BotFramework-WebChat/03.a.host-with-react)                                        |
 | [`03.b.host-with-Angular5`](https://github.com/Microsoft/BotFramework-WebChat/issues/1423)                                                                                                 | Demonstrates how to create an Angular component that hosts the full-featured Web Chat.                                                                                                                                              |                                                                                                                      |
 | [`04.display-user-bot-initials-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.display-user-bot-initials-styling)                                       | Demonstrates how to display initials for both Web Chat participants.                                                                                                                                                                | [Demo](https://microsoft.github.io/BotFramework-WebChat/04.display-user-bot-initials-styling)                        |
+| [`04.b.display-user-bot-images-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.b.display-user-bot-images-styling)                                       | Demonstrates how to display images and initials for both Web Chat participants.                                                                                                                                                     | [Demo](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling)                        |
 | [`05.a.branding-webchat-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/05.a.branding-webchat-styling)                                                     | Introduces the ability to style Web Chat to match your brand. This method of custom styling will not break upon Web Chat updates.                                                                                                   | [Demo](https://microsoft.github.io/BotFramework-WebChat/05.a.branding-webchat-styling)                               |
 | [`05.b.idiosyncratic-manual-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/05.b.idiosyncratic-manual-styling/)                                            | Demonstrates how to make manual style changes, and is a more complicated and time-consuming way to customize styling of Web Chat. Manual styles may be broken upon Web Chat updates.                                                | [Demo](https://microsoft.github.io/BotFramework-WebChat/05.b.idiosyncratic-manual-styling)                           |
 | [`05.c.presentation-mode-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/05.c.presentation-mode-styling)                                                   | Demonstrates how to set up Presentation Mode, which displays chat history but does not show the send box, and disables the interactivity of Adaptive Cards.                                                                         | [Demo](https://microsoft.github.io/BotFramework-WebChat/05.c.presentation-mode-styling)                              |
diff --git a/packages/component/src/Activity/Avatar.js b/packages/component/src/Activity/Avatar.js
index 4057547094..963789a98c 100644
--- a/packages/component/src/Activity/Avatar.js
+++ b/packages/component/src/Activity/Avatar.js
@@ -2,16 +2,36 @@ import classNames from 'classnames';
 import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
+import CroppedImage from '../Utils/CroppedImage';
 
-export default connectToWebChat(
-  ({ styleSet }) => ({ styleSet })
-)(
+const connectAvatar = (...selectors) => connectToWebChat(
   ({
-    children,
-    className,
-    fromUser,
-    styleSet
-  }) =>
+    styleSet: {
+      options: {
+        botAvatarImage,
+        botAvatarInitials,
+        userAvatarImage,
+        userAvatarInitials
+      }
+    }
+  }, { fromUser }) => ({
+    avatarImage: fromUser ? userAvatarImage : botAvatarImage,
+    avatarInitials: fromUser ? userAvatarInitials : botAvatarInitials
+  }),
+  ...selectors
+);
+
+// TODO: [P2] Consider memoizing "style={ backgroundImage }" in our upstreamers
+//       We have 2 different upstreamers <CarouselFilmStrip> and <StackedLayout>
+
+const Avatar = ({
+  avatarImage,
+  avatarInitials,
+  className,
+  fromUser,
+  styleSet
+}) =>
+  !!(avatarImage || avatarInitials) &&
     <div
       className={ classNames(
         styleSet.avatar + '',
@@ -19,6 +39,20 @@ export default connectToWebChat(
         (className || '') + ''
       ) }
     >
-      { children }
+      { avatarInitials }
+      { !!avatarImage &&
+        <CroppedImage
+          alt=""
+          className="image"
+          height="100%"
+          src={ avatarImage }
+          width="100%"
+        />
+      }
     </div>
-)
+
+export default connectAvatar(
+  ({ styleSet }) => ({ styleSet })
+)(Avatar)
+
+export { connectAvatar }
diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js
index 0a73323452..3158fb45d7 100644
--- a/packages/component/src/Activity/CarouselFilmStrip.js
+++ b/packages/component/src/Activity/CarouselFilmStrip.js
@@ -62,15 +62,7 @@ const ROOT_CSS = css({
 });
 
 const connectCarouselFilmStrip = (...selectors) => connectToWebChat(
-  ({
-    botAvatarInitials,
-    language,
-    userAvatarInitials
-  }) => ({
-    botAvatarInitials,
-    language,
-    userAvatarInitials
-  }),
+  ({ language }) => ({ language }),
   ...selectors
 )
 
@@ -79,16 +71,13 @@ const ConnectedCarouselFilmStrip = connectCarouselFilmStrip(
 )(
   ({
     activity,
-    botAvatarInitials,
     children,
     className,
     filmContext,
     showTimestamp,
     styleSet,
-    userAvatarInitials
   }) => {
     const fromUser = activity.from.role === 'user';
-    const initials = fromUser ? userAvatarInitials : botAvatarInitials;
 
     return (
       <div
@@ -99,16 +88,14 @@ const ConnectedCarouselFilmStrip = connectCarouselFilmStrip(
         ) }
         ref={ filmContext._setFilmStripRef }
       >
-        { !!initials &&
-          <Avatar className="avatar" fromUser={ fromUser }>{ initials }</Avatar>
-        }
+        <Avatar className="avatar" fromUser={ fromUser } />
         <div className="content">
           {
             !!activity.text &&
               <div className="message">
                 <Bubble
                   className="bubble"
-                  fromUser={ activity.from.role === 'user' }
+                  fromUser={ fromUser }
                 >
                   { children({
                     activity,
@@ -126,7 +113,7 @@ const ConnectedCarouselFilmStrip = connectCarouselFilmStrip(
               activity.attachments.map((attachment, index) =>
                 <li key={ index }>
                   <Bubble
-                    fromUser={ activity.from.role === 'user' }
+                    fromUser={ fromUser }
                     key={ index }
                   >
                     { children({ attachment }) }
diff --git a/packages/component/src/Activity/StackedLayout.js b/packages/component/src/Activity/StackedLayout.js
index 6e7024d875..19d6fb20d1 100644
--- a/packages/component/src/Activity/StackedLayout.js
+++ b/packages/component/src/Activity/StackedLayout.js
@@ -71,14 +71,11 @@ export default connectStackedLayout(
 )(
   ({
     activity,
-    botAvatarInitials,
     children,
     showTimestamp,
-    styleSet,
-    userAvatarInitials
+    styleSet
   }) => {
     const fromUser = activity.from.role === 'user';
-    const initials = fromUser ? userAvatarInitials : botAvatarInitials;
     const { state } = activity.channelData || {};
     const showSendStatus = state === SENDING || state === SEND_FAILED;
 
@@ -90,9 +87,10 @@ export default connectStackedLayout(
           { 'from-user': fromUser }
         ) }
       >
-        { !!initials &&
-          <Avatar className="avatar" fromUser={ fromUser }>{ initials }</Avatar>
-        }
+        <Avatar
+          className="avatar"
+          fromUser={ fromUser }
+        />
         <div className="content">
           {
             activity.type === 'typing' ?
diff --git a/packages/component/src/Composer.js b/packages/component/src/Composer.js
index 5b0e89b018..eec02f387e 100644
--- a/packages/component/src/Composer.js
+++ b/packages/component/src/Composer.js
@@ -2,6 +2,7 @@ import {
   Composer as ScrollToBottomComposer,
   FunctionContext as ScrollToBottomFunctionContext
 } from 'react-scroll-to-bottom';
+
 import { connect } from 'react-redux';
 import { css } from 'glamor';
 import memoize from 'memoize-one';
@@ -133,12 +134,36 @@ function createFocusSendBoxLogic({ sendBoxRef }) {
   };
 }
 
-function createStyleSetLogic({ styleSet, styleOptions }) {
+function createStyleSetLogic({ styleOptions, styleSet }) {
   return {
     styleSet: styleSetToClassNames(styleSet || createStyleSet(styleOptions))
   };
 }
 
+// TODO: [P3] Take this deprecation code out when releasing on or after 2019 December 11
+function patchPropsForAvatarInitials({ botAvatarInitials, userAvatarInitials, ...props }) {
+  // This code will take out "botAvatarInitials" and "userAvatarInitials" from props
+
+  let { styleOptions } = props;
+
+  if (botAvatarInitials) {
+    styleOptions = { ...styleOptions, botAvatarInitials };
+
+    console.warn('Web Chat: "botAvatarInitials" is deprecated. Please use "styleOptions.botAvatarInitials" instead.');
+  }
+
+  if (userAvatarInitials) {
+    styleOptions = { ...styleOptions, userAvatarInitials };
+
+    console.warn('Web Chat: "userAvatarInitials" is deprecated. Please use "styleOptions.userAvatarInitials" instead.');
+  }
+
+  return {
+    ...props,
+    styleOptions
+  };
+}
+
 function createLogic(props) {
   // This is a heavy function, and it is expected to be only called when there is a need to recreate business logic, e.g.
   // - User ID changed, causing all send* functions to be updated
@@ -151,6 +176,8 @@ function createLogic(props) {
   // 2. Filter out profanity
 
   // TODO: [P4] Revisit all members of context
+  props = patchPropsForAvatarInitials(props);
+
   return {
     ...props,
     ...createCardActionLogic(props),
@@ -235,7 +262,6 @@ class Composer extends React.Component {
         activityRenderer,
         adaptiveCardHostConfig,
         attachmentRenderer,
-        botAvatarInitials,
         children,
 
         // TODO: [P2] Add disable interactivity
@@ -247,7 +273,6 @@ class Composer extends React.Component {
         renderMarkdown,
         scrollToEnd,
         store,
-        userAvatarInitials,
         userID,
         webSpeechPonyfillFactory,
         ...propsForLogic
@@ -268,15 +293,12 @@ class Composer extends React.Component {
         adaptiveCardHostConfig: adaptiveCardHostConfig || defaultAdaptiveCardHostConfig(this.props.styleOptions),
         attachmentRenderer,
 
-        // TODO: [P2] Move avatar initials to style options
-        botAvatarInitials,
         groupTimestamp,
         disabled,
         grammars: grammars || EMPTY_ARRAY,
         renderMarkdown,
         scrollToEnd,
         store,
-        userAvatarInitials,
         webSpeechPonyfill: this.createWebSpeechPonyfill(webSpeechPonyfillFactory, referenceGrammarID)
       }
     );
@@ -337,7 +359,6 @@ ConnectedComposerWithStore.propTypes = {
   activityRenderer: PropTypes.func,
   adaptiveCardHostConfig: PropTypes.any,
   attachmentRenderer: PropTypes.func,
-  botAvatarInitials: PropTypes.string,
   groupTimestamp: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   disabled: PropTypes.bool,
   grammars: PropTypes.arrayOf(PropTypes.string),
@@ -347,7 +368,6 @@ ConnectedComposerWithStore.propTypes = {
   sendTimeout: PropTypes.number,
   sendTyping: PropTypes.bool,
   store: PropTypes.any,
-  userAvatarInitials: PropTypes.string,
   userID: PropTypes.string,
   webSpeechPonyfillFactory: PropTypes.func
 };
diff --git a/packages/component/src/Styles/StyleSet/Avatar.js b/packages/component/src/Styles/StyleSet/Avatar.js
index 96852ecef6..7266891e08 100644
--- a/packages/component/src/Styles/StyleSet/Avatar.js
+++ b/packages/component/src/Styles/StyleSet/Avatar.js
@@ -17,6 +17,13 @@ export default function createAvatarStyle({
     height: avatarSize,
     justifyContent: 'center',
     overflow: 'hidden',
-    width: avatarSize
+    position: 'relative',
+    width: avatarSize,
+
+    '& > .image': {
+      left: 0,
+      position: 'absolute',
+      top: 0
+    }
   };
 }
diff --git a/packages/component/src/Styles/defaultStyleSetOptions.js b/packages/component/src/Styles/defaultStyleSetOptions.js
index a6a471bf1e..029e96590c 100644
--- a/packages/component/src/Styles/defaultStyleSetOptions.js
+++ b/packages/component/src/Styles/defaultStyleSetOptions.js
@@ -3,11 +3,21 @@ const DEFAULT_ACCENT = '#0063B1';
 const DEFAULT_SUBTLE = '#767676'; // With contrast 4.5:1 to white
 
 const DEFAULT_OPTIONS = {
+  // Color and paddings
   accent: DEFAULT_ACCENT,
-  avatarSize: 40,
-
   backgroundColor: 'White',
+  paddingRegular: 10,
+  paddingWide: 20,
+  subtle: DEFAULT_SUBTLE,
+
+  // Avatar
+  avatarSize: 40,
+  botAvatarImage: '',
+  botAvatarInitials: '',
+  userAvatarImage: '',
+  userAvatarInitials: '',
 
+  // Bubble
   bubbleBackground: 'White',
   bubbleBorder: 'solid 1px #E6E6E6',
   bubbleBorderRadius: 2,
@@ -21,26 +31,20 @@ const DEFAULT_OPTIONS = {
   bubbleMinWidth: 250, // min screen width = 300px, Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
   bubbleTextColor: 'Black',
 
+  // Send box
   hideSendBox: false,
   hideUploadButton: false,
-
   microphoneButtonColorOnDictate: '#F33',
-
-  paddingRegular: 10,
-  paddingWide: 20,
-
   sendBoxButtonColor: '#767676',
   sendBoxButtonColorOnDisabled: '#CCC',
   sendBoxButtonColorOnFocus: '#333',
   sendBoxButtonColorOnHover: '#333',
-
   sendBoxHeight: 40,
 
   // Visually show spoken text
   showSpokenText: false,
 
-  subtle: DEFAULT_SUBTLE,
-
+  // Suggested actions
   suggestedActionBackground: 'White',
   suggestedActionBorder: `solid 2px ${ DEFAULT_ACCENT }`,
   suggestedActionBorderRadius: 0,
@@ -50,8 +54,10 @@ const DEFAULT_OPTIONS = {
   suggestedActionDisabledTextColor: DEFAULT_SUBTLE,
   suggestedActionHeight: 40,
 
+  // Timestamp
   timestampColor: DEFAULT_SUBTLE,
 
+  // Transcript overlay buttons (e.g. carousel and scroll to bottom)
   transcriptOverlayButtonBackground: 'rgba(0, 0, 0, .6)',
   transcriptOverlayButtonBackgroundOnFocus: 'rgba(0, 0, 0, .8)',
   transcriptOverlayButtonBackgroundOnHover: 'rgba(0, 0, 0, .8)',
@@ -59,6 +65,7 @@ const DEFAULT_OPTIONS = {
   transcriptOverlayButtonColorOnFocus: 'White',
   transcriptOverlayButtonColorOnHover: 'White',
 
+  // Video
   videoHeight: 270 // based on bubbleMaxWidth, 480 / 16 * 9 = 270
 };
 
diff --git a/samples/04.b.display-user-bot-images-styling/index.html b/samples/04.b.display-user-bot-images-styling/index.html
new file mode 100644
index 0000000000..6214b20882
--- /dev/null
+++ b/samples/04.b.display-user-bot-images-styling/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Web Chat: Avatar with images and initials</title>
+    <!--
+      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
+      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
+      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
+    -->
+    <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
+    <style>
+      html, body { height: 100% }
+      body { margin: 0 }
+
+      #webchat,
+      #webchat > * {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      (async function () {
+        // In this demo, we are using Direct Line token from MockBot.
+        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
+        // You should never put the Direct Line secret in the browser or client app.
+        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
+
+        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+        const { token } = await res.json();
+
+        const styleOptions = {
+          botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
+          botAvatarInitials: 'BF',
+          userAvatarImage: 'https://github.com/compulim.png?size=64',
+          userAvatarInitials: 'WC'
+        };
+
+        window.WebChat.renderWebChat({
+          directLine: window.WebChat.createDirectLine({ token }),
+          styleOptions
+        }, document.getElementById('webchat'));
+
+        document.querySelector('#webchat > *').focus();
+      })().catch(err => console.error(err));
+    </script>
+  </body>
+</html>
diff --git a/samples/04.display-user-bot-initials-styling/index.html b/samples/04.display-user-bot-initials-styling/index.html
index a84cb90a6e..93102da1f3 100644
--- a/samples/04.display-user-bot-initials-styling/index.html
+++ b/samples/04.display-user-bot-initials-styling/index.html
@@ -32,9 +32,11 @@
         const { token } = await res.json();
 
         window.WebChat.renderWebChat({
-          botAvatarInitials: 'BF',
           directLine: window.WebChat.createDirectLine({ token }),
-          userAvatarInitials: 'WC'
+          styleOptions: {
+            botAvatarInitials: 'BF',
+            userAvatarInitials: 'WC'
+          }
         }, document.getElementById('webchat'));
 
         document.querySelector('#webchat > *').focus();