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)
2025-08-03 04:40:37 +08:00 · 2025-04-25 18:53:52 +08:00 · 2025-04-25 18:53:52 +08:00 · 3da8776a3c
commit 3da8776a3c
parent 3052006ba8
11 changed files with 157 additions and 59 deletions
--- a/web/src/pages/chat/chat-configuration-modal/index.tsx
+++ b/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
--- a/web/src/pages/flow/list/create-agent-modal.tsx
+++ b/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>
--- a/web/src/pages/knowledge/knowledge-creating-modal/index.tsx
+++ b/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>
--- a/web/src/pages/user-setting/setting-model/Tencent-modal/index.tsx
+++ b/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
-        name="basic"
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        layout={'vertical'}
-        form={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>
--- a/web/src/pages/user-setting/setting-model/api-key-modal/index.tsx
+++ b/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() && (
--- a/web/src/pages/user-setting/setting-model/azure-openai-modal/index.tsx
+++ b/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')}
--- a/web/src/pages/user-setting/setting-model/google-modal/index.tsx
+++ b/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
-        name="basic"
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        layout={'vertical'}
-        form={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')}
--- a/web/src/pages/user-setting/setting-model/hunyuan-modal/index.tsx
+++ b/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>
--- a/web/src/pages/user-setting/setting-model/ollama-modal/index.tsx
+++ b/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>

--- a/web/src/pages/user-setting/setting-model/spark-modal/index.tsx
+++ b/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
-        name="basic"
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        layout={'vertical'}
-        form={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']}>
-          {({ getFieldValue }) =>
-            getFieldValue('model_type') === 'chat' && (
-              <Form.Item<FieldType>
-                label={t('addSparkAPIPassword')}
-                name="spark_api_password"
-                rules={[
-                  { required: true, message: t('SparkAPIPasswordMessage') },
-                ]}
-              >
-                <Input placeholder={t('SparkAPIPasswordMessage')} />
-              </Form.Item>
-            )
-          }
+        <Form.Item<FieldType>
+          label={t('addSparkAPIPassword')}
+          name="spark_api_password"
+          rules={[{ required: true, message: t('SparkAPIPasswordMessage') }]}
+        >
+          <Input
+            placeholder={t('SparkAPIPasswordMessage')}
+            onKeyDown={handleKeyDown}
+          />
        </Form.Item>
        <Form.Item noStyle dependencies={['model_type']}>
          {({ getFieldValue }) =>
--- a/web/src/pages/user-setting/setting-model/yiyan-modal/index.tsx
+++ b/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')}