[AI Assistance] Extract data formatters from agents

Includes the network and file agents for now.

Bug: none
Change-Id: Id6211a64199daede16b821a4693b3ed474b71249
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6243235
Reviewed-by: Nikolay Vitkov <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: OrKoN

config/gni/devtools_grd_files.gni

@@ -1193,6 +1193,8 @@ grd_files_debug_sources = [
   "front_end/panels/ai_assistance/components/UserActionRow.js",
   "front_end/panels/ai_assistance/components/chatView.css.js",
   "front_end/panels/ai_assistance/components/userActionRow.css.js",
+  "front_end/panels/ai_assistance/data_formatters/FileFormatter.js",
+  "front_end/panels/ai_assistance/data_formatters/NetworkRequestFormatter.js",
   "front_end/panels/animation/AnimationGroupPreviewUI.js",
   "front_end/panels/animation/AnimationScreenshotPopover.js",
   "front_end/panels/animation/AnimationTimeline.js",

front_end/panels/ai_assistance/BUILD.gn

@@ -31,6 +31,8 @@ devtools_module("ai_assistance") {
     "agents/StylingAgent.ts",
     "components/ChatView.ts",
     "components/UserActionRow.ts",
+    "data_formatters/FileFormatter.ts",
+    "data_formatters/NetworkRequestFormatter.ts",
   ]
 
   deps = [
@@ -97,6 +99,8 @@ ts_library("unittests") {
     "agents/StylingAgent.test.ts",
     "components/ChatView.test.ts",
     "components/UserActionRow.test.ts",
+    "data_formatters/FileFormatter.test.ts",
+    "data_formatters/NetworkRequestFormatter.test.ts",
   ]
 
   deps = [

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

@@ -5,9 +5,9 @@
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Bindings from '../../../models/bindings/bindings.js';
 import type * as Workspace from '../../../models/workspace/workspace.js';
 import * as PanelUtils from '../../utils/utils.js';
+import {FileFormatter} from '../data_formatters/FileFormatter.js';
 
 import {
   AgentType,
@@ -18,7 +18,6 @@ import {
   type RequestOptions,
   ResponseType,
 } from './AiAgent.js';
-import {formatRequestInitiatorChain} from './NetworkAgent.js';
 
 const preamble =
     `You are a highly skilled software engineer with expertise in various programming languages and frameworks.
@@ -71,8 +70,6 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
-const MAX_FILE_SIZE = 10000;
-
 export class FileContext extends ConversationContext<Workspace.UISourceCode.UISourceCode> {
   #file: Workspace.UISourceCode.UISourceCode;
 
@@ -141,8 +138,9 @@ export class FileAgent extends AiAgent<Workspace.UISourceCode.UISourceCode> {
 
   override async enhanceQuery(
       query: string, selectedFile: ConversationContext<Workspace.UISourceCode.UISourceCode>|null): Promise<string> {
-    const fileEnchantmentQuery =
-        selectedFile ? `# Selected file\n${formatFile(selectedFile.getItem())}\n\n# User request\n\n` : '';
+    const fileEnchantmentQuery = selectedFile ?
+        `# Selected file\n${new FileFormatter(selectedFile.getItem()).formatFile()}\n\n# User request\n\n` :
+        '';
     return `${fileEnchantmentQuery}${query}`;
   }
 }
@@ -152,69 +150,7 @@ function createContextDetailsForFileAgent(selectedFile: ConversationContext<Work
   return [
     {
       title: 'Selected file',
-      text: formatFile(selectedFile.getItem()),
+      text: new FileFormatter(selectedFile.getItem()).formatFile(),
     },
   ];
 }
-
-export function formatFile(selectedFile: Workspace.UISourceCode.UISourceCode): string {
-  const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-  const sourceMapDetails = formatSourceMapDetails(selectedFile, debuggerWorkspaceBinding);
-  const lines = [
-    `File name: ${selectedFile.displayName()}`,
-    `URL: ${selectedFile.url()}`,
-    sourceMapDetails,
-  ];
-  const resource = Bindings.ResourceUtils.resourceForURL(selectedFile.url());
-  if (resource?.request) {
-    lines.push(`Request initiator chain:
-${formatRequestInitiatorChain(resource?.request)}`);
-  }
-  lines.push(`File content:
-${formatFileContent(selectedFile)}`);
-  return lines.filter(line => line.trim() !== '').join('\n');
-}
-
-function formatFileContent(selectedFile: Workspace.UISourceCode.UISourceCode): string {
-  const contentData = selectedFile.workingCopyContentData();
-  const content = contentData.isTextContent ? contentData.text : '<binary data>';
-  const truncated = content.length > MAX_FILE_SIZE ? content.slice(0, MAX_FILE_SIZE) + '...' : content;
-  return `\`\`\`
-${truncated}
-\`\`\``;
-}
-
-export function formatSourceMapDetails(
-    selectedFile: Workspace.UISourceCode.UISourceCode,
-    debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding): string {
-  const mappedFileUrls = [];
-  const sourceMapUrls = [];
-  if (selectedFile.contentType().isFromSourceMap()) {
-    for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(selectedFile)) {
-      const uiSourceCode = debuggerWorkspaceBinding.uiSourceCodeForScript(script);
-      if (uiSourceCode) {
-        mappedFileUrls.push(uiSourceCode.url());
-        if (script.sourceMapURL !== undefined) {
-          sourceMapUrls.push(script.sourceMapURL);
-        }
-      }
-    }
-    for (const originURL of Bindings.SASSSourceMapping.SASSSourceMapping.uiSourceOrigin(selectedFile)) {
-      mappedFileUrls.push(originURL);
-    }
-  } else if (selectedFile.contentType().isScript()) {
-    for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(selectedFile)) {
-      if (script.sourceMapURL !== undefined && script.sourceMapURL !== '') {
-        sourceMapUrls.push(script.sourceMapURL);
-      }
-    }
-  }
-  if (sourceMapUrls.length === 0) {
-    return '';
-  }
-  let sourceMapDetails = 'Source map: ' + sourceMapUrls;
-  if (mappedFileUrls.length > 0) {
-    sourceMapDetails += '\nSource mapped from: ' + mappedFileUrls;
-  }
-  return sourceMapDetails;
-}

front_end/panels/ai_assistance/agents/FileAgent.ts

@@ -16,9 +16,6 @@ import {createNetworkPanelForMockConnection} from '../../../testing/NetworkHelpe
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as Network from '../../network/network.js';
 import {
-  allowHeader,
-  formatHeaders,
-  formatInitiatorUrl,
   NetworkAgent,
   RequestContext,
   ResponseType,
@@ -166,11 +163,11 @@ describeWithMockConnection('NetworkAgent', () => {
           details: [
             {
               title: 'Request',
-              text: 'Request URL: https://www.example.com\n\nRequest Headers\ncontent-type: bar1',
+              text: 'Request URL: https://www.example.com\n\nRequest headers:\ncontent-type: bar1',
             },
             {
               title: 'Response',
-              text: 'Response Status: 200 \n\nResponse Headers\ncontent-type: bar2\nx-forwarded-for: bar3',
+              text: 'Response Status: 200 \n\nResponse headers:\ncontent-type: bar2\nx-forwarded-for: bar3',
             },
             {
               title: 'Timing',
@@ -236,76 +233,4 @@ test`,
       ]);
     });
   });
-
-  describe('allowHeader', () => {
-    it('allows a header from the list', () => {
-      assert.isTrue(allowHeader({name: 'content-type', value: 'foo'}));
-    });
-
-    it('disallows headers not on the list', () => {
-      assert.isFalse(allowHeader({name: 'cookie', value: 'foo'}));
-      assert.isFalse(allowHeader({name: 'set-cookie', value: 'foo'}));
-      assert.isFalse(allowHeader({name: 'authorization', value: 'foo'}));
-    });
-  });
-
-  describe('formatInitiatorUrl', () => {
-    const tests = [
-      {
-        allowedResource: 'https://example.test',
-        targetResource: 'https://example.test',
-        shouldBeRedacted: false,
-      },
-      {
-        allowedResource: 'https://example.test',
-        targetResource: 'https://another-example.test',
-        shouldBeRedacted: true,
-      },
-      {
-        allowedResource: 'file://test',
-        targetResource: 'https://another-example.test',
-        shouldBeRedacted: true,
-      },
-      {
-        allowedResource: 'https://another-example.test',
-        targetResource: 'file://test',
-        shouldBeRedacted: true,
-      },
-      {
-        allowedResource: 'https://test.example.test',
-        targetResource: 'https://example.test',
-        shouldBeRedacted: true,
-      },
-      {
-        allowedResource: 'https://test.example.test:9900',
-        targetResource: 'https://test.example.test:9901',
-        shouldBeRedacted: true,
-      },
-    ];
-
-    for (const t of tests) {
-      it(`${t.targetResource} test when allowed resource is ${t.allowedResource}`, () => {
-        const formatted = formatInitiatorUrl(new URL(t.targetResource).origin, new URL(t.allowedResource).origin);
-        if (t.shouldBeRedacted) {
-          assert.strictEqual(
-              formatted, '<redacted cross-origin initiator URL>', `${JSON.stringify(t)} was not redacted`);
-        } else {
-          assert.strictEqual(formatted, t.targetResource, `${JSON.stringify(t)} was redacted`);
-        }
-      });
-    }
-  });
-
-  describe('formatHeaders', () => {
-    it('does not redact a header from the list', () => {
-      assert.strictEqual(formatHeaders('test:', [{name: 'content-type', value: 'foo'}]), 'test:\ncontent-type: foo');
-    });
-
-    it('disallows headers not on the list', () => {
-      assert.strictEqual(formatHeaders('test:', [{name: 'cookie', value: 'foo'}]), 'test:\ncookie: <redacted>');
-      assert.strictEqual(formatHeaders('test:', [{name: 'set-cookie', value: 'foo'}]), 'test:\nset-cookie: <redacted>');
-      assert.strictEqual(
-          formatHeaders('test:', [{name: 'authorization', value: 'foo'}]), 'test:\nauthorization: <redacted>');
-    });
-  });
 });