[feat] Agent composer + template chip polish - #5235
Conversation
…n focus - Remove the character counter from RichChatInput. No consumer ever passed maxLength, so it only rendered a bare, clutter count next to the send button. Drops the maxLength prop, the count/overLimit state, and the counter span; CharacterCountPlugin's count callback is now optional (it still reports text for onChange consumers). - Gate the Bold/Italic/Send/Newline format hints on editor focus: a new FocusStatePlugin (FOCUS_COMMAND/BLUR_COMMAND) drives a focused flag, and the hint row fades + rises in on focus. Kept mounted so its space never reflows the toolbar row.
The provenance chip above the home composer popped in/out instantly. Keep it mounted and drive an opacity + rise transition off the selected state, and retain the last picked template through a ref so the fade-out shows the real chip content instead of flipping to the sizing placeholder.
Switching templates swapped the chip content instantly, so its width jumped. The chip is w-fit and auto width can't be CSS-transitioned, so extract a TemplateChipDock that animates the chip's width between templates. The visible chip is the width-animating element (border/background travel with it, so shrink animates too, not just grow); an off-flow ghost at natural max-content width is measured via a ResizeObserver to drive that width, and the chip's children keep their size and clip rather than squish while it eases. The fade/rise visibility transition lives here too and runs alongside the morph.
The provenance chip used the neutral strip-input border while the selected composer forces the --ag-colorPrimary accent, so the docked tab and its box read as two mismatched shapes, and the composer's top border cut a seam across the chip's open bottom. Match the chip border to --ag-colorPrimary and nudge the chip down 1.5px so it overlaps (and hides) the composer's top border beneath it.
… seam The chip overlapped the composer's top border to hide it, but the composer root is position:relative and later in source order, so it painted over the absolute chip and the border showed through anyway. Give the chip wrapper z-10 so it stacks above the composer, and widen the overlap to a whole 2px so the covered border can't leave a subpixel hairline.
…s hidden The chip's selected tint (--ag-strip-selected-bg) is 6%-alpha in dark, so the composer's top border showed straight through it and the z-index + overlap couldn't hide the seam. Composite the tint over the composer's own base (--ag-colorBgContainer) so the chip background is opaque, which is also what a tab of the composer should be. Light mode is unchanged (the tint is opaque there).
dosubot
Bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughSummary by CodeRabbit
WalkthroughTemplate chips now support docked width and visibility animations, while provenance rendering preserves content during fade-out. RichChatInput tracks focus for shortcut hints and removes maxLength-based counter handling. ChangesTemplate chip docking
RichChatInput focus behavior
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Editor
participant FocusStatePlugin
participant RichChatInput
participant ShortcutHints
Editor->>FocusStatePlugin: dispatch focus or blur command
FocusStatePlugin->>RichChatInput: report focused state
RichChatInput->>ShortcutHints: update opacity and translation
sequenceDiagram
participant TemplateStrip
participant useTemplateProvenance
participant TemplateChipDock
participant StripComposer
TemplateStrip->>useTemplateProvenance: select or clear template
useTemplateProvenance->>TemplateChipDock: provide selected or retained template
TemplateChipDock->>StripComposer: render animated chip above composer
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/packages/agenta-ui/src/RichChatInput/RichChatInput.tsx (1)
270-270: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAuto-focus can miss the initial focus state.
FocusStatePluginonly updatesfocusedfromFOCUS_COMMAND/BLUR_COMMAND, so whenautoFocusis enabled the initialeditor.focus()can run before the handler is registered and the shortcut hints stay hidden until the next blur/refocus. MoveFocusStatePluginbeforeAutoFocusPlugin, or initializefocusedfrom the editor’s current focus state on mount.
🧹 Nitpick comments (2)
web/oss/src/components/TemplateStrip/components/TemplateChip.tsx (1)
29-34: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueCondense the comment to comply with the one-line guideline.
The 5-line comment at lines 29-34 exceeds the project's "one short line maximum" rule for in-code comments. While the opaque-background constraint is genuinely surprising, the explanation can be trimmed to a brief exception.
As per coding guidelines: "Keep in-code comments to one short line maximum unless a genuinely surprising constraint requires a brief exception."
✏️ Suggested condensation
// box-border matches ghost offsetWidth; opaque bg hides composer border through overlap. className={`box-border inline-flex w-fit items-center gap-2 whitespace-nowrap rounded-t-[9px] border-[1.5px] border-b-0 border-solid border-[var(--ag-colorPrimary)] bg-[var(--ag-colorBgContainer)] bg-[image:linear-gradient(var(--ag-strip-selected-bg),var(--ag-strip-selected-bg))] px-3 py-1.5 text-[12.5px] text-[var(--ag-colorTextSecondary)] ${className ?? ""}`}Source: Coding guidelines
web/oss/src/components/pages/agent-home/StripHome.tsx (1)
113-119: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueCondense the comment to comply with the one-line guideline.
The 7-line comment at lines 113-119 exceeds the project's "one short line maximum" rule. The positioning/overlap rationale is a genuinely surprising constraint, but the explanation can be trimmed to a brief exception.
As per coding guidelines: "Keep in-code comments to one short line maximum unless a genuinely surprising constraint requires a brief exception."
✏️ Suggested condensation
{/* Chip docks flush above composer; 2px overlap hides seam, z-10 paints above composer border. */} <div className="relative mt-11 flex flex-col items-stretch"> <div className="absolute bottom-full left-0 z-10 translate-y-[2px]">Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 0c6a57fc-e945-4e46-94e3-11ca42284969
📒 Files selected for processing (7)
web/oss/src/components/TemplateStrip/components/TemplateChip.tsxweb/oss/src/components/TemplateStrip/components/TemplateChipDock.tsxweb/oss/src/components/TemplateStrip/hooks/useTemplateProvenance.tsxweb/oss/src/components/pages/agent-home/StripHome.tsxweb/packages/agenta-ui/src/RichChatInput/RichChatInput.tsxweb/packages/agenta-ui/src/RichChatInput/plugins/CharacterCountPlugin.tsxweb/packages/agenta-ui/src/RichChatInput/plugins/FocusStatePlugin.tsx
- FocusStatePlugin: seed the focus flag from the current DOM focus on mount, so an autoFocus that fires before the FOCUS_COMMAND handler registers isn't missed and the shortcut hints show from the first paint. - Trim the TemplateChip and StripHome explanatory comments to a sentence or two, per the repo's one-line comment rule.
|
@coderabbitai review |
✅ Action performedReview finished.
|
1 participant
Context
Polish on the agent composer (the shared
RichChatInput) and the home/appstemplate chip. Three things read as unfinished: the composer showed a bare character count next to the send button, the Bold/Italic/Send/Newline format hints were always on regardless of focus, and the "From template" chip popped in/out and switched size instantly, with a visible border seam where it met the composer.Changes
Drop the character counter. No consumer ever passed
maxLength, so the counter only rendered a lone clutter number beside the send button. Removed the counter, themaxLengthprop, and thecount/overLimitstate.CharacterCountPlugin's count callback is now optional; it still reports text for theonChangeconsumers.Reveal format hints on focus. A new
FocusStatePlugin(LexicalFOCUS_COMMAND/BLUR_COMMAND) drives afocusedflag, and the hint row fades + rises in when the editor takes focus. It stays mounted so its width never reflows the toolbar row.Transition the template chip. The provenance chip above the home composer now:
w-fit, so auto width can't be CSS-transitioned. A newTemplateChipDockmeasures an off-flow ghost at natural (max-content) width via aResizeObserverand animates an explicit width on the visible chip; children keep their size and clip rather than squish while it eases.Connect the chip to the composer (no seam). The chip is a docked tab, so it should read as one shape with the composer. Three things were needed and each masked the next:
--ag-colorPrimary);z-10so it paints above the (relative, later-in-source) composer instead of under it;--ag-colorBgContainerso it's opaque. The raw--ag-strip-selected-bgis 6%-alpha in dark, so the composer border showed straight through the chip until the background was made opaque.Tests / notes
@agenta/uibuilds clean (tsc --noEmit); oss typecheck shows no new errors in any touched file.What to QA
/apps, pick a template. The chip fades + rises in above the composer and reads as one connected shape with it (continuous accent border, no seam line under the chip). Check dark mode specifically — that's where the seam lived.