birdclaw 0.6.0 → 0.8.0

package/src/routes/discuss.tsx

@@ -0,0 +1,419 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+	ChevronDown,
+	CheckCircle2,
+	Loader2,
+	RefreshCw,
+	Search,
+	Sparkles,
+} from "lucide-react";
+import {
+	type FormEvent,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { MarkdownViewer } from "#/components/MarkdownViewer";
+import type {
+	SearchDiscussionContext,
+	SearchDiscussionRunResult,
+	SearchDiscussionSource,
+	SearchDiscussionStreamEvent,
+} from "#/lib/search-discussion";
+import type { TweetSearchMode } from "#/lib/tweet-search-live";
+import {
+	cx,
+	errorCopyClass,
+	pageHeaderActionsClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	primaryButtonClass,
+	searchFieldIconClass,
+	searchFieldInputClass,
+	searchFieldShellClass,
+	secondaryButtonClass,
+	selectFieldClass,
+	textFieldClass,
+} from "#/lib/ui";
+
+export const Route = createFileRoute("/discuss")({
+	component: DiscussRoute,
+});
+
+const sources: Array<{ value: SearchDiscussionSource; label: string }> = [
+	{ value: "search", label: "Live search" },
+	{ value: "all", label: "All local" },
+	{ value: "home", label: "Home" },
+	{ value: "mentions", label: "Mentions" },
+	{ value: "authored", label: "Authored" },
+	{ value: "likes", label: "Likes" },
+	{ value: "bookmarks", label: "Bookmarks" },
+];
+
+const modes: Array<{ value: TweetSearchMode; label: string }> = [
+	{ value: "auto", label: "Auto" },
+	{ value: "bird", label: "Bird" },
+	{ value: "xurl", label: "xurl" },
+	{ value: "local", label: "Local" },
+];
+const DISCUSS_SEARCH_LIMIT = 20_000;
+const DISCUSS_MAX_PAGES = 200;
+
+function discussionUrl(
+	query: string,
+	options: {
+		source: SearchDiscussionSource;
+		mode: TweetSearchMode;
+		includeDms: boolean;
+		question: string;
+		refresh: boolean;
+	},
+) {
+	const url = new URL("/api/search-discussion", window.location.origin);
+	url.searchParams.set("query", query);
+	url.searchParams.set("source", options.source);
+	url.searchParams.set("mode", options.mode);
+	url.searchParams.set("includeDms", String(options.includeDms));
+	url.searchParams.set("limit", String(DISCUSS_SEARCH_LIMIT));
+	url.searchParams.set("maxPages", String(DISCUSS_MAX_PAGES));
+	if (options.question.trim()) {
+		url.searchParams.set("question", options.question.trim());
+	}
+	if (options.refresh) {
+		url.searchParams.set("refresh", "true");
+	}
+	return url;
+}
+
+function DropdownField<T extends string>({
+	label,
+	value,
+	options,
+	onChange,
+}: {
+	label: string;
+	value: T;
+	options: Array<{ value: T; label: string }>;
+	onChange: (value: T) => void;
+}) {
+	return (
+		<label className="relative min-w-0">
+			<span className="pointer-events-none absolute left-3 top-1.5 z-10 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--ink-soft)]">
+				{label}
+			</span>
+			<select
+				aria-label={label}
+				className={cx(
+					selectFieldClass,
+					"h-[54px] rounded-2xl bg-[var(--bg)] pb-1 pl-3 pr-9 pt-5 font-semibold text-[var(--ink)]",
+				)}
+				value={value}
+				onChange={(event) => onChange(event.currentTarget.value as T)}
+			>
+				{options.map((item) => (
+					<option key={item.value} value={item.value}>
+						{item.label}
+					</option>
+				))}
+			</select>
+			<ChevronDown
+				aria-hidden="true"
+				className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[var(--ink-soft)]"
+				strokeWidth={2}
+			/>
+		</label>
+	);
+}
+
+async function discussionRequestError(response: Response) {
+	const status = `${String(response.status)}${response.statusText ? ` ${response.statusText}` : ""}`;
+	let detail = "";
+	try {
+		const contentType = response.headers.get("content-type") ?? "";
+		if (contentType.includes("application/json")) {
+			const payload = (await response.json()) as {
+				error?: unknown;
+				message?: unknown;
+			};
+			if (typeof payload.message === "string") detail = payload.message;
+			else if (typeof payload.error === "string") detail = payload.error;
+		} else {
+			detail = (await response.text()).trim();
+		}
+	} catch {
+		detail = "";
+	}
+	return new Error(
+		detail
+			? `Discussion request failed (${status}): ${detail}`
+			: `Discussion request failed (${status})`,
+	);
+}
+
+function formatCounts(context: SearchDiscussionContext | null) {
+	if (!context) return "Live keyword search with local memory.";
+	const counts = context.counts;
+	const live = context.liveSearch
+		? context.liveSearch.ok
+			? `${context.liveSearch.source} ${String(context.liveSearch.count)} fetched`
+			: `${context.liveSearch.source} failed`
+		: "local";
+	return [
+		live,
+		`${String(counts.search)} search`,
+		`${String(counts.home + counts.mentions + counts.authored)} timeline`,
+		`${String(counts.likes + counts.bookmarks)} saved`,
+		context.includeDms ? `${String(counts.dms)} DMs` : null,
+	]
+		.filter(Boolean)
+		.join(" · ");
+}
+
+function useDiscussionStream(
+	query: string,
+	source: SearchDiscussionSource,
+	mode: TweetSearchMode,
+	includeDms: boolean,
+	question: string,
+) {
+	const [markdown, setMarkdown] = useState("");
+	const [context, setContext] = useState<SearchDiscussionContext | null>(null);
+	const [result, setResult] = useState<SearchDiscussionRunResult | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [loading, setLoading] = useState(false);
+	const abortRef = useRef<AbortController | null>(null);
+	const requestIdRef = useRef(0);
+
+	const run = useCallback(
+		(refresh = false) => {
+			const trimmed = query.trim();
+			if (!trimmed) return;
+			abortRef.current?.abort();
+			const controller = new AbortController();
+			const requestId = requestIdRef.current + 1;
+			requestIdRef.current = requestId;
+			abortRef.current = controller;
+			const isActiveRequest = () =>
+				abortRef.current === controller &&
+				requestIdRef.current === requestId &&
+				!controller.signal.aborted;
+			setMarkdown("");
+			setContext(null);
+			setResult(null);
+			setError(null);
+			setLoading(true);
+
+			fetch(
+				discussionUrl(trimmed, {
+					source,
+					mode,
+					includeDms,
+					question,
+					refresh,
+				}),
+				{ signal: controller.signal },
+			)
+				.then(async (response) => {
+					if (!response.ok) {
+						throw await discussionRequestError(response);
+					}
+					if (!response.body) {
+						throw new Error("Discussion request failed: empty response body");
+					}
+					const reader = response.body.getReader();
+					const decoder = new TextDecoder();
+					let buffer = "";
+					const pump = (): Promise<void> =>
+						reader.read().then(({ done, value }) => {
+							if (!isActiveRequest()) return;
+							if (done) return;
+							buffer += decoder.decode(value, { stream: true });
+							let newline = buffer.indexOf("\n");
+							while (newline >= 0) {
+								const line = buffer.slice(0, newline).trim();
+								buffer = buffer.slice(newline + 1);
+								if (line) {
+									const event = JSON.parse(line) as SearchDiscussionStreamEvent;
+									if (!isActiveRequest()) return;
+									if (event.type === "start") {
+										setContext(event.context);
+									} else if (event.type === "delta") {
+										setMarkdown((current) => current + event.delta);
+									} else if (event.type === "done") {
+										setResult(event.result);
+										setContext(event.result.context);
+										setMarkdown(event.result.markdown);
+									} else if (event.type === "error") {
+										setError(event.error);
+									}
+								}
+								newline = buffer.indexOf("\n");
+							}
+							return pump();
+						});
+					return pump();
+				})
+				.catch((cause: unknown) => {
+					if (!isActiveRequest()) return;
+					setError(
+						cause instanceof Error ? cause.message : "Discussion failed",
+					);
+				})
+				.finally(() => {
+					if (isActiveRequest()) {
+						setLoading(false);
+					}
+				});
+		},
+		[includeDms, mode, query, question, source],
+	);
+
+	useEffect(() => () => abortRef.current?.abort(), []);
+
+	return { context, error, loading, markdown, result, run };
+}
+
+function DiscussRoute() {
+	const [query, setQuery] = useState("");
+	const [submittedQuery, setSubmittedQuery] = useState("");
+	const [question, setQuestion] = useState("");
+	const [source, setSource] = useState<SearchDiscussionSource>("search");
+	const [mode, setMode] = useState<TweetSearchMode>("xurl");
+	const [includeDms, setIncludeDms] = useState(false);
+	const pendingSubmitRef = useRef(false);
+	const { context, error, loading, markdown, result, run } =
+		useDiscussionStream(submittedQuery, source, mode, includeDms, question);
+	const sourceLabel = useMemo(
+		() => formatCounts(result?.context ?? context),
+		[context, result],
+	);
+
+	function submit(event: FormEvent) {
+		event.preventDefault();
+		const trimmed = query.trim();
+		if (!trimmed) return;
+		pendingSubmitRef.current = true;
+		setSubmittedQuery(trimmed);
+		if (trimmed === submittedQuery) {
+			pendingSubmitRef.current = false;
+			run(false);
+		}
+	}
+
+	useEffect(() => {
+		if (!submittedQuery || !pendingSubmitRef.current) return;
+		pendingSubmitRef.current = false;
+		run(false);
+	}, [run, submittedQuery]);
+
+	return (
+		<div className="flex min-h-screen flex-col">
+			<header className={pageHeaderClass}>
+				<div className={pageHeaderRowClass}>
+					<div className="min-w-0">
+						<h1 className={pageTitleClass}>Discuss</h1>
+						<p className={pageSubtitleClass}>{sourceLabel}</p>
+					</div>
+					<div className={pageHeaderActionsClass}>
+						<button
+							type="button"
+							className={secondaryButtonClass}
+							onClick={() => run(true)}
+							disabled={loading || !submittedQuery}
+						>
+							<RefreshCw
+								className={cx("size-4", loading && "animate-spin")}
+								aria-hidden="true"
+							/>
+							Refresh
+						</button>
+					</div>
+				</div>
+				<form
+					className="grid gap-2 px-4 pb-3 md:grid-cols-[minmax(220px,1fr)_minmax(180px,0.8fr)_auto]"
+					onSubmit={submit}
+				>
+					<label className={searchFieldShellClass}>
+						<Search className={searchFieldIconClass} strokeWidth={2} />
+						<input
+							className={searchFieldInputClass}
+							placeholder="Keywords"
+							value={query}
+							onChange={(event) => setQuery(event.currentTarget.value)}
+						/>
+					</label>
+					<input
+						className={textFieldClass}
+						placeholder="Optional question"
+						value={question}
+						onChange={(event) => setQuestion(event.currentTarget.value)}
+					/>
+					<button
+						type="submit"
+						className={primaryButtonClass}
+						disabled={loading || !query.trim()}
+					>
+						<Sparkles className="size-4" aria-hidden="true" />
+						Discuss
+					</button>
+					<div className="grid gap-2 md:col-span-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
+						<DropdownField
+							label="Source"
+							options={sources}
+							value={source}
+							onChange={setSource}
+						/>
+						<DropdownField
+							label="Mode"
+							options={modes}
+							value={mode}
+							onChange={setMode}
+						/>
+						<label className="inline-flex h-[54px] items-center gap-2 rounded-2xl border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-medium text-[var(--ink-soft)]">
+							<input
+								type="checkbox"
+								checked={includeDms}
+								onChange={(event) => setIncludeDms(event.currentTarget.checked)}
+							/>
+							DMs
+						</label>
+					</div>
+				</form>
+			</header>
+
+			{error ? <div className={errorCopyClass}>{error}</div> : null}
+
+			<div className="border-b border-[var(--line)] px-4 py-2 text-[13px] text-[var(--ink-soft)]">
+				<span className="inline-flex items-center gap-1">
+					{loading ? (
+						<Loader2 className="size-4 animate-spin" aria-hidden="true" />
+					) : markdown ? (
+						<CheckCircle2 className="size-4" aria-hidden="true" />
+					) : (
+						<Sparkles className="size-4" aria-hidden="true" />
+					)}
+					{loading
+						? "Searching and streaming"
+						: result
+							? `${result.cached ? "Cached" : "Ready"} · ${result.context.query}`
+							: "Ready"}
+				</span>
+			</div>
+
+			{markdown ? (
+				<MarkdownViewer
+					context={(result?.context ?? context) as never}
+					markdown={markdown}
+				/>
+			) : (
+				<div className="px-4 py-5 text-[14px] text-[var(--ink-soft)]">
+					{loading ? "Waiting for the first tokens..." : "Search to begin."}
+				</div>
+			)}
+		</div>
+	);
+}