@gram-ai/elements 1.25.2 → 1.26.0

package/src/plugins/chart/ui/scatter-chart.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FC } from 'react'
+import {
+  ScatterChart as RechartsScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  ZAxis,
+  Cell,
+  TooltipProps,
+} from 'recharts'
+
+interface ScatterDataPoint {
+  x: number
+  y: number
+  label?: string
+  size?: number
+  color?: string
+}
+
+const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
+  if (!active || !payload || payload.length === 0) return null
+  const point = payload[0]?.payload as ScatterDataPoint | undefined
+  return (
+    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1.5 text-xs shadow-sm">
+      {point?.label && <div className="font-medium">{point.label}</div>}
+      <div>x: {point?.x?.toLocaleString()}</div>
+      <div>y: {point?.y?.toLocaleString()}</div>
+    </div>
+  )
+}
+
+const COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+]
+
+export interface ScatterChartProps {
+  title?: string
+  data: ScatterDataPoint[]
+  xLabel?: string
+  yLabel?: string
+  showGrid?: boolean
+  className?: string
+}
+
+export const ScatterChart: FC<ScatterChartProps> = ({
+  title,
+  data,
+  xLabel,
+  yLabel,
+  showGrid = true,
+  className,
+}) => {
+  // Check if we have size data for bubble chart effect
+  const hasSizeData = data.some((d) => d.size !== undefined)
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {title && (
+        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+      )}
+      <div className="h-[250px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsScatterChart
+            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
+          >
+            {showGrid && (
+              <CartesianGrid
+                strokeDasharray="3 3"
+                className="stroke-muted/30"
+              />
+            )}
+            <XAxis
+              type="number"
+              dataKey="x"
+              name={xLabel || 'x'}
+              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+              axisLine={{ stroke: 'var(--border)' }}
+              tickLine={{ stroke: 'var(--border)' }}
+              label={
+                xLabel
+                  ? {
+                      value: xLabel,
+                      position: 'bottom',
+                      offset: -5,
+                      fill: 'var(--foreground)',
+                    }
+                  : undefined
+              }
+            />
+            <YAxis
+              type="number"
+              dataKey="y"
+              name={yLabel || 'y'}
+              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+              axisLine={{ stroke: 'var(--border)' }}
+              tickLine={{ stroke: 'var(--border)' }}
+              label={
+                yLabel
+                  ? {
+                      value: yLabel,
+                      angle: -90,
+                      position: 'left',
+                      fill: 'var(--foreground)',
+                    }
+                  : undefined
+              }
+            />
+            {hasSizeData && (
+              <ZAxis type="number" dataKey="size" range={[50, 400]} />
+            )}
+            <Tooltip content={<CustomTooltip />} />
+            <Scatter data={data} fill={COLORS[0]} isAnimationActive={false}>
+              {data.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color || COLORS[0]} />
+              ))}
+            </Scatter>
+          </RechartsScatterChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

package/src/plugins/components/MacOSWindowFrame.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useRadius } from '@/hooks/useRadius'
+import { cn } from '@/lib/utils'
+import { FC, ReactNode } from 'react'
+
+interface MacOSWindowFrameProps {
+  children: ReactNode
+  className?: string
+  /** Optional title to display in the title bar */
+  title?: string
+}
+
+/**
+ * A macOS-style window frame with traffic light buttons.
+ * Wraps content in a bordered container with a title bar.
+ */
+export const MacOSWindowFrame: FC<MacOSWindowFrameProps> = ({
+  children,
+  className,
+  title,
+}) => {
+  const r = useRadius()
+
+  return (
+    <div className="@container my-4 w-full first:mt-0">
+      <div
+        className={cn(
+          // after:hidden prevents assistant-ui from showing its default code block loading indicator
+          'border-border w-full overflow-hidden border after:hidden @sm:max-w-md @md:max-w-lg @lg:max-w-xl @xl:max-w-2xl',
+          r('lg'),
+          className
+        )}
+      >
+        {/* Title bar */}
+        <div className="border-border bg-muted/50 flex h-8 items-center gap-2 border-b px-3">
+          {/* Traffic lights */}
+          <div className="flex items-center gap-1.5">
+            <div className="size-3 rounded-full bg-[#FF5F57]" />
+            <div className="size-3 rounded-full bg-[#FEBC2E]" />
+            <div className="size-3 rounded-full bg-[#28C840]" />
+          </div>
+          {/* Title */}
+          {title && (
+            <span className="text-muted-foreground flex-1 text-center text-xs font-medium">
+              {title}
+            </span>
+          )}
+        </div>
+        {/* Content */}
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/plugins/components/PluginLoadingState.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useRadius } from '@/hooks/useRadius'
 import { cn } from '@/lib/utils'
 import { FC } from 'react'
+import { MacOSWindowFrame } from './MacOSWindowFrame'
 
 interface PluginLoadingStateProps {
   text: string
@@ -11,25 +11,21 @@ interface PluginLoadingStateProps {
 
 /**
  * Shared loading state component for plugins.
- * Displays a shimmer effect with loading text.
+ * Displays a shimmer effect with loading text inside a macOS-style window.
  */
 export const PluginLoadingState: FC<PluginLoadingStateProps> = ({
   text,
   className,
 }) => {
-  const r = useRadius()
-
   return (
-    <div
-      className={cn(
-        'border-border bg-card relative min-h-[400px] w-fit max-w-full min-w-[400px] overflow-hidden border after:hidden',
-        r('lg'),
-        className
-      )}
-    >
-      <div className="bg-muted absolute inset-0 flex items-center justify-center">
+    <MacOSWindowFrame className={className}>
+      <div
+        className={cn(
+          'bg-background relative flex min-h-[400px] items-center justify-center'
+        )}
+      >
         <span className="shimmer text-muted-foreground text-sm">{text}</span>
       </div>
-    </div>
+    </MacOSWindowFrame>
   )
 }

package/src/plugins/generative-ui/catalog.ts

@@ -0,0 +1,277 @@
+import { createCatalog } from '@json-render/core'
+import { z } from 'zod'
+
+/**
+ * Generative UI Catalog
+ *
+ * Defines all available components for LLM-generated UI.
+ * Components map to shadcn/ui primitives in the ui/ directory.
+ */
+export const catalog = createCatalog({
+  name: 'generative-ui',
+  components: {
+    // Layout
+    Stack: {
+      props: z.object({
+        direction: z.enum(['horizontal', 'vertical']).optional(),
+        gap: z.enum(['sm', 'md', 'lg']).optional(),
+        align: z.enum(['start', 'center', 'end', 'stretch']).optional(),
+        justify: z
+          .enum(['start', 'center', 'end', 'between', 'around'])
+          .optional(),
+        className: z.string().optional(),
+      }),
+      hasChildren: true,
+      description: 'Flex layout container for arranging child elements',
+    },
+
+    Grid: {
+      props: z.object({
+        columns: z.number().optional(),
+        gap: z.enum(['sm', 'md', 'lg']).optional(),
+        className: z.string().optional(),
+      }),
+      hasChildren: true,
+      description: 'Grid layout for arranging items in columns',
+    },
+
+    Card: {
+      props: z.object({
+        title: z.string().optional(),
+        className: z.string().optional(),
+      }),
+      hasChildren: true,
+      description: 'Container with optional title, border and padding',
+    },
+
+    // Typography
+    Text: {
+      props: z.object({
+        content: z.string(),
+        variant: z.enum(['heading', 'body', 'caption', 'code']).optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Text content with styling variants',
+    },
+
+    // Data Display
+    Metric: {
+      props: z.object({
+        label: z.string(),
+        value: z.union([z.string(), z.number()]),
+        format: z.enum(['number', 'currency', 'percent']).optional(),
+        className: z.string().optional(),
+      }),
+      description:
+        'Display a key metric with label and formatted value (e.g., revenue, users)',
+    },
+
+    Badge: {
+      props: z.object({
+        content: z.string().optional(),
+        variant: z
+          .enum([
+            'default',
+            'secondary',
+            'destructive',
+            'outline',
+            'success',
+            'warning',
+          ])
+          .optional(),
+        className: z.string().optional(),
+      }),
+      hasChildren: true,
+      description: 'Status badge or tag for categorization',
+    },
+
+    Progress: {
+      props: z.object({
+        value: z.number(),
+        max: z.number().optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Progress bar showing completion percentage',
+    },
+
+    Table: {
+      props: z.object({
+        headers: z.array(z.string()).optional(),
+        rows: z.array(z.array(z.union([z.string(), z.number()]))),
+        className: z.string().optional(),
+      }),
+      description: 'Data table with headers and rows',
+    },
+
+    List: {
+      props: z.object({
+        items: z.array(z.string()),
+        ordered: z.boolean().optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Ordered or unordered list of items',
+    },
+
+    // Feedback
+    Alert: {
+      props: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+        variant: z.enum(['default', 'destructive']).optional(),
+      }),
+      description: 'Alert message for important information or errors',
+    },
+
+    // Structure
+    Separator: {
+      props: z.object({
+        orientation: z.enum(['horizontal', 'vertical']).optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Visual divider between content sections',
+    },
+
+    Divider: {
+      props: z.object({
+        orientation: z.enum(['horizontal', 'vertical']).optional(),
+        className: z.string().optional(),
+      }),
+      description:
+        'Visual divider between content sections (alias for Separator)',
+    },
+
+    // Interactive
+    Accordion: {
+      props: z.object({
+        type: z.enum(['single', 'multiple']).optional(),
+      }),
+      hasChildren: true,
+      description: 'Collapsible accordion container',
+    },
+
+    AccordionItem: {
+      props: z.object({
+        value: z.string(),
+        title: z.string(),
+      }),
+      hasChildren: true,
+      description: 'Individual accordion item with trigger and content',
+    },
+
+    Tabs: {
+      props: z.object({
+        defaultValue: z.string().optional(),
+        tabs: z.array(
+          z.object({
+            value: z.string(),
+            label: z.string(),
+          })
+        ),
+      }),
+      hasChildren: true,
+      description: 'Tabbed content container',
+    },
+
+    TabContent: {
+      props: z.object({
+        value: z.string(),
+      }),
+      hasChildren: true,
+      description: 'Content panel for a specific tab',
+    },
+
+    // Actions
+    Button: {
+      props: z.object({
+        label: z.string(),
+        variant: z
+          .enum(['default', 'secondary', 'destructive', 'outline', 'ghost'])
+          .optional(),
+        size: z.enum(['default', 'sm', 'lg', 'icon']).optional(),
+        disabled: z.boolean().optional(),
+        action: z.string().optional(),
+        actionParams: z.record(z.string(), z.unknown()).optional(),
+      }),
+      description:
+        'Clickable button that can trigger actions. Use action/actionParams to call backend functions.',
+    },
+
+    ActionButton: {
+      props: z.object({
+        label: z.string(),
+        action: z.string(),
+        args: z.record(z.string(), z.unknown()).optional(),
+        variant: z
+          .enum(['default', 'secondary', 'destructive', 'outline', 'ghost'])
+          .optional(),
+        size: z.enum(['default', 'sm', 'lg', 'icon']).optional(),
+        className: z.string().optional(),
+      }),
+      description:
+        'Button that triggers a frontend tool call directly without LLM roundtrip',
+    },
+
+    // Form Elements
+    Input: {
+      props: z.object({
+        label: z.string().optional(),
+        placeholder: z.string().optional(),
+        type: z.enum(['text', 'email', 'password', 'number', 'tel']).optional(),
+        valuePath: z.string(),
+      }),
+      description: 'Text input field with optional label',
+    },
+
+    Checkbox: {
+      props: z.object({
+        label: z.string().optional(),
+        valuePath: z.string(),
+        defaultChecked: z.boolean().optional(),
+      }),
+      description: 'Checkbox input with label',
+    },
+
+    Select: {
+      props: z.object({
+        placeholder: z.string().optional(),
+        valuePath: z.string(),
+        options: z.array(
+          z.object({
+            value: z.string(),
+            label: z.string(),
+          })
+        ),
+      }),
+      description: 'Dropdown select input',
+    },
+
+    // Display
+    Avatar: {
+      props: z.object({
+        src: z.string().optional(),
+        alt: z.string().optional(),
+        fallback: z.string(),
+      }),
+      description: 'User avatar with image and fallback initials',
+    },
+
+    Skeleton: {
+      props: z.object({
+        width: z.string().optional(),
+        height: z.string().optional(),
+        className: z.string().optional(),
+      }),
+      description: 'Loading placeholder skeleton',
+    },
+  },
+})
+
+export type CatalogComponentProps = typeof catalog extends {
+  components: infer C
+}
+  ? {
+      [K in keyof C]: C[K] extends { props: infer P }
+        ? z.infer<P extends z.ZodType ? P : never>
+        : never
+    }
+  : never

package/src/plugins/generative-ui/component.tsx

@@ -1,23 +1,109 @@
 'use client'
 
 import { GenerativeUI } from '@/components/ui/generative-ui'
+import { cn } from '@/lib/utils'
 import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown'
-import { FC, useMemo } from 'react'
-import { PluginLoadingState } from '../components/PluginLoadingState'
+import { FC, useEffect, useMemo, useState } from 'react'
+import { MacOSWindowFrame } from '../components/MacOSWindowFrame'
 
 const loadingMessages = [
-  'Preparing your data...',
-  'Building your view...',
-  'Generating results...',
-  'Loading content...',
-  'Fetching information...',
-  'Processing your request...',
-  'Almost ready...',
-  'Setting things up...',
+  // Crafting & Creating
+  'Arranging pixels with care...',
+  'Brewing something beautiful...',
+  'Crafting your masterpiece...',
+  'Painting with data...',
+  'Weaving digital magic...',
+  'Assembling the good stuff...',
+  'Polishing the details...',
+  'Putting the finishing touches...',
+  // Cooking & Food
+  'Simmering the results...',
+  'Letting the data marinate...',
+  'Adding a pinch of style...',
+  'Fresh out of the oven soon...',
+  'Whisking up your view...',
+  // Nature & Growth
+  'Growing your garden of data...',
+  'Watching the seeds sprout...',
+  'Letting things bloom...',
+  'Nature is taking its course...',
+  // Space & Magic
+  'Consulting the stars...',
+  'Channeling cosmic energy...',
+  'Summoning the results...',
+  'Waving the magic wand...',
+  'Sprinkling some stardust...',
+  'Aligning the planets...',
+  // Building & Engineering
+  'Tightening the bolts...',
+  'Connecting the dots...',
+  'Stacking the blocks...',
+  'Laying the foundation...',
+  'Raising the scaffolding...',
+  // Playful & Cute
+  'Herding the pixels...',
+  'Teaching data to dance...',
+  'Convincing bits to cooperate...',
+  'Giving electrons a pep talk...',
+  'Wrangling the numbers...',
+  'Coaxing the results out...',
+  'Almost there, pinky promise...',
+  'Good things take a moment...',
+  'Worth the wait...',
+  'Patience, grasshopper...',
+  'Hold tight...',
+  'Doing the thing...',
+  // Abstract & Poetic
+  'Folding space and time...',
+  'Untangling the threads...',
+  'Finding the signal...',
+  'Distilling the essence...',
+  'Turning chaos into order...',
+  'Making sense of it all...',
+  // Confident & Reassuring
+  'This is going to be good...',
+  "You're gonna love this...",
+  'Something nice is coming...',
+  'Just a heartbeat away...',
 ]
 
-function getRandomLoadingMessage() {
-  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)]
+function getRandomStartIndex() {
+  return Math.floor(Math.random() * loadingMessages.length)
+}
+
+const CyclingLoadingMessage: FC = () => {
+  const [index, setIndex] = useState(getRandomStartIndex)
+  const [isVisible, setIsVisible] = useState(true)
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined
+    const interval = setInterval(() => {
+      // Fade out
+      setIsVisible(false)
+
+      // After fade out, change message and fade in
+      timeoutId = setTimeout(() => {
+        setIndex((prev) => (prev + 1) % loadingMessages.length)
+        setIsVisible(true)
+      }, 200)
+    }, 2000)
+
+    return () => {
+      clearInterval(interval)
+      if (timeoutId) clearTimeout(timeoutId)
+    }
+  }, [])
+
+  return (
+    <span
+      className={cn(
+        'shimmer text-muted-foreground text-sm transition-opacity duration-200',
+        isVisible ? 'opacity-100' : 'opacity-0'
+      )}
+    >
+      {loadingMessages[index]}
+    </span>
+  )
 }
 
 export const GenerativeUIRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
@@ -39,18 +125,23 @@ export const GenerativeUIRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
     }
   }, [code])
 
-  // Memoize the loading message so it doesn't change on every render
-  const loadingMessage = useMemo(() => getRandomLoadingMessage(), [])
-
-  // Show loading shimmer while JSON is incomplete/streaming
+  // Show loading state while JSON is incomplete/streaming
   if (!content) {
-    return <PluginLoadingState text={loadingMessage} />
+    return (
+      <MacOSWindowFrame>
+        <div className="bg-background flex min-h-[400px] items-center justify-center">
+          <CyclingLoadingMessage />
+        </div>
+      </MacOSWindowFrame>
+    )
   }
 
-  // Render without outer border - the Card component inside provides the border
+  // Render with macOS-style window frame
   return (
-    <div className="overflow-hidden after:hidden">
-      <GenerativeUI content={content} />
-    </div>
+    <MacOSWindowFrame>
+      <div className="p-4">
+        <GenerativeUI content={content} />
+      </div>
+    </MacOSWindowFrame>
   )
 }