beem-component 1.1.6 → 1.2.0

package/dist/components/ChatComponents/LabelAccordion/LabelAccordion.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LabelAccordion = void 0;
+
+var _ = require("../..");
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = {
+  component: _.BmChatLabels,
+  title: "components/Chat/Components/LabelAccordion"
+};
+exports.default = _default;
+
+var LabelAccordion = function LabelAccordion() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "30%"
+    }
+  }, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Labels"), /*#__PURE__*/React.createElement("a", null, "Manage Labels")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatLabels, null, /*#__PURE__*/React.createElement("h4", null, "Added labels"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_.BmTag, {
+    variant: "success"
+  }, /*#__PURE__*/React.createElement("p", null, "label")), /*#__PURE__*/React.createElement(_.BmTag, {
+    variant: "warning"
+  }, /*#__PURE__*/React.createElement("p", null, "label")), /*#__PURE__*/React.createElement(_.BmTag, {
+    variant: "error"
+  }, /*#__PURE__*/React.createElement("p", null, "label"))))))));
+};
+
+exports.LabelAccordion = LabelAccordion;

package/dist/components/ChatComponents/NoteAccordion/NoteAccordion.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NoteAccordion = void 0;
+
+var _ = require("../..");
+
+var _ContentCopy = _interopRequireDefault(require("@mui/icons-material/ContentCopy"));
+
+var _icons = require("@material-ui/icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = {
+  component: _.BmChatLabels,
+  title: "components/Chat/Components/NoteAccordion"
+};
+exports.default = _default;
+
+var NoteAccordion = function NoteAccordion() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "30%"
+    }
+  }, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Notes")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatNotes, null, /*#__PURE__*/React.createElement(_.BmChatNotes.Input, {
+    type: "text",
+    placeholder: "Add Note"
+  }), /*#__PURE__*/React.createElement(_.BmChatNotes.Details, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_.BmIcons, {
+    icon: /*#__PURE__*/React.createElement(_icons.Edit, null),
+    size: "xsmall"
+  }), /*#__PURE__*/React.createElement(_.BmIcons, {
+    icon: /*#__PURE__*/React.createElement(_ContentCopy.default, null),
+    size: "xsmall"
+  }), /*#__PURE__*/React.createElement(_.BmIcons, {
+    icon: /*#__PURE__*/React.createElement(_icons.Delete, null),
+    size: "xsmall"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "By User")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, "12:00pm")))))))));
+};
+
+exports.NoteAccordion = NoteAccordion;

package/dist/components/Modals/modal.js

@@ -153,7 +153,14 @@ BmModal.Header = function (_ref4) {
   });
 };
 
-BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  > * {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n  }\n"])));
+BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  ", "\n"])), ''
+/* > * {
+display: flex;
+flex-direction: row;
+justify-content: space-between;
+width: 100%;
+} */
+);
 BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 BmModal.propTypes = {
   size: _propTypes.default.string,

package/dist/components/colors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmSecondaryYellow = exports.BmSecondaryRed8 = exports.BmSecondaryRed15 = exports.BmSecondaryRed = exports.BmSecondaryPurple = exports.BmSecondaryGrey = exports.BmSecondaryGreen8 = exports.BmSecondaryGreen15 = exports.BmSecondaryGreen = exports.BmSecondaryGold15 = exports.BmSecondaryDarkGreen = exports.BmSecondaryCyan = exports.BmPrimaryWhite = exports.BmPrimaryGold = exports.BmPrimaryBlue = exports.BmPrimaryBlack = exports.BmPictogramGold = exports.BmPictogramBlue = exports.BmGrey600 = exports.BmGrey500 = exports.BmGrey50 = exports.BmGrey400 = exports.BmGrey200 = exports.BmGrey100 = exports.BmBgLightBlue = exports.BmBgGreyBlue = exports.BmBgGrey45 = void 0;
+exports.BmSecondaryYellow = exports.BmSecondaryRed8 = exports.BmSecondaryRed15 = exports.BmSecondaryRed = exports.BmSecondaryPurple = exports.BmSecondaryGrey = exports.BmSecondaryGreen8 = exports.BmSecondaryGreen15 = exports.BmSecondaryGreen = exports.BmSecondaryGold15 = exports.BmSecondaryDarkGreen = exports.BmSecondaryCyan = exports.BmSecondaryBlue12 = exports.BmPrimaryWhite = exports.BmPrimaryGold = exports.BmPrimaryBlue = exports.BmPrimaryBlack = exports.BmPictogramGold = exports.BmPictogramBlue = exports.BmGrey600 = exports.BmGrey500 = exports.BmGrey50 = exports.BmGrey400 = exports.BmGrey200 = exports.BmGrey100 = exports.BmBgLightBlue = exports.BmBgGreyBlue = exports.BmBgGrey45 = void 0;
 // Primary Colors
 var BmPrimaryBlue = "#33B1BA";
 exports.BmPrimaryBlue = BmPrimaryBlue;
@@ -36,9 +36,12 @@ var BmSecondaryRed15 = "rgba(246, 46, 72, 0.15)";
 exports.BmSecondaryRed15 = BmSecondaryRed15;
 var BmSecondaryGreen15 = "rgba(4, 132, 75, 0.15)";
 exports.BmSecondaryGreen15 = BmSecondaryGreen15;
-var BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)"; // Background Colors
+var BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)"; // #33B1BA 12%
 
 exports.BmSecondaryGold15 = BmSecondaryGold15;
+var BmSecondaryBlue12 = "rgba(51, 177, 186, 0.12)"; // Background Colors
+
+exports.BmSecondaryBlue12 = BmSecondaryBlue12;
 var BmBgLightBlue = "#E1EAFC";
 exports.BmBgLightBlue = BmBgLightBlue;
 var BmBgGreyBlue = "#F5F6FA";

package/dist/components/index.js

@@ -355,13 +355,13 @@ var _noteBar = require("./NoteBar/noteBar");
 
 var _MainWrapper = require("../components/MainWrapper");
 
-var _chatBody = _interopRequireDefault(require("../components/ChatBody/chatBody"));
+var _chatBody = _interopRequireDefault(require("./ChatComponents/ChatBody/chatBody"));
 
-var _chatHeader = require("./ChatHeader/chatHeader");
+var _chatHeader = require("./ChatComponents/ChatHeader/chatHeader");
 
-var _contactCards = _interopRequireDefault(require("./ContactCards/contactCards"));
+var _contactCards = _interopRequireDefault(require("./ChatComponents/ContactCards/contactCards"));
 
-var _infoTab = _interopRequireDefault(require("./InfoTab/infoTab"));
+var _infoTab = _interopRequireDefault(require("./ChatComponents/InfoTab/infoTab"));
 
 var _messageCounter = _interopRequireDefault(require("./MessageCounter/messageCounter"));
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.1.6",
+    "version": "1.2.0",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
@@ -26,6 +26,7 @@
         "@material-ui/icons": "^4.11.2",
         "@mui/icons-material": "^5.2.1",
         "@mui/material": "^5.2.3",
+        "js-file-download": "^0.4.12",
         "node-sass": "^6.0.1",
         "polished": "^4.1.3",
         "react": "^17.0.2",

package/src/App.js

@@ -2,55 +2,33 @@ import React from "react";
 import "../src/main.scss";
 import { MainWrapper } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
-import "./lib/assets/css/sidebar.css";
+import "./lib/assets/css/sidebar.scss";
 import SideBar from "./SideBar";
 import ChatHeader from "./ChatHeader";
 import Chat from "./Chat";
 import CustomerInfo from "./CustomerInfo";
-import { BmTag } from "./lib/components/Tags/tags";
-import { Home } from "@material-ui/icons";
 import InfoAccordion from "./InfoAccordion";
-import BmForm from "./lib/components/ChatComponents/FormAccordion/FormAccordion";
-import { BmColorPicker } from "./lib/components/ChatComponents/ColorPicker/colorPicker";
 
 export const App = () => {
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
-        {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (
-          <BmColorPicker key={color} color={color} />
-        ))}
-        <BmTag leadingIcon={<Home />} trailingIcon={<Home />}>
-          <p>Hello</p>
-        </BmTag>
-        <BmForm>
-          <BmForm.Group>
-            <BmForm.Label>
-              <h4>Hello</h4>
-            </BmForm.Label>
-            <BmForm.Input placeholder="Hello" />
-          </BmForm.Group>
-          <BmForm.Group>
-            <BmForm.Label>
-              <h4>Hello</h4>
-            </BmForm.Label>
-            <BmForm.Input placeholder="Hello" />
-          </BmForm.Group>
-        </BmForm>
         <div className="main-chat-container">
-          <div className="sidebar">
-            <SideBar />
-          </div>
-          <div className="chat">
-            <ChatHeader />
-            <div className="chat-menu">
-              <div className="chat-messages">
-                <Chat />
-              </div>
-              <div className="chat-contact-info">
-                <CustomerInfo />
-                <InfoAccordion />
+          <div className="chat-container">
+            <div className="sidebar">
+              <SideBar />
+            </div>
+            <div className="chat">
+              <ChatHeader />
+              <div className="chat-menu">
+                <div className="chat-messages">
+                  <Chat />
+                </div>
+                <div className="chat-contact-info">
+                  <CustomerInfo />
+                  <InfoAccordion />
+                </div>
               </div>
             </div>
           </div>

package/src/Chat.js

@@ -4,7 +4,9 @@ import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
 import QuickreplyIcon from "@mui/icons-material/Quickreply";
 import SendIcon from "@mui/icons-material/Send";
 import { BmChat, BmIcons, BmInput } from "./lib/components";
-import "../src/lib/assets/css/sidebar.css";
+import "../src/lib/assets/css/sidebar.scss";
+import image from "../src/lib/assets/chart-img.png";
+import azam from "../src/lib/images/azam1.png";
 
 const Chat = () => {
   return (
@@ -15,16 +17,18 @@ const Chat = () => {
           session="bot"
           displayTime={<p>12:00pm</p>}
           status="sent"
-        >
-          <p>Inbound</p>
-        </BmChat.Details>
+          src={image}
+          fileName={<p>attachment.jpg</p>}
+        />
         <BmChat.Details
           state="outbound"
           session="live"
           displayTime={<p>10:00am</p>}
           status="failed"
+          src={azam}
+          file={<p>fildjfdlkfjlkfdjfldjfldsjfldsje.jpg</p>}
         >
-          <p>Outbound</p>
+          <p>Hekkoi</p>
         </BmChat.Details>
         <BmChat.Details
           state="outbound"
@@ -56,7 +60,15 @@ const Chat = () => {
           displayTime={<p>10:00am</p>}
           status="failed"
         >
-          <p>Outbound</p>
+          <p>
+            Habari! Mimi ni msaidizi wako binafsi Azam TV. Ningependa
+            nikusaidie, lakini tafadhali anza kwa kuchagua kati ya haya
+            nikuhudumie (Mfano chagua namba 2 kubadili kifurushi au 5 kwa msaada
+            zaidi). 1. Angalia Salio 2. Badilisha Kifurishi 3. Tuma Ujumbe
+            Kuwasha Kisimbuzi 4. Huduma za mteja mpya 5. Nahitaji msaada (Huduma
+            kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali
+            lingine?
+          </p>
         </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"

package/src/ChatHeader.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { BmChatHeader, BmButton } from "../src/lib/components/";
-import "../src/lib/assets/css/sidebar.css";
+import "../src/lib/assets/css/sidebar.scss";
 
 export const ChatHeader = () => {
   return (

package/src/lib/assets/css/{sidebar.css → sidebar.scss}

@@ -1,3 +1,9 @@
+.main-chat-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
 .sidebar {
     display: flex;
     flex-direction: column;
@@ -5,7 +11,7 @@
     height: 100%;
     overflow: auto;
     max-width: 20%;
-    width: 20%;
+    width: 100%;
     border: 1px solid #E2E2E2;
 }
 
@@ -33,7 +39,7 @@
     overflow: auto;
 }
 
-.main-chat-container {
+.chat-container {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -47,9 +53,7 @@
     display: flex;
     flex-direction: column;
     max-height: 100%;
-    height: 100%;
     flex-grow: 1;
-    max-height: 100%;
     height: 100%;
 }
 
@@ -59,6 +63,7 @@
     height: 0%;
     flex-grow: 1;
     width: 100%;
+    max-width: 100%;
 }
 
 .chat-messages {
@@ -66,7 +71,8 @@
     flex-direction: column;
     height: 100%;
     overflow: auto;
-    width: 80%;
+    width: 75%;
+    max-width: 75%;
     border: 1px solid #E2E2E2;
 }
 
@@ -76,6 +82,7 @@
     height: 100%;
     overflow: auto;
     width: 25%;
+    max-width: 25%;
     border: 1px solid #E2E2E2;
 }
 
@@ -97,4 +104,23 @@
 
 .chat-footer>*:not(:last-child) {
     margin-right: 0.5rem;
+}
+
+.quick-reply {
+    display: flex;
+    justify-content: center;
+}
+
+.label-color-picker {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start !important;
+}
+
+.label-color-picker>* {
+    margin-right: 0.5rem;
+}
+
+.label-select {
+    width: 100%;
 }

package/src/lib/components/Avatars/avatars.js

@@ -28,9 +28,8 @@ export const BmAvatarWrapper = styled.div`
   }};
   background: ${({ user }) => {
     if (user === "chatbot") return `${BmPrimaryBlue}`;
-    if (user === "employee") return `${BmGrey100}`;
-    if (user === "default") return `${BmPrimaryBlue}`;
-    return `${BmPrimaryBlue}`;
+    if (user === "employee") return `${BmPrimaryBlue}`;
+    return `${BmGrey100}`;
   }};
   border-radius: ${({ type }) => {
     if (type === "circle") return "7.143rem";
@@ -40,9 +39,8 @@ export const BmAvatarWrapper = styled.div`
   border: 0.071rem solid
     ${({ user }) => {
       if (user === "chatbot") return `${BmPrimaryBlue}`;
-      if (user === "employee") return `${BmGrey400}`;
-      if (user === "default") return `${BmPrimaryBlue}`;
-      return `${BmPrimaryBlue}`;
+      if (user === "employee") return `${BmPrimaryBlue}`;
+      return `${BmGrey100}`;
     }};
 `;
 

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

@@ -0,0 +1,279 @@
+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,
+  BmPrimaryBlue,
+  BmPrimaryBlack,
+  BmSecondaryDarkGreen,
+  BmGrey200,
+} from "../../colors";
+
+const BmChat = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  ${"" /* border: 0.071rem solid ${BmGrey400}; */}
+`;
+
+BmChat.Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0rem 1.5rem;
+  flex-grow: 1;
+  overflow: auto;
+`;
+
+const Details = styled.div`
+  display: flex;
+  ${"" /* align-items: center; */}
+  justify-content: ${({ state }) => {
+    if (state === "inbound") {
+      return "flex-start";
+    }
+    if (state === "outbound") {
+      return "flex-end";
+    }
+    return "row";
+  }};
+  > *: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;
+`;
+
+const MessageDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 50%;
+  > * {
+    margin-top: 0.5rem;
+  }
+`;
+
+const Messages = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.5rem;
+  background: ${({ state }) => {
+    if (state) {
+      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}`;
+    }
+    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";
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border: 0.071rem solid ${BmGrey200};
+  word-break: break-all;
+  margin: 0rem;
+`;
+
+const MessagesSubDetails = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  > *:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+  margin-top: 0.5rem;
+`;
+
+const handleState = ({ session }) => {
+  if (session === "bot") {
+    return <BmAvatar size="small" user="chatbot" />;
+  }
+  if (session === "live") {
+    return <BmAvatar size="small" user="employee" />;
+  }
+};
+
+// Start of File Attachment
+const FileAttachmentWrapper = styled.div`
+  display: flex;
+  cursor: pointer;
+  flex-direction: row;
+  padding: 1rem;
+  background: ${({ state }) => {
+    if (state) {
+      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}`;
+    }
+    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";
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border: 0.071rem solid ${BmGrey200};
+  > * {
+    &:last-child {
+      margin-left: auto;
+    }
+    :not(:last-child) {
+      margin-right: 0.5rem;
+    }
+  }
+  &&& > * {
+    align-items: center;
+    color: ${({ state }) => {
+      if (state) {
+        if (state === "inbound") return `${BmPrimaryBlue}`;
+        if (state === "outbound") return `${BmPrimaryWhite}`;
+      }
+      return `${BmPrimaryWhite}`;
+    }};
+  }
+  ${"" /* max-width: 100%; */}
+  ${"" /* max-height: 100%; */}
+`;
+
+const BmFileAttachment = ({ state, file, src, fileName, ...rest }) => {
+  return (
+    <FileAttachmentWrapper state={state} {...rest}>
+      <BmIcons icon={<FilePresentIcon />} />
+      {fileName}
+      <BmIcons icon={<DownloadIcon />} />
+    </FileAttachmentWrapper>
+  );
+};
+//Start of Component for Images
+export const BmImageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  color: ${({ state }) => {
+    if (state) {
+      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";
+    }
+    return `${BmPrimaryWhite}`;
+  }};
+  border: 0.071rem solid ${BmGrey200};
+`;
+
+export const BmImage = styled.img`
+  ${"" /* Fix width */}
+  width: 100%;
+  object-fit: cover;
+  flex-grow: 1;
+`;
+
+export const BmImageChat = ({ state, src, fileName, ...rest }) => {
+  return (
+    <>
+      <BmImageWrapper state={state} {...rest}>
+        <BmImage src={src} alt="src" />
+        {fileName && (
+          <BmFileAttachment
+            state={state}
+            file={src}
+            fileName={fileName}
+            {...rest}
+          />
+        )}
+      </BmImageWrapper>
+    </>
+  );
+};
+
+//End of Component for Images
+
+BmChat.Details = ({
+  children,
+  state,
+  displayTime,
+  status,
+  session,
+  src,
+  file,
+  fileName,
+  ...rest
+}) => {
+  console.log("bbbb", fileName);
+  return (
+    <Details state={state} {...rest}>
+      {state === "inbound" && session && handleState({ state, session })}
+      <MessageDetails>
+        {/* For Images */}
+        {src && (
+          <BmImageChat state={state} src={src} fileName={fileName} {...rest} />
+        )}
+        {/* For Messages */}
+        {children && <Messages state={state}>{children}</Messages>}
+        {/* For files */}
+        {file && (
+          <BmFileAttachment
+            file={file}
+            fileName={fileName}
+            state={state}
+            {...rest}
+          />
+        )}
+        <MessagesSubDetails>
+          {displayTime && displayTime}
+          {status === "sent" && (
+            <BmIcons
+              icon={<DoneAll />}
+              color={`${BmSecondaryDarkGreen}`}
+              size="small"
+            />
+          )}
+          {status === "failed" && (
+            <BmIcons icon={<Done />} color={`${BmPrimaryBlack}`} size="small" />
+          )}
+        </MessagesSubDetails>
+      </MessageDetails>
+      {state === "outbound" && session && handleState({ state, session })}
+    </Details>
+  );
+};
+
+BmChat.Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0.5rem;
+  > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+export default BmChat;