beem-component 1.7.8 → 1.8.0

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

@@ -4,27 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmFeedPostComments = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _colors = require("../../colors");
-
 var _excluded = ["story", "state", "status", "image"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var BmFeedPost = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  flex-direction: column;\n  padding: 0.5rem;\n  width: ", ";\n  max-width: ", ";\n  margin-left: ", ";\n  background-color: ", ";\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem;\n  max-height: ", ";\n  height: ", ";\n"])), function (_ref) {
   var image = _ref.image;
   if (image) return '15vw';
@@ -35,21 +24,17 @@ var BmFeedPost = _styledComponents.default.div(_templateObject || (_templateObje
   return '20vw';
 }, function (_ref3) {
   var state = _ref3.state;
-
   if (state) {
     if (state === 'inbound') return '0rem';
     if (state === 'outbound') return 'auto';
   }
-
   return '0rem';
 }, function (_ref4) {
   var state = _ref4.state;
-
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey200, function (_ref5) {
   var image = _ref5.image;
@@ -60,27 +45,21 @@ var BmFeedPost = _styledComponents.default.div(_templateObject || (_templateObje
   if (image) return '10vw';
   return '100%';
 });
-
 var MainContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border-left: ", ";\n  background-color: ", ";\n  max-height: 80%;\n  height: 80%;\n"])), function (_ref7) {
   var status = _ref7.status;
-
   if (status) {
     if (status === 'comment') return "0.143rem solid ".concat(_colors.BmSecondaryGreen);
     if (status === 'story') return "0.143rem solid ".concat(_colors.BmSecondaryPurple);
   }
-
   return "0.143rem solid ".concat(_colors.BmSecondaryPurple);
 }, function (_ref8) {
   var state = _ref8.state;
-
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmTransparentBg30);
     if (state === 'outbound') return "".concat(_colors.BmTransparentBg30);
   }
-
   return "".concat(_colors.BmTransparentBg30);
 });
-
 var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  word-break: break-word;\n  > * {\n    margin-bottom: 0.5rem;\n    word-break: break-word;\n  }\n  width: ", ";\n  max-width: ", ";\n  padding: 0.5rem;\n"])), function (_ref9) {
   var state = _ref9.state;
   if (state && state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
@@ -95,23 +74,19 @@ var Content = _styledComponents.default.div(_templateObject3 || (_templateObject
   if (image) return '75%';
   return '100%';
 });
-
 var Image = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  max-width: 25%;\n  width: 25%;\n"])));
-
 BmFeedPost.Footer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  word-break: break-word;\n  > * {\n    word-break: break-word !important;\n  }\n  align-items: center;\n  margin-top: 0.5rem;\n  max-height: 20%;\n  height: 20%;\n  color: ", ";\n"])), function (_ref12) {
   var state = _ref12.state;
   if (state && state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
   if (state && state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   return "".concat(_colors.BmPrimaryBlack);
 });
-
 var BmFeedPostComments = function BmFeedPostComments(_ref13) {
   var story = _ref13.story,
-      state = _ref13.state,
-      status = _ref13.status,
-      image = _ref13.image,
-      rest = _objectWithoutProperties(_ref13, _excluded);
-
+    state = _ref13.state,
+    status = _ref13.status,
+    image = _ref13.image,
+    rest = _objectWithoutProperties(_ref13, _excluded);
   return story && /*#__PURE__*/_react.default.createElement(BmFeedPost, _extends({
     state: story.state
   }, rest, {
@@ -134,5 +109,4 @@ var BmFeedPostComments = function BmFeedPostComments(_ref13) {
     state: state
   }, story.footer));
 };
-
 exports.BmFeedPostComments = BmFeedPostComments;

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

@@ -4,186 +4,141 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.MessageState = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _icons = require("@material-ui/icons");
-
 var _FilePresent = _interopRequireDefault(require("@mui/icons-material/FilePresent"));
-
 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");
-
 var _sessionDetails = require("./sessionDetails");
-
 var _sessionTimeline = require("./sessionTimeline");
-
 var _colors = require("../../colors");
-
 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"];
-
+  _excluded2 = ["state", "src", "fileName"],
+  _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;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), ''
-/* border: 0.071rem solid ${BmGrey400}; */
-);
+var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), '' /* border: 0.071rem solid ${BmGrey400}; */);
 
 BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  padding: 0rem 1rem;\n  flex-grow: 1;\n  overflow: auto;\n  height: 100%;\n"])));
-
 var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n    margin-bottom: 0.5rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n  flex-grow: 1;\n  ", "\n"])), function (_ref) {
   var state = _ref.state;
-
   if (state === 'inbound') {
     return 'flex-start';
   }
-
   if (state === 'outbound') {
     return 'flex-end';
   }
-
   return 'row';
-}, ''
-/* border: 1px solid red; */
-);
+}, '' /* border: 1px solid red; */);
 
 var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 70%;\n  > * {\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n"])));
-
 var Messages = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0.5rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  word-break: break-word;\n  margin: 0rem;\n"])), function (_ref2) {
   var state = _ref2.state;
-
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 }, function (_ref3) {
   var state = _ref3.state;
-
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 }, function (_ref4) {
   var state = _ref4.state;
-
   if (state) {
     if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
     if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey200);
-
 var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  margin-left: ", ";\n  margin-top: 0.5rem;\n"])), function (_ref5) {
   var state = _ref5.state;
-
   if (state) {
     if (state === 'inbound') return '0px';
     if (state === 'outbound') return 'auto';
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 });
-
 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, {
       size: "small",
       user: "chatbot"
     });
   }
-
   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"
     });
   }
-
   if (session === 'sms') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "sms"
     });
   }
-}; // Start of File Attachment
-
+};
 
+// Start of File Attachment
 var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  cursor: pointer;\n  flex-direction: row;\n  padding: 1rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  > * {\n    &:last-child {\n      margin-left: auto;\n    }\n    :not(:last-child) {\n      margin-right: 0.5rem;\n    }\n  }\n  &&& > * {\n    align-items: center;\n    color: ", ";\n  }\n  ", "\n  ", "\n"])), function (_ref7) {
   var state = _ref7.state;
-
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 }, function (_ref8) {
   var state = _ref8.state;
-
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 }, function (_ref9) {
   var state = _ref9.state;
-
   if (state) {
     if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
     if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey200, function (_ref10) {
   var state = _ref10.state;
-
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
-
   return "".concat(_colors.BmPrimaryWhite);
-}, ''
-/* max-width: 100%; */
-, ''
-/* max-height: 100%; */
-);
+}, '' /* max-width: 100%; */, '' /* max-height: 100%; */);
 
 var BmFileAttachment = function BmFileAttachment(_ref11) {
   var state = _ref11.state,
-      file = _ref11.file,
-      src = _ref11.src,
-      fileName = _ref11.fileName,
-      onDownload = _ref11.onDownload,
-      link = _ref11.link,
-      rest = _objectWithoutProperties(_ref11, _excluded);
-
+    file = _ref11.file,
+    src = _ref11.src,
+    fileName = _ref11.fileName,
+    onDownload = _ref11.onDownload,
+    link = _ref11.link,
+    rest = _objectWithoutProperties(_ref11, _excluded);
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
@@ -194,43 +149,31 @@ var BmFileAttachment = function BmFileAttachment(_ref11) {
   }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_Download.default, null)
   })));
-}; // Start of Component for Images
-
-
+};
+// Start of Component for Images
 var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n"])), function (_ref12) {
   var state = _ref12.state;
-
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 }, function (_ref13) {
   var state = _ref13.state;
-
   if (state) {
     if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
     if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
-
   return "".concat(_colors.BmPrimaryWhite);
 }, _colors.BmGrey200);
-
 exports.BmImageWrapper = BmImageWrapper;
-
-var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ''
-/* Fix width */
-);
-
+var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), '' /* Fix width */);
 exports.BmImage = BmImage;
-
 var BmImageChat = function BmImageChat(_ref14) {
   var state = _ref14.state,
-      src = _ref14.src,
-      fileName = _ref14.fileName,
-      rest = _objectWithoutProperties(_ref14, _excluded2);
-
+    src = _ref14.src,
+    fileName = _ref14.fileName,
+    rest = _objectWithoutProperties(_ref14, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(BmImage, {
@@ -242,33 +185,31 @@ var BmImageChat = function BmImageChat(_ref14) {
     fileName: fileName
   }, rest))));
 };
-
 exports.BmImageChat = BmImageChat;
+var MessageState = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  @media all and (max-width: 960px) {\n    display: none;\n  }\n"])));
 
-var MessageState = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  @media all and (max-width: 960px) {\n    display: none;\n  }\n"]))); // End of Component for Images
-
-
+// End of Component for Images
 exports.MessageState = MessageState;
-
 BmChat.Details = function (_ref15) {
   var children = _ref15.children,
-      state = _ref15.state,
-      displayTime = _ref15.displayTime,
-      status = _ref15.status,
-      session = _ref15.session,
-      src = _ref15.src,
-      file = _ref15.file,
-      fileName = _ref15.fileName,
-      sessionDetails = _ref15.sessionDetails,
-      sessionTimeline = _ref15.sessionTimeline,
-      feedPostComments = _ref15.feedPostComments,
-      rest = _objectWithoutProperties(_ref15, _excluded3);
-
+    state = _ref15.state,
+    displayTime = _ref15.displayTime,
+    status = _ref15.status,
+    session = _ref15.session,
+    src = _ref15.src,
+    file = _ref15.file,
+    fileName = _ref15.fileName,
+    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 +237,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({
@@ -304,7 +246,6 @@ BmChat.Details = function (_ref15) {
     message: sessionDetails.message
   }, rest)));
 };
-
 BmChat.Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
 var _default = BmChat;
 exports.default = _default;

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

@@ -4,27 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ChatBody = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _EmojiEmotions = _interopRequireDefault(require("@mui/icons-material/EmojiEmotions"));
-
 var _AttachFile = _interopRequireDefault(require("@mui/icons-material/AttachFile"));
-
 var _Quickreply = _interopRequireDefault(require("@mui/icons-material/Quickreply"));
-
 var _Send = _interopRequireDefault(require("@mui/icons-material/Send"));
-
 var _iconStyles = require("../../iconStyles");
-
 var _chatBody = _interopRequireDefault(require("./chatBody"));
-
 var _input = require("../../input");
-
 var _chartImg = _interopRequireDefault(require("../../../assets/chart-img.png"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable import/no-anonymous-default-export */
 // TODO: ADD DESCRIPTION
 var _default = {
@@ -32,7 +21,6 @@ var _default = {
   title: 'components/Chat/MainChat/ChatBody'
 };
 exports.default = _default;
-
 var ChatBody = function ChatBody() {
   return /*#__PURE__*/_react.default.createElement(_chatBody.default, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Body, null, /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
     state: "outbound",
@@ -154,7 +142,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),
@@ -175,5 +173,4 @@ var ChatBody = function ChatBody() {
     size: "xlarge"
   }))));
 };
-
 exports.ChatBody = ChatBody;

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

@@ -4,38 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SessionDetails = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _colors = require("../../colors");
-
 var _excluded = ["message", "time"];
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var SessionDetailsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  text-align: center;\n  border-bottom: 0.071rem solid ", ";\n  margin: 1rem 0.5rem;\n"])), _colors.BmGrey200);
-
 var SessionDetails = function SessionDetails(_ref) {
   var message = _ref.message,
-      time = _ref.time,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    time = _ref.time,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(SessionDetailsWrapper, _extends({
     time: time,
     message: message
   }, rest), /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), message || /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), time || /*#__PURE__*/_react.default.createElement("p", null, "\xA0"));
 };
-
 exports.SessionDetails = SessionDetails;

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

@@ -4,41 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SessionTimeline = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _colors = require("../../colors");
-
 var _excluded = ["message", "time"];
-
 var _templateObject, _templateObject2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var SessionTimelineWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  margin-bottom: 0.5rem;\n  margin-top: 0.5rem;\n"])));
-
 var container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 0.714rem 0.714rem 0.714rem 0.714rem;\n  border: 0.071rem solid ", ";\n  padding: 0.5rem;\n  background-color: ", ";\n"])), _colors.BmBgGreyBlue, _colors.BmSecondaryBlue12);
-
 SessionTimelineWrapper.Container = container;
-
 var SessionTimeline = function SessionTimeline(_ref) {
   var message = _ref.message,
-      time = _ref.time,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    time = _ref.time,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(SessionTimelineWrapper, _extends({
     message: message
   }, rest), /*#__PURE__*/_react.default.createElement(SessionTimelineWrapper.Container, null, message || /*#__PURE__*/_react.default.createElement("p", null, "\xA0")));
 };
-
 exports.SessionTimeline = SessionTimeline;

package/dist/components/ChatComponents/ChatHeader/chatHeader.js

@@ -4,18 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmChatHeader = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 // import { BmGrey400 } from "../colors";
-var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", "\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), ''
-/* border: 0.071rem solid ${BmGrey400}; */
-);
 
+var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", "\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), '' /* border: 0.071rem solid ${BmGrey400}; */);
 exports.BmChatHeader = BmChatHeader;

package/dist/components/ChatComponents/ChatHeader/chatHeader.stories.js

@@ -4,22 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ChatHeader = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _buttons = require("../../Buttons/buttons");
-
 var _chatHeader = require("./chatHeader");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _chatHeader.BmChatHeader,
   title: 'components/Chat/MainChat/ChatHeader'
 };
 exports.default = _default;
-
 var ChatHeader = function ChatHeader() {
   return /*#__PURE__*/_react.default.createElement(_chatHeader.BmChatHeader, null, /*#__PURE__*/_react.default.createElement("h2", null, "Contact Name"), /*#__PURE__*/_react.default.createElement("p", null, "Last seen: 00:00"), /*#__PURE__*/_react.default.createElement("div", {
     className: "chat-header-buttons"
@@ -29,5 +23,4 @@ var ChatHeader = function ChatHeader() {
     size: "medium"
   }, "End Session")));
 };
-
 exports.ChatHeader = ChatHeader;

package/dist/components/ChatComponents/ColorPicker/colorPicker.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmColorPicker = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var BmColorPicker = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 1.429rem;\n  height: 1.429rem;\n  border-radius: 50%;\n  background: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), function (props) {
   return props.color ? props.color : 'green';
 });
-
 exports.BmColorPicker = BmColorPicker;