chore: add abort logic progress[1]

Author: yaroslav8765

custom/ChatSurface.vue

@@ -170,6 +170,7 @@
                 </div>
               </div>
               <Button 
+                v-if="!agentStore.isResponseInProgress"
                 class="absolute right-4 bottom-2 !p-0 h-9 w-9"                    
                 @click="sendMessage" 
                 :disabled="!agentStore.trimmedUserMessage || agentStore.isResponseInProgress"
@@ -179,6 +180,15 @@
                     text-white" 
                 />
               </Button>
+              <Button
+                v-else
+                class="absolute right-4 bottom-2 !p-0 h-9 w-9"    
+                @click="stopCurrentRequest"                
+              >
+                <div
+                  class="w-3 h-3 bg-white rounded-sm"
+                />
+              </Button>
             </div>
           </div>
         </div>
@@ -316,6 +326,10 @@ async function sendMessage() {
   conversationArea.value?.handleSendMessage();
 }
 
+function stopCurrentRequest() {
+  agentStore.abortCurrentChatRequest();
+}
+
 function updateHeight() {
   dvh.value = Math.round(window.visualViewport?.height || window.innerHeight);
 }

custom/composables/useAgentStore.ts

@@ -252,6 +252,10 @@ export const useAgentStore = defineStore('agent', () => {
 
   }
 
+  function abortCurrentChatRequest() {
+    currentChat.value?.stop();
+  }
+
   function clearPlaceholderAnimationTimer() {
     if (placeholderAnimationTimer !== null) {
       clearTimeout(placeholderAnimationTimer);
@@ -638,6 +642,7 @@ export const useAgentStore = defineStore('agent', () => {
     MAX_WIDTH,
     MIN_WIDTH,
     getLocalStorageItem,
-    addDebugMessage
+    addDebugMessage,
+    abortCurrentChatRequest
   }
 })

index.ts

@@ -420,7 +420,7 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
     server.endpoint({
       method: 'POST',
       path: `/agent/response`,
-      handler: async ({ body, query, headers, cookies, adminUser, response, requestUrl, _raw_express_res }) => {
+      handler: async ({ body, query, headers, cookies, adminUser, response, requestUrl, _raw_express_res, abortSignal }) => {
         const res = _raw_express_res;
         const messageId = randomUUID();
         const prompt = body.message;