From 279f1c986f2838b24af3e3d0ad1a124b9107ad58 Mon Sep 17 00:00:00 2001 From: "Charlie.Wei" Date: Wed, 17 Jul 2024 20:52:44 +0800 Subject: [PATCH] embed.js add esc exit and fix avoid infinite nesting (#6360) Co-authored-by: luowei --- web/public/embed.js | 31 ++++++++++++++++++++++++++++--- web/public/embed.min.js | 32 +++++++++++++++++++++++++++++++- 2 files changed, 59 insertions(+), 4 deletions(-) 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:'\n \n ',close:'\n \n '};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