feat(frontend): rich markdown agent chat composer#4927
Open
ardaerzin wants to merge 9 commits into
Open
Conversation
Replace the agent playground's plain-textarea Ant X Sender with a Lexical-based rich composer (RichChatInput in @agenta/ui), built on the 0.46 extension system (RichTextExtension + HistoryExtension). Composer features: - Live markdown shortcuts: bold/italic, bullet + ordered lists, quote, inline code and fenced code blocks — round-trip to markdown on send via a curated transformer set (no headings/checklists/tables/links). - Enter-to-send, structure-aware: plain Enter sends, but continues a list or code block when the caret is inside one; Cmd/Ctrl+Enter and Shift+Enter insert a newline. - Composer shell: imperative handle (focus/clear/setMarkdown for rewind- to-edit), prefix/header/footer slots, send button, onPasteFile. AgentChatPanel keeps all prior behavior by hosting its existing UI in the slots — attachments (paperclip/drop/paste), the message queue, HITL, and stop-while-streaming — and drives send through the unchanged handleSubmit. Adds @lexical/history to @agenta/ui and exports @agenta/ui/rich-chat-input.
dosubot
Bot
added
the
size:XL
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughAdds a Lexical-based ChangesRichChatInput component and AgentChatPanel integration
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…ubbles - Plain Enter always sends (even inside a list/code block). Shift+Enter and Cmd/Ctrl+Enter insert a context-aware newline (new list item in a list, new line in code, new paragraph in text) via insertParagraph, so block markdown shortcuts still fire on the new line. - Add TabIndentationPlugin: Tab / Shift+Tab nest + outdent list items. - Harden MessageRow fade-in: reveal once on mount (rAF not cancelled by an 'enter' flip when a sibling arrives) + 'shown || !enter' fallback, so a just-sent user bubble can't stay stuck at opacity-0 during the agent run.
Newline now dispatches INSERT_PARAGRAPH_COMMAND instead of calling selection.insertParagraph() directly, so ListPlugin's handler runs: a Shift+Enter (or Cmd/Ctrl+Enter) on an empty list item exits the list to a paragraph, matching native editor behavior. Non-empty items still get a new item; code/quote/paragraph are unchanged.
The queue / streaming / approval status was hosted in the composer's footer slot, so showing it grew the composer and pushed the editor upward (layout shift). Render it as a sibling between the message list and the composer instead — it now appears in the gap above the input without moving it.
Replace the separate Stop control in the status row with a send button that becomes a Stop button during an in-flight stream, so there is a single affordance instead of two competing ones.
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
Wrap the streaming Stop button in a spinning ring so the button itself signals an in-flight stream, and drop the separate "Streaming…" status row.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/oss/src/components/AgentChatSlice/AgentChatPanel.tsx (1)
655-674: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winKeep the draft until submit finishes
RichChatInputclears immediately after callingonSubmit, buthandleSubmitis async and can still fail whilefilesToParts()runs. That drops the drafted text/files on a read error. AwaitonSubmitbefore clearing, or restore the draft in acatch.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 3597362b-9cc6-4eb6-9060-0206b4a614c3
⛔ Files ignored due to path filters (1)
web/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
web/oss/src/components/AgentChatSlice/AgentChatPanel.tsxweb/packages/agenta-ui/package.jsonweb/packages/agenta-ui/src/RichChatInput/RichChatInput.tsxweb/packages/agenta-ui/src/RichChatInput/assets/submit.tsweb/packages/agenta-ui/src/RichChatInput/assets/theme.tsweb/packages/agenta-ui/src/RichChatInput/assets/transformers.tsweb/packages/agenta-ui/src/RichChatInput/index.tsweb/packages/agenta-ui/src/RichChatInput/plugins/CharacterCountPlugin.tsxweb/packages/agenta-ui/src/RichChatInput/plugins/EditableSyncPlugin.tsxweb/packages/agenta-ui/src/RichChatInput/plugins/EditorRefBridge.tsxweb/packages/agenta-ui/src/RichChatInput/plugins/SendButton.tsxweb/packages/agenta-ui/src/RichChatInput/plugins/SubmitPlugin.tsx
- Guard the Enter handler against event.isComposing so confirming an IME candidate no longer triggers a send. - Unify the "blank message" definition behind $isBlankMessage so the send button, plain-Enter, and the submit path agree — a whitespace-only draft no longer looks sendable while doing nothing. - preventDefault on a file paste so the editor doesn't also insert a sibling text/html clipboard payload. - Fix backwards onSubmit/submit docs (plain Enter sends; Cmd/Ctrl+Enter is newline).
Focus-within used the full brand-primary color, which read as a loud ring on the chat composer; drop it to a neutral border darkening. Add overflow-hidden so the footer row and its top border clip to the rounded corners instead of squaring off the bottom edges.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Replaces the agent playground's plain-textarea composer (Ant Design X
Sender) with a Lexical-based rich markdown composer —RichChatInput, a new component in@agenta/ui, built on the 0.46 extension system (RichTextExtension+HistoryExtension).Composer features
focus/clear/setMarkdown— used for rewind-to-edit),prefix/header/footerslots, a send button, andonPasteFile.dark:).Agent panel integration
AgentChatPanelkeeps all prior behavior by hosting its existing UI through the new slots — attachments (paperclip / drag / paste), the message queue, HITL approval, and stop-while-streaming — and drives send through the unchangedhandleSubmit. Rewind-to-edit now uses the composer's imperativesetMarkdown+focus.Notes
@lexical/historyto@agenta/ui; exports@agenta/ui/rich-chat-input.big-agents(the Lexical 0.40→0.46 upgrade, chore(frontend): upgrade Lexical 0.40 → 0.46 #4922, is already merged there).Verification
@agenta/uitsc + lint clean;osstsc shows no new errors in touched files.Test plan
**b**,- list,> quote,`code`,```fenced) — renders live