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/header/run-and-history.tsx

@@ -1,87 +1,17 @@
-import type { FC } from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  RiLoader2Line,
   RiPlayLargeLine,
 } from '@remixicon/react'
-import { useStore } from '../store'
 import {
-  useIsChatMode,
   useNodesReadOnly,
-  useWorkflowRun,
   useWorkflowStartRun,
 } from '../hooks'
-import { WorkflowRunningStatus } from '../types'
+import type { ViewHistoryProps } from './view-history'
 import ViewHistory from './view-history'
 import Checklist from './checklist'
 import cn from '@/utils/classnames'
-import {
-  StopCircle,
-} from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
-import useTheme from '@/hooks/use-theme'
-
-const RunMode = memo(() => {
-  const { t } = useTranslation()
-  const { handleWorkflowStartRunInWorkflow } = useWorkflowStartRun()
-  const { handleStopRun } = useWorkflowRun()
-  const workflowRunningData = useStore(s => s.workflowRunningData)
-  const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
-
-  const handleStop = () => {
-    handleStopRun(workflowRunningData?.task_id || '')
-  }
-
-  const { eventEmitter } = useEventEmitterContextContext()
-  eventEmitter?.useSubscription((v: any) => {
-    if (v.type === EVENT_WORKFLOW_STOP)
-      handleStop()
-  })
-
-  return (
-    <>
-      <div
-        className={cn(
-          'flex h-7 items-center rounded-md px-2.5 text-[13px] font-medium text-components-button-secondary-accent-text',
-          'cursor-pointer hover:bg-state-accent-hover',
-          isRunning && '!cursor-not-allowed bg-state-accent-hover',
-        )}
-        onClick={() => {
-          handleWorkflowStartRunInWorkflow()
-        }}
-      >
-        {
-          isRunning
-            ? (
-              <>
-                <RiLoader2Line className='mr-1 h-4 w-4 animate-spin' />
-                {t('workflow.common.running')}
-              </>
-            )
-            : (
-              <>
-                <RiPlayLargeLine className='mr-1 h-4 w-4' />
-                {t('workflow.common.run')}
-              </>
-            )
-        }
-      </div>
-      {
-        isRunning && (
-          <div
-            className='ml-0.5 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
-            onClick={handleStop}
-          >
-            <StopCircle className='h-4 w-4 text-components-button-ghost-text' />
-          </div>
-        )
-      }
-    </>
-  )
-})
-RunMode.displayName = 'RunMode'
+import RunMode from './run-mode'
 
 const PreviewMode = memo(() => {
   const { t } = useTranslation()
@@ -100,30 +30,45 @@ const PreviewMode = memo(() => {
     </div>
   )
 })
-PreviewMode.displayName = 'PreviewMode'
 
-const RunAndHistory: FC = () => {
-  const { theme } = useTheme()
-  const isChatMode = useIsChatMode()
+export type RunAndHistoryProps = {
+  showRunButton?: boolean
+  runButtonText?: string
+  isRunning?: boolean
+  showPreviewButton?: boolean
+  viewHistoryProps?: ViewHistoryProps
+  components?: {
+    RunMode?: React.ComponentType<
+      {
+        text?: string
+      }
+    >
+  }
+}
+const RunAndHistory = ({
+  showRunButton,
+  runButtonText,
+  showPreviewButton,
+  viewHistoryProps,
+  components,
+}: RunAndHistoryProps) => {
   const { nodesReadOnly } = useNodesReadOnly()
+  const { RunMode: CustomRunMode } = components || {}
 
   return (
-    <>
-      <div className={cn(
-        'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs',
-        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
-      )}>
-        {
-          !isChatMode && <RunMode />
-        }
-        {
-          isChatMode && <PreviewMode />
-        }
-        <div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
-        <ViewHistory />
-        <Checklist disabled={nodesReadOnly} />
-      </div>
-    </>
+    <div className='flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs'>
+      {
+        showRunButton && (
+          CustomRunMode ? <CustomRunMode text={runButtonText} /> : <RunMode text={runButtonText} />
+        )
+      }
+      {
+        showPreviewButton && <PreviewMode />
+      }
+      <div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
+      <ViewHistory {...viewHistoryProps} />
+      <Checklist disabled={nodesReadOnly} />
+    </div>
   )
 }