@gram-ai/elements 1.27.3 → 1.27.5

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

@@ -1,39 +1,39 @@
-import { Chat, ComponentOverrides } from '@/index'
-import { useAssistantState } from '@assistant-ui/react'
-import { Meta, StoryFn } from '@storybook/react-vite'
+import { Chat, ComponentOverrides } from "@/index";
+import { useAssistantState } from "@assistant-ui/react";
+import { Meta, StoryFn } from "@storybook/react-vite";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Customization',
+  title: "Chat/Customization",
   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 customComponents: ComponentOverrides = {
   Text: () => {
-    const message = useAssistantState(({ message }) => message)
+    const message = useAssistantState(({ message }) => message);
     return (
       <div className="text-red-500">
         {message.parts
-          .map((part) => (part.type === 'text' ? part.text : ''))
-          .join('')}
+          .map((part) => (part.type === "text" ? part.text : ""))
+          .join("")}
       </div>
-    )
+    );
   },
-}
+};
 
-export const ComponentOverridesStory: Story = () => <Chat />
-ComponentOverridesStory.storyName = 'Component Overrides'
+export const ComponentOverridesStory: Story = () => <Chat />;
+ComponentOverridesStory.storyName = "Component Overrides";
 ComponentOverridesStory.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       components: customComponents,
     },
   },
-}
+};

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

@@ -1,45 +1,45 @@
-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/Density',
+  title: "Chat/Density",
   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 Compact: Story = () => <Chat />
+export const Compact: Story = () => <Chat />;
 Compact.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      theme: { density: 'compact' },
+      variant: "standalone",
+      theme: { density: "compact" },
     },
   },
-}
+};
 
-export const Normal: Story = () => <Chat />
+export const Normal: Story = () => <Chat />;
 Normal.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      theme: { density: 'normal' },
+      variant: "standalone",
+      theme: { density: "normal" },
     },
   },
-}
+};
 
-export const Spacious: Story = () => <Chat />
+export const Spacious: Story = () => <Chat />;
 Spacious.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      theme: { density: 'spacious' },
+      variant: "standalone",
+      theme: { density: "spacious" },
     },
   },
-}
+};

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import {
   createContext,
   useContext,
@@ -6,78 +6,78 @@ import {
   useState,
   type ComponentType,
   type FC,
-} from 'react'
-import { Chat } from '..'
-import { Button } from '../../ui/button'
+} from "react";
+import { Chat } from "..";
+import { Button } from "../../ui/button";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/ErrorBoundary',
+  title: "Chat/ErrorBoundary",
   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>;
 
 // Context to trigger errors from outside the component tree
 const ErrorTriggerContext = createContext<{
-  shouldThrow: boolean
-  resetError: () => void
+  shouldThrow: boolean;
+  resetError: () => void;
 }>({
   shouldThrow: false,
   resetError: () => {},
-})
+});
 
 // Component that throws when context says so - used to override ThreadWelcome
 const ThrowingThreadWelcome: FC = () => {
-  const { shouldThrow, resetError } = useContext(ErrorTriggerContext)
+  const { shouldThrow, resetError } = useContext(ErrorTriggerContext);
 
   // Reset the error state when this component unmounts (happens when "Try again" is clicked)
   useEffect(() => {
     return () => {
-      resetError()
-    }
-  }, [resetError])
+      resetError();
+    };
+  }, [resetError]);
 
   if (shouldThrow) {
-    throw new Error('Simulated error: Failed to load chat interface')
+    throw new Error("Simulated error: Failed to load chat interface");
   }
 
   // Render a simple welcome that matches the default styling
   return (
     <div className="my-auto flex w-full grow flex-col items-center justify-center gap-4 p-6">
-      <h2 className="text-foreground text-2xl font-semibold">Hello there!</h2>
+      <h2 className="text-2xl font-semibold text-foreground">Hello there!</h2>
       <p className="text-muted-foreground">How can I help you today?</p>
-      <p className="text-muted-foreground/60 mt-4 text-sm">
+      <p className="mt-4 text-sm text-muted-foreground/60">
         Click &quot;Trigger Error&quot; above to see the error boundary
       </p>
     </div>
-  )
-}
+  );
+};
 
 // Wrapper to provide the error trigger context
 const ErrorTriggerProvider: FC<{
-  children: React.ReactNode
-  shouldThrow: boolean
-  onReset: () => void
+  children: React.ReactNode;
+  shouldThrow: boolean;
+  onReset: () => void;
 }> = ({ children, shouldThrow, onReset }) => {
   return (
     <ErrorTriggerContext.Provider value={{ shouldThrow, resetError: onReset }}>
       {children}
     </ErrorTriggerContext.Provider>
-  )
-}
+  );
+};
 
 // Control bar component for triggering errors
 const ErrorControls: FC<{
-  onTriggerError: () => void
-  hasError: boolean
+  onTriggerError: () => void;
+  hasError: boolean;
 }> = ({ onTriggerError, hasError }) => (
-  <div className="bg-muted/50 border-border flex items-center gap-3 border-b px-4 py-2">
-    <span className="text-muted-foreground text-sm font-medium">
+  <div className="flex items-center gap-3 border-b border-border bg-muted/50 px-4 py-2">
+    <span className="text-sm font-medium text-muted-foreground">
       Error Boundary Demo:
     </span>
     <Button
@@ -89,11 +89,11 @@ const ErrorControls: FC<{
       Trigger Error
     </Button>
   </div>
-)
+);
 
 // Modal variant story
 export const Modal: Story = () => {
-  const [shouldThrow, setShouldThrow] = useState(false)
+  const [shouldThrow, setShouldThrow] = useState(false);
 
   return (
     <ErrorTriggerProvider
@@ -115,23 +115,23 @@ export const Modal: Story = () => {
         </div>
       </div>
     </ErrorTriggerProvider>
-  )
-}
+  );
+};
 Modal.parameters = {
   elements: {
     config: {
-      variant: 'widget',
+      variant: "widget",
       modal: { defaultOpen: true },
       components: {
         ThreadWelcome: ThrowingThreadWelcome as ComponentType,
       },
     },
   },
-}
+};
 
 // Standalone variant story
 export const Standalone: Story = () => {
-  const [shouldThrow, setShouldThrow] = useState(false)
+  const [shouldThrow, setShouldThrow] = useState(false);
 
   return (
     <ErrorTriggerProvider
@@ -148,22 +148,22 @@ export const Standalone: Story = () => {
         </div>
       </div>
     </ErrorTriggerProvider>
-  )
-}
+  );
+};
 Standalone.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       components: {
         ThreadWelcome: ThrowingThreadWelcome as ComponentType,
       },
     },
   },
-}
+};
 
 // Sidecar variant story
 export const Sidecar: Story = () => {
-  const [shouldThrow, setShouldThrow] = useState(false)
+  const [shouldThrow, setShouldThrow] = useState(false);
 
   return (
     <ErrorTriggerProvider
@@ -185,18 +185,18 @@ export const Sidecar: Story = () => {
         </div>
       </div>
     </ErrorTriggerProvider>
-  )
-}
+  );
+};
 Sidecar.parameters = {
   elements: {
     config: {
-      variant: 'sidecar',
+      variant: "sidecar",
       sidecar: {
-        title: 'Error Boundary Demo',
+        title: "Error Boundary Demo",
       },
       components: {
         ThreadWelcome: ThrowingThreadWelcome as ComponentType,
       },
     },
   },
-}
+};

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

@@ -1,54 +1,54 @@
-import { ToolCallMessagePartProps } from '@assistant-ui/react'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import z from 'zod'
-import { Chat } from '..'
-import { defineFrontendTool } from '../../../lib/tools'
+import { ToolCallMessagePartProps } from "@assistant-ui/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import React from "react";
+import z from "zod";
+import { Chat } from "..";
+import { defineFrontendTool } from "../../../lib/tools";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Frontend Tools',
+  title: "Chat/Frontend 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 FetchTool = defineFrontendTool<{ url: string }, string>(
   {
-    description: 'Fetch a URL (supports CORS-enabled URLs like httpbin.org)',
+    description: "Fetch a URL (supports CORS-enabled URLs like httpbin.org)",
     parameters: z.object({
-      url: z.string().describe('URL to fetch (must support CORS)'),
+      url: z.string().describe("URL to fetch (must support CORS)"),
     }),
     execute: async ({ url }) => {
       try {
-        const response = await fetch(url as string)
-        const text = await response.text()
-        return text
+        const response = await fetch(url as string);
+        const text = await response.text();
+        return text;
       } catch (error) {
-        return `Error fetching ${url}: ${error instanceof Error ? error.message : 'Unknown error'}. Note: URL must support CORS for browser requests.`
+        return `Error fetching ${url}: ${error instanceof Error ? error.message : "Unknown error"}. Note: URL must support CORS for browser requests.`;
       }
     },
   },
-  'fetchUrl'
-)
+  "fetchUrl",
+);
 
 const frontendTools = {
   fetchUrl: FetchTool,
-}
+};
 
 // Render OS X style browser window with the fetched URL html rendered
 const FetchToolComponent = ({ result, args }: ToolCallMessagePartProps) => {
-  const url = (args as { url?: string })?.url || 'about:blank'
-  const [isLoading, setIsLoading] = React.useState(true)
+  const url = (args as { url?: string })?.url || "about:blank";
+  const [isLoading, setIsLoading] = React.useState(true);
 
   return (
     <div className="my-5 flex w-full flex-col overflow-hidden rounded-lg border shadow-lg">
       {/* macOS Window Controls Bar */}
-      <div className="bg-muted flex flex-col border-b">
+      <div className="flex flex-col border-b bg-muted">
         <div className="flex items-center gap-2 px-3 py-2">
           {/* Traffic lights */}
           <div className="flex gap-2">
@@ -58,9 +58,9 @@ const FetchToolComponent = ({ result, args }: ToolCallMessagePartProps) => {
           </div>
 
           {/* Address bar */}
-          <div className="bg-background mx-4 flex flex-1 items-center rounded-md px-3 py-1">
+          <div className="mx-4 flex flex-1 items-center rounded-md bg-background px-3 py-1">
             <svg
-              className="text-muted-foreground mr-2 h-4 w-4"
+              className="mr-2 h-4 w-4 text-muted-foreground"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -72,7 +72,7 @@ const FetchToolComponent = ({ result, args }: ToolCallMessagePartProps) => {
                 d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
               />
             </svg>
-            <span className="text-muted-foreground truncate text-sm">
+            <span className="truncate text-sm text-muted-foreground">
               {url}
             </span>
           </div>
@@ -84,7 +84,7 @@ const FetchToolComponent = ({ result, args }: ToolCallMessagePartProps) => {
             <div
               className="h-full w-1/3 animate-pulse bg-blue-500"
               style={{
-                animation: 'slide 1.5s ease-in-out infinite',
+                animation: "slide 1.5s ease-in-out infinite",
               }}
             />
           </div>
@@ -92,7 +92,7 @@ const FetchToolComponent = ({ result, args }: ToolCallMessagePartProps) => {
       </div>
 
       {/* Content */}
-      <div className="bg-background h-96">
+      <div className="h-96 bg-background">
         <iframe
           srcDoc={result as string}
           className="h-full w-full"
@@ -107,23 +107,23 @@ const FetchToolComponent = ({ result, args }: ToolCallMessagePartProps) => {
         }
       `}</style>
     </div>
-  )
-}
+  );
+};
 
-export const FetchUrl: Story = () => <Chat />
-FetchUrl.storyName = 'Fetch URL Tool'
+export const FetchUrl: Story = () => <Chat />;
+FetchUrl.storyName = "Fetch URL Tool";
 FetchUrl.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
-        title: '',
-        subtitle: '',
+        title: "",
+        subtitle: "",
         suggestions: [
           {
-            title: 'Fetch a URL',
-            label: 'Fetch a URL',
-            prompt: 'Fetch https://httpbin.org/html',
+            title: "Fetch a URL",
+            label: "Fetch a URL",
+            prompt: "Fetch https://httpbin.org/html",
           },
         ],
       },
@@ -135,4 +135,4 @@ FetchUrl.parameters = {
       },
     },
   },
-}
+};

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

@@ -1,113 +1,113 @@
-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/Generative UI',
+  title: "Chat/Plugins/Generative UI",
   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>;
 
 /**
  * E-commerce store assistant with natural task-focused prompts.
  */
-export const StoreAssistant: Story = () => <Chat />
+export const StoreAssistant: Story = () => <Chat />;
 StoreAssistant.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
-        title: 'Store Assistant',
-        subtitle: 'How can I help you today?',
+        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: "My Orders",
+            label: "View recent orders",
+            prompt: "Show me my current orders",
           },
           {
-            title: 'Browse Products',
+            title: "Browse Products",
             label: "See what's available",
-            prompt: 'What products do you have?',
+            prompt: "What products do you have?",
           },
           {
-            title: 'Find Deals',
-            label: 'Best prices',
-            prompt: 'What are the best deals right now?',
+            title: "Find Deals",
+            label: "Best prices",
+            prompt: "What are the best deals right now?",
           },
         ],
       },
     },
   },
-}
+};
 
 /**
  * Shopping assistant for product discovery.
  */
-export const ShoppingAssistant: Story = () => <Chat />
+export const ShoppingAssistant: Story = () => <Chat />;
 ShoppingAssistant.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
-        title: 'Shopping Assistant',
-        subtitle: 'Find the perfect product',
+        title: "Shopping Assistant",
+        subtitle: "Find the perfect product",
         suggestions: [
           {
-            title: 'New Arrivals',
-            label: 'Latest products',
-            prompt: 'Show me the newest products',
+            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: "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?',
+            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 />
+export const StoreManager: Story = () => <Chat />;
 StoreManager.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
-        title: 'Store Manager',
-        subtitle: 'Manage your store',
+        title: "Store Manager",
+        subtitle: "Manage your store",
         suggestions: [
           {
-            title: 'Stock Check',
-            label: 'Inventory status',
-            prompt: 'Which products are running low on stock?',
+            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: "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?',
+            title: "Top Sellers",
+            label: "Best performers",
+            prompt: "What are our best selling products?",
           },
         ],
       },
     },
   },
-}
+};