add volume setting

webview-ui/src/components/settings/SettingsView.tsx

@@ -29,6 +29,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		setAlwaysAllowMcp,
 		soundEnabled,
 		setSoundEnabled,
+		soundVolume,
+		setSoundVolume,
 		diffEnabled,
 		setDiffEnabled,
 		openRouterModels,
@@ -55,6 +57,7 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 			vscode.postMessage({ type: "alwaysAllowMcp", bool: alwaysAllowMcp })
 			vscode.postMessage({ type: "allowedCommands", commands: allowedCommands ?? [] })
 			vscode.postMessage({ type: "soundEnabled", bool: soundEnabled })
+			vscode.postMessage({ type: "soundVolume", value: soundVolume })
 			vscode.postMessage({ type: "diffEnabled", bool: diffEnabled })
 			onDone()
 		}
@@ -306,17 +309,42 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					<h4 style={{ fontWeight: 500, marginBottom: 10 }}>Experimental Features</h4>
 
 					<div style={{ marginBottom: 5 }}>
-						<VSCodeCheckbox checked={soundEnabled} onChange={(e: any) => setSoundEnabled(e.target.checked)}>
-							<span style={{ fontWeight: "500" }}>Enable sound effects</span>
-						</VSCodeCheckbox>
-						<p
-							style={{
-								fontSize: "12px",
-								marginTop: "5px",
-								color: "var(--vscode-descriptionForeground)",
-							}}>
-							When enabled, Cline will play sound effects for notifications and events.
-						</p>
+						<div style={{ marginBottom: 10 }}>
+							<VSCodeCheckbox checked={soundEnabled} onChange={(e: any) => setSoundEnabled(e.target.checked)}>
+								<span style={{ fontWeight: "500" }}>Enable sound effects</span>
+							</VSCodeCheckbox>
+							<p
+								style={{
+									fontSize: "12px",
+									marginTop: "5px",
+									color: "var(--vscode-descriptionForeground)",
+								}}>
+								When enabled, Cline will play sound effects for notifications and events.
+							</p>
+						</div>
+						{soundEnabled && (
+							<div style={{ marginLeft: 0 }}>
+								<div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+									<span style={{ fontWeight: "500", minWidth: '50px' }}>Volume</span>
+									<input
+										type="range"
+										min="0"
+										max="1"
+										step="0.01"
+										value={soundVolume ?? 0.5}
+										onChange={(e) => setSoundVolume(parseFloat(e.target.value))}
+										style={{
+											flexGrow: 1,
+											accentColor: 'var(--vscode-button-background)',
+											height: '2px'
+										}}
+									/>
+									<span style={{ minWidth: '35px', textAlign: 'left' }}>
+										{Math.round((soundVolume ?? 0.5) * 100)}%
+									</span>
+								</div>
+							</div>
+						)}
 					</div>
 				</div>
 

webview-ui/src/context/ExtensionStateContext.tsx

@@ -29,6 +29,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setShowAnnouncement: (value: boolean) => void
 	setAllowedCommands: (value: string[]) => void
 	setSoundEnabled: (value: boolean) => void
+	setSoundVolume: (value: number) => void
 	setDiffEnabled: (value: boolean) => void
 }
 
@@ -42,6 +43,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		shouldShowAnnouncement: false,
 		allowedCommands: [],
 		soundEnabled: false,
+		soundVolume: 0.5,
 		diffEnabled: false,
 	})
 	const [didHydrateState, setDidHydrateState] = useState(false)
@@ -129,6 +131,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		openRouterModels,
 		mcpServers,
 		filePaths,
+		soundVolume: state.soundVolume,
 		setApiConfiguration: (value) => setState((prevState) => ({ ...prevState, apiConfiguration: value })),
 		setCustomInstructions: (value) => setState((prevState) => ({ ...prevState, customInstructions: value })),
 		setAlwaysAllowReadOnly: (value) => setState((prevState) => ({ ...prevState, alwaysAllowReadOnly: value })),
@@ -139,6 +142,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setShowAnnouncement: (value) => setState((prevState) => ({ ...prevState, shouldShowAnnouncement: value })),
 		setAllowedCommands: (value) => setState((prevState) => ({ ...prevState, allowedCommands: value })),
 		setSoundEnabled: (value) => setState((prevState) => ({ ...prevState, soundEnabled: value })),
+		setSoundVolume: (value) => setState((prevState) => ({ ...prevState, soundVolume: value })),
 		setDiffEnabled: (value) => setState((prevState) => ({ ...prevState, diffEnabled: value })),
 	}