fix(frontend/copilot): constrain markdown heading sizes in user chat messages

[0ubbe]

Before

Formatted headings in user messages would look massive

After

Markdown headings (# H1 through ###### H6) and setext-style headings (====) in user chat messages rendered at their full HTML heading size, which looked disproportionately large in the chat bubble context.

Changes 🏗️

• Added Tailwind CSS overrides on the user message MessageContent wrapper to cap all heading elements (h1-h6) at text-lg font-semibold
• Only affects user messages in copilot chat (via group-[.is-user] selector); assistant messages are unchanged

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:
  • Send a user message containing # Heading 1 through ###### Heading 6 and verify they all render at constrained size
  • Send a message with ==== separator pattern and verify it doesn't render as a mega H1
  • Verify assistant messages with headings still render normally

[coderabbitai]

Walkthrough

This PR adds Tailwind group selectors to style nested heading elements (h1–h6) in user messages within the ChatMessagesContainer component. The change is purely styling-focused with no impact on control flow or runtime behavior.

Changes

Cohort / File(s)	Summary
User Message Heading Styles autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx	Adds Tailwind group selectors to apply specific font sizes and weights to nested heading elements (h1–h6) within user messages.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• fix(frontend): remove fixed min-height from CoPilot message container #12091: Modifies Tailwind classNames in the same ChatMessagesContainer component for ConversationContent min-height styling.

Suggested labels

size/s, platform/frontend

Suggested reviewers

• ntindle
• Abhi1992002
• kcze

Poem

🐰 A whisker twitch, a hop so small,
Headings now styled, standing tall,
Group selectors dance with grace,
Making user messages a prettier place! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(frontend/copilot): constrain markdown heading sizes in user chat messages' accurately and specifically describes the main change: constraining markdown heading sizes in user messages.
Description check	✅ Passed	The pull request description clearly explains the problem (oversized markdown headings in user messages), provides before/after visual examples, and details the CSS changes made.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch lluisagusti/secrt-2138-fixfrontendcopilot-markdown-headings-in-user-messages-render

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

[github-actions]

🔍 PR Overlap Detection

This check compares your PR against all other open PRs targeting the same branch to detect potential merge conflicts early.

🟢 Low Risk — File Overlap Only

These PRs touch the same files but different sections (click to expand)

• feat(platform): load copilot messages from newest first with cursor-based pagination #12328 (kcze · updated 3h ago)

  • autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx: L207-211

• feat(frontend): Show thinking indicator between CoPilot tool calls #12203 (Otto-AGPT · updated 12d ago)

  • Shared files: autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx

Summary: 0 conflict(s), 0 medium risk, 2 low risk (out of 2 PRs with file overlap)

---

Auto-generated on push. Ignores: openapi.json, lock files.