Send additional context as part of code completion requests in Console

Bug: 441440074
Change-Id: I5488b2403752f6e4e55709fc1a95bcc537a873f9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6884276
Commit-Queue: Samiya Caur <samiyac@chromium.org>
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>

Author: Samiya Caur

front_end/core/host/AidaClient.ts

@@ -228,6 +228,27 @@ export enum EditType {
   ACCEPT_COMPLETION = 6,
 }
 
+export enum Reason {
+  // Unknown reason.
+  UNKNOWN = 0,
+
+  // The file is currently open.
+  CURRENTLY_OPEN = 1,
+
+  // The file is opened recently.
+  RECENTLY_OPENED = 2,
+
+  // The file is edited recently.
+  RECENTLY_EDITED = 3,
+
+  // The file is located within the same directory.
+  COLOCATED = 4,
+
+  // Included based on relation to code around the cursor (e.g: could be
+  // provided by local IDE analysis)
+  RELATED_FILE = 5,
+}
+
 /* eslint-disable @typescript-eslint/naming-convention */
 export interface CompletionRequest {
   client: string;
@@ -236,6 +257,11 @@ export interface CompletionRequest {
   options?: CompleteCodeOptions;
   metadata: RequestMetadata;
   last_user_action?: EditType;
+  additional_files?: Array<{
+    path: string,
+    content: string,
+    included_reason: Reason,
+  }>;
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

front_end/models/ai_code_completion/AiCodeCompletion.test.ts

@@ -37,6 +37,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         sinon.createStubInstance(TextEditor.TextEditor.TextEditor),
+        AiCodeCompletion.Panel.CONSOLE,
         ['\n'],
     );
 
@@ -71,6 +72,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         editor,
+        AiCodeCompletion.Panel.CONSOLE,
     );
 
     aiCodeCompletion.onTextChanged('prefix', '\n', 1);
@@ -100,6 +102,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         editor,
+        AiCodeCompletion.Panel.CONSOLE,
     );
 
     aiCodeCompletion.onTextChanged('console.log(', ');\n', 1);
@@ -121,6 +124,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         sinon.createStubInstance(TextEditor.TextEditor.TextEditor),
+        AiCodeCompletion.Panel.CONSOLE,
     );
 
     aiCodeCompletion.onTextChanged('p', '', 1);
@@ -151,6 +155,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         editor,
+        AiCodeCompletion.Panel.CONSOLE,
     );
     const dispatchSpy = sinon.spy(aiCodeCompletion, 'dispatchEventToListeners');
 
@@ -183,6 +188,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         editor,
+        AiCodeCompletion.Panel.CONSOLE,
     );
     const dispatchSpy = sinon.spy(aiCodeCompletion, 'dispatchEventToListeners');
 
@@ -210,6 +216,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         editor,
+        AiCodeCompletion.Panel.CONSOLE,
     );
 
     aiCodeCompletion.onTextChanged('prefix', 'suffix', 1);
@@ -252,6 +259,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         editor,
+        AiCodeCompletion.Panel.CONSOLE,
     );
 
     aiCodeCompletion.onTextChanged('prefix ', 'suffix', 1);
@@ -289,6 +297,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         editor,
+        AiCodeCompletion.Panel.CONSOLE,
     );
 
     aiCodeCompletion.onTextChanged('prefix', 'suffix', 1);
@@ -315,6 +324,7 @@ describeWithEnvironment('AiCodeCompletion', () => {
     const aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion(
         {aidaClient: mockAidaClient},
         editor,
+        AiCodeCompletion.Panel.CONSOLE,
     );
 
     aiCodeCompletion.onTextChanged('prefix', 'suffix', 1);

front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -30,6 +30,99 @@ interface CachedRequest {
   response: Host.AidaClient.CompletionResponse;
 }
 
+/* clang-format off */
+const consoleAdditionalContextFileContent = `/**
+ * This file describes the execution environment of the Chrome DevTools Console.
+ * The code is JavaScript, but with special global functions and variables.
+ * Top-level await is available.
+ * The console has direct access to the inspected page's \`window\` and \`document\`.
+ */
+
+/**
+ * @description Returns the value of the most recently evaluated expression.
+ */
+let $_;
+
+/**
+ * @description A reference to the most recently selected DOM element.
+ * $0, $1, $2, $3, $4 can be used to reference the last five selected DOM elements.
+ */
+let $0;
+
+/**
+ * @description A query selector alias. $$('.my-class') is equivalent to document.querySelectorAll('.my-class').
+ */
+function $$(selector, startNode) {}
+
+/**
+ * @description An XPath selector. $x('//p') returns an array of all <p> elements.
+ */
+function $x(path, startNode) {}
+
+function clear() {}
+
+function copy(object) {}
+
+/**
+ * @description Selects and reveals the specified element in the Elements panel.
+ */
+function inspect(object) {}
+
+function keys(object) {}
+
+function values(object) {}
+
+/**
+ * @description When the specified function is called, the debugger is invoked.
+ */
+function debug(func) {}
+
+/**
+ * @description Stops the debugging of the specified function.
+ */
+function undebug(func) {}
+
+/**
+ * @description Logs a message to the console whenever the specified function is called,
+ * along with the arguments passed to it.
+ */
+function monitor(func) {}
+
+/**
+ * @description Stops monitoring the specified function.
+ */
+function unmonitor(func) {}
+
+/**
+ * @description Logs all events dispatched to the specified object to the console.
+ */
+function monitorEvents(object, events) {}
+
+/**
+ * @description Returns an object containing all event listeners registered on the specified object.
+ */
+function getEventListeners(object) {}
+
+/**
+ * The global \`console\` object has several helpful methods
+ */
+const console = {
+  log: (...args) => {},
+  warn: (...args) => {},
+  error: (...args) => {},
+  info: (...args) => {},
+  debug: (...args) => {},
+  assert: (assertion, ...args) => {},
+  dir: (object) => {}, // Displays an interactive property listing of an object.
+  dirxml: (object) => {}, // Displays an XML/HTML representation of an object.
+  table: (data, columns) => {}, // Displays tabular data as a table.
+  group: (label) => {}, // Creates a new inline collapsible group.
+  groupEnd: () => {},
+  time: (label) => {}, // Starts a timer.
+  timeEnd: (label) => {} // Stops a timer and logs the elapsed time.
+};`;
+/* clang-format on */
+
 /**
  * The AiCodeCompletion class is responsible for fetching code completion suggestions
  * from the AIDA backend and displaying them in the text editor.
@@ -50,16 +143,18 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
   #stopSequences: string[];
   #renderingTimeout?: number;
   #aidaRequestCache?: CachedRequest;
+  #panel: Panel;
 
   readonly #sessionId: string = crypto.randomUUID();
   readonly #aidaClient: Host.AidaClient.AidaClient;
   readonly #serverSideLoggingEnabled: boolean;
 
-  constructor(opts: AgentOptions, editor: TextEditor.TextEditor.TextEditor, stopSequences?: string[]) {
+  constructor(opts: AgentOptions, editor: TextEditor.TextEditor.TextEditor, panel: Panel, stopSequences?: string[]) {
     super();
     this.#aidaClient = opts.aidaClient;
     this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
     this.#editor = editor;
+    this.#panel = panel;
     this.#stopSequences = stopSequences ?? [];
   }
 
@@ -77,6 +172,14 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     function validTemperature(temperature: number|undefined): number|undefined {
       return typeof temperature === 'number' && temperature >= 0 ? temperature : undefined;
     }
+
+    const additionalFiles = this.#panel === Panel.CONSOLE ? [{
+      path: 'devtools-console-context.js',
+      content: consoleAdditionalContextFileContent,
+      included_reason: Host.AidaClient.Reason.RELATED_FILE,
+    }] :
+                                                            undefined;
+
     return {
       client: Host.AidaClient.CLIENT_NAME,
       prefix,
@@ -93,6 +196,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
         user_tier: userTier,
         client_version: Root.Runtime.getChromeVersion(),
       },
+      additional_files: additionalFiles,
     };
   }
 
@@ -160,7 +264,8 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
       } else {
         this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
       }
-    } catch {
+    } catch (e) {
+      debugLog('Error while fetching code completion suggestions from AIDA', e);
       this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
     }
   }
@@ -273,6 +378,11 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
   }
 }
 
+export const enum Panel {
+  CONSOLE = 'console',
+  SOURCES = 'sources',
+}
+
 export const enum Events {
   RESPONSE_RECEIVED = 'ResponseReceived',
   REQUEST_TRIGGERED = 'RequestTriggered',

front_end/panels/console/ConsolePrompt.ts

@@ -513,8 +513,8 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.teaser = undefined;
     }
     // We are prioritizing single line suggestions in Console panel to reduce noise.
-    this.aiCodeCompletion =
-        new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion({aidaClient: this.aidaClient}, this.editor, ['\n']);
+    this.aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+        {aidaClient: this.aidaClient}, this.editor, AiCodeCompletion.AiCodeCompletion.Panel.CONSOLE, ['\n']);
     this.aiCodeCompletion.addEventListener(AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, event => {
       this.aiCodeCompletionCitations = event.data.citations;
       this.dispatchEventToListeners(Events.AI_CODE_COMPLETION_RESPONSE_RECEIVED, event.data);

front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -203,8 +203,8 @@ export class AiCodeCompletionPlugin extends Plugin {
       this.#detachAiCodeCompletionTeaser();
       this.#teaser = undefined;
     }
-    this.#aiCodeCompletion =
-        new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion({aidaClient: this.#aidaClient}, this.#editor);
+    this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+        {aidaClient: this.#aidaClient}, this.#editor, AiCodeCompletion.AiCodeCompletion.Panel.SOURCES);
     this.#aiCodeCompletion.addEventListener(
         AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
     this.#aiCodeCompletion.addEventListener(