beem-component 2.0.18 → 2.0.20

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

@@ -12,19 +12,22 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactAvatar = _interopRequireDefault(require("react-avatar"));
 var _List = _interopRequireDefault(require("@mui/icons-material/List"));
 var _ShoppingCartOutlined = _interopRequireDefault(require("@mui/icons-material/ShoppingCartOutlined"));
+var _lodash = require("lodash");
+var _reactPdf = require("react-pdf");
 var _avatars = _interopRequireDefault(require("../../Avatars/avatars"));
 var _iconStyles = require("../../iconStyles");
 var _sessionDetails = require("./sessionDetails");
 var _sessionTimeline = require("./sessionTimeline");
 var _colors = require("../../colors");
 var _FeedPostComments = require("./FeedPostComments");
-var _excluded = ["state", "file", "src", "fileName", "onDownload", "link"],
-  _excluded2 = ["state", "src", "fileName"],
-  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "isInteractive", "type"];
+var _excluded = ["state", "file", "src", "fileName", "onDownload", "extension", "link"],
+  _excluded2 = ["state", "src", "extensions", "fileName"],
+  _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "isInteractive", "type", "extension"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
 var BmChat = _styledComponents.default.div.withConfig({
   displayName: "chatBody__BmChat"
 })(["display:flex;flex-direction:column;height:100%;", ""], '' /* border: 0.071rem solid ${BmGrey400}; */);
@@ -34,7 +37,7 @@ BmChat.Body = _styledComponents.default.div.withConfig({
 })(["display:flex;flex-direction:column-reverse;padding:0rem 1rem;flex-grow:1;overflow:auto;height:100%;"]);
 var Details = _styledComponents.default.div.withConfig({
   displayName: "chatBody__Details"
-})(["display:flex;justify-content:", ";> *:not(:last-child){margin-right:1rem;margin-bottom:0.5rem;}overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;flex-grow:1;", ""], function (_ref) {
+})(["display:flex;justify-content:", ";> *:not(:last-child){margin-right:1rem;margin-bottom:0.5rem;}overflow-wrap:break-word !important;word-wrap:break-word !important;margin:0rem;import{extension}from 'mime-types';flex-grow:1;", ""], function (_ref) {
   var state = _ref.state;
   if (state === 'inbound') {
     return 'flex-start';
@@ -195,6 +198,9 @@ var handleState = function handleState(_ref14) {
     });
   }
 };
+var FileNameContainer = _styledComponents.default.div.withConfig({
+  displayName: "chatBody__FileNameContainer"
+})(["display:flex;flex-direction:row;"]);
 
 // Start of File Attachment
 var FileAttachmentWrapper = _styledComponents.default.div.withConfig({
@@ -252,6 +258,7 @@ var BmFileAttachment = function BmFileAttachment(_ref20) {
     src = _ref20.src,
     fileName = _ref20.fileName,
     onDownload = _ref20.onDownload,
+    extension = _ref20.extension,
     link = _ref20.link,
     rest = _objectWithoutProperties(_ref20, _excluded);
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
@@ -259,7 +266,7 @@ var BmFileAttachment = function BmFileAttachment(_ref20) {
     src: src
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_FilePresent.default, null)
-  }), fileName, /*#__PURE__*/_react.default.createElement("a", {
+  }), /*#__PURE__*/_react.default.createElement(FileNameContainer, null, /*#__PURE__*/_react.default.createElement("p", null, fileName), /*#__PURE__*/_react.default.createElement("p", null, extension ? ".".concat(extension) : '')), /*#__PURE__*/_react.default.createElement("a", {
     href: link,
     download: true
   }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
@@ -295,6 +302,7 @@ exports.BmImage = BmImage;
 var BmImageChat = function BmImageChat(_ref23) {
   var state = _ref23.state,
     src = _ref23.src,
+    extensions = _ref23.extensions,
     fileName = _ref23.fileName,
     rest = _objectWithoutProperties(_ref23, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
@@ -380,11 +388,13 @@ var ListReplyRender = function ListReplyRender(_ref28) {
   var title = _ref28.title,
     body = _ref28.body,
     globalButtons = _ref28.globalButtons,
+    isInteractive = _ref28.isInteractive,
     type = _ref28.type,
     state = _ref28.state;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Messages, {
     type: type,
-    state: state
+    state: state,
+    isInteractive: isInteractive
   }, /*#__PURE__*/_react.default.createElement("strong", null, title), /*#__PURE__*/_react.default.createElement("p", null, body), /*#__PURE__*/_react.default.createElement(IntButton, {
     state: state
   }, /*#__PURE__*/_react.default.createElement(_List.default, null), (_globalButtons$ = globalButtons[0]) === null || _globalButtons$ === void 0 ? void 0 : _globalButtons$.title)));
@@ -423,7 +433,9 @@ BmChat.Details = function (_ref30) {
     metadata = _ref30.metadata,
     isInteractive = _ref30.isInteractive,
     type = _ref30.type,
+    extension = _ref30.extension,
     rest = _objectWithoutProperties(_ref30, _excluded3);
+  console.log(src);
   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({
@@ -432,7 +444,7 @@ BmChat.Details = function (_ref30) {
     agentName: agentName
   })), /*#__PURE__*/_react.default.createElement(MessageDetails, {
     feedPostComments: feedPostComments
-  }, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
+  }, src && !(0, _lodash.isUndefined)(src) && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
     state: state,
     src: src,
     fileName: fileName
@@ -444,7 +456,9 @@ BmChat.Details = function (_ref30) {
   }, metadata, {
     type: type,
     state: state
-  })) : metadata.type === 'list' ? /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({}, metadata, {
+  })) : metadata.type === 'list' ? /*#__PURE__*/_react.default.createElement(ListReplyRender, _extends({
+    isInteractive: true
+  }, metadata, {
     type: type,
     state: state
   })) : metadata.type === 'product_details' ? /*#__PURE__*/_react.default.createElement(ProductDetailRender, _extends({
@@ -472,9 +486,18 @@ BmChat.Details = function (_ref30) {
   })), children.type === 'order' && /*#__PURE__*/_react.default.createElement(OrderRender, _extends({}, children, {
     type: type,
     state: state
+  }))) : type === 'pdf' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: {
+      url: "".concat(file)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: 1,
+    height: "250",
+    width: "200"
   }))) : /*#__PURE__*/_react.default.createElement(Messages, {
     state: state
   }, children))), file && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
+    extension: extension,
     file: file,
     fileName: fileName,
     state: state

package/package.json

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

package/src/App.js

@@ -5,6 +5,7 @@ import React from 'react';
 // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
 
 // import { Tooltip } from '@mui/material';
+
 import {
   BmChat,
   GlobalStyle,
@@ -109,6 +110,49 @@ const Chat = () => {
       // '{"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"}]}}',
     },
   };
+
+  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',
@@ -1106,6 +1150,62 @@ const Chat = () => {
           ))}
         </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>
     </>
   );
 };

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

@@ -8,6 +8,8 @@ import styled from 'styled-components';
 import Avatar from 'react-avatar';
 import ListIcon from '@mui/icons-material/List';
 import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined';
+import { isUndefined } from 'lodash';
+import { Document, pdfjs, Page } from 'react-pdf';
 import BmAvatar from '../../Avatars/avatars';
 import { BmIcons } from '../../iconStyles';
 import { SessionDetails } from './sessionDetails';
@@ -24,6 +26,8 @@ import {
 } from '../../colors';
 import { BmFeedPostComments } from './FeedPostComments';
 
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
@@ -57,7 +61,8 @@ const Details = styled.div`
   }
   overflow-wrap: break-word !important;
   word-wrap: break-word !important;
-  margin: 0rem;
+  margin: 0rem;import { extension } from 'mime-types';
+
   flex-grow: 1;
   ${'' /* border: 1px solid red; */}
 `;
@@ -233,6 +238,10 @@ const handleState = ({ session, agentName }) => {
     return <BmAvatar size="small" user="sms" />;
   }
 };
+const FileNameContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
 
 // Start of File Attachment
 const FileAttachmentWrapper = styled.div`
@@ -307,6 +316,7 @@ const BmFileAttachment = ({
   src,
   fileName,
   onDownload,
+  extension,
   link,
   ...rest
 }) => {
@@ -314,7 +324,10 @@ const BmFileAttachment = ({
     <FileAttachmentWrapper state={state} src={src} {...rest}>
       <BmIcons icon={<FilePresentIcon />} />
       {/* {fileName} */}
-      {fileName}
+      <FileNameContainer>
+        <p>{fileName}</p>
+        <p>{extension ? `.${extension}` : ''}</p>
+      </FileNameContainer>
       <a href={link} download>
         <BmIcons
           style={{
@@ -355,7 +368,7 @@ export const BmImage = styled.img`
   }};
 `;
 
-export const BmImageChat = ({ state, src, fileName, ...rest }) => {
+export const BmImageChat = ({ state, src, extensions, fileName, ...rest }) => {
   return (
     <>
       <BmImageWrapper state={state} {...rest}>
@@ -445,10 +458,17 @@ const ProductDetailRender = ({ type, state, header, body, isInteractive }) => {
     </>
   );
 };
-const ListReplyRender = ({ title, body, globalButtons, type, state }) => {
+const ListReplyRender = ({
+  title,
+  body,
+  globalButtons,
+  isInteractive,
+  type,
+  state,
+}) => {
   return (
     <>
-      <Messages type={type} state={state}>
+      <Messages type={type} state={state} isInteractive={isInteractive}>
         <strong>{title}</strong>
         <p>{body}</p>
         <IntButton state={state}>
@@ -496,8 +516,10 @@ BmChat.Details = ({
   metadata,
   isInteractive,
   type,
+  extension,
   ...rest
 }) => {
+  console.log(src);
   return (
     <>
       <Details state={state} {...rest}>
@@ -509,7 +531,7 @@ BmChat.Details = ({
         </MessageState>
         <MessageDetails feedPostComments={feedPostComments}>
           {/* For Images */}
-          {src && (
+          {src && !isUndefined(src) && (
             <BmImageChat
               state={state}
               src={src}
@@ -531,7 +553,12 @@ BmChat.Details = ({
                       state={state}
                     />
                   ) : metadata.type === 'list' ? (
-                    <ListReplyRender {...metadata} type={type} state={state} />
+                    <ListReplyRender
+                      isInteractive
+                      {...metadata}
+                      type={type}
+                      state={state}
+                    />
                   ) : metadata.type === 'product_details' ? (
                     <ProductDetailRender
                       isInteractive
@@ -577,6 +604,16 @@ BmChat.Details = ({
                         <OrderRender {...children} type={type} state={state} />
                       )}
                     </>
+                  ) : type === 'pdf' ? (
+                    <>
+                      <Document
+                        file={{
+                          url: `${file}`,
+                        }}
+                      >
+                        <Page pageNumber={1} height="250" width="200" />
+                      </Document>
+                    </>
                   ) : (
                     <Messages state={state}>{children}</Messages>
                   )}
@@ -587,6 +624,7 @@ BmChat.Details = ({
           {/* For files */}
           {file && (
             <BmFileAttachment
+              extension={extension}
               file={file}
               fileName={fileName}
               state={state}