Feat: Display the thinking process according to the start_to_think flag of the message #3221 (#8888)

### What problem does this PR solve?
Feat: Display the thinking process according to the start_to_think flag
of the message #3221
### Type of change


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

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

@@ -3,6 +3,7 @@ import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { forwardRef, memo, useState } from 'react';
 import { LlmSettingFieldItems } from '../llm-setting-items/next';
+import { SelectWithSearch } from '../originui/select-with-search';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { Select, SelectTrigger, SelectValue } from '../ui/select';
 
@@ -10,20 +11,28 @@ interface IProps {
   id?: string;
   value?: string;
   onInitialValue?: (value: string, option: any) => void;
-  onChange?: (value: string, option: any) => void;
+  onChange?: (value: string) => void;
   disabled?: boolean;
 }
 
 const NextInnerLLMSelect = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   IProps
->(({ value, disabled }, ref) => {
+>(({ value, disabled, onChange }, ref) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const modelOptions = useComposeLlmOptionsByModelTypes([
     LlmModelType.Chat,
     LlmModelType.Image2text,
   ]);
 
+  return (
+    <SelectWithSearch
+      options={modelOptions}
+      value={value}
+      onChange={onChange}
+    ></SelectWithSearch>
+  );
+
   return (
     <Select disabled={disabled} value={value}>
       <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>