feat: useChat
This commit is contained in:
parent
40d4a6384b
commit
a2d98c4da8
|
|
@ -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
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -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} />
|
||||||
|
|
|
||||||
|
|
@ -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={[
|
||||||
<InputBar onSubmit={onSubmit}/>
|
<div key='submit' className={styles.chatPageFooter}>
|
||||||
</div>]}
|
<InputBar onSubmit={onSubmit} />
|
||||||
|
</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'>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue