@gram-ai/elements 1.25.2 → 1.26.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@gram-ai/elements",
   "description": "Gram Elements is a library of UI primitives for building chat-like experiences for MCP Servers.",
   "type": "module",
-  "version": "1.25.2",
+  "version": "1.26.0",
   "main": "dist/index.js",
   "exports": {
     ".": {
@@ -116,6 +116,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",
+    "radix-ui": "^1.4.3",
+    "recharts": "^2.15.4",
     "tailwind-merge": "^3.3.1",
     "tw-shimmer": "^0.4.0",
     "vega": "^6.2.0",
@@ -149,6 +151,7 @@
     "prettier-plugin-tailwindcss": "^0.7.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-is": "19.2.3",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.0.8",
     "tailwindcss": "^4.1.13",

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

@@ -0,0 +1,260 @@
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import { Chat } from '..'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Plugins/Charts',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+/**
+ * Bar chart demo - comparing categorical data using orders summary
+ */
+export const BarChart: Story = () => <Chat />
+BarChart.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Orders Analytics',
+        subtitle: 'Bar Chart Visualizations',
+        suggestions: [
+          {
+            title: 'Revenue by Category',
+            label: 'Bar chart',
+            prompt:
+              'Get the orders summary and show me a bar chart of revenue by product category',
+          },
+          {
+            title: 'Orders by Region',
+            label: 'Regional comparison',
+            prompt:
+              'Fetch the orders summary and create a horizontal bar chart comparing orders by region',
+          },
+        ],
+      },
+    },
+  },
+}
+
+/**
+ * Line chart demo - showing trends over time
+ */
+export const LineChart: Story = () => <Chat />
+LineChart.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Orders Analytics',
+        subtitle: 'Line Chart Visualizations',
+        suggestions: [
+          {
+            title: 'Daily Orders Trend',
+            label: 'Line chart',
+            prompt:
+              'Get the orders summary grouped by day and show me a line chart of daily order counts',
+          },
+          {
+            title: 'Revenue vs Orders',
+            label: 'Multiple series',
+            prompt:
+              'Fetch weekly orders data and create a line chart showing both revenue and order count trends',
+          },
+        ],
+      },
+    },
+  },
+}
+
+/**
+ * Area chart demo - showing volume over time
+ */
+export const AreaChart: Story = () => <Chat />
+AreaChart.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Orders Analytics',
+        subtitle: 'Area Chart Visualizations',
+        suggestions: [
+          {
+            title: 'Monthly Revenue',
+            label: 'Area chart',
+            prompt:
+              'Get the orders summary grouped by month and show me an area chart of revenue over time',
+          },
+          {
+            title: 'Order Growth',
+            label: 'Trend visualization',
+            prompt:
+              'Fetch monthly orders data and create an area chart showing order volume growth',
+          },
+        ],
+      },
+    },
+  },
+}
+
+/**
+ * Pie chart demo - showing proportions
+ */
+export const PieChart: Story = () => <Chat />
+PieChart.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Orders Analytics',
+        subtitle: 'Pie Chart Visualizations',
+        suggestions: [
+          {
+            title: 'Category Distribution',
+            label: 'Pie chart',
+            prompt:
+              'Get the orders summary and show me a pie chart of order distribution by category',
+          },
+          {
+            title: 'Order Status',
+            label: 'Status breakdown',
+            prompt:
+              'Fetch the orders summary and create a pie chart showing the breakdown of order statuses',
+          },
+        ],
+      },
+    },
+  },
+}
+
+/**
+ * Donut chart demo - proportions with center metric
+ */
+export const DonutChart: Story = () => <Chat />
+DonutChart.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Orders Analytics',
+        subtitle: 'Donut Chart Visualizations',
+        suggestions: [
+          {
+            title: 'Revenue Share',
+            label: 'Donut with total',
+            prompt:
+              'Get the orders summary and show a donut chart of revenue by category with the total revenue in the center',
+          },
+          {
+            title: 'Order Completion',
+            label: 'Status donut',
+            prompt:
+              'Fetch the orders summary and create a donut chart showing order status distribution with completion rate in the center',
+          },
+        ],
+      },
+    },
+  },
+}
+
+/**
+ * Scatter chart demo - showing correlation
+ */
+export const ScatterChart: Story = () => <Chat />
+ScatterChart.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Orders Analytics',
+        subtitle: 'Scatter Chart Visualizations',
+        suggestions: [
+          {
+            title: 'Orders vs Revenue',
+            label: 'Correlation',
+            prompt:
+              'Get the orders summary and create a scatter chart showing the relationship between order count and revenue by region',
+          },
+          {
+            title: 'Category Performance',
+            label: 'Orders vs AOV',
+            prompt:
+              'Fetch the orders summary and show a scatter plot of order count vs average order value for each category',
+          },
+        ],
+      },
+    },
+  },
+}
+
+/**
+ * Radar chart demo - multi-dimensional comparison
+ */
+export const RadarChart: Story = () => <Chat />
+RadarChart.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Orders Analytics',
+        subtitle: 'Radar Chart Visualizations',
+        suggestions: [
+          {
+            title: 'Regional Performance',
+            label: 'Radar chart',
+            prompt:
+              'Get the orders summary and create a radar chart comparing regions across orders, revenue, and average order value',
+          },
+          {
+            title: 'Category Analysis',
+            label: 'Multi-metric',
+            prompt:
+              'Fetch the orders summary and show a radar chart comparing categories by order volume, revenue share, and growth',
+          },
+        ],
+      },
+    },
+  },
+}
+
+/**
+ * All chart types overview
+ */
+export const AllCharts: Story = () => <Chat />
+AllCharts.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: 'Orders Dashboard',
+        subtitle: 'Explore order analytics with different chart types',
+        suggestions: [
+          {
+            title: 'Revenue Trend',
+            label: 'Line chart',
+            prompt:
+              'Get the monthly orders summary and show me a line chart of revenue trends',
+          },
+          {
+            title: 'Category Breakdown',
+            label: 'Bar chart',
+            prompt:
+              'Fetch the orders summary and create a bar chart of orders by category',
+          },
+          {
+            title: 'Status Distribution',
+            label: 'Pie chart',
+            prompt:
+              'Get the orders summary and show a pie chart of order status distribution',
+          },
+        ],
+      },
+    },
+  },
+}

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

@@ -83,14 +83,14 @@ LanguageModel.parameters = {
         subtitle: 'Using Google Gemini 3 Flash Preview',
         suggestions: [
           {
-            title: 'Generate a chart',
-            label: 'Generate a chart',
-            prompt: 'Generate a chart of these values: 1, 2, 3, 4, 5',
+            title: 'Browse Products',
+            label: "See what's available",
+            prompt: 'What products do you have?',
           },
           {
-            title: 'Call all tools',
-            label: 'Call all tools',
-            prompt: 'Call all tools',
+            title: 'Sales Chart',
+            label: 'Visualize data',
+            prompt: 'Show me a chart of product prices',
           },
         ],
       },

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/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>