@gram-ai/elements 1.25.1 → 1.26.0

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import { Chat } from '..'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Plugins/Generative UI',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+/**
+ * E-commerce store assistant with natural task-focused prompts.
+ */
+export const StoreAssistant: Story = () => <Chat />
+StoreAssistant.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Store Assistant',
+        subtitle: 'How can I help you today?',
+        suggestions: [
+          {
+            title: 'My Orders',
+            label: 'View recent orders',
+            prompt: 'Show me my current orders',
+          },
+          {
+            title: 'Browse Products',
+            label: "See what's available",
+            prompt: 'What products do you have?',
+          },
+          {
+            title: 'Find Deals',
+            label: 'Best prices',
+            prompt: 'What are the best deals right now?',
+          },
+        ],
+      },
+    },
+  },
+}
+
+/**
+ * Shopping assistant for product discovery.
+ */
+export const ShoppingAssistant: Story = () => <Chat />
+ShoppingAssistant.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Shopping Assistant',
+        subtitle: 'Find the perfect product',
+        suggestions: [
+          {
+            title: 'New Arrivals',
+            label: 'Latest products',
+            prompt: 'Show me the newest products',
+          },
+          {
+            title: 'Gift Ideas',
+            label: 'Under $50',
+            prompt: 'I need a gift under $50, what do you recommend?',
+          },
+          {
+            title: 'Compare Options',
+            label: 'Help me decide',
+            prompt: 'Can you compare your top 3 products for me?',
+          },
+        ],
+      },
+    },
+  },
+}
+
+/**
+ * Store management assistant.
+ */
+export const StoreManager: Story = () => <Chat />
+StoreManager.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Store Manager',
+        subtitle: 'Manage your store',
+        suggestions: [
+          {
+            title: 'Stock Check',
+            label: 'Inventory status',
+            prompt: 'Which products are running low on stock?',
+          },
+          {
+            title: 'Sales Summary',
+            label: 'How are we doing?',
+            prompt: 'How are sales looking this month?',
+          },
+          {
+            title: 'Top Sellers',
+            label: 'Best performers',
+            prompt: 'What are our best selling products?',
+          },
+        ],
+      },
+    },
+  },
+}

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

@@ -1,7 +1,7 @@
-import { Chat } from '..'
-import type { Meta, StoryFn } from '@storybook/react-vite'
 import { MessageFeedback } from '@/components/assistant-ui/message-feedback'
+import type { Meta, StoryFn } from '@storybook/react-vite'
 import { LazyMotion, domAnimation } from 'motion/react'
+import { Chat } from '..'
 
 const meta: Meta<typeof Chat> = {
   title: 'Chat/Message Feedback',
@@ -25,7 +25,7 @@ Default.parameters = {
     config: {
       variant: 'standalone',
       thread: {
-        experimental_showFeedback: true,
+        showFeedback: true,
       },
       welcome: {
         title: 'Message Feedback Demo',
@@ -59,7 +59,7 @@ Widget.parameters = {
       variant: 'widget',
       modal: { defaultOpen: true },
       thread: {
-        experimental_showFeedback: true,
+        showFeedback: true,
       },
       welcome: {
         title: 'Message Feedback Demo',
@@ -91,7 +91,7 @@ Sidecar.parameters = {
     config: {
       variant: 'sidecar',
       thread: {
-        experimental_showFeedback: true,
+        showFeedback: true,
       },
       welcome: {
         title: 'Message Feedback Demo',
@@ -122,7 +122,7 @@ WithFollowUpSuggestions.parameters = {
       systemPrompt:
         'You are a helpful customer support assistant. Keep ALL responses extremely brief - 1-2 sentences only. No lists, no elaboration.',
       thread: {
-        experimental_showFeedback: true,
+        showFeedback: true,
         followUpSuggestions: true,
       },
       welcome: {

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

@@ -24,13 +24,13 @@ SingleTool.parameters = {
         suggestions: [
           {
             title: 'Call a tool requiring approval',
-            label: 'Get a salutation',
-            prompt: 'Get a salutation',
+            label: 'Add to cart',
+            prompt: 'List products and add the first one to my cart',
           },
         ],
       },
       tools: {
-        toolsRequiringApproval: ['kitchen_sink_get_salutation'],
+        toolsRequiringApproval: ['ecommerce_api_add_to_cart'],
       },
     },
   },
@@ -45,14 +45,14 @@ SingleToolWithFunction.parameters = {
       variant: 'standalone',
       tools: {
         toolsRequiringApproval: ({ toolName }: { toolName: string }) =>
-          toolName.endsWith('salutation'),
+          toolName.includes('order') || toolName.includes('cart'),
       },
       welcome: {
         suggestions: [
           {
             title: 'Call a tool requiring approval',
-            label: 'Get a salutation',
-            prompt: 'Get a salutation',
+            label: 'Create an order',
+            prompt: 'List products and create an order for the first one',
           },
         ],
       },
@@ -70,16 +70,16 @@ MultipleGroupedTools.parameters = {
         suggestions: [
           {
             title: 'Call both tools requiring approval',
-            label: 'Call both tools requiring approval',
+            label: 'Add to cart and create order',
             prompt:
-              'Call both kitchen_sink_get_salutation and kitchen_sink_get_get_card_details',
+              'List products, add the first one to my cart, and then create an order',
           },
         ],
       },
       tools: {
         toolsRequiringApproval: [
-          'kitchen_sink_get_salutation',
-          'kitchen_sink_get_get_card_details',
+          'ecommerce_api_add_to_cart',
+          'ecommerce_api_create_order',
         ],
       },
     },

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

@@ -5,7 +5,7 @@ import type { Cassette } from '@/lib/cassette'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const meta: any = {
-  title: 'Replay',
+  title: 'Misc/Replay',
   component: Replay,
   parameters: {
     layout: 'fullscreen',

package/src/components/Replay.tsx

@@ -20,6 +20,7 @@
  */
 
 import { ROOT_SELECTOR } from '@/constants/tailwind'
+import { ChatIdContext } from '@/contexts/ChatIdContext'
 import { ElementsContext } from '@/contexts/contexts'
 import { ReplayContext } from '@/contexts/ReplayContext'
 import { ToolApprovalProvider } from '@/contexts/ToolApprovalContext'
@@ -110,24 +111,28 @@ export const Replay = ({
 
   const replayCtx = useMemo(() => ({ isReplay: true }), [])
 
+  const chatIdValue = useMemo(() => ({ chatId: 'replay' }), [])
+
   return (
     <QueryClientProvider client={replayQueryClient}>
       <AssistantRuntimeProvider runtime={runtime}>
         <ReplayContext.Provider value={replayCtx}>
           <ElementsContext.Provider value={contextValue}>
-            <ToolApprovalProvider>
-              <div
-                className={cn(
-                  ROOT_SELECTOR,
-                  (config.variant === 'standalone' ||
-                    config.variant === 'sidecar') &&
-                    'h-full min-h-0 flex-1'
-                )}
-              >
-                {children}
-              </div>
-              <ReplayController cassette={cassette} options={replayOptions} />
-            </ToolApprovalProvider>
+            <ChatIdContext.Provider value={chatIdValue}>
+              <ToolApprovalProvider>
+                <div
+                  className={cn(
+                    ROOT_SELECTOR,
+                    (config.variant === 'standalone' ||
+                      config.variant === 'sidecar') &&
+                      'h-full min-h-0 flex-1'
+                  )}
+                >
+                  {children}
+                </div>
+                <ReplayController cassette={cassette} options={replayOptions} />
+              </ToolApprovalProvider>
+            </ChatIdContext.Provider>
           </ElementsContext.Provider>
         </ReplayContext.Provider>
       </AssistantRuntimeProvider>

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'