[AI] For performance conversations, provide suggestions based on metrics

Also move the call tree suggestions into PerformanceTraceContext.

Bug: 442392194
Change-Id: Ib88981d308e699b06adf8070d4cd30d0b210173b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6955434
Reviewed-by: Paul Irish <[email protected]>
Auto-Submit: Connor Clark <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/models/ai_assistance/agents/AiAgent.ts

@@ -148,6 +148,9 @@ export interface ConversationSuggestion {
   jslogContext?: string;
 }
 
+/** At least one. */
+export type ConversationSuggestions = [ConversationSuggestion, ...ConversationSuggestion[]];
+
 export const enum ExternalRequestResponseType {
   ANSWER = 'answer',
   NOTIFICATION = 'notification',
@@ -196,7 +199,7 @@ export abstract class ConversationContext<T> {
     return;
   }
 
-  async getSuggestions(): Promise<[ConversationSuggestion, ...ConversationSuggestion[]]|undefined> {
+  async getSuggestions(): Promise<ConversationSuggestions|undefined> {
     return;
   }
 }

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -25,7 +25,7 @@ import {
   AiAgent,
   type ContextResponse,
   ConversationContext,
-  type ConversationSuggestion,
+  type ConversationSuggestions,
   type ParsedResponse,
   type RequestOptions,
   type ResponseData,
@@ -209,14 +209,44 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
    * Presents the default suggestions that are shown when the user first clicks
    * "Ask AI".
    */
-  override async getSuggestions(): Promise<[ConversationSuggestion, ...ConversationSuggestion[]]|undefined> {
-    const focus = this.#focus.data;
+  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
+    const data = this.#focus.data;
+
+    if (data.callTree) {
+      return [
+        {title: 'What\'s the purpose of this work?', jslogContext: 'performance-default'},
+        {title: 'Where is time being spent?', jslogContext: 'performance-default'},
+        {title: 'How can I optimize this?', jslogContext: 'performance-default'},
+      ];
+    }
 
-    if (!focus.insight) {
-      return;
+    if (data.insight) {
+      return new PerformanceInsightFormatter(data.parsedTrace, data.insight).getSuggestions();
+    }
+
+    const suggestions: ConversationSuggestions =
+        [{title: 'What performance issues exist with my page?', jslogContext: 'performance-default'}];
+
+    if (data.insightSet) {
+      const lcp = data.insightSet ? Trace.Insights.Common.getLCP(data.insightSet) : null;
+      const cls = data.insightSet ? Trace.Insights.Common.getCLS(data.insightSet) : null;
+      const inp = data.insightSet ? Trace.Insights.Common.getINP(data.insightSet) : null;
+
+      const ModelHandlers = Trace.Handlers.ModelHandlers;
+      const GOOD = Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD;
+
+      if (lcp && ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(lcp.value) !== GOOD) {
+        suggestions.push({title: 'How can I improve LCP?', jslogContext: 'performance-default'});
+      }
+      if (inp && ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(inp.value) !== GOOD) {
+        suggestions.push({title: 'How can I improve INP?', jslogContext: 'performance-default'});
+      }
+      if (cls && ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value) !== GOOD) {
+        suggestions.push({title: 'How can I improve CLS?', jslogContext: 'performance-default'});
+      }
     }
 
-    return new PerformanceInsightFormatter(focus.parsedTrace, focus.insight).getSuggestions();
+    return suggestions;
   }
 }
 

front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -18,7 +18,7 @@ import {
   AiAgent,
   type ContextResponse,
   ConversationContext,
-  type ConversationSuggestion,
+  type ConversationSuggestions,
   type FunctionCallHandlerResult,
   MultimodalInputType,
   type ParsedResponse,
@@ -182,7 +182,7 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
     throw new Error('Not implemented');
   }
 
-  override async getSuggestions(): Promise<[ConversationSuggestion, ...ConversationSuggestion[]]|undefined> {
+  override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
     const layoutProps = await this.#node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.#node.id);
 
     if (!layoutProps) {

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as Trace from '../../trace/trace.js';
-import type {ConversationSuggestion} from '../agents/AiAgent.js';
+import type {ConversationSuggestions} from '../agents/AiAgent.js';
 
 import {
   NetworkRequestFormatter,
@@ -103,7 +103,7 @@ export class PerformanceInsightFormatter {
     return this.#description().length > 0;
   }
 
-  getSuggestions(): [ConversationSuggestion, ...ConversationSuggestion[]] {
+  getSuggestions(): ConversationSuggestions {
     switch (this.#insight.insightKey) {
       case 'CLSCulprits':
         return [

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -253,15 +253,6 @@ async function getEmptyStateSuggestions(
         {title: 'Why is the request failing?', jslogContext: 'network-default'},
       ];
     case AiAssistanceModel.ConversationType.PERFORMANCE: {
-      const focus = context?.getItem() as AiAssistanceModel.AgentFocus | null;
-      if (focus?.data.callTree) {
-        return [
-          {title: 'What\'s the purpose of this work?', jslogContext: 'performance-default'},
-          {title: 'Where is time being spent?', jslogContext: 'performance-default'},
-          {title: 'How can I optimize this?', jslogContext: 'performance-default'},
-        ];
-      }
-
       return [
         {title: 'What performance issues exist with my page?', jslogContext: 'performance-default'},
       ];