npm - beem-component - Versions diffs - 1.1.7 → 1.2.1 - Mend

beem-component 1.1.7 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/dist/assets/css/sidebar.scss CHANGED Viewed

@@ -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/dist/components/Avatars/avatars.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 */
 );

package/dist/components/ChatComponents/ColorPicker/colorPicker.stories.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ChatBody = void 0;
+exports.default = exports.ColorPicker = void 0;
 var _colorPicker = require("./colorPicker");
@@ -14,7 +14,7 @@ var _default = {
 };
 exports.default = _default;
-var ChatBody = function ChatBody() {
+var ColorPicker = function ColorPicker() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, ["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map(function (color) {
     return /*#__PURE__*/React.createElement(_colorPicker.BmColorPicker, {
       key: color,
@@ -23,4 +23,4 @@ var ChatBody = function ChatBody() {
   }));
 };
-exports.ChatBody = ChatBody;
+exports.ColorPicker = ColorPicker;

package/dist/components/{ContactCards → ChatComponents/ContactCards}/contactCards.js RENAMED Viewed

@@ -7,7 +7,7 @@ exports.default = exports.BmContactCard = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _colors = require("../colors");
+var _colors = require("../../colors");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -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/{ContactCards → ChatComponents/ContactCards}/contactCards.stories.js RENAMED Viewed

@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _contactCards = _interopRequireDefault(require("./contactCards"));
-var _avatars = _interopRequireDefault(require("../Avatars/avatars"));
+var _avatars = _interopRequireDefault(require("../../Avatars/avatars"));
-var _messageCounter = _interopRequireDefault(require("../MessageCounter/messageCounter"));
+var _messageCounter = _interopRequireDefault(require("../../MessageCounter/messageCounter"));
-var _tags = require("../tags");
+var _tags = require("../../tags");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,7 +25,7 @@ var _default = {
     BmTag: _tags.BmTag,
     BmCounter: _messageCounter.default
   },
-  title: "components/ContactCard"
+  title: "components/Chat/Components/ContactCard"
 };
 exports.default = _default;

package/dist/components/ChatComponents/FormAccordion/FormAccordion.stories.js CHANGED Viewed

@@ -15,11 +15,15 @@ var _default = {
 exports.default = _default;
 var FormAccordion = function FormAccordion() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.BmAccordion, null, /*#__PURE__*/React.createElement(_.BmAccordion.Title, null, /*#__PURE__*/React.createElement("h3", null, "Information")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatForm, null, /*#__PURE__*/React.createElement(_.BmChatForm.Group, null, /*#__PURE__*/React.createElement(_.BmChatForm.Label, null, /*#__PURE__*/React.createElement("h4", null, "Account No.")), /*#__PURE__*/React.createElement(_.BmChatForm.Input, {
+  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, "Information")), /*#__PURE__*/React.createElement(_.BmAccordion.Body, null, /*#__PURE__*/React.createElement(_.BmChatForm, null, /*#__PURE__*/React.createElement(_.BmChatForm.Group, null, /*#__PURE__*/React.createElement(_.BmChatForm.Label, null, /*#__PURE__*/React.createElement("h4", null, "Account No.")), /*#__PURE__*/React.createElement(_.BmChatForm.Input, {
     placeholder: "Enter here"
   })), /*#__PURE__*/React.createElement(_.BmChatForm.Group, null, /*#__PURE__*/React.createElement(_.BmChatForm.Label, null, /*#__PURE__*/React.createElement("h4", null, "Preferred Language")), /*#__PURE__*/React.createElement(_.BmChatForm.Input, {
     placeholder: "Enter here"
-  }))))));
+  })))))));
 };
 exports.FormAccordion = FormAccordion;

package/dist/components/{InfoTab → ChatComponents/InfoTab}/infoTab.js RENAMED Viewed

@@ -13,7 +13,6 @@ 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) } })); }
-// import { BmGrey400 } from "../colors";
 var BmInfoTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n  ", "\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), ''
 /* border: 0.071rem solid ${BmGrey400}; */
 );

package/dist/components/{InfoTab → ChatComponents/InfoTab}/infoTab.stories.js RENAMED Viewed

@@ -9,20 +9,18 @@ var _react = _interopRequireDefault(require("react"));
 var _infoTab = _interopRequireDefault(require("./infoTab"));
-var _tags = require("../tags");
-var _buttonIconsOnly = require("../Buttons/buttonIconsOnly");
+var _buttonIconsOnly = require("../../Buttons/buttonIconsOnly");
 var _icons = require("@material-ui/icons");
-var _iconStyles = require("../iconStyles");
+var _iconStyles = require("../../iconStyles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _infoTab.default,
-  title: "components/InfoTab"
+  title: "components/Chat/Components/InfoTab"
 };
 exports.default = _default;

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

@@ -15,13 +15,17 @@ var _default = {
 exports.default = _default;
 var LabelAccordion = function LabelAccordion() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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, {
+  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")))))));
+  }, /*#__PURE__*/React.createElement("p", null, "label"))))))));
 };
 exports.LabelAccordion = LabelAccordion;

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

@@ -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 CHANGED Viewed

@@ -153,7 +153,28 @@ 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  height: ", ";\n  overflow: auto;\n  ", "\n  ", "\n"])), function (_ref5) {
+  var size = _ref5.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";
+}, ''
+/* height: 100%; */
+, ''
+/* > * {
+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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -359,9 +359,9 @@ var _chatBody = _interopRequireDefault(require("./ChatComponents/ChatBody/chatBo
 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 CHANGED Viewed

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

package/src/App.js CHANGED Viewed

@@ -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,98 @@ 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)} centered>
+          <BmModal.Header closeButton>
+            <h2>Header</h2>
+          </BmModal.Header>
+          <BmModal.Body>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</p>
+            <p>This is a body</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 CHANGED Viewed

@@ -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,16 @@ const Chat = () => {
           src={image}
           fileName={<p>attachment.jpg</p>}
         />
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // src={image}
+          // fileName={<p>attachment.jpg</p>}
+        >
+          Hello
+        </BmChat.Details>
         <BmChat.Details
           state="outbound"
           session="live"
@@ -61,7 +70,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;
 `;

package/src/lib/components/ChatComponents/ColorPicker/colorPicker.stories.js CHANGED Viewed

@@ -6,7 +6,7 @@ export default {
   title: "components/Chat/Components/ColorPicker",
 };
-export const ChatBody = () => {
+export const ColorPicker = () => {
   return (
     <>
       {["#33b1ba", "#000000", "#F62E48", "#8CC63F"].map((color) => (

package/src/lib/components/{ContactCards → ChatComponents/ContactCards}/contactCards.js RENAMED Viewed

@@ -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/{ContactCards → ChatComponents/ContactCards}/contactCards.stories.js RENAMED Viewed

@@ -1,13 +1,13 @@
 /* eslint-disable import/no-anonymous-default-export */
 import React from "react";
 import BmContactCard from "./contactCards";
-import BmAvatar from "../Avatars/avatars";
-import BmCounter from "../MessageCounter/messageCounter";
-import { BmTag } from "../tags";
+import BmAvatar from "../../Avatars/avatars";
+import BmCounter from "../../MessageCounter/messageCounter";
+import { BmTag } from "../../tags";
 export default {
   component: { BmContactCard, BmAvatar, BmTag, BmCounter },
-  title: "components/ContactCard",
+  title: "components/Chat/Components/ContactCard",
 };
 export const ContactCard = () => {

package/src/lib/components/ChatComponents/FormAccordion/FormAccordion.stories.js CHANGED Viewed

@@ -9,25 +9,29 @@ export default {
 export const FormAccordion = () => {
   return (
     <>
-      <BmAccordion>
-        <BmAccordion.Title><h3>Information</h3></BmAccordion.Title>
-        <BmAccordion.Body>
-          <BmChatForm>
-            <BmChatForm.Group>
-              <BmChatForm.Label>
-                <h4>Account No.</h4>
-              </BmChatForm.Label>
-              <BmChatForm.Input placeholder="Enter here" />
-            </BmChatForm.Group>
-            <BmChatForm.Group>
-              <BmChatForm.Label>
-                <h4>Preferred Language</h4>
-              </BmChatForm.Label>
-              <BmChatForm.Input placeholder="Enter here" />
-            </BmChatForm.Group>
-          </BmChatForm>
-        </BmAccordion.Body>
-      </BmAccordion>
+      <div style={{ width: "30%" }}>
+        <BmAccordion>
+          <BmAccordion.Title>
+            <h3>Information</h3>
+          </BmAccordion.Title>
+          <BmAccordion.Body>
+            <BmChatForm>
+              <BmChatForm.Group>
+                <BmChatForm.Label>
+                  <h4>Account No.</h4>
+                </BmChatForm.Label>
+                <BmChatForm.Input placeholder="Enter here" />
+              </BmChatForm.Group>
+              <BmChatForm.Group>
+                <BmChatForm.Label>
+                  <h4>Preferred Language</h4>
+                </BmChatForm.Label>
+                <BmChatForm.Input placeholder="Enter here" />
+              </BmChatForm.Group>
+            </BmChatForm>
+          </BmAccordion.Body>
+        </BmAccordion>
+      </div>
     </>
   );
 };

package/src/lib/components/{InfoTab → ChatComponents/InfoTab}/infoTab.js RENAMED Viewed

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-// import { BmGrey400 } from "../colors";
 const BmInfoTab = styled.div`
   display: flex;

package/src/lib/components/{InfoTab → ChatComponents/InfoTab}/infoTab.stories.js RENAMED Viewed

@@ -1,14 +1,13 @@
 /* eslint-disable import/no-anonymous-default-export */
 import React from "react";
 import BmInfoTab from "./infoTab";
-import { BmTag } from "../tags";
-import { BmBtnIcon } from "../Buttons/buttonIconsOnly";
+import { BmBtnIcon } from "../../Buttons/buttonIconsOnly";
 import { MoreVert, Phone } from "@material-ui/icons";
-import { BmIcons } from "../iconStyles";
+import { BmIcons } from "../../iconStyles";
 export default {
   component: BmInfoTab,
-  title: "components/InfoTab",
+  title: "components/Chat/Components/InfoTab",
 };
 export const InfoTab = () => {

package/src/lib/components/ChatComponents/LabelAccordion/LabelAccordion.stories.js CHANGED Viewed

@@ -9,28 +9,30 @@ export default {
 export const LabelAccordion = () => {
   return (
     <>
-      <BmAccordion>
-        <BmAccordion.Title>
-          <h3>Labels</h3>
-          <a>Manage Labels</a>
-        </BmAccordion.Title>
-        <BmAccordion.Body>
-          <BmChatLabels>
-            <h4>Added labels</h4>
-            <div>
-              <BmTag variant="success">
-                <p>label</p>
-              </BmTag>
-              <BmTag variant="warning">
-                <p>label</p>
-              </BmTag>
-              <BmTag variant="error">
-                <p>label</p>
-              </BmTag>
-            </div>
-          </BmChatLabels>
-        </BmAccordion.Body>
-      </BmAccordion>
+      <div style={{ width: "30%" }}>
+        <BmAccordion>
+          <BmAccordion.Title>
+            <h3>Labels</h3>
+            <a>Manage Labels</a>
+          </BmAccordion.Title>
+          <BmAccordion.Body>
+            <BmChatLabels>
+              <h4>Added labels</h4>
+              <div>
+                <BmTag variant="success">
+                  <p>label</p>
+                </BmTag>
+                <BmTag variant="warning">
+                  <p>label</p>
+                </BmTag>
+                <BmTag variant="error">
+                  <p>label</p>
+                </BmTag>
+              </div>
+            </BmChatLabels>
+          </BmAccordion.Body>
+        </BmAccordion>
+      </div>
     </>
   );
 };

package/src/lib/components/ChatComponents/NoteAccordion/NoteAccordion.stories.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { BmAccordion, BmChatLabels, BmChatNotes, BmIcons } from "../..";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { Delete, Edit } from "@material-ui/icons";
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  component: BmChatLabels,
+  title: "components/Chat/Components/NoteAccordion",
+};
+export const NoteAccordion = () => {
+  return (
+    <>
+      <div style={{ width: "30%" }}>
+        <BmAccordion>
+          <BmAccordion.Title>
+            <h3>Notes</h3>
+          </BmAccordion.Title>
+          <BmAccordion.Body>
+            <BmChatNotes>
+              <BmChatNotes.Input type="text" placeholder="Add Note" />
+              {/* Display Note */}
+              <BmChatNotes.Details>
+                <div>
+                  <p>Description</p>
+                </div>
+                <div>
+                  <BmIcons icon={<Edit />} size="xsmall" />
+                  <BmIcons icon={<ContentCopyIcon />} size="xsmall" />
+                  <BmIcons icon={<Delete />} size="xsmall" />
+                </div>
+                <div>
+                  <p>
+                    <i>By User</i>
+                  </p>
+                  <p>
+                    <i>12:00pm</i>
+                  </p>
+                </div>
+              </BmChatNotes.Details>
+            </BmChatNotes>
+          </BmAccordion.Body>
+        </BmAccordion>
+      </div>
+    </>
+  );
+};

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

@@ -138,12 +138,24 @@ BmModal.Body = styled.div`
   > *:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-  > * {
+  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;
+  ${'' /* height: 100%; */}
+  ${'' /* > * {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
-  }
+  } */}
 `;
 BmModal.Footer = styled.div`

package/src/lib/components/colors.js CHANGED Viewed

@@ -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";

package/src/lib/components/index.js CHANGED Viewed

@@ -34,8 +34,8 @@ import { MainWrapper } from "../components/MainWrapper";
 //Chat Components
 import BmChat from "./ChatComponents/ChatBody/chatBody";
 import { BmChatHeader } from "./ChatComponents/ChatHeader/chatHeader";
-import BmContactCard from "./ContactCards/contactCards";
-import BmInfoTab from "./InfoTab/infoTab";
+import BmContactCard from "./ChatComponents/ContactCards/contactCards";
+import BmInfoTab from "./ChatComponents/InfoTab/infoTab";
 import BmCounter from "./MessageCounter/messageCounter";
 //Chat Accordion components
 import BmChatForm from "./ChatComponents/FormAccordion/FormAccordion";