chrome-devtools-frontend 1.0.1545096 → 1.0.1547571

package/front_end/models/ai_assistance/AiHistoryStorage.ts

@@ -5,9 +5,7 @@
 
 import * as Common from '../../core/common/common.js';
 
-import {type ContextDetail, type ResponseData, ResponseType, type SerializedResponseData} from './agents/AiAgent.js';
-
-const MAX_TITLE_LENGTH = 80;
+import {ResponseType, type SerializedResponseData} from './agents/AiAgent.js';
 
 export const enum ConversationType {
   STYLING = 'freestyler',
@@ -16,8 +14,6 @@ export const enum ConversationType {
   PERFORMANCE = 'drjones-performance-full',
 }
 
-export const NOT_FOUND_IMAGE_DATA = '';
-
 export interface SerializedConversation {
   id: string;
   type: ConversationType;
@@ -35,173 +31,6 @@ export interface SerializedImage {
   data: string;
 }
 
-export class Conversation {
-  readonly id: string;
-  readonly type: ConversationType;
-  #isReadOnly: boolean;
-  readonly history: ResponseData[];
-  #isExternal: boolean;
-
-  static generateContextDetailsMarkdown(details: ContextDetail[]): string {
-    const detailsMarkdown: string[] = [];
-    for (const detail of details) {
-      const text = `\`\`\`\`${detail.codeLang || ''}\n${detail.text.trim()}\n\`\`\`\``;
-      detailsMarkdown.push(`**${detail.title}:**\n${text}`);
-    }
-    return detailsMarkdown.join('\n\n');
-  }
-
-  constructor(
-      type: ConversationType, data: ResponseData[] = [], id: string = crypto.randomUUID(), isReadOnly = true,
-      isExternal = false) {
-    this.type = type;
-    this.id = id;
-    this.#isReadOnly = isReadOnly;
-    this.#isExternal = isExternal;
-    this.history = this.#reconstructHistory(data);
-  }
-
-  get isReadOnly(): boolean {
-    return this.#isReadOnly;
-  }
-
-  get title(): string|undefined {
-    const query = this.history.find(response => response.type === ResponseType.USER_QUERY)?.query;
-
-    if (!query) {
-      return;
-    }
-
-    if (this.#isExternal) {
-      return `[External] ${query.substring(0, MAX_TITLE_LENGTH - 11)}${
-          query.length > MAX_TITLE_LENGTH - 11 ? '…' : ''}`;
-    }
-    return `${query.substring(0, MAX_TITLE_LENGTH)}${query.length > MAX_TITLE_LENGTH ? '…' : ''}`;
-  }
-
-  get isEmpty(): boolean {
-    return this.history.length === 0;
-  }
-
-  #reconstructHistory(historyWithoutImages: ResponseData[]): ResponseData[] {
-    const imageHistory = AiHistoryStorage.instance().getImageHistory();
-    if (imageHistory && imageHistory.length > 0) {
-      const history: ResponseData[] = [];
-      for (const data of historyWithoutImages) {
-        if (data.type === ResponseType.USER_QUERY && data.imageId) {
-          const image = imageHistory.find(item => item.id === data.imageId);
-          const inlineData = image ? {data: image.data, mimeType: image.mimeType} :
-                                     {data: NOT_FOUND_IMAGE_DATA, mimeType: 'image/jpeg'};
-          history.push({...data, imageInput: {inlineData}});
-        } else {
-          history.push(data);
-        }
-      }
-      return history;
-    }
-    return historyWithoutImages;
-  }
-
-  getConversationMarkdown(): string {
-    const contentParts: string[] = [];
-    contentParts.push(
-        '# Exported Chat from Chrome DevTools AI Assistance\n\n' +
-            `**Export Timestamp (UTC):** ${new Date().toISOString()}\n\n` +
-            '---',
-    );
-    for (const item of this.history) {
-      switch (item.type) {
-        case ResponseType.USER_QUERY: {
-          contentParts.push(`## User\n\n${item.query}`);
-          if (item.imageInput) {
-            contentParts.push('User attached an image');
-          }
-          contentParts.push('## AI');
-          break;
-        }
-        case ResponseType.CONTEXT: {
-          contentParts.push(`### ${item.title}`);
-          if (item.details && item.details.length > 0) {
-            contentParts.push(Conversation.generateContextDetailsMarkdown(item.details));
-          }
-          break;
-        }
-        case ResponseType.TITLE: {
-          contentParts.push(`### ${item.title}`);
-          break;
-        }
-        case ResponseType.THOUGHT: {
-          contentParts.push(`${item.thought}`);
-          break;
-        }
-        case ResponseType.ACTION: {
-          // We want to export only actions with output field
-          if (!item.output) {
-            break;
-          }
-          if (item.code) {
-            contentParts.push(`**Code executed:**\n\`\`\`\n${item.code.trim()}\n\`\`\``);
-          }
-          contentParts.push(`**Data returned:**\n\`\`\`\n${item.output}\n\`\`\``);
-          break;
-        }
-        case ResponseType.ANSWER: {
-          if (item.complete) {
-            contentParts.push(`### Answer\n\n${item.text.trim()}`);
-          }
-          break;
-        }
-      }
-    }
-    return contentParts.join('\n\n');
-  }
-
-  archiveConversation(): void {
-    this.#isReadOnly = true;
-  }
-
-  async addHistoryItem(item: ResponseData): Promise<void> {
-    this.history.push(item);
-    await AiHistoryStorage.instance().upsertHistoryEntry(this.serialize());
-    if (item.type === ResponseType.USER_QUERY) {
-      if (item.imageId && item.imageInput && 'inlineData' in item.imageInput) {
-        const inlineData = item.imageInput.inlineData;
-        await AiHistoryStorage.instance().upsertImage(
-            {id: item.imageId, data: inlineData.data, mimeType: inlineData.mimeType});
-      }
-    }
-  }
-
-  serialize(): SerializedConversation {
-    return {
-      id: this.id,
-      history: this.history.map(item => {
-        if (item.type === ResponseType.USER_QUERY) {
-          return {...item, imageInput: undefined};
-        }
-        // Remove the `confirm()`-function because `structuredClone()` throws on functions
-        if (item.type === ResponseType.SIDE_EFFECT) {
-          return {...item, confirm: undefined};
-        }
-        return item;
-      }),
-      type: this.type,
-      isExternal: this.#isExternal,
-    };
-  }
-
-  static fromSerializedConversation(serializedConversation: SerializedConversation): Conversation {
-    const history = serializedConversation.history.map(entry => {
-      if (entry.type === ResponseType.SIDE_EFFECT) {
-        return {...entry, confirm: () => {}};
-      }
-      return entry;
-    });
-    return new Conversation(
-        serializedConversation.type, history, serializedConversation.id, true, serializedConversation.isExternal);
-  }
-}
-
 let instance: AiHistoryStorage|null = null;
 
 const DEFAULT_MAX_STORAGE_SIZE = 50 * 1024 * 1024;

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -6,15 +6,12 @@ import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
 
 let builtInAiInstance: BuiltInAi|undefined;
-let availability: LanguageModelAvailability|undefined;
-let hasGpu: boolean|undefined;
-let isFirstRun = true;
 
 export interface LanguageModel {
   promptStreaming: (arg0: string, opts?: {
     signal?: AbortSignal,
   }) => AsyncGenerator<string>;
-  clone: () => LanguageModel;
+  clone: () => Promise<LanguageModel>;
   destroy: () => void;
 }
 
@@ -27,155 +24,112 @@ export const enum LanguageModelAvailability {
 }
 
 export class BuiltInAi {
-  #consoleInsightsSession: LanguageModel;
+  #availability: LanguageModelAvailability|null = null;
+  #hasGpu: boolean;
+  #consoleInsightsSession?: LanguageModel;
+  initDoneForTesting: Promise<void>;
 
-  static async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
+  static instance(): BuiltInAi {
+    if (builtInAiInstance === undefined) {
+      builtInAiInstance = new BuiltInAi();
+    }
+    return builtInAiInstance;
+  }
+
+  constructor() {
+    this.#hasGpu = this.#isGpuAvailable();
+    this.initDoneForTesting =
+        this.getLanguageModelAvailability().then(() => this.initialize()).then(() => this.#sendAvailabilityMetrics());
+  }
+
+  async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
     if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.enabled) {
-      return LanguageModelAvailability.DISABLED;
+      this.#availability = LanguageModelAvailability.DISABLED;
+      return this.#availability;
     }
     try {
       // @ts-expect-error
-      availability = await window.LanguageModel.availability({expectedOutputs: [{type: 'text', languages: ['en']}]}) as
-          LanguageModelAvailability;
-      return availability;
+      this.#availability = await window.LanguageModel.availability(
+                               {expectedOutputs: [{type: 'text', languages: ['en']}]}) as LanguageModelAvailability;
     } catch {
-      return LanguageModelAvailability.UNAVAILABLE;
+      this.#availability = LanguageModelAvailability.UNAVAILABLE;
     }
+    return this.#availability;
   }
 
-  static cachedIsAvailable(): boolean {
-    return availability === LanguageModelAvailability.AVAILABLE &&
-        (hasGpu || Boolean(Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu));
-  }
-
-  static isGpuAvailable(): boolean {
-    const hasGpuHelper = (): boolean => {
-      const canvas = document.createElement('canvas');
-      try {
-        const webgl = canvas.getContext('webgl');
-        if (!webgl) {
-          return false;
-        }
-        const debugInfo = webgl.getExtension('WEBGL_debug_renderer_info');
-        if (!debugInfo) {
-          return false;
-        }
-        const renderer = webgl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
-        if (renderer.includes('SwiftShader')) {
-          return false;
-        }
-      } catch {
+  #isGpuAvailable(): boolean {
+    const canvas = document.createElement('canvas');
+    try {
+      const webgl = canvas.getContext('webgl');
+      if (!webgl) {
         return false;
       }
-      return true;
-    };
-
-    if (hasGpu !== undefined) {
-      return hasGpu;
+      const debugInfo = webgl.getExtension('WEBGL_debug_renderer_info');
+      if (!debugInfo) {
+        return false;
+      }
+      const renderer = webgl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+      if (renderer.includes('SwiftShader')) {
+        return false;
+      }
+    } catch {
+      return false;
     }
-    hasGpu = hasGpuHelper();
-    return hasGpu;
+    return true;
   }
 
-  private constructor(consoleInsightsSession: LanguageModel) {
-    this.#consoleInsightsSession = consoleInsightsSession;
+  hasSession(): boolean {
+    return Boolean(this.#consoleInsightsSession);
   }
 
-  static async instance(): Promise<BuiltInAi|undefined> {
-    if (builtInAiInstance === undefined) {
-      if (isFirstRun) {
-        const languageModelAvailability = await BuiltInAi.getLanguageModelAvailability();
-        const hasGpu = BuiltInAi.isGpuAvailable();
-        if (hasGpu) {
-          switch (languageModelAvailability) {
-            case LanguageModelAvailability.UNAVAILABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_HAS_GPU);
-              break;
-            case LanguageModelAvailability.DOWNLOADABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_HAS_GPU);
-              break;
-            case LanguageModelAvailability.DOWNLOADING:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_HAS_GPU);
-              break;
-            case LanguageModelAvailability.AVAILABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_HAS_GPU);
-              break;
-            case LanguageModelAvailability.DISABLED:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_HAS_GPU);
-              break;
-          }
-        } else {
-          switch (languageModelAvailability) {
-            case LanguageModelAvailability.UNAVAILABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_NO_GPU);
-              break;
-            case LanguageModelAvailability.DOWNLOADABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_NO_GPU);
-              break;
-            case LanguageModelAvailability.DOWNLOADING:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_NO_GPU);
-              break;
-            case LanguageModelAvailability.AVAILABLE:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_NO_GPU);
-              break;
-            case LanguageModelAvailability.DISABLED:
-              Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_NO_GPU);
-              break;
-          }
-        }
-        isFirstRun = false;
-        if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !hasGpu) {
-          return undefined;
-        }
-        if (languageModelAvailability !== LanguageModelAvailability.AVAILABLE) {
-          return undefined;
-        }
-      } else {
-        if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !BuiltInAi.isGpuAvailable()) {
-          return undefined;
-        }
-        if ((await BuiltInAi.getLanguageModelAvailability()) !== LanguageModelAvailability.AVAILABLE) {
-          return undefined;
-        }
-      }
+  async initialize(): Promise<void> {
+    if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
+      return;
+    }
+    if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+      return;
+    }
+    await this.#createSession();
+  }
+
+  async #createSession(): Promise<void> {
+    try {
+      // @ts-expect-error
+      this.#consoleInsightsSession = await window.LanguageModel.create({
+        initialPrompts: [{
+          role: 'system',
+          content: `
+You are an expert web developer. Your goal is to help a human web developer who
+is using Chrome DevTools to debug a web site or web app. The Chrome DevTools
+console is showing a message which is either an error or a warning. Please help
+the user understand the problematic console message.
 
-      try {
-        // @ts-expect-error
-        const consoleInsightsSession = await window.LanguageModel.create({
-          initialPrompts: [{
-            role: 'system',
-            content: `
-  You are an expert web developer. Your goal is to help a human web developer who
-  is using Chrome DevTools to debug a web site or web app. The Chrome DevTools
-  console is showing a message which is either an error or a warning. Please help
-  the user understand the problematic console message.
-
-  Your instructions are as follows:
-    - Explain the reason why the error or warning is showing up.
-    - The explanation has a maximum length of 200 characters. Anything beyond this
-      length will be cut off. Make sure that your explanation is at most 200 characters long.
-    - Your explanation should not end in the middle of a sentence.
-    - Your explanation should consist of a single paragraph only. Do not include any
-      headings or code blocks. Only write a single paragraph of text.
-    - Your response should be concise and to the point. Avoid lengthy explanations
-      or unnecessary details.
-            `
-          }],
-          expectedInputs: [{
-            type: 'text',
-            languages: ['en'],
-          }],
-          expectedOutputs: [{
-            type: 'text',
-            languages: ['en'],
-          }],
-        }) as LanguageModel;
-        builtInAiInstance = new BuiltInAi(consoleInsightsSession);
-      } catch {
-        return undefined;
+Your instructions are as follows:
+  - Explain the reason why the error or warning is showing up.
+  - The explanation has a maximum length of 200 characters. Anything beyond this
+    length will be cut off. Make sure that your explanation is at most 200 characters long.
+  - Your explanation should not end in the middle of a sentence.
+  - Your explanation should consist of a single paragraph only. Do not include any
+    headings or code blocks. Only write a single paragraph of text.
+  - Your response should be concise and to the point. Avoid lengthy explanations
+    or unnecessary details.
+          `
+        }],
+        expectedInputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+        expectedOutputs: [{
+          type: 'text',
+          languages: ['en'],
+        }],
+      });
+      if (this.#availability !== LanguageModelAvailability.AVAILABLE) {
+        void this.getLanguageModelAvailability();
       }
+    } catch (e) {
+      console.error('Error when creating LanguageModel session', e.message);
     }
-    return builtInAiInstance;
   }
 
   static removeInstance(): void {
@@ -183,6 +137,9 @@ export class BuiltInAi {
   }
 
   async * getConsoleInsight(prompt: string, abortController: AbortController): AsyncGenerator<string> {
+    if (!this.#consoleInsightsSession) {
+      return;
+    }
     // Clone the session to start a fresh conversation for each answer. Otherwise
     // previous dialog would pollute the context resulting in worse answers.
     let session: LanguageModel|null = null;
@@ -200,4 +157,44 @@ export class BuiltInAi {
       }
     }
   }
+
+  #sendAvailabilityMetrics(): void {
+    if (this.#hasGpu) {
+      switch (this.#availability) {
+        case LanguageModelAvailability.UNAVAILABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_HAS_GPU);
+          break;
+        case LanguageModelAvailability.DOWNLOADABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_HAS_GPU);
+          break;
+        case LanguageModelAvailability.DOWNLOADING:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_HAS_GPU);
+          break;
+        case LanguageModelAvailability.AVAILABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_HAS_GPU);
+          break;
+        case LanguageModelAvailability.DISABLED:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_HAS_GPU);
+          break;
+      }
+    } else {
+      switch (this.#availability) {
+        case LanguageModelAvailability.UNAVAILABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.UNAVAILABLE_NO_GPU);
+          break;
+        case LanguageModelAvailability.DOWNLOADABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADABLE_NO_GPU);
+          break;
+        case LanguageModelAvailability.DOWNLOADING:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DOWNLOADING_NO_GPU);
+          break;
+        case LanguageModelAvailability.AVAILABLE:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.AVAILABLE_NO_GPU);
+          break;
+        case LanguageModelAvailability.DISABLED:
+          Host.userMetrics.builtInAiAvailability(Host.UserMetrics.BuiltInAiAvailability.DISABLED_NO_GPU);
+          break;
+      }
+    }
+  }
 }

package/front_end/models/ai_assistance/ChangeManager.ts

@@ -35,6 +35,15 @@ export class ChangeManager {
   readonly #stylesheetChanges = new Map<Protocol.CSS.StyleSheetId, Change[]>();
   readonly #backupStylesheetChanges = new Map<Protocol.CSS.StyleSheetId, Change[]>();
 
+  constructor() {
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel,
+        SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+        this.clear,
+        this,
+    );
+  }
+
   async stashChanges(): Promise<void> {
     for (const [cssModel, stylesheetMap] of this.#cssModelToStylesheetId.entries()) {
       const stylesheetIds = Array.from(stylesheetMap.values());