feat: Added UI functions related to data-flow knowledge base #3221 (#10038)

### What problem does this PR solve?

feat: Added UI functions related to data-flow knowledge base #3221

### Type of change

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

web/src/pages/dataset/dataset-setting/configuration/common-item.tsx

@@ -0,0 +1,328 @@
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Radio } from '@/components/ui/radio';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { useTranslate } from '@/hooks/common-hooks';
+import { cn } from '@/lib/utils';
+import { ArrowUpRight } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+import {
+  useHasParsedDocument,
+  useSelectChunkMethodList,
+  useSelectEmbeddingModelOptions,
+} from '../hooks';
+
+export function ChunkMethodItem() {
+  const { t } = useTranslate('knowledgeConfiguration');
+  const form = useFormContext();
+  // const handleChunkMethodSelectChange = useHandleChunkMethodSelectChange(form);
+  const parserList = useSelectChunkMethodList();
+
+  return (
+    <FormField
+      control={form.control}
+      name={'parser_id'}
+      render={({ field }) => (
+        <FormItem className=" items-center space-y-0 ">
+          <div className="flex items-center">
+            <FormLabel
+              required
+              tooltip={t('chunkMethodTip')}
+              className="text-sm text-muted-foreground whitespace-wrap w-1/4"
+            >
+              {t('chunkMethod')}
+            </FormLabel>
+            <div className="w-3/4 ">
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  options={parserList}
+                  placeholder={t('chunkMethodPlaceholder')}
+                  // onChange={handleChunkMethodSelectChange}
+                />
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function EmbeddingModelItem({ line = 1 }: { line?: 1 | 2 }) {
+  const { t } = useTranslate('knowledgeConfiguration');
+  const form = useFormContext();
+  const embeddingModelOptions = useSelectEmbeddingModelOptions();
+  const disabled = useHasParsedDocument();
+
+  return (
+    <FormField
+      control={form.control}
+      name={'embd_id'}
+      render={({ field }) => (
+        <FormItem className=" items-center space-y-0 ">
+          <div className={cn({ 'flex items-center': line === 1 })}>
+            <FormLabel
+              required
+              tooltip={t('embeddingModelTip')}
+              className={cn('text-sm  whitespace-wrap ', {
+                'w-1/4': line === 1,
+              })}
+            >
+              {t('embeddingModel')}
+            </FormLabel>
+            <div
+              className={cn('text-muted-foreground', { 'w-3/4': line === 1 })}
+            >
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  options={embeddingModelOptions}
+                  disabled={disabled}
+                  placeholder={t('embeddingModelPlaceholder')}
+                />
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function ParseTypeItem() {
+  const { t } = useTranslate('knowledgeConfiguration');
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={'parseType'}
+      render={({ field }) => (
+        <FormItem className=" items-center space-y-0 ">
+          <div className="">
+            <FormLabel
+              tooltip={t('parseTypeTip')}
+              className="text-sm  whitespace-wrap "
+            >
+              {t('parseType')}
+            </FormLabel>
+            <div className="text-muted-foreground">
+              <FormControl>
+                <Radio.Group {...field}>
+                  <div className="w-3/4 flex gap-2 justify-between text-muted-foreground">
+                    <Radio value={1}>{t('builtIn')}</Radio>
+                    <Radio value={2}>{t('manualSetup')}</Radio>
+                  </div>
+                </Radio.Group>
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function DataFlowItem() {
+  const { t } = useTranslate('knowledgeConfiguration');
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={'data_flow'}
+      render={({ field }) => (
+        <FormItem className=" items-center space-y-0 ">
+          <div className="">
+            <div className="flex gap-2 justify-between ">
+              <FormLabel
+                tooltip={t('dataFlowTip')}
+                className="text-sm text-text-primary whitespace-wrap "
+              >
+                {t('dataFlow')}
+              </FormLabel>
+              <div className="text-sm flex text-text-primary">
+                {t('buildItFromScratch')}
+                <ArrowUpRight size={14} />
+              </div>
+            </div>
+
+            <div className="text-muted-foreground">
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  placeholder={t('dataFlowPlaceholder')}
+                  options={[{ value: '0', label: t('dataFlowDefault') }]}
+                />
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function DataExtractKnowledgeItem() {
+  const { t } = useTranslate('knowledgeConfiguration');
+  const form = useFormContext();
+
+  return (
+    <>
+      {' '}
+      <FormField
+        control={form.control}
+        name={'extractKnowledgeGraph'}
+        render={({ field }) => (
+          <FormItem className=" items-center space-y-0 ">
+            <div className="">
+              <FormLabel
+                tooltip={t('extractKnowledgeGraphTip')}
+                className="text-sm  whitespace-wrap "
+              >
+                {t('extractKnowledgeGraph')}
+              </FormLabel>
+              <div className="text-muted-foreground">
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </div>
+            </div>
+            <div className="flex pt-1">
+              <div className="w-1/4"></div>
+              <FormMessage />
+            </div>
+          </FormItem>
+        )}
+      />{' '}
+      <FormField
+        control={form.control}
+        name={'useRAPTORToEnhanceRetrieval'}
+        render={({ field }) => (
+          <FormItem className=" items-center space-y-0 ">
+            <div className="">
+              <FormLabel
+                tooltip={t('useRAPTORToEnhanceRetrievalTip')}
+                className="text-sm  whitespace-wrap "
+              >
+                {t('useRAPTORToEnhanceRetrieval')}
+              </FormLabel>
+              <div className="text-muted-foreground">
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </div>
+            </div>
+            <div className="flex pt-1">
+              <div className="w-1/4"></div>
+              <FormMessage />
+            </div>
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+export function TeamItem() {
+  const { t } = useTranslate('knowledgeConfiguration');
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={'team'}
+      render={({ field }) => (
+        <FormItem className=" items-center space-y-0 ">
+          <div className="">
+            <FormLabel
+              tooltip={t('teamTip')}
+              className="text-sm  whitespace-wrap "
+            >
+              <span className="text-destructive mr-1"> *</span>
+              {t('team')}
+            </FormLabel>
+            <div className="text-muted-foreground">
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  placeholder={t('teamPlaceholder')}
+                  options={[{ value: '0', label: t('teamDefault') }]}
+                />
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function EnableAutoGenerateItem() {
+  const { t } = useTranslate('knowledgeConfiguration');
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={'enableAutoGenerate'}
+      render={({ field }) => (
+        <FormItem className=" items-center space-y-0 ">
+          <div className="flex items-center">
+            <FormLabel
+              tooltip={t('enableAutoGenerateTip')}
+              className="text-sm  whitespace-wrap w-1/4"
+            >
+              {t('enableAutoGenerate')}
+            </FormLabel>
+            <div className="text-muted-foreground w-3/4">
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex pt-1">
+            <div className="w-1/4"></div>
+            <FormMessage />
+          </div>
+        </FormItem>
+      )}
+    />
+  );
+}