feat(chat): add terminal-style message history navigation with arrow keys on chat page#2466
feat(chat): add terminal-style message history navigation with arrow keys on chat page#2466bowenliang123 wants to merge 4 commits intoagentscope-ai:mainfrom
Conversation
Welcome to CoPaw! 🐾Hi @bowenliang123, this is your 6th Pull Request. 🙌 Join Developer CommunityThanks so much for your contribution! We'd love to invite you to join the official CoPaw developer group! You can find the Discord and DingTalk group links under the "Developer Community" section on our docs page: We truly appreciate your enthusiasm—and look forward to your future contributions! 😊 We'll review your PR soon. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a message history navigation feature to the chat interface, enabling users to navigate through their previous messages using the ArrowUp and ArrowDown keys. The implementation includes a new useMessageHistoryNavigation hook and utility functions for text extraction and textarea manipulation. Review feedback suggests refining the focus event handler to avoid resetting history when non-chat elements are focused, improving the readability of the message retrieval logic, and simplifying the text extraction utility using optional chaining.
There was a problem hiding this comment.
Pull request overview
Adds terminal-style Up/Down arrow navigation for recalling previously sent user messages in the console Chat page input (with basic multi-line gating).
Changes:
- Added a
useMessageHistoryNavigationhook that listens for ArrowUp/ArrowDown on the chat sender textarea and swaps the textarea value to prior user messages. - Added utilities to extract text from card-based user messages and to programmatically set textarea value while triggering an
inputevent.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
console/src/pages/Chat/utils.ts |
Adds helpers for extracting text from card-structured messages and for setting textarea value + dispatching an input event. |
console/src/pages/Chat/index.tsx |
Introduces a new hook that wires global key handling to navigate chat input history via chatRef message history. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Very funny~ Could you add the arrow usage hint to the chat input placeholder to inform users? |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Sure, the inputbox's placeholder is now updated to be shorter and consise as |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
bowenliang123
force-pushed
the
feat-history-arrow
branch
2 times, most recently
from
26c86d8 to
e92fae6
Compare
…keys on chat page
bowenliang123
force-pushed
the
feat-history-arrow
branch
from
e92fae6 to
203a2a7
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…e element’s prototype chain) to bypass React’s tracker, then dispatch the input event.
|
@zhijianma It's now ready for review, please check. |
Description
[Describe what this PR does and why]
Add keyboard navigation to recall previously sent messages in the chat input using Up/Down arrow keys, similar to terminal shells.
Press Up to recall older messages
Press Down to recall newer messages or restore draft
Multi-line support: cursor must be at first/last line to trigger history
hints in placeholder for inputbox:
Related Issue: Fixes #(issue_number) or Relates to #(issue_number)
Security Considerations: [If applicable, e.g. channel auth, env/config handling]
Type of Change
Component(s) Affected
Checklist
pre-commit run --all-fileslocally and it passespytestor as relevant) and they passTesting
[How to test these changes]
Local Verification Evidence
Additional Notes
[Optional: any other context]