mirror of
https://github.com/karpathy/nanochat.git
synced 2026-05-13 03:10:30 +00:00
634be4080b
Build services/frontend/ replacing the legacy nanochat/ui.html single-file UI. Landing, login, and chat pages ported with full design system: Devanagari + Great Vibes hero, samosa/chai/toran SVG animations, gold/cream palette. - App Router pages: / (hero + floating illustrations), /login (split-screen OAuth with mandala motif), /chat (260px collapsible sidebar, suggestion chips, markdown + code-copy, auto-expanding input, slash commands) - SSE streaming via useSSE hook and /api/chat/stream BFF route (proxies to CHAT_API_URL when set, falls back to mock echo for local dev) - NextAuth.js v5 with Google + GitHub providers; middleware gates /chat/* - Zustand store with localStorage persistence for conversations/settings - Tailwind theme carries all ui.html tokens + keyframes (pendulum, float, wobble, steamFloat, steamType); SVG assets componentized under components/svg - Multi-stage node:20-alpine Dockerfile with Next standalone output Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
71 lines
3.2 KiB
Markdown
71 lines
3.2 KiB
Markdown
# samosaChaat — Frontend Service
|
|
|
|
Next.js 14 (App Router) application that replaces the legacy `nanochat/ui.html`. It blends Sarvam.ai's clean split-screen layout with samosaChaat's warm desi personality — samosa and chai illustrations, lemon-mirchi toran, gold + cream palette.
|
|
|
|
## Pages
|
|
|
|
- `/` Landing — Devanagari + Great Vibes calligraphy, animated samosa (float), chai kettle (wobble + steam), toran (pendulum), ambient doodles, CTA.
|
|
- `/login` Sign-in — left: architectural/mandala motif with saffron-cream gradient; right: Google + GitHub OAuth, disabled email input.
|
|
- `/chat` Chat — collapsible 260px sidebar (grouped history, model selector, user avatar, logout), main area with empty state + suggestion chips, markdown rendering with code-copy, auto-expanding textarea, slash commands (`/temperature`, `/topk`, `/clear`, `/help`), SSE streaming with steam typing indicator.
|
|
|
|
## Tech
|
|
|
|
- Next.js 14 (App Router, standalone output)
|
|
- Tailwind CSS (theme tokens carried from `ui.html`)
|
|
- Zustand (persisted conversations/settings)
|
|
- NextAuth.js v5 (Google + GitHub)
|
|
- Framer Motion (hero transitions)
|
|
- Lucide React (icons)
|
|
- react-markdown + rehype-highlight (assistant rendering)
|
|
|
|
## Environment
|
|
|
|
Copy `.env.example` → `.env.local` and fill in:
|
|
|
|
| Var | Purpose |
|
|
| --- | --- |
|
|
| `NEXT_PUBLIC_APP_URL` | Public URL (defaults to `http://localhost:3000`) |
|
|
| `AUTH_SERVICE_URL` | Auth microservice (BFF only; reserved for future) |
|
|
| `CHAT_API_URL` | Upstream chat service. **If unset the frontend serves mock echo responses** — perfect for local dev. |
|
|
| `NEXTAUTH_SECRET` | `openssl rand -base64 32` |
|
|
| `GOOGLE_CLIENT_ID` / `GOOGLE_CLIENT_SECRET` | Google OAuth (optional in dev) |
|
|
| `GITHUB_CLIENT_ID` / `GITHUB_CLIENT_SECRET` | GitHub OAuth (optional in dev) |
|
|
|
|
Middleware protects `/chat/*` — unauthenticated users are redirected to `/login?callbackUrl=/chat`.
|
|
|
|
## Run locally
|
|
|
|
```bash
|
|
cd services/frontend
|
|
npm install
|
|
cp .env.example .env.local # then edit
|
|
npm run dev
|
|
# → http://localhost:3000
|
|
```
|
|
|
|
Without any OAuth keys the `/login` buttons will show the NextAuth error page; the rest of the UI works via the mocked API routes.
|
|
|
|
## API routes (BFF pattern)
|
|
|
|
All client calls hit Next.js routes — the frontend never talks to the chat backend directly.
|
|
|
|
- `GET /api/health` — service info + upstream config flags
|
|
- `GET /api/conversations` — mocked conversation list
|
|
- `POST /api/chat/stream` — proxies to `CHAT_API_URL/chat/completions` if set, otherwise streams a mock echo. Emits SSE: `data: {"token": "...", "gpu": 0}\n\n` and terminates with `data: {"done": true}\n\n`.
|
|
|
|
## Docker
|
|
|
|
```bash
|
|
docker build -t samosachaat-frontend .
|
|
docker run --rm -p 3000:3000 \
|
|
-e NEXTAUTH_SECRET=... \
|
|
-e CHAT_API_URL=http://host.docker.internal:8000 \
|
|
samosachaat-frontend
|
|
```
|
|
|
|
The image is based on `node:20-alpine`, uses Next.js `output: standalone`, and runs as a non-root user.
|
|
|
|
## Porting notes
|
|
|
|
All SVG assets (samosa, chai kettle, toran, steam, doodles, logo) are componentized under `components/svg/`. CSS keyframes (`pendulum`, `float`, `wobble`, `steamFloat`, `steamType`) moved into `tailwind.config.ts` — reference via the `animate-*` utilities. The original single-file UI lives at `nanochat/ui.html` for reference.
|