From 11a9e67bc1c64683e39aadd675d9f898c22989ec Mon Sep 17 00:00:00 2001
From: Wu Yue <akumatus@gmail.com>
Date: Thu, 10 Jul 2025 11:31:52 +0800
Subject: [PATCH] feat(core): remove scrollable-text-renderer's dependency on
 editor host (#13123)

[AI-260](https://linear.app/affine-design/issue/AI-260)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Improved integration of theme support in AI-generated answer
rendering, allowing the renderer to adapt to theme changes dynamically.
* Simplified component interfaces by removing unnecessary dependencies.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../core/src/blocksuite/ai/actions/answer-renderer.ts    | 9 ++++++++-
 packages/frontend/core/src/blocksuite/ai/ai-panel.ts     | 9 ++++++++-
 .../ai/components/ai-scrollable-text-renderer.ts         | 8 +-------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/ai/actions/answer-renderer.ts b/packages/frontend/core/src/blocksuite/ai/actions/answer-renderer.ts
index 7ee5375e96..e969bd625e 100644
--- a/packages/frontend/core/src/blocksuite/ai/actions/answer-renderer.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/answer-renderer.ts
@@ -1,5 +1,6 @@
 import type { MindmapElementModel } from '@blocksuite/affine/model';
 import type { EditorHost } from '@blocksuite/affine/std';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
 
 import { createAIScrollableTextRenderer } from '../components/ai-scrollable-text-renderer';
 import {
@@ -52,5 +53,11 @@ export function actionToAnswerRenderer<
     return createImageRenderer(host, { height: 300 });
   }
 
-  return createAIScrollableTextRenderer(host, {}, 320, true);
+  return createAIScrollableTextRenderer(
+    {
+      theme: host.std.get(ThemeProvider).app$,
+    },
+    320,
+    true
+  );
 }
diff --git a/packages/frontend/core/src/blocksuite/ai/ai-panel.ts b/packages/frontend/core/src/blocksuite/ai/ai-panel.ts
index dd4e3227b1..89b8df5767 100644
--- a/packages/frontend/core/src/blocksuite/ai/ai-panel.ts
+++ b/packages/frontend/core/src/blocksuite/ai/ai-panel.ts
@@ -11,6 +11,7 @@ import {
 } from '@blocksuite/affine/shared/utils';
 import type { EditorHost } from '@blocksuite/affine/std';
 import { GfxControllerIdentifier } from '@blocksuite/affine/std/gfx';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import {
   ChatWithAiIcon,
   DeleteIcon,
@@ -306,7 +307,13 @@ export function buildAIPanelConfig(
   const ctx = new AIContext();
   const searchService = framework.get(AINetworkSearchService);
   return {
-    answerRenderer: createAIScrollableTextRenderer(panel.host, {}, 320, true),
+    answerRenderer: createAIScrollableTextRenderer(
+      {
+        theme: panel.host.std.get(ThemeProvider).app$,
+      },
+      320,
+      true
+    ),
     finishStateConfig: buildFinishConfig(panel, 'chat', ctx),
     generatingStateConfig: buildGeneratingConfig(),
     errorStateConfig: buildErrorConfig(panel),
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-scrollable-text-renderer.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-scrollable-text-renderer.ts
index 77434ec701..b8742a04de 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-scrollable-text-renderer.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-scrollable-text-renderer.ts
@@ -1,6 +1,6 @@
 import { WithDisposable } from '@blocksuite/affine/global/lit';
 import { scrollbarStyle } from '@blocksuite/affine/shared/styles';
-import { type EditorHost, ShadowlessElement } from '@blocksuite/affine/std';
+import { ShadowlessElement } from '@blocksuite/affine/std';
 import type { PropertyValues } from 'lit';
 import { css, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -81,9 +81,6 @@ export class AIScrollableTextRenderer extends WithDisposable(
   @property({ attribute: false })
   accessor answer!: string;
 
-  @property({ attribute: false })
-  accessor host!: EditorHost;
-
   @property({ attribute: false })
   accessor state: AffineAIPanelState | undefined;
 
@@ -101,19 +98,16 @@ export class AIScrollableTextRenderer extends WithDisposable(
 }
 
 export const createAIScrollableTextRenderer: (
-  host: EditorHost,
   textRendererOptions: TextRendererOptions,
   maxHeight: number,
   autoScroll: boolean
 ) => AffineAIPanelWidgetConfig['answerRenderer'] = (
-  host,
   textRendererOptions,
   maxHeight,
   autoScroll
 ) => {
   return (answer: string, state: AffineAIPanelState | undefined) => {
     return html`<ai-scrollable-text-renderer
-      .host=${host}
       .answer=${answer}
       .state=${state}
       .textRendererOptions=${textRendererOptions}