gardel/lightrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced Text components with standard labels associated via htmlFor/id to fix accessibility warnings.

Browse Source
This commit is contained in:
yangdx
2025-05-04 23:23:56 +08:00
parent a3a32b6f59
commit ec41ce5b3a
1 changed files with 161 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
lightrag_webui/src/components/retrieval/QuerySettings.tsx
View File

@@ -1,6 +1,6 @@
import { useCallback } from 'react'
import { QueryMode, QueryRequest } from '@/api/lightrag'
import Text from '@/components/ui/Text'
// Removed unused import for Text component
import Input from '@/components/ui/Input'
import Checkbox from '@/components/ui/Checkbox'
import NumberInput from '@/components/ui/NumberInput'
@@ -13,6 +13,7 @@ import {
SelectTrigger,
SelectValue
} from '@/components/ui/Select'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip'
import { useSettingsStore } from '@/stores/settings'
import { useTranslation } from 'react-i18next'
@@ -35,17 +36,26 @@ export default function QuerySettings() {
<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"
/>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="query_mode_select" className="ml-1 cursor-help">
{t('retrievePanel.querySettings.queryMode')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.queryModeTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<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">
<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>
<SelectContent>
@@ -63,17 +73,26 @@ export default function QuerySettings() {
{/* Response Format */}
<>
<Text
className="ml-1"
text={t('retrievePanel.querySettings.responseFormat')}
tooltip={t('retrievePanel.querySettings.responseFormatTooltip')}
side="left"
/>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="response_format_select" className="ml-1 cursor-help">
{t('retrievePanel.querySettings.responseFormat')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.responseFormatTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<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">
<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>
<SelectContent>
@@ -88,16 +107,20 @@ export default function QuerySettings() {
{/* Top K */}
<>
<Text
className="ml-1"
text={t('retrievePanel.querySettings.topK')}
tooltip={t('retrievePanel.querySettings.topKTooltip')}
side="left"
/>
<div>
<label htmlFor="top_k" className="sr-only">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="top_k" className="ml-1 cursor-help">
{t('retrievePanel.querySettings.topK')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.topKTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div>
{/* Removed sr-only label */}
<NumberInput
id="top_k"
stepper={1}
@@ -112,16 +135,20 @@ export default function QuerySettings() {
{/* Max Tokens */}
<>
<>
<Text
className="ml-1"
text={t('retrievePanel.querySettings.maxTokensTextUnit')}
tooltip={t('retrievePanel.querySettings.maxTokensTextUnitTooltip')}
side="left"
/>
<div>
<label htmlFor="max_token_for_text_unit" className="sr-only">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="max_token_for_text_unit" className="ml-1 cursor-help">
{t('retrievePanel.querySettings.maxTokensTextUnit')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.maxTokensTextUnitTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div>
{/* Removed sr-only label */}
<NumberInput
id="max_token_for_text_unit"
stepper={500}
@@ -134,15 +161,20 @@ export default function QuerySettings() {
</>
<>
<Text
text={t('retrievePanel.querySettings.maxTokensGlobalContext')}
tooltip={t('retrievePanel.querySettings.maxTokensGlobalContextTooltip')}
side="left"
/>
<div>
<label htmlFor="max_token_for_global_context" className="sr-only">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="max_token_for_global_context" className="ml-1 cursor-help">
{t('retrievePanel.querySettings.maxTokensGlobalContext')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.maxTokensGlobalContextTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div>
{/* Removed sr-only label */}
<NumberInput
id="max_token_for_global_context"
stepper={500}
@@ -155,16 +187,20 @@ export default function QuerySettings() {
</>
<>
<Text
className="ml-1"
text={t('retrievePanel.querySettings.maxTokensLocalContext')}
tooltip={t('retrievePanel.querySettings.maxTokensLocalContextTooltip')}
side="left"
/>
<div>
<label htmlFor="max_token_for_local_context" className="sr-only">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="max_token_for_local_context" className="ml-1 cursor-help">
{t('retrievePanel.querySettings.maxTokensLocalContext')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.maxTokensLocalContextTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div>
{/* Removed sr-only label */}
<NumberInput
id="max_token_for_local_context"
stepper={500}
@@ -179,16 +215,20 @@ export default function QuerySettings() {
{/* History Turns */}
<>
<Text
className="ml-1"
text={t('retrievePanel.querySettings.historyTurns')}
tooltip={t('retrievePanel.querySettings.historyTurnsTooltip')}
side="left"
/>
<div>
<label htmlFor="history_turns" className="sr-only">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="history_turns" className="ml-1 cursor-help">
{t('retrievePanel.querySettings.historyTurns')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.historyTurnsTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div>
{/* Removed sr-only label */}
<NumberInput
className="!border-input"
id="history_turns"
@@ -205,16 +245,20 @@ export default function QuerySettings() {
{/* Keywords */}
<>
<>
<Text
className="ml-1"
text={t('retrievePanel.querySettings.hlKeywords')}
tooltip={t('retrievePanel.querySettings.hlKeywordsTooltip')}
side="left"
/>
<div>
<label htmlFor="hl_keywords" className="sr-only">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="hl_keywords" className="ml-1 cursor-help">
{t('retrievePanel.querySettings.hlKeywords')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.hlKeywordsTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div>
{/* Removed sr-only label */}
<Input
id="hl_keywords"
type="text"
@@ -232,16 +276,20 @@ export default function QuerySettings() {
</>
<>
<Text
className="ml-1"
text={t('retrievePanel.querySettings.llKeywords')}
tooltip={t('retrievePanel.querySettings.llKeywordsTooltip')}
side="left"
/>
<div>
<label htmlFor="ll_keywords" className="sr-only">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="ll_keywords" className="ml-1 cursor-help">
{t('retrievePanel.querySettings.llKeywords')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.llKeywordsTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div>
{/* Removed sr-only label */}
<Input
id="ll_keywords"
type="text"
@@ -262,14 +310,18 @@ export default function QuerySettings() {
{/* Toggle Options */}
<>
<div className="flex items-center gap-2">
<label htmlFor="only_need_context" className="flex-1">
<Text
className="ml-1"
text={t('retrievePanel.querySettings.onlyNeedContext')}
tooltip={t('retrievePanel.querySettings.onlyNeedContextTooltip')}
side="left"
/>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="only_need_context" className="flex-1 ml-1 cursor-help">
{t('retrievePanel.querySettings.onlyNeedContext')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.onlyNeedContextTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Checkbox
className="mr-1 cursor-pointer"
id="only_need_context"
@@ -279,14 +331,18 @@ export default function QuerySettings() {
</div>
<div className="flex items-center gap-2">
<label htmlFor="only_need_prompt" className="flex-1">
<Text
className="ml-1"
text={t('retrievePanel.querySettings.onlyNeedPrompt')}
tooltip={t('retrievePanel.querySettings.onlyNeedPromptTooltip')}
side="left"
/>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="only_need_prompt" className="flex-1 ml-1 cursor-help">
{t('retrievePanel.querySettings.onlyNeedPrompt')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.onlyNeedPromptTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Checkbox
className="mr-1 cursor-pointer"
id="only_need_prompt"
@@ -296,14 +352,18 @@ export default function QuerySettings() {
</div>
<div className="flex items-center gap-2">
<label htmlFor="stream" className="flex-1">
<Text
className="ml-1"
text={t('retrievePanel.querySettings.streamResponse')}
tooltip={t('retrievePanel.querySettings.streamResponseTooltip')}
side="left"
/>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<label htmlFor="stream" className="flex-1 ml-1 cursor-help">
{t('retrievePanel.querySettings.streamResponse')}
</label>
</TooltipTrigger>
<TooltipContent side="left">
<p>{t('retrievePanel.querySettings.streamResponseTooltip')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Checkbox
className="mr-1 cursor-pointer"
id="stream"