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/group-button.tsx

@@ -1,3 +1,4 @@
+import { PromptIcon } from '@/assets/icon/Icon';
 import CopyToClipboard from '@/components/copy-to-clipboard';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { IRemoveMessageById } from '@/hooks/logic-hooks';
@@ -12,7 +13,6 @@ import {
 import { Radio, Tooltip } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import SvgIcon from '../svg-icon';
 import FeedbackModal from './feedback-modal';
 import { useRemoveMessage, useSendFeedback, useSpeech } from './hooks';
 import PromptModal from './prompt-modal';
@@ -70,7 +70,7 @@ export const AssistantGroupButton = ({
         )}
         {prompt && (
           <Radio.Button value="e" onClick={showPromptModal}>
-            <SvgIcon name={`prompt`} width={16}></SvgIcon>
+            <PromptIcon style={{ fontSize: '16px' }} />
           </Radio.Button>
         )}
       </Radio.Group>

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

@@ -6,10 +6,6 @@
   .messageItemSectionLeft {
     width: 80%;
   }
-  .messageItemSectionRight {
-    // width: 80%;
-    // max-width: 50vw;
-  }
   .messageItemContent {
     display: inline-flex;
     gap: 20px;
@@ -36,10 +32,17 @@
     background-color: #e6f4ff;
     word-break: break-all;
   }
+  .messageTextDark {
+    .chunkText();
+    .messageTextBase();
+    background-color: #1668dc;
+    word-break: break-all;
+  }
+
   .messageUserText {
     .chunkText();
     .messageTextBase();
-    background-color: rgb(248, 247, 247);
+    background-color: rgba(255, 255, 255, 0.3);
     word-break: break-all;
     text-align: justify;
   }

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>