beem-component 2.1.21 → 2.1.22

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

@@ -446,14 +446,49 @@ const QuickReplyRender = _ref24 => {
     isImg: true
   }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null));
 };
-const ProductDetailRender = _ref25 => {
+const ImageRender = _ref25 => {
+  let {
+    type,
+    state,
+    rest,
+    isInteractive,
+    connector,
+    caption,
+    originalUrl
+  } = _ref25;
+  const renderers = {
+    dotgo_v3: () => {
+      var _caption$text;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, originalUrl && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+        state: state,
+        src: originalUrl
+      }, rest))), caption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, caption === null || caption === void 0 || (_caption$text = caption.text) === null || _caption$text === void 0 ? void 0 : _caption$text.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("p", {
+        key: "body-line-".concat(idx)
+      }, line, /*#__PURE__*/_react.default.createElement("br", null)))));
+    }
+  };
+  const FallbackRenderer = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, originalUrl && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+    state: state,
+    src: originalUrl
+  }, rest))), caption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, caption === null || caption === void 0 ? void 0 : caption.split('\n').map((line, idx) => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    key: "content-line-".concat(idx)
+  }, line, /*#__PURE__*/_react.default.createElement("br", null))))));
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  return /*#__PURE__*/_react.default.createElement(Messages, {
+    type: type,
+    state: state,
+    isInteractive: isInteractive,
+    isImg: true
+  }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null));
+};
+const ProductDetailRender = _ref26 => {
   let {
     type,
     state,
     header,
     body,
     isInteractive
-  } = _ref25;
+  } = _ref26;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
     state: state,
@@ -462,7 +497,7 @@ const ProductDetailRender = _ref25 => {
     state: state
   }, /*#__PURE__*/_react.default.createElement(_ShoppingCartOutlined.default, null), "Catalog")));
 };
-const ListReplyRender = _ref26 => {
+const ListReplyRender = _ref27 => {
   let {
     title,
     body,
@@ -474,7 +509,7 @@ const ListReplyRender = _ref26 => {
     header,
     action,
     footer
-  } = _ref26;
+  } = _ref27;
   const renderers = {
     dotgo_v3: () => {
       var _header$header$type3, _body$text2;
@@ -498,7 +533,7 @@ const ListReplyRender = _ref26 => {
     isInteractive: isInteractive
   }, /*#__PURE__*/_react.default.createElement(ConnectorRenderer, null)));
 };
-const OrderRender = _ref27 => {
+const OrderRender = _ref28 => {
   let {
     amount,
     type,
@@ -507,14 +542,14 @@ const OrderRender = _ref27 => {
     product_items,
     connector,
     isInteractive
-  } = _ref27;
+  } = _ref28;
   const renderers = {
-    dotgo_v3: _ref28 => {
+    dotgo_v3: _ref29 => {
       let {
         displayItems,
         sumQuantities,
         setDisplayItems
-      } = _ref28;
+      } = _ref29;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OrderBody, {
         state: state
       }, /*#__PURE__*/_react.default.createElement(CartContent, {
@@ -544,12 +579,12 @@ const OrderRender = _ref27 => {
       }, /*#__PURE__*/_react.default.createElement("p", null, displayItems ? 'HIDE' : 'SHOW', " CART ITEMS")));
     }
   };
-  const FallbackRenderer = _ref29 => {
+  const FallbackRenderer = _ref30 => {
     let {
       sumQuantities,
       displayItems,
       setDisplayItems
-    } = _ref29;
+    } = _ref30;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OrderBody, {
       state: state
     }, /*#__PURE__*/_react.default.createElement(CartContent, {
@@ -596,7 +631,7 @@ const OrderRender = _ref27 => {
     items: items
   })));
 };
-BmChat.Details = _ref30 => {
+BmChat.Details = _ref31 => {
   var _children$message, _children$message2;
   let {
       children,
@@ -615,8 +650,8 @@ BmChat.Details = _ref30 => {
       isInteractive,
       type,
       extension
-    } = _ref30,
-    rest = _objectWithoutProperties(_ref30, _excluded3);
+    } = _ref31,
+    rest = _objectWithoutProperties(_ref31, _excluded3);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
@@ -655,6 +690,12 @@ BmChat.Details = _ref30 => {
     type: type,
     state: state,
     connector: metadata.connector
+  })) : metadata.message.type === 'image' ? /*#__PURE__*/_react.default.createElement(ImageRender, _extends({
+    isInteractive: true
+  }, metadata.message, {
+    type: type,
+    state: state,
+    connector: metadata === null || metadata === void 0 ? void 0 : metadata.connector
   })) : /*#__PURE__*/_react.default.createElement(Messages, {
     metadata: metadata,
     state: state
@@ -675,6 +716,10 @@ BmChat.Details = _ref30 => {
     type: type,
     state: state,
     connector: children === null || children === void 0 ? void 0 : children.connector
+  })), children.message.type === 'image' && /*#__PURE__*/_react.default.createElement(ImageRender, _extends({}, children.message, {
+    type: type,
+    state: state,
+    connector: children === null || children === void 0 ? void 0 : children.connector
   }))) : type === 'pdf' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
     file: {
       url: "".concat(file)

package/package.json

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

package/src/App.js

@@ -600,6 +600,72 @@ const Chat = () => {
         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',
+      },
+    },
   ];
   const isJson = (itemOg) => {
     let item = itemOg;

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

@@ -517,6 +517,68 @@ const QuickReplyRender = ({
     </Messages>
   );
 };
+const ImageRender = ({
+  type,
+  state,
+  rest,
+  isInteractive,
+  connector,
+  caption,
+  originalUrl,
+}) => {
+  const renderers = {
+    dotgo_v3: () => (
+      <>
+        {originalUrl && (
+          <>
+            <BmImageChat state={state} src={originalUrl} {...rest} />
+          </>
+        )}
+
+        {caption && (
+          <>
+            {caption?.text?.split('\n').map((line, idx) => (
+              <p key={`body-line-${idx}`}>
+                {line}
+                <br />
+              </p>
+            ))}
+          </>
+        )}
+      </>
+    ),
+  };
+
+  const FallbackRenderer = () => (
+    <>
+      {originalUrl && (
+        <div>
+          <BmImageChat state={state} src={originalUrl} {...rest} />
+        </div>
+      )}
+
+      {caption && (
+        <>
+          {caption?.split('\n').map((line, idx) => (
+            <div>
+              <p key={`content-line-${idx}`}>
+                {line}
+                <br />
+              </p>
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  );
+
+  const ConnectorRenderer = renderers[connector] || FallbackRenderer;
+  return (
+    <Messages type={type} state={state} isInteractive={isInteractive} isImg>
+      <ConnectorRenderer />
+    </Messages>
+  );
+};
 const ProductDetailRender = ({ type, state, header, body, isInteractive }) => {
   return (
     <>
@@ -820,6 +882,14 @@ BmChat.Details = ({
                       state={state}
                       connector={metadata.connector}
                     />
+                  ) : metadata.message.type === 'image' ? (
+                    <ImageRender
+                      isInteractive
+                      {...metadata.message}
+                      type={type}
+                      state={state}
+                      connector={metadata?.connector}
+                    />
                   ) : (
                     <Messages metadata={metadata} state={state}>
                       {metadata.message.text}
@@ -865,6 +935,14 @@ BmChat.Details = ({
                           connector={children?.connector}
                         />
                       )}
+                      {children.message.type === 'image' && (
+                        <ImageRender
+                          {...children.message}
+                          type={type}
+                          state={state}
+                          connector={children?.connector}
+                        />
+                      )}
                     </>
                   ) : type === 'pdf' ? (
                     <>