Improve query settings input experience in WebUI

lightrag_webui/src/components/retrieval/QuerySettings.tsx

@@ -2,7 +2,6 @@ import { useCallback } from 'react'
 import { QueryMode, QueryRequest } from '@/api/lightrag'
 // Removed unused import for Text component
 import Checkbox from '@/components/ui/Checkbox'
-import NumberInput from '@/components/ui/NumberInput'
 import Input from '@/components/ui/Input'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
 import {
@@ -121,13 +120,23 @@ export default function QuerySettings() {
               </TooltipProvider>
               <div>
                 {/* Removed sr-only label */}
-                <NumberInput
+                <Input
                   id="top_k"
-                  stepper={1}
-                  value={querySettings.top_k}
-                  onValueChange={(v) => handleChange('top_k', v)}
+                  type="number"
+                  value={querySettings.top_k ?? ''}
+                  onChange={(e) => {
+                    const value = e.target.value
+                    handleChange('top_k', value === '' ? '' : parseInt(value) || 0)
+                  }}
+                  onBlur={(e) => {
+                    const value = e.target.value
+                    if (value === '' || isNaN(parseInt(value))) {
+                      handleChange('top_k', 1)
+                    }
+                  }}
                   min={1}
                   placeholder={t('retrievePanel.querySettings.topKPlaceholder')}
+                  className="h-9"
                 />
               </div>
             </>
@@ -149,13 +158,23 @@ export default function QuerySettings() {
                 </TooltipProvider>
                 <div>
                   {/* Removed sr-only label */}
-                  <NumberInput
+                  <Input
                     id="max_token_for_text_unit"
-                    stepper={500}
-                    value={querySettings.max_token_for_text_unit}
-                    onValueChange={(v) => handleChange('max_token_for_text_unit', v)}
+                    type="number"
+                    value={querySettings.max_token_for_text_unit ?? ''}
+                    onChange={(e) => {
+                      const value = e.target.value
+                      handleChange('max_token_for_text_unit', value === '' ? '' : parseInt(value) || 0)
+                    }}
+                    onBlur={(e) => {
+                      const value = e.target.value
+                      if (value === '' || isNaN(parseInt(value))) {
+                        handleChange('max_token_for_text_unit', 10000)
+                      }
+                    }}
                     min={1}
                     placeholder={t('retrievePanel.querySettings.maxTokensTextUnit')}
+                    className="h-9"
                   />
                 </div>
               </>
@@ -175,13 +194,23 @@ export default function QuerySettings() {
                 </TooltipProvider>
                 <div>
                   {/* Removed sr-only label */}
-                  <NumberInput
+                  <Input
                     id="max_token_for_global_context"
-                    stepper={500}
-                    value={querySettings.max_token_for_global_context}
-                    onValueChange={(v) => handleChange('max_token_for_global_context', v)}
+                    type="number"
+                    value={querySettings.max_token_for_global_context ?? ''}
+                    onChange={(e) => {
+                      const value = e.target.value
+                      handleChange('max_token_for_global_context', value === '' ? '' : parseInt(value) || 0)
+                    }}
+                    onBlur={(e) => {
+                      const value = e.target.value
+                      if (value === '' || isNaN(parseInt(value))) {
+                        handleChange('max_token_for_global_context', 4000)
+                      }
+                    }}
                     min={1}
                     placeholder={t('retrievePanel.querySettings.maxTokensGlobalContext')}
+                    className="h-9"
                   />
                 </div>
               </>
@@ -201,13 +230,23 @@ export default function QuerySettings() {
                 </TooltipProvider>
                 <div>
                   {/* Removed sr-only label */}
-                  <NumberInput
+                  <Input
                     id="max_token_for_local_context"
-                    stepper={500}
-                    value={querySettings.max_token_for_local_context}
-                    onValueChange={(v) => handleChange('max_token_for_local_context', v)}
+                    type="number"
+                    value={querySettings.max_token_for_local_context ?? ''}
+                    onChange={(e) => {
+                      const value = e.target.value
+                      handleChange('max_token_for_local_context', value === '' ? '' : parseInt(value) || 0)
+                    }}
+                    onBlur={(e) => {
+                      const value = e.target.value
+                      if (value === '' || isNaN(parseInt(value))) {
+                        handleChange('max_token_for_local_context', 4000)
+                      }
+                    }}
                     min={1}
                     placeholder={t('retrievePanel.querySettings.maxTokensLocalContext')}
+                    className="h-9"
                   />
                 </div>
               </>
@@ -229,15 +268,23 @@ export default function QuerySettings() {
               </TooltipProvider>
               <div>
                 {/* Removed sr-only label */}
-                <NumberInput
-                  className="!border-input"
+                <Input
                   id="history_turns"
-                  stepper={1}
-                  type="text"
-                  value={querySettings.history_turns}
-                  onValueChange={(v) => handleChange('history_turns', v)}
+                  type="number"
+                  value={querySettings.history_turns ?? ''}
+                  onChange={(e) => {
+                    const value = e.target.value
+                    handleChange('history_turns', value === '' ? '' : parseInt(value) || 0)
+                  }}
+                  onBlur={(e) => {
+                    const value = e.target.value
+                    if (value === '' || isNaN(parseInt(value))) {
+                      handleChange('history_turns', 0)
+                    }
+                  }}
                   min={0}
                   placeholder={t('retrievePanel.querySettings.historyTurnsPlaceholder')}
+                  className="h-9"
                 />
               </div>
             </>