Feat: Add agent advanced settings form #3221 (#8592)

### What problem does this PR solve?

Feat: Add agent advanced settings form #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

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

@@ -1,5 +1,4 @@
 import { Form, InputNumber } from 'antd';
-import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import {
@@ -9,7 +8,7 @@ import {
   FormLabel,
   FormMessage,
 } from './ui/form';
-import { BlurInput, Input } from './ui/input';
+import { NumberInput } from './ui/input';
 
 const MessageHistoryWindowSizeItem = ({
   initialValue,
@@ -32,20 +31,10 @@ const MessageHistoryWindowSizeItem = ({
 
 export default MessageHistoryWindowSizeItem;
 
-type MessageHistoryWindowSizeFormFieldProps = {
-  useBlurInput?: boolean;
-};
-
-export function MessageHistoryWindowSizeFormField({
-  useBlurInput = false,
-}: MessageHistoryWindowSizeFormFieldProps) {
+export function MessageHistoryWindowSizeFormField() {
   const form = useFormContext();
   const { t } = useTranslation();
 
-  const NextInput = useMemo(() => {
-    return useBlurInput ? BlurInput : Input;
-  }, [useBlurInput]);
-
   return (
     <FormField
       control={form.control}
@@ -56,7 +45,7 @@ export function MessageHistoryWindowSizeFormField({
             {t('flow.messageHistoryWindowSize')}
           </FormLabel>
           <FormControl>
-            <NextInput {...field} type={'number'}></NextInput>
+            <NumberInput {...field}></NumberInput>
           </FormControl>
           <FormMessage />
         </FormItem>

web/src/components/ui/input.tsx

@@ -110,3 +110,18 @@ if (process.env.NODE_ENV !== 'production') {
 export const BlurInput = React.memo(InnerBlurInput);
 
 export { ExpandedInput, Input, SearchInput };
+
+type NumberInputProps = { onChange?(value: number): void } & InputProps;
+
+export const NumberInput = ({ onChange, ...props }: NumberInputProps) => {
+  return (
+    <Input
+      type="number"
+      onChange={(ev) => {
+        const value = ev.target.value;
+        onChange?.(value === '' ? 0 : Number(value)); // convert to number
+      }}
+      {...props}
+    ></Input>
+  );
+};

web/src/components/ui/sheet.tsx

@@ -81,7 +81,7 @@ const SheetContent = React.forwardRef<
     </SheetPortal>
   ),
 );
-SheetContent.displayName = SheetPrimitive.Content.displayName;
+SheetContent.displayName = SheetPrimitive.Content.displayName || 'SheetContent';
 
 const SheetHeader = ({
   className,