feat: add "Preview System Prompt" button to Prompts settings for improved discoverability #7329
Conversation
- Added system prompt preview functionality to PromptsSettings component - Added dialog for displaying the system prompt content - Added message handlers for systemPrompt events - Added translation for preview description - Fixes #7328
dosubot
bot
added
size:M
hannesrudolph
added
the
Issue/PR - Triage
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| } else if (message.type === "systemPrompt") { | ||
| if (message.text) { | ||
| setSelectedPromptContent(message.text) | ||
| setSelectedPromptTitle(`System Prompt (${message.mode} mode)`) |
There was a problem hiding this comment.
Consider using the translation function (t) to set the system prompt title instead of a hard-coded template literal. For example, use t('prompts:systemPrompt.title', { modeName: message.mode }) to ensure consistency with translations.
| setSelectedPromptTitle(`System Prompt (${message.mode} mode)`) | |
| setSelectedPromptTitle(t('prompts:systemPrompt.title', { modeName: message.mode })) |
This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.
|
|
||
| {/* System Prompt Preview Dialog */} | ||
| {isDialogOpen && ( | ||
| <div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]"> |
There was a problem hiding this comment.
For improved accessibility, consider adding appropriate ARIA attributes (e.g., role='dialog', aria-modal='true') to the system prompt preview modal container.
| <div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]"> | |
| <div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]" role="dialog" aria-modal="true"> |
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
|
|
||
| <Section> | ||
| {/* System Prompt Preview Section */} | ||
| <div className="mb-4"> |
There was a problem hiding this comment.
This component is adding significant new functionality without any test coverage. Consider adding tests for:
- The message event handlers (lines 60-79)
- The dialog state management
- The button click handlers
- The integration with vscode.postMessage
| </SectionHeader> | ||
|
|
||
| <Section> | ||
| {/* System Prompt Preview Section */} |
There was a problem hiding this comment.
This entire system prompt preview section (lines 135-167) duplicates functionality that already exists in ModesView.tsx. Could we extract this into a shared component like <SystemPromptPreview /> to follow DRY principles?
| setTestPrompt(message.text) | ||
| } | ||
| setIsEnhancing(false) | ||
| } else if (message.type === "systemPrompt") { |
There was a problem hiding this comment.
Missing error handling here. What happens if message.text or message.mode is undefined? Consider adding defensive checks to prevent runtime errors.
| <div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]"> | ||
| <div className="w-[calc(100vw-100px)] h-full bg-vscode-editor-background shadow-md flex flex-col relative"> | ||
| <div className="flex-1 p-5 overflow-y-auto min-h-0"> | ||
| <Button |
There was a problem hiding this comment.
Accessibility issue: This close button only has an icon without an aria-label. Screen reader users won't know what this button does. Consider adding aria-label="Close dialog".
| </div> | ||
| <div className="flex justify-end p-3 px-5 border-t border-vscode-editor-lineHighlightBorder bg-vscode-editor-background"> | ||
| <Button variant="secondary" onClick={() => setIsDialogOpen(false)}> | ||
| {t("prompts:createModeDialog.close")} |
There was a problem hiding this comment.
This translation key 'prompts:createModeDialog.close' seems to be borrowed from a different context (createModeDialog). Consider adding a dedicated translation key for this dialog, like 'prompts:systemPromptDialog.close' for better maintainability.
|
|
||
| {/* System Prompt Preview Dialog */} | ||
| {isDialogOpen && ( | ||
| <div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]"> |
There was a problem hiding this comment.
The dialog styling mixes inline Tailwind classes with what appears to be VSCode-specific CSS variables. For consistency and maintainability, consider consolidating to one approach. Also, the fixed positioning with 'inset-0' might cause issues on smaller screens.
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
github-project-automation
bot
moved this from PR [Needs Prelim Review]
to Done
in Roo Code Roadmap
This PR adds the "Preview System Prompt" button directly to the Prompts settings tab to improve discoverability and user experience.
Context
While investigating issue #7328, it was noted that the "Preview System Prompt" button exists in the Modes section but users may have difficulty finding it there. This PR adds the same functionality to the Prompts settings tab where users might naturally look for it.
Changes
Benefits
Testing
Note
The original issue #7328 was closed by the reporter after finding the button in the Modes section. However, this enhancement still provides value by making the feature more discoverable.
Closes #7328
Important
Adds a "Preview System Prompt" button to
PromptsSettings.tsxfor improved discoverability, with dialog display and copy functionality, and updates translations inprompts.json.PromptsSettings.tsxfor better discoverability.systemPromptevents inPromptsSettings.tsx.prompts.jsonto include translations for the new button and its description.This description was created by
for e42b6fa. You can customize this summary. It will automatically update as commits are pushed.