feat: new icons (#5412)

2024-06-20 11:05:08 +08:00
parent 0105129fa8
commit 2328ed8ffa
338 changed files with 880 additions and 3669 deletions
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -7,19 +7,25 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useBoolean } from 'ahooks'
 import produce from 'immer'
+import {
+  RiDeleteBinLine,
+  RiErrorWarningFill,
+  RiQuestionLine,
+} from '@remixicon/react'
 import s from './style.module.css'
 import MessageTypeSelector from './message-type-selector'
 import ConfirmAddVar from './confirm-add-var'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
 import type { PromptRole, PromptVariable } from '@/models/debug'
-import { HelpCircle, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
-import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import {
+  Clipboard,
+  ClipboardCheck,
+} from '@/app/components/base/icons/src/vender/line/files'
 import Tooltip from '@/app/components/base/tooltip'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import ConfigContext from '@/context/debug-configuration'
 import { getNewVar, getVars } from '@/utils/var'
 import { AppType } from '@/types/app'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import { useModalContext } from '@/context/modal-context'
 import type { ExternalDataTool } from '@/models/common'
 import { useToastContext } from '@/app/components/base/toast'
@@ -140,7 +146,7 @@ const AdvancedPromptInput: FC<Props> = ({
      }}
    >
      <div className='flex items-center pr-2' >
-        <AlertCircle className='mr-1 w-4 h-4 text-[#F79009]' />
+        <RiErrorWarningFill className='mr-1 w-4 h-4 text-[#F79009]' />
        <div className='leading-[18px] text-[13px] font-medium text-[#DC6803]'>{t('appDebug.promptMode.contextMissing')}</div>
      </div>
      <div
@@ -170,12 +176,12 @@ const AdvancedPromptInput: FC<Props> = ({
                        {t('appDebug.promptTip')}
                      </div>}
                      selector='config-prompt-tooltip'>
-                      <HelpCircle className='w-[14px] h-[14px] text-indigo-400' />
+                      <RiQuestionLine className='w-[14px] h-[14px] text-indigo-400' />
                    </Tooltip>
                  </div>)}
              <div className={cn(s.optionWrap, 'items-center space-x-1')}>
                {canDelete && (
-                  <Trash03 onClick={onDelete} className='h-6 w-6 p-1 text-gray-500 cursor-pointer' />
+                  <RiDeleteBinLine onClick={onDelete} className='h-6 w-6 p-1 text-gray-500 cursor-pointer' />
                )}
                {!isCopied
                  ? (
--- a/web/app/components/app/configuration/config-prompt/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/index.tsx
@@ -3,6 +3,9 @@ import type { FC } from 'react'
 import React from 'react'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import SimplePromptInput from './simple-prompt-input'
 import AdvancedMessageInput from '@/app/components/app/configuration/config-prompt/advanced-prompt-input'
@@ -10,7 +13,6 @@ import { PromptRole } from '@/models/debug'
 import type { PromptItem, PromptVariable } from '@/models/debug'
 import { type AppType, ModelModeType } from '@/types/app'
 import ConfigContext from '@/context/debug-configuration'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import { MAX_PROMPT_MESSAGE_LENGTH } from '@/config'
 export type IPromptProps = {
  mode: AppType
@@ -142,7 +144,7 @@ const Prompt: FC<IPromptProps> = ({
        <div
          onClick={handleAddMessage}
          className='mt-3 flex items-center h-8 justify-center bg-gray-50 rounded-lg cursor-pointer text-[13px] font-medium text-gray-700 space-x-2'>
-          <Plus className='w-4 h-4' />
+          <RiAddLine className='w-4 h-4' />
          <div>{t('appDebug.promptMode.operation.addMessage')}</div>
        </div>
      )}
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -4,6 +4,9 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import cn from 'classnames'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import produce from 'immer'
 import { useContext } from 'use-context-selector'
 import ConfirmAddVar from './confirm-add-var'
@@ -13,7 +16,6 @@ import { type PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import { AppType } from '@/types/app'
 import { getNewVar, getVars } from '@/utils/var'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import AutomaticBtn from '@/app/components/app/configuration/config/automatic/automatic-btn'
 import type { AutomaticRes } from '@/service/debug'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
@@ -143,7 +145,7 @@ const Prompt: FC<ISimplePromptInput> = ({
                  {t('appDebug.promptTip')}
                </div>}
                selector='config-prompt-tooltip'>
-                <HelpCircle className='w-[14px] h-[14px] text-indigo-400' />
+                <RiQuestionLine className='w-[14px] h-[14px] text-indigo-400' />
              </Tooltip>
            )}
          </div>
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -6,6 +6,10 @@ import { useBoolean } from 'ahooks'
 import type { Timeout } from 'ahooks/lib/useRequest/src/types'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
+import {
+  RiDeleteBinLine,
+  RiQuestionLine,
+} from '@remixicon/react'
 import Panel from '../base/feature-panel'
 import EditModal from './config-modal'
 import IconTypeIcon from './input-type-icon'
@@ -19,7 +23,7 @@ import { DEFAULT_VALUE_MAX_LEN, getMaxVarNameLength } from '@/config'
 import { checkKeys, getNewVar } from '@/utils/var'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
-import { HelpCircle, Settings01, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import ConfirmModal from '@/app/components/base/confirm/common'
 import ConfigContext from '@/context/debug-configuration'
 import { AppType } from '@/types/app'
@@ -281,7 +285,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
            <Tooltip htmlContent={<div className='w-[180px]'>
              {t('appDebug.variableTip')}
            </div>} selector='config-var-tooltip'>
-              <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+              <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
            </Tooltip>
          )}
        </div>
@@ -358,7 +362,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
                            <Settings01 className='w-4 h-4 text-gray-500' />
                          </div>
                          <div className=' p-1 rounded-md hover:bg-black/5 w-6 h-6 cursor-pointer' onClick={() => handleRemoveVar(index)} >
-                            <Trash03 className='w-4 h-4 text-gray-500' />
+                            <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
                          </div>
                        </div>
                      </td>
--- a/web/app/components/app/configuration/config-vision/index.tsx
+++ b/web/app/components/app/configuration/config-vision/index.tsx
@@ -2,10 +2,12 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import Panel from '../base/feature-panel'
 import ParamConfig from './param-config'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
 import { Eye } from '@/app/components/base/icons/src/vender/solid/general'
@@ -34,7 +36,7 @@ const ConfigVision: FC = () => {
          <Tooltip htmlContent={<div className='w-[180px]' >
            {t('appDebug.vision.description')}
          </div>} selector='config-vision-tooltip'>
-            <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+            <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
          </Tooltip>
        </div>
      }
--- a/web/app/components/app/configuration/config-vision/param-config-content.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config-content.tsx
@@ -3,12 +3,14 @@ import type { FC } from 'react'
 import React from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import RadioGroup from './radio-group'
 import ConfigContext from '@/context/debug-configuration'
 import { Resolution, TransferMethod } from '@/types/app'
 import ParamItem from '@/app/components/base/param-item'
 import Tooltip from '@/app/components/base/tooltip'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'

 const MIN = 1
 const MAX = 6
@@ -40,7 +42,7 @@ const ParamConfigContent: FC = () => {
                  <div key={item}>{item}</div>
                ))}
              </div>} selector='config-resolution-tooltip'>
-                <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+                <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
              </Tooltip>
            </div>
            <RadioGroup
--- a/web/app/components/app/configuration/config-voice/param-config-content.tsx
+++ b/web/app/components/app/configuration/config-voice/param-config-content.tsx
@@ -4,6 +4,9 @@ import type { FC } from 'react'
 import { useContext } from 'use-context-selector'
 import React, { Fragment } from 'react'
 import classNames from 'classnames'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import { usePathname } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { Listbox, Transition } from '@headlessui/react'
@@ -12,7 +15,6 @@ import type { Item } from '@/app/components/base/select'
 import ConfigContext from '@/context/debug-configuration'
 import { fetchAppVoices } from '@/service/apps'
 import Tooltip from '@/app/components/base/tooltip'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import { languages } from '@/i18n/language'
 const VoiceParamConfig: FC = () => {
  const { t } = useTranslation()
@@ -46,7 +48,7 @@ const VoiceParamConfig: FC = () => {
                  <div key={item}>{item}</div>
                ))}
              </div>} selector='config-resolution-tooltip'>
-                <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+                <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
              </Tooltip>
            </div>
            <Listbox
--- a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
 import ItemPanel from './item-panel'
 import Button from '@/app/components/base/button'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Unblur } from '@/app/components/base/icons/src/vender/solid/education'
 import Slider from '@/app/components/base/slider'
@@ -53,7 +53,7 @@ const AgentSetting: FC<Props> = ({
              onClick={onCancel}
              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>
--- a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from 'classnames'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+import { RiQuestionLine } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
 type Props = {
  className?: string
@@ -32,7 +32,7 @@ const ItemPanel: FC<Props> = ({
          }
          selector={`agent-setting-tooltip-${name}`}
        >
-          <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+          <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
        </Tooltip>
      </div>
      <div>
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -5,13 +5,17 @@ import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
+import {
+  RiDeleteBinLine,
+  RiHammerFill,
+  RiQuestionLine,
+} from '@remixicon/react'
 import { useFormattingChangedDispatcher } from '../../../debug/hooks'
 import SettingBuiltInTool from './setting-built-in-tool'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import Tooltip from '@/app/components/base/tooltip'
-import { HelpCircle, InfoCircle, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
-import { ToolsActive } from '@/app/components/base/icons/src/public/header-nav/tools'
 import AppIcon from '@/app/components/base/app-icon'
 import Switch from '@/app/components/base/switch'
 import ConfigContext from '@/context/debug-configuration'
@@ -59,7 +63,7 @@ const AgentTools: FC = () => {
        className="mt-4"
        noBodySpacing={tools.length === 0}
        headerIcon={
-          <ToolsActive className='w-4 h-4 text-primary-500' />
+          <RiHammerFill className='w-4 h-4 text-primary-500' />
        }
        title={
          <div className='flex items-center'>
@@ -67,7 +71,7 @@ const AgentTools: FC = () => {
            <Tooltip htmlContent={<div className='w-[180px]'>
              {t('appDebug.agent.tools.description')}
            </div>} selector='config-tools-tooltip'>
-              <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+              <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
            </Tooltip>
          </div>
        }
@@ -144,7 +148,7 @@ const AgentTools: FC = () => {
                        setModelConfig(newModelConfig)
                        formattingChangedDispatcher()
                      }}>
-                        <Trash03 className='w-4 h-4 text-gray-500' />
+                        <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
                      </div>
                      <div className='ml-2 mr-3 w-px h-3.5 bg-gray-200'></div>
                    </div>
@@ -169,7 +173,7 @@ const AgentTools: FC = () => {
                        setModelConfig(newModelConfig)
                        formattingChangedDispatcher()
                      }}>
-                        <Trash03 className='w-4 h-4 text-gray-500' />
+                        <RiDeleteBinLine className='w-4 h-4 text-gray-500' />
                      </div>
                      <div className='ml-2 mr-3 w-px h-3.5 bg-gray-200'></div>
                    </div>
--- a/web/app/components/app/configuration/config/agent/prompt-editor.tsx
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -5,7 +5,10 @@ import copy from 'copy-to-clipboard'
 import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import {
+  Clipboard,
+  ClipboardCheck,
+} from '@/app/components/base/icons/src/vender/line/files'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import type { ExternalDataTool } from '@/models/common'
 import ConfigContext from '@/context/debug-configuration'
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
 import AgentSetting from '../agent/agent-setting'
 import {
  PortalToFollowElem,
@@ -11,7 +12,6 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import { BubbleText } from '@/app/components/base/icons/src/vender/solid/education'
 import Radio from '@/app/components/base/radio/ui'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/solid/arrows'
 import { CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
@@ -119,7 +119,7 @@ const AssistantTypePicker: FC<Props> = ({
          <div className={cn(open && 'bg-gray-50', 'flex items-center h-8 px-3 border border-black/5 rounded-lg cursor-pointer select-none space-x-1 text-indigo-600')}>
            {isAgent ? <BubbleText className='w-3 h-3' /> : <CuteRobote className='w-3 h-3' />}
            <div className='text-xs font-medium'>{t(`appDebug.assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`)}</div>
-            <ChevronDown className='w-3 h-3' />
+            <RiArrowDownSLine className='w-3 h-3' />
          </div>
        </PortalToFollowElemTrigger>
        <PortalToFollowElemContent style={{ zIndex: 1000 }}>
--- a/web/app/components/app/configuration/dataset-config/card-item/item.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/item.tsx
@@ -2,12 +2,13 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiDeleteBinLine } from '@remixicon/react'
 import SettingsModal from '../settings-modal'
 import type { DataSet } from '@/models/datasets'
 import { DataSourceType } from '@/models/datasets'
 import { formatNumber } from '@/utils/format'
 import FileIcon from '@/app/components/base/file-icon'
-import { Settings01, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
 import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -77,7 +78,7 @@ const Item: FC<ItemProps> = ({
          className='group/action flex items-center justify-center w-6 h-6 hover:bg-[#FEE4E2] rounded-md cursor-pointer'
          onClick={() => onRemove(config.id)}
        >
-          <Trash03 className='w-4 h-4 text-gray-500 group-hover/action:text-[#D92D20]' />
+          <RiDeleteBinLine className='w-4 h-4 text-gray-500 group-hover/action:text-[#D92D20]' />
        </div>
      </div>
      <Drawer isOpen={showSettingsModal} onClose={() => setShowSettingsModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
--- a/web/app/components/app/configuration/dataset-config/context-var/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
@@ -3,11 +3,13 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import type { Props } from './var-picker'
 import VarPicker from './var-picker'
 import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
 import Tooltip from '@/app/components/base/tooltip'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'

 const ContextVar: FC<Props> = (props) => {
  const { t } = useTranslation()
@@ -27,7 +29,7 @@ const ContextVar: FC<Props> = (props) => {
          </div>}
          selector='context-var-tooltip'
        >
-          <HelpCircle className='w-3.5 h-3.5 text-gray-400'/>
+          <RiQuestionLine className='w-3.5 h-3.5 text-gray-400'/>
        </Tooltip>
      </div>

--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -2,6 +2,9 @@
 import React from 'react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+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 RadioCard from '@/app/components/base/radio-card/simple'
@@ -19,7 +22,6 @@ import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/com
 import type { ModelConfig } from '@/app/components/workflow/types'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'

 type Props = {
@@ -155,7 +157,7 @@ const ConfigContent: FC<Props> = ({
            <TooltipPlus
              popupContent={t('common.modelProvider.systemReasoningModel.tip')}
            >
-              <HelpCircle className='w-3.5 h-4.5 text-gray-400' />
+              <RiQuestionLine className='w-3.5 h-4.5 text-gray-400' />
            </TooltipPlus>
          </div>
          <ModelParameterModal
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -3,6 +3,7 @@ import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { isEqual } from 'lodash-es'
 import cn from 'classnames'
+import { RiCloseLine } from '@remixicon/react'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
 import IndexMethodRadio from '@/app/components/datasets/settings/index-method-radio'
 import Button from '@/app/components/base/button'
@@ -10,7 +11,6 @@ import type { DataSet } from '@/models/datasets'
 import { useToastContext } from '@/app/components/base/toast'
 import { updateDatasetSetting } from '@/service/datasets'
 import { useModalContext } from '@/context/modal-context'
-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'
@@ -136,7 +136,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
            onClick={onCancel}
            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>
@@ -262,7 +262,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
            e.stopPropagation()
            e.nativeEvent.stopImmediatePropagation()
          }}>
-            <XClose className='w-4 h-4 text-gray-500 ' />
+            <RiCloseLine className='w-4 h-4 text-gray-500 ' />
          </div>
        </div>
      )}
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
 import type { ModelAndParameter } from '../types'
 import { useDebugWithMultipleModelContext } from './context'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
@@ -11,7 +12,6 @@ import {
  ModelStatusEnum,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDebugConfigurationContext } from '@/context/debug-configuration'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
@@ -108,7 +108,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
              </div>
            )
          }
-          <ChevronDown className={`w-3 h-3 ${(currentModel && currentProvider) ? 'text-gray-800' : 'text-primary-600'}`} />
+          <RiArrowDownSLine className={`w-3 h-3 ${(currentModel && currentProvider) ? 'text-gray-800' : 'text-primary-600'}`} />
          {
            currentModel && currentModel.status !== ModelStatusEnum.active && (
              <TooltipPlus popupContent={MODEL_STATUS_TEXT[currentModel.status][language]}>
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -5,6 +5,9 @@ import { useTranslation } from 'react-i18next'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { setAutoFreeze } from 'immer'
 import { useBoolean } from 'ahooks'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
 import HasNotSetAPIKEY from '../base/warning-mask/has-not-set-api'
@@ -34,7 +37,6 @@ import { fetchFileUploadConfig } from '@/service/common'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { ModelFeatureEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { ModelParameterModalProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useProviderContext } from '@/context/provider-context'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
@@ -404,7 +406,7 @@ const Debug: FC<IDebug> = ({
                      onClick={() => onMultipleModelConfigsChange(true, [...multipleModelConfigs, { id: `${Date.now()}`, model: '', provider: '', parameters: {} }])}
                      disabled={multipleModelConfigs.length >= 4}
                    >
-                      <Plus className='mr-1 w-3.5 h-3.5' />
+                      <RiAddLine className='mr-1 w-3.5 h-3.5' />
                      {t('common.modelProvider.addModel')}({multipleModelConfigs.length}/4)
                    </Button>
                    <div className='mx-2 w-[1px] h-[14px] bg-gray-200' />
--- a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
+++ b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
@@ -3,6 +3,10 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
+import {
+  RiAddLine,
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +20,6 @@ import { getInputKeys } from '@/app/components/base/block-input'
 import ConfirmAddVar from '@/app/components/app/configuration/config-prompt/confirm-add-var'
 import { getNewVar } from '@/utils/var'
 import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
-import { Plus, Trash03 } from '@/app/components/base/icons/src/vender/line/general'

 const MAX_QUESTION_NUM = 5

@@ -192,7 +195,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
                    setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i))
                  }}
                >
-                  <Trash03 className='w-3.5 h-3.5' />
+                  <RiDeleteBinLine className='w-3.5 h-3.5' />
                </div>
              </div>
            )
@@ -201,7 +204,7 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
          <div
            onClick={() => { setTempSuggestedQuestions([...tempSuggestedQuestions, '']) }}
            className='mt-1 flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-gray-400  bg-gray-100 hover:bg-gray-200'>
-            <Plus className='w-4 h-4'></Plus>
+            <RiAddLine className='w-4 h-4' />
            <div className='text-gray-500 text-[13px]'>{t('appDebug.variableConig.addOption')}</div>
          </div>
        )}
--- a/web/app/components/app/configuration/features/chat-group/suggested-questions-after-answer/index.tsx
+++ b/web/app/components/app/configuration/features/chat-group/suggested-questions-after-answer/index.tsx
@@ -2,10 +2,12 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import SuggestedQuestionsAfterAnswerIcon from '@/app/components/app/configuration/base/icons/suggested-questions-after-answer-icon'
 import Tooltip from '@/app/components/base/tooltip'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'

 const SuggestedQuestionsAfterAnswer: FC = () => {
  const { t } = useTranslation()
@@ -18,7 +20,7 @@ const SuggestedQuestionsAfterAnswer: FC = () => {
          <Tooltip htmlContent={<div className='w-[180px]'>
            {t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}
          </div>} selector='suggestion-question-tooltip'>
-            <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+            <RiQuestionLine className='w-[14px] h-[14px] text-gray-400' />
          </Tooltip>
        </div>
      }
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -3,6 +3,10 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import {
+  RiArrowDownSLine,
+  RiArrowRightLine,
+} from '@remixicon/react'
 import {
  PlayIcon,
 } from '@heroicons/react/24/solid'
@@ -12,7 +16,6 @@ import { AppType, ModelModeType } from '@/types/app'
 import Select from '@/app/components/base/select'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import Button from '@/app/components/base/button'
-import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import Tooltip from '@/app/components/base/tooltip-plus'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import type { VisionFile, VisionSettings } from '@/types/app'
@@ -102,8 +105,8 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
          <div className='flex items-center space-x-1 cursor-pointer' onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
            {
              userInputFieldCollapse
-                ? <ChevronRight className='w-3 h-3 text-gray-300' />
-                : <ChevronDown className='w-3 h-3 text-gray-300' />
+                ? <RiArrowRightLine className='w-3 h-3 text-gray-300' />
+                : <RiArrowDownSLine className='w-3 h-3 text-gray-300' />
            }
            <div className='text-xs font-medium text-gray-800 uppercase'>{t('appDebug.inputs.userInputField')}</div>
          </div>
--- a/web/app/components/app/configuration/toolbox/annotation/config-param.tsx
+++ b/web/app/components/app/configuration/toolbox/annotation/config-param.tsx
@@ -4,11 +4,14 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { usePathname, useRouter } from 'next/navigation'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import ConfigParamModal from './config-param-modal'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { HelpCircle, LinkExternal02, Settings04 } from '@/app/components/base/icons/src/vender/line/general'
+import { LinkExternal02, Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import ConfigContext from '@/context/debug-configuration'
 import type { EmbeddingModelConfig } from '@/app/components/app/annotation/type'
 import { updateAnnotationScore } from '@/service/annotation'
@@ -32,7 +35,7 @@ export const Item: FC<{ title: string; tooltip: string; children: JSX.Element }>
            <div className='max-w-[200px] leading-[18px] text-[13px] font-medium text-gray-800'>{tooltip}</div>
          }
        >
-          <HelpCircle className='w-3.5 h-3.5 text-gray-400' />
+          <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
        </TooltipPlus>
      </div>
      <div>{children}</div>
--- a/web/app/components/app/configuration/tools/index.tsx
+++ b/web/app/components/app/configuration/tools/index.tsx
@@ -3,17 +3,19 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import copy from 'copy-to-clipboard'
 import { useContext } from 'use-context-selector'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+  RiDeleteBinLine,
+  RiQuestionLine,
+} from '@remixicon/react'
 import ConfigContext from '@/context/debug-configuration'
 import Switch from '@/app/components/base/switch'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { Tool03 } from '@/app/components/base/icons/src/vender/solid/general'
 import {
-  HelpCircle,
-  Plus,
  Settings01,
-  Trash03,
 } from '@/app/components/base/icons/src/vender/line/general'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useModalContext } from '@/context/modal-context'
 import type { ExternalDataTool } from '@/models/common'
 import AppIcon from '@/app/components/base/app-icon'
@@ -98,7 +100,7 @@ const Tools = () => {
            }
            {
              !!externalDataToolsConfig.length && (
-                <ChevronDown className={`hidden group-hover:block w-4 h-4 text-primary-600 cursor-pointer ${expanded ? 'rotate-180' : 'rotate-0'}`} />
+                <RiArrowDownSLine className={`hidden group-hover:block w-4 h-4 text-primary-600 cursor-pointer ${expanded ? 'rotate-180' : 'rotate-0'}`} />
              )
            }
          </div>
@@ -106,7 +108,7 @@ const Tools = () => {
            {t('appDebug.feature.tools.title')}
          </div>
          <TooltipPlus popupContent={<div className='max-w-[160px]'>{t('appDebug.feature.tools.tips')}</div>}>
-            <HelpCircle className='w-3.5 h-3.5 text-gray-400' />
+            <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
          </TooltipPlus>
        </div>
        {
@@ -121,7 +123,7 @@ const Tools = () => {
          className='flex items-center h-7 px-3 text-xs font-medium text-gray-700 cursor-pointer'
          onClick={() => handleOpenExternalDataToolModal({}, -1)}
        >
-          <Plus className='mr-[5px] w-3.5 h-3.5 ' />
+          <RiAddLine className='mr-[5px] w-3.5 h-3.5 ' />
          {t('common.operation.add')}
        </div>
      </div>
@@ -165,7 +167,7 @@ const Tools = () => {
                    className='hidden group/action group-hover:flex items-center justify-center w-6 h-6 hover:bg-[#FEE4E2] rounded-md cursor-pointer'
                    onClick={() => setExternalDataToolsConfig([...externalDataToolsConfig.slice(0, index), ...externalDataToolsConfig.slice(index + 1)])}
                  >
-                    <Trash03 className='w-4 h-4 text-gray-500 group-hover/action:text-[#D92D20]' />
+                    <RiDeleteBinLine className='w-4 h-4 text-gray-500 group-hover/action:text-[#D92D20]' />
                  </div>
                  <div className='hidden group-hover:block ml-2 mr-3 w-[1px] h-3.5 bg-gray-200' />
                  <Switch