github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Improve chat pane handling (#16123)

Browse source 
GitOrigin-RevId: b4185a192b393e339aee8bc27e615d61d66a8b34
This commit is contained in:
Alf Eaton 2023-12-08 09:37:05 +00:00 committed by Copybot
parent 389d16aad1
commit 8c91a2e4cf
2 changed files with 45 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx
View file

@ -36,8 +36,11 @@ export const MainLayout: FC = () => {
isOpen: chatIsOpen,
fixedPanelRef: chatPanelRef,
handleLayout: handleChatLayout,
togglePane: toggleChat,
resizing: chatResizing,
setResizing: setChatResizing,
handlePaneCollapse: handleChatCollapse,
handlePaneExpand: handleChatExpand,
} = useChatPane()
const {
@ -125,23 +128,25 @@ export const MainLayout: FC = () => {
)}
</Panel>
{chatIsOpen && (
<>
<HorizontalResizeHandle onDragging={setChatResizing} />
<HorizontalResizeHandle
onDoubleClick={toggleChat}
resizable={chatIsOpen}
onDragging={setChatResizing}
/>
{/* chat */}
<Panel
ref={chatPanelRef}
id="panel-chat"
order={2}
defaultSizePixels={200}
minSizePixels={150}
collapsible
>
<ChatPane />
</Panel>
</>
)}
{/* chat */}
<Panel
ref={chatPanelRef}
id="panel-chat"
order={2}
defaultSizePixels={200}
minSizePixels={150}
collapsible
onCollapse={handleChatCollapse}
onExpand={handleChatExpand}
>
<ChatPane />
</Panel>
</PanelGroup>
</Panel>
</PanelGroup>

27
services/web/frontend/js/features/ide-react/hooks/use-chat-pane.ts
View file

@ -1,13 +1,34 @@
import { useLayoutContext } from '@/shared/context/layout-context'
import useFixedSizeColumn from '@/features/ide-react/hooks/use-fixed-size-column'
import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
import { useState } from 'react'
import { useCallback, useState } from 'react'
export const useChatPane = () => {
const { chatIsOpen: isOpen } = useLayoutContext()
const { chatIsOpen: isOpen, setChatIsOpen: setIsOpen } = useLayoutContext()
const [resizing, setResizing] = useState(false)
const { fixedPanelRef, handleLayout } = useFixedSizeColumn(isOpen)
useCollapsiblePanel(isOpen, fixedPanelRef)
return { isOpen, fixedPanelRef, handleLayout, resizing, setResizing }
const togglePane = useCallback(() => {
setIsOpen(value => !value)
}, [setIsOpen])
const handlePaneExpand = useCallback(() => {
setIsOpen(true)
}, [setIsOpen])
const handlePaneCollapse = useCallback(() => {
setIsOpen(false)
}, [setIsOpen])
return {
isOpen,
fixedPanelRef,
handleLayout,
resizing,
setResizing,
togglePane,
handlePaneExpand,
handlePaneCollapse,
}
}