From a2d98c4da8e378b66c7c22e29ba21fb354e98dbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=A6=82=E5=A8=81?= Date: Mon, 5 Jan 2026 17:30:48 +0800 Subject: [PATCH] feat: useChat --- src/components/Custom/ChatList/hooks/useChat.ts | 7 ++++--- src/components/Custom/ChatList/index.tsx | 9 ++++++--- src/pages/chat/index.tsx | 10 ++++++---- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/Custom/ChatList/hooks/useChat.ts b/src/components/Custom/ChatList/hooks/useChat.ts index e6a33c5..2155d2d 100644 --- a/src/components/Custom/ChatList/hooks/useChat.ts +++ b/src/components/Custom/ChatList/hooks/useChat.ts @@ -49,15 +49,16 @@ export function useChat({ api }: UseChatOptions) { setLoading(true) const mokeResult = "你好!有什麼我可以幫你的嗎?聽起來很有趣,請繼續說。我正在思考你的問題,請稍候...這是一個很棒的觀點!哈哈,真的嗎?太神奇了。抱歉,我剛才走神了,你能再說一遍嗎" - const count = random(0, 200) + const count = random(0, 100) let idx = 0; while (idx < count) { const tokenLength = random(2, 5) - console.log(tokenLength); + const startIndex = idx % mokeResult.length + const chunk = mokeResult.slice(startIndex, startIndex + tokenLength); setMessages(prev => prev.map(msg => msg.id === assistantId - ? { ...msg, content: msg.content + mokeResult.substring(idx % mokeResult.length, tokenLength) } + ? { ...msg, content: msg.content + chunk } : msg ) ) diff --git a/src/components/Custom/ChatList/index.tsx b/src/components/Custom/ChatList/index.tsx index 990beeb..e117cbb 100644 --- a/src/components/Custom/ChatList/index.tsx +++ b/src/components/Custom/ChatList/index.tsx @@ -8,15 +8,18 @@ type ChatListProps = { } export function ChatList({ messages }: ChatListProps) { - const bottomRef = useRef(null) + const bottomRef = useRef(null); + const listRef = useRef(null); useEffect(() => { - bottomRef?.current?.scrollIntoView({ behavior: 'smooth' }); + const content = listRef?.current; + if (!content || content.scrollHeight > content.clientHeight) return; + bottomRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'end' }); }, [messages]); return ( <> -
+
{messages.map(msg => (
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx index fe0d68e..fa5520f 100644 --- a/src/pages/chat/index.tsx +++ b/src/pages/chat/index.tsx @@ -22,7 +22,7 @@ export default () => { const { messages, setMessages, loading, stop, sendMessage } = useChat({ api: '' }); const onSubmit: InputBarSubmitHandler = (e: InputBarEvent) => { sendMessage(e.query); - } + } return { style: footerStyle, renderContent: (_, dom) => dom.props.children[1], }} - footer={[
- -
]} + footer={[ +
+ +
+ ]} title={ setModel(val)} />} >