beem-component 1.6.9 → 1.7.2

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmFeedPostComments = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _cards = _interopRequireDefault(require("../../Cards/cards"));
+
+var _excluded = ["story", "state"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 Image = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: 30%;\n  width: 30%;\n"])));
+
+var LinkText = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: 70%;\n  width: 70%;\n  align-items: center;\n  > * {\n    word-wrap: break-word !important;\n    word-break: break-word;\n  }\n"])));
+
+var Wrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  word-wrap: break-word !important;\n  word-break: break-word;\n  > * {\n    word-wrap: break-word !important;\n    word-break: break-word !important;\n  }\n"])));
+
+var CardWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 50%;\n  max-width: 50%;\n  margin-left: ", ";\n"])), function (_ref) {
+  var state = _ref.state;
+
+  if (state) {
+    if (state === 'inbound') return '0rem';
+    if (state === 'outbound') return 'auto';
+  }
+
+  return '0rem';
+});
+
+var BmFeedPostComments = function BmFeedPostComments(_ref2) {
+  var story = _ref2.story,
+      state = _ref2.state,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  return story && /*#__PURE__*/_react.default.createElement(CardWrapper, _extends({
+    state: state
+  }, rest), /*#__PURE__*/_react.default.createElement(_cards.default, _extends({
+    state: state
+  }, rest), story.header && /*#__PURE__*/_react.default.createElement(_cards.default.Header, null, story.header), story.body && /*#__PURE__*/_react.default.createElement(_cards.default.Body, null, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(LinkText, null, story.body.link), story.body.image && /*#__PURE__*/_react.default.createElement(Image, {
+    src: story.body.image,
+    alt: "src"
+  }))), story.footer && /*#__PURE__*/_react.default.createElement(_cards.default.Footer, null, /*#__PURE__*/_react.default.createElement(Wrapper, null, story.footer))));
+};
+
+exports.BmFeedPostComments = BmFeedPostComments;

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

@@ -21,11 +21,15 @@ 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"];
+    _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
@@ -63,7 +67,7 @@ var Details = _styledComponents.default.div(_templateObject3 || (_templateObject
 
 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: keep-all;\n  margin: 0rem;\n"])), function (_ref2) {
+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) {
@@ -92,10 +96,19 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   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-top: 0.5rem;\n"])));
+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;
 
-var handleState = function handleState(_ref5) {
-  var session = _ref5.session;
+  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;
 
   if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
@@ -120,8 +133,8 @@ var handleState = function handleState(_ref5) {
 }; // 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 (_ref6) {
-  var state = _ref6.state;
+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);
@@ -129,8 +142,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   }
 
   return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref7) {
-  var state = _ref7.state;
+}, function (_ref8) {
+  var state = _ref8.state;
 
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
@@ -138,8 +151,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   }
 
   return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref8) {
-  var state = _ref8.state;
+}, function (_ref9) {
+  var state = _ref9.state;
 
   if (state) {
     if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
@@ -147,8 +160,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   }
 
   return "".concat(_colors.BmPrimaryWhite);
-}, _colors.BmGrey200, function (_ref9) {
-  var state = _ref9.state;
+}, _colors.BmGrey200, function (_ref10) {
+  var state = _ref10.state;
 
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
@@ -162,14 +175,14 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
 /* max-height: 100%; */
 );
 
-var BmFileAttachment = function BmFileAttachment(_ref10) {
-  var state = _ref10.state,
-      file = _ref10.file,
-      src = _ref10.src,
-      fileName = _ref10.fileName,
-      onDownload = _ref10.onDownload,
-      link = _ref10.link,
-      rest = _objectWithoutProperties(_ref10, _excluded);
+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);
 
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
     state: state
@@ -184,8 +197,8 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
 }; // 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 (_ref11) {
-  var state = _ref11.state;
+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);
@@ -193,8 +206,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
   }
 
   return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref12) {
-  var state = _ref12.state;
+}, function (_ref13) {
+  var state = _ref13.state;
 
   if (state) {
     if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
@@ -212,11 +225,11 @@ var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject
 
 exports.BmImage = BmImage;
 
-var BmImageChat = function BmImageChat(_ref13) {
-  var state = _ref13.state,
-      src = _ref13.src,
-      fileName = _ref13.fileName,
-      rest = _objectWithoutProperties(_ref13, _excluded2);
+var BmImageChat = function BmImageChat(_ref14) {
+  var state = _ref14.state,
+      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
@@ -237,19 +250,23 @@ var MessageState = _styledComponents.default.div(_templateObject10 || (_template
 
 exports.MessageState = MessageState;
 
-BmChat.Details = function (_ref14) {
-  var children = _ref14.children,
-      state = _ref14.state,
-      displayTime = _ref14.displayTime,
-      status = _ref14.status,
-      session = _ref14.session,
-      src = _ref14.src,
-      file = _ref14.file,
-      fileName = _ref14.fileName,
-      sessionDetails = _ref14.sessionDetails,
-      rest = _objectWithoutProperties(_ref14, _excluded3);
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
+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);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sessionTimeline && /*#__PURE__*/_react.default.createElement(_sessionTimeline.SessionTimeline, _extends({
+    message: sessionTimeline.message
+  }, rest)), sessionDetails && /*#__PURE__*/_react.default.createElement(_sessionDetails.SessionDetails, _extends({
     time: sessionDetails.time,
     message: sessionDetails.message
   }, rest)), /*#__PURE__*/_react.default.createElement(Details, _extends({
@@ -257,7 +274,9 @@ BmChat.Details = function (_ref14) {
   }, 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({
+  })), /*#__PURE__*/_react.default.createElement(MessageDetails, {
+    feedPostComments: feedPostComments
+  }, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
     state: state,
     src: src,
     fileName: fileName
@@ -267,7 +286,12 @@ 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)), feedPostComments && /*#__PURE__*/_react.default.createElement(_FeedPostComments.BmFeedPostComments, _extends({
+    state: state,
+    story: feedPostComments
+  }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, {
+    state: state
+  }, displayTime && displayTime, status === 'sent' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
     color: "".concat(_colors.BmSecondaryDarkGreen),
     size: "small"

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

@@ -35,13 +35,21 @@ 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: "inbound",
+    state: "outbound",
     session: "sms",
     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")
+    },
+    feedPostComments: {
+      header: /*#__PURE__*/_react.default.createElement("p", null, "hello"),
+      body: {
+        link: /*#__PURE__*/_react.default.createElement("p", null, "This is a text"),
+        image: _chartImg.default
+      },
+      footer: /*#__PURE__*/_react.default.createElement("p", null, "This is a Footer")
     }
   }, /*#__PURE__*/_react.default.createElement("p", null, "Inbound Text Message")), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
     state: "inbound",

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

@@ -0,0 +1,44 @@
+"use strict";
+
+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"])));
+
+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);
+
+  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/ProfileIcon/ProfileIcon.js

@@ -17,6 +17,8 @@ var _fb = _interopRequireDefault(require("../../assets/fb.png"));
 
 var _insta = _interopRequireDefault(require("../../assets/insta.png"));
 
+var _Google_Messages_logo = _interopRequireDefault(require("../../assets/Google_Messages_logo.png"));
+
 var _excluded = ["img", "content", "channel", "size"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -95,6 +97,10 @@ var BmProfileIcon = function BmProfileIcon(_ref) {
     size: size,
     src: _insta.default,
     alt: "icon"
+  }), channel && channel === 'google_business_messaging' && /*#__PURE__*/_react.default.createElement(Dot, {
+    size: size,
+    src: _Google_Messages_logo.default,
+    alt: "icon"
   })));
 };
 

package/package.json

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

package/src/App.js

@@ -1,11 +1,105 @@
 import React from 'react';
-import { BmTag } from './lib/components';
+
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions';
+import SendIcon from '@mui/icons-material/Send';
+import QuickreplyIcon from '@mui/icons-material/Quickreply';
+import {
+  BmChat,
+  BmInput,
+  BmIcons,
+  GlobalStyle,
+  BmProfileIcon,
+} from './lib/components';
 
 const Chat = () => {
+  const image =
+    'https://scontent.fnbo1-1.fna.fbcdn.net/v/t39.30808-6/298879098_10161724947807542_5252175668064009159_n.jpg?stp=dst-jpg_p720x720&_nc_cat=100&ccb=1-7&_nc_sid=9e2e56&_nc_ohc=9uDHII_ETpUAX_KNS3Y&_nc_ht=scontent.fnbo1-1.fna&edm=APCh5TUEAAAA&oh=00_AT8sOJmRGYwgXF48_GPOCWx1soil0yK8V3AiEPkce9WJIw&oe=6304120B';
   return (
-    <BmTag bgColor="red" variant="primary" color="white">
-      <p>Hello</p>
-    </BmTag>
+    <>
+      <GlobalStyle />
+      <BmProfileIcon channel="google_business_messaging" />
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state="outbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionTimeline={{
+              message: <p>2022-07-28</p>,
+              // time: <p>12:00pm</p>,
+            }}
+            feedPostComments={{
+              header: <p>hello</p>,
+              body: {
+                link: <p>This is a body</p>,
+                image,
+              },
+              footer: <p>This is a footer</p>,
+            }}
+          />
+
+          <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            fileName={<p>chat.png</p>}
+            src={image}
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</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}
+            link={image}
+            onDownload={() => {
+              alert('hello');
+            }}
+          />
+        </BmChat.Body>
+        <BmChat.Footer>
+          <div className="chat-footer">
+            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+            <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
+            <BmIcons icon={<SendIcon />} size="xlarge" />
+          </div>
+        </BmChat.Footer>
+      </BmChat>
+    </>
   );
 };
 

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+import BmCard from '../../Cards/cards';
+
+const Image = styled.img`
+  max-width: 30%;
+  width: 30%;
+`;
+const LinkText = styled.div`
+  display: flex;
+  max-width: 70%;
+  width: 70%;
+  align-items: center;
+  > * {
+    word-wrap: break-word !important;
+    word-break: break-word;
+  }
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  word-wrap: break-word !important;
+  word-break: break-word;
+  > * {
+    word-wrap: break-word !important;
+    word-break: break-word !important;
+  }
+`;
+
+const CardWrapper = styled.div`
+  display: flex;
+  width: 50%;
+  max-width: 50%;
+  margin-left: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return '0rem';
+      if (state === 'outbound') return 'auto';
+    }
+    return '0rem';
+  }};
+`;
+
+export const BmFeedPostComments = ({ story, state, ...rest }) => {
+  return (
+    story && (
+      <CardWrapper state={state} {...rest}>
+        <BmCard state={state} {...rest}>
+          {story.header && <BmCard.Header>{story.header}</BmCard.Header>}
+          {story.body && (
+            <BmCard.Body>
+              <Wrapper>
+                <LinkText>{story.body.link}</LinkText>
+                {story.body.image && <Image src={story.body.image} alt="src" />}
+              </Wrapper>
+            </BmCard.Body>
+          )}
+          {story.footer && (
+            <BmCard.Footer>
+              <Wrapper>{story.footer}</Wrapper>
+            </BmCard.Footer>
+          )}
+        </BmCard>
+      </CardWrapper>
+    )
+  );
+};

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

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import BmAvatar from '../../Avatars/avatars';
 import { BmIcons } from '../../iconStyles';
 import { SessionDetails } from './sessionDetails';
+import { SessionTimeline } from './sessionTimeline';
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -14,6 +15,7 @@ import {
   BmSecondaryDarkGreen,
   BmGrey200,
 } from '../../colors';
+import { BmFeedPostComments } from './FeedPostComments';
 
 const BmChat = styled.div`
   display: flex;
@@ -90,7 +92,7 @@ const Messages = styled.div`
     return `${BmPrimaryWhite}`;
   }};
   border: 0.071rem solid ${BmGrey200};
-  word-break: keep-all;
+  word-break: break-word;
   margin: 0rem;
 `;
 
@@ -101,6 +103,13 @@ const MessagesSubDetails = styled.div`
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }
+  margin-left: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return '0px';
+      if (state === 'outbound') return 'auto';
+    }
+    return `${BmPrimaryWhite}`;
+  }};
   margin-top: 0.5rem;
 `;
 
@@ -250,10 +259,15 @@ BmChat.Details = ({
   file,
   fileName,
   sessionDetails,
+  sessionTimeline,
+  feedPostComments,
   ...rest
 }) => {
   return (
     <>
+      {sessionTimeline && (
+        <SessionTimeline message={sessionTimeline.message} {...rest} />
+      )}
       {sessionDetails && (
         <SessionDetails
           time={sessionDetails.time}
@@ -266,7 +280,7 @@ BmChat.Details = ({
         <MessageState>
           {state === 'inbound' && session && handleState({ state, session })}
         </MessageState>
-        <MessageDetails>
+        <MessageDetails feedPostComments={feedPostComments}>
           {/* For Images */}
           {src && (
             <BmImageChat
@@ -287,7 +301,14 @@ BmChat.Details = ({
               {...rest}
             />
           )}
-          <MessagesSubDetails>
+          {feedPostComments && (
+            <BmFeedPostComments
+              state={state}
+              story={feedPostComments}
+              {...rest}
+            />
+          )}
+          <MessagesSubDetails state={state}>
             {displayTime && displayTime}
             {status === 'sent' && (
               <BmIcons

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

@@ -19,7 +19,7 @@ export const ChatBody = () => {
     <BmChat>
       <BmChat.Body>
         <BmChat.Details
-          state="inbound"
+          state="outbound"
           session="sms"
           displayTime={<p>12:00pm</p>}
           status="sent"
@@ -27,6 +27,14 @@ export const ChatBody = () => {
             message: <h3>Session Message</h3>,
             time: <p>12:00pm</p>,
           }}
+          feedPostComments={{
+            header: <p>hello</p>,
+            body: {
+              link: <p>This is a text</p>,
+              image,
+            },
+            footer: <p>This is a Footer</p>,
+          }}
         >
           <p>Inbound Text Message</p>
         </BmChat.Details>

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BmSecondaryBlue12, BmBgGreyBlue } from '../../colors';
+
+const SessionTimelineWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`;
+
+const container = styled.div`
+  border-radius: 0.714rem 0.714rem 0.714rem 0.714rem;
+  border: 0.071rem solid ${BmBgGreyBlue};
+  padding: 0.5rem;
+  background-color: ${BmSecondaryBlue12};
+`;
+SessionTimelineWrapper.Container = container;
+
+export const SessionTimeline = ({ message, time, ...rest }) => {
+  return (
+    <SessionTimelineWrapper message={message} {...rest}>
+      <SessionTimelineWrapper.Container>
+        {message || <p>&nbsp;</p>}
+      </SessionTimelineWrapper.Container>
+    </SessionTimelineWrapper>
+  );
+};

package/src/lib/components/ProfileIcon/ProfileIcon.js

@@ -4,6 +4,7 @@ import { BmSecondaryBlue12, BmBgLightBlue } from '../colors';
 import wa from '../../assets/wa.png';
 import fb from '../../assets/fb.png';
 import insta from '../../assets/insta.png';
+import gbm from '../../assets/Google_Messages_logo.png';
 
 const handleSize = (size) => {
   if (size) {
@@ -76,6 +77,9 @@ export const BmProfileIcon = ({ img, content, channel, size, ...rest }) => {
         {channel && channel === 'instagram' && (
           <Dot size={size} src={insta} alt="icon" />
         )}
+        {channel && channel === 'google_business_messaging' && (
+          <Dot size={size} src={gbm} alt="icon" />
+        )}
       </Profile>
     </>
   );