feat(provider-model-list): enhance filtering and sorting capabilities…#1433
Merged
feat(provider-model-list): enhance filtering and sorting capabilities…#1433
Conversation
… with new UI components and localization
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
✅ Files skipped from review due to trivial changes (8)
📝 WalkthroughWalkthroughReplaces the ProviderModelList header with combined search, advanced facet filters (capabilities/types), and sort UI; centralizes filtering/sorting into a Changes
Sequence Diagram(s)(omitted) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 9
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/renderer/settings/components/ProviderModelList.vue (1)
1-687:⚠️ Potential issue | 🟡 MinorAddress oxfmt formatting issues flagged by pipeline.
The CI pipeline reports formatting issues in this file. Run
oxfmtto fix formatting inconsistencies.oxfmt .🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/settings/components/ProviderModelList.vue` around lines 1 - 687, The pipeline flagged formatting errors in ProviderModelList.vue; run the project formatter (oxfmt) over the file and commit the resulting changes to resolve CI failures. Specifically, open ProviderModelList.vue (template and <script setup>) and run `oxfmt .` (or your repo's formatting script) to reformat the template, imports, reactive declarations (e.g., modelSearchQuery, filterState, virtualItems), and helper functions (e.g., sortModels, filterAndSortModels, getItemSizeDependencies), then stage and commit the formatted file so the CI pipeline passes.
🧹 Nitpick comments (1)
src/renderer/settings/components/ProviderModelList.vue (1)
627-634: Type narrowing needed fortoken.valueinremoveFilterToken.The
token.valueis typed asstring, but when filteringfilterState.capabilities, it expectsModelCapabilityKey. Similarly forfilterState.typesexpectingModelType. While this works at runtime, the type assertion is implicit.Consider using explicit type assertions for clarity:
Proposed refinement
const removeFilterToken = (token: FilterToken) => { if (token.kind === 'capability') { - filterState.capabilities = filterState.capabilities.filter((item) => item !== token.value) + filterState.capabilities = filterState.capabilities.filter( + (item) => item !== (token.value as ModelCapabilityKey) + ) return } - filterState.types = filterState.types.filter((item) => item !== token.value) + filterState.types = filterState.types.filter((item) => item !== (token.value as ModelType)) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/settings/components/ProviderModelList.vue` around lines 627 - 634, The removeFilterToken function narrows on token.kind but uses token.value (typed as string) against filterState.capabilities and filterState.types which expect ModelCapabilityKey and ModelType; update the filtering to use explicit type assertions/casts so the compiler knows the types (e.g., cast token.value to ModelCapabilityKey when token.kind === 'capability' and to ModelType otherwise) and keep references to FilterToken and filterState in the same function to ensure correct narrowing.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/renderer/settings/components/ProviderModelList.vue`:
- Line 5: In ProviderModelList.vue update the Tailwind arbitrary variant syntax:
replace any occurrences of supports-backdrop-filter:bg-background/80 with the
bracketed form supports-[backdrop-filter]:bg-background/80 (e.g., in the header
element with class "sticky z-30 border-b border-border/60 py-2 backdrop-blur
..." and the other class usage later in the template) so Tailwind recognizes the
`@supports` variant correctly.
In `@src/renderer/src/i18n/da-DK/model.json`:
- Around line 23-45: Translate the new English strings under the "sort" and
"filter" keys into Danish: replace "By Status" and "By Name" (in "sort") with
appropriate Danish equivalents, and localize all "filter" entries including
"label", "clearAll", "visibleCount" (keeping the {visible}/{total}
placeholders), "capabilities", "types", each "capabilityOptions" value
("vision", "functionCall", "reasoning", "search") and each "typeOptions" value
("chat", "embedding", "rerank", "imageGeneration") to Danish so they match the
surrounding translations and preserve placeholders and key names exactly.
In `@src/renderer/src/i18n/fa-IR/model.json`:
- Around line 23-45: The new localization entries under the "sort" and "filter"
objects are still in English; replace each English value with the correct
Persian translations for the keys: sort.status, sort.name, filter.label,
filter.clearAll, filter.visibleCount, filter.capabilities, filter.types, and
every entry in filter.capabilityOptions (vision, functionCall, reasoning,
search) and filter.typeOptions (chat, embedding, rerank, imageGeneration) so
they match the file’s Persian RTL localization style (use Persian script and
preserve placeholders like {visible}/{total} in filter.visibleCount).
In `@src/renderer/src/i18n/fr-FR/model.json`:
- Around line 23-45: The French locale file has untranslated strings under the
"sort" and "filter" objects; update the values for keys like sort.status,
sort.name, filter.label, filter.clearAll, filter.visibleCount,
filter.capabilities, filter.types and the nested capabilityOptions (vision,
functionCall, reasoning, search) and typeOptions (chat, embedding, rerank,
imageGeneration) with proper French translations (e.g., "Par statut", "Par nom",
"Filtrer", "Effacer les filtres", "Affichage {visible} / {total}", "Recherche
Web" -> "Recherche sur le web", etc.) so the UI is fully localized—edit the
strings in src/renderer/src/i18n/fr-FR/model.json accordingly.
In `@src/renderer/src/i18n/he-IL/model.json`:
- Around line 23-45: The he-IL locale file contains untranslated English
strings; update the values for keys under "sort" (sort.status, sort.name) and
under "filter" (filter.label, filter.clearAll, filter.visibleCount — preserve
the {visible} and {total} placeholders exactly — filter.capabilities,
filter.types) as well as each option in filter.capabilityOptions (vision,
functionCall, reasoning, search) and filter.typeOptions (chat, embedding,
rerank, imageGeneration) with appropriate Hebrew translations so the UI is fully
localized.
In `@src/renderer/src/i18n/ja-JP/model.json`:
- Around line 23-45: Replace the English values under the "sort" and "filter"
keys in the ja-JP locale with Japanese translations: update "sort.status" and
"sort.name" to Japanese, and translate "filter.label", "filter.clearAll",
"filter.visibleCount" (preserving the {visible} and {total} placeholders),
"filter.capabilities", "filter.types", and each entry in
"filter.capabilityOptions" ("vision", "functionCall", "reasoning", "search") and
"filter.typeOptions" ("chat", "embedding", "rerank", "imageGeneration") into
Japanese so the JSON keys remain identical but values are localized.
In `@src/renderer/src/i18n/ko-KR/model.json`:
- Around line 23-45: Replace the English strings in the Korean locale for the
keys under "sort" and "filter": change sort.status and sort.name to Korean;
update filter.label, filter.clearAll, filter.visibleCount, filter.capabilities,
filter.types and each entry in filter.capabilityOptions (vision, functionCall,
reasoning, search) and filter.typeOptions (chat, embedding, rerank,
imageGeneration) with correct Korean translations; ensure placeholders like
"{visible}" and "{total}" remain unchanged in filter.visibleCount and keep key
names exactly as-is (e.g., "sort.status", "filter.capabilityOptions.vision",
"filter.typeOptions.imageGeneration") so only the string values are replaced.
In `@src/renderer/src/i18n/pt-BR/model.json`:
- Around line 23-45: The new keys under "sort" and "filter" are still in
English; update their values to Brazilian Portuguese for consistency: translate
"sort.status" and "sort.name", "filter.label", "filter.clearAll",
"filter.visibleCount" (keep placeholder {visible} / {total} but localize
surrounding text), "filter.capabilities", "filter.types" and all entries under
"filter.capabilityOptions" ("vision", "functionCall", "reasoning", "search") and
"filter.typeOptions" ("chat", "embedding", "rerank", "imageGeneration") to
Portuguese equivalents so the model.json uses Portuguese strings throughout
(refer to the keys "sort" and "filter" and their nested keys to locate the
entries).
In `@src/renderer/src/i18n/ru-RU/model.json`:
- Around line 23-45: The Russian locale file currently contains English strings
under the "sort" and "filter" keys; update the values for "sort.status",
"sort.name", "filter.label", "filter.clearAll", "filter.visibleCount",
"filter.capabilities", "filter.types" and all entries under
"filter.capabilityOptions" ("vision", "functionCall", "reasoning", "search") and
"filter.typeOptions" ("chat", "embedding", "rerank", "imageGeneration") to
Russian translations that match the UI context (e.g., "By Status" -> "По
статусу", "Filter" -> "Фильтр", etc.), preserving the JSON keys and the
placeholder "{visible} / {total}" in "visibleCount".
---
Outside diff comments:
In `@src/renderer/settings/components/ProviderModelList.vue`:
- Around line 1-687: The pipeline flagged formatting errors in
ProviderModelList.vue; run the project formatter (oxfmt) over the file and
commit the resulting changes to resolve CI failures. Specifically, open
ProviderModelList.vue (template and <script setup>) and run `oxfmt .` (or your
repo's formatting script) to reformat the template, imports, reactive
declarations (e.g., modelSearchQuery, filterState, virtualItems), and helper
functions (e.g., sortModels, filterAndSortModels, getItemSizeDependencies), then
stage and commit the formatted file so the CI pipeline passes.
---
Nitpick comments:
In `@src/renderer/settings/components/ProviderModelList.vue`:
- Around line 627-634: The removeFilterToken function narrows on token.kind but
uses token.value (typed as string) against filterState.capabilities and
filterState.types which expect ModelCapabilityKey and ModelType; update the
filtering to use explicit type assertions/casts so the compiler knows the types
(e.g., cast token.value to ModelCapabilityKey when token.kind === 'capability'
and to ModelType otherwise) and keep references to FilterToken and filterState
in the same function to ensure correct narrowing.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 24fee705-96bd-4e4b-9895-62e2e65be0ba
📒 Files selected for processing (14)
src/renderer/settings/components/ProviderModelList.vuesrc/renderer/src/i18n/da-DK/model.jsonsrc/renderer/src/i18n/en-US/model.jsonsrc/renderer/src/i18n/fa-IR/model.jsonsrc/renderer/src/i18n/fr-FR/model.jsonsrc/renderer/src/i18n/he-IL/model.jsonsrc/renderer/src/i18n/ja-JP/model.jsonsrc/renderer/src/i18n/ko-KR/model.jsonsrc/renderer/src/i18n/pt-BR/model.jsonsrc/renderer/src/i18n/ru-RU/model.jsonsrc/renderer/src/i18n/zh-CN/model.jsonsrc/renderer/src/i18n/zh-HK/model.jsonsrc/renderer/src/i18n/zh-TW/model.jsontest/renderer/components/ProviderModelList.test.ts
| <div | ||
| ref="searchContainerRef" | ||
| class="sticky z-30 backdrop-blur supports-[backdrop-filter]:bg-background/80 py-2 border-b border-border/60 flex gap-2" | ||
| class="sticky z-30 border-b border-border/60 py-2 backdrop-blur supports-backdrop-filter:bg-background/80" |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
What is the correct Tailwind CSS syntax for @supports arbitrary variants?
💡 Result:
Use Tailwind’s built-in supports-[…] functional variant:
<div class="supports-[display:grid]:grid"></div>Whatever you put inside the brackets is the same condition you’d put inside @supports (…) (property/value checks, or and/or expressions). (github.com)
You can also check just a property:
<div class="supports-[backdrop-filter]:backdrop-blur supports-[backdrop-filter]:bg-black/25"></div>And you can negate it with not-:
<div class="not-supports-[display:grid]:flex"></div>Citations:
- 1: Tailwind CSS v3.2 Beta 2 tailwindlabs/tailwindcss#9574
- 2: Tailwind CSS v3.2 Beta 2 tailwindlabs/tailwindcss#9574
- 3: https://tailwindcss.com/docs/hover-focus-and-other-states?email=geor%40ustrial
🏁 Script executed:
# First, check if the file exists and get its line count
if [ -f "src/renderer/settings/components/ProviderModelList.vue" ]; then
wc -l "src/renderer/settings/components/ProviderModelList.vue"
else
echo "File not found"
fiRepository: ThinkInAIXYZ/deepchat
Length of output: 123
🏁 Script executed:
# Check lines around line 5 and line 152 in the file
if [ -f "src/renderer/settings/components/ProviderModelList.vue" ]; then
echo "=== Lines around 5 ==="
sed -n '1,10p' "src/renderer/settings/components/ProviderModelList.vue" | cat -n
echo ""
echo "=== Lines around 152 ==="
sed -n '148,156p' "src/renderer/settings/components/ProviderModelList.vue" | cat -n
fiRepository: ThinkInAIXYZ/deepchat
Length of output: 914
Use square brackets in Tailwind's @supports arbitrary variant syntax.
The classes supports-backdrop-filter:bg-background/80 on lines 5 and 152 use incorrect syntax. Tailwind's functional variant requires square brackets: supports-[backdrop-filter]:bg-background/80.
Proposed fix
- class="sticky z-30 border-b border-border/60 py-2 backdrop-blur supports-backdrop-filter:bg-background/80"
+ class="sticky z-30 border-b border-border/60 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/80"Line 152:
- class="sticky z-20 backdrop-blur supports-backdrop-filter:bg-background/80 px-3 py-2 text-xs font-medium text-muted-foreground"
+ class="sticky z-20 backdrop-blur supports-[backdrop-filter]:bg-background/80 px-3 py-2 text-xs font-medium text-muted-foreground"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| class="sticky z-30 border-b border-border/60 py-2 backdrop-blur supports-backdrop-filter:bg-background/80" | |
| class="sticky z-30 border-b border-border/60 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/80" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/renderer/settings/components/ProviderModelList.vue` at line 5, In
ProviderModelList.vue update the Tailwind arbitrary variant syntax: replace any
occurrences of supports-backdrop-filter:bg-background/80 with the bracketed form
supports-[backdrop-filter]:bg-background/80 (e.g., in the header element with
class "sticky z-30 border-b border-border/60 py-2 backdrop-blur ..." and the
other class usage later in the template) so Tailwind recognizes the `@supports`
variant correctly.
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/renderer/settings/components/ProviderModelList.vue (1)
5-5:⚠️ Potential issue | 🟡 MinorUse Tailwind’s bracketed
supportsvariant syntax.Line [5] and Line [152] use
supports-backdrop-filter:*, which Tailwind won’t parse as a@supportsvariant.Proposed fix
- class="sticky z-30 border-b border-border/60 py-2 backdrop-blur supports-backdrop-filter:bg-background/80" + class="sticky z-30 border-b border-border/60 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/80"- class="sticky z-20 backdrop-blur supports-backdrop-filter:bg-background/80 px-3 py-2 text-xs font-medium text-muted-foreground" + class="sticky z-20 backdrop-blur supports-[backdrop-filter]:bg-background/80 px-3 py-2 text-xs font-medium text-muted-foreground"What is the correct Tailwind CSS syntax for applying an `@supports`(backdrop-filter) variant class?Also applies to: 152-152
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/renderer/settings/components/ProviderModelList.vue` at line 5, Replace the non-parsed `supports-backdrop-filter:bg-background/80` variant with Tailwind’s bracketed arbitrary variant syntax: use the `[`@supports`(backdrop-filter)]:bg-background/80` form in the class attributes inside ProviderModelList.vue (update both occurrences in the header class string and the second occurrence around line 152) so Tailwind recognizes the `@supports`(backdrop-filter) variant.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/renderer/settings/components/ProviderModelList.vue`:
- Line 5: Replace the non-parsed `supports-backdrop-filter:bg-background/80`
variant with Tailwind’s bracketed arbitrary variant syntax: use the
`[`@supports`(backdrop-filter)]:bg-background/80` form in the class attributes
inside ProviderModelList.vue (update both occurrences in the header class string
and the second occurrence around line 152) so Tailwind recognizes the
`@supports`(backdrop-filter) variant.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f7254b5a-75c8-44f3-8431-e1d6d01e51ea
📒 Files selected for processing (1)
src/renderer/settings/components/ProviderModelList.vue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
… with new UI components and localization
Summary by CodeRabbit
New Features
Localization
Tests