feat: knowledge pipeline (#25360)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: quicksand <quicksandzn@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Harry <xh001x@hotmail.com>

web/app/components/workflow-app/components/workflow-children.tsx

@@ -5,7 +5,7 @@ import {
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { DSL_EXPORT_CHECK } from '@/app/components/workflow/constants'
 import { useStore } from '@/app/components/workflow/store'
-import PluginDependency from '@/app/components/workflow/plugin-dependency'
+import PluginDependency from '../../workflow/plugin-dependency'
 import {
   useDSL,
   usePanelInteractions,
@@ -54,7 +54,7 @@ const WorkflowChildren = () => {
         showImportDSLModal && (
           <UpdateDSLModal
             onCancel={() => setShowImportDSLModal(false)}
-            onBackup={exportCheck}
+            onBackup={exportCheck!}
             onImport={handlePaneContextmenuCancel}
           />
         )
@@ -63,7 +63,7 @@ const WorkflowChildren = () => {
         secretEnvList.length > 0 && (
           <DSLExportConfirmModal
             envList={secretEnvList}
-            onConfirm={handleExportDSL}
+            onConfirm={handleExportDSL!}
             onClose={() => setSecretEnvList([])}
           />
         )

web/app/components/workflow-app/components/workflow-header/features-trigger.tsx

@@ -85,7 +85,7 @@ const FeaturesTrigger = () => {
     setShowFeaturesPanel(!showFeaturesPanel)
   }, [workflowStore, getNodesReadOnly])
 
-  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory()
 
   const updateAppDetail = useCallback(async () => {
     try {
@@ -96,7 +96,7 @@ const FeaturesTrigger = () => {
       console.error(error)
     }
   }, [appID, setAppDetail])
-  const { mutateAsync: publishWorkflow } = usePublishWorkflow(appID!)
+  const { mutateAsync: publishWorkflow } = usePublishWorkflow()
   const nodes = useNodes<CommonNodeType>()
   const edges = useEdges<CommonEdgeType>()
   const needWarningNodes = useChecklist(nodes, edges)
@@ -112,6 +112,7 @@ const FeaturesTrigger = () => {
     // Then perform the detailed validation
     if (await handleCheckBeforePublish()) {
       const res = await publishWorkflow({
+        url: `/apps/${appID}/workflows/publish`,
         title: params?.title || '',
         releaseNotes: params?.releaseNotes || '',
       })
@@ -127,7 +128,7 @@ const FeaturesTrigger = () => {
     else {
       throw new Error('Checklist failed')
     }
-  }, [needWarningNodes, handleCheckBeforePublish, publishWorkflow, notify, t, updatePublishedWorkflow, appID, updateAppDetail, workflowStore, resetWorkflowVersionHistory])
+  }, [needWarningNodes, handleCheckBeforePublish, publishWorkflow, notify, appID, t, updatePublishedWorkflow, updateAppDetail, workflowStore, resetWorkflowVersionHistory])
 
   const onPublisherToggle = useCallback((state: boolean) => {
     if (state)

web/app/components/workflow-app/components/workflow-header/index.tsx

@@ -1,14 +1,41 @@
-import { useMemo } from 'react'
+import {
+  memo,
+  useCallback,
+  useMemo,
+} from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import type { HeaderProps } from '@/app/components/workflow/header'
 import Header from '@/app/components/workflow/header'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import {
+  fetchWorkflowRunHistory,
+} from '@/service/workflow'
 import ChatVariableTrigger from './chat-variable-trigger'
 import FeaturesTrigger from './features-trigger'
 import { useResetWorkflowVersionHistory } from '@/service/use-workflow'
+import { useIsChatMode } from '../../hooks'
 
 const WorkflowHeader = () => {
-  const appDetail = useAppStore(s => s.appDetail)
-  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
+  const { appDetail, setCurrentLogItem, setShowMessageLogModal } = useAppStore(useShallow(state => ({
+    appDetail: state.appDetail,
+    setCurrentLogItem: state.setCurrentLogItem,
+    setShowMessageLogModal: state.setShowMessageLogModal,
+  })))
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory()
+  const isChatMode = useIsChatMode()
+
+  const handleClearLogAndMessageModal = useCallback(() => {
+    setCurrentLogItem()
+    setShowMessageLogModal(false)
+  }, [setCurrentLogItem, setShowMessageLogModal])
+
+  const viewHistoryProps = useMemo(() => {
+    return {
+      onClearLogAndMessageModal: handleClearLogAndMessageModal,
+      historyUrl: isChatMode ? `/apps/${appDetail!.id}/advanced-chat/workflow-runs` : `/apps/${appDetail!.id}/workflow-runs`,
+      historyFetcher: fetchWorkflowRunHistory,
+    }
+  }, [appDetail, isChatMode, handleClearLogAndMessageModal])
 
   const headerProps: HeaderProps = useMemo(() => {
     return {
@@ -17,15 +44,23 @@ const WorkflowHeader = () => {
           left: <ChatVariableTrigger />,
           middle: <FeaturesTrigger />,
         },
+        runAndHistoryProps: {
+          showRunButton: !isChatMode,
+          showPreviewButton: isChatMode,
+          viewHistoryProps,
+        },
+      },
+      viewHistory: {
+        viewHistoryProps,
       },
       restoring: {
         onRestoreSettled: resetWorkflowVersionHistory,
       },
     }
-  }, [resetWorkflowVersionHistory])
+  }, [resetWorkflowVersionHistory, isChatMode, viewHistoryProps])
   return (
     <Header {...headerProps} />
   )
 }
 
-export default WorkflowHeader
+export default memo(WorkflowHeader)

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

@@ -7,7 +7,10 @@ import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import type { WorkflowProps } from '@/app/components/workflow'
 import WorkflowChildren from './workflow-children'
 import {
+  useAvailableNodesMetaData,
   useConfigsMap,
+  useDSL,
+  useGetRunAndTraceUrl,
   useInspectVarsCrud,
   useNodesSyncDraft,
   useSetWorkflowVarsWithValue,
@@ -15,7 +18,7 @@ import {
   useWorkflowRun,
   useWorkflowStartRun,
 } from '../hooks'
-import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
+import { useWorkflowStore } from '@/app/components/workflow/store'
 
 type WorkflowMainProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
 const WorkflowMain = ({
@@ -64,10 +67,16 @@ const WorkflowMain = ({
     handleWorkflowStartRunInChatflow,
     handleWorkflowStartRunInWorkflow,
   } = useWorkflowStartRun()
-  const appId = useStore(s => s.appId)
+  const availableNodesMetaData = useAvailableNodesMetaData()
+  const { getWorkflowRunAndTraceUrl } = useGetRunAndTraceUrl()
+  const {
+    exportCheck,
+    handleExportDSL,
+  } = useDSL()
+
+  const configsMap = useConfigsMap()
   const { fetchInspectVars } = useSetWorkflowVarsWithValue({
-    flowId: appId,
-    ...useConfigsMap(),
+    ...configsMap,
   })
   const {
     hasNodeInspectVars,
@@ -85,7 +94,6 @@ const WorkflowMain = ({
     resetConversationVar,
     invalidateConversationVarValues,
   } = useInspectVarsCrud()
-  const configsMap = useConfigsMap()
 
   const hooksStore = useMemo(() => {
     return {
@@ -100,6 +108,10 @@ const WorkflowMain = ({
       handleStartWorkflowRun,
       handleWorkflowStartRunInChatflow,
       handleWorkflowStartRunInWorkflow,
+      availableNodesMetaData,
+      getWorkflowRunAndTraceUrl,
+      exportCheck,
+      handleExportDSL,
       fetchInspectVars,
       hasNodeInspectVars,
       hasSetInspectVar,
@@ -129,6 +141,10 @@ const WorkflowMain = ({
     handleStartWorkflowRun,
     handleWorkflowStartRunInChatflow,
     handleWorkflowStartRunInWorkflow,
+    availableNodesMetaData,
+    getWorkflowRunAndTraceUrl,
+    exportCheck,
+    handleExportDSL,
     fetchInspectVars,
     hasNodeInspectVars,
     hasSetInspectVar,
@@ -153,7 +169,7 @@ const WorkflowMain = ({
       edges={edges}
       viewport={viewport}
       onWorkflowDataUpdate={handleWorkflowDataUpdate}
-      hooksStore={hooksStore}
+      hooksStore={hooksStore as any}
     >
       <WorkflowChildren />
     </WorkflowWithInnerContext>

web/app/components/workflow-app/components/workflow-panel.tsx

@@ -1,4 +1,7 @@
-import { useMemo } from 'react'
+import {
+  memo,
+  useMemo,
+} from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore } from '@/app/components/workflow/store'
 import {
@@ -30,9 +33,6 @@ const ChatVariablePanel = dynamic(() => import('@/app/components/workflow/panel/
 const GlobalVariablePanel = dynamic(() => import('@/app/components/workflow/panel/global-variable-panel'), {
   ssr: false,
 })
-const VersionHistoryPanel = dynamic(() => import('@/app/components/workflow/panel/version-history-panel'), {
-  ssr: false,
-})
 
 const WorkflowPanelOnLeft = () => {
   const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, currentLogModalActiveTab } = useAppStore(useShallow(state => ({
@@ -67,7 +67,6 @@ const WorkflowPanelOnRight = () => {
   const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
   const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
   const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
-  const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
 
   return (
     <>
@@ -101,27 +100,34 @@ const WorkflowPanelOnRight = () => {
           <GlobalVariablePanel />
         )
       }
-      {
-        showWorkflowVersionHistoryPanel && (
-          <VersionHistoryPanel/>
-        )
-      }
     </>
   )
 }
 const WorkflowPanel = () => {
+  const appDetail = useAppStore(s => s.appDetail)
+  const versionHistoryPanelProps = useMemo(() => {
+    const appId = appDetail?.id
+    return {
+      getVersionListUrl: `/apps/${appId}/workflows`,
+      deleteVersionUrl: (versionId: string) => `/apps/${appId}/workflows/${versionId}`,
+      updateVersionUrl: (versionId: string) => `/apps/${appId}/workflows/${versionId}`,
+      latestVersionId: appDetail?.workflow?.id,
+    }
+  }, [appDetail?.id, appDetail?.workflow?.id])
+
   const panelProps: PanelProps = useMemo(() => {
     return {
       components: {
         left: <WorkflowPanelOnLeft />,
         right: <WorkflowPanelOnRight />,
       },
+      versionHistoryPanelProps,
     }
-  }, [])
+  }, [versionHistoryPanelProps])
 
   return (
     <Panel {...panelProps} />
   )
 }
 
-export default WorkflowPanel
+export default memo(WorkflowPanel)