Theme switch support (#3568)

### What problem does this PR solve?
- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: Yingfeng <yingfeng.zhang@gmail.com>
Co-authored-by: Jin Hai <haijin.chn@gmail.com>

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

@@ -18,6 +18,7 @@ import { Avatar, Button, Flex, List, Space, Typography } from 'antd';
 import FileIcon from '../file-icon';
 import IndentedTreeModal from '../indented-tree/modal';
 import NewDocumentLink from '../new-document-link';
+import { useTheme } from '../theme-provider';
 import { AssistantGroupButton, UserGroupButton } from './group-button';
 import styles from './index.less';
 
@@ -47,6 +48,7 @@ const MessageItem = ({
   regenerateMessage,
   showLikeButton = true,
 }: IProps) => {
+  const { theme } = useTheme();
   const isAssistant = item.role === MessageType.Assistant;
   const isUser = item.role === MessageType.User;
   const { data: documentList, setDocumentIds } = useFetchDocumentInfosByIds();
@@ -139,7 +141,11 @@ const MessageItem = ({
             </Space>
             <div
               className={
-                isAssistant ? styles.messageText : styles.messageUserText
+                isAssistant
+                  ? theme === 'dark'
+                    ? styles.messageTextDark
+                    : styles.messageText
+                  : styles.messageUserText
               }
             >
               <MarkdownContent
@@ -181,8 +187,8 @@ const MessageItem = ({
                 dataSource={documentList}
                 renderItem={(item) => {
                   // TODO:
-                  const fileThumbnail =
-                    documentThumbnails[item.id] || documentThumbnails[item.id];
+                  // const fileThumbnail =
+                  //   documentThumbnails[item.id] || documentThumbnails[item.id];
                   const fileExtension = getExtension(item.name);
                   return (
                     <List.Item>