feat: add copy code button to mermaid diagrams(RooCodeInc#2129) (RooCodeInc#2758)

* feat: add copy code button to mermaid diagrams(RooCodeInc#2129)

- Added copy button to MermaidBlock component
- Improved loading message text
- Ensure image buffer type safety with explicit Uint8Array conversion

* Apply suggestions from code review

Enhance accessibility by adding an aria-label description to the "Copy Code" button .

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

* Update webview-ui/src/components/common/MermaidBlock.tsx

Add try/catch or handle promise rejection to provide feedback on copy failures.

Co-authored-by: Dennis Bartlett <[email protected]>

* lint code after use CR suggestions

* fix: add async/await for clipboard operation handling - Fixes RooCodeInc#2129

---------

Co-authored-by: qiaozhuoyue <[email protected]>
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
Co-authored-by: Dennis Bartlett <[email protected]>

Author: 4 people

.changeset/gorgeous-rice-judge.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Added copy button to MermaidBlock component

src/integrations/misc/open-file.ts

@@ -13,7 +13,7 @@ export async function openImage(dataUri: string) {
 	const imageBuffer = Buffer.from(base64Data, "base64")
 	const tempFilePath = path.join(os.tmpdir(), `temp_image_${Date.now()}.${format}`)
 	try {
-		await vscode.workspace.fs.writeFile(vscode.Uri.file(tempFilePath), imageBuffer)
+		await vscode.workspace.fs.writeFile(vscode.Uri.file(tempFilePath), new Uint8Array(imageBuffer))
 		await vscode.commands.executeCommand("vscode.open", vscode.Uri.file(tempFilePath))
 	} catch (error) {
 		vscode.window.showErrorMessage(`Error opening image: ${error}`)

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

@@ -3,6 +3,7 @@ import mermaid from "mermaid"
 import { useDebounceEffect } from "@/utils/useDebounceEffect"
 import styled from "styled-components"
 import { vscode } from "@/utils/vscode"
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 
 const MERMAID_THEME = {
 	background: "#1e1e1e", // VS Code dark theme background
@@ -139,11 +140,22 @@ export default function MermaidBlock({ code }: MermaidBlockProps) {
 		}
 	}
 
+	const handleCopyCode = async () => {
+		try {
+			await navigator.clipboard.writeText(code)
+		} catch (err) {
+			console.error("Copy failed", err)
+		}
+	}
+
 	return (
 		<MermaidBlockContainer>
 			{isLoading && <LoadingMessage>Generating mermaid diagram...</LoadingMessage>}
-
-			{/* The container for the final <svg> or raw code. */}
+			<ButtonContainer>
+				<StyledVSCodeButton onClick={handleCopyCode} title="Copy Code" aria-label="Copy Code">
+					<span className="codicon codicon-copy"></span>
+				</StyledVSCodeButton>
+			</ButtonContainer>
 			<SvgContainer onClick={handleClick} ref={containerRef} $isLoading={isLoading} />
 		</MermaidBlockContainer>
 	)
@@ -209,6 +221,19 @@ const MermaidBlockContainer = styled.div`
 	margin: 8px 0;
 `
 
+const ButtonContainer = styled.div`
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	z-index: 1;
+	opacity: 0.6;
+	transition: opacity 0.2s ease;
+
+	&:hover {
+		opacity: 1;
+	}
+`
+
 const LoadingMessage = styled.div`
 	padding: 8px 0;
 	color: var(--vscode-descriptionForeground);
@@ -228,3 +253,34 @@ const SvgContainer = styled.div<SvgContainerProps>`
 	display: flex;
 	justify-content: center;
 `
+
+const StyledVSCodeButton = styled(VSCodeButton)`
+	padding: 4px;
+	height: 24px;
+	width: 24px;
+	min-width: unset;
+	background-color: var(--vscode-button-secondaryBackground);
+	color: var(--vscode-button-secondaryForeground);
+	border: 1px solid var(--vscode-button-border);
+	border-radius: 3px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.2s ease;
+
+	.codicon {
+		font-size: 14px;
+	}
+
+	&:hover {
+		background-color: var(--vscode-button-secondaryHoverBackground);
+		border-color: var(--vscode-button-border);
+		transform: translateY(-1px);
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	&:active {
+		transform: translateY(0);
+		box-shadow: none;
+	}
+`