Agent Mode: match chat composer sizing - #632
Merged
Merged
Conversation
📝 WalkthroughWalkthroughAgent Mode now supports a persisted fullscreen composer on empty timelines. Expansion state flows through ChangesAgent fullscreen composer
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant AgentMode
participant localStorage
participant EmptyAgentState
participant AgentComposer
AgentMode->>localStorage: Read agentFullscreen
AgentMode->>EmptyAgentState: Pass expansion state and toggle handler
EmptyAgentState->>AgentComposer: Pass composer expansion props
AgentComposer->>AgentMode: Invoke expansion toggle
AgentMode->>localStorage: Persist updated state
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Deploying maple with
|
| Latest commit: |
f817909
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2674f1bd.maple-ca8.pages.dev |
| Branch Preview URL: | https://codex-review-maple-issue-631.maple-ca8.pages.dev |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/components/AgentMode.tsx (1)
2320-2341: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse the shared button primitive and wrap the long class declarations.
Use the existing
Buttoncomponent for this control; Lines 2323 and 2341 also exceed the 100-character limit.As per coding guidelines, use existing shadcn/ui components from
src/components/ui/instead of creating custom UI components, and enforce a 100-character line limit for TypeScript/React code.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/AgentMode.tsx` around lines 2320 - 2341, The fullscreen toggle in the AgentMode composer should use the shared Button component instead of a native button, preserving its existing behavior, styling, accessibility label, and icon content. Also reformat the long className declarations around the toggle and Textarea so every TypeScript/React line stays within the 100-character limit.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/AgentMode.tsx`:
- Around line 2299-2310: Update the textarea sizing effect in AgentMode to
recalculate when the textarea’s dimensions change, not only when input or
isExpanded changes. Observe textareaRef.current with a ResizeObserver, rerun the
existing height measurement on resize, and clean up the observer when the effect
dependencies change or the component unmounts.
---
Nitpick comments:
In `@frontend/src/components/AgentMode.tsx`:
- Around line 2320-2341: The fullscreen toggle in the AgentMode composer should
use the shared Button component instead of a native button, preserving its
existing behavior, styling, accessibility label, and icon content. Also reformat
the long className declarations around the toggle and Textarea so every
TypeScript/React line stays within the 100-character limit.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 49b99aa2-4b3d-414a-b34b-c64f06f49aee
📒 Files selected for processing (1)
frontend/src/components/AgentMode.tsx
Comment on lines
+2299
to
+2310
| useLayoutEffect(() => { | ||
| const textarea = textareaRef.current; | ||
| if (!textarea) return; | ||
|
|
||
| if (isExpanded) { | ||
| textarea.style.height = ""; | ||
| return; | ||
| } | ||
|
|
||
| textarea.style.height = "auto"; | ||
| textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`; | ||
| }, [input, isExpanded]); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the component structure first, then inspect the relevant slices.
ast-grep outline frontend/src/components/AgentMode.tsx --view expanded || true
echo
echo "---- around textarea sizing ----"
sed -n '2260,2335p' frontend/src/components/AgentMode.tsx
echo
echo "---- search for sidebar/fullscreen/resize-related state ----"
rg -n "isExpanded|fullscreen|sidebar|resize|width|scrollHeight|useLayoutEffect|textareaRef" frontend/src/components/AgentMode.tsxRepository: OpenSecretCloud/Maple
Length of output: 8163
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "---- AgentMode render around AgentComposer usage ----"
sed -n '1750,1825p' frontend/src/components/AgentMode.tsx
echo
echo "---- composer/input state and sidebar layout around parent ----"
sed -n '1400,1515p' frontend/src/components/AgentMode.tsx
echo
echo "---- ChatComposerSurface definition ----"
rg -n "function ChatComposerSurface|const ChatComposerSurface|export function ChatComposerSurface" frontend/src/components -g '*.tsx' -g '*.ts'Repository: OpenSecretCloud/Maple
Length of output: 7676
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "---- ChatComposerSurface implementation ----"
sed -n '110,190p' frontend/src/components/chat/ChatTurn.tsx
echo
echo "---- AgentMode root/layout around sidebar state ----"
sed -n '1420,1475p' frontend/src/components/AgentMode.tsx
echo
echo "---- any resize observers or measurements in AgentMode ----"
rg -n "ResizeObserver|resize|measure|scrollHeight|clientWidth|offsetWidth|getBoundingClientRect" frontend/src/components/AgentMode.tsx frontend/src/components/chat/ChatTurn.tsxRepository: OpenSecretCloud/Maple
Length of output: 4158
Recalculate textarea height on resize.
Width changes from sidebar toggles or window/orientation changes can rewrap the same input, but this effect only reruns on input/isExpanded, so the textarea can keep a stale height until the user types again. Observe the element size and rerun the measurement.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/AgentMode.tsx` around lines 2299 - 2310, Update the
textarea sizing effect in AgentMode to recalculate when the textarea’s
dimensions change, not only when input or isExpanded changes. Observe
textareaRef.current with a ResizeObserver, rerun the existing height measurement
on resize, and clean up the observer when the effect dependencies change or the
component unmounts.
16 tasks
Collaborator
|
Tested. Works as expected. |
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
2 participants
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.
Summary
agentFullscreenAgentModeImplementation
This intentionally stays Agent-only and in one existing file. It continues to reuse
ChatComposerSurfaceandCHAT_COMPOSER_TEXTAREA_CLASS; it does not refactor or modify UnifiedChat.Validation
bun run typecheckbun test— 105 passedbun run lint— 0 errors (12 existing warnings)bun run buildbun run format:checkCloses #631
Summary by CodeRabbit