rag pipeline main

web/app/components/rag-pipeline/components/rag-pipeline-main.tsx

@@ -0,0 +1,39 @@
+import {
+  useMemo,
+} from 'react'
+import { WorkflowWithInnerContext } from '@/app/components/workflow'
+import type { WorkflowProps } from '@/app/components/workflow'
+import RagPipelineChildren from './rag-pipeline-children'
+import {
+  useAvailableNodesMetaData,
+} from '../hooks'
+
+type RagPipelineMainProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
+const RagPipelineMain = ({
+  nodes,
+  edges,
+  viewport,
+}: RagPipelineMainProps) => {
+  const availableNodesMetaData = useAvailableNodesMetaData()
+
+  const hooksStore = useMemo(() => {
+    return {
+      availableNodesMetaData,
+    }
+  }, [
+    availableNodesMetaData,
+  ])
+
+  return (
+    <WorkflowWithInnerContext
+      nodes={nodes}
+      edges={edges}
+      viewport={viewport}
+      hooksStore={hooksStore as any}
+    >
+      <RagPipelineChildren />
+    </WorkflowWithInnerContext>
+  )
+}
+
+export default RagPipelineMain

web/app/components/rag-pipeline/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-available-nodes-meta-data'

web/app/components/rag-pipeline/hooks/use-available-nodes-meta-data.ts

@@ -0,0 +1,47 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useGetLanguage } from '@/context/i18n'
+import { WORKFLOW_COMMON_NODES } from '@/app/components/workflow/constants/node'
+import type { AvailableNodesMetaData } from '@/app/components/workflow/hooks-store/store'
+
+export const useAvailableNodesMetaData = () => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+
+  const mergedNodesMetaData = useMemo(() => [
+    ...WORKFLOW_COMMON_NODES,
+  ], [])
+
+  const prefixLink = useMemo(() => {
+    if (language === 'zh_Hans')
+      return 'https://docs.dify.ai/zh-hans/guides/workflow/node/'
+
+    return 'https://docs.dify.ai/guides/workflow/node/'
+  }, [language])
+
+  const availableNodesMetaData = useMemo(() => mergedNodesMetaData.map((node) => {
+    return {
+      ...node,
+      defaultValue: {
+        ...node.defaultValue,
+        type: node.type,
+      },
+      title: t(`workflow.blocks.${node.type}`),
+      description: t(`workflow.blocksAbout.${node.type}`),
+      helpLinkUri: `${prefixLink}${node.helpLinkUri}`,
+
+    }
+  }), [mergedNodesMetaData, t, prefixLink])
+
+  const availableNodesMetaDataMap = useMemo(() => availableNodesMetaData.reduce((acc, node) => {
+    acc![node.type] = node
+    return acc
+  }, {} as AvailableNodesMetaData['nodesMap']), [availableNodesMetaData])
+
+  return useMemo(() => {
+    return {
+      nodes: availableNodesMetaData,
+      nodesMap: availableNodesMetaDataMap,
+    }
+  }, [availableNodesMetaData, availableNodesMetaDataMap])
+}

web/app/components/rag-pipeline/index.tsx

@@ -1,12 +1,10 @@
-import WorkflowWithDefaultContext, {
+import WorkflowWithDefaultContext from '@/app/components/workflow'
-  WorkflowWithInnerContext,
-} from '@/app/components/workflow'
 import {
   WorkflowContextProvider,
 } from '@/app/components/workflow/context'
 import type { InjectWorkflowStoreSliceFn } from '@/app/components/workflow/store'
 import { createRagPipelineSliceSlice } from './store'
-import RagPipelineChildren from './components/rag-pipeline-children'
+import RagPipelineMain from './components/rag-pipeline-main'
 
 const RagPipeline = () => {
   return (
@@ -17,12 +15,10 @@ const RagPipeline = () => {
         edges={[]}
         nodes={[]}
       >
-        <WorkflowWithInnerContext
+        <RagPipelineMain
-          nodes={[]}
           edges={[]}
-        >
+          nodes={[]}
-          <RagPipelineChildren />
+        />
-        </WorkflowWithInnerContext>
       </WorkflowWithDefaultContext>
     </WorkflowContextProvider>
   )

web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts

@@ -13,8 +13,6 @@ export const useAvailableNodesMetaData = () => {
   const isChatMode = useIsChatMode()
   const language = useGetLanguage()
 
-  console.log('isChatMode', isChatMode)
-
   const mergedNodesMetaData = useMemo(() => [
     ...WORKFLOW_COMMON_NODES,
     StartDefault,

web/app/components/workflow/block-selector/index.tsx

@@ -9,7 +9,6 @@ const NodeSelectorWrapper = (props: NodeSelectorProps) => {
 
   const blocks = useMemo(() => {
     const result = availableNodesMetaData?.nodes || []
-    console.log(result, 'result')
 
     return result.filter((block) => {
       if (block.type === BlockEnum.Start)

web/app/components/workflow/block-selector/main.tsx

@@ -20,13 +20,15 @@ import type {
 } from '../types'
 import Tabs from './tabs'
 import { TabsEnum } from './types'
+import { useTabs } from './hooks'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Input from '@/app/components/base/input'
-import SearchBox from '@/app/components/plugins/marketplace/search-box'
+// import SearchBox from '@/app/components/plugins/marketplace/search-box'
+import cn from '@/utils/classnames'
 
 import {
   Plus02,
@@ -89,10 +91,12 @@ const NodeSelector: FC<NodeSelectorProps> = ({
     onSelect(type, toolDefaultValue)
   }, [handleOpenChange, onSelect])
 
-  const [activeTab, setActiveTab] = useState(!blocks.length ? TabsEnum.Tools : TabsEnum.Blocks)
+  const {
-  const handleActiveTabChange = useCallback((newActiveTab: TabsEnum) => {
+    activeTab,
-    setActiveTab(newActiveTab)
+    setActiveTab,
-  }, [])
+    tabs,
+  } = useTabs(!blocks.length)
+
   const searchPlaceholder = useMemo(() => {
     if (activeTab === TabsEnum.Blocks)
       return t('workflow.tabs.searchBlock')
@@ -132,9 +136,31 @@ const NodeSelector: FC<NodeSelectorProps> = ({
         }
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className={`rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg ${popupClassName}`}>
+      <div className={cn(
-          <div className='px-2 pt-2' onClick={e => e.stopPropagation()}>
+          'overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-[5px]',
-            {activeTab === TabsEnum.Blocks && (
+          popupClassName,
+        )}>
+          <div className='border-b border-divider-subtle bg-background-section-burn'>
+            <div className='flex h-9 items-center px-1 pt-1'>
+              {
+                tabs.map(tab => (
+                  <div
+                    key={tab.key}
+                    className={cn(
+                      'system-sm-medium mr-0.5 cursor-pointer rounded-t-lg px-3 py-2 text-text-tertiary hover:bg-state-base-hover',
+                      activeTab === tab.key && 'bg-components-panel-bg text-text-accent shadow-sm',
+                    )}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setActiveTab(tab.key)
+                    }}
+                  >
+                    {tab.name}
+                  </div>
+                ))
+              }
+            </div>
+            <div className='relative z-[1] bg-components-panel-bg p-2'>
               <Input
                 showLeftIcon
                 showClearIcon
@@ -144,6 +170,10 @@ const NodeSelector: FC<NodeSelectorProps> = ({
                 onChange={e => setSearchText(e.target.value)}
                 onClear={() => setSearchText('')}
               />
+            </div>
+          </div>
+          {/* <div className='p-2' onClick={e => e.stopPropagation()}>
+            {activeTab === TabsEnum.Blocks && (
             )}
             {activeTab === TabsEnum.Tools && (
               <SearchBox
@@ -155,11 +185,9 @@ const NodeSelector: FC<NodeSelectorProps> = ({
                 placeholder={t('plugin.searchTools')!}
               />
             )}
-
+          </div> */}
-          </div>
           <Tabs
             activeTab={activeTab}
-            onActiveTabChange={handleActiveTabChange}
             onSelect={handleSelect}
             searchText={searchText}
             tags={tags}

web/app/components/workflow/custom-edge.tsx

@@ -58,7 +58,6 @@ const CustomEdge = ({
   const { handleNodeAdd } = useNodesInteractions()
   const { availablePrevBlocks } = useAvailableBlocks((data as Edge['data'])!.targetType, (data as Edge['data'])?.isInIteration || (data as Edge['data'])?.isInLoop)
   const { availableNextBlocks } = useAvailableBlocks((data as Edge['data'])!.sourceType, (data as Edge['data'])?.isInIteration || (data as Edge['data'])?.isInLoop)
-  console.log(availableNextBlocks, 'xx')
   const {
     _sourceRunningStatus,
     _targetRunningStatus,

web/app/components/workflow/nodes/data-source/default.ts

@@ -1,21 +1,15 @@
-import { BlockEnum } from '../../types'
 import type { NodeDefault } from '../../types'
 import type { DataSourceNodeType } from './types'
-import { ALL_CHAT_AVAILABLE_BLOCKS, ALL_COMPLETION_AVAILABLE_BLOCKS } from '@/app/components/workflow/blocks'
+import { genNodeMetaData } from '@/app/components/workflow/utils'
+import { BlockEnum } from '@/app/components/workflow/types'
 
 const nodeDefault: NodeDefault<DataSourceNodeType> = {
+  ...genNodeMetaData({
+    sort: -1,
+    type: BlockEnum.DataSource,
+  }),
   defaultValue: {
   },
-  getAvailablePrevNodes(isChatMode: boolean) {
-    const nodes = isChatMode
-      ? ALL_CHAT_AVAILABLE_BLOCKS
-      : ALL_COMPLETION_AVAILABLE_BLOCKS.filter(type => type !== BlockEnum.End)
-    return nodes
-  },
-  getAvailableNextNodes(isChatMode: boolean) {
-    const nodes = isChatMode ? ALL_CHAT_AVAILABLE_BLOCKS : ALL_COMPLETION_AVAILABLE_BLOCKS
-    return nodes
-  },
   checkValid() {
     return {
       isValid: true,