inconvo 1.3.0 → 1.5.0

package/README.md

@@ -20,6 +20,8 @@ Options:
 
 By default the installer writes everything under `src/`, including the tool components and their supporting `src/lib/inconvo/types.ts`. It also installs external dependencies such as `recharts` and `@tanstack/react-table` unless you opt out with `--skip-install`.
 
+After the files are copied, the CLI attempts to update `src/components/assistant-ui/thread.tsx` by importing `InconvoTools` and rendering it inside `ThreadPrimitive.Root`. If the file is missing or has been customized heavily, you'll see a warning and can complete the insertion manually.
+
 ## Development
 
 ```bash

package/dist/commands/add.js

@@ -4,6 +4,7 @@ import fs from "node:fs/promises";
 import { logger } from "../lib/logger.js";
 import { confirmPrompt } from "../lib/prompt.js";
 import { installDependencies } from "../lib/install-dependencies.js";
+import { ensureThreadHasTools } from "../lib/thread-injector.js";
 import { componentPacks, getPack } from "../templates/packs.js";
 export const addCommand = new Command()
     .name("add")
@@ -70,6 +71,7 @@ export const addCommand = new Command()
     if (replaced.size) {
         logger.info(`Overwrote ${replaced.size} file(s).`);
     }
+    await ensureThreadHasTools(cwd);
     if (pack.dependencies) {
         const depList = Object.entries(pack.dependencies).map(([name, version]) => `${name}@${version}`);
         if (!depList.length)

package/dist/lib/thread-injector.js

@@ -0,0 +1,86 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { logger } from "./logger.js";
+const TOOLS_IMPORT = `import { InconvoTools } from "./tools/inconvo-tools";`;
+const THREAD_PATH = ["src", "components", "assistant-ui", "thread.tsx"];
+export async function ensureThreadHasTools(projectRoot) {
+    const threadPath = path.join(projectRoot, ...THREAD_PATH);
+    if (!(await fileExists(threadPath))) {
+        logger.warn(`Could not find ${path.relative(projectRoot, threadPath)}. Skipping thread update.`);
+        return;
+    }
+    let content = await fs.readFile(threadPath, "utf8");
+    let updated = false;
+    if (!hasToolsImport(content)) {
+        content = injectImport(content);
+        updated = true;
+    }
+    if (!content.includes("<InconvoTools")) {
+        const nextContent = injectComponentUsage(content);
+        if (nextContent) {
+            content = nextContent;
+            updated = true;
+        }
+        else {
+            logger.warn("Could not locate </ThreadPrimitive.Root> in thread.tsx. Please insert <InconvoTools /> manually.");
+        }
+    }
+    if (updated) {
+        await fs.writeFile(threadPath, content, "utf8");
+        logger.success("Updated thread component to render <InconvoTools />.");
+    }
+    else {
+        logger.info("Thread component already renders <InconvoTools />.");
+    }
+}
+function hasToolsImport(content) {
+    const namedImportRegex = /import\s+{[^}]*InconvoTools[^}]*}\s+from\s+["'][^"']+["']/;
+    const defaultImportRegex = /import\s+InconvoTools\s+from\s+["'][^"']+["']/;
+    return (namedImportRegex.test(content) || defaultImportRegex.test(content));
+}
+function injectImport(content) {
+    const lines = content.split("\n");
+    let lastImportIndex = -1;
+    for (let i = 0; i < lines.length; i++) {
+        if (lines[i].startsWith("import ")) {
+            lastImportIndex = i;
+        }
+    }
+    if (lastImportIndex >= 0) {
+        lines.splice(lastImportIndex + 1, 0, TOOLS_IMPORT);
+    }
+    else {
+        lines.unshift(TOOLS_IMPORT);
+    }
+    return lines.join("\n");
+}
+function injectComponentUsage(content) {
+    const lines = content.split("\n");
+    const rootIndex = lines.findIndex((line) => line.includes("<ThreadPrimitive.Root"));
+    if (rootIndex === -1) {
+        return null;
+    }
+    let insertIndex = rootIndex + 1;
+    for (let i = rootIndex; i < lines.length; i++) {
+        if (lines[i].includes(">")) {
+            insertIndex = i + 1;
+            break;
+        }
+    }
+    const baseIndent = lines[rootIndex].match(/^\s*/)?.[0] ?? "";
+    const componentLine = `${baseIndent}  <InconvoTools />`;
+    lines.splice(insertIndex, 0, componentLine);
+    return lines.join("\n");
+}
+async function fileExists(target) {
+    try {
+        await fs.stat(target);
+        return true;
+    }
+    catch (error) {
+        if (error && error.code === "ENOENT") {
+            return false;
+        }
+        throw error;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inconvo",
-  "version": "1.3.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)";
-  });
-};