larkup 0.4.12 → 0.4.14

package/.next/standalone/apps/web/components/index/index-workspace.tsx

@@ -0,0 +1,406 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import useSWR from 'swr';
+import Link from 'next/link';
+import {
+  AlertTriangle,
+  Boxes,
+  CheckCircle2,
+  Cpu,
+  Database,
+  FileText,
+  Layers,
+  Loader2,
+  Play,
+  Scissors,
+} from 'lucide-react';
+import type { ChunkingParams, IndexRun, IndexType, VectorStoreId } from '@larkup/core/types';
+import { getEmbeddingModel } from '@larkup/core/embeddings/registry';
+import { getVectorStore } from '@larkup/vector-stores/registry';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Skeleton } from '@/components/ui/skeleton';
+import { toast } from 'sonner';
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+interface IndexStatus {
+  run: IndexRun | null;
+  running: boolean;
+  docCount: number;
+  charCount: number;
+  ready: boolean;
+  blockers: string[];
+  unindexedCount: number;
+  config: {
+    embeddingModelId: string;
+    vectorStore: VectorStoreId;
+    indexType: IndexType;
+    chunking: ChunkingParams;
+  };
+}
+
+const ACTIVE: IndexRun['status'][] = ['chunking', 'embedding', 'upserting'];
+
+export function IndexWorkspace({
+  onDone,
+  onClose,
+  automatic = false,
+}: { onDone?: () => void; onClose?: () => void; automatic?: boolean } = {}) {
+  const [starting, setStarting] = useState(false);
+  const [cancelling, setCancelling] = useState(false);
+  const [isIndexing, setIsIndexing] = useState(false);
+
+  const { data, isLoading, mutate } = useSWR<IndexStatus>('/api/index', fetcher, {
+    refreshInterval: (d) => (d?.run && ACTIVE.includes(d.run.status) ? 1000 : 0),
+  });
+
+  const lastWarning = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    const warning = data?.run?.warning;
+    if (warning && warning !== lastWarning.current) {
+      toast.warning(warning, { id: 'rate-limit-warning', duration: 70_000 });
+    } else if (!warning && lastWarning.current) {
+      toast.dismiss('rate-limit-warning');
+      toast.success('Rate limit resolved — resuming indexing.', {
+        duration: 3000,
+      });
+    }
+    lastWarning.current = warning;
+  }, [data?.run?.warning]);
+
+  useEffect(() => {
+    const status = data?.run?.status;
+    const isNowActive = Boolean(data?.run && status && ACTIVE.includes(status));
+
+    if (isNowActive) {
+      setIsIndexing(true);
+    } else if (isIndexing && status === 'completed') {
+      setIsIndexing(false);
+      toast.success('Indexing complete. Your data is ready to use.');
+      try {
+        const context = new (window.AudioContext || (window as any).webkitAudioContext)();
+        const oscillator = context.createOscillator();
+        const gain = context.createGain();
+        oscillator.connect(gain);
+        gain.connect(context.destination);
+        oscillator.frequency.setValueAtTime(880, context.currentTime);
+        gain.gain.setValueAtTime(0.04, context.currentTime);
+        gain.gain.exponentialRampToValueAtTime(0.001, context.currentTime + 0.12);
+        oscillator.start();
+        oscillator.stop(context.currentTime + 0.12);
+      } catch {
+        // Browsers may block notification sounds until a user gesture.
+      }
+      onClose?.();
+    }
+  }, [data?.run?.status, isIndexing, onClose]);
+
+  if (isLoading || !data) {
+    return (
+      <div className="py-4">
+        <Skeleton className="h-40 w-full" />
+      </div>
+    );
+  }
+
+  const { run, ready, blockers, unindexedCount } = data;
+  const running = Boolean(run && ACTIVE.includes(run.status));
+
+  async function build(incremental = false) {
+    setStarting(true);
+    try {
+      const res = await fetch('/api/index', {
+        method: 'POST',
+        body: JSON.stringify({ incremental }),
+        headers: { 'Content-Type': 'application/json' },
+      });
+      const body = await res.json();
+      if (!res.ok) {
+        toast.error(body.error ?? 'Could not start indexing.');
+        return;
+      }
+      toast.success('Indexing started.');
+      mutate();
+      onDone?.();
+    } catch {
+      toast.error('Could not start indexing.');
+    } finally {
+      setStarting(false);
+    }
+  }
+
+  async function cancelIndexing() {
+    setCancelling(true);
+    try {
+      const res = await fetch('/api/index', { method: 'DELETE' });
+      if (res.ok) {
+        toast.success('Indexing cancelled.');
+        mutate();
+        onClose?.();
+      } else {
+        toast.error('Could not cancel indexing.');
+      }
+    } catch {
+      toast.error('Could not cancel indexing.');
+    } finally {
+      setCancelling(false);
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {!ready && (
+        <Alert variant="default">
+          <AlertTriangle className="size-4 text-orange-500!" />
+          <AlertTitle className="text-orange-500!">Not ready to index</AlertTitle>
+          <AlertDescription>
+            <ul className="list-disc pl-4 mt-2 space-y-2">
+              {blockers.map((b) => {
+                if (b === 'MISSING_EMBEDDING_API_KEY') {
+                  return (
+                    <li key={b} className="flex flex-col items-start gap-3">
+                      <span>An API key for your chosen embedding model is required.</span>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        render={<Link href="/settings">Go to AI Models in Settings</Link>}
+                        nativeButton={false}
+                      />
+                    </li>
+                  );
+                }
+                return <li key={b}>{b}</li>;
+              })}
+            </ul>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {run?.status === 'failed' && !run.error?.toLowerCase().includes('corpus cleared') && (
+        <Alert variant="destructive">
+          <AlertTriangle className="size-4" />
+          <AlertTitle>Indexing failed</AlertTitle>
+          <AlertDescription className="space-y-3 wrap-break-word">
+            <p>{run.error ?? 'An unknown error occurred during indexing.'}</p>
+            {unindexedCount > 0 && (
+              <Button size="sm" variant="outline" onClick={() => build(true)} disabled={starting}>
+                Retry {unindexedCount} unindexed file{unindexedCount === 1 ? '' : 's'}
+              </Button>
+            )}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <RunCard run={run} running={running} />
+
+      {ready && !run && (
+        <p className="text-sm text-muted-foreground">
+          Your documents will be prepared for fast, accurate answers. This usually takes a moment.
+        </p>
+      )}
+
+      {/* Pre-indexing warning — only shown before the very first run */}
+      {/* {ready && !run && (
+        <Alert>
+          <Info className="size-4 text-blue-500!" />
+          <AlertTitle className="text-blue-600 dark:text-blue-400">
+            Before you start indexing
+          </AlertTitle>
+          <AlertDescription className="text-muted-foreground space-y-1">
+            <p>
+              Once indexing begins, two settings become{" "}
+              <span className="font-medium text-foreground">locked</span> to the
+              existing index:
+            </p>
+            <ul className="list-disc pl-4 space-y-0.5">
+              <li>
+                <span className="font-medium text-foreground">
+                  Embedding model
+                </span>{" "}
+                — you can swap to any model with the{" "}
+                <span className="font-medium text-foreground">
+                  same vector dimensions
+                </span>
+                , but switching to a model with different dimensions will
+                require a full re-index.
+              </li>
+              <li>
+                <span className="font-medium text-foreground">
+                  Vector store
+                </span>{" "}
+                — changing the store after indexing requires starting fresh.
+              </li>
+            </ul>
+          </AlertDescription>
+        </Alert>
+      )} */}
+
+      {automatic ? (
+        <div className="flex justify-between w-full pt-2">
+          {running ? (
+            <Button onClick={cancelIndexing} variant="destructive" disabled={cancelling}>
+              {cancelling && <Loader2 className="mr-2 size-3.5 animate-spin" />}
+              Cancel indexing
+            </Button>
+          ) : (
+            <div />
+          )}
+          <Button onClick={() => onClose?.()} variant="default">
+            Continue working
+          </Button>
+        </div>
+      ) : (
+        <div className="flex w-full items-center justify-between pt-4 mt-2">
+          {running ? (
+            <Button onClick={cancelIndexing} size="lg" variant="destructive" disabled={cancelling}>
+              {cancelling && <Loader2 className="mr-2 size-3.5 animate-spin" />}
+              Cancel indexing
+            </Button>
+          ) : (
+            <Button onClick={() => onClose?.()} size="lg" variant="outline">
+              Close
+            </Button>
+          )}
+          <Button
+            onClick={() => build(Boolean(run))}
+            disabled={
+              !ready || running || starting || (run?.status === 'completed' && unindexedCount === 0)
+            }
+            size="lg"
+          >
+            {running || starting ? (
+              <Loader2 className="size-4 animate-spin mr-2" />
+            ) : (
+              <Play className="size-4 mr-2" />
+            )}
+            {running
+              ? 'Indexing…'
+              : run
+                ? `Index new documents (${unindexedCount})`
+                : `Start indexing (${unindexedCount})`}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ConfigSummary({
+  config,
+  docCount,
+  charCount,
+}: {
+  config: IndexStatus['config'];
+  docCount: number;
+  charCount: number;
+}) {
+  const model = getEmbeddingModel(config.embeddingModelId);
+  const store = getVectorStore(config.vectorStore);
+
+  const items = [
+    {
+      icon: Cpu,
+      label: 'AI Model',
+      value: model?.label ?? config.embeddingModelId,
+    },
+    {
+      icon: FileText,
+      label: 'Data sources',
+      value: `${docCount.toLocaleString()} items`,
+    },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Layers className="size-4 text-primary" />
+          Index configuration
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <dl className="grid grid-cols-2 gap-x-6 gap-y-5">
+          {items.map((it) => (
+            <div key={it.label} className="flex flex-col gap-1.5">
+              <dt className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <it.icon className="size-3.5" />
+                {it.label}
+              </dt>
+              <dd className="text-sm font-medium leading-tight">{it.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </CardContent>
+    </Card>
+  );
+}
+
+const STATUS_COPY: Record<IndexRun['status'], { label: string; phase?: string }> = {
+  idle: { label: 'Idle' },
+  chunking: { label: 'Preparing your documents', phase: 'Getting your knowledge ready…' },
+  embedding: { label: 'Indexing your knowledge', phase: 'Making your content searchable…' },
+  upserting: { label: 'Finishing up', phase: 'Saving your searchable knowledge…' },
+  completed: { label: 'Completed' },
+  failed: { label: 'Failed' },
+};
+
+function RunCard({ run, running }: { run: IndexRun | null; running: boolean }) {
+  if (!run || run.status === 'failed') {
+    return <></>;
+  }
+
+  const copy = STATUS_COPY[run.status];
+  const pct =
+    run.totalChunks > 0
+      ? Math.round((run.processedChunks / run.totalChunks) * 100)
+      : running
+        ? 5
+        : 0;
+
+  return (
+    <Card>
+      <CardHeader className="flex-row items-center justify-between">
+        <CardTitle className="flex items-center gap-2 text-base">
+          {run.status === 'completed' ? (
+            <CheckCircle2 className="size-4 text-primary" />
+          ) : (
+            <Loader2 className="size-4 animate-spin text-primary" />
+          )}
+          {copy.label}
+        </CardTitle>
+        <StatusBadge status={run.status} />
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">{copy.phase ?? 'Done'}</span>
+            <span className="font-mono tabular-nums text-muted-foreground">{pct}%</span>
+          </div>
+          <Progress value={pct} className="**:data-[slot=progress-indicator]:bg-green-600" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function StatusBadge({ status }: { status: IndexRun['status'] }) {
+  if (status === 'completed')
+    return <Badge className="bg-primary/12 text-primary hover:bg-primary/12">Ready</Badge>;
+  if (status === 'failed') return <Badge variant="destructive">Failed</Badge>;
+  if (ACTIVE.includes(status))
+    return (
+      <span className="flex items-center gap-1.5 text-xs font-medium text-green-600">
+        <span className="relative flex size-2">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-600 opacity-75" />
+          <span className="relative inline-flex size-2 rounded-full bg-green-600" />
+        </span>
+        Live
+      </span>
+    );
+  return null;
+}