Merge pull request #47 from nowscott/development

fix:避免了流被中止的错误

Author: nowscott

src/components/ChatAPI.js

@@ -2,11 +2,13 @@ import { useEffect } from 'react';
 import { sendSiliconMessage } from 'service/silicon';
 import { sendGroqMessage } from 'service/groq';
 
-const systemPrompt0 = `
-1. 每当用户提供对话记录时，优先使用提供的对话记录进行回答。
-2. 如果用户询问“我说过什么”或类似问题，检查提供的对话记录，并根据记录内容进行回答。
-3. 不需要提供类似“AI:”的前缀！！！
-`;
+// 默认的系统提示词，可以注释掉或者删除
+let systemPrompt0 = '';
+// systemPrompt0 = `
+// 1. 每当用户提供对话记录时，优先使用提供的对话记录进行回答。
+// 2. 如果用户询问“我说过什么”或类似问题，检查提供的对话记录，并根据记录内容进行回答。
+// 3. 不需要提供类似“AI:”的前缀！！！
+// `;
 
 const ChatAPI = ({
     source,
@@ -20,9 +22,10 @@ const ChatAPI = ({
     topP,
     topK,
     frequencyPenalty,
-    systemPrompt,
+    systemPrompt, // 可以为空
 }) => {
-    const fullSystemPrompt = `${systemPrompt0}\n${systemPrompt}`;
+    // 使用自定义系统提示，如果提供了的话
+    const fullSystemPrompt = systemPrompt ? `${systemPrompt0}\n${systemPrompt}` : '';
 
     useEffect(() => {
         if (!prompt) {
@@ -72,7 +75,7 @@ const ChatAPI = ({
         topP,
         topK,
         frequencyPenalty,
-        fullSystemPrompt,
+        fullSystemPrompt, // 作为依赖项
         onContentUpdate,
         onTokenUpdate,
         onCompletion,

src/pages/ChatPage.js

@@ -1,5 +1,5 @@
 // src/pages/ChatPage.js
-import React, { useState, useCallback} from 'react';
+import React, { useState, useCallback } from 'react';
 import ChatAPI from 'components/ChatAPI';
 import NavBar from 'components/layout/NavBar';
 import MessageList from 'components/layout/MessageList';
@@ -15,6 +15,7 @@ const ChatPage = () => {
     const [aiMessageMid, setAiMessageMid] = useState(null);
     const [isSettingsOpen, setIsSettingsOpen] = useState(false);
     const [isMessageComplete, setIsMessageComplete] = useState(false);
+    const [shouldSubmit, setShouldSubmit] = useState(false);
 
     const handleContentUpdate = useCallback((newContent) => {
         if (!isMessageComplete) {
@@ -41,6 +42,7 @@ const ChatPage = () => {
         const fullPrompt = `${chatHistory}\n你: ${prompt}`;
         setIsMessageComplete(false);
         setSubmittedPrompt(fullPrompt);
+        setShouldSubmit(true);
     };
 
     const handleSettingsClick = () => {
@@ -53,14 +55,15 @@ const ChatPage = () => {
 
     const handleCompletion = useCallback(() => {
         setIsMessageComplete(true);
+        setShouldSubmit(false);
     }, []);
 
     return (
         <div className="flex flex-col h-svh justify-between overflow-hidden bg-stone-200 dark:bg-stone-800">
             <NavBar onSettingsClick={handleSettingsClick} />
             <MessageList messages={messages} onDelete={deleteMessage} />
             <InputPrompt onSend={handleSend} onClear={clearMessages} />
-            {submittedPrompt && !isSettingsOpen && (
+            {submittedPrompt && shouldSubmit && !isSettingsOpen && (
                 <ChatAPI
                     source={settings.source}
                     prompt={submittedPrompt}

src/service/groq.js

@@ -22,9 +22,14 @@ export function sendGroqMessage({
 }) {
   const controller = new AbortController();
 
+  if (!prompt.trim()) {
+    console.error("提示信息为空，未发送请求");
+    return () => {};
+  }
+
   const fetchChatCompletion = async () => {
     try {
-      console.log(model,'API 请求中...');
+      console.log(model, 'API 请求中...');
       const chatCompletion = await groq.chat.completions.create({
         messages: [
           { role: 'system', content: systemPrompt },
@@ -42,16 +47,16 @@ export function sendGroqMessage({
 
       for await (const chunk of chatCompletion) {
         const content = chunk.choices[0]?.delta?.content || '';
-        // console.log('content', content);
         buffer += content;
         onContentUpdate(buffer);
         buffer = '';
         if (chunk.x_groq && chunk.x_groq.usage) {
           onTokenUpdate(chunk.x_groq.usage.total_tokens);
+          console.log(chunk.x_groq.usage.total_tokens, 'API 请求成功');
         }
       }
       onCompletion();
-      console.log(model,'API 请求成功');
+      console.log(model, 'API 请求成功');
     } catch (error) {
       console.error('API 请求失败:', error);
       onCompletion({ error: '请求失败，请稍后重试。' });

src/service/silicon.js

@@ -18,6 +18,7 @@ export const sendSiliconMessage = ({
 }) => {
   const controller = new AbortController();
   const { signal } = controller;
+  let shouldStop = false;
 
   const options = {
     method: 'POST',
@@ -51,12 +52,16 @@ export const sendSiliconMessage = ({
     })
     .then(reader => {
       const decoder = new TextDecoder('utf-8');
-      const read = () => {
-        reader.read().then(({ done, value }) => {
+      const read = async () => {
+        if (shouldStop) return;
+
+        try {
+          const { done, value } = await reader.read();
           if (done) {
             onCompletion && onCompletion();
             return;
           }
+
           const text = decoder.decode(value, { stream: true });
           text.split('\n').forEach(line => {
             if (line.trim() && line.trim() !== 'data: [DONE]') {
@@ -70,15 +75,25 @@ export const sendSiliconMessage = ({
                   onTokenUpdate(jsonResponse.usage.total_tokens);
                 }
                 if (jsonResponse.choices[0].finish_reason === "stop") {
+                  shouldStop = true;
                   return;
                 }
               } catch (error) {
                 console.error('解析 JSON 时出错:', error, '行:', line);
               }
             }
           });
-          read();
-        });
+
+          if (!shouldStop) {
+            read();
+          }
+        } catch (err) {
+          if (err.name === 'AbortError') {
+            console.log('请求被中止');
+          } else {
+            console.error('读取流时出错:', err);
+          }
+        }
       };
       read();
     })