@elliemae/ds-chat 2.2.2 → 2.2.3-rc.2

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

@@ -17,7 +17,7 @@ const StyledChatContainerContentHeader = /*#__PURE__*/styled__default["default"]
 })(["width:100%;min-height:48px;border-bottom:1px solid ", ";background:", ";", "{& button{background:transparent;}}"], props => props.theme.colors.neutral['200'], props => props.theme.colors.neutral['050'], StyledChatContainerContentHeaderActions);
 const StyledChatContainerContentHeaderLabel = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-jmynvr-2"
-})(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";"], props => props.theme.colors.neutral['700']);
+})(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";line-height:1.6;"], props => props.theme.colors.neutral['700']);
 
 exports.StyledChatContainerContentHeader = StyledChatContainerContentHeader;
 exports.StyledChatContainerContentHeaderActions = StyledChatContainerContentHeaderActions;

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

@@ -26,6 +26,7 @@ var MessageDelimiter = require('../message-delimiter/MessageDelimiter.js');
 var SystemMessage = require('../system-message/SystemMessage.js');
 var styled = require('./styled.js');
 var props = require('./props.js');
+var useGetNewMessages = require('./useGetNewMessages.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -86,6 +87,7 @@ const ChatContainerMessagesList = props => {
   })), {}, {
     estimateSize: React__default["default"].useCallback(() => 80, [])
   }));
+  const newMessages = useGetNewMessages.useGetNewMessages(messages);
   const debouncedScroll = React__default["default"].useMemo(() => lodash.debounce(() => {
     var _virtualListRef$curre;
 
@@ -342,8 +344,6 @@ const ChatContainerMessagesList = props => {
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
-    "aria-live": "polite",
-    "aria-relevant": "additions",
     ref: virtualListRef,
     role: "list",
     onKeyDown: handleListKey,
@@ -358,7 +358,10 @@ const ChatContainerMessagesList = props => {
       "data-testid": "ds-chat-load-more-btn",
       innerRef: loadMoreRef
     })) : null, render)
-  }));
+  }), /*#__PURE__*/_jsx__default["default"](styled.StyledNewMessagesHiddenContainer, {
+    "aria-live": "polite",
+    "aria-hidden": "false"
+  }, void 0, newMessages.map(newMessage => /*#__PURE__*/_jsx__default["default"]("p", {}, void 0, newMessage.title, " ", newMessage.time, " ", newMessage.body, " ", newMessage.errorMessage, " ", newMessage.helpMessage))));
 };
 
 ChatContainerMessagesList.defaultProps = props.defaultProps;

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

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

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

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

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

@@ -9,6 +9,6 @@ const StyledChatContainerContentHeader = /*#__PURE__*/styled(Grid).withConfig({
 })(["width:100%;min-height:48px;border-bottom:1px solid ", ";background:", ";", "{& button{background:transparent;}}"], props => props.theme.colors.neutral['200'], props => props.theme.colors.neutral['050'], StyledChatContainerContentHeaderActions);
 const StyledChatContainerContentHeaderLabel = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-jmynvr-2"
-})(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";"], props => props.theme.colors.neutral['700']);
+})(["justify-content:center;align-items:center;font-weight:bold;font-size:18px;color:", ";line-height:1.6;"], props => props.theme.colors.neutral['700']);
 
 export { StyledChatContainerContentHeader, StyledChatContainerContentHeaderActions, StyledChatContainerContentHeaderLabel };

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

@@ -20,8 +20,9 @@ import { ChatBubble } from '../bubble/ChatBubble.js';
 import { BUBBLE_TYPES } from '../bubble/props.js';
 import { MessageDelimiter } from '../message-delimiter/MessageDelimiter.js';
 import { SystemMessage } from '../system-message/SystemMessage.js';
-import { ListItem, StyledWrapperListItem, StyledWrapper, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer } from './styled.js';
+import { ListItem, StyledWrapperListItem, StyledWrapper, StyledChatContainerContentList, StyledChatContainerContentListScroll, StyledLoadMoreContainer, StyledNewMessagesHiddenContainer } from './styled.js';
 import { listProps, defaultProps } from './props.js';
+import { useGetNewMessages } from './useGetNewMessages.js';
 import { jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -75,6 +76,7 @@ const ChatContainerMessagesList = props => {
   })), {}, {
     estimateSize: React.useCallback(() => 80, [])
   }));
+  const newMessages = useGetNewMessages(messages);
   const debouncedScroll = React.useMemo(() => debounce(() => {
     var _virtualListRef$curre;
 
@@ -331,8 +333,6 @@ const ChatContainerMessagesList = props => {
   return /*#__PURE__*/_jsx(StyledWrapper, {}, void 0, /*#__PURE__*/jsx(StyledChatContainerContentList, {
     "data-testid": "chat-thread-container",
     tabIndex: 0,
-    "aria-live": "polite",
-    "aria-relevant": "additions",
     ref: virtualListRef,
     role: "list",
     onKeyDown: handleListKey,
@@ -347,7 +347,10 @@ const ChatContainerMessagesList = props => {
       "data-testid": "ds-chat-load-more-btn",
       innerRef: loadMoreRef
     })) : null, render)
-  }));
+  }), /*#__PURE__*/_jsx(StyledNewMessagesHiddenContainer, {
+    "aria-live": "polite",
+    "aria-hidden": "false"
+  }, void 0, newMessages.map(newMessage => /*#__PURE__*/_jsx("p", {}, void 0, newMessage.title, " ", newMessage.time, " ", newMessage.body, " ", newMessage.errorMessage, " ", newMessage.helpMessage))));
 };
 
 ChatContainerMessagesList.defaultProps = defaultProps;

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

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

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

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

package/package.json

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

package/types/parts/chat-container-header/tests/ChatContainerHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

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