chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/freestyler/AiAgent.ts

@@ -4,7 +4,8 @@
 
 import * as Host from '../../core/host/host.js';
 
-export enum ResponseType {
+export const enum ResponseType {
+  CONTEXT = 'context',
   TITLE = 'title',
   THOUGHT = 'thought',
   ACTION = 'action',
@@ -12,6 +13,7 @@ export enum ResponseType {
   ANSWER = 'answer',
   ERROR = 'error',
   QUERYING = 'querying',
+  USER_QUERY = 'user-query',
 }
 
 export const enum ErrorType {
@@ -24,7 +26,7 @@ export interface AnswerResponse {
   type: ResponseType.ANSWER;
   text: string;
   rpcId?: number;
-  suggestions?: string[];
+  suggestions?: [string, ...string[]];
 }
 
 export interface ErrorResponse {
@@ -33,6 +35,17 @@ export interface ErrorResponse {
   rpcId?: number;
 }
 
+export interface ContextDetail {
+  title: string;
+  text: string;
+  codeLang?: string;
+}
+export interface ContextResponse {
+  type: ResponseType.CONTEXT;
+  title: string;
+  details: [ContextDetail, ...ContextDetail[]];
+}
+
 export interface TitleResponse {
   type: ResponseType.TITLE;
   title: string;
@@ -41,8 +54,7 @@ export interface TitleResponse {
 
 export interface ThoughtResponse {
   type: ResponseType.THOUGHT;
-  thought?: string;
-  contextDetails?: [ContextDetail, ...ContextDetail[]];
+  thought: string;
   rpcId?: number;
 }
 
@@ -63,17 +75,17 @@ export interface ActionResponse {
 
 export interface QueryResponse {
   type: ResponseType.QUERYING;
+  query: string;
 }
 
-export type ResponseData =
-    AnswerResponse|ErrorResponse|ActionResponse|SideEffectResponse|ThoughtResponse|TitleResponse|QueryResponse;
-
-export interface ContextDetail {
-  title: string;
-  text: string;
-  codeLang?: string;
+export interface UserQuery {
+  type: ResponseType.USER_QUERY;
+  query: string;
 }
 
+export type ResponseData = AnswerResponse|ErrorResponse|ActionResponse|SideEffectResponse|ThoughtResponse|TitleResponse|
+    QueryResponse|ContextResponse|UserQuery;
+
 export interface AidaBuildRequestOptions {
   input: string;
 }
@@ -85,16 +97,42 @@ export interface HistoryChunk {
 
 export interface AidaRequestOptions {
   temperature?: number;
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  model_id?: string;
+  modelId?: string;
+}
+
+interface AgentOptions {
+  aidaClient: Host.AidaClient.AidaClient;
+  serverSideLoggingEnabled?: boolean;
+}
+
+interface ParsedResponseAnswer {
+  answer: string;
+  suggestions?: [string, ...string[]];
+}
+
+interface ParsedResponseStep {
+  thought?: string;
+  title?: string;
+  action?: string;
+}
+
+export type ParsedResponse = ParsedResponseAnswer|ParsedResponseStep;
+
+export const enum AgentType {
+  FREESTYLER = 'freestyler',
+  DRJONES_FILE = 'drjones-file',
+  DRJONES_NETWORK_REQUEST = 'drjones-network-request',
+  DRJONES_PERFORMANCE = 'drjones-performance',
 }
 
-type AgentOptions = {
-  aidaClient: Host.AidaClient.AidaClient,
-  serverSideLoggingEnabled?: boolean,
-};
+const MAX_STEP = 10;
 
-export abstract class AiAgent {
+export abstract class AiAgent<T> {
+  static validTemperature(temperature: number|undefined): number|undefined {
+    return typeof temperature === 'number' && temperature >= 0 ? temperature : undefined;
+  }
+
+  abstract type: AgentType;
   readonly #sessionId: string = crypto.randomUUID();
   #aidaClient: Host.AidaClient.AidaClient;
   #serverSideLoggingEnabled: boolean;
@@ -102,56 +140,39 @@ export abstract class AiAgent {
   abstract readonly options: AidaRequestOptions;
   abstract readonly clientFeature: Host.AidaClient.ClientFeature;
   abstract readonly userTier: string|undefined;
+  abstract handleContextDetails(select: T|null): AsyncGenerator<ContextResponse, void, void>;
 
   /**
    * Mapping between the unique request id and
    * the history chuck it created
    */
-  #chatHistory: Map<number, HistoryChunk[]> = new Map();
+  #history = new Map<number, ResponseData[]>();
 
   constructor(opts: AgentOptions) {
     this.#aidaClient = opts.aidaClient;
     this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
   }
 
-  get historyEntry(): Array<HistoryChunk> {
-    return [...this.#chatHistory.values()].flat();
-  }
-
   get chatHistoryForTesting(): Array<HistoryChunk> {
-    return this.historyEntry;
+    return this.#historyEntry;
   }
 
-  set chatHistoryForTesting(history: Map<number, HistoryChunk[]>) {
-    this.#chatHistory = history;
+  set chatNewHistoryForTesting(history: Map<number, ResponseData[]>) {
+    this.#history = history;
   }
 
-  removeHistoryRun(id: number): void {
-    this.#chatHistory.delete(id);
+  get isEmpty(): boolean {
+    return this.#history.size <= 0;
   }
 
-  addToHistory({
-    id,
-    query,
-    output,
-  }: {
-    id: number,
-    query: string,
-    output: string,
-  }): void {
-    const currentRunEntries = this.#chatHistory.get(id) ?? [];
-
-    this.#chatHistory.set(id, [
-      ...currentRunEntries,
-      {
-        text: query,
-        entity: Host.AidaClient.Entity.USER,
-      },
-      {
-        text: output,
-        entity: Host.AidaClient.Entity.SYSTEM,
-      },
-    ]);
+  get title(): string|undefined {
+    return [...this.#history.values()]
+        .flat()
+        .filter(response => {
+          return response.type === ResponseType.USER_QUERY;
+        })
+        .at(0)
+        ?.query;
   }
 
   #structuredLog: Array<{
@@ -164,7 +185,7 @@ export abstract class AiAgent {
       options?: {signal?: AbortSignal},
       ): Promise<{
     response: string,
-    rpcId: number|undefined,
+    rpcId?: number,
   }> {
     const request = this.buildRequest({
       input,
@@ -172,7 +193,7 @@ export abstract class AiAgent {
 
     let rawResponse: Host.AidaClient.AidaResponse|undefined = undefined;
     let response = '';
-    let rpcId;
+    let rpcId: number|undefined;
     for await (rawResponse of this.#aidaClient.fetch(request, options)) {
       response = rawResponse.explanation;
       rpcId = rawResponse.metadata.rpcGlobalId ?? rpcId;
@@ -202,9 +223,13 @@ export abstract class AiAgent {
       input: opts.input,
       preamble: this.preamble,
       // eslint-disable-next-line @typescript-eslint/naming-convention
-      chat_history: this.#chatHistory.size ? this.historyEntry : undefined,
+      chat_history: this.#history.size ? this.#historyEntry : undefined,
       client: Host.AidaClient.CLIENT_NAME,
-      options: this.options,
+      options: {
+        temperature: AiAgent.validTemperature(this.options.temperature),
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        model_id: this.options.modelId,
+      },
       metadata: {
         disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
         string_session_id: this.#sessionId,
@@ -218,8 +243,268 @@ export abstract class AiAgent {
     return request;
   }
 
-  static validTemperature(temperature: number|undefined): number|undefined {
-    return typeof temperature === 'number' && temperature >= 0 ? temperature : undefined;
+  handleAction(action: string, rpcId?: number): AsyncGenerator<SideEffectResponse, ActionResponse, void>;
+  handleAction(): never {
+    throw new Error('Unexpected action found');
+  }
+
+  async enhanceQuery(query: string, selected: T|null): Promise<string>;
+  async enhanceQuery(query: string): Promise<string> {
+    return query;
+  }
+
+  parseResponse(response: string): ParsedResponse {
+    return {
+      answer: response,
+    };
+  }
+
+  formatHistoryChunkAnswer(text: string): string {
+    return text;
+  }
+
+  formatHistoryChunkObservation(observation: {
+    title?: string,
+    thought?: string,
+    action?: string,
+  }): string {
+    let text = '';
+    if (observation.thought) {
+      text = `THOUGHT: ${observation.thought}`;
+    }
+    if (observation.title) {
+      text += `\nTITLE: ${observation.title}`;
+    }
+    if (observation.action) {
+      text += `\nACTION
+${observation.action}
+STOP`;
+    }
+
+    return text;
+  }
+
+  get #historyEntry(): HistoryChunk[] {
+    const historyAll = new Map<number, HistoryChunk[]>();
+    for (const [id, entry] of this.#history.entries()) {
+      const history: HistoryChunk[] = [];
+      historyAll.set(id, history);
+      let response: {
+        title?: string,
+        thought?: string,
+        action?: string,
+      } = {};
+      for (const data of entry) {
+        switch (data.type) {
+          case ResponseType.CONTEXT:
+          case ResponseType.SIDE_EFFECT:
+          case ResponseType.USER_QUERY:
+            continue;
+          case ResponseType.QUERYING: {
+            const observation = this.formatHistoryChunkObservation(response);
+            if (observation) {
+              history.push({
+                entity: Host.AidaClient.Entity.SYSTEM,
+                text: observation,
+              });
+              response = {};
+            }
+
+            history.push({
+              entity: Host.AidaClient.Entity.USER,
+              text: data.query,
+            });
+            break;
+          }
+          case ResponseType.ANSWER:
+            history.push({
+              entity: Host.AidaClient.Entity.SYSTEM,
+              text: this.formatHistoryChunkAnswer(data.text),
+            });
+            break;
+          case ResponseType.TITLE:
+            response.title = data.title;
+            break;
+          case ResponseType.THOUGHT:
+            response.thought = data.thought;
+            break;
+          case ResponseType.ACTION:
+            response.action = data.code;
+            break;
+          case ResponseType.ERROR:
+            historyAll.delete(id);
+            break;
+        }
+      }
+      const observation = this.formatHistoryChunkObservation(response);
+      if (observation) {
+        history.push({
+          entity: Host.AidaClient.Entity.USER,
+          text: observation,
+        });
+      }
+    }
+
+    return [...historyAll.values()].flat();
+  }
+
+  #addHistory(id: number, data: ResponseData): void {
+    const currentRunEntries = this.#history.get(id);
+    if (currentRunEntries) {
+      currentRunEntries.push(data);
+      return;
+    }
+    this.#history.set(id, [data]);
+  }
+
+  #runId = 0;
+  async * run(query: string, options: {
+    signal?: AbortSignal, selected: T|null,
+  }): AsyncGenerator<ResponseData, void, void> {
+    const id = this.#runId++;
+
+    const response = {
+      type: ResponseType.USER_QUERY,
+      query,
+    } as const;
+    this.#addHistory(id, response);
+    yield response;
+
+    for await (const response of this.handleContextDetails(options.selected)) {
+      this.#addHistory(id, response);
+      yield response;
+    }
+
+    query = await this.enhanceQuery(query, options.selected);
+
+    for (let i = 0; i < MAX_STEP; i++) {
+      const queryResponse = {
+        type: ResponseType.QUERYING,
+        query,
+      } as const;
+      this.#addHistory(id, queryResponse);
+      yield queryResponse;
+      let response: string;
+      let rpcId: number|undefined;
+      try {
+        const fetchResult = await this.aidaFetch(
+            query,
+            {signal: options.signal},
+        );
+        response = fetchResult.response;
+        rpcId = fetchResult.rpcId;
+      } catch (err) {
+        debugLog('Error calling the AIDA API', err);
+
+        if (err instanceof Host.AidaClient.AidaAbortError) {
+          const response = {
+            type: ResponseType.ERROR,
+            error: ErrorType.ABORT,
+            rpcId,
+          } as const;
+          this.#addHistory(id, response);
+          yield response;
+          break;
+        }
+
+        const response = {
+          type: ResponseType.ERROR,
+          error: ErrorType.UNKNOWN,
+          rpcId,
+        } as const;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceError);
+        this.#addHistory(id, response);
+        yield response;
+
+        break;
+      }
+
+      const parsedResponse = this.parseResponse(response);
+
+      if ('answer' in parsedResponse) {
+        const {
+          answer,
+          suggestions,
+        } = parsedResponse;
+        if (answer) {
+          const response = {
+            type: ResponseType.ANSWER,
+            text: answer,
+            rpcId,
+            suggestions,
+          } as const;
+          Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceAnswerReceived);
+          this.#addHistory(id, response);
+          yield response;
+        } else {
+          const response = {
+            type: ResponseType.ERROR,
+            error: ErrorType.UNKNOWN,
+            rpcId,
+          } as const;
+          Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceError);
+          this.#addHistory(id, response);
+          yield response;
+        }
+
+        break;
+      }
+
+      const {
+        title,
+        thought,
+        action,
+      } = parsedResponse;
+
+      if (title) {
+        const response = {
+          type: ResponseType.TITLE,
+          title,
+          rpcId,
+        } as const;
+        this.#addHistory(id, response);
+        yield response;
+      }
+
+      if (thought) {
+        const response = {
+          type: ResponseType.THOUGHT,
+          thought,
+          rpcId,
+        } as const;
+        this.#addHistory(id, response);
+        yield response;
+      }
+
+      if (action) {
+        const result = yield* this.handleAction(action, rpcId);
+        this.#addHistory(id, result);
+        yield result;
+        query = `OBSERVATION: ${result.output}`;
+      }
+
+      if (i === MAX_STEP - 1) {
+        const response = {
+          type: ResponseType.ERROR,
+          error: ErrorType.MAX_STEPS,
+        } as const;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceError);
+        this.#addHistory(id, response);
+        yield response;
+        break;
+      }
+    }
+    if (isDebugMode()) {
+      window.dispatchEvent(new CustomEvent('freestylerdone'));
+    }
+  }
+
+  async * runFromHistory(): AsyncGenerator<ResponseData, void, void> {
+    for (const historyChunk of this.#history.values()) {
+      for (const entry of historyChunk) {
+        yield entry;
+      }
+    }
   }
 }
 

package/front_end/panels/freestyler/DrJonesFileAgent.test.ts

@@ -3,24 +3,25 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
+import type * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import {
   createTarget,
-  describeWithEnvironment,
   getGetHostConfigStub,
 } from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {loadBasicSourceMapExample} from '../../testing/SourceMapHelpers.js';
 import {createContentProviderUISourceCodes} from '../../testing/UISourceCodeHelpers.js';
 
-import {DrJonesFileAgent, ResponseType} from './freestyler.js';
+import {DrJonesFileAgent, formatSourceMapDetails, ResponseType} from './freestyler.js';
 
-describeWithEnvironment('DrJonesFileAgent', () => {
+describeWithMockConnection('DrJonesFileAgent', () => {
   function mockHostConfig(modelId?: string, temperature?: number) {
     getGetHostConfigStub({
-      devToolsAiAssistanceFileAgentDogfood: {
+      devToolsAiAssistanceFileAgent: {
         modelId,
         temperature,
       },
@@ -36,6 +37,18 @@ describeWithEnvironment('DrJonesFileAgent', () => {
     };
   }
 
+  beforeEach(() => {
+    const workspace = Workspace.Workspace.WorkspaceImpl.instance();
+    const targetManager = SDK.TargetManager.TargetManager.instance();
+    const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
+    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
+      forceNew: true,
+      resourceMapping,
+      targetManager,
+    });
+    Bindings.IgnoreListManager.IgnoreListManager.instance({forceNew: true, debuggerWorkspaceBinding});
+  });
+
   describe('buildRequest', () => {
     beforeEach(() => {
       sinon.restore();
@@ -71,23 +84,21 @@ describeWithEnvironment('DrJonesFileAgent', () => {
         serverSideLoggingEnabled: true,
       });
       sinon.stub(agent, 'preamble').value('preamble');
-      agent.chatHistoryForTesting = new Map([[
-        0,
+      agent.chatNewHistoryForTesting = new Map([
         [
-          {
-            text: 'first',
-            entity: Host.AidaClient.Entity.UNKNOWN,
-          },
-          {
-            text: 'second',
-            entity: Host.AidaClient.Entity.SYSTEM,
-          },
-          {
-            text: 'third',
-            entity: Host.AidaClient.Entity.USER,
-          },
+          0,
+          [
+            {
+              type: ResponseType.QUERYING,
+              query: 'question',
+            },
+            {
+              type: ResponseType.ANSWER,
+              text: 'answer',
+            },
+          ],
         ],
-      ]]);
+      ]);
       assert.deepStrictEqual(
           agent.buildRequest({
             input: 'test input',
@@ -98,16 +109,12 @@ describeWithEnvironment('DrJonesFileAgent', () => {
             preamble: 'preamble',
             chat_history: [
               {
-                entity: 0,
-                text: 'first',
+                entity: 1,
+                text: 'question',
               },
               {
                 entity: 2,
-                text: 'second',
-              },
-              {
-                entity: 1,
-                text: 'third',
+                text: 'answer',
               },
             ],
             metadata: {
@@ -125,7 +132,8 @@ describeWithEnvironment('DrJonesFileAgent', () => {
       );
     });
   });
-  describeWithMockConnection('run', () => {
+
+  describe('run', () => {
     it('generates an answer', async () => {
       async function* generateAnswer() {
         yield {
@@ -142,8 +150,6 @@ describeWithEnvironment('DrJonesFileAgent', () => {
       });
 
       const url = 'http://example.com/script.js' as Platform.DevToolsPath.UrlString;
-      const target = createTarget({type: SDK.Target.Type.TAB});
-
       const {project} = createContentProviderUISourceCodes({
         items: [
           {
@@ -152,34 +158,39 @@ describeWithEnvironment('DrJonesFileAgent', () => {
             resourceType: Common.ResourceType.resourceTypes.Script,
           },
         ],
-        projectType: Workspace.Workspace.projectTypes.Network,
-        target,
+        target: createTarget(),
       });
 
       const uiSourceCode = project.uiSourceCodeForURL(url);
-      const responses = await Array.fromAsync(agent.run('test', {selectedFile: uiSourceCode}));
+      const responses = await Array.fromAsync(agent.run('test', {selected: uiSourceCode}));
 
       assert.deepStrictEqual(responses, [
         {
-          type: ResponseType.TITLE,
-          title: 'Analyzing file',
+          type: ResponseType.USER_QUERY,
+          query: 'test',
         },
         {
-          type: ResponseType.THOUGHT,
-          thought: 'Data used to generate this response',
-          contextDetails: [
+          type: ResponseType.CONTEXT,
+          title: 'Analyzing file',
+          details: [
             {
               title: 'Selected file',
               text: `File Name: script.js
-URL: http://example.com/script.js
-File Content:
-`,
+URL: http://example.com/script.js\n
+File Content:\n\`\`\`
+\`\`\``,
             },
           ],
         },
+        {
+          type: ResponseType.QUERYING,
+          query:
+              '# Selected file\nFile Name: script.js\nURL: http://example.com/script.js\n\nFile Content:\n\`\`\`\n\`\`\`\n\n# User request\n\ntest',
+        },
         {
           type: ResponseType.ANSWER,
           text: 'This is the answer',
+          suggestions: undefined,
           rpcId: 123,
         },
       ]);
@@ -188,8 +199,8 @@ File Content:
         {
           entity: 1,
           text: `# Selected file\nFile Name: script.js
-URL: http://example.com/script.js
-File Content:\n\n\n# User request\n\ntest`,
+URL: http://example.com/script.js\n
+File Content:\n\`\`\`\n\`\`\`\n\n# User request\n\ntest`,
         },
         {
           entity: 2,
@@ -198,4 +209,20 @@ File Content:\n\n\n# User request\n\ntest`,
       ]);
     });
   });
+
+  describe('formatSourceMapDetails', () => {
+    it('returns source map', async () => {
+      const target = createTarget();
+      const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+      const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+      assert.exists(debuggerModel);
+
+      const script = (await loadBasicSourceMapExample(target)).script;
+      const uiSourceCode = debuggerWorkspaceBinding.uiSourceCodeForScript(script);
+      assert.exists(uiSourceCode);
+
+      const response = formatSourceMapDetails(uiSourceCode, debuggerWorkspaceBinding);
+      assert.strictEqual(response, 'Source map: file://gen.js.map');
+    });
+  });
 });