estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: add background color for chat bubble in light and dark themes (#22472)

Browse Source
This commit is contained in:
Wu Tianwei
2025-07-16 13:36:51 +08:00
committed by GitHub
parent ddfd8c8525
commit aef67ed7ec
4 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/base/chat/chat/question.tsx
View File

@@ -130,7 +130,7 @@ const Question: FC<QuestionProps> = ({
/> />
) )
} }
{ !isEditing {!isEditing
? <Markdown content={content} /> ? <Markdown content={content} />
: <div className=" : <div className="
flex flex-col gap-2 rounded-xl 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='ghost' onClick={handleCancelEditing}>{t('common.operation.cancel')}</Button>
<Button variant='primary' onClick={handleResend}>{t('common.chat.resend')}</Button> <Button variant='primary' onClick={handleResend}>{t('common.chat.resend')}</Button>
</div> </div>
</div> } </div>}
{ !isEditing && <ContentSwitch {!isEditing && <ContentSwitch
count={item.siblingCount} count={item.siblingCount}
currentIndex={item.siblingIndex} currentIndex={item.siblingIndex}
prevDisabled={!item.prevSibling} prevDisabled={!item.prevSibling}

3
web/tailwind-common-config.ts
View File

@@ -90,6 +90,9 @@ const config = {
fontSize: { fontSize: {
'2xs': '0.625rem', '2xs': '0.625rem',
}, },
backgroundColor: {
'background-gradient-bg-fill-chat-bubble-bg-3': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-3)',
},
backgroundImage: { backgroundImage: {
'chatbot-bg': 'var(--color-chatbot-bg)', 'chatbot-bg': 'var(--color-chatbot-bg)',
'chat-bubble-bg': 'var(--color-chat-bubble-bg)', 'chat-bubble-bg': 'var(--color-chat-bubble-bg)',

1
web/themes/manual-dark.css
View File

@@ -63,4 +63,5 @@ html[data-theme="dark"] {
--color-premium-badge-border-highlight-color: #ffffff33; --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-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-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;
} }

1
web/themes/manual-light.css
View File

@@ -63,4 +63,5 @@ html[data-theme="light"] {
--color-premium-badge-border-highlight-color: #fffffff2; --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-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-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;
} }