feat: add search functionality for provider settings #740
Conversation
WalkthroughAdds a debounced client-side search/filter UI to ModelProviderSettings.vue and introduces a new i18n key Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant M as ModelProviderSettings.vue
participant S as settingsStore
U->>M: Type in search box
M->>M: Debounce input -> update searchQuery
M->>M: filterProviders(allEnabledProviders/allDisabledProviders)
M-->>U: Render filtered enabled/disabled lists
U->>M: Toggle enable/disable provider
M->>S: Update provider lists (merge with opposite group)
S-->>M: sortedProviders updated
M->>M: nextTick -> scroll enabled provider into view
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (11)
src/renderer/src/i18n/ru-RU/settings.json (1)
228-228: Unify RU terminology with the rest of the file (“поставщик услуг” vs “провайдер”).Elsewhere we use “Поставщик услуг”. For consistency, prefer “поставщиков услуг”.
- "search": "Поиск платформ провайдеров…", + "search": "Поиск платформ поставщиков услуг…",src/renderer/src/i18n/ja-JP/settings.json (1)
228-228: Align JP wording with existing “サービスプロバイダー” terminology.Most strings use “サービスプロバイダー”. Consider simplifying and aligning:
- "search": "プロバイダープラットフォームを検索…", + "search": "サービスプロバイダーを検索…",src/renderer/src/i18n/ko-KR/settings.json (1)
228-228: Use the same KR term used elsewhere (“서비스 제공 업체”) instead of mixing with “프로바이더”.Keeps terminology consistent within this locale.
- "search": "프로바이더 플랫폼 검색…", + "search": "서비스 제공 업체 검색…",src/renderer/src/i18n/zh-TW/settings.json (1)
228-228: TW wording nit: drop “平台” for brevity and consistency.Other keys refer to “服務提供者”; “平台” is redundant.
- "search": "搜尋服務提供者平台…", + "search": "搜尋服務提供者…",src/renderer/src/i18n/zh-CN/settings.json (1)
228-228: CN wording nit: drop “平台” to match existing “服务商” usage.“搜索服务商…” reads cleaner and aligns with “服务商设置”.
- "search": "搜索服务商平台…", + "search": "搜索服务商…",src/renderer/src/components/settings/ModelProviderSettings.vue (5)
8-13: Minor UX: Mark as a search field, trim binding, and support Esc to clearThis improves semantics and UX without changing behavior. Trim avoids needless whitespace filtering.
- <Input - v-model="searchQueryBase" - :placeholder="t('settings.provider.search')" - class="h-8 pr-8" - /> + <Input + v-model.trim="searchQueryBase" + type="search" + :placeholder="t('settings.provider.search')" + class="h-8 pr-8" + @keydown.esc="clearSearch" + />
20-25: Use a button for the clear action for better accessibilityClickable icons are not keyboard-focusable or announced by screen readers. Wrap the icon in a semantic button.
- <Icon - v-else - icon="lucide:x" - class="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground cursor-pointer hover:text-foreground" - @click="clearSearch" - /> + <button + v-else + type="button" + class="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring" + @click="clearSearch" + > + <Icon icon="lucide:x" class="w-4 h-4" /> + </button>Optionally add an i18n-backed aria-label/title for the button if a suitable key (e.g., common.clear) exists.
188-199: Locale-aware, case-insensitive matchingUse locale-aware
toLocaleLowerCase()for better matching in non-English locales. It’s cheap and avoids corner cases with language-specific case folding.- const query = searchQuery.value.toLowerCase().trim() + const query = searchQuery.value.toLocaleLowerCase().trim() return providers.filter( (provider) => - t(provider.name).toLowerCase().includes(query) || - provider.id.toLowerCase().includes(query) || - (provider.apiType && provider.apiType.toLowerCase().includes(query)) + t(provider.name).toLocaleLowerCase().includes(query) || + provider.id.toLocaleLowerCase().includes(query) || + (provider.apiType && provider.apiType.toLocaleLowerCase().includes(query)) )
5-26: Use English for comments per project guidelineInline comments here are in Chinese. The repo guideline for .vue/.ts/.js files is to use English for logs and comments. Please translate these comments.
286-309: Type the drag move event instead ofanyAvoid
anyand use typed events from vuedraggable to catch mistakes early.You can add:
import type { MoveEvent } from 'vuedraggable'Then update signatures:
const onMoveEnabled = (evt: MoveEvent<LLM_PROVIDER>) => { /* ... */ } const onMoveDisabled = (evt: MoveEvent<LLM_PROVIDER>) => { /* ... */ }src/renderer/src/i18n/en-US/settings.json (1)
228-228: Nit: Consider more concise wording“Search providers…” reads more naturally in English than “Search provider platforms…”.
- "search": "Search provider platforms…", + "search": "Search providers…",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (10)
src/renderer/src/components/settings/ModelProviderSettings.vue(4 hunks)src/renderer/src/i18n/en-US/settings.json(1 hunks)src/renderer/src/i18n/fa-IR/settings.json(1 hunks)src/renderer/src/i18n/fr-FR/settings.json(1 hunks)src/renderer/src/i18n/ja-JP/settings.json(1 hunks)src/renderer/src/i18n/ko-KR/settings.json(1 hunks)src/renderer/src/i18n/ru-RU/settings.json(1 hunks)src/renderer/src/i18n/zh-CN/settings.json(1 hunks)src/renderer/src/i18n/zh-HK/settings.json(1 hunks)src/renderer/src/i18n/zh-TW/settings.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/renderer/src/**/*
📄 CodeRabbit Inference Engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/i18n/ko-KR/settings.jsonsrc/renderer/src/i18n/zh-HK/settings.jsonsrc/renderer/src/i18n/fr-FR/settings.jsonsrc/renderer/src/i18n/en-US/settings.jsonsrc/renderer/src/i18n/zh-TW/settings.jsonsrc/renderer/src/i18n/ja-JP/settings.jsonsrc/renderer/src/i18n/ru-RU/settings.jsonsrc/renderer/src/i18n/fa-IR/settings.jsonsrc/renderer/src/i18n/zh-CN/settings.jsonsrc/renderer/src/components/settings/ModelProviderSettings.vue
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use English for logs and comments
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
src/renderer/src/**/*.vue
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.vue: Use Composition API for all Vue 3 components
Use Tailwind CSS with scoped styles for styling
Organize components by feature in src/renderer/src/
Follow existing component patterns in src/renderer/src/ when creating new UI components
Use Composition API with proper TypeScript typing for new UI components
Implement responsive design with Tailwind CSS for new UI components
Add proper error handling and loading states for new UI componentsUse scoped styles to prevent CSS conflicts between components
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/renderer/src/**/*.{ts,tsx,vue}: Use Pinia for frontend state management
Renderer to Main: Use usePresenter.ts composable for direct presenter method calls
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit Inference Engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
🧠 Learnings (5)
📚 Learning: 2025-07-21T01:46:30.354Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/i18n.mdc:0-0
Timestamp: 2025-07-21T01:46:30.354Z
Learning: Applies to src/renderer/src/i18n/common.json : Shared translation keys must be placed in 'src/renderer/src/i18n/common.json'
Applied to files:
src/renderer/src/i18n/fr-FR/settings.jsonsrc/renderer/src/i18n/ru-RU/settings.jsonsrc/renderer/src/i18n/zh-CN/settings.json
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Leverage ref, reactive, and computed for reactive state management.
Applied to files:
src/renderer/src/components/settings/ModelProviderSettings.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Import Icon component from Iconify/Vue.
Applied to files:
src/renderer/src/components/settings/ModelProviderSettings.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/{composables,utils}/**/*.ts : Use VueUse for common composables and utility functions.
Applied to files:
src/renderer/src/components/settings/ModelProviderSettings.vue
📚 Learning: 2025-07-21T01:46:30.354Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/i18n.mdc:0-0
Timestamp: 2025-07-21T01:46:30.354Z
Learning: Applies to src/renderer/src/**/* : Use the 'vue-i18n' framework for all internationalization in the renderer
Applied to files:
src/renderer/src/components/settings/ModelProviderSettings.vue
🔇 Additional comments (5)
src/renderer/src/i18n/zh-CN/settings.json (1)
228-229: i18n: provider.search is present & used — no action requiredVerified: the renderer uses the translation key and every locale's settings.json contains the provider.search entry (no hardcoded placeholder found).
- Usage in renderer:
- src/renderer/src/components/settings/ModelProviderSettings.vue — :placeholder="t('settings.provider.search')" (found at line 10)
- Locales containing provider.search (search key at line ~228 in each file):
- src/renderer/src/i18n/en-US/settings.json (line 228)
- src/renderer/src/i18n/fa-IR/settings.json (line 228)
- src/renderer/src/i18n/fr-FR/settings.json (line 228)
- src/renderer/src/i18n/ja-JP/settings.json (line 228)
- src/renderer/src/i18n/ko-KR/settings.json (line 228)
- src/renderer/src/i18n/ru-RU/settings.json (line 228)
- src/renderer/src/i18n/zh-CN/settings.json (line 228)
- src/renderer/src/i18n/zh-HK/settings.json (line 228)
- src/renderer/src/i18n/zh-TW/settings.json (line 228)
No changes required.
src/renderer/src/i18n/zh-HK/settings.json (1)
228-228: LGTM: i18n key added and correctly scoped
provider.searchis added undersettings.providerand is used in the UI placeholder. Looks consistent with existing terminology (“服務商”).src/renderer/src/i18n/en-US/settings.json (1)
228-228: provider.search present in all settings locales — no missing keysChecked settings.json files under src/renderer/src/i18n; the key
provider.searchexists in:
- src/renderer/src/i18n/en-US/settings.json
- src/renderer/src/i18n/fa-IR/settings.json
- src/renderer/src/i18n/fr-FR/settings.json
- src/renderer/src/i18n/ja-JP/settings.json
- src/renderer/src/i18n/ko-KR/settings.json
- src/renderer/src/i18n/ru-RU/settings.json
- src/renderer/src/i18n/zh-CN/settings.json
- src/renderer/src/i18n/zh-HK/settings.json
- src/renderer/src/i18n/zh-TW/settings.json
Optional: if this label is reused across multiple settings panels, consider moving it to src/renderer/src/i18n/common.json per the shared-keys rule.
src/renderer/src/i18n/fa-IR/settings.json (1)
228-228: LGTM: Farsi translation added for the new keyThe new
provider.searchentry is present and follows the established structure.src/renderer/src/i18n/fr-FR/settings.json (1)
228-228: Confirm phrasing with a native speaker“Rechercher des plateformes de fournisseurs…” is understandable but may be less idiomatic than “Rechercher des fournisseurs…”. Please verify the preferred phrasing.
add search functionality for provider settings
Summary by CodeRabbit