@gram-ai/elements 1.20.0 → 1.20.2

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

@@ -0,0 +1,113 @@
+'use client'
+
+import { AlertCircle } from 'lucide-react'
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from '../ui/button'
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode
+  onError?: (error: Error, errorInfo: ErrorInfo) => void
+  onReset?: () => void
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+  resetKey: number
+}
+
+interface ErrorFallbackProps {
+  error: Error | null
+  onRetry: () => void
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+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'
+      )}
+    >
+      <div className="flex flex-col items-center gap-4 text-center">
+        <div className="text-destructive">
+          <AlertCircle className="size-12 stroke-[1.5px]" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <h3 className="text-foreground text-xl font-semibold">
+            Something went wrong
+          </h3>
+          <p className="text-muted-foreground text-base">
+            An error occurred while loading the chat.
+          </p>
+          {error && (
+            <p className="text-muted-foreground/60 max-w-md truncate text-sm">
+              {error.message}
+            </p>
+          )}
+        </div>
+        <Button onClick={onRetry} variant="default" className="mt-2">
+          Try again
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+const Remounter = ({ children }: { children: ReactNode }) => <>{children}</>
+
+/**
+ * Global error boundary for the Elements library. Catches unexpected errors and renders a fallback UI.
+ * We wrap the assistant-modal, assistant-sidecar, and chat components with this error boundary.
+ * Each variant needs to have the error boundary rendered at the appropriate level e.g if using
+ * the widget variant, then the error screen must be rendered within the widget modal.
+ * TODO: We should add more granular error boundaries (e.g wrapping AssistantMessage, ThreadWelcome, etc.)
+ * TODO: We should also wrap ChatHistory, which may yield its own errors.
+ */
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false, error: null, resetKey: 0 }
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.props.onError?.(error, errorInfo)
+  }
+
+  handleRetry = () => {
+    // Increment resetKey to force remount of children, reinitializing the chat
+    this.setState((state) => ({
+      hasError: false,
+      error: null,
+      resetKey: state.resetKey + 1,
+    }))
+    this.props.onReset?.()
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (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>
+    )
+  }
+}

package/src/components/assistant-ui/thread-list.tsx

@@ -12,13 +12,18 @@ import { useRadius } from '@/hooks/useRadius'
 import { cn } from '@/lib/utils'
 import { useDensity } from '@/hooks/useDensity'
 
-export const ThreadList: FC = () => {
+interface ThreadListProps {
+  className?: string
+}
+
+export const ThreadList: FC<ThreadListProps> = ({ className }) => {
   const d = useDensity()
   return (
     <ThreadListPrimitive.Root
       className={cn(
-        'aui-root aui-thread-list-root flex flex-col items-stretch',
-        d('gap-sm')
+        'aui-root aui-thread-list-root bg-background flex flex-col items-stretch',
+        d('gap-sm'),
+        className
       )}
     >
       <div

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

@@ -68,7 +68,11 @@ const ApiKeyWarning = () => (
   </div>
 )
 
-export const Thread: FC = () => {
+interface ThreadProps {
+  className?: string
+}
+
+export const Thread: FC<ThreadProps> = ({ className }) => {
   const themeProps = useThemeProps()
   const d = useDensity()
   const { config } = useElements()
@@ -81,7 +85,8 @@ export const Thread: FC = () => {
         <ThreadPrimitive.Root
           className={cn(
             'aui-root aui-thread-root bg-background @container flex h-full flex-col',
-            themeProps.className
+            themeProps.className,
+            className
           )}
         >
           <ThreadPrimitive.Viewport

package/src/contexts/ElementsProvider.tsx

@@ -173,6 +173,10 @@ const ElementsProviderWithApproval = ({
   // but runtime is created using transport. The ref gets populated after runtime creation.
   const runtimeRef = useRef<ReturnType<typeof useChatRuntime> | null>(null)
 
+  // Generate a stable chat ID for server-side persistence (when history is disabled)
+  // When history is enabled, the thread adapter manages chat IDs instead
+  const chatIdRef = useRef<string | null>(null)
+
   // Create chat transport configuration
   const transport = useMemo<ChatTransport<UIMessage>>(
     () => ({
@@ -183,18 +187,29 @@ const ElementsProviderWithApproval = ({
           throw new Error('Session is loading')
         }
 
+        // Generate chat ID on first message if not already set
+        if (!chatIdRef.current) {
+          chatIdRef.current = crypto.randomUUID()
+        }
+
         const context = runtimeRef.current?.thread.getModelContext()
         const frontendTools = toAISDKTools(
           getEnabledTools(context?.tools ?? {})
         )
 
+        // Include Gram-Chat-ID header for chat persistence
+        const headersWithChatId = {
+          ...auth.headers,
+          'Gram-Chat-ID': chatIdRef.current,
+        }
+
         // Create OpenRouter model (only needed when not using custom model)
         const openRouterModel = usingCustomModel
           ? null
           : createOpenRouter({
               baseURL: apiUrl,
               apiKey: 'unused, but must be set',
-              headers: auth.headers,
+              headers: headersWithChatId,
             })
 
         if (config.languageModel) {