oa-componentbook 0.18.21 → 0.18.22

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 (3) hide show
  1. package/build/widgets/oa-widget-chat/ChatWidget.js +12 -2
  2. package/build/widgets/oa-widget-key-value/styles.js +1 -1
  3. package/package.json +1 -1
package/build/widgets/oa-widget-chat/ChatWidget.js CHANGED
@@ -40,7 +40,7 @@ const stylesObj = {
40
40
  width: '440px',
41
41
  marginTop: '24px',
42
42
  marginBottom: '8px',
43
- overflow: 'auto'
43
+ wordBreak: 'anywhere'
44
44
  },
45
45
  chatContainer: {
46
46
  display: 'flex',
@@ -65,11 +65,19 @@ function ChatWidget(_ref) {
65
65
  inputMaxLength
66
66
  } = _ref;
67
67
  const [message, setMessage] = (0, _react.useState)(initialMsg || '');
68
+ const chatContainerRef = (0, _react.useRef)(null);
68
69
  const onClearInput = () => clearInput && setMessage('');
69
70
  const onMsgSend = () => {
70
71
  onMessageInput(message);
71
72
  onClearInput();
72
73
  };
74
+ const scrollToBottom = () => {
75
+ var _chatContainerRef$cur;
76
+ (_chatContainerRef$cur = chatContainerRef.current) === null || _chatContainerRef$cur === void 0 || _chatContainerRef$cur.scrollIntoView();
77
+ };
78
+ (0, _react.useEffect)(() => {
79
+ scrollToBottom();
80
+ }, [queryMessages, message]);
73
81
  return /*#__PURE__*/_react.default.createElement(StyledCustomDrawer, {
74
82
  open: show,
75
83
  onClose: onClose,
@@ -187,7 +195,9 @@ function ChatWidget(_ref) {
187
195
  }, msg.createdAt))) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
188
196
  type: "info",
189
197
  message: "Send a chat to start your chat history for this ticket."
190
- })))));
198
+ })))), /*#__PURE__*/_react.default.createElement("diV", {
199
+ ref: chatContainerRef
200
+ }));
191
201
  }
192
202
  ChatWidget.propTypes = {
193
203
  show: _propTypes.default.bool,
package/build/widgets/oa-widget-key-value/styles.js CHANGED
@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _templateObject, _templateObject2, _templateObject3, _templateObject4; // KeyValueWidgetStyles.js
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
- 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"])));
11
+ 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"])));
12
12
  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"])));
13
13
  const StyledBold = exports.StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--color-primary-content);\n font-weight: 400;\n"])));
14
14
  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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.21",
3
+ "version": "0.18.22",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",