obi-sdk 0.6.6 → 0.7.0

package/dist/loader.d.ts

@@ -14,6 +14,7 @@ interface ObiWidgetConfig {
     } | null;
     isActive?: boolean;
     linkOnlyAccess?: boolean;
+    showMenu?: boolean;
     primaryColor?: string;
 }
 declare class ObiWidgetLoader {

package/dist/modular/chunks/index-f31a59cc.js

@@ -0,0 +1,6 @@
+import { O } from "./obi-widget-6550377d.js";
+import "./types-e0297e7b.js";
+export {
+  O as ObiWidget
+};
+//# sourceMappingURL=index-f31a59cc.js.map

package/dist/modular/chunks/index-f31a59cc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-f31a59cc.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/modular/chunks/{obi-widget-94e8c026.js → obi-widget-6550377d.js}

@@ -481,6 +481,11 @@ class ObiClient {
       body: data
     });
   }
+  async getPlanVideoUrl(id) {
+    return await this.client.GET("/plans/{id}/video-url", {
+      params: { path: { id } }
+    });
+  }
   // Sessions
   async listSessions(token) {
     return await this.client.GET("/sessions", {
@@ -15810,13 +15815,11 @@ function getDefaultIntegrations(_options) {
   ];
 }
 function createSentryScope() {
-  const integrations = getDefaultIntegrations().filter(
-    (defaultIntegration) => {
-      return !["BrowserApiErrors", "Breadcrumbs", "GlobalHandlers", "HttpContext"].includes(
-        defaultIntegration.name
-      );
-    }
-  );
+  const integrations = getDefaultIntegrations().filter((defaultIntegration) => {
+    return !["BrowserApiErrors", "Breadcrumbs", "GlobalHandlers", "HttpContext"].includes(
+      defaultIntegration.name
+    );
+  });
   const client = new BrowserClient({
     dsn: "https://ac54bd10eac67be2dafbc346e704e4d4@o4507251798835200.ingest.us.sentry.io/4509409566392320",
     environment: "production",
@@ -16511,6 +16514,7 @@ CourseList.styles = i$4`
       padding: 12px 0px;
       flex: 1 0 0;
       align-self: stretch;
+      min-height: 364px; /* Ensure minimum 2 rows: 2 * 180px + 4px gap */
     }
 
     @media (max-width: 767px) {
@@ -16571,6 +16575,7 @@ class CourseModal extends i$1 {
     this.apiKey = "";
     this.apiBaseUrl = "";
     this.selectedCourse = null;
+    this.agentName = "";
   }
   handleClose() {
     if (this.onClose) {
@@ -16586,26 +16591,49 @@ class CourseModal extends i$1 {
           composed: true
         })
       );
-      this.onClose?.();
     }
   }
   async fetchCourses() {
     try {
       this.loading = true;
-      const raw_response = await fetch(`${this.apiBaseUrl}/sessions?token=${this.apiKey}`);
+      console.log("[CourseModal] Fetching sessions from API", {
+        apiKey: this.apiKey ? "present" : "missing"
+      });
+      const raw_response = await fetch(`${this.apiBaseUrl}/sessions?token=${this.apiKey}`, {
+        cache: "no-cache",
+        headers: {
+          "Cache-Control": "no-cache, no-store, must-revalidate",
+          Pragma: "no-cache"
+        }
+      });
+      if (!raw_response.ok) {
+        throw new Error(`HTTP ${raw_response.status}: ${raw_response.statusText}`);
+      }
       const response = await raw_response.json();
-      const mappedCourses = response.sessions?.map((session) => ({
-        id: session.uuid,
-        name: session.onboarding_plan.name,
-        description: session.onboarding_plan.description,
-        duration: session.onboarding_plan.duration
-      }));
+      let agentName = "";
+      const mappedCourses = response.sessions?.map((session) => {
+        if (!agentName) {
+          agentName = session.onboarding_plan.product.agent_name;
+        }
+        return {
+          id: session.uuid,
+          name: session.onboarding_plan.name,
+          description: session.onboarding_plan.description,
+          duration: session.onboarding_plan.duration
+        };
+      });
       const filteredCourses = mappedCourses.filter((course) => !!course.name);
+      this.agentName = agentName || "Obi";
       this.courses = [...filteredCourses];
+      this.error = "";
+      console.log("[CourseModal] Sessions fetched successfully", {
+        sessionCount: filteredCourses.length,
+        sessions: filteredCourses.map((c2) => ({ id: c2.id, name: c2.name }))
+      });
       this.requestUpdate();
     } catch (err) {
-      console.error("Fetch error:", err);
-      this.error = "Failed to fetch courses";
+      console.error("[CourseModal] Fetch error:", err);
+      this.error = `Failed to fetch courses: ${err instanceof Error ? err.message : "Unknown error"}`;
     } finally {
       this.loading = false;
       this.requestUpdate();
@@ -16635,8 +16663,15 @@ class CourseModal extends i$1 {
         <div class="header">
           <div class="icon">${obiIcon}</div>
           <div class="title-section">
-            <h1>Give Obi a try!</h1>
-            <p class="subtitle">Pick a tour, share your screen, and Obi will take it from there.</p>
+            ${this.loading ? x`
+                  <div class="skeleton skeleton-title"></div>
+                  <div class="skeleton skeleton-subtitle"></div>
+                ` : x`
+                  <h1>Give ${this.agentName} a try!</h1>
+                  <p class="subtitle">
+                    Pick a tour, share your screen, and ${this.agentName} will take it from there.
+                  </p>
+                `}
           </div>
           <button class="close-button" aria-label="Close course modal" @click=${this.handleClose}>
             <svg
@@ -16701,7 +16736,7 @@ class CourseModal extends i$1 {
 CourseModal.styles = i$4`
     :host {
       display: block;
-      font-family: "Syne", sans-serif;
+      font-family: "Satoshi", sans-serif;
     }
 
     .backdrop {
@@ -16890,6 +16925,33 @@ CourseModal.styles = i$4`
       margin: 0;
       text-align: center;
     }
+
+    .skeleton {
+      background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+      background-size: 200% 100%;
+      animation: loading 1.5s infinite;
+      border-radius: 4px;
+    }
+
+    @keyframes loading {
+      0% {
+        background-position: 200% 0;
+      }
+      100% {
+        background-position: -200% 0;
+      }
+    }
+
+    .skeleton-title {
+      height: 32px;
+      width: 60%;
+      margin-bottom: 12px;
+    }
+
+    .skeleton-subtitle {
+      height: 20px;
+      width: 80%;
+    }
   `;
 __decorateClass$4([
   n$2({ type: Array })
@@ -16912,6 +16974,9 @@ __decorateClass$4([
 __decorateClass$4([
   r$1()
 ], CourseModal.prototype, "selectedCourse", 2);
+__decorateClass$4([
+  r$1()
+], CourseModal.prototype, "agentName", 2);
 if (!customElements.get("obi-course-modal")) {
   customElements.define("obi-course-modal", CourseModal);
 }
@@ -17372,12 +17437,144 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   return result;
 };
 class SessionStartModal extends i$1 {
-  handleStart() {
-    if (this.onStart && this.session) {
+  constructor() {
+    super(...arguments);
+    this.isLoading = false;
+    this.error = null;
+    this.startAttempts = 0;
+  }
+  async handleStart() {
+    console.log("[SessionStartModal] Start button clicked", {
+      sessionId: this.session?.id,
+      hasOnStartCallback: !!this.onStart,
+      hasSession: !!this.session,
+      isLoading: this.isLoading,
+      startAttempts: this.startAttempts,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    trackEvent(
+      "session_start_modal_continue_clicked",
+      {
+        sessionId: this.session?.id,
+        sessionName: this.session?.name
+      },
+      "SessionStartModal"
+    );
+    if (this.isLoading) {
+      console.warn("[SessionStartModal] Start already in progress, ignoring click");
+      return;
+    }
+    if (!this.session) {
+      const error = "Session data is missing.";
+      console.error("[SessionStartModal] Validation failed:", error);
+      this.showError(error);
+      return;
+    }
+    if (!this.session.id) {
+      const error = "Session ID is missing.";
+      console.error("[SessionStartModal] Validation failed:", error, { session: this.session });
+      this.showError(error);
+      return;
+    }
+    if (!this.onStart) {
+      const error = "Start callback is not defined.";
+      console.error("[SessionStartModal] Validation failed:", error);
+      captureException(error, {
+        componentName: "SessionStartModal",
+        handlerName: "handleStart",
+        sessionData: this.session,
+        hasOnStart: !!this.onStart
+      });
+      this.showError(error);
+      return;
+    }
+    this.startAttempts++;
+    console.log("[SessionStartModal] Starting session attempt", {
+      attempt: this.startAttempts,
+      sessionId: this.session.id
+    });
+    this.error = null;
+    this.isLoading = true;
+    try {
+      console.log("[SessionStartModal] Calling onStart callback", {
+        sessionId: this.session.id,
+        attempt: this.startAttempts
+      });
+      trackEvent(
+        "session_start_modal_calling_onStart",
+        {
+          sessionId: this.session.id
+        },
+        "SessionStartModal"
+      );
       this.onStart(this.session.id);
+      console.log("[SessionStartModal] Session start completed successfully", {
+        sessionId: this.session.id,
+        attempt: this.startAttempts
+      });
+      trackEvent(
+        "session_start_modal_onStart_called",
+        {
+          sessionId: this.session.id
+        },
+        "SessionStartModal"
+      );
+      setTimeout(() => {
+        if (this.isConnected) {
+          captureException(
+            new Error("Session start modal did not close after Continue was clicked"),
+            {
+              componentName: "SessionStartModal",
+              handlerName: "handleStart_timeout",
+              sessionId: this.session?.id,
+              modalStillVisible: true
+            }
+          );
+        }
+      }, 2e3);
+    } catch (error) {
+      console.error("[SessionStartModal] Session start failed", {
+        sessionId: this.session.id,
+        attempt: this.startAttempts,
+        error: error instanceof Error ? error.message : String(error),
+        errorStack: error instanceof Error ? error.stack : void 0
+      });
+      captureException(error, {
+        componentName: "SessionStartModal",
+        handlerName: "handleStart",
+        sessionId: this.session?.id
+      });
+      this.isLoading = false;
+      if (error instanceof Error) {
+        if (error.message.includes("network") || error.message.includes("fetch")) {
+          this.showError(
+            "Network connection failed. Please check your internet connection, refresh the page, and try again."
+          );
+        } else if (error.message.includes("unauthorized") || error.message.includes("403")) {
+          this.showError("Session access denied.");
+        } else if (error.message.includes("session") && error.message.includes("not found")) {
+          this.showError("Session not found.");
+        } else {
+          this.showError(`Failed to start session: ${error.message}.`);
+        }
+      } else {
+        this.showError("An unexpected error occurred while starting the session.");
+      }
     }
   }
+  showError(message) {
+    this.error = message;
+    console.error("[SessionStartModal] Displaying error to user:", message);
+  }
   handleClose() {
+    console.log("[SessionStartModal] Close button clicked", {
+      sessionId: this.session?.id,
+      isLoading: this.isLoading,
+      startAttempts: this.startAttempts
+    });
+    if (this.isLoading) {
+      console.warn("[SessionStartModal] Attempted to close while loading");
+    }
     if (this.onClose) {
       this.onClose();
     }
@@ -17390,17 +17587,33 @@ class SessionStartModal extends i$1 {
           class="close-button"
           aria-label="Close session start modal"
           @click=${this.handleClose}
+          ?disabled=${this.isLoading}
         >
           ×
         </button>
 
         <div class="header">
           <div class="logo">${obiIcon}</div>
-          <h1>${this.session.name}</h1>
-          <p class="subtitle">${this.session.description}</p>
+          <h1>${this.session?.name || "Session"}</h1>
+          <p class="subtitle">${this.session?.description || "Starting your session..."}</p>
         </div>
 
-        <button class="button button-primary" @click=${this.handleStart}>Continue</button>
+        <button
+          class="button button-primary"
+          @click=${this.handleStart}
+          ?disabled=${this.isLoading}
+          aria-label=${this.isLoading ? "Starting session..." : "Start session"}
+        >
+          ${this.isLoading ? x`<div class="loading-spinner"></div>
+                <span class="button-text">Starting...</span>` : x`<span class="button-text">Continue</span>`}
+        </button>
+
+        ${this.error ? x`
+              <div class="error-message">
+                <div>${this.error}</div>
+                <div>Please refresh the page and try again.</div>
+              </div>
+            ` : ""}
       </div>
     `;
   }
@@ -17532,12 +17745,80 @@ SessionStartModal.styles = i$4`
       background: #18181b;
       color: white;
       margin-top: 32px;
+      position: relative;
+      overflow: hidden;
     }
 
-    .button-primary:hover {
+    .button-primary:hover:not(:disabled) {
       background: color-mix(in srgb, #18181b 90%, white);
     }
 
+    .button-primary:disabled {
+      background: #6b7280;
+      cursor: not-allowed;
+    }
+
+    .button-primary:disabled .button-text {
+      opacity: 0.7;
+    }
+
+    .loading-spinner {
+      width: 16px;
+      height: 16px;
+      border: 2px solid transparent;
+      border-top: 2px solid white;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-right: 8px;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    .error-message {
+      margin-top: 16px;
+      padding: 12px 16px;
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 6px;
+      color: #dc2626;
+      font-size: 14px;
+      line-height: 1.4;
+      text-align: center;
+      max-width: 100%;
+      word-wrap: break-word;
+    }
+
+    .error-actions {
+      margin-top: 12px;
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .error-action-button {
+      padding: 6px 12px;
+      background: white;
+      border: 1px solid #dc2626;
+      color: #dc2626;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .error-action-button:hover {
+      background: #dc2626;
+      color: white;
+    }
+
     .close-button {
       position: absolute;
       top: 12px;
@@ -17554,6 +17835,11 @@ SessionStartModal.styles = i$4`
       align-items: center;
       justify-content: center;
     }
+
+    .close-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
   `;
 __decorateClass$1([
   n$2({ type: Object })
@@ -17564,6 +17850,15 @@ __decorateClass$1([
 __decorateClass$1([
   n$2({ type: Function })
 ], SessionStartModal.prototype, "onClose", 2);
+__decorateClass$1([
+  r$1()
+], SessionStartModal.prototype, "isLoading", 2);
+__decorateClass$1([
+  r$1()
+], SessionStartModal.prototype, "error", 2);
+__decorateClass$1([
+  r$1()
+], SessionStartModal.prototype, "startAttempts", 2);
 if (!customElements.get("obi-session-start-modal")) {
   customElements.define("obi-session-start-modal", SessionStartModal);
 }
@@ -17690,6 +17985,11 @@ class ObiWidget extends i$1 {
       "connectObi",
       "ObiWidget"
     );
+    this.handleCloseModals = () => {
+      this.state = SDKState.READY;
+      this.showCourseModal = false;
+      this.showSessionStartModal = false;
+    };
     this.handleCourseSelectEvent = (event) => {
       const customEvent = event;
       this.selectedCourse = customEvent.detail;
@@ -17761,8 +18061,13 @@ class ObiWidget extends i$1 {
         trackEvent("session_start_requested", { sessionToken }, "ObiWidget");
         if (this.activeSession) {
           trackEvent("session_start_blocked", { sessionToken }, "ObiWidget");
-          console.log("Connection already in progress or active session exists");
-          return;
+          captureException(new Error("Session start blocked"), {
+            componentName: "ObiWidget",
+            handlerName: "handleSessionStart",
+            sessionToken
+          });
+          this.activeSession.disconnect();
+          this.activeSession = null;
         }
         this.showSessionStartModal = false;
         this.state = SDKState.LOADING;
@@ -17880,6 +18185,11 @@ class ObiWidget extends i$1 {
       if (window.obiWidgetConfig.linkOnlyAccess !== void 0) {
         this.linkOnlyAccess = window.obiWidgetConfig.linkOnlyAccess;
       }
+      if (window.obiWidgetConfig.showMenu === true) {
+        this.state = SDKState.LOADING;
+        this.showCourseModal = true;
+        window.obiWidgetConfig.showMenu = false;
+      }
       const primaryColor = window.obiWidgetConfig?.primaryColor || OBI_PRIMARY_COLOR;
       this.style.setProperty("--obi-primary", primaryColor);
       this.generateColorVariables(primaryColor);
@@ -18167,7 +18477,7 @@ class ObiWidget extends i$1 {
             ` : E}
       </div>
       ${this.showCourseModal ? x`<obi-course-modal
-            .onClose=${() => this.showCourseModal = false}
+            .onClose=${this.handleCloseModals.bind(this)}
             .apiKey=${this.apiKey}
             @course-select=${this.handleCourseSelectEvent}
           ></obi-course-modal>` : E}
@@ -18175,9 +18485,8 @@ class ObiWidget extends i$1 {
             .session=${this.selectedCourse}
             .onStart=${this.handleSessionStart.bind(this)}
             .onClose=${() => {
-      this.showSessionStartModal = false;
+      this.handleCloseModals();
       this.selectedCourse = null;
-      this.state = SDKState.READY;
       this.removeSessionUrlParams();
     }}
           ></obi-session-start-modal>` : E}
@@ -18202,7 +18511,7 @@ ObiWidget.styles = i$4`
     }
 
     h1 {
-      font-family: "Syne", sans-serif;
+      font-family: "Satoshi", sans-serif;
     }
 
     /* Position-specific styles */
@@ -18406,4 +18715,4 @@ export {
   withSentryAsyncHandler as w,
   x
 };
-//# sourceMappingURL=obi-widget-94e8c026.js.map
+//# sourceMappingURL=obi-widget-6550377d.js.map