@papercups-io/chat-widget - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

dist/index.js

@@ -101,3 +101,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-  var name = user.name,
+  var display_name = user.display_name,
+      full_name = user.full_name,
       email = user.email;
@@ -108,10 +109,50 @@
 
-  return name || username || 'Agent';
+  return display_name || full_name || username || 'Agent';
 };
 
-var ChatMessage = function ChatMessage(_ref) {
-  var message = _ref.message,
-      isMe = _ref.isMe,
-      isLastInGroup = _ref.isLastInGroup,
-      shouldDisplayTimestamp = _ref.shouldDisplayTimestamp;
+var SenderAvatar = function SenderAvatar(_ref) {
+  var name = _ref.name,
+      user = _ref.user,
+      isBot = _ref.isBot;
+  var profilePhotoUrl = user && user.profile_photo_url;
+
+  if (profilePhotoUrl) {
+    return React.createElement(themeUi.Box, {
+      mr: 2,
+      style: {
+        height: 32,
+        width: 32,
+        borderRadius: '50%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        backgroundImage: "url(" + profilePhotoUrl + ")"
+      }
+    });
+  }
+
+  return React.createElement(themeUi.Flex, {
+    mr: 2,
+    sx: {
+      bg: isBot ? 'gray' : 'primary',
+      height: 32,
+      width: 32,
+      borderRadius: '50%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: '#fff'
+    }
+  }, isBot ? React.createElement(BotIcon, {
+    fill: 'background',
+    height: 16,
+    width: 16
+  }) : name.slice(0, 1).toUpperCase());
+};
+
+var ChatMessage = function ChatMessage(_ref2) {
+  var message = _ref2.message,
+      isMe = _ref2.isMe,
+      isLastInGroup = _ref2.isLastInGroup,
+      shouldDisplayTimestamp = _ref2.shouldDisplayTimestamp;
   var body = message.body,
@@ -164,18 +205,7 @@ created_at = message.created_at,
     }
-  }, React.createElement(themeUi.Flex, {
-    mr: 2,
-    sx: {
-      bg: isBot ? 'gray' : 'primary',
-      height: 32,
-      width: 32,
-      borderRadius: '50%',
-      justifyContent: 'center',
-      alignItems: 'center',
-      color: '#fff'
-    }
-  }, isBot ? React.createElement(BotIcon, {
-    fill: 'background',
-    height: 16,
-    width: 16
-  }) : identifer.slice(0, 1).toUpperCase()), React.createElement(themeUi.Box, {
+  }, React.createElement(SenderAvatar, {
+    name: identifer,
+    user: user,
+    isBot: isBot
+  }), React.createElement(themeUi.Box, {
     px: '14px',
@@ -182,0 +212,0 @@ py: 2,

dist/index.modern.js

@@ -99,3 +99,4 @@ import React from 'react';
 
-  var name = user.name,
+  var display_name = user.display_name,
+      full_name = user.full_name,
       email = user.email;
@@ -106,10 +107,50 @@
 
-  return name || username || 'Agent';
+  return display_name || full_name || username || 'Agent';
 };
 
-var ChatMessage = function ChatMessage(_ref) {
-  var message = _ref.message,
-      isMe = _ref.isMe,
-      isLastInGroup = _ref.isLastInGroup,
-      shouldDisplayTimestamp = _ref.shouldDisplayTimestamp;
+var SenderAvatar = function SenderAvatar(_ref) {
+  var name = _ref.name,
+      user = _ref.user,
+      isBot = _ref.isBot;
+  var profilePhotoUrl = user && user.profile_photo_url;
+
+  if (profilePhotoUrl) {
+    return React.createElement(Box, {
+      mr: 2,
+      style: {
+        height: 32,
+        width: 32,
+        borderRadius: '50%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        backgroundImage: "url(" + profilePhotoUrl + ")"
+      }
+    });
+  }
+
+  return React.createElement(Flex, {
+    mr: 2,
+    sx: {
+      bg: isBot ? 'gray' : 'primary',
+      height: 32,
+      width: 32,
+      borderRadius: '50%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: '#fff'
+    }
+  }, isBot ? React.createElement(BotIcon, {
+    fill: 'background',
+    height: 16,
+    width: 16
+  }) : name.slice(0, 1).toUpperCase());
+};
+
+var ChatMessage = function ChatMessage(_ref2) {
+  var message = _ref2.message,
+      isMe = _ref2.isMe,
+      isLastInGroup = _ref2.isLastInGroup,
+      shouldDisplayTimestamp = _ref2.shouldDisplayTimestamp;
   var body = message.body,
@@ -162,18 +203,7 @@ created_at = message.created_at,
     }
-  }, React.createElement(Flex, {
-    mr: 2,
-    sx: {
-      bg: isBot ? 'gray' : 'primary',
-      height: 32,
-      width: 32,
-      borderRadius: '50%',
-      justifyContent: 'center',
-      alignItems: 'center',
-      color: '#fff'
-    }
-  }, isBot ? React.createElement(BotIcon, {
-    fill: 'background',
-    height: 16,
-    width: 16
-  }) : identifer.slice(0, 1).toUpperCase()), React.createElement(Box, {
+  }, React.createElement(SenderAvatar, {
+    name: identifer,
+    user: user,
+    isBot: isBot
+  }), React.createElement(Box, {
     px: '14px',
@@ -180,0 +210,0 @@ py: 2,

dist/utils.d.ts

 export declare type User = {
     id: number;
     email: string;
-    name?: string;
+    display_name?: string;
+    full_name?: string;
+    profile_photo_url?: string;
 };
@@ -6,0 +8,0 @@ export declare type Message = {

package.json

 {
   "name": "@papercups-io/chat-widget",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Papercups chat widget",
@@ -5,0 +5,0 @@ "author": "reichert621",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

248241

increased by1.84%

Lines of code

3042

increased by1.88%

No dependency changes