[Freestyler] Clear current History entry

Clears the current conversation and goes to empty state.

Bug: 351752761
Change-Id: Id16ba333f85576c939ea48e01e975b10fd1768b0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5979947
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Auto-Submit: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

front_end/panels/freestyler/FreestylerPanel.test.ts

@@ -701,4 +701,35 @@ describeWithEnvironment('FreestylerPanel', () => {
       ]);
     });
   });
+
+  it('should have empty state after clear chat', async () => {
+    panel = new Freestyler.FreestylerPanel(mockView, {
+      aidaClient: getTestAidaClient(),
+      aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      syncInfo: getTestSyncInfo(),
+    });
+    panel.handleAction('freestyler.elements-floating-button');
+    (mockView.lastCall.args.at(0) as Freestyler.Props).onTextSubmit('test');
+    await drainMicroTasks();
+
+    assert.deepEqual(mockView.lastCall.args.at(0).messages, [
+      {
+        entity: 'user',
+        text: 'test',
+      },
+      {
+        answer: 'test',
+        entity: 'model',
+        rpcId: undefined,
+        suggestions: undefined,
+        steps: [],
+      },
+    ]);
+    const toolbar = panel.contentElement.querySelector('.freestyler-left-toolbar');
+    const button = toolbar!.shadowRoot!.querySelector('devtools-button[aria-label=\'Clear chat\']');
+    assert.instanceOf(button, HTMLElement);
+    dispatchClickEvent(button);
+    assert.deepEqual(mockView.lastCall.args.at(0).messages, []);
+    assert.deepEqual(mockView.lastCall.args.at(0).agentType, undefined);
+  });
 });

front_end/panels/freestyler/FreestylerPanel.ts

@@ -68,6 +68,10 @@ const UIStrings = {
    *@description AI assistance UI text creating selecting a history entry.
    */
   history: 'History',
+  /**
+   *@description AI assistance UI text clearing the current chat session.
+   */
+  clearChat: 'Clear chat',
 };
 
 /*
@@ -105,7 +109,8 @@ function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMMod
 // TODO(ergunsh): Use the WidgetElement instead of separately creating the toolbar.
 function createToolbar(
     target: HTMLElement,
-    {onHistoryClick, onNewAgentClick}: {onHistoryClick: (event: Event) => void, onNewAgentClick: () => void}): void {
+    {onHistoryClick, onNewAgentClick, onDeleteClick}:
+        {onHistoryClick: (event: Event) => void, onNewAgentClick: () => void, onDeleteClick: () => void}): void {
   const toolbarContainer = target.createChild('div', 'freestyler-toolbar-container');
   const leftToolbar = new UI.Toolbar.Toolbar('freestyler-left-toolbar', toolbarContainer);
   const rightToolbar = new UI.Toolbar.Toolbar('freestyler-right-toolbar', toolbarContainer);
@@ -121,6 +126,10 @@ function createToolbar(
     onHistoryClick(event.data);
   });
   leftToolbar.appendToolbarItem(historyButton);
+  const deleteButton =
+      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearChat), 'bin', undefined, 'freestyler.delete');
+  deleteButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, onDeleteClick);
+  leftToolbar.appendToolbarItem(deleteButton);
 
   const link = UI.XLink.XLink.create(
       AI_ASSISTANCE_SEND_FEEDBACK, i18nString(UIStrings.sendFeedback), undefined, undefined,
@@ -187,9 +196,11 @@ export class FreestylerPanel extends UI.Panel.Panel {
     super(FreestylerPanel.panelName);
     this.#freestylerEnabledSetting = this.#getAiAssistanceEnabledSetting();
 
-    createToolbar(
-        this.contentElement,
-        {onNewAgentClick: this.#clearMessages.bind(this), onHistoryClick: this.#onHistoryClicked.bind(this)});
+    createToolbar(this.contentElement, {
+      onNewAgentClick: this.#clearMessages.bind(this),
+      onHistoryClick: this.#onHistoryClicked.bind(this),
+      onDeleteClick: this.#onDeleteClicked.bind(this),
+    });
     this.#toggleSearchElementAction =
         UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-element-search');
     this.#aidaClient = aidaClient;
@@ -520,6 +531,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       }
     }
   }
+
   #onHistoryClicked(event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
 
@@ -543,6 +555,34 @@ export class FreestylerPanel extends UI.Panel.Panel {
     void contextMenu.show();
   }
 
+  #onDeleteClicked(): void {
+    if (!this.#viewProps.agentType) {
+      return;
+    }
+
+    switch (this.#viewProps.agentType) {
+      case AgentType.FREESTYLER:
+        this.#agents.delete(this.#freestylerAgent);
+        this.#freestylerAgent = this.#createFreestylerAgent();
+        break;
+      case AgentType.DRJONES_FILE:
+        this.#agents.delete(this.#drJonesFileAgent);
+        this.#drJonesFileAgent = this.#createDrJonesFileAgent();
+        break;
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        this.#agents.delete(this.#drJonesNetworkAgent);
+        this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
+        break;
+      case AgentType.DRJONES_PERFORMANCE:
+        this.#agents.delete(this.#drJonesPerformanceAgent);
+        this.#drJonesPerformanceAgent = this.#createDrJonesPerformanceAgent();
+        break;
+    }
+    this.#viewProps.messages = [];
+    this.#viewProps.agentType = undefined;
+    this.doUpdate();
+  }
+
   async #switchAgent(agent: AiAgent<unknown>): Promise<void> {
     switch (agent.type) {
       case AgentType.FREESTYLER:

front_end/ui/visual_logging/KnownContextValues.ts

@@ -1398,6 +1398,7 @@ export const knownContextValues = new Set([
   'frames-per-issue',
   'freestyler',
   'freestyler.accordion',
+  'freestyler.delete',
   'freestyler.dogfood-info',
   'freestyler.element-panel-context',
   'freestyler.elements-floating-button',