From 72737dabc7f31a5ed3634afa270768e96cb6c9f0 Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Wed, 17 Sep 2025 14:50:05 +0800
Subject: [PATCH] fix at can't click bug

---
 .../components/workflow/comment/thread.tsx    | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
index f7691afceb..f646c3431b 100644
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -90,6 +90,8 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
   const { userProfile } = useAppContext()
   const [replyContent, setReplyContent] = useState('')
   const [mentionUsers, setMentionUsers] = useState<UserProfile[]>([])
+  const [mentionLoading, setMentionLoading] = useState(false)
+  const [mentionLoaded, setMentionLoaded] = useState(false)
   const [showMentionDropdown, setShowMentionDropdown] = useState(false)
   const [mentionQuery, setMentionQuery] = useState('')
   const [mentionPosition, setMentionPosition] = useState(0)
@@ -97,22 +99,30 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
   const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([])
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
-  useEffect(() => {
+  const loadMentionUsers = useCallback(async () => {
     if (!onReply || !appId) {
       setMentionUsers([])
+      setMentionLoaded(false)
       return
     }
-    const loadMentionUsers = async () => {
-      try {
-        setMentionUsers(await fetchMentionableUsers(appId))
-      }
-      catch (error) {
-        console.error('Failed to load mention users', error)
-      }
+    setMentionLoading(true)
+    try {
+      const users = await fetchMentionableUsers(appId)
+      setMentionUsers(users)
+      setMentionLoaded(true)
+    }
+    catch (error) {
+      console.error('Failed to load mention users', error)
+    }
+    finally {
+      setMentionLoading(false)
     }
-    loadMentionUsers()
   }, [appId, onReply])
 
+  useEffect(() => {
+    loadMentionUsers()
+  }, [loadMentionUsers])
+
   useEffect(() => {
     setReplyContent('')
     setMentionedUserIds([])
@@ -167,10 +177,12 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
     }, 0)
   }, [])
 
-  const handleMentionButtonClick = useCallback((e: React.MouseEvent) => {
+  const handleMentionButtonClick = useCallback(async (e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
     if (!onReply || loading) return
+    if (!mentionLoaded && !mentionLoading)
+      await loadMentionUsers()
     if (!textareaRef.current) return
     const cursorPosition = textareaRef.current.selectionStart || 0
     const newContent = `${replyContent.slice(0, cursorPosition)}@${replyContent.slice(cursorPosition)}`
@@ -186,7 +198,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
       setShowMentionDropdown(true)
       setSelectedMentionIndex(0)
     }, 0)
-  }, [replyContent])
+  }, [loadMentionUsers, mentionLoaded, mentionLoading, replyContent])
 
   const insertMention = useCallback((user: UserProfile) => {
     const textarea = textareaRef.current
@@ -335,7 +347,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                   <Textarea
                     ref={textareaRef}
                     minRows={1}
-                    maxRows={4}
+                    maxRows={1}
                     value={replyContent}
                     placeholder='Add a reply'
                     onChange={e => handleContentChange(e.target.value)}
@@ -344,8 +356,8 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                   />
                   <button
                     type='button'
-                    disabled={!onReply || loading}
-                    className={cn('disabled:bg-components-button-secondary-bg/60 z-20 flex h-8 w-10 items-center justify-center rounded-lg bg-components-button-secondary-bg hover:bg-state-base-hover disabled:cursor-not-allowed disabled:text-text-disabled')}
+                    disabled={loading || mentionLoading}
+                    className={cn('z-20 flex h-8 w-8 items-center justify-center rounded-lg bg-components-button-secondary-bg hover:bg-state-base-hover')}
                     onClick={handleMentionButtonClick}
                     aria-label='Mention user'
                   >