obi-sdk 0.4.1 → 0.4.3

package/dist/modular/chunks/{obi-widget-58dc98b0.js → obi-widget-ad91b91a.js}

@@ -10272,7 +10272,6 @@ NavigationBar.styles = i$4`
       opacity: 1;
       transform: scale(1);
       pointer-events: auto;
-      background-color: #fff;
     }
 
     :host([data-direction="up"]) {
@@ -11155,7 +11154,7 @@ class SessionStartModal extends i$1 {
           <p class="subtitle">${this.session.description}</p>
         </div>
 
-        <button class="button button-primary" @click=${this.handleStart}>Continue →</button>
+        <button class="button button-primary" @click=${this.handleStart}>Continue</button>
       </div>
     `;
   }
@@ -11164,6 +11163,7 @@ SessionStartModal.styles = i$4`
     :host {
       display: block;
       font-family: "Inter", sans-serif;
+      box-sizing: border-box;
     }
 
     .backdrop {
@@ -11177,18 +11177,18 @@ SessionStartModal.styles = i$4`
     }
 
     .container {
+      box-sizing: border-box;
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 50;
-      gap: 32px;
 
       /* Layout from user specifications */
       display: flex;
       width: 640px;
       min-height: 380px;
-      padding: 48px 48px 32px 48px;
+      padding: 32px;
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
@@ -11207,20 +11207,17 @@ SessionStartModal.styles = i$4`
       flex-direction: column;
       align-items: center;
       text-align: center;
-      gap: 16px;
     }
 
     .logo {
       display: flex;
       width: 96px;
       height: 96px;
-      padding: 8px;
       justify-content: center;
       align-items: center;
-      gap: 8px;
       aspect-ratio: 1/1;
-      border-radius: var(--border-radius-lg, 12px);
-      background: var(--tailwind-colors-violet-600, #7c3aed);
+      border-radius: 8px;
+      background: var(--obi-primary, #a10fff);
       box-shadow:
         0px 0px 8px 0px rgba(168, 85, 247, 0.12),
         0px 0px 8px 0px rgba(192, 132, 252, 0.24),
@@ -11238,32 +11235,36 @@ SessionStartModal.styles = i$4`
     }
 
     h1 {
-      font-family: "Syne", sans-serif;
+      font-family: "Satoshi", sans-serif;
       font-size: 32px;
       font-weight: 700;
       color: #111827;
       margin: 0;
+      margin-top: 32px;
+      margin-bottom: 16px;
     }
 
     .subtitle {
+      font-family: "Satoshi", sans-serif;
+      font-weight: 300;
       font-size: 16px;
-      color: #6b7280;
-      line-height: 1.5;
+      color: #18181b;
+      line-height: 1.4;
       margin: 0;
     }
 
     .button {
+      font-family: "Satoshi", sans-serif;
+      font-weight: 400;
+      font-size: 16px;
       padding: 12px 24px;
       border-radius: 8px;
       border: none;
-      font-size: 16px;
-      font-weight: 500;
       cursor: pointer;
       transition: all 0.2s ease;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 8px;
     }
 
     .button-primary {
@@ -11279,6 +11280,7 @@ SessionStartModal.styles = i$4`
       border-radius: var(--border-radius-default, 6px);
       background: var(--base-primary, #18181b);
       color: white;
+      margin-top: 32px;
     }
 
     .button-primary:hover {
@@ -11287,21 +11289,19 @@ SessionStartModal.styles = i$4`
 
     .close-button {
       position: absolute;
-      top: 16px;
+      top: 12px;
       right: 16px;
       background: none;
       border: none;
       cursor: pointer;
       font-size: 24px;
       color: #6b7280;
-      padding: 4px;
-      border-radius: 4px;
-      transition: all 0.2s ease;
-    }
-
-    .close-button:hover {
-      color: #374151;
-      background: #f3f4f6;
+      padding: 0;
+      margin: 0;
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
     }
   `;
 __decorateClass$1([
@@ -11327,7 +11327,6 @@ 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();
@@ -11421,9 +11420,12 @@ class ObiWidget extends i$1 {
     url.searchParams.delete(SESSION_URL_PARAM);
     window.history.replaceState({}, "", url.toString());
     try {
-      localStorage.removeItem(WIDGET_PARAMS_KEY);
+      if (window.__obiUrlParams) {
+        ;
+        window.__obiUrlParams = null;
+      }
     } catch (error) {
-      console.warn("Failed to remove widget parameters from localStorage:", error);
+      console.warn("Failed to clean up window URL parameters:", error);
     }
   }
   /**
@@ -11613,13 +11615,8 @@ class ObiWidget extends i$1 {
     await this.checkExistingSession();
     if (!this.activeSession) {
       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 (window.__obiUrlParams) {
+        storedParams = window.__obiUrlParams;
       }
       if (Object.keys(storedParams).length === 0) {
         const urlParams = new URLSearchParams(window.location.search);
@@ -11630,8 +11627,13 @@ class ObiWidget extends i$1 {
       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");
+      } else if (sessionId && !this.apiKey) {
+        console.log("Session ID found but API key not ready, retrying...");
+        setTimeout(() => {
+          if (this.apiKey) {
+            this.handleUrlSessionEvent(sessionId);
+          }
+        }, 100);
       }
     }
   }
@@ -11642,7 +11644,17 @@ class ObiWidget extends i$1 {
     this.boundSaveSessionData = this.saveSessionData.bind(this);
     window.addEventListener("beforeunload", this.boundSaveSessionData);
     window.addEventListener("pagehide", this.boundSaveSessionData);
-    this.sessionConnectionCheck();
+    if (document.readyState === "complete") {
+      Promise.resolve().then(() => this.sessionConnectionCheck());
+    } else {
+      window.addEventListener(
+        "load",
+        () => {
+          Promise.resolve().then(() => this.sessionConnectionCheck());
+        },
+        { once: true }
+      );
+    }
   }
   disconnectedCallback() {
     if (this.closeNavTimeoutRef !== null) {
@@ -11722,6 +11734,8 @@ class ObiWidget extends i$1 {
     const isResearching = this.state === SDKState.RESEARCHING;
     const isUserSpeaking = this.state === SDKState.USER_SPEAKING;
     const isRotated = this.state !== SDKState.READY || this.navVisible;
+    const shouldShowNav = this.state !== SDKState.READY || this.navVisible;
+    const navDirection = this.position.includes("top") ? "down" : "up";
     const containerClasses = [
       "widget-container",
       isRotated ? "rotated" : "",
@@ -11736,11 +11750,11 @@ class ObiWidget extends i$1 {
         @mouseleave=${this.handleMouseLeave}
       >
         ${stateRender}
-        ${this.navVisible && this.state !== SDKState.RESEARCHING ? x`
+        ${shouldShowNav && this.state !== SDKState.RESEARCHING ? x`
               <obi-navigation-bar
                 ?isActive=${this.state !== SDKState.READY}
                 .position=${this.position}
-                data-direction="up"
+                data-direction="${navDirection}"
                 .currentState=${this.state}
                 .onItemSelect=${this.handleItemSelect.bind(this)}
               ></obi-navigation-bar>
@@ -11793,7 +11807,6 @@ ObiWidget.styles = i$4`
     :host([position="bottom-center"]) {
       bottom: 80px;
       left: 50%;
-      transform: translateX(-50%);
     }
 
     :host([position="top-right"]) {
@@ -11809,19 +11822,16 @@ ObiWidget.styles = i$4`
     :host([position="top-center"]) {
       top: 20px;
       left: 50%;
-      transform: translateX(-50%);
     }
 
     :host([position="middle-left"]) {
       top: 50%;
       left: 20px;
-      transform: translateY(-50%);
     }
 
     :host([position="middle-right"]) {
       top: 50%;
       right: 80px;
-      transform: translateY(-50%);
     }
 
     /* Adjust position when in researching state to accommodate wider container */
@@ -11851,6 +11861,23 @@ ObiWidget.styles = i$4`
       transition: all 0.2s ease-out;
     }
 
+    /* Apply transforms to widget-container based on host position */
+    :host([position="bottom-center"]) .widget-container {
+      transform: translateX(-50%);
+    }
+
+    :host([position="top-center"]) .widget-container {
+      transform: translateX(-50%);
+    }
+
+    :host([position="middle-left"]) .widget-container {
+      transform: translateY(-50%);
+    }
+
+    :host([position="middle-right"]) .widget-container {
+      transform: translateY(-50%);
+    }
+
     .widget-container.user-speaking {
       background:
         linear-gradient(0deg, var(--obi-secondary), var(--obi-secondary)),
@@ -11956,4 +11983,4 @@ export {
   searchingLoader as s,
   x
 };
-//# sourceMappingURL=obi-widget-58dc98b0.js.map
+//# sourceMappingURL=obi-widget-ad91b91a.js.map