@gram-ai/elements 1.27.4 → 1.27.6

package/src/plugins/chart/component.tsx

@@ -1,13 +1,13 @@
-'use client'
+"use client";
 
-import { useDensity } from '@/hooks/useDensity'
-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, useMemo } from 'react'
-import { MacOSWindowFrame } from '../components/MacOSWindowFrame'
-import { PluginLoadingState } from '../components/PluginLoadingState'
+import { useDensity } from "@/hooks/useDensity";
+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, useMemo } from "react";
+import { MacOSWindowFrame } from "../components/MacOSWindowFrame";
+import { PluginLoadingState } from "../components/PluginLoadingState";
 
 // Import all chart components
 import {
@@ -18,17 +18,17 @@ import {
   DonutChart,
   ScatterChart,
   RadarChart,
-} from './ui'
+} from "./ui";
 
 const loadingMessages = [
-  'Rendering chart...',
-  'Visualizing data...',
-  'Building chart...',
-  'Processing data...',
-]
+  "Rendering chart...",
+  "Visualizing data...",
+  "Building chart...",
+  "Processing data...",
+];
 
 function getRandomLoadingMessage() {
-  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)]
+  return loadingMessages[Math.floor(Math.random() * loadingMessages.length)];
 }
 
 /**
@@ -43,61 +43,61 @@ const chartComponents: Record<string, FC<any>> = {
   DonutChart,
   ScatterChart,
   RadarChart,
-}
+};
 
 /**
  * Render a chart node from json-render tree
  */
 function renderChartNode(node: JsonRenderNode): React.ReactNode {
-  const Component = chartComponents[node.type]
+  const Component = chartComponents[node.type];
 
   if (!Component) {
     return (
-      <div className="text-muted-foreground flex items-center gap-2 text-sm">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <AlertCircleIcon className="size-4" />
         <span>Unknown chart type: {node.type}</span>
       </div>
-    )
+    );
   }
 
-  return <Component {...(node.props ?? {})} />
+  return <Component {...(node.props ?? {})} />;
 }
 
 export const ChartRenderer: FC<SyntaxHighlighterProps> = ({ code }) => {
-  const d = useDensity()
+  const d = useDensity();
 
   // Parse JSON - returns null if invalid (still streaming)
   const content = useMemo(() => {
-    const trimmedCode = code.trim()
-    if (!trimmedCode) return null
+    const trimmedCode = code.trim();
+    if (!trimmedCode) return null;
 
     try {
-      const parsed = JSON.parse(trimmedCode)
+      const parsed = JSON.parse(trimmedCode);
       // Validate it has a type field (basic json-render structure)
       if (!isJsonRenderTree(parsed)) {
-        return null
+        return null;
       }
-      return parsed
+      return parsed;
     } catch {
       // JSON is incomplete (still streaming) - return null to show loading state
-      return null
+      return null;
     }
-  }, [code])
+  }, [code]);
 
   // Memoize the loading message so it doesn't change on every render
-  const loadingMessage = useMemo(() => getRandomLoadingMessage(), [])
+  const loadingMessage = useMemo(() => getRandomLoadingMessage(), []);
 
   // Show loading shimmer while JSON is incomplete/streaming
   if (!content) {
-    return <PluginLoadingState text={loadingMessage} />
+    return <PluginLoadingState text={loadingMessage} />;
   }
 
   // Render with macOS-style window frame
   return (
     <MacOSWindowFrame>
-      <div className={cn('bg-card w-full', d('p-lg'))}>
+      <div className={cn("w-full bg-card", d("p-lg"))}>
         {renderChartNode(content)}
       </div>
     </MacOSWindowFrame>
-  )
-}
+  );
+};

package/src/plugins/chart/index.ts

@@ -1,11 +1,11 @@
-import { Plugin } from '@/types/plugins'
-import { ChartRenderer } from './component'
+import { Plugin } from "@/types/plugins";
+import { ChartRenderer } from "./component";
 
 /**
  * This plugin renders charts using json-render format.
  */
 export const chart: Plugin = {
-  language: 'chart',
+  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.
 
@@ -158,4 +158,4 @@ CONTENT GUIDELINES:
 - Focus on what the data means, not how it's displayed`,
   Component: ChartRenderer,
   Header: undefined,
-}
+};

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

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC, useMemo } from 'react'
+import { cn } from "@/lib/utils";
+import { FC, useMemo } from "react";
 import {
   AreaChart as RechartsAreaChart,
   Area,
@@ -12,12 +12,12 @@ import {
   Legend,
   ResponsiveContainer,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
+  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">
+    <div className="rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground shadow-sm">
       {payload.map((entry, index) => (
         <div key={index} className="flex items-center gap-2">
           <span
@@ -26,37 +26,37 @@ const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
           />
           <span>{entry.name}:</span>
           <span className="font-medium">
-            {typeof entry.value === 'number'
+            {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)',
-]
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
 
 interface SeriesDataPoint {
-  label: string
-  [key: string]: string | number
+  label: string;
+  [key: string]: string | number;
 }
 
 export interface AreaChartProps {
-  title?: string
-  data: SeriesDataPoint[]
-  series?: string[]
-  stacked?: boolean
-  showGrid?: boolean
-  showLegend?: boolean
-  className?: string
+  title?: string;
+  data: SeriesDataPoint[];
+  series?: string[];
+  stacked?: boolean;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  className?: string;
 }
 
 export const AreaChart: FC<AreaChartProps> = ({
@@ -70,16 +70,16 @@ export const AreaChart: FC<AreaChartProps> = ({
 }) => {
   // 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])
+    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)}>
+    <div className={cn("flex flex-col gap-2", className)}>
       {title && (
-        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
       )}
       <div className="h-[250px] w-full">
         <ResponsiveContainer width="100%" height="100%">
@@ -95,21 +95,21 @@ export const AreaChart: FC<AreaChartProps> = ({
             )}
             <XAxis
               dataKey="label"
-              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
-              axisLine={{ stroke: 'var(--border)' }}
-              tickLine={{ stroke: 'var(--border)' }}
+              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)' }}
+              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)' }}
+                wrapperStyle={{ color: "var(--foreground)" }}
                 formatter={(value) => (
-                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                  <span style={{ color: "var(--foreground)" }}>{value}</span>
                 )}
               />
             )}
@@ -118,7 +118,7 @@ export const AreaChart: FC<AreaChartProps> = ({
                 key={key}
                 type="monotone"
                 dataKey={key}
-                stackId={stacked ? 'stack' : undefined}
+                stackId={stacked ? "stack" : undefined}
                 stroke={COLORS[index % COLORS.length]}
                 fill={COLORS[index % COLORS.length]}
                 fillOpacity={0.3}
@@ -129,5 +129,5 @@ export const AreaChart: FC<AreaChartProps> = ({
         </ResponsiveContainer>
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC } from 'react'
+import { cn } from "@/lib/utils";
+import { FC } from "react";
 import {
   BarChart as RechartsBarChart,
   Bar,
@@ -13,61 +13,61 @@ import {
   Cell,
   ResponsiveContainer,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
-  const value = payload[0]?.value
+  if (!active || !payload || payload.length === 0) return null;
+  const value = payload[0]?.value;
   return (
-    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1 text-xs shadow-sm">
-      {typeof value === 'number' ? value.toLocaleString() : value}
+    <div className="rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground shadow-sm">
+      {typeof value === "number" ? value.toLocaleString() : value}
     </div>
-  )
-}
+  );
+};
 
 const COLORS = [
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
-  'var(--chart-4)',
-  'var(--chart-5)',
-]
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
 
 interface DataPoint {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 export interface BarChartProps {
-  title?: string
-  data: DataPoint[]
-  layout?: 'vertical' | 'horizontal'
-  showGrid?: boolean
-  showLegend?: boolean
-  className?: string
+  title?: string;
+  data: DataPoint[];
+  layout?: "vertical" | "horizontal";
+  showGrid?: boolean;
+  showLegend?: boolean;
+  className?: string;
 }
 
 export const BarChart: FC<BarChartProps> = ({
   title,
   data,
-  layout = 'vertical',
+  layout = "vertical",
   showGrid = true,
   showLegend = false,
   className,
 }) => {
-  const isHorizontal = layout === 'horizontal'
+  const isHorizontal = layout === "horizontal";
 
   return (
-    <div className={cn('flex flex-col gap-2', className)}>
+    <div className={cn("flex flex-col gap-2", className)}>
       {title && (
-        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
       )}
       <div className="h-[250px] w-full">
         <ResponsiveContainer width="100%" height="100%">
           <RechartsBarChart
             data={data}
-            layout={isHorizontal ? 'vertical' : 'horizontal'}
+            layout={isHorizontal ? "vertical" : "horizontal"}
             margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
           >
             {showGrid && (
@@ -80,40 +80,40 @@ export const BarChart: FC<BarChartProps> = ({
               <>
                 <XAxis
                   type="number"
-                  tick={{ fill: 'var(--foreground)', fontSize: 12 }}
-                  axisLine={{ stroke: 'var(--border)' }}
-                  tickLine={{ stroke: 'var(--border)' }}
+                  tick={{ fill: "var(--foreground)", fontSize: 12 }}
+                  axisLine={{ stroke: "var(--border)" }}
+                  tickLine={{ stroke: "var(--border)" }}
                 />
                 <YAxis
                   dataKey="label"
                   type="category"
                   width={80}
-                  tick={{ fill: 'var(--foreground)', fontSize: 12 }}
-                  axisLine={{ stroke: 'var(--border)' }}
-                  tickLine={{ stroke: 'var(--border)' }}
+                  tick={{ fill: "var(--foreground)", fontSize: 12 }}
+                  axisLine={{ stroke: "var(--border)" }}
+                  tickLine={{ stroke: "var(--border)" }}
                 />
               </>
             ) : (
               <>
                 <XAxis
                   dataKey="label"
-                  tick={{ fill: 'var(--foreground)', fontSize: 12 }}
-                  axisLine={{ stroke: 'var(--border)' }}
-                  tickLine={{ stroke: 'var(--border)' }}
+                  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)' }}
+                  tick={{ fill: "var(--foreground)", fontSize: 12 }}
+                  axisLine={{ stroke: "var(--border)" }}
+                  tickLine={{ stroke: "var(--border)" }}
                 />
               </>
             )}
             <Tooltip content={<CustomTooltip />} />
             {showLegend && (
               <Legend
-                wrapperStyle={{ color: 'var(--foreground)' }}
+                wrapperStyle={{ color: "var(--foreground)" }}
                 formatter={(value) => (
-                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                  <span style={{ color: "var(--foreground)" }}>{value}</span>
                 )}
               />
             )}
@@ -133,5 +133,5 @@ export const BarChart: FC<BarChartProps> = ({
         </ResponsiveContainer>
       </div>
     </div>
-  )
-}
+  );
+};

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

@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { cn } from '@/lib/utils'
-import { FC } from 'react'
+import { cn } from "@/lib/utils";
+import { FC } from "react";
 import {
   PieChart as RechartsPieChart,
   Pie,
@@ -10,44 +10,44 @@ import {
   Legend,
   ResponsiveContainer,
   TooltipProps,
-} from 'recharts'
+} from "recharts";
 
 const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
-  if (!active || !payload || payload.length === 0) return null
-  const entry = payload[0]
+  if (!active || !payload || payload.length === 0) return null;
+  const entry = payload[0];
   return (
-    <div className="bg-background text-foreground border-border rounded-md border px-2 py-1 text-xs shadow-sm">
+    <div className="rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground shadow-sm">
       <span className="font-medium">
-        {typeof entry?.value === 'number'
+        {typeof entry?.value === "number"
           ? entry.value.toLocaleString()
           : entry?.value}
       </span>
     </div>
-  )
-}
+  );
+};
 
 const COLORS = [
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
-  'var(--chart-4)',
-  'var(--chart-5)',
-]
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
 
 interface DataPoint {
-  label: string
-  value: number
-  color?: string
+  label: string;
+  value: number;
+  color?: string;
 }
 
 export interface DonutChartProps {
-  title?: string
-  data: DataPoint[]
-  showLabels?: boolean
-  showLegend?: boolean
-  innerLabel?: string
-  innerValue?: string | number
-  className?: string
+  title?: string;
+  data: DataPoint[];
+  showLabels?: boolean;
+  showLegend?: boolean;
+  innerLabel?: string;
+  innerValue?: string | number;
+  className?: string;
 }
 
 export const DonutChart: FC<DonutChartProps> = ({
@@ -64,12 +64,12 @@ export const DonutChart: FC<DonutChartProps> = ({
     name: d.label,
     value: d.value,
     color: d.color,
-  }))
+  }));
 
   return (
-    <div className={cn('flex flex-col gap-2', className)}>
+    <div className={cn("flex flex-col gap-2", className)}>
       {title && (
-        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
       )}
       <div className="relative h-[320px] w-full">
         <ResponsiveContainer width="100%" height="100%">
@@ -94,33 +94,33 @@ export const DonutChart: FC<DonutChartProps> = ({
                       midAngle,
                       outerRadius,
                     }: {
-                      name?: string
-                      percent?: number
-                      cx?: number
-                      cy?: number
-                      midAngle?: number
-                      outerRadius?: number
+                      name?: string;
+                      percent?: number;
+                      cx?: number;
+                      cy?: number;
+                      midAngle?: number;
+                      outerRadius?: number;
                     }) => {
-                      const RADIAN = Math.PI / 180
-                      const radius = (outerRadius ?? 80) + 25
+                      const RADIAN = Math.PI / 180;
+                      const radius = (outerRadius ?? 80) + 25;
                       const x =
                         (cx ?? 0) +
-                        radius * Math.cos(-((midAngle ?? 0) * RADIAN))
+                        radius * Math.cos(-((midAngle ?? 0) * RADIAN));
                       const y =
                         (cy ?? 0) +
-                        radius * Math.sin(-((midAngle ?? 0) * RADIAN))
+                        radius * Math.sin(-((midAngle ?? 0) * RADIAN));
                       return (
                         <text
                           x={x}
                           y={y}
                           fill="var(--foreground)"
-                          textAnchor={x > (cx ?? 0) ? 'start' : 'end'}
+                          textAnchor={x > (cx ?? 0) ? "start" : "end"}
                           dominantBaseline="central"
                           fontSize={12}
                         >
-                          {`${name ?? ''} (${((percent ?? 0) * 100).toFixed(0)}%)`}
+                          {`${name ?? ""} (${((percent ?? 0) * 100).toFixed(0)}%)`}
                         </text>
-                      )
+                      );
                     }
                   : undefined
               }
@@ -138,9 +138,9 @@ export const DonutChart: FC<DonutChartProps> = ({
             {showLegend && (
               <Legend
                 verticalAlign="bottom"
-                wrapperStyle={{ color: 'var(--foreground)', paddingTop: 20 }}
+                wrapperStyle={{ color: "var(--foreground)", paddingTop: 20 }}
                 formatter={(value) => (
-                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                  <span style={{ color: "var(--foreground)" }}>{value}</span>
                 )}
               />
             )}
@@ -150,12 +150,12 @@ export const DonutChart: FC<DonutChartProps> = ({
         {(innerLabel !== undefined || innerValue !== undefined) && (
           <div className="pointer-events-none absolute inset-x-0 top-[45%] flex -translate-y-1/2 flex-col items-center">
             {innerValue !== undefined && (
-              <span className="text-foreground text-2xl font-bold">
+              <span className="text-2xl font-bold text-foreground">
                 {innerValue}
               </span>
             )}
             {innerLabel && (
-              <span className="text-muted-foreground text-xs">
+              <span className="text-xs text-muted-foreground">
                 {innerLabel}
               </span>
             )}
@@ -163,5 +163,5 @@ export const DonutChart: FC<DonutChartProps> = ({
         )}
       </div>
     </div>
-  )
-}
+  );
+};

package/src/plugins/chart/ui/index.ts

@@ -1,7 +1,7 @@
-export { BarChart, type BarChartProps } from './bar-chart'
-export { LineChart, type LineChartProps } from './line-chart'
-export { AreaChart, type AreaChartProps } from './area-chart'
-export { PieChart, type PieChartProps } from './pie-chart'
-export { DonutChart, type DonutChartProps } from './donut-chart'
-export { ScatterChart, type ScatterChartProps } from './scatter-chart'
-export { RadarChart, type RadarChartProps } from './radar-chart'
+export { BarChart, type BarChartProps } from "./bar-chart";
+export { LineChart, type LineChartProps } from "./line-chart";
+export { AreaChart, type AreaChartProps } from "./area-chart";
+export { PieChart, type PieChartProps } from "./pie-chart";
+export { DonutChart, type DonutChartProps } from "./donut-chart";
+export { ScatterChart, type ScatterChartProps } from "./scatter-chart";
+export { RadarChart, type RadarChartProps } from "./radar-chart";