Amos
0baa00e418
Sidebar (replaces the modal drawer): - Inline, toggleable, no backdrop/focus theft — can stay open while working - Open state persists across pages (provider in root layout) and reloads (localStorage; starts closed server-side to avoid hydration mismatch, stored value applied post-mount; default open on first run) - Hamburger in page headers only when closed; close button in sidebar header Floating composer blob (per reference screenshot): - Floats over the transcript (absolute overlay), persists at bottom while scrolling, content fades behind it (gradient mask); pb-44 scroll clearance - Concentric corner radii: blob rounded-2xl(16px) − p-1.5(6px) = send rounded-[10px] = 25% of the 40px button; CornerDownLeft icon per reference - Stop moved from header into the blob (busy → square icon) - prompt-input.tsx + 7 orphan ui files pruned (attachments/command palette unused); hand-rolled Composer is ~100 lines and render-tested Pending-question morph (one text field on screen, never two): - Quiz/ask-select pending → blob becomes the note field (send hidden, hint line above); card's internal note input removed; Submit consumes it - Ask free-text pending → blob becomes the answer field; its send submits via the card's registered submit api (ref bridge); Enter works - Chat owns the single text state; card clears it on submit - canSend for answer mode mirrors the card predicate directly — reading the ref during render lagged one commit (found in browser testing) Widths: one shared column (max-w-3xl + px-4) for transcript, cards, and composer — all three measured pixel-identical (left 416, width 736). Assistant Message max-w-full/MessageContent w-full (was max-w-[95%]/w-fit — the 'cards are a bit shorter' bug). User messages render plain text again — no math pipeline on learner-authored text (currency hazard accepted for the model only, guarded by the prompt). Tests: 58 pass (5 new composer pins; card tests updated to controlled props). Verified live: note flow, answer flow, sidebar persistence, float, fade, zero console errors — plus the live model spontaneously honoring the $ currency escape contract in a continuation.
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { CornerDownLeftIcon, WaypointsIcon } from "lucide-react";
|
|
import { SidebarToggle } from "@/components/sidebar";
|
|
|
|
/**
|
|
* Home — the knowledge graph is the main view (placeholder until the graph
|
|
* pipeline lands), with the new-session blob docked below it. Sessions live
|
|
* in the toggleable sidebar.
|
|
*/
|
|
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">
|
|
<SidebarToggle />
|
|
</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 — same floating blob as the chat composer. */}
|
|
<div className="pb-4">
|
|
<div className="mx-auto w-full max-w-3xl px-4">
|
|
<form
|
|
className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
void start();
|
|
}}
|
|
>
|
|
<textarea
|
|
value={topic}
|
|
onChange={(e) => setTopic(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
void start();
|
|
}
|
|
}}
|
|
placeholder="What do you want to learn?"
|
|
autoFocus
|
|
rows={1}
|
|
className="field-sizing-content max-h-48 min-h-10 flex-1 resize-none bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
aria-label="Start session"
|
|
disabled={!topic.trim() || busy}
|
|
className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-primary text-primary-foreground transition-colors hover:opacity-90 disabled:opacity-40"
|
|
>
|
|
<CornerDownLeftIcon className="size-5" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|