feat: dark mode for knowledge (#15236)

web/app/components/datasets/create/website/base/checkbox-with-label.tsx

@@ -25,7 +25,7 @@ const CheckboxWithLabel: FC<Props> = ({
   return (
     <label className={cn(className, 'flex items-center h-7 space-x-2')}>
       <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
-      <div className={cn(labelClassName, 'text-sm font-normal text-text-secondary')}>{label}</div>
+      <div className={cn('text-sm font-normal text-text-secondary', labelClassName)}>{label}</div>
       {tooltip && (
         <Tooltip
           popupContent={

web/app/components/datasets/create/website/base/crawled-result-item.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import Checkbox from '@/app/components/base/checkbox'
+import Button from '@/app/components/base/button'
 
 type Props = {
   payload: CrawlResultItemType
@@ -27,13 +28,32 @@ const CrawledResultItem: FC<Props> = ({
     onCheckChange(!isChecked)
   }, [isChecked, onCheckChange])
   return (
-    <div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
-      <div className='flex items-center h-5'>
-        <Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
-        <div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
-        <div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
+    <div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'rounded-lg p-2 cursor-pointer')}>
+      <div className='relative flex'>
+        <div className='h-5 flex items-center'>
+          <Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
+        </div>
+        <div className='flex flex-col grow min-w-0'>
+          <div
+            className='truncate text-sm font-medium text-text-secondary'
+            title={payload.title}
+          >
+            {payload.title}
+          </div>
+          <div
+            className='mt-0.5 truncate text-xs text-text-tertiary'
+            title={payload.source_url}
+          >
+            {payload.source_url}
+          </div>
+        </div>
+        <Button
+          onClick={onPreview}
+          className='hidden group-hover:block group-hover:absolute top-0 right-0 h-6 px-1.5 text-xs font-medium uppercase'
+        >
+          {t('datasetCreation.stepOne.website.preview')}
+        </Button>
       </div>
-      <div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
     </div>
   )
 }

web/app/components/datasets/create/website/base/crawled-result.tsx

@@ -57,17 +57,19 @@ const CrawledResult: FC<Props> = ({
   }, [list, onPreview])
 
   return (
-    <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center justify-between h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
+    <div className={cn(className, 'border-t-[0.5px] border-divider-regular shadow-xs shadow-shadow-shadow-3')}>
+      <div className='flex items-center justify-between h-[34px] px-4'>
         <CheckboxWithLabel
           isChecked={isCheckAll}
           onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
-          labelClassName='!font-medium'
+          labelClassName='system-[13px] leading-[16px] font-medium text-text-secondary'
         />
-        <div>{t(`${I18N_PREFIX}.scrapTimeInfo`, {
-          total: list.length,
-          time: usedTime.toFixed(1),
-        })}</div>
+        <div className='text-xs text-text-tertiary'>
+          {t(`${I18N_PREFIX}.scrapTimeInfo`, {
+            total: list.length,
+            time: usedTime.toFixed(1),
+          })}
+        </div>
       </div>
       <div className='p-2'>
         {list.map((item, index) => (

web/app/components/datasets/create/website/base/crawling.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
 import { RowStruct } from '@/app/components/base/icons/src/public/other'
 
 type Props = {
@@ -19,15 +18,16 @@ const Crawling: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
+    <div className={className}>
+      <div className='flex items-center h-[34px] px-4 shadow-xs shadow-shadow-shadow-3
+        border-y-[0.5px] border-divider-regular text-xs text-text-tertiary'>
         {t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
       </div>
 
       <div className='p-2'>
         {['', '', '', ''].map((item, index) => (
           <div className='py-[5px]' key={index}>
-            <RowStruct />
+            <RowStruct className='text-text-quaternary' />
           </div>
         ))}
       </div>

web/app/components/datasets/create/website/base/error-message.tsx

@@ -16,13 +16,13 @@ const ErrorMessage: FC<Props> = ({
   errorMsg,
 }) => {
   return (
-    <div className={cn(className, 'py-2 px-4 border-t border-gray-200 bg-[#FFFAEB]')}>
+    <div className={cn(className, 'py-2 px-4 border-t border-divider-subtle bg-dataset-warning-message-bg opacity-40')}>
       <div className='flex items-center h-5'>
         <AlertTriangle className='mr-2 w-4 h-4 text-text-warning-secondary' />
-        <div className='text-sm font-medium text-[#DC6803]'>{title}</div>
+        <div className='system-md-medium text-text-warning'>{title}</div>
       </div>
       {errorMsg && (
-        <div className='mt-1 pl-6 leading-[18px] text-xs font-normal text-gray-700'>{errorMsg}</div>
+        <div className='mt-1 pl-6 system-xs-regular text-text-secondary'>{errorMsg}</div>
       )}
     </div>
   )

web/app/components/datasets/create/website/base/field.tsx

@@ -31,8 +31,8 @@ const Field: FC<Props> = ({
   return (
     <div className={cn(className)}>
       <div className='flex py-[7px]'>
-        <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-text-primary')}>{label} </div>
-        {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
+        <div className={cn(labelClassName, 'flex items-center h-[16px] text-[13px] font-semibold text-text-secondary')}>{label} </div>
+        {isRequired && <span className='ml-0.5 text-xs font-semibold text-text-destructive'>*</span>}
         {tooltip && (
           <Tooltip
             popupContent={

web/app/components/datasets/create/website/base/input.tsx

@@ -20,7 +20,7 @@ const Input: FC<Props> = ({
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value
     if (isNumber) {
-      let numberValue = parseInt(value, 10) // integer only
+      let numberValue = Number.parseInt(value, 10) // integer only
       if (isNaN(numberValue)) {
         onChange('')
         return
@@ -50,7 +50,12 @@ const Input: FC<Props> = ({
       {...otherOption}
       value={value}
       onChange={handleChange}
-      className='flex h-9 w-full py-1 px-2 rounded-lg text-xs leading-normal bg-gray-100 caret-primary-600 hover:bg-gray-100 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none focus:bg-gray-50 placeholder:text-gray-400'
+      className='flex h-8 w-full p-2 rounded-lg system-xs-regular text-components-input-text-filled bg-components-input-bg-normal
+      caret-[#295eff] border border-transparent
+        hover:bg-components-input-bg-hover hover:border hover:border-components-input-border-hover
+        focus-visible:outline-none focus:bg-components-inout-border-active focus:border focus:border-components-input-border-active
+        focus:shadow-xs focus:shadow-shadow-shadow-3
+        placeholder:text-components-input-text-placeholder'
       placeholder={placeholder}
     />
   )

web/app/components/datasets/create/website/base/options-wrap.tsx

@@ -3,8 +3,8 @@ import { useBoolean } from 'ahooks'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiEqualizer2Line } from '@remixicon/react'
 import cn from '@/utils/classnames'
-import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -34,14 +34,14 @@ const OptionsWrap: FC<Props> = ({
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
       <div
-        className='flex justify-between items-center h-[26px] py-1 cursor-pointer select-none'
+        className='flex items-center gap-x-1 h-[26px] py-1 cursor-pointer select-none'
         onClick={foldToggle}
       >
-        <div className='flex items-center text-gray-700'>
-          <Settings04 className='mr-1 w-4 h-4' />
-          <div className='text-[13px] font-semibold text-gray-800 uppercase'>{t(`${I18N_PREFIX}.options`)}</div>
+        <div className='flex items-center grow'>
+          <RiEqualizer2Line className='mr-1 w-4 h-4 text-text-secondary' />
+          <span className='text-[13px] leading-[16px] font-semibold text-text-secondary uppercase'>{t(`${I18N_PREFIX}.options`)}</span>
         </div>
-        <ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 text-gray-500')} />
+        <ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 shrink-0 text-text-tertiary')} />
       </div>
       {!fold && (
         <div className='mb-4'>

web/app/components/datasets/create/website/base/url-input.tsx

@@ -28,7 +28,7 @@ const UrlInput: FC<Props> = ({
   }, [isRunning, onRun, url])
 
   return (
-    <div className='flex items-center justify-between'>
+    <div className='flex items-center justify-between gap-x-2'>
       <Input
         value={url}
         onChange={handleUrlChange}
@@ -37,8 +37,8 @@ const UrlInput: FC<Props> = ({
       <Button
         variant='primary'
         onClick={handleOnRun}
-        className='ml-2'
         loading={isRunning}
+        spinnerClassName='!ml-0'
       >
         {!isRunning ? t(`${I18N_PREFIX}.run`) : ''}
       </Button>

web/app/components/datasets/create/website/firecrawl/header.tsx

@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
+import Button from '@/app/components/base/button'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -19,22 +19,23 @@ const Header: FC<Props> = ({
   return (
     <div className='flex h-6 items-center justify-between'>
       <div className='flex items-center'>
-        <div className='text-base font-medium text-gray-700'>{t(`${I18N_PREFIX}.firecrawlTitle`)}</div>
-        <div className='ml-2 mr-1 w-px h-3.5 bg-gray-200'></div>
-        <div
-          className='p-1 rounded-md hover:bg-black/5 cursor-pointer'
-          onClick={onSetting}
-        >
-          <Settings01 className='w-3.5 h-3.5 text-gray-500' />
-        </div>
+        <div className='text-base font-medium text-text-secondary'>{t(`${I18N_PREFIX}.firecrawlTitle`)}</div>
+        <div className='ml-2 mr-2 w-px h-3.5 bg-divider-regular' />
+        <Button className='flex items-center gap-x-[1px] h-6 px-1.5' onClick={onSetting}>
+          <RiEqualizer2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
+          <span className='text-components-button-secondary-text text-xs font-medium px-[3px]'>
+            {t(`${I18N_PREFIX}.configureFirecrawl`)}
+          </span>
+        </Button>
       </div>
       <a
         href='https://docs.firecrawl.dev/introduction'
-        target='_blank' rel='noopener noreferrer'
-        className='flex items-center text-xs text-primary-600'
+        target='_blank'
+        rel='noopener noreferrer'
+        className='inline-flex items-center gap-x-1 text-xs font-medium text-text-accent'
       >
-        <BookOpen01 className='mr-1 w-3.5 h-3.5 text-primary-600' />
-        {t(`${I18N_PREFIX}.firecrawlDoc`)}
+        <RiBookOpenLine className='w-3.5 h-3.5 text-text-accent' />
+        <span>{t(`${I18N_PREFIX}.firecrawlDoc`)}</span>
       </a>
     </div>
   )

web/app/components/datasets/create/website/firecrawl/index.tsx

@@ -9,7 +9,6 @@ import Crawling from '../base/crawling'
 import ErrorMessage from '../base/error-message'
 import Header from './header'
 import Options from './options'
-import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import Toast from '@/app/components/base/toast'
@@ -99,7 +98,7 @@ const FireCrawl: FC<Props> = ({
           isError: false,
           data: {
             ...res,
-            total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
+            total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
           },
         }
       }
@@ -116,7 +115,7 @@ const FireCrawl: FC<Props> = ({
       // update the progress
       setCrawlResult({
         ...res,
-        total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
+        total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
       })
       onCheckedCrawlResultChange(res.data || []) // default select the crawl result
       await sleep(2500)
@@ -179,10 +178,10 @@ const FireCrawl: FC<Props> = ({
   return (
     <div>
       <Header onSetting={handleSetting} />
-      <div className={cn('mt-2 p-4 pb-0 rounded-xl border border-gray-200')}>
+      <div className='mt-2 p-4 pb-0 rounded-xl border border-components-panel-border bg-background-default-subtle'>
         <UrlInput onRun={handleRun} isRunning={isRunning} />
         <OptionsWrap
-          className={cn('mt-4')}
+          className='mt-4'
           controlFoldOptions={controlFoldOptions}
         >
           <Options className='mt-2' payload={crawlOptions} onChange={onCrawlOptionsChange} />
@@ -194,7 +193,7 @@ const FireCrawl: FC<Props> = ({
               && <Crawling
                 className='mt-2'
                 crawledNum={crawlResult?.current || 0}
-                totalNum={crawlResult?.total || parseFloat(crawlOptions.limit as string) || 0}
+                totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0}
               />}
             {showError && (
               <ErrorMessage className='rounded-b-xl' title={t(`${I18N_PREFIX}.exceptionErrorTitle`)} errorMsg={crawlErrorMessage} />
@@ -206,7 +205,7 @@ const FireCrawl: FC<Props> = ({
                 checkedList={checkedCrawlResult}
                 onSelectedChange={onCheckedCrawlResultChange}
                 onPreview={onPreview}
-                usedTime={parseFloat(crawlResult?.time_consuming as string) || 0}
+                usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
               />
             }
           </div>

web/app/components/datasets/create/website/firecrawl/options.tsx

@@ -36,6 +36,7 @@ const Options: FC<Props> = ({
         label={t(`${I18N_PREFIX}.crawlSubPage`)}
         isChecked={payload.crawl_sub_pages}
         onChange={handleChange('crawl_sub_pages')}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
       <div className='flex justify-between space-x-4'>
         <Field
@@ -76,6 +77,7 @@ const Options: FC<Props> = ({
         label={t(`${I18N_PREFIX}.extractOnlyMainContent`)}
         isChecked={payload.only_main_content}
         onChange={handleChange('only_main_content')}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
     </div>
   )

web/app/components/datasets/create/website/index.tsx

@@ -73,27 +73,29 @@ const Website: FC<Props> = ({
   return (
     <div>
       <div className="mb-4">
-        <div className="font-medium text-gray-700 mb-2 h-6">
+        <div className="system-md-medium text-text-secondary mb-2">
           {t('datasetCreation.stepOne.website.chooseProvider')}
         </div>
         <div className="flex space-x-2">
           <button
-            className={`px-4 py-2 text-sm font-medium rounded-md flex items-center justify-center ${
+            className={cn('px-4 py-2 rounded-lg flex items-center justify-center',
               selectedProvider === DataSourceProvider.jinaReader
-                ? 'bg-primary-50 text-primary-600'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
+                ? 'system-sm-medium bg-components-option-card-option-selected-bg text-text-primary border-[1.5px] border-components-option-card-option-selected-border'
+                : `system-sm-regular bg-components-option-card-option-bg text-text-secondary border border-components-option-card-option-border
+                hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
+            )}
             onClick={() => setSelectedProvider(DataSourceProvider.jinaReader)}
           >
             <span className={cn(s.jinaLogo, 'mr-2')} />
             <span>Jina Reader</span>
           </button>
           <button
-            className={`px-4 py-2 text-sm font-medium rounded-md ${
+            className={cn('px-4 py-2 rounded-lg',
               selectedProvider === DataSourceProvider.fireCrawl
-                ? 'bg-primary-50 text-primary-600'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
+                ? 'system-sm-medium bg-components-option-card-option-selected-bg text-text-primary border-[1.5px] border-components-option-card-option-selected-border'
+                : `system-sm-regular bg-components-option-card-option-bg text-text-secondary border border-components-option-card-option-border
+                hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
+            )}
             onClick={() => setSelectedProvider(DataSourceProvider.fireCrawl)}
           >
             🔥 Firecrawl

web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx

@@ -5,7 +5,7 @@ import cn from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Tooltip from '@/app/components/base/tooltip'
 
-interface Props {
+type Props = {
   className?: string
   isChecked: boolean
   onChange: (isChecked: boolean) => void
@@ -25,7 +25,7 @@ const CheckboxWithLabel: FC<Props> = ({
   return (
     <label className={cn(className, 'flex items-center h-7 space-x-2')}>
       <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
-      <div className={cn(labelClassName, 'text-sm font-normal text-gray-800')}>{label}</div>
+      <div className={cn('text-sm font-normal text-gray-800', labelClassName)}>{label}</div>
       {tooltip && (
         <Tooltip
           popupContent={

web/app/components/datasets/create/website/jina-reader/crawled-result-item.tsx

@@ -1,40 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
-import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
-import Checkbox from '@/app/components/base/checkbox'
-
-interface Props {
-  payload: CrawlResultItemType
-  isChecked: boolean
-  isPreview: boolean
-  onCheckChange: (checked: boolean) => void
-  onPreview: () => void
-}
-
-const CrawledResultItem: FC<Props> = ({
-  isPreview,
-  payload,
-  isChecked,
-  onCheckChange,
-  onPreview,
-}) => {
-  const { t } = useTranslation()
-
-  const handleCheckChange = useCallback(() => {
-    onCheckChange(!isChecked)
-  }, [isChecked, onCheckChange])
-  return (
-    <div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
-      <div className='flex items-center h-5'>
-        <Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
-        <div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
-        <div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
-      </div>
-      <div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
-    </div>
-  )
-}
-export default React.memo(CrawledResultItem)

web/app/components/datasets/create/website/jina-reader/crawled-result.tsx

@@ -1,87 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import CheckboxWithLabel from './base/checkbox-with-label'
-import CrawledResultItem from './crawled-result-item'
-import cn from '@/utils/classnames'
-import type { CrawlResultItem } from '@/models/datasets'
-
-const I18N_PREFIX = 'datasetCreation.stepOne.website'
-
-interface Props {
-  className?: string
-  list: CrawlResultItem[]
-  checkedList: CrawlResultItem[]
-  onSelectedChange: (selected: CrawlResultItem[]) => void
-  onPreview: (payload: CrawlResultItem) => void
-  usedTime: number
-}
-
-const CrawledResult: FC<Props> = ({
-  className = '',
-  list,
-  checkedList,
-  onSelectedChange,
-  onPreview,
-  usedTime,
-}) => {
-  const { t } = useTranslation()
-
-  const isCheckAll = checkedList.length === list.length
-
-  const handleCheckedAll = useCallback(() => {
-    if (!isCheckAll)
-      onSelectedChange(list)
-
-    else
-      onSelectedChange([])
-  }, [isCheckAll, list, onSelectedChange])
-
-  const handleItemCheckChange = useCallback((item: CrawlResultItem) => {
-    return (checked: boolean) => {
-      if (checked)
-        onSelectedChange([...checkedList, item])
-
-      else
-        onSelectedChange(checkedList.filter(checkedItem => checkedItem.source_url !== item.source_url))
-    }
-  }, [checkedList, onSelectedChange])
-
-  const [previewIndex, setPreviewIndex] = React.useState<number>(-1)
-  const handlePreview = useCallback((index: number) => {
-    return () => {
-      setPreviewIndex(index)
-      onPreview(list[index])
-    }
-  }, [list, onPreview])
-
-  return (
-    <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center justify-between h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
-        <CheckboxWithLabel
-          isChecked={isCheckAll}
-          onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
-          labelClassName='!font-medium'
-        />
-        <div>{t(`${I18N_PREFIX}.scrapTimeInfo`, {
-          total: list.length,
-          time: usedTime.toFixed(1),
-        })}</div>
-      </div>
-      <div className='p-2'>
-        {list.map((item, index) => (
-          <CrawledResultItem
-            key={item.source_url}
-            isPreview={index === previewIndex}
-            onPreview={handlePreview(index)}
-            payload={item}
-            isChecked={checkedList.some(checkedItem => checkedItem.source_url === item.source_url)}
-            onCheckChange={handleItemCheckChange(item)}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
-export default React.memo(CrawledResult)

web/app/components/datasets/create/website/jina-reader/crawling.tsx

@@ -1,37 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
-import { RowStruct } from '@/app/components/base/icons/src/public/other'
-
-interface Props {
-  className?: string
-  crawledNum: number
-  totalNum: number
-}
-
-const Crawling: FC<Props> = ({
-  className = '',
-  crawledNum,
-  totalNum,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
-        {t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
-      </div>
-
-      <div className='p-2'>
-        {['', '', '', ''].map((item, index) => (
-          <div className='py-[5px]' key={index}>
-            <RowStruct />
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-export default React.memo(Crawling)

web/app/components/datasets/create/website/jina-reader/header.tsx

@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
+import Button from '@/app/components/base/button'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -19,22 +19,23 @@ const Header: FC<Props> = ({
   return (
     <div className='flex h-6 items-center justify-between'>
       <div className='flex items-center'>
-        <div className='text-base font-medium text-gray-700'>{t(`${I18N_PREFIX}.jinaReaderTitle`)}</div>
-        <div className='ml-2 mr-1 w-px h-3.5 bg-gray-200'></div>
-        <div
-          className='p-1 rounded-md hover:bg-black/5 cursor-pointer'
-          onClick={onSetting}
-        >
-          <Settings01 className='w-3.5 h-3.5 text-gray-500' />
-        </div>
+        <div className='text-sm font-semibold text-text-secondary'>{t(`${I18N_PREFIX}.jinaReaderTitle`)}</div>
+        <div className='ml-2 mr-2 w-px h-3.5 bg-divider-regular' />
+        <Button className='flex items-center gap-x-[1px] h-6 px-1.5' onClick={onSetting}>
+          <RiEqualizer2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
+          <span className='text-components-button-secondary-text text-xs font-medium px-[3px]'>
+            {t(`${I18N_PREFIX}.configureJinaReader`)}
+          </span>
+        </Button>
       </div>
       <a
         href='https://jina.ai/reader'
-        target='_blank' rel='noopener noreferrer'
-        className='flex items-center text-xs text-primary-600'
+        target='_blank'
+        rel='noopener noreferrer'
+        className='inline-flex items-center gap-x-1 text-xs font-medium text-text-accent'
       >
-        <BookOpen01 className='mr-1 w-3.5 h-3.5 text-primary-600' />
-        {t(`${I18N_PREFIX}.jinaReaderDoc`)}
+        <RiBookOpenLine className='w-3.5 h-3.5 text-text-accent' />
+        <span>{t(`${I18N_PREFIX}.jinaReaderDoc`)}</span>
       </a>
     </div>
   )

web/app/components/datasets/create/website/jina-reader/index.tsx

@@ -9,7 +9,6 @@ import Crawling from '../base/crawling'
 import ErrorMessage from '../base/error-message'
 import Header from './header'
 import Options from './options'
-import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 import Toast from '@/app/components/base/toast'
 import { checkJinaReaderTaskStatus, createJinaReaderTask } from '@/service/datasets'
@@ -99,7 +98,7 @@ const JinaReader: FC<Props> = ({
           isError: false,
           data: {
             ...res,
-            total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
+            total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
           },
         }
       }
@@ -115,7 +114,7 @@ const JinaReader: FC<Props> = ({
       // update the progress
       setCrawlResult({
         ...res,
-        total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
+        total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
       })
       onCheckedCrawlResultChange(res.data || []) // default select the crawl result
       await sleep(2500)
@@ -192,10 +191,10 @@ const JinaReader: FC<Props> = ({
   return (
     <div>
       <Header onSetting={handleSetting} />
-      <div className={cn('mt-2 p-4 pb-0 rounded-xl border border-gray-200')}>
+      <div className='mt-2 p-4 pb-0 rounded-xl border border-components-panel-border bg-background-default-subtle'>
         <UrlInput onRun={handleRun} isRunning={isRunning} />
         <OptionsWrap
-          className={cn('mt-4')}
+          className='mt-4'
           controlFoldOptions={controlFoldOptions}
         >
           <Options className='mt-2' payload={crawlOptions} onChange={onCrawlOptionsChange} />
@@ -207,7 +206,7 @@ const JinaReader: FC<Props> = ({
               && <Crawling
                 className='mt-2'
                 crawledNum={crawlResult?.current || 0}
-                totalNum={crawlResult?.total || parseFloat(crawlOptions.limit as string) || 0}
+                totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0}
               />}
             {showError && (
               <ErrorMessage className='rounded-b-xl' title={t(`${I18N_PREFIX}.exceptionErrorTitle`)} errorMsg={crawlErrorMessage} />
@@ -219,7 +218,7 @@ const JinaReader: FC<Props> = ({
                 checkedList={checkedCrawlResult}
                 onSelectedChange={onCheckedCrawlResultChange}
                 onPreview={onPreview}
-                usedTime={parseFloat(crawlResult?.time_consuming as string) || 0}
+                usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
               />
             }
           </div>

web/app/components/datasets/create/website/jina-reader/mock-crawl-result.ts

@@ -1,24 +0,0 @@
-import type { CrawlResultItem } from '@/models/datasets'
-
-const result: CrawlResultItem[] = [
-  {
-    title: 'Start the frontend Docker container separately',
-    markdown: 'Markdown 1',
-    description: 'Description 1',
-    source_url: 'https://example.com/1',
-  },
-  {
-    title: 'Advanced Tool Integration',
-    markdown: 'Markdown 2',
-    description: 'Description 2',
-    source_url: 'https://example.com/2',
-  },
-  {
-    title: 'Local Source Code Start | English | Dify',
-    markdown: 'Markdown 3',
-    description: 'Description 3',
-    source_url: 'https://example.com/3',
-  },
-]
-
-export default result

web/app/components/datasets/create/website/jina-reader/options.tsx

@@ -36,12 +36,14 @@ const Options: FC<Props> = ({
         label={t(`${I18N_PREFIX}.crawlSubPage`)}
         isChecked={payload.crawl_sub_pages}
         onChange={handleChange('crawl_sub_pages')}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
       <CheckboxWithLabel
         label={t(`${I18N_PREFIX}.useSitemap`)}
         isChecked={payload.use_sitemap}
         onChange={handleChange('use_sitemap')}
         tooltip={t(`${I18N_PREFIX}.useSitemapTooltip`) as string}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
       <div className='flex justify-between space-x-4'>
         <Field

web/app/components/datasets/create/website/no-data.tsx

@@ -37,13 +37,17 @@ const NoData: FC<Props> = ({
 
   return (
     <>
-      <div className='max-w-[640px] p-6 rounded-2xl bg-gray-50 mt-4'>
-        <div className='flex w-11 h-11 items-center justify-center bg-gray-50 rounded-xl border-[0.5px] border-gray-100 shadow-lg'>
+      <div className='max-w-[640px] p-6 rounded-2xl bg-workflow-process-bg mt-4'>
+        <div className='flex w-12 h-12 items-center justify-center bg-components-card-bg rounded-[10px]
+          border-[0.5px] border-components-card-border shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
           {currentProvider.emoji}
         </div>
-        <div className='my-2'>
-          <span className='text-gray-700 font-semibold'>{currentProvider.title}<Icon3Dots className='inline relative -top-3 -left-1.5' /></span>
-          <div className='mt-1 pb-3 text-gray-500 text-[13px] font-normal'>
+        <div className='mt-2 mb-1 pt-1 pb-3 flex flex-col gap-y-1'>
+          <span className='text-text-secondary system-md-semibold'>
+            {currentProvider.title}
+            <Icon3Dots className='inline relative -top-2.5 -left-1.5' />
+          </span>
+          <div className='text-text-tertiary system-sm-regular'>
             {currentProvider.description}
           </div>
         </div>

web/app/components/datasets/create/website/preview.tsx

@@ -20,19 +20,19 @@ const WebsitePreview = ({
   return (
     <div className={cn(s.filePreview, 'h-full')}>
       <div className={cn(s.previewHeader)}>
-        <div className={cn(s.title)}>
+        <div className={cn(s.title, 'title-md-semi-bold')}>
           <span>{t('datasetCreation.stepOne.pagePreview')}</span>
           <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
             <XMarkIcon className='h-4 w-4'></XMarkIcon>
           </div>
         </div>
-        <div className='leading-5 text-sm font-medium text-gray-900 break-words'>
+        <div className='title-sm-semi-bold text-text-primary break-words'>
           {payload.title}
         </div>
-        <div className='truncate leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
+        <div className='truncate system-xs-medium text-text-tertiary' title={payload.source_url}>{payload.source_url}</div>
       </div>
-      <div className={cn(s.previewContent)}>
-        <div className={cn(s.fileContent, 'body-md-regular')}>{payload.markdown}</div>
+      <div className={cn(s.previewContent, 'body-md-regular')}>
+        <div className={cn(s.fileContent)}>{payload.markdown}</div>
       </div>
     </div>
   )