feat: useChat
This commit is contained in:
parent
40d4a6384b
commit
a2d98c4da8
|
|
@ -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
|
||||
)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -8,15 +8,18 @@ type ChatListProps = {
|
|||
}
|
||||
|
||||
export function ChatList({ messages }: ChatListProps) {
|
||||
const bottomRef = useRef<HTMLDivElement>(null)
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
const listRef = useRef<HTMLDivElement>(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 (
|
||||
<>
|
||||
<div className={styles.chatList}>
|
||||
<div className={styles.chatList} ref={listRef}>
|
||||
{messages.map(msg => (
|
||||
<div key={msg.id}>
|
||||
<ChatItem message={msg} />
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default () => {
|
|||
const { messages, setMessages, loading, stop, sendMessage } = useChat({ api: '' });
|
||||
const onSubmit: InputBarSubmitHandler = (e: InputBarEvent) => {
|
||||
sendMessage(e.query);
|
||||
}
|
||||
}
|
||||
|
||||
return <PageContainer
|
||||
className={styles.chatPage}
|
||||
|
|
@ -31,9 +31,11 @@ export default () => {
|
|||
style: footerStyle,
|
||||
renderContent: (_, dom) => dom.props.children[1],
|
||||
}}
|
||||
footer={[<div key='submit' className={styles.chatPageFooter}>
|
||||
<InputBar onSubmit={onSubmit}/>
|
||||
</div>]}
|
||||
footer={[
|
||||
<div key='submit' className={styles.chatPageFooter}>
|
||||
<InputBar onSubmit={onSubmit} />
|
||||
</div>
|
||||
]}
|
||||
title={<HeaderModelSelect value={model} onChange={val => setModel(val)} />}
|
||||
>
|
||||
<Flex vertical align='center'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue