Feat: Add FormContainer component #3221 (#7588)

### What problem does this PR solve?

Feat: Add FormContainer component #3221

### Type of change


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

web/src/components/chunk-method-dialog/dynamic-page-range.tsx

@@ -13,6 +13,7 @@ import { Input } from '@/components/ui/input';
 import { Plus, Trash2 } from 'lucide-react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { Separator } from '../ui/separator';
 
 export function DynamicPageRange() {
   const { t } = useTranslation();
@@ -31,7 +32,7 @@ export function DynamicPageRange() {
       {fields.map((field, index) => {
         const typeField = `parser_config.pages.${index}.from`;
         return (
-          <div key={field.id} className="flex items-center gap-1">
+          <div key={field.id} className="flex items-center gap-2 pt-2">
             <FormField
               control={form.control}
               name={typeField}
@@ -42,6 +43,7 @@ export function DynamicPageRange() {
                     <Input
                       type="number"
                       placeholder={t('common.pleaseInput')}
+                      className="!m-0"
                       {...field}
                     />
                   </FormControl>
@@ -49,6 +51,7 @@ export function DynamicPageRange() {
                 </FormItem>
               )}
             />
+            <Separator className="w-3 "></Separator>
             <FormField
               control={form.control}
               name={`parser_config.pages.${index}.to`}
@@ -59,6 +62,7 @@ export function DynamicPageRange() {
                     <Input
                       type="number"
                       placeholder={t('common.pleaseInput')}
+                      className="!m-0"
                       {...field}
                     />
                   </FormControl>
@@ -75,9 +79,8 @@ export function DynamicPageRange() {
       })}
       <Button
         onClick={() => append({ from: 1, to: 100 })}
-        className="mt-4"
+        className="mt-4 border-dashed w-full"
         variant={'outline'}
-        size={'sm'}
         type="button"
       >
         <Plus />

web/src/components/chunk-method-dialog/index.tsx

@@ -30,10 +30,10 @@ import {
   AutoKeywordsFormField,
   AutoQuestionsFormField,
 } from '../auto-keywords-form-field';
-import { DatasetConfigurationContainer } from '../dataset-configuration-container';
 import { DelimiterFormField } from '../delimiter-form-field';
 import { EntityTypesFormField } from '../entity-types-form-field';
 import { ExcelToHtmlFormField } from '../excel-to-html-form-field';
+import { FormContainer } from '../form-container';
 import { LayoutRecognizeFormField } from '../layout-recognize-form-field';
 import { MaxTokenNumberFormField } from '../max-token-number-from-field';
 import {
@@ -242,46 +242,50 @@ export function ChunkMethodDialog({
             className="space-y-6 max-h-[70vh] overflow-auto"
             id={FormId}
           >
-            <FormField
-              control={form.control}
-              name="parser_id"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('knowledgeDetails.chunkMethod')}</FormLabel>
-                  <FormControl>
-                    <RAGFlowSelect
-                      {...field}
-                      options={parserList}
-                    ></RAGFlowSelect>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            {showPages && <DynamicPageRange></DynamicPageRange>}
-            {showPages && layoutRecognize && (
+            <FormContainer>
               <FormField
                 control={form.control}
-                name="parser_config.task_page_size"
+                name="parser_id"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel tooltip={t('knowledgeDetails.taskPageSizeTip')}>
-                      {t('knowledgeDetails.taskPageSize')}
-                    </FormLabel>
+                    <FormLabel>{t('knowledgeDetails.chunkMethod')}</FormLabel>
                     <FormControl>
-                      <Input
+                      <RAGFlowSelect
                         {...field}
-                        type={'number'}
-                        min={1}
-                        max={128}
-                      ></Input>
+                        options={parserList}
+                      ></RAGFlowSelect>
                     </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
-            )}
-            <DatasetConfigurationContainer
+              {showPages && <DynamicPageRange></DynamicPageRange>}
+              {showPages && layoutRecognize && (
+                <FormField
+                  control={form.control}
+                  name="parser_config.task_page_size"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel
+                        tooltip={t('knowledgeDetails.taskPageSizeTip')}
+                      >
+                        {t('knowledgeDetails.taskPageSize')}
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          type={'number'}
+                          min={1}
+                          max={128}
+                        ></Input>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+            </FormContainer>
+            <FormContainer
               show={showOne || showMaxTokenNumber}
               className="space-y-3"
             >
@@ -298,8 +302,8 @@ export function ChunkMethodDialog({
                   <DelimiterFormField></DelimiterFormField>
                 </>
               )}
-            </DatasetConfigurationContainer>
-            <DatasetConfigurationContainer
+            </FormContainer>
+            <FormContainer
               show={showAutoKeywords(selectedTag) || showExcelToHtml}
               className="space-y-3"
             >
@@ -310,13 +314,13 @@ export function ChunkMethodDialog({
                 </>
               )}
               {showExcelToHtml && <ExcelToHtmlFormField></ExcelToHtmlFormField>}
-            </DatasetConfigurationContainer>
+            </FormContainer>
             {showRaptorParseConfiguration(
               selectedTag as DocumentParserType,
             ) && (
-              <DatasetConfigurationContainer>
+              <FormContainer>
                 <RaptorFormFields></RaptorFormFields>
-              </DatasetConfigurationContainer>
+              </FormContainer>
             )}
             {showGraphRagItems(selectedTag as DocumentParserType) &&
               useGraphRag && <UseGraphRagFormField></UseGraphRagFormField>}

web/src/components/form-container.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/utils';
+import { PropsWithChildren } from 'react';
+
+type FormContainerProps = {
+  className?: string;
+  show?: boolean;
+} & PropsWithChildren;
+
+export function FormContainer({
+  children,
+  show = true,
+  className,
+}: FormContainerProps) {
+  return show ? (
+    <section className={cn('border rounded-lg p-5 space-y-5', className)}>
+      {children}
+    </section>
+  ) : (
+    children
+  );
+}

web/src/components/slider-input-form-field.tsx

@@ -38,8 +38,19 @@ export function SliderInputFormField({
       defaultValue={defaultValue}
       render={({ field }) => (
         <FormItem>
-          <div className="flex items-center justify-between">
-            <FormLabel tooltip={tooltip}>{label}</FormLabel>
+          <FormLabel tooltip={tooltip}>{label}</FormLabel>
+          <div className="flex items-center gap-14 justify-between">
+            <FormControl>
+              <SingleFormSlider
+                {...field}
+                max={max}
+                min={min}
+                step={step}
+                // defaultValue={
+                //   typeof defaultValue === 'number' ? [defaultValue] : undefined
+                // }
+              ></SingleFormSlider>
+            </FormControl>
             <FormControl>
               <Input
                 type={'number'}
@@ -52,17 +63,6 @@ export function SliderInputFormField({
               ></Input>
             </FormControl>
           </div>
-          <FormControl>
-            <SingleFormSlider
-              {...field}
-              max={max}
-              min={min}
-              step={step}
-              // defaultValue={
-              //   typeof defaultValue === 'number' ? [defaultValue] : undefined
-              // }
-            ></SingleFormSlider>
-          </FormControl>
           <FormMessage />
         </FormItem>
       )}

web/src/components/ui/dual-range-slider.tsx

@@ -29,7 +29,7 @@ const DualRangeSlider = React.forwardRef<
       {...props}
     >
       <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+        <SliderPrimitive.Range className="absolute h-full bg-background-checked" />
       </SliderPrimitive.Track>
       {initialValue.map((value, index) => (
         <React.Fragment key={index}>
@@ -65,7 +65,6 @@ const SingleFormSlider = React.forwardRef<
   return (
     <DualRangeSlider
       ref={ref}
-      label={(value) => value}
       value={[value]}
       onValueChange={(vals) => {
         onChange(vals[0]);

web/src/components/ui/form.tsx

@@ -99,7 +99,7 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && 'text-destructive', className, 'flex')}
+      className={cn(error && 'text-destructive', className, 'flex pb-0.5')}
       htmlFor={formItemId}
       {...props}
     >