From 08a526e51127e24a0fb85efe8d889255fada9387 Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Thu, 26 Jun 2025 11:42:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=20(#7549)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(Messages): integrate Scrollbar component into Message and MessageGroup styled containers

* style(Messages): add margin-top to MessageFooter for improved layout

* fix(SelectionToolbar): update regex to remove background styles more accurately
---
 src/renderer/src/pages/home/Messages/Message.tsx              | 4 +++-
 src/renderer/src/pages/home/Messages/MessageGroup.tsx         | 3 ++-
 .../src/windows/selection/toolbar/SelectionToolbar.tsx        | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx
index 96067bc375..d013e34e0e 100644
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -1,3 +1,4 @@
+import Scrollbar from '@renderer/components/Scrollbar'
 import { useMessageEditing } from '@renderer/context/MessageEditingContext'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useMessageOperations } from '@renderer/hooks/useMessageOperations'
@@ -215,7 +216,7 @@ const MessageContainer = styled.div`
   }
 `
 
-const MessageContentContainer = styled.div`
+const MessageContentContainer = styled(Scrollbar)`
   max-width: 100%;
   padding-left: 46px;
   margin-top: 5px;
@@ -229,6 +230,7 @@ const MessageFooter = styled.div`
   align-items: center;
   gap: 20px;
   margin-left: 46px;
+  margin-top: 2px;
 `
 
 const NewContextMessage = styled.div`
diff --git a/src/renderer/src/pages/home/Messages/MessageGroup.tsx b/src/renderer/src/pages/home/Messages/MessageGroup.tsx
index 69b7e7243b..995540a6cf 100644
--- a/src/renderer/src/pages/home/Messages/MessageGroup.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageGroup.tsx
@@ -1,3 +1,4 @@
+import Scrollbar from '@renderer/components/Scrollbar'
 import { MessageEditingProvider } from '@renderer/context/MessageEditingContext'
 import { useChatContext } from '@renderer/hooks/useChatContext'
 import { useMessageOperations } from '@renderer/hooks/useMessageOperations'
@@ -257,7 +258,7 @@ const GroupContainer = styled.div`
   }
 `
 
-const GridContainer = styled.div<{ $count: number; $gridColumns: number }>`
+const GridContainer = styled(Scrollbar)<{ $count: number; $gridColumns: number }>`
   width: 100%;
   display: grid;
   overflow-y: visible;
diff --git a/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx b/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
index af6a94372c..00f38e01b8 100644
--- a/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
+++ b/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
@@ -159,7 +159,7 @@ const SelectionToolbar: FC<{ demo?: boolean }> = ({ demo = false }) => {
     }
 
     if (customCss) {
-      const newCustomCss = customCss.replace(/background(-image|-color)?\s*:[^;]+;/gi, '')
+      const newCustomCss = customCss.replace(/(^|\s)background(-image|-color)?\s*:[^;]+;/gi, '')
 
       customCssElement = document.createElement('style')
       customCssElement.id = 'user-defined-custom-css'