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

package/lib/components/Chat/ChatBody.js

@@ -1,5 +1,5 @@
+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, useAfterInitialEffect, useArrows, useI18n, useItemIntersection, useLiveLog, useOuterEvent } from '@pega/cosmos-react-core';
@@ -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') => {

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

@@ -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  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 <></>;\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 && <>&nbsp; {t('new_messages')}</>}\n            </Button>\n          )}\n        </Flex>\n        {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n      </>\n    );\n  }\n);\n\nexport default ChatBody;\n"]}
+{"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 && <>&nbsp; {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/ChatSettingsPanel.styles.js

@@ -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

@@ -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"]}
+{"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

@@ -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"}
+{"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

@@ -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

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

@@ -1 +1 @@
-{"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Button,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledSuggestedReplyIcon = styled.svg``;\n\nconst StyledSuggestedReplyContainer = styled.div(props => {\n  const { theme } = props;\n  return css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n    > ${StyledSuggestedReplyHeader} {\n      ${StyledSuggestedReplyIcon} {\n        font-size: 1.2rem;\n      }\n      padding: 0.5rem;\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n    > ${StyledSuggestedReplyContent} {\n      padding: 1rem;\n    }\n  `;\n});\n\nStyledSuggestedReplyContainer.defaultProps = defaultThemeProp;\n\nexport interface SuggestedReply {\n  /** Id for this suggested reply */\n  id: string;\n  /** Suggested reply message */\n  message: string;\n  /** Confidence of this suggested reply */\n  confidence: number;\n}\n\nexport interface SuggestedReplyPickerProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Suggested replies */\n  replies?: SuggestedReply[];\n  /** Callback for the event when a suggested reply is selected */\n  onSelect: (suggestedReply: SuggestedReply) => void;\n  /** Callback for the event close button is clicked */\n  onDismiss: () => void;\n}\n\nconst SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps> =\n  forwardRef(\n    (props: PropsWithoutRef<SuggestedReplyPickerProps>, ref: SuggestedReplyPickerProps['ref']) => {\n      const { replies = [], onSelect, onDismiss, ...restProps } = props;\n      const [currentReply, setCurrentReply] = useState<SuggestedReply | null>(null);\n\n      useEffect(() => {\n        setCurrentReply(replies.length > 0 ? replies[0] : null);\n      }, [replies]);\n\n      const t = useI18n();\n      return (\n        <StyledSuggestedReplyContainer ref={ref} {...restProps}>\n          <Flex\n            as={StyledSuggestedReplyHeader}\n            container={{\n              justify: 'between',\n              alignContent: 'center'\n            }}\n          >\n            <Flex\n              container={{\n                alignItems: 'center',\n                gap: 1\n              }}\n            >\n              <Icon name='bulb-solid' as={StyledSuggestedReplyIcon} />\n              {currentReply && (\n                <>\n                  <Text variant='h3'>\n                    {t('suggested_replies_current_of_total', [\n                      replies.indexOf(currentReply) + 1,\n                      replies.length\n                    ])}\n                  </Text>\n                  <Text variant='secondary'>\n                    {t('confidence_percentage', [currentReply.confidence])}\n                  </Text>\n                </>\n              )}\n            </Flex>\n            <Button\n              icon\n              variant='simple'\n              onClick={onDismiss}\n              aria-label={t('dismiss_suggested_replies')}\n            >\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          <Flex\n            container={{\n              direction: 'column',\n              gap: 1\n            }}\n            as={StyledSuggestedReplyContent}\n          >\n            {currentReply && <div>{currentReply.message}</div>}\n            <Flex\n              container={{\n                justify: 'center'\n              }}\n            >\n              <Button\n                icon\n                aria-label={t('prev_suggested_reply')}\n                variant='simple'\n                disabled={currentReply === null || replies.indexOf(currentReply) === 0}\n                onClick={() => {\n                  setCurrentReply(prevCurrentReply => {\n                    if (prevCurrentReply) {\n                      const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);\n                      if (prevCurrentReplyIndex - 1 >= 0 && replies.length > 0) {\n                        return replies[prevCurrentReplyIndex - 1];\n                      }\n                    }\n                    return null;\n                  });\n                }}\n              >\n                <Icon name='caret-left' />\n              </Button>\n              <Button\n                disabled={currentReply === null}\n                onClick={() => {\n                  if (currentReply) {\n                    onSelect(currentReply);\n                  }\n                }}\n              >\n                {t('use')}\n              </Button>\n              <Button\n                icon\n                aria-label={t('next_suggested_reply')}\n                variant='simple'\n                disabled={\n                  currentReply === null || replies.indexOf(currentReply) === replies.length - 1\n                }\n                onClick={() => {\n                  setCurrentReply(prevCurrentReply => {\n                    if (prevCurrentReply) {\n                      const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);\n                      if (prevCurrentReplyIndex + 1 <= replies.length) {\n                        return replies[prevCurrentReplyIndex + 1];\n                      }\n                    }\n                    return null;\n                  });\n                }}\n              >\n                <Icon name='caret-right' />\n              </Button>\n            </Flex>\n          </Flex>\n        </StyledSuggestedReplyContainer>\n      );\n    }\n  );\n\nexport default SuggestedReplyPicker;\n"]}
+{"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,gBAAgB,EAEhB,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,YAAY,CAAC,SAAS,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACxD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAErD,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,OAAO,GAAG,CAAA;kCACsB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;wBAC3C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;QACxD,0BAA0B;QAC1B,wBAAwB;;;;uCAIO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;QAEhE,2BAA2B;;;GAGhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAsB9D,MAAM,oBAAoB,GACxB,UAAU,CACR,CAAC,KAAiD,EAAE,GAAqC,EAAE,EAAE;IAC3F,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAClE,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAwB,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC;IAC5F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,qFAAqF;IACrF,MAAM,sBAAsB,GAAG,CAAC,IAAqB,EAAE,EAAE;QACvD,eAAe,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,SAAS,EAAE;gBACb,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBAClD,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;gBACpC,IAAI,YAAY,GAAG,CAAC,EAAE;oBACpB,IAAI,UAAU,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC;oBAC3E,UAAU,GAAG,CAAC,UAAU,GAAG,YAAY,CAAC,GAAG,YAAY,CAAC;oBAExD,cAAc,CAAC;wBACb,OAAO,EAAE,GAAG,CAAC,CAAC,oCAAoC,EAAE;4BAClD,UAAU,GAAG,CAAC;4BACd,OAAO,CAAC,MAAM;yBACf,CAAC;mBACC,CAAC,CAAC,uBAAuB,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,IAC7D,OAAO,CAAC,UAAU,CAAC,EAAE,OACvB,EAAE;wBACF,IAAI,EAAE,iBAAiB;qBACxB,CAAC,CAAC;oBACH,OAAO,OAAO,CAAC,UAAU,CAAC,CAAC;iBAC5B;aACF;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,6BAA6B,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aACpD,MAAC,IAAI,IACH,EAAE,EAAE,0BAA0B,EAC9B,SAAS,EAAE;oBACT,OAAO,EAAE,SAAS;oBAClB,YAAY,EAAE,QAAQ;iBACvB,aAED,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,UAAU,EAAE,QAAQ;4BACpB,GAAG,EAAE,CAAC;yBACP,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,EAAE,EAAE,wBAAwB,GAAI,EACvD,YAAY,IAAI,CACf,8BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YACf,CAAC,CAAC,oCAAoC,EAAE;4CACvC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;4CAC1E,OAAO,CAAC,MAAM;yCACf,CAAC,GACG,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YACtB,CAAC,CAAC,uBAAuB,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,GACjD,IACN,CACJ,IACI,EACP,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,SAAS,gBACN,CAAC,CAAC,2BAA2B,CAAC,YAE1C,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACP,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,GAAG,EAAE,CAAC;iBACP,EACD,EAAE,EAAE,2BAA2B,aAE9B,YAAY,IAAI,wBAAM,YAAY,CAAC,OAAO,GAAO,EAClD,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,OAAO,EAAE,QAAQ;yBAClB,aAED,KAAC,MAAM,IACL,IAAI,sBACQ,CAAC,CAAC,sBAAsB,CAAC,EACrC,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,YAAY,KAAK,IAAI,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,EACtD,OAAO,EAAE,GAAG,EAAE;oCACZ,sBAAsB,CAAC,MAAM,CAAC,CAAC;gCACjC,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACnB,EACT,KAAC,MAAM,IACL,QAAQ,EAAE,YAAY,KAAK,IAAI,EAC/B,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,YAAY,EAAE;wCAChB,QAAQ,CAAC,YAAY,CAAC,CAAC;qCACxB;gCACH,CAAC,gBAEC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY;oCAChC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE;wCACxB,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;wCAC1E,OAAO,CAAC,MAAM;qCACf,CAAC;oCACJ,CAAC,CAAC,EAAE,YAGP,CAAC,CAAC,KAAK,CAAC,GACF,EACT,KAAC,MAAM,IACL,IAAI,sBACQ,CAAC,CAAC,sBAAsB,CAAC,EACrC,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,sBAAsB,CAAC,MAAM,CAAC,CAAC;gCACjC,CAAC,EACD,QAAQ,EAAE,YAAY,KAAK,IAAI,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,YAEtD,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,IACJ,IACF,IACuB,CACjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,oBAAoB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Button,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps,\n  useLiveLog\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledSuggestedReplyIcon = styled.svg``;\n\nconst StyledSuggestedReplyContainer = styled.div(props => {\n  const { theme } = props;\n  return css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n    > ${StyledSuggestedReplyHeader} {\n      ${StyledSuggestedReplyIcon} {\n        font-size: 1.2rem;\n      }\n      padding: 0.5rem;\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n    > ${StyledSuggestedReplyContent} {\n      padding: 1rem;\n    }\n  `;\n});\n\nStyledSuggestedReplyContainer.defaultProps = defaultThemeProp;\n\nexport interface SuggestedReply {\n  /** Id for this suggested reply */\n  id: string;\n  /** Suggested reply message */\n  message: string;\n  /** Confidence of this suggested reply */\n  confidence: number;\n}\n\nexport interface SuggestedReplyPickerProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Suggested replies */\n  replies?: SuggestedReply[];\n  /** Callback for the event when a suggested reply is selected */\n  onSelect: (suggestedReply: SuggestedReply) => void;\n  /** Callback for the event close button is clicked */\n  onDismiss: () => void;\n}\n\nconst SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps> =\n  forwardRef(\n    (props: PropsWithoutRef<SuggestedReplyPickerProps>, ref: SuggestedReplyPickerProps['ref']) => {\n      const { replies = [], onSelect, onDismiss, ...restProps } = props;\n      const { announcePolite } = useLiveLog();\n      const [currentReply, setCurrentReply] = useState<SuggestedReply | null>(replies[0] ?? null);\n      const t = useI18n();\n\n      // Making the suggested replies left/right button cyclic and SR to announce on change\n      const onSuggestedReplyChange = (mode: 'prev' | 'next') => {\n        setCurrentReply(prevReply => {\n          if (prevReply) {\n            const prevReplyIndex = replies.indexOf(prevReply);\n            const totalReplies = replies.length;\n            if (totalReplies > 0) {\n              let replyIndex = mode === 'prev' ? prevReplyIndex - 1 : prevReplyIndex + 1;\n              replyIndex = (replyIndex + totalReplies) % totalReplies;\n\n              announcePolite({\n                message: `${t('suggested_replies_current_of_total', [\n                  replyIndex + 1,\n                  replies.length\n                ])},\n                 ${t('confidence_percentage', [replies[replyIndex].confidence])},${\n                  replies[replyIndex]?.message\n                }`,\n                type: 'acknowledgement'\n              });\n              return replies[replyIndex];\n            }\n          }\n          return null;\n        });\n      };\n\n      return (\n        <StyledSuggestedReplyContainer ref={ref} {...restProps}>\n          <Flex\n            as={StyledSuggestedReplyHeader}\n            container={{\n              justify: 'between',\n              alignContent: 'center'\n            }}\n          >\n            <Flex\n              container={{\n                alignItems: 'center',\n                gap: 1\n              }}\n            >\n              <Icon name='bulb-solid' as={StyledSuggestedReplyIcon} />\n              {currentReply && (\n                <>\n                  <Text variant='h3'>\n                    {t('suggested_replies_current_of_total', [\n                      replies.length > 0 && currentReply ? replies.indexOf(currentReply) + 1 : 0,\n                      replies.length\n                    ])}\n                  </Text>\n                  <Text variant='secondary'>\n                    {t('confidence_percentage', [currentReply.confidence])}\n                  </Text>\n                </>\n              )}\n            </Flex>\n            <Button\n              icon\n              variant='simple'\n              onClick={onDismiss}\n              aria-label={t('dismiss_suggested_replies')}\n            >\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          <Flex\n            container={{\n              direction: 'column',\n              gap: 1\n            }}\n            as={StyledSuggestedReplyContent}\n          >\n            {currentReply && <div>{currentReply.message}</div>}\n            <Flex\n              container={{\n                justify: 'center'\n              }}\n            >\n              <Button\n                icon\n                aria-label={t('prev_suggested_reply')}\n                variant='simple'\n                disabled={currentReply === null || replies.length <= 1}\n                onClick={() => {\n                  onSuggestedReplyChange('prev');\n                }}\n              >\n                <Icon name='caret-left' />\n              </Button>\n              <Button\n                disabled={currentReply === null}\n                onClick={() => {\n                  if (currentReply) {\n                    onSelect(currentReply);\n                  }\n                }}\n                aria-label={\n                  replies.length > 0 && currentReply\n                    ? t('use_current_template', [\n                        replies.length > 0 && currentReply ? replies.indexOf(currentReply) + 1 : 0,\n                        replies.length\n                      ])\n                    : ''\n                }\n              >\n                {t('use')}\n              </Button>\n              <Button\n                icon\n                aria-label={t('next_suggested_reply')}\n                variant='simple'\n                onClick={() => {\n                  onSuggestedReplyChange('next');\n                }}\n                disabled={currentReply === null || replies.length <= 1}\n              >\n                <Icon name='caret-right' />\n              </Button>\n            </Flex>\n          </Flex>\n        </StyledSuggestedReplyContainer>\n      );\n    }\n  );\n\nexport default SuggestedReplyPicker;\n"]}

package/lib/components/Email/EmailCaseView.js

@@ -30,7 +30,7 @@ const EmailCaseView = ({ header, content, banners, utilities, utilitiesSummaryIt
     }, [isMediumOrAbove, onToggleUtilities, showExpandedUtilities, utilities]);
     return (_jsxs(StyledEmailCaseViewContainer, { ...restProps, ref: emailCaseRef, children: [header && (_jsxs(Flex, { container: { alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }, as: StyledEmailCaseViewHeader, children: [header.icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: header.icon }) })), _jsx(Text, { variant: 'h1', children: header.title })] })), _jsxs(Flex, { container: { gap: 2 }, as: StyledEmailCaseViewColumns, hasHeader: !!header, children: [_jsxs(Flex, { container: { gap: 1, direction: 'column' }, item: { grow: 1 }, children: [banners && _jsx("div", { children: banners }), content && _jsx("div", { children: content })] }), (utilities || utilitiesSummaryItems) && (_jsxs(Flex, { container: { direction: 'column', alignItems: 'end', gap: 2 }, as: StyledUtilitiesContainer, showExpandedUtilities: showExpandedUtilities, children: [expandedUtilities, !showExpandedUtilities && (_jsx(Button, { variant: 'simple', icon: true, onClick: onToggleUtilities, as: StyledCollapsedUtilitiesToggle, "aria-expanded": showExpandedUtilities ? 'true' : 'false', label: t(showExpandedUtilities ? 'collapse_utilities_panel' : 'expand_utilities_panel'), children: _jsx(Icon, { name: utilitiesIcon }) })), !showExpandedUtilities &&
                                 utilitiesSummaryItems &&
-                                utilitiesSummaryItems.length > 0 && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems, onClick: () => onToggleUtilities }))] }))] })] }));
+                                utilitiesSummaryItems.length > 0 && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems }))] }))] })] }));
 };
 export default EmailCaseView;
 //# sourceMappingURL=EmailCaseView.js.map

package/lib/components/Email/EmailCaseView.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailCaseView.js","sourceRoot":"","sources":["../../../src/components/Email/EmailCaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, useCallback, useState, useMemo, useRef } from 'react';\n\nimport {\n  Button,\n  Drawer,\n  Flex,\n  ForwardProps,\n  Icon,\n  useBreakpoint,\n  useDirection,\n  useI18n,\n  Text\n} from '@pega/cosmos-react-core';\nimport UtilitiesSummary from '@pega/cosmos-react-work/lib/components/CaseView/UtilitiesSummary';\nimport { StyledCaseDrawerContent } from '@pega/cosmos-react-work';\nimport { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\n\nimport {\n  StyledEmailCaseViewColumns,\n  StyledExpandedUtilities,\n  StyledUtilitiesContainer,\n  StyledCollapsedUtilitiesToggle,\n  StyledExpandedUtilitiesToggle,\n  StyledDrawerUtilitiesToggle,\n  StyledEmailCaseViewDrawer,\n  StyledEmailCaseViewHeader,\n  StyledEmailCaseViewContainer\n} from './Email.styles';\nimport { EmailCaseViewProps } from './Email.types';\n\nconst EmailCaseView: FC<EmailCaseViewProps & ForwardProps> = ({\n  header,\n  content,\n  banners,\n  utilities,\n  utilitiesSummaryItems,\n  defaultUtilitiesExpanded,\n  ...restProps\n}: PropsWithoutRef<EmailCaseViewProps>) => {\n  const direction = useDirection();\n  const t = useI18n();\n\n  const emailCaseRef = useRef<HTMLDivElement>(null);\n  const [showExpandedUtilities, setShowExpandedUtilities] = useState(\n    defaultUtilitiesExpanded || false\n  );\n\n  const isMediumOrAbove = useBreakpoint('md', { breakpointRef: emailCaseRef });\n\n  const utilitiesIcon = showExpandedUtilities\n    ? `move-${direction.end}-solid`\n    : `move-${direction.start}-solid`;\n\n  const onToggleUtilities = useCallback((e: KeyboardEvent | MouseEvent) => {\n    if (e.type === 'keydown' && (e as KeyboardEvent).key !== 'Enter') {\n      return;\n    }\n\n    setShowExpandedUtilities(prevState => !prevState);\n  }, []);\n\n  const expandedUtilities = useMemo(() => {\n    if (!utilities) {\n      return null;\n    }\n\n    const largeScreenUtility = (\n      <>\n        {showExpandedUtilities && (\n          <Button\n            variant='simple'\n            icon\n            onClick={onToggleUtilities}\n            as={StyledExpandedUtilitiesToggle}\n            label={t(showExpandedUtilities ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n          >\n            <Icon name={utilitiesIcon} />\n          </Button>\n        )}\n        <Flex\n          as={StyledExpandedUtilities}\n          container={{ direction: 'column', gap: 2 }}\n          showExpandedUtilities={showExpandedUtilities}\n        >\n          {utilities}\n        </Flex>\n      </>\n    );\n\n    const smallScreenUtilities = (\n      <Drawer\n        as={StyledEmailCaseViewDrawer}\n        open={showExpandedUtilities}\n        position='fixed'\n        placement={direction.end}\n        shadow\n        nullWhenClosed\n      >\n        <Flex as={StyledCaseDrawerContent} container={{ direction: 'column', gap: 2 }}>\n          <Flex container={{ justify: 'end' }}>\n            <Button\n              variant='simple'\n              icon\n              onClick={onToggleUtilities}\n              as={StyledDrawerUtilitiesToggle}\n              label={t('collapse_utilities_panel')}\n            >\n              <Icon name={`move-${direction.end}-solid`} />\n            </Button>\n          </Flex>\n          {utilities}\n        </Flex>\n      </Drawer>\n    );\n\n    return isMediumOrAbove ? largeScreenUtility : smallScreenUtilities;\n  }, [isMediumOrAbove, onToggleUtilities, showExpandedUtilities, utilities]);\n\n  return (\n    <StyledEmailCaseViewContainer {...restProps} ref={emailCaseRef}>\n      {header && (\n        <Flex\n          container={{ alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }}\n          as={StyledEmailCaseViewHeader}\n        >\n          {header.icon && (\n            <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n              <Icon name={header.icon} />\n            </StyledPageIcon>\n          )}\n          <Text variant='h1'>{header.title}</Text>\n        </Flex>\n      )}\n      <Flex container={{ gap: 2 }} as={StyledEmailCaseViewColumns} hasHeader={!!header}>\n        <Flex container={{ gap: 1, direction: 'column' }} item={{ grow: 1 }}>\n          {banners && <div>{banners}</div>}\n          {content && <div>{content}</div>}\n        </Flex>\n\n        {(utilities || utilitiesSummaryItems) && (\n          <Flex\n            container={{ direction: 'column', alignItems: 'end', gap: 2 }}\n            as={StyledUtilitiesContainer}\n            showExpandedUtilities={showExpandedUtilities}\n          >\n            {expandedUtilities}\n            {!showExpandedUtilities && (\n              <Button\n                variant='simple'\n                icon\n                onClick={onToggleUtilities}\n                as={StyledCollapsedUtilitiesToggle}\n                aria-expanded={showExpandedUtilities ? 'true' : 'false'}\n                label={t(\n                  showExpandedUtilities ? 'collapse_utilities_panel' : 'expand_utilities_panel'\n                )}\n              >\n                <Icon name={utilitiesIcon} />\n              </Button>\n            )}\n\n            {!showExpandedUtilities &&\n              utilitiesSummaryItems &&\n              utilitiesSummaryItems.length > 0 && (\n                <UtilitiesSummary items={utilitiesSummaryItems} onClick={() => onToggleUtilities} />\n              )}\n          </Flex>\n        )}\n      </Flex>\n    </StyledEmailCaseViewContainer>\n  );\n};\n\nexport default EmailCaseView;\n"]}
+{"version":3,"file":"EmailCaseView.js","sourceRoot":"","sources":["../../../src/components/Email/EmailCaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, useCallback, useState, useMemo, useRef } from 'react';\n\nimport {\n  Button,\n  Drawer,\n  Flex,\n  ForwardProps,\n  Icon,\n  useBreakpoint,\n  useDirection,\n  useI18n,\n  Text\n} from '@pega/cosmos-react-core';\nimport UtilitiesSummary from '@pega/cosmos-react-work/lib/components/CaseView/UtilitiesSummary';\nimport { StyledCaseDrawerContent } from '@pega/cosmos-react-work';\nimport { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\n\nimport {\n  StyledEmailCaseViewColumns,\n  StyledExpandedUtilities,\n  StyledUtilitiesContainer,\n  StyledCollapsedUtilitiesToggle,\n  StyledExpandedUtilitiesToggle,\n  StyledDrawerUtilitiesToggle,\n  StyledEmailCaseViewDrawer,\n  StyledEmailCaseViewHeader,\n  StyledEmailCaseViewContainer\n} from './Email.styles';\nimport { EmailCaseViewProps } from './Email.types';\n\nconst EmailCaseView: FC<EmailCaseViewProps & ForwardProps> = ({\n  header,\n  content,\n  banners,\n  utilities,\n  utilitiesSummaryItems,\n  defaultUtilitiesExpanded,\n  ...restProps\n}: PropsWithoutRef<EmailCaseViewProps>) => {\n  const direction = useDirection();\n  const t = useI18n();\n\n  const emailCaseRef = useRef<HTMLDivElement>(null);\n  const [showExpandedUtilities, setShowExpandedUtilities] = useState(\n    defaultUtilitiesExpanded || false\n  );\n\n  const isMediumOrAbove = useBreakpoint('md', { breakpointRef: emailCaseRef });\n\n  const utilitiesIcon = showExpandedUtilities\n    ? `move-${direction.end}-solid`\n    : `move-${direction.start}-solid`;\n\n  const onToggleUtilities = useCallback((e: KeyboardEvent | MouseEvent) => {\n    if (e.type === 'keydown' && (e as KeyboardEvent).key !== 'Enter') {\n      return;\n    }\n\n    setShowExpandedUtilities(prevState => !prevState);\n  }, []);\n\n  const expandedUtilities = useMemo(() => {\n    if (!utilities) {\n      return null;\n    }\n\n    const largeScreenUtility = (\n      <>\n        {showExpandedUtilities && (\n          <Button\n            variant='simple'\n            icon\n            onClick={onToggleUtilities}\n            as={StyledExpandedUtilitiesToggle}\n            label={t(showExpandedUtilities ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n          >\n            <Icon name={utilitiesIcon} />\n          </Button>\n        )}\n        <Flex\n          as={StyledExpandedUtilities}\n          container={{ direction: 'column', gap: 2 }}\n          showExpandedUtilities={showExpandedUtilities}\n        >\n          {utilities}\n        </Flex>\n      </>\n    );\n\n    const smallScreenUtilities = (\n      <Drawer\n        as={StyledEmailCaseViewDrawer}\n        open={showExpandedUtilities}\n        position='fixed'\n        placement={direction.end}\n        shadow\n        nullWhenClosed\n      >\n        <Flex as={StyledCaseDrawerContent} container={{ direction: 'column', gap: 2 }}>\n          <Flex container={{ justify: 'end' }}>\n            <Button\n              variant='simple'\n              icon\n              onClick={onToggleUtilities}\n              as={StyledDrawerUtilitiesToggle}\n              label={t('collapse_utilities_panel')}\n            >\n              <Icon name={`move-${direction.end}-solid`} />\n            </Button>\n          </Flex>\n          {utilities}\n        </Flex>\n      </Drawer>\n    );\n\n    return isMediumOrAbove ? largeScreenUtility : smallScreenUtilities;\n  }, [isMediumOrAbove, onToggleUtilities, showExpandedUtilities, utilities]);\n\n  return (\n    <StyledEmailCaseViewContainer {...restProps} ref={emailCaseRef}>\n      {header && (\n        <Flex\n          container={{ alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }}\n          as={StyledEmailCaseViewHeader}\n        >\n          {header.icon && (\n            <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n              <Icon name={header.icon} />\n            </StyledPageIcon>\n          )}\n          <Text variant='h1'>{header.title}</Text>\n        </Flex>\n      )}\n      <Flex container={{ gap: 2 }} as={StyledEmailCaseViewColumns} hasHeader={!!header}>\n        <Flex container={{ gap: 1, direction: 'column' }} item={{ grow: 1 }}>\n          {banners && <div>{banners}</div>}\n          {content && <div>{content}</div>}\n        </Flex>\n\n        {(utilities || utilitiesSummaryItems) && (\n          <Flex\n            container={{ direction: 'column', alignItems: 'end', gap: 2 }}\n            as={StyledUtilitiesContainer}\n            showExpandedUtilities={showExpandedUtilities}\n          >\n            {expandedUtilities}\n            {!showExpandedUtilities && (\n              <Button\n                variant='simple'\n                icon\n                onClick={onToggleUtilities}\n                as={StyledCollapsedUtilitiesToggle}\n                aria-expanded={showExpandedUtilities ? 'true' : 'false'}\n                label={t(\n                  showExpandedUtilities ? 'collapse_utilities_panel' : 'expand_utilities_panel'\n                )}\n              >\n                <Icon name={utilitiesIcon} />\n              </Button>\n            )}\n\n            {!showExpandedUtilities &&\n              utilitiesSummaryItems &&\n              utilitiesSummaryItems.length > 0 && (\n                <UtilitiesSummary items={utilitiesSummaryItems} />\n              )}\n          </Flex>\n        )}\n      </Flex>\n    </StyledEmailCaseViewContainer>\n  );\n};\n\nexport default EmailCaseView;\n"]}

package/lib/components/Email/EmailComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmailComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,IAAI,EAUJ,UAAU,EASX,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnD,eAAO,MAAM,mBAAmB,yHAU9B,CAAC;AAEH,eAAO,MAAM,sBAAsB,EAAE,OAAO,IAI1C,CAAC;AAIH,eAAO,MAAM,kBAAkB,qNAK7B,CAAC;AAUH,eAAO,MAAM,WAAW,kLAMtB,CAAC;AAmDH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAubxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"EmailComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,IAAI,EAUJ,UAAU,EASX,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKnD,eAAO,MAAM,mBAAmB,yHAU9B,CAAC;AAEH,eAAO,MAAM,sBAAsB,EAAE,OAAO,IAI1C,CAAC;AAIH,eAAO,MAAM,kBAAkB,qNAK7B,CAAC;AAUH,eAAO,MAAM,WAAW,kLAMtB,CAAC;AAmDH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAibxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Email/EmailComposer.js

@@ -1,5 +1,5 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useMemo, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { stripUnit } from 'polished';
@@ -198,52 +198,52 @@ const EmailComposer = forwardRef(({ participants, senderAccounts, onCancel, onSe
             };
         }));
     };
-    const content = (_jsx(_Fragment, { children: _jsxs(Flex, { as: StyledEmailComposer, ...restProps, container: {
-                gap: 2,
-                direction: 'column'
-            }, progress: !!progress, ref: ref, children: [senderAccounts && senderAccounts.length > 0 && (_jsx(EmailSelector, { participants: senderAccounts, selectedItems: emailAccount ? [emailAccount.value] : [], label: t('email_account'), mode: 'single-select', required: true, onSelectedItemChange: (selectedItems) => {
-                        onChange('emailAccount', selectedItems[0]);
-                    }, status: emailAccount?.error ? 'error' : undefined, info: emailAccount?.error, compose: true })), responseType && (_jsx(StyledResponseType, { text: responseTypeMenuData.selectedResponseType, variant: 'link', icon: responseTypeMenuData.selectedResponseTypeIcon, menu: {
-                        mode: 'single-select',
-                        items: responseTypeMenuData.menuItems
-                    } })), _jsxs(Flex, { container: {
-                        alignItems: 'start',
-                        gap: 0.5
-                    }, children: [_jsx(Flex, { container: {
-                                gap: 1,
-                                direction: 'column'
-                            }, item: {
-                                grow: 1
-                            }, children: _jsx(EmailSelector, { participants: participants, selectedItems: to?.value || [], label: t('to'), mode: 'multi-select', required: true, onSelectedItemChange: (selectedItems) => {
-                                    onChange('to', selectedItems);
-                                }, externalValidator: externalValidator, status: to?.error ? 'error' : undefined, info: to?.error }) }), !(userCCToggleState || hasCC) && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setUserCCToggleState(true), icon: true, children: t('cc') })), !(userBCCToggleState || hasBCC) && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setUserBCCToggleState(true), icon: true, children: t('bcc') }))] }), (userCCToggleState || hasCC) && (_jsx(EmailSelector, { participants: participants, selectedItems: cc?.value || [], label: t('cc'), mode: 'multi-select', onSelectedItemChange: (selectedItems) => onChange('cc', selectedItems), externalValidator: externalValidator, status: cc?.error ? 'error' : undefined, info: cc?.error })), (userBCCToggleState || hasBCC) && (_jsx(EmailSelector, { participants: participants, selectedItems: bcc?.value || [], label: t('bcc'), mode: 'multi-select', onSelectedItemChange: (selectedItems) => onChange('bcc', selectedItems), externalValidator: externalValidator, status: bcc?.error ? 'error' : undefined, info: bcc?.error })), _jsx(Input, { value: subject.value, onChange: (e) => onChange('subject', e.target.value), label: t('subject'), status: subject.error ? 'error' : undefined, info: subject.error }), _jsx(ComboBox, { label: t('auto_reply'), value: filterValue, mode: 'single-select', menu: {
-                        items: emailTemplatesToRender,
-                        onItemClick: selectEmailTemplate,
-                        accent: filterRegex
-                    }, selected: selectedEmailTemplate
-                        ? {
-                            items: {
-                                id: selectedEmailTemplate.id,
-                                text: selectedEmailTemplate.primary
-                            }
+    const content = (_jsxs(Flex, { as: StyledEmailComposer, ...restProps, container: {
+            gap: 2,
+            direction: 'column'
+        }, progress: !!progress, ref: ref, children: [senderAccounts && senderAccounts.length > 0 && (_jsx(EmailSelector, { participants: senderAccounts, selectedItems: emailAccount ? [emailAccount.value] : [], label: t('email_account'), mode: 'single-select', required: true, onSelectedItemChange: (selectedItems) => {
+                    onChange('emailAccount', selectedItems[0]);
+                }, status: emailAccount?.error ? 'error' : undefined, info: emailAccount?.error, compose: true })), responseType && (_jsx(StyledResponseType, { text: responseTypeMenuData.selectedResponseType, variant: 'link', icon: responseTypeMenuData.selectedResponseTypeIcon, menu: {
+                    mode: 'single-select',
+                    items: responseTypeMenuData.menuItems
+                } })), _jsxs(Flex, { container: {
+                    alignItems: 'start',
+                    gap: 0.5
+                }, children: [_jsx(Flex, { container: {
+                            gap: 1,
+                            direction: 'column'
+                        }, item: {
+                            grow: 1
+                        }, children: _jsx(EmailSelector, { participants: participants, selectedItems: to?.value || [], label: t('to'), mode: 'multi-select', required: true, onSelectedItemChange: (selectedItems) => {
+                                onChange('to', selectedItems);
+                            }, externalValidator: externalValidator, status: to?.error ? 'error' : undefined, info: to?.error }) }), !(userCCToggleState || hasCC) && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setUserCCToggleState(true), icon: true, children: t('cc') })), !(userBCCToggleState || hasBCC) && (_jsx(StyledToggleButton, { variant: 'simple', onClick: () => setUserBCCToggleState(true), icon: true, children: t('bcc') }))] }), (userCCToggleState || hasCC) && (_jsx(EmailSelector, { participants: participants, selectedItems: cc?.value || [], label: t('cc'), mode: 'multi-select', onSelectedItemChange: (selectedItems) => onChange('cc', selectedItems), externalValidator: externalValidator, status: cc?.error ? 'error' : undefined, info: cc?.error })), (userBCCToggleState || hasBCC) && (_jsx(EmailSelector, { participants: participants, selectedItems: bcc?.value || [], label: t('bcc'), mode: 'multi-select', onSelectedItemChange: (selectedItems) => onChange('bcc', selectedItems), externalValidator: externalValidator, status: bcc?.error ? 'error' : undefined, info: bcc?.error })), _jsx(Input, { value: subject.value, onChange: (e) => onChange('subject', e.target.value), label: t('subject'), status: subject.error ? 'error' : undefined, info: subject.error }), _jsx(ComboBox, { label: t('auto_reply'), value: filterValue, mode: 'single-select', menu: {
+                    items: emailTemplatesToRender,
+                    onItemClick: selectEmailTemplate,
+                    accent: filterRegex
+                }, selected: selectedEmailTemplate
+                    ? {
+                        items: {
+                            id: selectedEmailTemplate.id,
+                            text: selectedEmailTemplate.primary
                         }
-                        : undefined, onChange: (e) => {
-                        if (!e.target.value)
-                            clearSelection();
-                        setFilterValue(e.target.value);
-                    } }), _jsx(Editor, { autoFocus: true, ref: editorRef, toolbar: editorToolbar, onImageAdded: onImageAdded, labelHidden: true, label: t('email_message'), defaultValue: editorContent || bodyContent.defaultValue, 
-                    // Below rem values are derived from min 150px, max 300px minus the approx height of toolbar
-                    height: {
-                        min: stripUnit('7rem') * 16,
-                        max: stripUnit('16.5rem') * 16
-                    }, status: bodyContent.error ? 'error' : undefined, info: bodyContent.error, onChange: () => {
-                        const currentHtml = editorRef?.current?.getHtml() || '';
-                        setEditorContent(currentHtml);
-                        onChange('bodyContent', currentHtml);
-                    } }), !!attachments?.length && (_jsx(Grid, { ref: ref, container: {
-                        cols: 'repeat(auto-fill, minmax(15rem, 1fr))',
-                        gap: 1
-                    }, children: attachments?.map(attachment => (_createElement(FileUploadItem, { ...attachment, key: attachment.name, onDelete: onAttachmentDelete }))) }))] }) }));
+                    }
+                    : undefined, onChange: (e) => {
+                    if (!e.target.value)
+                        clearSelection();
+                    setFilterValue(e.target.value);
+                } }), _jsx(Editor, { autoFocus: true, ref: editorRef, toolbar: editorToolbar, onImageAdded: onImageAdded, labelHidden: true, label: t('email_message'), defaultValue: editorContent || bodyContent.defaultValue, 
+                // Below rem values are derived from min 150px, max 300px minus the approx height of toolbar
+                height: {
+                    min: stripUnit('7rem') * 16,
+                    max: stripUnit('16.5rem') * 16
+                }, status: bodyContent.error ? 'error' : undefined, info: bodyContent.error, onChange: () => {
+                    const currentHtml = editorRef?.current?.getHtml() || '';
+                    setEditorContent(currentHtml);
+                    onChange('bodyContent', currentHtml);
+                } }), !!attachments?.length && (_jsx(Grid, { ref: ref, container: {
+                    cols: 'repeat(auto-fill, minmax(15rem, 1fr))',
+                    gap: 1
+                }, children: attachments?.map(attachment => (_createElement(FileUploadItem, { ...attachment, key: attachment.name, onDelete: onAttachmentDelete }))) }))] }));
     const footerContent = (_jsx(Flex, { container: {
             gap: 1,
             direction: 'column'