Skip to content

Commit ac5a4ca

Browse files
patriciaflutterflowpatriciaflutterflow
authored
Merge pull request #432 from FlutterFlow/patricia/chatbot
add FlutterFlow chatbot to docs page
2 parents 2f0e907 + 8dfd178 commit ac5a4ca

File tree

2 files changed

+185
-0
lines changed

2 files changed

+185
-0
lines changed

‎docusaurus.config.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ const config: Config = {
1111
onBrokenMarkdownLinks: 'throw',
1212
onBrokenAnchors: 'throw',
1313
favicon: 'logos/favicon.png',
14+
1415
clientModules: [
1516
require.resolve('./src/js/table-helpers.js'),
17+
require.resolve('./src/js/chatbot.js'),
1618
],
1719
i18n: {
1820
defaultLocale: 'en',

‎src/js/chatbot.js

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
// Simple Dify chatbot loader
2+
(function() {
3+
if (typeof window === 'undefined') return;
4+
5+
// Set configuration
6+
window.difyChatbotConfig = {
7+
token: 'bYIppJMzMieMPDHm'
8+
};
9+
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);
15+
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.25rem !important;
22+
right: 0.25rem !important;
23+
border-radius: 50% !important;
24+
width: 50px !important;
25+
height: 50px !important;
26+
}
27+
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+
}
34+
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+
}
41+
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+
}
48+
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+
}
55+
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+
65+
// Function to force positioning
66+
function forceChatbotPosition() {
67+
// Handle all possible widget states
68+
const allWidgets = document.querySelectorAll('.dify-chatbot-widget, [class*="dify"], [id*="dify"]');
69+
const allWindows = document.querySelectorAll('#dify-chatbot-bubble-window, [class*="chat"], [class*="window"]');
70+
71+
// Position all widget containers
72+
allWidgets.forEach(widget => {
73+
widget.style.position = 'fixed';
74+
widget.style.bottom = '0';
75+
widget.style.right = '0';
76+
widget.style.top = 'auto';
77+
widget.style.left = 'auto';
78+
widget.style.zIndex = '1000';
79+
widget.style.margin = '0';
80+
widget.style.transform = 'none';
81+
});
82+
83+
// Position all window elements
84+
allWindows.forEach(window => {
85+
window.style.position = 'fixed';
86+
window.style.bottom = '0';
87+
window.style.right = '0';
88+
window.style.top = 'auto';
89+
window.style.left = 'auto';
90+
window.style.margin = '0';
91+
window.style.transform = 'none';
92+
});
93+
94+
// Also handle any iframe that might be created
95+
const iframes = document.querySelectorAll('iframe[src*="dify"], iframe[src*="udify"]');
96+
iframes.forEach(iframe => {
97+
iframe.style.position = 'fixed';
98+
iframe.style.bottom = '0';
99+
iframe.style.right = '0';
100+
iframe.style.top = 'auto';
101+
iframe.style.left = 'auto';
102+
iframe.style.margin = '0';
103+
iframe.style.transform = 'none';
104+
});
105+
106+
// Special handling for expanded state - target any element that might be the expanded window
107+
const expandedElements = document.querySelectorAll('[data-state="expanded"], [class*="expanded"], [style*="position: fixed"]');
108+
expandedElements.forEach(element => {
109+
element.style.position = 'fixed';
110+
element.style.bottom = '0';
111+
element.style.right = '0';
112+
element.style.top = 'auto';
113+
element.style.left = 'auto';
114+
element.style.margin = '0';
115+
element.style.transform = 'none';
116+
element.style.zIndex = '1000';
117+
});
118+
119+
// Also force any element with a high z-index to stay at bottom
120+
const highZIndexElements = document.querySelectorAll('[style*="z-index: 999"], [style*="z-index: 1000"], [style*="z-index: 1001"]');
121+
highZIndexElements.forEach(element => {
122+
if (element.style.position === 'fixed') {
123+
element.style.bottom = '0';
124+
element.style.right = '0';
125+
element.style.top = 'auto';
126+
element.style.left = 'auto';
127+
}
128+
});
129+
130+
// Make background elements more translucent to show rounded corners
131+
const allElements = document.querySelectorAll('.dify-chatbot-widget *');
132+
allElements.forEach(element => {
133+
const computedStyle = window.getComputedStyle(element);
134+
// Look for dark backgrounds that are likely the main content area
135+
if (computedStyle.backgroundColor &&
136+
(computedStyle.backgroundColor.includes('rgb(51, 51, 51)') ||
137+
computedStyle.backgroundColor.includes('rgb(64, 64, 64)') ||
138+
computedStyle.backgroundColor.includes('rgb(33, 33, 33)') ||
139+
computedStyle.backgroundColor.includes('#333333') ||
140+
computedStyle.backgroundColor.includes('#404040') ||
141+
computedStyle.backgroundColor.includes('#212121'))) {
142+
// Make it more translucent
143+
element.style.backgroundColor = 'rgba(51, 51, 51, 0.5)';
144+
element.style.borderRadius = '12px';
145+
element.style.overflow = 'hidden';
146+
}
147+
});
148+
149+
// Ensure chat button is circular
150+
const chatButtons = document.querySelectorAll('[id*="bubble-button"], [class*="bubble-button"]');
151+
chatButtons.forEach(button => {
152+
button.style.borderRadius = '50%';
153+
button.style.width = '60px';
154+
button.style.height = '60px';
155+
});
156+
}
157+
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);
164+
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+
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

Comments
 (0)