beem-component 1.7.8 → 1.7.9

package/dist/components/ChatComponents/ChatBody/chatBody.js

@@ -15,6 +15,8 @@ var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _reactAvatar = _interopRequireDefault(require("react-avatar"));
+
 var _avatars = _interopRequireDefault(require("../../Avatars/avatars"));
 
 var _iconStyles = require("../../iconStyles");
@@ -29,7 +31,7 @@ var _FeedPostComments = require("./FeedPostComments");
 
 var _excluded = ["state", "file", "src", "fileName", "onDownload", "link"],
     _excluded2 = ["state", "src", "fileName"],
-    _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments"];
+    _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
@@ -108,7 +110,8 @@ var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_tem
 });
 
 var handleState = function handleState(_ref6) {
-  var session = _ref6.session;
+  var session = _ref6.session,
+      agentName = _ref6.agentName;
 
   if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
@@ -118,6 +121,14 @@ var handleState = function handleState(_ref6) {
   }
 
   if (session === 'live') {
+    if (agentName) {
+      return /*#__PURE__*/_react.default.createElement(_reactAvatar.default, {
+        name: agentName,
+        size: "25px",
+        round: true
+      });
+    }
+
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "employee"
@@ -262,13 +273,15 @@ BmChat.Details = function (_ref15) {
       sessionDetails = _ref15.sessionDetails,
       sessionTimeline = _ref15.sessionTimeline,
       feedPostComments = _ref15.feedPostComments,
+      agentName = _ref15.agentName,
       rest = _objectWithoutProperties(_ref15, _excluded3);
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
     state: state,
-    session: session
+    session: session,
+    agentName: agentName
   })), /*#__PURE__*/_react.default.createElement(MessageDetails, {
     feedPostComments: feedPostComments
   }, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
@@ -296,7 +309,8 @@ BmChat.Details = function (_ref15) {
     size: "small"
   }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'outbound' && session && handleState({
     state: state,
-    session: session
+    session: session,
+    agentName: agentName
   }))), sessionTimeline && /*#__PURE__*/_react.default.createElement(_sessionTimeline.SessionTimeline, _extends({
     message: sessionTimeline.message
   }, rest)), sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({

package/dist/components/ChatComponents/ChatBody/chatBody.stories.js

@@ -154,7 +154,17 @@ var ChatBody = function ChatBody() {
     onDownload: function onDownload() {
       alert('hello');
     }
-  })), /*#__PURE__*/_react.default.createElement(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
+    agentName: "Agent Name",
+    state: "outbound",
+    session: "live",
+    displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
+    status: "sent",
+    sessionDetails: {
+      message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
+      time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Outbound Text Message"))), /*#__PURE__*/_react.default.createElement(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "chat-footer"
   }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_EmojiEmotions.default, null),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.7.8",
+    "version": "1.7.9",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
@@ -43,7 +43,9 @@
         "polished": "^4.1.3",
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
+        "react-avatar": "^5.0.3",
         "react-dom": "^17.0.2",
+        "react-lettered-avatar": "^1.0.2",
         "react-router-dom": "^5.3.0",
         "react-scripts": "^5.0.1",
         "save": "^2.4.0",

package/src/App.js

@@ -102,6 +102,34 @@ const Chat = () => {
               status: 'story',
             }}
           />
+          <BmChat.Details
+            agentName="Agent Name"
+            state="outbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+          >
+            <p>Outbound Text Message2</p>
+          </BmChat.Details>
+
+          <BmChat.Details
+            agentName="Test Agent"
+            state="outbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+          >
+            <p>Outbound Text Message2</p>
+          </BmChat.Details>
+
           <BmChat.Details
             state="inbound"
             session="sms"

package/src/lib/components/ChatComponents/ChatBody/chatBody.js

@@ -4,10 +4,12 @@ import { Done, DoneAll } from '@material-ui/icons';
 import FilePresentIcon from '@mui/icons-material/FilePresent';
 import DownloadIcon from '@mui/icons-material/Download';
 import styled from 'styled-components';
+import Avatar from 'react-avatar';
 import BmAvatar from '../../Avatars/avatars';
 import { BmIcons } from '../../iconStyles';
 import { SessionDetails } from './sessionDetails';
 import { SessionTimeline } from './sessionTimeline';
+
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -113,11 +115,14 @@ const MessagesSubDetails = styled.div`
   margin-top: 0.5rem;
 `;
 
-const handleState = ({ session }) => {
+const handleState = ({ session, agentName }) => {
   if (session === 'bot') {
     return <BmAvatar size="small" user="chatbot" />;
   }
   if (session === 'live') {
+    if (agentName) {
+      return <Avatar name={agentName} size="25px" round />;
+    }
     return <BmAvatar size="small" user="employee" />;
   }
   if (session === 'sms') {
@@ -261,6 +266,7 @@ BmChat.Details = ({
   sessionDetails,
   sessionTimeline,
   feedPostComments,
+  agentName,
   ...rest
 }) => {
   return (
@@ -268,7 +274,9 @@ BmChat.Details = ({
       <Details state={state} {...rest}>
         {/* Adding for mobile */}
         <MessageState>
-          {state === 'inbound' && session && handleState({ state, session })}
+          {state === 'inbound' &&
+            session &&
+            handleState({ state, session, agentName })}
         </MessageState>
         <MessageDetails feedPostComments={feedPostComments}>
           {/* For Images */}
@@ -317,7 +325,9 @@ BmChat.Details = ({
           </MessagesSubDetails>
         </MessageDetails>
         <MessageState>
-          {state === 'outbound' && session && handleState({ state, session })}
+          {state === 'outbound' &&
+            session &&
+            handleState({ state, session, agentName })}
         </MessageState>
       </Details>
 

package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js

@@ -147,6 +147,19 @@ export const ChatBody = () => {
             alert('hello');
           }}
         />
+        <BmChat.Details
+          agentName="Agent Name"
+          state="outbound"
+          session="live"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          sessionDetails={{
+            message: <h3>Session Message</h3>,
+            time: <p>12:00pm</p>,
+          }}
+        >
+          <p>Outbound Text Message</p>
+        </BmChat.Details>
       </BmChat.Body>
       <BmChat.Footer>
         <div className="chat-footer">