stop request

GaiaNet-AI · Dec 11, 2024 · d026da8 · d026da8
1 parent 91735b0
commit d026da8
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 27 deletions.
diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
@@ -227,13 +227,16 @@ export const Chat = memo(({stopConversationRef}: Props) => {
                     }
                     if (isStream) {
                         queryDoneRef.current = false;
+                        const abortController = new AbortController();
+                        homeDispatch({field: 'controller', value: abortController});
                         let response: ReadableStream<Uint8Array> | null = await ChatStream(
                             node,
                             promptToSend,
                             temperatureToUse,
                             api,
                             key,
                             messagesToSend,
+                            abortController
                         );
                         if (response) {
                             let notFinishData = '';

diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import {IconArrowDown, IconBolt,} from '@tabler/icons-react';
+import {IconArrowDown, IconBolt, IconSend} from '@tabler/icons-react';
 import React, {KeyboardEvent, MutableRefObject, useCallback, useContext, useEffect, useRef, useState,} from 'react';
 
 import {useTranslation} from 'next-i18next';
@@ -35,7 +35,7 @@ export const ChatInput = ({
     const {t} = useTranslation('chat');
 
     const {
-        state: {selectedConversation, messageIsStreaming, prompts},
+        state: {selectedConversation, controller, messageIsStreaming, prompts},
 
         dispatch: homeDispatch,
     } = useContext(HomeContext);
@@ -64,6 +64,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) {
@@ -431,33 +438,28 @@ export const ChatInput = ({
                         />
                     </div>
                     <button
-                        className="absolute right-2 top-2 rounded-sm p-1 inline-flex items-center gap-2 cursor-pointer"
-                        onClick={handleSend}
+                        className="absolute right-2 top-2 p-1 inline-flex items-center gap-2 cursor-pointer bg-fontPrimary rounded-2xl"
+                        onClick={messageIsStreaming ? stopSend : handleSend}
                     >
                         {messageIsStreaming ? (
-                            <div className="h-4 w-4 animate-spin rounded-full border-t-2 border-neutral-800 flex justify-center items-center"></div>
-                        ) : (
                             <>
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="16"
-                                    height="16"
-                                    viewBox="0 0 16 16"
-                                    fill="none"
-                                >
-                                    <g clipPath="url(#clip0_4682_3886)">
-                                        <path
-                                            d="M14.0001 5.5V8.4C14.0001 8.9 13.6001 9.4 13.0001 9.4L4.00015 9.5V6.9C4.00015 6.6 3.60015 6.4 3.40015 6.6L0.100146 10.2C0.000146488 10.4 0.000146488 10.6 0.100146 10.8L3.40015 14.4C3.60015 14.6 4.00015 14.5 4.00015 14.1V11.5L13.0001 11.4C14.6001 11.4 16.0001 10 16.0001 8.4V5.5H14.0001Z"
-                                            fill="#121314"
-                                        />
-                                    </g>
-                                    <defs>
-                                        <clipPath id="clip0_4682_3886">
-                                            <rect width="16" height="16" fill="white"/>
-                                        </clipPath>
-                                    </defs>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
+                                     fill="white"
+                                     className="icon icon-tabler icons-tabler-filled icon-tabler-circle-rectangle">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                    <path
+                                        d="M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m0 5.66h-10a1 1 0 0 0 -1 1v4a1 1 0 0 0 1 1h10a1 1 0 0 0 1 -1v-4a1 1 0 0 0 -1 -1"/>
                                 </svg>
-                                <p className="text-[15px] leading-[20px] tracking-[0.9px] font-MonaspaceNeon text-fontPrimary uppercase">
+                                <p style={{color: "white"}}
+                                   className="text-[15px] leading-[20px] tracking-[0.9px] font-MonaspaceNeon text-fontPrimary uppercase">
+                                    Stop
+                                </p>
+                            </>
+                        ) : (
+                            <>
+                                <IconSend color="white" size={18}/>
+                                <p style={{color: "white"}}
+                                   className="text-[15px] leading-[20px] tracking-[0.9px] font-MonaspaceNeon text-fontPrimary uppercase">
                                     Send
                                 </p>
                             </>
@@ -466,7 +468,7 @@ export const ChatInput = ({
 
                     {showScrollDownButton && (
                         <div className="absolute bottom-12 right-0 lg:bottom-0 lg:-right-10">
-                            <button
+                        <button
                                 className="flex h-7 w-7 items-center justify-center rounded-full bg-fontPrimary text-fontLight outline-none "
                                 onClick={onScrollDownClick}
                             >

diff --git a/pages/api/home/home.state.tsx b/pages/api/home/home.state.tsx
@@ -29,6 +29,7 @@ export interface HomeInitialState {
   defaultModelId: OpenAIModelID | undefined;
   selectedNode: SelectedNode | undefined;
   selectedNodeSystemPrompt: string;
+  controller: AbortController | null;
 }
 
 export const initialState: HomeInitialState = {
@@ -55,4 +56,5 @@ export const initialState: HomeInitialState = {
   defaultModelId: undefined,
   selectedNode: undefined,
   selectedNodeSystemPrompt: '',
+  controller: null
 };
diff --git a/utils/server/index.ts b/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 = `/v1/chat/completions`;
@@ -50,6 +51,7 @@ export const ChatStream = async (
                 "include_usage": true
             }
         }),
+        signal: abortController ? abortController.signal : null
     });
     return res.body;
 }