@gram-ai/elements 1.27.4 → 1.27.6

package/src/contexts/ElementsProvider.tsx

@@ -1,14 +1,14 @@
-import { FrontendTools } from '@/components/FrontendTools'
-import { ROOT_SELECTOR } from '@/constants/tailwind'
+import { FrontendTools } from "@/components/FrontendTools";
+import { ROOT_SELECTOR } from "@/constants/tailwind";
 import {
   isLocalThreadId,
   useGramThreadListAdapter,
-} from '@/hooks/useGramThreadListAdapter'
-import { useMCPTools } from '@/hooks/useMCPTools'
-import { useToolApproval } from '@/hooks/useToolApproval'
-import { getApiUrl } from '@/lib/api'
-import { initErrorTracking, trackError } from '@/lib/errorTracking'
-import { MODELS } from '@/lib/models'
+} from "@/hooks/useGramThreadListAdapter";
+import { useMCPTools } from "@/hooks/useMCPTools";
+import { useToolApproval } from "@/hooks/useToolApproval";
+import { getApiUrl } from "@/lib/api";
+import { initErrorTracking, trackError } from "@/lib/errorTracking";
+import { MODELS } from "@/lib/models";
 import {
   clearFrontendToolApprovalConfig,
   getEnabledTools,
@@ -17,33 +17,34 @@ import {
   wrapToolsWithApproval,
   type ApprovalHelpers,
   type FrontendTool,
-} from '@/lib/tools'
-import { cn } from '@/lib/utils'
-import { recommended } from '@/plugins'
-import { ElementsConfig, Model } from '@/types'
-import { Plugin } from '@/types/plugins'
+} from "@/lib/tools";
+import { cn } from "@/lib/utils";
+import { recommended } from "@/plugins";
+import { ElementsConfig, Model } from "@/types";
+import { Plugin } from "@/types/plugins";
 import {
   AssistantRuntimeProvider,
   AssistantTool,
   useAssistantState,
   unstable_useRemoteThreadListRuntime as useRemoteThreadListRuntime,
-} from '@assistant-ui/react'
+} from "@assistant-ui/react";
 import {
   frontendTools as convertFrontendToolsToAISDKTools,
   useChatRuntime,
-} from '@assistant-ui/react-ai-sdk'
-import { createOpenRouter } from '@openrouter/ai-sdk-provider'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+} from "@assistant-ui/react-ai-sdk";
+import { createOpenRouter } from "@openrouter/ai-sdk-provider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   convertToModelMessages,
   createUIMessageStream,
+  LanguageModel,
   smoothStream,
   stepCountIs,
   streamText,
   ToolSet,
   type ChatTransport,
   type UIMessage,
-} from 'ai'
+} from "ai";
 import {
   ReactNode,
   useCallback,
@@ -51,16 +52,16 @@ import {
   useMemo,
   useRef,
   useState,
-} from 'react'
-import { useAuth } from '../hooks/useAuth'
-import { ChatIdContext } from './ChatIdContext'
+} from "react";
+import { useAuth } from "../hooks/useAuth";
+import { ChatIdContext } from "./ChatIdContext";
 import {
   ConnectionStatusProvider,
   useConnectionStatusOptional,
-} from './ConnectionStatusContext'
-import { ElementsContext } from './contexts'
-import { ToolApprovalProvider } from './ToolApprovalContext'
-import { ToolExecutionProvider } from './ToolExecutionContext'
+} from "./ConnectionStatusContext";
+import { ElementsContext } from "./contexts";
+import { ToolApprovalProvider } from "./ToolApprovalContext";
+import { ToolExecutionProvider } from "./ToolExecutionContext";
 
 /**
  * Extracts executable tools from frontend tool definitions.
@@ -69,30 +70,30 @@ import { ToolExecutionProvider } from './ToolExecutionContext'
  */
 function extractExecutableTools(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  frontendTools: Record<string, FrontendTool<any, any>> | undefined
+  frontendTools: Record<string, FrontendTool<any, any>> | undefined,
 ): Record<
   string,
   { execute?: (args: unknown, options?: unknown) => Promise<unknown> }
 > {
-  if (!frontendTools) return {}
+  if (!frontendTools) return {};
 
   return Object.fromEntries(
     Object.entries(frontendTools).map(([name, tool]) => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const toolDef = (tool as any).unstable_tool
+      const toolDef = (tool as any).unstable_tool;
       return [
         name,
         {
           execute: toolDef?.execute,
         },
-      ]
-    })
-  )
+      ];
+    }),
+  );
 }
 
 export interface ElementsProviderProps {
-  children: ReactNode
-  config: ElementsConfig
+  children: ReactNode;
+  config: ElementsConfig;
 }
 
 const BASE_SYSTEM_PROMPT = `You are a helpful assistant that can answer questions and help with tasks.
@@ -103,26 +104,26 @@ Some tools have custom visual components that automatically render their results
 For tools WITHOUT custom components, you should present the data clearly - either as plain text for simple results, or using the UI code block format for structured data like lists of items, categories, or dashboards.
 
 UI Widget Guidelines:
-IMPORTANT: Only render ONE generative UI widget (chart, dashboard, visualization) per response. Never render multiple widgets in a single message - this causes layout shifts during streaming and overwhelms the user. If you have multiple visualizations to show, render the most important one and explicitly offer to show others as follow-ups (e.g., "Would you like to see a breakdown by status as well?").`
+IMPORTANT: Only render ONE generative UI widget (chart, dashboard, visualization) per response. Never render multiple widgets in a single message - this causes layout shifts during streaming and overwhelms the user. If you have multiple visualizations to show, render the most important one and explicitly offer to show others as follow-ups (e.g., "Would you like to see a breakdown by status as well?").`;
 
 function mergeInternalSystemPromptWith(
   userSystemPrompt: string | undefined,
   plugins: Plugin[],
-  toolsWithCustomComponents: string[]
+  toolsWithCustomComponents: string[],
 ) {
   const customToolsSection =
     toolsWithCustomComponents.length > 0
-      ? `\n\nTools with custom visual components (DO NOT render UI widgets for these - they already display rich visuals):\n${toolsWithCustomComponents.map((t) => `- ${t}`).join('\n')}`
-      : ''
+      ? `\n\nTools with custom visual components (DO NOT render UI widgets for these - they already display rich visuals):\n${toolsWithCustomComponents.map((t) => `- ${t}`).join("\n")}`
+      : "";
 
   return `
   ${BASE_SYSTEM_PROMPT}${customToolsSection}
 
   User-provided System Prompt:
-  ${userSystemPrompt ?? 'None provided'}
+  ${userSystemPrompt ?? "None provided"}
 
   Utilities:
-  ${plugins.map((plugin) => `- ${plugin.language}: ${plugin.prompt}`).join('\n')}`
+  ${plugins.map((plugin) => `- ${plugin.language}: ${plugin.prompt}`).join("\n")}`;
 }
 
 /**
@@ -131,9 +132,9 @@ function mergeInternalSystemPromptWith(
  */
 function cleanMessagesForModel(messages: UIMessage[]): UIMessage[] {
   return messages.map((message) => {
-    const partsArray = message.parts
+    const partsArray = message.parts;
     if (!Array.isArray(partsArray)) {
-      return message
+      return message;
     }
 
     // Process each part: strip providerOptions/providerMetadata and filter reasoning
@@ -141,15 +142,15 @@ function cleanMessagesForModel(messages: UIMessage[]): UIMessage[] {
     const cleanedParts = partsArray.map((part: any) => {
       // Strip providerOptions and providerMetadata from all remaining parts
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { callProviderMetadata: _, ...cleanPart } = part
-      return cleanPart
-    })
+      const { callProviderMetadata: _, ...cleanPart } = part;
+      return cleanPart;
+    });
 
     return {
       ...message,
       parts: cleanedParts,
-    }
-  })
+    };
+  });
 }
 
 /**
@@ -157,35 +158,35 @@ function cleanMessagesForModel(messages: UIMessage[]): UIMessage[] {
  * Delegates to either WithHistory or WithoutHistory based on config.
  */
 const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
-  const apiUrl = getApiUrl(config)
+  const apiUrl = getApiUrl(config);
   const auth = useAuth({
     auth: config.api,
     projectSlug: config.projectSlug,
-  })
+  });
 
   // Ref to access ensureValidHeaders in async transport without stale closures
-  const ensureValidHeadersRef = useRef(auth.ensureValidHeaders)
-  ensureValidHeadersRef.current = auth.ensureValidHeaders
-  const toolApproval = useToolApproval()
+  const ensureValidHeadersRef = useRef(auth.ensureValidHeaders);
+  ensureValidHeadersRef.current = auth.ensureValidHeaders;
+  const toolApproval = useToolApproval();
 
   const [model, setModel] = useState<Model>(
-    config.model?.defaultModel ?? MODELS[0]
-  )
+    config.model?.defaultModel ?? MODELS[0],
+  );
   const [isExpanded, setIsExpanded] = useState(
-    config.modal?.defaultExpanded ?? false
-  )
-  const [isOpen, setIsOpen] = useState(config.modal?.defaultOpen)
+    config.modal?.defaultExpanded ?? false,
+  );
+  const [isOpen, setIsOpen] = useState(config.modal?.defaultOpen);
 
-  const plugins = config.plugins ?? recommended
+  const plugins = config.plugins ?? recommended;
 
   // Get list of tools that have custom components registered
-  const toolsWithCustomComponents = Object.keys(config.tools?.components ?? {})
+  const toolsWithCustomComponents = Object.keys(config.tools?.components ?? {});
 
   const systemPrompt = mergeInternalSystemPromptWith(
     config.systemPrompt,
     plugins,
-    toolsWithCustomComponents
-  )
+    toolsWithCustomComponents,
+  );
 
   // Initialize error tracking on mount
   useEffect(() => {
@@ -193,15 +194,15 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
       enabled: config.errorTracking?.enabled,
       projectSlug: config.projectSlug,
       variant: config.variant,
-    })
-  }, [])
+    });
+  }, []);
 
   // 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)
+  const chatIdRef = useRef<string | null>(null);
 
   // State to expose the current chat ID via context
-  const [currentChatId, setCurrentChatId] = useState<string | null>(null)
+  const [currentChatId, setCurrentChatId] = useState<string | null>(null);
 
   const { data: mcpTools, mcpHeaders } = useMCPTools({
     auth,
@@ -209,23 +210,23 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
     environment: config.environment ?? {},
     toolsToInclude: config.tools?.toolsToInclude,
     gramEnvironment: config.gramEnvironment,
-  })
+  });
 
   // Store approval helpers in ref so they can be used in async contexts
   const approvalHelpersRef = useRef<ApprovalHelpers>({
     requestApproval: toolApproval.requestApproval,
     isToolApproved: toolApproval.isToolApproved,
     whitelistTool: toolApproval.whitelistTool,
-  })
+  });
 
   // Connection status for tracking network failures
-  const connectionStatus = useConnectionStatusOptional()
+  const connectionStatus = useConnectionStatusOptional();
 
   approvalHelpersRef.current = {
     requestApproval: toolApproval.requestApproval,
     isToolApproved: toolApproval.isToolApproved,
     whitelistTool: toolApproval.whitelistTool,
-  }
+  };
 
   const getApprovalHelpers = useCallback((): ApprovalHelpers => {
     return {
@@ -235,51 +236,51 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
         approvalHelpersRef.current.isToolApproved(...args),
       whitelistTool: (...args) =>
         approvalHelpersRef.current.whitelistTool(...args),
-    }
-  }, [])
+    };
+  }, []);
 
   // Set up frontend tool approval config for runtime checking
   useEffect(() => {
     if (config.tools?.toolsRequiringApproval) {
       setFrontendToolApprovalConfig(
         getApprovalHelpers(),
-        config.tools.toolsRequiringApproval
-      )
+        config.tools.toolsRequiringApproval,
+      );
     }
     return () => {
-      clearFrontendToolApprovalConfig()
-    }
-  }, [config.tools?.toolsRequiringApproval, getApprovalHelpers])
+      clearFrontendToolApprovalConfig();
+    };
+  }, [config.tools?.toolsRequiringApproval, getApprovalHelpers]);
 
   // Ref to access runtime from within transport's sendMessages.
   // This solves a circular dependency: transport needs runtime.thread.getModelContext(),
   // but runtime is created using transport. The ref gets populated after runtime creation.
-  const runtimeRef = useRef<ReturnType<typeof useChatRuntime> | null>(null)
+  const runtimeRef = useRef<ReturnType<typeof useChatRuntime> | null>(null);
 
   // Map to share local thread IDs to UUIDs between adapter and transport (for history mode)
-  const localIdToUuidMapRef = useRef(new Map<string, string>())
+  const localIdToUuidMapRef = useRef(new Map<string, string>());
 
   // Ref to store the current thread's remoteId, synced from assistant-ui state.
   // This is needed because the runtime object doesn't expose threadListItem.remoteId
   // in a way that's accessible from the transport's sendMessages function.
-  const currentRemoteIdRef = useRef<string | null>(null)
+  const currentRemoteIdRef = useRef<string | null>(null);
 
   // Create chat transport configuration
   const transport = useMemo<ChatTransport<UIMessage>>(
     () => ({
       sendMessages: async ({ messages, abortSignal }) => {
-        const usingCustomModel = !!config.languageModel
+        const usingCustomModel = !!config.languageModel;
 
         if (auth.isLoading) {
-          throw new Error('Session is loading')
+          throw new Error("Session is loading");
         }
 
         // Ensure the session token is still valid; refresh if expired
-        const validHeaders = await ensureValidHeadersRef.current()
+        const validHeaders = await ensureValidHeadersRef.current();
 
         // Get chat ID - use the synced remoteId ref first (history mode),
         // fall back to generated ID (non-history mode)
-        let chatId = currentRemoteIdRef.current
+        let chatId = currentRemoteIdRef.current;
 
         // If we have a valid remoteId (not a local ID), use it directly
         if (chatId && !isLocalThreadId(chatId)) {
@@ -287,21 +288,21 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
         } else if (isLocalThreadId(chatId) || !chatId) {
           // For local thread IDs or no ID, check/generate UUID mapping
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const runtimeAny = runtimeRef.current as any
-          const threadsState = runtimeAny?.threads?.getState?.()
+          const runtimeAny = runtimeRef.current as any;
+          const threadsState = runtimeAny?.threads?.getState?.();
           const localThreadId = (threadsState?.mainThreadId ??
-            threadsState?.threadIds?.[0]) as string | undefined
+            threadsState?.threadIds?.[0]) as string | undefined;
 
-          const lookupKey = chatId ?? localThreadId
+          const lookupKey = chatId ?? localThreadId;
           if (lookupKey) {
-            const existingUuid = localIdToUuidMapRef.current.get(lookupKey)
+            const existingUuid = localIdToUuidMapRef.current.get(lookupKey);
             if (existingUuid) {
-              chatId = existingUuid
+              chatId = existingUuid;
             } else {
               // Generate a new UUID and store the mapping
-              const newUuid = crypto.randomUUID()
-              localIdToUuidMapRef.current.set(lookupKey, newUuid)
-              chatId = newUuid
+              const newUuid = crypto.randomUUID();
+              localIdToUuidMapRef.current.set(lookupKey, newUuid);
+              chatId = newUuid;
             }
           }
         }
@@ -309,40 +310,40 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
         if (!chatId) {
           // Non-history mode fallback - use stable chatIdRef
           if (!chatIdRef.current) {
-            chatIdRef.current = crypto.randomUUID()
+            chatIdRef.current = crypto.randomUUID();
           }
-          chatId = chatIdRef.current
+          chatId = chatIdRef.current;
         }
 
         // Mutate the shared headers object so the MCP transport picks up the
         // chat ID on subsequent tool call requests.
         if (chatId) {
-          mcpHeaders['Gram-Chat-ID'] = chatId
+          mcpHeaders["Gram-Chat-ID"] = chatId;
           // Update the context state so consumers can access the current chat ID
-          setCurrentChatId(chatId)
+          setCurrentChatId(chatId);
         }
 
-        const context = runtimeRef.current?.thread.getModelContext()
+        const context = runtimeRef.current?.thread.getModelContext();
         const frontendTools = toAISDKTools(
-          getEnabledTools(context?.tools ?? {})
-        )
+          getEnabledTools(context?.tools ?? {}),
+        );
 
         // Include Gram-Chat-ID header for chat persistence and Gram-Environment for environment selection
         const headersWithChatId = {
           ...validHeaders,
-          'Gram-Chat-ID': chatId,
-          'X-Gram-Source': 'elements',
+          "Gram-Chat-ID": chatId,
+          "X-Gram-Source": "elements",
           ...config.api?.headers, // We do this after X-Gram-Source so the playground can override it
           ...(config.gramEnvironment && {
-            'Gram-Environment': config.gramEnvironment,
+            "Gram-Environment": config.gramEnvironment,
           }),
-        }
+        };
 
         // Update MCP headers with the (possibly refreshed) session token
         // so mid-stream MCP tool calls use the fresh token
-        const freshSession = validHeaders['Gram-Chat-Session']
+        const freshSession = validHeaders["Gram-Chat-Session"];
         if (freshSession) {
-          mcpHeaders['Gram-Chat-Session'] = freshSession
+          mcpHeaders["Gram-Chat-Session"] = freshSession;
         }
 
         // Create OpenRouter model (only needed when not using custom model)
@@ -350,43 +351,43 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
           ? null
           : createOpenRouter({
               baseURL: apiUrl,
-              apiKey: 'unused, but must be set',
+              apiKey: "unused, but must be set",
               headers: headersWithChatId,
-            })
+            });
 
         if (config.languageModel) {
-          console.log('Using custom language model', config.languageModel)
+          console.log("Using custom language model", config.languageModel);
         }
 
         // Combine tools - MCP tools only available when not using custom model
         const combinedTools: ToolSet = {
           ...mcpTools,
           ...convertFrontendToolsToAISDKTools(frontendTools),
-        } as ToolSet
+        } as ToolSet;
 
         // Wrap tools that require approval
         const tools = wrapToolsWithApproval(
           combinedTools,
           config.tools?.toolsRequiringApproval,
-          getApprovalHelpers()
-        )
+          getApprovalHelpers(),
+        );
 
         // Stream the response
         const modelToUse = config.languageModel
           ? config.languageModel
-          : openRouterModel!.chat(model)
+          : (openRouterModel!.chat(model) as LanguageModel);
 
         try {
           // This works around AI SDK bug where these fields cause validation failures
-          const cleanedMessages = cleanMessagesForModel(messages)
+          const cleanedMessages = cleanMessagesForModel(messages);
           // Filter out system messages from the UI state — the system prompt
           // is already provided via the `system:` parameter to streamText().
           // Without this, loaded chat history includes the system message which
           // gets sent alongside the `system:` param, causing duplication.
           const nonSystemMessages = cleanedMessages.filter(
-            (m) => m.role !== 'system'
-          )
-          const modelMessages = convertToModelMessages(nonSystemMessages)
+            (m) => m.role !== "system",
+          );
+          const modelMessages = convertToModelMessages(nonSystemMessages);
 
           const result = streamText({
             system: systemPrompt,
@@ -397,59 +398,59 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
             experimental_transform: smoothStream({ delayInMs: 15 }),
             abortSignal,
             onError: ({ error }) => {
-              console.error('Stream error in onError callback:', error)
-              trackError(error, { source: 'streaming' })
+              console.error("Stream error in onError callback:", error);
+              trackError(error, { source: "streaming" });
 
               // Check if this is a network/connection error
               const isNetworkError =
                 error instanceof TypeError ||
                 (error instanceof Error &&
-                  (error.message.includes('fetch') ||
-                    error.message.includes('network') ||
-                    error.message.includes('Failed to fetch') ||
-                    error.message.includes('NetworkError') ||
-                    error.message.includes('ECONNREFUSED') ||
-                    error.message.includes('ETIMEDOUT')))
+                  (error.message.includes("fetch") ||
+                    error.message.includes("network") ||
+                    error.message.includes("Failed to fetch") ||
+                    error.message.includes("NetworkError") ||
+                    error.message.includes("ECONNREFUSED") ||
+                    error.message.includes("ETIMEDOUT")));
 
               if (isNetworkError) {
-                connectionStatus?.markDisconnected()
+                connectionStatus?.markDisconnected();
               }
             },
-          })
+          });
 
           // Mark as connected when stream starts successfully
-          connectionStatus?.markConnected()
+          connectionStatus?.markConnected();
 
           // This weird construction is necessary to get errors to propagate properly to assistant-ui
           return createUIMessageStream({
             execute: ({ writer }) => {
-              writer.merge(result.toUIMessageStream())
+              writer.merge(result.toUIMessageStream());
             },
-          })
+          });
         } catch (error) {
-          console.error('Error creating stream:', error)
-          trackError(error, { source: 'stream-creation' })
+          console.error("Error creating stream:", error);
+          trackError(error, { source: "stream-creation" });
 
           // Check if this is a network/connection error
           const isNetworkError =
             error instanceof TypeError ||
             (error instanceof Error &&
-              (error.message.includes('fetch') ||
-                error.message.includes('network') ||
-                error.message.includes('Failed to fetch') ||
-                error.message.includes('NetworkError') ||
-                error.message.includes('ECONNREFUSED') ||
-                error.message.includes('ETIMEDOUT')))
+              (error.message.includes("fetch") ||
+                error.message.includes("network") ||
+                error.message.includes("Failed to fetch") ||
+                error.message.includes("NetworkError") ||
+                error.message.includes("ECONNREFUSED") ||
+                error.message.includes("ETIMEDOUT")));
 
           if (isNetworkError) {
-            connectionStatus?.markDisconnected()
+            connectionStatus?.markDisconnected();
           }
 
-          throw error
+          throw error;
         }
       },
       reconnectToStream: async () => {
-        throw new Error('Stream reconnection not supported')
+        throw new Error("Stream reconnection not supported");
       },
     }),
     [
@@ -462,10 +463,10 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
       apiUrl,
       auth.isLoading,
       connectionStatus,
-    ]
-  )
+    ],
+  );
 
-  const historyEnabled = config.history?.enabled ?? false
+  const historyEnabled = config.history?.enabled ?? false;
 
   // Shared context value for ElementsContext
   const contextValue = useMemo(
@@ -480,10 +481,10 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
       plugins,
       mcpTools,
     }),
-    [config, model, isExpanded, isOpen, plugins, mcpTools]
-  )
+    [config, model, isExpanded, isOpen, plugins, mcpTools],
+  );
 
-  const frontendTools = config.tools?.frontendTools ?? {}
+  const frontendTools = config.tools?.frontendTools ?? {};
 
   // Create combined executable tools for direct tool execution (ActionButton)
   // Uses a simplified type that focuses on the execute function
@@ -491,17 +492,17 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
     string,
     | { execute?: (args: unknown, options?: unknown) => Promise<unknown> }
     | undefined
-  >
+  >;
   const executableTools = useMemo<ExecutableToolSet>(() => {
     const extractedFrontendTools = extractExecutableTools(
-      config.tools?.frontendTools
-    )
+      config.tools?.frontendTools,
+    );
     // MCP tools and extracted frontend tools both have execute functions
     return {
       ...mcpTools,
       ...extractedFrontendTools,
-    } as ExecutableToolSet
-  }, [mcpTools, config.tools?.frontendTools])
+    } as ExecutableToolSet;
+  }, [mcpTools, config.tools?.frontendTools]);
 
   // Render the appropriate runtime provider based on history config.
   // We use separate components to avoid conditional hook calls.
@@ -522,7 +523,7 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
       >
         {children}
       </ElementsProviderWithHistory>
-    )
+    );
   }
 
   return (
@@ -536,31 +537,31 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
     >
       {children}
     </ElementsProviderWithoutHistory>
-  )
-}
+  );
+};
 
 // Shared type for executable tools
 type ExecutableToolSet = Record<
   string,
   | { execute?: (args: unknown, options?: unknown) => Promise<unknown> }
   | undefined
->
+>;
 
 // Separate component for history-enabled mode to avoid conditional hook calls
 interface ElementsProviderWithHistoryProps {
-  children: ReactNode
-  transport: ChatTransport<UIMessage>
-  apiUrl: string
-  headers: Record<string, string>
-  contextValue: React.ContextType<typeof ElementsContext>
-  runtimeRef: React.RefObject<ReturnType<typeof useChatRuntime> | null>
+  children: ReactNode;
+  transport: ChatTransport<UIMessage>;
+  apiUrl: string;
+  headers: Record<string, string>;
+  contextValue: React.ContextType<typeof ElementsContext>;
+  runtimeRef: React.RefObject<ReturnType<typeof useChatRuntime> | null>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  frontendTools: Record<string, AssistantTool | FrontendTool<any, any>>
-  localIdToUuidMap: Map<string, string>
-  currentRemoteIdRef: React.RefObject<string | null>
-  executableTools: ExecutableToolSet
-  currentChatId: string | null
-  setCurrentChatId: (chatId: string | null) => void
+  frontendTools: Record<string, AssistantTool | FrontendTool<any, any>>;
+  localIdToUuidMap: Map<string, string>;
+  currentRemoteIdRef: React.RefObject<string | null>;
+  executableTools: ExecutableToolSet;
+  currentChatId: string | null;
+  setCurrentChatId: (chatId: string | null) => void;
 }
 
 /**
@@ -571,18 +572,18 @@ const ThreadIdSync = ({
   remoteIdRef,
   onChatIdChange,
 }: {
-  remoteIdRef: React.RefObject<string | null>
-  onChatIdChange: (chatId: string | null) => void
+  remoteIdRef: React.RefObject<string | null>;
+  onChatIdChange: (chatId: string | null) => void;
 }) => {
   const remoteId = useAssistantState(
-    ({ threadListItem }) => threadListItem.remoteId ?? null
-  )
+    ({ threadListItem }) => threadListItem.remoteId ?? null,
+  );
   useEffect(() => {
-    remoteIdRef.current = remoteId
-    onChatIdChange(remoteId)
-  }, [remoteId, remoteIdRef, onChatIdChange])
-  return null
-}
+    remoteIdRef.current = remoteId;
+    onChatIdChange(remoteId);
+  }, [remoteId, remoteIdRef, onChatIdChange]);
+  return null;
+};
 
 const ElementsProviderWithHistory = ({
   children,
@@ -602,43 +603,43 @@ const ElementsProviderWithHistory = ({
     apiUrl,
     headers,
     localIdToUuidMap,
-  })
-  const initialThreadId = contextValue?.config.history?.initialThreadId
+  });
+  const initialThreadId = contextValue?.config.history?.initialThreadId;
 
   // Hook factory for creating the base chat runtime
   const useChatRuntimeHook = useCallback(() => {
-    return useChatRuntime({ transport })
-  }, [transport])
+    return useChatRuntime({ transport });
+  }, [transport]);
 
   const runtime = useRemoteThreadListRuntime({
     adapter: threadListAdapter,
     runtimeHook: useChatRuntimeHook,
-  })
+  });
 
   // Populate runtimeRef so transport can access thread context
   useEffect(() => {
-    runtimeRef.current = runtime as ReturnType<typeof useChatRuntime>
-  }, [runtime, runtimeRef])
+    runtimeRef.current = runtime as ReturnType<typeof useChatRuntime>;
+  }, [runtime, runtimeRef]);
 
   // Switch to initial thread if provided (for shared chat URLs)
-  const initialThreadSwitched = useRef(false)
+  const initialThreadSwitched = useRef(false);
   useEffect(() => {
     if (initialThreadId && !initialThreadSwitched.current) {
-      initialThreadSwitched.current = true
+      initialThreadSwitched.current = true;
       // Use setTimeout to ensure runtime is fully initialized
       const timeoutId = setTimeout(() => {
         runtime.threads.switchToThread(initialThreadId).catch((error) => {
-          console.error('Failed to switch to initial thread:', error)
-        })
-      }, 100)
-      return () => clearTimeout(timeoutId)
+          console.error("Failed to switch to initial thread:", error);
+        });
+      }, 100);
+      return () => clearTimeout(timeoutId);
     }
-  }, [initialThreadId, runtime])
+  }, [initialThreadId, runtime]);
 
   // Get the Provider from our adapter to wrap the content
   const HistoryProvider =
     threadListAdapter.unstable_Provider ??
-    (({ children }: { children: React.ReactNode }) => <>{children}</>)
+    (({ children }: { children: React.ReactNode }) => <>{children}</>);
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
@@ -653,9 +654,9 @@ const ElementsProviderWithHistory = ({
               <div
                 className={cn(
                   ROOT_SELECTOR,
-                  (contextValue?.config.variant === 'standalone' ||
-                    contextValue?.config.variant === 'sidecar') &&
-                    'h-full'
+                  (contextValue?.config.variant === "standalone" ||
+                    contextValue?.config.variant === "sidecar") &&
+                    "h-full",
                 )}
               >
                 {children}
@@ -666,19 +667,19 @@ const ElementsProviderWithHistory = ({
         </ChatIdContext.Provider>
       </HistoryProvider>
     </AssistantRuntimeProvider>
-  )
-}
+  );
+};
 
 // Separate component for non-history mode to avoid conditional hook calls
 interface ElementsProviderWithoutHistoryProps {
-  children: ReactNode
-  transport: ChatTransport<UIMessage>
-  contextValue: React.ContextType<typeof ElementsContext>
-  runtimeRef: React.RefObject<ReturnType<typeof useChatRuntime> | null>
+  children: ReactNode;
+  transport: ChatTransport<UIMessage>;
+  contextValue: React.ContextType<typeof ElementsContext>;
+  runtimeRef: React.RefObject<ReturnType<typeof useChatRuntime> | null>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  frontendTools: Record<string, AssistantTool | FrontendTool<any, any>>
-  executableTools: ExecutableToolSet
-  currentChatId: string | null
+  frontendTools: Record<string, AssistantTool | FrontendTool<any, any>>;
+  executableTools: ExecutableToolSet;
+  currentChatId: string | null;
 }
 
 const ElementsProviderWithoutHistory = ({
@@ -690,12 +691,12 @@ const ElementsProviderWithoutHistory = ({
   executableTools,
   currentChatId,
 }: ElementsProviderWithoutHistoryProps) => {
-  const runtime = useChatRuntime({ transport })
+  const runtime = useChatRuntime({ transport });
 
   // Populate runtimeRef so transport can access thread context
   useEffect(() => {
-    runtimeRef.current = runtime
-  }, [runtime, runtimeRef])
+    runtimeRef.current = runtime;
+  }, [runtime, runtimeRef]);
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
@@ -705,9 +706,9 @@ const ElementsProviderWithoutHistory = ({
             <div
               className={cn(
                 ROOT_SELECTOR,
-                (contextValue?.config.variant === 'standalone' ||
-                  contextValue?.config.variant === 'sidecar') &&
-                  'h-full'
+                (contextValue?.config.variant === "standalone" ||
+                  contextValue?.config.variant === "sidecar") &&
+                  "h-full",
               )}
             >
               {children}
@@ -717,10 +718,10 @@ const ElementsProviderWithoutHistory = ({
         </ElementsContext.Provider>
       </ChatIdContext.Provider>
     </AssistantRuntimeProvider>
-  )
-}
+  );
+};
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient();
 
 export const ElementsProvider = (props: ElementsProviderProps) => {
   return (
@@ -731,5 +732,5 @@ export const ElementsProvider = (props: ElementsProviderProps) => {
         </ToolApprovalProvider>
       </ConnectionStatusProvider>
     </QueryClientProvider>
-  )
-}
+  );
+};