Feature request: Emoji autocomplete

[maximbaz]

I'd like to suggest to implement emoji autocomplete, using the following cheat sheet.

If you ever used Slack, you would probably know how much this is useful. Implement with care, this has to be unobtrusive. For example, on Slack the popup will not appear unless a user enters : and a minimum of two characters after it (so any textual emojis like :) or :D do not cause pop-up to open), and the popup is closed immediately once a user hits Enter to select an emoji to post.

Please note: The emoji button #408 should not be considered as a replacement, they both can coexist nicely. Some people (like me) prefer to search, others prefer to click a button and visually select an emoji.

[maximbaz]

@herrmannplatz @gregor just wondering if you guys are aiming to implement your own control to show emojis, or you would consider integrating third-party libraries as well?

Just a quick search discovered a few options (without considering licensing or requirements/dependencies, but only looking if something like that exists at all):

https://github.com/missive/emoji-mart https://github.com/mervick/emojionearea https://github.com/tommoor/emojione-picker

If going with a third-party library, I would consider only those that could be used for both a button (for #408) and an autocomplete. But before investigating them closer I want to ask if (a) you would consider integrating a third-party library at all (if yes, what are the conditions & requirements), and (b) whether you are not working on this right now (so that I don't interfere :wink:).

[gregor]

To manifest my answer here as well. This is something that is high on our wish list. Generally we do consider third-party libraries as well. But mostly for under the hood stuff. As this is a very user centric and visible part of the UI my guess at this time is that we want to integrate a custom solution. I will talk to design when people are back at the office after the Christmas holiday early next year.

[gregor]

@maximbaz It's been a busy start into the new year. Please pardon my slow response. As previously states this is very high on our wishlist. Especially on the personal ones from the devs involved. We have had a discussion within the team and with design. Our UI is a core assset of the overall user experience. While relying on an exisiting control would be convenient, we will require a custom version unless one of those controls proves to be highly adaptable. We will definitely require the use of standard OS emojis as we do rely on those for visualization in the conversation. We do not want to invest the resources to manage our own emoji set. Overall this seems like the contribution you offered in this area will hard to manage. But maybe we find a way as our priority will be a UI control and autocomplete feature for more advanced users. Hooking that up might be an option moving forward.

[maximbaz]

I've come across a chrome extension, which as one of its features implements a simple emoji selector. It doesn't depend on any library, the entire relevant code is probably under 100 LOC, and yet it provides a very usable emoji selector. The emojis are OS native, do not depend on any library. They are simply listed in a text file as unicode symbols. And the entire thing is MIT licensed!

It looks like this (Linux, thus black-and-white emojis):

I don't think it would be hard to extract the relevant code, and to make initial improvements like making it less obtrusive and activating only after typing 2 characters should also not be that difficult. But do you think this is something that could be merged as a first version? If so, I would be willing to prepare a PR for this.

/cc @gregor, @bennyn, @lipis

[bennycode]

@maximbaz I would like to buy you a beer! Your preview looks great (and it fits Wire's lean design principles). It gives a great impression on what's possible. I will forward your suggestion to our designers tomorrow because a better Emoji support is one of the most wanted features from our users!

Thanks. 👍

[maximbaz]

Cool, thanks 🙂

By the way, it's pretty easy to try in real life. Your designers would probably be interested to see how it looks on Mac and Windows, so here are the instructions (updated):

• Install Surfingkeys extension.
• Load app.wire.com and try it out 🙂

[maximbaz]

To give an update, together with the author of Surfingkeys we have implemented all the improvements that I wanted to see for the emoji popup:

• The suggestion list is now positioned correctly on all websites, including Wire.
• It is unobtrusive and appears only after entering at least two characters after :
• The textual descriptions of emojis are made fully compatible with Emoji Cheat Sheet (so the naming convention is compatible with many apps, like Github or Slack).

The code is already is released in Chrome Web Store, it is a matter of just installing this extension to get emojis in Wire webapp 🎉

This also means that it is much simpler now to integrate the same emoji suggestions directly in Wire (important for Wire Desktop, where extensions cannot be installed) — no more functional adjustments are required, only adaptation and perhaps style changes.

DEMO:

[ffflorian]

@maximbaz Nice work! I implemented an in-app Emoji picker which you can test (still in beta though): https://github.com/wireapp/wire-webapp/tree/emoji-picker

Note: this is a personal sideproject and not offically supported.

[maximbaz]

Cool, thanks for looking into this @ffflorian!

I tested the branch, looks good to me, if you want early feedback, I can suggest one thing: currently in the picker itself I see Apple's emoji in the low-res (on my high-dpi screen they are blurry), ideally I'd love to see native emojis (which are often provided as a vector font, so they will never be blurry). But when I select an emoij, it is pasted in the input box as a native emoji.

To make sure, do you know if this emoji picker can be opened with a keyboard? If it's a mouse-only feature, which can't be opened and filtered with only using a keyboard, we probably should move the discussion to #408.

[ffflorian]

@maximbaz Thanks for testing.

Yes, native emojis would be way better - that will be in the next version I think. For now this is just a small sideproject and nothing official :)

Right now this picker cannot be openend by keyboard, but it would be easy to implement a shortcut. But yes, the main discussion about that should go on in #408.

[maximbaz]

Hey Wire team,

It has been almost a month since I posted the demo, I think I can safely assume that some of you already seen it, and maybe even tried for yourself 😉.

I'm wondering if you consider to make this part of Wire, so that no external extensions are required, and more importantly so that it works in Wire for Desktop.

To my current knowledge, this module fulfills all the mentioned needs:

• MIT license allows the code to be integrated in the app;
• The code is fully functional now and only requires style adaptation to your codebase;
• There is no external dependency, you own the code and are free to change design at any time;
• The emojis are OS native, no need to manage your own emoji set;
• Emoji input mechanism is unobtrusive and very familiar to people who use Github / Slack / etc.

Are there any other requirements, that are not fulfilled by this implementation? Maybe some specific UI improvements? Otherwise would you accept a pull request for this feature?

If the concern is about aligning with #408, since there is no external dependency in the code, I'm sure it will be possible to match the design of these two separate features, once #408 gets implemented.

[bennycode]

Hi @maximbaz, thanks for your followup!

I have shown your autocomplete idea to our design team and I received the following answer from our Head of Design:

Let's do this! — Priidu Zilmer

So there is a green light on the feature. Unfortunately, it isn't scheduled in any sprint because we don't have the internal resources to do it. We are currently still busy making Wire available to developers but if you (or someone else) can provide a PR, we will be more than happy to review (and accept) this.

The prototype of @ffflorian (as highlighted in https://github.com/wireapp/wire-webapp/issues/408) is currently also just a side project which is not being actively developed.

[maximbaz]

Great news, I'll look into integrating this over the next days then! Can't wait to start using emojis in Wire for Desktop 😉

[maximbaz]

Integration is happening in #1038, give it a try and leave your ideas :+1:

[bennycode]

Solved by https://github.com/wireapp/wire-webapp/pull/1038 😊 — Happy emojiing! 🍔 💃 🦄