@gram-ai/elements 1.27.4 → 1.27.5

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

@@ -1,80 +1,80 @@
-import { MessageFeedback } from '@/components/assistant-ui/message-feedback'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { LazyMotion, domAnimation } from 'motion/react'
-import { Chat } from '..'
+import { MessageFeedback } from "@/components/assistant-ui/message-feedback";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { LazyMotion, domAnimation } from "motion/react";
+import { Chat } from "..";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Message Feedback',
+  title: "Chat/Message Feedback",
   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>;
 
 /**
  * The feedback buttons appear on the last assistant message after it finishes streaming.
  * Send a message to see the feedback UI animate in.
  */
-export const Default: Story = () => <Chat />
+export const Default: Story = () => <Chat />;
 Default.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       thread: {
         showFeedback: true,
       },
       welcome: {
-        title: 'Message Feedback Demo',
-        subtitle: 'Send a message to see the feedback buttons',
+        title: "Message Feedback Demo",
+        subtitle: "Send a message to see the feedback buttons",
         suggestions: [
           {
-            title: 'Say hello',
-            label: 'A simple greeting',
-            prompt: 'Hello!',
+            title: "Say hello",
+            label: "A simple greeting",
+            prompt: "Hello!",
           },
         ],
       },
     },
   },
-}
+};
 Default.decorators = [
   (Story) => (
     <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
       <Story />
     </div>
   ),
-]
+];
 
 /**
  * Widget variant with feedback buttons.
  */
-export const Widget: Story = () => <Chat />
+export const Widget: Story = () => <Chat />;
 Widget.parameters = {
   elements: {
     config: {
-      variant: 'widget',
+      variant: "widget",
       modal: { defaultOpen: true },
       thread: {
         showFeedback: true,
       },
       welcome: {
-        title: 'Message Feedback Demo',
-        subtitle: 'Send a message to see the feedback buttons',
+        title: "Message Feedback Demo",
+        subtitle: "Send a message to see the feedback buttons",
         suggestions: [
           {
-            title: 'Say hello',
-            label: 'A simple greeting',
-            prompt: 'Hello!',
+            title: "Say hello",
+            label: "A simple greeting",
+            prompt: "Hello!",
           },
         ],
       },
     },
   },
-}
+};
 
 /**
  * Sidecar variant with feedback buttons.
@@ -85,85 +85,85 @@ export const Sidecar: Story = () => (
     <p>The sidebar is always visible on the right.</p>
     <Chat />
   </div>
-)
+);
 Sidecar.parameters = {
   elements: {
     config: {
-      variant: 'sidecar',
+      variant: "sidecar",
       thread: {
         showFeedback: true,
       },
       welcome: {
-        title: 'Message Feedback Demo',
-        subtitle: 'Send a message to see the feedback buttons',
+        title: "Message Feedback Demo",
+        subtitle: "Send a message to see the feedback buttons",
         suggestions: [
           {
-            title: 'Say hello',
-            label: 'A simple greeting',
-            prompt: 'Hello!',
+            title: "Say hello",
+            label: "A simple greeting",
+            prompt: "Hello!",
           },
         ],
       },
     },
   },
-}
+};
 
 /**
  * Demonstrates feedback UI combined with follow-up suggestions.
  * After the assistant responds, you'll see both AI-generated follow-up questions
  * and feedback buttons (like/dislike) to mark the conversation as resolved.
  */
-export const WithFollowUpSuggestions: Story = () => <Chat />
+export const WithFollowUpSuggestions: Story = () => <Chat />;
 WithFollowUpSuggestions.parameters = {
   elements: {
     config: {
-      variant: 'widget',
+      variant: "widget",
       modal: { defaultOpen: true },
       systemPrompt:
-        'You are a helpful customer support assistant. Keep ALL responses extremely brief - 1-2 sentences only. No lists, no elaboration.',
+        "You are a helpful customer support assistant. Keep ALL responses extremely brief - 1-2 sentences only. No lists, no elaboration.",
       thread: {
         showFeedback: true,
         followUpSuggestions: true,
       },
       welcome: {
-        title: 'Support Chat',
-        subtitle: 'How can we help you today?',
+        title: "Support Chat",
+        subtitle: "How can we help you today?",
         suggestions: [
           {
-            title: 'Order status',
-            label: 'Where is my package?',
-            prompt: 'Where is my package?',
+            title: "Order status",
+            label: "Where is my package?",
+            prompt: "Where is my package?",
           },
           {
-            title: 'Returns',
-            label: 'How do I return an item?',
-            prompt: 'How do I return an item?',
+            title: "Returns",
+            label: "How do I return an item?",
+            prompt: "How do I return an item?",
           },
         ],
       },
     },
   },
-}
+};
 
 /**
  * Standalone component demo showing the feedback buttons in isolation.
  */
 export const ComponentOnly: StoryFn = () => (
   <LazyMotion features={domAnimation}>
-    <div className="bg-background flex min-h-screen items-center justify-center p-10">
+    <div className="flex min-h-screen items-center justify-center bg-background p-10">
       <div className="flex flex-col items-center gap-8">
-        <h2 className="text-foreground text-lg font-semibold">
+        <h2 className="text-lg font-semibold text-foreground">
           Message Feedback Buttons
         </h2>
         <MessageFeedback
           onFeedback={(type) => {
-            console.log('Feedback:', type)
+            console.log("Feedback:", type);
           }}
         />
       </div>
     </div>
   </LazyMotion>
-)
+);
 ComponentOnly.parameters = {
-  layout: 'fullscreen',
-}
+  layout: "fullscreen",
+};

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

@@ -1,27 +1,27 @@
-import React from 'react'
-import { Chat } from '..'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { ZapIcon } from 'lucide-react'
+import React from "react";
+import { Chat } from "..";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { ZapIcon } from "lucide-react";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Modal',
+  title: "Chat/Modal",
   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 CustomIcon: Story = () => <Chat />
+export const CustomIcon: Story = () => <Chat />;
 CustomIcon.parameters = {
   elements: {
     config: {
       modal: {
         defaultOpen: false,
-        icon: (state: 'open' | 'closed' | undefined) => (
+        icon: (state: "open" | "closed" | undefined) => (
           <ZapIcon
             data-state={state}
             className="aui-modal-button-closed-icon absolute transition-all data-[state=closed]:scale-100 data-[state=closed]:rotate-0 data-[state=open]:scale-0 data-[state=open]:rotate-90"
@@ -30,55 +30,55 @@ CustomIcon.parameters = {
       },
     },
   },
-}
+};
 
-export const Expandable: Story = () => <Chat />
+export const Expandable: Story = () => <Chat />;
 Expandable.parameters = {
   elements: {
     config: {
       modal: {
         expandable: true,
         dimensions: {
-          default: { width: '500px', height: '600px', maxHeight: '100vh' },
-          expanded: { width: '80vw', height: '90vh' },
+          default: { width: "500px", height: "600px", maxHeight: "100vh" },
+          expanded: { width: "80vw", height: "90vh" },
         },
       },
     },
   },
-}
+};
 
-export const PositionTopRight: Story = () => <Chat />
+export const PositionTopRight: Story = () => <Chat />;
 PositionTopRight.parameters = {
   elements: {
     config: {
-      modal: { position: 'top-right' },
+      modal: { position: "top-right" },
     },
   },
-}
+};
 
-export const PositionBottomRight: Story = () => <Chat />
+export const PositionBottomRight: Story = () => <Chat />;
 PositionBottomRight.parameters = {
   elements: {
     config: {
-      modal: { position: 'bottom-right' },
+      modal: { position: "bottom-right" },
     },
   },
-}
+};
 
-export const PositionBottomLeft: Story = () => <Chat />
+export const PositionBottomLeft: Story = () => <Chat />;
 PositionBottomLeft.parameters = {
   elements: {
     config: {
-      modal: { position: 'bottom-left' },
+      modal: { position: "bottom-left" },
     },
   },
-}
+};
 
-export const PositionTopLeft: Story = () => <Chat />
+export const PositionTopLeft: Story = () => <Chat />;
 PositionTopLeft.parameters = {
   elements: {
     config: {
-      modal: { position: 'top-left' },
+      modal: { position: "top-left" },
     },
   },
-}
+};

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

@@ -1,25 +1,25 @@
-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/Model',
+  title: "Chat/Model",
   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 ModelPicker: Story = () => <Chat />
+export const ModelPicker: Story = () => <Chat />;
 ModelPicker.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
+      variant: "standalone",
       model: { showModelPicker: true },
     },
   },
-}
+};

package/src/components/Chat/stories/Radius.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/Radius',
+  title: "Chat/Radius",
   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 Round: Story = () => <Chat />
+export const Round: Story = () => <Chat />;
 Round.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      theme: { radius: 'round' },
+      variant: "standalone",
+      theme: { radius: "round" },
     },
   },
-}
+};
 
-export const Soft: Story = () => <Chat />
+export const Soft: Story = () => <Chat />;
 Soft.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      theme: { radius: 'soft' },
+      variant: "standalone",
+      theme: { radius: "soft" },
     },
   },
-}
+};
 
-export const Sharp: Story = () => <Chat />
+export const Sharp: Story = () => <Chat />;
 Sharp.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      theme: { radius: 'sharp' },
+      variant: "standalone",
+      theme: { radius: "sharp" },
     },
   },
-}
+};

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

@@ -1,27 +1,27 @@
-import { Chat } from '..'
-import type { Meta, StoryFn } from '@storybook/react-vite'
+import { Chat } from "..";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Sidecar',
+  title: "Chat/Sidecar",
   component: Chat,
-} satisfies Meta<typeof Chat>
+} satisfies Meta<typeof Chat>;
 
-export default meta
+export default meta;
 
 export const Sidecar: StoryFn<typeof Chat> = () => {
-  return <Chat />
-}
+  return <Chat />;
+};
 
 Sidecar.parameters = {
-  elements: { config: { variant: 'sidecar' } },
-}
+  elements: { config: { variant: "sidecar" } },
+};
 
 export const SidecarWithTitle: StoryFn<typeof Chat> = () => {
-  return <Chat />
-}
+  return <Chat />;
+};
 
 SidecarWithTitle.parameters = {
   elements: {
-    config: { variant: 'sidecar', sidecar: { title: 'Chat with me' } },
+    config: { variant: "sidecar", sidecar: { title: "Chat with me" } },
   },
-}
+};

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

@@ -1,17 +1,17 @@
-import { Chat } from '..'
-import type { Meta, StoryFn } from '@storybook/react-vite'
+import { Chat } from "..";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Style Isolation',
+  title: "Chat/Style Isolation",
   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>
@@ -28,14 +28,14 @@ export const Default: Story = () => (
     </style>
     <Chat />
   </div>
-)
+);
 Default.parameters = {
   elements: {
     config: {
       welcome: {
-        title: 'Style isolation via Shadow DOM',
-        subtitle: 'Demo of style isolation via Shadow DOM',
+        title: "Style isolation via Shadow DOM",
+        subtitle: "Demo of style isolation via Shadow DOM",
       },
     },
   },
-}
+};

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

@@ -1,74 +1,74 @@
-import { Chat } from '..'
-import type { Meta, StoryFn } from '@storybook/react-vite'
+import { Chat } from "..";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 
 const meta: Meta<typeof Chat> = {
-  title: 'Chat/Theme',
+  title: "Chat/Theme",
   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 StoryWrapper = ({ children }: { children: React.ReactNode }) => (
   <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
     {children}
   </div>
-)
+);
 
 export const Light: Story = () => (
   <StoryWrapper>
     <Chat />
   </StoryWrapper>
-)
+);
 Light.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      theme: { colorScheme: 'light' },
+      variant: "standalone",
+      theme: { colorScheme: "light" },
     },
   },
   // Disable Chromatic's automatic dark mode snapshot for this story
-  chromatic: { modes: { 'light desktop': { theme: 'light' } } },
-}
+  chromatic: { modes: { "light desktop": { theme: "light" } } },
+};
 
 export const Dark: Story = () => (
   <StoryWrapper>
     <Chat />
   </StoryWrapper>
-)
+);
 Dark.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      theme: { colorScheme: 'dark' },
+      variant: "standalone",
+      theme: { colorScheme: "dark" },
     },
   },
-  backgrounds: { default: 'dark' },
+  backgrounds: { default: "dark" },
   // Only capture dark mode for this story
-  chromatic: { modes: { 'dark desktop': { theme: 'dark' } } },
-}
+  chromatic: { modes: { "dark desktop": { theme: "dark" } } },
+};
 
 export const System: Story = () => (
   <StoryWrapper>
     <Chat />
   </StoryWrapper>
-)
+);
 System.parameters = {
   elements: {
     config: {
-      variant: 'standalone',
-      theme: { colorScheme: 'system' },
+      variant: "standalone",
+      theme: { colorScheme: "system" },
     },
   },
   // System will follow browser preference, test both modes
   chromatic: {
     modes: {
-      'light desktop': { theme: 'light' },
-      'dark desktop': { theme: 'dark' },
+      "light desktop": { theme: "light" },
+      "dark desktop": { theme: "dark" },
     },
   },
-}
+};