AI: clear any text input if the user deselects any context

Fixed: 408348505
Change-Id: I5f6ad055bff308db2b1b5e2518e48944cbb9dc8c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6433950
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>

Author: jackfranklin

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -310,6 +310,22 @@ describeWithMockConnection('AI Assistance Panel', () => {
       UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
       assert.isNull((await view.nextInput).selectedContext);
     });
+
+    it('should clear the text input when the context changes to null', async () => {
+      const chatView = sinon.createStubInstance(AiAssistancePanel.ChatView);
+      const {panel, view} = await createAiAssistancePanel({chatView});
+
+      // Firstly, start a conversation and set a context
+      const context =
+          new AiAssistanceModel.CallTreeContext(sinon.createStubInstance(TimelineUtils.AICallTree.AICallTree));
+      UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, context.getItem());
+      panel.handleAction('drjones.performance-panel-context');
+      await view.nextInput;
+
+      // Now clear the context and check we cleared out the text
+      UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, null);
+      assert.strictEqual(chatView.clearTextInput.callCount, 1);
+    });
   });
 
   describe('toggle search element action', () => {

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -246,8 +246,7 @@ async function getEmptyStateSuggestions(
         'How can I reduce the time of this call tree?',
       ];
     case AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT:
-      // TODO(b/405925760): Define these.
-      return ['Help me optimize my LCP', 'Help me optimize my INP', 'For now'];
+      return ['Help me optimize my page load performance'];
   }
 }
 
@@ -1199,18 +1198,21 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#runAbortController = new AbortController();
   }
 
-  #onContextSelectionChanged(contextToRestore?: AiAssistanceModel.ConversationContext<unknown>): void {
+  #onContextSelectionChanged(): void {
     if (!this.#conversationAgent) {
       this.#blockedByCrossOrigin = false;
       return;
     }
-    const currentContext = contextToRestore ?? this.#getConversationContext();
-    this.#selectedContext = currentContext;
-    if (!currentContext) {
+    this.#selectedContext = this.#getConversationContext();
+    if (!this.#selectedContext) {
       this.#blockedByCrossOrigin = false;
+
+      // Clear out any text the user has entered into the input but never
+      // submitted now they have no active context
+      this.#viewOutput.chatView?.clearTextInput();
       return;
     }
-    this.#blockedByCrossOrigin = !currentContext.isOriginAllowed(this.#conversationAgent.origin);
+    this.#blockedByCrossOrigin = !this.#selectedContext.isOriginAllowed(this.#conversationAgent.origin);
   }
 
   #getConversationContext(): AiAssistanceModel.ConversationContext<unknown>|null {

front_end/panels/ai_assistance/components/ChatView.ts

@@ -327,6 +327,14 @@ export class ChatView extends HTMLElement {
     this.#messagesContainerResizeObserver.disconnect();
   }
 
+  clearTextInput(): void {
+    const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
+    if (!textArea) {
+      return;
+    }
+    textArea.value = '';
+  }
+
   focusTextInput(): void {
     const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
     if (!textArea) {

front_end/testing/AiAssistanceHelpers.ts

@@ -182,10 +182,11 @@ export async function createAiAssistancePanel(options?: {
   aidaClient?: Host.AidaClient.AidaClient,
   aidaAvailability?: Host.AidaClient.AidaAccessPreconditions,
   syncInfo?: Host.InspectorFrontendHostAPI.SyncInformation,
+  chatView?: AiAssistancePanel.ChatView,
 }) {
   let aidaAvailabilityForStub = options?.aidaAvailability ?? Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
 
-  const view = createViewFunctionStub(AiAssistancePanel.AiAssistancePanel);
+  const view = createViewFunctionStub(AiAssistancePanel.AiAssistancePanel, {chatView: options?.chatView});
   const aidaClient = options?.aidaClient ?? mockAidaClient();
   const checkAccessPreconditionsStub =
       sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions').callsFake(() => {