chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/freestyler/FreestylerPanel.test.ts

@@ -4,8 +4,13 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
-import {describeWithEnvironment, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Workspace from '../../models/workspace/workspace.js';
+import {findMenuItemWithLabel, getMenu} from '../../testing/ContextMenuHelpers.js';
+import {dispatchClickEvent} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment, getGetHostConfigStub, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as TimelineUtils from '../timeline/utils/utils.js';
 
 import * as Freestyler from './freestyler.js';
 
@@ -23,27 +28,38 @@ function getTestSyncInfo(): Host.InspectorFrontendHostAPI.SyncInformation {
   return {isSyncActive: true};
 }
 
+async function drainMicroTasks() {
+  await new Promise(resolve => setTimeout(resolve, 0));
+}
+
 describeWithEnvironment('FreestylerPanel', () => {
-  const mockView = sinon.stub();
+  let mockView: sinon.SinonStub;
+  let panel: Freestyler.FreestylerPanel;
 
   beforeEach(() => {
+    mockView = sinon.stub();
     registerNoopActions(['elements.toggle-element-search']);
-    mockView.reset();
+  });
+
+  afterEach(() => {
+    panel.detach();
   });
 
   describe('consent view', () => {
     it('should render consent view when the consent is not given before', async () => {
-      new Freestyler.FreestylerPanel(mockView, {
+      panel = new Freestyler.FreestylerPanel(mockView, {
         aidaClient: getTestAidaClient(),
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
         syncInfo: getTestSyncInfo(),
       });
+      panel.markAsRoot();
+      panel.show(document.body);
 
       sinon.assert.calledWith(mockView, sinon.match({state: Freestyler.State.CONSENT_VIEW}));
     });
 
     it('should switch from consent view to chat view when enabling setting', async () => {
-      const panel = new Freestyler.FreestylerPanel(mockView, {
+      panel = new Freestyler.FreestylerPanel(mockView, {
         aidaClient: getTestAidaClient(),
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
         syncInfo: getTestSyncInfo(),
@@ -54,17 +70,19 @@ describeWithEnvironment('FreestylerPanel', () => {
 
       Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
       sinon.assert.calledWith(mockView, sinon.match({state: Freestyler.State.CHAT_VIEW}));
-      panel.detach();
+      await drainMicroTasks();
     });
 
     it('should render chat view when the consent is given before', async () => {
       Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
 
-      new Freestyler.FreestylerPanel(mockView, {
+      panel = new Freestyler.FreestylerPanel(mockView, {
         aidaClient: getTestAidaClient(),
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
         syncInfo: getTestSyncInfo(),
       });
+      panel.markAsRoot();
+      panel.show(document.body);
 
       sinon.assert.calledWith(mockView, sinon.match({state: Freestyler.State.CHAT_VIEW}));
     });
@@ -72,16 +90,77 @@ describeWithEnvironment('FreestylerPanel', () => {
     it('should render the consent view when the setting is disabled', async () => {
       Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
       Common.Settings.moduleSetting('ai-assistance-enabled').setDisabled(true);
+      const chatUiStates: Freestyler.State[] = [];
+      const viewStub = sinon.stub().callsFake(props => {
+        chatUiStates.push(props.state);
+      });
 
-      new Freestyler.FreestylerPanel(mockView, {
+      panel = new Freestyler.FreestylerPanel(viewStub, {
         aidaClient: getTestAidaClient(),
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
         syncInfo: getTestSyncInfo(),
       });
+      panel.markAsRoot();
+      panel.show(document.body);
+      await drainMicroTasks();
 
-      sinon.assert.calledWith(mockView, sinon.match({state: Freestyler.State.CONSENT_VIEW}));
+      sinon.assert.calledWith(viewStub, sinon.match({state: Freestyler.State.CONSENT_VIEW}));
+      assert.isFalse(chatUiStates.includes(Freestyler.State.CHAT_VIEW));
       Common.Settings.moduleSetting('ai-assistance-enabled').setDisabled(false);
     });
+
+    it('should render the consent view when blocked by age', async () => {
+      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+      const stub = getGetHostConfigStub({
+        aidaAvailability: {
+          blockedByAge: true,
+        },
+        devToolsFreestyler: {
+          enabled: true,
+        },
+      });
+
+      panel = new Freestyler.FreestylerPanel(mockView, {
+        aidaClient: getTestAidaClient(),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+        syncInfo: getTestSyncInfo(),
+      });
+      panel.markAsRoot();
+      panel.show(document.body);
+
+      sinon.assert.calledWith(mockView, sinon.match({state: Freestyler.State.CONSENT_VIEW}));
+      stub.restore();
+    });
+
+    it('updates when the user logs in', async () => {
+      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+
+      panel = new Freestyler.FreestylerPanel(mockView, {
+        aidaClient: getTestAidaClient(),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL,
+        syncInfo: getTestSyncInfo(),
+      });
+      panel.markAsRoot();
+      panel.show(document.body);
+      await drainMicroTasks();
+      sinon.assert.calledWith(mockView, sinon.match({
+        state: Freestyler.State.CHAT_VIEW,
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL,
+      }));
+      mockView.reset();
+
+      const stub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions')
+                       .returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
+      Host.AidaClient.HostConfigTracker.instance().dispatchEventToListeners(
+          Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED);
+      await drainMicroTasks();
+      sinon.assert.calledWith(mockView, sinon.match({
+        state: Freestyler.State.CHAT_VIEW,
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+      }));
+
+      stub.restore();
+    });
   });
 
   describe('on rate click', () => {
@@ -93,7 +172,7 @@ describeWithEnvironment('FreestylerPanel', () => {
     it('renders a button linking to settings', () => {
       const stub = sinon.stub(UI.ViewManager.ViewManager.instance(), 'showView');
 
-      const panel = new Freestyler.FreestylerPanel(mockView, {
+      panel = new Freestyler.FreestylerPanel(mockView, {
         aidaClient: getTestAidaClient(),
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
         syncInfo: getTestSyncInfo(),
@@ -109,31 +188,41 @@ describeWithEnvironment('FreestylerPanel', () => {
     it('should allow logging if configured', () => {
       // @ts-expect-error global test variable
       setFreestylerServerSideLoggingEnabled(true);
+      const stub = getGetHostConfigStub({
+        aidaAvailability: {
+          disallowLogging: false,
+        },
+      });
 
       const aidaClient = getTestAidaClient();
-      new Freestyler.FreestylerPanel(mockView, {
+      panel = new Freestyler.FreestylerPanel(mockView, {
         aidaClient,
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
         syncInfo: getTestSyncInfo(),
       });
-      const callArgs = mockView.getCall(0).args[0];
+      panel.markAsRoot();
+      panel.show(document.body);
+      const callArgs = mockView.getCall(0)?.args[0];
       mockView.reset();
       callArgs.onFeedbackSubmit(0, Host.AidaClient.Rating.POSITIVE);
 
       sinon.assert.match(aidaClient.registerClientEvent.firstCall.firstArg, sinon.match({
         disable_user_content_logging: false,
       }));
+      stub.restore();
     });
 
     it('should send POSITIVE rating to aida client when the user clicks on positive rating', () => {
       const RPC_ID = 0;
 
       const aidaClient = getTestAidaClient();
-      new Freestyler.FreestylerPanel(mockView, {
+      panel = new Freestyler.FreestylerPanel(mockView, {
         aidaClient,
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
         syncInfo: getTestSyncInfo(),
       });
+      panel.markAsRoot();
+      panel.show(document.body);
       const callArgs = mockView.getCall(0).args[0];
       mockView.reset();
       callArgs.onFeedbackSubmit(RPC_ID, Host.AidaClient.Rating.POSITIVE);
@@ -152,11 +241,13 @@ describeWithEnvironment('FreestylerPanel', () => {
     it('should send NEGATIVE rating to aida client when the user clicks on positive rating', () => {
       const RPC_ID = 0;
       const aidaClient = getTestAidaClient();
-      new Freestyler.FreestylerPanel(mockView, {
+      panel = new Freestyler.FreestylerPanel(mockView, {
         aidaClient,
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
         syncInfo: getTestSyncInfo(),
       });
+      panel.markAsRoot();
+      panel.show(document.body);
       const callArgs = mockView.getCall(0).args[0];
       mockView.reset();
       callArgs.onFeedbackSubmit(RPC_ID, Host.AidaClient.Rating.NEGATIVE);
@@ -176,11 +267,13 @@ describeWithEnvironment('FreestylerPanel', () => {
       const RPC_ID = 0;
       const feedback = 'This helped me a ton.';
       const aidaClient = getTestAidaClient();
-      new Freestyler.FreestylerPanel(mockView, {
+      panel = new Freestyler.FreestylerPanel(mockView, {
         aidaClient,
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
         syncInfo: getTestSyncInfo(),
       });
+      panel.markAsRoot();
+      panel.show(document.body);
       const callArgs = mockView.getCall(0).args[0];
       mockView.reset();
       callArgs.onFeedbackSubmit(RPC_ID, Host.AidaClient.Rating.POSITIVE, feedback);
@@ -199,4 +292,444 @@ describeWithEnvironment('FreestylerPanel', () => {
       }));
     });
   });
+
+  describe('flavor change listeners', () => {
+    describe('SDK.DOMModel.DOMNode flavor changes for selected element', () => {
+      it('should set the selected element when the widget is shown', () => {
+        UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+
+        const node = sinon.createStubInstance(SDK.DOMModel.DOMNode, {
+          nodeType: Node.ELEMENT_NODE,
+        });
+        UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+        panel.markAsRoot();
+        panel.show(document.body);
+
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedElement: node,
+        }));
+      });
+
+      it('should update the selected element when the changed DOMNode flavor is an ELEMENT_NODE', () => {
+        UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+        panel.markAsRoot();
+        panel.show(document.body);
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedElement: null,
+        }));
+
+        const node = sinon.createStubInstance(SDK.DOMModel.DOMNode, {
+          nodeType: Node.ELEMENT_NODE,
+        });
+        UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedElement: node,
+        }));
+      });
+
+      it('should set selected element to null when the change DOMNode flavor is not an ELEMENT_NODE', () => {
+        UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+        panel.markAsRoot();
+        panel.show(document.body);
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedElement: null,
+        }));
+
+        const node = sinon.createStubInstance(SDK.DOMModel.DOMNode, {
+          nodeType: Node.COMMENT_NODE,
+        });
+        UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedElement: null,
+        }));
+      });
+
+      it('should not handle DOMNode flavor changes if the widget is not shown', () => {
+        UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+
+        const node = sinon.createStubInstance(SDK.DOMModel.DOMNode, {
+          nodeType: Node.ELEMENT_NODE,
+        });
+        UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+
+        sinon.assert.notCalled(mockView);
+      });
+    });
+
+    describe('SDK.NetworkRequest.NetworkRequest flavor changes for selected network request', () => {
+      it('should set the selected network request when the widget is shown', () => {
+        UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+
+        const networkRequest = sinon.createStubInstance(SDK.NetworkRequest.NetworkRequest);
+        UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
+        panel.markAsRoot();
+        panel.show(document.body);
+
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedNetworkRequest: networkRequest,
+        }));
+      });
+
+      it('should set selected network request when the NetworkRequest flavor changes', () => {
+        UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+        panel.markAsRoot();
+        panel.show(document.body);
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedNetworkRequest: null,
+        }));
+
+        const networkRequest = sinon.createStubInstance(SDK.NetworkRequest.NetworkRequest);
+        UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
+
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedNetworkRequest: networkRequest,
+        }));
+      });
+
+      it('should not handle NetworkRequest flavor changes if the widget is not shown', () => {
+        UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+
+        const networkRequest = sinon.createStubInstance(SDK.NetworkRequest.NetworkRequest);
+        UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
+
+        sinon.assert.notCalled(mockView);
+      });
+    });
+
+    describe('TimelineUtils.AICallTree.AICallTree flavor changes for selected call tree', () => {
+      it('should set the selected call tree when the widget is shown', () => {
+        UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+
+        const selectedAiCallTree = {};
+        UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, selectedAiCallTree);
+        panel.markAsRoot();
+        panel.show(document.body);
+
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedAiCallTree,
+        }));
+      });
+
+      it('should set selected call tree when the AICallTree flavor changes', () => {
+        UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+        panel.markAsRoot();
+        panel.show(document.body);
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedAiCallTree: null,
+        }));
+
+        const selectedAiCallTree = {};
+        UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, selectedAiCallTree);
+
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedAiCallTree,
+        }));
+      });
+
+      it('should not handle AICallTree flavor changes if the widget is not shown', () => {
+        UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+
+        const selectedAiCallTree = {};
+        UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, selectedAiCallTree);
+
+        sinon.assert.notCalled(mockView);
+      });
+    });
+
+    describe('Workspace.UISourceCode.UISourceCode flavor changes for selected network request', () => {
+      it('should set selected file when the widget is shown', () => {
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+
+        const uiSourceCode = sinon.createStubInstance(Workspace.UISourceCode.UISourceCode);
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
+        panel.markAsRoot();
+        panel.show(document.body);
+
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedFile: uiSourceCode,
+        }));
+      });
+
+      it('should set selected file when the UISourceCode flavor changes', () => {
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+        panel.markAsRoot();
+        panel.show(document.body);
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedFile: null,
+        }));
+
+        const uiSourceCode = sinon.createStubInstance(Workspace.UISourceCode.UISourceCode);
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
+
+        sinon.assert.calledWith(mockView, sinon.match({
+          selectedFile: uiSourceCode,
+        }));
+      });
+
+      it('should not handle NetworkRequest flavor changes if the widget is not shown', () => {
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, null);
+        panel = new Freestyler.FreestylerPanel(mockView, {
+          aidaClient: getTestAidaClient(),
+          aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+          syncInfo: getTestSyncInfo(),
+        });
+
+        const uiSourceCode = sinon.createStubInstance(Workspace.UISourceCode.UISourceCode);
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
+
+        sinon.assert.notCalled(mockView);
+      });
+    });
+  });
+
+  describe('toggle search element action', () => {
+    let toggleSearchElementAction: UI.ActionRegistration.Action;
+    beforeEach(() => {
+      toggleSearchElementAction =
+          UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-element-search');
+      toggleSearchElementAction.setToggled(false);
+    });
+
+    it('should set inspectElementToggled when the widget is shown', () => {
+      panel = new Freestyler.FreestylerPanel(mockView, {
+        aidaClient: getTestAidaClient(),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+        syncInfo: getTestSyncInfo(),
+      });
+
+      toggleSearchElementAction.setToggled(true);
+      panel.markAsRoot();
+      panel.show(document.body);
+
+      sinon.assert.calledWith(mockView, sinon.match({
+        inspectElementToggled: true,
+      }));
+    });
+
+    it('should update inspectElementToggled when the action is toggled', () => {
+      toggleSearchElementAction.setToggled(false);
+      panel = new Freestyler.FreestylerPanel(mockView, {
+        aidaClient: getTestAidaClient(),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+        syncInfo: getTestSyncInfo(),
+      });
+      panel.markAsRoot();
+      panel.show(document.body);
+      sinon.assert.calledWith(mockView, sinon.match({
+        inspectElementToggled: false,
+      }));
+
+      toggleSearchElementAction.setToggled(true);
+
+      sinon.assert.calledWith(mockView, sinon.match({
+        inspectElementToggled: true,
+      }));
+    });
+
+    it('should not update toggleSearchElementAction even after the action is toggled when the widget is not shown',
+       () => {
+         toggleSearchElementAction.setToggled(false);
+         panel = new Freestyler.FreestylerPanel(mockView, {
+           aidaClient: getTestAidaClient(),
+           aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+           syncInfo: getTestSyncInfo(),
+         });
+
+         toggleSearchElementAction.setToggled(true);
+
+         sinon.assert.notCalled(mockView);
+       });
+  });
+
+  describe('history interactions', () => {
+    it('should have empty messages after new 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=\'New chat\']');
+      assert.instanceOf(button, HTMLElement);
+      dispatchClickEvent(button);
+      assert.deepEqual(mockView.lastCall.args.at(0).messages, []);
+    });
+
+    it('should switch agents and restore 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.at(0) as Freestyler.Props).onTextSubmit('User question to Freestyler?');
+      await drainMicroTasks();
+
+      assert.deepEqual(mockView.lastCall.args.at(0).messages, [
+        {
+          entity: 'user',
+          text: 'User question to Freestyler?',
+        },
+        {
+          answer: 'test',
+          entity: '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?');
+      await drainMicroTasks();
+      assert.deepEqual(mockView.lastCall.args.at(0).messages, [
+        {
+          entity: 'user',
+          text: 'User question to DrJones?',
+        },
+        {
+          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=\'History\']');
+      assert.instanceOf(button, HTMLElement);
+      const contextMenu = getMenu(() => {
+        dispatchClickEvent(button);
+      });
+      const freestylerEntry = findMenuItemWithLabel(contextMenu.defaultSection(), 'User question to Freestyler?')!;
+      assert.isDefined(freestylerEntry);
+      contextMenu.invokeHandler(freestylerEntry.id());
+
+      await drainMicroTasks();
+      assert.deepEqual(mockView.lastCall.args.at(0).messages, [
+        {
+          entity: 'user',
+          text: 'User question to Freestyler?',
+        },
+        {
+          answer: 'test',
+          entity: 'model',
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
+    });
+  });
+
+  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);
+  });
 });