Improve query settings input experience in WebUI

This commit is contained in:
yangdx 2025-07-13 01:35:21 +08:00
parent 465757aa6a
commit fc7b0a9273

View file

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