@larkup/workspace-app 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { useState } from 'react';
+import { cn } from '../../../lib/utils';
+
+export interface ChatTabItem {
+  label: string;
+  icon?: React.ReactNode;
+  content: React.ReactNode;
+}
+
+export interface ChatTabsConfig {
+  tabs: ChatTabItem[];
+  defaultIndex?: number;
+}
+
+/**
+ * Premium tabbed interface for chat tool responses.
+ * Supports optional icons per tab with a smooth animated underline.
+ */
+export function ChatTabs({ config }: { config: ChatTabsConfig }) {
+  const { tabs, defaultIndex = 0 } = config;
+  const [active, setActive] = useState(defaultIndex);
+
+  if (!tabs || tabs.length === 0) return null;
+  if (tabs.length === 1) return <>{tabs[0].content}</>;
+
+  return (
+    <div className="w-full my-4 animate-in fade-in slide-in-from-bottom-2 duration-500">
+      {/* Tab bar */}
+      <div className="flex items-center gap-0.5 border-b border-border/30 px-1">
+        {tabs.map((tab, i) => (
+          <button
+            key={i}
+            type="button"
+            onClick={() => setActive(i)}
+            className={cn(
+              'relative flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors',
+              'focus:outline-none focus-visible:outline-none',
+              active === i ? 'text-foreground' : 'text-muted-foreground hover:text-foreground/70',
+            )}
+          >
+            {tab.icon && <span className="shrink-0 [&_svg]:size-3.5">{tab.icon}</span>}
+            <span>{tab.label}</span>
+            {/* Animated underline */}
+            {active === i && (
+              <span className="absolute bottom-0 left-2 right-2 h-0.5 rounded-full bg-foreground animate-in fade-in zoom-in-75 duration-300" />
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div key={active} className="pt-3 animate-in fade-in slide-in-from-bottom-1 duration-400">
+        {tabs[active]?.content}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/tools/corpus-data-result.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown, Database, FileText, Globe, Upload, Table2, Image } from 'lucide-react';
+import { ChatDataTable, type DataTableConfig } from './chat-data-table';
+import { Card } from '../../ui/card';
+
+interface CorpusDocumentSummary {
+  id: string;
+  title: string;
+  source: string;
+  url?: string;
+  charCount: number;
+  status?: string;
+  metadata?: Record<string, any>;
+  createdAt: string;
+  content?: string;
+}
+
+interface CorpusSummary {
+  totalDocuments: number;
+  bySource: Record<string, number>;
+  byStatus: Record<string, number>;
+  topMetadataKeys: { key: string; count: number }[];
+  totalCharacters: number;
+  dateRange: { earliest: string; latest: string } | null;
+}
+
+export interface CorpusDataConfig {
+  documents: CorpusDocumentSummary[];
+  total: number;
+  summary: CorpusSummary;
+  error?: string;
+}
+
+const SOURCE_ICONS: Record<string, React.ReactNode> = {
+  paste: <FileText className="size-3" />,
+  upload: <Upload className="size-3" />,
+  scrape: <Globe className="size-3" />,
+  tabular: <Table2 className="size-3" />,
+  media: <Image className="size-3" />,
+};
+
+const SOURCE_COLORS: Record<string, string> = {
+  paste: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+  upload: 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400',
+  scrape: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
+  tabular: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
+  media: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400',
+};
+
+function formatChars(chars: number): string {
+  if (chars >= 1_000_000) return `${(chars / 1_000_000).toFixed(1)}M`;
+  if (chars >= 1_000) return `${(chars / 1_000).toFixed(1)}K`;
+  return String(chars);
+}
+
+export function CorpusDataResult({ config }: { config: CorpusDataConfig }) {
+  const [showTable, setShowTable] = useState(false);
+  const { documents, total, summary, error } = config;
+
+  if (error) {
+    return (
+      <Card className="overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-500">
+        <div className="flex items-center gap-2 px-4 py-3 text-sm text-red-600 dark:text-red-400">
+          <Database className="size-4" />
+          <span>Failed to fetch corpus data: {error}</span>
+        </div>
+      </Card>
+    );
+  }
+
+  if (summary.totalDocuments === 0) {
+    return (
+      <div className="flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground animate-in fade-in slide-in-from-bottom-2 duration-500">
+        <Database className="size-3" />
+        <span>No documents found in the corpus.</span>
+      </div>
+    );
+  }
+
+  // Build source badges
+  const sourceEntries = Object.entries(summary.bySource).sort((a, b) => b[1] - a[1]);
+  const statusEntries = Object.entries(summary.byStatus).sort((a, b) => b[1] - a[1]);
+
+  // Build table config from documents
+  const tableConfig: DataTableConfig | null =
+    documents.length > 0
+      ? {
+          columns: ['title', 'source', 'status', 'charCount', 'createdAt'],
+          rows: documents.map((d) => ({
+            title: d.title,
+            source: d.source,
+            status: d.status ?? 'unindexed',
+            charCount: d.charCount,
+            createdAt: d.createdAt.split('T')[0],
+            ...(d.url ? { url: d.url } : {}),
+          })),
+          totalRows: total,
+        }
+      : null;
+
+  return (
+    <Card className="overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-500">
+      {/* Summary header */}
+      <div className="border-b border-border/40 px-4 py-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary/10 text-primary">
+              <Database className="size-3" />
+            </div>
+            <span className="text-sm font-medium text-foreground">Corpus Overview</span>
+            <span className="rounded-full bg-secondary px-2 py-0.5 text-[11px] tabular-nums text-muted-foreground">
+              {total.toLocaleString()} {total === 1 ? 'document' : 'documents'}
+            </span>
+          </div>
+          <span className="text-[11px] tabular-nums text-muted-foreground">
+            {formatChars(summary.totalCharacters)} chars
+          </span>
+        </div>
+
+        {/* Source & status badges */}
+        <div className="mt-2.5 flex flex-wrap gap-1.5">
+          {sourceEntries.map(([source, count]) => (
+            <span
+              key={source}
+              className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ${
+                SOURCE_COLORS[source] ?? 'bg-secondary text-muted-foreground'
+              }`}
+            >
+              {SOURCE_ICONS[source]}
+              {source}
+              <span className="tabular-nums font-normal opacity-70">{count}</span>
+            </span>
+          ))}
+          {statusEntries.map(([status, count]) => (
+            <span
+              key={status}
+              className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ${
+                status === 'indexed'
+                  ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+                  : 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
+              }`}
+            >
+              {status}
+              <span className="tabular-nums font-normal opacity-70">{count}</span>
+            </span>
+          ))}
+        </div>
+
+        {/* Metadata keys */}
+        {summary.topMetadataKeys.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-1">
+            <span className="text-[10px] text-muted-foreground/60 self-center mr-0.5">
+              metadata:
+            </span>
+            {summary.topMetadataKeys.slice(0, 8).map(({ key, count }) => (
+              <span
+                key={key}
+                className="rounded bg-secondary/60 px-1.5 py-0.5 text-[10px] text-muted-foreground"
+              >
+                {key} <span className="tabular-nums opacity-60">({count})</span>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Expandable document table */}
+      {tableConfig && (
+        <>
+          <button
+            type="button"
+            onClick={() => setShowTable((o) => !o)}
+            className="flex w-full items-center justify-between px-4 py-2 text-xs text-muted-foreground hover:bg-secondary/30 transition-colors"
+          >
+            <span>
+              {showTable ? 'Hide' : 'Show'} documents ({documents.length}
+              {total > documents.length ? ` of ${total}` : ''})
+            </span>
+            <ChevronDown
+              className={`size-3.5 transition-transform ${showTable ? 'rotate-180' : ''}`}
+            />
+          </button>
+          {showTable && (
+            <div className="border-t border-border/40 px-3 py-3">
+              <ChatDataTable config={tableConfig} />
+            </div>
+          )}
+        </>
+      )}
+    </Card>
+  );
+}

package/src/components/chat/tools/knowledge-base-result.tsx

@@ -0,0 +1,345 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import {
+  ChevronDown,
+  Database,
+  ExternalLink,
+  FileText,
+  Image as ImageIcon,
+  Loader2,
+} from 'lucide-react';
+import { isIndeterminateProgress } from '../../../lib/chat/live-tool-progress';
+
+function Typewriter({ text, animate }: { text: string; animate: boolean }) {
+  const [length, setLength] = useState(animate ? 0 : text.length);
+
+  useEffect(() => {
+    if (!animate) {
+      setLength(text.length);
+      return;
+    }
+    setLength((prev) => Math.min(prev, text.length));
+    const interval = setInterval(() => {
+      setLength((prev) => {
+        if (prev >= text.length) {
+          clearInterval(interval);
+          return prev;
+        }
+        return prev + 1;
+      });
+    }, 20);
+    return () => clearInterval(interval);
+  }, [text, animate]);
+
+  return <>{text.substring(0, length)}</>;
+}
+
+interface KBHit {
+  title: string;
+  url: string;
+  score: number;
+  text: string;
+  context?: string;
+  timelineContext?: Array<{
+    role: 'before' | 'matched' | 'after';
+    text: string;
+    startSecs?: number;
+    endSecs?: number;
+  }>;
+  images?: { imageUrl: string; index: number; pageNumber?: number }[];
+  metadata?: {
+    mediaAssetId?: string;
+    mediaType?: 'image' | 'video' | 'audio';
+    fileName?: string;
+    startSecs?: number;
+    endSecs?: number;
+    images?: { imageUrl: string; index: number }[];
+  };
+}
+
+/**
+ * Renders knowledge base retrieval results from tool-searchKnowledgeBase parts.
+ */
+export function KnowledgeBaseResult({
+  parts,
+  isShimmering,
+  activity,
+}: {
+  parts: any[];
+  isShimmering?: boolean;
+  activity?: {
+    percent: number;
+    label: string;
+    message: string;
+    phase?: 'waking-up' | 'analyzing';
+  } | null;
+}) {
+  const [open, setOpen] = useState(false);
+  const isRunning = parts.some((part: any) => {
+    // New format
+    if (part.type === 'tool-invocation') {
+      const state = part.toolInvocation?.state;
+      return state === 'partial-call' || state === 'call';
+    }
+    // Legacy format
+    return part.state === 'input-streaming' || part.state === 'input-available';
+  });
+
+  // Track if this component mounted while running (so we only animate new searches)
+  const [isNew] = useState(isRunning);
+
+  const query = useMemo(() => {
+    for (const part of parts) {
+      const rawArgs =
+        part.type === 'tool-invocation' ? part.toolInvocation?.args : (part.input ?? part.args);
+      if (rawArgs?.query) {
+        return rawArgs.query;
+      }
+    }
+    return '';
+  }, [parts]);
+  const hits = useMemo<KBHit[]>(
+    () =>
+      parts.flatMap((part: any) => {
+        const rawResult =
+          part.type === 'tool-invocation'
+            ? part.toolInvocation?.result
+            : (part.output ?? part.result);
+        const result = parseToolResult(rawResult);
+        return Array.isArray(result?.hits) ? result.hits : [];
+      }),
+    [parts],
+  );
+  useEffect(() => {
+    setOpen(isRunning);
+  }, [isRunning]);
+
+  return (
+    <div className="mb-0 w-full p" data-testid="chat-citations">
+      <div className="relative inline-flex items-center">
+        {isShimmering && (
+          <div className="pointer-events-none absolute inset-0 z-10 animate-pulse bg-linear-to-r from-transparent via-foreground/5 to-transparent" />
+        )}
+        <button
+          type="button"
+          onClick={() => hits.length > 0 && setOpen((o) => !o)}
+          className={`flex items-center gap-2 pr-2 py-1.5 text-xs transition-colors duration-500 rounded-md ${
+            hits.length > 0 ? 'hover:bg-muted/50 cursor-pointer' : 'cursor-default'
+          } ${isRunning ? 'text-foreground' : 'text-muted-foreground'}`}
+        >
+          {isRunning ? (
+            <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" />
+          ) : (
+            <Database className="h-3.5 w-3.5 shrink-0" />
+          )}
+          <span className="truncate max-w-62.5 sm:max-w-100">
+            {query ? (
+              <>
+                <span className="mr-1">{isRunning ? 'Searching' : 'Searched'}</span>
+                <span className="font-medium">
+                  &ldquo;
+                  <Typewriter text={query} animate={isNew} />
+                  &rdquo;
+                </span>
+              </>
+            ) : isRunning ? (
+              'Finding relevant sources…'
+            ) : hits.length > 0 ? (
+              'Sources'
+            ) : (
+              'No matching sources'
+            )}
+          </span>
+          {!isRunning && hits.length > 0 ? (
+            <span className="shrink-0 text-[10px] bg-secondary text-foreground px-1.5 py-0.5 rounded-full font-medium ml-1">
+              {hits.length} source{hits.length === 1 ? '' : 's'}
+            </span>
+          ) : null}
+          {!isRunning && hits.length > 0 ? (
+            <ChevronDown
+              className={`h-3 w-3 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`}
+            />
+          ) : null}
+        </button>
+      </div>
+
+      {isRunning && activity ? (
+        <div
+          className="mt-2.5 max-w-2xl rounded-xl border border-emerald-500/70 bg-background px-3 py-2.5"
+          aria-live="polite"
+          data-testid="video-analysis-progress"
+        >
+          <div className="flex items-center justify-between gap-3 text-xs">
+            <span className="larkup-shimmer-text font-medium">{activity.message}</span>
+            {isIndeterminateProgress(activity.percent) ? null : (
+              <span className="shrink-0 tabular-nums text-muted-foreground">
+                {Math.max(1, Math.round(activity.percent))}%
+              </span>
+            )}
+          </div>
+          <div
+            className="mt-2 h-1.5 overflow-hidden rounded-full bg-emerald-950/10 dark:bg-emerald-100/10"
+            role="progressbar"
+            aria-label={activity.message}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            {...(isIndeterminateProgress(activity.percent)
+              ? {}
+              : { 'aria-valuenow': Math.max(1, Math.round(activity.percent)) })}
+          >
+            {isIndeterminateProgress(activity.percent) ? (
+              <div className="larkup-progress-shuttle h-full rounded-full bg-emerald-500" />
+            ) : (
+              <div
+                className="h-full rounded-full bg-emerald-500 transition-[width] duration-700 ease-out"
+                style={{ width: `${Math.max(6, Math.min(100, activity.percent))}%` }}
+              />
+            )}
+          </div>
+        </div>
+      ) : null}
+
+      {open && hits.length > 0 ? (
+        <div
+          className="mt-2 overflow-hidden rounded-xl border border-border bg-card"
+          data-testid="citation-list"
+        >
+          {isRunning && hits.length === 0 ? (
+            <div className="flex items-center gap-2 px-3.5 py-2.5">
+              <Loader2 className="size-3 animate-spin text-muted-foreground" />
+            </div>
+          ) : null}
+          {hits.slice(0, 4).map((h, i) => (
+            <div
+              key={`${h.title}-${i}`}
+              className="flex gap-3 border-b border-border/60 px-3.5 py-3 last:border-0"
+              data-testid="citation-source"
+            >
+              <SourceThumbnail hit={h} />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-start justify-between gap-3">
+                  <SourceTitle hit={h} />
+                  {isSafeSourceUrl(h.url) ? (
+                    <a
+                      href={h.url}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label={`Open ${h.title}`}
+                      className="mt-0.5 shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      <ExternalLink className="size-3.5" />
+                    </a>
+                  ) : null}
+                </div>
+                {h.metadata?.mediaType ? (
+                  <div className="mt-1.5 flex items-center gap-2 text-[11px] text-muted-foreground">
+                    <span className="capitalize">{h.metadata.mediaType} source</span>
+                    {Number.isFinite(h.metadata.startSecs) ? (
+                      <span className="rounded-md bg-muted px-1.5 py-0.5 font-mono tabular-nums">
+                        {formatTimestamp(h.metadata.startSecs!)}
+                        {Number.isFinite(h.metadata.endSecs)
+                          ? `–${formatTimestamp(h.metadata.endSecs!)}`
+                          : ''}
+                      </span>
+                    ) : null}
+                  </div>
+                ) : null}
+                {contextForHit(h) ? (
+                  <div className="mt-2 rounded-lg bg-muted/55 px-2.5 py-2">
+                    <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                      Indexed context
+                    </div>
+                    <p
+                      className="line-clamp-4 text-xs leading-relaxed text-foreground/80"
+                      dir="auto"
+                    >
+                      {contextForHit(h)}
+                    </p>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function contextForHit(hit: KBHit) {
+  const direct = hit.context?.trim();
+  if (direct) return direct;
+  const matched = hit.timelineContext?.find((item) => item.role === 'matched')?.text?.trim();
+  if (matched) return matched;
+  const text = hit.text?.trim();
+  return text && !text.startsWith('Verified media evidence is available') ? text : '';
+}
+
+function formatTimestamp(seconds: number) {
+  const total = Math.max(0, Math.floor(seconds));
+  const hours = Math.floor(total / 3_600);
+  const minutes = Math.floor((total % 3_600) / 60);
+  const rest = total % 60;
+  return hours > 0
+    ? `${hours}:${String(minutes).padStart(2, '0')}:${String(rest).padStart(2, '0')}`
+    : `${minutes}:${String(rest).padStart(2, '0')}`;
+}
+
+function parseToolResult(value: unknown): { hits?: KBHit[] } | null {
+  if (typeof value === 'string') {
+    try {
+      return parseToolResult(JSON.parse(value));
+    } catch {
+      return null;
+    }
+  }
+  return typeof value === 'object' && value !== null ? (value as { hits?: KBHit[] }) : null;
+}
+
+function isSafeSourceUrl(url: string | undefined) {
+  return Boolean(url && (url.startsWith('/') || /^https?:\/\//i.test(url)));
+}
+
+function SourceTitle({ hit }: { hit: KBHit }) {
+  const title = hit.title || 'Untitled source';
+  const className =
+    'line-clamp-1 text-xs font-medium text-foreground transition-colors hover:text-primary hover:underline';
+  return isSafeSourceUrl(hit.url) ? (
+    <a href={hit.url} target="_blank" rel="noreferrer" className={className}>
+      {title}
+    </a>
+  ) : (
+    <span className="line-clamp-1 text-xs font-medium text-foreground">{title}</span>
+  );
+}
+
+function SourceThumbnail({ hit }: { hit: KBHit }) {
+  const [imageUnavailable, setImageUnavailable] = useState(false);
+  const image = (hit.images ?? hit.metadata?.images)?.find((candidate) =>
+    isSafeSourceUrl(candidate.imageUrl),
+  );
+  if (image && !imageUnavailable) {
+    return (
+      // Retrieval supplies this URL; it is never a model-suggested placeholder.
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        src={image.imageUrl}
+        alt=""
+        className="size-11 shrink-0 rounded-md border border-border object-cover"
+        loading="lazy"
+        onError={() => setImageUnavailable(true)}
+      />
+    );
+  }
+
+  return (
+    <div className="flex size-11 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground">
+      {hit.metadata?.mediaType === 'image' ? (
+        <ImageIcon className="size-4" />
+      ) : (
+        <FileText className="size-4" />
+      )}
+    </div>
+  );
+}