From c86afff447dc54b48030396e070d3774830f3c3a Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 24 Oct 2024 09:35:34 +0800
Subject: [PATCH] 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 | 58 +++++++++++++++--------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/web/src/components/auto-keywords-item.tsx b/web/src/components/auto-keywords-item.tsx
index c703d050b..61ea50469 100644
--- a/web/src/components/auto-keywords-item.tsx
+++ b/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>
   );
 };