@gram-ai/elements 1.27.3 → 1.27.5

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

@@ -1,81 +1,81 @@
-import { ToolCallMessagePartProps } from '@assistant-ui/react'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React, { useState, useCallback } from 'react'
-import z from 'zod'
-import { Chat } from '..'
-import { useToolExecution } from '../../../contexts/ToolExecutionContext'
-import { defineFrontendTool } from '../../../lib/tools'
+import { ToolCallMessagePartProps } from "@assistant-ui/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+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> = {
-  title: 'Chat/Tools',
+  title: "Chat/Tools",
   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>;
 
 const ProductCardComponent = ({ result }: ToolCallMessagePartProps) => {
-  const { executeTool, isToolAvailable } = useToolExecution()
-  const [isLoading, setIsLoading] = useState(false)
-  const [addedToCart, setAddedToCart] = useState(false)
+  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: '',
+    id: "",
+    name: "Loading...",
+    description: "",
     price: 0,
-    category: '',
+    category: "",
     rating: 0,
     reviewCount: 0,
-    imageUrl: '',
+    imageUrl: "",
     inStock: true,
-  }
+  };
 
   try {
     if (result) {
-      const parsed = typeof result === 'string' ? JSON.parse(result) : result
+      const parsed = typeof result === "string" ? JSON.parse(result) : result;
       if (parsed?.content?.[0]?.text) {
-        const content = JSON.parse(parsed.content[0].text)
-        product = { ...product, ...content }
+        const content = JSON.parse(parsed.content[0].text);
+        product = { ...product, ...content };
       } else if (parsed?.name) {
-        product = { ...product, ...parsed }
+        product = { ...product, ...parsed };
       }
     }
   } catch {
     // Fallback to default
   }
 
-  const canAddToCart = isToolAvailable('ecommerce_api_add_to_cart')
+  const canAddToCart = isToolAvailable("ecommerce_api_add_to_cart");
 
   const handleAddToCart = useCallback(async () => {
-    if (!product.id || !canAddToCart) return
+    if (!product.id || !canAddToCart) return;
 
-    setIsLoading(true)
+    setIsLoading(true);
     try {
       // HTTP tools from OpenAPI expect body content wrapped in a 'body' field
-      const toolResult = await executeTool('ecommerce_api_add_to_cart', {
+      const toolResult = await executeTool("ecommerce_api_add_to_cart", {
         body: {
           productId: product.id,
           quantity: 1,
         },
-      })
+      });
 
       if (toolResult.success) {
-        setAddedToCart(true)
+        setAddedToCart(true);
       } else {
-        console.error('[ProductCard] Tool failed:', toolResult.error)
+        console.error("[ProductCard] Tool failed:", toolResult.error);
       }
     } catch (err) {
-      console.error('[ProductCard] Exception:', err)
+      console.error("[ProductCard] Exception:", err);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [product.id, canAddToCart, executeTool])
+  }, [product.id, canAddToCart, executeTool]);
 
   return (
     <div className="my-4 w-80">
@@ -120,8 +120,8 @@ const ProductCardComponent = ({ result }: ToolCallMessagePartProps) => {
                   key={star}
                   className={
                     star <= Math.round(product.rating)
-                      ? 'text-yellow-400'
-                      : 'text-slate-300'
+                      ? "text-yellow-400"
+                      : "text-slate-300"
                   }
                 >
                   ★
@@ -145,36 +145,36 @@ const ProductCardComponent = ({ result }: ToolCallMessagePartProps) => {
               }
               className={`rounded-lg px-4 py-2 text-sm font-semibold text-white transition-colors ${
                 addedToCart
-                  ? 'bg-green-500'
+                  ? "bg-green-500"
                   : isLoading
-                    ? 'bg-indigo-400'
-                    : 'bg-indigo-600 hover:bg-indigo-700'
+                    ? "bg-indigo-400"
+                    : "bg-indigo-600 hover:bg-indigo-700"
               } disabled:cursor-not-allowed disabled:opacity-50`}
             >
               {addedToCart
-                ? '✓ Added'
+                ? "✓ Added"
                 : isLoading
-                  ? 'Adding...'
-                  : 'Add to Cart'}
+                  ? "Adding..."
+                  : "Add to Cart"}
             </button>
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export const CustomToolComponent: Story = () => <Chat />
+export const CustomToolComponent: Story = () => <Chat />;
 CustomToolComponent.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
         suggestions: [
           {
-            title: 'Get product details',
-            label: 'View a product',
-            prompt: 'List products and then show me details for the first one',
+            title: "Get product details",
+            label: "View a product",
+            prompt: "List products and then show me details for the first one",
           },
         ],
       },
@@ -185,7 +185,7 @@ CustomToolComponent.parameters = {
       },
     },
   },
-}
+};
 
 /**
  * Demonstrates the generativeUI plugin which renders `ui` code blocks
@@ -194,36 +194,36 @@ CustomToolComponent.parameters = {
  * The LLM outputs JSON in a ```ui code fence, and the plugin renders it
  * using the built-in component catalog (Card, Grid, Metric, Table, etc.)
  */
-export const GenerativeUI: Story = () => <Chat />
+export const GenerativeUI: Story = () => <Chat />;
 GenerativeUI.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
-        title: 'Data Explorer',
-        subtitle: 'Ask questions about your data',
+        title: "Data Explorer",
+        subtitle: "Ask questions about your data",
         suggestions: [
           {
-            title: 'Sales metrics',
-            label: 'This month',
+            title: "Sales metrics",
+            label: "This month",
             prompt:
-              'What are our sales numbers this month? Revenue is $125,000, conversion rate is 3.2%, and we have 1,420 orders.',
+              "What are our sales numbers this month? Revenue is $125,000, conversion rate is 3.2%, and we have 1,420 orders.",
           },
           {
-            title: 'Team members',
-            label: 'Directory',
+            title: "Team members",
+            label: "Directory",
             prompt:
-              'List our team members: Alice (alice@co.com, Admin, Active), Bob (bob@co.com, Editor, Active), Charlie (charlie@co.com, Viewer, Pending)',
+              "List our team members: Alice (alice@co.com, Admin, Active), Bob (bob@co.com, Editor, Active), Charlie (charlie@co.com, Viewer, Pending)",
           },
           {
-            title: 'Project status',
-            label: 'Sprint progress',
+            title: "Project status",
+            label: "Sprint progress",
             prompt:
-              'How is our current sprint going? We have 12 tasks total, 8 completed, 3 in progress, and 1 blocked. The team has 4 developers.',
+              "How is our current sprint going? We have 12 tasks total, 8 completed, 3 in progress, and 1 blocked. The team has 4 developers.",
           },
           {
-            title: 'Website analytics',
-            label: 'Last 7 days',
+            title: "Website analytics",
+            label: "Last 7 days",
             prompt:
               "Show me last week's website stats: 45,000 page views, 2.1% bounce rate, 3m 24s average session, top pages are /home, /pricing, /docs",
           },
@@ -231,46 +231,46 @@ GenerativeUI.parameters = {
       },
     },
   },
-}
+};
 
 // Frontend tools for the ActionButton demo
 const ApproveRequestTool = defineFrontendTool<{ id: number }, string>(
   {
-    description: 'Approve a pending request',
+    description: "Approve a pending request",
     parameters: z.object({
-      id: z.number().describe('The request ID to approve'),
+      id: z.number().describe("The request ID to approve"),
     }),
     execute: async ({ id }) => {
       // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 500))
-      return `Request #${id} has been approved successfully.`
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      return `Request #${id} has been approved successfully.`;
     },
   },
-  'approve_request'
-)
+  "approve_request",
+);
 
 const RejectRequestTool = defineFrontendTool<
   { id: number; reason?: string },
   string
 >(
   {
-    description: 'Reject a pending request',
+    description: "Reject a pending request",
     parameters: z.object({
-      id: z.number().describe('The request ID to reject'),
-      reason: z.string().optional().describe('Reason for rejection'),
+      id: z.number().describe("The request ID to reject"),
+      reason: z.string().optional().describe("Reason for rejection"),
     }),
     execute: async ({ id, reason }) => {
-      await new Promise((resolve) => setTimeout(resolve, 500))
-      return `Request #${id} has been rejected.${reason ? ` Reason: ${reason}` : ''}`
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      return `Request #${id} has been rejected.${reason ? ` Reason: ${reason}` : ""}`;
     },
   },
-  'reject_request'
-)
+  "reject_request",
+);
 
 const actionTools = {
   approve_request: ApproveRequestTool,
   reject_request: RejectRequestTool,
-}
+};
 
 /**
  * Demonstrates ActionButton in generative UI that triggers tool calls.
@@ -278,18 +278,18 @@ const actionTools = {
  * The LLM generates UI with ActionButton components that, when clicked,
  * directly execute the tool without an LLM roundtrip.
  */
-export const GenerativeUIWithActions: Story = () => <Chat />
+export const GenerativeUIWithActions: Story = () => <Chat />;
 GenerativeUIWithActions.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
-        title: 'Expense Approvals',
-        subtitle: 'Review and process pending requests',
+        title: "Expense Approvals",
+        subtitle: "Review and process pending requests",
         suggestions: [
           {
-            title: 'Pending expenses',
-            label: 'Needs review',
+            title: "Pending expenses",
+            label: "Needs review",
             prompt: `I need to review these pending expense requests:
 
 Request #1247: Sarah Chen submitted $450 for conference registration
@@ -305,4 +305,4 @@ I need to be able to approve or reject each one.`,
       },
     },
   },
-}
+};

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

@@ -1,19 +1,19 @@
-import { Chat } from '..'
-import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite'
-import { ThreadList } from '@/components/assistant-ui/thread-list'
-import { ROOT_SELECTOR } from '@/constants/tailwind'
+import { Chat } from "..";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react-vite";
+import { ThreadList } from "@/components/assistant-ui/thread-list";
+import { ROOT_SELECTOR } from "@/constants/tailwind";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Variants',
+  title: "Chat/Variants",
   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 Default: Story = () => (
   <div className="flex h-full w-full flex-col gap-4 p-10">
@@ -21,30 +21,30 @@ export const Default: Story = () => (
     <p>Click the button in the bottom right corner to open the chat.</p>
     <Chat />
   </div>
-)
+);
 
-export const Standalone: Story = () => <Chat />
+export const Standalone: Story = () => <Chat />;
 Standalone.parameters = {
-  elements: { config: { variant: 'standalone' } },
-}
+  elements: { config: { variant: "standalone" } },
+};
 Standalone.decorators = [
   (Story) => (
     <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
       <Story />
     </div>
   ),
-]
+];
 
 export const StandaloneWithHistory: StoryObj<typeof Chat> = {
-  name: 'Standalone with History',
+  name: "Standalone with History",
   args: {},
   render: () => (
-    <div className="bg-background flex h-10/12 max-h-[800px] w-1/2 flex-row gap-4 overflow-hidden rounded-lg border shadow-xl sm:w-3/4">
+    <div className="flex h-10/12 max-h-[800px] w-1/2 flex-row gap-4 overflow-hidden rounded-lg border bg-background shadow-xl sm:w-3/4">
       <ThreadList className="w-56 min-w-0 shrink border-r" />
       <Chat className="flex-3 grow" />
     </div>
   ),
-}
+};
 StandaloneWithHistory.decorators = [
   (Story) => (
     <div className={ROOT_SELECTOR}>
@@ -53,19 +53,19 @@ StandaloneWithHistory.decorators = [
       </div>
     </div>
   ),
-]
+];
 StandaloneWithHistory.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       history: { enabled: true, showThreadList: true },
       model: { showModelPicker: true },
       tools: {
-        toolsRequiringApproval: ['ecommerce_api_create_order'],
+        toolsRequiringApproval: ["ecommerce_api_create_order"],
       },
     },
   },
-}
+};
 
 export const Sidecar: Story = () => (
   <div className="mr-[400px] p-10">
@@ -73,10 +73,10 @@ export const Sidecar: Story = () => (
     <p>The sidebar is always visible on the right.</p>
     <Chat />
   </div>
-)
+);
 Sidecar.parameters = {
-  elements: { config: { variant: 'sidecar' } },
-}
+  elements: { config: { variant: "sidecar" } },
+};
 
 export const ModalWithHistory: Story = () => (
   <div className="flex h-full w-full flex-col gap-4 p-10">
@@ -87,17 +87,17 @@ export const ModalWithHistory: Story = () => (
     </p>
     <Chat />
   </div>
-)
+);
 ModalWithHistory.parameters = {
   elements: {
     config: {
-      variant: 'widget',
+      variant: "widget",
       modal: {
         defaultOpen: true,
         expandable: true,
         dimensions: {
-          default: { width: '700px', height: '600px', maxHeight: '100vh' },
-          expanded: { width: '90vw', height: '90vh' },
+          default: { width: "700px", height: "600px", maxHeight: "100vh" },
+          expanded: { width: "90vw", height: "90vh" },
         },
       },
       history: {
@@ -106,7 +106,7 @@ ModalWithHistory.parameters = {
       },
     },
   },
-}
+};
 
 export const SidecarWithHistory: Story = () => (
   <div className="mr-[600px] p-10">
@@ -114,15 +114,15 @@ export const SidecarWithHistory: Story = () => (
     <p>The sidecar includes a thread list sidebar for chat history.</p>
     <Chat />
   </div>
-)
+);
 SidecarWithHistory.parameters = {
   elements: {
     config: {
-      variant: 'sidecar',
+      variant: "sidecar",
       history: {
         enabled: true,
         showThreadList: true,
       },
     },
   },
-}
+};

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

@@ -1,34 +1,34 @@
-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/Welcome',
+  title: "Chat/Welcome",
   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 CustomMessage: Story = () => <Chat />
+export const CustomMessage: Story = () => <Chat />;
 CustomMessage.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
-        title: 'Hello there!',
+        title: "Hello there!",
         subtitle: "How can I serve your organization's needs today?",
         suggestions: [
           {
-            title: 'Write a SQL query',
-            label: 'to find top customers',
-            prompt: 'Write a SQL query to find top customers',
+            title: "Write a SQL query",
+            label: "to find top customers",
+            prompt: "Write a SQL query to find top customers",
           },
         ],
       },
     },
   },
-}
+};

package/src/components/ChatHistory.tsx

@@ -1,16 +1,16 @@
-'use client'
+"use client";
 
-import { ThreadList } from '@/components/assistant-ui/thread-list'
-import { ShadowRoot } from '@/components/ShadowRoot'
+import { ThreadList } from "@/components/assistant-ui/thread-list";
+import { ShadowRoot } from "@/components/ShadowRoot";
 
 interface ChatHistoryProps {
-  className?: string
+  className?: string;
 }
 
 export const ChatHistory = ({ className }: ChatHistoryProps) => {
   return (
-    <ShadowRoot hostStyle={{ height: 'inherit', width: 'inherit' }}>
+    <ShadowRoot hostStyle={{ height: "inherit", width: "inherit" }}>
       <ThreadList className={className} />
     </ShadowRoot>
-  )
-}
+  );
+};

package/src/components/FrontendTools/index.tsx

@@ -1,16 +1,16 @@
-import { AssistantTool } from '@assistant-ui/react'
-import type { FrontendTools } from '@/types'
+import { AssistantTool } from "@assistant-ui/react";
+import type { FrontendTools } from "@/types";
 
 export function FrontendTools({
   tools: frontendTools,
 }: {
-  tools: FrontendTools
+  tools: FrontendTools;
 }) {
   return (
     <>
       {Object.entries(frontendTools).map(([, tool]) =>
-        (tool as AssistantTool)({})
+        (tool as AssistantTool)({}),
       )}
     </>
-  )
+  );
 }