fix: fix chat input multiline cursor navigation issue

Author: sohaieb

packages/ui/src/views/chatmessage/ChatMessage.jsx

@@ -217,6 +217,7 @@ const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, previews, setP
     const [inputHistory] = useState(new ChatInputHistory(10))
 
     const inputRef = useRef(null)
+    const inputCursorPositionRef = useRef('start')
     const getChatmessageApi = useApi(chatmessageApi.getInternalChatmessageFromChatflow)
     const getAllExecutionsApi = useApi(executionsApi.getAllExecutions)
     const getIsChatflowStreamingApi = useApi(chatflowsApi.getIsChatflowStreaming)
@@ -1184,15 +1185,26 @@ const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, previews, setP
             scrollToBottom()
         }, 100)
     }
+    // Allow cursor to navigate easily in multiline text (except at the end or start of the text)
+    const handleKeyboardCursorPosition = (e) => {
+        const targetValue = e.target.value ?? ''
+        inputCursorPositionRef.current = e.target.selectionStart
+        const cursorPosition = inputCursorPositionRef.current
+        const isCursorAtStart = cursorPosition === 0
+        const isCursorAtEnd = targetValue.length > 0 ? cursorPosition === targetValue.length : cursorPosition === 0
+        inputCursorPositionRef.current = isCursorAtStart ? 'start' : isCursorAtEnd ? 'end' : 'middle'
+    }
+
     // Prevent blank submissions and allow for multiline input
     const handleEnter = (e) => {
+        const cursorPosition = inputCursorPositionRef.current
         // Check if IME composition is in progress
         const isIMEComposition = e.isComposing || e.keyCode === 229
-        if (e.key === 'ArrowUp' && !isIMEComposition) {
+        if (e.key === 'ArrowUp' && !isIMEComposition && cursorPosition === 'start') {
             e.preventDefault()
             const previousInput = inputHistory.getPreviousInput(userInput)
             setUserInput(previousInput)
-        } else if (e.key === 'ArrowDown' && !isIMEComposition) {
+        } else if (e.key === 'ArrowDown' && !isIMEComposition && cursorPosition === 'end') {
             e.preventDefault()
             const nextInput = inputHistory.getNextInput()
             setUserInput(nextInput)
@@ -2969,6 +2981,7 @@ const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, previews, setP
                             sx={{ width: '100%' }}
                             disabled={getInputDisabled()}
                             onKeyDown={handleEnter}
+                            onKeyUp={handleKeyboardCursorPosition}
                             id='userInput'
                             name='userInput'
                             placeholder={loading ? 'Waiting for response...' : 'Type your question...'}