[AiAssistance] Abort ongoing conversation on navigation to old chat

Earlier, the mutex was blocking completion of ongoing conversation step before navigating to the old chat.

Bug: 396609285
Change-Id: I0669cef72bacedca32886a33f0ddccc4b348c401
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6304521
Commit-Queue: Samiya Caur <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: Samiya Caur

front_end/core/host/AidaClient.ts

@@ -326,7 +326,7 @@ export class AidaClient {
       let {promise, resolve, reject} = Promise.withResolvers<string|null>();
       options?.signal?.addEventListener('abort', () => {
         reject(new AidaAbortError());
-      });
+      }, {once: true});
       return {
         write: async(data: string): Promise<void> => {
           resolve(data);

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1131,6 +1131,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (this.#currentConversation === conversation) {
       return;
     }
+    this.#cancel();
     this.#currentConversation = conversation;
     this.#messages = [];
     await this.#doConversation(conversation.history);
@@ -1170,6 +1171,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #runAbortController = new AbortController();
   #cancel(): void {
     this.#runAbortController.abort();
+    this.#runAbortController = new AbortController();
     this.#isLoading = false;
     this.requestUpdate();
   }
@@ -1221,7 +1223,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
     // Cancel any previous in-flight conversation.
     this.#cancel();
-    this.#runAbortController = new AbortController();
     const signal = this.#runAbortController.signal;
     const context = this.#getConversationContext();
     // If a different context is provided, it must be from the same origin.
@@ -1277,10 +1278,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   async *
       #saveResponsesToCurrentConversation(items: AsyncIterable<ResponseData, void, void>):
           AsyncGenerator<ResponseData, void, void> {
+    const currentConversation = this.#currentConversation;
     for await (const data of items) {
       // We don't want to save partial responses to the conversation history.
       if (data.type !== ResponseType.ANSWER || data.complete) {
-        this.#currentConversation?.addHistoryItem(data);
+        currentConversation?.addHistoryItem(data);
       }
       yield data;
     }

test/e2e/ai_assistance/ai_assistance_test.ts

@@ -244,6 +244,13 @@ describe('AI Assistance', function() {
     return await submitAndWaitTillDone(waitForSideEffect);
   }
 
+  async function openConversationFromHistory(historyEntrySelector: string) {
+    const {frontend} = getBrowserAndPages();
+    await frontend.bringToFront();
+    await frontend.locator('aria/History').click();
+    await frontend.locator(historyEntrySelector).click();
+  }
+
   it('gets data about elements', async () => {
     const result = await runAiAssistance({
       query: 'Change the background color for this element to blue',
@@ -506,6 +513,43 @@ STOP`,
     });
   });
 
+  it('aborts ongoing conversation when previous chat is opened from history', async () => {
+    await runAiAssistance({
+      query: 'Change the background color for this element to blue',
+      messages: [
+        `THOUGHT: I can change the background color of an element by setting the background-color CSS property.
+TITLE: changing the property
+ACTION
+await setElementStyles($0, { 'background-color': 'blue' });
+STOP`,
+        'ANSWER: changed styles',
+      ],
+      node: 'div',
+    });
+
+    const {frontend} = getBrowserAndPages();
+    await frontend.bringToFront();
+    await frontend.locator('aria/New chat').click();
+
+    await sendAiAssistanceMessage({
+      query: 'Change the background color for this element to green',
+      messages: [
+        `THOUGHT: I can change the background color of an element by setting the background-color CSS property.
+TITLE: changing the property
+ACTION
+await setElementStyles($0, { 'background-color': 'green' });
+STOP`,
+      ],
+      node: 'div',
+      waitForSideEffect: true,
+    });
+
+    await openConversationFromHistory('aria/Change the background color for this element to blue, unchecked');
+    await openConversationFromHistory('aria/Change the background color for this element to green, unchecked');
+
+    frontend.waitForSelector('aria/Canceled');
+  });
+
   it('modifies styles to a selector with high specificity', async () => {
     await runAiAssistance({
       query: 'Change the color for this element to rebeccapurple',