Feat: Allows users to delete a condition of a conditional operator #3221 (#9022)

### What problem does this PR solve?

Feat: Allows users to delete a condition of a conditional operator #3221
### Type of change


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

web/src/pages/agent/form/string-transform-form/index.tsx

@@ -11,7 +11,7 @@ import { MultiSelect } from '@/components/ui/multi-select';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { buildOptions } from '@/utils/form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import {
@@ -30,14 +30,14 @@ const DelimiterOptions = Object.entries(StringTransformDelimiter).map(
   ([key, val]) => ({ label: key, value: val }),
 );
 
-export const StringTransformForm = ({ node }: INextOperatorForm) => {
+function StringTransformForm({ node }: INextOperatorForm) {
   const values = useValues(node);
 
   const FormSchema = z.object({
     method: z.string(),
     split_ref: z.string().optional(),
     script: z.string().optional(),
-    delimiters: z.array(z.string()),
+    delimiters: z.array(z.string()).or(z.string()),
     outputs: z.object({ result: z.object({ type: z.string() }) }).optional(),
   });
 
@@ -56,14 +56,18 @@ export const StringTransformForm = ({ node }: INextOperatorForm) => {
 
   const handleMethodChange = useCallback(
     (value: StringTransformMethod) => {
+      const isMerge = value === StringTransformMethod.Merge;
       const outputs = {
         ...initialStringTransformValues.outputs,
         result: {
-          type:
-            value === StringTransformMethod.Merge ? 'string' : 'Array<string>',
+          type: isMerge ? 'string' : 'Array<string>',
         },
       };
       form.setValue('outputs', outputs);
+      form.setValue(
+        'delimiters',
+        isMerge ? StringTransformDelimiter.Comma : [],
+      );
     },
     [form],
   );
@@ -132,8 +136,9 @@ export const StringTransformForm = ({ node }: INextOperatorForm) => {
                     <MultiSelect
                       options={DelimiterOptions}
                       onValueChange={field.onChange}
+                      defaultValue={field.value as string[]}
                       variant="inverted"
-                      {...field}
+                      // {...field}
                     />
                   ) : (
                     <RAGFlowSelect
@@ -158,4 +163,6 @@ export const StringTransformForm = ({ node }: INextOperatorForm) => {
       </div>
     </Form>
   );
-};
+}
+
+export default memo(StringTransformForm);

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

@@ -17,7 +17,7 @@ import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toLower } from 'lodash';
 import { X } from 'lucide-react';
-import { useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
@@ -118,13 +118,13 @@ function ConditionCards({
   );
 
   return (
-    <section className="flex-1 space-y-2.5">
+    <section className="flex-1 space-y-2.5 min-w-0">
       {fields.map((field, index) => {
         return (
           <div key={field.id} className="flex">
             <Card
               className={cn(
-                'relative bg-transparent border-input-border border flex-1 ',
+                '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,
@@ -136,12 +136,12 @@ function ConditionCards({
                   control={form.control}
                   name={`${name}.${index}.cpn_id`}
                   render={({ field }) => (
-                    <FormItem>
+                    <FormItem className="flex-1 min-w-0">
                       <FormControl>
                         <SelectWithSearch
                           {...field}
                           options={finalOptions}
-                          triggerClassName="w-30 text-background-checked bg-transparent border-none text-ellipsis"
+                          triggerClassName="text-background-checked bg-transparent border-none truncate"
                         ></SelectWithSearch>
                       </FormControl>
                       <FormMessage />
@@ -202,7 +202,7 @@ function ConditionCards({
   );
 }
 
-const SwitchForm = ({ node }: IOperatorForm) => {
+function SwitchForm({ node }: IOperatorForm) {
   const { t } = useTranslation();
   const values = useValues(node);
   const switchOperatorOptions = useBuildSwitchOperatorOptions();
@@ -257,9 +257,23 @@ const SwitchForm = ({ node }: IOperatorForm) => {
         {fields.map((field, index) => {
           return (
             <FormContainer key={field.id} className="">
-              <div>{index === 0 ? 'IF' : 'ELSEIF'}</div>
+              <div className="flex justify-between items-center">
+                <section>
+                  <span>{index === 0 ? 'IF' : 'ELSEIF'}</span>
+                  <div className="text-text-sub-title">Case {index + 1}</div>
+                </section>
+                {index !== 0 && (
+                  <Button
+                    variant={'secondary'}
+                    className="-translate-y-1"
+                    onClick={() => remove(index)}
+                  >
+                    Remove <X />
+                  </Button>
+                )}
+              </div>
               <section className="flex  gap-2 !mt-2 relative">
-                <section className="flex flex-col">
+                <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}
@@ -270,7 +284,6 @@ const SwitchForm = ({ node }: IOperatorForm) => {
                           <RAGFlowSelect
                             {...field}
                             options={switchLogicOperatorOptions}
-                            triggerClassName="w-18"
                           />
                         </FormControl>
                         <FormMessage />
@@ -307,6 +320,6 @@ const SwitchForm = ({ node }: IOperatorForm) => {
       </form>
     </Form>
   );
-};
+}
 
-export default SwitchForm;
+export default memo(SwitchForm);