refactor(core): add useAIChatConfig hook (#11424)

Close [BS-2583](https://linear.app/affine-design/issue/BS-2583).
2026-02-13 21:05:19 +00:00 · 2025-04-03 14:53:49 +00:00
parent 363476a46c
commit 6033baeb86
6 changed files with 175 additions and 101 deletions
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/chat-panel-chips.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/chat-panel-chips.ts
@@ -100,6 +100,9 @@ export class ChatPanelChips extends SignalWatcher(
  @property({ attribute: false })
  accessor searchMenuConfig!: SearchMenuConfig;

+  @property({ attribute: false })
+  accessor portalContainer: HTMLElement | null = null;
+
  @property({ attribute: 'data-testid', reflect: true })
  accessor testId = 'chat-panel-chips';

@@ -267,7 +270,7 @@ export class ChatPanelChips extends SignalWatcher(
      portalStyles: {
        zIndex: 'var(--affine-z-index-popover)',
      },
-      container: document.body,
+      container: this.portalContainer ?? document.body,
      computePosition: {
        referenceElement: this.addButton,
        placement: 'top-start',
@@ -306,7 +309,7 @@ export class ChatPanelChips extends SignalWatcher(
      portalStyles: {
        zIndex: 'var(--affine-z-index-popover)',
      },
-      container: document.body,
+      container: this.portalContainer ?? document.body,
      computePosition: {
        referenceElement: this.moreCandidateButton,
        placement: 'top-start',
--- a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts
+++ b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts
@@ -23,6 +23,11 @@ import {
  queryHistoryMessages,
 } from '../_common/chat-actions-handle';
 import { type AIChatBlockModel } from '../blocks';
+import type {
+  ChatChip,
+  DocDisplayConfig,
+  SearchMenuConfig,
+} from '../components/ai-chat-chips';
 import type { AINetworkSearchConfig } from '../components/ai-chat-input';
 import type { ChatMessage } from '../components/ai-chat-messages';
 import { ChatMessagesSchema } from '../components/ai-chat-messages';
@@ -155,6 +160,16 @@ export class AIChatBlockPeekView extends LitElement {
  };

  private readonly _getContextId = async () => {
+    if (this._chatContextId) {
+      return this._chatContextId;
+    }
+    const sessionId = await this._getSessionId();
+    if (sessionId) {
+      this._chatContextId = await AIProvider.context?.createContext(
+        this.host.doc.workspace.id,
+        sessionId
+      );
+    }
    return this._chatContextId;
  };

@@ -273,6 +288,10 @@ export class AIChatBlockPeekView extends LitElement {
    this.chatContext = { ...this.chatContext, ...context };
  };

+  updateChips = (chips: ChatChip[]) => {
+    this.chips = chips;
+  };
+
  /**
   * Clean current chat messages and delete the newly created AI chat block
   */
@@ -524,6 +543,7 @@ export class AIChatBlockPeekView extends LitElement {
      </div>
      <chat-block-input
        .host=${host}
+        .chips=${this.chips}
        .getSessionId=${this._getSessionId}
        .getContextId=${this._getContextId}
        .getBlockId=${this._getBlockId}
@@ -533,6 +553,7 @@ export class AIChatBlockPeekView extends LitElement {
        .chatContextValue=${chatContext}
        .updateContext=${updateContext}
        .networkSearchConfig=${networkSearchConfig}
+        .docDisplayConfig=${this.docDisplayConfig}
      ></chat-block-input>
      <div class="peek-view-footer">
        ${InformationIcon()}
@@ -556,6 +577,12 @@ export class AIChatBlockPeekView extends LitElement {
  @property({ attribute: false })
  accessor networkSearchConfig!: AINetworkSearchConfig;

+  @property({ attribute: false })
+  accessor docDisplayConfig!: DocDisplayConfig;
+
+  @property({ attribute: false })
+  accessor searchMenuConfig!: SearchMenuConfig;
+
  @state()
  accessor _historyMessages: ChatMessage[] = [];

@@ -567,6 +594,9 @@ export class AIChatBlockPeekView extends LitElement {
    abortController: null,
    messages: [],
  };
+
+  @state()
+  accessor chips: ChatChip[] = [];
 }

 declare global {
@@ -579,6 +609,8 @@ export const AIChatBlockPeekViewTemplate = (
  parentModel: AIChatBlockModel,
  host: EditorHost,
  previewSpecBuilder: SpecBuilder,
+  docDisplayConfig: DocDisplayConfig,
+  searchMenuConfig: SearchMenuConfig,
  networkSearchConfig: AINetworkSearchConfig
 ) => {
  return html`<ai-chat-block-peek-view
@@ -586,5 +618,7 @@ export const AIChatBlockPeekViewTemplate = (
    .host=${host}
    .previewSpecBuilder=${previewSpecBuilder}
    .networkSearchConfig=${networkSearchConfig}
+    .docDisplayConfig=${docDisplayConfig}
+    .searchMenuConfig=${searchMenuConfig}
  ></ai-chat-block-peek-view>`;
 };
--- a/packages/frontend/core/src/blocksuite/ai/peek-view/styles.ts
+++ b/packages/frontend/core/src/blocksuite/ai/peek-view/styles.ts
@@ -8,11 +8,9 @@ export const PeekViewStyles = css`
  }

  .ai-chat-block-peek-view-container {
-    gap: 8px;
    width: 100%;
    height: 100%;
    display: flex;
-    align-items: center;
    box-sizing: border-box;
    justify-content: start;
    flex-direction: column;
@@ -61,7 +59,7 @@ export const PeekViewStyles = css`
  }

  .peek-view-footer {
-    padding: 0 12px;
+    margin-top: 8px;
    width: 100%;
    height: 20px;
    display: flex;
--- a/packages/frontend/core/src/components/hooks/affine/use-ai-chat-config.ts
+++ b/packages/frontend/core/src/components/hooks/affine/use-ai-chat-config.ts
@@ -0,0 +1,115 @@
+// packages/frontend/core/src/blocksuite/ai/hooks/useChatPanelConfig.ts
+import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search';
+import { CollectionService } from '@affine/core/modules/collection';
+import { DocsService } from '@affine/core/modules/doc';
+import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
+import { DocsSearchService } from '@affine/core/modules/docs-search';
+import {
+  type SearchCollectionMenuAction,
+  type SearchDocMenuAction,
+  SearchMenuService,
+  type SearchTagMenuAction,
+} from '@affine/core/modules/search-menu/services';
+import { TagService } from '@affine/core/modules/tag';
+import { WorkspaceService } from '@affine/core/modules/workspace';
+import { createSignalFromObservable } from '@blocksuite/affine/shared/utils';
+import { useFramework } from '@toeverything/infra';
+
+export function useAIChatConfig() {
+  const framework = useFramework();
+
+  const searchService = framework.get(AINetworkSearchService);
+  const docDisplayMetaService = framework.get(DocDisplayMetaService);
+  const workspaceService = framework.get(WorkspaceService);
+  const searchMenuService = framework.get(SearchMenuService);
+  const docsSearchService = framework.get(DocsSearchService);
+  const tagService = framework.get(TagService);
+  const collectionService = framework.get(CollectionService);
+  const docsService = framework.get(DocsService);
+
+  const networkSearchConfig = {
+    visible: searchService.visible,
+    enabled: searchService.enabled,
+    setEnabled: searchService.setEnabled,
+  };
+
+  const docDisplayConfig = {
+    getIcon: (docId: string) => {
+      return docDisplayMetaService.icon$(docId, { type: 'lit' }).value;
+    },
+    getTitle: (docId: string) => {
+      return docDisplayMetaService.title$(docId).value;
+    },
+    getTitleSignal: (docId: string) => {
+      const title$ = docDisplayMetaService.title$(docId);
+      return createSignalFromObservable(title$, '');
+    },
+    getDocMeta: (docId: string) => {
+      const docRecord = docsService.list.doc$(docId).value;
+      return docRecord?.meta$.value ?? null;
+    },
+    getDocPrimaryMode: (docId: string) => {
+      const docRecord = docsService.list.doc$(docId).value;
+      return docRecord?.primaryMode$.value ?? 'page';
+    },
+    getDoc: (docId: string) => {
+      const doc = workspaceService.workspace.docCollection.getDoc(docId);
+      return doc?.getStore() ?? null;
+    },
+    getReferenceDocs: (docIds: string[]) => {
+      const docs$ = docsSearchService.watchRefsFrom(docIds);
+      return createSignalFromObservable(docs$, []);
+    },
+    getTags: () => {
+      const tagMetas$ = tagService.tagList.tagMetas$;
+      return createSignalFromObservable(tagMetas$, []);
+    },
+    getTagTitle: (tagId: string) => {
+      const tag$ = tagService.tagList.tagByTagId$(tagId);
+      return tag$.value?.value$.value ?? '';
+    },
+    getTagPageIds: (tagId: string) => {
+      const tag$ = tagService.tagList.tagByTagId$(tagId);
+      if (!tag$) return [];
+      return tag$.value?.pageIds$.value ?? [];
+    },
+    getCollections: () => {
+      const collections$ = collectionService.collections$;
+      return createSignalFromObservable(collections$, []);
+    },
+  };
+
+  const searchMenuConfig = {
+    getDocMenuGroup: (
+      query: string,
+      action: SearchDocMenuAction,
+      abortSignal: AbortSignal
+    ) => {
+      return searchMenuService.getDocMenuGroup(query, action, abortSignal);
+    },
+    getTagMenuGroup: (
+      query: string,
+      action: SearchTagMenuAction,
+      abortSignal: AbortSignal
+    ) => {
+      return searchMenuService.getTagMenuGroup(query, action, abortSignal);
+    },
+    getCollectionMenuGroup: (
+      query: string,
+      action: SearchCollectionMenuAction,
+      abortSignal: AbortSignal
+    ) => {
+      return searchMenuService.getCollectionMenuGroup(
+        query,
+        action,
+        abortSignal
+      );
+    },
+  };
+
+  return {
+    networkSearchConfig,
+    docDisplayConfig,
+    searchMenuConfig,
+  };
+}
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx
@@ -1,15 +1,8 @@
 import { ChatPanel } from '@affine/core/blocksuite/ai';
 import type { AffineEditorContainer } from '@affine/core/blocksuite/block-suite-editor';
 import { enableFootnoteConfigExtension } from '@affine/core/blocksuite/extensions';
-import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search';
-import { CollectionService } from '@affine/core/modules/collection';
-import { DocsService } from '@affine/core/modules/doc';
-import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
-import { DocsSearchService } from '@affine/core/modules/docs-search';
-import { SearchMenuService } from '@affine/core/modules/search-menu/services';
-import { TagService } from '@affine/core/modules/tag';
+import { useAIChatConfig } from '@affine/core/components/hooks/affine/use-ai-chat-config';
 import { WorkbenchService } from '@affine/core/modules/workbench';
-import { WorkspaceService } from '@affine/core/modules/workspace';
 import { RefNodeSlotsProvider } from '@blocksuite/affine/inlines/reference';
 import { DocModeProvider } from '@blocksuite/affine/shared/services';
 import {
@@ -51,6 +44,9 @@ export const EditorChatPanel = forwardRef(function EditorChatPanel(
    }
  }, [onLoad, ref]);

+  const { docDisplayConfig, searchMenuConfig, networkSearchConfig } =
+    useAIChatConfig();
+
  useEffect(() => {
    if (!editor || !editor.host) return;

@@ -59,16 +55,7 @@ export const EditorChatPanel = forwardRef(function EditorChatPanel(
      chatPanelRef.current.host = editor.host;
      chatPanelRef.current.doc = editor.doc;

-      const searchService = framework.get(AINetworkSearchService);
-      const docDisplayMetaService = framework.get(DocDisplayMetaService);
-      const workspaceService = framework.get(WorkspaceService);
-      const searchMenuService = framework.get(SearchMenuService);
      const workbench = framework.get(WorkbenchService).workbench;
-      const docsSearchService = framework.get(DocsSearchService);
-      const tagService = framework.get(TagService);
-      const collectionService = framework.get(CollectionService);
-      const docsService = framework.get(DocsService);
-
      chatPanelRef.current.appSidebarConfig = {
        getWidth: () => {
          const width$ = workbench.sidebarWidth$;
@@ -80,74 +67,9 @@ export const EditorChatPanel = forwardRef(function EditorChatPanel(
        },
      };

-      chatPanelRef.current.networkSearchConfig = {
-        visible: searchService.visible,
-        enabled: searchService.enabled,
-        setEnabled: searchService.setEnabled,
-      };
-
-      chatPanelRef.current.docDisplayConfig = {
-        getIcon: (docId: string) => {
-          return docDisplayMetaService.icon$(docId, { type: 'lit' }).value;
-        },
-        getTitle: (docId: string) => {
-          return docDisplayMetaService.title$(docId).value;
-        },
-        getTitleSignal: (docId: string) => {
-          const title$ = docDisplayMetaService.title$(docId);
-          return createSignalFromObservable(title$, '');
-        },
-        getDocMeta: (docId: string) => {
-          const docRecord = docsService.list.doc$(docId).value;
-          return docRecord?.meta$.value ?? null;
-        },
-        getDocPrimaryMode: (docId: string) => {
-          const docRecord = docsService.list.doc$(docId).value;
-          return docRecord?.primaryMode$.value ?? 'page';
-        },
-        getDoc: (docId: string) => {
-          const doc = workspaceService.workspace.docCollection.getDoc(docId);
-          return doc?.getStore() ?? null;
-        },
-        getReferenceDocs: (docIds: string[]) => {
-          const docs$ = docsSearchService.watchRefsFrom(docIds);
-          return createSignalFromObservable(docs$, []);
-        },
-        getTags: () => {
-          const tagMetas$ = tagService.tagList.tagMetas$;
-          return createSignalFromObservable(tagMetas$, []);
-        },
-        getTagTitle: (tagId: string) => {
-          const tag$ = tagService.tagList.tagByTagId$(tagId);
-          return tag$.value?.value$.value ?? '';
-        },
-        getTagPageIds: (tagId: string) => {
-          const tag$ = tagService.tagList.tagByTagId$(tagId);
-          if (!tag$) return [];
-          return tag$.value?.pageIds$.value ?? [];
-        },
-        getCollections: () => {
-          const collections$ = collectionService.collections$;
-          return createSignalFromObservable(collections$, []);
-        },
-      };
-
-      chatPanelRef.current.searchMenuConfig = {
-        getDocMenuGroup: (query, action, abortSignal) => {
-          return searchMenuService.getDocMenuGroup(query, action, abortSignal);
-        },
-        getTagMenuGroup: (query, action, abortSignal) => {
-          return searchMenuService.getTagMenuGroup(query, action, abortSignal);
-        },
-        getCollectionMenuGroup: (query, action, abortSignal) => {
-          return searchMenuService.getCollectionMenuGroup(
-            query,
-            action,
-            abortSignal
-          );
-        },
-      };
-
+      chatPanelRef.current.docDisplayConfig = docDisplayConfig;
+      chatPanelRef.current.searchMenuConfig = searchMenuConfig;
+      chatPanelRef.current.networkSearchConfig = networkSearchConfig;
      chatPanelRef.current.previewSpecBuilder = enableFootnoteConfigExtension(
        SpecProvider._.getSpec('preview:page')
      );
@@ -173,7 +95,13 @@ export const EditorChatPanel = forwardRef(function EditorChatPanel(
    ];

    return () => disposable.forEach(d => d?.unsubscribe());
-  }, [editor, framework]);
+  }, [
+    docDisplayConfig,
+    editor,
+    framework,
+    networkSearchConfig,
+    searchMenuConfig,
+  ]);

  return <div className={styles.root} ref={containerRef} />;
 });
--- a/packages/frontend/core/src/modules/peek-view/view/ai-chat-block-peek-view/index.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/ai-chat-block-peek-view/index.tsx
@@ -2,10 +2,9 @@ import { toReactNode } from '@affine/component';
 import { AIChatBlockPeekViewTemplate } from '@affine/core/blocksuite/ai';
 import type { AIChatBlockModel } from '@affine/core/blocksuite/ai/blocks/ai-chat-block/model/ai-chat-model';
 import { enableFootnoteConfigExtension } from '@affine/core/blocksuite/extensions';
-import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search';
+import { useAIChatConfig } from '@affine/core/components/hooks/affine/use-ai-chat-config';
 import { SpecProvider } from '@blocksuite/affine/shared/utils';
 import type { EditorHost } from '@blocksuite/affine/std';
-import { useFramework } from '@toeverything/infra';
 import { useMemo } from 'react';

 export type AIChatBlockPeekViewProps = {
@@ -17,23 +16,20 @@ export const AIChatBlockPeekView = ({
  model,
  host,
 }: AIChatBlockPeekViewProps) => {
-  const framework = useFramework();
-  const searchService = framework.get(AINetworkSearchService);
+  const { docDisplayConfig, searchMenuConfig, networkSearchConfig } =
+    useAIChatConfig();
  return useMemo(() => {
    const previewSpecBuilder = enableFootnoteConfigExtension(
      SpecProvider._.getSpec('preview:page')
    );
-    const networkSearchConfig = {
-      visible: searchService.visible,
-      enabled: searchService.enabled,
-      setEnabled: searchService.setEnabled,
-    };
    const template = AIChatBlockPeekViewTemplate(
      model,
      host,
      previewSpecBuilder,
+      docDisplayConfig,
+      searchMenuConfig,
      networkSearchConfig
    );
    return toReactNode(template);
-  }, [model, host, searchService]);
+  }, [model, host, docDisplayConfig, searchMenuConfig, networkSearchConfig]);
 };