react updates

This commit is contained in:
Andrew Pareles 2024-12-05 22:57:55 -08:00
parent a647530d77
commit a52eba91c9
4 changed files with 20 additions and 20 deletions

View file

@ -52,10 +52,10 @@
"./typings",
"./vs/**/*.ts",
"vscode-dts/vscode.proposed.*.d.ts",
"vscode-dts/vscode.d.ts"
"vscode-dts/vscode.d.ts",
// Void added these:
// "./vs/**/*.tsx",
// "./vs/workbench/contrib/void/browser/**.tsx",
// "./vs/**/*.d.mts",
]
}

View file

@ -19,7 +19,7 @@ import { IDisposable } from '../../../../../../../base/common/lifecycle.js';
import { ErrorDisplay } from './ErrorDisplay.js';
import { LLMMessageServiceParams } from '../../../../../../../platform/void/common/llmMessageTypes.js';
import { getCmdKey } from '../../../getCmdKey.js'
import { InputBox } from './inputs.js';
import { VoidInputBox } from './inputs.js';
import { HistoryInputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
// read files from VSCode
@ -295,7 +295,7 @@ export const SidebarChat = () => {
}}>
{/* input */}
<InputBox
<VoidInputBox
placeholder={`${getCmdKey()}+L to select`}
onChangeText={onChangeText}
inputBoxRef={inputBoxRef}

View file

@ -5,7 +5,7 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useConfigState, useService } from '../util/services.js';
import { IVoidConfigStateService, nonDefaultConfigFields, PartialVoidConfig, VoidConfig, VoidConfigField, VoidConfigInfo, SetFieldFnType, ConfigState } from '../../../registerConfig.js';
import { EnumInputBox, InputBox } from './inputs.js';
import { VoidSelectBox, VoidInputBox } from './inputs.js';
import { HistoryInputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
@ -18,6 +18,7 @@ const SettingOfFieldAndParam = ({ field, param, configState, configStateService
const { enumArr, defaultVal, description } = configStateService.voidConfigInfo[field][param]
const val = partialVoidConfig[field]?.[param] ?? defaultVal // current value of this item
const initValRef = useRef(val)
const updateState = useCallback((newValue: string) => {
configStateService.setField(field, param, newValue)
@ -28,13 +29,12 @@ const SettingOfFieldAndParam = ({ field, param, configState, configStateService
const selectBoxRef = useRef<SelectBox | null>(null);
const forceState = useCallback((newValue: string) => {
if (inputBoxRef.current) {
// inputBoxRef.current.addToHistory();
inputBoxRef.current.value = newValue;
}
if (selectBoxRef.current) {
selectBoxRef.current.select(enumArr?.indexOf(newValue) ?? 0);
}
updateState(newValue);
// updateState is called automatically when the change happens
}, [enumArr, updateState])
@ -54,9 +54,9 @@ const SettingOfFieldAndParam = ({ field, param, configState, configStateService
const inputElement = enumArr === undefined ?
// string
(<InputBox
(<VoidInputBox
onChangeText={updateState}
initVal={val}
initVal={initValRef.current}
multiline={false}
placeholder=''
inputBoxRef={inputBoxRef}
@ -69,9 +69,9 @@ const SettingOfFieldAndParam = ({ field, param, configState, configStateService
// />
:
// enum
(<EnumInputBox
(<VoidSelectBox
onChangeSelection={updateState}
initVal={val}
initVal={initValRef.current}
options={enumArr}
selectBoxRef={selectBoxRef}
/>)

View file

@ -1,13 +1,13 @@
import React, { useEffect, useRef } from 'react';
import { useService } from '../util/services.js';
import { HistoryInputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
import { defaultInputBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
import { SelectBox, unthemedSelectBoxStyles } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
export const InputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, multiline }: {
export const VoidInputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, multiline }: {
onChangeText: (value: string) => void;
placeholder: string;
inputBoxRef: React.MutableRefObject<HistoryInputBox | null>;
inputBoxRef: React.MutableRefObject<InputBox | null>;
multiline: boolean;
initVal: string;
}) => {
@ -19,7 +19,7 @@ export const InputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, mult
if (!containerRef.current) return;
// create and mount the HistoryInputBox
inputBoxRef.current = new HistoryInputBox(
inputBoxRef.current = new InputBox(
containerRef.current,
contextViewProvider,
{
@ -28,20 +28,20 @@ export const InputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, mult
inputBackground: 'transparent',
},
placeholder,
history: [initVal],
flexibleHeight: multiline,
flexibleMaxHeight: 500,
flexibleWidth: false,
}
);
inputBoxRef.current.value = initVal;
inputBoxRef.current.onDidChange((newStr) => {
console.log('CHANGE TEXT on inputbox', newStr)
onChangeText(newStr)
})
// cleanup
return () => {
if (inputBoxRef.current) {
@ -54,14 +54,14 @@ export const InputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, mult
inputBoxRef.current = null;
}
};
}, [inputBoxRef, onChangeText, placeholder, contextViewProvider, initVal, multiline]); // Empty dependency array since we only want to mount/unmount once
}, [inputBoxRef, contextViewProvider, placeholder, multiline, initVal, onChangeText]); // Empty dependency array since we only want to mount/unmount once
return <div ref={containerRef} className="w-full" />;
};
export const EnumInputBox = ({ onChangeSelection, initVal, selectBoxRef, options }: {
export const VoidSelectBox = ({ onChangeSelection, initVal, selectBoxRef, options }: {
onChangeSelection: (value: string) => void;
initVal: string;
selectBoxRef: React.MutableRefObject<SelectBox | null>;
@ -98,7 +98,7 @@ export const EnumInputBox = ({ onChangeSelection, initVal, selectBoxRef, options
}
}
};
}, [options, initVal, onChangeSelection, contextViewProvider]);
}, [options, initVal, onChangeSelection, contextViewProvider, selectBoxRef]);
return <div ref={containerRef} className="w-full" />;
};