diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 4a89e0a8d..a754ed8ea 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -544,7 +544,15 @@ The above is the content you need to summarize.`,
       preview: 'Preview',
       fileError: 'File error',
     },
-    flow: { cite: 'Cite', citeTip: 'citeTip' },
+    flow: {
+      cite: 'Cite',
+      citeTip: 'citeTip',
+      name: 'Name',
+      nameMessage: 'Please input name',
+      description: 'Description',
+      examples: 'Examples',
+      to: 'To',
+    },
     footer: {
       profile: 'All rights reserved @ React',
     },
diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts
index 5bc5c9177..bb10a4f3d 100644
--- a/web/src/locales/zh-traditional.ts
+++ b/web/src/locales/zh-traditional.ts
@@ -505,7 +505,15 @@ export default {
       preview: '預覽',
       fileError: '文件錯誤',
     },
-    flow: { cite: '引用', citeTip: 'citeTip' },
+    flow: {
+      cite: '引用',
+      citeTip: 'citeTip',
+      name: '名稱',
+      nameMessage: '請輸入名稱',
+      description: '描述',
+      examples: '範例',
+      to: '到',
+    },
     footer: {
       profile: '“保留所有權利 @ react”',
     },
diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts
index 34299e2ae..e24fdc8af 100644
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@@ -523,7 +523,15 @@ export default {
       preview: '预览',
       fileError: '文件错误',
     },
-    flow: { cite: '引用', citeTip: 'citeTip' },
+    flow: {
+      cite: '引用',
+      citeTip: 'citeTip',
+      name: '名称',
+      nameMessage: '请输入名称',
+      description: '描述',
+      examples: '示例',
+      to: '到',
+    },
     footer: {
       profile: 'All rights reserved @ React',
     },
diff --git a/web/src/pages/flow/categorize-form/dynamic-categorize.tsx b/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
index 8beb7e9a2..e77756dfe 100644
--- a/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
+++ b/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(
diff --git a/web/src/pages/flow/message-form/index.tsx b/web/src/pages/flow/message-form/index.tsx
new file mode 100644
index 000000000..0e0267e64
--- /dev/null
+++ b/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;