Feat: Add the example component of the classification operator #3221 (#7986)

### What problem does this PR solve? Feat: Add the example component of the classification operator #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-08-10 21:09:03 +08:00 · 2025-05-30 19:25:32 +08:00 · 2025-05-30 19:25:32 +08:00 · 259a7fc7f1
commit 259a7fc7f1
parent 93f5df716f
5 changed files with 147 additions and 95 deletions
--- a/web/src/interfaces/database/agent.ts
+++ b/web/src/interfaces/database/agent.ts
@ -0,0 +1,11 @@
+export interface ICategorizeItem {
+  name: string;
+  description?: string;
+  examples?: { value: string }[];
+  index: number;
+}
+
+export type ICategorizeItemResult = Record<
+  string,
+  Omit<ICategorizeItem, 'name' | 'examples'> & { examples: string[] }
+>;
--- a/web/src/pages/agent/form/categorize-form/dynamic-categorize.tsx
+++ b/web/src/pages/agent/form/categorize-form/dynamic-categorize.tsx
@ -11,7 +11,7 @@ import {
  FormLabel,
  FormMessage,
 } from '@/components/ui/form';
-import { BlurInput, Input } from '@/components/ui/input';
+import { Input } from '@/components/ui/input';
 import { BlurTextarea } from '@/components/ui/textarea';
 import { useTranslate } from '@/hooks/common-hooks';
 import { PlusOutlined } from '@ant-design/icons';
@ -30,6 +30,7 @@ import {
 import { UseFormReturn, useFieldArray, useFormContext } from 'react-hook-form';
 import { Operator } from '../../constant';
 import { useBuildFormSelectOptions } from '../../form-hooks';
+import DynamicExample from './dynamic-example';

 interface IProps {
  nodeId?: string;
@ -130,8 +131,7 @@ const InnerFormSet = ({ nodeId, index }: IProps & { index: number }) => {
          <FormItem>
            <FormLabel>{t('categoryName')}</FormLabel>
            <FormControl>
-              <BlurInput {...field}></BlurInput>
-              {/* <NameInput
+              <NameInput
                {...field}
                otherNames={getOtherFieldValues(form, 'items', index, 'name')}
                validate={(error?: string) => {
@ -142,7 +142,7 @@ const InnerFormSet = ({ nodeId, index }: IProps & { index: number }) => {
                    form.clearErrors(fieldName);
                  }
                }}
-              ></NameInput> */}
+              ></NameInput>
            </FormControl>
            <FormMessage />
          </FormItem>
@ -161,51 +161,7 @@ const InnerFormSet = ({ nodeId, index }: IProps & { index: number }) => {
          </FormItem>
        )}
      />
-      {/* <FormField
-        control={form.control}
-        name={buildFieldName('examples')}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('examples')}</FormLabel>
-            <FormControl>
-              <Textarea {...field} rows={3} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      /> */}
-      {/* <FormField
-        control={form.control}
-        name={buildFieldName('to')}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('nextStep')}</FormLabel>
-            <FormControl>
-              <RAGFlowSelect
-                {...field}
-                allowClear
-                options={buildCategorizeToOptions(
-                  getOtherFieldValues(form, 'items', index, 'to'),
-                )}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name="index"
-        render={({ field }) => (
-          <FormItem className="hidden">
-            <FormLabel>{t('examples')}</FormLabel>
-            <FormControl>
-              <Input {...field} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      /> */}
+      <DynamicExample name={buildFieldName('examples')}></DynamicExample>
    </section>
  );
 };
@ -225,7 +181,7 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
    append({
      name: humanId(),
      description: '',
-      // examples: [],
+      examples: [{ value: '' }],
    });
    if (nodeId) updateNodeInternals(nodeId);
  };
--- a/web/src/pages/agent/form/categorize-form/dynamic-example.tsx
+++ b/web/src/pages/agent/form/categorize-form/dynamic-example.tsx
@ -0,0 +1,75 @@
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { Plus, X } from 'lucide-react';
+import { memo } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+type DynamicExampleProps = { name: string };
+
+const DynamicExample = ({ name }: DynamicExampleProps) => {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    name: name,
+    control: form.control,
+  });
+
+  return (
+    <FormItem>
+      <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>
+      <div className="space-y-4">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex items-start gap-2">
+            <FormField
+              control={form.control}
+              name={`${name}.${index}.value`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormControl>
+                    <Textarea {...field}> </Textarea>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            {index === 0 ? (
+              <Button
+                type="button"
+                variant={'ghost'}
+                onClick={() => append({ value: '' })}
+              >
+                <Plus />
+              </Button>
+            ) : (
+              <Button
+                type="button"
+                variant={'ghost'}
+                onClick={() => remove(index)}
+              >
+                <X />
+              </Button>
+            )}
+          </div>
+        ))}
+
+        <BlockButton
+          type="button"
+          onClick={() => append({ value: '' })} // "" will cause the inability to add, refer to: https://github.com/orgs/react-hook-form/discussions/8485#discussioncomment-2961861
+        >
+          {t('flow.addMessage')}
+        </BlockButton>
+      </div>
+      <FormMessage />
+    </FormItem>
+  );
+};
+
+export default memo(DynamicExample);
--- a/web/src/pages/agent/form/categorize-form/index.tsx
+++ b/web/src/pages/agent/form/categorize-form/index.tsx
@ -1,3 +1,4 @@
+import { FormContainer } from '@/components/form-container';
 import { LargeModelFormField } from '@/components/large-model-form-field';
 import { LlmSettingSchema } from '@/components/llm-setting-items/next';
 import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
@ -25,6 +26,7 @@ const CategorizeForm = ({ node }: INextOperatorForm) => {
  const values = useValues(node);

  const FormSchema = z.object({
+    input: z.string().optional(),
    parameter: z.string().optional(),
    ...LlmSettingSchema,
    message_history_window_size: z.coerce.number(),
@ -33,13 +35,13 @@ const CategorizeForm = ({ node }: INextOperatorForm) => {
        .object({
          name: z.string().min(1, t('flow.nameMessage')).trim(),
          description: z.string().optional(),
-          // examples: z
-          //   .array(
-          //     z.object({
-          //       value: z.string(),
-          //     }),
-          //   )
-          //   .optional(),
+          examples: z
+            .array(
+              z.object({
+                value: z.string(),
+              }),
+            )
+            .optional(),
        })
        .optional(),
    ),
@ -60,6 +62,7 @@ const CategorizeForm = ({ node }: INextOperatorForm) => {
          e.preventDefault();
        }}
      >
+        <FormContainer>
          <FormField
            control={form.control}
            name="input"
@ -77,6 +80,7 @@ const CategorizeForm = ({ node }: INextOperatorForm) => {
          />

          <LargeModelFormField></LargeModelFormField>
+        </FormContainer>
        <MessageHistoryWindowSizeFormField
          useBlurInput
        ></MessageHistoryWindowSizeFormField>
--- a/web/src/pages/agent/utils.ts
+++ b/web/src/pages/agent/utils.ts
@ -1,9 +1,8 @@
 import {
-  DSLComponents,
  ICategorizeItem,
  ICategorizeItemResult,
-  RAGFlowNodeType,
-} from '@/interfaces/database/flow';
+} from '@/interfaces/database/agent';
+import { DSLComponents, RAGFlowNodeType } from '@/interfaces/database/flow';
 import { removeUselessFieldsFromValues } from '@/utils/form';
 import { Edge, Node, Position, XYPosition } from '@xyflow/react';
 import { FormInstance, FormListFieldData } from 'antd';
@ -391,6 +390,22 @@ export const generateDuplicateNode = (
  };
 };

+export function convertToStringArray(
+  list?: Array<{ value: string | number | boolean }>,
+) {
+  if (!Array.isArray(list)) {
+    return [];
+  }
+  return list.map((x) => x.value);
+}
+
+export function convertToObjectArray(list: Array<string | number | boolean>) {
+  if (!Array.isArray(list)) {
+    return [];
+  }
+  return list.map((x) => ({ value: x }));
+}
+
 /**
   * convert the following object into a list
   * 
@ -411,7 +426,11 @@ export const buildCategorizeListFromObject = (
    .reduce<Array<ICategorizeItem>>((pre, cur) => {
      // synchronize edge data to the to field

-      pre.push({ name: cur, ...categorizeItem[cur] });
+      pre.push({
+        name: cur,
+        ...categorizeItem[cur],
+        examples: convertToObjectArray(categorizeItem[cur].examples),
+      });
      return pre;
    }, [])
    .sort((a, b) => a.index - b.index);
@ -424,7 +443,7 @@ export const buildCategorizeListFromObject = (
      {
        "name": "Categorize 1",
        "description": "111",
-        "examples": "ddd",
+        "examples": ["ddd"],
        "to": "Retrieval:LazyEelsStick"
      }
     ]
@ -433,24 +452,11 @@ export const buildCategorizeListFromObject = (
 export const buildCategorizeObjectFromList = (list: Array<ICategorizeItem>) => {
  return list.reduce<ICategorizeItemResult>((pre, cur) => {
    if (cur?.name) {
-      pre[cur.name] = omit(cur, 'name');
+      pre[cur.name] = {
+        ...omit(cur, 'name', 'examples'),
+        examples: convertToStringArray(cur.examples),
+      };
    }
    return pre;
  }, {});
 };
-
-export function convertToStringArray(
-  list: Array<{ value: string | number | boolean }>,
-) {
-  if (!Array.isArray(list)) {
-    return [];
-  }
-  return list.map((x) => x.value);
-}
-
-export function convertToObjectArray(list: Array<string | number | boolean>) {
-  if (!Array.isArray(list)) {
-    return [];
-  }
-  return list.map((x) => ({ value: x }));
-}