feat: dark mode for knowledge (#15236)

web/app/components/datasets/hit-testing/components/result-item.tsx

@@ -55,7 +55,7 @@ const ResultItem: FC<Props> = ({
         {isParentChildRetrieval && (
           <div className='mt-1'>
             <div
-              className={cn('inline-flex items-center h-6 space-x-0.5 text-text-secondary select-none rounded-lg cursor-pointer', isFold && 'pl-1 bg-[linear-gradient(90deg,_rgba(200,_206,_218,_0.20)_0%,_rgba(200,_206,_218,_0.04)_100%)]')}
+              className={cn('inline-flex items-center h-6 space-x-0.5 text-text-secondary select-none rounded-lg cursor-pointer', isFold && 'pl-1 bg-workflow-process-bg')}
               onClick={(e) => {
                 e.stopPropagation()
                 toggleFold()

web/app/components/datasets/hit-testing/index.tsx

@@ -6,7 +6,7 @@ import useSWR from 'swr'
 import { omit } from 'lodash-es'
 import { useBoolean } from 'ahooks'
 import { useContext } from 'use-context-selector'
-import { RiApps2Line, RiFocus2Line } from '@remixicon/react'
+import { RiApps2Line, RiFocus2Line, RiHistoryLine } from '@remixicon/react'
 import Textarea from './textarea'
 import s from './style.module.css'
 import ModifyRetrievalModal from './modify-retrieval-modal'
@@ -34,11 +34,11 @@ type Props = {
 
 const RecordsEmpty: FC = () => {
   const { t } = useTranslation()
-  return <div className='bg-gray-50 rounded-2xl p-5'>
-    <div className={s.clockWrapper}>
-      <div className={cn(s.clockIcon, 'w-5 h-5')}></div>
+  return <div className='bg-workflow-process-bg rounded-2xl p-5'>
+    <div className='flex items-center justify-center w-10 h-10 p-1 rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+      <RiHistoryLine className='w-5 h-5 text-text-tertiary' />
     </div>
-    <div className='my-2 text-gray-500 text-sm'>{t('datasetHitTesting.noRecentTip')}</div>
+    <div className='my-2 text-text-tertiary text-[13px] leading-4 font-medium'>{t('datasetHitTesting.noRecentTip')}</div>
   </div>
 }
 

web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx

@@ -59,33 +59,41 @@ const ModifyRetrievalModal: FC<Props> = ({
 
   return (
     <div
-      className='w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
+      className='w-full flex flex-col bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-2xl shadow-2xl shadow-shadow-shadow-9'
       style={{
         height: 'calc(100vh - 72px)',
       }}
       ref={ref}
     >
-      <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'>
-        <div className='text-base font-semibold text-gray-900'>
+      <div className='shrink-0 flex justify-between pt-3.5 pb-1 px-3 h-15'>
+        <div className='text-base font-semibold text-text-primary'>
           <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
-          <div className='leading-[18px] text-xs font-normal text-gray-500'>
-            <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+          <div className='leading-[18px] text-xs font-normal text-text-tertiary'>
+            <a
+              target='_blank'
+              rel='noopener noreferrer'
+              href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings'
+              className='text-text-accent'
+            >
+              {t('datasetSettings.form.retrievalSetting.learnMore')}
+            </a>
             {t('datasetSettings.form.retrievalSetting.description')}
           </div>
         </div>
-        <div className='flex items-center'>
+        <div className='flex'>
           <div
             onClick={onHide}
-            className='flex justify-center items-center w-6 h-6 cursor-pointer'
+            className='flex justify-center items-center w-8 h-8 cursor-pointer'
           >
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
           </div>
         </div>
       </div>
 
-      <div className='p-6 border-b' style={{
-        borderBottom: 'rgba(0, 0, 0, 0.05)',
-      }}>
+      <div className='px-4 py-2'>
+        <div className='mb-1 text-text-secondary text-[13px] leading-6 font-semibold'>
+          {t('datasetSettings.form.retrievalSetting.method')}
+        </div>
         {indexMethod === 'high_quality'
           ? (
             <RetrievalMethodConfig
@@ -100,12 +108,7 @@ const ModifyRetrievalModal: FC<Props> = ({
             />
           )}
       </div>
-      <div
-        className='flex justify-end pt-6 px-6 border-t'
-        style={{
-          borderColor: 'rgba(0, 0, 0, 0.05)',
-        }}
-      >
+      <div className='flex justify-end p-4 pt-2'>
         <Button className='mr-2 flex-shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
         <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
       </div>

web/app/components/datasets/hit-testing/textarea.tsx

@@ -15,7 +15,7 @@ import { asyncRunSafe } from '@/utils'
 import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
 import promptS from '@/app/components/app/configuration/config-prompt/style.module.css'
 
-interface TextAreaWithButtonIProps {
+type TextAreaWithButtonIProps = {
   datasetId: string
   onUpdateList: () => void
   setHitResult: (res: HitTestingResponse) => void
@@ -108,7 +108,7 @@ const TextAreaWithButton = ({
   return (
     <>
       <div className={cn('relative rounded-xl', promptS.gradientBorder)}>
-        <div className='relative pt-1.5 rounded-tl-xl rounded-tr-xl bg-background-section-burn'>
+        <div className='relative pt-1.5 rounded-t-xl bg-background-section-burn'>
           <div className="pl-4 pr-1.5 pb-1 flex justify-between h-8 items-center">
             <span className="text-text-secondary font-semibold text-[13px] leading-4 uppercase">
               {t('datasetHitTesting.input.title')}
@@ -145,11 +145,11 @@ const TextAreaWithButton = ({
               />
             )
           }
-          <div className='h-2 rounded-tl-xl rounded-tr-xl bg-background-default'></div>
+          <div className='h-2 rounded-t-xl bg-background-default'></div>
         </div>
         <div className='px-4 pb-11 bg-background-default rounded-b-xl'>
           <textarea
-            className='h-[220px] border-none resize-none font-normal caret-primary-600 text-text-secondary text-sm w-full focus-visible:outline-none  placeholder:text-gray-300 placeholder:text-sm placeholder:font-normal'
+            className='h-[220px] border-none resize-none font-normal caret-[#295EFF] text-text-secondary text-sm w-full focus-visible:outline-none  placeholder:text-components-input-text-placeholder placeholder:text-sm placeholder:font-normal bg-transparent'
             value={text}
             onChange={handleTextChange}
             placeholder={t('datasetHitTesting.input.placeholder') as string}