2b6b7186d3
ChatInput: textarea on top, inline tool pills (Think, Search) on the left and send button on the right — single rounded pod, no more bolted-on feel. Smaller pill buttons with subtle ring instead of heavy borders. MessageBubble: add sanitizeModelOutput() that strips training-artifact leaks: <b>/<i>/<strong>/<em> HTML tags, stray standalone '<' markers, leading 'Answer:/Response:' labels, placeholder image markdown. Applied before tool-marker parsing so cleaned text also feeds the <think> card renderer. |
||
|---|---|---|
| .. | ||
| app | ||
| components | ||
| hooks | ||
| lib | ||
| public | ||
| store | ||
| types | ||
| .dockerignore | ||
| .env.example | ||
| .eslintrc.json | ||
| .gitignore | ||
| auth.ts | ||
| Dockerfile | ||
| index.html | ||
| middleware.ts | ||
| next-env.d.ts | ||
| next.config.mjs | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.mjs | ||
| README.md | ||
| tailwind.config.ts | ||
| tsconfig.json | ||
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./loginSign-in — left: architectural/mandala motif with saffron-cream gradient; right: Google + GitHub OAuth, disabled email input./chatChat — 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 flagsGET /api/conversations— mocked conversation listPOST /api/chat/stream— proxies toCHAT_API_URL/chat/completionsif set, otherwise streams a mock echo. Emits SSE:data: {"token": "...", "gpu": 0}\n\nand terminates withdata: {"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.