feat(plugin-chatbot): render AI data-query charts inline (data-chart) (#1712)

xuyushun441-sys · os-zhuang · claude · web-flow · commit 97281e9e5d9e · 2026-06-14T05:05:23.000+08:00
Companion to the framework `visualize_data` tool. The data-query assistant can
now answer with a CHART: the tool emits a `data-chart` custom stream part and
the chat lifts it onto the message and renders it with the SDUI `&lt;chart&gt;`
component, right in the assistant bubble.

- mapMessages.ts: `extractCharts()` lifts every `data-chart` part into
  `ChatMessage.charts` (defensive narrowing; keeps multiple charts in order).
  Mirrors the existing `data-build-progress` → `buildProgress` path.
- ChatbotEnhanced.tsx: `ChatChart` type + `charts` field; renders each via
  `&lt;SchemaRenderer schema={{ type:'chart', … }}/&gt;` (decoupled — no hard dep on
  plugin-charts). Gives the chart a definite `width: min(520px, 80vw)` so
  recharts' ResponsiveContainer measures a stable, non-zero width inside the
  `w-fit` bubble (otherwise the circular width dependency leaves bars unpainted).
- mapMessages.test.ts: +3 tests (single chart lift, multi-chart order +
  series-less drop, absent → undefined).

Verified end-to-end in the console against a live LLM: AI → visualize_data →
data-chart → a 5-bar chart renders in the chat bubble.

Co-authored-by: Jack Zhuang &lt;277994282+os-zhuang@users.noreply.github.com&gt;
Co-authored-by: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/plugin-chatbot/src/ChatbotEnhanced.tsx b/packages/plugin-chatbot/src/ChatbotEnhanced.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import { cn } from '@object-ui/components';
+import { SchemaRenderer } from '@object-ui/react';
 import { AlertCircle, ArrowRight, Copy, Check, RefreshCw, CornerDownLeft, Bot, Eye, GitCompareArrows, Rocket, Clock3, CheckCircle2, XCircle, Loader2, ShieldCheck, TriangleAlert } from 'lucide-react';
 import type { ChatStatus } from 'ai';
 import {
@@ -103,6 +104,40 @@ export interface ChatMessage {
    * instead of staring at a thinking spinner.
    */
   buildProgress?: ChatBuildProgress;
+  /**
+   * Charts to render inline in the assistant bubble, lifted from the stream's
+   * `data-chart` parts (emitted by the `visualize_data` tool via
+   * `ctx.onProgress`). Each renders through the platform's SDUI `<chart>`
+   * component, so an AI data answer can show a bar/line/pie chart rather than
+   * only a wall of text.
+   */
+  charts?: ChatChart[];
+}
+
+/**
+ * A chart lifted from a `data-chart` stream part. Mirrors the `schema` prop of
+ * the SDUI `<chart>` renderer (plugin-charts `ChartRenderer`), so it can be
+ * fed straight into `<SchemaRenderer schema={{ type: 'chart', ...chart }} />`.
+ */
+export interface ChatChart {
+  chartType?:
+    | 'bar'
+    | 'column'
+    | 'horizontal-bar'
+    | 'line'
+    | 'area'
+    | 'pie'
+    | 'donut'
+    | 'radar'
+    | 'scatter';
+  /** Optional chart title shown above the chart. */
+  title?: string;
+  /** Aggregated rows — one object per category. */
+  data: Array<Record<string, unknown>>;
+  /** Field name used for the category axis (x-axis / pie slices). */
+  xAxisKey?: string;
+  /** One entry per plotted measure. `dataKey` is the row column to read. */
+  series: Array<{ dataKey: string; label?: string }>;
 }
 
 /** A reconciled snapshot of an in-flight app build (apply_blueprint). */
@@ -1426,6 +1461,40 @@ const ChatbotEnhanced = React.forwardRef<HTMLDivElement, ChatbotEnhancedProps>(
                           className="ml-0.5 inline-block w-[2px] h-4 align-middle bg-current animate-pulse"
                         />
                       ) : null}
+                      {!isUser && (message.charts?.length ?? 0) > 0 ? (
+                        <div className="mt-2 flex flex-col gap-3" data-testid="chat-charts">
+                          {message.charts!.map((chart, i) => (
+                            <div
+                              key={i}
+                              className="rounded-lg border bg-background p-3"
+                              // The chat bubble is `w-fit` (shrinks to content) while the
+                              // SDUI chart's ResponsiveContainer is `width:100%` — a
+                              // circular dependency. We give the chart a DEFINITE width
+                              // sized to the viewport (NOT the shrink-to-fit parent, which
+                              // would re-introduce the cycle) so recharts always measures a
+                              // stable, non-zero width and renders. Height comes from the
+                              // ChartContainer itself (h-[350px] / min-h 280).
+                              style={{ width: 'min(520px, 80vw)' }}
+                              data-testid="chat-chart"
+                            >
+                              {chart.title ? (
+                                <div className="mb-2 text-sm font-medium text-foreground">
+                                  {chart.title}
+                                </div>
+                              ) : null}
+                              <SchemaRenderer
+                                schema={{
+                                  type: 'chart',
+                                  chartType: chart.chartType ?? 'bar',
+                                  data: chart.data,
+                                  xAxisKey: chart.xAxisKey,
+                                  series: chart.series,
+                                } as never}
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      ) : null}
                       {!isUser && sources.length > 0 ? (
                         <Sources>
                           <SourcesTrigger count={sources.length} />
diff --git a/packages/plugin-chatbot/src/__tests__/mapMessages.test.ts b/packages/plugin-chatbot/src/__tests__/mapMessages.test.ts
@@ -182,6 +182,62 @@ describe('uiMessageToChatMessage', () => {
     const out = uiMessageToChatMessage({ id: 'm7', role: 'assistant', parts: [{ type: 'text', text: 'hi' }] });
     expect(out.buildProgress).toBeUndefined();
   });
+
+  it('lifts data-chart parts into charts[] (visualize_data)', () => {
+    const out = uiMessageToChatMessage({
+      id: 'm8',
+      role: 'assistant',
+      parts: [
+        { type: 'text', text: 'Here is the breakdown:' },
+        {
+          type: 'data-chart',
+          id: 'chart-0',
+          data: {
+            type: 'chart',
+            chartType: 'bar',
+            title: 'Deals by status',
+            xAxisKey: 'status',
+            series: [{ dataKey: 'count', label: 'Count' }],
+            data: [
+              { status: 'won', count: 5 },
+              { status: 'lost', count: 2 },
+            ],
+          },
+        },
+      ],
+    });
+    expect(out.content).toBe('Here is the breakdown:');
+    expect(out.charts).toHaveLength(1);
+    expect(out.charts?.[0]).toEqual({
+      chartType: 'bar',
+      title: 'Deals by status',
+      xAxisKey: 'status',
+      series: [{ dataKey: 'count', label: 'Count' }],
+      data: [
+        { status: 'won', count: 5 },
+        { status: 'lost', count: 2 },
+      ],
+    });
+  });
+
+  it('keeps multiple data-chart parts in arrival order and drops series-less payloads', () => {
+    const out = uiMessageToChatMessage({
+      id: 'm9',
+      role: 'assistant',
+      parts: [
+        { type: 'data-chart', id: 'c0', data: { type: 'chart', chartType: 'pie', series: [{ dataKey: 'count' }], data: [] } },
+        { type: 'data-chart', id: 'c1', data: { type: 'chart', series: [], data: [] } }, // unrenderable → dropped
+        { type: 'data-chart', id: 'c2', data: { type: 'chart', chartType: 'line', series: [{ dataKey: 'total' }], data: [] } },
+      ],
+    });
+    expect(out.charts).toHaveLength(2);
+    expect(out.charts?.map((c) => c.chartType)).toEqual(['pie', 'line']);
+  });
+
+  it('leaves charts undefined when there is no data-chart part', () => {
+    const out = uiMessageToChatMessage({ id: 'm10', role: 'assistant', parts: [{ type: 'text', text: 'hi' }] });
+    expect(out.charts).toBeUndefined();
+  });
 });
 
 // ADR-0033 Phase B — the chat lifts draft envelopes onto the invocation so a
diff --git a/packages/plugin-chatbot/src/mapMessages.ts b/packages/plugin-chatbot/src/mapMessages.ts
@@ -14,7 +14,7 @@
  * apps that drive `useChat` themselves (e.g. Studio, which needs a custom
  * `prepareSendMessagesRequest` transport).
  */
-import type { ChatMessage, ChatToolInvocation, ChatSource, ChatBuildProgress } from './ChatbotEnhanced';
+import type { ChatMessage, ChatToolInvocation, ChatSource, ChatBuildProgress, ChatChart } from './ChatbotEnhanced';
 
 interface AnyPart {
   type?: string;
@@ -284,6 +284,43 @@ function extractBuildProgress(parts: AnyPart[]): ChatBuildProgress | undefined {
   };
 }
 
+/**
+ * Lift charts from the stream's `data-chart` parts (emitted by the
+ * `visualize_data` tool via `ctx.onProgress`). Unlike `data-build-progress`
+ * (one reconciled part), each chart is emitted with its OWN id, so a single
+ * answer may carry several — we keep them all, in arrival order. Each part's
+ * `data` already matches the SDUI `<chart>` schema; we defensively narrow it
+ * so a malformed payload is dropped rather than rendered broken.
+ */
+function extractCharts(parts: AnyPart[]): ChatChart[] | undefined {
+  const charts: ChatChart[] = [];
+  for (const p of parts) {
+    if (p.type !== 'data-chart') continue;
+    const d = p.data;
+    if (!d || typeof d !== 'object') continue;
+    const c = d as Record<string, unknown>;
+    const data = Array.isArray(c.data) ? (c.data as Array<Record<string, unknown>>) : [];
+    const series = Array.isArray(c.series)
+      ? (c.series as Array<Record<string, unknown>>)
+          .filter((s) => s && typeof s.dataKey === 'string')
+          .map((s) => ({
+            dataKey: s.dataKey as string,
+            ...(typeof s.label === 'string' ? { label: s.label } : {}),
+          }))
+      : [];
+    // A chart with no series is unrenderable — skip it.
+    if (series.length === 0) continue;
+    charts.push({
+      ...(typeof c.chartType === 'string' ? { chartType: c.chartType as ChatChart['chartType'] } : {}),
+      ...(typeof c.title === 'string' ? { title: c.title } : {}),
+      data,
+      ...(typeof c.xAxisKey === 'string' ? { xAxisKey: c.xAxisKey } : {}),
+      series,
+    });
+  }
+  return charts.length > 0 ? charts : undefined;
+}
+
 /**
  * Map a single Vercel AI SDK v6 `UIMessage` to the `ChatMessage` shape that
  * `<ChatbotEnhanced>` renders.
@@ -309,6 +346,7 @@ export function uiMessageToChatMessage(
     toolInvocations: tools.length > 0 ? tools : legacyTools,
     sources: extractSources(parts),
     buildProgress: extractBuildProgress(parts),
+    charts: extractCharts(parts),
     streaming: opts.streaming,
   };
 }
