obi-sdk 0.6.5 → 0.6.8

package/dist/modular/chunks/{obi-widget-9e8ccac7.js → obi-widget-46e82ee8.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", {
@@ -497,6 +502,11 @@ class ObiClient {
       params: { path: { id } }
     });
   }
+  async startSession(id, token) {
+    return await this.client.GET("/sessions/{id}/start-session", {
+      params: { path: { id }, query: token ? { token } : {} }
+    });
+  }
   async getSessionRecording(id) {
     return await this.client.GET("/sessions/{id}/recording", {
       params: { path: { id } }
@@ -10108,53 +10118,6 @@ function n$2(t2) {
 function r$1(r2) {
   return n$2({ ...r2, state: true, attribute: false });
 }
-class StorageManager {
-  /**
-   * Create a new StorageManager with a specific namespace
-   * @param namespace The namespace to prefix all keys with
-   */
-  constructor(namespace) {
-    this.namespace = namespace;
-  }
-  /**
-   * Get a value from localStorage with the namespace prefix
-   * @param key The key to retrieve
-   * @returns The stored value or null if not found
-   */
-  getItem(key) {
-    return localStorage.getItem(`${this.namespace}.${key}`);
-  }
-  /**
-   * Set a value in localStorage with the namespace prefix
-   * @param key The key to set
-   * @param value The value to store
-   */
-  setItem(key, value) {
-    localStorage.setItem(`${this.namespace}.${key}`, value);
-  }
-  /**
-   * Remove a value from localStorage with the namespace prefix
-   * @param key The key to remove
-   */
-  removeItem(key) {
-    localStorage.removeItem(`${this.namespace}.${key}`);
-  }
-  /**
-   * Clear all keys that belong to this namespace
-   */
-  clear() {
-    for (let i3 = 0; i3 < localStorage.length; i3++) {
-      const key = localStorage.key(i3);
-      if (key && key.startsWith(`${this.namespace}.`)) {
-        localStorage.removeItem(key);
-      }
-    }
-  }
-}
-const STORAGE_KEYS = {
-  SESSION_DATA: "session_data"
-};
-const storage = new StorageManager("io.obi.widget");
 const DEBUG_BUILD$2 = typeof __SENTRY_DEBUG__ === "undefined" || __SENTRY_DEBUG__;
 const SDK_VERSION = "9.23.0";
 const GLOBAL_OBJ = globalThis;
@@ -16016,6 +15979,53 @@ function withComponentErrorTracking(componentName) {
     }
   };
 }
+class StorageManager {
+  /**
+   * Create a new StorageManager with a specific namespace
+   * @param namespace The namespace to prefix all keys with
+   */
+  constructor(namespace) {
+    this.namespace = namespace;
+  }
+  /**
+   * Get a value from localStorage with the namespace prefix
+   * @param key The key to retrieve
+   * @returns The stored value or null if not found
+   */
+  getItem(key) {
+    return localStorage.getItem(`${this.namespace}.${key}`);
+  }
+  /**
+   * Set a value in localStorage with the namespace prefix
+   * @param key The key to set
+   * @param value The value to store
+   */
+  setItem(key, value) {
+    localStorage.setItem(`${this.namespace}.${key}`, value);
+  }
+  /**
+   * Remove a value from localStorage with the namespace prefix
+   * @param key The key to remove
+   */
+  removeItem(key) {
+    localStorage.removeItem(`${this.namespace}.${key}`);
+  }
+  /**
+   * Clear all keys that belong to this namespace
+   */
+  clear() {
+    for (let i3 = 0; i3 < localStorage.length; i3++) {
+      const key = localStorage.key(i3);
+      if (key && key.startsWith(`${this.namespace}.`)) {
+        localStorage.removeItem(key);
+      }
+    }
+  }
+}
+const STORAGE_KEYS = {
+  SESSION_DATA: "session_data"
+};
+const storage = new StorageManager("io.obi.widget");
 var __defProp$7 = Object.defineProperty;
 var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
 var __decorateClass$7 = (decorators, target, key, kind) => {
@@ -16506,6 +16516,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) {
@@ -16566,6 +16577,7 @@ class CourseModal extends i$1 {
     this.apiKey = "";
     this.apiBaseUrl = "";
     this.selectedCourse = null;
+    this.agentName = "";
   }
   handleClose() {
     if (this.onClose) {
@@ -16589,13 +16601,20 @@ class CourseModal extends i$1 {
       this.loading = true;
       const raw_response = await fetch(`${this.apiBaseUrl}/sessions?token=${this.apiKey}`);
       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.requestUpdate();
     } catch (err) {
@@ -16630,8 +16649,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
@@ -16696,7 +16722,7 @@ class CourseModal extends i$1 {
 CourseModal.styles = i$4`
     :host {
       display: block;
-      font-family: "Syne", sans-serif;
+      font-family: "Satoshi", sans-serif;
     }
 
     .backdrop {
@@ -16885,6 +16911,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 })
@@ -16907,6 +16960,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);
 }
@@ -17601,199 +17657,245 @@ class ObiWidget extends i$1 {
     this.obiClient = null;
     this.closeNavTimeoutRef = null;
     this.researchingTimeoutRef = null;
-    this.connectObi = withSentryAsyncHandler(async (sessionToken) => {
-      if (this.activeSession) {
-        trackEvent("connection_already_exists", { sessionToken }, "ObiWidget");
-        console.log("Connection already exists");
-        return;
-      }
-      trackEvent("session_connection_started", { sessionToken }, "ObiWidget");
-      setGlobalContext({ sessionId: sessionToken });
-      try {
-        const session = this.createSession(sessionToken);
-        if (!session) {
-          this.handleSessionCreationFailure(() => this.removeSessionUrlParams());
+    this.connectObi = withSentryAsyncHandler(
+      async (sessionToken) => {
+        if (this.activeSession) {
+          trackEvent("connection_already_exists", { sessionToken }, "ObiWidget");
+          console.log("Connection already exists");
           return;
         }
-        this.setupSessionEventListeners(session, () => this.removeSessionUrlParams());
-        session.on("screenCaptureRequested", withSentryAsyncHandler(async () => {
-          trackEvent("screen_capture_requested", {}, "ObiWidget");
-          try {
-            const canvas = await html2canvas(document.documentElement, {
-              useCORS: true,
-              allowTaint: true,
-              foreignObjectRendering: true
-            });
-            const dataUrl = canvas.toDataURL("image/png");
-            this.activeSession.emit("screenCaptureComplete", dataUrl);
-            trackEvent("screen_capture_completed", {}, "ObiWidget");
-          } catch (e2) {
-            captureException(e2, {
-              componentName: "ObiWidget",
-              handlerName: "screenCaptureRequested",
-              sessionToken
+        trackEvent("session_connection_started", { sessionToken }, "ObiWidget");
+        setGlobalContext({ sessionId: sessionToken });
+        try {
+          const session = this.createSession(sessionToken);
+          if (!session) {
+            this.handleSessionCreationFailure(() => this.removeSessionUrlParams());
+            return;
+          }
+          this.setupSessionEventListeners(session, () => this.removeSessionUrlParams());
+          session.on(
+            "screenCaptureRequested",
+            withSentryAsyncHandler(
+              async () => {
+                trackEvent("screen_capture_requested", {}, "ObiWidget");
+                try {
+                  const canvas = await html2canvas(document.documentElement, {
+                    useCORS: true,
+                    allowTaint: true,
+                    foreignObjectRendering: true
+                  });
+                  const dataUrl = canvas.toDataURL("image/png");
+                  this.activeSession.emit("screenCaptureComplete", dataUrl);
+                  trackEvent("screen_capture_completed", {}, "ObiWidget");
+                } catch (e2) {
+                  captureException(e2, {
+                    componentName: "ObiWidget",
+                    handlerName: "screenCaptureRequested",
+                    sessionToken
+                  });
+                  console.error("[obi] error capturing screen:", e2);
+                  this.activeSession.emit("screenCaptureComplete", "error");
+                  trackEvent(
+                    "screen_capture_failed",
+                    {
+                      error: e2 instanceof Error ? e2.message : String(e2)
+                    },
+                    "ObiWidget"
+                  );
+                }
+              },
+              "screenCaptureRequested",
+              "ObiWidget"
+            )
+          );
+          const connectionInfo = await session.connect();
+          if (connectionInfo) {
+            this.sessionToken = sessionToken;
+            this.roomToken = connectionInfo.token;
+            this.roomUrl = connectionInfo.url;
+            setGlobalContext({
+              sessionId: sessionToken,
+              widgetState: this.state.toString()
             });
-            console.error("[obi] error capturing screen:", e2);
-            this.activeSession.emit("screenCaptureComplete", "error");
-            trackEvent("screen_capture_failed", {
-              error: e2 instanceof Error ? e2.message : String(e2)
-            }, "ObiWidget");
+            this.removeSessionUrlParams();
+            trackEvent(
+              "session_connection_established",
+              {
+                sessionToken,
+                hasRoomToken: !!connectionInfo.token
+              },
+              "ObiWidget"
+            );
           }
-        }, "screenCaptureRequested", "ObiWidget"));
-        const connectionInfo = await session.connect();
-        if (connectionInfo) {
-          this.sessionToken = sessionToken;
-          this.roomToken = connectionInfo.token;
-          this.roomUrl = connectionInfo.url;
-          setGlobalContext({
-            sessionId: sessionToken,
-            widgetState: this.state.toString()
+          this.activeSession = session;
+        } catch (error) {
+          console.error("Failed to start session:", error);
+          captureException(error, {
+            componentName: "ObiWidget",
+            handlerName: "connectObi",
+            sessionToken
           });
-          this.removeSessionUrlParams();
-          trackEvent("session_connection_established", {
-            sessionToken,
-            hasRoomToken: !!connectionInfo.token
-          }, "ObiWidget");
+          this.handleSessionCreationFailure(() => this.removeSessionUrlParams());
         }
-        this.activeSession = session;
-      } catch (error) {
-        console.error("Failed to start session:", error);
-        captureException(error, {
-          componentName: "ObiWidget",
-          handlerName: "connectObi",
-          sessionToken
-        });
-        this.handleSessionCreationFailure(() => this.removeSessionUrlParams());
-      }
-    }, "connectObi", "ObiWidget");
+      },
+      "connectObi",
+      "ObiWidget"
+    );
     this.handleCourseSelectEvent = (event) => {
       const customEvent = event;
       this.selectedCourse = customEvent.detail;
       this.showCourseModal = false;
       this.showSessionStartModal = true;
     };
-    this.handleUrlSessionEvent = withSentryAsyncHandler(async (sessionToken) => {
-      trackEvent("url_session_event", { sessionToken }, "ObiWidget");
-      try {
-        if (!this.obiClient) {
-          const error = new Error("ObiClient not initialized");
+    this.handleUrlSessionEvent = withSentryAsyncHandler(
+      async (sessionToken) => {
+        trackEvent("url_session_event", { sessionToken }, "ObiWidget");
+        try {
+          if (!this.obiClient) {
+            const error = new Error("ObiClient not initialized");
+            captureException(error, {
+              componentName: "ObiWidget",
+              handlerName: "handleUrlSessionEvent",
+              sessionToken
+            });
+            console.error("ObiClient not initialized");
+            return;
+          }
+          const sessionsResponse = await this.obiClient.startSession(sessionToken, this.apiKey);
+          if (sessionsResponse.data) {
+            const { session } = sessionsResponse.data;
+            console.log("[obi-sdk] session:", session);
+            trackEvent(
+              "session_started",
+              {
+                sessionId: session?.id,
+                sessionToken
+              },
+              "ObiWidget"
+            );
+            if (session) {
+              const sessionWithPlan = session;
+              this.selectedCourse = {
+                id: sessionToken,
+                name: sessionWithPlan.onboarding_plan?.name || "",
+                description: sessionWithPlan.onboarding_plan?.description || ""
+              };
+              this.state = SDKState.LOADING;
+              this.showSessionStartModal = true;
+              trackEvent(
+                "matching_session_found",
+                {
+                  sessionToken,
+                  hasOnboardingPlan: !!sessionWithPlan.onboarding_plan
+                },
+                "ObiWidget"
+              );
+            } else {
+              console.log("[obi-sdk] no session found with token:", sessionToken);
+              trackEvent("no_matching_session", { sessionToken }, "ObiWidget");
+            }
+          }
+        } catch (error) {
+          console.error("Failed to fetch session details:", error);
           captureException(error, {
             componentName: "ObiWidget",
             handlerName: "handleUrlSessionEvent",
             sessionToken
           });
-          console.error("ObiClient not initialized");
+        }
+      },
+      "handleUrlSessionEvent",
+      "ObiWidget"
+    );
+    this.handleSessionStart = withSentryAsyncHandler(
+      async (sessionToken) => {
+        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;
         }
-        const sessionsResponse = await this.obiClient.listSessions(this.apiKey);
-        if (sessionsResponse.data) {
-          const sessions = sessionsResponse.data.sessions;
-          console.log("[obi-sdk] sessions:", sessions);
-          trackEvent("sessions_fetched", {
-            sessionCount: sessions?.length || 0,
-            sessionToken
-          }, "ObiWidget");
-          const matchingSession = sessions?.find((session) => session.uuid === sessionToken);
-          if (matchingSession) {
-            const sessionWithPlan = matchingSession;
-            this.selectedCourse = {
-              id: sessionToken,
-              name: sessionWithPlan.onboarding_plan?.name || "",
-              description: sessionWithPlan.onboarding_plan?.description || ""
-            };
-            this.state = SDKState.LOADING;
-            this.showSessionStartModal = true;
-            trackEvent("matching_session_found", {
+        this.showSessionStartModal = false;
+        this.state = SDKState.LOADING;
+        setGlobalContext({ widgetState: this.state.toString() });
+        await this.connectObi(sessionToken);
+      },
+      "handleSessionStart",
+      "ObiWidget"
+    );
+    this.checkExistingSession = withSentryAsyncHandler(
+      async () => {
+        trackEvent("checking_existing_session", {}, "ObiWidget");
+        try {
+          const sessionData = JSON.parse(
+            storage.getItem(STORAGE_KEYS.SESSION_DATA) || "{}"
+          );
+          const { sessionToken, roomToken, roomUrl, sessionExpiry, obiState } = sessionData;
+          if (!sessionToken || !roomToken || !roomUrl) {
+            trackEvent("no_existing_session_data", {}, "ObiWidget");
+            return;
+          }
+          console.log("[obi-sdk] using existing session");
+          trackEvent(
+            "existing_session_data_found",
+            {
               sessionToken,
-              hasOnboardingPlan: !!sessionWithPlan.onboarding_plan
-            }, "ObiWidget");
-          } else {
-            console.log("[obi-sdk] no session found with token:", sessionToken);
-            trackEvent("no_matching_session", { sessionToken }, "ObiWidget");
+              hasExpiry: !!sessionExpiry,
+              obiState
+            },
+            "ObiWidget"
+          );
+          if (sessionExpiry) {
+            const expiryDate = new Date(sessionExpiry);
+            if (expiryDate < /* @__PURE__ */ new Date()) {
+              this.clearSessionStorage();
+              trackEvent("session_expired", { sessionToken }, "ObiWidget");
+              return;
+            }
           }
-        }
-      } catch (error) {
-        console.error("Failed to fetch session details:", error);
-        captureException(error, {
-          componentName: "ObiWidget",
-          handlerName: "handleUrlSessionEvent",
-          sessionToken
-        });
-      }
-    }, "handleUrlSessionEvent", "ObiWidget");
-    this.handleSessionStart = withSentryAsyncHandler(async (sessionToken) => {
-      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;
-      }
-      this.showSessionStartModal = false;
-      this.state = SDKState.LOADING;
-      setGlobalContext({ widgetState: this.state.toString() });
-      await this.connectObi(sessionToken);
-    }, "handleSessionStart", "ObiWidget");
-    this.checkExistingSession = withSentryAsyncHandler(async () => {
-      trackEvent("checking_existing_session", {}, "ObiWidget");
-      try {
-        const sessionData = JSON.parse(
-          storage.getItem(STORAGE_KEYS.SESSION_DATA) || "{}"
-        );
-        const { sessionToken, roomToken, roomUrl, sessionExpiry, obiState } = sessionData;
-        if (!sessionToken || !roomToken || !roomUrl) {
-          trackEvent("no_existing_session_data", {}, "ObiWidget");
-          return;
-        }
-        console.log("[obi-sdk] using existing session");
-        trackEvent("existing_session_data_found", {
-          sessionToken,
-          hasExpiry: !!sessionExpiry,
-          obiState
-        }, "ObiWidget");
-        if (sessionExpiry) {
-          const expiryDate = new Date(sessionExpiry);
-          if (expiryDate < /* @__PURE__ */ new Date()) {
-            this.clearSessionStorage();
-            trackEvent("session_expired", { sessionToken }, "ObiWidget");
+          this.state = SDKState.LOADING;
+          setGlobalContext({
+            sessionId: sessionToken,
+            widgetState: this.state.toString()
+          });
+          const session = this.createSession(sessionToken);
+          if (!session) {
+            this.handleSessionCreationFailure(() => this.clearSessionStorage());
             return;
           }
-        }
-        this.state = SDKState.LOADING;
-        setGlobalContext({
-          sessionId: sessionToken,
-          widgetState: this.state.toString()
-        });
-        const session = this.createSession(sessionToken);
-        if (!session) {
+          this.setupSessionEventListeners(session, () => this.clearSessionStorage());
+          const reconnected = await session.reconnect(roomUrl, roomToken, obiState);
+          if (reconnected) {
+            this.activeSession = session;
+            this.sessionToken = sessionToken;
+            this.roomToken = roomToken;
+            this.roomUrl = roomUrl;
+            this.state = obiState;
+            this.storedActiveState = obiState;
+            trackEvent(
+              "session_reconnected",
+              {
+                sessionToken,
+                obiState
+              },
+              "ObiWidget"
+            );
+          } else {
+            this.clearSessionStorage();
+            trackEvent("session_reconnection_failed", { sessionToken }, "ObiWidget");
+          }
+        } catch (error) {
+          console.error("Error reconnecting to session:", error);
+          captureException(error, {
+            componentName: "ObiWidget",
+            handlerName: "checkExistingSession"
+          });
           this.handleSessionCreationFailure(() => this.clearSessionStorage());
-          return;
         }
-        this.setupSessionEventListeners(session, () => this.clearSessionStorage());
-        const reconnected = await session.reconnect(roomUrl, roomToken, obiState);
-        if (reconnected) {
-          this.activeSession = session;
-          this.sessionToken = sessionToken;
-          this.roomToken = roomToken;
-          this.roomUrl = roomUrl;
-          this.state = obiState;
-          this.storedActiveState = obiState;
-          trackEvent("session_reconnected", {
-            sessionToken,
-            obiState
-          }, "ObiWidget");
-        } else {
-          this.clearSessionStorage();
-          trackEvent("session_reconnection_failed", { sessionToken }, "ObiWidget");
-        }
-      } catch (error) {
-        console.error("Error reconnecting to session:", error);
-        captureException(error, {
-          componentName: "ObiWidget",
-          handlerName: "checkExistingSession"
-        });
-        this.handleSessionCreationFailure(() => this.clearSessionStorage());
-      }
-    }, "checkExistingSession", "ObiWidget");
+      },
+      "checkExistingSession",
+      "ObiWidget"
+    );
     try {
       const errorTracker = withComponentErrorTracking("ObiWidget");
       errorTracker.setContext();
@@ -18151,7 +18253,7 @@ ObiWidget.styles = i$4`
     }
 
     h1 {
-      font-family: "Syne", sans-serif;
+      font-family: "Satoshi", sans-serif;
     }
 
     /* Position-specific styles */
@@ -18355,4 +18457,4 @@ export {
   withSentryAsyncHandler as w,
   x
 };
-//# sourceMappingURL=obi-widget-9e8ccac7.js.map
+//# sourceMappingURL=obi-widget-46e82ee8.js.map