@gram-ai/elements 1.25.1 → 1.25.2

package/src/contexts/ElementsProvider.tsx

@@ -59,6 +59,7 @@ import {
   useConnectionStatusOptional,
 } from './ConnectionStatusContext'
 import { ToolExecutionProvider } from './ToolExecutionContext'
+import { ChatIdContext } from './ChatIdContext'
 
 /**
  * Extracts executable tools from frontend tool definitions.
@@ -93,14 +94,25 @@ export interface ElementsProviderProps {
   config: ElementsConfig
 }
 
-const BASE_SYSTEM_PROMPT = `You are a helpful assistant that can answer questions and help with tasks.`
+const BASE_SYSTEM_PROMPT = `You are a helpful assistant that can answer questions and help with tasks.
+
+Tool Result Display:
+Some tools have custom visual components that automatically render their results (you'll see a rich card/widget appear). For these, do not repeat the data - just add brief context or a follow-up question if needed.
+
+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.`
 
 function mergeInternalSystemPromptWith(
   userSystemPrompt: string | undefined,
-  plugins: Plugin[]
+  plugins: Plugin[],
+  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')}`
+      : ''
+
   return `
-  ${BASE_SYSTEM_PROMPT}
+  ${BASE_SYSTEM_PROMPT}${customToolsSection}
 
   User-provided System Prompt:
   ${userSystemPrompt ?? 'None provided'}
@@ -158,9 +170,13 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
 
   const plugins = config.plugins ?? recommended
 
+  // Get list of tools that have custom components registered
+  const toolsWithCustomComponents = Object.keys(config.tools?.components ?? {})
+
   const systemPrompt = mergeInternalSystemPromptWith(
     config.systemPrompt,
-    plugins
+    plugins,
+    toolsWithCustomComponents
   )
 
   // Initialize error tracking on mount
@@ -176,6 +192,9 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
   // When history is enabled, the thread adapter manages chat IDs instead
   const chatIdRef = useRef<string | null>(null)
 
+  // State to expose the current chat ID via context
+  const [currentChatId, setCurrentChatId] = useState<string | null>(null)
+
   const { data: mcpTools, mcpHeaders } = useMCPTools({
     auth,
     mcp: config.mcp,
@@ -288,6 +307,8 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
         // chat ID on subsequent tool call requests.
         if (chatId) {
           mcpHeaders['Gram-Chat-ID'] = chatId
+          // Update the context state so consumers can access the current chat ID
+          setCurrentChatId(chatId)
         }
 
         const context = runtimeRef.current?.thread.getModelContext()
@@ -467,6 +488,8 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
         localIdToUuidMap={localIdToUuidMapRef.current}
         currentRemoteIdRef={currentRemoteIdRef}
         executableTools={executableTools}
+        currentChatId={currentChatId}
+        setCurrentChatId={setCurrentChatId}
       >
         {children}
       </ElementsProviderWithHistory>
@@ -480,6 +503,7 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
       runtimeRef={runtimeRef}
       frontendTools={frontendTools}
       executableTools={executableTools}
+      currentChatId={currentChatId}
     >
       {children}
     </ElementsProviderWithoutHistory>
@@ -506,23 +530,28 @@ interface ElementsProviderWithHistoryProps {
   localIdToUuidMap: Map<string, string>
   currentRemoteIdRef: React.RefObject<string | null>
   executableTools: ExecutableToolSet
+  currentChatId: string | null
+  setCurrentChatId: (chatId: string | null) => void
 }
 
 /**
- * Component that syncs the current thread's remoteId to a ref.
+ * Component that syncs the current thread's remoteId to a ref and updates the chat ID context.
  * Must be rendered inside AssistantRuntimeProvider to access the state.
  */
 const ThreadIdSync = ({
   remoteIdRef,
+  onChatIdChange,
 }: {
   remoteIdRef: React.RefObject<string | null>
+  onChatIdChange: (chatId: string | null) => void
 }) => {
   const remoteId = useAssistantState(
     ({ threadListItem }) => threadListItem.remoteId ?? null
   )
   useEffect(() => {
     remoteIdRef.current = remoteId
-  }, [remoteId, remoteIdRef])
+    onChatIdChange(remoteId)
+  }, [remoteId, remoteIdRef, onChatIdChange])
   return null
 }
 
@@ -537,6 +566,8 @@ const ElementsProviderWithHistory = ({
   localIdToUuidMap,
   currentRemoteIdRef,
   executableTools,
+  currentChatId,
+  setCurrentChatId,
 }: ElementsProviderWithHistoryProps) => {
   const threadListAdapter = useGramThreadListAdapter({
     apiUrl,
@@ -582,23 +613,28 @@ const ElementsProviderWithHistory = ({
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
-      <ThreadIdSync remoteIdRef={currentRemoteIdRef} />
+      <ThreadIdSync
+        remoteIdRef={currentRemoteIdRef}
+        onChatIdChange={setCurrentChatId}
+      />
       <HistoryProvider>
-        <ElementsContext.Provider value={contextValue}>
-          <ToolExecutionProvider tools={executableTools}>
-            <div
-              className={cn(
-                ROOT_SELECTOR,
-                (contextValue?.config.variant === 'standalone' ||
-                  contextValue?.config.variant === 'sidecar') &&
-                  'h-full'
-              )}
-            >
-              {children}
-            </div>
-            <FrontendTools tools={frontendTools} />
-          </ToolExecutionProvider>
-        </ElementsContext.Provider>
+        <ChatIdContext.Provider value={{ chatId: currentChatId }}>
+          <ElementsContext.Provider value={contextValue}>
+            <ToolExecutionProvider tools={executableTools}>
+              <div
+                className={cn(
+                  ROOT_SELECTOR,
+                  (contextValue?.config.variant === 'standalone' ||
+                    contextValue?.config.variant === 'sidecar') &&
+                    'h-full'
+                )}
+              >
+                {children}
+              </div>
+              <FrontendTools tools={frontendTools} />
+            </ToolExecutionProvider>
+          </ElementsContext.Provider>
+        </ChatIdContext.Provider>
       </HistoryProvider>
     </AssistantRuntimeProvider>
   )
@@ -613,6 +649,7 @@ interface ElementsProviderWithoutHistoryProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   frontendTools: Record<string, AssistantTool | FrontendTool<any, any>>
   executableTools: ExecutableToolSet
+  currentChatId: string | null
 }
 
 const ElementsProviderWithoutHistory = ({
@@ -622,6 +659,7 @@ const ElementsProviderWithoutHistory = ({
   runtimeRef,
   frontendTools,
   executableTools,
+  currentChatId,
 }: ElementsProviderWithoutHistoryProps) => {
   const runtime = useChatRuntime({ transport })
 
@@ -632,21 +670,23 @@ const ElementsProviderWithoutHistory = ({
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
-      <ElementsContext.Provider value={contextValue}>
-        <ToolExecutionProvider tools={executableTools}>
-          <div
-            className={cn(
-              ROOT_SELECTOR,
-              (contextValue?.config.variant === 'standalone' ||
-                contextValue?.config.variant === 'sidecar') &&
-                'h-full'
-            )}
-          >
-            {children}
-          </div>
-          <FrontendTools tools={frontendTools} />
-        </ToolExecutionProvider>
-      </ElementsContext.Provider>
+      <ChatIdContext.Provider value={{ chatId: currentChatId }}>
+        <ElementsContext.Provider value={contextValue}>
+          <ToolExecutionProvider tools={executableTools}>
+            <div
+              className={cn(
+                ROOT_SELECTOR,
+                (contextValue?.config.variant === 'standalone' ||
+                  contextValue?.config.variant === 'sidecar') &&
+                  'h-full'
+              )}
+            >
+              {children}
+            </div>
+            <FrontendTools tools={frontendTools} />
+          </ToolExecutionProvider>
+        </ElementsContext.Provider>
+      </ChatIdContext.Provider>
     </AssistantRuntimeProvider>
   )
 }

package/src/contexts/contexts.ts

@@ -8,3 +8,5 @@ export const ElementsContext = createContext<ElementsContextType | undefined>(
 
 export const ToolApprovalContext =
   createContext<ToolApprovalContextType | null>(null)
+
+export { useChatId } from './ChatIdContext'

package/src/hooks/useAuth.ts

@@ -49,11 +49,10 @@ export const useAuth = ({
       : defaultGetSession
   }, [auth])
 
-  // The session request is only neccessary if we are not using an API key auth
+  // The session request is only neccessary if we are not using static session auth
   // configuration. If a custom session fetcher is provided, we use it,
   // otherwise we fallback to the default session fetcher
   const session = useSession({
-    // We want to check it's NOT API key auth, as the default auth scheme is session auth (if the user hasn't provided an explicit API config, we have a session auth config by default)
     getSession,
     projectSlug,
   })

package/src/index.ts

@@ -10,6 +10,7 @@ export { ElementsProvider } from './contexts/ElementsProvider'
 export { useElements as useGramElements } from './hooks/useElements'
 export { useElements } from './hooks/useElements'
 export { useThreadId } from './hooks/useThreadId'
+export { useChatId } from './contexts/ChatIdContext'
 
 // Core Components
 export { Chat } from '@/components/Chat'

package/src/types/index.ts

@@ -315,7 +315,7 @@ export interface ElementsConfig {
    * @example
    * const config: ElementsConfig = {
    *   thread: {
-   *     experimental_showFeedback: true,
+   *     showFeedback: true,
    *     followUpSuggestions: true,
    *   },
    * }
@@ -853,7 +853,7 @@ export interface SidecarConfig extends ExpandableConfig {
  * @example
  * const config: ElementsConfig = {
  *   thread: {
- *     experimental_showFeedback: true,
+ *     showFeedback: true,
  *     followUpSuggestions: true,
  *   },
  * }
@@ -862,9 +862,9 @@ export interface ThreadConfig {
   /**
    * Whether to show feedback buttons (like/dislike) after assistant messages.
    * When enabled, users can mark conversations as resolved or provide feedback.
-   * @default false
+   * @default true
    */
-  experimental_showFeedback?: boolean
+  showFeedback?: boolean
 
   /**
    * Whether to show AI-generated follow-up question suggestions after each assistant response.