feat: UI component rendering in agent dialog mode (#1083)

Co-authored-by: csunny <cfqsunny@163.com>

web/components/chat/chat-content/vis-dashboard.tsx

@@ -0,0 +1,58 @@
+import { AutoChart, BackEndChartType, getChartType } from '@/components/chart';
+import { Datum } from '@antv/ava';
+import { useMemo } from 'react';
+
+interface Props {
+  data: {
+    data: {
+      data: Datum[];
+      describe: string;
+      title: string;
+      type: BackEndChartType;
+      sql: string;
+    }[];
+    title: string | null;
+    display_strategy: string;
+    chart_count: number;
+  };
+}
+
+const chartLayout = [[2], [1, 2], [1, 3], [2, 1, 2], [2, 1, 3], [3, 1, 3], [3, 2, 3]];
+
+function VisDashboard({ data }: Props) {
+  const charts = useMemo(() => {
+    if (data.chart_count > 1) {
+      const layout = chartLayout[data.chart_count - 2];
+      let prevIndex = 0;
+      return layout.map((item) => {
+        const items = data.data.slice(prevIndex, prevIndex + item);
+        prevIndex = item;
+        return items;
+      });
+    }
+    return [data.data];
+  }, [data.data, data.chart_count]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      {charts.map((row, index) => (
+        <div key={`row-${index}`} className="flex gap-3">
+          {row.map((chart, subIndex) => (
+            <div
+              key={`chart-${subIndex}`}
+              className="flex flex-1 flex-col justify-between p-4 rounded border border-gray-200 dark:border-gray-500 whitespace-normal"
+            >
+              <div>
+                {chart.title && <div className="mb-2 text-lg">{chart.title}</div>}
+                {chart.describe && <div className="mb-4 text-sm text-gray-500">{chart.describe}</div>}
+              </div>
+              <AutoChart data={chart.data} chartType={getChartType(chart.type)} />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default VisDashboard;