beem-component 2.0.13 → 2.0.15

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

@@ -19,7 +19,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", "metadata", "type"];
+  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "isInteractive", "type"];
 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; }
@@ -50,8 +50,9 @@ var MessageDetails = _styledComponents.default.div.withConfig({
 var Messages = _styledComponents.default.div.withConfig({
   displayName: "chatBody__Messages"
 })(["display:flex;flex-direction:", ";align-items:", ";padding:1rem 0.5rem;background:", ";color:", ";border-radius:", ";border-left:", ";border:", ";word-break:break-word;margin:0rem;"], function (_ref2) {
-  var type = _ref2.type;
-  if (type === 'interactive') {
+  var type = _ref2.type,
+    isInteractive = _ref2.isInteractive;
+  if (type === 'interactive' || isInteractive) {
     return 'column';
   }
   return 'row';
@@ -306,7 +307,7 @@ var RepliedTextWrapper = _styledComponents.default.div.withConfig({
 });
 exports.RepliedTextWrapper = RepliedTextWrapper;
 BmChat.Details = function (_ref23) {
-  var _children$content, _children$content2, _children$content3, _children$content4, _children$content5, _children$options, _children$globalButto;
+  var _metadata$content, _metadata$content2, _metadata$content3, _metadata$content4, _metadata$content5, _metadata$options, _metadata$globalButto, _children$content, _children$content2, _children$content3, _children$content4, _children$content5, _children$options, _children$globalButto;
   var children = _ref23.children,
     state = _ref23.state,
     displayTime = _ref23.displayTime,
@@ -320,6 +321,7 @@ BmChat.Details = function (_ref23) {
     feedPostComments = _ref23.feedPostComments,
     agentName = _ref23.agentName,
     metadata = _ref23.metadata,
+    isInteractive = _ref23.isInteractive,
     type = _ref23.type,
     rest = _objectWithoutProperties(_ref23, _excluded3);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Details, _extends({
@@ -336,14 +338,36 @@ BmChat.Details = function (_ref23) {
     fileName: fileName
   }, rest)), children && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, metadata ? /*#__PURE__*/_react.default.createElement(RepliedTextWrapper, {
     state: state
-  }, /*#__PURE__*/_react.default.createElement(Messages, {
+  }, metadata.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(Messages, {
+    isInteractive: isInteractive,
+    type: type,
+    state: state,
+    isImg: true
+  }, (metadata === null || metadata === void 0 ? void 0 : (_metadata$content = metadata.content) === null || _metadata$content === void 0 ? void 0 : _metadata$content.url) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+    state: state,
+    src: metadata === null || metadata === void 0 ? void 0 : (_metadata$content2 = metadata.content) === null || _metadata$content2 === void 0 ? void 0 : _metadata$content2.url
+  }, rest)), /*#__PURE__*/_react.default.createElement("strong", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$content3 = metadata.content) === null || _metadata$content3 === void 0 ? void 0 : _metadata$content3.header), /*#__PURE__*/_react.default.createElement("p", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$content4 = metadata.content) === null || _metadata$content4 === void 0 ? void 0 : _metadata$content4.text), /*#__PURE__*/_react.default.createElement("small", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$content5 = metadata.content) === null || _metadata$content5 === void 0 ? void 0 : _metadata$content5.caption), metadata === null || metadata === void 0 ? void 0 : (_metadata$options = metadata.options) === null || _metadata$options === void 0 ? void 0 : _metadata$options.map(function (button) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-key
+      _react.default.createElement(IntButton, {
+        state: state
+      }, button === null || button === void 0 ? void 0 : button.title)
+    );
+  })) : metadata.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(Messages, {
+    isInteractive: isInteractive,
+    type: type,
+    state: state
+  }, /*#__PURE__*/_react.default.createElement("strong", null, metadata === null || metadata === void 0 ? void 0 : metadata.title), /*#__PURE__*/_react.default.createElement("p", null, metadata === null || metadata === void 0 ? void 0 : metadata.body), /*#__PURE__*/_react.default.createElement(IntButton, {
+    state: state
+  }, /*#__PURE__*/_react.default.createElement(_List.default, null), metadata === null || metadata === void 0 ? void 0 : (_metadata$globalButto = metadata.globalButtons[0]) === null || _metadata$globalButto === void 0 ? void 0 : _metadata$globalButto.title)) : /*#__PURE__*/_react.default.createElement(Messages, {
     metadata: metadata,
     state: state
   }, metadata), children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type && type === 'interactive' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
     state: state,
     isImg: true
-  }, (children === null || children === void 0 ? void 0 : (_children$content = children.content) === null || _children$content === void 0 ? void 0 : _children$content.caption) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+  }, (children === null || children === void 0 ? void 0 : (_children$content = children.content) === null || _children$content === void 0 ? void 0 : _children$content.url) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
     state: state,
     src: children === null || children === void 0 ? void 0 : (_children$content2 = children.content) === null || _children$content2 === void 0 ? void 0 : _children$content2.url
   }, rest)), /*#__PURE__*/_react.default.createElement("strong", null, children === null || children === void 0 ? void 0 : (_children$content3 = children.content) === null || _children$content3 === void 0 ? void 0 : _children$content3.header), /*#__PURE__*/_react.default.createElement("p", null, children === null || children === void 0 ? void 0 : (_children$content4 = children.content) === null || _children$content4 === void 0 ? void 0 : _children$content4.text), /*#__PURE__*/_react.default.createElement("small", null, children === null || children === void 0 ? void 0 : (_children$content5 = children.content) === null || _children$content5 === void 0 ? void 0 : _children$content5.caption), children === null || children === void 0 ? void 0 : (_children$options = children.options) === null || _children$options === void 0 ? void 0 : _children$options.map(function (button) {

package/dist/components/ProfileIcon/ProfileIcon.js

@@ -43,11 +43,17 @@ var ProfileImg = _styledComponents.default.img.withConfig({
 });
 var Profile = _styledComponents.default.div.withConfig({
   displayName: "ProfileIcon__Profile"
-})(["height:", ";width:", ";border-radius:50%;border:1px solid ", ";display:flex;align-items:center;justify-content:center;position:relative;background:", ";"], function (props) {
+})(["height:", ";width:", ";border-radius:50%;border:", ";display:flex;align-items:center;justify-content:center;position:relative;background:", ";"], function (props) {
   return handleSize(props.size);
 }, function (props) {
   return handleSize(props.size);
-}, _colors.BmBgLightBlue, _colors.BmSecondaryBlue12);
+}, function (_ref) {
+  var multiChannel = _ref.multiChannel;
+  if (multiChannel) {
+    return ".1429rem solid ".concat(multiChannel, " ");
+  }
+  return ".0714rem solid ".concat(_colors.BmBgLightBlue);
+}, _colors.BmSecondaryBlue12);
 var Content = _styledComponents.default.div.withConfig({
   displayName: "ProfileIcon__Content"
 })(["display:flex;align-items:center;justify-content:center;position:absolute;"]);
@@ -56,12 +62,12 @@ var Dot = _styledComponents.default.img.withConfig({
 })(["position:absolute;left:", ";bottom:0rem;object-fit:contain;height:1rem;width:1rem;"], function (props) {
   return position(props.size);
 });
-var BmProfileIcon = function BmProfileIcon(_ref) {
-  var img = _ref.img,
-    content = _ref.content,
-    channel = _ref.channel,
-    size = _ref.size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var BmProfileIcon = function BmProfileIcon(_ref2) {
+  var img = _ref2.img,
+    content = _ref2.content,
+    channel = _ref2.channel,
+    size = _ref2.size,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Profile, _extends({
     size: size
   }, rest), content && !img && /*#__PURE__*/_react.default.createElement(Content, null, content), img && !content && /*#__PURE__*/_react.default.createElement(ProfileImg, {

package/package.json

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

package/src/App.js

@@ -1,6 +1,6 @@
 // * eslint-disable func-style *
 /* eslint-disable jsx-a11y/media-has-caption */
-import React from 'react';
+import React, { useState } from 'react';
 import AbcIcon from '@mui/icons-material/Abc';
 // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
 
@@ -14,6 +14,10 @@ import {
   BmButton,
   BmButtonDropDown,
   BmBtnIcon,
+  BmContactCard,
+  BmContactCheckbox,
+  BmCounter,
+  BmProfileIcon,
 } from './lib/components';
 
 const Chat = () => {
@@ -39,6 +43,517 @@ const Chat = () => {
       statusCode: 3,
     },
   };
+  const x = {
+    id: 64816,
+    message: 'Give Feedback',
+    time: '2025-02-13T11:19:42.000Z',
+    direction: 'inbound',
+    message_type: 'text',
+    messageId: null,
+    is_live_agent: 1,
+    is_deleted: 0,
+    is_comment: 0,
+    channel: 'whatsapp',
+    sent_to_vendor: 1,
+    replyMessageId: '035a7484-ee02-4829-8cb5-33c4623f1c8a',
+    agent_name: null,
+    df_agent_name: null,
+    resolve_time: null,
+    metadata: {
+      id: '6538d48e-1b17-45e8-8e44-be457d3695c0',
+      prev_message:
+        '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"We value your opinion! Would you be willing to take a short survey to help us improve?","caption":""},"options":[{"type":"text","title":"Give Feedback","postbackText":"bm-feedback|0|181661e8-9209-4665-ad19-680981136ae8"},{"type":"text","title":"No Thank you","postbackText":"dev-defined-postback2"}]}}',
+    },
+  };
+  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,
+      },
+    },
+    {
+      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,
+      },
+    },
+    {
+      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',
+      },
+    },
+    {
+      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,
+    },
+    {
+      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,
+      },
+    },
+    {
+      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,
+    },
+    {
+      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,
+    },
+    {
+      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 parsed = JSON.stringify(message.message);
   // const dotGoV2Content = parsed?.dotgoV2;
   const data = {
@@ -101,7 +616,23 @@ const Chat = () => {
     const parsedMessage = JSON.parse(message.message);
     const dotGoV2Content = parsedMessage?.dotgoV2;
     console.log({ parsedMessage });
-    console.log(dotGoV2Content);
+    console.log({ dotGoV2Content });
+    return dotGoV2Content;
+  };
+  const [checkboxVisibility, setCheckboxVisibility] = useState([]);
+
+  // Handler function for the checkbox change event
+  const handleCheckboxChange = (index, checked) => {
+    const updatedVisibility = [...checkboxVisibility]; // Create a copy of the visibility state array
+    updatedVisibility[index] = checked; // Update the visibility state for the corresponding checkbox
+    setCheckboxVisibility(updatedVisibility); // Update the state
+  };
+
+  const renderJsonMessagex = () => {
+    const parsedMessage = JSON.parse(x.metadata.prev_message);
+    const dotGoV2Content = parsedMessage?.dotgoV2;
+    console.log({ parsedMessage });
+    console.log({ dotGoV2Content });
     return dotGoV2Content;
   };
   console.log(data);
@@ -451,6 +982,50 @@ const Chat = () => {
               goes this wide mhhhhhh interesting
             </p> */}
         </BmChat.Details>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          sessionTimeline={{ message: <p>12:00pm</p> }}
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // type="interactive"
+          metadata={renderJsonMessagex()}
+          isInteractive="true"
+        >
+          <p>{x.message}</p>
+        </BmChat.Details>
+        <BmContactCard />
+      </BmChat>
+      <BmChat>
+        <BmChat.Body>
+          {msg.map((ms, index) => (
+            <BmContactCard isVisible={checkboxVisibility[index]}>
+              <BmContactCard.Profile>
+                <BmProfileIcon size="medium" multiChannel="b6fc03" />
+              </BmContactCard.Profile>
+              <BmContactCard.Details>
+                <BmContactCard.SubDetails>
+                  <h3>Contact Names</h3>
+                  <BmContactCheckbox
+                    isVisible={checkboxVisibility[index]}
+                    onChange={(event) =>
+                      handleCheckboxChange(index, event.target.checked)
+                    }
+                    checked={checkboxVisibility[index]}
+                  />
+                </BmContactCard.SubDetails>
+                <BmContactCard.SubDetails>
+                  <p>Message text</p>
+                  <BmCounter>10</BmCounter>
+                </BmContactCard.SubDetails>
+                <BmContactCard.SubDetails>
+                  <BmTag variant="success">{ms.id}</BmTag>
+                  <p>10:00 am</p>
+                </BmContactCard.SubDetails>
+              </BmContactCard.Details>
+            </BmContactCard>
+          ))}
+        </BmChat.Body>
       </BmChat>
     </>
   );

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable react/display-name */
 import React from 'react';
 import { Done, DoneAll } from '@material-ui/icons';
@@ -72,8 +73,8 @@ const MessageDetails = styled.div`
 
 const Messages = styled.div`
   display: flex;
-  flex-direction: ${({ type }) => {
-    if (type === 'interactive') {
+  flex-direction: ${({ type, isInteractive }) => {
+    if (type === 'interactive' || isInteractive) {
       return 'column';
     }
     return 'row';
@@ -376,6 +377,7 @@ BmChat.Details = ({
   feedPostComments,
   agentName,
   metadata,
+  isInteractive,
   type,
   ...rest
 }) => {
@@ -403,9 +405,48 @@ BmChat.Details = ({
             <>
               {metadata ? (
                 <RepliedTextWrapper state={state}>
-                  <Messages metadata={metadata} state={state}>
-                    {metadata}
-                  </Messages>
+                  {metadata.type === 'quick_reply' ? (
+                    <Messages
+                      isInteractive={isInteractive}
+                      type={type}
+                      state={state}
+                      isImg
+                    >
+                      {metadata?.content?.url && (
+                        <BmImageChat
+                          state={state}
+                          src={metadata?.content?.url}
+                          {...rest}
+                        />
+                      )}
+
+                      <strong>{metadata?.content?.header}</strong>
+                      <p>{metadata?.content?.text}</p>
+                      <small>{metadata?.content?.caption}</small>
+                      {metadata?.options?.map((button) => (
+                        // eslint-disable-next-line react/jsx-key
+                        <IntButton state={state}>{button?.title}</IntButton>
+                      ))}
+                    </Messages>
+                  ) : metadata.type === 'quick_reply' ? (
+                    <Messages
+                      isInteractive={isInteractive}
+                      type={type}
+                      state={state}
+                    >
+                      <strong>{metadata?.title}</strong>
+                      <p>{metadata?.body}</p>
+                      <IntButton state={state}>
+                        <ListIcon />
+                        {metadata?.globalButtons[0]?.title}
+                      </IntButton>
+                    </Messages>
+                  ) : (
+                    <Messages metadata={metadata} state={state}>
+                      {metadata}
+                    </Messages>
+                  )}
+
                   {children}
                 </RepliedTextWrapper>
               ) : (
@@ -414,7 +455,7 @@ BmChat.Details = ({
                     <>
                       {children.type === 'quick_reply' ? (
                         <Messages type={type} state={state} isImg>
-                          {children?.content?.caption && (
+                          {children?.content?.url && (
                             <BmImageChat
                               state={state}
                               src={children?.content?.url}

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

@@ -38,7 +38,12 @@ const Profile = styled.div`
   height: ${(props) => handleSize(props.size)};
   width: ${(props) => handleSize(props.size)};
   border-radius: 50%;
-  border: 1px solid ${BmBgLightBlue};
+  border: ${({ multiChannel }) => {
+    if (multiChannel) {
+      return `.1429rem solid ${multiChannel} `;
+    }
+    return `.0714rem solid ${BmBgLightBlue}`;
+  }};
   display: flex;
   align-items: center;
   justify-content: center;