feat: Limit the maximum value of auto keywords to 30 #2687 (#2991)

### What problem does this PR solve?

feat: Limit the maximum value of auto keywords to 30 #2687

### Type of change

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

web/src/components/auto-keywords-item.tsx

@@ -1,21 +1,29 @@
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, InputNumber } from 'antd';
-
-const style = {
-  width: '100%',
-};
+import { Flex, Form, InputNumber, Slider } from 'antd';
 
 export const AutoKeywordsItem = () => {
   const { t } = useTranslate('knowledgeDetails');
 
   return (
-    <Form.Item
-      label={t('autoKeywords')}
-      name={['parser_config', 'auto_keywords']}
-      tooltip={t('autoKeywordsTip')}
-      initialValue={0}
-    >
-      <InputNumber style={style}></InputNumber>
+    <Form.Item label={t('autoKeywords')} tooltip={t('autoKeywordsTip')}>
+      <Flex gap={20} align="center">
+        <Flex flex={1}>
+          <Form.Item
+            name={['parser_config', 'auto_keywords']}
+            noStyle
+            initialValue={0}
+          >
+            <Slider max={30} style={{ width: '100%' }} />
+          </Form.Item>
+        </Flex>
+        <Form.Item
+          name={['parser_config', 'auto_keywords']}
+          noStyle
+          initialValue={0}
+        >
+          <InputNumber max={30} min={0} />
+        </Form.Item>
+      </Flex>
     </Form.Item>
   );
 };
@@ -24,13 +32,25 @@ export const AutoQuestionsItem = () => {
   const { t } = useTranslate('knowledgeDetails');
 
   return (
-    <Form.Item
-      label={t('autoQuestions')}
-      name={['parser_config', 'auto_questions']}
-      tooltip={t('autoQuestionsTip')}
-      initialValue={0}
-    >
-      <InputNumber style={style}></InputNumber>
+    <Form.Item label={t('autoQuestions')} tooltip={t('autoQuestionsTip')}>
+      <Flex gap={20} align="center">
+        <Flex flex={1}>
+          <Form.Item
+            name={['parser_config', 'auto_questions']}
+            noStyle
+            initialValue={0}
+          >
+            <Slider max={10} style={{ width: '100%' }} />
+          </Form.Item>
+        </Flex>
+        <Form.Item
+          name={['parser_config', 'auto_questions']}
+          noStyle
+          initialValue={0}
+        >
+          <InputNumber max={10} min={0} />
+        </Form.Item>
+      </Flex>
     </Form.Item>
   );
 };