update init state properly

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx

@@ -300,7 +300,6 @@ export const SidebarChat = () => {
 								onChangeText={onChangeText}
 								onCreateInstance={inputBoxRef}
 								multiline={true}
-								initVal=''
 							/>
 
 							{/* <textarea

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarModelSettings.tsx

@@ -24,7 +24,7 @@ export const SidebarModelSettingsForFeature = ({ featureName }: { featureName: F
 
 	return <>
 		<h1>Settings - {featureName}</h1>
-		{models.map(([providerName,model], i) => <span key={i}>{providerName} - {model}</span>)}
+		{models.map(([providerName,model], i) => <p key={i}>{providerName} - {model}</p>)}
 	</>
 }
 

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarProviderSettings.tsx

@@ -3,28 +3,43 @@
  *  Void Editor additions licensed under the AGPLv3 License.
  *--------------------------------------------------------------------------------------------*/
 
-import React, { Fragment, useCallback, useRef } from 'react'
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { displayInfoOfSettingName, ProviderName, providerNames, ProviderSettingName, VoidProviderState } from '../../../../../../../platform/void/common/configTypes.js'
 import { VoidCheckBox, VoidInputBox, VoidSelectBox } from './inputs.js'
 import { useConfigState, useService } from '../util/services.js'
+import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'
 
 
-const Setting = ({ val, providerName, settingName }: { val: string, providerName: ProviderName, settingName: any }) => {
+const Setting = ({ providerName, settingName }: { providerName: ProviderName, settingName: any }) => {
 
 	const { title, type, placeholder } = displayInfoOfSettingName(providerName, settingName)
 	const voidConfigService = useService('configStateService')
 
-	const initValRef = useRef(val)
+	const instanceRef = useRef<InputBox | null>(null)
+
+	useEffect(() => {
+		// this is really just to sync the state on initial mount, when init value hasn't been set yet
+		const syncState = () => {
+			if (!instanceRef.current) return
+			// @ts-ignore
+			const stateVal = voidConfigService.state[providerName][settingName]
+			if (instanceRef.current.value !== stateVal)
+				instanceRef.current.value = stateVal
+		}
+		syncState()
+		const disposable = voidConfigService.onDidChangeState(syncState)
+		return () => disposable.dispose()
+	}, [instanceRef, voidConfigService])
 
 	return <>
 		<h2>{title}</h2>
 		{<VoidInputBox
-			initVal={initValRef.current}
 			placeholder={placeholder}
 			onChangeText={useCallback((newVal) => {
 				voidConfigService.setState(providerName, settingName, newVal)
 			}, [voidConfigService, providerName, settingName])
 			}
+			onCreateInstance={instanceRef}
 			multiline={false}
 		/>}
 	</>
@@ -40,8 +55,8 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) =
 		<h1>{providerName}</h1>
 
 		{/* other settings (e.g. api key) */}
-		{Object.entries(others).map(([settingName, val], i) => {
-			return <Setting key={settingName} val={val} providerName={providerName} settingName={settingName} />
+		{Object.keys(others).map((settingName, i) => {
+			return <Setting key={settingName} providerName={providerName} settingName={settingName} />
 		})}
 
 		<h2>{'Models'}</h2>

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx

@@ -35,13 +35,14 @@ export const WidgetComponent = <CtorParams extends any[], Instance>({ ctor, prop
 
 
 
-export const VoidInputBox = ({ onChangeText, onCreateInstance, initVal, placeholder, multiline }: {
+export const VoidInputBox = ({ onChangeText, onCreateInstance, placeholder, multiline }: {
 	onChangeText: (value: string) => void;
 	onCreateInstance?: { current: InputBox | null } | ((instance: InputBox) => void | IDisposable[]);
 	placeholder: string;
 	multiline: boolean;
-	initVal: string;
 }) => {
+
+
 	const contextViewProvider = useService('contextViewService');
 
 
@@ -66,7 +67,6 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, initVal, placehol
 			instance.element.remove()
 		}, [])}
 		onCreateInstance={useCallback((instance: InputBox) => {
-			instance.value = initVal
 			const disposables: IDisposable[] = []
 			disposables.push(
 				instance.onDidChange((newText) => onChangeText(newText))
@@ -79,7 +79,7 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, initVal, placehol
 				onCreateInstance.current = instance
 			}
 			return disposables
-		}, [initVal, onChangeText, onCreateInstance])
+		}, [onChangeText, onCreateInstance])
 		}
 	/>
 };