Logging for AI conversations

This logs the type of conversation (freestyler, dr-jones-network,...)
and whether they were initiated via the UI or via MCP.

Corresponding Chromium CL: https://crrev.com/c/6568811

Bug: 417878946
Change-Id: I7ebd7a7b6487d63959e98ec5643bce6f94b599d2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6574295
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Auto-Submit: Wolfgang Beyer <wolfi@chromium.org>

Author: wolfib

front_end/core/host/InspectorFrontendHost.ts

@@ -49,6 +49,7 @@ import {
   Events,
   type EventTypes,
   type ExtensionDescriptor,
+  type FunctionCallEvent,
   type HoverEvent,
   type ImpressionEvent,
   type InspectorFrontendHostAPI,
@@ -550,6 +551,8 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
   }
   recordSettingAccess(_event: SettingAccessEvent): void {
   }
+  recordFunctionCall(_event: FunctionCallEvent): void {
+  }
 }
 
 // @ts-expect-error Global injected by devtools_compatibility.js

front_end/core/host/InspectorFrontendHostAPI.ts

@@ -206,6 +206,11 @@ export interface SettingAccessEvent {
   string_value?: number;
 }
 
+export interface FunctionCallEvent {
+  name: number;
+  context?: number;
+}
+
 // While `EventDescriptors` are used to dynamically dispatch host binding events,
 // the `EventTypes` "type map" is used for type-checking said events by TypeScript.
 // `EventTypes` is not used at runtime.
@@ -396,6 +401,7 @@ export interface InspectorFrontendHostAPI {
   recordChange(event: ChangeEvent): void;
   recordKeyDown(event: KeyDownEvent): void;
   recordSettingAccess(event: SettingAccessEvent): void;
+  recordFunctionCall(event: FunctionCallEvent): void;
 }
 
 export interface AcceleratorDescriptor {

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1425,6 +1425,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       type: multimodalInputType,
     } :
                                                                       undefined;
+    if (this.#conversation) {
+      void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
+    }
     const runner = this.#conversationAgent.run(
         text, {
           signal,
@@ -1602,6 +1605,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       throw new Error(disabledReasons.join(' '));
     }
 
+    void VisualLogging.logFunctionCall(`start-conversation-${conversationType}`, 'external');
     switch (conversationType) {
       case AiAssistanceModel.ConversationType.STYLING:
         return await this.handleExternalStylingRequest(prompt, selector);

front_end/ui/visual_logging/Debugging.ts

@@ -126,7 +126,7 @@ function processElementForDebugging(element: HTMLElement, loggingState: LoggingS
   }
 }
 
-type EventType = 'Click'|'Drag'|'Hover'|'Change'|'KeyDown'|'Resize'|'SettingAccess';
+type EventType = 'Click'|'Drag'|'Hover'|'Change'|'KeyDown'|'Resize'|'SettingAccess'|'FunctionCall';
 export function processEventForDebugging(
     event: EventType, state: LoggingState|null, extraInfo?: EventAttributes): void {
   const format = localStorage.getItem('veDebugLoggingEnabled');
@@ -163,7 +163,7 @@ export function processEventForIntuitiveDebugging(
 
 export function processEventForTestDebugging(
     event: EventType, state: LoggingState|null, _extraInfo?: EventAttributes): void {
-  if (event !== 'SettingAccess') {
+  if (event !== 'SettingAccess' && event !== 'FunctionCall') {
     lastImpressionLogEntry = null;
   }
   maybeLogDebugEvent(

front_end/ui/visual_logging/KnownContextValues.ts

@@ -3388,6 +3388,11 @@ export const knownContextValues = new Set([
   'stalled',
   'standard-emulated-device-list',
   'start',
+  'start-conversation-drjones-file',
+  'start-conversation-drjones-network-request',
+  'start-conversation-drjones-performance',
+  'start-conversation-freestyler',
+  'start-conversation-performance-insight',
   'start-new-chat',
   'start-recording',
   'start-time',

front_end/ui/visual_logging/LoggingEvents.test.ts

@@ -256,4 +256,16 @@ describe('LoggingEvents', () => {
     assert.deepEqual(
         recordSettingAccess.lastCall.firstArg, {name: -1361026584, numeric_value: 123, string_value: undefined});
   });
+
+  it('calls UI binding to log a function call event', async () => {
+    const recordFunctionCall = sinon.stub(
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance,
+        'recordFunctionCall',
+    );
+    await VisualLogging.LoggingEvents.logFunctionCall('test-function', 'test-context');
+    assert.deepEqual(recordFunctionCall.lastCall.firstArg, {name: -1470917656, context: 617717214});
+
+    await VisualLogging.LoggingEvents.logFunctionCall('test-function');
+    assert.deepEqual(recordFunctionCall.lastCall.firstArg, {name: -1470917656, context: undefined});
+  });
 });

front_end/ui/visual_logging/LoggingEvents.ts

@@ -190,3 +190,14 @@ export async function logSettingAccess(name: string, value: number|string|boolea
   Host.InspectorFrontendHost.InspectorFrontendHostInstance.recordSettingAccess(settingAccessEvent);
   processEventForDebugging('SettingAccess', null, {name, numericValue, stringValue});
 }
+
+export async function logFunctionCall(name: string, context?: string): Promise<void> {
+  const nameHash = await contextAsNumber(name);
+  if (typeof nameHash === 'undefined') {
+    return;
+  }
+  const functionCallEvent:
+      Host.InspectorFrontendHostAPI.FunctionCallEvent = {name: nameHash, context: await contextAsNumber(context)};
+  Host.InspectorFrontendHost.InspectorFrontendHostInstance.recordFunctionCall(functionCallEvent);
+  processEventForDebugging('FunctionCall', null, {name, context});
+}

front_end/ui/visual_logging/visual_logging.ts

@@ -11,7 +11,7 @@ import * as NonDomState from './NonDomState.js';
 export type Loggable = LoggableModule.Loggable;
 export {DebugLoggingFormat, setVeDebuggingEnabled, setVeDebugLoggingEnabled} from './Debugging.js';
 export {addDocument, startLogging, stopLogging} from './LoggingDriver.js';
-export {logImpressions, logSettingAccess} from './LoggingEvents.js';
+export {logImpressions, logSettingAccess, logFunctionCall} from './LoggingEvents.js';
 export const logClick = (loggable: Loggable, event: Event, options: {doubleClick?: boolean} = {}): void =>
     LoggingEvents.logClick(LoggingDriver.clickLogThrottler)(loggable, event, options);