From c126804bb0a16dc11f6eb4fa16f598964632be0e Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Mon, 17 Feb 2025 22:01:26 -0800 Subject: [PATCH] Add warning for community made servers; open GitHub on click --- src/core/webview/ClineProvider.ts | 58 ++++++++--------- src/shared/WebviewMessage.ts | 1 - .../mcp/marketplace/McpMarketplaceCard.tsx | 64 +++++++++++-------- .../mcp/marketplace/McpMarketplaceView.tsx | 1 - .../mcp/marketplace/McpSubmitCard.tsx | 32 ++++------ 5 files changed, 81 insertions(+), 75 deletions(-) diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts index 94204867d4..b19295cdd6 100644 --- a/src/core/webview/ClineProvider.ts +++ b/src/core/webview/ClineProvider.ts @@ -801,41 +801,41 @@ export class ClineProvider implements vscode.WebviewViewProvider { await this.silentlyRefreshMcpMarketplace() break } - case "openMcpMarketplaceServerDetails": { - if (message.mcpId) { - const response = await fetch(`https://api.cline.bot/v1/mcp/marketplace/item?mcpId=${message.mcpId}`) - const details: McpDownloadResponse = await response.json() + // case "openMcpMarketplaceServerDetails": { + // if (message.text) { + // const response = await fetch(`https://api.cline.bot/v1/mcp/marketplace/item?mcpId=${message.mcpId}`) + // const details: McpDownloadResponse = await response.json() - if (details.readmeContent) { - // Disable markdown preview markers - const config = vscode.workspace.getConfiguration("markdown") - await config.update("preview.markEditorSelection", false, true) + // if (details.readmeContent) { + // // Disable markdown preview markers + // const config = vscode.workspace.getConfiguration("markdown") + // await config.update("preview.markEditorSelection", false, true) - // Create URI with base64 encoded markdown content - const uri = vscode.Uri.parse( - `${DIFF_VIEW_URI_SCHEME}:${details.name} README?${Buffer.from(details.readmeContent).toString("base64")}`, - ) + // // Create URI with base64 encoded markdown content + // const uri = vscode.Uri.parse( + // `${DIFF_VIEW_URI_SCHEME}:${details.name} README?${Buffer.from(details.readmeContent).toString("base64")}`, + // ) - // close existing - const tabs = vscode.window.tabGroups.all - .flatMap((tg) => tg.tabs) - .filter((tab) => tab.label && tab.label.includes("README") && tab.label.includes("Preview")) - for (const tab of tabs) { - await vscode.window.tabGroups.close(tab) - } + // // close existing + // const tabs = vscode.window.tabGroups.all + // .flatMap((tg) => tg.tabs) + // .filter((tab) => tab.label && tab.label.includes("README") && tab.label.includes("Preview")) + // for (const tab of tabs) { + // await vscode.window.tabGroups.close(tab) + // } - // Show only the preview - await vscode.commands.executeCommand("markdown.showPreview", uri, { - sideBySide: true, - preserveFocus: true, - }) - } - } + // // Show only the preview + // await vscode.commands.executeCommand("markdown.showPreview", uri, { + // sideBySide: true, + // preserveFocus: true, + // }) + // } + // } - this.postMessageToWebview({ type: "relinquishControl" }) + // this.postMessageToWebview({ type: "relinquishControl" }) - break - } + // break + // } case "toggleMcpServer": { try { await this.mcpHub?.toggleServerDisabled(message.serverName!, message.disabled!) diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts index 5c6ea5a3d5..b721d4f3de 100644 --- a/src/shared/WebviewMessage.ts +++ b/src/shared/WebviewMessage.ts @@ -45,7 +45,6 @@ export interface WebviewMessage { | "subscribeEmail" | "fetchMcpMarketplace" | "downloadMcp" - | "openMcpMarketplaceServerDetails" | "silentlyRefreshMcpMarketplace" | "searchCommits" // | "relaunchChromeDebugMode" diff --git a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx index 45383e68d2..5e5d03b779 100644 --- a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx +++ b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState, useRef } from "react" +import { useCallback, useState, useRef, useMemo } from "react" import styled from "styled-components" import { McpMarketplaceItem, McpServer } from "../../../../../src/shared/mcp" import { vscode } from "../../../utils/vscode" @@ -29,6 +29,15 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps) useEvent("message", handleMessage) + const githubAuthorUrl = useMemo(() => { + const url = new URL(item.githubUrl) + const pathParts = url.pathname.split("/") + if (pathParts.length >= 2) { + return `${url.origin}/${pathParts[1]}` + } + return item.githubUrl + }, [item.githubUrl]) + return ( <> -
{ - if (githubLinkRef.current?.contains(e.target as Node)) { - return - } - - console.log("Card clicked:", item.mcpId) - setIsLoading(true) - vscode.postMessage({ - type: "openMcpMarketplaceServerDetails", - mcpId: item.mcpId, - }) - }} style={{ padding: "14px 16px", display: "flex", flexDirection: "column", gap: 12, cursor: isLoading ? "wait" : "pointer", + textDecoration: "none", + color: "inherit", }}> {/* Main container with logo and content */}
@@ -104,7 +104,8 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
{ - e.stopPropagation() // Prevent card click when clicking install + e.preventDefault() // Prevent card click when clicking install + e.stopPropagation() // Stop event from bubbling up to parent link if (!isInstalled && !isDownloading) { setIsDownloading(true) vscode.postMessage({ @@ -125,31 +126,31 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps) style={{ display: "flex", alignItems: "center", - gap: "12px", + gap: "8px", fontSize: "12px", color: "var(--vscode-descriptionForeground)", flexWrap: "wrap", minWidth: 0, - rowGap: 0, // Add this to remove vertical gap + rowGap: 0, }}> { - e.currentTarget.style.opacity = "0.8" + e.currentTarget.style.opacity = "1" e.currentTarget.style.color = "var(--link-active-foreground)" }} onMouseLeave={(e) => { - e.currentTarget.style.opacity = "0.5" + e.currentTarget.style.opacity = "0.7" e.currentTarget.style.color = "var(--vscode-foreground)" }}>
@@ -190,15 +191,28 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps) {item.requiresApiKey && ( )} - {item.isRecommended && ( - - )}
{/* Description and tags */}
+ {!item.isRecommended && ( +
+ + Community Made (use at your own risk) +
+ )} +

{item.description}

-
+ ) } diff --git a/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx b/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx index 2204709415..bece71baf6 100644 --- a/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx +++ b/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx @@ -269,7 +269,6 @@ const McpMarketplaceView = () => { height: "100%", padding: "20px", color: "var(--vscode-descriptionForeground)", - borderBottom: "1px solid var(--vscode-list-inactiveSelectionBackground)", }}> {searchQuery || selectedCategory ? "No matching MCP servers found" diff --git a/webview-ui/src/components/mcp/marketplace/McpSubmitCard.tsx b/webview-ui/src/components/mcp/marketplace/McpSubmitCard.tsx index b00eedc5de..5ce28933ea 100644 --- a/webview-ui/src/components/mcp/marketplace/McpSubmitCard.tsx +++ b/webview-ui/src/components/mcp/marketplace/McpSubmitCard.tsx @@ -5,20 +5,14 @@ const McpSubmitCard = () => { display: "flex", flexDirection: "column", alignItems: "center", - gap: "24px", - padding: "32px 20px", - marginTop: "16px", + gap: "12px", + padding: "15px", + margin: "20px", + backgroundColor: "var(--vscode-textBlockQuote-background)", + borderRadius: "6px", }}> - {/* Logo */} - Cline bot logo + {/* Icon */} + {/* Content */}
{ display: "flex", flexDirection: "column", alignItems: "center", - gap: "12px", + gap: "4px", textAlign: "center", maxWidth: "480px", }}>

- Is something missing? + Submit MCP Server

- Submit your own MCP servers to the marketplace by{" "} - submitting an issue on the official MCP Marketplace - repo on GitHub. + Help others discover great MCP servers by submitting an issue to{" "} + github.com/cline/mcp-marketplace