FIX: add dominant color attribute to chat image uploads (#24214)

When uploading images, they are assigned a dominant color which gets used in various places, such as Discourse Hub and the new lightbox. Previously in chat we didn't assign this attribute, so it was defaulting to a null value. We did however use it as an inline CSS style for the image background (which is visible while the image is downloaded).

This change adds data-dominant-color to the uploaded image in chat and uses it correctly within lightbox.

app/assets/javascripts/discourse/app/lib/lightbox/process-html.js

@@ -54,7 +54,10 @@ export async function processHTML({ container, selector, clickTarget }) {
           .querySelector(SELECTORS.FILE_DETAILS_CONTAINER)
           ?.innerText.trim() || null;
 
-      const _dominantColor = innerImage.dataset?.dominantColor || null;
+      const _dominantColor =
+        item.dataset?.dominantColor ??
+        innerImage.dataset?.dominantColor ??
+        null;
 
       const _cssVars = [
         _dominantColor && `--dominant-color: #${_dominantColor};`,

plugins/chat/assets/javascripts/discourse/components/chat-upload.hbs

@@ -8,6 +8,7 @@
     style={{this.imageStyle}}
     loading="lazy"
     tabindex="0"
+    data-dominant-color={{@upload.dominant_color}}
     {{on "load" this.imageLoaded}}
   />
 {{else if (eq this.type this.VIDEO_TYPE)}}

plugins/chat/spec/system/uploads_spec.rb

@@ -39,6 +39,20 @@ describe "Uploading files in chat messages", type: :system do
       expect(Chat::Message.last.uploads.count).to eq(1)
     end
 
+    it "adds dominant color attribute to images" do
+      chat.visit_channel(channel_1)
+      file_path = file_from_fixtures("logo.png", "images").path
+
+      attach_file(file_path) do
+        channel_page.open_action_menu
+        channel_page.click_action_button("chat-upload-btn")
+      end
+
+      channel_page.click_send_message
+
+      expect(channel_page.messages).to have_css(".chat-img-upload[data-dominant-color]", count: 1)
+    end
+
     it "allows uploading multiple files" do
       chat.visit_channel(channel_1)