FEATURE: Add thumbnails for chat image uploads (#24328)

Introduces the concept of image thumbnails in chat, prior to this we uploaded and used full size chat images within channels and direct messages.

The following changes are covered:
- Post processing of image uploads to create the thumbnail within Chat::MessageProcessor
- Extract responsive image ratios into CookedProcessorMixin (used for creating upload variations)
- Add thumbnail to upload serializer from plugin.rb
- Convert chat upload template to glimmer component using .gjs format
- Use thumbnail image within chat upload component (stores full size img in orig-src data attribute)
- Old uploads which don't have thumbnails will fallback to full size images in channels/DMs
- Update Magnific lightbox to use full size image when clicked
- Update Glimmer lightbox to use full size image (enables zooming for chat images)

plugins/chat/spec/system/uploads_spec.rb

@@ -12,6 +12,7 @@ describe "Uploading files in chat messages", type: :system do
 
   context "when uploading to a new message" do
     before do
+      Jobs.run_immediately!
       channel_1.add(current_user)
       sign_in(current_user)
     end
@@ -39,6 +40,34 @@ describe "Uploading files in chat messages", type: :system do
       expect(Chat::Message.last.uploads.count).to eq(1)
     end
 
+    it "adds a thumbnail for large images" do
+      SiteSetting.create_thumbnails = true
+
+      chat.visit_channel(channel_1)
+      file_path = file_from_fixtures("huge.jpg", "images").path
+
+      attach_file(file_path) do
+        channel_page.open_action_menu
+        channel_page.click_action_button("chat-upload-btn")
+      end
+
+      expect { channel_page.send_message }.to change { Chat::Message.count }.by(1)
+
+      expect(channel_page).to have_no_css(".chat-composer-upload")
+
+      message = Chat::Message.last
+
+      try_until_success(timeout: 5) { expect(message.uploads.first.thumbnail).to be_present }
+
+      upload = message.uploads.first
+
+      # image has src attribute with thumbnail url
+      expect(channel_page).to have_css(".chat-uploads img[src$='#{upload.thumbnail.url}']")
+
+      # image has data-large-src with original image src
+      expect(channel_page).to have_css(".chat-uploads img[data-large-src$='#{upload.url}']")
+    end
+
     it "adds dominant color attribute to images" do
       chat.visit_channel(channel_1)
       file_path = file_from_fixtures("logo.png", "images").path