feat: new icons (#5412)

2025-12-07 18:06:52 +08:00 · 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/tools/add-tool-modal/index.tsx
+++ b/web/app/components/tools/add-tool-modal/index.tsx
@@ -5,6 +5,10 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
 import cn from 'classnames'
+import {
+  RiAddLine,
+  RiCloseLine,
+} from '@remixicon/react'
 import { useMount } from 'ahooks'
 import type { Collection, CustomCollectionBackend, Tool } from '../types'
 import Type from './type'
@@ -16,7 +20,6 @@ import Drawer from '@/app/components/base/drawer'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import SearchInput from '@/app/components/base/search-input'
-import { Plus, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
 import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
 import {
@@ -175,7 +178,7 @@ const AddToolModal: FC<Props> = ({
              <div className='sticky top-0 left-0 right-0 px-5 py-3 text-md font-semibold text-gray-900'>{t('tools.addTool')}</div>
              <div className='px-3 pt-2 pb-4'>
                <Button variant='primary' className='w-[176px] text-[13px] leading-[18px] font-medium' onClick={() => setIsShowEditCustomCollectionModal(true)}>
-                  <Plus className='w-4 h-4 mr-1' />
+                  <RiAddLine className='w-4 h-4 mr-1' />
                  {t('tools.createCustomTool')}
                </Button>
              </div>
@@ -192,7 +195,7 @@ const AddToolModal: FC<Props> = ({
              </div>
              <div className='ml-2 mr-1 w-[1px] h-4 bg-gray-200'></div>
              <div className='p-2 cursor-pointer' onClick={onHide}>
-                <XClose className='w-4 h-4 text-gray-500' />
+                <RiCloseLine className='w-4 h-4 text-gray-500' />
              </div>
            </div>
            {listLoading && (
--- a/web/app/components/tools/add-tool-modal/tools.tsx
+++ b/web/app/components/tools/add-tool-modal/tools.tsx
@@ -4,8 +4,11 @@ import {
 } from 'react'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
-import { Check, Plus } from '@/app/components/base/icons/src/vender/line/general'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { Tag01 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
@@ -109,7 +112,7 @@ const Blocks = ({
                    className={cn('hidden shrink-0 items-center !h-6 px-2 py-1 bg-white text-xs font-medium leading-[18px] text-primary-600 group-hover/item:flex')}
                    onClick={() => onSelect(toolWithProvider, tool)}
                  >
-                    <Plus className='w-3 h-3' />
+                    <RiAddLine className='w-3 h-3' />
                    {t('tools.addToolModal.add').toLocaleUpperCase()}
                  </Button>
                )}
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -3,8 +3,10 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import Tooltip from '../../base/tooltip'
-import { HelpCircle } from '../../base/icons/src/vender/line/general'
 import type { Credential } from '@/app/components/tools/types'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
@@ -117,7 +119,7 @@ const ConfigCredential: FC<Props> = ({
                        </div>
                      }
                    >
-                      <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
+                      <RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
                    </Tooltip>
                  </div>
                  <input
--- a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -3,9 +3,11 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useClickAway } from 'ahooks'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+} from '@remixicon/react'
 import Toast from '../../base/toast'
-import { Plus } from '../../base/icons/src/vender/line/general'
-import { ChevronDown } from '../../base/icons/src/vender/line/arrows'
 import examples from './examples'
 import Button from '@/app/components/base/button'
 import { importSchemaFromURL } from '@/service/tools'
@@ -59,7 +61,7 @@ const GetSchema: FC<Props> = ({
          className='flex items-center !h-6 !px-2 space-x-1 '
          onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
        >
-          <Plus className='w-3 h-3' />
+          <RiAddLine className='w-3 h-3' />
          <div className='text-xs font-medium text-gray-700'>{t('tools.createTool.importFromUrl')}</div>
        </Button>
        {showImportFromUrl && (
@@ -91,7 +93,7 @@ const GetSchema: FC<Props> = ({
          onClick={() => { setShowExamples(!showExamples) }}
        >
          <div className='text-xs font-medium text-gray-700'>{t('tools.createTool.examples')}</div>
-          <ChevronDown className='w-3 h-3' />
+          <RiArrowDownSLine className='w-3 h-3' />
        </Button>
        {showExamples && (
          <div className='absolute top-7 right-0 p-1 rounded-lg bg-white shadow-sm'>
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useDebounceFn, useMount } from 'ahooks'
 import cn from 'classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
 import { useStore as useLabelStore } from './store'
 import {
  PortalToFollowElem,
@@ -11,7 +12,6 @@ import {
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import SearchInput from '@/app/components/base/search-input'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Tag01, Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
@@ -97,7 +97,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
            )}
            {!value.length && (
              <div className='p-[1px]'>
-                <ChevronDown className='h-3.5 w-3.5 text-gray-700'/>
+                <RiArrowDownSLine className='h-3.5 w-3.5 text-gray-700'/>
              </div>
            )}
            {!!value.length && (
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useDebounceFn, useMount } from 'ahooks'
 import cn from 'classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
 import { useStore as useLabelStore } from './store'
 import {
  PortalToFollowElem,
@@ -11,7 +12,6 @@ import {
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import SearchInput from '@/app/components/base/search-input'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Tag03 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import Checkbox from '@/app/components/base/checkbox'
 import type { Label } from '@/app/components/tools/labels/constant'
@@ -87,7 +87,7 @@ const LabelSelector: FC<LabelSelectorProps> = ({
              {!!value.length && selectedLabels}
            </div>
            <div className='shrink-0 ml-1 text-gray-700 opacity-60'>
-              <ChevronDown className='h-4 w-4'/>
+              <RiArrowDownSLine className='h-4 w-4'/>
            </div>
          </div>
        </PortalToFollowElemTrigger>
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -2,12 +2,13 @@
 import { useEffect, useMemo, useState } from 'react'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
 import type { Collection } from './types'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import TabSliderNew from '@/app/components/base/tab-slider-new'
 import LabelFilter from '@/app/components/tools/labels/filter'
 import SearchInput from '@/app/components/base/search-input'
-import { DotsGrid, XClose } from '@/app/components/base/icons/src/vender/line/general'
+import { DotsGrid } from '@/app/components/base/icons/src/vender/line/general'
 import { Colors } from '@/app/components/base/icons/src/vender/line/others'
 import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
 import CustomCreateCard from '@/app/components/tools/provider/custom-create-card'
@@ -109,7 +110,7 @@ const ProviderList = () => {
      )}>
        {currentProvider && <ProviderDetail collection={currentProvider} onRefreshData={getProviderList} />}
      </div>
-      <div className='absolute top-5 right-5 p-1 cursor-pointer' onClick={() => setCurrentProvider(undefined)}><XClose className='w-4 h-4'/></div>
+      <div className='absolute top-5 right-5 p-1 cursor-pointer' onClick={() => setCurrentProvider(undefined)}><RiCloseLine className='w-4 h-4'/></div>
    </div>
  )
 }
--- a/web/app/components/tools/provider/contribute.tsx
+++ b/web/app/components/tools/provider/contribute.tsx
@@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ToolsActive } from '@/app/components/base/icons/src/public/header-nav/tools'
+import {
+  RiHammerFill,
+} from '@remixicon/react'
 import { Heart02 } from '@/app/components/base/icons/src/vender/solid/education'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
@@ -19,7 +21,7 @@ const Contribute: FC = () => {
    >
      <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
        <div className='relative shrink-0 flex items-center'>
-          <div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><ToolsActive className='w-4 h-4 text-primary-600'/></div>
+          <div className='z-10 flex p-3 rounded-[10px] bg-white border-[0.5px] border-primary-100 shadow-md'><RiHammerFill className='w-4 h-4 text-primary-600'/></div>
          <div className='-translate-x-2 flex p-3 rounded-[10px] bg-[#FEF6FB] border-[0.5px] border-[#FCE7F6] shadow-md'><Heart02 className='w-4 h-4 text-[#EE46BC]'/></div>
        </div>
      </div>
--- a/web/app/components/tools/provider/custom-create-card.tsx
+++ b/web/app/components/tools/provider/custom-create-card.tsx
@@ -2,10 +2,12 @@
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import type { CustomCollectionBackend } from '../types'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
@@ -47,7 +49,7 @@ const Contribute = ({ onRefreshData }: Props) => {
          <div className='group grow rounded-t-xl hover:bg-white' onClick={() => setIsShowEditCustomCollectionModal(true)}>
            <div className='shrink-0 flex items-center p-4 pb-3'>
              <div className='w-10 h-10 flex items-center justify-center border border-gray-200 bg-gray-100 rounded-lg group-hover:border-primary-100 group-hover:bg-primary-50'>
-                <Plus className='w-4 h-4 text-gray-500 group-hover:text-primary-600'/>
+                <RiAddLine className='w-4 h-4 text-gray-500 group-hover:text-primary-600'/>
              </div>
              <div className='ml-3 text-sm font-semibold leading-5 text-gray-800 group-hover:text-primary-600'>{t('tools.createCustomTool')}</div>
            </div>
--- a/web/app/components/tools/tool-list/index.tsx
+++ b/web/app/components/tools/tool-list/index.tsx
@@ -1,220 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
-import { AuthHeaderPrefix, AuthType, CollectionType, LOC } from '../types'
-import type { Collection, CustomCollectionBackend, Tool } from '../types'
-import Loading from '../../base/loading'
-import { ArrowNarrowRight } from '../../base/icons/src/vender/line/arrows'
-import Toast from '../../base/toast'
-import { ConfigurationMethodEnum } from '../../header/account-setting/model-provider-page/declarations'
-import Header from './header'
-import Item from './item'
-import AppIcon from '@/app/components/base/app-icon'
-import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
-import { fetchCustomCollection, removeBuiltInToolCredential, removeCustomCollection, updateBuiltInToolCredential, updateCustomCollection } from '@/service/tools'
-import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
-import type { AgentTool } from '@/types/app'
-import { MAX_TOOLS_NUM } from '@/config'
-import { useModalContext } from '@/context/modal-context'
-import { useProviderContext } from '@/context/provider-context'
-
-type Props = {
-  collection: Collection | null
-  list: Tool[]
-  // onToolListChange: () => void // custom tools change
-  loc: LOC
-  addedTools?: AgentTool[]
-  onAddTool?: (collection: Collection, payload: Tool) => void
-  onRefreshData: () => void
-  onCollectionRemoved: () => void
-  isLoading: boolean
-}
-
-const ToolList: FC<Props> = ({
-  collection,
-  list,
-  loc,
-  addedTools,
-  onAddTool,
-  onRefreshData,
-  onCollectionRemoved,
-  isLoading,
-}) => {
-  const { t } = useTranslation()
-  const isInToolsPage = loc === LOC.tools
-  const isBuiltIn = collection?.type === CollectionType.builtIn
-  const isModel = collection?.type === CollectionType.model
-  const needAuth = collection?.allow_delete
-
-  const { setShowModelModal } = useModalContext()
-  const [showSettingAuth, setShowSettingAuth] = useState(false)
-  const { modelProviders: providers } = useProviderContext()
-  const showSettingAuthModal = () => {
-    if (isModel) {
-      const provider = providers.find(item => item.provider === collection?.id)
-      if (provider) {
-        setShowModelModal({
-          payload: {
-            currentProvider: provider,
-            currentConfigurationMethod: ConfigurationMethodEnum.predefinedModel,
-            currentCustomConfigurationModelFixedFields: undefined,
-          },
-          onSaveCallback: () => {
-            onRefreshData()
-          },
-        })
-      }
-    }
-    else {
-      setShowSettingAuth(true)
-    }
-  }
-
-  const [customCollection, setCustomCollection] = useState<CustomCollectionBackend | null>(null)
-  useEffect(() => {
-    if (!collection)
-      return
-    (async () => {
-      if (collection.type === CollectionType.custom) {
-        const res = await fetchCustomCollection(collection.name)
-        if (res.credentials.auth_type === AuthType.apiKey && !res.credentials.api_key_header_prefix) {
-          if (res.credentials.api_key_value)
-            res.credentials.api_key_header_prefix = AuthHeaderPrefix.custom
-        }
-        setCustomCollection({
-          ...res,
-          provider: collection.name,
-        })
-      }
-    })()
-  }, [collection])
-  const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
-
-  const doUpdateCustomToolCollection = async (data: CustomCollectionBackend) => {
-    await updateCustomCollection(data)
-    onRefreshData()
-    Toast.notify({
-      type: 'success',
-      message: t('common.api.actionSuccess'),
-    })
-    setIsShowEditCustomCollectionModal(false)
-  }
-
-  const doRemoveCustomToolCollection = async () => {
-    await removeCustomCollection(collection?.name as string)
-    onCollectionRemoved()
-    Toast.notify({
-      type: 'success',
-      message: t('common.api.actionSuccess'),
-    })
-    setIsShowEditCustomCollectionModal(false)
-  }
-
-  if (!collection || isLoading)
-    return <Loading type='app' />
-
-  const icon = <>{typeof collection.icon === 'string'
-    ? (
-      <div
-        className='p-2 bg-cover bg-center border border-gray-100 rounded-lg'
-      >
-        <div className='w-6 h-6 bg-center bg-contain rounded-md'
-          style={{
-            backgroundImage: `url(${collection.icon})`,
-          }}
-        ></div>
-      </div>
-    )
-    : (
-      <AppIcon
-        size='large'
-        icon={collection.icon.content}
-        background={collection.icon.background}
-      />
-    )}
-  </>
-
-  return (
-    <div className='flex flex-col h-full pb-4'>
-      <Header
-        icon={icon}
-        collection={collection}
-        loc={loc}
-        onShowAuth={() => showSettingAuthModal()}
-        onShowEditCustomCollection={() => setIsShowEditCustomCollectionModal(true)}
-      />
-      <div className={cn(isInToolsPage ? 'px-6 pt-4' : 'px-4 pt-3')}>
-        <div className='flex items-center h-[4.5] space-x-2  text-xs font-medium text-gray-500'>
-          <div className=''>{t('tools.includeToolNum', {
-            num: list.length,
-          })}</div>
-          {needAuth && (isBuiltIn || isModel) && !collection.is_team_authorization && (
-            <>
-              <div>·</div>
-              <div
-                className='flex items-center text-[#155EEF] cursor-pointer'
-                onClick={() => showSettingAuthModal()}
-              >
-                <div>{t('tools.auth.setup')}</div>
-                <ArrowNarrowRight className='ml-0.5 w-3 h-3' />
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-      <div className={cn(isInToolsPage ? 'px-6' : 'px-4', 'grow h-0 pt-2 overflow-y-auto')}>
-        {/* list */}
-        <div className={cn(isInToolsPage ? 'grid-cols-3 gap-4' : 'grid-cols-1 gap-2', 'grid')}>
-          {list.map(item => (
-            <Item
-              key={item.name}
-              icon={icon}
-              payload={item}
-              collection={collection}
-              isInToolsPage={isInToolsPage}
-              isToolNumMax={(addedTools?.length || 0) >= MAX_TOOLS_NUM}
-              added={!!addedTools?.find(v => v.provider_id === collection.id && v.provider_type === collection.type && v.tool_name === item.name)}
-              onAdd={!isInToolsPage ? tool => onAddTool?.(collection as Collection, tool) : undefined}
-            />
-          ))}
-        </div>
-      </div>
-      {showSettingAuth && (
-        <ConfigCredential
-          collection={collection}
-          onCancel={() => setShowSettingAuth(false)}
-          onSaved={async (value) => {
-            await updateBuiltInToolCredential(collection.name, value)
-            Toast.notify({
-              type: 'success',
-              message: t('common.api.actionSuccess'),
-            })
-            await onRefreshData()
-            setShowSettingAuth(false)
-          }}
-          onRemove={async () => {
-            await removeBuiltInToolCredential(collection.name)
-            Toast.notify({
-              type: 'success',
-              message: t('common.api.actionSuccess'),
-            })
-            await onRefreshData()
-            setShowSettingAuth(false)
-          }}
-        />
-      )}
-
-      {isShowEditCollectionToolModal && (
-        <EditCustomToolModal
-          payload={customCollection}
-          onHide={() => setIsShowEditCustomCollectionModal(false)}
-          onEdit={doUpdateCustomToolCollection}
-          onRemove={doRemoveCustomToolCollection}
-        />
-      )}
-    </div>
-  )
-}
-export default React.memo(ToolList)
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -2,10 +2,10 @@

 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { RiCloseLine } from '@remixicon/react'
 import s from './style.module.css'
 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 { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'

 type ConfirmModalProps = {
@@ -24,7 +24,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
      onClose={() => { }}
    >
      <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 className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'>
        <AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -3,6 +3,9 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import produce from 'immer'
 import type { Emoji, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
 import Drawer from '@/app/components/base/drawer-plus'
@@ -13,7 +16,6 @@ import AppIcon from '@/app/components/base/app-icon'
 import MethodSelector from '@/app/components/tools/workflow-tool/method-selector'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import ConfirmModal from '@/app/components/tools/workflow-tool/confirm-modal'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Tooltip from '@/app/components/base/tooltip'

 type Props = {
@@ -149,7 +151,7 @@ const WorkflowToolAsModal: FC<Props> = ({
                    }
                    selector='workflow-tool-modal-tooltip'
                  >
-                    <HelpCircle className='ml-2 w-[14px] h-[14px] text-gray-400' />
+                    <RiQuestionLine className='ml-2 w-[14px] h-[14px] text-gray-400' />
                  </Tooltip>
                </div>
                <input
--- a/web/app/components/tools/workflow-tool/method-selector.tsx
+++ b/web/app/components/tools/workflow-tool/method-selector.tsx
@@ -2,12 +2,12 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'

 type MethodSelectorProps = {
@@ -41,7 +41,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
              {value === 'llm' ? t('tools.createTool.toolInput.methodParameter') : t('tools.createTool.toolInput.methodSetting')}
            </div>
            <div className='shrink-0 ml-1 text-gray-700 opacity-60'>
-              <ChevronDown className='h-4 w-4'/>
+              <RiArrowDownSLine className='h-4 w-4'/>
            </div>
          </div>
        </PortalToFollowElemTrigger>