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,11 +84,28 @@ export function MetadataFilterConditions({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="space-y-5">
+      <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 (
-            <div key={field.id} className="flex w-full items-center gap-2">
+              <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}
@@ -97,7 +121,7 @@ export function MetadataFilterConditions({
                         </FormItem>
                       )}
                     />
-              <Separator className="w-3 text-text-secondary" />
+                    <Separator className="w-1 text-text-secondary" />
                     <FormField
                       control={form.control}
                       name={`${name}.${index}.op`}
@@ -113,7 +137,7 @@ export function MetadataFilterConditions({
                         </FormItem>
                       )}
                     />
-              <Separator className="w-3 text-text-secondary" />
+                  </div>
                   <FormField
                     control={form.control}
                     name={`${name}.${index}.value`}
@@ -137,13 +161,15 @@ export function MetadataFilterConditions({
                       </FormItem>
                     )}
                   />
+                </div>
                 <Button variant={'ghost'} onClick={() => remove(index)}>
                   <X className="text-text-sub-title-invert " />
                 </Button>
-            </div>
+              </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(() => {
+  const switchLogicOperatorOptions = useBuildSwitchLogicOperatorOptions();
-    return SwitchLogicOperatorOptions.map((x) => ({
-      value: x,
-      label: t(`flow.switchLogicOperatorOptions.${x}`),
-    }));
-  }, [t]);
 
   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,