Skip to content

Commit 8b368e9

Browse files
ctecte
authored
Simplify model picker, use default @shadcn/ui components (#1782)
* Simplify model picker, use default @shadcn/ui components * Fix tests
1 parent 923d4a5 commit 8b368e9

File tree

7 files changed

+147
-914
lines changed

7 files changed

+147
-914
lines changed

‎webview-ui/src/components/settings/ApiOptions.tsx‎

Lines changed: 42 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ const ApiOptions = ({
273273
onInput={handleInputChange("openRouterApiKey")}
274274
placeholder="Enter API Key..."
275275
className="w-full">
276-
<span className="font-medium">{t("settings:providers.openRouterApiKey")}</span>
276+
<label className="block font-medium mb-1">{t("settings:providers.openRouterApiKey")}</label>
277277
</VSCodeTextField>
278278
<div className="text-sm text-vscode-descriptionForeground -mt-2">
279279
{t("settings:providers.apiKeyStorageNotice")}
@@ -331,7 +331,7 @@ const ApiOptions = ({
331331
onInput={handleInputChange("apiKey")}
332332
placeholder="Enter API Key..."
333333
className="w-full">
334-
<div className="font-medium">{t("settings:providers.anthropicApiKey")}</div>
334+
<label className="block font-medium mb-1">{t("settings:providers.anthropicApiKey")}</label>
335335
</VSCodeTextField>
336336
<div className="text-sm text-vscode-descriptionForeground -mt-2">
337337
{t("settings:providers.apiKeyStorageNotice")}
@@ -374,7 +374,7 @@ const ApiOptions = ({
374374
onInput={handleInputChange("glamaApiKey")}
375375
placeholder="Enter API Key..."
376376
className="w-full">
377-
<span className="font-medium">{t("settings:providers.glamaApiKey")}</span>
377+
<label className="block font-medium mb-1">{t("settings:providers.glamaApiKey")}</label>
378378
</VSCodeTextField>
379379
<div className="text-sm text-vscode-descriptionForeground -mt-2">
380380
{t("settings:providers.apiKeyStorageNotice")}
@@ -395,7 +395,7 @@ const ApiOptions = ({
395395
onInput={handleInputChange("requestyApiKey")}
396396
placeholder={t("settings:providers.getRequestyApiKey")}
397397
className="w-full">
398-
<span className="font-medium">{t("settings:providers.requestyApiKey")}</span>
398+
<label className="block font-medium mb-1">{t("settings:providers.requestyApiKey")}</label>
399399
</VSCodeTextField>
400400
<div className="text-sm text-vscode-descriptionForeground -mt-2">
401401
{t("settings:providers.apiKeyStorageNotice")}
@@ -411,7 +411,7 @@ const ApiOptions = ({
411411
onInput={handleInputChange("openAiNativeApiKey")}
412412
placeholder="Enter API Key..."
413413
className="w-full">
414-
<span className="font-medium">OpenAI API Key</span>
414+
<label className="block font-medium mb-1">OpenAI API Key</label>
415415
</VSCodeTextField>
416416
<div className="text-sm text-vscode-descriptionForeground -mt-2">
417417
{t("settings:providers.apiKeyStorageNotice")}
@@ -451,7 +451,9 @@ const ApiOptions = ({
451451
onInput={handleInputChange("mistralCodestralUrl")}
452452
placeholder="https://codestral.mistral.ai"
453453
className="w-full">
454-
<span className="font-medium">{t("settings:providers.codestralBaseUrl")}</span>
454+
<label className="block font-medium mb-1">
455+
{t("settings:providers.codestralBaseUrl")}
456+
</label>
455457
</VSCodeTextField>
456458
<div className="text-sm text-vscode-descriptionForeground -mt-2">
457459
{t("settings:providers.codestralBaseUrlDesc")}
@@ -481,7 +483,7 @@ const ApiOptions = ({
481483
onInput={handleInputChange("awsProfile")}
482484
placeholder="Enter profile name"
483485
className="w-full">
484-
<span className="font-medium">{t("settings:providers.awsProfileName")}</span>
486+
<label className="block font-medium mb-1">{t("settings:providers.awsProfileName")}</label>
485487
</VSCodeTextField>
486488
) : (
487489
<>
@@ -491,23 +493,25 @@ const ApiOptions = ({
491493
onInput={handleInputChange("awsAccessKey")}
492494
placeholder="Enter Access Key..."
493495
className="w-full">
494-
<span className="font-medium">{t("settings:providers.awsAccessKey")}</span>
496+
<label className="block font-medium mb-1">{t("settings:providers.awsAccessKey")}</label>
495497
</VSCodeTextField>
496498
<VSCodeTextField
497499
value={apiConfiguration?.awsSecretKey || ""}
498500
type="password"
499501
onInput={handleInputChange("awsSecretKey")}
500502
placeholder="Enter Secret Key..."
501503
className="w-full">
502-
<span className="font-medium">{t("settings:providers.awsSecretKey")}</span>
504+
<label className="block font-medium mb-1">{t("settings:providers.awsSecretKey")}</label>
503505
</VSCodeTextField>
504506
<VSCodeTextField
505507
value={apiConfiguration?.awsSessionToken || ""}
506508
type="password"
507509
onInput={handleInputChange("awsSessionToken")}
508510
placeholder="Enter Session Token..."
509511
className="w-full">
510-
<span className="font-medium">{t("settings:providers.awsSessionToken")}</span>
512+
<label className="block font-medium mb-1">
513+
{t("settings:providers.awsSessionToken")}
514+
</label>
511515
</VSCodeTextField>
512516
</>
513517
)}
@@ -567,21 +571,23 @@ const ApiOptions = ({
567571
onInput={handleInputChange("vertexJsonCredentials")}
568572
placeholder="Enter Credentials JSON..."
569573
className="w-full">
570-
<span className="font-medium">{t("settings:providers.googleCloudCredentials")}</span>
574+
<label className="block font-medium mb-1">
575+
{t("settings:providers.googleCloudCredentials")}
576+
</label>
571577
</VSCodeTextField>
572578
<VSCodeTextField
573579
value={apiConfiguration?.vertexKeyFile || ""}
574580
onInput={handleInputChange("vertexKeyFile")}
575581
placeholder="Enter Key File Path..."
576582
className="w-full">
577-
<span className="font-medium">{t("settings:providers.googleCloudKeyFile")}</span>
583+
<label className="block font-medium mb-1">{t("settings:providers.googleCloudKeyFile")}</label>
578584
</VSCodeTextField>
579585
<VSCodeTextField
580586
value={apiConfiguration?.vertexProjectId || ""}
581587
onInput={handleInputChange("vertexProjectId")}
582588
placeholder="Enter Project ID..."
583589
className="w-full">
584-
<span className="font-medium">{t("settings:providers.googleCloudProjectId")}</span>
590+
<label className="block font-medium mb-1">{t("settings:providers.googleCloudProjectId")}</label>
585591
</VSCodeTextField>
586592
<div>
587593
<label className="block font-medium mb-1">{t("settings:providers.googleCloudRegion")}</label>
@@ -611,7 +617,7 @@ const ApiOptions = ({
611617
onInput={handleInputChange("geminiApiKey")}
612618
placeholder="Enter API Key..."
613619
className="w-full">
614-
<span className="font-medium">{t("settings:providers.geminiApiKey")}</span>
620+
<label className="block font-medium mb-1">{t("settings:providers.geminiApiKey")}</label>
615621
</VSCodeTextField>
616622
<div className="text-sm text-vscode-descriptionForeground -mt-2">
617623
{t("settings:providers.apiKeyStorageNotice")}
@@ -654,15 +660,15 @@ const ApiOptions = ({
654660
onInput={handleInputChange("openAiBaseUrl")}
655661
placeholder={"Enter base URL..."}
656662
className="w-full">
657-
<span className="font-medium">{t("settings:providers.openAiBaseUrl")}</span>
663+
<label className="block font-medium mb-1">{t("settings:providers.openAiBaseUrl")}</label>
658664
</VSCodeTextField>
659665
<VSCodeTextField
660666
value={apiConfiguration?.openAiApiKey || ""}
661667
type="password"
662668
onInput={handleInputChange("openAiApiKey")}
663669
placeholder="Enter API Key..."
664670
className="w-full">
665-
<span className="font-medium">{t("settings:providers.openAiApiKey")}</span>
671+
<label className="block font-medium mb-1">{t("settings:providers.openAiApiKey")}</label>
666672
</VSCodeTextField>
667673
<ModelPicker
668674
apiConfiguration={apiConfiguration}
@@ -744,9 +750,9 @@ const ApiOptions = ({
744750
})}
745751
placeholder="e.g. 4096"
746752
className="w-full">
747-
<span className="font-medium">
753+
<label className="block font-medium mb-1">
748754
{t("settings:providers.customModel.maxTokens.label")}
749-
</span>
755+
</label>
750756
</VSCodeTextField>
751757
<div className="text-sm text-vscode-descriptionForeground">
752758
{t("settings:providers.customModel.maxTokens.description")}
@@ -788,9 +794,9 @@ const ApiOptions = ({
788794
})}
789795
placeholder="e.g. 128000"
790796
className="w-full">
791-
<span className="font-medium">
797+
<label className="block font-medium mb-1">
792798
{t("settings:providers.customModel.contextWindow.label")}
793-
</span>
799+
</label>
794800
</VSCodeTextField>
795801
<div className="text-sm text-vscode-descriptionForeground">
796802
{t("settings:providers.customModel.contextWindow.description")}
@@ -908,9 +914,9 @@ const ApiOptions = ({
908914
placeholder="e.g. 0.0001"
909915
className="w-full">
910916
<div className="flex items-center gap-1">
911-
<span className="font-medium">
917+
<label className="block font-medium mb-1">
912918
{t("settings:providers.customModel.pricing.input.label")}
913-
</span>
919+
</label>
914920
<i
915921
className="codicon codicon-info text-vscode-descriptionForeground"
916922
title={t("settings:providers.customModel.pricing.input.description")}
@@ -953,9 +959,9 @@ const ApiOptions = ({
953959
placeholder="e.g. 0.0002"
954960
className="w-full">
955961
<div className="flex items-center gap-1">
956-
<span className="font-medium">
962+
<label className="block font-medium mb-1">
957963
{t("settings:providers.customModel.pricing.output.label")}
958-
</span>
964+
</label>
959965
<i
960966
className="codicon codicon-info text-vscode-descriptionForeground"
961967
title={t("settings:providers.customModel.pricing.output.description")}
@@ -1044,9 +1050,9 @@ const ApiOptions = ({
10441050
placeholder="e.g. 0.00005"
10451051
className="w-full">
10461052
<div className="flex items-center gap-1">
1047-
<span className="font-medium">
1053+
<label className="block font-medium mb-1">
10481054
{t("settings:providers.customModel.pricing.cacheWrites.label")}
1049-
</span>
1055+
</label>
10501056
<i
10511057
className="codicon codicon-info text-vscode-descriptionForeground"
10521058
title={t(
@@ -1079,14 +1085,14 @@ const ApiOptions = ({
10791085
onInput={handleInputChange("lmStudioBaseUrl")}
10801086
placeholder={"Default: http://localhost:1234"}
10811087
className="w-full">
1082-
<span className="font-medium">{t("settings:providers.lmStudio.baseUrl")}</span>
1088+
<label className="block font-medium mb-1">{t("settings:providers.lmStudio.baseUrl")}</label>
10831089
</VSCodeTextField>
10841090
<VSCodeTextField
10851091
value={apiConfiguration?.lmStudioModelId || ""}
10861092
onInput={handleInputChange("lmStudioModelId")}
10871093
placeholder={"e.g. meta-llama-3.1-8b-instruct"}
10881094
className="w-full">
1089-
<span className="font-medium">{t("settings:providers.lmStudio.modelId")}</span>
1095+
<label className="block font-medium mb-1">{t("settings:providers.lmStudio.modelId")}</label>
10901096
</VSCodeTextField>
10911097
{lmStudioModels.length > 0 && (
10921098
<VSCodeRadioGroup
@@ -1121,7 +1127,9 @@ const ApiOptions = ({
11211127
onInput={handleInputChange("lmStudioDraftModelId")}
11221128
placeholder={"e.g. lmstudio-community/llama-3.2-1b-instruct"}
11231129
className="w-full">
1124-
<span className="font-medium">{t("settings:providers.lmStudio.draftModelId")}</span>
1130+
<label className="block font-medium mb-1">
1131+
{t("settings:providers.lmStudio.draftModelId")}
1132+
</label>
11251133
</VSCodeTextField>
11261134
<div className="text-sm text-vscode-descriptionForeground">
11271135
{t("settings:providers.lmStudio.draftModelDesc")}
@@ -1185,7 +1193,7 @@ const ApiOptions = ({
11851193
onInput={handleInputChange("deepSeekApiKey")}
11861194
placeholder="Enter API Key..."
11871195
className="w-full">
1188-
<span className="font-medium">{t("settings:providers.deepSeekApiKey")}</span>
1196+
<label className="block font-medium mb-1">{t("settings:providers.deepSeekApiKey")}</label>
11891197
</VSCodeTextField>
11901198
<div className="text-sm text-vscode-descriptionForeground -mt-2">
11911199
{t("settings:providers.apiKeyStorageNotice")}
@@ -1244,14 +1252,14 @@ const ApiOptions = ({
12441252
onInput={handleInputChange("ollamaBaseUrl")}
12451253
placeholder={"Default: http://localhost:11434"}
12461254
className="w-full">
1247-
<span className="font-medium">{t("settings:providers.ollama.baseUrl")}</span>
1255+
<label className="block font-medium mb-1">{t("settings:providers.ollama.baseUrl")}</label>
12481256
</VSCodeTextField>
12491257
<VSCodeTextField
12501258
value={apiConfiguration?.ollamaModelId || ""}
12511259
onInput={handleInputChange("ollamaModelId")}
12521260
placeholder={"e.g. llama3.1"}
12531261
className="w-full">
1254-
<span className="font-medium">{t("settings:providers.ollama.modelId")}</span>
1262+
<label className="block font-medium mb-1">{t("settings:providers.ollama.modelId")}</label>
12551263
</VSCodeTextField>
12561264
{ollamaModels.length > 0 && (
12571265
<VSCodeRadioGroup
@@ -1288,7 +1296,7 @@ const ApiOptions = ({
12881296
onInput={handleInputChange("unboundApiKey")}
12891297
placeholder="Enter API Key..."
12901298
className="w-full">
1291-
<span className="font-medium">{t("settings:providers.unboundApiKey")}</span>
1299+
<label className="block font-medium mb-1">{t("settings:providers.unboundApiKey")}</label>
12921300
</VSCodeTextField>
12931301
<div className="text-sm text-vscode-descriptionForeground -mt-2">
12941302
{t("settings:providers.apiKeyStorageNotice")}
@@ -1458,7 +1466,7 @@ const ApiOptions = ({
14581466
}}
14591467
placeholder="Enter ARN (e.g. arn:aws:bedrock:us-east-1:123456789012:foundation-model/my-model)"
14601468
className="w-full">
1461-
<span className="font-medium">Custom ARN</span>
1469+
<label className="block font-medium mb-1">Custom ARN</label>
14621470
</VSCodeTextField>
14631471
<div className="text-sm text-vscode-descriptionForeground -mt-2">
14641472
{t("settings:providers.awsCustomArnUse")}

0 commit comments

Comments
 (0)