can stop fetch

Author: JYC0413

components/Chat/Chat.tsx

@@ -41,6 +41,7 @@ export const Chat = memo(({stopConversationRef}: Props) => {
                 modelError,
                 loading,
                 prompts,
+                controller
             },
             handleUpdateConversation,
             dispatch: homeDispatch,
@@ -219,7 +220,9 @@ export const Chat = memo(({stopConversationRef}: Props) => {
                         if (isStream) {
                             queryDoneRef.current = false;
                             let lastTime = new Date().getTime();
-                            let response: ReadableStream<Uint8Array> | null = await ChatStream(model, promptToSend, temperatureToUse, api, key, messagesToSend);
+                            const abortController = new AbortController();
+                            homeDispatch({field: 'controller', value: abortController});
+                            let response: ReadableStream<Uint8Array> | null = await ChatStream(model, promptToSend, temperatureToUse, api, key, messagesToSend, abortController);
                             if (response) {
                                 let notFinishData = "";
                                 const decoder = new TextDecoder();

components/Chat/ChatInput.tsx

@@ -1,4 +1,4 @@
-import {IconArrowDown, IconBolt, IconSend, IconUpload, IconWriting} from '@tabler/icons-react';
+import {IconArrowDown, IconBolt, IconSend, IconSendOff, IconUpload, IconWriting} from '@tabler/icons-react';
 import React, {KeyboardEvent, MutableRefObject, useCallback, useContext, useEffect, useRef, useState,} from 'react';
 
 import {useTranslation} from 'next-i18next';
@@ -34,7 +34,7 @@ export const ChatInput = ({
     const {t} = useTranslation('chat');
 
     const {
-        state: {selectedConversation, messageIsStreaming, prompts},
+        state: {selectedConversation, messageIsStreaming, prompts, controller},
 
         dispatch: homeDispatch,
     } = useContext(HomeContext);
@@ -75,6 +75,13 @@ export const ChatInput = ({
         updatePromptListVisibility(value);
     };
 
+    const stopSend = () => {
+        if (messageIsStreaming && controller) {
+            controller.abort();
+            homeDispatch({field: 'messageIsStreaming', value: false});
+        }
+    }
+
     const handleSend = () => {
         let thisList: string[] = imageSrcList
         if (urlInputShow) {
@@ -448,11 +455,10 @@ export const ChatInput = ({
 
                     <button
                         className="absolute right-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
-                        onClick={handleSend}
+                        onClick={messageIsStreaming ? stopSend : handleSend}
                     >
                         {messageIsStreaming ? (
-                            <div
-                                className="h-4 w-4 animate-spin rounded-full border-t-2 border-neutral-800 opacity-60 dark:border-neutral-100"></div>
+                            <IconSendOff size={18}/>
                         ) : (
                             <IconSend size={18}/>
                         )}

pages/api/home/home.state.tsx

@@ -29,6 +29,7 @@ export interface HomeInitialState {
   defaultModelId: OpenAIModelID | undefined;
   serverSideApiKeyIsSet: boolean;
   serverSidePluginKeysSet: boolean;
+  controller: AbortController | null;
 }
 
 export const initialState: HomeInitialState = {
@@ -55,4 +56,5 @@ export const initialState: HomeInitialState = {
   defaultModelId: undefined,
   serverSideApiKeyIsSet: false,
   serverSidePluginKeysSet: false,
+  controller: null
 };

utils/server/index.ts

@@ -21,7 +21,8 @@ export const ChatStream = async (
     temperature: number,
     api: string,
     key: string,
-    messages: Message[]
+    messages: Message[],
+    abortController: AbortController | null
 ) => {
     let finalMessage
     let queryUrl = `${api}/v1/chat/completions`;
@@ -47,6 +48,7 @@ export const ChatStream = async (
             messages: finalMessage,
             stream: true
         }),
+        signal: abortController ? abortController.signal : null
     });
     return res.body;
 }