From c24fde7168f860fcfb36460abbf55e64c504b7fa Mon Sep 17 00:00:00 2001
From: yoyoyohamapi <8338436+yoyoyohamapi@users.noreply.github.com>
Date: Fri, 9 May 2025 03:45:25 +0000
Subject: [PATCH] fix(core): ai input cannot scroll (#12184)

### TL;DR

fix: ai chat input cannot scroll

> CLOSE AI-115

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

## Summary by CodeRabbit

- **Style**
  - Improved the appearance of the vertical scrollbar in the chat input area, making it visible and styled with custom colors and rounded corners.
- **Bug Fixes**
  - The vertical scrollbar in the chat input now appears when needed, instead of being hidden.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/ai-chat-input/ai-chat-input.ts | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts
index f22e53daf6..af2e1dbf27 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts
@@ -1,6 +1,6 @@
 import { stopPropagation } from '@affine/core/utils';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
-import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { openFileOrFiles } from '@blocksuite/affine/shared/utils';
 import type { EditorHost } from '@blocksuite/affine/std';
 import {
@@ -182,10 +182,30 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
         color: var(--affine-text-primary-color);
         box-sizing: border-box;
         resize: none;
-        overflow-y: hidden;
+        overflow-y: scroll;
         background-color: transparent;
       }
 
+      textarea::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 4px;
+        display: block;
+      }
+
+      textarea::-webkit-scrollbar:horizontal {
+        height: 8px;
+      }
+
+      textarea::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        background-color: transparent;
+      }
+
+      textarea:hover::-webkit-scrollbar-thumb {
+        border-radius: 16px;
+        background-color: ${unsafeCSSVar('black30')};
+      }
+
       textarea::placeholder {
         font-size: 14px;
         font-weight: 400;