chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/explain/components/ConsoleInsight.test.ts

@@ -13,7 +13,10 @@ import {describeWithEnvironment, getGetHostConfigStub} from '../../../testing/En
 import * as Explain from '../explain.js';
 
 describeWithEnvironment('ConsoleInsight', () => {
+  let component: Explain.ConsoleInsight|undefined;
+
   afterEach(() => {
+    component?.remove();
     Common.Settings.settingForTest('console-insights-enabled').set(true);
     Common.Settings.settingForTest('console-insights-onboarding-finished').set(true);
   });
@@ -52,9 +55,9 @@ describeWithEnvironment('ConsoleInsight', () => {
     await new Promise(resolve => setTimeout(resolve, 0));
   }
 
-  it('shows opt-in teaser when setting is disabled', async () => {
+  it('shows opt-in teaser when setting is turned off', async () => {
     Common.Settings.settingForTest('console-insights-enabled').set(false);
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -67,6 +70,51 @@ describeWithEnvironment('ConsoleInsight', () => {
     );
   });
 
+  it('shows opt-in teaser when blocked by age', async () => {
+    const stub = getGetHostConfigStub({
+      aidaAvailability: {
+        blockedByAge: true,
+      },
+      devToolsConsoleInsights: {
+        enabled: true,
+      },
+    });
+    component = new Explain.ConsoleInsight(
+        getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
+    renderElementIntoDOM(component);
+    await drainMicroTasks();
+    assert.isNotNull(component.shadowRoot);
+    assert.deepEqual(
+        getCleanTextContentFromElements(component.shadowRoot, 'main'),
+        [
+          'Turn on Console insights in Settings to receive AI assistance for understanding and addressing console warnings and errors. Learn more',
+        ],
+    );
+    stub.restore();
+  });
+
+  it('generates an explanation when the user logs in', async () => {
+    component = new Explain.ConsoleInsight(
+        getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL);
+    renderElementIntoDOM(component);
+    await drainMicroTasks();
+    assert.isNotNull(component.shadowRoot);
+    assert.deepEqual(
+        getCleanTextContentFromElements(component.shadowRoot, 'main'),
+        [
+          'This feature is only available when you sign into Chrome with your Google account.',
+        ],
+    );
+
+    const stub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions')
+                     .returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
+    Host.AidaClient.HostConfigTracker.instance().dispatchEventToListeners(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED);
+    await drainMicroTasks();
+    assert.deepEqual(getCleanTextContentFromElements(component.shadowRoot, 'h2'), ['Explanation']);
+    stub.restore();
+  });
+
   it('shows opt-in teaser when setting is disabled via disabledCondition', async () => {
     const setting = Common.Settings.settingForTest('console-insights-enabled');
     setting.setRegistration({
@@ -77,7 +125,7 @@ describeWithEnvironment('ConsoleInsight', () => {
         return {disabled: true, reason: 'disabled for test'};
       },
     });
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -98,7 +146,7 @@ describeWithEnvironment('ConsoleInsight', () => {
 
   it('shows reminder on first run of console insights', async () => {
     Common.Settings.settingForTest('console-insights-onboarding-finished').set(false);
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -118,7 +166,7 @@ describeWithEnvironment('ConsoleInsight', () => {
     const stub = getGetHostConfigStub({});
     const actionTaken = sinon.stub(Host.userMetrics, 'actionTaken');
     const aidaClient = getTestAidaClient();
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), aidaClient, Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -158,7 +206,7 @@ describeWithEnvironment('ConsoleInsight', () => {
         enabled: true,
       },
     });
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -171,7 +219,7 @@ describeWithEnvironment('ConsoleInsight', () => {
   });
 
   it('report if the user is not logged in', async () => {
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -180,7 +228,7 @@ describeWithEnvironment('ConsoleInsight', () => {
   });
 
   it('report if the navigator is offline', async () => {
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.NO_INTERNET);
     renderElementIntoDOM(component);
     await drainMicroTasks();

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -214,7 +214,6 @@ export class ConsoleInsight extends HTMLElement {
     return new ConsoleInsight(promptBuilder, aidaClient, aidaAvailability);
   }
 
-  static readonly litTagName = LitHtml.literal`devtools-console-insight`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #promptBuilder: PublicPromptBuilder;
@@ -228,6 +227,8 @@ export class ConsoleInsight extends HTMLElement {
   #selectedRating?: boolean;
 
   #consoleInsightsEnabledSetting: Common.Settings.Setting<boolean>|undefined;
+  #aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
+  #boundOnAidaAvailabilityChange: () => Promise<void>;
 
   constructor(
       promptBuilder: PublicPromptBuilder, aidaClient: PublicAidaClient,
@@ -235,60 +236,55 @@ export class ConsoleInsight extends HTMLElement {
     super();
     this.#promptBuilder = promptBuilder;
     this.#aidaClient = aidaClient;
+    this.#aidaAvailability = aidaAvailability;
     this.#consoleInsightsEnabledSetting = this.#getConsoleInsightsEnabledSetting();
 
-    switch (aidaAvailability) {
+    this.#state = this.#getStateFromAidaAvailability();
+    this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
+    this.#render();
+    // Stop keyboard event propagation to avoid Console acting on the events
+    // inside the insight component.
+    this.addEventListener('keydown', e => {
+      e.stopPropagation();
+    });
+    this.addEventListener('keyup', e => {
+      e.stopPropagation();
+    });
+    this.addEventListener('keypress', e => {
+      e.stopPropagation();
+    });
+    this.addEventListener('click', e => {
+      e.stopPropagation();
+    });
+    this.focus();
+  }
+
+  #getStateFromAidaAvailability(): StateData {
+    switch (this.#aidaAvailability) {
       case Host.AidaClient.AidaAccessPreconditions.AVAILABLE: {
-        if (this.#consoleInsightsEnabledSetting?.disabled()) {
-          this.#state = {
-            type: State.SETTING_IS_NOT_TRUE,
-          };
-          break;
-        }
         // Allows skipping the consent reminder if the user enabled the feature via settings in the current session
         const skipReminder =
             Common.Settings.Settings.instance()
                 .createSetting('console-insights-skip-reminder', false, Common.Settings.SettingStorageType.SESSION)
                 .get();
-        this.#state = {
+        return {
           type: State.LOADING,
           consentOnboardingCompleted: this.#getOnboardingCompletedSetting().get() || skipReminder,
         };
-        break;
       }
       case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
-        this.#state = {
+        return {
           type: State.NOT_LOGGED_IN,
         };
-        break;
       case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED:
-        this.#state = {
+        return {
           type: State.SYNC_IS_PAUSED,
         };
-        break;
       case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET:
-        this.#state = {
+        return {
           type: State.OFFLINE,
         };
-        break;
     }
-
-    this.#render();
-    // Stop keyboard event propagation to avoid Console acting on the events
-    // inside the insight component.
-    this.addEventListener('keydown', e => {
-      e.stopPropagation();
-    });
-    this.addEventListener('keyup', e => {
-      e.stopPropagation();
-    });
-    this.addEventListener('keypress', e => {
-      e.stopPropagation();
-    });
-    this.addEventListener('click', e => {
-      e.stopPropagation();
-    });
-    this.focus();
   }
 
   // off -> entrypoints are shown, and point to the AI setting panel where the setting can be turned on
@@ -311,15 +307,36 @@ export class ConsoleInsight extends HTMLElement {
     this.#shadow.adoptedStyleSheets = [styles, Input.checkboxStyles];
     this.classList.add('opening');
     this.#consoleInsightsEnabledSetting?.addChangeListener(this.#onConsoleInsightsSettingChanged, this);
+    const blockedByAge = Common.Settings.Settings.instance().getHostConfig().aidaAvailability?.blockedByAge === true;
     if (this.#state.type === State.LOADING && this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true &&
-        this.#state.consentOnboardingCompleted) {
+        !blockedByAge && this.#state.consentOnboardingCompleted) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.GeneratingInsightWithoutDisclaimer);
     }
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    // If AIDA availability has changed while the component was disconnected, we need to update.
+    void this.#onAidaAvailabilityChange();
+    // The setting might have been turned on/off while the component was disconnected.
+    // Update the state, unless the current state is already terminal (`INSIGHT` or `ERROR`).
+    if (this.#state.type !== State.INSIGHT && this.#state.type !== State.ERROR) {
+      this.#state = this.#getStateFromAidaAvailability();
+    }
     void this.#generateInsightIfNeeded();
   }
 
   disconnectedCallback(): void {
     this.#consoleInsightsEnabledSetting?.removeChangeListener(this.#onConsoleInsightsSettingChanged, this);
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+  }
+
+  async #onAidaAvailabilityChange(): Promise<void> {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      this.#state = this.#getStateFromAidaAvailability();
+      void this.#generateInsightIfNeeded();
+    }
   }
 
   #onConsoleInsightsSettingChanged(): void {
@@ -359,7 +376,8 @@ export class ConsoleInsight extends HTMLElement {
     if (this.#state.type !== State.LOADING) {
       return;
     }
-    if (this.#consoleInsightsEnabledSetting?.getIfNotDisabled() !== true) {
+    const blockedByAge = Common.Settings.Settings.instance().getHostConfig().aidaAvailability?.blockedByAge === true;
+    if (this.#consoleInsightsEnabledSetting?.getIfNotDisabled() !== true || blockedByAge) {
       this.#transitionTo({
         type: State.SETTING_IS_NOT_TRUE,
       });
@@ -914,7 +932,6 @@ export class ConsoleInsight extends HTMLElement {
 }
 
 class ConsoleInsightSourcesList extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-console-insight-sources-list`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #sources: Source[] = [];
   #isPageReloadRecommended = false;

package/front_end/panels/explain/explain-meta.ts

@@ -30,11 +30,7 @@ const UIStrings = {
    * @description Message shown to the user if the DevTools locale is not
    * supported.
    */
-  wrongLocale: 'To use this feature, update your Language preference in DevTools Settings to English',
-  /**
-   * @description Message shown to the user if the age check is not successful.
-   */
-  ageRestricted: 'This feature is only available to users who are 18 years of age or older',
+  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings',
   /**
    * @description Message shown to the user if the user's region is not
    * supported.
@@ -88,10 +84,6 @@ function isLocaleRestricted(): boolean {
   return !devtoolsLocale.locale.startsWith('en-');
 }
 
-function isAgeRestricted(config?: Root.Runtime.HostConfig): boolean {
-  return config?.aidaAvailability?.blockedByAge === true;
-}
-
 function isGeoRestricted(config?: Root.Runtime.HostConfig): boolean {
   return config?.aidaAvailability?.blockedByGeo === true;
 }
@@ -116,9 +108,6 @@ Common.Settings.registerSettingExtension({
     if (isLocaleRestricted()) {
       return {disabled: true, reason: i18nString(UIStrings.wrongLocale)};
     }
-    if (isAgeRestricted(config)) {
-      return {disabled: true, reason: i18nString(UIStrings.ageRestricted)};
-    }
     if (isGeoRestricted(config)) {
       return {disabled: true, reason: i18nString(UIStrings.geoRestricted)};
     }

package/front_end/panels/freestyler/AiAgent.test.ts

@@ -2,24 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Host from '../../core/host/host.js';
+import type * as Host from '../../core/host/host.js';
 import {
   describeWithEnvironment,
 } from '../../testing/EnvironmentHelpers.js';
 
 import * as Freestyler from './freestyler.js';
 
-const {AiAgent} = Freestyler;
+const {AiAgent, ResponseType} = Freestyler;
 
-class AiAgentMock extends AiAgent {
+class AiAgentMock extends AiAgent<unknown> {
+  type = Freestyler.AgentType.FREESTYLER;
   override preamble = 'preamble';
 
+  // eslint-disable-next-line require-yield
+  override async * handleContextDetails(): AsyncGenerator<Freestyler.ContextResponse, void, void> {
+    return;
+  }
+
   clientFeature: Host.AidaClient.ClientFeature = 0;
   userTier: undefined;
 
   options: Freestyler.AidaRequestOptions = {
     temperature: 1,
-    model_id: 'test model',
+    modelId: 'test model',
   };
 }
 
@@ -105,7 +111,7 @@ describeWithEnvironment('AiAgent', () => {
         aidaClient: {} as Host.AidaClient.AidaClient,
       });
       const request = agent.buildRequest({input: 'test input'});
-      assert.strictEqual(request.metadata?.string_session_id, 'session_id');
+      assert.strictEqual(request.metadata?.string_session_id, 'sessionId');
     });
 
     it('builds a request with preamble', async () => {
@@ -122,15 +128,17 @@ describeWithEnvironment('AiAgent', () => {
       const agent = new AiAgentMock({
         aidaClient: {} as Host.AidaClient.AidaClient,
       });
-      agent.chatHistoryForTesting = new Map([[
-        0,
+      agent.chatNewHistoryForTesting = new Map([
         [
-          {
-            text: 'test',
-            entity: Host.AidaClient.Entity.USER,
-          },
+          0,
+          [
+            {
+              type: ResponseType.QUERYING,
+              query: 'test',
+            },
+          ],
         ],
-      ]]);
+      ]);
 
       const request = agent.buildRequest({
         input: 'test input',
@@ -145,4 +153,76 @@ describeWithEnvironment('AiAgent', () => {
       ]);
     });
   });
+
+  describe('runFromHistory', () => {
+    it('should run', async () => {
+      const agent = new AiAgentMock({
+        aidaClient: {} as Host.AidaClient.AidaClient,
+      });
+      agent.chatNewHistoryForTesting = new Map([
+        [
+          0,
+          [
+            {
+              type: ResponseType.USER_QUERY,
+              query: 'first question',
+            },
+            {
+              type: ResponseType.QUERYING,
+              query: 'first enhancements',
+            },
+            {
+              type: ResponseType.ANSWER,
+              text: 'first answer',
+            },
+          ],
+        ],
+        [
+          1,
+          [
+            {
+              type: ResponseType.USER_QUERY,
+              query: 'second question',
+            },
+            {
+              type: ResponseType.QUERYING,
+              query: 'second enhancements',
+            },
+            {
+              type: ResponseType.ANSWER,
+              text: 'second answer',
+            },
+          ],
+        ],
+      ]);
+
+      const responses = await Array.fromAsync(agent.runFromHistory());
+      assert.deepStrictEqual(responses, [
+        {
+          type: ResponseType.USER_QUERY,
+          query: 'first question',
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'first enhancements',
+        },
+        {
+          type: ResponseType.ANSWER,
+          text: 'first answer',
+        },
+        {
+          type: ResponseType.USER_QUERY,
+          query: 'second question',
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'second enhancements',
+        },
+        {
+          type: ResponseType.ANSWER,
+          text: 'second answer',
+        },
+      ]);
+    });
+  });
 });