beem-component 1.4.0 → 1.4.3

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

@@ -21,7 +21,7 @@ var _iconStyles = require("../../iconStyles");
 
 var _colors = require("../../colors");
 
-var _excluded = ["state", "file", "src", "fileName"],
+var _excluded = ["state", "file", "src", "fileName", "onDownload"],
     _excluded2 = ["state", "src", "fileName"],
     _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName"];
 
@@ -37,7 +37,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), ""
+var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), ''
 /* border: 0.071rem solid ${BmGrey400}; */
 );
 
@@ -46,15 +46,15 @@ BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject
 var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n    margin-bottom: 0.5rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n  flex-grow: 1;\n"])), function (_ref) {
   var state = _ref.state;
 
-  if (state === "inbound") {
-    return "flex-start";
+  if (state === 'inbound') {
+    return 'flex-start';
   }
 
-  if (state === "outbound") {
-    return "flex-end";
+  if (state === 'outbound') {
+    return 'flex-end';
   }
 
-  return "row";
+  return 'row';
 });
 
 var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 70%;\n  > * {\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n"])));
@@ -63,8 +63,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref2.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -72,8 +72,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref3.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -81,8 +81,8 @@ var Messages = _styledComponents.default.div(_templateObject5 || (_templateObjec
   var state = _ref4.state;
 
   if (state) {
-    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -93,14 +93,14 @@ var MessagesSubDetails = _styledComponents.default.div(_templateObject6 || (_tem
 var handleState = function handleState(_ref5) {
   var session = _ref5.session;
 
-  if (session === "bot") {
+  if (session === 'bot') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "chatbot"
     });
   }
 
-  if (session === "live") {
+  if (session === 'live') {
     return /*#__PURE__*/_react.default.createElement(_avatars.default, {
       size: "small",
       user: "employee"
@@ -113,8 +113,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref6.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryWhite);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryBlue);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -122,8 +122,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref7.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -131,8 +131,8 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref8.state;
 
   if (state) {
-    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -140,14 +140,14 @@ var FileAttachmentWrapper = _styledComponents.default.div(_templateObject7 || (_
   var state = _ref9.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlue);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
-}, ""
+}, ''
 /* max-width: 100%; */
-, ""
+, ''
 /* max-height: 100%; */
 );
 
@@ -156,6 +156,7 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
       file = _ref10.file,
       src = _ref10.src,
       fileName = _ref10.fileName,
+      onDownload = _ref10.onDownload,
       rest = _objectWithoutProperties(_ref10, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
@@ -163,7 +164,8 @@ var BmFileAttachment = function BmFileAttachment(_ref10) {
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_FilePresent.default, null)
   }), fileName, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
-    icon: /*#__PURE__*/_react.default.createElement(_Download.default, null)
+    icon: /*#__PURE__*/_react.default.createElement(_Download.default, null),
+    onClick: onDownload
   }));
 }; //Start of Component for Images
 
@@ -172,8 +174,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
   var state = _ref11.state;
 
   if (state) {
-    if (state === "inbound") return "".concat(_colors.BmPrimaryBlack);
-    if (state === "outbound") return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
+    if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -181,8 +183,8 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
   var state = _ref12.state;
 
   if (state) {
-    if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-    if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
   }
 
   return "".concat(_colors.BmPrimaryWhite);
@@ -190,7 +192,7 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
 
 exports.BmImageWrapper = BmImageWrapper;
 
-var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ""
+var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ''
 /* Fix width */
 );
 
@@ -234,7 +236,7 @@ BmChat.Details = function (_ref14) {
 
   return /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
-  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "inbound" && session && handleState({
+  }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
     state: state,
     session: session
   })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
@@ -247,15 +249,15 @@ BmChat.Details = function (_ref14) {
     file: file,
     fileName: fileName,
     state: state
-  }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === "sent" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }, rest)), /*#__PURE__*/_react.default.createElement(MessagesSubDetails, null, displayTime && displayTime, status === 'sent' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.DoneAll, null),
     color: "".concat(_colors.BmSecondaryDarkGreen),
     size: "small"
-  }), status === "failed" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }), status === 'failed' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
     color: "".concat(_colors.BmPrimaryBlack),
     size: "small"
-  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "outbound" && session && handleState({
+  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'outbound' && session && handleState({
     state: state,
     session: session
   })));

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

@@ -26,9 +26,10 @@ var _chartImg = _interopRequireDefault(require("../../../assets/chart-img.png"))
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-anonymous-default-export */
+// TODO: ADD DESCRIPTION
 var _default = {
   component: _chatBody.default,
-  title: "components/Chat/MainChat/ChatBody"
+  title: 'components/Chat/MainChat/ChatBody'
 };
 exports.default = _default;
 
@@ -70,7 +71,10 @@ var ChatBody = function ChatBody() {
     displayTime: /*#__PURE__*/_react.default.createElement("p", null, "10:00am"),
     status: "failed",
     fileName: /*#__PURE__*/_react.default.createElement("p", null, "file.csv"),
-    file: _chartImg.default
+    file: _chartImg.default,
+    onDownload: function onDownload() {
+      alert('hello');
+    }
   })), /*#__PURE__*/_react.default.createElement(_chatBody.default.Footer, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "chat-footer"
   }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
@@ -85,7 +89,7 @@ var ChatBody = function ChatBody() {
   }), /*#__PURE__*/_react.default.createElement(_input.BmInput, {
     placeholder: "Enter Message",
     style: {
-      flex: "1"
+      flex: '1'
     }
   }), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_Send.default, null),

package/package.json

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

package/src/App.js

@@ -1,20 +1,87 @@
-import React from "react";
-import "../src/main.scss";
-import { BmAccordion, BmTab } from "./lib/components";
-import { GlobalStyle } from "./lib/components/globalStyles";
-import "./lib/assets/css/sidebar.scss";
+import React from 'react';
+import '../src/main.scss';
+import { BmAccordion, BmTab, BmChat } from './lib/components';
+import { GlobalStyle } from './lib/components/globalStyles';
+import './lib/assets/css/sidebar.scss';
 
 export const App = () => {
+  const image =
+    'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Vector.jpg?AWSAccessKeyId=AKIAVCAYXA54EPKHSRGL&Expires=1726995050&Signature=kP4gVPac4c7Sol2PBgGZbQ2TjLM%3D';
   return (
     <>
       <GlobalStyle />
       {/* <MainWrapper> */}
-      <BmAccordion>
-        <BmAccordion.Title>
-          <p>Hello</p>
-        </BmAccordion.Title>
-      </BmAccordion>
-      <BmTab state="active" stateColor="red">Hello</BmTab>
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state='inbound'
+            session='bot'
+            displayTime={<p>12:00pm</p>}
+            status='sent'
+          >
+            <p>Inbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state='inbound'
+            session='live'
+            displayTime={<p>12:00pm</p>}
+            status='sent'
+            fileName={<p>chat.png</p>}
+            src={image}
+          />
+          <BmChat.Details
+            state='inbound'
+            session='live'
+            displayTime={<p>10:00am</p>}
+            status='failed'
+            fileName={<p>file.csv</p>}
+            onDownload={() => {
+              alert('hello');
+            }}
+            file={image}
+          />
+          <BmChat.Details
+            state='outbound'
+            session='bot'
+            displayTime={<p>12:00pm</p>}
+            status='sent'
+          >
+            <p>Outbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state='outbound'
+            session='live'
+            displayTime={<p>12:00pm</p>}
+            status='sent'
+            fileName={<p>chat.png</p>}
+            onDownload={() => {
+              alert('hello');
+            }}
+            src={image}
+          />
+          <BmChat.Details
+            state='outbound'
+            session='live'
+            displayTime={<p>10:00am</p>}
+            status='failed'
+            fileName={<p>file.csv</p>}
+            file={image}
+            
+          />
+        </BmChat.Body>
+        {/* <BmChat.Footer>
+          <div className='chat-footer'>
+            <BmIcons icon={<EmojiEmotionsIcon />} size='xlarge' />
+            <BmIcons icon={<AttachFileIcon />} size='xlarge' />
+            <BmIcons icon={<QuickreplyIcon />} size='xlarge' />
+            <BmInput placeholder='Enter Message' style={{ flex: '1' }} />
+            <BmIcons icon={<SendIcon />} size='xlarge' />
+          </div>
+        </BmChat.Footer> */}
+      </BmChat>
+      <BmTab state='active' stateColor='red'>
+        Hello
+      </BmTab>
       {/* </MainWrapper> */}
     </>
   );

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

@@ -1,10 +1,10 @@
-import React from "react";
-import { Done, DoneAll } from "@material-ui/icons";
-import FilePresentIcon from "@mui/icons-material/FilePresent";
-import DownloadIcon from "@mui/icons-material/Download";
-import styled from "styled-components";
-import BmAvatar from "../../Avatars/avatars";
-import { BmIcons } from "../../iconStyles";
+import React from 'react';
+import { Done, DoneAll } from '@material-ui/icons';
+import FilePresentIcon from '@mui/icons-material/FilePresent';
+import DownloadIcon from '@mui/icons-material/Download';
+import styled from 'styled-components';
+import BmAvatar from '../../Avatars/avatars';
+import { BmIcons } from '../../iconStyles';
 
 import {
   BmPrimaryWhite,
@@ -12,13 +12,13 @@ import {
   BmPrimaryBlack,
   BmSecondaryDarkGreen,
   BmGrey200,
-} from "../../colors";
+} from '../../colors';
 
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
+  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
 `;
 
 BmChat.Body = styled.div`
@@ -33,13 +33,13 @@ BmChat.Body = styled.div`
 const Details = styled.div`
   display: flex;
   justify-content: ${({ state }) => {
-    if (state === "inbound") {
-      return "flex-start";
+    if (state === 'inbound') {
+      return 'flex-start';
     }
-    if (state === "outbound") {
-      return "flex-end";
+    if (state === 'outbound') {
+      return 'flex-end';
     }
-    return "row";
+    return 'row';
   }};
   > *:not(:last-child) {
     margin-right: 1rem;
@@ -68,22 +68,22 @@ const Messages = styled.div`
   padding: 0.5rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryWhite}`;
-      if (state === "outbound") return `${BmPrimaryBlue}`;
+      if (state === 'inbound') return `${BmPrimaryWhite}`;
+      if (state === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   color: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryBlack}`;
-      if (state === "outbound") return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -103,11 +103,11 @@ const MessagesSubDetails = styled.div`
 `;
 
 const handleState = ({ session }) => {
-  if (session === "bot") {
-    return <BmAvatar size="small" user="chatbot" />;
+  if (session === 'bot') {
+    return <BmAvatar size='small' user='chatbot' />;
   }
-  if (session === "live") {
-    return <BmAvatar size="small" user="employee" />;
+  if (session === 'live') {
+    return <BmAvatar size='small' user='employee' />;
   }
 };
 
@@ -119,22 +119,22 @@ const FileAttachmentWrapper = styled.div`
   padding: 1rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryWhite}`;
-      if (state === "outbound") return `${BmPrimaryBlue}`;
+      if (state === 'inbound') return `${BmPrimaryWhite}`;
+      if (state === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   color: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryBlack}`;
-      if (state === "outbound") return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -151,22 +151,29 @@ const FileAttachmentWrapper = styled.div`
     align-items: center;
     color: ${({ state }) => {
       if (state) {
-        if (state === "inbound") return `${BmPrimaryBlue}`;
-        if (state === "outbound") return `${BmPrimaryWhite}`;
+        if (state === 'inbound') return `${BmPrimaryBlue}`;
+        if (state === 'outbound') return `${BmPrimaryWhite}`;
       }
       return `${BmPrimaryWhite}`;
     }};
   }
-  ${"" /* max-width: 100%; */}
-  ${"" /* max-height: 100%; */}
+  ${'' /* max-width: 100%; */}
+  ${'' /* max-height: 100%; */}
 `;
 
-const BmFileAttachment = ({ state, file, src, fileName, ...rest }) => {
+const BmFileAttachment = ({
+  state,
+  file,
+  src,
+  fileName,
+  onDownload,
+  ...rest
+}) => {
   return (
     <FileAttachmentWrapper state={state} {...rest}>
       <BmIcons icon={<FilePresentIcon />} />
       {fileName}
-      <BmIcons icon={<DownloadIcon />} />
+      <BmIcons icon={<DownloadIcon />} onClick={onDownload} />
     </FileAttachmentWrapper>
   );
 };
@@ -176,15 +183,15 @@ export const BmImageWrapper = styled.div`
   flex-direction: column;
   color: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return `${BmPrimaryBlack}`;
-      if (state === "outbound") return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `${BmPrimaryBlack}`;
+      if (state === 'outbound') return `${BmPrimaryWhite}`;
     }
     return `${BmPrimaryWhite}`;
   }};
   border-radius: ${({ state }) => {
     if (state) {
-      if (state === "inbound") return "0.21875rem 0.21875rem 0.21875rem 0rem";
-      if (state === "outbound") return "0.21875rem 0.21875rem 0rem 0.21875rem";
+      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
+      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -192,7 +199,7 @@ export const BmImageWrapper = styled.div`
 `;
 
 export const BmImage = styled.img`
-  ${"" /* Fix width */}
+  ${'' /* Fix width */}
   width: 100%;
   object-fit: cover;
   flex-grow: 1;
@@ -202,7 +209,7 @@ export const BmImageChat = ({ state, src, fileName, ...rest }) => {
   return (
     <>
       <BmImageWrapper state={state} {...rest}>
-        <BmImage src={src} alt="src" />
+        <BmImage src={src} alt='src' />
         {fileName && (
           <BmFileAttachment
             state={state}
@@ -239,7 +246,7 @@ BmChat.Details = ({
     <Details state={state} {...rest}>
       {/* Adding for mobile */}
       <MessageState>
-        {state === "inbound" && session && handleState({ state, session })}
+        {state === 'inbound' && session && handleState({ state, session })}
       </MessageState>
       <MessageDetails>
         {/* For Images */}
@@ -259,20 +266,20 @@ BmChat.Details = ({
         )}
         <MessagesSubDetails>
           {displayTime && displayTime}
-          {status === "sent" && (
+          {status === 'sent' && (
             <BmIcons
               icon={<DoneAll />}
               color={`${BmSecondaryDarkGreen}`}
-              size="small"
+              size='small'
             />
           )}
-          {status === "failed" && (
-            <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size="small" />
+          {status === 'failed' && (
+            <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size='small' />
           )}
         </MessagesSubDetails>
       </MessageDetails>
       <MessageState>
-        {state === "outbound" && session && handleState({ state, session })}
+        {state === 'outbound' && session && handleState({ state, session })}
       </MessageState>
     </Details>
   );