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+ // // Set configuration
6+ // window.difyChatbotConfig = {
7+ // token: 'bYIppJMzMieMPDHm'
8+ // };
99
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 ) ;
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);
1515
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- }
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+ // }
2727
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- }
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+ // }
3434
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- }
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+ // }
4141
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- }
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+ // }
4848
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- }
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+ // }
5555
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 ) ;
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);
6464
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' ) ;
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');
7171
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- } ) ;
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+ // });
8383
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- } ) ;
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+ // });
9494
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- } ) ;
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+ // });
106106
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- } ) ;
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+ // });
119119
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- } ) ;
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+ // });
130130
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- } ) ;
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+ // });
149149
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- }
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+ // }
157157
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 ) ;
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);
164164
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 } ) ;
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 });
173173
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- } ) ( ) ;
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+ // })();
0 commit comments