beem-component 2.1.29 → 2.1.30

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

@@ -7,6 +7,9 @@ exports.default = exports.RepliedTextWrapper = exports.MessageState = exports.Bm
 var _react = _interopRequireWildcard(require("react"));
 var _icons = require("@material-ui/icons");
 var _FilePresent = _interopRequireDefault(require("@mui/icons-material/FilePresent"));
+var _PhoneCallbackOutlined = _interopRequireDefault(require("@mui/icons-material/PhoneCallbackOutlined"));
+var _PhoneOutlined = _interopRequireDefault(require("@mui/icons-material/PhoneOutlined"));
+var _PhoneMissed = _interopRequireDefault(require("@mui/icons-material/PhoneMissed"));
 var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactAvatar = _interopRequireDefault(require("react-avatar"));
@@ -23,6 +26,7 @@ var _FeedPostComments = require("./FeedPostComments");
 const _excluded = ["state", "file", "src", "fileName", "onDownload", "extension", "link"],
   _excluded2 = ["state", "src", "extensions", "fileName"],
   _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "isInteractive", "type", "extension"];
+/* eslint-disable react/no-array-index-key */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/display-name */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,6 +35,42 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 _reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+const formatDuration = totalSeconds => {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) {
+    return "".concat(String(hours).padStart(2, '0'), ":") + "".concat(String(minutes).padStart(2, '0'), ":") + "".concat(String(seconds).padStart(2, '0'));
+  }
+  return "".concat(String(minutes).padStart(2, '0'), ":") + "".concat(String(seconds).padStart(2, '0'));
+};
+const formatCallDuration = totalSeconds => {
+  // eslint-disable-next-line no-param-reassign
+  if (!totalSeconds || totalSeconds < 0) totalSeconds = 0;
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  let result = '';
+  if (hours > 0) result += "".concat(hours, " hr ");
+  result += "".concat(minutes, " min ").concat(seconds, " sec");
+  return result.trim();
+};
+const useCallDuration = (running, callStartedAt) => {
+  const [seconds, setSeconds] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (!running || !callStartedAt) return;
+    const startTime = new Date(callStartedAt).getTime();
+    const updateSeconds = () => {
+      const now = Date.now();
+      const elapsed = Math.max(Math.floor((now - startTime) / 1000), 0);
+      setSeconds(elapsed);
+    };
+    updateSeconds();
+    const intervalId = setInterval(updateSeconds, 1000);
+    return () => clearInterval(intervalId);
+  }, [running, callStartedAt]);
+  return formatDuration(seconds);
+};
 const BmChat = _styledComponents.default.div.withConfig({
   displayName: "chatBody__BmChat"
 })(["display:flex;flex-direction:column;height:100%;", ""], '' /* border: 0.071rem solid ${BmGrey400}; */);
@@ -39,7 +79,7 @@ BmChat.Body = _styledComponents.default.div.withConfig({
 })(["display:flex;flex-direction:column-reverse;padding:0rem 1rem;flex-grow:1;overflow:auto;height:100%;"]);
 const Details = _styledComponents.default.div.withConfig({
   displayName: "chatBody__Details"
-})(["display:flex;justify-content:", ";> *:not(:last-child){margin-right:1rem;margin-bottom:0.5rem;}overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;import{extension}from 'mime-types';flex-grow:1;", ""], _ref => {
+})(["display:flex;justify-content:", ";> *:not(:last-child){margin-right:1rem;margin-bottom:0.5rem;}overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;flex-grow:1;", ""], _ref => {
   let {
     state
   } = _ref;
@@ -187,23 +227,73 @@ const CartContent = _styledComponents.default.div.withConfig({
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
+const CallContainer = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__CallContainer"
+})(["display:flex;flex-direction:row;gap:0.6rem;align-items:center;justify-content:center;color:", ";"], _ref11 => {
+  let {
+    state
+  } = _ref11;
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+});
+const CallInfoContainer = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__CallInfoContainer"
+})(["display:flex;padding-right:1.5rem;flex-direction:column;gap:0.3rem;align-items:center;justify-content:center;color:", ";& >:last-child{color:", ";}"], _ref12 => {
+  let {
+    state
+  } = _ref12;
+  if (state) {
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+}, _ref13 => {
+  let {
+    state
+  } = _ref13;
+  return state === 'inbound' ? '#A6A29F' : '#cde3ddff';
+});
+const IconContainer = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__IconContainer"
+})(["display:flex;align-items:center;justify-content:center;width:max-content;height:max-content;padding:0.8rem;border:", ";border-radius:50%;background-color:", ";"], _ref14 => {
+  let {
+    state
+  } = _ref14;
+  if (state) {
+    if (state === 'inbound') return "1px solid #F3F4F6";
+    if (state === 'outbound') return "1px solid #5CC1C8";
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+}, _ref15 => {
+  let {
+    state
+  } = _ref15;
+  if (state) {
+    if (state === 'inbound') return "#F3F4F6";
+    if (state === 'outbound') return "#5CC1C8";
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+});
 const 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;"], _ref11 => {
+})(["display:flex;flex-direction:row;align-items:center;> *:not(:last-child){margin-right:0.5rem;}margin-left:", ";margin-top:0.5rem;"], _ref16 => {
   let {
     state
-  } = _ref11;
+  } = _ref16;
   if (state) {
     if (state === 'inbound') return '0px';
     if (state === 'outbound') return 'auto';
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
-const handleState = _ref12 => {
+const handleState = _ref17 => {
   let {
     session,
     agentName
-  } = _ref12;
+  } = _ref17;
   if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
@@ -237,29 +327,29 @@ const FileNameContainer = _styledComponents.default.div.withConfig({
 // Start of File Attachment
 const FileAttachmentWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__FileAttachmentWrapper"
-})(["display:flex;cursor:pointer;flex-direction:row;align-items:center;padding:1rem;background:", ";color:", ";border-radius:", ";border:", ";> *{&:last-child{margin-left:auto;}:not(:last-child){margin-right:0.5rem;}}&&& > *{align-items:center;color:", ";}", " ", ""], _ref13 => {
+})(["display:flex;cursor:pointer;flex-direction:row;align-items:center;padding:1rem;background:", ";color:", ";border-radius:", ";border:", ";> *{&:last-child{margin-left:auto;}:not(:last-child){margin-right:0.5rem;}}&&& > *{align-items:center;color:", ";}", " ", ""], _ref18 => {
   let {
     state
-  } = _ref13;
+  } = _ref18;
   if (state) {
     if (state === 'inbound') return "#F9FAFB";
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, _ref14 => {
+}, _ref19 => {
   let {
     state
-  } = _ref14;
+  } = _ref19;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, _ref15 => {
+}, _ref20 => {
   let {
     state,
     src
-  } = _ref15;
+  } = _ref20;
   if (state) {
     if (state === 'inbound') {
       if (src) {
@@ -275,25 +365,25 @@ const FileAttachmentWrapper = _styledComponents.default.div.withConfig({
     }
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, _ref16 => {
+}, _ref21 => {
   let {
     state
-  } = _ref16;
+  } = _ref21;
   if (state) {
     if (state === 'inbound') return "0.071rem solid ".concat(_colors.BmGrey200, ";");
   }
   return '';
-}, _ref17 => {
+}, _ref22 => {
   let {
     state
-  } = _ref17;
+  } = _ref22;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, '' /* max-width: 100%; */, '' /* max-height: 100%; */);
-const BmFileAttachment = _ref18 => {
+const BmFileAttachment = _ref23 => {
   let {
       state,
       file,
@@ -302,8 +392,8 @@ const BmFileAttachment = _ref18 => {
       onDownload,
       extension,
       link
-    } = _ref18,
-    rest = _objectWithoutProperties(_ref18, _excluded);
+    } = _ref23,
+    rest = _objectWithoutProperties(_ref23, _excluded);
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
     state: state,
     src: src
@@ -322,10 +412,10 @@ const BmFileAttachment = _ref18 => {
 // Start of Component for Images
 const BmImageWrapper = exports.BmImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__BmImageWrapper"
-})(["display:flex;flex-direction:column;color:", ";"], _ref19 => {
+})(["display:flex;flex-direction:column;color:", ";"], _ref24 => {
   let {
     state
-  } = _ref19;
+  } = _ref24;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
@@ -334,24 +424,24 @@ const BmImageWrapper = exports.BmImageWrapper = _styledComponents.default.div.wi
 });
 const BmImage = exports.BmImage = _styledComponents.default.img.withConfig({
   displayName: "chatBody__BmImage"
-})(["", " width:100%;object-fit:cover;flex-grow:1;border-radius:", ";"], '' /* Fix width */, _ref20 => {
+})(["", " width:100%;object-fit:cover;flex-grow:1;border-radius:", ";"], '' /* Fix width */, _ref25 => {
   let {
     state
-  } = _ref20;
+  } = _ref25;
   if (state) {
     if (state === 'inbound') return '.5714rem .5714rem 0rem 0rem';
     if (state === 'outbound') return '.5714rem .5714rem 0rem 0rem';
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
-const BmImageChat = _ref21 => {
+const BmImageChat = _ref26 => {
   let {
       state,
       src,
       extensions,
       fileName
-    } = _ref21,
-    rest = _objectWithoutProperties(_ref21, _excluded2);
+    } = _ref26,
+    rest = _objectWithoutProperties(_ref26, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(BmImage, {
@@ -374,59 +464,174 @@ const MessageState = exports.MessageState = _styledComponents.default.div.withCo
 
 const RepliedTextWrapper = exports.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, _ref22 => {
+})(["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, _ref27 => {
   let {
     state
-  } = _ref22;
+  } = _ref27;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, _ref23 => {
+}, _ref28 => {
   let {
     state
-  } = _ref23;
+  } = _ref28;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryWhite);
 });
-const QuickReplyRender = _ref24 => {
-  var _content$text;
+const QuickReplyRender = _ref29 => {
   let {
     content,
     options,
     type,
     state,
     rest,
-    isInteractive
-  } = _ref24;
+    isInteractive,
+    connector,
+    body,
+    action,
+    header,
+    footer
+  } = _ref29;
+  const MEDIA_TYPES = ['document', 'image', 'video'];
+  const renderers = {
+    dotgo_v3: () => {
+      var _header$header$type, _header$header$type2, _body$text, _action$buttons;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, MEDIA_TYPES.includes(header === null || header === void 0 ? void 0 : header.type) ? /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+        state: state,
+        src: (_header$header$type = header[header.type]) === null || _header$header$type === void 0 ? void 0 : _header$header$type.link
+      }, rest)) : /*#__PURE__*/_react.default.createElement("h5", null, (_header$header$type2 = header[header.type]) === null || _header$header$type2 === void 0 ? void 0 : _header$header$type2.text)), body && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, body === null || body === void 0 || (_body$text = body.text) === null || _body$text === void 0 ? void 0 : _body$text.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("p", {
+        key: "body-line-".concat(idx)
+      }, line, /*#__PURE__*/_react.default.createElement("br", null)))), footer && /*#__PURE__*/_react.default.createElement("small", null, footer === null || footer === void 0 ? void 0 : footer.text), (action === null || action === void 0 || (_action$buttons = action.buttons) === null || _action$buttons === void 0 ? void 0 : _action$buttons.length) > 0 && action.buttons.map((button, idx) => {
+        var _button$button$type;
+        return /*#__PURE__*/_react.default.createElement(IntButton, {
+          state: state,
+          key: "action-btn-".concat(idx)
+        }, (_button$button$type = button[button.type]) === null || _button$button$type === void 0 ? void 0 : _button$button$type.title);
+      }));
+    }
+  };
+  const FallbackRenderer = () => {
+    var _content$text;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (content === null || content === void 0 ? void 0 : content.url) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+      state: state,
+      src: content === null || content === void 0 ? void 0 : content.url
+    }, rest))), (content === null || content === void 0 ? void 0 : content.header) && /*#__PURE__*/_react.default.createElement("strong", null, content.header), content === null || content === void 0 || (_content$text = content.text) === null || _content$text === void 0 ? void 0 : _content$text.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+      key: "content-line-".concat(idx)
+    }, line, /*#__PURE__*/_react.default.createElement("br", null)))), (content === null || content === void 0 ? void 0 : content.caption) && /*#__PURE__*/_react.default.createElement("small", null, content.caption), options === null || options === void 0 ? void 0 : options.map((button, idx) => /*#__PURE__*/_react.default.createElement(IntButton, {
+      state: state,
+      key: "opt-btn-".concat(idx)
+    }, button === null || button === void 0 ? void 0 : button.title)));
+  };
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
   return /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
     state: state,
     isInteractive: isInteractive,
     isImg: true
-  }, (content === null || content === void 0 ? void 0 : content.url) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null));
+};
+const ImageRender = _ref30 => {
+  let {
+    type,
+    state,
+    rest,
+    isInteractive,
+    connector,
+    caption,
+    originalUrl
+  } = _ref30;
+  const renderers = {
+    dotgo_v3: () => {
+      var _caption$text;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, originalUrl && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+        state: state,
+        src: originalUrl
+      }, rest))), caption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, caption === null || caption === void 0 || (_caption$text = caption.text) === null || _caption$text === void 0 ? void 0 : _caption$text.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("p", {
+        key: "body-line-".concat(idx)
+      }, line, /*#__PURE__*/_react.default.createElement("br", null)))));
+    }
+  };
+  const FallbackRenderer = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, originalUrl && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
     state: state,
-    src: content === null || content === void 0 ? void 0 : content.url
-  }, rest)), /*#__PURE__*/_react.default.createElement("strong", null, content === null || content === void 0 ? void 0 : content.header), content === null || content === void 0 || (_content$text = content.text) === null || _content$text === void 0 ? void 0 : _content$text.split('\n').map(line => /*#__PURE__*/_react.default.createElement("p", null, line, /*#__PURE__*/_react.default.createElement("br", null))), /*#__PURE__*/_react.default.createElement("small", null, content === null || content === void 0 ? void 0 : content.caption), options === null || options === void 0 ? void 0 : options.map(button =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/jsx-key
-  _react.default.createElement(IntButton, {
-    state: state
-  }, button === null || button === void 0 ? void 0 : button.title)));
+    src: originalUrl
+  }, rest))), caption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, caption === null || caption === void 0 ? void 0 : caption.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    key: "content-line-".concat(idx)
+  }, line, /*#__PURE__*/_react.default.createElement("br", null))))));
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  return /*#__PURE__*/_react.default.createElement(Messages, {
+    type: type,
+    state: state,
+    isInteractive: isInteractive,
+    isImg: true
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null));
 };
-const ProductDetailRender = _ref25 => {
+const CallRender = _ref31 => {
+  let {
+    type,
+    state,
+    isInteractive,
+    connector,
+    message,
+    status,
+    call_started_at
+  } = _ref31;
+  const duration = useCallDuration(status === 'in_progress', call_started_at);
+  const renderers = {
+    yeastar: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, status === 'in_progress' && /*#__PURE__*/_react.default.createElement(CallContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(IconContainer, {
+      state: state
+    }, state === 'inbound' ? /*#__PURE__*/_react.default.createElement(_PhoneCallbackOutlined.default, {
+      sx: {
+        color: '#4A5565'
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_PhoneOutlined.default, null)), /*#__PURE__*/_react.default.createElement(CallInfoContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement("strong", null, "Voice Call")), /*#__PURE__*/_react.default.createElement("p", null, duration))), status === 'answered' && /*#__PURE__*/_react.default.createElement(CallContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(IconContainer, {
+      state: state
+    }, state === 'inbound' ? /*#__PURE__*/_react.default.createElement(_PhoneCallbackOutlined.default, {
+      sx: {
+        color: '#4A5565'
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_PhoneOutlined.default, null)), /*#__PURE__*/_react.default.createElement(CallInfoContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement("strong", null, "Voice Call")), /*#__PURE__*/_react.default.createElement("p", null, formatCallDuration(message.talk_duration)))), status === 'no answer' && /*#__PURE__*/_react.default.createElement(CallContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(IconContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(_PhoneMissed.default, {
+      sx: {
+        color: '#e64d4dff'
+      }
+    })), /*#__PURE__*/_react.default.createElement(CallInfoContainer, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("h4", null, /*#__PURE__*/_react.default.createElement("strong", null, "Voice Call")), /*#__PURE__*/_react.default.createElement("p", null, "No answer"))))
+  };
+  const FallbackRenderer = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, status));
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  return /*#__PURE__*/_react.default.createElement(Messages, {
+    type: type,
+    state: state,
+    isInteractive: isInteractive,
+    connector: connector,
+    isImg: true
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null));
+};
+const ProductDetailRender = _ref32 => {
   let {
     type,
     state,
     header,
     body,
     isInteractive
-  } = _ref25;
-  console.log(type, state, header, body);
+  } = _ref32;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
     state: state,
@@ -435,69 +640,142 @@ const ProductDetailRender = _ref25 => {
     state: state
   }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, null), "Catalog")));
 };
-const ListReplyRender = _ref26 => {
-  var _globalButtons$;
+const ListReplyRender = _ref33 => {
   let {
     title,
     body,
     globalButtons,
     isInteractive,
     type,
-    state
-  } = _ref26;
+    state,
+    connector,
+    header,
+    action,
+    footer
+  } = _ref33;
+  const renderers = {
+    dotgo_v3: () => {
+      var _header$header$type3, _body$text2;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", null, (_header$header$type3 = header[header.type]) === null || _header$header$type3 === void 0 ? void 0 : _header$header$type3.text)), body && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, body === null || body === void 0 || (_body$text2 = body.text) === null || _body$text2 === void 0 ? void 0 : _body$text2.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("p", {
+        key: "body-line-".concat(idx)
+      }, line, /*#__PURE__*/_react.default.createElement("br", null)))), footer && /*#__PURE__*/_react.default.createElement("small", null, footer === null || footer === void 0 ? void 0 : footer.text), action.button && /*#__PURE__*/_react.default.createElement(IntButton, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement(_List.default, null), action.button));
+    }
+  };
+  const FallbackRenderer = () => {
+    var _globalButtons$;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, title), body.split('\n').map(line => /*#__PURE__*/_react.default.createElement("p", null, line, /*#__PURE__*/_react.default.createElement("br", null))), /*#__PURE__*/_react.default.createElement(IntButton, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(_List.default, null), (_globalButtons$ = globalButtons[0]) === null || _globalButtons$ === void 0 ? void 0 : _globalButtons$.title));
+  };
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
     state: state,
     isInteractive: isInteractive
-  }, /*#__PURE__*/_react.default.createElement("strong", null, title), body.split('\n').map(line => /*#__PURE__*/_react.default.createElement("p", null, line, /*#__PURE__*/_react.default.createElement("br", null))), /*#__PURE__*/_react.default.createElement(IntButton, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(_List.default, null), (_globalButtons$ = globalButtons[0]) === null || _globalButtons$ === void 0 ? void 0 : _globalButtons$.title)));
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null)));
 };
-const OrderRender = _ref27 => {
+const OrderRender = _ref34 => {
   let {
     amount,
     type,
     state,
-    items
-  } = _ref27;
+    items,
+    product_items,
+    connector,
+    isInteractive
+  } = _ref34;
+  const renderers = {
+    dotgo_v3: _ref35 => {
+      let {
+        displayItems,
+        sumQuantities,
+        setDisplayItems
+      } = _ref35;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OrderBody, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement(CartContent, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, {
+        fontSize: "small"
+      }), /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("strong", null, sumQuantities(product_items), ' ', sumQuantities(product_items) > 1 ? 'items' : 'item')))), displayItems ? /*#__PURE__*/_react.default.createElement(OrderBody, {
+        state: state
+      }, product_items.map((data, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CartContent, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement("p", null, index + 1, ". "), /*#__PURE__*/_react.default.createElement(ProductImage, {
+        src: data.imgURL,
+        alt: "product"
+      }), /*#__PURE__*/_react.default.createElement("p", null, data.quantity, " X ", data.description, " @ ", data.currency, ' ', data.amount)), /*#__PURE__*/_react.default.createElement("hr", {
+        style: {
+          width: '100%'
+        }
+      })))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(OrderBody, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement(CartContent, {
+        state: state
+      }, /*#__PURE__*/_react.default.createElement("p", null, ' ', "Estimated Total: ", /*#__PURE__*/_react.default.createElement("strong", null, amount)))), /*#__PURE__*/_react.default.createElement(IntButton, {
+        state: state,
+        onClick: () => {
+          setDisplayItems(!displayItems);
+        }
+      }, /*#__PURE__*/_react.default.createElement("p", null, displayItems ? 'HIDE' : 'SHOW', " CART ITEMS")));
+    }
+  };
+  const FallbackRenderer = _ref36 => {
+    let {
+      sumQuantities,
+      displayItems,
+      setDisplayItems
+    } = _ref36;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OrderBody, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(CartContent, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, {
+      fontSize: "small"
+    }), /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("strong", null, sumQuantities(items), ' ', sumQuantities(items) > 1 ? 'items' : 'item')))), displayItems ? /*#__PURE__*/_react.default.createElement(OrderBody, {
+      state: state
+    }, items.map((data, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CartContent, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("p", null, index + 1, ". "), /*#__PURE__*/_react.default.createElement(ProductImage, {
+      src: data.imgURL,
+      alt: "product"
+    }), /*#__PURE__*/_react.default.createElement("p", null, data.quantity, " X ", data.description, " @ ", data.currency, ' ', data.amount)), /*#__PURE__*/_react.default.createElement("hr", {
+      style: {
+        width: '100%'
+      }
+    })))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(OrderBody, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement(CartContent, {
+      state: state
+    }, /*#__PURE__*/_react.default.createElement("p", null, ' ', "Estimated Total: ", /*#__PURE__*/_react.default.createElement("strong", null, amount)))), /*#__PURE__*/_react.default.createElement(IntButton, {
+      state: state,
+      onClick: () => {
+        setDisplayItems(!displayItems);
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", null, displayItems ? 'HIDE' : 'SHOW', " CART ITEMS")));
+  };
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
   const [displayItems, setDisplayItems] = (0, _react.useState)(false);
-  const sumQuantities = () => {
-    return items === null || items === void 0 ? void 0 : items.reduce((total, item) => {
+  const sumQuantities = data => {
+    return data === null || data === void 0 ? void 0 : data.reduce((total, item) => {
       return total + parseInt(item.quantity, 10);
     }, 0);
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(OrderBody, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(CartContent, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, {
-    fontSize: "small"
-  }), /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("strong", null, sumQuantities(), " ", sumQuantities() > 1 ? 'items' : 'item')))), displayItems ? /*#__PURE__*/_react.default.createElement(OrderBody, {
-    state: state
-  }, items.map((data, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CartContent, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement("p", null, index + 1, ". "), /*#__PURE__*/_react.default.createElement(ProductImage, {
-    src: data.imgURL,
-    alt: "product"
-  }), /*#__PURE__*/_react.default.createElement("p", null, data.quantity, " X ", data.description, " @ ", data.currency, ' ', data.amount)), /*#__PURE__*/_react.default.createElement("hr", {
-    style: {
-      width: '100%'
-    }
-  })))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(OrderBody, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement(CartContent, {
-    state: state
-  }, /*#__PURE__*/_react.default.createElement("p", null, ' ', "Estimated Total: ", /*#__PURE__*/_react.default.createElement("strong", null, amount)))), /*#__PURE__*/_react.default.createElement(IntButton, {
     state: state,
-    onClick: () => {
-      setDisplayItems(!displayItems);
-    }
-  }, /*#__PURE__*/_react.default.createElement("p", null, displayItems ? 'HIDE' : 'SHOW', " CART ITEMS"))));
+    isInteractive: isInteractive
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, {
+    sumQuantities: sumQuantities,
+    setDisplayItems: setDisplayItems,
+    displayItems: displayItems,
+    items: items
+  })));
 };
-BmChat.Details = _ref28 => {
+BmChat.Details = _ref37 => {
+  var _children$message, _children$message2;
   let {
       children,
       state,
@@ -515,8 +793,8 @@ BmChat.Details = _ref28 => {
       isInteractive,
       type,
       extension
-    } = _ref28,
-    rest = _objectWithoutProperties(_ref28, _excluded3);
+    } = _ref37,
+    rest = _objectWithoutProperties(_ref37, _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({
@@ -531,42 +809,64 @@ BmChat.Details = _ref28 => {
     fileName: fileName
   }, rest)), children && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, metadata ? /*#__PURE__*/_react.default.createElement(RepliedTextWrapper, {
     state: state
-  }, metadata.type === 'quick_reply' ? /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
+  }, metadata.message.type === 'quick_reply' || metadata.message.type === 'button' ? /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
     isInteractive: true,
     rest: rest
-  }, metadata, {
+  }, metadata.message, {
     type: type,
-    state: state
-  })) : metadata.type === 'list' ? /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({
+    state: state,
+    connector: metadata.connector
+  })) : metadata.message.type === 'list' ? /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({
     isInteractive: true
-  }, metadata, {
+  }, metadata.message, {
     type: type,
-    state: state
-  })) : metadata.type === 'product_details' ? /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({
+    state: state,
+    connector: metadata.connector
+  })) : metadata.message.type === 'product_details' ? /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({
     isInteractive: true
-  }, metadata, {
+  }, metadata.message, {
     type: type,
     state: state
-  })) : metadata.type === 'order' ? /*#__PURE__*/_react.default.createElement(OrderRender, _extends({}, metadata, {
+  })) : metadata.message.type === 'order' ? /*#__PURE__*/_react.default.createElement(OrderRender, _extends({
+    isInteractive: true
+  }, metadata.message, {
     type: type,
-    state: state
+    state: state,
+    connector: metadata.connector
+  })) : metadata.message.type === 'image' ? /*#__PURE__*/_react.default.createElement(ImageRender, _extends({
+    isInteractive: true
+  }, metadata.message, {
+    type: type,
+    state: state,
+    connector: metadata === null || metadata === void 0 ? void 0 : metadata.connector
   })) : /*#__PURE__*/_react.default.createElement(Messages, {
     metadata: metadata,
     state: state
-  }, metadata), children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type && (type === 'interactive' || type === 'order') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children.type === 'quick_reply' && /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
+  }, metadata.message.text), children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type && (type === 'interactive' || type === 'order') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((children === null || children === void 0 || (_children$message = children.message) === null || _children$message === void 0 ? void 0 : _children$message.type) === 'quick_reply' || (children === null || children === void 0 || (_children$message2 = children.message) === null || _children$message2 === void 0 ? void 0 : _children$message2.type) === 'button') && /*#__PURE__*/_react.default.createElement(QuickReplyRender, _extends({
     rest: rest
-  }, children, {
+  }, children.message, {
     type: type,
-    state: state
-  })), children.type === 'list' && /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({}, children, {
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
+  })), children.message.type === 'list' && /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({}, children.message, {
     type: type,
-    state: state
-  })), children.type === 'product_details' && /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({}, children, {
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
+  })), children.message.type === 'product_details' && /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({}, children.message, {
     type: type,
     state: state
-  })), children.type === 'order' && /*#__PURE__*/_react.default.createElement(OrderRender, _extends({}, children, {
+  })), children.message.type === 'order' && /*#__PURE__*/_react.default.createElement(OrderRender, _extends({}, children.message, {
     type: type,
-    state: state
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
+  })), children.message.type === 'image' && /*#__PURE__*/_react.default.createElement(ImageRender, _extends({}, children.message, {
+    type: type,
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
+  })), children.message.type === 'call' && /*#__PURE__*/_react.default.createElement(CallRender, _extends({}, children.message, {
+    type: type,
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
   }))) : type === 'pdf' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
     file: {
       url: "".concat(file)