feat: version tag (#14949)

2025-12-11 03:46:52 +08:00 · 2025-03-07 18:10:40 +08:00
parent 4aaf07d62a
commit 3ca1373274
41 changed files with 1695 additions and 423 deletions
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@@ -4,10 +4,10 @@ import {
  useCallback,
  useMemo,
 } from 'react'
-import { RiApps2AddLine } from '@remixicon/react'
+import { RiApps2AddLine, RiHistoryLine } from '@remixicon/react'
 import { useNodes } from 'reactflow'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
+import { useContext, useContextSelector } from 'use-context-selector'
 import {
  useStore,
  useWorkflowStore,
@@ -15,6 +15,7 @@ import {
 import {
  BlockEnum,
  InputVarType,
+  WorkflowVersion,
 } from '../types'
 import type { StartNodeType } from '../nodes/start/types'
 import {
@@ -27,7 +28,7 @@ import {
  useWorkflowRun,
 } from '../hooks'
 import AppPublisher from '../../app/app-publisher'
-import { ToastContext } from '../../base/toast'
+import Toast, { ToastContext } from '../../base/toast'
 import Divider from '../../base/divider'
 import RunAndHistory from './run-and-history'
 import EditingTitle from './editing-title'
@@ -36,18 +37,22 @@ import RestoringTitle from './restoring-title'
 import ViewHistory from './view-history'
 import ChatVariableButton from './chat-variable-button'
 import EnvButton from './env-button'
-import VersionHistoryModal from './version-history-modal'
+import VersionHistoryButton from './version-history-button'
 import Button from '@/app/components/base/button'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { publishWorkflow } from '@/service/workflow'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useFeatures } from '@/app/components/base/features/hooks'
+import { usePublishWorkflow, useResetWorkflowVersionHistory } from '@/service/use-workflow'
+import type { PublishWorkflowParams } from '@/types/workflow'
+import { fetchAppDetail, fetchAppSSO } from '@/service/apps'
+import AppContext from '@/context/app-context'

 const Header: FC = () => {
  const { t } = useTranslation()
  const workflowStore = useWorkflowStore()
  const appDetail = useAppStore(s => s.appDetail)
-  const appSidebarExpand = useAppStore(s => s.appSidebarExpand)
+  const setAppDetail = useAppStore(s => s.setAppDetail)
+  const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
  const appID = appDetail?.id
  const isChatMode = useIsChatMode()
  const { nodesReadOnly, getNodesReadOnly } = useNodesReadOnly()
@@ -55,6 +60,10 @@ const Header: FC = () => {
  const publishedAt = useStore(s => s.publishedAt)
  const draftUpdatedAt = useStore(s => s.draftUpdatedAt)
  const toolPublished = useStore(s => s.toolPublished)
+  const currentVersion = useStore(s => s.currentVersion)
+  const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
+  const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
  const nodes = useNodes<StartNodeType>()
  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
  const selectedNode = nodes.find(node => node.data.selected)
@@ -104,27 +113,70 @@ const Header: FC = () => {
  const handleCancelRestore = useCallback(() => {
    handleLoadBackupDraft()
    workflowStore.setState({ isRestoring: false })
-  }, [workflowStore, handleLoadBackupDraft])
+    setShowWorkflowVersionHistoryPanel(false)
+  }, [workflowStore, handleLoadBackupDraft, setShowWorkflowVersionHistoryPanel])
+
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)

  const handleRestore = useCallback(() => {
+    setShowWorkflowVersionHistoryPanel(false)
    workflowStore.setState({ isRestoring: false })
    workflowStore.setState({ backupDraft: undefined })
-    handleSyncWorkflowDraft(true)
-  }, [handleSyncWorkflowDraft, workflowStore])
+    handleSyncWorkflowDraft(true, false, {
+      onSuccess: () => {
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.restoreSuccess'),
+        })
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.restoreFailure'),
+        })
+      },
+      onSettled: () => {
+        resetWorkflowVersionHistory()
+      },
+    })
+  }, [handleSyncWorkflowDraft, workflowStore, setShowWorkflowVersionHistoryPanel, resetWorkflowVersionHistory, t])

-  const onPublish = useCallback(async () => {
+  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 (handleCheckBeforePublish()) {
-      const res = await publishWorkflow(`/apps/${appID}/workflows/publish`)
+      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')
    }
-  }, [appID, handleCheckBeforePublish, notify, t, workflowStore])
+  }, [handleCheckBeforePublish, notify, t, workflowStore, publishWorkflow, resetWorkflowVersionHistory, updateAppDetail])

  const onStartRestoring = useCallback(() => {
    workflowStore.setState({ isRestoring: true })
@@ -132,7 +184,11 @@ const Header: FC = () => {
    // clear right panel
    if (selectedNode)
      handleNodeSelect(selectedNode.id, true)
-  }, [handleBackupDraft, workflowStore, handleNodeSelect, selectedNode])
+    setShowWorkflowVersionHistoryPanel(true)
+    setShowEnvPanel(false)
+    setShowDebugAndPreviewPanel(false)
+  }, [handleBackupDraft, workflowStore, handleNodeSelect, selectedNode,
+    setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel])

  const onPublisherToggle = useCallback((state: boolean) => {
    if (state)
@@ -153,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 />
        }
@@ -189,11 +240,11 @@ const Header: FC = () => {
                inputs: variables,
                onRefreshData: handleToolConfigureUpdate,
                onPublish,
-                onRestore: onStartRestoring,
                onToggle: onPublisherToggle,
                crossAxisOffset: 4,
              }}
            />
+            <VersionHistoryButton onClick={onStartRestoring} />
          </div>
        )
      }
@@ -214,27 +265,23 @@ const Header: FC = () => {
      }
      {
        restoring && (
-          <div className='flex flex-col mt-auto'>
-            <div className='flex items-center justify-end my-4'>
-              <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
-                <RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
-                {t('workflow.common.features')}
-              </Button>
-              <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
-              <Button
-                className='mr-2'
-                onClick={handleCancelRestore}
-              >
-                {t('common.operation.cancel')}
-              </Button>
-              <Button
-                onClick={handleRestore}
-                variant='primary'
-              >
-                {t('workflow.common.restore')}
-              </Button>
-            </div>
-            <VersionHistoryModal />
+          <div className='flex justify-end items-center gap-x-2'>
+            <Button
+              onClick={handleRestore}
+              disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
+              variant='primary'
+            >
+              {t('workflow.common.restore')}
+            </Button>
+            <Button
+              className='text-components-button-secondary-accent-text'
+              onClick={handleCancelRestore}
+            >
+              <div className='flex items-center gap-x-0.5'>
+                <RiHistoryLine className='w-4 h-4' />
+                <span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
+              </div>
+            </Button>
          </div>
        )
      }
--- 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((isDraft ? currentVersion.updated_at : currentVersion.created_at) * 1000)} ${formatTime(currentVersion.created_at, 'HH:mm:ss')}`}</span>
+              <span>·</span>
+              <span>{currentVersion?.created_by?.name || ''}</span>
+            </>
+          )
+        }
+      </div>
    </div>
  )
 }
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -0,0 +1,66 @@
+import React, { type FC, useCallback } from 'react'
+import { RiHistoryLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useKeyPress } from 'ahooks'
+import Button from '../../base/button'
+import Tooltip from '../../base/tooltip'
+import { getKeyboardKeyCodeBySystem } from '../utils'
+
+type VersionHistoryButtonProps = {
+  onClick: () => Promise<unknown> | unknown
+}
+
+const VERSION_HISTORY_SHORTCUT = ['⌘', '⇧', 'H']
+
+const PopupContent = React.memo(() => {
+  const { t } = useTranslation()
+  return (
+    <div className='flex items-center gap-x-1'>
+      <div className='text-text-secondary system-xs-medium px-0.5'>
+        {t('workflow.common.versionHistory')}
+      </div>
+      <div className='flex items-center gap-x-0.5'>
+        {VERSION_HISTORY_SHORTCUT.map(key => (
+          <span
+            key={key}
+            className='rounded-[4px] bg-components-kbd-bg-white text-text-tertiary system-kbd px-[1px]'
+          >
+            {key}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+})
+
+PopupContent.displayName = 'PopupContent'
+
+const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
+  onClick,
+}) => {
+  const handleViewVersionHistory = useCallback(async () => {
+    await onClick?.()
+  }, [onClick])
+
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.h`, (e) => {
+    e.preventDefault()
+    handleViewVersionHistory()
+  }
+  , { exactMatch: true, useCapture: true })
+
+  return <Tooltip
+    popupContent={<PopupContent />}
+    noDecoration
+    popupClassName='rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg
+    shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px] p-1.5'
+  >
+    <Button
+      className={'p-2'}
+      onClick={handleViewVersionHistory}
+    >
+      <RiHistoryLine className='w-4 h-4 text-components-button-secondary-text' />
+    </Button>
+  </Tooltip>
+}
+
+export default VersionHistoryButton
--- a/web/app/components/workflow/header/version-history-item.tsx
+++ b/web/app/components/workflow/header/version-history-item.tsx
@@ -1,66 +0,0 @@
-import React from 'react'
-import dayjs from 'dayjs'
-import { useTranslation } from 'react-i18next'
-import { WorkflowVersion } from '../types'
-import cn from '@/utils/classnames'
-import type { VersionHistory } from '@/types/workflow'
-
-type VersionHistoryItemProps = {
-  item: VersionHistory
-  selectedVersion: string
-  onClick: (item: VersionHistory) => void
-  curIdx: number
-  page: number
-}
-
-const formatVersion = (version: string, curIdx: number, page: number): string => {
-  if (curIdx === 0 && page === 1)
-    return WorkflowVersion.Draft
-  if (curIdx === 1 && page === 1)
-    return WorkflowVersion.Latest
-  try {
-    const date = new Date(version)
-    if (isNaN(date.getTime()))
-      return version
-
-    // format as YYYY-MM-DD HH:mm:ss
-    return date.toISOString().slice(0, 19).replace('T', ' ')
-  }
-  catch {
-    return version
-  }
-}
-
-const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({ item, selectedVersion, onClick, curIdx, page }) => {
-  const { t } = useTranslation()
-  const formatTime = (time: number) => dayjs.unix(time).format('YYYY-MM-DD HH:mm:ss')
-  const formattedVersion = formatVersion(item.version, curIdx, page)
-  const renderVersionLabel = (version: string) => (
-    (version === WorkflowVersion.Draft || version === WorkflowVersion.Latest)
-      ? (
-        <div className="shrink-0 px-1 border bg-white border-[rgba(0,0,0,0.08)] rounded-[5px] truncate">
-          {version}
-        </div>
-      )
-      : null
-  )
-
-  return (
-    <div
-      className={cn(
-        'flex items-center p-2 h-12 text-xs font-medium text-gray-700 justify-between',
-        formattedVersion === selectedVersion ? '' : 'hover:bg-gray-100',
-        formattedVersion === WorkflowVersion.Draft ? 'cursor-not-allowed' : 'cursor-pointer',
-      )}
-      onClick={() => item.version !== WorkflowVersion.Draft && onClick(item)}
-    >
-      <div className='flex flex-col gap-1 py-2'>
-        <span className="text-left">{formatTime(formattedVersion === WorkflowVersion.Draft ? item.updated_at : item.created_at)}</span>
-        <span className="text-left">{t('workflow.panel.createdBy')}  {item.created_by.name}</span>
-      </div>
-      {renderVersionLabel(formattedVersion)}
-    </div>
-  )
-}
-
-export default React.memo(VersionHistoryItem)
--- a/web/app/components/workflow/header/version-history-modal.tsx
+++ b/web/app/components/workflow/header/version-history-modal.tsx
@@ -1,89 +0,0 @@
-'use client'
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
-import { useWorkflowRun } from '../hooks'
-import VersionHistoryItem from './version-history-item'
-import type { VersionHistory } from '@/types/workflow'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import { fetchPublishedAllWorkflow } from '@/service/workflow'
-import Loading from '@/app/components/base/loading'
-import Button from '@/app/components/base/button'
-
-const limit = 10
-
-const VersionHistoryModal = () => {
-  const [selectedVersion, setSelectedVersion] = useState('draft')
-  const [page, setPage] = useState(1)
-  const { handleRestoreFromPublishedWorkflow } = useWorkflowRun()
-  const appDetail = useAppStore.getState().appDetail
-  const { t } = useTranslation()
-  const {
-    data: versionHistory,
-    isLoading,
-  } = useSWR(
-    `/apps/${appDetail?.id}/workflows?page=${page}&limit=${limit}`,
-    fetchPublishedAllWorkflow,
-  )
-
-  const handleVersionClick = (item: VersionHistory) => {
-    if (item.version !== selectedVersion) {
-      setSelectedVersion(item.version)
-      handleRestoreFromPublishedWorkflow(item)
-    }
-  }
-
-  const handleNextPage = () => {
-    if (versionHistory?.has_more)
-      setPage(page => page + 1)
-  }
-
-  return (
-    <div className='w-[336px] bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-xl p-2'>
-      <div className="max-h-[400px] overflow-auto">
-        {(isLoading && page) === 1
-          ? (
-            <div className='flex items-center justify-center h-10'>
-              <Loading/>
-            </div>
-          )
-          : (
-            <>
-              {versionHistory?.items?.map((item, idx) => (
-                <VersionHistoryItem
-                  key={item.version}
-                  item={item}
-                  selectedVersion={selectedVersion}
-                  onClick={handleVersionClick}
-                  curIdx={idx}
-                  page={page}
-                />
-              ))}
-              {isLoading && page > 1 && (
-                <div className='flex items-center justify-center h-10'>
-                  <Loading/>
-                </div>
-              )}
-              {!isLoading && versionHistory?.has_more && (
-                <div className='flex items-center justify-center h-10 mt-2'>
-                  <Button
-                    className='text-sm'
-                    onClick={handleNextPage}
-                  >
-                    {t('workflow.common.loadMore')}
-                  </Button>
-                </div>
-              )}
-              {!isLoading && !versionHistory?.items?.length && (
-                <div className='flex items-center justify-center h-10 text-gray-500'>
-                  {t('workflow.common.noHistory')}
-                </div>
-              )}
-            </>
-          )}
-      </div>
-    </div>
-  )
-}
-
-export default React.memo(VersionHistoryModal)
--- a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
@@ -105,7 +105,14 @@ export const useNodesSyncDraft = () => {
    }
  }, [getPostParams, params.appId, getNodesReadOnly])

-  const doSyncWorkflowDraft = useCallback(async (notRefreshWhenSyncError?: boolean) => {
+  const doSyncWorkflowDraft = useCallback(async (
+    notRefreshWhenSyncError?: boolean,
+    callback?: {
+      onSuccess?: () => void
+      onError?: () => void
+      onSettled?: () => void
+    },
+  ) => {
    if (getNodesReadOnly())
      return
    const postParams = getPostParams()
@@ -119,6 +126,7 @@ export const useNodesSyncDraft = () => {
        const res = await syncWorkflowDraft(postParams)
        setSyncWorkflowDraftHash(res.hash)
        setDraftUpdatedAt(res.updated_at)
+        callback?.onSuccess && callback.onSuccess()
      }
      catch (error: any) {
        if (error && error.json && !error.bodyUsed) {
@@ -127,16 +135,28 @@ export const useNodesSyncDraft = () => {
              handleRefreshWorkflowDraft()
          })
        }
+        callback?.onError && callback.onError()
+      }
+      finally {
+        callback?.onSettled && callback.onSettled()
      }
    }
  }, [workflowStore, getPostParams, getNodesReadOnly, handleRefreshWorkflowDraft])

-  const handleSyncWorkflowDraft = useCallback((sync?: boolean, notRefreshWhenSyncError?: boolean) => {
+  const handleSyncWorkflowDraft = useCallback((
+    sync?: boolean,
+    notRefreshWhenSyncError?: boolean,
+    callback?: {
+      onSuccess?: () => void
+      onError?: () => void
+      onSettled?: () => void
+    },
+  ) => {
    if (getNodesReadOnly())
      return

    if (sync)
-      doSyncWorkflowDraft(notRefreshWhenSyncError)
+      doSyncWorkflowDraft(notRefreshWhenSyncError, callback)
    else
      debouncedSyncWorkflowDraft(doSyncWorkflowDraft)
  }, [debouncedSyncWorkflowDraft, doSyncWorkflowDraft, getNodesReadOnly])
--- a/web/app/components/workflow/nodes/_base/components/info-panel.tsx
+++ b/web/app/components/workflow/nodes/_base/components/info-panel.tsx
@@ -13,7 +13,7 @@ const InfoPanel: FC<Props> = ({
 }) => {
  return (
    <div>
-      <div className='px-[5px] py-[3px] bg-workflow-block-parma-bg rounded-md'>
+      <div className='flex flex-col gap-y-0.5 px-[5px] py-[3px] bg-workflow-block-parma-bg rounded-md'>
        <div className='text-text-secondary system-2xs-semibold-uppercase uppercase'>
          {title}
        </div>
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -15,6 +15,7 @@ import ChatRecord from './chat-record'
 import ChatVariablePanel from './chat-variable-panel'
 import EnvPanel from './env-panel'
 import GlobalVariablePanel from './global-variable-panel'
+import VersionHistoryPanel from './version-history-panel'
 import cn from '@/utils/classnames'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import MessageLogModal from '@/app/components/base/message-log-modal'
@@ -28,6 +29,7 @@ const Panel: FC = () => {
  const showEnvPanel = useStore(s => s.showEnvPanel)
  const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
  const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
+  const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
  const isRestoring = useStore(s => s.isRestoring)
  const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, currentLogModalActiveTab } = useAppStore(useShallow(state => ({
    currentLogItem: state.currentLogItem,
@@ -97,6 +99,11 @@ const Panel: FC = () => {
          <GlobalVariablePanel />
        )
      }
+      {
+        showWorkflowVersionHistoryPanel && (
+          <VersionHistoryPanel/>
+        )
+      }
    </div>
  )
 }
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
@@ -0,0 +1,84 @@
+import React, { type FC, useCallback } from 'react'
+import { RiMoreFill } from '@remixicon/react'
+import { VersionHistoryContextMenuOptions } from '../../../types'
+import MenuItem from './menu-item'
+import useContextMenu from './use-context-menu'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Button from '@/app/components/base/button'
+import Divider from '@/app/components/base/divider'
+
+export type ContextMenuProps = {
+  isShowDelete: boolean
+  isNamedVersion: boolean
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  handleClickMenuItem: (operation: VersionHistoryContextMenuOptions) => void
+}
+
+const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
+  const { isShowDelete, handleClickMenuItem, open, setOpen } = props
+  const {
+    deleteOperation,
+    options,
+  } = useContextMenu(props)
+
+  const handleClickTrigger = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    setOpen(v => !v)
+  }, [setOpen])
+
+  return (
+    <PortalToFollowElem
+      placement={'bottom-end'}
+      offset={{
+        mainAxis: 4,
+        crossAxis: 0,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger>
+        <Button size='small' className='px-1' onClick={handleClickTrigger}>
+          <RiMoreFill className='w-4 h-4' />
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-10'>
+        <div className='flex flex-col w-[184px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+          <div className='flex flex-col p-1'>
+            {
+              options.map((option) => {
+                return (
+                  <MenuItem
+                    key={option.key}
+                    item={option}
+                    onClick={handleClickMenuItem.bind(null, option.key)}
+                  />
+                )
+              })
+            }
+          </div>
+          {
+            isShowDelete && (
+              <>
+                <Divider type='horizontal' className='h-[1px] bg-divider-subtle my-0' />
+                <div className='p-1'>
+                  <MenuItem
+                    item={deleteOperation}
+                    isDestructive
+                    onClick={handleClickMenuItem.bind(null, VersionHistoryContextMenuOptions.delete)}
+                  />
+                </div>
+              </>
+            )
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(ContextMenu)
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
@@ -0,0 +1,39 @@
+import React, { type FC } from 'react'
+import type { VersionHistoryContextMenuOptions } from '../../../types'
+import cn from '@/utils/classnames'
+
+type MenuItemProps = {
+  item: {
+    key: VersionHistoryContextMenuOptions
+    name: string
+  }
+  onClick: (operation: VersionHistoryContextMenuOptions) => void
+  isDestructive?: boolean
+}
+
+const MenuItem: FC<MenuItemProps> = ({
+  item,
+  onClick,
+  isDestructive = false,
+}) => {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between px-2 py-1.5 cursor-pointer rounded-lg ',
+        isDestructive ? 'hover:bg-state-destructive-hover' : 'hover:bg-state-base-hover',
+      )}
+      onClick={() => {
+        onClick(item.key)
+      }}
+    >
+      <div className={cn(
+        'flex-1 text-text-primary system-md-regular',
+        isDestructive && 'hover:text-text-destructive',
+      )}>
+        {item.name}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(MenuItem)
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/use-context-menu.ts
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/use-context-menu.ts
@@ -0,0 +1,42 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { VersionHistoryContextMenuOptions } from '../../../types'
+import type { ContextMenuProps } from './index'
+
+const useContextMenu = (props: ContextMenuProps) => {
+  const {
+    isNamedVersion,
+  } = props
+  const { t } = useTranslation()
+
+  const deleteOperation = {
+    key: VersionHistoryContextMenuOptions.delete,
+    name: t('common.operation.delete'),
+  }
+
+  const options = useMemo(() => {
+    return [
+      {
+        key: VersionHistoryContextMenuOptions.restore,
+        name: t('workflow.common.restore'),
+      },
+      isNamedVersion
+        ? {
+          key: VersionHistoryContextMenuOptions.edit,
+          name: t('workflow.versionHistory.editVersionInfo'),
+        }
+        : {
+          key: VersionHistoryContextMenuOptions.edit,
+          name: t('workflow.versionHistory.nameThisVersion'),
+        },
+    ]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isNamedVersion])
+
+  return {
+    deleteOperation,
+    options,
+  }
+}
+
+export default useContextMenu
--- a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
@@ -0,0 +1,42 @@
+import React, { type FC } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { VersionHistory } from '@/types/workflow'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+type DeleteConfirmModalProps = {
+  isOpen: boolean
+  versionInfo: VersionHistory
+  onClose: () => void
+  onDelete: (id: string) => void
+}
+
+const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
+  isOpen,
+  versionInfo,
+  onClose,
+  onDelete,
+}) => {
+  const { t } = useTranslation()
+
+  return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
+    <div className='flex flex-col gap-y-2 p-6 pb-4 '>
+      <div className='text-text-primary title-2xl-semi-bold'>
+        {`${t('common.operation.delete')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
+      </div>
+      <p className='text-text-secondary system-md-regular'>
+        {t('workflow.versionHistory.deletionTip')}
+      </p>
+    </div>
+    <div className='flex items-center justify-end gap-x-2 p-6'>
+      <Button onClick={onClose}>
+        {t('common.operation.cancel')}
+      </Button>
+      <Button variant='warning' onClick={onDelete.bind(null, versionInfo.id)}>
+        {t('common.operation.delete')}
+      </Button>
+    </div>
+  </Modal>
+}
+
+export default DeleteConfirmModal
--- a/web/app/components/workflow/panel/version-history-panel/empty.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/empty.tsx
@@ -0,0 +1,30 @@
+import Button from '@/app/components/base/button'
+import { RiHistoryLine } from '@remixicon/react'
+import React, { type FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type EmptyProps = {
+  onResetFilter: () => void
+}
+
+const Empty: FC<EmptyProps> = ({
+  onResetFilter,
+}) => {
+  const { t } = useTranslation()
+
+  return <div className='h-5/6 w-full flex flex-col justify-center gap-y-2'>
+    <div className='flex justify-center'>
+      <RiHistoryLine className='w-10 h-10 text-text-empty-state-icon' />
+    </div>
+    <div className='flex justify-center text-text-tertiary system-xs-regular'>
+      {t('workflow.versionHistory.filter.empty')}
+    </div>
+    <div className='flex justify-center'>
+      <Button size='small' onClick={onResetFilter}>
+        {t('workflow.versionHistory.filter.reset')}
+      </Button>
+    </div>
+  </div>
+}
+
+export default React.memo(Empty)
--- a/web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/filter-item.tsx
@@ -0,0 +1,32 @@
+import { RiCheckLine } from '@remixicon/react'
+import React, { type FC } from 'react'
+import type { WorkflowVersionFilterOptions } from '../../../types'
+
+type FilterItemProps = {
+  item: {
+    key: WorkflowVersionFilterOptions
+    name: string
+  }
+  isSelected?: boolean
+  onClick: (value: WorkflowVersionFilterOptions) => void
+}
+
+const FilterItem: FC<FilterItemProps> = ({
+  item,
+  isSelected = false,
+  onClick,
+}) => {
+  return (
+    <div
+      className='flex items-center justify-between gap-x-1 px-2 py-1.5 cursor-pointer rounded-lg hover:bg-state-base-hover'
+      onClick={() => {
+        onClick(item.key)
+      }}
+    >
+      <div className='flex-1 text-text-primary system-md-regular'>{item.name}</div>
+      {isSelected && <RiCheckLine className='w-4 h-4 text-text-accent shrink-0' />}
+    </div>
+  )
+}
+
+export default React.memo(FilterItem)
--- a/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx
@@ -0,0 +1,33 @@
+import React, { type FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Switch from '@/app/components/base/switch'
+
+type FilterSwitchProps = {
+  enabled: boolean
+  handleSwitch: (value: boolean) => void
+}
+
+const FilterSwitch: FC<FilterSwitchProps> = ({
+  enabled,
+  handleSwitch,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center p-1'>
+      <div className='flex items-center gap-x-1 w-full px-2 py-1.5'>
+        <div className='flex-1 px-1 text-text-secondary system-md-regular'>
+          {t('workflow.versionHistory.filter.onlyShowNamedVersions')}
+        </div>
+        <Switch
+          defaultValue={enabled}
+          onChange={v => handleSwitch(v)}
+          size='md'
+          className='shrink-0'
+        />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(FilterSwitch)
--- a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
@@ -0,0 +1,81 @@
+import React, { type FC, useCallback, useState } from 'react'
+import { RiFilter3Line } from '@remixicon/react'
+import { WorkflowVersionFilterOptions } from '../../../types'
+import { useFilterOptions } from './use-filter'
+import FilterItem from './filter-item'
+import FilterSwitch from './filter-switch'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Divider from '@/app/components/base/divider'
+import cn from '@/utils/classnames'
+
+type FilterProps = {
+  filterValue: WorkflowVersionFilterOptions
+  isOnlyShowNamedVersions: boolean
+  onClickFilterItem: (filter: WorkflowVersionFilterOptions) => void
+  handleSwitch: (isOnlyShowNamedVersions: boolean) => void
+}
+
+const Filter: FC<FilterProps> = ({
+  filterValue,
+  isOnlyShowNamedVersions,
+  onClickFilterItem,
+  handleSwitch,
+}) => {
+  const [open, setOpen] = useState(false)
+  const options = useFilterOptions()
+
+  const handleOnClick = useCallback((value: WorkflowVersionFilterOptions) => {
+    onClickFilterItem(value)
+  }, [onClickFilterItem])
+
+  const isFiltering = filterValue !== WorkflowVersionFilterOptions.all || isOnlyShowNamedVersions
+
+  return (
+    <PortalToFollowElem
+      placement={'bottom-end'}
+      offset={{
+        mainAxis: 4,
+        crossAxis: 55,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div
+          className={cn(
+            'flex items-center justify-center w-6 h-6 p-0.5 cursor-pointer rounded-md',
+            isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
+          )}
+        >
+          <RiFilter3Line className={cn('w-4 h-4', isFiltering ? 'text-text-accent' : ' text-text-tertiary')} />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[12]'>
+        <div className='flex flex-col w-[248px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+          <div className='flex flex-col p-1'>
+            {
+              options.map((option) => {
+                return (
+                  <FilterItem
+                    key={option.key}
+                    item={option}
+                    isSelected={filterValue === option.key}
+                    onClick={handleOnClick}
+                  />
+                )
+              })
+            }
+          </div>
+          <Divider type='horizontal' className='h-[1px] bg-divider-subtle my-0' />
+          <FilterSwitch enabled={isOnlyShowNamedVersions} handleSwitch={handleSwitch} />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default Filter
--- a/web/app/components/workflow/panel/version-history-panel/filter/use-filter.ts
+++ b/web/app/components/workflow/panel/version-history-panel/filter/use-filter.ts
@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next'
+import { WorkflowVersionFilterOptions } from '../../../types'
+
+export const useFilterOptions = () => {
+  const { t } = useTranslation()
+
+  return [
+    {
+      key: WorkflowVersionFilterOptions.all,
+      name: t('workflow.versionHistory.filter.all'),
+    },
+    {
+      key: WorkflowVersionFilterOptions.onlyYours,
+      name: t('workflow.versionHistory.filter.onlyYours'),
+    },
+  ]
+}
--- a/web/app/components/workflow/panel/version-history-panel/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/index.tsx
@@ -0,0 +1,278 @@
+'use client'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownDoubleLine, RiCloseLine, RiLoader2Line } from '@remixicon/react'
+import { useNodesSyncDraft, useWorkflowRun } from '../../hooks'
+import { useStore, useWorkflowStore } from '../../store'
+import { VersionHistoryContextMenuOptions, WorkflowVersionFilterOptions } from '../../types'
+import VersionHistoryItem from './version-history-item'
+import Filter from './filter'
+import type { VersionHistory } from '@/types/workflow'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { useDeleteWorkflow, useResetWorkflowVersionHistory, useUpdateWorkflow, useWorkflowVersionHistory } from '@/service/use-workflow'
+import Divider from '@/app/components/base/divider'
+import Loading from './loading'
+import Empty from './empty'
+import { useSelector as useAppContextSelector } from '@/context/app-context'
+import RestoreConfirmModal from './restore-confirm-modal'
+import DeleteConfirmModal from './delete-confirm-modal'
+import VersionInfoModal from '@/app/components/app/app-publisher/version-info-modal'
+import Toast from '@/app/components/base/toast'
+
+const HISTORY_PER_PAGE = 10
+const INITIAL_PAGE = 1
+
+const VersionHistoryPanel = () => {
+  const [filterValue, setFilterValue] = useState(WorkflowVersionFilterOptions.all)
+  const [isOnlyShowNamedVersions, setIsOnlyShowNamedVersions] = useState(false)
+  const [operatedItem, setOperatedItem] = useState<VersionHistory>()
+  const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false)
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
+  const [editModalOpen, setEditModalOpen] = useState(false)
+  const workflowStore = useWorkflowStore()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const { handleRestoreFromPublishedWorkflow, handleLoadBackupDraft } = useWorkflowRun()
+  const appDetail = useAppStore.getState().appDetail
+  const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
+  const currentVersion = useStore(s => s.currentVersion)
+  const setCurrentVersion = useStore(s => s.setCurrentVersion)
+  const userProfile = useAppContextSelector(s => s.userProfile)
+  const { t } = useTranslation()
+
+  const {
+    data: versionHistory,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+  } = useWorkflowVersionHistory({
+    appId: appDetail!.id,
+    initialPage: INITIAL_PAGE,
+    limit: HISTORY_PER_PAGE,
+    userId: filterValue === WorkflowVersionFilterOptions.onlyYours ? userProfile.id : '',
+    namedOnly: isOnlyShowNamedVersions,
+  })
+
+  const handleVersionClick = useCallback((item: VersionHistory) => {
+    if (item.id !== currentVersion?.id) {
+      setCurrentVersion(item)
+      handleRestoreFromPublishedWorkflow(item)
+    }
+  }, [currentVersion?.id, setCurrentVersion, handleRestoreFromPublishedWorkflow])
+
+  const handleNextPage = () => {
+    if (hasNextPage)
+      fetchNextPage()
+  }
+
+  const handleClose = () => {
+    handleLoadBackupDraft()
+    workflowStore.setState({ isRestoring: false })
+    setShowWorkflowVersionHistoryPanel(false)
+  }
+
+  const handleClickFilterItem = useCallback((value: WorkflowVersionFilterOptions) => {
+    setFilterValue(value)
+  }, [])
+
+  const handleSwitch = useCallback((value: boolean) => {
+    setIsOnlyShowNamedVersions(value)
+  }, [])
+
+  const handleResetFilter = useCallback(() => {
+    setFilterValue(WorkflowVersionFilterOptions.all)
+    setIsOnlyShowNamedVersions(false)
+  }, [])
+
+  const handleClickMenuItem = useCallback((item: VersionHistory, operation: VersionHistoryContextMenuOptions) => {
+    setOperatedItem(item)
+    switch (operation) {
+      case VersionHistoryContextMenuOptions.restore:
+        setRestoreConfirmOpen(true)
+        break
+      case VersionHistoryContextMenuOptions.edit:
+        setEditModalOpen(true)
+        break
+      case VersionHistoryContextMenuOptions.delete:
+        setDeleteConfirmOpen(true)
+        break
+    }
+  }, [])
+
+  const handleCancel = useCallback((operation: VersionHistoryContextMenuOptions) => {
+    switch (operation) {
+      case VersionHistoryContextMenuOptions.restore:
+        setRestoreConfirmOpen(false)
+        break
+      case VersionHistoryContextMenuOptions.edit:
+        setEditModalOpen(false)
+        break
+      case VersionHistoryContextMenuOptions.delete:
+        setDeleteConfirmOpen(false)
+        break
+    }
+  }, [])
+
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
+
+  const handleRestore = useCallback((item: VersionHistory) => {
+    setShowWorkflowVersionHistoryPanel(false)
+    handleRestoreFromPublishedWorkflow(item)
+    workflowStore.setState({ isRestoring: false })
+    workflowStore.setState({ backupDraft: undefined })
+    handleSyncWorkflowDraft(true, false, {
+      onSuccess: () => {
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.restoreSuccess'),
+        })
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.restoreFailure'),
+        })
+      },
+      onSettled: () => {
+        resetWorkflowVersionHistory()
+      },
+    })
+  }, [setShowWorkflowVersionHistoryPanel, handleSyncWorkflowDraft, workflowStore, handleRestoreFromPublishedWorkflow, resetWorkflowVersionHistory, t])
+
+  const { mutateAsync: deleteWorkflow } = useDeleteWorkflow(appDetail!.id)
+
+  const handleDelete = useCallback(async (id: string) => {
+    await deleteWorkflow(id, {
+      onSuccess: () => {
+        setDeleteConfirmOpen(false)
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.deleteSuccess'),
+        })
+        resetWorkflowVersionHistory()
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.deleteFailure'),
+        })
+      },
+      onSettled: () => {
+        setDeleteConfirmOpen(false)
+      },
+    })
+  }, [t, deleteWorkflow, resetWorkflowVersionHistory])
+
+  const { mutateAsync: updateWorkflow } = useUpdateWorkflow(appDetail!.id)
+
+  const handleUpdateWorkflow = useCallback(async (params: { id?: string, title: string, releaseNotes: string }) => {
+    const { id, ...rest } = params
+    await updateWorkflow({
+      workflowId: id!,
+      ...rest,
+    }, {
+      onSuccess: () => {
+        setEditModalOpen(false)
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.updateSuccess'),
+        })
+        resetWorkflowVersionHistory()
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.updateFailure'),
+        })
+      },
+      onSettled: () => {
+        setEditModalOpen(false)
+      },
+    })
+  }, [t, updateWorkflow, resetWorkflowVersionHistory])
+
+  return (
+    <div className='flex flex-col w-[268px] bg-components-panel-bg rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border shadow-xl shadow-shadow-shadow-5'>
+      <div className='flex items-center gap-x-2 px-4 pt-3'>
+        <div className='flex-1 py-1 text-text-primary system-xl-semibold'>{t('workflow.versionHistory.title')}</div>
+        <Filter
+          filterValue={filterValue}
+          isOnlyShowNamedVersions={isOnlyShowNamedVersions}
+          onClickFilterItem={handleClickFilterItem}
+          handleSwitch={handleSwitch}
+        />
+        <Divider type='vertical' className='h-3.5 mx-1' />
+        <div
+          className='flex items-center justify-center w-6 h-6 p-0.5 cursor-pointer'
+          onClick={handleClose}
+        >
+          <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+        </div>
+      </div>
+      <div className="flex-1 relative px-3 py-2 overflow-y-auto">
+        {(isFetching && !versionHistory?.pages?.length)
+          ? (
+            <Loading />
+          )
+          : (
+            <>
+              {versionHistory?.pages?.map((page, pageNumber) => (
+                page.items?.map((item, idx) => {
+                  const isLast = pageNumber === versionHistory.pages.length - 1 && idx === page.items.length - 1
+                  return <VersionHistoryItem
+                    key={item.id}
+                    item={item}
+                    currentVersion={currentVersion}
+                    latestVersionId={appDetail!.workflow!.id}
+                    onClick={handleVersionClick}
+                    handleClickMenuItem={handleClickMenuItem.bind(null, item)}
+                    isLast={isLast}
+                  />
+                })
+              ))}
+              {hasNextPage && (
+                <div className='flex absolute bottom-2 left-2 p-2'>
+                  <div
+                    className='flex items-center gap-x-1 cursor-pointer'
+                    onClick={handleNextPage}
+                  >
+                    <div className='flex item-center justify-center p-0.5'>
+                      {
+                        isFetching
+                          ? <RiLoader2Line className='w-3.5 h-3.5 text-text-accent animate-spin' />
+                          : <RiArrowDownDoubleLine className='w-3.5 h-3.5 text-text-accent' />}
+                    </div>
+                    <div className='py-[1px] text-text-accent system-xs-medium-uppercase'>
+                      {t('workflow.common.loadMore')}
+                    </div>
+                  </div>
+                </div>
+              )}
+              {!isFetching && (!versionHistory?.pages?.length || !versionHistory.pages[0].items.length) && (
+                <Empty onResetFilter={handleResetFilter} />
+              )}
+            </>
+          )}
+      </div>
+      {restoreConfirmOpen && (<RestoreConfirmModal
+        isOpen={restoreConfirmOpen}
+        versionInfo={operatedItem!}
+        onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.restore)}
+        onRestore={handleRestore}
+      />)}
+      {deleteConfirmOpen && (<DeleteConfirmModal
+        isOpen={deleteConfirmOpen}
+        versionInfo={operatedItem!}
+        onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.delete)}
+        onDelete={handleDelete}
+      />)}
+      {editModalOpen && (<VersionInfoModal
+        isOpen={editModalOpen}
+        versionInfo={operatedItem}
+        onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.edit)}
+        onPublish={handleUpdateWorkflow}
+      />)}
+    </div>
+  )
+}
+
+export default React.memo(VersionHistoryPanel)
--- a/web/app/components/workflow/panel/version-history-panel/loading/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/loading/index.tsx
@@ -0,0 +1,19 @@
+import Item from './item'
+
+const itemConfig = Array.from({ length: 8 }).map((_, index) => {
+  return {
+    isFirst: index === 0,
+    isLast: index === 7,
+    titleWidth: (index + 1) % 2 === 0 ? 'w-1/3' : 'w-2/5',
+    releaseNotesWidth: (index + 1) % 2 === 0 ? 'w-3/4' : 'w-4/6',
+  }
+})
+
+const Loading = () => {
+  return <div className='relative w-full overflow-y-hidden'>
+    <div className='absolute z-10 top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg' />
+    {itemConfig.map((config, index) => <Item key={index} {...config} />)}
+  </div>
+}
+
+export default Loading
--- a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
@@ -0,0 +1,40 @@
+import React, { type FC } from 'react'
+import cn from '@/utils/classnames'
+
+type ItemProps = {
+  titleWidth: string
+  releaseNotesWidth: string
+  isFirst: boolean
+  isLast: boolean
+}
+
+const Item: FC<ItemProps> = ({
+  titleWidth,
+  releaseNotesWidth,
+  isFirst,
+  isLast,
+}) => {
+  return (
+    <div className='flex gap-x-1 relative p-2' >
+      {!isLast && <div className='absolute w-0.5 h-[calc(100%-0.75rem)] left-4 top-6 bg-divider-subtle' />}
+      <div className=' flex items-center justify-center shrink-0 w-[18px] h-5'>
+        <div className='w-2 h-2 border-[2px] rounded-lg border-text-quaternary' />
+      </div>
+      <div className='flex flex-col grow gap-y-0.5'>
+        <div className='flex items-center h-3.5'>
+          <div className={cn('h-2 w-full bg-text-quaternary rounded-sm opacity-20', titleWidth)} />
+        </div>
+        {
+          !isFirst && (
+            <div className='flex items-center h-3'>
+              <div className={cn('h-1.5 w-full bg-text-quaternary rounded-sm opacity-20', releaseNotesWidth)} />
+            </div>
+          )
+        }
+      </div>
+    </div>
+
+  )
+}
+
+export default React.memo(Item)
--- a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
@@ -0,0 +1,42 @@
+import React, { type FC } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { VersionHistory } from '@/types/workflow'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+type RestoreConfirmModalProps = {
+  isOpen: boolean
+  versionInfo: VersionHistory
+  onClose: () => void
+  onRestore: (item: VersionHistory) => void
+}
+
+const RestoreConfirmModal: FC<RestoreConfirmModalProps> = ({
+  isOpen,
+  versionInfo,
+  onClose,
+  onRestore,
+}) => {
+  const { t } = useTranslation()
+
+  return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
+    <div className='flex flex-col gap-y-2 p-6 pb-4 '>
+      <div className='text-text-primary title-2xl-semi-bold'>
+        {`${t('workflow.common.restore')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
+      </div>
+      <p className='text-text-secondary system-md-regular'>
+        {t('workflow.versionHistory.restorationTip')}
+      </p>
+    </div>
+    <div className='flex items-center justify-end gap-x-2 p-6'>
+      <Button onClick={onClose}>
+        {t('common.operation.cancel')}
+      </Button>
+      <Button variant='primary' onClick={onRestore.bind(null, versionInfo)}>
+        {t('workflow.common.restore')}
+      </Button>
+    </div>
+  </Modal>
+}
+
+export default RestoreConfirmModal
--- a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react'
+import dayjs from 'dayjs'
+import { useTranslation } from 'react-i18next'
+import ContextMenu from './context-menu'
+import cn from '@/utils/classnames'
+import type { VersionHistory } from '@/types/workflow'
+import { type VersionHistoryContextMenuOptions, WorkflowVersion } from '../../types'
+
+type VersionHistoryItemProps = {
+  item: VersionHistory
+  currentVersion: VersionHistory | null
+  latestVersionId: string
+  onClick: (item: VersionHistory) => void
+  handleClickMenuItem: (operation: VersionHistoryContextMenuOptions) => void
+  isLast: boolean
+}
+
+const formatVersion = (versionHistory: VersionHistory, latestVersionId: string): string => {
+  const { version, id } = versionHistory
+  if (version === WorkflowVersion.Draft)
+    return WorkflowVersion.Draft
+  if (id === latestVersionId)
+    return WorkflowVersion.Latest
+  try {
+    const date = new Date(version)
+    if (Number.isNaN(date.getTime()))
+      return version
+
+    // format as YYYY-MM-DD HH:mm:ss
+    return date.toISOString().slice(0, 19).replace('T', ' ')
+  }
+  catch {
+    return version
+  }
+}
+
+const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
+  item,
+  currentVersion,
+  latestVersionId,
+  onClick,
+  handleClickMenuItem,
+  isLast,
+}) => {
+  const { t } = useTranslation()
+  const [isHovering, setIsHovering] = useState(false)
+  const [open, setOpen] = useState(false)
+
+  const formatTime = (time: number) => dayjs.unix(time).format('YYYY-MM-DD HH:mm')
+  const formattedVersion = formatVersion(item, latestVersionId)
+  const isSelected = item.version === currentVersion?.version
+  const isDraft = formattedVersion === WorkflowVersion.Draft
+  const isLatest = formattedVersion === WorkflowVersion.Latest
+
+  useEffect(() => {
+    if (isDraft)
+      onClick(item)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleClickItem = () => {
+    if (isSelected)
+      return
+    onClick(item)
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex gap-x-1 relative p-2 rounded-lg group',
+        isSelected ? 'bg-state-accent-active cursor-not-allowed' : 'hover:bg-state-base-hover cursor-pointer',
+      )}
+      onClick={handleClickItem}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => {
+        setIsHovering(false)
+        setOpen(false)
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault()
+        setOpen(true)
+      }}
+    >
+      {!isLast && <div className='absolute w-0.5 h-[calc(100%-0.75rem)] left-4 top-6 bg-divider-subtle' />}
+      <div className=' flex items-center justify-center shrink-0 w-[18px] h-5'>
+        <div className={cn(
+          'w-2 h-2 border-[2px] rounded-lg',
+          isSelected ? 'border-text-accent' : 'border-text-quaternary',
+        )}/>
+      </div>
+      <div className='flex flex-col gap-y-0.5 grow overflow-hidden'>
+        <div className='flex items-center gap-x-1 h-5 mr-6'>
+          <div className={cn(
+            'py-[1px] system-sm-semibold truncate',
+            isSelected ? 'text-text-accent' : 'text-text-secondary',
+          )}>
+            {isDraft ? t('workflow.versionHistory.currentDraft') : item.marked_name || t('workflow.versionHistory.defaultName')}
+          </div>
+          {isLatest && (
+            <div className='flex items-center shrink-0 h-5 px-[5px] rounded-md border border-text-accent-secondary
+            bg-components-badge-bg-dimm text-text-accent-secondary system-2xs-medium-uppercase'>
+              {t('workflow.versionHistory.latest')}
+            </div>
+          )}
+        </div>
+        {
+          !isDraft && (
+            <div className='text-text-secondary system-xs-regular break-words'>
+              {item.marked_comment || ''}
+            </div>
+          )
+        }
+        {
+          !isDraft && (
+            <div className='text-text-tertiary system-xs-regular truncate'>
+              {`${formatTime(item.created_at)} · ${item.created_by.name}`}
+            </div>
+          )
+        }
+      </div>
+      {/* Context Menu */}
+      {!isDraft && isHovering && (
+        <div className='absolute right-1 top-1'>
+          <ContextMenu
+            isShowDelete={!isLatest}
+            isNamedVersion={!!item.marked_name}
+            open={open}
+            setOpen={setOpen}
+            handleClickMenuItem={handleClickMenuItem}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(VersionHistoryItem)
--- a/web/app/components/workflow/store.ts
+++ b/web/app/components/workflow/store.ts
@@ -67,6 +67,10 @@ type Shape = {
  setDraftUpdatedAt: (draftUpdatedAt: number) => void
  publishedAt: number
  setPublishedAt: (publishedAt: number) => void
+  currentVersion: VersionHistory | null
+  setCurrentVersion: (currentVersion: VersionHistory) => void
+  showWorkflowVersionHistoryPanel: boolean
+  setShowWorkflowVersionHistoryPanel: (showWorkflowVersionHistoryPanel: boolean) => void
  showInputsPanel: boolean
  setShowInputsPanel: (showInputsPanel: boolean) => void
  inputs: Record<string, string>
@@ -205,6 +209,10 @@ export const createWorkflowStore = () => {
    setDraftUpdatedAt: draftUpdatedAt => set(() => ({ draftUpdatedAt: draftUpdatedAt ? draftUpdatedAt * 1000 : 0 })),
    publishedAt: 0,
    setPublishedAt: publishedAt => set(() => ({ publishedAt: publishedAt ? publishedAt * 1000 : 0 })),
+    currentVersion: null,
+    setCurrentVersion: currentVersion => set(() => ({ currentVersion })),
+    showWorkflowVersionHistoryPanel: false,
+    setShowWorkflowVersionHistoryPanel: showWorkflowVersionHistoryPanel => set(() => ({ showWorkflowVersionHistoryPanel })),
    showInputsPanel: false,
    setShowInputsPanel: showInputsPanel => set(() => ({ showInputsPanel })),
    inputs: {},
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -411,3 +411,14 @@ export type VisionSetting = {
  variable_selector: ValueSelector
  detail: Resolution
 }
+
+export enum WorkflowVersionFilterOptions {
+  all = 'all',
+  onlyYours = 'onlyYours',
+}
+
+export enum VersionHistoryContextMenuOptions {
+  restore = 'restore',
+  edit = 'edit',
+  delete = 'delete',
+}