Collapse long user messages by default

[notkainoa]

What Changed

• Add expand/collapse controls for long user prompts
• Preserve copy and revert actions in the footer
• Add tests for collapsed, expanded, and short messages

Why

Big user messages can take up way too much vertical space.

UI Changes

Before:

After:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Note

Collapse long user messages by default in chat timeline

• Adds a CollapsibleUserMessageBody component in MessagesTimeline.tsx that wraps user message content in a collapsible container with a bottom fade mask.
• Messages exceeding 8 lines or 600 characters are collapsed by default; a toggle button switches between 'Show full message' and 'Show less'.
• Footer actions (copy, revert, timestamp) remain visible while the message is collapsed.
• Behavioral Change: long user messages no longer render fully expanded by default — they start collapsed with a fade overlay.

^{Macroscope summarized 946a764.}

---

Note

Low Risk
Low risk UI behavior change in MessagesTimeline that adds local expand/collapse state for long user messages; main risk is minor layout/interaction regressions around message actions and scrolling.

Overview
Long user messages in MessagesTimeline now start collapsed by default (when over 8 lines or 600 chars), showing a fade/masked overflow and a Show full message / Show less toggle.

User-message footer actions (e.g. copy link and revert) are preserved by moving the message body + footer into a new CollapsibleUserMessageBody wrapper, and new browser/SSR tests cover collapsed/expanded behavior and ensure short messages remain uncollapsed.

^{Reviewed by Cursor Bugbot for commit 946a764. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 46ef9a8f-44ab-4741-94da-c88a8245bda4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[macroscopeapp]

Approvability

Verdict: Approved

Self-contained UI enhancement that adds collapse/expand functionality for long user messages. Changes are purely presentational with CSS-based height limiting and toggle button, with no impact on message data or processing. Extensive test coverage included.

^{You can customize Macroscope's approvability policy. Learn more.}

Dismissing prior approval to re-evaluate 86ef8ad

Dismissing prior approval to re-evaluate 946a764

[juliusmarminge]

nice