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/components/originui/select-with-search.tsx

           aria-expanded={open}
           ref={ref}
           className={cn(
-            'bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]',
+            'bg-background hover:bg-background border-input w-full  justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]',
             triggerClassName,
           )}
         >

web/src/components/ui/multi-select.tsx

             {selectedValues.length > 0 ? (
               <div className="flex justify-between items-center w-full">
                 <div className="flex flex-wrap items-center">
-                  {selectedValues.slice(0, maxCount).map((value) => {
+                  {selectedValues?.slice(0, maxCount)?.map((value) => {
                     const option = options.find((o) => o.value === value);
                     const IconComponent = option?.icon;
                     return (

web/src/pages/agent/canvas/node/switch-node.tsx

           {positions.map((position, idx) => {
             return (
               <div key={idx}>
-                <section className="flex flex-col">
-                  <div className="flex justify-between">
-                    <span className="text-text-sub-title text-xs translate-y-2">
-                      {idx < positions.length - 1 &&
-                        position.condition?.logical_operator?.toUpperCase()}
-                    </span>
+                <section className="flex flex-col text-xs">
+                  <div className="text-right">
                     <span>{getConditionKey(idx, positions.length)}</span>
+                    <div className="text-text-sub-title">
+                      {idx < positions.length - 1 && position.text}
+                    </div>
                   </div>
+                  <span className="text-background-checked">
+                    {idx < positions.length - 1 &&
+                      position.condition?.logical_operator?.toUpperCase()}
+                  </span>
                   {position.condition && (
                     <ConditionBlock
                       condition={position.condition}

web/src/pages/agent/canvas/node/use-build-switch-handle-positions.ts

     return get(data, 'form.conditions', []);
   }, [data]);
 
-  useEffect(() => {
-    console.info('xxx0000');
-  }, [conditions]);
-
   const positions = useMemo(() => {
     const list: Array<{
       text: string;
     }> = [];
 
     [...conditions, ''].forEach((x, idx) => {
-      let top = idx === 0 ? 53 : list[idx - 1].top + 10 + 14; // case number (Case 1) height + flex gap
+      let top = idx === 0 ? 53 : list[idx - 1].top + 10 + 14 + 16 + 16; // case number (Case 1) height + flex gap
       if (idx >= 1) {
         const previousItems = conditions[idx - 1]?.items ?? [];
         if (previousItems.length > 0) {

web/src/pages/agent/form-sheet/form-config-map.tsx

 import RelevantForm from '../form/relevant-form';
 import RetrievalForm from '../form/retrieval-form/next';
 import RewriteQuestionForm from '../form/rewrite-question-form';
-import { StringTransformForm } from '../form/string-transform-form';
+import StringTransformForm from '../form/string-transform-form';
 import SwitchForm from '../form/switch-form';
 import TavilyExtractForm from '../form/tavily-extract-form';
 import TavilyForm from '../form/tavily-form';

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

 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 {
   ([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(),
   });
 
 
   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],
   );
                     <MultiSelect
                       options={DelimiterOptions}
                       onValueChange={field.onChange}
+                      defaultValue={field.value as string[]}
                       variant="inverted"
-                      {...field}
+                      // {...field}
                     />
                   ) : (
                     <RAGFlowSelect
       </div>
     </Form>
   );
-};
+}
+
+export default memo(StringTransformForm);

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

 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';
   );
 
   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,
                   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 />
   );
 }
 
-const SwitchForm = ({ node }: IOperatorForm) => {
+function SwitchForm({ node }: IOperatorForm) {
   const { t } = useTranslation();
   const values = useValues(node);
   const switchOperatorOptions = useBuildSwitchOperatorOptions();
         {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}
                           <RAGFlowSelect
                             {...field}
                             options={switchLogicOperatorOptions}
-                            triggerClassName="w-18"
                           />
                         </FormControl>
                         <FormMessage />
       </form>
     </Form>
   );
-};
+}
 
-export default SwitchForm;
+export default memo(SwitchForm);

web/src/pages/agents/agent-card.tsx

 import { MoreButton } from '@/components/more-button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IFlow } from '@/interfaces/database/flow';
       <CardContent className="p-2.5 pt-2 group">
         <section className="flex justify-between mb-2">
           <div className="flex gap-2 items-center">
-            <Avatar className="size-6 rounded-lg">
-              <AvatarImage src={data.avatar} />
-              <AvatarFallback className="rounded-lg ">CN</AvatarFallback>
-            </Avatar>
+            <RAGFlowAvatar
+              className="size-6 rounded-lg"
+              avatar={data.avatar}
+              name={data.title || 'CN'}
+            ></RAGFlowAvatar>
           </div>
           <AgentDropdown
             showAgentRenameModal={showAgentRenameModal}