Feat: Add context node #9869 (#10266)

### What problem does this PR solve?

Feat: Add context node #9869
### Type of change


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

web/src/locales/en.ts

@@ -1704,6 +1704,7 @@ This delimiter is used to split the input text into several text pieces echo of
       parserMethod: 'Parser method',
       exportJson: 'Export JSON',
       viewResult: 'View Result',
+      running: 'Running',
     },
   },
 };

web/src/locales/zh.ts

@@ -1622,6 +1622,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       parserMethod: '解析方法',
       exportJson: '导出 JSON',
       viewResult: '查看结果',
+      running: '运行中',
     },
   },
 };

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

@@ -40,6 +40,7 @@ import { ButtonEdge } from './edge';
 import styles from './index.less';
 import { RagNode } from './node';
 import { BeginNode } from './node/begin-node';
+import { ContextNode } from './node/context-node';
 import { InnerNextStepDropdown } from './node/dropdown/next-step-dropdown';
 import { HierarchicalMergerNode } from './node/hierarchical-merger-node';
 import NoteNode from './node/note-node';
@@ -55,6 +56,7 @@ export const nodeTypes: NodeTypes = {
   tokenizerNode: TokenizerNode,
   splitterNode: SplitterNode,
   hierarchicalMergerNode: HierarchicalMergerNode,
+  contextNode: ContextNode,
 };
 
 const edgeTypes = {

web/src/pages/data-flow/canvas/node/context-node.tsx

@@ -0,0 +1 @@
+export { RagNode as ContextNode } from './index';

web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx

@@ -124,6 +124,7 @@ function AccordionOperators({
         Operator.Tokenizer,
         Operator.Splitter,
         Operator.HierarchicalMerger,
+        Operator.Context,
       ]}
       isCustomDropdown={isCustomDropdown}
       mousePosition={mousePosition}

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

@@ -34,6 +34,7 @@ export enum Operator {
   Tokenizer = 'Tokenizer',
   Splitter = 'Splitter',
   HierarchicalMerger = 'HierarchicalMerger',
+  Context = 'Context',
 }
 
 export const SwitchLogicOperatorOptions = ['and', 'or'];
@@ -76,6 +77,12 @@ export enum ImageParseMethod {
   OCR = 'ocr',
 }
 
+export enum TokenizerFields {
+  Text = 'text',
+  Questions = 'questions',
+  Summary = 'summary',
+}
+
 export const initialBeginValues = {
   mode: AgentDialogueMode.Conversational,
   prologue: `Hi! I'm your assistant. What can I do for you?`,
@@ -100,7 +107,7 @@ export const initialTokenizerValues = {
     TokenizerSearchMethod.FullText,
   ],
   filename_embd_weight: 0.1,
-  fields: ['text'],
+  fields: TokenizerFields.Text,
   outputs: {},
 };
 
@@ -146,6 +153,10 @@ export const initialHierarchicalMergerValues = {
   ],
 };
 
+export const initialContextValues = {
+  outputs: {},
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -178,6 +189,7 @@ export const NodeMap = {
   [Operator.Tokenizer]: 'tokenizerNode',
   [Operator.Splitter]: 'splitterNode',
   [Operator.HierarchicalMerger]: 'hierarchicalMergerNode',
+  [Operator.Context]: 'contextNode',
 };
 
 export enum BeginQueryType {

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

@@ -1,4 +1,5 @@
 import { Operator } from '../constant';
+import ContextForm from '../form/context-form';
 import HierarchicalMergerForm from '../form/hierarchical-merger-form';
 import ParserForm from '../form/parser-form';
 import SplitterForm from '../form/splitter-form';
@@ -23,4 +24,7 @@ export const FormConfigMap = {
   [Operator.HierarchicalMerger]: {
     component: HierarchicalMergerForm,
   },
+  [Operator.Context]: {
+    component: ContextForm,
+  },
 };

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

@@ -0,0 +1,102 @@
+import { DelimiterInput } from '@/components/delimiter-form-field';
+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 { zodResolver } from '@hookform/resolvers/zod';
+import { Trash2 } from 'lucide-react';
+import { memo } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { initialContextValues } 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(initialContextValues.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
+});
+
+export type ContextFormSchemaType = z.infer<typeof FormSchema>;
+
+const ContextForm = ({ node }: INextOperatorForm) => {
+  const defaultValues = useFormValues(initialContextValues, node);
+  const { t } = useTranslation();
+
+  const form = useForm<ContextFormSchemaType>({
+    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>
+        <SliderInputFormField
+          name="chunk_token_size"
+          max={2048}
+          label={t('knowledgeConfiguration.chunkTokenNumber')}
+        ></SliderInputFormField>
+        <SliderInputFormField
+          name="overlapped_percent"
+          max={0.3}
+          min={0}
+          step={0.01}
+          label={t('dataflow.overlappedPercent')}
+        ></SliderInputFormField>
+        <section>
+          <span className="mb-2 inline-block">{t('flow.delimiters')}</span>
+          <div className="space-y-4">
+            {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"
+                  >
+                    <DelimiterInput className="!m-0"></DelimiterInput>
+                  </RAGFlowFormItem>
+                </div>
+                <Button
+                  type="button"
+                  variant={'ghost'}
+                  onClick={() => remove(index)}
+                >
+                  <Trash2 />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </section>
+        <BlockButton onClick={() => append({ value: '\n' })}>
+          {t('common.add')}
+        </BlockButton>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
+    </Form>
+  );
+};
+
+export default memo(ContextForm);

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

@@ -1,3 +1,4 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
 import { RAGFlowFormItem } from '@/components/ragflow-form';
 import { SliderInputFormField } from '@/components/slider-input-form-field';
 import { Form } from '@/components/ui/form';
@@ -8,7 +9,11 @@ import { memo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { initialTokenizerValues, TokenizerSearchMethod } from '../../constant';
+import {
+  initialTokenizerValues,
+  TokenizerFields,
+  TokenizerSearchMethod,
+} from '../../constant';
 import { useFormValues } from '../../hooks/use-form-values';
 import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { INextOperatorForm } from '../../interface';
@@ -21,11 +26,12 @@ const outputList = buildOutputList(initialTokenizerValues.outputs);
 export const FormSchema = z.object({
   search_method: z.array(z.string()).min(1),
   filename_embd_weight: z.number(),
+  fields: z.string(),
 });
 
 const SearchMethodOptions = buildOptions(TokenizerSearchMethod);
 
-const FieldsOptions = [{ label: 'text', value: 'text' }];
+const FieldsOptions = buildOptions(TokenizerFields);
 
 const TokenizerForm = ({ node }: INextOperatorForm) => {
   const { t } = useTranslation();
@@ -62,14 +68,7 @@ const TokenizerForm = ({ node }: INextOperatorForm) => {
           step={0.01}
         ></SliderInputFormField>
         <RAGFlowFormItem name="fields" label={t('dataflow.fields')}>
-          {(field) => (
+          {(field) => <SelectWithSearch options={FieldsOptions} {...field} />}
-            <MultiSelect
-              options={FieldsOptions}
-              onValueChange={field.onChange}
-              defaultValue={field.value}
-              variant="inverted"
-            />
-          )}
         </RAGFlowFormItem>
       </FormWrapper>
       <div className="p-5">

web/src/pages/data-flow/hooks/use-add-node.ts

@@ -8,6 +8,7 @@ import {
   NodeMap,
   Operator,
   initialBeginValues,
+  initialContextValues,
   initialHierarchicalMergerValues,
   initialNoteValues,
   initialParserValues,
@@ -29,6 +30,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.Tokenizer]: initialTokenizerValues,
       [Operator.Splitter]: initialSplitterValues,
       [Operator.HierarchicalMerger]: initialHierarchicalMergerValues,
+      [Operator.Context]: initialContextValues,
     };
   }, []);
 

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

@@ -136,9 +136,13 @@ export default function DataFlow() {
           >
             <LaptopMinimalCheck /> {t('flow.save')}
           </ButtonLoading>
-          <Button variant={'secondary'} onClick={handleRunAgent}>
+          <Button
+            variant={'secondary'}
+            onClick={handleRunAgent}
+            disabled={isParsing}
+          >
             <CirclePlay className={isParsing ? 'animate-spin' : ''} />
-            {isParsing ? 'running' : t('flow.run')}
+            {isParsing ? t('dataflow.running') : t('flow.run')}
           </Button>
           <Button variant={'secondary'} onClick={showVersionDialog}>
             <History />

web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx

@@ -89,9 +89,16 @@ export function DataflowTimeline({ traceList }: DataflowTimelineProps) {
                         >
                           <span>{x.datetime}</span>
                           {item.component_id !== 'END' && (
-                            <span>{x.message}</span>
+                            <span
+                              className={cn({
+                                'text-state-error':
+                                  x.message.startsWith('[ERROR]'),
+                              })}
+                            >
+                              {x.message}
+                            </span>
                           )}
-                          <span>{x.elapsed_time.toString().slice(0, 6)}</span>
+                          <span>{x.elapsed_time.toString().slice(0, 6)}s</span>
                         </section>
                       ))}
                     </div>

web/src/pages/data-flow/log-sheet/index.tsx

@@ -40,7 +40,10 @@ export function LogSheet({
 
   return (
     <Sheet open onOpenChange={hideModal} modal={false}>
-      <SheetContent className={cn('top-20')}>
+      <SheetContent
+        className={cn('top-20')}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
         <SheetHeader>
           <SheetTitle className="flex items-center gap-2.5">
             <Logs className="size-4" /> {t('flow.log')}