@gram-ai/elements 1.25.2 → 1.26.0

package/src/plugins/chart/component.tsx

@@ -1,149 +1,103 @@
 'use client'
 
 import { useDensity } from '@/hooks/useDensity'
-import { useRadius } from '@/hooks/useRadius'
 import { cn } from '@/lib/utils'
+import { isJsonRenderTree, type JsonRenderNode } from '@/lib/generative-ui'
 import { SyntaxHighlighterProps } from '@assistant-ui/react-markdown'
 import { AlertCircleIcon } from 'lucide-react'
-import { FC, useEffect, useMemo, useRef, useState } from 'react'
-import { parse, View, Warn } from 'vega'
-import { expressionInterpreter } from 'vega-interpreter'
+import { FC, useMemo } from 'react'
+import { MacOSWindowFrame } from '../components/MacOSWindowFrame'
+import { PluginLoadingState } from '../components/PluginLoadingState'
+
+// Import all chart components
+import {
+  BarChart,
+  LineChart,
+  AreaChart,
+  PieChart,
+  DonutChart,
+  ScatterChart,
+  RadarChart,
+} from './ui'
+
+const loadingMessages = [
+  'Rendering chart...',
+  'Visualizing data...',
+  'Building chart...',
+  'Processing data...',
+]
+
+function getRandomLoadingMessage() {
+  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)]
+}
+
+/**
+ * Chart components registry
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const chartComponents: Record<string, FC<any>> = {
+  BarChart,
+  LineChart,
+  AreaChart,
+  PieChart,
+  DonutChart,
+  ScatterChart,
+  RadarChart,
+}
+
+/**
+ * Render a chart node from json-render tree
+ */
+function renderChartNode(node: JsonRenderNode): React.ReactNode {
+  const Component = chartComponents[node.type]
+
+  if (!Component) {
+    return (
+      <div className="text-muted-foreground flex items-center gap-2 text-sm">
+        <AlertCircleIcon className="size-4" />
+        <span>Unknown chart type: {node.type}</span>
+      </div>
+    )
+  }
+
+  return <Component {...(node.props ?? {})} />
+}
 
 export const ChartRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const viewRef = useRef<View | null>(null)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [chartReady, setChartReady] = useState(false)
-  const [containerWidth, setContainerWidth] = useState(0)
-  const r = useRadius()
   const d = useDensity()
 
-  // Track container width so the Vega view can fill available space
-  useEffect(() => {
-    const el = wrapperRef.current
-    if (!el) return
-    const ro = new ResizeObserver(([entry]) => {
-      setContainerWidth(entry.contentRect.width)
-    })
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [])
-
-  // Parse and validate JSON in useMemo - only recomputes when code changes
-  const parsedSpec = useMemo(() => {
+  // Parse JSON - returns null if invalid (still streaming)
+  const content = useMemo(() => {
     const trimmedCode = code.trim()
     if (!trimmedCode) return null
 
     try {
-      const spec = JSON.parse(trimmedCode) as Record<string, unknown>
-
-      // Validate that data array exists and has at least one record with values
-      const dataArray = spec.data as Array<{ values?: unknown[] }> | undefined
-      if (!dataArray?.length) return null
-
-      const hasValidData = dataArray.some(
-        (d) => Array.isArray(d.values) && d.values.length > 0
-      )
-      if (!hasValidData) return null
-
-      return spec
+      const parsed = JSON.parse(trimmedCode)
+      // Validate it has a type field (basic json-render structure)
+      if (!isJsonRenderTree(parsed)) {
+        return null
+      }
+      return parsed
     } catch {
+      // JSON is incomplete (still streaming) - return null to show loading state
       return null
     }
   }, [code])
 
-  // Only render when we have valid JSON
-  const shouldRender = parsedSpec !== null
-
-  // Build the spec with autosize and width derived from the container
-  const sizedSpec = useMemo(() => {
-    if (!parsedSpec || containerWidth === 0) return null
-    // Padding used by the outer wrapper (p-lg ≈ 24px each side)
-    const padding = 48
-    const availableWidth = Math.max(containerWidth - padding, 100)
-    return {
-      ...parsedSpec,
-      width: availableWidth,
-      autosize: { type: 'fit' as const, contains: 'padding' as const },
-    }
-  }, [parsedSpec, containerWidth])
-
-  useEffect(() => {
-    if (!containerRef.current || !shouldRender || !sizedSpec) {
-      return
-    }
-
-    setError(null)
-    setChartReady(false)
-
-    const runChart = async () => {
-      try {
-        // Clean up any existing view
-        if (viewRef.current) {
-          viewRef.current.finalize()
-          viewRef.current = null
-        }
-
-        const chart = parse(sizedSpec, undefined, { ast: true })
-        const view = new View(chart, {
-          container: containerRef.current ?? undefined,
-          renderer: 'svg',
-          hover: true,
-          logLevel: Warn,
-          expr: expressionInterpreter,
-        })
-        viewRef.current = view
-
-        await view.runAsync()
-        setChartReady(true)
-      } catch (err) {
-        console.error('Failed to render chart:', err)
-        setError(err instanceof Error ? err.message : 'Failed to render chart')
-      }
-    }
+  // Memoize the loading message so it doesn't change on every render
+  const loadingMessage = useMemo(() => getRandomLoadingMessage(), [])
 
-    runChart()
-
-    return () => {
-      if (viewRef.current) {
-        viewRef.current.finalize()
-        viewRef.current = null
-      }
-    }
-  }, [shouldRender, sizedSpec])
-
-  const showLoading = !chartReady && !error
+  // Show loading shimmer while JSON is incomplete/streaming
+  if (!content) {
+    return <PluginLoadingState text={loadingMessage} />
+  }
 
+  // Render with macOS-style window frame
   return (
-    <div
-      ref={wrapperRef}
-      className={cn(
-        // the after:hidden is to prevent assistant-ui from showing its default code block loading indicator
-        'border-border relative min-h-[400px] w-full overflow-hidden border after:hidden',
-        r('lg'),
-        showLoading ? '' : d('p-lg')
-      )}
-    >
-      {showLoading && (
-        <div className="bg-muted absolute inset-0 z-10 flex items-center justify-center">
-          <span className="shimmer text-muted-foreground text-sm">
-            Rendering chart...
-          </span>
-        </div>
-      )}
-
-      {error && (
-        <div className="bg-background absolute inset-0 z-10 flex items-center justify-center gap-2 text-rose-500">
-          <AlertCircleIcon name="alert-circle" className="h-4 w-4" />
-          {error}
-        </div>
-      )}
-
-      <div
-        ref={containerRef}
-        className={error || showLoading ? 'invisible' : 'block'}
-      />
-    </div>
+    <MacOSWindowFrame>
+      <div className={cn('bg-card w-full', d('p-lg'))}>
+        {renderChartNode(content)}
+      </div>
+    </MacOSWindowFrame>
   )
 }

package/src/plugins/chart/index.ts

@@ -2,108 +2,160 @@ import { Plugin } from '@/types/plugins'
 import { ChartRenderer } from './component'
 
 /**
- * This plugin renders Vega charts.
+ * This plugin renders charts using json-render format.
  */
 export const chart: Plugin = {
-  language: 'vega',
-  prompt: `When a user requests a chart or visualization, respond with a valid Vega specification (https://vega.github.io/vega/) in a code block annotated with the language identifier 'vega'.
+  language: 'chart',
+  prompt: `WHEN TO USE CHARTS:
+Create charts to visualize numerical data when it helps users understand patterns, trends, or comparisons. Use the 'chart' code block format.
 
 CRITICAL JSON REQUIREMENTS:
 - The code block MUST contain ONLY valid, parseable JSON
 - NO comments (no // or /* */ anywhere)
 - NO trailing commas
 - Use double quotes for all strings and keys
-- NO text before or after the JSON object
 - The JSON must start with { and end with }
 
+AVAILABLE CHART TYPES:
+
+BarChart - Compare categorical data
+  props: {
+    title?: string,
+    data: [{ label: string, value: number, color?: string }],
+    layout?: "vertical" | "horizontal",
+    showGrid?: boolean,
+    showLegend?: boolean
+  }
+
+LineChart - Show trends over time
+  props: {
+    title?: string,
+    data: [{ label: string, [series]: number }],
+    series?: string[],
+    showGrid?: boolean,
+    showLegend?: boolean,
+    showDots?: boolean,
+    curved?: boolean
+  }
+
+AreaChart - Show volume over time
+  props: {
+    title?: string,
+    data: [{ label: string, [series]: number }],
+    series?: string[],
+    stacked?: boolean,
+    showGrid?: boolean,
+    showLegend?: boolean
+  }
+
+PieChart - Show proportions (2-6 categories)
+  props: {
+    title?: string,
+    data: [{ label: string, value: number, color?: string }],
+    showLabels?: boolean,
+    showLegend?: boolean
+  }
+
+DonutChart - Proportions with center metric
+  props: {
+    title?: string,
+    data: [{ label: string, value: number, color?: string }],
+    showLabels?: boolean,
+    showLegend?: boolean,
+    innerLabel?: string,
+    innerValue?: string | number
+  }
+
+ScatterChart - Show correlation
+  props: {
+    title?: string,
+    data: [{ x: number, y: number, label?: string, size?: number, color?: string }],
+    xLabel?: string,
+    yLabel?: string,
+    showGrid?: boolean
+  }
+
+RadarChart - Compare multiple attributes (3-8 dimensions)
+  props: {
+    title?: string,
+    data: [{ label: string, value: number }],
+    showLegend?: boolean
+  }
+
+STRUCTURE:
+{
+  "type": "ChartType",
+  "props": { ... }
+}
+
+EXAMPLE - BAR CHART:
+{
+  "type": "BarChart",
+  "props": {
+    "title": "Sales by Region",
+    "data": [
+      { "label": "North", "value": 120000 },
+      { "label": "South", "value": 98000 },
+      { "label": "East", "value": 145000 },
+      { "label": "West", "value": 87000 }
+    ]
+  }
+}
+
+EXAMPLE - LINE CHART (multiple series):
+{
+  "type": "LineChart",
+  "props": {
+    "title": "Monthly Revenue",
+    "data": [
+      { "label": "Jan", "revenue": 45000, "costs": 32000 },
+      { "label": "Feb", "revenue": 52000, "costs": 35000 },
+      { "label": "Mar", "revenue": 61000, "costs": 38000 }
+    ],
+    "series": ["revenue", "costs"]
+  }
+}
+
+EXAMPLE - PIE CHART:
+{
+  "type": "PieChart",
+  "props": {
+    "title": "Market Share",
+    "data": [
+      { "label": "Product A", "value": 45 },
+      { "label": "Product B", "value": 30 },
+      { "label": "Product C", "value": 25 }
+    ]
+  }
+}
+
+EXAMPLE - DONUT CHART:
+{
+  "type": "DonutChart",
+  "props": {
+    "title": "Budget Allocation",
+    "data": [
+      { "label": "Marketing", "value": 35 },
+      { "label": "Engineering", "value": 45 },
+      { "label": "Operations", "value": 20 }
+    ],
+    "innerValue": "$1.2M",
+    "innerLabel": "Total Budget"
+  }
+}
+
+CHART SELECTION GUIDE:
+- Comparing categories → BarChart
+- Trends over time → LineChart
+- Volume/magnitude over time → AreaChart
+- Part-to-whole (2-6 items) → PieChart or DonutChart
+- Correlation between variables → ScatterChart
+- Multi-dimensional comparison → RadarChart
+
 CONTENT GUIDELINES:
 - Outside the code block, describe trends and insights found in the data
 - Do not describe visual properties or technical implementation details
-- Do not mention "Vega" or other technical terms - this is user-facing
-
-The Vega spec will be parsed with JSON.parse() - if it fails, the chart will error. Ensure strict JSON validity.
-
-REQUIRED STRUCTURE:
-Every spec needs: "$schema", "width", "height", "data", "scales", "marks". Include "padding" (5 or object) and "axes" for readability.
-Data format:
-{"name": "table", "values": [{"category": "A", "amount": 28}]}
-SCALES - Choose the right type:
-- "band": categorical x-axis (bar charts) - domain from data field, range: "width", padding: 0.1
-- "linear": numerical axes - domain from data field, range: "width"/"height", nice: true
-- "time"/"utc": temporal data
-- "ordinal": for colors use range: {"scheme": "category10"} or range: ["#1f77b4", "#ff7f0e", "#2ca02c"]
-MARKS - Common types:
-- "rect": bar charts (requires x, width, y, y2)
-- "line": time series (requires x, y)
-- "area": filled areas (requires x, y, y2)
-- "symbol": scatter plots (requires x, y)
-CHART PATTERNS:
-Bar: band scale (x) + linear scale (y) + rect marks. Set y2: {"scale": "yscale", "value": 0}
-Line: linear/point scale (x) + linear scale (y) + line mark. Add "interpolate": "monotone"
-Scatter: linear scales (both) + symbol marks
-Area: like line but use area mark with y2: {"scale": "yscale", "value": 0}
-Stacked: add transform [{"type": "stack", "groupby": ["x"], "field": "y"}], use y0/y1 fields
-CRITICAL RULES:
-1. Data must contain at least one record with valid (non-null) values for ALL fields used in scales
-2. ONLY reference fields that actually exist in your data - never use datum.meta, datum.id, or any field not in your values array
-3. Always include y2 for rect/area marks (or bars/areas have zero height)
-4. Use "band" for categories, not "linear"
-5. For position scales use "range": "width" or "height". For color scales NEVER use "range": "category10" - use "range": {"scheme": "category10"} or an array
-6. Match scale/data names exactly between definition and usage
-7. Include "from": {"data": "dataName"} on marks
-8. Add padding to prevent label cutoff
-EXAMPLE: COMPLETE BAR CHART
-{
-  "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "width": 500,
-  "height": 300,
-  "padding": 5,
-  "data": [
-    {
-      "name": "table",
-      "values": [
-        {"category": "A", "amount": 28},
-        {"category": "B", "amount": 55},
-        {"category": "C", "amount": 43}
-      ]
-    }
-  ],
-  "scales": [
-    {
-      "name": "xscale",
-      "type": "band",
-      "domain": {"data": "table", "field": "category"},
-      "range": "width",
-      "padding": 0.1
-    },
-    {
-      "name": "yscale",
-      "type": "linear",
-      "domain": {"data": "table", "field": "amount"},
-      "range": "height",
-      "nice": true
-    }
-  ],
-  "axes": [
-    {"scale": "xscale", "orient": "bottom"},
-    {"scale": "yscale", "orient": "left", "title": "Amount"}
-  ],
-  "marks": [
-    {
-      "type": "rect",
-      "from": {"data": "table"},
-      "encode": {
-        "enter": {
-          "x": {"scale": "xscale", "field": "category"},
-          "width": {"scale": "xscale", "band": 1},
-          "y": {"scale": "yscale", "field": "amount"},
-          "y2": {"scale": "yscale", "value": 0},
-          "fill": {"value": "steelblue"}
-        }
-      }
-    }
-  ]
-}`,
+- Focus on what the data means, not how it's displayed`,
   Component: ChartRenderer,
   Header: undefined,
 }

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

@@ -0,0 +1,133 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FC, useMemo } from 'react'
+import {
+  AreaChart as RechartsAreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  TooltipProps,
+} from 'recharts'
+
+const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
+  if (!active || !payload || payload.length === 0) return null
+  return (
+    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1.5 text-xs shadow-sm">
+      {payload.map((entry, index) => (
+        <div key={index} className="flex items-center gap-2">
+          <span
+            className="h-2 w-2 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span>{entry.name}:</span>
+          <span className="font-medium">
+            {typeof entry.value === 'number'
+              ? entry.value.toLocaleString()
+              : entry.value}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+]
+
+interface SeriesDataPoint {
+  label: string
+  [key: string]: string | number
+}
+
+export interface AreaChartProps {
+  title?: string
+  data: SeriesDataPoint[]
+  series?: string[]
+  stacked?: boolean
+  showGrid?: boolean
+  showLegend?: boolean
+  className?: string
+}
+
+export const AreaChart: FC<AreaChartProps> = ({
+  title,
+  data,
+  series,
+  stacked = false,
+  showGrid = true,
+  showLegend = true,
+  className,
+}) => {
+  // Auto-detect series from data keys if not provided
+  const seriesKeys = useMemo(() => {
+    if (series && series.length > 0) return series
+    if (data.length === 0) return []
+    const keys = Object.keys(data[0]).filter((k) => k !== 'label')
+    return keys
+  }, [data, series])
+
+  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%">
+          <RechartsAreaChart
+            data={data}
+            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
+          >
+            {showGrid && (
+              <CartesianGrid
+                strokeDasharray="3 3"
+                className="stroke-muted/30"
+              />
+            )}
+            <XAxis
+              dataKey="label"
+              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+              axisLine={{ stroke: 'var(--border)' }}
+              tickLine={{ stroke: 'var(--border)' }}
+            />
+            <YAxis
+              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+              axisLine={{ stroke: 'var(--border)' }}
+              tickLine={{ stroke: 'var(--border)' }}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            {showLegend && seriesKeys.length > 1 && (
+              <Legend
+                wrapperStyle={{ color: 'var(--foreground)' }}
+                formatter={(value) => (
+                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                )}
+              />
+            )}
+            {seriesKeys.map((key, index) => (
+              <Area
+                key={key}
+                type="monotone"
+                dataKey={key}
+                stackId={stacked ? 'stack' : undefined}
+                stroke={COLORS[index % COLORS.length]}
+                fill={COLORS[index % COLORS.length]}
+                fillOpacity={0.3}
+                isAnimationActive={false}
+              />
+            ))}
+          </RechartsAreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}