Merge remote-tracking branch 'origin/p254' into p284

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

@@ -9,6 +9,7 @@ import {
   RiCursorLine,
   RiFunctionAddLine,
   RiHand,
+  RiMessage3Line,
   RiStickyNoteAddLine,
 } from '@remixicon/react'
 import {
@@ -34,7 +35,7 @@ const Control = () => {
   const maximizeCanvas = useStore(s => s.maximizeCanvas)
   const { handleModePointer, handleModeHand } = useWorkflowMoveMode()
   const { handleLayout } = useWorkflowOrganize()
-  const { handleAddNote } = useOperator()
+  const { handleAddNote, handleAddComment } = useOperator()
   const {
     nodesReadOnly,
     getNodesReadOnly,
@@ -49,6 +50,14 @@ const Control = () => {
     handleAddNote()
   }
 
+  const addComment = (e: MouseEvent<HTMLDivElement>) => {
+    if (getNodesReadOnly())
+      return
+
+    e.stopPropagation()
+    handleAddComment()
+  }
+
   return (
     <div className='pointer-events-auto flex flex-col items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 text-text-tertiary shadow-lg'>
       <AddBlock />
@@ -88,6 +97,18 @@ const Control = () => {
           <RiHand className='h-4 w-4' />
         </div>
       </TipPopup>
+      <TipPopup title={t('workflow.common.commentMode')} shortcuts={['c']}>
+        <div
+          className={cn(
+            'ml-[1px] flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg',
+            controlMode === ControlMode.Comment ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
+            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          )}
+          onClick={addComment}
+        >
+          <RiMessage3Line className='h-4 w-4' />
+        </div>
+      </TipPopup>
       <Divider className='my-1 w-3.5' />
       <ExportImage />
       <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>

web/app/components/workflow/operator/hooks.ts

@@ -5,6 +5,7 @@ import type { NoteNodeType } from '../note-node/types'
 import { CUSTOM_NOTE_NODE } from '../note-node/constants'
 import { NoteTheme } from '../note-node/types'
 import { useAppContext } from '@/context/app-context'
+import { ControlMode } from '../types'
 
 export const useOperator = () => {
   const workflowStore = useWorkflowStore()
@@ -35,7 +36,14 @@ export const useOperator = () => {
     })
   }, [workflowStore, userProfile])
 
+  const handleAddComment = useCallback(() => {
+    workflowStore.setState({
+      controlMode: ControlMode.Comment,
+    })
+  }, [workflowStore])
+
   return {
     handleAddNote,
+    handleAddComment,
   }
 }