Skip to content

Commit 33789e1

Browse files
patriciaflutterflowpatriciaflutterflow
committed
added enabled flag
1 parent d8f73e1 commit 33789e1

File tree

1 file changed

+172
-164
lines changed

1 file changed

+172
-164
lines changed

‎src/js/chatbot.js‎

Lines changed: 172 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,191 @@
1-
// // Simple Dify chatbot loader
2-
// (function() {
3-
// if (typeof window === 'undefined') return;
1+
// Simple Dify chatbot loader
2+
(function() {
3+
if (typeof window === 'undefined') return;
44

5-
// // Set configuration
6-
// window.difyChatbotConfig = {
7-
// token: 'bYIppJMzMieMPDHm'
8-
// };
5+
// TEMPORARY DISABLE FLAG - Set to false to disable chatbot
6+
const CHATBOT_ENABLED = false;
7+
8+
if (!CHATBOT_ENABLED) {
9+
console.log('Chatbot is temporarily disabled');
10+
return;
11+
}
912

10-
// // Load the script
11-
// const script = document.createElement('script');
12-
// script.src = 'https://udify.app/embed.min.js';
13-
// script.defer = true;
14-
// document.head.appendChild(script);
13+
// Set configuration
14+
window.difyChatbotConfig = {
15+
token: 'bYIppJMzMieMPDHm'
16+
};
1517

16-
// // Add custom styles for purple color and rounded corners
17-
// const style = document.createElement('style');
18-
// style.textContent = `
19-
// #dify-chatbot-bubble-button {
20-
// background-color: #4B39EF !important;
21-
// bottom: 0.80rem !important;
22-
// right: 0.80rem !important;
23-
// border-radius: 50% !important;
24-
// width: 45px !important;
25-
// height: 45px !important;
26-
// }
18+
// Load the script
19+
const script = document.createElement('script');
20+
script.src = 'https://udify.app/embed.min.js';
21+
script.defer = true;
22+
document.head.appendChild(script);
23+
24+
// Add custom styles for purple color and rounded corners
25+
const style = document.createElement('style');
26+
style.textContent = `
27+
#dify-chatbot-bubble-button {
28+
background-color: #4B39EF !important;
29+
bottom: 0.80rem !important;
30+
right: 0.80rem !important;
31+
border-radius: 50% !important;
32+
width: 45px !important;
33+
height: 45px !important;
34+
}
2735
28-
// /* Make the main chat window background more translucent to show rounded corners */
29-
// .dify-chatbot-widget #dify-chatbot-bubble-window {
30-
// background-color: rgba(51, 51, 51, 0.6) !important;
31-
// border-radius: 12px !important;
32-
// overflow: hidden !important;
33-
// }
36+
/* Make the main chat window background more translucent to show rounded corners */
37+
.dify-chatbot-widget #dify-chatbot-bubble-window {
38+
background-color: rgba(51, 51, 51, 0.6) !important;
39+
border-radius: 12px !important;
40+
overflow: hidden !important;
41+
}
3442
35-
// /* Also target any main container backgrounds */
36-
// .dify-chatbot-widget > div {
37-
// background-color: rgba(51, 51, 51, 0.6) !important;
38-
// border-radius: 12px !important;
39-
// overflow: hidden !important;
40-
// }
43+
/* Also target any main container backgrounds */
44+
.dify-chatbot-widget > div {
45+
background-color: rgba(51, 51, 51, 0.6) !important;
46+
border-radius: 12px !important;
47+
overflow: hidden !important;
48+
}
4149
42-
// /* Target the main chat container */
43-
// .dify-chatbot-widget .dify-chatbot-bubble-window {
44-
// background-color: rgba(51, 51, 51, 0.6) !important;
45-
// border-radius: 12px !important;
46-
// overflow: hidden !important;
47-
// }
50+
/* Target the main chat container */
51+
.dify-chatbot-widget .dify-chatbot-bubble-window {
52+
background-color: rgba(51, 51, 51, 0.6) !important;
53+
border-radius: 12px !important;
54+
overflow: hidden !important;
55+
}
4856
49-
// /* Target any chat window elements */
50-
// [id*="chat"], [class*="chat-window"], [class*="bubble-window"] {
51-
// background-color: rgba(51, 51, 51, 0.6) !important;
52-
// border-radius: 12px !important;
53-
// overflow: hidden !important;
54-
// }
57+
/* Target any chat window elements */
58+
[id*="chat"], [class*="chat-window"], [class*="bubble-window"] {
59+
background-color: rgba(51, 51, 51, 0.6) !important;
60+
border-radius: 12px !important;
61+
overflow: hidden !important;
62+
}
5563
56-
// /* Ensure the chat button is perfectly circular */
57-
// [id*="bubble-button"], [class*="bubble-button"] {
58-
// border-radius: 50% !important;
59-
// width: 60px !important;
60-
// height: 60px !important;
61-
// }
62-
// `;
63-
// document.head.appendChild(style);
64+
/* Ensure the chat button is perfectly circular */
65+
[id*="bubble-button"], [class*="bubble-button"] {
66+
border-radius: 50% !important;
67+
width: 60px !important;
68+
height: 60px !important;
69+
}
70+
`;
71+
document.head.appendChild(style);
6472

65-
// // Function to force positioning
66-
// function forceChatbotPosition() {
67-
// // Only target specific chatbot elements with very specific selectors
68-
// const chatbotWidgets = document.querySelectorAll('.dify-chatbot-widget, #dify-chatbot-widget');
69-
// const chatbotWindows = document.querySelectorAll('#dify-chatbot-bubble-window, .dify-chatbot-bubble-window');
70-
// const chatbotButtons = document.querySelectorAll('#dify-chatbot-bubble-button, .dify-chatbot-bubble-button');
73+
// Function to force positioning
74+
function forceChatbotPosition() {
75+
// Only target specific chatbot elements with very specific selectors
76+
const chatbotWidgets = document.querySelectorAll('.dify-chatbot-widget, #dify-chatbot-widget');
77+
const chatbotWindows = document.querySelectorAll('#dify-chatbot-bubble-window, .dify-chatbot-bubble-window');
78+
const chatbotButtons = document.querySelectorAll('#dify-chatbot-bubble-button, .dify-chatbot-bubble-button');
7179

72-
// // Position chatbot widget containers only
73-
// chatbotWidgets.forEach(widget => {
74-
// widget.style.position = 'fixed';
75-
// widget.style.bottom = '0';
76-
// widget.style.right = '0';
77-
// widget.style.top = 'auto';
78-
// widget.style.left = 'auto';
79-
// widget.style.zIndex = '1000';
80-
// widget.style.margin = '0';
81-
// widget.style.transform = 'none';
82-
// });
80+
// Position chatbot widget containers only
81+
chatbotWidgets.forEach(widget => {
82+
widget.style.position = 'fixed';
83+
widget.style.bottom = '0';
84+
widget.style.right = '0';
85+
widget.style.top = 'auto';
86+
widget.style.left = 'auto';
87+
widget.style.zIndex = '1000';
88+
widget.style.margin = '0';
89+
widget.style.transform = 'none';
90+
});
8391

84-
// // Position chatbot window elements only
85-
// chatbotWindows.forEach(window => {
86-
// window.style.position = 'fixed';
87-
// window.style.bottom = '0';
88-
// window.style.right = '0';
89-
// window.style.top = 'auto';
90-
// window.style.left = 'auto';
91-
// window.style.margin = '0';
92-
// window.style.transform = 'none';
93-
// });
92+
// Position chatbot window elements only
93+
chatbotWindows.forEach(window => {
94+
window.style.position = 'fixed';
95+
window.style.bottom = '0';
96+
window.style.right = '0';
97+
window.style.top = 'auto';
98+
window.style.left = 'auto';
99+
window.style.margin = '0';
100+
window.style.transform = 'none';
101+
});
94102

95-
// // Handle chatbot iframes specifically
96-
// const chatbotIframes = document.querySelectorAll('iframe[src*="dify"], iframe[src*="udify"]');
97-
// chatbotIframes.forEach(iframe => {
98-
// iframe.style.position = 'fixed';
99-
// iframe.style.bottom = '0';
100-
// iframe.style.right = '0';
101-
// iframe.style.top = 'auto';
102-
// iframe.style.left = 'auto';
103-
// iframe.style.margin = '0';
104-
// iframe.style.transform = 'none';
105-
// });
103+
// Handle chatbot iframes specifically
104+
const chatbotIframes = document.querySelectorAll('iframe[src*="dify"], iframe[src*="udify"]');
105+
chatbotIframes.forEach(iframe => {
106+
iframe.style.position = 'fixed';
107+
iframe.style.bottom = '0';
108+
iframe.style.right = '0';
109+
iframe.style.top = 'auto';
110+
iframe.style.left = 'auto';
111+
iframe.style.margin = '0';
112+
iframe.style.transform = 'none';
113+
});
106114

107-
// // Only target expanded chatbot elements
108-
// const expandedChatbotElements = document.querySelectorAll('.dify-chatbot-widget[data-state="expanded"], .dify-chatbot-widget .expanded');
109-
// expandedChatbotElements.forEach(element => {
110-
// element.style.position = 'fixed';
111-
// element.style.bottom = '0';
112-
// element.style.right = '0';
113-
// element.style.top = 'auto';
114-
// element.style.left = 'auto';
115-
// element.style.margin = '0';
116-
// element.style.transform = 'none';
117-
// element.style.zIndex = '1000';
118-
// });
115+
// Only target expanded chatbot elements
116+
const expandedChatbotElements = document.querySelectorAll('.dify-chatbot-widget[data-state="expanded"], .dify-chatbot-widget .expanded');
117+
expandedChatbotElements.forEach(element => {
118+
element.style.position = 'fixed';
119+
element.style.bottom = '0';
120+
element.style.right = '0';
121+
element.style.top = 'auto';
122+
element.style.left = 'auto';
123+
element.style.margin = '0';
124+
element.style.transform = 'none';
125+
element.style.zIndex = '1000';
126+
});
119127

120-
// // Only force positioning on chatbot elements with high z-index
121-
// 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"]');
122-
// highZIndexChatbotElements.forEach(element => {
123-
// if (element.style.position === 'fixed') {
124-
// element.style.bottom = '0';
125-
// element.style.right = '0';
126-
// element.style.top = 'auto';
127-
// element.style.left = 'auto';
128-
// }
129-
// });
128+
// Only force positioning on chatbot elements with high z-index
129+
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"]');
130+
highZIndexChatbotElements.forEach(element => {
131+
if (element.style.position === 'fixed') {
132+
element.style.bottom = '0';
133+
element.style.right = '0';
134+
element.style.top = 'auto';
135+
element.style.left = 'auto';
136+
}
137+
});
130138

131-
// // Make chatbot background elements more translucent to show rounded corners
132-
// const chatbotElements = document.querySelectorAll('.dify-chatbot-widget *');
133-
// chatbotElements.forEach(element => {
134-
// const computedStyle = window.getComputedStyle(element);
135-
// // Look for dark backgrounds that are likely the main content area
136-
// if (computedStyle.backgroundColor &&
137-
// (computedStyle.backgroundColor.includes('rgb(51, 51, 51)') ||
138-
// computedStyle.backgroundColor.includes('rgb(64, 64, 64)') ||
139-
// computedStyle.backgroundColor.includes('rgb(33, 33, 33)') ||
140-
// computedStyle.backgroundColor.includes('#333333') ||
141-
// computedStyle.backgroundColor.includes('#404040') ||
142-
// computedStyle.backgroundColor.includes('#212121'))) {
143-
// // Make it more translucent
144-
// element.style.backgroundColor = 'rgba(51, 51, 51, 0.5)';
145-
// element.style.borderRadius = '12px';
146-
// element.style.overflow = 'hidden';
147-
// }
148-
// });
139+
// Make chatbot background elements more translucent to show rounded corners
140+
const chatbotElements = document.querySelectorAll('.dify-chatbot-widget *');
141+
chatbotElements.forEach(element => {
142+
const computedStyle = window.getComputedStyle(element);
143+
// Look for dark backgrounds that are likely the main content area
144+
if (computedStyle.backgroundColor &&
145+
(computedStyle.backgroundColor.includes('rgb(51, 51, 51)') ||
146+
computedStyle.backgroundColor.includes('rgb(64, 64, 64)') ||
147+
computedStyle.backgroundColor.includes('rgb(33, 33, 33)') ||
148+
computedStyle.backgroundColor.includes('#333333') ||
149+
computedStyle.backgroundColor.includes('#404040') ||
150+
computedStyle.backgroundColor.includes('#212121'))) {
151+
// Make it more translucent
152+
element.style.backgroundColor = 'rgba(51, 51, 51, 0.5)';
153+
element.style.borderRadius = '12px';
154+
element.style.overflow = 'hidden';
155+
}
156+
});
149157

150-
// // Ensure chat button is circular
151-
// chatbotButtons.forEach(button => {
152-
// button.style.borderRadius = '50%';
153-
// button.style.width = '60px';
154-
// button.style.height = '60px';
155-
// });
156-
// }
158+
// Ensure chat button is circular
159+
chatbotButtons.forEach(button => {
160+
button.style.borderRadius = '50%';
161+
button.style.width = '60px';
162+
button.style.height = '60px';
163+
});
164+
}
157165

158-
// // Apply positioning after script loads
159-
// setTimeout(forceChatbotPosition, 1000);
160-
// setTimeout(forceChatbotPosition, 2000);
161-
// setTimeout(forceChatbotPosition, 3000);
162-
// setTimeout(forceChatbotPosition, 4000);
163-
// setTimeout(forceChatbotPosition, 5000);
166+
// Apply positioning after script loads
167+
setTimeout(forceChatbotPosition, 1000);
168+
setTimeout(forceChatbotPosition, 2000);
169+
setTimeout(forceChatbotPosition, 3000);
170+
setTimeout(forceChatbotPosition, 4000);
171+
setTimeout(forceChatbotPosition, 5000);
164172

165-
// // Also watch for changes
166-
// const observer = new MutationObserver(() => {
167-
// forceChatbotPosition();
168-
// // Run again after a short delay to catch any delayed changes
169-
// setTimeout(forceChatbotPosition, 100);
170-
// setTimeout(forceChatbotPosition, 500);
171-
// });
172-
// observer.observe(document.body, { childList: true, subtree: true, attributes: true });
173+
// Also watch for changes
174+
const observer = new MutationObserver(() => {
175+
forceChatbotPosition();
176+
// Run again after a short delay to catch any delayed changes
177+
setTimeout(forceChatbotPosition, 100);
178+
setTimeout(forceChatbotPosition, 500);
179+
});
180+
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
173181

174-
// // Also run continuously for the first 10 seconds
175-
// let runCount = 0;
176-
// const continuousInterval = setInterval(() => {
177-
// forceChatbotPosition();
178-
// runCount++;
179-
// if (runCount > 20) { // Stop after 10 seconds (20 * 500ms)
180-
// clearInterval(continuousInterval);
181-
// }
182-
// }, 500);
183-
// })();
182+
// Also run continuously for the first 10 seconds
183+
let runCount = 0;
184+
const continuousInterval = setInterval(() => {
185+
forceChatbotPosition();
186+
runCount++;
187+
if (runCount > 20) { // Stop after 10 seconds (20 * 500ms)
188+
clearInterval(continuousInterval);
189+
}
190+
}, 500);
191+
})();

0 commit comments

Comments
 (0)