From a5662e3de2b14cc1d3436f48e3d0ec08e32a3447 Mon Sep 17 00:00:00 2001
From: Fangdun Tsai <fundon@pindash.io>
Date: Wed, 26 Jun 2024 23:50:45 +0800
Subject: [PATCH] fix(core): optimize request chat cards fn (#7331)

---
 .../src/blocksuite/presets/ai/provider.ts     | 25 ++++++++-----------
 .../src/modules/multi-tab-sidebar/index.ts    |  2 +-
 .../multi-tabs/sidebar-tabs.ts                |  2 ++
 .../workspace/detail-page/detail-page.tsx     | 12 +++------
 4 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/presets/ai/provider.ts b/packages/frontend/core/src/blocksuite/presets/ai/provider.ts
index 7556523bba..b2e1ea5d89 100644
--- a/packages/frontend/core/src/blocksuite/presets/ai/provider.ts
+++ b/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() {
-    return AIProvider.instance.requestChatCardsElement;
+  static genRequestChatCardsFn(params: AIChatParams) {
+    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?
diff --git a/packages/frontend/core/src/modules/multi-tab-sidebar/index.ts b/packages/frontend/core/src/modules/multi-tab-sidebar/index.ts
index 8d9530cd5c..f5f66a1421 100644
--- a/packages/frontend/core/src/modules/multi-tab-sidebar/index.ts
+++ b/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';
diff --git a/packages/frontend/core/src/modules/multi-tab-sidebar/multi-tabs/sidebar-tabs.ts b/packages/frontend/core/src/modules/multi-tab-sidebar/multi-tabs/sidebar-tabs.ts
index 0aa0931786..1bf84cdc7a 100644
--- a/packages/frontend/core/src/modules/multi-tab-sidebar/multi-tabs/sidebar-tabs.ts
+++ b/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[] = [
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
index d24ed8b413..50cc2cd522 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/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<
-    ((component: HTMLElement) => void) | null
-  >(null);
+  const [tabOnLoad, setTabOnLoad] = useState<TabOnLoadFn | 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 chatCards = await AIProvider.requestChatCardsElement(chatPanel);
-          if (!chatCards) return;
-          if (chatCards.temporaryParams) return;
-          chatCards.temporaryParams = params;
-        };
+        const callback = AIProvider.genRequestChatCardsFn(params);
         setTabOnLoad(() => callback);
       } else {
         setTabOnLoad(null);