ui: cancel response generation method

frontend/app/components/Kai/KaiChat.tsx

@@ -71,7 +71,7 @@ function KaiChat() {
     if (firstMsg) {
       setInitialMsg(firstMsg);
     }
-    const newThread = await aiService.createKaiChat(settings.projectId, settings.userId)
+    const newThread = await kaiService.createKaiChat(settings.projectId, settings.userId)
     if (newThread) {
       setThreadId(newThread.toString());
       setSection('chat');

frontend/app/components/Kai/KaiService.ts

@@ -89,4 +89,22 @@ export default class KaiService extends AiService {
 
     return await r.json()
   }
+
+  cancelGeneration = async (projectId: string, threadId: string, userId: string) => {
+    const jwt = window.env.KAI_TESTING // this.client.getJwt()
+    const r = await fetch(`http://localhost:8700/kai/${projectId}/cancel/${threadId}?user_id=${userId}`, {
+      method: 'POST',
+      headers: new Headers({
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${jwt}`
+      }),
+    });
+    if (!r.ok) {
+      throw new Error('Failed to cancel generation');
+    }
+
+    const data = await r.json();
+    return data;
+  }
 }

frontend/app/components/Kai/KaiStore.ts

@@ -1,6 +1,6 @@
 import { makeAutoObservable, runInAction } from 'mobx';
 import { BotChunk, ChatManager, Message } from './SocketManager';
-import { kaiService as aiService } from 'App/services';
+import { kaiService as aiService, kaiService } from 'App/services';
 import { toast } from 'react-toastify';
 
 class KaiStore {
@@ -159,7 +159,6 @@ class KaiStore {
   };
 
   sendMessage = (message: string) => {
-    console.log('send')
     if (this.chatManager) {
       this.chatManager.sendMessage(message, this.replacing);
     }
@@ -200,6 +199,16 @@ class KaiStore {
       });
   };
 
+  cancelGeneration = async (settings: { projectId: string; userId: string; threadId: string }) => {
+    try {
+      await kaiService.cancelGeneration(settings.projectId, settings.threadId, settings.userId)
+      this.setProcessingStage(null)
+    } catch (e) {
+      console.error(e)
+      toast.error('Failed to cancel the generation, please try again later.')
+    }
+  }
+
   clearChat = () => {
     this.setMessages([]);
     this.setProcessingStage(null);

frontend/app/components/Kai/components/ChatInput.tsx

@@ -1,20 +1,26 @@
 import React from 'react'
 import { Button, Input } from "antd";
-import { SendHorizonal } from "lucide-react";
+import { SendHorizonal, OctagonX } from "lucide-react";
 import { kaiStore } from "../KaiStore";
 import { observer } from "mobx-react-lite";
 
-function ChatInput({ isLoading, onSubmit }: { isLoading?: boolean, onSubmit: (str: string) => void }) {
+function ChatInput({ isLoading, onSubmit, threadId }: { isLoading?: boolean, onSubmit: (str: string) => void, threadId: string }) {
   const inputRef = React.useRef<Input>(null);
   const inputValue = kaiStore.queryText;
+  const isProcessing = kaiStore.processingStage !== null
   const setInputValue = (text: string) => {
     kaiStore.setQueryText(text)
   }
 
   const submit = () => {
-    if (inputValue.length > 0) {
-      onSubmit(inputValue)
-      setInputValue('')
+    if (isProcessing) {
+      const settings = { projectId: '2325', userId: '0', threadId, };
+      void kaiStore.cancelGeneration(settings)
+    } else {
+      if (inputValue.length > 0) {
+        onSubmit(inputValue)
+        setInputValue('')
+      }
     }
   }
 
@@ -36,7 +42,7 @@ function ChatInput({ isLoading, onSubmit }: { isLoading?: boolean, onSubmit: (st
         <Button
           loading={isLoading}
           onClick={submit}
-          icon={<SendHorizonal size={16} />}
+          icon={isProcessing ? <OctagonX size={16} /> : <SendHorizonal size={16} />}
           type={'text'}
           size={'small'}
           shape={'circle'}

frontend/app/components/Kai/components/ChatLog.tsx

@@ -79,7 +79,7 @@ function ChatLog({
           ) : null}
         </div>
         <div className={'sticky bottom-0 pt-6 w-2/3'}>
-          <ChatInput onSubmit={onSubmit} />
+          <ChatInput onSubmit={onSubmit} threadId={threadId} />
         </div>
       </div>
     </Loader>