From f0a94d07d8b2ae53853f3e45120704b6b1a55a9c Mon Sep 17 00:00:00 2001
From: RogerHsu7 <roger.hsu7@gmail.com>
Date: Fri, 30 Jan 2026 10:41:33 +0800
Subject: [PATCH] Create MessageMedia.tsx

---
 .../webchat-upload/frontend/MessageMedia.tsx  | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 drafts/webchat-upload/frontend/MessageMedia.tsx

diff --git a/drafts/webchat-upload/frontend/MessageMedia.tsx b/drafts/webchat-upload/frontend/MessageMedia.tsx
new file mode 100644
index 000000000..858cc6266
--- /dev/null
+++ b/drafts/webchat-upload/frontend/MessageMedia.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+type Media = { path: string, mime?: string, name?: string }
+
+function isImage(m?: string, path?: string) {
+  return (m && m.startsWith('image/')) || (path && path.match(/\.(png|jpe?g|webp|gif)$/i))
+}
+
+export function MessageMedia({ media }: { media: Media[] }) {
+  if (!media?.length) return null
+  return (
+    <div className="message-media">
+      {media.map((m, i) => (
+        <div key={i} className="media-item">
+          {isImage(m.mime, m.path) ? (
+            // MEDIA:/absolute/path should be proxied/served by the gateway; adjust URL transformation accordingly
+            <img src={m.path.replace(/^MEDIA:/, '/media/')} alt={m.name || 'image'} />
+          ) : (
+            <a href={m.path.replace(/^MEDIA:/, '/media/')} target="_blank" rel="noreferrer">{m.name || 'file'}</a>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}