From 5140b67d745044726f75d8f62303755dc54f5cb2 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Tue, 14 Jan 2025 00:20:17 -0500
Subject: [PATCH] Add a button to copy markdown out of the chat

---
 .changeset/real-rockets-sort.md            |  5 ++
 README.md                                  |  1 +
 webview-ui/src/components/chat/ChatRow.tsx | 67 +++++++++++++++++++---
 3 files changed, 66 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/real-rockets-sort.md

diff --git a/.changeset/real-rockets-sort.md b/.changeset/real-rockets-sort.md
new file mode 100644
index 0000000..3b24461
--- /dev/null
+++ b/.changeset/real-rockets-sort.md
@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Add a button to copy markdown out of the chat
diff --git a/README.md b/README.md
index 67efe0b..a1a4b5e 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,7 @@ Give it a try and let us know what you think in the reddit: https://www.reddit.c
 - Sound effects for feedback
 - Option to use browsers of different sizes and adjust screenshot quality
 - Quick prompt copying from history
+- Copy markdown from chat messages
 - OpenRouter compression support
 - Includes current time in the system prompt
 - Uses a file system watcher to more reliably watch for file system changes
diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index 21b5c34..3089a13 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -1,6 +1,6 @@
 import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
 import deepEqual from "fast-deep-equal"
-import React, { memo, useEffect, useMemo, useRef } from "react"
+import React, { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useSize } from "react-use"
 import {
 	ClineApiReqInfo,
@@ -551,7 +551,7 @@ export const ChatRowContent = ({
 				case "text":
 					return (
 						<div>
-							<Markdown markdown={message.text} />
+							<Markdown markdown={message.text} partial={message.partial} />
 						</div>
 					)
 				case "user_feedback":
@@ -703,7 +703,7 @@ export const ChatRowContent = ({
 								</div>
 							)}
 							<div style={{ paddingTop: 10 }}>
-								<Markdown markdown={message.text} />
+								<Markdown markdown={message.text} partial={message.partial} />
 							</div>
 						</>
 					)
@@ -876,7 +876,7 @@ export const ChatRowContent = ({
 									{title}
 								</div>
 								<div style={{ color: "var(--vscode-charts-green)", paddingTop: 10 }}>
-									<Markdown markdown={message.text} />
+									<Markdown markdown={message.text} partial={message.partial} />
 								</div>
 							</div>
 						)
@@ -918,10 +918,63 @@ export const ProgressIndicator = () => (
 	</div>
 )
 
-const Markdown = memo(({ markdown }: { markdown?: string }) => {
+const Markdown = memo(({ markdown, partial }: { markdown?: string; partial?: boolean }) => {
+	const [isHovering, setIsHovering] = useState(false);
+
 	return (
-		<div style={{ wordBreak: "break-word", overflowWrap: "anywhere", marginBottom: -15, marginTop: -15 }}>
-			<MarkdownBlock markdown={markdown} />
+		<div
+			onMouseEnter={() => setIsHovering(true)}
+			onMouseLeave={() => setIsHovering(false)}
+			style={{ position: "relative" }}
+		>
+			<div style={{ wordBreak: "break-word", overflowWrap: "anywhere", marginBottom: -15, marginTop: -15 }}>
+				<MarkdownBlock markdown={markdown} />
+			</div>
+			{markdown && !partial && isHovering && (
+				<div
+					style={{
+						position: "absolute",
+						bottom: "-4px",
+						right: "8px",
+						opacity: 0,
+						animation: "fadeIn 0.2s ease-in-out forwards",
+						borderRadius: "4px"
+					}}
+				>
+					<style>
+						{`
+							@keyframes fadeIn {
+								from { opacity: 0; }
+								to { opacity: 1.0; }
+							}
+						`}
+					</style>
+					<VSCodeButton
+						className="copy-button"
+						appearance="icon"
+						style={{
+							height: "24px",
+							border: "none",
+							background: "var(--vscode-editor-background)",
+							transition: "background 0.2s ease-in-out"
+						}}
+						onClick={() => {
+							navigator.clipboard.writeText(markdown);
+							// Flash the button background briefly to indicate success
+							const button = document.activeElement as HTMLElement;
+							if (button) {
+								button.style.background = "var(--vscode-button-background)";
+								setTimeout(() => {
+									button.style.background = "";
+								}, 200);
+							}
+						}}
+						title="Copy as markdown"
+					>
+						<span className="codicon codicon-copy"></span>
+					</VSCodeButton>
+				</div>
+			)}
 		</div>
 	)
 })