beem-component 1.9.1 → 1.9.3

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, {
@@ -208,20 +237,39 @@ var MessageState = _styledComponents.default.div.withConfig({
 
 // 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,
-    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 0.25rem;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 +282,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
+  }, metadata), children) : /*#__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/package.json

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

package/src/App.js

@@ -1,137 +1,517 @@
-import React, { useState } from 'react';
-import CircleIcon from '@mui/icons-material/Circle';
-import { BmRowLabel, BmTag, 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';
-import {
-  BmBgLightBlue,
-  // BmGrey200,
-  BmGrey400,
-  BmGrey50,
-  BmPrimaryBlue,
-  BmPrimaryGold,
-  BmSecondaryGreen,
-  BmSecondaryGreen8,
-  BmSecondaryPurple,
-  BmSecondaryRed,
-} from './lib/components/colors';
+// * eslint-disable func-style *
+/* eslint-disable jsx-a11y/media-has-caption */
+import React from 'react';
 
-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([]);
+import { BmChat, GlobalStyle } from './lib/components';
 
-  const handleSelectDates = (dates) => {
-    setSelectedDates(dates);
-  };
-
-  const Weekdays = [
+const Chat = () => {
+  const msg = [
+    {
+      message: 'Me as user replying to the beem message',
+      id: 20278,
+      time: '2024-01-22T11:59:08.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: 'b0a6b554-0cc3-4e45-83b2-3cada229a82c',
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: 'b0a6b554-0cc3-4e45-83b2-3cada229a82c',
+        prev_message: 'this is message from beem',
+      },
+    },
+    {
+      message: 'this is message from beem',
+      id: 20277,
+      time: '2024-01-22T11:56:41.000Z',
+      direction: 'outbound',
+      message_type: null,
+      messageId: 'b0a6b554-0cc3-4e45-83b2-3cada229a82c',
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: 'arl@beem.co.tz',
+      df_agent_name: 'Dev arl',
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      message: 'hi',
+      id: 20276,
+      time: '2024-01-22T11:20:21.000Z',
+      direction: 'outbound',
+      message_type: null,
+      messageId: '86ffe4bd-145e-4f50-83ef-83248b05c43a',
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: 'arl@beem.co.tz',
+      df_agent_name: 'Dev arl',
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      message: 'hi',
+      id: 20270,
+      time: '2024-01-22T10:19:57.000Z',
+      direction: 'outbound',
+      message_type: null,
+      messageId: '0e165d59-8300-4cd2-883d-dcb076c6f235',
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: 'arl@beem.co.tz',
+      df_agent_name: 'Dev arl',
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      message: 'oh i am good',
+      id: 20269,
+      time: '2024-01-22T10:04:05.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: 'ABEGJVeCJwBSAhB3WfEzKswmhITnP0z8qo12',
+        prev_message: 'how are you????????',
+      },
+    },
+    {
+      message: 'how are you????????',
+      id: 20268,
+      time: '2024-01-22T10:03:23.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'hi\n',
+      id: 20267,
+      time: '2024-01-22T10:03:01.000Z',
+      direction: 'outbound',
+      message_type: null,
+      messageId: 'f38be83c-92b1-47a7-9e6a-0d209da0ad86',
+      is_live_agent: false,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: 'arl@beem.co.tz',
+      df_agent_name: 'Dev arl',
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      message: 'Sorry, what was that?',
+      id: 20266,
+      time: '2024-01-22T10:02:36.000Z',
+      direction: 'outbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: false,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      message: 'how are you?',
+      id: 20265,
+      time: '2024-01-22T10:02:17.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: false,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'thank you for chatting with us!!! -Dev',
+      id: 20264,
+      time: '2024-01-22T09:55:00.000Z',
+      direction: 'outbound',
+      message_type: null,
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
     {
-      dayNo: 1,
-      day: 'Monday',
-      dayInitial: 'M',
+      message: 'One more time?',
+      id: 20223,
+      time: '2024-01-19T11:00:59.000Z',
+      direction: 'outbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: false,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
     },
     {
-      dayNo: 2,
-      day: 'Tuesday',
-      dayInitial: 'T',
+      message: 'i am good',
+      id: 20222,
+      time: '2024-01-19T11:00:55.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: false,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: 'ABEGJVaCQwSAAhCt33VV1Zivq9-48AP8bs_t',
+        prev_message: 'if it doesnt exists then to fetch',
+      },
     },
     {
-      dayNo: 3,
-      day: 'Wednesday',
-      dayInitial: 'W',
+      message: 'how are you?',
+      id: 20220,
+      time: '2024-01-19T10:59:48.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: false,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
     },
     {
-      dayNo: 4,
-      day: 'Thursday',
-      dayInitial: 'T',
+      message: 'thank you for chatting with us!!! -Dev',
+      id: 20217,
+      time: '2024-01-19T09:55:00.000Z',
+      direction: 'outbound',
+      message_type: null,
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
     },
     {
-      dayNo: 5,
-      day: 'Friday',
-      dayInitial: 'F',
+      message: 'if it doesnt exists then to fetch',
+      id: 20208,
+      time: '2024-01-19T08:54:12.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
     },
     {
-      dayNo: 6,
-      day: 'Saturday',
-      dayInitial: 'S',
+      message: 'hi',
+      id: 20207,
+      time: '2024-01-19T08:49:23.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
     },
     {
-      dayNo: 0,
-      day: 'Sunday',
-      dayInitial: 'S',
+      message: 'hi',
+      id: 20206,
+      time: '2024-01-19T08:46:09.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'hi',
+      id: 20205,
+      time: '2024-01-19T08:43:58.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'hi',
+      id: 20204,
+      time: '2024-01-19T08:41:43.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'hi',
+      id: 20201,
+      time: '2024-01-19T08:40:27.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'hi',
+      id: 20200,
+      time: '2024-01-19T08:39:19.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'hi',
+      id: 20199,
+      time: '2024-01-19T08:37:26.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'hi',
+      id: 20198,
+      time: '2024-01-19T08:36:57.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'hi',
+      id: 20150,
+      time: '2024-01-18T12:47:26.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      message: 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/short.jpg',
+      id: 20147,
+      time: '2024-01-18T09:57:52.000Z',
+      direction: 'outbound',
+      message_type: 'image/png',
+      messageId: 'ea15131f-2c55-43a3-b166-c38a2c4314b1',
+      is_live_agent: true,
+      is_deleted: false,
+      is_comment: false,
+      channel: 'whatsapp',
+      sent_to_vendor: true,
+      replyMessageId: null,
+      agent_name: 'arl@beem.co.tz',
+      df_agent_name: 'Dev arl',
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
     },
   ];
-
-  const statusa = 'rejected';
-
-  const getStatusValue = (status) => {
-    const STATUSES_V2 = {
-      pending: BmPrimaryGold,
-      inprogress: BmPrimaryBlue,
-      'sent-to-mno': BmSecondaryPurple,
-      whitelisted: BmBgLightBlue,
-      'partial-approved': BmSecondaryGreen8,
-      active: BmSecondaryGreen,
-      rejected: BmSecondaryRed,
-      inactive: BmGrey400,
-    };
-    return STATUSES_V2[status] || '';
-  };
-
   return (
     <>
       <GlobalStyle />
-      <BmButtonGroup>
-        {Occurance &&
-          Occurance.map((e) => (
-            <BmButtonGroup.Item onClick={() => setItem(e)} active={e === item}>
-              <p>{e}</p>
-            </BmButtonGroup.Item>
+
+      <BmChat>
+        <BmChat.Body>
+          {msg.map((ms) => (
+            <BmChat.Details
+              key={ms.id}
+              state={ms.direction}
+              metadata={ms.metadata ? ms.metadata.prev_message : null}
+            >
+              <p>{ms.message}</p>
+            </BmChat.Details>
           ))}
-      </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);
-            }}
-          >
-            {dayInitial}
-          </BmStepper>
-        );
-      })}
-      <BmRowLabel disabled>Hello</BmRowLabel>
-      <BmTag
-        color={getStatusValue(statusa)}
-        leadingIcon={<CircleIcon />}
-        size="xsmall"
-        textColor="black"
-        bgColor={BmGrey50}
-      >
-        <p>Hello</p>
-      </BmTag>
+        </BmChat.Body>
+      </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 0.25rem;
+  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}>
+                    {metadata}
+                  </Messages>
+                  {children}
+                </RepliedTextWrapper>
+              ) : (
+                <Messages state={state}>{children}</Messages>
+              )}
+            </>
+          )}
           {/* For files */}
           {file && (
             <BmFileAttachment