@gram-ai/elements 1.27.4 → 1.27.6

package/src/hooks/useAuth.ts

@@ -1,4 +1,4 @@
-import { useReplayContext } from '@/contexts/ReplayContext'
+import { useReplayContext } from "@/contexts/ReplayContext";
 import {
   hasExplicitSessionAuth,
   isAnyStaticSession,
@@ -6,63 +6,63 @@ import {
   isStaticSessionAuth,
   isUnifiedFunctionSession,
   isUnifiedStaticSession,
-} from '@/lib/auth'
-import { getTokenExpiry } from '@/lib/token'
-import { useCallback, useMemo } from 'react'
-import { ApiConfig, GetSessionFn } from '../types'
-import { getChatSessionQueryKey, useSession } from './useSession'
-import { useQueryClient } from '@tanstack/react-query'
+} from "@/lib/auth";
+import { getTokenExpiry } from "@/lib/token";
+import { useCallback, useMemo } from "react";
+import { ApiConfig, GetSessionFn } from "../types";
+import { getChatSessionQueryKey, useSession } from "./useSession";
+import { useQueryClient } from "@tanstack/react-query";
 
-declare const __GRAM_API_URL__: string | undefined
+declare const __GRAM_API_URL__: string | undefined;
 
 export type Auth =
   | {
-      headers: Record<string, string>
-      isLoading: false
-      ensureValidHeaders: () => Promise<Record<string, string>>
+      headers: Record<string, string>;
+      isLoading: false;
+      ensureValidHeaders: () => Promise<Record<string, string>>;
     }
   | {
-      headers?: Record<string, string>
-      isLoading: true
-      ensureValidHeaders: () => Promise<Record<string, string>>
-    }
+      headers?: Record<string, string>;
+      isLoading: true;
+      ensureValidHeaders: () => Promise<Record<string, string>>;
+    };
 
 async function defaultGetSession(init: {
-  projectSlug: string
+  projectSlug: string;
 }): Promise<string> {
-  const response = await fetch('/chat/session', {
-    method: 'POST',
+  const response = await fetch("/chat/session", {
+    method: "POST",
     headers: {
-      'Gram-Project': init.projectSlug,
+      "Gram-Project": init.projectSlug,
     },
     body: JSON.stringify({
       embedOrigin: window.location.origin,
     }),
-  })
-  const data = await response.json()
-  return data.client_token
+  });
+  const data = await response.json();
+  return data.client_token;
 }
 
 function createDangerousApiKeySessionFn(
   apiKey: string,
-  apiUrl: string
+  apiUrl: string,
 ): GetSessionFn {
   return async ({ projectSlug }) => {
     const response = await fetch(`${apiUrl}/rpc/chatSessions.create`, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        'Gram-Key': apiKey,
-        'Gram-Project': projectSlug,
+        "Content-Type": "application/json",
+        "Gram-Key": apiKey,
+        "Gram-Project": projectSlug,
       },
       body: JSON.stringify({
         embed_origin: window.location.origin,
-        user_identifier: 'elements-dev',
+        user_identifier: "elements-dev",
       }),
-    })
-    const data = await response.json()
-    return data.client_token
-  }
+    });
+    const data = await response.json();
+    return data.client_token;
+  };
 }
 
 /**
@@ -73,47 +73,47 @@ export const useAuth = ({
   projectSlug,
   auth,
 }: {
-  auth?: ApiConfig
-  projectSlug: string
+  auth?: ApiConfig;
+  projectSlug: string;
 }): Auth => {
-  const replayCtx = useReplayContext()
-  const isReplay = replayCtx?.isReplay ?? false
-  const queryClient = useQueryClient()
+  const replayCtx = useReplayContext();
+  const isReplay = replayCtx?.isReplay ?? false;
+  const queryClient = useQueryClient();
 
   const apiUrl = useMemo(() => {
     const envUrl =
-      typeof __GRAM_API_URL__ !== 'undefined' ? __GRAM_API_URL__ : undefined
-    const url = auth?.url || envUrl || 'https://app.getgram.ai'
-    return url.replace(/\/+$/, '')
-  }, [auth?.url])
+      typeof __GRAM_API_URL__ !== "undefined" ? __GRAM_API_URL__ : undefined;
+    const url = auth?.url || envUrl || "https://app.getgram.ai";
+    return url.replace(/\/+$/, "");
+  }, [auth?.url]);
 
   const getSession = useMemo(() => {
     // In replay mode, skip session fetching entirely
     if (isReplay) {
-      return null
+      return null;
     }
     // dangerousApiKey — exchange key for session via API
     if (isDangerousApiKeyAuth(auth)) {
-      return createDangerousApiKeySessionFn(auth.dangerousApiKey, apiUrl)
+      return createDangerousApiKeySessionFn(auth.dangerousApiKey, apiUrl);
     }
     // Unified session: static string
     if (isUnifiedStaticSession(auth)) {
-      return () => Promise.resolve(auth.session)
+      return () => Promise.resolve(auth.session);
     }
     // Unified session: function
     if (isUnifiedFunctionSession(auth)) {
-      return auth.session
+      return auth.session;
     }
     // Legacy: static sessionToken (deprecated)
     if (isStaticSessionAuth(auth)) {
-      return () => Promise.resolve(auth.sessionToken)
+      return () => Promise.resolve(auth.sessionToken);
     }
     // Legacy: explicit sessionFn (deprecated)
     if (hasExplicitSessionAuth(auth)) {
-      return auth.sessionFn
+      return auth.sessionFn;
     }
-    return defaultGetSession
-  }, [auth, isReplay, apiUrl])
+    return defaultGetSession;
+  }, [auth, isReplay, apiUrl]);
 
   // The session request is only necessary if we are not using static session auth
   // configuration. If a custom session fetcher is provided, we use it,
@@ -121,46 +121,46 @@ export const useAuth = ({
   const session = useSession({
     getSession,
     projectSlug,
-  })
+  });
 
-  const shouldRefresh = !isAnyStaticSession(auth) && !isReplay
+  const shouldRefresh = !isAnyStaticSession(auth) && !isReplay;
 
   const ensureValidHeaders = useCallback(async (): Promise<
     Record<string, string>
   > => {
-    const queryKey = getChatSessionQueryKey(projectSlug)
-    const cachedToken = queryClient.getQueryData<string>(queryKey)
+    const queryKey = getChatSessionQueryKey(projectSlug);
+    const cachedToken = queryClient.getQueryData<string>(queryKey);
 
     if (!shouldRefresh || !getSession) {
       return {
-        'Gram-Project': projectSlug,
-        ...(cachedToken && { 'Gram-Chat-Session': cachedToken }),
-      }
+        "Gram-Project": projectSlug,
+        ...(cachedToken && { "Gram-Chat-Session": cachedToken }),
+      };
     }
 
     // Check if the cached token is expired (or within 30s of expiry).
     // staleTime=0 forces a refetch; Infinity keeps the cached value.
-    const exp = cachedToken ? getTokenExpiry(cachedToken) : null
-    const isExpired = exp !== null && Date.now() >= exp * 1000 - 30_000
-    const staleTime = isExpired ? 0 : Infinity
+    const exp = cachedToken ? getTokenExpiry(cachedToken) : null;
+    const isExpired = exp !== null && Date.now() >= exp * 1000 - 30_000;
+    const staleTime = isExpired ? 0 : Infinity;
 
     try {
       const token = await queryClient.fetchQuery({
         queryKey,
         queryFn: () => getSession({ projectSlug }),
         staleTime,
-      })
+      });
       return {
-        'Gram-Project': projectSlug,
-        ...(token && { 'Gram-Chat-Session': token }),
-      }
+        "Gram-Project": projectSlug,
+        ...(token && { "Gram-Chat-Session": token }),
+      };
     } catch {
       return {
-        'Gram-Project': projectSlug,
-        ...(cachedToken && { 'Gram-Chat-Session': cachedToken }),
-      }
+        "Gram-Project": projectSlug,
+        ...(cachedToken && { "Gram-Chat-Session": cachedToken }),
+      };
     }
-  }, [shouldRefresh, getSession, projectSlug, queryClient])
+  }, [shouldRefresh, getSession, projectSlug, queryClient]);
 
   // In replay mode, return immediately without waiting for session
   if (isReplay) {
@@ -168,7 +168,7 @@ export const useAuth = ({
       headers: {},
       isLoading: false,
       ensureValidHeaders: async () => ({}),
-    }
+    };
   }
 
   return !session
@@ -178,10 +178,10 @@ export const useAuth = ({
       }
     : {
         headers: {
-          'Gram-Project': projectSlug,
-          'Gram-Chat-Session': session,
+          "Gram-Project": projectSlug,
+          "Gram-Chat-Session": session,
         },
         isLoading: false,
         ensureValidHeaders,
-      }
-}
+      };
+};

package/src/hooks/useDensity.ts

@@ -1,4 +1,4 @@
-import { useElements } from './useElements'
+import { useElements } from "./useElements";
 
 /**
  * Density class mappings for different UI elements
@@ -6,105 +6,105 @@ import { useElements } from './useElements'
 const densityClasses = {
   compact: {
     // Padding - small increments (1, 1.5, 2, 2.5, 3)
-    'p-xs': 'p-1',
-    'p-sm': 'p-1.5',
-    'p-md': 'p-2',
-    'p-lg': 'p-2.5',
-    'p-xl': 'p-3',
-    'px-xs': 'px-1',
-    'px-sm': 'px-1.5',
-    'px-md': 'px-2',
-    'px-lg': 'px-2.5',
-    'px-xl': 'px-3',
-    'py-xs': 'py-1',
-    'py-sm': 'py-1.5',
-    'py-md': 'py-2',
-    'py-lg': 'py-2.5',
-    'py-xl': 'py-3',
+    "p-xs": "p-1",
+    "p-sm": "p-1.5",
+    "p-md": "p-2",
+    "p-lg": "p-2.5",
+    "p-xl": "p-3",
+    "px-xs": "px-1",
+    "px-sm": "px-1.5",
+    "px-md": "px-2",
+    "px-lg": "px-2.5",
+    "px-xl": "px-3",
+    "py-xs": "py-1",
+    "py-sm": "py-1.5",
+    "py-md": "py-2",
+    "py-lg": "py-2.5",
+    "py-xl": "py-3",
     // Gaps - small increments
-    'gap-sm': 'gap-1',
-    'gap-md': 'gap-1.5',
-    'gap-lg': 'gap-2',
-    'gap-xl': 'gap-2.5',
+    "gap-sm": "gap-1",
+    "gap-md": "gap-1.5",
+    "gap-lg": "gap-2",
+    "gap-xl": "gap-2.5",
     // Heights
-    'h-header': 'h-10',
-    'h-input': 'min-h-10',
+    "h-header": "h-10",
+    "h-input": "min-h-10",
     // Text
-    'text-base': 'text-sm',
-    'text-title': 'text-xl',
-    'text-subtitle': 'text-sm',
+    "text-base": "text-sm",
+    "text-title": "text-xl",
+    "text-subtitle": "text-sm",
   },
   normal: {
     // Padding - medium increments (1, 2, 3, 4, 5, 6)
-    'p-xs': 'p-1',
-    'p-sm': 'p-2',
-    'p-md': 'p-3',
-    'p-lg': 'p-4',
-    'p-xl': 'p-6',
-    'px-xs': 'px-1',
-    'px-sm': 'px-2',
-    'px-md': 'px-3',
-    'px-lg': 'px-4',
-    'px-xl': 'px-6',
-    'py-xs': 'py-1',
-    'py-sm': 'py-2',
-    'py-md': 'py-3',
-    'py-lg': 'py-4',
-    'py-xl': 'py-6',
+    "p-xs": "p-1",
+    "p-sm": "p-2",
+    "p-md": "p-3",
+    "p-lg": "p-4",
+    "p-xl": "p-6",
+    "px-xs": "px-1",
+    "px-sm": "px-2",
+    "px-md": "px-3",
+    "px-lg": "px-4",
+    "px-xl": "px-6",
+    "py-xs": "py-1",
+    "py-sm": "py-2",
+    "py-md": "py-3",
+    "py-lg": "py-4",
+    "py-xl": "py-6",
     // Gaps - medium increments
-    'gap-sm': 'gap-1.5',
-    'gap-md': 'gap-2',
-    'gap-lg': 'gap-3',
-    'gap-xl': 'gap-4',
+    "gap-sm": "gap-1.5",
+    "gap-md": "gap-2",
+    "gap-lg": "gap-3",
+    "gap-xl": "gap-4",
     // Heights
-    'h-header': 'h-12',
-    'h-input': 'min-h-12',
+    "h-header": "h-12",
+    "h-input": "min-h-12",
     // Text
-    'text-base': 'text-base',
-    'text-title': 'text-2xl',
-    'text-subtitle': 'text-base',
+    "text-base": "text-base",
+    "text-title": "text-2xl",
+    "text-subtitle": "text-base",
   },
   spacious: {
     // Padding - large increments (2, 3, 4, 6, 8, 10)
-    'p-xs': 'p-2',
-    'p-sm': 'p-3',
-    'p-md': 'p-4',
-    'p-lg': 'p-6',
-    'p-xl': 'p-10',
-    'px-xs': 'px-2',
-    'px-sm': 'px-3',
-    'px-md': 'px-4',
-    'px-lg': 'px-6',
-    'px-xl': 'px-10',
-    'py-xs': 'py-2',
-    'py-sm': 'py-3',
-    'py-md': 'py-4',
-    'py-lg': 'py-6',
-    'py-xl': 'py-10',
+    "p-xs": "p-2",
+    "p-sm": "p-3",
+    "p-md": "p-4",
+    "p-lg": "p-6",
+    "p-xl": "p-10",
+    "px-xs": "px-2",
+    "px-sm": "px-3",
+    "px-md": "px-4",
+    "px-lg": "px-6",
+    "px-xl": "px-10",
+    "py-xs": "py-2",
+    "py-sm": "py-3",
+    "py-md": "py-4",
+    "py-lg": "py-6",
+    "py-xl": "py-10",
     // Gaps - large increments
-    'gap-sm': 'gap-2',
-    'gap-md': 'gap-3',
-    'gap-lg': 'gap-4',
-    'gap-xl': 'gap-6',
+    "gap-sm": "gap-2",
+    "gap-md": "gap-3",
+    "gap-lg": "gap-4",
+    "gap-xl": "gap-6",
     // Heights
-    'h-header': 'h-14',
-    'h-input': 'min-h-16',
+    "h-header": "h-14",
+    "h-input": "min-h-16",
     // Text
-    'text-base': 'text-lg',
-    'text-title': 'text-3xl',
-    'text-subtitle': 'text-lg',
+    "text-base": "text-lg",
+    "text-title": "text-3xl",
+    "text-subtitle": "text-lg",
   },
-} as const
+} as const;
 
-type DensityToken = keyof (typeof densityClasses)['normal']
+type DensityToken = keyof (typeof densityClasses)["normal"];
 
 /**
  * Hook to get density classes based on theme config
  * Use: const d = useDensity(); then d('p-md') returns the appropriate padding class
  */
 export const useDensity = () => {
-  const { config } = useElements()
-  const density = config.theme?.density ?? 'normal'
+  const { config } = useElements();
+  const density = config.theme?.density ?? "normal";
 
-  return (token: DensityToken) => densityClasses[density][token]
-}
+  return (token: DensityToken) => densityClasses[density][token];
+};

package/src/hooks/useElements.ts

@@ -1,14 +1,14 @@
-import { useContext } from 'react'
-import { ElementsContext } from '@/contexts/contexts'
+import { useContext } from "react";
+import { ElementsContext } from "@/contexts/contexts";
 
 /**
  * @private Internal hook to access the ElementsContext
  *
  */
 export const useElements = () => {
-  const context = useContext(ElementsContext)
+  const context = useContext(ElementsContext);
   if (!context) {
-    throw new Error('useElements must be used within a ElementsProvider')
+    throw new Error("useElements must be used within a ElementsProvider");
   }
-  return context
-}
+  return context;
+};

package/src/hooks/useExpanded.ts

@@ -1,27 +1,27 @@
-import { Dispatch, SetStateAction } from 'react'
-import { useElements } from './useElements'
+import { Dispatch, SetStateAction } from "react";
+import { useElements } from "./useElements";
 
 interface UseExpandedAPI {
-  expandable: boolean
-  isExpanded: boolean
-  defaultExpanded: boolean
-  setIsExpanded: Dispatch<SetStateAction<boolean>>
+  expandable: boolean;
+  isExpanded: boolean;
+  defaultExpanded: boolean;
+  setIsExpanded: Dispatch<SetStateAction<boolean>>;
 }
 
 export const useExpanded = (): UseExpandedAPI => {
-  const { config, isExpanded, setIsExpanded } = useElements()
+  const { config, isExpanded, setIsExpanded } = useElements();
 
   // Use sidecar config for sidecar variant, modal config for widget variant
   const expandableConfig =
-    config.variant === 'sidecar' ? config.sidecar : config.modal
+    config.variant === "sidecar" ? config.sidecar : config.modal;
 
-  const expandable = expandableConfig?.expandable ?? false
-  const defaultExpanded = expandableConfig?.defaultExpanded ?? false
+  const expandable = expandableConfig?.expandable ?? false;
+  const defaultExpanded = expandableConfig?.defaultExpanded ?? false;
 
   return {
     expandable,
     isExpanded,
     setIsExpanded,
     defaultExpanded,
-  }
-}
+  };
+};