feat(web): render inline hex color swatches in chat messages - #6099
feat(web): render inline hex color swatches in chat messages#6099pranav100000 wants to merge 2 commits into
Conversation
…gg#5815) Chat prose and inline code spans that name a hex color now show a small swatch beside the literal, so reading a color no longer means leaving the thread. Prose runs through the existing SkillInlineText walker, which ChatMarkdown already applies to `p`/`li` and which skips `code` and `a` subtrees; inline code is handled in ChatMarkdown's `code` renderer. Only the full #RRGGBB and #RRGGBBAA forms match — shorthand #RGB is indistinguishable from an issue reference like pingdotgg#123. The swatch is decorative: aria-hidden keeps it out of the accessibility tree and out of copied markdown.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository 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:
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 |
github-actions
Bot
added
vouch:unvouched
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 77a0d1d. Configure here.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
t3code/apps/web/src/components/ChatMarkdown.tsx
Line 1485 in 77a0d1d
Decorate hex literals outside paragraphs and list items
When a literal appears in a Markdown heading or GFM table cell, such as ## Accent #FF5733, react-markdown does not route that text through the custom p or li renderers, so the literal remains undecorated. Apply the transformation at the text/AST layer or add coverage for the other text-bearing Markdown elements so swatches work throughout a chat message.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| import remarkBreaks from "remark-breaks"; | ||
| import remarkGfm from "remark-gfm"; | ||
| import { remarkGithubAlerts } from "../markdown-github-alerts"; | ||
| import { HexColorSwatch, parseHexColorLiteral } from "./chat/HexColorInlineText"; |
There was a problem hiding this comment.
When the same thread is opened on mobile, apps/mobile/src/features/threads/ThreadFeed.tsx:967-982 renders message text through SelectableMarkdownText or react-native-nitro-markdown, and neither renderer has equivalent hex decoration; this web-only integration therefore makes the feature disappear on mobile while web and desktop display it. Add equivalent mobile support, preferably by sharing the literal parsing rules.
AGENTS.md reference: AGENTS.md:L67-L70
Useful? React with 👍 / 👎.
ApprovabilityVerdict: Needs human review This PR introduces a new user-facing feature (inline color swatches for hex codes in chat), which warrants human review for new capability introductions. The implementation is well-tested and low-risk, but introduces visible UI changes. You can customize Macroscope's approvability policy. Learn more. |
The prose path already wraps a literal and its swatch in whitespace-nowrap; the inline-code path appended the swatch as a bare sibling inside <code>, and an atomic inline creates a soft wrap opportunity even with no whitespace, so a narrow column could drop the swatch onto its own line.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 59609db85c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| // The plain runs around skill chips are the same runs that carry hex colors. | ||
| if (cursor === 0) { | ||
| return <>{props.text}</>; | ||
| return <HexColorInlineText text={props.text} />; |
There was a problem hiding this comment.
Route all ordinary markdown text through the new decorator, not only text reached through SkillInlineText. ChatMarkdown calls renderSkillInlineMarkdownChildren only for paragraph and list-item renderers, so inputs such as ## Accent #FF5733 or a table cell containing #FF5733 bypass this component and render no swatch, even though the same literal in a paragraph works.
Useful? React with 👍 / 👎.
1 participant
When an assistant message contains a hex color literal (e.g.
#FF5733), render a small color-swatch chip beside it. NewHexColorInlineTextcomponent wired intoChatMarkdown; hex inside code spans/blocks is left untouched; supports 3/6/8-digit hex. Tests included (29 passing).Closes #5815.
Note
Render inline hex color swatches next to hex literals in chat messages
HexColorSwatchandHexColorInlineTextcomponents inHexColorInlineText.tsxto detect standalone#RRGGBBand#RRGGBBAAliterals in plain text and render a small decorative color swatch inline.ChatMarkdown.tsxto also render swatches when a hex literal appears inside an inline code span.SkillInlineText.tsxto wrap plain text segments withHexColorInlineText, so skill chip text also gets swatch decoration.#123) and embedded tokens are intentionally excluded via boundary checks inHEX_COLOR_TOKEN_REGEX.aria-hiddenand do not affect the accessibility tree or copied text.Macroscope summarized 59609db.
Note
Low Risk
Presentation-only chat markdown changes with conservative hex matching and no auth or data handling impact.
Overview
Chat messages now show a small color swatch next to full-form hex literals (
#RRGGBB/#RRGGBBAA) while leaving the text unchanged.A new
HexColorInlineTexthelper scans plain text and attachesHexColorSwatch(decorative,aria-hidden). It is wired throughSkillInlineTextfor paragraphs, lists, and skill-adjacent runs, and throughChatMarkdownfor inline code when the span is only a hex literal. Shorthand hex and issue-like#5815/#123are not matched so GitHub-style references stay plain.Tests cover parsing edge cases, markdown/skill integration, and timeline rendering for prose vs inline code.
Reviewed by Cursor Bugbot for commit 59609db. Bugbot is set up for automated code reviews on this repo. Configure here.