From 6033baeb86efe1f884d787f6cb5d6230d1045ca0 Mon Sep 17 00:00:00 2001 From: akumatus Date: Thu, 3 Apr 2025 14:53:49 +0000 Subject: [PATCH] refactor(core): add useAIChatConfig hook (#11424) Close [BS-2583](https://linear.app/affine-design/issue/BS-2583). --- .../ai-chat-chips/chat-panel-chips.ts | 7 +- .../ai/peek-view/chat-block-peek-view.ts | 34 ++++++ .../src/blocksuite/ai/peek-view/styles.ts | 4 +- .../hooks/affine/use-ai-chat-config.ts | 115 ++++++++++++++++++ .../pages/workspace/detail-page/tabs/chat.tsx | 100 +++------------ .../view/ai-chat-block-peek-view/index.tsx | 16 +-- 6 files changed, 175 insertions(+), 101 deletions(-) create mode 100644 packages/frontend/core/src/components/hooks/affine/use-ai-chat-config.ts diff --git 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 index 7e896be57..2bddd6f18 100644 --- 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', diff --git 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 index d27be9e86..e31d76b2a 100644 --- 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 {
${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``; }; diff --git a/packages/frontend/core/src/blocksuite/ai/peek-view/styles.ts b/packages/frontend/core/src/blocksuite/ai/peek-view/styles.ts index afb28b234..44bf26927 100644 --- 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; diff --git 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 new file mode 100644 index 000000000..fce345ed0 --- /dev/null +++ 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, + }; +} diff --git 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 index ff0bda0f2..dca07dd7b 100644 --- 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
; }); diff --git 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 index 6124645c6..d88c445a4 100644 --- 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]); };