inconvo 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inconvo",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "CLI for installing Inconvo assistant-ui tool components into any project.",
   "license": "MIT",
   "type": "module",

package/templates/assistant-ui/src/components/assistant-ui/tools/inconvo-chart.tsx

@@ -1,188 +1,75 @@
 "use client";
 
-import { useMemo, type ReactNode } from "react";
-import {
-  ResponsiveContainer,
-  LineChart as RechartsLineChart,
-  Line,
-  BarChart as RechartsBarChart,
-  Bar,
-  CartesianGrid,
-  Tooltip,
-  XAxis,
-  YAxis,
-  Label,
-  Legend,
-} from "recharts";
+import { useEffect, useMemo, useState } from "react";
+import { VegaEmbed } from "react-vega";
+import type { VisualizationSpec } from "vega-embed";
 
-import type { InconvoChartData, InconvoChartType } from "~/lib/inconvo/types";
-import { buildChartPalette } from "~/components/assistant-ui/tools/inconvo-chart-colors";
+import type {
+  InconvoChartData,
+  InconvoChartType,
+  InconvoChartSpec,
+} from "~/lib/inconvo/types";
 
 interface InconvoChartProps {
-  data: InconvoChartData;
-  variant: InconvoChartType;
+  data?: InconvoChartData;
+  spec?: InconvoChartSpec;
+  variant?: InconvoChartType;
   xLabel?: string;
   yLabel?: string;
   title?: string;
 }
 
-const ChartScaffold = ({
-  children,
-  axisColor,
-  textColor,
-  xLabel,
-  yLabel,
-  labelCount,
-}: {
-  children: ReactNode;
-  axisColor: string;
-  textColor: string;
-  xLabel?: string;
-  yLabel?: string;
-  labelCount: number;
-}) => (
-  <>
-    <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
-    <XAxis
-      dataKey="name"
-      stroke={axisColor}
-      tick={{ fill: axisColor, fontSize: 12 }}
-      angle={-30}
-      textAnchor="end"
-      interval={labelCount > 12 ? "preserveStartEnd" : 0}
-    >
-      {xLabel ? (
-        <Label
-          position="bottom"
-          offset={24}
-          style={{
-            fill: axisColor,
-            textAnchor: "middle",
-          }}
-          value={xLabel}
-        />
-      ) : null}
-    </XAxis>
-    <YAxis width={80} stroke={axisColor} tick={{ fill: axisColor, fontSize: 12 }}>
-      {yLabel ? (
-        <Label
-          angle={-90}
-          position="insideLeft"
-          style={{
-            fill: axisColor,
-            textAnchor: "middle",
-          }}
-          value={yLabel}
-        />
-      ) : null}
-    </YAxis>
-    <Tooltip
-      contentStyle={{
-        backgroundColor: "var(--card)",
-        border: "1px solid var(--border)",
-        borderRadius: 8,
-        color: textColor,
-      }}
-      labelStyle={{
-        color: textColor,
-        fontWeight: 600,
-      }}
-    />
-    <Legend
-      verticalAlign="top"
-      align="right"
-      wrapperStyle={{
-        color: axisColor,
-        paddingBottom: "4px",
-      }}
-    />
-    {children}
-  </>
-);
+export const InconvoChart = ({ spec: providedSpec }: InconvoChartProps) => {
+  const [error, setError] = useState<string | null>(null);
 
-export const InconvoChart = ({
-  data,
-  variant,
-  xLabel,
-  yLabel,
-}: InconvoChartProps) => {
-  const chartData = useMemo(() => {
-    return data.labels.map((label, index) => {
-      const row: { name: string; [key: string]: string | number } = {
-        name: label,
-      };
-      data.datasets.forEach((dataset) => {
-        row[dataset.name] = dataset.values[index] ?? 0;
-      });
-      return row;
-    });
-  }, [data]);
+  const resolvedSpec = useMemo<VisualizationSpec | null>(() => {
+    if (providedSpec) {
+      return {
+        $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+        background: "transparent",
+        autosize: { type: "fit", contains: "padding" },
+        width: "container",
+        ...providedSpec,
+      } as VisualizationSpec;
+    }
 
-  const palette = useMemo(
-    () => buildChartPalette(data.datasets.length),
-    [data.datasets.length],
-  );
+    return null;
+  }, [providedSpec]);
 
-  const axisColor = "var(--muted-foreground)";
-  const textColor = "var(--foreground)";
-  const margins = { top: 20, right: 30, bottom: xLabel ? 80 : 40, left: 20 };
+  useEffect(() => {
+    setError(null);
+  }, [resolvedSpec]);
 
-  const renderLines = () =>
-    data.datasets.map((dataset, index) => {
-      const stroke = palette[index] ?? "var(--chart-series-primary)";
-      return (
-        <Line
-          key={dataset.name}
-          type="monotone"
-          dataKey={dataset.name}
-          stroke={stroke}
-          strokeWidth={2}
-          dot={{ r: 3, strokeWidth: 2, stroke, fill: "var(--card)" }}
-          activeDot={{ r: 5, strokeWidth: 2, stroke, fill: stroke }}
-        />
-      );
-    });
+  const handleError = (err: unknown) => {
+    const message = err instanceof Error ? err.message : String(err);
+    console.error("Vega-Lite render error:", err);
+    setError(message);
+  };
 
-  const renderBars = () =>
-    data.datasets.map((dataset, index) => (
-      <Bar
-        key={dataset.name}
-        dataKey={dataset.name}
-        fill={palette[index] ?? "var(--chart-series-primary)"}
-        radius={[4, 4, 0, 0]}
-        maxBarSize={48}
-      />
-    ));
+  if (!resolvedSpec) {
+    return (
+      <div className="text-sm text-muted-foreground">
+        No chart data provided.
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-sm text-red-500">
+        Failed to render chart: {error}
+      </div>
+    );
+  }
 
   return (
     <div className="flex w-full flex-col gap-4 text-foreground">
-      <ResponsiveContainer width="100%" height={400}>
-        {variant === "line" ? (
-          <RechartsLineChart data={chartData} margin={margins}>
-            <ChartScaffold
-              axisColor={axisColor}
-              textColor={textColor}
-              xLabel={xLabel}
-              yLabel={yLabel}
-              labelCount={data.labels.length}
-            >
-              {renderLines()}
-            </ChartScaffold>
-          </RechartsLineChart>
-        ) : (
-          <RechartsBarChart data={chartData} margin={margins}>
-            <ChartScaffold
-              axisColor={axisColor}
-              textColor={textColor}
-              xLabel={xLabel}
-              yLabel={yLabel}
-              labelCount={data.labels.length}
-            >
-              {renderBars()}
-            </ChartScaffold>
-          </RechartsBarChart>
-        )}
-      </ResponsiveContainer>
+      <VegaEmbed
+        spec={resolvedSpec}
+        options={{ actions: false }}
+        onError={handleError}
+        style={{ width: "100%" }}
+      />
     </div>
   );
 };

package/templates/assistant-ui/src/components/assistant-ui/tools/inconvo-chart-colors.ts

@@ -1,15 +0,0 @@
-const chartColorVars = [
-  "var(--chart-1)",
-  "var(--chart-2)",
-  "var(--chart-3)",
-  "var(--chart-4)",
-  "var(--chart-5)",
-];
-
-export const buildChartPalette = (seriesCount: number) => {
-  if (seriesCount <= 0) return [];
-  return Array.from({ length: seriesCount }, (_, index) => {
-    const colorIndex = index % chartColorVars.length;
-    return chartColorVars[colorIndex] ?? "var(--chart-series-primary)";
-  });
-};