beem-component 1.9.0 → 1.9.2

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MessageState = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
+exports.default = exports.RepliedTextWrapper = 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"));
@@ -18,7 +18,7 @@ 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", "agentName"];
+  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata"];
 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; }
@@ -48,8 +48,16 @@ var MessageDetails = _styledComponents.default.div.withConfig({
 })(["display:flex;flex-direction:column;max-width:70%;> *{margin-top:0.5rem;margin-bottom:0.5rem;}"]);
 var Messages = _styledComponents.default.div.withConfig({
   displayName: "chatBody__Messages"
-})(["display:flex;flex-direction:row;align-items:center;padding:0.5rem;background:", ";color:", ";border-radius:", ";border:0.071rem solid ", ";word-break:break-word;margin:0rem;"], function (_ref2) {
-  var state = _ref2.state;
+})(["display:flex;flex-direction:row;align-items:center;padding:1rem 0.5rem;background:", ";color:", ";border-radius:", ";border-left:", ";border:", ";word-break:break-word;margin:0rem;"], function (_ref2) {
+  var state = _ref2.state,
+    metadata = _ref2.metadata;
+  if (metadata) {
+    if (state) {
+      if (state === 'inbound') return "".concat(_colors.BmTransparentBg30);
+      if (state === 'outbound') return "".concat(_colors.BmTransparentBg30);
+    }
+    return "".concat(_colors.BmPrimaryWhite);
+  }
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
@@ -63,26 +71,47 @@ var Messages = _styledComponents.default.div.withConfig({
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, function (_ref4) {
-  var state = _ref4.state;
+  var state = _ref4.state,
+    metadata = _ref4.metadata;
+  if (metadata) {
+    return '0rem';
+  }
   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 (_ref5) {
+  var state = _ref5.state,
+    metadata = _ref5.metadata;
+  if (metadata) {
+    if (state) {
+      if (state === 'inbound') return "2px solid ".concat(_colors.BmPrimaryBlue);
+      if (state === 'outbound') return "2px solid ".concat(_colors.BmPrimaryGold);
+    }
+    return "".concat(_colors.BmPrimaryWhite);
+  }
+  return '';
+}, function (_ref6) {
+  var metadata = _ref6.metadata;
+  if (metadata) {
+    return '';
+  }
+  return "0.071rem solid ".concat(_colors.BmGrey200, ";");
+});
 var MessagesSubDetails = _styledComponents.default.div.withConfig({
   displayName: "chatBody__MessagesSubDetails"
-})(["display:flex;flex-direction:row;align-items:center;> *:not(:last-child){margin-right:0.5rem;}margin-left:", ";margin-top:0.5rem;"], function (_ref5) {
-  var state = _ref5.state;
+})(["display:flex;flex-direction:row;align-items:center;> *:not(:last-child){margin-right:0.5rem;}margin-left:", ";margin-top:0.5rem;"], function (_ref7) {
+  var state = _ref7.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,
-    agentName = _ref6.agentName;
+var handleState = function handleState(_ref8) {
+  var session = _ref8.session,
+    agentName = _ref8.agentName;
   if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
@@ -113,29 +142,29 @@ var handleState = function handleState(_ref6) {
 // Start of File Attachment
 var FileAttachmentWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__FileAttachmentWrapper"
-})(["display:flex;cursor:pointer;flex-direction:row;padding:1rem;background:", ";color:", ";border-radius:", ";border:0.071rem solid ", ";> *{&:last-child{margin-left:auto;}:not(:last-child){margin-right:0.5rem;}}&&& > *{align-items:center;color:", ";}", " ", ""], function (_ref7) {
-  var state = _ref7.state;
+})(["display:flex;cursor:pointer;flex-direction:row;padding:1rem;background:", ";color:", ";border-radius:", ";border:0.071rem solid ", ";> *{&:last-child{margin-left:auto;}:not(:last-child){margin-right:0.5rem;}}&&& > *{align-items:center;color:", ";}", " ", ""], function (_ref9) {
+  var state = _ref9.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;
+}, function (_ref10) {
+  var state = _ref10.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;
+}, function (_ref11) {
+  var state = _ref11.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;
+}, _colors.BmGrey200, function (_ref12) {
+  var state = _ref12.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
@@ -143,14 +172,14 @@ var FileAttachmentWrapper = _styledComponents.default.div.withConfig({
   return "".concat(_colors.BmPrimaryWhite);
 }, '' /* 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);
+var BmFileAttachment = function BmFileAttachment(_ref13) {
+  var state = _ref13.state,
+    file = _ref13.file,
+    src = _ref13.src,
+    fileName = _ref13.fileName,
+    onDownload = _ref13.onDownload,
+    link = _ref13.link,
+    rest = _objectWithoutProperties(_ref13, _excluded);
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
@@ -165,15 +194,15 @@ var BmFileAttachment = function BmFileAttachment(_ref11) {
 // Start of Component for Images
 var BmImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__BmImageWrapper"
-})(["display:flex;flex-direction:column;color:", ";border-radius:", ";border:0.071rem solid ", ";"], function (_ref12) {
-  var state = _ref12.state;
+})(["display:flex;flex-direction:column;color:", ";border-radius:", ";border:0.071rem solid ", ";"], function (_ref14) {
+  var state = _ref14.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;
+}, function (_ref15) {
+  var state = _ref15.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';
@@ -185,11 +214,11 @@ var BmImage = _styledComponents.default.img.withConfig({
   displayName: "chatBody__BmImage"
 })(["", " width:100%;object-fit:cover;flex-grow:1;"], '' /* Fix width */);
 exports.BmImage = BmImage;
-var BmImageChat = function BmImageChat(_ref14) {
-  var state = _ref14.state,
-    src = _ref14.src,
-    fileName = _ref14.fileName,
-    rest = _objectWithoutProperties(_ref14, _excluded2);
+var BmImageChat = function BmImageChat(_ref16) {
+  var state = _ref16.state,
+    src = _ref16.src,
+    fileName = _ref16.fileName,
+    rest = _objectWithoutProperties(_ref16, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(BmImage, {
@@ -207,21 +236,46 @@ var MessageState = _styledComponents.default.div.withConfig({
 })(["@media all and (max-width:960px){display:none;}"]);
 
 // End of Component for Images
+
+// export const ReplyWrapper = styled.div`
+//   display: flex;
+//   align-items: center;
+//   gap: 1rem;
+// `;
 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,
-    agentName = _ref15.agentName,
-    rest = _objectWithoutProperties(_ref15, _excluded3);
+var RepliedTextWrapper = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__RepliedTextWrapper"
+})(["display:flex;flex-direction:column;justify-content:center;padding:1.14286rem 1.14286rem 1.14286rem 0.35714rem;gap:1rem;border-radius:0.25rem 0.25rem 0.25rem 0rem;border:1px solid ", ";background:", ";color:", ";"], _colors.BmGrey200, function (_ref17) {
+  var state = _ref17.state;
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+}, function (_ref18) {
+  var state = _ref18.state;
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+});
+exports.RepliedTextWrapper = RepliedTextWrapper;
+BmChat.Details = function (_ref19) {
+  var children = _ref19.children,
+    state = _ref19.state,
+    displayTime = _ref19.displayTime,
+    status = _ref19.status,
+    session = _ref19.session,
+    src = _ref19.src,
+    file = _ref19.file,
+    fileName = _ref19.fileName,
+    sessionDetails = _ref19.sessionDetails,
+    sessionTimeline = _ref19.sessionTimeline,
+    feedPostComments = _ref19.feedPostComments,
+    agentName = _ref19.agentName,
+    metadata = _ref19.metadata,
+    rest = _objectWithoutProperties(_ref19, _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({
@@ -234,9 +288,14 @@ BmChat.Details = function (_ref15) {
     state: state,
     src: src,
     fileName: fileName
-  }, rest)), children && /*#__PURE__*/_react.default.createElement(Messages, {
+  }, rest)), children && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, metadata ? /*#__PURE__*/_react.default.createElement(RepliedTextWrapper, {
+    state: state
+  }, /*#__PURE__*/_react.default.createElement(Messages, {
+    metadata: metadata,
+    state: state
+  }, children), metadata) : /*#__PURE__*/_react.default.createElement(Messages, {
     state: state
-  }, children), file && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
+  }, children)), file && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
     file: file,
     fileName: fileName,
     state: state

package/dist/components/Tags/tags.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icons = require("@material-ui/icons");
 var _iconStyles = require("../iconStyles");
 var _colors = require("../colors");
-var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "bgColor", "closeButton", "onHide"];
+var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "textColor", "bgColor", "closeButton", "onHide"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -26,7 +26,11 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var Color = function Color(_ref) {
   var variant = _ref.variant,
-    color = _ref.color;
+    color = _ref.color,
+    textColor = _ref.textColor;
+  if (textColor) {
+    return textColor;
+  }
   if (variant === 'success' || variant === 'warning' || variant === 'danger' || variant === 'primary') {
     return "".concat(_colors.BmPrimaryWhite);
   }
@@ -65,10 +69,12 @@ var BeemTag = _styledComponents.default.button.withConfig({
   return "".concat(_colors.BmGrey100);
 }, function (_ref5) {
   var variant = _ref5.variant,
-    color = _ref5.color;
+    color = _ref5.color,
+    textColor = _ref5.textColor;
   return Color({
     variant: variant,
-    color: color
+    color: color,
+    textColor: textColor
   });
 });
 var BmTag = function BmTag(props) {
@@ -83,6 +89,7 @@ var BmTag = function BmTag(props) {
     leadingIcon = props.leadingIcon,
     trailingIcon = props.trailingIcon,
     color = props.color,
+    textColor = props.textColor,
     bgColor = props.bgColor,
     closeButton = props.closeButton,
     onHide = props.onHide,
@@ -93,6 +100,7 @@ var BmTag = function BmTag(props) {
     disabled: disabled,
     children: children,
     color: color,
+    textColor: textColor,
     closeButton: closeButton,
     show: toggle,
     bgColor: bgColor

package/package.json

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

package/src/App.js

@@ -1,99 +1,106 @@
-import React, { useState } from 'react';
-import { BmRowLabel, GlobalStyle } from './lib/components';
-import BmButtonGroup from './lib/components/ButtonGroup/buttonGroup';
-import { BmInputCounter } from './lib/components/InputCounter/inputCounter';
-import BmMultiDateSelector from './lib/components/MultipleDateSelector/multipleDateSelector';
-import BmStepper from './lib/components/Stepper/stepper';
+// * eslint-disable func-style *
+/* eslint-disable jsx-a11y/media-has-caption */
+import React from 'react';
+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';
 
-const App = () => {
-  const [item, setItem] = useState();
-  const Occurance = ['Now', 'Later', 'Recurring'];
-  const [count, setCount] = useState();
-  const handleCountChange = (newCount) => {
-    setCount(newCount);
-  };
-  const [activeStep, setActiveStep] = useState(new Date().getDay());
-  const [selectedDates, setSelectedDates] = useState([]);
-
-  const handleSelectDates = (dates) => {
-    setSelectedDates(dates);
-  };
-
-  const Weekdays = [
-    {
-      dayNo: 1,
-      day: 'Monday',
-      dayInitial: 'M',
-    },
-    {
-      dayNo: 2,
-      day: 'Tuesday',
-      dayInitial: 'T',
-    },
-    {
-      dayNo: 3,
-      day: 'Wednesday',
-      dayInitial: 'W',
-    },
-    {
-      dayNo: 4,
-      day: 'Thursday',
-      dayInitial: 'T',
-    },
-    {
-      dayNo: 5,
-      day: 'Friday',
-      dayInitial: 'F',
-    },
-    {
-      dayNo: 6,
-      day: 'Saturday',
-      dayInitial: 'S',
-    },
-    {
-      dayNo: 0,
-      day: 'Sunday',
-      dayInitial: 'S',
-    },
-  ];
+import { BmChat, BmInput, BmIcons, GlobalStyle } from './lib/components';
 
+const Chat = () => {
   return (
     <>
       <GlobalStyle />
-      <BmButtonGroup>
-        {Occurance &&
-          Occurance.map((e) => (
-            <BmButtonGroup.Item onClick={() => setItem(e)} active={e === item}>
-              <p>{e}</p>
-            </BmButtonGroup.Item>
-          ))}
-      </BmButtonGroup>
-      <BmInputCounter
-        min="1"
-        max="20"
-        count={count}
-        onChange={handleCountChange}
-      />
-      <BmMultiDateSelector onSelect={handleSelectDates} />
-      {selectedDates.length > 0 && (
-        <p>Selected dates: {selectedDates.join(', ')}</p>
-      )}
-      {Weekdays.map(({ dayNo, dayInitial }) => {
-        return (
-          <BmStepper
-            key={dayNo}
-            activeStep={activeStep > -1 ? activeStep === dayNo : null}
-            onClick={() => {
-              setActiveStep(dayNo);
-            }}
+
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state="outbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            type="pdf"
+            fileName={<p>test.pdf</p>}
+            src="https://images.pexels.com/photos/2280547/pexels-photo-2280547.jpeg?cs=srgb&dl=pexels-chokniti-khongchum-2280547.jpg&fm=jpg&_gl=1*12h6vf0*_ga*MjE0MTE2NjEyMC4xNzA1OTEyMDc4*_ga_8JE65Q40S6*MTcwNTkxMjA3OS4xLjAuMTcwNTkxMjA4MC4wLjAuMA.."
+            metadata="truedsf sjdlkfj ldksfj lskdfj l"
+          />
+          <BmChat.Details
+            state="inbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            type="audio"
+            fileName={<p>file.csv</p>}
+            src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
+          />
+
+          <BmChat.Details
+            state="outbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            status="failed"
+            type="video"
+            src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
+          />
+
+          <BmChat.Details
+            state="outbound"
+            session="bot"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+          >
+            <p>Outbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="inbound"
+            session="bot"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            metadata="trsfdsd jlskdfj sldkfj lsdkfj ldkjf lsdkfj lsdkjf lsdkjf lsdkfj ldskfj lsdkfj lsdkue"
+          >
+            <p>inboundsfhksdjfhk ksdfjh dsjfh bound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="inbound"
+            session="bot"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+          >
+            <p>
+              inboundsfhksdjfhk ksdfjh dsjfh bound Text fjksldfj sdlfkj sdfk
+              jsdlkfj sdflkj sdlkfj ldskfj ldsj Message
+            </p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="outbound"
+            session="bot"
+            sessionTimeline={{ message: <p>12:00pm</p> }}
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            metadata="tru dskfjsd dklfj sdlfkj lsdkjf lsdkfj ldskfj lsdkfj ldskfj ldskfj lsdkjt roh df ksdjflkdsjf dslfj orepgj rojgp orej hietp rjere"
           >
-            {dayInitial}
-          </BmStepper>
-        );
-      })}
-      <BmRowLabel disabled>Hello</BmRowLabel>
+            <p>outbound dfshkf ksdfjh dsjfh bound Text Message</p>
+          </BmChat.Details>
+        </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>
     </>
   );
 };
 
-export default App;
+export default Chat;

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

@@ -16,6 +16,8 @@ import {
   BmPrimaryBlack,
   BmSecondaryDarkGreen,
   BmGrey200,
+  BmTransparentBg30,
+  BmPrimaryGold,
 } from '../../colors';
 import { BmFeedPostComments } from './FeedPostComments';
 
@@ -71,8 +73,15 @@ const Messages = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.5rem;
-  background: ${({ state }) => {
+  padding: 1rem 0.5rem;
+  background: ${({ state, metadata }) => {
+    if (metadata) {
+      if (state) {
+        if (state === 'inbound') return `${BmTransparentBg30}`;
+        if (state === 'outbound') return `${BmTransparentBg30}`;
+      }
+      return `${BmPrimaryWhite}`;
+    }
     if (state) {
       if (state === 'inbound') return `${BmPrimaryWhite}`;
       if (state === 'outbound') return `${BmPrimaryBlue}`;
@@ -86,14 +95,33 @@ const Messages = styled.div`
     }
     return `${BmPrimaryWhite}`;
   }};
-  border-radius: ${({ state }) => {
+  border-radius: ${({ state, metadata }) => {
+    if (metadata) {
+      return '0rem';
+    }
     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 `${BmPrimaryWhite}`;
   }};
-  border: 0.071rem solid ${BmGrey200};
+  border-left: ${({ state, metadata }) => {
+    if (metadata) {
+      if (state) {
+        if (state === 'inbound') return `2px solid ${BmPrimaryBlue}`;
+        if (state === 'outbound') return `2px solid ${BmPrimaryGold}`;
+      }
+      return `${BmPrimaryWhite}`;
+    }
+    return '';
+  }};
+
+  border: ${({ metadata }) => {
+    if (metadata) {
+      return '';
+    }
+    return `0.071rem solid ${BmGrey200};`;
+  }};
   word-break: break-word;
   margin: 0rem;
 `;
@@ -254,6 +282,30 @@ export const MessageState = styled.div`
 
 // End of Component for Images
 
+export const RepliedTextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1.14286rem 1.14286rem 1.14286rem 0.35714rem;
+  gap: 1rem;
+  border-radius: 0.25rem 0.25rem 0.25rem 0rem;
+  border: 1px solid ${BmGrey200};
+  background: ${({ state }) => {
+    if (state) {
+      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}`;
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+`;
+
 BmChat.Details = ({
   children,
   state,
@@ -267,6 +319,7 @@ BmChat.Details = ({
   sessionTimeline,
   feedPostComments,
   agentName,
+  metadata,
   ...rest
 }) => {
   return (
@@ -289,7 +342,20 @@ BmChat.Details = ({
             />
           )}
           {/* For Messages */}
-          {children && <Messages state={state}>{children}</Messages>}
+          {children && (
+            <>
+              {metadata ? (
+                <RepliedTextWrapper state={state}>
+                  <Messages metadata={metadata} state={state}>
+                    {children}
+                  </Messages>
+                  {metadata}
+                </RepliedTextWrapper>
+              ) : (
+                <Messages state={state}>{children}</Messages>
+              )}
+            </>
+          )}
           {/* For files */}
           {file && (
             <BmFileAttachment

package/src/lib/components/Tags/tags.js

@@ -16,7 +16,10 @@ import {
   BmPrimaryBlue,
 } from '../colors';
 
-const Color = ({ variant, color }) => {
+const Color = ({ variant, color, textColor }) => {
+  if (textColor) {
+    return textColor;
+  }
   if (
     variant === 'success' ||
     variant === 'warning' ||
@@ -64,7 +67,8 @@ const BeemTag = styled.button`
       return `${BmGrey100}`;
     }};
   > * {
-    color: ${({ variant, color }) => Color({ variant, color })};
+    color: ${({ variant, color, textColor }) =>
+      Color({ variant, color, textColor })};
     text-transform: uppercase;
   }
 
@@ -84,6 +88,7 @@ export const BmTag = (props) => {
     leadingIcon,
     trailingIcon,
     color,
+    textColor,
     bgColor,
     closeButton,
     onHide,
@@ -97,6 +102,7 @@ export const BmTag = (props) => {
       disabled={disabled}
       children={children}
       color={color}
+      textColor={textColor}
       closeButton={closeButton}
       show={toggle}
       bgColor={bgColor}