From fe8cb6bb44cc19a915375d1a98afe69ed032191d Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Fri, 4 Jul 2025 12:15:50 +0800
Subject: [PATCH] fix(core): some artifact styles (#13020)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix AI-299, AI-296

#### PR Dependency Tree


* **PR #13020** 👈

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

* **Style**
* Improved layout alignment in the artifact preview panel for better
visual consistency.
* Enforced a minimum width for linked document banners to ensure
consistent appearance.

* **Bug Fixes**
* Updated artifact and document compose tools so that clicking an
artifact result always opens the preview panel, instead of toggling or
closing it unexpectedly.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../embed-doc/src/embed-linked-doc-block/styles.ts    |  1 +
 .../ai/components/ai-tools/artifacts-preview-panel.ts |  1 +
 .../ai/components/ai-tools/code-artifact.ts           | 11 +----------
 .../blocksuite/ai/components/ai-tools/doc-compose.ts  | 11 +----------
 4 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
index 41d00dbdf3..31c1e4746d 100644
--- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
@@ -168,6 +168,7 @@ export const styles = css`
   .affine-embed-linked-doc-banner {
     margin: 12px 12px 0px 0px;
     width: 204px;
+    min-width: 204px;
     max-width: 100%;
     height: 102px;
     pointer-events: none;
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifacts-preview-panel.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifacts-preview-panel.ts
index bed4fed782..694707d386 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifacts-preview-panel.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifacts-preview-panel.ts
@@ -86,6 +86,7 @@ export class ArtifactPreviewPanel extends WithDisposable(ShadowlessElement) {
     .artifact-panel-actions {
       display: flex;
       align-items: center;
+      justify-content: flex-end;
       gap: 4px;
       flex: 1;
     }
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
index d8a18a0f17..c35e7b97e2 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts
@@ -12,11 +12,7 @@ import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { bundledLanguagesInfo, type ThemedToken } from 'shiki';
 
-import {
-  closePreviewPanel,
-  isPreviewPanelOpen,
-  renderPreviewPanel,
-} from './artifacts-preview-panel';
+import { renderPreviewPanel } from './artifacts-preview-panel';
 import type { ToolError } from './type';
 
 interface CodeArtifactToolCall {
@@ -331,11 +327,6 @@ export class CodeArtifactTool extends WithDisposable(ShadowlessElement) {
       };
 
       const onClick = () => {
-        if (isPreviewPanelOpen(this)) {
-          closePreviewPanel(this);
-          return;
-        }
-
         const copyHTML = async () => {
           if (this.std) {
             await navigator.clipboard
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-compose.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-compose.ts
index 99067d75b4..52d112e6da 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-compose.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-compose.ts
@@ -19,11 +19,7 @@ import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { getCustomPageEditorBlockSpecs } from '../text-renderer';
-import {
-  closePreviewPanel,
-  isPreviewPanelOpen,
-  renderPreviewPanel,
-} from './artifacts-preview-panel';
+import { renderPreviewPanel } from './artifacts-preview-panel';
 import type { ToolError } from './type';
 
 interface DocComposeToolCall {
@@ -132,11 +128,6 @@ export class DocComposeTool extends WithDisposable(ShadowlessElement) {
       );
 
       const onClick = () => {
-        if (isPreviewPanelOpen(this)) {
-          closePreviewPanel(this);
-          return;
-        }
-
         const copyMarkdown = async () => {
           await navigator.clipboard
             .writeText(result.markdown)