@gram-ai/elements 1.25.0 → 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/Replay.stories.tsx

@@ -141,6 +141,178 @@ const reasoningCassette: Cassette = {
   ],
 }
 
+/**
+ * Simulates what the converter produced BEFORE the dedup fix (AGE-1295).
+ *
+ * The server accumulates all tool calls into each assistant message, so when
+ * assistant-ui merges consecutive assistant chunks into a single displayed
+ * message, the parts look like:
+ *   chunk 1: text + tc_1
+ *   chunk 2: text + tc_1 + tc_2         ← tc_1 duplicated
+ *   chunk 3: text + tc_1 + tc_2 + tc_3  ← tc_1, tc_2 duplicated
+ *
+ * This causes every tool group to show "Executed 3 tools" instead of 1 each.
+ */
+const beforeFixCassette: Cassette = {
+  messages: [
+    {
+      role: 'user',
+      content: [
+        { type: 'text', text: 'Search for 3 deals in HubSpot for me.' },
+      ],
+    },
+    {
+      role: 'assistant',
+      content: [
+        // --- chunk 1: first attempt ---
+        {
+          type: 'text',
+          text: "I'll search for 3 deals in HubSpot for you.",
+        },
+        {
+          type: 'tool-call',
+          toolCallId: 'tc_deals_1',
+          toolName: 'hubspot_search_deals',
+          args: { query: 'deals', limit: 3 },
+          result: { error: 'Invalid filter groups structure' },
+        },
+        // --- chunk 2: second attempt (accumulates tc_1 + tc_2) ---
+        {
+          type: 'text',
+          text: 'Let me try a different approach to retrieve deals:',
+        },
+        {
+          type: 'tool-call',
+          toolCallId: 'tc_deals_1_dup',
+          toolName: 'hubspot_search_deals',
+          args: { query: 'deals', limit: 3 },
+          result: { error: 'Invalid filter groups structure' },
+        },
+        {
+          type: 'tool-call',
+          toolCallId: 'tc_deals_2',
+          toolName: 'hubspot_search_deals',
+          args: { query: 'deals', limit: 3, filterGroups: [] },
+          result: { error: 'Filter groups must not be empty' },
+        },
+        // --- chunk 3: third attempt (accumulates tc_1 + tc_2 + tc_3) ---
+        {
+          type: 'text',
+          text: 'Let me try with proper filter groups structure:',
+        },
+        {
+          type: 'tool-call',
+          toolCallId: 'tc_deals_1_dup2',
+          toolName: 'hubspot_search_deals',
+          args: { query: 'deals', limit: 3 },
+          result: { error: 'Invalid filter groups structure' },
+        },
+        {
+          type: 'tool-call',
+          toolCallId: 'tc_deals_2_dup',
+          toolName: 'hubspot_search_deals',
+          args: { query: 'deals', limit: 3, filterGroups: [] },
+          result: { error: 'Filter groups must not be empty' },
+        },
+        {
+          type: 'tool-call',
+          toolCallId: 'tc_deals_3',
+          toolName: 'hubspot_search_deals',
+          args: {
+            limit: 3,
+            filterGroups: [
+              {
+                filters: [
+                  { propertyName: 'dealname', operator: 'HAS_PROPERTY' },
+                ],
+              },
+            ],
+          },
+          result: {
+            deals: [
+              { id: '1', name: 'Acme Corp', amount: 50000 },
+              { id: '2', name: 'Globex Inc', amount: 75000 },
+              { id: '3', name: 'Initech LLC', amount: 30000 },
+            ],
+          },
+        },
+        {
+          type: 'text',
+          text: 'Here are the 3 deals I found:\n\n1. **Acme Corp** — $50,000\n2. **Globex Inc** — $75,000\n3. **Initech LLC** — $30,000',
+        },
+      ],
+    },
+  ],
+}
+
+const interleavedToolCallsCassette: Cassette = {
+  messages: [
+    {
+      role: 'user',
+      content: [
+        { type: 'text', text: 'Search for 3 deals in HubSpot for me.' },
+      ],
+    },
+    {
+      role: 'assistant',
+      content: [
+        {
+          type: 'text',
+          text: "I'll search for 3 deals in HubSpot for you.",
+        },
+        {
+          type: 'tool-call',
+          toolCallId: 'tc_deals_1',
+          toolName: 'hubspot_search_deals',
+          args: { query: 'deals', limit: 3 },
+          result: { error: 'Invalid filter groups structure' },
+        },
+        {
+          type: 'text',
+          text: 'Let me try a different approach to retrieve deals:',
+        },
+        {
+          type: 'tool-call',
+          toolCallId: 'tc_deals_2',
+          toolName: 'hubspot_search_deals',
+          args: { query: 'deals', limit: 3, filterGroups: [] },
+          result: { error: 'Filter groups must not be empty' },
+        },
+        {
+          type: 'text',
+          text: 'Let me try with proper filter groups structure:',
+        },
+        {
+          type: 'tool-call',
+          toolCallId: 'tc_deals_3',
+          toolName: 'hubspot_search_deals',
+          args: {
+            limit: 3,
+            filterGroups: [
+              {
+                filters: [
+                  { propertyName: 'dealname', operator: 'HAS_PROPERTY' },
+                ],
+              },
+            ],
+          },
+          result: {
+            deals: [
+              { id: '1', name: 'Acme Corp', amount: 50000 },
+              { id: '2', name: 'Globex Inc', amount: 75000 },
+              { id: '3', name: 'Initech LLC', amount: 30000 },
+            ],
+          },
+        },
+        {
+          type: 'text',
+          text: 'Here are the 3 deals I found:\n\n1. **Acme Corp** — $50,000\n2. **Globex Inc** — $75,000\n3. **Initech LLC** — $30,000',
+        },
+      ],
+    },
+  ],
+}
+
 const multiTurnCassette: Cassette = {
   messages: [
     {
@@ -240,6 +412,64 @@ ToolCalls.decorators = [
   ),
 ]
 
+/**
+ * BEFORE the fix (AGE-1295): simulates the duplicated tool calls that the
+ * converter used to produce. Each tool group shows an inflated count because
+ * the server's accumulated tool_calls were not deduplicated.
+ *
+ * Expected: groups show "Executed 2 tools" and "Executed 3 tools" instead
+ * of 1 tool each — this is the bug.
+ */
+export const BeforeFix_DuplicatedToolCalls: Story = () => (
+  <Replay
+    cassette={beforeFixCassette}
+    config={{
+      variant: 'standalone',
+      tools: { expandToolGroupsByDefault: false },
+    }}
+    typingSpeed={0}
+    userMessageDelay={0}
+    assistantStartDelay={0}
+  >
+    <Chat />
+  </Replay>
+)
+BeforeFix_DuplicatedToolCalls.decorators = [
+  (Story) => (
+    <div className="m-auto flex h-screen w-full max-w-3xl flex-col px-4">
+      <Story />
+    </div>
+  ),
+]
+
+/**
+ * AFTER the fix (AGE-1295): the converter now deduplicates tool calls, so
+ * each tool group correctly shows only its own tool call.
+ *
+ * Expected: each group shows exactly 1 tool call.
+ */
+export const AfterFix_DeduplicatedToolCalls: Story = () => (
+  <Replay
+    cassette={interleavedToolCallsCassette}
+    config={{
+      variant: 'standalone',
+      tools: { expandToolGroupsByDefault: false },
+    }}
+    typingSpeed={0}
+    userMessageDelay={0}
+    assistantStartDelay={0}
+  >
+    <Chat />
+  </Replay>
+)
+AfterFix_DeduplicatedToolCalls.decorators = [
+  (Story) => (
+    <div className="m-auto flex h-screen w-full max-w-3xl flex-col px-4">
+      <Story />
+    </div>
+  ),
+]
+
 /**
  * Replay with reasoning (chain-of-thought) content. The assistant's
  * internal reasoning is shown before the final response.

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'