diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index 3e42d169d0..c7c4ddb61e 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -1,7 +1,8 @@
import { useState } from 'react'
import BlockIcon from '../block-icon'
import {
- BLOCKS,
+ BLOCK_CLASSIFICATIONS,
+ BLOCK_GROUP_BY_CLASSIFICATION,
TABS,
} from './constants'
@@ -28,16 +29,32 @@ const Tabs = () => {
{
- BLOCKS.map(block => (
+ BLOCK_CLASSIFICATIONS.map(classification => (
-
-
{block.title}
+ {
+ classification !== '-' && (
+
+ {classification}
+
+ )
+ }
+ {
+ BLOCK_GROUP_BY_CLASSIFICATION[classification].map(block => (
+
+ ))
+ }
))
}
diff --git a/web/app/components/workflow/block-selector/utils.ts b/web/app/components/workflow/block-selector/utils.ts
new file mode 100644
index 0000000000..76b3f64d9b
--- /dev/null
+++ b/web/app/components/workflow/block-selector/utils.ts
@@ -0,0 +1,6 @@
+import type { BlockEnum } from '../types'
+import { BLOCKS } from './constants'
+
+export const getBlockByType = (type: BlockEnum) => {
+ return BLOCKS.find(block => block.type === type)
+}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step.tsx b/web/app/components/workflow/nodes/_base/components/next-step.tsx
new file mode 100644
index 0000000000..8fec842d1e
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/next-step.tsx
@@ -0,0 +1,71 @@
+import type { FC } from 'react'
+import {
+ memo,
+ useMemo,
+} from 'react'
+import { getOutgoers } from 'reactflow'
+import BlockIcon from '../../../block-icon'
+import type { Node } from '../../../types'
+import { useWorkflowContext } from '../../../context'
+import BlockSelector from '../../../block-selector'
+import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+import Button from '@/app/components/base/button'
+
+type NextStepProps = {
+ selectedNode: Node
+}
+const NextStep: FC
= ({
+ selectedNode,
+}) => {
+ const {
+ nodes,
+ edges,
+ } = useWorkflowContext()
+ const outgoers = useMemo(() => {
+ return getOutgoers(selectedNode, nodes, edges)
+ }, [selectedNode, nodes, edges])
+
+ return (
+
+
+
+
+
+
+ {
+ !outgoers.length && (
+
+
+
+ )
+ }
+ {
+ !!outgoers.length && outgoers.map(outgoer => (
+
+
+
{outgoer.data.name}
+
+
+
+
+ ))
+ }
+
+
START
+
+ {getBlockByType(currentNode!.data.type)?.title}
+
{children}
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index 4b12c53b88..b0083c369f 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -5,7 +5,14 @@ import type {
import { useState } from 'react'
import { useWorkflowContext } from '../../context'
import BlockIcon from '../../block-icon'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+import { getBlockByType } from '../../block-selector/utils'
+import NextStep from './components/next-step'
+import {
+ LogIn04,
+ LogOut04,
+ XClose,
+} from '@/app/components/base/icons/src/vender/line/general'
+import { GitBranch01 } from '@/app/components/base/icons/src/vender/line/development'
enum TabEnum {
Inputs = 'inputs',
@@ -32,17 +39,17 @@ const BasePanel: FC
= ({
return (
-
+
-
LLM
+
{getBlockByType(selectedNode!.data.type)?.title}
handleSelectedNodeIdChange('')}
>
@@ -56,24 +63,32 @@ const BasePanel: FC = ({
{
(inputsElement || outputsElement) && (
-
+
{
inputsElement && (
setActiveTab(TabEnum.Inputs)}
>
- inputs
+
+ INPUTS
+ {
+ activeTab === TabEnum.Inputs &&
+ }
)
}
{
outputsElement && (
setActiveTab(TabEnum.Outputs)}
>
- outpus
+
+ OUTPUTS
+ {
+ activeTab === TabEnum.Outputs &&
+ }
)
}
@@ -81,13 +96,20 @@ const BasePanel: FC
= ({
)
}
-
+
{defaultElement}
{activeTab === TabEnum.Inputs && inputsElement}
{activeTab === TabEnum.Outputs && outputsElement}
- next step
+
+
+ NEXT STEP
+
+
+ Add the next block in this workflow
+
+
)