Render an assistant's analysis charts

from vortexify import Agent, AgentCapabilities, Table

agent = Agent(
    prompt=(
        "Answer questions about sales using the available data. "
        "For charts, aggregate to a useful number of rows, wait for analysis "
        "completion, and use generate_chart with columns in that result."
    ),
    context=[Table("shop.orders")],
    capabilities=AgentCapabilities(sql_analysis=True, chart_generation=True),
)

{
  "success": true,
  "chart": {
    "query_id": "ANALYSIS_JOB_ID",
    "name": "Revenue by customer",
    "config": {
      "chartType": "Bar",
      "xKey": "customer_id",
      "yKeys": ["revenue"]
    },
    "row_count": 2
  }
}

[
  {"customer_id": "customer_a", "revenue": 1200.0},
  {"customer_id": "customer_b", "revenue": 850.0}
]

import type { AgentChart } from "@vortexify/react";

export function record(value: unknown): Record<string, unknown> | null {
  return value !== null && typeof value === "object" && !Array.isArray(value)
    ? value as Record<string, unknown>
    : null;
}

export function readChart(value: unknown): AgentChart | null {
  if (typeof value === "string") {
    try { value = JSON.parse(value); } catch { return null; }
  }
  const result = record(value);
  const chart = record(result?.chart);
  const config = record(chart?.config);
  const types = ["Bar", "StackedBar", "GroupedBar", "Line", "MultiLine", "Scatter", "Pie"];
  if (result?.success !== true || !chart || !config
      || typeof chart.query_id !== "string" || !chart.query_id
      || typeof chart.name !== "string"
      || typeof chart.row_count !== "number"
      || chart.row_count < 0 || chart.row_count > 1000
      || !types.includes(String(config.chartType))
      || typeof config.xKey !== "string"
      || !Array.isArray(config.yKeys) || !config.yKeys.length
      || !config.yKeys.every(key => typeof key === "string")) return null;
  return chart as unknown as AgentChart;
}

import type { AgentManager } from "@vortexify/react";
import { record, readChart } from "./chart-definition";
import { AnalysisBarChart } from "./AnalysisBarChart";

export function ConversationCharts({ manager }: { manager: AgentManager }) {
  const charts = new Map<string, NonNullable<ReturnType<typeof readChart>>>();
  for (const message of manager.messages) {
    const content = record(message.content);
    if (content?.type !== "tool_result" || content.tool !== "generate_chart") continue;
    const chart = readChart(content.output);
    if (chart && typeof content.id === "string") charts.set(content.id, chart);
  }
  for (const tool of manager.tools) {
    if (tool.target !== "backend" || tool.name !== "generate_chart" || tool.status !== "success") continue;
    const chart = readChart(tool.result);
    if (chart) charts.set(tool.callId, chart);
  }
  return <>{[...charts].map(([id, chart]) => (
    <AnalysisBarChart key={`${manager.conversationId}:${id}`} chart={chart} />
  ))}</>;
}

import { useEffect, useState } from "react";
import { useVortexify, type AgentChart } from "@vortexify/react";
import {
  BarChart, Bar, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis,
} from "recharts";

type Row = Record<string, string | number | null>;

export function AnalysisBarChart({ chart }: { chart: AgentChart }) {
  const { client, ready } = useVortexify();
  const [rows, setRows] = useState<Row[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [attempt, setAttempt] = useState(0);

  useEffect(() => {
    setRows(null);
    setError(null);
    if (!ready) return;
    const controller = new AbortController();
    let timer: ReturnType<typeof setTimeout> | undefined;

    async function load() {
      try {
        const analysis = await client.getAnalysisData<Row>(
          chart.query_id, { limit: 1000, offset: 0 },
          { signal: controller.signal },
        );
        if (controller.signal.aborted) return;
        if (analysis.status === "failed" || analysis.status === "stopped") {
          throw new Error(`Analysis ${analysis.status}`);
        }
        if (!analysis.data) {
          timer = setTimeout(() => void load(), 1000);
          return;
        }
        if (analysis.has_more || analysis.result?.result_truncated) {
          throw new Error("Use a complete, aggregated result for this chart.");
        }
        setRows(analysis.data);
      } catch (failure) {
        if (!controller.signal.aborted) {
          setError(failure instanceof Error ? failure.message : "Could not load chart data.");
        }
      }
    }

    void load();
    return () => { controller.abort(); clearTimeout(timer); };
  }, [client, ready, chart.query_id, attempt]);

  if (chart.config.chartType !== "Bar") {
    return <p>This view supports bar charts. Add a renderer for {chart.config.chartType}.</p>;
  }
  if (error) return <div role="alert">{error} <button onClick={() => setAttempt(n => n + 1)}>Retry</button></div>;
  if (!rows) return <p role="status">Loading chart…</p>;
  if (!rows.length) return <p>No rows matched this analysis.</p>;

  return <figure aria-label={chart.name}>
    <figcaption>{chart.name}</figcaption>
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={rows}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey={chart.config.xKey} />
        <YAxis />
        <Tooltip />
        {chart.config.yKeys.map((key, index) => (
          <Bar key={key} dataKey={key} fill={["#7561e8", "#28a892", "#db9958"][index % 3]} />
        ))}
      </BarChart>
    </ResponsiveContainer>
    <details><summary>View chart data</summary>
      <table><thead><tr><th>{chart.config.xKey}</th>
        {chart.config.yKeys.map(key => <th key={key}>{key}</th>)}
      </tr></thead><tbody>{rows.map((row, index) => <tr key={index}>
        <td>{row[chart.config.xKey]}</td>
        {chart.config.yKeys.map(key => <td key={key}>{row[key]}</td>)}
      </tr>)}</tbody></table>
    </details>
  </figure>;
}