From cabcc0b1d492c33e66358cd26e4d216b536dc130 Mon Sep 17 00:00:00 2001
From: Oleg <ogrechko@top-sysops.ru>
Date: Wed, 19 Aug 2026 08:28:06 +0000
Subject: [PATCH] Fix inline email images showing twice (once in the body, once
 as a chip)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An inline image referenced via cid: is already rendered inside message.bodyHtml
(added in the previous commit) but was also still stored as a regular
attachment row, so it showed up a second time as an AttachmentChip thumbnail
underneath the message — the images at top were correct, the small chips
below were a duplicate of the same image.

AttachmentDTO now carries isInline (true when the attachment's contentId is
set), and the message thread — both the admin ticket view and the customer
portal — filters those out of the separate attachment-chip list. Verified
against a live inbound message with a cid-referenced image: previously
rendered as both an <img> and an <a>-wrapped chip, now only the <img>.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GteWhnWKTmnXcsd5jx6H7u
---
 src/app/(admin)/tickets/[id]/ticket-thread.tsx   | 16 ++++++++++------
 .../t/[token]/[ticketId]/portal-thread.tsx       |  8 +++++---
 src/lib/tickets/service.ts                       |  3 ++-
 src/lib/tickets/types.ts                         |  4 ++++
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/(admin)/tickets/[id]/ticket-thread.tsx b/src/app/(admin)/tickets/[id]/ticket-thread.tsx
index 4ea0513..a169535 100644
--- a/src/app/(admin)/tickets/[id]/ticket-thread.tsx
+++ b/src/app/(admin)/tickets/[id]/ticket-thread.tsx
@@ -333,9 +333,11 @@ function MessageBubble({ message }: { message: MessageDTO }) {
         ) : (
           <p className="mb-1 whitespace-pre-wrap text-sm">{message.body}</p>
         )}
-        {message.attachments.map((a) => (
-          <AttachmentChip key={a.id} attachment={a} />
-        ))}
+        {message.attachments
+          .filter((a) => !a.isInline)
+          .map((a) => (
+            <AttachmentChip key={a.id} attachment={a} />
+          ))}
         <p className="text-[11px] text-warning-soft-text/80">
           {message.authorName} · {formatRelativeTime(message.createdAt)}
         </p>
@@ -357,9 +359,11 @@ function MessageBubble({ message }: { message: MessageDTO }) {
         ) : (
           <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
         )}
-        {message.attachments.map((a) => (
-          <AttachmentChip key={a.id} attachment={a} />
-        ))}
+        {message.attachments
+          .filter((a) => !a.isInline)
+          .map((a) => (
+            <AttachmentChip key={a.id} attachment={a} />
+          ))}
         <p className={`text-[11px] ${isAgent ? "text-white/70" : "text-text-faint"}`}>
           {message.authorName} · {formatRelativeTime(message.createdAt)}
         </p>
diff --git a/src/app/(portal)/t/[token]/[ticketId]/portal-thread.tsx b/src/app/(portal)/t/[token]/[ticketId]/portal-thread.tsx
index 7c0baae..35c31a6 100644
--- a/src/app/(portal)/t/[token]/[ticketId]/portal-thread.tsx
+++ b/src/app/(portal)/t/[token]/[ticketId]/portal-thread.tsx
@@ -159,9 +159,11 @@ function MessageBubble({
         ) : (
           <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
         )}
-        {message.attachments.map((a) => (
-          <AttachmentChip key={a.id} attachment={a} token={token} />
-        ))}
+        {message.attachments
+          .filter((a) => !a.isInline)
+          .map((a) => (
+            <AttachmentChip key={a.id} attachment={a} token={token} />
+          ))}
         <p className={`text-[11px] ${isMine ? "text-white/70" : "text-text-faint"}`}>
           {message.authorName} · {formatRelativeTime(message.createdAt)}
         </p>
diff --git a/src/lib/tickets/service.ts b/src/lib/tickets/service.ts
index 9f4034d..4afe21e 100644
--- a/src/lib/tickets/service.ts
+++ b/src/lib/tickets/service.ts
@@ -109,7 +109,7 @@ async function getAttachmentsForMessages(messageIds: string[]): Promise<Map<stri
   });
   for (const row of rows) {
     const list = map.get(row.messageId) ?? [];
-    list.push({ id: row.id, filename: row.filename, mimeType: row.mimeType, sizeBytes: row.sizeBytes });
+    list.push({ id: row.id, filename: row.filename, mimeType: row.mimeType, sizeBytes: row.sizeBytes, isInline: Boolean(row.contentId) });
     map.set(row.messageId, list);
   }
   return map;
@@ -155,6 +155,7 @@ async function appendMessage(params: {
       filename: a.filename,
       mimeType: a.mimeType,
       sizeBytes: a.sizeBytes,
+      isInline: Boolean(a.contentId),
     }));
   }
 
diff --git a/src/lib/tickets/types.ts b/src/lib/tickets/types.ts
index 1c07131..caee864 100644
--- a/src/lib/tickets/types.ts
+++ b/src/lib/tickets/types.ts
@@ -33,6 +33,10 @@ export interface AttachmentDTO {
   filename: string;
   mimeType: string;
   sizeBytes: number;
+  // True for an inline image referenced from a message's bodyHtml (a cid:
+  // rewritten to this attachment's URL) — the UI uses this to skip showing
+  // it a second time as a separate chip below an already-rendered body.
+  isInline: boolean;
 }
 
 export interface MessageDTO {