Adding copy button to code blocks (RooCodeInc#3011)

* feat: add copy button to code blocks

* Adding ability to copy Code blocks

* feat: add OpenRouter base URL and balance display component

---------

Co-authored-by: ShlomoCode <[email protected]>

Author: arafatkatze

.changeset/nervous-eels-look.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Added copy button to code blocks.

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

@@ -1,4 +1,4 @@
-import React, { memo, useEffect } from "react"
+import React, { memo, useEffect, useRef, useState } from "react"
 import type { ComponentProps } from "react"
 import { useRemark } from "react-remark"
 import rehypeHighlight, { Options } from "rehype-highlight"
@@ -91,15 +91,34 @@ const remarkPreventBoldFilenames = () => {
 	}
 }
 
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+
+const CopyButton = styled(VSCodeButton)`
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	z-index: 1;
+	opacity: 0;
+`
+
+const CodeBlockContainer = styled.div`
+	position: relative;
+
+	&:hover ${CopyButton} {
+		opacity: 1;
+	}
+`
+
 const StyledMarkdown = styled.div`
 	pre {
 		background-color: ${CODE_BLOCK_BG_COLOR};
 		border-radius: 3px;
-		margin: 13x 0;
+		margin: 13px 0;
 		padding: 10px 10px;
 		max-width: calc(100vw - 20px);
 		overflow-x: auto;
 		overflow-y: hidden;
+		padding-right: 70px;
 	}
 
 	pre > code {
@@ -197,8 +216,42 @@ const StyledPre = styled.pre<{ theme: any }>`
 			.join("")}
 `
 
+const PreWithCopyButton = ({
+	children,
+	theme,
+	...preProps
+}: { theme: Record<string, string> } & React.HTMLAttributes<HTMLPreElement>) => {
+	const preRef = useRef<HTMLPreElement>(null)
+	const [copied, setCopied] = useState(false)
+
+	const handleCopy = () => {
+		if (preRef.current) {
+			const codeElement = preRef.current.querySelector("code")
+			const textToCopy = codeElement ? codeElement.textContent : preRef.current.textContent
+
+			if (!textToCopy) return
+			navigator.clipboard.writeText(textToCopy).then(() => {
+				setCopied(true)
+				setTimeout(() => setCopied(false), 1500)
+			})
+		}
+	}
+
+	return (
+		<CodeBlockContainer>
+			<CopyButton appearance="icon" onClick={handleCopy} aria-label={copied ? "Copied" : "Copy"}>
+				<span className={`codicon codicon-${copied ? "check" : "copy"}`}></span>
+			</CopyButton>
+			<StyledPre {...preProps} theme={theme} ref={preRef}>
+				{children}
+			</StyledPre>
+		</CodeBlockContainer>
+	)
+}
+
 const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 	const { theme } = useExtensionState()
+
 	const [reactContent, setMarkdown] = useRemark({
 		remarkPlugins: [
 			remarkPreventBoldFilenames,
@@ -223,17 +276,17 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 		],
 		rehypeReactOptions: {
 			components: {
-				pre: ({ node, children, ...preProps }: any) => {
+				pre: ({ children, ...preProps }: React.HTMLAttributes<HTMLPreElement>) => {
 					if (Array.isArray(children) && children.length === 1 && React.isValidElement(children[0])) {
 						const child = children[0] as React.ReactElement<{ className?: string }>
 						if (child.props?.className?.includes("language-mermaid")) {
 							return child
 						}
 					}
 					return (
-						<StyledPre {...preProps} theme={theme}>
+						<PreWithCopyButton {...preProps} theme={theme || {}}>
 							{children}
-						</StyledPre>
+						</PreWithCopyButton>
 					)
 				},
 				code: (props: ComponentProps<"code">) => {
@@ -253,7 +306,7 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 	}, [markdown, setMarkdown, theme])
 
 	return (
-		<div style={{}}>
+		<div>
 			<StyledMarkdown>{reactContent}</StyledMarkdown>
 		</div>
 	)