Skip to content

fix: improve AWS Bedrock provider settings UI #759

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.

Sign up for GitHub

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

Merged
zerob13 merged 14 commits into from
Aug 21, 2025
Merged

fix: improve AWS Bedrock provider settings UI #759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
50c463a
add: aws bedrock
Jul 7, 2025
926e6db
.
Aug 1, 2025
8494338
chore(merge): merge branch 'dev' into feature/add-aws-bedrock-provider
Aug 16, 2025
fb79a16
chore(text): update text about AWS
Aug 16, 2025
51dc6e7
chore(text): add AWS Claude limit tip
Aug 16, 2025
9b1f515
fix(text): fix typo
Aug 16, 2025
8cc30cd
fix: use apiType to distinguish AwsBedrockProvider instead of id.
Aug 18, 2025
27ac53b
revert: fix: keep useMonaco({ MAX_HEIGHT: '500px' }) as is
Aug 18, 2025
a710503
fix: apiType to active BedrockProviderSettingsDetail
Aug 20, 2025
b9b33bb
fix: hide credential fields in BedrockProviderSettingsDetail
Aug 20, 2025
b1fe038
refactor: optimize available model filtering strategies
Aug 20, 2025
7bef364
chore(merge): Merge remote-tracking branch 'origin/dev' into feature/…
Aug 20, 2025
b709c18
fix: improve AWS Bedrock provider settings UI
yyhhyyyyyy Aug 21, 2025
0785994
chore: Merge branch 'dev' into feature/add-aws-bedrock-provider
zerob13 Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 49 additions & 19 deletions src/renderer/src/components/settings/BedrockProviderSettingsDetail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,64 @@
<Label :for="`${provider.id}-accessKeyId`" class="flex-1 cursor-pointer"
>AWS Access Key Id</Label
>
<Input
:id="`${provider.id}-accessKeyId`"
:model-value="accessKeyId"
type="password"
:placeholder="t('settings.provider.urlPlaceholder')"
@blur="handleAccessKeyIdChange(String($event.target.value))"
@keyup.enter="handleAccessKeyIdChange(accessKeyId)"
@update:model-value="accessKeyId = String($event)"
/>
<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>
Comment on lines +9 to +31
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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>
<div class="flex flex-col items-start gap-2">
<Label :for="`${provider.id}-secretAccessKey`" class="flex-1 cursor-pointer"
>AWS Secret Access Key</Label
>
<Input
:id="`${provider.id}-secretAccessKey`"
:model-value="secretAccessKey"
type="password"
:placeholder="t('settings.provider.urlPlaceholder')"
@blur="handleSecretAccessKeyChange(String($event.target.value))"
@keyup.enter="handleSecretAccessKeyChange(secretAccessKey)"
@update:model-value="secretAccessKey = String($event)"
/>
<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>
Comment on lines +37 to +59
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
<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.

</div>
<div class="flex flex-col items-start gap-2">
<Label :for="`${provider.id}-region`" class="flex-1 cursor-pointer">AWS Region</Label>
<Input
:id="`${provider.id}-region`"
:model-value="region"
:placeholder="t('settings.provider.urlPlaceholder')"
:placeholder="t('settings.provider.regionPlaceholder')"
@blur="handleRegionChange(String($event.target.value))"
@keyup.enter="handleRegionChange(region)"
@update:model-value="region = String($event)"
Expand Down Expand Up @@ -130,6 +158,8 @@ const settingsStore = useSettingsStore()
const accessKeyId = ref(props.provider.credential?.accessKeyId || '')
const secretAccessKey = ref(props.provider.credential?.secretAccessKey || '')
const region = ref(props.provider.credential?.region || '')
const showAccessKeyId = ref(false)
const showSecretAccessKey = ref(false)
const providerModels = ref<RENDERER_MODEL_META[]>([])
const checkResult = ref<boolean>(false)
const modelToDisable = ref<RENDERER_MODEL_META | null>(null)
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/src/i18n/en-US/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,9 @@
"disabled": "Disabled",
"urlPlaceholder": "Please enter API URL",
"keyPlaceholder": "Please enter API Key",
"accessKeyIdPlaceholder": "Please enter AWS Access Key ID",
"secretAccessKeyPlaceholder": "Please enter AWS Secret Access Key",
"regionPlaceholder": "Please enter AWS region",
"verifyKey": "Verify Key",
"howToGet": "How to get",
"getKeyTip": "Please visit",
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/src/i18n/fa-IR/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,9 @@
"disabled": "غیرفعال",
"urlPlaceholder": "لطفاً نشانی API را وارد کنید",
"keyPlaceholder": "لطفاً کلید API را وارد کنید",
"accessKeyIdPlaceholder": "لطفاً AWS Access Key ID را وارد کنید",
"secretAccessKeyPlaceholder": "لطفاً AWS Secret Access Key را وارد کنید",
"regionPlaceholder": "لطفاً منطقه AWS را وارد کنید",
"verifyKey": "پذیرش کلید",
"howToGet": "چگونه دریافت کنیم",
"getKeyTip": "لطفاً به",
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/src/i18n/fr-FR/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,9 @@
"disabled": "Désactivé",
"urlPlaceholder": "Veuillez entrer l'URL de l'API",
"keyPlaceholder": "Veuillez entrer la clé API",
"accessKeyIdPlaceholder": "Veuillez entrer l'AWS Access Key ID",
"secretAccessKeyPlaceholder": "Veuillez entrer l'AWS Secret Access Key",
"regionPlaceholder": "Veuillez entrer la région AWS",
"verifyKey": "Vérifier la clé",
"howToGet": "Comment obtenir",
"getKeyTip": "Veuillez visiter",
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/src/i18n/ja-JP/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,9 @@
"disabled": "無効",
"urlPlaceholder": "API URLを入力してください",
"keyPlaceholder": "API Keyを入力してください",
"accessKeyIdPlaceholder": "AWS Access Key IDを入力してください",
"secretAccessKeyPlaceholder": "AWS Secret Access Keyを入力してください",
"regionPlaceholder": "AWSリージョンを入力してください",
"verifyKey": "キーを検証",
"howToGet": "取得方法",
"getKeyTip": "以下へアクセスしてください",
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/src/i18n/ko-KR/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,9 @@
"disabled": "비활성화됨",
"urlPlaceholder": "API URL을 입력하세요",
"keyPlaceholder": "API 키를 입력하세요",
"accessKeyIdPlaceholder": "AWS Access Key ID를 입력하세요",
"secretAccessKeyPlaceholder": "AWS Secret Access Key를 입력하세요",
"regionPlaceholder": "AWS 리전을 입력하세요",
"verifyKey": "키 확인",
"howToGet": "얻는 방법",
"getKeyTip": "다음으로 이동하세요",
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/src/i18n/ru-RU/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,9 @@
"disabled": "Отключен",
"urlPlaceholder": "Введите API URL",
"keyPlaceholder": "Введите API Key",
"accessKeyIdPlaceholder": "Введите AWS Access Key ID",
"secretAccessKeyPlaceholder": "Введите AWS Secret Access Key",
"regionPlaceholder": "Введите регион AWS",
"verifyKey": "Проверить ключ",
"howToGet": "Как получить",
"getKeyTip": "Перейдите по следующему адресу",
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/src/i18n/zh-CN/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,9 @@
"disabled": "已禁用",
"urlPlaceholder": "请输入API URL",
"keyPlaceholder": "请输入API Key",
"accessKeyIdPlaceholder": "请输入AWS Access Key ID",
"secretAccessKeyPlaceholder": "请输入AWS Secret Access Key",
"regionPlaceholder": "请输入AWS区域",
"verifyKey": "验证密钥",
"howToGet": "如何获取",
"refreshingModels": "刷新中...",
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/src/i18n/zh-HK/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,9 @@
"disabled": "已禁用",
"urlPlaceholder": "請輸入API URL",
"keyPlaceholder": "請輸入API Key",
"accessKeyIdPlaceholder": "請輸入AWS Access Key ID",
"secretAccessKeyPlaceholder": "請輸入AWS Secret Access Key",
"regionPlaceholder": "請輸入AWS區域",
"verifyKey": "驗證密鑰",
"howToGet": "如何獲取",
"getKeyTip": "請前往",
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/src/i18n/zh-TW/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,9 @@
"disabled": "已停用",
"urlPlaceholder": "請輸入 API URL",
"keyPlaceholder": "請輸入 API 金鑰",
"accessKeyIdPlaceholder": "請輸入 AWS Access Key ID",
"secretAccessKeyPlaceholder": "請輸入 AWS Secret Access Key",
"regionPlaceholder": "請輸入 AWS 區域",
"verifyKey": "驗證金鑰",
"howToGet": "如何取得",
"getKeyTip": "請前往",
Expand Down