@libredb/studio 0.9.7

package/src/components/NL2SQLPanel.tsx

@@ -0,0 +1,281 @@
+"use client";
+
+import { useState, useRef, useEffect, type FormEvent } from 'react';
+import { Send, Loader2, Sparkles, X, Play, MessageSquare, Trash2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ConversationMessage {
+  role: 'user' | 'assistant';
+  content: string;
+  query?: string; // Extracted SQL/JSON query from assistant response
+}
+
+interface NL2SQLPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onExecuteQuery: (query: string) => void;
+  onLoadQuery: (query: string) => void;
+  schemaContext: string;
+  databaseType?: string;
+  queryLanguage?: string;
+  /** Optional API adapter: when provided, bypasses the built-in /api/ai/nl2sql fetch. */
+  onNL2SQL?: (params: { prompt: string; schemaContext: string; conversationHistory?: { role: string; content: string }[] }) => Promise<string>;
+}
+
+function extractCodeBlock(text: string): string | null {
+  // Match ```sql ... ``` or ```json ... ``` or plain ``` ... ```
+  const match = text.match(/```(?:sql|json|mongodb)?\s*\n?([\s\S]*?)```/);
+  return match ? match[1].trim() : null;
+}
+
+export function NL2SQLPanel({
+  isOpen,
+  onClose,
+  onExecuteQuery,
+  onLoadQuery,
+  schemaContext,
+  databaseType,
+  queryLanguage,
+  onNL2SQL,
+}: NL2SQLPanelProps) {
+  const [question, setQuestion] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [messages, setMessages] = useState<ConversationMessage[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  useEffect(() => {
+    if (isOpen) inputRef.current?.focus();
+  }, [isOpen]);
+
+  const handleSubmit = async (e?: FormEvent) => {
+    if (e) e.preventDefault();
+    if (!question.trim() || isLoading) return;
+
+    const userMsg: ConversationMessage = { role: 'user', content: question.trim() };
+    setMessages(prev => [...prev, userMsg]);
+    setQuestion('');
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Build filtered schema context (top 100 tables)
+      let filteredSchema = '';
+      if (schemaContext) {
+        try {
+          const tables = JSON.parse(schemaContext);
+          const sorted = [...tables]
+            .sort((a: { rowCount?: number }, b: { rowCount?: number }) => (b.rowCount || 0) - (a.rowCount || 0))
+            .slice(0, 100);
+          filteredSchema = sorted.map((t: { name: string; rowCount?: number; columns?: { name: string; type: string; isPrimary?: boolean }[] }) => {
+            const cols = t.columns?.slice(0, 10).map(c => `${c.name} (${c.type}${c.isPrimary ? ', PK' : ''})`).join(', ') || '';
+            return `Table: ${t.name} (${t.rowCount || 0} rows)\nColumns: ${cols}`;
+          }).join('\n\n');
+        } catch {
+          filteredSchema = schemaContext.substring(0, 3000);
+        }
+      }
+
+      // Build conversation history (exclude current question)
+      const history = messages.map(m => ({ role: m.role, content: m.content }));
+
+      let fullResponse = '';
+
+      if (onNL2SQL) {
+        // Platform adapter: use callback instead of fetch
+        fullResponse = await onNL2SQL({
+          prompt: question.trim(),
+          schemaContext: filteredSchema,
+          conversationHistory: history,
+        });
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/ai/nl2sql', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            question: question.trim(),
+            schemaContext: filteredSchema,
+            databaseType,
+            queryLanguage,
+            conversationHistory: history,
+          }),
+        });
+
+        if (!response.ok) {
+          const errData = await response.json();
+          throw new Error(errData.error || 'Request failed');
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error('No reader');
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          fullResponse += new TextDecoder().decode(value);
+        }
+      }
+
+      const extractedQuery = extractCodeBlock(fullResponse);
+      const assistantMsg: ConversationMessage = {
+        role: 'assistant',
+        content: fullResponse,
+        query: extractedQuery || undefined,
+      };
+      setMessages(prev => [...prev, assistantMsg]);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Unknown error';
+      setError(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const clearConversation = () => {
+    setMessages([]);
+    setError(null);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="h-full flex flex-col bg-[#080808]">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a]">
+        <div className="flex items-center gap-2">
+          <div className="p-1 rounded bg-violet-500/10">
+            <MessageSquare className="w-3.5 h-3.5 text-violet-400" />
+          </div>
+          <span className="text-[10px] font-bold text-violet-400 uppercase tracking-widest">
+            Natural Language Query
+          </span>
+          {messages.length > 0 && (
+            <span className="text-[9px] text-zinc-500 font-mono">
+              {messages.filter(m => m.role === 'user').length} questions
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          {messages.length > 0 && (
+            <button
+              onClick={clearConversation}
+              className="p-1.5 rounded hover:bg-white/5 text-zinc-500 hover:text-zinc-300 transition-colors"
+              title="Clear conversation"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded hover:bg-white/5 text-zinc-500 hover:text-zinc-300 transition-colors"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-auto p-4 space-y-3">
+        {messages.length === 0 && (
+          <div className="flex flex-col items-center justify-center h-full opacity-40">
+            <Sparkles className="w-8 h-8 mb-3" />
+            <p className="text-sm font-medium">Ask a question in plain English</p>
+            <p className="text-[10px] text-zinc-500 mt-1">
+              e.g. &quot;Show me the top 10 employees by salary&quot;
+            </p>
+          </div>
+        )}
+
+        {messages.map((msg, i) => (
+          <div key={i} className={cn("flex gap-2", msg.role === 'user' ? "justify-end" : "justify-start")}>
+            <div className={cn(
+              "max-w-[85%] rounded-lg px-3 py-2 text-xs",
+              msg.role === 'user'
+                ? "bg-violet-600/20 border border-violet-500/20 text-zinc-200"
+                : "bg-[#111] border border-white/5 text-zinc-300"
+            )}>
+              {msg.role === 'user' ? (
+                <p>{msg.content}</p>
+              ) : (
+                <div>
+                  {/* Show extracted query with action buttons */}
+                  {msg.query && (
+                    <div className="mb-2">
+                      <pre className="bg-[#050505] rounded p-2 text-[11px] font-mono text-blue-300 overflow-x-auto whitespace-pre-wrap border border-white/5">
+                        {msg.query}
+                      </pre>
+                      <div className="flex gap-1.5 mt-1.5">
+                        <button
+                          onClick={() => onExecuteQuery(msg.query!)}
+                          className="flex items-center gap-1 px-2 py-1 rounded bg-blue-600/20 border border-blue-500/20 text-blue-400 text-[10px] font-bold hover:bg-blue-600/30 transition-colors"
+                        >
+                          <Play className="w-3 h-3 fill-current" /> Run
+                        </button>
+                        <button
+                          onClick={() => onLoadQuery(msg.query!)}
+                          className="flex items-center gap-1 px-2 py-1 rounded bg-white/5 border border-white/5 text-zinc-400 text-[10px] font-bold hover:bg-white/10 transition-colors"
+                        >
+                          Load to Editor
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                  {/* Show explanation text (non-code parts) */}
+                  {msg.content.replace(/```[\s\S]*?```/g, '').trim() && (
+                    <p className="text-zinc-400 text-[11px] leading-relaxed whitespace-pre-wrap">
+                      {msg.content.replace(/```[\s\S]*?```/g, '').trim()}
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+
+        {isLoading && (
+          <div className="flex gap-2 justify-start">
+            <div className="bg-[#111] border border-white/5 rounded-lg px-3 py-2 flex items-center gap-2 text-zinc-500 text-xs">
+              <Loader2 className="w-3 h-3 animate-spin" />
+              Generating query...
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2 text-xs text-red-400">
+            {error}
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <form onSubmit={handleSubmit} className="border-t border-white/5 p-3 bg-[#0a0a0a]">
+        <div className="flex items-center gap-2">
+          <input
+            ref={inputRef}
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            placeholder="Ask in plain English... (e.g. 'How many employees were hired in 1986?')"
+            className="flex-1 bg-[#111] border border-white/10 rounded-lg px-3 py-2 text-xs text-zinc-200 placeholder:text-zinc-600 outline-none focus:border-violet-500/30"
+            disabled={isLoading}
+          />
+          <button
+            type="submit"
+            disabled={isLoading || !question.trim()}
+            className="bg-violet-600 hover:bg-violet-500 disabled:opacity-50 px-3 py-2 rounded-lg text-white text-xs font-bold transition-colors flex items-center gap-1.5"
+          >
+            {isLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Send className="w-3 h-3" />}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/src/components/PivotTable.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { Columns3, GripVertical, ArrowRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { QueryResult } from '@/lib/types';
+
+interface PivotTableProps {
+  result: QueryResult | null;
+  onLoadQuery?: (query: string) => void;
+}
+
+type AggFunction = 'count' | 'sum' | 'avg' | 'min' | 'max';
+
+const AGG_LABELS: Record<AggFunction, string> = {
+  count: 'COUNT',
+  sum: 'SUM',
+  avg: 'AVG',
+  min: 'MIN',
+  max: 'MAX',
+};
+
+export function aggregate(values: unknown[], fn: AggFunction): string {
+  const nums = values.map(v => Number(v)).filter(n => !isNaN(n));
+
+  switch (fn) {
+    case 'count': return String(values.length);
+    case 'sum': return nums.length ? nums.reduce((a, b) => a + b, 0).toFixed(2) : '0';
+    case 'avg': return nums.length ? (nums.reduce((a, b) => a + b, 0) / nums.length).toFixed(2) : '0';
+    case 'min': return nums.length ? String(Math.min(...nums)) : '-';
+    case 'max': return nums.length ? String(Math.max(...nums)) : '-';
+  }
+}
+
+export function PivotTable({ result, onLoadQuery }: PivotTableProps) {
+  const [rowField, setRowField] = useState<string | null>(null);
+  const [colField, setColField] = useState<string | null>(null);
+  const [valueField, setValueField] = useState<string | null>(null);
+  const [aggFunction, setAggFunction] = useState<AggFunction>('count');
+  const fields = result?.fields || [];
+  const rows = useMemo(() => result?.rows || [], [result?.rows]);
+
+  // Auto-detect fields on first render
+  useEffect(() => {
+    if (fields.length >= 2 && !rowField) {
+      const strCol = fields.find(f => {
+        const sample = rows[0]?.[f];
+        return typeof sample === 'string';
+      });
+      if (strCol) setRowField(strCol);
+
+      const numCol = fields.find(f => {
+        const sample = rows[0]?.[f];
+        return typeof sample === 'number';
+      });
+      if (numCol) setValueField(numCol);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fields.length]);
+
+  // Compute pivot data
+  const pivotData = useMemo(() => {
+    if (!rowField || !rows.length) return null;
+
+    // Group rows
+    const groups = new Map<string, Map<string, unknown[]>>();
+    const colValues = new Set<string>();
+
+    for (const row of rows) {
+      const rowKey = String(row[rowField] ?? 'NULL');
+      const colKey = colField ? String(row[colField] ?? 'NULL') : '__all__';
+      const value = valueField ? row[valueField] : 1;
+
+      if (colField) colValues.add(colKey);
+
+      if (!groups.has(rowKey)) groups.set(rowKey, new Map());
+      const colMap = groups.get(rowKey)!;
+      if (!colMap.has(colKey)) colMap.set(colKey, []);
+      colMap.get(colKey)!.push(value);
+    }
+
+    const colKeys = colField ? Array.from(colValues).sort() : ['__all__'];
+
+    // Build pivot rows
+    const pivotRows: { rowKey: string; values: Map<string, string> }[] = [];
+    for (const [rowKey, colMap] of groups) {
+      const values = new Map<string, string>();
+      for (const ck of colKeys) {
+        const vals = colMap.get(ck) || [];
+        values.set(ck, aggregate(vals, aggFunction));
+      }
+      pivotRows.push({ rowKey, values });
+    }
+
+    // Sort by row key
+    pivotRows.sort((a, b) => a.rowKey.localeCompare(b.rowKey));
+
+    return { colKeys, pivotRows };
+  }, [rows, rowField, colField, valueField, aggFunction]);
+
+  // Generate SQL
+  const generateSQL = useCallback(() => {
+    if (!rowField) return '';
+    const select: string[] = [`"${rowField}"`];
+    const groupBy: string[] = [`"${rowField}"`];
+
+    if (colField) {
+      // Use CASE WHEN for pivot columns
+      const colKeys = pivotData?.colKeys || [];
+      for (const ck of colKeys) {
+        if (ck === '__all__') continue;
+        const valExpr = valueField ? `"${valueField}"` : '1';
+        select.push(
+          `${AGG_LABELS[aggFunction]}(CASE WHEN "${colField}" = '${ck.replace(/'/g, "''")}' THEN ${valExpr} END) AS "${ck}"`
+        );
+      }
+    } else {
+      const valExpr = valueField ? `"${valueField}"` : '*';
+      select.push(`${AGG_LABELS[aggFunction]}(${valExpr}) AS "${aggFunction}_value"`);
+    }
+
+    return `SELECT\n  ${select.join(',\n  ')}\nFROM your_table\nGROUP BY ${groupBy.join(', ')}\nORDER BY ${groupBy.join(', ')};`;
+  }, [rowField, colField, valueField, aggFunction, pivotData]);
+
+  if (!result || rows.length === 0) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center opacity-30">
+        <Columns3 className="w-8 h-8 mb-3" />
+        <p className="text-sm font-medium">Pivot Table</p>
+        <p className="text-[10px] text-zinc-500 mt-1">Execute a query to create pivot tables</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-[#080808]">
+      {/* Config Bar */}
+      <div className="flex items-center gap-3 px-4 py-2 border-b border-white/5 bg-[#0a0a0a] flex-wrap">
+        {/* Row Field */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] text-zinc-500 font-bold uppercase">Rows:</span>
+          <select
+            value={rowField || ''}
+            onChange={e => setRowField(e.target.value || null)}
+            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-[11px] text-zinc-300 outline-none"
+          >
+            <option value="">Select...</option>
+            {fields.map(f => <option key={f} value={f}>{f}</option>)}
+          </select>
+        </div>
+
+        {/* Column Field */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] text-zinc-500 font-bold uppercase">Columns:</span>
+          <select
+            value={colField || ''}
+            onChange={e => setColField(e.target.value || null)}
+            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-[11px] text-zinc-300 outline-none"
+          >
+            <option value="">None</option>
+            {fields.filter(f => f !== rowField).map(f => <option key={f} value={f}>{f}</option>)}
+          </select>
+        </div>
+
+        {/* Value Field */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] text-zinc-500 font-bold uppercase">Values:</span>
+          <select
+            value={valueField || ''}
+            onChange={e => setValueField(e.target.value || null)}
+            className="bg-[#111] border border-white/10 rounded px-2 py-1 text-[11px] text-zinc-300 outline-none"
+          >
+            <option value="">Count</option>
+            {fields.filter(f => f !== rowField && f !== colField).map(f => <option key={f} value={f}>{f}</option>)}
+          </select>
+        </div>
+
+        {/* Aggregation */}
+        <div className="flex items-center gap-1">
+          {(Object.keys(AGG_LABELS) as AggFunction[]).map(fn => (
+            <button
+              key={fn}
+              onClick={() => setAggFunction(fn)}
+              className={cn(
+                "px-1.5 py-0.5 rounded text-[10px] font-bold transition-colors",
+                aggFunction === fn
+                  ? "bg-blue-500/20 text-blue-400 border border-blue-500/20"
+                  : "text-zinc-600 hover:text-zinc-400"
+              )}
+            >
+              {AGG_LABELS[fn]}
+            </button>
+          ))}
+        </div>
+
+        {/* Generate SQL Button */}
+        {onLoadQuery && rowField && (
+          <button
+            onClick={() => {
+              const sql = generateSQL();
+              if (sql) onLoadQuery(sql);
+            }}
+            className="ml-auto flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold text-zinc-500 hover:text-blue-400 hover:bg-blue-500/10 transition-colors"
+          >
+            <ArrowRight className="w-3 h-3" /> Generate SQL
+          </button>
+        )}
+      </div>
+
+      {/* Pivot Result */}
+      <div className="flex-1 overflow-auto">
+        {pivotData && pivotData.pivotRows.length > 0 ? (
+          <table className="w-full text-[11px] font-mono">
+            <thead className="sticky top-0 z-10 bg-[#0d0d0d]">
+              <tr>
+                <th className="text-left px-3 py-2 text-zinc-500 border-b border-r border-white/5 font-bold uppercase tracking-wider">
+                  {rowField}
+                </th>
+                {pivotData.colKeys.map(ck => (
+                  <th key={ck} className="text-right px-3 py-2 text-zinc-500 border-b border-r border-white/5 font-bold">
+                    {ck === '__all__' ? `${AGG_LABELS[aggFunction]}(${valueField || '*'})` : ck}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {pivotData.pivotRows.map((row, i) => (
+                <tr key={i} className="hover:bg-blue-500/[0.03] border-b border-white/5">
+                  <td className="px-3 py-1.5 text-zinc-300 border-r border-white/5 font-medium">
+                    {row.rowKey}
+                  </td>
+                  {pivotData.colKeys.map(ck => (
+                    <td key={ck} className="px-3 py-1.5 text-right text-amber-500/90 border-r border-white/5">
+                      {row.values.get(ck) || '0'}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full opacity-30">
+            <GripVertical className="w-6 h-6 mb-2" />
+            <p className="text-xs">Select row and value fields to build pivot</p>
+          </div>
+        )}
+      </div>
+
+      {/* Status */}
+      {pivotData && (
+        <div className="px-4 py-1.5 border-t border-white/5 bg-[#0a0a0a] text-[10px] text-zinc-500 font-mono">
+          {pivotData.pivotRows.length} groups • {pivotData.colKeys.length} columns • {AGG_LABELS[aggFunction]} aggregation
+        </div>
+      )}
+    </div>
+  );
+}