gmakstutis/LightRAG
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add reset buttons to query settings controls

Browse source 
- Add reset functionality for all settings
- Include default values for each setting
This commit is contained in:
yangdx 2025-07-31 12:29:26 +08:00
parent c6bd9f0329
commit a59f8e7ceb
1 changed files with 118 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
lightrag_webui/src/components/retrieval/QuerySettings.tsx
View file

@ -1,4 +1,4 @@
import { useCallback } from 'react' import { useCallback, useMemo } 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'
@ -15,6 +15,7 @@ import {
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip'
import { useSettingsStore } from '@/stores/settings' import { useSettingsStore } from '@/stores/settings'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { RotateCcw } from 'lucide-react'
export default function QuerySettings() { export default function QuerySettings() {
const { t } = useTranslation() const { t } = useTranslation()
@ -24,6 +25,42 @@ export default function QuerySettings() {
useSettingsStore.getState().updateQuerySettings({ [key]: value }) useSettingsStore.getState().updateQuerySettings({ [key]: value })
}, []) }, [])
// Default values for reset functionality
const defaultValues = useMemo(() => ({
mode: 'mix' as QueryMode,
response_type: 'Multiple Paragraphs',
top_k: 40,
chunk_top_k: 10,
max_entity_tokens: 10000,
max_relation_tokens: 10000,
max_total_tokens: 30000
}), [])
const handleReset = useCallback((key: keyof typeof defaultValues) => {
handleChange(key, defaultValues[key])
}, [handleChange, defaultValues])
// Reset button component
const ResetButton = ({ onClick, title }: { onClick: () => void; title: string }) => (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onClick}
className="mr-1 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
title={title}
>
<RotateCcw className="h-3 w-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" />
</button>
</TooltipTrigger>
<TooltipContent side="left">
<p>{title}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
return ( return (
<Card className="flex shrink-0 flex-col min-w-[220px]"> <Card className="flex shrink-0 flex-col min-w-[220px]">
<CardHeader className="px-4 pt-4 pb-2"> <CardHeader className="px-4 pt-4 pb-2">
@ -32,7 +69,7 @@ export default function QuerySettings() {
</CardHeader> </CardHeader>
<CardContent className="m-0 flex grow flex-col p-0 text-xs"> <CardContent className="m-0 flex grow flex-col p-0 text-xs">
<div className="relative size-full"> <div className="relative size-full">
<div className="absolute inset-0 flex flex-col gap-2 overflow-auto px-2"> <div className="absolute inset-0 flex flex-col gap-2 overflow-auto px-2 pr-3">
{/* Query Mode */} {/* Query Mode */}
<> <>
<TooltipProvider> <TooltipProvider>
@ -47,27 +84,33 @@ export default function QuerySettings() {
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<Select <div className="flex items-center gap-1">
value={querySettings.mode} <Select
onValueChange={(v) => handleChange('mode', v as QueryMode)} value={querySettings.mode}
> onValueChange={(v) => handleChange('mode', v as QueryMode)}
<SelectTrigger
id="query_mode_select"
className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0"
> >
<SelectValue /> <SelectTrigger
</SelectTrigger> id="query_mode_select"
<SelectContent> className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0 flex-1"
<SelectGroup> >
<SelectItem value="naive">{t('retrievePanel.querySettings.queryModeOptions.naive')}</SelectItem> <SelectValue />
<SelectItem value="local">{t('retrievePanel.querySettings.queryModeOptions.local')}</SelectItem> </SelectTrigger>
<SelectItem value="global">{t('retrievePanel.querySettings.queryModeOptions.global')}</SelectItem> <SelectContent>
<SelectItem value="hybrid">{t('retrievePanel.querySettings.queryModeOptions.hybrid')}</SelectItem> <SelectGroup>
<SelectItem value="mix">{t('retrievePanel.querySettings.queryModeOptions.mix')}</SelectItem> <SelectItem value="naive">{t('retrievePanel.querySettings.queryModeOptions.naive')}</SelectItem>
<SelectItem value="bypass">{t('retrievePanel.querySettings.queryModeOptions.bypass')}</SelectItem> <SelectItem value="local">{t('retrievePanel.querySettings.queryModeOptions.local')}</SelectItem>
</SelectGroup> <SelectItem value="global">{t('retrievePanel.querySettings.queryModeOptions.global')}</SelectItem>
</SelectContent> <SelectItem value="hybrid">{t('retrievePanel.querySettings.queryModeOptions.hybrid')}</SelectItem>
</Select> <SelectItem value="mix">{t('retrievePanel.querySettings.queryModeOptions.mix')}</SelectItem>
<SelectItem value="bypass">{t('retrievePanel.querySettings.queryModeOptions.bypass')}</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<ResetButton
onClick={() => handleReset('mode')}
title="Reset to default (Mix)"
/>
</div>
</> </>
{/* Response Format */} {/* Response Format */}
@ -84,24 +127,30 @@ export default function QuerySettings() {
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<Select <div className="flex items-center gap-1">
value={querySettings.response_type} <Select
onValueChange={(v) => handleChange('response_type', v)} value={querySettings.response_type}
> onValueChange={(v) => handleChange('response_type', v)}
<SelectTrigger
id="response_format_select"
className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0"
> >
<SelectValue /> <SelectTrigger
</SelectTrigger> id="response_format_select"
<SelectContent> className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0 flex-1"
<SelectGroup> >
<SelectItem value="Multiple Paragraphs">{t('retrievePanel.querySettings.responseFormatOptions.multipleParagraphs')}</SelectItem> <SelectValue />
<SelectItem value="Single Paragraph">{t('retrievePanel.querySettings.responseFormatOptions.singleParagraph')}</SelectItem> </SelectTrigger>
<SelectItem value="Bullet Points">{t('retrievePanel.querySettings.responseFormatOptions.bulletPoints')}</SelectItem> <SelectContent>
</SelectGroup> <SelectGroup>
</SelectContent> <SelectItem value="Multiple Paragraphs">{t('retrievePanel.querySettings.responseFormatOptions.multipleParagraphs')}</SelectItem>
</Select> <SelectItem value="Single Paragraph">{t('retrievePanel.querySettings.responseFormatOptions.singleParagraph')}</SelectItem>
<SelectItem value="Bullet Points">{t('retrievePanel.querySettings.responseFormatOptions.bulletPoints')}</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<ResetButton
onClick={() => handleReset('response_type')}
title="Reset to default (Multiple Paragraphs)"
/>
</div>
</> </>
{/* Top K */} {/* Top K */}
@ -118,7 +167,7 @@ export default function QuerySettings() {
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<div> <div className="flex items-center gap-1">
<Input <Input
id="top_k" id="top_k"
type="number" type="number"
@ -135,6 +184,11 @@ export default function QuerySettings() {
}} }}
min={1} min={1}
placeholder={t('retrievePanel.querySettings.topKPlaceholder')} placeholder={t('retrievePanel.querySettings.topKPlaceholder')}
className="h-9 flex-1 pr-2 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]"
/>
<ResetButton
onClick={() => handleReset('top_k')}
title="Reset to default"
/> />
</div> </div>
</> </>
@ -153,7 +207,7 @@ export default function QuerySettings() {
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<div> <div className="flex items-center gap-1">
<Input <Input
id="chunk_top_k" id="chunk_top_k"
type="number" type="number"
@ -170,6 +224,11 @@ export default function QuerySettings() {
}} }}
min={1} min={1}
placeholder={t('retrievePanel.querySettings.chunkTopKPlaceholder')} placeholder={t('retrievePanel.querySettings.chunkTopKPlaceholder')}
className="h-9 flex-1 pr-2 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]"
/>
<ResetButton
onClick={() => handleReset('chunk_top_k')}
title="Reset to default"
/> />
</div> </div>
</> </>
@ -188,7 +247,7 @@ export default function QuerySettings() {
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<div> <div className="flex items-center gap-1">
<Input <Input
id="max_entity_tokens" id="max_entity_tokens"
type="number" type="number"
@ -205,6 +264,11 @@ export default function QuerySettings() {
}} }}
min={1} min={1}
placeholder={t('retrievePanel.querySettings.maxEntityTokensPlaceholder')} placeholder={t('retrievePanel.querySettings.maxEntityTokensPlaceholder')}
className="h-9 flex-1 pr-2 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]"
/>
<ResetButton
onClick={() => handleReset('max_entity_tokens')}
title="Reset to default"
/> />
</div> </div>
</> </>
@ -223,7 +287,7 @@ export default function QuerySettings() {
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<div> <div className="flex items-center gap-1">
<Input <Input
id="max_relation_tokens" id="max_relation_tokens"
type="number" type="number"
@ -240,6 +304,11 @@ export default function QuerySettings() {
}} }}
min={1} min={1}
placeholder={t('retrievePanel.querySettings.maxRelationTokensPlaceholder')} placeholder={t('retrievePanel.querySettings.maxRelationTokensPlaceholder')}
className="h-9 flex-1 pr-2 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]"
/>
<ResetButton
onClick={() => handleReset('max_relation_tokens')}
title="Reset to default"
/> />
</div> </div>
</> </>
@ -258,7 +327,7 @@ export default function QuerySettings() {
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<div> <div className="flex items-center gap-1">
<Input <Input
id="max_total_tokens" id="max_total_tokens"
type="number" type="number"
@ -275,6 +344,11 @@ export default function QuerySettings() {
}} }}
min={1} min={1}
placeholder={t('retrievePanel.querySettings.maxTotalTokensPlaceholder')} placeholder={t('retrievePanel.querySettings.maxTotalTokensPlaceholder')}
className="h-9 flex-1 pr-2 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]"
/>
<ResetButton
onClick={() => handleReset('max_total_tokens')}
title="Reset to default"
/> />
</div> </div>
</> </>