beem-component 2.1.21 → 2.1.23

package/dist/components/Card_v2/Card.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmCardv2 = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-const _excluded = ["className", "children", "borderColor", "borderWidth"];
+const _excluded = ["className", "children", "borderColor", "borderWidth", "contentHeight"];
 /* eslint-disable func-style */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -23,10 +24,11 @@ const hexToRgba = function (hex) {
     const g = parseInt(normalizedHex.slice(2, 4), 16);
     const b = parseInt(normalizedHex.slice(4, 6), 16);
     return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
-  } catch (e) {
+  } catch (_unused) {
     return "rgba(0, 0, 0, ".concat(opacity, ")");
   }
 };
+const CardContext = /*#__PURE__*/(0, _react.createContext)({});
 const StyledCard = _styledComponents.default.div.withConfig({
   displayName: "Card__StyledCard"
 })(["background-color:var(--card,#fff);color:var(--card-foreground,#000);display:flex;flex-direction:column;gap:1.5rem;border-radius:0.75rem;border-style:solid;border-color:", ";border-width:", ";width:100%;"], _ref => {
@@ -49,25 +51,49 @@ const Title = _styledComponents.default.h4.withConfig({
 const Description = _styledComponents.default.p.withConfig({
   displayName: "Card__Description"
 })(["color:var(--muted-foreground,#666);margin:0;"]);
-const Content = _styledComponents.default.div.withConfig({
-  displayName: "Card__Content"
-})(["min-height:200px;padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.3));
+const ContentWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Card__ContentWrapper"
+})(["min-height:", ";padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], _ref3 => {
+  let {
+    $contentHeight
+  } = _ref3;
+  return $contentHeight || '14.2857rem';
+}, () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.4));
+function Content(_ref4) {
+  let {
+    children,
+    style
+  } = _ref4;
+  const {
+    contentHeight
+  } = (0, _react.useContext)(CardContext);
+  return /*#__PURE__*/_react.default.createElement(ContentWrapper, {
+    $contentHeight: contentHeight,
+    style: style
+  }, children);
+}
 const Footer = _styledComponents.default.div.withConfig({
   displayName: "Card__Footer"
 })(["display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem 1.5rem 1.5rem;gap:1rem;@media (max-width:42.8571rem){flex-direction:column;align-items:stretch;& > *{width:100%;}}"]);
-function CardComponent(_ref3) {
+function CardComponent(_ref5) {
   let {
       className,
       children,
       borderColor,
-      borderWidth
-    } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded);
-  return /*#__PURE__*/_react.default.createElement(StyledCard, _extends({
+      borderWidth,
+      contentHeight
+    } = _ref5,
+    props = _objectWithoutProperties(_ref5, _excluded);
+  const contextValue = {
+    contentHeight
+  };
+  return /*#__PURE__*/_react.default.createElement(CardContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(StyledCard, _extends({
     className: className,
     borderColor: borderColor,
     borderWidth: borderWidth
-  }, props), children);
+  }, props), children));
 }
 const BmCardv2 = exports.BmCardv2 = Object.assign(CardComponent, {
   Header,

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.23",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -17,7 +17,7 @@ import React from 'react';
 // import PeopleIcon from '@mui/icons-material/People';
 // import BusinessIcon from '@mui/icons-material/Business';
 
-import { BmChat, GlobalStyle } from './lib/components';
+import { BmChat, GlobalStyle, BmCardv2, BmButton } from './lib/components';
 // import AlertBox from './lib/components/Alert/Alert';
 
 // import ProgressIndicator from './lib/components/newProgress';
@@ -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;
@@ -776,6 +842,39 @@ const Chat = () => {
           </BmChat.Details>
         )
       )}
+      <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>
+          <BmButton
+            borderColor="#000000"
+            width="100%"
+            size="medium"
+            variant="secondary"
+            color="#000000"
+          >
+            Cancel
+          </BmButton>
+        </BmCardv2.Footer>
+      </BmCardv2>
     </>
   );
 };

package/src/lib/components/Card_v2/Card.js

@@ -1,5 +1,5 @@
 /* eslint-disable func-style */
-import React from 'react';
+import React, { createContext, useContext } from 'react';
 import styled from 'styled-components';
 
 const hexToRgba = (hex, opacity = 0.6) => {
@@ -12,16 +12,17 @@ const hexToRgba = (hex, opacity = 0.6) => {
     ) {
       throw new Error('Invalid hex');
     }
-
     const r = parseInt(normalizedHex.slice(0, 2), 16);
     const g = parseInt(normalizedHex.slice(2, 4), 16);
     const b = parseInt(normalizedHex.slice(4, 6), 16);
     return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
+  } catch {
     return `rgba(0, 0, 0, ${opacity})`;
   }
 };
 
+const CardContext = createContext({});
+
 const StyledCard = styled.div`
   background-color: var(--card, #fff);
   color: var(--card-foreground, #000);
@@ -53,12 +54,11 @@ const Description = styled.p`
   margin: 0;
 `;
 
-const Content = styled.div`
-  min-height: 200px;
+const ContentWrapper = styled.div`
+  min-height: ${({ $contentHeight }) => $contentHeight || '14.2857rem'};
   padding: 0 1.5rem;
   max-height: calc(100vh - 28.5714rem);
   overflow-y: auto;
-
   scrollbar-width: thin;
   scrollbar-color: ${() => hexToRgba('#33b1ba', 0.2)} transparent;
 
@@ -69,7 +69,7 @@ const Content = styled.div`
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: ${() => hexToRgba('#33b1ba', 0.3)};
+    background: ${() => hexToRgba('#33b1ba', 0.4)};
   }
 
   &:last-child {
@@ -81,6 +81,15 @@ const Content = styled.div`
   }
 `;
 
+function Content({ children, style }) {
+  const { contentHeight } = useContext(CardContext);
+  return (
+    <ContentWrapper $contentHeight={contentHeight} style={style}>
+      {children}
+    </ContentWrapper>
+  );
+}
+
 const Footer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -91,7 +100,6 @@ const Footer = styled.div`
   @media (max-width: 42.8571rem) {
     flex-direction: column;
     align-items: stretch;
-
     & > * {
       width: 100%;
     }
@@ -103,17 +111,22 @@ function CardComponent({
   children,
   borderColor,
   borderWidth,
+  contentHeight,
   ...props
 }) {
+  const contextValue = { contentHeight };
+
   return (
-    <StyledCard
-      className={className}
-      borderColor={borderColor}
-      borderWidth={borderWidth}
-      {...props}
-    >
-      {children}
-    </StyledCard>
+    <CardContext.Provider value={contextValue}>
+      <StyledCard
+        className={className}
+        borderColor={borderColor}
+        borderWidth={borderWidth}
+        {...props}
+      >
+        {children}
+      </StyledCard>
+    </CardContext.Provider>
   );
 }
 

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' ? (
                     <>