Feat: Add splitter form #9869 (#10115)

### What problem does this PR solve?

Feat: Add splitter form #9869
### Type of change


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

web/src/pages/data-flow/canvas/index.tsx

@@ -44,6 +44,7 @@ import { CategorizeNode } from './node/categorize-node';
 import ChunkerNode from './node/chunker-node';
 import { InnerNextStepDropdown } from './node/dropdown/next-step-dropdown';
 import { GenerateNode } from './node/generate-node';
+import { HierarchicalMergerNode } from './node/hierarchical-merger-node';
 import { InvokeNode } from './node/invoke-node';
 import { IterationNode, IterationStartNode } from './node/iteration-node';
 import { KeywordNode } from './node/keyword-node';
@@ -84,6 +85,7 @@ export const nodeTypes: NodeTypes = {
   chunkerNode: ChunkerNode,
   tokenizerNode: TokenizerNode,
   splitterNode: SplitterNode,
+  hierarchicalMergerNode: HierarchicalMergerNode,
 };
 
 const edgeTypes = {

web/src/pages/data-flow/constant.tsx

@@ -378,7 +378,7 @@ export const initialStringTransformValues = {
 
 export const initialParserValues = { outputs: {}, parser: [] };
 
-export const initialSplitterValues = {};
+export const initialSplitterValues = { outputs: {}, chunk_token_size: 512 };
 
 export const initialHierarchicalMergerValues = {};
 
@@ -466,7 +466,7 @@ export const NodeMap = {
   [Operator.Chunker]: 'chunkerNode',
   [Operator.Tokenizer]: 'tokenizerNode',
   [Operator.Splitter]: 'splitterNode',
-  [Operator.HierarchicalMerger]: 'hierarchicalMergerrNode',
+  [Operator.HierarchicalMerger]: 'hierarchicalMergerNode',
 };
 
 export enum BeginQueryType {

web/src/pages/data-flow/form-sheet/form-config-map.tsx

@@ -7,6 +7,7 @@ import CodeForm from '../form/code-form';
 import CrawlerForm from '../form/crawler-form';
 import EmailForm from '../form/email-form';
 import ExeSQLForm from '../form/exesql-form';
+import HierarchicalMergerForm from '../form/hierarchical-merger-form';
 import InvokeForm from '../form/invoke-form';
 import IterationForm from '../form/iteration-form';
 import IterationStartForm from '../form/iteration-start-from';
@@ -16,6 +17,7 @@ import ParserForm from '../form/parser-form';
 import RelevantForm from '../form/relevant-form';
 import RetrievalForm from '../form/retrieval-form/next';
 import RewriteQuestionForm from '../form/rewrite-question-form';
+import SplitterForm from '../form/splitter-form';
 import StringTransformForm from '../form/string-transform-form';
 import SwitchForm from '../form/switch-form';
 import TokenizerForm from '../form/tokenizer-form';
@@ -94,4 +96,10 @@ export const FormConfigMap = {
   [Operator.Tokenizer]: {
     component: TokenizerForm,
   },
+  [Operator.Splitter]: {
+    component: SplitterForm,
+  },
+  [Operator.HierarchicalMerger]: {
+    component: HierarchicalMergerForm,
+  },
 };

web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx

@@ -0,0 +1,140 @@
+import { FormContainer } from '@/components/form-container';
+import NumberInput from '@/components/originui/number-input';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useTranslate } from '@/hooks/common-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialChunkerValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { GoogleCountryOptions, GoogleLanguageOptions } from '../../options';
+import { buildOutputList } from '../../utils/build-output-list';
+import { ApiKeyField } from '../components/api-key-field';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+import { QueryVariable } from '../components/query-variable';
+
+const outputList = buildOutputList(initialChunkerValues.outputs);
+
+export const GoogleFormPartialSchema = {
+  api_key: z.string(),
+  country: z.string(),
+  language: z.string(),
+};
+
+export const FormSchema = z.object({
+  ...GoogleFormPartialSchema,
+  q: z.string(),
+  start: z.number(),
+  num: z.number(),
+});
+
+export function GoogleFormWidgets() {
+  const form = useFormContext();
+  const { t } = useTranslate('flow');
+
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name={`country`}
+        render={({ field }) => (
+          <FormItem className="flex-1">
+            <FormLabel>{t('country')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch
+                {...field}
+                options={GoogleCountryOptions}
+              ></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name={`language`}
+        render={({ field }) => (
+          <FormItem className="flex-1">
+            <FormLabel>{t('language')}</FormLabel>
+            <FormControl>
+              <SelectWithSearch
+                {...field}
+                options={GoogleLanguageOptions}
+              ></SelectWithSearch>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
+
+const HierarchicalMergerForm = ({ node }: INextOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const defaultValues = useFormValues(initialChunkerValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <QueryVariable name="q"></QueryVariable>
+        </FormContainer>
+        <FormContainer>
+          <ApiKeyField placeholder={t('apiKeyPlaceholder')}></ApiKeyField>
+          <FormField
+            control={form.control}
+            name={`start`}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flowStart')}</FormLabel>
+                <FormControl>
+                  <NumberInput {...field} className="w-full"></NumberInput>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name={`num`}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('flowNum')}</FormLabel>
+                <FormControl>
+                  <NumberInput {...field} className="w-full"></NumberInput>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <GoogleFormWidgets></GoogleFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+};
+
+export default memo(HierarchicalMergerForm);

web/src/pages/data-flow/form/splitter-form/index.tsx

@@ -0,0 +1,95 @@
+import { FormContainer } from '@/components/form-container';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { SliderInputFormField } from '@/components/slider-input-form-field';
+import { BlockButton, Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { X } from 'lucide-react';
+import { memo } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { initialChunkerValues, initialSplitterValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { useWatchFormChange } from '../../hooks/use-watch-form-change';
+import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
+
+const outputList = buildOutputList(initialSplitterValues.outputs);
+
+export const FormSchema = z.object({
+  chunk_token_size: z.number(),
+  delimiters: z.array(
+    z.object({
+      value: z.string().optional(),
+    }),
+  ),
+  overlapped_percent: z.number(), // 0.0 - 0.3
+});
+
+const SplitterForm = ({ node }: INextOperatorForm) => {
+  const defaultValues = useFormValues(initialChunkerValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+  const name = 'delimiters';
+
+  const { fields, append, remove } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <SliderInputFormField
+            name="chunk_token_size"
+            max={2048}
+            label="chunk_token_size"
+          ></SliderInputFormField>
+          <SliderInputFormField
+            name="overlapped_percent"
+            max={0.3}
+            min={0.1}
+            step={0.01}
+            label="overlapped_percent"
+          ></SliderInputFormField>
+          <span>delimiters</span>
+          {fields.map((field, index) => (
+            <div key={field.id} className="flex items-center gap-2">
+              <div className="space-y-2 flex-1">
+                <RAGFlowFormItem
+                  name={`${name}.${index}.value`}
+                  label="delimiter"
+                  labelClassName="!hidden"
+                >
+                  <Input className="!m-0"></Input>
+                </RAGFlowFormItem>
+              </div>
+              <Button
+                type="button"
+                variant={'ghost'}
+                onClick={() => remove(index)}
+              >
+                <X />
+              </Button>
+            </div>
+          ))}
+          <BlockButton onClick={() => append({ value: '' })}>Add</BlockButton>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+};
+
+export default memo(SplitterForm);