langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-22 04:25:29 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

question parts of a chat lose bubble background #15403

New Issue
Closed
opened 2026-02-21 19:21:34 -05:00 by yindo · 5 comments
yindo commented 2026-02-21 19:21:34 -05:00
Owner
Copy Link
Copy Source

Originally created by @AkisAya on GitHub (Jul 15, 2025).

Originally assigned to: @WTW0313 on GitHub.

Self Checks

  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
  • [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:)
  • Please do not modify this template :) and fill in all the required fields.

Dify version

1.6.0

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

chat in agent/worflow

✔️ Expected Behavior

question part has a light blue background to distinguish content

Image

❌ Actual Behavior

question parts lose background

Image
Originally created by @AkisAya on GitHub (Jul 15, 2025). Originally assigned to: @WTW0313 on GitHub. ### Self Checks - [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [x] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:) - [x] Please do not modify this template :) and fill in all the required fields. ### Dify version 1.6.0 ### Cloud or Self Hosted Self Hosted (Source) ### Steps to reproduce chat in agent/worflow ### ✔️ Expected Behavior question part has a light blue background to distinguish content <img width="846" height="215" alt="Image" src="https://github.com/user-attachments/assets/6981bc3f-a797-47e4-9a45-bec36fd1667a" /> ### ❌ Actual Behavior question parts lose background <img width="844" height="262" alt="Image" src="https://github.com/user-attachments/assets/8e46d385-e6a8-481e-bf6d-b436e51d04a0" />
yindo added the 🐞 buggood first issue labels 2026-02-21 19:21:34 -05:00
yindo closed this issue 2026-02-21 19:21:34 -05:00
yindo commented 2026-02-21 19:21:34 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Jul 15, 2025):

The missing background on the question bubbles is caused by the use of a non-existent CSS class: bg-background-gradient-bg-fill-chat-bubble-bg-3. Only bg-fill-chat-bubble-bg-1 and bg-fill-chat-bubble-bg-2 are defined in the theme, so no background gets applied. To fix this, update the Question component to use a valid background class, such as bg-chat-bubble-bg or one of the existing bg-fill-chat-bubble-bg-1/bg-fill-chat-bubble-bg-2 classes. This will restore the intended bubble background and visual distinction for question messages. There’s no conditional logic removing the background—this is purely a theming/config error.
You can see the relevant code and class usage here.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Join Discord Share on X

@dosubot[bot] commented on GitHub (Jul 15, 2025): <!-- Answer --> The missing background on the question bubbles is caused by the use of a non-existent CSS class: `bg-background-gradient-bg-fill-chat-bubble-bg-3`. Only `bg-fill-chat-bubble-bg-1` and `bg-fill-chat-bubble-bg-2` are defined in the theme, so no background gets applied. To fix this, update the Question component to use a valid background class, such as `bg-chat-bubble-bg` or one of the existing `bg-fill-chat-bubble-bg-1`/`bg-fill-chat-bubble-bg-2` classes. This will restore the intended bubble background and visual distinction for question messages. There’s no conditional logic removing the background—this is purely a theming/config error. You can see the relevant code and class usage [here](https://github.com/langgenius/dify/blob/7bf3d2c8bf5715305e1615fb4a5ba02c42d03643/web/app/components/base/chat/chat/question.tsx). <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/1c807b1b-c328-4222-935f-50362b20a5ea?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/1c807b1b-c328-4222-935f-50362b20a5ea?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/1c807b1b-c328-4222-935f-50362b20a5ea?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/1c807b1b-c328-4222-935f-50362b20a5ea?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/1c807b1b-c328-4222-935f-50362b20a5ea?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/1c807b1b-c328-4222-935f-50362b20a5ea?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/1c807b1b-c328-4222-935f-50362b20a5ea?feedback_type=other)</sup>&nbsp;&nbsp;[![Join Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share on X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/langgenius/dify/issues/22451)
yindo commented 2026-02-21 19:21:34 -05:00
Author
Owner
Copy Link
Copy Source

@AkisAya commented on GitHub (Jul 15, 2025):

@dosu it's not working to use bg-fill-chat-bubble-bg-1/bg-fill-chat-bubble-bg-2, and bg-chat-bubble-bg works but it's a white background but expected is a blue background and it changes when use dark theme. it shound be something wrong with the Theme, in which chatBubbleColorStyle is not set correctly

@AkisAya commented on GitHub (Jul 15, 2025): @dosu it's not working to use bg-fill-chat-bubble-bg-1/bg-fill-chat-bubble-bg-2, and bg-chat-bubble-bg works but it's a white background but expected is a blue background and it changes when use dark theme. it shound be something wrong with the Theme, in which chatBubbleColorStyle is not set correctly
yindo commented 2026-02-21 19:21:34 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Jul 15, 2025):

You're right—this is a theme config issue. The chat bubble color is controlled by the chat_color_theme setting. If it's not set, the background defaults to white or transparent, which is why bg-chat-bubble-bg appears white and the blue is missing.

To fix this, go to your app's settings in the Dify admin UI (SettingsModal) and set the chat bubble color to a blue hex value, like #e1effe. This will restore the expected blue background for question bubbles in light mode. The color will also adapt in dark mode based on the theme logic. If you want to set it via API, update the chat_color_theme field in your app's WebApp settings payload with a hex color (e.g., #e1effe) and save.

If you still don't see the change, try clearing your browser cache or doing a hard reload. Let me know if you need the exact API call or a CSS override workaround.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Join Discord Share on X

@dosubot[bot] commented on GitHub (Jul 15, 2025): <!-- Answer --> You're right—this is a theme config issue. The chat bubble color is controlled by the chat_color_theme setting. If it's not set, the background defaults to white or transparent, which is why bg-chat-bubble-bg appears white and the blue is missing. To fix this, go to your app's settings in the Dify admin UI (SettingsModal) and set the chat bubble color to a blue hex value, like #e1effe. This will restore the expected blue background for question bubbles in light mode. The color will also adapt in dark mode based on the theme logic. If you want to set it via API, update the chat_color_theme field in your app's WebApp settings payload with a hex color (e.g., #e1effe) and save. If you still don't see the change, try clearing your browser cache or doing a hard reload. Let me know if you need the exact API call or a CSS override workaround. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/58625a64-fcd1-4d19-80af-9aca13f1595e?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/58625a64-fcd1-4d19-80af-9aca13f1595e?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/58625a64-fcd1-4d19-80af-9aca13f1595e?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/58625a64-fcd1-4d19-80af-9aca13f1595e?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/58625a64-fcd1-4d19-80af-9aca13f1595e?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/58625a64-fcd1-4d19-80af-9aca13f1595e?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/58625a64-fcd1-4d19-80af-9aca13f1595e?feedback_type=other)</sup>&nbsp;&nbsp;[![Join Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share on X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/langgenius/dify/issues/22451)
yindo commented 2026-02-21 19:21:34 -05:00
Author
Owner
Copy Link
Copy Source

@HyaCiovo commented on GitHub (Jul 15, 2025):

https://github.com/langgenius/dify/pull/22113/files It seems they deleted bg-3 but didn't provide a new color value.

Image
@HyaCiovo commented on GitHub (Jul 15, 2025): https://github.com/langgenius/dify/pull/22113/files It seems they deleted bg-3 but didn't provide a new color value. <img width="1807" height="125" alt="Image" src="https://github.com/user-attachments/assets/6420ed91-148e-42ba-b51c-274c4c901e70" />
yindo commented 2026-02-21 19:21:35 -05:00
Author
Owner
Copy Link
Copy Source

@WTW0313 commented on GitHub (Jul 16, 2025):

I'm very sorry to have deleted this color value. These color values are generated by code, so if a color value is manually added, it will be automatically deleted the next time Tailwind theme configuration is updated.
To ensure that the manually added color values will not be overwritten or deleted, you can refer to the changes in PR #22472.

@WTW0313 commented on GitHub (Jul 16, 2025): I'm very sorry to have deleted this color value. These color values are generated by code, so if a color value is manually added, it will be automatically deleted the next time Tailwind theme configuration is updated. To ensure that the manually added color values will not be overwritten or deleted, you can refer to the changes in PR #22472.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label good first issue 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#15403
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?