UI: Render reasoning as plain italic (match <thinking>) #7752
Conversation
…tyle; remove bounding container
dosubot
bot
added
size:L
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| * Render reasoning as simple italic text, matching how <thinking> content is shown. | ||
| * No borders, boxes, headers, timers, or collapsible behavior. | ||
| */ | ||
| export const ReasoningBlock = ({ content }: ReasoningBlockProps) => { |
There was a problem hiding this comment.
Missing test coverage for this component. Even though it's simpler now, would it make sense to add basic tests to ensure it renders correctly and maintains the expected styling?
| )} | ||
| {isCollapsed ? <CaretDownIcon /> : <CaretUpIcon />} | ||
| </div> | ||
| <div className="px-3 py-1"> |
There was a problem hiding this comment.
Consider adding accessibility support here. Since we're relying solely on visual styling (italic text) to distinguish reasoning content, could we add an ARIA label or role to help screen reader users? Something like:
|
|
||
| const { mcpServers, alwaysAllowMcp, currentCheckpoint, mode, apiConfiguration } = useExtensionState() | ||
| const { info: model } = useSelectedModel(apiConfiguration) | ||
| const [reasoningCollapsed, setReasoningCollapsed] = useState(true) |
There was a problem hiding this comment.
The state and are no longer used after the simplification. Should we remove this unused import and state declaration?
| } | ||
| }, [thought, prevThought]) | ||
|
|
||
| /** |
There was a problem hiding this comment.
Nice documentation! Could we expand it slightly to explain the design rationale? For example:
| {isCollapsed ? <CaretDownIcon /> : <CaretUpIcon />} | ||
| </div> | ||
| <div className="px-3 py-1"> | ||
| <div className="italic text-muted-foreground"> |
There was a problem hiding this comment.
Consider using a more semantic class name for better maintainability. Instead of just , perhaps or ? This would make the styling intent clearer:
hannesrudolph
added
the
Issue/PR - Triage
…g in message.metadata; render timer in UI
…t size, align inline
…dy padding (px-3); make lightbulb icon yellow
hannesrudolph
force-pushed
the
feature/flatten-reasoning-italic-thinking
branch
from
00afe75 to
ea322fd
Compare
…fect guard; add ReasoningMeta typing; reduce any casts
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
daniel-lxs
moved this from PR [Needs Prelim Review]
to PR [Needs Review]
in Roo Code Roadmap
- Remove unnecessary persistence logic for timer state - Remove updateMessageReasoningMeta handler from webviewMessageHandler - Remove ReasoningMeta type and related fields from WebviewMessage - Keep simple ephemeral timer that runs while reasoning is active - Only show timer when elapsed time is greater than 0
Remove bounding box/collapse and render reasoning with a heading and persistent timer.
Summary
Changes
Typing
{ messageTs: number; reasoningMeta?: { startedAt?: number; elapsedMs?: number } }.
i18n
Notes
Testing
Screenshot: