beem-component 2.0.19 → 2.0.20

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

@@ -20,9 +20,9 @@ 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; }
@@ -37,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';
@@ -198,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({
@@ -255,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({
@@ -262,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, {
@@ -298,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({
@@ -428,6 +433,7 @@ 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({
@@ -491,6 +497,7 @@ BmChat.Details = function (_ref30) {
   }))) : /*#__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.19",
+  "version": "2.0.20",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -115,10 +115,11 @@ const Chat = () => {
     {
       id: 78741,
       message:
-        'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/1b5a7bd9-a989-4963-8949-88aa748a2469.doc',
+        '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/msword',
+      message_type:
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
       messageId: null,
       is_live_agent: 0,
       is_deleted: 0,
@@ -1162,6 +1163,7 @@ const Chat = () => {
                 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>}
@@ -1192,24 +1194,14 @@ const Chat = () => {
                 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}
-              >
-                {' '}
-                <div>
-                  {/* <FileViewer
-                    fileType="docx"
-                    filePath={ms.message}
-                    onError={onError}
-                    // errorComponent={CustomErrorComponent}
-                    // onError={this.onError}
-                  /> */}
-                </div>
-              </BmChat.Details>
+              />
             );
           })}
         </BmChat.Body>

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

@@ -61,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; */}
 `;
@@ -237,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`
@@ -311,6 +316,7 @@ const BmFileAttachment = ({
   src,
   fileName,
   onDownload,
+  extension,
   link,
   ...rest
 }) => {
@@ -318,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={{
@@ -359,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}>
@@ -507,6 +516,7 @@ BmChat.Details = ({
   metadata,
   isInteractive,
   type,
+  extension,
   ...rest
 }) => {
   console.log(src);
@@ -614,6 +624,7 @@ BmChat.Details = ({
           {/* For files */}
           {file && (
             <BmFileAttachment
+              extension={extension}
               file={file}
               fileName={fileName}
               state={state}