next-step

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<NextStepProps> = ({
+  selectedNode,
+}) => {
+  const {
+    nodes,
+    edges,
+  } = useWorkflowContext()
+  const outgoers = useMemo(() => {
+    return getOutgoers(selectedNode, nodes, edges)
+  }, [selectedNode, nodes, edges])
+
+  return (
+    <div className='flex py-1'>
+      <div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-xs'>
+        <BlockIcon type={selectedNode.data.type} />
+      </div>
+      <div className='shrink-0 w-6'></div>
+      <div className='grow'>
+        {
+          !outgoers.length && (
+            <BlockSelector>
+              <div className='flex items-center px-2 w-[328px] h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50 hover:bg-gray-100 text-xs text-gray-500 cursor-pointer'>
+                <div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-gray-200'>
+                  <Plus className='w-3 h-3' />
+                </div>
+                SELECT NEXT BLOCK
+              </div>
+            </BlockSelector>
+          )
+        }
+        {
+          !!outgoers.length && outgoers.map(outgoer => (
+            <div
+              key={outgoer.id}
+              className='group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
+            >
+              <BlockIcon
+                type={outgoer.data.type}
+                className='shrink-0 mr-1.5'
+              />
+              <div className='grow'>{outgoer.data.name}</div>
+              <BlockSelector>
+                <Button className='hidden group-hover:flex px-2 py-0 h-6 bg-white text-xs text-gray-700 font-medium rounded-md'>
+                  Change
+                </Button>
+              </BlockSelector>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(NextStep)

web/app/components/workflow/nodes/_base/node.tsx

@@ -9,6 +9,7 @@ import {
 } from 'reactflow'
 import { useWorkflowContext } from '../../context'
 import BlockSelector from '../../block-selector'
+import { getBlockByType } from '../../block-selector/utils'
 import BlockIcon from '../../block-icon'
 import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 
@@ -48,7 +49,9 @@ const BaseNode: FC<BaseNodeProps> = ({
           type={currentNode!.data.type}
           size='md'
         />
-        <div className='text-[13px] font-semibold text-gray-700'>START</div>
+        <div className='text-[13px] font-semibold text-gray-700'>
+          {getBlockByType(currentNode!.data.type)?.title}
+        </div>
       </div>
       {children}
       <div className='px-3 pt-1 pb-1 text-xs text-gray-500'>

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<BasePanelProps> = ({
 
   return (
     <div className='absolute top-2 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-20 overflow-y-auto'>
-      <div className='sticky top-0 bg-white'>
+      <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5'>
         <div className='flex items-center px-4 pt-3'>
           <BlockIcon
             className='shrink-0 mr-2'
             type={selectedNode!.data.type}
             size='md'
           />
-          <div className='grow py-1 text-base text-gray-900 font-semibold '>LLM</div>
+          <div className='grow py-1 text-base text-gray-900 font-semibold '>{getBlockByType(selectedNode!.data.type)?.title}</div>
           <div className='shrink-0 flex items-center'>
             <div
-              className='w-6 h-6 cursor-pointer'
+              className='flex items-center justify-center w-6 h-6 cursor-pointer'
               onClick={() => handleSelectedNodeIdChange('')}
             >
               <XClose className='w-4 h-4 text-gray-500' />
@@ -56,24 +63,32 @@ const BasePanel: FC<BasePanelProps> = ({
         </div>
         {
           (inputsElement || outputsElement) && (
-            <div className='flex items-center px-4 h-[42px]'>
+            <div className='flex items-center px-4 h-[42px] text-[13px] font-semibold text-gray-400'>
               {
                 inputsElement && (
                   <div
-                    className='cursor-pointer'
+                    className={`relative flex items-center h-full cursor-pointer ${activeTab === TabEnum.Inputs && 'text-gray-700'}`}
                     onClick={() => setActiveTab(TabEnum.Inputs)}
                   >
-                    inputs
+                    <LogIn04 className='mr-1 w-4 h-4' />
+                    INPUTS
+                    {
+                      activeTab === TabEnum.Inputs && <div className='absolute left-0 bottom-0 w-full h-0.5 bg-primary-600' />
+                    }
                   </div>
                 )
               }
               {
                 outputsElement && (
                   <div
-                    className='ml-4 cursor-pointer'
+                    className={`relative flex items-center ml-4 h-full cursor-pointer ${activeTab === TabEnum.Outputs && 'text-gray-700'}`}
                     onClick={() => setActiveTab(TabEnum.Outputs)}
                   >
-                    outpus
+                    <LogOut04 className='mr-1 w-4 h-4' />
+                    OUTPUTS
+                    {
+                      activeTab === TabEnum.Outputs && <div className='absolute left-0 bottom-0 w-full h-0.5 bg-primary-600' />
+                    }
                   </div>
                 )
               }
@@ -81,13 +96,20 @@ const BasePanel: FC<BasePanelProps> = ({
           )
         }
       </div>
-      <div className='py-2 border-t-[0.5px] border-b-[0.5px] border-black/5'>
+      <div className='py-2 border-b-[0.5px] border-black/5'>
         {defaultElement}
         {activeTab === TabEnum.Inputs && inputsElement}
         {activeTab === TabEnum.Outputs && outputsElement}
       </div>
       <div className='p-4'>
-        next step
+        <div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>
+          <GitBranch01 className='mr-1 w-4 h-4' />
+          NEXT STEP
+        </div>
+        <div className='mb-2 text-xs text-gray-400'>
+          Add the next block in this workflow
+        </div>
+        <NextStep selectedNode={selectedNode!} />
       </div>
     </div>
   )