diff --git a/web/public/embed.js b/web/public/embed.js
index 8ed7a67dc8a311..3c2735b6fc8d1f 100644
--- a/web/public/embed.js
+++ b/web/public/embed.js
@@ -69,38 +69,47 @@
iframe.id = iframeId;
iframe.src = iframeUrl;
iframe.style.cssText = `
- border: none; position: fixed; flex-direction: column; justify-content: space-between;
+ border: none; position: absolute; flex-direction: column; justify-content: space-between;
box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px;
- bottom: 5rem; right: 1rem; width: 24rem; max-width: calc(100vw - 2rem); height: 40rem;
+ bottom: 55px; right: 0; width: 24rem; max-width: calc(100vw - 2rem); height: 40rem;
max-height: calc(100vh - 6rem); border-radius: 0.75rem; display: flex; z-index: 2147483647;
overflow: hidden; left: unset; background-color: #F3F4F6;user-select: none;
`;
- document.body.appendChild(iframe);
+ return iframe;
}
// Function to reset the iframe position
function resetIframePosition() {
+ if (window.innerWidth <= 640)
+ return
+
const targetIframe = document.getElementById(iframeId);
const targetButton = document.getElementById(buttonId);
if (targetIframe && targetButton) {
const buttonRect = targetButton.getBoundingClientRect();
- const buttonBottom = window.innerHeight - buttonRect.bottom;
- const buttonRight = window.innerWidth - buttonRect.right;
- const buttonLeft = buttonRect.left;
-
- // Adjust iframe position to stay within viewport
- targetIframe.style.bottom = `${
- buttonBottom + buttonRect.height + 5 + targetIframe.clientHeight > window.innerHeight
- ? buttonBottom - targetIframe.clientHeight - 5
- : buttonBottom + buttonRect.height + 5
- }px`;
-
- targetIframe.style.right = `${
- buttonRight + targetIframe.clientWidth > window.innerWidth
- ? window.innerWidth - buttonLeft - targetIframe.clientWidth
- : buttonRight
- }px`;
+
+ const buttonInBottom = buttonRect.top - 5 > targetIframe.clientHeight
+
+ if (buttonInBottom) {
+ targetIframe.style.bottom = `${buttonRect.height + 5}px`;
+ targetIframe.style.top = 'unset';
+ }
+ else {
+ targetIframe.style.bottom = 'unset';
+ targetIframe.style.top = `${buttonRect.height + 5}px`;
+ }
+
+ const buttonInRight = buttonRect.right > targetIframe.clientWidth;
+
+ if (buttonInRight) {
+ targetIframe.style.right = '0';
+ targetIframe.style.left = 'unset';
+ }
+ else {
+ targetIframe.style.right = 'unset';
+ targetIframe.style.left = 0;
+ }
}
}
@@ -146,12 +155,6 @@
box-shadow: var(--${containerDiv.id}-box-shadow, rgba(0, 0, 0, 0.2) 0px 4px 8px 0px);
cursor: pointer;
z-index: 2147483647;
- transition: all 0.2s ease-in-out 0s;
- }
- `);
- styleSheet.sheet.insertRule(`
- #${containerDiv.id}:hover {
- transform: var(--${containerDiv.id}-hover-transform, scale(1.1));
}
`);
@@ -167,7 +170,7 @@
containerDiv.addEventListener("click", function () {
const targetIframe = document.getElementById(iframeId);
if (!targetIframe) {
- createIframe();
+ containerDiv.appendChild(createIframe());
resetIframePosition();
this.title = "Exit (ESC)";
displayDiv.innerHTML = svgIcons.close;
@@ -255,9 +258,6 @@
if (!document.getElementById(buttonId)) {
createButton();
}
-
- createIframe();
- document.getElementById(iframeId).style.display = 'none';
}
// Add esc Exit keyboard event triggered
@@ -279,4 +279,4 @@
} else {
document.body.onload = embedChatbot;
}
-})();
+})();
\ No newline at end of file
diff --git a/web/public/embed.min.js b/web/public/embed.min.js
index 0e023cb5d19704..eb2085814883b9 100644
--- a/web/public/embed.min.js
+++ b/web/public/embed.min.js
@@ -1,31 +1,26 @@
-(()=>{let t="difyChatbotConfig",a="dify-chatbot-bubble-button",c="dify-chatbot-bubble-window",h=window[t],p={open:``,close:``};async function e(){if(h&&h.token){var e=new URLSearchParams(await(async()=>{var e=h?.inputs||{};let n={};return await Promise.all(Object.entries(e).map(async([e,t])=>{n[e]=(e=t,e=(new TextEncoder).encode(e),e=new Response(new Blob([e]).stream().pipeThrough(new CompressionStream("gzip"))).arrayBuffer(),e=new Uint8Array(await e),await btoa(String.fromCharCode(...e)))})),n})());let t=`${h.baseUrl||`https://${h.isDev?"dev.":""}udify.app`}/chatbot/${h.token}?`+e;function o(){var e=document.createElement("iframe");e.allow="fullscreen;microphone",e.title="dify chatbot bubble window",e.id=c,e.src=t,e.style.cssText=`
- border: none; position: fixed; flex-direction: column; justify-content: space-between;
- box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px;
- bottom: 5rem; right: 1rem; width: 24rem; max-width: calc(100vw - 2rem); height: 40rem;
- max-height: calc(100vh - 6rem); border-radius: 0.75rem; display: flex; z-index: 2147483647;
- overflow: hidden; left: unset; background-color: #F3F4F6;user-select: none;
- `,document.body.appendChild(e)}function i(){var e,t,n,o=document.getElementById(c),i=document.getElementById(a);o&&i&&(i=i.getBoundingClientRect(),e=window.innerHeight-i.bottom,t=window.innerWidth-i.right,n=i.left,o.style.bottom=`${e+i.height+5+o.clientHeight>window.innerHeight?e-o.clientHeight-5:e+i.height+5}px`,o.style.right=`${t+o.clientWidth>window.innerWidth?window.innerWidth-n-o.clientWidth:t}px`)}function n(){let n=document.createElement("div");Object.entries(h.containerProps||{}).forEach(([e,t])=>{"className"===e?n.classList.add(...t.split(" ")):"style"===e?"object"==typeof t?Object.assign(n.style,t):n.style.cssText=t:"function"==typeof t?n.addEventListener(e.replace(/^on/,"").toLowerCase(),t):n[e]=t}),n.id=a;var e=document.createElement("style");document.head.appendChild(e),e.sheet.insertRule(`
- #${n.id} {
- position: fixed;
- bottom: var(--${n.id}-bottom, 1rem);
- right: var(--${n.id}-right, 1rem);
- left: var(--${n.id}-left, unset);
- top: var(--${n.id}-top, unset);
- width: var(--${n.id}-width, 50px);
- height: var(--${n.id}-height, 50px);
- border-radius: var(--${n.id}-border-radius, 25px);
- background-color: var(--${n.id}-bg-color, #155EEF);
- box-shadow: var(--${n.id}-box-shadow, rgba(0, 0, 0, 0.2) 0px 4px 8px 0px);
- cursor: pointer;
- z-index: 2147483647;
- transition: all 0.2s ease-in-out 0s;
- }
- `),e.sheet.insertRule(`
- #${n.id}:hover {
- transform: var(--${n.id}-hover-transform, scale(1.1));
- }
- `);let t=document.createElement("div");if(t.style.cssText="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2147483647;",t.innerHTML=p.open,n.appendChild(t),document.body.appendChild(n),n.addEventListener("click",function(){var e=document.getElementById(c);e?(e.style.display="none"===e.style.display?"block":"none",t.innerHTML="none"===e.style.display?p.open:p.close,"none"===e.style.display?document.removeEventListener("keydown",d):document.addEventListener("keydown",d),i()):(o(),i(),this.title="Exit (ESC)",t.innerHTML=p.close,document.addEventListener("keydown",d))}),h.draggable){var s=n;var l=h.dragAxis||"both";let i=!1,d,r;s.addEventListener("mousedown",function(e){i=!0,d=e.clientX-s.offsetLeft,r=e.clientY-s.offsetTop}),document.addEventListener("mousemove",function(e){var t,n,o;i&&(s.style.transition="none",s.style.cursor="grabbing",(t=document.getElementById(c))&&(t.style.display="none",s.querySelector("div").innerHTML=p.open),t=e.clientX-d,e=window.innerHeight-e.clientY-r,o=s.getBoundingClientRect(),n=window.innerWidth-o.width,o=window.innerHeight-o.height,"x"!==l&&"both"!==l||s.style.setProperty(`--${a}-left`,Math.max(0,Math.min(t,n))+"px"),"y"!==l&&"both"!==l||s.style.setProperty(`--${a}-bottom`,Math.max(0,Math.min(e,o))+"px"))}),document.addEventListener("mouseup",function(){i=!1,s.style.transition="",s.style.cursor="pointer"})}}2048
+
+ `,close:``};async function e(){if(p&&p.token){var e=new URLSearchParams(await async function(){var e=p?.inputs||{};const n={};return await Promise.all(Object.entries(e).map(async([e,t])=>{n[e]=(e=t,e=(new TextEncoder).encode(e),e=new Response(new Blob([e]).stream().pipeThrough(new CompressionStream("gzip"))).arrayBuffer(),e=new Uint8Array(await e),await btoa(String.fromCharCode(...e)))})),n}());const i=`${p.baseUrl||`https://${p.isDev?"dev.":""}udify.app`}/chatbot/${p.token}?`+e;function o(){var e,t;window.innerWidth<=640||(e=document.getElementById(c),t=document.getElementById(a),e&&t&&((t=t.getBoundingClientRect()).top-5>e.clientHeight?(e.style.bottom=t.height+5+"px",e.style.top="unset"):(e.style.bottom="unset",e.style.top=t.height+5+"px"),t.right>e.clientWidth?(e.style.right="0",e.style.left="unset"):(e.style.right="unset",e.style.left=0)))}function t(){const n=document.createElement("div");Object.entries(p.containerProps||{}).forEach(([e,t])=>{"className"===e?n.classList.add(...t.split(" ")):"style"===e?"object"==typeof t?Object.assign(n.style,t):n.style.cssText=t:"function"==typeof t?n.addEventListener(e.replace(/^on/,"").toLowerCase(),t):n[e]=t}),n.id=a;var e=document.createElement("style");document.head.appendChild(e),e.sheet.insertRule(`
+ #${n.id} {
+ position: fixed;
+ bottom: var(--${n.id}-bottom, 1rem);
+ right: var(--${n.id}-right, 1rem);
+ left: var(--${n.id}-left, unset);
+ top: var(--${n.id}-top, unset);
+ width: var(--${n.id}-width, 50px);
+ height: var(--${n.id}-height, 50px);
+ border-radius: var(--${n.id}-border-radius, 25px);
+ background-color: var(--${n.id}-bg-color, #155EEF);
+ box-shadow: var(--${n.id}-box-shadow, rgba(0, 0, 0, 0.2) 0px 4px 8px 0px);
+ cursor: pointer;
+ z-index: 2147483647;
+ }
+ `);const t=document.createElement("div");if(t.style.cssText="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2147483647;",t.innerHTML=h.open,n.appendChild(t),document.body.appendChild(n),n.addEventListener("click",function(){var e=document.getElementById(c);e?(e.style.display="none"===e.style.display?"block":"none",t.innerHTML="none"===e.style.display?h.open:h.close,"none"===e.style.display?document.removeEventListener("keydown",d):document.addEventListener("keydown",d),o()):(n.appendChild(((e=document.createElement("iframe")).allow="fullscreen;microphone",e.title="dify chatbot bubble window",e.id=c,e.src=i,e.style.cssText=`
+ border: none; position: absolute; flex-direction: column; justify-content: space-between;
+ box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px;
+ bottom: 55px; right: 0; width: 24rem; max-width: calc(100vw - 2rem); height: 40rem;
+ max-height: calc(100vh - 6rem); border-radius: 0.75rem; display: flex; z-index: 2147483647;
+ overflow: hidden; left: unset; background-color: #F3F4F6;user-select: none;
+ `,e)),o(),this.title="Exit (ESC)",t.innerHTML=h.close,document.addEventListener("keydown",d))}),p.draggable){var s=n;var l=p.dragAxis||"both";let i=!1,d,r;s.addEventListener("mousedown",function(e){i=!0,d=e.clientX-s.offsetLeft,r=e.clientY-s.offsetTop}),document.addEventListener("mousemove",function(e){var t,n,o;i&&(s.style.transition="none",s.style.cursor="grabbing",(t=document.getElementById(c))&&(t.style.display="none",s.querySelector("div").innerHTML=h.open),t=e.clientX-d,e=window.innerHeight-e.clientY-r,o=s.getBoundingClientRect(),n=window.innerWidth-o.width,o=window.innerHeight-o.height,"x"!==l&&"both"!==l||s.style.setProperty(`--${a}-left`,Math.max(0,Math.min(t,n))+"px"),"y"!==l&&"both"!==l||s.style.setProperty(`--${a}-bottom`,Math.max(0,Math.min(e,o))+"px"))}),document.addEventListener("mouseup",function(){i=!1,s.style.transition="",s.style.cursor="pointer"})}}2048