compose: Update placeholder text depending on the narrow.

Change the `compose-textarea` placeholder text depending on the
stream/topic or PM recipients that the message will be sent to.

Resolves zulip#12834.

static/js/compose.js

@@ -1074,6 +1074,21 @@ exports.initialize = function () {
         })
     );
 
+    $("#compose-textarea").focus(function () {
+        var msg_type = compose_state.get_message_type();
+        var stream = $('#stream_message_recipient_stream').val();
+        var topic = $('#stream_message_recipient_topic').val();
+        var pm_recipients = compose_pm_pill.get_emails();
+        var opts = {
+            message_type: msg_type,
+            stream: stream,
+            topic: topic,
+            private_message_recipient: pm_recipients,
+        };
+
+        compose_actions.add_placeholder_text(opts);
+    });
+
     if (page_params.narrow !== undefined) {
         if (page_params.narrow_topic !== undefined) {
             compose_actions.start("stream", {topic: page_params.narrow_topic});

static/js/compose_actions.js

@@ -131,6 +131,7 @@ exports.complete_starting_tasks = function (msg_type, opts) {
     exports.decorate_stream_bar(opts.stream);
     $(document).trigger($.Event('compose_started.zulip', opts));
     resize.resize_bottom_whitespace();
+    exports.add_placeholder_text(opts);
 };
 
 // In an attempt to decrease mixing, make the composebox's
@@ -196,6 +197,68 @@ function same_recipient_as_before(msg_type, opts) {
               opts.private_message_recipient === compose_state.recipient());
 }
 
+exports.add_placeholder_text = function (opts) {
+    var placeholder_text;
+
+    if (opts.message_type === 'private') {
+        // IF PRIVATE
+        if (opts.private_message_recipient) {
+            // RECIPIENTS EXIST
+            var recipient_list = opts.private_message_recipient.split(",");
+
+            if (recipient_list.length > 1) {
+                // GROUP PM
+                var recipient_names = [];
+                var num_users = 0;
+
+                recipient_list.forEach(recipient => {
+                    var user = people.get_by_email(recipient);
+                    recipient_names[num_users] = user.full_name;
+                    num_users += 1;
+                });
+
+                placeholder_text = "Message ";
+
+                recipient_names.forEach(recipient_name => {
+                    num_users = num_users - 1;
+                    if (num_users > 0) {
+                        placeholder_text += recipient_name + ", ";
+                    } else {
+                        placeholder_text += recipient_name;
+                    }
+                });
+            } else {
+                // ONE-ON-ONE PM
+                var user = people.get_by_email(recipient_list[0]);
+                var recipient_name = user.full_name;
+                var status = user_status.get_status_text(user.user_id);
+
+                if (status) {
+                    placeholder_text = "Message " + recipient_name + " (" + status + ")";
+                } else {
+                    placeholder_text = "Message " + recipient_name;
+                }
+            }
+        } else {
+            // NO RECIPIENTS
+            placeholder_text = "Compose your message here";
+        }
+    } else if (opts.message_type === 'stream') {
+        if (opts.topic) {
+            // STREAM AND TOPIC NAMES EXIST
+            placeholder_text = "Message #" + opts.stream + " > " + opts.topic;
+        } else if (opts.stream) {
+            // ONLY STREAM NAME EXISTS
+            placeholder_text = "Message #" + opts.stream;
+        } else {
+            // NEITHER STREAM NAME OR TOPIC NAME EXIST
+            placeholder_text = "Compose your message here";
+        }
+    }
+
+    $('#compose-textarea').attr('placeholder', placeholder_text);
+};
+
 exports.start = function (msg_type, opts) {
     exports.autosize_message_content();