Skip to content

Commit 1c67f4c

Browse files
ctecte
committed
Settings cleanup
1 parent 9fcf69c commit 1c67f4c

File tree

13 files changed

+224
-251
lines changed

13 files changed

+224
-251
lines changed

‎webview-ui/src/components/chat/ChatView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { getApiMetrics } from "../../../../src/shared/getApiMetrics"
1919
import { useExtensionState } from "../../context/ExtensionStateContext"
2020
import { vscode } from "../../utils/vscode"
2121
import HistoryPreview from "../history/HistoryPreview"
22-
import { normalizeApiConfiguration } from "../settings/ApiOptions"
22+
import { normalizeApiConfiguration } from "../settings/ProviderSettings"
2323
import Announcement from "./Announcement"
2424
import BrowserSessionRow from "./BrowserSessionRow"
2525
import ChatRow from "./ChatRow"

‎webview-ui/src/components/chat/TaskHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { HistoryItem } from "../../../../src/shared/HistoryItem"
1414

1515
import { useExtensionState } from "../../context/ExtensionStateContext"
1616
import Thumbnails from "../common/Thumbnails"
17-
import { normalizeApiConfiguration } from "../settings/ApiOptions"
17+
import { normalizeApiConfiguration } from "../settings/ProviderSettings"
1818
import { DeleteTaskDialog } from "../history/DeleteTaskDialog"
1919

2020
interface TaskHeaderProps {

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

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { EXPERIMENT_IDS, ExperimentId } from "../../../../src/shared/experiments
66
import { TERMINAL_OUTPUT_LIMIT } from "../../../../src/shared/terminal"
77

88
import { cn } from "@/lib/utils"
9+
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui"
910

1011
import { SetCachedStateField, SetExperimentEnabled } from "./types"
1112
import { sliderLabelStyle } from "./styles"
@@ -43,6 +44,12 @@ export const AdvancedSettings = ({
4344
className,
4445
...props
4546
}: AdvancedSettingsProps) => {
47+
const diffStrategy = experiments[EXPERIMENT_IDS.DIFF_STRATEGY]
48+
? "unified"
49+
: experiments[EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE]
50+
? "multiBlock"
51+
: "standard"
52+
4653
return (
4754
<div className={cn("flex flex-col gap-2", className)} {...props}>
4855
<SectionHeader>
@@ -122,6 +129,7 @@ export const AdvancedSettings = ({
122129
checked={diffEnabled}
123130
onChange={(e: any) => {
124131
setCachedStateField("diffEnabled", e.target.checked)
132+
125133
if (!e.target.checked) {
126134
// Reset both experimental strategies when diffs are disabled.
127135
setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, false)
@@ -135,19 +143,12 @@ export const AdvancedSettings = ({
135143
truncated full-file writes. Works best with the latest Claude 3.7 Sonnet model.
136144
</p>
137145
{diffEnabled && (
138-
<div className="flex flex-col gap-2 mt-3 mb-2 pl-3 border-l-2 border-vscode-button-background">
139-
<div className="flex flex-col gap-2">
140-
<span className="font-medium">Diff strategy</span>
141-
<select
142-
value={
143-
experiments[EXPERIMENT_IDS.DIFF_STRATEGY]
144-
? "unified"
145-
: experiments[EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE]
146-
? "multiBlock"
147-
: "standard"
148-
}
149-
onChange={(e) => {
150-
const value = e.target.value
146+
<div className="flex flex-col gap-2 border-l-2 border-vscode-button-background pl-3">
147+
<div>
148+
<div className="font-medium">Diff strategy</div>
149+
<Select
150+
value={diffStrategy}
151+
onValueChange={(value) => {
151152
if (value === "standard") {
152153
setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, false)
153154
setExperimentEnabled(EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE, false)
@@ -158,48 +159,52 @@ export const AdvancedSettings = ({
158159
setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, false)
159160
setExperimentEnabled(EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE, true)
160161
}
161-
}}
162-
className="p-2 rounded w-full bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border outline-none focus:border-vscode-focusBorder">
163-
<option value="standard">Standard (Single block)</option>
164-
<option value="multiBlock">Experimental: Multi-block diff</option>
165-
<option value="unified">Experimental: Unified diff</option>
166-
</select>
162+
}}>
163+
<SelectTrigger className="w-full mt-1">
164+
<SelectValue placeholder="Select" />
165+
</SelectTrigger>
166+
<SelectContent>
167+
<SelectGroup>
168+
<SelectItem value="standard">Standard (Single block)</SelectItem>
169+
<SelectItem value="multiBlock">Experimental: Multi-block diff</SelectItem>
170+
<SelectItem value="unified">Experimental: Unified diff</SelectItem>
171+
</SelectGroup>
172+
</SelectContent>
173+
</Select>
174+
<p className="text-vscode-descriptionForeground text-sm mt-1">
175+
{!experiments[EXPERIMENT_IDS.DIFF_STRATEGY] &&
176+
!experiments[EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE] &&
177+
"Standard diff strategy applies changes to a single code block at a time."}
178+
{experiments[EXPERIMENT_IDS.DIFF_STRATEGY] &&
179+
"Unified diff strategy takes multiple approaches to applying diffs and chooses the best approach."}
180+
{experiments[EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE] &&
181+
"Multi-block diff strategy allows updating multiple code blocks in a file in one request."}
182+
</p>
167183
</div>
168-
169-
{/* Description for selected strategy */}
170-
<p className="text-vscode-descriptionForeground text-sm mt-1">
171-
{!experiments[EXPERIMENT_IDS.DIFF_STRATEGY] &&
172-
!experiments[EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE] &&
173-
"Standard diff strategy applies changes to a single code block at a time."}
174-
{experiments[EXPERIMENT_IDS.DIFF_STRATEGY] &&
175-
"Unified diff strategy takes multiple approaches to applying diffs and chooses the best approach."}
176-
{experiments[EXPERIMENT_IDS.MULTI_SEARCH_AND_REPLACE] &&
177-
"Multi-block diff strategy allows updating multiple code blocks in a file in one request."}
178-
</p>
179-
180-
{/* Match precision slider */}
181-
<span className="font-medium mt-3">Match precision</span>
182-
<div className="flex items-center gap-2">
183-
<input
184-
type="range"
185-
min="0.8"
186-
max="1"
187-
step="0.005"
188-
value={fuzzyMatchThreshold ?? 1.0}
189-
onChange={(e) => {
190-
setCachedStateField("fuzzyMatchThreshold", parseFloat(e.target.value))
191-
}}
192-
className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
193-
/>
194-
<span style={{ ...sliderLabelStyle }}>
195-
{Math.round((fuzzyMatchThreshold || 1) * 100)}%
196-
</span>
184+
<div>
185+
<div className="font-medium">Match precision</div>
186+
<div className="flex items-center gap-2">
187+
<input
188+
type="range"
189+
min="0.8"
190+
max="1"
191+
step="0.005"
192+
value={fuzzyMatchThreshold ?? 1.0}
193+
onChange={(e) =>
194+
setCachedStateField("fuzzyMatchThreshold", parseFloat(e.target.value))
195+
}
196+
className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
197+
/>
198+
<span style={{ ...sliderLabelStyle }}>
199+
{Math.round((fuzzyMatchThreshold || 1) * 100)}%
200+
</span>
201+
</div>
202+
<p className="text-vscode-descriptionForeground text-sm mt-1">
203+
This slider controls how precisely code sections must match when applying diffs.
204+
Lower values allow more flexible matching but increase the risk of incorrect
205+
replacements. Use values below 100% with extreme caution.
206+
</p>
197207
</div>
198-
<p className="text-vscode-descriptionForeground text-sm mt-0">
199-
This slider controls how precisely code sections must match when applying diffs. Lower
200-
values allow more flexible matching but increase the risk of incorrect replacements. Use
201-
values below 100% with extreme caution.
202-
</p>
203208
</div>
204209
)}
205210
</div>

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

Lines changed: 34 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { HTMLAttributes } from "react"
22
import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
3-
import { Dropdown, type DropdownOption } from "vscrui"
43
import { SquareMousePointer } from "lucide-react"
54

5+
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui"
6+
67
import { SetCachedStateField } from "./types"
78
import { sliderLabelStyle } from "./styles"
89
import { SectionHeader } from "./SectionHeader"
@@ -43,53 +44,44 @@ export const BrowserSettings = ({
4344
computer use.
4445
</p>
4546
{browserToolEnabled && (
46-
<div
47-
style={{
48-
marginLeft: 0,
49-
paddingLeft: 10,
50-
borderLeft: "2px solid var(--vscode-button-background)",
51-
}}>
47+
<div className="flex flex-col gap-2 border-l-2 border-vscode-button-background pl-3">
5248
<div>
53-
<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>
54-
Viewport size
55-
</label>
56-
<div className="dropdown-container">
57-
<Dropdown
58-
value={browserViewportSize}
59-
onChange={(value: unknown) => {
60-
setCachedStateField("browserViewportSize", (value as DropdownOption).value)
61-
}}
62-
style={{ width: "100%" }}
63-
options={[
64-
{ value: "1280x800", label: "Large Desktop (1280x800)" },
65-
{ value: "900x600", label: "Small Desktop (900x600)" },
66-
{ value: "768x1024", label: "Tablet (768x1024)" },
67-
{ value: "360x640", label: "Mobile (360x640)" },
68-
]}
69-
/>
70-
</div>
71-
<p className="text-vscode-descriptionForeground text-sm mt-0">
49+
<label className="font-medium">Viewport size</label>
50+
<Select
51+
value={browserViewportSize}
52+
onValueChange={(value) => setCachedStateField("browserViewportSize", value)}>
53+
<SelectTrigger className="w-full mt-1">
54+
<SelectValue placeholder="Select" />
55+
</SelectTrigger>
56+
<SelectContent>
57+
<SelectGroup>
58+
<SelectItem value="1280x800">Large Desktop (1280x800)</SelectItem>
59+
<SelectItem value="900x600">Small Desktop (900x600)</SelectItem>
60+
<SelectItem value="768x1024">Tablet (768x1024)</SelectItem>
61+
<SelectItem value="360x640">Mobile (360x640)</SelectItem>
62+
</SelectGroup>
63+
</SelectContent>
64+
</Select>
65+
<p className="text-vscode-descriptionForeground text-sm mt-1">
7266
Select the viewport size for browser interactions. This affects how websites are
7367
displayed and interacted with.
7468
</p>
7569
</div>
7670
<div>
77-
<div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
78-
<span className="font-medium">Screenshot quality</span>
79-
<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
80-
<input
81-
type="range"
82-
min="1"
83-
max="100"
84-
step="1"
85-
value={screenshotQuality ?? 75}
86-
className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
87-
onChange={(e) =>
88-
setCachedStateField("screenshotQuality", parseInt(e.target.value))
89-
}
90-
/>
91-
<span style={{ ...sliderLabelStyle }}>{screenshotQuality ?? 75}%</span>
92-
</div>
71+
<span className="font-medium">Screenshot quality</span>
72+
<div className="flex items-center gap-2">
73+
<input
74+
type="range"
75+
min="1"
76+
max="100"
77+
step="1"
78+
value={screenshotQuality ?? 75}
79+
onChange={(e) =>
80+
setCachedStateField("screenshotQuality", parseInt(e.target.value))
81+
}
82+
className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
83+
/>
84+
<span style={{ ...sliderLabelStyle }}>{screenshotQuality ?? 75}%</span>
9385
</div>
9486
<p className="text-vscode-descriptionForeground text-sm mt-0">
9587
Adjust the WebP quality of browser screenshots. Higher values provide clearer

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem }
55

66
import { ApiConfiguration, ModelInfo } from "../../../../src/shared/api"
77

8-
import { normalizeApiConfiguration } from "./ApiOptions"
8+
import { normalizeApiConfiguration } from "./ProviderSettings"
99
import { ThinkingBudget } from "./ThinkingBudget"
1010
import { ModelInfoView } from "./ModelInfoView"
1111

0 commit comments

Comments
 (0)