From 08f1af00b66b1333bf0bbd0eaef30a1adee978c1 Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Sat, 24 Jan 2026 20:58:56 +0800
Subject: [PATCH] feat: support absolute path as image src

---
 .../workspace/messages/message-list-item.tsx  | 34 ++++++++++++++++++-
 frontend/src/core/artifacts/utils.ts          |  4 +++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/workspace/messages/message-list-item.tsx b/frontend/src/components/workspace/messages/message-list-item.tsx
index ab39322..3caf6bd 100644
--- a/frontend/src/components/workspace/messages/message-list-item.tsx
+++ b/frontend/src/components/workspace/messages/message-list-item.tsx
@@ -1,4 +1,5 @@
 import type { Message } from "@langchain/langgraph-sdk";
+import { useParams } from "next/navigation";
 import { memo, useMemo } from "react";
 
 import {
@@ -7,6 +8,7 @@ import {
   MessageResponse as AIElementMessageResponse,
   MessageToolbar,
 } from "@/components/ai-elements/message";
+import { resolveArtifactURL } from "@/core/artifacts/utils";
 import {
   extractContentFromMessage,
   extractReasoningContentFromMessage,
@@ -74,9 +76,39 @@ function MessageContent_({
     }
     return content;
   }, [isLoading, message]);
+  const { thread_id } = useParams<{ thread_id: string }>();
   return (
     <AIElementMessageContent className={className}>
-      <AIElementMessageResponse rehypePlugins={rehypePlugins}>
+      <AIElementMessageResponse
+        rehypePlugins={rehypePlugins}
+        components={{
+          img: ({ src, alt }: React.ImgHTMLAttributes<HTMLImageElement>) => {
+            if (!src) return null;
+            if (typeof src !== "string") {
+              return (
+                <img
+                  className="max-w-full overflow-hidden rounded-lg"
+                  src={src}
+                  alt={alt}
+                />
+              );
+            }
+            let url = src;
+            if (src.startsWith("/mnt/")) {
+              url = resolveArtifactURL(src, thread_id);
+            }
+            return (
+              <a href={url} target="_blank" rel="noopener noreferrer">
+                <img
+                  className="max-w-full overflow-hidden rounded-lg"
+                  src={url}
+                  alt={alt}
+                />
+              </a>
+            );
+          },
+        }}
+      >
         {content}
       </AIElementMessageResponse>
     </AIElementMessageContent>
diff --git a/frontend/src/core/artifacts/utils.ts b/frontend/src/core/artifacts/utils.ts
index 5dc03e3..d201341 100644
--- a/frontend/src/core/artifacts/utils.ts
+++ b/frontend/src/core/artifacts/utils.ts
@@ -16,3 +16,7 @@ export function urlOfArtifact({
 export function extractArtifactsFromThread(thread: AgentThread) {
   return thread.values.artifacts ?? [];
 }
+
+export function resolveArtifactURL(absolutePath: string, threadId: string) {
+  return `${getBackendBaseURL()}/api/threads/${threadId}/artifacts${absolutePath}`;
+}