fix: workflow sync data (#3824)

web/app/components/workflow/panel/index.tsx

@@ -8,7 +8,10 @@ import { useShallow } from 'zustand/react/shallow'
 import type { CommonNodeType } from '../types'
 import { Panel as NodePanel } from '../nodes'
 import { useStore } from '../store'
-import { useIsChatMode } from '../hooks'
+import {
+  useIsChatMode,
+  useWorkflow,
+} from '../hooks'
 import DebugAndPreview from './debug-and-preview'
 import Record from './record'
 import WorkflowPreview from './workflow-preview'
@@ -24,6 +27,10 @@ const Panel: FC = () => {
   const workflowRunningData = useStore(s => s.workflowRunningData)
   const historyWorkflowData = useStore(s => s.historyWorkflowData)
   const isRestoring = useStore(s => s.isRestoring)
+  const {
+    enableShortcuts,
+    disableShortcuts,
+  } = useWorkflow()
   const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal } = useAppStore(useShallow(state => ({
     currentLogItem: state.currentLogItem,
     setCurrentLogItem: state.setCurrentLogItem,
@@ -49,7 +56,13 @@ const Panel: FC = () => {
   ])
 
   return (
-    <div className='absolute top-14 right-0 bottom-2 flex z-10' key={`${isRestoring}`}>
+    <div
+      tabIndex={-1}
+      className='absolute top-14 right-0 bottom-2 flex z-10 outline-none'
+      onFocus={disableShortcuts}
+      onBlur={enableShortcuts}
+      key={`${isRestoring}`}
+    >
       {
         showMessageLogModal && (
           <MessageLogModal