Story 23: Alphabetize LLM dropdown list

User Story:
As a user, I want the LLM model dropdown to be alphabetically sorted
so I can quickly find the model I'm looking for.

Implementation:
- Added alphabetical sorting with case-insensitive comparison
- Used localeCompare() for proper string comparison
- Sort happens immediately after fetching models from backend
- Currently selected model remains selected after sorting

Technical Details:
- Sort logic: models.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
- Frontend-only change, no backend modifications needed
- Sorting preserves model selection state

Acceptance Criteria Met:
 Models sorted alphabetically (case-insensitive)
 Selected model remains selected after sorting
 Works for all models from Ollama
 Updates correctly when models change

Files Changed:
- src/components/Chat.tsx: Added sorting logic to model fetch
- .living_spec/stories/23_alphabetize_llm_dropdown.md: Marked complete
This commit is contained in:
Dave
2025-12-27 19:30:17 +00:00
parent f963c2e17e
commit bdb82bcf49
2 changed files with 9 additions and 5 deletions

View File

@@ -4,10 +4,10 @@
As a user, I want the LLM model dropdown to be alphabetically sorted so I can quickly find the model I'm looking for. As a user, I want the LLM model dropdown to be alphabetically sorted so I can quickly find the model I'm looking for.
## Acceptance Criteria ## Acceptance Criteria
- [ ] The model dropdown list is sorted alphabetically (case-insensitive) - [x] The model dropdown list is sorted alphabetically (case-insensitive)
- [ ] The currently selected model remains selected after sorting - [x] The currently selected model remains selected after sorting
- [ ] The sorting works for all models returned from Ollama - [x] The sorting works for all models returned from Ollama
- [ ] The sorted list updates correctly when models are added/removed - [x] The sorted list updates correctly when models are added/removed
## Out of Scope ## Out of Scope
- Grouping models by type or provider - Grouping models by type or provider

View File

@@ -84,7 +84,11 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
invoke<string[]>("get_ollama_models") invoke<string[]>("get_ollama_models")
.then(async (models) => { .then(async (models) => {
if (models.length > 0) { if (models.length > 0) {
setAvailableModels(models); // Sort models alphabetically (case-insensitive)
const sortedModels = models.sort((a, b) =>
a.toLowerCase().localeCompare(b.toLowerCase()),
);
setAvailableModels(sortedModels);
// Check backend store for saved model // Check backend store for saved model
try { try {