diff --git a/web/app/components/workflow-app/components/workflow-header/index.tsx b/web/app/components/workflow-app/components/workflow-header/index.tsx
index 69d0759274..53a050146e 100644
--- a/web/app/components/workflow-app/components/workflow-header/index.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/index.tsx
@@ -21,7 +21,7 @@ const WorkflowHeader = () => {
     setCurrentLogItem: state.setCurrentLogItem,
     setShowMessageLogModal: state.setShowMessageLogModal,
   })))
-  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory()
   const isChatMode = useIsChatMode()
 
   const handleClearLogAndMessageModal = useCallback(() => {
diff --git a/web/app/components/workflow-app/components/workflow-panel.tsx b/web/app/components/workflow-app/components/workflow-panel.tsx
index d6da70cf21..7c1450819f 100644
--- a/web/app/components/workflow-app/components/workflow-panel.tsx
+++ b/web/app/components/workflow-app/components/workflow-panel.tsx
@@ -13,7 +13,6 @@ import WorkflowPreview from '@/app/components/workflow/panel/workflow-preview'
 import ChatRecord from '@/app/components/workflow/panel/chat-record'
 import ChatVariablePanel from '@/app/components/workflow/panel/chat-variable-panel'
 import GlobalVariablePanel from '@/app/components/workflow/panel/global-variable-panel'
-import VersionHistoryPanel from '@/app/components/workflow/panel/version-history-panel'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import MessageLogModal from '@/app/components/base/message-log-modal'
 import type { PanelProps } from '@/app/components/workflow/panel'
@@ -52,7 +51,6 @@ const WorkflowPanelOnRight = () => {
   const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
   const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
   const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
-  const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
 
   return (
     <>
@@ -86,23 +84,30 @@ const WorkflowPanelOnRight = () => {
           <GlobalVariablePanel />
         )
       }
-      {
-        showWorkflowVersionHistoryPanel && (
-          <VersionHistoryPanel/>
-        )
-      }
     </>
   )
 }
 const WorkflowPanel = () => {
+  const appDetail = useAppStore(s => s.appDetail)
+  const versionHistoryPanelProps = useMemo(() => {
+    const appId = appDetail?.id
+    return {
+      getVersionListUrl: `/apps/${appId}/workflows`,
+      deleteVersionUrl: (versionId: string) => `/apps/${appId}/workflows/${versionId}`,
+      updateVersionUrl: (versionId: string) => `/apps/${appId}/workflows/${versionId}`,
+      latestVersionId: appDetail?.workflow?.id,
+    }
+  }, [appDetail?.id, appDetail?.workflow?.id])
+
   const panelProps: PanelProps = useMemo(() => {
     return {
       components: {
         left: <WorkflowPanelOnLeft />,
         right: <WorkflowPanelOnRight />,
       },
+      versionHistoryPanelProps,
     }
-  }, [])
+  }, [versionHistoryPanelProps])
 
   return (
     <Panel {...panelProps} />
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index 8e510f4e77..27a76d0408 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -1,6 +1,8 @@
 import type { FC } from 'react'
 import { memo } from 'react'
 import { useNodes } from 'reactflow'
+import type { VersionHistoryPanelProps } from '@/app/components/workflow/panel/version-history-panel'
+import VersionHistoryPanel from '@/app/components/workflow/panel/version-history-panel'
 import type { CommonNodeType } from '../types'
 import { Panel as NodePanel } from '../nodes'
 import { useStore } from '../store'
@@ -12,14 +14,17 @@ export type PanelProps = {
     left?: React.ReactNode
     right?: React.ReactNode
   }
+  versionHistoryPanelProps?: VersionHistoryPanelProps
 }
 const Panel: FC<PanelProps> = ({
   components,
+  versionHistoryPanelProps,
 }) => {
   const nodes = useNodes<CommonNodeType>()
   const selectedNode = nodes.find(node => node.data.selected)
   const showEnvPanel = useStore(s => s.showEnvPanel)
   const isRestoring = useStore(s => s.isRestoring)
+  const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
 
   return (
     <div
@@ -38,6 +43,11 @@ const Panel: FC<PanelProps> = ({
       {
         components?.right
       }
+      {
+        showWorkflowVersionHistoryPanel && (
+          <VersionHistoryPanel {...versionHistoryPanelProps} />
+        )
+      }
       {
         showEnvPanel && (
           <EnvPanel />
diff --git a/web/app/components/workflow/panel/version-history-panel/index.tsx b/web/app/components/workflow/panel/version-history-panel/index.tsx
index 3ca800bbf6..9c48219229 100644
--- a/web/app/components/workflow/panel/version-history-panel/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/index.tsx
@@ -8,7 +8,6 @@ import { VersionHistoryContextMenuOptions, WorkflowVersionFilterOptions } from '
 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'
@@ -22,7 +21,18 @@ import Toast from '@/app/components/base/toast'
 const HISTORY_PER_PAGE = 10
 const INITIAL_PAGE = 1
 
-const VersionHistoryPanel = () => {
+export type VersionHistoryPanelProps = {
+  getVersionListUrl?: string
+  deleteVersionUrl?: (versionId: string) => string
+  updateVersionUrl?: (versionId: string) => string
+  latestVersionId?: string
+}
+export const VersionHistoryPanel = ({
+  getVersionListUrl,
+  deleteVersionUrl,
+  updateVersionUrl,
+  latestVersionId,
+}: VersionHistoryPanelProps) => {
   const [filterValue, setFilterValue] = useState(WorkflowVersionFilterOptions.all)
   const [isOnlyShowNamedVersions, setIsOnlyShowNamedVersions] = useState(false)
   const [operatedItem, setOperatedItem] = useState<VersionHistory>()
@@ -32,7 +42,6 @@ const VersionHistoryPanel = () => {
   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)
@@ -45,7 +54,7 @@ const VersionHistoryPanel = () => {
     hasNextPage,
     isFetching,
   } = useWorkflowVersionHistory({
-    appId: appDetail!.id,
+    url: getVersionListUrl || '',
     initialPage: INITIAL_PAGE,
     limit: HISTORY_PER_PAGE,
     userId: filterValue === WorkflowVersionFilterOptions.onlyYours ? userProfile.id : '',
@@ -112,7 +121,7 @@ const VersionHistoryPanel = () => {
     }
   }, [])
 
-  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory()
 
   const handleRestore = useCallback((item: VersionHistory) => {
     setShowWorkflowVersionHistoryPanel(false)
@@ -138,10 +147,10 @@ const VersionHistoryPanel = () => {
     })
   }, [setShowWorkflowVersionHistoryPanel, handleSyncWorkflowDraft, workflowStore, handleRestoreFromPublishedWorkflow, resetWorkflowVersionHistory, t])
 
-  const { mutateAsync: deleteWorkflow } = useDeleteWorkflow(appDetail!.id)
+  const { mutateAsync: deleteWorkflow } = useDeleteWorkflow()
 
   const handleDelete = useCallback(async (id: string) => {
-    await deleteWorkflow(id, {
+    await deleteWorkflow(deleteVersionUrl?.(id) || '', {
       onSuccess: () => {
         setDeleteConfirmOpen(false)
         Toast.notify({
@@ -160,14 +169,14 @@ const VersionHistoryPanel = () => {
         setDeleteConfirmOpen(false)
       },
     })
-  }, [t, deleteWorkflow, resetWorkflowVersionHistory])
+  }, [t, deleteWorkflow, resetWorkflowVersionHistory, deleteVersionUrl])
 
-  const { mutateAsync: updateWorkflow } = useUpdateWorkflow(appDetail!.id)
+  const { mutateAsync: updateWorkflow } = useUpdateWorkflow()
 
   const handleUpdateWorkflow = useCallback(async (params: { id?: string, title: string, releaseNotes: string }) => {
     const { id, ...rest } = params
     await updateWorkflow({
-      workflowId: id!,
+      url: updateVersionUrl?.(id || '') || '',
       ...rest,
     }, {
       onSuccess: () => {
@@ -188,7 +197,7 @@ const VersionHistoryPanel = () => {
         setEditModalOpen(false)
       },
     })
-  }, [t, updateWorkflow, resetWorkflowVersionHistory])
+  }, [t, updateWorkflow, resetWorkflowVersionHistory, updateVersionUrl])
 
   return (
     <div className='flex w-[268px] flex-col rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
@@ -222,7 +231,7 @@ const VersionHistoryPanel = () => {
                     key={item.id}
                     item={item}
                     currentVersion={currentVersion}
-                    latestVersionId={appDetail!.workflow!.id}
+                    latestVersionId={latestVersionId || ''}
                     onClick={handleVersionClick}
                     handleClickMenuItem={handleClickMenuItem.bind(null, item)}
                     isLast={isLast}
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
index 4321552cc7..caa993ba80 100644
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@@ -35,10 +35,11 @@ export const useWorkflowConfig = (appId: string, onSuccess: (v: WorkflowConfigRe
 const WorkflowVersionHistoryKey = [NAME_SPACE, 'versionHistory']
 
 export const useWorkflowVersionHistory = (params: FetchWorkflowDraftPageParams) => {
-  const { appId, initialPage, limit, userId, namedOnly } = params
+  const { url, initialPage, limit, userId, namedOnly } = params
   return useInfiniteQuery({
-    queryKey: [...WorkflowVersionHistoryKey, appId, initialPage, limit, userId, namedOnly],
-    queryFn: ({ pageParam = 1 }) => get<FetchWorkflowDraftPageResponse>(`/apps/${appId}/workflows`, {
+    enabled: !!url,
+    queryKey: [...WorkflowVersionHistoryKey, url, initialPage, limit, userId, namedOnly],
+    queryFn: ({ pageParam = 1 }) => get<FetchWorkflowDraftPageResponse>(url, {
       params: {
         page: pageParam,
         limit,
@@ -51,14 +52,14 @@ export const useWorkflowVersionHistory = (params: FetchWorkflowDraftPageParams)
   })
 }
 
-export const useResetWorkflowVersionHistory = (appId: string) => {
-  return useReset([...WorkflowVersionHistoryKey, appId])
+export const useResetWorkflowVersionHistory = () => {
+  return useReset([...WorkflowVersionHistoryKey])
 }
 
-export const useUpdateWorkflow = (appId: string) => {
+export const useUpdateWorkflow = () => {
   return useMutation({
     mutationKey: [NAME_SPACE, 'update'],
-    mutationFn: (params: UpdateWorkflowParams) => patch(`/apps/${appId}/workflows/${params.workflowId}`, {
+    mutationFn: (params: UpdateWorkflowParams) => patch(params.url, {
       body: {
         marked_name: params.title,
         marked_comment: params.releaseNotes,
@@ -67,10 +68,10 @@ export const useUpdateWorkflow = (appId: string) => {
   })
 }
 
-export const useDeleteWorkflow = (appId: string) => {
+export const useDeleteWorkflow = () => {
   return useMutation({
     mutationKey: [NAME_SPACE, 'delete'],
-    mutationFn: (workflowId: string) => del(`/apps/${appId}/workflows/${workflowId}`),
+    mutationFn: (url: string) => del(url),
   })
 }
 
diff --git a/web/types/workflow.ts b/web/types/workflow.ts
index bd7334a261..d5b1226d03 100644
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@@ -128,7 +128,7 @@ export type FetchWorkflowDraftResponse = {
 export type VersionHistory = FetchWorkflowDraftResponse
 
 export type FetchWorkflowDraftPageParams = {
-  appId: string
+  url: string
   initialPage: number
   limit: number
   userId?: string
@@ -348,7 +348,7 @@ export type PublishWorkflowParams = {
 }
 
 export type UpdateWorkflowParams = {
-  workflowId: string
+  url: string
   title: string
   releaseNotes: string
 }