Fixes #3210 - Allow image popup and download within Chat.

app/assets/javascripts/app/controllers/chat.coffee

@@ -397,6 +397,7 @@ class ChatWindow extends App.Controller
     'click .js-info':                'toggleMeta'
     'click .js-createTicket':        'ticketCreate'
     'click .js-transferChat':        'transfer'
+    'click .chat-message img':       'imageView'
     'submit .js-metaForm':           'sendMetaForm'
 
   elements:
@@ -799,6 +800,11 @@ class ChatWindow extends App.Controller
 
     @scrollToBottom()
 
+  imageView: (e) ->
+    e.preventDefault()
+    e.stopPropagation()
+    new App.CustomerChatImageView(image_base64: $(e.target).get(0).src)
+
   detectScrolledtoBottom: =>
     scrollBottom = @scrollHolder.scrollTop() + @scrollHolder.outerHeight()
     @scrolledToBottom = Math.abs(scrollBottom - @scrollHolder.prop('scrollHeight')) <= @scrollSnapTolerance

app/assets/javascripts/app/controllers/customer_chat/image_view.coffee

@@ -0,0 +1,17 @@
+class App.CustomerChatImageView extends App.ControllerModal
+  buttonClose: true
+  buttonCancel: false
+  buttonSubmit: 'Download'
+  buttonClass: 'btn--success'
+  head: ''
+  veryLarge: true
+
+  content: ->
+    "<div class=\"centered imagePreview\"><img style=\"max-width: 100%; width: 1000px;\" src=\"#{@image_base64}\"></div>"
+
+  onSubmit: =>
+    downloadLink = document.createElement('a')
+    downloadLink.href = @image_base64
+    downloadLink.target = '_blank'
+    downloadLink.download = 'chat_message_image'
+    downloadLink.click()

app/assets/stylesheets/zammad.scss

@@ -11680,6 +11680,10 @@ output {
   margin-bottom: 4px;
 }
 
+.chat-message img {
+  @extend %clickable;
+}
+
 .chat-message--customer.chat-message--new {
   font-weight: bold;
 }

spec/system/chat_spec.rb

@@ -413,4 +413,33 @@ RSpec.describe 'Chat Handling', type: :system do
       include_examples 'test issue #2471'
     end
   end
+
+  context 'when image is present in chat message', authenticated_as: :authenticate do
+    let(:chat) { create(:chat) }
+    let(:chat_user) { create(:agent) }
+    let(:chat_session) { create(:'chat/session', user: chat_user, chat: chat) }
+
+    before do
+      file     = File.binread(Rails.root.join('spec/fixtures/image/squares.png'))
+      base64   = Base64.encode64(file).delete("\n")
+
+      create(
+        :'chat/message',
+        chat_session: chat_session,
+        content:      "With inline image: <img src='data:image/png;base64,#{base64}' style='width: 100%; max-width: 460px;'>"
+      )
+    end
+
+    context 'when image preview is used' do
+      it 'use image preview' do
+        visit "#customer_chat/session/#{chat_session.id}"
+
+        click '.chat-body .chat-message img'
+
+        modal_ready
+
+        expect(page).to have_css('.js-submit', text: 'Download')
+      end
+    end
+  end
 end