allow for new lines in prompt bar. #168
Conversation
There was a problem hiding this comment.
Pull request overview
Adds multiline prompt entry support in the prompt bar (Issue #157), and updates message rendering to preserve user-entered line breaks.
Changes:
- Replace the prompt
<input>with a<textarea>and add Enter-to-submit / Shift+Enter-for-newline behavior. - Update conversation message CSS to preserve newlines and wrap long words.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| resources/ts/components/ConversationPromptInput.tsx | Switches to textarea and adds keyboard handling for multiline prompts/submission. |
| resources/ts/components/ConversationMessage.module.css | Adjusts whitespace/wrapping to display newlines in messages. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (currentPrompt.trim() !== "") { | ||
| setSubmittedPrompt(currentPrompt); | ||
| } | ||
| } | ||
| }, | ||
| [currentPrompt, setSubmittedPrompt], |
There was a problem hiding this comment.
onKeyDown submits on Enter, but it bypasses the form onSubmit logic. This regresses the previous behavior where pressing Enter on an empty prompt would still invoke onSubmit (setting setSubmittedPrompt(null)), and it also duplicates submission logic in two places. Consider triggering the form submission from the key handler (e.g., via event.currentTarget.form?.requestSubmit() after preventDefault()), so all submission paths go through onSubmit and stay consistent.
| if (currentPrompt.trim() !== "") { | |
| setSubmittedPrompt(currentPrompt); | |
| } | |
| } | |
| }, | |
| [currentPrompt, setSubmittedPrompt], | |
| event.currentTarget.form?.requestSubmit(); | |
| } | |
| }, | |
| [], |
| if (event.key === "Enter" && !event.shiftKey) { | ||
| event.preventDefault(); | ||
| if (currentPrompt.trim() !== "") { | ||
| setSubmittedPrompt(currentPrompt); | ||
| } |
There was a problem hiding this comment.
Holding the Enter key down will fire repeated keydown events and can submit the same prompt multiple times (triggering multiple setSubmittedPrompt calls / version increments). Add a guard such as ignoring event.repeat (or otherwise debouncing) for the Enter-to-submit path.
| white-space: pre-wrap; | ||
| overflow-wrap: break-word; |
There was a problem hiding this comment.
Applying white-space: pre-wrap at the .conversationMessage container level affects all descendants (author label, thoughts, and the react-markdown output). This changes Markdown rendering semantics by turning soft line breaks inside paragraphs into hard line breaks, which can noticeably degrade formatting for AI responses. If the goal is only to preserve user-entered newlines, consider scoping this style to just the user message content (or rendering user prompts as plain text with pre-wrap) while leaving Markdown output with normal whitespace handling.
There was a problem hiding this comment.
Yeah, we already have onSubmit, so we should use that. Submitting on "enter" key pressed will not work in all the possible scenarios and edge cases (mobile etc).
The issue was there was no vertical scroll in the messages column, word break rules will not change a lot how the prompt screen behaves.
2 participants
solves issue