@larkup/workspace-app 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,152 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { ChevronDown, ChevronUp, ExternalLink, FileText, Play, TriangleAlert } from 'lucide-react';
+import { ChatMediaPreview } from './chat-media-preview';
+
+export interface ChatCitationItem {
+  label: string;
+  detail?: string;
+  timestampSecs?: number;
+  seekUrl?: string;
+  conflicted?: boolean;
+}
+
+export interface ChatCitationsUi {
+  kind: 'citations';
+  title?: string;
+  mediaUrl?: string;
+  /** Original public source, when it has a browser-supported player. */
+  sourceUrl?: string;
+  mediaType?: 'video' | 'audio';
+  fileName?: string;
+  primaryTimestampSecs?: number;
+  primaryEndSecs?: number;
+  items: ChatCitationItem[];
+}
+
+function formatTimestamp(seconds: number) {
+  const total = Math.max(0, Math.floor(seconds));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const secs = total % 60;
+  return hours > 0
+    ? `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
+    : `${minutes}:${String(secs).padStart(2, '0')}`;
+}
+
+/**
+ * Generic citation list + optional supporting clip, part of the same
+ * host-generic `output.ui.kind` contract as notice/card/table
+ * (message-item.tsx) -- any tool can return this shape, not just video ones.
+ * The first assistant message may opt into opening one supporting clip. All
+ * later clips remain compact references until the user opens them.
+ */
+export function ChatCitations({
+  ui,
+  assetId,
+  autoOpenSupportingClip = false,
+}: {
+  ui: ChatCitationsUi;
+  assetId?: string;
+  autoOpenSupportingClip?: boolean;
+}) {
+  const [clipOpen, setClipOpen] = useState(false);
+  const [sourcesOpen, setSourcesOpen] = useState(false);
+  useEffect(() => {
+    setClipOpen(!!(autoOpenSupportingClip && ui.mediaUrl));
+  }, [autoOpenSupportingClip, ui.mediaUrl]);
+  if (!ui.items?.length && !ui.mediaUrl) return null;
+
+  return (
+    <div className="mb-1 w-full max-w-2xl" data-testid="chat-citations">
+      {ui.mediaUrl ? (
+        <div className="mb-2">
+          <button
+            type="button"
+            onClick={() => setClipOpen((open) => !open)}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground"
+          >
+            <Play className="size-3" />
+            <span className="font-medium">{clipOpen ? 'Hide' : 'Watch'} supporting clip</span>
+            {typeof ui.primaryTimestampSecs === 'number' ? (
+              <span>· starts at {formatTimestamp(ui.primaryTimestampSecs)}</span>
+            ) : null}
+          </button>
+          {clipOpen ? (
+            <div className="mt-1.5">
+              <ChatMediaPreview
+                assetId={assetId ?? 'chat-citation'}
+                mediaType={ui.mediaType ?? 'video'}
+                fileName={ui.fileName}
+                mediaUrl={ui.mediaUrl}
+                sourceUrl={ui.sourceUrl ?? ui.mediaUrl}
+                startSecs={ui.primaryTimestampSecs}
+                endSecs={ui.primaryEndSecs}
+              />
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {ui.items?.length ? (
+        <div className="overflow-hidden rounded-lg border border-border/70 bg-card/60">
+          <button
+            type="button"
+            onClick={() => setSourcesOpen((open) => !open)}
+            className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs transition-colors hover:bg-muted/40"
+            aria-expanded={sourcesOpen}
+          >
+            <span className="flex min-w-0 items-center gap-2 text-muted-foreground">
+              <FileText className="size-3.5 shrink-0" />
+              <span className="font-medium text-foreground">{ui.title ?? 'Sources'}</span>
+            </span>
+            <span className="flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground">
+              {ui.items.length} citation{ui.items.length === 1 ? '' : 's'}
+              {sourcesOpen ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />}
+            </span>
+          </button>
+
+          {sourcesOpen ? (
+            <div className="border-t border-border/60 px-2 py-1.5">
+              {ui.items.map((item, i) => (
+                <div
+                  key={i}
+                  className="flex items-start gap-2 rounded-md px-1.5 py-2 hover:bg-muted/40"
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      {typeof item.timestampSecs === 'number' ? (
+                        <span className="text-[11px] font-semibold tabular-nums text-foreground">
+                          {formatTimestamp(item.timestampSecs)}
+                        </span>
+                      ) : null}
+                      <span className="text-[10px] text-muted-foreground">{item.label}</span>
+                      {item.conflicted ? (
+                        <TriangleAlert
+                          className="size-3 shrink-0 text-amber-600 dark:text-amber-400"
+                          aria-label="Conflicting evidence"
+                        />
+                      ) : null}
+                    </div>
+                  </div>
+                  {item.seekUrl ? (
+                    <a
+                      href={item.seekUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label={`Open source: ${item.label}`}
+                      className="mt-0.5 shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      <ExternalLink className="size-3.5" />
+                    </a>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/chat/tools/chat-data-table.tsx

@@ -0,0 +1,373 @@
+'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 '../../ui/table';
+import { Button } from '@larkup/workspace-ui/button';
+import { Input } from '../../ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@larkup/workspace-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/src/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 '@larkup/workspace-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>
+  );
+}