beem-component 1.1.8 → 1.2.2

package/dist/assets/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,10 +53,9 @@
     display: flex;
     flex-direction: column;
     max-height: 100%;
-    height: 100%;
     flex-grow: 1;
-    max-height: 100%;
     height: 100%;
+    width: fit-content;
 }
 
 .chat-menu {
@@ -59,6 +64,7 @@
     height: 0%;
     flex-grow: 1;
     width: 100%;
+    max-width: 100%;
 }
 
 .chat-messages {
@@ -66,7 +72,8 @@
     flex-direction: column;
     height: 100%;
     overflow: auto;
-    width: 80%;
+    width: 75%;
+    max-width: 75%;
     border: 1px solid #E2E2E2;
 }
 
@@ -76,6 +83,7 @@
     height: 100%;
     overflow: auto;
     width: 25%;
+    max-width: 25%;
     border: 1px solid #E2E2E2;
 }
 
@@ -97,4 +105,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/dist/components/Avatars/avatars.js

@@ -52,9 +52,8 @@ var BmAvatarWrapper = _styledComponents.default.div(_templateObject || (_templat
 }, function (_ref3) {
   var user = _ref3.user;
   if (user === "chatbot") return "".concat(_colors.BmPrimaryBlue);
-  if (user === "employee") return "".concat(_colors.BmGrey100);
-  if (user === "default") return "".concat(_colors.BmPrimaryBlue);
-  return "".concat(_colors.BmPrimaryBlue);
+  if (user === "employee") return "".concat(_colors.BmPrimaryBlue);
+  return "".concat(_colors.BmGrey100);
 }, function (_ref4) {
   var type = _ref4.type;
   if (type === "circle") return "7.143rem";
@@ -63,9 +62,8 @@ var BmAvatarWrapper = _styledComponents.default.div(_templateObject || (_templat
 }, function (_ref5) {
   var user = _ref5.user;
   if (user === "chatbot") return "".concat(_colors.BmPrimaryBlue);
-  if (user === "employee") return "".concat(_colors.BmGrey400);
-  if (user === "default") return "".concat(_colors.BmPrimaryBlue);
-  return "".concat(_colors.BmPrimaryBlue);
+  if (user === "employee") return "".concat(_colors.BmPrimaryBlue);
+  return "".concat(_colors.BmGrey100);
 });
 
 exports.BmAvatarWrapper = BmAvatarWrapper;

package/dist/components/Avatars/avatars.stories.js

@@ -39,7 +39,7 @@ var _default = {
       }
     },
     user: {
-      description: "Type of the Avatar ('chatbot', 'employee' or Material-UI icon)",
+      description: "Type of the Avatar ('chatbot', 'employee' or Material-UI icon), If not chatbot or employee, background color will be grey",
       defaultValue: {
         summary: undefined
       }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
+exports.default = exports.MessageState = exports.BmImageWrapper = exports.BmImageChat = exports.BmImage = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -25,7 +25,7 @@ var _excluded = ["state", "file", "src", "fileName"],
     _excluded2 = ["state", "src", "fileName"],
     _excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -59,9 +59,9 @@ var Details = _styledComponents.default.div(_templateObject3 || (_templateObject
   return "row";
 });
 
-var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 50%;\n  > * {\n    margin-top: 0.5rem;\n  }\n"])));
+var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 50%;\n  > * {\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n"])));
 
-var Messages = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 1.143rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  word-break: break-all;\n  margin: 0rem;\n"])), function (_ref2) {
+var Messages = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0.5rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  word-break: break-all;\n  margin: 0rem;\n"])), function (_ref2) {
   var state = _ref2.state;
 
   if (state) {
@@ -192,7 +192,7 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
 
 exports.BmImageWrapper = BmImageWrapper;
 
-var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 21.429rem;\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 */
 );
 
@@ -214,11 +214,15 @@ var BmImageChat = function BmImageChat(_ref13) {
     file: src,
     fileName: fileName
   }, rest))));
-}; //End of Component for Images
-
+};
 
 exports.BmImageChat = BmImageChat;
 
+var MessageState = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  @media all and (max-width: 960px) {\n    display: none;\n  }\n"]))); //End of Component for Images
+
+
+exports.MessageState = MessageState;
+
 BmChat.Details = function (_ref14) {
   var children = _ref14.children,
       state = _ref14.state,
@@ -230,13 +234,12 @@ BmChat.Details = function (_ref14) {
       fileName = _ref14.fileName,
       rest = _objectWithoutProperties(_ref14, _excluded3);
 
-  console.log("bbbb", fileName);
   return /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
-  }, rest), 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({
+  })), /*#__PURE__*/_react.default.createElement(MessageDetails, null, src && /*#__PURE__*/_react.default.createElement(BmImageChat, _extends({
     state: state,
     src: src,
     fileName: fileName
@@ -254,12 +257,12 @@ BmChat.Details = function (_ref14) {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Done, null),
     color: "".concat(_colors.BmPrimaryBlack),
     size: "small"
-  }))), state === "outbound" && session && handleState({
+  }))), /*#__PURE__*/_react.default.createElement(MessageState, null, state === "outbound" && session && handleState({
     state: state,
     session: session
-  }));
+  })));
 };
 
-BmChat.Footer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
+BmChat.Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem 0.5rem;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n"])));
 var _default = BmChat;
 exports.default = _default;

package/dist/components/ChatComponents/ContactCards/contactCards.js

@@ -15,9 +15,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmContactCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  &:hover {\n    background: ", ";\n  }\n\n  ", "\n  cursor: pointer;\n  padding: 1rem 1.5rem;\n"])), _colors.BmGrey100, function (_ref) {
+var BmContactCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  &:hover {\n    background: ", ";\n  }\n\n  ", "\n  cursor: pointer;\n  padding: 1rem 1.5rem;\n"])), _colors.BmSecondaryBlue12, function (_ref) {
   var active = _ref.active;
-  return active && "    \n    background: ".concat(_colors.BmGrey100, ";\n  ");
+  return active && "    \n    background: ".concat(_colors.BmSecondaryBlue12, ";\n  ");
 });
 
 exports.BmContactCard = BmContactCard;

package/dist/components/Modals/modal.js

@@ -58,7 +58,7 @@ var Overlay = _styledComponents.default.div(_templateObject || (_templateObject
 
 exports.Overlay = Overlay;
 
-var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: auto;\n  background: ", ";\n  width: ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmPrimaryWhite, function (_ref) {
+var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: auto;\n  background: ", ";\n  width: ", ";\n  max-width: ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmPrimaryWhite, function (_ref) {
   var size = _ref.size;
 
   if (size) {
@@ -69,30 +69,42 @@ var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateO
     return size;
   }
 
+  return "35.714rem";
+}, function (_ref2) {
+  var size = _ref2.size;
+
+  if (size) {
+    if (size === "small") return "21.429rem";
+    if (size === "default") return "35.714rem";
+    if (size === "large") return "57.143rem";
+    if (size === "xlarge") return "81.429rem";
+    return size;
+  }
+
   return "35.714rem";
 });
 
 exports.ModalContent = ModalContent;
 
-var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  z-index: 9999;\n  overflow-x: auto;\n  overflow-y: auto;\n  outline: 0;\n  position: fixed;\n  height: auto;\n  top: ", ";\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (_ref2) {
-  var centered = _ref2.centered;
+var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  z-index: 9999;\n  overflow-x: auto;\n  overflow-y: auto;\n  outline: 0;\n  position: fixed;\n  height: auto;\n  top: ", ";\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (_ref3) {
+  var centered = _ref3.centered;
 
   if (centered) {
     return "50%";
   }
 
-  return "10%";
+  return "15%";
 });
 
 exports.ModalWrapper = ModalWrapper;
 
-var BmModal = function BmModal(_ref3) {
-  var children = _ref3.children,
-      show = _ref3.show,
-      size = _ref3.size,
-      onHide = _ref3.onHide,
-      centered = _ref3.centered,
-      rest = _objectWithoutProperties(_ref3, _excluded);
+var BmModal = function BmModal(_ref4) {
+  var children = _ref4.children,
+      show = _ref4.show,
+      size = _ref4.size,
+      onHide = _ref4.onHide,
+      centered = _ref4.centered,
+      rest = _objectWithoutProperties(_ref4, _excluded);
 
   var _useState = (0, _react.useState)(show),
       _useState2 = _slicedToArray(_useState, 2),
@@ -134,13 +146,13 @@ exports.BmModal = BmModal;
 
 var ModalHeader = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
 
-BmModal.Header = function (_ref4) {
-  var children = _ref4.children,
-      size = _ref4.size,
-      onHide = _ref4.onHide,
-      closeButton = _ref4.closeButton,
-      show = _ref4.show,
-      rest = _objectWithoutProperties(_ref4, _excluded2);
+BmModal.Header = function (_ref5) {
+  var children = _ref5.children,
+      size = _ref5.size,
+      onHide = _ref5.onHide,
+      closeButton = _ref5.closeButton,
+      show = _ref5.show,
+      rest = _objectWithoutProperties(_ref5, _excluded2);
 
   return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, children, closeButton && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
@@ -153,7 +165,19 @@ 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  max-height: ", ";\n  overflow: auto;\n"])), function (_ref6) {
+  var size = _ref6.size;
+
+  if (size) {
+    if (size === "small") return "21.429rem";
+    if (size === "default") return "35.714rem";
+    if (size === "large") return "57.143rem";
+    if (size === "xlarge") return "81.429rem";
+    return size;
+  }
+
+  return "35.714rem";
+});
 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/package.json

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

package/src/App.js

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import "../src/main.scss";
-import { MainWrapper } from "./lib/components";
+import { BmButton, MainWrapper, BmModal } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
 import "./lib/assets/css/sidebar.scss";
 import SideBar from "./SideBar";
@@ -10,23 +10,42 @@ import CustomerInfo from "./CustomerInfo";
 import InfoAccordion from "./InfoAccordion";
 
 export const App = () => {
+  const [showModal, setShowModal] = useState(false);
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
+        <div>
+          <BmButton onClick={() => setShowModal(!showModal)}>
+            Click Me!
+          </BmButton>
+        </div>
+        <BmModal show={showModal} onHide={() => setShowModal(false)}>
+          <BmModal.Header closeButton>
+            <h2>Header</h2>
+          </BmModal.Header>
+          <BmModal.Body>
+            <p>This is a bodymdlkdmvlfdmvlkmvlkvmflkvmd;lkvmv;lkdmv;lmv;lfvm;lmre;mv;lkremvc;lkremvclfdmvlkfdmv;lkfdmv;lkfdmv;lfdmv;lfdmv;lfdmv;lfdmvlfd;mvlfd;vmfd;lvfdmlv</p>
+          </BmModal.Body>
+          <BmModal.Footer>
+            <p>This is a footer</p>
+          </BmModal.Footer>
+        </BmModal>
         <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

@@ -6,7 +6,7 @@ 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 azam from "../src/lib/images/azam1.png";
 
 const Chat = () => {
   return (
@@ -20,7 +20,50 @@ const Chat = () => {
           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"
@@ -61,7 +104,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/lib/assets/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,10 +53,9 @@
     display: flex;
     flex-direction: column;
     max-height: 100%;
-    height: 100%;
     flex-grow: 1;
-    max-height: 100%;
     height: 100%;
+    width: fit-content;
 }
 
 .chat-menu {
@@ -59,6 +64,7 @@
     height: 0%;
     flex-grow: 1;
     width: 100%;
+    max-width: 100%;
 }
 
 .chat-messages {
@@ -66,7 +72,8 @@
     flex-direction: column;
     height: 100%;
     overflow: auto;
-    width: 80%;
+    width: 75%;
+    max-width: 75%;
     border: 1px solid #E2E2E2;
 }
 
@@ -76,6 +83,7 @@
     height: 100%;
     overflow: auto;
     width: 25%;
+    max-width: 25%;
     border: 1px solid #E2E2E2;
 }
 
@@ -97,4 +105,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

@@ -2,7 +2,7 @@ import { Person } from "@material-ui/icons";
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { BmGrey100, BmPrimaryBlue, BmGrey400 } from "../colors";
+import { BmGrey100, BmPrimaryBlue } from "../colors";
 import { BmAvatarIcon } from "../iconStyles";
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 
@@ -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/Avatars/avatars.stories.js

@@ -21,7 +21,7 @@ export default {
     },
     user: {
       description:
-        "Type of the Avatar ('chatbot', 'employee' or Material-UI icon)",
+        "Type of the Avatar ('chatbot', 'employee' or Material-UI icon), If not chatbot or employee, background color will be grey",
       defaultValue: { summary: undefined },
     },
   },

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

@@ -57,6 +57,7 @@ const MessageDetails = styled.div`
   max-width: 50%;
   > * {
     margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 `;
 
@@ -64,7 +65,7 @@ const Messages = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 1.143rem;
+  padding: 0.5rem;
   background: ${({ state }) => {
     if (state) {
       if (state === "inbound") return `${BmPrimaryWhite}`;
@@ -192,7 +193,7 @@ export const BmImageWrapper = styled.div`
 
 export const BmImage = styled.img`
   ${"" /* Fix width */}
-  width: 21.429rem;
+  width: 100%;
   object-fit: cover;
   flex-grow: 1;
 `;
@@ -215,6 +216,12 @@ export const BmImageChat = ({ state, src, fileName, ...rest }) => {
   );
 };
 
+export const MessageState = styled.div`
+  @media all and (max-width: 960px) {
+    display: none;
+  }
+`;
+
 //End of Component for Images
 
 BmChat.Details = ({
@@ -228,10 +235,12 @@ BmChat.Details = ({
   fileName,
   ...rest
 }) => {
-  console.log("bbbb", fileName);
   return (
     <Details state={state} {...rest}>
-      {state === "inbound" && session && handleState({ state, session })}
+      {/* Adding for mobile */}
+      <MessageState>
+        {state === "inbound" && session && handleState({ state, session })}
+      </MessageState>
       <MessageDetails>
         {/* For Images */}
         {src && (
@@ -262,7 +271,9 @@ BmChat.Details = ({
           )}
         </MessagesSubDetails>
       </MessageDetails>
-      {state === "outbound" && session && handleState({ state, session })}
+      <MessageState>
+        {state === "outbound" && session && handleState({ state, session })}
+      </MessageState>
     </Details>
   );
 };

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

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { BmGrey100 } from "../../colors";
+import { BmSecondaryBlue12 } from "../../colors";
 
 export const BmContactCard = styled.div`
   display: flex;
@@ -9,13 +9,13 @@ export const BmContactCard = styled.div`
     margin-right: 1rem;
   }
   &:hover {
-    background: ${BmGrey100};
+    background: ${BmSecondaryBlue12};
   }
 
   ${({ active }) =>
     active &&
     `    
-    background: ${BmGrey100};
+    background: ${BmSecondaryBlue12};
   `}
   cursor: pointer;
   padding: 1rem 1.5rem;

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

@@ -34,6 +34,16 @@ export const ModalContent = styled.div`
     }
     return "35.714rem";
   }};
+  max-width: ${({ size }) => {
+    if (size) {
+      if (size === "small") return "21.429rem";
+      if (size === "default") return "35.714rem";
+      if (size === "large") return "57.143rem";
+      if (size === "xlarge") return "81.429rem";
+      return size;
+    }
+    return "35.714rem";
+  }};
   > *:not(:last-child) {
     margin-bottom: 1rem;
   }
@@ -50,7 +60,7 @@ export const ModalWrapper = styled.div`
     if (centered) {
       return "50%";
     }
-    return "10%";
+    return "15%";
   }};
   left: 50%;
   transform: translate(-50%, -50%);
@@ -138,12 +148,17 @@ BmModal.Body = styled.div`
   > *:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-  > * {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-  }
+  max-height: ${({ size }) => {
+    if (size) {
+      if (size === "small") return "21.429rem";
+      if (size === "default") return "35.714rem";
+      if (size === "large") return "57.143rem";
+      if (size === "xlarge") return "81.429rem";
+      return size;
+    }
+    return "35.714rem";
+  }};
+  overflow: auto;
 `;
 
 BmModal.Footer = styled.div`

package/src/lib/components/colors.js

@@ -32,6 +32,9 @@ export const BmSecondaryGreen15 = "rgba(4, 132, 75, 0.15)";
 
 export const BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)";
 
+// #33B1BA 12%
+export const BmSecondaryBlue12="rgba(51, 177, 186, 0.12)"; 
+
 // Background Colors
 export const BmBgLightBlue = "#E1EAFC";