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

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

@@ -1,21 +1,47 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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));
 import * as React from "react";
 import React2 from "react";
-import { describe } from "react-desc";
+import {
+  useMemoMergePropsWithDefault,
+  useGetGlobalAttributes,
+  useValidateTypescriptPropTypes,
+  describe
+} from "@elliemae/ds-props-helpers";
 import { useVirtual } from "react-virtual";
 import DSButton from "@elliemae/ds-button";
 import { debounce } from "lodash";
-import { ChatBubble, BUBBLE_TYPES } from "../bubble";
-import { MessageDelimiter } from "../message-delimiter";
-import { SystemMessage } from "../system-message";
+import { ChatBubble, BUBBLE_TYPES } from "../../exported-related/bubble";
+import { MessageDelimiter } from "../../exported-related/message-delimiter";
+import { SystemMessage } from "../../exported-related/system-message";
 import {
   StyledWrapperListItem,
   StyledChatContainerContentList,
   StyledChatContainerContentListScroll,
   StyledWrapper,
   StyledLoadMoreContainer,
-  ListItem
+  ListItem,
+  StyledNewMessagesHiddenContainer
 } from "./styled";
-import { defaultProps, listProps } from "./props";
+import { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from "../../react-desc-prop-types";
+import { useGetNewMessages } from "./useGetNewMessages";
 const getPadding = ({ hasMoreItems, bannerPosition, isLoading }) => {
   const padding = {
     paddingStart: 0,
@@ -28,6 +54,9 @@ const getPadding = ({ hasMoreItems, bannerPosition, isLoading }) => {
   return padding;
 };
 const ChatContainerMessagesList = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsMessagesList);
+  useValidateTypescriptPropTypes(propsWithDefault, ChatContainerMessagesListPropTypes);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
   const {
     sendingText,
     bannerPosition,
@@ -39,7 +68,7 @@ const ChatContainerMessagesList = (props) => {
     hasMoreItems,
     isLoading,
     bannerRef
-  } = props;
+  } = propsWithDefault;
   const pendingOnScroll = React2.useRef(false);
   const loadMoreRef = React2.useRef(null);
   const virtualListRef = React2.useRef();
@@ -47,15 +76,15 @@ const ChatContainerMessagesList = (props) => {
     scrollToIndex: vScroll,
     totalSize,
     virtualItems
-  } = useVirtual({
-    size: messages.length,
+  } = useVirtual(__spreadProps(__spreadValues({
+    size: messages?.length,
     parentRef: virtualListRef,
-    overscan: 15,
-    ...getPadding({ hasMoreItems, bannerPosition, isLoading }),
+    overscan: 15
+  }, getPadding({ hasMoreItems, bannerPosition, isLoading })), {
     estimateSize: React2.useCallback(() => 80, [])
-  });
+  }));
+  const newMessages = useGetNewMessages(messages);
   const debouncedScroll = React2.useMemo(() => debounce(() => {
-    console.log("debound");
     if (document.visibilityState === "hidden") {
       pendingOnScroll.current = true;
       return [];
@@ -87,6 +116,10 @@ const ChatContainerMessagesList = (props) => {
     onlyFocus(index);
     onScrollStop();
   }, [onScrollStop, onlyFocus, vScroll]);
+  const checkPendingOnScroll = React2.useCallback(() => {
+    if (pendingOnScroll.current === true)
+      onScrollStop();
+  }, [onScrollStop]);
   React2.useEffect(() => {
     if (actionRef && actionRef.current) {
       actionRef.current.scrollToIndex = (a, b = { align: "center" }) => {
@@ -104,6 +137,26 @@ const ChatContainerMessagesList = (props) => {
       };
     }
   }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll]);
+  React2.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 = React2.useCallback((e) => {
     const { key } = e;
     const index = Number(e.currentTarget.dataset.index);
@@ -119,7 +172,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;
@@ -129,17 +182,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();
@@ -149,14 +204,14 @@ const ChatContainerMessagesList = (props) => {
       default:
         break;
     }
-  }, [bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus]);
+  }, [bannerRef, hasMoreItems, messages?.length, bannerPosition, scrollAndFocus]);
   const handleListKey = React2.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":
@@ -164,7 +219,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":
@@ -173,16 +228,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();
@@ -198,31 +250,7 @@ const ChatContainerMessagesList = (props) => {
       default:
         break;
     }
-  }, [actionRef, hasMoreItems, messages.length, onScrollStop, onlyFocus, scrollAndFocus]);
-  const checkPendingOnScroll = React2.useCallback(() => {
-    if (pendingOnScroll.current === true)
-      onScrollStop();
-  }, [onScrollStop]);
-  React2.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 = React2.useMemo(() => virtualItems.map((virtualItem) => {
     const { index, measureRef, start } = virtualItem;
     const row = messages[index];
@@ -245,20 +273,13 @@ const ChatContainerMessagesList = (props) => {
       role: "listitem"
     }, /* @__PURE__ */ React2.createElement(StyledWrapperListItem, {
       type: row.type
-    }, row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ React2.createElement(ChatBubble, {
-      ...row,
+    }, row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ React2.createElement(ChatBubble, __spreadProps(__spreadValues({}, row), {
       helpMessage: isSending ? sendingText : row.helpMessage
-    }) : null, row.type === BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ React2.createElement(MessageDelimiter, {
-      ...row
-    }) : null, row.type === BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ React2.createElement(SystemMessage, {
-      ...row
-    }) : null));
+    })) : null, row.type === BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ React2.createElement(MessageDelimiter, __spreadValues({}, row)) : null, row.type === BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ React2.createElement(SystemMessage, __spreadValues({}, row)) : null));
   }), [virtualItems, messages, sendingMessages, handleKey, sendingText]);
-  return /* @__PURE__ */ React2.createElement(StyledWrapper, null, /* @__PURE__ */ React2.createElement(StyledChatContainerContentList, {
+  return /* @__PURE__ */ React2.createElement(StyledWrapper, __spreadValues({}, globalAttributes), /* @__PURE__ */ React2.createElement(StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
-    "aria-live": "polite",
-    "aria-relevant": "additions",
     ref: virtualListRef,
     role: "list",
     onKeyDown: handleListKey
@@ -272,12 +293,14 @@ const ChatContainerMessagesList = (props) => {
     onClick: getMoreMessages,
     "data-testid": "ds-chat-load-more-btn",
     innerRef: loadMoreRef
-  })) : null, render)));
+  })) : null, render)), /* @__PURE__ */ React2.createElement(StyledNewMessagesHiddenContainer, {
+    "aria-live": "polite",
+    "aria-hidden": "false"
+  }, newMessages.map((newMessage) => /* @__PURE__ */ React2.createElement("p", null, newMessage.title, " ", newMessage.time, " ", newMessage.body, " ", newMessage.errorMessage, " ", newMessage.helpMessage))));
 };
-ChatContainerMessagesList.propTypes = listProps;
-ChatContainerMessagesList.defaultProps = defaultProps;
+ChatContainerMessagesList.propTypes = ChatContainerMessagesListPropTypes;
 const ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);
-ChatContainerMessagesListWithSchema.propTypes = listProps;
+ChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes;
 export {
   ChatContainerMessagesList,
   ChatContainerMessagesListWithSchema

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React, { CSSProperties } from 'react';\nimport { describe } from 'react-desc';\nimport { useVirtual } from 'react-virtual';\nimport DSButton from '@elliemae/ds-button';\nimport { debounce } from 'lodash';\nimport { ChatBubble, BUBBLE_TYPES } from '../bubble';\nimport { MessageDelimiter } from '../message-delimiter';\nimport { SystemMessage } from '../system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n} from './styled';\nimport { defaultProps, listProps, ChatContainerMessagesListProps } from './props';\nimport { useValidateProps } from './config/useValidateProps';\n\ntype getPaddingT = {\n  hasMoreItems: string | undefined;\n  bannerPosition: string | undefined;\n  isLoading: string | undefined;\n};\nconst getPadding = ({ hasMoreItems, bannerPosition, isLoading }: getPaddingT) => {\n  const padding = {\n    paddingStart: 0,\n    paddingEnd: -5,\n  };\n  if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'top')) padding.paddingStart = 42;\n  else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'bottom')) padding.paddingEnd = 42;\n  return padding;\n};\n\nconst ChatContainerMessagesList = (props: ChatContainerMessagesListProps): JSX.Element => {\n  const {\n    sendingText,\n    bannerPosition,\n    sendingMessages,\n    messages,\n    actionRef,\n    onScrollEnds,\n    getMoreMessages,\n    hasMoreItems,\n    isLoading,\n    bannerRef,\n  } = props;\n  const pendingOnScroll = React.useRef(false);\n  const loadMoreRef = React.useRef(null);\n  const virtualListRef = React.useRef<HTMLDivElement>();\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const {\n    scrollToIndex: vScroll,\n    totalSize,\n    virtualItems,\n  } = useVirtual({\n    size: messages.length,\n    parentRef: virtualListRef,\n    overscan: 15,\n    ...getPadding({ hasMoreItems, bannerPosition, isLoading }),\n    estimateSize: React.useCallback(() => 80, []),\n  });\n\n  const debouncedScroll = React.useMemo(\n    () =>\n      debounce((): number[] => {\n        console.log('debound');\n        if (document.visibilityState === 'hidden') {\n          pendingOnScroll.current = true;\n          return [];\n        }\n        if (!virtualListRef.current) return [];\n        pendingOnScroll.current = false;\n        const { bottom, top } = virtualListRef.current?.getBoundingClientRect();\n\n        const list = virtualListRef.current.querySelectorAll(\n          '[data-element=\"chat-element-list-item\"]',\n        ) as NodeListOf<HTMLDivElement>;\n        const indexList = [];\n        list.forEach((item: HTMLElement) => {\n          const { top: itemTop } = item.getBoundingClientRect();\n\n          const itemPadding = 10;\n          if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index);\n        });\n        if (onScrollEnds) onScrollEnds(indexList);\n        return indexList;\n      }, 500),\n    [onScrollEnds],\n  );\n\n  const onScrollStop = React.useCallback(debouncedScroll, [debouncedScroll]);\n\n  const onlyFocus = React.useCallback((index: number) => {\n    setTimeout(() => {\n      (virtualListRef.current.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement).focus();\n    }, 300);\n  }, []);\n\n  const scrollAndFocus = React.useCallback(\n    (index: number, b = { align: 'center' }) => {\n      vScroll(index, b);\n      onlyFocus(index);\n      onScrollStop();\n    },\n    [onScrollStop, onlyFocus, vScroll],\n  );\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.scrollToIndex = (a, b = { align: 'center' }) => {\n        vScroll(a, b as any);\n        onScrollStop();\n      };\n      actionRef.current.getMessagesInView = onScrollStop;\n      onScrollStop(); // init useMemo due to debounce use.\n      actionRef.current.focusToIndex = (a, b = { align: 'center' } as ScrollToOptions) => {\n        scrollAndFocus(a, b);\n      };\n      actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n      actionRef.current.focusToList = () => {\n        virtualListRef.current?.focus();\n      };\n    }\n  }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll]);\n\n  const handleKey = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key } = e;\n      const index = Number(e.currentTarget.dataset.index);\n      e.stopPropagation();\n      switch (key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          if (index > 0) {\n            (virtualListRef.current?.querySelector(`[data-index=\"${index - 1}\"]`) as HTMLDivElement).focus();\n          } else if (hasMoreItems === 'top') {\n            loadMoreRef.current?.focus();\n          }\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (index < messages.length - 1) {\n            (virtualListRef.current.querySelector(`[data-index=\"${index + 1}\"]`) as HTMLDivElement).focus();\n          }\n          break;\n        case 'Home':\n          e.preventDefault();\n          scrollAndFocus(0);\n          break;\n        case 'End':\n          e.preventDefault();\n          scrollAndFocus(messages.length - 1);\n          break;\n        case 'Tab':\n          if (hasMoreItems === 'bottom' && !e.shiftKey) {\n            e.preventDefault();\n            loadMoreRef.current?.focus();\n          } else if (hasMoreItems === 'top' && e.shiftKey) {\n            // e.preventDefault();\n            // loadMoreRef.current?.focus();\n          } else if (!e.shiftKey) {\n            if (bannerPosition) {\n              e.preventDefault();\n              bannerRef.current.focusOnWrapper();\n            }\n          } else {\n            e.preventDefault();\n            virtualListRef.current?.focus();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [bannerRef, hasMoreItems, messages.length, bannerPosition, scrollAndFocus],\n  );\n  const handleListKey = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key } = e;\n      switch (key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          if (document.activeElement !== loadMoreRef.current) {\n            onlyFocus(onScrollStop().shift());\n          }\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (document.activeElement === loadMoreRef.current) {\n            (virtualListRef.current.querySelector(`[data-index=\"0\"]`) as HTMLDivElement).focus();\n          } else {\n            onlyFocus(onScrollStop().pop());\n          }\n          break;\n        case 'Home':\n          e.preventDefault();\n          scrollAndFocus(0);\n          break;\n        case 'End':\n          e.preventDefault();\n          scrollAndFocus(messages.length - 1);\n          break;\n        case 'Tab':\n          if (document.activeElement !== loadMoreRef.current) {\n            if (hasMoreItems === 'bottom' && !e.shiftKey) {\n              e.preventDefault();\n              loadMoreRef.current?.focus();\n            } else if (hasMoreItems === 'top' && e.shiftKey) {\n              e.preventDefault();\n              loadMoreRef.current?.focus();\n            } else if (!e.shiftKey) {\n              e.preventDefault();\n              actionRef.current.focusToComposer();\n            }\n          } else if (!e.shiftKey) {\n            e.preventDefault();\n            actionRef.current.focusToComposer();\n          } else {\n            e.preventDefault();\n            virtualListRef.current?.focus();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [actionRef, hasMoreItems, messages.length, onScrollStop, onlyFocus, scrollAndFocus],\n  );\n\n  const checkPendingOnScroll = React.useCallback(() => {\n    if (pendingOnScroll.current === true) onScrollStop();\n  }, [onScrollStop]);\n\n  React.useEffect(() => {\n    let handlerCallback = null;\n    const localVirtualRef = virtualListRef.current;\n    const onScroll = () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      handlerCallback = setTimeout(onScrollStop, 300);\n    };\n    if (onScrollEnds) {\n      virtualListRef.current.addEventListener('scroll', onScroll);\n    }\n    document.addEventListener('visibilitychange', checkPendingOnScroll);\n    return () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);\n      document.removeEventListener('visibilitychange', checkPendingOnScroll);\n    };\n  }, [onScrollStop, onScrollEnds, checkPendingOnScroll]);\n\n  const render = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = messages[index];\n        const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n        const style: CSSProperties = {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          transform: `translateY(${start}px)`,\n          width: '100%',\n        };\n\n        return (\n          <ListItem\n            data-element=\"chat-element-list-item\"\n            data-index={index}\n            key={`ds-chat-bubble-${index}-${row.dsId}-${row.type}`}\n            style={style}\n            ref={measureRef}\n            tabIndex={-1}\n            onKeyDown={handleKey}\n            role=\"listitem\"\n          >\n            <StyledWrapperListItem type={row.type}>\n              {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n                // eslint-disable-next-line eslint-comments/no-unlimited-disable\n                <ChatBubble {...(row as any)} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? <MessageDelimiter {...(row as any)} /> : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...(row as any)} /> : null}\n            </StyledWrapperListItem>\n          </ListItem>\n        );\n      }),\n    [virtualItems, messages, sendingMessages, handleKey, sendingText],\n  );\n\n  return (\n    <StyledWrapper>\n      <StyledChatContainerContentList\n        data-testid=\"chat-thread-container\"\n        tabIndex={0}\n        aria-live=\"polite\"\n        aria-relevant=\"additions\"\n        ref={virtualListRef}\n        role=\"list\"\n        onKeyDown={handleListKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems}>\n              <DSButton\n                labelText=\"Load More\"\n                buttonType=\"secondary\"\n                onClick={getMoreMessages}\n                data-testid=\"ds-chat-load-more-btn\"\n                innerRef={loadMoreRef}\n              />\n            </StyledLoadMoreContainer>\n          ) : null}\n          {render}\n        </StyledChatContainerContentListScroll>\n      </StyledChatContainerContentList>\n    </StyledWrapper>\n  );\n};\n\nChatContainerMessagesList.propTypes = listProps;\nChatContainerMessagesList.defaultProps = defaultProps;\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = listProps;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React, { CSSProperties, WeakValidationMap } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useGetGlobalAttributes,\n  useValidateTypescriptPropTypes,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport DSButton from '@elliemae/ds-button';\nimport { debounce } from 'lodash';\nimport { ChatBubble, BUBBLE_TYPES } from '../../exported-related/bubble';\nimport { MessageDelimiter } from '../../exported-related/message-delimiter';\nimport { SystemMessage } from '../../exported-related/system-message';\nimport {\n  StyledWrapperListItem,\n  StyledChatContainerContentList,\n  StyledChatContainerContentListScroll,\n  StyledWrapper,\n  StyledLoadMoreContainer,\n  ListItem,\n  StyledNewMessagesHiddenContainer,\n} from './styled';\nimport { DSChatT, ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types';\nimport { useGetNewMessages } from './useGetNewMessages';\n\nconst getPadding = ({ hasMoreItems, bannerPosition, isLoading }: DSChatT.GetPaddingT) => {\n  const padding = {\n    paddingStart: 0,\n    paddingEnd: -5,\n  };\n  if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'top')) padding.paddingStart = 42;\n  else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'bottom')) padding.paddingEnd = 42;\n  return padding;\n};\nconst ChatContainerMessagesList: React.ComponentType<DSChatT.MessagesListProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.MessagesListProps>(props, defaultPropsMessagesList);\n  useValidateTypescriptPropTypes<DSChatT.MessagesListProps>(propsWithDefault, ChatContainerMessagesListPropTypes);\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n  const {\n    sendingText,\n    bannerPosition,\n    sendingMessages,\n    messages,\n    actionRef,\n    onScrollEnds,\n    getMoreMessages,\n    hasMoreItems,\n    isLoading,\n    bannerRef,\n  } = propsWithDefault;\n  const pendingOnScroll = React.useRef(false);\n  const loadMoreRef = React.useRef(null);\n  const virtualListRef = React.useRef<HTMLDivElement>();\n  // estimateSize should not be really required given what was stated on\n  // https://github.com/tannerlinsley/react-virtual/issues/23\n  const {\n    scrollToIndex: vScroll,\n    totalSize,\n    virtualItems,\n  } = useVirtual({\n    size: messages?.length,\n    parentRef: virtualListRef,\n    overscan: 15,\n    ...getPadding({ hasMoreItems, bannerPosition, isLoading }),\n    estimateSize: React.useCallback(() => 80, []),\n  });\n\n  const newMessages = useGetNewMessages(messages);\n\n  const debouncedScroll = React.useMemo(\n    () =>\n      debounce((): number[] => {\n        if (document.visibilityState === 'hidden') {\n          pendingOnScroll.current = true;\n          return [];\n        }\n        if (!virtualListRef.current) return [];\n        pendingOnScroll.current = false;\n        const { bottom, top } = virtualListRef.current?.getBoundingClientRect();\n\n        const list = virtualListRef.current.querySelectorAll(\n          '[data-element=\"chat-element-list-item\"]',\n        ) as NodeListOf<HTMLDivElement>;\n        const indexList = [];\n        list.forEach((item: HTMLElement) => {\n          const { top: itemTop } = item.getBoundingClientRect();\n\n          const itemPadding = 10;\n          if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index);\n        });\n        if (onScrollEnds) onScrollEnds(indexList);\n        return indexList;\n      }, 500),\n    [onScrollEnds],\n  );\n\n  const onScrollStop = React.useCallback(debouncedScroll, [debouncedScroll]);\n\n  const onlyFocus = React.useCallback((index?: number) => {\n    setTimeout(() => {\n      (virtualListRef.current.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement).focus();\n    }, 300);\n  }, []);\n\n  const scrollAndFocus = React.useCallback(\n    (index: number, b = { align: 'center' }) => {\n      vScroll(index, b);\n      onlyFocus(index);\n      onScrollStop();\n    },\n    [onScrollStop, onlyFocus, vScroll],\n  );\n\n  const checkPendingOnScroll = React.useCallback(() => {\n    if (pendingOnScroll.current === true) onScrollStop();\n  }, [onScrollStop]);\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.scrollToIndex = (a, b = { align: 'center' }) => {\n        vScroll(a, b as any);\n        onScrollStop();\n      };\n      actionRef.current.getMessagesInView = onScrollStop;\n      onScrollStop(); // init useMemo due to debounce use.\n      actionRef.current.focusToIndex = (a, b = { align: 'center' } as ScrollToOptions) => {\n        scrollAndFocus(a, b);\n      };\n      actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n      actionRef.current.focusToList = () => {\n        virtualListRef.current?.focus();\n      };\n    }\n  }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll]);\n\n  React.useEffect(() => {\n    let handlerCallback = null;\n    const localVirtualRef = virtualListRef.current;\n    const onScroll = () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      handlerCallback = setTimeout(onScrollStop, 300);\n    };\n    if (onScrollEnds) {\n      virtualListRef.current.addEventListener('scroll', onScroll);\n    }\n    document.addEventListener('visibilitychange', checkPendingOnScroll);\n    return () => {\n      if (handlerCallback) clearTimeout(handlerCallback);\n      if (onScrollEnds) localVirtualRef.removeEventListener('scroll', onScroll);\n      document.removeEventListener('visibilitychange', checkPendingOnScroll);\n    };\n  }, [onScrollStop, onScrollEnds, checkPendingOnScroll]);\n\n  const handleKey = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key } = e;\n      const index = Number(e.currentTarget.dataset.index);\n      e.stopPropagation();\n      switch (key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          if (index > 0) {\n            (virtualListRef.current?.querySelector(`[data-index=\"${index - 1}\"]`) as HTMLDivElement).focus();\n          } else if (hasMoreItems === 'top') {\n            loadMoreRef.current?.focus();\n          }\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (index < messages?.length - 1) {\n            (virtualListRef.current.querySelector(`[data-index=\"${index + 1}\"]`) as HTMLDivElement).focus();\n          }\n          break;\n        case 'Home':\n          e.preventDefault();\n          scrollAndFocus(0);\n          break;\n        case 'End':\n          e.preventDefault();\n          scrollAndFocus(messages?.length - 1);\n          break;\n        case 'Tab':\n          if (hasMoreItems === 'bottom' && !e.shiftKey) {\n            e.preventDefault();\n            loadMoreRef.current?.focus();\n          } else if (hasMoreItems === 'top' && e.shiftKey) {\n            e.preventDefault();\n            loadMoreRef.current?.focus();\n          } else if (!e.shiftKey) {\n            if (bannerPosition) {\n              e.preventDefault();\n              bannerRef?.current?.focusOnWrapper();\n            }\n          } else {\n            e.preventDefault();\n            virtualListRef.current?.focus();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [bannerRef, hasMoreItems, messages?.length, bannerPosition, scrollAndFocus],\n  );\n  const handleListKey = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      const { key } = e;\n      switch (key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          if (document.activeElement !== loadMoreRef.current) {\n            onlyFocus(onScrollStop()?.shift());\n          }\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (document.activeElement === loadMoreRef.current) {\n            (virtualListRef.current.querySelector(`[data-index=\"0\"]`) as HTMLDivElement).focus();\n          } else {\n            onlyFocus(onScrollStop()?.pop());\n          }\n          break;\n        case 'Home':\n          e.preventDefault();\n          scrollAndFocus(0);\n          break;\n        case 'End':\n          e.preventDefault();\n          scrollAndFocus(messages?.length - 1);\n          break;\n        case 'Tab':\n          if (document.activeElement !== loadMoreRef.current) {\n            if (hasMoreItems === 'bottom' && !e.shiftKey) {\n              e.preventDefault();\n              loadMoreRef.current?.focus();\n            } else if (!e.shiftKey) {\n              e.preventDefault();\n              actionRef.current.focusToComposer();\n            }\n          } else if (!e.shiftKey) {\n            e.preventDefault();\n            actionRef.current.focusToComposer();\n          } else {\n            e.preventDefault();\n            virtualListRef.current?.focus();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [actionRef, hasMoreItems, messages?.length, onScrollStop, onlyFocus, scrollAndFocus],\n  );\n\n  const render = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = messages[index];\n        const isSending = sendingMessages && sendingMessages.find((m) => m === row.dsId);\n        const style: CSSProperties = {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          transform: `translateY(${start}px)`,\n          width: '100%',\n        };\n\n        return (\n          <ListItem\n            data-element=\"chat-element-list-item\"\n            data-index={index}\n            key={`ds-chat-bubble-${index}-${row.dsId}-${row.type}`}\n            style={style}\n            ref={measureRef}\n            tabIndex={-1}\n            onKeyDown={handleKey}\n            role=\"listitem\"\n          >\n            <StyledWrapperListItem type={row.type}>\n              {row.type === BUBBLE_TYPES.SENDER || row.type === BUBBLE_TYPES.RECIPIENT ? (\n                // eslint-disable-next-line eslint-comments/no-unlimited-disable\n                <ChatBubble {...row} helpMessage={isSending ? sendingText : row.helpMessage} />\n              ) : null}\n              {row.type === BUBBLE_TYPES.DELIMITER ? <MessageDelimiter {...row} /> : null}\n              {row.type === BUBBLE_TYPES.SYSTEM ? <SystemMessage {...row} /> : null}\n            </StyledWrapperListItem>\n          </ListItem>\n        );\n      }),\n    [virtualItems, messages, sendingMessages, handleKey, sendingText],\n  );\n\n  return (\n    <StyledWrapper {...globalAttributes}>\n      <StyledChatContainerContentList\n        data-testid=\"chat-thread-container\"\n        tabIndex={0}\n        ref={virtualListRef as React.RefObject<HTMLDivElement>}\n        role=\"list\"\n        onKeyDown={handleListKey}\n      >\n        <StyledChatContainerContentListScroll height={`${totalSize}px`}>\n          {!isLoading && hasMoreItems ? (\n            <StyledLoadMoreContainer hasMoreItems={hasMoreItems}>\n              <DSButton\n                labelText=\"Load More\"\n                buttonType=\"secondary\"\n                onClick={getMoreMessages}\n                data-testid=\"ds-chat-load-more-btn\"\n                innerRef={loadMoreRef}\n              />\n            </StyledLoadMoreContainer>\n          ) : null}\n          {render}\n        </StyledChatContainerContentListScroll>\n      </StyledChatContainerContentList>\n      {/* We repeat the render with the new available messages */}\n      <StyledNewMessagesHiddenContainer aria-live=\"polite\" aria-hidden=\"false\">\n        {newMessages.map((newMessage) => (\n          <p>\n            {newMessage.title} {newMessage.time} {newMessage.body} {newMessage.errorMessage} {newMessage.helpMessage}\n          </p>\n        ))}\n      </StyledNewMessagesHiddenContainer>\n    </StyledWrapper>\n  );\n};\n\nChatContainerMessagesList.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\nconst ChatContainerMessagesListWithSchema = describe(ChatContainerMessagesList);\nChatContainerMessagesListWithSchema.propTypes = ChatContainerMessagesListPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainerMessagesList, ChatContainerMessagesListWithSchema };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/chat-container-messages-list/index.js

@@ -1,8 +1,5 @@
 import * as React from "react";
-import {
-  ChatContainerMessagesList,
-  ChatContainerMessagesListWithSchema
-} from "./ChatContainerMessagesList";
+import { ChatContainerMessagesList, ChatContainerMessagesListWithSchema } from "./ChatContainerMessagesList";
 export {
   ChatContainerMessagesList,
   ChatContainerMessagesListWithSchema

package/dist/esm/parts/chat-container-messages-list/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n  ChatContainerMessagesList,\n  ChatContainerMessagesListWithSchema,\n} from './ChatContainerMessagesList';\n"],
-  "mappings": "AAAA;ACAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatContainerMessagesList, ChatContainerMessagesListWithSchema } from './ChatContainerMessagesList';\n"],
+  "mappings": "AAAA;ACAA;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
-import { BUBBLE_TYPES } from "../bubble/index";
+import { BUBBLE_TYPES } from "../../exported-related/bubble/index";
 const StyledWrapper = styled.div`
   width: 100%;
   height: 100%;
@@ -23,6 +23,18 @@ const StyledChatContainerContentList = styled.div`
   overflow-y: auto;
   overflow-x: hidden;
 `;
+const StyledNewMessagesHiddenContainer = styled.div`
+  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 = styled.div`
   width: 100%;
   height: ${(props) => props.height};
@@ -65,6 +77,7 @@ export {
   StyledChatContainerContentList,
   StyledChatContainerContentListScroll,
   StyledLoadMoreContainer,
+  StyledNewMessagesHiddenContainer,
   StyledWrapper,
   StyledWrapperListItem
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/styled.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { BUBBLE_TYPES } from '../bubble/index';\nimport { BubbleProps } from '../bubble/props';\n\nexport const StyledWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\n// list\nexport const StyledWrapperListItem = styled.div<Partial<BubbleProps>>`\n  min-width: 100%;\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SENDER &&\n    `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} ${props.theme.space.xxs} 13%\n  `};\n  ${(props) =>\n    props.type === BUBBLE_TYPES.RECIPIENT &&\n    `padding: ${props.theme.space.xxs} 13% ${props.theme.space.xxs}\n    ${props.theme.space.xxs}\n  `};\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SYSTEM &&\n    `padding: ${props.theme.space.xxs} 0px\n  `};\n`;\n\nexport const StyledChatContainerContentList = styled.div`\n  width: 100%;\n  height: 100%;\n  padding: ${(props) => props.theme.space.xs};\n  padding-bottom: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n`;\nexport const StyledChatContainerContentListScroll = styled.div<{ height: string }>`\n  width: 100%;\n  height: ${(props) => props.height};\n  position: relative;\n`;\n\nexport const StyledLoadMoreContainer = styled.div<{ hasMoreItems?: 'top' | 'bottom' }>`\n  position: absolute;\n  width: calc(100% + ${(props) => props.theme.space.xxs});\n  padding: ${(props) => props.theme.space.xxs};\n  left: -${(props) => props.theme.space.xxs};\n  right: -${(props) => props.theme.space.xxs};\n  display: grid;\n  justify-content: center;\n  align-items: center;\n  ${(props) => (props.hasMoreItems === 'top' ? 'top: 0;' : '')}\n  ${(props) => (props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '')}\n`;\nexport const ListItem = styled.div`\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: -${(props) => props.theme.space.xxs};\n      pointer-events: none;\n      border-radius: 2px;\n      background-color: #ebedf0;\n      width: calc(100% + 24px);\n      border: 2px solid #1e79c2;\n      height: 100%;\n      z-index: -1;\n    }\n  }\n`;\n"],
-  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA;AAAA,IAEhF,CAAC,UACD,MAAM,SAAS,aAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,WAAW,MAAM,MAAM,MAAM;AAAA,MACzD,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpB,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM;AAAA;AAAA;AAI3B,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAKnC,MAAM,uCAAuC,OAAO;AAAA;AAAA,YAE/C,CAAC,UAAU,MAAM;AAAA;AAAA;AAItB,MAAM,0BAA0B,OAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aACvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAIrC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY;AAAA,IACvD,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe;AAAA;AAE1D,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { BUBBLE_TYPES } from '../../exported-related/bubble/index';\nimport { BubbleProps } from '../../exported-related/bubble/props';\n\nexport const StyledWrapper = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\n// list\nexport const StyledWrapperListItem = styled.div<Partial<BubbleProps>>`\n  min-width: 100%;\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SENDER &&\n    `padding: ${props.theme.space.xxs} ${props.theme.space.xxs} ${props.theme.space.xxs} 13%\n  `};\n  ${(props) =>\n    props.type === BUBBLE_TYPES.RECIPIENT &&\n    `padding: ${props.theme.space.xxs} 13% ${props.theme.space.xxs}\n    ${props.theme.space.xxs}\n  `};\n  ${(props) =>\n    props.type === BUBBLE_TYPES.SYSTEM &&\n    `padding: ${props.theme.space.xxs} 0px\n  `};\n`;\n\nexport const StyledChatContainerContentList = styled.div`\n  width: 100%;\n  height: 100%;\n  padding: ${(props) => props.theme.space.xs};\n  padding-bottom: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n`;\n\nexport const StyledNewMessagesHiddenContainer = styled.div`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\nexport const StyledChatContainerContentListScroll = styled.div<{ height: string }>`\n  width: 100%;\n  height: ${(props) => props.height};\n  position: relative;\n`;\n\nexport const StyledLoadMoreContainer = styled.div<{ hasMoreItems?: 'top' | 'bottom' }>`\n  position: absolute;\n  width: calc(100% + ${(props) => props.theme.space.xxs});\n  padding: ${(props) => props.theme.space.xxs};\n  left: -${(props) => props.theme.space.xxs};\n  right: -${(props) => props.theme.space.xxs};\n  display: grid;\n  justify-content: center;\n  align-items: center;\n  ${(props) => (props.hasMoreItems === 'top' ? 'top: 0;' : '')}\n  ${(props) => (props.hasMoreItems === 'bottom' ? 'bottom: 0;' : '')}\n`;\nexport const ListItem = styled.div`\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: -${(props) => props.theme.space.xxs};\n      pointer-events: none;\n      border-radius: 2px;\n      background-color: #ebedf0;\n      width: calc(100% + 24px);\n      border: 2px solid #1e79c2;\n      height: 100%;\n      z-index: -1;\n    }\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAM7B,MAAM,wBAAwB,OAAO;AAAA;AAAA,IAExC,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;AAAA;AAAA,IAEhF,CAAC,UACD,MAAM,SAAS,aAAa,aAC5B,YAAY,MAAM,MAAM,MAAM,WAAW,MAAM,MAAM,MAAM;AAAA,MACzD,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpB,CAAC,UACD,MAAM,SAAS,aAAa,UAC5B,YAAY,MAAM,MAAM,MAAM;AAAA;AAAA;AAI3B,MAAM,iCAAiC,OAAO;AAAA;AAAA;AAAA,aAGxC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,mCAAmC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAahD,MAAM,uCAAuC,OAAO;AAAA;AAAA,YAE/C,CAAC,UAAU,MAAM;AAAA;AAAA;AAItB,MAAM,0BAA0B,OAAO;AAAA;AAAA,uBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,aACvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,YAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAIrC,CAAC,UAAW,MAAM,iBAAiB,QAAQ,YAAY;AAAA,IACvD,CAAC,UAAW,MAAM,iBAAiB,WAAW,eAAe;AAAA;AAE1D,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { useMemo, useState } 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;
+  }, [messages]);
+  return newMessages;
+};
+export {
+  useGetNewMessages
+};
+//# sourceMappingURL=useGetNewMessages.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useGetNewMessages.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState } from 'react';\nimport { BubbleProps } from '../bubble/props';\n\nexport const useGetNewMessages = (messages: BubbleProps[]) => {\n  const [seenMessages, setSeenMessages] = useState<Record<BubbleProps['dsId'], true>>({});\n\n  const newMessages = useMemo(() => {\n    const list: BubbleProps[] = [];\n    messages.forEach((message) => {\n      if (!(message.dsId in seenMessages)) {\n        list.push(message);\n      }\n    });\n    setSeenMessages(Object.fromEntries(messages.map((m) => [m.dsId, true])));\n    return list;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messages]);\n\n  return newMessages;\n};\n"],
+  "mappings": "AAAA;ACAA;AAGO,MAAM,oBAAoB,CAAC,aAA4B;AAC5D,QAAM,CAAC,cAAc,mBAAmB,SAA4C;AAEpF,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,OAAsB;AAC5B,aAAS,QAAQ,CAAC,YAAY;AAC5B,UAAI,CAAE,SAAQ,QAAQ,eAAe;AACnC,aAAK,KAAK;AAAA;AAAA;AAGd,oBAAgB,OAAO,YAAY,SAAS,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM;AAChE,WAAO;AAAA,KAEN,CAAC;AAEJ,SAAO;AAAA;",
+  "names": []
+}

package/dist/esm/parts/index.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+export * from "./chat-composer/ChatContainerComposer";
+export * from "./chat-container/ChatContainer";
+export * from "./chat-container-messages-list/ChatContainerMessagesList";
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './chat-composer/ChatContainerComposer';\nexport * from './chat-container/ChatContainer';\nexport * from './chat-container-messages-list/ChatContainerMessagesList';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;",
+  "names": []
+}