feat: new icons (#5412)

web/app/components/datasets/common/retrieval-param-config/index.tsx

@@ -3,12 +3,14 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
 import { RETRIEVE_METHOD } from '@/types/app'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip-plus'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import type { RetrievalConfig } from '@/types/app'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import { useModelListAndDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -68,7 +70,7 @@ const RetrievalParamConfig: FC<Props> = ({
             <div className='flex items-center'>
               <span className='mr-0.5'>{t('common.modelProvider.rerankModel.key')}</span>
               <Tooltip popupContent={<div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>}>
-                <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+                <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
               </Tooltip>
             </div>
           </div>

web/app/components/datasets/create/embedding-process/index.tsx

@@ -6,6 +6,9 @@ import { useTranslation } from 'react-i18next'
 import { omit } from 'lodash-es'
 import { ArrowRightIcon } from '@heroicons/react/24/solid'
 import cn from 'classnames'
+import {
+  RiErrorWarningFill,
+} from '@remixicon/react'
 import s from './index.module.css'
 import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
 import Button from '@/app/components/base/button'
@@ -20,7 +23,6 @@ import { ZapFast } from '@/app/components/base/icons/src/vender/solid/general'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useProviderContext } from '@/context/provider-context'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import { sleep } from '@/utils'
 
 type Props = {
@@ -264,7 +266,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                 )}>
                   <div className={cn(s.percent, s.error, 'flex items-center')}>
                     Error
-                    <AlertCircle className='ml-1 w-4 h-4' />
+                    <RiErrorWarningFill className='ml-1 w-4 h-4' />
                   </div>
                 </TooltipPlus>
               )}

web/app/components/datasets/create/step-two/index.tsx

@@ -6,6 +6,10 @@ import { useBoolean } from 'ahooks'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import cn from 'classnames'
+import {
+  RiCloseLine,
+  RiQuestionLine,
+} from '@remixicon/react'
 import Link from 'next/link'
 import { groupBy } from 'lodash-es'
 import RetrievalMethodInfo from '../../common/retrieval-method-info'
@@ -33,7 +37,6 @@ import { DataSourceType, DocForm } from '@/models/datasets'
 import NotionIcon from '@/app/components/base/notion-icon'
 import Switch from '@/app/components/base/switch'
 import { MessageChatSquare } from '@/app/components/base/icons/src/public/common'
-import { HelpCircle, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
 import I18n from '@/context/i18n'
 import { IS_CE_EDITION } from '@/config'
@@ -630,7 +633,7 @@ const StepTwo = ({
                             {t('datasetCreation.stepTwo.overlapTip')}
                           </div>
                         }>
-                          <HelpCircle className='ml-1 w-3.5 h-3.5 text-gray-400' />
+                          <RiQuestionLine className='ml-1 w-3.5 h-3.5 text-gray-400' />
                         </TooltipPlus>
                       </div>
                       <input
@@ -760,7 +763,7 @@ const StepTwo = ({
                 {docForm === DocForm.QA && !QATipHide && (
                   <div className='flex justify-between items-center px-5 py-2 bg-orange-50 border-t border-amber-100 rounded-b-xl text-[13px] leading-[18px] text-medium text-amber-500'>
                     {t('datasetCreation.stepTwo.QATip')}
-                    <XClose className='w-4 h-4 text-gray-500 cursor-pointer' onClick={() => setQATipHide(true)} />
+                    <RiCloseLine className='w-4 h-4 text-gray-500 cursor-pointer' onClick={() => setQATipHide(true)} />
                   </div>
                 )}
               </div>

web/app/components/datasets/create/step-two/language-select/index.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import { RiArrowDownSLine } from '@remixicon/react'
 import Popover from '@/app/components/base/popover'
 import { languages } from '@/i18n/language'
 
@@ -33,7 +33,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
       btnElement={
         <div className='inline-flex items-center'>
           <span className='pr-[2px] text-xs leading-[18px] font-medium'>{currentLanguage}</span>
-          <ChevronDown className='w-3 h-3 opacity-60' />
+          <RiArrowDownSLine className='w-3 h-3 opacity-60' />
         </div>
       }
       btnClassName={open => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit', open ? 'text-blue-600' : 'text-gray-500')}

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

@@ -2,9 +2,11 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import Input from './input'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 
 type Props = {
   className?: string
@@ -38,7 +40,7 @@ const Field: FC<Props> = ({
           <TooltipPlus popupContent={
             <div className='w-[200px]'>{tooltip}</div>
           }>
-            <HelpCircle className='relative top-[3px] w-3 h-3 ml-1 text-gray-500' />
+            <RiQuestionLine className='relative top-[3px] w-3 h-3 ml-1 text-gray-500' />
           </TooltipPlus>
         )}
       </div>

web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx

@@ -2,11 +2,13 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import Button from '@/app/components/base/button'
 
 export type Props = {
@@ -113,7 +115,7 @@ const CSVUploader: FC<Props> = ({
               <Button className='!h-8 !px-3 !py-[6px] bg-white !text-[13px] !leading-[18px] text-gray-700' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
               <div className='mx-2 w-px h-4 bg-gray-200' />
               <div className='p-2 cursor-pointer' onClick={removeFile}>
-                <Trash03 className='w-4 h-4 text-gray-500' />
+                <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
               </div>
             </div>
           </div>

web/app/components/datasets/documents/detail/batch-modal/index.tsx

@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
 import CSVUploader from './csv-uploader'
 import CSVDownloader from './csv-downloader'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import type { DocForm } from '@/models/datasets'
 
 export type IBatchModalProps = {
@@ -42,7 +42,7 @@ const BatchModal: FC<IBatchModalProps> = ({
     <Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
       <div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetDocuments.list.batchModal.title')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
-        <XClose className='w-4 h-4 text-gray-500' />
+        <RiCloseLine className='w-4 h-4 text-gray-500' />
       </div>
       <CSVUploader
         file={currentCSV}

web/app/components/datasets/documents/detail/completed/SegmentCard.tsx

@@ -3,6 +3,10 @@ import React, { useState } from 'react'
 import cn from 'classnames'
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiErrorWarningFill,
+} from '@remixicon/react'
 import { StatusItem } from '../../list'
 import { DocumentTitle } from '../index'
 import s from './style.module.css'
@@ -14,8 +18,6 @@ import Divider from '@/app/components/base/divider'
 import Indicator from '@/app/components/header/indicator'
 import { formatNumber } from '@/utils/format'
 import type { SegmentDetailModel } from '@/models/datasets'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 
 const ProgressBar: FC<{ percent: number; loading: boolean }> = ({ percent, loading }) => {
   return (
@@ -188,7 +190,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                     e.stopPropagation()
                     setShowModal(true)
                   }}>
-                    <Trash03 className='w-[14px] h-[14px] text-gray-500 group-hover/delete:text-red-600' />
+                    <RiDeleteBinLine className='w-[14px] h-[14px] text-gray-500 group-hover/delete:text-red-600' />
                   </div>
                 )}
               </div>
@@ -218,7 +220,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
       {showModal && <Modal isShow={showModal} onClose={() => setShowModal(false)} className={s.delModal} closable>
         <div>
           <div className={s.warningWrapper}>
-            <AlertCircle className='w-6 h-6 text-red-600' />
+            <RiErrorWarningFill className='w-6 h-6 text-red-600' />
           </div>
           <div className='text-xl font-semibold text-gray-900 mb-1'>{t('datasetDocuments.segment.delete')}</div>
           <div className='flex gap-2 justify-end'>

web/app/components/datasets/documents/detail/completed/index.tsx

@@ -6,6 +6,10 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { debounce, isNil, omitBy } from 'lodash-es'
 import cn from 'classnames'
+import {
+  RiCloseLine,
+  RiEditLine,
+} from '@remixicon/react'
 import { StatusItem } from '../../list'
 import { DocumentContext } from '../index'
 import { ProcessStatus } from '../segment-add'
@@ -23,7 +27,6 @@ import { deleteSegment, disableSegment, enableSegment, fetchSegments, updateSegm
 import type { SegmentDetailModel, SegmentUpdator, SegmentsQuery, SegmentsResponse } from '@/models/datasets'
 import { asyncRunSafe } from '@/utils'
 import type { CommonResponse } from '@/models/common'
-import { Edit03, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
 import Button from '@/app/components/base/button'
 import NewSegmentModal from '@/app/components/datasets/documents/detail/new-segment-modal'
@@ -152,13 +155,13 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
           <>
             <div className='group relative flex justify-center items-center w-6 h-6 hover:bg-gray-100 rounded-md cursor-pointer'>
               <div className={cn(s.editTip, 'hidden items-center absolute -top-10 px-3 h-[34px] bg-white rounded-lg whitespace-nowrap text-xs font-semibold text-gray-700 group-hover:flex')}>{t('common.operation.edit')}</div>
-              <Edit03 className='w-4 h-4 text-gray-500' onClick={() => setIsEditing(true)} />
+              <RiEditLine className='w-4 h-4 text-gray-500' onClick={() => setIsEditing(true)} />
             </div>
             <div className='mx-3 w-[1px] h-3 bg-gray-200' />
           </>
         )}
         <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={onCancel}>
-          <XClose className='w-4 h-4 text-gray-500' />
+          <RiCloseLine className='w-4 h-4 text-gray-500' />
         </div>
       </div>
       <SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit mt-[2px] mb-6' />

web/app/components/datasets/documents/detail/new-segment-modal.tsx

@@ -3,10 +3,11 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useParams } from 'next/navigation'
+import { RiCloseLine } from '@remixicon/react'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
-import { Hash02, XClose } from '@/app/components/base/icons/src/vender/line/general'
+import { Hash02 } from '@/app/components/base/icons/src/vender/line/general'
 import { ToastContext } from '@/app/components/base/toast'
 import type { SegmentUpdator } from '@/models/datasets'
 import { addSegment } from '@/service/datasets'
@@ -114,7 +115,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
       <div className={'flex flex-col relative'}>
         <div className='absolute right-0 -top-0.5 flex items-center h-6'>
           <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={handleCancel}>
-            <XClose className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='w-4 h-4 text-gray-500' />
           </div>
         </div>
         <div className='mb-[14px]'>

web/app/components/datasets/documents/detail/segment-add/index.tsx

@@ -3,9 +3,11 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiErrorWarningFill,
+  RiLoader2Line,
+} from '@remixicon/react'
 import { FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
-import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Popover from '@/app/components/base/popover'
 
@@ -38,7 +40,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
           <div className='relative overflow-hidden inline-flex items-center mr-2 px-3 py-[6px] text-blue-700 bg-[#F5F8FF] rounded-lg border border-black/5'>
             {importStatus === ProcessStatus.WAITING && <div className='absolute left-0 top-0 w-3/12 h-full bg-[#D1E0FF] z-0'/>}
             {importStatus === ProcessStatus.PROCESSING && <div className='absolute left-0 top-0 w-2/3 h-full bg-[#D1E0FF] z-0'/>}
-            <Loading02 className='animate-spin mr-2 w-4 h-4' />
+            <RiLoader2Line className='animate-spin mr-2 w-4 h-4' />
             <span className='font-medium text-[13px] leading-[18px] z-10'>{t('datasetDocuments.list.batchModal.processing')}</span>
           </div>
         )}
@@ -51,7 +53,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
         )}
         {importStatus === ProcessStatus.ERROR && (
           <div className='inline-flex items-center mr-2 px-3 py-[6px] text-red-600 bg-red-100 rounded-lg border border-black/5'>
-            <AlertCircle className='mr-2 w-4 h-4 text-[#D92D20]' />
+            <RiErrorWarningFill className='mr-2 w-4 h-4 text-[#D92D20]' />
             <span className='font-medium text-[13px] leading-[18px]'>{t('datasetDocuments.list.batchModal.error')}</span>
             <span className='pl-2 font-medium text-[13px] leading-[18px] text-[#155EEF] cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
           </div>

web/app/components/datasets/documents/list.tsx

@@ -6,6 +6,10 @@ import { useBoolean, useDebounceFn } from 'ahooks'
 import { ArrowDownIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { ExclamationCircleIcon } from '@heroicons/react/24/solid'
 import { pick } from 'lodash-es'
+import {
+  RiMoreFill,
+  RiQuestionLine,
+} from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
@@ -32,7 +36,6 @@ import NotionIcon from '@/app/components/base/notion-icon'
 import ProgressBar from '@/app/components/base/progress-bar'
 import { DataSourceType, type DocumentDisplayStatus, type SimpleDocumentDetail } from '@/models/datasets'
 import type { CommonResponse } from '@/models/common'
-import { DotsHorizontal, HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import useTimestamp from '@/hooks/use-timestamp'
 
 export const SettingsIcon = ({ className }: SVGProps<SVGElement>) => {
@@ -98,7 +101,7 @@ export const StatusItem: FC<{
             <div className='max-w-[260px] break-all'>{errorMessage}</div>
           }
         >
-          <HelpCircle className='ml-1 w-[14px] h-[14px] text-gray-700' />
+          <RiQuestionLine className='ml-1 w-[14px] h-[14px] text-gray-700' />
         </Tooltip>
       )
     }
@@ -284,7 +287,7 @@ export const OperationAction: FC<{
         position='br'
         btnElement={
           <div className={cn(s.commonIcon)}>
-            <DotsHorizontal className='w-4 h-4 text-gray-700' />
+            <RiMoreFill className='w-4 h-4 text-gray-700' />
           </div>
         }
         btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!bg-gray-100 !shadow-none' : '!bg-transparent')}

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

@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
 import Toast from '../../base/toast'
 import { ModelTypeEnum } from '../../header/account-setting/model-provider-page/declarations'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import type { RetrievalConfig } from '@/types/app'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
@@ -86,7 +86,7 @@ const ModifyRetrievalModal: FC<Props> = ({
             onClick={onHide}
             className='flex justify-center items-center w-6 h-6 cursor-pointer'
           >
-            <XClose className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='w-4 h-4 text-gray-500' />
           </div>
         </div>
       </div>

web/app/components/datasets/rename-modal/index.tsx

@@ -3,13 +3,13 @@
 import type { MouseEventHandler } from 'react'
 import cn from 'classnames'
 import { useState } from 'react'
+import { RiCloseLine } from '@remixicon/react'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import type { DataSet } from '@/models/datasets'
 import { updateDatasetSetting } from '@/service/datasets'
 
@@ -62,7 +62,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
     >
       <div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetSettings.title')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
-        <XClose className='w-4 h-4 text-gray-500' />
+        <RiCloseLine className='w-4 h-4 text-gray-500' />
       </div>
       <div>
         <div className={cn('flex justify-between py-4 flex-wrap items-center')}>