Skip to content

feat(web): Redesign model selector with T3 Chat-style layout - #489

Closed
leoisadev1 wants to merge 1 commit into
mainfrom
feat/model-selector-redesign
Closed

feat(web): Redesign model selector with T3 Chat-style layout#489
leoisadev1 wants to merge 1 commit into
mainfrom
feat/model-selector-redesign

Conversation

@leoisadev1

Copy link
Copy Markdown
Member

Summary

  • Redesigned model selector dropdown to match T3 Chat's modern two-column layout
  • Added provider sidebar for quick filtering by AI provider
  • Added favorites system with star toggle on each model row
  • Compact rows with capability icons instead of verbose descriptions

Changes

Layout:

  • Two-column design: provider sidebar (48px) + model list
  • Provider icons in left sidebar for one-click filtering
  • Star icon at top for favorites-only view

Model Rows:

  • Provider logo + model name (bold, truncates)
  • 🧠 Brain icon (amber) for reasoning-capable models
  • 👁 Eye icon (sky blue) for vision-capable models
  • "Free" badge (emerald) for free models
  • ⭐ Star toggle (appears on hover, filled if favorited)
  • ✓ Checkmark for currently selected model

Preserved:

  • Keyboard navigation (↑↓ Enter Escape)
  • Search/filter functionality
  • External API (ModelSelector and ConnectedModelSelector props unchanged)

Design Reference

Based on Theo's T3 Chat model selector design, adapted to use OpenChat's existing theme colors.

- Add provider sidebar with filter-by-provider functionality
- Add favorites system with star toggle on each model row
- Add capability icons (brain for reasoning, eye for vision)
- Remove verbose descriptions for compact rows
- Preserve keyboard navigation (arrow keys, enter, escape)
- Use OpenChat theme colors throughout
@github-actions

github-actions Bot commented Jan 7, 2026

Copy link
Copy Markdown
Contributor

🚀 Preview Deployment Ready

Environment URL
Frontend https://web-openchat-pr-489.up.railway.app
Convex Dashboard Dashboard

Convex Preview Backend

  • Cloud URL: https://useful-puffin-372.convex.cloud
  • Site URL: https://useful-puffin-372.convex.site

🤖 Deployed automatically by GitHub Actions

@leoisadev1 leoisadev1 closed this Jan 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant