From ecd6cbaee67b6447cf1d11b49a3017ce69b80694 Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Tue, 18 Jul 2023 09:45:17 +0800 Subject: [PATCH] Fix/use embedded chatbot with no track mode (#582) --- web/app/components/browser-initor.tsx | 52 +++++++++++++++++++++++++++ web/app/layout.tsx | 11 +++--- web/public/embed.js | 2 +- web/public/embed.min.js | 2 +- 4 files changed, 61 insertions(+), 6 deletions(-) create mode 100644 web/app/components/browser-initor.tsx diff --git a/web/app/components/browser-initor.tsx b/web/app/components/browser-initor.tsx new file mode 100644 index 0000000000..711ff62a94 --- /dev/null +++ b/web/app/components/browser-initor.tsx @@ -0,0 +1,52 @@ +'use client' + +class StorageMock { + data: Record + + constructor() { + this.data = {} as Record + } + + setItem(name: string, value: string) { + this.data[name] = value + } + + getItem(name: string) { + return this.data[name] || null + } + + removeItem(name: string) { + delete this.data[name] + } + + clear() { + this.data = {} + } +} + +let localStorage, sessionStorage + +try { + localStorage = globalThis.localStorage + sessionStorage = globalThis.sessionStorage +} +catch (e) { + localStorage = new StorageMock() + sessionStorage = new StorageMock() +} + +Object.defineProperty(globalThis, 'localStorage', { + value: localStorage, +}) + +Object.defineProperty(globalThis, 'sessionStorage', { + value: sessionStorage, +}) + +const BrowerInitor = ({ + children, +}: { children: React.ReactElement }) => { + return children +} + +export default BrowerInitor diff --git a/web/app/layout.tsx b/web/app/layout.tsx index dee605b88b..0f3ac793f3 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -1,4 +1,5 @@ import I18nServer from './components/i18n-server' +import BrowerInitor from './components/browser-initor' import SentryInitor from './components/sentry-initor' import { getLocaleOnServer } from '@/i18n/server' @@ -25,10 +26,12 @@ const LocaleLayout = ({ data-public-edition={process.env.NEXT_PUBLIC_EDITION} data-public-sentry-dsn={process.env.NEXT_PUBLIC_SENTRY_DSN} > - - {/* @ts-expect-error Async Server Component */} - {children} - + + + {/* @ts-expect-error Async Server Component */} + {children} + + ) diff --git a/web/public/embed.js b/web/public/embed.js index 9051d30684..03022afba2 100644 --- a/web/public/embed.js +++ b/web/public/embed.js @@ -54,7 +54,7 @@ async function embedChatbot () { iframe.title = "dify chatbot bubble window" iframe.id = 'dify-chatbot-bubble-window' iframe.src = `https://${isDev ? 'dev.' : ''}udify.app/chatbot/${difyChatbotConfig.token}`; - iframe.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; height: 40rem; border-radius: 0.75rem; display: flex; z-index: 2147483647; overflow: hidden; left: unset;' + iframe.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; height: 40rem; border-radius: 0.75rem; display: flex; z-index: 2147483647; overflow: hidden; left: unset; background-color: #F3F4F6;' document.body.appendChild(iframe); } diff --git a/web/public/embed.min.js b/web/public/embed.min.js index ce800b764e..8d56b3c947 100644 --- a/web/public/embed.min.js +++ b/web/public/embed.min.js @@ -27,4 +27,4 @@ async function embedChatbot(){const t=window.difyChatbotConfig;if(t&&t.token){co stroke-linecap="round" stroke-linejoin="round" /> - `;if(!document.getElementById("dify-chatbot-bubble-button")){var e=document.createElement("div");e.id="dify-chatbot-bubble-button",e.style.cssText="position: fixed; bottom: 1rem; right: 1rem; width: 50px; height: 50px; border-radius: 25px; background-color: #155EEF; 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; left: unset; transform: scale(1); :hover {transform: scale(1.1);}";const d=document.createElement("div");d.style.cssText="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2147483647;",d.innerHTML=n,e.appendChild(d),document.body.appendChild(e),e.addEventListener("click",function(){var e=document.getElementById("dify-chatbot-bubble-window");e?"none"===e.style.display?(e.style.display="block",d.innerHTML=i):(e.style.display="none",d.innerHTML=n):((e=document.createElement("iframe")).allow="fullscreen;microphone",e.title="dify chatbot bubble window",e.id="dify-chatbot-bubble-window",e.src=`https://${o?"dev.":""}udify.app/chatbot/`+t.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; height: 40rem; border-radius: 0.75rem; display: flex; z-index: 2147483647; overflow: hidden; left: unset;",document.body.appendChild(e),d.innerHTML=i)})}}else console.error("difyChatbotConfig is empty or token is not provided")}document.body.onload=embedChatbot; \ No newline at end of file + `;if(!document.getElementById("dify-chatbot-bubble-button")){var e=document.createElement("div");e.id="dify-chatbot-bubble-button",e.style.cssText="position: fixed; bottom: 1rem; right: 1rem; width: 50px; height: 50px; border-radius: 25px; background-color: #155EEF; 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; left: unset; transform: scale(1); :hover {transform: scale(1.1);}";const d=document.createElement("div");d.style.cssText="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2147483647;",d.innerHTML=n,e.appendChild(d),document.body.appendChild(e),e.addEventListener("click",function(){var e=document.getElementById("dify-chatbot-bubble-window");e?"none"===e.style.display?(e.style.display="block",d.innerHTML=i):(e.style.display="none",d.innerHTML=n):((e=document.createElement("iframe")).allow="fullscreen;microphone",e.title="dify chatbot bubble window",e.id="dify-chatbot-bubble-window",e.src=`https://${o?"dev.":""}udify.app/chatbot/`+t.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; height: 40rem; border-radius: 0.75rem; display: flex; z-index: 2147483647; overflow: hidden; left: unset; background-color: #F3F4F6;",document.body.appendChild(e),d.innerHTML=i)})}}else console.error("difyChatbotConfig is empty or token is not provided")}document.body.onload=embedChatbot; \ No newline at end of file