DEV: Introduce Chat Notices with publishing method (#22369)

plugins/chat/assets/javascripts/discourse/components/chat-channel.hbs

@@ -21,7 +21,7 @@
     @displayed={{this.includeHeader}}
   />
 
-  <ChatRetentionReminder @channel={{@channel}} />
+  <Chat::Notices @channel={{@channel}} />
 
   <ChatMentionWarnings />
 

plugins/chat/assets/javascripts/discourse/components/chat-notices.hbs

@@ -0,0 +1,17 @@
+<div class="chat-notices">
+  <ChatRetentionReminder @channel={{@channel}} />
+
+  {{#each this.noticesForChannel as |notice|}}
+    <div class="chat-notices__notice">
+      <p class="chat-notices__notice__content">
+        {{notice.textContent}}
+      </p>
+
+      <DButton
+        @icon="times"
+        @class="btn-flat chat-notices__notice__clear"
+        @action={{fn this.clearNotice notice}}
+      />
+    </div>
+  {{/each}}
+</div>

plugins/chat/assets/javascripts/discourse/components/chat-notices.js

@@ -0,0 +1,18 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+
+export default class ChatNotices extends Component {
+  @service("chat-channel-pane-subscriptions-manager") subscriptionsManager;
+
+  get noticesForChannel() {
+    return this.subscriptionsManager.notices.filter(
+      (notice) => notice.channelId === this.args.channel.id
+    );
+  }
+
+  @action
+  clearNotice(notice) {
+    this.subscriptionsManager.clearNotice(notice);
+  }
+}

plugins/chat/assets/javascripts/discourse/models/chat-notice.js

@@ -0,0 +1,15 @@
+import { tracked } from "@glimmer/tracking";
+
+export default class ChatNotice {
+  static create(args = {}) {
+    return new ChatNotice(args);
+  }
+
+  @tracked channelId;
+  @tracked textContent;
+
+  constructor(args = {}) {
+    this.channelId = args.channel_id;
+    this.textContent = args.text_content;
+  }
+}

plugins/chat/assets/javascripts/discourse/services/chat-channel-pane-subscriptions-manager.js

@@ -1,11 +1,16 @@
 import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import { TrackedArray } from "@ember-compat/tracked-built-ins";
 import ChatPaneBaseSubscriptionsManager from "./chat-pane-base-subscriptions-manager";
 import ChatThreadPreview from "../models/chat-thread-preview";
+import ChatNotice from "../models/chat-notice";
 
 export default class ChatChannelPaneSubscriptionsManager extends ChatPaneBaseSubscriptionsManager {
   @service chat;
   @service currentUser;
 
+  @tracked notices = new TrackedArray();
+
   get messageBusChannel() {
     return `/chat/${this.model.id}`;
   }
@@ -18,6 +23,17 @@ export default class ChatChannelPaneSubscriptionsManager extends ChatPaneBaseSub
     return;
   }
 
+  handleNotice(data) {
+    this.notices.push(ChatNotice.create(data));
+  }
+
+  clearNotice(notice) {
+    const index = this.notices.indexOf(notice);
+    if (index > -1) {
+      this.notices.splice(index, 1);
+    }
+  }
+
   handleThreadOriginalMessageUpdate(data) {
     const message = this.messagesManager.findMessage(data.original_message_id);
     if (message) {

plugins/chat/assets/javascripts/discourse/services/chat-pane-base-subscriptions-manager.js

@@ -116,6 +116,9 @@ export default class ChatPaneBaseSubscriptionsManager extends Service {
       case "update_thread_original_message":
         this.handleThreadOriginalMessageUpdate(busData);
         break;
+      case "notice":
+        this.handleNotice(busData);
+        break;
     }
   }
 
@@ -248,6 +251,10 @@ export default class ChatPaneBaseSubscriptionsManager extends Service {
     throw "not implemented";
   }
 
+  handleNotice() {
+    throw "not implemented";
+  }
+
   _afterDeleteMessage() {
     throw "not implemented";
   }

plugins/chat/assets/javascripts/discourse/services/chat-thread-pane-subscriptions-manager.js

@@ -32,6 +32,11 @@ export default class ChatThreadPaneSubscriptionsManager extends ChatPaneBaseSubs
     return;
   }
 
+  // NOTE: We don't yet handle notices inside of threads so do nothing.
+  handleNotice() {
+    return;
+  }
+
   _afterDeleteMessage(targetMsg, data) {
     if (this.model.currentUserMembership?.lastReadMessageId === targetMsg.id) {
       this.model.currentUserMembership.lastReadMessageId =