Fix chat input: IME, ArrowUp/Down history, and Enter behavior

[devshah23]

Fixes

Fixes #5662

Description

This PR improves the chat input experience in Flowise UI, addressing issues with IME and input history:

• IME support: Enter no longer submits while composing using IMEs (e.g., Japanese, Chinese). ArrowUp/Down are ignored during composition to avoid overwriting input or navigating history accidentally.
• Input history: ArrowUp fetches previous messages only when the cursor is at the start; ArrowDown fetches next messages only when the cursor is at the end. Arrow keys otherwise move the cursor normally inside the text.
• Enter / Shift+Enter: Enter submits messages only after composition finishes; Shift+Enter allows adding new lines for multi-line input.
• Improved usability: Multi-line messages now behave like standard textareas, reducing accidental input loss and making chat more predictable.
• History fixes: Input history now stores and retrieves messages correctly after submission, improving user experience for repeated messages.

[gemini-code-assist]

Summary of Changes

Hello @devshah23, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the chat input experience within the Flowise UI. It addresses several long-standing issues related to Input Method Editors (IMEs), refines the behavior of arrow keys for navigating input history, and standardizes the Enter and Shift+Enter key actions. The changes aim to make the chat input more intuitive, robust, and consistent with user expectations for text input fields, particularly benefiting users who rely on IMEs or frequently use multi-line messages.

Highlights

• IME Support: Enter key no longer submits messages while composing with Input Method Editors (IMEs). ArrowUp/Down keys are ignored during IME composition to prevent accidental input overwrites or history navigation.
• Input History Navigation: ArrowUp fetches previous messages only when the cursor is at the start of the input field. ArrowDown fetches next messages only when the cursor is at the end. Otherwise, arrow keys move the cursor normally within the text.
• Enter / Shift+Enter Behavior: The Enter key now submits messages only after IME composition has finished. Shift+Enter allows users to add new lines for multi-line input, behaving like a standard textarea.
• Improved Usability: Multi-line messages now behave more predictably, reducing accidental input loss and enhancing the overall chat experience.
• History Storage: Input history correctly stores and retrieves messages after submission, improving the user experience for repeated messages.

Changelog

• packages/ui/src/views/chatmessage/ChatMessage.jsx
  • Refactored the logic for adding selected input to the input history, ensuring all valid inputs are consistently recorded.
  • Modified the handleEnter function to prevent submission during IME composition.
  • Updated arrow key handling to only navigate input history when the cursor is at the beginning (ArrowUp) or end (ArrowDown) of the input, allowing normal cursor movement otherwise.
  • Adjusted Enter key behavior to submit only when composition is complete and simplified the submission condition.
  • Ensured Shift+Enter correctly adds new lines for multi-line input.

Activity

• No human activity has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces several valuable improvements to the chat input, fixing issues with IME, arrow key history navigation, and Enter key behavior. The changes make the chat experience more intuitive and predictable. The logic for handling input history has also been corrected to ensure all submitted messages are stored. The code is cleaner and more robust. I've pointed out a couple of minor formatting issues that could be addressed to further improve code quality.