[fix] Fix inverted Text/Markdown view in playground message editors#4554
Open
mmabrouk wants to merge 2 commits into
Open
[fix] Fix inverted Text/Markdown view in playground message editors#4554mmabrouk wants to merge 2 commits into
mmabrouk wants to merge 2 commits into
Conversation
The message editors had the Text/Markdown view inverted: the view-mode dropdown mapped markdownView to the wrong boolean, so picking 'Markdown' showed raw source and the default 'Text' showed rendered markdown. Fixed the mapping across every message editor (chat turns, prompt messages, variable inputs, the JSON object field) and the live markdown toggle button, whose icon and tooltip were also inverted. Also: - The view mode is now a shared, persisted atom (messageViewModeAtom), so switching one message switches all and the choice survives a refresh. - Text mode renders with the editor's proportional font instead of monospace, with spacing that matches the rendered markdown view. - Message text and placeholder align with the role label above them.
dosubot
Bot
added
the
size:M
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization 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:
📝 WalkthroughWalkthroughThis PR centralizes message editor view-mode state using a Jotai atom persisted in localStorage, migrates multiple components from local state to the shared atom, flips the ChangesMessage Editor View-Mode Persistence and Alignment
Sequence DiagramsequenceDiagram
participant localStorage as Browser Storage
participant atom as messageViewModeAtom
participant TurnAdapter as TurnMessageAdapter
participant ChatList as ChatMessageList
participant Editor as ChatMessageEditor
localStorage->>atom: Load persisted view mode ("text")
TurnAdapter->>atom: Read viewMode via useAtom
ChatList->>atom: Read viewMode via useAtom
atom-->>TurnAdapter: Provide shared viewMode
atom-->>ChatList: Provide shared viewMode
TurnAdapter->>Editor: Pass markdownView = (viewMode === "text")
ChatList->>Editor: Pass markdownView = (viewMode === "text")
Editor->>Editor: Render with inherited fonts (markdown mode off)
Editor->>localStorage: Persist viewMode changes on user toggle
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: e4d6a418-df8e-4d2e-ac00-03f6e42d6de8
📒 Files selected for processing (9)
web/oss/src/styles/globals.cssweb/packages/agenta-playground-ui/src/components/adapters/TurnMessageAdapter.tsxweb/packages/agenta-playground-ui/src/components/adapters/VariableControlAdapter.tsxweb/packages/agenta-ui/src/ChatMessage/components/ChatMessageEditor.tsxweb/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsxweb/packages/agenta-ui/src/ChatMessage/components/MarkdownToggleButton.tsxweb/packages/agenta-ui/src/drill-in/FieldRenderers/JsonObjectField.tsxweb/packages/agenta-ui/src/drill-in/index.tsweb/packages/agenta-ui/src/drill-in/state/messageViewModeAtom.ts
ardaerzin
approved these changes
Jun 5, 2026
Contributor
Railway Preview Environment
|
dosubot
Bot
added
size:L
The shared messageViewModeAtom is typed ViewMode, which includes "form". Chat and prompt message editors only handle text/markdown/json/yaml, and a cast hid the mismatch, so a persisted "form" value could leave the dropdown and editor inconsistent. Add toMessageViewMode() (form -> text) and use it in ChatMessageList and TurnMessageAdapter before deriving mode-dependent state, removing the unsafe cast. Addresses CodeRabbit review on PR #4554.
mmabrouk
force-pushed
the
fix/playground-message-view-mode
branch
from
10754b6 to
5e2ccc6
Compare
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.
Context
In the playground message editors, the Text/Markdown toggle was inverted. The default mode is "Text", but it rendered markdown, and picking "Markdown" showed the raw source. The dropdown mapped
markdownViewto the wrong boolean (viewMode === "markdown"), andmarkdownView={true}means "show raw source", so every label did the opposite of what it said. The live markdown toggle button had the same inverted icon/tooltip.On top of that, the Text mode rendered in a monospace code font with code-block padding, and the message text did not line up with the role label above it.
Changes
markdownViewtoviewMode === "text"everywhere a message editor is rendered: chat turns (TurnMessageAdapter), prompt messages (ChatMessageList), variable inputs (VariableControlAdapter), and the JSON object field (JsonObjectField). Now "Text" shows raw text and "Markdown" renders, matching the labels. Default is "Text".MarkdownToggleButton(when raw source is shown it now offers "Preview markdown", and vice versa).useStatewith a sharedatomWithStorage(messageViewModeAtom), so switching one message switches all of them and the choice survives a refresh.Before: default "Text" showed rendered markdown; "Markdown" showed raw monospace source.
After: default "Text" shows raw proportional text; "Markdown" renders.
Notes
agenta:message-view-mode).globals.css(scoped to.agenta-chat-message-editor) rather than theeditorClassNameprop, becauseChatMessageEditorrenders the editor withnoProvider, a mode whereEditorcurrently dropsclassName. ThatnoProviderbug is tracked as a separate follow-up; a stacked PR will fix it and migrate this padding to the prop.DrillInContent); left out of this PR since fixing it changes that surface's behavior and needs its own verification.Tests
tsc --noEmitpasses for@agenta/uiand@agenta/playground-ui.