import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types' import MessageList from './message-list' import MessageInput from './message-input' import InfiniteScroll from './infinite-scroll' import Icon from '../../../shared/components/icon' import { useTranslation } from 'react-i18next' import { useLayoutContext } from '../../../shared/context/layout-context' import withErrorBoundary from '../../../infrastructure/error-boundary' import { useChatContext } from '../context/chat-context' function ChatPane() { const { t } = useTranslation() const { chatIsOpen } = useLayoutContext({ chatIsOpen: PropTypes.bool }) const { userId, atEnd, loading, loadMoreMessages, messages, sendMessage, resetUnreadMessageCount } = useChatContext() const [initialMessagesLoaded, setInitialMessagesLoaded] = useState(false) useEffect(() => { if (chatIsOpen && !initialMessagesLoaded) { loadMoreMessages() setInitialMessagesLoaded(true) } }, [initialMessagesLoaded, loadMoreMessages, chatIsOpen]) const shouldDisplayPlaceholder = !loading && messages.length === 0 const messageContentCount = messages.reduce( (acc, { contents }) => acc + contents.length, 0 ) return ( ) } function LoadingSpinner() { const { t } = useTranslation() return (
{` ${t('loading')}…`}
) } function Placeholder() { const { t } = useTranslation() return ( <>
{t('no_messages')}
{t('send_first_message')}
) } export default withErrorBoundary(ChatPane)