@pega/cosmos-react-social 5.0.0-dev.4.9 → 5.0.0-dev.6.0

package/lib/components/Chat/ChatBody.js

@@ -0,0 +1,292 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+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, 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';
+import SystemMessage, { StyledSystemMessage } from './SystemMessage';
+import TypeIndicator from './TypeIndicator';
+import { StyledMessageContainer } from './Message.styles';
+registerIcon(caretDownIcon);
+export const NewMessageSeparatorId = 'new-message-separator';
+const StyledMessageList = styled.ul ``;
+const StyledSession = styled.div ``;
+const StyledChatBody = styled.div(props => {
+    const { theme: { base: { shadow: { high: shadowHigh, focus }, colors: { white }, spacing, palette } } } = props;
+    return css `
+    position: relative;
+    overflow-y: hidden;
+
+    > ${StyledButton} {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-shadow: ${shadowHigh};
+      z-index: 1;
+      background-color: ${white};
+    }
+
+    > ${StyledMessageList} {
+      overflow-y: auto;
+      list-style-type: none;
+      height: 100%;
+
+      > ${StyledSession} {
+        padding-inline: 1rem;
+        :not(:last-child) {
+          border-block-end: 0.0625rem solid ${palette['border-line']};
+          margin-block-end: ${spacing};
+          padding-block-end: ${spacing};
+        }
+      }
+      ${StyledMessageContainer}, ${StyledSystemMessage} {
+        &:focus-visible {
+          box-shadow: ${focus};
+          outline: none;
+        }
+        margin-block-end: ${spacing};
+      }
+    }
+  `;
+});
+StyledChatBody.defaultProps = defaultThemeProp;
+const ScrollToLatest = props => {
+    const { scrollContainerRef } = props;
+    useLayoutEffect(() => {
+        if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollTop =
+                scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;
+        }
+    });
+    return null;
+};
+const ChatMessage = ({ agentSerial, message }) => {
+    const getAgentVariant = (senderId, senderType, direction = 'in') => {
+        if (agentSerial.current === null)
+            return undefined;
+        if (senderType === 'agent' && direction === 'in') {
+            if (agentSerial.current[senderId] !== undefined) {
+                return agentSerial.current[senderId];
+            }
+            const nextIndex = Object.entries(agentSerial.current).length;
+            agentSerial.current[senderId] = nextIndex;
+            return nextIndex;
+        }
+        return undefined;
+    };
+    if (isMessageListItem(message)) {
+        const { id, senderType, direction, senderId } = message;
+        const agentVariant = getAgentVariant(senderId, senderType, direction);
+        return _createElement(Message, { ...message, key: id, agentVariant: agentVariant });
+    }
+    if (isSystemMessageListItem(message)) {
+        const extraProps = {};
+        const { id } = message;
+        if (id === NewMessageSeparatorId) {
+            extraProps['data-new-message-separator'] = NewMessageSeparatorId;
+        }
+        return _createElement(SystemMessage, { ...message, key: id, ...extraProps });
+    }
+    if (isTypeIndicatorListItem(message)) {
+        const { id, senderId, senderType } = message;
+        const agentVariant = getAgentVariant(senderId, senderType);
+        return _createElement(TypeIndicator, { ...message, key: id, agentVariant: agentVariant });
+    }
+    return null;
+};
+const ChatBody = forwardRef(function ChatBody(props, ref) {
+    const { transcripts, liveChat, unreadMessageCount = 0, onScrollToButtonClick, handle, loading, offset = -1, loadMore, ...restProps } = props;
+    const t = useI18n();
+    const conversationRef = useRef(null);
+    const scrollRef = useRef(false);
+    const buttonRef = useRef(null);
+    const focusInMessageList = useRef(false);
+    const initialMessageListFocused = useRef(false);
+    const elementRef = useRef(null);
+    const activeElementIndex = useRef(-1);
+    const agentSerial = useRef({});
+    const [messageList, setMessageList] = useState([]);
+    const [verticalNav, setVerticalNav] = useState(true);
+    const { announcePolite } = useLiveLog();
+    const isScrolledToLatest = useCallback(() => {
+        return conversationRef.current
+            ? conversationRef.current.scrollHeight -
+                conversationRef.current.scrollTop -
+                conversationRef.current.offsetHeight <=
+                30
+            : true;
+    }, [conversationRef.current]);
+    const scrollToLatestMessage = useCallback(() => {
+        if (conversationRef.current) {
+            conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+            focusInMessageList.current = true;
+            messageList[messageList.length - 1]?.focus();
+            activeElementIndex.current = messageList.length - 1;
+        }
+    }, [conversationRef.current, messageList]);
+    const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);
+    const onMessageListScroll = useCallback(() => {
+        const isScrolled = isScrolledToLatest();
+        if (scrollRef.current && isScrolled) {
+            scrollRef.current = false;
+            if (unreadMessageCount) {
+                onScrollToButtonClick?.();
+            }
+        }
+        if (!scrollRef.current && !isScrolled) {
+            scrollRef.current = true;
+        }
+        setDisplayScrollToLatest(!isScrolled);
+    }, [isScrolledToLatest(), unreadMessageCount]);
+    const scrollToNewMessage = useCallback(() => {
+        if (conversationRef.current) {
+            setDisplayScrollToLatest(false);
+            const newMessageIndicatorEle = conversationRef.current.querySelector('[data-new-message-separator]');
+            if (newMessageIndicatorEle &&
+                newMessageIndicatorEle.nextElementSibling instanceof HTMLElement) {
+                conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;
+                focusInMessageList.current = true;
+                newMessageIndicatorEle.nextElementSibling.focus();
+                activeElementIndex.current =
+                    messageList.findIndex(item => item?.hasAttribute('data-new-message-separator')) + 1;
+            }
+            else {
+                scrollToLatestMessage();
+            }
+        }
+    }, [conversationRef.current, messageList]);
+    useImperativeHandle(handle, () => ({
+        isScrolledToLatest,
+        scrollToLatestMessage,
+        scrollToNewMessage
+    }), [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]);
+    useItemIntersection(conversationRef, offset, () => {
+        loadMore?.();
+    }, ':scope > div > li');
+    useEffect(() => {
+        const focusableElements = conversationRef.current?.querySelectorAll('li[type="system"],li[type="message"],li[type="typing"]');
+        if (focusableElements)
+            setMessageList(Array.from(focusableElements));
+        if (focusableElements && initialMessageListFocused.current === false) {
+            activeElementIndex.current = focusableElements.length - 1;
+        }
+    }, [transcripts, liveChat]);
+    useEffect(() => {
+        elementRef.current = messageList[activeElementIndex.current];
+        if (verticalNav) {
+            elementRef.current?.focus();
+        }
+        else {
+            getFocusables(elementRef)[0]?.focus();
+        }
+    }, [verticalNav]);
+    useArrows(conversationRef, {
+        cycle: true,
+        selector: ':scope > div > li',
+        dir: 'up-down',
+        allowTabFocus: true
+    }, [transcripts, liveChat]);
+    useArrows(elementRef, {
+        cycle: true,
+        selector: 'li :is(a, button, input, textarea, select, details)',
+        dir: 'left-right',
+        allowTabFocus: true
+    }, [transcripts, liveChat, verticalNav]);
+    const focusSiblingElement = (currentElement, isShiftKey = false) => {
+        elementRef.current = currentElement;
+        const focusableElements = getFocusables(elementRef);
+        if (focusableElements?.length > 0) {
+            focusableElements?.[isShiftKey ? focusableElements.length - 1 : 0].focus();
+        }
+        else {
+            const element = isShiftKey
+                ? elementRef.current?.previousElementSibling
+                : elementRef.current?.nextElementSibling;
+            if (element)
+                focusSiblingElement(element, isShiftKey);
+        }
+    };
+    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: {
+                    direction: 'column'
+                }, ref: ref, children: [_jsxs(StyledMessageList, { ref: conversationRef, onScroll: debounce(onMessageListScroll, 100), onFocus: () => {
+                            if (!focusInMessageList.current) {
+                                initialMessageListFocused.current = true;
+                                elementRef.current = messageList[activeElementIndex.current];
+                                elementRef.current?.focus();
+                                focusInMessageList.current = true;
+                            }
+                        }, onKeyDown: e => {
+                            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                                elementRef.current = messageList[activeElementIndex.current];
+                                if (getFocusables(elementRef).length > 0) {
+                                    setVerticalNav(false);
+                                }
+                            }
+                            else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                                if (e.key === 'ArrowUp') {
+                                    activeElementIndex.current =
+                                        activeElementIndex.current === 0
+                                            ? messageList.length - 1
+                                            : activeElementIndex.current - 1;
+                                }
+                                else {
+                                    activeElementIndex.current =
+                                        activeElementIndex.current === messageList.length - 1
+                                            ? 0
+                                            : activeElementIndex.current + 1;
+                                }
+                                setVerticalNav(true);
+                            }
+                            else if (e.key === 'Tab') {
+                                e.preventDefault();
+                                focusInMessageList.current = false;
+                                if (e.shiftKey) {
+                                    const prevElement = conversationRef?.current?.parentElement?.previousElementSibling;
+                                    if (prevElement)
+                                        focusSiblingElement(prevElement, true);
+                                }
+                                else if (unreadMessageCount > 0 || displayScrollLatest) {
+                                    buttonRef?.current?.focus();
+                                }
+                                else {
+                                    const nextElement = conversationRef.current?.parentElement?.nextElementSibling;
+                                    if (nextElement)
+                                        focusSiblingElement(nextElement);
+                                }
+                            }
+                        }, children: [loading && _jsx(Progress, { as: 'li', placement: 'block' }), transcripts.map(session => {
+                                return (_jsx(StyledSession, { children: session.messages.map(message => (_jsx(ChatMessage, { message: message, agentSerial: agentSerial }, message.id))) }, session.id));
+                            }), _jsx(StyledSession, { children: liveChat.map(message => (_jsx(ChatMessage, { message: message, agentSerial: agentSerial }, message.id))) })] }), (unreadMessageCount > 0 || displayScrollLatest) && (_jsxs(Button, { "aria-label": unreadMessageCount > 0
+                            ? t('scroll_to_unread_messages')
+                            : t('scroll_to_latest_message'), onClick: () => {
+                            if (unreadMessageCount > 0) {
+                                scrollToNewMessage();
+                            }
+                            else {
+                                scrollToLatestMessage();
+                            }
+                            onScrollToButtonClick?.();
+                        }, icon: unreadMessageCount === 0, ref: buttonRef, children: [_jsx(Icon, { name: 'caret-down' }), unreadMessageCount > 0 && _jsxs(_Fragment, { children: ["\u00A0 ", t('new_messages')] })] }))] }), isScrolledToLatest() && _jsx(ScrollToLatest, { scrollContainerRef: conversationRef })] }));
+});
+export default ChatBody;
+//# sourceMappingURL=ChatBody.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBody.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":";;AAAA,OAAO,EACL,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,MAAM,EACN,QAAQ,EACR,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,IAAI,EACJ,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACT,OAAO,EACP,mBAAmB,EACnB,UAAU,EACV,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAEnG,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAOnG,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,aAAa,EAAE,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,YAAY,CAAC,aAAa,CAAC,CAAC;AAE5B,MAAM,CAAC,MAAM,qBAAqB,GAAG,uBAAuB,CAAC;AAE7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AACtC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEnC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACxC,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,EACnC,MAAM,EAAE,EAAE,KAAK,EAAE,EACjB,OAAO,EACP,OAAO,EACR,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;;QAIJ,YAAY;;;;;oBAKA,UAAU;;0BAEJ,KAAK;;;QAGvB,iBAAiB;;;;;UAKf,aAAa;;;8CAGuB,OAAO,CAAC,aAAa,CAAC;8BACtC,OAAO;+BACN,OAAO;;;QAG9B,sBAAsB,KAAK,mBAAmB;;wBAE9B,KAAK;;;4BAGD,OAAO;;;GAGhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,cAAc,GAEf,KAAK,CAAC,EAAE;IACX,MAAM,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IACrC,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,kBAAkB,CAAC,OAAO,EAAE;YAC9B,kBAAkB,CAAC,OAAO,CAAC,SAAS;gBAClC,kBAAkB,CAAC,OAAO,CAAC,YAAY,GAAG,kBAAkB,CAAC,OAAO,CAAC,YAAY,CAAC;SACrF;IACH,CAAC,CAAC,CAAC;IACH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAOF,MAAM,WAAW,GAAwC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE;IACpF,MAAM,eAAe,GAAG,CACtB,QAAkC,EAClC,UAAsC,EACtC,YAAuC,IAAI,EAC3C,EAAE;QACF,IAAI,WAAW,CAAC,OAAO,KAAK,IAAI;YAAE,OAAO,SAAS,CAAC;QACnD,IAAI,UAAU,KAAK,OAAO,IAAI,SAAS,KAAK,IAAI,EAAE;YAChD,IAAI,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,SAAS,EAAE;gBAC/C,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;aACtC;YAED,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;YAC7D,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;YAC1C,OAAO,SAAS,CAAC;SAClB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,IAAI,iBAAiB,CAAC,OAAO,CAAC,EAAE;QAC9B,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;QACxD,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;QACtE,OAAO,eAAC,OAAO,OAAK,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC;KACtE;IAED,IAAI,uBAAuB,CAAC,OAAO,CAAC,EAAE;QACpC,MAAM,UAAU,GAA2B,EAAE,CAAC;QAC9C,MAAM,EAAE,EAAE,EAAE,GAAG,OAAO,CAAC;QACvB,IAAI,EAAE,KAAK,qBAAqB,EAAE;YAChC,UAAU,CAAC,4BAA4B,CAAC,GAAG,qBAAqB,CAAC;SAClE;QAED,OAAO,eAAC,aAAa,OAAK,OAAO,EAAE,GAAG,EAAE,EAAE,KAAM,UAAU,GAAI,CAAC;KAChE;IAED,IAAI,uBAAuB,CAAC,OAAO,CAAC,EAAE;QACpC,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;QAC7C,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QAE3D,OAAO,eAAC,aAAa,OAAK,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC;KAC5E;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,KAAqC,EACrC,GAAyB;IAEzB,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,kBAAkB,GAAG,CAAC,EACtB,qBAAqB,EACrB,MAAM,EACN,OAAO,EACP,MAAM,GAAG,CAAC,CAAC,EACX,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,eAAe,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,WAAW,GAAG,MAAM,CAAgC,EAAE,CAAC,CAAC;IAE9D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAA2B,EAAE,CAAC,CAAC;IAC7E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErD,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IAExC,MAAM,kBAAkB,GAA8C,WAAW,CAAC,GAAG,EAAE;QACrF,OAAO,eAAe,CAAC,OAAO;YAC5B,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,YAAY;gBAClC,eAAe,CAAC,OAAO,CAAC,SAAS;gBACjC,eAAe,CAAC,OAAO,CAAC,YAAY;gBACpC,EAAE;YACN,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;IAE9B,MAAM,qBAAqB,GAAiD,WAAW,CAAC,GAAG,EAAE;QAC3F,IAAI,eAAe,CAAC,OAAO,EAAE;YAC3B,eAAe,CAAC,OAAO,CAAC,SAAS,GAAG,eAAe,CAAC,OAAO,CAAC,YAAY,CAAC;YACzE,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;YAClC,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;YAC7C,kBAAkB,CAAC,OAAO,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;SACrD;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3C,MAAM,CAAC,mBAAmB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,MAAM,UAAU,GAAG,kBAAkB,EAAE,CAAC;QACxC,IAAI,SAAS,CAAC,OAAO,IAAI,UAAU,EAAE;YACnC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;YAC1B,IAAI,kBAAkB,EAAE;gBACtB,qBAAqB,EAAE,EAAE,CAAC;aAC3B;SACF;QAED,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE;YACrC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;SAC1B;QAED,wBAAwB,CAAC,CAAC,UAAU,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,kBAAkB,EAAE,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE/C,MAAM,kBAAkB,GAA8C,WAAW,CAAC,GAAG,EAAE;QACrF,IAAI,eAAe,CAAC,OAAO,EAAE;YAC3B,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAChC,MAAM,sBAAsB,GAAG,eAAe,CAAC,OAAO,CAAC,aAAa,CAClE,8BAA8B,CAC/B,CAAC;YACF,IACE,sBAAsB;gBACtB,sBAAsB,CAAC,kBAAkB,YAAY,WAAW,EAChE;gBACA,eAAe,CAAC,OAAO,CAAC,SAAS,GAAG,sBAAsB,CAAC,SAAS,CAAC;gBACrE,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;gBAClC,sBAAsB,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC;gBAClD,kBAAkB,CAAC,OAAO;oBACxB,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,4BAA4B,CAAC,CAAC,GAAG,CAAC,CAAC;aACvF;iBAAM;gBACL,qBAAqB,EAAE,CAAC;aACzB;SACF;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3C,mBAAmB,CACjB,MAAM,EACN,GAAG,EAAE,CAAC,CAAC;QACL,kBAAkB;QAClB,qBAAqB;QACrB,kBAAkB;KACnB,CAAC,EACF,CAAC,kBAAkB,EAAE,qBAAqB,EAAE,kBAAkB,CAAC,CAChE,CAAC;IAEF,mBAAmB,CACjB,eAAe,EACf,MAAM,EACN,GAAG,EAAE;QACH,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EACD,mBAAmB,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,eAAe,CAAC,OAAO,EAAE,gBAAgB,CACjE,wDAAwD,CACzD,CAAC;QAEF,IAAI,iBAAiB;YAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAErE,IAAI,iBAAiB,IAAI,yBAAyB,CAAC,OAAO,KAAK,KAAK,EAAE;YACpE,kBAAkB,CAAC,OAAO,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;SAC3D;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC7D,IAAI,WAAW,EAAE;YACf,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;SACvC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CACP,eAAe,EACf;QACE,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,mBAAmB;QAC7B,GAAG,EAAE,SAAS;QACd,aAAa,EAAE,IAAI;KACpB,EACD,CAAC,WAAW,EAAE,QAAQ,CAAC,CACxB,CAAC;IAEF,SAAS,CACP,UAAU,EACV;QACE,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,qDAAqD;QAC/D,GAAG,EAAE,YAAY;QACjB,aAAa,EAAE,IAAI;KACpB,EACD,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,CAAC,CACrC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,cAAuB,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE;QAC1E,UAAU,CAAC,OAAO,GAAG,cAA6B,CAAC;QACnD,MAAM,iBAAiB,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,iBAAiB,EAAE,MAAM,GAAG,CAAC,EAAE;YACjC,iBAAiB,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;SAC5E;aAAM;YACL,MAAM,OAAO,GAAG,UAAU;gBACxB,CAAC,CAAC,UAAU,CAAC,OAAO,EAAE,sBAAsB;gBAC5C,CAAC,CAAC,UAAU,CAAC,OAAO,EAAE,kBAAkB,CAAC;YAE3C,IAAI,OAAO;gBAAE,mBAAmB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;SACvD;IACH,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,eAAe,CAAC,EAAE,GAAG,EAAE;QACjD,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE;YACxB,MAAM,aAAa,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACpD,IACE,uBAAuB,CAAC,aAAa,CAAC;gBACtC,CAAC,iBAAiB,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,SAAS,KAAK,IAAI,CAAC,EACtE;gBACA,cAAc,CAAC;oBACb,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC;oBACzB,IAAI,EAAE,OAAO;iBACd,CAAC,CAAC;aACJ;SACF;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,8BACE,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;iBACR,EACD,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;iBACpB,EACD,GAAG,EAAE,GAAG,aAER,MAAC,iBAAiB,IAChB,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE,QAAQ,CAAC,mBAAmB,EAAE,GAAG,CAAC,EAC5C,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;gCAC/B,yBAAyB,CAAC,OAAO,GAAG,IAAI,CAAC;gCACzC,UAAU,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;gCAC7D,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gCAC5B,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;6BACnC;wBACH,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE;4BACb,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE;gCACnD,UAAU,CAAC,OAAO,GAAG,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;gCAC7D,IAAI,aAAa,CAAC,UAAU,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;oCACxC,cAAc,CAAC,KAAK,CAAC,CAAC;iCACvB;6BACF;iCAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;gCACvD,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;oCACvB,kBAAkB,CAAC,OAAO;wCACxB,kBAAkB,CAAC,OAAO,KAAK,CAAC;4CAC9B,CAAC,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC;4CACxB,CAAC,CAAC,kBAAkB,CAAC,OAAO,GAAG,CAAC,CAAC;iCACtC;qCAAM;oCACL,kBAAkB,CAAC,OAAO;wCACxB,kBAAkB,CAAC,OAAO,KAAK,WAAW,CAAC,MAAM,GAAG,CAAC;4CACnD,CAAC,CAAC,CAAC;4CACH,CAAC,CAAC,kBAAkB,CAAC,OAAO,GAAG,CAAC,CAAC;iCACtC;gCACD,cAAc,CAAC,IAAI,CAAC,CAAC;6BACtB;iCAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;gCAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;gCACnB,kBAAkB,CAAC,OAAO,GAAG,KAAK,CAAC;gCACnC,IAAI,CAAC,CAAC,QAAQ,EAAE;oCACd,MAAM,WAAW,GAAG,eAAe,EAAE,OAAO,EAAE,aAAa,EAAE,sBAAsB,CAAC;oCACpF,IAAI,WAAW;wCAAE,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;iCACzD;qCAAM,IAAI,kBAAkB,GAAG,CAAC,IAAI,mBAAmB,EAAE;oCACxD,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;iCAC7B;qCAAM;oCACL,MAAM,WAAW,GAAG,eAAe,CAAC,OAAO,EAAE,aAAa,EAAE,kBAAkB,CAAC;oCAC/E,IAAI,WAAW;wCAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;iCACnD;6BACF;wBACH,CAAC,aAEA,OAAO,IAAI,KAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,GAAG,EACjD,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gCACzB,OAAO,CACL,KAAC,aAAa,cACX,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAC/B,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,IAAO,OAAO,CAAC,EAAE,CAAI,CAC7E,CAAC,IAHgB,OAAO,CAAC,EAAE,CAId,CACjB,CAAC;4BACJ,CAAC,CAAC,EACF,KAAC,aAAa,cACX,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACvB,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,IAAO,OAAO,CAAC,EAAE,CAAI,CAC7E,CAAC,GACY,IACE,EACnB,CAAC,kBAAkB,GAAG,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAClD,MAAC,MAAM,kBAEH,kBAAkB,GAAG,CAAC;4BACpB,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC;4BAChC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,EAEnC,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,kBAAkB,GAAG,CAAC,EAAE;gCAC1B,kBAAkB,EAAE,CAAC;6BACtB;iCAAM;gCACL,qBAAqB,EAAE,CAAC;6BACzB;4BACD,qBAAqB,EAAE,EAAE,CAAC;wBAC5B,CAAC,EACD,IAAI,EAAE,kBAAkB,KAAK,CAAC,EAC9B,GAAG,EAAE,SAAS,aAEd,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,EACzB,kBAAkB,GAAG,CAAC,IAAI,yCAAU,CAAC,CAAC,cAAc,CAAC,IAAI,IACnD,CACV,IACI,EACN,kBAAkB,EAAE,IAAI,KAAC,cAAc,IAAC,kBAAkB,EAAE,eAAe,GAAI,IAC/E,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useEffect\n} from 'react';\nimport type { FunctionComponent, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  debounce,\n  defaultThemeProp,\n  Flex,\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 type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport { isMessageListItem, isSystemMessageListItem, isTypeIndicatorListItem } from './Chat.types';\nimport type {\n  ChatBodyHandleValue,\n  ChatBodyListItemProps,\n  ChatBodyProps,\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(function ChatBody(\n  props: PropsWithoutRef<ChatBodyProps>,\n  ref: ChatBodyProps['ref']\n) {\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: 'li :is(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 = 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 && <>&nbsp; {t('new_messages')}</>}\n          </Button>\n        )}\n      </Flex>\n      {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n    </>\n  );\n});\n\nexport default ChatBody;\n"]}

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

@@ -0,0 +1,50 @@
+import type { FunctionComponent, Ref, ReactNode, RefObject, KeyboardEvent } from 'react';
+import type { ForwardProps, FileUploadItemProps } from '@pega/cosmos-react-core';
+export type SpecialKeysConfig = {
+    /** Collection of specialKeys */
+    keys: string[];
+    /** onSpecialKey is fired when a special key is typed in Textarea */
+    onSpecialKey: (e: KeyboardEvent<HTMLTextAreaElement>, key: string) => void;
+};
+export interface ChatComposerProps {
+    /** Place holder */
+    placeholder?: string;
+    /** Default message to populate on load */
+    defaultMessage?: string;
+    /** Max character limit */
+    maxLength?: number;
+    /** Callback when send button is clicked */
+    onSend: (message: string) => void;
+    /** Enter / Return key sends message */
+    enterKeySendsMessage?: boolean;
+    /** Max number of attachments to be allowed in chat composer.
+     * If zero is passed, add attachments icon will be hidden. same rule applies if prop is not passed.
+     * If attachments added are >= maxAttachments, add attachments icon will be disabled.
+     */
+    maxAttachments?: number;
+    /** show/hide emoji */
+    showEmoji?: boolean;
+    /** Attachments list */
+    attachments?: FileUploadItemProps[];
+    /** Callback when attachment icon is clicked */
+    onAddAttachment?: () => void;
+    /** Special Keys configuration */
+    specialKeysConfig?: SpecialKeysConfig;
+    /** Disables the composer area */
+    disabled?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Ref to the Imperative handle */
+    ref?: Ref<ChatComposerImperativeHandleProps>;
+}
+export declare const StyledAttachmentsListContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export interface ChatComposerImperativeHandleProps {
+    /** Function to append a message */
+    appendToMessage: (appendMessage: string, position?: 'cursor' | 'start' | 'end' | 'specialKey') => void;
+    /** Actual ref to Chat composer component */
+    chatComposerRef: RefObject<HTMLDivElement | undefined>;
+    textAreaRef: RefObject<HTMLTextAreaElement | undefined>;
+}
+declare const ChatComposer: FunctionComponent<ChatComposerProps & ForwardProps>;
+export default ChatComposer;
+//# sourceMappingURL=ChatComposer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,GAAG,EAEH,SAAS,EAET,SAAS,EACT,aAAa,EACd,MAAM,OAAO,CAAC;AAqBf,OAAO,KAAK,EAGV,YAAY,EACZ,mBAAmB,EACpB,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;AA4ED,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,CAiTrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Chat/ChatComposer.js

@@ -0,0 +1,221 @@
+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, 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(FileUploadItem) ``;
+const StyledAttachmentElementContainer = styled.div(({ disabled, theme }) => {
+    return (disabled &&
+        css `
+        &:focus {
+          box-shadow: ${theme.base.shadow.focus};
+          border-radius: 50%;
+          outline: none;
+        }
+      `);
+});
+const StyledPreviewButton = styled(BareButton) ``;
+const StyledDeleteButton = styled(BareButton) ``;
+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']};
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+      textarea {
+        border-radius: ${theme.base['border-radius']};
+        height: 5rem;
+        border: 0.0625rem solid ${theme.base.colors.gray['extra-light']};
+        max-width: 100%;
+      }
+      ${StyledAttachmentItem} {
+        ${disabled &&
+        css `
+          pointer-events: none;
+          opacity: ${transparentBg};
+        `}
+      }
+
+      ${StyledAttachmentElementContainer} {
+        ${disabled &&
+        css `
+          pointer-events: none;
+        `}
+      }
+
+      ${StyledPreviewButton} {
+        color: ${theme.base.palette.interactive};
+        font-weight: bold;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      ${StyledDeleteButton} {
+        color: ${theme.base.palette.interactive};
+      }
+    `;
+});
+StyledChatComposer.defaultProps = defaultThemeProp;
+StyledAttachmentElementContainer.defaultProps = defaultThemeProp;
+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(function ChatComposer(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);
+    useEffect(() => {
+        setMessage(defaultMessage);
+    }, [defaultMessage]);
+    const t = useI18n();
+    const textAreaRef = useRef(null);
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const [emojiBtnEl, setEmojiBtnEl] = useElement();
+    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();
+    const [announcement, setAnnouncement] = useState('');
+    const lastEnteredSpecialKey = useRef(null);
+    const appendToMessage = useCallback((appendMessage, position, selectText = true) => {
+        let selectionStart;
+        let selectionEnd;
+        if (textAreaRef.current) {
+            if (position === 'start') {
+                textAreaRef.current.value = appendMessage + textAreaRef.current.value;
+                selectionStart = 0;
+                selectionEnd = appendMessage.length;
+            }
+            else if (position === 'end') {
+                const initialEnd = textAreaRef.current.value.length;
+                textAreaRef.current.value += appendMessage;
+                selectionStart = initialEnd;
+                selectionEnd = initialEnd + appendMessage.length;
+            }
+            else if (position === 'specialKey' && lastEnteredSpecialKey.current) {
+                const replaceChars = lastEnteredSpecialKey.current.length;
+                const currentSelectionStart = textAreaRef.current.selectionStart;
+                textAreaRef.current.value =
+                    textAreaRef.current.value.substring(0, textAreaRef.current.selectionStart - replaceChars) +
+                        appendMessage +
+                        textAreaRef.current.value.substring(textAreaRef.current.selectionStart, textAreaRef.current.value.length);
+                selectionStart = currentSelectionStart - replaceChars;
+                selectionEnd = currentSelectionStart + appendMessage.length - replaceChars;
+                lastEnteredSpecialKey.current = null;
+            }
+            else {
+                const currentSelectionStart = textAreaRef.current.selectionStart;
+                textAreaRef.current.value =
+                    textAreaRef.current.value.substring(0, textAreaRef.current.selectionStart) +
+                        appendMessage +
+                        textAreaRef.current.value.substring(textAreaRef.current.selectionStart, textAreaRef.current.value.length);
+                selectionStart = currentSelectionStart;
+                selectionEnd = currentSelectionStart + appendMessage.length;
+            }
+            textAreaRef.current.selectionStart = selectText ? selectionStart : selectionEnd;
+            textAreaRef.current.selectionEnd = selectionEnd;
+            textAreaRef.current.focus();
+            setMessage(textAreaRef.current.value);
+        }
+    }, [setMessage, textAreaRef.current]);
+    const chatComposerRef = useRef(null);
+    useImperativeHandle(ref, () => ({ appendToMessage, chatComposerRef, textAreaRef }), [
+        appendToMessage,
+        chatComposerRef.current,
+        textAreaRef.current
+    ]);
+    const sendMessage = useCallback((newMessage) => {
+        if (onSend) {
+            onSend(newMessage);
+            setMessage('');
+        }
+    }, [onSend]);
+    const handleEnterKeyDown = useCallback((e) => {
+        if (enterKeySendsMessage && e.keyCode === 13 && !e.shiftKey) {
+            if (!maxLength || message.length <= maxLength) {
+                sendMessage(message);
+                setAnnouncement(t('message_sent'));
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }, [onSend, message, maxLength]);
+    const handleTextAreaChange = useCallback((e) => {
+        setMessage(e.currentTarget.value);
+        setAnnouncement('');
+    }, [setMessage]);
+    const handleSpecialKey = useCallback((e) => {
+        if (!specialKeysConfig)
+            return;
+        const { keys, onSpecialKey } = specialKeysConfig;
+        if (specialKeysConfig && keys.length > 0) {
+            const composerValue = e.currentTarget.value.substring(0, e.currentTarget.selectionStart);
+            const specialKey = keys.find(key => composerValue.endsWith(key));
+            if (specialKey) {
+                lastEnteredSpecialKey.current = specialKey;
+                onSpecialKey(e, specialKey);
+            }
+        }
+    }, [specialKeysConfig]);
+    const toggleEmoji = () => {
+        setShowEmojiPicker(!showEmojiPicker);
+    };
+    const onEmojiSelect = emojiElem => {
+        // Check that it is not a custom emoji
+        if (hasProp(emojiElem, 'native')) {
+            appendToMessage(emojiElem.native, 'cursor', false);
+        }
+        setShowEmojiPicker(false);
+    };
+    const EmojiPickerRef = useRef(null);
+    useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {
+        setShowEmojiPicker(false);
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledChatComposer, disabled: disabled, container: {
+                    direction: 'column',
+                    gap: 2
+                }, item: {
+                    shrink: 0
+                }, ...restProps, ref: chatComposerRef, children: [_jsxs(Flex, { container: {
+                            direction: 'column',
+                            gap: 0.5
+                        }, 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'), autoResize: false })] }), _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: () => {
+                                    sendMessage(message);
+                                    setAnnouncement(t('message_sent'));
+                                }, children: t('send') }), announcement && (_jsx(VisuallyHiddenText, { "aria-live": 'assertive', children: announcement }))] })] }), _jsx(Popover, { show: showEmojiPicker, target: emojiBtnEl, placement: 'top-start', modifiers: [
+                    {
+                        name: 'flip',
+                        enabled: true
+                    }
+                ], children: _jsx(EmojiPicker, { ref: EmojiPickerRef, onSelect: onEmojiSelect }) })] }));
+});
+export default ChatComposer;
+//# sourceMappingURL=ChatComposer.js.map