From 4c5ab8ca328d3e484dd46cda6f7b256418a07594 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 7 Mar 2025 17:49:51 +0800
Subject: [PATCH] feat: enhance workflow header with version display and
 publish status

---
 web/app/components/workflow/header/index.tsx  |  6 ---
 .../workflow/header/restoring-title.tsx       | 42 +++++++++++++++----
 web/types/workflow.ts                         |  5 +++
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/web/app/components/workflow/header/index.tsx b/web/app/components/workflow/header/index.tsx
index e80743a015..f2bcfc8f92 100644
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@@ -52,7 +52,6 @@ const Header: FC = () => {
   const workflowStore = useWorkflowStore()
   const appDetail = useAppStore(s => s.appDetail)
   const setAppDetail = useAppStore(s => s.setAppDetail)
-  const appSidebarExpand = useAppStore(s => s.appSidebarExpand)
   const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
   const appID = appDetail?.id
   const isChatMode = useIsChatMode()
@@ -210,11 +209,6 @@ const Header: FC = () => {
       className='absolute top-0 left-0 z-10 flex items-center justify-between w-full px-3 h-14 bg-mask-top2bottom-gray-50-to-transparent'
     >
       <div>
-        {
-          appSidebarExpand === 'collapse' && (
-            <div className='system-xs-regular text-text-tertiary'>{appDetail?.name}</div>
-          )
-        }
         {
           normal && <EditingTitle />
         }
diff --git a/web/app/components/workflow/header/restoring-title.tsx b/web/app/components/workflow/header/restoring-title.tsx
index 344e5e2754..ac8111739f 100644
--- a/web/app/components/workflow/header/restoring-title.tsx
+++ b/web/app/components/workflow/header/restoring-title.tsx
@@ -1,19 +1,47 @@
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useWorkflow } from '../hooks'
 import { useStore } from '../store'
-import { ClockRefresh } from '@/app/components/base/icons/src/vender/line/time'
+import { WorkflowVersion } from '../types'
+import useTimestamp from '@/hooks/use-timestamp'
 
 const RestoringTitle = () => {
   const { t } = useTranslation()
   const { formatTimeFromNow } = useWorkflow()
-  const publishedAt = useStore(state => state.publishedAt)
+  const { formatTime } = useTimestamp()
+  const currentVersion = useStore(state => state.currentVersion)
+  const isDraft = currentVersion?.version === WorkflowVersion.Draft
+  const publishStatus = isDraft ? t('workflow.common.unpublished') : t('workflow.common.published')
+
+  const versionName = useMemo(() => {
+    if (isDraft)
+      return t('workflow.versionHistory.currentDraft')
+    return currentVersion?.marked_name || t('workflow.versionHistory.defaultName')
+  }, [currentVersion, t, isDraft])
 
   return (
-    <div className='flex items-center h-[18px] text-xs text-gray-500'>
-      <ClockRefresh className='mr-1 w-3 h-3 text-gray-500' />
-      {t('workflow.common.latestPublished')}<span> </span>
-      {formatTimeFromNow(publishedAt)}
+    <div className='flex flex-col gap-y-0.5'>
+      <div className='flex items-center gap-x-1'>
+        <span className='text-text-primary system-sm-semibold'>
+          {versionName}
+        </span>
+        <span className='px-1 py-0.5 rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm text-text-accent-secondary system-2xs-medium-uppercase'>
+          {t('workflow.common.viewOnly')}
+        </span>
+      </div>
+      <div className='flex items-center gap-x-1 h-4 text-text-tertiary system-xs-regular'>
+        {
+          currentVersion && (
+            <>
+              <span>{publishStatus}</span>
+              <span>·</span>
+              <span>{`${formatTimeFromNow(currentVersion.created_at * 1000)} ${formatTime(currentVersion.created_at, 'HH:mm:ss')}`}</span>
+              <span>·</span>
+              <span>{currentVersion?.created_by?.name || ''}</span>
+            </>
+          )
+        }
+      </div>
     </div>
   )
 }
diff --git a/web/types/workflow.ts b/web/types/workflow.ts
index 1c1a3b7963..b2d1a30a31 100644
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@@ -111,6 +111,11 @@ export type FetchWorkflowDraftResponse = {
   }
   hash: string
   updated_at: number
+  updated_by: {
+    id: string
+    name: string
+    email: string
+  },
   tool_published: boolean
   environment_variables?: EnvironmentVariable[]
   conversation_variables?: ConversationVariable[]