larkup 0.1.14

package/components/demo/demo-workspace.tsx

@@ -0,0 +1,419 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import useSWR from "swr";
+import {
+  AlertTriangle,
+  CornerDownLeft,
+  FileText,
+  Loader2,
+  Search,
+  Server,
+  Sparkles,
+  Cpu,
+  Database,
+  ExternalLink,
+} from "lucide-react";
+import type { IndexType, VectorStoreId } from "@larkup/core/types";
+import type { QueryHit } from "@larkup/vector-stores/adapter";
+import { getEmbeddingModel } from "@larkup/core/embeddings/registry";
+import { getVectorStore } from "@larkup/vector-stores/registry";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Textarea } from "@/components/ui/textarea";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Skeleton } from "@/components/ui/skeleton";
+
+import { useWorkspace } from "@/components/workspace/workspace-provider";
+import { cn } from "@/lib/utils";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+interface DemoStatus {
+  ready: boolean;
+  blockers: string[];
+  indexed: boolean;
+  server: { running: boolean; endpoint: string };
+  config: {
+    projectName: string;
+    embeddingModelId: string;
+    vectorStore: VectorStoreId;
+    indexType: IndexType;
+    topK: number;
+  };
+}
+
+interface DemoResult {
+  query: string;
+  hits: QueryHit[];
+  source: "server" | "direct";
+  endpoint?: string;
+  tookMs: number;
+}
+
+const TOP_K_PRESETS = [1, 3, 5, 8, 10];
+
+const SAMPLE_QUERIES = [
+  "What is this corpus about?",
+  "Summarize the key concepts.",
+  "How does retrieval work?",
+];
+
+export function DemoWorkspace() {
+  const { activeServer } = useWorkspace();
+  const serverId = activeServer?.id ?? null;
+
+  const statusKey = serverId
+    ? `/api/demo?serverId=${encodeURIComponent(serverId)}`
+    : "/api/demo";
+  const { data, isLoading } = useSWR<DemoStatus>(statusKey, fetcher, {
+    refreshInterval: 5000,
+  });
+
+  const [query, setQuery] = useState("");
+  const [topK, setTopK] = useState<number>(5);
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DemoResult | null>(null);
+
+  // Clear any stale result when switching the target server.
+  useEffect(() => {
+    setResult(null);
+    setError(null);
+  }, [serverId]);
+
+  if (isLoading || !data) {
+    return (
+      <div className="px-6 py-6 md:px-8">
+        <Skeleton className="h-40 w-full" />
+      </div>
+    );
+  }
+
+  const { ready, blockers, server, config } = data;
+
+  async function run(q: string) {
+    const question = q.trim();
+    if (!question) return;
+    setRunning(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/demo", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ query: question, topK, serverId }),
+      });
+      const body = await res.json();
+      if (!res.ok) {
+        setError(body.error ?? "Query failed.");
+        setResult(null);
+        return;
+      }
+      setResult(body as DemoResult);
+    } catch {
+      setError("Could not reach the retrieval endpoint.");
+      setResult(null);
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  return (
+    <div className="space-y-6 px-6 py-6 md:px-8">
+      <SourceSummary server={server} config={config} />
+
+      {!ready && (
+        <Alert variant="default" className="text-orange-500">
+          <AlertTriangle className="size-4" />
+          <AlertTitle>Nothing to query yet</AlertTitle>
+          <AlertDescription>
+            <ul className="list-disc pl-4">
+              {blockers.map((b) => (
+                <li key={b}>{b}</li>
+              ))}
+            </ul>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <Card>
+        <CardContent className="space-y-4 pt-6">
+          <div className="relative">
+            <Textarea
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  run(query);
+                }
+              }}
+              placeholder="Ask a question to retrieve the most relevant chunks…"
+              disabled={!ready || running}
+              rows={3}
+              className="resize-none pr-3 text-sm leading-relaxed"
+            />
+          </div>
+
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">Top-k</span>
+              <div className="flex items-center gap-1 rounded-lg border border-border bg-muted/40 p-0.5">
+                {TOP_K_PRESETS.map((k) => (
+                  <button
+                    key={k}
+                    type="button"
+                    onClick={() => setTopK(k)}
+                    className={cn(
+                      "min-w-8 rounded-md px-2.5 py-1 text-xs font-medium tabular-nums transition-colors",
+                      topK === k
+                        ? "bg-white border text-foreground shadow-sm"
+                        : "text-muted-foreground hover:text-foreground",
+                    )}
+                  >
+                    {k}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <Button
+              onClick={() => run(query)}
+              disabled={!ready || running || !query.trim()}
+            >
+              {running ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <Search className="size-4" />
+              )}
+              {running ? "Searching…" : "Search"}
+              {!running && (
+                <kbd className="ml-1 hidden items-center gap-0.5 rounded border border-primary-foreground/30 px-1 text-[10px] opacity-80 sm:inline-flex">
+                  <CornerDownLeft className="size-2.5" />
+                </kbd>
+              )}
+            </Button>
+          </div>
+
+          {ready && !result && !running && (
+            <div className="flex flex-wrap items-center gap-2 border-t border-border pt-3">
+              <span className="text-xs text-muted-foreground">Try:</span>
+              {SAMPLE_QUERIES.map((s) => (
+                <button
+                  key={s}
+                  type="button"
+                  onClick={() => {
+                    setQuery(s);
+                    run(s);
+                  }}
+                  className="rounded-full border border-border bg-muted/40 px-3 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                >
+                  {s}
+                </button>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTriangle className="size-4" />
+          <AlertTitle>Query failed</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {running && <ResultsSkeleton count={topK} />}
+
+      {!running && result && <Results result={result} />}
+    </div>
+  );
+}
+
+function SourceSummary({
+  server,
+  config,
+}: {
+  server: DemoStatus["server"];
+  config: DemoStatus["config"];
+}) {
+  const model = getEmbeddingModel(config.embeddingModelId);
+  const store = getVectorStore(config.vectorStore);
+
+  return (
+    <Card>
+      <CardContent className="flex flex-wrap items-center gap-x-6 gap-y-4 py-4">
+        <div className="flex items-center gap-2">
+          {server.running ? (
+            <Badge className="gap-1.5 bg-green-600/12 text-green-600 hover:bg-green-600/12">
+              <span className="relative flex size-2">
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
+                <span className="relative inline-flex size-2 rounded-full bg-green-500" />
+              </span>
+              Querying live server
+            </Badge>
+          ) : (
+            <Badge variant="secondary" className="gap-1.5">
+              <Database className="size-3" />
+              Direct retrieval
+            </Badge>
+          )}
+        </div>
+
+        <Meta
+          icon={Cpu}
+          label="Model"
+          value={model?.label ?? config.embeddingModelId}
+        />
+        <Meta
+          icon={Database}
+          label="Store"
+          value={store?.label ?? config.vectorStore}
+        />
+        <Meta
+          icon={Sparkles}
+          label="Index"
+          value={config.indexType.toUpperCase()}
+        />
+        {server.running && (
+          <Meta icon={Server} label="Endpoint" value={server.endpoint} mono />
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function Meta({
+  icon: Icon,
+  label,
+  value,
+  mono,
+}: {
+  icon: typeof Cpu;
+  label: string;
+  value: string;
+  mono?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+        <Icon className="size-3.5" />
+        {label}
+      </span>
+      <span
+        className={cn(
+          "text-sm font-medium leading-tight",
+          mono && "font-mono text-xs",
+        )}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function Results({ result }: { result: DemoResult }) {
+  if (result.hits.length === 0) {
+    return (
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center gap-1 py-12 text-center">
+          <Search className="mb-1 size-6 text-muted-foreground/60" />
+          <p className="text-sm font-medium">No matches found</p>
+          <p className="text-sm text-muted-foreground">
+            Nothing in the index scored against that query. Try rephrasing or
+            indexing more content.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h2 className="text-sm font-medium">
+          {result.hits.length} result{result.hits.length === 1 ? "" : "s"}
+        </h2>
+        <span className="font-mono text-xs text-muted-foreground tabular-nums">
+          {result.source === "server" ? "via server" : "via direct"} ·{" "}
+          {result.tookMs.toLocaleString()}ms
+        </span>
+      </div>
+
+      {result.hits.map((hit, i) => (
+        <HitCard key={hit.id || i} hit={hit} rank={i + 1} />
+      ))}
+    </div>
+  );
+}
+
+function HitCard({ hit, rank }: { hit: QueryHit; rank: number }) {
+  const pct = Math.round(Math.min(Math.max(hit.score, 0), 1) * 100);
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className="flex gap-4 py-4">
+        <div className="flex flex-col items-center gap-1 pt-0.5">
+          <span className="flex size-7 items-center justify-center rounded-md bg-muted text-xs font-semibold tabular-nums text-muted-foreground">
+            {rank}
+          </span>
+        </div>
+
+        <div className="min-w-0 flex-1 space-y-2">
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex min-w-0 items-center gap-2">
+              <FileText className="size-4 shrink-0 text-muted-foreground" />
+              <h3 className="truncate text-sm font-medium">
+                {hit.title || "Untitled"}
+              </h3>
+            </div>
+            <Badge
+              variant="secondary"
+              className="shrink-0 font-mono text-[11px] tabular-nums"
+            >
+              {pct}%
+            </Badge>
+          </div>
+
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            {hit.text.length > 360
+              ? `${hit.text.slice(0, 360).trim()}…`
+              : hit.text}
+          </p>
+
+          {hit.url && (
+            <a
+              href={hit.url}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+            >
+              <ExternalLink className="size-3" />
+              <span className="truncate">{hit.url}</span>
+            </a>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ResultsSkeleton({ count }: { count: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: Math.min(count, 4) }).map((_, i) => (
+        <Card key={i}>
+          <CardContent className="flex gap-4 py-4">
+            <Skeleton className="size-7 rounded-md" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-1/3" />
+              <Skeleton className="h-3 w-full" />
+              <Skeleton className="h-3 w-4/5" />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/components/global-settings.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import useSWR from "swr";
+import { Loader2, Save, ChevronLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { RagConfig } from "@larkup/core/types";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/components/ui/select";
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
+import { useWorkspace } from "@/components/workspace/workspace-provider";
+
+const fetcher = (url: string) =>
+  fetch(url).then((r) => r.json() as Promise<{ config: RagConfig }>);
+
+export function GlobalSettings({ onBack }: { onBack: () => void }) {
+  const { data, isLoading, mutate } = useSWR("/api/config", fetcher);
+  const [form, setForm] = useState<Partial<RagConfig>>({});
+  const [saving, setSaving] = useState(false);
+
+  const searchParams = useSearchParams();
+  const highlightSerper = searchParams.get("settings") === "serper";
+  const router = useRouter();
+  const pathname = usePathname();
+  const { setMode } = useWorkspace();
+
+  useEffect(() => {
+    if (data?.config) {
+      setForm(data.config);
+    }
+  }, [data]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const res = await fetch("/api/config", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ...data?.config, ...form }),
+      });
+      const json = await res.json();
+      if (!res.ok)
+        throw new Error(json.error ?? "Failed to save configuration");
+
+      await mutate(json, { revalidate: false });
+      toast.success("Global Settings saved");
+
+      if (highlightSerper) {
+        // Remove the query param if it was set
+        const params = new URLSearchParams(searchParams);
+        params.delete("settings");
+        router.replace(`${pathname}?${params.toString()}`);
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-40">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col min-h-0 h-full">
+      <div className="border-b px-4 py-3 font-semibold flex items-center gap-2 shrink-0 bg-muted/30">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 shrink-0"
+          onClick={onBack}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <span className="flex-1 truncate">Global Settings</span>
+        <Button
+          size="sm"
+          onClick={handleSave}
+          disabled={saving}
+          className="h-7 px-3 text-xs"
+        >
+          {saving ? (
+            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+          ) : (
+            <Save className="h-3 w-3 mr-1" />
+          )}
+          Save
+        </Button>
+      </div>
+
+      <div className="flex-1 min-h-0 p-4 space-y-6 overflow-y-auto ">
+        <div className="space-y-4">
+          <div className=" bg-card text-card-foreground  p-3 space-y-3">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Embedding
+            </h4>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Provider</Label>
+              <Select
+                value={form.embeddingProvider ?? undefined}
+                onValueChange={(v) =>
+                  setForm({ ...form, embeddingProvider: v! })
+                }
+              >
+                <SelectTrigger className="h-8! text-sm w-full">
+                  <span>{form.embeddingProvider || "Select provider"}</span>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="openai">OpenAI</SelectItem>
+                  <SelectItem value="google">Google</SelectItem>
+                  <SelectItem value="cohere">Cohere</SelectItem>
+                  <SelectItem value="mistral">Mistral</SelectItem>
+                  <SelectItem value="deepseek">DeepSeek</SelectItem>
+                  <SelectItem value="vercel_ai_gateway">
+                    Vercel AI Gateway
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">API Key</Label>
+              <Input
+                type="password"
+                className="h-8 text-sm"
+                value={form.embeddingApiKey || ""}
+                onChange={(e) =>
+                  setForm({ ...form, embeddingApiKey: e.target.value })
+                }
+                placeholder="sk-..."
+              />
+            </div>
+          </div>
+
+          <div className="  text-card-foreground  p-3 space-y-3">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Chat (LLM)
+            </h4>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Provider</Label>
+              <Select
+                value={form.chatProvider ?? form.embeddingProvider ?? undefined}
+                onValueChange={(v) => setForm({ ...form, chatProvider: v! })}
+              >
+                <SelectTrigger className="h-8! w-full text-sm">
+                  <span>
+                    {form.chatProvider ||
+                      form.embeddingProvider ||
+                      "Select provider"}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="openai">OpenAI</SelectItem>
+                  <SelectItem value="google">Google</SelectItem>
+                  <SelectItem value="cohere">Cohere</SelectItem>
+                  <SelectItem value="mistral">Mistral</SelectItem>
+                  <SelectItem value="deepseek">DeepSeek</SelectItem>
+                  <SelectItem value="vercel_ai_gateway">
+                    Vercel AI Gateway
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">API Key</Label>
+              <Input
+                type="password"
+                className="h-8 text-sm"
+                value={form.chatApiKey || ""}
+                onChange={(e) =>
+                  setForm({ ...form, chatApiKey: e.target.value })
+                }
+                placeholder="Leave blank to use Embedding Key"
+              />
+            </div>
+          </div>
+
+          <div className=" bg-card text-card-foreground  p-3 space-y-3">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Web Search
+            </h4>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Serper.dev API Key</Label>
+              <Input
+                type="password"
+                className={`h-8 text-sm ${highlightSerper && !form.serperApiKey ? "border-red-500 focus-visible:ring-red-500" : ""}`}
+                value={form.serperApiKey || ""}
+                onChange={(e) =>
+                  setForm({ ...form, serperApiKey: e.target.value })
+                }
+                placeholder="Serper API Key"
+              />
+              {highlightSerper && !form.serperApiKey && (
+                <p className="text-[10px] text-red-500">
+                  API Key is required for web search.
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className=" bg-card text-card-foreground  p-3 space-y-3">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Scraper
+            </h4>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Proxy Server</Label>
+              <Input
+                className="h-8 text-sm"
+                value={form.scraperProxyServer || ""}
+                onChange={(e) =>
+                  setForm({ ...form, scraperProxyServer: e.target.value })
+                }
+                placeholder="http://proxy.example.com:8080"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Proxy Username</Label>
+              <Input
+                className="h-8 text-sm"
+                value={form.scraperProxyUsername || ""}
+                onChange={(e) =>
+                  setForm({ ...form, scraperProxyUsername: e.target.value })
+                }
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Proxy Password</Label>
+              <Input
+                type="password"
+                className="h-8 text-sm"
+                value={form.scraperProxyPassword || ""}
+                onChange={(e) =>
+                  setForm({ ...form, scraperProxyPassword: e.target.value })
+                }
+              />
+            </div>
+            <div className="space-y-1.5 pt-2">
+              <Label className="text-xs">Firecrawl API Key (Cloud)</Label>
+              <Input
+                type="password"
+                className="h-8 text-sm"
+                value={form.firecrawlApiKey || ""}
+                onChange={(e) =>
+                  setForm({ ...form, firecrawlApiKey: e.target.value })
+                }
+                placeholder="fc-..."
+              />
+            </div>
+          </div>
+
+          <div className="bg-card text-card-foreground p-3 space-y-3 rounded-lg border">
+            <h4 className="font-semibold leading-none tracking-tight text-sm">
+              Workspace Mode
+            </h4>
+            <p className="text-xs text-muted-foreground">
+              Switch to simple mode for a streamlined experience without
+              pipeline configuration.
+            </p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full text-xs"
+              onClick={async () => {
+                await setMode("simple");
+                router.push("/simple/chat");
+              }}
+            >
+              Switch to Simple Mode
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}