Fix/use embedded chatbot with no track mode (#582)

web/app/components/browser-initor.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+class StorageMock {
+  data: Record<string, string>
+
+  constructor() {
+    this.data = {} as Record<string, string>
+  }
+
+  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

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}
       >
-        <SentryInitor>
-          {/* @ts-expect-error Async Server Component */}
-          <I18nServer locale={locale}>{children}</I18nServer>
-        </SentryInitor>
+        <BrowerInitor>
+          <SentryInitor>
+            {/* @ts-expect-error Async Server Component */}
+            <I18nServer locale={locale}>{children}</I18nServer>
+          </SentryInitor>
+        </BrowerInitor>
       </body>
     </html>
   )

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);
   }
 

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"
           />
-        </svg>`;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;
+        </svg>`;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;