oa-componentbook 0.18.20 → 0.18.22

package/build/widgets/oa-widget-chat/ChatWidget.js

@@ -40,7 +40,7 @@ const stylesObj = {
     width: '440px',
     marginTop: '24px',
     marginBottom: '8px',
-    overflow: 'auto'
+    wordBreak: 'anywhere'
   },
   chatContainer: {
     display: 'flex',
@@ -65,11 +65,19 @@ function ChatWidget(_ref) {
     inputMaxLength
   } = _ref;
   const [message, setMessage] = (0, _react.useState)(initialMsg || '');
+  const chatContainerRef = (0, _react.useRef)(null);
   const onClearInput = () => clearInput && setMessage('');
   const onMsgSend = () => {
     onMessageInput(message);
     onClearInput();
   };
+  const scrollToBottom = () => {
+    var _chatContainerRef$cur;
+    (_chatContainerRef$cur = chatContainerRef.current) === null || _chatContainerRef$cur === void 0 || _chatContainerRef$cur.scrollIntoView();
+  };
+  (0, _react.useEffect)(() => {
+    scrollToBottom();
+  }, [queryMessages, message]);
   return /*#__PURE__*/_react.default.createElement(StyledCustomDrawer, {
     open: show,
     onClose: onClose,
@@ -96,7 +104,7 @@ function ChatWidget(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "primary-content",
     className: "type-t1-500"
-  }, bodyTitle), /*#__PURE__*/_react.default.createElement("div", null, isContentLoading ? [...Array((0, _utils.getRandomInt)(2, 5))].map((_, ind) => ind % 2 ?
+  }, bodyTitle), /*#__PURE__*/_react.default.createElement("div", null, isContentLoading && [...Array((0, _utils.getRandomInt)(2, 5))].map((_, ind) => ind % 2 ?
   /*#__PURE__*/
   // Info : This container is to show the loading of the chats
   // (our chats) in the right side of chat body while chats are fetching.
@@ -121,9 +129,10 @@ function ChatWidget(_ref) {
       transform: 'scale(-1, 1)'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    flexDirection: "column",
-    style: _objectSpread({}, stylesObj.chatUi),
-    gap: "2px"
+    style: _objectSpread(_objectSpread({}, stylesObj.chatUi), {}, {
+      flexDirection: 'column',
+      gap: '2px'
+    })
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: _objectSpread({
       display: 'flex',
@@ -137,7 +146,7 @@ function ChatWidget(_ref) {
       alignSelf: 'flex-end',
       width: 'fit-content'
     }
-  }, (0, _dayjs.default)().fromNow()))))) : queryMessages !== null && queryMessages !== void 0 && queryMessages.length ? queryMessages.map(msg => msg.isUser ?
+  }, (0, _dayjs.default)().fromNow()))))) || (queryMessages !== null && queryMessages !== void 0 && queryMessages.length ? queryMessages.map(msg => msg.isUser ?
   /*#__PURE__*/
   // Info : This is the chat box of right side which will show messages from user.
   _react.default.createElement("div", {
@@ -162,7 +171,9 @@ function ChatWidget(_ref) {
     color: "secondary-content"
   }, msg.createdAt))) :
   /*#__PURE__*/
-  // Info : This is the chat box of left side which will show messages from other user.
+  /*
+  Info : This is the chat box of left side which will show messages from other user.
+  */
   _react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -184,7 +195,9 @@ function ChatWidget(_ref) {
   }, msg.createdAt))) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
     type: "info",
     message: "Send a chat to start your chat history for this ticket."
-  }))));
+  })))), /*#__PURE__*/_react.default.createElement("diV", {
+    ref: chatContainerRef
+  }));
 }
 ChatWidget.propTypes = {
   show: _propTypes.default.bool,

package/build/widgets/oa-widget-key-value/KeyValueWidget.js

@@ -45,7 +45,7 @@ function KeyValueDataView(_ref) {
         }
       }, /*#__PURE__*/_react.default.createElement("span", {
         style: {
-          color: "var(--color-primary-content)"
+          color: 'var(--color-primary-content)'
         }
       }, key), /*#__PURE__*/_react.default.createElement("span", {
         style: {

package/build/widgets/oa-widget-key-value/styles.js

@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4; // KeyValueWidgetStyles.js
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child  {\n    padding: 0;\n  }\n  \n  .valuestyle {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle b {\n    width: 38.734%;\n    font-style: normal;\n    color: var(--color-primary-content); \n  }\n\n  .valuestyle span {\n    max-width: 180px;\n    font-style: normal;\n    color: var(--color-secondary-content);\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .valuestyle span span{\n    color: var(--color-primary-content);\n    font-size: 12px;\n    margin: 0 4px 0 0;\n  }\n"])));
+const KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child  {\n    padding: 0;\n  }\n  \n  .valuestyle {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle b {\n    width: 38.734%;\n    font-style: normal;\n    color: var(--color-primary-content); \n  }\n\n  .valuestyle span {\n    max-width: 180px;\n    font-style: normal;\n    color: var(--color-secondary-content);\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .valuestyle span + span{\n    color: var(--color-primary-content);\n    font-size: 14px;\n    padding: 0 4px 0 0;\n  }\n"])));
 const KeyValueGroups = exports.KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n.container-fluid{\n    width: 100%;\n    padding: 0 16px;\n}\n.row {\n    display: flex;\n    flex-direction: column;\n}\n.row::after {\n    content: \"\";\n    clear: both;\n    display: table;\n}\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n@media (min-width: 768px) {\n    .row {\n    flex-direction: row;\n}\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n  .col-sm-9 {\n    width: 75%;\n  }\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n  .col-md-2 {\n    width: 16.66667%;\n  }\n  .col-md-3 {\n    width: 25%;\n  }\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n\n}\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n    .gutter{\n        padding: 0 24px 0 0;\n    }\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n  .col-lg-3 {\n    width: 25%;\n    float: left;\n  }\n  .col-lg-4 {\n    width: 33.33333%;\n    float: left;\n  }\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n  .col-lg-6 {\n    width: 50%;\n  }\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n  .col-lg-9 {\n    width: 75%;\n  }\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 1200px) {\n    .gutter{\n        padding: 0 32px 0 0;\n    }\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n\n \n}\n@media (max-width: 767px) {\n  .gutter{\n      padding: 0;\n  }\n}\n"])));
 const StyledBold = exports.StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: var(--color-primary-content);\n  font-weight: 400;\n"])));
 const StyledSpan = exports.StyledSpan = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  /* vertical-align: bottom; */\n  color: var(--color-secondary-content);\n  font-weight: 400;\n  word-break: break-word;\n"])));

package/build/widgets/oa-widget-view-previous-description/ViewPreviousDescriptionWidget.js

@@ -94,7 +94,8 @@ function ViewPreviousDescriptionWidget(_ref) {
   }, "Show translated text"), /*#__PURE__*/_react.default.createElement(_CustomToggle.default, {
     "data-test": dataTest ? "".concat(dataTest, "--translate-toggle") : undefined,
     checked: isTranslationOn,
-    onClick: onToggleChange
+    onClick: onToggleChange,
+    size: "small"
   })), isTranslationOn && /*#__PURE__*/_react.default.createElement("p", {
     className: "type-b3-400"
   }, "Note: These responses are auto-translated. Please read the answers carefully as there might be minor typo.")), /*#__PURE__*/_react.default.createElement(_styles.UnderlinedContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.20",
+  "version": "0.18.22",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",