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

[PR #5781] feat(embed): enhance config and add custom styling support #25053

New Issue
Closed
opened 2026-02-21 20:24:11 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:24:11 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/5781

State: closed
Merged: Yes

Description

  • Introduce 'draggable' configuration option for chatbot button
  • Add 'containerProps' to allow custom properties for the chatbot container
  • Implement support for overriding default styles
  • Refactor embed code to accommodate new customization options

Fixes #5554
Fixes #5409

Type of Change

Please delete options that are not relevant.

  • 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?

To verify the changes introduced in feat(embed): enhance config and add custom styling support, the following tests were conducted:

  • Environment:

    • Browser: Chrome
    • Operating System: macOS

  • Test Cases:

    • Basic Embed: Embedded the chatbot bubble button with default configuration to ensure core functionality remains intact.

    • Draggability:

      • Enabled draggable: true and tested dragging the button along both axes (dragAxis: 'both').
      • Enabled draggable: true and tested dragging the button along the x-axis only (dragAxis: 'x').
      • Enabled draggable: true and tested dragging the button along the y-axis only (dragAxis: 'y').
      • Verified that dragging does not occur when draggable: false.

    • Custom Styling (CSS Variables):

      • Overrode each supported CSS variable individually to confirm their effect on the button's appearance.
      • Tested combinations of CSS variable overrides to ensure compatibility and correct cascading.

    • Custom Styling (containerProps):

      • Applied various inline styles (containerProps.style) to override default styles.
      • Tested applying a CSS class (containerProps.className) to the button.

Suggested Checklist:

  • 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
  • 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
**Original Pull Request:** https://github.com/langgenius/dify/pull/5781 **State:** closed **Merged:** Yes --- # Description - Introduce 'draggable' configuration option for chatbot button - Add 'containerProps' to allow custom properties for the chatbot container - Implement support for overriding default styles - Refactor embed code to accommodate new customization options Fixes #5554 Fixes #5409 ## Type of Change Please delete options that are not relevant. - [ ] 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) - [x] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] Improvement, including but not limited to code refactoring, performance optimization, and UI/UX improvement - [ ] Dependency upgrade # How Has This Been Tested? To verify the changes introduced in feat(embed): enhance config and add custom styling support, the following tests were conducted: + Environment: + Browser: Chrome + Operating System: macOS + Test Cases: + Basic Embed: Embedded the chatbot bubble button with default configuration to ensure core functionality remains intact. + Draggability: + Enabled draggable: true and tested dragging the button along both axes (dragAxis: 'both'). + Enabled draggable: true and tested dragging the button along the x-axis only (dragAxis: 'x'). + Enabled draggable: true and tested dragging the button along the y-axis only (dragAxis: 'y'). + Verified that dragging does not occur when draggable: false. + Custom Styling (CSS Variables): + Overrode each supported CSS variable individually to confirm their effect on the button's appearance. + Tested combinations of CSS variable overrides to ensure compatibility and correct cascading. + Custom Styling (containerProps): + Applied various inline styles (containerProps.style) to override default styles. + Tested applying a CSS class (containerProps.className) to the button. # Suggested Checklist: - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [x] My changes generate no new warnings - [ ] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods - [x] `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
yindo added the pull-request label 2026-02-21 20:24:11 -05:00
yindo closed this issue 2026-02-21 20:24:11 -05:00
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 pull-request
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#25053
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?