From e1f51d7c337989d19fa914cdf480da5c8e26c94e Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Mon, 11 Aug 2025 16:18:57 +0000
Subject: [PATCH] fix: prevent infinite recursion in Trans components in
 ChatRow

Fixes #6937 - Maximum call stack size exceeded error

The issue was caused by passing JSX elements with children to the Trans
component's components prop. When the translation string also contained
the same tags, it created infinite recursion during interpolation.

Changed all Trans components to use self-closing tags (e.g., <code />)
instead of tags with children (e.g., <code>{value}</code>) to prevent
the recursion issue.
---
 webview-ui/src/components/chat/ChatRow.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index 4fa921f443..4524edb28a 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -479,13 +479,13 @@ export const ChatRowContent = ({
 							{tool.path ? (
 								<Trans
 									i18nKey="chat:codebaseSearch.wantsToSearchWithPath"
-									components={{ code: <code></code> }}
+									components={{ code: <code /> }}
 									values={{ query: tool.query, path: tool.path }}
 								/>
 							) : (
 								<Trans
 									i18nKey="chat:codebaseSearch.wantsToSearch"
-									components={{ code: <code></code> }}
+									components={{ code: <code /> }}
 									values={{ query: tool.query }}
 								/>
 							)}
@@ -696,7 +696,7 @@ export const ChatRowContent = ({
 												? "chat:directoryOperations.wantsToSearchOutsideWorkspace"
 												: "chat:directoryOperations.wantsToSearch"
 										}
-										components={{ code: <code>{tool.regex}</code> }}
+										components={{ code: <code /> }}
 										values={{ regex: tool.regex }}
 									/>
 								) : (
@@ -706,7 +706,7 @@ export const ChatRowContent = ({
 												? "chat:directoryOperations.didSearchOutsideWorkspace"
 												: "chat:directoryOperations.didSearch"
 										}
-										components={{ code: <code>{tool.regex}</code> }}
+										components={{ code: <code /> }}
 										values={{ regex: tool.regex }}
 									/>
 								)}
@@ -732,13 +732,13 @@ export const ChatRowContent = ({
 										{tool.reason ? (
 											<Trans
 												i18nKey="chat:modes.wantsToSwitchWithReason"
-												components={{ code: <code>{tool.mode}</code> }}
+												components={{ code: <code /> }}
 												values={{ mode: tool.mode, reason: tool.reason }}
 											/>
 										) : (
 											<Trans
 												i18nKey="chat:modes.wantsToSwitch"
-												components={{ code: <code>{tool.mode}</code> }}
+												components={{ code: <code /> }}
 												values={{ mode: tool.mode }}
 											/>
 										)}
@@ -748,13 +748,13 @@ export const ChatRowContent = ({
 										{tool.reason ? (
 											<Trans
 												i18nKey="chat:modes.didSwitchWithReason"
-												components={{ code: <code>{tool.mode}</code> }}
+												components={{ code: <code /> }}
 												values={{ mode: tool.mode, reason: tool.reason }}
 											/>
 										) : (
 											<Trans
 												i18nKey="chat:modes.didSwitch"
-												components={{ code: <code>{tool.mode}</code> }}
+												components={{ code: <code /> }}
 												values={{ mode: tool.mode }}
 											/>
 										)}
@@ -772,7 +772,7 @@ export const ChatRowContent = ({
 							<span style={{ fontWeight: "bold" }}>
 								<Trans
 									i18nKey="chat:subtasks.wantsToCreate"
-									components={{ code: <code>{tool.mode}</code> }}
+									components={{ code: <code /> }}
 									values={{ mode: tool.mode }}
 								/>
 							</span>