Incorporate MCP changes (#93)

Co-authored-by: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>

webview-ui/src/components/common/MarkdownBlock.tsx

@@ -10,6 +10,46 @@ interface MarkdownBlockProps {
 	markdown?: string
 }
 
+/**
+ * Custom remark plugin that converts plain URLs in text into clickable links
+ *
+ * The original bug: We were converting text nodes into paragraph nodes,
+ * which broke the markdown structure because text nodes should remain as text nodes
+ * within their parent elements (like paragraphs, list items, etc.).
+ * This caused the entire content to disappear because the structure became invalid.
+ */
+const remarkUrlToLink = () => {
+	return (tree: any) => {
+		// Visit all "text" nodes in the markdown AST (Abstract Syntax Tree)
+		visit(tree, "text", (node: any, index, parent) => {
+			const urlRegex = /https?:\/\/[^\s<>)"]+/g
+			const matches = node.value.match(urlRegex)
+			if (!matches) return
+
+			const parts = node.value.split(urlRegex)
+			const children: any[] = []
+
+			parts.forEach((part: string, i: number) => {
+				if (part) children.push({ type: "text", value: part })
+				if (matches[i]) {
+					children.push({
+						type: "link",
+						url: matches[i],
+						children: [{ type: "text", value: matches[i] }],
+					})
+				}
+			})
+
+			// Fix: Instead of converting the node to a paragraph (which broke things),
+			// we replace the original text node with our new nodes in the parent's children array.
+			// This preserves the document structure while adding our links.
+			if (parent) {
+				parent.children.splice(index, 1, ...children)
+			}
+		})
+	}
+}
+
 const StyledMarkdown = styled.div`
 	pre {
 		background-color: ${CODE_BLOCK_BG_COLOR};
@@ -88,6 +128,15 @@ const StyledMarkdown = styled.div`
 	p {
 		white-space: pre-wrap;
 	}
+
+	a {
+		text-decoration: none;
+	}
+	a {
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 `
 
 const StyledPre = styled.pre<{ theme: any }>`
@@ -111,6 +160,7 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 	const { theme } = useExtensionState()
 	const [reactContent, setMarkdown] = useRemark({
 		remarkPlugins: [
+			remarkUrlToLink,
 			() => {
 				return (tree) => {
 					visit(tree, "code", (node: any) => {