feat: useChat

This commit is contained in:
李如威 2026-01-05 17:30:48 +08:00
parent 40d4a6384b
commit a2d98c4da8
3 changed files with 16 additions and 10 deletions

View File

@ -49,15 +49,16 @@ export function useChat({ api }: UseChatOptions) {
setLoading(true) setLoading(true)
const mokeResult = "你好!有什麼我可以幫你的嗎?聽起來很有趣,請繼續說。我正在思考你的問題,請稍候...這是一個很棒的觀點!哈哈,真的嗎?太神奇了。抱歉,我剛才走神了,你能再說一遍嗎" const mokeResult = "你好!有什麼我可以幫你的嗎?聽起來很有趣,請繼續說。我正在思考你的問題,請稍候...這是一個很棒的觀點!哈哈,真的嗎?太神奇了。抱歉,我剛才走神了,你能再說一遍嗎"
const count = random(0, 200) const count = random(0, 100)
let idx = 0; let idx = 0;
while (idx < count) { while (idx < count) {
const tokenLength = random(2, 5) const tokenLength = random(2, 5)
console.log(tokenLength); const startIndex = idx % mokeResult.length
const chunk = mokeResult.slice(startIndex, startIndex + tokenLength);
setMessages(prev => setMessages(prev =>
prev.map(msg => prev.map(msg =>
msg.id === assistantId msg.id === assistantId
? { ...msg, content: msg.content + mokeResult.substring(idx % mokeResult.length, tokenLength) } ? { ...msg, content: msg.content + chunk }
: msg : msg
) )
) )

View File

@ -8,15 +8,18 @@ type ChatListProps = {
} }
export function ChatList({ messages }: ChatListProps) { export function ChatList({ messages }: ChatListProps) {
const bottomRef = useRef<HTMLDivElement>(null) const bottomRef = useRef<HTMLDivElement>(null);
const listRef = useRef<HTMLDivElement>(null);
useEffect(() => { 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]); }, [messages]);
return ( return (
<> <>
<div className={styles.chatList}> <div className={styles.chatList} ref={listRef}>
{messages.map(msg => ( {messages.map(msg => (
<div key={msg.id}> <div key={msg.id}>
<ChatItem message={msg} /> <ChatItem message={msg} />

View File

@ -31,9 +31,11 @@ export default () => {
style: footerStyle, style: footerStyle,
renderContent: (_, dom) => dom.props.children[1], renderContent: (_, dom) => dom.props.children[1],
}} }}
footer={[<div key='submit' className={styles.chatPageFooter}> footer={[
<div key='submit' className={styles.chatPageFooter}>
<InputBar onSubmit={onSubmit} /> <InputBar onSubmit={onSubmit} />
</div>]} </div>
]}
title={<HeaderModelSelect value={model} onChange={val => setModel(val)} />} title={<HeaderModelSelect value={model} onChange={val => setModel(val)} />}
> >
<Flex vertical align='center'> <Flex vertical align='center'>