add CollaborationEnabled for comment shortcut

web/app/components/workflow/hooks/use-shortcuts.ts

@@ -37,6 +37,7 @@ export const useShortcuts = (): void => {
     handleModeHand,
     handleModePointer,
     handleModeComment,
+    isCommentModeAvailable,
   } = useWorkflowMoveMode()
   const { handleLayout } = useWorkflowOrganize()
   const { handleToggleMaximizeCanvas } = useWorkflowCanvasMaximize()
@@ -146,7 +147,7 @@ export const useShortcuts = (): void => {
   })
 
   useKeyPress('c', (e) => {
-    if (shouldHandleShortcut(e)) {
+    if (shouldHandleShortcut(e) && isCommentModeAvailable) {
       e.preventDefault()
       handleModeComment()
     }

web/app/components/workflow/hooks/use-workflow-interactions.ts

@@ -30,6 +30,8 @@ import { useNodesSyncDraft } from './use-nodes-sync-draft'
 import { WorkflowHistoryEvent, useWorkflowHistory } from './use-workflow-history'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useCollaborativeWorkflow } from '@/app/components/workflow/hooks/use-collaborative-workflow'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export const useWorkflowInteractions = () => {
   const workflowStore = useWorkflowStore()
@@ -56,6 +58,9 @@ export const useWorkflowMoveMode = () => {
     getNodesReadOnly,
   } = useNodesReadOnly()
   const { handleSelectionCancel } = useSelectionInteractions()
+  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
+  const appDetail = useAppStore(state => state.appDetail)
+  const isCommentModeAvailable = isCollaborationEnabled && (appDetail?.mode === 'workflow' || appDetail?.mode === 'advanced-chat')
 
   const handleModePointer = useCallback(() => {
     if (getNodesReadOnly())
@@ -73,17 +78,18 @@ export const useWorkflowMoveMode = () => {
   }, [getNodesReadOnly, setControlMode, handleSelectionCancel])
 
   const handleModeComment = useCallback(() => {
-    if (getNodesReadOnly())
+    if (getNodesReadOnly() || !isCommentModeAvailable)
       return
 
     setControlMode(ControlMode.Comment)
     handleSelectionCancel()
-  }, [getNodesReadOnly, setControlMode, handleSelectionCancel])
+  }, [getNodesReadOnly, setControlMode, handleSelectionCancel, isCommentModeAvailable])
 
   return {
     handleModePointer,
     handleModeHand,
     handleModeComment,
+    isCommentModeAvailable,
   }
 }
 

web/app/components/workflow/operator/control.tsx

@@ -28,14 +28,17 @@ import TipPopup from './tip-popup'
 import ExportImage from './export-image'
 import { useOperator } from './hooks'
 import cn from '@/utils/classnames'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Control = () => {
   const { t } = useTranslation()
   const controlMode = useStore(s => s.controlMode)
   const maximizeCanvas = useStore(s => s.maximizeCanvas)
-  const { handleModePointer, handleModeHand, handleModeComment } = useWorkflowMoveMode()
+  const {
+    handleModePointer,
+    handleModeHand,
+    handleModeComment,
+    isCommentModeAvailable,
+  } = useWorkflowMoveMode()
   const { handleLayout } = useWorkflowOrganize()
   const { handleAddNote } = useOperator()
   const {
@@ -43,9 +46,6 @@ const Control = () => {
     getNodesReadOnly,
   } = useNodesReadOnly()
   const { handleToggleMaximizeCanvas } = useWorkflowCanvasMaximize()
-  const isCollaborationEnabled = useGlobalPublicStore(s => s.systemFeatures.enable_collaboration_mode)
-  const appDetail = useAppStore(state => state.appDetail)
-  const isCommentVisible = isCollaborationEnabled && (appDetail?.mode === 'workflow' || appDetail?.mode === 'advanced-chat')
 
   const addNote = (e: MouseEvent<HTMLDivElement>) => {
     if (getNodesReadOnly())
@@ -94,7 +94,7 @@ const Control = () => {
           <RiHand className='h-4 w-4' />
         </div>
       </TipPopup>
-      {isCommentVisible && (
+      {isCommentModeAvailable && (
         <TipPopup title={t('workflow.common.commentMode')} shortcuts={['c']}>
           <div
             className={cn(