npm - @pega/cosmos-react-social - Versions diffs - 4.0.0-dev.12.1 → 4.0.0-dev.14.0 - Mend

@pega/cosmos-react-social 4.0.0-dev.12.1 → 4.0.0-dev.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/lib/components/Chat/ChatBody.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatBody.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,~~EAUb~~,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAGL,aAAa,EAKd,MAAM,cAAc,CAAC;AAQtB,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAuH7D,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,~~CA0Q7D~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"ChatBody.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAGL,aAAa,EAKd,MAAM,cAAc,CAAC;AAQtB,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAuH7D,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA2R7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Chat/ChatBody.js CHANGED Viewed

@@ -1,8 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useRef, useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, debounce, defaultThemeProp, Flex, getFocusables, Icon, Progress, registerIcon, StyledButton, useArrows, useI18n, useItemIntersection, useOuterEvent } from '@pega/cosmos-react-core';
+import { Button, debounce, defaultThemeProp, Flex, getFocusables, Icon, Progress, registerIcon, StyledButton, useAfterInitialEffect, useArrows, useI18n, useItemIntersection, useLiveLog, useOuterEvent } from '@pega/cosmos-react-core';
 import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
 import { isMessageListItem, isSystemMessageListItem, isTypeIndicatorListItem } from './Chat.types';
 import Message from './Message';
@@ -61,7 +61,7 @@ const ScrollToLatest = props => {
                 scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;
         }
     });
-    return _jsx(_Fragment, {});
+    return null;
 };
 const ChatMessage = ({ agentSerial, message }) => {
     const getAgentVariant = (senderId, senderType, direction = 'in') => {
@@ -110,6 +110,7 @@ const ChatBody = forwardRef((props, ref) => {
     const agentSerial = useRef({});
     const [messageList, setMessageList] = useState([]);
     const [verticalNav, setVerticalNav] = useState(true);
+    const { announcePolite } = useLiveLog();
     const isScrolledToLatest = useCallback(() => {
         return conversationRef.current
             ? conversationRef.current.scrollHeight -
@@ -211,6 +212,18 @@ const ChatBody = forwardRef((props, ref) => {
     useOuterEvent('mousedown', [conversationRef], () => {
         focusInMessageList.current = false;
     });
+    useAfterInitialEffect(() => {
+        if (liveChat?.length > 0) {
+            const unreadMessage = liveChat[liveChat.length - 1];
+            if (isSystemMessageListItem(unreadMessage) ||
+                (isMessageListItem(unreadMessage) && unreadMessage.direction === 'in')) {
+                announcePolite({
+                    message: t('new_message'),
+                    type: 'alert'
+                });
+            }
+        }
+    }, [liveChat]);
     return (_jsxs(_Fragment, { children: [_jsxs(Flex, { ...restProps, as: StyledChatBody, item: {
                     grow: 1
                 }, container: {

package/lib/components/Chat/ChatBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatBody.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n PropsWithoutRef,\n RefObject,\n useCallback,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n debounce,\n defaultThemeProp,\n Flex,\n ForwardProps,\n getFocusables,\n Icon,\n Progress,\n registerIcon,\n StyledButton,\n useArrows,\n useI18n,\n useItemIntersection,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport {\n ChatBodyHandleValue,\n ChatBodyListItemProps,\n ChatBodyProps,\n isMessageListItem,\n isSystemMessageListItem,\n isTypeIndicatorListItem,\n MessageProps\n} from './Chat.types';\nimport Message from './Message';\nimport SystemMessage, { StyledSystemMessage } from './SystemMessage';\nimport TypeIndicator from './TypeIndicator';\nimport { StyledMessageContainer } from './Message.styles';\n\nregisterIcon(caretDownIcon);\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageList = styled.ul``;\nconst StyledSession = styled.div``;\n\nconst StyledChatBody = styled.div(props => {\n const {\n theme: {\n base: {\n shadow: { high: shadowHigh, focus },\n colors: { white },\n spacing,\n palette\n }\n }\n } = props;\n return css`\n position: relative;\n overflow-y: hidden;\n\n > ${StyledButton} {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: ${shadowHigh};\n z-index: 1;\n background-color: ${white};\n }\n\n > ${StyledMessageList} {\n overflow-y: auto;\n list-style-type: none;\n height: 100%;\n\n > ${StyledSession} {\n padding-inline: 1rem;\n :not(:last-child) {\n border-block-end: 0.0625rem solid ${palette['border-line']};\n margin-block-end: ${spacing};\n padding-block-end: ${spacing};\n }\n }\n ${StyledMessageContainer}, ${StyledSystemMessage} {\n &:focus-visible {\n box-shadow: ${focus};\n outline: none;\n }\n margin-block-end: ${spacing};\n }\n }\n `;\n});\n\nStyledChatBody.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n const { scrollContainerRef } = props;\n useLayoutEffect(() => {\n if (scrollContainerRef.current) {\n scrollContainerRef.current.scrollTop =\n scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n }\n });\n return <></>;\n};\n\ninterface ChatMessageProps {\n message: ChatBodyListItemProps;\n agentSerial: RefObject<{ [agentId: string]: number }>;\n}\n\nconst ChatMessage: FunctionComponent<ChatMessageProps> = ({ agentSerial, message }) => {\n const getAgentVariant = (\n senderId: MessageProps['senderId'],\n senderType: MessageProps['senderType'],\n direction: MessageProps['direction'] = 'in'\n ) => {\n if (agentSerial.current === null) return undefined;\n if (senderType === 'agent' && direction === 'in') {\n if (agentSerial.current[senderId] !== undefined) {\n return agentSerial.current[senderId];\n }\n\n const nextIndex = Object.entries(agentSerial.current).length;\n agentSerial.current[senderId] = nextIndex;\n return nextIndex;\n }\n return undefined;\n };\n\n if (isMessageListItem(message)) {\n const { id, senderType, direction, senderId } = message;\n const agentVariant = getAgentVariant(senderId, senderType, direction);\n return <Message {...message} key={id} agentVariant={agentVariant} />;\n }\n\n if (isSystemMessageListItem(message)) {\n const extraProps: Record<string, string> = {};\n const { id } = message;\n if (id === NewMessageSeparatorId) {\n extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n }\n\n return <SystemMessage {...message} key={id} {...extraProps} />;\n }\n\n if (isTypeIndicatorListItem(message)) {\n const { id, senderId, senderType } = message;\n const agentVariant = getAgentVariant(senderId, senderType);\n\n return <TypeIndicator {...message} key={id} agentVariant={agentVariant} />;\n }\n\n return null;\n};\n\nconst ChatBody: FunctionComponent<ChatBodyProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ChatBodyProps>, ref: ChatBodyProps['ref']) => {\n const {\n transcripts,\n liveChat,\n unreadMessageCount = 0,\n onScrollToButtonClick,\n handle,\n loading,\n offset = -1,\n loadMore,\n ...restProps\n } = props;\n\n const t = useI18n();\n const conversationRef = useRef<HTMLUListElement>(null);\n const scrollRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const focusInMessageList = useRef(false);\n const initialMessageListFocused = useRef(false);\n const elementRef = useRef<HTMLElement \| null>(null);\n const activeElementIndex = useRef(-1);\n const agentSerial = useRef<{ [agentId: string]: number }>({});\n\n const [messageList, setMessageList] = useState<(HTMLLIElement \| null)[]>([]);\n const [verticalNav, setVerticalNav] = useState(true);\n\n const isScrolledToLatest: ChatBodyHandleValue['isScrolledToLatest'] = useCallback(() => {\n return conversationRef.current\n ? conversationRef.current.scrollHeight -\n conversationRef.current.scrollTop -\n conversationRef.current.offsetHeight <=\n 30\n : true;\n }, [conversationRef.current]);\n\n const scrollToLatestMessage: ChatBodyHandleValue['scrollToLatestMessage'] = useCallback(() => {\n if (conversationRef.current) {\n conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n focusInMessageList.current = true;\n messageList[messageList.length - 1]?.focus();\n activeElementIndex.current = messageList.length - 1;\n }\n }, [conversationRef.current, messageList]);\n\n const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n const onMessageListScroll = useCallback(() => {\n const isScrolled = isScrolledToLatest();\n if (scrollRef.current && isScrolled) {\n scrollRef.current = false;\n if (unreadMessageCount) {\n onScrollToButtonClick?.();\n }\n }\n\n if (!scrollRef.current && !isScrolled) {\n scrollRef.current = true;\n }\n\n setDisplayScrollToLatest(!isScrolled);\n }, [isScrolledToLatest(), unreadMessageCount]);\n\n const scrollToNewMessage: ChatBodyHandleValue['scrollToNewMessage'] = useCallback(() => {\n if (conversationRef.current) {\n setDisplayScrollToLatest(false);\n const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n '[data-new-message-separator]'\n );\n if (\n newMessageIndicatorEle &&\n newMessageIndicatorEle.nextElementSibling instanceof HTMLElement\n ) {\n conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n focusInMessageList.current = true;\n newMessageIndicatorEle.nextElementSibling.focus();\n activeElementIndex.current =\n messageList.findIndex(item => item?.hasAttribute('data-new-message-separator')) + 1;\n } else {\n scrollToLatestMessage();\n }\n }\n }, [conversationRef.current, messageList]);\n\n useImperativeHandle(\n handle,\n () => ({\n isScrolledToLatest,\n scrollToLatestMessage,\n scrollToNewMessage\n }),\n [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n );\n\n useItemIntersection(\n conversationRef,\n offset,\n () => {\n loadMore?.();\n },\n ':scope > div > li'\n );\n\n useEffect(() => {\n const focusableElements = conversationRef.current?.querySelectorAll<HTMLLIElement>(\n 'li[type=\"system\"],li[type=\"message\"],li[type=\"typing\"]'\n );\n\n if (focusableElements) setMessageList(Array.from(focusableElements));\n\n if (focusableElements && initialMessageListFocused.current === false) {\n activeElementIndex.current = focusableElements.length - 1;\n }\n }, [transcripts, liveChat]);\n\n useEffect(() => {\n elementRef.current = messageList[activeElementIndex.current];\n if (verticalNav) {\n elementRef.current?.focus();\n } else {\n getFocusables(elementRef)[0]?.focus();\n }\n }, [verticalNav]);\n\n useArrows(\n conversationRef,\n {\n cycle: true,\n selector: ':scope > div > li',\n dir: 'up-down',\n allowTabFocus: true\n },\n [transcripts, liveChat]\n );\n\n useArrows(\n elementRef,\n {\n cycle: true,\n selector: 'a, button, input, textarea, select, details',\n dir: 'left-right',\n allowTabFocus: true\n },\n [transcripts, liveChat, verticalNav]\n );\n\n const focusSiblingElement = (currentElement: Element, isShiftKey = false) => {\n elementRef.current = currentElement as HTMLElement;\n const focusableElements = getFocusables(elementRef);\n if (focusableElements?.length > 0) {\n focusableElements?.[isShiftKey ? focusableElements.length - 1 : 0].focus();\n } else {\n const element = isShiftKey\n ? elementRef.current?.previousElementSibling\n : elementRef.current?.nextElementSibling;\n\n if (element) focusSiblingElement(element, isShiftKey);\n }\n };\n\n useOuterEvent('mousedown', [conversationRef], () => {\n focusInMessageList.current = false;\n });\n\n return (\n <>\n <Flex\n {...restProps}\n as={StyledChatBody}\n item={{\n grow: 1\n }}\n container={{\n direction: 'column'\n }}\n ref={ref}\n >\n <StyledMessageList\n ref={conversationRef}\n onScroll={debounce(onMessageListScroll, 100)}\n onFocus={() => {\n if (!focusInMessageList.current) {\n initialMessageListFocused.current = true;\n elementRef.current = messageList[activeElementIndex.current];\n elementRef.current?.focus();\n focusInMessageList.current = true;\n }\n }}\n onKeyDown={e => {\n if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n elementRef.current = messageList[activeElementIndex.current];\n if (getFocusables(elementRef).length > 0) {\n setVerticalNav(false);\n }\n } else if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n if (e.key === 'ArrowUp') {\n activeElementIndex.current =\n activeElementIndex.current === 0\n ? messageList.length - 1\n : activeElementIndex.current - 1;\n } else {\n activeElementIndex.current =\n activeElementIndex.current === messageList.length - 1\n ? 0\n : activeElementIndex.current + 1;\n }\n setVerticalNav(true);\n } else if (e.key === 'Tab') {\n e.preventDefault();\n focusInMessageList.current = false;\n if (e.shiftKey) {\n const prevElement =\n conversationRef?.current?.parentElement?.previousElementSibling;\n if (prevElement) focusSiblingElement(prevElement, true);\n } else if (unreadMessageCount > 0 \|\| displayScrollLatest) {\n buttonRef?.current?.focus();\n } else {\n const nextElement = conversationRef.current?.parentElement?.nextElementSibling;\n if (nextElement) focusSiblingElement(nextElement);\n }\n }\n }}\n >\n {loading && <Progress as='li' placement='block' />}\n {transcripts.map(session => {\n return (\n <StyledSession key={session.id}>\n {session.messages.map(message => (\n <ChatMessage message={message} agentSerial={agentSerial} key={message.id} />\n ))}\n </StyledSession>\n );\n })}\n <StyledSession>\n {liveChat.map(message => (\n <ChatMessage message={message} agentSerial={agentSerial} key={message.id} />\n ))}\n </StyledSession>\n </StyledMessageList>\n {(unreadMessageCount > 0 \|\| displayScrollLatest) && (\n <Button\n aria-label={\n unreadMessageCount > 0\n ? t('scroll_to_unread_messages')\n : t('scroll_to_latest_message')\n }\n onClick={() => {\n if (unreadMessageCount > 0) {\n scrollToNewMessage();\n } else {\n scrollToLatestMessage();\n }\n onScrollToButtonClick?.();\n }}\n icon={unreadMessageCount === 0}\n ref={buttonRef}\n >\n <Icon name='caret-down' />\n {unreadMessageCount > 0 && <>  {t('new_messages')}</>}\n </Button>\n )}\n </Flex>\n {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n </>\n );\n }\n);\n\nexport default ChatBody;\n"]}
1	+ {"version":3,"file":"ChatBody.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n PropsWithoutRef,\n RefObject,\n useCallback,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n debounce,\n defaultThemeProp,\n Flex,\n ForwardProps,\n getFocusables,\n Icon,\n Progress,\n registerIcon,\n StyledButton,\n useAfterInitialEffect,\n useArrows,\n useI18n,\n useItemIntersection,\n useLiveLog,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport {\n ChatBodyHandleValue,\n ChatBodyListItemProps,\n ChatBodyProps,\n isMessageListItem,\n isSystemMessageListItem,\n isTypeIndicatorListItem,\n MessageProps\n} from './Chat.types';\nimport Message from './Message';\nimport SystemMessage, { StyledSystemMessage } from './SystemMessage';\nimport TypeIndicator from './TypeIndicator';\nimport { StyledMessageContainer } from './Message.styles';\n\nregisterIcon(caretDownIcon);\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageList = styled.ul``;\nconst StyledSession = styled.div``;\n\nconst StyledChatBody = styled.div(props => {\n const {\n theme: {\n base: {\n shadow: { high: shadowHigh, focus },\n colors: { white },\n spacing,\n palette\n }\n }\n } = props;\n return css`\n position: relative;\n overflow-y: hidden;\n\n > ${StyledButton} {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: ${shadowHigh};\n z-index: 1;\n background-color: ${white};\n }\n\n > ${StyledMessageList} {\n overflow-y: auto;\n list-style-type: none;\n height: 100%;\n\n > ${StyledSession} {\n padding-inline: 1rem;\n :not(:last-child) {\n border-block-end: 0.0625rem solid ${palette['border-line']};\n margin-block-end: ${spacing};\n padding-block-end: ${spacing};\n }\n }\n ${StyledMessageContainer}, ${StyledSystemMessage} {\n &:focus-visible {\n box-shadow: ${focus};\n outline: none;\n }\n margin-block-end: ${spacing};\n }\n }\n `;\n});\n\nStyledChatBody.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n const { scrollContainerRef } = props;\n useLayoutEffect(() => {\n if (scrollContainerRef.current) {\n scrollContainerRef.current.scrollTop =\n scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n }\n });\n return null;\n};\n\ninterface ChatMessageProps {\n message: ChatBodyListItemProps;\n agentSerial: RefObject<{ [agentId: string]: number }>;\n}\n\nconst ChatMessage: FunctionComponent<ChatMessageProps> = ({ agentSerial, message }) => {\n const getAgentVariant = (\n senderId: MessageProps['senderId'],\n senderType: MessageProps['senderType'],\n direction: MessageProps['direction'] = 'in'\n ) => {\n if (agentSerial.current === null) return undefined;\n if (senderType === 'agent' && direction === 'in') {\n if (agentSerial.current[senderId] !== undefined) {\n return agentSerial.current[senderId];\n }\n\n const nextIndex = Object.entries(agentSerial.current).length;\n agentSerial.current[senderId] = nextIndex;\n return nextIndex;\n }\n return undefined;\n };\n\n if (isMessageListItem(message)) {\n const { id, senderType, direction, senderId } = message;\n const agentVariant = getAgentVariant(senderId, senderType, direction);\n return <Message {...message} key={id} agentVariant={agentVariant} />;\n }\n\n if (isSystemMessageListItem(message)) {\n const extraProps: Record<string, string> = {};\n const { id } = message;\n if (id === NewMessageSeparatorId) {\n extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n }\n\n return <SystemMessage {...message} key={id} {...extraProps} />;\n }\n\n if (isTypeIndicatorListItem(message)) {\n const { id, senderId, senderType } = message;\n const agentVariant = getAgentVariant(senderId, senderType);\n\n return <TypeIndicator {...message} key={id} agentVariant={agentVariant} />;\n }\n\n return null;\n};\n\nconst ChatBody: FunctionComponent<ChatBodyProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ChatBodyProps>, ref: ChatBodyProps['ref']) => {\n const {\n transcripts,\n liveChat,\n unreadMessageCount = 0,\n onScrollToButtonClick,\n handle,\n loading,\n offset = -1,\n loadMore,\n ...restProps\n } = props;\n\n const t = useI18n();\n const conversationRef = useRef<HTMLUListElement>(null);\n const scrollRef = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const focusInMessageList = useRef(false);\n const initialMessageListFocused = useRef(false);\n const elementRef = useRef<HTMLElement \| null>(null);\n const activeElementIndex = useRef(-1);\n const agentSerial = useRef<{ [agentId: string]: number }>({});\n\n const [messageList, setMessageList] = useState<(HTMLLIElement \| null)[]>([]);\n const [verticalNav, setVerticalNav] = useState(true);\n\n const { announcePolite } = useLiveLog();\n\n const isScrolledToLatest: ChatBodyHandleValue['isScrolledToLatest'] = useCallback(() => {\n return conversationRef.current\n ? conversationRef.current.scrollHeight -\n conversationRef.current.scrollTop -\n conversationRef.current.offsetHeight <=\n 30\n : true;\n }, [conversationRef.current]);\n\n const scrollToLatestMessage: ChatBodyHandleValue['scrollToLatestMessage'] = useCallback(() => {\n if (conversationRef.current) {\n conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n focusInMessageList.current = true;\n messageList[messageList.length - 1]?.focus();\n activeElementIndex.current = messageList.length - 1;\n }\n }, [conversationRef.current, messageList]);\n\n const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n const onMessageListScroll = useCallback(() => {\n const isScrolled = isScrolledToLatest();\n if (scrollRef.current && isScrolled) {\n scrollRef.current = false;\n if (unreadMessageCount) {\n onScrollToButtonClick?.();\n }\n }\n\n if (!scrollRef.current && !isScrolled) {\n scrollRef.current = true;\n }\n\n setDisplayScrollToLatest(!isScrolled);\n }, [isScrolledToLatest(), unreadMessageCount]);\n\n const scrollToNewMessage: ChatBodyHandleValue['scrollToNewMessage'] = useCallback(() => {\n if (conversationRef.current) {\n setDisplayScrollToLatest(false);\n const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n '[data-new-message-separator]'\n );\n if (\n newMessageIndicatorEle &&\n newMessageIndicatorEle.nextElementSibling instanceof HTMLElement\n ) {\n conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n focusInMessageList.current = true;\n newMessageIndicatorEle.nextElementSibling.focus();\n activeElementIndex.current =\n messageList.findIndex(item => item?.hasAttribute('data-new-message-separator')) + 1;\n } else {\n scrollToLatestMessage();\n }\n }\n }, [conversationRef.current, messageList]);\n\n useImperativeHandle(\n handle,\n () => ({\n isScrolledToLatest,\n scrollToLatestMessage,\n scrollToNewMessage\n }),\n [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n );\n\n useItemIntersection(\n conversationRef,\n offset,\n () => {\n loadMore?.();\n },\n ':scope > div > li'\n );\n\n useEffect(() => {\n const focusableElements = conversationRef.current?.querySelectorAll<HTMLLIElement>(\n 'li[type=\"system\"],li[type=\"message\"],li[type=\"typing\"]'\n );\n\n if (focusableElements) setMessageList(Array.from(focusableElements));\n\n if (focusableElements && initialMessageListFocused.current === false) {\n activeElementIndex.current = focusableElements.length - 1;\n }\n }, [transcripts, liveChat]);\n\n useEffect(() => {\n elementRef.current = messageList[activeElementIndex.current];\n if (verticalNav) {\n elementRef.current?.focus();\n } else {\n getFocusables(elementRef)[0]?.focus();\n }\n }, [verticalNav]);\n\n useArrows(\n conversationRef,\n {\n cycle: true,\n selector: ':scope > div > li',\n dir: 'up-down',\n allowTabFocus: true\n },\n [transcripts, liveChat]\n );\n\n useArrows(\n elementRef,\n {\n cycle: true,\n selector: 'a, button, input, textarea, select, details',\n dir: 'left-right',\n allowTabFocus: true\n },\n [transcripts, liveChat, verticalNav]\n );\n\n const focusSiblingElement = (currentElement: Element, isShiftKey = false) => {\n elementRef.current = currentElement as HTMLElement;\n const focusableElements = getFocusables(elementRef);\n if (focusableElements?.length > 0) {\n focusableElements?.[isShiftKey ? focusableElements.length - 1 : 0].focus();\n } else {\n const element = isShiftKey\n ? elementRef.current?.previousElementSibling\n : elementRef.current?.nextElementSibling;\n\n if (element) focusSiblingElement(element, isShiftKey);\n }\n };\n\n useOuterEvent('mousedown', [conversationRef], () => {\n focusInMessageList.current = false;\n });\n\n useAfterInitialEffect(() => {\n if (liveChat?.length > 0) {\n const unreadMessage = liveChat[liveChat.length - 1];\n if (\n isSystemMessageListItem(unreadMessage) \|\|\n (isMessageListItem(unreadMessage) && unreadMessage.direction === 'in')\n ) {\n announcePolite({\n message: t('new_message'),\n type: 'alert'\n });\n }\n }\n }, [liveChat]);\n\n return (\n <>\n <Flex\n {...restProps}\n as={StyledChatBody}\n item={{\n grow: 1\n }}\n container={{\n direction: 'column'\n }}\n ref={ref}\n >\n <StyledMessageList\n ref={conversationRef}\n onScroll={debounce(onMessageListScroll, 100)}\n onFocus={() => {\n if (!focusInMessageList.current) {\n initialMessageListFocused.current = true;\n elementRef.current = messageList[activeElementIndex.current];\n elementRef.current?.focus();\n focusInMessageList.current = true;\n }\n }}\n onKeyDown={e => {\n if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n elementRef.current = messageList[activeElementIndex.current];\n if (getFocusables(elementRef).length > 0) {\n setVerticalNav(false);\n }\n } else if (e.key === 'ArrowUp' \|\| e.key === 'ArrowDown') {\n if (e.key === 'ArrowUp') {\n activeElementIndex.current =\n activeElementIndex.current === 0\n ? messageList.length - 1\n : activeElementIndex.current - 1;\n } else {\n activeElementIndex.current =\n activeElementIndex.current === messageList.length - 1\n ? 0\n : activeElementIndex.current + 1;\n }\n setVerticalNav(true);\n } else if (e.key === 'Tab') {\n e.preventDefault();\n focusInMessageList.current = false;\n if (e.shiftKey) {\n const prevElement =\n conversationRef?.current?.parentElement?.previousElementSibling;\n if (prevElement) focusSiblingElement(prevElement, true);\n } else if (unreadMessageCount > 0 \|\| displayScrollLatest) {\n buttonRef?.current?.focus();\n } else {\n const nextElement = conversationRef.current?.parentElement?.nextElementSibling;\n if (nextElement) focusSiblingElement(nextElement);\n }\n }\n }}\n >\n {loading && <Progress as='li' placement='block' />}\n {transcripts.map(session => {\n return (\n <StyledSession key={session.id}>\n {session.messages.map(message => (\n <ChatMessage message={message} agentSerial={agentSerial} key={message.id} />\n ))}\n </StyledSession>\n );\n })}\n <StyledSession>\n {liveChat.map(message => (\n <ChatMessage message={message} agentSerial={agentSerial} key={message.id} />\n ))}\n </StyledSession>\n </StyledMessageList>\n {(unreadMessageCount > 0 \|\| displayScrollLatest) && (\n <Button\n aria-label={\n unreadMessageCount > 0\n ? t('scroll_to_unread_messages')\n : t('scroll_to_latest_message')\n }\n onClick={() => {\n if (unreadMessageCount > 0) {\n scrollToNewMessage();\n } else {\n scrollToLatestMessage();\n }\n onScrollToButtonClick?.();\n }}\n icon={unreadMessageCount === 0}\n ref={buttonRef}\n >\n <Icon name='caret-down' />\n {unreadMessageCount > 0 && <>  {t('new_messages')}</>}\n </Button>\n )}\n </Flex>\n {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n </>\n );\n }\n);\n\nexport default ChatBody;\n"]}

package/lib/components/Chat/ChatComposer.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { FunctionComponent, Ref, ReactNode, RefObject, KeyboardEvent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { AttachmentItemProps } from './Chat.types';
+import { ForwardProps, FileUploadItemProps } from '@pega/cosmos-react-core';
 export type SpecialKeysConfig = {
     /** Collection of specialKeys */
     keys: string[];
@@ -26,7 +25,7 @@ export interface ChatComposerProps {
     /** show/hide emoji */
     showEmoji?: boolean;
     /** Attachments list */
-    attachments?: AttachmentItemProps[];
+    attachments?: FileUploadItemProps[];
     /** Callback when attachment icon is clicked */
     onAddAttachment?: () => void;
     /** Special Keys configuration */

package/lib/components/Chat/ChatComposer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EAEH,SAAS,EAOT,SAAS,EACT,aAAa,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,EAcL,YAAY,~~EAKb~~,~~MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,~~mBAAmB,~~EAAE~~,MAAM,~~cAAc~~,CAAC;~~AAInD~~,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oEAAoE;IACpE,YAAY,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iCAAiC,CAAC,CAAC;CAC9C;~~AAsFD~~,eAAO,MAAM,8BAA8B,~~yGAG1C~~,CAAC;~~AAEF~~,MAAM,WAAW,iCAAiC;IAChD,mCAAmC;IACnC,eAAe,EAAE,CACf,aAAa,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,YAAY,KACjD,IAAI,CAAC;IACV,4CAA4C;IAC5C,eAAe,EAAE,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,~~CAyTrE~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EAEH,SAAS,EAOT,SAAS,EACT,aAAa,EACd,MAAM,OAAO,CAAC;AAGf,OAAO,EAcL,YAAY,EAKZ,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oEAAoE;IACpE,YAAY,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iCAAiC,CAAC,CAAC;CAC9C;AA0ED,eAAO,MAAM,8BAA8B,yGAUzC,CAAC;AAEH,MAAM,WAAW,iCAAiC;IAChD,mCAAmC;IACnC,eAAe,EAAE,CACf,aAAa,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,YAAY,KACjD,IAAI,CAAC;IACV,4CAA4C;IAC5C,eAAe,EAAE,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAgTrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Chat/ChatComposer.js CHANGED Viewed

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { forwardRef, useState, useEffect, useCallback, useImperativeHandle, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, TextArea, Button, Icon, registerIcon, Popover, EmojiPicker, hasProp, useI18n, useElement, defaultThemeProp, Tooltip, useOuterEvent, calculateFontSize, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import { Flex, TextArea, Button, Icon, registerIcon, Popover, EmojiPicker, hasProp, useI18n, useElement, defaultThemeProp, Tooltip, useOuterEvent, VisuallyHiddenText, FileUploadItem, Grid } from '@pega/cosmos-react-core';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as faceHappyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/face-happy.icon';
 import * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';
 registerIcon(timesIcon, faceHappyIcon, paperClipIcon);
-const StyledAttachmentItem = styled.div ``;
+const StyledAttachmentItem = styled(FileUploadItem) ``;
 const StyledAttachmentElementContainer = styled.div(({ disabled, theme }) => {
     return (disabled &&
         css `
@@ -20,8 +21,7 @@ const StyledAttachmentElementContainer = styled.div(({ disabled, theme }) => {
 });
 const StyledPreviewButton = styled(BareButton) ``;
 const StyledDeleteButton = styled(BareButton) ``;
-const StyledChatComposer = styled.footer(({ theme, disabled, theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'disabled-opacity': transparentBg, spacing }, components: { link: { color: linkColor } } } }) => {
-    const { xxs: fontSizeXXS } = calculateFontSize(fontSize, fontScale);
+const StyledChatComposer = styled.footer(({ theme, disabled, theme: { base: { 'disabled-opacity': transparentBg, spacing } } }) => {
     return css `
       padding: calc(2 * ${spacing});
       background-color: ${theme.base.palette['secondary-background']};
@@ -32,14 +32,11 @@ const StyledChatComposer = styled.footer(({ theme, disabled, theme: { base: { 'f
         max-width: 100%;
       }
       ${StyledAttachmentItem} {
-        color: ${linkColor};
-        background-color: ${theme.base.palette['primary-background']};
-        padding: calc(0.5 * ${spacing});
-        border-radius: calc(0.25 * ${theme.base['border-radius']});
-        font-size: ${fontSizeXXS};
-        font-weight: bold;
-        margin-block-end: calc(0.5 * ${spacing});
-        opacity: ${disabled ? transparentBg : 1};
+        ${disabled &&
+        css `
+          pointer-events: none;
+          opacity: ${transparentBg};
+        `}
       }
       ${StyledAttachmentElementContainer} {
@@ -64,10 +61,17 @@ const StyledChatComposer = styled.footer(({ theme, disabled, theme: { base: { 'f
 });
 StyledChatComposer.defaultProps = defaultThemeProp;
 StyledAttachmentElementContainer.defaultProps = defaultThemeProp;
-export const StyledAttachmentsListContainer = styled.div `
-  max-height: 4rem;
-  overflow-y: auto;
-`;
+export const StyledAttachmentsListContainer = styled.div(({ theme }) => {
+    return css `
+    max-height: 5rem;
+    overflow-y: auto;
+    &:focus-within {
+      box-shadow: ${theme.base.shadow['focus-group']};
+      border-radius: calc(0.5 * ${theme.base['border-radius']});
+    }
+  `;
+});
 const ChatComposer = forwardRef((props, ref) => {
     const { children, attachments = [], maxAttachments = 0, onAddAttachment, maxLength, placeholder: defaultPlaceHolder, defaultMessage = '', onSend, specialKeysConfig, disabled = false, enterKeySendsMessage = true, showEmoji, ...restProps } = props;
     const [message, setMessage] = useState(defaultMessage);
@@ -183,18 +187,22 @@ const ChatComposer = forwardRef((props, ref) => {
                 }, ...restProps, ref: chatComposerRef, children: [_jsxs(Flex, { container: {
                             direction: 'column',
                             gap: 0.5
-                        }, children: [_jsx(Flex, { container: {
-                                    wrap: 'wrap',
-                                    gap: 0.5
-                                }, as: StyledAttachmentsListContainer, children: attachments.map(attachment => {
-                                    return (_jsxs(Flex, { container: {
-                                            gap: 1,
-                                            alignItems: 'center'
-                                        }, as: StyledAttachmentItem, children: [_jsx(BareButton, { as: StyledPreviewButton, disabled: disabled, onClick: () => {
-                                                    attachment.onPreview?.(attachment.name);
-                                                }, children: attachment.name }), _jsx(BareButton, { as: StyledDeleteButton, disabled: disabled, "aria-label": t('email_remove_attachment'), onClick: () => {
-                                                    attachment.onDelete?.(attachment.name);
-                                                }, children: _jsx(Icon, { name: 'times' }) })] }, attachment.name));
+                        }, children: [_jsx(Grid, { container: {
+                                    cols: 'repeat(auto-fill, minmax(12rem, 1fr))',
+                                    gap: 1
+                                }, role: 'group', "aria-label": `${t('attachments')}`, as: StyledAttachmentsListContainer, children: attachments.map((attachment, idx) => {
+                                    if (disabled) {
+                                        const attachmentProps = {
+                                            ...attachment,
+                                            onDelete: undefined,
+                                            onDownload: undefined,
+                                            onPreview: undefined,
+                                            onEdit: undefined,
+                                            onCancel: undefined
+                                        };
+                                        return _createElement(StyledAttachmentItem, { ...attachmentProps, key: attachmentProps.name });
+                                    }
+                                    return (_jsx("div", { "aria-label": `${t('attachments_x_of_y', [idx + 1, attachments.length])}`, children: _jsx(StyledAttachmentItem, { ...attachment }) }, attachment.name));
                                 }) }), _jsx(TextArea, { ref: textAreaRef, maxLength: maxLength, displayCharCount: maxLength !== undefined, hardStop: false, placeholder: defaultPlaceHolder, value: message, disabled: disabled, onKeyUp: handleSpecialKey, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: handleTextAreaChange, "aria-label": t('enter_message') })] }), _jsxs(Flex, { container: { gap: 0.5 }, children: [showEmoji && (_jsx(Button, { ref: setEmojiBtnEl, onClick: toggleEmoji, variant: 'simple', disabled: disabled, icon: true, "aria-label": t('add_emoji'), children: _jsx(Icon, { name: 'face-happy' }) })), maxAttachments > 0 && (_jsxs(StyledAttachmentElementContainer, { disabled: attachments.length >= maxAttachments, ref: setAttachmentsBtnEl, tabIndex: attachments.length >= maxAttachments ? 0 : undefined, role: 'button', children: [_jsx(Button, { onClick: onAddAttachment, variant: 'simple', disabled: !!(disabled || attachments.length >= maxAttachments), icon: true, "aria-label": attachments.length >= maxAttachments
                                             ? t('email_disable_attachment', [maxAttachments])
                                             : t('email_add_attachment', [maxAttachments]), children: _jsx(Icon, { name: 'paper-clip' }) }), attachments.length >= maxAttachments && (_jsx(Tooltip, { target: attachmentsBtnEl, showDelay: 'none', hideDelay: 'none', ...restProps, children: t('email_disable_attachment', [maxAttachments]) }))] })), _jsx(Flex, { item: { grow: 1 }, children: children }), _jsx(Button, { variant: 'primary', disabled: disabled || (!!maxLength && message.length > maxLength), onClick: () => {

package/lib/components/Chat/ChatComposer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatComposer.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n PropsWithoutRef,\n ReactNode,\n useState,\n useEffect,\n useCallback,\n ChangeEvent,\n useImperativeHandle,\n useRef,\n RefObject,\n KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n TextArea,\n Button,\n Icon,\n registerIcon,\n Popover,\n EmojiPicker,\n EmojiPickerProps,\n hasProp,\n useI18n,\n useElement,\n defaultThemeProp,\n PropsWithDefaults,\n ForwardProps,\n Tooltip,\n useOuterEvent,\n calculateFontSize,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as faceHappyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/face-happy.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nimport { AttachmentItemProps } from './Chat.types';\n\nregisterIcon(timesIcon, faceHappyIcon, paperClipIcon);\n\nexport type SpecialKeysConfig = {\n /** Collection of specialKeys /\n keys: string[];\n /* onSpecialKey is fired when a special key is typed in Textarea /\n onSpecialKey: (e: KeyboardEvent<HTMLTextAreaElement>, key: string) => void;\n};\n\nexport interface ChatComposerProps {\n /* Place holder /\n placeholder?: string;\n /* Default message to populate on load /\n defaultMessage?: string;\n /* Max character limit /\n maxLength?: number;\n /* Callback when send button is clicked /\n onSend: (message: string) => void;\n /* Enter / Return key sends message /\n enterKeySendsMessage?: boolean;\n /* Max number of attachments to be allowed in chat composer.\n * If zero is passed, add attachments icon will be hidden. same rule applies if prop is not passed.\n * If attachments added are >= maxAttachments, add attachments icon will be disabled.\n /\n maxAttachments?: number;\n /* show/hide emoji /\n showEmoji?: boolean;\n /* Attachments list /\n attachments?: AttachmentItemProps[];\n /* Callback when attachment icon is clicked /\n onAddAttachment?: () => void;\n /* Special Keys configuration /\n specialKeysConfig?: SpecialKeysConfig;\n /* Disables the composer area /\n disabled?: boolean;\n /* Children /\n children?: ReactNode;\n /* Ref to the Imperative handle /\n ref?: Ref<ChatComposerImperativeHandleProps>;\n}\n\nconst StyledAttachmentItem = styled.div``;\n\ninterface DisableAttachmentProps {\n disabled?: boolean;\n}\nconst StyledAttachmentElementContainer = styled.div<DisableAttachmentProps>(\n ({ disabled, theme }) => {\n return (\n disabled &&\n css`\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n border-radius: 50%;\n outline: none;\n }\n `\n );\n }\n);\nconst StyledPreviewButton = styled(BareButton)``;\nconst StyledDeleteButton = styled(BareButton)``;\n\nconst StyledChatComposer = styled.footer<PropsWithDefaults<ChatComposerProps, 'disabled'>>(\n ({\n theme,\n disabled,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'disabled-opacity': transparentBg,\n spacing\n },\n components: {\n link: { color: linkColor }\n }\n }\n }) => {\n const { xxs: fontSizeXXS } = calculateFontSize(fontSize, fontScale);\n return css`\n padding: calc(2 ${spacing});\n background-color: ${theme.base.palette['secondary-background']};\n textarea {\n border-radius: ${theme.base['border-radius']};\n height: 5rem;\n border: 0.0625rem solid ${theme.base.colors.gray['extra-light']};\n max-width: 100%;\n }\n ${StyledAttachmentItem} {\n color: ${linkColor};\n background-color: ${theme.base.palette['primary-background']};\n padding: calc(0.5 * ${spacing});\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n font-size: ${fontSizeXXS};\n font-weight: bold;\n margin-block-end: calc(0.5 * ${spacing});\n opacity: ${disabled ? transparentBg : 1};\n }\n\n ${StyledAttachmentElementContainer} {\n ${disabled &&\n css`\n pointer-events: none;\n `}\n }\n\n ${StyledPreviewButton} {\n color: ${theme.base.palette.interactive};\n font-weight: bold;\n &:hover {\n text-decoration: underline;\n }\n }\n\n ${StyledDeleteButton} {\n color: ${theme.base.palette.interactive};\n }\n `;\n }\n);\n\nStyledChatComposer.defaultProps = defaultThemeProp;\nStyledAttachmentElementContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsListContainer = styled.div`\n max-height: 4rem;\n overflow-y: auto;\n`;\n\nexport interface ChatComposerImperativeHandleProps {\n /** Function to append a message /\n appendToMessage: (\n appendMessage: string,\n position?: 'cursor' \| 'start' \| 'end' \| 'specialKey'\n ) => void;\n /* Actual ref to Chat composer component */\n chatComposerRef: RefObject<HTMLDivElement \| undefined>;\n textAreaRef: RefObject<HTMLTextAreaElement \| undefined>;\n}\n\nconst ChatComposer: FunctionComponent<ChatComposerProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ChatComposerProps>, ref: ChatComposerProps['ref']) => {\n const {\n children,\n attachments = [],\n maxAttachments = 0,\n onAddAttachment,\n maxLength,\n placeholder: defaultPlaceHolder,\n defaultMessage = '',\n onSend,\n specialKeysConfig,\n disabled = false,\n enterKeySendsMessage = true,\n showEmoji,\n ...restProps\n } = props;\n const [message, setMessage] = useState(defaultMessage);\n useEffect(() => {\n setMessage(defaultMessage);\n }, [defaultMessage]);\n\n const t = useI18n();\n\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n const [emojiBtnEl, setEmojiBtnEl] = useElement();\n const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n const [announcement, setAnnouncement] = useState('');\n\n const lastEnteredSpecialKey = useRef<string \| null>(null);\n\n const appendToMessage = useCallback(\n (\n appendMessage: string,\n position?: 'cursor' \| 'start' \| 'end' \| 'specialKey',\n selectText: boolean = true\n ) => {\n let selectionStart;\n let selectionEnd;\n if (textAreaRef.current) {\n if (position === 'start') {\n textAreaRef.current.value = appendMessage + textAreaRef.current.value;\n selectionStart = 0;\n selectionEnd = appendMessage.length;\n } else if (position === 'end') {\n const initialEnd = textAreaRef.current.value.length;\n textAreaRef.current.value += appendMessage;\n selectionStart = initialEnd;\n selectionEnd = initialEnd + appendMessage.length;\n } else if (position === 'specialKey' && lastEnteredSpecialKey.current) {\n const replaceChars = lastEnteredSpecialKey.current.length;\n const currentSelectionStart = textAreaRef.current.selectionStart;\n textAreaRef.current.value =\n textAreaRef.current.value.substring(\n 0,\n textAreaRef.current.selectionStart - replaceChars\n ) +\n appendMessage +\n textAreaRef.current.value.substring(\n textAreaRef.current.selectionStart,\n textAreaRef.current.value.length\n );\n selectionStart = currentSelectionStart - replaceChars;\n selectionEnd = currentSelectionStart + appendMessage.length - replaceChars;\n lastEnteredSpecialKey.current = null;\n } else {\n const currentSelectionStart = textAreaRef.current.selectionStart;\n textAreaRef.current.value =\n textAreaRef.current.value.substring(0, textAreaRef.current.selectionStart) +\n appendMessage +\n textAreaRef.current.value.substring(\n textAreaRef.current.selectionStart,\n textAreaRef.current.value.length\n );\n selectionStart = currentSelectionStart;\n selectionEnd = currentSelectionStart + appendMessage.length;\n }\n textAreaRef.current.selectionStart = selectText ? selectionStart : selectionEnd;\n textAreaRef.current.selectionEnd = selectionEnd;\n textAreaRef.current.focus();\n setMessage(textAreaRef.current.value);\n }\n },\n [setMessage, textAreaRef.current]\n );\n\n const chatComposerRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => ({ appendToMessage, chatComposerRef, textAreaRef }), [\n appendToMessage,\n chatComposerRef.current,\n textAreaRef.current\n ]);\n\n const sendMessage = useCallback(\n (newMessage: string) => {\n if (onSend) {\n onSend(newMessage);\n setMessage('');\n }\n },\n [onSend]\n );\n\n const handleEnterKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (enterKeySendsMessage && e.keyCode === 13 && !e.shiftKey) {\n if (!maxLength \|\| message.length <= maxLength) {\n sendMessage(message);\n setAnnouncement(t('message_sent'));\n }\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [onSend, message, maxLength]\n );\n\n const handleTextAreaChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n setMessage(e.currentTarget.value);\n setAnnouncement('');\n },\n [setMessage]\n );\n\n const handleSpecialKey = useCallback(\n (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (!specialKeysConfig) return;\n const { keys, onSpecialKey } = specialKeysConfig;\n if (specialKeysConfig && keys.length > 0) {\n const composerValue = e.currentTarget.value.substring(0, e.currentTarget.selectionStart);\n const specialKey = keys.find(key => composerValue.endsWith(key));\n if (specialKey) {\n lastEnteredSpecialKey.current = specialKey;\n onSpecialKey(e, specialKey);\n }\n }\n },\n [specialKeysConfig]\n );\n\n const toggleEmoji = () => {\n setShowEmojiPicker(!showEmojiPicker);\n };\n const onEmojiSelect: EmojiPickerProps['onSelect'] = emojiElem => {\n // Check that it is not a custom emoji\n if (hasProp(emojiElem, 'native')) {\n appendToMessage(emojiElem.native, 'cursor', false);\n }\n setShowEmojiPicker(false);\n };\n\n const EmojiPickerRef = useRef<HTMLDivElement>(null);\n\n useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {\n setShowEmojiPicker(false);\n });\n\n return (\n <>\n <Flex\n as={StyledChatComposer}\n disabled={disabled}\n container={{\n direction: 'column',\n gap: 2\n }}\n item={{\n shrink: 0\n }}\n {...restProps}\n ref={chatComposerRef}\n >\n <Flex\n container={{\n direction: 'column',\n gap: 0.5\n }}\n >\n <Flex\n container={{\n wrap: 'wrap',\n gap: 0.5\n }}\n as={StyledAttachmentsListContainer}\n >\n {attachments.map(attachment => {\n return (\n <Flex\n key={attachment.name}\n container={{\n gap: 1,\n alignItems: 'center'\n }}\n as={StyledAttachmentItem}\n >\n <BareButton\n as={StyledPreviewButton}\n disabled={disabled}\n onClick={() => {\n attachment.onPreview?.(attachment.name);\n }}\n >\n {attachment.name}\n </BareButton>\n <BareButton\n as={StyledDeleteButton}\n disabled={disabled}\n aria-label={t('email_remove_attachment')}\n onClick={() => {\n attachment.onDelete?.(attachment.name);\n }}\n >\n <Icon name='times' />\n </BareButton>\n </Flex>\n );\n })}\n </Flex>\n <TextArea\n ref={textAreaRef}\n maxLength={maxLength}\n displayCharCount={maxLength !== undefined}\n hardStop={false}\n placeholder={defaultPlaceHolder}\n value={message}\n disabled={disabled}\n onKeyUp={handleSpecialKey}\n onKeyDown={handleEnterKeyDown}\n onChange={handleTextAreaChange}\n onFocus={handleTextAreaChange}\n aria-label={t('enter_message')}\n />\n </Flex>\n <Flex container={{ gap: 0.5 }}>\n {showEmoji && (\n <Button\n ref={setEmojiBtnEl}\n onClick={toggleEmoji}\n variant='simple'\n disabled={disabled}\n icon\n aria-label={t('add_emoji')}\n >\n <Icon name='face-happy' />\n </Button>\n )}\n {maxAttachments > 0 && (\n <StyledAttachmentElementContainer\n disabled={attachments.length >= maxAttachments}\n ref={setAttachmentsBtnEl}\n tabIndex={attachments.length >= maxAttachments ? 0 : undefined}\n role='button'\n >\n <Button\n onClick={onAddAttachment}\n variant='simple'\n disabled={!!(disabled \|\| attachments.length >= maxAttachments)}\n icon\n aria-label={\n attachments.length >= maxAttachments\n ? t('email_disable_attachment', [maxAttachments])\n : t('email_add_attachment', [maxAttachments])\n }\n >\n <Icon name='paper-clip' />\n </Button>\n {attachments.length >= maxAttachments && (\n <Tooltip\n target={attachmentsBtnEl}\n showDelay='none'\n hideDelay='none'\n {...restProps}\n >\n {t('email_disable_attachment', [maxAttachments])}\n </Tooltip>\n )}\n </StyledAttachmentElementContainer>\n )}\n <Flex item={{ grow: 1 }}>{children}</Flex>\n <Button\n variant='primary'\n disabled={disabled \|\| (!!maxLength && message.length > maxLength)}\n onClick={() => {\n sendMessage(message);\n setAnnouncement(t('message_sent'));\n }}\n >\n {t('send_label')}\n </Button>\n {announcement && (\n <VisuallyHiddenText aria-live='assertive'>{announcement}</VisuallyHiddenText>\n )}\n </Flex>\n </Flex>\n <Popover\n show={showEmojiPicker}\n target={emojiBtnEl}\n placement='top-start'\n modifiers={[\n {\n name: 'flip',\n enabled: true\n }\n ]}\n >\n <EmojiPicker ref={EmojiPickerRef} onSelect={onEmojiSelect} />\n </Popover>\n </>\n );\n }\n);\n\nexport default ChatComposer;\n"]}
1	+ {"version":3,"file":"ChatComposer.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":";;AAAA,OAAO,EACL,UAAU,EAKV,QAAQ,EACR,SAAS,EACT,WAAW,EAEX,mBAAmB,EACnB,MAAM,EAGP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,WAAW,EAEX,OAAO,EACP,OAAO,EACP,UAAU,EACV,gBAAgB,EAGhB,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,cAAc,EAEd,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAEnG,YAAY,CAAC,SAAS,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC;AAyCtD,MAAM,oBAAoB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA,EAAE,CAAC;AAKtD,MAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CACjD,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACtB,OAAO,CACL,QAAQ;QACR,GAAG,CAAA;;wBAEe,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;OAIxC,CACF,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,mBAAmB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,EAAE,CAAC;AACjD,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,EAAE,CAAC;AAEhD,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CACtC,CAAC,EACC,KAAK,EACL,QAAQ,EACR,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,kBAAkB,EAAE,aAAa,EAAE,OAAO,EAAE,EACrD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;0BACY,OAAO;0BACP,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;;yBAE3C,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;kCAElB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;QAG/D,oBAAoB;UAClB,QAAQ;QACV,GAAG,CAAA;;qBAEU,aAAa;SACzB;;;QAGD,gCAAgC;UAC9B,QAAQ;QACV,GAAG,CAAA;;SAEF;;;QAGD,mBAAmB;iBACV,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;;;QAOvC,kBAAkB;iBACT,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;KAE1C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACnD,gCAAgC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjE,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;kCAClB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAE1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAaH,MAAM,YAAY,GAAwD,UAAU,CAClF,CAAC,KAAyC,EAAE,GAA6B,EAAE,EAAE;IAC3E,MAAM,EACJ,QAAQ,EACR,WAAW,GAAG,EAAE,EAChB,cAAc,GAAG,CAAC,EAClB,eAAe,EACf,SAAS,EACT,WAAW,EAAE,kBAAkB,EAC/B,cAAc,GAAG,EAAE,EACnB,MAAM,EACN,iBAAiB,EACjB,QAAQ,GAAG,KAAK,EAChB,oBAAoB,GAAG,IAAI,EAC3B,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvD,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,cAAc,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,EAAE,CAAC;IACjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,UAAU,EAAE,CAAC;IAC7D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAErD,MAAM,qBAAqB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE1D,MAAM,eAAe,GAAG,WAAW,CACjC,CACE,aAAqB,EACrB,QAAoD,EACpD,aAAsB,IAAI,EAC1B,EAAE;QACF,IAAI,cAAc,CAAC;QACnB,IAAI,YAAY,CAAC;QACjB,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,IAAI,QAAQ,KAAK,OAAO,EAAE;gBACxB,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC;gBACtE,cAAc,GAAG,CAAC,CAAC;gBACnB,YAAY,GAAG,aAAa,CAAC,MAAM,CAAC;aACrC;iBAAM,IAAI,QAAQ,KAAK,KAAK,EAAE;gBAC7B,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC;gBACpD,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,aAAa,CAAC;gBAC3C,cAAc,GAAG,UAAU,CAAC;gBAC5B,YAAY,GAAG,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC;aAClD;iBAAM,IAAI,QAAQ,KAAK,YAAY,IAAI,qBAAqB,CAAC,OAAO,EAAE;gBACrE,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC;gBAC1D,MAAM,qBAAqB,GAAG,WAAW,CAAC,OAAO,CAAC,cAAc,CAAC;gBACjE,WAAW,CAAC,OAAO,CAAC,KAAK;oBACvB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CACjC,CAAC,EACD,WAAW,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAClD;wBACD,aAAa;wBACb,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CACjC,WAAW,CAAC,OAAO,CAAC,cAAc,EAClC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CACjC,CAAC;gBACJ,cAAc,GAAG,qBAAqB,GAAG,YAAY,CAAC;gBACtD,YAAY,GAAG,qBAAqB,GAAG,aAAa,CAAC,MAAM,GAAG,YAAY,CAAC;gBAC3E,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;aACtC;iBAAM;gBACL,MAAM,qBAAqB,GAAG,WAAW,CAAC,OAAO,CAAC,cAAc,CAAC;gBACjE,WAAW,CAAC,OAAO,CAAC,KAAK;oBACvB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,cAAc,CAAC;wBAC1E,aAAa;wBACb,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CACjC,WAAW,CAAC,OAAO,CAAC,cAAc,EAClC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CACjC,CAAC;gBACJ,cAAc,GAAG,qBAAqB,CAAC;gBACvC,YAAY,GAAG,qBAAqB,GAAG,aAAa,CAAC,MAAM,CAAC;aAC7D;YACD,WAAW,CAAC,OAAO,CAAC,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;YAChF,WAAW,CAAC,OAAO,CAAC,YAAY,GAAG,YAAY,CAAC;YAChD,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC5B,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SACvC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAClC,CAAC;IAEF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAErD,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC,EAAE;QAClF,eAAe;QACf,eAAe,CAAC,OAAO;QACvB,WAAW,CAAC,OAAO;KACpB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,UAAkB,EAAE,EAAE;QACrB,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,UAAU,CAAC,CAAC;YACnB,UAAU,CAAC,EAAE,CAAC,CAAC;SAChB;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,oBAAoB,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE;YAC3D,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,IAAI,SAAS,EAAE;gBAC7C,WAAW,CAAC,OAAO,CAAC,CAAC;gBACrB,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;aACpC;YACD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;SACrB;IACH,CAAC,EACD,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,CAC7B,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,CAAmC,EAAE,EAAE;QACtC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAClC,eAAe,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,CAAqC,EAAE,EAAE;QACxC,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAC/B,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC;QACjD,IAAI,iBAAiB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACxC,MAAM,aAAa,GAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACzF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;YACjE,IAAI,UAAU,EAAE;gBACd,qBAAqB,CAAC,OAAO,GAAG,UAAU,CAAC;gBAC3C,YAAY,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;aAC7B;SACF;IACH,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAC;IACvC,CAAC,CAAC;IACF,MAAM,aAAa,GAAiC,SAAS,CAAC,EAAE;QAC9D,sCAAsC;QACtC,IAAI,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE;YAChC,eAAe,CAAC,SAAS,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;SACpD;QACD,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEpD,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,EAAE,cAAc,CAAC,EAAE,GAAG,EAAE;QAC5D,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,8BACE,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,GAAG,EAAE,CAAC;iBACP,EACD,IAAI,EAAE;oBACJ,MAAM,EAAE,CAAC;iBACV,KACG,SAAS,EACb,GAAG,EAAE,eAAe,aAEpB,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,SAAS,EAAE,QAAQ;4BACnB,GAAG,EAAE,GAAG;yBACT,aAED,KAAC,IAAI,IACH,SAAS,EAAE;oCACT,IAAI,EAAE,uCAAuC;oCAC7C,GAAG,EAAE,CAAC;iCACP,EACD,IAAI,EAAC,OAAO,gBACA,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE,EACjC,EAAE,EAAE,8BAA8B,YAEjC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE;oCACnC,IAAI,QAAQ,EAAE;wCACZ,MAAM,eAAe,GAAG;4CACtB,GAAG,UAAU;4CACb,QAAQ,EAAE,SAAS;4CACnB,UAAU,EAAE,SAAS;4CACrB,SAAS,EAAE,SAAS;4CACpB,MAAM,EAAE,SAAS;4CACjB,QAAQ,EAAE,SAAS;yCACpB,CAAC;wCACF,OAAO,eAAC,oBAAoB,OAAK,eAAe,EAAE,GAAG,EAAE,eAAe,CAAC,IAAI,GAAI,CAAC;qCACjF;oCACD,OAAO,CACL,4BACc,GAAG,CAAC,CAAC,oBAAoB,EAAE,CAAC,GAAG,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,YAGvE,KAAC,oBAAoB,OAAK,UAAU,GAAI,IAFnC,UAAU,CAAC,IAAI,CAGhB,CACP,CAAC;gCACJ,CAAC,CAAC,GACG,EACP,KAAC,QAAQ,IACP,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,SAAS,KAAK,SAAS,EACzC,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,kBAAkB,EAC/B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,kBAAkB,EAC7B,QAAQ,EAAE,oBAAoB,EAC9B,OAAO,EAAE,oBAAoB,gBACjB,CAAC,CAAC,eAAe,CAAC,GAC9B,IACG,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,aAC1B,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,sBACQ,CAAC,CAAC,WAAW,CAAC,YAE1B,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACnB,CACV,EACA,cAAc,GAAG,CAAC,IAAI,CACrB,MAAC,gCAAgC,IAC/B,QAAQ,EAAE,WAAW,CAAC,MAAM,IAAI,cAAc,EAC9C,GAAG,EAAE,mBAAmB,EACxB,QAAQ,EAAE,WAAW,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC9D,IAAI,EAAC,QAAQ,aAEb,KAAC,MAAM,IACL,OAAO,EAAE,eAAe,EACxB,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,WAAW,CAAC,MAAM,IAAI,cAAc,CAAC,EAC9D,IAAI,sBAEF,WAAW,CAAC,MAAM,IAAI,cAAc;4CAClC,CAAC,CAAC,CAAC,CAAC,0BAA0B,EAAE,CAAC,cAAc,CAAC,CAAC;4CACjD,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC,cAAc,CAAC,CAAC,YAGjD,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACnB,EACR,WAAW,CAAC,MAAM,IAAI,cAAc,IAAI,CACvC,KAAC,OAAO,IACN,MAAM,EAAE,gBAAgB,EACxB,SAAS,EAAC,MAAM,EAChB,SAAS,EAAC,MAAM,KACZ,SAAS,YAEZ,CAAC,CAAC,0BAA0B,EAAE,CAAC,cAAc,CAAC,CAAC,GACxC,CACX,IACgC,CACpC,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAAG,QAAQ,GAAQ,EAC1C,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,EACjE,OAAO,EAAE,GAAG,EAAE;oCACZ,WAAW,CAAC,OAAO,CAAC,CAAC;oCACrB,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;gCACrC,CAAC,YAEA,CAAC,CAAC,YAAY,CAAC,GACT,EACR,YAAY,IAAI,CACf,KAAC,kBAAkB,iBAAW,WAAW,YAAE,YAAY,GAAsB,CAC9E,IACI,IACF,EACP,KAAC,OAAO,IACN,IAAI,EAAE,eAAe,EACrB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,IAAI;qBACd;iBACF,YAED,KAAC,WAAW,IAAC,GAAG,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,GAAI,GACrD,IACT,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n PropsWithoutRef,\n ReactNode,\n useState,\n useEffect,\n useCallback,\n ChangeEvent,\n useImperativeHandle,\n useRef,\n RefObject,\n KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n TextArea,\n Button,\n Icon,\n registerIcon,\n Popover,\n EmojiPicker,\n EmojiPickerProps,\n hasProp,\n useI18n,\n useElement,\n defaultThemeProp,\n PropsWithDefaults,\n ForwardProps,\n Tooltip,\n useOuterEvent,\n VisuallyHiddenText,\n FileUploadItem,\n FileUploadItemProps,\n Grid\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as faceHappyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/face-happy.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nregisterIcon(timesIcon, faceHappyIcon, paperClipIcon);\n\nexport type SpecialKeysConfig = {\n /** Collection of specialKeys /\n keys: string[];\n /* onSpecialKey is fired when a special key is typed in Textarea /\n onSpecialKey: (e: KeyboardEvent<HTMLTextAreaElement>, key: string) => void;\n};\n\nexport interface ChatComposerProps {\n /* Place holder /\n placeholder?: string;\n /* Default message to populate on load /\n defaultMessage?: string;\n /* Max character limit /\n maxLength?: number;\n /* Callback when send button is clicked /\n onSend: (message: string) => void;\n /* Enter / Return key sends message /\n enterKeySendsMessage?: boolean;\n /* Max number of attachments to be allowed in chat composer.\n * If zero is passed, add attachments icon will be hidden. same rule applies if prop is not passed.\n * If attachments added are >= maxAttachments, add attachments icon will be disabled.\n /\n maxAttachments?: number;\n /* show/hide emoji /\n showEmoji?: boolean;\n /* Attachments list /\n attachments?: FileUploadItemProps[];\n /* Callback when attachment icon is clicked /\n onAddAttachment?: () => void;\n /* Special Keys configuration /\n specialKeysConfig?: SpecialKeysConfig;\n /* Disables the composer area /\n disabled?: boolean;\n /* Children /\n children?: ReactNode;\n /* Ref to the Imperative handle /\n ref?: Ref<ChatComposerImperativeHandleProps>;\n}\n\nconst StyledAttachmentItem = styled(FileUploadItem)``;\n\ninterface DisableAttachmentProps {\n disabled?: boolean;\n}\nconst StyledAttachmentElementContainer = styled.div<DisableAttachmentProps>(\n ({ disabled, theme }) => {\n return (\n disabled &&\n css`\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n border-radius: 50%;\n outline: none;\n }\n `\n );\n }\n);\nconst StyledPreviewButton = styled(BareButton)``;\nconst StyledDeleteButton = styled(BareButton)``;\n\nconst StyledChatComposer = styled.footer<PropsWithDefaults<ChatComposerProps, 'disabled'>>(\n ({\n theme,\n disabled,\n theme: {\n base: { 'disabled-opacity': transparentBg, spacing }\n }\n }) => {\n return css`\n padding: calc(2 ${spacing});\n background-color: ${theme.base.palette['secondary-background']};\n textarea {\n border-radius: ${theme.base['border-radius']};\n height: 5rem;\n border: 0.0625rem solid ${theme.base.colors.gray['extra-light']};\n max-width: 100%;\n }\n ${StyledAttachmentItem} {\n ${disabled &&\n css`\n pointer-events: none;\n opacity: ${transparentBg};\n `}\n }\n\n ${StyledAttachmentElementContainer} {\n ${disabled &&\n css`\n pointer-events: none;\n `}\n }\n\n ${StyledPreviewButton} {\n color: ${theme.base.palette.interactive};\n font-weight: bold;\n &:hover {\n text-decoration: underline;\n }\n }\n\n ${StyledDeleteButton} {\n color: ${theme.base.palette.interactive};\n }\n `;\n }\n);\n\nStyledChatComposer.defaultProps = defaultThemeProp;\nStyledAttachmentElementContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsListContainer = styled.div(({ theme }) => {\n return css`\n max-height: 5rem;\n overflow-y: auto;\n\n &:focus-within {\n box-shadow: ${theme.base.shadow['focus-group']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n }\n `;\n});\n\nexport interface ChatComposerImperativeHandleProps {\n /** Function to append a message /\n appendToMessage: (\n appendMessage: string,\n position?: 'cursor' \| 'start' \| 'end' \| 'specialKey'\n ) => void;\n /* Actual ref to Chat composer component */\n chatComposerRef: RefObject<HTMLDivElement \| undefined>;\n textAreaRef: RefObject<HTMLTextAreaElement \| undefined>;\n}\n\nconst ChatComposer: FunctionComponent<ChatComposerProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ChatComposerProps>, ref: ChatComposerProps['ref']) => {\n const {\n children,\n attachments = [],\n maxAttachments = 0,\n onAddAttachment,\n maxLength,\n placeholder: defaultPlaceHolder,\n defaultMessage = '',\n onSend,\n specialKeysConfig,\n disabled = false,\n enterKeySendsMessage = true,\n showEmoji,\n ...restProps\n } = props;\n const [message, setMessage] = useState(defaultMessage);\n useEffect(() => {\n setMessage(defaultMessage);\n }, [defaultMessage]);\n\n const t = useI18n();\n\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n const [emojiBtnEl, setEmojiBtnEl] = useElement();\n const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n const [announcement, setAnnouncement] = useState('');\n\n const lastEnteredSpecialKey = useRef<string \| null>(null);\n\n const appendToMessage = useCallback(\n (\n appendMessage: string,\n position?: 'cursor' \| 'start' \| 'end' \| 'specialKey',\n selectText: boolean = true\n ) => {\n let selectionStart;\n let selectionEnd;\n if (textAreaRef.current) {\n if (position === 'start') {\n textAreaRef.current.value = appendMessage + textAreaRef.current.value;\n selectionStart = 0;\n selectionEnd = appendMessage.length;\n } else if (position === 'end') {\n const initialEnd = textAreaRef.current.value.length;\n textAreaRef.current.value += appendMessage;\n selectionStart = initialEnd;\n selectionEnd = initialEnd + appendMessage.length;\n } else if (position === 'specialKey' && lastEnteredSpecialKey.current) {\n const replaceChars = lastEnteredSpecialKey.current.length;\n const currentSelectionStart = textAreaRef.current.selectionStart;\n textAreaRef.current.value =\n textAreaRef.current.value.substring(\n 0,\n textAreaRef.current.selectionStart - replaceChars\n ) +\n appendMessage +\n textAreaRef.current.value.substring(\n textAreaRef.current.selectionStart,\n textAreaRef.current.value.length\n );\n selectionStart = currentSelectionStart - replaceChars;\n selectionEnd = currentSelectionStart + appendMessage.length - replaceChars;\n lastEnteredSpecialKey.current = null;\n } else {\n const currentSelectionStart = textAreaRef.current.selectionStart;\n textAreaRef.current.value =\n textAreaRef.current.value.substring(0, textAreaRef.current.selectionStart) +\n appendMessage +\n textAreaRef.current.value.substring(\n textAreaRef.current.selectionStart,\n textAreaRef.current.value.length\n );\n selectionStart = currentSelectionStart;\n selectionEnd = currentSelectionStart + appendMessage.length;\n }\n textAreaRef.current.selectionStart = selectText ? selectionStart : selectionEnd;\n textAreaRef.current.selectionEnd = selectionEnd;\n textAreaRef.current.focus();\n setMessage(textAreaRef.current.value);\n }\n },\n [setMessage, textAreaRef.current]\n );\n\n const chatComposerRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => ({ appendToMessage, chatComposerRef, textAreaRef }), [\n appendToMessage,\n chatComposerRef.current,\n textAreaRef.current\n ]);\n\n const sendMessage = useCallback(\n (newMessage: string) => {\n if (onSend) {\n onSend(newMessage);\n setMessage('');\n }\n },\n [onSend]\n );\n\n const handleEnterKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (enterKeySendsMessage && e.keyCode === 13 && !e.shiftKey) {\n if (!maxLength \|\| message.length <= maxLength) {\n sendMessage(message);\n setAnnouncement(t('message_sent'));\n }\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [onSend, message, maxLength]\n );\n\n const handleTextAreaChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n setMessage(e.currentTarget.value);\n setAnnouncement('');\n },\n [setMessage]\n );\n\n const handleSpecialKey = useCallback(\n (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (!specialKeysConfig) return;\n const { keys, onSpecialKey } = specialKeysConfig;\n if (specialKeysConfig && keys.length > 0) {\n const composerValue = e.currentTarget.value.substring(0, e.currentTarget.selectionStart);\n const specialKey = keys.find(key => composerValue.endsWith(key));\n if (specialKey) {\n lastEnteredSpecialKey.current = specialKey;\n onSpecialKey(e, specialKey);\n }\n }\n },\n [specialKeysConfig]\n );\n\n const toggleEmoji = () => {\n setShowEmojiPicker(!showEmojiPicker);\n };\n const onEmojiSelect: EmojiPickerProps['onSelect'] = emojiElem => {\n // Check that it is not a custom emoji\n if (hasProp(emojiElem, 'native')) {\n appendToMessage(emojiElem.native, 'cursor', false);\n }\n setShowEmojiPicker(false);\n };\n\n const EmojiPickerRef = useRef<HTMLDivElement>(null);\n\n useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {\n setShowEmojiPicker(false);\n });\n\n return (\n <>\n <Flex\n as={StyledChatComposer}\n disabled={disabled}\n container={{\n direction: 'column',\n gap: 2\n }}\n item={{\n shrink: 0\n }}\n {...restProps}\n ref={chatComposerRef}\n >\n <Flex\n container={{\n direction: 'column',\n gap: 0.5\n }}\n >\n <Grid\n container={{\n cols: 'repeat(auto-fill, minmax(12rem, 1fr))',\n gap: 1\n }}\n role='group'\n aria-label={`${t('attachments')}`}\n as={StyledAttachmentsListContainer}\n >\n {attachments.map((attachment, idx) => {\n if (disabled) {\n const attachmentProps = {\n ...attachment,\n onDelete: undefined,\n onDownload: undefined,\n onPreview: undefined,\n onEdit: undefined,\n onCancel: undefined\n };\n return <StyledAttachmentItem {...attachmentProps} key={attachmentProps.name} />;\n }\n return (\n <div\n aria-label={`${t('attachments_x_of_y', [idx + 1, attachments.length])}`}\n key={attachment.name}\n >\n <StyledAttachmentItem {...attachment} />\n </div>\n );\n })}\n </Grid>\n <TextArea\n ref={textAreaRef}\n maxLength={maxLength}\n displayCharCount={maxLength !== undefined}\n hardStop={false}\n placeholder={defaultPlaceHolder}\n value={message}\n disabled={disabled}\n onKeyUp={handleSpecialKey}\n onKeyDown={handleEnterKeyDown}\n onChange={handleTextAreaChange}\n onFocus={handleTextAreaChange}\n aria-label={t('enter_message')}\n />\n </Flex>\n <Flex container={{ gap: 0.5 }}>\n {showEmoji && (\n <Button\n ref={setEmojiBtnEl}\n onClick={toggleEmoji}\n variant='simple'\n disabled={disabled}\n icon\n aria-label={t('add_emoji')}\n >\n <Icon name='face-happy' />\n </Button>\n )}\n {maxAttachments > 0 && (\n <StyledAttachmentElementContainer\n disabled={attachments.length >= maxAttachments}\n ref={setAttachmentsBtnEl}\n tabIndex={attachments.length >= maxAttachments ? 0 : undefined}\n role='button'\n >\n <Button\n onClick={onAddAttachment}\n variant='simple'\n disabled={!!(disabled \|\| attachments.length >= maxAttachments)}\n icon\n aria-label={\n attachments.length >= maxAttachments\n ? t('email_disable_attachment', [maxAttachments])\n : t('email_add_attachment', [maxAttachments])\n }\n >\n <Icon name='paper-clip' />\n </Button>\n {attachments.length >= maxAttachments && (\n <Tooltip\n target={attachmentsBtnEl}\n showDelay='none'\n hideDelay='none'\n {...restProps}\n >\n {t('email_disable_attachment', [maxAttachments])}\n </Tooltip>\n )}\n </StyledAttachmentElementContainer>\n )}\n <Flex item={{ grow: 1 }}>{children}</Flex>\n <Button\n variant='primary'\n disabled={disabled \|\| (!!maxLength && message.length > maxLength)}\n onClick={() => {\n sendMessage(message);\n setAnnouncement(t('message_sent'));\n }}\n >\n {t('send_label')}\n </Button>\n {announcement && (\n <VisuallyHiddenText aria-live='assertive'>{announcement}</VisuallyHiddenText>\n )}\n </Flex>\n </Flex>\n <Popover\n show={showEmojiPicker}\n target={emojiBtnEl}\n placement='top-start'\n modifiers={[\n {\n name: 'flip',\n enabled: true\n }\n ]}\n >\n <EmojiPicker ref={EmojiPickerRef} onSelect={onEmojiSelect} />\n </Popover>\n </>\n );\n }\n);\n\nexport default ChatComposer;\n"]}

package/lib/components/Chat/ChatSettingsPanel.styles.js CHANGED Viewed

@@ -11,7 +11,7 @@ export const userAvailabilityTheme = {
 };
 export const StyledStatusIcon = styled.div(({ theme: { base: { colors } }, userStatus }) => {
     const [colorName, colorVariant] = userStatus
-        ? userAvailabilityTheme[userStatus]?.color
+        ? userAvailabilityTheme[userStatus].color
         : ['slate', 'light'];
     const bgColor = colors[colorName][colorVariant];
     const fgColor = readableColor(bgColor);

package/lib/components/Chat/ChatSettingsPanel.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatSettingsPanel.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAY,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AACtF,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AAItF,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE3B,MAAM,CAAC,MAAM,qBAAqB,GAG9B;IACF,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;IACxC,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;IACxD,sBAAsB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE;CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGxC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,UAAU,EACX,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAe,UAAU;QACtD,CAAC,CAAC,qBAAqB,CAAC,UAAU,CAAC,~~EAAE~~,KAAK;~~QAC1C~~,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvB,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;0BACY,OAAO;eAClB,OAAO;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,GAAG,CAAA;;8BAEkB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;MAE7E,UAAU;;;;;GAKb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;IAC9D,oBAAoB;;;;;;;;CAQvB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp, IconName, registerIcon, StyledIcon } from '@pega/cosmos-react-core';\nimport * as minus from '@pega/cosmos-react-core/lib/components/Icon/icons/minus.icon';\nimport * as clock from '@pega/cosmos-react-core/lib/components/Icon/icons/clock.icon';\n\nimport { ColorTheme, UserAvailability } from './Chat.types';\n\nregisterIcon(minus, clock);\n\nexport const userAvailabilityTheme: Record<\n UserAvailability,\n { icon?: IconName; color: ColorTheme }\n> = {\n available: { color: ['green', 'light'] },\n unavailable: { icon: 'minus', color: ['red', 'medium'] },\n temporarilyUnavailable: { icon: 'clock', color: ['orange', 'light'] }\n};\n\nexport const StyledStatusIcon = styled.div<{\n userStatus: UserAvailability;\n}>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant]: ColorTheme = userStatus\n ? userAvailabilityTheme[userStatus]?.color\n : ['slate', 'light'];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {\n return css`\n border-radius: 50%;\n border: 0.0625rem solid ${theme.components['app-shell'].nav['background-color']};\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n `;\n});\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledChatControlPanelIcon = styled(StyledStatusIcon)`\n ${StyledUserStatusIcon} {\n position: absolute;\n width: 0.875rem;\n height: 0.875rem;\n z-index: 1;\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n }\n`;\n"]}
1	+ {"version":3,"file":"ChatSettingsPanel.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAY,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AACtF,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AAItF,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE3B,MAAM,CAAC,MAAM,qBAAqB,GAG9B;IACF,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;IACxC,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;IACxD,sBAAsB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE;CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGxC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,UAAU,EACX,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAe,UAAU;QACtD,CAAC,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,KAAK;QACzC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvB,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;0BACY,OAAO;eAClB,OAAO;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,GAAG,CAAA;;8BAEkB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;MAE7E,UAAU;;;;;GAKb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;IAC9D,oBAAoB;;;;;;;;CAQvB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp, IconName, registerIcon, StyledIcon } from '@pega/cosmos-react-core';\nimport * as minus from '@pega/cosmos-react-core/lib/components/Icon/icons/minus.icon';\nimport * as clock from '@pega/cosmos-react-core/lib/components/Icon/icons/clock.icon';\n\nimport { ColorTheme, UserAvailability } from './Chat.types';\n\nregisterIcon(minus, clock);\n\nexport const userAvailabilityTheme: Record<\n UserAvailability,\n { icon?: IconName; color: ColorTheme }\n> = {\n available: { color: ['green', 'light'] },\n unavailable: { icon: 'minus', color: ['red', 'medium'] },\n temporarilyUnavailable: { icon: 'clock', color: ['orange', 'light'] }\n};\n\nexport const StyledStatusIcon = styled.div<{\n userStatus: UserAvailability;\n}>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant]: ColorTheme = userStatus\n ? userAvailabilityTheme[userStatus].color\n : ['slate', 'light'];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {\n return css`\n border-radius: 50%;\n border: 0.0625rem solid ${theme.components['app-shell'].nav['background-color']};\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n `;\n});\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledChatControlPanelIcon = styled(StyledStatusIcon)`\n ${StyledUserStatusIcon} {\n position: absolute;\n width: 0.875rem;\n height: 0.875rem;\n z-index: 1;\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n }\n`;\n"]}

package/lib/components/Chat/SuggestedReplyPicker.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,~~EAAuB~~,MAAM,OAAO,CAAC;~~AAGjG~~,OAAO,EAQL,YAAY,~~EACb~~,MAAM,yBAAyB,CAAC;AAOjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,wBAAwB,yGAAe,CAAC;AAsBrD,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,qDAAqD;IACrD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,~~CAsHnF~~,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
1	+ {"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAY,MAAM,OAAO,CAAC;AAGtF,OAAO,EAQL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAOjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,wBAAwB,yGAAe,CAAC;AAsBrD,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,qDAAqD;IACrD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAoInF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}

package/lib/components/Chat/SuggestedReplyPicker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp, useLiveLog } from '@pega/cosmos-react-core';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
 import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
@@ -29,11 +29,32 @@ const StyledSuggestedReplyContainer = styled.div(props => {
 StyledSuggestedReplyContainer.defaultProps = defaultThemeProp;
 const SuggestedReplyPicker = forwardRef((props, ref) => {
     const { replies = [], onSelect, onDismiss, ...restProps } = props;
-    const [currentReply, setCurrentReply] = useState(null);
-    useEffect(() => {
-        setCurrentReply(replies.length > 0 ? replies[0] : null);
-    }, [replies]);
+    const { announcePolite } = useLiveLog();
+    const [currentReply, setCurrentReply] = useState(replies[0] ?? null);
     const t = useI18n();
+    // Making the suggested replies left/right button cyclic and SR to announce on change
+    const onSuggestedReplyChange = (mode) => {
+        setCurrentReply(prevReply => {
+            if (prevReply) {
+                const prevReplyIndex = replies.indexOf(prevReply);
+                const totalReplies = replies.length;
+                if (totalReplies > 0) {
+                    let replyIndex = mode === 'prev' ? prevReplyIndex - 1 : prevReplyIndex + 1;
+                    replyIndex = (replyIndex + totalReplies) % totalReplies;
+                    announcePolite({
+                        message: `${t('suggested_replies_current_of_total', [
+                            replyIndex + 1,
+                            replies.length
+                        ])},
+                 ${t('confidence_percentage', [replies[replyIndex].confidence])},${replies[replyIndex]?.message}`,
+                        type: 'acknowledgement'
+                    });
+                    return replies[replyIndex];
+                }
+            }
+            return null;
+        });
+    };
     return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledSuggestedReplyHeader, container: {
                     justify: 'between',
                     alignContent: 'center'
@@ -41,38 +62,27 @@ const SuggestedReplyPicker = forwardRef((props, ref) => {
                             alignItems: 'center',
                             gap: 1
                         }, children: [_jsx(Icon, { name: 'bulb-solid', as: StyledSuggestedReplyIcon }), currentReply && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies_current_of_total', [
-                                            replies.indexOf(currentReply) + 1,
+                                            replies.length > 0 && currentReply ? replies.indexOf(currentReply) + 1 : 0,
                                             replies.length
                                         ]) }), _jsx(Text, { variant: 'secondary', children: t('confidence_percentage', [currentReply.confidence]) })] }))] }), _jsx(Button, { icon: true, variant: 'simple', onClick: onDismiss, "aria-label": t('dismiss_suggested_replies'), children: _jsx(Icon, { name: 'times' }) })] }), _jsxs(Flex, { container: {
                     direction: 'column',
                     gap: 1
                 }, as: StyledSuggestedReplyContent, children: [currentReply && _jsx("div", { children: currentReply.message }), _jsxs(Flex, { container: {
                             justify: 'center'
-                        }, children: [_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.indexOf(currentReply) === 0, onClick: () => {
-                                    setCurrentReply(prevCurrentReply => {
-                                        if (prevCurrentReply) {
-                                            const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);
-                                            if (prevCurrentReplyIndex - 1 >= 0 && replies.length > 0) {
-                                                return replies[prevCurrentReplyIndex - 1];
-                                            }
-                                        }
-                                        return null;
-                                    });
+                        }, children: [_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.length <= 1, onClick: () => {
+                                    onSuggestedReplyChange('prev');
                                 }, children: _jsx(Icon, { name: 'caret-left' }) }), _jsx(Button, { disabled: currentReply === null, onClick: () => {
                                     if (currentReply) {
                                         onSelect(currentReply);
                                     }
-                                }, children: t('use') }), _jsx(Button, { icon: true, "aria-label": t('next_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.indexOf(currentReply) === replies.length - 1, onClick: () => {
-                                    setCurrentReply(prevCurrentReply => {
-                                        if (prevCurrentReply) {
-                                            const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);
-                                            if (prevCurrentReplyIndex + 1 <= replies.length) {
-                                                return replies[prevCurrentReplyIndex + 1];
-                                            }
-                                        }
-                                        return null;
-                                    });
-                                }, children: _jsx(Icon, { name: 'caret-right' }) })] })] })] }));
+                                }, "aria-label": replies.length > 0 && currentReply
+                                    ? t('use_current_template', [
+                                        replies.length > 0 && currentReply ? replies.indexOf(currentReply) + 1 : 0,
+                                        replies.length
+                                    ])
+                                    : '', children: t('use') }), _jsx(Button, { icon: true, "aria-label": t('next_suggested_reply'), variant: 'simple', onClick: () => {
+                                    onSuggestedReplyChange('next');
+                                }, disabled: currentReply === null || replies.length <= 1, children: _jsx(Icon, { name: 'caret-right' }) })] })] })] }));
 });
 export default SuggestedReplyPicker;
 //# sourceMappingURL=SuggestedReplyPicker.js.map