beem-component 2.1.32 → 2.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/assets/voiceCallIcon.png +0 -0
  2. package/dist/components/ChatComponents/ChatBody/chatBody.js +34 -14
  3. package/dist/components/ProfileIcon/ProfileIcon.js +1 -1
  4. package/package.json +2 -1
  5. package/src/App.js +502 -308
  6. package/src/lib/assets/voiceCallIcon.png +0 -0
  7. package/src/lib/components/ChatComponents/ChatBody/chatBody.js +48 -26
  8. package/src/lib/components/ProfileIcon/ProfileIcon.js +1 -1
  9. package/dist/assets/voiceCallIcon.svg +0 -5
  10. package/src/lib/assets/voiceCallIcon.svg +0 -5
package/dist/assets/voiceCallIcon.png ADDED
Binary file
package/dist/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -23,7 +23,7 @@ var _sessionDetails = require("./sessionDetails");
23
23
  var _sessionTimeline = require("./sessionTimeline");
24
24
  var _colors = require("../../colors");
25
25
  var _FeedPostComments = require("./FeedPostComments");
26
- const _excluded = ["state", "file", "src", "fileName", "onDownload", "extension", "link"],
26
+ const _excluded = ["state", "file", "src", "fileName", "onDownload", "extension", "link", "caption"],
27
27
  _excluded2 = ["state", "src", "extensions", "fileName"],
28
28
  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "isInteractive", "type", "extension"];
29
29
  /* eslint-disable react/no-array-index-key */
@@ -346,16 +346,23 @@ const FileAttachmentWrapper = _styledComponents.default.div.withConfig({
346
346
  }, _ref20 => {
347
347
  let {
348
348
  state,
349
- src
349
+ src,
350
+ caption
350
351
  } = _ref20;
351
352
  if (state) {
352
353
  if (state === 'inbound') {
354
+ if (caption) {
355
+ return '0rem 0rem 0rem 0rem';
356
+ }
353
357
  if (src) {
354
358
  return '0rem 0rem .5714rem 0rem';
355
359
  }
356
360
  return '.5714rem .5714rem .5714rem 0rem';
357
361
  }
358
362
  if (state === 'outbound') {
363
+ if (caption) {
364
+ return '0rem 0rem 0rem 0rem';
365
+ }
359
366
  if (src) {
360
367
  return '0rem 0rem 0rem .5714rem';
361
368
  }
@@ -389,10 +396,15 @@ const BmFileAttachment = _ref23 => {
389
396
  fileName,
390
397
  onDownload,
391
398
  extension,
392
- link
399
+ link,
400
+ caption
393
401
  } = _ref23,
394
402
  rest = _objectWithoutProperties(_ref23, _excluded);
395
- return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
403
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (file === null || file === void 0 ? void 0 : file.caption) && /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
404
+ state: state,
405
+ caption: true,
406
+ src: caption
407
+ }, rest), file.caption), /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
396
408
  state: state,
397
409
  src: src
398
410
  }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
@@ -405,7 +417,7 @@ const BmFileAttachment = _ref23 => {
405
417
  color: state === 'inbound' ? "".concat(_colors.BmPrimaryBlue) : "".concat(_colors.BmPrimaryWhite)
406
418
  },
407
419
  icon: /*#__PURE__*/_react.default.createElement(_Download.default, null)
408
- })));
420
+ }))));
409
421
  };
410
422
  // Start of Component for Images
411
423
  const BmImageWrapper = exports.BmImageWrapper = _styledComponents.default.div.withConfig({
@@ -433,6 +445,7 @@ const BmImage = exports.BmImage = _styledComponents.default.img.withConfig({
433
445
  return "".concat(_colors.BmPrimaryWhite);
434
446
  });
435
447
  const BmImageChat = _ref26 => {
448
+ var _src$url;
436
449
  let {
437
450
  state,
438
451
  src,
@@ -440,16 +453,21 @@ const BmImageChat = _ref26 => {
440
453
  fileName
441
454
  } = _ref26,
442
455
  rest = _objectWithoutProperties(_ref26, _excluded2);
456
+ const source = (_src$url = src.url) !== null && _src$url !== void 0 ? _src$url : src;
443
457
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
444
458
  state: state
445
459
  }, rest), /*#__PURE__*/_react.default.createElement(BmImage, {
446
- src: src,
460
+ src: source,
447
461
  alt: "src",
448
462
  state: state
449
- }), fileName && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
463
+ }), (src === null || src === void 0 ? void 0 : src.caption) && /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
450
464
  state: state,
451
- file: src,
452
- src: src,
465
+ caption: true,
466
+ src: source
467
+ }, rest), src.caption), fileName && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
468
+ state: state,
469
+ file: source,
470
+ src: source,
453
471
  fileName: fileName
454
472
  }, rest))));
455
473
  };
@@ -541,22 +559,24 @@ const ImageRender = _ref30 => {
541
559
  isInteractive,
542
560
  connector,
543
561
  caption,
544
- originalUrl
562
+ originalUrl,
563
+ url
545
564
  } = _ref30;
565
+ const source = originalUrl || url;
546
566
  const renderers = {
547
567
  dotgo_v3: () => {
548
568
  var _caption$text;
549
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, originalUrl && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
569
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, source && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
550
570
  state: state,
551
- src: originalUrl
571
+ src: source
552
572
  }, rest))), caption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, caption === null || caption === void 0 || (_caption$text = caption.text) === null || _caption$text === void 0 ? void 0 : _caption$text.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("p", {
553
573
  key: "body-line-".concat(idx)
554
574
  }, line, /*#__PURE__*/_react.default.createElement("br", null)))));
555
575
  }
556
576
  };
557
- const FallbackRenderer = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, originalUrl && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
577
+ const FallbackRenderer = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, source && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
558
578
  state: state,
559
- src: originalUrl
579
+ src: source
560
580
  }, rest))), caption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, caption === null || caption === void 0 ? void 0 : caption.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
561
581
  key: "content-line-".concat(idx)
562
582
  }, line, /*#__PURE__*/_react.default.createElement("br", null))))));
package/dist/components/ProfileIcon/ProfileIcon.js CHANGED
@@ -11,7 +11,7 @@ var _wa = _interopRequireDefault(require("../../assets/wa.png"));
11
11
  var _fb = _interopRequireDefault(require("../../assets/fb.png"));
12
12
  var _insta = _interopRequireDefault(require("../../assets/insta.png"));
13
13
  var _Google_Messages_logo = _interopRequireDefault(require("../../assets/Google_Messages_logo.png"));
14
- var _voiceCallIcon = _interopRequireDefault(require("../../assets/voiceCallIcon.svg"));
14
+ var _voiceCallIcon = _interopRequireDefault(require("../../assets/voiceCallIcon.png"));
15
15
  const _excluded = ["img", "content", "channel", "size"];
16
16
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
17
17
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "2.1.32",
3
+ "version": "2.1.34",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
@@ -62,6 +62,7 @@
62
62
  "react-dom": "^17.0.2",
63
63
  "react-icons": "^4.6.0",
64
64
  "react-pdf": "^5.7.2",
65
+ "react-player": "^3.4.0",
65
66
  "react-router-dom": "^5.3.0",
66
67
  "react-scripts": "^5.0.1",
67
68
  "react-select": "^5.7.0",
package/src/App.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable no-nested-ternary */
1
2
  /* eslint-disable jsx-a11y/control-has-associated-label */
2
3
  // * eslint-disable func-style *
3
4
  /* eslint-disable jsx-a11y/media-has-caption */
@@ -17,6 +18,7 @@ import React from 'react';
17
18
  // import PeopleIcon from '@mui/icons-material/People';
18
19
  // import BusinessIcon from '@mui/icons-material/Business';
19
20
 
21
+ import ReactPlayer from 'react-player';
20
22
  import {
21
23
  BmChat,
22
24
  GlobalStyle,
@@ -385,128 +387,300 @@ const Chat = () => {
385
387
  // ];
386
388
 
387
389
  const metaQuickReply = [
390
+ // {
391
+ // id: 104759,
392
+ // message: 'Second outbound',
393
+ // time: '2025-09-20T05:22:38.000Z',
394
+ // direction: 'inbound',
395
+ // message_type: 'text',
396
+ // messageId:
397
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM4M0JFNzM1QjI4QkQzQjcyQUE4ODdBQzJGMDBBQjQA',
398
+ // is_live_agent: 0,
399
+ // is_deleted: 0,
400
+ // is_comment: 0,
401
+ // channel: 'whatsapp',
402
+ // sent_to_vendor: 1,
403
+ // replyMessageId: '36222689-a3e0-4597-8872-9af486fd1fd7',
404
+ // agent_name: null,
405
+ // df_agent_name: null,
406
+ // resolve_time: null,
407
+ // metadata: {
408
+ // id: '36222689-a3e0-4597-8872-9af486fd1fd7',
409
+ // prev_message: 'second outbound initiated',
410
+ // },
411
+ // },
412
+ // {
413
+ // id: 104758,
414
+ // message: 'Bounce',
415
+ // time: '2025-09-20T05:19:44.000Z',
416
+ // direction: 'inbound',
417
+ // message_type: 'text',
418
+ // messageId:
419
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxMjAyOUQ0MDQ4MUVBNDM4NTdGNTE2NTlFMUY3REUA',
420
+ // is_live_agent: 0,
421
+ // is_deleted: 0,
422
+ // is_comment: 0,
423
+ // channel: 'whatsapp',
424
+ // sent_to_vendor: 1,
425
+ // replyMessageId:
426
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM2M0Y2OUI3RkU0RDI2MjFBMDVGRDg1N0RBQkQyMEUA',
427
+ // agent_name: null,
428
+ // df_agent_name: null,
429
+ // resolve_time: null,
430
+ // metadata: {
431
+ // id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM2M0Y2OUI3RkU0RDI2MjFBMDVGRDg1N0RBQkQyMEUA',
432
+ // prev_message: 'Refeto secomd',
433
+ // },
434
+ // },
435
+ // {
436
+ // id: 104757,
437
+ // message: 'Chai',
438
+ // time: '2025-09-20T05:15:05.000Z',
439
+ // direction: 'inbound',
440
+ // message_type: 'text',
441
+ // messageId:
442
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFNzhDMkRBOUU5OEVDQzhBNThCODhDMzg2RTNCREEA',
443
+ // is_live_agent: 0,
444
+ // is_deleted: 0,
445
+ // is_comment: 0,
446
+ // channel: 'whatsapp',
447
+ // sent_to_vendor: 1,
448
+ // replyMessageId: '65352cb5-3800-4e78-aaba-f01dc9aadd58',
449
+ // agent_name: null,
450
+ // df_agent_name: null,
451
+ // resolve_time: null,
452
+ // metadata: {
453
+ // id: '65352cb5-3800-4e78-aaba-f01dc9aadd58',
454
+ // prev_message:
455
+ // '{\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}',
456
+ // },
457
+ // },
458
+ // {
459
+ // id: 104756,
460
+ // message: 'Price',
461
+ // time: '2025-09-20T05:11:36.000Z',
462
+ // direction: 'inbound',
463
+ // message_type: 'text',
464
+ // messageId:
465
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFMkM5NTA0NzU2MTU2RjA2MTEwRDBDM0QxOTQxODIA',
466
+ // is_live_agent: 0,
467
+ // is_deleted: 0,
468
+ // is_comment: 0,
469
+ // channel: 'whatsapp',
470
+ // sent_to_vendor: 1,
471
+ // replyMessageId:
472
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
473
+ // agent_name: null,
474
+ // df_agent_name: null,
475
+ // resolve_time: null,
476
+ // metadata: {
477
+ // id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
478
+ // prev_message:
479
+ // '{"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"}',
480
+ // },
481
+ // },
482
+ // {
483
+ // id: 104755,
484
+ // message: 'Test',
485
+ // time: '2025-09-20T05:11:22.000Z',
486
+ // direction: 'inbound',
487
+ // message_type: 'text',
488
+ // messageId:
489
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxMERENThDNDk0QjExNTE5MUFFNjgwM0M1OUU3NTMA',
490
+ // is_live_agent: 0,
491
+ // is_deleted: 0,
492
+ // is_comment: 0,
493
+ // channel: 'whatsapp',
494
+ // sent_to_vendor: 1,
495
+ // replyMessageId: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
496
+ // agent_name: null,
497
+ // df_agent_name: null,
498
+ // resolve_time: null,
499
+ // metadata: {
500
+ // id: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
501
+ // prev_message:
502
+ // '{"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}]}]}}',
503
+ // },
504
+ // },
505
+ // {
506
+ // id: 104754,
507
+ // message:
508
+ // '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"Successfully end the session.","caption":""},"options":[{"type":"text","title":"Main Menu","postbackText":"dev-defined-postback1"}]}}',
509
+ // time: '2025-09-20T02:20:00.000Z',
510
+ // direction: 'outbound',
511
+ // message_type: 'interactive',
512
+ // messageId: null,
513
+ // is_live_agent: 1,
514
+ // is_deleted: 0,
515
+ // is_comment: 0,
516
+ // channel: 'whatsapp',
517
+ // sent_to_vendor: 1,
518
+ // replyMessageId: null,
519
+ // agent_name: null,
520
+ // df_agent_name: null,
521
+ // resolve_time: null,
522
+ // metadata: null,
523
+ // statusDetails: {
524
+ // statusCode: 3,
525
+ // },
526
+ // },
527
+ // {
528
+ // id: 104752,
529
+ // message:
530
+ // '{"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}]}]}}',
531
+ // time: '2025-09-19T08:24:49.000Z',
532
+ // direction: 'outbound',
533
+ // message_type: 'interactive',
534
+ // messageId: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
535
+ // is_live_agent: 0,
536
+ // is_deleted: 0,
537
+ // is_comment: 0,
538
+ // channel: 'whatsapp',
539
+ // sent_to_vendor: 1,
540
+ // replyMessageId: null,
541
+ // agent_name: 'mustafa.s@beem.africa',
542
+ // df_agent_name: 'Mustafa Saifuddin',
543
+ // resolve_time: null,
544
+ // metadata: null,
545
+ // statusDetails: {
546
+ // statusCode: 3,
547
+ // },
548
+ // },
549
+ // {
550
+ // id: 104751,
551
+ // message:
552
+ // '{"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"}',
553
+ // time: '2025-09-19T06:30:24.000Z',
554
+ // direction: 'inbound',
555
+ // message_type: 'order',
556
+ // messageId:
557
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
558
+ // is_live_agent: 0,
559
+ // is_deleted: 0,
560
+ // is_comment: 0,
561
+ // channel: 'whatsapp',
562
+ // sent_to_vendor: 1,
563
+ // replyMessageId: null,
564
+ // agent_name: null,
565
+ // df_agent_name: null,
566
+ // resolve_time: null,
567
+ // metadata: null,
568
+ // },
569
+ // {
570
+ // id: 104750,
571
+ // message:
572
+ // '{"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"}',
573
+ // time: '2025-09-19T06:29:51.000Z',
574
+ // direction: 'inbound',
575
+ // message_type: 'order',
576
+ // messageId:
577
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1RDIwQjEyQTY1N0FFMDQzMkU1QUI0MTBENTIyRDkA',
578
+ // is_live_agent: 0,
579
+ // is_deleted: 0,
580
+ // is_comment: 0,
581
+ // channel: 'whatsapp',
582
+ // sent_to_vendor: 1,
583
+ // replyMessageId: null,
584
+ // agent_name: null,
585
+ // df_agent_name: null,
586
+ // resolve_time: null,
587
+ // metadata: null,
588
+ // },
589
+ // {
590
+ // id: 104749,
591
+ // message:
592
+ // '{"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}]}]}}',
593
+ // time: '2025-09-19T06:29:35.000Z',
594
+ // direction: 'outbound',
595
+ // message_type: 'interactive',
596
+ // messageId: '5f8f5ccc-3a34-44f1-acd6-92c7cad311c8',
597
+ // is_live_agent: 0,
598
+ // is_deleted: 0,
599
+ // is_comment: 0,
600
+ // channel: 'whatsapp',
601
+ // sent_to_vendor: 1,
602
+ // replyMessageId: null,
603
+ // agent_name: 'mustafa.s@beem.africa',
604
+ // df_agent_name: 'Mustafa Saifuddin',
605
+ // resolve_time: null,
606
+ // metadata: null,
607
+ // statusDetails: {
608
+ // statusCode: 3,
609
+ // },
610
+ // },
611
+ // {
612
+ // id: 109370,
613
+ // message:
614
+ // '{ "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" }}',
615
+ // time: '2025-10-06T10:53:38.000Z',
616
+ // direction: 'outbound',
617
+ // message_type: 'interactive',
618
+ // messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
619
+ // is_live_agent: 0,
620
+ // is_deleted: 0,
621
+ // is_comment: 0,
622
+ // channel: 'whatsapp',
623
+ // sent_to_vendor: 1,
624
+ // replyMessageId: null,
625
+ // agent_name: null,
626
+ // df_agent_name: null,
627
+ // resolve_time: null,
628
+ // metadata: null,
629
+ // statusDetails: {
630
+ // statusCode: 3,
631
+ // },
632
+ // },
388
633
  {
389
- id: 104759,
390
- message: 'Second outbound',
391
- time: '2025-09-20T05:22:38.000Z',
392
- direction: 'inbound',
393
- message_type: 'text',
394
- messageId:
395
- 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM4M0JFNzM1QjI4QkQzQjcyQUE4ODdBQzJGMDBBQjQA',
396
- is_live_agent: 0,
397
- is_deleted: 0,
398
- is_comment: 0,
399
- channel: 'whatsapp',
400
- sent_to_vendor: 1,
401
- replyMessageId: '36222689-a3e0-4597-8872-9af486fd1fd7',
402
- agent_name: null,
403
- df_agent_name: null,
404
- resolve_time: null,
405
- metadata: {
406
- id: '36222689-a3e0-4597-8872-9af486fd1fd7',
407
- prev_message: 'second outbound initiated',
408
- },
409
- },
410
- {
411
- id: 104758,
412
- message: 'Bounce',
413
- time: '2025-09-20T05:19:44.000Z',
414
- direction: 'inbound',
415
- message_type: 'text',
416
- messageId:
417
- 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxMjAyOUQ0MDQ4MUVBNDM4NTdGNTE2NTlFMUY3REUA',
418
- is_live_agent: 0,
419
- is_deleted: 0,
420
- is_comment: 0,
421
- channel: 'whatsapp',
422
- sent_to_vendor: 1,
423
- replyMessageId:
424
- 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM2M0Y2OUI3RkU0RDI2MjFBMDVGRDg1N0RBQkQyMEUA',
425
- agent_name: null,
426
- df_agent_name: null,
427
- resolve_time: null,
428
- metadata: {
429
- id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM2M0Y2OUI3RkU0RDI2MjFBMDVGRDg1N0RBQkQyMEUA',
430
- prev_message: 'Refeto secomd',
431
- },
432
- },
433
- {
434
- id: 104757,
435
- message: 'Chai',
436
- time: '2025-09-20T05:15:05.000Z',
437
- direction: 'inbound',
438
- message_type: 'text',
439
- messageId:
440
- 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFNzhDMkRBOUU5OEVDQzhBNThCODhDMzg2RTNCREEA',
441
- is_live_agent: 0,
442
- is_deleted: 0,
443
- is_comment: 0,
444
- channel: 'whatsapp',
445
- sent_to_vendor: 1,
446
- replyMessageId: '65352cb5-3800-4e78-aaba-f01dc9aadd58',
447
- agent_name: null,
448
- df_agent_name: null,
449
- resolve_time: null,
450
- metadata: {
451
- id: '65352cb5-3800-4e78-aaba-f01dc9aadd58',
452
- prev_message:
453
- '{\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}',
454
- },
455
- },
456
- {
457
- id: 104756,
458
- message: 'Price',
459
- time: '2025-09-20T05:11:36.000Z',
634
+ id: 109414,
635
+ message: 'Reply',
636
+ time: '2025-10-06T11:31:15.000Z',
460
637
  direction: 'inbound',
461
638
  message_type: 'text',
462
- messageId:
463
- 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFMkM5NTA0NzU2MTU2RjA2MTEwRDBDM0QxOTQxODIA',
639
+ messageId: null,
464
640
  is_live_agent: 0,
465
641
  is_deleted: 0,
466
642
  is_comment: 0,
467
643
  channel: 'whatsapp',
468
644
  sent_to_vendor: 1,
469
- replyMessageId:
470
- 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
645
+ replyMessageId: '121302f4-50ca-48c3-a32a-2d570064a000',
471
646
  agent_name: null,
472
647
  df_agent_name: null,
473
648
  resolve_time: null,
474
649
  metadata: {
475
- id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
650
+ id: '121302f4-50ca-48c3-a32a-2d570064a000',
476
651
  prev_message:
477
- '{"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"}',
652
+ '{ "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://bm-chatbot-images.s3.eu-west-1.amazonaws.com/081c00de-cc02-44f2-bd91-5cf3a5a73d09.jpeg", "previewUrl": "https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/081c00de-cc02-44f2-bd91-5cf3a5a73d09.jpeg" }}',
478
653
  },
479
654
  },
480
655
  {
481
- id: 104755,
482
- message: 'Test',
483
- time: '2025-09-20T05:11:22.000Z',
656
+ id: 109469,
657
+ message: 'Image reply',
658
+ time: '2025-10-06T11:38:34.000Z',
484
659
  direction: 'inbound',
485
660
  message_type: 'text',
486
- messageId:
487
- 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxMERENThDNDk0QjExNTE5MUFFNjgwM0M1OUU3NTMA',
488
- is_live_agent: 0,
661
+ messageId: null,
662
+ is_live_agent: 1,
489
663
  is_deleted: 0,
490
664
  is_comment: 0,
491
665
  channel: 'whatsapp',
492
666
  sent_to_vendor: 1,
493
- replyMessageId: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
667
+ replyMessageId: null,
494
668
  agent_name: null,
495
669
  df_agent_name: null,
496
670
  resolve_time: null,
497
671
  metadata: {
498
- id: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
672
+ id: 'wamid.HBgMMjU1Njg3MzQ5NTgxFQIAEhgUM0E1NTVGOThBMzk0NTM1OTgyQTMA',
499
673
  prev_message:
500
- '{"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}]}]}}',
674
+ 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/6bf5fd83-277b-4903-b5a2-938ad89adbe7.mp4',
501
675
  },
502
676
  },
503
677
  {
504
- id: 104754,
678
+ id: 137587,
505
679
  message:
506
- '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"Successfully end the session.","caption":""},"options":[{"type":"text","title":"Main Menu","postbackText":"dev-defined-postback1"}]}}',
507
- time: '2025-09-20T02:20:00.000Z',
508
- direction: 'outbound',
509
- message_type: 'interactive',
680
+ '{"message":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/d035b38b-a110-4e92-9473-ba1100b75601.jpeg","caption":"Ghfdkljfdlkgjdflkgj dflkg jdflkg jdlfkg jdlfkgjfdikgjslkfg jsjfhg sldkgj slgs jgdg j ggsldjglkj slhgslgj sdgj sioj sdlgjlshglj lk ghshg sdlkjglksjgsdgsdl gjsssdgg"}',
681
+ time: '2026-06-30T05:39:42.000Z',
682
+ direction: 'inbound',
683
+ message_type: 'image/jpeg',
510
684
  messageId: null,
511
685
  is_live_agent: 1,
512
686
  is_deleted: 0,
@@ -518,42 +692,16 @@ const Chat = () => {
518
692
  df_agent_name: null,
519
693
  resolve_time: null,
520
694
  metadata: null,
521
- statusDetails: {
522
- statusCode: 3,
523
- },
524
- },
525
- {
526
- id: 104752,
527
- message:
528
- '{"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}]}]}}',
529
- time: '2025-09-19T08:24:49.000Z',
530
- direction: 'outbound',
531
- message_type: 'interactive',
532
- messageId: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
533
- is_live_agent: 0,
534
- is_deleted: 0,
535
- is_comment: 0,
536
- channel: 'whatsapp',
537
- sent_to_vendor: 1,
538
- replyMessageId: null,
539
- agent_name: 'mustafa.s@beem.africa',
540
- df_agent_name: 'Mustafa Saifuddin',
541
- resolve_time: null,
542
- metadata: null,
543
- statusDetails: {
544
- statusCode: 3,
545
- },
546
695
  },
547
696
  {
548
- id: 104751,
697
+ id: 137592,
549
698
  message:
550
- '{"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"}',
551
- time: '2025-09-19T06:30:24.000Z',
699
+ '{"message":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/6bf5fd83-277b-4903-b5a2-938ad89adbe7.mp4","caption":"Bruhhhhh"}',
700
+ time: '2026-06-30T09:01:26.000Z',
552
701
  direction: 'inbound',
553
- message_type: 'order',
554
- messageId:
555
- 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
556
- is_live_agent: 0,
702
+ message_type: 'video/mp4',
703
+ messageId: null,
704
+ is_live_agent: 1,
557
705
  is_deleted: 0,
558
706
  is_comment: 0,
559
707
  channel: 'whatsapp',
@@ -565,15 +713,14 @@ const Chat = () => {
565
713
  metadata: null,
566
714
  },
567
715
  {
568
- id: 104750,
716
+ id: 137584,
569
717
  message:
570
- '{"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"}',
571
- time: '2025-09-19T06:29:51.000Z',
718
+ 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/6a1e392e-8d35-4687-a629-b9e440947a33.mp4',
719
+ time: '2026-06-30T05:09:23.000Z',
572
720
  direction: 'inbound',
573
- message_type: 'order',
574
- messageId:
575
- 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1RDIwQjEyQTY1N0FFMDQzMkU1QUI0MTBENTIyRDkA',
576
- is_live_agent: 0,
721
+ message_type: 'video/mp4',
722
+ messageId: null,
723
+ is_live_agent: 1,
577
724
  is_deleted: 0,
578
725
  is_comment: 0,
579
726
  channel: 'whatsapp',
@@ -585,77 +732,12 @@ const Chat = () => {
585
732
  metadata: null,
586
733
  },
587
734
  {
588
- id: 104749,
589
- message:
590
- '{"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}]}]}}',
591
- time: '2025-09-19T06:29:35.000Z',
592
- direction: 'outbound',
593
- message_type: 'interactive',
594
- messageId: '5f8f5ccc-3a34-44f1-acd6-92c7cad311c8',
595
- is_live_agent: 0,
596
- is_deleted: 0,
597
- is_comment: 0,
598
- channel: 'whatsapp',
599
- sent_to_vendor: 1,
600
- replyMessageId: null,
601
- agent_name: 'mustafa.s@beem.africa',
602
- df_agent_name: 'Mustafa Saifuddin',
603
- resolve_time: null,
604
- metadata: null,
605
- statusDetails: {
606
- statusCode: 3,
607
- },
608
- },
609
- {
610
- id: 109370,
735
+ id: 137582,
611
736
  message:
612
- '{ "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" }}',
613
- time: '2025-10-06T10:53:38.000Z',
614
- direction: 'outbound',
615
- message_type: 'interactive',
616
- messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
617
- is_live_agent: 0,
618
- is_deleted: 0,
619
- is_comment: 0,
620
- channel: 'whatsapp',
621
- sent_to_vendor: 1,
622
- replyMessageId: null,
623
- agent_name: null,
624
- df_agent_name: null,
625
- resolve_time: null,
626
- metadata: null,
627
- statusDetails: {
628
- statusCode: 3,
629
- },
630
- },
631
- {
632
- id: 109414,
633
- message: 'Reply',
634
- time: '2025-10-06T11:31:15.000Z',
635
- direction: 'inbound',
636
- message_type: 'text',
637
- messageId: null,
638
- is_live_agent: 0,
639
- is_deleted: 0,
640
- is_comment: 0,
641
- channel: 'whatsapp',
642
- sent_to_vendor: 1,
643
- replyMessageId: '121302f4-50ca-48c3-a32a-2d570064a000',
644
- agent_name: null,
645
- df_agent_name: null,
646
- resolve_time: null,
647
- metadata: {
648
- id: '121302f4-50ca-48c3-a32a-2d570064a000',
649
- prev_message:
650
- '{ "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" }}',
651
- },
652
- },
653
- {
654
- id: 109469,
655
- message: 'Image reply',
656
- time: '2025-10-06T11:38:34.000Z',
737
+ 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/da8e2c59-6e43-42f4-9299-2cf1d8a98f5f.jpeg',
738
+ time: '2026-06-30T04:55:44.000Z',
657
739
  direction: 'inbound',
658
- message_type: 'text',
740
+ message_type: 'image/jpeg',
659
741
  messageId: null,
660
742
  is_live_agent: 1,
661
743
  is_deleted: 0,
@@ -666,11 +748,7 @@ const Chat = () => {
666
748
  agent_name: null,
667
749
  df_agent_name: null,
668
750
  resolve_time: null,
669
- metadata: {
670
- id: 'wamid.HBgMMjU1Njg3MzQ5NTgxFQIAEhgUM0E1NTVGOThBMzk0NTM1OTgyQTMA',
671
- prev_message:
672
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/081c00de-cc02-44f2-bd91-5cf3a5a73d09.jpeg',
673
- },
751
+ metadata: null,
674
752
  },
675
753
  // {
676
754
  // id: 109370,
@@ -718,97 +796,116 @@ const Chat = () => {
718
796
  // statusCode: 3,
719
797
  // },
720
798
  // },
721
- {
722
- id: 109373,
723
- message:
724
- '{"type":"call","status":"in_progress","call_started_at":"2026-01-01T09:35:00.000Z","message":"Call in progress"}',
725
- time: '2025-10-06T10:53:38.000Z',
726
- direction: 'outbound',
727
- message_type: 'interactive',
728
- messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
729
- is_live_agent: 0,
730
- is_deleted: 0,
731
- is_comment: 0,
732
- channel: 'voice_call',
733
- sent_to_vendor: 1,
734
- replyMessageId: null,
799
+ // {
800
+ // id: 109373,
801
+ // message:
802
+ // '{"type":"call","status":"in_progress","call_started_at":"2026-01-01T09:35:00.000Z","message":"Call in progress"}',
803
+ // time: '2025-10-06T10:53:38.000Z',
804
+ // direction: 'outbound',
805
+ // message_type: 'interactive',
806
+ // messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
807
+ // is_live_agent: 0,
808
+ // is_deleted: 0,
809
+ // is_comment: 0,
810
+ // channel: 'voice_call',
811
+ // sent_to_vendor: 1,
812
+ // replyMessageId: null,
735
813
 
736
- agent_name: null,
737
- df_agent_name: null,
738
- resolve_time: null,
739
- metadata: null,
740
- statusDetails: {
741
- statusCode: 3,
742
- },
743
- },
744
- {
745
- id: 109373,
746
- message:
747
- '{"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}}',
748
- time: '2025-10-06T10:53:38.000Z',
749
- direction: 'inbound',
750
- message_type: 'interactive',
751
- messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
752
- is_live_agent: 0,
753
- is_deleted: 0,
754
- is_comment: 0,
755
- channel: 'voice_call',
756
- sent_to_vendor: 1,
757
- replyMessageId: null,
814
+ // agent_name: null,
815
+ // df_agent_name: null,
816
+ // resolve_time: null,
817
+ // metadata: null,
818
+ // statusDetails: {
819
+ // statusCode: 3,
820
+ // },
821
+ // },
822
+ // {
823
+ // id: 109373,
824
+ // message:
825
+ // '{"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}}',
826
+ // time: '2025-10-06T10:53:38.000Z',
827
+ // direction: 'inbound',
828
+ // message_type: 'interactive',
829
+ // messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
830
+ // is_live_agent: 0,
831
+ // is_deleted: 0,
832
+ // is_comment: 0,
833
+ // channel: 'voice_call',
834
+ // sent_to_vendor: 1,
835
+ // replyMessageId: null,
758
836
 
759
- agent_name: null,
760
- df_agent_name: null,
761
- resolve_time: null,
762
- metadata: null,
763
- statusDetails: {
764
- statusCode: 3,
765
- },
766
- },
767
- {
768
- id: 109373,
769
- message:
770
- '{"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}}',
771
- time: '2025-10-06T10:53:38.000Z',
772
- direction: 'inbound',
773
- message_type: 'interactive',
774
- messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
775
- is_live_agent: 0,
776
- is_deleted: 0,
777
- is_comment: 0,
778
- channel: 'voice_call',
779
- sent_to_vendor: 1,
780
- replyMessageId: null,
837
+ // agent_name: null,
838
+ // df_agent_name: null,
839
+ // resolve_time: null,
840
+ // metadata: null,
841
+ // statusDetails: {
842
+ // statusCode: 3,
843
+ // },
844
+ // },
845
+ // {
846
+ // id: 109373,
847
+ // message:
848
+ // '{"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}}',
849
+ // time: '2025-10-06T10:53:38.000Z',
850
+ // direction: 'inbound',
851
+ // message_type: 'interactive',
852
+ // messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
853
+ // is_live_agent: 0,
854
+ // is_deleted: 0,
855
+ // is_comment: 0,
856
+ // channel: 'voice_call',
857
+ // sent_to_vendor: 1,
858
+ // replyMessageId: null,
781
859
 
782
- agent_name: null,
783
- df_agent_name: null,
784
- resolve_time: null,
785
- metadata: null,
786
- statusDetails: {
787
- statusCode: 3,
788
- },
789
- },
860
+ // agent_name: null,
861
+ // df_agent_name: null,
862
+ // resolve_time: null,
863
+ // metadata: null,
864
+ // statusDetails: {
865
+ // statusCode: 3,
866
+ // },
867
+ // },
868
+ // {
869
+ // id: 109373,
870
+ // message:
871
+ // '{"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}}',
872
+ // time: '2025-10-06T10:53:38.000Z',
873
+ // direction: 'outbound',
874
+ // message_type: 'interactive',
875
+ // messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
876
+ // is_live_agent: 0,
877
+ // is_deleted: 0,
878
+ // is_comment: 0,
879
+ // channel: 'voice_call',
880
+ // sent_to_vendor: 1,
881
+ // replyMessageId: null,
882
+
883
+ // agent_name: null,
884
+ // df_agent_name: null,
885
+ // resolve_time: null,
886
+ // metadata: null,
887
+ // statusDetails: {
888
+ // statusCode: 3,
889
+ // },
890
+ // },
790
891
  {
791
- id: 109373,
892
+ id: 137594,
792
893
  message:
793
- '{"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}}',
794
- time: '2025-10-06T10:53:38.000Z',
795
- direction: 'outbound',
796
- message_type: 'interactive',
797
- messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
798
- is_live_agent: 0,
894
+ '{"message":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/d0fa1cd5-e5c8-4dae-bdb3-890efb0b5c28.jpeg", "caption":"dfs"}',
895
+ time: '2026-06-30T09:16:07.000Z',
896
+ direction: 'inbound',
897
+ message_type: 'image/jpeg',
898
+ messageId: null,
899
+ is_live_agent: 1,
799
900
  is_deleted: 0,
800
901
  is_comment: 0,
801
- channel: 'voice_call',
902
+ channel: 'whatsapp',
802
903
  sent_to_vendor: 1,
803
904
  replyMessageId: null,
804
-
805
905
  agent_name: null,
806
906
  df_agent_name: null,
807
907
  resolve_time: null,
808
908
  metadata: null,
809
- statusDetails: {
810
- statusCode: 3,
811
- },
812
909
  },
813
910
  ];
814
911
  const isJson = (itemOg) => {
@@ -939,12 +1036,49 @@ const Chat = () => {
939
1036
  };
940
1037
  };
941
1038
 
1039
+ const getMessageType = (value) => {
1040
+ if (!value) return 'text';
1041
+
1042
+ const extension = value.split('.').pop()?.toLowerCase().split('?')[0];
1043
+
1044
+ const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'];
1045
+ const videoExtensions = ['mp4', 'mov', 'avi', 'mkv', 'webm'];
1046
+ const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a'];
1047
+ const documentExtensions = [
1048
+ 'pdf',
1049
+ 'doc',
1050
+ 'docx',
1051
+ 'xls',
1052
+ 'xlsx',
1053
+ 'ppt',
1054
+ 'pptx',
1055
+ 'txt',
1056
+ 'csv',
1057
+ ];
1058
+
1059
+ if (imageExtensions.includes(extension)) return 'image';
1060
+ if (videoExtensions.includes(extension)) return 'video';
1061
+ if (audioExtensions.includes(extension)) return 'audio';
1062
+ if (documentExtensions.includes(extension)) return 'document';
1063
+
1064
+ return 'text';
1065
+ };
942
1066
  const determineMetadataMessageType = (metadata) => {
1067
+ console.log(metadata);
943
1068
  if (metadata && metadata?.prev_message) {
944
1069
  if (isJson(metadata?.prev_message) === true) {
945
1070
  return renderMetadataJsonMessage(metadata);
946
1071
  }
947
- return { message: { type: 'text', text: metadata.prev_message } };
1072
+
1073
+ return {
1074
+ message: {
1075
+ type: getMessageType(metadata.prev_message),
1076
+ ...(getMessageType(metadata.prev_message) === 'video' && {
1077
+ url: metadata.prev_message,
1078
+ }),
1079
+ text: metadata.prev_message,
1080
+ },
1081
+ };
948
1082
  }
949
1083
  };
950
1084
  const determineMetadataIsInteractive = (metadata) => {
@@ -955,42 +1089,102 @@ const Chat = () => {
955
1089
  return false;
956
1090
  }
957
1091
  };
1092
+ const determineHasCaption = (message) => {
1093
+ if (isJson(message) === true) {
1094
+ const parsed = JSON.parse(message);
1095
+ return { url: parsed.message, caption: parsed.caption };
1096
+ }
1097
+ return { url: message };
1098
+ };
958
1099
  return (
959
1100
  <>
960
1101
  <GlobalStyle />
961
1102
 
962
1103
  {metaQuickReply.map((msg, idx) => {
963
- return msg.message_type !== 'text' ? (
1104
+ return msg.message_type === 'image/jpeg' ? (
964
1105
  <BmChat.Details
965
- key={msg.id || idx} // Prefer a stable unique id if available
1106
+ key={msg.id || idx}
966
1107
  state={msg.direction}
967
1108
  session="bot"
968
1109
  displayTime={<p>12:10pm</p>}
969
- status="sent"
970
- type={msg.message_type}
971
- callLog={msg.message_type === 'call'}
1110
+ // status="sent"
1111
+ src={determineHasCaption(msg.message)}
1112
+ link={determineHasCaption(msg.message).url}
1113
+ fileName={<p>File</p>}
972
1114
  sessionTimeline={{ message: '12:00pm' }}
973
- style={{ margin: '-0.6% 0 0 0' }}
974
- metadata={determineMetadataMessageType(msg.metadata)}
975
- isInteractive={determineMetadataIsInteractive(msg.metadata)}
976
- >
977
- {renderJsonMessageMeta(msg)}
978
- </BmChat.Details>
1115
+ />
1116
+ ) : msg.message_type === 'video/mp4' ? (
1117
+ // <BmChat.Details
1118
+ // key={msg.id || idx} // Prefer a stable unique id if available
1119
+ // state={msg.direction}
1120
+ // session="bot"
1121
+ // displayTime={<p>12:10pm</p>}
1122
+ // status="sent"
1123
+ // type={msg.message_type}
1124
+ // callLog={msg.message_type === 'call'}
1125
+ // sessionTimeline={{ message: '12:00pm' }}
1126
+ // style={{ margin: '-0.6% 0 0 0' }}
1127
+ // metadata={determineMetadataMessageType(msg.metadata)}
1128
+ // isInteractive={determineMetadataIsInteractive(msg.metadata)}
1129
+ // >
1130
+ // {renderJsonMessageMeta(msg)}
1131
+ // </BmChat.Details>
1132
+ <>
1133
+ <BmChat.Details
1134
+ key={msg.id || idx}
1135
+ state={msg.direction}
1136
+ session="bot"
1137
+ displayTime={<p>12:10pm</p>}
1138
+ status="sent"
1139
+ file={determineHasCaption(msg.message)}
1140
+ link={determineHasCaption(msg.message).url}
1141
+ fileName={<p>File</p>}
1142
+ sessionTimeline={{ message: '12:00pm' }}
1143
+ >
1144
+ <ReactPlayer
1145
+ src={determineHasCaption(msg.message).url}
1146
+ // url="https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/6a1e392e-8d35-4687-a629-b9e440947a33.mp4"
1147
+ controls
1148
+ width="100%"
1149
+ />
1150
+ </BmChat.Details>
1151
+ </>
1152
+ ) : msg.message_type !== 'text' ? (
1153
+ <>
1154
+ <BmChat.Details
1155
+ key={msg.id || idx} // Prefer a stable unique id if available
1156
+ state={msg.direction}
1157
+ session="bot"
1158
+ displayTime={<p>12:10pm</p>}
1159
+ status="sent"
1160
+ type={msg.message_type}
1161
+ callLog={msg.message_type === 'call'}
1162
+ sessionTimeline={{ message: '12:00pm' }}
1163
+ style={{ margin: '-0.6% 0 0 0' }}
1164
+ metadata={determineMetadataMessageType(msg.metadata)}
1165
+ isInteractive={determineMetadataIsInteractive(msg.metadata)}
1166
+ >
1167
+ {renderJsonMessageMeta(msg)}
1168
+ </BmChat.Details>
1169
+ </>
979
1170
  ) : (
980
- <BmChat.Details
981
- key={msg.id || idx} // Prefer a stable unique id if available
982
- state={msg.direction}
983
- session="bot"
984
- displayTime={<p>12:10pm</p>}
985
- status="sent"
986
- type="text"
987
- sessionTimeline={{ message: '12:00pm' }}
988
- style={{ margin: '-0.6% 0 0 0' }}
989
- metadata={determineMetadataMessageType(msg.metadata)}
990
- isInteractive={determineMetadataIsInteractive(msg.metadata)}
991
- >
992
- <p>{msg.message}</p>
993
- </BmChat.Details>
1171
+ <>
1172
+ {' '}
1173
+ <BmChat.Details
1174
+ key={msg.id || idx} // Prefer a stable unique id if available
1175
+ state={msg.direction}
1176
+ session="bot"
1177
+ displayTime={<p>12:10pm</p>}
1178
+ status="sent"
1179
+ type="text"
1180
+ sessionTimeline={{ message: '12:00pm' }}
1181
+ style={{ margin: '-0.6% 0 0 0' }}
1182
+ metadata={determineMetadataMessageType(msg.metadata)}
1183
+ isInteractive={determineMetadataIsInteractive(msg.metadata)}
1184
+ >
1185
+ <p>{msg.message}</p>
1186
+ </BmChat.Details>
1187
+ </>
994
1188
  );
995
1189
  })}
996
1190
  <BmCardv2 borderColor="#d62a2af" borderWidth="1.5px" contentHeight="0">
package/src/lib/assets/voiceCallIcon.png ADDED
Binary file
package/src/lib/components/ChatComponents/ChatBody/chatBody.js CHANGED
@@ -388,9 +388,12 @@ const FileAttachmentWrapper = styled.div`
388
388
  }
389
389
  return `${BmPrimaryWhite}`;
390
390
  }};
391
- border-radius: ${({ state, src }) => {
391
+ border-radius: ${({ state, src, caption }) => {
392
392
  if (state) {
393
393
  if (state === 'inbound') {
394
+ if (caption) {
395
+ return '0rem 0rem 0rem 0rem';
396
+ }
394
397
  if (src) {
395
398
  return '0rem 0rem .5714rem 0rem';
396
399
  }
@@ -398,6 +401,9 @@ const FileAttachmentWrapper = styled.div`
398
401
  return '.5714rem .5714rem .5714rem 0rem';
399
402
  }
400
403
  if (state === 'outbound') {
404
+ if (caption) {
405
+ return '0rem 0rem 0rem 0rem';
406
+ }
401
407
  if (src) {
402
408
  return '0rem 0rem 0rem .5714rem';
403
409
  }
@@ -442,26 +448,34 @@ const BmFileAttachment = ({
442
448
  onDownload,
443
449
  extension,
444
450
  link,
451
+ caption,
445
452
  ...rest
446
453
  }) => {
447
454
  return (
448
- <FileAttachmentWrapper state={state} src={src} {...rest}>
449
- <BmIcons icon={<FilePresentIcon />} />
450
- {/* {fileName} */}
451
- <FileNameContainer>
452
- <p>{fileName}</p>
453
- <p>{extension ? `.${extension}` : ''}</p>
454
- </FileNameContainer>
455
- <a href={link} download>
456
- <BmIcons
457
- style={{
458
- color:
459
- state === 'inbound' ? `${BmPrimaryBlue}` : `${BmPrimaryWhite}`,
460
- }}
461
- icon={<DownloadIcon />}
462
- />
463
- </a>
464
- </FileAttachmentWrapper>
455
+ <>
456
+ {file?.caption && (
457
+ <FileAttachmentWrapper state={state} caption src={caption} {...rest}>
458
+ {file.caption}
459
+ </FileAttachmentWrapper>
460
+ )}
461
+ <FileAttachmentWrapper state={state} src={src} {...rest}>
462
+ <BmIcons icon={<FilePresentIcon />} />
463
+ {/* {fileName} */}
464
+ <FileNameContainer>
465
+ <p>{fileName}</p>
466
+ <p>{extension ? `.${extension}` : ''}</p>
467
+ </FileNameContainer>
468
+ <a href={link} download>
469
+ <BmIcons
470
+ style={{
471
+ color:
472
+ state === 'inbound' ? `${BmPrimaryBlue}` : `${BmPrimaryWhite}`,
473
+ }}
474
+ icon={<DownloadIcon />}
475
+ />
476
+ </a>
477
+ </FileAttachmentWrapper>
478
+ </>
465
479
  );
466
480
  };
467
481
  // Start of Component for Images
@@ -493,15 +507,22 @@ export const BmImage = styled.img`
493
507
  `;
494
508
 
495
509
  export const BmImageChat = ({ state, src, extensions, fileName, ...rest }) => {
510
+ const source = src.url ?? src;
496
511
  return (
497
512
  <>
498
513
  <BmImageWrapper state={state} {...rest}>
499
- <BmImage src={src} alt="src" state={state} />
514
+ <BmImage src={source} alt="src" state={state} />
515
+
516
+ {src?.caption && (
517
+ <FileAttachmentWrapper state={state} caption src={source} {...rest}>
518
+ {src.caption}
519
+ </FileAttachmentWrapper>
520
+ )}
500
521
  {fileName && (
501
522
  <BmFileAttachment
502
523
  state={state}
503
- file={src}
504
- src={src}
524
+ file={source}
525
+ src={source}
505
526
  fileName={fileName}
506
527
  {...rest}
507
528
  />
@@ -641,13 +662,15 @@ const ImageRender = ({
641
662
  connector,
642
663
  caption,
643
664
  originalUrl,
665
+ url,
644
666
  }) => {
667
+ const source = originalUrl || url;
645
668
  const renderers = {
646
669
  dotgo_v3: () => (
647
670
  <>
648
- {originalUrl && (
671
+ {source && (
649
672
  <>
650
- <BmImageChat state={state} src={originalUrl} {...rest} />
673
+ <BmImageChat state={state} src={source} {...rest} />
651
674
  </>
652
675
  )}
653
676
 
@@ -667,9 +690,9 @@ const ImageRender = ({
667
690
 
668
691
  const FallbackRenderer = () => (
669
692
  <>
670
- {originalUrl && (
693
+ {source && (
671
694
  <div>
672
- <BmImageChat state={state} src={originalUrl} {...rest} />
695
+ <BmImageChat state={state} src={source} {...rest} />
673
696
  </div>
674
697
  )}
675
698
 
@@ -1024,7 +1047,6 @@ BmChat.Details = ({
1024
1047
  sessionTimeline,
1025
1048
  feedPostComments,
1026
1049
  agentName,
1027
-
1028
1050
  metadata,
1029
1051
  isInteractive,
1030
1052
  type,
package/src/lib/components/ProfileIcon/ProfileIcon.js CHANGED
@@ -5,7 +5,7 @@ import wa from '../../assets/wa.png';
5
5
  import fb from '../../assets/fb.png';
6
6
  import insta from '../../assets/insta.png';
7
7
  import gbm from '../../assets/Google_Messages_logo.png';
8
- import vc from '../../assets/voiceCallIcon.svg';
8
+ import vc from '../../assets/voiceCallIcon.png';
9
9
 
10
10
  const handleSize = (size) => {
11
11
  if (size) {
package/dist/assets/voiceCallIcon.svg DELETED
@@ -1,5 +0,0 @@
1
- <svg width="418" height="418" viewBox="0 0 418 418" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <circle cx="209" cy="209" r="209" fill="#33B1BA"/>
3
- <path d="M128.728 105.326L100.728 122.826C92.4077 128.026 91.4251 141.826 92.2276 152.826C100.728 269.326 177.228 310.326 194.728 323.326C208.728 333.726 221.561 331.326 226.228 328.826L252.728 312.326C265.528 302.726 263.061 286.993 260.228 280.326L244.728 255.326C231.528 237.326 211.561 245.493 203.228 251.826C193.228 258.326 192.228 255.326 186.728 251.826C168.328 235.026 155.394 206.159 151.228 193.826C147.628 187.026 152.728 181.993 155.728 180.326L169.728 170.826C178.928 163.226 179.228 149.326 176.228 141.826C171.894 134.326 161.387 117.426 154.024 109.826C146.661 102.226 134.092 103.659 128.728 105.326Z" fill="white"/>
4
- <path d="M220 156C236.5 158.5 259.5 170.5 256.5 206M225 121.5C281 132.5 295.5 180.5 290.5 211M230.5 88C300.5 97 333 164.5 324.5 216.5" stroke="white" stroke-width="16" stroke-linecap="round"/>
5
- </svg>
package/src/lib/assets/voiceCallIcon.svg DELETED
@@ -1,5 +0,0 @@
1
- <svg width="418" height="418" viewBox="0 0 418 418" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <circle cx="209" cy="209" r="209" fill="#33B1BA"/>
3
- <path d="M128.728 105.326L100.728 122.826C92.4077 128.026 91.4251 141.826 92.2276 152.826C100.728 269.326 177.228 310.326 194.728 323.326C208.728 333.726 221.561 331.326 226.228 328.826L252.728 312.326C265.528 302.726 263.061 286.993 260.228 280.326L244.728 255.326C231.528 237.326 211.561 245.493 203.228 251.826C193.228 258.326 192.228 255.326 186.728 251.826C168.328 235.026 155.394 206.159 151.228 193.826C147.628 187.026 152.728 181.993 155.728 180.326L169.728 170.826C178.928 163.226 179.228 149.326 176.228 141.826C171.894 134.326 161.387 117.426 154.024 109.826C146.661 102.226 134.092 103.659 128.728 105.326Z" fill="white"/>
4
- <path d="M220 156C236.5 158.5 259.5 170.5 256.5 206M225 121.5C281 132.5 295.5 180.5 290.5 211M230.5 88C300.5 97 333 164.5 324.5 216.5" stroke="white" stroke-width="16" stroke-linecap="round"/>
5
- </svg>