[AI Assistance] Implement file editing

Bug: 393268664
Change-Id: I2461ecdecef9461c8cc9e3f611403af813566c76
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6278506
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: OrKoN

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -38,7 +38,7 @@ import {
   NetworkAgent,
   RequestContext,
 } from './agents/NetworkAgent.js';
-import {PatchAgent, ProjectContext} from './agents/PatchAgent.js';
+import {PatchAgent} from './agents/PatchAgent.js';
 import {CallTreeContext, PerformanceAgent} from './agents/PerformanceAgent.js';
 import {InsightContext, PerformanceInsightsAgent} from './agents/PerformanceInsightsAgent.js';
 import {NodeContext, StylingAgent, StylingAgentWithFunctionCalling} from './agents/StylingAgent.js';
@@ -664,6 +664,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           multimodalInputEnabled:
               isAiAssistanceMultimodalInputEnabled() && this.#currentAgent?.type === AgentType.STYLING,
           imageInput: this.#imageInput,
+          projectName: this.#project?.displayName() ?? '',
           onTextSubmit: async (text: string, imageInput?: Host.AidaClient.Part) => {
             this.#imageInput = '';
             Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
@@ -977,32 +978,23 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   async #onApplyToWorkspace(): Promise<void> {
+    const changeSummary = this.#getChangeSummary();
+    if (!changeSummary) {
+      throw new Error('Change summary does not exist');
+    }
     if (!this.#project) {
       throw new Error('Project does not exist');
     }
     const agent = new PatchAgent({
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
+      project: this.#project,
     });
     this.#patchSuggestionLoading = true;
     this.requestUpdate();
-    const prompt =
-        `I have applied the following CSS changes to my page in Chrome DevTools, what are the files in my source code that I need to change to apply the same change?
-
-\`\`\`css
-${this.#getChangeSummary()}
-\`\`\`
-
-Try searching using the selectors and if nothing matches, try to find a semantically appropriate place to change.
-Output one filename per line and nothing else!
-`;
-
-    let response;
-    for await (response of agent.run(prompt, {
-      selected: new ProjectContext(this.#project),
-    })) {
-    }
-    this.#patchSuggestion = response?.type === ResponseType.ANSWER ? response.text : 'Could not find files';
+    const responses = await Array.fromAsync(agent.applyChanges(changeSummary));
+    const response = responses.at(-1);
+    this.#patchSuggestion = response?.type === ResponseType.ANSWER ? response.text : 'Could not update files';
     this.#patchSuggestionLoading = false;
     this.requestUpdate();
   }

front_end/panels/ai_assistance/agents/PatchAgent.test.ts

@@ -6,23 +6,36 @@ import * as Platform from '../../../core/platform/platform.js';
 import {mockAidaClient, type MockAidaResponse} from '../../../testing/AiAssistanceHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {createFileSystemUISourceCode} from '../../../testing/UISourceCodeHelpers.js';
-import {type ActionResponse, PatchAgent, ProjectContext, type ResponseData, ResponseType} from '../ai_assistance.js';
+import {type ActionResponse, FileUpdateAgent, PatchAgent, type ResponseData, ResponseType} from '../ai_assistance.js';
 
+/**
+ * TODO: the following tests have to be added:
+ *
+ * - listFiles should have restricted view on files (node_modules etc).
+ * - searchInFiles should work with dirty UiSourceCodes.
+ * - updateFiles should verify better that working copies are updated.
+ */
 describeWithEnvironment('PatchAgent', () => {
-  async function testAgent(mock: Array<[MockAidaResponse, ...MockAidaResponse[]]>): Promise<ResponseData[]> {
+  async function testAgent(
+      mock: Array<[MockAidaResponse, ...MockAidaResponse[]]>,
+      fileAgentMock?: Array<[MockAidaResponse, ...MockAidaResponse[]]>): Promise<ResponseData[]> {
     const {project, uiSourceCode} = createFileSystemUISourceCode({
       url: Platform.DevToolsPath.urlString`file:///path/to/overrides/example.html`,
       mimeType: 'text/html',
       content: 'content',
     });
 
-    uiSourceCode.setWorkingCopyGetter(() => 'content working copy');
+    uiSourceCode.setWorkingCopy('content working copy');
 
     const agent = new PatchAgent({
       aidaClient: mockAidaClient(mock),
+      project,
+      fileUpdateAgent: new FileUpdateAgent({
+        aidaClient: mockAidaClient(fileAgentMock),
+      })
     });
 
-    return await Array.fromAsync(agent.run('test input', {selected: new ProjectContext(project)}));
+    return await Array.fromAsync(agent.applyChanges('summary'));
   }
 
   it('calls listFiles', async () => {
@@ -66,4 +79,24 @@ describeWithEnvironment('PatchAgent', () => {
       canceled: false
     });
   });
+
+  it('calls updateFiles', async () => {
+    const responses = await testAgent(
+        [
+          [{
+            explanation: '',
+            functionCalls: [{name: 'updateFiles', args: {files: ['//path/to/overrides/example.html']}}]
+          }],
+          [{
+            explanation: 'done',
+          }]
+        ],
+        [[{
+          explanation: 'file updated',
+        }]]);
+
+    const action = responses.find(response => response.type === ResponseType.ACTION);
+    assert.exists(action);
+    assert.deepEqual(action, {type: 'action' as ActionResponse['type'], output: '{"success":true}', canceled: false});
+  });
 });

front_end/panels/ai_assistance/agents/PatchAgent.ts

@@ -5,44 +5,19 @@
 import * as Host from '../../../core/host/host.js';
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import type * as Workspace from '../../../models/workspace/workspace.js';
-import type * as Lit from '../../../ui/lit/lit.js';
+import {debugLog} from '../debug.js';
 
 import {
   type AgentOptions as BaseAgentOptions,
   AgentType,
   AiAgent,
   type ContextResponse,
-  ConversationContext,
+  type ConversationContext,
   type RequestOptions,
   type ResponseData,
+  ResponseType,
 } from './AiAgent.js';
 
-export class ProjectContext extends ConversationContext<Workspace.Workspace.Project> {
-  readonly #project: Workspace.Workspace.Project;
-
-  constructor(project: Workspace.Workspace.Project) {
-    super();
-    this.#project = project;
-  }
-
-  getOrigin(): string {
-    // TODO
-    return 'test';
-  }
-
-  getItem(): Workspace.Workspace.Project {
-    return this.#project;
-  }
-
-  override getIcon(): HTMLElement {
-    return document.createElement('span');
-  }
-
-  override getTitle(): string|ReturnType<typeof Lit.Directives.until> {
-    return this.#project.displayName();
-  }
-}
-
 function getFiles(project: Workspace.Workspace.Project):
     {files: string[], map: Map<string, Workspace.UISourceCode.UISourceCode>} {
   const files = [];
@@ -60,13 +35,14 @@ function getFiles(project: Workspace.Workspace.Project):
 }
 
 export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
-  #project: ConversationContext<Workspace.Workspace.Project>|undefined;
+  #project: Workspace.Workspace.Project;
+  #fileUpdateAgent: FileUpdateAgent;
+  #changeSummary = '';
 
   override async *
       // eslint-disable-next-line require-yield
       handleContextDetails(_select: ConversationContext<Workspace.Workspace.Project>|null):
           AsyncGenerator<ContextResponse, void, void> {
-    // TODO: Implement
     return;
   }
 
@@ -85,8 +61,10 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
     };
   }
 
-  constructor(opts: BaseAgentOptions) {
+  constructor(opts: BaseAgentOptions&{fileUpdateAgent?: FileUpdateAgent, project: Workspace.Workspace.Project}) {
     super(opts);
+    this.#project = opts.project;
+    this.#fileUpdateAgent = opts.fileUpdateAgent ?? new FileUpdateAgent(opts);
     this.declareFunction<Record<never, unknown>>('listFiles', {
       description: 'Returns a list of all files in the project.',
       parameters: {
@@ -101,7 +79,7 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
             error: 'No project available',
           };
         }
-        const project = this.#project.getItem();
+        const project = this.#project;
         const {files} = getFiles(project);
         return {
           result: {
@@ -146,13 +124,17 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
             error: 'No project available',
           };
         }
-        const project = this.#project.getItem();
+        const project = this.#project;
         const {map} = getFiles(project);
         const matches = [];
         for (const [filepath, file] of map.entries()) {
+          await file.requestContentData();
+          debugLog('searching in', filepath, 'for', params.query);
+          const content = file.isDirty() ? file.workingCopyContentData() : await file.requestContentData();
           const results = TextUtils.TextUtils.performSearchInContentData(
-              file.workingCopyContentData(), params.query, params.caseSensitive ?? true, params.isRegex ?? false);
+              content, params.query, params.caseSensitive ?? true, params.isRegex ?? false);
           for (const result of results) {
+            debugLog('matches in', filepath);
             matches.push({
               filepath,
               lineNumber: result.lineNumber,
@@ -168,13 +150,116 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
         };
       },
     });
+
+    this.declareFunction<{
+      files: string[],
+    }>('updateFiles', {
+      description: 'When called this function performs necesary updates to files',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          files: {
+            type: Host.AidaClient.ParametersTypes.ARRAY,
+            description: 'List of file names from the project',
+            nullable: false,
+            items: {type: Host.AidaClient.ParametersTypes.STRING, description: 'File name'}
+          }
+        },
+      },
+      handler: async args => {
+        debugLog('updateFiles', args.files);
+        if (!this.#project) {
+          return {
+            error: 'No project available',
+          };
+        }
+        const project = this.#project;
+        const {map} = getFiles(project);
+        for (const file of args.files.slice(0, 3)) {
+          debugLog('updating', file);
+          const uiSourceCode = map.get(file);
+          if (!uiSourceCode) {
+            debugLog(file, 'not found');
+            continue;
+          }
+          const prompt = `I have applied the following CSS changes to my page in Chrome DevTools.
+
+\`\`\`css
+${this.#changeSummary}
+\`\`\`
+
+Following '===' I provide the source code file. Update the file to apply the same change to it.
+CRITICAL: Output the entire file with changes without any other modifications! DO NOT USE MARKDOWN.
+
+===
+${uiSourceCode.workingCopyContentData().text}
+`;
+          let response;
+          for await (response of this.#fileUpdateAgent.run(prompt, {selected: null})) {
+          }
+          debugLog('response', response);
+          if (response?.type !== ResponseType.ANSWER) {
+            debugLog('wrong response type', response);
+            continue;
+          }
+          const updated = response.text;
+          uiSourceCode.setWorkingCopy(updated);
+          debugLog('updated', updated);
+        }
+        return {
+          result: {
+            success: true,
+          }
+        };
+      },
+    });
+  }
+
+  async * applyChanges(changeSummary: string): AsyncGenerator<ResponseData, void, void> {
+    this.#changeSummary = changeSummary;
+    const prompt =
+        `I have applied the following CSS changes to my page in Chrome DevTools, what are the files in my source code that I need to change to apply the same change?
+
+\`\`\`css
+${changeSummary}
+\`\`\`
+
+Try searching using the selectors and if nothing matches, try to find a semantically appropriate place to change.
+Consider updating files containing styles like CSS files first!
+Call the updateFiles with the list of files to be updated once you are done.
+`;
+
+    yield* this.run(prompt, {
+      selected: null,
+    });
+  }
+}
+
+/**
+ * This is an inner "agent" to apply a change to one file.
+ */
+export class FileUpdateAgent extends AiAgent<Workspace.Workspace.Project> {
+  override async *
+      // eslint-disable-next-line require-yield
+      handleContextDetails(_select: ConversationContext<Workspace.Workspace.Project>|null):
+          AsyncGenerator<ContextResponse, void, void> {
+    return;
   }
 
-  override async * run(initialQuery: string, options: {
-    signal?: AbortSignal, selected: ConversationContext<Workspace.Workspace.Project>|null,
-  }): AsyncGenerator<ResponseData, void, void> {
-    this.#project = options.selected ?? undefined;
+  override readonly type = AgentType.PATCH;
+  readonly preamble = undefined;
+  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_PATCH_AGENT;
 
-    return yield* super.run(initialQuery, options);
+  get userTier(): string|undefined {
+    return 'TESTERS';
+  }
+
+  get options(): RequestOptions {
+    return {
+      temperature: undefined,
+      modelId: undefined,
+    };
   }
 }