chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/console/ConsolePrompt.ts

@@ -8,17 +8,15 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as PanelCommon from '../common/common.js';
 
 import {ConsolePanel} from './ConsolePanel.js';
 import consolePromptStyles from './consolePrompt.css.js';
@@ -44,8 +42,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsolePrompt.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const AI_CODE_COMPLETION_CHARACTER_LIMIT = 20_000;
-
 export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
     UI.Widget.Widget) {
   private addCompletionsFromHistory: boolean;
@@ -57,7 +53,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private requestPreviewBound: () => Promise<void>;
   private requestPreviewCurrent = 0;
   private readonly innerPreviewElement: HTMLElement;
-  private readonly promptIcon: IconButton.Icon.Icon;
+  private readonly promptIcon: Icon;
   private readonly iconThrottler: Common.Throttler.Throttler;
   private readonly eagerEvalSetting: Common.Settings.Setting<boolean>;
   protected previewRequestForTest: Promise<void>|null;
@@ -71,15 +67,8 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #selfXssWarningShown = false;
   #javaScriptCompletionCompartment: CodeMirror.Compartment = new CodeMirror.Compartment();
 
-  private aidaClient?: Host.AidaClient.AidaClient;
-  private aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
-  private boundOnAidaAvailabilityChange?: () => Promise<void>;
-  private aiCodeCompletion?: AiCodeCompletion.AiCodeCompletion.AiCodeCompletion;
-  teaser?: PanelCommon.AiCodeCompletionTeaser;
-  private placeholderCompartment: CodeMirror.Compartment = new CodeMirror.Compartment();
-  private aiCodeCompletionSetting =
-      Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
-  private aiCodeCompletionCitations?: Host.AidaClient.Citation[] = [];
+  private aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
+  private aiCodeCompletionProvider?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionProvider;
 
   #getJavaScriptCompletionExtensions(): CodeMirror.Extension {
     if (this.#selfXssWarningShown) {
@@ -101,7 +90,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.editor.dispatch({effects});
   }
 
-  constructor() {
+  constructor(aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
     super({
       jslog: `${VisualLogging.textField('console-prompt').track({
         change: true,
@@ -119,7 +108,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.textChangeThrottler = new Common.Throttler.Throttler(150);
     this.requestPreviewBound = this.requestPreview.bind(this);
     this.innerPreviewElement = this.eagerPreviewElement.createChild('div', 'console-eager-inner-preview');
-    const previewIcon = new IconButton.Icon.Icon();
+    const previewIcon = new Icon();
     previewIcon.name = 'chevron-left-dot';
     previewIcon.classList.add('preview-result-icon', 'medium');
     this.eagerPreviewElement.appendChild(previewIcon);
@@ -127,7 +116,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const editorContainerElement = this.element.createChild('div', 'console-prompt-editor-container');
     this.element.appendChild(this.eagerPreviewElement);
 
-    this.promptIcon = new IconButton.Icon.Icon();
+    this.promptIcon = new Icon();
     this.promptIcon.name = 'chevron-right';
     this.promptIcon.style.color = 'var(--icon-action)';
     this.promptIcon.classList.add('console-prompt-icon', 'medium');
@@ -165,14 +154,11 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.#javaScriptCompletionCompartment.of(this.#getJavaScriptCompletionExtensions()),
     ];
 
-    if (this.isAiCodeCompletionEnabled()) {
-      const aiCodeCompletionTeaserDismissedSetting =
-          Common.Settings.Settings.instance().createSetting('ai-code-completion-teaser-dismissed', false);
-      if (!this.aiCodeCompletionSetting.get() && !aiCodeCompletionTeaserDismissedSetting.get()) {
-        this.teaser = new PanelCommon.AiCodeCompletionTeaser({onDetach: this.detachAiCodeCompletionTeaser.bind(this)});
-        extensions.push(this.placeholderCompartment.of([]));
-      }
-      extensions.push(TextEditor.Config.aiAutoCompleteSuggestion);
+    this.aiCodeCompletionConfig = aiCodeCompletionConfig;
+    if (this.aiCodeCompletionConfig) {
+      this.aiCodeCompletionProvider =
+          TextEditor.AiCodeCompletionProvider.AiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
+      extensions.push(...this.aiCodeCompletionProvider.extension());
     }
 
     const doc = this.initialText;
@@ -180,6 +166,14 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     this.editor = new TextEditor.TextEditor.TextEditor(editorState);
 
+    if (this.aiCodeCompletionProvider) {
+      this.aiCodeCompletionProvider.editorInitialized(this.editor);
+      this.editor.editor.dispatch({
+        effects: TextEditor.AiCodeCompletionProvider.setAiCodeCompletionTeaserMode.of(
+            TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.ONLY_SHOW_ON_EMPTY)
+      });
+    }
+
     this.editor.addEventListener('keydown', event => {
       if (event.defaultPrevented) {
         event.stopPropagation();
@@ -197,15 +191,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     // Record the console tool load time after the console prompt constructor is complete.
     Host.userMetrics.panelLoaded('console', 'DevTools.Launch.Console');
-
-    if (this.isAiCodeCompletionEnabled()) {
-      this.aiCodeCompletionSetting.addChangeListener(this.onAiCodeCompletionSettingChanged.bind(this));
-      this.onAiCodeCompletionSettingChanged();
-      this.boundOnAidaAvailabilityChange = this.onAidaAvailabilityChange.bind(this);
-      Host.AidaClient.HostConfigTracker.instance().addEventListener(
-          Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.boundOnAidaAvailabilityChange);
-      void this.onAidaAvailabilityChange();
-    }
   }
 
   private eagerSettingChanged(): void {
@@ -220,7 +205,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return this.eagerPreviewElement;
   }
 
-  private onTextChanged(docContentChanged?: boolean): void {
+  private onTextChanged(): void {
     // ConsoleView and prompt both use a throttler, so we clear the preview
     // ASAP to avoid inconsistency between a fresh viewport and stale preview.
     if (this.eagerEvalSetting.get()) {
@@ -229,49 +214,10 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
           this.requestPreviewBound,
           asSoonAsPossible ? Common.Throttler.Scheduling.AS_SOON_AS_POSSIBLE : Common.Throttler.Scheduling.DEFAULT);
     }
-    if (docContentChanged && this.aiCodeCompletion && this.isAiCodeCompletionEnabled()) {
-      // Only trigger when doc content changes.
-      // This ensures that it is not triggered when user is going through the options in existing completion menu.
-      this.triggerAiCodeCompletion();
-    }
     this.updatePromptIcon();
     this.dispatchEventToListeners(Events.TEXT_CHANGED);
   }
 
-  triggerAiCodeCompletion(): void {
-    const {doc, selection} = this.editor.state;
-    const query = doc.toString();
-    const cursor = selection.main.head;
-    const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
-    let prefix = query.substring(0, cursor);
-    if (prefix.trim().length === 0) {
-      return;
-    }
-    if (currentExecutionContext) {
-      const consoleModel = currentExecutionContext.target().model(SDK.ConsoleModel.ConsoleModel);
-      if (consoleModel) {
-        let lastMessage = '';
-        let consoleMessages = '';
-        for (const message of consoleModel.messages()) {
-          if (message.type !== SDK.ConsoleModel.FrontendMessageType.Command || message.messageText === lastMessage) {
-            continue;
-          }
-          lastMessage = message.messageText;
-          consoleMessages = consoleMessages + message.messageText + '\n\n';
-        }
-        prefix = consoleMessages + prefix;
-      }
-    }
-    let suffix = query.substring(cursor);
-    if (prefix.length > AI_CODE_COMPLETION_CHARACTER_LIMIT) {
-      prefix = prefix.substring(prefix.length - AI_CODE_COMPLETION_CHARACTER_LIMIT);
-    }
-    if (suffix.length > AI_CODE_COMPLETION_CHARACTER_LIMIT) {
-      suffix = suffix.substring(0, AI_CODE_COMPLETION_CHARACTER_LIMIT);
-    }
-    this.aiCodeCompletion?.onTextChanged(prefix, suffix, cursor);
-  }
-
   private async requestPreview(): Promise<void> {
     const id = ++this.requestPreviewCurrent;
     const text = TextEditor.Config.contentIncludingHint(this.editor.editor).trim();
@@ -303,10 +249,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.highlightingNode = false;
       SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
     }
-    if (this.boundOnAidaAvailabilityChange) {
-      Host.AidaClient.HostConfigTracker.instance().removeEventListener(
-          Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.boundOnAidaAvailabilityChange);
-    }
   }
 
   history(): TextEditor.AutocompleteHistory.AutocompleteHistory {
@@ -318,7 +260,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   clearAiCodeCompletionCache(): void {
-    this.aiCodeCompletion?.clearCachedRequest();
+    this.aiCodeCompletionProvider?.clearCache();
   }
 
   moveCaretToEndOfPrompt(): void {
@@ -342,7 +284,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private editorKeymap(): readonly CodeMirror.KeyBinding[] {
-    const keymap: CodeMirror.KeyBinding[] = [
+    return [
       {
         // Handle the KeyboardEvent manually.
         any: (_view, event) => {
@@ -369,7 +311,9 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       {mac: 'Ctrl-n', run: () => this.#editorHistory.moveHistory(Direction.FORWARD, true)},
       {
         key: 'Escape',
-        run: () => this.runOnEscape(),
+        run: () => {
+          return TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor, this.#argumentHintsState);
+        },
       },
       {
         key: 'Ctrl-Enter',
@@ -387,38 +331,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
         shift: CodeMirror.insertNewlineAndIndent,
       },
     ];
-
-    if (this.isAiCodeCompletionEnabled()) {
-      keymap.push({
-        key: 'Tab',
-        run: () => {
-          const {accepted, suggestion} = TextEditor.Config.acceptAiAutoCompleteSuggestion(this.editor.editor);
-          if (accepted) {
-            this.dispatchEventToListeners(
-                Events.AI_CODE_COMPLETION_SUGGESTION_ACCEPTED, {citations: this.aiCodeCompletionCitations});
-            if (suggestion?.rpcGlobalId) {
-              this.aiCodeCompletion?.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
-            }
-          }
-          return accepted;
-        },
-      });
-    }
-
-    return keymap;
-  }
-
-  private runOnEscape(): boolean {
-    if (TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor, this.#argumentHintsState)) {
-      return true;
-    }
-    if (this.aiCodeCompletion && TextEditor.Config.hasActiveAiSuggestion(this.editor.state)) {
-      this.editor.dispatch({
-        effects: TextEditor.Config.setAiAutoCompleteSuggestion.of(null),
-      });
-      return true;
-    }
-    return false;
   }
 
   private async enterWillEvaluate(forceEvaluate?: boolean): Promise<boolean> {
@@ -472,9 +384,15 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
         changes: {from: 0, to: this.editor.state.doc.length},
         scrollIntoView: true,
       });
-      if (this.teaser) {
-        this.detachAiCodeCompletionTeaser();
-        this.teaser = undefined;
+      if (this.aiCodeCompletionProvider) {
+        const teaserMode =
+            this.editor.editor.state.field(TextEditor.AiCodeCompletionProvider.aiCodeCompletionTeaserModeState);
+        if (teaserMode !== TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.OFF) {
+          this.editor.editor.dispatch({
+            effects: TextEditor.AiCodeCompletionProvider.setAiCodeCompletionTeaserMode.of(
+                TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.OFF)
+          });
+        }
       }
     } else if (this.editor.state.doc.length) {
       CodeMirror.insertNewlineAndIndent(this.editor.editor);
@@ -531,8 +449,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private editorUpdate(update: CodeMirror.ViewUpdate): void {
     if (update.docChanged ||
         CodeMirror.selectedCompletion(update.state) !== CodeMirror.selectedCompletion(update.startState)) {
-      const docContentChanged = update.state.doc !== update.startState.doc;
-      this.onTextChanged(docContentChanged);
+      this.onTextChanged();
     } else if (update.selectionSet) {
       this.updatePromptIcon();
     }
@@ -542,122 +459,14 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.editor.focus();
   }
 
-  // TODO(b/435654172): Refactor and move aiCodeCompletion model one level up to avoid
-  // defining additional listeners and events.
-  private setAiCodeCompletion(): void {
-    if (this.aiCodeCompletion) {
-      return;
-    }
-    if (!this.aidaClient) {
-      this.aidaClient = new Host.AidaClient.AidaClient();
-    }
-    if (this.teaser) {
-      this.detachAiCodeCompletionTeaser();
-      this.teaser = undefined;
-    }
-    this.aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.aidaClient}, AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE, {
-          getSelectionHead: () => this.editor.editor.state.selection.main.head,
-          getCompletionHint: () => this.editor.editor.plugin(TextEditor.Config.showCompletionHint)?.currentHint,
-          setAiAutoCompletion: (suggestion: TextEditor.Config.ActiveSuggestion|null) => {
-            this.editor.dispatch({effects: TextEditor.Config.setAiAutoCompleteSuggestion.of(suggestion)});
-          }
-        },
-        ['\n\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);
-    });
-    this.aiCodeCompletion.addEventListener(AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, event => {
-      this.dispatchEventToListeners(Events.AI_CODE_COMPLETION_REQUEST_TRIGGERED, event.data);
-    });
-  }
-
-  private onAiCodeCompletionSettingChanged(): void {
-    if (this.aiCodeCompletionSetting.get() && this.isAiCodeCompletionEnabled()) {
-      this.setAiCodeCompletion();
-    } else if (this.aiCodeCompletion) {
-      this.aiCodeCompletion.remove();
-      this.aiCodeCompletion = undefined;
-    }
-  }
-
-  private async onAidaAvailabilityChange(): Promise<void> {
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    if (currentAidaAvailability !== this.aidaAvailability) {
-      this.aidaAvailability = currentAidaAvailability;
-      if (this.aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
-        this.onAiCodeCompletionSettingChanged();
-        if (this.teaser) {
-          this.editor.dispatch({
-            effects: this.placeholderCompartment.reconfigure(
-                [TextEditor.AiCodeCompletionTeaserPlaceholder.aiCodeCompletionTeaserPlaceholder(this.teaser)])
-          });
-        }
-      } else if (this.aiCodeCompletion) {
-        this.aiCodeCompletion.remove();
-        this.aiCodeCompletion = undefined;
-        if (this.teaser) {
-          this.detachAiCodeCompletionTeaser();
-        }
-      }
-    }
-  }
-
-  async onAiCodeCompletionTeaserActionKeyDown(event: Event): Promise<void> {
-    if (this.teaser?.isShowing()) {
-      await this.teaser?.onAction(event);
-      void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-completion-teaser.fre');
-    }
-  }
-
-  onAiCodeCompletionTeaserDismissKeyDown(event: Event): void {
-    if (this.teaser?.isShowing()) {
-      this.teaser?.onDismiss(event);
-      void VisualLogging.logKeyDown(event.currentTarget, event, 'ai-code-completion-teaser.dismiss');
-    }
-  }
-
-  private detachAiCodeCompletionTeaser(): void {
-    this.editor.dispatch({
-      effects: this.placeholderCompartment.reconfigure([]),
-    });
-  }
-
-  private isAiCodeCompletionEnabled(): boolean {
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
-    if (!devtoolsLocale.locale.startsWith('en-')) {
-      return false;
-    }
-    if (aidaAvailability?.blockedByGeo) {
-      return false;
-    }
-    if (aidaAvailability?.blockedByAge) {
-      return false;
-    }
-    return Boolean(aidaAvailability?.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
-  }
-
   private editorSetForTest(): void {
   }
-
-  setAidaClientForTest(aidaClient: Host.AidaClient.AidaClient): void {
-    this.aidaClient = aidaClient;
-  }
 }
 
 export const enum Events {
   TEXT_CHANGED = 'TextChanged',
-  AI_CODE_COMPLETION_SUGGESTION_ACCEPTED = 'AiCodeCompletionSuggestionAccepted',
-  AI_CODE_COMPLETION_RESPONSE_RECEIVED = 'AiCodeCompletionResponseReceived',
-  AI_CODE_COMPLETION_REQUEST_TRIGGERED = 'AiCodeCompletionRequestTriggered'
 }
 
 export interface EventTypes {
   [Events.TEXT_CHANGED]: void;
-  [Events.AI_CODE_COMPLETION_SUGGESTION_ACCEPTED]: AiCodeCompletion.AiCodeCompletion.ResponseReceivedEvent;
-  [Events.AI_CODE_COMPLETION_RESPONSE_RECEIVED]: AiCodeCompletion.AiCodeCompletion.ResponseReceivedEvent;
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  [Events.AI_CODE_COMPLETION_REQUEST_TRIGGERED]: {};
 }

package/front_end/panels/console/ConsoleView.ts

@@ -41,15 +41,16 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import type * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import {createIcon} from '../../ui/kit/kit.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
@@ -336,10 +337,10 @@ export class ConsoleView extends UI.Widget.VBox implements
   private issueResolver = new IssuesManager.IssueResolver.IssueResolver();
   #isDetached = false;
   #onIssuesCountUpdateBound = this.#onIssuesCountUpdate.bind(this);
-  private aiCodeCompletionSetting =
-      Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
+  aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   private aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
   private aiCodeCompletionSummaryToolbar?: AiCodeCompletionSummaryToolbar;
+  private aiCodeCompletionCitations: Host.AidaClient.Citation[] = [];
 
   constructor(viewportThrottlerTimeout: number) {
     super();
@@ -506,7 +507,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.showSettingsPaneSetting.addChangeListener(
         () => settingsPane.classList.toggle('hidden', !this.showSettingsPaneSetting.get()));
 
-    this.pinPane = new ConsolePinPane(liveExpressionButton, () => this.prompt.focus());
+    this.pinPane = new ConsolePinPane(() => this.prompt.focus());
     this.pinPane.element.classList.add('console-view-pinpane');
     this.pinPane.element.classList.remove('flex-auto');
     this.pinPane.show(this.contentsElement);
@@ -555,23 +556,36 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.consoleMessages = [];
     this.consoleGroupStarts = [];
 
-    this.prompt = new ConsolePrompt();
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    this.aiCodeCompletionConfig =
+        AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionEnabled(devtoolsLocale.locale) ? {
+          completionContext: {
+            getPrefix: this.getConsoleMessageHistory.bind(this),
+            additionalFiles: [{
+              path: 'devtools-console-context.js',
+              content: AiCodeCompletion.AiCodeCompletion.consoleAdditionalContextFileContent,
+              included_reason: Host.AidaClient.Reason.RELATED_FILE,
+            }],
+            stopSequences: ['\n\n'],
+          },
+          onFeatureEnabled: () => {
+            this.setupAiCodeCompletion();
+          },
+          onFeatureDisabled: () => {
+            this.cleanupAiCodeCompletion();
+          },
+          onSuggestionAccepted: this.#onAiCodeCompletionSuggestionAccepted.bind(this),
+          onRequestTriggered: this.#onAiCodeCompletionRequestTriggered.bind(this),
+          onResponseReceived: this.#onAiCodeCompletionResponseReceived.bind(this),
+          panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE,
+        } :
+                                                                                                              undefined;
+
+    this.prompt = new ConsolePrompt(this.aiCodeCompletionConfig);
     this.prompt.show(this.promptElement);
     this.prompt.element.addEventListener('keydown', this.promptKeyDown.bind(this), true);
     this.prompt.addEventListener(ConsolePromptEvents.TEXT_CHANGED, this.promptTextChanged, this);
 
-    if (this.isAiCodeCompletionEnabled()) {
-      this.aiCodeCompletionSetting.addChangeListener(this.onAiCodeCompletionSettingChanged.bind(this));
-      this.onAiCodeCompletionSettingChanged();
-      this.prompt.addEventListener(
-          ConsolePromptEvents.AI_CODE_COMPLETION_SUGGESTION_ACCEPTED, this.#onAiCodeCompletionSuggestionAccepted, this);
-      this.prompt.addEventListener(
-          ConsolePromptEvents.AI_CODE_COMPLETION_REQUEST_TRIGGERED, this.#onAiCodeCompletionRequestTriggered, this);
-      this.prompt.addEventListener(
-          ConsolePromptEvents.AI_CODE_COMPLETION_RESPONSE_RECEIVED, this.#onAiCodeCompletionResponseReceived, this);
-      this.element.addEventListener('keydown', this.keyDown.bind(this));
-    }
-
     this.messagesElement.addEventListener('keydown', this.messagesKeyDown.bind(this), false);
     this.prompt.element.addEventListener('focusin', () => {
       if (this.isScrolledToBottom()) {
@@ -629,27 +643,25 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   createAiCodeCompletionSummaryToolbar(): void {
+    if (this.aiCodeCompletionSummaryToolbar) {
+      return;
+    }
     this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar({
       citationsTooltipId: CITATIONS_TOOLTIP_ID,
       disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
       spinnerTooltipId: SPINNER_TOOLTIP_ID
     });
-    this.aiCodeCompletionSummaryToolbarContainer = this.element.createChild('div');
+    this.aiCodeCompletionSummaryToolbarContainer =
+        this.element.createChild('div', 'ai-code-completion-summary-toolbar-container');
     this.aiCodeCompletionSummaryToolbar.show(this.aiCodeCompletionSummaryToolbarContainer, undefined, true);
   }
 
-  #onAiCodeCompletionSuggestionAccepted(
-      event: Common.EventTarget.EventTargetEvent<AiCodeCompletion.AiCodeCompletion.ResponseReceivedEvent>): void {
-    if (!this.aiCodeCompletionSummaryToolbar || !event.data.citations || event.data.citations.length === 0) {
+  #onAiCodeCompletionSuggestionAccepted(): void {
+    if (!this.aiCodeCompletionSummaryToolbar || this.aiCodeCompletionCitations.length === 0) {
       return;
     }
-    const citations: string[] = [];
-    event.data.citations.forEach(citation => {
-      const uri = citation.uri;
-      if (uri) {
-        citations.push(uri);
-      }
-    });
+    const citations =
+        this.aiCodeCompletionCitations.map(citation => citation.uri).filter((uri): uri is string => Boolean(uri));
     this.aiCodeCompletionSummaryToolbar.updateCitations(citations);
   }
 
@@ -657,7 +669,8 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.aiCodeCompletionSummaryToolbar?.setLoading(true);
   }
 
-  #onAiCodeCompletionResponseReceived(): void {
+  #onAiCodeCompletionResponseReceived(citations: Host.AidaClient.Citation[]): void {
+    this.aiCodeCompletionCitations = citations;
     this.aiCodeCompletionSummaryToolbar?.setLoading(false);
   }
 
@@ -1136,6 +1149,25 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.pendingBatchResize = false;
   }
 
+  getConsoleMessageHistory(): string {
+    const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
+    let consoleMessages = '';
+    if (currentExecutionContext) {
+      const consoleModel = currentExecutionContext.target().model(SDK.ConsoleModel.ConsoleModel);
+      if (consoleModel) {
+        let lastMessage = '';
+        for (const message of consoleModel.messages()) {
+          if (message.type !== SDK.ConsoleModel.FrontendMessageType.Command || message.messageText === lastMessage) {
+            continue;
+          }
+          lastMessage = message.messageText;
+          consoleMessages = consoleMessages + message.messageText + '\n\n';
+        }
+      }
+    }
+    return consoleMessages;
+  }
+
   private consoleCleared(): void {
     const hadFocus = this.viewport.element.hasFocus();
     this.cancelBuildHiddenCache();
@@ -1457,22 +1489,6 @@ export class ConsoleView extends UI.Widget.VBox implements
     }
   }
 
-  private async keyDown(event: Event): Promise<void> {
-    if (!this.prompt.teaser?.isShowing()) {
-      return;
-    }
-    const keyboardEvent = (event as KeyboardEvent);
-    if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent)) {
-      if (keyboardEvent.key === 'i') {
-        keyboardEvent.consume(true);
-        await this.prompt.onAiCodeCompletionTeaserActionKeyDown(event);
-      } else if (keyboardEvent.key === 'x') {
-        keyboardEvent.consume(true);
-        this.prompt.onAiCodeCompletionTeaserDismissKeyDown(event);
-      }
-    }
-  }
-
   private printResult(
       result: SDK.RemoteObject.RemoteObject|null, originatingConsoleMessage: SDK.ConsoleModel.ConsoleMessage,
       exceptionDetails?: Protocol.Runtime.ExceptionDetails): void {
@@ -1697,29 +1713,14 @@ export class ConsoleView extends UI.Widget.VBox implements
     return distanceToPromptEditorBottom <= 2;
   }
 
-  private onAiCodeCompletionSettingChanged(): void {
-    if (this.aiCodeCompletionSetting.get() && this.isAiCodeCompletionEnabled()) {
-      this.createAiCodeCompletionSummaryToolbar();
-    } else if (this.aiCodeCompletionSummaryToolbarContainer) {
-      this.aiCodeCompletionSummaryToolbarContainer.remove();
-      this.aiCodeCompletionSummaryToolbarContainer = undefined;
-      this.aiCodeCompletionSummaryToolbar = undefined;
-    }
+  private setupAiCodeCompletion(): void {
+    this.createAiCodeCompletionSummaryToolbar();
   }
 
-  private isAiCodeCompletionEnabled(): boolean {
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
-    if (!devtoolsLocale.locale.startsWith('en-')) {
-      return false;
-    }
-    if (aidaAvailability?.blockedByGeo) {
-      return false;
-    }
-    if (aidaAvailability?.blockedByAge) {
-      return false;
-    }
-    return Boolean(Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
+  private cleanupAiCodeCompletion(): void {
+    this.aiCodeCompletionSummaryToolbarContainer?.remove();
+    this.aiCodeCompletionSummaryToolbarContainer = undefined;
+    this.aiCodeCompletionSummaryToolbar = undefined;
   }
 }
 
@@ -1781,7 +1782,7 @@ export class ConsoleViewFilter {
 
     this.levelMenuButton =
         new UI.Toolbar.ToolbarMenuButton(this.appendLevelMenuItems.bind(this), undefined, undefined, 'log-level');
-    const levelMenuButtonInfoIcon = IconButton.Icon.create('info', 'console-sidebar-levels-info');
+    const levelMenuButtonInfoIcon = createIcon('info', 'console-sidebar-levels-info');
     levelMenuButtonInfoIcon.title = i18nString(UIStrings.overriddenByFilterSidebar);
     this.levelMenuButtonInfo = new UI.Toolbar.ToolbarItem(levelMenuButtonInfoIcon);
     this.levelMenuButtonInfo.setVisible(false);