@elliemae/ds-chat 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -2,8 +2,22 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
@@ -33,13 +47,13 @@ __export(ChatContainerComposer_exports, {
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_react_desc = require("react-desc");
 var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_styled = require("./styled");
-var import_useValidateProps = require("./config/useValidateProps");
-var import_props = require("./props");
+var import_react_desc_prop_types = require("../../react-desc-prop-types");
 const ChatComposer = (props) => {
-  (0, import_useValidateProps.useValidateProps)(props, ChatComposerWithSchema.toJSON());
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultPropsComposer);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.ChatComposerPropTypes);
   const {
     inputValue,
     onChange,
@@ -55,7 +69,7 @@ const ChatComposer = (props) => {
     buttonDisabled,
     dataTestid,
     actionRef
-  } = props;
+  } = propsWithDefault;
   const COMPOSER_MIN_HEIGHT = 32;
   const input = import_react.default.useRef();
   const inputSize = import_react.default.useRef();
@@ -99,7 +113,7 @@ const ChatComposer = (props) => {
   }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledComposerInput, {
     ref: input,
     onChange: handleChange,
-    style: { ...heightProps },
+    style: __spreadValues({}, heightProps),
     value: inputValue,
     onFocus,
     onBlur,
@@ -149,9 +163,8 @@ const ChatComposer = (props) => {
     role: "alert"
   }, maxLengthMessage || `You have entered ${inputLength} characters and have exceeded the limit by ${inputLength - inputMaxLength}. Please limit to less than ${inputMaxLength} characters. `), maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `) : "", inputMaxLength && !maxLengthMessage ? ` ${inputLength} / ${inputMaxLength}` : ""), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, null)));
 };
-ChatComposer.propTypes = import_props.composerProps;
-ChatComposer.defaultProps = import_props.defaultComposerPros;
-const ChatComposerWithSchema = (0, import_react_desc.describe)(ChatComposer);
-ChatComposerWithSchema.propTypes = import_props.composerProps;
+ChatComposer.propTypes = import_react_desc_prop_types.ChatComposerPropTypes;
+const ChatComposerWithSchema = (0, import_ds_props_helpers.describe)(ChatComposer);
+ChatComposerWithSchema.propTypes = import_react_desc_prop_types.ChatComposerPropTypes;
 module.exports = __toCommonJS(ChatContainerComposer_exports);
 //# sourceMappingURL=ChatContainerComposer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-composer/ChatContainerComposer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from 'react-desc';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled';\nimport { useValidateProps } from './config/useValidateProps';\n\nimport { defaultComposerPros, composerProps, ChatComposerProps } from './props';\n\n// eslint-disable-next-line complexity\nconst ChatComposer = (props: ChatComposerProps): JSX.Element => {\n  useValidateProps(props, ChatComposerWithSchema.toJSON());\n\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    maxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = props;\n\n  const COMPOSER_MIN_HEIGHT = 32;\n  const input = React.useRef<HTMLTextAreaElement>();\n  const inputSize = React.useRef<HTMLTextAreaElement>();\n  const inputSend = React.useRef<HTMLButtonElement>();\n  const [height, setHeight] = React.useState(32);\n  const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n  const [showScroll, setShowScroll] = React.useState(true);\n\n  React.useEffect(() => {\n    const newHeight =\n      inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);\n    setHeight(newHeight);\n    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);\n  }, [inputValue, internalMaxHeight, height, onResize]);\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusToComposer = () => {\n        input.current.focus();\n      };\n      actionRef.current.focusToSend = () => {\n        inputSend.current.focus();\n      };\n    }\n  }, [actionRef]);\n\n  const handleChange = React.useCallback(\n    (e) => {\n      onChange(e.target.value);\n    },\n    [onChange],\n  );\n  const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n  const inputLength = String(inputValue || '').length;\n  const hasError = React.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);\n  return (\n    <StyledChatContainerContentComposer rows={['auto', '15px']} maxHeight={`${maxHeight}px`} data-testid={dataTestid}>\n      <Grid\n        cols={['1fr', '24px']}\n        style={{ height: heightProps.height }}\n        justifyContent=\"center\"\n        alignItems=\"flex-end\"\n        gutter=\"xxs\"\n      >\n        <StyledComposerInput\n          ref={input}\n          onChange={handleChange}\n          style={{ ...heightProps }}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid=\"chat-composer-textarea\"\n          name=\"chat-composer-textarea\"\n          id=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"text\"\n            icon={<PaperAirplane width={18} height={18} />}\n            onClick={onSend}\n            size=\"s\"\n            disabled={!inputValue || buttonDisabled || hasError}\n            data-testid=\"chat-composer-send-button\"\n            aria-label=\"Send\"\n            innerRef={inputSend}\n          />\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        ref={inputSize}\n        style={{\n          height: 32,\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        onChange={handleChange}\n        value={inputValue}\n      />\n      <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n        <StyledCounterArea hasError={hasError} data-testid=\"composer-counter-area\">\n          {inputMaxLength && hasError ? (\n            <>\n              <StyledCounterErrorA11y role=\"alert\">\n                {maxLengthMessage ||\n                  `You have entered ${inputLength} characters and have exceeded the limit by ${\n                    inputLength - inputMaxLength\n                  }. Please limit to less than ${inputMaxLength} characters. `}\n              </StyledCounterErrorA11y>\n              {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n            </>\n          ) : (\n            ''\n          )}\n          {inputMaxLength && !maxLengthMessage ? ` ${inputLength} / ${inputMaxLength}` : ''}\n        </StyledCounterArea>\n        <Grid />\n      </Grid>\n    </StyledChatContainerContentComposer>\n  );\n};\n\nChatComposer.propTypes = composerProps;\nChatComposer.defaultProps = defaultComposerPros;\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = composerProps;\n\nexport { ChatComposer, ChatComposerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled';\n\nimport { DSChatT, ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types';\n// eslint-disable-next-line complexity\nconst ChatComposer: React.ComponentType<DSChatT.ComposerProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ComposerProps>(props, defaultPropsComposer);\n  useValidateTypescriptPropTypes<DSChatT.ComposerProps>(propsWithDefault, ChatComposerPropTypes);\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    maxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = propsWithDefault;\n\n  const COMPOSER_MIN_HEIGHT = 32;\n  const input = React.useRef<HTMLTextAreaElement>();\n  const inputSize = React.useRef<HTMLTextAreaElement>();\n  const inputSend = React.useRef<HTMLButtonElement>();\n  const [height, setHeight] = React.useState(32);\n  const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n  const [showScroll, setShowScroll] = React.useState(true);\n\n  React.useEffect(() => {\n    const newHeight =\n      inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);\n    setHeight(newHeight);\n    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);\n  }, [inputValue, internalMaxHeight, height, onResize]);\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusToComposer = () => {\n        input.current.focus();\n      };\n      actionRef.current.focusToSend = () => {\n        inputSend.current.focus();\n      };\n    }\n  }, [actionRef]);\n\n  const handleChange = React.useCallback(\n    (e) => {\n      onChange(e.target.value);\n    },\n    [onChange],\n  );\n  const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n  const inputLength = String(inputValue || '').length;\n  const hasError = React.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);\n  return (\n    <StyledChatContainerContentComposer rows={['auto', '15px']} maxHeight={`${maxHeight}px`} data-testid={dataTestid}>\n      <Grid\n        cols={['1fr', '24px']}\n        style={{ height: heightProps.height }}\n        justifyContent=\"center\"\n        alignItems=\"flex-end\"\n        gutter=\"xxs\"\n      >\n        <StyledComposerInput\n          ref={input}\n          onChange={handleChange}\n          style={{ ...heightProps }}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid=\"chat-composer-textarea\"\n          name=\"chat-composer-textarea\"\n          id=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"text\"\n            icon={<PaperAirplane width={18} height={18} />}\n            onClick={onSend}\n            size=\"s\"\n            disabled={!inputValue || buttonDisabled || hasError}\n            data-testid=\"chat-composer-send-button\"\n            aria-label=\"Send\"\n            innerRef={inputSend}\n          />\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        ref={inputSize}\n        style={{\n          height: 32,\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        onChange={handleChange}\n        value={inputValue}\n      />\n      <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n        <StyledCounterArea hasError={hasError} data-testid=\"composer-counter-area\">\n          {inputMaxLength && hasError ? (\n            <>\n              <StyledCounterErrorA11y role=\"alert\">\n                {maxLengthMessage ||\n                  `You have entered ${inputLength} characters and have exceeded the limit by ${\n                    inputLength - inputMaxLength\n                  }. Please limit to less than ${inputMaxLength} characters. `}\n              </StyledCounterErrorA11y>\n              {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n            </>\n          ) : (\n            ''\n          )}\n          {inputMaxLength && !maxLengthMessage ? ` ${inputLength} / ${inputMaxLength}` : ''}\n        </StyledCounterArea>\n        <Grid />\n      </Grid>\n    </StyledChatContainerContentComposer>\n  );\n};\n\nChatComposer.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatComposer, ChatComposerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,9 +1,26 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
@@ -33,16 +50,17 @@ __export(ChatContainer_exports, {
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_lodash = require("lodash");
-var import_react_desc = require("react-desc");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_indeterminate_progress_indicator = __toESM(require("@elliemae/ds-indeterminate-progress-indicator"));
 var import_ds_banner = __toESM(require("@elliemae/ds-banner"));
 var import_chat_composer = require("../chat-composer");
 var import_chat_container_messages_list = require("../chat-container-messages-list");
-var import_props = require("./props");
+var import_react_desc_prop_types = require("../../react-desc-prop-types");
 var import_styled = require("./styled");
-var import_useValidateProps = require("./config/useValidateProps");
 const ChatContainer = (props) => {
-  (0, import_useValidateProps.useValidateProps)(props, import_props.containerProps);
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.ChatContainerPropTypes);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
   const {
     sendingText,
     sendingMessages,
@@ -55,9 +73,8 @@ const ChatContainer = (props) => {
     device,
     isLoading,
     hasMoreItems,
-    getMoreMessages,
-    ariaLabel
-  } = props;
+    getMoreMessages
+  } = propsWithDefault;
   const bannerRef = import_react.default.useRef({ focusOnWrapper: import_lodash.noop, focusOnLink: import_lodash.noop });
   const containerRef = import_react.default.useRef();
   const listRef = import_react.default.useRef({ scrollToIndex: import_lodash.noop });
@@ -95,15 +112,13 @@ const ChatContainer = (props) => {
       actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
     }
   }, [actionRef]);
-  return /* @__PURE__ */ import_react.default.createElement(Container, {
+  return /* @__PURE__ */ import_react.default.createElement(Container, __spreadProps(__spreadValues({}, globalAttributes), {
     rows: ["minmax(0, 1fr)", "auto"],
     ref: containerRef,
-    role: "region",
-    "aria-label": ariaLabel
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "region"
+  }), /* @__PURE__ */ import_react.default.createElement("div", {
     style: { position: "relative", overflow: "hidden" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_chat_container_messages_list.ChatContainerMessagesList, {
-    ...messagesListProps,
+  }, /* @__PURE__ */ import_react.default.createElement(import_chat_container_messages_list.ChatContainerMessagesList, __spreadProps(__spreadValues({}, messagesListProps), {
     actionRef: actionRef || listRef,
     isLoading,
     hasMoreItems,
@@ -112,7 +127,7 @@ const ChatContainer = (props) => {
     sendingText,
     bannerPosition,
     bannerRef
-  }), ["top", "bottom"].includes(isLoading) ? /* @__PURE__ */ import_react.default.createElement(import_styled.StyledIndicatorContainer, {
+  })), isLoading && ["top", "bottom"].includes(isLoading) ? /* @__PURE__ */ import_react.default.createElement(import_styled.StyledIndicatorContainer, {
     isLoading,
     "data-testid": "ds-chat-loading-indicator"
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_indeterminate_progress_indicator.default, {
@@ -123,15 +138,15 @@ const ChatContainer = (props) => {
     isLoading: bannerPosition
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_banner.default, {
     showCloseButton: true,
-    label: bannerProps.label || "Unread messages",
+    label: bannerProps?.label || "Unread messages",
     containerProps: { id: "ds-chat-banner" },
     actionLink: {
-      label: bannerProps.viewLabel || "View",
-      onClick: bannerProps.onView
+      label: bannerProps?.viewLabel || "View",
+      onClick: bannerProps?.onView
     },
-    onClose: bannerProps.onClose,
+    onClose: bannerProps?.onClose,
     isOpen: true,
-    type: bannerProps.type || import_ds_banner.BANNER_TYPES.INFO,
+    type: bannerProps?.type || import_ds_banner.BANNER_TYPES.INFO,
     actionRef: bannerRef
   })), sendingMessages && sendingMessages.length > 0 ? /* @__PURE__ */ import_react.default.createElement(import_styled.StyledIndicatorContainer, {
     isLoading: "bottom",
@@ -141,17 +156,15 @@ const ChatContainer = (props) => {
     processing: true,
     title: sendingText,
     lineOnly: true
-  })) : null), /* @__PURE__ */ import_react.default.createElement(import_chat_composer.ChatComposer, {
-    ...composerProps,
+  })) : null), /* @__PURE__ */ import_react.default.createElement(import_chat_composer.ChatComposer, __spreadProps(__spreadValues({}, composerProps), {
     onKeyDown: handleTabs,
     onResize,
     maxHeight: (containerRef.current?.clientHeight || 0) / 2,
     actionRef: actionRef || listRef
-  }));
+  })));
 };
-ChatContainer.propTypes = import_props.containerProps;
-ChatContainer.defaultProps = import_props.defaultProps;
-const ChatContainerWithSchema = (0, import_react_desc.describe)(ChatContainer);
-ChatContainerWithSchema.propTypes = import_props.containerProps;
+ChatContainer.propTypes = import_react_desc_prop_types.ChatContainerPropTypes;
+const ChatContainerWithSchema = (0, import_ds_props_helpers.describe)(ChatContainer);
+ChatContainerWithSchema.propTypes = import_react_desc_prop_types.ChatContainerPropTypes;
 module.exports = __toCommonJS(ChatContainer_exports);
 //# sourceMappingURL=ChatContainer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-container/ChatContainer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { noop } from 'lodash';\nimport { describe } from 'react-desc';\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from '../chat-composer';\nimport { ChatContainerMessagesList } from '../chat-container-messages-list';\nimport { ChatContainerProps, defaultProps, containerProps } from './props';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst ChatContainer = (props: ChatContainerProps): JSX.Element => {\n  useValidateProps(props, containerProps);\n\n  const {\n    sendingText,\n    sendingMessages,\n    bannerPosition,\n    bannerProps,\n    messagesListProps,\n    composerProps,\n    composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n    actionRef,\n    device,\n    isLoading,\n    hasMoreItems,\n    getMoreMessages,\n    ariaLabel,\n  } = props;\n  const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n  const containerRef = React.useRef<HTMLElement>();\n  const listRef = React.useRef({ scrollToIndex: noop });\n\n  const onResize = React.useCallback(\n    (height: number) => {\n      if (onComposerResize) onComposerResize(height);\n      /*\n         setTimeout is used to equal the animation duration from the \n         composer text area when increase its size\n        */\n      setTimeout(() => {\n        actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n          align: 'start',\n        });\n      }, 50);\n    },\n    [onComposerResize, messagesListProps.messages, actionRef],\n  );\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n  const handleTabs = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (onComposerKeyDown) onComposerKeyDown(e);\n      else {\n        const ref = actionRef || listRef;\n        if (e.shiftKey && e.key === 'Tab') {\n          if (messagesListProps.messages?.length > 0) {\n            e.preventDefault();\n            if (['top', 'bottom'].includes(bannerPosition)) {\n              bannerRef.current.focusOnWrapper();\n            } else {\n              const last = ref.current.getMessagesInView().pop();\n              ref.current?.focusToIndexWithoutScroll(last);\n            }\n          }\n        }\n      }\n    },\n    [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n  );\n\n  // Map actions\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n      actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n    }\n  }, [actionRef]);\n\n  return (\n    <Container rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\" aria-label={ariaLabel}>\n      <div style={{ position: 'relative', overflow: 'hidden' }}>\n        <ChatContainerMessagesList\n          {...messagesListProps}\n          actionRef={actionRef || listRef}\n          isLoading={isLoading}\n          hasMoreItems={hasMoreItems}\n          getMoreMessages={getMoreMessages}\n          sendingMessages={sendingMessages}\n          sendingText={sendingText}\n          bannerPosition={bannerPosition}\n          bannerRef={bannerRef}\n        />\n        {['top', 'bottom'].includes(isLoading) ? (\n          <StyledIndicatorContainer isLoading={isLoading} data-testid=\"ds-chat-loading-indicator\">\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n          </StyledIndicatorContainer>\n        ) : null}\n        <StyledIndicatorContainer linear isLoading={bannerPosition}>\n          <DSBanner\n            showCloseButton\n            label={bannerProps.label || 'Unread messages'}\n            containerProps={{ id: 'ds-chat-banner' }}\n            actionLink={{\n              label: bannerProps.viewLabel || 'View',\n              onClick: bannerProps.onView,\n            }}\n            onClose={bannerProps.onClose}\n            isOpen\n            type={bannerProps.type || BANNER_TYPES.INFO}\n            actionRef={bannerRef}\n          />\n        </StyledIndicatorContainer>\n        {sendingMessages && sendingMessages.length > 0 ? (\n          <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid=\"ds-chat-loading-indicator\">\n            <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer\n        {...composerProps}\n        onKeyDown={handleTabs}\n        onResize={onResize}\n        maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n        actionRef={actionRef || listRef}\n      />\n    </Container>\n  );\n};\n\nChatContainer.propTypes = containerProps;\nChatContainer.defaultProps = defaultProps;\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = containerProps;\n\nexport { ChatContainer, ChatContainerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { WeakValidationMap } from 'react';\nimport { noop } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-props-helpers';\n\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from '../chat-composer';\nimport { ChatContainerMessagesList } from '../chat-container-messages-list';\nimport { DSChatT, defaultProps, ChatContainerPropTypes } from '../../react-desc-prop-types';\n\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n  useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const {\n    sendingText,\n    sendingMessages,\n    bannerPosition,\n    bannerProps,\n    messagesListProps,\n    composerProps,\n    composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n    actionRef,\n    device,\n    isLoading,\n    hasMoreItems,\n    getMoreMessages,\n  } = propsWithDefault;\n  const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n  const containerRef = React.useRef<HTMLElement>();\n  const listRef = React.useRef({ scrollToIndex: noop });\n\n  const onResize = React.useCallback(\n    (height: number) => {\n      if (onComposerResize) onComposerResize(height);\n      /*\n         setTimeout is used to equal the animation duration from the \n         composer text area when increase its size\n        */\n      setTimeout(() => {\n        actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n          align: 'start',\n        });\n      }, 50);\n    },\n    [onComposerResize, messagesListProps.messages, actionRef],\n  );\n  const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n  const handleTabs = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (onComposerKeyDown) onComposerKeyDown(e);\n      else {\n        const ref = actionRef || listRef;\n        if (e.shiftKey && e.key === 'Tab') {\n          if (messagesListProps.messages?.length > 0) {\n            e.preventDefault();\n            if (['top', 'bottom'].includes(bannerPosition)) {\n              bannerRef.current.focusOnWrapper();\n            } else {\n              const last = ref.current.getMessagesInView().pop();\n              ref.current?.focusToIndexWithoutScroll(last);\n            }\n          }\n        }\n      }\n    },\n    [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n  );\n\n  // Map actions\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n      actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n    }\n  }, [actionRef]);\n\n  return (\n    <Container {...globalAttributes} rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\">\n      <div style={{ position: 'relative', overflow: 'hidden' }}>\n        <ChatContainerMessagesList\n          {...messagesListProps}\n          actionRef={actionRef || listRef}\n          isLoading={isLoading}\n          hasMoreItems={hasMoreItems}\n          getMoreMessages={getMoreMessages}\n          sendingMessages={sendingMessages}\n          sendingText={sendingText}\n          bannerPosition={bannerPosition}\n          bannerRef={bannerRef}\n        />\n        {isLoading && ['top', 'bottom'].includes(isLoading) ? (\n          <StyledIndicatorContainer isLoading={isLoading} data-testid=\"ds-chat-loading-indicator\">\n            <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n          </StyledIndicatorContainer>\n        ) : null}\n        <StyledIndicatorContainer linear isLoading={bannerPosition}>\n          <DSBanner\n            showCloseButton\n            label={bannerProps?.label || 'Unread messages'}\n            containerProps={{ id: 'ds-chat-banner' }}\n            actionLink={{\n              label: bannerProps?.viewLabel || 'View',\n              onClick: bannerProps?.onView,\n            }}\n            onClose={bannerProps?.onClose}\n            isOpen\n            type={bannerProps?.type || BANNER_TYPES.INFO}\n            actionRef={bannerRef}\n          />\n        </StyledIndicatorContainer>\n        {sendingMessages && sendingMessages.length > 0 ? (\n          <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid=\"ds-chat-loading-indicator\">\n            <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n          </StyledIndicatorContainer>\n        ) : null}\n      </div>\n      <ChatComposer\n        {...composerProps}\n        onKeyDown={handleTabs}\n        onResize={onResize}\n        maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n        actionRef={actionRef || listRef}\n      />\n    </Container>\n  );\n};\n\nChatContainer.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainer, ChatContainerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -35,9 +35,9 @@ __export(styled_exports, {
 var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_styled = require("../bubble/styled");
+var import_styled = require("../../exported-related/bubble/styled");
 var import_styled2 = require("../chat-composer/styled");
-var import_style = require("../system-message/style");
+var import_style = require("../../exported-related/system-message/style");
 const CONTAINER_WIDTH = 300;
 const StyledChatContainerContent = (0, import_styled_components.default)(import_ds_grid.Grid)`
   height: 100%;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/chat-container/styled.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '../bubble/styled';\nimport { StyledComposerInput } from '../chat-composer/styled';\nimport { Wrapper, Title, Time, Message } from '../system-message/style';\nexport const CONTAINER_WIDTH = 300;\n\nexport const StyledChatContainerContent = styled(Grid)`\n  height: 100%;\n  min-width: ${CONTAINER_WIDTH}px;\n  overflow: hidden;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  position: relative;\n`;\nexport const StyledIndicatorContainer = styled.div<{\n  isLoading?: 'top' | 'bottom';\n  linear?: boolean;\n}>`\n  transition: 0.4s ease-in-out;\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  width: 100%;\n  padding: 0 ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n  left: 0;\n  right: 0;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  ${(props) =>\n    props.isLoading === 'top'\n      ? `\n  top: -41px;\n  transform: translate(0, 41px);\n  visibility: visible;\n  pointer-events: auto;\n  `\n      : ''}\n  ${(props) =>\n    props.isLoading === 'bottom'\n      ? `\n  bottom: -41px;\n  transform: translate(0, -41px);\n  visibility: visible;\n  pointer-events: auto;\n  `\n      : ''}\n\n  & div,a {\n    font-size: 13px;\n  }\n`;\n\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n  ${StyledTitleLeftBubble},\n  ${StyleBodyWrapper} {\n    font-size: 16px;\n  }\n\n  ${StyledTitleRightBubble} {\n    font-size: 13px;\n  }\n\n  ${Wrapper} {\n    background-color: #fff;\n    box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n  }\n\n  ${Title},\n  ${Message} {\n    font-size: 16px;\n    text-align: left;\n  }\n\n  ${Time} {\n    font-size: 13px;\n  }\n\n  ${StyledComposerInput} {\n    font-size: 16px;\n  }\n\n  ${StyledIndicatorContainer} {\n    font-size: 16px;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '../../exported-related/bubble/styled';\nimport { StyledComposerInput } from '../chat-composer/styled';\nimport { Wrapper, Title, Time, Message } from '../../exported-related/system-message/style';\nexport const CONTAINER_WIDTH = 300;\n\nexport const StyledChatContainerContent = styled(Grid)`\n  height: 100%;\n  min-width: ${CONTAINER_WIDTH}px;\n  overflow: hidden;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  position: relative;\n`;\nexport const StyledIndicatorContainer = styled.div<{\n  isLoading?: 'top' | 'bottom';\n  linear?: boolean;\n}>`\n  transition: 0.4s ease-in-out;\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  width: 100%;\n  padding: 0 ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n  left: 0;\n  right: 0;\n  background: ${(props) => props.theme.colors.neutral['000']};\n  ${(props) =>\n    props.isLoading === 'top'\n      ? `\n  top: -41px;\n  transform: translate(0, 41px);\n  visibility: visible;\n  pointer-events: auto;\n  `\n      : ''}\n  ${(props) =>\n    props.isLoading === 'bottom'\n      ? `\n  bottom: -41px;\n  transform: translate(0, -41px);\n  visibility: visible;\n  pointer-events: auto;\n  `\n      : ''}\n\n  & div,a {\n    font-size: 13px;\n  }\n`;\n\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n  ${StyledTitleLeftBubble},\n  ${StyleBodyWrapper} {\n    font-size: 16px;\n  }\n\n  ${StyledTitleRightBubble} {\n    font-size: 13px;\n  }\n\n  ${Wrapper} {\n    background-color: #fff;\n    box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n  }\n\n  ${Title},\n  ${Message} {\n    font-size: 16px;\n    text-align: left;\n  }\n\n  ${Time} {\n    font-size: 13px;\n  }\n\n  ${StyledComposerInput} {\n    font-size: 16px;\n  }\n\n  ${StyledIndicatorContainer} {\n    font-size: 16px;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,qBAAqB;AACrB,oBAAgF;AAChF,qBAAoC;AACpC,mBAA8C;AACvC,MAAM,kBAAkB;AAExB,MAAM,6BAA6B,sCAAO;AAAA;AAAA,eAElC;AAAA;AAAA,gBAEC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAG/C,MAAM,2BAA2B,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShC,CAAC,UAAW,CAAC,MAAM,SAAS,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAGnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAClD,CAAC,UACD,MAAM,cAAc,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA,IACJ,CAAC,UACD,MAAM,cAAc,WAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,mCAAmC,sCAAO;AAAA,IACnD;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,9 +1,26 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
@@ -32,15 +49,16 @@ __export(ChatContainerMessagesList_exports, {
 });
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_virtual = require("react-virtual");
 var import_ds_button = __toESM(require("@elliemae/ds-button"));
 var import_lodash = require("lodash");
-var import_bubble = require("../bubble");
-var import_message_delimiter = require("../message-delimiter");
-var import_system_message = require("../system-message");
+var import_bubble = require("../../exported-related/bubble");
+var import_message_delimiter = require("../../exported-related/message-delimiter");
+var import_system_message = require("../../exported-related/system-message");
 var import_styled = require("./styled");
-var import_props = require("./props");
+var import_react_desc_prop_types = require("../../react-desc-prop-types");
+var import_useGetNewMessages = require("./useGetNewMessages");
 const getPadding = ({ hasMoreItems, bannerPosition, isLoading }) => {
   const padding = {
     paddingStart: 0,
@@ -53,6 +71,9 @@ const getPadding = ({ hasMoreItems, bannerPosition, isLoading }) => {
   return padding;
 };
 const ChatContainerMessagesList = (props) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultPropsMessagesList);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.ChatContainerMessagesListPropTypes);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
   const {
     sendingText,
     bannerPosition,
@@ -64,7 +85,7 @@ const ChatContainerMessagesList = (props) => {
     hasMoreItems,
     isLoading,
     bannerRef
-  } = props;
+  } = propsWithDefault;
   const pendingOnScroll = import_react.default.useRef(false);
   const loadMoreRef = import_react.default.useRef(null);
   const virtualListRef = import_react.default.useRef();
@@ -72,15 +93,15 @@ const ChatContainerMessagesList = (props) => {
     scrollToIndex: vScroll,
     totalSize,
     virtualItems
-  } = (0, import_react_virtual.useVirtual)({
-    size: messages.length,
+  } = (0, import_react_virtual.useVirtual)(__spreadProps(__spreadValues({
+    size: messages?.length,
     parentRef: virtualListRef,
-    overscan: 15,
-    ...getPadding({ hasMoreItems, bannerPosition, isLoading }),
+    overscan: 15
+  }, getPadding({ hasMoreItems, bannerPosition, isLoading })), {
     estimateSize: import_react.default.useCallback(() => 80, [])
-  });
+  }));
+  const newMessages = (0, import_useGetNewMessages.useGetNewMessages)(messages);
   const debouncedScroll = import_react.default.useMemo(() => (0, import_lodash.debounce)(() => {
-    console.log("debound");
     if (document.visibilityState === "hidden") {
       pendingOnScroll.current = true;
       return [];
@@ -112,6 +133,10 @@ const ChatContainerMessagesList = (props) => {
     onlyFocus(index);
     onScrollStop();
   }, [onScrollStop, onlyFocus, vScroll]);
+  const checkPendingOnScroll = import_react.default.useCallback(() => {
+    if (pendingOnScroll.current === true)
+      onScrollStop();
+  }, [onScrollStop]);
   import_react.default.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.scrollToIndex = (a, b = { align: "center" }) => {
@@ -129,6 +154,26 @@ const ChatContainerMessagesList = (props) => {
       };
     }
   }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll]);
+  import_react.default.useEffect(() => {
+    let handlerCallback = null;
+    const localVirtualRef = virtualListRef.current;
+    const onScroll = () => {
+      if (handlerCallback)
+        clearTimeout(handlerCallback);
+      handlerCallback = setTimeout(onScrollStop, 300);
+    };
+    if (onScrollEnds) {
+      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, checkPendingOnScroll]);
   const handleKey = import_react.default.useCallback((e) => {
     const { key } = e;
     const index = Number(e.currentTarget.dataset.index);
@@ -144,7 +189,7 @@ const ChatContainerMessagesList = (props) => {
         break;
       case "ArrowDown":
         e.preventDefault();
-        if (index < messages.length - 1) {
+        if (index < messages?.length - 1) {
           virtualListRef.current.querySelector(`[data-index="${index + 1}"]`).focus();
         }
         break;
@@ -154,17 +199,19 @@ const ChatContainerMessagesList = (props) => {
         break;
       case "End":
         e.preventDefault();
-        scrollAndFocus(messages.length - 1);
+        scrollAndFocus(messages?.length - 1);
         break;
       case "Tab":
         if (hasMoreItems === "bottom" && !e.shiftKey) {
           e.preventDefault();
           loadMoreRef.current?.focus();
         } else if (hasMoreItems === "top" && e.shiftKey) {
+          e.preventDefault();
+          loadMoreRef.current?.focus();
         } else if (!e.shiftKey) {
           if (bannerPosition) {
             e.preventDefault();
-            bannerRef.current.focusOnWrapper();
+            bannerRef?.current?.focusOnWrapper();
           }
         } else {
           e.preventDefault();
@@ -174,14 +221,14 @@ const ChatContainerMessagesList = (props) => {
       default:
         break;
     }
-  }, [bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
+  }, [bannerRef, hasMoreItems, messages?.length, bannerPosition, scrollAndFocus]);
   const handleListKey = import_react.default.useCallback((e) => {
     const { key } = e;
     switch (key) {
       case "ArrowUp":
         e.preventDefault();
         if (document.activeElement !== loadMoreRef.current) {
-          onlyFocus(onScrollStop().shift());
+          onlyFocus(onScrollStop()?.shift());
         }
         break;
       case "ArrowDown":
@@ -189,7 +236,7 @@ const ChatContainerMessagesList = (props) => {
         if (document.activeElement === loadMoreRef.current) {
           virtualListRef.current.querySelector(`[data-index="0"]`).focus();
         } else {
-          onlyFocus(onScrollStop().pop());
+          onlyFocus(onScrollStop()?.pop());
         }
         break;
       case "Home":
@@ -198,16 +245,13 @@ const ChatContainerMessagesList = (props) => {
         break;
       case "End":
         e.preventDefault();
-        scrollAndFocus(messages.length - 1);
+        scrollAndFocus(messages?.length - 1);
         break;
       case "Tab":
         if (document.activeElement !== loadMoreRef.current) {
           if (hasMoreItems === "bottom" && !e.shiftKey) {
             e.preventDefault();
             loadMoreRef.current?.focus();
-          } else if (hasMoreItems === "top" && e.shiftKey) {
-            e.preventDefault();
-            loadMoreRef.current?.focus();
           } else if (!e.shiftKey) {
             e.preventDefault();
             actionRef.current.focusToComposer();
@@ -223,31 +267,7 @@ const ChatContainerMessagesList = (props) => {
       default:
         break;
     }
-  }, [actionRef, hasMoreItems, messages.length, onScrollStop, onlyFocus, scrollAndFocus]);
-  const checkPendingOnScroll = import_react.default.useCallback(() => {
-    if (pendingOnScroll.current === true)
-      onScrollStop();
-  }, [onScrollStop]);
-  import_react.default.useEffect(() => {
-    let handlerCallback = null;
-    const localVirtualRef = virtualListRef.current;
-    const onScroll = () => {
-      if (handlerCallback)
-        clearTimeout(handlerCallback);
-      handlerCallback = setTimeout(onScrollStop, 300);
-    };
-    if (onScrollEnds) {
-      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, checkPendingOnScroll]);
+  }, [actionRef, hasMoreItems, messages?.length, onScrollStop, onlyFocus, scrollAndFocus]);
   const render = import_react.default.useMemo(() => virtualItems.map((virtualItem) => {
     const { index, measureRef, start } = virtualItem;
     const row = messages[index];
@@ -270,20 +290,13 @@ const ChatContainerMessagesList = (props) => {
       role: "listitem"
     }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledWrapperListItem, {
       type: row.type
-    }, row.type === import_bubble.BUBBLE_TYPES.SENDER || row.type === import_bubble.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ import_react.default.createElement(import_bubble.ChatBubble, {
-      ...row,
+    }, row.type === import_bubble.BUBBLE_TYPES.SENDER || row.type === import_bubble.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ import_react.default.createElement(import_bubble.ChatBubble, __spreadProps(__spreadValues({}, row), {
       helpMessage: isSending ? sendingText : row.helpMessage
-    }) : null, row.type === import_bubble.BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ import_react.default.createElement(import_message_delimiter.MessageDelimiter, {
-      ...row
-    }) : null, row.type === import_bubble.BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ import_react.default.createElement(import_system_message.SystemMessage, {
-      ...row
-    }) : null));
+    })) : null, row.type === import_bubble.BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ import_react.default.createElement(import_message_delimiter.MessageDelimiter, __spreadValues({}, row)) : null, row.type === import_bubble.BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ import_react.default.createElement(import_system_message.SystemMessage, __spreadValues({}, row)) : null));
   }), [virtualItems, messages, sendingMessages, handleKey, sendingText]);
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledChatContainerContentList, {
+  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledWrapper, __spreadValues({}, globalAttributes), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
-    "aria-live": "polite",
-    "aria-relevant": "additions",
     ref: virtualListRef,
     role: "list",
     onKeyDown: handleListKey
@@ -297,11 +310,13 @@ const ChatContainerMessagesList = (props) => {
     onClick: getMoreMessages,
     "data-testid": "ds-chat-load-more-btn",
     innerRef: loadMoreRef
-  })) : null, render)));
+  })) : null, render)), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledNewMessagesHiddenContainer, {
+    "aria-live": "polite",
+    "aria-hidden": "false"
+  }, newMessages.map((newMessage) => /* @__PURE__ */ import_react.default.createElement("p", null, newMessage.title, " ", newMessage.time, " ", newMessage.body, " ", newMessage.errorMessage, " ", newMessage.helpMessage))));
 };
-ChatContainerMessagesList.propTypes = import_props.listProps;
-ChatContainerMessagesList.defaultProps = import_props.defaultProps;
-const ChatContainerMessagesListWithSchema = (0, import_react_desc.describe)(ChatContainerMessagesList);
-ChatContainerMessagesListWithSchema.propTypes = import_props.listProps;
+ChatContainerMessagesList.propTypes = import_react_desc_prop_types.ChatContainerMessagesListPropTypes;
+const ChatContainerMessagesListWithSchema = (0, import_ds_props_helpers.describe)(ChatContainerMessagesList);
+ChatContainerMessagesListWithSchema.propTypes = import_react_desc_prop_types.ChatContainerMessagesListPropTypes;
 module.exports = __toCommonJS(ChatContainerMessagesList_exports);
 //# sourceMappingURL=ChatContainerMessagesList.js.map