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