diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee index f8cb229bd..899b28361 100644 --- a/app/assets/javascripts/app/controllers/chat.coffee +++ b/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 diff --git a/app/assets/javascripts/app/controllers/customer_chat/image_view.coffee b/app/assets/javascripts/app/controllers/customer_chat/image_view.coffee new file mode 100644 index 000000000..31d72afe1 --- /dev/null +++ b/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: -> + "
" + + onSubmit: => + downloadLink = document.createElement('a') + downloadLink.href = @image_base64 + downloadLink.target = '_blank' + downloadLink.download = 'chat_message_image' + downloadLink.click() diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 7e258db95..ca83b5cff 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/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; } diff --git a/spec/system/chat_spec.rb b/spec/system/chat_spec.rb index 6cdef49f9..747dd229b 100644 --- a/spec/system/chat_spec.rb +++ b/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: " + ) + 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