@gram-ai/elements 1.27.4 → 1.27.6

package/src/components/Chat/index.tsx

@@ -1,36 +1,36 @@
-'use client'
+"use client";
 
-import { useElements } from '@/hooks/useElements'
-import { AssistantModal } from '../assistant-ui/assistant-modal'
-import { AssistantSidecar } from '../assistant-ui/assistant-sidecar'
-import { ErrorBoundary } from '../assistant-ui/error-boundary'
-import { Thread } from '../assistant-ui/thread'
-import { ShadowRoot } from '@/components/ShadowRoot'
+import { useElements } from "@/hooks/useElements";
+import { AssistantModal } from "../assistant-ui/assistant-modal";
+import { AssistantSidecar } from "../assistant-ui/assistant-sidecar";
+import { ErrorBoundary } from "../assistant-ui/error-boundary";
+import { Thread } from "../assistant-ui/thread";
+import { ShadowRoot } from "@/components/ShadowRoot";
 
 interface ChatProps {
-  className?: string
+  className?: string;
 }
 
 export const Chat = ({ className }: ChatProps) => {
-  const { config } = useElements()
+  const { config } = useElements();
 
   switch (config.variant) {
-    case 'standalone':
+    case "standalone":
       // Standalone variant wraps Thread with ErrorBoundary at this level
       return (
         <ErrorBoundary>
-          <ShadowRoot hostStyle={{ height: '100%', width: '100%' }}>
+          <ShadowRoot hostStyle={{ height: "100%", width: "100%" }}>
             <Thread />
           </ShadowRoot>
         </ErrorBoundary>
-      )
-    case 'sidecar':
+      );
+    case "sidecar":
       // Sidecar has its own internal ErrorBoundary around Thread
       return (
-        <ShadowRoot hostStyle={{ height: 'inherit', width: 'inherit' }}>
+        <ShadowRoot hostStyle={{ height: "inherit", width: "inherit" }}>
           <AssistantSidecar />
         </ShadowRoot>
-      )
+      );
 
     // If no variant is provided then fallback to the modal
     // Modal has its own internal ErrorBoundary around Thread
@@ -39,6 +39,6 @@ export const Chat = ({ className }: ChatProps) => {
         <ShadowRoot>
           <AssistantModal className={className} />
         </ShadowRoot>
-      )
+      );
   }
-}
+};

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

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

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

@@ -1,35 +1,35 @@
-import React from 'react'
-import { Chat } from '..'
-import type { Meta, StoryFn } from '@storybook/react-vite'
+import React from "react";
+import { Chat } from "..";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Composer',
+  title: "Chat/Composer",
   component: Chat,
   parameters: {
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
-} satisfies Meta<typeof Chat>
+} satisfies Meta<typeof Chat>;
 
-export default meta
+export default meta;
 
-type Story = StoryFn<typeof Chat>
+type Story = StoryFn<typeof Chat>;
 
-export const CustomPlaceholder: Story = () => <Chat />
+export const CustomPlaceholder: Story = () => <Chat />;
 CustomPlaceholder.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      composer: { placeholder: 'What would you like to know?' },
+      variant: "standalone",
+      composer: { placeholder: "What would you like to know?" },
     },
   },
-}
+};
 
-export const AttachmentsDisabled: Story = () => <Chat />
+export const AttachmentsDisabled: Story = () => <Chat />;
 AttachmentsDisabled.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       composer: { attachments: false },
     },
   },
-}
+};

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

@@ -1,33 +1,33 @@
-import { GetSessionFn } from '@/types'
-import { google } from '@ai-sdk/google'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { Chat } from '..'
+import { GetSessionFn } from "@/types";
+import { google } from "@ai-sdk/google";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { Chat } from "..";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Connection Configuration',
+  title: "Chat/Connection Configuration",
   component: Chat,
   parameters: {
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
-} satisfies Meta<typeof Chat>
+} satisfies Meta<typeof Chat>;
 
-export default meta
+export default meta;
 
-type Story = StoryFn<typeof Chat>
+type Story = StoryFn<typeof Chat>;
 
-export const SystemPrompt: Story = () => <Chat />
-SystemPrompt.storyName = 'Custom System Prompt'
+export const SystemPrompt: Story = () => <Chat />;
+SystemPrompt.storyName = "Custom System Prompt";
 SystemPrompt.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      systemPrompt: 'Please speak like a pirate',
+      variant: "standalone",
+      systemPrompt: "Please speak like a pirate",
     },
   },
-}
+};
 
-export const WithImplicitSessionAuth: Story = () => <Chat />
-WithImplicitSessionAuth.storyName = 'With Implicit Session Auth'
+export const WithImplicitSessionAuth: Story = () => <Chat />;
+WithImplicitSessionAuth.storyName = "With Implicit Session Auth";
 WithImplicitSessionAuth.parameters = {
   elements: {
     config: {
@@ -35,64 +35,64 @@ WithImplicitSessionAuth.parameters = {
       api: undefined,
     },
   },
-}
+};
 
 const session: GetSessionFn = async () => {
-  const response = await fetch('/chat/session', {
-    method: 'POST',
+  const response = await fetch("/chat/session", {
+    method: "POST",
     headers: {
-      'Gram-Project':
-        import.meta.env.VITE_GRAM_ELEMENTS_STORYBOOK_PROJECT_SLUG ?? '',
+      "Gram-Project":
+        import.meta.env.VITE_GRAM_ELEMENTS_STORYBOOK_PROJECT_SLUG ?? "",
     },
-  })
-  const data = await response.json()
-  return data.client_token
-}
+  });
+  const data = await response.json();
+  return data.client_token;
+};
 
-export const WithExplicitSessionAuth: Story = () => <Chat />
-WithExplicitSessionAuth.storyName = 'With Explicit Session Auth'
+export const WithExplicitSessionAuth: Story = () => <Chat />;
+WithExplicitSessionAuth.storyName = "With Explicit Session Auth";
 WithExplicitSessionAuth.parameters = {
   elements: {
     config: {
       api: { session },
     },
   },
-}
+};
 
-export const WithDangerousApiKey: Story = () => <Chat />
-WithDangerousApiKey.storyName = 'With Dangerous API Key Warning'
+export const WithDangerousApiKey: Story = () => <Chat />;
+WithDangerousApiKey.storyName = "With Dangerous API Key Warning";
 WithDangerousApiKey.parameters = {
   elements: {
     config: {
-      api: { dangerousApiKey: 'test' },
+      api: { dangerousApiKey: "test" },
     },
   },
-}
+};
 
 // NOTE: add Gemini API key to .env.local with the key VITE_GOOGLE_GENERATIVE_AI_API_KEY
-export const LanguageModel: Story = () => <Chat />
-LanguageModel.storyName = 'Custom Language Model (Gemini)'
+export const LanguageModel: Story = () => <Chat />;
+LanguageModel.storyName = "Custom Language Model (Gemini)";
 LanguageModel.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
-        title: 'Using Google Gemini',
-        subtitle: 'Using Google Gemini 3 Flash Preview',
+        title: "Using Google Gemini",
+        subtitle: "Using Google Gemini 3 Flash Preview",
         suggestions: [
           {
-            title: 'Browse Products',
+            title: "Browse Products",
             label: "See what's available",
-            prompt: 'What products do you have?',
+            prompt: "What products do you have?",
           },
           {
-            title: 'Sales Chart',
-            label: 'Visualize data',
-            prompt: 'Show me a chart of product prices',
+            title: "Sales Chart",
+            label: "Visualize data",
+            prompt: "Show me a chart of product prices",
           },
         ],
       },
-      languageModel: google('gemini-3-flash-preview'),
+      languageModel: google("gemini-3-flash-preview"),
     },
   },
-}
+};