@gram-ai/elements 1.21.1 → 1.21.3

package/src/contexts/ElementsProvider.tsx

@@ -46,7 +46,11 @@ import {
 import { useAuth } from '../hooks/useAuth'
 import { ElementsContext } from './contexts'
 import { ToolApprovalProvider } from './ToolApprovalContext'
-import { useGramThreadListAdapter } from '@/hooks/useGramThreadListAdapter'
+import {
+  isLocalThreadId,
+  useGramThreadListAdapter,
+} from '@/hooks/useGramThreadListAdapter'
+import { ROOT_SELECTOR } from '@/constants/tailwind'
 
 export interface ElementsProviderProps {
   children: ReactNode
@@ -139,6 +143,7 @@ const ElementsProviderWithApproval = ({
     auth,
     mcp: config.mcp,
     environment: config.environment ?? {},
+    gramEnvironment: config.gramEnvironment,
   })
 
   // Store approval helpers in ref so they can be used in async contexts
@@ -187,6 +192,9 @@ const ElementsProviderWithApproval = ({
   // When history is enabled, the thread adapter manages chat IDs instead
   const chatIdRef = useRef<string | null>(null)
 
+  // Map to share local thread IDs to UUIDs between adapter and transport (for history mode)
+  const localIdToUuidMapRef = useRef(new Map<string, string>())
+
   // Create chat transport configuration
   const transport = useMemo<ChatTransport<UIMessage>>(
     () => ({
@@ -197,9 +205,47 @@ 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()
+        // Get chat ID - try runtime's thread remoteId first (history mode),
+        // fall back to generated ID (non-history mode)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const runtimeAny = runtimeRef.current as any
+
+        // Try multiple paths to get thread info
+        const threadListItemState = runtimeAny?.threadListItem?.getState?.()
+        const threadsState = runtimeAny?.threads?.getState?.()
+
+        // Get the thread ID - try different sources
+        const threadRemoteId = threadListItemState?.remoteId as
+          | string
+          | undefined
+        const localThreadId = (threadListItemState?.id ??
+          threadsState?.mainThreadId ??
+          threadsState?.threadIds?.[0]) as string | undefined
+
+        let chatId = threadRemoteId
+
+        if (isLocalThreadId(chatId) || (!chatId && localThreadId)) {
+          const lookupKey = chatId ?? localThreadId
+          if (lookupKey) {
+            // For local thread IDs, check if we already have a UUID mapping
+            const existingUuid = localIdToUuidMapRef.current.get(lookupKey)
+            if (existingUuid) {
+              chatId = existingUuid
+            } else {
+              // Generate a new UUID and store the mapping
+              const newUuid = crypto.randomUUID()
+              localIdToUuidMapRef.current.set(lookupKey, newUuid)
+              chatId = newUuid
+            }
+          }
+        }
+
+        if (!chatId) {
+          // Non-history mode fallback - use stable chatIdRef
+          if (!chatIdRef.current) {
+            chatIdRef.current = crypto.randomUUID()
+          }
+          chatId = chatIdRef.current
         }
 
         const context = runtimeRef.current?.thread.getModelContext()
@@ -207,10 +253,13 @@ const ElementsProviderWithApproval = ({
           getEnabledTools(context?.tools ?? {})
         )
 
-        // Include Gram-Chat-ID header for chat persistence
+        // Include Gram-Chat-ID header for chat persistence and Gram-Environment for environment selection
         const headersWithChatId = {
           ...auth.headers,
-          'Gram-Chat-ID': chatIdRef.current,
+          'Gram-Chat-ID': chatId,
+          ...(config.gramEnvironment && {
+            'Gram-Environment': config.gramEnvironment,
+          }),
         }
 
         // Create OpenRouter model (only needed when not using custom model)
@@ -317,6 +366,7 @@ const ElementsProviderWithApproval = ({
         contextValue={contextValue}
         runtimeRef={runtimeRef}
         frontendTools={frontendTools}
+        localIdToUuidMap={localIdToUuidMapRef.current}
       >
         {children}
       </ElementsProviderWithHistory>
@@ -344,6 +394,7 @@ interface ElementsProviderWithHistoryProps {
   contextValue: React.ContextType<typeof ElementsContext>
   runtimeRef: React.RefObject<ReturnType<typeof useChatRuntime> | null>
   frontendTools: Record<string, AssistantTool>
+  localIdToUuidMap: Map<string, string>
 }
 
 const ElementsProviderWithHistory = ({
@@ -354,8 +405,13 @@ const ElementsProviderWithHistory = ({
   contextValue,
   runtimeRef,
   frontendTools,
+  localIdToUuidMap,
 }: ElementsProviderWithHistoryProps) => {
-  const threadListAdapter = useGramThreadListAdapter({ apiUrl, headers })
+  const threadListAdapter = useGramThreadListAdapter({
+    apiUrl,
+    headers,
+    localIdToUuidMap,
+  })
 
   // Hook factory for creating the base chat runtime
   const useChatRuntimeHook = useCallback(() => {
@@ -381,7 +437,7 @@ const ElementsProviderWithHistory = ({
     <AssistantRuntimeProvider runtime={runtime}>
       <HistoryProvider>
         <ElementsContext.Provider value={contextValue}>
-          {children}
+          <div className={`${ROOT_SELECTOR} h-full`}>{children}</div>
           <FrontendTools tools={frontendTools} />
         </ElementsContext.Provider>
       </HistoryProvider>
@@ -415,7 +471,7 @@ const ElementsProviderWithoutHistory = ({
   return (
     <AssistantRuntimeProvider runtime={runtime}>
       <ElementsContext.Provider value={contextValue}>
-        {children}
+        <div className={`${ROOT_SELECTOR} h-full`}>{children}</div>
         <FrontendTools tools={frontendTools} />
       </ElementsContext.Provider>
     </AssistantRuntimeProvider>

package/src/embedded.ts

@@ -0,0 +1,3 @@
+// Side-effect import to include embedded CSS in build
+// Use this CSS for embedding elements in apps that already have Tailwind CSS
+import './global-embedded.css'

package/src/global.css

@@ -247,3 +247,48 @@
 [data-radius='pill'] .gram-elements {
   --radius: 9999px;
 }
+
+/* assistant-ui loading dot styles (from @assistant-ui/react-markdown/styles/dot.css) */
+@keyframes aui-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.gram-elements :where(.aui-md[data-status='running']):empty::after,
+.gram-elements
+  :where(.aui-md[data-status='running'])
+  > :where(:not(ol):not(ul):not(pre)):last-child::after,
+.gram-elements :where(.aui-md[data-status='running']) > pre:last-child code::after,
+.gram-elements
+  :where(.aui-md[data-status='running'])
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child:not(:has(* > li)))::after,
+.gram-elements
+  :where(.aui-md[data-status='running'])
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child:not(:has(* > li)))::after,
+.gram-elements
+  :where(.aui-md[data-status='running'])
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)::after {
+  animation: aui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --aui-content: '\25cf';
+  content: var(--aui-content);
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}

package/src/hooks/useGramThreadListAdapter.tsx

@@ -6,7 +6,7 @@ import {
   useAssistantApi,
   type AssistantApi,
 } from '@assistant-ui/react'
-import type { AssistantStream } from 'assistant-stream'
+import { createAssistantStream, type AssistantStream } from 'assistant-stream'
 import {
   GramChatOverview,
   GramChat,
@@ -21,9 +21,26 @@ import {
   type PropsWithChildren,
 } from 'react'
 
+/**
+ * Prefix used by assistant-ui for local thread IDs that haven't been persisted yet.
+ * This is an internal implementation detail of assistant-ui's RemoteThreadListThreadListRuntimeCore.
+ * If the library changes this prefix, we only need to update it here.
+ */
+const LOCAL_THREAD_ID_PREFIX = '__LOCALID_'
+
+/**
+ * Checks if a thread ID is a local (unpersisted) thread ID.
+ * Local IDs are generated by assistant-ui before the thread is initialized with a remote ID.
+ */
+export function isLocalThreadId(threadId: string | undefined): boolean {
+  return !!threadId?.startsWith(LOCAL_THREAD_ID_PREFIX)
+}
+
 export interface ThreadListAdapterOptions {
   apiUrl: string
   headers: Record<string, string>
+  /** Map to translate local thread IDs to UUIDs (shared with transport) */
+  localIdToUuidMap?: Map<string, string>
 }
 
 interface ListChatsResponse {
@@ -227,6 +244,26 @@ export function useGramThreadListAdapter(
       },
 
       async initialize(threadId: string) {
+        // For new threads (local IDs), check if sendMessages already created a UUID
+        if (isLocalThreadId(threadId)) {
+          // Check if transport already generated a UUID for this local ID
+          const existingUuid =
+            optionsRef.current.localIdToUuidMap?.get(threadId)
+          if (existingUuid) {
+            return {
+              remoteId: existingUuid,
+              externalId: existingUuid,
+            }
+          }
+          // Otherwise generate a new one and store it
+          const uuid = crypto.randomUUID()
+          optionsRef.current.localIdToUuidMap?.set(threadId, uuid)
+          return {
+            remoteId: uuid,
+            externalId: uuid,
+          }
+        }
+        // For existing threads, use the ID as-is
         return {
           remoteId: threadId,
           externalId: threadId,
@@ -250,21 +287,65 @@ export function useGramThreadListAdapter(
       },
 
       async generateTitle(
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _remoteId: string,
+        remoteId: string,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         _messages: readonly ThreadMessage[]
       ): Promise<AssistantStream> {
-        // Return an empty stream that immediately completes
-        // Server generates titles automatically, so we just provide a placeholder
-        return new ReadableStream({
-          start(controller) {
+        // Skip if this is a local ID that hasn't been persisted yet
+        if (!remoteId || isLocalThreadId(remoteId)) {
+          return createAssistantStream((controller) => {
             controller.close()
-          },
-        }) as AssistantStream
+          })
+        }
+
+        // Call the server to generate and persist the title
+        try {
+          const response = await fetch(
+            `${optionsRef.current.apiUrl}/rpc/chat.generateTitle`,
+            {
+              method: 'POST',
+              headers: {
+                ...optionsRef.current.headers,
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({ id: remoteId }),
+            }
+          )
+
+          if (response.ok) {
+            const result = (await response.json()) as { title: string }
+            const title = result.title || 'New Chat'
+
+            // Return a stream that emits the title as text
+            return createAssistantStream((controller) => {
+              controller.appendText(title)
+              controller.close()
+            })
+          }
+
+          // 404 is expected for new chats that haven't been persisted yet
+          if (response.status !== 404) {
+            console.error('Error generating title:', response.status)
+          }
+        } catch (error) {
+          console.error('Error generating title:', error)
+        }
+
+        // Fallback: return empty stream
+        return createAssistantStream((controller) => {
+          controller.close()
+        })
       },
 
       async fetch(threadId: string) {
+        // Skip if this is a local ID that hasn't been persisted yet
+        if (!threadId || isLocalThreadId(threadId)) {
+          return {
+            remoteId: threadId,
+            status: 'regular' as const,
+          }
+        }
+
         try {
           const response = await fetch(
             `${optionsRef.current.apiUrl}/rpc/chat.load?id=${encodeURIComponent(threadId)}`,

package/src/hooks/useMCPTools.ts

@@ -11,17 +11,19 @@ export function useMCPTools({
   auth,
   mcp,
   environment,
+  gramEnvironment,
 }: {
   auth: Auth
   mcp: string | undefined
   environment: Record<string, unknown>
+  gramEnvironment?: string
 }): UseQueryResult<MCPToolsResult, Error> {
   const authQueryKey = Object.entries(auth.headers ?? {}).map(
     (k, v) => `${k}:${v}`
   )
 
   const queryResult = useQuery({
-    queryKey: ['mcpTools', mcp, ...authQueryKey],
+    queryKey: ['mcpTools', mcp, gramEnvironment, ...authQueryKey],
     queryFn: async () => {
       assert(!auth.isLoading, 'No auth found')
       assert(mcp, 'No MCP URL found')
@@ -34,6 +36,7 @@ export function useMCPTools({
           headers: {
             ...transformEnvironmentToHeaders(environment ?? {}),
             ...auth.headers,
+            ...(gramEnvironment && { 'Gram-Environment': gramEnvironment }),
           },
         },
       })

package/src/index.ts

@@ -9,7 +9,7 @@ export { useElements } from './hooks/useElements'
 
 // Core Components
 export { Chat } from '@/components/Chat'
-export { ThreadList as ChatHistory } from '@/components/assistant-ui/thread-list'
+export { ChatHistory } from '@/components/ChatHistory'
 
 // Frontend Tools
 export { defineFrontendTool } from './lib/tools'

package/src/types/index.ts

@@ -111,6 +111,13 @@ export interface ElementsConfig {
    */
   environment?: Record<string, unknown>
 
+  /**
+   * The environment slug to use for resolving secrets.
+   * When specified, this is sent as the Gram-Environment header to select
+   * which environment's secrets to use for tool execution.
+   */
+  gramEnvironment?: string
+
   /**
    * The layout variant for the chat interface.
    *

package/src/vite-env.d.ts

@@ -13,3 +13,8 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
+
+declare module '*.css?inline' {
+  const content: string
+  export default content
+}