tool

2026-05-03 17:08:03 +08:00 · 2024-03-06 14:03:53 +08:00
parent 8a906e2959
commit e3a3e07eef
22 changed files with 1035 additions and 829 deletions
--- a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
@ -2,10 +2,10 @@ import {
  memo,
  useCallback,
 } from 'react'
-import BlockSelector from '../../../../block-selector'
-import { useWorkflow } from '../../../../hooks'
-import type { BlockEnum } from '../../../../types'
+import { useWorkflow } from '@/app/components/workflow/hooks'
+import BlockSelector from '@/app/components/workflow/block-selector'
 import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+import type { OnSelectBlock } from '@/app/components/workflow/types'

 type AddProps = {
  nodeId: string
@ -19,8 +19,8 @@ const Add = ({
 }: AddProps) => {
  const { handleNodeAddNext } = useWorkflow()

-  const handleSelect = useCallback((type: BlockEnum) => {
-    handleNodeAddNext(nodeId, type, sourceHandle)
+  const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
+    handleNodeAddNext(nodeId, type, sourceHandle, toolDefaultValue)
  }, [nodeId, sourceHandle, handleNodeAddNext])

  const renderTrigger = useCallback((open: boolean) => {
--- a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
@ -35,6 +35,7 @@ const NextStep = ({
            <Item
              nodeId={outgoers[0].id}
              data={outgoers[0].data}
+              sourceHandle='source'
            />
          )
        }
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@ -3,17 +3,17 @@ import {
  useCallback,
 } from 'react'
 import type {
-  BlockEnum,
  CommonNodeType,
-} from '../../../../types'
-import BlockIcon from '../../../../block-icon'
-import BlockSelector from '../../../../block-selector'
-import { useWorkflow } from '../../../../hooks'
+  OnSelectBlock,
+} from '@/app/components/workflow/types'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import BlockSelector from '@/app/components/workflow/block-selector'
+import { useWorkflow } from '@/app/components/workflow/hooks'
 import Button from '@/app/components/base/button'

 type ItemProps = {
  nodeId: string
-  sourceHandle?: string
+  sourceHandle: string
  branchName?: string
  data: CommonNodeType
 }
@ -24,8 +24,8 @@ const Item = ({
  data,
 }: ItemProps) => {
  const { handleNodeChange } = useWorkflow()
-  const handleSelect = useCallback((type: BlockEnum) => {
-    handleNodeChange(nodeId, type, sourceHandle)
+  const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
+    handleNodeChange(nodeId, type, sourceHandle, toolDefaultValue)
  }, [nodeId, sourceHandle, handleNodeChange])
  const renderTrigger = useCallback((open: boolean) => {
    return (
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@ -13,6 +13,7 @@ import {
 import { BlockEnum } from '../../../types'
 import type { Node } from '../../../types'
 import BlockSelector from '../../../block-selector'
+import type { ToolDefaultValue } from '../../../block-selector/types'
 import { useWorkflow } from '../../../hooks'

 type NodeHandleProps = {
@ -100,8 +101,8 @@ export const NodeSourceHandle = ({
    if (!connected)
      setOpen(v => !v)
  }, [connected])
-  const handleSelect = useCallback((type: BlockEnum) => {
-    handleNodeAddNext(id, type, handleId)
+  const handleSelect = useCallback((type: BlockEnum, toolDefaultValue?: ToolDefaultValue) => {
+    handleNodeAddNext(id, type, handleId, toolDefaultValue)
  }, [handleNodeAddNext, id, handleId])

  return (
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/change-block.tsx
@ -2,21 +2,23 @@ import {
  memo,
  useCallback,
 } from 'react'
-import BlockSelector from '../../../../block-selector'
-import { useWorkflow } from '../../../../hooks'
-import type { BlockEnum } from '../../../../types'
+import BlockSelector from '@/app/components/workflow/block-selector'
+import { useWorkflow } from '@/app/components/workflow/hooks'
+import type { OnSelectBlock } from '@/app/components/workflow/types'

 type ChangeBlockProps = {
  nodeId: string
+  sourceHandle: string
 }
 const ChangeBlock = ({
  nodeId,
+  sourceHandle,
 }: ChangeBlockProps) => {
  const { handleNodeChange } = useWorkflow()

-  const handleSelect = useCallback((type: BlockEnum) => {
-    handleNodeChange(nodeId, type)
-  }, [handleNodeChange, nodeId])
+  const handleSelect = useCallback<OnSelectBlock>((type, toolDefaultValue) => {
+    handleNodeChange(nodeId, type, sourceHandle, toolDefaultValue)
+  }, [handleNodeChange, nodeId, sourceHandle])

  const renderTrigger = useCallback(() => {
    return (
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
@ -2,8 +2,9 @@ import {
  memo,
  useState,
 } from 'react'
-import { useWorkflow } from '../../../../hooks'
+import { useEdges } from 'reactflow'
 import ChangeBlock from './change-block'
+import { useWorkflow } from '@/app/components/workflow/hooks'
 import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import {
  PortalToFollowElem,
@ -17,9 +18,12 @@ type PanelOperatorProps = {
 const PanelOperator = ({
  nodeId,
 }: PanelOperatorProps) => {
+  const edges = useEdges()
  const { handleNodeDelete } = useWorkflow()
  const [open, setOpen] = useState(false)

+  const edge = edges.find(edge => edge.target === nodeId)
+
  return (
    <PortalToFollowElem
      placement='bottom-end'
@ -44,7 +48,10 @@ const PanelOperator = ({
      <PortalToFollowElemContent className='z-[11]'>
        <div className='w-[240px] border-[0.5px] border-gray-200 rounded-2xl shadow-xl bg-white'>
          <div className='p-1'>
-            <ChangeBlock nodeId={nodeId} />
+            <ChangeBlock
+              nodeId={nodeId}
+              sourceHandle={edge?.sourceHandle || 'source'}
+            />
            <div className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'>Help Link</div>
          </div>
          <div className='h-[1px] bg-gray-100'></div>
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@ -7,7 +7,9 @@ import {
  memo,
 } from 'react'
 import type { NodeProps } from '../../types'
-import BlockIcon from '../../block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import AppIcon from '@/app/components/base/app-icon'

 type BaseNodeProps = {
  children: ReactElement
@ -18,6 +20,8 @@ const BaseNode: FC<BaseNodeProps> = ({
  data,
  children,
 }) => {
+  const type = data.type
+
  return (
    <div
      className={`
@ -27,14 +31,43 @@ const BaseNode: FC<BaseNodeProps> = ({
      `}
    >
      <div className='flex items-center px-3 pt-3 pb-2'>
-        <BlockIcon
-          className='shrink-0 mr-2'
-          type={data.type}
-          size='md'
-        />
+        {
+          type !== BlockEnum.Tool && (
+            <BlockIcon
+              className='shrink-0 mr-2'
+              type={data.type}
+              size='md'
+            />
+          )
+        }
+        {
+          type === BlockEnum.Tool && (
+            <>
+              {
+                typeof data._icon === 'string'
+                  ? (
+                    <div
+                      className='shrink-0 mr-2 w-6 h-6 bg-cover bg-center rounded-md'
+                      style={{
+                        backgroundImage: `url(${data._icon})`,
+                      }}
+                    ></div>
+                  )
+                  : (
+                    <AppIcon
+                      className='shrink-0 mr-2'
+                      size='tiny'
+                      icon={data._icon?.content}
+                      background={data._icon?.background}
+                    />
+                  )
+              }
+            </>
+          )
+        }
        <div
          title={data.title}
-          className='text-[13px] font-semibold text-gray-700 truncate'
+          className='grow text-[13px] font-semibold text-gray-700 truncate'
        >
          {data.title}
        </div>
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@ -7,11 +7,6 @@ import {
  memo,
  useCallback,
 } from 'react'
-import { type Node } from '../../types'
-import { BlockEnum } from '../../types'
-import BlockIcon from '../../block-icon'
-import { useWorkflow } from '../../hooks'
-import { canRunBySingle } from '../../utils'
 import NextStep from './components/next-step'
 import PanelOperator from './components/panel-operator'
 import {
@ -21,9 +16,15 @@ import {
 import {
  XClose,
 } from '@/app/components/base/icons/src/vender/line/general'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { useWorkflow } from '@/app/components/workflow/hooks'
+import { canRunBySingle } from '@/app/components/workflow/utils'
 import { GitBranch01 } from '@/app/components/base/icons/src/vender/line/development'
 import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
+import type { Node } from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import AppIcon from '@/app/components/base/app-icon'

 type BasePanelProps = {
  children: ReactElement
@ -34,6 +35,7 @@ const BasePanel: FC<BasePanelProps> = ({
  data,
  children,
 }) => {
+  const type = data.type
  const {
    handleNodeSelect,
    handleNodeDataUpdate,
@ -49,11 +51,40 @@ const BasePanel: FC<BasePanelProps> = ({
    <div className='mr-2 w-[420px] h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl overflow-y-auto'>
      <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5 z-10'>
        <div className='flex items-center px-4 pt-4 pb-1'>
-          <BlockIcon
-            className='shrink-0 mr-1'
-            type={data.type}
-            size='md'
-          />
+          {
+            type !== BlockEnum.Tool && (
+              <BlockIcon
+                className='shrink-0 mr-1'
+                type={data.type}
+                size='md'
+              />
+            )
+          }
+          {
+            type === BlockEnum.Tool && (
+              <>
+                {
+                  typeof data._icon === 'string'
+                    ? (
+                      <div
+                        className='shrink-0 mr-2 w-6 h-6 bg-cover bg-center rounded-md'
+                        style={{
+                          backgroundImage: `url(${data._icon})`,
+                        }}
+                      ></div>
+                    )
+                    : (
+                      <AppIcon
+                        className='shrink-0 mr-2'
+                        size='tiny'
+                        icon={data._icon?.content}
+                        background={data._icon?.background}
+                      />
+                    )
+                }
+              </>
+            )
+          }
          <TitleInput
            value={data.title || ''}
            onChange={handleTitleChange}