RPP: only default to Insights agent if insight is expanded

Without this change the AI Assistance panel just shows the Insight agent
at all times if you have it enabled.

Long term there is some work to be done to figure out the exact flow +
when we should start a new conversation based on the selection + what is
changed, but this fix is a start.

Fixed: 400356881
Change-Id: Ia383eca3e997a71d53f07d100dd172f94612ccbb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6316748
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Nikolay Vitkov <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -23,6 +23,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Elements from '../elements/elements.js';
 import * as Network from '../network/network.js';
 import * as Sources from '../sources/sources.js';
+import type * as TimelineComponents from '../timeline/components/components.js';
 import * as Timeline from '../timeline/timeline.js';
 import * as TimelineUtils from '../timeline/utils/utils.js';
 
@@ -448,49 +449,54 @@ describeWithMockConnection('AI Assistance Panel', () => {
       assert.deepEqual(updatedViewInputAfterNewChat.conversationType, AiAssistance.ConversationType.STYLING);
     });
 
-    it('should select the performance insights agent if it is enabled', async () => {
-      updateHostConfig({
-        devToolsAiAssistancePerformanceAgent: {
-          enabled: true,
-          insightsEnabled: true,
-        },
-      });
-      const {panel, expectViewUpdate} =
-          await createAiAssistancePanel({aidaClient: mockAidaClient([[{explanation: 'test'}]])});
-
-      const updatedViewInput = await expectViewUpdate(() => {
-        panel.handleAction('freestyler.elements-floating-button');
-      });
+    it('should select the performance insights agent if it is enabled and the user has expanded an insight',
+       async () => {
+         updateHostConfig({
+           devToolsAiAssistancePerformanceAgent: {
+             enabled: true,
+             insightsEnabled: true,
+           },
+         });
+         const {panel, expectViewUpdate} =
+             await createAiAssistancePanel({aidaClient: mockAidaClient([[{explanation: 'test'}]])});
 
-      const updatedViewInputAfterMessage = await expectViewUpdate(() => {
-        updatedViewInput.onTextSubmit('test');
-      });
+         const updatedViewInput = await expectViewUpdate(() => {
+           panel.handleAction('freestyler.elements-floating-button');
+         });
 
-      UI.Context.Context.instance().setFlavor(
-          Timeline.TimelinePanel.TimelinePanel, sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel));
+         const updatedViewInputAfterMessage = await expectViewUpdate(() => {
+           updatedViewInput.onTextSubmit('test');
+         });
 
-      assert.deepEqual(updatedViewInputAfterMessage.messages, [
-        {
-          entity: AiAssistance.ChatMessageEntity.USER,
-          text: 'test',
-          imageInput: undefined,
-        },
-        {
-          answer: 'test',
-          entity: AiAssistance.ChatMessageEntity.MODEL,
-          rpcId: undefined,
-          suggestions: undefined,
-          steps: [],
-        },
-      ]);
-      const updatedViewInputAfterNewChat = await expectViewUpdate(() => {
-        updatedViewInputAfterMessage.onNewChatClick();
-      });
+         UI.Context.Context.instance().setFlavor(
+             Timeline.TimelinePanel.TimelinePanel, sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel));
+
+         UI.Context.Context.instance().setFlavor(
+             Timeline.TimelinePanel.SelectedInsight,
+             new Timeline.TimelinePanel.SelectedInsight({} as unknown as TimelineComponents.Sidebar.ActiveInsight));
+
+         assert.deepEqual(updatedViewInputAfterMessage.messages, [
+           {
+             entity: AiAssistance.ChatMessageEntity.USER,
+             text: 'test',
+             imageInput: undefined,
+           },
+           {
+             answer: 'test',
+             entity: AiAssistance.ChatMessageEntity.MODEL,
+             rpcId: undefined,
+             suggestions: undefined,
+             steps: [],
+           },
+         ]);
+         const updatedViewInputAfterNewChat = await expectViewUpdate(() => {
+           updatedViewInputAfterMessage.onNewChatClick();
+         });
 
-      assert.deepEqual(updatedViewInputAfterNewChat.messages, []);
-      assert.deepEqual(
-          updatedViewInputAfterNewChat.conversationType, AiAssistance.ConversationType.PERFORMANCE_INSIGHT);
-    });
+         assert.deepEqual(updatedViewInputAfterNewChat.messages, []);
+         assert.deepEqual(
+             updatedViewInputAfterNewChat.conversationType, AiAssistance.ConversationType.PERFORMANCE_INSIGHT);
+       });
 
     it('should select the Dr Jones performance agent if insights are not enabled', async () => {
       updateHostConfig({
@@ -1068,7 +1074,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
     }
 
     describe('Performance Insight agent', () => {
-      it('should select the PERFORMANCE_INSIGHT agent when the performance panel is open and insights are enabled',
+      it('should select the PERFORMANCE_INSIGHT agent when the performance panel is open and insights are enabled and an insight is expanded',
          async () => {
            updateHostConfig({
              devToolsAiAssistancePerformanceAgent: {
@@ -1078,10 +1084,29 @@ describeWithMockConnection('AI Assistance Panel', () => {
            });
            UI.Context.Context.instance().setFlavor(
                Timeline.TimelinePanel.TimelinePanel, sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel));
+           UI.Context.Context.instance().setFlavor(
+               Timeline.TimelinePanel.SelectedInsight,
+               new Timeline.TimelinePanel.SelectedInsight({} as unknown as TimelineComponents.Sidebar.ActiveInsight));
            const {initialViewInput} = await createAiAssistancePanel();
 
            assert.strictEqual(initialViewInput.conversationType, AiAssistance.ConversationType.PERFORMANCE_INSIGHT);
          });
+
+      it('should select the PERFORMANCE agent when the performance panel is open and insights are enabled but the user has not selected an insight',
+         async () => {
+           updateHostConfig({
+             devToolsAiAssistancePerformanceAgent: {
+               enabled: true,
+               insightsEnabled: true,
+             },
+           });
+           UI.Context.Context.instance().setFlavor(
+               Timeline.TimelinePanel.TimelinePanel, sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel));
+           UI.Context.Context.instance().setFlavor(Timeline.TimelinePanel.SelectedInsight, null);
+
+           const {initialViewInput} = await createAiAssistancePanel();
+           assert.strictEqual(initialViewInput.conversationType, AiAssistance.ConversationType.PERFORMANCE);
+         });
     });
   });
 

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -558,6 +558,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const isPerformancePanelVisible =
         Boolean(UI.Context.Context.instance().flavor(TimelinePanel.TimelinePanel.TimelinePanel));
 
+    // Check if the user has an insight expanded in the performance panel sidebar.
+    // If they have, we default to the Insights agent; otherwise we fallback to
+    // the regular Performance agent.
+    // Note that we do not listen to this flavor changing; this code is here to
+    // ensure that by default we do not pick the Insights agent if the user has
+    // just imported a trace and not done anything else. It doesn't make sense
+    // to select the Insights AI agent in that case.
+    const userHasExpandedPerfInsight =
+        Boolean(UI.Context.Context.instance().flavor(TimelinePanel.TimelinePanel.SelectedInsight));
     let targetConversationType: ConversationType|undefined = undefined;
     if (isElementsPanelVisible && hostConfig.devToolsFreestyler?.enabled) {
       targetConversationType = ConversationType.STYLING;
@@ -567,7 +576,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       targetConversationType = ConversationType.FILE;
     } else if (
         isPerformancePanelVisible && hostConfig.devToolsAiAssistancePerformanceAgent?.enabled &&
-        hostConfig.devToolsAiAssistancePerformanceAgent?.insightsEnabled) {
+        hostConfig.devToolsAiAssistancePerformanceAgent?.insightsEnabled && userHasExpandedPerfInsight) {
       targetConversationType = ConversationType.PERFORMANCE_INSIGHT;
     } else if (isPerformancePanelVisible && hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {
       targetConversationType = ConversationType.PERFORMANCE;

front_end/panels/timeline/TimelinePanel.ts

@@ -733,6 +733,13 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
     this.#sideBar.setActiveInsight(insight);
     this.flameChart.setActiveInsight(insight);
+
+    if (insight) {
+      const selectedInsight = new SelectedInsight(insight);
+      UI.Context.Context.instance().setFlavor(SelectedInsight, selectedInsight);
+    } else {
+      UI.Context.Context.instance().setFlavor(SelectedInsight, null);
+    }
   }
 
   /**
@@ -3040,3 +3047,13 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 }
+
+/**
+ * Used to set the UI.Context when the user expands an Insight. This is only
+ * relied upon in the AI Agent code to know which agent to pick by default based
+ * on the context of the panel.
+ */
+export class SelectedInsight {
+  constructor(public insight: TimelineComponents.Sidebar.ActiveInsight) {
+  }
+}

front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -156,7 +156,7 @@ export abstract class BaseInsightComponent<T extends InsightModel<{}, {}>> exten
       return;
     }
 
-    if (!this.data.insightSetKey) {
+    if (!this.data.insightSetKey || !this.model) {
       // Shouldn't happen, but needed to satisfy TS.
       return;
     }

front_end/panels/timeline/components/insights/SidebarInsight.ts

@@ -18,9 +18,7 @@ export interface InsightDetails {
 export class InsightActivated extends Event {
   static readonly eventName = 'insightactivated';
 
-  constructor(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      public model: InsightModel<any, any>, public insightSetKey: string) {
+  constructor(public model: InsightModel<{}, {}>, public insightSetKey: string) {
     super(InsightActivated.eventName, {bubbles: true, composed: true});
   }
 }