feat: Add multiline support to Chat component

[rzats]

What type of PR is this? (Check all that apply)

• 🛠 Refactor
• ✨ Feature
• 🐛 Bug Fix
• ⚡ Optimization
• 📝 Documentation Update

Description

Fixes #2579 by adding multiline support to the Chat component.

The new behavior is that Ctrl+Enter or Cmd+Enter inserts a newline at the point of selection, while Enter still sends the message (for backwards compatibility). The newlines are also preserved in the rendered chat messages, and test cases have been added for the new feature.

Related Tickets & Documents

• Closes [✨ FEATURE] Add newspaces to chat input #2579

How to reproduce the issue

Here's a very simple interface which I've used for testing:

from taipy.gui import Gui
import taipy.gui.builder as tgb

messages = []

def evaluate(state, var_name: str, payload: dict):
    args = payload.get("args", [])
    if len(args) >= 4:
        reason, varName, text, senderId, imageData = args[0], args[1], args[2], args[3], args[4] if len(args) > 4 else None
        state.messages.append([f"{len(state.messages)}", text, senderId])
        response = f"You said: {text}"
        state.messages.append([f"{len(state.messages)}", response, "AI"])
        state.messages = state.messages


with tgb.Page() as page_home:
    tgb.chat(
        messages="{messages}",
        on_action=evaluate,
        height="80vh",
    )

gui = Gui(page=page_home)
gui.run(debug=True, use_reloader=True, port=5002)

Run this script! Then type some text, press Ctrl+Enter or Cmd+Enter on a Mac, and verify that a newline is being inserted at cursor position. Enter should still send the chat message, and it will be echoed with the newlines preserved. Copypasting some text with newlines present in it should work as well.

Backporting

This change should be backported to:

• 3.0
• 3.1
• 4.0
• develop

Checklist

We encourage keeping the code coverage percentage at 80% or above.

• ✅ This solution meets the acceptance criteria of the related issue.
• 📝 The related issue checklist is completed.
• 🧪 This PR includes unit tests for the developed code.
  If not, explain why:
• 🔄 End-to-End tests have been added or updated.
  If not, explain why: covered in unit tests
• 📚 The documentation has been updated, or a dedicated issue has been created.
  If not, explain why: unsure where this would be covered, but I can update the relevant docs :)
• 📌 The release notes have been updated.
  If not, explain why: l believe this is done by a maintainer later on?

[Copilot]

Pull request overview

This pull request adds multiline support to the Chat component, allowing users to insert newlines using Ctrl+Enter or Cmd+Enter while preserving the existing behavior where Enter sends the message. The implementation converts the input field to a multiline textarea and ensures newlines are properly rendered in markdown mode.

Key Changes

• Converted Chat input from single-line to multiline TextField with configurable row limits (1-4 rows)
• Implemented Ctrl+Enter and Cmd+Enter keyboard shortcuts to insert newlines at cursor position
• Added newline-to-markdown conversion for proper rendering in markdown mode

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
frontend/taipy-gui/src/components/Taipy/Chat.tsx	Converted TextField to multiline, added keyboard handling for newline insertion, updated type signatures from HTMLInputElement to HTMLTextAreaElement, and implemented newline-to-markdown conversion
frontend/taipy-gui/src/components/Taipy/Chat.spec.tsx	Updated existing test to expect textarea instead of input, added comprehensive tests for Ctrl+Enter, Cmd+Enter, multiple newlines, backwards compatibility, and newline preservation in different modes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The keyboard handling logic has changed behavior for modifier keys. The original code only sent messages when Enter was pressed with NO modifier keys (!evt.shiftKey && !evt.ctrlKey && !evt.altKey). The new code will send messages when Enter is pressed with Shift or Alt (without Ctrl/Meta).

This means Shift+Enter and Alt+Enter will now send the message instead of being ignored. Consider updating the condition to preserve the original behavior:

if (ENTER_KEY == evt.key) {
    if (evt.ctrlKey || evt.metaKey) {
        // insert newline at cursor
        const textarea = evt.currentTarget.querySelector("textarea") as HTMLTextAreaElement;
        if (textarea) {
            const start = textarea.selectionStart;
            const end = textarea.selectionEnd;
            const value = textarea.value;
            textarea.value = value.substring(0, start) + '\n' + value.substring(end);
            textarea.setSelectionRange(start + 1, start + 1);
            textarea.dispatchEvent(new Event('input', { bubbles: true }));
        }
        evt.preventDefault();
    } else if (!evt.shiftKey && !evt.altKey) {
        // only send if no other modifiers are pressed
        sendAction(evt.currentTarget.querySelector("textarea"), evt.key);
        evt.preventDefault();
    }
}

Suggested change

	} else {
	} else if (!evt.shiftKey && !evt.altKey) {
	// only send if no other modifiers are pressed