@elliemae/ds-chat 2.0.1 → 2.1.0-rc.10
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.
- package/cjs/ChatDataTestids.js +2 -1
- package/cjs/parts/chat-composer/ChatContainerComposer.js +14 -8
- package/cjs/parts/chat-composer/props.js +2 -0
- package/cjs/parts/chat-container/ChatContainer.js +27 -23
- package/cjs/parts/chat-container/styled.js +1 -1
- package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +65 -35
- package/cjs/parts/chat-sidebar/SideBarChat.js +2 -2
- package/cjs/parts/sidebar-button/SidebarButton.js +2 -2
- package/esm/ChatDataTestids.js +2 -1
- package/esm/parts/chat-composer/ChatContainerComposer.js +14 -8
- package/esm/parts/chat-composer/props.js +2 -0
- package/esm/parts/chat-container/ChatContainer.js +27 -23
- package/esm/parts/chat-container/styled.js +1 -1
- package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +63 -33
- package/esm/parts/chat-sidebar/SideBarChat.js +2 -2
- package/esm/parts/sidebar-button/SidebarButton.js +2 -2
- package/package.json +11 -11
- package/types/ChatDataTestids.d.ts +1 -0
- package/types/parts/chat-card/ChatCard.d.ts +6 -6
- package/types/parts/chat-card/props.d.ts +6 -6
- package/types/parts/chat-composer/ChatContainerComposer.d.ts +3 -0
- package/types/parts/chat-composer/styled.d.ts +3 -155
- package/types/parts/chat-container/ChatContainer.d.ts +6 -6
- package/types/parts/chat-container-messages-list/ChatContainerMessagesList.d.ts +6 -6
- package/types/parts/message-delimiter/MessageDelimiter.d.ts +4 -4
- package/types/parts/message-delimiter/props.d.ts +4 -4
- package/types/parts/system-message/SystemMessage.d.ts +2 -2
- package/types/parts/system-message/props.d.ts +2 -2
- package/types/parts/tile-button/TileButton.d.ts +2 -2
- package/types/parts/tile-button/props.d.ts +2 -2
- package/types/tests/utils.d.ts +1 -27
|
@@ -17,14 +17,14 @@ import { StyledIndicatorContainer, StyledChatContainerContent, MobileStyledChatC
|
|
|
17
17
|
import { useValidateProps } from './config/useValidateProps.js';
|
|
18
18
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
19
19
|
|
|
20
|
-
var _DSIndeterminateProgr
|
|
20
|
+
var _DSIndeterminateProgr;
|
|
21
21
|
|
|
22
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
23
|
|
|
24
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
24
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
25
|
|
|
26
26
|
const ChatContainer = props => {
|
|
27
|
-
var _containerRef$current;
|
|
27
|
+
var _messagesListProps$me2, _containerRef$current;
|
|
28
28
|
|
|
29
29
|
useValidateProps(props, containerProps);
|
|
30
30
|
const {
|
|
@@ -55,18 +55,16 @@ const ChatContainer = props => {
|
|
|
55
55
|
});
|
|
56
56
|
const onResize = React.useCallback(height => {
|
|
57
57
|
if (onComposerResize) onComposerResize(height);
|
|
58
|
-
|
|
59
|
-
if (height > 30) {
|
|
60
|
-
/*
|
|
58
|
+
/*
|
|
61
59
|
setTimeout is used to equal the animation duration from the
|
|
62
60
|
composer text area when increase its size
|
|
63
61
|
*/
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
}
|
|
62
|
+
|
|
63
|
+
setTimeout(() => {
|
|
64
|
+
actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
|
|
65
|
+
align: 'start'
|
|
66
|
+
});
|
|
67
|
+
}, 50);
|
|
70
68
|
}, [onComposerResize, messagesListProps.messages, actionRef]);
|
|
71
69
|
const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
|
|
72
70
|
const handleTabs = React.useCallback(e => {
|
|
@@ -74,17 +72,23 @@ const ChatContainer = props => {
|
|
|
74
72
|
const ref = actionRef || listRef;
|
|
75
73
|
|
|
76
74
|
if (e.shiftKey && e.key === 'Tab') {
|
|
77
|
-
|
|
75
|
+
var _messagesListProps$me;
|
|
76
|
+
|
|
77
|
+
if (((_messagesListProps$me = messagesListProps.messages) === null || _messagesListProps$me === void 0 ? void 0 : _messagesListProps$me.length) > 0) {
|
|
78
|
+
e.preventDefault();
|
|
79
|
+
|
|
80
|
+
if (['top', 'bottom'].includes(bannerPosition)) {
|
|
81
|
+
bannerRef.current.focusOnWrapper();
|
|
82
|
+
} else {
|
|
83
|
+
var _ref$current;
|
|
78
84
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
const last = ref.current.getMessagesInView().pop();
|
|
83
|
-
ref.current.focusToIndexWithoutScroll(last);
|
|
85
|
+
const last = ref.current.getMessagesInView().pop();
|
|
86
|
+
(_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focusToIndexWithoutScroll(last);
|
|
87
|
+
}
|
|
84
88
|
}
|
|
85
89
|
}
|
|
86
90
|
}
|
|
87
|
-
}, [actionRef, onComposerKeyDown, bannerPosition]); // Map actions
|
|
91
|
+
}, [actionRef, onComposerKeyDown, bannerPosition, (_messagesListProps$me2 = messagesListProps.messages) === null || _messagesListProps$me2 === void 0 ? void 0 : _messagesListProps$me2.length]); // Map actions
|
|
88
92
|
|
|
89
93
|
React.useEffect(() => {
|
|
90
94
|
if (actionRef && actionRef.current) {
|
|
@@ -134,15 +138,15 @@ const ChatContainer = props => {
|
|
|
134
138
|
isOpen: true,
|
|
135
139
|
type: bannerProps.type || BANNER_TYPES.INFO,
|
|
136
140
|
actionRef: bannerRef
|
|
137
|
-
})), sendingMessages && sendingMessages.length > 0 ?
|
|
141
|
+
})), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
|
|
138
142
|
isLoading: "bottom",
|
|
139
143
|
linear: true,
|
|
140
144
|
"data-testid": "ds-chat-loading-indicator"
|
|
141
145
|
}, void 0, /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
|
|
142
146
|
processing: true,
|
|
143
|
-
title:
|
|
147
|
+
title: sendingText,
|
|
144
148
|
lineOnly: true
|
|
145
|
-
}))
|
|
149
|
+
})) : null), /*#__PURE__*/jsx(ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
|
|
146
150
|
onKeyDown: handleTabs,
|
|
147
151
|
onResize: onResize,
|
|
148
152
|
maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,
|
|
@@ -10,7 +10,7 @@ const StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
|
|
|
10
10
|
})(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
|
|
11
11
|
const StyledIndicatorContainer = /*#__PURE__*/styled.div.withConfig({
|
|
12
12
|
componentId: "sc-d732wo-1"
|
|
13
|
-
})(["transition:0.4s ease-in-out;position:absolute;visibility:hidden;pointer-events:none;width:100%;padding:0 ", ";left:0;right:0;background:", ";", " ", " & div,a{font-size:13px;}"], props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? "\n top: -41px;\n transform: translate(0, 41px);\n visibility: visible;\n pointer-events: auto
|
|
13
|
+
})(["transition:0.4s ease-in-out;position:absolute;visibility:hidden;pointer-events:none;width:100%;padding:0 ", ";left:0;right:0;background:", ";", " ", " & div,a{font-size:13px;}"], props => !props.linear ? props.theme.space.xxs : 0, props => props.theme.colors.neutral['000'], props => props.isLoading === 'top' ? "\n top: -41px;\n transform: translate(0, 41px);\n visibility: visible;\n pointer-events: auto;\n " : '', props => props.isLoading === 'bottom' ? "\n bottom: -41px;\n transform: translate(0, -41px);\n visibility: visible;\n pointer-events: auto;\n " : '');
|
|
14
14
|
const MobileStyledChatContainerContent = /*#__PURE__*/styled(StyledChatContainerContent).withConfig({
|
|
15
15
|
componentId: "sc-d732wo-2"
|
|
16
16
|
})(["", ",", "{font-size:16px;}", "{font-size:13px;}", "{background-color:#fff;box-shadow:-0 1px 3px rgba(53,60,70,0.8);}", ",", "{font-size:16px;text-align:left;}", "{font-size:13px;}", "{font-size:16px;}", "{font-size:16px;}"], StyledTitleLeftBubble, StyleBodyWrapper, StyledTitleRightBubble, Wrapper, Title, Message, Time, StyledComposerInput, StyledIndicatorContainer);
|
|
@@ -15,18 +15,18 @@ import React from 'react';
|
|
|
15
15
|
import { describe } from 'react-desc';
|
|
16
16
|
import { useVirtual } from 'react-virtual';
|
|
17
17
|
import DSButton from '@elliemae/ds-button';
|
|
18
|
+
import { debounce } from 'lodash';
|
|
18
19
|
import { ChatBubble } from '../bubble/ChatBubble.js';
|
|
19
20
|
import { BUBBLE_TYPES } from '../bubble/props.js';
|
|
20
21
|
import { MessageDelimiter } from '../message-delimiter/MessageDelimiter.js';
|
|
21
22
|
import { SystemMessage } from '../system-message/SystemMessage.js';
|
|
22
23
|
import { ListItem, StyledWrapperListItem, StyledWrapper, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer } from './styled.js';
|
|
23
24
|
import { listProps, defaultProps } from './props.js';
|
|
24
|
-
import { useValidateProps } from './config/useValidateProps.js';
|
|
25
25
|
import { jsx } from 'react/jsx-runtime';
|
|
26
26
|
|
|
27
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
27
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
28
28
|
|
|
29
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
29
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
30
30
|
|
|
31
31
|
const getPadding = _ref => {
|
|
32
32
|
let {
|
|
@@ -43,7 +43,6 @@ const getPadding = _ref => {
|
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
const ChatContainerMessagesList = props => {
|
|
46
|
-
useValidateProps(props, listProps);
|
|
47
46
|
const {
|
|
48
47
|
sendingText,
|
|
49
48
|
bannerPosition,
|
|
@@ -56,6 +55,7 @@ const ChatContainerMessagesList = props => {
|
|
|
56
55
|
isLoading,
|
|
57
56
|
bannerRef
|
|
58
57
|
} = props;
|
|
58
|
+
const pendingOnScroll = React.useRef(false);
|
|
59
59
|
const loadMoreRef = React.useRef(null);
|
|
60
60
|
const virtualListRef = React.useRef(); // estimateSize should not be really required given what was stated on
|
|
61
61
|
// https://github.com/tannerlinsley/react-virtual/issues/23
|
|
@@ -75,9 +75,16 @@ const ChatContainerMessagesList = props => {
|
|
|
75
75
|
})), {}, {
|
|
76
76
|
estimateSize: React.useCallback(() => 80, [])
|
|
77
77
|
}));
|
|
78
|
-
const
|
|
78
|
+
const debouncedScroll = React.useMemo(() => debounce(() => {
|
|
79
79
|
var _virtualListRef$curre;
|
|
80
80
|
|
|
81
|
+
if (document.visibilityState === 'hidden') {
|
|
82
|
+
pendingOnScroll.current = true;
|
|
83
|
+
return [];
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
if (!virtualListRef.current) return [];
|
|
87
|
+
pendingOnScroll.current = false;
|
|
81
88
|
const {
|
|
82
89
|
bottom,
|
|
83
90
|
top
|
|
@@ -86,15 +93,15 @@ const ChatContainerMessagesList = props => {
|
|
|
86
93
|
const indexList = [];
|
|
87
94
|
list.forEach(item => {
|
|
88
95
|
const {
|
|
89
|
-
top: itemTop
|
|
90
|
-
bottom: itemBottom
|
|
96
|
+
top: itemTop
|
|
91
97
|
} = item.getBoundingClientRect();
|
|
92
98
|
const itemPadding = 10;
|
|
93
|
-
if (itemTop + itemPadding < bottom &&
|
|
99
|
+
if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index);
|
|
94
100
|
});
|
|
95
101
|
if (onScrollEnds) onScrollEnds(indexList);
|
|
96
102
|
return indexList;
|
|
97
|
-
}, [onScrollEnds]);
|
|
103
|
+
}, 500), [onScrollEnds]);
|
|
104
|
+
const onScrollStop = React.useCallback(debouncedScroll, [debouncedScroll]);
|
|
98
105
|
const onlyFocus = React.useCallback(index => {
|
|
99
106
|
setTimeout(() => {
|
|
100
107
|
virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
|
|
@@ -106,7 +113,8 @@ const ChatContainerMessagesList = props => {
|
|
|
106
113
|
};
|
|
107
114
|
vScroll(index, b);
|
|
108
115
|
onlyFocus(index);
|
|
109
|
-
|
|
116
|
+
onScrollStop();
|
|
117
|
+
}, [onScrollStop, onlyFocus, vScroll]);
|
|
110
118
|
React.useEffect(() => {
|
|
111
119
|
if (actionRef && actionRef.current) {
|
|
112
120
|
actionRef.current.scrollToIndex = function (a) {
|
|
@@ -114,9 +122,11 @@ const ChatContainerMessagesList = props => {
|
|
|
114
122
|
align: 'center'
|
|
115
123
|
};
|
|
116
124
|
vScroll(a, b);
|
|
125
|
+
onScrollStop();
|
|
117
126
|
};
|
|
118
127
|
|
|
119
128
|
actionRef.current.getMessagesInView = onScrollStop;
|
|
129
|
+
onScrollStop(); // init useMemo due to debounce use.
|
|
120
130
|
|
|
121
131
|
actionRef.current.focusToIndex = function (a) {
|
|
122
132
|
let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
@@ -127,7 +137,7 @@ const ChatContainerMessagesList = props => {
|
|
|
127
137
|
|
|
128
138
|
actionRef.current.focusToIndexWithoutScroll = onlyFocus;
|
|
129
139
|
|
|
130
|
-
actionRef.current.focusToList =
|
|
140
|
+
actionRef.current.focusToList = () => {
|
|
131
141
|
var _virtualListRef$curre2;
|
|
132
142
|
|
|
133
143
|
(_virtualListRef$curre2 = virtualListRef.current) === null || _virtualListRef$curre2 === void 0 ? void 0 : _virtualListRef$curre2.focus();
|
|
@@ -144,7 +154,17 @@ const ChatContainerMessagesList = props => {
|
|
|
144
154
|
switch (key) {
|
|
145
155
|
case 'ArrowUp':
|
|
146
156
|
e.preventDefault();
|
|
147
|
-
|
|
157
|
+
|
|
158
|
+
if (index > 0) {
|
|
159
|
+
var _virtualListRef$curre3;
|
|
160
|
+
|
|
161
|
+
((_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.querySelector("[data-index=\"".concat(index - 1, "\"]"))).focus();
|
|
162
|
+
} else if (hasMoreItems === 'top') {
|
|
163
|
+
var _loadMoreRef$current;
|
|
164
|
+
|
|
165
|
+
(_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
|
|
166
|
+
}
|
|
167
|
+
|
|
148
168
|
break;
|
|
149
169
|
|
|
150
170
|
case 'ArrowDown':
|
|
@@ -167,31 +187,26 @@ const ChatContainerMessagesList = props => {
|
|
|
167
187
|
break;
|
|
168
188
|
|
|
169
189
|
case 'Tab':
|
|
170
|
-
e.preventDefault();
|
|
171
|
-
|
|
172
190
|
if (hasMoreItems === 'bottom' && !e.shiftKey) {
|
|
173
|
-
var _loadMoreRef$current;
|
|
174
|
-
|
|
175
|
-
(_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
|
|
176
|
-
} else if (hasMoreItems === 'top' && e.shiftKey) {
|
|
177
191
|
var _loadMoreRef$current2;
|
|
178
192
|
|
|
193
|
+
e.preventDefault();
|
|
179
194
|
(_loadMoreRef$current2 = loadMoreRef.current) === null || _loadMoreRef$current2 === void 0 ? void 0 : _loadMoreRef$current2.focus();
|
|
180
|
-
} else if (!e.shiftKey) {
|
|
195
|
+
} else if (hasMoreItems === 'top' && e.shiftKey) ; else if (!e.shiftKey) {
|
|
181
196
|
if (bannerPosition) {
|
|
197
|
+
e.preventDefault();
|
|
182
198
|
bannerRef.current.focusOnWrapper();
|
|
183
|
-
} else {
|
|
184
|
-
actionRef.current.focusToComposer();
|
|
185
199
|
}
|
|
186
200
|
} else {
|
|
187
|
-
var _virtualListRef$
|
|
201
|
+
var _virtualListRef$curre4;
|
|
188
202
|
|
|
189
|
-
|
|
203
|
+
e.preventDefault();
|
|
204
|
+
(_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
|
|
190
205
|
}
|
|
191
206
|
|
|
192
207
|
break;
|
|
193
208
|
}
|
|
194
|
-
}, [
|
|
209
|
+
}, [bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
|
|
195
210
|
const handleListKey = React.useCallback(e => {
|
|
196
211
|
const {
|
|
197
212
|
key
|
|
@@ -200,12 +215,22 @@ const ChatContainerMessagesList = props => {
|
|
|
200
215
|
switch (key) {
|
|
201
216
|
case 'ArrowUp':
|
|
202
217
|
e.preventDefault();
|
|
203
|
-
|
|
218
|
+
|
|
219
|
+
if (document.activeElement !== loadMoreRef.current) {
|
|
220
|
+
onlyFocus(onScrollStop().shift());
|
|
221
|
+
}
|
|
222
|
+
|
|
204
223
|
break;
|
|
205
224
|
|
|
206
225
|
case 'ArrowDown':
|
|
207
226
|
e.preventDefault();
|
|
208
|
-
|
|
227
|
+
|
|
228
|
+
if (document.activeElement === loadMoreRef.current) {
|
|
229
|
+
virtualListRef.current.querySelector("[data-index=\"0\"]").focus();
|
|
230
|
+
} else {
|
|
231
|
+
onlyFocus(onScrollStop().pop());
|
|
232
|
+
}
|
|
233
|
+
|
|
209
234
|
break;
|
|
210
235
|
|
|
211
236
|
case 'Home':
|
|
@@ -238,15 +263,18 @@ const ChatContainerMessagesList = props => {
|
|
|
238
263
|
e.preventDefault();
|
|
239
264
|
actionRef.current.focusToComposer();
|
|
240
265
|
} else {
|
|
241
|
-
var _virtualListRef$
|
|
266
|
+
var _virtualListRef$curre5;
|
|
242
267
|
|
|
243
268
|
e.preventDefault();
|
|
244
|
-
(_virtualListRef$
|
|
269
|
+
(_virtualListRef$curre5 = virtualListRef.current) === null || _virtualListRef$curre5 === void 0 ? void 0 : _virtualListRef$curre5.focus();
|
|
245
270
|
}
|
|
246
271
|
|
|
247
272
|
break;
|
|
248
273
|
}
|
|
249
274
|
}, [actionRef, hasMoreItems, messages.length, onScrollStop, onlyFocus, scrollAndFocus]);
|
|
275
|
+
const checkPendingOnScroll = React.useCallback(() => {
|
|
276
|
+
if (pendingOnScroll.current === true) onScrollStop();
|
|
277
|
+
}, [onScrollStop]);
|
|
250
278
|
React.useEffect(() => {
|
|
251
279
|
let handlerCallback = null;
|
|
252
280
|
const localVirtualRef = virtualListRef.current;
|
|
@@ -260,11 +288,13 @@ const ChatContainerMessagesList = props => {
|
|
|
260
288
|
virtualListRef.current.addEventListener('scroll', onScroll);
|
|
261
289
|
}
|
|
262
290
|
|
|
291
|
+
document.addEventListener('visibilitychange', checkPendingOnScroll);
|
|
263
292
|
return () => {
|
|
264
293
|
if (handlerCallback) clearTimeout(handlerCallback);
|
|
265
294
|
if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);
|
|
295
|
+
document.removeEventListener('visibilitychange', checkPendingOnScroll);
|
|
266
296
|
};
|
|
267
|
-
}, [onScrollStop, onScrollEnds]);
|
|
297
|
+
}, [onScrollStop, onScrollEnds, checkPendingOnScroll]);
|
|
268
298
|
const render = React.useMemo(() => virtualItems.map(virtualItem => {
|
|
269
299
|
const {
|
|
270
300
|
index,
|
|
@@ -285,14 +315,14 @@ const ChatContainerMessagesList = props => {
|
|
|
285
315
|
"data-index": index,
|
|
286
316
|
style: style,
|
|
287
317
|
ref: measureRef,
|
|
288
|
-
tabIndex:
|
|
318
|
+
tabIndex: -1,
|
|
289
319
|
onKeyDown: handleKey,
|
|
290
320
|
role: "listitem",
|
|
291
321
|
children: /*#__PURE__*/_jsx(StyledWrapperListItem, {
|
|
292
322
|
type: row.type
|
|
293
323
|
}, void 0, row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ?
|
|
294
324
|
/*#__PURE__*/
|
|
295
|
-
// eslint-disable-next-line
|
|
325
|
+
// eslint-disable-next-line eslint-comments/no-unlimited-disable
|
|
296
326
|
jsx(ChatBubble, _objectSpread(_objectSpread({}, row), {}, {
|
|
297
327
|
helpMessage: isSending ? sendingText : row.helpMessage
|
|
298
328
|
})) : null, row.type === BUBBLE_TYPES.DELIMITER ? /*#__PURE__*/jsx(MessageDelimiter, _objectSpread({}, row)) : null, row.type === BUBBLE_TYPES.SYSTEM ? /*#__PURE__*/jsx(SystemMessage, _objectSpread({}, row)) : null)
|
|
@@ -308,7 +338,7 @@ const ChatContainerMessagesList = props => {
|
|
|
308
338
|
onKeyDown: handleListKey,
|
|
309
339
|
children: /*#__PURE__*/_jsx(StyledChatContainerContentListScroll, {
|
|
310
340
|
height: "".concat(totalSize, "px")
|
|
311
|
-
}, void 0,
|
|
341
|
+
}, void 0, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx(StyledLoadMoreContainer, {
|
|
312
342
|
hasMoreItems: hasMoreItems
|
|
313
343
|
}, void 0, /*#__PURE__*/_jsx(DSButton, {
|
|
314
344
|
labelText: "Load More",
|
|
@@ -316,7 +346,7 @@ const ChatContainerMessagesList = props => {
|
|
|
316
346
|
onClick: getMoreMessages,
|
|
317
347
|
"data-testid": "ds-chat-load-more-btn",
|
|
318
348
|
innerRef: loadMoreRef
|
|
319
|
-
})) : null)
|
|
349
|
+
})) : null, render)
|
|
320
350
|
}));
|
|
321
351
|
};
|
|
322
352
|
|
|
@@ -18,9 +18,9 @@ import { chatSidebarProps, defaultProps } from './props.js';
|
|
|
18
18
|
import { useValidateProps } from './config/useValidateProps.js';
|
|
19
19
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
20
20
|
|
|
21
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
21
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
22
22
|
|
|
23
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
23
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
24
24
|
|
|
25
25
|
const FooterChat = _ref => {
|
|
26
26
|
let {
|
|
@@ -13,9 +13,9 @@ import { jsxs } from 'react/jsx-runtime';
|
|
|
13
13
|
|
|
14
14
|
const _excluded = ["label", "dsId", "onClick", "Icon"];
|
|
15
15
|
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
17
|
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
19
19
|
const SidebarButton = _ref => {
|
|
20
20
|
let {
|
|
21
21
|
label,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chat",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.1.0-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chat",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -305,22 +305,22 @@
|
|
|
305
305
|
"generateSubmodules": true
|
|
306
306
|
},
|
|
307
307
|
"dependencies": {
|
|
308
|
-
"@elliemae/ds-banner": "2.0.
|
|
309
|
-
"@elliemae/ds-button": "2.0.
|
|
310
|
-
"@elliemae/ds-grid": "2.0.
|
|
311
|
-
"@elliemae/ds-icons": "2.0.
|
|
312
|
-
"@elliemae/ds-indeterminate-progress-indicator": "2.0.
|
|
313
|
-
"@elliemae/ds-props-helpers": "2.0.
|
|
314
|
-
"@elliemae/ds-system": "2.0.
|
|
315
|
-
"@elliemae/ds-tooltip": "2.0.
|
|
316
|
-
"@elliemae/ds-truncated-tooltip-text": "2.0.
|
|
308
|
+
"@elliemae/ds-banner": "2.1.0-rc.10",
|
|
309
|
+
"@elliemae/ds-button": "2.1.0-rc.10",
|
|
310
|
+
"@elliemae/ds-grid": "2.1.0-rc.10",
|
|
311
|
+
"@elliemae/ds-icons": "2.1.0-rc.10",
|
|
312
|
+
"@elliemae/ds-indeterminate-progress-indicator": "2.1.0-rc.10",
|
|
313
|
+
"@elliemae/ds-props-helpers": "2.1.0-rc.10",
|
|
314
|
+
"@elliemae/ds-system": "2.1.0-rc.10",
|
|
315
|
+
"@elliemae/ds-tooltip": "2.1.0-rc.10",
|
|
316
|
+
"@elliemae/ds-truncated-tooltip-text": "2.1.0-rc.10",
|
|
317
317
|
"prop-types": "~15.7.2",
|
|
318
318
|
"react-desc": "~4.1.2",
|
|
319
319
|
"react-virtual": "~2.3.2"
|
|
320
320
|
},
|
|
321
321
|
"devDependencies": {
|
|
322
322
|
"@testing-library/dom": "~8.11.1",
|
|
323
|
-
"@testing-library/jest-dom": "~5.15.
|
|
323
|
+
"@testing-library/jest-dom": "~5.15.0",
|
|
324
324
|
"@testing-library/react": "~12.1.2",
|
|
325
325
|
"@testing-library/user-event": "~13.5.0",
|
|
326
326
|
"styled-components": "~5.3.3"
|
|
@@ -6,22 +6,22 @@ declare const ChatCard: {
|
|
|
6
6
|
propTypes: {
|
|
7
7
|
title: any;
|
|
8
8
|
content: {
|
|
9
|
-
defaultValue
|
|
9
|
+
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
10
10
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
11
11
|
};
|
|
12
|
-
isRequired: import("react-desc").
|
|
12
|
+
isRequired: import("react-desc").PropTypesDescValue;
|
|
13
13
|
};
|
|
14
14
|
time: {
|
|
15
|
-
defaultValue
|
|
15
|
+
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
16
16
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
17
17
|
};
|
|
18
|
-
isRequired: import("react-desc").
|
|
18
|
+
isRequired: import("react-desc").PropTypesDescValue;
|
|
19
19
|
};
|
|
20
20
|
rightAddon: {
|
|
21
|
-
defaultValue
|
|
21
|
+
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
22
22
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
23
23
|
};
|
|
24
|
-
isRequired: import("react-desc").
|
|
24
|
+
isRequired: import("react-desc").PropTypesDescValue;
|
|
25
25
|
};
|
|
26
26
|
};
|
|
27
27
|
};
|
|
@@ -3,22 +3,22 @@
|
|
|
3
3
|
export declare const propTypes: {
|
|
4
4
|
title: any;
|
|
5
5
|
content: {
|
|
6
|
-
defaultValue
|
|
6
|
+
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
7
7
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
8
8
|
};
|
|
9
|
-
isRequired: import("react-desc").
|
|
9
|
+
isRequired: import("react-desc").PropTypesDescValue;
|
|
10
10
|
};
|
|
11
11
|
time: {
|
|
12
|
-
defaultValue
|
|
12
|
+
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
13
13
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
14
14
|
};
|
|
15
|
-
isRequired: import("react-desc").
|
|
15
|
+
isRequired: import("react-desc").PropTypesDescValue;
|
|
16
16
|
};
|
|
17
17
|
rightAddon: {
|
|
18
|
-
defaultValue
|
|
18
|
+
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
19
19
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
20
20
|
};
|
|
21
|
-
isRequired: import("react-desc").
|
|
21
|
+
isRequired: import("react-desc").PropTypesDescValue;
|
|
22
22
|
};
|
|
23
23
|
};
|
|
24
24
|
export interface CardPropTypes {
|
|
@@ -10,6 +10,9 @@ declare const ChatComposer: {
|
|
|
10
10
|
inputValue: {
|
|
11
11
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
12
12
|
};
|
|
13
|
+
ariaMaxLengthMessage: {
|
|
14
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
15
|
+
};
|
|
13
16
|
maxLengthMessage: {
|
|
14
17
|
deprecated: import("react-desc").PropTypesDescValidator;
|
|
15
18
|
};
|