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

Close [BS-2583](https://linear.app/affine-design/issue/BS-2583).

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',

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>`;
 };

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;