@@ -18,6 +18,7 @@ import { Stack } from "components/Stack/Stack";
1818import { Switch } from "components/Switch/Switch" ;
1919import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete" ;
2020import { type FormikContextType , useFormik } from "formik" ;
21+ import { useDebouncedFunction } from "hooks/debounce" ;
2122import { ArrowLeft } from "lucide-react" ;
2223import {
2324DynamicParameter ,
@@ -209,67 +210,60 @@ export const CreateWorkspacePageViewExperimental: FC<
209210parameters ,
210211] ) ;
211212
212- const [ debouncedTimer , setDebouncedTimer ] = useState < ReturnType <
213- typeof setTimeout
214- > | null > ( null ) ;
215-
216- const handleChange = async (
217- value :string ,
218- parameterField :string ,
213+ const sendDynamicParamsRequest = (
219214parameter :PreviewParameter ,
215+ value :string ,
220216) => {
221- // Update form value immediately for all types
222- await form . setFieldValue ( parameterField , {
223- name :parameter . form_type ,
224- value,
217+ const formInputs = Object . fromEntries (
218+ form . values . rich_parameter_values ?. map ( ( value ) => {
219+ return [ value . name , value . value ] ;
220+ } ) ?? [ ] ,
221+ ) ;
222+ // Update the input for the changed parameter
223+ formInputs [ parameter . name ] = value ;
224+
225+ setWSResponseId ( ( prevId ) => {
226+ const newId = prevId + 1 ;
227+ const request :DynamicParametersRequest = {
228+ id :newId ,
229+ inputs :formInputs ,
230+ } ;
231+ sendMessage ( request ) ;
232+ return newId ;
225233} ) ;
234+ } ;
226235
227- // Create the request object
228- const createRequest = ( ) => {
229- const newInputs = Object . fromEntries (
230- form . values . rich_parameter_values ?. map ( ( value ) => {
231- return [ value . name , value . value ] ;
232- } ) ?? [ ] ,
233- ) ;
234- // Update the input for the changed parameter
235- newInputs [ parameter . name ] = value ;
236-
237- setWSResponseId ( ( prevId ) => {
238- const newId = prevId + 1 ;
239- const request :DynamicParametersRequest = {
240- id :newId ,
241- inputs :newInputs ,
242- } ;
243- sendMessage ( request ) ;
244- return newId ;
236+ const { debounced :handleChangeDebounced } = useDebouncedFunction (
237+ async (
238+ parameter :PreviewParameter ,
239+ parameterField :string ,
240+ value :string ,
241+ ) => {
242+ await form . setFieldValue ( parameterField , {
243+ name :parameter . form_type ,
244+ value,
245245} ) ;
246- } ;
247-
248- // Clear any existing timer
249- if ( debouncedTimer ) {
250- clearTimeout ( debouncedTimer ) ;
251- }
246+ sendDynamicParamsRequest ( parameter , value ) ;
247+ } ,
248+ 500 ,
249+ ) ;
252250
253- // For input type, debounce the sendMessage
254- if ( parameter . form_type === "input" ) {
255- const timer = setTimeout ( ( ) => {
256- createRequest ( ) ;
257- } , 1050 ) ;
258- setDebouncedTimer ( timer ) ;
251+ const handleChange = async (
252+ parameter :PreviewParameter ,
253+ parameterField :string ,
254+ value :string ,
255+ ) => {
256+ if ( parameter . form_type === "input" || parameter . form_type === "textarea" ) {
257+ handleChangeDebounced ( parameter , parameterField , value ) ;
259258} else {
260- // For all other form control types (checkbox, select, etc.), send immediately
261- createRequest ( ) ;
259+ await form . setFieldValue ( parameterField , {
260+ name :parameter . form_type ,
261+ value,
262+ } ) ;
263+ sendDynamicParamsRequest ( parameter , value ) ;
262264}
263265} ;
264266
265- useEffect ( ( ) => {
266- return ( ) => {
267- if ( debouncedTimer ) {
268- clearTimeout ( debouncedTimer ) ;
269- }
270- } ;
271- } , [ debouncedTimer ] ) ;
272-
273267return (
274268< >
275269< div className = "absolute sticky top-5 ml-10" >
@@ -493,7 +487,7 @@ export const CreateWorkspacePageViewExperimental: FC<
493487key = { parameter . name }
494488parameter = { parameter }
495489onChange = { ( value ) =>
496- handleChange ( value , parameterField , parameter )
490+ handleChange ( parameter , parameterField , value )
497491}
498492disabled = { isDisabled }
499493isPreset = { isPresetParameter }