From d65a7494a459c244c9113d43cfa2f2c88f1ab547 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Fri, 11 Jul 2025 16:48:56 +0800
Subject: [PATCH] fix(core): some artifact tools styling (#13152)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix BS-3615, BS-3616, BS-3614

#### PR Dependency Tree


* **PR #13152** 👈

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 consistency of horizontal padding and spacing in AI chat
components.
* Updated chat message containers to enable vertical scrolling and
adjust height behavior.
* Refined artifact tool card appearance with enhanced hover effects,
cursor placement, and updated card structure for a more polished look.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


#### PR Dependency Tree


* **PR #13152** 👈

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

Co-authored-by: fengmk2 <fengmk2@gmail.com>
---
 .../ai-chat-content/ai-chat-content.ts        | 16 ++++++--
 .../ai-chat-messages/ai-chat-messages.ts      |  3 +-
 .../ai/components/ai-tools/artifact-tool.ts   | 39 +++++++++++--------
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-content/ai-chat-content.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-content/ai-chat-content.ts
index 6076bc8b3c..1bddb83376 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-content/ai-chat-content.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-content/ai-chat-content.ts
@@ -66,7 +66,7 @@ export class AIChatContent extends SignalWatcher(
       .ai-chat-title {
         background: var(--affine-background-primary-color);
         position: relative;
-        padding: 8px 0px;
+        padding: 8px var(--h-padding);
         width: 100%;
         height: 36px;
         display: flex;
@@ -83,7 +83,8 @@ export class AIChatContent extends SignalWatcher(
 
       ai-chat-messages {
         flex: 1;
-        overflow-y: hidden;
+        overflow-y: auto;
+        padding: 0 var(--h-padding);
         transition:
           flex-grow 0.32s cubic-bezier(0.07, 0.83, 0.46, 1),
           padding-top 0.32s ease,
@@ -102,18 +103,25 @@ export class AIChatContent extends SignalWatcher(
       container-name: chat-panel-split-view;
     }
     .chat-panel-main {
+      --h-padding: 8px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       height: 100%;
       width: 100%;
-      padding: 8px 24px 0 24px;
+      padding: 8px calc(24px - var(--h-padding)) 0 calc(24px - var(--h-padding));
       max-width: 800px;
       margin: 0 auto;
     }
+
+    ai-chat-composer {
+      padding: 0 var(--h-padding);
+    }
+
     @container chat-panel-split-view (width < 540px) {
       .chat-panel-main {
-        padding: 8px 12px 0 12px;
+        padding: 8px calc(12px - var(--h-padding)) 0
+          calc(12px - var(--h-padding));
       }
     }
   `;
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-messages/ai-chat-messages.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-messages/ai-chat-messages.ts
index ec211f69ef..48d3ebb4c8 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-messages/ai-chat-messages.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-messages/ai-chat-messages.ts
@@ -46,9 +46,8 @@ export class AIChatMessages extends WithDisposable(ShadowlessElement) {
       display: flex;
       flex-direction: column;
       gap: 24px;
-      height: 100%;
+      min-height: 100%;
       position: relative;
-      overflow-y: auto;
     }
 
     chat-panel-assistant-message,
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifact-tool.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifact-tool.ts
index 31f895be97..03c571a07b 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifact-tool.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/artifact-tool.ts
@@ -3,6 +3,7 @@ import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
 import type { ColorScheme } from '@blocksuite/affine/model';
 import { ShadowlessElement } from '@blocksuite/affine/std';
 import { type NotificationService } from '@blocksuite/affine-shared/services';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import type { Signal } from '@preact/signals-core';
 import {
   css,
@@ -29,12 +30,17 @@ export abstract class ArtifactTool<
 > extends SignalWatcher(WithDisposable(ShadowlessElement)) {
   static override styles = css`
     .artifact-tool-card {
-      cursor: pointer;
       margin: 8px 0;
-    }
+      padding: 10px 0;
 
-    .artifact-tool-card:hover {
-      opacity: 0.8;
+      .affine-embed-linked-doc-block {
+        box-shadow: ${unsafeCSSVar('overlayPanelShadow')};
+        cursor: pointer;
+      }
+
+      .affine-embed-linked-doc-block:hover {
+        background-color: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+      }
     }
   `;
 
@@ -119,23 +125,24 @@ export abstract class ArtifactTool<
 
     return html`
       <div
-        class="affine-embed-linked-doc-block artifact-tool-card ${className ??
-        ''} horizontal"
+        class="artifact-tool-card ${className ?? ''}"
         @click=${this.onCardClick}
       >
-        <div class="affine-embed-linked-doc-content">
-          <div class="affine-embed-linked-doc-content-title">
-            <div class="affine-embed-linked-doc-content-title-icon">
-              ${resolvedIcon}
-            </div>
-            <div class="affine-embed-linked-doc-content-title-text">
-              ${title}
+        <div class="affine-embed-linked-doc-block horizontal">
+          <div class="affine-embed-linked-doc-content">
+            <div class="affine-embed-linked-doc-content-title">
+              <div class="affine-embed-linked-doc-content-title-icon">
+                ${resolvedIcon}
+              </div>
+              <div class="affine-embed-linked-doc-content-title-text">
+                ${title}
+              </div>
             </div>
           </div>
+          ${banner
+            ? html`<div class="affine-embed-linked-doc-banner">${banner}</div>`
+            : nothing}
         </div>
-        ${banner
-          ? html`<div class="affine-embed-linked-doc-banner">${banner}</div>`
-          : nothing}
       </div>
     `;
   }