Feat: Add NextLLMSelect with shadcn-ui. #3221 (#5542)

### What problem does this PR solve?
Feat: Add NextLLMSelect with shadcn-ui. #3221

### Type of change


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

web/src/components/llm-select/index.tsx

@@ -1,7 +1,10 @@
 import { LlmModelType } from '@/constants/knowledge';
 import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
-import { Popover, Select } from 'antd';
+import { Popover as AntPopover, Select as AntSelect } from 'antd';
+import { useState } from 'react';
 import LlmSettingItems from '../llm-setting-items';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { Select, SelectTrigger, SelectValue } from '../ui/select';
 
 interface IProps {
   id?: string;
@@ -25,14 +28,14 @@ const LLMSelect = ({ id, value, onChange, disabled }: IProps) => {
   );
 
   return (
-    <Popover
+    <AntPopover
       content={content}
       trigger="click"
       placement="left"
       arrow={false}
       destroyTooltipOnHide
     >
-      <Select
+      <AntSelect
         options={modelOptions}
         style={{ width: '100%' }}
         dropdownStyle={{ display: 'none' }}
@@ -41,8 +44,37 @@ const LLMSelect = ({ id, value, onChange, disabled }: IProps) => {
         onChange={onChange}
         disabled={disabled}
       />
-    </Popover>
+    </AntPopover>
   );
 };
 
 export default LLMSelect;
+
+export function NextLLMSelect({ value, onChange, disabled }: IProps) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  return (
+    <Select value={value} onValueChange={onChange} disabled={disabled}>
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+        <PopoverTrigger asChild>
+          <SelectTrigger
+            onClick={(e) => {
+              e.preventDefault();
+              setIsPopoverOpen(true);
+            }}
+          >
+            <SelectValue placeholder="xxx" />
+          </SelectTrigger>
+        </PopoverTrigger>
+        <PopoverContent side={'left'}>
+          <LlmSettingItems
+            formItemLayout={{
+              labelCol: { span: 10 },
+              wrapperCol: { span: 14 },
+            }}
+          ></LlmSettingItems>
+        </PopoverContent>
+      </Popover>
+    </Select>
+  );
+}

web/src/components/ui/select.tsx

@@ -186,11 +186,12 @@ export type RAGFlowSelectGroupOptionType = {
   options: RAGFlowSelectOptionType[];
 };
 
-type RAGFlowSelectProps = Partial<ControllerRenderProps> & {
+export type RAGFlowSelectProps = Partial<ControllerRenderProps> & {
   FormControlComponent?: typeof FormControl;
   options?: (RAGFlowSelectOptionType | RAGFlowSelectGroupOptionType)[];
   allowClear?: boolean;
   placeholder?: React.ReactNode;
+  contentProps?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;
 } & SelectPrimitive.SelectProps;
 
 /**
@@ -220,6 +221,7 @@ export const RAGFlowSelect = forwardRef<
     options = [],
     allowClear,
     placeholder,
+    contentProps = {},
   },
   ref,
 ) {
@@ -265,7 +267,7 @@ export const RAGFlowSelect = forwardRef<
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
       </FormControlWidget>
-      <SelectContent>
+      <SelectContent {...contentProps}>
         {options.map((o, idx) => {
           if ('value' in o) {
             return (

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

@@ -1,4 +1,4 @@
-import LLMSelect from '@/components/llm-select';
+import { NextLLMSelect } from '@/components/llm-select';
 import { MessageHistoryWindowSizeFormField } from '@/components/message-history-window-size-item';
 import { PromptEditor } from '@/components/prompt-editor';
 import {
@@ -33,7 +33,7 @@ const GenerateForm = ({ form }: INextOperatorForm) => {
                 {t('chat.model')}
               </FormLabel>
               <FormControl>
-                <LLMSelect {...field} />
+                <NextLLMSelect {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>