Fix: Fixed the issue that the content of the Dropdown section cannot be seen when selecting the next operator #3221 (#8918)

…be seen when selecting the next operator #3221

### What problem does this PR solve?
Fix: Fixed the issue that the content of the Dropdown section cannot be
seen when selecting the next operator #3221

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/highlight-markdown/index.tsx

@@ -1,7 +1,10 @@
 import classNames from 'classnames';
 import Markdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import {
+  oneDark,
+  oneLight,
+} from 'react-syntax-highlighter/dist/esm/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
@@ -34,7 +37,7 @@ const HightLightMarkdown = ({
                 {...rest}
                 PreTag="div"
                 language={match[1]}
-                style={dark && oneDark}
+                style={dark ? oneDark : oneLight}
               >
                 {String(children).replace(/\n$/, '')}
               </SyntaxHighlighter>

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

@@ -3,7 +3,6 @@ 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';
 
@@ -18,21 +17,13 @@ interface IProps {
 const NextInnerLLMSelect = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   IProps
->(({ value, disabled, onChange }, ref) => {
+>(({ value, disabled }, 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/llm-setting-items/next.tsx

@@ -5,6 +5,7 @@ import { camelCase } from 'lodash';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { z } from 'zod';
+import { SelectWithSearch } from '../originui/select-with-search';
 import {
   FormControl,
   FormField,
@@ -15,9 +16,7 @@ import {
 import {
   Select,
   SelectContent,
-  SelectGroup,
   SelectItem,
-  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from '../ui/select';
@@ -49,8 +48,6 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
     LlmModelType.Image2text,
   ]);
 
-  // useWatchFreedomChange();
-
   const handleChange = useHandleFreedomChange();
 
   const parameterOptions = Object.values(ModelVariableType).map((x) => ({
@@ -74,7 +71,11 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
           <FormItem>
             <FormLabel>{t('model')}</FormLabel>
             <FormControl>
-              <Select onValueChange={field.onChange} {...field}>
+              <SelectWithSearch
+                options={modelOptions}
+                {...field}
+              ></SelectWithSearch>
+              {/* <Select onValueChange={field.onChange} {...field}>
                 <SelectTrigger value={field.value}>
                   <SelectValue />
                 </SelectTrigger>
@@ -94,7 +95,7 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
                     </SelectGroup>
                   ))}
                 </SelectContent>
-              </Select>
+              </Select> */}
             </FormControl>
             <FormMessage />
           </FormItem>

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

@@ -32,6 +32,7 @@ import { RAGFlowSelectOptionType } from '../ui/select';
 export type SelectWithSearchFlagOptionType = {
   label: ReactNode;
   value?: string;
+  disabled?: boolean;
   options?: RAGFlowSelectOptionType[];
 };
 
@@ -119,6 +120,7 @@ export const SelectWithSearch = forwardRef<
                         <CommandItem
                           key={option.value}
                           value={option.value}
+                          disabled={option.disabled}
                           onSelect={handleSelect}
                         >
                           <span className="text-lg leading-none">
@@ -138,6 +140,7 @@ export const SelectWithSearch = forwardRef<
                   <CommandItem
                     key={group.value}
                     value={group.value}
+                    disabled={group.disabled}
                     onSelect={handleSelect}
                   >
                     <span className="text-lg leading-none">{group.label}</span>