Feat: Allow agent operators to select speech-to-text models #3221 (#9534)

### What problem does this PR solve?

Feat: Allow agent operators to select speech-to-text models #3221
### Type of change


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

web/src/components/large-model-form-field.tsx

@@ -38,9 +38,12 @@ export const LargeModelFilterFormSchema = {
   llm_filter: z.string().optional(),
 };
 
-type LargeModelFormFieldProps = Pick<NextInnerLLMSelectProps, 'showTTSModel'>;
+type LargeModelFormFieldProps = Pick<
+  NextInnerLLMSelectProps,
+  'showSpeech2TextModel'
+>;
 export function LargeModelFormField({
-  showTTSModel,
+  showSpeech2TextModel: showTTSModel,
 }: LargeModelFormFieldProps) {
   const form = useFormContext();
   const { t } = useTranslation();
@@ -91,7 +94,7 @@ export function LargeModelFormField({
                 <NextLLMSelect
                   {...field}
                   filter={filter}
-                  showTTSModel={showTTSModel}
+                  showSpeech2TextModel={showTTSModel}
                 />
               </FormControl>
             </section>

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

@@ -13,18 +13,18 @@ export interface NextInnerLLMSelectProps {
   onChange?: (value: string) => void;
   disabled?: boolean;
   filter?: string;
-  showTTSModel?: boolean;
+  showSpeech2TextModel?: boolean;
 }
 
 const NextInnerLLMSelect = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   NextInnerLLMSelectProps
->(({ value, disabled, filter, showTTSModel = false }, ref) => {
+>(({ value, disabled, filter, showSpeech2TextModel = false }, ref) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const ttsModel = useMemo(() => {
-    return showTTSModel ? [LlmModelType.TTS] : [];
-  }, [showTTSModel]);
+    return showSpeech2TextModel ? [LlmModelType.Speech2text] : [];
+  }, [showSpeech2TextModel]);
 
   const modelTypes = useMemo(() => {
     if (filter === LlmModelType.Chat) {

web/src/components/message-item/index.less

@@ -24,7 +24,7 @@
   .messageText {
     .chunkText();
     .messageTextBase();
-    background-color: #e6f4ff;
+    // background-color: #e6f4ff;
     word-break: break-word;
   }
   .messageTextDark {

web/src/components/message-item/index.tsx

@@ -9,6 +9,7 @@ import {
   useFetchDocumentThumbnailsByIds,
 } from '@/hooks/document-hooks';
 import { IRegenerateMessage, IRemoveMessageById } from '@/hooks/logic-hooks';
+import { cn } from '@/lib/utils';
 import { IMessage } from '@/pages/chat/interface';
 import MarkdownContent from '@/pages/chat/markdown-content';
 import { Avatar, Flex, Space } from 'antd';
@@ -129,13 +130,14 @@ const MessageItem = ({
               {/* <b>{isAssistant ? '' : nickname}</b> */}
             </Space>
             <div
-              className={
+              className={cn(
                 isAssistant
                   ? theme === 'dark'
                     ? styles.messageTextDark
                     : styles.messageText
-                  : styles.messageUserText
-              }
+                  : styles.messageUserText,
+                { '!bg-bg-card': !isAssistant },
+              )}
             >
               <MarkdownContent
                 loading={loading}