Merge pull request #807 from botpress/display-users-avatar

fix(webchat): display user's avatar and name if available (resolve #803)

docs/recipes/embedding.md

@@ -61,6 +61,8 @@ window.botpressWebChat.init({
   backgroundColor: '#ffffff', // Color of the background
   textColorOnBackground: '#666666', // Color of the text on the background
   foregroundColor: '#0176ff', // Element background color (header, composer, button..)
-  textColorOnForeground: '#ffffff' // Element text color (header, composer, button..)
+  textColorOnForeground: '#ffffff', // Element text color (header, composer, button..)
+  showUserName: false, // Whether or not to show the user's name
+  showUserAvatar: false // Whether or not to show the user's avatar
 })
 ```

packages/channels/botpress-channel-web/README.md

@@ -246,7 +246,9 @@ const config = {
   backgroundColor: '#ffffff',
   textColorOnBackground: '#666666',
   foregroundColor: '#000000',
-  textColorOnForeground: '#ffffff'
+  textColorOnForeground: '#ffffff',
+  showUserName: false,
+  showUserAvatar: false
 }
 
 bp.createShortlink('chat', '/lite', {
@@ -283,7 +285,9 @@ window.botpressWebChat.init({
   backgroundColor: '#ffffff', // Color of the background
   textColorOnBackground: '#666666', // Color of the text on the background
   foregroundColor: '#0176ff', // Element background color (header, composer, button..)
-  textColorOnForeground: '#ffffff' // Element text color (header, composer, button..)
+  textColorOnForeground: '#ffffff', // Element text color (header, composer, button..)
+  showUserName: false, // Whether or not to show the user's name
+  showUserAvatar: false // Whether or not to show the user's avatar
 })
 ```
 

packages/channels/botpress-channel-web/src/views/web/index.jsx

@@ -37,6 +37,8 @@ const defaultOptions = {
   foregroundColor: '#000000',
   textColorOnForeground: '#ffffff',
   enableReset: false,
+  showUserName: false,
+  showUserAvatar: false,
   botConvoTitle: 'Botpress Webchat'
 }
 

packages/channels/botpress-channel-web/src/views/web/messages/index.jsx

@@ -19,6 +19,10 @@ const TIME_BETWEEN_DATES = 10 // 10 minutes
 
 class MessageGroup extends Component {
   renderAvatar() {
+    if (!this.props.isBot && !this.props.avatarUrl) {
+      return
+    }
+
     let content = <BotAvatar foregroundColor={this.props.fgColor} />
 
     if (this.props.avatarUrl) {
@@ -33,21 +37,15 @@ class MessageGroup extends Component {
   }
 
   render() {
-    const sample = this.props.messages[0]
-    const isBot = !sample.userId
-
-    const className = classnames(style.message, {
-      [style.user]: !isBot
-    })
-
+    const className = classnames(style.message, { [style.user]: !this.props.isBot })
     const bubbleColor = this.props.fgColor
     const textColor = this.props.textColor
 
     return (
       <div className={className}>
-        {isBot && this.renderAvatar()}
+        {this.renderAvatar()}
         <div className={style['message-container']}>
-          {isBot && <div className={style['info-line']}>{sample.full_name}</div>}
+          {this.props.showUserName && <div className={style['info-line']}>{this.props.userName}</div>}
           <div className={style.group}>
             {this.props.messages.map((data, i) => {
               return (
@@ -168,13 +166,19 @@ export default class MessageList extends Component {
           const isDateNeeded =
             !groups[i - 1] || differenceInMinutes(new Date(groupDate), new Date(lastDate)) > TIME_BETWEEN_DATES
 
+          const [{ userId, full_name: userName, avatar_url: avatarUrl }] = group
+
           return (
             <div key={i}>
               {isDateNeeded ? this.renderDate(group[0].sent_on) : null}
               <MessageGroup
-                avatarUrl={this.props.avatarUrl}
+                isBot={!userId}
+                avatarUrl={userId ? this.props.showUserAvatar && avatarUrl : this.props.botAvatarUrl}
+                userName={userName}
                 fgColor={this.props.fgColor}
                 textColor={this.props.textColor}
+                showUserAvatar={this.props.showUserAvatar}
+                showUserName={this.props.showUserName}
                 key={`msg-group-${i}`}
                 onLoginPromptSend={this.props.onLoginPromptSend}
                 isLastGroup={i >= groups.length - 1}

packages/channels/botpress-channel-web/src/views/web/side/index.jsx

@@ -182,7 +182,7 @@ export default class Side extends React.Component {
             <svg width="18" height="17" viewBox="0 0 18 17" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M8.455 16.5c-.19 0-.378-.076-.522-.226-.29-.303-.29-.792 0-1.093l7.66-8.013c.57-.597.885-1.392.885-2.236 0-.844-.315-1.638-.886-2.235-1.18-1.233-3.097-1.232-4.275 0L2.433 11.99c-.5.525-.742 1.03-.715 1.502.026.46.303.815.467.985.275.29.573.41.908.364.42-.054.903-.356 1.398-.874l6.973-7.295c.288-.3.755-.3 1.043 0 .29.303.29.793 0 1.093l-6.97 7.296c-.74.773-1.5 1.215-2.26 1.314-.797.104-1.535-.175-2.135-.804-.537-.562-.856-1.267-.896-1.985-.054-.933.332-1.836 1.144-2.686l8.885-9.297c1.754-1.836 4.61-1.836 6.363 0 .85.888 1.318 2.07 1.318 3.328s-.468 2.44-1.318 3.33l-7.66 8.014c-.143.15-.332.226-.52.226z"
-                fill-rule="evenodd"
+                fillRule="evenodd"
               />
             </svg>
           </i>
@@ -264,7 +264,9 @@ export default class Side extends React.Component {
       messages: this.props.currentConversation && this.props.currentConversation.messages,
       fgColor: this.props.config && this.props.config.foregroundColor,
       textColor: this.props.config && this.props.config.textColorOnForeground,
-      avatarUrl: this.props.config && this.props.config.botAvatarUrl,
+      botAvatarUrl: this.props.config && this.props.config.botAvatarUrl,
+      showUserName: this.props.config && this.props.config.showUserName,
+      showUserAvatar: this.props.config && this.props.config.showUserAvatar,
       onQuickReplySend: this.props.onQuickReplySend,
       onFormSend: this.props.onFormSend,
       onFileUploadSend: this.props.onFileUploadSend,