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/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