From 9568c86a3230d1756d3f7e86975db5e446b8f709 Mon Sep 17 00:00:00 2001
From: qixinbo <qixinbo@gmail.com>
Date: Sun, 15 Mar 2026 11:13:40 +0800
Subject: [PATCH] viz widget opt

---
 frontend/src/components/ChatInterface.tsx     |  18 +--
 .../components/InlineVisualizationCard.tsx    | 132 ++++++++++++++++++
 2 files changed, 134 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/InlineVisualizationCard.tsx

diff --git a/frontend/src/components/ChatInterface.tsx b/frontend/src/components/ChatInterface.tsx
index 0afd25c..fa4a093 100644
--- a/frontend/src/components/ChatInterface.tsx
+++ b/frontend/src/components/ChatInterface.tsx
@@ -12,7 +12,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
 import { useLocation } from "react-router-dom";
-import { VegaChart } from "./VegaChart";
+import { InlineVisualizationCard } from "./InlineVisualizationCard";
 
 interface Message {
   id: string;
@@ -581,21 +581,7 @@ export function ChatInterface() {
                           </div>
                           {msg.viz ? (
                             <div className="mt-3 pt-3 border-t border-zinc-100">
-                              {msg.viz.error ? (
-                                <div className="text-sm text-red-500">{msg.viz.error}</div>
-                              ) : msg.viz.canVisualize && msg.viz.chartSpec ? (
-                                (() => {
-                                  const objectRows = msg.viz?.rows?.filter((row) => row && typeof row === "object" && !Array.isArray(row)) || [];
-                                  if (objectRows.length === 0) {
-                                    return <div className="text-sm text-zinc-500">当前结果没有可渲染的结构化数据。</div>;
-                                  }
-                                  return (
-                                    <div className="w-full h-80 rounded-xl border border-zinc-100 p-2">
-                                      <VegaChart data={objectRows} spec={msg.viz.chartSpec} />
-                                    </div>
-                                  );
-                                })()
-                              ) : null}
+                              <InlineVisualizationCard viz={msg.viz} />
                             </div>
                           ) : null}
                         </>
diff --git a/frontend/src/components/InlineVisualizationCard.tsx b/frontend/src/components/InlineVisualizationCard.tsx
new file mode 100644
index 0000000..ee6f829
--- /dev/null
+++ b/frontend/src/components/InlineVisualizationCard.tsx
@@ -0,0 +1,132 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from "@/components/ui/dialog";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Code, Table as TableIcon, BarChart as ChartIcon, LayoutDashboard } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useDashboardStore } from "@/store/dashboardStore";
+import type { ChartSpec } from "@/store/visualizationStore";
+import { VegaChart } from "./VegaChart";
+
+interface InlineVisualizationCardProps {
+  viz: {
+    sql: string;
+    rows: unknown[];
+    chartSpec: ChartSpec | null;
+    canVisualize: boolean;
+    reasoning?: string;
+    error?: string | null;
+  };
+}
+
+export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
+  const [view, setView] = useState<'table' | 'chart'>('chart');
+  const { addChart } = useDashboardStore();
+  const objectRows = viz.rows.filter((row) => row && typeof row === "object" && !Array.isArray(row)) as Record<string, unknown>[];
+  const columns = objectRows.length > 0 ? Object.keys(objectRows[0]) : [];
+
+  const handleAddToDashboard = () => {
+    const mark = viz.chartSpec?.mark;
+    const markType = typeof mark === "string" ? mark : mark?.type;
+    const dashboardType = markType === "line" ? "line" : "bar";
+    addChart({
+      id: Date.now().toString(),
+      title: viz.chartSpec?.title || "Generated Analysis",
+      type: dashboardType,
+      data: objectRows,
+      sql: viz.sql,
+    });
+  };
+
+  if (viz.error) {
+    return <div className="text-sm text-red-500">{viz.error}</div>;
+  }
+
+  return (
+    <Card className="w-full border border-zinc-100 shadow-none">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base">{viz.chartSpec?.title || "可视化结果"}</CardTitle>
+        <CardDescription>{viz.reasoning || "根据当前回答生成的可视化"}</CardDescription>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex bg-zinc-100 rounded-md p-1">
+            <Button
+              variant={view === "table" ? "secondary" : "ghost"}
+              size="sm"
+              className="h-7 px-3 text-xs"
+              onClick={() => setView("table")}
+            >
+              <TableIcon className="h-3.5 w-3.5 mr-1.5" />
+              Table
+            </Button>
+            <Button
+              variant={view === "chart" ? "secondary" : "ghost"}
+              size="sm"
+              className="h-7 px-3 text-xs"
+              onClick={() => setView("chart")}
+            >
+              <ChartIcon className="h-3.5 w-3.5 mr-1.5" />
+              Chart
+            </Button>
+            <Dialog>
+              <DialogTrigger render={
+                <Button variant="ghost" size="sm" className="h-7 px-3 text-xs">
+                  <Code className="h-3.5 w-3.5 mr-1.5" />
+                  SQL
+                </Button>
+              } />
+              <DialogContent className="sm:max-w-[625px]">
+                <DialogHeader>
+                  <DialogTitle>Generated SQL Query</DialogTitle>
+                  <DialogDescription>用于生成当前图表的数据查询语句。</DialogDescription>
+                </DialogHeader>
+                <div className="bg-slate-950 text-slate-50 p-4 rounded-md overflow-x-auto">
+                  <pre className="text-sm font-mono">{viz.sql || "--"}</pre>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleAddToDashboard} disabled={objectRows.length === 0}>
+              <LayoutDashboard className="h-3.5 w-3.5 mr-1.5" />
+              Add to Dashboard
+            </Button>
+          </div>
+        </div>
+
+        {view === "chart" ? (
+          viz.canVisualize && viz.chartSpec && objectRows.length > 0 ? (
+            <div className="w-full h-80 rounded-xl border border-zinc-100 p-2">
+              <VegaChart data={objectRows} spec={viz.chartSpec} />
+            </div>
+          ) : (
+            <div className="text-sm text-zinc-500">本次结果不适合图表展示。</div>
+          )
+        ) : objectRows.length > 0 ? (
+          <ScrollArea className="h-80 border rounded-md">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {columns.map((col) => <TableHead key={col}>{col}</TableHead>)}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {objectRows.map((row, i) => (
+                  <TableRow key={i}>
+                    {columns.map((col) => (
+                      <TableCell key={`${i}-${col}`}>{String(row[col] ?? "")}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </ScrollArea>
+        ) : (
+          <div className="text-sm text-zinc-500">当前结果没有可渲染的结构化数据。</div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}