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'
// 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>
</>