@larkup/workspace-app 0.0.0-stage → 0.2.0

package/src/components/chat/message-queue.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { ChevronUp, ChevronDown, Trash2, Paperclip } from 'lucide-react';
+
+export interface QueuedMessage {
+  id: string;
+  text: string;
+  files?: File[];
+}
+
+interface MessageQueueProps {
+  items: QueuedMessage[];
+  onRemove: (id: string) => void;
+  onMoveUp: (id: string) => void;
+  onMoveDown: (id: string) => void;
+  onEdit: (id: string) => void;
+}
+
+export function MessageQueue({ items, onRemove, onMoveUp, onMoveDown, onEdit }: MessageQueueProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className="mx-auto mb-2 w-full max-w-3xl overflow-hidden rounded-2xl border border-border bg-card">
+      <div className="border-b border-border/60 px-3 py-1.5">
+        <span className="text-xs font-medium text-muted-foreground">
+          {items.length} queued message{items.length > 1 ? 's' : ''}
+        </span>
+      </div>
+      <ul className="max-h-40 overflow-y-auto scrollbar-none [&::-webkit-scrollbar]:hidden">
+        {items.map((item, index) => (
+          <li
+            key={item.id}
+            className="group flex items-start gap-2 border-border/40 px-3 py-2 text-sm transition-colors last:border-b-0 hover:bg-secondary"
+          >
+            <button
+              type="button"
+              onClick={() => onEdit(item.id)}
+              className="min-w-0 flex-1 cursor-pointer text-left"
+              title="Click to edit"
+            >
+              <p className="line-clamp-2 break-words text-foreground">
+                {item.text || '(attachment only)'}
+              </p>
+              {item.files && item.files.length > 0 && (
+                <div className="mt-1 flex items-center gap-1 text-muted-foreground">
+                  <Paperclip className="size-3 shrink-0" />
+                  <span className="truncate text-xs">
+                    {item.files.map((f) => f.name).join(', ')}
+                  </span>
+                </div>
+              )}
+            </button>
+            <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+              <button
+                type="button"
+                onClick={() => onMoveUp(item.id)}
+                disabled={index === 0}
+                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition hover:bg-muted-foreground/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
+                aria-label="Move up in queue"
+              >
+                <ChevronUp className="size-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => onMoveDown(item.id)}
+                disabled={index === items.length - 1}
+                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition hover:bg-muted-foreground/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
+                aria-label="Move down in queue"
+              >
+                <ChevronDown className="size-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => onRemove(item.id)}
+                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+                aria-label="Remove from queue"
+              >
+                <Trash2 className="size-3.5" />
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/components/chat/tools/chat-chart.tsx

@@ -0,0 +1,558 @@
+'use client';
+
+import { useState, useRef, useCallback, useMemo } from 'react';
+import {
+  BarChart,
+  Bar,
+  AreaChart,
+  Area,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  Cell,
+  ScatterChart,
+  Scatter,
+  RadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import { Download, Copy, Check } from 'lucide-react';
+import { Button } from '@larkup/workspace-ui/button';
+import {
+  normalizeChartConfig,
+  type ChartConfig,
+  type SeriesConfig,
+} from '../../../lib/chat/chart-config';
+
+const CHART_COLORS = [
+  '#10b981', // green (emerald)
+  '#f97316', // orange
+  '#3b82f6', // blue
+  '#22c55e', // green
+  '#f59e0b', // amber/orange
+  '#0ea5e9', // sky blue
+  '#84cc16', // lime green
+  '#ea580c', // dark orange
+  '#2563eb', // dark blue
+];
+
+/* Gradient definitions for area / bar fills */
+function ChartGradients({ series }: { series: SeriesConfig[] }) {
+  return (
+    <defs>
+      {series.map((s, i) => {
+        const color = s.color || CHART_COLORS[i % CHART_COLORS.length];
+        return (
+          <linearGradient key={s.dataKey} id={`gradient-${s.dataKey}`} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor={color} stopOpacity={0.25} />
+            <stop offset="95%" stopColor={color} stopOpacity={0.02} />
+          </linearGradient>
+        );
+      })}
+    </defs>
+  );
+}
+
+function CustomTooltip({ active, payload, label }: any) {
+  if (!active || !payload || payload.length === 0) return null;
+
+  return (
+    <div className="rounded-lg border border-border/40 bg-card px-3 py-2.5 backdrop-blur-sm">
+      <p className="mb-1.5 text-xs font-medium text-foreground">{label}</p>
+      <div className="flex flex-col gap-1">
+        {payload.map((entry: any, i: number) => (
+          <div key={i} className="flex items-center gap-2 text-xs">
+            <span
+              className="h-2 w-2 shrink-0 rounded-full"
+              style={{ backgroundColor: entry.color }}
+            />
+            <span className="text-muted-foreground">{entry.name || entry.dataKey}:</span>
+            <span className="font-medium tabular-nums text-foreground">
+              {typeof entry.value === 'number'
+                ? entry.value.toLocaleString(undefined, {
+                    maximumFractionDigits: 2,
+                  })
+                : entry.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export type { ChartConfig } from '../../../lib/chat/chart-config';
+
+function downloadCSV(data: Record<string, any>[], title: string) {
+  if (data.length === 0) return;
+  const keys = Object.keys(data[0]);
+  const csv = [
+    keys.join(','),
+    ...data.map((row) =>
+      keys
+        .map((k) => {
+          const v = String(row[k] ?? '');
+          return v.includes(',') ? `"${v}"` : v;
+        })
+        .join(','),
+    ),
+  ].join('\n');
+
+  const blob = new Blob([csv], { type: 'text/csv' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${title.replace(/\s+/g, '_').toLowerCase()}.csv`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function copyDataToClipboard(data: Record<string, any>[]) {
+  if (data.length === 0) return;
+  const keys = Object.keys(data[0]);
+  const text = [
+    keys.join('\t'),
+    ...data.map((row) => keys.map((k) => String(row[k] ?? '')).join('\t')),
+  ].join('\n');
+  navigator.clipboard.writeText(text);
+}
+
+const AXIS_TICK_STYLE = {
+  fontSize: 11,
+  fill: 'var(--muted-foreground)',
+  fontFamily: 'inherit',
+};
+
+const AXIS_LINE_STYLE = {
+  stroke: 'var(--border)',
+};
+
+const LEGEND_WRAPPER_STYLE = { fontSize: 11, paddingTop: 12 };
+const LEGEND_WRAPPER_STYLE_PIE = { fontSize: 11 };
+const PIE_LABEL_LINE = { stroke: 'var(--muted-foreground)', strokeWidth: 1 };
+const SCATTER_CURSOR = { strokeDasharray: '3 3' };
+const POLAR_ANGLE_TICK = { fontSize: 11, fill: 'var(--muted-foreground)' };
+const POLAR_RADIUS_TICK = { fontSize: 10, fill: 'var(--muted-foreground)' };
+const ACTIVE_DOT = { r: 4, strokeWidth: 2, stroke: 'var(--card)' };
+const BAR_RADIUS: [number, number, number, number] = [4, 4, 0, 0];
+const CARTESIAN_CHART_MARGIN = { top: 6, right: 12, bottom: 8, left: 12 };
+const X_AXIS_HEIGHT = 52;
+const Y_AXIS_WIDTH = 62;
+const AXIS_TICK_MARGIN = 8;
+const X_AXIS_MIN_TICK_GAP = 24;
+const X_AXIS_LABEL_OFFSET = -4;
+const Y_AXIS_LABEL_OFFSET = -8;
+
+const renderPieLabel = ({ name, percent }: any) => `${name} ${(percent * 100).toFixed(0)}%`;
+
+function useDeepMemo<T>(factory: () => T, deps: any[]): T {
+  const ref = useRef<{ deps: any[]; value: T } | null>(null);
+
+  const depsStr = JSON.stringify(deps);
+
+  if (ref.current === null || JSON.stringify(ref.current.deps) !== depsStr) {
+    ref.current = { deps: JSON.parse(depsStr), value: factory() };
+  }
+
+  return ref.current.value;
+}
+
+export function ChatChart({ config }: { config: ChartConfig }) {
+  const chartRef = useRef<HTMLDivElement>(null);
+  const [copied, setCopied] = useState(false);
+  // Tool outputs are model-generated and historic conversations may contain
+  // older payload shapes. Normalize immediately before rendering as a final
+  // defensive boundary.
+  const normalizedConfig = useMemo(() => normalizeChartConfig(config), [config]);
+  const {
+    chartType,
+    title,
+    subtitle,
+    data,
+    xAxisKey,
+    series,
+    colors,
+    stacked,
+    showLegend = true,
+    xAxisLabel,
+    yAxisLabel,
+  } = normalizedConfig;
+
+  const stableData = data;
+  const stableSeries = series;
+  const stableXAxisKey = xAxisKey;
+
+  const chartColors = useDeepMemo(() => {
+    const palette = colors && colors.length > 0 ? colors : CHART_COLORS;
+    return stableSeries.map((s, i) => s.color || palette[i % palette.length]);
+  }, [stableSeries, colors]);
+
+  const pieColors = useDeepMemo(() => {
+    return colors && colors.length > 0 ? colors : CHART_COLORS;
+  }, [colors]);
+
+  const chartDots = useDeepMemo(() => {
+    return chartColors.map((color) => ({ r: 3, fill: color }));
+  }, [chartColors]);
+
+  const handleCopy = useCallback(() => {
+    copyDataToClipboard(stableData);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [stableData]);
+
+  const handleDownload = useCallback(() => downloadCSV(stableData, title), [stableData, title]);
+
+  // Memoize axis labels stably
+  const xLabelObj = useDeepMemo(
+    () =>
+      xAxisLabel
+        ? {
+            value: xAxisLabel,
+            position: 'insideBottom',
+            offset: X_AXIS_LABEL_OFFSET,
+            style: { fontSize: 11, fill: 'var(--muted-foreground)' },
+          }
+        : undefined,
+    [xAxisLabel],
+  );
+
+  const yLabelObj = useDeepMemo(
+    () =>
+      yAxisLabel
+        ? {
+            value: yAxisLabel,
+            angle: -90,
+            position: 'insideLeft',
+            offset: Y_AXIS_LABEL_OFFSET,
+            style: { fontSize: 11, fill: 'var(--muted-foreground)' },
+          }
+        : undefined,
+    [yAxisLabel],
+  );
+
+  const renderChart = () => {
+    switch (chartType) {
+      case 'bar':
+        return (
+          <BarChart
+            data={stableData}
+            barGap={4}
+            barCategoryGap="20%"
+            margin={CARTESIAN_CHART_MARGIN}
+          >
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--border)"
+              opacity={0.4}
+              vertical={false}
+            />
+            <XAxis
+              dataKey={stableXAxisKey}
+              tick={AXIS_TICK_STYLE}
+              axisLine={AXIS_LINE_STYLE}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              minTickGap={X_AXIS_MIN_TICK_GAP}
+              height={X_AXIS_HEIGHT}
+              label={xLabelObj as any}
+            />
+            <YAxis
+              tick={AXIS_TICK_STYLE}
+              axisLine={false}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              width={Y_AXIS_WIDTH}
+              label={yLabelObj as any}
+            />
+            <Tooltip content={CustomTooltip} cursor={false} />
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE} />
+            )}
+            {stableSeries.map((s, i) => (
+              <Bar
+                key={s.dataKey}
+                dataKey={s.dataKey}
+                name={s.label || s.dataKey}
+                fill={chartColors[i]}
+                stackId={stacked ? 'stack' : undefined}
+                radius={BAR_RADIUS as any}
+                maxBarSize={40}
+                animationDuration={700}
+                animationEasing="ease-in-out"
+              />
+            ))}
+          </BarChart>
+        );
+
+      case 'area':
+        return (
+          <AreaChart data={stableData} margin={CARTESIAN_CHART_MARGIN}>
+            <ChartGradients series={stableSeries} />
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--border)"
+              opacity={0.4}
+              vertical={false}
+            />
+            <XAxis
+              dataKey={stableXAxisKey}
+              tick={AXIS_TICK_STYLE}
+              axisLine={AXIS_LINE_STYLE}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              minTickGap={X_AXIS_MIN_TICK_GAP}
+              height={X_AXIS_HEIGHT}
+              label={xLabelObj as any}
+            />
+            <YAxis
+              tick={AXIS_TICK_STYLE}
+              axisLine={false}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              width={Y_AXIS_WIDTH}
+              label={yLabelObj as any}
+            />
+            <Tooltip content={CustomTooltip} />
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE} />
+            )}
+            {stableSeries.map((s, i) => (
+              <Area
+                key={s.dataKey}
+                type="monotone"
+                dataKey={s.dataKey}
+                name={s.label || s.dataKey}
+                stroke={chartColors[i]}
+                strokeWidth={2}
+                fill={`url(#gradient-${s.dataKey})`}
+                stackId={stacked ? 'stack' : undefined}
+                animationDuration={800}
+                animationEasing="ease-in-out"
+              />
+            ))}
+          </AreaChart>
+        );
+
+      case 'line':
+        return (
+          <LineChart data={stableData} margin={CARTESIAN_CHART_MARGIN}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--border)"
+              opacity={0.4}
+              vertical={false}
+            />
+            <XAxis
+              dataKey={stableXAxisKey}
+              tick={AXIS_TICK_STYLE}
+              axisLine={AXIS_LINE_STYLE}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              minTickGap={X_AXIS_MIN_TICK_GAP}
+              height={X_AXIS_HEIGHT}
+              label={xLabelObj as any}
+            />
+            <YAxis
+              tick={AXIS_TICK_STYLE}
+              axisLine={false}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              width={Y_AXIS_WIDTH}
+              label={yLabelObj as any}
+            />
+            <Tooltip content={CustomTooltip} />
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE} />
+            )}
+            {stableSeries.map((s, i) => (
+              <Line
+                key={s.dataKey}
+                type="monotone"
+                dataKey={s.dataKey}
+                name={s.label || s.dataKey}
+                stroke={chartColors[i]}
+                strokeWidth={2}
+                dot={chartDots[i]}
+                activeDot={ACTIVE_DOT}
+                animationDuration={800}
+                animationEasing="ease-in-out"
+              />
+            ))}
+          </LineChart>
+        );
+
+      case 'pie': {
+        const dataKey = stableSeries[0]?.dataKey || 'value';
+        return (
+          <PieChart>
+            <Tooltip content={CustomTooltip} />
+            <Pie
+              data={stableData}
+              dataKey={dataKey}
+              nameKey={stableXAxisKey}
+              cx="50%"
+              cy="50%"
+              outerRadius="75%"
+              innerRadius="48%"
+              paddingAngle={2}
+              animationDuration={700}
+              animationEasing="ease-in-out"
+              label={renderPieLabel}
+              labelLine={PIE_LABEL_LINE}
+            >
+              {stableData.map((entry, i) => (
+                <Cell
+                  key={`cell-${i}`}
+                  fill={pieColors[i % pieColors.length]}
+                  stroke="var(--card)"
+                  strokeWidth={2}
+                />
+              ))}
+            </Pie>
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE_PIE} />
+            )}
+          </PieChart>
+        );
+      }
+
+      case 'scatter':
+        return (
+          <ScatterChart margin={CARTESIAN_CHART_MARGIN}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--border)"
+              opacity={0.4}
+              vertical={false}
+            />
+            <XAxis
+              dataKey={stableXAxisKey}
+              type="number"
+              tick={AXIS_TICK_STYLE}
+              axisLine={AXIS_LINE_STYLE}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              minTickGap={X_AXIS_MIN_TICK_GAP}
+              height={X_AXIS_HEIGHT}
+              name={xAxisLabel || stableXAxisKey}
+              label={xLabelObj as any}
+            />
+            <YAxis
+              dataKey={stableSeries[0]?.dataKey}
+              type="number"
+              tick={AXIS_TICK_STYLE}
+              axisLine={false}
+              tickLine={false}
+              tickMargin={AXIS_TICK_MARGIN}
+              width={Y_AXIS_WIDTH}
+              name={yAxisLabel || stableSeries[0]?.label || stableSeries[0]?.dataKey}
+              label={yLabelObj as any}
+            />
+            <Tooltip content={CustomTooltip} cursor={SCATTER_CURSOR} />
+            <Scatter
+              name={stableSeries[0]?.label || stableSeries[0]?.dataKey}
+              data={stableData}
+              fill={chartColors[0]}
+              animationDuration={700}
+              animationEasing="ease-in-out"
+            />
+          </ScatterChart>
+        );
+
+      case 'radar':
+        return (
+          <RadarChart data={stableData} outerRadius="75%">
+            <PolarGrid stroke="var(--border)" opacity={0.5} />
+            <PolarAngleAxis dataKey={stableXAxisKey} tick={POLAR_ANGLE_TICK} />
+            <PolarRadiusAxis tick={POLAR_RADIUS_TICK} />
+            <Tooltip content={CustomTooltip} />
+            {stableSeries.map((s, i) => (
+              <Radar
+                key={s.dataKey}
+                dataKey={s.dataKey}
+                name={s.label || s.dataKey}
+                stroke={chartColors[i]}
+                fill={chartColors[i]}
+                fillOpacity={0.12}
+                strokeWidth={2}
+                animationDuration={700}
+                animationEasing="ease-in-out"
+              />
+            ))}
+            {showLegend && (
+              <Legend iconType="circle" iconSize={7} wrapperStyle={LEGEND_WRAPPER_STYLE_PIE} />
+            )}
+          </RadarChart>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  if (normalizedConfig.error) {
+    return (
+      <div className="my-3 flex flex-col items-center justify-center rounded-lg border border-border/70 bg-transparent p-6 text-center text-muted-foreground">
+        <p className="text-sm">This chart could not be prepared</p>
+        <p className="text-xs opacity-70 mt-1">{normalizedConfig.error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={chartRef}
+      data-testid="chat-chart"
+      className="my-3 overflow-hidden rounded-lg border border-border/70 bg-muted/25 animate-in fade-in duration-300 [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none [&_*:focus]:outline-none [&_*:focus-visible]:outline-none [&_*:focus-visible]:ring-0"
+    >
+      {/* Header */}
+      <div className="flex flex-row items-center justify-between gap-4 border-b border-border/30 px-3.5 py-2.5">
+        <div className="flex flex-col justify-center min-w-0">
+          <h3 className="text-sm font-semibold text-foreground truncate">{title}</h3>
+          {subtitle && <p className="mt-0.5 text-xs text-muted-foreground truncate">{subtitle}</p>}
+        </div>
+      </div>
+
+      <div className="px-1 pt-2.5 pb-0">
+        <div className="h-68 min-h-68 w-full sm:h-72 sm:min-h-72">
+          <ResponsiveContainer width="100%" height="100%" debounce={50}>
+            {renderChart() as any}
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Footer actions */}
+      <div className="flex flex-wrap items-center justify-start gap-1.5 border-t border-border/30 px-3 py-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1.5 text-[11px] text-muted-foreground hover:text-foreground focus:ring-0 focus-visible:ring-0"
+          onClick={handleCopy}
+        >
+          {copied ? <Check className="h-3 w-3 text-emerald-500" /> : <Copy className="h-3 w-3" />}
+          {copied ? 'Copied' : 'Copy Data'}
+        </Button>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1.5 text-[11px] text-muted-foreground hover:text-foreground focus:ring-0 focus-visible:ring-0"
+          onClick={handleDownload}
+        >
+          <Download className="h-3 w-3" />
+          CSV
+        </Button>
+      </div>
+    </div>
+  );
+}