[AI Assistance] Patch agent to find files

Basic version of an agent for the change summary view that tells which
files need to be updated.

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

Author: OrKoN

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -36,6 +36,7 @@ import {
   NetworkAgent,
   RequestContext,
 } from './agents/NetworkAgent.js';
+import {PatchAgent, ProjectContext} 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';
@@ -249,6 +250,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     accountImage?: string,
     accountFullName?: string,
   };
+  #project?: Workspace.Workspace.Project;
+  #patchSuggestion?: string;
+  #patchSuggestionLoading?: boolean;
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
     aidaClient: Host.AidaClient.AidaClient,
@@ -271,6 +275,21 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     };
 
     this.#conversations = AiHistoryStorage.instance().getHistory().map(item => Conversation.fromSerialized(item));
+
+    if (isAiAssistancePatchingEnabled()) {
+      // TODO: this is temporary code that should be replaced with workflow selection flow.
+      // For now it picks the first Workspace project that is not Snippets.
+      const projects =
+          Workspace.Workspace.WorkspaceImpl.instance().projectsForType(Workspace.Workspace.projectTypes.FileSystem);
+      this.#project = undefined;
+      for (const project of projects) {
+        if (project.displayName().trim() === '') {
+          continue;
+        }
+        this.#project = project;
+        break;
+      }
+    }
   }
 
   #createToolbar(): void {
@@ -594,6 +613,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         this.#updateAgentState(this.#currentAgent);
       };
 
+  #getChangeSummary(): string|undefined {
+    return (isAiAssistancePatchingEnabled() && this.#currentAgent && !this.#currentConversation?.isReadOnly) ?
+        this.#changeManager.formatChanges(this.#currentAgent.id) :
+        undefined;
+  }
+
   async doUpdate(): Promise<void> {
     this.#updateToolbarState();
     this.view(
@@ -606,10 +631,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           selectedContext: this.#selectedContext,
           agentType: this.#currentAgent?.type,
           isReadOnly: this.#currentConversation?.isReadOnly ?? false,
-          changeSummary:
-              (isAiAssistancePatchingEnabled() && this.#currentAgent && !this.#currentConversation?.isReadOnly) ?
-              this.#changeManager.formatChanges(this.#currentAgent.id) :
-              undefined,
+          changeSummary: this.#getChangeSummary(),
+          patchSuggestion: this.#patchSuggestion,
+          patchSuggestionLoading: this.#patchSuggestionLoading,
           stripLinks: this.#currentAgent?.type === AgentType.PERFORMANCE,
           inspectElementToggled: this.#toggleSearchElementAction.toggled(),
           userInfo: this.#userInfo,
@@ -626,6 +650,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onCancelCrossOriginChat: this.#blockedByCrossOrigin && this.#previousSameOriginContext ?
               this.#handleCrossOriginChatCancellation.bind(this) :
               undefined,
+          onStageToWorkspace: this.#onStageToWorkspace.bind(this)
         },
         this.#viewOutput, this.#contentContainer);
   }
@@ -883,6 +908,37 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerReady));
   }
 
+  async #onStageToWorkspace(): Promise<void> {
+    if (!this.#project) {
+      throw new Error('Project does not exist');
+    }
+    const agent = new PatchAgent({
+      aidaClient: this.#aidaClient,
+      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
+    });
+    this.#patchSuggestionLoading = true;
+    void this.doUpdate();
+    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';
+    this.#patchSuggestionLoading = false;
+    void this.doUpdate();
+  }
+
   async *
       #saveResponsesToCurrentConversation(items: AsyncIterable<ResponseData, void, void>):
           AsyncGenerator<ResponseData, void, void> {

front_end/panels/ai_assistance/BUILD.gn

@@ -98,6 +98,7 @@ ts_library("unittests") {
     "agents/AiAgent.test.ts",
     "agents/FileAgent.test.ts",
     "agents/NetworkAgent.test.ts",
+    "agents/PatchAgent.test.ts",
     "agents/PerformanceAgent.test.ts",
     "agents/StylingAgent.test.ts",
     "components/ChatView.test.ts",

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

@@ -0,0 +1,69 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+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';
+
+describeWithEnvironment('PatchAgent', () => {
+  async function testAgent(mock: 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');
+
+    const agent = new PatchAgent({
+      aidaClient: mockAidaClient(mock),
+    });
+
+    return await Array.fromAsync(agent.run('test input', {selected: new ProjectContext(project)}));
+  }
+
+  it('calls listFiles', async () => {
+    const responses = await testAgent([
+      [{explanation: '', functionCalls: [{name: 'listFiles', args: {}}]}], [{
+        explanation: 'done',
+      }]
+    ]);
+
+    const action = responses.find(response => response.type === ResponseType.ACTION);
+    assert.exists(action);
+    assert.deepEqual(action, {
+      type: 'action' as ActionResponse['type'],
+      output: '{"files":["//path/to/overrides/example.html"]}',
+      canceled: false
+    });
+  });
+
+  it('calls searchInFiles', async () => {
+    const responses = await testAgent([
+      [{
+        explanation: '',
+        functionCalls: [{
+          name: 'searchInFiles',
+          args: {
+            query: 'content',
+          }
+        }]
+      }],
+      [{
+        explanation: 'done',
+      }]
+    ]);
+
+    const action = responses.find(response => response.type === ResponseType.ACTION);
+    assert.exists(action);
+    assert.deepEqual(action, {
+      type: 'action' as ActionResponse['type'],
+      output:
+          '{"matches":[{"filepath":"//path/to/overrides/example.html","lineNumber":0,"columnNumber":0,"matchLength":7}]}',
+      canceled: false
+    });
+  });
+});

front_end/panels/ai_assistance/agents/PatchAgent.ts

@@ -17,42 +17,6 @@ import {
   type ResponseData,
 } from './AiAgent.js';
 
-/* clang-format off */
-const preamble = `You are responsible for changing the source code on behalf of the user.
-The user query defines what changes are to be made.
-You have a number of functions to get information about source files in the project.
-Use those functions to fulfill the user query.
-
-## Step-by-step instructions
-
-- Think about what the user wants.
-- List all files in the project or search for relevant files.
-- Identify the files that are likely to be modified.
-- Retrieve the content of those files.
-- Rewrite the files according to the user query.
-
-## General considerations
-
-- Avoid requesting too many files.
-- Always prefer changing the true source files and not the build output.
-- The build output is usually in dist/, out/, build/ folders.
-- *CRITICAL* never make the same function call twice.
-- *CRITICAL* do not make any changes if not prompted.
-
-Instead of using the writeFile function you can also produce  the following diff format:
-
-\`\`\`
-src/index.html
-<meta charset="utf-8">
-<title>Test</title>
-\`\`\`
-
-First output the filename (example, src/index.html), then output the SEARCH block,
-followed by the REPLACE block.
-
-`;
-/* clang-format on */
-
 export class ProjectContext extends ConversationContext<Workspace.Workspace.Project> {
   readonly #project: Workspace.Workspace.Project;
 
@@ -107,7 +71,7 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
   }
 
   override readonly type = AgentType.PATCH;
-  readonly preamble = preamble;
+  readonly preamble = undefined;
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_PATCH_AGENT;
 
   get userTier(): string|undefined {
@@ -124,7 +88,7 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
   constructor(opts: BaseAgentOptions) {
     super(opts);
     this.declareFunction<Record<never, unknown>>('listFiles', {
-      description: 'returns a list of all files in the project.',
+      description: 'Returns a list of all files in the project.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -149,11 +113,11 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
 
     this.declareFunction<{
       query: string,
-      caseSensitive: boolean,
-      isRegex: boolean,
+      caseSensitive?: boolean,
+      isRegex?: boolean,
     }>('searchInFiles', {
       description:
-          'Searches for a query in all files in the project. For each match it returns the positions of matches.',
+          'Searches for a text match in all files in the project. For each match it returns the positions of matches.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -186,7 +150,8 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
         const {map} = getFiles(project);
         const matches = [];
         for (const [filepath, file] of map.entries()) {
-          const results = await project.searchInFileContent(file, params.query, params.caseSensitive, params.isRegex);
+          const results = TextUtils.TextUtils.performSearchInContentData(
+              file.workingCopyContentData(), params.query, params.caseSensitive ?? true, params.isRegex ?? false);
           for (const result of results) {
             matches.push({
               filepath,
@@ -203,118 +168,6 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
         };
       },
     });
-
-    this.declareFunction('changeFile', {
-      description: 'returns a list of all files in the project.',
-      parameters: {
-        type: Host.AidaClient.ParametersTypes.OBJECT,
-        description: '',
-        nullable: true,
-        properties: {
-          filepath: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'A file path that identifies the file to get the content for',
-            nullable: false,
-          },
-        },
-      },
-      handler: async () => {
-        return {result: {}};
-      },
-    });
-
-    this.declareFunction<{filepath: string}>('readFile', {
-      description: 'returns the complement content of a file',
-      parameters: {
-        type: Host.AidaClient.ParametersTypes.OBJECT,
-        description: '',
-        properties: {
-          filepath: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'A file path that identifies the file to get the content for',
-            nullable: false,
-          },
-        },
-      },
-      handler: async params => {
-        if (!this.#project) {
-          return {
-            error: 'No project available',
-          };
-        }
-        const project = this.#project.getItem();
-        const {map} = getFiles(project);
-        const uiSourceCode = map.get(params.filepath);
-        if (!uiSourceCode) {
-          return {
-            error: `File ${params.filepath} not found`,
-          };
-        }
-        // TODO: clearly define what types of files we handle.
-        const content = await uiSourceCode.requestContentData();
-        if (TextUtils.ContentData.ContentData.isError(content)) {
-          return {
-            error: content.error,
-          };
-        }
-        if (!content.isTextContent) {
-          return {
-            error: 'Non-text files are not supported',
-          };
-        }
-
-        return {
-          result: {
-            content: content.text,
-          }
-        };
-      },
-    });
-
-    this.declareFunction<{filepath: string, content: string}>('writeFile', {
-      description: '(over)writes the file with the provided content',
-      parameters: {
-        type: Host.AidaClient.ParametersTypes.OBJECT,
-        description: '',
-        properties: {
-          filepath: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'A file path that identifies the file',
-            nullable: false,
-          },
-          content: {
-            type: Host.AidaClient.ParametersTypes.STRING,
-            description: 'Full content of the file that will replace the current file content',
-            nullable: false,
-          },
-        },
-      },
-      handler: async params => {
-        if (!this.#project) {
-          return {
-            error: 'No project available',
-          };
-        }
-        const project = this.#project.getItem();
-        const {map} = getFiles(project);
-        const uiSourceCode = map.get(params.filepath);
-        if (!uiSourceCode) {
-          return {
-            error: `File ${params.filepath} not found`,
-          };
-        }
-        const content = params.content;
-        // TODO: we unescape some characters to restore the original
-        // content but this should be fixed upstream.
-        uiSourceCode.setContent(
-            content.replaceAll('\\n', '\n').replaceAll('\\"', '"').replaceAll('\\\'', '\''),
-            false,
-        );
-        return {
-          result: null,
-        };
-      },
-    });
   }
 
   override async * run(initialQuery: string, options: {