mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-01-19 03:35:11 +08:00
Feat: The MetadataFilterConditions component supports adding values via search. (#12585)
### What problem does this PR solve? Feat: The MetadataFilterConditions component supports adding values via search. ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
chanx
GitHub
@ -20,10 +20,11 @@ import { useBuildSwitchOperatorOptions } from '@/hooks/logic-hooks/use-build-ope
|
||||
import { useFetchKnowledgeMetadata } from '@/hooks/use-knowledge-request';
|
||||
import { PromptEditor } from '@/pages/agent/form/components/prompt-editor';
|
||||
import { Plus, X } from 'lucide-react';
|
||||
import { useCallback } from 'react';
|
||||
import { useFieldArray, useFormContext } from 'react-hook-form';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LogicalOperator } from '../logical-operator';
|
||||
import { InputSelect } from '../ui/input-select';
|
||||
|
||||
export function MetadataFilterConditions({
|
||||
kbIds,
|
||||
@ -61,6 +62,94 @@ export function MetadataFilterConditions({
|
||||
[append, fields.length, form, logic],
|
||||
);
|
||||
|
||||
const RenderField = ({
|
||||
fieldName,
|
||||
index,
|
||||
}: {
|
||||
fieldName: string;
|
||||
index: number;
|
||||
}) => {
|
||||
const form = useFormContext();
|
||||
const key = useWatch({ name: fieldName });
|
||||
const valueOptions = useMemo(() => {
|
||||
if (!key || !metadata?.data || !metadata?.data[key]) return [];
|
||||
if (typeof metadata?.data[key] === 'object') {
|
||||
return Object.keys(metadata?.data[key]).map((item: string) => ({
|
||||
value: item,
|
||||
label: item,
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
}, [key]);
|
||||
|
||||
return (
|
||||
<section className="flex gap-2">
|
||||
<div className="flex-1 flex flex-col gap-2 min-w-0">
|
||||
<div className="flex items-center gap-1">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={fieldName}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1 overflow-hidden min-w-0">
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder={t('common.pleaseInput')}
|
||||
></Input>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Separator className="w-1 text-text-secondary" />
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`${name}.${index}.op`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1 overflow-hidden min-w-0">
|
||||
<FormControl>
|
||||
<SelectWithSearch
|
||||
{...field}
|
||||
options={switchOperatorOptions}
|
||||
></SelectWithSearch>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`${name}.${index}.value`}
|
||||
render={({ field: valueField }) => (
|
||||
<FormItem className="flex-1 overflow-hidden min-w-0">
|
||||
<FormControl>
|
||||
{canReference ? (
|
||||
<PromptEditor
|
||||
{...valueField}
|
||||
multiLine={false}
|
||||
showToolbar={false}
|
||||
></PromptEditor>
|
||||
) : (
|
||||
<InputSelect
|
||||
placeholder={t('common.pleaseInput')}
|
||||
{...valueField}
|
||||
options={valueOptions}
|
||||
className="w-full"
|
||||
/>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Button variant={'ghost'} onClick={() => remove(index)}>
|
||||
<X className="text-text-sub-title-invert " />
|
||||
</Button>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<section className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
@ -84,73 +173,11 @@ export function MetadataFilterConditions({
|
||||
</div>
|
||||
<section className="flex">
|
||||
{fields.length > 1 && <LogicalOperator name={logic}></LogicalOperator>}
|
||||
<div className="space-y-5 flex-1">
|
||||
<div className="space-y-5 flex-1 w-[calc(100%-56px)]">
|
||||
{fields.map((field, index) => {
|
||||
const typeField = `${name}.${index}.key`;
|
||||
return (
|
||||
<section key={field.id} className="flex gap-2">
|
||||
<div className="w-full space-y-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={typeField}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1 overflow-hidden">
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder={t('common.pleaseInput')}
|
||||
></Input>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Separator className="w-1 text-text-secondary" />
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`${name}.${index}.op`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1 overflow-hidden">
|
||||
<FormControl>
|
||||
<SelectWithSearch
|
||||
{...field}
|
||||
options={switchOperatorOptions}
|
||||
></SelectWithSearch>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`${name}.${index}.value`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1 overflow-hidden">
|
||||
<FormControl>
|
||||
{canReference ? (
|
||||
<PromptEditor
|
||||
{...field}
|
||||
multiLine={false}
|
||||
showToolbar={false}
|
||||
></PromptEditor>
|
||||
) : (
|
||||
<Input
|
||||
placeholder={t('common.pleaseInput')}
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Button variant={'ghost'} onClick={() => remove(index)}>
|
||||
<X className="text-text-sub-title-invert " />
|
||||
</Button>
|
||||
</section>
|
||||
<RenderField key={field.id} fieldName={typeField} index={index} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
303
web/src/components/ui/input-select.tsx
Normal file
303
web/src/components/ui/input-select.tsx
Normal file
@ -0,0 +1,303 @@
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { X } from 'lucide-react';
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from './popover';
|
||||
|
||||
/** Interface for tag select options */
|
||||
export interface InputSelectOption {
|
||||
/** Value of the option */
|
||||
value: string;
|
||||
/** Display label of the option */
|
||||
label: string;
|
||||
}
|
||||
|
||||
/** Properties for the InputSelect component */
|
||||
export interface InputSelectProps {
|
||||
/** Options for the select component */
|
||||
options?: InputSelectOption[];
|
||||
/** Selected values - string for single select, array for multi select */
|
||||
value?: string | string[];
|
||||
/** Callback when value changes */
|
||||
onChange?: (value: string | string[]) => void;
|
||||
/** Placeholder text */
|
||||
placeholder?: string;
|
||||
/** Additional class names */
|
||||
className?: string;
|
||||
/** Style object */
|
||||
style?: React.CSSProperties;
|
||||
/** Whether to allow multiple selections */
|
||||
multi?: boolean;
|
||||
}
|
||||
|
||||
const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
|
||||
(
|
||||
{
|
||||
options = [],
|
||||
value = [],
|
||||
onChange,
|
||||
placeholder = 'Select tags...',
|
||||
className,
|
||||
style,
|
||||
multi = false,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const [inputValue, setInputValue] = React.useState('');
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [isFocused, setIsFocused] = React.useState(false);
|
||||
const inputRef = React.useRef<HTMLInputElement>(null);
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Normalize value to array for consistent handling
|
||||
const normalizedValue = Array.isArray(value) ? value : value ? [value] : [];
|
||||
|
||||
/**
|
||||
* Removes a tag from the selected values
|
||||
* @param tagValue - The value of the tag to remove
|
||||
*/
|
||||
const handleRemoveTag = (tagValue: string) => {
|
||||
const newValue = normalizedValue.filter((v) => v !== tagValue);
|
||||
// Return single value if not multi-select, otherwise return array
|
||||
onChange?.(multi ? newValue : newValue[0] || '');
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds a tag to the selected values
|
||||
* @param optionValue - The value of the tag to add
|
||||
*/
|
||||
const handleAddTag = (optionValue: string) => {
|
||||
let newValue: string[];
|
||||
|
||||
if (multi) {
|
||||
// For multi-select, add to array if not already included
|
||||
if (!normalizedValue.includes(optionValue)) {
|
||||
newValue = [...normalizedValue, optionValue];
|
||||
onChange?.(newValue);
|
||||
}
|
||||
} else {
|
||||
// For single-select, replace the value
|
||||
newValue = [optionValue];
|
||||
onChange?.(optionValue);
|
||||
}
|
||||
|
||||
setInputValue('');
|
||||
setOpen(false); // Close the popover after adding a tag
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = e.target.value;
|
||||
setInputValue(newValue);
|
||||
setOpen(newValue.length > 0); // Open popover when there's input
|
||||
|
||||
// If input matches an option exactly, add it
|
||||
const matchedOption = options.find(
|
||||
(opt) => opt.label.toLowerCase() === newValue.toLowerCase(),
|
||||
);
|
||||
|
||||
if (matchedOption && !normalizedValue.includes(matchedOption.value)) {
|
||||
handleAddTag(matchedOption.value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (
|
||||
e.key === 'Backspace' &&
|
||||
inputValue === '' &&
|
||||
normalizedValue.length > 0
|
||||
) {
|
||||
// Remove last tag when pressing backspace on empty input
|
||||
const newValue = [...normalizedValue];
|
||||
newValue.pop();
|
||||
// Return single value if not multi-select, otherwise return array
|
||||
onChange?.(multi ? newValue : newValue[0] || '');
|
||||
} else if (e.key === 'Enter' && inputValue.trim() !== '') {
|
||||
e.preventDefault();
|
||||
// Add input value as a new tag if it doesn't exist in options
|
||||
const matchedOption = options.find(
|
||||
(opt) => opt.label.toLowerCase() === inputValue.toLowerCase(),
|
||||
);
|
||||
|
||||
if (matchedOption) {
|
||||
handleAddTag(matchedOption.value);
|
||||
} else {
|
||||
// If not in options, create a new tag with the input value
|
||||
if (
|
||||
!normalizedValue.includes(inputValue) &&
|
||||
inputValue.trim() !== ''
|
||||
) {
|
||||
handleAddTag(inputValue);
|
||||
}
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
inputRef.current?.blur();
|
||||
setOpen(false);
|
||||
} else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
// Allow navigation in the dropdown
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleContainerClick = () => {
|
||||
inputRef.current?.focus();
|
||||
setOpen(true);
|
||||
setIsFocused(true);
|
||||
};
|
||||
|
||||
const handleInputFocus = () => {
|
||||
setOpen(true);
|
||||
setIsFocused(true);
|
||||
};
|
||||
|
||||
const handleInputBlur = () => {
|
||||
// Delay closing to allow click on options
|
||||
setTimeout(() => {
|
||||
setOpen(false);
|
||||
setIsFocused(false);
|
||||
}, 150);
|
||||
};
|
||||
|
||||
// Filter options to exclude already selected ones (only for multi-select)
|
||||
const availableOptions = multi
|
||||
? options.filter((option) => !normalizedValue.includes(option.value))
|
||||
: options;
|
||||
|
||||
const filteredOptions = availableOptions.filter(
|
||||
(option) =>
|
||||
!inputValue ||
|
||||
option.label.toLowerCase().includes(inputValue.toLowerCase()),
|
||||
);
|
||||
|
||||
// If there are no matching options but there is an input value, create a new option with the input value
|
||||
const hasMatchingOptions = filteredOptions.length > 0;
|
||||
const showInputAsOption =
|
||||
inputValue &&
|
||||
!hasMatchingOptions &&
|
||||
!normalizedValue.includes(inputValue);
|
||||
|
||||
const triggerElement = (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-wrap items-center gap-1 w-full rounded-md border-0.5 border-border-button bg-bg-input px-3 py-2 min-h-[40px] cursor-text',
|
||||
'outline-none transition-colors',
|
||||
'focus-within:outline-none focus-within:ring-1 focus-within:ring-accent-primary',
|
||||
className,
|
||||
)}
|
||||
style={style}
|
||||
onClick={handleContainerClick}
|
||||
>
|
||||
{/* Render selected tags - only show tags if multi is true or if single select has a value */}
|
||||
{multi &&
|
||||
normalizedValue.map((tagValue) => {
|
||||
const option = options.find((opt) => opt.value === tagValue) || {
|
||||
value: tagValue,
|
||||
label: tagValue,
|
||||
};
|
||||
return (
|
||||
<div
|
||||
key={tagValue}
|
||||
className="flex items-center bg-bg-card text-text-primary rounded px-2 py-1 text-xs mr-1 mb-1 border border-border-card"
|
||||
>
|
||||
{option.label}
|
||||
<button
|
||||
type="button"
|
||||
className="ml-1 text-text-secondary hover:text-text-primary focus:outline-none"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveTag(tagValue);
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* For single select, show the selected value as text instead of a tag */}
|
||||
{!multi && normalizedValue[0] && (
|
||||
<div className="flex items-center mr-2 max-w-full">
|
||||
<div className="flex-1 truncate">
|
||||
{options.find((opt) => opt.value === normalizedValue[0])?.label ||
|
||||
normalizedValue[0]}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="ml-2 flex-[0_0_24px] text-text-secondary hover:text-text-primary focus:outline-none"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveTag(normalizedValue[0]);
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input field for adding new tags - hide if single select and value is already selected, or in multi select when not focused */}
|
||||
{(multi ? isFocused : multi || !normalizedValue[0]) && (
|
||||
<Input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={
|
||||
(multi ? normalizedValue.length === 0 : !normalizedValue[0])
|
||||
? placeholder
|
||||
: ''
|
||||
}
|
||||
className="flex-grow min-w-[50px] border-none px-1 py-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 h-auto !w-fit"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>{triggerElement}</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="p-0 min-w-[var(--radix-popover-trigger-width)] max-w-[var(--radix-popover-trigger-width)] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
||||
align="start"
|
||||
sideOffset={4}
|
||||
collisionPadding={4}
|
||||
onOpenAutoFocus={(e) => e.preventDefault()} // Prevent auto focus on content
|
||||
>
|
||||
<div className="max-h-60 overflow-auto">
|
||||
{filteredOptions.length > 0 &&
|
||||
filteredOptions.map((option) => (
|
||||
<div
|
||||
key={option.value}
|
||||
className="px-4 py-2 hover:bg-border-button cursor-pointer text-text-secondary w-full truncate"
|
||||
onClick={() => handleAddTag(option.value)}
|
||||
>
|
||||
{option.label}
|
||||
</div>
|
||||
))}
|
||||
{showInputAsOption && (
|
||||
<div
|
||||
key={inputValue}
|
||||
className="px-4 py-2 hover:bg-border-button cursor-pointer text-text-secondary w-full truncate"
|
||||
onClick={() => handleAddTag(inputValue)}
|
||||
>
|
||||
{t('common.add')} "{inputValue}"
|
||||
</div>
|
||||
)}
|
||||
{filteredOptions.length === 0 && !showInputAsOption && (
|
||||
<div className="px-4 py-2 text-text-secondary w-full truncate">
|
||||
{t('common.noResults')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
InputSelect.displayName = 'InputSelect';
|
||||
|
||||
export { InputSelect };
|
||||
@ -1,20 +1,20 @@
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { t } from 'i18next';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { RAGFlowFormItem } from '@/components/ragflow-form';
|
||||
import { RAGFlowSelect, RAGFlowSelectOptionType } from '@/components/ui/select';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Form } from '@/components/ui/form';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { RAGFlowSelect, RAGFlowSelectOptionType } from '@/components/ui/select';
|
||||
import { LLMFactory } from '@/constants/llm';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { t } from 'i18next';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { z } from 'zod';
|
||||
import { LLMHeader } from '../../components/llm-header';
|
||||
|
||||
const FormSchema = z.object({
|
||||
llm_name: z.string().min(1, {
|
||||
@ -81,7 +81,9 @@ const PaddleOCRModal = ({
|
||||
label={t('setting.modelName')}
|
||||
required
|
||||
>
|
||||
<Input placeholder={t('setting.paddleocr.modelNamePlaceholder')} />
|
||||
<Input
|
||||
placeholder={t('setting.paddleocr.modelNamePlaceholder')}
|
||||
/>
|
||||
</RAGFlowFormItem>
|
||||
<RAGFlowFormItem
|
||||
name="paddleocr_api_url"
|
||||
@ -94,7 +96,9 @@ const PaddleOCRModal = ({
|
||||
name="paddleocr_access_token"
|
||||
label={t('setting.paddleocr.accessToken')}
|
||||
>
|
||||
<Input placeholder={t('setting.paddleocr.accessTokenPlaceholder')} />
|
||||
<Input
|
||||
placeholder={t('setting.paddleocr.accessTokenPlaceholder')}
|
||||
/>
|
||||
</RAGFlowFormItem>
|
||||
<RAGFlowFormItem
|
||||
name="paddleocr_algorithm"
|
||||
|
||||
Reference in New Issue
Block a user