update css icon for mode dark

conf/service_conf.yaml

@@ -6,15 +6,15 @@ mysql:
   user: 'root'
   password: 'infini_rag_flow'
   host: 'mysql'
-  port: 5455
+  port: 3306
   max_connections: 100
   stale_timeout: 30
 minio:
   user: 'rag_flow'
   password: 'infini_rag_flow'
   host: 'minio:9000'
 es:
-  hosts: 'http://es01:1200'
+  hosts: 'http://es01:9200'
   username: 'elastic'
   password: 'infini_rag_flow'
 redis:

web/src/assets/icon/Icon.tsx

@@ -0,0 +1,168 @@
+import Icon from '@ant-design/icons';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+
+type IconComponentProps = CustomIconComponentProps;
+const currentColor = 'currentColor';
+const ApiSvg = () => (
+  <svg
+    viewBox="0 0 1025 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+  >
+    <path
+      d="M1019.520374 56.394706L966.393742 3.257862c-2.001695-2.001695-4.503815-2.87999-7.1387-2.879991s-5.137004 1.000848-7.148912 2.879991L856.749851 98.61414C814.520204 69.916363 765.396963 55.638964 716.283935 55.638964c-64.156382 0-128.312765 24.428855-177.30324 73.429543L411.280694 256.758295c-3.880838 3.880838-3.880838 10.274008 0 14.154847L751.74254 611.364776c2.001695 2.001695 4.514028 2.890203 7.1387 2.890203 2.512332 0 5.137004-1.000848 7.1387-2.890203l127.689788-127.689788c86.338436-86.460989 96.489892-220.166077 30.454367-317.646604l95.356279-95.366491c3.880838-3.993178 3.880838-10.386348 0-14.267187zM833.321844 423.409656l-74.430391 74.440604-234.075818-234.075818 74.430391-74.430391c31.199896-31.199896 72.806566-48.490052 117.037909-48.490051 44.231342 0 85.705247 17.167603 117.037909 48.490051 31.199896 31.199896 48.490052 72.806566 48.490051 117.037909 0 44.231342-17.290155 85.705247-48.490051 117.027696zM594.987317 554.980283c-3.880838-3.880838-10.274008-3.880838-14.154847 0l-83.458446 83.458446-113.15707-113.146858 83.580998-83.580999c3.891051-3.891051 3.891051-10.284221 0-14.165059l-45.610061-45.610061c-3.880838-3.891051-10.274008-3.891051-14.154846 0l-83.580999 83.580998-53.882374-53.882374c-2.001695-2.001695-4.514028-2.87999-7.1387-2.87999-2.512332 0-5.137004 1.000848-7.138699 2.87999L128.725037 539.313952C42.386601 625.774941 32.235145 759.480028 98.27067 856.970768L2.914392 952.33726c-3.880838 3.880838-3.880838 10.274008 0 14.154846l53.136844 53.126632c2.001695 2.001695 4.514028 2.87999 7.1387 2.87999 2.634885 0 5.137004-1.000848 7.1387-2.87999l95.366491-95.356279c42.219434 28.697777 91.352888 42.985389 140.465916 42.985389 64.156382 0 128.312765-24.439068 177.30324-73.429543l127.689789-127.689788c3.880838-3.891051 3.880838-10.274008 0-14.154847l-53.882374-53.882374 83.580998-83.580998c3.880838-3.880838 3.880838-10.274008 0-14.154847l-45.865379-45.375168zM423.066186 833.665314c-31.199896 31.199896-72.806566 48.490052-117.037908 48.490051-44.231342 0-85.705247-17.167603-117.037909-48.490051-31.199896-31.199896-48.490052-72.806566-48.490052-117.037909 0-44.231342 17.167603-85.71546 48.490052-117.037909l74.430391-74.430391 234.075817 234.075818-74.430391 74.430391z m0 0"
+      fill={currentColor}
+    ></path>
+  </svg>
+);
+const TeamSvg = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z"
+      stroke={currentColor}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const ProfileSvg = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
+      stroke={currentColor}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const PasswordSvg = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17 10V8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8V10M12 14.5V16.5M8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C17.7202 10 16.8802 10 15.2 10H8.8C7.11984 10 6.27976 10 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21Z"
+      stroke={currentColor}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const LogOutSvg = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16 17L21 12M21 12L16 7M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9"
+      stroke={currentColor}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const ModelProviderSvg = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.75 20.7496L11.223 21.5679C11.5066 21.7255 11.6484 21.8043 11.7986 21.8351C11.9315 21.8625 12.0685 21.8625 12.2015 21.8351C12.3516 21.8043 12.4934 21.7255 12.777 21.5679L14.25 20.7496M5.25 18.2496L3.82297 17.4568C3.52346 17.2904 3.37368 17.2072 3.26463 17.0889C3.16816 16.9842 3.09515 16.8601 3.05048 16.7249C3 16.5721 3 16.4008 3 16.0582V14.4996M3 9.4996V7.94104C3 7.5984 3 7.42708 3.05048 7.27428C3.09515 7.1391 3.16816 7.01502 3.26463 6.91033C3.37368 6.792 3.52345 6.70879 3.82297 6.54239L5.25 5.7496M9.75 3.2496L11.223 2.43128C11.5066 2.27372 11.6484 2.19494 11.7986 2.16406C11.9315 2.13672 12.0685 2.13672 12.2015 2.16406C12.3516 2.19494 12.4934 2.27372 12.777 2.43128L14.25 3.2496M18.75 5.7496L20.177 6.54239C20.4766 6.70879 20.6263 6.79199 20.7354 6.91033C20.8318 7.01502 20.9049 7.1391 20.9495 7.27428C21 7.42708 21 7.5984 21 7.94104V9.4996M21 14.4996V16.0582C21 16.4008 21 16.5721 20.9495 16.7249C20.9049 16.8601 20.8318 16.9842 20.7354 17.0889C20.6263 17.2072 20.4766 17.2904 20.177 17.4568L18.75 18.2496M9.75 10.7496L12 11.9996M12 11.9996L14.25 10.7496M12 11.9996V14.4996M3 6.9996L5.25 8.2496M18.75 8.2496L21 6.9996M12 19.4996V21.9996"
+      stroke={currentColor}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const PromptSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+  >
+    <path
+      d="M509.952 260.864c-152.832 0-277.248 124.416-277.248 277.248 0 152.832 124.416 277.248 277.248 277.248 152.832 0 277.248-124.416 277.248-277.248C787.2 385.28 662.784 260.864 509.952 260.864zM509.952 746.24c-114.688 0-208.128-93.44-208.128-208.128 0-114.688 93.44-208.128 208.128-208.128s208.128 93.44 208.128 208.128C717.824 652.8 624.64 746.24 509.952 746.24z"
+      fill={currentColor}
+    ></path>
+    <path
+      d="M509.952 211.2c22.016 0 39.68-17.664 39.68-39.68L549.632 77.056c0-22.016-17.664-39.68-39.68-39.68s-39.68 17.664-39.68 39.68l0 94.464C470.272 193.28 487.936 211.2 509.952 211.2z"
+      fill={currentColor}
+    ></path>
+    <path
+      d="M134.144 538.88l-94.464 0c-22.016 0-39.68 17.664-39.68 39.68s17.664 39.68 39.68 39.68l94.464 0c22.016 0 39.68-17.664 39.68-39.68S155.904 538.88 134.144 538.88z"
+      fill={currentColor}
+    ></path>
+    <path
+      d="M984.32 538.88l-94.464 0c-22.016 0-39.68 17.664-39.68 39.68s17.664 39.68 39.68 39.68l94.464 0c22.016 0 39.68-17.664 39.68-39.68S1006.336 538.88 984.32 538.88z"
+      fill={currentColor}
+    ></path>
+    <path
+      d="M901.632 196.864c-15.616-15.616-40.704-15.616-56.064 0l-66.816 66.816c-15.616 15.616-15.616 40.704 0 56.064 7.68 7.68 17.92 11.52 28.16 11.52 10.24 0 20.224-3.84 28.16-11.52l66.816-66.816C916.992 237.568 916.992 212.224 901.632 196.864z"
+      fill={currentColor}
+    ></path>
+    <path
+      d="M241.152 263.424l-66.816-66.816c-15.616-15.616-40.704-15.616-56.064 0-15.616 15.616-15.616 40.704 0 56.064l66.816 66.816c7.68 7.68 17.92 11.52 28.16 11.52 10.24 0 20.224-3.84 28.16-11.52C256.768 304.128 256.768 279.04 241.152 263.424z"
+      fill={currentColor}
+    ></path>
+    <path
+      d="M605.184 866.56 414.72 866.56c-13.056 0-23.808 9.472-23.808 21.248s10.752 21.248 23.808 21.248l190.464 0c13.056 0 23.808-9.472 23.808-21.248S618.24 866.56 605.184 866.56z"
+      fill={currentColor}
+    ></path>
+    <path
+      d="M577.536 944.384l-135.168 0c-13.056 0-23.808 9.472-23.808 21.248s10.752 21.248 23.808 21.248l135.168 0c13.056 0 23.808-9.472 23.808-21.248S590.592 944.384 577.536 944.384z"
+      fill={currentColor}
+    ></path>
+  </svg>
+);
+
+export const ApiIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={ApiSvg} {...props} />
+);
+export const TeamIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={TeamSvg} {...props} />
+);
+export const ProfileIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={ProfileSvg} {...props} />
+);
+export const PasswordIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={PasswordSvg} {...props} />
+);
+export const LogOutIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={LogOutSvg} {...props} />
+);
+export const ModelProviderIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={ModelProviderSvg} {...props} />
+);
+export const PromptIcon = (props: Partial<IconComponentProps>) => (
+  <Icon component={PromptSvg} {...props} />
+);

web/src/components/highlight-markdown/index.less

@@ -15,5 +15,5 @@
   white-space: break-spaces;
   background-color: rgba(129, 139, 152, 0.12);
   border-radius: 4px;
-  color: rgb(31, 35, 40);
+  color: var(--ant-color-text-base);
 }

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/less/mixins.less

@@ -38,7 +38,7 @@
   }
 
   tr:nth-child(even) {
-    background-color: #f2f2f2;
+    background-color: #f2f2f22a;
   }
 }
 

web/src/less/variable.less

@@ -1,13 +1,13 @@
 @fontWeight600: 600;
 @fontWeight700: 700;
 
-@grayBackground: rgba(247, 248, 250, 1);
+@grayBackground: rgba(247, 248, 250, 0.1);
 @gray2: rgba(29, 25, 41, 1);
 @gray3: rgba(52, 48, 62, 1);
 @gray8: rgba(165, 163, 169, 1);
 @gray11: rgba(232, 232, 234, 1);
 @purple: rgba(127, 86, 217, 1);
-@selectedBackgroundColor: rgba(239, 248, 255, 1);
+@selectedBackgroundColor: rgba(239, 248, 255, 0.1);
 @blurBackground: rgba(22, 119, 255, 0.5);
 @blurBackgroundHover: rgba(22, 119, 255, 0.2);
 

web/src/pages/search/index.less

@@ -15,16 +15,8 @@
     font-size: 14px;
     cursor: pointer;
   }
-
-  // .mainLayout {
-  //   background: transparent;
-  // }
 }
 
-// .transparentSearchSide {
-//   background-color: rgb(251 251 251 / 88%) !important;
-// }
-
 .searchSide {
   position: relative;
   max-width: 400px !important;
@@ -101,10 +93,10 @@
 }
 .answerWrapper {
   margin-top: 16px;
-  background: rgb(232 242 251 / 70%);
+  background: rgba(232 242 251, 1);
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
   :global(.ant-card-head) {
-    background-color: #e6f4ff;
+    background-color: #e6f4ff23;
   }
   & p {
     margin: 0;

web/src/pages/user-setting/constants.tsx

@@ -1,19 +1,21 @@
-import { ReactComponent as ApiIcon } from '@/assets/svg/api.svg';
-import { ReactComponent as LogoutIcon } from '@/assets/svg/logout.svg';
-import { ReactComponent as ModelIcon } from '@/assets/svg/model-providers.svg';
-import { ReactComponent as PasswordIcon } from '@/assets/svg/password.svg';
-import { ReactComponent as ProfileIcon } from '@/assets/svg/profile.svg';
-import { ReactComponent as TeamIcon } from '@/assets/svg/team.svg';
+import {
+  ApiIcon,
+  LogOutIcon,
+  ModelProviderIcon,
+  PasswordIcon,
+  ProfileIcon,
+  TeamIcon,
+} from '@/assets/icon/Icon';
 import { UserSettingRouteKey } from '@/constants/setting';
 import { MonitorOutlined } from '@ant-design/icons';
 
 export const UserSettingIconMap = {
   [UserSettingRouteKey.Profile]: <ProfileIcon />,
   [UserSettingRouteKey.Password]: <PasswordIcon />,
-  [UserSettingRouteKey.Model]: <ModelIcon />,
+  [UserSettingRouteKey.Model]: <ModelProviderIcon />,
   [UserSettingRouteKey.System]: <MonitorOutlined style={{ fontSize: 24 }} />,
   [UserSettingRouteKey.Team]: <TeamIcon />,
-  [UserSettingRouteKey.Logout]: <LogoutIcon />,
+  [UserSettingRouteKey.Logout]: <LogOutIcon />,
   [UserSettingRouteKey.Api]: <ApiIcon />,
 };