Feat: Convert the data of the messge operator to a string array #3221 (#7853)

### What problem does this PR solve?

Feat: Convert the data of the messge operator to a string array #3221

### Type of change


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

web/src/pages/agent/form-sheet/next.tsx

@@ -22,6 +22,7 @@ import { useHandleFormValuesChange } from '../hooks/use-watch-form-change';
 import OperatorIcon from '../operator-icon';
 import {
   buildCategorizeListFromObject,
+  convertToObjectArray,
   needsSingleStepDebugging,
 } from '../utils';
 import SingleDebugDrawer from './single-debug-drawer';
@@ -79,16 +80,23 @@ const FormSheet = ({
         form.clearErrors();
       }
 
+      const formData = node?.data?.form;
+
       if (operatorName === Operator.Categorize) {
         const items = buildCategorizeListFromObject(
           get(node, 'data.form.category_description', {}),
         );
-        const formData = node?.data?.form;
         if (isPlainObject(formData)) {
           //   form.setFieldsValue({ ...formData, items });
           console.info('xxx');
           form.reset({ ...formData, items });
         }
+      }
+      if (operatorName === Operator.Message) {
+        form.reset({
+          ...formData,
+          content: convertToObjectArray(formData.content),
+        });
       } else {
         // form.setFieldsValue(node?.data?.form);
         form.reset(node?.data?.form);
@@ -134,7 +142,7 @@ const FormSheet = ({
             <span>{t(`${lowerFirst(operatorName)}Description`)}</span>
           </section>
         </SheetHeader>
-        <section className="pt-4">
+        <section className="pt-4 overflow-auto max-h-[85vh]">
           {visible && (
             <FlowFormContext.Provider value={node}>
               <OperatorForm

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

@@ -25,7 +25,7 @@ const MessageForm = ({ form }: INextOperatorForm) => {
   return (
     <Form {...form}>
       <form
-        className="space-y-5 px-5"
+        className="space-y-5 px-5 "
         autoComplete="off"
         onSubmit={(e) => {
           e.preventDefault();
@@ -43,7 +43,7 @@ const MessageForm = ({ form }: INextOperatorForm) => {
                     render={({ field }) => (
                       <FormItem className="flex-1">
                         <FormControl>
-                          {/* <Input {...field}></Input> */}
+                          {/* <Textarea {...field}> </Textarea> */}
                           <PromptEditor
                             {...field}
                             placeholder={t('flow.messagePlaceholder')}

web/src/pages/agent/hooks/use-watch-form-change.ts

@@ -5,7 +5,7 @@ import { useCallback, useEffect } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import { Operator } from '../constant';
 import useGraphStore from '../store';
-import { buildCategorizeObjectFromList } from '../utils';
+import { buildCategorizeObjectFromList, convertToStringArray } from '../utils';
 
 export const useHandleFormValuesChange = (
   operatorName: Operator,
@@ -87,6 +87,10 @@ export const useHandleFormValuesChange = (
         }
 
         if (operatorName === Operator.Message) {
+          nextValues = {
+            ...value,
+            content: convertToStringArray(value.content),
+          };
         }
 
         // Manually triggered form updates are synchronized to the canvas

web/src/pages/agent/utils.ts

@@ -438,3 +438,19 @@ export const buildCategorizeObjectFromList = (list: Array<ICategorizeItem>) => {
     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 }));
+}