From 92c76dc4ce9494532e50eba85e3f804fb8ad9b08 Mon Sep 17 00:00:00 2001
From: youssef <youssef.bsf@gmail.com>
Date: Tue, 17 Feb 2026 04:36:28 +0000
Subject: [PATCH] fix: route local file paths through raw-file API in webchat
 markdown images

Images in webchat markdown messages (e.g. agent screenshots) fail to
load because the img component passes local filesystem paths directly
as <img src>, which the browser cannot resolve.

The chain-of-thought component already handles this via
resolveMediaUrl(), but the ReactMarkdown img override did not.

Now non-HTTP/data src values are proxied through
/api/workspace/raw-file?path=... so the server can resolve and serve
local files.
---
 apps/web/app/components/chat-message.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/components/chat-message.tsx b/apps/web/app/components/chat-message.tsx
index 77740393e9a..5074e5786fe 100644
--- a/apps/web/app/components/chat-message.tsx
+++ b/apps/web/app/components/chat-message.tsx
@@ -556,12 +556,16 @@ const mdComponents: Components = {
 			</a>
 		);
 	},
-	// Render images with loading=lazy
-	img: ({ src, alt, ...props }) => (
-		// eslint-disable-next-line @next/next/no-img-element
-		<img src={src} alt={alt ?? ""} loading="lazy" {...props} />
-	),
-	// Syntax-highlighted fenced code blocks
+	// Render images — route local file paths through raw-file API
+	img: ({ src, alt, ...props }) => {
+		const resolvedSrc = typeof src === "string" && !src.startsWith("http://") && !src.startsWith("https://") && !src.startsWith("data:")
+			? `/api/workspace/raw-file?path=${encodeURIComponent(src)}`
+			: src;
+		return (
+			// eslint-disable-next-line @next/next/no-img-element
+			<img src={resolvedSrc} alt={alt ?? ""} loading="lazy" {...props} />
+		);
+	},
 	pre: ({ children, ...props }) => {
 		// react-markdown wraps code blocks in <pre><code>...
 		// Extract the code element to get lang + content