mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-24 21:12:38 -04:00
2304536844
* Tidy up review panel components * Add ReviewPanel providers * [web] new design for review panel track change (#19544) * [web] new design for review panel track change * fixed mini view * mini icon style change * fix icon size * format date * useRangesUserContext hook * remove useRangesUserContext hook * using full class names * fix action icons hover * change wording for tooltips * added ReviewPanelChangeUser component * Update header in new review panel * Extract ReviewPanelTrackChangesMenuButton as a separate component * Remove wrapper div * Replace h2 with div for review panel label * Rename ReviewPanelTools to ReviewPanelHeader * Rename trackChangesExpanded -> trackChangesMenuExpanded * Dont break memoisation of ReviewPanelTrackChangesMenuButton * Fix the width of the track changes arrow icon * Update how prop types are declared * Remove new empty state from old review panel * Add empty state to new review panel * Add project members and owner to ChangesUsers context (#19624) --------- Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> * Redesign comment entry in review panel (#19678) * Redesign comment entry in review panel * ReviewPanelCommentOptions component * remove unused prop * Tidying * Add conditional import * Optional changeManager * Add more split test compatibility * More split test compatibility * Fixes * Improve overview scrolling * Fix overview scrolling * Fix & simplify track changes toggle * Fix overview scrolling * Fix current file container * ExpandableContent component for messages in review panel (#19738) * ExpandableContent component for messages in review panel * remove isExpanded dependancy * Delete comment option for new review panel (#19772) * Delete comment option for new review panel * dont show thread warning if there are no replies * fix hasReplies issue * Implement initial collapsing overview files * Fix positioning of overview panel * Small styling changes * Add count of unresolved comments and tracked chanegs * More style adjustments * Move review-panel-overview styles into css file * Remove unused var --------- Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com> Co-authored-by: David Powell <david.powell@overleaf.com> Co-authored-by: David <33458145+davidmcpowell@users.noreply.github.com> GitOrigin-RevId: e67463443d541f88445a86eed5e2b6ec6040f9c7
121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
import React, { lazy, Suspense, useEffect, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
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 { useUserContext } from '../../../shared/context/user-context'
|
|
import withErrorBoundary from '../../../infrastructure/error-boundary'
|
|
import { FetchError } from '../../../infrastructure/fetch-json'
|
|
import { useChatContext } from '../context/chat-context'
|
|
import LoadingSpinner from '../../../shared/components/loading-spinner'
|
|
import useViewerPermissions from '@/shared/hooks/use-viewer-permissions'
|
|
|
|
const MessageList = lazy(() => import('./message-list'))
|
|
|
|
const ChatPane = React.memo(function ChatPane() {
|
|
const { t } = useTranslation()
|
|
|
|
const { setChatIsOpen, chatIsOpen } = useLayoutContext()
|
|
const user = useUserContext()
|
|
|
|
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
|
|
)
|
|
|
|
const shouldShowChat = !useViewerPermissions()
|
|
|
|
// Keep the chat pane in the DOM to avoid resetting the form input and re-rendering MathJax content.
|
|
const [chatOpenedOnce, setChatOpenedOnce] = useState(chatIsOpen)
|
|
useEffect(() => {
|
|
if (chatIsOpen && shouldShowChat) {
|
|
setChatOpenedOnce(true)
|
|
} else if (chatIsOpen && !shouldShowChat) {
|
|
setChatIsOpen(false)
|
|
}
|
|
}, [chatIsOpen, setChatIsOpen, shouldShowChat])
|
|
|
|
if (error) {
|
|
// let user try recover from fetch errors
|
|
if (error instanceof FetchError) {
|
|
return <ChatFallbackError reconnect={reset} />
|
|
}
|
|
throw error
|
|
}
|
|
|
|
if (!user?.id) {
|
|
return null
|
|
}
|
|
if (!chatOpenedOnce) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<aside className="chat">
|
|
<InfiniteScroll
|
|
atEnd={atEnd}
|
|
className="messages"
|
|
fetchData={loadMoreMessages}
|
|
isLoading={status === 'pending'}
|
|
itemCount={messageContentCount}
|
|
>
|
|
<div>
|
|
<h2 className="sr-only">{t('chat')}</h2>
|
|
<Suspense fallback={<LoadingSpinner delay={500} />}>
|
|
{status === 'pending' && <LoadingSpinner delay={500} />}
|
|
{shouldDisplayPlaceholder && <Placeholder />}
|
|
<MessageList
|
|
messages={messages}
|
|
userId={user.id}
|
|
resetUnreadMessages={markMessagesAsRead}
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
</InfiniteScroll>
|
|
<MessageInput
|
|
resetUnreadMessages={markMessagesAsRead}
|
|
sendMessage={sendMessage}
|
|
/>
|
|
</aside>
|
|
)
|
|
})
|
|
|
|
function Placeholder() {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<>
|
|
<div className="no-messages text-center small">{t('no_messages')}</div>
|
|
<div className="first-message text-center">
|
|
{t('send_first_message')}
|
|
<br />
|
|
<Icon type="arrow-down" />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default withErrorBoundary(ChatPane, ChatFallbackError)
|