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)

web/src/components/metadata-filter/metadata-filter-conditions.tsx

@@ -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 { useCallback, useMemo } from 'react';
-import { useFieldArray, useFormContext } from 'react-hook-form';
+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">
+              <RenderField key={field.id} fieldName={typeField} index={index} />
-                <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>
             );
           })}
         </div>

web/src/components/ui/input-select.tsx

@@ -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')} &quot;{inputValue}&#34;
+              </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 };

web/src/pages/user-setting/setting-model/modal/paddleocr-modal/index.tsx

@@ -1,20 +1,20 @@
-import { useForm } from 'react-hook-form';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { t } from 'i18next';
 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"