From 890e6694c24b6cdf4906c2738c3c605cf92d0d12 Mon Sep 17 00:00:00 2001
From: Akarshan <akarshan@menlo.ai>
Date: Thu, 30 Oct 2025 10:26:16 +0530
Subject: [PATCH] feat: add linkComponents prop for Markdown rendering in
 ThinkingBlock
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a `linkComponents` prop that can be supplied to `RenderMarkdown` within
`ThinkingBlock` and propagates this prop to the thread view.  The change
enables custom link rendering (e.g., special handling of URLs or
interactions) without modifying the core component logic.  It also renames
the “Tool Call” label to “Tool Input” to more accurately describe the
content being displayed.
---
 web-app/src/containers/ThinkingBlock.tsx | 16 +++++++++++++---
 web-app/src/containers/ThreadContent.tsx |  1 +
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/web-app/src/containers/ThinkingBlock.tsx b/web-app/src/containers/ThinkingBlock.tsx
index 55b727ed5..498e61607 100644
--- a/web-app/src/containers/ThinkingBlock.tsx
+++ b/web-app/src/containers/ThinkingBlock.tsx
@@ -22,6 +22,7 @@ interface Props {
   steps?: ReActStep[] // Updated type
   loading?: boolean
   duration?: number
+  linkComponents?: object
 }
 
 // Utility function to safely parse JSON
@@ -69,6 +70,7 @@ const ThinkingBlock = ({
   steps = [],
   loading: propLoading,
   duration,
+  linkComponents,
 }: Props) => {
   const thinkingState = useThinkingStore((state) => state.thinkingState)
   const setThinkingState = useThinkingStore((state) => state.setThinkingState)
@@ -157,7 +159,7 @@ const ThinkingBlock = ({
       contentDisplay = (
         <>
           <p className="font-medium text-main-view-fg/90">
-            Tool Call: <span className="text-accent">{step.content}</span>
+            Tool Input: <span className="text-accent">{step.content}</span>
           </p>
           {args && (
             <div className="mt-1">
@@ -210,14 +212,22 @@ const ThinkingBlock = ({
           <>
             <p className="font-medium text-main-view-fg/90">Tool Output:</p>
             <div className="mt-1">
-              <RenderMarkdown isWrapping={true} content={content} />
+              <RenderMarkdown
+                isWrapping={true}
+                content={content}
+                components={linkComponents}
+              />
             </div>
           </>
         )
       }
     } else {
       contentDisplay = (
-        <RenderMarkdown isWrapping={true} content={step.content} />
+        <RenderMarkdown
+          isWrapping={true}
+          content={step.content}
+          components={linkComponents}
+        />
       )
     }
 
diff --git a/web-app/src/containers/ThreadContent.tsx b/web-app/src/containers/ThreadContent.tsx
index f8f4de055..4e48f4807 100644
--- a/web-app/src/containers/ThreadContent.tsx
+++ b/web-app/src/containers/ThreadContent.tsx
@@ -642,6 +642,7 @@ export const ThreadContent = memo(
                 duration={
                   item.metadata?.totalThinkingTime as number | undefined
                 }
+                linkComponents={linkComponents}
               />
             )}