diff --git a/web/src/components/ChatBox/ChatMessageList/NormalList.tsx b/web/src/components/ChatBox/ChatMessageList/NormalList.tsx index 2e443d74..9efa1f53 100644 --- a/web/src/components/ChatBox/ChatMessageList/NormalList.tsx +++ b/web/src/components/ChatBox/ChatMessageList/NormalList.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useRef } from 'react'; -import { useUpdateRef } from 'tailchat-shared'; +import { sharedEvent, useUpdateRef } from 'tailchat-shared'; import { buildMessageItemRow } from './Item'; import type { MessageListProps } from './types'; @@ -24,6 +24,19 @@ export const NormalMessageList: React.FC = React.memo( } }, [props.messages.length]); + useEffect(() => { + const onSendMessage = () => { + // 滚动到底部 + containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' }); + }; + + sharedEvent.on('sendMessage', onSendMessage); + + return () => { + sharedEvent.off('sendMessage', onSendMessage); + }; + }, []); + const handleScroll = useCallback(() => { if (props.messages.length === 0) { return; diff --git a/web/src/components/ChatBox/index.tsx b/web/src/components/ChatBox/index.tsx index 5155ddda..5791da2e 100644 --- a/web/src/components/ChatBox/index.tsx +++ b/web/src/components/ChatBox/index.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useRef } from 'react'; import { ChatBoxContextProvider, useConverseMessage } from 'tailchat-shared'; import { AlertErrorView } from '../AlertErrorView'; import { ChatBoxPlaceholder } from './ChatBoxPlaceholder'; import { ChatInputBox } from './ChatInputBox'; import { ChatMessageList } from './ChatMessageList'; +import type { MessageListRef } from './ChatMessageList/types'; import { ChatReply } from './ChatReply'; import { useMessageAck } from './useMessageAck';