FairClip/memowake-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 流式输出

Browse Source
This commit is contained in:
Junhui Chen 2025-08-03 21:33:39 +08:00
parent 9acdec2347
commit df8dd38c84
3 changed files with 144 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/ask/hello.tsx
View File

@ -4,7 +4,8 @@ import { Message } from "@/types/ask";
import { Dispatch, SetStateAction } from "react";
import { useTranslation } from "react-i18next";
import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
import { createNewConversation, getConversation } from "./utils";
import { webSocketManager } from "@/lib/websocket-util";
import { createNewConversation } from "./utils";
interface AskHelloProps {
setUserMessages: Dispatch<SetStateAction<Message[]>>;
@ -15,35 +16,34 @@ export default function AskHello({ setUserMessages, setConversationId, setIsHell
const { t } = useTranslation();
const handleCase = async (text: string) => {
setIsHello(false)
setIsHello(false);
setUserMessages([
{
content: {
text: text
},
role: 'User',
id: Math.random().toString(36).substring(2, 9),
content: text,
role: 'user',
timestamp: new Date().toISOString()
},
{
content: {
text: "keepSearchIng"
},
role: 'Assistant',
id: Math.random().toString(36).substring(2, 9),
content: "keepSearchIng",
role: 'assistant',
timestamp: new Date().toISOString()
}
]);
const data = await createNewConversation(text);
setConversationId(data);
const response = await getConversation({ session_id: data, user_text: text, material_ids: [] });
setUserMessages((prev: Message[]) => {
const newMessages = [...(prev || [])];
if (response) {
newMessages.push(response);
}
return newMessages.filter((item: Message) =>
item?.content?.text !== 'keepSearchIng'
);
});
const sessionId = await createNewConversation(text);
if (sessionId) {
setConversationId(sessionId);
webSocketManager.send({
type: 'Chat',
session_id: sessionId,
message: text
});
} else {
console.error("Failed to create a new conversation.");
setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
}
}
return (
<View className="flex-1 bg-white w-full">

145
components/ask/send.tsx
View File

@ -16,6 +16,7 @@ import { Message } from '@/types/ask';
import { useTranslation } from 'react-i18next';
import { ThemedText } from '../ThemedText';
import { createNewConversation } from './utils';
import { WsMessage } from '@/lib/websocket-util';
import { webSocketManager } from '@/lib/websocket-util';
interface Props {
@ -26,6 +27,8 @@ interface Props {
selectedImages: string[];
setSelectedImages: Dispatch<SetStateAction<string[]>>;
}
const RENDER_INTERVAL = 50; // 渲染间隔，单位毫秒
export default function SendMessage(props: Props) {
const { setIsHello, conversationId, setUserMessages, setConversationId, selectedImages, setSelectedImages } = props;
@ -35,7 +38,106 @@ export default function SendMessage(props: Props) {
const [inputValue, setInputValue] = useState('');
// 添加一个ref来跟踪键盘状态
const isKeyboardVisible = useRef(false);
const isKeyboardVisible = useRef(false);
const chunkQueue = useRef<string[]>([]);
const renderInterval = useRef<ReturnType<typeof setInterval> | null>(null);
useEffect(() => {
const handleChatStream = (message: WsMessage) => {
if (message.type !== 'ChatStream' || !message.chunk) return;
chunkQueue.current.push(message.chunk);
if (!renderInterval.current) {
renderInterval.current = setInterval(() => {
if (chunkQueue.current.length > 0) {
const textToRender = chunkQueue.current.join('');
chunkQueue.current = [];
setUserMessages(prevMessages => {
if (prevMessages.length === 0) return prevMessages;
const lastMessage = prevMessages[prevMessages.length - 1];
if (lastMessage.role !== 'assistant') return prevMessages;
const updatedContent = (lastMessage.content === 'keepSearchIng' ? '' : lastMessage.content) + textToRender;
const updatedLastMessage = { ...lastMessage, content: updatedContent };
return [...prevMessages.slice(0, -1), updatedLastMessage];
});
} else {
if (renderInterval.current) {
clearInterval(renderInterval.current);
renderInterval.current = null;
}
}
}, RENDER_INTERVAL);
}
};
const handleChatStreamEnd = (message: WsMessage) => {
if (message.type !== 'ChatStreamEnd') return;
// Stop the timer and process any remaining chunks
if (renderInterval.current) {
clearInterval(renderInterval.current);
renderInterval.current = null;
}
const remainingText = chunkQueue.current.join('');
chunkQueue.current = [];
setUserMessages(prevMessages => {
if (prevMessages.length === 0) return prevMessages;
const lastMessage = prevMessages[prevMessages.length - 1];
if (lastMessage.role !== 'assistant') return prevMessages;
// Apply remaining chunks from the queue
const contentWithQueue = (lastMessage.content === 'keepSearchIng' ? '' : lastMessage.content) + remainingText;
// Create the final updated message object
const updatedLastMessage = {
...lastMessage,
// Use the final message from ChatStreamEnd if available, otherwise use the content with queued text
content: message.message ? message.message.content : contentWithQueue,
timestamp: message.message ? message.message.timestamp : lastMessage.timestamp,
};
return [...prevMessages.slice(0, -1), updatedLastMessage];
});
};
const handleChatResponse = (message: WsMessage) => {
if (message.type === 'ChatResponse' && message.message) {
setUserMessages(prev => {
const newMessages = prev.filter(item => item.content !== 'keepSearchIng');
return [...newMessages, {
...(message.message as Message),
role: 'assistant',
}];
});
}
}
const typedHandleChatStream = handleChatStream as (message: WsMessage) => void;
const typedHandleChatStreamEnd = handleChatStreamEnd as (message: WsMessage) => void;
const typedHandleChatResponse = handleChatResponse as (message: WsMessage) => void;
webSocketManager.subscribe('ChatStream', typedHandleChatStream);
webSocketManager.subscribe('ChatStreamEnd', typedHandleChatStreamEnd);
webSocketManager.subscribe('ChatResponse', typedHandleChatResponse);
return () => {
webSocketManager.unsubscribe('ChatStream', typedHandleChatStream);
webSocketManager.unsubscribe('ChatStreamEnd', typedHandleChatStreamEnd);
webSocketManager.unsubscribe('ChatResponse', typedHandleChatResponse);
if (renderInterval.current) {
clearInterval(renderInterval.current);
}
};
}, [setUserMessages]);
useEffect(() => {
// 使用keyboardWillShow而不是keyboardDidShow，这样可以在键盘完全显示前更新UI
@ -47,10 +149,9 @@ export default function SendMessage(props: Props) {
setIsHello(false);
setUserMessages([
{
content: {
text: t("ask:ask.introduction1")
},
role: 'Assistant',
id: Math.random().toString(36).substring(2, 9),
content: t("ask:ask.introduction1"),
role: 'assistant',
timestamp: new Date().toISOString()
}
])
@ -66,7 +167,8 @@ export default function SendMessage(props: Props) {
showSubscription.remove();
hideSubscription.remove();
};
}, [conversationId]);
}, [conversationId, setIsHello, setUserMessages, t]);
// 发送询问
const handleSubmit = useCallback(async () => {
@ -75,17 +177,15 @@ export default function SendMessage(props: Props) {
if (text) {
// 将用户输入信息添加到消息列表中
setUserMessages(pre => ([...pre, {
content: {
text: text
},
role: 'User',
id: Math.random().toString(36).substring(2, 9),
content: text,
role: 'user',
timestamp: new Date().toISOString()
},
{
content: {
text: "keepSearchIng"
},
role: 'Assistant',
id: Math.random().toString(36).substring(2, 9),
content: "keepSearchIng",
role: 'assistant',
timestamp: new Date().toISOString()
}
]));
@ -108,9 +208,7 @@ export default function SendMessage(props: Props) {
} else {
console.error("无法获取 session_id，消息发送失败。");
// 可以在这里处理错误，例如显示一个提示
setUserMessages(prev => prev.filter(item =>
!(typeof item.content === 'string' && item.content === 'keepSearchIng')
));
setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
}
// 将输入框清空
setInputValue('');
@ -119,19 +217,18 @@ export default function SendMessage(props: Props) {
Keyboard.dismiss();
}
}
}, [inputValue, conversationId, selectedImages, createNewConversation]);
}, [inputValue, conversationId, selectedImages, createNewConversation, setConversationId, setSelectedImages, setUserMessages]);
const handleQuitly = (type: string) => {
setIsHello(false)
setUserMessages(pre => ([
...pre,
{
content: {
text: type === "search"
? t("ask:ask.introduction2")
: t("ask:ask.introduction3")
},
role: 'Assistant',
id: Math.random().toString(36).substring(2, 9),
content: type === "search"
? t("ask:ask.introduction2")
: t("ask:ask.introduction3"),
role: 'assistant',
timestamp: new Date().toISOString()
}
]))

1
lib/websocket-util.ts
View File

@ -87,6 +87,7 @@ class WebSocketManager {
this.ws.onmessage = (event) => {
try {
const message: WsMessage = JSON.parse(event.data);
// console.log('WebSocket received message:', message)
// 根据消息类型分发
const eventListeners = this.messageListeners.get(message.type);
if (eventListeners) {