fix(core): use patched preview spec builder in ai chat (#10090)

[BS-2526](https://linear.app/affine-design/issue/BS-2526/chat-panel-里的-footnote-popup-需要支持交互)

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/actions/chat-text.ts

@@ -2,12 +2,14 @@ import './action-wrapper';
 
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import type { SpecBuilder } from '@blocksuite/affine/blocks';
 import { WithDisposable } from '@blocksuite/affine/global/utils';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { createTextRenderer } from '../../../_common';
 import { renderImages } from '../components/images';
+
 export class ChatText extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor host!: EditorHost;
@@ -21,14 +23,17 @@ export class ChatText extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor state: 'finished' | 'generating' = 'finished';
 
+  @property({ attribute: false })
+  accessor previewSpecBuilder!: SpecBuilder;
+
   protected override render() {
     const { attachments, text, host } = this;
     return html`${attachments && attachments.length > 0
       ? renderImages(attachments)
-      : nothing}${createTextRenderer(host, { customHeading: true })(
-      text,
-      this.state
-    )} `;
+      : nothing}${createTextRenderer(host, {
+      customHeading: true,
+      extensions: this.previewSpecBuilder.value,
+    })(text, this.state)} `;
   }
 }
 

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts

@@ -6,6 +6,7 @@ import {
   FeatureFlagService,
   isInsidePageEditor,
   PaymentRequiredError,
+  type SpecBuilder,
   UnauthorizedError,
 } from '@blocksuite/affine/blocks';
 import { WithDisposable } from '@blocksuite/affine/global/utils';
@@ -129,6 +130,9 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor updateContext!: (context: Partial<ChatContextValue>) => void;
 
+  @property({ attribute: false })
+  accessor previewSpecBuilder!: SpecBuilder;
+
   @query('.chat-panel-messages')
   accessor messagesContainer: HTMLDivElement | null = null;
 
@@ -316,6 +320,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
           .attachments=${item.attachments}
           .text=${item.content}
           .state=${state}
+          .previewSpecBuilder=${this.previewSpecBuilder}
         ></chat-text>
         ${shouldRenderError ? AIChatErrorRenderer(host, error) : nothing}
         ${this.renderEditorActions(item, isLast)}`;

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts

@@ -3,7 +3,10 @@ import './chat-panel-messages';
 
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { ShadowlessElement } from '@blocksuite/affine/block-std';
-import { NotificationProvider } from '@blocksuite/affine/blocks';
+import {
+  NotificationProvider,
+  type SpecBuilder,
+} from '@blocksuite/affine/blocks';
 import { debounce, WithDisposable } from '@blocksuite/affine/global/utils';
 import type { Store } from '@blocksuite/affine/store';
 import { css, html, type PropertyValues } from 'lit';
@@ -172,6 +175,9 @@ export class ChatPanel extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor docDisplayConfig!: DocDisplayConfig;
 
+  @property({ attribute: false })
+  accessor previewSpecBuilder!: SpecBuilder;
+
   @state()
   accessor isLoading = false;
 
@@ -315,6 +321,7 @@ export class ChatPanel extends WithDisposable(ShadowlessElement) {
         .updateContext=${this.updateContext}
         .host=${this.host}
         .isLoading=${this.isLoading}
+        .previewSpecBuilder=${this.previewSpecBuilder}
       ></chat-panel-messages>
       <chat-panel-chips
         .host=${this.host}

packages/frontend/core/src/blocksuite/presets/ai/peek-view/chat-block-peek-view.ts

@@ -7,6 +7,7 @@ import {
   EdgelessCRUDIdentifier,
   getSurfaceBlock,
   NotificationProvider,
+  type SpecBuilder,
   TelemetryProvider,
 } from '@blocksuite/affine/blocks';
 import { html, LitElement, nothing } from 'lit';
@@ -19,6 +20,7 @@ import {
   type ChatMessage,
   ChatMessagesSchema,
 } from '../../../blocks';
+import type { TextRendererOptions } from '../../_common/components/text-renderer';
 import {
   ChatBlockPeekViewActions,
   constructUserInfoWithMessages,
@@ -384,6 +386,9 @@ export class AIChatBlockPeekView extends LitElement {
         userName: message.userName,
         avatarUrl: message.avatarUrl,
       };
+      const textRendererOptions: TextRendererOptions = {
+        extensions: this.previewSpecBuilder.value,
+      };
 
       return html`<div class=${messageClasses}>
         <ai-chat-message
@@ -393,6 +398,7 @@ export class AIChatBlockPeekView extends LitElement {
           .attachments=${attachments}
           .messageRole=${role}
           .userInfo=${userInfo}
+          .textRendererOptions=${textRendererOptions}
         ></ai-chat-message>
         ${shouldRenderError ? AIChatErrorRenderer(host, error) : nothing}
         ${shouldRenderCopyMore
@@ -473,12 +479,16 @@ export class AIChatBlockPeekView extends LitElement {
     } = this;
 
     const { messages: currentChatMessages } = chatContext;
+    const textRendererOptions: TextRendererOptions = {
+      extensions: this.previewSpecBuilder.value,
+    };
 
     return html`<div class="ai-chat-block-peek-view-container">
       <div class="ai-chat-messages-container">
         <ai-chat-messages
           .host=${host}
           .messages=${_historyMessages}
+          .textRendererOptions=${textRendererOptions}
         ></ai-chat-messages>
         <date-time .date=${latestMessageCreatedAt}></date-time>
         <div class="new-chat-messages-container">
@@ -511,6 +521,9 @@ export class AIChatBlockPeekView extends LitElement {
   @property({ attribute: false })
   accessor host!: EditorHost;
 
+  @property({ attribute: false })
+  accessor previewSpecBuilder!: SpecBuilder;
+
   @state()
   accessor _historyMessages: ChatMessage[] = [];
 
@@ -534,10 +547,12 @@ declare global {
 
 export const AIChatBlockPeekViewTemplate = (
   parentModel: AIChatBlockModel,
-  host: EditorHost
+  host: EditorHost,
+  previewSpecBuilder: SpecBuilder
 ) => {
   return html`<ai-chat-block-peek-view
     .parentModel=${parentModel}
     .host=${host}
+    .previewSpecBuilder=${previewSpecBuilder}
   ></ai-chat-block-peek-view>`;
 };