From aef67ed7ece1e6540201c689c1a24e702cf4d991 Mon Sep 17 00:00:00 2001
From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Date: Wed, 16 Jul 2025 13:36:51 +0800
Subject: [PATCH] fix: add background  color for chat bubble in light and dark
 themes (#22472)

---
 web/app/components/base/chat/chat/question.tsx | 6 +++---
 web/tailwind-common-config.ts                  | 3 +++
 web/themes/manual-dark.css                     | 1 +
 web/themes/manual-light.css                    | 1 +
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index cae8e2b8c..666a869a3 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -130,7 +130,7 @@ const Question: FC<QuestionProps> = ({
               />
             )
           }
-          { !isEditing
+          {!isEditing
             ? <Markdown content={content} />
             : <div className="
                 flex flex-col gap-2 rounded-xl
@@ -151,8 +151,8 @@ const Question: FC<QuestionProps> = ({
                 <Button variant='ghost' onClick={handleCancelEditing}>{t('common.operation.cancel')}</Button>
                 <Button variant='primary' onClick={handleResend}>{t('common.chat.resend')}</Button>
               </div>
-            </div> }
-          { !isEditing && <ContentSwitch
+            </div>}
+          {!isEditing && <ContentSwitch
             count={item.siblingCount}
             currentIndex={item.siblingIndex}
             prevDisabled={!item.prevSibling}
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index eff153001..350c1c29d 100644
--- a/web/tailwind-common-config.ts
+++ b/web/tailwind-common-config.ts
@@ -90,6 +90,9 @@ const config = {
       fontSize: {
         '2xs': '0.625rem',
       },
+      backgroundColor: {
+        'background-gradient-bg-fill-chat-bubble-bg-3': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-3)',
+      },
       backgroundImage: {
         'chatbot-bg': 'var(--color-chatbot-bg)',
         'chat-bubble-bg': 'var(--color-chat-bubble-bg)',
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index ed5f12bbc..316fd7573 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -63,4 +63,5 @@ html[data-theme="dark"] {
     --color-premium-badge-border-highlight-color: #ffffff33;
     --color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
     --color-grid-mask-background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(24, 24, 25, 0.1) 62.25%, rgba(24, 24, 25, 0.10) 100%);
+    --color-background-gradient-bg-fill-chat-bubble-bg-3: #27314d;
 }
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index c20155036..1198ab839 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -63,4 +63,5 @@ html[data-theme="light"] {
     --color-premium-badge-border-highlight-color: #fffffff2;
     --color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
     --color-grid-mask-background: linear-gradient(0deg, #FFF 0%, rgba(217, 217, 217, 0.10) 62.25%, rgba(217, 217, 217, 0.10) 100%);
+    --color-background-gradient-bg-fill-chat-bubble-bg-3: #e1effe;
 }