@gram-ai/elements 1.27.4 → 1.27.6

package/src/components/assistant-ui/attachment.tsx

@@ -1,112 +1,112 @@
-'use client'
+"use client";
 
-import { PropsWithChildren, useEffect, useState, type FC } from 'react'
-import { XIcon, PlusIcon, FileText } from 'lucide-react'
+import { PropsWithChildren, useEffect, useState, type FC } from "react";
+import { XIcon, PlusIcon, FileText } from "lucide-react";
 import {
   AttachmentPrimitive,
   ComposerPrimitive,
   MessagePrimitive,
   useAssistantState,
   useAssistantApi,
-} from '@assistant-ui/react'
-import { useShallow } from 'zustand/shallow'
+} from "@assistant-ui/react";
+import { useShallow } from "zustand/shallow";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
+} from "@/components/ui/tooltip";
 import {
   Dialog,
   DialogTitle,
   DialogContent,
   DialogTrigger,
-} from '@/components/ui/dialog'
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
-import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/dialog";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
 
 const useFileSrc = (file: File | undefined) => {
-  const [src, setSrc] = useState<string | undefined>(undefined)
+  const [src, setSrc] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     if (!file) {
-      setSrc(undefined)
-      return
+      setSrc(undefined);
+      return;
     }
 
-    const objectUrl = URL.createObjectURL(file)
-    setSrc(objectUrl)
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
 
     return () => {
-      URL.revokeObjectURL(objectUrl)
-    }
-  }, [file])
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
 
-  return src
-}
+  return src;
+};
 
 const useAttachmentSrc = () => {
   const { file, src } = useAssistantState(
     useShallow(({ attachment }): { file?: File; src?: string } => {
-      if (attachment.type !== 'image') return {}
-      if (attachment.file) return { file: attachment.file }
-      const src = attachment.content?.filter((c) => c.type === 'image')[0]
-        ?.image
-      if (!src) return {}
-      return { src }
-    })
-  )
-
-  return useFileSrc(file) ?? src
-}
+      if (attachment.type !== "image") return {};
+      if (attachment.file) return { file: attachment.file };
+      const src = attachment.content?.filter((c) => c.type === "image")[0]
+        ?.image;
+      if (!src) return {};
+      return { src };
+    }),
+  );
+
+  return useFileSrc(file) ?? src;
+};
 
 type AttachmentPreviewProps = {
-  src: string
-}
+  src: string;
+};
 
 const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
-  const [isLoaded, setIsLoaded] = useState(false)
+  const [isLoaded, setIsLoaded] = useState(false);
   return (
     <img
       src={src}
       alt="Image Preview"
       className={
         isLoaded
-          ? 'aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain'
-          : 'aui-attachment-preview-image-loading hidden'
+          ? "aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain"
+          : "aui-attachment-preview-image-loading hidden"
       }
       onLoad={() => setIsLoaded(true)}
     />
-  )
-}
+  );
+};
 
 const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
-  const src = useAttachmentSrc()
+  const src = useAttachmentSrc();
 
-  if (!src) return children
+  if (!src) return children;
 
   return (
     <Dialog>
       <DialogTrigger className="aui-attachment-preview-trigger" asChild>
         {children}
       </DialogTrigger>
-      <DialogContent className="aui-attachment-preview-dialog-content [&_svg]:text-background [&>button]:bg-foreground/60 [&>button]:hover:[&_svg]:text-destructive p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100 [&>button]:!ring-0">
+      <DialogContent className="aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&_svg]:text-background [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:!ring-0 [&>button]:hover:[&_svg]:text-destructive">
         <DialogTitle className="aui-sr-only sr-only">
           Image Attachment Preview
         </DialogTitle>
-        <div className="aui-attachment-preview bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden">
+        <div className="aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background">
           <AttachmentPreview src={src} />
         </div>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const AttachmentThumb: FC = () => {
   const isImage = useAssistantState(
-    ({ attachment }) => attachment.type === 'image'
-  )
-  const src = useAttachmentSrc()
+    ({ attachment }) => attachment.type === "image",
+  );
+  const src = useAttachmentSrc();
 
   return (
     <Avatar className="aui-attachment-tile-avatar h-full w-full rounded-none">
@@ -116,51 +116,51 @@ const AttachmentThumb: FC = () => {
         className="aui-attachment-tile-image object-cover"
       />
       <AvatarFallback delayMs={isImage ? 200 : 0}>
-        <FileText className="aui-attachment-tile-fallback-icon text-muted-foreground size-8" />
+        <FileText className="aui-attachment-tile-fallback-icon size-8 text-muted-foreground" />
       </AvatarFallback>
     </Avatar>
-  )
-}
+  );
+};
 
 const AttachmentUI: FC = () => {
-  const api = useAssistantApi()
-  const isComposer = api.attachment.source === 'composer'
+  const api = useAssistantApi();
+  const isComposer = api.attachment.source === "composer";
 
   const isImage = useAssistantState(
-    ({ attachment }) => attachment.type === 'image'
-  )
+    ({ attachment }) => attachment.type === "image",
+  );
   const typeLabel = useAssistantState(({ attachment }) => {
-    const type = attachment.type
+    const type = attachment.type;
     switch (type) {
-      case 'image':
-        return 'Image'
-      case 'document':
-        return 'Document'
-      case 'file':
-        return 'File'
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
       default: {
-        const _exhaustiveCheck: never = type
-        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`)
+        const _exhaustiveCheck: never = type;
+        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
       }
     }
-  })
+  });
 
   return (
     <Tooltip>
       <AttachmentPrimitive.Root
         className={cn(
-          'aui-attachment-root relative',
+          "aui-attachment-root relative",
           isImage &&
-            'aui-attachment-root-composer only:[&>#attachment-tile]:size-24'
+            "aui-attachment-root-composer only:[&>#attachment-tile]:size-24",
         )}
       >
         <AttachmentPreviewDialog>
           <TooltipTrigger asChild>
             <div
               className={cn(
-                'aui-attachment-tile bg-muted size-14 cursor-pointer overflow-hidden rounded-[14px] border transition-opacity hover:opacity-75',
+                "aui-attachment-tile size-14 cursor-pointer overflow-hidden rounded-[14px] border bg-muted transition-opacity hover:opacity-75",
                 isComposer &&
-                  'aui-attachment-tile-composer border-foreground/20'
+                  "aui-attachment-tile-composer border-foreground/20",
               )}
               role="button"
               id="attachment-tile"
@@ -176,30 +176,30 @@ const AttachmentUI: FC = () => {
         <AttachmentPrimitive.Name />
       </TooltipContent>
     </Tooltip>
-  )
-}
+  );
+};
 
 const AttachmentRemove: FC = () => {
   return (
     <AttachmentPrimitive.Remove asChild>
       <TooltipIconButton
         tooltip="Remove file"
-        className="aui-attachment-tile-remove text-muted-foreground hover:[&_svg]:text-destructive absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white opacity-100 shadow-sm hover:!bg-white [&_svg]:text-black"
+        className="aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white text-muted-foreground opacity-100 shadow-sm hover:!bg-white [&_svg]:text-black hover:[&_svg]:text-destructive"
         side="top"
       >
         <XIcon className="aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" />
       </TooltipIconButton>
     </AttachmentPrimitive.Remove>
-  )
-}
+  );
+};
 
 export const UserMessageAttachments: FC = () => {
   return (
     <div className="aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2">
       <MessagePrimitive.Attachments components={{ Attachment: AttachmentUI }} />
     </div>
-  )
-}
+  );
+};
 
 export const ComposerAttachments: FC = () => {
   return (
@@ -208,8 +208,8 @@ export const ComposerAttachments: FC = () => {
         components={{ Attachment: AttachmentUI }}
       />
     </div>
-  )
-}
+  );
+};
 
 export const ComposerAddAttachment: FC = () => {
   return (
@@ -220,11 +220,11 @@ export const ComposerAddAttachment: FC = () => {
         variant="ghost"
         size="icon"
         align="start"
-        className="aui-composer-add-attachment hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30 size-[34px] rounded-full p-1 text-xs font-semibold"
+        className="aui-composer-add-attachment size-[34px] rounded-full p-1 text-xs font-semibold hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
         aria-label="Add Attachment"
       >
         <PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
       </TooltipIconButton>
     </ComposerPrimitive.AddAttachment>
-  )
-}
+  );
+};

package/src/components/assistant-ui/connection-status-indicator.tsx

@@ -1,17 +1,17 @@
-'use client'
+"use client";
 
 import {
   useConnectionStatus,
   useConnectionStatusOptional,
   type ConnectionState,
-} from '@/contexts/ConnectionStatusContext'
-import { cn } from '@/lib/utils'
-import { Loader2Icon, WifiOffIcon } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
-import { FC } from 'react'
+} from "@/contexts/ConnectionStatusContext";
+import { cn } from "@/lib/utils";
+import { Loader2Icon, WifiOffIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { FC } from "react";
 
 interface ConnectionStatusIndicatorProps {
-  className?: string
+  className?: string;
 }
 
 /**
@@ -21,9 +21,9 @@ interface ConnectionStatusIndicatorProps {
 export const ConnectionStatusIndicator: FC<ConnectionStatusIndicatorProps> = ({
   className,
 }) => {
-  const { state, isOnline } = useConnectionStatus()
+  const { state, isOnline } = useConnectionStatus();
 
-  const shouldShow = state === 'reconnecting' || state === 'disconnected'
+  const shouldShow = state === "reconnecting" || state === "disconnected";
 
   return (
     <AnimatePresence>
@@ -33,42 +33,42 @@ export const ConnectionStatusIndicator: FC<ConnectionStatusIndicatorProps> = ({
           animate={{ opacity: 1, y: 0, scale: 1 }}
           exit={{ opacity: 0, y: -20, scale: 0.95 }}
           transition={{
-            type: 'spring',
+            type: "spring",
             stiffness: 500,
             damping: 30,
           }}
           className={cn(
-            'pointer-events-none absolute top-4 right-0 left-0 z-50 flex justify-center',
-            className
+            "pointer-events-none absolute top-4 right-0 left-0 z-50 flex justify-center",
+            className,
           )}
         >
           <StatusPill state={state} isOnline={isOnline} />
         </motion.div>
       )}
     </AnimatePresence>
-  )
-}
+  );
+};
 
 const StatusPill: FC<{ state: ConnectionState; isOnline: boolean }> = ({
   state,
   isOnline,
 }) => {
-  const isReconnecting = state === 'reconnecting'
-  const isOffline = !isOnline
+  const isReconnecting = state === "reconnecting";
+  const isOffline = !isOnline;
 
   // Show "Offline" when browser is offline, otherwise show connection state
-  const showOffline = isOffline && state === 'disconnected'
+  const showOffline = isOffline && state === "disconnected";
   const showReconnecting =
-    isReconnecting || (isOffline && state !== 'connected')
+    isReconnecting || (isOffline && state !== "connected");
 
   return (
     <div
       className={cn(
-        'pointer-events-auto flex items-center gap-2 rounded-full px-4 py-2 shadow-lg backdrop-blur-md',
-        'border',
+        "pointer-events-auto flex items-center gap-2 rounded-full px-4 py-2 shadow-lg backdrop-blur-md",
+        "border",
         showOffline || showReconnecting
-          ? 'border-zinc-200 bg-white text-zinc-900 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white'
-          : 'border-red-200 bg-red-500/90 text-white dark:border-red-800 dark:bg-red-600/90'
+          ? "border-zinc-200 bg-white text-zinc-900 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"
+          : "border-red-200 bg-red-500/90 text-white dark:border-red-800 dark:bg-red-600/90",
       )}
     >
       {showOffline ? (
@@ -88,8 +88,8 @@ const StatusPill: FC<{ state: ConnectionState; isOnline: boolean }> = ({
         </>
       )}
     </div>
-  )
-}
+  );
+};
 
 /**
  * Wrapper version that handles the case when ConnectionStatusProvider is not available.
@@ -99,15 +99,15 @@ const StatusPill: FC<{ state: ConnectionState; isOnline: boolean }> = ({
 export const ConnectionStatusIndicatorSafe: FC<
   ConnectionStatusIndicatorProps
 > = ({ className }) => {
-  const connectionStatus = useConnectionStatusOptional()
+  const connectionStatus = useConnectionStatusOptional();
 
   // Provider not available, render nothing
   if (!connectionStatus) {
-    return null
+    return null;
   }
 
-  const { state, isOnline } = connectionStatus
-  const shouldShow = state === 'reconnecting' || state === 'disconnected'
+  const { state, isOnline } = connectionStatus;
+  const shouldShow = state === "reconnecting" || state === "disconnected";
 
   return (
     <AnimatePresence>
@@ -117,18 +117,18 @@ export const ConnectionStatusIndicatorSafe: FC<
           animate={{ opacity: 1, y: 0, scale: 1 }}
           exit={{ opacity: 0, y: -20, scale: 0.95 }}
           transition={{
-            type: 'spring',
+            type: "spring",
             stiffness: 500,
             damping: 30,
           }}
           className={cn(
-            'pointer-events-none absolute top-4 right-0 left-0 z-50 flex justify-center',
-            className
+            "pointer-events-none absolute top-4 right-0 left-0 z-50 flex justify-center",
+            className,
           )}
         >
           <StatusPill state={state} isOnline={isOnline} />
         </motion.div>
       )}
     </AnimatePresence>
-  )
-}
+  );
+};

package/src/components/assistant-ui/error-boundary.tsx

@@ -1,27 +1,27 @@
-'use client'
+"use client";
 
-import { AlertCircle } from 'lucide-react'
-import { Component, type ErrorInfo, type ReactNode } from 'react'
-import { trackError } from '@/lib/errorTracking'
-import { cn } from '@/lib/utils'
-import { Button } from '../ui/button'
+import { AlertCircle } from "lucide-react";
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { trackError } from "@/lib/errorTracking";
+import { cn } from "@/lib/utils";
+import { Button } from "../ui/button";
 
 interface ErrorBoundaryProps {
-  children: ReactNode
-  fallback?: ReactNode
-  onError?: (error: Error, errorInfo: ErrorInfo) => void
-  onReset?: () => void
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  onReset?: () => void;
 }
 
 interface ErrorBoundaryState {
-  hasError: boolean
-  error: Error | null
-  resetKey: number
+  hasError: boolean;
+  error: Error | null;
+  resetKey: number;
 }
 
 interface ErrorFallbackProps {
-  error: Error | null
-  onRetry: () => void
+  error: Error | null;
+  onRetry: () => void;
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
@@ -29,7 +29,7 @@ const ErrorFallback = ({ error, onRetry }: ErrorFallbackProps) => {
   return (
     <div
       className={cn(
-        'aui-root aui-error-boundary bg-background flex h-full w-full flex-col items-center justify-center p-6'
+        "aui-root aui-error-boundary flex h-full w-full flex-col items-center justify-center bg-background p-6",
       )}
     >
       <div className="flex flex-col items-center gap-4 text-center">
@@ -37,14 +37,14 @@ const ErrorFallback = ({ error, onRetry }: ErrorFallbackProps) => {
           <AlertCircle className="size-12 stroke-[1.5px]" />
         </div>
         <div className="flex flex-col gap-2">
-          <h3 className="text-foreground text-xl font-semibold">
+          <h3 className="text-xl font-semibold text-foreground">
             Something went wrong
           </h3>
-          <p className="text-muted-foreground text-base">
+          <p className="text-base text-muted-foreground">
             An error occurred while loading the chat.
           </p>
           {error && (
-            <p className="text-muted-foreground/60 max-w-md truncate text-sm">
+            <p className="max-w-md truncate text-sm text-muted-foreground/60">
               {error.message}
             </p>
           )}
@@ -54,11 +54,11 @@ const ErrorFallback = ({ error, onRetry }: ErrorFallbackProps) => {
         </Button>
       </div>
     </div>
-  )
-}
+  );
+};
 
 // eslint-disable-next-line react-refresh/only-export-components
-const Remounter = ({ children }: { children: ReactNode }) => <>{children}</>
+const Remounter = ({ children }: { children: ReactNode }) => <>{children}</>;
 
 /**
  * Global error boundary for the Elements library. Catches unexpected errors and renders a fallback UI.
@@ -73,21 +73,21 @@ export class ErrorBoundary extends Component<
   ErrorBoundaryState
 > {
   constructor(props: ErrorBoundaryProps) {
-    super(props)
-    this.state = { hasError: false, error: null, resetKey: 0 }
+    super(props);
+    this.state = { hasError: false, error: null, resetKey: 0 };
   }
 
   static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
-    return { hasError: true, error }
+    return { hasError: true, error };
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     // Track error to Datadog RUM
     trackError(error, {
-      source: 'error-boundary',
+      source: "error-boundary",
       componentStack: errorInfo.componentStack ?? undefined,
-    })
-    this.props.onError?.(error, errorInfo)
+    });
+    this.props.onError?.(error, errorInfo);
   }
 
   handleRetry = () => {
@@ -96,24 +96,24 @@ export class ErrorBoundary extends Component<
       hasError: false,
       error: null,
       resetKey: state.resetKey + 1,
-    }))
-    this.props.onReset?.()
-  }
+    }));
+    this.props.onReset?.();
+  };
 
   render(): ReactNode {
     if (this.state.hasError) {
       if (this.props.fallback) {
-        return this.props.fallback
+        return this.props.fallback;
       }
 
       return (
         <ErrorFallback error={this.state.error} onRetry={this.handleRetry} />
-      )
+      );
     }
 
     // Use Remounter with key to force unmount/remount of children when retry is clicked
     return (
       <Remounter key={this.state.resetKey}>{this.props.children}</Remounter>
-    )
+    );
   }
 }