larkup 0.4.12 → 0.4.14

package/.next/standalone/apps/web/components/chat/tools/chat-data-table.tsx

@@ -0,0 +1,377 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import {
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  Copy,
+  Download,
+  ChevronLeft,
+  ChevronRight,
+  Check,
+  Search,
+  X,
+  Type,
+  Hash,
+  CalendarDays,
+  Table2,
+} from 'lucide-react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { DEFAULT_CHAT_TABLE_PAGE_SIZE, normalizeTableData } from '@/lib/chat/table-presentation';
+
+export interface DataTableConfig {
+  columns: string[];
+  rows: Record<string, any>[];
+  totalRows: number;
+  aggregationResults?: Record<string, number>;
+}
+
+export interface ChatDataTableProps {
+  config: DataTableConfig;
+  /** Tool output is evidence for the answer, not the answer itself. Keep it
+   * tucked away until the user asks to inspect the rows. */
+  compact?: boolean;
+}
+
+function formatCell(value: any): string {
+  if (value === null || value === undefined) return '—';
+  if (typeof value === 'number') {
+    return value.toLocaleString(undefined, { maximumFractionDigits: 4 });
+  }
+  return String(value);
+}
+
+function downloadCSV(columns: string[], rows: Record<string, any>[]) {
+  const csv = [
+    columns.join(','),
+    ...rows.map((row) =>
+      columns
+        .map((c) => {
+          const v = String(row[c] ?? '');
+          return v.includes(',') || v.includes('"') ? `"${v.replace(/"/g, '""')}"` : 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 = 'data.csv';
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function copyTable(columns: string[], rows: Record<string, any>[]) {
+  const text = [
+    columns.join('\t'),
+    ...rows.map((row) => columns.map((c) => String(row[c] ?? '')).join('\t')),
+  ].join('\n');
+  navigator.clipboard.writeText(text);
+}
+
+/* Column type indicators */
+function columnTypeIndicator(
+  col: string,
+  rows: Record<string, any>[],
+): { icon: React.ReactNode; label: string } {
+  const sample = rows.slice(0, 10).map((r) => r[col]);
+  const nonNull = sample.filter((v) => v !== null && v !== undefined && v !== '');
+  if (nonNull.length === 0)
+    return { icon: <Type className="size-3 text-blue-500" />, label: 'text' };
+  const allNum = nonNull.every((v) => !isNaN(Number(v)));
+  if (allNum) return { icon: <Hash className="size-3 text-emerald-500" />, label: 'number' };
+  const allDate = nonNull.every((v) => !isNaN(Date.parse(String(v))));
+  if (allDate) return { icon: <CalendarDays className="size-3 text-orange-500" />, label: 'date' };
+  return { icon: <Type className="size-3 text-blue-500" />, label: 'text' };
+}
+
+const PAGE_SIZES = [DEFAULT_CHAT_TABLE_PAGE_SIZE, 25, 50, 100];
+
+export function ChatDataTable({ config, compact = false }: ChatDataTableProps) {
+  const normalized = useMemo(
+    () => normalizeTableData(config.columns, config.rows),
+    [config.columns, config.rows],
+  );
+  const { columns, rows } = normalized;
+  const { totalRows, aggregationResults } = config;
+  const [sortCol, setSortCol] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(DEFAULT_CHAT_TABLE_PAGE_SIZE);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(!compact);
+
+  // Filter rows by search
+  const filteredRows = useMemo(() => {
+    if (!searchQuery.trim()) return rows;
+    const q = searchQuery.toLowerCase();
+    return rows.filter((row) =>
+      columns.some((col) =>
+        String(row[col] ?? '')
+          .toLowerCase()
+          .includes(q),
+      ),
+    );
+  }, [rows, columns, searchQuery]);
+
+  // Sort
+  const sortedRows = useMemo(() => {
+    if (!sortCol) return filteredRows;
+    return [...filteredRows].sort((a, b) => {
+      const va = a[sortCol];
+      const vb = b[sortCol];
+      if (va == null && vb == null) return 0;
+      if (va == null) return 1;
+      if (vb == null) return -1;
+      const na = Number(va);
+      const nb = Number(vb);
+      if (!isNaN(na) && !isNaN(nb)) return sortDir === 'asc' ? na - nb : nb - na;
+      return sortDir === 'asc'
+        ? String(va).localeCompare(String(vb))
+        : String(vb).localeCompare(String(va));
+    });
+  }, [filteredRows, sortCol, sortDir]);
+
+  // Pagination
+  const totalPages = Math.max(1, Math.ceil(sortedRows.length / pageSize));
+  const displayRows = sortedRows.slice(page * pageSize, (page + 1) * pageSize);
+
+  const handleSort = useCallback(
+    (col: string) => {
+      if (sortCol === col) {
+        setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+      } else {
+        setSortCol(col);
+        setSortDir('asc');
+      }
+      setPage(0);
+    },
+    [sortCol],
+  );
+
+  const handleCopy = useCallback(() => {
+    copyTable(columns, rows);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [columns, rows]);
+
+  const handleDownload = useCallback(() => downloadCSV(columns, rows), [columns, rows]);
+
+  if (columns.length === 0 || rows.length === 0) {
+    return <div className="py-4 text-center text-sm text-muted-foreground">No data returned</div>;
+  }
+
+  if (compact && !isExpanded) {
+    const count = totalRows || rows.length;
+    return (
+      <button
+        type="button"
+        onClick={() => setIsExpanded(true)}
+        className="my-1 inline-flex items-center gap-2 rounded-md border border-border/50 bg-muted/30 px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+      >
+        <Table2 className="size-3.5" />
+        <span>Data checked</span>
+        <span className="rounded-full bg-secondary px-1.5 py-0.5 text-[10px] tabular-nums text-foreground">
+          {count.toLocaleString()} {count === 1 ? 'row' : 'rows'}
+        </span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-border/90 bg-muted my-4 animate-in fade-in slide-in-from-bottom-2 duration-500 [&_*:focus]:outline-none [&_*:focus-visible]:ring-0">
+      {/* Aggregation results (KPI cards) */}
+      {aggregationResults && Object.keys(aggregationResults).length > 0 && (
+        <div className="flex flex-wrap gap-3 border-b border-border/30 px-4 py-3">
+          {Object.entries(aggregationResults).map(([key, value]) => {
+            const [op, ...colParts] = key.split('_');
+            const col = colParts.join('_');
+            return (
+              <div key={key} className="flex flex-col rounded-lg bg-transparent px-2 py-1">
+                <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+                  {op} of {col}
+                </span>
+                <span className="text-lg font-semibold tabular-nums text-foreground">
+                  {typeof value === 'number'
+                    ? value.toLocaleString(undefined, {
+                        maximumFractionDigits: 4,
+                      })
+                    : value}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Toolbar: search + actions */}
+      <div className="flex items-center justify-between gap-2 border-b border-border/30 px-3 py-2">
+        <div className="relative flex-1 max-w-60">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+          <Input
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              setPage(0);
+            }}
+            placeholder="Search rows…"
+            className="h-7 pl-8 pr-8 text-xs border-border/40 focus-visible:ring-0 focus-visible:border-border/60"
+          />
+          {searchQuery && (
+            <button
+              type="button"
+              onClick={() => setSearchQuery('')}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="size-3" />
+            </button>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleCopy}
+            className="h-7 gap-1.5 text-[11px] text-muted-foreground focus:ring-0 focus-visible:ring-0"
+          >
+            {copied ? <Check className="size-3 text-emerald-500" /> : <Copy className="size-3" />}
+            {copied ? 'Copied' : 'Copy'}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDownload}
+            className="h-7 gap-1.5 text-[11px] text-muted-foreground focus:ring-0 focus-visible:ring-0"
+          >
+            <Download className="size-3" />
+            CSV
+          </Button>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto [&::-webkit-scrollbar]:hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-background hover:bg-background border-b border-border/30">
+              {columns.map((col) => {
+                const { icon } = columnTypeIndicator(col, rows);
+                return (
+                  <TableHead
+                    key={col}
+                    className="cursor-pointer select-none px-3 py-2.5 text-xs font-medium transition hover:text-foreground"
+                    onClick={() => handleSort(col)}
+                  >
+                    <span className="flex items-center gap-1.5">
+                      <span className="flex items-center justify-center size-5 bg-background border border-border/50 rounded-sm">
+                        {icon}
+                      </span>
+                      <span>{col}</span>
+                      {sortCol === col ? (
+                        sortDir === 'asc' ? (
+                          <ArrowUp className="size-3 text-primary" />
+                        ) : (
+                          <ArrowDown className="size-3 text-primary" />
+                        )
+                      ) : (
+                        <ArrowUpDown className="size-3 opacity-20" />
+                      )}
+                    </span>
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {displayRows.map((row, i) => (
+              <TableRow
+                key={i}
+                className={cn('transition border-border/25', i % 2 === 1 && 'bg-muted/8')}
+              >
+                {columns.map((col) => (
+                  <TableCell
+                    key={col}
+                    className="max-w-55 truncate px-3 py-2 text-xs tabular-nums"
+                    title={String(row[col] ?? '')}
+                  >
+                    {formatCell(row[col])}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination footer */}
+      <div className="flex items-center justify-between border-t border-border/30 px-3 py-2">
+        <div className="flex items-center gap-2">
+          <span className="text-[11px] text-muted-foreground">
+            {filteredRows.length !== rows.length ? `${filteredRows.length} matched of ` : ''}
+            {totalRows.toLocaleString()} rows
+          </span>
+          <div className="h-3 w-px bg-border/40" />
+          <div className="flex items-center gap-1.5">
+            <span className="text-[11px] text-muted-foreground">Show</span>
+            <Select
+              value={String(pageSize)}
+              onValueChange={(v) => {
+                setPageSize(Number(v));
+                setPage(0);
+              }}
+            >
+              <SelectTrigger className="h-6 w-13 text-[11px] px-2 focus:ring-0 focus-visible:ring-0">
+                {pageSize}
+              </SelectTrigger>
+              <SelectContent>
+                {PAGE_SIZES.map((s) => (
+                  <SelectItem key={s} value={String(s)} className="text-xs">
+                    {s}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="flex items-center gap-1">
+          <span className="text-[11px] tabular-nums text-muted-foreground mr-1">
+            {page + 1} / {totalPages}
+          </span>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 focus:ring-0 focus-visible:ring-0"
+            disabled={page === 0}
+            onClick={() => setPage((p) => p - 1)}
+          >
+            <ChevronLeft className="size-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 focus:ring-0 focus-visible:ring-0"
+            disabled={page >= totalPages - 1}
+            onClick={() => setPage((p) => p + 1)}
+          >
+            <ChevronRight className="size-3.5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/.next/standalone/apps/web/components/chat/tools/chat-file-export.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { Check, Download, FileSpreadsheet, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { DataExportArtifact } from '@/lib/chat/data-export';
+
+function base64Bytes(value: string) {
+  const binary = window.atob(value);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+  return bytes;
+}
+
+export function ChatFileExport({ artifact }: { artifact: DataExportArtifact }) {
+  const [downloaded, setDownloaded] = useState(false);
+  const download = useCallback(() => {
+    const blob = new Blob([base64Bytes(artifact.fileBase64)], { type: artifact.mimeType });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = artifact.fileName;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    window.setTimeout(() => URL.revokeObjectURL(url), 1_000);
+    setDownloaded(true);
+  }, [artifact]);
+  const Icon = artifact.format === 'xlsx' || artifact.format === 'csv' ? FileSpreadsheet : FileText;
+
+  return (
+    <div className="my-3 flex items-center gap-3 rounded-xl border border-border/70 bg-card px-3.5 py-3">
+      <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+        <Icon className="size-4.5" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium text-foreground">{artifact.fileName}</div>
+        <div className="mt-0.5 text-xs text-muted-foreground">
+          {artifact.rowCount.toLocaleString()} {artifact.rowCount === 1 ? 'row' : 'rows'} ·{' '}
+          {artifact.format.toUpperCase()}
+        </div>
+      </div>
+      <Button size="sm" onClick={download} className="h-8 shrink-0 gap-1.5 px-3 text-xs">
+        {downloaded ? <Check className="size-3.5" /> : <Download className="size-3.5" />}
+        {downloaded ? 'Downloaded' : 'Download'}
+      </Button>
+    </div>
+  );
+}

package/.next/standalone/apps/web/components/chat/tools/chat-grid.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export interface ChatGridItem {
+  label: string;
+  value: string | number;
+  subValue?: string;
+  icon?: React.ReactNode;
+  /** Optional accent color for the value — 'emerald' | 'amber' | 'rose' | 'blue' | 'default' */
+  accent?: "emerald" | "amber" | "rose" | "blue" | "default";
+}
+
+export interface ChatGridConfig {
+  title?: string;
+  subtitle?: string;
+  items: ChatGridItem[];
+  /** Number of columns (auto-detected if omitted) */
+  columns?: 2 | 3 | 4;
+}
+
+const accentClasses: Record<string, string> = {
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  amber: "text-amber-600 dark:text-amber-400",
+  rose: "text-rose-600 dark:text-rose-400",
+  blue: "text-blue-600 dark:text-blue-400",
+  default: "text-foreground",
+};
+
+/**
+ * A responsive card grid for displaying structured data in a compact form.
+ * Auto-sizes to 2-4 columns based on item count.
+ */
+export function ChatGrid({ config }: { config: ChatGridConfig }) {
+  const { title, subtitle, items, columns } = config;
+
+  if (!items || items.length === 0) return null;
+
+  // Auto-determine columns
+  const colCount =
+    columns || (items.length <= 2 ? 2 : items.length <= 3 ? 3 : 4);
+
+  const gridClass =
+    colCount === 2
+      ? "grid-cols-2"
+      : colCount === 3
+        ? "grid-cols-2 md:grid-cols-3"
+        : "grid-cols-2 md:grid-cols-4";
+
+  return (
+    <div className="w-full my-4 animate-in fade-in slide-in-from-bottom-2 duration-500">
+      {(title || subtitle) && (
+        <div className="mb-3">
+          {title && (
+            <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+          )}
+          {subtitle && (
+            <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
+          )}
+        </div>
+      )}
+
+      <div className={cn("grid gap-2.5", gridClass)}>
+        {items.map((item, idx) => (
+          <div
+            key={idx}
+            className="flex flex-col gap-1 rounded-xl border border-border/40 bg-card/30 p-3.5 transition-colors hover:bg-card/50"
+          >
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider line-clamp-1">
+                {item.label}
+              </span>
+              {item.icon && (
+                <span className="shrink-0 text-muted-foreground/50 [&_svg]:size-3.5">
+                  {item.icon}
+                </span>
+              )}
+            </div>
+            <span
+              className={cn(
+                "text-lg font-semibold tracking-tight tabular-nums",
+                accentClasses[item.accent || "default"],
+              )}
+            >
+              {typeof item.value === "number"
+                ? item.value.toLocaleString()
+                : item.value}
+            </span>
+            {item.subValue && (
+              <span className="text-[10px] text-muted-foreground">
+                {item.subValue}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}