@returningai/widget-sdk 1.2.15 → 1.3.0

package/dist/rai-widget.js

@@ -41,8 +41,8 @@ function clearStorage(config) {
   } catch {
   }
 }
+const ERROR_SETTINGS_CACHE_TTL = 36e5;
 function loadErrorSettingsFromStorage(config) {
-  const ERROR_SETTINGS_CACHE_TTL = 36e5;
   try {
     const raw = localStorage.getItem(errorSettingsKey(config));
     if (!raw) return null;
@@ -91,22 +91,41 @@ async function authenticateServerless(config, state, onRefreshScheduled) {
     }
     let is4xx = false;
     try {
+      const body = {
+        nonce,
+        timestamp,
+        widgetType: config.widgetType
+      };
+      if (config.embedToken) {
+        body.embedToken = config.embedToken;
+      }
+      if (config.userIdentifiers && Object.keys(config.userIdentifiers).length > 0) {
+        body.userIdentifiers = config.userIdentifiers;
+      }
       const response = await fetch(`${config.apiUrl}/${config.widgetId}/auth/serverless`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          nonce,
-          timestamp,
-          widgetType: config.widgetType,
-          userIdentifiers: config.userIdentifiers
-        }),
+        body: JSON.stringify(body),
         credentials: "include"
       });
       if (!response.ok) {
         is4xx = response.status >= 400 && response.status < 500;
-        const error = await response.json().catch(() => ({ error: "Authentication failed" }));
-        throw new Error(error.error || `HTTP ${response.status}`);
+        const errorBody = await response.json().catch(() => ({ error: "Authentication failed" }));
+        if (is4xx) {
+          state.lastAuthError = {
+            status: response.status,
+            error: errorBody == null ? void 0 : errorBody.error,
+            hint: errorBody == null ? void 0 : errorBody.hint
+          };
+          console.error(
+            `[rai-widget] /auth/serverless ${response.status}:`,
+            (errorBody == null ? void 0 : errorBody.error) || "Authentication failed",
+            (errorBody == null ? void 0 : errorBody.hint) ? `— ${errorBody.hint}` : ""
+          );
+        }
+        throw new Error((errorBody == null ? void 0 : errorBody.error) || `HTTP ${response.status}`);
       }
+      state.lastAuthError = null;
       const data = await response.json();
       if (!data.accessToken || !data.refreshToken) {
         throw new Error("Invalid authentication response");
@@ -246,56 +265,61 @@ async function logout(config, state) {
   clearState(state);
   clearStorage(config);
 }
-async function validateEmbedToken(config) {
-  try {
-    const baseUrl = config.v2ApiUrl || config.apiUrl;
-    const res = await fetch(`${baseUrl}/v2/api/widget-access-keys/validate`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ embedToken: config.embedToken })
-    });
-    return res.ok;
-  } catch {
-    return false;
+const inflightErrorSettings = /* @__PURE__ */ new Map();
+function applyErrorSettingsToState(state, data) {
+  if (data.configured) {
+    state.errorSettings = {
+      errorMessage: data.errorMessage,
+      modalColor: data.modalColor,
+      backgroundImage: data.backgroundImage
+    };
+  }
+  if (data.loadingAnimation) {
+    state.loadingAnimation = data.loadingAnimation;
+  }
+  if (data.themePalette) {
+    state.themePalette = data.themePalette;
+  }
+  if (typeof data.font === "string" && data.font) {
+    state.font = data.font;
+  }
+  if (data.defaultColorSchema === "light" || data.defaultColorSchema === "dark") {
+    state.defaultColorSchema = data.defaultColorSchema;
   }
 }
-async function fetchErrorSettings(config, state) {
-  const cached = loadErrorSettingsFromStorage(config);
-  if (cached) {
-    if (cached.configured) {
-      state.errorSettings = {
-        errorMessage: cached.errorMessage,
-        modalColor: cached.modalColor,
-        backgroundImage: cached.backgroundImage
-      };
-    }
-    if (cached.loadingAnimation) {
-      state.loadingAnimation = cached.loadingAnimation;
+async function fetchErrorSettings(config, state, opts = {}) {
+  if (!opts.skipCache) {
+    const cached = loadErrorSettingsFromStorage(config);
+    if (cached) {
+      applyErrorSettingsToState(state, cached);
+      return state.errorSettings;
     }
-    return state.errorSettings;
   }
-  try {
-    const response = await fetch(
-      `${config.apiUrl}/${config.widgetId}/auth/error-settings?widgetType=${config.widgetType}`,
-      { method: "GET", headers: { "Content-Type": "application/json" } }
-    );
-    if (!response.ok) return null;
-    const data = await response.json();
-    saveErrorSettingsToStorage(config, data);
-    if (data.configured) {
-      state.errorSettings = {
-        errorMessage: data.errorMessage,
-        modalColor: data.modalColor,
-        backgroundImage: data.backgroundImage
-      };
-    }
-    if (data.loadingAnimation) {
-      state.loadingAnimation = data.loadingAnimation;
-    }
-    return state.errorSettings;
-  } catch {
-    return null;
+  const url = `${config.apiUrl}/${config.widgetId}/auth/error-settings?widgetType=${config.widgetType}`;
+  let promise = inflightErrorSettings.get(url);
+  if (!promise) {
+    promise = (async () => {
+      try {
+        const response = await fetch(url, {
+          method: "GET",
+          headers: { "Content-Type": "application/json" }
+        });
+        if (!response.ok) return null;
+        const data2 = await response.json();
+        saveErrorSettingsToStorage(config, data2);
+        return data2;
+      } catch {
+        return null;
+      } finally {
+        inflightErrorSettings.delete(url);
+      }
+    })();
+    inflightErrorSettings.set(url, promise);
   }
+  const data = await promise;
+  if (!data) return null;
+  applyErrorSettingsToState(state, data);
+  return state.errorSettings;
 }
 function clearState(state) {
   state.accessToken = null;
@@ -306,6 +330,7 @@ function clearState(state) {
   state.isAuthenticated = false;
   state.isRefreshing = false;
   state.refreshPromise = null;
+  state.lastAuthError = null;
   if (state.refreshTimer) {
     clearTimeout(state.refreshTimer);
     state.refreshTimer = null;
@@ -411,7 +436,7 @@ function setupMessageListener(config, state, _shadow, iframe, onRefreshScheduled
     heightSetter.cancel();
   };
 }
-const widgetCSS = ':host{display:block;position:relative;width:100%;height:100%}.rai-loader{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--rai-loader-bg, #ffffff);border-radius:8px;z-index:10;transition:opacity .3s ease-out}.rai-loader.fade-out{opacity:0;pointer-events:none}.rai-error{display:none;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--rai-error-bg, #1a1a1a);border-radius:8px;padding:24px;box-sizing:border-box;text-align:center;color:var(--rai-error-text, #9ca3af);font-family:system-ui,-apple-system,sans-serif;z-index:10}.rai-error.visible{display:flex}iframe{display:block;border:none;opacity:0;transition:opacity .3s ease-in}iframe.loaded{opacity:1}.rai-lottie-loader{width:100px;height:100px}.rai-lottie-loader svg{width:100%!important;height:100%!important}.rai-lottie-spinner{width:32px;height:32px;margin:34px auto;border:3px solid var(--rai-text4, #6b7280);border-top-color:var(--rai-accent, #000000);border-radius:50%;animation:rai-spin .7s linear infinite}@keyframes rai-spin{to{transform:rotate(360deg)}}.rai-sdk-loader{position:relative;width:75px;height:100px}.rai-sdk-loader__bar{position:absolute;bottom:0;width:10px;height:50%;background:var(--rai-accent, #000000);transform-origin:center bottom;box-shadow:1px 1px #0003}.rai-sdk-loader__bar:nth-child(1){left:0;transform:scaleY(.2);animation:rai-sdk-barUp1 4s infinite}.rai-sdk-loader__bar:nth-child(2){left:15px;transform:scaleY(.4);animation:rai-sdk-barUp2 4s infinite}.rai-sdk-loader__bar:nth-child(3){left:30px;transform:scaleY(.6);animation:rai-sdk-barUp3 4s infinite}.rai-sdk-loader__bar:nth-child(4){left:45px;transform:scaleY(.8);animation:rai-sdk-barUp4 4s infinite}.rai-sdk-loader__bar:nth-child(5){left:60px;transform:scale(1);animation:rai-sdk-barUp5 4s infinite}.rai-sdk-loader__ball{position:absolute;bottom:10px;left:0;width:10px;height:10px;background:var(--rai-accent, #000000);border-radius:50%;animation:rai-sdk-ball 4s infinite}@keyframes rai-sdk-ball{0%{transform:translate(0)}5%{transform:translate(8px,-14px)}10%{transform:translate(15px,-10px)}17%{transform:translate(23px,-24px)}20%{transform:translate(30px,-20px)}27%{transform:translate(38px,-34px)}30%{transform:translate(45px,-30px)}37%{transform:translate(53px,-44px)}40%{transform:translate(60px,-40px)}50%{transform:translate(60px)}57%{transform:translate(53px,-14px)}60%{transform:translate(45px,-10px)}67%{transform:translate(37px,-24px)}70%{transform:translate(30px,-20px)}77%{transform:translate(22px,-34px)}80%{transform:translate(15px,-30px)}87%{transform:translate(7px,-44px)}90%{transform:translateY(-40px)}to{transform:translate(0)}}@keyframes rai-sdk-barUp1{0%{transform:scaleY(.2)}40%{transform:scaleY(.2)}50%{transform:scale(1)}90%{transform:scale(1)}to{transform:scaleY(.2)}}@keyframes rai-sdk-barUp2{0%{transform:scaleY(.4)}40%{transform:scaleY(.4)}50%{transform:scaleY(.8)}90%{transform:scaleY(.8)}to{transform:scaleY(.4)}}@keyframes rai-sdk-barUp3{0%{transform:scaleY(.6)}to{transform:scaleY(.6)}}@keyframes rai-sdk-barUp4{0%{transform:scaleY(.8)}40%{transform:scaleY(.8)}50%{transform:scaleY(.4)}90%{transform:scaleY(.4)}to{transform:scaleY(.8)}}@keyframes rai-sdk-barUp5{0%{transform:scale(1)}40%{transform:scale(1)}50%{transform:scaleY(.2)}90%{transform:scaleY(.2)}to{transform:scale(1)}}#loading-square{width:75px;aspect-ratio:1;display:flex;color:var(--rai-accent, #000000);background:linear-gradient(currentColor 0 0) right / 51% 100%,linear-gradient(currentColor 0 0) bottom / 100% 51%;background-repeat:no-repeat;animation:l16-0 2s infinite linear .25s}#loading-square>div{width:50%;height:50%;background:currentColor;animation:l16-1 .5s infinite linear}@keyframes l16-0{0%,12.49%{transform:rotate(0)}12.5%,37.49%{transform:rotate(90deg)}37.5%,62.49%{transform:rotate(180deg)}62.5%,87.49%{transform:rotate(270deg)}87.5%,to{transform:rotate(360deg)}}@keyframes l16-1{0%{transform:perspective(80px) rotate3d(-1,-1,0,0)}80%,to{transform:perspective(80px) rotate3d(-1,-1,0,-180deg)}}#loading-circle{width:75px;aspect-ratio:1;display:grid;grid:50%/50%;color:var(--rai-accent, #000000);border-radius:50%;--_g: no-repeat linear-gradient(currentColor 0 0);background:var(--_g),var(--_g),var(--_g);background-size:50.1% 50.1%;animation:l9-0 1.5s infinite steps(1) alternate,l9-0-0 3s infinite steps(1) alternate}#loading-circle>div{background:var(--rai-text4, #6b7280);border-top-left-radius:100px;transform:perspective(150px) rotateY(0) rotateX(0);transform-origin:bottom right;animation:l9-1 1.5s infinite linear alternate}@keyframes l9-0{0%{background-position:0 100%,100% 100%,100% 0}33%{background-position:100% 100%,100% 100%,100% 0}66%{background-position:100% 0,100% 0,100% 0}}@keyframes l9-0-0{0%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(-1) rotate(-90deg)}}@keyframes l9-1{16.5%{transform:perspective(150px) rotateX(-90deg) rotateY(0) rotateX(0);filter:grayscale(.8)}33%{transform:perspective(150px) rotateX(-180deg) rotateY(0) rotateX(0)}66%{transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0)}to{transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(.8)}}.rai-custom-error{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.tiptap strong.tw-font-bold,.tiptap b.tw-font-bold{font-weight:700}.tiptap em.tw-font-italic,.tiptap i.tw-font-italic{font-style:italic}.tiptap a.tiptap-rich-text-link{color:#3b82f6;text-decoration:underline;position:relative;display:inline-block;width:fit-content}.tiptap a.tiptap-rich-text-link:hover{color:#3b82f6cc;text-decoration:none}.tiptap a.tiptap-rich-text-link:not([title=""]):before{content:attr(title);position:absolute;top:-2rem;left:50%;transform:translate(-50%);white-space:nowrap;border-radius:.25rem;background-color:#000;padding:.25rem .5rem;color:#fff;opacity:0;transition:opacity .2s;pointer-events:none}.tiptap a.tiptap-rich-text-link:not([title=""]):hover:before{opacity:1}.tiptap p[style*="text-align: left"]{text-align:left}.tiptap p[style*="text-align: center"]{text-align:center}.tiptap p[style*="text-align: right"]{text-align:right}.tiptap p[style*="text-align: justify"]{text-align:justify}.tiptap u{text-decoration:underline}.tiptap.ProseMirror{background-color:transparent;height:fit-content!important;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:"liga" 0;padding:0;width:100%;overflow-y:auto}.tiptap{line-height:1.6;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.tiptap p{margin:.5em 0}.tiptap p:first-child{margin-top:0}.tiptap p:last-child{margin-bottom:0}.tiptap img{max-width:100%;height:auto;display:block}.tiptap p[style*="text-align: left"] img{margin-left:0;margin-right:auto}.tiptap p[style*="text-align: center"] img{margin-left:auto;margin-right:auto}.tiptap p[style*="text-align: right"] img{margin-left:auto;margin-right:0}.rai-retry-btn{padding:8px 20px;border:none;border-radius:6px;background:var(--rai-accent, #000000);color:var(--rai-error-bg, #ffffff);font-size:14px;font-family:system-ui,-apple-system,sans-serif;cursor:pointer}.rai-retry-btn:hover{opacity:.85}';
+const widgetCSS = ':host{display:block;position:relative;width:100%;height:100%}.rai-loader{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;width:100%;height:100%;background:var(--background-5, var(--rai-loader-bg, #ffffff));border-radius:8px;z-index:10;transition:opacity .3s ease-out;font-family:var(--rai-loader-font, "Roboto", system-ui, -apple-system, sans-serif)}.rai-loader.fade-out{opacity:0;pointer-events:none}.rai-loader-text{margin:.5rem 0 0;font-size:1.125rem;line-height:1.75rem;font-weight:400;letter-spacing:normal;color:var(--accent-1, var(--rai-accent, #000000));text-align:center}@media (min-width: 768px){.rai-loader-text{font-size:1.5rem;line-height:2rem}}.rai-error{display:none;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:var(--rai-error-bg, #1a1a1a);border-radius:8px;padding:24px;box-sizing:border-box;text-align:center;color:var(--rai-error-text, #9ca3af);font-family:system-ui,-apple-system,sans-serif;z-index:10}.rai-error.visible{display:flex}iframe{display:block;border:none;opacity:0;transition:opacity .3s ease-in}iframe.loaded{opacity:1}.rai-lottie-loader{width:100px;height:100px}.rai-lottie-loader svg{width:100%!important;height:100%!important}.rai-lottie-spinner{width:32px;height:32px;margin:34px auto;border:3px solid var(--rai-text4, #6b7280);border-top-color:var(--rai-accent, #000000);border-radius:50%;animation:rai-spin .7s linear infinite}@keyframes rai-spin{to{transform:rotate(360deg)}}.rai-sdk-loader{position:relative;width:75px;height:100px}.rai-sdk-loader__bar{position:absolute;bottom:0;width:10px;height:50%;background:var(--rai-accent, #000000);transform-origin:center bottom;box-shadow:1px 1px #0003}.rai-sdk-loader__bar:nth-child(1){left:0;transform:scaleY(.2);animation:rai-sdk-barUp1 4s infinite}.rai-sdk-loader__bar:nth-child(2){left:15px;transform:scaleY(.4);animation:rai-sdk-barUp2 4s infinite}.rai-sdk-loader__bar:nth-child(3){left:30px;transform:scaleY(.6);animation:rai-sdk-barUp3 4s infinite}.rai-sdk-loader__bar:nth-child(4){left:45px;transform:scaleY(.8);animation:rai-sdk-barUp4 4s infinite}.rai-sdk-loader__bar:nth-child(5){left:60px;transform:scale(1);animation:rai-sdk-barUp5 4s infinite}.rai-sdk-loader__ball{position:absolute;bottom:10px;left:0;width:10px;height:10px;background:var(--rai-accent, #000000);border-radius:50%;animation:rai-sdk-ball 4s infinite}@keyframes rai-sdk-ball{0%{transform:translate(0)}5%{transform:translate(8px,-14px)}10%{transform:translate(15px,-10px)}17%{transform:translate(23px,-24px)}20%{transform:translate(30px,-20px)}27%{transform:translate(38px,-34px)}30%{transform:translate(45px,-30px)}37%{transform:translate(53px,-44px)}40%{transform:translate(60px,-40px)}50%{transform:translate(60px)}57%{transform:translate(53px,-14px)}60%{transform:translate(45px,-10px)}67%{transform:translate(37px,-24px)}70%{transform:translate(30px,-20px)}77%{transform:translate(22px,-34px)}80%{transform:translate(15px,-30px)}87%{transform:translate(7px,-44px)}90%{transform:translateY(-40px)}to{transform:translate(0)}}@keyframes rai-sdk-barUp1{0%{transform:scaleY(.2)}40%{transform:scaleY(.2)}50%{transform:scale(1)}90%{transform:scale(1)}to{transform:scaleY(.2)}}@keyframes rai-sdk-barUp2{0%{transform:scaleY(.4)}40%{transform:scaleY(.4)}50%{transform:scaleY(.8)}90%{transform:scaleY(.8)}to{transform:scaleY(.4)}}@keyframes rai-sdk-barUp3{0%{transform:scaleY(.6)}to{transform:scaleY(.6)}}@keyframes rai-sdk-barUp4{0%{transform:scaleY(.8)}40%{transform:scaleY(.8)}50%{transform:scaleY(.4)}90%{transform:scaleY(.4)}to{transform:scaleY(.8)}}@keyframes rai-sdk-barUp5{0%{transform:scale(1)}40%{transform:scale(1)}50%{transform:scaleY(.2)}90%{transform:scaleY(.2)}to{transform:scale(1)}}#loading-square{width:75px;aspect-ratio:1;display:flex;color:var(--rai-accent, #000000);background:linear-gradient(currentColor 0 0) right / 51% 100%,linear-gradient(currentColor 0 0) bottom / 100% 51%;background-repeat:no-repeat;animation:l16-0 2s infinite linear .25s}#loading-square>div{width:50%;height:50%;background:currentColor;animation:l16-1 .5s infinite linear}@keyframes l16-0{0%,12.49%{transform:rotate(0)}12.5%,37.49%{transform:rotate(90deg)}37.5%,62.49%{transform:rotate(180deg)}62.5%,87.49%{transform:rotate(270deg)}87.5%,to{transform:rotate(360deg)}}@keyframes l16-1{0%{transform:perspective(80px) rotate3d(-1,-1,0,0)}80%,to{transform:perspective(80px) rotate3d(-1,-1,0,-180deg)}}#loading-circle{width:75px;aspect-ratio:1;display:grid;grid:50%/50%;color:var(--rai-accent, #000000);border-radius:50%;--_g: no-repeat linear-gradient(currentColor 0 0);background:var(--_g),var(--_g),var(--_g);background-size:50.1% 50.1%;animation:l9-0 1.5s infinite steps(1) alternate,l9-0-0 3s infinite steps(1) alternate}#loading-circle>div{background:var(--rai-text4, #6b7280);border-top-left-radius:100px;transform:perspective(150px) rotateY(0) rotateX(0);transform-origin:bottom right;animation:l9-1 1.5s infinite linear alternate}@keyframes l9-0{0%{background-position:0 100%,100% 100%,100% 0}33%{background-position:100% 100%,100% 100%,100% 0}66%{background-position:100% 0,100% 0,100% 0}}@keyframes l9-0-0{0%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(-1) rotate(-90deg)}}@keyframes l9-1{16.5%{transform:perspective(150px) rotateX(-90deg) rotateY(0) rotateX(0);filter:grayscale(.8)}33%{transform:perspective(150px) rotateX(-180deg) rotateY(0) rotateX(0)}66%{transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0)}to{transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(.8)}}.rai-custom-error{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.tiptap strong.tw-font-bold,.tiptap b.tw-font-bold{font-weight:700}.tiptap em.tw-font-italic,.tiptap i.tw-font-italic{font-style:italic}.tiptap a.tiptap-rich-text-link{color:#3b82f6;text-decoration:underline;position:relative;display:inline-block;width:fit-content}.tiptap a.tiptap-rich-text-link:hover{color:#3b82f6cc;text-decoration:none}.tiptap a.tiptap-rich-text-link:not([title=""]):before{content:attr(title);position:absolute;top:-2rem;left:50%;transform:translate(-50%);white-space:nowrap;border-radius:.25rem;background-color:#000;padding:.25rem .5rem;color:#fff;opacity:0;transition:opacity .2s;pointer-events:none}.tiptap a.tiptap-rich-text-link:not([title=""]):hover:before{opacity:1}.tiptap p[style*="text-align: left"]{text-align:left}.tiptap p[style*="text-align: center"]{text-align:center}.tiptap p[style*="text-align: right"]{text-align:right}.tiptap p[style*="text-align: justify"]{text-align:justify}.tiptap u{text-decoration:underline}.tiptap.ProseMirror{background-color:transparent;height:fit-content!important;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:"liga" 0;padding:0;width:100%;overflow-y:auto}.tiptap{line-height:1.6;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.tiptap p{margin:.5em 0}.tiptap p:first-child{margin-top:0}.tiptap p:last-child{margin-bottom:0}.tiptap img{max-width:100%;height:auto;display:block}.tiptap p[style*="text-align: left"] img{margin-left:0;margin-right:auto}.tiptap p[style*="text-align: center"] img{margin-left:auto;margin-right:auto}.tiptap p[style*="text-align: right"] img{margin-left:auto;margin-right:0}.rai-retry-btn{padding:8px 20px;border:none;border-radius:6px;background:var(--rai-accent, #000000);color:var(--rai-error-bg, #ffffff);font-size:14px;font-family:system-ui,-apple-system,sans-serif;cursor:pointer}.rai-retry-btn:hover{opacity:.85}';
 const DEFINED_ATTRS = /* @__PURE__ */ new Set([
   "community-id",
   "channel-id",
@@ -438,7 +463,12 @@ const DEFINED_ATTRS = /* @__PURE__ */ new Set([
   "bundle-url",
   "embed-token",
   "v2-api-url",
-  "domain-key"
+  "domain-key",
+  "loading-text",
+  "bg",
+  "text",
+  "accent",
+  "font"
 ]);
 const WIDGET_GLOBALS = {
   store: "RaiStoreWidget",
@@ -469,6 +499,38 @@ function loadScript(url) {
     document.head.appendChild(s);
   });
 }
+const loadedFonts = /* @__PURE__ */ new Set();
+function ensureGoogleFontLoaded(family) {
+  if (!family || loadedFonts.has(family)) return;
+  loadedFonts.add(family);
+  const linkId = `rai-font-${family.toLowerCase().replace(/\s+/g, "-")}`;
+  if (document.getElementById(linkId)) return;
+  const link = document.createElement("link");
+  link.id = linkId;
+  link.rel = "stylesheet";
+  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}&display=swap`;
+  document.head.appendChild(link);
+}
+const DANGEROUS_ELEMENTS = ["script", "iframe", "object", "embed"];
+const URL_ATTRS = ["src", "href", "xlink:href"];
+function sanitizeLoaderHtml(html) {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  doc.body.querySelectorAll(DANGEROUS_ELEMENTS.join(",")).forEach((el) => el.remove());
+  doc.body.querySelectorAll("*").forEach((el) => {
+    Array.from(el.attributes).forEach((attr) => {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) {
+        el.removeAttribute(attr.name);
+        return;
+      }
+      if (URL_ATTRS.includes(name)) {
+        const val = attr.value.trim().toLowerCase();
+        if (val.startsWith("javascript:")) el.removeAttribute(attr.name);
+      }
+    });
+  });
+  return doc.body.innerHTML;
+}
 function readConfig(el, existingId) {
   const get = (name) => el.getAttribute(name) ?? el.getAttribute(`data-${name}`) ?? "";
   const num = (name, def) => {
@@ -539,6 +601,7 @@ function readConfig(el, existingId) {
     // auth token — base64-encoded per widget type for auth URLs + iframe URL building
     widgetType,
     theme: get("theme") || "light",
+    themeExplicit: !!get("theme"),
     container,
     width: get("width") || "100%",
     height: get("height") || "600px",
@@ -568,8 +631,17 @@ function readConfig(el, existingId) {
     // required — issued by customer's server
     v2ApiUrl: get("v2-api-url") || void 0,
     // separate V2 API host for embed-token validation
-    domainKey: get("domain-key") || void 0
-    // SGTR, STG, PROD — controls IIFE environment resolution (PROD maps to GEN internally)
+    domainKey: get("domain-key") || void 0,
+    // SGTR, STG, PROD — controls IIFE environment resolution
+    loadingText: get("loading-text") || "Loading ...",
+    // matches React WidgetLoadingPage default
+    firstPaintColors: (() => {
+      const bg = get("bg") || void 0;
+      const text = get("text") || void 0;
+      const accent = get("accent") || void 0;
+      return bg || text || accent ? { bg, text, accent } : void 0;
+    })(),
+    firstPaintFont: get("font") || void 0
   };
 }
 function createInitialState() {
@@ -586,7 +658,11 @@ function createInitialState() {
     isRefreshing: false,
     refreshPromise: null,
     errorSettings: null,
-    loadingAnimation: null
+    loadingAnimation: null,
+    themePalette: null,
+    font: null,
+    defaultColorSchema: null,
+    lastAuthError: null
   };
 }
 class BaseWidget extends HTMLElement {
@@ -619,6 +695,7 @@ class BaseWidget extends HTMLElement {
     this.style.setProperty("--rai-text4", text4Color);
     this.style.setProperty("--rai-loader-bg", bgColor);
     this.style.setProperty("--rai-error-bg", bgColor);
+    this.applyFirstPaintColors();
     this.renderShell();
     if (this.hasAttribute("eager")) {
       this.init();
@@ -651,9 +728,61 @@ class BaseWidget extends HTMLElement {
     );
   }
   // ── Rendering ─────────────────────────────────────────────────────────
+  /**
+   * Apply widget-defined CSS colors before first paint so the loader uses
+   * the community's actual theme — not generic light/dark — from frame 1.
+   *
+   * Priority:
+   *   1. Cached themePalette (synchronous localStorage read)
+   *   2. HTML attribute hints (`bg`, `text`, `accent`)
+   *   3. Generic light/dark fallback (--rai-* vars set in connectedCallback)
+   *
+   * After the API response arrives, fetchAndRenderLoader() re-applies the
+   * fresh palette via applyPaletteFromState(). On every load except the
+   * absolute first-ever, the cached palette is already correct.
+   */
+  applyFirstPaintColors() {
+    var _a;
+    const cached = loadErrorSettingsFromStorage(this.config);
+    if (!this.config.themeExplicit) {
+      const cachedDefault = cached == null ? void 0 : cached.defaultColorSchema;
+      if (cachedDefault === "light" || cachedDefault === "dark") {
+        this.config.theme = cachedDefault;
+      }
+    }
+    const theme = this.config.theme === "dark" ? "dark" : "light";
+    const cachedPalette = (_a = cached == null ? void 0 : cached.themePalette) == null ? void 0 : _a[theme];
+    if (cachedPalette) this.applyPalette(cachedPalette);
+    const cachedFont = typeof (cached == null ? void 0 : cached.font) === "string" ? cached.font : void 0;
+    const font = cachedFont || this.config.firstPaintFont;
+    if (font) this.applyFont(font);
+    if (cachedPalette) return;
+    const hints = this.config.firstPaintColors;
+    if (hints == null ? void 0 : hints.bg) this.style.setProperty("--background-5", hints.bg);
+    if (hints == null ? void 0 : hints.text) this.style.setProperty("--text-1", hints.text);
+    if (hints == null ? void 0 : hints.accent) this.style.setProperty("--accent-1", hints.accent);
+  }
+  applyFont(font) {
+    this.style.setProperty(
+      "--rai-loader-font",
+      `'${font}', system-ui, -apple-system, sans-serif`
+    );
+    ensureGoogleFontLoaded(font);
+  }
+  applyPalette(palette) {
+    Object.entries(palette).forEach(([key, value]) => {
+      if (key.startsWith("--") && value) {
+        this.style.setProperty(key, value);
+      }
+    });
+  }
   renderShell() {
     this.loaderEl = document.createElement("div");
     this.loaderEl.className = "rai-loader";
+    const textEl = document.createElement("h1");
+    textEl.className = "rai-loader-text";
+    textEl.textContent = this.config.loadingText;
+    this.loaderEl.appendChild(textEl);
     this.shadow.appendChild(this.loaderEl);
     this.fetchAndRenderLoader();
     this.errorEl = document.createElement("div");
@@ -671,51 +800,83 @@ class BaseWidget extends HTMLElement {
     this.shadow.appendChild(this.errorEl);
   }
   /**
-   * Fetches the community's loading animation config from the error-settings
-   * API (which now also returns loadingAnimation) and renders the appropriate
-   * loader. Falls back to the default bar loader if the API fails or if no
-   * custom animation is configured.
+   * Loads the community loading animation + theme palette from cache or API
+   * and renders the animation above the "Loading ..." text. The text is
+   * already painted by renderShell so this method only ADDS the animation;
+   * users see two states at most: text-only → text + animation.
    *
-   * This runs in parallel with auth — the API call is fire-and-forget and
-   * the loader is rendered as soon as the response arrives. The result is
-   * also cached by fetchErrorSettings so init() doesn't re-fetch.
+   * Stale-while-revalidate:
+   *   - Cache hit  → apply palette & render animation synchronously, fire
+   *                  background refresh.
+   *   - Cache miss → text remains visible; await network; apply palette
+   *                  + render animation when response arrives.
    */
   async fetchAndRenderLoader() {
     var _a;
-    (_a = this.loaderEl) == null ? void 0 : _a.appendChild(this.createDefaultLoader());
+    const cached = loadErrorSettingsFromStorage(this.config);
+    if (cached) {
+      applyErrorSettingsToState(this.state, cached);
+      this.renderLoaderAnimation();
+      fetchErrorSettings(this.config, this.state, { skipCache: true }).catch(
+        () => {
+        }
+      );
+      return;
+    }
     try {
       await fetchErrorSettings(this.config, this.state);
     } catch {
     }
     if (!this.loaderEl) return;
-    this.loaderEl.innerHTML = "";
+    if (!this.config.themeExplicit && (this.state.defaultColorSchema === "light" || this.state.defaultColorSchema === "dark") && this.state.defaultColorSchema !== this.config.theme) {
+      this.config.theme = this.state.defaultColorSchema;
+    }
+    const theme = this.config.theme === "dark" ? "dark" : "light";
+    const palette = (_a = this.state.themePalette) == null ? void 0 : _a[theme];
+    if (palette) this.applyPalette(palette);
+    if (this.state.font) this.applyFont(this.state.font);
+    this.renderLoaderAnimation();
+  }
+  /**
+   * Append the loading animation above the text. Removes any previous
+   * animation first so this is safe to call repeatedly (e.g. after a
+   * background refresh changes the configured loader).
+   */
+  renderLoaderAnimation() {
+    if (!this.loaderEl) return;
+    const existing = this.loaderEl.querySelector(".rai-loader-anim");
+    if (existing) existing.remove();
+    const animContainer = document.createElement("div");
+    animContainer.className = "rai-loader-anim";
     const anim = this.state.loadingAnimation;
     const theme = this.config.theme === "dark" ? "dark" : "light";
     if ((anim == null ? void 0 : anim.type) === "custom" && anim.custom) {
       const themeConfig = anim.custom[theme] || anim.custom.light || anim.custom.dark;
       if (themeConfig) {
         if (themeConfig.type === "lottie" && themeConfig.lottieData) {
-          this.renderLottieLoader(themeConfig.lottieData);
+          this.renderLottieInto(animContainer, themeConfig.lottieData);
+          this.loaderEl.insertBefore(animContainer, this.loaderEl.firstChild);
           return;
         }
-        if (themeConfig.type === "custom" && themeConfig.html) {
-          const wrapper = document.createElement("div");
-          wrapper.innerHTML = themeConfig.html;
-          this.loaderEl.appendChild(wrapper);
+        if (themeConfig.type === "html" && themeConfig.html) {
+          animContainer.innerHTML = sanitizeLoaderHtml(themeConfig.html);
+          this.loaderEl.insertBefore(animContainer, this.loaderEl.firstChild);
           return;
         }
       }
     }
     if ((anim == null ? void 0 : anim.type) === "preset" && anim.preset) {
-      this.loaderEl.appendChild(this.createPresetLoader(anim.preset));
+      animContainer.appendChild(this.createPresetLoader(anim.preset));
+      this.loaderEl.insertBefore(animContainer, this.loaderEl.firstChild);
       return;
     }
-    this.loaderEl.appendChild(this.createDefaultLoader());
+    animContainer.appendChild(this.createDefaultLoader());
+    this.loaderEl.insertBefore(animContainer, this.loaderEl.firstChild);
   }
-  renderLottieLoader(animationData) {
+  renderLottieInto(parent, animationData) {
     const lottieContainer = document.createElement("div");
     lottieContainer.className = "rai-lottie-loader";
-    this.loaderEl.appendChild(lottieContainer);
+    parent.appendChild(lottieContainer);
     const w = window;
     if (typeof w.lottie !== "undefined") {
       w.lottie.loadAnimation({
@@ -737,6 +898,10 @@ class BaseWidget extends HTMLElement {
           animationData
         });
       };
+      script.onerror = () => {
+        lottieContainer.remove();
+        parent.appendChild(this.createDefaultLoader());
+      };
       document.head.appendChild(script);
     }
   }
@@ -779,15 +944,62 @@ class BaseWidget extends HTMLElement {
     }, 300);
     this.loaderEl = null;
   }
+  /**
+   * Bundle mode: keep the SDK loader visible until React has actually
+   * painted into `container`, eliminating the brief bg-color gap that
+   * happens when the loader is removed before the React app's first frame.
+   *
+   * Strategy:
+   *   1. MutationObserver fires when React commits any DOM mutation into
+   *      the container — synchronous inside mount(), but the callback runs
+   *      as a microtask, so it observes the first child addition.
+   *   2. requestAnimationFrame waits one paint cycle so the React content
+   *      is actually visible before the SDK loader fades out.
+   *   3. 2s fallback covers silent React mount errors so the loader doesn't
+   *      hang forever.
+   *
+   * Calls hideLoader() (with its 300ms fade-out) so the transition is smooth.
+   */
+  deferLoaderRemovalUntilReactPaints(container) {
+    if (!this.loaderEl) return;
+    let removed = false;
+    const remove = () => {
+      if (removed) return;
+      removed = true;
+      this.hideLoader();
+    };
+    const observer = new MutationObserver(() => {
+      if (container.children.length > 0) {
+        observer.disconnect();
+        requestAnimationFrame(remove);
+      }
+    });
+    observer.observe(container, { childList: true });
+    setTimeout(() => {
+      observer.disconnect();
+      remove();
+    }, 2e3);
+  }
   showError() {
     this.hideLoader();
     const settings = this.state.errorSettings;
-    if (settings == null ? void 0 : settings.errorMessage) {
+    const lastAuthError = this.state.lastAuthError;
+    const isUserLookupError = (lastAuthError == null ? void 0 : lastAuthError.error) === "User not found" || (lastAuthError == null ? void 0 : lastAuthError.error) === "Missing required user identifier fields" || (lastAuthError == null ? void 0 : lastAuthError.error) === "Missing user identifier fields";
+    const shouldUseCustomMessage = !!(settings == null ? void 0 : settings.errorMessage) && (isUserLookupError || !lastAuthError);
+    if (shouldUseCustomMessage) {
       this.renderCustomError(settings);
     } else if (this.errorEl) {
+      if ((lastAuthError == null ? void 0 : lastAuthError.error) && this.msgEl) {
+        this.msgEl.textContent = lastAuthError.hint ? `${lastAuthError.error}: ${lastAuthError.hint}` : lastAuthError.error;
+      }
       this.errorEl.classList.add("visible");
     }
-    this.emit("rai-error", { message: (settings == null ? void 0 : settings.errorMessage) ?? "Authentication failed" });
+    const emittedMessage = shouldUseCustomMessage ? settings.errorMessage : (lastAuthError == null ? void 0 : lastAuthError.error) || "Authentication failed";
+    this.emit("rai-error", {
+      message: emittedMessage,
+      hint: lastAuthError == null ? void 0 : lastAuthError.hint,
+      status: lastAuthError == null ? void 0 : lastAuthError.status
+    });
   }
   renderCustomError(settings) {
     var _a, _b;
@@ -835,13 +1047,6 @@ class BaseWidget extends HTMLElement {
       return;
     }
     await fetchErrorSettings(this.config, this.state);
-    if (this.config.embedToken) {
-      const valid = await validateEmbedToken(this.config);
-      if (!valid) {
-        this.showError();
-        return;
-      }
-    }
     const launchWidget = () => {
       if (this.config.bundleUrl) {
         this.mountWidget();
@@ -863,6 +1068,22 @@ class BaseWidget extends HTMLElement {
       }
       return;
     }
+    if (this.config.embedToken) {
+      clearState(this.state);
+      clearStorage(this.config);
+      const authed2 = await authenticateServerless(
+        this.config,
+        this.state,
+        () => this.scheduleRefresh()
+      );
+      if (authed2) {
+        this.emit("rai-authenticated");
+        launchWidget();
+      } else {
+        this.showError();
+      }
+      return;
+    }
     const hasStored = loadFromStorage(this.config, this.state);
     if (hasStored) {
       const refreshed = await refreshAccessToken(
@@ -895,7 +1116,10 @@ class BaseWidget extends HTMLElement {
     const iframe = document.createElement("iframe");
     iframe.src = this.buildWidgetUrl(this.config);
     iframe.allow = "clipboard-write";
-    iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox");
+    iframe.setAttribute(
+      "sandbox",
+      "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+    );
     iframe.frameBorder = "0";
     iframe.scrolling = "no";
     iframe.style.width = this.config.width;
@@ -926,30 +1150,57 @@ class BaseWidget extends HTMLElement {
   // ── Bundle mode (no-iframe) ──────────────────────────────────────────
   async mountWidget() {
     try {
+      const bundleApiUrl = this.config.v2ApiUrl || this.config.apiUrl;
       const w = window;
       if (!w.DomainKey && this.config.domainKey) {
         w.DomainKey = this.config.domainKey === "PROD" ? "GEN" : this.config.domainKey;
       }
-      ;
+      const endpointVars = [
+        "api_url",
+        "base_url",
+        "auth_api",
+        "socket_path_v2",
+        "socket_path",
+        "channel_api"
+      ];
+      for (const v of endpointVars) {
+        if (!w[v]) w[v] = bundleApiUrl;
+      }
       window.__IS_WIDGET__ = true;
       window.guest_token = this.state.accessToken;
+      const colorMode = this.config.theme === "dark" ? "dark" : "light";
+      const defaultThemeName = colorMode === "dark" ? "dark-knight" : "white-smoke";
+      document.documentElement.setAttribute("data-theme", defaultThemeName);
+      window.currentTheme = colorMode;
+      window.__FORCE_COLOR_MODE__ = colorMode;
+      window.__WIDGET_STORAGE_KEY__ = `color-schema-${this.config.widgetType}-${this.config.widgetId}`;
+      if (this.state.loadingAnimation) {
+        window.loadingAnimation = this.state.loadingAnimation;
+      }
       await loadScript(this.config.bundleUrl);
       const globalName = WIDGET_GLOBALS[this.config.widgetType];
       const widgetGlobal = window[globalName];
       if (!(widgetGlobal == null ? void 0 : widgetGlobal.mount)) {
-        throw new Error(`window.${globalName}.mount not found after loading bundle`);
+        throw new Error(
+          `window.${globalName}.mount not found after loading bundle`
+        );
       }
       const container = document.createElement("div");
-      container.style.cssText = "position: relative; width: 100%; height: 100%;";
+      container.className = "rai-widget-root";
+      container.style.cssText = [
+        "position: relative",
+        "width: 100%",
+        "height: 100%",
+        "color: var(--text-1)",
+        "background: var(--background-1)",
+        "font-family: var(--rai-loader-font, 'Roboto', system-ui, -apple-system, sans-serif)"
+      ].join("; ");
       this.appendChild(container);
       if (!this.shadow.querySelector("slot")) {
         const slot = document.createElement("slot");
         this.shadow.appendChild(slot);
       }
-      if (this.loaderEl) {
-        this.loaderEl.remove();
-        this.loaderEl = null;
-      }
+      this.deferLoaderRemovalUntilReactPaints(container);
       widgetGlobal.mount(container, {
         widgetType: this.config.widgetType,
         communityId: this.config.communityId,
@@ -957,11 +1208,18 @@ class BaseWidget extends HTMLElement {
         // channel widget only; others receive undefined and ignore it
         widgetId: this.config.communityId,
         // deprecated alias kept for widget main.tsx compatibility
-        apiUrl: this.config.apiUrl,
+        apiUrl: bundleApiUrl,
         token: this.state.accessToken,
         basePath: "/",
         isPreview: false,
-        isOpenWidget: true,
+        // Only claim "open widget" status (which tradingroom uses to render
+        // the chat input as read-only) when the bundle has no auth token —
+        // i.e. genuinely public/guest embeds. Authenticated embeds need
+        // sending enabled; an unconditional `true` here disables the input
+        // for every signed-in user, even though they should be able to
+        // post. Mirrors the iframe behavior, where `isOpenWidget` is only
+        // injected by SSR for the explicit `/open-widget` route.
+        isOpenWidget: !this.state.accessToken,
         defaultColorSchema: this.config.theme === "dark" ? "dark" : "light"
       });
       this.emit("rai-mounted");
@@ -976,17 +1234,27 @@ class BaseWidget extends HTMLElement {
     if (!this.state.accessTokenExpiry) return;
     const delay = this.state.accessTokenExpiry - Date.now() - 6e4;
     const pushToken = () => {
-      if (this.state.iframe) sendTokenToWidget(this.config, this.state, this.state.iframe);
+      if (this.state.iframe)
+        sendTokenToWidget(this.config, this.state, this.state.iframe);
       if (this.config.bundleUrl && this.state.accessToken) {
         window.guest_token = this.state.accessToken;
       }
     };
     const doRefresh = async () => {
       if (this.config.authUrl) {
-        const ok = await authenticateViaProxy(this.config, this.state, () => this.scheduleRefresh());
+        const ok = await authenticateViaProxy(
+          this.config,
+          this.state,
+          () => this.scheduleRefresh()
+        );
         if (ok) pushToken();
       } else {
-        await refreshAccessToken(this.config, this.state, () => this.scheduleRefresh(), pushToken);
+        await refreshAccessToken(
+          this.config,
+          this.state,
+          () => this.scheduleRefresh(),
+          pushToken
+        );
       }
     };
     if (delay > 0) {
@@ -998,7 +1266,8 @@ class BaseWidget extends HTMLElement {
   schedulePeriodicSync(iframe) {
     if (this.state.syncTimer) clearInterval(this.state.syncTimer);
     this.state.syncTimer = setInterval(() => {
-      if (this.state.accessToken) sendTokenToWidget(this.config, this.state, iframe);
+      if (this.state.accessToken)
+        sendTokenToWidget(this.config, this.state, iframe);
     }, 12e4);
   }
   // ── Logout helper ─────────────────────────────────────────────────────
@@ -1044,82 +1313,94 @@ class StoreWidget extends BaseWidget {
 class ChannelWidget extends BaseWidget {
   buildWidgetUrl(config) {
     const base = config.widgetUrl.endsWith("channel-widget") ? `${config.widgetUrl}/${config.widgetId}` : config.widgetUrl;
-    if (!config.locale) return base;
     try {
       const u = new URL(base);
-      u.searchParams.set("locale", config.locale);
+      u.searchParams.set("color", config.theme);
+      if (config.locale) u.searchParams.set("locale", config.locale);
       return u.toString();
     } catch {
-      return `${base}?locale=${encodeURIComponent(config.locale)}`;
+      const params = [`color=${config.theme}`];
+      if (config.locale) params.push(`locale=${encodeURIComponent(config.locale)}`);
+      return `${base}?${params.join("&")}`;
     }
   }
 }
 class MilestoneWidget extends BaseWidget {
   buildWidgetUrl(config) {
     const base = config.widgetUrl.endsWith("milestone-widget") ? `${config.widgetUrl}/${config.widgetId}` : config.widgetUrl;
-    if (!config.locale) return base;
     try {
       const u = new URL(base);
-      u.searchParams.set("locale", config.locale);
+      u.searchParams.set("color", config.theme);
+      if (config.locale) u.searchParams.set("locale", config.locale);
       return u.toString();
     } catch {
-      return `${base}?locale=${encodeURIComponent(config.locale)}`;
+      const params = [`color=${config.theme}`];
+      if (config.locale) params.push(`locale=${encodeURIComponent(config.locale)}`);
+      return `${base}?${params.join("&")}`;
     }
   }
 }
 class SocialWidget extends BaseWidget {
   buildWidgetUrl(config) {
     const base = config.widgetUrl.endsWith("social-widget") ? `${config.widgetUrl}/${config.widgetId}` : config.widgetUrl;
-    if (!config.locale) return base;
     try {
       const u = new URL(base);
-      u.searchParams.set("locale", config.locale);
+      u.searchParams.set("color", config.theme);
+      if (config.locale) u.searchParams.set("locale", config.locale);
       return u.toString();
     } catch {
-      return `${base}?locale=${encodeURIComponent(config.locale)}`;
+      const params = [`color=${config.theme}`];
+      if (config.locale) params.push(`locale=${encodeURIComponent(config.locale)}`);
+      return `${base}?${params.join("&")}`;
     }
   }
 }
 class CurrencyWidget extends BaseWidget {
   buildWidgetUrl(config) {
     const base = config.widgetUrl.endsWith("currency-overview-widget") ? `${config.widgetUrl}/${config.widgetId}` : config.widgetUrl;
-    if (!config.locale) return base;
     try {
       const u = new URL(base);
-      u.searchParams.set("locale", config.locale);
+      u.searchParams.set("color", config.theme);
+      if (config.locale) u.searchParams.set("locale", config.locale);
       return u.toString();
     } catch {
-      return `${base}?locale=${encodeURIComponent(config.locale)}`;
+      const params = [`color=${config.theme}`];
+      if (config.locale) params.push(`locale=${encodeURIComponent(config.locale)}`);
+      return `${base}?${params.join("&")}`;
     }
   }
 }
 class ReferralWidget extends BaseWidget {
   buildWidgetUrl(config) {
     const base = config.widgetUrl.endsWith("referral-conditions-widget") ? `${config.widgetUrl}/${config.widgetId}` : config.widgetUrl;
-    if (!config.locale) return base;
     try {
       const u = new URL(base);
-      u.searchParams.set("locale", config.locale);
+      u.searchParams.set("color", config.theme);
+      if (config.locale) u.searchParams.set("locale", config.locale);
       return u.toString();
     } catch {
-      return `${base}?locale=${encodeURIComponent(config.locale)}`;
+      const params = [`color=${config.theme}`];
+      if (config.locale) params.push(`locale=${encodeURIComponent(config.locale)}`);
+      return `${base}?${params.join("&")}`;
     }
   }
 }
 class CustomWidget extends BaseWidget {
   buildWidgetUrl(config) {
     const base = config.widgetUrl.endsWith("custom-widget") ? `${config.widgetUrl}/${config.widgetId}` : config.widgetUrl;
-    if (!config.locale) return base;
     try {
       const u = new URL(base);
-      u.searchParams.set("locale", config.locale);
+      u.searchParams.set("color", config.theme);
+      if (config.locale) u.searchParams.set("locale", config.locale);
       return u.toString();
     } catch {
-      return `${base}?locale=${encodeURIComponent(config.locale)}`;
+      const params = [`color=${config.theme}`];
+      if (config.locale) params.push(`locale=${encodeURIComponent(config.locale)}`);
+      return `${base}?${params.join("&")}`;
     }
   }
 }
-console.log(`[rai-widget] v${"1.2.15"}`);
+console.log(`[rai-widget] v${"1.3.0"}`);
 class StoreWidgetCompat extends StoreWidget {
 }
 const WIDGET_REGISTRY = [
@@ -1183,7 +1464,7 @@ function exposePublicApi() {
   })();
   const widget = container == null ? void 0 : container.querySelector(ALL_WIDGET_SELECTOR);
   window.ReturningAIWidget = {
-    version: "1.2.15",
+    version: "1.3.0",
     reload: () => (widget == null ? void 0 : widget.reload()) ?? Promise.resolve(),
     logout: () => (widget == null ? void 0 : widget.logoutPublic()) ?? Promise.resolve(),
     isAuthenticated: () => (widget == null ? void 0 : widget.isAuthenticated()) ?? false,