@elliemae/ds-chat 2.0.2 → 2.0.6

package/cjs/ChatDataTestids.js

@@ -21,7 +21,8 @@ const ChatDataTestIds = {
   SYSTEM_MSG_TIME: 'chat-system-message-time',
   BUBBLE: 'ds-chat-bubble',
   BUBBLE_TITLE: 'chat-bubble-title',
-  BUBBLE_BODY: 'chat-bubble-body'
+  BUBBLE_BODY: 'chat-bubble-body',
+  BANNER: 'ds-banner-container'
 };
 
 exports.ChatDataTestIds = ChatDataTestIds;

package/cjs/parts/chat-composer/ChatContainerComposer.js

@@ -48,10 +48,12 @@ const ChatComposer = props => {
     placeholder,
     inputMaxLength,
     maxLengthMessage,
+    ariaMaxLengthMessage,
     buttonDisabled,
     dataTestid,
     actionRef
   } = props;
+  const COMPOSER_MIN_HEIGHT = 32;
   const input = React__default["default"].useRef();
   const inputSize = React__default["default"].useRef();
   const inputSend = React__default["default"].useRef();
@@ -62,10 +64,10 @@ const ChatComposer = props => {
     var _inputSize$current, _inputSize$current2, _inputSize$current3, _inputSize$current4;
 
     const newHeight = ((_inputSize$current = inputSize.current) === null || _inputSize$current === void 0 ? void 0 : _inputSize$current.scrollHeight) > internalMaxHeight ? internalMaxHeight : (_inputSize$current2 = inputSize.current) === null || _inputSize$current2 === void 0 ? void 0 : _inputSize$current2.scrollHeight;
-    onResize(newHeight);
+    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);
     setHeight(newHeight);
     setShowScroll(((_inputSize$current3 = inputSize.current) === null || _inputSize$current3 === void 0 ? void 0 : _inputSize$current3.scrollHeight) - ((_inputSize$current4 = inputSize.current) === null || _inputSize$current4 === void 0 ? void 0 : _inputSize$current4.clientHeight) > 5);
-  }, [inputValue, internalMaxHeight, onResize]);
+  }, [inputValue, internalMaxHeight, height, onResize]);
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusToComposer = () => {
@@ -92,6 +94,9 @@ const ChatComposer = props => {
     "data-testid": dataTestid
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: ['1fr', '24px'],
+    style: {
+      height: heightProps.height
+    },
     justifyContent: "center",
     alignItems: "flex-end",
     gutter: "xxs"
@@ -105,7 +110,9 @@ const ChatComposer = props => {
     onKeyDown: onKeyDown,
     placeholder: placeholder,
     "aria-label": "Message to send",
-    "data-testid": "chat-composer-textarea"
+    "data-testid": "chat-composer-textarea",
+    name: "chat-composer-textarea",
+    id: "chat-composer-textarea"
   }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: "32px",
     alignItems: "center"
@@ -132,8 +139,7 @@ const ChatComposer = props => {
       width: (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.clientWidth
     },
     onChange: handleChange,
-    value: inputValue // maxLength={inputMaxLength}
-
+    value: inputValue
   }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: ['1fr', '24px'],
     justifyContent: "flex-end",
@@ -146,7 +152,7 @@ const ChatComposer = props => {
   }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/_jsx__default["default"](styled.StyledCounterErrorA11y, {
       role: "alert"
-    }, void 0, maxLengthMessage || "You have exceeded the character limit by ".concat(inputLength - inputMaxLength)), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
+    }, void 0, ariaMaxLengthMessage || "You have entered ".concat(inputLength, " characters and have exceeded the limit by ").concat(inputLength - inputMaxLength, ". Please limit to less than ").concat(inputMaxLength, " characters. ")), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
   }) : '', inputMaxLength ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}))));
 };
 

package/cjs/parts/chat-composer/props.js

@@ -8,6 +8,7 @@ var lodash = require('lodash');
 const defaultComposerPros = {
   placeholder: 'Type your message',
   inputValue: '',
+  ariaMaxLengthMessage: '',
   onChange: lodash.noop,
   onResize: lodash.noop,
   onSend: lodash.noop,
@@ -24,6 +25,7 @@ const defaultComposerPros = {
 const composerProps = {
   placeholder: reactDesc.PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),
   inputValue: reactDesc.PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),
+  ariaMaxLengthMessage: reactDesc.PropTypes.string.description('Aria message for Max length message when exceeded').defaultValue(defaultComposerPros.maxLengthMessage),
   maxLengthMessage: reactDesc.PropTypes.string.description('Max length message').defaultValue(defaultComposerPros.maxLengthMessage),
   onChange: reactDesc.PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),
   onResize: reactDesc.PropTypes.func.description('Called the input changes his height').defaultValue(defaultComposerPros.onResize),

package/cjs/parts/chat-container/ChatContainer.js

@@ -29,14 +29,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var DSIndeterminateProgressIndicator__default = /*#__PURE__*/_interopDefaultLegacy(DSIndeterminateProgressIndicator);
 var DSBanner__default = /*#__PURE__*/_interopDefaultLegacy(DSBanner);
 
-var _DSIndeterminateProgr, _StyledIndicatorConta;
+var _DSIndeterminateProgr;
 
 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; }
 
 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__default["default"](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; }
 
 const ChatContainer = props$1 => {
-  var _containerRef$current;
+  var _messagesListProps$me2, _containerRef$current;
 
   useValidateProps.useValidateProps(props$1, props.containerProps);
   const {
@@ -67,18 +67,16 @@ const ChatContainer = props$1 => {
   });
   const onResize = React__default["default"].useCallback(height => {
     if (onComposerResize) onComposerResize(height);
-
-    if (height > 30) {
-      /*
+    /*
        setTimeout is used to equal the animation duration from the 
        composer text area when increase its size
       */
-      setTimeout(() => {
-        actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
-          align: 'start'
-        });
-      }, 50);
-    }
+
+    setTimeout(() => {
+      actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
+        align: 'start'
+      });
+    }, 50);
   }, [onComposerResize, messagesListProps.messages, actionRef]);
   const Container = device === 'desktop' ? styled.StyledChatContainerContent : styled.MobileStyledChatContainerContent;
   const handleTabs = React__default["default"].useCallback(e => {
@@ -86,17 +84,23 @@ const ChatContainer = props$1 => {
       const ref = actionRef || listRef;
 
       if (e.shiftKey && e.key === 'Tab') {
-        e.preventDefault();
+        var _messagesListProps$me;
+
+        if (((_messagesListProps$me = messagesListProps.messages) === null || _messagesListProps$me === void 0 ? void 0 : _messagesListProps$me.length) > 0) {
+          e.preventDefault();
+
+          if (['top', 'bottom'].includes(bannerPosition)) {
+            bannerRef.current.focusOnWrapper();
+          } else {
+            var _ref$current;
 
-        if (['top', 'bottom'].includes(bannerPosition)) {
-          bannerRef.current.focusOnWrapper();
-        } else {
-          const last = ref.current.getMessagesInView().pop();
-          ref.current.focusToIndexWithoutScroll(last);
+            const last = ref.current.getMessagesInView().pop();
+            (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focusToIndexWithoutScroll(last);
+          }
         }
       }
     }
-  }, [actionRef, onComposerKeyDown, bannerPosition]); // Map actions
+  }, [actionRef, onComposerKeyDown, bannerPosition, (_messagesListProps$me2 = messagesListProps.messages) === null || _messagesListProps$me2 === void 0 ? void 0 : _messagesListProps$me2.length]); // Map actions
 
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {
@@ -146,15 +150,15 @@ const ChatContainer = props$1 => {
       isOpen: true,
       type: bannerProps.type || DSBanner.BANNER_TYPES.INFO,
       actionRef: bannerRef
-    })), sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
+    })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx__default["default"](styled.StyledIndicatorContainer, {
       isLoading: "bottom",
       linear: true,
       "data-testid": "ds-chat-loading-indicator"
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSIndeterminateProgressIndicator__default["default"], {
       processing: true,
-      title: "Loading",
+      title: sendingText,
       lineOnly: true
-    }))) : null), /*#__PURE__*/jsxRuntime.jsx(ChatContainerComposer.ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
+    })) : null), /*#__PURE__*/jsxRuntime.jsx(ChatContainerComposer.ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
       onKeyDown: handleTabs,
       onResize: onResize,
       maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,

package/cjs/parts/chat-container/styled.js

@@ -18,7 +18,7 @@ const StyledChatContainerContent = /*#__PURE__*/styled__default["default"](dsGri
 })(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
 const StyledIndicatorContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-d732wo-1"
-})(["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  " : '');
+})(["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  " : '');
 const MobileStyledChatContainerContent = /*#__PURE__*/styled__default["default"](StyledChatContainerContent).withConfig({
   componentId: "sc-d732wo-2"
 })(["", ",", "{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;}"], styled$1.StyledTitleLeftBubble, styled$1.StyleBodyWrapper, styled$1.StyledTitleRightBubble, style.Wrapper, style.Title, style.Message, style.Time, styled$2.StyledComposerInput, StyledIndicatorContainer);

package/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js

@@ -19,6 +19,7 @@ var React = require('react');
 var reactDesc = require('react-desc');
 var reactVirtual = require('react-virtual');
 var DSButton = require('@elliemae/ds-button');
+var lodash = require('lodash');
 var ChatBubble = require('../bubble/ChatBubble.js');
 var props$1 = require('../bubble/props.js');
 var MessageDelimiter = require('../message-delimiter/MessageDelimiter.js');
@@ -26,6 +27,7 @@ var SystemMessage = require('../system-message/SystemMessage.js');
 var styled = require('./styled.js');
 var props = require('./props.js');
 var useValidateProps = require('./config/useValidateProps.js');
+var useGetNewMessages = require('./useGetNewMessages.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -67,6 +69,7 @@ const ChatContainerMessagesList = props$2 => {
     isLoading,
     bannerRef
   } = props$2;
+  const pendingOnScroll = React__default["default"].useRef(false);
   const loadMoreRef = React__default["default"].useRef(null);
   const virtualListRef = React__default["default"].useRef(); // estimateSize should not be really required given what was stated on
   // https://github.com/tannerlinsley/react-virtual/issues/23
@@ -86,9 +89,17 @@ const ChatContainerMessagesList = props$2 => {
   })), {}, {
     estimateSize: React__default["default"].useCallback(() => 80, [])
   }));
-  const onScrollStop = React__default["default"].useCallback(() => {
+  const newMessages = useGetNewMessages.useGetNewMessages(messages);
+  const debouncedScroll = React__default["default"].useMemo(() => lodash.debounce(() => {
     var _virtualListRef$curre;
 
+    if (document.visibilityState === 'hidden') {
+      pendingOnScroll.current = true;
+      return [];
+    }
+
+    if (!virtualListRef.current) return [];
+    pendingOnScroll.current = false;
     const {
       bottom,
       top
@@ -97,15 +108,15 @@ const ChatContainerMessagesList = props$2 => {
     const indexList = [];
     list.forEach(item => {
       const {
-        top: itemTop,
-        bottom: itemBottom
+        top: itemTop
       } = item.getBoundingClientRect();
       const itemPadding = 10;
-      if (itemTop + itemPadding < bottom && itemBottom - itemPadding > top) indexList.push(item.dataset.index);
+      if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index);
     });
     if (onScrollEnds) onScrollEnds(indexList);
     return indexList;
-  }, [onScrollEnds]);
+  }, 500), [onScrollEnds]);
+  const onScrollStop = React__default["default"].useCallback(debouncedScroll, [debouncedScroll]);
   const onlyFocus = React__default["default"].useCallback(index => {
     setTimeout(() => {
       virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
@@ -117,7 +128,8 @@ const ChatContainerMessagesList = props$2 => {
     };
     vScroll(index, b);
     onlyFocus(index);
-  }, [onlyFocus, vScroll]);
+    onScrollStop();
+  }, [onScrollStop, onlyFocus, vScroll]);
   React__default["default"].useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.scrollToIndex = function (a) {
@@ -125,9 +137,11 @@ const ChatContainerMessagesList = props$2 => {
           align: 'center'
         };
         vScroll(a, b);
+        onScrollStop();
       };
 
       actionRef.current.getMessagesInView = onScrollStop;
+      onScrollStop(); // init useMemo due to debounce use.
 
       actionRef.current.focusToIndex = function (a) {
         let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -138,7 +152,7 @@ const ChatContainerMessagesList = props$2 => {
 
       actionRef.current.focusToIndexWithoutScroll = onlyFocus;
 
-      actionRef.current.focusToList = a => {
+      actionRef.current.focusToList = () => {
         var _virtualListRef$curre2;
 
         (_virtualListRef$curre2 = virtualListRef.current) === null || _virtualListRef$curre2 === void 0 ? void 0 : _virtualListRef$curre2.focus();
@@ -155,7 +169,17 @@ const ChatContainerMessagesList = props$2 => {
     switch (key) {
       case 'ArrowUp':
         e.preventDefault();
-        if (index > 0) virtualListRef.current.querySelector("[data-index=\"".concat(index - 1, "\"]")).focus();
+
+        if (index > 0) {
+          var _virtualListRef$curre3;
+
+          ((_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.querySelector("[data-index=\"".concat(index - 1, "\"]"))).focus();
+        } else if (hasMoreItems === 'top') {
+          var _loadMoreRef$current;
+
+          (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
+        }
+
         break;
 
       case 'ArrowDown':
@@ -178,31 +202,31 @@ const ChatContainerMessagesList = props$2 => {
         break;
 
       case 'Tab':
-        e.preventDefault();
-
         if (hasMoreItems === 'bottom' && !e.shiftKey) {
-          var _loadMoreRef$current;
-
-          (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
-        } else if (hasMoreItems === 'top' && e.shiftKey) {
           var _loadMoreRef$current2;
 
+          e.preventDefault();
           (_loadMoreRef$current2 = loadMoreRef.current) === null || _loadMoreRef$current2 === void 0 ? void 0 : _loadMoreRef$current2.focus();
+        } else if (hasMoreItems === 'top' && e.shiftKey) {
+          var _loadMoreRef$current3;
+
+          e.preventDefault();
+          (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
         } else if (!e.shiftKey) {
           if (bannerPosition) {
+            e.preventDefault();
             bannerRef.current.focusOnWrapper();
-          } else {
-            actionRef.current.focusToComposer();
           }
         } else {
-          var _virtualListRef$curre3;
+          var _virtualListRef$curre4;
 
-          (_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.focus();
+          e.preventDefault();
+          (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
         }
 
         break;
     }
-  }, [actionRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
+  }, [bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
   const handleListKey = React__default["default"].useCallback(e => {
     const {
       key
@@ -211,12 +235,22 @@ const ChatContainerMessagesList = props$2 => {
     switch (key) {
       case 'ArrowUp':
         e.preventDefault();
-        onlyFocus(onScrollStop().shift());
+
+        if (document.activeElement !== loadMoreRef.current) {
+          onlyFocus(onScrollStop().shift());
+        }
+
         break;
 
       case 'ArrowDown':
         e.preventDefault();
-        onlyFocus(onScrollStop().pop());
+
+        if (document.activeElement === loadMoreRef.current) {
+          virtualListRef.current.querySelector("[data-index=\"0\"]").focus();
+        } else {
+          onlyFocus(onScrollStop().pop());
+        }
+
         break;
 
       case 'Home':
@@ -232,11 +266,6 @@ const ChatContainerMessagesList = props$2 => {
       case 'Tab':
         if (document.activeElement !== loadMoreRef.current) {
           if (hasMoreItems === 'bottom' && !e.shiftKey) {
-            var _loadMoreRef$current3;
-
-            e.preventDefault();
-            (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
-          } else if (hasMoreItems === 'top' && e.shiftKey) {
             var _loadMoreRef$current4;
 
             e.preventDefault();
@@ -249,15 +278,18 @@ const ChatContainerMessagesList = props$2 => {
           e.preventDefault();
           actionRef.current.focusToComposer();
         } else {
-          var _virtualListRef$curre4;
+          var _virtualListRef$curre5;
 
           e.preventDefault();
-          (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
+          (_virtualListRef$curre5 = virtualListRef.current) === null || _virtualListRef$curre5 === void 0 ? void 0 : _virtualListRef$curre5.focus();
         }
 
         break;
     }
   }, [actionRef, hasMoreItems, messages.length, onScrollStop, onlyFocus, scrollAndFocus]);
+  const checkPendingOnScroll = React__default["default"].useCallback(() => {
+    if (pendingOnScroll.current === true) onScrollStop();
+  }, [onScrollStop]);
   React__default["default"].useEffect(() => {
     let handlerCallback = null;
     const localVirtualRef = virtualListRef.current;
@@ -271,11 +303,13 @@ const ChatContainerMessagesList = props$2 => {
       virtualListRef.current.addEventListener('scroll', onScroll);
     }
 
+    document.addEventListener('visibilitychange', checkPendingOnScroll);
     return () => {
       if (handlerCallback) clearTimeout(handlerCallback);
       if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);
+      document.removeEventListener('visibilitychange', checkPendingOnScroll);
     };
-  }, [onScrollStop, onScrollEnds]);
+  }, [onScrollStop, onScrollEnds, checkPendingOnScroll]);
   const render = React__default["default"].useMemo(() => virtualItems.map(virtualItem => {
     const {
       index,
@@ -296,7 +330,7 @@ const ChatContainerMessagesList = props$2 => {
       "data-index": index,
       style: style,
       ref: measureRef,
-      tabIndex: 0,
+      tabIndex: -1,
       onKeyDown: handleKey,
       role: "listitem",
       children: /*#__PURE__*/_jsx__default["default"](styled.StyledWrapperListItem, {
@@ -312,14 +346,12 @@ const ChatContainerMessagesList = props$2 => {
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
-    "aria-live": "polite",
-    "aria-relevant": "additions",
     ref: virtualListRef,
     role: "list",
     onKeyDown: handleListKey,
     children: /*#__PURE__*/_jsx__default["default"](styled.StyledChatContainerContentListScroll, {
       height: "".concat(totalSize, "px")
-    }, void 0, render, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx__default["default"](styled.StyledLoadMoreContainer, {
+    }, void 0, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx__default["default"](styled.StyledLoadMoreContainer, {
       hasMoreItems: hasMoreItems
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       labelText: "Load More",
@@ -327,8 +359,11 @@ const ChatContainerMessagesList = props$2 => {
       onClick: getMoreMessages,
       "data-testid": "ds-chat-load-more-btn",
       innerRef: loadMoreRef
-    })) : null)
-  }));
+    })) : null, render)
+  }), /*#__PURE__*/_jsx__default["default"](styled.StyledNewMessagesHiddenContainer, {
+    "aria-live": "polite",
+    "aria-hidden": "false"
+  }, void 0, newMessages.map(newMessage => /*#__PURE__*/_jsx__default["default"]("p", {}, void 0, newMessage.title, " ", newMessage.time, " ", newMessage.body, " ", newMessage.errorMessage, " ", newMessage.helpMessage))));
 };
 
 ChatContainerMessagesList.defaultProps = props.defaultProps;

package/cjs/parts/chat-container-messages-list/styled.js

@@ -20,19 +20,23 @@ const StyledWrapperListItem = /*#__PURE__*/styled__default["default"].div.withCo
 const StyledChatContainerContentList = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1jhprzr-2"
 })(["width:100%;height:100%;padding:", ";padding-bottom:0;overflow-y:auto;overflow-x:hidden;"], props => props.theme.space.xs);
-const StyledChatContainerContentListScroll = /*#__PURE__*/styled__default["default"].div.withConfig({
+const StyledNewMessagesHiddenContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1jhprzr-3"
+})(["position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(100%);white-space:nowrap;"]);
+const StyledChatContainerContentListScroll = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1jhprzr-4"
 })(["width:100%;height:", ";position:relative;"], props => props.height);
 const StyledLoadMoreContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1jhprzr-4"
+  componentId: "sc-1jhprzr-5"
 })(["position:absolute;width:calc(100% + ", ");padding:", ";left:-", ";right:-", ";display:grid;justify-content:center;align-items:center;", " ", ""], props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.hasMoreItems === 'top' ? 'top: 0;' : '', props => props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '');
 const ListItem = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1jhprzr-5"
+  componentId: "sc-1jhprzr-6"
 })(["&:focus,&:focus-visible{outline:none;&:after{content:'';display:block;position:absolute;top:0;left:-", ";pointer-events:none;border-radius:2px;background-color:#ebedf0;width:calc(100% + 24px);border:2px solid #1e79c2;height:100%;z-index:-1;}}"], props => props.theme.space.xxs);
 
 exports.ListItem = ListItem;
 exports.StyledChatContainerContentList = StyledChatContainerContentList;
 exports.StyledChatContainerContentListScroll = StyledChatContainerContentListScroll;
 exports.StyledLoadMoreContainer = StyledLoadMoreContainer;
+exports.StyledNewMessagesHiddenContainer = StyledNewMessagesHiddenContainer;
 exports.StyledWrapper = StyledWrapper;
 exports.StyledWrapperListItem = StyledWrapperListItem;

package/cjs/parts/chat-container-messages-list/useGetNewMessages.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+
+const useGetNewMessages = messages => {
+  const [seenMessages, setSeenMessages] = React.useState({});
+  const newMessages = React.useMemo(() => {
+    const list = [];
+    messages.forEach(message => {
+      if (!(message.dsId in seenMessages)) {
+        list.push(message);
+      }
+    });
+    setSeenMessages(Object.fromEntries(messages.map(m => [m.dsId, true])));
+    return list; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messages]);
+  return newMessages;
+};
+
+exports.useGetNewMessages = useGetNewMessages;

package/esm/ChatDataTestids.js

@@ -17,7 +17,8 @@ const ChatDataTestIds = {
   SYSTEM_MSG_TIME: 'chat-system-message-time',
   BUBBLE: 'ds-chat-bubble',
   BUBBLE_TITLE: 'chat-bubble-title',
-  BUBBLE_BODY: 'chat-bubble-body'
+  BUBBLE_BODY: 'chat-bubble-body',
+  BANNER: 'ds-banner-container'
 };
 
 export { ChatDataTestIds };

package/esm/parts/chat-composer/ChatContainerComposer.js

@@ -38,10 +38,12 @@ const ChatComposer = props => {
     placeholder,
     inputMaxLength,
     maxLengthMessage,
+    ariaMaxLengthMessage,
     buttonDisabled,
     dataTestid,
     actionRef
   } = props;
+  const COMPOSER_MIN_HEIGHT = 32;
   const input = React.useRef();
   const inputSize = React.useRef();
   const inputSend = React.useRef();
@@ -52,10 +54,10 @@ const ChatComposer = props => {
     var _inputSize$current, _inputSize$current2, _inputSize$current3, _inputSize$current4;
 
     const newHeight = ((_inputSize$current = inputSize.current) === null || _inputSize$current === void 0 ? void 0 : _inputSize$current.scrollHeight) > internalMaxHeight ? internalMaxHeight : (_inputSize$current2 = inputSize.current) === null || _inputSize$current2 === void 0 ? void 0 : _inputSize$current2.scrollHeight;
-    onResize(newHeight);
+    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);
     setHeight(newHeight);
     setShowScroll(((_inputSize$current3 = inputSize.current) === null || _inputSize$current3 === void 0 ? void 0 : _inputSize$current3.scrollHeight) - ((_inputSize$current4 = inputSize.current) === null || _inputSize$current4 === void 0 ? void 0 : _inputSize$current4.clientHeight) > 5);
-  }, [inputValue, internalMaxHeight, onResize]);
+  }, [inputValue, internalMaxHeight, height, onResize]);
   React.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.focusToComposer = () => {
@@ -82,6 +84,9 @@ const ChatComposer = props => {
     "data-testid": dataTestid
   }, void 0, /*#__PURE__*/_jsx(Grid, {
     cols: ['1fr', '24px'],
+    style: {
+      height: heightProps.height
+    },
     justifyContent: "center",
     alignItems: "flex-end",
     gutter: "xxs"
@@ -95,7 +100,9 @@ const ChatComposer = props => {
     onKeyDown: onKeyDown,
     placeholder: placeholder,
     "aria-label": "Message to send",
-    "data-testid": "chat-composer-textarea"
+    "data-testid": "chat-composer-textarea",
+    name: "chat-composer-textarea",
+    id: "chat-composer-textarea"
   }), /*#__PURE__*/_jsx(Grid, {
     height: "32px",
     alignItems: "center"
@@ -122,8 +129,7 @@ const ChatComposer = props => {
       width: (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.clientWidth
     },
     onChange: handleChange,
-    value: inputValue // maxLength={inputMaxLength}
-
+    value: inputValue
   }), /*#__PURE__*/_jsx(Grid, {
     cols: ['1fr', '24px'],
     justifyContent: "flex-end",
@@ -136,7 +142,7 @@ const ChatComposer = props => {
   }, void 0, inputMaxLength && hasError ? /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(StyledCounterErrorA11y, {
       role: "alert"
-    }, void 0, maxLengthMessage || "You have exceeded the character limit by ".concat(inputLength - inputMaxLength)), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
+    }, void 0, ariaMaxLengthMessage || "You have entered ".concat(inputLength, " characters and have exceeded the limit by ").concat(inputLength - inputMaxLength, ". Please limit to less than ").concat(inputMaxLength, " characters. ")), maxLengthMessage || "Please limit to less than ".concat(inputMaxLength, " characters. ")]
   }) : '', inputMaxLength ? " ".concat(inputLength, " / ").concat(inputMaxLength) : ''), _Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}))));
 };
 

package/esm/parts/chat-composer/props.js

@@ -4,6 +4,7 @@ import { noop } from 'lodash';
 const defaultComposerPros = {
   placeholder: 'Type your message',
   inputValue: '',
+  ariaMaxLengthMessage: '',
   onChange: noop,
   onResize: noop,
   onSend: noop,
@@ -20,6 +21,7 @@ const defaultComposerPros = {
 const composerProps = {
   placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultComposerPros.placeholder),
   inputValue: PropTypes.string.description('Input value').defaultValue(defaultComposerPros.inputValue),
+  ariaMaxLengthMessage: PropTypes.string.description('Aria message for Max length message when exceeded').defaultValue(defaultComposerPros.maxLengthMessage),
   maxLengthMessage: PropTypes.string.description('Max length message').defaultValue(defaultComposerPros.maxLengthMessage),
   onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultComposerPros.onChange),
   onResize: PropTypes.func.description('Called the input changes his height').defaultValue(defaultComposerPros.onResize),

package/esm/parts/chat-container/ChatContainer.js

@@ -17,14 +17,14 @@ import { StyledIndicatorContainer, StyledChatContainerContent, MobileStyledChatC
 import { useValidateProps } from './config/useValidateProps.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _DSIndeterminateProgr, _StyledIndicatorConta;
+var _DSIndeterminateProgr;
 
 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; }
 
 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; }
 
 const ChatContainer = props => {
-  var _containerRef$current;
+  var _messagesListProps$me2, _containerRef$current;
 
   useValidateProps(props, containerProps);
   const {
@@ -55,18 +55,16 @@ const ChatContainer = props => {
   });
   const onResize = React.useCallback(height => {
     if (onComposerResize) onComposerResize(height);
-
-    if (height > 30) {
-      /*
+    /*
        setTimeout is used to equal the animation duration from the 
        composer text area when increase its size
       */
-      setTimeout(() => {
-        actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
-          align: 'start'
-        });
-      }, 50);
-    }
+
+    setTimeout(() => {
+      actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
+        align: 'start'
+      });
+    }, 50);
   }, [onComposerResize, messagesListProps.messages, actionRef]);
   const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;
   const handleTabs = React.useCallback(e => {
@@ -74,17 +72,23 @@ const ChatContainer = props => {
       const ref = actionRef || listRef;
 
       if (e.shiftKey && e.key === 'Tab') {
-        e.preventDefault();
+        var _messagesListProps$me;
+
+        if (((_messagesListProps$me = messagesListProps.messages) === null || _messagesListProps$me === void 0 ? void 0 : _messagesListProps$me.length) > 0) {
+          e.preventDefault();
+
+          if (['top', 'bottom'].includes(bannerPosition)) {
+            bannerRef.current.focusOnWrapper();
+          } else {
+            var _ref$current;
 
-        if (['top', 'bottom'].includes(bannerPosition)) {
-          bannerRef.current.focusOnWrapper();
-        } else {
-          const last = ref.current.getMessagesInView().pop();
-          ref.current.focusToIndexWithoutScroll(last);
+            const last = ref.current.getMessagesInView().pop();
+            (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focusToIndexWithoutScroll(last);
+          }
         }
       }
     }
-  }, [actionRef, onComposerKeyDown, bannerPosition]); // Map actions
+  }, [actionRef, onComposerKeyDown, bannerPosition, (_messagesListProps$me2 = messagesListProps.messages) === null || _messagesListProps$me2 === void 0 ? void 0 : _messagesListProps$me2.length]); // Map actions
 
   React.useEffect(() => {
     if (actionRef && actionRef.current) {
@@ -134,15 +138,15 @@ const ChatContainer = props => {
       isOpen: true,
       type: bannerProps.type || BANNER_TYPES.INFO,
       actionRef: bannerRef
-    })), sendingMessages && sendingMessages.length > 0 ? _StyledIndicatorConta || (_StyledIndicatorConta = /*#__PURE__*/_jsx(StyledIndicatorContainer, {
+    })), sendingMessages && sendingMessages.length > 0 ? /*#__PURE__*/_jsx(StyledIndicatorContainer, {
       isLoading: "bottom",
       linear: true,
       "data-testid": "ds-chat-loading-indicator"
     }, void 0, /*#__PURE__*/_jsx(DSIndeterminateProgressIndicator, {
       processing: true,
-      title: "Loading",
+      title: sendingText,
       lineOnly: true
-    }))) : null), /*#__PURE__*/jsx(ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
+    })) : null), /*#__PURE__*/jsx(ChatComposer, _objectSpread(_objectSpread({}, composerProps), {}, {
       onKeyDown: handleTabs,
       onResize: onResize,
       maxHeight: (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight) || 0) / 2,

package/esm/parts/chat-container/styled.js

@@ -10,7 +10,7 @@ const StyledChatContainerContent = /*#__PURE__*/styled(Grid).withConfig({
 })(["height:100%;min-width:", "px;overflow:hidden;background:", ";position:relative;"], CONTAINER_WIDTH, props => props.theme.colors.neutral['050']);
 const StyledIndicatorContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-d732wo-1"
-})(["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  " : '');
+})(["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  " : '');
 const MobileStyledChatContainerContent = /*#__PURE__*/styled(StyledChatContainerContent).withConfig({
   componentId: "sc-d732wo-2"
 })(["", ",", "{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);

package/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js

@@ -15,13 +15,15 @@ import React from 'react';
 import { describe } from 'react-desc';
 import { useVirtual } from 'react-virtual';
 import DSButton from '@elliemae/ds-button';
+import { debounce } from 'lodash';
 import { ChatBubble } from '../bubble/ChatBubble.js';
 import { BUBBLE_TYPES } from '../bubble/props.js';
 import { MessageDelimiter } from '../message-delimiter/MessageDelimiter.js';
 import { SystemMessage } from '../system-message/SystemMessage.js';
-import { ListItem, StyledWrapperListItem, StyledWrapper, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer } from './styled.js';
+import { ListItem, StyledWrapperListItem, StyledWrapper, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer, StyledNewMessagesHiddenContainer } from './styled.js';
 import { listProps, defaultProps } from './props.js';
 import { useValidateProps } from './config/useValidateProps.js';
+import { useGetNewMessages } from './useGetNewMessages.js';
 import { jsx } from 'react/jsx-runtime';
 
 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; }
@@ -56,6 +58,7 @@ const ChatContainerMessagesList = props => {
     isLoading,
     bannerRef
   } = props;
+  const pendingOnScroll = React.useRef(false);
   const loadMoreRef = React.useRef(null);
   const virtualListRef = React.useRef(); // estimateSize should not be really required given what was stated on
   // https://github.com/tannerlinsley/react-virtual/issues/23
@@ -75,9 +78,17 @@ const ChatContainerMessagesList = props => {
   })), {}, {
     estimateSize: React.useCallback(() => 80, [])
   }));
-  const onScrollStop = React.useCallback(() => {
+  const newMessages = useGetNewMessages(messages);
+  const debouncedScroll = React.useMemo(() => debounce(() => {
     var _virtualListRef$curre;
 
+    if (document.visibilityState === 'hidden') {
+      pendingOnScroll.current = true;
+      return [];
+    }
+
+    if (!virtualListRef.current) return [];
+    pendingOnScroll.current = false;
     const {
       bottom,
       top
@@ -86,15 +97,15 @@ const ChatContainerMessagesList = props => {
     const indexList = [];
     list.forEach(item => {
       const {
-        top: itemTop,
-        bottom: itemBottom
+        top: itemTop
       } = item.getBoundingClientRect();
       const itemPadding = 10;
-      if (itemTop + itemPadding < bottom && itemBottom - itemPadding > top) indexList.push(item.dataset.index);
+      if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index);
     });
     if (onScrollEnds) onScrollEnds(indexList);
     return indexList;
-  }, [onScrollEnds]);
+  }, 500), [onScrollEnds]);
+  const onScrollStop = React.useCallback(debouncedScroll, [debouncedScroll]);
   const onlyFocus = React.useCallback(index => {
     setTimeout(() => {
       virtualListRef.current.querySelector("[data-index=\"".concat(index, "\"]")).focus();
@@ -106,7 +117,8 @@ const ChatContainerMessagesList = props => {
     };
     vScroll(index, b);
     onlyFocus(index);
-  }, [onlyFocus, vScroll]);
+    onScrollStop();
+  }, [onScrollStop, onlyFocus, vScroll]);
   React.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.scrollToIndex = function (a) {
@@ -114,9 +126,11 @@ const ChatContainerMessagesList = props => {
           align: 'center'
         };
         vScroll(a, b);
+        onScrollStop();
       };
 
       actionRef.current.getMessagesInView = onScrollStop;
+      onScrollStop(); // init useMemo due to debounce use.
 
       actionRef.current.focusToIndex = function (a) {
         let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
@@ -127,7 +141,7 @@ const ChatContainerMessagesList = props => {
 
       actionRef.current.focusToIndexWithoutScroll = onlyFocus;
 
-      actionRef.current.focusToList = a => {
+      actionRef.current.focusToList = () => {
         var _virtualListRef$curre2;
 
         (_virtualListRef$curre2 = virtualListRef.current) === null || _virtualListRef$curre2 === void 0 ? void 0 : _virtualListRef$curre2.focus();
@@ -144,7 +158,17 @@ const ChatContainerMessagesList = props => {
     switch (key) {
       case 'ArrowUp':
         e.preventDefault();
-        if (index > 0) virtualListRef.current.querySelector("[data-index=\"".concat(index - 1, "\"]")).focus();
+
+        if (index > 0) {
+          var _virtualListRef$curre3;
+
+          ((_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.querySelector("[data-index=\"".concat(index - 1, "\"]"))).focus();
+        } else if (hasMoreItems === 'top') {
+          var _loadMoreRef$current;
+
+          (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
+        }
+
         break;
 
       case 'ArrowDown':
@@ -167,31 +191,31 @@ const ChatContainerMessagesList = props => {
         break;
 
       case 'Tab':
-        e.preventDefault();
-
         if (hasMoreItems === 'bottom' && !e.shiftKey) {
-          var _loadMoreRef$current;
-
-          (_loadMoreRef$current = loadMoreRef.current) === null || _loadMoreRef$current === void 0 ? void 0 : _loadMoreRef$current.focus();
-        } else if (hasMoreItems === 'top' && e.shiftKey) {
           var _loadMoreRef$current2;
 
+          e.preventDefault();
           (_loadMoreRef$current2 = loadMoreRef.current) === null || _loadMoreRef$current2 === void 0 ? void 0 : _loadMoreRef$current2.focus();
+        } else if (hasMoreItems === 'top' && e.shiftKey) {
+          var _loadMoreRef$current3;
+
+          e.preventDefault();
+          (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
         } else if (!e.shiftKey) {
           if (bannerPosition) {
+            e.preventDefault();
             bannerRef.current.focusOnWrapper();
-          } else {
-            actionRef.current.focusToComposer();
           }
         } else {
-          var _virtualListRef$curre3;
+          var _virtualListRef$curre4;
 
-          (_virtualListRef$curre3 = virtualListRef.current) === null || _virtualListRef$curre3 === void 0 ? void 0 : _virtualListRef$curre3.focus();
+          e.preventDefault();
+          (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
         }
 
         break;
     }
-  }, [actionRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
+  }, [bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
   const handleListKey = React.useCallback(e => {
     const {
       key
@@ -200,12 +224,22 @@ const ChatContainerMessagesList = props => {
     switch (key) {
       case 'ArrowUp':
         e.preventDefault();
-        onlyFocus(onScrollStop().shift());
+
+        if (document.activeElement !== loadMoreRef.current) {
+          onlyFocus(onScrollStop().shift());
+        }
+
         break;
 
       case 'ArrowDown':
         e.preventDefault();
-        onlyFocus(onScrollStop().pop());
+
+        if (document.activeElement === loadMoreRef.current) {
+          virtualListRef.current.querySelector("[data-index=\"0\"]").focus();
+        } else {
+          onlyFocus(onScrollStop().pop());
+        }
+
         break;
 
       case 'Home':
@@ -221,11 +255,6 @@ const ChatContainerMessagesList = props => {
       case 'Tab':
         if (document.activeElement !== loadMoreRef.current) {
           if (hasMoreItems === 'bottom' && !e.shiftKey) {
-            var _loadMoreRef$current3;
-
-            e.preventDefault();
-            (_loadMoreRef$current3 = loadMoreRef.current) === null || _loadMoreRef$current3 === void 0 ? void 0 : _loadMoreRef$current3.focus();
-          } else if (hasMoreItems === 'top' && e.shiftKey) {
             var _loadMoreRef$current4;
 
             e.preventDefault();
@@ -238,15 +267,18 @@ const ChatContainerMessagesList = props => {
           e.preventDefault();
           actionRef.current.focusToComposer();
         } else {
-          var _virtualListRef$curre4;
+          var _virtualListRef$curre5;
 
           e.preventDefault();
-          (_virtualListRef$curre4 = virtualListRef.current) === null || _virtualListRef$curre4 === void 0 ? void 0 : _virtualListRef$curre4.focus();
+          (_virtualListRef$curre5 = virtualListRef.current) === null || _virtualListRef$curre5 === void 0 ? void 0 : _virtualListRef$curre5.focus();
         }
 
         break;
     }
   }, [actionRef, hasMoreItems, messages.length, onScrollStop, onlyFocus, scrollAndFocus]);
+  const checkPendingOnScroll = React.useCallback(() => {
+    if (pendingOnScroll.current === true) onScrollStop();
+  }, [onScrollStop]);
   React.useEffect(() => {
     let handlerCallback = null;
     const localVirtualRef = virtualListRef.current;
@@ -260,11 +292,13 @@ const ChatContainerMessagesList = props => {
       virtualListRef.current.addEventListener('scroll', onScroll);
     }
 
+    document.addEventListener('visibilitychange', checkPendingOnScroll);
     return () => {
       if (handlerCallback) clearTimeout(handlerCallback);
       if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);
+      document.removeEventListener('visibilitychange', checkPendingOnScroll);
     };
-  }, [onScrollStop, onScrollEnds]);
+  }, [onScrollStop, onScrollEnds, checkPendingOnScroll]);
   const render = React.useMemo(() => virtualItems.map(virtualItem => {
     const {
       index,
@@ -285,7 +319,7 @@ const ChatContainerMessagesList = props => {
       "data-index": index,
       style: style,
       ref: measureRef,
-      tabIndex: 0,
+      tabIndex: -1,
       onKeyDown: handleKey,
       role: "listitem",
       children: /*#__PURE__*/_jsx(StyledWrapperListItem, {
@@ -301,14 +335,12 @@ const ChatContainerMessagesList = props => {
   return /*#__PURE__*/_jsx(StyledWrapper, {}, void 0, /*#__PURE__*/jsx(StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
-    "aria-live": "polite",
-    "aria-relevant": "additions",
     ref: virtualListRef,
     role: "list",
     onKeyDown: handleListKey,
     children: /*#__PURE__*/_jsx(StyledChatContainerContentListScroll, {
       height: "".concat(totalSize, "px")
-    }, void 0, render, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx(StyledLoadMoreContainer, {
+    }, void 0, !isLoading && hasMoreItems ? /*#__PURE__*/_jsx(StyledLoadMoreContainer, {
       hasMoreItems: hasMoreItems
     }, void 0, /*#__PURE__*/_jsx(DSButton, {
       labelText: "Load More",
@@ -316,8 +348,11 @@ const ChatContainerMessagesList = props => {
       onClick: getMoreMessages,
       "data-testid": "ds-chat-load-more-btn",
       innerRef: loadMoreRef
-    })) : null)
-  }));
+    })) : null, render)
+  }), /*#__PURE__*/_jsx(StyledNewMessagesHiddenContainer, {
+    "aria-live": "polite",
+    "aria-hidden": "false"
+  }, void 0, newMessages.map(newMessage => /*#__PURE__*/_jsx("p", {}, void 0, newMessage.title, " ", newMessage.time, " ", newMessage.body, " ", newMessage.errorMessage, " ", newMessage.helpMessage))));
 };
 
 ChatContainerMessagesList.defaultProps = defaultProps;

package/esm/parts/chat-container-messages-list/styled.js

@@ -12,14 +12,17 @@ const StyledWrapperListItem = /*#__PURE__*/styled.div.withConfig({
 const StyledChatContainerContentList = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1jhprzr-2"
 })(["width:100%;height:100%;padding:", ";padding-bottom:0;overflow-y:auto;overflow-x:hidden;"], props => props.theme.space.xs);
-const StyledChatContainerContentListScroll = /*#__PURE__*/styled.div.withConfig({
+const StyledNewMessagesHiddenContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1jhprzr-3"
+})(["position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(100%);white-space:nowrap;"]);
+const StyledChatContainerContentListScroll = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1jhprzr-4"
 })(["width:100%;height:", ";position:relative;"], props => props.height);
 const StyledLoadMoreContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1jhprzr-4"
+  componentId: "sc-1jhprzr-5"
 })(["position:absolute;width:calc(100% + ", ");padding:", ";left:-", ";right:-", ";display:grid;justify-content:center;align-items:center;", " ", ""], props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.theme.space.xxs, props => props.hasMoreItems === 'top' ? 'top: 0;' : '', props => props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '');
 const ListItem = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1jhprzr-5"
+  componentId: "sc-1jhprzr-6"
 })(["&:focus,&:focus-visible{outline:none;&:after{content:'';display:block;position:absolute;top:0;left:-", ";pointer-events:none;border-radius:2px;background-color:#ebedf0;width:calc(100% + 24px);border:2px solid #1e79c2;height:100%;z-index:-1;}}"], props => props.theme.space.xxs);
 
-export { ListItem, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer, StyledWrapper, StyledWrapperListItem };
+export { ListItem, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer, StyledNewMessagesHiddenContainer, StyledWrapper, StyledWrapperListItem };

package/esm/parts/chat-container-messages-list/useGetNewMessages.js

@@ -0,0 +1,24 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useState, useMemo } from 'react';
+
+const useGetNewMessages = messages => {
+  const [seenMessages, setSeenMessages] = useState({});
+  const newMessages = useMemo(() => {
+    const list = [];
+    messages.forEach(message => {
+      if (!(message.dsId in seenMessages)) {
+        list.push(message);
+      }
+    });
+    setSeenMessages(Object.fromEntries(messages.map(m => [m.dsId, true])));
+    return list; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messages]);
+  return newMessages;
+};
+
+export { useGetNewMessages };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-chat",
-  "version": "2.0.2",
+  "version": "2.0.6",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Chat",
   "module": "./esm/index.js",
@@ -183,6 +183,10 @@
       "import": "./esm/parts/chat-container/ChatContainer.js",
       "require": "./cjs/parts/chat-container/ChatContainer.js"
     },
+    "./parts/chat-container-messages-list/useGetNewMessages": {
+      "import": "./esm/parts/chat-container-messages-list/useGetNewMessages.js",
+      "require": "./cjs/parts/chat-container-messages-list/useGetNewMessages.js"
+    },
     "./parts/chat-container-messages-list/styled": {
       "import": "./esm/parts/chat-container-messages-list/styled.js",
       "require": "./cjs/parts/chat-container-messages-list/styled.js"
@@ -305,15 +309,15 @@
     "generateSubmodules": true
   },
   "dependencies": {
-    "@elliemae/ds-banner": "2.0.2",
-    "@elliemae/ds-button": "2.0.2",
-    "@elliemae/ds-grid": "2.0.2",
-    "@elliemae/ds-icons": "2.0.2",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.0.2",
-    "@elliemae/ds-props-helpers": "2.0.2",
-    "@elliemae/ds-system": "2.0.2",
-    "@elliemae/ds-tooltip": "2.0.2",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.2",
+    "@elliemae/ds-banner": "2.0.6",
+    "@elliemae/ds-button": "2.0.6",
+    "@elliemae/ds-grid": "2.0.6",
+    "@elliemae/ds-icons": "2.0.6",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.6",
+    "@elliemae/ds-props-helpers": "2.0.6",
+    "@elliemae/ds-system": "2.0.6",
+    "@elliemae/ds-tooltip": "2.0.6",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.6",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.2",
     "react-virtual": "~2.3.2"

package/types/ChatDataTestids.d.ts

@@ -18,4 +18,5 @@ export declare const ChatDataTestIds: {
     BUBBLE: string;
     BUBBLE_TITLE: string;
     BUBBLE_BODY: string;
+    BANNER: string;
 };

package/types/parts/chat-composer/ChatContainerComposer.d.ts

@@ -10,6 +10,9 @@ declare const ChatComposer: {
         inputValue: {
             deprecated: import("react-desc").PropTypesDescValidator;
         };
+        ariaMaxLengthMessage: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
         maxLengthMessage: {
             deprecated: import("react-desc").PropTypesDescValidator;
         };

package/types/parts/chat-container-messages-list/styled.d.ts

@@ -2,6 +2,7 @@ import { BubbleProps } from '../bubble/props';
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWrapperListItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<BubbleProps>, never>;
 export declare const StyledChatContainerContentList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNewMessagesHiddenContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledChatContainerContentListScroll: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     height: string;
 }, never>;

package/types/parts/chat-container-messages-list/useGetNewMessages.d.ts

@@ -0,0 +1,2 @@
+import { BubbleProps } from '../bubble/props';
+export declare const useGetNewMessages: (messages: BubbleProps[]) => BubbleProps[];

package/types/tests/utils.d.ts

@@ -1,27 +1 @@
-export declare const preLoadMessages2: ({
-    dsId: string;
-    body: string;
-    type: string;
-    title: string;
-    time: string;
-    extraProps?: undefined;
-    helpMessage?: undefined;
-} | {
-    dsId: string;
-    type: string;
-    title: string;
-    extraProps: {
-        'data-testid': string;
-    };
-    body?: undefined;
-    time?: undefined;
-    helpMessage?: undefined;
-} | {
-    dsId: string;
-    body: string;
-    type: string;
-    title: string;
-    time: string;
-    helpMessage: string | null;
-    extraProps?: undefined;
-})[];
+export declare const loadMsgs: (q: number) => unknown;