{
+ chatContainerRef.current = attachRefs ? node : null
+ if (node && attachRefs) {
+ assignMetric(node, 'clientWidth', 400)
+ assignMetric(node, 'clientHeight', 240)
+ assignMetric(node, 'scrollHeight', 640)
+ if (!node.dataset.metricsReady) {
+ node.scrollTop = 0
+ node.dataset.metricsReady = 'true'
+ }
+ }
+ }}
+ >
+
{
+ chatContainerInnerRef.current = attachRefs ? node : null
+ if (node && attachRefs)
+ assignMetric(node, 'clientWidth', 360)
+ }}
+ />
+
{
+ chatFooterRef.current = attachRefs ? node : null
+ }}
+ >
+
{
+ chatFooterInnerRef.current = attachRefs ? node : null
+ }}
+ />
+
+
+
+ )
+}
+
+const flushAnimationFrames = () => {
+ const queuedCallbacks = [...rafCallbacks]
+ rafCallbacks = []
+ queuedCallbacks.forEach(callback => callback(0))
+}
+
+describe('useChatLayout', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ vi.useFakeTimers()
+ capturedResizeCallbacks = []
+ disconnectSpy = vi.fn()
+ rafCallbacks = []
+
+ Object.defineProperty(document.body, 'clientWidth', {
+ configurable: true,
+ value: 1024,
+ })
+
+ vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+ rafCallbacks.push(cb)
+ return rafCallbacks.length
+ })
+
+ vi.stubGlobal('ResizeObserver', class {
+ constructor(cb: ResizeCallback) {
+ capturedResizeCallbacks.push(cb)
+ }
+
+ observe() { }
+ unobserve() { }
+ disconnect = disconnectSpy
+ })
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ vi.unstubAllGlobals()
+ })
+
+ // The hook should compute shell dimensions and auto-scroll when enough chat items exist.
+ describe('Layout Calculation', () => {
+ it('should auto-scroll and compute the chat shell widths on mount', () => {
+ const addSpy = vi.spyOn(window, 'addEventListener')
+
+ render(
+
,
+ )
+
+ act(() => {
+ flushAnimationFrames()
+ vi.runAllTimers()
+ })
+
+ expect(screen.getByTestId('layout-width')).toHaveTextContent('600')
+ expect(screen.getByTestId('chat-footer').style.width).toBe('400px')
+ expect(screen.getByTestId('chat-footer-inner').style.width).toBe('360px')
+ expect((screen.getByTestId('chat-container') as HTMLDivElement).scrollTop).toBe(640)
+ expect(addSpy).toHaveBeenCalledWith('resize', expect.any(Function))
+ })
+ })
+
+ // Resize observers should keep padding and widths in sync, then fully clean up on unmount.
+ describe('Resize Observers', () => {
+ it('should react to observer updates and disconnect both observers on unmount', () => {
+ const removeSpy = vi.spyOn(window, 'removeEventListener')
+ const { unmount } = render(
+
,
+ )
+
+ act(() => {
+ capturedResizeCallbacks[0]?.([makeResizeEntry(80, 400)], {} as ResizeObserver)
+ })
+ expect(screen.getByTestId('chat-container').style.paddingBottom).toBe('80px')
+
+ act(() => {
+ capturedResizeCallbacks[1]?.([makeResizeEntry(50, 560)], {} as ResizeObserver)
+ })
+ expect(screen.getByTestId('chat-footer').style.width).toBe('560px')
+
+ unmount()
+
+ expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function))
+ expect(disconnectSpy).toHaveBeenCalledTimes(2)
+ })
+
+ it('should respect manual scrolling until a new first message arrives and safely ignore missing refs', () => {
+ const { rerender } = render(
+
,
+ )
+
+ const container = screen.getByTestId('chat-container') as HTMLDivElement
+
+ act(() => {
+ fireEvent.scroll(container)
+ flushAnimationFrames()
+ })
+
+ act(() => {
+ container.scrollTop = 10
+ fireEvent.scroll(container)
+ })
+
+ rerender(
+
,
+ )
+
+ act(() => {
+ flushAnimationFrames()
+ vi.runAllTimers()
+ })
+
+ act(() => {
+ container.scrollTop = 420
+ fireEvent.scroll(container)
+ })
+
+ rerender(
+
,
+ )
+
+ act(() => {
+ flushAnimationFrames()
+ vi.runAllTimers()
+ })
+
+ expect(container.scrollTop).toBe(640)
+
+ rerender(
+
,
+ )
+
+ act(() => {
+ fireEvent.scroll(container)
+ flushAnimationFrames()
+ })
+ })
+
+ it('should keep the hook stable when the DOM refs are not attached', () => {
+ render(
+
,
+ )
+
+ act(() => {
+ flushAnimationFrames()
+ vi.runAllTimers()
+ })
+
+ expect(screen.getByTestId('layout-width')).toHaveTextContent('0')
+ expect(capturedResizeCallbacks).toHaveLength(0)
+ expect(screen.getByTestId('chat-footer').style.width).toBe('')
+ expect(screen.getByTestId('chat-footer-inner').style.width).toBe('')
+ })
+ })
+})
diff --git a/web/app/components/base/chat/chat/chat-log-modals.tsx b/web/app/components/base/chat/chat/chat-log-modals.tsx
new file mode 100644
index 0000000000..d1bf43b81c
--- /dev/null
+++ b/web/app/components/base/chat/chat/chat-log-modals.tsx
@@ -0,0 +1,56 @@
+import type { FC } from 'react'
+import type { IChatItem } from './type'
+import AgentLogModal from '@/app/components/base/agent-log-modal'
+import PromptLogModal from '@/app/components/base/prompt-log-modal'
+
+type ChatLogModalsProps = {
+ width: number
+ currentLogItem?: IChatItem
+ showPromptLogModal: boolean
+ showAgentLogModal: boolean
+ hideLogModal?: boolean
+ setCurrentLogItem: (item?: IChatItem) => void
+ setShowPromptLogModal: (showPromptLogModal: boolean) => void
+ setShowAgentLogModal: (showAgentLogModal: boolean) => void
+}
+
+const ChatLogModals: FC
= ({
+ width,
+ currentLogItem,
+ showPromptLogModal,
+ showAgentLogModal,
+ hideLogModal,
+ setCurrentLogItem,
+ setShowPromptLogModal,
+ setShowAgentLogModal,
+}) => {
+ if (hideLogModal)
+ return null
+
+ return (
+ <>
+ {showPromptLogModal && (
+ {
+ setCurrentLogItem()
+ setShowPromptLogModal(false)
+ }}
+ />
+ )}
+ {showAgentLogModal && (
+ {
+ setCurrentLogItem()
+ setShowAgentLogModal(false)
+ }}
+ />
+ )}
+
+ )
+}
+
+export default ChatLogModals
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index ed44c8719d..f04169327f 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -13,26 +13,19 @@ import type {
import type { InputForm } from './type'
import type { Emoji } from '@/app/components/tools/types'
import type { AppData } from '@/models/share'
-import { debounce } from 'es-toolkit/compat'
-import {
- memo,
- useCallback,
- useEffect,
- useRef,
- useState,
-} from 'react'
+import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import { useShallow } from 'zustand/react/shallow'
import { useStore as useAppStore } from '@/app/components/app/store'
-import AgentLogModal from '@/app/components/base/agent-log-modal'
import Button from '@/app/components/base/button'
-import PromptLogModal from '@/app/components/base/prompt-log-modal'
import { cn } from '@/utils/classnames'
import Answer from './answer'
import ChatInputArea from './chat-input-area'
+import ChatLogModals from './chat-log-modals'
import { ChatContextProvider } from './context-provider'
import Question from './question'
import TryToAsk from './try-to-ask'
+import { useChatLayout } from './use-chat-layout'
export type ChatProps = {
isTryApp?: boolean
@@ -133,128 +126,17 @@ const Chat: FC = ({
showAgentLogModal: state.showAgentLogModal,
setShowAgentLogModal: state.setShowAgentLogModal,
})))
- const [width, setWidth] = useState(0)
- const chatContainerRef = useRef(null)
- const chatContainerInnerRef = useRef(null)
- const chatFooterRef = useRef(null)
- const chatFooterInnerRef = useRef(null)
- const userScrolledRef = useRef(false)
- const isAutoScrollingRef = useRef(false)
-
- const handleScrollToBottom = useCallback(() => {
- if (chatList.length > 1 && chatContainerRef.current && !userScrolledRef.current) {
- isAutoScrollingRef.current = true
- chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight
-
- requestAnimationFrame(() => {
- isAutoScrollingRef.current = false
- })
- }
- }, [chatList.length])
-
- const handleWindowResize = useCallback(() => {
- if (chatContainerRef.current)
- setWidth(document.body.clientWidth - (chatContainerRef.current?.clientWidth + 16) - 8)
-
- if (chatContainerRef.current && chatFooterRef.current)
- chatFooterRef.current.style.width = `${chatContainerRef.current.clientWidth}px`
-
- if (chatContainerInnerRef.current && chatFooterInnerRef.current)
- chatFooterInnerRef.current.style.width = `${chatContainerInnerRef.current.clientWidth}px`
- }, [])
-
- useEffect(() => {
- handleScrollToBottom()
- handleWindowResize()
- }, [handleScrollToBottom, handleWindowResize])
-
- useEffect(() => {
- /* v8 ignore next - @preserve */
- if (chatContainerRef.current) {
- requestAnimationFrame(() => {
- handleScrollToBottom()
- handleWindowResize()
- })
- }
+ const {
+ width,
+ chatContainerRef,
+ chatContainerInnerRef,
+ chatFooterRef,
+ chatFooterInnerRef,
+ } = useChatLayout({
+ chatList,
+ sidebarCollapseState,
})
- useEffect(() => {
- const debouncedHandler = debounce(handleWindowResize, 200)
- window.addEventListener('resize', debouncedHandler)
-
- return () => {
- window.removeEventListener('resize', debouncedHandler)
- debouncedHandler.cancel()
- }
- }, [handleWindowResize])
-
- useEffect(() => {
- /* v8 ignore next - @preserve */
- if (chatFooterRef.current && chatContainerRef.current) {
- const resizeContainerObserver = new ResizeObserver((entries) => {
- for (const entry of entries) {
- const { blockSize } = entry.borderBoxSize[0]
- chatContainerRef.current!.style.paddingBottom = `${blockSize}px`
- handleScrollToBottom()
- }
- })
- resizeContainerObserver.observe(chatFooterRef.current)
-
- const resizeFooterObserver = new ResizeObserver((entries) => {
- for (const entry of entries) {
- const { inlineSize } = entry.borderBoxSize[0]
- chatFooterRef.current!.style.width = `${inlineSize}px`
- }
- })
- resizeFooterObserver.observe(chatContainerRef.current)
-
- return () => {
- resizeContainerObserver.disconnect()
- resizeFooterObserver.disconnect()
- }
- }
- }, [handleScrollToBottom])
-
- useEffect(() => {
- const setUserScrolled = () => {
- const container = chatContainerRef.current
- /* v8 ignore next 2 - @preserve */
- if (!container)
- return
- /* v8 ignore next 2 - @preserve */
- if (isAutoScrollingRef.current)
- return
-
- const distanceToBottom = container.scrollHeight - container.clientHeight - container.scrollTop
- const SCROLL_UP_THRESHOLD = 100
-
- userScrolledRef.current = distanceToBottom > SCROLL_UP_THRESHOLD
- }
-
- const container = chatContainerRef.current
- /* v8 ignore next 2 - @preserve */
- if (!container)
- return
-
- container.addEventListener('scroll', setUserScrolled)
- return () => container.removeEventListener('scroll', setUserScrolled)
- }, [])
-
- const prevFirstMessageIdRef = useRef(undefined)
- useEffect(() => {
- const firstMessageId = chatList[0]?.id
- if (chatList.length <= 1 || (firstMessageId && prevFirstMessageIdRef.current !== firstMessageId))
- userScrolledRef.current = false
- prevFirstMessageIdRef.current = firstMessageId
- }, [chatList])
-
- useEffect(() => {
- if (!sidebarCollapseState) {
- const timer = setTimeout(handleWindowResize, 200)
- return () => clearTimeout(timer)
- }
- }, [handleWindowResize, sidebarCollapseState])
-
const hasTryToAsk = config?.suggested_questions_after_answer?.enabled && !!suggestedQuestions?.length && onSend
return (
@@ -279,7 +161,7 @@ const Chat: FC = ({
{chatNode}
= ({
!noStopResponding && isResponding && (
@@ -375,26 +257,16 @@ const Chat: FC
= ({
}
)
diff --git a/web/app/components/base/chat/chat/use-chat-layout.ts b/web/app/components/base/chat/chat/use-chat-layout.ts
new file mode 100644
index 0000000000..41f622c523
--- /dev/null
+++ b/web/app/components/base/chat/chat/use-chat-layout.ts
@@ -0,0 +1,144 @@
+import type { ChatItem } from '../types'
+import { debounce } from 'es-toolkit/compat'
+import {
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react'
+
+type UseChatLayoutOptions = {
+ chatList: ChatItem[]
+ sidebarCollapseState?: boolean
+}
+
+export const useChatLayout = ({ chatList, sidebarCollapseState }: UseChatLayoutOptions) => {
+ const [width, setWidth] = useState(0)
+ const chatContainerRef = useRef