diff --git a/packages/frontend/core/src/blocksuite/ai/_common/config.ts b/packages/frontend/core/src/blocksuite/ai/_common/config.ts
index 8a161f68bd..498e2cbebc 100644
--- a/packages/frontend/core/src/blocksuite/ai/_common/config.ts
+++ b/packages/frontend/core/src/blocksuite/ai/_common/config.ts
@@ -49,6 +49,7 @@ import {
 export const translateSubItem: AISubItemConfig[] = translateLangs.map(lang => {
   return {
     type: lang,
+    testId: `action-translate-${lang}`,
     handler: actionToHandler('translate', AIStarIconWithAnimation, { lang }),
   };
 });
@@ -56,6 +57,7 @@ export const translateSubItem: AISubItemConfig[] = translateLangs.map(lang => {
 export const toneSubItem: AISubItemConfig[] = textTones.map(tone => {
   return {
     type: tone,
+    testId: `action-change-tone-${tone.toLowerCase()}`,
     handler: actionToHandler('changeTone', AIStarIconWithAnimation, { tone }),
   };
 });
@@ -66,6 +68,7 @@ export function createImageFilterSubItem(
   return imageFilterStyles.map(style => {
     return {
       type: style,
+      testId: `action-image-filter-${style.toLowerCase().replace(' ', '-')}`,
       handler: actionToHandler(
         'filterImage',
         AIImageIconWithAnimation,
@@ -84,6 +87,7 @@ export function createImageProcessingSubItem(
   return imageProcessingTypes.map(type => {
     return {
       type,
+      testId: `action-image-processing-${type.toLowerCase().replace(' ', '-')}`,
       handler: actionToHandler(
         'processImage',
         AIImageIconWithAnimation,
@@ -146,36 +150,42 @@ const EditAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Translate to',
+      testId: 'action-translate',
       icon: LanguageIcon(),
       showWhen: textBlockShowWhen,
       subItem: translateSubItem,
     },
     {
       name: 'Change tone to',
+      testId: 'action-change-tone',
       icon: ToneIcon(),
       showWhen: textBlockShowWhen,
       subItem: toneSubItem,
     },
     {
       name: 'Improve writing',
+      testId: 'action-improve-writing',
       icon: ImproveWritingIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('improveWriting', AIStarIconWithAnimation),
     },
     {
       name: 'Make it longer',
+      testId: 'action-make-it-longer',
       icon: LongerIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('makeLonger', AIStarIconWithAnimation),
     },
     {
       name: 'Make it shorter',
+      testId: 'action-make-it-shorter',
       icon: ShorterIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('makeShorter', AIStarIconWithAnimation),
     },
     {
       name: 'Continue writing',
+      testId: 'action-continue-writing',
       icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('continueWriting', AIPenIconWithAnimation),
@@ -188,30 +198,35 @@ const DraftAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Write an article about this',
+      testId: 'action-write-article',
       icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writeArticle', AIPenIconWithAnimation),
     },
     {
       name: 'Write a tweet about this',
+      testId: 'action-write-twitter-post',
       icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writeTwitterPost', AIPenIconWithAnimation),
     },
     {
       name: 'Write a poem about this',
+      testId: 'action-write-poem',
       icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writePoem', AIPenIconWithAnimation),
     },
     {
       name: 'Write a blog post about this',
+      testId: 'action-write-blog-post',
       icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writeBlogPost', AIPenIconWithAnimation),
     },
     {
       name: 'Brainstorm ideas about this',
+      testId: 'action-brainstorm',
       icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('brainstorm', AIPenIconWithAnimation),
@@ -224,36 +239,42 @@ const ReviewWIthAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Fix spelling',
+      testId: 'action-fix-spelling',
       icon: DoneIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('fixSpelling', AIStarIconWithAnimation),
     },
     {
       name: 'Fix grammar',
+      testId: 'action-fix-grammar',
       icon: DoneIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('improveGrammar', AIStarIconWithAnimation),
     },
     {
       name: 'Explain this image',
+      testId: 'action-explain-image',
       icon: PenIcon(),
       showWhen: imageBlockShowWhen,
       handler: actionToHandler('explainImage', AIStarIconWithAnimation),
     },
     {
       name: 'Explain this code',
+      testId: 'action-explain-code',
       icon: ExplainIcon(),
       showWhen: codeBlockShowWhen,
       handler: actionToHandler('explainCode', AIStarIconWithAnimation),
     },
     {
       name: 'Check code error',
+      testId: 'action-check-code-error',
       icon: ExplainIcon(),
       showWhen: codeBlockShowWhen,
       handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
     },
     {
       name: 'Explain selection',
+      testId: 'action-explain-selection',
       icon: SelectionIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('explain', AIStarIconWithAnimation),
@@ -266,12 +287,14 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Summarize',
+      testId: 'action-summarize',
       icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('summary', AIPenIconWithAnimation),
     },
     {
       name: 'Generate headings',
+      testId: 'action-generate-headings',
       icon: PenIcon(),
       beta: true,
       handler: actionToHandler('createHeadings', AIPenIconWithAnimation),
@@ -293,24 +316,28 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
     },
     {
       name: 'Generate an image',
+      testId: 'action-generate-image',
       icon: ImageIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('createImage', AIImageIconWithAnimation),
     },
     {
       name: 'Generate outline',
+      testId: 'action-generate-outline',
       icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writeOutline', AIPenIconWithAnimation),
     },
     {
       name: 'Brainstorm ideas with mind map',
+      testId: 'action-brainstorm-mindmap',
       icon: MindmapIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('brainstormMindmap', AIPenIconWithAnimation),
     },
     {
       name: 'Generate presentation',
+      testId: 'action-generate-presentation',
       icon: PresentationIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('createSlides', AIPresentationIconWithAnimation),
@@ -318,6 +345,7 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
     },
     {
       name: 'Make it real',
+      testId: 'action-make-it-real',
       icon: MakeItRealIcon(),
       beta: true,
       showWhen: textBlockShowWhen,
@@ -325,6 +353,7 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
     },
     {
       name: 'Find actions',
+      testId: 'action-find-actions',
       icon: SearchIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('findActions', AIStarIconWithAnimation),
@@ -338,6 +367,7 @@ const OthersAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Continue with AI',
+      testId: 'action-continue-with-ai',
       icon: CommentIcon(),
       handler: host => {
         const panel = getAIPanelWidget(host);
@@ -366,6 +396,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
       items: [
         {
           name: 'Explain this image',
+          testId: 'action-explain-image',
           icon: ImageIcon(),
           showWhen: () => true,
           handler: actionToHandler(
@@ -382,6 +413,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
       items: [
         {
           name: 'Generate an image',
+          testId: 'action-generate-image',
           icon: ImageIcon(),
           showWhen: () => true,
           handler: actionToHandler(
@@ -393,6 +425,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
         },
         {
           name: 'Image processing',
+          testId: 'action-image-processing',
           icon: ImageIcon(),
           showWhen: () => true,
           subItem: createImageProcessingSubItem(blockActionTrackerOptions),
@@ -401,6 +434,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
         },
         {
           name: 'AI image filter',
+          testId: 'action-ai-image-filter',
           icon: ImproveWritingIcon(),
           showWhen: () => true,
           subItem: createImageFilterSubItem(blockActionTrackerOptions),
@@ -409,6 +443,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
         },
         {
           name: 'Generate a caption',
+          testId: 'action-generate-caption',
           icon: PenIcon(),
           showWhen: () => true,
           beta: true,
@@ -432,6 +467,7 @@ export function buildAICodeItemGroups(): AIItemGroupConfig[] {
       items: [
         {
           name: 'Explain this code',
+          testId: 'action-explain-code',
           icon: ExplainIcon(),
           showWhen: () => true,
           handler: actionToHandler(
@@ -443,6 +479,7 @@ export function buildAICodeItemGroups(): AIItemGroupConfig[] {
         },
         {
           name: 'Check code error',
+          testId: 'action-check-code-error',
           icon: ExplainIcon(),
           showWhen: () => true,
           handler: actionToHandler(
diff --git a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts
index 96854bd527..c8205782bf 100644
--- a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts
@@ -462,7 +462,6 @@ export function noteBlockOrTextShowWhen(
   host: EditorHost
 ) {
   const selected = getCopilotSelectedElems(host);
-
   return selected.some(
     el =>
       el instanceof NoteBlockModel ||
diff --git a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts
index c594caa360..ab5b07cf74 100644
--- a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts
@@ -85,6 +85,7 @@ export function discard(
   return {
     name: 'Discard',
     icon: DeleteIcon(),
+    testId: 'answer-discard',
     showWhen: () => !!panel.answer,
     handler: () => {
       panel.discard();
@@ -96,6 +97,7 @@ export function retry(panel: AffineAIPanelWidget): AIItemConfig {
   return {
     name: 'Retry',
     icon: ResetIcon(),
+    testId: 'answer-retry',
     handler: () => {
       reportResponse('result:retry');
       panel.generate();
@@ -123,6 +125,7 @@ export function createInsertItems<T extends keyof BlockSuitePresets.AIActions>(
       icon: html`<div style=${styleMap({ height: '20px', width: '20px' })}>
         ${LightLoadingIcon}
       </div>`,
+      testId: 'answer-insert-below-loading',
       showWhen: () => {
         const panel = getAIPanelWidget(host);
         const data = ctx.get();
@@ -137,6 +140,8 @@ export function createInsertItems<T extends keyof BlockSuitePresets.AIActions>(
     {
       name: buttonText,
       icon: InsertBelowIcon(),
+      testId:
+        buttonText === 'Replace' ? 'answer-replace' : `answer-insert-below`,
       showWhen: () => {
         const panel = getAIPanelWidget(host);
         const data = ctx.get();
@@ -191,6 +196,7 @@ export function asCaption<T extends keyof BlockSuitePresets.AIActions>(
   return {
     name: 'Use as caption',
     icon: PenIcon(),
+    testId: 'answer-use-as-caption',
     showWhen: () => {
       const panel = getAIPanelWidget(host);
       return id === 'generateCaption' && !!panel.answer;
@@ -553,9 +559,11 @@ export function actionToResponse<T extends keyof BlockSuitePresets.AIActions>(
     responses: [
       {
         name: 'Response',
+        testId: 'answer-responses',
         items: [
           {
             name: 'Continue in chat',
+            testId: 'answer-continue-in-chat',
             icon: ChatWithAiIcon({}),
             handler: () => {
               reportResponse('result:continue-in-chat');
diff --git a/packages/frontend/core/src/blocksuite/ai/ai-panel.ts b/packages/frontend/core/src/blocksuite/ai/ai-panel.ts
index f40d9f29a7..bbe4233ba4 100644
--- a/packages/frontend/core/src/blocksuite/ai/ai-panel.ts
+++ b/packages/frontend/core/src/blocksuite/ai/ai-panel.ts
@@ -53,6 +53,7 @@ function asCaption<T extends keyof BlockSuitePresets.AIActions>(
   return {
     name: 'Use as caption',
     icon: PenIcon(),
+    testId: 'answer-use-as-caption',
     showWhen: () => {
       const panel = getAIPanelWidget(host);
       return id === 'generateCaption' && !!panel.answer;
@@ -79,6 +80,7 @@ function createNewNote(host: EditorHost): AIItemConfig {
   return {
     name: 'Create new note',
     icon: PageIcon(),
+    testId: 'answer-create-new-note',
     showWhen: () => {
       const panel = getAIPanelWidget(host);
       return !!panel.answer && isInsideEdgelessEditor(host);
@@ -147,9 +149,11 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
   return [
     {
       name: 'Response',
+      testId: 'answer-responses',
       items: [
         {
           name: 'Insert below',
+          testId: 'answer-insert-below',
           icon: InsertBelowIcon(),
           showWhen: () =>
             !!panel.answer && (!id || !INSERT_ABOVE_ACTIONS.includes(id)),
@@ -161,6 +165,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
         },
         {
           name: 'Insert above',
+          testId: 'answer-insert-above',
           icon: InsertTopIcon(),
           showWhen: () =>
             !!panel.answer && !!id && INSERT_ABOVE_ACTIONS.includes(id),
@@ -173,6 +178,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
         asCaption(host, id),
         {
           name: 'Replace selection',
+          testId: 'answer-replace',
           icon: ReplaceIcon(),
           showWhen: () =>
             !!panel.answer && !EXCLUDING_REPLACE_ACTIONS.includes(id),
@@ -187,10 +193,12 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
     },
     {
       name: '',
+      testId: 'answer-common-responses',
       items: [
         {
           name: 'Continue in chat',
           icon: ChatWithAiIcon(),
+          testId: 'answer-continue-in-chat',
           handler: () => {
             reportResponse('result:continue-in-chat');
             AIProvider.slots.requestOpenWithChat.next({ host });
@@ -200,6 +208,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
         {
           name: 'Regenerate',
           icon: ResetIcon(),
+          testId: 'answer-regenerate',
           handler: () => {
             reportResponse('result:retry');
             panel.generate();
@@ -208,6 +217,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
         {
           name: 'Discard',
           icon: DeleteIcon(),
+          testId: 'answer-discard',
           handler: () => {
             panel.discard();
           },
@@ -225,6 +235,7 @@ export function buildErrorResponseConfig(panel: AffineAIPanelWidget) {
         {
           name: 'Retry',
           icon: ResetIcon(),
+          testId: 'error-retry',
           showWhen: () => true,
           handler: () => {
             reportResponse('result:retry');
@@ -234,6 +245,7 @@ export function buildErrorResponseConfig(panel: AffineAIPanelWidget) {
         {
           name: 'Discard',
           icon: DeleteIcon(),
+          testId: 'error-discard',
           showWhen: () => !!panel.answer,
           handler: () => {
             panel.discard();
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts
index 911e5a574a..6fec66bf96 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts
@@ -142,6 +142,7 @@ export class ActionWrapper extends WithDisposable(LitElement) {
       <slot></slot>
       <div
         class="action-name"
+        data-testid="action-name"
         @click=${() => (this.promptShow = !this.promptShow)}
       >
         ${icons[item.action] ? icons[item.action] : DoneIcon()}
@@ -152,22 +153,27 @@ export class ActionWrapper extends WithDisposable(LitElement) {
       </div>
       ${this.promptShow
         ? html`
-            <div class="answer-prompt">
+            <div class="answer-prompt" data-testid="answer-prompt">
               <div class="subtitle">Answer</div>
               ${HISTORY_IMAGE_ACTIONS.includes(item.action)
                 ? images &&
                   html`<chat-content-images
                     .images=${images}
+                    data-testid="generated-image"
                   ></chat-content-images>`
                 : nothing}
               ${answer
-                ? createTextRenderer(this.host, { customHeading: true })(answer)
+                ? createTextRenderer(this.host, {
+                    customHeading: true,
+                    testId: 'chat-message-action-answer',
+                  })(answer)
                 : nothing}
               ${originalText
                 ? html`<div class="subtitle prompt">Prompt</div>
-                    ${createTextRenderer(this.host, { customHeading: true })(
-                      item.messages[0].content + originalText
-                    )}`
+                    ${createTextRenderer(this.host, {
+                      customHeading: true,
+                      testId: 'chat-message-action-prompt',
+                    })(item.messages[0].content + originalText)}`
                 : nothing}
             </div>
           `
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image-to-text.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image-to-text.ts
index 7584dac215..ac69d79485 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image-to-text.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image-to-text.ts
@@ -1,6 +1,3 @@
-import './action-wrapper';
-import '../content/images';
-
 import { WithDisposable } from '@blocksuite/affine/global/lit';
 import type { EditorHost } from '@blocksuite/affine/std';
 import { ShadowlessElement } from '@blocksuite/affine/std';
@@ -27,7 +24,10 @@ export class ActionImageToText extends WithDisposable(ShadowlessElement) {
         })}
       >
         ${answer
-          ? html`<chat-content-images .images=${answer}></chat-content-images>`
+          ? html`<chat-content-images
+              data-testid="original-images"
+              .images=${answer}
+            ></chat-content-images>`
           : nothing}
       </div>
     </action-wrapper>`;
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image.ts
index 8cf4d4e7e2..2cdbb92982 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/image.ts
@@ -17,13 +17,19 @@ export class ActionImage extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor host!: EditorHost;
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'action-image';
+
   protected override render() {
     const images = this.item.messages[0].attachments;
 
     return html`<action-wrapper .host=${this.host} .item=${this.item}>
       <div style=${styleMap({ marginBottom: '12px' })}>
         ${images
-          ? html`<chat-content-images .images=${images}></chat-content-images>`
+          ? html`<chat-content-images
+              .images=${images}
+              data-testid="original-image"
+            ></chat-content-images>`
           : nothing}
       </div>
     </action-wrapper>`;
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/text.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/text.ts
index 253eb9999d..ea36b5cfb0 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/text.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/text.ts
@@ -54,6 +54,7 @@ export class ActionText extends WithDisposable(LitElement) {
           border: isCode ? 'none' : '1px solid var(--affine-border-color)',
         })}
         class="original-text"
+        data-testid="original-text"
       >
         ${createTextRenderer(this.host, {
           customHeading: true,
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/ai-loading.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/ai-loading.ts
index 93a8d3ef29..0c4772adaa 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/ai-loading.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/ai-loading.ts
@@ -47,6 +47,9 @@ export class AILoading extends WithDisposable(LitElement) {
   @property({ attribute: false })
   accessor stopGenerating!: () => void;
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'ai-loading';
+
   override render() {
     return html`
       <div class="generating-tip">
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-chips.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-chips.ts
index 6ffeb8a342..04502f26fd 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-chips.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-chips.ts
@@ -99,6 +99,9 @@ export class ChatPanelChips extends SignalWatcher(
   @property({ attribute: false })
   accessor searchMenuConfig!: SearchMenuConfig;
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'chat-panel-chips';
+
   @query('.add-button')
   accessor addButton!: HTMLDivElement;
 
@@ -137,7 +140,11 @@ export class ChatPanelChips extends SignalWatcher(
     const chips = isCollapsed ? allChips.slice(0, 1) : allChips;
 
     return html`<div class="chips-wrapper">
-      <div class="add-button" @click=${this._toggleAddDocMenu}>
+      <div
+        class="add-button"
+        data-testid="chat-panel-with-button"
+        @click=${this._toggleAddDocMenu}
+      >
         ${PlusIcon()}
       </div>
       ${repeat(
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-input.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-input.ts
index 2884fcf02d..dbd2feb6a5 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-input.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-input.ts
@@ -220,6 +220,9 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
   @property({ attribute: false })
   accessor docDisplayConfig!: DocDisplayConfig;
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'chat-panel-input-container';
+
   private get _isNetworkActive() {
     return (
       !!this.networkSearchConfig.visible.value &&
@@ -335,7 +338,10 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
             `
           : nothing}
         ${this.chatContextValue.quote
-          ? html`<div class="chat-selection-quote">
+          ? html`<div
+              class="chat-selection-quote"
+              data-testid="chat-selection-quote"
+            >
               ${repeat(
                 getFirstTwoLines(this.chatContextValue.quote),
                 line => line,
@@ -420,6 +426,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
             : nothing}
           ${images.length < MaximumImageCount
             ? html`<div
+                data-testid="chat-panel-input-image-upload"
                 class="image-upload"
                 aria-disabled=${uploadDisabled}
                 @click=${uploadDisabled ? undefined : this._uploadImageFiles}
@@ -434,6 +441,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
                   this.updateContext({ status: 'success' });
                   reportResponse('aborted:stop');
                 }}
+                data-testid="chat-panel-stop"
               >
                 ${ChatAbortIcon}
               </div>`
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
index 2e9d57b4f6..e37a6f5e5b 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
@@ -31,7 +31,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
       position: relative;
     }
 
-    .chat-panel-messages {
+    .chat-panel-messages-container {
       display: flex;
       flex-direction: column;
       gap: 24px;
@@ -157,9 +157,16 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor previewSpecBuilder!: SpecBuilder;
 
-  @query('.chat-panel-messages')
+  @query('.chat-panel-messages-container')
   accessor messagesContainer: HTMLDivElement | null = null;
 
+  @property({
+    type: String,
+    attribute: 'data-testid',
+    reflect: true,
+  })
+  accessor testId = 'chat-panel-messages';
+
   getScrollContainer(): HTMLDivElement | null {
     return this.messagesContainer;
   }
@@ -168,12 +175,13 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
     return this.isLoading ||
       !this.host?.doc.get(FeatureFlagService).getFlag('enable_ai_onboarding')
       ? nothing
-      : html`<div class="onboarding-wrapper">
+      : html`<div class="onboarding-wrapper" data-testid="ai-onboarding">
           ${repeat(
             AIPreloadConfig,
             config => config.text,
             config => {
               return html`<div
+                data-testid=${config.testId}
                 @click=${() => config.handler()}
                 class="onboarding-item"
               >
@@ -220,7 +228,8 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
 
     return html`
       <div
-        class="chat-panel-messages"
+        class="chat-panel-messages-container"
+        data-testid="chat-panel-messages-container"
         @scroll=${() => this._debouncedOnScroll()}
       >
         ${filteredItems.length === 0
@@ -232,8 +241,12 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
               )}
               <div class="messages-placeholder-title" data-loading=${isLoading}>
                 ${this.isLoading
-                  ? 'AFFiNE AI is loading history...'
-                  : 'What can I help you with?'}
+                  ? html`<span data-testid="chat-panel-loading-state"
+                      >AFFiNE AI is loading history...</span
+                    >`
+                  : html`<span data-testid="chat-panel-empty-state"
+                      >What can I help you with?</span
+                    >`}
               </div>
               ${this._renderAIOnboarding()}
             </div> `
@@ -268,7 +281,11 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
             )}
       </div>
       ${showDownIndicator && filteredItems.length > 0
-        ? html`<div class="down-indicator" @click=${this._onDownIndicatorClick}>
+        ? html`<div
+            data-testid="chat-panel-scroll-down-indicator"
+            class="down-indicator"
+            @click=${this._onDownIndicatorClick}
+          >
             ${ArrowDownIcon()}
           </div>`
         : nothing}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/add-popover.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/components/add-popover.ts
index 628991b7b9..7077c96ca0 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/add-popover.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/components/add-popover.ts
@@ -44,6 +44,8 @@ export type MenuItem = {
   name: string | TemplateResult<1>;
   icon: TemplateResult<1>;
   action: MenuAction;
+  suffix?: string | TemplateResult<1>;
+  testId?: string;
 };
 
 export type MenuAction = () => Promise<void> | void;
@@ -140,6 +142,7 @@ export class ChatPanelAddPopover extends SignalWatcher(
       {
         key: 'tags',
         name: 'Tags',
+        testId: 'ai-chat-with-tags',
         icon: TagsIcon(),
         action: () => {
           this._toggleMode(AddPopoverMode.Tags);
@@ -148,6 +151,7 @@ export class ChatPanelAddPopover extends SignalWatcher(
       {
         key: 'collections',
         name: 'Collections',
+        testId: 'ai-chat-with-collections',
         icon: CollectionsIcon(),
         action: () => {
           this._toggleMode(AddPopoverMode.Collections);
@@ -176,6 +180,7 @@ export class ChatPanelAddPopover extends SignalWatcher(
       {
         key: 'files',
         name: 'Upload files (pdf, txt, csv)',
+        testId: 'ai-chat-with-files',
         icon: UploadIcon(),
         action: this._addFileChip,
       },
@@ -330,13 +335,14 @@ export class ChatPanelAddPopover extends SignalWatcher(
       ${repeat(
         items,
         item => item.key,
-        ({ key, name, icon, action }, idx) => {
+        ({ key, name, icon, action, testId }, idx) => {
           const curIdx = startIndex + idx;
           return html`<icon-button
             width="280px"
             height="30px"
             data-id=${key}
             data-index=${curIdx}
+            data-testid=${testId}
             .text=${name}
             hover=${this._activatedIndex === curIdx}
             @click=${() => action()?.catch(console.error)}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts
index 5d43c3d227..b71fc0e866 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts
@@ -37,6 +37,9 @@ export class ChatContentPureText extends ShadowlessElement {
   @property({ attribute: false })
   accessor text: string = '';
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'chat-content-pure-text';
+
   protected override render() {
     return this.text.length > 0
       ? html`<div class="chat-content-pure-text">${this.text}</div>`
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/action.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/action.ts
index 7e1499c487..f327fff0d8 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/action.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/action.ts
@@ -16,6 +16,9 @@ export class ChatMessageAction extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatAction;
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'chat-message-action';
+
   renderHeader() {
     return html`
       <div class="user-info">
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/assistant.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/assistant.ts
index c6ccffa81c..7a51e8dd0a 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/assistant.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/assistant.ts
@@ -34,7 +34,7 @@ export class ChatMessageAssistant extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor isLast: boolean = false;
 
-  @property({ attribute: false })
+  @property({ attribute: 'data-status', reflect: true })
   accessor status: string = 'idle';
 
   @property({ attribute: false })
@@ -49,6 +49,9 @@ export class ChatMessageAssistant extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor retry!: () => void;
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'chat-message-assistant';
+
   renderHeader() {
     const isWithDocs =
       'content' in this.item &&
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/user.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/user.ts
index 15abe5cf14..d52e5cdf81 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/user.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/user.ts
@@ -31,6 +31,9 @@ export class ChatMessageUser extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor item!: ChatMessage;
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'chat-message-user';
+
   renderContent() {
     const { item } = this;
 
@@ -41,7 +44,7 @@ export class ChatMessageUser extends WithDisposable(ShadowlessElement) {
             .images=${item.attachments}
           ></chat-content-images>`
         : nothing}
-      <div class="text-content-wrapper">
+      <div class="text-content-wrapper" data-test-id="chat-content-user-text">
         <chat-content-pure-text .text=${item.content}></chat-content-pure-text>
       </div>
     `;
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts
index 9d35b25531..7fd46e0ae3 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts
@@ -17,6 +17,7 @@ export const AIPreloadConfig = [
   {
     icon: LanguageIcon(),
     text: 'Read a foreign language article with AI',
+    testId: 'read-foreign-language-article-with-ai',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.next({
         template: readAforeign,
@@ -27,6 +28,7 @@ export const AIPreloadConfig = [
   {
     icon: MindmapIcon(),
     text: 'Tidy an article with AI MindMap Action',
+    testId: 'tidy-an-article-with-ai-mindmap-action',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.next({
         template: TidyMindMapV3,
@@ -37,6 +39,7 @@ export const AIPreloadConfig = [
   {
     icon: ImageIcon(),
     text: 'Add illustrations to the article',
+    testId: 'add-illustrations-to-the-article',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.next({
         template: redHat,
@@ -47,6 +50,7 @@ export const AIPreloadConfig = [
   {
     icon: PenIcon(),
     text: 'Complete writing with AI',
+    testId: 'complete-writing-with-ai',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.next({
         template: completeWritingWithAI,
@@ -57,6 +61,7 @@ export const AIPreloadConfig = [
   {
     icon: SendIcon(),
     text: 'Freely communicate with AI',
+    testId: 'freely-communicate-with-ai',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.next({
         template: freelyCommunicateWithAI,
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item-list.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item-list.ts
index 20907f4bb5..af10ff413c 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item-list.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item-list.ts
@@ -87,6 +87,7 @@ export class AIItemList extends WithDisposable(LitElement) {
 
     createLitPortal({
       template: html`<ai-sub-item-list
+        data-testid=${item.testId ? item.testId + '-menu' : ''}
         .item=${item}
         .host=${this.host}
         .onClick=${this.onClick}
@@ -141,6 +142,9 @@ export class AIItemList extends WithDisposable(LitElement) {
 
   @property({ attribute: false })
   accessor onClick: (() => void) | undefined = undefined;
+
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'ai-item-list';
 }
 
 declare global {
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item.ts
index 2dace65185..f5ff594bb3 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item.ts
@@ -23,8 +23,10 @@ export class AIItem extends WithDisposable(LitElement) {
   override render() {
     const { item } = this;
     const className = item.name.split(' ').join('-').toLocaleLowerCase();
+    const testId = item.testId;
 
     return html`<div
+      data-testid=${testId}
       class="menu-item ${className}"
       @pointerdown=${(e: MouseEvent) => e.stopPropagation()}
       @click=${() => {
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-sub-item-list.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-sub-item-list.ts
index 25ff617017..54e46acfa0 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-sub-item-list.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-sub-item-list.ts
@@ -70,6 +70,7 @@ export class AISubItemList extends WithDisposable(LitElement) {
         subItem => subItem.type,
         subItem =>
           html`<div
+            data-testid=${subItem.testId}
             class="menu-item"
             @click=${() => this._handleClick(subItem)}
           >
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-item/types.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-item/types.ts
index 93ebebcb71..ba2cfe3a9c 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-item/types.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-item/types.ts
@@ -4,11 +4,13 @@ import type { TemplateResult } from 'lit';
 
 export interface AIItemGroupConfig {
   name?: string;
+  testId?: string;
   items: AIItemConfig[];
 }
 
 export interface AIItemConfig {
   name: string;
+  testId: string;
   icon: TemplateResult | (() => HTMLElement);
   showWhen?: (
     chain: Chain<InitCommandCtx>,
@@ -23,6 +25,7 @@ export interface AIItemConfig {
 
 export interface AISubItemConfig {
   type: string;
+  testId?: string;
   handler?: (host: EditorHost) => void;
 }
 
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ask-ai-button.ts b/packages/frontend/core/src/blocksuite/ai/components/ask-ai-button.ts
index 08c61b1d97..448898cc08 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ask-ai-button.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ask-ai-button.ts
@@ -131,6 +131,7 @@ export class AskAIButton extends WithDisposable(LitElement) {
     });
     return html`<div
       class="ask-ai-button"
+      data-testid="ask-ai-button"
       style=${buttonStyles}
       ${toggleType === 'hover' ? ref(this._whenHover.setReference) : nothing}
       @click=${this._toggleAIPanel}
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ask-ai-toolbar.ts b/packages/frontend/core/src/blocksuite/ai/components/ask-ai-toolbar.ts
index cfdec954fe..70e03334b4 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ask-ai-toolbar.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ask-ai-toolbar.ts
@@ -110,7 +110,11 @@ export class AskAIToolbarButton extends WithDisposable(LitElement) {
   };
 
   override render() {
-    return html`<div class="ask-ai-button" @click=${this._onClick}>
+    return html`<div
+      class="ask-ai-button"
+      data-testid="ask-ai-button"
+      @click=${this._onClick}
+    >
       <ask-ai-icon .size=${'middle'}></ask-ai-icon>
     </div>`;
   }
diff --git a/packages/frontend/core/src/blocksuite/ai/components/chat-action-list.ts b/packages/frontend/core/src/blocksuite/ai/components/chat-action-list.ts
index aea9872a6a..0dcf211d5e 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/chat-action-list.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/chat-action-list.ts
@@ -92,6 +92,9 @@ export class ChatActionList extends LitElement {
   @property({ attribute: false })
   accessor withMargin = false;
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'chat-action-list';
+
   override render() {
     const { actions } = this;
     if (!actions.length) {
diff --git a/packages/frontend/core/src/blocksuite/ai/components/copy-more.ts b/packages/frontend/core/src/blocksuite/ai/components/copy-more.ts
index 990d745795..667759ffd7 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/copy-more.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/copy-more.ts
@@ -127,6 +127,9 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
   @property({ attribute: false })
   accessor retry = () => {};
 
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'chat-actions';
+
   private _toggle() {
     this._morePopper?.toggle();
   }
@@ -197,7 +200,11 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
           : nothing}
         ${isLast
           ? nothing
-          : html`<div class="button more" @click=${this._toggle}>
+          : html`<div
+              class="button more"
+              data-testid="action-more-button"
+              @click=${this._toggle}
+            >
               ${MoreHorizontalIcon({ width: '20px', height: '20px' })}
             </div> `}
       </div>
diff --git a/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts b/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts
index da0de549ec..eea45fe589 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts
@@ -84,6 +84,7 @@ export type TextRendererOptions = {
   customHeading?: boolean;
   extensions?: ExtensionType[];
   additionalMiddlewares?: TransformerMiddleware[];
+  testId?: string;
 };
 
 export const CustomPageEditorBlockSpecs: ExtensionType[] = [
@@ -290,13 +291,13 @@ export class TextRenderer extends WithDisposable(ShadowlessElement) {
       return nothing;
     }
 
-    const { customHeading } = this.options;
+    const { customHeading, testId } = this.options;
     const classes = classMap({
       'text-renderer-container': true,
       'custom-heading': !!customHeading,
     });
     return html`
-      <div class=${classes}>
+      <div class=${classes} data-testid=${testId}>
         ${keyed(
           this._doc,
           html`<div class="ai-answer-text-editor affine-page-viewport">
diff --git a/packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts b/packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts
index e2af34d38a..6990c77aa9 100644
--- a/packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts
+++ b/packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts
@@ -61,6 +61,7 @@ import {
 const translateSubItem = translateLangs.map(lang => {
   return {
     type: lang,
+    testId: `action-translate-${lang}`,
     handler: actionToHandler('translate', AIStarIconWithAnimation, { lang }),
   };
 });
@@ -68,6 +69,7 @@ const translateSubItem = translateLangs.map(lang => {
 const toneSubItem = textTones.map(tone => {
   return {
     type: tone,
+    testId: `action-change-tone-${tone.toLowerCase()}`,
     handler: actionToHandler('changeTone', AIStarIconWithAnimation, { tone }),
   };
 });
@@ -75,6 +77,7 @@ const toneSubItem = textTones.map(tone => {
 export const imageFilterSubItem = imageFilterStyles.map(style => {
   return {
     type: style,
+    testId: `action-image-filter-${style.toLowerCase().replace(' ', '-')}`,
     handler: actionToHandler(
       'filterImage',
       AIImageIconWithAnimation,
@@ -89,6 +92,7 @@ export const imageFilterSubItem = imageFilterStyles.map(style => {
 export const imageProcessingSubItem = imageProcessingTypes.map(type => {
   return {
     type,
+    testId: `action-image-processing-${type.toLowerCase().replace(' ', '-')}`,
     handler: actionToHandler(
       'processImage',
       AIImageIconWithAnimation,
@@ -105,6 +109,7 @@ const othersGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Continue with AI',
+      testId: 'action-continue-with-ai',
       icon: CommentIcon({ width: '20px', height: '20px' }),
       showWhen: () => true,
       handler: host => {
@@ -125,18 +130,21 @@ const editGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Translate to',
+      testId: 'action-translate',
       icon: LanguageIcon(),
       showWhen: noteBlockOrTextShowWhen,
       subItem: translateSubItem,
     },
     {
       name: 'Change tone to',
+      testId: 'action-change-tone',
       icon: ToneIcon(),
       showWhen: noteBlockOrTextShowWhen,
       subItem: toneSubItem,
     },
     {
       name: 'Improve writing',
+      testId: 'action-improve-writing',
       icon: ImproveWritingIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('improveWriting', AIStarIconWithAnimation),
@@ -144,18 +152,21 @@ const editGroup: AIItemGroupConfig = {
 
     {
       name: 'Make it longer',
+      testId: 'action-make-it-longer',
       icon: LongerIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('makeLonger', AIStarIconWithAnimation),
     },
     {
       name: 'Make it shorter',
+      testId: 'action-make-it-shorter',
       icon: ShorterIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('makeShorter', AIStarIconWithAnimation),
     },
     {
       name: 'Continue writing',
+      testId: 'action-continue-writing',
       icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('continueWriting', AIPenIconWithAnimation),
@@ -168,30 +179,35 @@ const draftGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Write an article about this',
+      testId: 'action-write-article',
       icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writeArticle', AIPenIconWithAnimation),
     },
     {
       name: 'Write a tweet about this',
+      testId: 'action-write-twitter-post',
       icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writeTwitterPost', AIPenIconWithAnimation),
     },
     {
       name: 'Write a poem about this',
+      testId: 'action-write-poem',
       icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writePoem', AIPenIconWithAnimation),
     },
     {
       name: 'Write a blog post about this',
+      testId: 'action-write-blog-post',
       icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writeBlogPost', AIPenIconWithAnimation),
     },
     {
       name: 'Brainstorm ideas about this',
+      testId: 'action-brainstorm',
       icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('brainstorm', AIPenIconWithAnimation),
@@ -205,18 +221,21 @@ const reviewGroup: AIItemGroupConfig = {
     {
       name: 'Fix spelling',
       icon: PenIcon(),
+      testId: 'action-fix-spelling',
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('fixSpelling', AIStarIconWithAnimation),
     },
     {
       name: 'Fix grammar',
       icon: PenIcon(),
+      testId: 'action-fix-grammar',
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('improveGrammar', AIStarIconWithAnimation),
     },
     {
       name: 'Explain this image',
       icon: PenIcon(),
+      testId: 'action-explain-image',
       showWhen: imageOnlyShowWhen,
       handler: actionToHandler(
         'explainImage',
@@ -228,18 +247,21 @@ const reviewGroup: AIItemGroupConfig = {
     {
       name: 'Explain this code',
       icon: ExplainIcon(),
+      testId: 'action-explain-code',
       showWhen: noteWithCodeBlockShowWen,
       handler: actionToHandler('explainCode', AIStarIconWithAnimation),
     },
     {
       name: 'Check code error',
       icon: ExplainIcon(),
+      testId: 'action-check-code-error',
       showWhen: noteWithCodeBlockShowWen,
       handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
     },
     {
       name: 'Explain selection',
       icon: SelectionIcon({ width: '20px', height: '20px' }),
+      testId: 'action-explain-selection',
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('explain', AIStarIconWithAnimation),
     },
@@ -252,19 +274,22 @@ const generateGroup: AIItemGroupConfig = {
     {
       name: 'Summarize',
       icon: PenIcon(),
+      testId: 'action-summarize',
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('summary', AIPenIconWithAnimation),
     },
     {
       name: 'Generate headings',
       icon: PenIcon(),
-      handler: actionToHandler('createHeadings', AIPenIconWithAnimation),
+      testId: 'action-generate-headings',
       showWhen: noteBlockOrTextShowWhen,
+      handler: actionToHandler('createHeadings', AIPenIconWithAnimation),
       beta: true,
     },
     {
       name: 'Generate an image',
       icon: ImageIcon(),
+      testId: 'action-generate-image',
       showWhen: notAllAIChatBlockShowWhen,
       handler: actionToHandler(
         'createImage',
@@ -339,12 +364,14 @@ const generateGroup: AIItemGroupConfig = {
     {
       name: 'Generate outline',
       icon: PenIcon(),
+      testId: 'action-generate-outline',
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writeOutline', AIPenIconWithAnimation),
     },
     {
       name: 'Expand from this mind map node',
       icon: MindmapNodeIcon(),
+      testId: 'action-expand-mindmap-node',
       showWhen: mindmapChildShowWhen,
       handler: actionToHandler(
         'expandMindmap',
@@ -370,12 +397,14 @@ const generateGroup: AIItemGroupConfig = {
     {
       name: 'Brainstorm ideas with mind map',
       icon: MindmapIcon(),
+      testId: 'action-brainstorm-mindmap',
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('brainstormMindmap', AIMindMapIconWithAnimation),
     },
     {
       name: 'Regenerate mind map',
       icon: MindmapIcon(),
+      testId: 'action-regenerate-mindmap',
       showWhen: mindmapRootShowWhen,
       handler: actionToHandler(
         'brainstormMindmap',
@@ -388,6 +417,7 @@ const generateGroup: AIItemGroupConfig = {
     {
       name: 'Generate presentation',
       icon: PresentationIcon(),
+      testId: 'action-generate-presentation',
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('createSlides', AIPresentationIconWithAnimation),
       beta: true,
@@ -395,6 +425,7 @@ const generateGroup: AIItemGroupConfig = {
     {
       name: 'Make it real',
       icon: MakeItRealIcon({ width: '20px', height: '20px' }),
+      testId: 'action-make-it-real',
       beta: true,
       showWhen: notAllAIChatBlockShowWhen,
       handler: actionToHandler(
@@ -476,6 +507,7 @@ const generateGroup: AIItemGroupConfig = {
     {
       name: 'AI image filter',
       icon: PenIcon(),
+      testId: 'action-ai-image-filter',
       showWhen: imageOnlyShowWhen,
       subItem: imageFilterSubItem,
       subItemOffset: [12, -4],
@@ -484,6 +516,7 @@ const generateGroup: AIItemGroupConfig = {
     {
       name: 'Image processing',
       icon: ImageIcon(),
+      testId: 'action-image-processing',
       showWhen: imageOnlyShowWhen,
       subItem: imageProcessingSubItem,
       subItemOffset: [12, -6],
@@ -492,6 +525,7 @@ const generateGroup: AIItemGroupConfig = {
     {
       name: 'Generate a caption',
       icon: PenIcon(),
+      testId: 'action-generate-caption',
       showWhen: imageOnlyShowWhen,
       beta: true,
       handler: actionToHandler(
@@ -504,6 +538,7 @@ const generateGroup: AIItemGroupConfig = {
     {
       name: 'Find actions',
       icon: SearchIcon(),
+      testId: 'action-find-actions',
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('findActions', AIStarIconWithAnimation),
       beta: true,
diff --git a/packages/frontend/core/src/blocksuite/ai/messages/error.ts b/packages/frontend/core/src/blocksuite/ai/messages/error.ts
index 4c93a3d2b5..9a63fb1479 100644
--- a/packages/frontend/core/src/blocksuite/ai/messages/error.ts
+++ b/packages/frontend/core/src/blocksuite/ai/messages/error.ts
@@ -181,6 +181,9 @@ export class AIErrorWrapper extends SignalWatcher(WithDisposable(LitElement)) {
 
   @property({ attribute: false })
   accessor showDetailPanel: boolean = false;
+
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'ai-error';
 }
 
 const PaymentRequiredErrorRenderer = (host: EditorHost) => html`
diff --git a/packages/frontend/core/src/blocksuite/ai/messages/wrapper.ts b/packages/frontend/core/src/blocksuite/ai/messages/wrapper.ts
index 2b9b057145..c063748777 100644
--- a/packages/frontend/core/src/blocksuite/ai/messages/wrapper.ts
+++ b/packages/frontend/core/src/blocksuite/ai/messages/wrapper.ts
@@ -107,7 +107,7 @@ export const createImageRenderer: (
         object-fit: contain;
       }
     </style>
-    <div class="ai-answer-image">
+    <div class="ai-answer-image" data-testid="ai-answer-image">
       <img src=${answer}></img>
     </div>`;
 
diff --git a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts
index 2801fafed3..15b92c7f6d 100644
--- a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts
+++ b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts
@@ -188,12 +188,21 @@ export class ChatBlockInput extends SignalWatcher(LitElement) {
               `
             : nothing}
           ${images.length < MaximumImageCount
-            ? html`<div class="image-upload" @click=${this._handleImageUpload}>
+            ? html`<div
+                data-testid="chat-block-input-image-upload"
+                class="image-upload"
+                @click=${this._handleImageUpload}
+              >
                 ${ImageIcon()}
               </div>`
             : nothing}
           ${status === 'transmitting'
-            ? html`<div @click=${this._handleAbort}>${ChatAbortIcon}</div>`
+            ? html`<div
+                @click=${this._handleAbort}
+                data-testid="chat-panel-peek-view-stop"
+              >
+                ${ChatAbortIcon}
+              </div>`
             : html`<div
                 @click=${this._onTextareaSend}
                 class="chat-panel-send"
diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts
index 4cce1c5f57..af2010cddb 100644
--- a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts
+++ b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts
@@ -517,7 +517,12 @@ export class AffineAIPanelWidget extends WidgetComponent {
       ],
     ]);
 
-    return html`<div class="ai-panel-container">${mainTemplate}</div>`;
+    return html`<div
+      class="ai-panel-container"
+      data-testid="ai-panel-container"
+    >
+      ${mainTemplate}
+    </div>`;
   }
 
   protected override willUpdate(changed: PropertyValues): void {
diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/finish-tip.ts b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/finish-tip.ts
index 402a719813..15d1302472 100644
--- a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/finish-tip.ts
+++ b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/finish-tip.ts
@@ -74,9 +74,12 @@ export class AIFinishTip extends WithDisposable(LitElement) {
       ${this.copy?.allowed
         ? html`<div class="right">
             ${this.copied
-              ? html`<div class="copied">${AIDoneIcon}</div>`
+              ? html`<div class="copied" data-testid="answer-copied">
+                  ${AIDoneIcon}
+                </div>`
               : html`<div
                   class="copy"
+                  data-testid="answer-copy-button"
                   @click=${async () => {
                     this.copied = !!(await this.copy?.onCopy());
                     if (this.copied) {
diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/answer.ts b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/answer.ts
index 05483c6d20..b15886a9fe 100644
--- a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/answer.ts
+++ b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/answer.ts
@@ -86,7 +86,7 @@ export class AIPanelAnswer extends WithDisposable(LitElement) {
     return html`
       <div class="answer">
         <div class="answer-head">Answer</div>
-        <div class="answer-body">
+        <div class="answer-body" data-testid="answer-content">
           <slot></slot>
         </div>
       </div>
@@ -104,7 +104,10 @@ export class AIPanelAnswer extends WithDisposable(LitElement) {
                       ${index !== 0
                         ? html`<ai-panel-divider></ai-panel-divider>`
                         : nothing}
-                      <div class="response-list-container">
+                      <div
+                        class="response-list-container"
+                        data-testid=${group.testId}
+                      >
                         <ai-item-list
                           .host=${this.host}
                           .groups=${[group]}
@@ -143,6 +146,9 @@ export class AIPanelAnswer extends WithDisposable(LitElement) {
 
   @property({ attribute: false })
   accessor host!: EditorHost;
+
+  @property({ attribute: 'data-testid', reflect: true })
+  accessor testId = 'ai-penel-answer';
 }
 
 declare global {
diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/error.ts b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/error.ts
index c65f4976a2..28b1a734b9 100644
--- a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/error.ts
+++ b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/error.ts
@@ -210,7 +210,7 @@ export class AIPanelError extends WithDisposable(LitElement) {
     );
 
     return html`
-      <div class="error">
+      <div class="error" data-testid="ai-error">
         <div class="answer-tip">
           <div class="answer-label">Answer</div>
           <slot></slot>
diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/generating.ts b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/generating.ts
index 539e01c155..81329723cc 100644
--- a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/generating.ts
+++ b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/components/state/generating.ts
@@ -85,10 +85,10 @@ export class AIPanelGenerating extends WithDisposable(LitElement) {
             .showHeader=${!this.withAnswer}
           ></generating-placeholder>`
         : nothing}
-      <div class="generating-tip">
+      <div class="generating-tip" data-testid="ai-generating">
         <div class="left">${generatingIcon}</div>
         <div class="text">AI is generating...</div>
-        <div @click=${this.stopGenerating} class="right">
+        <div @click=${this.stopGenerating} class="right" data-testid="ai-stop">
           <span class="stop-icon">${AIStopIcon}</span>
           <span class="esc-label">ESC</span>
         </div>
diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/edgeless-copilot-panel/toolbar-entry.ts b/packages/frontend/core/src/blocksuite/ai/widgets/edgeless-copilot-panel/toolbar-entry.ts
index b00c75e458..1a908bdb40 100644
--- a/packages/frontend/core/src/blocksuite/ai/widgets/edgeless-copilot-panel/toolbar-entry.ts
+++ b/packages/frontend/core/src/blocksuite/ai/widgets/edgeless-copilot-panel/toolbar-entry.ts
@@ -62,6 +62,7 @@ export class EdgelessCopilotToolbarEntry extends WithDisposable(LitElement) {
     return html`<edgeless-tool-icon-button
       aria-label="Ask AI"
       class="copilot-icon-button"
+      data-testid="ask-ai-button"
       @click=${this._onClick}
     >
       ${AIStarIcon} <span class="label medium">Ask AI</span>
diff --git a/tests/affine-cloud-copilot/README.md b/tests/affine-cloud-copilot/README.md
new file mode 100644
index 0000000000..5a125bc14a
--- /dev/null
+++ b/tests/affine-cloud-copilot/README.md
@@ -0,0 +1,20 @@
+# AFFiNE Cloud Copilot E2E Tests
+
+This directory contains end-to-end tests for the AFFiNE Cloud Copilot feature. The tests are organized in a structured way to ensure comprehensive coverage of different functionalities.
+
+## Test Structure
+
+The e2e tests are organized into the following categories:
+
+1. **Basic Tests (`/basic`)**: Tests for verifying core AI capabilities including feature onboarding, authorization workflows, and basic chat interactions.
+2. **Chat Interaction Tests (`/chat-with`)**: Tests for verifying the AI's interaction with various ​object types, such as attachments, images, text content, Edgeless elements, etc.
+3. **AI Action Tests (`/ai-action`)**: Tests for verifying the AI's actions, such as text translation, gramma correction, etc.
+4. **Insertion Tests (`/insertion`)**: Tests for verifying answer insertion functionality.
+
+## Test Utilities
+
+The `/utils` directory contains shared utilities for testing:
+
+- **ChatPanelUtils**: Helper functions for chat panel interactions
+- **EditorUtils**: Helper functions for editor operations
+- **TestUtils**: General test utilities and setup functions
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/brainstorm-ideas-with-mind-map.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/brainstorm-ideas-with-mind-map.spec.ts
new file mode 100644
index 0000000000..2fc986f9f8
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/brainstorm-ideas-with-mind-map.spec.ts
@@ -0,0 +1,56 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/BrainstormIdeasWithMindMap', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate a mind map for the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { brainstormMindMap } = await utils.editor.askAIWithText(
+      page,
+      'Panda'
+    );
+    const { answer, responses } = await brainstormMindMap();
+    await expect(answer.locator('mini-mindmap-preview')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should generate a mind map for the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { brainstormMindMap } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(page, 'Panda');
+      }
+    );
+    const { answer, responses } = await brainstormMindMap();
+    await expect(answer.locator('mini-mindmap-preview')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should generate a mind map for the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { brainstormMindMap } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(page, 'Panda');
+      }
+    );
+    const { answer, responses } = await brainstormMindMap();
+    await expect(answer.locator('mini-mindmap-preview')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/change-tone.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/change-tone.spec.ts
new file mode 100644
index 0000000000..219c8f8dcf
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/change-tone.spec.ts
@@ -0,0 +1,87 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/ChangeTone', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support changing the tone of the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { changeTone } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a great note-taking app'
+    );
+    const { answer, responses } = await changeTone('informal');
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support changing the tone of the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { changeTone } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a great note-taking app'
+        );
+      }
+    );
+
+    const { answer, responses } = await changeTone('informal');
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support changing the tone of the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { changeTone } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a great note-taking app'
+        );
+      }
+    );
+
+    const { answer, responses } = await changeTone('informal');
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { changeTone } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a great note-taking app'
+    );
+    const { answer } = await changeTone('informal');
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Change tone/);
+    await expect(actionName).toHaveText(/Change tone/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/check-code-error.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/check-code-error.spec.ts
new file mode 100644
index 0000000000..6135232cda
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/check-code-error.spec.ts
@@ -0,0 +1,50 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/CheckCodeError', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support check code error', async ({ page, utils }) => {
+    const { checkCodeError } = await utils.editor.askAIWithCode(
+      page,
+      'consloe.log("Hello,World!");',
+      'javascript'
+    );
+    const { answer, responses } = await checkCodeError();
+    await expect(answer).toHaveText(/console/);
+    await expect(responses).toEqual(
+      new Set(['insert-below', 'replace-selection'])
+    );
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { checkCodeError } = await utils.editor.askAIWithCode(
+      page,
+      'consloe.log("Hello,World!");',
+      'javascript'
+    );
+    const { answer } = await checkCodeError();
+    const insert = answer.getByTestId('answer-insert-below');
+    await insert.click();
+    await utils.chatPanel.waitForHistory(page, [{ role: 'action' }]);
+    const {
+      message,
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(
+      message.getByTestId('original-text').locator('affine-code')
+    ).toBeVisible();
+    await expect(panelAnswer).toHaveText(/console/);
+    await expect(prompt).toHaveText(/Check the code error of the follow code/);
+    await expect(actionName).toHaveText(/Check code error/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/continue-with-ai.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/continue-with-ai.spec.ts
new file mode 100644
index 0000000000..5654417144
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/continue-with-ai.spec.ts
@@ -0,0 +1,20 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/ContinueWithAI', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+  });
+
+  test('should support continue in chat panel', async ({ page, utils }) => {
+    const { continueWithAi } = await utils.editor.askAIWithText(page, 'Apple');
+    await continueWithAi();
+    const chatPanelInput = await page.getByTestId('chat-panel-input-container');
+    const quote = await chatPanelInput.getByTestId('chat-selection-quote');
+    await expect(quote).toHaveText(/Apple/, { timeout: 10000 });
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/continue-writing.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/continue-writing.spec.ts
new file mode 100644
index 0000000000..da544b9f06
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/continue-writing.spec.ts
@@ -0,0 +1,92 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/ContinueWriting', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support continue writing the selected content', async ({
+    page,
+    utils,
+  }) => {
+    await page.setViewportSize({ width: 1280, height: 2000 });
+    const { continueWriting } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await continueWriting();
+    await expect(answer).toHaveText(/,*/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support continue writing the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { continueWriting } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+
+    const { answer, responses } = await continueWriting();
+    await expect(answer).toHaveText(/,*/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support continue writing the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { continueWriting } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+
+    const { answer, responses } = await continueWriting();
+    await expect(answer).toHaveText(/,*/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { continueWriting } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await continueWriting();
+    const insert = answer.getByTestId('answer-insert-below');
+    await insert.click();
+    await utils.chatPanel.waitForHistory(
+      page,
+      [
+        {
+          role: 'action',
+        },
+      ],
+      10000
+    );
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/,*/);
+    await expect(prompt).toHaveText(/Continue the following text/);
+    await expect(actionName).toHaveText(/Continue writing/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/expand-mindmap-node.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/expand-mindmap-node.spec.ts
new file mode 100644
index 0000000000..e56492ff6f
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/expand-mindmap-node.spec.ts
@@ -0,0 +1,38 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('expand mindmap node', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should expand the mindmap node', async ({ page, utils }) => {
+    let id: string;
+    const { expandMindMapNode } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        id = await utils.editor.createMindmap(page);
+      },
+      async () => {
+        // Select the first child in the mindmap
+        const { id: childId } = await utils.editor.getMindMapNode(
+          page,
+          id!,
+          [0, 0]
+        );
+        await utils.editor.selectElementInEdgeless(page, [childId]);
+      }
+    );
+    await expandMindMapNode();
+    // Child node should be expanded
+    await expect(async () => {
+      const newChild = await utils.editor.getMindMapNode(page, id!, [0, 0, 0]);
+      expect(newChild).toBeDefined();
+    }).toPass({ timeout: 20000 });
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/explain-code.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/explain-code.spec.ts
new file mode 100644
index 0000000000..3d27232eb2
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/explain-code.spec.ts
@@ -0,0 +1,47 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/ExplainCode', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support explain code', async ({ page, utils }) => {
+    const { explainCode } = await utils.editor.askAIWithCode(
+      page,
+      'console.log("Hello, World!");',
+      'javascript'
+    );
+    const { answer } = await explainCode();
+    await expect(answer).toHaveText(/console.log/);
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { explainCode } = await utils.editor.askAIWithCode(
+      page,
+      'console.log("Hello, World!");',
+      'javascript'
+    );
+    const { answer } = await explainCode();
+    const insert = answer.getByTestId('answer-insert-below');
+    await insert.click();
+    await utils.chatPanel.waitForHistory(page, [{ role: 'action' }]);
+    const {
+      message,
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(
+      message.getByTestId('original-text').locator('affine-code')
+    ).toBeVisible();
+    await expect(panelAnswer).toHaveText(/console.log/);
+    await expect(prompt).toHaveText(/Analyze and explain the follow code/);
+    await expect(actionName).toHaveText(/Explain this code/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/explain-image.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/explain-image.spec.ts
new file mode 100644
index 0000000000..865ab6cf39
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/explain-image.spec.ts
@@ -0,0 +1,52 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+const base64 =
+  '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';
+
+const image = {
+  name: 'image.jpeg',
+  mimeType: 'image/jpeg',
+  buffer: Buffer.from(base64, 'base64'),
+};
+
+test.describe('AIAction/ExplainImage', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support explaining the selected image', async ({
+    page,
+    utils,
+  }) => {
+    const { explainImage } = await utils.editor.askAIWithImage(page, image);
+    const { answer, responses } = await explainImage();
+    await expect(answer).toHaveText(/kitten/i, { timeout: 20000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { explainImage } = await utils.editor.askAIWithImage(page, image);
+    const { answer } = await explainImage();
+    const insertBelow = answer.getByTestId('answer-insert-below');
+    await insertBelow.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      message,
+      answer: panelAnswer,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(message.getByTestId('original-images')).toBeVisible();
+    await expect(panelAnswer).toHaveText(/kitten/i);
+    await expect(actionName).toHaveText(/Explain this image/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/explain-selection.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/explain-selection.spec.ts
new file mode 100644
index 0000000000..09f1c9451e
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/explain-selection.spec.ts
@@ -0,0 +1,78 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/ExplainSelection', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support explaining the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { explainSelection } = await utils.editor.askAIWithText(
+      page,
+      'LLM(AI)'
+    );
+    const { answer, responses } = await explainSelection();
+    await expect(answer).toHaveText(/Large Language Model/, { timeout: 20000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support explaining the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { explainSelection } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(page, 'LLM(AI)');
+      }
+    );
+
+    const { answer, responses } = await explainSelection();
+    await expect(answer).toHaveText(/Large Language Model/, { timeout: 20000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support explaining the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { explainSelection } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(page, 'LLM(AI)');
+      }
+    );
+
+    const { answer, responses } = await explainSelection();
+    await expect(answer).toHaveText(/Large Language Model/, { timeout: 20000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { explainSelection } = await utils.editor.askAIWithText(page, 'LLM');
+    const { answer } = await explainSelection();
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/Large Language Model/);
+    await expect(prompt).toHaveText(/Analyze and explain the follow text/);
+    await expect(actionName).toHaveText(/Explain this/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/find-actions.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/find-actions.spec.ts
new file mode 100644
index 0000000000..ece8eb6c25
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/find-actions.spec.ts
@@ -0,0 +1,143 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/FindActions', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should find actions for selected content', async ({ page, utils }) => {
+    const { findActions } = await utils.editor.askAIWithText(
+      page,
+      `Choose a Booking Platform
+Enter Travel Details
+Compare and Select Flights`
+    );
+    const { answer, responses } = await findActions();
+    const todos = await answer.locator('affine-list').all();
+
+    const expectedTexts = [
+      'Choose a Booking Platform',
+      'Enter Travel Details',
+      'Compare and Select Flights',
+    ];
+
+    await Promise.all(
+      todos.map(async (todo, index) => {
+        await expect(
+          todo.locator('.affine-list-block__todo-prefix')
+        ).toBeVisible();
+        await expect(todo).toHaveText(expectedTexts[index]);
+      })
+    );
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should find actions for selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { findActions } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'Choose a Booking Platform'
+        );
+      }
+    );
+
+    const { answer, responses } = await findActions();
+    const todos = await answer.locator('affine-list').all();
+    const expectedTexts = [
+      'Choose a Booking Platform',
+      'Enter Travel Details',
+      'Compare and Select Flights',
+    ];
+    await Promise.all(
+      todos.map(async (todo, index) => {
+        await expect(
+          todo.locator('.affine-list-block__todo-prefix')
+        ).toBeVisible();
+        await expect(todo).toHaveText(expectedTexts[index]);
+      })
+    );
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should find actions for selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { findActions } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'Choose a Booking Platform'
+        );
+      }
+    );
+
+    const { answer, responses } = await findActions();
+    const todos = await answer.locator('affine-list').all();
+    const expectedTexts = [
+      'Choose a Booking Platform',
+      'Enter Travel Details',
+      'Compare and Select Flights',
+    ];
+    await Promise.all(
+      todos.map(async (todo, index) => {
+        await expect(
+          todo.locator('.affine-list-block__todo-prefix')
+        ).toBeVisible();
+        await expect(todo).toHaveText(expectedTexts[index]);
+      })
+    );
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { findActions } = await utils.editor.askAIWithText(
+      page,
+      `Choose a Booking Platform
+Enter Travel Details
+Compare and Select Flights`
+    );
+    const { answer } = await findActions();
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    const todos = await panelAnswer.locator('affine-list').all();
+
+    const expectedTexts = [
+      'Choose a Booking Platform',
+      'Enter Travel Details',
+      'Compare and Select Flights',
+    ];
+    await Promise.all(
+      todos.map(async (todo, index) => {
+        await expect(
+          todo.locator('.affine-list-block__todo-prefix')
+        ).toBeVisible();
+        await expect(todo).toHaveText(expectedTexts[index]);
+      })
+    );
+    await expect(prompt).toHaveText(/Find action items of the follow text/);
+    await expect(actionName).toHaveText(/Find action items from it/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/fix-grammar.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/fix-grammar.spec.ts
new file mode 100644
index 0000000000..ae0754bfd3
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/fix-grammar.spec.ts
@@ -0,0 +1,84 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/FixGrammar', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support fixing grammatical errors in the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { fixGrammar } = await utils.editor.askAIWithText(
+      page,
+      'I is a student'
+    );
+    const { answer, responses } = await fixGrammar();
+    await expect(answer).toHaveText(/I am a student/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support fixing grammatical errors in the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { fixGrammar } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(page, 'I is a student');
+      }
+    );
+
+    const { answer, responses } = await fixGrammar();
+    await expect(answer).toHaveText(/I am a student/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support fixing grammatical errors in the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { fixGrammar } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(page, 'I is a student');
+      }
+    );
+
+    const { answer, responses } = await fixGrammar();
+    await expect(answer).toHaveText(/I am a student/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { fixGrammar } = await utils.editor.askAIWithText(
+      page,
+      'I is a student'
+    );
+    const { answer } = await fixGrammar();
+    await expect(answer).toHaveText(/I am a student/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/I am a student/);
+    await expect(prompt).toHaveText(
+      /Improve the grammar of the following text/
+    );
+    await expect(actionName).toHaveText(/Improve grammar for it/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/fix-spelling.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/fix-spelling.spec.ts
new file mode 100644
index 0000000000..0ad2ff2cf6
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/fix-spelling.spec.ts
@@ -0,0 +1,78 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/FixSpelling', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support fixing spelling errors in the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { fixSpelling } = await utils.editor.askAIWithText(page, 'Appel');
+    const { answer, responses } = await fixSpelling();
+    await expect(answer).toHaveText(/Apple/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support fixing spelling errors in the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { fixSpelling } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(page, 'Appel');
+      }
+    );
+
+    const { answer, responses } = await fixSpelling();
+    await expect(answer).toHaveText(/Apple/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support fixing spelling errors in the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { fixSpelling } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(page, 'Appel');
+      }
+    );
+
+    const { answer, responses } = await fixSpelling();
+    await expect(answer).toHaveText(/Apple/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { fixSpelling } = await utils.editor.askAIWithText(page, 'Appel');
+    const { answer } = await fixSpelling();
+    await expect(answer).toHaveText(/Apple/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/Apple/);
+    await expect(prompt).toHaveText(
+      /Correct the spelling of the following text/
+    );
+    await expect(actionName).toHaveText(/Fix spelling for it/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/generate-an-image-with-image.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/generate-an-image-with-image.spec.ts
new file mode 100644
index 0000000000..f721fdeba8
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/generate-an-image-with-image.spec.ts
@@ -0,0 +1,55 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+const base64 =
+  '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';
+
+const image = {
+  name: 'image.jpeg',
+  mimeType: 'image/jpeg',
+  buffer: Buffer.from(base64, 'base64'),
+};
+
+test.describe('AIAction/GenerateAnImageWithImage', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate an image for the selected image', async ({
+    page,
+    utils,
+  }) => {
+    const { generateImage } = await utils.editor.askAIWithImage(page, image);
+    const { answer, responses } = await generateImage();
+    await expect(answer.getByTestId('ai-answer-image')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { generateImage } = await utils.editor.askAIWithImage(page, image);
+    const { answer } = await generateImage();
+    await expect(answer.getByTestId('ai-answer-image')).toBeVisible();
+    const insert = answer.getByTestId('answer-insert-below');
+    await insert.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      message,
+      answer: panelAnswer,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(message.getByTestId('original-image')).toBeVisible();
+    await expect(
+      panelAnswer.getByTestId('generated-image').locator('img')
+    ).toBeVisible();
+    await expect(actionName).toHaveText(/image/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/generate-an-image-with-text.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/generate-an-image-with-text.spec.ts
new file mode 100644
index 0000000000..eb5b3e4888
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/generate-an-image-with-text.spec.ts
@@ -0,0 +1,71 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/GenerateAnImageWithText', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate an image for the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { generateImage } = await utils.editor.askAIWithText(page, 'Panda');
+    const { answer, responses } = await generateImage();
+    await expect(answer.getByTestId('ai-answer-image')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should generate an image for the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { generateImage } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(page, 'Panda');
+      }
+    );
+    const { answer, responses } = await generateImage();
+    await expect(answer.getByTestId('ai-answer-image')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should generate an image for the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { generateImage } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(page, 'Panda');
+      }
+    );
+    const { answer, responses } = await generateImage();
+    await expect(answer.getByTestId('ai-answer-image')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { generateImage } = await utils.editor.askAIWithText(page, 'Panda');
+    const { answer } = await generateImage();
+    const insert = answer.getByTestId('answer-insert-below');
+    await insert.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const { answer: panelAnswer, actionName } =
+      await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(
+      panelAnswer.getByTestId('generated-image').locator('img')
+    ).toBeVisible();
+    await expect(actionName).toHaveText(/image/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/generate-headings.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/generate-headings.spec.ts
new file mode 100644
index 0000000000..b6d1a19067
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/generate-headings.spec.ts
@@ -0,0 +1,108 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/GenerateHeadings', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate headings for selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { generateHeadings } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await generateHeadings();
+    await Promise.race([
+      answer.locator('h1').isVisible(),
+      answer.locator('h2').isVisible(),
+      answer.locator('h3').isVisible(),
+    ]);
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-above', 'replace-selection']));
+  });
+
+  test.fixme(
+    'should generate headings for selected text block in edgeless',
+    async ({ page, utils }) => {
+      const { generateHeadings } = await utils.editor.askAIWithEdgeless(
+        page,
+        async () => {
+          await utils.editor.createEdgelessText(
+            page,
+            'AFFiNE is a workspace with fully merged docs'
+          );
+        }
+      );
+
+      const { answer, responses } = await generateHeadings();
+      await Promise.race([
+        answer.locator('h1').isVisible(),
+        answer.locator('h2').isVisible(),
+        answer.locator('h3').isVisible(),
+      ]);
+      await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+      expect(responses).toEqual(new Set(['insert-above']));
+    }
+  );
+
+  test.fixme(
+    'should generate headings for selected note block in edgeless',
+    async ({ page, utils }) => {
+      const { generateHeadings } = await utils.editor.askAIWithEdgeless(
+        page,
+        async () => {
+          await utils.editor.createEdgelessNote(
+            page,
+            'AFFiNE is a workspace with fully merged docs'
+          );
+        }
+      );
+
+      const { answer, responses } = await generateHeadings();
+      await Promise.race([
+        answer.locator('h1').isVisible(),
+        answer.locator('h2').isVisible(),
+        answer.locator('h3').isVisible(),
+      ]);
+      await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+      expect(responses).toEqual(new Set(['insert-above']));
+    }
+  );
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { generateHeadings } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await generateHeadings();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await Promise.race([
+      panelAnswer.locator('h1').isVisible(),
+      panelAnswer.locator('h2').isVisible(),
+      panelAnswer.locator('h3').isVisible(),
+    ]);
+    await expect(prompt).toHaveText(/Create headings of the follow text/);
+    await expect(actionName).toHaveText(/Create headings/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/generate-image-caption.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/generate-image-caption.spec.ts
new file mode 100644
index 0000000000..63877f22bb
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/generate-image-caption.spec.ts
@@ -0,0 +1,52 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+const base64 =
+  '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';
+
+const image = {
+  name: 'image.jpeg',
+  mimeType: 'image/jpeg',
+  buffer: Buffer.from(base64, 'base64'),
+};
+
+test.describe('AIAction/GenerateImageCaption', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate image caption', async ({ page, utils }) => {
+    const { generateCaption } = await utils.editor.askAIWithImage(page, image);
+    const { answer, responses } = await generateCaption();
+    await expect(answer).toHaveText(/cat|kitten/i);
+    await expect(responses).toEqual(
+      new Set(['insert-below', 'use-as-caption', 'replace-selection'])
+    );
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { generateCaption } = await utils.editor.askAIWithImage(page, image);
+    const { answer } = await generateCaption();
+    await expect(answer).toHaveText(/cat|kitten/i);
+    const insert = answer.getByTestId('answer-insert-below');
+    await insert.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      message,
+      answer: panelAnswer,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(message.getByTestId('original-images')).toBeVisible();
+    await expect(panelAnswer).toHaveText(/cat|kitten/i);
+    await expect(actionName).toHaveText(/Generate a caption/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/generate-outline.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/generate-outline.spec.ts
new file mode 100644
index 0000000000..411953428c
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/generate-outline.spec.ts
@@ -0,0 +1,86 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/GenerateOutline', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate outline for selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { generateOutline } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await generateOutline();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should generate outline for selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { generateOutline } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await generateOutline();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should generate outline for selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { generateOutline } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await generateOutline();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { generateOutline } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await generateOutline();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Write an outline about this/);
+    await expect(actionName).toHaveText(/Write outline/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/generate-presentation.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/generate-presentation.spec.ts
new file mode 100644
index 0000000000..e38e4e469a
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/generate-presentation.spec.ts
@@ -0,0 +1,62 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/GeneratePresentation', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate a presentation for the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { generatePresentation } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await generatePresentation();
+    await expect(answer.locator('ai-slides-renderer')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should generate a presentation for the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { generatePresentation } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await generatePresentation();
+    await expect(answer.locator('ai-slides-renderer')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should generate a presentation for the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { generatePresentation } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await generatePresentation();
+    await expect(answer.locator('ai-slides-renderer')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/image-filter.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/image-filter.spec.ts
new file mode 100644
index 0000000000..3017fc6b2a
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/image-filter.spec.ts
@@ -0,0 +1,29 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+const base64 =
+  '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';
+
+const image = {
+  name: 'image.jpeg',
+  mimeType: 'image/jpeg',
+  buffer: Buffer.from(base64, 'base64'),
+};
+
+test.describe('AIAction/ImageFilter', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support image filter', async ({ page, utils }) => {
+    const { imageFilter } = await utils.editor.askAIWithImage(page, image);
+    const { answer, responses } = await imageFilter('pixel-style');
+    await expect(answer.getByTestId('ai-answer-image')).toBeVisible();
+    await expect(responses).toEqual(new Set(['insert-below']));
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/image-processing.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/image-processing.spec.ts
new file mode 100644
index 0000000000..0eec1a779e
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/image-processing.spec.ts
@@ -0,0 +1,52 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+const base64 =
+  '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';
+
+const image = {
+  name: 'image.jpeg',
+  mimeType: 'image/jpeg',
+  buffer: Buffer.from(base64, 'base64'),
+};
+
+test.describe('AIAction/ImageProcessing', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support image processing', async ({ page, utils }) => {
+    const { imageProcessing } = await utils.editor.askAIWithImage(page, image);
+    const { answer, responses } = await imageProcessing('remove-background');
+    await expect(answer.getByTestId('ai-answer-image')).toBeVisible();
+    await expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { imageProcessing } = await utils.editor.askAIWithImage(page, image);
+    const { answer } = await imageProcessing('remove-background');
+    await expect(answer.getByTestId('ai-answer-image')).toBeVisible();
+    const insert = answer.getByTestId('answer-insert-below');
+    await insert.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      message,
+      answer: panelAnswer,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(message.getByTestId('original-image')).toBeVisible();
+    await expect(
+      panelAnswer.getByTestId('generated-image').locator('img')
+    ).toBeVisible();
+    await expect(actionName).toHaveText(/Remove background/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/improve-writing.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/improve-writing.spec.ts
new file mode 100644
index 0000000000..4f8abe6feb
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/improve-writing.spec.ts
@@ -0,0 +1,80 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/ImproveWriting', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support improving the writing of the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { improveWriting } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is so smart'
+    );
+    const { answer, responses } = await improveWriting();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support improving the writing of the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { improveWriting } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(page, 'AFFiNE is so smart');
+      }
+    );
+    const { answer, responses } = await improveWriting();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support improving the writing of the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { improveWriting } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(page, 'AFFiNE is so smart');
+      }
+    );
+    const { answer, responses } = await improveWriting();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { improveWriting } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is so smart'
+    );
+    const { answer } = await improveWriting();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Improve the follow text/);
+    await expect(actionName).toHaveText(/Improve writing for it/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/make-it-longer.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/make-it-longer.spec.ts
new file mode 100644
index 0000000000..5a5945a318
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/make-it-longer.spec.ts
@@ -0,0 +1,86 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/MakeItLonger', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support making the selected content longer', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItLonger } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await makeItLonger();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support making the selected text block longer in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItLonger } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await makeItLonger();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support making the selected note block longer in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItLonger } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await makeItLonger();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { makeItLonger } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await makeItLonger();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Expand the following text/);
+    await expect(actionName).toHaveText(/Make it longer/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/make-it-real.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/make-it-real.spec.ts
new file mode 100644
index 0000000000..86d33201dc
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/make-it-real.spec.ts
@@ -0,0 +1,85 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/MakeItReal', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support making the selected content to real', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItReal } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await makeItReal();
+    await expect(answer.locator('iframe')).toBeVisible({ timeout: 30000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support making the selected text block to real in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItReal } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await makeItReal();
+    await expect(answer.locator('iframe')).toBeVisible({ timeout: 30000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support making the selected note block to real in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItReal } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await makeItReal();
+    await expect(answer.locator('iframe')).toBeVisible({ timeout: 30000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { makeItReal } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await makeItReal();
+    const insert = answer.getByTestId('answer-insert-below');
+    await insert.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer.locator('affine-code')).toBeVisible();
+    await expect(prompt).toHaveText(/Write a web page of follow text/);
+    await expect(actionName).toHaveText(/Make it real with text/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/make-it-shorter.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/make-it-shorter.spec.ts
new file mode 100644
index 0000000000..5ffcda68ae
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/make-it-shorter.spec.ts
@@ -0,0 +1,86 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/MakeItShorter', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support making the selected content shorter', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItShorter } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await makeItShorter();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support making the selected text block shorter in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItShorter } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await makeItShorter();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support making the selected note block shorter in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItShorter } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await makeItShorter();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { makeItShorter } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await makeItShorter();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Shorten the follow text/);
+    await expect(actionName).toHaveText(/Make it shorter/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/regenerate-mindmap.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/regenerate-mindmap.spec.ts
new file mode 100644
index 0000000000..df6cc506da
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/regenerate-mindmap.spec.ts
@@ -0,0 +1,36 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/RegenerateMindMap', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support regenerate the mind map for mindmap root', async ({
+    page,
+    utils,
+  }) => {
+    let id: string;
+    const { regenerateMindMap } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        id = await utils.editor.createMindmap(page);
+      },
+      async () => {
+        const { id: rootId } = await utils.editor.getMindMapNode(page, id!, [
+          0,
+        ]);
+        await utils.editor.selectElementInEdgeless(page, [rootId]);
+      }
+    );
+
+    const { answer, responses } = await regenerateMindMap();
+    await expect(answer.locator('mini-mindmap-preview')).toBeVisible();
+    expect(responses).toEqual(new Set(['replace-selection']));
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/summarize.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/summarize.spec.ts
new file mode 100644
index 0000000000..9d60d5dac9
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/summarize.spec.ts
@@ -0,0 +1,86 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/Summarize', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support summarizing the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { summarize } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await summarize();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support summarizing the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { summarize } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await summarize();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support summarizing the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { summarize } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await summarize();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { summarize } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await summarize();
+    await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Summary the follow text/);
+    await expect(actionName).toHaveText(/Summary/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/translate.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/translate.spec.ts
new file mode 100644
index 0000000000..45ef256f87
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/translate.spec.ts
@@ -0,0 +1,74 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/Translate', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support translating the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer, responses } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support translating the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { translate } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(page, 'Apple');
+      }
+    );
+    const { answer, responses } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support translating the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { translate } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(page, 'Apple');
+      }
+    );
+    const { answer, responses } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { timeout: 10000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('support show chat history in chat panel', async ({ page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/Apfel/);
+    await expect(prompt).toHaveText(/Translate/);
+    await expect(actionName).toHaveText(/Translate/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/write-an-article.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/write-an-article.spec.ts
new file mode 100644
index 0000000000..0d4fdb3423
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/write-an-article.spec.ts
@@ -0,0 +1,86 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/WriteAnArticleAboutThis', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate an article for the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { writeArticle } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await writeArticle();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support writing an article for the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { writeArticle } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await writeArticle();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support writing an article for the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { writeArticle } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await writeArticle();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { writeArticle } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await writeArticle();
+    await expect(answer).toHaveText(/AFFiNE/);
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Write an article about this/);
+    await expect(actionName).toHaveText(/Write an article about this/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/write-an-blog.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/write-an-blog.spec.ts
new file mode 100644
index 0000000000..e866fbfb1e
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/write-an-blog.spec.ts
@@ -0,0 +1,86 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/WriteAnBlogPostAboutThis', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate an blog post for the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { writeBlogPost } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await writeBlogPost();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should support writing an blog post for the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { writeBlogPost } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await writeBlogPost();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should support writing an blog post for the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { writeBlogPost } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await writeBlogPost();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { writeBlogPost } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await writeBlogPost();
+    await expect(answer).toHaveText(/AFFiNE/);
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Write a blog post about this/);
+    await expect(actionName).toHaveText(/Write a blog post about this/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/write-an-poem.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/write-an-poem.spec.ts
new file mode 100644
index 0000000000..bd34c902a1
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/write-an-poem.spec.ts
@@ -0,0 +1,86 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/WriteAnPoemAboutThis', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate an poem for the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { writePoem } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await writePoem();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should generate an poem for the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { writePoem } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await writePoem();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should generate an poem for the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { writePoem } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await writePoem();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { writePoem } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await writePoem();
+    await expect(answer).toHaveText(/AFFiNE/);
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Write a poem about this/);
+    await expect(actionName).toHaveText(/Write a poem about this/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/ai-action/write-an-tweet.spec.ts b/tests/affine-cloud-copilot/e2e/ai-action/write-an-tweet.spec.ts
new file mode 100644
index 0000000000..1c2bcf2866
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/ai-action/write-an-tweet.spec.ts
@@ -0,0 +1,86 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIAction/WriteAnTweetAboutThis', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should generate an tweet for the selected content', async ({
+    page,
+    utils,
+  }) => {
+    const { writeTwitterPost } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer, responses } = await writeTwitterPost();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below', 'replace-selection']));
+  });
+
+  test('should generate an tweet for the selected text block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { writeTwitterPost } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await writeTwitterPost();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should generate an tweet for the selected note block in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { writeTwitterPost } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(
+          page,
+          'AFFiNE is a workspace with fully merged docs'
+        );
+      }
+    );
+    const { answer, responses } = await writeTwitterPost();
+    await expect(answer).toHaveText(/AFFiNE/);
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
+  test('should show chat history in chat panel', async ({ page, utils }) => {
+    const { writeTwitterPost } = await utils.editor.askAIWithText(
+      page,
+      'AFFiNE is a workspace with fully merged docs'
+    );
+    const { answer } = await writeTwitterPost();
+    await expect(answer).toHaveText(/AFFiNE/);
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'action',
+      },
+    ]);
+    const {
+      answer: panelAnswer,
+      prompt,
+      actionName,
+    } = await utils.chatPanel.getLatestAIActionMessage(page);
+    await expect(panelAnswer).toHaveText(/AFFiNE/);
+    await expect(prompt).toHaveText(/Write a twitter about this/);
+    await expect(actionName).toHaveText(/Write a twitter about this/);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/base/base-test.ts b/tests/affine-cloud-copilot/e2e/base/base-test.ts
new file mode 100644
index 0000000000..49a5674120
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/base/base-test.ts
@@ -0,0 +1,27 @@
+// eslint-disable no-empty-pattern
+import { test as base } from '@affine-test/kit/playwright';
+
+import { ChatPanelUtils } from '../utils/chat-panel-utils';
+import { EditorUtils } from '../utils/editor-utils';
+import { TestUtils } from '../utils/test-utils';
+
+interface TestUtilsFixtures {
+  utils: {
+    testUtils: TestUtils;
+    chatPanel: typeof ChatPanelUtils;
+    editor: typeof EditorUtils;
+  };
+}
+
+export const test = base.extend<TestUtilsFixtures>({
+  utils: async ({}, use) => {
+    const testUtils = TestUtils.getInstance();
+    await use({
+      testUtils,
+      chatPanel: ChatPanelUtils,
+      editor: EditorUtils,
+    });
+  },
+});
+
+export type TestFixtures = typeof test;
diff --git a/tests/affine-cloud-copilot/e2e/basic/authority.spec.ts b/tests/affine-cloud-copilot/e2e/basic/authority.spec.ts
new file mode 100644
index 0000000000..10175bdfce
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/basic/authority.spec.ts
@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIBasic/Authority', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should show error & login button when no login', async ({
+    page,
+    utils,
+  }) => {
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await expect(page.getByTestId('ai-error')).toBeVisible();
+    await expect(page.getByTestId('ai-error-action-button')).toBeVisible();
+  });
+
+  test('should support login in error state', async ({ page, utils }) => {
+    await utils.chatPanel.makeChat(page, 'Hello');
+    const loginButton = page.getByTestId('ai-error-action-button');
+    await loginButton.click();
+
+    await expect(page.getByTestId('auth-modal')).toBeVisible();
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/basic/chat.spec.ts b/tests/affine-cloud-copilot/e2e/basic/chat.spec.ts
new file mode 100644
index 0000000000..0d16e35684
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/basic/chat.spec.ts
@@ -0,0 +1,346 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIBasic/Chat', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should display empty state when no messages', async ({ page }) => {
+    // Verify empty state UI
+    await expect(page.getByTestId('chat-panel-empty-state')).toBeVisible();
+    await expect(page.getByTestId('ai-onboarding')).toBeVisible();
+  });
+
+  test(`should send message and receive AI response:
+        - send message
+        - AI is loading
+        - AI generating
+        - AI success
+    `, async ({ page, utils }) => {
+    // Type and send a message
+    await utils.chatPanel.makeChat(page, 'Introduce AFFiNE to me');
+
+    // AI is loading
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'loading',
+      },
+    ]);
+
+    await expect(page.getByTestId('ai-loading')).toBeVisible();
+
+    // AI Generating
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'transmitting',
+      },
+    ]);
+
+    await expect(page.getByTestId('ai-loading')).not.toBeVisible();
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+
+  test('should support stop generating', async ({ page, utils }) => {
+    await utils.chatPanel.makeChat(page, 'Introduce AFFiNE to me');
+
+    // AI Generating
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'transmitting',
+      },
+    ]);
+
+    await page.getByTestId('chat-panel-stop').click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce AFFiNE to me',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+
+  test('should render ai actions inline if the answer is the last one in the list, otherwise, nest them under the "More" menu', async ({
+    page,
+    utils,
+  }) => {
+    await utils.chatPanel.makeChat(page, 'Hello, how can you help me?');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello, how can you help me?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    expect(page.getByTestId('chat-action-list')).toBeVisible();
+    await utils.chatPanel.makeChat(page, 'Nice to meet you');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello, how can you help me?',
+      },
+      {
+        role: 'assistant',
+        status: 'idle',
+      },
+      {
+        role: 'user',
+        content: 'Nice to meet you',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const firstAnswer = await page
+      .getByTestId('chat-message-assistant')
+      .first();
+    const more = firstAnswer.getByTestId('action-more-button');
+    await more.click();
+    await expect(firstAnswer.getByTestId('chat-actions')).toBeVisible();
+  });
+
+  test('should show scroll indicator when there are many messages', async ({
+    page,
+    utils,
+  }) => {
+    // Set window height to 100px to ensure scroll indicator appears
+    await page.setViewportSize({ width: 1280, height: 400 });
+
+    // Type and send a message
+    await utils.chatPanel.makeChat(
+      page,
+      'Hello, write a poem about the moon with 50 words.'
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello, write a poem about the moon with 50 words.',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    // Wait for the answer to be completely rendered
+    await page.waitForTimeout(1000);
+
+    // Scroll up to trigger scroll indicator
+    const chatMessagesContainer = page.getByTestId(
+      'chat-panel-messages-container'
+    );
+    await chatMessagesContainer.evaluate(el => {
+      el.scrollTop = 0;
+    });
+
+    const scrollDownIndicator = page.getByTestId(
+      'chat-panel-scroll-down-indicator'
+    );
+
+    // Verify scroll indicator appears
+    await expect(scrollDownIndicator).toBeVisible();
+
+    // Click scroll indicator to scroll to bottom
+    await scrollDownIndicator.click();
+
+    // Verify scroll indicator disappears
+    await expect(scrollDownIndicator).not.toBeVisible();
+  });
+
+  test('should show error when request failed', async ({ page, utils }) => {
+    // Simulate network error by disconnecting
+    await page.route('**/graphql', route => route.abort('failed'));
+
+    // Send a message that will fail
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await expect(page.getByTestId('ai-error')).toBeVisible();
+    await expect(page.getByTestId('action-retry-button')).toBeVisible();
+  });
+
+  test('should support retrying failed messages', async ({ page, utils }) => {
+    // Simulate network error by disconnecting
+    await page.route('**/graphql', route => route.abort('failed'));
+
+    // Send a message that will fail
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    // Verify error state
+    await expect(page.getByTestId('ai-error')).toBeVisible();
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'error',
+      },
+    ]);
+
+    // Reconnect network
+    await page.route('**/graphql', route => route.continue());
+
+    await page.getByTestId('action-retry-button').click();
+
+    // Verify message is resent and AI responds
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+
+  test('should support retrying question', async ({ page, utils }) => {
+    await utils.chatPanel.makeChat(
+      page,
+      'Introduce Large Language Model in under 500 words'
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce Large Language Model in under 500 words',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await page.pause();
+    await actions.retry();
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce Large Language Model in under 500 words',
+      },
+      {
+        role: 'assistant',
+        status: 'transmitting',
+      },
+    ]);
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Introduce Large Language Model in under 500 words',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+
+  test('should support sending message with button', async ({
+    page,
+    utils,
+  }) => {
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.typeChat(page, 'Hello');
+    await page.getByTestId('chat-panel-send').click();
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'loading',
+      },
+    ]);
+  });
+
+  test('should support clearing chat', async ({ page, utils }) => {
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+    await utils.chatPanel.clearChat(page);
+    await utils.chatPanel.waitForHistory(page, []);
+  });
+
+  test('should support copying answer', async ({ page, utils }) => {
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.copy();
+    await page.getByText('Copied to clipboard').isVisible();
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      const clipboardText = await page.evaluate(() =>
+        navigator.clipboard.readText()
+      );
+      expect(clipboardText).toBe(content);
+    }).toPass({ timeout: 5000 });
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/basic/onboarding.spec.ts b/tests/affine-cloud-copilot/e2e/basic/onboarding.spec.ts
new file mode 100644
index 0000000000..9206c0531d
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/basic/onboarding.spec.ts
@@ -0,0 +1,72 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('AIBasic/Onboarding', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should show AI onboarding', async ({ page }) => {
+    await expect(page.getByTestId('ai-onboarding')).toBeVisible();
+
+    // Show options
+    await expect(
+      page.getByTestId('read-foreign-language-article-with-ai')
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('tidy-an-article-with-ai-mindmap-action')
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('add-illustrations-to-the-article')
+    ).toBeVisible();
+    await expect(page.getByTestId('complete-writing-with-ai')).toBeVisible();
+    await expect(page.getByTestId('freely-communicate-with-ai')).toBeVisible();
+  });
+
+  test('read a foreign language article with AI', async ({ page, utils }) => {
+    await page.getByTestId('read-foreign-language-article-with-ai').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Read a foreign language');
+  });
+
+  test('tidy an article with AI MindMap Action', async ({ page, utils }) => {
+    await page.getByTestId('tidy-an-article-with-ai-mindmap-action').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Tidy');
+  });
+
+  test('add illustrations to the article', async ({ page, utils }) => {
+    await page.getByTestId('add-illustrations-to-the-article').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Add illustrations');
+  });
+
+  test('complete writing with AI', async ({ page, utils }) => {
+    await page.getByTestId('complete-writing-with-ai').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Complete writing');
+  });
+
+  test('freely communicate with AI', async ({ page, utils }) => {
+    await page.getByTestId('freely-communicate-with-ai').click();
+
+    await utils.editor.isEdgelessMode(page);
+    const docTitle = await utils.editor.getDocTitle(page);
+    await expect(docTitle).toContain('Freely communicate');
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/attachments.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/attachments.spec.ts
new file mode 100644
index 0000000000..d3facccf1f
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/attachments.spec.ts
@@ -0,0 +1,89 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Attachments', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('support chat with attachment', async ({ page, utils }) => {
+    const textContent = 'EEee is a cute cat';
+    const buffer = Buffer.from(textContent);
+
+    await utils.chatPanel.chatWithAttachments(
+      page,
+      [
+        {
+          name: 'test.txt',
+          mimeType: 'text/plain',
+          buffer: buffer,
+        },
+      ],
+      'What is EEee?'
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is EEee?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(/EEee/);
+    }).toPass({ timeout: 10000 });
+  });
+
+  test('support chat with multiple attachments', async ({ page, utils }) => {
+    const textContent1 = 'EEee is a cute cat';
+    const textContent2 = 'FFff is a cute dog';
+    const buffer1 = Buffer.from(textContent1);
+    const buffer2 = Buffer.from(textContent2);
+
+    await utils.chatPanel.chatWithAttachments(
+      page,
+      [
+        {
+          name: 'document1.txt',
+          mimeType: 'text/plain',
+          buffer: buffer1,
+        },
+        {
+          name: 'document2.txt',
+          mimeType: 'text/plain',
+          buffer: buffer2,
+        },
+      ],
+      'What is EEee? What is FFff?'
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is EEee? What is FFff?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content, message } =
+        await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(/EEee/);
+      expect(content).toMatch(/FFff/);
+      expect(await message.locator('affine-footnote-node').count()).toBe(2);
+    }).toPass({ timeout: 20000 });
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/collections.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/collections.spec.ts
new file mode 100644
index 0000000000..d52d2bf452
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/collections.spec.ts
@@ -0,0 +1,3 @@
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Collections', () => {});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/doc.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/doc.spec.ts
new file mode 100644
index 0000000000..b68447eaf4
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/doc.spec.ts
@@ -0,0 +1,82 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+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 ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('support chat with specified doc', async ({ page, utils }) => {
+    // Initialize the doc
+    await focusDocTitle(page);
+    await page.keyboard.insertText('Test Doc');
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText('EEee is a cute cat');
+
+    await utils.chatPanel.chatWithDoc(page, 'Test Doc');
+
+    await utils.chatPanel.makeChat(page, 'What is EEee?');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is EEee?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(/EEee/);
+    }).toPass({ timeout: 10000 });
+  });
+
+  test('support chat with specified docs', async ({ page, utils }) => {
+    // Initialize the doc 1
+    await focusDocTitle(page);
+    await page.keyboard.insertText('Test Doc1');
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText('EEee is a cute cat');
+
+    // 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('FFff is a cute dog');
+
+    await utils.chatPanel.chatWithDoc(page, 'Test Doc1');
+    await utils.chatPanel.chatWithDoc(page, 'Test Doc2');
+
+    await utils.chatPanel.makeChat(page, 'What is EEee? What is FFff?');
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is EEee? What is FFff?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(content).toMatch(/EEee/);
+      expect(content).toMatch(/FFff/);
+    }).toPass({ timeout: 10000 });
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/edgeless-mindmap.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/edgeless-mindmap.spec.ts
new file mode 100644
index 0000000000..5866944f5c
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/edgeless-mindmap.spec.ts
@@ -0,0 +1,52 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+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';
+
+test.describe('AIChatWith/EdgelessMindMap', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support replace mindmap with the regenerated one', async ({
+    page,
+    utils,
+  }) => {
+    let id: string;
+    const { regenerateMindMap } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        id = await utils.editor.createMindmap(page);
+      },
+      async () => {
+        const { id: rootId } = await utils.editor.getMindMapNode(page, id!, [
+          0,
+        ]);
+        await utils.editor.selectElementInEdgeless(page, [rootId]);
+      }
+    );
+
+    const { answer } = await regenerateMindMap();
+    await expect(answer.locator('mini-mindmap-preview')).toBeVisible();
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+
+    // Expect original mindmap to be replaced
+    const mindmaps = await page.evaluate(() => {
+      const edgelessBlock = document.querySelector(
+        'affine-edgeless-root'
+      ) as EdgelessRootBlockComponent;
+      const mindmaps = edgelessBlock?.gfx.gfxElements
+        .filter((el: GfxModel) => 'type' in el && el.type === 'mindmap')
+        .map((el: GfxModel) => el.id);
+      return mindmaps;
+    });
+    expect(mindmaps).toHaveLength(1);
+    expect(mindmaps?.[0]).not.toBe(id!);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/edgeless-note-block.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/edgeless-note-block.spec.ts
new file mode 100644
index 0000000000..8f9ebb7312
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/edgeless-note-block.spec.ts
@@ -0,0 +1,32 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/EdgelessNoteBlock', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support insert a new note block below the current', async ({
+    page,
+    utils,
+  }) => {
+    const { translate } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessNote(page, 'Apple');
+      }
+    );
+    const { answer } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { timeout: 10000 });
+    const insertBelow = answer.getByTestId('answer-insert-below');
+    await insertBelow.click();
+    await expect(page.locator('affine-edgeless-note').nth(1)).toHaveText(
+      /Apfel/
+    );
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/edgeless-shape.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/edgeless-shape.spec.ts
new file mode 100644
index 0000000000..b167aa5d8b
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/edgeless-shape.spec.ts
@@ -0,0 +1,3 @@
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/EdgelessShape', () => {});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/edgeless-text-block.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/edgeless-text-block.spec.ts
new file mode 100644
index 0000000000..94c18efb22
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/edgeless-text-block.spec.ts
@@ -0,0 +1,32 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/EdgelessTextBlock', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support insert answer below the current text', async ({
+    page,
+    utils,
+  }) => {
+    const { translate } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createEdgelessText(page, 'Apple');
+      }
+    );
+    const { answer } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { timeout: 10000 });
+    const insertBelow = answer.getByTestId('answer-insert-below');
+    await insertBelow.click();
+    await expect(page.locator('affine-edgeless-text')).toHaveText(
+      /Apple[\s\S]*Apfel/
+    );
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/image-block.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/image-block.spec.ts
new file mode 100644
index 0000000000..d48ad6b046
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/image-block.spec.ts
@@ -0,0 +1,35 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+const base64 =
+  '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';
+
+const image = {
+  name: 'image.jpeg',
+  mimeType: 'image/jpeg',
+  buffer: Buffer.from(base64, 'base64'),
+};
+
+test.describe('AIChatWith/Image', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support use the generated caption', async ({ page, utils }) => {
+    const { generateCaption } = await utils.editor.askAIWithImage(page, image);
+    const { answer } = await generateCaption();
+    await expect(answer).toHaveText(/cat|kitten/i);
+    const caption = await answer.innerText();
+    const useAsCaption = answer.getByTestId('answer-use-as-caption');
+    await useAsCaption.click();
+    const imageBlock = await page.locator('affine-image');
+    const captionBlock = await imageBlock.locator('block-caption-editor');
+    await expect(captionBlock).toBeVisible();
+    await expect(captionBlock.locator('textarea')).toHaveValue(caption);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/image.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/image.spec.ts
new file mode 100644
index 0000000000..1a81d2827c
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/image.spec.ts
@@ -0,0 +1,77 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Image', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('support chat with image', async ({ page, utils }) => {
+    const image =
+      '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';
+
+    const buffer = Buffer.from(image, 'base64');
+
+    await utils.chatPanel.chatWithImages(
+      page,
+      [
+        {
+          name: 'image.jpeg',
+          mimeType: 'image/jpeg',
+          buffer: buffer,
+        },
+      ],
+      'What is the small animal in the picture?'
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is the small animal in the picture?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+
+  test('support chat with mutiple images', async ({ page, utils }) => {
+    const image =
+      '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';
+
+    const buffer = Buffer.from(image, 'base64');
+
+    await utils.chatPanel.chatWithImages(
+      page,
+      [
+        {
+          name: 'image1.jpeg',
+          mimeType: 'image/jpeg',
+          buffer: buffer,
+        },
+        {
+          name: 'image2.jpeg',
+          mimeType: 'image/jpeg',
+          buffer: buffer,
+        },
+      ],
+      'What is the small animal in the picture?'
+    );
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'What is the small animal in the picture?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/network.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/network.spec.ts
new file mode 100644
index 0000000000..a4fd86c650
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/network.spec.ts
@@ -0,0 +1,104 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Network', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support chat with network if network search enabled', async ({
+    page,
+    utils,
+  }) => {
+    await utils.chatPanel.enableNetworkSearch(page);
+    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',
+      },
+    ]);
+
+    await expect(async () => {
+      const { message } = await utils.chatPanel.getLatestAssistantMessage(page);
+      expect(
+        await message.locator('affine-footnote-node').count()
+      ).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+  });
+
+  test('should disable chat with image if network search enabled', async ({
+    page,
+    utils,
+  }) => {
+    await utils.chatPanel.enableNetworkSearch(page);
+    const isImageUploadEnabled =
+      await utils.chatPanel.isImageUploadEnabled(page);
+    expect(isImageUploadEnabled).toBe(false);
+  });
+
+  test('should prevent network search if disabled', async ({ page, utils }) => {
+    await utils.chatPanel.disableNetworkSearch(page);
+    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',
+        },
+      ],
+      20000
+    );
+    const { message } = await utils.chatPanel.getLatestAssistantMessage(page);
+    expect(await message.locator('affine-footnote-node').count()).toBe(0);
+  });
+
+  test('should disable network search when chating with image', async ({
+    page,
+    utils,
+  }) => {
+    const image =
+      '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';
+
+    const buffer = Buffer.from(image, 'base64');
+    page.evaluate(() => {
+      delete window.showOpenFilePicker;
+    }, buffer);
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    // Open file upload dialog
+    await page.getByTestId('chat-panel-input-image-upload').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles({
+      name: 'image1.jpeg',
+      mimeType: 'image/jpeg',
+      buffer: buffer,
+    });
+
+    await page.waitForSelector('chat-panel-input img');
+    const isNetworkSearchEnabled =
+      await utils.chatPanel.isNetworkSearchEnabled(page);
+    await expect(isNetworkSearchEnabled).toBe(false);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/tags.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/tags.spec.ts
new file mode 100644
index 0000000000..70e3ccd2ac
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/tags.spec.ts
@@ -0,0 +1,3 @@
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/tags', () => {});
diff --git a/tests/affine-cloud-copilot/e2e/chat-with/text.spec.ts b/tests/affine-cloud-copilot/e2e/chat-with/text.spec.ts
new file mode 100644
index 0000000000..11396c8f83
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/chat-with/text.spec.ts
@@ -0,0 +1,130 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Text', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support stop generating', async ({ 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 copy answer', async ({ page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { 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('Apfel');
+  });
+
+  test('should support insert below', async ({ page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { timeout: 10000 });
+    const insertBelow = answer.getByTestId('answer-insert-below');
+    await insertBelow.click();
+    const content = await utils.editor.getEditorContent(page);
+    expect(content).toBe('Apple\nApfel');
+  });
+
+  test('should support insert above', async ({ 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 ({ page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { timeout: 10000 });
+    const replace = answer.getByTestId('answer-replace');
+    await replace.click();
+    const content = await utils.editor.getEditorContent(page);
+    expect(content).toBe('Apfel');
+  });
+
+  test('should support continue in chat', async ({ page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('German');
+    await expect(answer).toHaveText(/Apfel/, { 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 ({ page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('German');
+    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 ({ 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 ({ 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 ({ page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('German');
+    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 ({ page, utils }) => {
+    const { translate } = await utils.editor.askAIWithText(page, 'Apple');
+    const { answer } = await translate('German');
+    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');
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/copilot.spec.ts b/tests/affine-cloud-copilot/e2e/copilot.spec.ts
deleted file mode 100644
index fe45969567..0000000000
--- a/tests/affine-cloud-copilot/e2e/copilot.spec.ts
+++ /dev/null
@@ -1,1187 +0,0 @@
-import { test } from '@affine-test/kit/playwright';
-import {
-  createRandomAIUser,
-  loginUser,
-  loginUserDirectly,
-} from '@affine-test/kit/utils/cloud';
-import { focusDocTitle, getPageMode } from '@affine-test/kit/utils/editor';
-import { openHomePage, setCoreUrl } from '@affine-test/kit/utils/load-page';
-import {
-  clickNewPageButton,
-  getBlockSuiteEditorTitle,
-  waitForEditorLoad,
-} from '@affine-test/kit/utils/page-logic';
-import { clickSideBarAllPageButton } from '@affine-test/kit/utils/sidebar';
-import { createLocalWorkspace } from '@affine-test/kit/utils/workspace';
-import { expect, type Page } from '@playwright/test';
-
-test.describe.configure({ mode: 'parallel' });
-
-const ONE_SECOND = 1000;
-const TEN_SECONDS = 10 * ONE_SECOND;
-const ONE_MINUTE = 60 * ONE_SECOND;
-
-let isProduction = process.env.NODE_ENV === 'production';
-if (
-  process.env.PLAYWRIGHT_USER_AGENT &&
-  process.env.PLAYWRIGHT_EMAIL &&
-  !process.env.PLAYWRIGHT_PASSWORD
-) {
-  test.use({
-    userAgent: process.env.PLAYWRIGHT_USER_AGENT || 'affine-tester',
-  });
-  setCoreUrl(process.env.PLAYWRIGHT_CORE_URL || 'http://localhost:8080');
-  isProduction = true;
-}
-
-function getUser() {
-  if (
-    !isProduction ||
-    !process.env.PLAYWRIGHT_EMAIL ||
-    !process.env.PLAYWRIGHT_PASSWORD
-  ) {
-    return createRandomAIUser();
-  }
-
-  return {
-    email: process.env.PLAYWRIGHT_EMAIL,
-    password: process.env.PLAYWRIGHT_PASSWORD,
-  };
-}
-
-const isCopilotConfigured =
-  !!process.env.COPILOT_OPENAI_API_KEY &&
-  !!process.env.COPILOT_FAL_API_KEY &&
-  !!process.env.COPILOT_PERPLEXITY_API_KEY &&
-  process.env.COPILOT_OPENAI_API_KEY !== '1' &&
-  process.env.COPILOT_FAL_API_KEY !== '1' &&
-  process.env.COPILOT_PERPLEXITY_API_KEY !== '1';
-
-test.skip(() => !isCopilotConfigured, 'skip test if no copilot api key');
-
-test('can open chat side panel', async ({ page }) => {
-  await openHomePage(page);
-  await waitForEditorLoad(page);
-  await clickNewPageButton(page);
-  await page.getByTestId('right-sidebar-toggle').click({
-    delay: 200,
-  });
-  await page.getByTestId('sidebar-tab-chat').click();
-  await expect(page.getByTestId('sidebar-tab-content-chat')).toBeVisible();
-});
-
-const openChat = async (page: Page) => {
-  if (await page.getByTestId('sidebar-tab-chat').isHidden()) {
-    await page.getByTestId('right-sidebar-toggle').click({
-      delay: 200,
-    });
-  }
-  await page.getByTestId('sidebar-tab-chat').click();
-};
-
-const typeChat = async (page: Page, content: string) => {
-  await page.getByTestId('chat-panel-input').focus();
-  await page.keyboard.type(content);
-};
-
-const typeChatSequentially = async (page: Page, content: string) => {
-  const input = await page.locator('chat-panel-input textarea').nth(0);
-  await input.pressSequentially(content, {
-    delay: 50,
-  });
-};
-
-const makeChat = async (page: Page, content: string) => {
-  await openChat(page);
-  await typeChat(page, content);
-  await page.keyboard.press('Enter');
-};
-
-const clearChat = async (page: Page) => {
-  await page.getByTestId('chat-panel-clear').click();
-  await page.getByTestId('confirm-modal-confirm').click();
-  await page.waitForTimeout(500);
-};
-
-const collectHistory = async (page: Page) => {
-  const chatPanel = await page.waitForSelector('.chat-panel-messages');
-  return Promise.all(
-    Array.from(
-      await chatPanel.$$(
-        'chat-message-user,chat-message-assistant,chat-message-action'
-      )
-    ).map(async m => {
-      const isAssistant = await m.evaluate(
-        el => el.tagName.toLocaleLowerCase() === 'chat-message-assistant'
-      );
-      const isChatAction = await m.evaluate(
-        el => el.tagName.toLocaleLowerCase() === 'chat-message-action'
-      );
-
-      return isAssistant || isChatAction
-        ? {
-            name: await m.$('.user-info').then(i => i?.innerText()),
-            content: await m
-              .$('chat-content-rich-text')
-              .then(t => t?.$('editor-host'))
-              .then(e => e?.innerText()),
-          }
-        : {
-            name: 'You',
-            content: await m
-              .$('chat-content-pure-text')
-              .then(i => i?.innerText()),
-          };
-    })
-  );
-};
-
-const collectChat = async (page: Page) => {
-  await page.waitForTimeout(ONE_SECOND);
-  const chatPanel = await page.waitForSelector('.chat-panel-messages');
-  if (await chatPanel.$('.messages-placeholder')) {
-    return [];
-  }
-  // wait ai response
-  await page.waitForSelector(
-    '.chat-panel-messages chat-message-assistant chat-copy-more',
-    {
-      timeout: ONE_MINUTE,
-    }
-  );
-  await page.waitForTimeout(200);
-  await page
-    .locator('.chat-panel-messages > chat-message-assistant')
-    .last()
-    .locator('chat-copy-more');
-  await page.waitForTimeout(200);
-  return collectHistory(page);
-};
-
-const focusToEditor = async (page: Page) => {
-  const title = getBlockSuiteEditorTitle(page);
-  await title.focus();
-  await page.keyboard.press('Enter');
-};
-
-const getEditorContent = async (page: Page) => {
-  let content = '';
-  let retry = 3;
-  while (!content && retry > 0) {
-    const lines = await page.$$('page-editor .inline-editor');
-    const contents = await Promise.all(lines.map(el => el.innerText()));
-    content = contents
-      // cleanup zero width space
-      .map(c => c.replace(/\u200B/g, '').trim())
-      .filter(c => !!c)
-      .join('\n');
-    if (!content) {
-      await page.waitForTimeout(500);
-      retry -= 1;
-    }
-  }
-  return content;
-};
-
-const switchToEdgelessMode = async (page: Page) => {
-  const editor = await page.waitForSelector('page-editor');
-  await page.getByTestId('switch-edgeless-mode-button').click();
-  // wait for new editor
-  editor.waitForElementState('hidden');
-  await page.waitForSelector('edgeless-editor');
-};
-
-test('can trigger login at chat side panel', async ({ page }) => {
-  await openHomePage(page);
-  await waitForEditorLoad(page);
-  await clickNewPageButton(page);
-  await makeChat(page, 'hello');
-  const loginButton = await page.getByTestId('ai-error-action-button');
-  expect(await loginButton.innerText()).toBe('Login');
-});
-
-test('can chat after login at chat side panel', async ({ page }) => {
-  await openHomePage(page);
-  await waitForEditorLoad(page);
-  await clickNewPageButton(page);
-  await makeChat(page, 'hello');
-  const loginButton = await page.getByTestId('ai-error-action-button');
-  await loginButton.click();
-  // login
-  const user = await getUser();
-  await loginUserDirectly(page, user);
-  // after login
-  await makeChat(page, 'hello');
-  const history = await collectChat(page);
-  expect(history[0]).toEqual({ name: 'You', content: 'hello' });
-  expect(history[1].name).toBe('AFFiNE AI');
-});
-
-test.describe('chat panel', () => {
-  let user: {
-    email: string;
-    password: string;
-  };
-
-  test.beforeEach(async ({ page }) => {
-    user = await getUser();
-    await loginUser(page, user);
-  });
-
-  test('basic chat', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await makeChat(page, 'hello');
-    const history = await collectChat(page);
-    expect(history[0]).toEqual({ name: 'You', content: 'hello' });
-    expect(history[1].name).toBe('AFFiNE AI');
-    await clearChat(page);
-    expect((await collectChat(page)).length).toBe(0);
-  });
-
-  test('chat send button', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    const sendButton = await page.getByTestId('chat-panel-send');
-    await openChat(page);
-    // oxlint-disable-next-line unicorn/prefer-dom-node-dataset
-    expect(await sendButton.getAttribute('aria-disabled')).toBe('true');
-    await typeChat(page, 'hello');
-    // oxlint-disable-next-line unicorn/prefer-dom-node-dataset
-    expect(await sendButton.getAttribute('aria-disabled')).toBe('false');
-    await sendButton.click();
-    // oxlint-disable-next-line unicorn/prefer-dom-node-dataset
-    expect(await sendButton.getAttribute('aria-disabled')).toBe('true');
-
-    const history = await collectChat(page);
-    expect(history[0]).toEqual({ name: 'You', content: 'hello' });
-    expect(history[1].name).toBe('AFFiNE AI');
-    await clearChat(page);
-    expect((await collectChat(page)).length).toBe(0);
-  });
-
-  test('chat actions', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await makeChat(page, 'What is AFFiNE?');
-    const content = (await collectChat(page))[1].content;
-    await page.getByTestId('action-copy-button').click();
-    await page.waitForTimeout(500);
-    expect(await page.evaluate(() => navigator.clipboard.readText())).toBe(
-      content
-    );
-    await page.getByTestId('action-retry-button').click();
-    expect((await collectChat(page))[1].content).not.toBe(content);
-  });
-
-  test('can be inserted below the current selected block', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-
-    // create tow blocks
-    await focusToEditor(page);
-    await page.keyboard.type('hello');
-    await page.keyboard.press('Enter');
-    await page.keyboard.type('world');
-
-    // focus to hello
-    await page.waitForSelector('affine-paragraph');
-    const paragraphs = await page.$$('affine-paragraph');
-    await paragraphs[0].click();
-
-    await makeChat(page, 'hello');
-    const content = (await collectChat(page))[1].content;
-    await paragraphs[0].click();
-
-    await page.getByTestId('action-insert').click();
-
-    const editorContent = await getEditorContent(page);
-    expect(editorContent).toBe(`hello\n${content}\nworld`);
-  });
-
-  test('can be inserted below the last block if nothing selected', async ({
-    page,
-  }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-
-    // create tow blocks
-    await focusToEditor(page);
-    await page.keyboard.type('hello');
-    await page.keyboard.press('Enter');
-    await page.keyboard.type('world');
-
-    // focus to hello
-    await page.waitForSelector('affine-paragraph');
-
-    await makeChat(page, 'hello');
-    const content = (await collectChat(page))[1].content;
-
-    await focusDocTitle(page);
-
-    await page.getByTestId('action-insert').click();
-
-    const editorContent = await getEditorContent(page);
-    expect(editorContent).toBe(`hello\nworld\n${content}`);
-  });
-
-  test('can be inserted as a new note if no note selected in edgeless mode', async ({
-    page,
-  }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await switchToEdgelessMode(page);
-
-    // delete default note
-    await (await page.waitForSelector('affine-edgeless-note')).click();
-    page.keyboard.press('Delete');
-
-    // insert as a new note
-    await makeChat(page, 'hello');
-    const content = (await collectChat(page))[1].content;
-    await page.getByTestId('action-insert').click();
-
-    const edgelessNode = await page.waitForSelector('affine-edgeless-note');
-    expect(await edgelessNode.innerText()).toBe(content);
-  });
-
-  test('can be inserted into selected note in edgeless mode', async ({
-    page,
-  }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await switchToEdgelessMode(page);
-
-    // select
-    const note = await page.waitForSelector('affine-edgeless-note');
-    await note.click();
-
-    // insert as a new note
-    await makeChat(page, 'hello');
-    const content = (await collectChat(page))[1].content;
-    await page.getByTestId('action-insert').click();
-
-    expect(await note.innerText()).toContain(content);
-  });
-
-  test('can be add to edgeless as node', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await makeChat(page, 'hello');
-    const content = (await collectChat(page))[1].content;
-    await switchToEdgelessMode(page);
-    // delete default note
-    await (await page.waitForSelector('affine-edgeless-note')).click();
-    page.keyboard.press('Delete');
-    // insert note
-    await page.getByTestId('action-add-to-edgeless-as-note').click();
-    const edgelessNode = await page.waitForSelector('affine-edgeless-note');
-    expect(await edgelessNode.innerText()).toBe(content);
-  });
-
-  test('can be create as a doc', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await makeChat(page, 'hello');
-    const content = (await collectChat(page))[1].content;
-    const editor = await page.waitForSelector('page-editor');
-    await page.getByTestId('action-save-as-doc').click();
-    // wait for new editor
-    editor.waitForElementState('hidden');
-    await page.waitForSelector('page-editor');
-    const editorContent = await getEditorContent(page);
-    expect(editorContent).toBe(content);
-  });
-
-  test.describe('chat block', () => {
-    const collectNewMessages = async (page: Page) => {
-      // wait ai response
-      const newMessagesContainer = await page.waitForSelector(
-        '.new-chat-messages-container'
-      );
-      await page.waitForSelector(
-        '.new-chat-messages-container .assistant-message-container chat-copy-more'
-      );
-      const lastMessage = await newMessagesContainer
-        .$$('.assistant-message-container')
-        .then(m => m[m.length - 1]);
-      await lastMessage.waitForSelector('chat-copy-more');
-      await page.waitForTimeout(ONE_SECOND);
-      return Promise.all(
-        Array.from(await newMessagesContainer.$$('.ai-chat-message')).map(
-          async m => ({
-            name: await m.$('.user-name').then(i => i?.innerText()),
-            content: await m
-              .$('.ai-answer-text-editor')
-              .then(t => t?.$('editor-host'))
-              .then(e => e?.innerText()),
-          })
-        )
-      );
-    };
-
-    // make chat before each test
-    test.beforeEach(async ({ page }) => {
-      await page.reload();
-      await clickSideBarAllPageButton(page);
-      await page.waitForTimeout(200);
-      await createLocalWorkspace({ name: 'test' }, page);
-      await clickNewPageButton(page);
-      await makeChat(page, 'hello');
-    });
-
-    test('can be save chat to block when page mode', async ({ page }) => {
-      const contents = (await collectChat(page)).map(m => m.content);
-      expect(await getPageMode(page)).toBe('page');
-      await page.getByTestId('action-save-as-block').click();
-      const chatBlock = await page.waitForSelector('affine-edgeless-ai-chat');
-      // should switch to edgeless mode
-      expect(await getPageMode(page)).toBe('edgeless');
-      expect(
-        await Promise.all(
-          (await chatBlock.$$('.ai-chat-message .ai-answer-text-editor')).map(
-            m => m.innerText()
-          )
-        )
-      ).toStrictEqual(contents);
-    });
-
-    test('can be save chat to block when edgeless mode', async ({ page }) => {
-      const contents = (await collectChat(page)).map(m => m.content);
-      await switchToEdgelessMode(page);
-      expect(await getPageMode(page)).toBe('edgeless');
-      await page.getByTestId('action-save-as-block').click();
-      const chatBlock = await page.waitForSelector('affine-edgeless-ai-chat');
-      expect(
-        await Promise.all(
-          (await chatBlock.$$('.ai-chat-message .ai-answer-text-editor')).map(
-            m => m.innerText()
-          )
-        )
-      ).toStrictEqual(contents);
-    });
-
-    test('can save chat to block and clear history', async ({ page }) => {
-      await collectChat(page);
-      expect(await getPageMode(page)).toBe('page');
-      await page.getByTestId('action-save-as-block').click();
-      await page.waitForSelector('affine-edgeless-ai-chat');
-
-      await page.reload();
-      await page.waitForTimeout(200);
-      await clearChat(page);
-      expect((await collectChat(page)).length).toBe(0);
-    });
-
-    test('chat in center peek', async ({ page }) => {
-      const contents = (await collectChat(page)).map(m => m.content);
-      await page.getByTestId('action-save-as-block').click();
-      const chatBlock = await page.waitForSelector('affine-edgeless-ai-chat');
-      // open chat in center peek
-      await chatBlock.dblclick();
-      const chatBlockPeekView = await page.waitForSelector(
-        'ai-chat-block-peek-view'
-      );
-      expect(await chatBlockPeekView.isVisible()).toBe(true);
-      expect(
-        await Promise.all(
-          (
-            await chatBlockPeekView.$$(
-              '.ai-chat-message .ai-answer-text-editor'
-            )
-          ).map(m => m.innerText())
-        )
-      ).toStrictEqual(contents);
-
-      // chat in center peek
-      await page.getByTestId('chat-block-input').focus();
-      await page.keyboard.type('hi');
-      await page.keyboard.press('Enter');
-
-      // collect new messages
-      const newMessages = await collectNewMessages(page);
-      expect(newMessages[0].content).toEqual('hi');
-      expect(newMessages[1].name).toBe('AFFiNE AI');
-      expect(newMessages[1].content?.length).toBeGreaterThan(0);
-
-      // close peek view
-      await page.getByTestId('peek-view-control').click();
-      await page.waitForSelector('ai-chat-block-peek-view', {
-        state: 'hidden',
-      });
-
-      // there should be two chat block
-      const chatBlocks = await page.$$('affine-edgeless-ai-chat');
-      expect(chatBlocks.length).toBe(2);
-    });
-  });
-
-  test('can be chat and insert below in page mode', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await focusToEditor(page);
-    await page.keyboard.type('/');
-    await page.getByTestId('sub-menu-0').getByText('Ask AI').click();
-    const input = await page.waitForSelector('ai-panel-input textarea');
-    await input.fill('hello');
-    await input.press('Enter');
-    const resp = await page.waitForSelector(
-      'ai-panel-answer .response-list-container'
-    ); // wait response
-    const content = await (
-      await page.waitForSelector('ai-panel-answer editor-host')
-    ).innerText();
-    await (await resp.waitForSelector('.ai-item-insert-below')).click();
-    const editorContent = await getEditorContent(page);
-    expect(editorContent).toBe(content);
-  });
-
-  test('can regenerate chat in page mode', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await focusToEditor(page);
-    await page.keyboard.type('/');
-    await page.getByTestId('sub-menu-0').getByText('Ask AI').click();
-    const input = await page.waitForSelector('ai-panel-input textarea');
-    await input.fill('hello');
-    await input.press('Enter');
-    // regenerate
-    {
-      const resp = await page.waitForSelector(
-        'ai-panel-answer .response-list-container:last-child'
-      );
-      const answerEditor = await page.waitForSelector(
-        'ai-panel-answer editor-host'
-      );
-      const content = await answerEditor.innerText();
-      await (await resp.waitForSelector('.ai-item-regenerate')).click();
-      await page.waitForSelector('ai-panel-answer .response-list-container'); // wait response
-      expect(
-        await (
-          await (
-            await page.waitForSelector('ai-panel-answer')
-          ).waitForSelector('editor-host')
-        ).innerText()
-      ).not.toBe(content);
-    }
-  });
-
-  test('can discard chat in page mode', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await focusToEditor(page);
-    await page.keyboard.type('/');
-    await page.getByTestId('sub-menu-0').getByText('Ask AI').click();
-    const input = await page.waitForSelector('ai-panel-input textarea');
-    await input.fill('hello');
-    await input.press('Enter');
-
-    // discard without confirm modal
-    {
-      const resp = await page.waitForSelector(
-        'ai-panel-answer .response-list-container:last-child'
-      );
-      await (await resp.waitForSelector('.ai-item-discard')).click();
-      const editorContent = await getEditorContent(page);
-      expect(editorContent).toBe('');
-    }
-  });
-
-  test('can discard chat with confirm modal in edgeless mode', async ({
-    page,
-  }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await focusToEditor(page);
-    await page.keyboard.type('/');
-    await page.getByTestId('sub-menu-0').getByText('Ask AI').click();
-    const input = await page.waitForSelector('ai-panel-input textarea');
-    await input.fill('hello');
-    await input.press('Enter');
-
-    // discard with confirm modal
-    {
-      await page.waitForSelector(
-        'ai-panel-answer .response-list-container:last-child'
-      );
-      await page.mouse.click(100, 100);
-      await page.getByTestId('confirm-modal-confirm').click();
-      const editorContent = await getEditorContent(page);
-      expect(editorContent).toBe('');
-    }
-  });
-
-  test('can open and close network search', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-
-    await openChat(page);
-    await page.getByTestId('chat-network-search').click();
-    await typeChatSequentially(page, 'What is the weather in Shanghai today?');
-    await page.keyboard.press('Enter');
-    let history = await collectChat(page);
-    expect(history[0]).toEqual({
-      name: 'You',
-      content: 'What is the weather in Shanghai today?',
-    });
-    expect(history[1].name).toBe('AFFiNE AI');
-    expect(
-      await page.locator('chat-panel affine-footnote-node').count()
-    ).toBeGreaterThan(0);
-
-    await clearChat(page);
-    expect((await collectChat(page)).length).toBe(0);
-    await page.getByTestId('chat-network-search').click();
-    await typeChatSequentially(page, 'What is the weather in Shanghai today?');
-    await page.keyboard.press('Enter');
-    history = await collectChat(page);
-    expect(history[0]).toEqual({
-      name: 'You',
-      content: 'What is the weather in Shanghai today?',
-    });
-    expect(history[1].name).toBe('AFFiNE AI');
-    expect(await page.locator('chat-panel affine-footnote-node').count()).toBe(
-      0
-    );
-  });
-
-  test('can identify shape color, even if network search is active', async ({
-    page,
-  }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-
-    await openChat(page);
-    await page.getByTestId('chat-network-search').click();
-
-    await switchToEdgelessMode(page);
-
-    const shapeButton = await page.waitForSelector(
-      'edgeless-shape-tool-button'
-    );
-    await shapeButton.click();
-    await page.mouse.click(400, 400);
-
-    const askAIButton = await page.waitForSelector('.copilot-icon-button');
-    await askAIButton.click();
-
-    await page.waitForTimeout(1000);
-    await page.keyboard.type('What color is this shape?');
-    await page.keyboard.press('Enter');
-
-    const history = await collectChat(page);
-    expect(history[0]).toEqual({
-      name: 'You',
-      content: 'What color is this shape?',
-    });
-    expect(history[1].name).toBe('AFFiNE AI');
-    expect(history[1].content).toContain('yellow');
-    expect(await page.locator('chat-panel affine-footnote-node').count()).toBe(
-      0
-    );
-  });
-
-  test('can trigger inline ai input and action panel by clicking Start with AI button', async ({
-    page,
-  }) => {
-    await clickNewPageButton(page);
-    await page.getByTestId('start-with-ai-badge').click();
-    await expect(page.locator('affine-ai-panel-widget')).toBeVisible();
-    await expect(page.locator('ask-ai-panel')).toBeVisible();
-  });
-});
-
-test.describe('chat with block', () => {
-  let user: {
-    email: string;
-    password: string;
-  };
-
-  test.beforeEach(async ({ page }) => {
-    user = await getUser();
-    await loginUser(page, user);
-  });
-
-  const collectTextAnswer = async (page: Page) => {
-    // wait ai response
-    await page.waitForSelector(
-      'affine-ai-panel-widget .response-list-container',
-      { timeout: 5 * ONE_MINUTE }
-    );
-    const answer = await page.waitForSelector(
-      'affine-ai-panel-widget ai-panel-answer editor-host'
-    );
-    return answer.innerText();
-  };
-
-  const collectCanvasAnswer = async (page: Page, tagName: string) => {
-    // wait ai response
-    await page.waitForSelector(
-      'affine-ai-panel-widget .response-list-container',
-      { timeout: 5 * ONE_MINUTE }
-    );
-    const answer = await page.waitForSelector(
-      `affine-ai-panel-widget ai-panel-answer ${tagName}`
-    );
-    return answer;
-  };
-
-  const collectImageAnswer = async (page: Page, timeout = TEN_SECONDS) => {
-    // wait ai response
-    await page.waitForSelector(
-      'affine-ai-panel-widget .response-list-container',
-      { timeout }
-    );
-    const answer = await page.waitForSelector(
-      'affine-ai-panel-widget .ai-answer-image img'
-    );
-    return answer.getAttribute('src');
-  };
-
-  const disableEditorBlank = async (page: Page) => {
-    // hide blank element, this may block the click
-    const blank = page.getByTestId('page-editor-blank');
-    if (await blank.isVisible()) {
-      await blank.evaluate(node => (node.style.pointerEvents = 'none'));
-    } else {
-      console.warn('blank element not found');
-    }
-  };
-
-  test.describe('chat with text', () => {
-    const pasteTextToPageEditor = async (page: Page, content: string) => {
-      await focusToEditor(page);
-      await page.keyboard.type(content);
-    };
-
-    test.beforeEach(async ({ page }) => {
-      await page.reload();
-      await clickSideBarAllPageButton(page);
-      await page.waitForTimeout(200);
-      await createLocalWorkspace({ name: 'test' }, page);
-      await clickNewPageButton(page);
-      await pasteTextToPageEditor(page, 'Mac Mini');
-      await openChat(page);
-    });
-
-    test.beforeEach(async ({ page }) => {
-      await page.waitForSelector('affine-paragraph').then(i => i.click());
-      await page.keyboard.press('ControlOrMeta+A');
-      await page
-        .waitForSelector('page-editor editor-toolbar ask-ai-icon', {
-          state: 'attached',
-          timeout: 10000,
-        })
-        .then(b => b.click());
-    });
-
-    const options = [
-      // review with ai
-      'Fix spelling',
-      'Fix Grammar',
-      // edit with ai
-      'Explain selection',
-      'Improve writing',
-      'Make it longer',
-      'Make it shorter',
-      'Continue writing',
-      // generate with ai
-      'Summarize',
-      'Generate headings',
-      'Generate outline',
-      'Find actions',
-      'Generate an image',
-      'Brainstorm ideas with mind map',
-      'Generate presentation',
-      'Make it real',
-      // draft with ai
-      'Write an article about this',
-      'Write a tweet about this',
-      'Write a poem about this',
-      'Write a blog post about this',
-      'Brainstorm ideas about this',
-    ];
-    for (const option of options) {
-      test(option, async ({ page }) => {
-        await disableEditorBlank(page);
-        await page
-          .waitForSelector(
-            `.ai-item-${option.replaceAll(' ', '-').toLowerCase()}`
-          )
-          .then(i => i.click());
-
-        if (option === 'Generate an image') {
-          const mindmap = await collectCanvasAnswer(page, '.ai-answer-image');
-          expect(mindmap).toBeTruthy();
-        } else if (option === 'Brainstorm ideas with mind map') {
-          const mindmap = await collectCanvasAnswer(
-            page,
-            'mini-mindmap-preview'
-          );
-          expect(mindmap).toBeTruthy();
-        } else if (option === 'Generate presentation') {
-          const presentation = await collectCanvasAnswer(
-            page,
-            'ai-slides-renderer'
-          );
-          expect(presentation).toBeTruthy();
-        } else if (option === 'Make it real') {
-          const makeItReal = await collectCanvasAnswer(
-            page,
-            '.ai-answer-iframe'
-          );
-          expect(makeItReal).toBeTruthy();
-        } else {
-          expect(await collectTextAnswer(page)).toBeTruthy();
-        }
-        // TODO some actions do not have history yet
-        if (
-          option !== 'Generate presentation' &&
-          option !== 'Brainstorm ideas with mind map'
-        ) {
-          const history = await collectHistory(page);
-          expect(history.length).toBe(1);
-          expect(history[0].name).toBe('AFFiNE AI');
-          const discard = await page.waitForSelector('.ai-item-discard');
-          await discard.click();
-          await clearChat(page);
-          expect((await collectHistory(page)).length).toBe(0);
-        }
-      });
-    }
-
-    test.describe('Translate to', () => {
-      test('should close all ai item list when clicking outside', async ({
-        page,
-      }) => {
-        const item = await page.waitForSelector('.ai-item-translate-to');
-        await item.hover();
-
-        const subItemList = await page.waitForSelector('ai-sub-item-list');
-
-        const bounds = await subItemList.boundingBox();
-        expect(bounds).toBeTruthy();
-
-        await page.mouse.click(bounds!.x + bounds!.width / 2, bounds!.y - 20);
-
-        await expect(page.locator('ai-sub-item-list')).toBeHidden();
-        await expect(page.locator('ai-item-list')).toBeHidden();
-      });
-
-      test('should close all ai item list when clicking sub item', async ({
-        page,
-      }) => {
-        const item = await page.waitForSelector(
-          'ask-ai-panel .ai-item-translate-to'
-        );
-        await item.hover();
-
-        const subItemList = await page.waitForSelector('ai-sub-item-list');
-
-        const bounds = await subItemList.boundingBox();
-        expect(bounds).toBeTruthy();
-
-        (await subItemList.waitForSelector('.menu-item:nth-child(1)')).click();
-
-        await expect(page.locator('ai-sub-item-list')).toBeHidden();
-        await expect(page.locator('ask-ai-panel ai-item-list')).toBeHidden();
-      });
-    });
-  });
-
-  test.describe('chat with image block', () => {
-    const pasteImageToPageEditor = async (page: Page) => {
-      await page.evaluate(async () => {
-        const canvas = document.createElement('canvas');
-        canvas.width = 100;
-        canvas.height = 100;
-        const blob = await new Promise<Blob>(resolve =>
-          canvas.toBlob(blob => resolve(blob!), 'image/png')
-        );
-        await navigator.clipboard.write([
-          new ClipboardItem({ [blob.type]: blob }),
-        ]);
-      });
-      await focusToEditor(page);
-      await page.keyboard.press('ControlOrMeta+V');
-    };
-
-    test.beforeEach(async ({ page }) => {
-      await page.reload();
-      await clickSideBarAllPageButton(page);
-      await page.waitForTimeout(200);
-      await createLocalWorkspace({ name: 'test' }, page);
-      await clickNewPageButton(page);
-      await pasteImageToPageEditor(page);
-    });
-
-    test.describe('page mode', () => {
-      test.beforeEach(async ({ page }) => {
-        await disableEditorBlank(page);
-        await page.waitForSelector('affine-image').then(i => i.click());
-        await page
-          .waitForSelector('affine-image editor-toolbar ask-ai-icon')
-          .then(b => b.click());
-      });
-
-      test('explain this image', async ({ page }) => {
-        await page
-          .waitForSelector('.ai-item-explain-this-image')
-          .then(i => i.click());
-        expect(await collectTextAnswer(page)).toBeTruthy();
-      });
-
-      test('generate a caption', async ({ page }) => {
-        await page
-          .waitForSelector('.ai-item-generate-a-caption')
-          .then(i => i.click());
-        expect(await collectTextAnswer(page)).toBeTruthy();
-      });
-
-      test('continue with ai', async ({ page }) => {
-        await page
-          .waitForSelector('.ai-item-continue-with-ai')
-          .then(i => i.click());
-        await page
-          .waitForSelector('chat-panel-input image-preview-grid')
-          .then(el => el.waitForElementState('visible'));
-      });
-    });
-
-    // TODO(@darkskygit): block by BS-1709, enable this after bug fix
-    test.describe.skip('edgeless mode', () => {
-      test.beforeEach(async ({ page }) => {
-        await switchToEdgelessMode(page);
-        const note = await page.waitForSelector('affine-edgeless-note');
-
-        {
-          // move note to avoid menu overlap
-          const box = (await note.boundingBox())!;
-          page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-          page.mouse.down();
-          // sleep to avoid flicker
-          await page.waitForTimeout(500);
-          page.mouse.move(box.x + box.width / 2, box.y + box.height / 2 - 200);
-          await page.waitForTimeout(500);
-          page.mouse.up();
-          note.click();
-        }
-
-        await disableEditorBlank(page);
-        await page.waitForSelector('affine-image').then(i => i.click());
-        await page
-          .waitForSelector('affine-image editor-toolbar ask-ai-button')
-          .then(b => b.click());
-      });
-
-      // skip by default, dalle is very slow
-      test.skip('generate an image', async ({ page }) => {
-        await page
-          .waitForSelector('.ai-item-generate-an-image')
-          .then(i => i.click());
-        await page.keyboard.type('a cat');
-        await page.keyboard.press('Enter');
-        expect(await collectImageAnswer(page)).toBeTruthy();
-      });
-
-      const processes = [
-        'Clearer',
-        'Remove background',
-        // skip by default, need a face in image
-        // 'Convert to sticker',
-      ];
-      for (const process of processes) {
-        test(`image processing ${process}`, async ({ page }) => {
-          await page
-            .waitForSelector('.ai-item-image-processing')
-            .then(i => i.hover());
-          await page.getByText(process).click();
-          {
-            // to be remove
-            await page.keyboard.type(',');
-            await page.keyboard.press('Enter');
-          }
-          expect(await collectImageAnswer(page, ONE_MINUTE * 2)).toBeTruthy();
-        });
-      }
-
-      const filters = ['Clay', 'Sketch', 'Anime', 'Pixel'];
-      for (const filter of filters) {
-        test(`ai image ${filter.toLowerCase()} filter`, async ({ page }) => {
-          await page
-            .waitForSelector('.ai-item-ai-image-filter')
-            .then(i => i.hover());
-          await page.getByText(`${filter} style`).click();
-          {
-            // to be remove
-            await page.keyboard.type(',');
-            await page.keyboard.press('Enter');
-          }
-          expect(await collectImageAnswer(page, ONE_MINUTE * 2)).toBeTruthy();
-        });
-      }
-    });
-  });
-
-  test('clear history', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-    await focusToEditor(page);
-    await page.keyboard.type('Mac Mini');
-    await openChat(page);
-
-    await makeChat(page, 'hello');
-    await collectHistory(page);
-
-    await page.waitForSelector('affine-paragraph').then(i => i.click());
-    await page.keyboard.press('ControlOrMeta+A');
-    await page
-      .waitForSelector('page-editor editor-toolbar ask-ai-icon', {
-        state: 'attached',
-        timeout: 10000,
-      })
-      .then(b => b.click());
-    await disableEditorBlank(page);
-    await page
-      .waitForSelector(
-        `.ai-item-${`Fix spelling`.replaceAll(' ', '-').toLowerCase()}`
-      )
-      .then(i => i.click());
-    await collectTextAnswer(page);
-
-    await page.reload();
-    await page.waitForTimeout(1000);
-    const history = await collectHistory(page);
-    expect(history.length).toBe(3);
-    await clearChat(page);
-    expect((await collectHistory(page)).length).toBe(0);
-  });
-});
-
-test.describe('chat with doc', () => {
-  let user: {
-    email: string;
-    password: string;
-  };
-
-  test.beforeEach(async ({ page }) => {
-    user = await getUser();
-    await loginUser(page, user);
-  });
-
-  test('can chat with current doc', async ({ page }) => {
-    await page.reload();
-    await clickSideBarAllPageButton(page);
-    await page.waitForTimeout(200);
-    await createLocalWorkspace({ name: 'test' }, page);
-    await clickNewPageButton(page);
-
-    await openChat(page);
-
-    const addButton = await page.locator('chat-panel-chips .add-button');
-    await addButton.click();
-    const docItem = await page.locator('chat-panel-add-popover icon-button', {
-      hasText: 'Untitled',
-    });
-    await docItem.click();
-    await page.waitForTimeout(200);
-    let chipTitle = await page.getByTestId('chat-panel-chip-title');
-    expect(await chipTitle.textContent()).toBe('Untitled');
-    let chip = await page.getByTestId('chat-panel-chip');
-    // oxlint-disable-next-line unicorn/prefer-dom-node-dataset
-    expect(await chip.getAttribute('data-state')).toBe('finished');
-
-    const editorTitle = await page.locator('doc-title .inline-editor').nth(0);
-    await editorTitle.pressSequentially('AFFiNE AI', {
-      delay: 50,
-    });
-    await page.keyboard.press('Enter', { delay: 50 });
-    // Wait for the editor to be ready and focused
-    await page.waitForSelector('page-editor affine-paragraph .inline-editor');
-    const richText = await page
-      .locator('page-editor affine-paragraph .inline-editor')
-      .nth(0);
-    await richText.click(); // Ensure proper focus
-    await page.keyboard.type(
-      'AFiAI is an assistant with the ability to create well-structured outlines for any given content.',
-      {
-        delay: 50,
-      }
-    );
-
-    expect(await chipTitle.textContent()).toBe('AFFiNE AI');
-    // oxlint-disable-next-line unicorn/prefer-dom-node-dataset
-    expect(await chip.getAttribute('data-state')).toBe('finished');
-
-    await typeChatSequentially(page, 'What is AFiAI?');
-    await page.keyboard.press('Enter');
-    const history = await collectChat(page);
-    expect(history[0]).toEqual({
-      name: 'You',
-      content: 'What is AFiAI?',
-    });
-
-    expect(history[1].name).toBe(`AFFiNE AI\nwith your docs`);
-    expect(
-      await page.locator('chat-panel affine-footnote-node').count()
-    ).toBeGreaterThan(0);
-    await clearChat(page);
-    expect((await collectChat(page)).length).toBe(0);
-
-    await page.reload();
-    await page.waitForTimeout(200);
-    await openChat(page);
-    expect(await chipTitle.textContent()).toBe('AFFiNE AI');
-    const chip2 = await page.getByTestId('chat-panel-chip');
-    // oxlint-disable-next-line unicorn/prefer-dom-node-dataset
-    expect(await chip2.getAttribute('data-state')).toBe('finished');
-  });
-});
diff --git a/tests/affine-cloud-copilot/e2e/insertion/add-to-edgeless-as-note.spec.ts b/tests/affine-cloud-copilot/e2e/insertion/add-to-edgeless-as-note.spec.ts
new file mode 100644
index 0000000000..a3306911c2
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/insertion/add-to-edgeless-as-note.spec.ts
@@ -0,0 +1,73 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIInsertion/AddToEdgelessAsNote', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should only show option in edgeless mode', async ({ page, utils }) => {
+    await utils.editor.focusToEditor(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    await expect(
+      page.getByTestId('action-add-to-edgeless-as-note')
+    ).not.toBeVisible();
+
+    await utils.editor.switchToEdgelessMode(page);
+    await expect(
+      page.getByTestId('action-add-to-edgeless-as-note')
+    ).toBeVisible();
+  });
+
+  test('should add to edgeless as note  in edgeless mode', async ({
+    page,
+    utils,
+  }) => {
+    await utils.editor.switchToEdgelessMode(page);
+
+    // Delete default note
+    await (await page.waitForSelector('affine-edgeless-note')).click();
+    page.keyboard.press('Delete');
+
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.addAsNote();
+    await page.getByText('New note created');
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      const noteContent = await utils.editor.getNoteContent(page);
+      expect(noteContent).toBe(content);
+    }).toPass({ timeout: 5000 });
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/insertion/insert.spec.ts b/tests/affine-cloud-copilot/e2e/insertion/insert.spec.ts
new file mode 100644
index 0000000000..4083a0d28b
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/insertion/insert.spec.ts
@@ -0,0 +1,201 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { focusDocTitle } from '@affine-test/kit/utils/editor';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIInsertion/Insert', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should insert content below selected block in page mode', async ({
+    page,
+    utils,
+  }) => {
+    // Create tow blocks
+    // - Hello Block
+    // - World Block
+    await utils.editor.focusToEditor(page);
+    await page.keyboard.insertText('Hello Block');
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText('World Block');
+
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    // Focus to Hello
+    // - Hello<cursor />
+    await page.getByText('Hello Block').click();
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.insert();
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      const editorContent = await utils.editor.getEditorContent(page);
+      expect(editorContent).toBe(`Hello Block\n${content}\nWorld Block`);
+    }).toPass({ timeout: 5000 });
+  });
+
+  test('should insert content below selected block in edgeless mode', async ({
+    page,
+    utils,
+  }) => {
+    await utils.editor.switchToEdgelessMode(page);
+    await utils.editor.focusToEditor(page);
+    await page.keyboard.insertText('Hello Block');
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText('World Block');
+
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    // Focus to Hello
+    // - Hello<cursor />
+    await page.locator('affine-edgeless-note').dblclick();
+    await page.getByText('Hello Block').click();
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.insert();
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      const noteContent = await utils.editor.getNoteContent(page);
+      expect(noteContent).toBe(`Hello Block\n${content}\nWorld Block`);
+    }).toPass({ timeout: 5000 });
+  });
+
+  test('should insert content at the end of the page when no block is selected', async ({
+    page,
+    utils,
+  }) => {
+    // Create tow blocks
+    // - Hello Block
+    // - World Block
+    await utils.editor.focusToEditor(page);
+    await page.keyboard.insertText('Hello Block');
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText('World Block');
+
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    // Focus Doc Title
+    // - Hello<cursor />
+    await focusDocTitle(page);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.insert();
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      const editorContent = await utils.editor.getEditorContent(page);
+      expect(editorContent).toBe(`Hello Block\nWorld Block\n${content}`);
+    }).toPass({ timeout: 5000 });
+  });
+
+  test('should insert content at the end of the note when no block is selected in edgeless mode', async ({
+    page,
+    utils,
+  }) => {
+    await utils.editor.switchToEdgelessMode(page);
+    await utils.editor.focusToEditor(page);
+    await page.keyboard.insertText('Hello Block');
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText('World Block');
+
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.insert();
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      const noteContent = await utils.editor.getNoteContent(page);
+      expect(noteContent).toBe(`Hello Block\nWorld Block\n${content}`);
+    }).toPass({ timeout: 5000 });
+  });
+
+  test('should create a new note when no block or note is selected in edgeless mode', async ({
+    page,
+    utils,
+  }) => {
+    await utils.editor.switchToEdgelessMode(page);
+
+    // Delete default note
+    await (await page.waitForSelector('affine-edgeless-note')).click();
+    page.keyboard.press('Delete');
+
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.insert();
+
+    await expect(async () => {
+      const { content } = await utils.chatPanel.getLatestAssistantMessage(page);
+      const noteContent = await utils.editor.getNoteContent(page);
+      expect(noteContent).toBe(content);
+    }).toPass({ timeout: 5000 });
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/insertion/save-as-block.spec.ts b/tests/affine-cloud-copilot/e2e/insertion/save-as-block.spec.ts
new file mode 100644
index 0000000000..2540fbf6af
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/insertion/save-as-block.spec.ts
@@ -0,0 +1,73 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIInsertion/SaveAsBlock', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should save content as a chat block in page mode', async ({
+    page,
+    utils,
+  }) => {
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.saveAsBlock();
+
+    // Switch to edgeless mode
+    await utils.editor.isEdgelessMode(page);
+
+    // Verify the ai block is created
+    await page.waitForSelector('affine-edgeless-ai-chat');
+    const aiBlock = await page.locator('affine-edgeless-ai-chat');
+    await expect(aiBlock).toBeVisible();
+  });
+
+  test('should save content as a chat block in edgeless mode', async ({
+    page,
+    utils,
+  }) => {
+    await utils.editor.switchToEdgelessMode(page);
+
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    const { actions } = await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.saveAsBlock();
+    await page.getByText('Successfully saved chat to a block');
+
+    // Verify the ai block is created
+    await page.waitForSelector('affine-edgeless-ai-chat');
+    const aiBlock = await page.locator('affine-edgeless-ai-chat');
+    await expect(aiBlock).toBeVisible();
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/insertion/save-as-doc.spec.ts b/tests/affine-cloud-copilot/e2e/insertion/save-as-doc.spec.ts
new file mode 100644
index 0000000000..648b7cb9e0
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/insertion/save-as-doc.spec.ts
@@ -0,0 +1,75 @@
+import { loginUser } from '@affine-test/kit/utils/cloud';
+import { expect } from '@playwright/test';
+
+import { test } from '../base/base-test';
+
+test.describe('AIInsertion/SaveAsDoc', () => {
+  test.beforeEach(async ({ page, utils }) => {
+    const user = await utils.testUtils.getUser();
+    await loginUser(page, user);
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should save content as a doc in page mode', async ({ page, utils }) => {
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    // Wait for the assistant answer to be completely rendered
+    await page.waitForTimeout(1000);
+    const { actions, content } =
+      await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.saveAsDoc();
+    await page.getByText('New doc created');
+
+    // Verify the ai block is created
+    const editorContent = await utils.editor.getEditorContent(page);
+    expect(editorContent).toBe(content);
+  });
+
+  test('should save content as a doc in edgeless mode', async ({
+    page,
+    utils,
+  }) => {
+    await utils.editor.switchToEdgelessMode(page);
+
+    await utils.chatPanel.openChatPanel(page);
+    await utils.chatPanel.makeChat(page, 'Hello');
+
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content: 'Hello',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+
+    // Wait for the assistant answer to be completely rendered
+    await page.waitForTimeout(1000);
+    const { actions, content } =
+      await utils.chatPanel.getLatestAssistantMessage(page);
+    await actions.saveAsDoc();
+    await page.getByText('New doc created');
+
+    // Switch to page mode
+    await utils.editor.isPageMode(page);
+
+    // Verify the ai block is created
+    const editorContent = await utils.editor.getEditorContent(page);
+    expect(editorContent).toBe(content);
+  });
+});
diff --git a/tests/affine-cloud-copilot/e2e/types/global.d.ts b/tests/affine-cloud-copilot/e2e/types/global.d.ts
new file mode 100644
index 0000000000..5388156140
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/types/global.d.ts
@@ -0,0 +1,3 @@
+interface Window {
+  showOpenFilePicker?: () => Promise<FileSystemFileHandle[]>;
+} 
\ No newline at end of file
diff --git a/tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts b/tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts
new file mode 100644
index 0000000000..4eec12cf5a
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts
@@ -0,0 +1,276 @@
+// eslint-disable eslint-plugin-unicorn(prefer-dom-node-dataset
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+type ChatStatus = 'loading' | 'success' | 'error' | 'idle' | 'transmitting';
+
+type ChatUserMessage = {
+  role: 'user';
+  content: string;
+};
+
+type ChatAssistantMessage = {
+  role: 'assistant';
+  status: ChatStatus;
+  title: string;
+  content: string;
+};
+
+type ChatActionMessage = {
+  role: 'action';
+  title: string;
+  content: string;
+};
+
+type ChatMessage = ChatUserMessage | ChatAssistantMessage | ChatActionMessage;
+
+export class ChatPanelUtils {
+  public static async openChatPanel(page: Page) {
+    if (await page.getByTestId('sidebar-tab-chat').isHidden()) {
+      await page.getByTestId('right-sidebar-toggle').click({
+        delay: 200,
+      });
+    }
+    await page.getByTestId('sidebar-tab-chat').click();
+    await expect(page.getByTestId('sidebar-tab-content-chat')).toBeVisible();
+  }
+
+  public static async typeChat(page: Page, content: string) {
+    await page.getByTestId('chat-panel-input').focus();
+    await page.keyboard.type(content);
+  }
+
+  public static async typeChatSequentially(page: Page, content: string) {
+    const input = await page.locator('chat-panel-input textarea').nth(0);
+    await input.pressSequentially(content, {
+      delay: 50,
+    });
+  }
+
+  public static async makeChat(page: Page, content: string) {
+    await this.openChatPanel(page);
+    await this.typeChat(page, content);
+    await page.keyboard.press('Enter');
+  }
+
+  public static async clearChat(page: Page) {
+    await page.getByTestId('chat-panel-clear').click();
+    await page.getByTestId('confirm-modal-confirm').click();
+    await page.waitForTimeout(500);
+  }
+
+  public static async collectHistory(page: Page) {
+    return await page.evaluate(() => {
+      const chatPanel = document.querySelector<HTMLElement>(
+        '[data-testid="chat-panel-messages"]'
+      );
+      if (!chatPanel) {
+        return [] as ChatMessage[];
+      }
+      const messages = chatPanel.querySelectorAll<HTMLElement>(
+        'chat-message-user,chat-message-assistant,chat-message-action'
+      );
+
+      return Array.from(messages).map(m => {
+        const isAssistant = m.dataset.testid === 'chat-message-assistant';
+        const isChatAction = m.dataset.testid === 'chat-message-action';
+
+        const isUser = !isAssistant && !isChatAction;
+
+        if (isUser) {
+          return {
+            role: 'user' as const,
+            content:
+              m.querySelector<HTMLElement>(
+                '[data-testid="chat-content-pure-text"]'
+              )?.innerText || '',
+          };
+        }
+
+        if (isAssistant) {
+          return {
+            role: 'assistant' as const,
+            status: m.dataset.status as ChatStatus,
+            title: m.querySelector<HTMLElement>('.user-info')?.innerText || '',
+            content:
+              m.querySelector<HTMLElement>('chat-content-rich-text editor-host')
+                ?.innerText || '',
+          };
+        }
+
+        // Must be chat action at this point
+        return {
+          role: 'action' as const,
+          title: m.querySelector<HTMLElement>('.user-info')?.innerText || '',
+          content:
+            m.querySelector<HTMLElement>('chat-content-rich-text editor-host')
+              ?.innerText || '',
+        };
+      });
+    });
+  }
+
+  private static expectHistory(
+    history: ChatMessage[],
+    expected: (
+      | Partial<ChatUserMessage>
+      | Partial<ChatAssistantMessage>
+      | Partial<ChatActionMessage>
+    )[]
+  ) {
+    expect(history).toHaveLength(expected.length);
+    history.forEach((message, index) => {
+      const expectedMessage = expected[index];
+      expect(message).toMatchObject(expectedMessage);
+    });
+  }
+
+  public static async expectToHaveHistory(
+    page: Page,
+    expected: (
+      | Partial<ChatUserMessage>
+      | Partial<ChatAssistantMessage>
+      | Partial<ChatActionMessage>
+    )[]
+  ) {
+    const history = await this.collectHistory(page);
+    this.expectHistory(history, expected);
+  }
+
+  public static async waitForHistory(
+    page: Page,
+    expected: (
+      | Partial<ChatUserMessage>
+      | Partial<ChatAssistantMessage>
+      | Partial<ChatActionMessage>
+    )[],
+    timeout = 2 * 60000
+  ) {
+    await expect(async () => {
+      const history = await this.collectHistory(page);
+      this.expectHistory(history, expected);
+    }).toPass({ timeout });
+  }
+
+  public static async getLatestAssistantMessage(page: Page) {
+    const message = page.getByTestId('chat-message-assistant').last();
+    const actions = await message.getByTestId('chat-actions');
+    const actionList = await message.getByTestId('chat-action-list');
+    return {
+      message,
+      content: await message
+        .locator('chat-content-rich-text editor-host')
+        .innerText(),
+      actions: {
+        copy: async () => actions.getByTestId('action-copy-button').click(),
+        retry: async () => actions.getByTestId('action-retry-button').click(),
+        insert: async () => actionList.getByTestId('action-insert').click(),
+        saveAsBlock: async () =>
+          actionList.getByTestId('action-save-as-block').click(),
+        saveAsDoc: async () =>
+          actionList.getByTestId('action-save-as-doc').click(),
+        addAsNote: async () =>
+          actionList.getByTestId('action-add-to-edgeless-as-note').click(),
+      },
+    };
+  }
+
+  public static async getLatestAIActionMessage(page: Page) {
+    const message = page.getByTestId('chat-message-action').last();
+    const actionName = await message.getByTestId('action-name');
+    await actionName.click();
+    const answer = await message.getByTestId('answer-prompt');
+    const prompt = await message.getByTestId('chat-message-action-prompt');
+    return {
+      message,
+      answer,
+      prompt,
+      actionName,
+    };
+  }
+
+  public static async chatWithDoc(page: Page, docName: string) {
+    const withButton = await page.getByTestId('chat-panel-with-button');
+    await withButton.click();
+    const withMenu = await page.getByTestId('ai-add-popover');
+    await withMenu.getByText(docName).click();
+    await page.getByTestId('chat-panel-chips').getByText(docName);
+  }
+
+  public static async chatWithAttachments(
+    page: Page,
+    attachments: { name: string; mimeType: string; buffer: Buffer }[],
+    text: string
+  ) {
+    await page.evaluate(() => {
+      delete window.showOpenFilePicker;
+    });
+
+    for (const attachment of attachments) {
+      const fileChooserPromise = page.waitForEvent('filechooser');
+      const withButton = await page.getByTestId('chat-panel-with-button');
+      await withButton.click();
+      const withMenu = await page.getByTestId('ai-add-popover');
+      await withMenu.getByTestId('ai-chat-with-files').click();
+      const fileChooser = await fileChooserPromise;
+      await fileChooser.setFiles(attachment);
+    }
+    await expect(async () => {
+      const states = await page
+        .getByTestId('chat-panel-chip')
+        .evaluateAll(elements =>
+          elements.map(el => el.getAttribute('data-state'))
+        );
+      await expect(states).toHaveLength(attachments.length);
+      await expect(states.every(state => state === 'finished')).toBe(true);
+    }).toPass({ timeout: 20000 });
+
+    await page.pause();
+    await this.makeChat(page, text);
+  }
+
+  public static async chatWithImages(
+    page: Page,
+    images: { name: string; mimeType: string; buffer: Buffer }[],
+    text: string
+  ) {
+    await page.evaluate(() => {
+      delete window.showOpenFilePicker;
+    });
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    // Open file upload dialog
+    await page.getByTestId('chat-panel-input-image-upload').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(images);
+
+    await page.waitForSelector('chat-panel-input img');
+    await this.makeChat(page, text);
+  }
+
+  public static async enableNetworkSearch(page: Page) {
+    const networkSearch = await page.getByTestId('chat-network-search');
+    if ((await networkSearch.getAttribute('data-active')) === 'false') {
+      await networkSearch.click();
+    }
+  }
+
+  public static async disableNetworkSearch(page: Page) {
+    const networkSearch = await page.getByTestId('chat-network-search');
+    if ((await networkSearch.getAttribute('data-active')) === 'true') {
+      await networkSearch.click();
+    }
+  }
+
+  public static async isNetworkSearchEnabled(page: Page) {
+    const networkSearch = await page.getByTestId('chat-network-search');
+    return (await networkSearch.getAttribute('aria-disabled')) === 'false';
+  }
+
+  public static async isImageUploadEnabled(page: Page) {
+    const imageUpload = await page.getByTestId('chat-panel-input-image-upload');
+    const disabled = await imageUpload.getAttribute('data-disabled');
+    return disabled === 'false';
+  }
+}
diff --git a/tests/affine-cloud-copilot/e2e/utils/editor-utils.ts b/tests/affine-cloud-copilot/e2e/utils/editor-utils.ts
new file mode 100644
index 0000000000..77394ddd65
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/utils/editor-utils.ts
@@ -0,0 +1,528 @@
+import {
+  createEdgelessNoteBlock,
+  setEdgelessTool,
+} from '@affine-test/kit/utils/editor';
+import {
+  pressEscape,
+  selectAllByKeyboard,
+} from '@affine-test/kit/utils/keyboard';
+import { getBlockSuiteEditorTitle } from '@affine-test/kit/utils/page-logic';
+import type { EdgelessRootBlockComponent } from '@blocksuite/affine/blocks/root';
+import type {
+  MindmapElementModel,
+  ShapeElementModel,
+} from '@blocksuite/affine-model';
+import type { GfxModel } from '@blocksuite/std/gfx';
+import { type Page } from '@playwright/test';
+export class EditorUtils {
+  public static async focusToEditor(page: Page) {
+    const title = getBlockSuiteEditorTitle(page);
+    await title.focus();
+    await page.keyboard.press('Enter');
+  }
+
+  public static async getEditorContent(page: Page) {
+    let content = '';
+    let retry = 3;
+    while (!content && retry > 0) {
+      const lines = await page.$$('page-editor .inline-editor');
+      const contents = await Promise.all(lines.map(el => el.innerText()));
+      content = contents
+        .map(c => c.replace(/\u200B/g, '').trim())
+        .filter(c => !!c)
+        .join('\n');
+      if (!content) {
+        await page.waitForTimeout(500);
+        retry -= 1;
+      }
+    }
+    return content;
+  }
+
+  public static async getNoteContent(page: Page) {
+    const edgelessNode = await page.waitForSelector(
+      'affine-edgeless-note .edgeless-note-page-content'
+    );
+    return (await edgelessNode.innerText()).replace(/\u200B/g, '').trim();
+  }
+
+  public static async switchToEdgelessMode(page: Page) {
+    const editor = await page.waitForSelector('page-editor');
+    await page.getByTestId('switch-edgeless-mode-button').click();
+    editor.waitForElementState('hidden');
+    await page.waitForSelector('edgeless-editor');
+  }
+
+  public static async switchToPageMode(page: Page) {
+    await page.getByTestId('switch-page-mode-button').click();
+    await page.waitForSelector('page-editor');
+  }
+
+  public static async isPageMode(page: Page) {
+    return await page.waitForSelector('page-editor');
+  }
+
+  public static async isEdgelessMode(page: Page) {
+    return await page.waitForSelector('edgeless-editor');
+  }
+
+  public static async getDocTitle(page: Page) {
+    return page.getByTestId('title-edit-button').innerText();
+  }
+
+  public static async waitForAiAnswer(page: Page) {
+    const answer = await page.getByTestId('ai-penel-answer');
+    await answer.waitFor({
+      state: 'visible',
+      timeout: 2 * 60000,
+    });
+    return answer;
+  }
+
+  private static createAction(page: Page, action: () => Promise<void>) {
+    return async () => {
+      await action();
+      const responses = new Set<string>();
+      const answer = await this.waitForAiAnswer(page);
+      const responsesMenu = answer.getByTestId('answer-responses');
+      await responsesMenu.isVisible();
+      await responsesMenu.scrollIntoViewIfNeeded({ timeout: 60000 });
+
+      if (await responsesMenu.getByTestId('answer-insert-below').isVisible()) {
+        responses.add('insert-below');
+      }
+      if (await responsesMenu.getByTestId('answer-insert-above').isVisible()) {
+        responses.add('insert-above');
+      }
+      if (await responsesMenu.getByTestId('answer-replace').isVisible()) {
+        responses.add('replace-selection');
+      }
+      if (
+        await responsesMenu.getByTestId('answer-use-as-caption').isVisible()
+      ) {
+        responses.add('use-as-caption');
+      }
+      if (
+        await responsesMenu.getByTestId('answer-create-new-note').isVisible()
+      ) {
+        responses.add('create-new-note');
+      }
+
+      return {
+        answer: await this.waitForAiAnswer(page),
+        responses,
+      };
+    };
+  }
+
+  public static async createEdgelessText(page: Page, text: string) {
+    await setEdgelessTool(page, 'text');
+    await page.mouse.click(400, 400);
+    await page.locator('affine-edgeless-text').waitFor({ state: 'visible' });
+    await page.waitForTimeout(100);
+    const texts = text.split('\n');
+    for (const [index, line] of texts.entries()) {
+      await page.keyboard.insertText(line);
+      if (index !== texts.length - 1) {
+        await page.keyboard.press('Enter');
+      }
+    }
+  }
+
+  public static async createEdgelessNote(page: Page, text: string) {
+    await createEdgelessNoteBlock(page, [500, 300]);
+    const texts = text.split('\n');
+    for (const [index, line] of texts.entries()) {
+      await page.keyboard.insertText(line);
+      if (index !== texts.length - 1) {
+        await page.keyboard.press('Enter');
+      }
+    }
+  }
+
+  public static async createMindmap(page: Page) {
+    await page.keyboard.press('m');
+    await page.mouse.click(400, 400);
+    const id = await page.evaluate(() => {
+      const edgelessBlock = document.querySelector(
+        'affine-edgeless-root'
+      ) as EdgelessRootBlockComponent;
+      if (!edgelessBlock) {
+        throw new Error('edgeless block not found');
+      }
+      const mindmaps = edgelessBlock.gfx.gfxElements.filter(
+        (el: GfxModel) => 'type' in el && el.type === 'mindmap'
+      );
+
+      return mindmaps[mindmaps.length - 1].id;
+    });
+
+    return id;
+  }
+
+  public static async getMindMapNode(
+    page: Page,
+    mindmapId: string,
+    path: number[]
+  ) {
+    return page.evaluate(
+      ({ mindmapId, path }) => {
+        const edgelessBlock = document.querySelector(
+          'affine-edgeless-root'
+        ) as EdgelessRootBlockComponent;
+        if (!edgelessBlock) {
+          throw new Error('edgeless block not found');
+        }
+
+        const mindmap = edgelessBlock.gfx.getElementById(
+          mindmapId
+        ) as MindmapElementModel;
+        if (!mindmap) {
+          throw new Error(`Mindmap not found: ${mindmapId}`);
+        }
+
+        const node = mindmap.getNodeByPath(path);
+        if (!node) {
+          throw new Error(`Mindmap node not found at: ${path}`);
+        }
+
+        const rect = edgelessBlock.gfx.viewport.toViewBound(
+          node.element.elementBound
+        );
+
+        return {
+          path: mindmap.getPath(node),
+          id: node.id,
+          text: (node.element as ShapeElementModel).text?.toString() ?? '',
+          rect: {
+            x: rect.x,
+            y: rect.y,
+            w: rect.w,
+            h: rect.h,
+          },
+        };
+      },
+      {
+        mindmapId,
+        path,
+      }
+    );
+  }
+
+  public static async selectElementInEdgeless(page: Page, elements: string[]) {
+    await page.evaluate(
+      ({ elements }) => {
+        const edgelessBlock = document.querySelector(
+          'affine-edgeless-root'
+        ) as EdgelessRootBlockComponent;
+        if (!edgelessBlock) {
+          throw new Error('edgeless block not found');
+        }
+
+        edgelessBlock.gfx.selection.set({
+          elements,
+        });
+      },
+      { elements }
+    );
+  }
+
+  public static async askAIWithEdgeless(
+    page: Page,
+    createBlock: () => Promise<void>,
+    afterSelected?: () => Promise<void>
+  ) {
+    await this.switchToEdgelessMode(page);
+    await selectAllByKeyboard(page);
+    await page.keyboard.press('Delete');
+    await createBlock();
+    await pressEscape(page, 5);
+    await selectAllByKeyboard(page);
+    await afterSelected?.();
+    await page.getByTestId('ask-ai-button').click();
+
+    return {
+      aiImageFilter: this.createAction(page, () =>
+        page.getByTestId('action-ai-image-filter').click()
+      ),
+      brainstorm: this.createAction(page, () =>
+        page.getByTestId('action-brainstorm').click()
+      ),
+      brainstormMindMap: this.createAction(page, () =>
+        page.getByTestId('action-brainstorm-mindmap').click()
+      ),
+      changeTone: (
+        tone: 'professional' | 'informal' | 'friendly' | 'critical' | 'humorous'
+      ) =>
+        this.createAction(page, async () => {
+          await page.getByTestId('action-change-tone').hover();
+          await page.getByTestId(`action-change-tone-${tone}`).click();
+        })(),
+      checkCodeError: this.createAction(page, () =>
+        page.getByTestId('action-check-code-error').click()
+      ),
+      continueWithAi: async () => {
+        page.getByTestId('action-continue-with-ai').click();
+      },
+      continueWriting: this.createAction(page, () =>
+        page.getByTestId('action-continue-writing').click()
+      ),
+      createHeadings: this.createAction(page, () =>
+        page.getByTestId('action-create-headings').click()
+      ),
+      explainSelection: this.createAction(page, () =>
+        page.getByTestId('action-explain-selection').click()
+      ),
+      findActions: this.createAction(page, () =>
+        page.getByTestId('action-find-actions').click()
+      ),
+      fixGrammar: this.createAction(page, () =>
+        page.getByTestId('action-fix-grammar').click()
+      ),
+      fixSpelling: this.createAction(page, () =>
+        page.getByTestId('action-fix-spelling').click()
+      ),
+      generateCaption: this.createAction(page, () =>
+        page.getByTestId('action-generate-caption').click()
+      ),
+      generateHeadings: this.createAction(page, () =>
+        page.getByTestId('action-generate-headings').click()
+      ),
+      generateImage: this.createAction(page, () =>
+        page.getByTestId('action-generate-image').click()
+      ),
+      generateOutline: this.createAction(page, () =>
+        page.getByTestId('action-generate-outline').click()
+      ),
+      generatePresentation: this.createAction(page, () =>
+        page.getByTestId('action-generate-presentation').click()
+      ),
+      imageProcessing: this.createAction(page, () =>
+        page.getByTestId('action-image-processing').click()
+      ),
+      improveGrammar: this.createAction(page, () =>
+        page.getByTestId('action-improve-grammar').click()
+      ),
+      improveWriting: this.createAction(page, () =>
+        page.getByTestId('action-improve-writing').click()
+      ),
+      makeItLonger: this.createAction(page, () =>
+        page.getByTestId('action-make-it-longer').click()
+      ),
+      makeItReal: this.createAction(page, () =>
+        page.getByTestId('action-make-it-real').click()
+      ),
+      makeItShorter: this.createAction(page, () =>
+        page.getByTestId('action-make-it-shorter').click()
+      ),
+      summarize: this.createAction(page, () =>
+        page.getByTestId('action-summarize').click()
+      ),
+      translate: (language: string) =>
+        this.createAction(page, async () => {
+          await page.getByTestId('action-translate').hover();
+          await page.getByTestId(`action-translate-${language}`).click();
+        })(),
+      writeArticle: this.createAction(page, () =>
+        page.getByTestId('action-write-article').click()
+      ),
+      writeBlogPost: this.createAction(page, () =>
+        page.getByTestId('action-write-blog-post').click()
+      ),
+      writePoem: this.createAction(page, () =>
+        page.getByTestId('action-write-poem').click()
+      ),
+      writeTwitterPost: this.createAction(page, () =>
+        page.getByTestId('action-write-twitter-post').click()
+      ),
+      regenerateMindMap: this.createAction(page, () =>
+        page.getByTestId('action-regenerate-mindmap').click()
+      ),
+      expandMindMapNode: async () =>
+        page.getByTestId('action-expand-mindmap-node').click(),
+    } as const;
+  }
+
+  public static async askAIWithCode(
+    page: Page,
+    code: string,
+    language: string
+  ) {
+    await this.focusToEditor(page);
+    await page.keyboard.insertText(`\`\`\`${language}`);
+    await page.keyboard.press('Enter');
+    await page.keyboard.insertText(code);
+    await page.locator('affine-code').blur();
+    await page.locator('affine-code').hover();
+    await page.getByTestId('ask-ai-button').click();
+    return {
+      explainCode: this.createAction(page, () =>
+        page.getByTestId('action-explain-code').click()
+      ),
+      checkCodeError: this.createAction(page, () =>
+        page.getByTestId('action-check-code-error').click()
+      ),
+    };
+  }
+
+  public static async askAIWithImage(
+    page: Page,
+    image: { name: string; mimeType: string; buffer: Buffer }
+  ) {
+    await page.evaluate(() => {
+      delete window.showOpenFilePicker;
+    });
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+
+    await this.focusToEditor(page);
+    await page.keyboard.press('/');
+    await page.keyboard.insertText('image');
+    await page.locator('affine-slash-menu').getByTestId('Image').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(image);
+
+    await page.locator('affine-page-image').click();
+    await page.getByTestId('ask-ai-button').click();
+
+    return {
+      explainImage: this.createAction(page, () =>
+        page.getByTestId('action-explain-image').click()
+      ),
+      generateImage: this.createAction(page, () =>
+        page.getByTestId('action-generate-image').click()
+      ),
+      generateCaption: this.createAction(page, () =>
+        page.getByTestId('action-generate-caption').click()
+      ),
+      imageProcessing: (type: string) =>
+        this.createAction(page, async () => {
+          await page.getByTestId('action-image-processing').hover();
+          await page.getByTestId(`action-image-processing-${type}`).click();
+        })(),
+      imageFilter: (style: string) =>
+        this.createAction(page, async () => {
+          await page.getByTestId('action-ai-image-filter').hover();
+          await page.getByTestId(`action-image-filter-${style}`).click();
+        })(),
+    };
+  }
+
+  public static async askAIWithText(page: Page, text: string) {
+    await this.focusToEditor(page);
+    const texts = text.split('\n');
+    for (const [index, line] of texts.entries()) {
+      await page.keyboard.insertText(line);
+      if (index !== texts.length - 1) {
+        await page.keyboard.press('Enter');
+      }
+    }
+    await page.keyboard.press('ControlOrMeta+A');
+    await page.keyboard.press('ControlOrMeta+A');
+    await page.keyboard.press('ControlOrMeta+A');
+
+    const askAI = await page.locator('page-editor editor-toolbar ask-ai-icon');
+    await askAI.waitFor({
+      state: 'attached',
+      timeout: 5000,
+    });
+    await askAI.click();
+
+    return {
+      aiImageFilter: this.createAction(page, () =>
+        page.getByTestId('action-ai-image-filter').click()
+      ),
+      brainstorm: this.createAction(page, () =>
+        page.getByTestId('action-brainstorm').click()
+      ),
+      brainstormMindMap: this.createAction(page, () =>
+        page.getByTestId('action-brainstorm-mindmap').click()
+      ),
+      changeTone: (
+        tone: 'professional' | 'informal' | 'friendly' | 'critical' | 'humorous'
+      ) =>
+        this.createAction(page, async () => {
+          await page.getByTestId('action-change-tone').hover();
+          await page.getByTestId(`action-change-tone-${tone}`).click();
+        })(),
+      checkCodeError: this.createAction(page, () =>
+        page.getByTestId('action-check-code-error').click()
+      ),
+      continueWithAi: async () => {
+        page.getByTestId('action-continue-with-ai').click();
+      },
+      continueWriting: this.createAction(page, () =>
+        page.getByTestId('action-continue-writing').click()
+      ),
+      createHeadings: this.createAction(page, () =>
+        page.getByTestId('action-create-headings').click()
+      ),
+      explainSelection: this.createAction(page, () =>
+        page.getByTestId('action-explain-selection').click()
+      ),
+      findActions: this.createAction(page, () =>
+        page.getByTestId('action-find-actions').click()
+      ),
+      fixGrammar: this.createAction(page, () =>
+        page.getByTestId('action-fix-grammar').click()
+      ),
+      fixSpelling: this.createAction(page, () =>
+        page.getByTestId('action-fix-spelling').click()
+      ),
+      generateCaption: this.createAction(page, () =>
+        page.getByTestId('action-generate-caption').click()
+      ),
+      generateHeadings: this.createAction(page, () =>
+        page.getByTestId('action-generate-headings').click()
+      ),
+      generateImage: this.createAction(page, () =>
+        page.getByTestId('action-generate-image').click()
+      ),
+      generateOutline: this.createAction(page, () =>
+        page.getByTestId('action-generate-outline').click()
+      ),
+      generatePresentation: this.createAction(page, () =>
+        page.getByTestId('action-generate-presentation').click()
+      ),
+      imageProcessing: this.createAction(page, () =>
+        page.getByTestId('action-image-processing').click()
+      ),
+      improveGrammar: this.createAction(page, () =>
+        page.getByTestId('action-improve-grammar').click()
+      ),
+      improveWriting: this.createAction(page, () =>
+        page.getByTestId('action-improve-writing').click()
+      ),
+      makeItLonger: this.createAction(page, () =>
+        page.getByTestId('action-make-it-longer').click()
+      ),
+      makeItReal: this.createAction(page, () =>
+        page.getByTestId('action-make-it-real').click()
+      ),
+      makeItShorter: this.createAction(page, () =>
+        page.getByTestId('action-make-it-shorter').click()
+      ),
+      summarize: this.createAction(page, () =>
+        page.getByTestId('action-summarize').click()
+      ),
+      translate: (language: string) =>
+        this.createAction(page, async () => {
+          await page.getByTestId('action-translate').hover();
+          await page.getByTestId(`action-translate-${language}`).click();
+        })(),
+      writeArticle: this.createAction(page, () =>
+        page.getByTestId('action-write-article').click()
+      ),
+      writeBlogPost: this.createAction(page, () =>
+        page.getByTestId('action-write-blog-post').click()
+      ),
+      writePoem: this.createAction(page, () =>
+        page.getByTestId('action-write-poem').click()
+      ),
+      writeTwitterPost: this.createAction(page, () =>
+        page.getByTestId('action-write-twitter-post').click()
+      ),
+    } as const;
+  }
+}
diff --git a/tests/affine-cloud-copilot/e2e/utils/test-utils.ts b/tests/affine-cloud-copilot/e2e/utils/test-utils.ts
new file mode 100644
index 0000000000..46a30cdfda
--- /dev/null
+++ b/tests/affine-cloud-copilot/e2e/utils/test-utils.ts
@@ -0,0 +1,64 @@
+import { createRandomAIUser } from '@affine-test/kit/utils/cloud';
+import { openHomePage, setCoreUrl } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { createLocalWorkspace } from '@affine-test/kit/utils/workspace';
+import type { Store } from '@blocksuite/affine/store';
+import type { Page } from '@playwright/test';
+
+declare global {
+  interface Window {
+    doc: Store;
+  }
+}
+
+export class TestUtils {
+  private static instance: TestUtils;
+  private isProduction: boolean;
+
+  private constructor() {
+    this.isProduction = process.env.NODE_ENV === 'production';
+    if (
+      process.env.PLAYWRIGHT_USER_AGENT &&
+      process.env.PLAYWRIGHT_EMAIL &&
+      !process.env.PLAYWRIGHT_PASSWORD
+    ) {
+      setCoreUrl(process.env.PLAYWRIGHT_CORE_URL || 'http://localhost:8080');
+      this.isProduction = true;
+    }
+  }
+
+  public static getInstance(): TestUtils {
+    if (!TestUtils.instance) {
+      TestUtils.instance = new TestUtils();
+    }
+    return TestUtils.instance;
+  }
+
+  public getUser() {
+    if (
+      !this.isProduction ||
+      !process.env.PLAYWRIGHT_EMAIL ||
+      !process.env.PLAYWRIGHT_PASSWORD
+    ) {
+      return createRandomAIUser();
+    }
+
+    return {
+      email: process.env.PLAYWRIGHT_EMAIL,
+      password: process.env.PLAYWRIGHT_PASSWORD,
+    };
+  }
+
+  public async setupTestEnvironment(page: Page) {
+    await openHomePage(page);
+    await clickNewPageButton(page);
+    await waitForEditorLoad(page);
+  }
+
+  public async createTestWorkspace(page: Page, name: string = 'test') {
+    await createLocalWorkspace({ name }, page);
+  }
+}