FR: #4048 - Add color customization to the chatbot #4885

dromerolovo · 2024-06-03T06:14:44Z

Description

FR: Close #4048 - Add color customization to the chatbot

The scope of this PR is to apply customization only to the chatbot.

Add chatbot_color_theme and chatbot_color_theme_inverted to the SiteInfo
Create an input on SettingsModal to set chatbot_color_theme and chatbot_color_theme_inverted
Create the db migration to support those properties
Create a context and a Theme builder
Apply dynamic styles to components that are part of the chatbot embedded such as: Header, Welcome, Question, etc.
Override and add default values in case that the theme is not built, because many components are used in contexts outside the chatbot
Override the style of the button.

Because Tailwind doesn't support dynamic classes because of its JIT functionality I had to include styles
directly https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support It would've been nice to keep it with classes, but I think that It can't be done that way.

LIMITATIONS:

Colors with high luminance or those close to white may not be visually distinct due to a lack of contrast.
When setting a new color in the Settings Modal, it is necessary to refresh the app to update the embedded script.
The color of the "#dify-chatbot-bubble-button" is controlled by a script, so each change requires adding a new script to the website.

Fixes # (issue)

Type of Change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update, included: Dify Document
Improvement, including but not limited to code refactoring, performance optimization, and UI/UX improvement
Dependency upgrade

How Has This Been Tested?

I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods (Kind of)
optional I have made corresponding changes to the documentation
optional I have added tests that prove my fix is effective or that my feature works
optional New and existing unit tests pass locally with my changes

I considered this change useful as stated in the Issue made previously:

How will this feature improve your workflow or experience?
It will improve the experience of developers and designers that want to include the embedded chatbot into a website that have clear or strict design requirements.

If you guys feel that this is not the way that you want to go, you can always let it fade into oblivion.

crazywoola

Thanks for your contribution. I've test it's functionality. LGTM, Although I have several comments:

This configuration should limited to chatbot, chatflow, and agent, but it appears in the setting modal in workflow and text generation as well. I think it should be hidden for these two types from the frontend.
The checkbox, since it's not a standard UI widget in our application, but it's ok, I will ask our UI to check it out, maybe open a follow up PR for this later.

dromerolovo · 2024-06-04T18:11:57Z

Hi, @crazywoola. I agree. I'll check that out as soon as I'm free.

dromerolovo · 2024-06-06T19:37:35Z

@crazywoola I've pushed the changes:

I copied the classes of the checkbox inside StepTwo to the 'inverted' checkbox
Add a conditional rendering for the theme input, excluding the apps that are not 'chat'
Updated the migration because, in the meantime, there was a new migration.
Added a fix: it is now unnecessary to refresh the site to update the primary color on the embedded script.

crazywoola · 2024-06-18T05:39:53Z

Hello, sorry for the late response, I have fixed the CI based on several changes in our code base. :)
I tested this today, it seems the color theme is not working. Could you take a look at this.

dromerolovo · 2024-06-18T17:24:51Z

Hi @crazywoola. I took a look and the theme is not working because of the following reason:

The commit Chore: refactor embedded chatbot 4289f17
Made a refactor changing in
web/app/(shareLayout)/chatbot/[token]/page.tsx

The following:

- import Main from '@/app/components/share/chatbot'
+ import EmbeddedChatbot from '@/app/components/base/chat/embedded-chatbot'

the Main component use the following relevant components:

Header from '@/app/components/share/header'
Chat from '@/app/components/app/chat'
ConfigScene from '@/app/components/share/chatbot/config-scence'

The EmbeddedChatbot use a different set of components:

Header from '@/app/components/base/chat/embedded-chatbot/header'
ConfigPanel from '@/app/components/base/chat/embedded-chatbot/config-panel'
ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'

Apparently the Main component and its children are obsolete.
Sadly, The theme implementation was made on Main and its child components from '@/app/components/share/chatbot'

So the solution would be to implement the style logic on the new embedded-chatbot components.

I can give it a try, when I'm free. But what would happen with those components(the obsolete ones)? Maybe I can mark those with a @deprecated decorator for the time being.

crazywoola · 2024-06-19T02:37:52Z

@dromerolovo Yes please mark those with a @deprecated decorator.
@JzoNgKVO Could you take a look at this as well.

JzoNgKVO · 2024-06-19T09:11:53Z

This PR #5125 is intended for all chat components to use the components under the @/app/components/base/chat folder. The old components under @/app/components/app/chat will be deprecated in the near future.

This PR #4379 also refactored the Button component.

So @dromerolovo you can implement the style logic in the new components to achieve this functionality when you are free. Thanks for your contribution.

By the way, there is a major update being planned regarding theme colors, which will support dark mode and make it easier to support more theme colors in this release, expected in August.

dromerolovo · 2024-06-24T23:27:43Z

@JzoNgKVO @crazywoola I've applied the theme to the new components. Hopefully is working. I need to make a quick fix in migrations though

crazywoola

LGTM

crazywoola · 2024-06-26T09:32:39Z

FYI, as we are working on some new components such as checkboxes.
I will remove inverted checkbox for now, and I will open another PR to add it back once we have that widget ready. :)

* commit '8d9a45908397b3f3c0d56e86160bb97b5611b79b': (240 commits) fix: remove obsoleted 'version' elements in compose files (langgenius#5553) chore: add a secondary confirmation dialog when the user delete the tool (langgenius#5634) fix: ro-RO is not a valid language (langgenius#5635) FR: langgenius#4048 - Add color customization to the chatbot (langgenius#4885) feat: tracing fe (langgenius#5487) feat: add ops trace (langgenius#5483) chore: cleanup test_delete_by_document_id method in opensearch vdb test (langgenius#5619) chore(pyproject.toml): Add Ruff formatter config. (langgenius#5627) Fix link to documentation of nodes (langgenius#5623) feat: undo/redo for workflow editor (langgenius#3927) fix: populate app configs to system environment variables (langgenius#5590) fix: DuckDuckGo image search tool error (langgenius#5606) delete the deprecated method (langgenius#5612) fix: context icon in chat (langgenius#5604) fix: Modify the incorrect configuration name for Google storage (langgenius#5595) feat: update issue template (langgenius#5592) chore: fix typo in config descriptions (langgenius#5585) fix: add support for FILE type in ToolParameterConverter (langgenius#5578) Fix/single run panel show parent scrollbar (langgenius#5574) refactor: extract cors configs into dify config and cleanup the config class (langgenius#5507) ... # Conflicts: # .github/workflows/build-push.yml # api/Dockerfile # api/core/helper/code_executor/code_executor.py # api/requirements.txt

* commit '17d2f0bb0d3c7618ed59968613175d2344fcbdc1': (145 commits) fix(api/configs): Ignore empty environment variables when loading config. (langgenius#5647) fix: type error in config (langgenius#5643) fix: remove obsoleted 'version' elements in compose files (langgenius#5553) chore: add a secondary confirmation dialog when the user delete the tool (langgenius#5634) fix: ro-RO is not a valid language (langgenius#5635) FR: langgenius#4048 - Add color customization to the chatbot (langgenius#4885) feat: tracing fe (langgenius#5487) feat: add ops trace (langgenius#5483) chore: cleanup test_delete_by_document_id method in opensearch vdb test (langgenius#5619) chore(pyproject.toml): Add Ruff formatter config. (langgenius#5627) Fix link to documentation of nodes (langgenius#5623) feat: undo/redo for workflow editor (langgenius#3927) fix: populate app configs to system environment variables (langgenius#5590) fix: DuckDuckGo image search tool error (langgenius#5606) delete the deprecated method (langgenius#5612) fix: context icon in chat (langgenius#5604) fix: Modify the incorrect configuration name for Google storage (langgenius#5595) feat: update issue template (langgenius#5592) chore: fix typo in config descriptions (langgenius#5585) fix: add support for FILE type in ToolParameterConverter (langgenius#5578) ... # Conflicts: # .github/workflows/build-push.yml # api/Dockerfile # api/requirements.txt

* refs/heads/main: (45 commits) fix: do not remove (#5682) Feature/add qwen llm (#5659) Fix docker command (#5681) feature: Add presence_penalty and frequency_penalty parameters to the … (#5637) Feat/fix ops trace (#5672) feat: xxo enhancement. (#5671) chore: rearrange python dependencies in groups (#5603) chore: delete unused resource (#5667) fix: knowledge retrieval score threshold setting (#5658) feat: add jina new pre-defined rerankers, include: jina-reranker-v2 (#5657) fix: tool call message role according to credentials (#5625) fix: HTTP request header is overwritten when user set Content-Type (#5628) chore: apply flake8-comprehensions Ruff rules to improve collection comprehensions (#5652) fix(api): language list (#5649) fix(api/configs): Ignore empty environment variables when loading config. (#5647) fix: type error in config (#5643) fix: remove obsoleted 'version' elements in compose files (#5553) chore: add a secondary confirmation dialog when the user delete the tool (#5634) fix: ro-RO is not a valid language (#5635) FR: #4048 - Add color customization to the chatbot (#4885) ... # Conflicts: # api/config.py # web/app/components/datasets/settings/form/index.tsx

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. 💪 enhancement New feature or request labels Jun 3, 2024

takatost requested review from VincePotato, JzoNgKVO and takatost June 3, 2024 18:55

crazywoola requested changes Jun 4, 2024

View reviewed changes

dromerolovo force-pushed the feat/chatbot-color-theme-main branch from 12d54f0 to 5e1a0cb Compare June 6, 2024 19:31

dromerolovo requested a review from crazywoola June 6, 2024 19:42

crazywoola force-pushed the feat/chatbot-color-theme-main branch from a4c3d6d to d8592df Compare June 18, 2024 05:22

dromerolovo force-pushed the feat/chatbot-color-theme-main branch from 2201537 to 4f6f2f1 Compare June 24, 2024 23:17

crazywoola previously approved these changes Jun 26, 2024

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Jun 26, 2024

JzoNgKVO previously approved these changes Jun 26, 2024

View reviewed changes

crazywoola dismissed stale reviews from JzoNgKVO and themself via fd8d66a June 26, 2024 09:39

crazywoola previously approved these changes Jun 26, 2024

View reviewed changes

dromerolovo and others added 6 commits June 26, 2024 17:43

write db chat color theme

1f12df3

theme class & context

2e1e21d

resolve

69ed4d3

Adding theme style to components

16e4b76

fix

dd262f1

fix: handle undefined values

8fcfd4b

dromerolovo and others added 14 commits June 26, 2024 17:43

update migrations

82ec4d6

polish

cf60d44

isChat conditional rendering

67d6c5b

copy style of StepTwo checkbox

f87ab14

fix: theme not being updated

1d0371d

fix: lint

7d6c32a

apply theme to new components

4a0dff1

fill opacity 0 question triangle

bf5a6de

polish

e3554c6

remove header comments

d3b31f3

fix migrations

b310816

fix: lint

abab315

chore: remove inverted checkbox for now

8368889

feat: add missing i18n

f6eefc5

crazywoola force-pushed the feat/chatbot-color-theme-main branch from fd8d66a to f6eefc5 Compare June 26, 2024 09:44

fix: db migration

50fa1b4

crazywoola dismissed their stale review via 50fa1b4 June 26, 2024 09:47

crazywoola approved these changes Jun 26, 2024

View reviewed changes

crazywoola merged commit 4c0a31d into langgenius:main Jun 26, 2024
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FR: #4048 - Add color customization to the chatbot #4885

FR: #4048 - Add color customization to the chatbot #4885

dromerolovo commented Jun 3, 2024 •

edited by crazywoola

Loading

crazywoola left a comment •

edited

Loading

dromerolovo commented Jun 4, 2024

dromerolovo commented Jun 6, 2024

crazywoola commented Jun 18, 2024

dromerolovo commented Jun 18, 2024 •

edited

Loading

crazywoola commented Jun 19, 2024

JzoNgKVO commented Jun 19, 2024

dromerolovo commented Jun 24, 2024 •

edited

Loading

crazywoola left a comment

crazywoola commented Jun 26, 2024 •

edited

Loading

FR: #4048 - Add color customization to the chatbot #4885

FR: #4048 - Add color customization to the chatbot #4885

Conversation

dromerolovo commented Jun 3, 2024 • edited by crazywoola Loading

Description

Type of Change

How Has This Been Tested?

crazywoola left a comment • edited Loading

Choose a reason for hiding this comment

dromerolovo commented Jun 4, 2024

dromerolovo commented Jun 6, 2024

crazywoola commented Jun 18, 2024

dromerolovo commented Jun 18, 2024 • edited Loading

crazywoola commented Jun 19, 2024

JzoNgKVO commented Jun 19, 2024

dromerolovo commented Jun 24, 2024 • edited Loading

crazywoola left a comment

Choose a reason for hiding this comment

crazywoola commented Jun 26, 2024 • edited Loading

dromerolovo commented Jun 3, 2024 •

edited by crazywoola

Loading

crazywoola left a comment •

edited

Loading

dromerolovo commented Jun 18, 2024 •

edited

Loading

dromerolovo commented Jun 24, 2024 •

edited

Loading

crazywoola commented Jun 26, 2024 •

edited

Loading