oa-componentbook 0.18.6 → 0.18.7

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 (2) hide show
  1. package/build/widgets/oa-widget-chat/ChatWidget.js +143 -124
  2. package/package.json +1 -1
package/build/widgets/oa-widget-chat/ChatWidget.js CHANGED
@@ -13,11 +13,12 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
13
13
  var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
14
14
  var _lodash = require("lodash");
15
15
  var _react = _interopRequireWildcard(require("react"));
16
- var _icons = require("@material-ui/icons");
17
16
  var _TextArea = _interopRequireDefault(require("../../components/oa-component-textarea/TextArea"));
17
+ var _icons = require("@material-ui/icons");
18
18
  var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
19
19
  var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
20
20
  var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
21
+ var _system = require("@material-ui/system");
21
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
23
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -32,7 +33,8 @@ const stylesObj = {
32
33
  padding: '10px 8px',
33
34
  backgroundColor: '#DAF1FC',
34
35
  borderRadius: '4px',
35
- maxWidth: '500px'
36
+ maxWidth: '500px',
37
+ marginTop: '12px'
36
38
  },
37
39
  chatContainer: {
38
40
  display: 'flex',
@@ -52,9 +54,17 @@ function ChatWidget(_ref) {
52
54
  headerTitle,
53
55
  bodyTitle,
54
56
  initialMsg,
55
- onMessageInput
57
+ onMessageInput,
58
+ clearInput
56
59
  } = _ref;
57
60
  const [message, setMessage] = (0, _react.useState)(initialMsg || '');
61
+ const onClearInput = () => {
62
+ clearInput && setMessage('');
63
+ };
64
+ const onMsgSend = () => {
65
+ onMessageInput(message);
66
+ onClearInput();
67
+ };
58
68
  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
59
69
  open: show,
60
70
  onClose: onClose,
@@ -70,18 +80,21 @@ function ChatWidget(_ref) {
70
80
  }, "Reply to Query"), /*#__PURE__*/_react.default.createElement(_TextArea.default, {
71
81
  name: "message",
72
82
  value: message,
73
- placeholder: "Type here...",
83
+ placeholder: 'Type here...',
84
+ style: {
85
+ marginTop: '7px'
86
+ },
74
87
  onChange: e => setMessage(e.target.value)
75
88
  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
76
- onClick: () => onMessageInput(message),
89
+ onClick: onMsgSend,
77
90
  style: {
78
91
  width: '120px',
79
92
  color: 'white',
80
93
  float: 'right',
81
94
  marginTop: '12px'
82
95
  },
83
- size: "small",
84
- label: "Send Reply"
96
+ size: 'small',
97
+ label: 'Send Reply'
85
98
  })),
86
99
  styles: {
87
100
  body: {
@@ -104,12 +117,12 @@ function ChatWidget(_ref) {
104
117
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
105
118
  level: 5,
106
119
  style: {
107
- margin: 0
120
+ fontSize: '24px',
121
+ fontWeight: 'bold'
108
122
  }
109
123
  }, bodyTitle), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
110
124
  style: {
111
- margin: 0,
112
- marginBottom: '10px'
125
+ margin: '12px'
113
126
  }
114
127
  }), /*#__PURE__*/_react.default.createElement("div", {
115
128
  className: "flex flex-column",
@@ -119,118 +132,122 @@ function ChatWidget(_ref) {
119
132
  flex: 9,
120
133
  padding: '0 40px 20px 0'
121
134
  }
122
- }, isContentLoading ? [...Array((0, _lodash.random)(2, 5))].map((_, ind) => ind % 2 ?
123
- /*#__PURE__*/
124
- // Info : This container is to show the loading of the chats (our chats) in the right side of chat body while chats are fetching.
125
- _react.default.createElement(_antd.Skeleton, {
126
- loading: isContentLoading,
127
- avatar: true,
128
- active: true,
129
- title: false
130
- }, /*#__PURE__*/_react.default.createElement("div", {
131
- style: {
132
- display: 'flex',
133
- gap: '10px'
134
- }
135
- }, /*#__PURE__*/_react.default.createElement("div", {
136
- maxWidth: "90%",
137
- flexDirection: "column",
138
- style: _objectSpread({}, stylesObj.chatUi),
139
- gap: "2px"
140
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, null, "This is just a dummy message."), /*#__PURE__*/_react.default.createElement(_Typography.default, {
141
- style: {
142
- fontSize: '10px',
143
- alignSelf: 'flex-end',
144
- width: 'fit-content'
145
- }
146
- }, (0, _dayjs.default)().fromNow())))) :
147
- /*#__PURE__*/
148
- // Info : This container is to show the loading of the chats (other user) in the left side of chat body while chats are fetching.
149
- _react.default.createElement(_antd.Skeleton, {
150
- loading: isContentLoading,
151
- avatar: true,
152
- active: true,
153
- title: false,
154
- style: {
155
- transform: 'scale(-1, 1)'
156
- }
157
- }, /*#__PURE__*/_react.default.createElement("div", {
158
- maxWidth: "90%",
159
- flexDirection: "column",
160
- style: _objectSpread({}, stylesObj.chatUi),
161
- gap: "2px"
162
- }, /*#__PURE__*/_react.default.createElement("div", {
163
- style: _objectSpread({
164
- display: 'flex',
165
- flexDirection: 'column',
166
- gap: '2px',
167
- maxWidth: '90%'
168
- }, stylesObj.chatUi)
169
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, null, "dummy"), /*#__PURE__*/_react.default.createElement(_Typography.default, {
170
- type: "secondary",
171
- style: {
172
- fontSize: '10px',
173
- alignSelf: 'flex-end',
174
- width: 'fit-content'
175
- }
176
- }, (0, _dayjs.default)().fromNow()))))) : queryMessages !== null && queryMessages !== void 0 && queryMessages.length ? queryMessages.map(message => message.isUser ?
177
- /*#__PURE__*/
178
- // Info : This is the chat box of right side which will show messages from user.
179
- _react.default.createElement("div", {
180
- style: {
181
- display: 'flex',
182
- alignItems: 'flex-start',
183
- justifyContent: 'flex-end'
184
- }
185
- }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
186
- style: _objectSpread(_objectSpread({
187
- display: 'flex',
188
- flexDirection: 'column',
189
- gap: '2px',
190
- maxWidth: '90%'
191
- }, stylesObj.chatUi), {}, {
192
- backgroundColor: '#f6f6f6'
193
- })
194
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
195
- style: {
196
- whiteSpace: 'pre-line'
197
- }
198
- }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
199
- color: "lightgray",
200
- style: {
201
- marginTop: '10px',
202
- fontSize: '10px',
203
- alignSelf: 'flex-end',
204
- width: 'fit-content'
205
- }
206
- }, message.createdAt))) :
207
- /*#__PURE__*/
208
- // Info : This is the chat box of left side which will show messages from other user.
209
- _react.default.createElement("div", {
210
- style: {
211
- display: 'flex',
212
- alignItems: 'flex-start',
213
- flexDirection: 'column'
214
- }
215
- }, /*#__PURE__*/_react.default.createElement("div", {
216
- style: _objectSpread({
217
- display: 'flex',
218
- flexDirection: 'column',
219
- gap: '2px',
220
- maxWidth: '90%'
221
- }, stylesObj.chatUi)
222
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
223
- style: {
224
- whiteSpace: 'pre-line'
225
- }
226
- }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
227
- color: "lightgray",
228
- style: {
229
- marginTop: '10px',
230
- fontSize: '10px',
231
- width: 'fit-content'
232
- }
233
- }, message.createdAt))) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
135
+ }, isContentLoading ? [...Array((0, _lodash.random)(2, 5))].map((_, ind) => {
136
+ return ind % 2 ?
137
+ /*#__PURE__*/
138
+ // Info : This container is to show the loading of the chats (our chats) in the right side of chat body while chats are fetching.
139
+ _react.default.createElement(_antd.Skeleton, {
140
+ loading: isContentLoading,
141
+ avatar: true,
142
+ active: true,
143
+ title: false
144
+ }, /*#__PURE__*/_react.default.createElement("div", {
145
+ style: {
146
+ display: 'flex',
147
+ gap: '10px'
148
+ }
149
+ }, /*#__PURE__*/_react.default.createElement("div", {
150
+ maxWidth: "90%",
151
+ flexDirection: "column",
152
+ style: _objectSpread({}, stylesObj.chatUi),
153
+ gap: "2px"
154
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
155
+ style: {
156
+ fontSize: "10px",
157
+ alignSelf: "flex-end",
158
+ width: "fit-content"
159
+ }
160
+ }, (0, _dayjs.default)().fromNow())))) :
161
+ /*#__PURE__*/
162
+ // Info : This container is to show the loading of the chats (other user) in the left side of chat body while chats are fetching.
163
+ _react.default.createElement(_antd.Skeleton, {
164
+ loading: isContentLoading,
165
+ avatar: true,
166
+ active: true,
167
+ title: false,
168
+ style: {
169
+ transform: "scale(-1, 1)"
170
+ }
171
+ }, /*#__PURE__*/_react.default.createElement("div", {
172
+ maxWidth: "90%",
173
+ flexDirection: "column",
174
+ style: _objectSpread({}, stylesObj.chatUi),
175
+ gap: "2px"
176
+ }, /*#__PURE__*/_react.default.createElement("div", {
177
+ style: _objectSpread({
178
+ display: "flex",
179
+ flexDirection: "column",
180
+ gap: '2px',
181
+ maxWidth: '90%'
182
+ }, stylesObj.chatUi)
183
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
184
+ type: "secondary",
185
+ style: {
186
+ fontSize: "10px",
187
+ alignSelf: "flex-end",
188
+ width: "fit-content"
189
+ }
190
+ }, (0, _dayjs.default)().fromNow()))));
191
+ }) : queryMessages !== null && queryMessages !== void 0 && queryMessages.length ? queryMessages.map(message => {
192
+ return message.isUser ?
193
+ /*#__PURE__*/
194
+ // Info : This is the chat box of right side which will show messages from user.
195
+ _react.default.createElement("div", {
196
+ style: {
197
+ display: 'flex',
198
+ alignItems: 'flex-start',
199
+ justifyContent: 'flex-end'
200
+ }
201
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
202
+ style: _objectSpread(_objectSpread({
203
+ display: "flex",
204
+ flexDirection: "column",
205
+ gap: '2px',
206
+ maxWidth: '90%'
207
+ }, stylesObj.chatUi), {}, {
208
+ backgroundColor: '#f6f6f6'
209
+ })
210
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
211
+ style: {
212
+ whiteSpace: "pre-line"
213
+ }
214
+ }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
215
+ color: 'lightgray',
216
+ style: {
217
+ marginTop: '10px',
218
+ fontSize: "10px",
219
+ alignSelf: "flex-end",
220
+ width: "fit-content"
221
+ }
222
+ }, message.createdAt))) :
223
+ /*#__PURE__*/
224
+ // Info : This is the chat box of left side which will show messages from other user.
225
+ _react.default.createElement("div", {
226
+ style: {
227
+ display: 'flex',
228
+ alignItems: 'flex-start',
229
+ flexDirection: 'column'
230
+ }
231
+ }, /*#__PURE__*/_react.default.createElement("div", {
232
+ style: _objectSpread({
233
+ display: 'flex',
234
+ flexDirection: 'column',
235
+ gap: '2px',
236
+ maxWidth: '90%'
237
+ }, stylesObj.chatUi)
238
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
239
+ style: {
240
+ whiteSpace: "pre-line"
241
+ }
242
+ }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
243
+ color: 'lightgray',
244
+ style: {
245
+ marginTop: '10px',
246
+ fontSize: "10px",
247
+ width: "fit-content"
248
+ }
249
+ }, message.createdAt));
250
+ }) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
234
251
  type: "info",
235
252
  message: "Send a chat to start your chat history for this ticket."
236
253
  }))));
@@ -243,7 +260,8 @@ ChatWidget.propTypes = {
243
260
  headerTitle: _propTypes.default.string,
244
261
  bodyTittle: _propTypes.default.string,
245
262
  onMessageInput: _propTypes.default.func,
246
- initialMsg: _propTypes.default.string
263
+ initialMsg: _propTypes.default.string,
264
+ clearInput: _propTypes.default.bool
247
265
  };
248
266
  ChatWidget.defaultProps = {
249
267
  show: false,
@@ -253,8 +271,9 @@ ChatWidget.defaultProps = {
253
271
  isContentLoading: true,
254
272
  headerTitle: 'Header Title',
255
273
  bodyTitle: 'Body Title',
256
- onMessageInput: msg => alert("This is your msg :".concat(msg)),
274
+ onMessageInput: msg => alert('This is your msg :' + msg),
257
275
  initialMsg: '',
276
+ clearInput: true,
258
277
  queryMessages: [{
259
278
  createdAt: 'Today 4:00pm',
260
279
  isUser: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.6",
3
+ "version": "0.18.7",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",