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

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()

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;
     }
   `;
 

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;

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;
     }
 

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;
     }
   `;
 

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`<chat-content-images
+            class="chat-content-images"
             .images=${item.attachments}
           ></chat-content-images>`
         : nothing}
-      <chat-content-pure-text .text=${item.content}></chat-content-pure-text>
+      <div class="text-content-wrapper">
+        <chat-content-pure-text .text=${item.content}></chat-content-pure-text>
+      </div>
     `;
   }
 

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')}