Feat: Initialize the data pipeline canvas. #9869 (#9870)

### What problem does this PR solve?
Feat: Initialize the data pipeline canvas. #9869

### Type of change


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

web/src/pages/data-flow/form/message-form/index.tsx

@@ -0,0 +1,101 @@
+import { FormContainer } from '@/components/form-container';
+import { BlockButton, Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { X } from 'lucide-react';
+import { memo } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { INextOperatorForm } from '../../interface';
+import { FormWrapper } from '../components/form-wrapper';
+import { PromptEditor } from '../components/prompt-editor';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
+
+function MessageForm({ node }: INextOperatorForm) {
+  const { t } = useTranslation();
+
+  const values = useValues(node);
+
+  const FormSchema = z.object({
+    content: z
+      .array(
+        z.object({
+          value: z.string(),
+        }),
+      )
+      .optional(),
+  });
+
+  const form = useForm({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  const { fields, append, remove } = useFieldArray({
+    name: 'content',
+    control: form.control,
+  });
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <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={`content.${index}.value`}
+                    render={({ field }) => (
+                      <FormItem className="flex-1">
+                        <FormControl>
+                          {/* <Textarea {...field}> </Textarea> */}
+                          <PromptEditor
+                            {...field}
+                            placeholder={t('flow.messagePlaceholder')}
+                          ></PromptEditor>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  {fields.length > 1 && (
+                    <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>
+        </FormContainer>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(MessageForm);

web/src/pages/data-flow/form/message-form/use-values.ts

@@ -0,0 +1,22 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+import { initialMessageValues } from '../../constant';
+import { convertToObjectArray } from '../../utils';
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return initialMessageValues;
+    }
+
+    return {
+      ...formData,
+      content: convertToObjectArray(formData.content),
+    };
+  }, [node]);
+
+  return values;
+}

web/src/pages/data-flow/form/message-form/use-watch-change.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+import { convertToStringArray } from '../../utils';
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+      let nextValues: any = values;
+
+      nextValues = {
+        ...values,
+        content: convertToStringArray(values.content),
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}