Amos
46d71380fa
Layout:
- Home = knowledge-graph placeholder (main view) with new-session input
docked below; session list moved out of home into a hamburger drawer
- SessionDrawer: slide-over session navigation (backdrop/ESC close, active
highlight, fetches /api/chats on open) on both home and chat headers
- Chat header loses the back button — the drawer is the navigation
Math (inline $ was silently not rendering):
- @streamdown/math defaults singleDollarTextMath:false — now
createMathPlugin({ singleDollarTextMath: true }) in message + reasoning
- katex.min.css imported in layout (streamdown does not inject plugin
styles; display math only looked right via browser MathML fallback)
- QuizCard/AnsweredCard route question/options/explanation through
MessageResponse; user chat bubbles render markdown+math too
- Currency hazard: micromark-extension-math@3.1 lacks pandoc's
closing-digit rule, so bare '$5 and $10' parses as math — defense is at
the source: system prompt now instructs escaped \$5 / 'USD' for money
Hydration fix (React #418):
- QuizCard shuffled options with Math.random() — server/client orders
diverged. shuffleOptions now takes an injectable RNG; QuizCard passes
seededRandom(toolCallId) (mulberry32/FNV-1a in question-core). Same
question → same stable order across reloads; still varies per question.
Tests: 53 pass (5 new math-rendering pins incl. fenced-vs-one-line $$
behavior and the escaped-currency contract). tsc + next build clean.
Verified live in browser: inline/display math in text + cards, drawer
open/navigate/active-highlight/ESC, no console errors, no font 404s.
79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { WaypointsIcon } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { SessionDrawer } from "@/components/session-drawer";
|
|
|
|
/**
|
|
* Home — the knowledge graph is the main view (placeholder until the graph
|
|
* pipeline lands), with the new-session input docked below it. Sessions live
|
|
* in the hamburger drawer.
|
|
*/
|
|
export function Home() {
|
|
const router = useRouter();
|
|
const [topic, setTopic] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const start = async () => {
|
|
const t = topic.trim();
|
|
if (!t || busy) return;
|
|
setBusy(true);
|
|
try {
|
|
const res = await fetch("/api/chats", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ title: t }),
|
|
});
|
|
const { id } = (await res.json()) as { id: string };
|
|
router.push(`/chat/${id}?prompt=${encodeURIComponent(t)}`);
|
|
} catch {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-dvh flex-col">
|
|
<header className="flex items-center gap-2 px-3 py-2">
|
|
<SessionDrawer />
|
|
</header>
|
|
|
|
{/* Graph — the main view. Placeholder until the knowledge graph lands. */}
|
|
<main className="flex flex-1 items-center justify-center px-4">
|
|
<div className="flex flex-col items-center gap-3 text-center text-muted-foreground">
|
|
<WaypointsIcon className="size-10 opacity-40" strokeWidth={1.25} />
|
|
<div className="text-lg font-medium text-foreground">Knowledge graph</div>
|
|
<p className="max-w-sm text-sm">
|
|
Every session you complete will map what you know — and where the edge of your
|
|
understanding is — right here.
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
{/* New session input */}
|
|
<div className="px-4 pb-6">
|
|
<form
|
|
className="mx-auto flex w-full max-w-2xl gap-2"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
void start();
|
|
}}
|
|
>
|
|
<Input
|
|
value={topic}
|
|
onChange={(e) => setTopic(e.target.value)}
|
|
placeholder="What do you want to learn?"
|
|
autoFocus
|
|
className="h-11"
|
|
/>
|
|
<Button type="submit" disabled={!topic.trim() || busy} className="h-11">
|
|
{busy ? "Starting…" : "Start"}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|