fix: improve AWS Bedrock provider settings UI #759
Conversation
chore(text): add verification tip for BedrockProviderSettingsDetail
…add-aws-bedrock-provider
WalkthroughAdds password visibility toggles and a help tooltip to Bedrock provider credential inputs, updates placeholders for access key, secret key, and region, and fixes credential verification result handling. Introduces new i18n keys for these placeholders across multiple locales. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as BedrockProviderSettingsDetail.vue
participant AWS as AWS Bedrock (validate)
rect rgb(236,245,255)
note over User,UI: Toggle credential visibility
User->>UI: Click eye icon (Access Key/Secret Key)
UI->>UI: Toggle showAccessKeyId / showSecretAccessKey
UI->>UI: Switch input type (password ↔ text)
end
rect rgb(240,255,240)
note over User,UI: Verify credentials
User->>UI: Click Verify
UI->>AWS: validate(credentials, region)
alt success
AWS-->>UI: OK
UI->>UI: set checkResult = true
else failure
AWS-->>UI: Error
UI->>UI: set checkResult = false
end
User-->>UI: Hover help icon
UI-->>User: Show t('settings.provider.bedrockVerifyTip')
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
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. ✨ 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: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts (3)
551-560: Bug: Wrong payload messages shape sent to Bedrock (unformatted ChatMessage[]).You compute formatted messages with formatMessages(), but the payload sends the original messages (ChatMessage[]) instead of Anthropic.MessageParam[] + optional system. Bedrock will reject or misinterpret this.
Apply this diff:
- const formattedMessages = this.formatMessages(messages) + const formattedMessages = this.formatMessages(messages) ... - const payload = { + const payload = { anthropic_version: 'bedrock-2023-05-31', max_tokens: maxTokens, temperature, - system: formattedMessages.system, - messages + system: formattedMessages.system, + messages: formattedMessages.messages }
666-671: Bug: thinking/tools are added after the command body is already stringified.You create InvokeModelWithResponseStreamCommand before mutating payload with thinking/tools. Those fields never reach the API.
Move command creation after payload mutation:
- const command = new InvokeModelWithResponseStreamCommand({ - contentType: 'application/json', - body: JSON.stringify(payload), - modelId - }) - // 启用Claude 3.7模型的思考功能 if (modelId.includes('claude-3-7')) { payload.thinking = { budget_tokens: 1024, type: 'enabled' } } ... // 添加工具参数 if (anthropicTools && anthropicTools.length > 0) { // @ts-ignore - 类型不匹配，但格式是正确的 payload.tools = anthropicTools } + const command = new InvokeModelWithResponseStreamCommand({ + contentType: 'application/json', + body: JSON.stringify(payload), + modelId + })Also applies to: 673-688
96-159: Validate and Refactor Hard-Coded Fallback Models in awsBedrockProvider.tsThe current implementation includes a hard-coded
defaultModeland a static fallback list of Anthropics that may not exist in every AWS Bedrock region or tenant. Exposing invalid model IDs can confuse users when the API fetch fails. To address this:• Remove or convert the hard-coded default (
private defaultModel = 'anthropic.claude-3-5-sonnet-20240620-v1:0'on line 26) into a configurable value or example-only entry
• Replace the static array returned on API failure (lines 98–159) with a dynamic check:
– CallListFoundationModelsfor the configured region
– Filter the returnedmodelIds to those that are both supported and ACTIVE
– Only surface valid models; hide or mark any unknown IDs as “examples” in the UI
• If you prefer retaining these specific IDs purely as illustrative defaults, wrap them behind a clear “Examples only” flag in the UI or code, so users understand they may not always be availableBy validating against the actual Bedrock model list at runtime—or clearly demarcating example models—you’ll ensure end users never see unsupported defaults.
src/renderer/src/components/settings/ModelProviderSettings.vue (1)
141-145: Backward-compatibility: also support legacy apiType 'bedrock'.Existing user configs might still store apiType: 'bedrock'. To avoid UI regression where Bedrock settings don’t render, include both until a data migration runs.
Apply this diff:
- <BedrockProviderSettingsDetail - v-else-if="activeProvider.apiType === 'aws-bedrock'" + <BedrockProviderSettingsDetail + v-else-if="activeProvider.apiType === 'aws-bedrock' || activeProvider.apiType === 'bedrock'" :key="`bedrock-${activeProvider.id}`" :provider="activeProvider as AWS_BEDROCK_PROVIDER" class="flex-1" />src/renderer/src/components/settings/BedrockProviderSettingsDetail.vue (2)
62-70: Internationalize the “AWS Region” label.Replace hardcoded text with an i18n key for consistency with renderer rules.
- <Label :for="`${provider.id}-region`" class="flex-1 cursor-pointer">AWS Region</Label> + <Label :for="`${provider.id}-region`" class="flex-1 cursor-pointer"> + {{ t('settings.provider.regionLabel') }} + </Label>Follow-up: please add
settings.provider.regionLabelto all locales.
1-130: Replace remaining hardcoded labels with i18n keysThe RG search confirms these are the only hardcoded, user-visible strings in this component. Please replace each with the
t(…)helper and corresponding key in your locale files:
- src/renderer/src/components/settings/BedrockProviderSettingsDetail.vue
• Line 7: “AWS Access Key Id” →{{ t('settings.provider.accessKeyIdLabel') }}
• Line 35: “AWS Secret Access Key” →{{ t('settings.provider.secretAccessKeyLabel') }}
• Line 62: “AWS Region” →{{ t('settings.provider.regionLabel') }}After making these changes, ensure you add the new keys (
accessKeyIdLabel,secretAccessKeyLabel,regionLabel) undersettings.providerin your i18n resource files.
🧹 Nitpick comments (12)
src/renderer/src/i18n/en-US/settings.json (1)
234-236: Capitalize “Region” for consistency with AWS terminologyMinor copy tweak to match standard capitalization (AWS Region).
Apply this diff:
- "regionPlaceholder": "Please enter AWS region", + "regionPlaceholder": "Please enter AWS Region",src/renderer/src/i18n/fr-FR/settings.json (1)
234-236: Fr localisation: prefer native phrasing over literal EnglishThe current strings are understandable but unidiomatic in French. Suggest native phrasing for better UX.
Apply this diff:
- "accessKeyIdPlaceholder": "Veuillez entrer l'AWS Access Key ID", - "secretAccessKeyPlaceholder": "Veuillez entrer l'AWS Secret Access Key", - "regionPlaceholder": "Veuillez entrer la région AWS", + "accessKeyIdPlaceholder": "Veuillez saisir l’ID de clé d’accès AWS", + "secretAccessKeyPlaceholder": "Veuillez saisir la clé d’accès secrète AWS", + "regionPlaceholder": "Veuillez saisir la région AWS",src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts (3)
577-585: Usage accounting: response.usage is unlikely to exist; parse usage from body.InvokeModelCommandOutput doesn't include a typed usage field. For Anthropic-over-Bedrock, usage usually appears in the JSON body (and for streams in message_start). Ensure usage is captured from responseBody. This improves analytics consistency.
Apply this diff:
- // 添加usage信息 - if (response.usage) { - resultResp.totalUsage = { - prompt_tokens: response.usage.input_tokens, - completion_tokens: response.usage.output_tokens, - total_tokens: response.usage.input_tokens + response.usage.output_tokens - } - } + // 添加usage信息（非流式：从响应体中读取） ... - const responseBody = JSON.parse(decodedResponseBody) + const responseBody = JSON.parse(decodedResponseBody) + if (responseBody?.usage) { + resultResp.totalUsage = { + prompt_tokens: responseBody.usage.input_tokens ?? 0, + completion_tokens: responseBody.usage.output_tokens ?? 0, + total_tokens: + (responseBody.usage.input_tokens ?? 0) + (responseBody.usage.output_tokens ?? 0) + } + }Also applies to: 591-596
46-48: Logging and PII: switch to English messages and avoid logging sensitive payloads.
- Coding guideline requires English logs/comments; several logs are Chinese.
- coreStream logs full formatted messages (potential PII). Avoid or guard behind a debug flag and redact contents.
Apply this diff:
- throw new Error('Access Key Id, Secret Access Key and Region are all needed.') + throw new Error('Access Key Id, Secret Access Key, and Region are all required.') @@ - console.error('获取AWS Bedrock Anthropic模型列表出错:', error) + console.error('[ERROR] Failed to fetch AWS Bedrock Anthropic model list:', error) @@ - console.log('从API获取模型列表失败，使用默认模型配置') + console.warn('[WARN] Failed to fetch Bedrock models from API, falling back to default list') @@ - return { isOk: false, errorMsg: `API 检查失败: ${errorMessage}` } + return { isOk: false, errorMsg: `API check failed: ${errorMessage}` } @@ - console.error('AWS Bedrock Claude completions error:', error) + console.error('[ERROR] AWS Bedrock Claude completions error:', error) @@ - console.error('AWS Bedrock Claude coreStream error:', error) + console.error('[ERROR] AWS Bedrock Claude coreStream error:', error) @@ - console.log('modelConfig', modelConfig, modelId) + // console.debug('[DEBUG] modelConfig', { modelId }) @@ - console.log('formattedMessagesObject', JSON.stringify(formattedMessagesObject)) + // Avoid logging full messages to prevent leaking user data. Enable only under guarded debug: + // console.debug('[DEBUG] formattedMessagesObject', JSON.stringify({ ...formattedMessagesObject, messages: '<redacted>' })) @@ - error_message: error instanceof Error ? error.message : '未知错误' + error_message: error instanceof Error ? error.message : 'Unknown error'Also applies to: 93-98, 195-198, 620-622, 907-913, 637-642
76-77: Regex nit: unnecessary global flag and strictness.
- /g is unnecessary for test() on a literal created per call.
- If future Bedrock Anthropic ids ever omit “:digits” (unlikely), the current pattern will exclude them. Not critical now, but you can simplify.
Apply this diff for clarity:
- ?.filter((m) => m.modelId && /^anthropic.claude-[a-z0-9\-]+(:\d+)$/g.test(m.modelId)) + ?.filter((m) => m.modelId && /^anthropic\.claude-[a-z0-9-]+:\d+$/.test(m.modelId))src/renderer/src/i18n/ja-JP/settings.json (1)
321-443: Translation quality (optional): several “Anthropic” strings read oddly in Japanese.Examples: “人類接続/Anthropic” and “oauthログイン”. Consider standard terms: “Anthropic に接続”, “OAuth ログイン”, etc. Not blocking.
If helpful, I can propose a polished JA patch in a follow-up.
src/renderer/src/components/settings/ModelProviderSettings.vue (1)
5-28: Comments language consistency (optional).Inline comments are in Chinese. Project guideline prefers English for logs/comments. Not blocking, but consider switching for consistency.
I can submit an English-comment sweep if desired.
Also applies to: 72-114, 115-123
src/renderer/src/components/settings/BedrockProviderSettingsDetail.vue (5)
73-85: Nit: Tailwind class “text-normal” is non-standard.Tailwind doesn’t provide
text-normal; likely you meantfont-normal(weight) ortext-base(size). Consider correcting to avoid dead class names.- class="text-xs text-normal rounded-lg" + class="text-xs font-normal rounded-lg"
85-95: Tooltip a11y: add accessible name and consider placement.
- Add
aria-labelor screen-reader text for the help icon trigger so it’s discoverable by assistive tech.- Optionally set
side="right"andalign="start"(or your default) to avoid overlapping the button on narrow layouts.- <TooltipTrigger> + <TooltipTrigger :aria-label="t('settings.provider.bedrockVerifyTip')"> <Icon icon="lucide:help-circle" class="w-4 h-4 text-muted-foreground" /> </TooltipTrigger> - <TooltipContent> + <TooltipContent side="right" align="start">
245-263: Logs should be English; also consolidate result handling.
- The console messages are in Chinese (“验证成功/失败”). Project rules require English logs/comments.
- Minor: you can set
checkResult.value = resp.isOkonce and branch off it.const validateCredential = async () => { try { const resp = await settingsStore.checkProvider(props.provider.id) - if (resp.isOk) { - console.log('验证成功') - checkResult.value = true + if (resp.isOk) { + console.log('Credential validation succeeded') + checkResult.value = true showCheckModelDialog.value = true // 验证成功后刷新当前provider的模型列表 await settingsStore.refreshProviderModels(props.provider.id) } else { - console.log('验证失败', resp.errorMsg) - checkResult.value = false + console.log('Credential validation failed', resp.errorMsg) + checkResult.value = false showCheckModelDialog.value = true } } catch (error) { - console.error('Failed to validate credential:', error) - checkResult.value = false + console.error('Credential validation threw:', error) + checkResult.value = false showCheckModelDialog.value = true } }
288-296: Typo: “comfirm” → “confirm”.Rename the parameter to avoid confusion and align with other usage.
- comfirm: boolean = false + confirm: boolean = false ... - if (!enabled && comfirm) { + if (!enabled && confirm) {
10-19: Optional: harden secret inputs against autofill/corrections.Consider disabling browser autocorrect/capitalization/spellcheck on credential fields to reduce accidental modifications, and hint to password managers that these are secrets.
- /> + autocapitalize="off" + autocomplete="off" + spellcheck="false" + />Also applies to: 38-47
📜 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 (12)
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts(3 hunks)src/renderer/src/components/settings/BedrockProviderSettingsDetail.vue(5 hunks)src/renderer/src/components/settings/ModelProviderSettings.vue(1 hunks)src/renderer/src/i18n/en-US/settings.json(2 hunks)src/renderer/src/i18n/fa-IR/settings.json(2 hunks)src/renderer/src/i18n/fr-FR/settings.json(2 hunks)src/renderer/src/i18n/ja-JP/settings.json(2 hunks)src/renderer/src/i18n/ko-KR/settings.json(2 hunks)src/renderer/src/i18n/ru-RU/settings.json(2 hunks)src/renderer/src/i18n/zh-CN/settings.json(2 hunks)src/renderer/src/i18n/zh-HK/settings.json(2 hunks)src/renderer/src/i18n/zh-TW/settings.json(2 hunks)
🧰 Additional context used
📓 Path-based instructions (16)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use English for logs and comments
Files:
src/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/BedrockProviderSettingsDetail.vuesrc/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts
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.vuesrc/renderer/src/components/settings/BedrockProviderSettingsDetail.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.vuesrc/renderer/src/components/settings/BedrockProviderSettingsDetail.vue
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.vuesrc/renderer/src/i18n/zh-HK/settings.jsonsrc/renderer/src/i18n/fa-IR/settings.jsonsrc/renderer/src/components/settings/BedrockProviderSettingsDetail.vuesrc/renderer/src/i18n/en-US/settings.jsonsrc/renderer/src/i18n/zh-TW/settings.jsonsrc/renderer/src/i18n/ko-KR/settings.jsonsrc/renderer/src/i18n/zh-CN/settings.jsonsrc/renderer/src/i18n/ja-JP/settings.jsonsrc/renderer/src/i18n/ru-RU/settings.jsonsrc/renderer/src/i18n/fr-FR/settings.json
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/settings/ModelProviderSettings.vuesrc/renderer/src/components/settings/BedrockProviderSettingsDetail.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.vuesrc/renderer/src/components/settings/BedrockProviderSettingsDetail.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.vuesrc/renderer/src/components/settings/BedrockProviderSettingsDetail.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.vuesrc/renderer/src/components/settings/BedrockProviderSettingsDetail.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.vuesrc/renderer/src/components/settings/BedrockProviderSettingsDetail.vue
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Strict type checking enabled for TypeScript
**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别
Files:
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts
src/main/**/*.ts
📄 CodeRabbit Inference Engine (CLAUDE.md)
Main to Renderer: Use EventBus to broadcast events via mainWindow.webContents.send()
Use Electron's built-in APIs for file system and native dialogs
Files:
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts
src/main/presenter/**/*.ts
📄 CodeRabbit Inference Engine (CLAUDE.md)
One presenter per functional domain
Files:
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts
src/main/presenter/llmProviderPresenter/providers/*.ts
📄 CodeRabbit Inference Engine (CLAUDE.md)
src/main/presenter/llmProviderPresenter/providers/*.ts: Create provider file in src/main/presenter/llmProviderPresenter/providers/ when adding a new LLM provider
Implement coreStream method following standardized event interface in LLM provider files
src/main/presenter/llmProviderPresenter/providers/*.ts: Each file insrc/main/presenter/llmProviderPresenter/providers/*.tsshould handle interaction with a specific LLM API, including request/response formatting, tool definition conversion, native/non-native tool call management, and standardizing output streams to a common event format.
Provider implementations must use acoreStreammethod that yields standardized stream events to decouple the main loop from provider-specific details.
ThecoreStreammethod in each Provider must perform a single streaming API request per conversation round and must not contain multi-round tool call loop logic.
Provider files should implement helper methods such asformatMessages,convertToProviderTools,parseFunctionCalls, andprepareFunctionCallPromptas needed for provider-specific logic.
All provider implementations must parse provider-specific data chunks and yield standardized events for text, reasoning, tool calls, usage, errors, stop reasons, and image data.
When a provider does not support native function calling, it must prepare messages using prompt wrapping (e.g.,prepareFunctionCallPrompt) before making the API call.
When a provider supports native function calling, MCP tools must be converted to the provider's format (e.g., usingconvertToProviderTools) and included in the API request.
Provider implementations should aggregate and yield usage events as part of the standardized stream.
Provider implementations should yield image data events in the standardized format when applicable.
Provider implementations should yield reasoning events in the standardized format when applicable.
Provider implementations should yield tool call events (`tool_call_star...
Files:
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development-setup.mdc)
**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写
Files:
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts
src/{main,renderer}/**/*.ts
📄 CodeRabbit Inference Engine (.cursor/rules/electron-best-practices.mdc)
src/{main,renderer}/**/*.ts: Use context isolation for improved security
Implement proper inter-process communication (IPC) patterns
Optimize application startup time with lazy loading
Implement proper error handling and logging for debugging
Files:
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts
src/main/**/*.{ts,js,tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/project-structure.mdc)
主进程代码放在
src/main
Files:
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts
🧠 Learnings (3)
📚 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/BedrockProviderSettingsDetail.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} : Use Iconify/Vue for icon implementation.
Applied to files:
src/renderer/src/components/settings/BedrockProviderSettingsDetail.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/i18n/common.json : Shared translation keys must be placed in 'src/renderer/src/i18n/common.json'
Applied to files:
src/renderer/src/i18n/ko-KR/settings.jsonsrc/renderer/src/i18n/zh-CN/settings.jsonsrc/renderer/src/i18n/ru-RU/settings.json
🧬 Code Graph Analysis (1)
src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts (1)
src/shared/presenter.d.ts (1)
MODEL_META(480-493)
⏰ 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 (23)
src/renderer/src/i18n/zh-HK/settings.json (2)
234-236: AWS 憑證輸入占位符新增 — LGTM占位符鍵與預期 UI 綁定一致（AccessKeyId/SecretAccessKey/Region），文案也清晰。無需變更。
447-449: Bedrock 驗證提示新增 — LGTM說明已清楚傳達以 Claude 3.5 Sonnet 驗證與權限缺失時的行為，不影響其他模型的使用。
src/renderer/src/i18n/en-US/settings.json (1)
447-449: Bedrock i18n keys verified across all locales and UI usages confirmed
Allsettings.provider.bedrockVerifyTipandsettings.provider.bedrockLimitTipkeys (along withaccessKeyIdPlaceholder,secretAccessKeyPlaceholder, andregionPlaceholder) are present in every locale’ssettings.json, and the application correctly references them inBedrockProviderSettingsDetail.vue. LGTM.src/renderer/src/i18n/ko-KR/settings.json (2)
234-236: AWS 자격 증명 자리표시자 추가 — LGTM키 구조 및 한국어 표현이 자연스럽습니다.
447-449: Bedrock 검증 안내 추가 — LGTM검증 모델/권한 실패 시 동작이 명확히 안내됩니다.
src/renderer/src/i18n/fa-IR/settings.json (2)
234-236: افزودن جاینماهای اعتبارسنجی AWS — خوب استکلیدها و ترجمهها با UI همراستا هستند.
447-449: افزودن راهنمای تأیید Bedrock — خوب استپیام فارسی شفاف است و رفتار عدم تأیید در صورت نبود مجوز را توضیح میدهد.
src/renderer/src/i18n/fr-FR/settings.json (1)
447-449: Astuce de vérification Bedrock — OKLe message est clair et fidèle au comportement côté produit.
src/renderer/src/i18n/zh-TW/settings.json (2)
234-236: LGTM: New AWS credential placeholders are correctly added under provider.Keys align with the Bedrock settings UI and follow existing naming conventions.
447-449: LGTM: Added Bedrock verification tip with clear guidance.The wording is concise and consistent with other locales. Trailing comma before the new key is correct.
src/renderer/src/i18n/zh-CN/settings.json (3)
234-236: LGTM: AWS credential placeholders added under provider.Text is clear and consistent with UI usage. Good placement.
447-449: LGTM: Added Bedrock verification tip under provider.Comma after bedrockLimitTip is correct. The wording matches product behavior.
1-790: Cross-locale completeness verifiedThe provided script confirms that every
settings.jsonundersrc/renderer/src/i18n/*includes the four new keys underprovider.*(accessKeyIdPlaceholder,secretAccessKeyPlaceholder,regionPlaceholder, andbedrockVerifyTip). No missing entries were found across all locales, so no further action is needed.src/renderer/src/i18n/ja-JP/settings.json (2)
234-236: LGTM: Added AWS placeholders (JA).Placement and wording are consistent with the other locales.
447-449: LGTM: Added Bedrock verification tip (JA).Key added under provider; trailing comma before is correct.
src/renderer/src/components/settings/ModelProviderSettings.vue (3)
1-158: Sanity check: search/filter and i18n usage look good.All user-visible strings use t(...), consistent with the i18n requirement for renderer code.
160-342: Do not log sensitive user/provider data.No issues found here; just a reminder to keep it that way. Thanks for not logging provider credentials.
1-342: No legacy “bedrock” apiType remainsI’ve searched the entire codebase for any
apiType === 'bedrock'or similar checks and found none. All conditional branches, provider definitions, and presenter logic now consistently useapiType: 'aws-bedrock'. Other occurrences of “bedrock” are limited to:
- Translation keys and copy (
settings.provider.bedrockVerifyTip,settings.provider.bedrockLimitTip)- Icon imports and file names (
bedrock-color.svg,ModelIcon.vuemappings)- Dependency entries in
package.jsonand AWS SDK client imports- Provider IDs and keys (
id: 'aws-bedrock'inconfigPresenter/providers.ts)These are all intentional and reference the new AWS Bedrock integration—not a legacy code path. No further updates are required.
src/renderer/src/i18n/ru-RU/settings.json (3)
234-236: Placeholders added — looks good and consistent with usage.The new keys for AWS placeholders are clear and grammatically correct.
447-449: New Bedrock tips — content and placement look correct.The
bedrockLimitTipandbedrockVerifyTipread well and the commas/structure are valid JSON.
234-236: All locale files include the new AWS placeholders and “ID” is consistently capitalizedI’ve verified that every
settings.jsonundersrc/renderer/src/i18n/*/settings.jsondefines:
.provider.accessKeyIdPlaceholder.provider.secretAccessKeyPlaceholder.provider.regionPlaceholderand no instances of “Access Key Id” (lowercase “d”) remain in any JSON.
No further changes are needed here.
src/renderer/src/components/settings/BedrockProviderSettingsDetail.vue (2)
141-141: Importing shadcn Tooltip primitives — LGTM.
161-162: State for visibility toggles — LGTM.Clear and minimal reactive booleans for show/hide behavior.
| .map<MODEL_META>((m) => ({ | ||
| // id: m.modelId!, | ||
| // id: m.modelArn!, | ||
| id: `${m.inferenceTypesSupported?.includes('ON_DEMAND') ? m.modelId! : `us.${m.modelId}`}`, | ||
| // name: `${m.modelName} (${m.modelId})`, | ||
| id: `${m.inferenceTypesSupported?.includes('ON_DEMAND') ? m.modelId! : `${region.split('-')[0]}.${m.modelId}`}`, | ||
| name: m.modelId?.replace('anthropic.', '') || '<Unknown>', | ||
| providerId: this.provider.id, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Bug: Region-prefixed IDs will break InvokeModel for provisioned (non-ON_DEMAND) models.
AWS Bedrock expects modelId like “anthropic.claude-…:0” without any region prefix. Prefixing ids (e.g., “us.anthropic…”) here will later be passed to InvokeModel/InvokeModelWithResponseStream and fail. The provider already has a single configured region, so disambiguation by mutating modelId isn’t needed.
Apply this diff to keep ids provider-valid while still exposing region in group/name if you need UI disambiguation:
- ?.filter((m) => m.inferenceTypesSupported && m.inferenceTypesSupported.length > 0)
+ ?.filter((m) => m.inferenceTypesSupported && m.inferenceTypesSupported.length > 0)
.map<MODEL_META>((m) => ({
- id: `${m.inferenceTypesSupported?.includes('ON_DEMAND') ? m.modelId! : `${region.split('-')[0]}.${m.modelId}`}`,
+ // Keep the actual Bedrock modelId for invocation
+ id: m.modelId!,
name: m.modelId?.replace('anthropic.', '') || '<Unknown>',
providerId: this.provider.id,
maxTokens: 64_000,
- group: `AWS Bedrock Claude - ${m.modelId?.includes('opus') ? 'opus' : m.modelId?.includes('sonnet') ? 'sonnet' : m.modelId?.includes('haiku') ? 'haiku' : 'other'}`,
+ group: `AWS Bedrock (${region}) - ${m.modelId?.includes('opus') ? 'opus' : m.modelId?.includes('sonnet') ? 'sonnet' : m.modelId?.includes('haiku') ? 'haiku' : 'other'}`,
isCustom: false,
contextLength: 200_000,
vision: false,
functionCall: false,
reasoning: false
})) || []📝 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.
| .map<MODEL_META>((m) => ({ | |
| // id: m.modelId!, | |
| // id: m.modelArn!, | |
| id: `${m.inferenceTypesSupported?.includes('ON_DEMAND') ? m.modelId! : `us.${m.modelId}`}`, | |
| // name: `${m.modelName} (${m.modelId})`, | |
| id: `${m.inferenceTypesSupported?.includes('ON_DEMAND') ? m.modelId! : `${region.split('-')[0]}.${m.modelId}`}`, | |
| name: m.modelId?.replace('anthropic.', '') || '<Unknown>', | |
| providerId: this.provider.id, | |
| ?.filter((m) => m.inferenceTypesSupported && m.inferenceTypesSupported.length > 0) | |
| .map<MODEL_META>((m) => ({ | |
| // Keep the actual Bedrock modelId for invocation | |
| id: m.modelId!, | |
| name: m.modelId?.replace('anthropic.', '') || '<Unknown>', | |
| providerId: this.provider.id, | |
| maxTokens: 64_000, | |
| group: `AWS Bedrock (${region}) - ${ | |
| m.modelId?.includes('opus') ? 'opus' | |
| : m.modelId?.includes('sonnet') ? 'sonnet' | |
| : m.modelId?.includes('haiku') ? 'haiku' | |
| : 'other' | |
| }`, | |
| isCustom: false, | |
| contextLength: 200_000, | |
| vision: false, | |
| functionCall: false, | |
| reasoning: false | |
| })) || [] |
🤖 Prompt for AI Agents
In src/main/presenter/llmProviderPresenter/providers/awsBedrockProvider.ts
around lines 79 to 82, the current code prefixes non-ON_DEMAND model ids with a
region fragment which breaks AWS Bedrock InvokeModel for provisioned models;
change the id to use the canonical m.modelId (e.g., m.modelId! or fallback) for
both ON_DEMAND and provisioned models so the provider sends valid model
identifiers, and if UI disambiguation is needed move the region into the group
or name fields instead of mutating the id.
| <div class="relative w-full"> | ||
| <Input | ||
| :id="`${provider.id}-accessKeyId`" | ||
| :model-value="accessKeyId" | ||
| :type="showAccessKeyId ? 'text' : 'password'" | ||
| :placeholder="t('settings.provider.accessKeyIdPlaceholder')" | ||
| style="padding-right: 2.5rem !important" | ||
| @blur="handleAccessKeyIdChange(String($event.target.value))" | ||
| @keyup.enter="handleAccessKeyIdChange(accessKeyId)" | ||
| @update:model-value="accessKeyId = String($event)" | ||
| /> | ||
| <Button | ||
| variant="ghost" | ||
| size="sm" | ||
| class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent" | ||
| @click="showAccessKeyId = !showAccessKeyId" | ||
| > | ||
| <Icon | ||
| :icon="showAccessKeyId ? 'lucide:eye-off' : 'lucide:eye'" | ||
| class="w-4 h-4 text-muted-foreground hover:text-foreground" | ||
| /> | ||
| </Button> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Internationalize the label and remove inline style; add a11y label for the toggle.
- Replace hardcoded “AWS Access Key Id” with an i18n key to meet renderer i18n rules.
- Avoid inline
style="padding-right: 2.5rem !important"; use Tailwind utility (e.g.,pr-10) to align with styling guidelines. - Add an aria-label to the visibility toggle (also via i18n).
Apply this diff:
- <Label :for="`${provider.id}-accessKeyId`" class="flex-1 cursor-pointer"
- >AWS Access Key Id</Label
- >
+ <Label :for="`${provider.id}-accessKeyId`" class="flex-1 cursor-pointer">
+ {{ t('settings.provider.accessKeyIdLabel') }}
+ </Label>
...
- <Input
+ <Input
:id="`${provider.id}-accessKeyId`"
:model-value="accessKeyId"
:type="showAccessKeyId ? 'text' : 'password'"
:placeholder="t('settings.provider.accessKeyIdPlaceholder')"
- style="padding-right: 2.5rem !important"
+ class="pr-10"
@blur="handleAccessKeyIdChange(String($event.target.value))"
@keyup.enter="handleAccessKeyIdChange(accessKeyId)"
@update:model-value="accessKeyId = String($event)"
/>
<Button
variant="ghost"
size="sm"
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent"
+ :aria-label="t('settings.provider.toggleVisibility')"
@click="showAccessKeyId = !showAccessKeyId"
>Follow-up: please add settings.provider.accessKeyIdLabel and settings.provider.toggleVisibility to all locales.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/renderer/src/components/settings/BedrockProviderSettingsDetail.vue around
lines 9 to 31, replace the hardcoded “AWS Access Key Id” label with the i18n key
settings.provider.accessKeyIdLabel, remove the inline style padding-right and
use Tailwind padding utility (e.g., add class pr-10 to the Input container or
Input component) to create space for the toggle, and add an aria-label on the
visibility toggle Button using the i18n key settings.provider.toggleVisibility;
finally, add the two new keys (settings.provider.accessKeyIdLabel and
settings.provider.toggleVisibility) to all locale files.
| <div class="relative w-full"> | ||
| <Input | ||
| :id="`${provider.id}-secretAccessKey`" | ||
| :model-value="secretAccessKey" | ||
| :type="showSecretAccessKey ? 'text' : 'password'" | ||
| :placeholder="t('settings.provider.secretAccessKeyPlaceholder')" | ||
| style="padding-right: 2.5rem !important" | ||
| @blur="handleSecretAccessKeyChange(String($event.target.value))" | ||
| @keyup.enter="handleSecretAccessKeyChange(secretAccessKey)" | ||
| @update:model-value="secretAccessKey = String($event)" | ||
| /> | ||
| <Button | ||
| variant="ghost" | ||
| size="sm" | ||
| class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent" | ||
| @click="showSecretAccessKey = !showSecretAccessKey" | ||
| > | ||
| <Icon | ||
| :icon="showSecretAccessKey ? 'lucide:eye-off' : 'lucide:eye'" | ||
| class="w-4 h-4 text-muted-foreground hover:text-foreground" | ||
| /> | ||
| </Button> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Secret key: apply same i18n/styling/a11y fixes as above.
Mirror the changes from the Access Key field (label i18n, remove inline style, add toggle aria-label).
- <Label :for="`${provider.id}-secretAccessKey`" class="flex-1 cursor-pointer"
- >AWS Secret Access Key</Label
- >
+ <Label :for="`${provider.id}-secretAccessKey`" class="flex-1 cursor-pointer">
+ {{ t('settings.provider.secretAccessKeyLabel') }}
+ </Label>
...
- <Input
+ <Input
:id="`${provider.id}-secretAccessKey`"
:model-value="secretAccessKey"
:type="showSecretAccessKey ? 'text' : 'password'"
:placeholder="t('settings.provider.secretAccessKeyPlaceholder')"
- style="padding-right: 2.5rem !important"
+ class="pr-10"
@blur="handleSecretAccessKeyChange(String($event.target.value))"
@keyup.enter="handleSecretAccessKeyChange(secretAccessKey)"
@update:model-value="secretAccessKey = String($event)"
/>
<Button
variant="ghost"
size="sm"
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent"
+ :aria-label="t('settings.provider.toggleVisibility')"
@click="showSecretAccessKey = !showSecretAccessKey"
>Follow-up: please add settings.provider.secretAccessKeyLabel to all locales.
📝 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.
| <div class="relative w-full"> | |
| <Input | |
| :id="`${provider.id}-secretAccessKey`" | |
| :model-value="secretAccessKey" | |
| :type="showSecretAccessKey ? 'text' : 'password'" | |
| :placeholder="t('settings.provider.secretAccessKeyPlaceholder')" | |
| style="padding-right: 2.5rem !important" | |
| @blur="handleSecretAccessKeyChange(String($event.target.value))" | |
| @keyup.enter="handleSecretAccessKeyChange(secretAccessKey)" | |
| @update:model-value="secretAccessKey = String($event)" | |
| /> | |
| <Button | |
| variant="ghost" | |
| size="sm" | |
| class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent" | |
| @click="showSecretAccessKey = !showSecretAccessKey" | |
| > | |
| <Icon | |
| :icon="showSecretAccessKey ? 'lucide:eye-off' : 'lucide:eye'" | |
| class="w-4 h-4 text-muted-foreground hover:text-foreground" | |
| /> | |
| </Button> | |
| </div> | |
| <Label :for="`${provider.id}-secretAccessKey`" class="flex-1 cursor-pointer"> | |
| {{ t('settings.provider.secretAccessKeyLabel') }} | |
| </Label> | |
| <div class="relative w-full"> | |
| <Input | |
| :id="`${provider.id}-secretAccessKey`" | |
| :model-value="secretAccessKey" | |
| :type="showSecretAccessKey ? 'text' : 'password'" | |
| :placeholder="t('settings.provider.secretAccessKeyPlaceholder')" | |
| class="pr-10" | |
| @blur="handleSecretAccessKeyChange(String($event.target.value))" | |
| @keyup.enter="handleSecretAccessKeyChange(secretAccessKey)" | |
| @update:model-value="secretAccessKey = String($event)" | |
| /> | |
| <Button | |
| variant="ghost" | |
| size="sm" | |
| class="absolute right-2 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0 hover:bg-transparent" | |
| :aria-label="t('settings.provider.toggleVisibility')" | |
| @click="showSecretAccessKey = !showSecretAccessKey" | |
| > | |
| <Icon | |
| :icon="showSecretAccessKey ? 'lucide:eye-off' : 'lucide:eye'" | |
| class="w-4 h-4 text-muted-foreground hover:text-foreground" | |
| /> | |
| </Button> | |
| </div> |
🤖 Prompt for AI Agents
In src/renderer/src/components/settings/BedrockProviderSettingsDetail.vue around
lines 37 to 59, the Secret Access Key field needs the same i18n/styling/a11y
updates as the Access Key: replace any hard-coded label with
t('settings.provider.secretAccessKeyLabel'), remove the inline style attribute
on the Input (move padding-right into a class or CSS), add an aria-label to the
toggle Button that describes the action (use
t('settings.provider.toggleSecretAccessKeyVisibility') or similar), and ensure
the Input placeholder uses the i18n key already used elsewhere; finally add
settings.provider.secretAccessKeyLabel to all locale files with appropriate
translations.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/renderer/src/i18n/en-US/settings.json (2)
234-236: Capitalize “Region” for style consistency with other placeholdersOther placeholders use title case for key nouns (API URL, API Key). Update to “AWS Region”.
- "regionPlaceholder": "Please enter AWS region", + "regionPlaceholder": "Please enter AWS Region",
234-236: Consider centralizing repeated provider placeholders if reused beyond SettingsIf these AWS placeholders will be reused in multiple views/components, consider moving them into i18n/common.json per our shared-keys convention. If they are strictly Settings-only, keeping them here is fine. Referencing our stored learning about shared keys placement.
📜 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 (9)
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)
🚧 Files skipped from review as they are similar to previous changes (5)
- src/renderer/src/i18n/fr-FR/settings.json
- src/renderer/src/i18n/zh-TW/settings.json
- src/renderer/src/i18n/zh-CN/settings.json
- src/renderer/src/i18n/zh-HK/settings.json
- src/renderer/src/i18n/ja-JP/settings.json
🧰 Additional context used
📓 Path-based instructions (1)
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/ru-RU/settings.jsonsrc/renderer/src/i18n/fa-IR/settings.jsonsrc/renderer/src/i18n/ko-KR/settings.jsonsrc/renderer/src/i18n/en-US/settings.json
🧠 Learnings (1)
📚 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/ru-RU/settings.json
⏰ 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 (4)
src/renderer/src/i18n/en-US/settings.json (1)
234-236: All locales define AWS placeholdersI’ve run a verification across all
settings.jsonfiles undersrc/renderer/src/i18nand confirmed that every locale includes non-empty values for:
provider.accessKeyIdPlaceholderprovider.secretAccessKeyPlaceholderprovider.regionPlaceholderNo missing keys were detected in any of the locale files.
src/renderer/src/i18n/ko-KR/settings.json (1)
234-236: LGTM: Translations and tone are consistent“AWS Access Key ID/Secret Access Key/리전” read naturally and match the surrounding placeholder style.
src/renderer/src/i18n/fa-IR/settings.json (1)
234-236: LGTM: Placeholders added correctlyThe Persian prompts are clear and consistent with existing placeholder phrasing.
src/renderer/src/i18n/ru-RU/settings.json (1)
234-236: LGTM: Accurate wording and case“Введите AWS Access Key ID/Secret Access Key/регион AWS” aligns with established placeholder style.
update #756
Summary by CodeRabbit
New Features
Bug Fixes
Localization
Style