Fix: Fixed the issue that the content of the Dropdown section cannot be seen when selecting the next operator #3221 (#8918)

…be seen when selecting the next operator #3221

### What problem does this PR solve?
Fix: Fixed the issue that the content of the Dropdown section cannot be
seen when selecting the next operator #3221

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/agent/form/categorize-form/dynamic-categorize.tsx

@@ -28,8 +28,6 @@ import {
   useState,
 } from 'react';
 import { UseFormReturn, useFieldArray, useFormContext } from 'react-hook-form';
-import { Operator } from '../../constant';
-import { useBuildFormSelectOptions } from '../../form-hooks';
 import DynamicExample from './dynamic-example';
 
 interface IProps {
@@ -107,13 +105,9 @@ const InnerNameInput = ({
 
 const NameInput = memo(InnerNameInput);
 
-const InnerFormSet = ({ nodeId, index }: IProps & { index: number }) => {
+const InnerFormSet = ({ index }: IProps & { index: number }) => {
   const form = useFormContext();
   const { t } = useTranslate('flow');
-  const buildCategorizeToOptions = useBuildFormSelectOptions(
-    Operator.Categorize,
-    nodeId,
-  );
 
   const buildFieldName = useCallback(
     (name: string) => {

web/src/pages/agent/form/categorize-form/dynamic-example.tsx

@@ -25,7 +25,7 @@ const DynamicExample = ({ name }: DynamicExampleProps) => {
 
   return (
     <FormItem>
-      <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>
+      <FormLabel tooltip={t('flow.msgTip')}>{t('flow.examples')}</FormLabel>
       <div className="space-y-4">
         {fields.map((field, index) => (
           <div key={field.id} className="flex items-start gap-2">

web/src/pages/agent/form/categorize-form/index.tsx

@@ -8,12 +8,17 @@ import { memo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
+import { initialCategorizeValues } from '../../constant';
 import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
+import { Output } from '../components/output';
 import { QueryVariable } from '../components/query-variable';
 import DynamicCategorize from './dynamic-categorize';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
+const outputList = buildOutputList(initialCategorizeValues.outputs);
+
 function CategorizeForm({ node }: INextOperatorForm) {
   const { t } = useTranslation();
 
@@ -62,6 +67,7 @@ function CategorizeForm({ node }: INextOperatorForm) {
         </FormContainer>
         <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
         <DynamicCategorize nodeId={node?.id}></DynamicCategorize>
+        <Output list={outputList}></Output>
       </form>
     </Form>
   );