snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

tests/affine-cloud-copilot/e2e/chat-with/attachments.spec.ts

@@ -0,0 +1,117 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe.configure({ mode: 'serial' });
+
+test.describe('AIChatWith/Attachments', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('support chat with attachment', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const textContent = 'AttachmentEEee is a cute cat';
+    const buffer = Buffer.from(textContent);
+
+    await utils.chatPanel.chatWithAttachments(
+      page,
+      [
+        {
+          name: 'test.txt',
+          mimeType: 'text/plain',
+          buffer: buffer,
+        },
+      ],
+      'What is AttachmentEEee? Answer with a citation.'
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is AttachmentEEee? Answer with a citation.',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content, message } =
+        await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(/EEee/);
+      const references = await message
+        .locator('affine-footnote-node')
+        .evaluateAll(nodes =>
+          nodes.map(
+            node =>
+              (
+                node as HTMLElement & {
+                  footnote?: { reference?: Record<string, unknown> };
+                }
+              ).footnote?.reference
+          )
+        );
+      expect(references).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            type: 'attachment',
+            artifactId: expect.any(String),
+          }),
+        ])
+      );
+    }).toPass({ timeout: 10000 });
+  });
+
+  test('support chat with multiple attachments', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const textContent1 = 'This attachment describes a cute cat.';
+    const textContent2 = 'This attachment describes a cute dog.';
+    const buffer1 = Buffer.from(textContent1);
+    const buffer2 = Buffer.from(textContent2);
+    const firstName = 'cat-document.txt';
+    const secondName = 'dog-document.txt';
+
+    await utils.chatPanel.chatWithAttachments(
+      page,
+      [
+        {
+          name: firstName,
+          mimeType: 'text/plain',
+          buffer: buffer1,
+        },
+        {
+          name: secondName,
+          mimeType: 'text/plain',
+          buffer: buffer2,
+        },
+      ],
+      `Which animal is described in ${firstName} and which animal is described in ${secondName}? Answer with both attachment names.`
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: `Which animal is described in ${firstName} and which animal is described in ${secondName}? Answer with both attachment names.`,
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toContain(firstName);
+      expect(content).toContain(secondName);
+      expect(content).toMatch(/cat/i);
+      expect(content).toMatch(/dog/i);
+    }).toPass({ timeout: 20000 });
+  });
+});

tests/affine-cloud-copilot/e2e/chat-with/collections.spec.ts

@@ -0,0 +1,124 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe.configure({ mode: 'serial' });
+
+test.describe('AIChatWith/Collections', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+    await utils.editor.clearAllCollections(page);
+
+    await utils.testUtils.createNewPage(page);
+  });
+
+  test.afterEach(async ({ loggedInPage: page, utils }) => {
+    // clear all collections
+    await utils.editor.clearAllCollections(page);
+  });
+
+  test('should support chat with collection', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const randomStr = Math.random().toString(36).substring(2, 6);
+    // Create two collections
+    await utils.editor.createCollectionAndDoc(
+      page,
+      'Collection 1',
+      `Collection${randomStr} is a cute dog`
+    );
+
+    await utils.chatPanel.chatWithCollections(page, ['Collection 1']);
+    await utils.settings.openSettingsPanel(page);
+    await utils.settings.disableWorkspaceEmbedding(page);
+    await utils.settings.closeSettingsPanel(page);
+    await utils.chatPanel.makeChat(
+      page,
+      `What is Collection${randomStr}? Use English and answer with a citation.`
+    );
+    await expect(
+      page.getByText(
+        'One or more selected sources are unavailable. Check the sources or workspace AI indexing settings, then retry.'
+      )
+    ).toBeVisible();
+    expect(
+      (await utils.chatPanel.collectHistory(page)).filter(
+        message => message.role === 'user'
+      )
+    ).toHaveLength(1);
+    await utils.settings.openSettingsPanel(page);
+    await utils.settings.enableWorkspaceEmbedding(page);
+    await utils.settings.closeSettingsPanel(page);
+    await page.getByTestId('ai-error-action-button').click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: `What is Collection${randomStr}? Use English and answer with a citation.`,
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content, message } =
+        await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(new RegExp(`Collection${randomStr}.*dog`));
+      expect(
+        await message.locator('affine-footnote-node').count()
+      ).toBeGreaterThanOrEqual(1);
+    }).toPass();
+  });
+
+  test('should support chat with multiple collections', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const randomStr1 = Math.random().toString(36).substring(2, 6);
+    const randomStr2 = Math.random().toString(36).substring(2, 6);
+    // Create two collections
+    await utils.editor.createCollectionAndDoc(
+      page,
+      'Collection 2',
+      `Collection${randomStr1} is a cute cat`
+    );
+
+    await utils.editor.createCollectionAndDoc(
+      page,
+      'Collection 3',
+      `Collection${randomStr2} is a cute dog`
+    );
+
+    await utils.chatPanel.chatWithCollections(page, [
+      'Collection 2',
+      'Collection 3',
+    ]);
+    await utils.chatPanel.makeChat(
+      page,
+      `What is Collection${randomStr1}? What is Collection${randomStr2}? Use English and cite both sources.`
+    );
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: `What is Collection${randomStr1}? What is Collection${randomStr2}? Use English and cite both sources.`,
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content, message } =
+        await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(new RegExp(`Collection${randomStr1}.*cat`));
+      expect(content).toMatch(new RegExp(`Collection${randomStr2}.*dog`));
+      expect(
+        await message.locator('affine-footnote-node').count()
+      ).toBeGreaterThanOrEqual(2);
+    }).toPass();
+  });
+});

tests/affine-cloud-copilot/e2e/chat-with/doc.spec.ts

@@ -0,0 +1,89 @@
+import { focusDocTitle } from '@affine-test/kit/utils/editor';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Doc', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('support chat with specified doc', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    // Initialize the doc
+    await focusDocTitle(page);
+    await page.keyboard.insertText('Test Doc');
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText('DocEEee is a cute cat');
+    await utils.editor.waitForCurrentDocSynced(page);
+
+    await utils.chatPanel.chatWithDoc(page, 'Test Doc');
+
+    await utils.chatPanel.makeChat(page, 'What is DocEEee?');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is DocEEee?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(/DocEEee/);
+    }).toPass({ timeout: 10000 });
+  });
+
+  // FIXME: This test is flaky, need to fix it.
+  test.skip('support chat with specified docs', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    // Initialize the doc 1
+    await focusDocTitle(page);
+    await page.keyboard.insertText('Test Doc1');
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText('DocEEee is a cute cat');
+    await utils.editor.waitForCurrentDocSynced(page);
+
+    // Initialize the doc 2
+    await clickNewPageButton(page);
+    await waitForEditorLoad(page);
+    await focusDocTitle(page);
+    await page.keyboard.insertText('Test Doc2');
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText('DocFFff is a cute dog');
+    await utils.editor.waitForCurrentDocSynced(page);
+
+    await utils.chatPanel.chatWithDoc(page, 'Test Doc1');
+    await utils.chatPanel.chatWithDoc(page, 'Test Doc2');
+
+    await utils.chatPanel.makeChat(page, 'What is DocEEee? What is DocFFff?');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is DocEEee? What is DocFFff?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(/DocEEee/);
+      expect(content).toMatch(/DocFFff/);
+    }).toPass({ timeout: 10000 });
+  });
+});

tests/affine-cloud-copilot/e2e/chat-with/edgeless-mindmap.spec.ts

@@ -0,0 +1,181 @@
+import type { EdgelessRootBlockComponent } from '@blocksuite/affine/blocks/root';
+import type { GfxModel } from '@blocksuite/std/gfx';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+type MindmapSnapshot = {
+  childCount: number;
+  count: number;
+  id: string | null;
+};
+
+test.describe('AIChatWith/EdgelessMindMap', () => {
+  test.describe.configure({ timeout: 180000 });
+
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should preview the regenerated mindmap before replacing it', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    let id: string;
+    let originalChildCount: number;
+    const { regenerateMindMap } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        id = await utils.editor.createMindmap(page);
+        originalChildCount = await page.evaluate(mindmapId => {
+          const edgelessBlock = document.querySelector(
+            'affine-edgeless-root'
+          ) as EdgelessRootBlockComponent;
+          const mindmap = edgelessBlock.gfx.getElementById(mindmapId) as {
+            tree: { children?: unknown[] };
+          } | null;
+          return mindmap?.tree.children?.length ?? 0;
+        }, id);
+      },
+      async () => {
+        const { id: rootId } = await utils.editor.getMindMapNode(
+          page,
+          id!,
+          [0]
+        );
+        await utils.editor.selectElementInEdgeless(page, [rootId]);
+      }
+    );
+
+    const { answer, responses } = await regenerateMindMap();
+    expect(responses).toEqual(new Set(['replace-selection']));
+    await expect
+      .poll(
+        async () => {
+          return answer
+            .locator('mini-mindmap-preview')
+            .evaluate(async preview => {
+              const walk = (root: ParentNode): Element[] => {
+                const results: Element[] = [];
+
+                for (const element of root.querySelectorAll('*')) {
+                  results.push(element);
+                  if (element.shadowRoot) {
+                    results.push(...walk(element.shadowRoot));
+                  }
+                }
+
+                return results;
+              };
+
+              await customElements.whenDefined('mini-mindmap-preview');
+
+              const previewElement =
+                preview instanceof HTMLElement
+                  ? (preview as HTMLElement & {
+                      updateComplete?: Promise<unknown>;
+                    })
+                  : null;
+
+              await previewElement?.updateComplete;
+              await new Promise(resolve =>
+                requestAnimationFrame(() => resolve(null))
+              );
+
+              const shadowRoot = previewElement?.shadowRoot ?? null;
+              const descendants = walk(shadowRoot ?? preview);
+              const surface = descendants.find(
+                element =>
+                  element instanceof HTMLElement &&
+                  element.classList.contains('affine-mini-mindmap-surface')
+              ) as HTMLElement | undefined;
+              const surfaceRect = surface?.getBoundingClientRect();
+
+              return {
+                hasShadowRoot: !!shadowRoot,
+                hasRootBlock: descendants.some(
+                  element =>
+                    element.tagName.toLowerCase() === 'mini-mindmap-root-block'
+                ),
+                hasSurfaceBlock: descendants.some(
+                  element =>
+                    element.tagName.toLowerCase() ===
+                    'mini-mindmap-surface-block'
+                ),
+                surfaceReady:
+                  !!surface &&
+                  (surfaceRect?.width ?? 0) > 0 &&
+                  (surfaceRect?.height ?? 0) > 0,
+              };
+            });
+        },
+        { timeout: 15_000 }
+      )
+      .toEqual({
+        hasShadowRoot: true,
+        hasRootBlock: true,
+        hasSurfaceBlock: true,
+        surfaceReady: true,
+      });
+    const replace = answer.getByTestId('answer-replace');
+    await expect(replace).toBeVisible();
+    await replace.click({ force: true });
+
+    await expect
+      .poll(
+        async () => {
+          return page.evaluate<MindmapSnapshot>(() => {
+            const edgelessBlock = document.querySelector(
+              'affine-edgeless-root'
+            ) as EdgelessRootBlockComponent;
+            const mindmaps = edgelessBlock?.gfx.gfxElements.filter(
+              (el: GfxModel) => 'type' in el && el.type === 'mindmap'
+            ) as unknown as Array<{
+              id: string;
+              tree: {
+                children?: unknown[];
+                element: { text?: { toString(): string } };
+              };
+            }>;
+
+            const mindmap = mindmaps?.[0];
+            return {
+              count: mindmaps?.length ?? 0,
+              id: mindmap?.id ?? null,
+              childCount: mindmap?.tree.children?.length ?? 0,
+            };
+          });
+        },
+        { timeout: 15_000 }
+      )
+      .toMatchObject({
+        count: 1,
+      });
+
+    const replacedMindmap = await page.evaluate<MindmapSnapshot>(() => {
+      const edgelessBlock = document.querySelector(
+        'affine-edgeless-root'
+      ) as EdgelessRootBlockComponent;
+      const mindmaps = edgelessBlock?.gfx.gfxElements.filter(
+        (el: GfxModel) => 'type' in el && el.type === 'mindmap'
+      ) as unknown as Array<{
+        id: string;
+        tree: {
+          children?: unknown[];
+          element: { text?: { toString(): string } };
+        };
+      }>;
+      const mindmap = mindmaps?.[0];
+
+      return {
+        count: mindmaps?.length ?? 0,
+        id: mindmap?.id ?? null,
+        childCount: mindmap?.tree.children?.length ?? 0,
+      };
+    });
+
+    expect(replacedMindmap.childCount).toBeGreaterThan(originalChildCount!);
+    expect(replacedMindmap.childCount).toBeGreaterThan(0);
+  });
+});

tests/affine-cloud-copilot/e2e/chat-with/edgeless-note-block.spec.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/EdgelessNoteBlock', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support insert a new note block below the current', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const { translate } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(page, 'Apple');
+      }
+    );
+    const { answer } = await translate('Simplified Chinese');
+    await expect(answer).toHaveText(/苹果/, { timeout: 10000 });
+    const insertBelow = answer.getByTestId('answer-insert-below');
+    await insertBelow.click();
+    await expect(page.locator('affine-edgeless-note').nth(1)).toHaveText(
+      /苹果/
+    );
+  });
+});

tests/affine-cloud-copilot/e2e/chat-with/edgeless-text-block.spec.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/EdgelessTextBlock', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support insert answer below the current text', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const { translate } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(page, 'Apple');
+      }
+    );
+    const { answer } = await translate('Simplified Chinese');
+    await expect(answer).toHaveText(/苹果/, { timeout: 10000 });
+    const insertBelow = answer.getByTestId('answer-insert-below');
+    await insertBelow.click();
+    await expect(page.locator('affine-edgeless-text')).toHaveText(
+      /Apple[\s\S]*苹果/
+    );
+  });
+});

tests/affine-cloud-copilot/e2e/chat-with/network.spec.ts

@@ -0,0 +1,28 @@
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Network', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test.skip('should support chat with network if network search enabled', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    await utils.chatPanel.makeChat(
+      page,
+      'What is the weather like in Shanghai today?'
+    );
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is the weather like in Shanghai today?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+});

tests/affine-cloud-copilot/e2e/chat-with/reasoning.spec.ts

@@ -0,0 +1,30 @@
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Reasoning', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test.skip('should support chat with reasoning', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    await utils.chatPanel.enableReasoning(page);
+    await utils.chatPanel.makeChat(
+      page,
+      'How do you measure exactly 4 liters of water using a jug that only holds 3 and 5 liters?'
+    );
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content:
+          'How do you measure exactly 4 liters of water using a jug that only holds 3 and 5 liters?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+});

tests/affine-cloud-copilot/e2e/chat-with/tags.spec.ts

@@ -0,0 +1,93 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe.configure({ mode: 'serial' });
+
+test.describe('AIChatWith/tags', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+    await utils.editor.clearAllTags(page);
+    await utils.testUtils.createNewPage(page);
+  });
+
+  test.afterEach(async ({ loggedInPage: page, utils }) => {
+    await utils.editor.clearAllTags(page);
+  });
+
+  test.skip('should support chat with tag', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const randomStr = Math.random().toString(36).substring(2, 6);
+    await utils.editor.createTagAndDoc(
+      page,
+      'Tag 1',
+      `Tag${randomStr} is a cute cat`
+    );
+    await utils.chatPanel.chatWithTags(page, ['Tag 1']);
+    await utils.chatPanel.makeChat(
+      page,
+      `What is Tag${randomStr}(Use English)`
+    );
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: `What is Tag${randomStr}(Use English)`,
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+    await expect(async () => {
+      const { content, message } =
+        await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(new RegExp(`Tag${randomStr}.*cat`));
+      await expect(message.locator('affine-footnote-node')).toHaveCount(1);
+    }).toPass();
+  });
+
+  // FIXME: This test is flaky, need to fix it.
+  test.skip('should support chat with multiple tags', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const randomStr1 = Math.random().toString(36).substring(2, 6);
+    const randomStr2 = Math.random().toString(36).substring(2, 6);
+
+    await utils.editor.createTagAndDoc(
+      page,
+      'Tag 2',
+      `Tag${randomStr1} is a cute cat`
+    );
+    await utils.editor.createTagAndDoc(
+      page,
+      'Tag 3',
+      `Tag${randomStr2} is a cute dog`
+    );
+    await utils.chatPanel.chatWithTags(page, ['Tag 2', 'Tag 3']);
+    await utils.chatPanel.makeChat(
+      page,
+      `What is Tag${randomStr1}? What is Tag${randomStr2}?(Use English)`
+    );
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: `What is Tag${randomStr1}? What is Tag${randomStr2}?(Use English)`,
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+    await expect(async () => {
+      const { content, message } =
+        await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(new RegExp(`Tag${randomStr1}.*cat`));
+      expect(content).toMatch(new RegExp(`Tag${randomStr2}.*dog`));
+      await expect(message.locator('affine-footnote-node')).toHaveCount(2);
+    }).toPass();
+  });
+});

tests/affine-cloud-copilot/e2e/chat-with/text.spec.ts

@@ -0,0 +1,181 @@
+import { IS_MAC } from '@blocksuite/global/env';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Text', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support stop generating', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    await utils.editor.askAIWithText(page, 'Appel');
+    await page.getByTestId('action-fix-grammar').click();
+    await expect(page.getByTestId('ai-generating')).toBeVisible();
+    const stop = await page.getByTestId('ai-stop');
+    await stop.click();
+    await expect(page.getByTestId('ai-generating')).not.toBeVisible();
+  });
+
+  test('should support stop generating when click outside', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    await utils.editor.askAIWithText(page, 'Panda');
+    await page.getByTestId('action-generate-image').click();
+    await expect(page.getByTestId('ai-generating')).toBeVisible();
+    await page.mouse.click(0, 0);
+    await expect(
+      page.getByText('AI is generating content. Do you want to stop generating')
+    ).toBeVisible();
+    await page.getByTestId('confirm-modal-confirm').click();
+    await expect(page.getByTestId('ai-generating')).not.toBeVisible();
+  });
+
+  test('should support copy answer', async ({ loggedInPage: page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('Simplified Chinese');
+    await expect(answer).toHaveText(/苹果/, { timeout: 10000 });
+    const copy = answer.getByTestId('answer-copy-button');
+    await copy.click();
+    await expect(answer.getByTestId('answer-copied')).toBeVisible();
+    const clipboardText = await page.evaluate(() =>
+      navigator.clipboard.readText()
+    );
+    expect(clipboardText).toBe('苹果');
+  });
+
+  test('should support insert below', async ({ loggedInPage: page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('Simplified Chinese');
+    await expect(answer).toHaveText(/苹果/, { timeout: 10000 });
+    const insertBelow = answer.getByTestId('answer-insert-below');
+    await insertBelow.click();
+    const content = await utils.editor.getEditorContent(page);
+    expect(content).toBe('Apple\n苹果');
+  });
+
+  test('should support insert above', async ({ loggedInPage: page, utils }) => {
+    const { generateHeadings } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE'
+    );
+    const { answer } = await generateHeadings();
+    await answer.locator('h1').isVisible();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+
+    const insertAbove = answer.getByTestId('answer-insert-above');
+    await insertAbove.click();
+    const content = await utils.editor.getEditorContent(page);
+    expect(content).toBe('AFFiNE\nAFFiNE');
+  });
+
+  test('should support replace selection', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    await utils.editor.focusToEditor(page);
+    await page.keyboard.insertText('I Loev Apple');
+
+    // Select the word "Loev"
+    const SHORT_KEY = IS_MAC ? 'Alt' : 'Control';
+    await page.keyboard.press(`${SHORT_KEY}+ArrowLeft`);
+    await page.keyboard.press('ArrowLeft');
+    await page.keyboard.press(`Shift+${SHORT_KEY}+ArrowLeft`);
+
+    const { fixSpelling } = await utils.editor.showAIMenu(page);
+    const { answer } = await fixSpelling();
+    await expect(answer).toHaveText(/Love/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    const content = await utils.editor.getEditorContent(page);
+    expect(content).toBe('I Love Apple');
+  });
+
+  test('should support continue in chat', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('Simplified Chinese');
+    await expect(answer).toHaveText(/苹果/, { timeout: 10000 });
+    const continueInChat = answer.getByTestId('answer-continue-in-chat');
+    await continueInChat.click();
+    const chatPanelInput = await page.getByTestId('chat-panel-input-container');
+    const quote = await chatPanelInput.getByTestId('chat-selection-quote');
+    await expect(quote).toHaveText(/Apple/, { timeout: 10000 });
+  });
+
+  test('should support regenerate', async ({ loggedInPage: page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('Simplified Chinese');
+    const regenerate = answer.getByTestId('answer-regenerate');
+    await regenerate.click();
+    const content = await utils.editor.getEditorContent(page);
+    expect(content).toBe('Apple');
+  });
+
+  test('should show error when request failed', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    await page.route('**/graphql', route => route.abort('failed'));
+    await utils.editor.askAIWithText(page, 'Appel');
+    await page.getByTestId('action-fix-spelling').click();
+    await expect(page.getByTestId('ai-error')).toBeVisible();
+  });
+
+  test('should support retry when error', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    await page.route('**/graphql', route => route.abort('failed'));
+    await utils.editor.askAIWithText(page, 'Appel');
+    await page.getByTestId('action-fix-spelling').click();
+    const aiPanelContainer = await page.getByTestId('ai-panel-container');
+
+    await page.route('**/graphql', route => route.continue());
+    await aiPanelContainer.getByTestId('error-retry').click();
+    const answer = await utils.editor.waitForAiAnswer(page);
+    await expect(answer).toHaveText(/Apple/, { timeout: 10000 });
+  });
+
+  test('should support discard', async ({ loggedInPage: page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('Simplified Chinese');
+    const discard = answer.getByTestId('answer-discard');
+    await discard.click();
+    await expect(answer).not.toBeVisible();
+    const content = await utils.editor.getEditorContent(page);
+    expect(content).toBe('Apple');
+  });
+
+  test('should support discard when click outside', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('Simplified Chinese');
+    await page.mouse.click(0, 0);
+    await expect(page.getByText('Discard the AI result')).toBeVisible();
+    await page.getByTestId('confirm-modal-confirm').click();
+    await expect(answer).not.toBeVisible();
+    const content = await utils.editor.getEditorContent(page);
+    expect(content).toBe('Apple');
+  });
+
+  test('should focus on textarea', async ({ loggedInPage: page, utils }) => {
+    await utils.editor.askAIWithText(page, 'Apple');
+
+    const textarea = await utils.editor.whatAreYourThoughts(page, 'Coffee');
+
+    await expect(textarea).toBeFocused();
+
+    const value = await textarea.inputValue();
+    expect(value).toBe('Coffee');
+  });
+});