-
Notifications
You must be signed in to change notification settings - Fork 614
feat: setting provider ux update #832
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
WalkthroughAdjusts UI layout in ModelProviderSettings.vue: reduces outer padding, makes the search bar sticky at the top, relocates the add-provider control to a sticky bottom bar with a full-width button, and preserves the existing click handler behavior. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
✨ 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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/renderer/src/components/settings/ModelProviderSettings.vue (2)
6-6: Make the sticky search header visually distinct and reliably on topAdd a bottom border and bump z-index to avoid overlap issues with draggable items; keeps the header readable while scrolling.
- <div class="p-2 sticky top-0 z-10 bg-container"> + <div class="p-2 sticky top-0 z-20 bg-container border-b border-border">
115-122: Minor a11y/UX tweaks for the sticky add button
- Set type="button" to prevent unintended form submits.
- Add a top border and higher z-index to separate it from the list and stay above drag previews.
- Remove duplicated bg on the button; the container already provides background.
- <div class="sticky bottom-0 z-10 p-2 bg-container" :dir="languageStore.dir"> + <div class="sticky bottom-0 z-20 p-2 bg-container border-t border-border" :dir="languageStore.dir"> <button - class="w-full flex flex-row items-center gap-2 rounded-lg p-2 bg-container cursor-pointer hover:bg-accent" + type="button" + class="w-full flex flex-row items-center gap-2 rounded-lg p-2 cursor-pointer hover:bg-accent" @click="openAddProviderDialog" > <Icon icon="lucide:plus" class="w-4 h-4 text-muted-foreground" /> <span class="text-sm font-medium">{{ t('settings.provider.addCustomProvider') }}</span> </button>
📜 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 (1)
src/renderer/src/components/settings/ModelProviderSettings.vue(2 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
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/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/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between components
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.Use Pinia for frontend state management
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/**/*.vue: Use Vue 3 Composition API for all Vue components
Use Tailwind CSS with scoped styles for component styling
When creating new UI components, use Composition API with proper TypeScript typing, ensure responsive design (Tailwind), and include error/loading states
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Write logs and comments in English
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
src/renderer/src/**
📄 CodeRabbit inference engine (CLAUDE.md)
Place full application UI functionality (tab content) under src/renderer/src/ organized by feature
Files:
src/renderer/src/components/settings/ModelProviderSettings.vue
⏰ 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)
- GitHub Check: build-check (x64)
🔇 Additional comments (1)
src/renderer/src/components/settings/ModelProviderSettings.vue (1)
4-4: LGTM: container spacing simplificationRemoving the outer vertical padding makes sense now that the search/add bars are sticky with their own padding.
* fix: chat confg need sync to new value when change model in chat (#823) * fix: gemini nano banana not read image from chatinput * fix: remove file-type ,this will mark html as audio (#824) * fix: Solve the problem of the window becoming larger when dragging floating button under Windows (#826) * fix: improve OpenAI compatible provider compatibility with third-party services * chore: update vue-renderer-markdown to v0.0.35 (#827) * refactor: remove custom-prompts-server and decouple prompts from MCP lifecycle (#829) - Remove custom-prompts-server service entirely including configuration - Implement data source merging in MCP store to load prompts from both config and MCP - Add upgrade migration logic for versions < 0.3.5 to clean up old configurations - Ensure @ operations work independently of MCP state through config data source - Update CLAUDE.md with prompt management guidelines The @ prompt functionality now works completely independently of MCP, loading custom prompts directly from config storage while maintaining full compatibility with existing MCP prompt sources. * chore: add better log for mcp tool name * feat: ux update (#831) * feat: ux update * chore: format * feat: setting provider ux update (#832) * feat: add current datetime to system prompt - Add current date and time information to user's system prompt when not empty - Include complete datetime with timezone, year, month, day, hour, minute, second - Apply to both preparePromptContent and buildContinueToolCallContext methods - Update token calculation to use processed system prompt for accuracy - Skip datetime addition for image generation models and empty prompts * refactor: extract system prompt datetime enhancement to common method - Add enhanceSystemPromptWithDateTime private method to reduce code duplication - Update both preparePromptContent and buildContinueToolCallContext to use common method - Improve code maintainability and ensure consistency across all system prompt processing - Add comprehensive JSDoc documentation for the new method * fix(markdown): auto-wrap hide scroll (#833) * feat: add enable_thinking parameter support for siliconcloud (#835) * chore: bump deps (#834) * chore: bump up deps * fix: change win arm to wasm32 sharp * chore: revert sharp config * feat: drop windows arm support * fix(coderabbitai): remove action for windows arm64 * refactor: adjust scroll-to-bottom button glow effect (#837) * feat: add mutual exclusive confirmation dialogs for DeepSeek-V3.1 (#838) * feat: add sanitizeText utility for clipboard data handling (#843) * feat: support canary upgrade (#840) * feat: support canary upgrade * feat: add update channel selection for stable/canary versions - Add update channel configuration to config presenter - Implement dynamic URL switching for version checks and downloads - Add UI selector in AboutUsSettings for channel selection - Support stable and canary update channels with different endpoints - Add internationalization support for channel selection * chore: change contributors charts to openomy * refactor: improve update channel handling and network resilience - Sanitize update channel input to prevent invalid values - Add 10-second timeout to version check requests to prevent hanging - Treat unknown channels as 'upgrade' (stable) for robustness - Improve error handling for network timeouts and invalid channels * feat: implement thinking parameter support for doubao models (#842) * feat: implement dedicated DashScope provider with enable_thinking support (#844) * feat: implement dedicated DashScope provider with enable_thinking support * refactor: remove unnecessary API key status check methods from DashscopeProvider * fix: prioritize provider.id over apiType in createProviderInstance (#846) * feat: add qwen3 thinking budget support (#848) * feat: add qwen3 thinking budget support * fix: add missing gemini.onlySupported key in zh-CN locale * refactor: merge duplicate silicon case statements in provider creation * feat: add qwen3 thinking budget support in ChatConfig (#849) * refactor(types): 🚀split monolithic presenter.d.ts into strict per-domain *.presenter.d.ts + typed core layer (#847) * docs: Add strong-typed message architecture and implementation guidelines - Update message-architecture.md with strong-typed design, remove compatibility compromises - Add event-to-UI mapping table and rendering checklist for contract compliance - Create presenter-split-plan.md for type system refactoring - Add implementation-tasks.md with phased rollout plan - Create .cursor/rules/provider-guidelines.mdc for provider implementation guidance This establishes a foundation for strong-typed, maintainable message architecture without legacy compatibility debt. * types(core): add strong-typed core types and barrel exports\n\n- Add usage.ts (UsageStats, RateLimitInfo)\n- Add llm-events.ts (discriminated union + factories + guards)\n- Add agent-events.ts (LLMAgentEvent*, shared types)\n- Add chat.ts (Message/AssistantMessageBlock/UserMessageContent)\n- Add mcp.ts (MCP content/response/definition)\n- Add types/index.d.ts barrel exports\n\nNo compatibility shims included by design. * refactor(types): move legacy presenters and add @shared/presenter stub; keep legacy exports in types/index to maintain build\n\n- Move legacy presenters to src/shared/types/presenters/legacy.presenters.d.ts\n- Add src/shared/presenter.d.ts re-export stub\n- Temporarily export only legacy presenters from types/index.d.ts to avoid type mismatches\n- Update implementation-tasks.md (Stage 2 done)\n\nNext: progressive import updates to new cores, then flip barrel to new types and delete legacy. * refactor(types): alias legacy core message types to strong-typed core (B-plan)\n\n- legacy.presenters.d.ts now re-exports ChatMessage/ChatMessageContent/LLMAgentEvent/LLMAgentEventData/LLMCoreStreamEvent from core\n- Prepares for flipping interfaces without changing import sites * docs(tasks): mark Phase 3 as completed\n\n- Successfully implemented B-plan approach with type aliasing\n- Unified core message types (ChatMessage, LLMAgentEvent, LLMCoreStreamEvent)\n- Created core model types and maintained build compatibility\n- All type checks passing with no breaking changes * fix(types): revert to legacy-only exports and fix MESSAGE_ROLE\n\n- Revert types/index.d.ts to only export legacy presenters\n- Remove 'function' from MESSAGE_ROLE to match core definition\n- Maintain build stability while preserving type unification work * feat(provider): implement factory functions for LLMCoreStreamEvent\n\n- Replace all manual event creation with createStreamEvent factory functions\n- Ensures type safety and consistent event structure\n- Updated OpenAICompatibleProvider with strong-typed events:\n - text, reasoning, toolCallStart, toolCallChunk, toolCallEnd\n - error, usage, stop, imageData events\n- All type checks passing\n- Phase 4.1 completed: Provider now outputs LLMCoreStreamEvent with factory construction * feat(provider): update OllamaProvider with factory functions\n\n- Replace all manual event creation with createStreamEvent factory functions\n- Ensures consistent tool_call_start → tool_call_chunk → tool_call_end sequence\n- Updated all event types: text, reasoning, toolCall*, usage, stop, error\n- Maintains proper tool call ID aggregation and sequencing\n- Phase 4.2 completed: Tool call sequences now strictly follow start/chunk/end pattern * docs(tasks): update Phase 4 progress\n\n- Completed Provider strong-typed event output with factory functions\n- Completed tool_call_* strict start/chunk/end sequences\n- Completed usage event sent before stop in all providers\n- Updated implementation tasks document with current progress * feat(phase4): complete Provider strong-typed event integration\n\n- Added factory functions import to AwsBedrockProvider\n- Updated error handling to use createStreamEvent.error() + createStreamEvent.stop('error')\n- Created comprehensive unit tests for LLMCoreStreamEvent factory functions\n- Tests validate: event creation, tool call sequences, error+stop patterns, type guards\n- All 12 core event tests passing ✅\n\n## Phase 4 Completed:\n- ✅ Provider strong-typed event output (factory construction)\n- ✅ tool_call_* strict start/chunk/end sequences with ID aggregation\n- ✅ Usage events sent before stop in all providers\n- ✅ Rate limit events (handled at Presenter layer)\n- ✅ Unified error + stop event patterns\n- ✅ Comprehensive unit tests for sequences/fields/boundaries * feat(phase5): complete Agent & UI alignment ## Phase 5 Completed: Agent & UI Alignment ✅ ### 1. Agent Layer Enhancement - ✅ Agent consumes only CoreEvent and outputs LLMAgentEvent - ✅ Strict separation of response/error/end event types - ✅ Added rate_limit event handling in Agent layer - ✅ Maintained proper event transformation pipeline ### 2. UI Layer Unification - ✅ Removed standalone tool_call_permission type - ✅ Unified to action + action_type pattern - ✅ Updated all UI components and thread presenter logic - ✅ Preserved backward compatibility with conditional rendering ### 3. Renderer Mapping & Testing - ✅ Created comprehensive renderer contract tests (17 tests) - ✅ Added message block data structure snapshot tests (14 tests) - ✅ Validated event-to-UI block mapping compliance - ✅ Ensured consistent status transitions and type safety ### Key Technical Achievements: - **Type Safety**: All event transformations now type-safe - **Consistency**: Unified action_type handling across codebase - **Testing**: 31 new tests covering contracts and snapshots - **Architecture**: Clean separation between Agent/UI concerns - **Quality**: All lint, format, and type checks passing ✅ ### Files Modified: - Agent layer: llmProviderPresenter/index.ts - UI components: MessageItemAssistant.vue - Thread logic: threadPresenter/index.ts - Type definitions: shared/chat.d.ts - Tests: rendererContract.test.ts, messageBlockSnapshot.test.ts Ready for Phase 6: Quality & Tools 🚀 * feat(phase6): complete Quality & Tools phase ## Phase 6 Completed: Quality & Tools ✅ ### 1. Table-Driven Contract Tests - ✅ Created comprehensive event mapping contract tests (25 test cases) - ✅ Validated all event types from architecture mapping table - ✅ Verified status transitions and type constraints - ✅ Added tool call ID aggregation and lifecycle validation - ✅ Implemented error recovery pattern testing ### 2. Performance Evaluation & Stress Testing - ✅ Large text content processing (50KB < 10ms) - ✅ Large reasoning content handling (100KB < 15ms) - ✅ Large image data processing (1MB < 20ms) - ✅ Batch image processing (100 images < 50ms) - ✅ High-frequency event processing (1000 events < 100ms) - ✅ Mixed event type handling (500 events < 80ms) - ✅ Memory leak prevention (5000 events < 500ms) - ✅ Extreme parameter handling (10KB params < 5ms) - ✅ Concurrent processing simulation (10 workers < 100ms) ### Key Technical Achievements: - **Comprehensive Testing**: 67 tests passing across all scenarios - **Performance Validation**: All benchmarks meet performance targets - **Type Safety**: Full TypeScript compliance (0 errors) - **Code Quality**: Lint and format checks passing ✅ - **Architecture Compliance**: All mapping table rules verified - **Stress Testing**: System handles extreme loads efficiently ### Test Coverage Summary: - Event mapping contract tests: 25 tests ✅ - Renderer contract tests: 17 tests ✅ - Performance evaluation tests: 9 tests ✅ - Core event factory tests: 12 tests ✅ - Message block snapshot tests: 14 tests ✅ - Shell integration tests: 8 tests ✅ ### Files Added: - test/renderer/message/eventMappingTable.test.ts (comprehensive mapping validation) - test/renderer/message/performanceEvaluation.test.ts (stress & performance testing) Ready for production deployment with full quality assurance! 🚀 * fix(providers): complete strong-typed event integration across all providers * fix(vitest): modify test case * fix: default settings * chore: update doc * fix(ci): remove duplicate check in pr ci * feat: add pnpm cache for pr check * fix(ci): pr check with pnpm cache * fix(ci): change cache key to package.json * ci: remove pnpm cache * feat: add glow breathing effect to scroll-to-bottom button (#850) * feat: add glow breathing effect to scroll-to-bottom button * fix: ensure exclusive display between MessageList and ArtifactDialog * fix: refine MessageList–ArtifactDialog interaction logic; correct z-order between dialog and ArtifactDialog * chore: prettier .vue * feat: add web search support with configurable options for dashscope (#851) * feat: add web search support with configurable options for dashscope * fix: correct qwen model parameters to match official documentation * feat: add web search support with configurable options for dashscope (#852) * feat: add web search support with configurable options for dashscope * fix: correct qwen model parameters to match official documentation * feat: add search configuration support to ChatConfig components * fix: fix enableSearch state sync and parameter passing issues * fix: preserve search settings during data import * feat: add dashscope commercial models to enable_thinking support (#853) * feat: add search capability icon for model list (#854) * feat: add search capability icon for model list * fix: clear search settings when creating new conversation * feat(markdown): Thinking panel now supports LaTeX compilation for mathematical formulas & markdown performance optimization (#857) * feat(markdown): 思考栏支持数学公式latex编译显示 & markdown 性能优化 close: #845 * chore: lint * chore(ai): update claude code rules and agents * fix(ui): revert Dialog z-index to z-50 to fix dropdown visibility Reverts DialogContent z-index from z-[100] back to z-50 to resolve issue where Select and EmojiPicker dropdowns were not appearing. This maintains proper layering hierarchy without breaking other UI components. * feat: upgrade vue-renderer-markdown & vue-use-monaco (#862) 1. ignore math-block warning 2. Compatible with the syntax issues of mermaid produced by AI, greatly reducing the probability of mermaid rendering errors * feat(dashscope): add qwen3-max-preview model (#865) * fix: mcp params support more types (#861) * feat(mcp): enhance tool parameter display with enum type support - Add enum parameter type detection and enhanced display - Show enum parameters with distinct blue badge styling (enum(string), array[enum(string)]) - Display allowed values for both direct enum and array item enum parameters - Add i18n support for "allowedValues" and "arrayItemValues" labels - Maintain consistent UI design with existing parameter display patterns - Improve developer experience when debugging MCP tools with constrained parameters * fix: enum params support * fix(context-menu): handle local file paths in image save functionality - Fix URL parsing error when saving images from local file paths - Add proper handling for http/https URLs, file:// URLs, and direct file paths - Use fs.promises for reading local files instead of net.fetch for invalid URLs - Prevent "Failed to parse URL from" error when saving local images * fix(context-menu): improve URL handling robustness in image save - Add try-catch around net.fetch to handle invalid URLs gracefully - Implement fallback methods for file:// URLs and local file paths - Add debug logging to track source URL values for troubleshooting - Prevent "Failed to parse URL from" errors with comprehensive URL validation * fix(context-menu): handle empty srcURL in image save functionality - Add comprehensive URL detection when srcURL is empty - Implement fallback URL sources (linkURL, pageURL) for better compatibility - Add debug logging to track all available context menu parameters - Prevent "Failed to parse URL from" errors caused by empty URLs - Provide clear error message when no valid URL can be found * chore: format code * fix: ai review * fix: prevent @ symbol remaining when deleting mentions (#867) * Merge commit from fork * feat: implement separated system and custom prompt management (#868) * feat: implement separated system and custom prompt management * style: code fmt * fix: add migration for legacy default_system_prompt to system_prompts * feat: add Moonshot model configurations (#869) * refactor: translate all cn comments and log to en (#871) * refactor: translate all cn comments and log to en * fix: revert translate in params * feat: add reasoning support for Grok thinking models (#873) * feat: add reasoning support for Grok thinking models * fix: code lint * fix: escaping character issue --------- Co-authored-by: zerob13 <zerob13@gmail.com> --------- Co-authored-by: hllshiro <40970081+hllshiro@users.noreply.github.com> Co-authored-by: yyhhyyyyyy <yyhhyyyyyy8@gmail.com> Co-authored-by: xiaomo <wegi866@gmail.com> Co-authored-by: Simon He <57086651+Simon-He95@users.noreply.github.com> Co-authored-by: luy <12696648@qq.com>
Pull Request Description
UI/UX changes for Desktop Application
Fixed search box and custom model, only the list of service providers in the scrolling area
before:
before.mp4
after:
after.mp4
Summary by CodeRabbit
New Features
Style