Skip to content

Fix UI issue where words with "modify" were being pinned to bottom of page #440

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 31, 2025
Merged

Fix UI issue where words with "modify" were being pinned to bottom of page #440

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions src/js/chatbot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,13 @@

// Function to force positioning
function forceChatbotPosition() {
// Handle all possible widget states
const allWidgets = document.querySelectorAll('.dify-chatbot-widget, [class*="dify"], [id*="dify"]');
const allWindows = document.querySelectorAll('#dify-chatbot-bubble-window, [class*="chat"], [class*="window"]');
// Only target specific chatbot elements with very specific selectors
const chatbotWidgets = document.querySelectorAll('.dify-chatbot-widget, #dify-chatbot-widget');
const chatbotWindows = document.querySelectorAll('#dify-chatbot-bubble-window, .dify-chatbot-bubble-window');
const chatbotButtons = document.querySelectorAll('#dify-chatbot-bubble-button, .dify-chatbot-bubble-button');

// Position all widget containers
allWidgets.forEach(widget => {
// Position chatbot widget containers only
chatbotWidgets.forEach(widget => {
widget.style.position = 'fixed';
widget.style.bottom = '0';
widget.style.right = '0';
Expand All @@ -80,8 +81,8 @@
widget.style.transform = 'none';
});

// Position all window elements
allWindows.forEach(window => {
// Position chatbot window elements only
chatbotWindows.forEach(window => {
window.style.position = 'fixed';
window.style.bottom = '0';
window.style.right = '0';
Expand All @@ -91,9 +92,9 @@
window.style.transform = 'none';
});

// Also handle any iframe that might be created
const iframes = document.querySelectorAll('iframe[src*="dify"], iframe[src*="udify"]');
iframes.forEach(iframe => {
// Handle chatbot iframes specifically
const chatbotIframes = document.querySelectorAll('iframe[src*="dify"], iframe[src*="udify"]');
chatbotIframes.forEach(iframe => {
iframe.style.position = 'fixed';
iframe.style.bottom = '0';
iframe.style.right = '0';
Expand All @@ -103,9 +104,9 @@
iframe.style.transform = 'none';
});

// Special handling for expanded state - target any element that might be the expanded window
const expandedElements = document.querySelectorAll('[data-state="expanded"], [class*="expanded"], [style*="position: fixed"]');
expandedElements.forEach(element => {
// Only target expanded chatbot elements
const expandedChatbotElements = document.querySelectorAll('.dify-chatbot-widget[data-state="expanded"], .dify-chatbot-widget .expanded');
expandedChatbotElements.forEach(element => {
element.style.position = 'fixed';
element.style.bottom = '0';
element.style.right = '0';
Expand All @@ -116,9 +117,9 @@
element.style.zIndex = '1000';
});

// Also force any element with a high z-index to stay at bottom
const highZIndexElements = document.querySelectorAll('[style*="z-index: 999"], [style*="z-index: 1000"], [style*="z-index: 1001"]');
highZIndexElements.forEach(element => {
// Only force positioning on chatbot elements with high z-index
const highZIndexChatbotElements = document.querySelectorAll('.dify-chatbot-widget[style*="z-index: 999"], .dify-chatbot-widget[style*="z-index: 1000"], .dify-chatbot-widget[style*="z-index: 1001"]');
highZIndexChatbotElements.forEach(element => {
if (element.style.position === 'fixed') {
element.style.bottom = '0';
element.style.right = '0';
Expand All @@ -127,9 +128,9 @@
}
});

// Make background elements more translucent to show rounded corners
const allElements = document.querySelectorAll('.dify-chatbot-widget *');
allElements.forEach(element => {
// Make chatbot background elements more translucent to show rounded corners
const chatbotElements = document.querySelectorAll('.dify-chatbot-widget *');
chatbotElements.forEach(element => {
const computedStyle = window.getComputedStyle(element);
// Look for dark backgrounds that are likely the main content area
if (computedStyle.backgroundColor &&
Expand All @@ -147,8 +148,7 @@
});

// Ensure chat button is circular
const chatButtons = document.querySelectorAll('[id*="bubble-button"], [class*="bubble-button"]');
chatButtons.forEach(button => {
chatbotButtons.forEach(button => {
button.style.borderRadius = '50%';
button.style.width = '60px';
button.style.height = '60px';
Expand Down