fix(editor): chat panel render warning (#9446)

Fixed the updated warning of both `chat-panel` and `chat-panel-messages` ![image](https://github.com/user-attachments/assets/73f30e45-119a-4899-bf05-84f8f64b944b)
toeverything · Dec 31, 2024 · adf14d1 · adf14d1
1 parent 7c41775
commit adf14d1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
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
@@ -8,7 +8,7 @@ import {
   UnauthorizedError,
 } from '@blocksuite/affine/blocks';
 import { WithDisposable } from '@blocksuite/affine/global/utils';
-import { css, html, nothing, type PropertyValues } from 'lit';
+import { css, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -139,25 +139,6 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
   @state()
   accessor showChatCards = true;
 
-  protected override updated(changedProperties: PropertyValues) {
-    if (changedProperties.has('host')) {
-      const { disposables } = this;
-
-      disposables.add(
-        this.host.selection.slots.changed.on(() => {
-          this._selectionValue = this.host.selection.value;
-        })
-      );
-      const docModeService = this.host.std.get(DocModeProvider);
-      disposables.add(
-        docModeService.onPrimaryModeChange(
-          () => this.requestUpdate(),
-          this.host.doc.id
-        )
-      );
-    }
-  }
-
   private _renderAIOnboarding() {
     return this.isLoading ||
       !this.host?.doc.awarenessStore.getFlag('enable_ai_onboarding')
@@ -284,13 +265,16 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
 
   override connectedCallback() {
     super.connectedCallback();
+    const { disposables } = this;
+    const docModeService = this.host.std.get(DocModeProvider);
 
     Promise.resolve(AIProvider.userInfo)
       .then(res => {
         this.avatarUrl = res?.avatarUrl ?? '';
       })
       .catch(console.error);
-    this.disposables.add(
+
+    disposables.add(
       AIProvider.slots.userInfo.on(userInfo => {
         const { status, error } = this.chatContextValue;
         this.avatarUrl = userInfo?.avatarUrl ?? '';
@@ -303,12 +287,22 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
         }
       })
     );
-
-    this.disposables.add(
+    disposables.add(
       AIProvider.slots.toggleChatCards.on(({ visible }) => {
         this.showChatCards = visible;
       })
     );
+    disposables.add(
+      this.host.selection.slots.changed.on(() => {
+        this._selectionValue = this.host.selection.value;
+      })
+    );
+    disposables.add(
+      docModeService.onPrimaryModeChange(
+        () => this.requestUpdate(),
+        this.host.doc.id
+      )
+    );
   }
 
   renderItem(item: ChatItem, isLast: boolean) {

diff --git a/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts b/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts
@@ -191,8 +191,10 @@ export class ChatPanel extends WithDisposable(ShadowlessElement) {
 
   protected override updated(_changedProperties: PropertyValues) {
     if (_changedProperties.has('doc')) {
-      this.chatContextValue.chatSessionId = null;
-      this._resetItems();
+      requestAnimationFrame(() => {
+        this.chatContextValue.chatSessionId = null;
+        this._resetItems();
+      });
     }
 
     if (