From c09bd9fe4ad78f6500e8659ccb4a9973c8492553 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 26 May 2025 16:56:50 +0800
Subject: [PATCH] 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          | 12 ++++++++++--
 web/src/pages/agent/form/message-form/index.tsx  |  4 ++--
 .../pages/agent/hooks/use-watch-form-change.ts   |  6 +++++-
 web/src/pages/agent/utils.ts                     | 16 ++++++++++++++++
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/agent/form-sheet/next.tsx b/web/src/pages/agent/form-sheet/next.tsx
index 7998f1068..2bd9ca122 100644
--- a/web/src/pages/agent/form-sheet/next.tsx
+++ b/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
diff --git a/web/src/pages/agent/form/message-form/index.tsx b/web/src/pages/agent/form/message-form/index.tsx
index 628d4dceb..31a907980 100644
--- a/web/src/pages/agent/form/message-form/index.tsx
+++ b/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')}
diff --git a/web/src/pages/agent/hooks/use-watch-form-change.ts b/web/src/pages/agent/hooks/use-watch-form-change.ts
index 498cac911..907c324cb 100644
--- a/web/src/pages/agent/hooks/use-watch-form-change.ts
+++ b/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
diff --git a/web/src/pages/agent/utils.ts b/web/src/pages/agent/utils.ts
index 8dd48479a..5ca24020e 100644
--- a/web/src/pages/agent/utils.ts
+++ b/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 }));
+}