@gram-ai/elements 1.27.4 → 1.27.5

package/src/components/ui/tooltip.tsx

@@ -1,10 +1,10 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from '@/lib/utils'
-import { usePortalContainer } from '@/hooks/usePortalContainer'
+import { cn } from "@/lib/utils";
+import { usePortalContainer } from "@/hooks/usePortalContainer";
 
 function TooltipProvider({
   delayDuration = 0,
@@ -16,7 +16,7 @@ function TooltipProvider({
       delayDuration={delayDuration}
       {...props}
     />
-  )
+  );
 }
 
 function Tooltip({
@@ -26,13 +26,13 @@ function Tooltip({
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
-  )
+  );
 }
 
 function TooltipTrigger({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
@@ -42,25 +42,25 @@ function TooltipContent({
   container,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
-  container?: HTMLElement | null
+  container?: HTMLElement | null;
 }) {
-  const portalContainer = usePortalContainer()
+  const portalContainer = usePortalContainer();
   return (
     <TooltipPrimitive.Portal container={container ?? portalContainer}>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[70] w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
-          className
+          "z-[70] w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className,
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-[70] size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="z-[70] size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
-  )
+  );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/constants/tailwind.ts

@@ -1,2 +1,2 @@
 // Used to scope elements styles to the Elements library
-export const ROOT_SELECTOR = 'gram-elements'
+export const ROOT_SELECTOR = "gram-elements";

package/src/contexts/ChatIdContext.tsx

@@ -1,10 +1,10 @@
-import { createContext, useContext } from 'react'
+import { createContext, useContext } from "react";
 
 export interface ChatIdContextValue {
-  chatId: string | null
+  chatId: string | null;
 }
 
-export const ChatIdContext = createContext<ChatIdContextValue | null>(null)
+export const ChatIdContext = createContext<ChatIdContextValue | null>(null);
 
 /**
  * Hook to access the current chat ID from the Elements context.
@@ -13,9 +13,9 @@ export const ChatIdContext = createContext<ChatIdContextValue | null>(null)
  * @returns The current chat ID, or null if not yet initialized
  */
 export const useChatId = () => {
-  const context = useContext(ChatIdContext)
+  const context = useContext(ChatIdContext);
   if (!context) {
-    throw new Error('useChatId must be used within ElementsProvider')
+    throw new Error("useChatId must be used within ElementsProvider");
   }
-  return context.chatId
-}
+  return context.chatId;
+};

package/src/contexts/ConnectionStatusContext.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import {
   createContext,
@@ -8,119 +8,119 @@ import {
   useRef,
   useEffect,
   type ReactNode,
-} from 'react'
+} from "react";
 
-export type ConnectionState = 'connected' | 'reconnecting' | 'disconnected'
+export type ConnectionState = "connected" | "reconnecting" | "disconnected";
 
 interface ConnectionStatusContextValue {
   /** Current connection state */
-  state: ConnectionState
+  state: ConnectionState;
   /** Number of reconnection attempts */
-  retryCount: number
+  retryCount: number;
   /** Whether the browser reports being online */
-  isOnline: boolean
+  isOnline: boolean;
   /** Mark connection as failed - will trigger reconnecting state */
-  markDisconnected: () => void
+  markDisconnected: () => void;
   /** Mark connection as restored */
-  markConnected: () => void
+  markConnected: () => void;
   /** Reset the connection state */
-  reset: () => void
+  reset: () => void;
 }
 
 const ConnectionStatusContext =
-  createContext<ConnectionStatusContextValue | null>(null)
+  createContext<ConnectionStatusContextValue | null>(null);
 
 interface ConnectionStatusProviderProps {
-  children: ReactNode
+  children: ReactNode;
 }
 
 export const ConnectionStatusProvider = ({
   children,
 }: ConnectionStatusProviderProps) => {
-  const [state, setState] = useState<ConnectionState>('connected')
-  const [retryCount, setRetryCount] = useState(0)
+  const [state, setState] = useState<ConnectionState>("connected");
+  const [retryCount, setRetryCount] = useState(0);
   const [isOnline, setIsOnline] = useState(
-    typeof navigator !== 'undefined' ? navigator.onLine : true
-  )
-  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+    typeof navigator !== "undefined" ? navigator.onLine : true,
+  );
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Monitor browser online/offline status
   useEffect(() => {
-    if (typeof window === 'undefined') return
+    if (typeof window === "undefined") return;
 
     const handleOnline = () => {
-      setIsOnline(true)
+      setIsOnline(true);
 
       // Clear any existing timeout
       if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current)
-        reconnectTimeoutRef.current = null
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
       }
 
       // Show "Reconnecting..." briefly, then mark as connected
-      setState('reconnecting')
+      setState("reconnecting");
       reconnectTimeoutRef.current = setTimeout(() => {
-        setState('connected')
-        setRetryCount(0)
-      }, 1500) // Show reconnecting for 1.5s before clearing
-    }
+        setState("connected");
+        setRetryCount(0);
+      }, 1500); // Show reconnecting for 1.5s before clearing
+    };
 
     const handleOffline = () => {
-      setIsOnline(false)
+      setIsOnline(false);
       // Immediately mark as disconnected when browser goes offline
-      setState('disconnected')
+      setState("disconnected");
       if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current)
-        reconnectTimeoutRef.current = null
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
       }
-    }
+    };
 
-    window.addEventListener('online', handleOnline)
-    window.addEventListener('offline', handleOffline)
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
 
     return () => {
-      window.removeEventListener('online', handleOnline)
-      window.removeEventListener('offline', handleOffline)
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
       // Clear any pending timeout to prevent memory leak
       if (reconnectTimeoutRef.current) {
-        clearTimeout(reconnectTimeoutRef.current)
-        reconnectTimeoutRef.current = null
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
       }
-    }
-  }, [])
+    };
+  }, []);
 
   const markDisconnected = useCallback(() => {
-    setState('reconnecting')
-    setRetryCount((prev) => prev + 1)
+    setState("reconnecting");
+    setRetryCount((prev) => prev + 1);
 
     // After 10 seconds of reconnecting, mark as fully disconnected
     if (reconnectTimeoutRef.current) {
-      clearTimeout(reconnectTimeoutRef.current)
+      clearTimeout(reconnectTimeoutRef.current);
     }
     reconnectTimeoutRef.current = setTimeout(() => {
       setState((current) =>
-        current === 'reconnecting' ? 'disconnected' : current
-      )
-    }, 10000)
-  }, [])
+        current === "reconnecting" ? "disconnected" : current,
+      );
+    }, 10000);
+  }, []);
 
   const markConnected = useCallback(() => {
     if (reconnectTimeoutRef.current) {
-      clearTimeout(reconnectTimeoutRef.current)
-      reconnectTimeoutRef.current = null
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
     }
-    setState('connected')
-    setRetryCount(0)
-  }, [])
+    setState("connected");
+    setRetryCount(0);
+  }, []);
 
   const reset = useCallback(() => {
     if (reconnectTimeoutRef.current) {
-      clearTimeout(reconnectTimeoutRef.current)
-      reconnectTimeoutRef.current = null
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
     }
-    setState('connected')
-    setRetryCount(0)
-  }, [])
+    setState("connected");
+    setRetryCount(0);
+  }, []);
 
   return (
     <ConnectionStatusContext.Provider
@@ -135,18 +135,18 @@ export const ConnectionStatusProvider = ({
     >
       {children}
     </ConnectionStatusContext.Provider>
-  )
-}
+  );
+};
 
 export const useConnectionStatus = () => {
-  const context = useContext(ConnectionStatusContext)
+  const context = useContext(ConnectionStatusContext);
   if (!context) {
     throw new Error(
-      'useConnectionStatus must be used within a ConnectionStatusProvider'
-    )
+      "useConnectionStatus must be used within a ConnectionStatusProvider",
+    );
   }
-  return context
-}
+  return context;
+};
 
 /**
  * Hook that returns connection status helpers for use in sendMessages.
@@ -154,5 +154,5 @@ export const useConnectionStatus = () => {
  */
 
 export const useConnectionStatusOptional = () => {
-  return useContext(ConnectionStatusContext)
-}
+  return useContext(ConnectionStatusContext);
+};