obi-sdk 0.3.13 → 0.4.0

package/README.md

@@ -21,6 +21,7 @@ The loader accepts the following configuration options:
 | `apiKey`         | string  | -                | Your Obi API key (required for production)                                                                                                                                        |
 | `user`           | object  | -                | User information with `id` (required), `email` (optional) and `metadata` (optional)                                                                                               |
 | `isActive`       | boolean | `true`           | Whether to show the widget. Set to `false` to disable the widget for specific users                                                                                               |
+| `linkOnlyAccess` | boolean | `false`          | Hide the widget unless accessed via a session link. Perfect for trial periods where only customers with direct links should see the widget                                        |
 | `primaryColor`   | string  | -                | Custom primary color for the widget UI (CSS color value)                                                                                                                          |
 | `secondaryColor` | string  | -                | Custom secondary color for the widget UI (CSS color value)                                                                                                                        |
 
@@ -41,6 +42,30 @@ window.obiWidgetConfig = {
 }
 ```
 
+## Trial Mode / Link-Only Access
+
+The `linkOnlyAccess` option is perfect for trial periods where you want to control who can see and interact with the widget. When enabled, the widget remains hidden until a session is started via a direct link.
+
+```js
+window.obiWidgetConfig = {
+  apiKey: "YOUR_API_KEY",
+  linkOnlyAccess: true, // Widget only visible when accessed via session link
+}
+```
+
+This is ideal for:
+
+- Trial periods where only specific customers should see the widget
+- Beta testing with selected users
+- Controlled rollouts using session-specific links
+- Demo environments where widget access is link-based
+
+When `linkOnlyAccess` is `true`:
+
+- Widget is invisible to regular website visitors
+- Widget becomes visible only when a session is started (e.g., via URL parameters)
+- Once a session ends, the widget returns to hidden state
+
 ## Session Persistence
 
 The SDK now supports session persistence across page reloads and navigation. If a user refreshes the page or navigates to another page on your site, the session with Obi will be automatically restored when they return, providing a seamless experience.

package/dist/loader.d.ts

@@ -10,9 +10,12 @@ interface ObiWidgetConfig {
     user?: {
         id: string;
         email?: string;
-        metadata?: any;
-    };
+        metadata?: Record<string, any>;
+    } | null;
     isActive?: boolean;
+    linkOnlyAccess?: boolean;
+    primaryColor?: string;
+    secondaryColor?: string;
 }
 declare class ObiWidgetLoader {
     private config;

package/dist/modular/chunks/{obi-widget-d7e7c6bf.js → obi-widget-9ef6796a.js}

@@ -534,6 +534,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) {
@@ -590,7 +593,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);
@@ -660,10 +663,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, {
@@ -672,8 +673,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);
@@ -718,6 +719,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 });
@@ -11220,7 +11224,7 @@ SessionStartModal.styles = i$4`
       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),
@@ -11328,11 +11332,13 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+const WIDGET_PARAMS_KEY = "io.obi.widget-parameters";
 class ObiWidget extends i$1 {
   constructor() {
     super();
     this.apiKey = "";
     this.isActive = true;
+    this.linkOnlyAccess = false;
     this.position = "bottom-right";
     this.user = null;
     this.state = SDKState.READY;
@@ -11354,6 +11360,7 @@ class ObiWidget extends i$1 {
     this.boundSaveSessionData = null;
     this.obiClient = null;
     this.closeNavTimeoutRef = null;
+    this.researchingTimeoutRef = null;
     this.handleCourseSelectEvent = (event) => {
       const customEvent = event;
       this.selectedCourse = customEvent.detail;
@@ -11374,10 +11381,12 @@ class ObiWidget extends i$1 {
             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.showSessionStartModal = true;
+          } else {
+            console.log("No session found with token:", sessionToken);
           }
         }
       } catch (error) {
@@ -11404,15 +11413,23 @@ class ObiWidget extends i$1 {
       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
@@ -11438,9 +11455,27 @@ class ObiWidget extends i$1 {
    */
   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 }) => {
@@ -11473,10 +11508,10 @@ class ObiWidget extends i$1 {
     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, {
@@ -11496,12 +11531,12 @@ class ObiWidget extends i$1 {
         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) {
@@ -11582,9 +11617,28 @@ class ObiWidget extends i$1 {
   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];
+      const urlApiKey = storedParams[API_KEY_URL_PARAM];
+      if (urlApiKey) {
+        this.apiKey = urlApiKey;
+      } else if (!this.apiKey && window.obiWidgetConfig?.apiKey) {
+        this.apiKey = window.obiWidgetConfig.apiKey;
+      }
       if (sessionId && this.apiKey) {
         await this.handleUrlSessionEvent(sessionId);
       }
@@ -11603,11 +11657,15 @@ class ObiWidget extends i$1 {
     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() {
@@ -11635,6 +11693,10 @@ class ObiWidget extends i$1 {
     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;
@@ -11659,13 +11721,26 @@ class ObiWidget extends i$1 {
   render() {
     if (!this.isActive)
       return E;
+    if (this.linkOnlyAccess && this.state === SDKState.READY)
+      return E;
     const stateRender = z$2(this.state).with(SDKState.LOADING, () => x`<obi-dot-loader></obi-dot-loader>`).with(SDKState.RESEARCHING, () => x`<obi-searching-loader></obi-searching-loader>`).with(
       N$1.union(SDKState.USER_SPEAKING, SDKState.AGENT_SPEAKING),
       () => x`<obi-audio-equalizer .volume=${this.volume}></obi-audio-equalizer>`
-    ).with(SDKState.PAUSED, () => obiIcon).otherwise(() => obiIcon);
+    ).with(SDKState.THINKING, () => x`<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 x`
       <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}
       >
@@ -11773,7 +11848,7 @@ ObiWidget.styles = i$4`
       position: fixed;
       width: 56px;
       height: 56px;
-      border-radius: 28px;
+      border-radius: 12px;
       border-color: transparent;
       background-color: var(--obi-primary);
       display: flex;
@@ -11789,17 +11864,8 @@ ObiWidget.styles = i$4`
         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 {
@@ -11808,7 +11874,7 @@ ObiWidget.styles = i$4`
       transition: transform 0.5s ease-in-out;
     }
 
-    .widget-container.rounded .widget-icon {
+    .widget-container.rotated .widget-icon {
       transform: rotate(90deg);
     }
 
@@ -11834,6 +11900,9 @@ __decorateClass([
 __decorateClass([
   r$1()
 ], ObiWidget.prototype, "isActive", 2);
+__decorateClass([
+  r$1()
+], ObiWidget.prototype, "linkOnlyAccess", 2);
 __decorateClass([
   r$1()
 ], ObiWidget.prototype, "position", 2);
@@ -11894,4 +11963,4 @@ export {
   searchingLoader as s,
   x
 };
-//# sourceMappingURL=obi-widget-d7e7c6bf.js.map
+//# sourceMappingURL=obi-widget-9ef6796a.js.map