feat: translate fields of CategorizeForm #918 (#1311)

### What problem does this PR solve?

feat: translate fields of CategorizeForm #918
### Type of change


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

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

@@ -1,3 +1,4 @@
+import { useTranslate } from '@/hooks/commonHooks';
 import { CloseOutlined } from '@ant-design/icons';
 import { Button, Card, Form, Input, Select, Typography } from 'antd';
 import { useUpdateNodeInternals } from 'reactflow';
@@ -13,6 +14,7 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
   const form = Form.useFormInstance();
   const buildCategorizeToOptions = useBuildCategorizeToOptions();
   const { handleSelectChange } = useHandleToSelectChange(nodeId);
+  const { t } = useTranslate('flow');
 
   return (
     <>
@@ -40,25 +42,25 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
                   }
                 >
                   <Form.Item
-                    label="name"
+                    label={t('name')}
                     name={[field.name, 'name']}
-                    // initialValue={`Categorize ${field.name + 1}`}
-                    rules={[
-                      { required: true, message: 'Please input your name!' },
-                    ]}
+                    rules={[{ required: true, message: t('nameMessage') }]}
                   >
                     <Input />
                   </Form.Item>
                   <Form.Item
-                    label="description"
+                    label={t('description')}
                     name={[field.name, 'description']}
                   >
                     <Input.TextArea rows={3} />
                   </Form.Item>
-                  <Form.Item label="examples" name={[field.name, 'examples']}>
+                  <Form.Item
+                    label={t('examples')}
+                    name={[field.name, 'examples']}
+                  >
                     <Input.TextArea rows={3} />
                   </Form.Item>
-                  <Form.Item label="to" name={[field.name, 'to']}>
+                  <Form.Item label={t('to')} name={[field.name, 'to']}>
                     <Select
                       allowClear
                       options={buildCategorizeToOptions(

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

@@ -0,0 +1,46 @@
+import { useTranslate } from '@/hooks/commonHooks';
+import type { FormProps } from 'antd';
+import { Form, Input } from 'antd';
+import { IOperatorForm } from '../interface';
+
+type FieldType = {
+  prologue?: string;
+};
+
+const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
+  console.log('Success:', values);
+};
+
+const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
+  console.log('Failed:', errorInfo);
+};
+
+const MessageForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('chat');
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      style={{ maxWidth: 600 }}
+      initialValues={{ remember: true }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      onValuesChange={onValuesChange}
+      autoComplete="off"
+      form={form}
+    >
+      <Form.Item<FieldType>
+        name={'prologue'}
+        label={t('setAnOpener')}
+        tooltip={t('setAnOpenerTip')}
+        initialValue={t('setAnOpenerInitial')}
+      >
+        <Input.TextArea autoSize={{ minRows: 5 }} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default MessageForm;