diff --git a/src/vs/platform/void/common/configTypes.ts b/src/vs/platform/void/common/configTypes.ts index a812e4a7..1a51e9cb 100644 --- a/src/vs/platform/void/common/configTypes.ts +++ b/src/vs/platform/void/common/configTypes.ts @@ -250,17 +250,17 @@ export const descOfSettingName = (providerName: ProviderName, settingName: Union export const inputTypeOfSettingName = (settingName: UnionOfKeys) => { if (settingName === 'apiKey') - return 'string' + return 'string' as const else if (settingName === 'endpoint') - return 'string' + return 'string' as const else if (settingName === 'maxTokens') - return 'number' + return 'number' as const else if (settingName === 'model') - return 'string' + return 'string' as const else if (settingName === 'enabled') - return 'boolean' + return 'boolean' as const else if (settingName === 'models') - return 'string[]?' + return 'string[]?' as const throw new Error(`inputType: Unknown setting name: "${settingName}"`) } diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarProviderSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarProviderSettings.tsx index d64031ec..074ec399 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarProviderSettings.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarProviderSettings.tsx @@ -4,8 +4,8 @@ *--------------------------------------------------------------------------------------------*/ import React, { Fragment } from 'react' -import { descOfSettingName, ProviderName, providerNames, voidProviderDefaults } from '../../../../../../../platform/void/common/configTypes.js' -import { VoidInputBox, VoidSelectBox } from './inputs.js' +import { descOfSettingName, inputTypeOfSettingName, ProviderName, providerNames, voidProviderDefaults } from '../../../../../../../platform/void/common/configTypes.js' +import { VoidCheckBox, VoidInputBox, VoidSelectBox } from './inputs.js' import { useConfigState, useService } from '../util/services.js' const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) => { @@ -25,13 +25,22 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) = return

{descOfSettingName(providerName, sName)}

- { () => { voidConfigService.setState(providerName, sName, newVal) } }} - placeholder={settingName} - multiline={false} - inputBoxRef={{ current: null }} - /> + { + inputTypeOfSettingName(sName) === 'boolean' ? + { voidConfigService.setState(providerName, sName, newVal ? 'true' : 'false') }} + label={settingName} + checkboxRef={{ current: null }} + /> + : + { () => { voidConfigService.setState(providerName, sName, newVal) } }} + placeholder={settingName} + multiline={false} + inputBoxRef={{ current: null }} + />}
})} @@ -45,8 +54,7 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) = selectBoxRef={{ current: null }} />} -

{'Enabled'}

- todo + } diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx index 8629d343..731b7233 100644 --- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx +++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx @@ -1,8 +1,11 @@ import React, { useEffect, useRef } from 'react'; import { useService } from '../util/services.js'; import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'; -import { defaultInputBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js'; +import { defaultCheckboxStyles, defaultInputBoxStyles, defaultToggleStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js'; import { SelectBox, unthemedSelectBoxStyles } from '../../../../../../../base/browser/ui/selectBox/selectBox.js'; +import { Checkbox, Toggle } from '../../../../../../../base/browser/ui/toggle/toggle.js'; + +// settingitem export const VoidInputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, multiline }: { onChangeText: (value: string) => void; @@ -102,3 +105,49 @@ export const VoidSelectBox = ({ onChangeSelection, initVal, selectBoxRef, option return
; }; + + + + + +export const VoidCheckBox = ({ onChangeChecked, initVal, label, checkboxRef, }: { + onChangeChecked: (checked: boolean) => void; + initVal: boolean; + checkboxRef: React.MutableRefObject; + label: string; +}) => { + const containerRef = useRef(null); + + useEffect(() => { + if (!containerRef.current) return; + + // Create and mount the Checkbox using VSCode's implementation + checkboxRef.current = new Toggle({ + title: label, + isChecked: initVal, + ...defaultToggleStyles + }); + + containerRef.current.appendChild(checkboxRef.current.domNode); + + checkboxRef.current.onChange(checked => { + console.log('CHANGE checked state on checkbox', checked); + onChangeChecked(checked); + }); + + // cleanup + return () => { + if (checkboxRef.current) { + checkboxRef.current.dispose(); + if (containerRef.current) { + while (containerRef.current.firstChild) { + containerRef.current.removeChild(containerRef.current.firstChild); + } + } + checkboxRef.current = null; + } + }; + }, [checkboxRef, label, initVal, onChangeChecked]); + + return
; +};