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/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less

@@ -29,3 +29,6 @@
 .cardSelected {
   background-color: @selectedBackgroundColor;
 }
+.cardSelectedDark {
+  background-color: #ffffff2f;
+}

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import DOMPurify from 'dompurify';
 import { useEffect, useState } from 'react';
 
+import { useTheme } from '@/components/theme-provider';
 import { ChunkTextMode } from '../../constant';
 import styles from './index.less';
 
@@ -31,6 +32,7 @@ const ChunkCard = ({
 }: IProps) => {
   const available = Number(item.available_int);
   const [enabled, setEnabled] = useState(false);
+  const { theme } = useTheme();
 
   const onChange = (checked: boolean) => {
     setEnabled(checked);
@@ -56,7 +58,8 @@ const ChunkCard = ({
   return (
     <Card
       className={classNames(styles.chunkCard, {
-        [styles.cardSelected]: selected,
+        [`${theme === 'dark' ? styles.cardSelectedDark : styles.cardSelected}`]:
+          selected,
       })}
     >
       <Flex gap={'middle'} justify={'space-between'}>

web/src/pages/add-knowledge/components/knowledge-setting/category-panel.tsx

@@ -37,16 +37,14 @@ const CategoryPanel = ({ chunkMethod }: { chunkMethod: string }) => {
       {imageList.length > 0 ? (
         <>
           <Title level={5} className={styles.topTitle}>
-            "{item.title}" {t('methodTitle')}
+            {`"${item.title}" ${t('methodTitle')}`}
           </Title>
           <p
             dangerouslySetInnerHTML={{
               __html: DOMPurify.sanitize(item.description),
             }}
           ></p>
-          <Title level={5}>
-            "{item.title}" {t('methodExamples')}
-          </Title>
+          <Title level={5}>{`"${item.title}" ${t('methodExamples')}`}</Title>
           <Text>{t('methodExamplesDescription')}</Text>
           <Row gutter={[10, 10]} className={styles.imageRow}>
             {imageList.map((x) => (

web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx

@@ -70,6 +70,7 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => {
         <Select placeholder={t('languagePlaceholder')}>
           <Option value="English">{t('english')}</Option>
           <Option value="Chinese">{t('chinese')}</Option>
+          <Option value="Vietnamese">{t('vietnamese')}</Option>
         </Select>
       </Form.Item>
       <Form.Item

web/src/pages/add-knowledge/components/knowledge-sidebar/index.less

@@ -11,7 +11,6 @@
       font-size: 16px;
       line-height: 24px;
       font-weight: @fontWeight700;
-      color: @gray2;
       margin-bottom: 6px;
     }
     .knowledgeDescription {

web/src/pages/add-knowledge/components/knowledge-testing/index.less

@@ -1,5 +1,4 @@
 .testingWrapper {
   flex: 1;
-  background-color: @grayBackground;
   height: 100%;
 }

web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less

@@ -1,6 +1,6 @@
 .testingControlWrapper {
   width: 350px;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.1);
   padding: 30px 20px;
   overflow: auto;
   height: calc(100vh - 160px);

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less

@@ -1,6 +1,6 @@
 .testingResultWrapper {
   flex: 1;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.1);
   padding: 30px 20px;
   overflow: auto;
   height: calc(100vh - 160px);
@@ -24,7 +24,7 @@
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background-color: rgba(244, 235, 255, 1);
+    background-color: rgba(255, 255, 255, 0.1);
     font-size: 10px;
     font-weight: normal;
   }

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.tsx

@@ -82,7 +82,7 @@ const TestingResult = ({ handleTesting }: IProps) => {
               >
                 <Space>
                   <span>
-                    {selectedDocumentIds?.length ?? 0}/{documents.length}
+                    {selectedDocumentIds?.length ?? 0}/{documents?.length ?? 0}
                   </span>
                   {t('filesSelected')}
                 </Space>
@@ -105,7 +105,7 @@ const TestingResult = ({ handleTesting }: IProps) => {
         flex={1}
         className={styles.selectFilesCollapse}
       >
-        {chunks.map((x) => (
+        {chunks?.map((x) => (
           <Card key={x.chunk_id} title={<ChunkTitle item={x}></ChunkTitle>}>
             <Flex gap={'middle'}>
               {x.img_id && (

web/src/pages/add-knowledge/index.less

@@ -6,13 +6,13 @@
     flex: 1;
     overflow-x: auto;
     height: 100%;
-    background-color: rgba(247, 248, 250, 1);
+    background-color: rgba(255, 255, 255, 0.1);
     padding: 16px 20px 28px 40px;
     display: flex;
     flex-direction: column;
   }
   .content {
-    background-color: white;
+    background-color: rgba(255, 255, 255, 0.1);
     margin-top: 16px;
     flex: 1;
   }