@jlongo78/agent-spaces 0.9.6 → 0.9.8

package/.next/standalone/src/components/wizard/chart-wizard.tsx

@@ -0,0 +1,405 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { X, Send, BarChart3 } from 'lucide-react';
+import { api } from '@/lib/api';
+
+interface DataPoint {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+interface Series {
+  name: string;
+  color: string;
+  values: number[];
+}
+
+interface ChartSpec {
+  chart: {
+    title: string;
+    type: 'bar' | 'line' | 'pie' | 'scatter' | 'heatmap' | 'table';
+    xAxis?: string;
+    yAxis?: string;
+    color: string;
+  };
+  data: DataPoint[];
+  series?: Series[];
+  labels?: string[];
+  options: {
+    showLegend?: boolean;
+    stacked?: boolean;
+    fillArea?: boolean;
+  };
+  summary: string;
+}
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+const SERIES_COLORS = [
+  '#6366f1', '#22c55e', '#f59e0b', '#ef4444', '#3b82f6',
+  '#ec4899', '#14b8a6', '#a855f7', '#f97316',
+];
+
+function ChartPreview({ spec }: { spec: ChartSpec }) {
+  // Multi-series line chart
+  if (spec.chart.type === 'line' && spec.series && spec.series.length > 0) {
+    const labels = spec.labels || [];
+    const allVals = spec.series.flatMap(s => s.values);
+    const maxVal = Math.max(...allVals, 1);
+    const numPoints = labels.length || Math.max(...spec.series.map(s => s.values.length));
+    const w = 340, h = 180, padL = 10, padR = 10, padT = 10, padB = 25;
+    const plotW = w - padL - padR;
+    const plotH = h - padT - padB;
+
+    return (
+      <div>
+        <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="280" preserveAspectRatio="xMidYMid meet">
+          {/* Grid lines */}
+          {[0, 0.25, 0.5, 0.75, 1].map((frac, i) => {
+            const y = padT + plotH * (1 - frac);
+            return <line key={i} x1={padL} y1={y} x2={w - padR} y2={y} stroke="#27272a" strokeWidth={0.5} />;
+          })}
+          {/* Series */}
+          {spec.series.map((series, si) => {
+            const color = series.color || SERIES_COLORS[si % SERIES_COLORS.length];
+            const points = series.values.map((v, i) => ({
+              x: padL + (i / Math.max(series.values.length - 1, 1)) * plotW,
+              y: padT + plotH - (v / maxVal) * plotH,
+            }));
+            const pathD = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+            return (
+              <g key={si}>
+                <path d={pathD} fill="none" stroke={color} strokeWidth={1.5} opacity={0.85} />
+                {points.map((p, i) => (
+                  <circle key={i} cx={p.x} cy={p.y} r={2} fill={color} />
+                ))}
+              </g>
+            );
+          })}
+          {/* X-axis labels */}
+          {labels.map((label, i) => {
+            const x = padL + (i / Math.max(labels.length - 1, 1)) * plotW;
+            return (
+              <text key={i} x={x} y={h - 5} textAnchor="middle" fill="#71717a" fontSize={7}>{label}</text>
+            );
+          })}
+        </svg>
+        {/* Legend */}
+        <div className="flex flex-wrap gap-x-3 gap-y-1 mt-2">
+          {spec.series.map((s, i) => (
+            <div key={i} className="flex items-center gap-1.5 text-[10px]">
+              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: s.color || SERIES_COLORS[i % SERIES_COLORS.length] }} />
+              <span className="text-zinc-400">{s.name}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Single-series charts
+  const data = spec.data || [];
+  if (data.length === 0) {
+    return <div className="text-xs text-zinc-500 text-center py-8">No data to display</div>;
+  }
+  const maxVal = Math.max(...data.map(d => d.value), 1);
+
+  if (spec.chart.type === 'bar') {
+    const barMaxH = 200;
+    return (
+      <div>
+        {spec.chart.yAxis && <div className="text-xs text-zinc-500 mb-2">{spec.chart.yAxis}</div>}
+        <div className="flex items-end gap-2" style={{ height: barMaxH + 30 }}>
+          {spec.data.map((d, i) => {
+            const barH = Math.max((d.value / maxVal) * barMaxH, 4);
+            return (
+              <div key={i} className="flex-1 flex flex-col items-center justify-end" style={{ height: barMaxH + 30 }}>
+                <div className="text-[10px] text-zinc-400 mb-1">{d.value}</div>
+                <div
+                  className="w-full rounded-t transition-all duration-300"
+                  style={{ height: barH, backgroundColor: d.color || spec.chart.color }}
+                />
+                <div className="text-[10px] text-zinc-500 mt-1.5 truncate w-full text-center">{d.label}</div>
+              </div>
+            );
+          })}
+        </div>
+        {spec.chart.xAxis && <div className="text-xs text-zinc-500 text-center mt-2">{spec.chart.xAxis}</div>}
+      </div>
+    );
+  }
+
+  if (spec.chart.type === 'line') {
+    const points = spec.data.map((d, i) => ({
+      x: (i / Math.max(spec.data.length - 1, 1)) * 280 + 10,
+      y: 140 - (d.value / maxVal) * 120,
+    }));
+    const pathD = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+    const areaD = pathD + ` L ${points[points.length - 1]?.x || 0} 140 L ${points[0]?.x || 0} 140 Z`;
+
+    return (
+      <div>
+        <svg viewBox="0 0 300 160" width="100%" height="220" preserveAspectRatio="xMidYMid meet">
+          {spec.options.fillArea && (
+            <path d={areaD} fill={spec.chart.color} opacity={0.15} />
+          )}
+          <path d={pathD} fill="none" stroke={spec.chart.color} strokeWidth={2} />
+          {points.map((p, i) => (
+            <g key={i}>
+              <circle cx={p.x} cy={p.y} r={3} fill={spec.chart.color} />
+              <text x={p.x} y={155} textAnchor="middle" fill="#71717a" fontSize={8}>{spec.data[i].label}</text>
+              <text x={p.x} y={p.y - 8} textAnchor="middle" fill="#a1a1aa" fontSize={7}>{spec.data[i].value}</text>
+            </g>
+          ))}
+        </svg>
+      </div>
+    );
+  }
+
+  if (spec.chart.type === 'pie') {
+    const total = spec.data.reduce((s, d) => s + d.value, 0) || 1;
+    let cumAngle = -Math.PI / 2;
+    const slices = spec.data.map((d, i) => {
+      const angle = (d.value / total) * Math.PI * 2;
+      const startAngle = cumAngle;
+      cumAngle += angle;
+      const endAngle = cumAngle;
+      const x1 = 75 + 60 * Math.cos(startAngle);
+      const y1 = 75 + 60 * Math.sin(startAngle);
+      const x2 = 75 + 60 * Math.cos(endAngle);
+      const y2 = 75 + 60 * Math.sin(endAngle);
+      const largeArc = angle > Math.PI ? 1 : 0;
+      return {
+        d: `M 75 75 L ${x1} ${y1} A 60 60 0 ${largeArc} 1 ${x2} ${y2} Z`,
+        color: d.color || SERIES_COLORS[i % SERIES_COLORS.length],
+        label: d.label,
+        pct: Math.round((d.value / total) * 100),
+      };
+    });
+
+    return (
+      <div className="flex items-center gap-4">
+        <svg viewBox="0 0 150 150" width="128" height="128">
+          {slices.map((s, i) => (
+            <path key={i} d={s.d} fill={s.color} stroke="#09090b" strokeWidth={1} />
+          ))}
+        </svg>
+        <div className="space-y-1">
+          {slices.map((s, i) => (
+            <div key={i} className="flex items-center gap-2 text-[11px]">
+              <span className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: s.color }} />
+              <span className="text-zinc-300">{s.label}</span>
+              <span className="text-zinc-500">{s.pct}%</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (spec.chart.type === 'scatter') {
+    return (
+      <div>
+        <svg viewBox="0 0 300 160" width="100%" height="220" preserveAspectRatio="xMidYMid meet">
+          {spec.data.map((d, i) => {
+            const x = (i / Math.max(spec.data.length - 1, 1)) * 260 + 20;
+            const y = 140 - (d.value / maxVal) * 120;
+            return (
+              <g key={i}>
+                <circle cx={x} cy={y} r={4} fill={d.color || spec.chart.color} opacity={0.7} />
+                <text x={x} y={155} textAnchor="middle" fill="#71717a" fontSize={8}>{d.label}</text>
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+    );
+  }
+
+  // table fallback
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-xs">
+        <thead>
+          <tr className="border-b border-zinc-700">
+            <th className="text-left py-1.5 px-2 text-zinc-400 font-medium">Label</th>
+            <th className="text-right py-1.5 px-2 text-zinc-400 font-medium">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {spec.data.map((d, i) => (
+            <tr key={i} className="border-b border-zinc-800/50">
+              <td className="py-1.5 px-2 text-zinc-300">{d.label}</td>
+              <td className="py-1.5 px-2 text-right text-zinc-200 font-mono">{d.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function ChartWizard({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [spec, setSpec] = useState<ChartSpec | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [input, setInput] = useState('');
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
+  }, [messages, loading]);
+
+  const sendMessage = useCallback(async (text: string) => {
+    const userMsg: Message = { role: 'user', content: text };
+    const updated = [...messages, userMsg];
+    setMessages(updated);
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(api('/api/wizard/chart'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ messages: updated, currentSpec: spec }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+
+      setMessages([...updated, { role: 'assistant', content: data.reply }]);
+      if (data.spec) setSpec(data.spec);
+    } catch (e: any) {
+      setError(e.message);
+    }
+    setLoading(false);
+  }, [messages, spec]);
+
+  const handleSend = () => {
+    const text = input.trim();
+    if (!text || loading) return;
+    setInput('');
+    sendMessage(text);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-zinc-950 flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-3 border-b border-zinc-800 flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <BarChart3 className="w-4 h-4 text-emerald-400" />
+          <h2 className="text-sm font-semibold text-zinc-100">Chart Builder</h2>
+          <span className="text-[10px] text-zinc-600 bg-zinc-800 px-1.5 py-0.5 rounded">demo</span>
+        </div>
+        <button onClick={onClose} className="text-zinc-500 hover:text-white">
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {error && (
+        <div className="px-6 py-2 bg-red-500/10 border-b border-red-500/20 text-xs text-red-400">
+          {error}
+        </div>
+      )}
+
+      {/* Content: chat left, preview right */}
+      <div className="flex-1 flex overflow-hidden min-h-0">
+        {/* Chat */}
+        <div className="flex-1 flex flex-col border-r border-zinc-800 min-w-0">
+          <div ref={listRef} className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+            {messages.length === 0 && !loading && (
+              <div className="text-center py-12">
+                <p className="text-zinc-400 text-sm mb-1">Describe the data you want to visualize.</p>
+                <p className="text-zinc-600 text-xs">I'll help you pick a chart type and build it.</p>
+              </div>
+            )}
+
+            {messages.map((msg, i) => (
+              <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                <div className={`max-w-[80%] rounded-lg px-3 py-2 text-sm ${
+                  msg.role === 'user' ? 'bg-emerald-700 text-white' : 'bg-zinc-800 text-zinc-200'
+                }`}>
+                  <p className="whitespace-pre-wrap">{msg.content}</p>
+                </div>
+              </div>
+            ))}
+
+            {loading && (
+              <div className="flex justify-start">
+                <div className="bg-zinc-800 rounded-lg px-4 py-3">
+                  <div className="flex gap-1">
+                    <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                    <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                    <span className="w-2 h-2 bg-zinc-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Input */}
+          <div className="px-6 py-3 border-t border-zinc-800 flex-shrink-0">
+            <div className="flex gap-2">
+              <textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSend();
+                  }
+                }}
+                placeholder="Describe your data..."
+                rows={2}
+                className="flex-1 bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-zinc-500 resize-none"
+              />
+              <button
+                onClick={handleSend}
+                disabled={!input.trim() || loading}
+                className="px-4 bg-emerald-600 hover:bg-emerald-500 disabled:bg-zinc-800 disabled:text-zinc-600 text-white rounded-lg flex items-center gap-1.5 text-sm self-end"
+              >
+                <Send className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Chart preview */}
+        <div className="w-[420px] flex-shrink-0 flex flex-col overflow-y-auto">
+          {!spec ? (
+            <div className="flex flex-col items-center justify-center h-full px-6 text-center">
+              <BarChart3 className="w-8 h-8 text-zinc-700 mb-3" />
+              <p className="text-zinc-500 text-sm">Your chart will appear here as you describe your data.</p>
+            </div>
+          ) : (
+            <div className="p-5">
+              <div className="mb-3">
+                <div className="text-sm font-medium text-zinc-200">{spec.chart.title}</div>
+                <div className="text-[10px] text-zinc-500 mt-0.5">
+                  {spec.chart.type} chart
+                  {spec.summary && ` \u2014 ${spec.summary}`}
+                </div>
+              </div>
+              <div className="bg-zinc-900 rounded-lg border border-zinc-800 p-4">
+                <ChartPreview spec={spec} />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}