Fix: The minimum size of the historical message window for the classification operator is 1. #12778 (#12779)

### What problem does this PR solve?

Fix: The minimum size of the historical message window for the
classification operator is 1. #12778

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/message-history-window-size-item.tsx

@@ -1,5 +1,6 @@
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import NumberInput from './originui/number-input';
 import {
   FormControl,
   FormField,
@@ -7,9 +8,13 @@ import {
   FormLabel,
   FormMessage,
 } from './ui/form';
-import { NumberInput } from './ui/input';
 
-export function MessageHistoryWindowSizeFormField() {
+type MessageHistoryWindowSizeFormFieldProps = {
+  min?: number;
+};
+export function MessageHistoryWindowSizeFormField({
+  min,
+}: MessageHistoryWindowSizeFormFieldProps) {
   const form = useFormContext();
   const { t } = useTranslation();
 
@@ -23,7 +28,7 @@ export function MessageHistoryWindowSizeFormField() {
             {t('flow.messageHistoryWindowSize')}
           </FormLabel>
           <FormControl>
-            <NumberInput {...field}></NumberInput>
+            <NumberInput {...field} min={min} className="w-full"></NumberInput>
           </FormControl>
           <FormMessage />
         </FormItem>

web/src/components/originui/number-input.tsx

@@ -1,5 +1,13 @@
+import { isNumber, trim } from 'lodash';
 import { MinusIcon, PlusIcon } from 'lucide-react';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {
+  FocusEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 interface NumberInputProps {
   className?: string;
@@ -18,10 +26,12 @@ const NumberInput: React.FC<NumberInputProps> = ({
   min = 0,
   max = Infinity,
 }) => {
-  const [value, setValue] = useState<number>(() => {
+  const [value, setValue] = useState<number | ''>(() => {
     return initialValue ?? 0;
   });
 
+  const valueRef = useRef<number>();
+
   useEffect(() => {
     if (initialValue !== undefined) {
       setValue(initialValue);
@@ -29,13 +39,16 @@ const NumberInput: React.FC<NumberInputProps> = ({
   }, [initialValue]);
 
   const handleDecrement = () => {
-    if (value > 0) {
+    if (isNumber(value) && value > min) {
       setValue(value - 1);
       onChange?.(value - 1);
     }
   };
 
   const handleIncrement = () => {
+    if (!isNumber(value)) {
+      return;
+    }
     if (value > max - 1) {
       return;
     }
@@ -44,9 +57,19 @@ const NumberInput: React.FC<NumberInputProps> = ({
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = Number(e.target.value);
+    const currentValue = e.target.value;
+    const newValue = Number(currentValue);
+
+    if (trim(currentValue) === '') {
+      if (isNumber(value)) {
+        valueRef.current = value;
+      }
+      setValue('');
+      return;
+    }
+
     if (!isNaN(newValue)) {
-      if (newValue > max) {
+      if (newValue > max || newValue < min) {
         return;
       }
       setValue(newValue);
@@ -54,12 +77,16 @@ const NumberInput: React.FC<NumberInputProps> = ({
     }
   };
 
-  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // If the input value is not a number, the input is not allowed
-    if (!/^\d*$/.test(e.target.value)) {
-      e.preventDefault();
+  const handleBlur: FocusEventHandler<HTMLInputElement> = useCallback(() => {
+    if (isNumber(value)) {
+      onChange?.(value);
+    } else {
+      const previousValue = valueRef.current ?? min;
+      setValue(previousValue);
+      onChange?.(previousValue);
     }
-  };
+  }, [min, onChange, value]);
+
   const style = useMemo(
     () => ({
       height: height ? `${height.toString().replace('px', '')}px` : 'auto',
@@ -82,8 +109,8 @@ const NumberInput: React.FC<NumberInputProps> = ({
       <input
         type="text"
         value={value}
-        onInput={handleInput}
         onChange={handleChange}
+        onBlur={handleBlur}
         className="w-full flex-1 text-center bg-transparent focus:outline-none"
         style={style}
         min={min}

web/src/components/ui/input.tsx

@@ -206,6 +206,8 @@ export const InnerBlurInput = React.forwardRef<
   );
 });
 
+InnerBlurInput.displayName = 'BlurInput';
+
 if (process.env.NODE_ENV !== 'production') {
   InnerBlurInput.whyDidYouRender = true;
 }

web/src/pages/agent/form/categorize-form/index.tsx

@@ -37,7 +37,9 @@ function CategorizeForm({ node }: INextOperatorForm) {
           <QueryVariable></QueryVariable>
           <LargeModelFormField></LargeModelFormField>
         </FormContainer>
-        <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
+        <MessageHistoryWindowSizeFormField
+          min={1}
+        ></MessageHistoryWindowSizeFormField>
         <DynamicCategorize nodeId={node?.id}></DynamicCategorize>
         <Output list={outputList}></Output>
       </FormWrapper>