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/components/app-sidebar/app-info.tsx

@@ -0,0 +1,391 @@
+import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import { useContext, useContextSelector } from 'use-context-selector'
+import cn from 'classnames'
+import React, { useCallback, useState } from 'react'
+import AppIcon from '../base/app-icon'
+import SwitchAppModal from '../app/switch-app-modal'
+import s from './style.module.css'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import Divider from '@/app/components/base/divider'
+import Confirm from '@/app/components/base/confirm'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { ToastContext } from '@/app/components/base/toast'
+import AppsContext from '@/context/app-context'
+import { useProviderContext } from '@/context/provider-context'
+import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
+import DuplicateAppModal from '@/app/components/app/duplicate-modal'
+import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
+import CreateAppModal from '@/app/components/explore/create-app-modal'
+import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
+import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
+import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
+import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import { getRedirection } from '@/utils/app-redirection'
+
+export type IAppInfoProps = {
+  expand: boolean
+}
+
+const AppInfo = ({ expand }: IAppInfoProps) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const { replace } = useRouter()
+  const { onPlanInfoChanged } = useProviderContext()
+  const appDetail = useAppStore(state => state.appDetail)
+  const setAppDetail = useAppStore(state => state.setAppDetail)
+  const [open, setOpen] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [showDuplicateModal, setShowDuplicateModal] = useState(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [showSwitchTip, setShowSwitchTip] = useState<string>('')
+  const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
+
+  const mutateApps = useContextSelector(
+    AppsContext,
+    state => state.mutateApps,
+  )
+
+  const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
+    name,
+    icon,
+    icon_background,
+    description,
+  }) => {
+    if (!appDetail)
+      return
+    try {
+      const app = await updateAppInfo({
+        appID: appDetail.id,
+        name,
+        icon,
+        icon_background,
+        description,
+      })
+      setShowEditModal(false)
+      notify({
+        type: 'success',
+        message: t('app.editDone'),
+      })
+      setAppDetail(app)
+      mutateApps()
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.editFailed') })
+    }
+  }, [appDetail, mutateApps, notify, setAppDetail, t])
+
+  const onCopy: DuplicateAppModalProps['onConfirm'] = async ({ name, icon, icon_background }) => {
+    if (!appDetail)
+      return
+    try {
+      const newApp = await copyApp({
+        appID: appDetail.id,
+        name,
+        icon,
+        icon_background,
+        mode: appDetail.mode,
+      })
+      setShowDuplicateModal(false)
+      notify({
+        type: 'success',
+        message: t('app.newApp.appCreated'),
+      })
+      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
+      mutateApps()
+      onPlanInfoChanged()
+      getRedirection(true, newApp, replace)
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
+    }
+  }
+
+  const onExport = async () => {
+    if (!appDetail)
+      return
+    try {
+      const { data } = await exportAppConfig(appDetail.id)
+      const a = document.createElement('a')
+      const file = new Blob([data], { type: 'application/yaml' })
+      a.href = URL.createObjectURL(file)
+      a.download = `${appDetail.name}.yml`
+      a.click()
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+  }
+
+  const onConfirmDelete = useCallback(async () => {
+    if (!appDetail)
+      return
+    try {
+      await deleteApp(appDetail.id)
+      notify({ type: 'success', message: t('app.appDeleted') })
+      mutateApps()
+      onPlanInfoChanged()
+      setAppDetail()
+      replace('/apps')
+    }
+    catch (e: any) {
+      notify({
+        type: 'error',
+        message: `${t('app.appDeleteFailed')}${'message' in e ? `: ${e.message}` : ''}`,
+      })
+    }
+    setShowConfirmDelete(false)
+  }, [appDetail, mutateApps, notify, onPlanInfoChanged, replace, t])
+
+  if (!appDetail)
+    return null
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => setOpen(v => !v)}
+          className='block'
+        >
+          <div className={cn('flex cursor-pointer p-1 rounded-lg hover:bg-gray-100', open && 'bg-gray-100')}>
+            <div className='relative shrink-0 mr-2'>
+              <AppIcon size={expand ? 'large' : 'small'} icon={appDetail.icon} background={appDetail.icon_background} />
+              <span className={cn(
+                'absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm',
+                !expand && '!w-3.5 !h-3.5 !bottom-[-2px] !right-[-2px]',
+              )}>
+                {appDetail.mode === 'advanced-chat' && (
+                  <ChatBot className={cn('w-3 h-3 text-[#1570EF]', !expand && '!w-2.5 !h-2.5')} />
+                )}
+                {appDetail.mode === 'agent-chat' && (
+                  <CuteRobote className={cn('w-3 h-3 text-indigo-600', !expand && '!w-2.5 !h-2.5')} />
+                )}
+                {appDetail.mode === 'chat' && (
+                  <ChatBot className={cn('w-3 h-3 text-[#1570EF]', !expand && '!w-2.5 !h-2.5')} />
+                )}
+                {appDetail.mode === 'completion' && (
+                  <AiText className={cn('w-3 h-3 text-[#0E9384]', !expand && '!w-2.5 !h-2.5')} />
+                )}
+                {appDetail.mode === 'workflow' && (
+                  <Route className={cn('w-3 h-3 text-[#f79009]', !expand && '!w-2.5 !h-2.5')} />
+                )}
+              </span>
+            </div>
+            {expand && (
+              <div className="grow w-0">
+                <div className='flex justify-between items-center text-sm leading-5 font-medium text-gray-900'>
+                  <div className='truncate' title={appDetail.name}>{appDetail.name}</div>
+                  <ChevronDown className='shrink-0 ml-[2px] w-3 h-3 text-gray-500' />
+                </div>
+                <div className='flex items-center text-[10px] leading-[18px] font-medium text-gray-500 gap-1'>
+                  {appDetail.mode === 'advanced-chat' && (
+                    <>
+                      <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.chatbot').toUpperCase()}</div>
+                      <div title={t('app.newApp.advanced') || ''} className='px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.newApp.advanced').toUpperCase()}</div>
+                    </>
+                  )}
+                  {appDetail.mode === 'agent-chat' && (
+                    <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.agent').toUpperCase()}</div>
+                  )}
+                  {appDetail.mode === 'chat' && (
+                    <>
+                      <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.chatbot').toUpperCase()}</div>
+                      <div title={t('app.newApp.basic') || ''} className='px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{(t('app.newApp.basic').toUpperCase())}</div>
+                    </>
+                  )}
+                  {appDetail.mode === 'completion' && (
+                    <>
+                      <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.completion').toUpperCase()}</div>
+                      <div title={t('app.newApp.basic') || ''} className='px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{(t('app.newApp.basic').toUpperCase())}</div>
+                    </>
+                  )}
+                  {appDetail.mode === 'workflow' && (
+                    <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.workflow').toUpperCase()}</div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1002]'>
+          <div className='relative w-[320px] bg-white rounded-2xl shadow-xl'>
+            {/* header */}
+            <div className={cn('flex pl-4 pt-3 pr-3', !appDetail.description && 'pb-2')}>
+              <div className='relative shrink-0 mr-2'>
+                <AppIcon size="large" icon={appDetail.icon} background={appDetail.icon_background} />
+                <span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'>
+                  {appDetail.mode === 'advanced-chat' && (
+                    <ChatBot className='w-3 h-3 text-[#1570EF]' />
+                  )}
+                  {appDetail.mode === 'agent-chat' && (
+                    <CuteRobote className='w-3 h-3 text-indigo-600' />
+                  )}
+                  {appDetail.mode === 'chat' && (
+                    <ChatBot className='w-3 h-3 text-[#1570EF]' />
+                  )}
+                  {appDetail.mode === 'completion' && (
+                    <AiText className='w-3 h-3 text-[#0E9384]' />
+                  )}
+                  {appDetail.mode === 'workflow' && (
+                    <Route className='w-3 h-3 text-[#f79009]' />
+                  )}
+                </span>
+              </div>
+              <div className='grow w-0'>
+                <div title={appDetail.name} className='flex justify-between items-center text-sm leading-5 font-medium text-gray-900 truncate'>{appDetail.name}</div>
+                <div className='flex items-center text-[10px] leading-[18px] font-medium text-gray-500 gap-1'>
+                  {appDetail.mode === 'advanced-chat' && (
+                    <>
+                      <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.chatbot').toUpperCase()}</div>
+                      <div title={t('app.newApp.advanced') || ''} className='px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.newApp.advanced').toUpperCase()}</div>
+                    </>
+                  )}
+                  {appDetail.mode === 'agent-chat' && (
+                    <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.agent').toUpperCase()}</div>
+                  )}
+                  {appDetail.mode === 'chat' && (
+                    <>
+                      <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.chatbot').toUpperCase()}</div>
+                      <div title={t('app.newApp.basic') || ''} className='px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{(t('app.newApp.basic').toUpperCase())}</div>
+                    </>
+                  )}
+                  {appDetail.mode === 'completion' && (
+                    <>
+                      <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.completion').toUpperCase()}</div>
+                      <div title={t('app.newApp.basic') || ''} className='px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{(t('app.newApp.basic').toUpperCase())}</div>
+                    </>
+                  )}
+                  {appDetail.mode === 'workflow' && (
+                    <div className='shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate'>{t('app.types.workflow').toUpperCase()}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+            {/* desscription */}
+            {appDetail.description && (
+              <div className='px-4 py-2 text-gray-500 text-xs leading-[18px]'>{appDetail.description}</div>
+            )}
+            {/* operations */}
+            <Divider className="!my-1" />
+            <div className="w-full py-1">
+              <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={() => {
+                setOpen(false)
+                setShowEditModal(true)
+              }}>
+                <span className='text-gray-700 text-sm leading-5'>{t('app.editApp')}</span>
+              </div>
+              <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={() => {
+                setOpen(false)
+                setShowDuplicateModal(true)
+              }}>
+                <span className='text-gray-700 text-sm leading-5'>{t('app.duplicate')}</span>
+              </div>
+              <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={onExport}>
+                <span className='text-gray-700 text-sm leading-5'>{t('app.export')}</span>
+              </div>
+              {(appDetail.mode === 'completion' || appDetail.mode === 'chat') && (
+                <>
+                  <Divider className="!my-1" />
+                  <div
+                    className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer'
+                    onMouseEnter={() => setShowSwitchTip(appDetail.mode)}
+                    onMouseLeave={() => setShowSwitchTip('')}
+                    onClick={() => {
+                      setOpen(false)
+                      setShowSwitchModal(true)
+                    }}
+                  >
+                    <span className='text-gray-700 text-sm leading-5'>{t('app.switch')}</span>
+                  </div>
+                </>
+              )}
+              <Divider className="!my-1" />
+              <div className='group h-9 py-2 px-3 mx-1 flex items-center hover:bg-red-50 rounded-lg cursor-pointer' onClick={() => {
+                setOpen(false)
+                setShowConfirmDelete(true)
+              }}>
+                <span className='text-gray-700 text-sm leading-5 group-hover:text-red-500'>
+                  {t('common.operation.delete')}
+                </span>
+              </div>
+            </div>
+            {/* switch tip */}
+            <div
+              className={cn(
+                'hidden absolute left-[324px] top-0 w-[376px] rounded-xl bg-white border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-lg',
+                showSwitchTip && '!block',
+              )}
+            >
+              <div className={cn(
+                'w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl',
+                showSwitchTip === 'chat' && s.expertPic,
+                showSwitchTip === 'completion' && s.completionPic,
+              )}/>
+              <div className='px-4 pb-2'>
+                <div className='flex items-center gap-1 text-gray-700 text-md leading-6 font-semibold'>
+                  {t('app.newApp.advanced')}
+                  <span className='px-1 rounded-[5px] bg-white border border-black/8 text-gray-500 text-[10px] leading-[18px] font-medium'>BETA</span>
+                </div>
+                <div className='text-orange-500 text-xs leading-[18px] font-medium'>{t('app.newApp.advancedFor').toLocaleUpperCase()}</div>
+                <div className='mt-1 text-gray-500 text-sm leading-5'>{t('app.newApp.advancedDescription')}</div>
+              </div>
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+        {showSwitchModal && (
+          <SwitchAppModal
+            inAppDetail
+            show={showSwitchModal}
+            appDetail={appDetail}
+            onClose={() => setShowSwitchModal(false)}
+            onSuccess={() => setShowSwitchModal(false)}
+          />
+        )}
+        {showEditModal && (
+          <CreateAppModal
+            isEditModal
+            appIcon={appDetail.icon}
+            appIconBackground={appDetail.icon_background}
+            appName={appDetail.name}
+            appDescription={appDetail.description}
+            show={showEditModal}
+            onConfirm={onEdit}
+            onHide={() => setShowEditModal(false)}
+          />
+        )}
+        {showDuplicateModal && (
+          <DuplicateAppModal
+            appName={appDetail.name}
+            icon={appDetail.icon}
+            icon_background={appDetail.icon_background}
+            show={showDuplicateModal}
+            onConfirm={onCopy}
+            onHide={() => setShowDuplicateModal(false)}
+          />
+        )}
+        {showConfirmDelete && (
+          <Confirm
+            title={t('app.deleteAppConfirmTitle')}
+            content={t('app.deleteAppConfirmContent')}
+            isShow={showConfirmDelete}
+            onClose={() => setShowConfirmDelete(false)}
+            onConfirm={onConfirmDelete}
+            onCancel={() => setShowConfirmDelete(false)}
+          />
+        )}
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(AppInfo)

web/app/components/app-sidebar/basic.tsx

@@ -58,7 +58,7 @@ const ICON_MAP = {
 
 export default function AppBasic({ icon, icon_background, name, type, hoverTip, textStyle, mode = 'expand', iconType = 'app' }: IAppBasicProps) {
   return (
-    <div className="flex items-start">
+    <div className="flex items-start p-1">
       {icon && icon_background && iconType === 'app' && (
         <div className='flex-shrink-0 mr-3'>
           <AppIcon icon={icon} background={icon_background} />

web/app/components/app-sidebar/index.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import NavLink from './navLink'
 import type { NavIcon } from './navLink'
 import AppBasic from './basic'
+import AppInfo from './app-info'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import {
   AlignLeft01,
   AlignRight01,
 } from '@/app/components/base/icons/src/vender/line/layout'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { APP_SIDEBAR_SHOULD_COLLAPSE } from '@/app/components/app/configuration/debug/types'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 export type IAppDetailNavProps = {
   iconType?: 'app' | 'dataset' | 'notion'
@@ -26,28 +26,22 @@ export type IAppDetailNavProps = {
 }
 
 const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
-  const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
+  const { appSidebarExpand, setAppSiderbarExpand } = useAppStore()
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
-  const mode = isMobile ? 'collapse' : 'expand'
-  const [modeState, setModeState] = useState(isMobile ? mode : localeMode)
+  const [modeState, setModeState] = useState(appSidebarExpand)
   const expand = modeState === 'expand'
 
-  const handleToggle = useCallback(() => {
-    setModeState((prev) => {
-      const next = prev === 'expand' ? 'collapse' : 'expand'
-      localStorage.setItem('app-detail-collapse-or-expand', next)
-      return next
-    })
-  }, [])
+  const handleToggle = (state: string) => {
+    setAppSiderbarExpand(state === 'expand' ? 'collapse' : 'expand')
+  }
 
-  const { eventEmitter } = useEventEmitterContextContext()
-  eventEmitter?.useSubscription((v: any) => {
-    if (v.type === APP_SIDEBAR_SHOULD_COLLAPSE) {
-      setModeState('collapse')
-      localStorage.setItem('app-detail-collapse-or-expand', 'collapse')
+  useEffect(() => {
+    if (appSidebarExpand) {
+      localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand)
+      setModeState(appSidebarExpand)
     }
-  })
+  }, [appSidebarExpand])
 
   return (
     <div
@@ -59,18 +53,26 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
       <div
         className={`
           shrink-0
-          ${expand ? 'p-4' : 'p-2'}
+          ${expand ? 'p-3' : 'p-2'}
         `}
       >
-        <AppBasic
-          mode={modeState}
-          iconType={iconType}
-          icon={icon}
-          icon_background={icon_background}
-          name={title}
-          type={desc}
-        />
+        {iconType === 'app' && (
+          <AppInfo expand={expand}/>
+        )}
+        {iconType !== 'app' && (
+          <AppBasic
+            mode={modeState}
+            iconType={iconType}
+            icon={icon}
+            icon_background={icon_background}
+            name={title}
+            type={desc}
+          />
+        )}
       </div>
+      {!expand && (
+        <div className='mt-1 mx-auto w-6 h-[1px] bg-gray-100'/>
+      )}
       <nav
         className={`
           grow space-y-1 bg-white
@@ -94,7 +96,7 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
           >
             <div
               className='flex items-center justify-center w-6 h-6 text-gray-500 cursor-pointer'
-              onClick={handleToggle}
+              onClick={() => handleToggle(modeState)}
             >
               {
                 expand

web/app/components/app-sidebar/style.module.css

@@ -1,3 +1,11 @@
 .sidebar {
     border-right: 1px solid #F3F4F6;
+}
+
+.completionPic {
+background-image: url('./completion.png')
+}
+  
+.expertPic {
+background-image: url('./expert.png')
 }