Add frontend support for emoji reactions.

This commit replaces the placeholder "clipboard" button with a reaction button.
This is done on any message that can't be edited. Also, on messages sent by
the user the actions popover (toggled by the down chevron icon) contains
an option to add a reaction.

When clicked, a popover with a search bar and a list of emojis is displayed.
If the right sidebar is collapsed (the viewport is small), the popover is placed
to the left of the button.
Focus is set to the search bar. Typing in the search bar filters emojis.

Emojis with which the user has reacted to this message are highlighted.
Clicking them sends an API request to remove that reaction.
Clicking on non-highlighted emojis sends an API request to add a reaction.
When the popover loses focus it is closed.

The frontend listens for reaction events. When an add-reaction event is
received, the emoji is displayed at the bottom of the message with a
count initialized to 1. If there was an existing reaction to the message with
the same emoji, the count is incremented.

Old messages fetched from the server contain reactions.
They are displayed (along with title and count) at the bottom
of each message.

When clicking the emoji reaction at the bottom of the message, if the
user has already reacted with that emoji to this message, the reaction
is removed and the count is decremented. Otherwise, a reaction is added
and the count is incremented.

Hovering over the emoji reaction at the bottom of the message displays
a list of users who have reacted with this emoji along with the
emoji name.

Hovering over the emoji reactions at the bottom of the message displays
a button to add a reaction.

Fixes #541.

.eslintrc.json

@@ -78,6 +78,7 @@
         "activity": false,
         "invite": false,
         "colorspace": false,
+        "reactions": false,
         "tutorial": false,
         "templates": false,
         "alert_words": false,

frontend_tests/node_tests/templates.js

@@ -532,6 +532,21 @@ function render(template_name, args) {
     assert($(html).text().trim(), "Message to stream devel");
 }());
 
+(function message_reaction() {
+    var args = {
+        emoji_name: 'smile',
+        message_id: '1'
+    };
+
+    var html = '';
+    html += '<div>';
+    html += render('message_reaction', args);
+    html += '</div>';
+
+    global.write_handlebars_output("message_reaction", html);
+    assert($(html).find(".message_reaction").has(".emoji .emoji-smile"));
+}());
+
 (function new_stream_users() {
     var args = {
         users: [
@@ -576,6 +591,22 @@ function render(template_name, args) {
     assert.equal(button_area.find(".no_propagate_notifications").text().trim(), 'No');
 }());
 
+(function reaction_popover_content() {
+    var args = {
+        search: 'Search',
+        message_id: 1,
+        emojis: global.emoji.emojis_name_to_css_class,
+    };
+
+    var html = '<div style="height: 250px">';
+    html += render('reaction_popover_content', args);
+    html += "</div>";
+    // test to make sure the first emoji is present in the popover
+    var emoji_key = $(html).find(".emoji-100").attr('title');
+    assert.equal(emoji_key, ':100:');
+    global.write_handlebars_output("reaction_popover_content", html);
+}());
+
 (function settings_tab() {
     var page_param_checkbox_options = {
         stream_desktop_notifications_enabled: true,

static/js/click_handlers.js

@@ -83,6 +83,13 @@ $(function () {
         toggle_star(rows.id($(this).closest(".message_row")));
     });
 
+    $("#main_div").on("click", ".message_reaction", function (e) {
+        e.stopPropagation();
+        var emoji_name = $(this).attr('data-emoji-name');
+        var message_id = $(this).parent().attr('data-message-id');
+        reactions.message_reaction_on_click(message_id, emoji_name);
+    });
+
     $("#main_div").on("click", "a.stream", function (e) {
         e.preventDefault();
         var stream = stream_data.get_sub_by_id($(this).attr('data-stream-id'));

static/js/message_list_view.js

@@ -162,6 +162,8 @@ MessageListView.prototype = {
         }
 
         _.each(message_containers, function (message_container) {
+            var message_reactions = reactions.get_message_reactions(message_container.msg);
+            message_container.msg.message_reactions = message_reactions;
             message_container.include_recipient = false;
             message_container.include_footer    = false;
 
@@ -490,7 +492,11 @@ MessageListView.prototype = {
         if (message_actions.rerender_messages.length > 0) {
             _.each(message_actions.rerender_messages, function (message_container) {
                 var old_row = self.get_row(message_container.msg.id);
-                var msg_to_render = _.extend(message_container, {table_name: this.table_name});
+                var msg_reactions = reactions.get_message_reactions(message_container.msg);
+                message_container.msg.message_reactions = msg_reactions;
+                var msg_to_render = _.extend(message_container, {
+                    table_name: this.table_name,
+                });
                 var row = $(templates.render('single_message', msg_to_render));
                 self._post_process_dom_messages(row.get());
                 old_row.replaceWith(row);
@@ -504,7 +510,11 @@ MessageListView.prototype = {
             last_message_row = table.find('.message_row:last').expectOne();
             last_group_row = rows.get_message_recipient_row(last_message_row);
             dom_messages = $(_.map(message_actions.append_messages, function (message_container) {
-                var msg_to_render = _.extend(message_container, {table_name: this.table_name});
+                var msg_reactions = reactions.get_message_reactions(message_container.msg);
+                message_container.msg.message_reactions = msg_reactions;
+                var msg_to_render = _.extend(message_container, {
+                    table_name: this.table_name,
+                });
                 return templates.render('single_message', msg_to_render);
             }).join('')).filter('.message_row');
 
@@ -783,7 +793,11 @@ MessageListView.prototype = {
         this._add_msg_timestring(message_container);
         this._maybe_format_me_message(message_container);
 
-        var msg_to_render = _.extend(message_container, {table_name: this.table_name});
+        var msg_reactions = reactions.get_message_reactions(message_container.msg);
+        message_container.msg.message_reactions = msg_reactions;
+        var msg_to_render = _.extend(message_container, {
+            table_name: this.table_name,
+        });
         var rendered_msg = $(templates.render('single_message', msg_to_render));
         this._post_process_dom_messages(rendered_msg.get());
         row.replaceWith(rendered_msg);

static/js/message_store.js

@@ -133,6 +133,9 @@ function add_message_metadata(message) {
     }
 
     alert_words.process_message(message);
+    if (!message.reactions) {
+        message.reactions = [];
+    }
     stored_messages[message.id] = message;
     return message;
 }

static/js/popovers.js

@@ -4,6 +4,7 @@ var exports = {};
 
 var current_actions_popover_elem;
 var current_message_info_popover_elem;
+var current_message_reactions_popover_elem;
 var emoji_map_is_open = false;
 
 var userlist_placement = "right";
@@ -43,6 +44,78 @@ function show_message_info_popover(element, id) {
     }
 }
 
+exports.toggle_reactions_popover = function (element, id) {
+    var last_popover_elem = current_message_reactions_popover_elem;
+    popovers.hide_all();
+    if (last_popover_elem !== undefined
+        && last_popover_elem.get()[0] === element) {
+        // We want it to be the case that a user can dismiss a popover
+        // by clicking on the same element that caused the popover.
+        return;
+    }
+
+    current_msg_list.select_id(id);
+    var elt = $(element);
+    if (elt.data('popover') === undefined) {
+        var emojis = _.clone(emoji.emojis_name_to_css_class);
+        var emojis_used = reactions.get_emojis_used_by_user_for_message_id(id);
+        var realm_emojis = emoji.realm_emojis;
+        _.each(realm_emojis, function (realm_emoji, realm_emoji_name) {
+            emojis[realm_emoji_name] = {
+                name: realm_emoji_name,
+                is_realm_emoji: true,
+                url: realm_emoji.emoji_url
+            };
+        });
+        _.each(emojis_used, function (emoji_name) {
+            var is_realm_emoji = emojis[emoji_name].is_realm_emoji;
+            var url = emojis[emoji_name].url;
+            emojis[emoji_name] = {
+                name: emoji_name,
+                has_reacted: true,
+                css_class: emoji.emoji_name_to_css_class(emoji_name),
+                is_realm_emoji: is_realm_emoji,
+                url: url
+            };
+        });
+
+        var args = {
+            message_id: id,
+            emojis: emojis,
+        };
+
+        var approx_popover_height = 400;
+        var approx_popover_width = 400;
+        var distance_from_bottom = viewport.height() - elt.offset().top;
+        var distance_from_right = viewport.width() - elt.offset().left;
+        var will_extend_beyond_bottom_of_viewport = distance_from_bottom < approx_popover_height;
+        var will_extend_beyond_top_of_viewport = elt.offset().top < approx_popover_height;
+        var will_extend_beyond_left_of_viewport = elt.offset().left < (approx_popover_width / 2);
+        var will_extend_beyond_right_of_viewport = distance_from_right < (approx_popover_width / 2);
+        var placement = 'bottom';
+        if (will_extend_beyond_bottom_of_viewport && !will_extend_beyond_top_of_viewport) {
+            placement = 'top';
+        }
+        if (will_extend_beyond_right_of_viewport && !will_extend_beyond_left_of_viewport) {
+            placement = 'left';
+        }
+        if (will_extend_beyond_left_of_viewport && !will_extend_beyond_right_of_viewport) {
+            placement = 'right';
+        }
+        elt.prop('title', '');
+        elt.popover({
+            placement: placement,
+            title:     "",
+            content:   templates.render('reaction_popover_content', args),
+            trigger:   "manual"
+        });
+        elt.popover("show");
+        elt.prop('title', 'Add reaction...');
+        $('.reaction-popover-filter').focus();
+        current_message_reactions_popover_elem = elt;
+    }
+};
+
 exports.toggle_actions_popover = function (element, id) {
     var last_popover_elem = current_actions_popover_elem;
     popovers.hide_all();
@@ -85,6 +158,7 @@ exports.toggle_actions_popover = function (element, id) {
             editability_menu_item: editability_menu_item,
             can_mute_topic: can_mute_topic,
             can_unmute_topic: can_unmute_topic,
+            should_display_add_reaction_option: message.sent_by_me,
             conversation_time_uri: narrow.by_conversation_and_time_uri(message),
             narrowed: narrow.active()
         };
@@ -170,6 +244,10 @@ function message_info_popped() {
     return current_message_info_popover_elem !== undefined;
 }
 
+function reaction_popped() {
+    return current_message_reactions_popover_elem !== undefined;
+}
+
 exports.hide_message_info_popover = function () {
     if (message_info_popped()) {
         current_message_info_popover_elem.popover("destroy");
@@ -177,6 +255,14 @@ exports.hide_message_info_popover = function () {
     }
 };
 
+exports.hide_reactions_popover = function () {
+    if (reaction_popped()) {
+        $('.popover').remove();
+        current_message_reactions_popover_elem.popover("destroy");
+        current_message_reactions_popover_elem = undefined;
+    }
+};
+
 exports.hide_userlist_sidebar = function () {
     $(".app-main .column-right").removeClass("expanded");
 };
@@ -280,6 +366,19 @@ exports.register_click_handlers = function () {
         popovers.toggle_actions_popover(this, rows.id(row));
     });
 
+    $("#main_div").on("click", ".reaction_button", function (e) {
+        var row = $(this).closest(".message_row");
+        e.stopPropagation();
+        popovers.toggle_reactions_popover(this, rows.id(row));
+    });
+
+
+    $("body").on("click", ".reaction_button", function (e) {
+        var msgid = $(e.currentTarget).data('msgid');
+        e.stopPropagation();
+        popovers.toggle_reactions_popover(this, msgid);
+    });
+
     $("#main_div").on("click", ".sender_info_hover", function (e) {
         var row = $(this).closest(".message_row");
         e.stopPropagation();
@@ -720,12 +819,14 @@ exports.register_click_handlers = function () {
 exports.any_active = function () {
     // True if any popover (that this module manages) is currently shown.
     return popovers.actions_popped() || user_sidebar_popped() || stream_sidebar_popped() ||
-           topic_sidebar_popped() || message_info_popped() || emoji_map_is_open;
+        topic_sidebar_popped() || message_info_popped() || emoji_map_is_open ||
+        reaction_popped();
 };
 
 exports.hide_all = function () {
     popovers.hide_actions_popover();
     popovers.hide_message_info_popover();
+    popovers.hide_reactions_popover();
     popovers.hide_stream_sidebar_popover();
     popovers.hide_topic_sidebar_popover();
     popovers.hide_user_sidebar_popover();

static/js/reactions.js

@@ -0,0 +1,198 @@
+var reactions = (function () {
+var exports = {};
+
+function send_reaction_ajax(message_id, emoji_name, operation) {
+    if (!emoji.emojis_by_name[emoji_name]) {
+        // Emoji doesn't exist
+        return;
+    }
+    var args = {
+        url: '/json/messages/' + message_id + '/emoji_reactions/' + encodeURIComponent(emoji_name),
+        data: {},
+        success: function () {},
+        error: function (xhr) {
+            var response = channel.xhr_error_message("Error sending reaction", xhr);
+            blueslip.error(response);
+        }
+    };
+    if (operation === 'add') {
+        channel.put(args);
+    } else if (operation === 'remove') {
+        channel.del(args);
+    }
+}
+
+function get_user_list_for_message_reaction(message_id, emoji_name) {
+    var message = message_store.get(message_id);
+    var matching_reactions = message.reactions.filter(function (reaction) {
+        return reaction.emoji_name === emoji_name;
+    });
+    return matching_reactions.map(function (reaction) {
+        return reaction.user.id;
+    });
+}
+
+exports.message_reaction_on_click = function (message_id, emoji_name) {
+    // When a message's reaction is clicked,
+    // if the user has reacted to this message with this emoji
+    // the reaction is removed
+    // otherwise, the reaction is added
+    var user_list = get_user_list_for_message_reaction(message_id, emoji_name);
+    var operation = 'remove';
+    if (user_list.indexOf(page_params.user_id) === -1) {
+        // User hasn't reacted with this emoji to this message
+        operation = 'add';
+    }
+    send_reaction_ajax(message_id, emoji_name, operation);
+};
+
+function reaction_popover_reaction_on_click() {
+    // When an emoji is clicked in the popover,
+    // if the user has reacted to this message with this emoji
+    // the reaction is removed
+    // otherwise, the reaction is added
+    var emoji_name = this.title;
+    var message_id = $(this).parent().attr('data-message-id');
+    var user_list = get_user_list_for_message_reaction(message_id, emoji_name);
+    var operation = 'add';
+    if (user_list.indexOf(page_params.user_id) !== -1) {
+        // User has reacted with this emoji to this message
+        $(this).removeClass('reacted');
+        operation = 'remove';
+    }
+    send_reaction_ajax(message_id, emoji_name, operation);
+    popovers.hide_all();
+}
+
+function filter_emojis() {
+    var search = $(".reaction-popover-filter");
+    var search_term = search.expectOne().val().trim();
+    var reaction_list = $(".reaction-popover-reaction");
+    if (search_term !== '') {
+        reaction_list.filter(function () {
+            return this.title.indexOf(search_term) === -1;
+        }).css("display", "none");
+        reaction_list.filter(function () {
+            return this.title.indexOf(search_term) !== -1;
+        }).css("display", "block");
+    } else {
+        reaction_list.css("display", "block");
+    }
+}
+
+$(document).on('click', '.reaction-popover-reaction', reaction_popover_reaction_on_click);
+$(document).on('input', '.reaction-popover-filter', filter_emojis);
+
+function full_name(user_id) {
+    if (user_id === page_params.user_id) {
+        return 'You (click to remove)';
+    }
+    return people.get_person_from_user_id(user_id).full_name;
+}
+
+function generate_title(emoji_name, user_ids) {
+    var i = user_ids.indexOf(page_params.user_id);
+    if (i !== -1) {
+        // Move current user's id to start of list
+        user_ids.splice(i, 1);
+        user_ids.unshift(page_params.user_id);
+    }
+    var reacted_with_string = ' reacted with :' + emoji_name + ':';
+    var user_names = user_ids.map(full_name);
+    if (user_names.length === 1) {
+        return user_names[0] + reacted_with_string;
+    }
+    return _.initial(user_names).join(', ') + ' and ' + _.last(user_names) + reacted_with_string;
+}
+
+exports.add_reaction = function (event) {
+    event.emoji_name_css_class = emoji.emoji_name_to_css_class(event.emoji_name);
+    event.user.id = event.user.user_id;
+    message_store.get(event.message_id).reactions.push(event);
+    var message_element = $('.message_table').find("[zid='" + event.message_id + "']");
+    var message_reactions_element = message_element.find('.message_reactions');
+    var user_list = get_user_list_for_message_reaction(event.message_id, event.emoji_name);
+    var new_title = generate_title(event.emoji_name, user_list);
+    if (user_list.length === 1) {
+        if (emoji.realm_emojis[event.emoji_name]) {
+            event.is_realm_emoji = true;
+            event.url = emoji.realm_emojis[event.emoji_name].emoji_url;
+        }
+        event.count = 1;
+        event.title = new_title;
+        var reaction_button_element = message_reactions_element.find('.reaction_button');
+        $(templates.render('message_reaction', event)).insertBefore(reaction_button_element);
+    } else {
+        var reaction = message_reactions_element.find("[data-emoji-name='" + event.emoji_name + "']");
+        var count_element = reaction.find('.message_reaction_count');
+        count_element.html(user_list.length);
+        reaction.prop('title', new_title);
+    }
+};
+
+exports.remove_reaction = function (event) {
+    var emoji_name = event.emoji_name;
+    var message_id = event.message_id;
+    var user_id = event.user.user_id;
+    var message = message_store.get(message_id);
+    var i = -1;
+    _.each(message.reactions, function (reaction, index) {
+        if (reaction.emoji_name === emoji_name && reaction.user.id === user_id) {
+            i = index;
+        }
+    });
+    if (i !== -1) {
+        message.reactions.splice(i, 1);
+    }
+    var user_list = get_user_list_for_message_reaction(message_id, emoji_name);
+    var new_title = generate_title(emoji_name, user_list);
+    var message_element = $('.message_table').find("[zid='" + message_id + "']");
+    var message_reactions_element = message_element.find('.message_reactions');
+    var matching_reactions = message_reactions_element.find('[data-emoji-name="' + emoji_name + '"]');
+    var count_element = matching_reactions.find('.message_reaction_count');
+    matching_reactions.prop('title', new_title);
+    count_element.html(user_list.length);
+    if (user_list.length === 0) {
+        matching_reactions.remove();
+    }
+};
+
+exports.get_emojis_used_by_user_for_message_id = function (message_id) {
+    var user_id = page_params.user_id;
+    var message = message_store.get(message_id);
+    var reactions_by_user = message.reactions.filter(function (reaction) {
+        return reaction.user.id === user_id;
+    });
+    return reactions_by_user.map(function (reaction) {
+        return reaction.emoji_name;
+    });
+};
+
+exports.get_message_reactions = function (message) {
+    var message_reactions = new Dict();
+    _.each(message.reactions, function (reaction) {
+        var user_list = message_reactions.setdefault(reaction.emoji_name, []);
+        user_list.push(reaction.user.id);
+    });
+    var reactions = message_reactions.items().map(function (item) {
+        var reaction = {
+            emoji_name: item[0],
+            emoji_name_css_class: emoji.emoji_name_to_css_class(item[0]),
+            count: item[1].length,
+            title: generate_title(item[0], item[1])
+        };
+        if (emoji.realm_emojis[reaction.emoji_name]) {
+            reaction.is_realm_emoji = true;
+            reaction.url = emoji.realm_emojis[reaction.emoji_name].emoji_url;
+        }
+        return reaction;
+    });
+    return reactions;
+};
+
+return exports;
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = reactions;
+}

static/js/server_events.js

@@ -45,6 +45,14 @@ function dispatch_normal_event(event) {
         reload.initiate(reload_options);
         break;
 
+    case 'reaction':
+        if (event.op === 'add') {
+            reactions.add_reaction(event);
+        } else if (event.op === 'remove') {
+            reactions.remove_reaction(event);
+        }
+        break;
+
     case 'realm':
         if (event.op === 'update' && event.property === 'name') {
             page_params.realm_name = event.value;

static/js/ui.js

@@ -124,7 +124,7 @@ function message_hover(message_row) {
         !message.status_message) {
         message_row.find(".edit_content").html('<i class="icon-vector-pencil edit_content_button"></i>');
     } else {
-        message_row.find(".edit_content").html('<i class="icon-vector-file-text-alt edit_content_button" data-msgid="' + id + '"></i>');
+        message_row.find(".edit_content").html('<i class="icon-vector-smile reaction_button" data-msgid="' + id + '"></i>');
     }
     current_message_hover = message_row;
 }

static/styles/reactions.css

@@ -0,0 +1,133 @@
+.message_reactions .reaction_button {
+    border-radius: 0.5em;
+    display: none;
+    margin: 0.2em;
+    padding: 0.2em;
+    padding-left: 0.3em;
+    padding-right: 0.3em;
+    float: left;
+}
+
+.message_reactions i {
+    font-size: 1.3em;
+    float: left;
+    color: #555;
+}
+
+.reaction_button .message_reaction_count {
+    font-size: 1.1em;
+    color: #555;
+}
+
+.message_reactions:hover .reaction_button {
+    display: block;
+    background-color: #fafafa;
+    border: thin solid #bbb;
+    color: #bbb;
+}
+
+.message_reactions .reaction_button:hover {
+    border: thin solid #add8e6;
+    background-color: #eef7fa;
+}
+
+.reaction_button:hover i {
+    color: #0088CC;
+}
+
+.reaction_button:hover .message_reaction_count {
+    color: #0088CC;
+}
+
+.reaction_button:hover {
+    cursor: pointer;
+    opacity: 1.0;
+    color: #0088CC;
+}
+
+.reaction-popover {
+    display: inline-block;
+    width: 20em;
+    margin-right: 0px;
+    margin-left: -14px;
+    margin-top: -9px;
+    margin-bottom: -9px;
+}
+
+.reaction-popover-top {
+    padding: 0.8em;
+    padding-bottom: 0;
+    width: 100%;
+}
+
+.reaction-popover-top .icon-vector-search {
+    position: absolute;
+    right: 2.3em;
+    top: 1.3em;
+    color: #bbb;
+}
+
+.reaction-popover-filter {
+    width: 87%;
+    margin: auto;
+    padding-left: 3em;
+}
+
+.reaction-popover-emoji-map {
+    margin: 0;
+    padding: 0.5em;
+    padding-top: 0;
+    overflow: hidden;
+    overflow-y: scroll;
+    display: inline-block;
+    height: 16.5em;
+    width: 100%;
+}
+
+.reaction-popover-reaction {
+    float: left;
+    margin: 0.1em;
+    padding: 0.3em;
+    cursor: pointer;
+    border: thin solid white;
+    border-radius: 0.5em;
+}
+
+.reaction-popover .reacted {
+    background-color: #eef7fa;
+    border-color: #add8e6;
+}
+
+.message_reactions {
+    margin-left: -0.2em;
+    padding-left: 46px;
+    overflow: auto;
+}
+
+.message_reaction {
+    float: left;
+    margin: 0.2em;
+    padding: 0.4em;
+    padding-left: 0.3em;
+    padding-right: 0.3em;
+    cursor: pointer;
+    background-color: #eef7fa;
+    border: thin solid #add8e6;
+    border-radius: 0.5em;
+}
+
+.message_reaction .emoji {
+    float: left;
+    zoom: 0.80;
+    -moz-transform: scale(0.80);
+    -moz-transform-origin: 0 0;
+}
+
+.message_reaction_count {
+    font-weight: bold;
+    font-size: 0.8em;
+    float: left;
+    color: #0088CC;
+    margin-left: 0.1em;
+    line-height: 1em;
+}

static/templates/actions_popover_content.handlebars

@@ -38,6 +38,15 @@
   </li>
   {{/if}}
 
+  {{#if should_display_add_reaction_option}}
+  <li>
+    <a href="#" class="reaction_button" data-msgid="{{message.id}}">
+      <i class="icon-vector-smile"></i>
+      {{#tr message}}Add emoji reaction{{/tr}}
+    </a>
+  </li>
+  {{/if}}
+
   <li>
     <a href="{{ conversation_time_uri }}" class="popover_narrow_by_conversation_and_time" data-msgid="{{message.id}}">
       <i class="icon-vector-link"></i> {{t "Link to this conversation" }}

static/templates/message_reaction.handlebars

@@ -0,0 +1,8 @@
+<div class="message_reaction" title="{{this.title}}" data-emoji-name="{{this.emoji_name}}">
+  {{#if this.is_realm_emoji}}
+    <img src="{{this.url}}" class="emoji" />
+  {{else}}
+    <div class="emoji emoji-{{this.emoji_name_css_class}}" />
+  {{/if}}
+  <div class="message_reaction_count">{{this.count}}</div>
+</div>

static/templates/message_reactions.handlebars

@@ -0,0 +1,7 @@
+{{#each this/msg/message_reactions}}
+  {{partial "message_reaction"}}
+{{/each}}
+<div class="reaction_button" title="{{t 'Add reaction...' }}">
+  <i class="icon-vector-smile"></i>
+  <div class="message_reaction_count">+</div>
+</div>

static/templates/reaction_popover_content.handlebars

@@ -0,0 +1,18 @@
+{{! Contents of the "reaction emoji map" popup }}
+<div class="reaction-popover">
+  <div class="reaction-popover-top">
+    <i class="icon-vector-search"></i>
+    <input class="reaction-popover-filter" type="text" autofocus placeholder={{t 'Search' }} />
+  </div>
+  <div class="reaction-popover-emoji-map" data-message-id="{{message_id}}">
+    {{#each emojis}}
+      <div class="reaction-popover-reaction {{#if this/has_reacted}} reacted {{/if}}" title={{@key}}>
+        {{#if this/is_realm_emoji}}
+          <img src="{{this/url}}" class="emoji" title= ":{{@key}}:" />
+        {{else}}
+          <div class="emoji emoji-{{#if this/has_reacted}}{{this/css_class}}{{else}}{{this}}{{/if}}" title= ":{{@key}}:" />
+        {{/if}}
+      </div>
+    {{/each}}
+  </div>
+</div>

static/templates/single_message.handlebars

@@ -60,6 +60,7 @@
         </div>
         <div class="message_expander message_length_controller" title="{{t 'See the rest of this message' }}">{{t "[More...]" }}</div>
         <div class="message_condenser message_length_controller" title="{{t 'Make this message take up less space on the screen' }}">{{t "[Condense this message]" }}</div>
+        <div class="message_reactions" data-message-id="{{msg/id}}">{{ partial "message_reactions" }}</div>
       </div>
     </div>
   </div>

zproject/settings.py

@@ -679,6 +679,7 @@ PIPELINE = {
                 'styles/settings.css',
                 'styles/subscriptions.css',
                 'styles/compose.css',
+                'styles/reactions.css',
                 'styles/left-sidebar.css',
                 'styles/overlay.css',
                 'styles/pygments.css',
@@ -698,6 +699,7 @@ PIPELINE = {
                 'styles/settings.css',
                 'styles/subscriptions.css',
                 'styles/compose.css',
+                'styles/reactions.css',
                 'styles/left-sidebar.css',
                 'styles/overlay.css',
                 'styles/pygments.css',
@@ -838,6 +840,7 @@ JS_SPECS = {
             'js/referral.js',
             'js/custom_markdown.js',
             'js/bot_data.js',
+            'js/reactions.js',
             # JS bundled by webpack is also included here if PIPELINE_ENABLED setting is true
         ],
         'output_filename': 'min/app.js'