feat: workflow new nodes (#4683)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl>
Co-authored-by: Sebastian.W <thiner@gmail.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: takatost <takatost@users.noreply.github.com>
Co-authored-by: rechardwang <wh_goodjob@163.com>
Co-authored-by: Nite Knite <nkCoding@gmail.com>
Co-authored-by: Chenhe Gu <guchenhe@gmail.com>
Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com>
Co-authored-by: Weaxs <459312872@qq.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Vikey Chen <vikeytk@gmail.com>
Co-authored-by: wanghl <Wang-HL@users.noreply.github.com>
Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com>
Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Bowen Liang <bowenliang@apache.org>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com>
Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn>
Co-authored-by: Matri <qjp@bithuman.io>
Co-authored-by: Benjamin <benjaminx@gmail.com>

web/app/components/tools/provider/card.tsx

@@ -0,0 +1,83 @@
+'use client'
+import { useMemo } from 'react'
+import cn from 'classnames'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import type { Collection } from '../types'
+import AppIcon from '@/app/components/base/app-icon'
+import { Tag01 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import { useStore as useLabelStore } from '@/app/components/tools/labels/store'
+
+type Props = {
+  active: boolean
+  collection: Collection
+  onSelect: () => void
+}
+
+const ProviderCard = ({
+  active,
+  collection,
+  onSelect,
+}: Props) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const labelList = useLabelStore(s => s.labelList)
+
+  const labelContent = useMemo(() => {
+    if (!collection.labels)
+      return ''
+    return collection.labels.map((name) => {
+      const label = labelList.find(item => item.name === name)
+      return label?.label[language]
+    }).filter(Boolean).join(', ')
+  }, [collection.labels, labelList, language])
+
+  return (
+    <div className={cn('group flex col-span-1 bg-white border-2 border-solid border-transparent rounded-xl shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg', active && '!border-primary-400')} onClick={onSelect}>
+      <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+        <div className='relative shrink-0'>
+          {typeof collection.icon === 'string' && (
+            <div className='w-10 h-10 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }}/>
+          )}
+          {typeof collection.icon !== 'string' && (
+            <AppIcon
+              size='large'
+              icon={collection.icon.content}
+              background={collection.icon.background}
+            />
+          )}
+        </div>
+        <div className='grow w-0 py-[1px]'>
+          <div className='flex items-center text-sm leading-5 font-semibold text-gray-800'>
+            <div className='truncate' title={collection.label[language]}>{collection.label[language]}</div>
+          </div>
+          <div className='flex items-center text-[10px] leading-[18px] text-gray-500 font-medium'>
+            <div className='truncate'>{t('tools.author')}&nbsp;{collection.author}</div>
+          </div>
+        </div>
+      </div>
+      <div
+        className={cn(
+          'grow mb-2 px-[14px] max-h-[72px] text-xs leading-normal text-gray-500',
+          collection.labels?.length ? 'line-clamp-2' : 'line-clamp-4',
+          collection.labels?.length > 0 && 'group-hover:line-clamp-2 group-hover:max-h-[36px]',
+        )}
+        title={collection.description[language]}
+      >
+        {collection.description[language]}
+      </div>
+      {collection.labels?.length > 0 && (
+        <div className='flex items-center shrink-0 mt-1 pt-1 pl-[14px] pr-[6px] pb-[6px] h-[42px]'>
+          <div className='relative w-full flex items-center gap-1 py-[7px] rounded-md text-gray-500' title={labelContent}>
+            <Tag01 className='shrink-0 w-3 h-3' />
+            <div className='grow text-xs text-start leading-[18px] font-normal truncate'>{labelContent}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+export default ProviderCard

web/app/components/tools/provider/contribute.tsx

@@ -0,0 +1,38 @@
+'use client'
+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 { 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'
+
+const Contribute: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <a
+      href='https://github.com/langgenius/dify/blob/main/api/core/tools/README.md'
+      target='_blank'
+      rel='noopener noreferrer'
+      className="group flex col-span-1 bg-white bg-cover bg-no-repeat bg-[url('~@/app/components/tools/provider/grid_bg.svg')] border-2 border-solid border-transparent rounded-xl shadow-sm min-h-[160px] flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg"
+    >
+      <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='-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>
+      <div className='mb-3 px-[14px] text-[15px] leading-5 font-semibold'>
+        <div className='text-gradient'>{t('tools.contribute.line1')}</div>
+        <div className='text-gradient'>{t('tools.contribute.line2')}</div>
+      </div>
+      <div className='px-4 py-3 border-t-[0.5px] border-black/5 flex items-center space-x-1 text-[#155EEF]'>
+        <BookOpen01 className='w-3 h-3' />
+        <div className='grow leading-[18px] text-xs font-normal'>{t('tools.contribute.viewGuide')}</div>
+        <ArrowUpRight className='w-3 h-3' />
+      </div>
+    </a>
+  )
+}
+export default React.memo(Contribute)

web/app/components/tools/provider/custom-create-card.tsx

@@ -0,0 +1,70 @@
+'use client'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+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'
+import { createCustomCollection } from '@/service/tools'
+import Toast from '@/app/components/base/toast'
+
+type Props = {
+  onRefreshData: () => void
+}
+
+const Contribute = ({ onRefreshData }: Props) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+
+  const linkUrl = useMemo(() => {
+    if (language.startsWith('zh_'))
+      return 'https://docs.dify.ai/v/zh-hans/guides/gong-ju/quick-tool-integration'
+    return 'https://docs.dify.ai/tutorials/quick-tool-integration'
+  }, [language])
+
+  const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
+  const doCreateCustomToolCollection = async (data: CustomCollectionBackend) => {
+    await createCustomCollection(data)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditCustomCollectionModal(false)
+    onRefreshData()
+  }
+
+  return (
+    <>
+      <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='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'/>
+            </div>
+            <div className='ml-3 text-sm font-semibold leading-5 text-gray-800 group-hover:text-primary-600'>{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'>
+          <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>
+            <ArrowUpRight className='shrink-0 w-3 h-3' />
+          </a>
+        </div>
+      </div>
+      {isShowEditCollectionToolModal && (
+        <EditCustomToolModal
+          payload={null}
+          onHide={() => setIsShowEditCustomCollectionModal(false)}
+          onAdd={doCreateCustomToolCollection}
+        />
+      )}
+    </>
+  )
+}
+export default Contribute

web/app/components/tools/provider/detail.tsx

@@ -0,0 +1,343 @@
+'use client'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import cn from 'classnames'
+import { AuthHeaderPrefix, AuthType, CollectionType } from '../types'
+import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
+import ToolItem from './tool-item'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+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 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 {
+  deleteWorkflowTool,
+  fetchBuiltInToolList,
+  fetchCustomCollection,
+  fetchCustomToolList,
+  fetchModelToolList,
+  fetchWorkflowToolDetail,
+  removeBuiltInToolCredential,
+  removeCustomCollection,
+  saveWorkflowToolProvider,
+  updateBuiltInToolCredential,
+  updateCustomCollection,
+} from '@/service/tools'
+import { useModalContext } from '@/context/modal-context'
+import { useProviderContext } from '@/context/provider-context'
+import { ConfigurateMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import Loading from '@/app/components/base/loading'
+
+type Props = {
+  collection: Collection
+  onRefreshData: () => void
+}
+
+const ProviderDetail = ({
+  collection,
+  onRefreshData,
+}: Props) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+
+  const needAuth = collection.allow_delete || collection.type === CollectionType.model
+  const isAuthed = collection.is_team_authorization
+  const isBuiltIn = collection.type === CollectionType.builtIn
+  const isModel = collection.type === CollectionType.model
+
+  const [isDetailLoading, setIsDetailLoading] = useState(false)
+
+  // built in provider
+  const [showSettingAuth, setShowSettingAuth] = useState(false)
+  const { setShowModelModal } = useModalContext()
+  const { modelProviders: providers } = useProviderContext()
+  const showSettingAuthModal = () => {
+    if (isModel) {
+      const provider = providers.find(item => item.provider === collection?.id)
+      if (provider) {
+        setShowModelModal({
+          payload: {
+            currentProvider: provider,
+            currentConfigurateMethod: ConfigurateMethodEnum.predefinedModel,
+            currentCustomConfigrationModelFixedFields: undefined,
+          },
+          onSaveCallback: () => {
+            onRefreshData()
+          },
+        })
+      }
+    }
+    else {
+      setShowSettingAuth(true)
+    }
+  }
+  // custom provider
+  const [customCollection, setCustomCollection] = useState<CustomCollectionBackend | WorkflowToolProviderResponse | null>(null)
+  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)
+    onRefreshData()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditCustomCollectionModal(false)
+  }
+  const getCustomProvider = useCallback(async () => {
+    setIsDetailLoading(true)
+    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,
+      labels: collection.labels,
+      provider: collection.name,
+    })
+    setIsDetailLoading(false)
+  }, [collection.name])
+  // workflow provider
+  const [isShowEditWorkflowToolModal, setIsShowEditWorkflowToolModal] = useState(false)
+  const getWorkflowToolProvider = useCallback(async () => {
+    setIsDetailLoading(true)
+    const res = await fetchWorkflowToolDetail(collection.id)
+    const payload = {
+      ...res,
+      parameters: res.tool?.parameters.map((item) => {
+        return {
+          name: item.name,
+          description: item.llm_description,
+          form: item.form,
+          required: item.required,
+          type: item.type,
+        }
+      }) || [],
+      labels: res.tool?.labels || [],
+    }
+    setCustomCollection(payload)
+    setIsDetailLoading(false)
+  }, [collection.id])
+  const removeWorkflowToolProvider = async () => {
+    await deleteWorkflowTool(collection.id)
+    onRefreshData()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditWorkflowToolModal(false)
+  }
+  const updateWorkflowToolProvider = async (data: WorkflowToolProviderRequest & Partial<{
+    workflow_app_id: string
+    workflow_tool_id: string
+  }>) => {
+    await saveWorkflowToolProvider(data)
+    onRefreshData()
+    getWorkflowToolProvider()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditWorkflowToolModal(false)
+  }
+
+  // ToolList
+  const [toolList, setToolList] = useState<Tool[]>([])
+  const getProviderToolList = useCallback(async () => {
+    setIsDetailLoading(true)
+    try {
+      if (collection.type === CollectionType.builtIn) {
+        const list = await fetchBuiltInToolList(collection.name)
+        setToolList(list)
+      }
+      else if (collection.type === CollectionType.model) {
+        const list = await fetchModelToolList(collection.name)
+        setToolList(list)
+      }
+      else if (collection.type === CollectionType.workflow) {
+        setToolList([])
+      }
+      else {
+        const list = await fetchCustomToolList(collection.name)
+        setToolList(list)
+      }
+    }
+    catch (e) { }
+    setIsDetailLoading(false)
+  }, [collection.name, collection.type])
+
+  useEffect(() => {
+    if (collection.type === CollectionType.custom)
+      getCustomProvider()
+    if (collection.type === CollectionType.workflow)
+      getWorkflowToolProvider()
+    getProviderToolList()
+  }, [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
+            type={isAuthed ? 'default' : 'primary'}
+            className={cn('shrink-0 my-3 w-full flex items-center', isAuthed && 'bg-white')}
+            onClick={() => {
+              if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
+                showSettingAuthModal()
+            }}
+          >
+            {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')}
+            </div>
+          </Button>
+        )}
+        {collection.type === CollectionType.custom && !isDetailLoading && (
+          <Button
+            className={cn('shrink-0 my-3 w-full flex items-center bg-white')}
+            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
+              type='primary'
+              className={cn('shrink-0 my-3 w-[183px] flex items-center')}
+            >
+              <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] flex items-center bg-white')}
+              onClick={() => setIsShowEditWorkflowToolModal(true)}
+            >
+              <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}
+              />
+            ))}
+            {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>
+      {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}
+        />
+      )}
+      {isShowEditWorkflowToolModal && (
+        <WorkflowToolModal
+          payload={customCollection}
+          onHide={() => setIsShowEditWorkflowToolModal(false)}
+          onRemove={removeWorkflowToolProvider}
+          onSave={updateWorkflowToolProvider}
+        />
+      )}
+    </div>
+  )
+}
+export default ProviderDetail

web/app/components/tools/provider/tool-item.tsx

@@ -0,0 +1,53 @@
+'use client'
+import React, { useState } from 'react'
+import cn from 'classnames'
+import { useContext } from 'use-context-selector'
+import type { Collection, Tool } from '../types'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
+
+type Props = {
+  disabled?: boolean
+  collection: Collection
+  tool: Tool
+  isBuiltIn: boolean
+  isModel: boolean
+}
+
+const ToolItem = ({
+  disabled,
+  collection,
+  tool,
+  isBuiltIn,
+  isModel,
+}: Props) => {
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const [showDetail, setShowDetail] = useState(false)
+
+  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')}
+        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>
+      {showDetail && (
+        <SettingBuiltInTool
+          collection={collection}
+          toolName={tool.name}
+          readonly
+          onHide={() => {
+            setShowDetail(false)
+          }}
+          isBuiltIn={isBuiltIn}
+          isModel={isModel}
+        />
+      )}
+    </>
+  )
+}
+export default ToolItem