Export Conversations

[jaiwanth-v]

Current Preview:

Status

• Basic HTML export tool for the loaded timeline
• Add more features to this (like file handling, handling reply events, etc.)
• Extend the implementation to support going back (from the beginning or for a given number of messages)
• Additional format - Plain Test
• Additional format - JSON
• Create a UI to interact with the tool
• Write tests

(a part of gsoc'21)

Closes element-hq/element-web#2630

Signed-off-by: Jaiwanth [email protected]

---

Here's what your changelog entry will look like:

✨ Features

• Export Conversations (#6081). Fixes Feature request: export chat logs element-hq/element-web#2630. Contributed by @jaiwanth-v.

[jaiwanth-v]

(@t3chguy thanks for re-requesting review!).

Just re-tested, and have some small nits which would be good to address, so we don't need to double handle this UX post merge & release:

1. Sanity checking: On a new session the first time I click on 'Export chat' it takes several hundred ms to load the modal. I thought my app was crashing at first. Are we doing something unique here compared to other modal interactions?
2. Since we're deviating from the designs with the explicit 'Download' interaction, please can we update the success modal to:

Title: Export Successful
Body: Your export was successful. Find it in your Downloads folder.

In future we could consider adding micro copy on browser permissions, 'retry' interactions, etc, but I wouldn't see the need to scope creep this now to merge and release.

1. With the export being made from Element, and it applying its styling, prefixing the filename with matrix is misleading. Please can we update the filenames to be prefixed with element instead? Something like this with cleaner hyphen stylisation would be great:

'Element Chat - Export - DD-MM-YYYY at HH-MM-SS'

Separately, I've filed a future request for an enhancement to use the light theme in all HTML exports: vector-im/element-web#19117

This is looking great!

@nadonomy thanks for the review!

1. It is because we're importing the libraries required for the export on click.
2. Actually, that explicit button isn't required for any browser (which is also reflected in the design). Either way, I'll change the success body.
3. Sure, I'll change it to use the $(brand) - Chat Export - $(timestamp) format as suggested above.
4. I'll modify it to use the light theme for all exports.

[SimonBrandner]

I'll modify it to use the light theme for all exports.

Could that be an option rather than something that will always happen?

[jaiwanth-v]

Yes, it could. If it is ok with the design, I'll add that option.

[nadonomy]

I'll modify it to use the light theme for all exports.

Could that be an option rather than something that will always happen?

I did consider this (in element-hq/element-web#19117) but it's non trivial re usability.

It doesn't apply to all export methods. If we expose options contextually, we should avoid the modal resizing unexpectedly. So, we'd be looking at either some kind of multi step modal flow or a user preference. By that point, including it as a preference feels like premature optimisation and an over engineered solution.

In this instance, I'd prefer to be resolute on using the light theme for now, and add options later based on learnings after shipping.

[SimonBrandner]

Ok, makes sense

[nadonomy]

It is because we're importing the libraries required for the export on click.

@jaiwanth-v Aha! It's important the UI always gives immediate feedback where it can. Lots of these small laggy interactions add up to a whole perception of the app being slow.

It's perceptible on my fast machine, I have no formal benchmark on slower machines but I'm assuming worse.

We already have unique latency challenges (federation, encryption) and general performance issues so I'd prefer to not avoiding adding more debt where we can be smarter.

Some ideas:

1. Why don't we show the modal instantly for immediate user feedback, and load the libraries when clicking export? We already handle a loading/spinner state this load could happen in. Confidence in usability: High.

2. We could show a spinner in place on the right hand side of the 'Export chat' row in the right panel for immediate feedback once clicked. Confidence: Medium.

3. We could instantly load the modal with a spinner to load in contents when the library is imported. Confidence: Low. To avoid it feeling glitchy we might need to alpha out the spinner and alpha in content. Risky.

Strong preference for 1, or any other smarter ideas you might have!

(cc @amshakal)

[jaiwanth-v]

Strong preference for 1, or any other smarter ideas you might have!

Sure, I think 1 would be a good solution to this.

[t3chguy]

The recent changes look sane! Would be great if you could merge in develop once more and I can give it another round of testing whilst we wait for the ✅ from @nadonomy

[t3chguy]

So I just tried a HTML export and the styling seems to be missing

There looks to be a rogue undefined at the start of the CSS file

[t3chguy]

I think this is great, it works, going to land it now, will save some availability to fast follow is changes are required.

Good job @jaiwanth-v - great project!

[jaiwanth-v]

Thanks a lot @t3chguy!

[ara4n]

this just closed element-hq/element-web#2630 - our 4th most upvoted issue ever. THANK YOU!!!!!

[kirkawolff]

Since this is a major feature, please include it in the changelog

[zoj613]

Does this feature not support export of pictures uploaded in the chat? The HTML does not contain any pictures.

[t3chguy]

Does this feature not support export of pictures uploaded in the chat? The HTML does not contain any pictures.

Make sure you're on an up to date version. Latest 1.11.10