@gram-ai/elements 1.25.0 → 1.25.2

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

@@ -23,10 +23,16 @@ import {
   useAssistantState,
 } from '@assistant-ui/react'
 
-import { LazyMotion, MotionConfig, domAnimation } from 'motion/react'
+import {
+  AnimatePresence,
+  LazyMotion,
+  MotionConfig,
+  domAnimation,
+} from 'motion/react'
 import * as m from 'motion/react-m'
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -34,7 +40,6 @@ import {
   useState,
   type FC,
 } from 'react'
-import { AnimatePresence } from 'motion/react'
 
 import {
   ComposerAddAttachment,
@@ -43,25 +48,27 @@ import {
 } from '@/components/assistant-ui/attachment'
 import { FollowOnSuggestions } from '@/components/assistant-ui/follow-on-suggestions'
 import { MarkdownText } from '@/components/assistant-ui/markdown-text'
+import { MentionedToolsBadges } from '@/components/assistant-ui/mentioned-tools-badges'
 import { MessageFeedback } from '@/components/assistant-ui/message-feedback'
 import { Reasoning, ReasoningGroup } from '@/components/assistant-ui/reasoning'
 import { ToolFallback } from '@/components/assistant-ui/tool-fallback'
 import { ToolMentionAutocomplete } from '@/components/assistant-ui/tool-mention-autocomplete'
-import { MentionedToolsBadges } from '@/components/assistant-ui/mentioned-tools-badges'
 import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button'
 import { Button } from '@/components/ui/button'
-import { useToolMentions } from '@/hooks/useToolMentions'
-
+import { useChatId } from '@/contexts/ChatIdContext'
+import { useReplayContext } from '@/contexts/ReplayContext'
+import { useAuth } from '@/hooks/useAuth'
 import { useDensity } from '@/hooks/useDensity'
 import { useElements } from '@/hooks/useElements'
+import { isLocalThreadId } from '@/hooks/useGramThreadListAdapter'
 import { useRadius } from '@/hooks/useRadius'
+import { useRecordCassette } from '@/hooks/useRecordCassette'
 import { useThemeProps } from '@/hooks/useThemeProps'
+import { useToolMentions } from '@/hooks/useToolMentions'
+import { getApiUrl } from '@/lib/api'
 import { EASE_OUT_QUINT } from '@/lib/easing'
 import { MODELS } from '@/lib/models'
 import { cn } from '@/lib/utils'
-import { useRecordCassette } from '@/hooks/useRecordCassette'
-import { useReplayContext } from '@/contexts/ReplayContext'
-import { ConnectionStatusIndicatorSafe } from './connection-status-indicator'
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
 import {
   Tooltip,
@@ -69,8 +76,11 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '../ui/tooltip'
+import { ConnectionStatusIndicatorSafe } from './connection-status-indicator'
 import { ToolGroup } from './tool-group'
 
+type Feedback = 'success' | 'failure'
+
 // Context for chat resolution state
 const ChatResolutionContext = createContext<{
   isResolved: boolean
@@ -78,12 +88,14 @@ const ChatResolutionContext = createContext<{
   setResolved: () => void
   setUnresolved: () => void
   resetFeedbackHidden: () => void
+  submitFeedback: (feedback: Feedback) => Promise<void>
 }>({
   isResolved: false,
   feedbackHidden: false,
   setResolved: () => {},
   setUnresolved: () => {},
   resetFeedbackHidden: () => {},
+  submitFeedback: async () => {},
 })
 
 const useChatResolution = () => useContext(ChatResolutionContext)
@@ -113,9 +125,16 @@ export const Thread: FC<ThreadProps> = ({ className }) => {
   const { config } = useElements()
   const components = config.components ?? {}
   const showStaticSessionWarning = config.api && 'sessionToken' in config.api
-  const showFeedback = config.thread?.experimental_showFeedback ?? false
+  const showFeedback = config.thread?.showFeedback ?? false
   const [isResolved, setIsResolved] = useState(false)
   const [feedbackHidden, setFeedbackHidden] = useState(false)
+  const chatId = useChatId()
+
+  const apiUrl = getApiUrl(config)
+  const auth = useAuth({
+    auth: config.api,
+    projectSlug: config.projectSlug,
+  })
 
   const setResolved = () => setIsResolved(true)
   const setUnresolved = () => {
@@ -124,6 +143,38 @@ export const Thread: FC<ThreadProps> = ({ className }) => {
   }
   const resetFeedbackHidden = () => setFeedbackHidden(false)
 
+  // Submit feedback to the API
+  const submitFeedback = useCallback(
+    async (feedback: Feedback) => {
+      if (!chatId) return
+      if (isLocalThreadId(chatId)) {
+        console.error("Local thread ID, can't submit feedback")
+        return
+      }
+
+      try {
+        const response = await fetch(`${apiUrl}/rpc/chat.submitFeedback`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...auth.headers,
+          },
+          body: JSON.stringify({
+            id: chatId,
+            feedback,
+          }),
+        })
+
+        if (!response.ok) {
+          console.error('Failed to submit feedback:', response.statusText)
+        }
+      } catch (error) {
+        console.error('Failed to submit feedback:', error)
+      }
+    },
+    [chatId, apiUrl, auth.headers]
+  )
+
   return (
     <ChatResolutionContext.Provider
       value={{
@@ -132,6 +183,7 @@ export const Thread: FC<ThreadProps> = ({ className }) => {
         setResolved,
         setUnresolved,
         resetFeedbackHidden,
+        submitFeedback,
       }}
     >
       <LazyMotion features={domAnimation}>
@@ -448,7 +500,16 @@ const FeedbackHiddenResetter: FC = () => {
 }
 
 const ComposerFeedback: FC = () => {
-  const { isResolved, feedbackHidden, setResolved } = useChatResolution()
+  const { isResolved, feedbackHidden, setResolved, submitFeedback } =
+    useChatResolution()
+
+  const handleFeedback = useCallback(
+    async (type: 'like' | 'dislike') => {
+      const feedback = type === 'like' ? 'success' : 'failure'
+      await submitFeedback(feedback)
+    },
+    [submitFeedback]
+  )
 
   return (
     <ThreadPrimitive.If empty={false}>
@@ -466,7 +527,11 @@ const ComposerFeedback: FC = () => {
               transition={{ duration: 0.2, ease: EASE_OUT_QUINT }}
               className="mb-3"
             >
-              <MessageFeedback className="mx-auto" onResolved={setResolved} />
+              <MessageFeedback
+                className="mx-auto"
+                onResolved={setResolved}
+                onFeedback={handleFeedback}
+              />
             </m.div>
           )}
         </AnimatePresence>

package/src/contexts/ChatIdContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react'
+
+export interface ChatIdContextValue {
+  chatId: string | null
+}
+
+export const ChatIdContext = createContext<ChatIdContextValue | null>(null)
+
+/**
+ * Hook to access the current chat ID from the Elements context.
+ * Works in both history-enabled and history-disabled modes.
+ *
+ * @returns The current chat ID, or null if not yet initialized
+ */
+export const useChatId = () => {
+  const context = useContext(ChatIdContext)
+  if (!context) {
+    throw new Error('useChatId must be used within ElementsProvider')
+  }
+  return context.chatId
+}

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'