feat: 流式输出

components/ask/hello.tsx

@@ -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: {
+                id: Math.random().toString(36).substring(2, 9),
-                    text: text
+                content: text,
-                },
+                role: 'user',
-                role: 'User',
                 timestamp: new Date().toISOString()
             },
             {
-                content: {
+                id: Math.random().toString(36).substring(2, 9),
-                    text: "keepSearchIng"
+                content: "keepSearchIng",
-                },
+                role: 'assistant',
-                role: 'Assistant',
                 timestamp: new Date().toISOString()
             }
         ]);
-        const data = await createNewConversation(text);
+
-        setConversationId(data);
+        const sessionId = await createNewConversation(text);
-        const response = await getConversation({ session_id: data, user_text: text, material_ids: [] });
+        if (sessionId) {
-        setUserMessages((prev: Message[]) => {
+            setConversationId(sessionId);
-            const newMessages = [...(prev || [])];
+            webSocketManager.send({
-            if (response) {
+                type: 'Chat',
-                newMessages.push(response);
+                session_id: sessionId,
-            }
+                message: text
-            return newMessages.filter((item: Message) =>
+            });
-                item?.content?.text !== 'keepSearchIng'
+        } 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">

components/ask/send.tsx

@@ -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: {
+                            id: Math.random().toString(36).substring(2, 9),
-                                text: t("ask:ask.introduction1")
+                            content: t("ask:ask.introduction1"),
-                            },
+                            role: 'assistant',
-                            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: {
+                id: Math.random().toString(36).substring(2, 9),
-                    text: text
+                content: text,
-                },
+                role: 'user',
-                role: 'User',
                 timestamp: new Date().toISOString()
             },
             {
-                content: {
+                id: Math.random().toString(36).substring(2, 9),
-                    text: "keepSearchIng"
+                content: "keepSearchIng",
-                },
+                role: 'assistant',
-                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 => 
+                setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
-                    !(typeof item.content === 'string' && 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: {
+                id: Math.random().toString(36).substring(2, 9),
-                    text: type === "search"
+                content: type === "search"
-                        ? t("ask:ask.introduction2")
+                    ? t("ask:ask.introduction2")
-                        : t("ask:ask.introduction3")
+                    : t("ask:ask.introduction3"),
-                },
+                role: 'assistant',
-                role: 'Assistant',
                 timestamp: new Date().toISOString()
             }
         ]))

lib/websocket-util.ts

@@ -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) {