CodeAccordion consolidations, editor UI breakout for diffs/fragments. #3011
Conversation
c387cb4 to
05bf6a0
Compare
|
20352ef to
9d3804f
Compare
|
New interim styling. We'll need a separate PR to fix spacing and introduce timeline-like formatting. I don't want this one to get too ambitious. |
cc90c7c to
d2d4623
Compare
d2d4623 to
13875da
Compare
| "viewDefinitions": "Visualizza definizioni", | ||
| "viewFileList": "Visualizza elenco file", | ||
| "viewSearchResults": "Visualizza risultati ricerca" | ||
| }, | ||
| "directoryOperations": { |
There was a problem hiding this comment.
Duplicate key detected: 'directoryOperations' is defined more than once in the JSON file. Please merge the two definitions into one to avoid unexpected behavior.
|
This pull request is quite large, with changes spanning across multiple components, including localization updates, new features, and refactoring. To make the review process more manageable, it would be beneficial to split the localization updates into a separate pull request from the feature additions and refactoring. This will help reviewers focus on each aspect more effectively and ensure a smoother integration process. Thank you for your understanding and cooperation! |
|
@mrubens @cte Ready for review. Context:As Roo becomes more agentic and as models get better we care more about the broad strokes and less about the details flying by at 100tk/s. Generally, the goal here is to start pulling together the styling in the Chat Stream and to quiet the noise down a bit while still giving users access to verbose outputs if they need them. Quick walkthrough: ChatRow refactor and 'mildly' unified UI.Still more work to do here but, the actions (tool use, api calls, diffs) now have unified styling and some of the components have been broken out. View API Requests in Editor PaneNo more code accordions to view a thousand-line API request. Now we break that content out into a preview tab: Screen.Recording.2025-04-29.at.2.31.50.PM.mov...And the same for Diffs-within-Markdown, Diff Tools, and other code fragments:...which means no more of this: |
|
nice, this looks wayyy better than the current one, some nitpicks though i feel like this takes up too much space, we can reduce the whitespace IMO i like this one a bit better (the inner padding, i mean) btw, did you intentionally make the rounded corners different? some are more rounded than the others. i think it'll look better if they are more consistent |
You're right. Let's nip-tuck this, I'll do a quick additional commit.
I evened them up a bit after I took the screenshot. But tbh there's like fifty of these and they all had independent hard-coded styling and markup. It's going to take a few PRs to chase them all down, DRY everything, and start building a 'universal' styling language. Right now I want to get this mechanism in so there's no rebasing every 2-3 days because... this is a lot of code in a very 'hot' part of the codebase. |
|
@sachasayan love this, sometime when view large api request will make webview crash, this pr will solve that problems as well 🙆 |
src/i18n/locales/ca/common.json
Outdated
| "chat": { | ||
| "shellIntegration": { | ||
| "troubleshootingGuide": "guia de resolució de problemes" | ||
| }, | ||
| "copyAsMarkdown": "Copia com a markdown", | ||
| "response": "Resposta", | ||
| "arguments": "Arguments", | ||
| "filePathFormat": " ({{filePath}})" |
There was a problem hiding this comment.
Not sure we want to add these to common - do they already exist in chat.json?
| }) | ||
| } | ||
| }} | ||
| title={t("chat:apiRequest.viewDetailsTooltip") ?? "View API Request Details"}> |
There was a problem hiding this comment.
We don't need inline English fallbacks for translations - they'll just use what's in the English json file if a match isn't found.
| title={t("chat:apiRequest.viewDetailsTooltip") ?? "View API Request Details"}> | |
| title={t("chat:apiRequest.viewDetailsTooltip")}> |
|
|
||
| import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian" | ||
| import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock" | ||
| import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian" // Restore CodeAccordian import |
There was a problem hiding this comment.
Do you mind doing a pass over this to remove unnecessary comments? The models are so bad at leaving these in despite whatever instructions I come up with.
There was a problem hiding this comment.
Yep. I have a regex I've been using, by the way. I'll throw it in the pre-commit hook or a bot or something like that when I get a chance:
\/\/[^\S\n]+(?:Add|Remove|Update|Import|Restore).{1,30}(\n)- Two forward slashes
- One or more whitespace non-newline characters
- One of the words "Add", "Remove", "Update", "Import", or "Restore".
- Between 1 and 3 other characters (except newline)
- Newline
|
I like the idea in general of cleaning up the chat-view and getting rid of accordions, thank you for taking this on. I agree with the feedback around getting to consistent corner rounding if we can, though I hear you on how many conflicts a PR like this is going to have to deal with. Getting into more fine-grained visual feedback - I find the new colored/bordered elements to be very visually prominent compared to user messages, task headers, question options, etc. It seems like most of the time they're just informational, so I wonder if we should dial back the prominence a bit. |
* feat: add copy button to code blocks * Adding ability to copy Code blocks * feat: add OpenRouter base URL and balance display component --------- Co-authored-by: ShlomoCode <78599753+ShlomoCode@users.noreply.github.com>
ca4ad1b to
f21cfc2
Compare
e5b2e25 to
cc30011
Compare
cc30011 to
c5c81d9
Compare
|
Love it, waiting it on air 💯 |
|
@sachasayan Thanks for your PR. Since there's been no activity for a few weeks after changes were requested, we're moving this back to draft status. Please update the PR or let us know your plans. If you're no longer working on it, consider closing it or creating a fresh issue using our issue-first approach. We appreciate your contribution and look forward to your updates! |
Context
Need: As a user, I want verbose outputs to be broken out of the chat stream so I can analyze them in more detail.
Need: As a user, I want the chat feed to have less visual clutter so I can better understand what the agent is doing.
As Roo becomes more agentic and outputs larger volumes of code (diffs, edits, reads, etc.) it becomes more important to understand what it is doing at a high level and less important for granular details to make it to the chat stream — however, these artifacts (or details) should still remain accessible to the user for closer inspection when necessary. Roo does this a bit already, but implementations vary right now — some outputs are presented as accordions, some are presented in-line, and some are presented as previews in new tabs.
This PR addresses these needs by starting a transitional sunset of the CodeAccordion component — if a code change is voluminous enough that it needs to have a mechanism for hiding it, then we don't need it in the stream at all — instead, we can prepare a preview of it in a new tab if the user needs to take a look.
Note: While this PR is in draft, basic colouring has been added to all forms of output from the user/llm to implicitly categorize them. My expectation/goal is to refine this coloring before merge — no visual work has been done yet. Right now, it's all just architectural movement, capturing all the cases, etc.
TODO
✅ Transitional state: Replace 'verbose' CodeAccordions with ViewOutputBlocks
✅ Consolidate all verbose output variants of into ViewOutputBlocks or ViewOutputBlock variants.
✅ Refine previewing function.
✅ Convert all styling to Tailwind.
✅ Refine styling.
✅ Confirm/fix tests.
✅ Build translations.
Screenshots
Important
Consolidates verbose outputs using
ViewOutputBlock, introduces content providers for API requests and tool outputs, and updates i18n files.CodeAccordionwithViewOutputBlockfor verbose outputs inChatRow.tsxandMarkdownBlock.tsx.ApiRequestContentProviderandToolOutputContentProviderinextension.tsfor handling API requests and tool outputs.showApiRequestDetailsandshowToolOutputinwebviewMessageHandler.ts.ApiRequestDetailsBlock.tsxfor displaying API request details.ViewOutputBlock.tsxfor handling large code outputs.execainsrc/__mocks__/execa.jsand updatesjest.config.js.This description was created by
for 29d00b8. You can customize this summary. It will automatically update as commits are pushed.