Images in an enlarged chat cannot be opened after a message with the image is posted

Contribute Bug

AI-generated summary

Users reported a bug where images in an enlarged chat fail to open in a lightbox after being posted or received meglio. This is a recent regression, confirmed by j.jaffeux and pmusaraj. Arkshine identified the root cause: a recent change altered api.decorateChatMessage to target .chat-cooked instead of .chat-message-container, causing the lightbox to miss images nested in chat-message-collapser-body. The issue stems from commit a0f681b. david acknowledged the issue and submitted a fix in PR 31414, noting that while limiting decoration to message content was intentional, the lightbox logic failed to account for optimized image replacements. A temporary workaround is to refresh the page before clicking the image.

1

Reproduction steps:

1. Enlarge chat:

image
image408×214 1.91 KB

2.1. Post a message with a medium to big image, so that you’d expect a popup with a larger image if you click on it in the message.

OR

2.2. Receive such a message from other people in the chat.

3. Click on the image. It won’t open.

Workaround:

4. Refresh the page in the browser.

5. Click on the image - it would now open a popup with a bigger size image.

2 Likes
Chat image not opening full screen when clicked on first upload
2

That’s a recent regression afayk?

1 Like
3

Yes, I have seen this today as well. Pretty sure it’s a recent regression.

1 Like
5

I think the issue is here:

The image shows a computer screen displaying code in a text editor, with a highlighted coding exercise section where a variable declaration "this.getChatElement()" is being typed with an "I" character awaiting completion. (Captioned by AI)
The image shows a computer screen displaying code in a text editor, with a highlighted coding exercise section where a variable declaration "this.getChatElement()" is being typed with an "I" character awaiting completion. (Captioned by AI)1541×364 54.9 KB

api.decorateChatMessage(
      (element) =>
        lightbox(element.querySelectorAll("img:not(.emoji, .avatar)")),
      {
        id: "lightbox",
      }
    );

Before, api.decorateChatMessage was passing .chat-message-container element:

The image displays a fragment of HTML code structured with various nested div elements, including a chat message container with class attributes such as "flex" and "grid". (Captioned by AI)
The image displays a fragment of HTML code structured with various nested div elements, including a chat message container with class attributes such as "flex" and "grid". (Captioned by AI)1069×337 10.3 KB

After, it passes .chat-cooked element:

A chat message UI with visible HTML structure. (Captioned by AI)
A chat message UI with visible HTML structure. (Captioned by AI)1134×330 20.7 KB

With the images defined inside chat-message-collapser-body, lightbox can’t find the images here.

Changes introduced here: DEV: Refactor chat HTML decorating (#31309) · discourse/discourse@a0f681b · GitHub

5 Likes
6

Yes, sorry you dont see it, it’s a whisper but I have already pinged @david about it. I also think this is related to this recent change.

Thanks for checking, I didnt have the time yet to prove my theory :+1:

4 Likes
8

Thanks @meglio and @Arkshine!

Limiting the normal “decorate cooked” to only the message content is intentional. But we did add some specific lightboxing logic which was supposed to handle the images. Looks like that wasn’t handling the case where the original image is swapped out for the optimized version.

Fix here:

https://github.com/discourse/discourse/pull/31414

7 Likes
9

This topic was automatically closed after 21 hours. New replies are no longer allowed.