FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx

@@ -6,11 +6,9 @@ export type IProps = {
   params: { appId: string }
 }
 
-const Logs = async ({
-  params: { appId },
-}: IProps) => {
+const Logs = async () => {
   return (
-    <Main pageType={PageType.annotation} appId={appId} />
+    <Main pageType={PageType.annotation} />
   )
 }
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx

@@ -1,25 +1,20 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect, useMemo } from 'react'
+import { useUnmount } from 'ahooks'
+import React, { useCallback, useEffect, useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
 import cn from 'classnames'
-import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
-import {
-  ChartBarSquareIcon,
-  Cog8ToothIcon,
-  CommandLineIcon,
-  DocumentTextIcon,
-} from '@heroicons/react/24/outline'
-import {
-  ChartBarSquareIcon as ChartBarSquareSolidIcon,
-  Cog8ToothIcon as Cog8ToothSolidIcon,
-  CommandLineIcon as CommandLineSolidIcon,
-  DocumentTextIcon as DocumentTextSolidIcon,
-} from '@heroicons/react/24/solid'
 import s from './style.module.css'
+import { useStore } from '@/app/components/app/store'
 import AppSideBar from '@/app/components/app-sidebar'
+import type { NavIcon } from '@/app/components/app-sidebar/navLink'
 import { fetchAppDetail } from '@/service/apps'
 import { useAppContext } from '@/context/app-context'
+import Loading from '@/app/components/base/loading'
+import { BarChartSquare02, FileHeart02, PromptEngineering, TerminalSquare } from '@/app/components/base/icons/src/vender/line/development'
+import { BarChartSquare02 as BarChartSquare02Solid, FileHeart02 as FileHeart02Solid, PromptEngineering as PromptEngineeringSolid, TerminalSquare as TerminalSquareSolid } from '@/app/components/base/icons/src/vender/solid/development'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
@@ -32,40 +27,103 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     params: { appId }, // get appId in path
   } = props
   const { t } = useTranslation()
+  const router = useRouter()
+  const pathname = usePathname()
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
   const { isCurrentWorkspaceManager } = useAppContext()
-  const detailParams = { url: '/apps', id: appId }
-  const { data: response } = useSWR(detailParams, fetchAppDetail)
+  const { appDetail, setAppDetail, setAppSiderbarExpand } = useStore()
+  const [navigation, setNavigation] = useState<Array<{
+    name: string
+    href: string
+    icon: NavIcon
+    selectedIcon: NavIcon
+  }>>([])
 
-  const navigation = useMemo(() => {
+  const getNavigations = useCallback((appId: string, isCurrentWorkspaceManager: boolean, mode: string) => {
     const navs = [
-      ...(isCurrentWorkspaceManager ? [{ name: t('common.appMenus.promptEng'), href: `/app/${appId}/configuration`, icon: Cog8ToothIcon, selectedIcon: Cog8ToothSolidIcon }] : []),
-      { name: t('common.appMenus.overview'), href: `/app/${appId}/overview`, icon: ChartBarSquareIcon, selectedIcon: ChartBarSquareSolidIcon },
-      { name: t('common.appMenus.apiAccess'), href: `/app/${appId}/develop`, icon: CommandLineIcon, selectedIcon: CommandLineSolidIcon },
-      { name: t('common.appMenus.logAndAnn'), href: `/app/${appId}/logs`, icon: DocumentTextIcon, selectedIcon: DocumentTextSolidIcon },
+      ...(isCurrentWorkspaceManager
+        ? [{
+          name: t('common.appMenus.promptEng'),
+          href: `/app/${appId}/${(mode === 'workflow' || mode === 'advanced-chat') ? 'workflow' : 'configuration'}`,
+          icon: PromptEngineering,
+          selectedIcon: PromptEngineeringSolid,
+        }]
+        : []
+      ),
+      {
+        name: t('common.appMenus.apiAccess'),
+        href: `/app/${appId}/develop`,
+        icon: TerminalSquare,
+        selectedIcon: TerminalSquareSolid,
+      },
+      {
+        name: mode !== 'workflow'
+          ? t('common.appMenus.logAndAnn')
+          : t('common.appMenus.logs'),
+        href: `/app/${appId}/logs`,
+        icon: FileHeart02,
+        selectedIcon: FileHeart02Solid,
+      },
+      {
+        name: t('common.appMenus.overview'),
+        href: `/app/${appId}/overview`,
+        icon: BarChartSquare02,
+        selectedIcon: BarChartSquare02Solid,
+      },
     ]
     return navs
-  }, [appId, isCurrentWorkspaceManager, t])
+  }, [t])
 
-  const appModeName = (() => {
-    if (response?.mode?.toUpperCase() === 'COMPLETION')
-      return t('app.newApp.completeApp')
-
-    const isAgent = !!response?.is_agent
-    if (isAgent)
-      return t('appDebug.assistantType.agentAssistant.name')
-
-    return t('appDebug.assistantType.chatAssistant.name')
-  })()
   useEffect(() => {
-    if (response?.name)
-      document.title = `${(response.name || 'App')} - Dify`
-  }, [response])
-  if (!response)
-    return null
+    if (appDetail) {
+      document.title = `${(appDetail.name || 'App')} - Dify`
+      const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
+      const mode = isMobile ? 'collapse' : 'expand'
+      setAppSiderbarExpand(isMobile ? mode : localeMode)
+      // TODO: consider screen size and mode
+      // if ((appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (pathname).endsWith('workflow'))
+      //   setAppSiderbarExpand('collapse')
+    }
+  }, [appDetail, isMobile])
+
+  useEffect(() => {
+    setAppDetail()
+    fetchAppDetail({ url: '/apps', id: appId }).then((res) => {
+      // redirections
+      if ((res.mode === 'workflow' || res.mode === 'advanced-chat') && (pathname).endsWith('configuration')) {
+        router.replace(`/app/${appId}/workflow`)
+      }
+      else if ((res.mode !== 'workflow' && res.mode !== 'advanced-chat') && (pathname).endsWith('workflow')) {
+        router.replace(`/app/${appId}/configuration`)
+      }
+      else {
+        setAppDetail(res)
+        setNavigation(getNavigations(appId, isCurrentWorkspaceManager, res.mode))
+      }
+    })
+  }, [appId, isCurrentWorkspaceManager])
+
+  useUnmount(() => {
+    setAppDetail()
+  })
+
+  if (!appDetail) {
+    return (
+      <div className='flex h-full items-center justify-center bg-white'>
+        <Loading />
+      </div>
+    )
+  }
+
   return (
     <div className={cn(s.app, 'flex', 'overflow-hidden')}>
-      <AppSideBar title={response.name} icon={response.icon} icon_background={response.icon_background} desc={appModeName} navigation={navigation} />
-      <div className="bg-white grow overflow-hidden">{children}</div>
+      {appDetail && (
+        <AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background} desc={appDetail.mode} navigation={navigation} />
+      )}
+      <div className="bg-white grow overflow-hidden">
+        {children}
+      </div>
     </div>
   )
 }

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx

@@ -2,15 +2,9 @@ import React from 'react'
 import Main from '@/app/components/app/log-annotation'
 import { PageType } from '@/app/components/app/configuration/toolbox/annotation/type'
 
-export type IProps = {
-  params: { appId: string }
-}
-
-const Logs = async ({
-  params: { appId },
-}: IProps) => {
+const Logs = async () => {
   return (
-    <Main pageType={PageType.log} appId={appId} />
+    <Main pageType={PageType.log} />
   )
 }
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx

@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import useSWR, { useSWRConfig } from 'swr'
 import AppCard from '@/app/components/app/overview/appCard'
 import Loading from '@/app/components/base/loading'
 import { ToastContext } from '@/app/components/base/toast'
@@ -18,20 +17,22 @@ import type { UpdateAppSiteCodeResponse } from '@/models/app'
 import { asyncRunSafe } from '@/utils'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import type { IAppCardProps } from '@/app/components/app/overview/appCard'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 export type ICardViewProps = {
   appId: string
 }
 
 const CardView: FC<ICardViewProps> = ({ appId }) => {
-  const detailParams = { url: '/apps', id: appId }
-  const { data: response } = useSWR(detailParams, fetchAppDetail)
-  const { mutate } = useSWRConfig()
-  const { notify } = useContext(ToastContext)
   const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const { appDetail, setAppDetail } = useAppStore()
 
-  if (!response)
-    return <Loading />
+  const updateAppDetail = async () => {
+    fetchAppDetail({ url: '/apps', id: appId }).then((res) => {
+      setAppDetail(res)
+    })
+  }
 
   const handleCallbackResult = (err: Error | null, message?: string) => {
     const type = err ? 'error' : 'success'
@@ -39,7 +40,7 @@ const CardView: FC<ICardViewProps> = ({ appId }) => {
     message ||= (type === 'success' ? 'modifiedSuccessfully' : 'modifiedUnsuccessfully')
 
     if (type === 'success')
-      mutate(detailParams)
+      updateAppDetail()
 
     notify({
       type,
@@ -92,10 +93,13 @@ const CardView: FC<ICardViewProps> = ({ appId }) => {
     handleCallbackResult(err, err ? 'generatedUnsuccessfully' : 'generatedSuccessfully')
   }
 
+  if (!appDetail)
+    return <Loading />
+
   return (
     <div className="grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6">
       <AppCard
-        appInfo={response}
+        appInfo={appDetail}
         cardType="webapp"
         onChangeStatus={onChangeSiteStatus}
         onGenerateCode={onGenerateCode}
@@ -103,7 +107,7 @@ const CardView: FC<ICardViewProps> = ({ appId }) => {
       />
       <AppCard
         cardType="api"
-        appInfo={response}
+        appInfo={appDetail}
         onChangeStatus={onChangeApiStatus}
       />
     </div>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx

@@ -3,13 +3,12 @@ import React, { useState } from 'react'
 import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-import { fetchAppDetail } from '@/service/apps'
 import type { PeriodParams } from '@/app/components/app/overview/appChart'
-import { AvgResponseTime, AvgSessionInteractions, ConversationsChart, CostChart, EndUsersChart, TokenPerSecond, UserSatisfactionRate } from '@/app/components/app/overview/appChart'
+import { AvgResponseTime, AvgSessionInteractions, AvgUserInteractions, ConversationsChart, CostChart, EndUsersChart, TokenPerSecond, UserSatisfactionRate, WorkflowCostChart, WorkflowDailyTerminalsChart, WorkflowMessagesChart } from '@/app/components/app/overview/appChart'
 import type { Item } from '@/app/components/base/select'
 import { SimpleSelect } from '@/app/components/base/select'
 import { TIME_PERIOD_LIST } from '@/app/components/app/log/filter'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 dayjs.extend(quarterOfYear)
 
@@ -22,10 +21,10 @@ export type IChartViewProps = {
 }
 
 export default function ChartView({ appId }: IChartViewProps) {
-  const detailParams = { url: '/apps', id: appId }
-  const { data: response } = useSWR(detailParams, fetchAppDetail)
-  const isChatApp = response?.mode === 'chat'
   const { t } = useTranslation()
+  const { appDetail } = useAppStore()
+  const isChatApp = appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow'
+  const isWorkflow = appDetail?.mode === 'workflow'
   const [period, setPeriod] = useState<PeriodParams>({ name: t('appLog.filter.period.last7days'), query: { start: today.subtract(7, 'day').format(queryDateFormat), end: today.format(queryDateFormat) } })
 
   const onSelect = (item: Item) => {
@@ -42,7 +41,7 @@ export default function ChartView({ appId }: IChartViewProps) {
     }
   }
 
-  if (!response)
+  if (!appDetail)
     return null
 
   return (
@@ -56,24 +55,42 @@ export default function ChartView({ appId }: IChartViewProps) {
           defaultValue={7}
         />
       </div>
-      <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
-        <ConversationsChart period={period} id={appId} />
-        <EndUsersChart period={period} id={appId} />
-      </div>
-      <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
-        {isChatApp
-          ? (
-            <AvgSessionInteractions period={period} id={appId} />
-          )
-          : (
-            <AvgResponseTime period={period} id={appId} />
-          )}
-        <TokenPerSecond period={period} id={appId} />
-      </div>
-      <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
-        <UserSatisfactionRate period={period} id={appId} />
-        <CostChart period={period} id={appId} />
-      </div>
+      {!isWorkflow && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          <ConversationsChart period={period} id={appId} />
+          <EndUsersChart period={period} id={appId} />
+        </div>
+      )}
+      {!isWorkflow && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          {isChatApp
+            ? (
+              <AvgSessionInteractions period={period} id={appId} />
+            )
+            : (
+              <AvgResponseTime period={period} id={appId} />
+            )}
+          <TokenPerSecond period={period} id={appId} />
+        </div>
+      )}
+      {!isWorkflow && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          <UserSatisfactionRate period={period} id={appId} />
+          <CostChart period={period} id={appId} />
+        </div>
+      )}
+      {isWorkflow && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          <WorkflowMessagesChart period={period} id={appId} />
+          <WorkflowDailyTerminalsChart period={period} id={appId} />
+        </div>
+      )}
+      {isWorkflow && (
+        <div className='grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6'>
+          <WorkflowCostChart period={period} id={appId} />
+          <AvgUserInteractions period={period} id={appId} />
+        </div>
+      )}
     </div>
   )
 }

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/workflow/page.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import Workflow from '@/app/components/workflow'
+
+const Page = () => {
+  return (
+    <div className='w-full h-full overflow-x-auto'>
+      <Workflow />
+    </div>
+  )
+}
+export default Page