From e4c7b7680d80a4f6b9dff3c6868634c229dae980 Mon Sep 17 00:00:00 2001
From: Tom X Nguyen <tom81094@gmail.com>
Date: Wed, 12 Mar 2025 23:14:42 +0700
Subject: [PATCH 1/2] fix(ui): remove trailing code delimiters from markdown
 content

---
 webview-ui/src/components/chat/ChatRow.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index e6e830952a3..b3fe27546a1 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -986,13 +986,21 @@ const Markdown = memo(({ markdown, partial }: { markdown?: string; partial?: boo
 	const [isHovering, setIsHovering] = useState(false)
 	const { copyWithFeedback } = useCopyToClipboard(200) // shorter feedback duration for copy button flash
 
+	// Remove trailing code delimiters like "```tool_code" or "```xml"
+	const cleanedMarkdown = useMemo(() => {
+		if (!markdown) return markdown
+
+		// Regex to match trailing code block delimiters at the very end of the string
+		return markdown.replace(/```[a-zA-Z0-9_-]*\s*$/g, "")
+	}, [markdown])
+
 	return (
 		<div
 			onMouseEnter={() => setIsHovering(true)}
 			onMouseLeave={() => setIsHovering(false)}
 			style={{ position: "relative" }}>
 			<div style={{ wordBreak: "break-word", overflowWrap: "anywhere", marginBottom: -15, marginTop: -15 }}>
-				<MarkdownBlock markdown={markdown} />
+				<MarkdownBlock markdown={cleanedMarkdown} />
 			</div>
 			{markdown && !partial && isHovering && (
 				<div

From c1597086a27e86b8caea51dfbb8f17d7b705e5c1 Mon Sep 17 00:00:00 2001
From: Tom X Nguyen <tom81094@gmail.com>
Date: Wed, 12 Mar 2025 23:25:57 +0700
Subject: [PATCH 2/2] refactor(markdown): extract trailing code delimiter
 cleaning to utility function

---
 webview-ui/src/components/chat/ChatRow.tsx | 10 +++-------
 webview-ui/src/utils/markdownUtils.ts      | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 webview-ui/src/utils/markdownUtils.ts

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index b3fe27546a1..128377863c6 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -3,6 +3,7 @@ import deepEqual from "fast-deep-equal"
 import React, { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useSize } from "react-use"
 import { useCopyToClipboard } from "../../utils/clipboard"
+import { cleanTrailingCodeDelimiters } from "../../utils/markdownUtils"
 import {
 	ClineApiReqInfo,
 	ClineAskUseMcpServer,
@@ -986,13 +987,8 @@ const Markdown = memo(({ markdown, partial }: { markdown?: string; partial?: boo
 	const [isHovering, setIsHovering] = useState(false)
 	const { copyWithFeedback } = useCopyToClipboard(200) // shorter feedback duration for copy button flash
 
-	// Remove trailing code delimiters like "```tool_code" or "```xml"
-	const cleanedMarkdown = useMemo(() => {
-		if (!markdown) return markdown
-
-		// Regex to match trailing code block delimiters at the very end of the string
-		return markdown.replace(/```[a-zA-Z0-9_-]*\s*$/g, "")
-	}, [markdown])
+	// Use the utility function to clean trailing code delimiters
+	const cleanedMarkdown = useMemo(() => cleanTrailingCodeDelimiters(markdown), [markdown])
 
 	return (
 		<div
diff --git a/webview-ui/src/utils/markdownUtils.ts b/webview-ui/src/utils/markdownUtils.ts
new file mode 100644
index 00000000000..d832eb92eda
--- /dev/null
+++ b/webview-ui/src/utils/markdownUtils.ts
@@ -0,0 +1,19 @@
+/**
+ * Utility functions for markdown processing
+ */
+
+/**
+ * Removes trailing code block delimiters from markdown text
+ *
+ * This function removes trailing code block delimiters like "```tool_code" or "```xml"
+ * that might appear at the very end of a markdown string.
+ *
+ * @param markdown - The markdown text to clean
+ * @returns The cleaned markdown text with trailing code delimiters removed
+ */
+export function cleanTrailingCodeDelimiters(markdown?: string): string | undefined {
+	if (!markdown) return markdown
+
+	// Regex to match trailing code block delimiters at the very end of the string
+	return markdown.replace(/```[a-zA-Z0-9_-]*\s*$/g, "")
+}