Allow external requests to return intermediate steps by using generators

Bug: 425498943
Change-Id: Ib93fba4277b0856dedb6fb815ad4e74d546ca190
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6778206
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Wolfgang Beyer <[email protected]>

Author: wolfib

front_end/entrypoints/main/MainImpl.test.ts

@@ -61,28 +61,28 @@ describeWithMockConnection('MainMenuItem', () => {
   });
 
   describe('handleExternalRequest', () => {
-    const {handleExternalRequest} = Main.MainImpl;
+    const {handleExternalRequestGenerator} = Main.MainImpl;
 
     it('calls into the AiAssistance Panel for LIVE_STYLE_DEBUGGER', async () => {
       const panel = sinon.createStubInstance(AiAssistance.AiAssistancePanel);
       sinon.stub(AiAssistance.AiAssistancePanel, 'instance').callsFake(() => Promise.resolve(panel));
 
-      await handleExternalRequest({kind: 'LIVE_STYLE_DEBUGGER', args: {prompt: 'test', selector: '#test'}});
+      await handleExternalRequestGenerator({kind: 'LIVE_STYLE_DEBUGGER', args: {prompt: 'test', selector: '#test'}});
       sinon.assert.calledWith(
           panel.handleExternalRequest,
           {prompt: 'test', conversationType: AiAssistanceModel.ConversationType.STYLING, selector: '#test'});
     });
 
-    it('throws an error for file assistance requests', async () => {
+    it('returns an error for file assistance requests', async () => {
       const panel = sinon.createStubInstance(AiAssistance.AiAssistancePanel);
       sinon.stub(AiAssistance.AiAssistancePanel, 'instance').callsFake(() => Promise.resolve(panel));
-      try {
-        // @ts-expect-error
-        await handleExternalRequest({kind: 'FILE_DEBUGGER', args: {prompt: 'test'}});
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(err.message, 'Debugging with an agent of type \'FILE_DEBUGGER\' is not implemented yet.');
-      }
+
+      // @ts-expect-error
+      const generator = await handleExternalRequestGenerator({kind: 'FILE_DEBUGGER', args: {prompt: 'test'}});
+      const iteratorResponse = await generator.next();
+      assert.strictEqual(iteratorResponse.value.type, 'error');
+      assert.strictEqual(
+          iteratorResponse.value.message, 'Debugging with an agent of type \'FILE_DEBUGGER\' is not implemented yet.');
     });
   });
 });

front_end/entrypoints/main/MainImpl.ts

@@ -41,6 +41,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as AutofillManager from '../../models/autofill_manager/autofill_manager.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
@@ -1043,22 +1044,44 @@ type ExternalRequestInput = {
   args: {requestUrl: string, prompt: string},
 };
 
-interface ExternalRequestResponse {
-  response: string;
-  devToolsLogs: object[];
+// For backwards-compatibility we iterate over the generator and drop the
+// intermediate results. The final response is transformed to its legacy type.
+// Instead of sending responses of type error, errors are throws.
+export async function handleExternalRequest(input: ExternalRequestInput):
+    Promise<{response: string, devToolsLogs: object[]}> {
+  const generator = await handleExternalRequestGenerator(input);
+  let result: IteratorResult<AiAssistanceModel.ExternalRequestResponse, AiAssistanceModel.ExternalRequestResponse>;
+  do {
+    result = await generator.next();
+  } while (!result.done);
+  const response = result.value;
+  if (response.type === AiAssistanceModel.ExternalRequestResponseType.ERROR) {
+    throw new Error(response.message);
+  }
+  if (response.type === AiAssistanceModel.ExternalRequestResponseType.ANSWER) {
+    return {
+      response: response.message,
+      devToolsLogs: response.devToolsLogs,
+    };
+  }
+  throw new Error('Received no response of type answer or type error');
 }
 
-export async function handleExternalRequest(input: ExternalRequestInput): Promise<ExternalRequestResponse> {
+// @ts-expect-error
+globalThis.handleExternalRequest = handleExternalRequest;
+
+export async function handleExternalRequestGenerator(input: ExternalRequestInput):
+    Promise<AsyncGenerator<AiAssistanceModel.ExternalRequestResponse, AiAssistanceModel.ExternalRequestResponse>> {
   switch (input.kind) {
     case 'PERFORMANCE_RELOAD_GATHER_INSIGHTS': {
       const TimelinePanel = await import('../../panels/timeline/timeline.js');
-      return await TimelinePanel.TimelinePanel.TimelinePanel.handleExternalRecordRequest();
+      return TimelinePanel.TimelinePanel.TimelinePanel.handleExternalRecordRequest();
     }
     case 'PERFORMANCE_ANALYZE_INSIGHT': {
       const AiAssistance = await import('../../panels/ai_assistance/ai_assistance.js');
       const AiAssistanceModel = await import('../../models/ai_assistance/ai_assistance.js');
       const panelInstance = await AiAssistance.AiAssistancePanel.instance();
-      return await panelInstance.handleExternalRequest({
+      return panelInstance.handleExternalRequest({
         conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT,
         prompt: input.args.prompt,
         insightTitle: input.args.insightTitle,
@@ -1068,7 +1091,7 @@ export async function handleExternalRequest(input: ExternalRequestInput): Promis
       const AiAssistance = await import('../../panels/ai_assistance/ai_assistance.js');
       const AiAssistanceModel = await import('../../models/ai_assistance/ai_assistance.js');
       const panelInstance = await AiAssistance.AiAssistancePanel.instance();
-      return await panelInstance.handleExternalRequest({
+      return panelInstance.handleExternalRequest({
         conversationType: AiAssistanceModel.ConversationType.NETWORK,
         prompt: input.args.prompt,
         requestUrl: input.args.requestUrl,
@@ -1078,16 +1101,23 @@ export async function handleExternalRequest(input: ExternalRequestInput): Promis
       const AiAssistance = await import('../../panels/ai_assistance/ai_assistance.js');
       const AiAssistanceModel = await import('../../models/ai_assistance/ai_assistance.js');
       const panelInstance = await AiAssistance.AiAssistancePanel.instance();
-      return await panelInstance.handleExternalRequest({
+      return panelInstance.handleExternalRequest({
         conversationType: AiAssistanceModel.ConversationType.STYLING,
         prompt: input.args.prompt,
         selector: input.args.selector,
       });
     }
   }
-  // @ts-expect-error
-  throw new Error(`Debugging with an agent of type '${input.kind}' is not implemented yet.`);
+  // eslint-disable-next-line require-yield
+  return (async function*
+          (): AsyncGenerator<AiAssistanceModel.ExternalRequestResponse, AiAssistanceModel.ExternalRequestResponse> {
+            return {
+              type: AiAssistanceModel.ExternalRequestResponseType.ERROR,
+              // @ts-expect-error
+              message: `Debugging with an agent of type '${input.kind}' is not implemented yet.`,
+            };
+          })();
 }
 
 // @ts-expect-error
-globalThis.handleExternalRequest = handleExternalRequest;
+globalThis.handleExternalRequestGenerator = handleExternalRequestGenerator;

front_end/models/ai_assistance/agents/AiAgent.ts

@@ -145,6 +145,30 @@ export interface ConversationSuggestion {
   jslogContext?: string;
 }
 
+export const enum ExternalRequestResponseType {
+  ANSWER = 'answer',
+  NOTIFICATION = 'notification',
+  ERROR = 'error',
+}
+
+export interface ExternalRequestAnswer {
+  type: ExternalRequestResponseType.ANSWER;
+  message: string;
+  devToolsLogs: object[];
+}
+
+export interface ExternalRequestNotification {
+  type: ExternalRequestResponseType.NOTIFICATION;
+  message: string;
+}
+
+export interface ExternalRequestError {
+  type: ExternalRequestResponseType.ERROR;
+  message: string;
+}
+
+export type ExternalRequestResponse = ExternalRequestAnswer|ExternalRequestNotification|ExternalRequestError;
+
 export abstract class ConversationContext<T> {
   abstract getOrigin(): string;
   abstract getItem(): T;

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -1604,44 +1604,36 @@ describeWithMockConnection('AI Assistance Panel', () => {
     });
 
     describe('can be blocked', () => {
-      beforeEach(() => {
-        // These tests log the error to the console.
-        // we don't need that noise in the test output.
-        sinon.stub(console, 'error');
-      });
-
       it('by a setting', async () => {
         Common.Settings.moduleSetting('ai-assistance-enabled').set(false);
         const {panel} = await createAiAssistancePanel({
           aidaClient: mockAidaClient([[{explanation}]]),
         });
-        try {
-          await panel.handleExternalRequest({
-            prompt: 'Please help me debug this problem',
-            conversationType: AiAssistanceModel.ConversationType.STYLING
-          });
-          assert.fail('Expected `handleExternalRequest` to throw');
-        } catch (err) {
-          assert.strictEqual(
-              err.message, 'For AI features to be available, you need to enable AI assistance in DevTools settings.');
-        }
+        const generator = await panel.handleExternalRequest({
+          prompt: 'Please help me debug this problem',
+          conversationType: AiAssistanceModel.ConversationType.STYLING
+        });
+        const response = await generator.next();
+        assert.strictEqual(response.value.type, 'error');
+        assert.strictEqual(
+            response.value.message,
+            'For AI features to be available, you need to enable AI assistance in DevTools settings.');
       });
 
       it('by feature availability', async () => {
         const {panel} = await createAiAssistancePanel({
           aidaClient: mockAidaClient([[{explanation}]]),
           aidaAvailability: Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED,
         });
-        try {
-          await panel.handleExternalRequest({
-            prompt: 'Please help me debug this problem',
-            conversationType: AiAssistanceModel.ConversationType.STYLING
-          });
-          assert.fail('Expected `handleExternalRequest` to throw');
-        } catch (err) {
-          assert.strictEqual(
-              err.message, 'This feature is only available when you sign into Chrome with your Google account.');
-        }
+        const generator = await panel.handleExternalRequest({
+          prompt: 'Please help me debug this problem',
+          conversationType: AiAssistanceModel.ConversationType.STYLING
+        });
+        const response = await generator.next();
+        assert.strictEqual(response.value.type, 'error');
+        assert.strictEqual(
+            response.value.message,
+            'This feature is only available when you sign into Chrome with your Google account.');
       });
 
       it('by user age', async () => {
@@ -1656,15 +1648,14 @@ describeWithMockConnection('AI Assistance Panel', () => {
         const {panel} = await createAiAssistancePanel({
           aidaClient: mockAidaClient([[{explanation}]]),
         });
-        try {
-          await panel.handleExternalRequest({
-            prompt: 'Please help me debug this problem',
-            conversationType: AiAssistanceModel.ConversationType.STYLING
-          });
-          assert.fail('Expected `handleExternalRequest` to throw');
-        } catch (err) {
-          assert.strictEqual(err.message, 'This feature is only available to users who are 18 years of age or older.');
-        }
+        const generator = await panel.handleExternalRequest({
+          prompt: 'Please help me debug this problem',
+          conversationType: AiAssistanceModel.ConversationType.STYLING
+        });
+        const response = await generator.next();
+        assert.strictEqual(response.value.type, 'error');
+        assert.strictEqual(
+            response.value.message, 'This feature is only available to users who are 18 years of age or older.');
       });
     });
 
@@ -1673,27 +1664,29 @@ describeWithMockConnection('AI Assistance Panel', () => {
         aidaClient: mockAidaClient([[{explanation}]]),
       });
       const snackbarShowStub = sinon.stub(Snackbars.Snackbar.Snackbar, 'show');
-      const response = await panel.handleExternalRequest(
+      const generator = await panel.handleExternalRequest(
           {prompt: 'Please help me debug this problem', conversationType: AiAssistanceModel.ConversationType.STYLING});
-      assert.strictEqual(response.response, explanation);
+      const response = await generator.next();
+      assert.strictEqual(response.value.message, explanation);
       sinon.assert.calledOnceWithExactly(snackbarShowStub, {message: 'DevTools received an external request'});
     });
 
     it('handles styling assistance requests which contain a selector', async () => {
       const {panel} = await createAiAssistancePanel({
         aidaClient: mockAidaClient([[{explanation}]]),
       });
-      const response = await panel.handleExternalRequest({
+      const generator = await panel.handleExternalRequest({
         prompt: 'Please help me debug this problem',
         conversationType: AiAssistanceModel.ConversationType.STYLING,
         selector: 'h1'
       });
-      assert.strictEqual(response.response, explanation);
+      const response = await generator.next();
+      assert.strictEqual(response.value.message, explanation);
       sinon.assert.calledOnce(performSearchStub);
       assert.strictEqual(performSearchStub.getCall(0).args[0].query, 'h1');
     });
 
-    it('throws an error if no answer could be generated', async () => {
+    it('returns an error if no answer could be generated', async () => {
       const {panel} = await createAiAssistancePanel({
         aidaClient: mockAidaClient([
           [{
@@ -1703,23 +1696,20 @@ STOP`,
           }],
         ])
       });
-      try {
-        await panel.handleExternalRequest({
-          prompt: 'Please help me debug this problem',
-          conversationType: AiAssistanceModel.ConversationType.STYLING
-        });
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(err.message, 'Something went wrong. No answer was generated.');
-      }
+      const generator = await panel.handleExternalRequest(
+          {prompt: 'Please help me debug this problem', conversationType: AiAssistanceModel.ConversationType.STYLING});
+      const response = await generator.next();
+      assert.strictEqual(response.value.type, 'error');
+      assert.strictEqual(response.value.message, 'Something went wrong. No answer was generated.');
     });
 
     it('persists external conversations to history', async () => {
       const {panel, view} = await createAiAssistancePanel({
         aidaClient: mockAidaClient([[{explanation}]]),
       });
-      await panel.handleExternalRequest(
+      const generator = await panel.handleExternalRequest(
           {prompt: 'Please help me debug this problem', conversationType: AiAssistanceModel.ConversationType.STYLING});
+      await generator.next();
       const {contextMenu, id} = openHistoryContextMenu(view.input, '[External] Please help me debug this problem');
       assert.isDefined(id);
       contextMenu.invokeHandler(id);
@@ -1799,9 +1789,10 @@ STOP`,
         },
       ]);
 
-      const response = await panel.handleExternalRequest(
+      const generator = await panel.handleExternalRequest(
           {prompt: 'Please help me debug this problem', conversationType: AiAssistanceModel.ConversationType.STYLING});
-      assert.strictEqual(response.response, 'test2');
+      const response = await generator.next();
+      assert.strictEqual(response.value.message, 'test2');
 
       view.input.onTextSubmit('Follow-up question to DrJones?');
       assert.deepEqual((await view.nextInput).messages, [
@@ -1846,12 +1837,15 @@ STOP`,
       });
       sinon.stub(SDK.TargetManager.TargetManager.instance(), 'models').returns([networkManager]);
 
-      const response = await panel.handleExternalRequest({
+      const generator = await panel.handleExternalRequest({
         prompt: 'Please help me debug this problem',
         conversationType: AiAssistanceModel.ConversationType.NETWORK,
         requestUrl: 'https://localhost:8080/'
       });
-      assert.strictEqual(response.response, explanation);
+      let response = await generator.next();
+      assert.strictEqual(response.value.message, 'Analyzing network data');
+      response = await generator.next();
+      assert.strictEqual(response.value.message, explanation);
       sinon.assert.calledOnceWithExactly(snackbarShowStub, {message: 'DevTools received an external request'});
     });
 
@@ -1866,32 +1860,31 @@ STOP`,
       await traceModel.parse(events);
       Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, isNode: false, traceModel});
 
-      const response = await panel.handleExternalRequest({
+      const generator = await panel.handleExternalRequest({
         prompt: 'Please help me debug this problem',
         conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT,
         insightTitle: 'LCP breakdown'
       });
-      assert.strictEqual(response.response, explanation);
+      let response = await generator.next();
+      assert.strictEqual(response.value.message, 'Analyzing insight: LCP breakdown');
+      response = await generator.next();
+      assert.strictEqual(response.value.message, explanation);
     });
 
     it('errors for performance insight requests with no insightTitle', async () => {
-      // Suppress console noise in test output
-      sinon.stub(console, 'error');
-
       const {panel} = await createAiAssistancePanel({
         aidaClient: mockAidaClient([[{explanation}]]),
       });
-      try {
-        await panel.handleExternalRequest(
-            // @ts-expect-error
-            {
-              prompt: 'Please help me debug this problem',
-              conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT
-            });
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(err.message, 'The insightTitle parameter is required for debugging a Performance Insight.');
-      }
+      const generator = await panel.handleExternalRequest(
+          // @ts-expect-error
+          {
+            prompt: 'Please help me debug this problem',
+            conversationType: AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT
+          });
+      const response = await generator.next();
+      assert.strictEqual(response.value.type, 'error');
+      assert.strictEqual(
+          response.value.message, 'The insightTitle parameter is required for debugging a Performance Insight.');
     });
   });
 });