beem-component 1.5.6 → 1.5.7

package/dist/components/text.js

@@ -3,20 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.p = exports.input = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
+exports.p = exports.input = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
 
 var _typography = require("./typography");
 
-var h1 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.571rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+// 32px
+var h1 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 24px
+
 exports.h1 = h1;
-var h2 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
+var h2 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;"); // 18px
+
 exports.h2 = h2;
-var h3 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h3 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 16px
+
 exports.h3 = h3;
-var h4 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h4 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 14px
+
 exports.h4 = h4;
-var h5 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h5 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 12px
+
 exports.h5 = h5;
+var h6 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 0.857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;"); // 14px
+
+exports.h6 = h6;
 var p = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 exports.p = p;
 var input = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.5.6",
+    "version": "1.5.7",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {
@@ -17,7 +17,8 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
-        "web-vitals": "^1.1.2"
+        "web-vitals": "^1.1.2",
+        "babel-loader": "8.1.0"
     },
     "dependencies": {
         "@emotion/react": "^11.7.1",

package/src/App.js

@@ -1,181 +1,34 @@
-import React from "react";
-import { AttachFile } from "@material-ui/icons";
-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.scss";
-import image from "../src/lib/assets/chart-img.png";
-import azam from "../src/lib/images/azam1.png";
+import React, { useState } from "react";
+import { BmModal, BmButton, GlobalStyle } from "./lib/components";
+import { BmProfileIcon } from "./lib/components/ProfileIcon/ProfileIcon";
+import beem from './lib/assets/beem.jpeg';
 
 const Chat = () => {
+  const [showModal, setShowModal] = useState(false);
+
   return (
-    <BmChat>
-      <BmChat.Body>
-        <BmChat.Details
-          state="inbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          src={image}
-          fileName={<p>attachment.jpg</p>}
-        />
-         <BmChat.Details
-          state="outbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          // src={image}
-          // fileName={<p>attachment.jpg</p>}
-        >
-          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
-Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
-Angalia asilimia ya QUALITY pale chini.
-Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
-Au kama una aina nyingine ya kisimbuzi;
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
-Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Au
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
-Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Angalia asilimia ya QUALITY pale chini.
-QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
-Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="inbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-          // src={image}
-          // fileName={<p>attachment.jpg</p>}
-        >
-          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
-Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
-Angalia asilimia ya QUALITY pale chini.
-Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
-Au kama una aina nyingine ya kisimbuzi;
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
-Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Au
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
-Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Angalia asilimia ya QUALITY pale chini.
-QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
-Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-          src={azam}
-          file={<p>fildjfdlkfjlkfdjfldjfldsjfldsje.jpg</p>}
-        >
-          <p>Hekkoi</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <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"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>{" "}
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-      </BmChat.Body>
-      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
-        <div class="chat-footer">
-          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-        </div>
-        <div class="chat-footer">
-          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-          <BmIcons icon={<AttachFile />} size="xlarge" />
-          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-          <BmInput placeholder="Enter Message" style={{ flex: 1 }} />
-          <BmIcons icon={<SendIcon />} size="xlarge" />
-        </div>
-      </BmChat.Footer>
-    </BmChat>
+    <>
+      <GlobalStyle />
+      <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal show={showModal} onHide={() => setShowModal(false)}>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.SubHeader>
+          <h5>This modal has a sub heading</h5>
+        </BmModal.SubHeader>
+        <BmModal.Body>
+          <BmProfileIcon img={beem} content={<h3>TV</h3>} channel="facebook" size="xsmall" />
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+        </BmModal.Footer>
+      </BmModal>
+      <BmProfileIcon img={beem} channel="instagram" />
+    </>
   );
 };
 

package/src/lib/components/ChatComponents/ContactCards/contactCards.stories.js

@@ -3,7 +3,7 @@ import React from "react";
 import BmContactCard from "./contactCards";
 import BmAvatar from "../../Avatars/avatars";
 import BmCounter from "../../MessageCounter/messageCounter";
-import { BmTag } from "../../tags";
+import { BmTag } from "../../Tags/tags";
 
 export default {
   component: { BmContactCard, BmAvatar, BmTag, BmCounter },

package/src/lib/components/Modals/modal.js

@@ -28,7 +28,7 @@ export const ModalContent = styled.div`
   max-width: 100%;
 
   > *:not(:last-child) {
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
   }
   @media (min-width: 576px) {
     max-width: 500px;
@@ -109,8 +109,9 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
       {(value) => (
         <>
           <ModalHeader {...rest}>
+            <p>&nbsp;</p>
             {children}
-            {closeButton && (
+            {closeButton ? (
               <BmIcons
                 size="xlarge"
                 icon={<Clear />}
@@ -119,7 +120,7 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
                 }
                 {...rest}
               />
-            )}
+            ) : <p>&nbsp;</p>}
           </ModalHeader>
         </>
       )}
@@ -127,6 +128,13 @@ BmModal.Header = ({ children, size, onHide, closeButton, show, ...rest }) => {
   );
 };
 
+BmModal.SubHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items:center;
+`;
+
 BmModal.Body = styled.div`
   display: flex;
   flex-direction: column;

package/src/lib/components/Modals/modals.stories.js

@@ -51,6 +51,31 @@ export const SampleModal = () => {
     </>
   );
 };
+
+export const ModalWithSubHeader = () => {
+  const [showModal, setShowModal] = useState(false);
+  return (
+    <>
+      <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal show={showModal} onHide={() => setShowModal(false)}>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.SubHeader>
+          <h5>This modal has a sub heading</h5>
+        </BmModal.SubHeader>
+        <BmModal.Body>
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+        </BmModal.Footer>
+      </BmModal>
+    </>
+  );
+};
 export const ExampleModal = () => {
   const [showModal, setShowModal] = useState(false);
   return (

package/src/lib/components/ProfileIcon/ProfileIcon.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BmSecondaryBlue12, BmBgLightBlue } from '../colors';
+import wa from '../../assets/wa.png';
+import fb from '../../assets/fb.png';
+import insta from '../../assets/insta.png';
+
+
+const handleSize = (size) => {
+    if (size) {
+        if (size === "large") return "3.429rem";
+        if (size === "medium") return "2.286rem";
+        if (size === "small") return "1.714rem";
+        if (size === "xsmall") return "1.429rem";
+    }
+    return "3.429rem"
+};
+
+const position = (size) => {
+    if (size) {
+        if (size === "large") return "2.286rem";
+        if (size === "medium") return "1.5rem";
+        if (size === "small") return "1rem";
+        if (size === "xsmall") return "0.714rem";
+    }
+    return "2.286rem"
+};
+
+const ProfileImg = styled.img`
+    height: ${(props) => handleSize(props.size)};
+    width: ${(props) => handleSize(props.size)};
+    object-fit: contain;
+    border-radius: 50%;
+    display:flex;
+`;
+
+const Profile = styled.div`
+    height: ${(props) => handleSize(props.size)};
+    width: ${(props) => handleSize(props.size)};
+    border-radius: 50%;
+    border: 1px solid ${BmBgLightBlue};
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    position: relative;
+    background: ${BmSecondaryBlue12};
+`;
+
+const Content = styled.div`
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    position: absolute;
+`;
+
+
+const Dot = styled.img`
+    position: absolute;
+    left: ${(props) => position(props.size)};
+    bottom: 0rem;
+    object-fit: contain;
+    height: 1rem;
+    width: 1rem;
+`;
+
+export const BmProfileIcon = ({ img, content, channel, size, ...rest }) => {
+    return (
+        <>
+            <Profile size={size} {...rest}>
+                {content && !img && <Content>{content}</Content>}
+                {img && !content && <ProfileImg src={img} />}
+                {channel && channel === 'whatsapp' && <Dot size={size} src={wa} />}
+                {channel && channel === 'facebook' && <Dot size={size} src={fb} />}
+                {channel && channel === 'instagram' && <Dot size={size} src={insta} />}
+            </Profile>
+        </>
+    )
+}

package/src/lib/components/ProfileIcon/profileIcon.stories.js

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from "react";
+import { BmProfileIcon } from "./ProfileIcon";
+import beem from '../../assets/beem.jpeg';
+
+
+export default {
+  component: BmProfileIcon,
+  title: "components/ProfileIcon",
+  argTypes: {
+    size: {
+      options: ["xsmall", "small", "medium", "large"],
+      control: { type: "select" },
+      description: "Size of the profile",
+      defaultValue: { summary: "large" },
+    },
+    img: {
+      description: "Image to be displayed (will not be displayed if content is present)",
+      defaultValue: { summary: undefined },
+    },
+    content: {
+      description: "Content to be displayed (will not be displayed if image is present)",
+      defaultValue: { summary: undefined },
+    },
+    channel: {
+      options: ["whatsapp", "instagram", "facebook"],
+      control: { type: "select" },
+      description: "Profile badge",
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+const MainProfileIcon = (args) => <BmProfileIcon {...args} />;
+
+export const Sample = MainProfileIcon.bind({});
+Sample.args = {
+  channel: "whatsapp",
+  size: "large",
+};
+
+export const ImageProfile = MainProfileIcon.bind({});
+ImageProfile.args = {
+  channel: "whatsapp",
+  size: "large",
+  img: beem,
+  content: undefined
+};
+
+export const ContentProfile = MainProfileIcon.bind({});
+ContentProfile.args = {
+  channel: "whatsapp",
+  size: "large",
+  content: <h4>BC</h4>,
+  img: undefined
+};
+

package/src/lib/components/examples/App.js

@@ -0,0 +1,181 @@
+import React from "react";
+import { AttachFile } from "@material-ui/icons";
+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.scss";
+import image from "../src/lib/assets/chart-img.png";
+
+const Chat = () => {
+  return (
+    <BmChat>
+      <BmChat.Body>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          src={image}
+          fileName={<p>attachment.jpg</p>}
+        />
+         <BmChat.Details
+          state="outbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // src={image}
+          // fileName={<p>attachment.jpg</p>}
+        >
+          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
+Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
+Angalia asilimia ya QUALITY pale chini.
+Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
+Au kama una aina nyingine ya kisimbuzi;
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
+Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Au
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
+Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Angalia asilimia ya QUALITY pale chini.
+QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
+Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // src={image}
+          // fileName={<p>attachment.jpg</p>}
+        >
+          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
+Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
+Angalia asilimia ya QUALITY pale chini.
+Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
+Au kama una aina nyingine ya kisimbuzi;
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
+Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Au
+Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
+Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
+Angalia asilimia ya QUALITY pale chini.
+QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
+Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+          // src={azam}
+          file={<p>fildjfdlkfjlkfdjfldjfldsjfldsje.jpg</p>}
+        >
+          <p>Hekkoi</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <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"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+      </BmChat.Body>
+      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+        </div>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+          <BmIcons icon={<AttachFile />} size="xlarge" />
+          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+          <BmInput placeholder="Enter Message" style={{ flex: 1 }} />
+          <BmIcons icon={<SendIcon />} size="xlarge" />
+        </div>
+      </BmChat.Footer>
+    </BmChat>
+  );
+};
+
+export default Chat;