Added semi-automatic mode to the metadata filter (#11886)

### What problem does this PR solve?

Retrieval metadata filtering adds semi-automatic mode, and users can
manually check the metadata key that participates in LLM to generate
filter conditions.
### Type of change

- [x] New Feature (non-breaking change which adds functionality)

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

@@ -5,6 +5,7 @@ import { z } from 'zod';
 import { SelectWithSearch } from '../originui/select-with-search';
 import { RAGFlowFormItem } from '../ragflow-form';
 import { MetadataFilterConditions } from './metadata-filter-conditions';
+import { MetadataSemiAutoFields } from './metadata-semi-auto-fields';
 
 type MetadataFilterProps = {
   prefix?: string;
@@ -25,6 +26,9 @@ export const MetadataFilterSchema = {
           }),
         )
         .optional(),
+      semi_auto: z
+        .array(z.string()) // 修改为字符串数组
+        .optional(),
     })
     .optional(),
 };
@@ -76,6 +80,12 @@ export function MetadataFilter({
           canReference={canReference}
         ></MetadataFilterConditions>
       )}
+      {hasKnowledge && metadata === DatasetMetadata.SemiAutomatic && (
+        <MetadataSemiAutoFields
+          kbIds={kbIds}
+          prefix={prefix}
+        ></MetadataSemiAutoFields>
+      )}
     </>
   );
 }

web/src/components/metadata-filter/metadata-semi-auto-fields.tsx

@@ -0,0 +1,100 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { useFetchKnowledgeMetadata } from '@/hooks/use-knowledge-request';
+import { Plus, X } from 'lucide-react';
+import { useCallback } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+export function MetadataSemiAutoFields({
+  kbIds,
+  prefix = '',
+}: {
+  kbIds: string[];
+  prefix?: string;
+}) {
+  const { t } = useTranslation();
+  const form = useFormContext();
+  const name = prefix + 'meta_data_filter.semi_auto';
+  const metadata = useFetchKnowledgeMetadata(kbIds);
+
+  const { fields, remove, append } = useFieldArray({
+    name,
+    control: form.control,
+  });
+
+  const add = useCallback(
+    (key: string) => () => {
+      append(key); // 直接添加字符串而不是对象
+    },
+    [append],
+  );
+
+  return (
+    <section className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <FormLabel>{t('chat.metadataKeys')}</FormLabel>
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <Button variant={'ghost'} type="button">
+              <Plus />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="max-h-[300px] !overflow-y-auto scrollbar-auto">
+            {Object.keys(metadata.data).map((key, idx) => {
+              return (
+                <DropdownMenuItem key={idx} onClick={add(key)}>
+                  {key}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="space-y-5">
+        {fields.map((field, index) => {
+          // 修改字段名称以直接引用数组元素
+          const typeField = `${name}.${index}`;
+          return (
+            <section key={field.id} className="flex gap-2">
+              <div className="w-full space-y-2">
+                <FormField
+                  control={form.control}
+                  name={typeField}
+                  render={({ field }) => (
+                    <FormItem className="flex-1 overflow-hidden">
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder={t('common.pleaseInput')}
+                          readOnly
+                        ></Input>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <Button variant={'ghost'} onClick={() => remove(index)}>
+                <X className="text-text-sub-title-invert " />
+              </Button>
+            </section>
+          );
+        })}
+      </div>
+    </section>
+  );
+}