fix(core): artifact rendering issue in standalone ai chat panel (#13164)

#### PR Dependency Tree


* **PR #13164** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

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

## Summary by CodeRabbit

* **New Features**
* Improved integration of workspace context into AI chat, enabling more
responsive interactions when clicking document links within chat
messages.
* Enhanced document opening experience from chat by reacting to link
clicks and providing direct access to related documents.

* **Refactor**
* Streamlined notification handling and workspace context management
within chat-related components for better maintainability and
performance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/ai/chat-panel/message/assistant.ts

@@ -3,8 +3,11 @@ import type { AppThemeService } from '@affine/core/modules/theme';
 import type { CopilotChatHistoryFragment } from '@affine/graphql';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
 import { isInsidePageEditor } from '@blocksuite/affine/shared/utils';
-import type { EditorHost } from '@blocksuite/affine/std';
-import { ShadowlessElement } from '@blocksuite/affine/std';
+import {
+  type BlockStdScope,
+  type EditorHost,
+  ShadowlessElement,
+} from '@blocksuite/affine/std';
 import type { ExtensionType } from '@blocksuite/affine/store';
 import type { NotificationService } from '@blocksuite/affine-shared/services';
 import type { Signal } from '@preact/signals-core';
@@ -37,6 +40,9 @@ export class ChatMessageAssistant extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor host: EditorHost | null | undefined;
 
+  @property({ attribute: false })
+  accessor std: BlockStdScope | null | undefined;
+
   @property({ attribute: false })
   accessor item!: ChatMessage;
 
@@ -124,6 +130,7 @@ export class ChatMessageAssistant extends WithDisposable(ShadowlessElement) {
   private renderStreamObjects(answer: StreamObject[]) {
     return html`<chat-content-stream-objects
       .host=${this.host}
+      .std=${this.std}
       .answer=${answer}
       .state=${this.state}
       .width=${this.width}

packages/frontend/core/src/blocksuite/ai/components/ai-chat-content/ai-chat-content.ts

@@ -6,8 +6,11 @@ import type {
   CopilotChatHistoryFragment,
 } from '@affine/graphql';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
-import type { EditorHost } from '@blocksuite/affine/std';
-import { ShadowlessElement } from '@blocksuite/affine/std';
+import {
+  type BlockStdScope,
+  type EditorHost,
+  ShadowlessElement,
+} from '@blocksuite/affine/std';
 import type { ExtensionType } from '@blocksuite/affine/store';
 import type { NotificationService } from '@blocksuite/affine-shared/services';
 import { type Signal } from '@preact/signals-core';
@@ -127,6 +130,9 @@ export class AIChatContent extends SignalWatcher(
   @property({ attribute: false })
   accessor host: EditorHost | null | undefined;
 
+  @property({ attribute: false })
+  accessor std: BlockStdScope | null | undefined;
+
   @property({ attribute: false })
   accessor session!: CopilotChatHistoryFragment | null | undefined;
 
@@ -400,6 +406,7 @@ export class AIChatContent extends SignalWatcher(
         })}
         ${ref(this.chatMessagesRef)}
         .host=${this.host}
+        .std=${this.std}
         .workspaceId=${this.workspaceId}
         .docId=${this.docId}
         .session=${this.session}

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

@@ -6,8 +6,11 @@ import {
   type FeatureFlagService,
   type NotificationService,
 } from '@blocksuite/affine/shared/services';
-import type { EditorHost } from '@blocksuite/affine/std';
-import { ShadowlessElement } from '@blocksuite/affine/std';
+import {
+  type BlockStdScope,
+  type EditorHost,
+  ShadowlessElement,
+} from '@blocksuite/affine/std';
 import type { BaseSelection, ExtensionType } from '@blocksuite/affine/store';
 import { ArrowDownBigIcon as ArrowDownIcon } from '@blocksuite/icons/lit';
 import type { Signal } from '@preact/signals-core';
@@ -160,6 +163,9 @@ export class AIChatMessages extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor host: EditorHost | null | undefined;
 
+  @property({ attribute: false })
+  accessor std: BlockStdScope | null | undefined;
+
   @property({ attribute: false })
   accessor workspaceId!: string;
 
@@ -318,6 +324,7 @@ export class AIChatMessages extends WithDisposable(ShadowlessElement) {
                 } else if (isChatMessage(item) && item.role === 'assistant') {
                   return html`<chat-message-assistant
                     .host=${this.host}
+                    .std=${this.std}
                     .session=${this.session}
                     .item=${item}
                     .isLast=${isLast}

packages/frontend/core/src/blocksuite/ai/components/ai-message-content/stream-objects.ts

@@ -1,7 +1,11 @@
 import type { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
 import type { ColorScheme } from '@blocksuite/affine/model';
-import { type EditorHost, ShadowlessElement } from '@blocksuite/affine/std';
+import {
+  type BlockStdScope,
+  type EditorHost,
+  ShadowlessElement,
+} from '@blocksuite/affine/std';
 import type { ExtensionType } from '@blocksuite/affine/store';
 import type { NotificationService } from '@blocksuite/affine-shared/services';
 import type { Signal } from '@preact/signals-core';
@@ -29,6 +33,9 @@ export class ChatContentStreamObjects extends WithDisposable(
   @property({ attribute: false })
   accessor host: EditorHost | null | undefined;
 
+  @property({ attribute: false })
+  accessor std: BlockStdScope | null | undefined;
+
   @property({ attribute: false })
   accessor state: AffineAIPanelState = 'finished';
 
@@ -70,7 +77,7 @@ export class ChatContentStreamObjects extends WithDisposable(
       case 'doc_compose':
         return html`
           <doc-compose-tool
-            .std=${this.host?.std}
+            .std=${this.std || this.host?.std}
             .data=${streamObject}
             .width=${this.width}
             .theme=${this.theme}
@@ -80,7 +87,7 @@ export class ChatContentStreamObjects extends WithDisposable(
       case 'code_artifact':
         return html`
           <code-artifact-tool
-            .std=${this.host?.std}
+            .std=${this.std || this.host?.std}
             .data=${streamObject}
             .width=${this.width}
           ></code-artifact-tool>
@@ -125,7 +132,7 @@ export class ChatContentStreamObjects extends WithDisposable(
       case 'doc_compose':
         return html`
           <doc-compose-tool
-            .std=${this.host?.std}
+            .std=${this.std || this.host?.std}
             .data=${streamObject}
             .width=${this.width}
             .theme=${this.theme}
@@ -135,7 +142,7 @@ export class ChatContentStreamObjects extends WithDisposable(
       case 'code_artifact':
         return html`
           <code-artifact-tool
-            .std=${this.host?.std}
+            .std=${this.std || this.host?.std}
             .data=${streamObject}
             .width=${this.width}
             .theme=${this.theme}

packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-compose.ts

@@ -4,7 +4,6 @@ import { getEmbedLinkedDocIcons } from '@blocksuite/affine/blocks/embed-doc';
 import { LoadingIcon } from '@blocksuite/affine/components/icons';
 import { RefNodeSlotsProvider } from '@blocksuite/affine/inlines/reference';
 import type { ColorScheme } from '@blocksuite/affine/model';
-import { NotificationProvider } from '@blocksuite/affine/shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { MarkdownTransformer } from '@blocksuite/affine/widgets/linked-doc';
 import { CopyIcon, PageIcon, ToolIcon } from '@blocksuite/icons/lit';
@@ -110,8 +109,6 @@ export class DocComposeTool extends ArtifactTool<
   }
 
   protected override getPreviewContent() {
-    if (!this.std) return html``;
-    const std = this.std;
     const resultData = this.data;
     const title = this.data.args.title;
     const result = resultData.type === 'tool-result' ? resultData.result : null;
@@ -122,8 +119,7 @@ export class DocComposeTool extends ArtifactTool<
       ${successResult
         ? html`<text-renderer
             .answer=${successResult.markdown}
-            .host=${std.host}
-            .schema=${std.store.schema}
+            .schema=${this.std?.store.schema}
             .options=${{
               customHeading: true,
               extensions: getCustomPageEditorBlockSpecs(),
@@ -161,7 +157,6 @@ export class DocComposeTool extends ArtifactTool<
           return;
         }
         const workspace = std.store.workspace;
-        const notificationService = std.get(NotificationProvider);
         const refNodeSlots = std.getOptional(RefNodeSlotsProvider);
         const docId = await MarkdownTransformer.importMarkdownToDoc({
           collection: workspace,
@@ -171,7 +166,7 @@ export class DocComposeTool extends ArtifactTool<
           extensions: getStoreManager().config.init().value.get('store'),
         });
         if (docId) {
-          const open = await notificationService.confirm({
+          const open = await this.notificationService.confirm({
             title: 'Open the doc you just created',
             message: 'Doc saved successfully! Would you like to open it now?',
             cancelText: 'Cancel',

packages/frontend/core/src/desktop/pages/workspace/chat/index.tsx

@@ -7,6 +7,7 @@ import {
 import type { ChatStatus } from '@affine/core/blocksuite/ai/components/ai-chat-messages';
 import { AIChatToolbar } from '@affine/core/blocksuite/ai/components/ai-chat-toolbar';
 import type { PromptKey } from '@affine/core/blocksuite/ai/provider/prompt';
+import { getViewManager } from '@affine/core/blocksuite/manager/view';
 import { NotificationServiceImpl } from '@affine/core/blocksuite/view-extensions/editor-view/notification-service';
 import { useAIChatConfig } from '@affine/core/components/hooks/affine/use-ai-chat-config';
 import { useAISpecs } from '@affine/core/components/hooks/affine/use-ai-specs';
@@ -27,8 +28,12 @@ import {
   WorkbenchService,
 } from '@affine/core/modules/workbench';
 import { WorkspaceService } from '@affine/core/modules/workspace';
+import { RefNodeSlotsProvider } from '@blocksuite/affine/inlines/reference';
+import { BlockStdScope } from '@blocksuite/affine/std';
+import type { Workspace } from '@blocksuite/affine/store';
 import { type Signal, signal } from '@preact/signals-core';
 import { useFramework, useService } from '@toeverything/infra';
+import { nanoid } from 'nanoid';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import * as styles from './index.css';
@@ -51,6 +56,26 @@ function useCopilotClient() {
   );
 }
 
+function createMockStd(workspace: Workspace) {
+  workspace.meta.initialize();
+  const store = workspace.createDoc().getStore();
+  const std = new BlockStdScope({
+    store,
+    extensions: [...getViewManager().config.init().value.get('page')],
+  });
+  std.render();
+  return std;
+}
+
+function useMockStd() {
+  const workspace = useService(WorkspaceService).workspace;
+  const std = useMemo(() => {
+    if (!workspace) return null;
+    return createMockStd(workspace.docCollection);
+  }, [workspace]);
+  return std;
+}
+
 export const Component = () => {
   const framework = useFramework();
   const [isBodyProvided, setIsBodyProvided] = useState(false);
@@ -145,6 +170,7 @@ export const Component = () => {
 
   const confirmModal = useConfirmModal();
   const specs = useAISpecs();
+  const mockStd = useMockStd();
 
   // init or update ai-chat-content
   useEffect(() => {
@@ -161,6 +187,7 @@ export const Component = () => {
     content.session = currentSession;
     content.workspaceId = workspaceId;
     content.extensions = specs;
+    content.std = mockStd;
     content.docDisplayConfig = docDisplayConfig;
     content.searchMenuConfig = searchMenuConfig;
     content.networkSearchConfig = networkSearchConfig;
@@ -192,6 +219,7 @@ export const Component = () => {
     docDisplayConfig,
     framework,
     isBodyProvided,
+    mockStd,
     networkSearchConfig,
     reasoningConfig,
     searchMenuConfig,
@@ -260,37 +288,21 @@ export const Component = () => {
     status,
   ]);
 
-  // restore pinned session
   useEffect(() => {
-    if (!chatContent) return;
-
-    const controller = new AbortController();
-    const signal = controller.signal;
-    client
-      .getSessions(
-        workspaceId,
-        {},
-        undefined,
-        { pinned: true, limit: 1 },
-        signal
-      )
-      .then(sessions => {
-        if (!Array.isArray(sessions)) return;
-        const session = sessions[0];
-        if (!session) return;
-        setCurrentSession(session);
-        if (chatContent) {
-          chatContent.session = session;
-          chatContent.reloadSession();
-        }
-      })
-      .catch(console.error);
-
-    // abort the request
-    return () => {
-      controller.abort();
-    };
-  }, [chatContent, client, workspaceId]);
+    const refNodeSlots = mockStd?.getOptional(RefNodeSlotsProvider);
+    if (!refNodeSlots) return;
+    const sub = refNodeSlots.docLinkClicked.subscribe(event => {
+      const { workbench } = framework.get(WorkbenchService);
+      workbench.openDoc({
+        docId: event.pageId,
+        mode: event.params?.mode,
+        blockIds: event.params?.blockIds,
+        elementIds: event.params?.elementIds,
+        refreshKey: nanoid(),
+      });
+    });
+    return () => sub.unsubscribe();
+  }, [framework, mockStd]);
 
   const onChatContainerRef = useCallback((node: HTMLDivElement) => {
     if (node) {