chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -6,7 +6,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import {
@@ -25,12 +24,12 @@ import {
 } from '../../testing/EnvironmentHelpers.js';
 import {expectCall} from '../../testing/ExpectStubCall.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {MockStore} from '../../testing/MockSettingStorage.js';
 import {createNetworkPanelForMockConnection} from '../../testing/NetworkHelpers.js';
+import {SnapshotTester} from '../../testing/SnapshotTester.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 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';
@@ -40,20 +39,34 @@ import * as AiAssistancePanel from './ai_assistance.js';
 const {urlString} = Platform.DevToolsPath;
 
 describeWithMockConnection('AI Assistance Panel', () => {
+  let viewManagerIsViewVisibleStub: sinon.SinonStub<[viewId: string], boolean>;
   beforeEach(() => {
-    registerNoopActions(['elements.toggle-element-search']);
-    UI.Context.Context.instance().setFlavor(Elements.ElementsPanel.ElementsPanel, null);
-    UI.Context.Context.instance().setFlavor(Network.NetworkPanel.NetworkPanel, null);
-    UI.Context.Context.instance().setFlavor(Sources.SourcesPanel.SourcesPanel, null);
+    viewManagerIsViewVisibleStub = sinon.stub(UI.ViewManager.ViewManager.instance(), 'isViewVisible');
+    AiAssistanceModel.ConversationHandler.removeInstance();
+    registerNoopActions([
+      'elements.toggle-element-search', 'timeline.record-reload', 'timeline.toggle-recording', 'timeline.show-history',
+      'components.collect-garbage'
+    ]);
+
     UI.Context.Context.instance().setFlavor(Timeline.TimelinePanel.TimelinePanel, null);
     UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, null);
     UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
-    UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, null);
+    UI.Context.Context.instance().setFlavor(TimelineUtils.AIContext.AgentFocus, null);
     UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, null);
+
+    const mockStore = new MockStore();
+    const settingsStorage = new Common.Settings.SettingsStorage({}, mockStore);
+    Common.Settings.Settings.instance({
+      forceNew: true,
+      syncedStorage: settingsStorage,
+      globalStorage: settingsStorage,
+      localStorage: settingsStorage,
+    });
   });
 
   afterEach(() => {
     cleanup();
+    viewManagerIsViewVisibleStub.reset();
   });
 
   describe('consent view', () => {
@@ -256,18 +269,19 @@ describeWithMockConnection('AI Assistance Panel', () => {
         action: 'drjones.network-floating-button'
       },
       {
-        flavor: TimelineUtils.AICallTree.AICallTree,
+        flavor: TimelineUtils.AIContext.AgentFocus,
         createContext: () => {
-          return new AiAssistanceModel.CallTreeContext(sinon.createStubInstance(TimelineUtils.AICallTree.AICallTree));
+          return AiAssistanceModel.PerformanceTraceContext.fromCallTree(
+              sinon.createStubInstance(TimelineUtils.AICallTree.AICallTree));
         },
         action: 'drjones.performance-panel-context'
       },
       {
-        flavor: TimelineUtils.InsightAIContext.ActiveInsight,
+        flavor: TimelineUtils.AIContext.AgentFocus,
         createContext: () => {
-          const context = new AiAssistanceModel.InsightContext(
-              sinon.createStubInstance(TimelineUtils.InsightAIContext.ActiveInsight));
-          sinon.stub(AiAssistanceModel.InsightContext.prototype, 'getSuggestions')
+          // @ts-expect-error: don't need any data.
+          const context = AiAssistanceModel.PerformanceTraceContext.fromInsight(null, null, null);
+          sinon.stub(AiAssistanceModel.PerformanceTraceContext.prototype, 'getSuggestions')
               .returns(Promise.resolve([{title: 'test suggestion'}]));
           return context;
         },
@@ -341,14 +355,14 @@ describeWithMockConnection('AI Assistance Panel', () => {
       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());
+      const context = AiAssistanceModel.PerformanceTraceContext.fromCallTree(
+          sinon.createStubInstance(TimelineUtils.AICallTree.AICallTree));
+      UI.Context.Context.instance().setFlavor(TimelineUtils.AIContext.AgentFocus, 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);
+      UI.Context.Context.instance().setFlavor(TimelineUtils.AIContext.AgentFocus, null);
       sinon.assert.callCount(chatView.clearTextInput, 1);
     });
   });
@@ -399,48 +413,52 @@ describeWithMockConnection('AI Assistance Panel', () => {
       sinon.assert.calledWith(stub, 'chrome-ai');
     });
 
-    it('should not show chat and delete history actions when ai assistance enabled setting is disabled', async () => {
-      Common.Settings.moduleSetting('ai-assistance-enabled').setDisabled(true);
+    it('should not show chat, delete history and export conversation actions when ai assistance enabled setting is disabled',
+       async () => {
+         Common.Settings.moduleSetting('ai-assistance-enabled').setDisabled(true);
 
-      const {view} = await createAiAssistancePanel();
+         const {view} = await createAiAssistancePanel();
 
-      assert.isFalse(view.input.showChatActions);
-      assert.isFalse(view.input.showDeleteHistoryAction);
-    });
+         assert.isFalse(view.input.showChatActions);
+         assert.isFalse(view.input.showActiveConversationActions);
+       });
 
-    it('should not show chat and delete history actions when ai assistance setting is marked as false', async () => {
-      Common.Settings.moduleSetting('ai-assistance-enabled').set(false);
+    it('should not show chat, delete history and export conversation actions when ai assistance setting is marked as false',
+       async () => {
+         Common.Settings.moduleSetting('ai-assistance-enabled').set(false);
 
-      const {view} = await createAiAssistancePanel();
+         const {view} = await createAiAssistancePanel();
 
-      assert.isFalse(view.input.showChatActions);
-      assert.isFalse(view.input.showDeleteHistoryAction);
-    });
+         assert.isFalse(view.input.showChatActions);
+         assert.isFalse(view.input.showActiveConversationActions);
+       });
 
-    it('should not show chat and delete history actions when the user is blocked by age', async () => {
-      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
-      updateHostConfig({
-        aidaAvailability: {
-          blockedByAge: true,
-        },
-      });
+    it('should not show chat, delete history and export conversation actions when the user is blocked by age',
+       async () => {
+         Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+         updateHostConfig({
+           aidaAvailability: {
+             blockedByAge: true,
+           },
+         });
 
-      const {view} = await createAiAssistancePanel();
+         const {view} = await createAiAssistancePanel();
 
-      assert.isFalse(view.input.showChatActions);
-      assert.isFalse(view.input.showDeleteHistoryAction);
-    });
+         assert.isFalse(view.input.showChatActions);
+         assert.isFalse(view.input.showActiveConversationActions);
+       });
 
-    it('should not show chat and delete history actions when Aida availability status is SYNC IS PAUSED', async () => {
-      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
-      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+    it('should not show chat, delete history and export conversation actions when Aida availability status is SYNC IS PAUSED',
+       async () => {
+         Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
 
-      const {view} =
-          await createAiAssistancePanel({aidaAvailability: Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED});
+         const {view} =
+             await createAiAssistancePanel({aidaAvailability: Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED});
+
+         assert.isFalse(view.input.showChatActions);
+         assert.isFalse(view.input.showActiveConversationActions);
+       });
 
-      assert.isFalse(view.input.showChatActions);
-      assert.isFalse(view.input.showDeleteHistoryAction);
-    });
   });
 
   describe('history interactions', () => {
@@ -481,8 +499,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
       panel.handleAction('freestyler.elements-floating-button');
       await view.nextInput;
 
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
 
       view.input.onTextSubmit('test');
 
@@ -521,6 +538,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
          (await view.nextInput).onTextSubmit('test');
          await view.nextInput;
 
+         viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'timeline');
          UI.Context.Context.instance().setFlavor(
              Timeline.TimelinePanel.TimelinePanel, sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel));
 
@@ -561,6 +579,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
       (await view.nextInput).onTextSubmit('test');
       await view.nextInput;
 
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'timeline');
       UI.Context.Context.instance().setFlavor(
           Timeline.TimelinePanel.TimelinePanel, sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel));
 
@@ -581,7 +600,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
       view.input.onNewChatClick();
 
       assert.deepEqual((await view.nextInput).messages, []);
-      assert.deepEqual(view.input.conversationType, AiAssistanceModel.ConversationType.PERFORMANCE);
+      assert.deepEqual(view.input.conversationType, AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE);
     });
 
     it('should switch agents and restore history', async () => {
@@ -649,6 +668,123 @@ describeWithMockConnection('AI Assistance Panel', () => {
       ]);
     });
 
+    it('runs action-triggered prompts', async () => {
+      updateHostConfig({
+        devToolsFreestyler: {
+          enabled: true,
+        },
+      });
+
+      const {panel, view} = await createAiAssistancePanel({
+        aidaClient: mockAidaClient(
+            [
+              [{explanation: 'test'}],
+            ],
+            ),
+      });
+
+      panel.handleAction('freestyler.element-panel-context', {prompt: 'Tell me more'});
+      assert.deepEqual((await view.nextInput).messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'Tell me more',
+          imageInput: undefined,
+        },
+        {
+          answer: 'test',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
+    });
+
+    it('interrupts an ongoing conversation with an action-triggered prompt', async () => {
+      updateHostConfig({
+        devToolsFreestyler: {
+          enabled: true,
+        },
+      });
+
+      const aidaClient = sinon.createStubInstance(Host.AidaClient.AidaClient);
+      aidaClient.doConversation.onFirstCall().callsFake(async function*(_request, options) {
+        yield {
+          explanation: 'Thinking...',
+          metadata: {},
+          completed: false,
+        };
+        await new Promise((_resolve, reject) => {
+          options?.signal?.addEventListener('abort', () => {
+            reject(new Host.AidaClient.AidaAbortError());
+          });
+        });
+      });
+
+      aidaClient.doConversation.onSecondCall().callsFake(async function*() {
+        yield {
+          explanation: 'Interrupted and answered',
+          metadata: {},
+          completed: true,
+        };
+      });
+
+      const {panel, view} = await createAiAssistancePanel({aidaClient});
+
+      // Start a conversation
+      panel.handleAction('freestyler.element-panel-context', {prompt: 'first question'});
+
+      // Wait for the thinking part.
+      let currentView = await view.nextInput;
+      assert.isTrue(currentView.isLoading);
+      assert.deepEqual(currentView.messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'first question',
+          imageInput: undefined,
+        },
+        {
+          answer: 'Thinking...',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
+
+      // Now interrupt with another prompt.
+      panel.handleAction('freestyler.element-panel-context', {prompt: 'interrupting prompt'});
+
+      currentView = await view.nextInput;
+      assert.deepEqual(currentView.messages, [
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'first question',
+          imageInput: undefined,
+        },
+        {
+          answer: 'Thinking...',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+          error: AiAssistanceModel.ErrorType.ABORT,
+        },
+        {
+          entity: AiAssistancePanel.ChatMessageEntity.USER,
+          text: 'interrupting prompt',
+          imageInput: undefined,
+        },
+        {
+          answer: 'Interrupted and answered',
+          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+          rpcId: undefined,
+          suggestions: undefined,
+          steps: [],
+        },
+      ]);
+    });
+
     it('should not save partial responses to conversation history', async () => {
       updateHostConfig({
         devToolsFreestyler: {
@@ -656,12 +792,10 @@ describeWithMockConnection('AI Assistance Panel', () => {
         },
       });
       const addHistoryItemStub = sinon.stub(AiAssistanceModel.Conversation.prototype, 'addHistoryItem');
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
       const {view} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[
-          {explanation: 'ANSWER: partially started'}, {explanation: 'ANSWER: partially started and now it\'s finished'}
-        ]])
+        aidaClient: mockAidaClient(
+            [[{explanation: 'partially started'}, {explanation: 'partially started and now it\'s finished'}]])
       });
       // Trigger running the conversation (observe that there are two answers: one partial, one complete)
       view.input.onTextSubmit('User question to Freestyler?');
@@ -679,7 +813,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
         },
       });
       const aiHistoryStorage = AiAssistanceModel.AiHistoryStorage.instance({forceNew: true});
-      const deleteHistoryEntryStub = sinon.stub(aiHistoryStorage, 'deleteHistoryEntry');
+      const deleteHistoryEntrySpy = sinon.spy(aiHistoryStorage, 'deleteHistoryEntry');
       const {panel, view} = await createAiAssistancePanel(
           {
             aidaClient: mockAidaClient(
@@ -705,12 +839,35 @@ describeWithMockConnection('AI Assistance Panel', () => {
       view.input.onDeleteClick();
 
       assert.deepEqual((await view.nextInput).messages, []);
-      sinon.assert.callCount(deleteHistoryEntryStub, 1);
-      assert.isString(deleteHistoryEntryStub.lastCall.args[0]);
+      sinon.assert.callCount(deleteHistoryEntrySpy, 1);
+      assert.isString(deleteHistoryEntrySpy.lastCall.args[0]);
 
       const menuAfterDelete = openHistoryContextMenu(view.input, 'User question to Freestyler?');
       assert.isUndefined(menuAfterDelete.id);
     });
+
+    it('should clear the list of previous conversations when all history is deleted', async () => {
+      const {panel, view} = await createAiAssistancePanel({aidaClient: mockAidaClient([[{explanation: 'test'}]])});
+      panel.handleAction('freestyler.elements-floating-button');
+      (await view.nextInput).onTextSubmit('test');
+      await view.nextInput;
+
+      let {contextMenu} = openHistoryContextMenu(view.input, 'test');
+      assert.isDefined(findMenuItemWithLabel(contextMenu.defaultSection(), 'test'));
+      contextMenu.discard();
+
+      await AiAssistanceModel.AiHistoryStorage.instance().deleteAll();
+
+      const newViewInput = await view.nextInput;
+      ({contextMenu} = openHistoryContextMenu(newViewInput, 'test'));
+
+      const defaultSectionItems = contextMenu.defaultSection().items;
+      assert.lengthOf(defaultSectionItems, 1, 'Default section should have one item');
+
+      const placeholderItem = defaultSectionItems[0];
+      assert.strictEqual(placeholderItem.buildDescriptor().label, 'No past conversations');
+      assert.isFalse(placeholderItem.isEnabled(), 'Placeholder item should be disabled');
+    });
   });
 
   describe('empty state', () => {
@@ -747,8 +904,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
           enabled: true,
         },
       });
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
       const {panel, view} = await createAiAssistancePanel({aidaClient: mockAidaClient([[{explanation: 'test'}]])});
       panel.handleAction('freestyler.elements-floating-button');
       (await view.nextInput).onTextSubmit('test');
@@ -876,8 +1032,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
       const {panel, view} = await createAiAssistancePanel({
         aidaClient: mockAidaClient([[{explanation: 'test'}], [{explanation: 'test2'}]]),
       });
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
 
       panel.handleAction('freestyler.elements-floating-button');
       view.input.onTextSubmit('test');
@@ -897,8 +1052,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
         },
       ]);
 
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
 
       panel.handleAction('freestyler.elements-floating-button');
       view.input.onTextSubmit('test2');
@@ -969,46 +1123,92 @@ describeWithMockConnection('AI Assistance Panel', () => {
          assert.isTrue((await view.nextInput).blockedByCrossOrigin);
          assert.strictEqual(view.input.selectedContext?.getItem(), networkRequest2);
        });
+
+    it('starts a new chat when a predefined prompt for a cross origin request is sent', async () => {
+      const networkRequest = createNetworkRequest({
+        url: urlString`https://a.test`,
+      });
+      UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
+
+      const {panel, view} = await createAiAssistancePanel({
+        aidaClient: mockAidaClient([
+          [{explanation: 'test'}],
+        ])
+      });
+      panel.handleAction('drjones.network-floating-button', {prompt: 'Tell me more'});
+      assert.isFalse((await view.nextInput).blockedByCrossOrigin);
+
+      // Change context to https://b.test.
+      const networkRequest2 = createNetworkRequest({
+        url: urlString`https://b.test`,
+      });
+      UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest2);
+
+      // A predefined prompt from the user on a different origin has been initiated.
+      // This should automatically start a new chat, to allow for the prompt to be executed.
+      panel.handleAction('drjones.network-floating-button', {prompt: 'Tell me more about another one'});
+      const input = await view.nextInput;
+      assert.isFalse(input.blockedByCrossOrigin);
+    });
+  });
+
+  describe('copy response', () => {
+    it('should copy the response to clipboard when copy button is clicked', async () => {
+      const {view} = await createAiAssistancePanel();
+      const modelMessage: AiAssistancePanel.ModelChatMessage = {
+        entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+        steps: [],
+        answer: 'test',
+      };
+
+      const copyTextStub = sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'copyText');
+      const showSnackbarStub = sinon.stub(Snackbars.Snackbar.Snackbar, 'show');
+      view.input.onCopyResponseClick(modelMessage);
+
+      const expectedMarkdown = AiAssistancePanel.getResponseMarkdown(modelMessage);
+      sinon.assert.calledOnceWithExactly(copyTextStub, expectedMarkdown);
+      sinon.assert.calledOnce(showSnackbarStub);
+    });
   });
 
   describe('auto agent selection for panels', () => {
     const tests: Array<{
-      panel: Platform.Constructor.Constructor<UI.Panel.Panel>,
+      panelName: string,
       expectedConversationType: AiAssistanceModel.ConversationType,
       featureFlagName: string,
     }> =
         [
           {
-            panel: Elements.ElementsPanel.ElementsPanel,
+            panelName: 'elements',
             expectedConversationType: AiAssistanceModel.ConversationType.STYLING,
             featureFlagName: 'devToolsFreestyler',
           },
           {
-            panel: Network.NetworkPanel.NetworkPanel,
+            panelName: 'network',
             expectedConversationType: AiAssistanceModel.ConversationType.NETWORK,
             featureFlagName: 'devToolsAiAssistanceNetworkAgent',
           },
           {
-            panel: Sources.SourcesPanel.SourcesPanel,
+            panelName: 'sources',
             expectedConversationType: AiAssistanceModel.ConversationType.FILE,
             featureFlagName: 'devToolsAiAssistanceFileAgent',
           },
           {
-            panel: Timeline.TimelinePanel.TimelinePanel,
-            expectedConversationType: AiAssistanceModel.ConversationType.PERFORMANCE,
+            panelName: 'timeline',
+            expectedConversationType: AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE,
             featureFlagName: 'devToolsAiAssistancePerformanceAgent',
           }
         ];
 
     for (const test of tests) {
-      it(`should select ${test.expectedConversationType} conversation when the panel ${test.panel.name} is opened`,
+      it(`should select ${test.expectedConversationType} conversation when the panel ${test.panelName} is opened`,
           async () => {
             updateHostConfig({
               [test.featureFlagName]: {
                 enabled: true,
               },
             });
-            UI.Context.Context.instance().setFlavor(test.panel, sinon.createStubInstance(test.panel));
+            viewManagerIsViewVisibleStub.callsFake(viewName => viewName === test.panelName);
 
             const {view} = await createAiAssistancePanel({
               aidaClient: mockAidaClient([[{explanation: 'test'}]]),
@@ -1017,38 +1217,61 @@ describeWithMockConnection('AI Assistance Panel', () => {
             assert.strictEqual(view.input.conversationType, test.expectedConversationType);
           });
 
-      it(`should reset the conversation when ${test.panel.name} is closed and no other panels are open`, async () => {
+      it(`should reset the conversation when ${test.panelName} is closed and no other panels are open`, async () => {
         updateHostConfig({
           [test.featureFlagName]: {
             enabled: true,
           },
         });
 
-        UI.Context.Context.instance().setFlavor(test.panel, sinon.createStubInstance(test.panel));
+        viewManagerIsViewVisibleStub.callsFake(viewName => viewName === test.panelName);
 
         const {view} = await createAiAssistancePanel();
 
         assert.strictEqual(view.input.conversationType, test.expectedConversationType);
 
-        UI.Context.Context.instance().setFlavor(test.panel, null);
+        viewManagerIsViewVisibleStub.returns(false);
+        UI.ViewManager.ViewManager.instance().dispatchEventToListeners(UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, {
+          location: 'testLocation',
+          revealedViewId: undefined,
+          hiddenViewId: test.panelName,
+        });
         assert.isUndefined((await view.nextInput).conversationType);
       });
 
-      it(`should render no conversation state if the ${
-             test.panel.name} panel is changed and the feature is not enabled`,
+      it(`should render no conversation state if the ${test.panelName} panel is changed and the feature is not enabled`,
           async () => {
             updateHostConfig({
               [test.featureFlagName]: {
                 enabled: false,
               },
             });
-            UI.Context.Context.instance().setFlavor(test.panel, sinon.createStubInstance(test.panel));
+            viewManagerIsViewVisibleStub.callsFake(viewName => viewName === test.panelName);
             const {view} = await createAiAssistancePanel();
 
             assert.isUndefined(view.input.conversationType);
           });
     }
 
+    it('should refresh its state when moved', async () => {
+      updateHostConfig({
+        devToolsFreestyler: {
+          enabled: true,
+        },
+      });
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
+      const {panel, view} = await createAiAssistancePanel();
+
+      assert.strictEqual(view.input.conversationType, AiAssistanceModel.ConversationType.STYLING);
+
+      // Simulate ViewManager.moveView() that hides panel, updates locations and other panel visibility, then shows moved view
+      panel.willHide();
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'console');
+      panel.wasShown();
+
+      assert.isUndefined((await view.nextInput).conversationType);
+    });
+
     describe('Performance Insight agent', () => {
       it('should select the PERFORMANCE_INSIGHT agent when the performance panel is open and insights are enabled and an insight is expanded',
          async () => {
@@ -1058,6 +1281,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
                insightsEnabled: true,
              },
            });
+           viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'timeline');
            UI.Context.Context.instance().setFlavor(
                Timeline.TimelinePanel.TimelinePanel, sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel));
            UI.Context.Context.instance().setFlavor(
@@ -1076,12 +1300,13 @@ describeWithMockConnection('AI Assistance Panel', () => {
                insightsEnabled: true,
              },
            });
+           viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'timeline');
            UI.Context.Context.instance().setFlavor(
                Timeline.TimelinePanel.TimelinePanel, sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel));
            UI.Context.Context.instance().setFlavor(Timeline.TimelinePanel.SelectedInsight, null);
 
            const {view} = await createAiAssistancePanel();
-           assert.strictEqual(view.input.conversationType, AiAssistanceModel.ConversationType.PERFORMANCE);
+           assert.strictEqual(view.input.conversationType, AiAssistanceModel.ConversationType.PERFORMANCE_CALL_TREE);
          });
     });
   });
@@ -1221,6 +1446,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
             enabled: true,
           },
         });
+        viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'timeline');
         UI.Context.Context.instance().setFlavor(
             Timeline.TimelinePanel.TimelinePanel, sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel));
         Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
@@ -1244,6 +1470,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
 
            const timelinePanel = sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel);
            timelinePanel.hasActiveTrace.callsFake(() => true);
+           viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'timeline');
            UI.Context.Context.instance().setFlavor(Timeline.TimelinePanel.TimelinePanel, timelinePanel);
            Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
            const {panel, view} =
@@ -1265,17 +1492,20 @@ describeWithMockConnection('AI Assistance Panel', () => {
 
            const timelinePanel = sinon.createStubInstance(Timeline.TimelinePanel.TimelinePanel);
            timelinePanel.hasActiveTrace.callsFake(() => true);
+           viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'timeline');
            UI.Context.Context.instance().setFlavor(Timeline.TimelinePanel.TimelinePanel, timelinePanel);
 
            const fakeCallTree = sinon.createStubInstance(TimelineUtils.AICallTree.AICallTree);
-           UI.Context.Context.instance().setFlavor(TimelineUtils.AICallTree.AICallTree, fakeCallTree);
+           const focus = TimelineUtils.AIContext.AgentFocus.fromCallTree(fakeCallTree);
+           UI.Context.Context.instance().setFlavor(TimelineUtils.AIContext.AgentFocus, focus);
+
            Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
            const {panel, view} =
                await createAiAssistancePanel({aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE});
            panel.handleAction('drjones.performance-panel-context');
 
-           assert.isFalse(view.input.isTextInputDisabled);
            assert.strictEqual(view.input.inputPlaceholder, 'Ask a question about the selected item and its call tree');
+           assert.isFalse(view.input.isTextInputDisabled);
          });
     });
 
@@ -1287,8 +1517,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
         },
       });
 
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
       const {panel, view} =
           await createAiAssistancePanel({aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE});
 
@@ -1331,8 +1560,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
           multimodal: false,
         },
       });
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
       const {view} = await createAiAssistancePanel();
 
       assert.isFalse(view.input.multimodalInputEnabled);
@@ -1351,8 +1579,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
           multimodalUploadInput: false,
         },
       });
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
       const {view} = await createAiAssistancePanel();
 
       assert.isTrue(view.input.multimodalInputEnabled);
@@ -1370,8 +1597,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
           multimodal: true,
         },
       });
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
       const {view} = await createAiAssistancePanel();
 
       assert.isTrue(view.input.multimodalInputEnabled);
@@ -1398,8 +1624,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
           multimodalUploadInput: true,
         },
       });
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
       const {view} = await createAiAssistancePanel();
       const blob = new Blob(['imageInput'], {type: 'image/jpeg'});
 
@@ -1426,8 +1651,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
           multimodal: true,
         },
       });
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
       const {view} = await createAiAssistancePanel({aidaClient: mockAidaClient([[{explanation: 'test'}]])});
 
       assert.isTrue(view.input.multimodalInputEnabled);
@@ -1460,8 +1684,7 @@ describeWithMockConnection('AI Assistance Panel', () => {
           multimodal: true,
         },
       });
-      UI.Context.Context.instance().setFlavor(
-          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      viewManagerIsViewVisibleStub.callsFake(viewName => viewName === 'elements');
       const {view} = await createAiAssistancePanel();
 
       assert.isUndefined(view.input.imageInput);
@@ -1477,305 +1700,115 @@ describeWithMockConnection('AI Assistance Panel', () => {
     });
   });
 
-  describe('handleExternalRequest', () => {
-    const explanation = 'I need more information';
-
-    beforeEach(() => {
-      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
-      updateHostConfig({
-        devToolsFreestyler: {
-          enabled: true,
-        },
-      });
+  describe('getResponseMarkdown', () => {
+    let snapshotTester: SnapshotTester;
+    before(async () => {
+      snapshotTester = new SnapshotTester(import.meta);
+      await snapshotTester.load();
     });
 
-    it('can be blocked by a setting', async () => {
-      Common.Settings.moduleSetting('ai-assistance-enabled').set(false);
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-      });
-      try {
-        await panel.handleExternalRequest(
-            'Please help me debug this problem', AiAssistanceModel.ConversationType.STYLING);
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(
-            err.message, 'For AI features to be available, you need to enable AI assistance in DevTools settings.');
-      }
+    after(async () => {
+      await snapshotTester.finish();
     });
 
-    it('can be blocked by feature availability', async () => {
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED,
-      });
-      try {
-        await panel.handleExternalRequest(
-            'Please help me debug this problem', AiAssistanceModel.ConversationType.STYLING);
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(
-            err.message, 'This feature is only available when you sign into Chrome with your Google account.');
-      }
-    });
+    it('should generate correct markdown from a message object', function() {
+      const message: AiAssistancePanel.ModelChatMessage = {
+        entity: AiAssistancePanel.ChatMessageEntity.MODEL,
+        steps: [
+          {
+            isLoading: false,
+            contextDetails: [
+              {title: 'Detail 1', text: '*Some markdown text'},
+              {title: 'Detail 2', text: 'Some text', codeLang: 'js'},
+            ],
+          },
+          {
+            isLoading: false,
+            title: 'Step Title',
+            thought: 'Step Thought',
+            code: 'console.log("hello");',
+            output: 'hello',
+          },
+        ],
+        answer: 'Final answer.',
+      };
 
-    it('can be blocked by user age', async () => {
-      updateHostConfig({
-        aidaAvailability: {
-          blockedByAge: true,
-        },
-        devToolsFreestyler: {
-          enabled: true,
-        },
-      });
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-      });
-      try {
-        await panel.handleExternalRequest(
-            'Please help me debug this problem', AiAssistanceModel.ConversationType.STYLING);
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(err.message, 'This feature is only available to users who are 18 years of age or older.');
-      }
+      const result = AiAssistancePanel.getResponseMarkdown(message);
+      snapshotTester.assert(this, result);
     });
+  });
 
-    it('returns an explanation for styling assistance requests', async () => {
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-      });
-      const snackbarShowStub = sinon.stub(Snackbars.Snackbar.Snackbar, 'show');
-      const response = await panel.handleExternalRequest(
-          'Please help me debug this problem', AiAssistanceModel.ConversationType.STYLING);
-      assert.strictEqual(response.response, explanation);
-      sinon.assert.calledOnceWithExactly(snackbarShowStub, {message: 'DevTools received an external request'});
+  describe('a11y announcements', () => {
+    let liveAnnouncerStatusStub: sinon.SinonStub;
+    beforeEach(() => {
+      liveAnnouncerStatusStub = sinon.stub(UI.ARIAUtils.LiveAnnouncer, 'status').returns();
     });
 
-    it('handles styling assistance requests which contain a selector', async () => {
-      const target = createTarget();
-      const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
-      assert.exists(runtimeModel);
-      runtimeModel.executionContextCreated({
-        id: 1 as Protocol.Runtime.ExecutionContextId,
-        origin: urlString`http://www.example.com`,
-        name: 'name',
-        uniqueId: 'uniqueId',
-      });
-      const executionContext = runtimeModel.defaultExecutionContext();
-      assert.isNotNull(executionContext);
-      const evaluateStub = sinon.stub().returns({object: {objectId: 'some-id'}});
-      executionContext.evaluate = evaluateStub;
-      const callFunctionOnStub = sinon.stub().returns({object: {}});
-      executionContext.callFunctionOn = callFunctionOnStub;
-
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-      });
-      const response = await panel.handleExternalRequest(
-          'Please help me debug this problem', AiAssistanceModel.ConversationType.STYLING, 'h1');
-      assert.strictEqual(response.response, explanation);
-      sinon.assert.calledOnce(evaluateStub);
-      sinon.assert.calledOnce(callFunctionOnStub);
-      assert.strictEqual(callFunctionOnStub.getCall(0).args[0].arguments[1].value, 'h1');
-    });
+    it('should announce the context title from the agent as status', async () => {
+      const stubbedResponses: AsyncGenerator<AiAssistanceModel.ResponseData> = (async function*() {
+        yield {
+          type: AiAssistanceModel.ResponseType.CONTEXT,
+          title: 'context-title',
+          details: [{title: 'mock', text: 'mock'}]
+        };
+      })();
+      sinon.stub(AiAssistanceModel.StylingAgent.prototype, 'run').returns(stubbedResponses);
+      const {panel, view} = await createAiAssistancePanel();
 
-    it('throws an error if no answer could be generated', async () => {
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([
-          [{
-            explanation: `ACTION
-$0.style.backgroundColor = 'red'
-STOP`,
-          }],
-        ])
-      });
-      try {
-        await panel.handleExternalRequest(
-            'Please help me debug this problem', AiAssistanceModel.ConversationType.STYLING);
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(err.message, 'Something went wrong. No answer was generated.');
-      }
-    });
+      panel.handleAction('freestyler.elements-floating-button');
+      (await view.nextInput).onTextSubmit('test');
+      await view.nextInput;
 
-    it('persists external conversations to history', async () => {
-      const {panel, view} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-      });
-      await panel.handleExternalRequest(
-          'Please help me debug this problem', AiAssistanceModel.ConversationType.STYLING);
-      const {contextMenu, id} = openHistoryContextMenu(view.input, '[External] Please help me debug this problem');
-      assert.isDefined(id);
-      contextMenu.invokeHandler(id);
-      assert.isTrue((await view.nextInput).isReadOnly);
-      assert.deepEqual(view.input.messages, [
-        {
-          entity: AiAssistancePanel.ChatMessageEntity.USER,
-          imageInput: undefined,
-          text: 'Please help me debug this problem',
-        },
-        {
-          answer: explanation,
-          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
-          rpcId: undefined,
-          suggestions: undefined,
-          steps: [],
-        },
-      ]);
+      assert.isTrue(
+          liveAnnouncerStatusStub.calledWith('context-title'),
+          'Expected live announcer status to be called with the context title');
     });
 
-    it('can switch contexts', async () => {
-      const steps = [
-        {
-          contextDetails: [
-            {
-              text: 'Request URL: https://a.test\n\nRequest headers:\ncontent-type: bar1',
-              title: 'Request',
-            },
-            {
-              text: 'Response Status: 200 \n\nResponse headers:\ncontent-type: bar2\nx-forwarded-for: bar3',
-              title: 'Response',
-            },
-            {
-              text:
-                  'Queued at (timestamp): 0 μs\nStarted at (timestamp): 0 μs\nConnection start (stalled) (duration): -\nDuration (duration): -',
-              title: 'Timing',
-            },
-            {
-              text: '- URL: https://a.test',
-              title: 'Request initiator chain',
-            },
-          ],
-          isLoading: false,
-          sideEffect: undefined,
-          title: 'Analyzing network data',
-        },
-      ] as AiAssistancePanel.Step[];
-
-      createTarget();
-      await createNetworkPanelForMockConnection();
-      updateHostConfig({
-        devToolsFreestyler: {
-          enabled: true,
-        },
-      });
-      const networkRequest = createNetworkRequest({
-        url: urlString`https://a.test`,
-      });
-      UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, networkRequest);
-      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
-      const {panel, view} = await createAiAssistancePanel(
-          {aidaClient: mockAidaClient([[{explanation: 'test'}], [{explanation: 'test2'}], [{explanation: 'test3'}]])});
-
-      panel.handleAction('drjones.network-floating-button');
-      (await view.nextInput).onTextSubmit('User question to DrJones?');
-      assert.deepEqual((await view.nextInput).messages, [
-        {
-          entity: AiAssistancePanel.ChatMessageEntity.USER,
-          text: 'User question to DrJones?',
-          imageInput: undefined,
-        },
-        {
-          answer: 'test',
-          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
-          rpcId: undefined,
-          suggestions: undefined,
-          steps,
-        },
-      ]);
-
-      const response = await panel.handleExternalRequest(
-          'Please help me debug this problem', AiAssistanceModel.ConversationType.STYLING);
-      assert.strictEqual(response.response, 'test2');
+    it('should announce answer loading when answer starts streaming as status', async () => {
+      const stubbedResponses: AsyncGenerator<AiAssistanceModel.ResponseData> = (async function*() {
+        yield {
+          type: AiAssistanceModel.ResponseType.ANSWER,
+          text: 'streaming ans',
+          complete: false,
+        };
+
+        yield {
+          type: AiAssistanceModel.ResponseType.ANSWER,
+          text: 'streaming answer is not compl',
+          complete: false,
+        };
+      })();
+      sinon.stub(AiAssistanceModel.StylingAgent.prototype, 'run').returns(stubbedResponses);
+      const {panel, view} = await createAiAssistancePanel();
 
-      view.input.onTextSubmit('Follow-up question to DrJones?');
-      assert.deepEqual((await view.nextInput).messages, [
-        {
-          entity: AiAssistancePanel.ChatMessageEntity.USER,
-          text: 'User question to DrJones?',
-          imageInput: undefined,
-        },
-        {
-          answer: 'test',
-          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
-          rpcId: undefined,
-          suggestions: undefined,
-          steps,
-        },
-        {
-          entity: AiAssistancePanel.ChatMessageEntity.USER,
-          text: 'Follow-up question to DrJones?',
-          imageInput: undefined,
-        },
-        {
-          answer: 'test3',
-          entity: AiAssistancePanel.ChatMessageEntity.MODEL,
-          rpcId: undefined,
-          suggestions: undefined,
-          steps,
-        },
-      ]);
-    });
+      panel.handleAction('freestyler.elements-floating-button');
+      (await view.nextInput).onTextSubmit('test');
+      await view.nextInput;
 
-    it('throws an error for file assistance requests', async () => {
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-      });
-      try {
-        await panel.handleExternalRequest('Please help me debug this problem', AiAssistanceModel.ConversationType.FILE);
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(
-            err.message,
-            `Debugging with an agent of type '${AiAssistanceModel.ConversationType.FILE}' is not implemented yet.`);
-      }
+      assert.isTrue(liveAnnouncerStatusStub.calledOnce, 'Expected live announcer status to be called only once');
+      assert.isTrue(
+          liveAnnouncerStatusStub.calledWith('Answer loading'),
+          'Expected live announcer status to be called with the text "Answer loading"');
     });
 
-    it('throws an error for network assistance requests', async () => {
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-      });
-      try {
-        await panel.handleExternalRequest(
-            'Please help me debug this problem', AiAssistanceModel.ConversationType.NETWORK);
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(
-            err.message,
-            `Debugging with an agent of type '${AiAssistanceModel.ConversationType.NETWORK}' is not implemented yet.`);
-      }
-    });
+    it('should announce answer ready when answer completes streaming', async () => {
+      const stubbedResponses: AsyncGenerator<AiAssistanceModel.ResponseData> = (async function*() {
+        yield {
+          type: AiAssistanceModel.ResponseType.ANSWER,
+          text: 'streaming answer is not completed before but now it is complete',
+          complete: true,
+        };
+      })();
+      sinon.stub(AiAssistanceModel.StylingAgent.prototype, 'run').returns(stubbedResponses);
+      const {panel, view} = await createAiAssistancePanel();
 
-    it('throws an error for performance assistance requests', async () => {
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-      });
-      try {
-        await panel.handleExternalRequest(
-            'Please help me debug this problem', AiAssistanceModel.ConversationType.PERFORMANCE);
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(
-            err.message,
-            `Debugging with an agent of type '${
-                AiAssistanceModel.ConversationType.PERFORMANCE}' is not implemented yet.`);
-      }
-    });
+      panel.handleAction('freestyler.elements-floating-button');
+      (await view.nextInput).onTextSubmit('test');
+      await view.nextInput;
 
-    it('throws an error for performance-insight assistance requests', async () => {
-      const {panel} = await createAiAssistancePanel({
-        aidaClient: mockAidaClient([[{explanation}]]),
-      });
-      try {
-        await panel.handleExternalRequest(
-            'Please help me debug this problem', AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT);
-        assert.fail('Expected `handleExternalRequest` to throw');
-      } catch (err) {
-        assert.strictEqual(
-            err.message,
-            `Debugging with an agent of type '${
-                AiAssistanceModel.ConversationType.PERFORMANCE_INSIGHT}' is not implemented yet.`);
-      }
+      assert.isTrue(
+          liveAnnouncerStatusStub.calledWith('Answer ready'),
+          'Expected live announcer status to be called with the text "Answer loading"');
     });
   });
 });
@@ -1800,4 +1833,59 @@ describeWithEnvironment('AiAssistancePanel.ActionDelegate', () => {
     const [size] = await setDrawerSizeCall;
     assert.strictEqual(size, totalSizeStub / 4);
   });
+
+  describe('Export conversation button', () => {
+    it('is not visible for empty conversation', async () => {
+      const {view} = await createAiAssistancePanel();
+      assert.isFalse(view.input.showActiveConversationActions);
+    });
+
+    it('should show export button if there are history items and disable it when loading', async () => {
+      const {promise, resolve} = Promise.withResolvers<void>();
+      const stubbedResponses: AsyncGenerator<AiAssistanceModel.ResponseData> = (async function*() {
+        yield {
+          type: AiAssistanceModel.ResponseType.THOUGHT,
+          thought: 'first response answer ',
+        };
+        await promise;
+        yield {
+          type: AiAssistanceModel.ResponseType.ANSWER,
+          text: 'second response answer',
+          complete: true,
+        };
+      })();
+      sinon.stub(AiAssistanceModel.StylingAgent.prototype, 'run').returns(stubbedResponses);
+
+      const {panel, view} = await createAiAssistancePanel();
+      panel.handleAction('freestyler.elements-floating-button');
+
+      assert.isFalse(view.input.showActiveConversationActions, 'should not show export conversation action by default');
+      (await view.nextInput).onTextSubmit('test');
+      await view.nextInput;
+      assert.isTrue(view.input.showActiveConversationActions, 'should show active conversation actions while loading');
+      assert.isTrue(view.input.isLoading, 'button should be disabled while loading');
+      resolve();
+      await view.nextInput;
+      assert.isTrue(view.input.showActiveConversationActions, 'should show active conversation actions after loading');
+    });
+
+    it('should call the save function when export conversation button is clicked', async () => {
+      const fileManager = Workspace.FileManager.FileManager.instance();
+      const saveSpy = sinon.stub(fileManager, 'save');
+      const closeSpy = sinon.stub(fileManager, 'close');
+      const {panel, view} = await createAiAssistancePanel({
+        aidaClient: mockAidaClient([[{explanation: 'test'}]]),
+      });
+      panel.handleAction('freestyler.elements-floating-button');
+      (await view.nextInput).onTextSubmit('test question');
+      await view.nextInput;
+      await view.input.onExportConversationClick();
+
+      sinon.assert.calledOnce(saveSpy);
+      sinon.assert.calledOnce(closeSpy);
+
+      const [fileName] = saveSpy.getCall(0).args;
+      assert.strictEqual(fileName, 'devtools_test_question.md');
+    });
+  });
 });