Fix: Creating Knowledge Base Support Enter Key (#7258)

### What problem does this PR solve?


[https://github.com/infiniflow/ragflow/issues/7180](https://github.com/infiniflow/ragflow/issues/7180)
When creating a knowledge base, support the enter key
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/chat/chat-configuration-modal/index.tsx

@@ -142,6 +142,18 @@ const ChatConfigurationModal = ({
     }
   }, [initialDialog, form, visible, modelId]);
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Allow Enter in textareas
+    if (e.target instanceof HTMLTextAreaElement) {
+      return;
+    }
+
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleOk();
+    }
+  };
+
   return (
     <Modal
       title={title}
@@ -171,6 +183,7 @@ const ChatConfigurationModal = ({
         style={{ maxWidth: 600 }}
         validateMessages={validateMessages}
         colon={false}
+        onKeyDown={handleKeyDown}
       >
         {Object.entries(segmentedMap).map(([key, Element]) => (
           <Element

web/src/pages/flow/list/create-agent-modal.tsx

@@ -22,6 +22,12 @@ const CreateAgentModal = ({ visible, hideModal, loading, onOk }: IProps) => {
     return onOk(ret.name);
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      handleOk();
+    }
+  };
+
   return (
     <Modal
       title={t('createGraph', { keyPrefix: 'flow' })}
@@ -44,7 +50,7 @@ const CreateAgentModal = ({ visible, hideModal, loading, onOk }: IProps) => {
           name="name"
           rules={[{ required: true, message: t('namePlaceholder') }]}
         >
-          <Input />
+          <Input onKeyDown={handleKeyDown} />
         </Form.Item>
       </Form>
     </Modal>

web/src/pages/knowledge/knowledge-creating-modal/index.tsx

@@ -23,10 +23,15 @@ const KnowledgeCreatingModal = ({
 
   const handleOk = async () => {
     const ret = await form.validateFields();
-
     onOk(ret.name);
   };
 
+  const handleKeyDown = async (e) => {
+    if (e.key === 'Enter') {
+      await handleOk();
+    }
+  };
+
   return (
     <Modal
       title={t('createKnowledgeBase')}
@@ -48,7 +53,7 @@ const KnowledgeCreatingModal = ({
           name="name"
           rules={[{ required: true, message: t('namePlaceholder') }]}
         >
-          <Input placeholder={t('namePlaceholder')} />
+          <Input placeholder={t('namePlaceholder')} onKeyDown={handleKeyDown} />
         </Form.Item>
       </Form>
     </Modal>

web/src/pages/user-setting/setting-model/Tencent-modal/index.tsx

@@ -37,6 +37,12 @@ const TencentCloudModal = ({
     onOk?.(data);
   };
 
+  const handleKeyDown = async (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      await handleOk();
+    }
+  };
+
   return (
     <Modal
       title={t('addLlmTitle', { name: llmFactory })}
@@ -60,13 +66,7 @@ const TencentCloudModal = ({
       }}
       confirmLoading={loading}
     >
-      <Form
+      <Form>
-        name="basic"
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        layout={'vertical'}
-        form={form}
-      >
         <Form.Item<FieldType>
           label={t('modelType')}
           name="model_type"
@@ -113,14 +113,20 @@ const TencentCloudModal = ({
           name="TencentCloud_sid"
           rules={[{ required: true, message: t('TencentCloudSIDMessage') }]}
         >
-          <Input placeholder={t('TencentCloudSIDMessage')} />
+          <Input
+            placeholder={t('TencentCloudSIDMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('addTencentCloudSK')}
           name="TencentCloud_sk"
           rules={[{ required: true, message: t('TencentCloudSKMessage') }]}
         >
-          <Input placeholder={t('TencentCloudSKMessage')} />
+          <Input
+            placeholder={t('TencentCloudSKMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
       </Form>
     </Modal>

web/src/pages/user-setting/setting-model/api-key-modal/index.tsx

@@ -38,6 +38,12 @@ const ApiKeyModal = ({
     return onOk(ret);
   };
 
+  const handleKeyDown = async (e) => {
+    if (e.key === 'Enter') {
+      await handleOk();
+    }
+  };
+
   useEffect(() => {
     if (visible) {
       form.setFieldValue('api_key', initialValue);
@@ -67,7 +73,7 @@ const ApiKeyModal = ({
           tooltip={t('apiKeyTip')}
           rules={[{ required: true, message: t('apiKeyMessage') }]}
         >
-          <Input />
+          <Input onKeyDown={handleKeyDown} />
         </Form.Item>
         {modelsWithBaseUrl.some((x) => x === llmFactory) && (
           <Form.Item<FieldType>
@@ -75,7 +81,10 @@ const ApiKeyModal = ({
             name="base_url"
             tooltip={t('baseUrlTip')}
           >
-            <Input placeholder="https://api.openai.com/v1" />
+            <Input
+              placeholder="https://api.openai.com/v1"
+              onKeyDown={handleKeyDown}
+            />
           </Form.Item>
         )}
         {llmFactory?.toLowerCase() === 'Minimax'.toLowerCase() && (

web/src/pages/user-setting/setting-model/azure-openai-modal/index.tsx

@@ -49,6 +49,12 @@ const AzureOpenAIModal = ({
   const getOptions = (factory: string) => {
     return optionsMap.Default;
   };
+  const handleKeyDown = async (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      await handleOk();
+    }
+  };
+
   return (
     <Modal
       title={t('addLlmTitle', { name: llmFactory })}
@@ -83,14 +89,17 @@ const AzureOpenAIModal = ({
           name="api_base"
           rules={[{ required: true, message: t('baseUrlNameMessage') }]}
         >
-          <Input placeholder={t('baseUrlNameMessage')} />
+          <Input
+            placeholder={t('baseUrlNameMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('apiKey')}
           name="api_key"
           rules={[{ required: false, message: t('apiKeyMessage') }]}
         >
-          <Input placeholder={t('apiKeyMessage')} />
+          <Input placeholder={t('apiKeyMessage')} onKeyDown={handleKeyDown} />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('modelName')}
@@ -98,7 +107,10 @@ const AzureOpenAIModal = ({
           initialValue="gpt-3.5-turbo"
           rules={[{ required: true, message: t('modelNameMessage') }]}
         >
-          <Input placeholder={t('modelNameMessage')} />
+          <Input
+            placeholder={t('modelNameMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('apiVersion')}
@@ -106,7 +118,10 @@ const AzureOpenAIModal = ({
           initialValue="2024-02-01"
           rules={[{ required: false, message: t('apiVersionMessage') }]}
         >
-          <Input placeholder={t('apiVersionMessage')} />
+          <Input
+            placeholder={t('apiVersionMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('maxTokens')}

web/src/pages/user-setting/setting-model/google-modal/index.tsx

@@ -33,6 +33,12 @@ const GoogleModal = ({
     onOk?.(data);
   };
 
+  const handleKeyDown = async (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      await handleOk();
+    }
+  };
+
   return (
     <Modal
       title={t('addLlmTitle', { name: llmFactory })}
@@ -41,13 +47,7 @@ const GoogleModal = ({
       onCancel={hideModal}
       okButtonProps={{ loading }}
     >
-      <Form
+      <Form>
-        name="basic"
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        layout={'vertical'}
-        form={form}
-      >
         <Form.Item<FieldType>
           label={t('modelType')}
           name="model_type"
@@ -63,21 +63,30 @@ const GoogleModal = ({
           name="llm_name"
           rules={[{ required: true, message: t('GoogleModelIDMessage') }]}
         >
-          <Input placeholder={t('GoogleModelIDMessage')} />
+          <Input
+            placeholder={t('GoogleModelIDMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('addGoogleProjectID')}
           name="google_project_id"
           rules={[{ required: true, message: t('GoogleProjectIDMessage') }]}
         >
-          <Input placeholder={t('GoogleProjectIDMessage')} />
+          <Input
+            placeholder={t('GoogleProjectIDMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('addGoogleRegion')}
           name="google_region"
           rules={[{ required: true, message: t('GoogleRegionMessage') }]}
         >
-          <Input placeholder={t('GoogleRegionMessage')} />
+          <Input
+            placeholder={t('GoogleRegionMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('addGoogleServiceAccountKey')}
@@ -86,7 +95,10 @@ const GoogleModal = ({
             { required: true, message: t('GoogleServiceAccountKeyMessage') },
           ]}
         >
-          <Input placeholder={t('GoogleServiceAccountKeyMessage')} />
+          <Input
+            placeholder={t('GoogleServiceAccountKeyMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('maxTokens')}

web/src/pages/user-setting/setting-model/hunyuan-modal/index.tsx

@@ -40,6 +40,12 @@ const HunyuanModal = ({
     onOk?.(data);
   };
 
+  const handleKeyDown = async (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      await handleOk();
+    }
+  };
+
   return (
     <Modal
       title={t('addLlmTitle', { name: llmFactory })}
@@ -61,14 +67,20 @@ const HunyuanModal = ({
           name="hunyuan_sid"
           rules={[{ required: true, message: t('HunyuanSIDMessage') }]}
         >
-          <Input placeholder={t('HunyuanSIDMessage')} />
+          <Input
+            placeholder={t('HunyuanSIDMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('addHunyuanSK')}
           name="hunyuan_sk"
           rules={[{ required: true, message: t('HunyuanSKMessage') }]}
         >
-          <Input placeholder={t('HunyuanSKMessage')} />
+          <Input
+            placeholder={t('HunyuanSKMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
       </Form>
     </Modal>

web/src/pages/user-setting/setting-model/ollama-modal/index.tsx

@@ -50,6 +50,12 @@ const OllamaModal = ({
 
   const { t } = useTranslate('setting');
 
+  const handleKeyDown = async (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      await handleOk();
+    }
+  };
+
   const handleOk = async () => {
     const values = await form.validateFields();
     const modelType =
@@ -146,21 +152,27 @@ const OllamaModal = ({
           name="llm_name"
           rules={[{ required: true, message: t('modelNameMessage') }]}
         >
-          <Input placeholder={t('modelNameMessage')} />
+          <Input
+            placeholder={t('modelNameMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('addLlmBaseUrl')}
           name="api_base"
           rules={[{ required: true, message: t('baseUrlNameMessage') }]}
         >
-          <Input placeholder={t('baseUrlNameMessage')} />
+          <Input
+            placeholder={t('baseUrlNameMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('apiKey')}
           name="api_key"
           rules={[{ required: false, message: t('apiKeyMessage') }]}
         >
-          <Input placeholder={t('apiKeyMessage')} />
+          <Input placeholder={t('apiKeyMessage')} onKeyDown={handleKeyDown} />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('maxTokens')}
@@ -184,6 +196,7 @@ const OllamaModal = ({
           <InputNumber
             placeholder={t('maxTokensTip')}
             style={{ width: '100%' }}
+            onKeyDown={handleKeyDown}
           />
         </Form.Item>
 

web/src/pages/user-setting/setting-model/spark-modal/index.tsx

@@ -43,6 +43,12 @@ const SparkModal = ({
     onOk?.(data);
   };
 
+  const handleKeyDown = async (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      await handleOk();
+    }
+  };
+
   return (
     <Modal
       title={t('addLlmTitle', { name: llmFactory })}
@@ -52,13 +58,7 @@ const SparkModal = ({
       okButtonProps={{ loading }}
       confirmLoading={loading}
     >
-      <Form
+      <Form>
-        name="basic"
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        layout={'vertical'}
-        form={form}
-      >
         <Form.Item<FieldType>
           label={t('modelType')}
           name="model_type"
@@ -75,22 +75,20 @@ const SparkModal = ({
           name="llm_name"
           rules={[{ required: true, message: t('SparkModelNameMessage') }]}
         >
-          <Input placeholder={t('modelNameMessage')} />
+          <Input
+            placeholder={t('modelNameMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
-        <Form.Item noStyle dependencies={['model_type']}>
+        <Form.Item<FieldType>
-          {({ getFieldValue }) =>
+          label={t('addSparkAPIPassword')}
-            getFieldValue('model_type') === 'chat' && (
+          name="spark_api_password"
-              <Form.Item<FieldType>
+          rules={[{ required: true, message: t('SparkAPIPasswordMessage') }]}
-                label={t('addSparkAPIPassword')}
+        >
-                name="spark_api_password"
+          <Input
-                rules={[
+            placeholder={t('SparkAPIPasswordMessage')}
-                  { required: true, message: t('SparkAPIPasswordMessage') },
+            onKeyDown={handleKeyDown}
-                ]}
+          />
-              >
-                <Input placeholder={t('SparkAPIPasswordMessage')} />
-              </Form.Item>
-            )
-          }
         </Form.Item>
         <Form.Item noStyle dependencies={['model_type']}>
           {({ getFieldValue }) =>

web/src/pages/user-setting/setting-model/yiyan-modal/index.tsx

@@ -41,6 +41,12 @@ const YiyanModal = ({
     onOk?.(data);
   };
 
+  const handleKeyDown = async (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      await handleOk();
+    }
+  };
+
   return (
     <Modal
       title={t('addLlmTitle', { name: llmFactory })}
@@ -74,21 +80,24 @@ const YiyanModal = ({
           name="llm_name"
           rules={[{ required: true, message: t('yiyanModelNameMessage') }]}
         >
-          <Input placeholder={t('yiyanModelNameMessage')} />
+          <Input
+            placeholder={t('yiyanModelNameMessage')}
+            onKeyDown={handleKeyDown}
+          />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('addyiyanAK')}
           name="yiyan_ak"
           rules={[{ required: true, message: t('yiyanAKMessage') }]}
         >
-          <Input placeholder={t('yiyanAKMessage')} />
+          <Input placeholder={t('yiyanAKMessage')} onKeyDown={handleKeyDown} />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('addyiyanSK')}
           name="yiyan_sk"
           rules={[{ required: true, message: t('yiyanSKMessage') }]}
         >
-          <Input placeholder={t('yiyanSKMessage')} />
+          <Input placeholder={t('yiyanSKMessage')} onKeyDown={handleKeyDown} />
         </Form.Item>
         <Form.Item<FieldType>
           label={t('maxTokens')}