fix(core): optimize request chat cards fn (#7331)

packages/frontend/core/src/blocksuite/presets/ai/provider.ts

@@ -18,10 +18,6 @@ export interface AIChatParams {
   autoSelect?: boolean;
 }
 
-type RequestChatCardsElement = (
-  chatPanel: HTMLElement
-) => Promise<ChatCards | null>;
-
 export type ActionEventType =
   | 'started'
   | 'finished'
@@ -76,8 +72,17 @@ export class AIProvider {
     return AIProvider.instance.toggleGeneralAIOnboarding;
   }
 
-  static get requestChatCardsElement() {
+  static genRequestChatCardsFn(params: AIChatParams) {
-    return AIProvider.instance.requestChatCardsElement;
+    return async (chatPanel: HTMLElement) => {
+      const chatCards: ChatCards | null = await new Promise(resolve =>
+        requestAnimationFrame(() =>
+          resolve(chatPanel.querySelector('chat-cards'))
+        )
+      );
+      if (!chatCards) return;
+      if (chatCards.temporaryParams) return;
+      chatCards.temporaryParams = params;
+    };
   }
 
   private static readonly instance = new AIProvider();
@@ -94,14 +99,6 @@ export class AIProvider {
 
   private toggleGeneralAIOnboarding: ((value: boolean) => void) | null = null;
 
-  private readonly requestChatCardsElement: RequestChatCardsElement = (
-    chatPanel: HTMLElement
-  ) => {
-    return new Promise(resolve => {
-      resolve(chatPanel.querySelector<ChatCards>('chat-cards'));
-    });
-  };
-
   private readonly slots = {
     // use case: when user selects "continue in chat" in an ask ai result panel
     // do we need to pass the context to the chat panel?

packages/frontend/core/src/modules/multi-tab-sidebar/index.ts

@@ -1,4 +1,4 @@
 export type { SidebarTabName } from './multi-tabs/sidebar-tab';
-export { sidebarTabs } from './multi-tabs/sidebar-tabs';
+export { sidebarTabs, type TabOnLoadFn } from './multi-tabs/sidebar-tabs';
 export { MultiTabSidebarBody } from './view/body';
 export { MultiTabSidebarHeaderSwitcher } from './view/header-switcher';

packages/frontend/core/src/modules/multi-tab-sidebar/multi-tabs/sidebar-tabs.ts

@@ -4,6 +4,8 @@ import { framePanelTab } from './tabs/frame';
 import { journalTab } from './tabs/journal';
 import { outlineTab } from './tabs/outline';
 
+export type TabOnLoadFn = (component: HTMLElement) => void;
+
 // the list of all possible tabs in affine.
 // order matters (determines the order of the tabs)
 export const sidebarTabs: SidebarTab[] = [

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -47,6 +47,7 @@ import {
   MultiTabSidebarBody,
   MultiTabSidebarHeaderSwitcher,
   sidebarTabs,
+  type TabOnLoadFn,
 } from '../../../modules/multi-tab-sidebar';
 import {
   RightSidebarService,
@@ -74,9 +75,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   const docCollection = workspace.docCollection;
   const mode = useLiveData(doc.mode$);
   const { appSettings } = useAppSettingHelper();
-  const [tabOnLoad, setTabOnLoad] = useState<
+  const [tabOnLoad, setTabOnLoad] = useState<TabOnLoadFn | null>(null);
-    ((component: HTMLElement) => void) | null
-  >(null);
 
   const isActiveView = useIsActiveView();
   // TODO(@eyhn): remove jotai here
@@ -110,12 +109,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
       // * The right sidebar is not open
       // * Chat panel is not activated
       if (!opened || !actived) {
-        const callback = async (chatPanel: HTMLElement) => {
+        const callback = AIProvider.genRequestChatCardsFn(params);
-          const chatCards = await AIProvider.requestChatCardsElement(chatPanel);
-          if (!chatCards) return;
-          if (chatCards.temporaryParams) return;
-          chatCards.temporaryParams = params;
-        };
         setTabOnLoad(() => callback);
       } else {
         setTabOnLoad(null);