Screenshots

Version

v4.10.0 CDN

Describe the bug

A customer reports that sending a .txt or .csv file via the send attachment button results in an empty chat bubble. Looking at the generated HTML, the element(s) that should populate the <div class="webchat__bubble__content"> div is missing. The activity with attached file is still sent to the bot.

Steps to reproduce

1. Open Web Chat and/or Emulator
2. Click the send attachment button to send a file
3. Select either a .txt or .csv file and click 'Open'
4. Observe the empty chat bubble

Expected behavior

The chat bubble should show the name and size of the attached .txt or .csv file.

Additional context

Reported via an internal IcM. Provided customer with a temporary workaround for Web Chat, however they are wondering when a fix will be implemented.

---

Edit - Here is the requested workaround provided to the customer:

Essentially, all that is happening here is we are updating the HTML that represents the file being sent.

The "store" first monitors for any dispatched "SEND_FILES" actions from Web Chat and captures the file name and size when they pass thru.
It, next, waits for the message activity generated by Web Chat where an attachment is present and the attachment is either of type "text" or "csv".
When the "store" identifies an appropriate activity, it filters thru the HTML looking for the last chat bubble from the user. This should be the bubble that is missing the file name and size.
It checks if the bubble is actually missing the content and, if so, adds in the missing HTML code.

Here are a couple things to note:

The "setTimeout()" is necessary as, without it, the filtering process occurs before Web Chat actually renders the elements. Some adjustment to the delay period may be necessary, but going much less than 50ms and the rendering could be missed. Going above ~200ms and the users will start to see the HTML being appended.
Appending the HTML has a slight inherent risk because certain Web Chat classes are included. As Web Chat is updated those classes may be subject to changing. It may be better for the customer to add just a little bit more code to capture the actual CSS and then apply it the activity or create some CSS rules to override the classes.

let fileName = {}; let fileSize = 0; const store = window.WebChat.createStore( {}, ({dispatch}) => next => action => { if (action.type === 'WEB_CHAT/SEND_FILES') { fileName = action.payload.files[0].name; fileSize = Math.round(action.payload.files[0].size / 1000); } if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') { const { activity } = action.payload; if (activity.type === 'message') { if (activity?.attachments ) { if ( activity.attachments[ 0 ]?.contentType === 'text/plain' || activity.attachments[ 0 ]?.contentType === 'text/csv' ) { setTimeout( () => { let fromUser = document.querySelectorAll( '.webchat__bubble--from-user' ) fromUser = Object.values(fromUser); let indexOfLastBubble = fromUser.length - 1; let bubble = fromUser[indexOfLastBubble]; let bubbleContent = bubble.querySelector('.webchat__bubble__content'); if (bubbleContent.childElementCount < 1) { bubbleContent.innerHTML = `<div aria-hidden="true" class="webchat__fileContent css-19hx76s css-is9rv4"><div class="css-9ohtah">${fileName} of size ${fileSize} kB</div><div aria-hidden="true" class="webchat__fileContent__badge"><div class="webchat__fileContent__fileName">${fileName}</div><div class="webchat__fileContent__size">${fileSize} kB</div></div></div>`; } }, 50 ); } } } } next(action); } ); 

[Bug]