2025-04-24 13:11:28 +08:00

121 lines
3.5 KiB
TypeScript

import ChatFallbackError from '@/features/chat/components/chat-fallback-error'
import InfiniteScroll from '@/features/chat/components/infinite-scroll'
import MessageInput from '@/features/chat/components/message-input'
import { useChatContext } from '@/features/chat/context/chat-context'
import OLBadge from '@/features/ui/components/ol/ol-badge'
import { FetchError } from '@/infrastructure/fetch-json'
import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
import MaterialIcon from '@/shared/components/material-icon'
import { useUserContext } from '@/shared/context/user-context'
import { lazy, Suspense, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import classNames from 'classnames'
import { RailPanelHeader } from '../rail'
const MessageList = lazy(() => import('../../../chat/components/message-list'))
export const ChatIndicator = () => {
const { unreadMessageCount } = useChatContext()
if (unreadMessageCount === 0) {
return null
}
return <OLBadge bg="info">{unreadMessageCount}</OLBadge>
}
const Loading = () => <FullSizeLoadingSpinner delay={500} className="pt-4" />
export const ChatPane = () => {
const { t } = useTranslation()
const user = useUserContext()
const {
status,
messages,
initialMessagesLoaded,
atEnd,
loadInitialMessages,
loadMoreMessages,
reset,
sendMessage,
markMessagesAsRead,
error,
} = useChatContext()
useEffect(() => {
if (!initialMessagesLoaded) {
loadInitialMessages()
}
}, [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 <ChatFallbackError reconnect={reset} />
}
throw error
}
if (!user) {
return null
}
return (
<div className="chat-panel">
<RailPanelHeader title={t('collaborator_chat')} />
<div className="chat-wrapper">
<aside className="chat">
<InfiniteScroll
atEnd={atEnd}
className="messages"
fetchData={loadMoreMessages}
isLoading={status === 'pending'}
itemCount={messageContentCount}
>
<div className={classNames({ 'h-100': shouldDisplayPlaceholder })}>
<h2 className="visually-hidden">{t('chat')}</h2>
<Suspense fallback={<Loading />}>
{status === 'pending' && <Loading />}
{shouldDisplayPlaceholder && <Placeholder />}
<MessageList
messages={messages}
resetUnreadMessages={markMessagesAsRead}
newDesign
/>
</Suspense>
</div>
</InfiniteScroll>
<MessageInput
resetUnreadMessages={markMessagesAsRead}
sendMessage={sendMessage}
/>
</aside>
</div>
</div>
)
}
function Placeholder() {
const { t } = useTranslation()
return (
<div className="chat-empty-state-placeholder">
<div>
<span className="chat-empty-state-icon">
<MaterialIcon type="forum" />
</span>
</div>
<div>
<div className="chat-empty-state-title">{t('no_messages_yet')}</div>
<div className="chat-empty-state-body">
{t('start_the_conversation_by_saying_hello_or_sharing_an_update')}
</div>
</div>
</div>
)
}