Summary
The chat input should support navigating previously sent messages using ArrowUp and ArrowDown — similar to how a terminal shell works.
Current Behavior
When no @ mention dropdown is open, arrow keys have no effect on the input field.
Expected Behavior
- ArrowUp: load the previous sent message into the input. On first press, save the current draft so it can be restored.
- ArrowDown: move forward through history. Once past the last entry, restore the saved draft.
- Typing while navigating history should exit history mode.
- Consecutive duplicate messages should not be stored twice.
Where to Look
Primary file: app/(main)/chat/[chatId]/components/MessageComposer.tsx
handleKeyPress — already handles ArrowUp/Down for @ mention autocomplete. Add history navigation in the else branch when no mention dropdown is open.
- The
composer.unstable_on("send", ...) handler — this is where the composer clears after a message is sent. Save the sent message to history here before clearing.
handleMessageChange
- — fires on every keystroke. Reset history navigation state here when the user types manually.
You'll need to track: the list of sent messages, the current position in that list, and the draft that was in the input before the user started navigating back.
Files to Change
| File |
What changes |
app/(main)/chat/[chatId]/components/MessageComposer.tsx |
Add history state, capture sent messages, handle ArrowUp/Down navigation |
No new dependencies required.