Feat: Enable logical operators in metadata. #11387 #11376 (#11442)

### What problem does this PR solve?

Feat: Enable logical operators in metadata. #11387  #11376
### Type of change


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

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

@@ -14,6 +14,7 @@ type MetadataFilterProps = {
 export const MetadataFilterSchema = {
   meta_data_filter: z
     .object({
+      logic: z.string().optional(),
       method: z.string().optional(),
       manual: z
         .array(

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

@@ -15,14 +15,17 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
-import { SwitchOperatorOptions } from '@/constants/agent';
+import { SwitchLogicOperator, SwitchOperatorOptions } from '@/constants/agent';
 import { useBuildSwitchOperatorOptions } from '@/hooks/logic-hooks/use-build-operator-options';
+import { useBuildSwitchLogicOperatorOptions } from '@/hooks/logic-hooks/use-build-options';
 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 { useTranslation } from 'react-i18next';
+import { RAGFlowFormItem } from '../ragflow-form';
+import { RAGFlowSelect } from '../ui/select';
 
 export function MetadataFilterConditions({
   kbIds,
@@ -36,10 +39,13 @@ export function MetadataFilterConditions({
   const { t } = useTranslation();
   const form = useFormContext();
   const name = prefix + 'meta_data_filter.manual';
+  const logic = prefix + 'meta_data_filter.logic';
   const metadata = useFetchKnowledgeMetadata(kbIds);
 
   const switchOperatorOptions = useBuildSwitchOperatorOptions();
 
+  const switchLogicOperatorOptions = useBuildSwitchLogicOperatorOptions();
+
   const { fields, remove, append } = useFieldArray({
     name,
     control: form.control,
@@ -47,13 +53,14 @@ export function MetadataFilterConditions({
 
   const add = useCallback(
     (key: string) => () => {
+      form.setValue(logic, SwitchLogicOperator.And);
       append({
         key,
         value: '',
         op: SwitchOperatorOptions[0].value,
       });
     },
-    [append],
+    [append, form, logic],
   );
 
   return (
@@ -77,73 +84,92 @@ export function MetadataFilterConditions({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="space-y-5">
-        {fields.map((field, index) => {
-          const typeField = `${name}.${index}.key`;
-          return (
-            <div key={field.id} className="flex w-full items-center gap-2">
-              <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-3 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>
-                )}
-              />
-              <Separator className="w-3 text-text-secondary" />
-              <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}
-                        />
+      <section className="flex">
+        {fields.length > 1 && (
+          <div className="relative min-w-14">
+            <RAGFlowFormItem
+              name={logic}
+              className="absolute top-1/2 -translate-y-1/2 right-1 left-0 z-10 bg-bg-base"
+            >
+              <RAGFlowSelect
+                options={switchLogicOperatorOptions}
+                triggerClassName="w-full text-xs px-1 py-0 h-6"
+              ></RAGFlowSelect>
+            </RAGFlowFormItem>
+            <div className="absolute border-l border-y w-5 right-0 top-4 bottom-4 rounded-l-lg"></div>
+          </div>
+        )}
+        <div className="space-y-5 flex-1">
+          {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>
                       )}
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <Button variant={'ghost'} onClick={() => remove(index)}>
-                <X className="text-text-sub-title-invert " />
-              </Button>
-            </div>
-          );
-        })}
-      </div>
+                    />
+                    <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>
+      </section>
     </section>
   );
 }

web/src/constants/agent.tsx

@@ -179,3 +179,8 @@ export enum JsonSchemaDataType {
   Array = 'array',
   Object = 'object',
 }
+
+export enum SwitchLogicOperator {
+  And = 'and',
+  Or = 'or',
+}

web/src/hooks/logic-hooks/use-build-options.ts

@@ -0,0 +1,12 @@
+import { SwitchLogicOperator } from '@/constants/agent';
+import { buildOptions } from '@/utils/form';
+import { useTranslation } from 'react-i18next';
+
+export function useBuildSwitchLogicOperatorOptions() {
+  const { t } = useTranslation();
+  return buildOptions(
+    SwitchLogicOperator,
+    t,
+    'flow.switchLogicOperatorOptions',
+  );
+}

web/src/pages/agent/constant/index.tsx

@@ -10,6 +10,7 @@ import {
   JsonSchemaDataType,
   Operator,
   ProgrammingLanguage,
+  SwitchLogicOperator,
   SwitchOperatorOptions,
   initialLlmBaseValues,
 } from '@/constants/agent';
@@ -51,8 +52,6 @@ import {
 
 export const BeginId = 'begin';
 
-export const SwitchLogicOperatorOptions = ['and', 'or'];
-
 export const CommonOperatorList = Object.values(Operator).filter(
   (x) => x !== Operator.Note,
 );
@@ -308,7 +307,7 @@ export const initialExeSqlValues = {
 export const initialSwitchValues = {
   conditions: [
     {
-      logical_operator: SwitchLogicOperatorOptions[0],
+      logical_operator: SwitchLogicOperator.And,
       items: [
         {
           operator: SwitchOperatorOptions[0].value,

web/src/pages/agent/form/switch-form/index.tsx

@@ -11,16 +11,17 @@ import {
 import { RAGFlowSelect } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
+import { SwitchLogicOperator } from '@/constants/agent';
 import { useBuildSwitchOperatorOptions } from '@/hooks/logic-hooks/use-build-operator-options';
+import { useBuildSwitchLogicOperatorOptions } from '@/hooks/logic-hooks/use-build-options';
 import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from 'i18next';
 import { X } from 'lucide-react';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { SwitchLogicOperatorOptions } from '../../constant';
 import { IOperatorForm } from '../../interface';
 import { FormWrapper } from '../components/form-wrapper';
 import { QueryVariable } from '../components/query-variable';
@@ -185,12 +186,7 @@ function SwitchForm({ node }: IOperatorForm) {
     control: form.control,
   });
 
-  const switchLogicOperatorOptions = useMemo(() => {
-    return SwitchLogicOperatorOptions.map((x) => ({
-      value: x,
-      label: t(`flow.switchLogicOperatorOptions.${x}`),
-    }));
-  }, [t]);
+  const switchLogicOperatorOptions = useBuildSwitchLogicOperatorOptions();
 
   useWatchFormChange(node?.id, form);
 
@@ -253,7 +249,7 @@ function SwitchForm({ node }: IOperatorForm) {
         <BlockButton
           onClick={() =>
             append({
-              logical_operator: SwitchLogicOperatorOptions[0],
+              logical_operator: SwitchLogicOperator.And,
               [ItemKey]: [
                 {
                   operator: switchOperatorOptions[0].value,