Feat: Add RAGFlowSelect component #3221 (#5228)

### What problem does this PR solve?

Feat: Add RAGFlowSelect component #3221

### Type of change


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

web/src/pages/dataset/testing/testing-form.tsx

@@ -14,16 +14,20 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
+import { RAGFlowSelect } from '@/components/ui/select';
 import { FormSlider } from '@/components/ui/slider';
 import { Textarea } from '@/components/ui/textarea';
 
+const options = [
+  { label: 'xx', value: 'xx' },
+  { label: 'ii', value: 'ii' },
+];
+
+const groupOptions = [
+  { label: 'scsdv', options },
+  { label: 'thtyu', options: [{ label: 'jj', value: 'jj' }] },
+];
+
 const formSchema = z.object({
   username: z.number().min(2, {
     message: 'Username must be at least 2 characters.',
@@ -95,18 +99,12 @@ export default function TestingForm() {
           render={({ field }) => (
             <FormItem>
               <FormLabel>Username</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger className="bg-colors-background-inverse-weak">
-                    <SelectValue placeholder="Select a verified email to display" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectItem value="m@example.com">m@example.com</SelectItem>
-                  <SelectItem value="m@google.com">m@google.com</SelectItem>
-                  <SelectItem value="m@support.com">m@support.com</SelectItem>
-                </SelectContent>
-              </Select>
+              <RAGFlowSelect
+                value={field.value}
+                onChange={field.onChange}
+                FormControlComponent={FormControl}
+                options={groupOptions}
+              ></RAGFlowSelect>
               <FormDescription>
                 This is your public display name.
               </FormDescription>

web/src/pages/flow/canvas/node/node-header.tsx

@@ -59,7 +59,7 @@ const NodeHeader = ({
       >
         <OperatorIcon
           name={label as Operator}
-          color={operatorMap[label as Operator].color}
+          color={operatorMap[label as Operator]?.color}
         ></OperatorIcon>
         <span className="truncate text-center font-semibold text-sm">
           {name}