fix: chat UI fix for media

components/chat/message-group.tsx

@@ -54,6 +54,22 @@ function isStickerOnly(m: ChatMessage): boolean {
   return !m.body && atts.length > 0 && atts.every((a) => a.kind === "sticker");
 }
 
+/** True when a message carries photos or video. */
+function carriesMedia(m: ChatMessage): boolean {
+  return (m.attachments ?? []).some(
+    (a) => a.kind === "image" || a.kind === "video",
+  );
+}
+
+/**
+ * True when a message's content brings its own frame — a shared post card,
+ * stickers, or media. All three are images with their own edges, and a
+ * coloured bubble around them reads as a second frame.
+ */
+function rendersBare(m: ChatMessage): boolean {
+  return sharesAnEntity(m) || isStickerOnly(m) || carriesMedia(m);
+}
+
 /** Distinct emoji shown before the rest collapse into "+N". */
 const MAX_TRAIL_EMOJI = 4;
 
@@ -229,7 +245,7 @@ export function MessageGroup({
                   // own border, rounding and background, so the bubble drops
                   // its chrome rather than drawing a second frame around it.
                   // Any caption gets the padding back on its own line below.
-                  sharesAnEntity(m) || isStickerOnly(m)
+                  rendersBare(m)
                     ? "overflow-hidden bg-transparent"
                     : cn(
                         "px-3 py-2",
@@ -264,11 +280,16 @@ export function MessageGroup({
                       <span
                         className={cn(
                           "block",
-                          // The bubble gave up its padding for the card, so a
-                          // caption supplies its own.
-                          sharesAnEntity(m)
-                            ? "rounded-b-lg border border-t-0 border-border px-3 py-2"
-                            : undefined,
+                          // The bubble gave up its padding and colour, so a
+                          // caption carries its own — otherwise it would sit
+                          // as bare text on the thread background.
+                          rendersBare(m) &&
+                            cn(
+                              "mt-0.5 rounded-lg px-3 py-2",
+                              mine
+                                ? "bg-primary text-primary-foreground dark:text-white"
+                                : "bg-muted text-foreground",
+                            ),
                         )}
                       >
                         <MessageText body={m.body} entities={m.entities} />