|
|
@@ -14,6 +14,8 @@ import { vscode } from "@/utils/vscode"
|
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui"
|
|
|
|
|
|
import { useExtensionState } from "../../context/ExtensionStateContext"
|
|
|
+import { useAppTranslation } from "../../i18n/TranslationContext"
|
|
|
+import { Trans } from "react-i18next"
|
|
|
import { Tab, TabContent, TabHeader } from "../common/Tab"
|
|
|
import McpToolRow from "./McpToolRow"
|
|
|
import McpResourceRow from "./McpResourceRow"
|
|
|
@@ -31,12 +33,13 @@ const McpView = ({ onDone }: McpViewProps) => {
|
|
|
enableMcpServerCreation,
|
|
|
setEnableMcpServerCreation,
|
|
|
} = useExtensionState()
|
|
|
+ const { t } = useAppTranslation()
|
|
|
|
|
|
return (
|
|
|
<Tab>
|
|
|
<TabHeader className="flex justify-between items-center">
|
|
|
- <h3 className="text-vscode-foreground m-0">MCP Servers</h3>
|
|
|
- <VSCodeButton onClick={onDone}>Done</VSCodeButton>
|
|
|
+ <h3 className="text-vscode-foreground m-0">{t("mcp:title")}</h3>
|
|
|
+ <VSCodeButton onClick={onDone}>{t("mcp:done")}</VSCodeButton>
|
|
|
</TabHeader>
|
|
|
|
|
|
<TabContent>
|
|
|
@@ -47,17 +50,16 @@ const McpView = ({ onDone }: McpViewProps) => {
|
|
|
marginBottom: "10px",
|
|
|
marginTop: "5px",
|
|
|
}}>
|
|
|
- The{" "}
|
|
|
- <VSCodeLink href="https://github.com/modelcontextprotocol" style={{ display: "inline" }}>
|
|
|
- Model Context Protocol
|
|
|
- </VSCodeLink>{" "}
|
|
|
- enables communication with locally running MCP servers that provide additional tools and resources
|
|
|
- to extend Roo's capabilities. You can use{" "}
|
|
|
- <VSCodeLink href="https://github.com/modelcontextprotocol/servers" style={{ display: "inline" }}>
|
|
|
- community-made servers
|
|
|
- </VSCodeLink>{" "}
|
|
|
- or ask Roo to create new tools specific to your workflow (e.g., "add a tool that gets the latest npm
|
|
|
- docs").
|
|
|
+ <Trans i18nKey="mcp:description">
|
|
|
+ <VSCodeLink href="https://github.com/modelcontextprotocol" style={{ display: "inline" }}>
|
|
|
+ Model Context Protocol
|
|
|
+ </VSCodeLink>
|
|
|
+ <VSCodeLink
|
|
|
+ href="https://github.com/modelcontextprotocol/servers"
|
|
|
+ style={{ display: "inline" }}>
|
|
|
+ community-made servers
|
|
|
+ </VSCodeLink>
|
|
|
+ </Trans>
|
|
|
</div>
|
|
|
|
|
|
<McpEnabledToggle />
|
|
|
@@ -71,7 +73,7 @@ const McpView = ({ onDone }: McpViewProps) => {
|
|
|
setEnableMcpServerCreation(e.target.checked)
|
|
|
vscode.postMessage({ type: "enableMcpServerCreation", bool: e.target.checked })
|
|
|
}}>
|
|
|
- <span style={{ fontWeight: "500" }}>Enable MCP Server Creation</span>
|
|
|
+ <span style={{ fontWeight: "500" }}>{t("mcp:enableServerCreation.title")}</span>
|
|
|
</VSCodeCheckbox>
|
|
|
<p
|
|
|
style={{
|
|
|
@@ -79,9 +81,7 @@ const McpView = ({ onDone }: McpViewProps) => {
|
|
|
marginTop: "5px",
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
}}>
|
|
|
- When enabled, Roo can help you create new MCP servers via commands like "add a new tool
|
|
|
- to...". If you don't need to create MCP servers you can disable this to reduce Roo's
|
|
|
- token usage.
|
|
|
+ {t("mcp:enableServerCreation.description")}
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
@@ -103,7 +103,7 @@ const McpView = ({ onDone }: McpViewProps) => {
|
|
|
vscode.postMessage({ type: "openMcpSettings" })
|
|
|
}}>
|
|
|
<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
|
|
|
- Edit MCP Settings
|
|
|
+ {t("mcp:editSettings")}
|
|
|
</VSCodeButton>
|
|
|
</div>
|
|
|
</>
|
|
|
@@ -114,6 +114,7 @@ const McpView = ({ onDone }: McpViewProps) => {
|
|
|
}
|
|
|
|
|
|
const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowMcp?: boolean }) => {
|
|
|
+ const { t } = useAppTranslation()
|
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
|
|
const [timeoutValue, setTimeoutValue] = useState(() => {
|
|
|
@@ -122,14 +123,14 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
|
|
|
})
|
|
|
|
|
|
const timeoutOptions = [
|
|
|
- { value: 15, label: "15 seconds" },
|
|
|
- { value: 30, label: "30 seconds" },
|
|
|
- { value: 60, label: "1 minute" },
|
|
|
- { value: 300, label: "5 minutes" },
|
|
|
- { value: 600, label: "10 minutes" },
|
|
|
- { value: 900, label: "15 minutes" },
|
|
|
- { value: 1800, label: "30 minutes" },
|
|
|
- { value: 3600, label: "60 minutes" },
|
|
|
+ { value: 15, label: t("mcp:networkTimeout.options.15seconds") },
|
|
|
+ { value: 30, label: t("mcp:networkTimeout.options.30seconds") },
|
|
|
+ { value: 60, label: t("mcp:networkTimeout.options.1minute") },
|
|
|
+ { value: 300, label: t("mcp:networkTimeout.options.5minutes") },
|
|
|
+ { value: 600, label: t("mcp:networkTimeout.options.10minutes") },
|
|
|
+ { value: 900, label: t("mcp:networkTimeout.options.15minutes") },
|
|
|
+ { value: 1800, label: t("mcp:networkTimeout.options.30minutes") },
|
|
|
+ { value: 3600, label: t("mcp:networkTimeout.options.60minutes") },
|
|
|
]
|
|
|
|
|
|
const getStatusColor = () => {
|
|
|
@@ -291,7 +292,9 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
|
|
|
onClick={handleRestart}
|
|
|
disabled={server.status === "connecting"}
|
|
|
style={{ width: "calc(100% - 20px)", margin: "0 10px 10px 10px" }}>
|
|
|
- {server.status === "connecting" ? "Retrying..." : "Retry Connection"}
|
|
|
+ {server.status === "connecting"
|
|
|
+ ? t("mcp:serverStatus.retrying")
|
|
|
+ : t("mcp:serverStatus.retryConnection")}
|
|
|
</VSCodeButton>
|
|
|
</div>
|
|
|
) : (
|
|
|
@@ -304,9 +307,11 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
|
|
|
borderRadius: "0 0 4px 4px",
|
|
|
}}>
|
|
|
<VSCodePanels style={{ marginBottom: "10px" }}>
|
|
|
- <VSCodePanelTab id="tools">Tools ({server.tools?.length || 0})</VSCodePanelTab>
|
|
|
+ <VSCodePanelTab id="tools">
|
|
|
+ {t("mcp:tabs.tools")} ({server.tools?.length || 0})
|
|
|
+ </VSCodePanelTab>
|
|
|
<VSCodePanelTab id="resources">
|
|
|
- Resources (
|
|
|
+ {t("mcp:tabs.resources")} (
|
|
|
{[...(server.resourceTemplates || []), ...(server.resources || [])].length || 0})
|
|
|
</VSCodePanelTab>
|
|
|
|
|
|
@@ -325,7 +330,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
|
|
|
</div>
|
|
|
) : (
|
|
|
<div style={{ padding: "10px 0", color: "var(--vscode-descriptionForeground)" }}>
|
|
|
- No tools found
|
|
|
+ {t("mcp:emptyState.noTools")}
|
|
|
</div>
|
|
|
)}
|
|
|
</VSCodePanelView>
|
|
|
@@ -346,7 +351,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
|
|
|
</div>
|
|
|
) : (
|
|
|
<div style={{ padding: "10px 0", color: "var(--vscode-descriptionForeground)" }}>
|
|
|
- No resources found
|
|
|
+ {t("mcp:emptyState.noResources")}
|
|
|
</div>
|
|
|
)}
|
|
|
</VSCodePanelView>
|
|
|
@@ -361,7 +366,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
|
|
|
gap: "10px",
|
|
|
marginBottom: "8px",
|
|
|
}}>
|
|
|
- <span>Network Timeout</span>
|
|
|
+ <span>{t("mcp:networkTimeout.label")}</span>
|
|
|
<select
|
|
|
value={timeoutValue}
|
|
|
onChange={handleTimeoutChange}
|
|
|
@@ -388,7 +393,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
|
|
|
color: "var(--vscode-descriptionForeground)",
|
|
|
display: "block",
|
|
|
}}>
|
|
|
- Maximum time to wait for server responses
|
|
|
+ {t("mcp:networkTimeout.description")}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -399,18 +404,17 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
|
|
|
<Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
|
|
<DialogContent>
|
|
|
<DialogHeader>
|
|
|
- <DialogTitle>Delete MCP Server</DialogTitle>
|
|
|
+ <DialogTitle>{t("mcp:deleteDialog.title")}</DialogTitle>
|
|
|
<DialogDescription>
|
|
|
- Are you sure you want to delete the MCP server "{server.name}"? This action cannot be
|
|
|
- undone.
|
|
|
+ {t("mcp:deleteDialog.description", { serverName: server.name })}
|
|
|
</DialogDescription>
|
|
|
</DialogHeader>
|
|
|
<DialogFooter>
|
|
|
<VSCodeButton appearance="secondary" onClick={() => setShowDeleteConfirm(false)}>
|
|
|
- Cancel
|
|
|
+ {t("mcp:deleteDialog.cancel")}
|
|
|
</VSCodeButton>
|
|
|
<VSCodeButton appearance="primary" onClick={handleDelete}>
|
|
|
- Delete
|
|
|
+ {t("mcp:deleteDialog.delete")}
|
|
|
</VSCodeButton>
|
|
|
</DialogFooter>
|
|
|
</DialogContent>
|