diff --git a/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-cards.ts b/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-cards.ts
index f3440224ea..bb260ff1ab 100644
--- a/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-cards.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-cards.ts
@@ -2,6 +2,7 @@ import type { EditorHost } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/block-std';
 import {
   type ImageBlockModel,
+  isInsideEdgelessEditor,
   type NoteBlockModel,
   NoteDisplayMode,
 } from '@blocksuite/blocks';
@@ -97,11 +98,15 @@ const MAX_CARDS = 3;
 export class ChatCards extends WithDisposable(LitElement) {
   static override styles = css`
     :host {
-      display: flex;
+      display: none;
       flex-direction: column;
       gap: 12px;
     }
 
+    :host([data-show]) {
+      display: flex;
+    }
+
     ${cardsStyles}
   `;
 
@@ -361,10 +366,10 @@ export class ChatCards extends WithDisposable(LitElement) {
     }
   }
 
-  private async _extractOnEdgeless() {
-    if (!this.host.closest('edgeless-editor')) return;
+  private async _extractOnEdgeless(host: EditorHost) {
+    if (!isInsideEdgelessEditor(host)) return;
 
-    const canvas = await selectedToCanvas(this.host);
+    const canvas = await selectedToCanvas(host);
     if (!canvas) return;
 
     const blob: Blob | null = await new Promise(resolve =>
@@ -423,13 +428,13 @@ export class ChatCards extends WithDisposable(LitElement) {
     };
   }
 
-  private readonly _appendCardWithParams = async ({
-    // host: _,
+  private async _appendCardWithParams({
+    host,
     mode,
     autoSelect,
-  }: AIChatParams) => {
+  }: AIChatParams) {
     if (mode === 'edgeless') {
-      await this._extractOnEdgeless();
+      await this._extractOnEdgeless(host);
     } else {
       await this._extract();
     }
@@ -444,7 +449,7 @@ export class ChatCards extends WithDisposable(LitElement) {
 
       await this._selectCard(card);
     }
-  };
+  }
 
   protected override async willUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has('temporaryParams') && this.temporaryParams) {
diff --git a/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts b/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts
index 1f20ab0656..9671664e76 100644
--- a/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts
@@ -27,7 +27,6 @@ import {
 } from '@blocksuite/blocks';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { cache } from 'lit/directives/cache.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -277,16 +276,11 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
                 </div>
                 ${this._renderAIOnboarding()}
               </div>
-              ${cache(
-                this.showChatCards
-                  ? html`
-                      <chat-cards
-                        .updateContext=${this.updateContext}
-                        .host=${this.host}
-                      ></chat-cards>
-                    `
-                  : nothing
-              )}`
+              <chat-cards
+                .updateContext=${this.updateContext}
+                .host=${this.host}
+                ?data-show=${this.showChatCards}
+              ></chat-cards>`
           : repeat(filteredItems, (item, index) => {
               const isLast = index === filteredItems.length - 1;
               return html`<div class="message">