Chore/slice workflow (#18351)

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

@@ -0,0 +1,69 @@
+import {
+  memo,
+  useState,
+} from 'react'
+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 Features from '@/app/components/workflow/features'
+import PluginDependency from '@/app/components/workflow/plugin-dependency'
+import UpdateDSLModal from '@/app/components/workflow/update-dsl-modal'
+import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-modal'
+import {
+  useDSL,
+  usePanelInteractions,
+} from '@/app/components/workflow/hooks'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import WorkflowHeader from './workflow-header'
+import WorkflowPanel from './workflow-panel'
+
+const WorkflowChildren = () => {
+  const { eventEmitter } = useEventEmitterContextContext()
+  const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
+  const showFeaturesPanel = useStore(s => s.showFeaturesPanel)
+  const showImportDSLModal = useStore(s => s.showImportDSLModal)
+  const setShowImportDSLModal = useStore(s => s.setShowImportDSLModal)
+  const {
+    handlePaneContextmenuCancel,
+  } = usePanelInteractions()
+  const {
+    exportCheck,
+    handleExportDSL,
+  } = useDSL()
+
+  eventEmitter?.useSubscription((v: any) => {
+    if (v.type === DSL_EXPORT_CHECK)
+      setSecretEnvList(v.payload.data as EnvironmentVariable[])
+  })
+
+  return (
+    <>
+      <PluginDependency />
+      {
+        showFeaturesPanel && <Features />
+      }
+      {
+        showImportDSLModal && (
+          <UpdateDSLModal
+            onCancel={() => setShowImportDSLModal(false)}
+            onBackup={exportCheck}
+            onImport={handlePaneContextmenuCancel}
+          />
+        )
+      }
+      {
+        secretEnvList.length > 0 && (
+          <DSLExportConfirmModal
+            envList={secretEnvList}
+            onConfirm={handleExportDSL}
+            onClose={() => setSecretEnvList([])}
+          />
+        )
+      }
+      <WorkflowHeader />
+      <WorkflowPanel />
+    </>
+  )
+}
+
+export default memo(WorkflowChildren)

web/app/components/workflow-app/components/workflow-header/chat-variable-trigger.tsx

@@ -0,0 +1,11 @@
+import { memo } from 'react'
+import ChatVariableButton from '@/app/components/workflow/header/chat-variable-button'
+import {
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
+
+const ChatVariableTrigger = () => {
+  const { nodesReadOnly } = useNodesReadOnly()
+  return <ChatVariableButton disabled={nodesReadOnly} />
+}
+export default memo(ChatVariableTrigger)

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

@@ -0,0 +1,152 @@
+import {
+  memo,
+  useCallback,
+  useMemo,
+} from 'react'
+import { useNodes } from 'reactflow'
+import { RiApps2AddLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import {
+  useStore,
+  useWorkflowStore,
+} from '@/app/components/workflow/store'
+import {
+  useChecklistBeforePublish,
+  useNodesReadOnly,
+  useNodesSyncDraft,
+} from '@/app/components/workflow/hooks'
+import Button from '@/app/components/base/button'
+import AppPublisher from '@/app/components/app/app-publisher'
+import { useFeatures } from '@/app/components/base/features/hooks'
+import {
+  BlockEnum,
+  InputVarType,
+} from '@/app/components/workflow/types'
+import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
+import { useToastContext } from '@/app/components/base/toast'
+import { usePublishWorkflow, useResetWorkflowVersionHistory } from '@/service/use-workflow'
+import type { PublishWorkflowParams } from '@/types/workflow'
+import { fetchAppDetail, fetchAppSSO } from '@/service/apps'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { useSelector as useAppSelector } from '@/context/app-context'
+
+const FeaturesTrigger = () => {
+  const { t } = useTranslation()
+  const workflowStore = useWorkflowStore()
+  const appDetail = useAppStore(s => s.appDetail)
+  const appID = appDetail?.id
+  const setAppDetail = useAppStore(s => s.setAppDetail)
+  const systemFeatures = useAppSelector(state => state.systemFeatures)
+  const {
+    nodesReadOnly,
+    getNodesReadOnly,
+  } = useNodesReadOnly()
+  const publishedAt = useStore(s => s.publishedAt)
+  const draftUpdatedAt = useStore(s => s.draftUpdatedAt)
+  const toolPublished = useStore(s => s.toolPublished)
+  const nodes = useNodes<StartNodeType>()
+  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
+  const startVariables = startNode?.data.variables
+  const fileSettings = useFeatures(s => s.features.file)
+  const variables = useMemo(() => {
+    const data = startVariables || []
+    if (fileSettings?.image?.enabled) {
+      return [
+        ...data,
+        {
+          type: InputVarType.files,
+          variable: '__image',
+          required: false,
+          label: 'files',
+        },
+      ]
+    }
+
+    return data
+  }, [fileSettings?.image?.enabled, startVariables])
+
+  const { handleCheckBeforePublish } = useChecklistBeforePublish()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const { notify } = useToastContext()
+
+  const handleShowFeatures = useCallback(() => {
+    const {
+      showFeaturesPanel,
+      isRestoring,
+      setShowFeaturesPanel,
+    } = workflowStore.getState()
+    if (getNodesReadOnly() && !isRestoring)
+      return
+    setShowFeaturesPanel(!showFeaturesPanel)
+  }, [workflowStore, getNodesReadOnly])
+
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
+
+  const updateAppDetail = useCallback(async () => {
+    try {
+      const res = await fetchAppDetail({ url: '/apps', id: appID! })
+      if (systemFeatures.enable_web_sso_switch_component) {
+        const ssoRes = await fetchAppSSO({ appId: appID! })
+        setAppDetail({ ...res, enable_sso: ssoRes.enabled })
+      }
+      else {
+        setAppDetail({ ...res })
+      }
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }, [appID, setAppDetail, systemFeatures.enable_web_sso_switch_component])
+  const { mutateAsync: publishWorkflow } = usePublishWorkflow(appID!)
+  const onPublish = useCallback(async (params?: PublishWorkflowParams) => {
+    if (await handleCheckBeforePublish()) {
+      const res = await publishWorkflow({
+        title: params?.title || '',
+        releaseNotes: params?.releaseNotes || '',
+      })
+
+      if (res) {
+        notify({ type: 'success', message: t('common.api.actionSuccess') })
+        updateAppDetail()
+        workflowStore.getState().setPublishedAt(res.created_at)
+        resetWorkflowVersionHistory()
+      }
+    }
+    else {
+      throw new Error('Checklist failed')
+    }
+  }, [handleCheckBeforePublish, notify, t, workflowStore, publishWorkflow, resetWorkflowVersionHistory, updateAppDetail])
+
+  const onPublisherToggle = useCallback((state: boolean) => {
+    if (state)
+      handleSyncWorkflowDraft(true)
+  }, [handleSyncWorkflowDraft])
+
+  const handleToolConfigureUpdate = useCallback(() => {
+    workflowStore.setState({ toolPublished: true })
+  }, [workflowStore])
+
+  return (
+    <>
+      <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
+        <RiApps2AddLine className='mr-1 h-4 w-4 text-components-button-secondary-text' />
+        {t('workflow.common.features')}
+      </Button>
+      <AppPublisher
+        {...{
+          publishedAt,
+          draftUpdatedAt,
+          disabled: nodesReadOnly,
+          toolPublished,
+          inputs: variables,
+          onRefreshData: handleToolConfigureUpdate,
+          onPublish,
+          onToggle: onPublisherToggle,
+          crossAxisOffset: 4,
+        }}
+      />
+    </>
+  )
+}
+
+export default memo(FeaturesTrigger)

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

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+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 ChatVariableTrigger from './chat-variable-trigger'
+import FeaturesTrigger from './features-trigger'
+import { useResetWorkflowVersionHistory } from '@/service/use-workflow'
+
+const WorkflowHeader = () => {
+  const appDetail = useAppStore(s => s.appDetail)
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
+
+  const headerProps: HeaderProps = useMemo(() => {
+    return {
+      normal: {
+        components: {
+          left: <ChatVariableTrigger />,
+          middle: <FeaturesTrigger />,
+        },
+      },
+      restoring: {
+        onRestoreSettled: resetWorkflowVersionHistory,
+      },
+    }
+  }, [resetWorkflowVersionHistory])
+  return (
+    <Header {...headerProps} />
+  )
+}
+
+export default WorkflowHeader

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

@@ -0,0 +1,87 @@
+import {
+  useCallback,
+  useMemo,
+} from 'react'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { WorkflowWithInnerContext } from '@/app/components/workflow'
+import type { WorkflowProps } from '@/app/components/workflow'
+import WorkflowChildren from './workflow-children'
+import {
+  useNodesSyncDraft,
+  useWorkflowRun,
+  useWorkflowStartRun,
+} from '../hooks'
+
+type WorkflowMainProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
+const WorkflowMain = ({
+  nodes,
+  edges,
+  viewport,
+}: WorkflowMainProps) => {
+  const featuresStore = useFeaturesStore()
+
+  const handleWorkflowDataUpdate = useCallback((payload: any) => {
+    if (payload.features && featuresStore) {
+      const { setFeatures } = featuresStore.getState()
+
+      setFeatures(payload.features)
+    }
+  }, [featuresStore])
+
+  const {
+    doSyncWorkflowDraft,
+    syncWorkflowDraftWhenPageClose,
+  } = useNodesSyncDraft()
+  const {
+    handleBackupDraft,
+    handleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow,
+    handleRun,
+    handleStopRun,
+  } = useWorkflowRun()
+  const {
+    handleStartWorkflowRun,
+    handleWorkflowStartRunInChatflow,
+    handleWorkflowStartRunInWorkflow,
+  } = useWorkflowStartRun()
+
+  const hooksStore = useMemo(() => {
+    return {
+      syncWorkflowDraftWhenPageClose,
+      doSyncWorkflowDraft,
+      handleBackupDraft,
+      handleLoadBackupDraft,
+      handleRestoreFromPublishedWorkflow,
+      handleRun,
+      handleStopRun,
+      handleStartWorkflowRun,
+      handleWorkflowStartRunInChatflow,
+      handleWorkflowStartRunInWorkflow,
+    }
+  }, [
+    syncWorkflowDraftWhenPageClose,
+    doSyncWorkflowDraft,
+    handleBackupDraft,
+    handleLoadBackupDraft,
+    handleRestoreFromPublishedWorkflow,
+    handleRun,
+    handleStopRun,
+    handleStartWorkflowRun,
+    handleWorkflowStartRunInChatflow,
+    handleWorkflowStartRunInWorkflow,
+  ])
+
+  return (
+    <WorkflowWithInnerContext
+      nodes={nodes}
+      edges={edges}
+      viewport={viewport}
+      onWorkflowDataUpdate={handleWorkflowDataUpdate}
+      hooksStore={hooksStore}
+    >
+      <WorkflowChildren />
+    </WorkflowWithInnerContext>
+  )
+}
+
+export default WorkflowMain

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

@@ -0,0 +1,109 @@
+import { useMemo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { useStore } from '@/app/components/workflow/store'
+import {
+  useIsChatMode,
+} from '../hooks'
+import DebugAndPreview from '@/app/components/workflow/panel/debug-and-preview'
+import Record from '@/app/components/workflow/panel/record'
+import WorkflowPreview from '@/app/components/workflow/panel/workflow-preview'
+import ChatRecord from '@/app/components/workflow/panel/chat-record'
+import ChatVariablePanel from '@/app/components/workflow/panel/chat-variable-panel'
+import GlobalVariablePanel from '@/app/components/workflow/panel/global-variable-panel'
+import VersionHistoryPanel from '@/app/components/workflow/panel/version-history-panel'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import MessageLogModal from '@/app/components/base/message-log-modal'
+import type { PanelProps } from '@/app/components/workflow/panel'
+import Panel from '@/app/components/workflow/panel'
+
+const WorkflowPanelOnLeft = () => {
+  const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, currentLogModalActiveTab } = useAppStore(useShallow(state => ({
+    currentLogItem: state.currentLogItem,
+    setCurrentLogItem: state.setCurrentLogItem,
+    showMessageLogModal: state.showMessageLogModal,
+    setShowMessageLogModal: state.setShowMessageLogModal,
+    currentLogModalActiveTab: state.currentLogModalActiveTab,
+  })))
+  return (
+    <>
+      {
+        showMessageLogModal && (
+          <MessageLogModal
+            fixedWidth
+            width={400}
+            currentLogItem={currentLogItem}
+            onCancel={() => {
+              setCurrentLogItem()
+              setShowMessageLogModal(false)
+            }}
+            defaultTab={currentLogModalActiveTab}
+          />
+        )
+      }
+    </>
+  )
+}
+const WorkflowPanelOnRight = () => {
+  const isChatMode = useIsChatMode()
+  const historyWorkflowData = useStore(s => s.historyWorkflowData)
+  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 (
+    <>
+      {
+        historyWorkflowData && !isChatMode && (
+          <Record />
+        )
+      }
+      {
+        historyWorkflowData && isChatMode && (
+          <ChatRecord />
+        )
+      }
+      {
+        showDebugAndPreviewPanel && isChatMode && (
+          <DebugAndPreview />
+        )
+      }
+      {
+        showDebugAndPreviewPanel && !isChatMode && (
+          <WorkflowPreview />
+        )
+      }
+      {
+        showChatVariablePanel && (
+          <ChatVariablePanel />
+        )
+      }
+      {
+        showGlobalVariablePanel && (
+          <GlobalVariablePanel />
+        )
+      }
+      {
+        showWorkflowVersionHistoryPanel && (
+          <VersionHistoryPanel/>
+        )
+      }
+    </>
+  )
+}
+const WorkflowPanel = () => {
+  const panelProps: PanelProps = useMemo(() => {
+    return {
+      components: {
+        left: <WorkflowPanelOnLeft />,
+        right: <WorkflowPanelOnRight />,
+      },
+    }
+  }, [])
+
+  return (
+    <Panel {...panelProps} />
+  )
+}
+
+export default WorkflowPanel