Feat: Use shadcn-ui to build GenerateForm. #3221 (#5449)

### What problem does this PR solve?

Feat: Use shadcn-ui to build GenerateForm. #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,14 @@
 import { Form, InputNumber } from 'antd';
+import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './ui/form';
+import { Input } from './ui/input';
 
 const MessageHistoryWindowSizeItem = ({
   initialValue,
@@ -21,3 +30,24 @@ const MessageHistoryWindowSizeItem = ({
 };
 
 export default MessageHistoryWindowSizeItem;
+
+export function MessageHistoryWindowSizeFormField() {
+  const form = useFormContext();
+  const { t } = useTranslation();
+
+  return (
+    <FormField
+      control={form.control}
+      name={'message_history_window_size'}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('flow.messageHistoryWindowSize')}</FormLabel>
+          <FormControl>
+            <Input {...field} type={'number'}></Input>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

web/src/components/similarity-slider/index.tsx

@@ -52,10 +52,12 @@ export default SimilaritySlider;
 
 interface SimilaritySliderFormFieldProps {
   vectorSimilarityWeightName?: string;
+  isTooltipShown?: boolean;
 }
 
 export function SimilaritySliderFormField({
   vectorSimilarityWeightName = 'vector_similarity_weight',
+  isTooltipShown,
 }: SimilaritySliderFormFieldProps) {
   const form = useFormContext();
   const { t } = useTranslate('knowledgeDetails');
@@ -67,7 +69,9 @@ export function SimilaritySliderFormField({
         name={'similarity_threshold'}
         render={({ field }) => (
           <FormItem>
-            <FormLabel>{t('similarityThreshold')}</FormLabel>
+            <FormLabel tooltip={isTooltipShown && t('similarityThresholdTip')}>
+              {t('similarityThreshold')}
+            </FormLabel>
             <FormControl>
               <SingleFormSlider
                 {...field}
@@ -84,7 +88,11 @@ export function SimilaritySliderFormField({
         name={vectorSimilarityWeightName}
         render={({ field }) => (
           <FormItem>
-            <FormLabel>{t('vectorSimilarityWeight')}</FormLabel>
+            <FormLabel
+              tooltip={isTooltipShown && t('vectorSimilarityWeightTip')}
+            >
+              {t('vectorSimilarityWeight')}
+            </FormLabel>
             <FormControl>
               <SingleFormSlider
                 {...field}

web/src/components/ui/form.tsx

@@ -14,6 +14,8 @@ import {
 
 import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
+import { Info } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
 
 const Form = FormProvider;
 
@@ -88,17 +90,31 @@ FormItem.displayName = 'FormItem';
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    tooltip?: React.ReactNode;
+  }
+>(({ className, tooltip, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
   return (
     <Label
       ref={ref}
-      className={cn(error && 'text-destructive', className)}
+      className={cn(error && 'text-destructive', className, 'flex')}
       htmlFor={formItemId}
       {...props}
-    />
+    >
+      {props.children}
+      {tooltip && (
+        <Tooltip>
+          <TooltipTrigger>
+            <Info className="size-3 ml-2" />
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </Label>
   );
 });
 FormLabel.displayName = 'FormLabel';