pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 20:31:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

Custom modes

Browse Source
This commit is contained in:
Matt Rubens
2025-01-18 03:39:26 -05:00
parent 332245c33a
commit b8e0aa0cde
65 changed files with 3749 additions and 1531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
webview-ui/src/components/chat/Announcement.tsx
View File

@@ -12,7 +12,7 @@ interface AnnouncementProps {
You must update the latestAnnouncementId in ClineProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves.
*/
const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
const minorVersion = version.split(".").slice(0, 2).join(".") // 2.0.0 -> 2.0
// const minorVersion = version.split(".").slice(0, 2).join(".") // 2.0.0 -> 2.0
return (
<div
style={{
@@ -29,42 +29,36 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
style={{ position: "absolute", top: "8px", right: "8px" }}>
<span className="codicon codicon-close"></span>
</VSCodeButton>
<h2 style={{ margin: "0 0 8px" }}>
🎉{" "}Introducing Roo Cline v{minorVersion}
</h2>
<h2 style={{ margin: "0 0 8px" }}>🎉{" "}Introducing Roo Code 4.0</h2>
<h3 style={{ margin: "0 0 8px" }}>Agent Modes Customization</h3>
<p style={{ margin: "5px 0px" }}>
Click the new <span className="codicon codicon-notebook" style={{ fontSize: "10px" }}></span> icon in
the menu bar to open the Prompts Settings and customize Agent Modes for new levels of productivity.
<ul style={{ margin: "4px 0 6px 20px", padding: 0 }}>
<li>Tailor how Roo Cline behaves in different modes: Code, Architect, and Ask.</li>
<li>Preview and verify your changes using the Preview System Prompt button.</li>
</ul>
Our biggest update yet is here - we're officially changing our name from "Roo Cline" to "Roo Code"!
After growing beyond 50,000 installations, we're ready to chart our own course. Our heartfelt thanks to
everyone in the Cline community who helped us reach this milestone.
</p>
<h3 style={{ margin: "0 0 8px" }}>Prompt Enhancement Configuration</h3>
<h3 style={{ margin: "12px 0 8px" }}>Custom Modes: Celebrating Our New Identity</h3>
<p style={{ margin: "5px 0px" }}>
Now available for all providers! Access it directly in the chat box by clicking the{" "}
<span className="codicon codicon-sparkle" style={{ fontSize: "10px" }}></span> sparkle icon next to the
input field. From there, you can customize the enhancement logic and provider to best suit your
workflow.
To mark this new chapter, we're introducing the power to shape Roo Code into any role you need! Create
specialized personas and create an entire team of agents with deeply customized prompts:
<ul style={{ margin: "4px 0 6px 20px", padding: 0 }}>
<li>Customize how prompts are enhanced for better results in your workflow.</li>
<li>
Use the sparkle icon in the chat box to select a API configuration and provider (e.g., GPT-4)
and configure your own enhancement logic.
</li>
<li>Test your changes instantly with the Preview Prompt Enhancement tool.</li>
<li>QA Engineers who write thorough test cases and catch edge cases</li>
<li>Product Managers who excel at user stories and feature prioritization</li>
<li>UI/UX Designers who craft beautiful, accessible interfaces</li>
<li>Code Reviewers who ensure quality and maintainability</li>
</ul>
Just click the <span className="codicon codicon-notebook" style={{ fontSize: "10px" }}></span> icon to
get started with Custom Modes!
</p>
<h3 style={{ margin: "12px 0 8px" }}>Join Us for the Next Chapter</h3>
<p style={{ margin: "5px 0px" }}>
We're very excited to see what you build with this new feature! Join us at
<VSCodeLink href="https://www.reddit.com/r/roocline" style={{ display: "inline" }}>
reddit.com/r/roocline
We can't wait to see how you'll push Roo Code's potential even further! Share your custom modes and join
the discussion at{" "}
<VSCodeLink href="https://www.reddit.com/r/RooCode" style={{ display: "inline" }}>
reddit.com/r/RooCode
</VSCodeLink>
to discuss and share feedback.
.
</p>
</div>
)

2
webview-ui/src/components/chat/AutoApproveMenu.tsx
View File

@@ -209,7 +209,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
color: "var(--vscode-descriptionForeground)",
fontSize: "12px",
}}>
Auto-approve allows Cline to perform actions without asking for permission. Only enable for
Auto-approve allows Roo Code to perform actions without asking for permission. Only enable for
actions you fully trust.
</div>
{actions.map((action) => (

2
webview-ui/src/components/chat/BrowserSessionRow.tsx
View File

@@ -242,7 +242,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
style={{ color: "var(--vscode-foreground)", marginBottom: "-1.5px" }}></span>
)}
<span style={{ fontWeight: "bold" }}>
<>Cline wants to use the browser:</>
<>Roo wants to use the browser:</>
</span>
</div>
<div

40
webview-ui/src/components/chat/ChatRow.tsx
View File

@@ -117,7 +117,7 @@ export const ChatRowContent = ({
<span
className="codicon codicon-error"
style={{ color: errorColor, marginBottom: "-1.5px" }}></span>,
<span style={{ color: errorColor, fontWeight: "bold" }}>Cline is having trouble...</span>,
<span style={{ color: errorColor, fontWeight: "bold" }}>Roo is having trouble...</span>,
]
case "command":
return [
@@ -128,9 +128,7 @@ export const ChatRowContent = ({
className="codicon codicon-terminal"
style={{ color: normalColor, marginBottom: "-1.5px" }}></span>
),
<span style={{ color: normalColor, fontWeight: "bold" }}>
Cline wants to execute this command:
</span>,
<span style={{ color: normalColor, fontWeight: "bold" }}>Roo wants to execute this command:</span>,
]
case "use_mcp_server":
const mcpServerUse = JSON.parse(message.text || "{}") as ClineAskUseMcpServer
@@ -143,8 +141,8 @@ export const ChatRowContent = ({
style={{ color: normalColor, marginBottom: "-1.5px" }}></span>
),
<span style={{ color: normalColor, fontWeight: "bold" }}>
Cline wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on
the <code>{mcpServerUse.serverName}</code> MCP server:
Roo wants to {mcpServerUse.type === "use_mcp_tool" ? "use a tool" : "access a resource"} on the{" "}
<code>{mcpServerUse.serverName}</code> MCP server:
</span>,
]
case "completion_result":
@@ -208,7 +206,7 @@ export const ChatRowContent = ({
<span
className="codicon codicon-question"
style={{ color: normalColor, marginBottom: "-1.5px" }}></span>,
<span style={{ color: normalColor, fontWeight: "bold" }}>Cline has a question:</span>,
<span style={{ color: normalColor, fontWeight: "bold" }}>Roo has a question:</span>,
]
default:
return [null, null]
@@ -250,7 +248,7 @@ export const ChatRowContent = ({
<>
<div style={headerStyle}>
{toolIcon(tool.tool === "appliedDiff" ? "diff" : "edit")}
<span style={{ fontWeight: "bold" }}>Cline wants to edit this file:</span>
<span style={{ fontWeight: "bold" }}>Roo wants to edit this file:</span>
</div>
<CodeAccordian
isLoading={message.partial}
@@ -266,7 +264,7 @@ export const ChatRowContent = ({
<>
<div style={headerStyle}>
{toolIcon("new-file")}
<span style={{ fontWeight: "bold" }}>Cline wants to create a new file:</span>
<span style={{ fontWeight: "bold" }}>Roo wants to create a new file:</span>
</div>
<CodeAccordian
isLoading={message.partial}
@@ -283,7 +281,7 @@ export const ChatRowContent = ({
<div style={headerStyle}>
{toolIcon("file-code")}
<span style={{ fontWeight: "bold" }}>
{message.type === "ask" ? "Cline wants to read this file:" : "Cline read this file:"}
{message.type === "ask" ? "Roo wants to read this file:" : "Roo read this file:"}
</span>
</div>
{/* <CodeAccordian
@@ -341,8 +339,8 @@ export const ChatRowContent = ({
{toolIcon("folder-opened")}
<span style={{ fontWeight: "bold" }}>
{message.type === "ask"
? "Cline wants to view the top level files in this directory:"
: "Cline viewed the top level files in this directory:"}
? "Roo wants to view the top level files in this directory:"
: "Roo viewed the top level files in this directory:"}
</span>
</div>
<CodeAccordian
@@ -361,8 +359,8 @@ export const ChatRowContent = ({
{toolIcon("folder-opened")}
<span style={{ fontWeight: "bold" }}>
{message.type === "ask"
? "Cline wants to recursively view all files in this directory:"
: "Cline recursively viewed all files in this directory:"}
? "Roo wants to recursively view all files in this directory:"
: "Roo recursively viewed all files in this directory:"}
</span>
</div>
<CodeAccordian
@@ -381,8 +379,8 @@ export const ChatRowContent = ({
{toolIcon("file-code")}
<span style={{ fontWeight: "bold" }}>
{message.type === "ask"
? "Cline wants to view source code definition names used in this directory:"
: "Cline viewed source code definition names used in this directory:"}
? "Roo wants to view source code definition names used in this directory:"
: "Roo viewed source code definition names used in this directory:"}
</span>
</div>
<CodeAccordian
@@ -401,11 +399,11 @@ export const ChatRowContent = ({
<span style={{ fontWeight: "bold" }}>
{message.type === "ask" ? (
<>
Cline wants to search this directory for <code>{tool.regex}</code>:
Roo wants to search this directory for <code>{tool.regex}</code>:
</>
) : (
<>
Cline searched this directory for <code>{tool.regex}</code>:
Roo searched this directory for <code>{tool.regex}</code>:
</>
)}
</span>
@@ -428,9 +426,9 @@ export const ChatRowContent = ({
// {isInspecting ? <ProgressIndicator /> : toolIcon("inspect")}
// <span style={{ fontWeight: "bold" }}>
// {message.type === "ask" ? (
// <>Cline wants to inspect this website:</>
// <>Roo wants to inspect this website:</>
// ) : (
// <>Cline is inspecting this website:</>
// <>Roo is inspecting this website:</>
// )}
// </span>
// </div>
@@ -663,7 +661,7 @@ export const ChatRowContent = ({
</span>
</div>
<div>
Cline won't be able to view the command's output. Please update VSCode (
Roo won't be able to view the command's output. Please update VSCode (
<code>CMD/CTRL + Shift + P</code> → "Update") and make sure you're using a supported
shell: zsh, bash, fish, or PowerShell (<code>CMD/CTRL + Shift + P</code> →
"Terminal: Select Default Profile").{" "}

6
webview-ui/src/components/chat/ChatTextArea.tsx
View File

@@ -14,7 +14,7 @@ import ContextMenu from "./ContextMenu"
import Thumbnails from "../common/Thumbnails"
import { vscode } from "../../utils/vscode"
import { WebviewMessage } from "../../../../src/shared/WebviewMessage"
import { Mode, modes } from "../../../../src/shared/modes"
import { Mode, getAllModes } from "../../../../src/shared/modes"
import { CaretIcon } from "../common/CaretIcon"
interface ChatTextAreaProps {
@@ -50,7 +50,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
},
ref,
) => {
const { filePaths, currentApiConfigName, listApiConfigMeta } = useExtensionState()
const { filePaths, currentApiConfigName, listApiConfigMeta, customModes } = useExtensionState()
const [gitCommits, setGitCommits] = useState<any[]>([])
const [showDropdown, setShowDropdown] = useState(false)
@@ -730,7 +730,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
minWidth: "70px",
flex: "0 0 auto",
}}>
{modes.map((mode) => (
{getAllModes(customModes).map((mode) => (
<option
key={mode.slug}
value={mode.slug}