reverting UI changes

This commit is contained in:
Evan 2025-01-23 13:03:27 +08:00
parent 4ba3cc87a2
commit 542c246a55
5 changed files with 57 additions and 110 deletions

View file

@ -1,4 +0,0 @@
// Mode checks for MCP content:
// - mcpHub.getMode() === "disabled" -> exclude all MCP content
// - mcpHub.getMode() === "server-use-only" -> include server tools/resources but exclude build instructions
// - mcpHub.getMode() === "enabled" -> include all MCP content (tools, resources, and build instructions)

View file

@ -648,6 +648,14 @@ export class ClineProvider implements vscode.WebviewViewProvider {
}
break
}
case "toggleMcpServer": {
try {
await this.mcpHub?.toggleServerDisabled(message.serverName!, message.disabled!)
} catch (error) {
console.error(`Failed to toggle MCP server ${message.serverName}:`, error)
}
break
}
case "toggleToolAutoApprove": {
try {
await this.mcpHub?.toggleToolAutoApprove(message.serverName!, message.toolName!, message.autoApprove!)
@ -668,18 +676,6 @@ export class ClineProvider implements vscode.WebviewViewProvider {
await vscode.commands.executeCommand("workbench.action.openSettings", "@ext:saoudrizwan.claude-dev")
break
}
case "getMcpEnabled": {
const enabled = this.mcpHub?.isMcpEnabled() ?? true
await this.postMessageToWebview({
type: "mcpEnabled",
enabled,
})
break
}
case "toggleMcp": {
await vscode.workspace.getConfiguration("cline.mcp").update("enabled", message.enabled, true)
break
}
// Add more switch case statements here as more webview message commands
// are created within the webview context (i.e. inside media/main.js)
}

View file

@ -15,7 +15,15 @@ import * as path from "path"
import * as vscode from "vscode"
import { z } from "zod"
import { ClineProvider, GlobalFileNames } from "../../core/webview/ClineProvider"
import { McpMode, McpResource, McpResourceResponse, McpResourceTemplate, McpServer, McpTool, McpToolCallResponse } from "../../shared/mcp"
import {
McpMode,
McpResource,
McpResourceResponse,
McpResourceTemplate,
McpServer,
McpTool,
McpToolCallResponse,
} from "../../shared/mcp"
import { fileExistsAtPath } from "../../utils/fs"
import { arePathsEqual } from "../../utils/path"

View file

@ -34,8 +34,12 @@ export interface WebviewMessage {
| "checkpointRestore"
| "taskCompletionViewChanges"
| "openExtensionSettings"
| "getMcpEnabled"
| "toggleMcp"
| "requestVsCodeLmModels"
| "toggleToolAutoApprove"
| "toggleMcpServer"
| "getLatestState"
| "accountLoginClicked"
| "accountLogoutClicked"
// | "relaunchChromeDebugMode"
text?: string
disabled?: boolean
@ -46,7 +50,12 @@ export interface WebviewMessage {
number?: number
autoApprovalSettings?: AutoApprovalSettings
browserSettings?: BrowserSettings
enabled?: boolean // For toggleMcp message
chatSettings?: ChatSettings
// For toggleToolAutoApprove
serverName?: string
toolName?: string
autoApprove?: boolean
}
export type ClineAskResponse = "yesButtonClicked" | "noButtonClicked" | "messageResponse"

View file

@ -2,7 +2,7 @@ import { VSCodeButton, VSCodeLink, VSCodePanels, VSCodePanelTab, VSCodePanelView
import { useState } from "react"
import { vscode } from "../../utils/vscode"
import { useExtensionState } from "../../context/ExtensionStateContext"
import { McpMode, McpServer } from "../../../../src/shared/mcp"
import { McpServer } from "../../../../src/shared/mcp"
import McpToolRow from "./McpToolRow"
import McpResourceRow from "./McpResourceRow"
@ -12,31 +12,7 @@ type McpViewProps = {
const McpView = ({ onDone }: McpViewProps) => {
const { mcpServers: servers } = useExtensionState()
const [isMcpEnabled, setIsMcpEnabled] = useState(true)
useEffect(() => {
// Get initial MCP enabled state
vscode.postMessage({ type: "getMcpEnabled" })
}, [])
useEffect(() => {
const handler = (event: MessageEvent) => {
const message = event.data
if (message.type === "mcpEnabled") {
setIsMcpEnabled(message.enabled)
}
}
window.addEventListener("message", handler)
return () => window.removeEventListener("message", handler)
}, [])
const toggleMcp = () => {
vscode.postMessage({
type: "toggleMcp",
enabled: !isMcpEnabled,
})
setIsMcpEnabled(!isMcpEnabled)
}
// const [servers, setServers] = useState<McpServer[]>([
// // Add some mock servers for testing
// {
@ -143,58 +119,7 @@ const McpView = ({ onDone }: McpViewProps) => {
</VSCodeLink>
</div>
{/* MCP Toggle Section */}
<div
style={{
marginBottom: "16px",
paddingBottom: "16px",
borderBottom: "1px solid var(--vscode-textSeparator-foreground)",
}}>
<div>
<VSCodeCheckbox
checked={isMcpEnabled}
onChange={toggleMcp}
style={{
display: "flex",
alignItems: "center",
gap: "8px",
padding: "4px 0",
cursor: "pointer",
fontSize: "13px",
}}>
Enable MCP
</VSCodeCheckbox>
{isMcpEnabled && (
<div
style={{
marginTop: "4px",
marginLeft: "24px",
color: "var(--vscode-descriptionForeground)",
fontSize: "12px",
}}>
Disabling MCP will save on tokens passed in the context.
</div>
)}
{!isMcpEnabled && (
<div
style={{
padding: "8px 12px",
marginTop: "8px",
background: "var(--vscode-textBlockQuote-background)",
border: "1px solid var(--vscode-textBlockQuote-border)",
borderRadius: "4px",
color: "var(--vscode-descriptionForeground)",
fontSize: "12px",
lineHeight: "1.4",
}}>
MCP is currently disabled. Enable MCP to use MCP servers and tools. Enabling MCP will use
additional tokens.
</div>
)}
</div>
</div>
{servers.length > 0 && isMcpEnabled && (
{servers.length > 0 && (
<div
style={{
display: "flex",
@ -208,19 +133,32 @@ const McpView = ({ onDone }: McpViewProps) => {
)}
{/* Server Configuration Button */}
{isMcpEnabled && (
<div style={{ marginTop: "10px", width: "100%" }}>
<VSCodeButton
appearance="secondary"
style={{ width: "100%" }}
onClick={() => {
vscode.postMessage({ type: "openMcpSettings" })
}}>
<span className="codicon codicon-server" style={{ marginRight: "6px" }}></span>
Configure MCP Servers
</VSCodeButton>
</div>
)}
<div style={{ marginTop: "10px", width: "100%" }}>
<VSCodeButton
appearance="secondary"
style={{ width: "100%" }}
onClick={() => {
vscode.postMessage({ type: "openMcpSettings" })
}}>
<span className="codicon codicon-server" style={{ marginRight: "6px" }}></span>
Configure MCP Servers
</VSCodeButton>
</div>
{/* Advanced Settings Link */}
<div style={{ textAlign: "center", marginTop: "5px" }}>
<VSCodeLink
onClick={() => {
vscode.postMessage({
type: "openExtensionSettings",
text: "cline.mcp",
})
}}
style={{ fontSize: "12px" }}>
Advanced MCP Settings
</VSCodeLink>
</div>
{/* Bottom padding */}
<div style={{ height: "20px" }} />