nanochat/services/frontend

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

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

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.