282 lines
11 KiB
TypeScript
282 lines
11 KiB
TypeScript
import { useCallback } from 'react'
|
|
import { QueryMode, QueryRequest } from '@/api/lightrag'
|
|
import Text from '@/components/ui/Text'
|
|
import Input from '@/components/ui/Input'
|
|
import Checkbox from '@/components/ui/Checkbox'
|
|
import NumberInput from '@/components/ui/NumberInput'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from '@/components/ui/Select'
|
|
import { useSettingsStore } from '@/stores/settings'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export default function QuerySettings() {
|
|
const { t } = useTranslation()
|
|
const querySettings = useSettingsStore((state) => state.querySettings)
|
|
|
|
const handleChange = useCallback((key: keyof QueryRequest, value: any) => {
|
|
useSettingsStore.getState().updateQuerySettings({ [key]: value })
|
|
}, [])
|
|
|
|
return (
|
|
<Card className="flex shrink-0 flex-col">
|
|
<CardHeader className="px-4 pt-4 pb-2">
|
|
<CardTitle>{t('retrievePanel.querySettings.parametersTitle')}</CardTitle>
|
|
<CardDescription>{t('retrievePanel.querySettings.parametersDescription')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="m-0 flex grow flex-col p-0 text-xs">
|
|
<div className="relative size-full">
|
|
<div className="absolute inset-0 flex flex-col gap-2 overflow-auto px-2">
|
|
{/* Query Mode */}
|
|
<>
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.queryMode')}
|
|
tooltip={t('retrievePanel.querySettings.queryModeTooltip')}
|
|
side="left"
|
|
/>
|
|
<Select
|
|
value={querySettings.mode}
|
|
onValueChange={(v) => handleChange('mode', v as QueryMode)}
|
|
>
|
|
<SelectTrigger className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="naive">{t('retrievePanel.querySettings.queryModeOptions.naive')}</SelectItem>
|
|
<SelectItem value="local">{t('retrievePanel.querySettings.queryModeOptions.local')}</SelectItem>
|
|
<SelectItem value="global">{t('retrievePanel.querySettings.queryModeOptions.global')}</SelectItem>
|
|
<SelectItem value="hybrid">{t('retrievePanel.querySettings.queryModeOptions.hybrid')}</SelectItem>
|
|
<SelectItem value="mix">{t('retrievePanel.querySettings.queryModeOptions.mix')}</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</>
|
|
|
|
{/* Response Format */}
|
|
<>
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.responseFormat')}
|
|
tooltip={t('retrievePanel.querySettings.responseFormatTooltip')}
|
|
side="left"
|
|
/>
|
|
<Select
|
|
value={querySettings.response_type}
|
|
onValueChange={(v) => handleChange('response_type', v)}
|
|
>
|
|
<SelectTrigger className="hover:bg-primary/5 h-9 cursor-pointer focus:ring-0 focus:ring-offset-0 focus:outline-0 active:right-0">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="Multiple Paragraphs">{t('retrievePanel.querySettings.responseFormatOptions.multipleParagraphs')}</SelectItem>
|
|
<SelectItem value="Single Paragraph">{t('retrievePanel.querySettings.responseFormatOptions.singleParagraph')}</SelectItem>
|
|
<SelectItem value="Bullet Points">{t('retrievePanel.querySettings.responseFormatOptions.bulletPoints')}</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</>
|
|
|
|
{/* Top K */}
|
|
<>
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.topK')}
|
|
tooltip={t('retrievePanel.querySettings.topKTooltip')}
|
|
side="left"
|
|
/>
|
|
<NumberInput
|
|
id="top_k"
|
|
stepper={1}
|
|
value={querySettings.top_k}
|
|
onValueChange={(v) => handleChange('top_k', v)}
|
|
min={1}
|
|
placeholder={t('retrievePanel.querySettings.topKPlaceholder')}
|
|
/>
|
|
</>
|
|
|
|
{/* Max Tokens */}
|
|
<>
|
|
<>
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.maxTokensTextUnit')}
|
|
tooltip={t('retrievePanel.querySettings.maxTokensTextUnitTooltip')}
|
|
side="left"
|
|
/>
|
|
<NumberInput
|
|
id="max_token_for_text_unit"
|
|
stepper={500}
|
|
value={querySettings.max_token_for_text_unit}
|
|
onValueChange={(v) => handleChange('max_token_for_text_unit', v)}
|
|
min={1}
|
|
placeholder={t('retrievePanel.querySettings.maxTokensTextUnit')}
|
|
/>
|
|
</>
|
|
|
|
<>
|
|
<Text
|
|
text={t('retrievePanel.querySettings.maxTokensGlobalContext')}
|
|
tooltip={t('retrievePanel.querySettings.maxTokensGlobalContextTooltip')}
|
|
side="left"
|
|
/>
|
|
<NumberInput
|
|
id="max_token_for_global_context"
|
|
stepper={500}
|
|
value={querySettings.max_token_for_global_context}
|
|
onValueChange={(v) => handleChange('max_token_for_global_context', v)}
|
|
min={1}
|
|
placeholder={t('retrievePanel.querySettings.maxTokensGlobalContext')}
|
|
/>
|
|
</>
|
|
|
|
<>
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.maxTokensLocalContext')}
|
|
tooltip={t('retrievePanel.querySettings.maxTokensLocalContextTooltip')}
|
|
side="left"
|
|
/>
|
|
<NumberInput
|
|
id="max_token_for_local_context"
|
|
stepper={500}
|
|
value={querySettings.max_token_for_local_context}
|
|
onValueChange={(v) => handleChange('max_token_for_local_context', v)}
|
|
min={1}
|
|
placeholder={t('retrievePanel.querySettings.maxTokensLocalContext')}
|
|
/>
|
|
</>
|
|
</>
|
|
|
|
{/* History Turns */}
|
|
<>
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.historyTurns')}
|
|
tooltip={t('retrievePanel.querySettings.historyTurnsTooltip')}
|
|
side="left"
|
|
/>
|
|
<NumberInput
|
|
className="!border-input"
|
|
id="history_turns"
|
|
stepper={1}
|
|
type="text"
|
|
value={querySettings.history_turns}
|
|
onValueChange={(v) => handleChange('history_turns', v)}
|
|
min={0}
|
|
placeholder={t('retrievePanel.querySettings.historyTurnsPlaceholder')}
|
|
/>
|
|
</>
|
|
|
|
{/* Keywords */}
|
|
<>
|
|
<>
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.hlKeywords')}
|
|
tooltip={t('retrievePanel.querySettings.hlKeywordsTooltip')}
|
|
side="left"
|
|
/>
|
|
<Input
|
|
id="hl_keywords"
|
|
type="text"
|
|
value={querySettings.hl_keywords?.join(', ')}
|
|
onChange={(e) => {
|
|
const keywords = e.target.value
|
|
.split(',')
|
|
.map((k) => k.trim())
|
|
.filter((k) => k !== '')
|
|
handleChange('hl_keywords', keywords)
|
|
}}
|
|
placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
|
|
/>
|
|
</>
|
|
|
|
<>
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.llKeywords')}
|
|
tooltip={t('retrievePanel.querySettings.llKeywordsTooltip')}
|
|
side="left"
|
|
/>
|
|
<Input
|
|
id="ll_keywords"
|
|
type="text"
|
|
value={querySettings.ll_keywords?.join(', ')}
|
|
onChange={(e) => {
|
|
const keywords = e.target.value
|
|
.split(',')
|
|
.map((k) => k.trim())
|
|
.filter((k) => k !== '')
|
|
handleChange('ll_keywords', keywords)
|
|
}}
|
|
placeholder={t('retrievePanel.querySettings.hlkeywordsPlaceHolder')}
|
|
/>
|
|
</>
|
|
</>
|
|
|
|
{/* Toggle Options */}
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.onlyNeedContext')}
|
|
tooltip={t('retrievePanel.querySettings.onlyNeedContextTooltip')}
|
|
side="left"
|
|
/>
|
|
<div className="grow" />
|
|
<Checkbox
|
|
className="mr-1 cursor-pointer"
|
|
id="only_need_context"
|
|
checked={querySettings.only_need_context}
|
|
onCheckedChange={(checked) => handleChange('only_need_context', checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.onlyNeedPrompt')}
|
|
tooltip={t('retrievePanel.querySettings.onlyNeedPromptTooltip')}
|
|
side="left"
|
|
/>
|
|
<div className="grow" />
|
|
<Checkbox
|
|
className="mr-1 cursor-pointer"
|
|
id="only_need_prompt"
|
|
checked={querySettings.only_need_prompt}
|
|
onCheckedChange={(checked) => handleChange('only_need_prompt', checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Text
|
|
className="ml-1"
|
|
text={t('retrievePanel.querySettings.streamResponse')}
|
|
tooltip={t('retrievePanel.querySettings.streamResponseTooltip')}
|
|
side="left"
|
|
/>
|
|
<div className="grow" />
|
|
<Checkbox
|
|
className="mr-1 cursor-pointer"
|
|
id="stream"
|
|
checked={querySettings.stream}
|
|
onCheckedChange={(checked) => handleChange('stream', checked)}
|
|
/>
|
|
</div>
|
|
</>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|