@timbal-ai/timbal-react 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -70,6 +70,8 @@ __export(index_exports, {
   getAccessToken: () => getAccessToken,
   getRefreshToken: () => getRefreshToken,
   refreshAccessToken: () => refreshAccessToken,
+  setAccessToken: () => setAccessToken,
+  setRefreshToken: () => setRefreshToken,
   useComposerRuntime: () => import_react13.useComposerRuntime,
   useMessageRuntime: () => import_react13.useMessageRuntime,
   useSession: () => useSession,
@@ -87,7 +89,9 @@ var import_timbal_sdk = require("@timbal-ai/timbal-sdk");
 var ACCESS_TOKEN_KEY = "timbal_project_access_token";
 var REFRESH_TOKEN_KEY = "timbal_project_refresh_token";
 var getAccessToken = () => localStorage.getItem(ACCESS_TOKEN_KEY);
+var setAccessToken = (token) => localStorage.setItem(ACCESS_TOKEN_KEY, token);
 var getRefreshToken = () => localStorage.getItem(REFRESH_TOKEN_KEY);
+var setRefreshToken = (token) => localStorage.setItem(REFRESH_TOKEN_KEY, token);
 var clearTokens = () => {
   localStorage.removeItem(ACCESS_TOKEN_KEY);
   localStorage.removeItem(REFRESH_TOKEN_KEY);
@@ -1555,6 +1559,13 @@ var import_react13 = require("@assistant-ui/react");
 // src/auth/provider.tsx
 var import_react12 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
+function isInsideIframe() {
+  try {
+    return typeof window !== "undefined" && window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
 var SessionContext = (0, import_react12.createContext)(void 0);
 var useSession = () => {
   const context = (0, import_react12.useContext)(SessionContext);
@@ -1569,6 +1580,7 @@ var SessionProvider = ({
 }) => {
   const [user, setUser] = (0, import_react12.useState)(null);
   const [loading, setLoading] = (0, import_react12.useState)(enabled);
+  const [embedded] = (0, import_react12.useState)(isInsideIframe);
   (0, import_react12.useEffect)(() => {
     if (!enabled) {
       setLoading(false);
@@ -1601,13 +1613,35 @@ var SessionProvider = ({
         if (ignore) return;
         clearTokens();
       }
-      setLoading(false);
+      if (!ignore && !embedded) {
+        setLoading(false);
+      }
     };
     restoreSession();
+    let messageCleanup;
+    if (embedded) {
+      const handleMessage = async (event) => {
+        if (ignore) return;
+        if (event.data?.type !== "timbal:auth" || !event.data.token) return;
+        setAccessToken(event.data.token);
+        if (event.data.refreshToken) {
+          setRefreshToken(event.data.refreshToken);
+        }
+        const u = await fetchCurrentUser();
+        if (!ignore) {
+          setUser(u);
+          setLoading(false);
+        }
+      };
+      window.addEventListener("message", handleMessage);
+      window.parent.postMessage({ type: "timbal:request-session" }, "*");
+      messageCleanup = () => window.removeEventListener("message", handleMessage);
+    }
     return () => {
       ignore = true;
+      messageCleanup?.();
     };
-  }, [enabled]);
+  }, [enabled, embedded]);
   const logout = (0, import_react12.useCallback)(() => {
     clearTokens();
     setUser(null);
@@ -1625,6 +1659,7 @@ var SessionProvider = ({
         user,
         loading,
         isAuthenticated: !!user,
+        isEmbedded: embedded,
         logout
       },
       children
@@ -1640,14 +1675,14 @@ var AuthGuard = ({
   requireAuth = false,
   enabled = true
 }) => {
-  const { isAuthenticated, loading } = useSession();
+  const { isAuthenticated, loading, isEmbedded } = useSession();
   if (!enabled) {
     return children;
   }
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
-  if (requireAuth && !isAuthenticated) {
+  if (requireAuth && !isAuthenticated && !isEmbedded) {
     const returnTo = encodeURIComponent(
       window.location.pathname + window.location.search
     );
@@ -1698,6 +1733,8 @@ var AuthGuard = ({
   getAccessToken,
   getRefreshToken,
   refreshAccessToken,
+  setAccessToken,
+  setRefreshToken,
   useComposerRuntime,
   useMessageRuntime,
   useSession,

package/dist/index.d.cts

@@ -102,6 +102,7 @@ interface SessionContextType {
     user: Session | null;
     loading: boolean;
     isAuthenticated: boolean;
+    isEmbedded: boolean;
     logout: () => void;
 }
 declare const useSession: () => SessionContextType;
@@ -121,7 +122,9 @@ interface AuthGuardProps {
 declare const AuthGuard: React__default.FC<AuthGuardProps>;
 
 declare const getAccessToken: () => string | null;
+declare const setAccessToken: (token: string) => void;
 declare const getRefreshToken: () => string | null;
+declare const setRefreshToken: (token: string) => void;
 declare const clearTokens: () => void;
 declare const refreshAccessToken: () => Promise<boolean>;
 declare const authFetch: (url: string, options?: RequestInit) => Promise<Response>;
@@ -159,4 +162,4 @@ declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, cla
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, ComposerAddAttachment, ComposerAttachments, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MarkdownText, SessionProvider, Shimmer, ShikiSyntaxHighlighter as SyntaxHighlighter, type TextShimmerProps, Thread, type ThreadComponents, type ThreadProps, type ThreadSuggestion, type ThreadWelcomeConfig, type ThreadWelcomeProps, TimbalChat, type TimbalChatProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, UserMessageAttachments, authFetch, buttonVariants, clearTokens, cn, fetchCurrentUser, getAccessToken, getRefreshToken, refreshAccessToken, useSession };
+export { AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, ComposerAddAttachment, ComposerAttachments, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MarkdownText, SessionProvider, Shimmer, ShikiSyntaxHighlighter as SyntaxHighlighter, type TextShimmerProps, Thread, type ThreadComponents, type ThreadProps, type ThreadSuggestion, type ThreadWelcomeConfig, type ThreadWelcomeProps, TimbalChat, type TimbalChatProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, UserMessageAttachments, authFetch, buttonVariants, clearTokens, cn, fetchCurrentUser, getAccessToken, getRefreshToken, refreshAccessToken, setAccessToken, setRefreshToken, useSession };

package/dist/index.d.ts

@@ -102,6 +102,7 @@ interface SessionContextType {
     user: Session | null;
     loading: boolean;
     isAuthenticated: boolean;
+    isEmbedded: boolean;
     logout: () => void;
 }
 declare const useSession: () => SessionContextType;
@@ -121,7 +122,9 @@ interface AuthGuardProps {
 declare const AuthGuard: React__default.FC<AuthGuardProps>;
 
 declare const getAccessToken: () => string | null;
+declare const setAccessToken: (token: string) => void;
 declare const getRefreshToken: () => string | null;
+declare const setRefreshToken: (token: string) => void;
 declare const clearTokens: () => void;
 declare const refreshAccessToken: () => Promise<boolean>;
 declare const authFetch: (url: string, options?: RequestInit) => Promise<Response>;
@@ -159,4 +162,4 @@ declare const Shimmer: React.MemoExoticComponent<({ children, as: Component, cla
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, ComposerAddAttachment, ComposerAttachments, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MarkdownText, SessionProvider, Shimmer, ShikiSyntaxHighlighter as SyntaxHighlighter, type TextShimmerProps, Thread, type ThreadComponents, type ThreadProps, type ThreadSuggestion, type ThreadWelcomeConfig, type ThreadWelcomeProps, TimbalChat, type TimbalChatProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, UserMessageAttachments, authFetch, buttonVariants, clearTokens, cn, fetchCurrentUser, getAccessToken, getRefreshToken, refreshAccessToken, useSession };
+export { AuthGuard, Avatar, AvatarFallback, AvatarImage, Button, ComposerAddAttachment, ComposerAttachments, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MarkdownText, SessionProvider, Shimmer, ShikiSyntaxHighlighter as SyntaxHighlighter, type TextShimmerProps, Thread, type ThreadComponents, type ThreadProps, type ThreadSuggestion, type ThreadWelcomeConfig, type ThreadWelcomeProps, TimbalChat, type TimbalChatProps, TimbalRuntimeProvider, type TimbalRuntimeProviderProps, ToolFallback, Tooltip, TooltipContent, TooltipIconButton, type TooltipIconButtonProps, TooltipProvider, TooltipTrigger, UserMessageAttachments, authFetch, buttonVariants, clearTokens, cn, fetchCurrentUser, getAccessToken, getRefreshToken, refreshAccessToken, setAccessToken, setRefreshToken, useSession };

package/dist/index.esm.js

@@ -10,7 +10,9 @@ import { parseSSELine } from "@timbal-ai/timbal-sdk";
 var ACCESS_TOKEN_KEY = "timbal_project_access_token";
 var REFRESH_TOKEN_KEY = "timbal_project_refresh_token";
 var getAccessToken = () => localStorage.getItem(ACCESS_TOKEN_KEY);
+var setAccessToken = (token) => localStorage.setItem(ACCESS_TOKEN_KEY, token);
 var getRefreshToken = () => localStorage.getItem(REFRESH_TOKEN_KEY);
+var setRefreshToken = (token) => localStorage.setItem(REFRESH_TOKEN_KEY, token);
 var clearTokens = () => {
   localStorage.removeItem(ACCESS_TOKEN_KEY);
   localStorage.removeItem(REFRESH_TOKEN_KEY);
@@ -1525,6 +1527,13 @@ import {
   useState as useState5
 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
+function isInsideIframe() {
+  try {
+    return typeof window !== "undefined" && window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
 var SessionContext = createContext(void 0);
 var useSession = () => {
   const context = useContext(SessionContext);
@@ -1539,6 +1548,7 @@ var SessionProvider = ({
 }) => {
   const [user, setUser] = useState5(null);
   const [loading, setLoading] = useState5(enabled);
+  const [embedded] = useState5(isInsideIframe);
   useEffect4(() => {
     if (!enabled) {
       setLoading(false);
@@ -1571,13 +1581,35 @@ var SessionProvider = ({
         if (ignore) return;
         clearTokens();
       }
-      setLoading(false);
+      if (!ignore && !embedded) {
+        setLoading(false);
+      }
     };
     restoreSession();
+    let messageCleanup;
+    if (embedded) {
+      const handleMessage = async (event) => {
+        if (ignore) return;
+        if (event.data?.type !== "timbal:auth" || !event.data.token) return;
+        setAccessToken(event.data.token);
+        if (event.data.refreshToken) {
+          setRefreshToken(event.data.refreshToken);
+        }
+        const u = await fetchCurrentUser();
+        if (!ignore) {
+          setUser(u);
+          setLoading(false);
+        }
+      };
+      window.addEventListener("message", handleMessage);
+      window.parent.postMessage({ type: "timbal:request-session" }, "*");
+      messageCleanup = () => window.removeEventListener("message", handleMessage);
+    }
     return () => {
       ignore = true;
+      messageCleanup?.();
     };
-  }, [enabled]);
+  }, [enabled, embedded]);
   const logout = useCallback2(() => {
     clearTokens();
     setUser(null);
@@ -1595,6 +1627,7 @@ var SessionProvider = ({
         user,
         loading,
         isAuthenticated: !!user,
+        isEmbedded: embedded,
         logout
       },
       children
@@ -1610,14 +1643,14 @@ var AuthGuard = ({
   requireAuth = false,
   enabled = true
 }) => {
-  const { isAuthenticated, loading } = useSession();
+  const { isAuthenticated, loading, isEmbedded } = useSession();
   if (!enabled) {
     return children;
   }
   if (loading) {
     return /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ jsx15(Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
-  if (requireAuth && !isAuthenticated) {
+  if (requireAuth && !isAuthenticated && !isEmbedded) {
     const returnTo = encodeURIComponent(
       window.location.pathname + window.location.search
     );
@@ -1667,6 +1700,8 @@ export {
   getAccessToken,
   getRefreshToken,
   refreshAccessToken,
+  setAccessToken,
+  setRefreshToken,
   useComposerRuntime,
   useMessageRuntime,
   useSession,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timbal-ai/timbal-react",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "React components and runtime for building Timbal chat UIs",
   "type": "module",
   "main": "dist/index.cjs",