diff --git a/web/app/components/workflow/comment/mention-input.tsx b/web/app/components/workflow/comment/mention-input.tsx
index 6972d935fa..31fc706ed0 100644
--- a/web/app/components/workflow/comment/mention-input.tsx
+++ b/web/app/components/workflow/comment/mention-input.tsx
@@ -1,11 +1,21 @@
'use client'
-import type { FC, ReactNode } from 'react'
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import {
+ forwardRef,
+ memo,
+ useCallback,
+ useEffect,
+ useImperativeHandle,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react'
import { createPortal } from 'react-dom'
import { useParams } from 'next/navigation'
import { useTranslation } from 'react-i18next'
-import { RiArrowUpLine, RiAtLine } from '@remixicon/react'
+import { RiArrowUpLine, RiAtLine, RiLoader2Line } from '@remixicon/react'
import Textarea from 'react-textarea-autosize'
import Button from '@/app/components/base/button'
import Avatar from '@/app/components/base/avatar'
@@ -26,7 +36,7 @@ type MentionInputProps = {
autoFocus?: boolean
}
-export const MentionInput: FC
= memo(({
+const MentionInputInner = forwardRef(({
value,
onChange,
onSubmit,
@@ -37,11 +47,18 @@ export const MentionInput: FC = memo(({
className,
isEditing = false,
autoFocus = false,
-}) => {
+}, forwardedRef) => {
const params = useParams()
const { t } = useTranslation()
const appId = params.appId as string
const textareaRef = useRef(null)
+ const highlightContentRef = useRef(null)
+ const actionContainerRef = useRef(null)
+ const actionRightRef = useRef(null)
+ const baseTextareaHeightRef = useRef(null)
+
+ // Expose textarea ref to parent component
+ useImperativeHandle(forwardedRef, () => textareaRef.current!, [])
const workflowStore = useWorkflowStore()
const mentionUsersFromStore = useStore(state => (
@@ -55,6 +72,11 @@ export const MentionInput: FC = memo(({
const [selectedMentionIndex, setSelectedMentionIndex] = useState(0)
const [mentionedUserIds, setMentionedUserIds] = useState([])
const resolvedPlaceholder = placeholder ?? t('workflow.comments.placeholder.add')
+ const BASE_PADDING = 4
+ const [shouldReserveButtonGap, setShouldReserveButtonGap] = useState(isEditing)
+ const [shouldReserveHorizontalSpace, setShouldReserveHorizontalSpace] = useState(() => !isEditing)
+ const [paddingRight, setPaddingRight] = useState(() => BASE_PADDING + (isEditing ? 0 : 48))
+ const [paddingBottom, setPaddingBottom] = useState(() => BASE_PADDING + (isEditing ? 32 : 0))
const mentionNameList = useMemo(() => {
const names = mentionUsers
@@ -153,6 +175,104 @@ export const MentionInput: FC = memo(({
useEffect(() => {
loadMentionableUsers()
}, [loadMentionableUsers])
+ const syncHighlightScroll = useCallback(() => {
+ const textarea = textareaRef.current
+ const highlightContent = highlightContentRef.current
+ if (!textarea || !highlightContent)
+ return
+
+ const { scrollTop, scrollLeft } = textarea
+ highlightContent.style.transform = `translate(${-scrollLeft}px, ${-scrollTop}px)`
+ }, [])
+
+ const evaluateContentLayout = useCallback(() => {
+ const textarea = textareaRef.current
+ if (!textarea)
+ return
+
+ const extraBottom = Math.max(0, paddingBottom - BASE_PADDING)
+ const effectiveClientHeight = textarea.clientHeight - extraBottom
+
+ if (baseTextareaHeightRef.current === null)
+ baseTextareaHeightRef.current = effectiveClientHeight
+
+ const baseHeight = baseTextareaHeightRef.current ?? effectiveClientHeight
+ const hasMultiline = effectiveClientHeight > baseHeight + 1
+ const shouldReserveVertical = isEditing ? true : hasMultiline
+
+ setShouldReserveButtonGap(shouldReserveVertical)
+ setShouldReserveHorizontalSpace(!hasMultiline)
+ }, [isEditing, paddingBottom])
+
+ const updateLayoutPadding = useCallback(() => {
+ const actionEl = actionContainerRef.current
+ const rect = actionEl?.getBoundingClientRect()
+ const rightRect = actionRightRef.current?.getBoundingClientRect()
+ let actionWidth = 0
+ if (rightRect)
+ actionWidth = Math.ceil(rightRect.width)
+ else if (rect)
+ actionWidth = Math.ceil(rect.width)
+
+ const actionHeight = rect ? Math.ceil(rect.height) : 0
+ const fallbackWidth = Math.max(0, paddingRight - BASE_PADDING)
+ const fallbackHeight = Math.max(0, paddingBottom - BASE_PADDING)
+ const effectiveWidth = actionWidth > 0 ? actionWidth : fallbackWidth
+ const effectiveHeight = actionHeight > 0 ? actionHeight : fallbackHeight
+
+ const nextRight = BASE_PADDING + (shouldReserveHorizontalSpace ? effectiveWidth : 0)
+ const nextBottom = BASE_PADDING + (shouldReserveButtonGap ? effectiveHeight : 0)
+
+ setPaddingRight(prev => (prev === nextRight ? prev : nextRight))
+ setPaddingBottom(prev => (prev === nextBottom ? prev : nextBottom))
+ }, [shouldReserveButtonGap, shouldReserveHorizontalSpace, paddingRight, paddingBottom])
+
+ const setActionContainerRef = useCallback((node: HTMLDivElement | null) => {
+ actionContainerRef.current = node
+
+ if (!isEditing)
+ actionRightRef.current = node
+ else if (!node)
+ actionRightRef.current = null
+
+ if (node && typeof window !== 'undefined')
+ window.requestAnimationFrame(() => updateLayoutPadding())
+ }, [isEditing, updateLayoutPadding])
+
+ const setActionRightRef = useCallback((node: HTMLDivElement | null) => {
+ actionRightRef.current = node
+
+ if (node && typeof window !== 'undefined')
+ window.requestAnimationFrame(() => updateLayoutPadding())
+ }, [updateLayoutPadding])
+
+ useLayoutEffect(() => {
+ syncHighlightScroll()
+ }, [value, syncHighlightScroll])
+
+ useLayoutEffect(() => {
+ evaluateContentLayout()
+ }, [value, evaluateContentLayout])
+
+ useLayoutEffect(() => {
+ updateLayoutPadding()
+ }, [updateLayoutPadding, isEditing, shouldReserveButtonGap])
+
+ useEffect(() => {
+ const handleResize = () => {
+ evaluateContentLayout()
+ updateLayoutPadding()
+ }
+
+ window.addEventListener('resize', handleResize)
+ return () => window.removeEventListener('resize', handleResize)
+ }, [evaluateContentLayout, updateLayoutPadding])
+
+ useEffect(() => {
+ baseTextareaHeightRef.current = null
+ evaluateContentLayout()
+ setShouldReserveHorizontalSpace(!isEditing)
+ }, [isEditing, evaluateContentLayout])
const filteredMentionUsers = useMemo(() => {
if (!mentionQuery) return mentionUsers
@@ -162,6 +282,19 @@ export const MentionInput: FC = memo(({
)
}, [mentionUsers, mentionQuery])
+ const shouldDisableMentionButton = useMemo(() => {
+ if (showMentionDropdown)
+ return true
+
+ const textarea = textareaRef.current
+ if (!textarea)
+ return false
+
+ const cursorPosition = textarea.selectionStart || 0
+ const textBeforeCursor = value.slice(0, cursorPosition)
+ return /@\w*$/.test(textBeforeCursor)
+ }, [showMentionDropdown, value])
+
const dropdownPosition = useMemo(() => {
if (!showMentionDropdown || !textareaRef.current)
return { x: 0, y: 0, placement: 'bottom' as const }
@@ -198,17 +331,33 @@ export const MentionInput: FC = memo(({
else {
setShowMentionDropdown(false)
}
+
+ if (typeof window !== 'undefined') {
+ window.requestAnimationFrame(() => {
+ evaluateContentLayout()
+ syncHighlightScroll()
+ })
+ }
}, 0)
- }, [onChange])
+ }, [onChange, evaluateContentLayout, syncHighlightScroll])
const handleMentionButtonClick = useCallback((e: React.MouseEvent) => {
e.preventDefault()
e.stopPropagation()
const textarea = textareaRef.current
- if (!textarea) return
+ if (!textarea)
+ return
const cursorPosition = textarea.selectionStart || 0
+ const textBeforeCursor = value.slice(0, cursorPosition)
+
+ if (showMentionDropdown)
+ return
+
+ if (/@\w*$/.test(textBeforeCursor))
+ return
+
const newContent = `${value.slice(0, cursorPosition)}@${value.slice(cursorPosition)}`
onChange(newContent)
@@ -222,8 +371,15 @@ export const MentionInput: FC = memo(({
setMentionPosition(cursorPosition)
setShowMentionDropdown(true)
setSelectedMentionIndex(0)
+
+ if (typeof window !== 'undefined') {
+ window.requestAnimationFrame(() => {
+ evaluateContentLayout()
+ syncHighlightScroll()
+ })
+ }
}, 0)
- }, [value, onChange])
+ }, [value, onChange, evaluateContentLayout, syncHighlightScroll, showMentionDropdown])
const insertMention = useCallback((user: UserProfile) => {
const textarea = textareaRef.current
@@ -247,19 +403,30 @@ export const MentionInput: FC = memo(({
const newCursorPos = mentionPosition + extraSpace + user.name.length + 2 // (space) + @ + name + space
textarea.setSelectionRange(newCursorPos, newCursorPos)
textarea.focus()
+ if (typeof window !== 'undefined') {
+ window.requestAnimationFrame(() => {
+ evaluateContentLayout()
+ syncHighlightScroll()
+ })
+ }
}, 0)
- }, [value, mentionPosition, onChange, mentionedUserIds])
+ }, [value, mentionPosition, onChange, mentionedUserIds, evaluateContentLayout, syncHighlightScroll])
- const handleSubmit = useCallback((e?: React.MouseEvent) => {
+ const handleSubmit = useCallback(async (e?: React.MouseEvent) => {
if (e) {
e.preventDefault()
e.stopPropagation()
}
if (value.trim()) {
- onSubmit(value.trim(), mentionedUserIds)
- setMentionedUserIds([])
- setShowMentionDropdown(false)
+ try {
+ await onSubmit(value.trim(), mentionedUserIds)
+ setMentionedUserIds([])
+ setShowMentionDropdown(false)
+ }
+ catch (error) {
+ console.error('Failed to submit', error)
+ }
}
}, [value, mentionedUserIds, onSubmit])
@@ -330,9 +497,16 @@ export const MentionInput: FC = memo(({
'pointer-events-none absolute inset-0 z-0 overflow-hidden whitespace-pre-wrap break-words p-1 leading-6',
'body-lg-regular text-text-primary',
)}
+ style={{ paddingRight, paddingBottom }}
>
- {highlightedValue}
- {''}
+
+ {highlightedValue}
+ {''}
+