beem-component 2.1.29 → 2.1.31

package/src/App.js

@@ -1,39 +1,31 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 // * eslint-disable func-style *
 /* eslint-disable jsx-a11y/media-has-caption */
-import React, { useState } from 'react';
+import React from 'react';
 // import AbcIcon from '@mui/icons-material/Abc';
 // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
-import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-// import PersonIcon from '@mui/icons-material/Person';
+// import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+// import AccessTimeIcon from '@mui/icons-material/AccessTime';
+// import PersonIcon from '@mui/icons-material/Per
+// import BusinessIcon from '@mui/icons-material/Business';
+
+// import CheckIcon from '@mui/icons-material/Check';
+// import EditIcon from '@mui/icons-material/Edit';
+// import DeleteIcon from '@mui/icons-material/Delete';
+// import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 // import { Tooltip } from '@mui/material';
-import PeopleIcon from '@mui/icons-material/People';
-import BusinessIcon from '@mui/icons-material/Business';
+// import PeopleIcon from '@mui/icons-material/People';
+// import BusinessIcon from '@mui/icons-material/Business';
 
 import {
   BmChat,
   GlobalStyle,
-  BmTag,
-  BmChatAccordion,
-  BmAccordion,
-  BmChatForm,
-  // BmButton,
-  // BmButtonDropDown,
-  // BmBtnIcon,
-  BmContactCard,
-  // BmModal,
-  // BmContactCheckbox,
-  // BmCounter,
-  // BmProfileIcon,
-  BmProgressIndicator,
-  BmLabelWithIcon,
   BmCardv2,
-  BmInfoPanel,
   BmButton,
-  BmSelectionNotice,
-  BmSelector,
+  BmProfileIcon,
 } from './lib/components';
+// import AlertBox from './lib/components/Alert/Alert';
+
 // import ProgressIndicator from './lib/components/newProgress';
 
 // const datsa = JSON.stringify({
@@ -54,43 +46,22 @@ import {
 //   },
 // });
 // console.log(datsa);
+
 const Chat = () => {
-  const message = {
-    id: 75681,
-    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"}]}}',
-      '{"dotgoV2":{"type":"order","catalog":{"id":"3987644271555185","order":{"items":[{"id":"107","currency":"TZS","amount":"8000","quantity":"1"},{"id":"109","currency":"TZS","amount":"12000","quantity":"1"},{"id":"111","currency":"TZS","amount":"7000","quantity":"1"}]}},"forwarded":false,"frequently_forwarded":false}}',
-    // '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3987644271555185","header":{"text":"Our Food Menu"},"body":{"text":"*Terms and Conditions for Delivery* \\n- Though we try our best to deliver your food in time, there might be delays\\n- Prices might differ from the ones on the website \\n- Packing charges will be added on the prices \\n- Minimum delivery order TZS 13,000"},"footer":{"text":"Powered by Beem"},"sections":[{"title":"South Indian","productList":[{"productId":95},{"productId":96},{"productId":97},{"productId":98},{"productId":99},{"productId":100},{"productId":101},{"productId":105}]},{"title":"Soups","productList":[{"productId":102},{"productId":103},{"productId":104}]},{"title":"Paratha","productList":[{"productId":106},{"productId":107},{"productId":108},{"productId":109}]},{"title":"Starters & Chaat","productList":[{"productId":110},{"productId":111}]},{"title":"Extras","productList":[{"productId":112},{"productId":113},{"productId":114}]},{"title":"Thali","productList":[{"productId":115},{"productId":116},{"productId":117},{"productId":118}]}]}}',
-    time: '2025-03-19T13:44:25.000Z',
-    direction: 'outbound',
-    message_type: 'order',
-    messageId: null,
-    is_live_agent: 0,
-    is_deleted: 0,
-    is_comment: 0,
-    channel: 'whatsapp',
-    sent_to_vendor: 1,
-    replyMessageId: '0499863a-e784-4404-ae8a-a95f617b9fbe',
-    agent_name: null,
-    df_agent_name: null,
-    resolve_time: null,
-    metadata: null,
-    statusDetails: {
-      statusCode: 3,
-    },
-  };
-  // {
-  //     id: 59605,
+  // const metaQuickReply = [
+  //   {
+  //     id: 104342,
   //     message:
-  //       '{\n  "dotgoV2": {\n    "type": "list",\n    "title": "FAQs",\n    "body": "Here\'s a list of our Frequently Asked Questions",\n    "msgid": "services",\n    "globalButtons": [\n      {\n        "type": "text",\n        "title": "View FAQs"\n      }\n    ],\n    "items": [\n      {\n        "title": "",\n        "subtitle": "",\n        "options": [\n          {\n            "type": "text",\n            "title": "Location",\n            "description": "",\n            "postbackText": "section 1 row 1 postback payload"\n          },\n          {\n            "type": "text",\n            "title": "Visiting Times",\n            "description": "",\n            "postbackText": "section 1 row 2 postback payload"\n          },\n          {\n            "type": "text",\n            "title": "Doctors Available",\n            "description": "",\n            "postbackText": "section 1 row 3 postback payload"\n          },\n          {\n            "type": "text",\n            "title": "Specialities ",\n            "description": "",\n            "postbackText": "section 1 row 4 postback payload"\n          },\n          {\n            "type": "text",\n            "title": "Go back",\n            "description": "",\n            "postbackText": "section 1 row 5 postback payload"\n          }\n        ]\n      }\n    ]\n  }\n}',
-  //     time: '2025-01-29T05:59:46.000Z',
-  //     direction: 'outbound',
-  //     message_type: 'text',
-  //     messageId: null,
+  //       '{\n   "type":"list",\n   "body":{\n      "text":"Please select a service from the options below:"\n   },\n   "footer":{\n      "text":"You can only select one option"\n   },\n   "action":{\n      "button":"Choose Service",\n      "sections":[\n         {\n            "title":"Financial Services",\n            "rows":[\n               {\n                  "id":"loan_services",\n                  "title":"Loan Services",\n                  "description":"Get personal or business loans"\n               },\n               {\n                  "id":"savings_services",\n                  "title":"Savings & Investments",\n                  "description":"Grow your money with our plans"\n               }\n            ]\n         },\n         {\n            "title":"Customer Support",\n            "rows":[\n               {\n                  "id":"support_faq",\n                  "title":"FAQ",\n                  "description":"Common questions answered"\n               },\n               {\n                  "id":"contact_agent",\n                  "title":"Contact an Agent",\n                  "description":"Chat with a live support agent"\n               }\n            ]\n         },\n         {\n            "title":"Promotions",\n            "rows":[\n               {\n                  "id":"discounts",\n                  "title":"Discounts & Offers",\n                  "description":"Check out latest promotions"\n               }\n            ]\n         }\n      ]\n   }\n}',
+
+  //     time: '2025-09-17T10:08:10.000Z',
+  //     direction: 'inbound',
+  //     message_type: 'interactive',
+  //     messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
   //     is_live_agent: 0,
   //     is_deleted: 0,
   //     is_comment: 0,
-  //     channel: 'facebook',
+  //     channel: 'whatsapp',
   //     sent_to_vendor: 1,
   //     replyMessageId: null,
   //     agent_name: null,
@@ -100,238 +71,44 @@ const Chat = () => {
   //     statusDetails: {
   //       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":"product_details","subType":"product_list","catalogId":"3987644271555185","header":{"text":"Our Food Menu"},"body":{"text":"*Terms and Conditions for Delivery* \\n- Though we try our best to deliver your food in time, there might be delays\\n- Prices might differ from the ones on the website \\n- Packing charges will be added on the prices \\n- Minimum delivery order TZS 13,000"},"footer":{"text":"Powered by Beem"},"sections":[{"title":"South Indian","productList":[{"productId":95},{"productId":96},{"productId":97},{"productId":98},{"productId":99},{"productId":100},{"productId":101},{"productId":105}]},{"title":"Soups","productList":[{"productId":102},{"productId":103},{"productId":104}]},{"title":"Paratha","productList":[{"productId":106},{"productId":107},{"productId":108},{"productId":109}]},{"title":"Starters & Chaat","productList":[{"productId":110},{"productId":111}]},{"title":"Extras","productList":[{"productId":112},{"productId":113},{"productId":114}]},{"title":"Thali","productList":[{"productId":115},{"productId":116},{"productId":117},{"productId":118}]}]}}',
-        // '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"HELOOOOOOOOOO", "url": "https://i.imgur.com/BZylAb1.jpeg","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"}]}}',
-        // '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"Thank you we have received your order\\n\\n• 1 X 20\\" Zuri Wig Straight Mirna Caramel Brown - USD 505\\n• 1 X 14\\" Zuri Wig Straight Miss Van Platinum Blonde - USD 960\\n• 1 X 18\\" Zuri Wig Straight Miss Van Platinum Blonde - USD 960\\n• 1 X 10\\" Zuri Wig Straight Monroe Platinum Blonde - USD 505\\n\\n\\n*Proceed to payment to complete order process*","caption":""},"options":[{"type":"text","title":"Proceed to payment","postbackText":"option-defined-postback1"},{"type":"text","title":"Main menu","postbackText":"option-defined-postback2"}]}}',
-        '{"dotgoV2":{"type":"list","title":"","body":"Hey Abdallah,\\n\\n*Welcome to Zuri House Of Beauty* \\n\\nWe offer a range of styles designed by Black women for Black women. Our platform, brand, and financing solutions promote economic mobility for Black women entrepreneurs. \\n\\nHow can I assist you today?","globalButtons":[{"type":"text","title":"Browse Services"}],"items":[{"title":"Browse Services","subtitle":"","options":[{"type":"text","title":"View Products","description":"","postbackText":"section 1 row 1 postback payload"},{"type":"text","title":"Track Order","description":"Enter order id for status","postbackText":"section 1 row 1 postback payload"},{"type":"text","title":"Support","description":"","postbackText":"section 1 row 1 postback payload"},{"type":"text","title":"Feedback","description":"Give feedback","postbackText":"bm-feedback|0|bf5ff7a3-6425-484e-9b7b-6104ec774bff"},{"type":"text","title":"Ask us anything","description":"","postbackText":"section 1 row 1 postback payload"}]}]}}',
-    },
-  };
-  const steps = [
-    { key: 'step1', label: 'Start' },
-    { key: 'step2', label: 'Details' },
-    { key: 'step3', label: 'Review' },
-    { key: 'step4', label: 'Complete' },
-  ];
-
-  const messages = [
-    {
-      id: 78741,
-      message:
-        'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/0c8f668d-f5e6-4325-aa76-4d9af8dd79a7.docx',
-      time: '2025-04-03T05:55:39.000Z',
-      direction: 'inbound',
-      message_type:
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-      messageId: null,
-      is_live_agent: 0,
-      is_deleted: 0,
-      is_comment: 0,
-      channel: 'whatsapp',
-      sent_to_vendor: 1,
-      replyMessageId: null,
-      agent_name: null,
-      df_agent_name: null,
-      resolve_time: null,
-      metadata: null,
-    },
-
-    {
-      id: 78739,
-      message:
-        'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/5f0c7de7-c42b-4a94-b1cd-9fe3554da93d.pdf',
-      time: '2025-04-03T05:50:02.000Z',
-      direction: 'inbound',
-      message_type: 'application/pdf',
-      messageId: null,
-      is_live_agent: 0,
-      is_deleted: 0,
-      is_comment: 0,
-      channel: 'whatsapp',
-      sent_to_vendor: 1,
-      replyMessageId: null,
-      agent_name: null,
-      df_agent_name: null,
-      resolve_time: null,
-      metadata: null,
-    },
-  ];
-  // 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',
+  //     id: 104342,
+
+  //     message:
+  //       '{"type":"button","header":{"type":"image","image":{"link":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/cook.jpg"}},"body":{"text":"Hey there! This is a Breakfast bot. \\nWhat would you like to have?"},"action":{"buttons":[{"type":"reply","reply":{"id":"dev-defined-postback1","title":"Tea"}},{"type":"reply","reply":{"id":"dev-defined-postback2","title":"Coffee"}},{"type":"reply","reply":{"id":"dev-defined-postback3","title":"Chat with Agent"}}]}}',
+
+  //     time: '2025-09-17T10:08:10.000Z',
   //     direction: 'inbound',
-  //     message_type: 'text',
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     message_type: 'interactive',
+  //     messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
+  //     is_live_agent: 0,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
+  //     sent_to_vendor: 1,
   //     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,
+  //     id: 104342,
+  //     message:
+  //       '{\n   "type":"button",\n   "body":{\n      "text":"Hey there! This is a Breakfast bot. \\nWhat would you like to have?"\n   },\n   "action":{\n      "buttons":[\n         {\n            "type":"reply",\n            "reply":{\n               "id":"dev-defined-postback1",\n               "title":"Tea"\n            }\n         },\n         {\n            "type":"reply",\n            "reply":{\n               "id":"dev-defined-postback2",\n               "title":"Coffee"\n            }\n         },\n         {\n            "type":"reply",\n            "reply":{\n               "id":"dev-defined-postback3",\n               "title":"Chat with Agent"\n            }\n         }\n      ]\n   }\n}',
+  //     time: '2025-09-17T10:08:10.000Z',
+  //     direction: 'inbound',
+  //     message_type: 'interactive',
+  //     messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
+  //     is_live_agent: 0,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
+  //     sent_to_vendor: 1,
   //     replyMessageId: null,
   //     agent_name: null,
   //     df_agent_name: null,
@@ -341,36 +118,20 @@ const Chat = () => {
   //       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',
+  //     id: 104342,
+  //     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|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"No Thank You","postbackText":"dev-defined-postback2"}]}}',
+  //     time: '2025-09-17T10:08:10.000Z',
   //     direction: 'outbound',
-  //     message_type: null,
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     message_type: 'interactive',
+  //     messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
+  //     is_live_agent: 0,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
+  //     sent_to_vendor: 1,
   //     replyMessageId: null,
   //     agent_name: null,
   //     df_agent_name: null,
@@ -381,17 +142,18 @@ const Chat = () => {
   //     },
   //   },
   //   {
-  //     message: 'One more time?',
-  //     id: 20223,
-  //     time: '2024-01-19T11:00:59.000Z',
+  //     id: 104342,
+  //     message:
+  //       '{"dotgoV2":{"type":"list","title":"Question 3 of 7","body":"No oh ny","globalButtons":[{"type":"text","title":"Responses"}],"items":[{"title":"Responses","subtitle":"","options":[{"type":"text","title":"1","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"2","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"3","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"4","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"5","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"6","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"7","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"8","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"9","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"10","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"}]}]}}',
+  //     time: '2025-09-17T10:08:10.000Z',
   //     direction: 'outbound',
-  //     message_type: 'text',
-  //     messageId: null,
-  //     is_live_agent: false,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     message_type: 'interactive',
+  //     messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
+  //     is_live_agent: 0,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
+  //     sent_to_vendor: 1,
   //     replyMessageId: null,
   //     agent_name: null,
   //     df_agent_name: null,
@@ -402,56 +164,18 @@ const Chat = () => {
   //     },
   //   },
   //   {
-  //     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',
+  //     id: 104342,
+  //     message:
+  //       '{"dotgoV2":{"type":"quick_reply","content":{"type":"image","header":"yest","url":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/cook.jpg","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|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"No Thank You","postbackText":"dev-defined-postback2"}]}}',
+  //     time: '2025-09-17T10:08:10.000Z',
   //     direction: 'outbound',
-  //     message_type: null,
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     message_type: 'interactive',
+  //     messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
+  //     is_live_agent: 0,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
+  //     sent_to_vendor: 1,
   //     replyMessageId: null,
   //     agent_name: null,
   //     df_agent_name: null,
@@ -462,1179 +186,847 @@ const Chat = () => {
   //     },
   //   },
   //   {
-  //     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',
+  //     id: 104429,
+  //     message: 'Give Feedback',
+  //     time: '2025-09-18T02:48:51.000Z',
   //     direction: 'inbound',
   //     message_type: 'text',
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     messageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
+  //     is_live_agent: 1,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
-  //     replyMessageId: null,
+  //     sent_to_vendor: 1,
+  //     replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
   //     agent_name: null,
   //     df_agent_name: null,
   //     resolve_time: null,
   //     metadata: null,
   //   },
   //   {
-  //     message: 'hi',
-  //     id: 20206,
-  //     time: '2024-01-19T08:46:09.000Z',
+  //     id: 104429,
+  //     message:
+  //       '{"catalog_id":"3567267706900621","product_items":[{"id":182,"currency":"TZS","amount":10000,"quantity":1,"description":"1 Burger Kalimiz Burger Philly Beef","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/a6176a3a-a918-4623-b22d-99ceca7b9fad 1.jpg"},{"id":181,"currency":"TZS","amount":10000,"quantity":1,"description":"1 Burger Kalimiz Burger Bollywood Paneer","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/fed84589-31c5-4ea9-8505-75ceb4932906 1.jpg"}],"type":"order"}',
+  //     time: '2025-09-18T02:48:51.000Z',
   //     direction: 'inbound',
-  //     message_type: 'text',
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     message_type: 'order',
+  //     messageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
+  //     is_live_agent: 1,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
-  //     replyMessageId: null,
+  //     sent_to_vendor: 1,
+  //     replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
   //     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,
+  //     id: 104429,
+  //     message:
+  //       '{"dotgoV2":{"type":"order","catalog":{"id":"3567267706900621","order":{"items":[{"id":181,"currency":"TZS","amount":"10000","quantity":"1","description":"1 Burger Kalimiz Burger Bollywood Paneer","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/fed84589-31c5-4ea9-8505-75ceb4932906 1.jpg"},{"id":182,"currency":"TZS","amount":"10000","quantity":"1","description":"1 Burger Kalimiz Burger Philly Beef","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/a6176a3a-a918-4623-b22d-99ceca7b9fad 1.jpg"}]}},"forwarded":false,"frequently_forwarded":false}}',
+  //     time: '2025-09-18T02:48:51.000Z',
+  //     direction: 'outbound',
+  //     message_type: 'order',
+  //     messageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
+  //     is_live_agent: 1,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
-  //     replyMessageId: null,
+  //     sent_to_vendor: 1,
+  //     replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
   //     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,
+  //     id: 104429,
+
+  //     message:
+  //       '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":181},{"productId":182},{"productId":183}]}]}}',
+  //     time: '2025-09-18T02:48:51.000Z',
+  //     direction: 'outbound',
+  //     message_type: 'interactive',
+  //     messageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
+  //     is_live_agent: 1,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
-  //     replyMessageId: null,
+  //     sent_to_vendor: 1,
+  //     replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
   //     agent_name: null,
   //     df_agent_name: null,
   //     resolve_time: null,
   //     metadata: null,
   //   },
   //   {
-  //     message: 'hi',
-  //     id: 20201,
-  //     time: '2024-01-19T08:40:27.000Z',
+  //     id: 104704,
+  //     message: '3',
+  //     time: '2025-09-19T03:51:43.000Z',
   //     direction: 'inbound',
   //     message_type: 'text',
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     messageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNEMkRFMTEyQUI1OTMxQTQwMzc1Rjk1QjY4M0MyNjYA',
+  //     is_live_agent: 1,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
-  //     replyMessageId: null,
+  //     sent_to_vendor: 1,
+  //     replyMessageId: 'c39b331f-629d-4244-98a2-eeda660fcd7d',
   //     agent_name: null,
   //     df_agent_name: null,
   //     resolve_time: null,
-  //     metadata: null,
+  //     metadata: {
+  //       id: 'c39b331f-629d-4244-98a2-eeda660fcd7d',
+  //       prev_message:
+  //         '{"type":"list","header":{"type":"text","text":"Question 1 of 7"},"body":{"text":"No wway"},"footer":{"text":"Responses"},"action":{"button":"Select an option","sections":[{"title":"Responses","rows":[{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|0","title":"1","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|1","title":"2","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|2","title":"3","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|3","title":"4","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|4","title":"5","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|5","title":"6","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|6","title":"7","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|7","title":"8","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|8","title":"9","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|9","title":"10","description":""}]}]}}',
+  //     },
   //   },
   //   {
-  //     message: 'hi',
-  //     id: 20200,
-  //     time: '2024-01-19T08:39:19.000Z',
-  //     direction: 'inbound',
+  //     id: 104702,
+  //     message: 'Give Feedback',
+  //     time: '2025-09-19T03:51:23.000Z',
+  //     direction: 'outbound',
   //     message_type: 'text',
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     messageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM0RkMzNERFODBCQTI3RTdBMUQzMUY4MzEyQ0FBNzgA',
+  //     is_live_agent: 1,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
-  //     replyMessageId: null,
+  //     sent_to_vendor: 1,
+  //     replyMessageId: '283d451e-3fe2-478c-8d7a-433a703dbab4',
   //     agent_name: null,
   //     df_agent_name: null,
   //     resolve_time: null,
-  //     metadata: null,
+  //     metadata: {
+  //       id: '283d451e-3fe2-478c-8d7a-433a703dbab4',
+  //       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|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"No Thank You","postbackText":"dev-defined-postback2"}]}}',
+  //     },
   //   },
   //   {
-  //     message: 'hi',
-  //     id: 20199,
-  //     time: '2024-01-19T08:37:26.000Z',
+  //     id: 104709,
+  //     message: 'Test',
+  //     time: '2025-09-19T04:16:06.000Z',
   //     direction: 'inbound',
   //     message_type: 'text',
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     messageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxQkQ0NzRGNjBBMkU2NDcwNjEzNTQ1NUJGMzYzNjIA',
+  //     is_live_agent: 1,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
-  //     replyMessageId: null,
+  //     sent_to_vendor: 1,
+  //     replyMessageId: 'f556a647-a115-453f-8461-c2caafc6aeaf',
   //     agent_name: null,
   //     df_agent_name: null,
   //     resolve_time: null,
-  //     metadata: null,
+  //     metadata: {
+  //       id: 'f556a647-a115-453f-8461-c2caafc6aeaf',
+  //       prev_message:
+  //         '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":182}]}]}}',
+  //     },
   //   },
   //   {
-  //     message: 'hi',
-  //     id: 20198,
-  //     time: '2024-01-19T08:36:57.000Z',
+  //     id: 104729,
+  //     message: 'Test',
+  //     time: '2025-09-19T04:36:32.000Z',
   //     direction: 'inbound',
   //     message_type: 'text',
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     messageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1QTU1MTBBM0M2MkE1NUY3M0YyMzI1NkU1RTVEQjQA',
+  //     is_live_agent: 0,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
-  //     replyMessageId: null,
+  //     sent_to_vendor: 1,
+  //     replyMessageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
   //     agent_name: null,
   //     df_agent_name: null,
   //     resolve_time: null,
-  //     metadata: null,
+  //     metadata: {
+  //       id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
+  //       prev_message:
+  //         '{"catalog_id":"3567267706900621","product_items":[{"id":193,"currency":"TZS","amount":10000,"quantity":1,"description":"1 Salad Kalimiz Salad Assian Noodle Salad","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/384d26b3-87cd-407f-a9d3-7b2977ab0a22 1.jpg"}],"type":"order"}',
+  //     },
   //   },
   //   {
-  //     message: 'hi',
-  //     id: 20150,
-  //     time: '2024-01-18T12:47:26.000Z',
+  //     id: 104729,
+  //     message: 'Test',
+  //     time: '2025-09-19T04:36:32.000Z',
   //     direction: 'inbound',
   //     message_type: 'text',
-  //     messageId: null,
-  //     is_live_agent: true,
-  //     is_deleted: false,
-  //     is_comment: false,
+  //     messageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1QTU1MTBBM0M2MkE1NUY3M0YyMzI1NkU1RTVEQjQA',
+  //     is_live_agent: 0,
+  //     is_deleted: 0,
+  //     is_comment: 0,
   //     channel: 'whatsapp',
-  //     sent_to_vendor: true,
-  //     replyMessageId: null,
+  //     sent_to_vendor: 1,
+  //     replyMessageId:
+  //       'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
   //     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,
+  //     metadata: {
+  //       id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
+  //       prev_message:
+  //         '{"dotgoV2":{"type":"order","catalog":{"id":"3567267706900621","order":{"items":[{"id":181,"currency":"TZS","amount":"10000","quantity":"1","description":"1 Burger Kalimiz Burger Bollywood Paneer","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/fed84589-31c5-4ea9-8505-75ceb4932906 1.jpg"},{"id":182,"currency":"TZS","amount":"10000","quantity":"1","description":"1 Burger Kalimiz Burger Philly Beef","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/a6176a3a-a918-4623-b22d-99ceca7b9fad 1.jpg"}]}},"forwarded":false,"frequently_forwarded":false}}',
   //     },
   //   },
   // ];
 
-  // const parsed = JSON.stringify(message.message);
-  // const dotGoV2Content = parsed?.dotgoV2;
-
-  // const data = {
-  //   type: 'list',
-  //   title: 'Our services',
-  //   body: 'Need to schedule an appointment or request a home service? We’ve got you covered!  tap to check out the menu below \n \n👇🏼👇🏼👇🏼👇🏼👇🏼👇🏼👇🏼',
-  //   msgid: 'services',
-  //   globalButtons: [
-  //     {
-  //       type: 'text',
-  //       title: 'Services',
-  //     },
-  //   ],
-  //   items: [
-  //     {
-  //       title: 'Services menu',
-  //       subtitle: '',
-  //       options: [
-  //         {
-  //           type: 'text',
-  //           title: 'Announcements',
-  //           description: 'Incoming doctors',
-  //           postbackText: 'section 1 row 1 postback payload',
-  //         },
-  //         {
-  //           type: 'text',
-  //           title: 'Appointments',
-  //           description: 'Bookings',
-  //           postbackText: 'section 1 row 2 postback payload',
-  //         },
-  //         {
-  //           type: 'text',
-  //           title: 'Home Services',
-  //           description: '',
-  //           postbackText: 'section 1 row 3 postback payload',
-  //         },
-  //         {
-  //           type: 'text',
-  //           title: 'FAQ’s',
-  //           description: 'Frequently Asked Questions',
-  //           postbackText: 'section 1 row 4 postback payload',
-  //         },
-  //         {
-  //           type: 'text',
-  //           title: 'Speak to agent',
-  //           description: '',
-  //           postbackText: 'section 1 row 5 postback payload',
-  //         },
-  //         {
-  //           type: 'text',
-  //           title: 'Go back',
-  //           description: '',
-  //           postbackText: 'section 1 row 6 postback payload',
-  //         },
-  //       ],
-  //     },
-  //   ],
-  // };
-
-  const renderJsonMessage = () => {
+  const metaQuickReply = [
+    {
+      id: 104759,
+      message: 'Second outbound',
+      time: '2025-09-20T05:22:38.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId:
+        'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM4M0JFNzM1QjI4QkQzQjcyQUE4ODdBQzJGMDBBQjQA',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: '36222689-a3e0-4597-8872-9af486fd1fd7',
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: '36222689-a3e0-4597-8872-9af486fd1fd7',
+        prev_message: 'second outbound initiated',
+      },
+    },
+    {
+      id: 104758,
+      message: 'Bounce',
+      time: '2025-09-20T05:19:44.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId:
+        'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxMjAyOUQ0MDQ4MUVBNDM4NTdGNTE2NTlFMUY3REUA',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId:
+        'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM2M0Y2OUI3RkU0RDI2MjFBMDVGRDg1N0RBQkQyMEUA',
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM2M0Y2OUI3RkU0RDI2MjFBMDVGRDg1N0RBQkQyMEUA',
+        prev_message: 'Refeto secomd',
+      },
+    },
+    {
+      id: 104757,
+      message: 'Chai',
+      time: '2025-09-20T05:15:05.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId:
+        'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFNzhDMkRBOUU5OEVDQzhBNThCODhDMzg2RTNCREEA',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: '65352cb5-3800-4e78-aaba-f01dc9aadd58',
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: '65352cb5-3800-4e78-aaba-f01dc9aadd58',
+        prev_message:
+          '{\n   "type":"button",\n   "header":{\n      "type":"image",\n      "image":{\n         "link":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/cook.jpg"\n      }\n   },\n   "body":{\n      "text":"Hey there! This is a Breakfast bot. \\nWhat would you like to have?"\n   },\n   "action":{\n      "buttons":[\n         {\n            "type":"reply",\n            "reply":{\n               "id":"dev-defined-postback1",\n               "title":"Tea"\n            }\n         },\n         {\n            "type":"reply",\n            "reply":{\n               "id":"dev-defined-postback2",\n               "title":"Coffee"\n            }\n         },\n         {\n            "type":"reply",\n            "reply":{\n               "id":"dev-defined-postback3",\n               "title":"Chat with Agent"\n            }\n         }\n      ]\n   }\n}',
+      },
+    },
+    {
+      id: 104756,
+      message: 'Price',
+      time: '2025-09-20T05:11:36.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId:
+        'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFMkM5NTA0NzU2MTU2RjA2MTEwRDBDM0QxOTQxODIA',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId:
+        'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
+        prev_message:
+          '{"catalog_id":"3567267706900621","product_items":[{"id":193,"currency":"TZS","amount":10000,"quantity":2,"description":"1 Salad Kalimiz Salad Assian Noodle Salad","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/384d26b3-87cd-407f-a9d3-7b2977ab0a22 1.jpg"}],"type":"order"}',
+      },
+    },
+    {
+      id: 104755,
+      message: 'Test',
+      time: '2025-09-20T05:11:22.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId:
+        'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxMERENThDNDk0QjExNTE5MUFFNjgwM0M1OUU3NTMA',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
+        prev_message:
+          '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":181}]}]}}',
+      },
+    },
+    {
+      id: 104754,
+      message:
+        '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"Successfully end the session.","caption":""},"options":[{"type":"text","title":"Main Menu","postbackText":"dev-defined-postback1"}]}}',
+      time: '2025-09-20T02:20:00.000Z',
+      direction: 'outbound',
+      message_type: 'interactive',
+      messageId: null,
+      is_live_agent: 1,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      id: 104752,
+      message:
+        '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":181}]}]}}',
+      time: '2025-09-19T08:24:49.000Z',
+      direction: 'outbound',
+      message_type: 'interactive',
+      messageId: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+      agent_name: 'mustafa.s@beem.africa',
+      df_agent_name: 'Mustafa Saifuddin',
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      id: 104751,
+      message:
+        '{"catalog_id":"3567267706900621","product_items":[{"id":193,"currency":"TZS","amount":10000,"quantity":2,"description":"1 Salad Kalimiz Salad Assian Noodle Salad","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/384d26b3-87cd-407f-a9d3-7b2977ab0a22 1.jpg"}],"type":"order"}',
+      time: '2025-09-19T06:30:24.000Z',
+      direction: 'inbound',
+      message_type: 'order',
+      messageId:
+        'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      id: 104750,
+      message:
+        '{"catalog_id":"3567267706900621","product_items":[{"id":193,"currency":"TZS","amount":10000,"quantity":1,"description":"1 Salad Kalimiz Salad Assian Noodle Salad","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/384d26b3-87cd-407f-a9d3-7b2977ab0a22 1.jpg"}],"type":"order"}',
+      time: '2025-09-19T06:29:51.000Z',
+      direction: 'inbound',
+      message_type: 'order',
+      messageId:
+        'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1RDIwQjEyQTY1N0FFMDQzMkU1QUI0MTBENTIyRDkA',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+    },
+    {
+      id: 104749,
+      message:
+        '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":193}]}]}}',
+      time: '2025-09-19T06:29:35.000Z',
+      direction: 'outbound',
+      message_type: 'interactive',
+      messageId: '5f8f5ccc-3a34-44f1-acd6-92c7cad311c8',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+      agent_name: 'mustafa.s@beem.africa',
+      df_agent_name: 'Mustafa Saifuddin',
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      id: 109370,
+      message:
+        '{  "dotgoV2": {    "type": "image",    "caption": "To register for AzamTV MAX, you need to download the AzamTV MAX App from Google Play Store or Apple App Store. \\n\\nOnce you have downloaded the App, follow these steps to register: \\n1. Open the App and click on REGISTER. \\n2. Enter your mobile number. \\n3. Enter the OTP sent to your mobile number. \\n4. Enter your details (Name, Surname, Email, Password) \\n5. Click on REGISTER. \\n\\nDo you need any further assistance?",    "originalUrl": "https://imgur.com/JyXrxLv.png",    "previewUrl": "https://imgur.com/JyXrxLv.png"  }}',
+      time: '2025-10-06T10:53:38.000Z',
+      direction: 'outbound',
+      message_type: 'interactive',
+      messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      id: 109414,
+      message: 'Reply',
+      time: '2025-10-06T11:31:15.000Z',
+      direction: 'inbound',
+      message_type: 'text',
+      messageId: null,
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'whatsapp',
+      sent_to_vendor: 1,
+      replyMessageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: '121302f4-50ca-48c3-a32a-2d570064a000',
+        prev_message:
+          '{  "dotgoV2": {    "type": "image",    "caption": "To register for AzamTV MAX, you need to download the AzamTV MAX App from Google Play Store or Apple App Store. \\n\\nOnce you have downloaded the App, follow these steps to register: \\n1. Open the App and click on REGISTER. \\n2. Enter your mobile number. \\n3. Enter the OTP sent to your mobile number. \\n4. Enter your details (Name, Surname, Email, Password) \\n5. Click on REGISTER. \\n\\nDo you need any further assistance?",    "originalUrl": "https://imgur.com/JyXrxLv.png",    "previewUrl": "https://imgur.com/JyXrxLv.png"  }}',
+      },
+    },
+    {
+      id: 109469,
+      message: 'Image reply',
+      time: '2025-10-06T11:38:34.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: null,
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: {
+        id: 'wamid.HBgMMjU1Njg3MzQ5NTgxFQIAEhgUM0E1NTVGOThBMzk0NTM1OTgyQTMA',
+        prev_message:
+          'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/081c00de-cc02-44f2-bd91-5cf3a5a73d09.jpeg',
+      },
+    },
+    // {
+    //   id: 109370,
+    //   message:
+    //     '{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"ANSWERED","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}',
+    //   time: '2025-10-06T10:53:38.000Z',
+    //   direction: 'outbound',
+    //   message_type: 'call',
+    //   messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+    //   is_live_agent: 0,
+    //   is_deleted: 0,
+    //   is_comment: 0,
+    //   channel: 'voice_call',
+    //   sent_to_vendor: 1,
+    //   replyMessageId: null,
+
+    //   agent_name: null,
+    //   df_agent_name: null,
+    //   resolve_time: null,
+    //   metadata: null,
+    //   statusDetails: {
+    //     statusCode: 3,
+    //   },
+    // },
+    // {
+    //   id: 109370,
+    //   message:
+    //     '{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}',
+    //   time: '2025-10-06T10:53:38.000Z',
+    //   direction: 'outbound',
+    //   message_type: 'call',
+    //   messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+    //   is_live_agent: 0,
+    //   is_deleted: 0,
+    //   is_comment: 0,
+    //   channel: 'voice_call',
+    //   sent_to_vendor: 1,
+    //   replyMessageId: null,
+
+    //   agent_name: null,
+    //   df_agent_name: null,
+    //   resolve_time: null,
+    //   metadata: null,
+    //   statusDetails: {
+    //     statusCode: 3,
+    //   },
+    // },
+    {
+      id: 109373,
+      message:
+        '{"type":"call","status":"in_progress","call_started_at":"2026-01-01T09:35:00.000Z","message":"Call in progress"}',
+      time: '2025-10-06T10:53:38.000Z',
+      direction: 'outbound',
+      message_type: 'interactive',
+      messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'voice_call',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      id: 109373,
+      message:
+        '{"type":"call","status":"answered","call_started_at":"2026-01-01T09:35:00.000Z","message":{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}}',
+      time: '2025-10-06T10:53:38.000Z',
+      direction: 'inbound',
+      message_type: 'interactive',
+      messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'voice_call',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      id: 109373,
+      message:
+        '{"type":"call","status":"no answer","call_started_at":"2026-01-01T09:35:00.000Z","message":{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}}',
+      time: '2025-10-06T10:53:38.000Z',
+      direction: 'inbound',
+      message_type: 'interactive',
+      messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'voice_call',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+    {
+      id: 109373,
+      message:
+        '{"type":"call","status":"no answer","call_started_at":"2026-01-01T09:35:00.000Z","message":{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}}',
+      time: '2025-10-06T10:53:38.000Z',
+      direction: 'outbound',
+      message_type: 'interactive',
+      messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
+      is_live_agent: 0,
+      is_deleted: 0,
+      is_comment: 0,
+      channel: 'voice_call',
+      sent_to_vendor: 1,
+      replyMessageId: null,
+
+      agent_name: null,
+      df_agent_name: null,
+      resolve_time: null,
+      metadata: null,
+      statusDetails: {
+        statusCode: 3,
+      },
+    },
+  ];
+  const isJson = (itemOg) => {
+    let item = itemOg;
+    item = typeof item !== 'string' ? JSON.stringify(item) : item;
+
+    try {
+      item = JSON.parse(item);
+    } catch (e) {
+      return false;
+    }
+    return typeof item === 'object' && item !== null;
+  };
+  const renderJsonMessageMeta = (msg) => {
     let parsedMessage;
+
     try {
-      parsedMessage = JSON.parse(message.message);
+      parsedMessage = JSON.parse(msg.message);
     } catch (error) {
       console.error('Error parsing JSON:', error);
       return null;
     }
 
-    console.log(message.message_type);
     const dotGoV2Content = parsedMessage?.dotgoV2;
+    const finalMessage = dotGoV2Content || parsedMessage;
+    const connector = dotGoV2Content ? 'dotgo_v2' : 'dotgo_v3';
 
-    if (message.message_type === 'order' && dotGoV2Content?.type === 'order') {
-      const items = dotGoV2Content?.catalog?.order?.items || [];
-      if (items.length === 0) {
-        return 0;
-      }
-
-      // Use reduce to calculate total
-      const totalValue = items.reduce((total, item) => {
-        return total + item.amount * item.quantity;
-      }, 0);
+    const calculateOrderSummary = (items) => {
+      if (!items || items.length === 0) return 0;
 
+      const totalValue = items.reduce(
+        (sum, item) => sum + item.amount * item.quantity,
+        0
+      );
       const currency = items[0]?.currency || '';
-      const count = items.length;
       const formattedTotal = totalValue.toLocaleString('en-US');
 
-      return { amount: `${currency} ${formattedTotal}`, type: 'order', count };
-    }
-
-    console.log({ parsedMessage });
-    console.log({ dotGoV2Content });
-    return dotGoV2Content;
-  };
-  // const [checkboxVisibility, setCheckboxVisibility] = useState([]);
+      return {
+        amount: `${currency} ${formattedTotal}`,
+        count: items.length,
+        items,
+      };
+    };
 
-  // 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
-  // };
+    if (msg.message_type === 'order' && finalMessage?.type === 'order') {
+      const items = dotGoV2Content
+        ? finalMessage?.catalog?.order?.items || []
+        : finalMessage?.product_items || [];
 
-  const renderOrderJsonMessage = () => {
-    const parsedMessage = {
-      dotgoV2: {
-        type: 'order',
-        catalog: {
-          id: '1828458897997668',
-          order: {
-            items: [
-              {
-                id: '147',
-                currency: 'USD',
-                amount: '960',
-                quantity: '1',
-              },
-              {
-                id: '144',
-                currency: 'USD',
-                amount: '505',
-                quantity: '1',
-              },
-              {
-                id: '145',
-                currency: 'USD',
-                amount: '505',
-                quantity: '1',
-              },
-              {
-                id: '148',
-                currency: 'USD',
-                amount: '505',
-                quantity: '1',
-              },
-              {
-                id: '149',
-                currency: 'USD',
-                amount: '505',
-                quantity: '1',
-              },
-              {
-                id: '146',
-                currency: 'USD',
-                amount: '960',
-                quantity: '1',
-              },
-            ],
-          },
-        },
-        forwarded: false,
-        frequently_forwarded: false,
-      },
-    };
-    const dotGoV2Content = parsedMessage?.dotgoV2;
-    const items = dotGoV2Content?.catalog?.order?.items || [];
-    if (items.length === 0) {
-      return { amount: 0, type: 'order', count: 0 };
-    }
+      const summary = calculateOrderSummary(items);
 
-    const totalValue = items.reduce((total, item) => {
-      return total + item.amount * item.quantity;
-    }, 0);
+      if (summary === 0) return { amount: 0, type: 'order', count: 0 };
 
-    const currency = items[0]?.currency || '';
-    const count = items.length;
-    const formattedTotal = totalValue.toLocaleString('en-US');
+      return {
+        message: dotGoV2Content
+          ? { ...summary, type: 'order' }
+          : { ...summary, type: 'order', product_items: items },
+        connector,
+      };
+    }
+    if (finalMessage?.type === 'call') {
+      return {
+        message: finalMessage,
+        connector: 'yeastar',
+      };
+    }
 
+    console.log(finalMessage);
     return {
-      amount: `${currency} ${formattedTotal}`,
-      type: 'order',
-      count,
-      items: [
-        {
-          id: 147,
-          currency: 'USD',
-          amount: '960',
-          quantity: '1',
-          description: '18" Zuri Wig Straight Miss Van Platinum Blonde',
-          imgURL:
-            'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Miss Van.jpg',
-        },
-        {
-          id: 144,
-          currency: 'USD',
-          amount: '505',
-          quantity: '1',
-          description: '10" Zuri Wig Straight Mirna Caramel Brown',
-          imgURL:
-            'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Wig Mirna.jpg',
-        },
-        {
-          id: 145,
-          currency: 'USD',
-          amount: '505',
-          quantity: '1',
-          description: '20" Zuri Wig Straight Mirna Caramel Brown',
-          imgURL:
-            'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Wig Mirna.jpg',
-        },
-        {
-          id: 148,
-          currency: 'USD',
-          amount: '505',
-          quantity: '1',
-          description: '10" Zuri Wig Straight Monroe Platinum Blonde',
-          imgURL:
-            'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/monroe-wig-14.jpg',
-        },
-        {
-          id: 149,
-          currency: 'USD',
-          amount: '505',
-          quantity: '1',
-          description: '14" Zuri Wig Straight Monroe Platinum Blonde',
-          imgURL:
-            'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/monroe-wig-14.jpg',
-        },
-        {
-          id: 146,
-          currency: 'USD',
-          amount: '960',
-          quantity: '1',
-          description: '14" Zuri Wig Straight Miss Van Platinum Blonde',
-          imgURL:
-            'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Miss Van.jpg',
-        },
-      ],
+      message: finalMessage,
+      connector,
     };
   };
 
-  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);
-  const image =
-    'https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExc2w1ZnI0OW5xdHk4eXU3bXg3ODFmMmxpZThnYmF2bnNudDN4dXlmaiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/sGsoN9tI8a1k04pNcf/giphy.webp';
-
-  // State to manage the visibility of checkboxes
-
-  // Handler function for the checkbox change event
-
-  const [currentStep, setCurrentStep] = useState(1);
+  const renderMetadataJsonMessage = (metadata) => {
+    let parsedMessage;
 
-  // const appointmentDetails = {
-  //   title: 'Consultation',
-  //   duration: '30 mins',
-  // };
-  // const [selected, setSelected] = useState('');
-  // const slots = [
-  //   {
-  //     label: '10:00 AM - 10:30 AM',
-  //     value: { startDate: '10:00 AM', endDate: '10:30 AM' },
-  //   },
-  //   {
-  //     label: '10:30 AM - 11:10 AM',
-  //     value: { startDate: '10:30 AM', endDate: '11:00 AM' },
-  //   },
-  // ];
-  // console.log({ selected });
+    try {
+      parsedMessage = JSON.parse(metadata.prev_message);
+    } catch (error) {
+      console.error('Error parsing JSON:', error);
+      return null;
+    }
 
-  const formData = {
-    departmentName: 'Marketing',
-    resourceName: 'John Doe',
-    date: new Date(),
-    timeSlot: '09:00 - 09:30',
-    name: 'Jane Smith',
-    phone: '+1234567890',
-    email: 'jane.smith@example.com',
-  };
-  const slots = [
-    {
-      id: 'slot-1',
-      label: '10:00 AM - 10:30 AM',
-      value: { startDate: '10:00 AM', endDate: '10:30 AM' },
-    },
-    {
-      id: 'slot-2',
-      label: '10:30 AM - 11:10 AM',
-      value: { startDate: '10:30 AM', endDate: '11:10 AM' },
-    },
-  ];
+    const dotGoV2Content = parsedMessage?.dotgoV2;
+    const finalMessage = dotGoV2Content || parsedMessage;
+    const connector = dotGoV2Content ? 'dotgo_v2' : 'dotgo_v3';
+    console.log({ finalMessage });
 
-  const [selectedSlotId, setSelectedSlotId] = useState(null);
-  console.log({ selectedSlotId });
-  return (
-    <>
-      <GlobalStyle />
-      <BmSelector
-        data={slots}
-        selectedDataId={selectedSlotId}
-        onChange={setSelectedSlotId}
-        icon={AccessTimeIcon}
-        themeColor="#33B1BA"
-      />
+    const calculateOrderSummary = (items) => {
+      if (!items || items.length === 0) return 0;
 
-      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
-        <div style={{ padding: '2rem' }}>
-          <h1>Progress Indicator Demo</h1>
+      const totalValue = items.reduce(
+        (sum, item) => sum + item.amount * item.quantity,
+        0
+      );
+      const currency = items[0]?.currency || '';
+      const formattedTotal = totalValue.toLocaleString('en-US');
 
-          <BmProgressIndicator
-            steps={steps}
-            currentStep={currentStep}
-            primaryColor="#10b981"
-            className="green" // Optional: for color themes defined in the styled component
-          />
+      console.log({ formattedTotal });
+      return {
+        amount: `${currency} ${formattedTotal}`,
+        count: items.length,
+        items,
+      };
+    };
 
-          {/* <div style={{ marginTop: '2rem' }}>
-            <button
-              type="button"
-              onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-            >
-              Previous
-            </button>
-            <button
-              type="button"
-              onClick={() =>
-                setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
-              }
-            >
-              Next
-            </button>
-          </div> */}
-        </div>
-        <BmCardv2 borderColor="#33B1BA" borderWidth="1.5px">
-          <BmCardv2.Header>
-            <BmCardv2.Title>Profile</BmCardv2.Title>
-            <BmCardv2.Description>
-              Manage your settings below
-            </BmCardv2.Description>
-          </BmCardv2.Header>
-          <BmCardv2.Content>
-            <BmInfoPanel>
-              <BmInfoPanel.Section
-                title="Appointment Details"
-                icon={CalendarTodayIcon}
-                backgroundColor="#fcba03"
-                iconColor="#fcba03"
-              >
-                <BmInfoPanel.SectionSummary
-                  iconColor="#33B1BA"
-                  textColor="#fcba03"
-                  icon={CalendarTodayIcon}
-                  title={formData.departmentName}
-                  subtitle="Department"
-                  // iconBackgroundColor
-                />
-                <BmInfoPanel.SectionSummary
-                  icon={BusinessIcon}
-                  title={formData.departmentName}
-                  subtitle="Department"
-                />
-              </BmInfoPanel.Section>
-            </BmInfoPanel>
-            <BmInfoPanel>
-              {/* <BmInfoPanel.Section
-                title="Appointment Details"
-                icon={CalendarTodayIcon}
-                background_color="rgba(51, 177, 186, 0.05)"
-              >
-                <BmInfoPanel.Row label="Type" value={appointmentDetails.title} />
-                <BmInfoPanel.Row
-                  label="Department"
-                  value={formData.departmentName}
-                />
-                <BmInfoPanel.Row label="Resource" value={formData.resourceName} />
-                <BmInfoPanel.Row
-                  label="Duration"
-                  value={appointmentDetails.duration}
-                />
-                <BmInfoPanel.Row
-                  label="Date"
-                  value={formData.date.toDateString()}
-                />
-                <BmInfoPanel.Row
-                  label="Time"
-                  value={formData.timeSlot.split(' - ')[1]}
-                />
-              </BmInfoPanel.Section> */}
+    if (finalMessage?.type === 'order') {
+      const items = dotGoV2Content
+        ? finalMessage?.catalog?.order?.items || []
+        : finalMessage?.product_items || [];
 
-              {/* <BmInfoPanel.Section
-                title="Personal Information"
-                icon={PersonIcon}
-                showDivider
-              >
-                <BmInfoPanel.Row label="Name" value={formData.name} />
-                <BmInfoPanel.Row label="Phone" value={formData.phone} />
-                <BmInfoPanel.Row label="Email" value={formData.email} />
-              </BmInfoPanel.Section>
-              <BmInfoPanel.Section
-                title="Personal Information"
-                icon={PersonIcon}
-                showDivider
-              >
-                <BmInfoPanel.Row label="Name" value={formData.name} />
-                <BmInfoPanel.Row label="Phone" value={formData.phone} />
-                <BmInfoPanel.Row label="Email" value={formData.email} />
-              </BmInfoPanel.Section> */}
-            </BmInfoPanel>
-          </BmCardv2.Content>
-          <BmCardv2.Footer>
-            <BmButton
-              width="100%"
-              size="medium"
-              borderColor="#33b1ba33"
-              color="#000000"
-              variant="secondary"
-              type="button"
-              onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-            >
-              Cancel
-            </BmButton>
-            <BmButton
-              width="100%"
-              size="medium"
-              type="button"
-              onClick={() =>
-                setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
-              }
-            >
-              Save
-            </BmButton>
-          </BmCardv2.Footer>
-        </BmCardv2>
-      </div>
-      <div>
-        <BmLabelWithIcon
-          textColor="#fcba03"
-          icon={PeopleIcon}
-          iconColor="#fffff"
-          iconSize="16px"
-        >
-          <p>yooo</p>&nbsp;<h4>Team: Engineering</h4>
-        </BmLabelWithIcon>
+      const summary = calculateOrderSummary(items);
 
-        <div>
-          <BmSelectionNotice color="#ff6600">
-            This is a <strong>warning</strong> notice.
-          </BmSelectionNotice>
-        </div>
-        <div style={{ padding: '2rem' }}>
-          <h1>Progress Indicator Demo</h1>
+      if (summary === 0) return { amount: 0, type: 'order', count: 0 };
 
-          <BmProgressIndicator
-            steps={steps}
-            currentStep={currentStep}
-            primaryColor="#10b981"
-            className="green" // Optional: for color themes defined in the styled component
-          />
+      return {
+        message: dotGoV2Content
+          ? { ...summary, type: 'order' }
+          : { ...summary, type: 'order', product_items: items },
+        connector,
+      };
+    }
 
-          <div style={{ marginTop: '2rem' }}>
-            <button
-              type="button"
-              onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-            >
-              Previous
-            </button>
-            <button
-              type="button"
-              onClick={() =>
-                setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
-              }
-            >
-              Next
-            </button>
-          </div>
-        </div>
-        <BmChat.Details
-          key={85279}
-          state="inbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          type="interactive"
-          sessionTimeline={{ message: <p>12:00pm</p> }}
-          style={{ margin: '-0.6% 0 0 0' }}
-        >
-          {renderOrderJsonMessage()}
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          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>
-        <BmChat.Details
-          state="outbound"
-          session="bot"
-          sessionTimeline={{ message: <p>12:00pm</p> }}
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          // type="interactive"
-          isInteractive="true"
-        >
-          <p style={{ whiteSpace: 'pre-line' }}>
-            {`*Order placed successfully!* 
+    return {
+      message: finalMessage,
+      connector,
+    };
+  };
 
- *ORDER ID: 191* 
+  const determineMetadataMessageType = (metadata) => {
+    if (metadata && metadata?.prev_message) {
+      if (isJson(metadata?.prev_message) === true) {
+        return renderMetadataJsonMessage(metadata);
+      }
+      return { message: { type: 'text', text: metadata.prev_message } };
+    }
+  };
+  const determineMetadataIsInteractive = (metadata) => {
+    if (metadata && metadata?.prev_message) {
+      if (isJson(metadata?.prev_message) === true) {
+        return true;
+      }
+      return false;
+    }
+  };
+  return (
+    <>
+      <GlobalStyle />
 
- 1 X 16" Zuri Wig Straight Ciara @ USD 504
-,2 X 18" Zuri Wig Straight Ciara @ USD 504
-,3 X 16" Zuri Wig Straight Feza Caramel Brown @ USD 808`}
-          </p>
-        </BmChat.Details>
-        <BmChatAccordion Open expandIconPosition="left">
-          <BmChatAccordion.Title
-          // trailingIcon={<AbcIcon />}
-          // leadingIcon={<AbcIcon />}
-          >
-            <h3>tesxcxcxt</h3>
-          </BmChatAccordion.Title>
-          <BmChatAccordion.Body>
-            <div
-              style={{
-                marginTop: '.8571rem',
-                border: '.0714rem solid black',
-                borderRadius: '.4286rem',
-                padding: '.4286rem',
-              }}
-            >
-              <p>defdsfsdfsd</p>
-              <p>dsfsdfsdfdsfdsfsdf</p>
-            </div>
-          </BmChatAccordion.Body>
-        </BmChatAccordion>
-        <BmAccordion>
-          <BmAccordion.Title>
-            <h3>Information</h3>
-          </BmAccordion.Title>
-          <BmAccordion.Body>
-            {/* <BmChatForm> */}
-            <div>
-              <BmChatForm.Group>
-                <BmChatForm.Label>
-                  <h4>Account No.</h4>
-                </BmChatForm.Label>
-                <BmChatForm.Input placeholder="Enter here" />
-              </BmChatForm.Group>
-              <BmChatForm.Group>
-                <BmChatForm.Label>
-                  <h4>Preferred Language</h4>
-                </BmChatForm.Label>
-                <BmChatForm.Input placeholder="Enter here" />
-              </BmChatForm.Group>
-            </div>
-            {/* </BmChatForm> */}
-          </BmAccordion.Body>
-        </BmAccordion>
-        <BmTag
-          // variant="danger"
-          // textColor="#17b26a"
-          bgColor="#17b26a"
-          // color="black"
-          closeButton
-          dot
-          // size="xsmall"
-        >
-          <p>Pending</p>
-        </BmTag>
-        <BmTag dot>
-          <p>Bot</p>
-        </BmTag>
-      </div>
-      <BmChat>
-        <BmChat.Body>
+      {metaQuickReply.map((msg, idx) => {
+        return msg.message_type !== 'text' ? (
           <BmChat.Details
-            state="outbound"
-            session="sms"
-            displayTime={<p>12:00pm</p>}
+            key={msg.id || idx} // Prefer a stable unique id if available
+            state={msg.direction}
+            session="bot"
+            displayTime={<p>12:10pm</p>}
             status="sent"
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
+            type={msg.message_type}
+            callLog={msg.message_type === 'call'}
+            sessionTimeline={{ message: '12:00pm' }}
+            style={{ margin: '-0.6% 0 0 0' }}
+            metadata={determineMetadataMessageType(msg.metadata)}
+            isInteractive={determineMetadataIsInteractive(msg.metadata)}
           >
-            <p>
-              Inbound Text kjflksdjfskld jsdlkfjsdlkf jsdlk jfsdlkjf lkjfljflsj
-              ljfljfsjfsofoewjfwej owe we fwofj kwefoweo fiweo ieoi joi fweo
-              fweof welkf jwelfk jweoi fejwof wejfl kwejf oiwej foewijf lwekjf
-              oewi fjlwej foMessage 1 sdkfjdslkjf lksdfj sodifj owijfiwoe
-              jfwoegh woj fpieojwoighjwoei hgwoihgwoij giej
-              foewifjweokjgwlgkjwqeli jgowegihweogwhelgkjwe goiwhroihjg oewjfwle
-              fjwelfjweoighwoei ghwei gjqepif jopqejfkljgwoighwoi ghwoiejh goiwg
-              howej lkwejgwogihwelo kjwoei gjiejf pqeif jpqeofjeiow ghorwughwlkj
-              fiepofj peqwjfpoqejf pioewj gurehglowjk gfwqefjwpoiegpwogijwrp
-              ogjwpo gjwp kfpoewkf opwegjkpwoj wig hioqwe
-              jfqepijfopqekfqpoefkqpoekfqpoe jpqoe jgiqeghj quioehgqoeijg
-              qekfjqepofk poqef pqoe fjepiof jqeifh qeif h
-            </p>
+            {renderJsonMessageMeta(msg)}
           </BmChat.Details>
+        ) : (
           <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            fileName={<p>chat.png</p>}
-            src="https://i.postimg.cc/ydq8vSx3/cyberpunk-2077-samurai-minimalist-uhdpaper-com-4-K-5-1333-min-2.jpg"
-            sessionDetails={{
-              message: <h3>Session Message</h3>,
-              time: <p>12:00pm</p>,
-            }}
-          />
-          <BmChat.Details
-            state="inbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            file={image}
-          />
-          <BmChat.Details
-            state="outbound"
+            key={msg.id || idx} // Prefer a stable unique id if available
+            state={msg.direction}
             session="bot"
-            displayTime={<p>12:00pm</p>}
+            displayTime={<p>12:10pm</p>}
             status="sent"
+            type="text"
+            sessionTimeline={{ message: '12:00pm' }}
+            style={{ margin: '-0.6% 0 0 0' }}
+            metadata={determineMetadataMessageType(msg.metadata)}
+            isInteractive={determineMetadataIsInteractive(msg.metadata)}
           >
-            <p>Outbound Text Message</p>
+            <p>{msg.message}</p>
           </BmChat.Details>
-          <BmChat.Details
-            state="outbound"
-            session="live"
-            displayTime={<p>12:00pm</p>}
-            status="sent"
-            fileName={<p>chat.png</p>}
-            src={image}
-          />
-          <BmChat.Details
-            state="outbound"
-            session="live"
-            displayTime={<p>10:00am</p>}
-            status="failed"
-            fileName={<p>file.csv</p>}
-            file={image}
-            link={image}
-            onDownload={() => {
-              console.log('sdfsfs');
-            }}
-          />
-        </BmChat.Body>
-        {/* <BmChat.Footer>
-          <div className="chat-footer">
-            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-            <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
-            <BmIcons icon={<SendIcon />} size="xlarge" />
-          </div>
-        </BmChat.Footer> */}
-        {/* <div className="w-20">
-          <BmButton size="xsmall" variant="neutral">
-            Hello
-          </BmButton>
-          <BmButton size="xsmall" variant="secondary">
-            Hello
-          </BmButton>
-          <BmButton size="xsmall" variant="primary">
-            Hello
-          </BmButton>
-          <BmButton size="xsmall" variant="destructive">
-            Hello
-          </BmButton>
-          <BmButton size="xsmall" variant="tertiary">
-            Hello
-          </BmButton>
-          <BmButton size="xsmall" variant="success">
-            Hello
-          </BmButton>
-          <BmButton variant="success">Test</BmButton>
-          <div style={{ width: '30%' }}>
-            <BmButtonDropDown size="xsmall">Test</BmButtonDropDown>
-          </div>
-          <BmBtnIcon icon={<AbcIcon />} size="xsmall" />
-        </div>
-        <br />
-        <div style={{ width: '50%' }}>
-          <BmButton size="xsmall" color="black" variant="neutral">
-            Hello
+        );
+      })}
+      <BmCardv2 borderColor="#d62a2af" borderWidth="1.5px" contentHeight="0">
+        <BmCardv2.Header>
+          <BmCardv2.Title>Appointment Summary</BmCardv2.Title>
+          <BmCardv2.Description>
+            This BmCardv2 shows a quick overview of your booking.
+          </BmCardv2.Description>
+        </BmCardv2.Header>
+        <BmCardv2.Content>
+          <p>
+            <strong>Type:</strong> Consultation
+          </p>
+          <p>
+            <strong>Date:</strong> June 24, 2025
+          </p>
+          <p>
+            <strong>Doctor:</strong> Dr. Smith
+          </p>
+        </BmCardv2.Content>
+        <BmCardv2.Footer>
+          <BmButton width="100%" size="medium" variant="primary">
+            Edit
           </BmButton>
-        </div>
-        <BmButton size="small" variant="secondary">
-          Hello
-        </BmButton>
-        <BmButton size="medium" variant="primary">
-          Hello
-        </BmButton>
-        <BmButton variant="success">Hello</BmButton>
-        <BmButton size="large" variant="destructive">
-          Hello
-        </BmButton> */}
-        {/* <BmButton size="small" variant="tertiary">
-            Hello
+          <BmButton
+            borderColor="#000000"
+            width="100%"
+            size="medium"
+            variant="secondary"
+            color="#000000"
+          >
+            Cancel
           </BmButton>
-          <BmButton size="large" variant="success">
-            Hello
-          </BmButton> */}
-        <BmChat.Details
-          state="outbound"
-          session="bot"
-          sessionTimeline={{ message: <p>12:00pm</p> }}
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          type="interactive"
-        >
-          {renderJsonMessage()}
-          {/* {{
-            type: 'list',
-            title: 'Great 😁!',
-            body: 'Please choose how you would want to redeem your points today in store purchase?',
-            msgid: 'redeemPoints',
-            globalButtons: [
-              {
-                type: 'text',
-                title: 'Redeem Points',
-              },
-            ],
-            items: [
-              {
-                title: 'first Section',
-                subtitle: 'first Subtitle',
-                options: [
-                  {
-                    type: 'text',
-                    title: '1000 pts for 10000Tsh',
-                    description: '',
-                    postbackText: 'section 1 row 1 postback payload',
-                  },
-                  {
-                    type: 'text',
-                    title: '5000 pts for 5000Tsh',
-                    description: '',
-                    postbackText: 'section 1 row 2 postback payload',
-                  },
-                  {
-                    type: 'text',
-                    title: '10000 pts for 100000Tsh',
-                    description: '',
-                    postbackText: 'section 1 row 3 postback payload',
-                  },
-                  {
-                    type: 'text',
-                    title: 'Back',
-                    description: '',
-                    postbackText: 'section 1 row 4 postback payload',
-                  },
-                ],
-              },
-            ],
-          }} */}
-          {/* <p>
-              Outbound Text Message that i wanteds to send but i could not send
-              it as whatsapp was down for almost one whole hour but i wonder how
-              wide this message will look and will we have to match it if it
-              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"
-        >
-          {{
-            type: 'quick_reply',
-            msgid: 'redeemMenu',
-            content: {
-              type: 'text',
-              url: 'https://i.imgur.com/BZylAb1.jpeg',
-              header: 'HELOOOOOOOOOO',
-              text: 'In Beem Rewards You can redeem or check points that you have accumulated anytime.\n\nSo, what do you want to do today?',
-              caption: '',
-            },
-            options: [
-              {
-                type: 'text',
-                title: 'Reedem points',
-                postbackText: 'FMCG-defined-postback1',
-              },
-              {
-                type: 'text',
-                title: 'Check points',
-                postbackText: 'FMCG-defined-postback2',
-              },
-              {
-                type: 'text',
-                title: 'Back',
-                postbackText: 'FMCG-defined-postback3',
-              },
-            ],
-          }}
-          {/* <p>
-              Outbound Text Message that i wanteds to send but i could not send
-              it as whatsapp was down for almost one whole hour but i wonder how
-              wide this message will look and will we have to match it if it
-              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"
-        >
-          {{
-            type: 'quick_reply',
-            msgid: 'SaifeeBot',
-            content: {
-              type: 'image',
-              header: 'HELOOOOOOOOOO',
-              url: 'https://i.postimg.cc/ydq8vSx3/cyberpunk-2077-samurai-minimalist-uhdpaper-com-4-K-5-1333-min-2.jpg',
-              text: 'Hello! Welcome to *Saifee Hdkfj kdfj kdfj dkjf kdjf idofj idjf dkf jdif jdkf djf idf jdkf jd dkfjdkjf dkofjosdfj sdoif joewif jwoeifj wefj welkf jweloifjweoifjwo ff wfj fwe gjwpiogw gjwo gwg jwegf ei jwk jgwi jgwijgejgweoi gg wjgewo we jwgjlwejg  gjwoj gwoj gwejogwogwogwekgjwgijwoig jweoijg oiw if jdkf jdif jdkfj dkf jifjoiewrfj okwj ospital* Please select your preferred language \n \nHabari! Karibu *Hospitali ya Saifee* Tafadhali chagua lugha unayopendelea',
-              caption: 'Powered by Beem',
-            },
-            options: [
-              {
-                type: 'text',
-                title: 'English',
-                postbackText: 'dev-defined-postback1',
-              },
-              {
-                type: 'text',
-                title: 'Swahili',
-                postbackText: 'dev-defined-postback2',
-              },
-            ],
-          }}
-
-          {/* <p>
-              Outbound Text Message that i wanteds to send but i could not send
-              it as whatsapp was down for almost one whole hour but i wonder how
-              wide this message will look and will we have to match it if it
-              goes this wide mhhhhhh interesting
-            </p> */}
-        </BmChat.Details>
-
-        <BmContactCard />
-      </BmChat>
-      {/* <BmChat>
-        <BmChat.Body>
-          {msg.map((ms, index) => (
-            <BmContactCard isVisible={checkboxVisibility[index]}>
-              <BmContactCard.Profile>
-                <BmProfileIcon
-                  hoverEnabled
-                  hoverText="dfk dsflksd;"
-                  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> */}
-      <BmChat>
-        <BmChat.Body>
-          {messages.map((ms) => {
-            console.log(ms);
-            return (
-              <BmChat.Details
-                key={ms.id}
-                state={ms.direction}
-                session="bot"
-                sessionTimeline={{ message: <p>12:00pm</p> }}
-                displayTime={<p>12:00pm</p>}
-                status="sent"
-                extension="pdf"
-                file={ms.message}
-                link={ms.message}
-                fileName={<p>File</p>}
-                type="pdf"
-                style={{ margin: '-0.6% 0 0 0' }}
-              >
-                <p>
-                  <a href={ms.message}> </a>
-                </p>
-              </BmChat.Details>
-            );
-          })}
-        </BmChat.Body>
-      </BmChat>
-      <BmChat>
-        <BmChat.Body>
-          {messages.map((ms) => {
-            console.log(ms);
-            return (
-              <BmChat.Details
-                key={ms.id}
-                state={ms.direction}
-                session="bot"
-                sessionTimeline={{ message: <p>12:00pm</p> }}
-                displayTime={<p>12:00pm</p>}
-                status="sent"
-                file={ms.message}
-                link={ms.message}
-                fileName={<p>File</p>}
-                style={{ margin: '-0.6% 0 0 0' }}
-                extension="docx"
-                // state="inbound"
-                // session="live"
-                // displayTime={<p>10:00am</p>}
-                // status="failed"
-                // fileName={<p>file.csv</p>}
-                // file={image}
-              />
-            );
-          })}
-        </BmChat.Body>
-      </BmChat>
-      <BmAccordion expandIconPosition="right">
-        <BmAccordion.Title size="small">Contacts</BmAccordion.Title>
-        <BmAccordion.Body>
-          <div className="accordion-body">
-            <BmAccordion expandIcon="none">
-              <BmAccordion.Title>
-                <button
-                  type="button"
-                  onClick={() => {
-                    console.log('click 1');
-                  }}
-                >
-                  Customers
-                </button>
-              </BmAccordion.Title>
-            </BmAccordion>
-
-            <BmAccordion expandIcon="none">
-              <BmAccordion.Title>Reedem History</BmAccordion.Title>
-            </BmAccordion>
-            <BmAccordion expandIcon="none">
-              <BmAccordion.Title>Rewards</BmAccordion.Title>
-            </BmAccordion>
-            <BmAccordion expandIcon="none">
-              <BmAccordion.Title>Pending Redemption</BmAccordion.Title>
-            </BmAccordion>
-          </div>
-        </BmAccordion.Body>
-      </BmAccordion>
+        </BmCardv2.Footer>
+      </BmCardv2>
+      <BmProfileIcon channel="voice_call" />
     </>
   );
 };