Introduce Plugins (#13836)

Signed-off-by: yihong0618 <zouzou0208@gmail.com> Signed-off-by: -LAN- <laipz8200@outlook.com> Signed-off-by: xhe <xw897002528@gmail.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: takatost <takatost@gmail.com> Co-authored-by: kurokobo <kuro664@gmail.com> Co-authored-by: Novice Lee <novicelee@NoviPro.local> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: AkaraChen <akarachen@outlook.com> Co-authored-by: Yi <yxiaoisme@gmail.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com> Co-authored-by: AkaraChen <85140972+AkaraChen@users.noreply.github.com> Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Co-authored-by: 非法操作 <hjlarry@163.com> Co-authored-by: Novice <857526207@qq.com> Co-authored-by: Hiroki Nagai <82458324+nagaihiroki-git@users.noreply.github.com> Co-authored-by: Gen Sato <52241300+halogen22@users.noreply.github.com> Co-authored-by: eux <euxuuu@gmail.com> Co-authored-by: huangzhuo1949 <167434202+huangzhuo1949@users.noreply.github.com> Co-authored-by: huangzhuo <huangzhuo1@xiaomi.com> Co-authored-by: lotsik <lotsik@mail.ru> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: gakkiyomi <gakkiyomi@aliyun.com> Co-authored-by: CN-P5 <heibai2006@gmail.com> Co-authored-by: CN-P5 <heibai2006@qq.com> Co-authored-by: Chuehnone <1897025+chuehnone@users.noreply.github.com> Co-authored-by: yihong <zouzou0208@gmail.com> Co-authored-by: Kevin9703 <51311316+Kevin9703@users.noreply.github.com> Co-authored-by: -LAN- <laipz8200@outlook.com> Co-authored-by: Boris Feld <lothiraldan@gmail.com> Co-authored-by: mbo <himabo@gmail.com> Co-authored-by: mabo <mabo@aeyes.ai> Co-authored-by: Warren Chen <warren.chen830@gmail.com> Co-authored-by: JzoNgKVO <27049666+JzoNgKVO@users.noreply.github.com> Co-authored-by: jiandanfeng <chenjh3@wangsu.com> Co-authored-by: zhu-an <70234959+xhdd123321@users.noreply.github.com> Co-authored-by: zhaoqingyu.1075 <zhaoqingyu.1075@bytedance.com> Co-authored-by: 海狸大師 <86974027+yenslife@users.noreply.github.com> Co-authored-by: Xu Song <xusong.vip@gmail.com> Co-authored-by: rayshaw001 <396301947@163.com> Co-authored-by: Ding Jiatong <dingjiatong@gmail.com> Co-authored-by: Bowen Liang <liangbowen@gf.com.cn> Co-authored-by: JasonVV <jasonwangiii@outlook.com> Co-authored-by: le0zh <newlight@qq.com> Co-authored-by: zhuxinliang <zhuxinliang@didiglobal.com> Co-authored-by: k-zaku <zaku99@outlook.jp> Co-authored-by: luckylhb90 <luckylhb90@gmail.com> Co-authored-by: hobo.l <hobo.l@binance.com> Co-authored-by: jiangbo721 <365065261@qq.com> Co-authored-by: 刘江波 <jiangbo721@163.com> Co-authored-by: Shun Miyazawa <34241526+miya@users.noreply.github.com> Co-authored-by: EricPan <30651140+Egfly@users.noreply.github.com> Co-authored-by: crazywoola <427733928@qq.com> Co-authored-by: sino <sino2322@gmail.com> Co-authored-by: Jhvcc <37662342+Jhvcc@users.noreply.github.com> Co-authored-by: lowell <lowell.hu@zkteco.in> Co-authored-by: Boris Polonsky <BorisPolonsky@users.noreply.github.com> Co-authored-by: Ademílson Tonato <ademilsonft@outlook.com> Co-authored-by: Ademílson Tonato <ademilson.tonato@refurbed.com> Co-authored-by: IWAI, Masaharu <iwaim.sub@gmail.com> Co-authored-by: Yueh-Po Peng (Yabi) <94939112+y10ab1@users.noreply.github.com> Co-authored-by: Jason <ggbbddjm@gmail.com> Co-authored-by: Xin Zhang <sjhpzx@gmail.com> Co-authored-by: yjc980121 <3898524+yjc980121@users.noreply.github.com> Co-authored-by: heyszt <36215648+hieheihei@users.noreply.github.com> Co-authored-by: Abdullah AlOsaimi <osaimiacc@gmail.com> Co-authored-by: Abdullah AlOsaimi <189027247+osaimi@users.noreply.github.com> Co-authored-by: Yingchun Lai <laiyingchun@apache.org> Co-authored-by: Hash Brown <hi@xzd.me> Co-authored-by: zuodongxu <192560071+zuodongxu@users.noreply.github.com> Co-authored-by: Masashi Tomooka <tmokmss@users.noreply.github.com> Co-authored-by: aplio <ryo.091219@gmail.com> Co-authored-by: Obada Khalili <54270856+obadakhalili@users.noreply.github.com> Co-authored-by: Nam Vu <zuzoovn@gmail.com> Co-authored-by: Kei YAMAZAKI <1715090+kei-yamazaki@users.noreply.github.com> Co-authored-by: TechnoHouse <13776377+deephbz@users.noreply.github.com> Co-authored-by: Riddhimaan-Senapati <114703025+Riddhimaan-Senapati@users.noreply.github.com> Co-authored-by: MaFee921 <31881301+2284730142@users.noreply.github.com> Co-authored-by: te-chan <t-nakanome@sakura-is.co.jp> Co-authored-by: HQidea <HQidea@users.noreply.github.com> Co-authored-by: Joshbly <36315710+Joshbly@users.noreply.github.com> Co-authored-by: xhe <xw897002528@gmail.com> Co-authored-by: weiwenyan-dev <154779315+weiwenyan-dev@users.noreply.github.com> Co-authored-by: ex_wenyan.wei <ex_wenyan.wei@tcl.com> Co-authored-by: engchina <12236799+engchina@users.noreply.github.com> Co-authored-by: engchina <atjapan2015@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: 呆萌闷油瓶 <253605712@qq.com> Co-authored-by: Kemal <kemalmeler@outlook.com> Co-authored-by: Lazy_Frog <4590648+lazyFrogLOL@users.noreply.github.com> Co-authored-by: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com> Co-authored-by: Steven sun <98230804+Tuyohai@users.noreply.github.com> Co-authored-by: steven <sunzwj@digitalchina.com> Co-authored-by: Kalo Chin <91766386+fdb02983rhy@users.noreply.github.com> Co-authored-by: Katy Tao <34019945+KatyTao@users.noreply.github.com> Co-authored-by: depy <42985524+h4ckdepy@users.noreply.github.com> Co-authored-by: 胡春东 <gycm520@gmail.com> Co-authored-by: Junjie.M <118170653@qq.com> Co-authored-by: MuYu <mr.muzea@gmail.com> Co-authored-by: Naoki Takashima <39912547+takatea@users.noreply.github.com> Co-authored-by: Summer-Gu <37869445+gubinjie@users.noreply.github.com> Co-authored-by: Fei He <droxer.he@gmail.com> Co-authored-by: ybalbert001 <120714773+ybalbert001@users.noreply.github.com> Co-authored-by: Yuanbo Li <ybalbert@amazon.com> Co-authored-by: douxc <7553076+douxc@users.noreply.github.com> Co-authored-by: liuzhenghua <1090179900@qq.com> Co-authored-by: Wu Jiayang <62842862+Wu-Jiayang@users.noreply.github.com> Co-authored-by: Your Name <you@example.com> Co-authored-by: kimjion <45935338+kimjion@users.noreply.github.com> Co-authored-by: AugNSo <song.tiankai@icloud.com> Co-authored-by: llinvokerl <38915183+llinvokerl@users.noreply.github.com> Co-authored-by: liusurong.lsr <liusurong.lsr@alibaba-inc.com> Co-authored-by: Vasu Negi <vasu-negi@users.noreply.github.com> Co-authored-by: Hundredwz <1808096180@qq.com> Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>
2025-12-09 02:46:52 +08:00 · 2025-02-17 17:05:13 +08:00
parent 222df44d21
commit 403e2d58b9
3272 changed files with 66339 additions and 281594 deletions
--- a/web/app/components/tools/provider/custom-create-card.tsx
+++ b/web/app/components/tools/provider/custom-create-card.tsx
@@ -45,16 +45,16 @@ const Contribute = ({ onRefreshData }: Props) => {
  return (
    <>
      {isCurrentWorkspaceManager && (
-        <div className='flex flex-col col-span-1 bg-gray-200 border-[0.5px] border-black/5 rounded-xl min-h-[160px] transition-all duration-200 ease-in-out cursor-pointer hover:bg-gray-50 hover:shadow-lg'>
-          <div className='group grow rounded-t-xl hover:bg-white' onClick={() => setIsShowEditCustomCollectionModal(true)}>
+        <div className='flex flex-col col-span-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-divider-subtle rounded-xl min-h-[135px] transition-all duration-200 ease-in-out cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg'>
+          <div className='group grow rounded-t-xl hover:bg-background-body' 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'>
-                <RiAddLine className='w-4 h-4 text-gray-500 group-hover:text-primary-600'/>
+              <div className='w-10 h-10 flex items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg rounded-lg group-hover:border-components-option-card-option-border-hover group-hover:bg-components-option-card-option-bg-hover'>
+                <RiAddLine className='w-4 h-4 text-text-tertiary group-hover:text-text-accent'/>
              </div>
-              <div className='ml-3 text-sm font-semibold leading-5 text-gray-800 group-hover:text-primary-600'>{t('tools.createCustomTool')}</div>
+              <div className='ml-3 text-sm font-semibold leading-5 text-text-primary group-hover:text-text-accent'>{t('tools.createCustomTool')}</div>
            </div>
          </div>
-          <div className='px-4 py-3 rounded-b-xl border-t-[0.5px] border-black/5 text-gray-500 hover:text-[#155EEF] hover:bg-white'>
+          <div className='px-4 py-3 rounded-b-xl border-t-[0.5px] border-divider-regular text-text-tertiary hover:text-text-accent hover:bg-background-body'>
            <a href={linkUrl} target='_blank' rel='noopener noreferrer' className='flex items-center space-x-1'>
              <BookOpen01 className='shrink-0 w-3 h-3' />
              <div className='grow leading-[18px] text-xs font-normal truncate' title={t('tools.customToolTip') || ''}>{t('tools.customToolTip')}</div>
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -2,6 +2,9 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import {
+  RiCloseLine,
+} from '@remixicon/react'
 import { AuthHeaderPrefix, AuthType, CollectionType } from '../types'
 import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
 import ToolItem from './tool-item'
@@ -9,14 +12,20 @@ import cn from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
 import Confirm from '@/app/components/base/confirm'
-import AppIcon from '@/app/components/base/app-icon'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import { LinkExternal02, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+import Title from '@/app/components/plugins/card/base/title'
+import OrgInfo from '@/app/components/plugins/card/base/org-info'
+import Description from '@/app/components/plugins/card/base/description'
 import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
 import Toast from '@/app/components/base/toast'
+import Drawer from '@/app/components/base/drawer'
+import ActionButton from '@/app/components/base/action-button'
+
 import {
  deleteWorkflowTool,
  fetchBuiltInToolList,
@@ -35,14 +44,17 @@ import { useProviderContext } from '@/context/provider-context'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
+import { useInvalidateAllWorkflowTools } from '@/service/use-tools'

 type Props = {
  collection: Collection
+  onHide: () => void
  onRefreshData: () => void
 }

 const ProviderDetail = ({
  collection,
+  onHide,
  onRefreshData,
 }: Props) => {
  const { t } = useTranslation()
@@ -54,7 +66,7 @@ const ProviderDetail = ({
  const isBuiltIn = collection.type === CollectionType.builtIn
  const isModel = collection.type === CollectionType.model
  const { isCurrentWorkspaceManager } = useAppContext()
-
+  const invalidateAllWorkflowTools = useInvalidateAllWorkflowTools()
  const [isDetailLoading, setIsDetailLoading] = useState(false)

  // built in provider
@@ -153,6 +165,7 @@ const ProviderDetail = ({
    workflow_tool_id: string
  }>) => {
    await saveWorkflowToolProvider(data)
+    invalidateAllWorkflowTools()
    onRefreshData()
    getWorkflowToolProvider()
    Toast.notify({
@@ -213,164 +226,203 @@ const ProviderDetail = ({
  }, [collection.name, collection.type, getCustomProvider, getProviderToolList, getWorkflowToolProvider])

  return (
-    <div className='px-6 py-3'>
-      <div className='flex items-center py-1 gap-2'>
-        <div className='relative shrink-0'>
-          {typeof collection.icon === 'string' && (
-            <div className='w-8 h-8 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }} />
-          )}
-          {typeof collection.icon !== 'string' && (
-            <AppIcon
-              size='small'
-              icon={collection.icon.content}
-              background={collection.icon.background}
-            />
-          )}
-        </div>
-        <div className='grow w-0 py-[1px]'>
-          <div className='flex items-center text-md leading-6 font-semibold text-gray-900'>
-            <div className='truncate' title={collection.label[language]}>{collection.label[language]}</div>
-          </div>
-        </div>
-      </div>
-      <div className='mt-2 min-h-[36px] text-gray-500 text-sm leading-[18px]'>{collection.description[language]}</div>
-      <div className='flex gap-1 border-b-[0.5px] border-black/5'>
-        {(collection.type === CollectionType.builtIn) && needAuth && (
-          <Button
-            variant={isAuthed ? 'secondary' : 'primary'}
-            className={cn('shrink-0 my-3 w-full', isAuthed && 'bg-white')}
-            onClick={() => {
-              if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
-                showSettingAuthModal()
-            }}
-            disabled={!isCurrentWorkspaceManager}
-          >
-            {isAuthed && <Indicator className='mr-2' color={'green'} />}
-            <div className={cn('text-white leading-[18px] text-[13px] font-medium', isAuthed && '!text-gray-700')}>
-              {isAuthed ? t('tools.auth.authorized') : t('tools.auth.unauthorized')}
+    <Drawer
+      isOpen={!!collection}
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+    >
+      <div className='p-4'>
+        <div className='mb-3 flex'>
+          <Icon src={collection.icon} />
+          <div className="ml-3 w-0 grow">
+            <div className="flex items-center h-5">
+              <Title title={collection.label[language]} />
            </div>
-          </Button>
-        )}
-        {collection.type === CollectionType.custom && !isDetailLoading && (
-          <Button
-            className={cn('shrink-0 my-3 w-full')}
-            onClick={() => setIsShowEditCustomCollectionModal(true)}
-          >
-            <Settings01 className='mr-1 w-4 h-4 text-gray-500' />
-            <div className='leading-5 text-sm font-medium text-gray-700'>{t('tools.createTool.editAction')}</div>
-          </Button>
-        )}
-        {collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
-          <>
-            <Button
-              variant='primary'
-              className={cn('shrink-0 my-3 w-[183px]')}
-            >
-              <a className='flex items-center text-white' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
-                <div className='leading-5 text-sm font-medium'>{t('tools.openInStudio')}</div>
-                <LinkExternal02 className='ml-1 w-4 h-4' />
-              </a>
-            </Button>
-            <Button
-              className={cn('shrink-0 my-3 w-[183px]')}
-              onClick={() => setIsShowEditWorkflowToolModal(true)}
-              disabled={!isCurrentWorkspaceManager}
-            >
-              <div className='leading-5 text-sm font-medium text-gray-700'>{t('tools.createTool.editAction')}</div>
-            </Button>
-          </>
-        )}
-      </div>
-      {/* Tools */}
-      <div className='pt-3'>
-        {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
-        {!isDetailLoading && (
-          <div className='text-xs font-medium leading-6 text-gray-500'>
-            {collection.type === CollectionType.workflow && <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>}
-            {collection.type !== CollectionType.workflow && <span className=''>{t('tools.includeToolNum', { num: toolList.length }).toLocaleUpperCase()}</span>}
-            {needAuth && (isBuiltIn || isModel) && !isAuthed && (
-              <>
-                <span className='px-1'>·</span>
-                <span className='text-[#DC6803]'>{t('tools.auth.setup').toLocaleUpperCase()}</span>
-              </>
-            )}
-          </div>
-        )}
-        {!isDetailLoading && (
-          <div className='mt-1'>
-            {collection.type !== CollectionType.workflow && toolList.map(tool => (
-              <ToolItem
-                key={tool.name}
-                disabled={needAuth && (isBuiltIn || isModel) && !isAuthed}
-                collection={collection}
-                tool={tool}
-                isBuiltIn={isBuiltIn}
-                isModel={isModel}
+            <div className='mb-1 flex justify-between items-center h-4'>
+              <OrgInfo
+                className="mt-0.5"
+                packageNameClassName='w-auto'
+                orgName={collection.author}
+                packageName={collection.name}
              />
-            ))}
-            {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
-              <div key={item.name} className='mb-2 px-4 py-3 rounded-xl bg-gray-25 border-[0.5px] border-gray-200'>
-                <div className='flex items-center gap-2'>
-                  <span className='font-medium text-sm text-gray-900'>{item.name}</span>
-                  <span className='text-xs leading-[18px] text-gray-500'>{item.type}</span>
-                  <span className='font-medium text-xs leading-[18px] text-[#ec4a0a]'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
-                </div>
-                <div className='h-[18px] leading-[18px] text-gray-500 text-xs'>{item.llm_description}</div>
-              </div>
-            ))}
+            </div>
          </div>
+          <div className='flex gap-1'>
+            <ActionButton onClick={onHide}>
+              <RiCloseLine className='w-4 h-4' />
+            </ActionButton>
+          </div>
+        </div>
+        {!!collection.description[language] && (
+          <Description text={collection.description[language]} descriptionLineRows={2}></Description>
+        )}
+        <div className='flex gap-1 border-b-[0.5px] border-divider-subtle'>
+          {collection.type === CollectionType.custom && !isDetailLoading && (
+            <Button
+              className={cn('shrink-0 my-3 w-full')}
+              onClick={() => setIsShowEditCustomCollectionModal(true)}
+            >
+              <Settings01 className='mr-1 w-4 h-4 text-text-tertiary' />
+              <div className='system-sm-medium text-text-secondary'>{t('tools.createTool.editAction')}</div>
+            </Button>
+          )}
+          {collection.type === CollectionType.workflow && !isDetailLoading && customCollection && (
+            <>
+              <Button
+                variant='primary'
+                className={cn('shrink-0 my-3 w-[183px]')}
+              >
+                <a className='flex items-center text-text-primary' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
+                  <div className='system-sm-medium'>{t('tools.openInStudio')}</div>
+                  <LinkExternal02 className='ml-1 w-4 h-4' />
+                </a>
+              </Button>
+              <Button
+                className={cn('shrink-0 my-3 w-[183px]')}
+                onClick={() => setIsShowEditWorkflowToolModal(true)}
+                disabled={!isCurrentWorkspaceManager}
+              >
+                <div className='system-sm-medium text-text-secondary'>{t('tools.createTool.editAction')}</div>
+              </Button>
+            </>
+          )}
+        </div>
+        {/* Tools */}
+        <div className='pt-3'>
+          {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
+          {/* Builtin type */}
+          {!isDetailLoading && (collection.type === CollectionType.builtIn) && isAuthed && (
+            <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+              {t('plugin.detailPanel.actionNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
+              {needAuth && (
+                <Button
+                  variant='secondary'
+                  size='small'
+                  onClick={() => {
+                    if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
+                      showSettingAuthModal()
+                  }}
+                  disabled={!isCurrentWorkspaceManager}
+                >
+                  <Indicator className='mr-2' color={'green'} />
+                  {t('tools.auth.authorized')}
+                </Button>
+              )}
+            </div>
+          )}
+          {!isDetailLoading && (collection.type === CollectionType.builtIn) && needAuth && !isAuthed && (
+            <>
+              <div className='text-text-secondary system-sm-semibold-uppercase'>
+                <span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
+                <span className='px-1'>·</span>
+                <span className='text-util-colors-orange-orange-600'>{t('tools.auth.setup').toLocaleUpperCase()}</span>
+              </div>
+              <Button
+                variant='primary'
+                className={cn('shrink-0 my-3 w-full')}
+                onClick={() => {
+                  if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
+                    showSettingAuthModal()
+                }}
+                disabled={!isCurrentWorkspaceManager}
+              >
+                {t('tools.auth.unauthorized')}
+              </Button>
+            </>
+          )}
+          {/* Custom type */}
+          {!isDetailLoading && (collection.type === CollectionType.custom) && (
+            <div className='text-text-secondary system-sm-semibold-uppercase'>
+              <span className=''>{t('tools.includeToolNum', { num: toolList.length }).toLocaleUpperCase()}</span>
+            </div>
+          )}
+          {/* Workflow type */}
+          {!isDetailLoading && (collection.type === CollectionType.workflow) && (
+            <div className='text-text-secondary system-sm-semibold-uppercase'>
+              <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>
+            </div>
+          )}
+          {!isDetailLoading && (
+            <div className='mt-1 py-2'>
+              {collection.type !== CollectionType.workflow && toolList.map(tool => (
+                <ToolItem
+                  key={tool.name}
+                  disabled={false}
+                  // disabled={needAuth && (isBuiltIn || isModel) && !isAuthed}
+                  collection={collection}
+                  tool={tool}
+                  isBuiltIn={isBuiltIn}
+                  isModel={isModel}
+                />
+              ))}
+              {collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
+                <div key={item.name} className='mb-1 py-1'>
+                  <div className='mb-1 flex items-center gap-2'>
+                    <span className='text-text-secondary code-sm-semibold'>{item.name}</span>
+                    <span className='text-text-tertiary system-xs-regular'>{item.type}</span>
+                    <span className='text-text-warning-secondary system-xs-medium'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
+                  </div>
+                  <div className='text-text-tertiary system-xs-regular'>{item.llm_description}</div>
+                </div>
+              ))}
+            </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={onClickCustomToolDelete}
+          />
+        )}
+        {isShowEditWorkflowToolModal && (
+          <WorkflowToolModal
+            payload={customCollection}
+            onHide={() => setIsShowEditWorkflowToolModal(false)}
+            onRemove={onClickWorkflowToolDelete}
+            onSave={updateWorkflowToolProvider}
+          />
+        )}
+        {showConfirmDelete && (
+          <Confirm
+            title={t('tools.createTool.deleteToolConfirmTitle')}
+            content={t('tools.createTool.deleteToolConfirmContent')}
+            isShow={showConfirmDelete}
+            onConfirm={handleConfirmDelete}
+            onCancel={() => setShowConfirmDelete(false)}
+          />
        )}
      </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={onClickCustomToolDelete}
-        />
-      )}
-      {isShowEditWorkflowToolModal && (
-        <WorkflowToolModal
-          payload={customCollection}
-          onHide={() => setIsShowEditWorkflowToolModal(false)}
-          onRemove={onClickWorkflowToolDelete}
-          onSave={updateWorkflowToolProvider}
-        />
-      )}
-      {showConfirmDelete && (
-        <Confirm
-          title={t('tools.createTool.deleteToolConfirmTitle')}
-          content={t('tools.createTool.deleteToolConfirmContent')}
-          isShow={showConfirmDelete}
-          onConfirm={handleConfirmDelete}
-          onCancel={() => setShowConfirmDelete(false)}
-        />
-      )}
-    </div>
+    </Drawer>
  )
 }
 export default ProviderDetail
--- a/web/app/components/tools/provider/tool-item.tsx
+++ b/web/app/components/tools/provider/tool-item.tsx
@@ -29,14 +29,15 @@ const ToolItem = ({
  return (
    <>
      <div
-        className={cn('mb-2 px-4 py-3 rounded-xl bg-gray-25 border-[0.5px] border-gary-200  shadow-xs cursor-pointer', disabled && 'opacity-50 !cursor-not-allowed')}
+        className={cn('mb-2 px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover', disabled && 'opacity-50 !cursor-not-allowed')}
        onClick={() => !disabled && setShowDetail(true)}
      >
-        <div className='text-gray-800 font-semibold text-sm leading-5'>{tool.label[language]}</div>
-        <div className='mt-0.5 text-xs leading-[18px] text-gray-500 line-clamp-2' title={tool.description[language]}>{tool.description[language]}</div>
+        <div className='pb-0.5 text-text-secondary system-md-semibold'>{tool.label[language]}</div>
+        <div className='text-text-tertiary system-xs-regular line-clamp-2' title={tool.description[language]}>{tool.description[language]}</div>
      </div>
      {showDetail && (
        <SettingBuiltInTool
+          showBackButton
          collection={collection}
          toolName={tool.name}
          readonly