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-input/index.less

@@ -1,6 +1,6 @@
 .messageInputWrapper {
   margin-right: 20px;
-  background-color: #f5f5f8;
+  background-color: rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   :global(.ant-input-affix-wrapper) {
     border-bottom-right-radius: 0;

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

@@ -27,6 +27,7 @@ import {
 } from 'antd';
 import classNames from 'classnames';
 import get from 'lodash/get';
+import { Paperclip } from 'lucide-react';
 import {
   ChangeEventHandler,
   memo,
@@ -36,7 +37,6 @@ import {
   useState,
 } from 'react';
 import FileIcon from '../file-icon';
-import SvgIcon from '../svg-icon';
 import styles from './index.less';
 
 type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
@@ -98,7 +98,6 @@ const MessageInput = ({
   const { data: documentInfos, setDocumentIds } = useFetchDocumentInfosByIds();
   const { uploadAndParseDocument } = useUploadAndParseDocument(uploadMethod);
   const conversationIdRef = useRef(conversationId);
-
   const [fileList, setFileList] = useState<UploadFile[]>([]);
 
   const handlePreview = async (file: UploadFile) => {
@@ -225,14 +224,7 @@ const MessageInput = ({
                 <Button
                   type={'text'}
                   disabled={disabled}
-                  icon={
-                    <SvgIcon
-                      name="paper-clip"
-                      width={18}
-                      height={22}
-                      disabled={disabled}
-                    ></SvgIcon>
-                  }
+                  icon={<Paperclip></Paperclip>}
                 ></Button>
               </Upload>
             )}