UX: hides original message user in thread participants (#23350)

Usage:

```hbs
<Chat::Thread::Participants
  @thread={{@thread}}
  @includeOriginalMessageUser={{false}}
/>
```

plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs

@@ -41,6 +41,7 @@
       <div class="chat-thread-list-item__metadata">
         <Chat::Thread::Participants
           @thread={{@thread}}
+          @includeOriginalMessageUser={{false}}
           class="chat-thread-list-item__participants"
         />
         <span class="chat-thread-list-item__replies-count">

plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.gjs

@@ -0,0 +1,54 @@
+import Component from "@glimmer/component";
+import ChatUserAvatar from "discourse/plugins/chat/discourse/components/chat/user-avatar";
+import I18n from "I18n";
+
+export default class ChatThreadParticipants extends Component {
+  <template>
+    {{#if this.showParticipants}}
+      <div class="chat-thread-participants" ...attributes>
+        <div class="chat-thread-participants__avatar-group">
+          {{#each this.participantsUsers as |user|}}
+            <ChatUserAvatar
+              @user={{user}}
+              @avatarSize="tiny"
+              @showPresence={{false}}
+            />
+          {{/each}}
+        </div>
+        {{#if @thread.preview.otherParticipantCount}}
+          <div class="chat-thread-participants__other-count">
+            {{this.otherCountLabel}}
+          </div>
+        {{/if}}
+      </div>
+    {{/if}}
+  </template>
+
+  get showParticipants() {
+    if (this.includeOriginalMessageUser) {
+      return this.participantsUsers.length > 1;
+    }
+
+    return this.participantsUsers.length > 0;
+  }
+
+  get includeOriginalMessageUser() {
+    return this.args.includeOriginalMessageUser ?? true;
+  }
+
+  get participantsUsers() {
+    if (this.includeOriginalMessageUser) {
+      return this.args.thread.preview.participantUsers;
+    }
+
+    return this.args.thread.preview.participantUsers.filter((user) => {
+      return user.id !== this.args.thread.originalMessage.user.id;
+    });
+  }
+
+  get otherCountLabel() {
+    return I18n.t("chat.thread.participants_other_count", {
+      count: this.args.thread.preview.otherParticipantCount,
+    });
+  }
+}

plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs

@@ -1,21 +0,0 @@
-{{#if (gt @thread.preview.participantUsers.length 1)}}
-  <div class="chat-thread-participants" ...attributes>
-    <div class="chat-thread-participants__avatar-group">
-      {{#each @thread.preview.participantUsers as |user|}}
-        <Chat::UserAvatar
-          @user={{user}}
-          @avatarSize="tiny"
-          @showPresence={{false}}
-        />
-      {{/each}}
-    </div>
-    {{#if @thread.preview.otherParticipantCount}}
-      <div class="chat-thread-participants__other-count">
-        {{i18n
-          "chat.thread.participants_other_count"
-          count=@thread.preview.otherParticipantCount
-        }}
-      </div>
-    {{/if}}
-  </div>
-{{/if}}

plugins/chat/assets/javascripts/discourse/lib/fabricators.js

@@ -137,6 +137,8 @@ function threadPreviewFabricator(args = {}) {
     last_reply_id: args.last_reply_id || sequence++,
     last_reply_created_at: args.last_reply_created_at || Date.now(),
     last_reply_excerpt: args.last_reply_excerpt || "This is a reply",
+    participant_count: args.participant_count ?? 0,
+    participant_users: args.participant_users ?? [],
   });
 }
 

plugins/chat/test/javascripts/components/chat-thread-participants-test.js

@@ -0,0 +1,59 @@
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+
+module(
+  "Discourse Chat | Component | <Chat::Thread::Participants />",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("no participants", async function (assert) {
+      this.thread = fabricators.thread();
+      await render(hbs`<Chat::Thread::Participants @thread={{this.thread}} />`);
+
+      assert.dom(".chat-thread-participants").doesNotExist();
+    });
+
+    test("includeOriginalMessageUser=true", async function (assert) {
+      const orignalMessageUser = fabricators.user({ username: "bob" });
+      this.thread = fabricators.thread({
+        original_message: fabricators.message({ user: orignalMessageUser }),
+        preview: fabricators.threadPreview({
+          channel: this.channel,
+          participant_users: [
+            orignalMessageUser,
+            fabricators.user({ username: "alice" }),
+          ],
+        }),
+      });
+
+      await render(hbs`<Chat::Thread::Participants @thread={{this.thread}} />`);
+
+      assert.dom('.chat-user-avatar [data-user-card="bob"]').exists();
+      assert.dom('.chat-user-avatar [data-user-card="alice"]').exists();
+    });
+
+    test("includeOriginalMessageUser=false", async function (assert) {
+      const orignalMessageUser = fabricators.user({ username: "bob" });
+      this.thread = fabricators.thread({
+        original_message: fabricators.message({ user: orignalMessageUser }),
+        preview: fabricators.threadPreview({
+          channel: this.channel,
+          participant_users: [
+            orignalMessageUser,
+            fabricators.user({ username: "alice" }),
+          ],
+        }),
+      });
+
+      await render(
+        hbs`<Chat::Thread::Participants @thread={{this.thread}} @includeOriginalMessageUser={{false}} />`
+      );
+
+      assert.dom('.chat-user-avatar [data-user-card="bob"]').doesNotExist();
+      assert.dom('.chat-user-avatar [data-user-card="alice"]').exists();
+    });
+  }
+);