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