ui(web): update node widgets

Author: leonardcser

apps/web/src/components/workflow/input-edit-popover.tsx

@@ -2,7 +2,7 @@ import { Position } from "@xyflow/react";
 import File from "lucide-react/icons/file";
 import Upload from "lucide-react/icons/upload";
 import XCircleIcon from "lucide-react/icons/x-circle";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -57,6 +57,9 @@ export function InputEditPopover({
   const [isUploading, setIsUploading] = useState(false);
   const [uploadError, setUploadError] = useState<string | null>(null);
 
+  // Debounce ref for text inputs
+  const debounceTimeoutRef = React.useRef<number | null>(null);
+
   // Helper function to create object URL for previews and downloads
   const getObjectUrl = (objectRef: any): string | null => {
     if (!isObjectReference(objectRef)) return null;
@@ -87,12 +90,32 @@ export function InputEditPopover({
     setUploadError(null);
   }, [input]);
 
+  // Cleanup debounce timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current !== null) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+
   const handleInputChange = (value: string) => {
     if (!input || readonly || !updateNodeData) return;
 
+    // Update local state immediately for responsive UI
     setInputValue(value);
-    const typedValue = convertValueByType(value, input.type);
-    updateNodeInput(nodeId, input.id, typedValue, nodeInputs, updateNodeData);
+
+    // Clear any pending debounce
+    if (debounceTimeoutRef.current !== null) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    // Debounce the actual node data update
+    debounceTimeoutRef.current = window.setTimeout(() => {
+      const typedValue = convertValueByType(value, input.type);
+      updateNodeInput(nodeId, input.id, typedValue, nodeInputs, updateNodeData);
+      debounceTimeoutRef.current = null;
+    }, 300);
   };
 
   const handleClearValue = () => {

apps/web/src/components/workflow/widgets/input-text.tsx

@@ -1,8 +1,10 @@
+import { useEffect, useRef, useState } from "react";
+
 import { Input } from "@/components/ui/input";
 import { cn } from "@/utils/utils";
 
 import type { BaseWidgetProps } from "./widget";
-import { createWidget, getInputValue } from "./widget";
+import { createWidget, getInputValue, useDebouncedChange } from "./widget";
 
 interface InputTextWidgetProps extends BaseWidgetProps {
   value: string;
@@ -17,13 +19,42 @@ function InputTextWidget({
   compact = false,
   readonly = false,
 }: InputTextWidgetProps) {
+  // Use local state for immediate UI updates
+  const [localValue, setLocalValue] = useState(value || "");
+  const isUserTypingRef = useRef(false);
+
+  // Debounce the actual node update
+  const { debouncedOnChange } = useDebouncedChange(onChange, 300);
+
+  // Sync local state when prop value changes (e.g., from external updates)
+  // but only if user is not currently typing
+  useEffect(() => {
+    if (!isUserTypingRef.current) {
+      setLocalValue(value || "");
+    }
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!readonly) {
+      const newValue = e.target.value;
+      isUserTypingRef.current = true;
+      setLocalValue(newValue);
+      debouncedOnChange(newValue);
+
+      // Reset typing flag after debounce completes
+      setTimeout(() => {
+        isUserTypingRef.current = false;
+      }, 350);
+    }
+  };
+
   return (
-    <div className={cn("p-2", className)}>
+    <div className={cn(compact ? "p-1" : "p-2", className)}>
       <Input
-        value={value || ""}
-        onChange={(e) => !readonly && onChange(e.target.value)}
+        value={localValue}
+        onChange={handleChange}
         placeholder={placeholder || "Enter text..."}
-        className={cn(compact && "text-sm h-8")}
+        className={cn(compact && "text-[0.6rem] leading-tight h-6 px-1.5")}
         disabled={readonly}
       />
     </div>

apps/web/src/components/workflow/widgets/number-input.tsx

@@ -1,8 +1,10 @@
+import { useEffect, useRef, useState } from "react";
+
 import { Input } from "@/components/ui/input";
 import { cn } from "@/utils/utils";
 
 import type { BaseWidgetProps } from "./widget";
-import { createWidget, getInputValue } from "./widget";
+import { createWidget, getInputValue, useDebouncedChange } from "./widget";
 
 interface NumberInputWidgetProps extends BaseWidgetProps {
   value: number;
@@ -23,26 +25,52 @@ function NumberInputWidget({
   compact = false,
   readonly = false,
 }: NumberInputWidgetProps) {
+  // Use local state for immediate UI updates
+  const [localValue, setLocalValue] = useState(value?.toString() || "");
+  const isUserTypingRef = useRef(false);
+
+  // Debounce the actual node update
+  const { debouncedOnChange } = useDebouncedChange(onChange, 300);
+
+  // Sync local state when prop value changes (e.g., from external updates)
+  // but only if user is not currently typing
+  useEffect(() => {
+    if (!isUserTypingRef.current) {
+      setLocalValue(value?.toString() || "");
+    }
+  }, [value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (readonly) return;
 
-    const val = parseFloat(e.target.value);
+    const newValue = e.target.value;
+    isUserTypingRef.current = true;
+    setLocalValue(newValue);
+
+    const val = parseFloat(newValue);
     if (!isNaN(val)) {
-      onChange(val);
+      debouncedOnChange(val);
     }
+
+    // Reset typing flag after debounce completes
+    setTimeout(() => {
+      isUserTypingRef.current = false;
+    }, 350);
   };
 
   return (
-    <div className={cn("p-2", className)}>
+    <div className={cn(compact ? "p-1" : "p-2", className)}>
       <Input
         type="number"
-        value={value || ""}
+        value={localValue}
         onChange={handleChange}
         min={min}
         max={max}
         step={step}
         placeholder={placeholder || "Enter number..."}
-        className={cn(compact && "h-8 text-sm")}
+        className={cn(
+          compact && "h-6 text-[0.6rem] leading-tight px-1.5 py-0.5"
+        )}
         disabled={readonly}
       />
     </div>

apps/web/src/components/workflow/widgets/slider.tsx

@@ -1,8 +1,10 @@
+import { useEffect, useRef, useState } from "react";
+
 import { Slider } from "@/components/ui/slider";
 import { cn } from "@/utils/utils";
 
 import type { BaseWidgetProps } from "./widget";
-import { createWidget, getInputValue } from "./widget";
+import { createWidget, getInputValue, useDebouncedChange } from "./widget";
 
 interface SliderWidgetProps extends BaseWidgetProps {
   value: number;
@@ -21,26 +23,54 @@ function SliderWidget({
   compact = false,
   readonly = false,
 }: SliderWidgetProps) {
+  // Use local state for immediate UI updates
+  const [localValue, setLocalValue] = useState(value);
+  const isUserDraggingRef = useRef(false);
+
+  // Debounce the actual node update
+  const { debouncedOnChange } = useDebouncedChange(onChange, 100);
+
+  // Sync local state when prop value changes (e.g., from external updates)
+  // but only if user is not currently dragging
+  useEffect(() => {
+    if (!isUserDraggingRef.current) {
+      setLocalValue(value);
+    }
+  }, [value]);
+
   const handleValueChange = (values: number[]) => {
     if (values.length > 0 && !readonly) {
-      onChange(values[0]);
+      const newValue = values[0];
+      isUserDraggingRef.current = true;
+      setLocalValue(newValue);
+      debouncedOnChange(newValue);
+
+      // Reset dragging flag after debounce completes
+      setTimeout(() => {
+        isUserDraggingRef.current = false;
+      }, 150);
     }
   };
 
   return (
-    <div className={cn("space-y-2 p-2", className)}>
+    <div className={cn(compact ? "space-y-1 p-1" : "space-y-2 p-2", className)}>
       <Slider
         min={min}
         max={max}
         step={step}
-        value={[value]}
+        value={[localValue]}
         onValueChange={handleValueChange}
-        className={cn("py-4", compact && "py-2")}
+        className={cn(compact ? "py-2" : "py-4")}
         disabled={readonly}
       />
-      <div className="flex justify-between text-xs text-neutral-500">
+      <div
+        className={cn(
+          "flex justify-between text-neutral-500",
+          compact ? "text-[0.6rem] leading-tight" : "text-xs"
+        )}
+      >
         <span>{min}</span>
-        <span>Value: {value}</span>
+        <span>Value: {localValue}</span>
         <span>{max}</span>
       </div>
     </div>

apps/web/src/components/workflow/widgets/text-area.tsx

@@ -1,8 +1,10 @@
+import { useEffect, useRef, useState } from "react";
+
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/utils/utils";
 
 import type { BaseWidgetProps } from "./widget";
-import { createWidget, getInputValue } from "./widget";
+import { createWidget, getInputValue, useDebouncedChange } from "./widget";
 
 interface TextAreaWidgetProps extends BaseWidgetProps {
   value: string;
@@ -19,19 +21,44 @@ function TextAreaWidget({
   compact = false,
   readonly = false,
 }: TextAreaWidgetProps) {
+  // Use local state for immediate UI updates
+  const [localValue, setLocalValue] = useState(value || "");
+  const isUserTypingRef = useRef(false);
+
+  // Debounce the actual node update
+  const { debouncedOnChange } = useDebouncedChange(onChange, 300);
+
+  // Sync local state when prop value changes (e.g., from external updates)
+  // but only if user is not currently typing
+  useEffect(() => {
+    if (!isUserTypingRef.current) {
+      setLocalValue(value || "");
+    }
+  }, [value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     if (!readonly) {
-      onChange(e.target.value);
+      const newValue = e.target.value;
+      isUserTypingRef.current = true;
+      setLocalValue(newValue);
+      debouncedOnChange(newValue);
+
+      // Reset typing flag after debounce completes
+      setTimeout(() => {
+        isUserTypingRef.current = false;
+      }, 350);
     }
   };
 
   return (
-    <div className={cn("p-2", className)}>
+    <div className={cn(compact ? "p-1" : "p-2", className)}>
       <Textarea
-        value={value || ""}
+        value={localValue}
         onChange={handleChange}
         placeholder={placeholder || "Enter text..."}
-        className={cn(compact && "min-h-[100px]")}
+        className={cn(
+          compact && "min-h-[100px] text-[0.6rem] leading-tight p-1.5"
+        )}
         disabled={readonly}
         rows={compact ? undefined : rows}
       />

apps/web/src/components/workflow/widgets/widget.ts

@@ -1,3 +1,5 @@
+import { useCallback, useEffect, useRef } from "react";
+
 import type { WorkflowParameter } from "../workflow-types";
 
 /**
@@ -45,3 +47,50 @@ export function getInputValue<T = any>(
   const input = inputs.find((i) => i.id === id);
   return input?.value !== undefined ? (input.value as T) : defaultValue;
 }
+
+/**
+ * Hook to debounce onChange calls to prevent excessive re-renders.
+ * Updates immediately in the UI but debounces the actual node data update.
+ */
+export function useDebouncedChange(
+  onChange: (value: any) => void,
+  delay = 300
+) {
+  const timeoutRef = useRef<number | null>(null);
+  const previousValueRef = useRef<any>(undefined);
+
+  // Clear timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const debouncedOnChange = useCallback(
+    (value: any) => {
+      // Clear any pending timeout
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      // Schedule the update
+      timeoutRef.current = window.setTimeout(() => {
+        // Only call onChange if the value actually changed
+        if (value !== previousValueRef.current) {
+          previousValueRef.current = value;
+          onChange(value);
+        }
+        timeoutRef.current = null;
+      }, delay);
+    },
+    [onChange, delay]
+  );
+
+  // Return both debounced and immediate versions
+  return {
+    debouncedOnChange,
+    immediateOnChange: onChange,
+  };
+}