|
|
@@ -20,17 +20,13 @@ import {
|
|
|
GroupEntry,
|
|
|
} from "../../../../src/shared/modes"
|
|
|
import { CustomModeSchema } from "../../../../src/core/config/CustomModesSchema"
|
|
|
-import {
|
|
|
- supportPrompt,
|
|
|
- SupportPromptType,
|
|
|
- supportPromptLabels,
|
|
|
- supportPromptDescriptions,
|
|
|
-} from "../../../../src/shared/support-prompt"
|
|
|
+import { supportPrompt, SupportPromptType } from "../../../../src/shared/support-prompt"
|
|
|
|
|
|
import { TOOL_GROUPS, GROUP_DISPLAY_NAMES, ToolGroup } from "../../../../src/shared/tool-groups"
|
|
|
import { vscode } from "../../utils/vscode"
|
|
|
import { Tab, TabContent, TabHeader } from "../common/Tab"
|
|
|
import i18next from "i18next"
|
|
|
+import { useAppTranslation } from "../../i18n/TranslationContext"
|
|
|
|
|
|
// Get all available groups that should show in prompts view
|
|
|
const availableGroups = (Object.keys(TOOL_GROUPS) as ToolGroup[]).filter((group) => !TOOL_GROUPS[group].alwaysAvailable)
|
|
|
@@ -47,6 +43,7 @@ function getGroupName(group: GroupEntry): ToolGroup {
|
|
|
}
|
|
|
|
|
|
const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
+ const { t } = useAppTranslation()
|
|
|
const {
|
|
|
customModePrompts,
|
|
|
customSupportPrompts,
|
|
|
@@ -405,22 +402,25 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
return (
|
|
|
<Tab>
|
|
|
<TabHeader className="flex justify-between items-center">
|
|
|
- <h3 className="text-vscode-foreground m-0">Prompts</h3>
|
|
|
- <VSCodeButton onClick={onDone}>Done</VSCodeButton>
|
|
|
+ <h3 className="text-vscode-foreground m-0">{t("prompts:title")}</h3>
|
|
|
+ <VSCodeButton onClick={onDone}>{t("prompts:done")}</VSCodeButton>
|
|
|
</TabHeader>
|
|
|
|
|
|
<TabContent>
|
|
|
<div>
|
|
|
<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
|
|
|
- <h3 className="text-vscode-foreground m-0">Modes</h3>
|
|
|
+ <h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
|
|
|
<div className="flex gap-2">
|
|
|
- <VSCodeButton appearance="icon" onClick={openCreateModeDialog} title="Create new mode">
|
|
|
+ <VSCodeButton
|
|
|
+ appearance="icon"
|
|
|
+ onClick={openCreateModeDialog}
|
|
|
+ title={t("prompts:modes.createNewMode")}>
|
|
|
<span className="codicon codicon-add"></span>
|
|
|
</VSCodeButton>
|
|
|
<div className="relative inline-block">
|
|
|
<VSCodeButton
|
|
|
appearance="icon"
|
|
|
- title="Edit modes configuration"
|
|
|
+ title={t("prompts:modes.editModesConfig")}
|
|
|
className="flex"
|
|
|
onClick={(e: React.MouseEvent) => {
|
|
|
e.preventDefault()
|
|
|
@@ -448,7 +448,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
setShowConfigMenu(false)
|
|
|
}}
|
|
|
onClick={(e) => e.preventDefault()}>
|
|
|
- Edit Global Modes
|
|
|
+ {t("prompts:modes.editGlobalModes")}
|
|
|
</div>
|
|
|
<div
|
|
|
className="p-2 cursor-pointer text-vscode-foreground text-sm border-t border-vscode-input-border"
|
|
|
@@ -465,7 +465,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
setShowConfigMenu(false)
|
|
|
}}
|
|
|
onClick={(e) => e.preventDefault()}>
|
|
|
- Edit Project Modes (.roomodes)
|
|
|
+ {t("prompts:modes.editProjectModes")}
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
@@ -474,7 +474,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
</div>
|
|
|
|
|
|
<div className="text-sm text-vscode-descriptionForeground mb-3">
|
|
|
- Hit the + to create a new custom mode, or just ask Roo in chat to create one for you!
|
|
|
+ {t("prompts:modes.createModeHelpText")}
|
|
|
</div>
|
|
|
|
|
|
<div className="flex gap-2 items-center mb-3 flex-wrap py-1">
|
|
|
@@ -503,7 +503,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
{mode && findModeBySlug(mode, customModes) && (
|
|
|
<div className="flex gap-3 mb-4">
|
|
|
<div className="flex-1">
|
|
|
- <div className="font-bold mb-1">Name</div>
|
|
|
+ <div className="font-bold mb-1">{t("prompts:createModeDialog.name.label")}</div>
|
|
|
<div className="flex gap-2">
|
|
|
<VSCodeTextField
|
|
|
value={getModeProperty(findModeBySlug(mode, customModes), "name") ?? ""}
|
|
|
@@ -524,7 +524,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
/>
|
|
|
<VSCodeButton
|
|
|
appearance="icon"
|
|
|
- title="Delete mode"
|
|
|
+ title={t("prompts:createModeDialog.deleteMode")}
|
|
|
onClick={() => {
|
|
|
vscode.postMessage({
|
|
|
type: "deleteCustomMode",
|
|
|
@@ -539,7 +539,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
)}
|
|
|
<div style={{ marginBottom: "16px" }}>
|
|
|
<div className="flex justify-between items-center mb-1">
|
|
|
- <div className="font-bold">Role Definition</div>
|
|
|
+ <div className="font-bold">{t("prompts:roleDefinition.title")}</div>
|
|
|
{!findModeBySlug(mode, customModes) && (
|
|
|
<VSCodeButton
|
|
|
appearance="icon"
|
|
|
@@ -549,15 +549,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
handleAgentReset(currentMode.slug, "roleDefinition")
|
|
|
}
|
|
|
}}
|
|
|
- title="Reset to default"
|
|
|
+ title={t("prompts:roleDefinition.resetToDefault")}
|
|
|
data-testid="role-definition-reset">
|
|
|
<span className="codicon codicon-discard"></span>
|
|
|
</VSCodeButton>
|
|
|
)}
|
|
|
</div>
|
|
|
<div className="text-sm text-vscode-descriptionForeground mb-2">
|
|
|
- Define Roo's expertise and personality for this mode. This description shapes how Roo
|
|
|
- presents itself and approaches tasks.
|
|
|
+ {t("prompts:roleDefinition.description")}
|
|
|
</div>
|
|
|
<VSCodeTextArea
|
|
|
value={(() => {
|
|
|
@@ -593,7 +592,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
{/* Mode settings */}
|
|
|
<>
|
|
|
<div style={{ marginBottom: "12px" }}>
|
|
|
- <div style={{ fontWeight: "bold", marginBottom: "4px" }}>API Configuration</div>
|
|
|
+ <div style={{ fontWeight: "bold", marginBottom: "4px" }}>
|
|
|
+ {t("prompts:apiConfiguration.title")}
|
|
|
+ </div>
|
|
|
<div style={{ marginBottom: "8px" }}>
|
|
|
<VSCodeDropdown
|
|
|
value={currentApiConfigName || ""}
|
|
|
@@ -612,7 +613,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
))}
|
|
|
</VSCodeDropdown>
|
|
|
<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
|
|
|
- Select which API configuration to use for this mode
|
|
|
+ {t("prompts:apiConfiguration.select")}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -620,12 +621,16 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
{/* Show tools for all modes */}
|
|
|
<div className="mb-4">
|
|
|
<div className="flex justify-between items-center mb-1">
|
|
|
- <div className="font-bold">Available Tools</div>
|
|
|
+ <div className="font-bold">{t("prompts:tools.title")}</div>
|
|
|
{findModeBySlug(mode, customModes) && (
|
|
|
<VSCodeButton
|
|
|
appearance="icon"
|
|
|
onClick={() => setIsToolsEditMode(!isToolsEditMode)}
|
|
|
- title={isToolsEditMode ? "Done editing" : "Edit tools"}>
|
|
|
+ title={
|
|
|
+ isToolsEditMode
|
|
|
+ ? t("prompts:tools.doneEditing")
|
|
|
+ : t("prompts:tools.editTools")
|
|
|
+ }>
|
|
|
<span
|
|
|
className={`codicon codicon-${isToolsEditMode ? "check" : "edit"}`}></span>
|
|
|
</VSCodeButton>
|
|
|
@@ -633,7 +638,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
</div>
|
|
|
{!findModeBySlug(mode, customModes) && (
|
|
|
<div className="text-sm text-vscode-descriptionForeground mb-2">
|
|
|
- Tools for built-in modes cannot be modified
|
|
|
+ {t("prompts:tools.builtInModesText")}
|
|
|
</div>
|
|
|
)}
|
|
|
{isToolsEditMode && findModeBySlug(mode, customModes) ? (
|
|
|
@@ -655,7 +660,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
{GROUP_DISPLAY_NAMES[group]}
|
|
|
{group === "edit" && (
|
|
|
<div className="text-xs text-vscode-descriptionForeground mt-0.5">
|
|
|
- Allowed files:{" "}
|
|
|
+ {t("prompts:tools.allowedFiles")}{" "}
|
|
|
{(() => {
|
|
|
const currentMode = getCurrentMode()
|
|
|
const editGroup = currentMode?.groups?.find(
|
|
|
@@ -664,7 +669,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
g[0] === "edit" &&
|
|
|
g[1]?.fileRegex,
|
|
|
)
|
|
|
- if (!Array.isArray(editGroup)) return "all files"
|
|
|
+ if (!Array.isArray(editGroup)) return t("prompts:allFiles")
|
|
|
return (
|
|
|
editGroup[1].description ||
|
|
|
`/${editGroup[1].fileRegex}/`
|
|
|
@@ -708,7 +713,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
alignItems: "center",
|
|
|
marginBottom: "4px",
|
|
|
}}>
|
|
|
- <div style={{ fontWeight: "bold" }}>Mode-specific Custom Instructions (optional)</div>
|
|
|
+ <div style={{ fontWeight: "bold" }}>{t("prompts:customInstructions.title")}</div>
|
|
|
{!findModeBySlug(mode, customModes) && (
|
|
|
<VSCodeButton
|
|
|
appearance="icon"
|
|
|
@@ -718,7 +723,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
handleAgentReset(currentMode.slug, "customInstructions")
|
|
|
}
|
|
|
}}
|
|
|
- title="Reset to default"
|
|
|
+ title={t("prompts:customInstructions.resetToDefault")}
|
|
|
data-testid="custom-instructions-reset">
|
|
|
<span className="codicon codicon-discard"></span>
|
|
|
</VSCodeButton>
|
|
|
@@ -730,7 +735,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
marginBottom: "8px",
|
|
|
}}>
|
|
|
- Add behavioral guidelines specific to {getCurrentMode()?.name || "Code"} mode.
|
|
|
+ {t("prompts:customInstructions.description", {
|
|
|
+ modeName: getCurrentMode()?.name || "Code",
|
|
|
+ })}
|
|
|
</div>
|
|
|
<VSCodeTextArea
|
|
|
value={(() => {
|
|
|
@@ -774,31 +781,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
marginTop: "5px",
|
|
|
}}>
|
|
|
- Custom instructions specific to {getCurrentMode()?.name || "Code"} mode can also be loaded
|
|
|
- from{" "}
|
|
|
- <span
|
|
|
- style={{
|
|
|
- color: "var(--vscode-textLink-foreground)",
|
|
|
- cursor: "pointer",
|
|
|
- textDecoration: "underline",
|
|
|
- }}
|
|
|
- onClick={() => {
|
|
|
- const currentMode = getCurrentMode()
|
|
|
- if (!currentMode) return
|
|
|
-
|
|
|
- // Open or create an empty file
|
|
|
- vscode.postMessage({
|
|
|
- type: "openFile",
|
|
|
- text: `./.clinerules-${currentMode.slug}`,
|
|
|
- values: {
|
|
|
- create: true,
|
|
|
- content: "",
|
|
|
- },
|
|
|
- })
|
|
|
- }}>
|
|
|
- .clinerules-{getCurrentMode()?.slug || "code"}
|
|
|
- </span>{" "}
|
|
|
- in your workspace.
|
|
|
+ {t("prompts:customInstructions.loadFromFile", {
|
|
|
+ modeName: getCurrentMode()?.name || "Code",
|
|
|
+ modeSlug: getCurrentMode()?.slug || "code",
|
|
|
+ })}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -822,11 +808,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
}
|
|
|
}}
|
|
|
data-testid="preview-prompt-button">
|
|
|
- Preview System Prompt
|
|
|
+ {t("prompts:systemPrompt.preview")}
|
|
|
</VSCodeButton>
|
|
|
<VSCodeButton
|
|
|
appearance="icon"
|
|
|
- title="Copy system prompt to clipboard"
|
|
|
+ title={t("prompts:systemPrompt.copy")}
|
|
|
onClick={() => {
|
|
|
const currentMode = getCurrentMode()
|
|
|
if (currentMode) {
|
|
|
@@ -855,7 +841,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
// The React context will update the global state
|
|
|
setEnableCustomModeCreation(e.target.checked)
|
|
|
}}>
|
|
|
- <span style={{ fontWeight: "500" }}>Enable Custom Mode Creation Through Prompts</span>
|
|
|
+ <span style={{ fontWeight: "500" }}>{t("prompts:customModeCreation.enableTitle")}</span>
|
|
|
</VSCodeCheckbox>
|
|
|
<p
|
|
|
style={{
|
|
|
@@ -863,10 +849,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
marginTop: "5px",
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
}}>
|
|
|
- When enabled, Roo allows you to create custom modes using prompts like ‘Make me a custom
|
|
|
- mode that…’. Disabling this reduces your system prompt by about 700 tokens when this feature
|
|
|
- isn’t needed. When disabled you can still manually create custom modes using the + button
|
|
|
- above or by editing the related config JSON.
|
|
|
+ {t("prompts:customModeCreation.description")}
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
@@ -878,33 +861,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
aria-expanded={isSystemPromptDisclosureOpen}>
|
|
|
<span
|
|
|
className={`codicon codicon-${isSystemPromptDisclosureOpen ? "chevron-down" : "chevron-right"} mr-1`}></span>
|
|
|
- <span>Advanced: Override System Prompt</span>
|
|
|
+ <span>{t("prompts:advancedSystemPrompt.title")}</span>
|
|
|
</button>
|
|
|
|
|
|
{isSystemPromptDisclosureOpen && (
|
|
|
<div className="text-xs text-vscode-descriptionForeground mt-2 ml-5">
|
|
|
- You can completely replace the system prompt for this mode (aside from the role
|
|
|
- definition and custom instructions) by creating a file at{" "}
|
|
|
- <span
|
|
|
- className="text-vscode-textLink-foreground cursor-pointer underline"
|
|
|
- onClick={() => {
|
|
|
- const currentMode = getCurrentMode()
|
|
|
- if (!currentMode) return
|
|
|
-
|
|
|
- // Open or create an empty file
|
|
|
- vscode.postMessage({
|
|
|
- type: "openFile",
|
|
|
- text: `./.roo/system-prompt-${currentMode.slug}`,
|
|
|
- values: {
|
|
|
- create: true,
|
|
|
- content: "",
|
|
|
- },
|
|
|
- })
|
|
|
- }}>
|
|
|
- .roo/system-prompt-{getCurrentMode()?.slug || "code"}
|
|
|
- </span>{" "}
|
|
|
- in your workspace. This is a very advanced feature that bypasses built-in safeguards and
|
|
|
- consistency checks (especially around tool usage), so be careful!
|
|
|
+ {t("prompts:advancedSystemPrompt.description", {
|
|
|
+ modeSlug: getCurrentMode()?.slug || "code",
|
|
|
+ })}
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
@@ -912,15 +876,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
|
|
|
<div className="pb-5 border-b border-vscode-input-border">
|
|
|
<h3 style={{ color: "var(--vscode-foreground)", marginBottom: "12px" }}>
|
|
|
- Custom Instructions for All Modes
|
|
|
+ {t("prompts:globalCustomInstructions.title")}
|
|
|
</h3>
|
|
|
|
|
|
<div className="text-sm text-vscode-descriptionForeground mb-2">
|
|
|
- These instructions apply to all modes. They provide a base set of behaviors that can be enhanced
|
|
|
- by mode-specific instructions below.
|
|
|
- <br />
|
|
|
- If you would like Roo to think and speak in a different language than your editor display
|
|
|
- language ({i18next.language}), you can specify it here.
|
|
|
+ {t("prompts:globalCustomInstructions.description", { language: i18next.language })}
|
|
|
</div>
|
|
|
<VSCodeTextArea
|
|
|
value={customInstructions ?? ""}
|
|
|
@@ -940,22 +900,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
data-testid="global-custom-instructions-textarea"
|
|
|
/>
|
|
|
<div className="text-xs text-vscode-descriptionForeground mt-1.5 mb-10">
|
|
|
- Instructions can also be loaded from{" "}
|
|
|
- <span
|
|
|
- className="text-vscode-textLink-foreground cursor-pointer underline"
|
|
|
- onClick={() =>
|
|
|
- vscode.postMessage({
|
|
|
- type: "openFile",
|
|
|
- text: "./.clinerules",
|
|
|
- values: {
|
|
|
- create: true,
|
|
|
- content: "",
|
|
|
- },
|
|
|
- })
|
|
|
- }>
|
|
|
- .clinerules
|
|
|
- </span>{" "}
|
|
|
- in your workspace.
|
|
|
+ {t("prompts:globalCustomInstructions.loadFromFile")}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -965,7 +910,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
paddingBottom: "60px",
|
|
|
borderBottom: "1px solid var(--vscode-input-border)",
|
|
|
}}>
|
|
|
- <h3 style={{ color: "var(--vscode-foreground)", marginBottom: "12px" }}>Support Prompts</h3>
|
|
|
+ <h3 style={{ color: "var(--vscode-foreground)", marginBottom: "12px" }}>
|
|
|
+ {t("prompts:supportPrompts.title")}
|
|
|
+ </h3>
|
|
|
<div
|
|
|
style={{
|
|
|
display: "flex",
|
|
|
@@ -994,7 +941,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
borderRadius: "3px",
|
|
|
fontWeight: "bold",
|
|
|
}}>
|
|
|
- {supportPromptLabels[type as SupportPromptType]}
|
|
|
+ {t(`prompts:supportPrompts.types.${type}.label`)}
|
|
|
</button>
|
|
|
))}
|
|
|
</div>
|
|
|
@@ -1006,7 +953,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
margin: "8px 0 16px",
|
|
|
}}>
|
|
|
- {supportPromptDescriptions[activeSupportTab]}
|
|
|
+ {t(`prompts:supportPrompts.types.${activeSupportTab}.description`)}
|
|
|
</div>
|
|
|
|
|
|
{/* Show active tab content */}
|
|
|
@@ -1018,11 +965,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
alignItems: "center",
|
|
|
marginBottom: "4px",
|
|
|
}}>
|
|
|
- <div style={{ fontWeight: "bold" }}>Prompt</div>
|
|
|
+ <div style={{ fontWeight: "bold" }}>{t("prompts:supportPrompts.prompt")}</div>
|
|
|
<VSCodeButton
|
|
|
appearance="icon"
|
|
|
onClick={() => handleSupportReset(activeSupportTab)}
|
|
|
- title={`Reset ${activeSupportTab} prompt to default`}>
|
|
|
+ title={t("prompts:supportPrompts.resetPrompt", { promptType: activeSupportTab })}>
|
|
|
<span className="codicon codicon-discard"></span>
|
|
|
</VSCodeButton>
|
|
|
</div>
|
|
|
@@ -1054,15 +1001,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
<div style={{ marginBottom: "12px" }}>
|
|
|
<div style={{ marginBottom: "8px" }}>
|
|
|
<div style={{ fontWeight: "bold", marginBottom: "4px" }}>
|
|
|
- API Configuration
|
|
|
+ {t("prompts:supportPrompts.enhance.apiConfiguration")}
|
|
|
</div>
|
|
|
<div
|
|
|
style={{
|
|
|
fontSize: "13px",
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
}}>
|
|
|
- You can select an API configuration to always use for enhancing prompts,
|
|
|
- or just use whatever is currently selected
|
|
|
+ {t("prompts:supportPrompts.enhance.apiConfigDescription")}
|
|
|
</div>
|
|
|
</div>
|
|
|
<VSCodeDropdown
|
|
|
@@ -1078,7 +1024,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
}}
|
|
|
style={{ width: "300px" }}>
|
|
|
<VSCodeOption value="">
|
|
|
- Use currently selected API configuration
|
|
|
+ {t("prompts:supportPrompts.enhance.useCurrentConfig")}
|
|
|
</VSCodeOption>
|
|
|
{(listApiConfigMeta || []).map((config) => (
|
|
|
<VSCodeOption key={config.id} value={config.id}>
|
|
|
@@ -1093,7 +1039,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
<VSCodeTextArea
|
|
|
value={testPrompt}
|
|
|
onChange={(e) => setTestPrompt((e.target as HTMLTextAreaElement).value)}
|
|
|
- placeholder="Enter a prompt to test the enhancement"
|
|
|
+ placeholder={t("prompts:supportPrompts.enhance.testPromptPlaceholder")}
|
|
|
rows={3}
|
|
|
resize="vertical"
|
|
|
style={{ width: "100%" }}
|
|
|
@@ -1111,7 +1057,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
onClick={handleTestEnhancement}
|
|
|
disabled={isEnhancing}
|
|
|
appearance="primary">
|
|
|
- Preview Prompt Enhancement
|
|
|
+ {t("prompts:supportPrompts.enhance.previewButton")}
|
|
|
</VSCodeButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1158,9 +1104,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
}}>
|
|
|
<span className="codicon codicon-close"></span>
|
|
|
</VSCodeButton>
|
|
|
- <h2 style={{ margin: "0 0 16px" }}>Create New Mode</h2>
|
|
|
+ <h2 style={{ margin: "0 0 16px" }}>{t("prompts:createModeDialog.title")}</h2>
|
|
|
<div style={{ marginBottom: "16px" }}>
|
|
|
- <div style={{ fontWeight: "bold", marginBottom: "4px" }}>Name</div>
|
|
|
+ <div style={{ fontWeight: "bold", marginBottom: "4px" }}>
|
|
|
+ {t("prompts:createModeDialog.name.label")}
|
|
|
+ </div>
|
|
|
<VSCodeTextField
|
|
|
value={newModeName}
|
|
|
onChange={(e: Event | React.FormEvent<HTMLElement>) => {
|
|
|
@@ -1176,7 +1124,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
)}
|
|
|
</div>
|
|
|
<div style={{ marginBottom: "16px" }}>
|
|
|
- <div style={{ fontWeight: "bold", marginBottom: "4px" }}>Slug</div>
|
|
|
+ <div style={{ fontWeight: "bold", marginBottom: "4px" }}>
|
|
|
+ {t("prompts:createModeDialog.slug.label")}
|
|
|
+ </div>
|
|
|
<VSCodeTextField
|
|
|
value={newModeSlug}
|
|
|
onChange={(e: Event | React.FormEvent<HTMLElement>) => {
|
|
|
@@ -1193,18 +1143,18 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
marginTop: "4px",
|
|
|
}}>
|
|
|
- The slug is used in URLs and file names. It should be lowercase and contain only
|
|
|
- letters, numbers, and hyphens.
|
|
|
+ {t("prompts:createModeDialog.slug.description")}
|
|
|
</div>
|
|
|
{slugError && (
|
|
|
<div className="text-xs text-vscode-errorForeground mt-1">{slugError}</div>
|
|
|
)}
|
|
|
</div>
|
|
|
<div style={{ marginBottom: "16px" }}>
|
|
|
- <div style={{ fontWeight: "bold", marginBottom: "4px" }}>Save Location</div>
|
|
|
+ <div style={{ fontWeight: "bold", marginBottom: "4px" }}>
|
|
|
+ {t("prompts:createModeDialog.saveLocation.label")}
|
|
|
+ </div>
|
|
|
<div className="text-sm text-vscode-descriptionForeground mb-2">
|
|
|
- Choose where to save this mode. Project-specific modes take precedence over global
|
|
|
- modes.
|
|
|
+ {t("prompts:createModeDialog.saveLocation.description")}
|
|
|
</div>
|
|
|
<VSCodeRadioGroup
|
|
|
value={newModeSource}
|
|
|
@@ -1214,34 +1164,36 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
setNewModeSource(target.value as ModeSource)
|
|
|
}}>
|
|
|
<VSCodeRadio value="global">
|
|
|
- Global
|
|
|
+ {t("prompts:createModeDialog.saveLocation.global.label")}
|
|
|
<div
|
|
|
style={{
|
|
|
fontSize: "12px",
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
marginTop: "2px",
|
|
|
}}>
|
|
|
- Available in all workspaces
|
|
|
+ {t("prompts:createModeDialog.saveLocation.global.description")}
|
|
|
</div>
|
|
|
</VSCodeRadio>
|
|
|
<VSCodeRadio value="project">
|
|
|
- Project-specific (.roomodes)
|
|
|
+ {t("prompts:createModeDialog.saveLocation.project.label")}
|
|
|
<div className="text-xs text-vscode-descriptionForeground mt-0.5">
|
|
|
- Only available in this workspace, takes precedence over global
|
|
|
+ {t("prompts:createModeDialog.saveLocation.project.description")}
|
|
|
</div>
|
|
|
</VSCodeRadio>
|
|
|
</VSCodeRadioGroup>
|
|
|
</div>
|
|
|
|
|
|
<div style={{ marginBottom: "16px" }}>
|
|
|
- <div style={{ fontWeight: "bold", marginBottom: "4px" }}>Role Definition</div>
|
|
|
+ <div style={{ fontWeight: "bold", marginBottom: "4px" }}>
|
|
|
+ {t("prompts:createModeDialog.roleDefinition.label")}
|
|
|
+ </div>
|
|
|
<div
|
|
|
style={{
|
|
|
fontSize: "13px",
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
marginBottom: "8px",
|
|
|
}}>
|
|
|
- Define Roo's expertise and personality for this mode.
|
|
|
+ {t("prompts:createModeDialog.roleDefinition.description")}
|
|
|
</div>
|
|
|
<VSCodeTextArea
|
|
|
value={newModeRoleDefinition}
|
|
|
@@ -1262,14 +1214,16 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
)}
|
|
|
</div>
|
|
|
<div style={{ marginBottom: "16px" }}>
|
|
|
- <div style={{ fontWeight: "bold", marginBottom: "4px" }}>Available Tools</div>
|
|
|
+ <div style={{ fontWeight: "bold", marginBottom: "4px" }}>
|
|
|
+ {t("prompts:createModeDialog.tools.label")}
|
|
|
+ </div>
|
|
|
<div
|
|
|
style={{
|
|
|
fontSize: "13px",
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
marginBottom: "8px",
|
|
|
}}>
|
|
|
- Select which tools this mode can use.
|
|
|
+ {t("prompts:createModeDialog.tools.description")}
|
|
|
</div>
|
|
|
<div
|
|
|
style={{
|
|
|
@@ -1303,7 +1257,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
</div>
|
|
|
<div style={{ marginBottom: "16px" }}>
|
|
|
<div style={{ fontWeight: "bold", marginBottom: "4px" }}>
|
|
|
- Custom Instructions (optional)
|
|
|
+ {t("prompts:createModeDialog.customInstructions.label")}
|
|
|
</div>
|
|
|
<div
|
|
|
style={{
|
|
|
@@ -1311,7 +1265,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
marginBottom: "8px",
|
|
|
}}>
|
|
|
- Add behavioral guidelines specific to this mode.
|
|
|
+ {t("prompts:createModeDialog.customInstructions.description")}
|
|
|
</div>
|
|
|
<VSCodeTextArea
|
|
|
value={newModeCustomInstructions}
|
|
|
@@ -1336,9 +1290,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
borderTop: "1px solid var(--vscode-editor-lineHighlightBorder)",
|
|
|
backgroundColor: "var(--vscode-editor-background)",
|
|
|
}}>
|
|
|
- <VSCodeButton onClick={() => setIsCreateModeDialogOpen(false)}>Cancel</VSCodeButton>
|
|
|
+ <VSCodeButton onClick={() => setIsCreateModeDialogOpen(false)}>
|
|
|
+ {t("prompts:createModeDialog.buttons.cancel")}
|
|
|
+ </VSCodeButton>
|
|
|
<VSCodeButton appearance="primary" onClick={handleCreateMode}>
|
|
|
- Create Mode
|
|
|
+ {t("prompts:createModeDialog.buttons.create")}
|
|
|
</VSCodeButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1382,7 +1338,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
}}>
|
|
|
<span className="codicon codicon-close"></span>
|
|
|
</VSCodeButton>
|
|
|
- <h2 style={{ margin: "0 0 16px" }}>{selectedPromptTitle}</h2>
|
|
|
+ <h2 style={{ margin: "0 0 16px" }}>
|
|
|
+ {selectedPromptTitle ||
|
|
|
+ t("prompts:systemPrompt.title", { modeName: getCurrentMode()?.name || "Code" })}
|
|
|
+ </h2>
|
|
|
<pre
|
|
|
style={{
|
|
|
padding: "8px",
|
|
|
@@ -1407,7 +1366,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
|
|
|
borderTop: "1px solid var(--vscode-editor-lineHighlightBorder)",
|
|
|
backgroundColor: "var(--vscode-editor-background)",
|
|
|
}}>
|
|
|
- <VSCodeButton onClick={() => setIsDialogOpen(false)}>Close</VSCodeButton>
|
|
|
+ <VSCodeButton onClick={() => setIsDialogOpen(false)}>
|
|
|
+ {t("prompts:createModeDialog.close")}
|
|
|
+ </VSCodeButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|