From 8cfdc48b5733da705a026370a3ccbb0606cdc8d9 Mon Sep 17 00:00:00 2001
From: yoyoyohamapi <8338436+yoyoyohamapi@users.noreply.github.com>
Date: Thu, 20 Mar 2025 06:39:27 +0000
Subject: [PATCH] refactor(core): ai message style (#10950)
### TL;DR
Refactor style of AI chat message
> CLOSE AF-2338, AF-2328, AF-2327
### What Changed
* Adjust style of chat action message
* Adjust style of chat error message
* Refactor style of chat message box
---
.../ai/chat-panel/actions/action-wrapper.ts | 23 +++++++++++++++----
.../blocksuite/ai/chat-panel/actions/text.ts | 17 +++++++++++++-
.../ai/chat-panel/chat-panel-messages.ts | 4 ----
.../ai/chat-panel/content/images.ts | 3 ++-
.../ai/chat-panel/content/pure-text.ts | 18 ++++++++++++++-
.../blocksuite/ai/chat-panel/message/user.ts | 18 +++++++++++++--
.../core/src/blocksuite/ai/messages/error.ts | 11 ++++-----
7 files changed, 75 insertions(+), 19 deletions(-)
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts
index 24b80c1a60..0c776ebb30 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts
@@ -1,5 +1,6 @@
import type { EditorHost } from '@blocksuite/affine/block-std';
import { WithDisposable } from '@blocksuite/affine/global/lit';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
import {
ArrowDownBigIcon as ArrowDownIcon,
ArrowUpBigIcon as ArrowUpIcon,
@@ -68,7 +69,7 @@ export class ActionWrapper extends WithDisposable(LitElement) {
margin-bottom: 12px;
svg {
- color: var(--affine-primary-color);
+ color: ${unsafeCSSVar('primaryColor')};
}
div:last-child {
@@ -85,18 +86,21 @@ export class ActionWrapper extends WithDisposable(LitElement) {
.answer-prompt {
padding: 8px;
- background-color: var(--affine-background-secondary-color);
+ background-color: ${unsafeCSSVarV2('block/callout/background/grey')};
display: flex;
flex-direction: column;
gap: 4px;
font-size: 14px;
font-weight: 400;
- color: var(--affine-text-primary-color);
+ color: ${unsafeCSSVarV2('text/primary')};
+ max-height: 500px;
+ overflow-y: auto;
+ border-radius: 4px;
.subtitle {
font-size: 12px;
font-weight: 500;
- color: var(--affine-text-secondary-color);
+ color: ${unsafeCSSVarV2('text/secondary')};
height: 20px;
line-height: 20px;
}
@@ -105,6 +109,17 @@ export class ActionWrapper extends WithDisposable(LitElement) {
margin-top: 12px;
}
}
+
+ .answer-prompt::-webkit-scrollbar {
+ width: 4px;
+ height: 4px;
+ }
+ .answer-prompt::-webkit-scrollbar-thumb {
+ background-color: ${unsafeCSSVar('borderColor')};
+ }
+ .answer-prompt::-webkit-scrollbar-track {
+ background: transparent;
+ }
`;
@state()
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/text.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/text.ts
index 46cc8bc8ff..52c6347e9e 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/text.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/text.ts
@@ -2,13 +2,13 @@ import './action-wrapper';
import type { EditorHost } from '@blocksuite/affine/block-std';
import { WithDisposable } from '@blocksuite/affine/global/lit';
+import { unsafeCSSVar } from '@blocksuite/affine/shared/theme';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { createTextRenderer } from '../../components/text-renderer';
import type { ChatAction } from '../chat-context';
-
export class ActionText extends WithDisposable(LitElement) {
static override styles = css`
.original-text {
@@ -16,6 +16,21 @@ export class ActionText extends WithDisposable(LitElement) {
margin-bottom: 12px;
font-size: var(--affine-font-sm);
line-height: 22px;
+ max-height: 200px;
+ overflow-y: auto;
+ }
+
+ .original-text::-webkit-scrollbar {
+ width: 4px;
+ height: 4px;
+ }
+
+ .original-text::-webkit-scrollbar-thumb {
+ background-color: ${unsafeCSSVar('borderColor')};
+ }
+
+ .original-text::-webkit-scrollbar-track {
+ background: transparent;
}
`;
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
index 9a09d5383e..48ccf9865c 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
@@ -56,10 +56,6 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
user-select: none;
}
- .item-wrapper {
- margin-left: 32px;
- }
-
.messages-placeholder {
width: 100%;
position: absolute;
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/content/images.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/images.ts
index 682f0bb80b..ba03bf1429 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/content/images.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/images.ts
@@ -1,5 +1,6 @@
import { ShadowlessElement } from '@blocksuite/affine/block-std';
import { WithDisposable } from '@blocksuite/affine/global/lit';
+import { unsafeCSSVar } from '@blocksuite/affine/shared/theme';
import { css, html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
@@ -23,7 +24,7 @@ export class ChatContentImages extends WithDisposable(ShadowlessElement) {
}
.chat-content-images-row::-webkit-scrollbar-thumb {
- background-color: var(--affine-border-color);
+ background-color: ${unsafeCSSVar('borderColor')};
border-radius: 4px;
}
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts
index 756dc39b75..5866d89f95 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/content/pure-text.ts
@@ -1,4 +1,5 @@
import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
import { css, html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
@@ -10,11 +11,26 @@ export class ChatContentPureText extends ShadowlessElement {
max-width: 800px;
max-height: 500px;
overflow-y: auto;
- background: var(--affine-v2-aI-userTextBackground);
+ overflow-x: hidden;
+ background: ${unsafeCSSVarV2('aI/userTextBackground')};
border-radius: 8px;
padding: 12px;
white-space: pre-wrap;
word-wrap: break-word;
+ scrollbar-width: auto;
+ }
+
+ .chat-content-pure-text::-webkit-scrollbar {
+ width: 4px;
+ }
+
+ .chat-content-pure-text::-webkit-scrollbar-thumb {
+ background-color: ${unsafeCSSVar('borderColor')};
+ border-radius: 3px;
+ }
+
+ .chat-content-pure-text::-webkit-scrollbar-track {
+ background: transparent;
}
`;
diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/user.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/user.ts
index 9c58e4f336..ef3c632c91 100644
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/user.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/user.ts
@@ -13,7 +13,18 @@ export class ChatMessageUser extends WithDisposable(ShadowlessElement) {
.chat-message-user {
display: flex;
flex-direction: column;
- align-items: flex-end;
+ }
+
+ .chat-content-images {
+ display: flex;
+
+ .images-row {
+ margin-left: auto;
+ }
+ }
+
+ .text-content-wrapper {
+ align-self: flex-end;
}
`;
@@ -26,10 +37,13 @@ export class ChatMessageUser extends WithDisposable(ShadowlessElement) {
return html`
${item.attachments
? html``
: nothing}
-
+
+
+
`;
}
diff --git a/packages/frontend/core/src/blocksuite/ai/messages/error.ts b/packages/frontend/core/src/blocksuite/ai/messages/error.ts
index fb0e6574dd..41320cce31 100644
--- a/packages/frontend/core/src/blocksuite/ai/messages/error.ts
+++ b/packages/frontend/core/src/blocksuite/ai/messages/error.ts
@@ -22,11 +22,11 @@ export class AIErrorWrapper extends SignalWatcher(WithDisposable(LitElement)) {
flex-direction: column;
justify-content: center;
align-items: flex-start;
- gap: 12px;
+ gap: 8px;
align-self: stretch;
border-radius: 4px;
padding: 8px 8px 12px 8px;
- background-color: ${unsafeCSSVarV2('layer/background/error')};
+ background-color: ${unsafeCSSVarV2('aI/errorBackground')};
font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
.content {
@@ -34,7 +34,7 @@ export class AIErrorWrapper extends SignalWatcher(WithDisposable(LitElement)) {
display: flex;
gap: 8px;
align-self: stretch;
- color: ${unsafeCSSVarV2('status/error')};
+ color: ${unsafeCSSVarV2('aI/errorText')};
font-feature-settings:
'clig' off,
'liga' off;
@@ -70,10 +70,9 @@ export class AIErrorWrapper extends SignalWatcher(WithDisposable(LitElement)) {
cursor: pointer;
}
.detail-content {
- padding: 4px;
+ padding: 8px;
border-radius: 4px;
- background-color: ${unsafeCSSVarV2('layer/background/translucentUI')};
- height: 66px;
+ background-color: ${unsafeCSSVarV2('aI/errorDetailBackground')};
overflow: auto;
}
${scrollbarStyle('.detail-content')}