@gram-ai/elements 1.25.2 → 1.26.1

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

@@ -0,0 +1,148 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FC } from 'react'
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  TooltipProps,
+} from 'recharts'
+
+const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
+  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">
+      <span className="font-medium">
+        {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)',
+]
+
+interface DataPoint {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface PieChartProps {
+  title?: string
+  data: DataPoint[]
+  showLabels?: boolean
+  showLegend?: boolean
+  className?: string
+}
+
+export const PieChart: FC<PieChartProps> = ({
+  title,
+  data,
+  showLabels = true,
+  showLegend = true,
+  className,
+}) => {
+  // Transform data to use 'name' for Recharts
+  const chartData = data.map((d) => ({
+    name: d.label,
+    value: d.value,
+    color: d.color,
+  }))
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {title && (
+        <h3 className="text-foreground text-sm font-medium">{title}</h3>
+      )}
+      <div className="h-[320px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsPieChart
+            margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+          >
+            <Pie
+              data={chartData}
+              cx="50%"
+              cy="45%"
+              innerRadius={0}
+              outerRadius={80}
+              paddingAngle={2}
+              dataKey="value"
+              label={
+                showLabels
+                  ? ({
+                      name,
+                      percent,
+                      cx,
+                      cy,
+                      midAngle,
+                      outerRadius,
+                    }: {
+                      name?: string
+                      percent?: number
+                      cx?: number
+                      cy?: number
+                      midAngle?: number
+                      outerRadius?: number
+                    }) => {
+                      const RADIAN = Math.PI / 180
+                      const radius = (outerRadius ?? 80) + 25
+                      const x =
+                        (cx ?? 0) +
+                        radius * Math.cos(-((midAngle ?? 0) * RADIAN))
+                      const y =
+                        (cy ?? 0) +
+                        radius * Math.sin(-((midAngle ?? 0) * RADIAN))
+                      return (
+                        <text
+                          x={x}
+                          y={y}
+                          fill="var(--foreground)"
+                          textAnchor={x > (cx ?? 0) ? 'start' : 'end'}
+                          dominantBaseline="central"
+                          fontSize={12}
+                        >
+                          {`${name ?? ''} (${((percent ?? 0) * 100).toFixed(0)}%)`}
+                        </text>
+                      )
+                    }
+                  : undefined
+              }
+              labelLine={showLabels}
+              isAnimationActive={false}
+            >
+              {chartData.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={entry.color || COLORS[index % COLORS.length]}
+                />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltip />} />
+            {showLegend && (
+              <Legend
+                verticalAlign="bottom"
+                wrapperStyle={{ color: 'var(--foreground)', paddingTop: 20 }}
+                formatter={(value) => (
+                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                )}
+              />
+            )}
+          </RechartsPieChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,105 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { FC } from 'react'
+import {
+  RadarChart as RechartsRadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  TooltipProps,
+} from 'recharts'
+
+const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => {
+  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">
+      <span className="font-medium">
+        {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)',
+]
+
+interface DataPoint {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface RadarChartProps {
+  title?: string
+  data: DataPoint[]
+  showLegend?: boolean
+  className?: string
+}
+
+export const RadarChart: FC<RadarChartProps> = ({
+  title,
+  data,
+  showLegend = false,
+  className,
+}) => {
+  // Transform data for Recharts (uses 'subject' for labels)
+  const chartData = data.map((d) => ({ subject: d.label, value: d.value }))
+
+  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%">
+          <RechartsRadarChart
+            data={chartData}
+            cx="50%"
+            cy="50%"
+            outerRadius="80%"
+          >
+            <PolarGrid stroke="var(--border)" />
+            <PolarAngleAxis
+              dataKey="subject"
+              tick={{ fill: 'var(--foreground)', fontSize: 12 }}
+            />
+            <PolarRadiusAxis
+              tick={{ fill: 'var(--foreground)', fontSize: 10 }}
+              axisLine={{ stroke: 'var(--border)' }}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            {showLegend && (
+              <Legend
+                wrapperStyle={{ color: 'var(--foreground)' }}
+                formatter={(value) => (
+                  <span style={{ color: 'var(--foreground)' }}>{value}</span>
+                )}
+              />
+            )}
+            <Radar
+              name="Value"
+              dataKey="value"
+              stroke={COLORS[0]}
+              fill={COLORS[0]}
+              fillOpacity={0.3}
+              isAnimationActive={false}
+            />
+          </RechartsRadarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

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>
   )
 }