Chatwoot, Arcane deployment

components/chatwidget.tsx

@@ -1,20 +1,64 @@
 'use client'
 
-import Script from 'next/script'
+import { useEffect } from 'react'
 
 export function ChatWidget() {
-  return (
-    <>
-      <Script
-        defer
-        src="http://odoo.cloudrite.co.nz/im_livechat/loader/2"
-        strategy="afterInteractive"
-      />
-      <Script
-        defer
-        src="http://odoo.cloudrite.co.nz/im_livechat/assets_embed.js"
-        strategy="afterInteractive"
-      />
-    </>
-  )
+  useEffect(() => {
+    let cancelled = false
+
+    // Fetch the token at runtime from the server so it can come from the
+    // container environment (compose env_file) instead of being inlined
+    // into the client bundle at build time.
+    fetch('/api/chatwoot')
+      .then((res) => (res.ok ? res.json() : null))
+      .then((config: { token: string | null } | null) => {
+        if (cancelled) return
+
+        const chatwootToken = config?.token
+        if (!chatwootToken) {
+          console.warn('CHATWOOT_TOKEN not configured')
+          return
+        }
+
+        // Match the site's dark theme. Chatwoot only supports 'light' and
+        // 'auto' (follows prefers-color-scheme), so 'auto' is the darkest
+        // available setting. Must be set before the SDK runs.
+        ;(window as any).chatwootSettings = {
+          ...(window as any).chatwootSettings,
+          darkMode: 'auto'
+        }
+
+        // Load Chatwoot widget script
+        const script = document.createElement('script')
+        script.src = 'https://app.chatwoot.com/packs/js/sdk.js'
+        script.async = true
+
+        script.onload = () => {
+          // Initialize Chatwoot after script loads
+          if ((window as any).chatwootSDK) {
+            ;(window as any).chatwootSDK.run({
+              websiteToken: chatwootToken,
+              baseUrl: 'https://app.chatwoot.com'
+            })
+          }
+        }
+
+        script.onerror = () => {
+          console.error('Failed to load Chatwoot widget')
+        }
+
+        document.body.appendChild(script)
+      })
+      .catch(() => {
+        console.error('Failed to fetch Chatwoot config')
+      })
+
+    return () => {
+      cancelled = true
+      // Cleanup is handled by Chatwoot itself
+      // Don't remove the script as it manages its own lifecycle
+    }
+  }, [])
+
+  return null
 }