@gram-ai/elements 1.25.1 → 1.25.2

package/src/components/Chat/stories/Tools.stories.tsx

@@ -1,8 +1,9 @@
 import { ToolCallMessagePartProps } from '@assistant-ui/react'
 import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
+import React, { useState, useCallback } from 'react'
 import z from 'zod'
 import { Chat } from '..'
+import { useToolExecution } from '../../../contexts/ToolExecutionContext'
 import { defineFrontendTool } from '../../../lib/tools'
 
 const meta: Meta<typeof Chat> = {
@@ -17,128 +18,145 @@ export default meta
 
 type Story = StoryFn<typeof Chat>
 
-const CardPinRevealComponent = ({
-  result,
-  argsText,
-}: ToolCallMessagePartProps) => {
-  const [isFlipped, setIsFlipped] = React.useState(false)
+const ProductCardComponent = ({ result }: ToolCallMessagePartProps) => {
+  const { executeTool, isToolAvailable } = useToolExecution()
+  const [isLoading, setIsLoading] = useState(false)
+  const [addedToCart, setAddedToCart] = useState(false)
+
+  // Parse the result to get product details
+  let product = {
+    id: '',
+    name: 'Loading...',
+    description: '',
+    price: 0,
+    category: '',
+    rating: 0,
+    reviewCount: 0,
+    imageUrl: '',
+    inStock: true,
+  }
 
-  // Parse the result to get the pin
-  let pin = '****'
   try {
     if (result) {
       const parsed = typeof result === 'string' ? JSON.parse(result) : result
       if (parsed?.content?.[0]?.text) {
         const content = JSON.parse(parsed.content[0].text)
-        pin = content.pin || '****'
-      } else if (parsed?.pin) {
-        pin = parsed.pin
+        product = { ...product, ...content }
+      } else if (parsed?.name) {
+        product = { ...product, ...parsed }
       }
     }
   } catch {
     // Fallback to default
   }
 
-  const args = JSON.parse(argsText || '{}')
-  const cardNumber = args?.queryParameters?.cardNumber || '4532 •••• •••• 1234'
-  const cardHolder = 'JOHN DOE'
-  const expiry = '12/25'
-  const cvv = '123'
+  const canAddToCart = isToolAvailable('ecommerce_api_add_to_cart')
 
-  if (!cardNumber) {
-    return null
-  }
+  const handleAddToCart = useCallback(async () => {
+    if (!product.id || !canAddToCart) return
 
-  return (
-    <div className="my-4 perspective-[1000px]">
-      <div
-        className={`relative h-48 w-80 cursor-pointer transition-transform duration-700 [transform-style:preserve-3d] ${
-          isFlipped ? 'transform-[rotateY(180deg)]' : ''
-        }`}
-        onClick={() => setIsFlipped(!isFlipped)}
-      >
-        {/* Front of card */}
-        <div className="absolute inset-0 backface-hidden">
-          <div className="relative h-full w-full overflow-hidden rounded-xl bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 p-6 text-white shadow-2xl">
-            {/* Card pattern overlay */}
-            <div className="absolute inset-0 opacity-10">
-              <div className="absolute -top-10 -right-10 h-40 w-40 rounded-full bg-white"></div>
-              <div className="absolute -bottom-10 -left-10 h-32 w-32 rounded-full bg-white"></div>
-            </div>
+    setIsLoading(true)
+    try {
+      // HTTP tools from OpenAPI expect body content wrapped in a 'body' field
+      const toolResult = await executeTool('ecommerce_api_add_to_cart', {
+        body: {
+          productId: product.id,
+          quantity: 1,
+        },
+      })
 
-            {/* Card content */}
-            <div className="relative z-10 flex h-full flex-col justify-between">
-              <div className="flex items-center justify-between">
-                <div className="text-2xl font-bold">VISA</div>
-                <div className="h-8 w-12 rounded bg-white/20"></div>
-              </div>
+      if (toolResult.success) {
+        setAddedToCart(true)
+      } else {
+        console.error('[ProductCard] Tool failed:', toolResult.error)
+      }
+    } catch (err) {
+      console.error('[ProductCard] Exception:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [product.id, canAddToCart, executeTool])
 
-              <div className="space-y-2">
-                <div className="font-mono text-2xl tracking-wider">
-                  {cardNumber}
-                </div>
-                <div className="flex items-center justify-between text-sm">
-                  <div>
-                    <div className="text-xs opacity-70">CARDHOLDER</div>
-                    <div className="font-semibold">{cardHolder}</div>
-                  </div>
-                  <div>
-                    <div className="text-xs opacity-70">EXPIRES</div>
-                    <div className="font-semibold">{expiry}</div>
-                  </div>
-                </div>
-              </div>
+  return (
+    <div className="my-4 w-80">
+      <div className="overflow-hidden rounded-xl bg-white shadow-lg dark:bg-slate-800">
+        {/* Product Image */}
+        <div className="relative h-48 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-900 dark:to-purple-900">
+          {product.imageUrl ? (
+            <img
+              src={product.imageUrl}
+              alt={product.name}
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center">
+              <span className="text-6xl">📦</span>
             </div>
-
-            {/* Click hint */}
-            <div className="absolute right-2 bottom-2 text-xs opacity-50">
-              Click to flip
+          )}
+          {!product.inStock && (
+            <div className="absolute top-2 right-2 rounded-full bg-red-500 px-2 py-1 text-xs font-semibold text-white">
+              Out of Stock
             </div>
-          </div>
+          )}
         </div>
 
-        {/* Back of card */}
-        <div className="absolute inset-0 transform-[rotateY(180deg)] backface-hidden">
-          <div className="relative h-full w-full overflow-hidden rounded-xl bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 p-6 text-white shadow-2xl">
-            {/* Magnetic strip */}
-            <div className="absolute top-8 right-0 left-0 h-12 bg-black"></div>
-
-            {/* Card content */}
-            <div className="relative z-10 flex h-full flex-col justify-between">
-              <div className="mt-16 space-y-4">
-                <div className="flex items-center gap-2">
-                  <div className="h-8 flex-1 rounded bg-white/10 px-3 py-2 text-right font-mono text-sm">
-                    {cvv}
-                  </div>
-                  <div className="text-xs opacity-70">CVV</div>
-                </div>
-
-                {/* PIN Display */}
-                <div className="mt-6 space-y-2">
-                  <div className="text-xs opacity-70">PIN</div>
-                  <div className="flex items-center gap-3">
-                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-gradient-to-br from-yellow-400 to-orange-500 shadow-lg">
-                      <span className="text-2xl font-bold text-white">
-                        {pin}
-                      </span>
-                    </div>
-                    <div className="text-xs opacity-60">
-                      Keep this PIN secure
-                    </div>
-                  </div>
-                </div>
-              </div>
+        {/* Product Details */}
+        <div className="p-4">
+          <div className="mb-1 text-xs font-medium tracking-wide text-indigo-500 uppercase dark:text-indigo-400">
+            {product.category}
+          </div>
+          <h3 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
+            {product.name}
+          </h3>
+          <p className="mb-3 line-clamp-2 text-sm text-slate-600 dark:text-slate-300">
+            {product.description}
+          </p>
 
-              <div className="flex items-center justify-between text-xs opacity-50">
-                <div>VISA</div>
-                <div>{cardNumber}</div>
-              </div>
+          {/* Rating */}
+          <div className="mb-3 flex items-center gap-1">
+            <div className="flex">
+              {[1, 2, 3, 4, 5].map((star) => (
+                <span
+                  key={star}
+                  className={
+                    star <= Math.round(product.rating)
+                      ? 'text-yellow-400'
+                      : 'text-slate-300'
+                  }
+                >
+                  ★
+                </span>
+              ))}
             </div>
+            <span className="text-sm text-slate-500">
+              ({product.reviewCount} reviews)
+            </span>
+          </div>
 
-            {/* Click hint */}
-            <div className="absolute bottom-2 left-2 text-xs opacity-50">
-              Click to flip back
-            </div>
+          {/* Price and Add to Cart */}
+          <div className="flex items-center justify-between">
+            <span className="text-2xl font-bold text-slate-900 dark:text-white">
+              ${product.price?.toFixed(2)}
+            </span>
+            <button
+              onClick={handleAddToCart}
+              disabled={
+                isLoading || addedToCart || !canAddToCart || !product.inStock
+              }
+              className={`rounded-lg px-4 py-2 text-sm font-semibold text-white transition-colors ${
+                addedToCart
+                  ? 'bg-green-500'
+                  : isLoading
+                    ? 'bg-indigo-400'
+                    : 'bg-indigo-600 hover:bg-indigo-700'
+              } disabled:cursor-not-allowed disabled:opacity-50`}
+            >
+              {addedToCart
+                ? '✓ Added'
+                : isLoading
+                  ? 'Adding...'
+                  : 'Add to Cart'}
+            </button>
           </div>
         </div>
       </div>
@@ -154,15 +172,15 @@ CustomToolComponent.parameters = {
       welcome: {
         suggestions: [
           {
-            title: 'Get card details',
-            label: 'for your card',
-            prompt: 'Get card details for your card number 4532 •••• •••• 1234',
+            title: 'Get product details',
+            label: 'View a product',
+            prompt: 'List products and then show me details for the first one',
           },
         ],
       },
       tools: {
         components: {
-          kitchen_sink_get_get_card_details: CardPinRevealComponent,
+          ecommerce_api_get_product: ProductCardComponent,
         },
       },
     },

package/src/components/Chat/stories/Variants.stories.tsx

@@ -61,7 +61,7 @@ StandaloneWithHistory.parameters = {
       history: { enabled: true, showThreadList: true },
       model: { showModelPicker: true },
       tools: {
-        toolsRequiringApproval: ['kitchen_sink_get_salutation'],
+        toolsRequiringApproval: ['ecommerce_api_create_order'],
       },
     },
   },

package/src/components/ShadowRoot.tsx

@@ -69,7 +69,11 @@ export const ShadowRoot = ({
   }, [shadowRoot, elementsStyles])
 
   return (
-    <div ref={hostRef} className={hostClassName} style={hostStyle}>
+    <div
+      ref={hostRef}
+      className={hostClassName}
+      style={{ isolation: 'isolate', ...hostStyle }}
+    >
       {shadowRoot
         ? createPortal(
             <div

package/src/components/assistant-ui/message-feedback.tsx

@@ -1,16 +1,15 @@
-import { X, Heart } from 'lucide-react'
-import * as m from 'motion/react-m'
-import { useState, type FC } from 'react'
-import { AnimatePresence } from 'motion/react'
-
-import { cn } from '@/lib/utils'
-import { EASE_OUT_QUINT } from '@/lib/easing'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { EASE_OUT_QUINT } from '@/lib/easing'
+import { cn } from '@/lib/utils'
+import { Heart, X } from 'lucide-react'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
+import { useState, type FC } from 'react'
 
 export type FeedbackType = 'dislike' | 'like'
 

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
+}