🎨 feat: ClickHouse MCP Tool Call UI with Click UI

client/package.json

@@ -30,6 +30,8 @@
   "homepage": "https://librechat.ai",
   "dependencies": {
     "@ariakit/react": "^0.4.15",
+    "@clickhouse/click-ui": "0.2.0-rc.4",
+    "recharts": "^2.15.0",
     "@ariakit/react-core": "^0.4.17",
     "@codesandbox/sandpack-react": "^2.19.10",
     "@dicebear/collection": "^9.4.1",
@@ -85,11 +87,11 @@
     "micromark-extension-llm-math": "^3.1.0",
     "qrcode.react": "^4.2.0",
     "rc-input-number": "^7.4.2",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-avatar-editor": "^13.0.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-flip-toolkit": "^7.1.0",
     "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.43.9",

client/src/components/Chat/Messages/Content/ClickHouse/ChartConfigModal.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  ButtonGroup,
+  Select,
+  TextField,
+  Panel,
+  Text,
+  Separator,
+  Container,
+} from '@clickhouse/click-ui';
+import type { ChartType, ChartConfig } from './types';
+import { CHART_COLORS } from './types';
+import { getColumnNames, getNumericColumns } from './chartDetect';
+
+interface ChartConfigModalProps {
+  rows: Record<string, unknown>[];
+  initial?: ChartConfig;
+  onApply: (config: ChartConfig) => void;
+  onClose: () => void;
+  codeTheme: 'light' | 'dark';
+}
+
+const CHART_TYPE_OPTIONS = [
+  { value: 'bar', label: 'Bar' },
+  { value: 'hbar', label: 'H-Bar' },
+  { value: 'sbar', label: 'Stacked' },
+  { value: 'shbar', label: 'Stacked H' },
+  { value: 'area', label: 'Area' },
+  { value: 'line', label: 'Line' },
+  { value: 'scatter', label: 'Scatter' },
+  { value: 'pie', label: 'Pie' },
+  { value: 'doughnut', label: 'Doughnut' },
+];
+
+export default function ChartConfigModal({
+  rows,
+  initial,
+  onApply,
+  onClose,
+}: ChartConfigModalProps) {
+  const allColumns = getColumnNames(rows);
+  const numericColumns = getNumericColumns(rows);
+
+  const [chartType, setChartType] = useState<ChartType>(initial?.chartType ?? 'bar');
+  const [xAxis, setXAxis] = useState(initial?.xAxis ?? allColumns[0] ?? '');
+  const [yAxisCols, setYAxisCols] = useState<Set<string>>(
+    new Set(initial?.yAxis.map((y) => y.column) ?? (numericColumns.length > 0 ? [numericColumns[0]] : [])),
+  );
+  const [title, setTitle] = useState(initial?.title ?? '');
+
+  const handleApply = () => {
+    if (!xAxis || yAxisCols.size === 0) {
+      return;
+    }
+    onApply({
+      chartType,
+      xAxis,
+      yAxis: Array.from(yAxisCols).map((col, i) => ({
+        color: CHART_COLORS[i % CHART_COLORS.length],
+        column: col,
+      })),
+      title: title || undefined,
+    });
+  };
+
+  return (
+    <Panel padding="md" radii="sm" hasBorder orientation="vertical" fillWidth>
+      <Container orientation="horizontal" padding="none" justifyContent="space-between" alignItems="center">
+        <Text size="md" weight="bold">Chart Configuration</Text>
+        <button
+          type="button"
+          onClick={onClose}
+          style={{ color: 'var(--text-secondary)', background: 'none', border: 'none', cursor: 'pointer', fontSize: 16 }}
+        >
+          &times;
+        </button>
+      </Container>
+
+      <Separator size="xs" />
+
+      <Container orientation="vertical" padding="none" gap="sm">
+        <Text size="xs" color="muted" weight="medium">Chart Type</Text>
+        <ButtonGroup
+          options={CHART_TYPE_OPTIONS}
+          selected={chartType}
+          onClick={(value) => setChartType(value as ChartType)}
+        />
+      </Container>
+
+      <Separator size="xs" />
+
+      <Container orientation="vertical" padding="none" gap="sm">
+        <Text size="xs" color="muted" weight="medium">X Axis</Text>
+        <Select value={xAxis} onSelect={(value) => setXAxis(value)}>
+          {allColumns.map((col) => (
+            <Select.Item key={col} value={col}>
+              {col}
+            </Select.Item>
+          ))}
+        </Select>
+      </Container>
+
+      <Container orientation="vertical" padding="none" gap="sm">
+        <Text size="xs" color="muted" weight="medium">Y Axis</Text>
+        <ButtonGroup
+          options={allColumns
+            .filter((col) => col !== xAxis)
+            .map((col) => ({
+              value: col,
+              label: col,
+              disabled: !numericColumns.includes(col),
+            }))}
+          selected={yAxisCols}
+          onClick={(value, selected) => setYAxisCols(selected instanceof Set ? selected : new Set([selected]))}
+          multiple
+        />
+      </Container>
+
+      <Separator size="xs" />
+
+      <Container orientation="vertical" padding="none" gap="sm">
+        <Text size="xs" color="muted" weight="medium">Title (optional)</Text>
+        <TextField
+          value={title}
+          onChange={(val) => setTitle(val)}
+          placeholder="Chart title..."
+        />
+      </Container>
+
+      <Container orientation="horizontal" padding="none" gap="sm" justifyContent="end">
+        <Button type="secondary" label="Cancel" onClick={onClose} />
+        <Button type="primary" label="Apply" onClick={handleApply} disabled={!xAxis || yAxisCols.size === 0} />
+      </Container>
+    </Panel>
+  );
+}

client/src/components/Chat/Messages/Content/ClickHouse/ChartView.tsx

@@ -0,0 +1,238 @@
+import React, { useMemo } from 'react';
+import {
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  AreaChart,
+  Area,
+  ScatterChart,
+  Scatter,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import type { ChartConfig } from './types';
+import { CHART_COLORS } from './types';
+
+interface ChartViewProps {
+  rows: Record<string, unknown>[];
+  chartConfig: ChartConfig;
+  codeTheme: 'light' | 'dark';
+}
+
+function toNumber(val: unknown): number {
+  if (typeof val === 'number') {
+    return val;
+  }
+  const n = Number(val);
+  return isNaN(n) ? 0 : n;
+}
+
+export default function ChartView({ rows, chartConfig, codeTheme }: ChartViewProps) {
+  const { chartType, xAxis, yAxis, title } = chartConfig;
+  const textColor = codeTheme === 'dark' ? '#b3b6bd' : '#696e79';
+  const labelColor = codeTheme === 'dark' ? '#ffffff' : '#1a1a1a';
+  const gridColor = codeTheme === 'dark' ? '#323232' : '#e6e7e9';
+  const tooltipBg = codeTheme === 'dark' ? '#282828' : '#ffffff';
+  const tooltipBorder = codeTheme === 'dark' ? '#3a3a3a' : '#e0e0e0';
+  const tooltipStyle: React.CSSProperties = { backgroundColor: tooltipBg, border: `1px solid ${tooltipBorder}`, fontSize: 12, borderRadius: 6, padding: '8px 12px' };
+  const tooltipLabelStyle: React.CSSProperties = { color: labelColor, fontWeight: 500, marginBottom: 4 };
+  const tooltipItemStyle: React.CSSProperties = { color: textColor };
+
+  // Transform rows into recharts-friendly format
+  const data = useMemo(
+    () =>
+      rows.map((row) => {
+        const point: Record<string, unknown> = { [xAxis]: row[xAxis] };
+        for (const y of yAxis) {
+          point[y.column] = toNumber(row[y.column]);
+        }
+        return point;
+      }),
+    [rows, xAxis, yAxis],
+  );
+
+  const isPie = chartType === 'pie' || chartType === 'doughnut';
+  const isHorizontal = chartType === 'hbar' || chartType === 'shbar';
+  const isStacked = chartType === 'sbar' || chartType === 'shbar';
+  const isScatter = chartType === 'scatter';
+  const isArea = chartType === 'area';
+  const isLine = chartType === 'line';
+
+  if (data.length === 0) {
+    return (
+      <div style={{ padding: 16, color: textColor }}>No data to chart</div>
+    );
+  }
+
+  // Pie / Doughnut
+  if (isPie) {
+    const valCol = yAxis[0]?.column;
+    if (!valCol) {
+      return null;
+    }
+    const pieData = data.map((d) => ({
+      name: String(d[xAxis] ?? ''),
+      value: toNumber(d[valCol]),
+    }));
+
+    return (
+      <div>
+        {title && (
+          <div style={{ textAlign: 'center', fontSize: 13, fontWeight: 500, color: textColor, marginBottom: 4 }}>
+            {title}
+          </div>
+        )}
+        <ResponsiveContainer width="100%" height={300}>
+          <PieChart>
+            <Pie
+              data={pieData}
+              dataKey="value"
+              nameKey="name"
+              cx="50%"
+              cy="50%"
+              innerRadius={chartType === 'doughnut' ? 60 : 0}
+              outerRadius={100}
+              label={({ name, percent, x, y, textAnchor }) => (
+                <text x={x} y={y} textAnchor={textAnchor} fill={textColor} fontSize={11}>
+                  {`${name} ${(percent * 100).toFixed(0)}%`}
+                </text>
+              )}
+              labelLine={false}
+            >
+              {pieData.map((_, i) => (
+                <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
+              ))}
+            </Pie>
+            <Tooltip contentStyle={tooltipStyle} labelStyle={tooltipLabelStyle} itemStyle={tooltipItemStyle} />
+            <Legend wrapperStyle={{ fontSize: 12, color: textColor }} />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    );
+  }
+
+  // Scatter
+  if (isScatter) {
+    const yCol = yAxis[0]?.column;
+    if (!yCol) {
+      return null;
+    }
+    const scatterData = data.map((d) => ({
+      x: toNumber(d[xAxis]),
+      y: toNumber(d[yCol]),
+    }));
+
+    return (
+      <div>
+        {title && (
+          <div style={{ textAlign: 'center', fontSize: 13, fontWeight: 500, color: textColor, marginBottom: 4 }}>
+            {title}
+          </div>
+        )}
+        <ResponsiveContainer width="100%" height={300}>
+          <ScatterChart>
+            <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+            <XAxis dataKey="x" name={xAxis} tick={{ fontSize: 11, fill: textColor }} />
+            <YAxis dataKey="y" name={yCol} tick={{ fontSize: 11, fill: textColor }} />
+            <Tooltip contentStyle={tooltipStyle} labelStyle={tooltipLabelStyle} itemStyle={tooltipItemStyle} cursor={{ strokeDasharray: '3 3' }} />
+            <Scatter data={scatterData} fill={yAxis[0]?.color ?? CHART_COLORS[0]} />
+          </ScatterChart>
+        </ResponsiveContainer>
+      </div>
+    );
+  }
+
+  // Bar (vertical / horizontal / stacked)
+  if (!isArea && !isLine) {
+    const ChartComponent = BarChart;
+    return (
+      <div>
+        {title && (
+          <div style={{ textAlign: 'center', fontSize: 13, fontWeight: 500, color: textColor, marginBottom: 4 }}>
+            {title}
+          </div>
+        )}
+        <ResponsiveContainer width="100%" height={300}>
+          <ChartComponent
+            data={data}
+            layout={isHorizontal ? 'vertical' : 'horizontal'}
+          >
+            <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+            {isHorizontal ? (
+              <>
+                <XAxis type="number" tick={{ fontSize: 11, fill: textColor }} />
+                <YAxis dataKey={xAxis} type="category" tick={{ fontSize: 11, fill: textColor }} width={100} />
+              </>
+            ) : (
+              <>
+                <XAxis dataKey={xAxis} tick={{ fontSize: 11, fill: textColor }} />
+                <YAxis tick={{ fontSize: 11, fill: textColor }} />
+              </>
+            )}
+            <Tooltip contentStyle={tooltipStyle} labelStyle={tooltipLabelStyle} itemStyle={tooltipItemStyle} />
+            {yAxis.length > 1 && <Legend wrapperStyle={{ fontSize: 12, color: textColor }} />}
+            {yAxis.map((y, i) => (
+              <Bar
+                key={y.column}
+                dataKey={y.column}
+                fill={y.color || CHART_COLORS[i % CHART_COLORS.length]}
+                stackId={isStacked ? 'stack' : undefined}
+                maxBarSize={40}
+              />
+            ))}
+          </ChartComponent>
+        </ResponsiveContainer>
+      </div>
+    );
+  }
+
+  // Area / Line
+  const ChartComponent = isArea ? AreaChart : LineChart;
+  return (
+    <div>
+      {title && (
+        <div style={{ textAlign: 'center', fontSize: 13, fontWeight: 500, color: textColor, marginBottom: 4 }}>
+          {title}
+        </div>
+      )}
+      <ResponsiveContainer width="100%" height={300}>
+        <ChartComponent data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+          <XAxis dataKey={xAxis} tick={{ fontSize: 11, fill: textColor }} />
+          <YAxis tick={{ fontSize: 11, fill: textColor }} />
+          <Tooltip contentStyle={tooltipStyle} labelStyle={tooltipLabelStyle} itemStyle={tooltipItemStyle} />
+          {yAxis.length > 1 && <Legend wrapperStyle={{ fontSize: 12, color: textColor }} />}
+          {yAxis.map((y, i) => {
+            const color = y.color || CHART_COLORS[i % CHART_COLORS.length];
+            return isArea ? (
+              <Area
+                key={y.column}
+                type="monotone"
+                dataKey={y.column}
+                stroke={color}
+                fill={color}
+                fillOpacity={0.3}
+              />
+            ) : (
+              <Line
+                key={y.column}
+                type="monotone"
+                dataKey={y.column}
+                stroke={color}
+                dot={false}
+              />
+            );
+          })}
+        </ChartComponent>
+      </ResponsiveContainer>
+    </div>
+  );
+}