beem-component 1.4.7 → 1.5.0

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

@@ -19,11 +19,13 @@ var _avatars = _interopRequireDefault(require("../../Avatars/avatars"));
 
 var _iconStyles = require("../../iconStyles");
 
+var _sessionDetails = require("./sessionDetails");
+
 var _colors = require("../../colors");
 
 var _excluded = ["state", "file", "src", "fileName", "onDownload"],
     _excluded2 = ["state", "src", "fileName"],
-    _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName"];
+    _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
@@ -37,25 +39,27 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 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"])), ''
+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"])), function (_ref) {
+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 === "inbound") {
+    return "flex-start";
   }
 
-  if (state === 'outbound') {
-    return 'flex-end';
+  if (state === "outbound") {
+    return "flex-end";
   }
 
-  return 'row';
-});
+  return "row";
+}, ""
+/* 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"])));
 
@@ -63,8 +67,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref2.state;
 
   if (state) {
-    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
-    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
+    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -72,8 +76,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref3.state;
 
   if (state) {
-    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
-    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -81,8 +85,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   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';
+    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);
@@ -93,14 +97,14 @@ var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_tem
 var handleState = function handleState(_ref5) {
   var session = _ref5.session;
 
-  if (session === 'bot') {
+  if (session === "bot") {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "chatbot"
     });
   }
 
-  if (session === 'live') {
+  if (session === "live") {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "employee"
@@ -113,8 +117,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref6.state;
 
   if (state) {
-    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
-    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
+    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -122,8 +126,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref7.state;
 
   if (state) {
-    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
-    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -131,8 +135,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref8.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';
+    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);
@@ -140,14 +144,14 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref9.state;
 
   if (state) {
-    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
-    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === "inbound") return "".concat(_colors.BmPrimaryBlue);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
-}, ''
+}, ""
 /* max-width: 100%; */
-, ''
+, ""
 /* max-height: 100%; */
 );
 
@@ -174,8 +178,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
   var state = _ref11.state;
 
   if (state) {
-    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
-    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
+    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -183,8 +187,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
   var state = _ref12.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';
+    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);
@@ -192,7 +196,7 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
 
 exports.BmImageWrapper = BmImageWrapper;
 
-var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ''
+var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ""
 /* Fix width */
 );
 
@@ -232,11 +236,15 @@ BmChat.Details = function (_ref14) {
       src = _ref14.src,
       file = _ref14.file,
       fileName = _ref14.fileName,
+      sessionDetails = _ref14.sessionDetails,
       rest = _objectWithoutProperties(_ref14, _excluded3);
 
-  return /*#__PURE__*/_react.default.createElement(Details, _extends({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
+    time: sessionDetails.time,
+    message: sessionDetails.message
+  }, rest)), /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
-  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
+  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "inbound" && session && handleState({
     state: state,
     session: session
   })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
@@ -249,18 +257,18 @@ BmChat.Details = function (_ref14) {
     file: file,
     fileName: fileName,
     state: state
-  }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === 'sent' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === "sent" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
     color: "".concat(_colors.BmSecondaryDarkGreen),
     size: "small"
-  }), status === 'failed' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }), status === "failed" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
     color: "".concat(_colors.BmPrimaryBlack),
     size: "small"
-  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'outbound' && session && handleState({
+  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "outbound" && session && handleState({
     state: state,
     session: session
-  })));
+  }))));
 };
 
 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"])));

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

@@ -38,7 +38,11 @@ var ChatBody = function ChatBody() {
     state: "inbound",
     session: "bot",
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
-    status: "sent"
+    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, "Inbound Text Message")), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
     state: "inbound",
     session: "live",

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SessionDetails = void 0;
+
+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 || 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: 0.5rem;\n"])), _colors.BmGrey200);
+
+var SessionDetails = function SessionDetails(_ref) {
+  var message = _ref.message,
+      time = _ref.time,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(SessionDetailsWrapper, _extends({
+    time: time,
+    message: message
+  }, rest), /*#__PURE__*/React.createElement("p", null, "\xA0"), message || /*#__PURE__*/React.createElement("p", null, "\xA0"), time || /*#__PURE__*/React.createElement("p", null, "\xA0"));
+};
+
+exports.SessionDetails = SessionDetails;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.4.7",
+    "version": "1.5.0",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -1,13 +1,67 @@
 import React from "react";
-import { BmTag, GlobalStyle } from "./lib/components";
+import { GlobalStyle, BmChat } from "./lib/components";
+import image from "../src/lib/assets/chart-img.png";
 
 const App = () => {
   return (
     <>
       <GlobalStyle />
-      <BmTag variant="success" closeButton onHide={() => console.log("aaaaa")}>
-        <p>hello</p>
-      </BmTag>
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state="inbound"
+            session="bot"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+          >
+            <p>Inbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            fileName={<p>chat.png</p>}
+            src={image}
+            sessionDetails={{ message: <h3>tejal</h3>, time: <p>today</p> }}
+          />
+          <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            status="failed"
+            fileName={<p>file.csv</p>}
+            file={image}
+          />
+          <BmChat.Details
+            state="outbound"
+            session="bot"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+          >
+            <p>Outbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="outbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            fileName={<p>chat.png</p>}
+            src={image}
+          />
+          <BmChat.Details
+            state="outbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            status="failed"
+            fileName={<p>file.csv</p>}
+            file={image}
+            onDownload={() => {
+              alert("hello");
+            }}
+          />
+        </BmChat.Body>
+      </BmChat>
     </>
   );
 };

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

@@ -1,24 +1,24 @@
-import React from 'react';
-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 BmAvatar from '../../Avatars/avatars';
-import { BmIcons } from '../../iconStyles';
-
+import React from "react";
+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 BmAvatar from "../../Avatars/avatars";
+import { BmIcons } from "../../iconStyles";
+import { SessionDetails } from "./sessionDetails";
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
   BmPrimaryBlack,
   BmSecondaryDarkGreen,
   BmGrey200,
-} from '../../colors';
+} from "../../colors";
 
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
+  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
 `;
 
 BmChat.Body = styled.div`
@@ -33,13 +33,13 @@ BmChat.Body = styled.div`
 const Details = styled.div`
   display: flex;
   justify-content: ${({ state }) => {
-    if (state === 'inbound') {
-      return 'flex-start';
+    if (state === "inbound") {
+      return "flex-start";
     }
-    if (state === 'outbound') {
-      return 'flex-end';
+    if (state === "outbound") {
+      return "flex-end";
     }
-    return 'row';
+    return "row";
   }};
   > *:not(:last-child) {
     margin-right: 1rem;
@@ -49,6 +49,7 @@ const Details = styled.div`
   word-wrap: break-word !important;
   margin: 0rem;
   flex-grow: 1;
+  ${"" /* border: 1px solid red; */}
 `;
 
 const MessageDetails = styled.div`
@@ -68,22 +69,22 @@ const Messages = styled.div`
   padding: 0.5rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === 'inbound') return `${BmPrimaryWhite}`;
-      if (state === 'outbound') return `${BmPrimaryBlue}`;
+      if (state === "inbound") return `${BmPrimaryWhite}`;
+      if (state === "outbound") return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   color: ${({ state }) => {
     if (state) {
-      if (state === 'inbound') return `${BmPrimaryBlack}`;
-      if (state === 'outbound') return `${BmPrimaryWhite}`;
+      if (state === "inbound") return `${BmPrimaryBlack}`;
+      if (state === "outbound") return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ 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';
+      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
+      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -103,11 +104,11 @@ const MessagesSubDetails = styled.div`
 `;
 
 const handleState = ({ session }) => {
-  if (session === 'bot') {
-    return <BmAvatar size='small' user='chatbot' />;
+  if (session === "bot") {
+    return <BmAvatar size="small" user="chatbot" />;
   }
-  if (session === 'live') {
-    return <BmAvatar size='small' user='employee' />;
+  if (session === "live") {
+    return <BmAvatar size="small" user="employee" />;
   }
 };
 
@@ -119,22 +120,22 @@ const FileAttachmentWrapper = styled.div`
   padding: 1rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === 'inbound') return `${BmPrimaryWhite}`;
-      if (state === 'outbound') return `${BmPrimaryBlue}`;
+      if (state === "inbound") return `${BmPrimaryWhite}`;
+      if (state === "outbound") return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   color: ${({ state }) => {
     if (state) {
-      if (state === 'inbound') return `${BmPrimaryBlack}`;
-      if (state === 'outbound') return `${BmPrimaryWhite}`;
+      if (state === "inbound") return `${BmPrimaryBlack}`;
+      if (state === "outbound") return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ 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';
+      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
+      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -151,14 +152,14 @@ const FileAttachmentWrapper = styled.div`
     align-items: center;
     color: ${({ state }) => {
       if (state) {
-        if (state === 'inbound') return `${BmPrimaryBlue}`;
-        if (state === 'outbound') return `${BmPrimaryWhite}`;
+        if (state === "inbound") return `${BmPrimaryBlue}`;
+        if (state === "outbound") return `${BmPrimaryWhite}`;
       }
       return `${BmPrimaryWhite}`;
     }};
   }
-  ${'' /* max-width: 100%; */}
-  ${'' /* max-height: 100%; */}
+  ${"" /* max-width: 100%; */}
+  ${"" /* max-height: 100%; */}
 `;
 
 const BmFileAttachment = ({
@@ -183,15 +184,15 @@ export const BmImageWrapper = styled.div`
   flex-direction: column;
   color: ${({ state }) => {
     if (state) {
-      if (state === 'inbound') return `${BmPrimaryBlack}`;
-      if (state === 'outbound') return `${BmPrimaryWhite}`;
+      if (state === "inbound") return `${BmPrimaryBlack}`;
+      if (state === "outbound") return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ 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';
+      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
+      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -199,7 +200,7 @@ export const BmImageWrapper = styled.div`
 `;
 
 export const BmImage = styled.img`
-  ${'' /* Fix width */}
+  ${"" /* Fix width */}
   width: 100%;
   object-fit: cover;
   flex-grow: 1;
@@ -209,7 +210,7 @@ export const BmImageChat = ({ state, src, fileName, ...rest }) => {
   return (
     <>
       <BmImageWrapper state={state} {...rest}>
-        <BmImage src={src} alt='src' />
+        <BmImage src={src} alt="src" />
         {fileName && (
           <BmFileAttachment
             state={state}
@@ -240,48 +241,67 @@ BmChat.Details = ({
   src,
   file,
   fileName,
+  sessionDetails,
   ...rest
 }) => {
   return (
-    <Details state={state} {...rest}>
-      {/* Adding for mobile */}
-      <MessageState>
-        {state === 'inbound' && session && handleState({ state, session })}
-      </MessageState>
-      <MessageDetails>
-        {/* For Images */}
-        {src && (
-          <BmImageChat state={state} src={src} fileName={fileName} {...rest} />
-        )}
-        {/* For Messages */}
-        {children && <Messages state={state}>{children}</Messages>}
-        {/* For files */}
-        {file && (
-          <BmFileAttachment
-            file={file}
-            fileName={fileName}
-            state={state}
-            {...rest}
-          />
-        )}
-        <MessagesSubDetails>
-          {displayTime && displayTime}
-          {status === 'sent' && (
-            <BmIcons
-              icon={<DoneAll />}
-              color={`${BmSecondaryDarkGreen}`}
-              size='small'
+    <>
+      {sessionDetails && (
+        <SessionDetails
+          time={sessionDetails.time}
+          message={sessionDetails.message}
+          {...rest}
+        />
+      )}
+      <Details state={state} {...rest}>
+        {/* Adding for mobile */}
+        <MessageState>
+          {state === "inbound" && session && handleState({ state, session })}
+        </MessageState>
+        <MessageDetails>
+          {/* For Images */}
+          {src && (
+            <BmImageChat
+              state={state}
+              src={src}
+              fileName={fileName}
+              {...rest}
             />
           )}
-          {status === 'failed' && (
-            <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size='small' />
+          {/* For Messages */}
+          {children && <Messages state={state}>{children}</Messages>}
+          {/* For files */}
+          {file && (
+            <BmFileAttachment
+              file={file}
+              fileName={fileName}
+              state={state}
+              {...rest}
+            />
           )}
-        </MessagesSubDetails>
-      </MessageDetails>
-      <MessageState>
-        {state === 'outbound' && session && handleState({ state, session })}
-      </MessageState>
-    </Details>
+          <MessagesSubDetails>
+            {displayTime && displayTime}
+            {status === "sent" && (
+              <BmIcons
+                icon={<DoneAll />}
+                color={`${BmSecondaryDarkGreen}`}
+                size="small"
+              />
+            )}
+            {status === "failed" && (
+              <BmIcons
+                icon={<Done />}
+                color={`${BmPrimaryBlack}`}
+                size="small"
+              />
+            )}
+          </MessagesSubDetails>
+        </MessageDetails>
+        <MessageState>
+          {state === "outbound" && session && handleState({ state, session })}
+        </MessageState>
+      </Details>
+    </>
   );
 };
 

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

@@ -23,6 +23,7 @@ export const ChatBody = () => {
           session='bot'
           displayTime={<p>12:00pm</p>}
           status='sent'
+          sessionDetails={{ message: <h3>Session Message</h3>, time: <p>12:00pm</p> }}
         >
           <p>Inbound Text Message</p>
         </BmChat.Details>

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

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { BmGrey200 } from "../../colors";
+
+const SessionDetailsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  border-bottom: 0.071rem solid ${BmGrey200};
+  margin: 0.5rem;
+`;
+
+export const SessionDetails = ({ message, time, ...rest }) => {
+  return (
+    <SessionDetailsWrapper time={time} message={message} {...rest}>
+      <p>&nbsp;</p>
+      {message || <p>&nbsp;</p>}
+      {time || <p>&nbsp;</p>}
+    </SessionDetailsWrapper>
+  );
+};