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}>

web/src/components/originui/select-with-search.tsx

@@ -3,6 +3,7 @@
 import { CheckIcon, ChevronDownIcon } from 'lucide-react';
 import {
   Fragment,
+  ReactNode,
   forwardRef,
   useCallback,
   useEffect,
@@ -29,7 +30,7 @@ import { cn } from '@/lib/utils';
 import { RAGFlowSelectOptionType } from '../ui/select';
 
 export type SelectWithSearchFlagOptionType = {
-  label: string;
+  label: ReactNode;
   value?: string;
   options?: RAGFlowSelectOptionType[];
 };
@@ -109,10 +110,10 @@ export const SelectWithSearch = forwardRef<
           <CommandInput placeholder="Search ..." />
           <CommandList>
             <CommandEmpty>No data found.</CommandEmpty>
-            {options.map((group) => {
+            {options.map((group, idx) => {
               if (group.options) {
                 return (
-                  <Fragment key={group.label}>
+                  <Fragment key={idx}>
                     <CommandGroup heading={group.label}>
                       {group.options.map((option) => (
                         <CommandItem