beem-component 2.0.18 → 2.0.19

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

@@ -12,6 +12,8 @@ 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");
@@ -25,6 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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}; */);
@@ -380,11 +383,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)));
@@ -424,6 +429,7 @@ BmChat.Details = function (_ref30) {
     isInteractive = _ref30.isInteractive,
     type = _ref30.type,
     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 +438,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 +450,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,6 +480,14 @@ 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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "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,48 @@ 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/1b5a7bd9-a989-4963-8949-88aa748a2469.doc',
+      time: '2025-04-03T05:55:39.000Z',
+      direction: 'inbound',
+      message_type: 'application/msword',
+      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 +1149,71 @@ 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"
+                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' }}
+                // state="inbound"
+                // session="live"
+                // displayTime={<p>10:00am</p>}
+                // status="failed"
+                // fileName={<p>file.csv</p>}
+                // file={image}
+              >
+                {' '}
+                <div>
+                  {/* <FileViewer
+                    fileType="docx"
+                    filePath={ms.message}
+                    onError={onError}
+                    // errorComponent={CustomErrorComponent}
+                    // onError={this.onError}
+                  /> */}
+                </div>
+              </BmChat.Details>
+            );
+          })}
+        </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;
@@ -445,10 +449,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}>
@@ -498,6 +509,7 @@ BmChat.Details = ({
   type,
   ...rest
 }) => {
+  console.log(src);
   return (
     <>
       <Details state={state} {...rest}>
@@ -509,7 +521,7 @@ BmChat.Details = ({
         </MessageState>
         <MessageDetails feedPostComments={feedPostComments}>
           {/* For Images */}
-          {src && (
+          {src && !isUndefined(src) && (
             <BmImageChat
               state={state}
               src={src}
@@ -531,7 +543,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 +594,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>
                   )}