Feat: The operator is displayed only when the number of conditions is greater than 1 #3221 (#9077)

### What problem does this PR solve?

Feat: The operator is displayed only when the number of conditions is
greater than 1 #3221

### Type of change


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

web/src/pages/agent/form/retrieval-form/next.tsx

@@ -1,3 +1,4 @@
+import { Collapse } from '@/components/collapse';
 import { CrossLanguageFormField } from '@/components/cross-language-form-field';
 import { FormContainer } from '@/components/form-container';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
@@ -98,17 +99,19 @@ function RetrievalForm({ node }: INextOperatorForm) {
           <QueryVariable></QueryVariable>
           <KnowledgeBaseFormField></KnowledgeBaseFormField>
         </FormContainer>
-        <FormContainer>
-          <SimilaritySliderFormField
-            vectorSimilarityWeightName="keywords_similarity_weight"
-            isTooltipShown
-          ></SimilaritySliderFormField>
-          <TopNFormField></TopNFormField>
-          <RerankFormFields></RerankFormFields>
-          <EmptyResponseField></EmptyResponseField>
-          <CrossLanguageFormField name="cross_languages"></CrossLanguageFormField>
-          <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
-        </FormContainer>
+        <Collapse title={<div>Advanced Settings</div>}>
+          <FormContainer>
+            <SimilaritySliderFormField
+              vectorSimilarityWeightName="keywords_similarity_weight"
+              isTooltipShown
+            ></SimilaritySliderFormField>
+            <TopNFormField></TopNFormField>
+            <RerankFormFields></RerankFormFields>
+            <EmptyResponseField></EmptyResponseField>
+            <CrossLanguageFormField name="cross_languages"></CrossLanguageFormField>
+            <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
+          </FormContainer>
+        </Collapse>
         <Output list={outputList}></Output>
       </FormWrapper>
     </Form>

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

@@ -127,7 +127,8 @@ function ConditionCards({
                 'relative bg-transparent border-input-border border flex-1 min-w-0',
                 {
                   'before:w-10 before:absolute before:h-[1px] before:bg-input-border before:top-1/2 before:-left-10':
-                    index === 0 || index === fields.length - 1,
+                    fields.length > 1 &&
+                    (index === 0 || index === fields.length - 1),
                 },
               )}
             >
@@ -255,6 +256,9 @@ function SwitchForm({ node }: IOperatorForm) {
         }}
       >
         {fields.map((field, index) => {
+          const name = `${ConditionKey}.${index}`;
+          const conditions: Array<any> = form.getValues(`${name}.${ItemKey}`);
+          const conditionLength = conditions.length;
           return (
             <FormContainer key={field.id} className="">
               <div className="flex justify-between items-center">
@@ -272,28 +276,30 @@ function SwitchForm({ node }: IOperatorForm) {
                   </Button>
                 )}
               </div>
-              <section className="flex  gap-2 !mt-2 relative">
-                <section className="flex flex-col w-[72px]">
-                  <div className="relative  w-1 flex-1 before:absolute before:w-[1px]  before:bg-input-border before:top-20 before:bottom-0 before:left-10"></div>
-                  <FormField
-                    control={form.control}
-                    name={`${ConditionKey}.${index}.logical_operator`}
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormControl>
-                          <RAGFlowSelect
-                            {...field}
-                            options={switchLogicOperatorOptions}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <div className="relative  w-1 flex-1 before:absolute before:w-[1px]  before:bg-input-border before:top-0 before:bottom-36 before:left-10"></div>
-                </section>
+              <section className="flex gap-2 !mt-2 relative">
+                {conditionLength > 1 && (
+                  <section className="flex flex-col w-[72px]">
+                    <div className="relative  w-1 flex-1 before:absolute before:w-[1px]  before:bg-input-border before:top-20 before:bottom-0 before:left-10"></div>
+                    <FormField
+                      control={form.control}
+                      name={`${ConditionKey}.${index}.logical_operator`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <RAGFlowSelect
+                              {...field}
+                              options={switchLogicOperatorOptions}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <div className="relative  w-1 flex-1 before:absolute before:w-[1px]  before:bg-input-border before:top-0 before:bottom-36 before:left-10"></div>
+                  </section>
+                )}
                 <ConditionCards
-                  name={`${ConditionKey}.${index}`}
+                  name={name}
                   removeParent={remove}
                   parentIndex={index}
                   parentLength={fields.length}

web/src/pages/agent/form/tool-form/retrieval-form/index.tsx

@@ -1,3 +1,4 @@
+import { Collapse } from '@/components/collapse';
 import { CrossLanguageFormField } from '@/components/cross-language-form-field';
 import { FormContainer } from '@/components/form-container';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
@@ -44,17 +45,19 @@ const RetrievalForm = () => {
           <DescriptionField></DescriptionField>
           <KnowledgeBaseFormField></KnowledgeBaseFormField>
         </FormContainer>
-        <FormContainer>
-          <SimilaritySliderFormField
-            vectorSimilarityWeightName="keywords_similarity_weight"
-            isTooltipShown
-          ></SimilaritySliderFormField>
-          <TopNFormField></TopNFormField>
-          <RerankFormFields></RerankFormFields>
-          <EmptyResponseField></EmptyResponseField>
-          <CrossLanguageFormField name="cross_languages"></CrossLanguageFormField>
-          <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
-        </FormContainer>
+        <Collapse title={<div>Advanced Settings</div>}>
+          <FormContainer>
+            <SimilaritySliderFormField
+              vectorSimilarityWeightName="keywords_similarity_weight"
+              isTooltipShown
+            ></SimilaritySliderFormField>
+            <TopNFormField></TopNFormField>
+            <RerankFormFields></RerankFormFields>
+            <EmptyResponseField></EmptyResponseField>
+            <CrossLanguageFormField name="cross_languages"></CrossLanguageFormField>
+            <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
+          </FormContainer>
+        </Collapse>
       </form>
     </Form>
   );