Feat: Wrap DynamicVariableForm with Collapsible. #3221 (#5440)

### What problem does this PR solve?

Feat: Wrap DynamicVariableForm with Collapsible. #3221

### Type of change


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

web/src/pages/agent/form/components/next-dynamic-input-variable.tsx

@@ -1,6 +1,12 @@
 'use client';
 
+import { SideDown } from '@/assets/icon/Icon';
 import { Button } from '@/components/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
 import {
   FormControl,
   FormDescription,
@@ -11,7 +17,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
-import { CircleMinus, Plus } from 'lucide-react';
+import { Plus, Trash2 } from 'lucide-react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
@@ -61,9 +67,14 @@ export function DynamicVariableForm({ node }: IProps) {
                   <FormDescription />
                   <FormControl>
                     <RAGFlowSelect
-                      // placeholder={t('common.pleaseSelect')}
                       {...field}
+                      placeholder={t('common.pleaseSelect')}
                       options={options}
+                      onChange={(val) => {
+                        field.onChange(val);
+                        form.resetField(`query.${index}.value`);
+                        form.resetField(`query.${index}.component_id`);
+                      }}
                     ></RAGFlowSelect>
                   </FormControl>
                   <FormMessage />
@@ -79,7 +90,7 @@ export function DynamicVariableForm({ node }: IProps) {
                   <FormControl>
                     {typeValue === VariableType.Reference ? (
                       <RAGFlowSelect
-                        // placeholder={t('common.pleaseSelect')}
+                        placeholder={t('common.pleaseSelect')}
                         {...field}
                         options={valueOptions}
                       ></RAGFlowSelect>
@@ -91,17 +102,37 @@ export function DynamicVariableForm({ node }: IProps) {
                 </FormItem>
               )}
             />
-            <CircleMinus
-              className="cursor-pointer"
+            <Trash2
+              className="cursor-pointer mx-3 size-4 text-colors-text-functional-danger"
               onClick={() => remove(index)}
             />
           </div>
         );
       })}
-      <Button onClick={append} className="w-full mt-4">
+      <Button onClick={append} className="mt-4" variant={'outline'} size={'sm'}>
         <Plus />
         {t('flow.addVariable')}
       </Button>
     </div>
   );
 }
+
+export function DynamicInputVariable({ node }: IProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Collapsible defaultOpen className="group/collapsible pt-4">
+      <CollapsibleTrigger className="flex justify-between w-full pb-2">
+        <span className="font-bold text-2xl text-colors-text-neutral-strong">
+          {t('flow.input')}
+        </span>
+        <Button variant={'icon'} size={'icon'}>
+          <SideDown />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <DynamicVariableForm node={node}></DynamicVariableForm>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -13,7 +13,7 @@ import {
 import { Textarea } from '@/components/ui/textarea';
 import { useTranslation } from 'react-i18next';
 import { INextOperatorForm } from '../../interface';
-import { DynamicVariableForm } from '../components/next-dynamic-input-variable';
+import { DynamicInputVariable } from '../components/next-dynamic-input-variable';
 
 const RetrievalForm = ({ form, node }: INextOperatorForm) => {
   const { t } = useTranslation();
@@ -25,7 +25,7 @@ const RetrievalForm = ({ form, node }: INextOperatorForm) => {
           e.preventDefault();
         }}
       >
-        <DynamicVariableForm></DynamicVariableForm>
+        <DynamicInputVariable node={node}></DynamicInputVariable>
         <SimilaritySliderFormField vectorSimilarityWeightName="keywords_similarity_weight"></SimilaritySliderFormField>
         <TopNFormField></TopNFormField>
         <RerankFormFields></RerankFormFields>