diff --git a/web/public/embed.js b/web/public/embed.js
index 46345d9b84..8bff34d851 100644
--- a/web/public/embed.js
+++ b/web/public/embed.js
@@ -11,6 +11,7 @@
const configKey = "difyChatbotConfig";
const buttonId = "dify-chatbot-bubble-button";
const iframeId = "dify-chatbot-bubble-window";
+ const config = window[configKey];
// SVG icons for open and close states
const svgIcons = {
@@ -24,7 +25,6 @@
// Main function to embed the chatbot
function embedChatbot() {
- const config = window[configKey];
if (!config || !config.token) {
console.error(`${configKey} is empty or token is not provided`);
return;
@@ -141,11 +141,19 @@
if (!targetIframe) {
createIframe();
resetIframePosition();
+ this.title = "Exit (ESC)";
displayDiv.innerHTML = svgIcons.close;
+ document.addEventListener('keydown', handleEscKey);
return;
}
targetIframe.style.display = targetIframe.style.display === "none" ? "block" : "none";
displayDiv.innerHTML = targetIframe.style.display === "none" ? svgIcons.open : svgIcons.close;
+
+ if (targetIframe.style.display === "none") {
+ document.removeEventListener('keydown', handleEscKey);
+ } else {
+ document.addEventListener('keydown', handleEscKey);
+ }
resetIframePosition();
});
@@ -220,6 +228,23 @@
}
}
- // Set the embedChatbot function to run when the body is loaded
- document.body.onload = embedChatbot;
+ // Add esc Exit keyboard event triggered
+ function handleEscKey(event) {
+ if (event.key === 'Escape') {
+ const targetIframe = document.getElementById(iframeId);
+ const button = document.getElementById(buttonId);
+ if (targetIframe && targetIframe.style.display !== 'none') {
+ targetIframe.style.display = 'none';
+ button.querySelector('div').innerHTML = svgIcons.open;
+ }
+ }
+ }
+ document.addEventListener('keydown', handleEscKey);
+
+ // Set the embedChatbot function to run when the body is loaded,Avoid infinite nesting
+ if (config?.dynamicScript) {
+ embedChatbot();
+ } else {
+ document.body.onload = embedChatbot;
+ }
})();
diff --git a/web/public/embed.min.js b/web/public/embed.min.js
index 51a78a39eb..e37111755f 100644
--- a/web/public/embed.min.js
+++ b/web/public/embed.min.js
@@ -1 +1,31 @@
-!function(){const e="difyChatbotConfig",t="dify-chatbot-bubble-button",n="dify-chatbot-bubble-window",o={open:'',close:''};document.body.onload=function(){const i=window[e];if(!i||!i.token)return void console.error(`${e} is empty or token is not provided`);const d=i.baseUrl||`https://${i.isDev?"dev.":""}udify.app`;function r(){const e=document.getElementById(n),o=document.getElementById(t);if(e&&o){const t=o.getBoundingClientRect(),n=window.innerHeight-t.bottom,i=window.innerWidth-t.right,d=t.left;e.style.bottom=`${n+t.height+5+e.clientHeight>window.innerHeight?n-e.clientHeight-5:n+t.height+5}px`,e.style.right=`${i+e.clientWidth>window.innerWidth?window.innerWidth-d-e.clientWidth:i}px`}}document.getElementById(t)||function(){const e=document.createElement("div");Object.entries(i.containerProps||{}).forEach(([t,n])=>{"className"===t?e.classList.add(...n.split(" ")):"style"===t?"object"==typeof n?Object.assign(e.style,n):e.style.cssText=n:"function"==typeof n?e.addEventListener(t.replace(/^on/,"").toLowerCase(),n):e[t]=n}),e.id=t;const s=document.createElement("style");document.head.appendChild(s),s.sheet.insertRule(`\n #${e.id} {\n position: fixed; \n bottom: var(--${e.id}-bottom, 1rem);\n right: var(--${e.id}-right, 1rem);\n left: var(--${e.id}-left, unset);\n top: var(--${e.id}-top, unset);\n width: var(--${e.id}-width, 50px);\n height: var(--${e.id}-height, 50px);\n border-radius: var(--${e.id}-border-radius, 25px); \n background-color: var(--${e.id}-bg-color, #155EEF);\n box-shadow: var(--${e.id}-box-shadow, rgba(0, 0, 0, 0.2) 0px 4px 8px 0px);\n cursor: pointer;\n z-index: 2147483647; \n transition: all 0.2s ease-in-out 0s; \n }\n `),s.sheet.insertRule(`\n #${e.id}:hover {\n transform: var(--${e.id}-hover-transform, scale(1.1));\n }\n `);const l=document.createElement("div");l.style.cssText="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2147483647;",l.innerHTML=o.open,e.appendChild(l),document.body.appendChild(e),e.addEventListener("click",function(){const e=document.getElementById(n);if(!e)return function(){const e=document.createElement("iframe");e.allow="fullscreen;microphone",e.title="dify chatbot bubble window",e.id=n,e.src=`${d}/chatbot/${i.token}`,e.style.cssText="\n border: none; position: fixed; flex-direction: column; justify-content: space-between; \n box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px; \n bottom: 5rem; right: 1rem; width: 24rem; max-width: calc(100vw - 2rem); height: 40rem; \n max-height: calc(100vh - 6rem); border-radius: 0.75rem; display: flex; z-index: 2147483647; \n overflow: hidden; left: unset; background-color: #F3F4F6;\n ",document.body.appendChild(e)}(),r(),void(l.innerHTML=o.close);e.style.display="none"===e.style.display?"block":"none",l.innerHTML="none"===e.style.display?o.open:o.close,r()}),i.draggable&&function(e,i){let d,r,s=!1;e.addEventListener("mousedown",function(t){s=!0,d=t.clientX-e.offsetLeft,r=t.clientY-e.offsetTop}),document.addEventListener("mousemove",function(l){if(!s)return;e.style.transition="none",e.style.cursor="grabbing";const c=document.getElementById(n);c&&(c.style.display="none",e.querySelector("div").innerHTML=o.open);const a=l.clientX-d,h=window.innerHeight-l.clientY-r,p=e.getBoundingClientRect(),u=window.innerWidth-p.width,C=window.innerHeight-p.height;"x"!==i&&"both"!==i||e.style.setProperty(`--${t}-left`,`${Math.max(0,Math.min(a,u))}px`),"y"!==i&&"both"!==i||e.style.setProperty(`--${t}-bottom`,`${Math.max(0,Math.min(h,C))}px`)}),document.addEventListener("mouseup",function(){s=!1,e.style.transition="",e.style.cursor="pointer"})}(e,i.dragAxis||"both")}()}}();
+!function(){const t="difyChatbotConfig",c="dify-chatbot-bubble-button",a="dify-chatbot-bubble-window",h=window[t],p={open:``,close:``};function e(){if(h&&h.token){const o=h.baseUrl||`https://${h.isDev?"dev.":""}udify.app`;function i(){var e,t,n,i=document.getElementById(a),o=document.getElementById(c);i&&o&&(o=o.getBoundingClientRect(),e=window.innerHeight-o.bottom,t=window.innerWidth-o.right,n=o.left,i.style.bottom=`${e+o.height+5+i.clientHeight>window.innerHeight?e-i.clientHeight-5:e+o.height+5}px`,i.style.right=`${t+i.clientWidth>window.innerWidth?window.innerWidth-n-i.clientWidth:t}px`)}function e(){const 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=c;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));
+ }
+ `);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=p.open,n.appendChild(t),document.body.appendChild(n),n.addEventListener("click",function(){var e=document.getElementById(a);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()):((e=document.createElement("iframe")).allow="fullscreen;microphone",e.title="dify chatbot bubble window",e.id=a,e.src=o+"/chatbot/"+h.token,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;
+ `,document.body.appendChild(e),i(),this.title="Exit (ESC)",t.innerHTML=p.close,document.addEventListener("keydown",d))}),h.draggable){var s=n;var l=h.dragAxis||"both";let o=!1,d,r;s.addEventListener("mousedown",function(e){o=!0,d=e.clientX-s.offsetLeft,r=e.clientY-s.offsetTop}),document.addEventListener("mousemove",function(e){var t,n,i;o&&(s.style.transition="none",s.style.cursor="grabbing",(t=document.getElementById(a))&&(t.style.display="none",s.querySelector("div").innerHTML=p.open),t=e.clientX-d,e=window.innerHeight-e.clientY-r,i=s.getBoundingClientRect(),n=window.innerWidth-i.width,i=window.innerHeight-i.height,"x"!==l&&"both"!==l||s.style.setProperty(`--${c}-left`,Math.max(0,Math.min(t,n))+"px"),"y"!==l&&"both"!==l||s.style.setProperty(`--${c}-bottom`,Math.max(0,Math.min(e,i))+"px"))}),document.addEventListener("mouseup",function(){o=!1,s.style.transition="",s.style.cursor="pointer"})}}document.getElementById(c)||e()}else console.error(t+" is empty or token is not provided")}function d(e){var t;"Escape"===e.key&&(e=document.getElementById(a),t=document.getElementById(c),e)&&"none"!==e.style.display&&(e.style.display="none",t.querySelector("div").innerHTML=p.open)}document.addEventListener("keydown",d),h?.dynamicScript?e():document.body.onload=e}();
\ No newline at end of file