UX: Update "get a room" composer message (#14104)

app/assets/javascripts/discourse/app/components/composer-messages.js

@@ -86,6 +86,12 @@ export default Component.extend({
         topic: topic,
       });
     },
+
+    switchPM(message) {
+      this.composer.set("action", "privateMessage");
+      this.composer.set("targetRecipients", message.reply_username);
+      this._removeMessage(message);
+    },
   },
 
   // Resets all active messages.

app/assets/javascripts/discourse/app/templates/components/composer-messages.hbs

@@ -1,3 +1,8 @@
 {{#each messages as |message|}}
-  {{composer-message message=message closeMessage=(action "closeMessage") shareModal=(action "shareModal")}}
+  {{composer-message
+    message=message
+    closeMessage=(action "closeMessage")
+    shareModal=(action "shareModal")
+    switchPM=(action "switchPM")
+  }}
 {{/each}}

app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs

@@ -0,0 +1,10 @@
+<a href {{action closeMessage message}} class="close">{{d-icon "times"}}</a>
+
+{{html-safe message.body}}
+
+{{d-button
+  class="btn-primary"
+  label="user.private_message"
+  icon="envelope"
+  action=(action switchPM message)
+}}

app/assets/stylesheets/desktop/compose.scss

@@ -109,7 +109,8 @@
     background-color: var(--tertiary-low);
   }
 
-  &.dominating-topic-message {
+  &.dominating-topic-message,
+  &.get-a-room {
     bottom: unset;
     padding: 2.25em 6em 2.5em 2.25em;
     p {

config/locales/server.en.yml

@@ -526,14 +526,7 @@ en:
 
     dominating_topic: You’ve posted more than %{percent}% of the replies here, is there anyone else you would like to hear from?
 
-    get_a_room: |
-      ### Encourage everyone to get involved in the conversation
-
-      You’ve replied %{count} times to @%{reply_username} in this particular topic!
-
-      A great discussion includes many voices and perspectives. Can you get anybody else involved?
-
-      And don’t forget, if you’d like to continue your conversation with this particular user at length outside of public view, [send them a personal message](%{base_path}/u/%{reply_username}).
+    get_a_room: You’ve replied %{count} times to @%{reply_username}, did you know you could send them a personal message instead?
 
     too_many_replies: |
       ### You have reached the reply limit for this topic

lib/composer_messages_finder.rb

@@ -176,9 +176,10 @@ class ComposerMessagesFinder
 
     {
       id: 'get_a_room',
-      templateName: 'education',
+      templateName: 'get-a-room',
       wait_for_typing: true,
-      extraClass: 'education-message',
+      reply_username: reply_username,
+      extraClass: 'education-message get-a-room',
       body: PrettyText.cook(
         I18n.t(
           'education.get_a_room',

spec/components/composer_messages_finder_spec.rb

@@ -423,7 +423,7 @@ describe ComposerMessagesFinder do
           expect(message).to be_present
           expect(message[:id]).to eq('get_a_room')
           expect(message[:wait_for_typing]).to eq(true)
-          expect(message[:templateName]).to eq('education')
+          expect(message[:templateName]).to eq('get-a-room')
 
           expect(UserHistory.exists_for_user?(user, :notified_about_get_a_room)).to eq(true)
         end