Why
The current model selector uses two large side-by-side cards that take up too much vertical space and don't feel polished enough for the hackathon demo. We want to impress judges with a minimal, clean interface.
What
- Replace card-based model selector with a compact Select dropdown in the nav bar
- Add proper Claude and Gemini icon marks (SVG, icon-only — no text logos)
- Remove the bordered header section from the chat panel — the selector moves into the nav
- Create a shared model context so nav and chat panel can share model state cleanly
Files to touch
| File |
Action |
src/components/icons/model-icons.tsx |
New — Claude & Gemini SVG icons |
src/components/chat/model-context.tsx |
New — shared model state context |
src/components/chat/model-selector.tsx |
Rewrite — cards → Select dropdown |
src/components/nav.tsx |
Add ModelSelector to right-side controls |
src/components/chat/chat-panel.tsx |
Remove selector header, use context |
src/components/providers.tsx |
Add ModelProvider |
Reference
Style/font inspiration: https://github.com/lfglabs-dev/private-ethereum-assistant
Why
The current model selector uses two large side-by-side cards that take up too much vertical space and don't feel polished enough for the hackathon demo. We want to impress judges with a minimal, clean interface.
What
Files to touch
src/components/icons/model-icons.tsxsrc/components/chat/model-context.tsxsrc/components/chat/model-selector.tsxsrc/components/nav.tsxsrc/components/chat/chat-panel.tsxsrc/components/providers.tsxReference
Style/font inspiration: https://github.com/lfglabs-dev/private-ethereum-assistant