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,6 +99,7 @@ function RetrievalForm({ node }: INextOperatorForm) {
           <QueryVariable></QueryVariable>
           <KnowledgeBaseFormField></KnowledgeBaseFormField>
         </FormContainer>
+        <Collapse title={<div>Advanced Settings</div>}>
           <FormContainer>
             <SimilaritySliderFormField
               vectorSimilarityWeightName="keywords_similarity_weight"
@@ -109,6 +111,7 @@ function RetrievalForm({ node }: INextOperatorForm) {
             <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">
@@ -273,6 +277,7 @@ function SwitchForm({ node }: IOperatorForm) {
                 )}
               </div>
               <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
@@ -292,8 +297,9 @@ function SwitchForm({ node }: IOperatorForm) {
                     />
                     <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,6 +45,7 @@ const RetrievalForm = () => {
           <DescriptionField></DescriptionField>
           <KnowledgeBaseFormField></KnowledgeBaseFormField>
         </FormContainer>
+        <Collapse title={<div>Advanced Settings</div>}>
           <FormContainer>
             <SimilaritySliderFormField
               vectorSimilarityWeightName="keywords_similarity_weight"
@@ -55,6 +57,7 @@ const RetrievalForm = () => {
             <CrossLanguageFormField name="cross_languages"></CrossLanguageFormField>
             <UseKnowledgeGraphFormField name="use_kg"></UseKnowledgeGraphFormField>
           </FormContainer>
+        </Collapse>
       </form>
     </Form>
   );