Stop Agent Execution button in ADK web

src/app/components/chat/chat.component.html

@@ -348,7 +348,17 @@
                   }"
                 >
                   @if (message.isLoading) {
-                    <mat-progress-bar class="loading-bar" mode="buffer"></mat-progress-bar>
+                    <div class="loading-container">
+                      <mat-progress-bar class="loading-bar" mode="buffer"></mat-progress-bar>
+                      <button
+                        mat-fab-button
+                        class="stop-button"
+                        (click)="stop()"
+                        matTooltip="Stop execution"
+                      >
+                        <mat-icon>stop</mat-icon>
+                      </button>
+                    </div>
                   }
                   @if (message.attachments) {
                     <div class="attachments">

src/app/components/chat/chat.component.scss

@@ -85,11 +85,31 @@
   background-color: #131314;
 }
 
+.loading-container {
+  display: flex;
+  align-items: center;
+  width: 150px;
+  justify-content: space-between;
+}
+
 .loading-bar {
   width: 100px;
   margin: 15px;
 }
 
+.stop-button {
+  width: 30px;
+  height: 30px;
+  background-color: #303030;
+
+  .mat-icon {
+    font-size: 18px;
+    color: white;
+    margin-left: -20px;
+    margin-top: -10px;
+  }
+}
+
 .chat-messages {
   flex-grow: 1;
   overflow-y: auto;

src/app/components/chat/chat.component.ts

@@ -1389,6 +1389,10 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     this.currentSessionState = session.state;
   }
 
+  stop() {
+    this.agentService.stopSse();
+  }
+
   onNewSessionClick() {
     this.createSession();
     this.eventData.clear();

src/app/core/services/agent.service.ts

@@ -31,6 +31,7 @@ export class AgentService {
   private _currentApp = new BehaviorSubject<string>('');
   currentApp = this._currentApp.asObservable();
   private isLoading = new BehaviorSubject<boolean>(false);
+  private abortController: AbortController | null = null;
 
   constructor(
     private http: HttpClient,
@@ -49,9 +50,19 @@ export class AgentService {
     return this.isLoading;
   }
 
+  stopSse() {
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+
   runSse(req: AgentRunRequest) {
     const url = this.apiServerDomain + `/run_sse`;
     this.isLoading.next(true);
+    this.abortController = new AbortController();
+    const signal = this.abortController.signal;
+
     return new Observable<string>((observer) => {
       const self = this;
       fetch(url, {
@@ -61,6 +72,7 @@ export class AgentService {
           'Accept': 'text/event-stream',
         },
         body: JSON.stringify(req),
+        signal,
       })
         .then((response) => {
           const reader = response.body?.getReader();
@@ -97,13 +109,20 @@ export class AgentService {
                 })
                 .catch((err) => {
                   self.zone.run(() => observer.error(err));
+                  this.isLoading.next(false);
                 });
           };
 
           read();
         })
         .catch((err) => {
-          self.zone.run(() => observer.error(err));
+          if (err.name === 'AbortError') {
+            // Fetch was aborted
+            this.isLoading.next(false);
+            observer.complete();
+          } else {
+            self.zone.run(() => observer.error(err));
+          }
         });
     });
   }