[Freestyler] Clear all history

Show a footer item to clear all currently saved history entries

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

Author: Lightning00Blade

front_end/panels/freestyler/FreestylerPanel.test.ts

@@ -33,7 +33,7 @@ async function drainMicroTasks() {
 }
 
 describeWithEnvironment('FreestylerPanel', () => {
-  let mockView: sinon.SinonStub;
+  let mockView: sinon.SinonStub<[Freestyler.Props, unknown, HTMLElement]>;
   let panel: Freestyler.FreestylerPanel;
 
   beforeEach(() => {
@@ -611,17 +611,17 @@ describeWithEnvironment('FreestylerPanel', () => {
         syncInfo: getTestSyncInfo(),
       });
       panel.handleAction('freestyler.elements-floating-button');
-      (mockView.lastCall.args.at(0) as Freestyler.Props).onTextSubmit('test');
+      mockView.lastCall.args[0].onTextSubmit('test');
       await drainMicroTasks();
 
-      assert.deepEqual(mockView.lastCall.args.at(0).messages, [
+      assert.deepEqual(mockView.lastCall.args[0].messages, [
         {
-          entity: 'user',
+          entity: Freestyler.ChatMessageEntity.USER,
           text: 'test',
         },
         {
           answer: 'test',
-          entity: 'model',
+          entity: Freestyler.ChatMessageEntity.MODEL,
           rpcId: undefined,
           suggestions: undefined,
           steps: [],
@@ -631,7 +631,7 @@ describeWithEnvironment('FreestylerPanel', () => {
       const button = toolbar!.shadowRoot!.querySelector('devtools-button[aria-label=\'New chat\']');
       assert.instanceOf(button, HTMLElement);
       dispatchClickEvent(button);
-      assert.deepEqual(mockView.lastCall.args.at(0).messages, []);
+      assert.deepEqual(mockView.lastCall.args[0].messages, []);
     });
 
     it('should switch agents and restore history', async () => {
@@ -641,34 +641,33 @@ describeWithEnvironment('FreestylerPanel', () => {
         syncInfo: getTestSyncInfo(),
       });
       panel.handleAction('freestyler.elements-floating-button');
-      (mockView.lastCall.args.at(0) as Freestyler.Props).onTextSubmit('User question to Freestyler?');
+      mockView.lastCall.args[0].onTextSubmit('User question to Freestyler?');
       await drainMicroTasks();
-
-      assert.deepEqual(mockView.lastCall.args.at(0).messages, [
+      assert.deepEqual(mockView.lastCall.args[0].messages, [
         {
-          entity: 'user',
+          entity: Freestyler.ChatMessageEntity.USER,
           text: 'User question to Freestyler?',
         },
         {
           answer: 'test',
-          entity: 'model',
+          entity: Freestyler.ChatMessageEntity.MODEL,
           rpcId: undefined,
           suggestions: undefined,
           steps: [],
         },
       ]);
 
       panel.handleAction('drjones.network-floating-button');
-      (mockView.lastCall.args.at(0) as Freestyler.Props).onTextSubmit('User question to DrJones?');
+      mockView.lastCall.args[0].onTextSubmit('User question to DrJones?');
       await drainMicroTasks();
-      assert.deepEqual(mockView.lastCall.args.at(0).messages, [
+      assert.deepEqual(mockView.lastCall.args[0].messages, [
         {
-          entity: 'user',
+          entity: Freestyler.ChatMessageEntity.USER,
           text: 'User question to DrJones?',
         },
         {
           answer: 'test',
-          entity: 'model',
+          entity: Freestyler.ChatMessageEntity.MODEL,
           rpcId: undefined,
           suggestions: undefined,
           steps: [],
@@ -686,14 +685,14 @@ describeWithEnvironment('FreestylerPanel', () => {
       contextMenu.invokeHandler(freestylerEntry.id());
 
       await drainMicroTasks();
-      assert.deepEqual(mockView.lastCall.args.at(0).messages, [
+      assert.deepEqual(mockView.lastCall.args[0].messages, [
         {
-          entity: 'user',
+          entity: Freestyler.ChatMessageEntity.USER,
           text: 'User question to Freestyler?',
         },
         {
           answer: 'test',
-          entity: 'model',
+          entity: Freestyler.ChatMessageEntity.MODEL,
           rpcId: undefined,
           suggestions: undefined,
           steps: [],
@@ -709,17 +708,17 @@ describeWithEnvironment('FreestylerPanel', () => {
       syncInfo: getTestSyncInfo(),
     });
     panel.handleAction('freestyler.elements-floating-button');
-    (mockView.lastCall.args.at(0) as Freestyler.Props).onTextSubmit('test');
+    mockView.lastCall.args[0].onTextSubmit('test');
     await drainMicroTasks();
 
-    assert.deepEqual(mockView.lastCall.args.at(0).messages, [
+    assert.deepEqual(mockView.lastCall.args[0].messages, [
       {
-        entity: 'user',
+        entity: Freestyler.ChatMessageEntity.USER,
         text: 'test',
       },
       {
         answer: 'test',
-        entity: 'model',
+        entity: Freestyler.ChatMessageEntity.MODEL,
         rpcId: undefined,
         suggestions: undefined,
         steps: [],
@@ -729,7 +728,75 @@ describeWithEnvironment('FreestylerPanel', () => {
     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);
+    assert.deepEqual(mockView.lastCall.args[0].messages, []);
+    assert.deepEqual(mockView.lastCall.args[0].agentType, undefined);
+  });
+
+  it('should have empty state after clear chat history', async () => {
+    panel = new Freestyler.FreestylerPanel(mockView, {
+      aidaClient: getTestAidaClient(),
+      aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      syncInfo: getTestSyncInfo(),
+    });
+    panel.handleAction('freestyler.elements-floating-button');
+    mockView.lastCall.args[0].onTextSubmit('User question to Freestyler?');
+    await drainMicroTasks();
+    assert.deepEqual(mockView.lastCall.args[0].messages, [
+      {
+        entity: Freestyler.ChatMessageEntity.USER,
+        text: 'User question to Freestyler?',
+      },
+      {
+        answer: 'test',
+        entity: Freestyler.ChatMessageEntity.MODEL,
+        rpcId: undefined,
+        suggestions: undefined,
+        steps: [],
+      },
+    ]);
+
+    panel.handleAction('drjones.network-floating-button');
+    mockView.lastCall.args[0].onTextSubmit('User question to DrJones?');
+    await drainMicroTasks();
+    assert.deepEqual(mockView.lastCall.args[0].messages, [
+      {
+        entity: Freestyler.ChatMessageEntity.USER,
+        text: 'User question to DrJones?',
+      },
+      {
+        answer: 'test',
+        entity: Freestyler.ChatMessageEntity.MODEL,
+        rpcId: undefined,
+        suggestions: undefined,
+        steps: [],
+      },
+    ]);
+
+    let toolbar = panel.contentElement.querySelector('.freestyler-left-toolbar');
+    let button = toolbar!.shadowRoot!.querySelector('devtools-button[aria-label=\'History\']');
+    assert.instanceOf(button, HTMLElement);
+    let contextMenu = getMenu(() => {
+      dispatchClickEvent(button!);
+    });
+    const clearAll = findMenuItemWithLabel(contextMenu.footerSection(), 'Clear chat history')!;
+    assert.isDefined(clearAll);
+    contextMenu.invokeHandler(clearAll.id());
+    await drainMicroTasks();
+    assert.deepEqual(mockView.lastCall.args[0].messages, []);
+    assert.deepEqual(mockView.lastCall.args[0].agentType, undefined);
+
+    await drainMicroTasks();
+    contextMenu.discard();
+    await drainMicroTasks();
+
+    toolbar = panel.contentElement.querySelector('.freestyler-left-toolbar');
+    button = toolbar!.shadowRoot!.querySelector('devtools-button[aria-label=\'History\']');
+    assert.instanceOf(button, HTMLElement);
+    contextMenu = getMenu(() => {
+      dispatchClickEvent(button);
+    });
+
+    // We don't show the context menu if there are not entries
+    assert.isUndefined(contextMenu);
   });
 });

front_end/panels/freestyler/FreestylerPanel.ts

@@ -72,6 +72,10 @@ const UIStrings = {
    *@description AI assistance UI text clearing the current chat session.
    */
   clearChat: 'Clear chat',
+  /**
+   *@description AI assistance UI text that deletes all history entries.
+   */
+  clearChatHistory: 'Clear chat history',
 };
 
 /*
@@ -533,6 +537,10 @@ export class FreestylerPanel extends UI.Panel.Panel {
   }
 
   #onHistoryClicked(event: Event): void {
+    if ([...this.#agents].every(agent => agent.isEmpty)) {
+      return;
+    }
+
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
 
     for (const agent of [...this.#agents].reverse()) {
@@ -552,9 +560,27 @@ export class FreestylerPanel extends UI.Panel.Panel {
       );
     }
 
+    contextMenu.footerSection().appendItem(
+        i18nString(UIStrings.clearChatHistory),
+        () => {
+          this.#clearHistory();
+        },
+    );
+
     void contextMenu.show();
   }
 
+  #clearHistory(): void {
+    this.#agents = new Set();
+    this.#freestylerAgent = this.#createFreestylerAgent();
+    this.#drJonesFileAgent = this.#createDrJonesFileAgent();
+    this.#drJonesNetworkAgent = this.#createDrJonesNetworkAgent();
+    this.#drJonesPerformanceAgent = this.#createDrJonesPerformanceAgent();
+    this.#viewProps.messages = [];
+    this.#viewProps.agentType = undefined;
+    this.doUpdate();
+  }
+
   #onDeleteClicked(): void {
     if (!this.#viewProps.agentType) {
       return;