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