obi-sdk 0.3.13 → 0.4.1

package/dist/obi-sdk.es.js

@@ -15466,23 +15466,23 @@ class RTCEngine extends eventsExports.EventEmitter {
         this.close();
       };
       const duration2 = Date.now() - this.reconnectStart;
-      let delay = this.getNextRetryDelay({
+      let delay2 = this.getNextRetryDelay({
         elapsedMs: duration2,
         retryCount: this.reconnectAttempts
       });
-      if (delay === null) {
+      if (delay2 === null) {
         disconnect(duration2);
         return;
       }
       if (connection === leaveReconnect) {
-        delay = 0;
+        delay2 = 0;
       }
-      this.log.debug("reconnecting in ".concat(delay, "ms"), this.logContext);
+      this.log.debug("reconnecting in ".concat(delay2, "ms"), this.logContext);
       this.clearReconnectTimeout();
       if (this.token && this.regionUrlProvider) {
         this.regionUrlProvider.updateToken(this.token);
       }
-      this.reconnectTimeout = CriticalTimers.setTimeout(() => this.attemptReconnect(disconnectReason).finally(() => this.reconnectTimeout = void 0), delay);
+      this.reconnectTimeout = CriticalTimers.setTimeout(() => this.attemptReconnect(disconnectReason).finally(() => this.reconnectTimeout = void 0), delay2);
     };
     this.waitForRestarted = () => {
       return new Promise((resolve, reject) => {
@@ -22954,6 +22954,9 @@ class ObiSession {
     this._userAudioTimer = null;
     this.sessionId = sessionId;
     this.apiBaseUrl = apiBaseUrl || DEFAULT_API_BASE_URL;
+    this.client = new ObiClient({
+      baseUrl: this.apiBaseUrl
+    });
     this.emitter = new EventEmitter();
   }
   emit(event, data) {
@@ -23010,7 +23013,7 @@ class ObiSession {
       if (this.currentState === SDKState.RESEARCHING || this.currentState === SDKState.PAUSED)
         return;
       const state = attributes["lk.agent.state"];
-      const newState = z$2(state).with("listening", () => SDKState.USER_SPEAKING).with("speaking", () => SDKState.AGENT_SPEAKING).with("thinking", () => SDKState.AGENT_SPEAKING).otherwise(() => void 0);
+      const newState = z$2(state).with("listening", () => SDKState.USER_SPEAKING).with("speaking", () => SDKState.AGENT_SPEAKING).with("thinking", () => SDKState.THINKING).otherwise(() => void 0);
       if (!newState)
         return;
       this.setState(newState);
@@ -23080,10 +23083,8 @@ class ObiSession {
         dynacast: true
       });
       this.setupRoomEventListeners();
-      const params = new URLSearchParams({ token: this.sessionId, skip_intro: "true" });
-      const joinEndpoint = `${this.apiBaseUrl}/join-token?${params.toString()}`;
-      const joinToken = await fetch(joinEndpoint).then((res) => res.json());
-      await this.room.connect(joinToken.url, joinToken.token);
+      const joinToken = await this.client.getJoinToken(this.sessionId, { skipIntro: true });
+      await this.room.connect(joinToken.data.url, joinToken.data.token);
       if (this.microphoneStream) {
         const micTrack = this.microphoneStream.getAudioTracks()[0];
         await this.room.localParticipant.publishTrack(micTrack, {
@@ -23092,8 +23093,8 @@ class ObiSession {
         });
       }
       return {
-        url: joinToken.url,
-        token: joinToken.token
+        url: joinToken.data.url,
+        token: joinToken.data.token
       };
     } catch (error) {
       console.error("Failed to connect to LiveKit:", error);
@@ -23138,6 +23139,9 @@ class ObiSession {
     this.currentState = newState;
     this.emitter.emit("stateChanged", newState);
   }
+  getCurrentState() {
+    return this.currentState;
+  }
   async requestMicrophone() {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -23294,7 +23298,6 @@ class ObiSession {
   }
 }
 const SESSION_URL_PARAM = "49206C6F7665204F6269_session";
-const API_KEY_URL_PARAM = "49206C6F7665204F6269_client";
 var extendStatics = function(d2, b2) {
   extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d3, b3) {
     d3.__proto__ = b3;
@@ -33389,7 +33392,7 @@ class DotLoader extends LitElement {
   animateSequence() {
     this.activeDots = Array(this.numDots).fill(false);
     for (let i2 = 0; i2 < this.numDots; i2++) {
-      const delay = i2 * (this.animationDuration * this.overlapFactor);
+      const delay2 = i2 * (this.animationDuration * this.overlapFactor);
       const bounceStartId = window.setTimeout(() => {
         this.activeDots = [...this.activeDots];
         this.activeDots[i2] = true;
@@ -33398,7 +33401,7 @@ class DotLoader extends LitElement {
           this.activeDots[i2] = false;
         }, this.animationDuration);
         this.timeoutIds.push(bounceEndId);
-      }, delay);
+      }, delay2);
       this.timeoutIds.push(bounceStartId);
     }
     const nextSequenceId = window.setTimeout(
@@ -33507,14 +33510,9 @@ class SessionStartModal extends LitElement {
       this.onClose();
     }
   }
-  handleBackdropClick(e2) {
-    if (e2.target === e2.currentTarget) {
-      this.handleClose();
-    }
-  }
   render() {
     return html`
-      <div class="backdrop" @click=${this.handleBackdropClick}></div>
+      <div class="backdrop"></div>
       <div class="container">
         <button class="close-button" @click=${this.handleClose}>×</button>
 
@@ -33551,11 +33549,12 @@ SessionStartModal.styles = css`
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 50;
+      gap: 32px;
 
       /* Layout from user specifications */
       display: flex;
       width: 640px;
-      height: 380px;
+      min-height: 380px;
       padding: 48px 48px 32px 48px;
       flex-direction: column;
       justify-content: space-between;
@@ -33587,7 +33586,7 @@ SessionStartModal.styles = css`
       align-items: center;
       gap: 8px;
       aspect-ratio: 1/1;
-      border-radius: var(--border-radius-lg, 8px);
+      border-radius: var(--border-radius-lg, 12px);
       background: var(--tailwind-colors-violet-600, #7c3aed);
       box-shadow:
         0px 0px 8px 0px rgba(168, 85, 247, 0.12),
@@ -33609,15 +33608,15 @@ SessionStartModal.styles = css`
       font-family: "Syne", sans-serif;
       font-size: 32px;
       font-weight: 700;
-      margin: 32px 0 0 0;
       color: #111827;
+      margin: 0;
     }
 
     .subtitle {
       font-size: 16px;
       color: #6b7280;
-      margin: 16px 0 0 0;
       line-height: 1.5;
+      margin: 0;
     }
 
     .button {
@@ -33695,11 +33694,13 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const WIDGET_PARAMS_KEY = "io.obi.widget-parameters";
 class ObiWidget extends LitElement {
   constructor() {
     super();
     this.apiKey = "";
     this.isActive = true;
+    this.linkOnlyAccess = false;
     this.position = "bottom-right";
     this.user = null;
     this.state = SDKState.READY;
@@ -33721,6 +33722,7 @@ class ObiWidget extends LitElement {
     this.boundSaveSessionData = null;
     this.obiClient = null;
     this.closeNavTimeoutRef = null;
+    this.researchingTimeoutRef = null;
     this.handleCourseSelectEvent = (event) => {
       const customEvent = event;
       this.selectedCourse = customEvent.detail;
@@ -33741,10 +33743,13 @@ class ObiWidget extends LitElement {
             const sessionWithPlan = matchingSession;
             this.selectedCourse = {
               id: sessionToken,
-              name: sessionWithPlan.onboarding_plan?.product?.name || "Session from URL",
-              description: sessionWithPlan.onboarding_plan?.product?.description || "Continue your session"
+              name: sessionWithPlan.onboarding_plan?.name || "",
+              description: sessionWithPlan.onboarding_plan?.description || ""
             };
+            this.state = SDKState.LOADING;
             this.showSessionStartModal = true;
+          } else {
+            console.log("No session found with token:", sessionToken);
           }
         }
       } catch (error) {
@@ -33771,15 +33776,22 @@ class ObiWidget extends LitElement {
       if (window.obiWidgetConfig.isActive !== void 0) {
         this.isActive = window.obiWidgetConfig.isActive;
       }
+      if (window.obiWidgetConfig.linkOnlyAccess !== void 0) {
+        this.linkOnlyAccess = window.obiWidgetConfig.linkOnlyAccess;
+      }
       this.style.setProperty("--obi-primary", window.obiWidgetConfig?.primaryColor || "#9500ff");
       this.style.setProperty("--obi-secondary", window.obiWidgetConfig?.secondaryColor || "#c4b5fd");
     }
   }
-  removeSessionFromUrl() {
+  removeSessionUrlParams() {
     const url = new URL(window.location.href);
     url.searchParams.delete(SESSION_URL_PARAM);
-    url.searchParams.delete(API_KEY_URL_PARAM);
     window.history.replaceState({}, "", url.toString());
+    try {
+      localStorage.removeItem(WIDGET_PARAMS_KEY);
+    } catch (error) {
+      console.warn("Failed to remove widget parameters from localStorage:", error);
+    }
   }
   /**
    * Create a new ObiSession instance with common configuration
@@ -33805,9 +33817,27 @@ class ObiWidget extends LitElement {
    */
   setupSessionEventListeners(session, onError) {
     session.on("stateChanged", (newState) => {
-      this.state = newState;
-      if (newState !== SDKState.READY) {
+      if (newState === SDKState.RESEARCHING) {
+        if (this.researchingTimeoutRef) {
+          window.clearTimeout(this.researchingTimeoutRef);
+        }
+        this.state = newState;
+        this.researchingTimeoutRef = window.setTimeout(() => {
+          this.researchingTimeoutRef = null;
+          const currentSessionState = session.getCurrentState();
+          this.state = currentSessionState;
+          if (currentSessionState !== SDKState.READY) {
+            this.storedActiveState = currentSessionState;
+          }
+        }, 1500);
         this.storedActiveState = newState;
+        return;
+      }
+      if (this.researchingTimeoutRef === null) {
+        this.state = newState;
+        if (newState !== SDKState.READY) {
+          this.storedActiveState = newState;
+        }
       }
     });
     session.on("volume", ({ speaker, spectrum, volume }) => {
@@ -33840,10 +33870,10 @@ class ObiWidget extends LitElement {
     try {
       const session = this.createSession(sessionToken);
       if (!session) {
-        this.handleSessionCreationFailure(() => this.removeSessionFromUrl());
+        this.handleSessionCreationFailure(() => this.removeSessionUrlParams());
         return;
       }
-      this.setupSessionEventListeners(session, () => this.removeSessionFromUrl());
+      this.setupSessionEventListeners(session, () => this.removeSessionUrlParams());
       session.on("screenCaptureRequested", async () => {
         try {
           const canvas = await html2canvas(document.documentElement, {
@@ -33863,12 +33893,12 @@ class ObiWidget extends LitElement {
         this.sessionToken = sessionToken;
         this.roomToken = connectionInfo.token;
         this.roomUrl = connectionInfo.url;
-        this.removeSessionFromUrl();
+        this.removeSessionUrlParams();
       }
       this.activeSession = session;
     } catch (error) {
       console.error("Failed to start session:", error);
-      this.handleSessionCreationFailure(() => this.removeSessionFromUrl());
+      this.handleSessionCreationFailure(() => this.removeSessionUrlParams());
     }
   }
   async handleSessionStart(sessionToken) {
@@ -33949,11 +33979,26 @@ class ObiWidget extends LitElement {
   async sessionConnectionCheck() {
     await this.checkExistingSession();
     if (!this.activeSession) {
-      const urlParams = new URLSearchParams(window.location.search);
-      const sessionId = urlParams.get(SESSION_URL_PARAM);
-      this.apiKey = urlParams.get(API_KEY_URL_PARAM) || this.apiKey;
+      let storedParams = {};
+      try {
+        const storedParamsJson = localStorage.getItem(WIDGET_PARAMS_KEY);
+        if (storedParamsJson) {
+          storedParams = JSON.parse(storedParamsJson);
+        }
+      } catch (error) {
+        console.warn("Failed to parse stored widget parameters:", error);
+      }
+      if (Object.keys(storedParams).length === 0) {
+        const urlParams = new URLSearchParams(window.location.search);
+        urlParams.forEach((value, key) => {
+          storedParams[key] = value;
+        });
+      }
+      const sessionId = storedParams[SESSION_URL_PARAM];
       if (sessionId && this.apiKey) {
         await this.handleUrlSessionEvent(sessionId);
+      } else {
+        console.log("No session ID found or API key is not set");
       }
     }
   }
@@ -33970,11 +34015,15 @@ class ObiWidget extends LitElement {
     if (this.closeNavTimeoutRef !== null) {
       window.clearTimeout(this.closeNavTimeoutRef);
     }
+    if (this.researchingTimeoutRef !== null) {
+      window.clearTimeout(this.researchingTimeoutRef);
+      this.researchingTimeoutRef = null;
+    }
     if (this.boundSaveSessionData) {
       window.removeEventListener("beforeunload", this.boundSaveSessionData);
       window.removeEventListener("pagehide", this.boundSaveSessionData);
     }
-    this.removeSessionFromUrl();
+    this.removeSessionUrlParams();
     super.disconnectedCallback();
   }
   handleMouseEnter() {
@@ -34002,6 +34051,10 @@ class ObiWidget extends LitElement {
     this.sessionToken = null;
     this.roomToken = null;
     this.roomUrl = null;
+    if (this.researchingTimeoutRef !== null) {
+      window.clearTimeout(this.researchingTimeoutRef);
+      this.researchingTimeoutRef = null;
+    }
     if (this.activeSession) {
       this.activeSession.disconnect();
       this.activeSession = null;
@@ -34026,13 +34079,26 @@ class ObiWidget extends LitElement {
   render() {
     if (!this.isActive)
       return nothing;
+    if (this.linkOnlyAccess && this.state === SDKState.READY)
+      return nothing;
     const stateRender = z$2(this.state).with(SDKState.LOADING, () => html`<obi-dot-loader></obi-dot-loader>`).with(SDKState.RESEARCHING, () => html`<obi-searching-loader></obi-searching-loader>`).with(
       N$1.union(SDKState.USER_SPEAKING, SDKState.AGENT_SPEAKING),
       () => html`<obi-audio-equalizer .volume=${this.volume}></obi-audio-equalizer>`
-    ).with(SDKState.PAUSED, () => obiIcon).otherwise(() => obiIcon);
+    ).with(SDKState.THINKING, () => html`<obi-dot-loader></obi-dot-loader>`).with(SDKState.PAUSED, () => obiIcon).otherwise(() => obiIcon);
+    const isPulseState = this.state === SDKState.USER_SPEAKING || this.state === SDKState.AGENT_SPEAKING;
+    const isResearching = this.state === SDKState.RESEARCHING;
+    const isUserSpeaking = this.state === SDKState.USER_SPEAKING;
+    const isRotated = this.state !== SDKState.READY || this.navVisible;
+    const containerClasses = [
+      "widget-container",
+      isRotated ? "rotated" : "",
+      isPulseState ? "pulse" : "",
+      isResearching ? "researching" : "",
+      isUserSpeaking ? "user-speaking" : ""
+    ].filter(Boolean).join(" ");
     return html`
       <div
-        class="widget-container ${this.state === SDKState.USER_SPEAKING || this.state === SDKState.AGENT_SPEAKING ? "pulse" : ""} ${this.state !== SDKState.READY || this.navVisible ? "rounded" : ""} ${this.state === SDKState.RESEARCHING ? "researching" : ""} ${this.state === SDKState.USER_SPEAKING ? "user-speaking" : ""}"
+        class="${containerClasses}"
         @mouseenter=${this.handleMouseEnter}
         @mouseleave=${this.handleMouseLeave}
       >
@@ -34058,6 +34124,8 @@ class ObiWidget extends LitElement {
             .onClose=${() => {
       this.showSessionStartModal = false;
       this.selectedCourse = null;
+      this.state = SDKState.READY;
+      this.removeSessionUrlParams();
     }}
           ></obi-session-start-modal>` : nothing}
     `;
@@ -34140,7 +34208,7 @@ ObiWidget.styles = css`
       position: fixed;
       width: 56px;
       height: 56px;
-      border-radius: 28px;
+      border-radius: 12px;
       border-color: transparent;
       background-color: var(--obi-primary);
       display: flex;
@@ -34156,17 +34224,8 @@ ObiWidget.styles = css`
         linear-gradient(195.84deg, var(--obi-secondary) 00 11.05%, var(--obi-secondary) 117.01%);
     }
 
-    .widget-container:hover {
-      border-radius: 12px;
-    }
-
-    .widget-container.rounded {
-      border-radius: 12px;
-    }
-
     .widget-container.researching {
       width: 273px;
-      border-radius: 12px;
     }
 
     .widget-icon {
@@ -34175,7 +34234,7 @@ ObiWidget.styles = css`
       transition: transform 0.5s ease-in-out;
     }
 
-    .widget-container.rounded .widget-icon {
+    .widget-container.rotated .widget-icon {
       transform: rotate(90deg);
     }
 
@@ -34201,6 +34260,9 @@ __decorateClass([
 __decorateClass([
   r$2()
 ], ObiWidget.prototype, "isActive", 2);
+__decorateClass([
+  r$2()
+], ObiWidget.prototype, "linkOnlyAccess", 2);
 __decorateClass([
   r$2()
 ], ObiWidget.prototype, "position", 2);
@@ -34240,6 +34302,36 @@ if (!customElements.get("obi-widget")) {
 if (!customElements.get("obi-widget")) {
   customElements.define("obi-widget", ObiWidget);
 }
+const RETRY_CONFIG = {
+  maxAttempts: 3,
+  baseDelay: 200,
+  // ms
+  maxDelay: 2e3
+  // ms
+};
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function getRetryDelay(attempt) {
+  const exponentialDelay = RETRY_CONFIG.baseDelay * Math.pow(2, attempt);
+  return Math.min(exponentialDelay, RETRY_CONFIG.maxDelay);
+}
+async function retryOperation(operation, operationName, maxAttempts = RETRY_CONFIG.maxAttempts) {
+  let lastError = null;
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    try {
+      return await operation();
+    } catch (error) {
+      lastError = error;
+      console.warn(`${operationName} failed (attempt ${attempt + 1}/${maxAttempts}):`, error);
+      if (attempt < maxAttempts - 1) {
+        const delayMs = getRetryDelay(attempt);
+        await delay(delayMs);
+      }
+    }
+  }
+  throw new Error(`${operationName} failed after ${maxAttempts} attempts: ${lastError?.message}`);
+}
 function mountSDK() {
   const w2 = window;
   if (typeof w2.ObiSDK === "function" || typeof w2.ObiSDK === "object") {
@@ -34255,12 +34347,18 @@ function mountSDK() {
   };
   w2.ObiSDK.q = [];
 }
-function mountWidget() {
-  if (!document.querySelector("obi-widget")) {
+async function mountWidget() {
+  return retryOperation(async () => {
+    if (document.querySelector("obi-widget")) {
+      return;
+    }
+    if (!document.body) {
+      throw new Error("document.body not available");
+    }
     const widget = document.createElement("obi-widget");
     document.body.appendChild(widget);
     console.log("Obi Widget mounted");
-  }
+  }, "Widget mounting");
 }
 function processQueue() {
   const w2 = window;
@@ -34277,17 +34375,62 @@ function processQueue() {
     w2.ObiSDK.q = [];
   }
 }
-function loadFonts() {
-  const link = document.createElement("link");
-  link.href = "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Syne:wght@400..800&display=swap";
-  link.rel = "stylesheet";
-  document.head.appendChild(link);
+async function loadFonts() {
+  return retryOperation(async () => {
+    if (!document.head) {
+      throw new Error("document.head not available");
+    }
+    const existingLink = document.head.querySelector('link[href*="fonts.googleapis.com"]');
+    if (existingLink) {
+      return;
+    }
+    const link = document.createElement("link");
+    document.head.querySelectorAll("link[data-obi-font]").forEach((node) => node.remove());
+    link.setAttribute("data-obi-font", "true");
+    link.href = "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Syne:wght@400..800&display=swap";
+    link.rel = "stylesheet";
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error("Font loading timeout"));
+      }, 5e3);
+      link.onload = () => {
+        clearTimeout(timeout);
+        resolve();
+      };
+      link.onerror = () => {
+        clearTimeout(timeout);
+        reject(new Error("Font loading failed"));
+      };
+      document.head.appendChild(link);
+    });
+  }, "Font loading");
+}
+async function safeInitialize() {
+  try {
+    mountSDK();
+    await loadFonts();
+    await mountWidget();
+    processQueue();
+    console.log("Obi Widget initialized successfully");
+  } catch (error) {
+    console.error("Obi Widget initialization failed:", error);
+    try {
+      mountSDK();
+      processQueue();
+      console.log("Obi Widget fallback initialization completed");
+    } catch (fallbackError) {
+      console.error("Obi Widget fallback initialization failed:", fallbackError);
+    }
+  }
 }
 function initializeObiWidget() {
-  loadFonts();
-  mountSDK();
-  mountWidget();
-  processQueue();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      safeInitialize();
+    });
+  } else {
+    safeInitialize();
+  }
 }
 initializeObiWidget();
 export {