Skip to content

Commit ff7b3e0

Browse files
mrubensmrubens
authored
Merge pull request #889 from RooVetGit/update_api_options_on_blur
Update API options on blur instead of on input
2 parents 9d588e3 + 6a8902f commit ff7b3e0

File tree

2 files changed

+26
-22
lines changed

2 files changed

+26
-22
lines changed

‎.changeset/stupid-masks-pay.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"roo-cline": patch
3+
---
4+
5+
Fix jumpiness while entering API config by updating on blur instead of input

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

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ import { UnboundModelPicker } from "./UnboundModelPicker"
4141
import { ModelInfoView } from "./ModelInfoView"
4242
import { DROPDOWN_Z_INDEX } from "./styles"
4343

44-
4544
interface ApiOptionsProps {
4645
apiErrorMessage?: string
4746
modelIdErrorMessage?: string
@@ -164,7 +163,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
164163
value={apiConfiguration?.apiKey || ""}
165164
style={{ width: "100%" }}
166165
type="password"
167-
onInput={handleInputChange("apiKey")}
166+
onBlur={handleInputChange("apiKey")}
168167
placeholder="Enter API Key...">
169168
<span style={{ fontWeight: 500 }}>Anthropic API Key</span>
170169
</VSCodeTextField>
@@ -189,7 +188,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
189188
value={apiConfiguration?.anthropicBaseUrl || ""}
190189
style={{ width: "100%", marginTop: 3 }}
191190
type="url"
192-
onInput={handleInputChange("anthropicBaseUrl")}
191+
onBlur={handleInputChange("anthropicBaseUrl")}
193192
placeholder="Default: https://api.anthropic.com"
194193
/>
195194
)}
@@ -218,7 +217,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
218217
value={apiConfiguration?.glamaApiKey || ""}
219218
style={{ width: "100%" }}
220219
type="password"
221-
onInput={handleInputChange("glamaApiKey")}
220+
onBlur={handleInputChange("glamaApiKey")}
222221
placeholder="Enter API Key...">
223222
<span style={{ fontWeight: 500 }}>Glama API Key</span>
224223
</VSCodeTextField>
@@ -247,7 +246,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
247246
value={apiConfiguration?.openAiNativeApiKey || ""}
248247
style={{ width: "100%" }}
249248
type="password"
250-
onInput={handleInputChange("openAiNativeApiKey")}
249+
onBlur={handleInputChange("openAiNativeApiKey")}
251250
placeholder="Enter API Key...">
252251
<span style={{ fontWeight: 500 }}>OpenAI API Key</span>
253252
</VSCodeTextField>
@@ -275,7 +274,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
275274
value={apiConfiguration?.mistralApiKey || ""}
276275
style={{ width: "100%" }}
277276
type="password"
278-
onInput={handleInputChange("mistralApiKey")}
277+
onBlur={handleInputChange("mistralApiKey")}
279278
placeholder="Enter API Key...">
280279
<span style={{ fontWeight: 500 }}>Mistral API Key</span>
281280
</VSCodeTextField>
@@ -306,7 +305,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
306305
value={apiConfiguration?.openRouterApiKey || ""}
307306
style={{ width: "100%" }}
308307
type="password"
309-
onInput={handleInputChange("openRouterApiKey")}
308+
onBlur={handleInputChange("openRouterApiKey")}
310309
placeholder="Enter API Key...">
311310
<span style={{ fontWeight: 500 }}>OpenRouter API Key</span>
312311
</VSCodeTextField>
@@ -340,7 +339,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
340339
value={apiConfiguration?.openRouterBaseUrl || ""}
341340
style={{ width: "100%", marginTop: 3 }}
342341
type="url"
343-
onInput={handleInputChange("openRouterBaseUrl")}
342+
onBlur={handleInputChange("openRouterBaseUrl")}
344343
placeholder="Default: https://openrouter.ai/api/v1"
345344
/>
346345
)}
@@ -391,7 +390,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
391390
<VSCodeTextField
392391
value={apiConfiguration?.awsProfile || ""}
393392
style={{ width: "100%" }}
394-
onInput={handleInputChange("awsProfile")}
393+
onBlur={handleInputChange("awsProfile")}
395394
placeholder="Enter profile name">
396395
<span style={{ fontWeight: 500 }}>AWS Profile Name</span>
397396
</VSCodeTextField>
@@ -402,23 +401,23 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
402401
value={apiConfiguration?.awsAccessKey || ""}
403402
style={{ width: "100%" }}
404403
type="password"
405-
onInput={handleInputChange("awsAccessKey")}
404+
onBlur={handleInputChange("awsAccessKey")}
406405
placeholder="Enter Access Key...">
407406
<span style={{ fontWeight: 500 }}>AWS Access Key</span>
408407
</VSCodeTextField>
409408
<VSCodeTextField
410409
value={apiConfiguration?.awsSecretKey || ""}
411410
style={{ width: "100%" }}
412411
type="password"
413-
onInput={handleInputChange("awsSecretKey")}
412+
onBlur={handleInputChange("awsSecretKey")}
414413
placeholder="Enter Secret Key...">
415414
<span style={{ fontWeight: 500 }}>AWS Secret Key</span>
416415
</VSCodeTextField>
417416
<VSCodeTextField
418417
value={apiConfiguration?.awsSessionToken || ""}
419418
style={{ width: "100%" }}
420419
type="password"
421-
onInput={handleInputChange("awsSessionToken")}
420+
onBlur={handleInputChange("awsSessionToken")}
422421
placeholder="Enter Session Token...">
423422
<span style={{ fontWeight: 500 }}>AWS Session Token</span>
424423
</VSCodeTextField>
@@ -486,7 +485,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
486485
<VSCodeTextField
487486
value={apiConfiguration?.vertexProjectId || ""}
488487
style={{ width: "100%" }}
489-
onInput={handleInputChange("vertexProjectId")}
488+
onBlur={handleInputChange("vertexProjectId")}
490489
placeholder="Enter Project ID...">
491490
<span style={{ fontWeight: 500 }}>Google Cloud Project ID</span>
492491
</VSCodeTextField>
@@ -544,7 +543,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
544543
value={apiConfiguration?.geminiApiKey || ""}
545544
style={{ width: "100%" }}
546545
type="password"
547-
onInput={handleInputChange("geminiApiKey")}
546+
onBlur={handleInputChange("geminiApiKey")}
548547
placeholder="Enter API Key...">
549548
<span style={{ fontWeight: 500 }}>Gemini API Key</span>
550549
</VSCodeTextField>
@@ -572,15 +571,15 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
572571
value={apiConfiguration?.openAiBaseUrl || ""}
573572
style={{ width: "100%" }}
574573
type="url"
575-
onInput={handleInputChange("openAiBaseUrl")}
574+
onBlur={handleInputChange("openAiBaseUrl")}
576575
placeholder={"Enter base URL..."}>
577576
<span style={{ fontWeight: 500 }}>Base URL</span>
578577
</VSCodeTextField>
579578
<VSCodeTextField
580579
value={apiConfiguration?.openAiApiKey || ""}
581580
style={{ width: "100%" }}
582581
type="password"
583-
onInput={handleInputChange("openAiApiKey")}
582+
onBlur={handleInputChange("openAiApiKey")}
584583
placeholder="Enter API Key...">
585584
<span style={{ fontWeight: 500 }}>API Key</span>
586585
</VSCodeTextField>
@@ -623,7 +622,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
623622
<VSCodeTextField
624623
value={apiConfiguration?.azureApiVersion || ""}
625624
style={{ width: "100%", marginTop: 3 }}
626-
onInput={handleInputChange("azureApiVersion")}
625+
onBlur={handleInputChange("azureApiVersion")}
627626
placeholder={`Default: ${azureOpenAiDefaultApiVersion}`}
628627
/>
629628
)}
@@ -1073,14 +1072,14 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
10731072
value={apiConfiguration?.lmStudioBaseUrl || ""}
10741073
style={{ width: "100%" }}
10751074
type="url"
1076-
onInput={handleInputChange("lmStudioBaseUrl")}
1075+
onBlur={handleInputChange("lmStudioBaseUrl")}
10771076
placeholder={"Default: http://localhost:1234"}>
10781077
<span style={{ fontWeight: 500 }}>Base URL (optional)</span>
10791078
</VSCodeTextField>
10801079
<VSCodeTextField
10811080
value={apiConfiguration?.lmStudioModelId || ""}
10821081
style={{ width: "100%" }}
1083-
onInput={handleInputChange("lmStudioModelId")}
1082+
onBlur={handleInputChange("lmStudioModelId")}
10841083
placeholder={"e.g. meta-llama-3.1-8b-instruct"}>
10851084
<span style={{ fontWeight: 500 }}>Model ID</span>
10861085
</VSCodeTextField>
@@ -1142,7 +1141,7 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
11421141
value={apiConfiguration?.deepSeekApiKey || ""}
11431142
style={{ width: "100%" }}
11441143
type="password"
1145-
onInput={handleInputChange("deepSeekApiKey")}
1144+
onBlur={handleInputChange("deepSeekApiKey")}
11461145
placeholder="Enter API Key...">
11471146
<span style={{ fontWeight: 500 }}>DeepSeek API Key</span>
11481147
</VSCodeTextField>
@@ -1232,14 +1231,14 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
12321231
value={apiConfiguration?.ollamaBaseUrl || ""}
12331232
style={{ width: "100%" }}
12341233
type="url"
1235-
onInput={handleInputChange("ollamaBaseUrl")}
1234+
onBlur={handleInputChange("ollamaBaseUrl")}
12361235
placeholder={"Default: http://localhost:11434"}>
12371236
<span style={{ fontWeight: 500 }}>Base URL (optional)</span>
12381237
</VSCodeTextField>
12391238
<VSCodeTextField
12401239
value={apiConfiguration?.ollamaModelId || ""}
12411240
style={{ width: "100%" }}
1242-
onInput={handleInputChange("ollamaModelId")}
1241+
onBlur={handleInputChange("ollamaModelId")}
12431242
placeholder={"e.g. llama3.1"}>
12441243
<span style={{ fontWeight: 500 }}>Model ID</span>
12451244
</VSCodeTextField>

0 commit comments

Comments
 (0)