chrome-devtools-frontend 1.0.1544076 → 1.0.1547147

package/front_end/models/ai_assistance/AiConversation.ts

@@ -0,0 +1,188 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {type ContextDetail, type ResponseData, ResponseType} from './agents/AiAgent.js';
+import {AiHistoryStorage, type ConversationType, type SerializedConversation} from './AiHistoryStorage.js';
+
+export const NOT_FOUND_IMAGE_DATA = '';
+const MAX_TITLE_LENGTH = 80;
+
+export class AiConversation {
+  readonly id: string;
+  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(AiConversation.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): AiConversation {
+    const history = serializedConversation.history.map(entry => {
+      if (entry.type === ResponseType.SIDE_EFFECT) {
+        return {...entry, confirm: () => {}};
+      }
+      return entry;
+    });
+    return new AiConversation(
+        serializedConversation.type,
+        history,
+        serializedConversation.id,
+        true,
+        serializedConversation.isExternal,
+    );
+  }
+}

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/ConversationHandler.ts

@@ -21,8 +21,8 @@ import {FileAgent} from './agents/FileAgent.js';
 import {NetworkAgent, RequestContext} from './agents/NetworkAgent.js';
 import {PerformanceAgent, type PerformanceTraceContext} from './agents/PerformanceAgent.js';
 import {NodeContext, StylingAgent} from './agents/StylingAgent.js';
+import {AiConversation} from './AiConversation.js';
 import {
-  Conversation,
   ConversationType,
 } from './AiHistoryStorage.js';
 import {getDisabledReasons} from './AiUtils.js';
@@ -42,7 +42,7 @@ interface ExternalNetworkRequestParameters {
 
 export interface ExternalPerformanceAIConversationData {
   conversationHandler: ConversationHandler;
-  conversation: Conversation;
+  conversation: AiConversation;
   agent: AiAgent<unknown>;
   selected: PerformanceTraceContext;
 }
@@ -207,7 +207,7 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
 
   async *
       handleConversationWithHistory(
-          items: AsyncIterable<ResponseData, void, void>, conversation: Conversation|undefined):
+          items: AsyncIterable<ResponseData, void, void>, conversation: AiConversation|undefined):
           AsyncGenerator<ResponseData, void, void> {
     for await (const data of items) {
       // We don't want to save partial responses to the conversation history.
@@ -225,7 +225,7 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
     selected: NodeContext|PerformanceTraceContext|RequestContext|null,
   }): AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse> {
     const {conversationType, aiAgent, prompt, selected} = opts;
-    const conversation = new Conversation(
+    const conversation = new AiConversation(
         conversationType,
         [],
         aiAgent.id,
@@ -236,7 +236,7 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
   }
 
   async * #doExternalConversation(opts: {
-    conversation: Conversation,
+    conversation: AiConversation,
     aiAgent: AiAgent<unknown>,
     prompt: string,
     selected: NodeContext|PerformanceTraceContext|RequestContext|null,

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -682,9 +682,7 @@ export abstract class AiAgent<T> {
 
       yield {
         type: ResponseType.SIDE_EFFECT,
-        confirm: (result: boolean) => {
-          sideEffectConfirmationPromiseWithResolvers.resolve(result);
-        },
+        confirm: sideEffectConfirmationPromiseWithResolvers.resolve,
       };
 
       const approvedRun = await sideEffectConfirmationPromiseWithResolvers.promise;

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -492,7 +492,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       this.#addFacts(options.selected);
     }
 
-    return yield* super.run(initialQuery, options);
+    yield* super.run(initialQuery, options);
   }
 
   #createFactForTraceSummary(): void {
@@ -870,7 +870,11 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         }
 
         const tree = AICallTree.fromEvent(event, parsedTrace);
-        const callTree = tree ? this.#formatter.formatCallTree(tree) : 'No call tree found';
+        if (!tree) {
+          return {error: 'No call tree found'};
+        }
+
+        const callTree = this.#formatter.formatCallTree(tree);
 
         const key = `getDetailedCallTree(${args.eventKey})`;
         this.#cacheFunctionResult(focus, key, callTree);

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -119,7 +119,7 @@ Content:
   "metadata": {
     "disable_user_content_logging": false,
     "string_session_id": "sessionId",
-    "user_tier": 2,
+    "user_tier": 3,
     "client_version": "unit_test+function_calling"
   },
   "functionality_type": 5,

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -327,11 +327,8 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
           action: `getStyles(${JSON.stringify(params.elements)}, ${JSON.stringify(params.styleProperties)})`,
         };
       },
-      handler: async (
-          params,
-          options,
-          ) => {
-        return await this.getStyles(params.elements, params.styleProperties, options);
+      handler: async params => {
+        return await this.getStyles(params.elements, params.styleProperties);
       },
     });
 
@@ -583,10 +580,7 @@ const data = {
     return this.context?.getItem() ?? null;
   }
 
-  async getStyles(elements: string[], properties: string[], _options?: {
-    signal?: AbortSignal,
-    approved?: boolean,
-  }): Promise<FunctionCallHandlerResult<unknown>> {
+  async getStyles(elements: string[], properties: string[]): Promise<FunctionCallHandlerResult<unknown>> {
     const result:
         Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};
     for (const uid of elements) {

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -10,6 +10,7 @@ import * as PatchAgent from './agents/PatchAgent.js';
 import * as PerformanceAgent from './agents/PerformanceAgent.js';
 import * as PerformanceAnnotationsAgent from './agents/PerformanceAnnotationsAgent.js';
 import * as StylingAgent from './agents/StylingAgent.js';
+import * as AiConversation from './AiConversation.js';
 import * as AiHistoryStorage from './AiHistoryStorage.js';
 import * as AiUtils from './AiUtils.js';
 import * as BuiltInAi from './BuiltInAi.js';
@@ -33,6 +34,7 @@ export {
   AiAgent,
   AICallTree,
   AIContext,
+  AiConversation,
   AiHistoryStorage,
   AIQueries,
   AiUtils,