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 bb260ff1ab..2326d5914f 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
@@ -119,6 +119,9 @@ export class ChatCards extends WithDisposable(LitElement) {
   @property({ attribute: false })
   accessor temporaryParams: AIChatParams | null = null;
 
+  @property({ attribute: false })
+  accessor isEmpty!: boolean;
+
   @state()
   accessor cards: Card[] = [];
 
@@ -508,6 +511,8 @@ export class ChatCards extends WithDisposable(LitElement) {
   }
 
   protected override render() {
+    if (!this.isEmpty) return nothing;
+
     return repeat(
       this.cards,
       card => card.id,
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 063e93b163..5af2592f15 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
@@ -265,23 +265,18 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
       >
         ${items.length === 0
           ? html`<div class="chat-panel-messages-placeholder">
-                ${AffineIcon(
-                  isLoading
-                    ? 'var(--affine-icon-secondary)'
-                    : 'var(--affine-primary-color)'
-                )}
-                <div>
-                  ${this.isLoading
-                    ? 'AFFiNE AI is loading history...'
-                    : 'What can I help you with?'}
-                </div>
-                ${this._renderAIOnboarding()}
+              ${AffineIcon(
+                isLoading
+                  ? 'var(--affine-icon-secondary)'
+                  : 'var(--affine-primary-color)'
+              )}
+              <div>
+                ${this.isLoading
+                  ? 'AFFiNE AI is loading history...'
+                  : 'What can I help you with?'}
               </div>
-              <chat-cards
-                .updateContext=${this.updateContext}
-                .host=${this.host}
-                ?data-show=${this.showChatCards}
-              ></chat-cards>`
+              ${this._renderAIOnboarding()}
+            </div> `
           : repeat(filteredItems, (item, index) => {
               const isLast = index === filteredItems.length - 1;
               return html`<div class="message">
@@ -289,6 +284,12 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
                 <div class="item-wrapper">${this.renderItem(item, isLast)}</div>
               </div>`;
             })}
+        <chat-cards
+          .updateContext=${this.updateContext}
+          .host=${this.host}
+          .isEmpty=${items.length === 0}
+          ?data-show=${this.showChatCards}
+        ></chat-cards>
       </div>
       ${this.showDownIndicator
         ? html`<div class="down-indicator" @click=${() => this.scrollToDown()}>