@gram-ai/elements 1.27.4 → 1.27.5

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

@@ -1,40 +1,40 @@
-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/Thread',
+  title: "Chat/Thread",
   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>;
 
 /**
  * Demonstrates follow-up suggestions that appear after the assistant responds.
  * Send a message and watch as AI-generated follow-up questions appear below the response.
  */
-export const FollowUpSuggestions: Story = () => <Chat />
+export const FollowUpSuggestions: Story = () => <Chat />;
 FollowUpSuggestions.parameters = {
   elements: {
     config: {
-      variant: 'widget',
+      variant: "widget",
       modal: {
         defaultOpen: true,
       },
       systemPrompt:
-        'You are a helpful assistant. Keep ALL responses extremely brief - 1-2 sentences only. No lists, no elaboration.',
+        "You are a helpful assistant. Keep ALL responses extremely brief - 1-2 sentences only. No lists, no elaboration.",
       welcome: {
-        title: 'Explore Paris',
-        subtitle: 'Ask me anything about the City of Light',
+        title: "Explore Paris",
+        subtitle: "Ask me anything about the City of Light",
         suggestions: [
           {
-            title: 'Cool places',
-            label: 'to visit in Paris',
-            prompt: 'Tell me about cool places to visit in Paris',
+            title: "Cool places",
+            label: "to visit in Paris",
+            prompt: "Tell me about cool places to visit in Paris",
           },
         ],
       },
@@ -43,30 +43,30 @@ FollowUpSuggestions.parameters = {
       },
     },
   },
-}
+};
 
 /**
  * Shows the thread with follow-up suggestions disabled.
  * No suggestions will appear after the assistant responds.
  */
-export const FollowUpSuggestionsDisabled: Story = () => <Chat />
+export const FollowUpSuggestionsDisabled: Story = () => <Chat />;
 FollowUpSuggestionsDisabled.parameters = {
   elements: {
     config: {
-      variant: 'widget',
+      variant: "widget",
       modal: {
         defaultOpen: true,
       },
       systemPrompt:
-        'You are a helpful assistant. Keep ALL responses extremely brief - 1-2 sentences only. No lists, no elaboration.',
+        "You are a helpful assistant. Keep ALL responses extremely brief - 1-2 sentences only. No lists, no elaboration.",
       welcome: {
-        title: 'Explore Paris',
-        subtitle: 'Ask me anything about the City of Light',
+        title: "Explore Paris",
+        subtitle: "Ask me anything about the City of Light",
         suggestions: [
           {
-            title: 'Cool places',
-            label: 'to visit in Paris',
-            prompt: 'Tell me about cool places to visit in Paris',
+            title: "Cool places",
+            label: "to visit in Paris",
+            prompt: "Tell me about cool places to visit in Paris",
           },
         ],
       },
@@ -75,4 +75,4 @@ FollowUpSuggestionsDisabled.parameters = {
       },
     },
   },
-}
+};

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

@@ -1,117 +1,117 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import z from 'zod'
-import { Chat } from '..'
-import { defineFrontendTool } from '../../../lib/tools'
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import z from "zod";
+import { Chat } from "..";
+import { defineFrontendTool } from "../../../lib/tools";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Tool Approval',
+  title: "Chat/Tool Approval",
   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 SingleTool: Story = () => <Chat />
+export const SingleTool: Story = () => <Chat />;
 SingleTool.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
         suggestions: [
           {
-            title: 'Call a tool requiring approval',
-            label: 'Add to cart',
-            prompt: 'List products and add the first one to my cart',
+            title: "Call a tool requiring approval",
+            label: "Add to cart",
+            prompt: "List products and add the first one to my cart",
           },
         ],
       },
       tools: {
-        toolsRequiringApproval: ['ecommerce_api_add_to_cart'],
+        toolsRequiringApproval: ["ecommerce_api_add_to_cart"],
       },
     },
   },
-}
+};
 
-export const SingleToolWithFunction: Story = () => <Chat />
+export const SingleToolWithFunction: Story = () => <Chat />;
 SingleToolWithFunction.storyName =
-  'Single Tool Requiring Approval with Function'
+  "Single Tool Requiring Approval with Function";
 SingleToolWithFunction.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       tools: {
         toolsRequiringApproval: ({ toolName }: { toolName: string }) =>
-          toolName.includes('order') || toolName.includes('cart'),
+          toolName.includes("order") || toolName.includes("cart"),
       },
       welcome: {
         suggestions: [
           {
-            title: 'Call a tool requiring approval',
-            label: 'Create an order',
-            prompt: 'List products and create an order for the first one',
+            title: "Call a tool requiring approval",
+            label: "Create an order",
+            prompt: "List products and create an order for the first one",
           },
         ],
       },
     },
   },
-}
+};
 
-export const MultipleGroupedTools: Story = () => <Chat />
-MultipleGroupedTools.storyName = 'Multiple Grouped Tools'
+export const MultipleGroupedTools: Story = () => <Chat />;
+MultipleGroupedTools.storyName = "Multiple Grouped Tools";
 MultipleGroupedTools.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
         suggestions: [
           {
-            title: 'Call both tools requiring approval',
-            label: 'Add to cart and create order',
+            title: "Call both tools requiring approval",
+            label: "Add to cart and create order",
             prompt:
-              'List products, add the first one to my cart, and then create an order',
+              "List products, add the first one to my cart, and then create an order",
           },
         ],
       },
       tools: {
         toolsRequiringApproval: [
-          'ecommerce_api_add_to_cart',
-          'ecommerce_api_create_order',
+          "ecommerce_api_add_to_cart",
+          "ecommerce_api_create_order",
         ],
       },
     },
   },
-}
+};
 
 const deleteFile = defineFrontendTool<{ fileId: string }, string>(
   {
-    description: 'Delete a file',
+    description: "Delete a file",
     parameters: z.object({
-      fileId: z.string().describe('The ID of the file to delete'),
+      fileId: z.string().describe("The ID of the file to delete"),
     }),
     execute: async ({ fileId }) => {
-      alert(`File ${fileId} deleted`)
-      return `File ${fileId} deleted`
+      alert(`File ${fileId} deleted`);
+      return `File ${fileId} deleted`;
     },
   },
-  'deleteFile'
-)
+  "deleteFile",
+);
 
-export const FrontendTool: Story = () => <Chat />
-FrontendTool.storyName = 'Frontend Tool Requiring Approval'
+export const FrontendTool: Story = () => <Chat />;
+FrontendTool.storyName = "Frontend Tool Requiring Approval";
 FrontendTool.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       welcome: {
         suggestions: [
           {
-            title: 'Delete a file',
-            label: 'Delete a file',
-            prompt: 'Delete file with ID 123',
+            title: "Delete a file",
+            label: "Delete a file",
+            prompt: "Delete file with ID 123",
           },
         ],
       },
@@ -119,35 +119,35 @@ FrontendTool.parameters = {
         frontendTools: {
           deleteFile,
         },
-        toolsRequiringApproval: ['deleteFile'],
+        toolsRequiringApproval: ["deleteFile"],
       },
     },
   },
-}
+};
 
-export const FrontendToolWithFunction: Story = () => <Chat />
+export const FrontendToolWithFunction: Story = () => <Chat />;
 FrontendToolWithFunction.storyName =
-  'Frontend Tool Requiring Approval with Function'
+  "Frontend Tool Requiring Approval with Function";
 FrontendToolWithFunction.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       tools: {
         frontendTools: {
           deleteFile,
         },
         toolsRequiringApproval: ({ toolName }: { toolName: string }) =>
-          toolName.startsWith('delete'),
+          toolName.startsWith("delete"),
       },
       welcome: {
         suggestions: [
           {
-            title: 'Delete a file',
-            label: 'Delete a file',
-            prompt: 'Delete file with ID 123',
+            title: "Delete a file",
+            label: "Delete a file",
+            prompt: "Delete file with ID 123",
           },
         ],
       },
     },
   },
-}
+};

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

@@ -1,56 +1,56 @@
-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/ToolMentions',
+  title: "Chat/ToolMentions",
   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>;
 
 /**
  * Default behavior - tool mentions are enabled automatically when tools are available.
  * Type @ followed by a tool name to see the autocomplete dropdown.
  */
-export const Default: Story = () => <Chat />
+export const Default: Story = () => <Chat />;
 Default.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
     },
   },
-}
+};
 
 /**
  * Tool mentions can be explicitly disabled via configuration.
  */
-export const Disabled: Story = () => <Chat />
+export const Disabled: Story = () => <Chat />;
 Disabled.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       composer: {
         toolMentions: false,
       },
     },
   },
-}
+};
 
 /**
  * Tool mentions with custom configuration.
  * Limits the number of suggestions shown in the dropdown.
  */
-export const CustomConfig: Story = () => <Chat />
+export const CustomConfig: Story = () => <Chat />;
 CustomConfig.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       composer: {
         toolMentions: {
           enabled: true,
@@ -59,4 +59,4 @@ CustomConfig.parameters = {
       },
     },
   },
-}
+};