fix: add background color for chat bubble in light and dark themes

web/app/components/base/chat/chat/question.tsx

@@ -98,7 +98,7 @@ const Question: FC<QuestionProps> = ({
 
   return (
     <div className='mb-2 flex justify-end last:mb-0'>
-      <div className={cn('group relative mr-4 flex max-w-full items-start pl-14 overflow-x-hidden', isEditing && 'flex-1')}>
+      <div className={cn('group relative mr-4 flex max-w-full items-start overflow-x-hidden pl-14', isEditing && 'flex-1')}>
         <div className={cn('mr-2 gap-1', isEditing ? 'hidden' : 'flex')}>
           <div
             className="absolute hidden gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex"
@@ -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> }
+            </div>}
-          { !isEditing && <ContentSwitch
+          {!isEditing && <ContentSwitch
             count={item.siblingCount}
             currentIndex={item.siblingIndex}
             prevDisabled={!item.prevSibling}

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

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

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