chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/spinners/spinners.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -9,10 +11,9 @@ import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
-import * as Spinners from '../../../ui/components/spinners/spinners.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -173,7 +174,7 @@ const enum State {
   INSIGHT = 'insight',
   LOADING = 'loading',
   ERROR = 'error',
-  SETTING_DISABLED = 'setting-disabled',
+  SETTING_IS_NOT_TRUE = 'setting-is-not-true',
   CONSENT_REMINDER = 'consent-reminder',
   NOT_LOGGED_IN = 'not-logged-in',
   SYNC_IS_PAUSED = 'sync-is-paused',
@@ -198,7 +199,7 @@ type StateData = {
   sources: Source[],
   isPageReloadRecommended: boolean,
 }|{
-  type: State.SETTING_DISABLED,
+  type: State.SETTING_IS_NOT_TRUE,
 }|{
   type: State.NOT_LOGGED_IN,
 }|{
@@ -240,7 +241,7 @@ export class ConsoleInsight extends HTMLElement {
       case Host.AidaClient.AidaAccessPreconditions.AVAILABLE: {
         if (this.#consoleInsightsEnabledSetting?.disabled()) {
           this.#state = {
-            type: State.SETTING_DISABLED,
+            type: State.SETTING_IS_NOT_TRUE,
           };
           break;
         }
@@ -325,7 +326,7 @@ export class ConsoleInsight extends HTMLElement {
     if (this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true) {
       this.#getOnboardingCompletedSetting().set(true);
     }
-    if (this.#state.type === State.SETTING_DISABLED &&
+    if (this.#state.type === State.SETTING_IS_NOT_TRUE &&
         this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true) {
       this.#transitionTo({
         type: State.LOADING,
@@ -360,7 +361,7 @@ export class ConsoleInsight extends HTMLElement {
     }
     if (this.#consoleInsightsEnabledSetting?.getIfNotDisabled() !== true) {
       this.#transitionTo({
-        type: State.SETTING_DISABLED,
+        type: State.SETTING_IS_NOT_TRUE,
       });
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightsOptInTeaserShown);
       return;
@@ -531,7 +532,7 @@ export class ConsoleInsight extends HTMLElement {
 
   #renderSearchButton(): LitHtml.TemplateResult {
     // clang-format off
-    return html`<${Buttons.Button.Button.litTagName}
+    return html`<devtools-button
       @click=${this.#onSearch}
       class="search-button"
       .data=${
@@ -542,7 +543,7 @@ export class ConsoleInsight extends HTMLElement {
       }
     >
       ${i18nString(UIStrings.search)}
-    </${Buttons.Button.Button.litTagName}>`;
+    </devtools-button>`;
     // clang-format on
   }
 
@@ -574,14 +575,14 @@ export class ConsoleInsight extends HTMLElement {
         return html`
         <main jslog=${jslog}>
           ${
-            this.#state.validMarkdown ? html`<${MarkdownView.MarkdownView.MarkdownView.litTagName}
+            this.#state.validMarkdown ? html`<devtools-markdown-view
               .data=${{tokens: this.#state.tokens, renderer: this.#renderer} as MarkdownView.MarkdownView.MarkdownViewData}>
-            </${MarkdownView.MarkdownView.MarkdownView.litTagName}>`: this.#state.explanation
+            </devtools-markdown-view>`: this.#state.explanation
           }
           <details style="--list-height: ${(this.#state.sources.length + (this.#state.isPageReloadRecommended ? 1 : 0)) * 20}px;" jslog=${VisualLogging.expand('sources').track({click: true})}>
             <summary>${i18nString(UIStrings.inputData)}</summary>
-            <${ConsoleInsightSourcesList.litTagName} .sources=${this.#state.sources} .isPageReloadRecommended=${this.#state.isPageReloadRecommended}>
-            </${ConsoleInsightSourcesList.litTagName}>
+            <devtools-console-insight-sources-list .sources=${this.#state.sources} .isPageReloadRecommended=${this.#state.isPageReloadRecommended}>
+            </devtools-console-insight-sources-list>
           </details>
           <div class="buttons">
             ${this.#renderSearchButton()}
@@ -598,21 +599,21 @@ export class ConsoleInsight extends HTMLElement {
             <h3>Things to consider</h3>
             <div class="reminder-items">
               <div>
-                <${IconButton.Icon.Icon.litTagName} .data=${{
+                <devtools-icon .data=${{
                   iconName: 'google',
                   width: 'var(--sys-size-8)',
                   height: 'var(--sys-size-8)',
                 } as IconButton.Icon.IconData}>
-                </${IconButton.Icon.Icon.litTagName}>
+                </devtools-icon>
               </div>
               <div>The console message, associated stack trace, related source code, and the associated network headers are sent to Google to generate explanations. This data may be seen by human reviewers to improve this feature. Avoid sharing sensitive or personal information.</div>
               <div>
-                <${IconButton.Icon.Icon.litTagName} .data=${{
+                <devtools-icon .data=${{
                   iconName: 'policy',
                   width: 'var(--sys-size-8)',
                   height: 'var(--sys-size-8)',
                 } as IconButton.Icon.IconData}>
-                </${IconButton.Icon.Icon.litTagName}>
+                </devtools-icon>
               </div>
               <div>Use of this feature is subject to the
                 <x-link
@@ -628,12 +629,12 @@ export class ConsoleInsight extends HTMLElement {
                 >Google Privacy Policy</x-link>
               </div>
               <div>
-                <${IconButton.Icon.Icon.litTagName} .data=${{
+                <devtools-icon .data=${{
                   iconName: 'warning',
                   width: 'var(--sys-size-8)',
                   height: 'var(--sys-size-8)',
                 } as IconButton.Icon.IconData}>
-                </${IconButton.Icon.Icon.litTagName}>
+                </devtools-icon>
               </div>
               <div>
                 <x-link
@@ -645,7 +646,7 @@ export class ConsoleInsight extends HTMLElement {
             </div>
           </main>
         `;
-      case State.SETTING_DISABLED: {
+      case State.SETTING_IS_NOT_TRUE: {
         const settingsLink = document.createElement('button');
         settingsLink.textContent = i18nString(UIStrings.settingsLink);
         settingsLink.classList.add('link');
@@ -658,12 +659,12 @@ export class ConsoleInsight extends HTMLElement {
 
         return html`<main class="opt-in-teaser" jslog=${jslog}>
           <div class="badge">
-            <${IconButton.Icon.Icon.litTagName} .data=${{
+            <devtools-icon .data=${{
               iconName: 'lightbulb-spark',
               width: 'var(--sys-size-8)',
               height: 'var(--sys-size-8)',
             } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
           </div>
           <div>
             ${i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnInSettings, {PH1: settingsLink})}
@@ -688,7 +689,7 @@ export class ConsoleInsight extends HTMLElement {
 
   #renderDisclaimer(): LitHtml.LitTemplate {
     // clang-format off
-    return LitHtml.html`<span>
+    return html`<span>
       AI tools may generate inaccurate info that doesn't represent Google's views. Data sent to Google may be seen by human reviewers to improve this feature.
       <button class="link" role="link" @click=${() => UI.ViewManager.ViewManager.instance().showView('chrome-ai')}
         jslog=${VisualLogging.action('open-ai-settings').track({click: true})}
@@ -706,7 +707,7 @@ export class ConsoleInsight extends HTMLElement {
     // clang-format off
     switch (this.#state.type) {
       case State.LOADING:
-      case State.SETTING_DISABLED:
+      case State.SETTING_IS_NOT_TRUE:
         return LitHtml.nothing;
       case State.ERROR:
       case State.OFFLINE:
@@ -720,7 +721,7 @@ export class ConsoleInsight extends HTMLElement {
         return html`<footer jslog=${VisualLogging.section('footer')}>
         <div class="filler"></div>
         <div>
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             @click=${this.#onGoToChromeSettings}
             .data=${
               {
@@ -730,14 +731,14 @@ export class ConsoleInsight extends HTMLElement {
             }
           >
             ${UIStrings.updateSettings}
-          </${Buttons.Button.Button.litTagName}>
+          </devtools-button>
         </div>
       </footer>`;
       case State.CONSENT_REMINDER:
         return html`<footer jslog=${VisualLogging.section('footer')}>
           <div class="filler"></div>
           <div class="buttons">
-            <${Buttons.Button.Button.litTagName}
+            <devtools-button
               @click=${() => {
                 Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightsReminderTeaserSettingsLinkClicked);
                 void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
@@ -751,8 +752,8 @@ export class ConsoleInsight extends HTMLElement {
               }
             >
               Settings
-            </${Buttons.Button.Button.litTagName}>
-            <${Buttons.Button.Button.litTagName}
+            </devtools-button>
+            <devtools-button
               class='continue-button'
               @click=${this.#onConsentReminderConfirmed}
               .data=${
@@ -764,7 +765,7 @@ export class ConsoleInsight extends HTMLElement {
               }
               >
               Continue
-            </${Buttons.Button.Button.litTagName}>
+            </devtools-button>
           </div>
         </footer>`;
       case State.INSIGHT:
@@ -775,7 +776,7 @@ export class ConsoleInsight extends HTMLElement {
         <div class="filler"></div>
         <div class="rating">
           ${showThumbsUpDownButtons ? html`
-            <${Buttons.Button.Button.litTagName}
+            <devtools-button
               data-rating=${'true'}
               .data=${
                 {
@@ -788,8 +789,8 @@ export class ConsoleInsight extends HTMLElement {
                 } as Buttons.Button.ButtonData
               }
               @click=${this.#onRating}
-            ></${Buttons.Button.Button.litTagName}>
-            <${Buttons.Button.Button.litTagName}
+            ></devtools-button>
+            <devtools-button
               data-rating=${'false'}
               .data=${
                 {
@@ -802,9 +803,9 @@ export class ConsoleInsight extends HTMLElement {
                 } as Buttons.Button.ButtonData
               }
               @click=${this.#onRating}
-            ></${Buttons.Button.Button.litTagName}>
+            ></devtools-button>
           ` : LitHtml.nothing}
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             .data=${
               {
                 variant: Buttons.Button.Variant.ICON,
@@ -815,7 +816,7 @@ export class ConsoleInsight extends HTMLElement {
               } as Buttons.Button.ButtonData
             }
             @click=${this.#onReport}
-          ></${Buttons.Button.Button.litTagName}>
+          ></devtools-button>
         </div>
 
       </footer>`;
@@ -838,7 +839,7 @@ export class ConsoleInsight extends HTMLElement {
         return i18nString(UIStrings.error);
       case State.CONSENT_REMINDER:
         return 'Understand console messages with AI';
-      case State.SETTING_DISABLED:
+      case State.SETTING_IS_NOT_TRUE:
         return '';  // not reached
     }
   }
@@ -846,14 +847,14 @@ export class ConsoleInsight extends HTMLElement {
   #renderSpinner(): LitHtml.LitTemplate {
     // clang-format off
     if (this.#state.type === State.INSIGHT && !this.#state.completed) {
-      return html`<${Spinners.Spinner.Spinner.litTagName}></${Spinners.Spinner.Spinner.litTagName}>`;
+      return html`<devtools-spinner></devtools-spinner>`;
     }
     return LitHtml.nothing;
     // clang-format on
   }
 
   #renderHeader(): LitHtml.LitTemplate {
-    if (this.#state.type === State.SETTING_DISABLED) {
+    if (this.#state.type === State.SETTING_IS_NOT_TRUE) {
       return LitHtml.nothing;
     }
     const hasIcon = this.#state.type === State.CONSENT_REMINDER;
@@ -862,12 +863,12 @@ export class ConsoleInsight extends HTMLElement {
       <header>
         ${hasIcon ? html`
           <div class="header-icon-container">
-            <${IconButton.Icon.Icon.litTagName} .data=${{
+            <devtools-icon .data=${{
               iconName: 'lightbulb-spark',
               width: '18px',
               height: '18px',
             } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
           </div>`
         : LitHtml.nothing}
         <div class="filler">
@@ -877,7 +878,7 @@ export class ConsoleInsight extends HTMLElement {
           ${this.#renderSpinner()}
         </div>
         <div class="close-button">
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             .data=${
               {
                 variant: Buttons.Button.Variant.ICON,
@@ -888,7 +889,7 @@ export class ConsoleInsight extends HTMLElement {
             }
             jslog=${VisualLogging.close().track({click: true})}
             @click=${this.#onClose}
-          ></${Buttons.Button.Button.litTagName}>
+          ></devtools-button>
         </div>
       </header>
     `;
@@ -929,12 +930,12 @@ class ConsoleInsightSourcesList extends HTMLElement {
       <ul>
         ${Directives.repeat(this.#sources, item => item.value, item => {
           return html`<li><x-link class="link" title="${localizeType(item.type)} ${i18nString(UIStrings.opensInNewTab)}" href="data:text/plain,${encodeURIComponent(item.value)}" jslog=${VisualLogging.link('source-' + item.type).track({click: true})}>
-            <${IconButton.Icon.Icon.litTagName} name="open-externally"></${IconButton.Icon.Icon.litTagName}>
+            <devtools-icon name="open-externally"></devtools-icon>
             ${localizeType(item.type)}
           </x-link></li>`;
         })}
-        ${this.#isPageReloadRecommended ? LitHtml.html`<li class="source-disclaimer">
-          <${IconButton.Icon.Icon.litTagName} name="warning"></${IconButton.Icon.Icon.litTagName}>
+        ${this.#isPageReloadRecommended ? html`<li class="source-disclaimer">
+          <devtools-icon name="warning"></devtools-icon>
           ${i18nString(UIStrings.reloadRecommendation)}</li>` : LitHtml.nothing}
       </ul>
     `, this.#shadow, {

package/front_end/panels/explain/components/consoleInsight.css

@@ -305,15 +305,6 @@ h2:focus-visible {
   height: 20px;
 }
 
-devtools-icon[name="spark"] {
-  color: var(--sys-color-primary-bright);
-}
-
-devtools-icon[name="dog-paw"] {
-  width: 16px;
-  height: 16px;
-}
-
 .badge {
   background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
   border-radius: var(--sys-size-3);

package/front_end/panels/freestyler/AiAgent.ts

@@ -41,8 +41,8 @@ export interface TitleResponse {
 
 export interface ThoughtResponse {
   type: ResponseType.THOUGHT;
-  thought: string;
-  contextDetails?: ContextDetail[];
+  thought?: string;
+  contextDetails?: [ContextDetail, ...ContextDetail[]];
   rpcId?: number;
 }
 
@@ -71,6 +71,7 @@ export type ResponseData =
 export interface ContextDetail {
   title: string;
   text: string;
+  codeLang?: string;
 }
 
 export interface AidaBuildRequestOptions {
@@ -181,6 +182,11 @@ export abstract class AiAgent {
       }
     }
 
+    debugLog({
+      request,
+      response: rawResponse,
+    });
+
     this.#structuredLog.push({
       request: structuredClone(request),
       response,

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

@@ -0,0 +1,201 @@
+// 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 Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Workspace from '../../models/workspace/workspace.js';
+import {
+  createTarget,
+  describeWithEnvironment,
+  getGetHostConfigStub,
+} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {createContentProviderUISourceCodes} from '../../testing/UISourceCodeHelpers.js';
+
+import {DrJonesFileAgent, ResponseType} from './freestyler.js';
+
+describeWithEnvironment('DrJonesFileAgent', () => {
+  function mockHostConfig(modelId?: string, temperature?: number) {
+    getGetHostConfigStub({
+      devToolsAiAssistanceFileAgentDogfood: {
+        modelId,
+        temperature,
+      },
+    });
+  }
+
+  function mockAidaClient(
+      fetch: () => AsyncGenerator<Host.AidaClient.AidaResponse, void, void>,
+      ): Host.AidaClient.AidaClient {
+    return {
+      fetch,
+      registerClientEvent: () => Promise.resolve({}),
+    };
+  }
+
+  describe('buildRequest', () => {
+    beforeEach(() => {
+      sinon.restore();
+    });
+
+    it('builds a request with a model id', async () => {
+      mockHostConfig('test model');
+      const agent = new DrJonesFileAgent({
+        aidaClient: {} as Host.AidaClient.AidaClient,
+      });
+      assert.strictEqual(
+          agent.buildRequest({input: 'test input'}).options?.model_id,
+          'test model',
+      );
+    });
+
+    it('builds a request with a temperature', async () => {
+      mockHostConfig('test model', 1);
+      const agent = new DrJonesFileAgent({
+        aidaClient: {} as Host.AidaClient.AidaClient,
+      });
+      assert.strictEqual(
+          agent.buildRequest({input: 'test input'}).options?.temperature,
+          1,
+      );
+    });
+
+    it('structure matches the snapshot', () => {
+      mockHostConfig('test model');
+      sinon.stub(crypto, 'randomUUID').returns('sessionId' as `${string}-${string}-${string}-${string}-${string}`);
+      const agent = new DrJonesFileAgent({
+        aidaClient: {} as Host.AidaClient.AidaClient,
+        serverSideLoggingEnabled: true,
+      });
+      sinon.stub(agent, 'preamble').value('preamble');
+      agent.chatHistoryForTesting = new Map([[
+        0,
+        [
+          {
+            text: 'first',
+            entity: Host.AidaClient.Entity.UNKNOWN,
+          },
+          {
+            text: 'second',
+            entity: Host.AidaClient.Entity.SYSTEM,
+          },
+          {
+            text: 'third',
+            entity: Host.AidaClient.Entity.USER,
+          },
+        ],
+      ]]);
+      assert.deepStrictEqual(
+          agent.buildRequest({
+            input: 'test input',
+          }),
+          {
+            input: 'test input',
+            client: 'CHROME_DEVTOOLS',
+            preamble: 'preamble',
+            chat_history: [
+              {
+                entity: 0,
+                text: 'first',
+              },
+              {
+                entity: 2,
+                text: 'second',
+              },
+              {
+                entity: 1,
+                text: 'third',
+              },
+            ],
+            metadata: {
+              disable_user_content_logging: false,
+              string_session_id: 'sessionId',
+              user_tier: 2,
+            },
+            options: {
+              model_id: 'test model',
+              temperature: undefined,
+            },
+            client_feature: 9,
+            functionality_type: 1,
+          },
+      );
+    });
+  });
+  describeWithMockConnection('run', () => {
+    it('generates an answer', async () => {
+      async function* generateAnswer() {
+        yield {
+          explanation: 'This is the answer',
+          metadata: {
+            rpcGlobalId: 123,
+          },
+          completed: true,
+        };
+      }
+
+      const agent = new DrJonesFileAgent({
+        aidaClient: mockAidaClient(generateAnswer),
+      });
+
+      const url = 'http://example.com/script.js' as Platform.DevToolsPath.UrlString;
+      const target = createTarget({type: SDK.Target.Type.TAB});
+
+      const {project} = createContentProviderUISourceCodes({
+        items: [
+          {
+            url,
+            mimeType: 'application/javascript',
+            resourceType: Common.ResourceType.resourceTypes.Script,
+          },
+        ],
+        projectType: Workspace.Workspace.projectTypes.Network,
+        target,
+      });
+
+      const uiSourceCode = project.uiSourceCodeForURL(url);
+      const responses = await Array.fromAsync(agent.run('test', {selectedFile: uiSourceCode}));
+
+      assert.deepStrictEqual(responses, [
+        {
+          type: ResponseType.TITLE,
+          title: 'Analyzing file',
+        },
+        {
+          type: ResponseType.THOUGHT,
+          thought: 'Data used to generate this response',
+          contextDetails: [
+            {
+              title: 'Selected file',
+              text: `File Name: script.js
+URL: http://example.com/script.js
+File Content:
+`,
+            },
+          ],
+        },
+        {
+          type: ResponseType.ANSWER,
+          text: 'This is the answer',
+          rpcId: 123,
+        },
+      ]);
+
+      assert.deepStrictEqual(agent.chatHistoryForTesting, [
+        {
+          entity: 1,
+          text: `# Selected file\nFile Name: script.js
+URL: http://example.com/script.js
+File Content:\n\n\n# User request\n\ntest`,
+        },
+        {
+          entity: 2,
+          text: 'This is the answer',
+        },
+      ]);
+    });
+  });
+});