@gram-ai/elements 1.18.5 → 1.18.6

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

@@ -0,0 +1,145 @@
+import React from 'react'
+import { Chat } from '..'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import { ToolCallMessagePartProps } from '@assistant-ui/react'
+import { defineFrontendTool, FrontendTool } from '../../../lib/tools'
+import z from 'zod'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Frontend Tools',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+const FetchTool = defineFrontendTool<{ url: string }, string>(
+  {
+    description: 'Fetch a URL (supports CORS-enabled URLs like httpbin.org)',
+    parameters: z.object({
+      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
+      } catch (error) {
+        return `Error fetching ${url}: ${error instanceof Error ? error.message : 'Unknown error'}. Note: URL must support CORS for browser requests.`
+      }
+    },
+  },
+  'fetchUrl'
+)
+
+const frontendTools: Record<string, FrontendTool<{ url: string }, string>> = {
+  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)
+
+  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 items-center gap-2 px-3 py-2">
+          {/* Traffic lights */}
+          <div className="flex gap-2">
+            <div className="h-3 w-3 rounded-full bg-red-500" />
+            <div className="h-3 w-3 rounded-full bg-yellow-500" />
+            <div className="h-3 w-3 rounded-full bg-green-500" />
+          </div>
+
+          {/* Address bar */}
+          <div className="bg-background mx-4 flex flex-1 items-center rounded-md px-3 py-1">
+            <svg
+              className="text-muted-foreground mr-2 h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                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">
+              {url}
+            </span>
+          </div>
+        </div>
+
+        {/* Loading bar */}
+        {isLoading && (
+          <div className="h-0.5 w-full overflow-hidden">
+            <div
+              className="h-full w-1/3 animate-pulse bg-blue-500"
+              style={{
+                animation: 'slide 1.5s ease-in-out infinite',
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="bg-background h-96">
+        <iframe
+          srcDoc={result as string}
+          className="h-full w-full"
+          onLoad={() => setIsLoading(false)}
+        />
+      </div>
+
+      <style>{`
+        @keyframes slide {
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(400%); }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export const FetchUrl: Story = () => <Chat />
+FetchUrl.storyName = 'Fetch URL Tool'
+FetchUrl.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        title: '',
+        subtitle: '',
+        suggestions: [
+          {
+            title: 'Fetch a URL',
+            label: 'Fetch a URL',
+            action: 'Fetch https://httpbin.org/html',
+          },
+        ],
+      },
+      tools: {
+        frontendTools,
+        components: {
+          fetchUrl: FetchToolComponent,
+        },
+      },
+    },
+  },
+}

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

@@ -0,0 +1,84 @@
+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',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+export const CustomIcon: Story = () => <Chat />
+CustomIcon.parameters = {
+  elements: {
+    config: {
+      modal: {
+        defaultOpen: false,
+        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"
+          />
+        ),
+      },
+    },
+  },
+}
+
+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' },
+        },
+      },
+    },
+  },
+}
+
+export const PositionTopRight: Story = () => <Chat />
+PositionTopRight.parameters = {
+  elements: {
+    config: {
+      modal: { position: 'top-right' },
+    },
+  },
+}
+
+export const PositionBottomRight: Story = () => <Chat />
+PositionBottomRight.parameters = {
+  elements: {
+    config: {
+      modal: { position: 'bottom-right' },
+    },
+  },
+}
+
+export const PositionBottomLeft: Story = () => <Chat />
+PositionBottomLeft.parameters = {
+  elements: {
+    config: {
+      modal: { position: 'bottom-left' },
+    },
+  },
+}
+
+export const PositionTopLeft: Story = () => <Chat />
+PositionTopLeft.parameters = {
+  elements: {
+    config: {
+      modal: { position: 'top-left' },
+    },
+  },
+}

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Chat } from '..'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Model',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+export const ModelPicker: Story = () => <Chat />
+ModelPicker.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      model: { showModelPicker: true },
+    },
+  },
+}

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

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Chat } from '..'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Plugins',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+const countryData = JSON.stringify({
+  countries: [
+    { name: 'USA', gdp: 22000 },
+    { name: 'Canada', gdp: 16000 },
+    { name: 'Mexico', gdp: 10000 },
+  ],
+})
+
+export const ChartPlugin: Story = () => <Chat />
+ChartPlugin.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        suggestions: [
+          {
+            title: 'Create a chart',
+            label: 'Visualize your data',
+            action: `Create a bar chart for the following country + GDP data:
+            ${countryData}
+            `,
+          },
+        ],
+      },
+    },
+  },
+}

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Chat } from '..'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Radius',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+export const Round: Story = () => <Chat />
+Round.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      theme: { radius: 'round' },
+    },
+  },
+}
+
+export const Soft: Story = () => <Chat />
+Soft.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      theme: { radius: 'soft' },
+    },
+  },
+}
+
+export const Sharp: Story = () => <Chat />
+Sharp.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      theme: { radius: 'sharp' },
+    },
+  },
+}

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

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

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

@@ -0,0 +1,110 @@
+import React from 'react'
+import { Chat } from '..'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import { defineFrontendTool } from '../../../lib/tools'
+import z from 'zod'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Tool Approval',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+export const SingleTool: Story = () => <Chat />
+SingleTool.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        suggestions: [
+          {
+            title: 'Call a tool requiring approval',
+            label: 'Get a salutation',
+            action: 'Get a salutation',
+          },
+        ],
+      },
+      tools: {
+        toolsRequiringApproval: ['kitchen_sink_get_salutation'],
+      },
+    },
+  },
+}
+
+export const MultipleGroupedTools: Story = () => <Chat />
+MultipleGroupedTools.storyName = 'Multiple Grouped Tools'
+MultipleGroupedTools.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        suggestions: [
+          {
+            title: 'Call both tools requiring approval',
+            label: 'Call both tools requiring approval',
+            action:
+              'Call both kitchen_sink_get_salutation and kitchen_sink_get_get_card_details',
+          },
+        ],
+      },
+      tools: {
+        toolsRequiringApproval: [
+          'kitchen_sink_get_salutation',
+          'kitchen_sink_get_get_card_details',
+        ],
+      },
+    },
+  },
+}
+
+const deleteFile = defineFrontendTool<{ fileId: string }, string>(
+  {
+    description: 'Delete a file',
+    parameters: z.object({
+      fileId: z.string().describe('The ID of the file to delete'),
+    }),
+    execute: async ({ fileId }) => {
+      alert(`File ${fileId} deleted`)
+      return `File ${fileId} deleted`
+    },
+  },
+  'deleteFile'
+)
+
+export const FrontendTool: Story = () => <Chat />
+FrontendTool.storyName = 'Frontend Tool Requiring Approval'
+FrontendTool.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        suggestions: [
+          {
+            title: 'Delete a file',
+            label: 'Delete a file',
+            action: 'Delete file with ID 123',
+          },
+        ],
+      },
+      tools: {
+        frontendTools: {
+          deleteFile,
+        },
+        toolsRequiringApproval: ['deleteFile'],
+      },
+    },
+  },
+}

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

@@ -0,0 +1,175 @@
+import React from 'react'
+import { Chat } from '..'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import { ToolCallMessagePartProps } from '@assistant-ui/react'
+
+const meta: Meta<typeof Chat> = {
+  title: 'Chat/Tools',
+  component: Chat,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="m-auto flex h-screen w-full max-w-3xl flex-col">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Chat>
+
+export default meta
+
+type Story = StoryFn<typeof Chat>
+
+const CardPinRevealComponent = ({
+  result,
+  argsText,
+}: ToolCallMessagePartProps) => {
+  const [isFlipped, setIsFlipped] = React.useState(false)
+
+  // Parse the result to get the pin
+  let pin = '****'
+  try {
+    if (result) {
+      const parsed = typeof result === 'string' ? JSON.parse(result) : result
+      if (parsed?.content?.[0]?.text) {
+        const content = JSON.parse(parsed.content[0].text)
+        pin = content.pin || '****'
+      } else if (parsed?.pin) {
+        pin = parsed.pin
+      }
+    }
+  } catch {
+    // Fallback to default
+  }
+
+  const args = JSON.parse(argsText || '{}')
+  const cardNumber = args?.queryParameters?.cardNumber || '4532 •••• •••• 1234'
+  const cardHolder = 'JOHN DOE'
+  const expiry = '12/25'
+  const cvv = '123'
+
+  if (!cardNumber) {
+    return null
+  }
+
+  return (
+    <div className="my-4 perspective-[1000px]">
+      <div
+        className={`relative h-48 w-80 cursor-pointer transition-transform duration-700 [transform-style:preserve-3d] ${
+          isFlipped ? 'transform-[rotateY(180deg)]' : ''
+        }`}
+        onClick={() => setIsFlipped(!isFlipped)}
+      >
+        {/* Front of card */}
+        <div className="absolute inset-0 backface-hidden">
+          <div className="relative h-full w-full overflow-hidden rounded-xl bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 p-6 text-white shadow-2xl">
+            {/* Card pattern overlay */}
+            <div className="absolute inset-0 opacity-10">
+              <div className="absolute -top-10 -right-10 h-40 w-40 rounded-full bg-white"></div>
+              <div className="absolute -bottom-10 -left-10 h-32 w-32 rounded-full bg-white"></div>
+            </div>
+
+            {/* Card content */}
+            <div className="relative z-10 flex h-full flex-col justify-between">
+              <div className="flex items-center justify-between">
+                <div className="text-2xl font-bold">VISA</div>
+                <div className="h-8 w-12 rounded bg-white/20"></div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="font-mono text-2xl tracking-wider">
+                  {cardNumber}
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <div>
+                    <div className="text-xs opacity-70">CARDHOLDER</div>
+                    <div className="font-semibold">{cardHolder}</div>
+                  </div>
+                  <div>
+                    <div className="text-xs opacity-70">EXPIRES</div>
+                    <div className="font-semibold">{expiry}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Click hint */}
+            <div className="absolute right-2 bottom-2 text-xs opacity-50">
+              Click to flip
+            </div>
+          </div>
+        </div>
+
+        {/* Back of card */}
+        <div className="absolute inset-0 transform-[rotateY(180deg)] backface-hidden">
+          <div className="relative h-full w-full overflow-hidden rounded-xl bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 p-6 text-white shadow-2xl">
+            {/* Magnetic strip */}
+            <div className="absolute top-8 right-0 left-0 h-12 bg-black"></div>
+
+            {/* Card content */}
+            <div className="relative z-10 flex h-full flex-col justify-between">
+              <div className="mt-16 space-y-4">
+                <div className="flex items-center gap-2">
+                  <div className="h-8 flex-1 rounded bg-white/10 px-3 py-2 text-right font-mono text-sm">
+                    {cvv}
+                  </div>
+                  <div className="text-xs opacity-70">CVV</div>
+                </div>
+
+                {/* PIN Display */}
+                <div className="mt-6 space-y-2">
+                  <div className="text-xs opacity-70">PIN</div>
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-gradient-to-br from-yellow-400 to-orange-500 shadow-lg">
+                      <span className="text-2xl font-bold text-white">
+                        {pin}
+                      </span>
+                    </div>
+                    <div className="text-xs opacity-60">
+                      Keep this PIN secure
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between text-xs opacity-50">
+                <div>VISA</div>
+                <div>{cardNumber}</div>
+              </div>
+            </div>
+
+            {/* Click hint */}
+            <div className="absolute bottom-2 left-2 text-xs opacity-50">
+              Click to flip back
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const CustomToolComponent: Story = () => <Chat />
+CustomToolComponent.parameters = {
+  elements: {
+    config: {
+      variant: 'standalone',
+      welcome: {
+        suggestions: [
+          {
+            title: 'Get card details',
+            label: 'for your card',
+            action: 'Get card details for your card number 4532 •••• •••• 1234',
+          },
+        ],
+      },
+      tools: {
+        components: {
+          kitchen_sink_get_get_card_details: CardPinRevealComponent,
+        },
+      },
+    },
+  },
+}