Feat: Translate operator names and allow mailboxes to reference operator names #3221 (#9118)

### What problem does this PR solve?

Feat: Translate operator names and allow mailboxes to reference operator
names #3221

### Type of change


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

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

@@ -23,7 +23,9 @@ import { initialInvokeValues } 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';
 import { FormSchema, FormSchemaType } from './schema';
 import { useEditVariableRecord } from './use-edit-variable';
 import { VariableDialog } from './variable-dialog';
@@ -56,6 +58,8 @@ const TimeoutInput = ({ value, onChange }: TimeoutInputProps) => {
   );
 };
 
+const outputList = buildOutputList(initialInvokeValues.outputs);
+
 function InvokeForm({ node }: INextOperatorForm) {
   const { t } = useTranslation();
   const defaultValues = useFormValues(initialInvokeValues, node);
@@ -212,6 +216,9 @@ function InvokeForm({ node }: INextOperatorForm) {
           ></VariableDialog>
         )}
       </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
     </Form>
   );
 }