import React, { useEffect } from 'react' import PropTypes from 'prop-types' import { useTranslation } from 'react-i18next' import MessageList from './message-list' import MessageInput from './message-input' import InfiniteScroll from './infinite-scroll' import ChatFallbackError from './chat-fallback-error' import Icon from '../../../shared/components/icon' import { useLayoutContext } from '../../../shared/context/layout-context' import { useApplicationContext } from '../../../shared/context/application-context' import withErrorBoundary from '../../../infrastructure/error-boundary' import { FetchError } from '../../../infrastructure/fetch-json' import { useChatContext } from '../context/chat-context' function ChatPane() { const { t } = useTranslation() const { chatIsOpen } = useLayoutContext({ chatIsOpen: PropTypes.bool }) const { user } = useApplicationContext({ user: PropTypes.shape({ id: PropTypes.string.isRequired }.isRequired), }) const { status, messages, initialMessagesLoaded, atEnd, loadInitialMessages, loadMoreMessages, reset, sendMessage, markMessagesAsRead, error, } = useChatContext() useEffect(() => { if (chatIsOpen && !initialMessagesLoaded) { loadInitialMessages() } }, [chatIsOpen, loadInitialMessages, initialMessagesLoaded]) const shouldDisplayPlaceholder = status !== 'pending' && messages.length === 0 const messageContentCount = messages.reduce( (acc, { contents }) => acc + contents.length, 0 ) if (error) { // let user try recover from fetch errors if (error instanceof FetchError) { return } throw error } 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, ChatFallbackError)