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)
2025-12-20 04:39:00 +08:00 · 2025-09-24 18:48:31 +08:00
parent 6bf0cda16f
commit afb8a84f7b
13 changed files with 155 additions and 16 deletions
--- a/web/src/locales/en.ts
+++ b/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',
    },
  },
 };
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -1622,6 +1622,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
      parserMethod: '解析方法',
      exportJson: '导出 JSON',
      viewResult: '查看结果',
+      running: '运行中',
    },
  },
 };
--- a/web/src/pages/data-flow/canvas/index.tsx
+++ b/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 = {
--- a/web/src/pages/data-flow/canvas/node/context-node.tsx
+++ b/web/src/pages/data-flow/canvas/node/context-node.tsx
@ -0,0 +1 @@
+export { RagNode as ContextNode } from './index';
--- a/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
+++ b/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}
--- a/web/src/pages/data-flow/constant.tsx
+++ b/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 {
--- a/web/src/pages/data-flow/form-sheet/form-config-map.tsx
+++ b/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,
+  },
 };
--- a/web/src/pages/data-flow/form/context-form/index.tsx
+++ b/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);
--- a/web/src/pages/data-flow/form/tokenizer-form/index.tsx
+++ b/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) => (
-            <MultiSelect
-              options={FieldsOptions}
-              onValueChange={field.onChange}
-              defaultValue={field.value}
-              variant="inverted"
-            />
-          )}
+          {(field) => <SelectWithSearch options={FieldsOptions} {...field} />}
        </RAGFlowFormItem>
      </FormWrapper>
      <div className="p-5">
--- a/web/src/pages/data-flow/hooks/use-add-node.ts
+++ b/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,
    };
  }, []);

--- a/web/src/pages/data-flow/index.tsx
+++ b/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 />
--- a/web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx
+++ b/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>
--- a/web/src/pages/data-flow/log-sheet/index.tsx
+++ b/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')}
				`@ -0,0 +1 @@`
				`export { RagNode as ContextNode } from './index';`