Revert "DEV: rework the chat-live-pane" (#20510)

This reverts commit 67c0498f64.

plugins/chat/app/controllers/api/chat_channels_memberships_controller.rb

@@ -9,7 +9,7 @@ class Chat::Api::ChatChannelsMembershipsController < Chat::Api::ChatChannelsCont
 
     memberships =
       ChatChannelMembershipsQuery.call(
-        channel: channel_from_params,
+        channel_from_params,
         offset: offset,
         limit: limit,
         username: params[:username],

plugins/chat/app/models/chat_message.rb

@@ -223,7 +223,7 @@ class ChatMessage < ActiveRecord::Base
   end
 
   def url
-    "/chat/c/-/#{self.chat_channel_id}/#{self.id}"
+    "/chat/message/#{self.id}"
   end
 
   private

plugins/chat/app/queries/chat_channel_memberships_query.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class ChatChannelMembershipsQuery
-  def self.call(channel:, limit: 50, offset: 0, username: nil, count_only: false)
+  def self.call(channel, limit: 50, offset: 0, username: nil, count_only: false)
     query =
       UserChatChannelMembership
         .joins(:user)
@@ -42,6 +42,6 @@ class ChatChannelMembershipsQuery
   end
 
   def self.count(channel)
-    call(channel: channel, count_only: true)
+    call(channel, count_only: true)
   end
 end

plugins/chat/app/queries/chat_channel_unreads_query.rb

@@ -1,40 +0,0 @@
-# frozen_string_literal: true
-
-class ChatChannelUnreadsQuery
-  def self.call(channel_id:, user_id:)
-    sql = <<~SQL
-      SELECT (
-      SELECT COUNT(*) AS unread_count
-      FROM chat_messages
-      INNER JOIN chat_channels ON chat_channels.id = chat_messages.chat_channel_id
-      INNER JOIN user_chat_channel_memberships ON user_chat_channel_memberships.chat_channel_id = chat_channels.id
-      WHERE chat_channels.id = :channel_id
-      AND chat_messages.user_id != :user_id
-      AND user_chat_channel_memberships.user_id = :user_id
-      AND chat_messages.id > COALESCE(user_chat_channel_memberships.last_read_message_id, 0)
-      AND chat_messages.deleted_at IS NULL
-    ) AS unread_count,
-    (
-      SELECT COUNT(*) AS mention_count
-      FROM notifications
-      INNER JOIN user_chat_channel_memberships ON user_chat_channel_memberships.chat_channel_id = :channel_id
-      AND user_chat_channel_memberships.user_id = :user_id
-      WHERE NOT read
-      AND notifications.user_id = :user_id
-      AND notifications.notification_type = :notification_type
-      AND (data::json->>'chat_message_id')::bigint > COALESCE(user_chat_channel_memberships.last_read_message_id, 0)
-      AND (data::json->>'chat_channel_id')::bigint = :channel_id
-    ) AS mention_count;
-    SQL
-
-    DB
-      .query(
-        sql,
-        channel_id: channel_id,
-        user_id: user_id,
-        notification_type: Notification.types[:chat_mention],
-      )
-      .first
-      .to_h
-  end
-end

plugins/chat/app/serializers/chat_channel_serializer.rb

@@ -110,7 +110,6 @@ class ChatChannelSerializer < ApplicationSerializer
   def meta
     {
       message_bus_last_ids: {
-        channel_message_bus_last_id: MessageBus.last_id("/chat/#{object.id}"),
         new_messages:
           @opts[:new_messages_message_bus_last_id] ||
             MessageBus.last_id(ChatPublisher.new_messages_message_bus_channel(object.id)),

plugins/chat/app/serializers/chat_message_serializer.rb

@@ -35,23 +35,23 @@ class ChatMessageSerializer < ApplicationSerializer
   end
 
   def reactions
+    reactions_hash = {}
     object
       .reactions
       .group_by(&:emoji)
-      .map do |emoji, reactions|
+      .each do |emoji, reactions|
+        users = reactions[0..5].map(&:user).filter { |user| user.id != scope&.user&.id }[0..4]
+
         next unless Emoji.exists?(emoji)
 
-        users = reactions.take(5).map(&:user)
+        reactions_hash[emoji] = {
-
-        {
-          emoji: emoji,
           count: reactions.count,
           users:
             ActiveModel::ArraySerializer.new(users, each_serializer: BasicUserSerializer).as_json,
           reacted: users_reactions.include?(emoji),
         }
       end
-      .compact
+    reactions_hash
   end
 
   def include_reactions?

plugins/chat/app/serializers/chat_view_serializer.rb

@@ -16,7 +16,6 @@ class ChatViewSerializer < ApplicationSerializer
 
   def meta
     meta_hash = {
-      channel_id: object.chat_channel.id,
       can_flag: scope.can_flag_in_chat_channel?(object.chat_channel),
       channel_status: object.chat_channel.status,
       user_silenced: !scope.can_create_chat_message?,

plugins/chat/app/services/chat_publisher.rb

@@ -12,7 +12,7 @@ module ChatPublisher
         { scope: anonymous_guardian, root: :chat_message },
       ).as_json
     content[:type] = :sent
-    content[:staged_id] = staged_id
+    content[:stagedId] = staged_id
     permissions = permissions(chat_channel)
 
     MessageBus.publish("/chat/#{chat_channel.id}", content.as_json, permissions)
@@ -133,13 +133,9 @@ module ChatPublisher
   end
 
   def self.publish_user_tracking_state(user, chat_channel_id, chat_message_id)
-    data = { chat_channel_id: chat_channel_id, chat_message_id: chat_message_id }.merge(
-      ChatChannelUnreadsQuery.call(channel_id: chat_channel_id, user_id: user.id),
-    )
-
     MessageBus.publish(
       self.user_tracking_state_message_bus_channel(user.id),
-      data.as_json,
+      { chat_channel_id: chat_channel_id, chat_message_id: chat_message_id.to_i }.as_json,
       user_ids: [user.id],
     )
   end

plugins/chat/assets/javascripts/discourse/components/channels-list.js

@@ -1,30 +1,24 @@
 import { bind } from "discourse-common/utils/decorators";
-import Component from "@glimmer/component";
+import Component from "@ember/component";
-import { action } from "@ember/object";
+import { action, computed } from "@ember/object";
 import { schedule } from "@ember/runloop";
 import { inject as service } from "@ember/service";
+import { and, empty } from "@ember/object/computed";
 
 export default class ChannelsList extends Component {
   @service chat;
   @service router;
   @service chatStateManager;
   @service chatChannelsManager;
-  @service site;
+  tagName = "";
-  @service session;
+  inSidebar = false;
-  @service currentUser;
+  toggleSection = null;
-
+  @empty("chatChannelsManager.publicMessageChannels")
-  get showMobileDirectMessageButton() {
+  publicMessageChannelsEmpty;
-    return this.site.mobileView && this.showDirectMessageChannels;
+  @and("site.mobileView", "showDirectMessageChannels")
-  }
+  showMobileDirectMessageButton;
-
-  get inSidebar() {
-    return this.args.inSidebar ?? false;
-  }
-
-  get publicMessageChannelsEmpty() {
-    return this.chatChannelsManager.publicMessageChannels?.length === 0;
-  }
 
+  @computed("canCreateDirectMessageChannel")
   get createDirectMessageChannelLabel() {
     if (!this.canCreateDirectMessageChannel) {
       return "chat.direct_messages.cannot_create";
@@ -33,6 +27,10 @@ export default class ChannelsList extends Component {
     return "chat.direct_messages.new";
   }
 
+  @computed(
+    "canCreateDirectMessageChannel",
+    "chatChannelsManager.directMessageChannels"
+  )
   get showDirectMessageChannels() {
     return (
       this.canCreateDirectMessageChannel ||
@@ -44,12 +42,17 @@ export default class ChannelsList extends Component {
     return this.chat.userCanDirectMessage;
   }
 
+  @computed("inSidebar")
   get publicChannelClasses() {
     return `channels-list-container public-channels ${
       this.inSidebar ? "collapsible-sidebar-section" : ""
     }`;
   }
 
+  @computed(
+    "publicMessageChannelsEmpty",
+    "currentUser.{staff,has_joinable_public_channels}"
+  )
   get displayPublicChannels() {
     if (this.publicMessageChannelsEmpty) {
       return (
@@ -61,6 +64,7 @@ export default class ChannelsList extends Component {
     return true;
   }
 
+  @computed("inSidebar")
   get directMessageChannelClasses() {
     return `channels-list-container direct-message-channels ${
       this.inSidebar ? "collapsible-sidebar-section" : ""
@@ -69,7 +73,7 @@ export default class ChannelsList extends Component {
 
   @action
   toggleChannelSection(section) {
-    this.args.toggleSection(section);
+    this.toggleSection(section);
   }
 
   didRender() {

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

@@ -3,7 +3,7 @@
     {{this.lastMessageFormatedDate}}
   </div>
 
-  {{#if this.unreadIndicator}}
+  {{#if @unreadIndicator}}
     <ChatChannelUnreadIndicator @channel={{@channel}} />
   {{/if}}
 </div>

plugins/chat/assets/javascripts/discourse/components/chat-channel-metadata.js

@@ -1,18 +1,18 @@
 import Component from "@glimmer/component";
-
 export default class ChatChannelMetadata extends Component {
-  get unreadIndicator() {
+  unreadIndicator = false;
-    return this.args.unreadIndicator ?? false;
-  }
 
   get lastMessageFormatedDate() {
-    return moment(this.args.channel.lastMessageSentAt).calendar(null, {
+    return moment(this.args.channel.get("last_message_sent_at")).calendar(
-      sameDay: "LT",
+      null,
-      nextDay: "[Tomorrow]",
+      {
-      nextWeek: "dddd",
+        sameDay: "LT",
-      lastDay: "[Yesterday]",
+        nextDay: "[Tomorrow]",
-      lastWeek: "dddd",
+        nextWeek: "dddd",
-      sameElse: "l",
+        lastDay: "[Yesterday]",
-    });
+        lastWeek: "dddd",
+        sameElse: "l",
+      }
+    );
   }
 }

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

@@ -4,15 +4,15 @@
     (unless this.hasDescription "-no-description")
   }}
 >
-  <ChatChannelTitle @channel={{@channel}} />
+  <ChatChannelTitle @channel={{this.channel}} />
   {{#if this.hasDescription}}
     <p class="chat-channel-preview-card__description">
-      {{@channel.description}}
+      {{this.channel.description}}
     </p>
   {{/if}}
   {{#if this.showJoinButton}}
     <ToggleChannelMembershipButton
-      @channel={{@channel}}
+      @channel={{this.channel}}
       @options={{hash joinClass="btn-primary"}}
     />
   {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-channel-preview-card.js

@@ -1,15 +1,19 @@
-import Component from "@glimmer/component";
+import Component from "@ember/component";
 import { isEmpty } from "@ember/utils";
+import { computed } from "@ember/object";
+import { readOnly } from "@ember/object/computed";
 import { inject as service } from "@ember/service";
 
 export default class ChatChannelPreviewCard extends Component {
   @service chat;
+  tagName = "";
 
-  get showJoinButton() {
+  channel = null;
-    return this.args.channel?.isOpen;
-  }
 
+  @readOnly("channel.isOpen") showJoinButton;
+
+  @computed("channel.description")
   get hasDescription() {
-    return !isEmpty(this.args.channel?.description);
+    return !isEmpty(this.channel.description);
   }
 }

plugins/chat/assets/javascripts/discourse/components/chat-channel-selector-modal-inner.js

@@ -194,7 +194,7 @@ export default Component.extend({
 
   getChannelsWithFilter(filter, opts = { excludeActiveChannel: true }) {
     let sortedChannels = this.chatChannelsManager.channels.sort((a, b) => {
-      return new Date(a.lastMessageSentAt) > new Date(b.lastMessageSentAt)
+      return new Date(a.last_message_sent_at) > new Date(b.last_message_sent_at)
         ? -1
         : 1;
     });

plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs

@@ -1,17 +1,17 @@
-{{#if @buttons.length}}
+{{#if this.buttons.length}}
   <DPopover
     @class="chat-composer-dropdown"
     @options={{hash arrow=null}}
     as |state|
   >
     <FlatButton
-      @disabled={{@isDisabled}}
+      @disabled={{this.isDisabled}}
       @class="chat-composer-dropdown__trigger-btn d-popover-trigger"
       @title="chat.composer.toggle_toolbar"
       @icon={{if state.isExpanded "times" "plus"}}
     />
     <ul class="chat-composer-dropdown__list">
-      {{#each @buttons as |button|}}
+      {{#each this.buttons as |button|}}
         <li class="chat-composer-dropdown__item {{button.id}}">
           <DButton
             @class={{concat "chat-composer-dropdown__action-btn " button.id}}

plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.js

@@ -0,0 +1,7 @@
+import Component from "@ember/component";
+
+export default class ChatComposerDropdown extends Component {
+  tagName = "";
+  buttons = null;
+  isDisabled = false;
+}

plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js

@@ -5,7 +5,6 @@ import { inject as service } from "@ember/service";
 import UppyMediaOptimization from "discourse/lib/uppy-media-optimization-plugin";
 import discourseComputed, { bind } from "discourse-common/utils/decorators";
 import UppyUploadMixin from "discourse/mixins/uppy-upload";
-import { cloneJSON } from "discourse-common/lib/object";
 
 export default Component.extend(UppyUploadMixin, {
   classNames: ["chat-composer-uploads"],
@@ -13,25 +12,16 @@ export default Component.extend(UppyUploadMixin, {
   chatStateManager: service(),
   id: "chat-composer-uploader",
   type: "chat-composer",
-  existingUploads: null,
   uploads: null,
   useMultipartUploadsIfAvailable: true,
 
   init() {
     this._super(...arguments);
     this.setProperties({
+      uploads: [],
       fileInputSelector: `#${this.fileUploadElementId}`,
     });
-  },
+    this.appEvents.on("chat-composer:load-uploads", this, "_loadUploads");
-
-  didReceiveAttrs() {
-    this._super(...arguments);
-
-    this.set(
-      "uploads",
-      this.existingUploads ? cloneJSON(this.existingUploads) : []
-    );
-    this._uppyInstance?.cancelAll();
   },
 
   didInsertElement() {
@@ -42,7 +32,7 @@ export default Component.extend(UppyUploadMixin, {
 
   willDestroyElement() {
     this._super(...arguments);
-
+    this.appEvents.off("chat-composer:load-uploads", this, "_loadUploads");
     this.composerInputEl?.removeEventListener(
       "paste",
       this._pasteEventListener
@@ -91,6 +81,11 @@ export default Component.extend(UppyUploadMixin, {
     };
   },
 
+  _loadUploads(uploads) {
+    this._uppyInstance?.cancelAll();
+    this.set("uploads", uploads);
+  },
+
   _uppyReady() {
     if (this.siteSettings.composer_media_optimization_image_enabled) {
       this._useUploadPlugin(UppyMediaOptimization, {

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

@@ -79,11 +79,7 @@
 {{#if this.canAttachUploads}}
   <ChatComposerUploads
     @fileUploadElementId={{this.fileUploadElementId}}
-    @onUploadChanged={{this.uploadsChanged}}
+    @onUploadChanged={{action "uploadsChanged"}}
-    @existingUploads={{or
-      this.chatChannel.draft.uploads
-      this.editingMessage.uploads
-    }}
   />
 {{/if}}
 

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

@@ -29,10 +29,11 @@ const THROTTLE_MS = 150;
 
 export default Component.extend(TextareaTextManipulation, {
   chatChannel: null,
+  lastChatChannelId: null,
   chat: service(),
   classNames: ["chat-composer-container"],
   classNameBindings: ["emojiPickerVisible:with-emoji-picker"],
-  userSilenced: readOnly("chatChannel.userSilenced"),
+  userSilenced: readOnly("details.user_silenced"),
   chatEmojiReactionStore: service("chat-emoji-reaction-store"),
   chatEmojiPickerManager: service("chat-emoji-picker-manager"),
   chatStateManager: service("chat-state-manager"),
@@ -219,18 +220,18 @@ export default Component.extend(TextareaTextManipulation, {
 
     if (
       !this.editingMessage &&
-      this.chatChannel?.draft &&
+      this.draft &&
       this.chatChannel?.canModifyMessages(this.currentUser)
     ) {
       // uses uploads from draft here...
       this.setProperties({
-        value: this.chatChannel.draft.message,
+        value: this.draft.value,
-        replyToMsg: this.chatChannel.draft.replyToMsg,
+        replyToMsg: this.draft.replyToMsg,
       });
 
       this._captureMentions();
-      this._syncUploads(this.chatChannel.draft.uploads);
+      this._syncUploads(this.draft.uploads);
-      this.setInReplyToMsg(this.chatChannel.draft.replyToMsg);
+      this.setInReplyToMsg(this.draft.replyToMsg);
     }
 
     if (this.editingMessage && !this.loading) {
@@ -243,6 +244,7 @@ export default Component.extend(TextareaTextManipulation, {
       this._focusTextArea({ ensureAtEnd: true, resizeTextarea: false });
     }
 
+    this.set("lastChatChannelId", this.chatChannel.id);
     this.resizeTextarea();
   },
 
@@ -269,6 +271,7 @@ export default Component.extend(TextareaTextManipulation, {
     }
 
     this.set("_uploads", cloneJSON(newUploads));
+    this.appEvents.trigger("chat-composer:load-uploads", this._uploads);
   },
 
   _inProgressUploadsChanged(inProgressUploads) {
@@ -304,9 +307,7 @@ export default Component.extend(TextareaTextManipulation, {
 
   @bind
   _captureMentions() {
-    if (this.value) {
+    this.chatComposerWarningsTracker.trackMentions(this.value);
-      this.chatComposerWarningsTracker.trackMentions(this.value);
-    }
   },
 
   @bind

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

@@ -19,6 +19,9 @@
   />
 
   {{#if this.previewedChannel}}
-    <ChatLivePane @channel={{this.previewedChannel}} @includeHeader={{false}} />
+    <ChatLivePane
+      @chatChannel={{this.previewedChannel}}
+      @includeHeader={{false}}
+    />
   {{/if}}
 </div>

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

@@ -18,7 +18,7 @@
     {{#if this.chat.activeChannel}}
       <ChatLivePane
         @targetMessageId={{readonly @params.messageId}}
-        @channel={{this.chat.activeChannel}}
+        @chatChannel={{this.chat.activeChannel}}
       />
     {{/if}}
   </div>

plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js

@@ -65,10 +65,6 @@ export default class ChatEmojiPicker extends Component {
   }
 
   get flatEmojis() {
-    if (!this.chatEmojiPickerManager.emojis) {
-      return [];
-    }
-
     // eslint-disable-next-line no-unused-vars
     let { favorites, ...rest } = this.chatEmojiPickerManager.emojis;
     return Object.values(rest).flat();

plugins/chat/assets/javascripts/discourse/components/chat-full-page-header.hbs

@@ -1,46 +0,0 @@
-{{#if
-  (and
-    this.chatStateManager.isFullPageActive this.displayed (not @channel.isDraft)
-  )
-}}
-  <div
-    class={{concat-class
-      "chat-full-page-header"
-      (unless @channel.isFollowing "-not-following")
-    }}
-  >
-    <div class="chat-channel-header-details">
-      {{#if this.site.mobileView}}
-        <div class="chat-full-page-header__left-actions">
-          <LinkTo
-            @route="chat"
-            class="chat-full-page-header__back-btn no-text btn-flat"
-          >
-            {{d-icon "chevron-left"}}
-          </LinkTo>
-        </div>
-      {{/if}}
-
-      <LinkTo
-        @route="chat.channel.info"
-        @models={{@channel.routeModels}}
-        class="chat-channel-title-wrapper"
-      >
-        <ChatChannelTitle @channel={{@channel}} />
-      </LinkTo>
-
-      {{#if this.site.desktopView}}
-        <div class="chat-full-page-header__right-actions">
-          <DButton
-            @icon="discourse-compress"
-            @title="chat.close_full_page"
-            class="open-drawer-btn btn-flat no-text"
-            @action={{@onCloseFullScreen}}
-          />
-        </div>
-      {{/if}}
-    </div>
-  </div>
-
-  <ChatChannelStatus @channel={{@channel}} />
-{{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-full-page-header.js

@@ -1,11 +0,0 @@
-import { inject as service } from "@ember/service";
-import Component from "@glimmer/component";
-
-export default class ChatFullPageHeader extends Component {
-  @service site;
-  @service chatStateManager;
-
-  get displayed() {
-    return this.args.displayed ?? true;
-  }
-}

plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs

@@ -1,115 +1,148 @@
-<div
+{{#if (and this.chatStateManager.isFullPageActive this.includeHeader)}}
-  class={{concat-class
-    "chat-live-pane"
-    (if this.loading "loading")
-    (if this.sendingLoading "sending-loading")
-  }}
-  {{did-insert this.setupListeners}}
-  {{will-destroy this.teardownListeners}}
-  {{did-insert this.updateChannel}}
-  {{did-update this.loadMessages @targetMessageId}}
-  {{did-update this.updateChannel @channel.id}}
-  {{did-insert this.addAutoFocusEventListener}}
-  {{will-destroy this.removeAutoFocusEventListener}}
->
-  <ChatFullPageHeader
-    @channel={{@channel}}
-    @onCloseFullScreen={{this.onCloseFullScreen}}
-    @displayed={{this.includeHeader}}
-  />
-
-  <ChatRetentionReminder @channel={{@channel}} />
-
-  <ChatMentionWarnings />
-
-  <div class="chat-message-actions-mobile-anchor"></div>
-
   <div
-    class={{concat-class
+    class="chat-full-page-header
-      "chat-message-emoji-picker-anchor"
+      {{unless this.chatChannel.isFollowing '-not-following'}}"
-      (if
+  >
-        (and
+    <div class="chat-channel-header-details">
-          this.chatEmojiPickerManager.opened
+      {{#if this.site.mobileView}}
-          (eq this.chatEmojiPickerManager.context "chat-message")
+        <div class="chat-full-page-header__left-actions">
-        )
+          <DButton
-        "-opened"
+            @class="chat-full-page-header__back-btn no-text btn-flat"
-      )
+            @icon="chevron-left"
-    }}
+            @action={{this.onBackClick}}
-  ></div>
+          />
-
+        </div>
-  <div class="chat-messages-scroll chat-messages-container">
-    <div class="chat-message-actions-desktop-anchor"></div>
-    <div class="chat-messages-container">
-
-      {{#if this.loadingMorePast}}
-        <ChatSkeleton
-          @onInsert={{this.onDidInsertSkeleton}}
-          @onDestroy={{this.onDestroySkeleton}}
-        />
       {{/if}}
 
-      {{#each @channel.messages key="id" as |message|}}
+      <LinkTo
-        <ChatMessage
+        @route="chat.channel.info"
-          @message={{message}}
+        @models={{this.chatChannel.routeModels}}
-          @canInteractWithChat={{this.canInteractWithChat}}
+        class="chat-channel-title-wrapper"
-          @channel={{@channel}}
+      >
-          @setReplyTo={{this.setReplyTo}}
+        <ChatChannelTitle @channel={{this.chatChannel}} />
-          @replyMessageClicked={{this.replyMessageClicked}}
+      </LinkTo>
-          @editButtonClicked={{this.editButtonClicked}}
-          @selectingMessages={{this.selectingMessages}}
-          @onStartSelectingMessages={{this.onStartSelectingMessages}}
-          @onSelectMessage={{this.onSelectMessage}}
-          @bulkSelectMessages={{this.bulkSelectMessages}}
-          @isHovered={{eq message.id this.hoveredMessageId}}
-          @onHoverMessage={{this.onHoverMessage}}
-          @resendStagedMessage={{this.resendStagedMessage}}
-          @didShowMessage={{this.didShowMessage}}
-          @didHideMessage={{this.didHideMessage}}
-        />
-      {{/each}}
 
-      {{#if (or this.loadingMoreFuture)}}
+      {{#if this.showCloseFullScreenBtn}}
-        <ChatSkeleton @onDestroy={{this.onDestroySkeleton}} />
+        <div class="chat-full-page-header__right-actions">
+          <DButton
+            @icon="discourse-compress"
+            @title="chat.close_full_page"
+            class="open-drawer-btn btn-flat no-text"
+            @action={{action this.onCloseFullScreen}}
+          />
+        </div>
       {{/if}}
     </div>
+  </div>
 
-    {{#if (and this.loadedOnce (not @channel.canLoadMorePast))}}
+  <ChatChannelStatus @channel={{this.chatChannel}} />
-      <div class="all-loaded-message">
+{{/if}}
-        {{i18n "chat.all_loaded"}}
+
-      </div>
+<ChatRetentionReminder @chatChannel={{this.chatChannel}} />
+
+<ChatMentionWarnings />
+
+<div class="chat-message-actions-mobile-anchor"></div>
+<div
+  class={{concat-class
+    "chat-message-emoji-picker-anchor"
+    (if
+      (and
+        this.chatEmojiPickerManager.opened
+        (eq this.chatEmojiPickerManager.context "chat-message")
+      )
+      "-opened"
+    )
+  }}
+>
+</div>
+
+<div class="chat-messages-scroll chat-messages-container">
+  <div class="chat-message-actions-desktop-anchor"></div>
+  <div class="chat-messages-container">
+    {{#if (or this.loading this.loadingMorePast)}}
+      <ChatSkeleton @tagName="" />
+    {{/if}}
+
+    {{#each this.messages as |message|}}
+      <ChatMessage
+        @message={{message}}
+        @canInteractWithChat={{this.canInteractWithChat}}
+        @details={{this.details}}
+        @chatChannel={{this.chatChannel}}
+        @setReplyTo={{action "setReplyTo"}}
+        @replyMessageClicked={{action "replyMessageClicked"}}
+        @editButtonClicked={{action "editButtonClicked"}}
+        @selectingMessages={{this.selectingMessages}}
+        @onStartSelectingMessages={{this.onStartSelectingMessages}}
+        @onSelectMessage={{this.onSelectMessage}}
+        @bulkSelectMessages={{this.bulkSelectMessages}}
+        @fullPage={{this.fullPage}}
+        @afterReactionAdded={{action "reStickScrollIfNeeded"}}
+        @isHovered={{eq message.id this.hoveredMessageId}}
+        @onHoverMessage={{this.onHoverMessage}}
+        @resendStagedMessage={{this.resendStagedMessage}}
+      />
+    {{/each}}
+
+    {{#if this.loadingMoreFuture}}
+      <ChatSkeleton @tagName="" />
     {{/if}}
   </div>
 
-  <ChatScrollToBottomArrow
+  {{#if this.allPastMessagesLoaded}}
-    @scrollToBottom={{this.scrollToBottom}}
+    <div class="all-loaded-message">
-    @hasNewMessages={{this.hasNewMessages}}
+      {{i18n "chat.all_loaded"}}
-    @isAlmostDocked={{this.isAlmostDocked}}
+    </div>
-    @channel={{@channel}}
+  {{/if}}
-  />
+</div>
 
-  {{#if this.selectingMessages}}
+{{#if this.showScrollToBottomBtn}}
-    <ChatSelectionManager
+  <div class="scroll-stick-wrap">
-      @selectedMessageIds={{this.selectedMessageIds}}
+    <a
-      @chatChannel={{@channel}}
+      href
-      @cancelSelecting={{this.cancelSelecting}}
+      title={{i18n "chat.scroll_to_bottom"}}
+      class={{concat-class
+        "btn"
+        "btn-flat"
+        "chat-scroll-to-bottom"
+        (if this.hasNewMessages "unread-messages")
+      }}
+      {{on "click" (action "restickScrolling")}}
+    >
+      {{#if this.hasNewMessages}}
+        {{i18n "chat.scroll_to_new_messages"}}
+      {{/if}}
+      {{d-icon "arrow-down"}}
+    </a>
+  </div>
+{{/if}}
+
+{{#if this.selectingMessages}}
+  <ChatSelectionManager
+    @selectedMessageIds={{this.selectedMessageIds}}
+    @chatChannel={{this.chatChannel}}
+    @canModerate={{this.details.can_moderate}}
+    @cancelSelecting={{action "cancelSelecting"}}
+  />
+{{else}}
+  {{#if (or this.chatChannel.isDraft this.chatChannel.isFollowing)}}
+    <ChatComposer
+      @draft={{this.draft}}
+      @details={{this.details}}
+      @canInteractWithChat={{this.canInteractWithChat}}
+      @sendMessage={{action "sendMessage"}}
+      @editMessage={{action "editMessage"}}
+      @setReplyTo={{action "setReplyTo"}}
+      @loading={{this.sendingLoading}}
+      @editingMessage={{readonly this.editingMessage}}
+      @onCancelEditing={{this.cancelEditing}}
+      @setInReplyToMsg={{this.setInReplyToMsg}}
+      @onEditLastMessageRequested={{this.editLastMessageRequested}}
+      @onValueChange={{action "composerValueChanged"}}
+      @chatChannel={{this.chatChannel}}
     />
   {{else}}
-    {{#if (or @channel.isDraft @channel.isFollowing)}}
+    <ChatChannelPreviewCard @channel={{this.chatChannel}} />
-      <ChatComposer
-        @canInteractWithChat={{this.canInteractWithChat}}
-        @sendMessage={{this.sendMessage}}
-        @editMessage={{this.editMessage}}
-        @setReplyTo={{this.setReplyTo}}
-        @loading={{this.sendingLoading}}
-        @editingMessage={{readonly this.editingMessage}}
-        @onCancelEditing={{this.cancelEditing}}
-        @setInReplyToMsg={{this.setInReplyToMsg}}
-        @onEditLastMessageRequested={{this.editLastMessageRequested}}
-        @onValueChange={{this.composerValueChanged}}
-        @chatChannel={{@channel}}
-      />
-    {{else}}
-      <ChatChannelPreviewCard @channel={{@channel}} />
-    {{/if}}
   {{/if}}
-</div>
+{{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.hbs

@@ -6,11 +6,11 @@
 >
   <div class="chat-message-actions">
     {{#if this.chatStateManager.isFullPageActive}}
-      {{#each @emojiReactions key="emoji" as |reaction|}}
+      {{#each @emojiReactions as |reaction|}}
         <ChatMessageReaction
           @reaction={{reaction}}
           @react={{@messageActions.react}}
-          @showCount={{false}}
+          @class="show"
         />
       {{/each}}
     {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js

@@ -31,7 +31,6 @@ export default class ChatMessageActionsDesktop extends Component {
         ),
         {
           placement: "top-end",
-          strategy: "fixed",
           modifiers: [
             { name: "hide", enabled: true },
             { name: "eventListeners", options: { scroll: false } },

plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.hbs

@@ -53,7 +53,7 @@
             <ChatMessageReaction
               @reaction={{reaction}}
               @react={{@messageActions.react}}
-              @showCount={{false}}
+              @class="show"
             />
           {{/each}}
 

plugins/chat/assets/javascripts/discourse/components/chat-message-avatar.hbs

@@ -1,6 +1,6 @@
 <div class="chat-message-avatar">
-  {{#if @message.chatWebhookEvent.emoji}}
+  {{#if @message.chat_webhook_event.emoji}}
-    <ChatEmojiAvatar @emoji={{@message.chatWebhookEvent.emoji}} />
+    <ChatEmojiAvatar @emoji={{@message.chat_webhook_event.emoji}} />
   {{else}}
     <ChatUserAvatar @user={{@message.user}} @avatarSize="medium" />
   {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-message-avatar.js

@@ -0,0 +1,5 @@
+import Component from "@ember/component";
+
+export default class ChatMessageAvatar extends Component {
+  tagName = "";
+}

plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.hbs

@@ -1,10 +1,10 @@
 <div class="chat-message-collapser">
   {{#if this.hasUploads}}
-    {{html-safe @cooked}}
+    {{html-safe this.cooked}}
 
     <Collapser @header={{this.uploadsHeader}}>
       <div class="chat-uploads">
-        {{#each @uploads as |upload|}}
+        {{#each this.uploads as |upload|}}
           <ChatUpload @upload={{upload}} />
         {{/each}}
       </div>

plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.js

@@ -1,20 +1,28 @@
-import Component from "@glimmer/component";
+import Component from "@ember/component";
+import { computed } from "@ember/object";
 import { htmlSafe } from "@ember/template";
 import { escapeExpression } from "discourse/lib/utilities";
 import domFromString from "discourse-common/lib/dom-from-string";
 import I18n from "I18n";
 
 export default class ChatMessageCollapser extends Component {
+  tagName = "";
+  collapsed = false;
+  uploads = null;
+  cooked = null;
+
+  @computed("uploads")
   get hasUploads() {
-    return hasUploads(this.args.uploads);
+    return hasUploads(this.uploads);
   }
 
+  @computed("uploads")
   get uploadsHeader() {
     let name = "";
-    if (this.args.uploads.length === 1) {
+    if (this.uploads.length === 1) {
-      name = this.args.uploads[0].original_filename;
+      name = this.uploads[0].original_filename;
     } else {
-      name = I18n.t("chat.uploaded_files", { count: this.args.uploads.length });
+      name = I18n.t("chat.uploaded_files", { count: this.uploads.length });
     }
     return htmlSafe(
       `<span class="chat-message-collapser-link-small">${escapeExpression(
@@ -23,10 +31,9 @@ export default class ChatMessageCollapser extends Component {
     );
   }
 
+  @computed("cooked")
   get cookedBodies() {
-    const elements = Array.prototype.slice.call(
+    const elements = Array.prototype.slice.call(domFromString(this.cooked));
-      domFromString(this.args.cooked)
-    );
 
     if (hasYoutube(elements)) {
       return this.youtubeCooked(elements);

plugins/chat/assets/javascripts/discourse/components/chat-message-in-reply-to-indicator.hbs

@@ -1,19 +0,0 @@
-{{#if @message.inReplyTo}}
-  <LinkTo
-    @route={{this.route}}
-    @models={{this.model}}
-    class="chat-reply is-direct-reply"
-  >
-    {{d-icon "share" title="chat.in_reply_to"}}
-
-    {{#if @message.inReplyTo.chatWebhookEvent.emoji}}
-      <ChatEmojiAvatar @emoji={{@message.inReplyTo.chatWebhookEvent.emoji}} />
-    {{else}}
-      <ChatUserAvatar @user={{@message.inReplyTo.user}} />
-    {{/if}}
-
-    <span class="chat-reply__excerpt">
-      {{replace-emoji @message.inReplyTo.excerpt}}
-    </span>
-  </LinkTo>
-{{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-message-in-reply-to-indicator.js

@@ -1,32 +0,0 @@
-import Component from "@glimmer/component";
-import { inject as service } from "@ember/service";
-
-export default class ChatMessageInReplyToIndicator extends Component {
-  @service router;
-
-  get route() {
-    if (this.hasThread) {
-      return "chat.channel.thread";
-    } else {
-      return "chat.channel.near-message";
-    }
-  }
-
-  get model() {
-    if (this.hasThread) {
-      return [this.args.message.threadId];
-    } else {
-      return [
-        ...this.args.message.channel.routeModels,
-        this.args.message.inReplyTo.id,
-      ];
-    }
-  }
-
-  get hasThread() {
-    return (
-      this.args.message?.channel?.get("threading_enabled") &&
-      this.args.message?.threadId
-    );
-  }
-}

plugins/chat/assets/javascripts/discourse/components/chat-message-info.hbs

@@ -3,15 +3,15 @@
   {{did-insert this.trackStatus}}
   {{will-destroy this.stopTrackingStatus}}
 >
-  {{#if @message.chatWebhookEvent}}
+  {{#if @message.chat_webhook_event}}
-    {{#if @message.chatWebhookEvent.username}}
+    {{#if @message.chat_webhook_event.username}}
       <span
         class={{concat-class
           "chat-message-info__username"
           this.usernameClasses
         }}
       >
-        {{@message.chatWebhookEvent.username}}
+        {{@message.chat_webhook_event.username}}
       </span>
     {{/if}}
 
@@ -49,8 +49,8 @@
 
   {{#if this.isFlagged}}
     <span class="chat-message-info__flag">
-      {{#if @message.reviewableId}}
+      {{#if @message.reviewable_id}}
-        <LinkTo @route="review.show" @model={{@message.reviewableId}}>
+        <LinkTo @route="review.show" @model={{@message.reviewable_id}}>
           {{d-icon "flag" title="chat.flagged"}}
         </LinkTo>
       {{else}}

plugins/chat/assets/javascripts/discourse/components/chat-message-info.js

@@ -48,7 +48,10 @@ export default class ChatMessageInfo extends Component {
   }
 
   get isFlagged() {
-    return this.#message?.reviewableId || this.#message?.userFlagStatus === 0;
+    return (
+      this.#message?.get("reviewable_id") ||
+      this.#message?.get("user_flag_status") === 0
+    );
   }
 
   get prioritizeName() {
@@ -63,7 +66,7 @@ export default class ChatMessageInfo extends Component {
   }
 
   get #user() {
-    return this.#message?.user;
+    return this.#message?.get("user");
   }
 
   get #message() {

plugins/chat/assets/javascripts/discourse/components/chat-message-left-gutter.hbs

@@ -1,17 +1,17 @@
 <div class="chat-message-left-gutter">
-  {{#if @message.reviewableId}}
+  {{#if @message.reviewable_id}}
     <LinkTo
       @route="review.show"
-      @model={{@message.reviewableId}}
+      @model={{@message.reviewable_id}}
       class="chat-message-left-gutter__flag"
     >
       {{d-icon "flag" title="chat.flagged"}}
     </LinkTo>
-  {{else if (eq @message.userFlagStatus 0)}}
+  {{else if (eq @message.user_flag_status 0)}}
     <div class="chat-message-left-gutter__flag">
       {{d-icon "flag" title="chat.you_flagged"}}
     </div>
-  {{else if this.site.desktopView}}
+  {{else}}
     <span class="chat-message-left-gutter__date">
       {{format-chat-date @message "tiny"}}
     </span>

plugins/chat/assets/javascripts/discourse/components/chat-message-left-gutter.js

@@ -1,6 +0,0 @@
-import Component from "@glimmer/component";
-import { inject as service } from "@ember/service";
-
-export default class ChatMessageLeftGutter extends Component {
-  @service site;
-}

plugins/chat/assets/javascripts/discourse/components/chat-message-move-to-channel-modal-inner.hbs

@@ -19,7 +19,7 @@
     @class="btn-primary"
     @icon="sign-out-alt"
     @disabled={{this.disableMoveButton}}
-    @action={{this.moveMessages}}
+    @action={{action "moveMessages"}}
     @label="chat.move_to_channel.confirm_move"
     @id="chat-confirm-move-messages-to-channel"
   />

plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.hbs

@@ -1,18 +1,17 @@
-{{#if (and @reaction this.emojiUrl)}}
+{{#if (and this.reaction this.emojiUrl)}}
   <button
+    id={{this.componentId}}
     type="button"
-    {{on "click" this.handleClick}}
+    {{on "click" (action "handleClick")}}
     tabindex="0"
     class={{concat-class
+      this.class
       "chat-message-reaction"
-      (if @reaction.reacted "reacted")
+      (if this.reaction.reacted "reacted")
+      (if this.reaction.count "show")
     }}
-    data-emoji-name={{@reaction.emoji}}
+    data-emoji-name={{this.reaction.emoji}}
-    data-tippy-content={{this.popoverContent}}
     title={{this.emojiString}}
-    {{did-insert this.setupTooltip}}
-    {{will-destroy this.teardownTooltip}}
-    {{did-update this.refreshTooltip this.popoverContent}}
   >
     <img
       loading="lazy"
@@ -23,8 +22,8 @@
       src={{this.emojiUrl}}
     />
 
-    {{#if (and this.showCount @reaction.count)}}
+    {{#if this.reaction.count}}
-      <span class="count">{{@reaction.count}}</span>
+      <span class="count">{{this.reaction.count}}</span>
     {{/if}}
   </button>
 {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.js

@@ -1,73 +1,95 @@
-import Component from "@glimmer/component";
+import { guidFor } from "@ember/object/internals";
-import { action } from "@ember/object";
+import Component from "@ember/component";
+import { action, computed } from "@ember/object";
 import { emojiUnescape, emojiUrlFor } from "discourse/lib/text";
+import setupPopover from "discourse/lib/d-popover";
 import I18n from "I18n";
 import { schedule } from "@ember/runloop";
-import { inject as service } from "@ember/service";
-import setupPopover from "discourse/lib/d-popover";
 
 export default class ChatMessageReaction extends Component {
-  @service currentUser;
+  reaction = null;
+  showUsersList = false;
+  tagName = "";
+  react = null;
+  class = null;
 
-  get showCount() {
+  didReceiveAttrs() {
-    return this.args.showCount ?? true;
+    this._super(...arguments);
-  }
 
-  @action
+    if (this.showUsersList) {
-  setupTooltip(element) {
-    if (this.args.showTooltip) {
       schedule("afterRender", () => {
-        this._tippyInstance?.destroy();
+        this._popover?.destroy();
-        this._tippyInstance = setupPopover(element, {
+        this._popover = this._setupPopover();
-          interactive: false,
-          allowHTML: true,
-          delay: 250,
-        });
       });
     }
   }
 
-  @action
+  willDestroyElement() {
-  teardownTooltip() {
+    this._super(...arguments);
-    this._tippyInstance?.destroy();
+
+    this._popover?.destroy();
   }
 
-  @action
+  @computed
-  refreshTooltip() {
+  get componentId() {
-    this._tippyInstance?.setContent(this.popoverContent);
+    return guidFor(this);
   }
 
+  @computed("reaction.emoji")
   get emojiString() {
-    return `:${this.args.reaction.emoji}:`;
+    return `:${this.reaction.emoji}:`;
   }
 
+  @computed("reaction.emoji")
   get emojiUrl() {
-    return emojiUrlFor(this.args.reaction.emoji);
+    return emojiUrlFor(this.reaction.emoji);
   }
 
   @action
   handleClick() {
-    this.args.react?.(
+    this?.react(this.reaction.emoji, this.reaction.reacted ? "remove" : "add");
-      this.args.reaction.emoji,
-      this.args.reaction.reacted ? "remove" : "add"
-    );
     return false;
   }
 
-  get popoverContent() {
+  _setupPopover() {
-    if (!this.args.reaction.count || !this.args.reaction.users?.length) {
+    const target = document.getElementById(this.componentId);
+
+    if (!target) {
       return;
     }
 
-    return emojiUnescape(
+    const popover = setupPopover(target, {
-      this.args.reaction.reacted
+      interactive: false,
-        ? this.#reactionTextWithSelf
+      allowHTML: true,
-        : this.#reactionText
+      delay: 250,
-    );
+      content: emojiUnescape(this.popoverContent),
+      onClickOutside(instance) {
+        instance.hide();
+      },
+      onTrigger(instance, event) {
+        // ensures we close other reactions popovers when triggering one
+        document
+          .querySelectorAll(".chat-message-reaction")
+          .forEach((chatMessageReaction) => {
+            chatMessageReaction?._tippy?.hide();
+          });
+
+        event.stopPropagation();
+      },
+    });
+
+    return popover?.id ? popover : null;
   }
 
-  get #reactionTextWithSelf() {
+  @computed("reaction")
-    const reactionCount = this.args.reaction.count;
+  get popoverContent() {
+    return this.reaction.reacted
+      ? this._reactionTextWithSelf()
+      : this._reactionText();
+  }
+
+  _reactionTextWithSelf() {
+    const reactionCount = this.reaction.count;
 
     if (reactionCount === 0) {
       return;
@@ -75,55 +97,55 @@ export default class ChatMessageReaction extends Component {
 
     if (reactionCount === 1) {
       return I18n.t("chat.reactions.only_you", {
-        emoji: this.args.reaction.emoji,
+        emoji: this.reaction.emoji,
       });
     }
 
-    const maxUsernames = 5;
+    const maxUsernames = 4;
-    const usernames = this.args.reaction.users
+    const usernames = this.reaction.users
-      .filter((user) => user.id !== this.currentUser?.id)
       .slice(0, maxUsernames)
       .mapBy("username");
 
     if (reactionCount === 2) {
       return I18n.t("chat.reactions.you_and_single_user", {
-        emoji: this.args.reaction.emoji,
+        emoji: this.reaction.emoji,
         username: usernames.pop(),
       });
     }
 
-    const unnamedUserCount = reactionCount - usernames.length;
+    // `-1` because the current user ("you") isn't included in `usernames`
+    const unnamedUserCount = reactionCount - usernames.length - 1;
+
     if (unnamedUserCount > 0) {
       return I18n.t("chat.reactions.you_multiple_users_and_more", {
-        emoji: this.args.reaction.emoji,
+        emoji: this.reaction.emoji,
         commaSeparatedUsernames: this._joinUsernames(usernames),
         count: unnamedUserCount,
       });
     }
 
     return I18n.t("chat.reactions.you_and_multiple_users", {
-      emoji: this.args.reaction.emoji,
+      emoji: this.reaction.emoji,
       username: usernames.pop(),
       commaSeparatedUsernames: this._joinUsernames(usernames),
     });
   }
 
-  get #reactionText() {
+  _reactionText() {
-    const reactionCount = this.args.reaction.count;
+    const reactionCount = this.reaction.count;
 
     if (reactionCount === 0) {
       return;
     }
 
     const maxUsernames = 5;
-    const usernames = this.args.reaction.users
+    const usernames = this.reaction.users
-      .filter((user) => user.id !== this.currentUser?.id)
       .slice(0, maxUsernames)
       .mapBy("username");
 
     if (reactionCount === 1) {
       return I18n.t("chat.reactions.single_user", {
-        emoji: this.args.reaction.emoji,
+        emoji: this.reaction.emoji,
         username: usernames.pop(),
       });
     }
@@ -132,14 +154,14 @@ export default class ChatMessageReaction extends Component {
 
     if (unnamedUserCount > 0) {
       return I18n.t("chat.reactions.multiple_users_and_more", {
-        emoji: this.args.reaction.emoji,
+        emoji: this.reaction.emoji,
         commaSeparatedUsernames: this._joinUsernames(usernames),
         count: unnamedUserCount,
       });
     }
 
     return I18n.t("chat.reactions.multiple_users", {
-      emoji: this.args.reaction.emoji,
+      emoji: this.reaction.emoji,
       username: usernames.pop(),
       commaSeparatedUsernames: this._joinUsernames(usernames),
     });

plugins/chat/assets/javascripts/discourse/components/chat-message-separator-date.hbs

@@ -1,26 +0,0 @@
-{{#if @message.firstMessageOfTheDayAt}}
-  <div
-    class={{concat-class
-      "chat-message-separator-date"
-      (if @message.newest "last-visit")
-    }}
-  >
-    <div
-      class="chat-message-separator__text-container"
-      {{chat/track-message-separator-date}}
-    >
-      <span class="chat-message-separator__text">
-        {{@message.firstMessageOfTheDayAt}}
-
-        {{#if @message.newest}}
-          -
-          {{i18n "chat.last_visit"}}
-        {{/if}}
-      </span>
-    </div>
-  </div>
-
-  <div class="chat-message-separator__line-container">
-    <div class="chat-message-separator__line"></div>
-  </div>
-{{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-message-separator-new.hbs

@@ -1,13 +0,0 @@
-{{#if (and @message.newest (not @message.firstMessageOfTheDayAt))}}
-  <div class="chat-message-separator-new">
-    <div class="chat-message-separator__text-container">
-      <span class="chat-message-separator__text">
-        {{i18n "chat.last_visit"}}
-      </span>
-    </div>
-
-    <div class="chat-message-separator__line-container">
-      <div class="chat-message-separator__line"></div>
-    </div>
-  </div>
-{{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-message-separator.hbs

@@ -0,0 +1,15 @@
+{{#if this.message.newestMessage}}
+  <div class="chat-message-separator new-message">
+    <div class="divider"></div>
+    <span class="text">
+      {{i18n "chat.new_messages"}}
+    </span>
+  </div>
+{{else if this.message.firstMessageOfTheDayAt}}
+  <div class="chat-message-separator first-daily-message">
+    <div class="divider"></div>
+    <span class="text">
+      {{this.message.firstMessageOfTheDayAt}}
+    </span>
+  </div>
+{{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-message-separator.js

@@ -0,0 +1,5 @@
+import Component from "@ember/component";
+
+export default Component.extend({
+  tagName: "",
+});

plugins/chat/assets/javascripts/discourse/components/chat-message-text.hbs

@@ -1,11 +1,11 @@
 <div class="chat-message-text">
   {{#if this.isCollapsible}}
-    <ChatMessageCollapser @cooked={{@cooked}} @uploads={{@uploads}} />
+    <ChatMessageCollapser @cooked={{this.cooked}} @uploads={{this.uploads}} />
   {{else}}
-    {{html-safe @cooked}}
+    {{html-safe this.cooked}}
   {{/if}}
 
-  {{#if this.isEdited}}
+  {{#if this.edited}}
     <span class="chat-message-edited">({{i18n "chat.edited"}})</span>
   {{/if}}
 

plugins/chat/assets/javascripts/discourse/components/chat-message-text.js

@@ -1,12 +1,15 @@
-import Component from "@glimmer/component";
+import Component from "@ember/component";
+import { computed } from "@ember/object";
 import { isCollapsible } from "discourse/plugins/chat/discourse/components/chat-message-collapser";
 
 export default class ChatMessageText extends Component {
-  get isEdited() {
+  tagName = "";
-    return this.args.edited ?? false;
+  cooked = null;
-  }
+  uploads = null;
+  edited = false;
 
+  @computed("cooked", "uploads.[]")
   get isCollapsible() {
-    return isCollapsible(this.args.cooked, this.args.uploads);
+    return isCollapsible(this.cooked, this.uploads);
   }
 }

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

@@ -1,7 +1,6 @@
 {{! template-lint-disable no-invalid-interactive }}
 
-<ChatMessageSeparatorDate @message={{@message}} />
+<ChatMessageSeparator @message={{@message}} />
-<ChatMessageSeparatorNew @message={{@message}} />
 
 {{#if
   (and
@@ -41,22 +40,19 @@
   {{did-insert this.setMessageActionsAnchors}}
   {{did-insert this.decorateCookedMessage}}
   {{did-update this.decorateCookedMessage @message.id}}
-  {{did-update this.decorateCookedMessage @message.version}}
   {{on "touchmove" this.handleTouchMove passive=true}}
   {{on "touchstart" this.handleTouchStart passive=true}}
   {{on "touchend" this.handleTouchEnd passive=true}}
   {{on "mouseenter" (fn @onHoverMessage @message (hash desktopOnly=true))}}
   {{on "mouseleave" (fn @onHoverMessage null (hash desktopOnly=true))}}
+  {{chat/track-message-visibility}}
   class={{concat-class
     "chat-message-container"
+    (if @isHovered "is-hovered")
     (if @selectingMessages "selecting-messages")
   }}
-  data-id={{@message.id}}
+  data-id={{or @message.id @message.stagedId}}
   data-staged-id={{if @message.staged @message.stagedId}}
-  {{chat/track-message
-    (fn @didShowMessage @message)
-    (fn @didHideMessage @message)
-  }}
 >
   {{#if this.show}}
     {{#if @selectingMessages}}
@@ -89,17 +85,35 @@
         class={{concat-class
           "chat-message"
           (if @message.staged "chat-message-staged")
-          (if @message.deletedAt "deleted")
+          (if @message.deleted_at "deleted")
-          (if (and @message.inReplyTo (not this.hideReplyToInfo)) "is-reply")
+          (if @message.in_reply_to "is-reply")
           (if this.hideUserInfo "user-info-hidden")
           (if @message.error "errored")
           (if @message.bookmark "chat-message-bookmarked")
           (if @isHovered "chat-message-selected")
         }}
       >
-        {{#unless this.hideReplyToInfo}}
+        {{#if @message.in_reply_to}}
-          <ChatMessageInReplyToIndicator @message={{@message}} />
+          <div
-        {{/unless}}
+            role="button"
+            onclick={{action this.viewReplyOrThread}}
+            class="chat-reply is-direct-reply"
+          >
+            {{d-icon "share" title="chat.in_reply_to"}}
+
+            {{#if @message.in_reply_to.chat_webhook_event.emoji}}
+              <ChatEmojiAvatar
+                @emoji={{@message.in_reply_to.chat_webhook_event.emoji}}
+              />
+            {{else}}
+              <ChatUserAvatar @user={{@message.in_reply_to.user}} />
+            {{/if}}
+
+            <span class="chat-reply__excerpt">
+              {{replace-emoji @message.in_reply_to.excerpt}}
+            </span>
+          </div>
+        {{/if}}
 
         {{#if this.hideUserInfo}}
           <ChatMessageLeftGutter @message={{@message}} />
@@ -117,7 +131,7 @@
             @uploads={{@message.uploads}}
             @edited={{@message.edited}}
           >
-            {{#if @message.reactions.length}}
+            {{#if this.hasReactions}}
               <div class="chat-message-reaction-list">
                 {{#if this.reactionLabel}}
                   <div class="reaction-users-list">
@@ -125,13 +139,18 @@
                   </div>
                 {{/if}}
 
-                {{#each @message.reactions as |reaction|}}
+                {{#each-in @message.reactions as |emoji reactionAttrs|}}
                   <ChatMessageReaction
-                    @reaction={{reaction}}
+                    @reaction={{hash
+                      emoji=emoji
+                      users=reactionAttrs.users
+                      count=reactionAttrs.count
+                      reacted=reactionAttrs.reacted
+                    }}
                     @react={{this.react}}
-                    @showTooltip={{true}}
+                    @showUsersList={{true}}
                   />
-                {{/each}}
+                {{/each-in}}
 
                 {{#if @canInteractWithChat}}
                   {{#unless this.site.mobileView}}
@@ -170,7 +189,7 @@
 
           {{#if this.mentionWarning}}
             <div class="alert alert-info chat-message-mention-warning">
-              {{#if this.mentionWarning.invitation_sent}}
+              {{#if this.mentionWarning.invitationSent}}
                 {{d-icon "check"}}
                 <span>
                   {{i18n

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

@@ -5,7 +5,8 @@ import Component from "@glimmer/component";
 import I18n from "I18n";
 import getURL from "discourse-common/lib/get-url";
 import optionalService from "discourse/lib/optional-service";
-import { action } from "@ember/object";
+import { bind } from "discourse-common/utils/decorators";
+import EmberObject, { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import { cancel, schedule } from "@ember/runloop";
 import { clipboardCopy } from "discourse/lib/utilities";
@@ -17,7 +18,6 @@ import showModal from "discourse/lib/show-modal";
 import ChatMessageFlag from "discourse/plugins/chat/discourse/lib/chat-message-flag";
 import { tracked } from "@glimmer/tracking";
 import { getOwner } from "discourse-common/lib/get-owner";
-import ChatMessageReaction from "discourse/plugins/chat/discourse/models/chat-message-reaction";
 
 let _chatMessageDecorators = [];
 
@@ -50,24 +50,37 @@ export default class ChatMessage extends Component {
   @optionalService adminTools;
 
   cachedFavoritesReactions = null;
-  reacting = false;
+
+  _hasSubscribedToAppEvents = false;
+  _loadingReactions = [];
 
   constructor() {
     super(...arguments);
 
+    this.args.message.id
+      ? this._subscribeToAppEvents()
+      : this._waitForIdToBePopulated();
+
+    if (this.args.message.bookmark) {
+      this.args.message.set(
+        "bookmark",
+        Bookmark.create(this.args.message.bookmark)
+      );
+    }
+
     this.cachedFavoritesReactions = this.chatEmojiReactionStore.favorites;
   }
 
   get deletedAndCollapsed() {
-    return this.args.message?.deletedAt && this.collapsed;
+    return this.args.message?.get("deleted_at") && this.collapsed;
   }
 
   get hiddenAndCollapsed() {
-    return this.args.message?.hidden && this.collapsed;
+    return this.args.message?.get("hidden") && this.collapsed;
   }
 
   get collapsed() {
-    return !this.args.message?.expanded;
+    return !this.args.message?.get("expanded");
   }
 
   @action
@@ -84,9 +97,32 @@ export default class ChatMessage extends Component {
 
   @action
   teardownChatMessage() {
+    if (this.args.message?.stagedId) {
+      this.appEvents.off(
+        `chat-message-staged-${this.args.message.stagedId}:id-populated`,
+        this,
+        "_subscribeToAppEvents"
+      );
+    }
+
+    this.appEvents.off("chat:refresh-message", this, "_refreshedMessage");
+
+    this.appEvents.off(
+      `chat-message-${this.args.message.id}:reaction`,
+      this,
+      "_handleReactionMessage"
+    );
+
     cancel(this._invitationSentTimer);
   }
 
+  @bind
+  _refreshedMessage(message) {
+    if (message.id === this.args.message.id) {
+      this.decorateCookedMessage();
+    }
+  }
+
   @action
   decorateCookedMessage() {
     schedule("afterRender", () => {
@@ -95,29 +131,45 @@ export default class ChatMessage extends Component {
       }
 
       _chatMessageDecorators.forEach((decorator) => {
-        decorator.call(this, this.messageContainer, this.args.channel);
+        decorator.call(this, this.messageContainer, this.args.chatChannel);
       });
     });
   }
 
   get messageContainer() {
-    const id = this.args.message?.id;
+    const id = this.args.message?.id || this.args.message?.stagedId;
-    if (id) {
+    return (
-      return document.querySelector(`.chat-message-container[data-id='${id}']`);
+      id && document.querySelector(`.chat-message-container[data-id='${id}']`)
+    );
+  }
+
+  _subscribeToAppEvents() {
+    if (!this.args.message.id || this._hasSubscribedToAppEvents) {
+      return;
     }
 
-    const stagedId = this.args.message?.stagedId;
+    this.appEvents.on("chat:refresh-message", this, "_refreshedMessage");
-    if (stagedId) {
+
-      return document.querySelector(
+    this.appEvents.on(
-        `.chat-message-container[data-staged-id='${stagedId}']`
+      `chat-message-${this.args.message.id}:reaction`,
-      );
+      this,
-    }
+      "_handleReactionMessage"
+    );
+    this._hasSubscribedToAppEvents = true;
+  }
+
+  _waitForIdToBePopulated() {
+    this.appEvents.on(
+      `chat-message-staged-${this.args.message.stagedId}:id-populated`,
+      this,
+      "_subscribeToAppEvents"
+    );
   }
 
   get showActions() {
     return (
       this.args.canInteractWithChat &&
-      !this.args.message?.staged &&
+      !this.args.message?.get("staged") &&
       this.args.isHovered
     );
   }
@@ -218,16 +270,17 @@ export default class ChatMessage extends Component {
 
   get hasThread() {
     return (
-      this.args.channel?.get("threading_enabled") && this.args.message?.threadId
+      this.args.chatChannel?.get("threading_enabled") &&
+      this.args.message?.get("thread_id")
     );
   }
 
   get show() {
     return (
-      !this.args.message?.deletedAt ||
+      !this.args.message?.get("deleted_at") ||
-      this.currentUser.id === this.args.message?.user?.id ||
+      this.currentUser.id === this.args.message?.get("user.id") ||
       this.currentUser.staff ||
-      this.args.channel?.canModerate
+      this.args.details?.can_moderate
     );
   }
 
@@ -278,97 +331,83 @@ export default class ChatMessage extends Component {
 
   get hideUserInfo() {
     return (
-      !this.args.message?.chatWebhookEvent &&
+      this.args.message?.get("hideUserInfo") &&
-      !this.args.message?.inReplyTo &&
+      !this.args.message?.get("chat_webhook_event")
-      !this.args.message?.previousMessage?.deletedAt &&
-      Math.abs(
-        new Date(this.args.message?.createdAt) -
-          new Date(this.args.message?.createdAt)
-      ) < 300000 && // If the time between messages is over 5 minutes, break.
-      this.args.message?.user?.id ===
-        this.args.message?.previousMessage?.user?.id
-    );
-  }
-
-  get hideReplyToInfo() {
-    return (
-      this.args.message?.inReplyTo?.id ===
-      this.args.message?.previousMessage?.id
     );
   }
 
   get showEditButton() {
     return (
-      !this.args.message?.deletedAt &&
+      !this.args.message?.get("deleted_at") &&
-      this.currentUser?.id === this.args.message?.user?.id &&
+      this.currentUser?.id === this.args.message?.get("user.id") &&
-      this.args.channel?.canModifyMessages?.(this.currentUser)
+      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
-
   get canFlagMessage() {
     return (
-      this.currentUser?.id !== this.args.message?.user?.id &&
+      this.currentUser?.id !== this.args.message?.get("user.id") &&
-      !this.args.channel?.isDirectMessageChannel &&
+      this.args.message?.get("user_flag_status") === undefined &&
-      this.args.message?.userFlagStatus === undefined &&
+      this.args.details?.can_flag &&
-      this.args.channel?.canFlag &&
+      !this.args.message?.get("chat_webhook_event") &&
-      !this.args.message?.chatWebhookEvent &&
+      !this.args.message?.get("deleted_at")
-      !this.args.message?.deletedAt
     );
   }
 
   get canManageDeletion() {
-    return this.currentUser?.id === this.args.message.user.id
+    return this.currentUser?.id === this.args.message.get("user.id")
-      ? this.args.channel?.canDeleteSelf
+      ? this.args.details?.can_delete_self
-      : this.args.channel?.canDeleteOthers;
+      : this.args.details?.can_delete_others;
   }
 
   get canReply() {
     return (
-      !this.args.message?.deletedAt &&
+      !this.args.message?.get("deleted_at") &&
-      this.args.channel?.canModifyMessages?.(this.currentUser)
+      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get canReact() {
     return (
-      !this.args.message?.deletedAt &&
+      !this.args.message?.get("deleted_at") &&
-      this.args.channel?.canModifyMessages?.(this.currentUser)
+      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get showDeleteButton() {
     return (
       this.canManageDeletion &&
-      !this.args.message?.deletedAt &&
+      !this.args.message?.get("deleted_at") &&
-      this.args.channel?.canModifyMessages?.(this.currentUser)
+      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get showRestoreButton() {
     return (
       this.canManageDeletion &&
-      this.args.message?.deletedAt &&
+      this.args.message?.get("deleted_at") &&
-      this.args.channel?.canModifyMessages?.(this.currentUser)
+      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get showBookmarkButton() {
-    return this.args.channel?.canModifyMessages?.(this.currentUser);
+    return this.args.chatChannel?.canModifyMessages?.(this.currentUser);
   }
 
   get showRebakeButton() {
     return (
       this.currentUser?.staff &&
-      this.args.channel?.canModifyMessages?.(this.currentUser)
+      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get hasReactions() {
-    return Object.values(this.args.message.reactions).some((r) => r.count > 0);
+    return Object.values(this.args.message.get("reactions")).some(
+      (r) => r.count > 0
+    );
   }
 
   get mentionWarning() {
-    return this.args.message.mentionWarning;
+    return this.args.message.get("mentionWarning");
   }
 
   get mentionedCannotSeeText() {
@@ -425,13 +464,13 @@ export default class ChatMessage extends Component {
   inviteMentioned() {
     const userIds = this.mentionWarning.without_membership.mapBy("id");
 
-    ajax(`/chat/${this.args.message.channelId}/invite`, {
+    ajax(`/chat/${this.args.message.chat_channel_id}/invite`, {
       method: "PUT",
       data: { user_ids: userIds, chat_message_id: this.args.message.id },
     }).then(() => {
-      this.args.message.mentionWarning.set("invitationSent", true);
+      this.args.message.set("mentionWarning.invitationSent", true);
       this._invitationSentTimer = discourseLater(() => {
-        this.dismissMentionWarning();
+        this.args.message.set("mentionWarning", null);
       }, 3000);
     });
 
@@ -440,7 +479,7 @@ export default class ChatMessage extends Component {
 
   @action
   dismissMentionWarning() {
-    this.args.message.mentionWarning = null;
+    this.args.message.set("mentionWarning", null);
   }
 
   @action
@@ -478,17 +517,27 @@ export default class ChatMessage extends Component {
     this.react(emoji, REACTIONS.add);
   }
 
+  @bind
+  _handleReactionMessage(busData) {
+    const loadingReactionIndex = this._loadingReactions.indexOf(busData.emoji);
+    if (loadingReactionIndex > -1) {
+      return this._loadingReactions.splice(loadingReactionIndex, 1);
+    }
+
+    this._updateReactionsList(busData.emoji, busData.action, busData.user);
+    this.args.afterReactionAdded();
+  }
+
   get capabilities() {
     return getOwner(this).lookup("capabilities:main");
   }
 
   @action
   react(emoji, reactAction) {
-    if (!this.args.canInteractWithChat) {
+    if (
-      return;
+      !this.args.canInteractWithChat ||
-    }
+      this._loadingReactions.includes(emoji)
-
+    ) {
-    if (this.reacting) {
       return;
     }
 
@@ -500,21 +549,71 @@ export default class ChatMessage extends Component {
       this.args.onHoverMessage(null);
     }
 
+    this._loadingReactions.push(emoji);
+    this._updateReactionsList(emoji, reactAction, this.currentUser);
+
     if (reactAction === REACTIONS.add) {
       this.chatEmojiReactionStore.track(`:${emoji}:`);
     }
 
-    this.reacting = true;
+    return this._publishReaction(emoji, reactAction).then(() => {
+      // creating reaction will create a membership if not present
+      // so we will fully refresh if we were not members of the channel
+      // already
+      if (!this.args.chatChannel.isFollowing || this.args.chatChannel.isDraft) {
+        return this.args.chatChannelsManager
+          .getChannel(this.args.chatChannel.id)
+          .then((reactedChannel) => {
+            this.router.transitionTo("chat.channel", "-", reactedChannel.id);
+          });
+      }
+    });
+  }
 
-    this.args.message.react(
+  _updateReactionsList(emoji, reactAction, user) {
-      emoji,
+    const selfReacted = this.currentUser.id === user.id;
-      reactAction,
+    if (this.args.message.reactions[emoji]) {
-      this.currentUser,
+      if (
-      this.currentUser.id
+        selfReacted &&
-    );
+        reactAction === REACTIONS.add &&
+        this.args.message.reactions[emoji].reacted
+      ) {
+        // User is already has reaction added; do nothing
+        return false;
+      }
 
+      let newCount =
+        reactAction === REACTIONS.add
+          ? this.args.message.reactions[emoji].count + 1
+          : this.args.message.reactions[emoji].count - 1;
+
+      this.args.message.reactions.set(`${emoji}.count`, newCount);
+      if (selfReacted) {
+        this.args.message.reactions.set(
+          `${emoji}.reacted`,
+          reactAction === REACTIONS.add
+        );
+      } else {
+        this.args.message.reactions[emoji].users.pushObject(user);
+      }
+
+      this.args.message.notifyPropertyChange("reactions");
+    } else {
+      if (reactAction === REACTIONS.add) {
+        this.args.message.reactions.set(emoji, {
+          count: 1,
+          reacted: selfReacted,
+          users: selfReacted ? [] : [user],
+        });
+      }
+
+      this.args.message.notifyPropertyChange("reactions");
+    }
+  }
+
+  _publishReaction(emoji, reactAction) {
     return ajax(
-      `/chat/${this.args.message.channelId}/react/${this.args.message.id}`,
+      `/chat/${this.args.message.chat_channel_id}/react/${this.args.message.id}`,
       {
         type: "PUT",
         data: {
@@ -522,19 +621,10 @@ export default class ChatMessage extends Component {
           emoji,
         },
       }
-    )
+    ).catch((errResult) => {
-      .catch((errResult) => {
+      popupAjaxError(errResult);
-        popupAjaxError(errResult);
+      this._updateReactionsList(emoji, REACTIONS.remove, this.currentUser);
-        this.args.message.react(
+    });
-          emoji,
-          REACTIONS.remove,
-          this.currentUser,
-          this.currentUser.id
-        );
-      })
-      .finally(() => {
-        this.reacting = false;
-      });
   }
 
   // TODO(roman): For backwards-compatibility.
@@ -561,6 +651,17 @@ export default class ChatMessage extends Component {
     this.args.setReplyTo(this.args.message.id);
   }
 
+  viewReplyOrThread() {
+    if (this.hasThread) {
+      this.router.transitionTo(
+        "chat.channel.thread",
+        this.args.message.thread_id
+      );
+    } else {
+      this.args.replyMessageClicked(this.args.message.in_reply_to);
+    }
+  }
+
   @action
   edit() {
     this.args.editButtonClicked(this.args.message.id);
@@ -572,11 +673,12 @@ export default class ChatMessage extends Component {
       requirejs.entries["discourse/lib/flag-targets/flag"];
 
     if (targetFlagSupported) {
-      const model = this.args.message;
+      const model = EmberObject.create(this.args.message);
-      model.username = model.user?.username;
+      model.set("username", model.get("user.username"));
-      model.user_id = model.user?.id;
+      model.set("user_id", model.get("user.id"));
       let controller = showModal("flag", { model });
-      controller.set("flagTarget", new ChatMessageFlag());
+
+      controller.setProperties({ flagTarget: new ChatMessageFlag() });
     } else {
       this._legacyFlag();
     }
@@ -584,13 +686,13 @@ export default class ChatMessage extends Component {
 
   @action
   expand() {
-    this.args.message.expanded = true;
+    this.args.message.set("expanded", true);
   }
 
   @action
   restore() {
     return ajax(
-      `/chat/${this.args.message.channelId}/restore/${this.args.message.id}`,
+      `/chat/${this.args.message.chat_channel_id}/restore/${this.args.message.id}`,
       {
         type: "PUT",
       }
@@ -599,7 +701,10 @@ export default class ChatMessage extends Component {
 
   @action
   openThread() {
-    this.router.transitionTo("chat.channel.thread", this.args.message.threadId);
+    this.router.transitionTo(
+      "chat.channel.thread",
+      this.args.message.thread_id
+    );
   }
 
   @action
@@ -614,7 +719,7 @@ export default class ChatMessage extends Component {
       {
         onAfterSave: (savedData) => {
           const bookmark = Bookmark.create(savedData);
-          this.args.message.bookmark = bookmark;
+          this.args.message.set("bookmark", bookmark);
           this.appEvents.trigger(
             "bookmarks:changed",
             savedData,
@@ -622,7 +727,7 @@ export default class ChatMessage extends Component {
           );
         },
         onAfterDelete: () => {
-          this.args.message.bookmark = null;
+          this.args.message.set("bookmark", null);
         },
       }
     );
@@ -631,7 +736,7 @@ export default class ChatMessage extends Component {
   @action
   rebakeMessage() {
     return ajax(
-      `/chat/${this.args.message.channelId}/${this.args.message.id}/rebake`,
+      `/chat/${this.args.message.chat_channel_id}/${this.args.message.id}/rebake`,
       {
         type: "PUT",
       }
@@ -641,7 +746,7 @@ export default class ChatMessage extends Component {
   @action
   deleteMessage() {
     return ajax(
-      `/chat/${this.args.message.channelId}/${this.args.message.id}`,
+      `/chat/${this.args.message.chat_channel_id}/${this.args.message.id}`,
       {
         type: "DELETE",
       }
@@ -650,7 +755,7 @@ export default class ChatMessage extends Component {
 
   @action
   selectMessage() {
-    this.args.message.selected = true;
+    this.args.message.set("selected", true);
     this.args.onStartSelectingMessages(this.args.message);
   }
 
@@ -675,7 +780,7 @@ export default class ChatMessage extends Component {
 
     const { protocol, host } = window.location;
     let url = getURL(
-      `/chat/c/-/${this.args.message.channelId}/${this.args.message.id}`
+      `/chat/c/-/${this.args.message.chat_channel_id}/${this.args.message.id}`
     );
     url = url.indexOf("/") === 0 ? protocol + "//" + host + url : url;
     clipboardCopy(url);
@@ -688,22 +793,25 @@ export default class ChatMessage extends Component {
   }
 
   get emojiReactions() {
-    let favorites = this.cachedFavoritesReactions;
+    const favorites = this.cachedFavoritesReactions;
 
     // may be a {} if no defaults defined in some production builds
     if (!favorites || !favorites.slice) {
       return [];
     }
 
+    const userReactions = Object.keys(this.args.message.reactions || {}).filter(
+      (key) => {
+        return this.args.message.reactions[key].reacted;
+      }
+    );
+
     return favorites.slice(0, 3).map((emoji) => {
-      return (
+      if (userReactions.includes(emoji)) {
-        this.args.message.reactions.find(
+        return { emoji, reacted: true };
-          (reaction) => reaction.emoji === emoji
+      } else {
-        ) ||
+        return { emoji, reacted: false };
-        ChatMessageReaction.create({
+      }
-          emoji,
-        })
-      );
     });
   }
 }

plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.hbs

@@ -1,6 +1,6 @@
 {{#if this.show}}
   <div class="chat-retention-reminder">
-    <ChatRetentionReminderText @channel={{@channel}} />
+    <ChatRetentionReminderText @channel={{this.chatChannel}} />
     <DButton
       @class="btn-flat dismiss-btn"
       @action={{this.dismiss}}

plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.js

@@ -1,34 +1,39 @@
-import Component from "@glimmer/component";
+import Component from "@ember/component";
+import discourseComputed from "discourse-common/utils/decorators";
 import { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { inject as service } from "@ember/service";
 
-export default class ChatRetentionReminder extends Component {
+export default Component.extend({
-  @service currentUser;
+  tagName: "",
+  loading: false,
 
-  get show() {
+  @discourseComputed(
+    "chatChannel.chatable_type",
+    "currentUser.{needs_dm_retention_reminder,needs_channel_retention_reminder}"
+  )
+  show() {
     return (
-      !this.args.channel?.isDraft &&
+      !this.chatChannel.isDraft &&
-      ((this.args.channel?.isDirectMessageChannel &&
+      ((this.chatChannel.isDirectMessageChannel &&
-        this.currentUser?.needs_dm_retention_reminder) ||
+        this.currentUser.needs_dm_retention_reminder) ||
-        (this.args.channel?.isCategoryChannel &&
+        (this.chatChannel.isCategoryChannel &&
-          this.currentUser?.needs_channel_retention_reminder))
+          this.currentUser.needs_channel_retention_reminder))
     );
-  }
+  },
 
   @action
   dismiss() {
     return ajax("/chat/dismiss-retention-reminder", {
       method: "POST",
-      data: { chatable_type: this.args.channel.chatableType },
+      data: { chatable_type: this.chatChannel.chatable_type },
     })
       .then(() => {
-        const field = this.args.channel.isDirectMessageChannel
+        const field = this.chatChannel.isDirectMessageChannel
           ? "needs_dm_retention_reminder"
           : "needs_channel_retention_reminder";
         this.currentUser.set(field, false);
       })
       .catch(popupAjaxError);
-  }
+  },
-}
+});

plugins/chat/assets/javascripts/discourse/components/chat-scroll-to-bottom-arrow.hbs

@@ -1,23 +0,0 @@
-<div class="scroll-stick-wrap">
-  <DButton
-    class={{concat-class
-      "btn-flat"
-      "chat-scroll-to-bottom"
-      (if
-        (or (not @isAlmostDocked) @hasNewMessages @channel.canLoadMoreFuture)
-        "visible"
-      )
-    }}
-    @action={{@scrollToBottom}}
-  >
-    {{#if @hasNewMessages}}
-      <span class="chat-scroll-to-bottom__text">
-        {{i18n "chat.scroll_to_new_messages"}}
-      </span>
-    {{/if}}
-
-    <span class="chat-scroll-to-bottom__arrow">
-      {{d-icon "arrow-down"}}
-    </span>
-  </DButton>
-</div>

plugins/chat/assets/javascripts/discourse/components/chat-selection-manager.js

@@ -19,17 +19,16 @@ export default class AdminCustomizeColorsShowController extends Component {
   chatCopySuccess = false;
   showChatCopySuccess = false;
   cancelSelecting = null;
+  canModerate = false;
 
   @computed("selectedMessageIds.length")
   get anyMessagesSelected() {
     return this.selectedMessageIds.length > 0;
   }
 
-  @computed("chatChannel.isDirectMessageChannel", "chatChannel.canModerate")
+  @computed("chatChannel.isDirectMessageChannel", "canModerate")
   get showMoveMessageButton() {
-    return (
+    return !this.chatChannel.isDirectMessageChannel && this.canModerate;
-      !this.chatChannel.isDirectMessageChannel && this.chatChannel.canModerate
-    );
   }
 
   @bind

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

@@ -1,31 +1,13 @@
-<div
+<div class="chat-skeleton -animation">
-  class="chat-skeleton -animation"
+  {{#each this.placeholders as |rows|}}
-  {{did-insert @onInsert}}
-  {{will-destroy @onDestroy}}
->
-  {{#each this.placeholders as |placeholder|}}
     <div class="chat-skeleton__body">
       <div class="chat-skeleton__message">
         <div class="chat-skeleton__message-avatar"></div>
         <div class="chat-skeleton__message-poster"></div>
         <div class="chat-skeleton__message-content">
-          {{#if placeholder.image}}
+          {{#each rows as |row|}}
-            <div class="chat-skeleton__message-img"></div>
+            <div class="chat-skeleton__message-msg" style={{row}}></div>
-          {{/if}}
+          {{/each}}
-
-          <div class="chat-skeleton__message-text">
-            {{#each placeholder.rows as |row|}}
-              <div class="chat-skeleton__message-msg" style={{row}}></div>
-            {{/each}}
-          </div>
-
-          {{#if placeholder.reactions}}
-            <div class="chat-skeleton__message-reactions">
-              {{#each placeholder.reactions}}
-                <div class="chat-skeleton__message-reaction"></div>
-              {{/each}}
-            </div>
-          {{/if}}
         </div>
       </div>
     </div>

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

@@ -4,13 +4,9 @@ import { htmlSafe } from "@ember/template";
 export default class ChatSkeleton extends Component {
   get placeholders() {
     return Array.from({ length: 15 }, () => {
-      return {
+      return Array.from({ length: this.#randomIntFromInterval(1, 5) }, () => {
-        image: this.#randomIntFromInterval(1, 10) === 5,
+        return htmlSafe(`width: ${this.#randomIntFromInterval(20, 95)}%`);
-        rows: Array.from({ length: this.#randomIntFromInterval(1, 5) }, () => {
+      });
-          return htmlSafe(`width: ${this.#randomIntFromInterval(20, 95)}%`);
-        }),
-        reactions: Array.from({ length: this.#randomIntFromInterval(0, 3) }),
-      };
     });
   }
 

plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs

@@ -1,6 +1,7 @@
 {{#if this.chat.activeChannel}}
   <ChatLivePane
-    @channel={{this.chat.activeChannel}}
+    @chatChannel={{this.chat.activeChannel}}
+    @onBackClick={{action "navigateToIndex"}}
     @targetMessageId={{readonly @targetMessageId}}
   />
 {{/if}}

plugins/chat/assets/javascripts/discourse/components/full-page-chat.js

@@ -1,6 +1,79 @@
-import Component from "@glimmer/component";
+import Component from "@ember/component";
+import { bind } from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 
-export default class FullPageChat extends Component {
+export default Component.extend({
-  @service chat;
+  tagName: "",
-}
+  router: service(),
+  chat: service(),
+
+  init() {
+    this._super(...arguments);
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    this._scrollSidebarToBottom();
+    document.addEventListener("keydown", this._autoFocusChatComposer);
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+
+    document.removeEventListener("keydown", this._autoFocusChatComposer);
+  },
+
+  @bind
+  _autoFocusChatComposer(event) {
+    if (
+      !event.key ||
+      // Handles things like Enter, Tab, Shift
+      event.key.length > 1 ||
+      // Don't need to focus if the user is beginning a shortcut.
+      event.metaKey ||
+      event.ctrlKey ||
+      // Space's key comes through as ' ' so it's not covered by event.key
+      event.code === "Space" ||
+      // ? is used for the keyboard shortcut modal
+      event.key === "?"
+    ) {
+      return;
+    }
+
+    if (
+      !event.target ||
+      /^(INPUT|TEXTAREA|SELECT)$/.test(event.target.tagName)
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const composer = document.querySelector(".chat-composer-input");
+    if (composer && !this.chat.activeChannel.isDraft) {
+      this.appEvents.trigger("chat:insert-text", event.key);
+      composer.focus();
+    }
+  },
+
+  _scrollSidebarToBottom() {
+    if (!this.teamsSidebarOn) {
+      return;
+    }
+
+    const sidebarScroll = document.querySelector(
+      ".sidebar-container .scroll-wrapper"
+    );
+    if (sidebarScroll) {
+      sidebarScroll.scrollTop = sidebarScroll.scrollHeight;
+    }
+  },
+
+  @action
+  navigateToIndex() {
+    this.router.transitionTo("chat.index");
+  },
+});

plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js

@@ -1,11 +1,10 @@
 import Controller from "@ember/controller";
 import { inject as service } from "@ember/service";
-import { tracked } from "@glimmer/tracking";
 
 export default class ChatChannelController extends Controller {
   @service chat;
 
-  @tracked targetMessageId = null;
+  targetMessageId = null;
 
   // Backwards-compatibility
   queryParams = ["messageId"];

plugins/chat/assets/javascripts/discourse/controllers/create-channel.js

@@ -36,7 +36,6 @@ export default class CreateChannelController extends Controller.extend(
   categoryPermissionsHint = null;
   autoJoinUsers = null;
   autoJoinWarning = "";
-  loadingPermissionHint = false;
 
   @notEmpty("category") categorySelected;
   @gt("siteSettings.max_chat_auto_joined_users", 0) autoJoinAvailable;
@@ -154,8 +153,6 @@ export default class CreateChannelController extends Controller.extend(
     if (category) {
       const fullSlug = this._buildCategorySlug(category);
 
-      this.set("loadingPermissionHint", true);
-
       return this.chatApi
         .categoryPermissions(category.id)
         .then((catPermissions) => {
@@ -197,9 +194,6 @@ export default class CreateChannelController extends Controller.extend(
           }
 
           this.set("categoryPermissionsHint", htmlSafe(hint));
-        })
-        .finally(() => {
-          this.set("loadingPermissionHint", false);
         });
     } else {
       this.set("categoryPermissionsHint", DEFAULT_HINT);

plugins/chat/assets/javascripts/discourse/helpers/format-chat-date.js

@@ -7,8 +7,8 @@ import User from "discourse/models/user";
 registerUnbound("format-chat-date", function (message, mode) {
   const currentUser = User.current();
   const tz = currentUser ? currentUser.user_option.timezone : moment.tz.guess();
-  const date = moment(new Date(message.createdAt), tz);
+  const date = moment(new Date(message.created_at), tz);
-  const url = getURL(`/chat/c/-/${message.channelId}/${message.id}`);
+  const url = getURL(`/chat/c/-/${message.chat_channel_id}/${message.id}`);
   const title = date.format(I18n.t("dates.long_with_year"));
 
   const display =

plugins/chat/assets/javascripts/discourse/initializers/chat-cook-function.js

@@ -1,32 +0,0 @@
-import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
-import { generateCookFunction } from "discourse/lib/text";
-import simpleCategoryHashMentionTransform from "discourse/plugins/chat/discourse/lib/simple-category-hash-mention-transform";
-
-export default {
-  name: "chat-cook-function",
-
-  before: "chat-setup",
-
-  initialize(container) {
-    const site = container.lookup("service:site");
-
-    const markdownOptions = {
-      featuresOverride:
-        site.markdown_additional_options?.chat?.limited_pretty_text_features,
-      markdownItRules:
-        site.markdown_additional_options?.chat
-          ?.limited_pretty_text_markdown_rules,
-      hashtagTypesInPriorityOrder: site.hashtag_configurations["chat-composer"],
-      hashtagIcons: site.hashtag_icons,
-    };
-
-    generateCookFunction(markdownOptions).then((cookFunction) => {
-      ChatMessage.cookFunction = (raw) => {
-        return simpleCategoryHashMentionTransform(
-          cookFunction(raw),
-          site.categories
-        );
-      };
-    });
-  },
-};

plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js

@@ -10,7 +10,6 @@ const MIN_REFRESH_DURATION_MS = 180000; // 3 minutes
 
 export default {
   name: "chat-setup",
-
   initialize(container) {
     this.chatService = container.lookup("service:chat");
     this.siteSettings = container.lookup("service:site-settings");
@@ -20,7 +19,6 @@ export default {
     if (!this.chatService.userCanChat) {
       return;
     }
-
     withPluginApi("0.12.1", (api) => {
       api.registerChatComposerButton({
         id: "chat-upload-btn",

plugins/chat/assets/javascripts/discourse/lib/chat-message-flag.js

@@ -38,7 +38,7 @@ export default class ChatMessageFlag {
     let flagsAvailable = site.flagTypes;
 
     flagsAvailable = flagsAvailable.filter((flag) => {
-      return model.availableFlags.includes(flag.name_key);
+      return model.available_flags.includes(flag.name_key);
     });
 
     // "message user" option should be at the top

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

@@ -7,7 +7,6 @@ import { tracked } from "@glimmer/tracking";
 import slugifyChannel from "discourse/plugins/chat/discourse/lib/slugify-channel";
 import ChatThreadsManager from "discourse/plugins/chat/discourse/lib/chat-threads-manager";
 import { getOwner } from "discourse-common/lib/get-owner";
-import { TrackedArray } from "@ember-compat/tracked-built-ins";
 
 export const CHATABLE_TYPES = {
   directMessageChannel: "DirectMessage",
@@ -55,16 +54,6 @@ export default class ChatChannel extends RestModel {
   @tracked chatableType;
   @tracked status;
   @tracked activeThread;
-  @tracked messages = new TrackedArray();
-  @tracked lastMessageSentAt;
-  @tracked canDeleteOthers;
-  @tracked canDeleteSelf;
-  @tracked canFlag;
-  @tracked canLoadMoreFuture;
-  @tracked canLoadMorePast;
-  @tracked canModerate;
-  @tracked userSilenced;
-  @tracked draft;
 
   threadsManager = new ChatThreadsManager(getOwner(this));
 
@@ -85,11 +74,11 @@ export default class ChatChannel extends RestModel {
   }
 
   get isDirectMessageChannel() {
-    return this.chatableType === CHATABLE_TYPES.directMessageChannel;
+    return this.chatable_type === CHATABLE_TYPES.directMessageChannel;
   }
 
   get isCategoryChannel() {
-    return this.chatableType === CHATABLE_TYPES.categoryChannel;
+    return this.chatable_type === CHATABLE_TYPES.categoryChannel;
   }
 
   get isOpen() {
@@ -116,57 +105,6 @@ export default class ChatChannel extends RestModel {
     return this.currentUserMembership.following;
   }
 
-  get visibleMessages() {
-    return this.messages.filter((message) => message.visible);
-  }
-
-  set details(details) {
-    this.canDeleteOthers = details.can_delete_others ?? false;
-    this.canDeleteSelf = details.can_delete_self ?? false;
-    this.canFlag = details.can_flag ?? false;
-    this.canModerate = details.can_moderate ?? false;
-    if (details.can_load_more_future !== undefined) {
-      this.canLoadMoreFuture = details.can_load_more_future;
-    }
-    if (details.can_load_more_past !== undefined) {
-      this.canLoadMorePast = details.can_load_more_past;
-    }
-    this.userSilenced = details.user_silenced ?? false;
-    this.status = details.channel_status;
-    this.channelMessageBusLastId = details.channel_message_bus_last_id;
-  }
-
-  clearMessages() {
-    this.messages.clear();
-
-    this.canLoadMoreFuture = null;
-    this.canLoadMorePast = null;
-  }
-
-  appendMessages(messages) {
-    this.messages.pushObjects(messages);
-  }
-
-  prependMessages(messages) {
-    this.messages.unshiftObjects(messages);
-  }
-
-  findMessage(messageId) {
-    return this.messages.find(
-      (message) => message.id === parseInt(messageId, 10)
-    );
-  }
-
-  removeMessage(message) {
-    return this.messages.removeObject(message);
-  }
-
-  findStagedMessage(stagedMessageId) {
-    return this.messages.find(
-      (message) => message.stagedId === stagedMessageId
-    );
-  }
-
   canModifyMessages(user) {
     if (user.staff) {
       return !STAFF_READONLY_STATUSES.includes(this.status);
@@ -189,10 +127,6 @@ export default class ChatChannel extends RestModel {
       return;
     }
 
-    if (this.currentUserMembership.last_read_message_id >= messageId) {
-      return;
-    }
-
     return ajax(`/chat/${this.id}/read/${messageId}.json`, {
       method: "PUT",
     }).then(() => {
@@ -208,17 +142,12 @@ ChatChannel.reopenClass({
     this._initUserModels(args);
     this._initUserMembership(args);
 
-    this._remapKey(args, "chatable_type", "chatableType");
+    args.chatableType = args.chatable_type;
-    this._remapKey(args, "memberships_count", "membershipsCount");
+    args.membershipsCount = args.memberships_count;
-    this._remapKey(args, "last_message_sent_at", "lastMessageSentAt");
 
     return this._super(args);
   },
 
-  _remapKey(obj, oldKey, newKey) {
-    delete Object.assign(obj, { [newKey]: obj[oldKey] })[oldKey];
-  },
-
   _initUserModels(args) {
     if (args.chatable?.users?.length) {
       for (let i = 0; i < args.chatable?.users?.length; i++) {

plugins/chat/assets/javascripts/discourse/models/chat-message-draft.js

@@ -1,62 +0,0 @@
-import { tracked } from "@glimmer/tracking";
-
-export default class ChatMessageDraft {
-  static create(args = {}) {
-    return new ChatMessageDraft(args ?? {});
-  }
-
-  @tracked uploads;
-  @tracked message;
-  @tracked _replyToMsg;
-
-  constructor(args = {}) {
-    this.message = args.message ?? "";
-    this.uploads = args.uploads ?? [];
-    this.replyToMsg = args.replyToMsg;
-  }
-
-  get replyToMsg() {
-    return this._replyToMsg;
-  }
-
-  set replyToMsg(message) {
-    this._replyToMsg = message
-      ? {
-          id: message.id,
-          excerpt: message.excerpt,
-          user: {
-            id: message.user.id,
-            name: message.user.name,
-            avatar_template: message.user.avatar_template,
-            username: message.user.username,
-          },
-        }
-      : null;
-  }
-
-  toJSON() {
-    if (
-      this.message?.length === 0 &&
-      this.uploads?.length === 0 &&
-      !this.replyToMsg
-    ) {
-      return null;
-    }
-
-    const data = {};
-
-    if (this.uploads?.length > 0) {
-      data.uploads = this.uploads;
-    }
-
-    if (this.message?.length > 0) {
-      data.message = this.message;
-    }
-
-    if (this.replyToMsg) {
-      data.replyToMsg = this.replyToMsg;
-    }
-
-    return JSON.stringify(data);
-  }
-}

plugins/chat/assets/javascripts/discourse/models/chat-message-reaction.js

@@ -1,33 +0,0 @@
-import { tracked } from "@glimmer/tracking";
-import User from "discourse/models/user";
-import { TrackedArray } from "@ember-compat/tracked-built-ins";
-
-export default class ChatMessageReaction {
-  static create(args = {}) {
-    return new ChatMessageReaction(args);
-  }
-
-  @tracked count = 0;
-  @tracked reacted = false;
-  @tracked users = [];
-
-  constructor(args = {}) {
-    this.messageId = args.messageId;
-    this.count = args.count;
-    this.emoji = args.emoji;
-    this.users = this.#initUsersModels(args.users);
-    this.reacted = args.reacted;
-  }
-
-  #initUsersModels(users = []) {
-    return new TrackedArray(
-      users.map((user) => {
-        if (user instanceof User) {
-          return user;
-        }
-
-        return User.create(user);
-      })
-    );
-  }
-}

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

@@ -1,193 +1,26 @@
+import RestModel from "discourse/models/rest";
 import User from "discourse/models/user";
-import { cached, tracked } from "@glimmer/tracking";
+import EmberObject from "@ember/object";
-import { TrackedArray, TrackedObject } from "@ember-compat/tracked-built-ins";
-import ChatMessageReaction from "discourse/plugins/chat/discourse/models/chat-message-reaction";
-import Bookmark from "discourse/models/bookmark";
-import I18n from "I18n";
-import guid from "pretty-text/guid";
 
-export default class ChatMessage {
+export default class ChatMessage extends RestModel {}
-  static cookFunction = null;
 
-  static create(channel, args = {}) {
+ChatMessage.reopenClass({
-    return new ChatMessage(channel, args);
+  create(args = {}) {
-  }
+    this._initReactions(args);
+    this._initUserModel(args);
 
-  static createStagedMessage(channel, args = {}) {
+    return this._super(args);
-    args.staged_id = guid();
+  },
-    return new ChatMessage(channel, args);
-  }
 
-  @tracked id;
+  _initReactions(args) {
-  @tracked error;
+    args.reactions = EmberObject.create(args.reactions || {});
-  @tracked selected;
+  },
-  @tracked channel;
-  @tracked stagedId;
-  @tracked channelId;
-  @tracked createdAt;
-  @tracked deletedAt;
-  @tracked uploads;
-  @tracked excerpt;
-  @tracked message;
-  @tracked threadId;
-  @tracked reactions;
-  @tracked reviewableId;
-  @tracked user;
-  @tracked cooked;
-  @tracked inReplyTo;
-  @tracked expanded;
-  @tracked bookmark;
-  @tracked userFlagStatus;
-  @tracked hidden;
-  @tracked version = 0;
-  @tracked edited;
-  @tracked chatWebhookEvent = new TrackedObject();
-  @tracked mentionWarning;
-  @tracked availableFlags;
-  @tracked newest = false;
 
-  constructor(channel, args = {}) {
+  _initUserModel(args) {
-    this.channel = channel;
+    if (!args.user || args.user instanceof User) {
-    this.id = args.id;
+      return;
-    this.newest = args.newest;
-    this.edited = args.edited;
-    this.availableFlags = args.available_flags;
-    this.hidden = args.hidden;
-    this.threadId = args.thread_id;
-    this.channelId = args.chat_channel_id;
-    this.chatWebhookEvent = args.chat_webhook_event;
-    this.createdAt = args.created_at;
-    this.deletedAt = args.deleted_at;
-    this.excerpt = args.excerpt;
-    this.reviewableId = args.reviewable_id;
-    this.userFlagStatus = args.user_flag_status;
-    this.inReplyTo = args.in_reply_to
-      ? ChatMessage.create(channel, args.in_reply_to)
-      : null;
-    this.message = args.message;
-    this.cooked = args.cooked || ChatMessage.cookFunction(this.message);
-    this.reactions = this.#initChatMessageReactionModel(
-      args.id,
-      args.reactions
-    );
-    this.stagedId = args.staged_id;
-    this.uploads = new TrackedArray(args.uploads || []);
-    this.user = this.#initUserModel(args.user);
-    this.bookmark = args.bookmark ? Bookmark.create(args.bookmark) : null;
-  }
-
-  get read() {
-    return this.channel.currentUserMembership?.last_read_message_id >= this.id;
-  }
-
-  get firstMessageOfTheDayAt() {
-    if (!this.previousMessage) {
-      return this.#calendarDate(this.createdAt);
     }
 
-    if (
+    args.user = User.create(args.user);
-      !this.#areDatesOnSameDay(
+  },
-        new Date(this.previousMessage.createdAt),
+});
-        new Date(this.createdAt)
-      )
-    ) {
-      return this.#calendarDate(this.createdAt);
-    }
-  }
-
-  #calendarDate(date) {
-    return moment(date).calendar(moment(), {
-      sameDay: `[${I18n.t("chat.chat_message_separator.today")}]`,
-      lastDay: `[${I18n.t("chat.chat_message_separator.yesterday")}]`,
-      lastWeek: "LL",
-      sameElse: "LL",
-    });
-  }
-
-  @cached
-  get index() {
-    return this.channel.messages.indexOf(this);
-  }
-
-  @cached
-  get previousMessage() {
-    return this.channel?.messages?.objectAt?.(this.index - 1);
-  }
-
-  @cached
-  get nextMessage() {
-    return this.channel?.messages?.objectAt?.(this.index + 1);
-  }
-
-  get staged() {
-    return this.stagedId?.length > 0;
-  }
-
-  react(emoji, action, actor, currentUserId) {
-    const selfReaction = actor.id === currentUserId;
-    const existingReaction = this.reactions.find(
-      (reaction) => reaction.emoji === emoji
-    );
-
-    if (existingReaction) {
-      if (action === "add") {
-        if (selfReaction && existingReaction.reacted) {
-          return false;
-        }
-
-        existingReaction.count = existingReaction.count + 1;
-        if (selfReaction) {
-          existingReaction.reacted = true;
-        }
-        existingReaction.users.pushObject(actor);
-      } else {
-        existingReaction.count = existingReaction.count - 1;
-
-        if (selfReaction) {
-          existingReaction.reacted = false;
-        }
-
-        if (existingReaction.count === 0) {
-          this.reactions.removeObject(existingReaction);
-        } else {
-          existingReaction.users.removeObject(
-            existingReaction.users.find((user) => user.id === actor.id)
-          );
-        }
-      }
-    } else {
-      if (action === "add") {
-        this.reactions.pushObject(
-          ChatMessageReaction.create({
-            count: 1,
-            emoji,
-            reacted: selfReaction,
-            users: [actor],
-          })
-        );
-      }
-    }
-  }
-
-  #initChatMessageReactionModel(messageId, reactions = []) {
-    return reactions.map((reaction) =>
-      ChatMessageReaction.create(Object.assign({ messageId }, reaction))
-    );
-  }
-
-  #initUserModel(user) {
-    if (!user || user instanceof User) {
-      return user;
-    }
-
-    return User.create(user);
-  }
-
-  #areDatesOnSameDay(a, b) {
-    return (
-      a.getFullYear() === b.getFullYear() &&
-      a.getMonth() === b.getMonth() &&
-      a.getDate() === b.getDate()
-    );
-  }
-}

plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-separator-date.js

@@ -1,35 +0,0 @@
-import Modifier from "ember-modifier";
-import { registerDestructor } from "@ember/destroyable";
-
-const IS_PINNED_CLASS = "is-pinned";
-
-/*
-  This modifier is used to track the date separator in the chat message list.
-  The trick is to have an element with `top: -1px` which will stop fully intersecting
-  as soon as it's scrolled a little bit.
-*/
-export default class ChatTrackMessageSeparatorDate extends Modifier {
-  constructor(owner, args) {
-    super(owner, args);
-    registerDestructor(this, (instance) => instance.cleanup());
-  }
-
-  modify(element) {
-    this.intersectionObserver = new IntersectionObserver(
-      ([event]) => {
-        if (event.isIntersecting && event.intersectionRatio < 1) {
-          event.target.classList.add(IS_PINNED_CLASS);
-        } else {
-          event.target.classList.remove(IS_PINNED_CLASS);
-        }
-      },
-      { threshold: [0, 1] }
-    );
-
-    this.intersectionObserver.observe(element);
-  }
-
-  cleanup() {
-    this.intersectionObserver?.disconnect();
-  }
-}

plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-visibility.js

@@ -0,0 +1,23 @@
+import Modifier from "ember-modifier";
+import { inject as service } from "@ember/service";
+import { registerDestructor } from "@ember/destroyable";
+
+export default class TrackMessageVisibility extends Modifier {
+  @service chatMessageVisibilityObserver;
+
+  element = null;
+
+  constructor(owner, args) {
+    super(owner, args);
+    registerDestructor(this, (instance) => instance.cleanup());
+  }
+
+  modify(element) {
+    this.element = element;
+    this.chatMessageVisibilityObserver.observe(element);
+  }
+
+  cleanup() {
+    this.chatMessageVisibilityObserver.unobserve(this.element);
+  }
+}

plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message.js

@@ -1,43 +0,0 @@
-import Modifier from "ember-modifier";
-import { registerDestructor } from "@ember/destroyable";
-import { bind } from "discourse-common/utils/decorators";
-
-export default class ChatTrackMessage extends Modifier {
-  visibleCallback = null;
-  notVisibleCallback = null;
-
-  constructor(owner, args) {
-    super(owner, args);
-    registerDestructor(this, (instance) => instance.cleanup());
-  }
-
-  modify(element, [visibleCallback, notVisibleCallback]) {
-    this.visibleCallback = visibleCallback;
-    this.notVisibleCallback = notVisibleCallback;
-
-    this.intersectionObserver = new IntersectionObserver(
-      this._intersectionObserverCallback,
-      {
-        root: document,
-        threshold: 0.9,
-      }
-    );
-
-    this.intersectionObserver.observe(element);
-  }
-
-  cleanup() {
-    this.intersectionObserver?.disconnect();
-  }
-
-  @bind
-  _intersectionObserverCallback(entries) {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        this.visibleCallback?.();
-      } else {
-        this.notVisibleCallback?.();
-      }
-    });
-  }
-}

plugins/chat/assets/javascripts/discourse/routes/chat-channel.js

@@ -10,10 +10,6 @@ export default class ChatChannelRoute extends DiscourseRoute {
 
   @action
   willTransition(transition) {
-    // Technically we could keep messages to avoid re-fetching them, but
-    // it's not worth the complexity for now
-    this.chat.activeChannel?.clearMessages();
-
     this.chat.activeChannel.activeThread = null;
     this.chatStateManager.closeSidePanel();
 

plugins/chat/assets/javascripts/discourse/services/chat-api.js

@@ -233,39 +233,6 @@ export default class ChatApi extends Service {
     );
   }
 
-  /**
-   * Returns messages of a channel, from the last message or a specificed target.
-   * @param {number} channelId - The ID of the channel.
-   * @param {object} data - Params of the query.
-   * @param {integer} data.targetMessageId - ID of the targeted message.
-   * @param {integer} data.messageId - ID of the targeted message.
-   * @param {integer} data.direction - Fetch past or future messages.
-   * @param {integer} data.pageSize - Max number of messages to fetch.
-   * @returns {Promise}
-   */
-  async messages(channelId, data = {}) {
-    let path;
-    const args = {};
-
-    if (data.targetMessageId) {
-      path = `/chat/lookup/${data.targetMessageId}`;
-      args.chat_channel_id = channelId;
-    } else {
-      args.page_size = data.pageSize;
-      path = `/chat/${channelId}/messages`;
-
-      if (data.messageId) {
-        args.message_id = data.messageId;
-      }
-
-      if (data.direction) {
-        args.direction = data.direction;
-      }
-    }
-
-    return ajax(path, { data: args });
-  }
-
   /**
    * Update notifications settings of current user for a channel.
    * @param {number} channelId - The ID of the channel.

plugins/chat/assets/javascripts/discourse/services/chat-channels-manager.js

@@ -42,14 +42,6 @@ export default class ChatChannelsManager extends Service {
       this.#cache(model);
     }
 
-    if (
-      channelObject.meta?.message_bus_last_ids?.channel_message_bus_last_id !==
-      undefined
-    ) {
-      model.channelMessageBusLastId =
-        channelObject.meta.message_bus_last_ids.channel_message_bus_last_id;
-    }
-
     return model;
   }
 
@@ -146,7 +138,8 @@ export default class ChatChannelsManager extends Service {
       const unreadCountA = a.currentUserMembership.unread_count || 0;
       const unreadCountB = b.currentUserMembership.unread_count || 0;
       if (unreadCountA === unreadCountB) {
-        return new Date(a.lastMessageSentAt) > new Date(b.lastMessageSentAt)
+        return new Date(a.get("last_message_sent_at")) >
+          new Date(b.get("last_message_sent_at"))
           ? -1
           : 1;
       } else {

plugins/chat/assets/javascripts/discourse/services/chat-message-visibility-observer.js

@@ -0,0 +1,63 @@
+import Service, { inject as service } from "@ember/service";
+import { isTesting } from "discourse-common/config/environment";
+import { bind } from "discourse-common/utils/decorators";
+
+export default class ChatMessageVisibilityObserver extends Service {
+  @service chat;
+
+  intersectionObserver = new IntersectionObserver(
+    this._intersectionObserverCallback,
+    {
+      root: document,
+      rootMargin: "-10px",
+    }
+  );
+
+  mutationObserver = new MutationObserver(this._mutationObserverCallback, {
+    root: document,
+    rootMargin: "-10px",
+  });
+
+  willDestroy() {
+    this.intersectionObserver.disconnect();
+    this.mutationObserver.disconnect();
+  }
+
+  @bind
+  _intersectionObserverCallback(entries) {
+    entries.forEach((entry) => {
+      entry.target.dataset.visible = entry.isIntersecting;
+
+      if (
+        !entry.target.dataset.stagedId &&
+        entry.isIntersecting &&
+        !isTesting()
+      ) {
+        this.chat.updateLastReadMessage();
+      }
+    });
+  }
+
+  @bind
+  _mutationObserverCallback(mutationList) {
+    mutationList.forEach((mutation) => {
+      const data = mutation.target.dataset;
+      if (data.id && data.visible && !data.stagedId) {
+        this.chat.updateLastReadMessage();
+      }
+    });
+  }
+
+  observe(element) {
+    this.intersectionObserver.observe(element);
+    this.mutationObserver.observe(element, {
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: ["data-staged-id"],
+    });
+  }
+
+  unobserve(element) {
+    this.intersectionObserver.unobserve(element);
+  }
+}

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

@@ -154,7 +154,7 @@ export default class ChatSubscriptionsManager extends Service {
         }
       }
 
-      channel.lastMessageSentAt = new Date();
+      channel.set("last_message_sent_at", new Date());
     });
   }
 
@@ -185,14 +185,13 @@ export default class ChatSubscriptionsManager extends Service {
   _onUserTrackingStateUpdate(busData) {
     this.chatChannelsManager.find(busData.chat_channel_id).then((channel) => {
       if (
-        !channel?.currentUserMembership?.last_read_message_id ||
+        channel?.currentUserMembership?.last_read_message_id <=
-        parseInt(channel?.currentUserMembership?.last_read_message_id, 10) <=
+        busData.chat_message_id
-          busData.chat_message_id
       ) {
         channel.currentUserMembership.last_read_message_id =
           busData.chat_message_id;
-        channel.currentUserMembership.unread_count = busData.unread_count;
+        channel.currentUserMembership.unread_count = 0;
-        channel.currentUserMembership.unread_mentions = busData.unread_mentions;
+        channel.currentUserMembership.unread_mentions = 0;
       }
     });
   }

plugins/chat/assets/javascripts/discourse/services/chat.js

@@ -3,18 +3,29 @@ import { tracked } from "@glimmer/tracking";
 import userSearch from "discourse/lib/user-search";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import Service, { inject as service } from "@ember/service";
+import Site from "discourse/models/site";
 import { ajax } from "discourse/lib/ajax";
+import { generateCookFunction } from "discourse/lib/text";
 import { cancel, next } from "@ember/runloop";
 import { and } from "@ember/object/computed";
 import { computed } from "@ember/object";
+import { Promise } from "rsvp";
+import simpleCategoryHashMentionTransform from "discourse/plugins/chat/discourse/lib/simple-category-hash-mention-transform";
+import discourseDebounce from "discourse-common/lib/debounce";
 import discourseLater from "discourse-common/lib/later";
-import ChatMessageDraft from "discourse/plugins/chat/discourse/models/chat-message-draft";
+import userPresent from "discourse/lib/user-presence";
+
+export const LIST_VIEW = "list_view";
+export const CHAT_VIEW = "chat_view";
+export const DRAFT_CHANNEL_VIEW = "draft_channel_view";
 
 const CHAT_ONLINE_OPTIONS = {
   userUnseenTime: 300000, // 5 minutes seconds with no interaction
   browserHiddenTime: 300000, // Or the browser has been in the background for 5 minutes
 };
 
+const READ_INTERVAL = 1000;
+
 export default class Chat extends Service {
   @service appEvents;
   @service chatNotificationManager;
@@ -53,6 +64,13 @@ export default class Chat extends Service {
 
     if (this.userCanChat) {
       this.presenceChannel = this.presence.getChannel("/chat/online");
+      this.draftStore = {};
+
+      if (this.currentUser.chat_drafts) {
+        this.currentUser.chat_drafts.forEach((draft) => {
+          this.draftStore[draft.channel_id] = JSON.parse(draft.data);
+        });
+      }
     }
   }
 
@@ -85,16 +103,6 @@ export default class Chat extends Service {
     [...channels.public_channels, ...channels.direct_message_channels].forEach(
       (channelObject) => {
         const channel = this.chatChannelsManager.store(channelObject);
-
-        if (this.currentUser.chat_drafts) {
-          const storedDraft = this.currentUser.chat_drafts.find(
-            (draft) => draft.channel_id === channel.id
-          );
-          channel.draft = ChatMessageDraft.create(
-            storedDraft ? JSON.parse(storedDraft.data) : null
-          );
-        }
-
         return this.chatChannelsManager.follow(channel);
       }
     );
@@ -108,6 +116,33 @@ export default class Chat extends Service {
     }
   }
 
+  loadCookFunction(categories) {
+    if (this.cook) {
+      return Promise.resolve(this.cook);
+    }
+
+    const markdownOptions = {
+      featuresOverride: Site.currentProp(
+        "markdown_additional_options.chat.limited_pretty_text_features"
+      ),
+      markdownItRules: Site.currentProp(
+        "markdown_additional_options.chat.limited_pretty_text_markdown_rules"
+      ),
+      hashtagTypesInPriorityOrder:
+        this.site.hashtag_configurations["chat-composer"],
+      hashtagIcons: this.site.hashtag_icons,
+    };
+
+    return generateCookFunction(markdownOptions).then((cookFunction) => {
+      return this.set("cook", (raw) => {
+        return simpleCategoryHashMentionTransform(
+          cookFunction(raw),
+          categories
+        );
+      });
+    });
+  }
+
   updatePresence() {
     next(() => {
       if (this.isDestroyed || this.isDestroying) {
@@ -242,6 +277,10 @@ export default class Chat extends Service {
       : this.router.transitionTo("chat.channel", ...channel.routeModels);
   }
 
+  _fireOpenMessageAppEvent(messageId) {
+    this.appEvents.trigger("chat-live-pane:highlight-message", messageId);
+  }
+
   async followChannel(channel) {
     return this.chatChannelsManager.follow(channel);
   }
@@ -288,6 +327,84 @@ export default class Chat extends Service {
     });
   }
 
+  _saveDraft(channelId, draft) {
+    const data = { chat_channel_id: channelId };
+    if (draft) {
+      data.data = JSON.stringify(draft);
+    }
+
+    ajax("/chat/drafts.json", { type: "POST", data, ignoreUnsent: false })
+      .then(() => {
+        this.markNetworkAsReliable();
+      })
+      .catch((error) => {
+        // we ignore a draft which can't be saved because it's too big
+        // and only deal with network error for now
+        if (!error.jqXHR?.responseJSON?.errors?.length) {
+          this.markNetworkAsUnreliable();
+        }
+      });
+  }
+
+  setDraftForChannel(channel, draft) {
+    if (
+      draft &&
+      (draft.value || draft.uploads.length > 0 || draft.replyToMsg)
+    ) {
+      this.draftStore[channel.id] = draft;
+    } else {
+      delete this.draftStore[channel.id];
+      draft = null; // _saveDraft will destroy draft
+    }
+
+    discourseDebounce(this, this._saveDraft, channel.id, draft, 2000);
+  }
+
+  getDraftForChannel(channelId) {
+    return (
+      this.draftStore[channelId] || {
+        value: "",
+        uploads: [],
+        replyToMsg: null,
+      }
+    );
+  }
+
+  updateLastReadMessage() {
+    discourseDebounce(this, this._queuedReadMessageUpdate, READ_INTERVAL);
+  }
+
+  _queuedReadMessageUpdate() {
+    const visibleMessages = document.querySelectorAll(
+      ".chat-message-container[data-visible=true]"
+    );
+    const channel = this.activeChannel;
+
+    if (
+      !channel?.isFollowing ||
+      visibleMessages?.length === 0 ||
+      !userPresent()
+    ) {
+      return;
+    }
+
+    const latestUnreadMsgId = parseInt(
+      visibleMessages[visibleMessages.length - 1].dataset.id,
+      10
+    );
+
+    const membership = channel.currentUserMembership;
+    const hasUnreadMessages =
+      latestUnreadMsgId > membership.last_read_message_id;
+    if (
+      hasUnreadMessages ||
+      membership.unread_count > 0 ||
+      membership.unread_mentions > 0
+    ) {
+      channel.updateLastReadMessage(latestUnreadMsgId);
+    }
+  }
+
   addToolbarButton() {
     deprecated(
       "Use the new chat API `api.registerChatComposerButton` instead of `chat.addToolbarButton`"

plugins/chat/assets/javascripts/discourse/templates/modal/create-channel.hbs

@@ -54,12 +54,7 @@
     />
 
     {{#if this.categoryPermissionsHint}}
-      <div
+      <div class="create-channel-hint">
-        class={{concat-class
-          "create-channel-hint"
-          (if this.loadingPermissionHint "loading-permissions")
-        }}
-      >
         {{this.categoryPermissionsHint}}
       </div>
     {{/if}}

plugins/chat/assets/stylesheets/common/chat-channel-preview-card.scss

@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  z-index: 3;
 
   &.-no-description {
     .chat-channel-title {

plugins/chat/assets/stylesheets/common/chat-composer.scss

@@ -1,8 +1,6 @@
 .chat-composer-container {
   display: flex;
   flex-direction: column;
-  z-index: 3;
-  background-color: var(--secondary);
 
   #chat-full-page-uploader,
   #chat-widget-uploader {

plugins/chat/assets/stylesheets/common/chat-message-actions.scss

@@ -6,6 +6,10 @@
 .chat-message-actions {
   .chat-message-reaction {
     @include chat-reaction;
+
+    &:not(.show) {
+      display: none;
+    }
   }
 }
 

plugins/chat/assets/stylesheets/common/chat-message-separator.scss

@@ -1,96 +1,42 @@
 .chat-message-separator {
   @include unselectable;
+  margin: 0.25rem 0 0.25rem 1rem;
   display: flex;
+  font-size: var(--font-down-1);
+  position: relative;
+  transform: translateZ(0);
+  position: relative;
 
-  &-new {
+  &.new-message {
-    position: relative;
+    color: var(--danger-medium);
-    padding: 20px 0;
 
-    .chat-message-separator__text-container {
+    .divider {
-      text-align: center;
+      background-color: var(--danger-medium);
-      position: absolute;
-      height: 40px;
-      width: 100%;
-      box-sizing: border-box;
-      z-index: 1;
-      top: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .chat-message-separator__text {
-        color: var(--danger-medium);
-        background-color: var(--secondary);
-        padding: 0.25rem 0.5rem;
-        font-size: var(--font-down-1);
-      }
-    }
-
-    .chat-message-separator__line-container {
-      width: 100%;
-
-      .chat-message-separator__line {
-        border-top: 1px solid var(--danger-medium);
-      }
     }
   }
 
-  &-date {
+  &.first-daily-message {
+    .text {
+      color: var(--secondary-low);
+      font-weight: 600;
+    }
+
+    .divider {
+      background-color: var(--secondary-high);
+    }
+  }
+
+  .text {
+    margin: 0 auto;
+    padding: 0 0.75rem;
+    z-index: 1;
+    background: var(--secondary);
+  }
+
+  .divider {
     position: absolute;
     width: 100%;
-    z-index: 1;
+    height: 1px;
-    display: flex;
+    top: 50%;
-    align-items: flex-start;
-    justify-content: center;
-    pointer-events: none;
-
-    &.last-visit {
-      .chat-message-separator__text {
-        color: var(--danger-medium);
-      }
-
-      & + .chat-message-separator__line-container {
-        .chat-message-separator__line {
-          border-color: var(--danger-medium);
-        }
-      }
-    }
-
-    .chat-message-separator__text-container {
-      padding-top: 7px;
-      position: sticky;
-      top: -1px;
-
-      &.is-pinned {
-        .chat-message-separator__text {
-          border: 1px solid var(--primary-medium);
-          border-radius: 3px;
-        }
-      }
-    }
-
-    .chat-message-separator__text {
-      @include unselectable;
-      background-color: var(--secondary);
-      border: 1px solid transparent;
-      color: var(--secondary-low);
-      font-size: var(--font-down-1);
-      padding: 0.25rem 0.5rem;
-      box-sizing: border-box;
-    }
-
-    & + .chat-message-separator__line-container {
-      padding: 20px 0;
-      box-sizing: border-box;
-
-      .chat-message-separator__line {
-        border-top: 1px solid var(--secondary-high);
-        left: 0;
-        margin: 0 0 -1px;
-        position: relative;
-        right: 0;
-        top: -1px;
-      }
-    }
   }
 }

plugins/chat/assets/stylesheets/common/chat-message.scss

@@ -42,10 +42,6 @@
       background: var(--primary-low);
       border-color: var(--primary-low-mid);
     }
-
-    &:focus {
-      background: none;
-    }
   }
 
   .emoji {
@@ -61,11 +57,13 @@
   background-color: var(--secondary);
   display: flex;
   min-width: 0;
-  content-visibility: auto;
-  contain-intrinsic-size: auto 200px;
 
   .chat-message-reaction {
     @include chat-reaction;
+
+    &:not(.show) {
+      display: none;
+    }
   }
 
   &.chat-action {
@@ -88,6 +86,17 @@
     transition: 2s linear background-color;
   }
 
+  &.user-info-hidden {
+    .chat-time {
+      color: var(--secondary-medium);
+      flex-shrink: 0;
+      font-size: var(--font-down-2);
+      margin-top: 0.4em;
+      display: none;
+      width: var(--message-left-width);
+    }
+  }
+
   &.is-reply {
     display: grid;
     grid-template-columns: var(--message-left-width) 1fr;
@@ -245,10 +254,6 @@
 
   .chat-message.chat-message-bookmarked {
     background: var(--highlight-bg);
-
-    &:hover {
-      background: var(--highlight-medium);
-    }
   }
 
   .not-mobile-device & .chat-message-reaction-list .chat-message-react-btn {
@@ -279,6 +284,7 @@
   font-style: italic;
 }
 
+.chat-message-container.is-hovered,
 .chat-message.chat-message-selected {
   background: var(--primary-very-low);
 }

plugins/chat/assets/stylesheets/common/chat-skeleton.scss

@@ -1,4 +1,4 @@
-$radius: 3px;
+$radius: 10px;
 
 .chat-skeleton {
   height: auto;
@@ -55,35 +55,11 @@ $radius: 3px;
   &__message-content {
     grid-area: content;
     width: 100%;
-    padding: 10px 0;
   }
-
-  &__message-reactions {
-    display: flex;
-    padding: 5px 0 0 0;
-  }
-
-  &__message-reaction {
-    background-color: var(--primary-100);
-    width: 32px;
-    height: 18px;
-    border-radius: $radius;
-
-    & + & {
-      margin-left: 0.5rem;
-    }
-  }
-
-  &__message-text {
-    display: flex;
-    padding: 5px 0;
-    flex-direction: column;
-  }
-
   &__message-msg {
     height: 13px;
     border-radius: $radius;
-    margin: 2px 0;
+    margin: 5px 0;
 
     .chat-skeleton__body:nth-of-type(odd) & {
       background-color: var(--primary-100);
@@ -93,14 +69,6 @@ $radius: 3px;
     }
   }
 
-  &__message-img {
-    height: 80px;
-    border-radius: $radius;
-    margin: 2px 0;
-    width: 200px;
-    background-color: var(--primary-100);
-  }
-
   *[class^="chat-skeleton__message-"] {
     position: relative;
     overflow: hidden;
@@ -110,7 +78,7 @@ $radius: 3px;
     position: relative;
     overflow: hidden;
 
-    *[class^="chat-skeleton__message-"]:not(.chat-skeleton__message-content):not(.chat-skeleton__message-text):not(.chat-skeleton__message-reactions):after {
+    *[class^="chat-skeleton__message-"]:not(.chat-skeleton__message-content):after {
       position: absolute;
       top: 0;
       right: 0;

plugins/chat/assets/stylesheets/common/common.scss

@@ -144,7 +144,6 @@ $float-height: 530px;
 .chat-messages-container {
   word-wrap: break-word;
   white-space: normal;
-  position: relative;
 
   .chat-message-container {
     display: grid;
@@ -284,8 +283,6 @@ $float-height: 530px;
     display: flex;
     flex-direction: column-reverse;
     z-index: 1;
-    margin: 0 3px 0 0;
-    will-change: transform;
 
     &::-webkit-scrollbar {
       width: 15px;
@@ -326,65 +323,37 @@ $float-height: 530px;
   }
 
   .chat-scroll-to-bottom {
-    left: calc(50% - calc(45px / 2));
+    background: var(--primary-medium);
-    align-items: center;
+    bottom: 1em;
-    justify-content: center;
+    border-radius: 100%;
+    left: 50%;
+    opacity: 50%;
+    padding: 0.5em;
     position: absolute;
-    z-index: 1;
+    transform: translateX(-50%);
-    flex-direction: column;
+    z-index: 2;
-    bottom: -75px;
-    background: none;
-    opacity: 0;
-    transition: opacity 0.25s ease, transform 0.5s ease;
-    transform: scale(0.1);
-    padding: 5px;
-
-    > * {
-      pointer-events: none;
-    }
-
-    &:hover,
-    &:active,
-    &:focus {
-      background: none !important;
-    }
-
-    &.visible {
-      transform: translateY(-75px) scale(1);
-      opacity: 0.8;
-    }
-
-    &__text {
-      color: var(--secondary);
-      padding: 0.5rem;
-      margin-bottom: 0.5rem;
-      background: var(--primary-medium);
-      border-radius: 3px;
-      text-align: center;
-      font-size: var(--font-down-1);
-    }
-
-    &__arrow {
-      display: flex;
-      background: var(--primary-medium);
-      border-radius: 100%;
-      align-items: center;
-      justify-content: center;
-      height: 35px;
-      width: 35px;
-
-      .d-icon {
-        color: var(--secondary);
-      }
-    }
 
     &:hover {
-      opacity: 1;
+      background: var(--primary-medium);
+      opacity: 100%;
+    }
 
-      .chat-scroll-to-bottom__arrow {
+    .d-icon {
-        .d-icon {
+      color: var(--primary);
-          color: var(--secondary);
+      margin: 0;
-        }
+    }
+
+    &.unread-messages {
+      opacity: 85%;
+      border-radius: 0;
+      transition: border-radius 0.1s linear;
+
+      &:hover {
+        opacity: 100%;
+      }
+
+      .d-icon {
+        margin: 0 0 0 0.5em;
       }
     }
   }

plugins/chat/assets/stylesheets/desktop/chat-composer.scss

@@ -1,6 +1,6 @@
 .chat-composer-container {
   .chat-composer {
-    margin: 0.25rem 5px 0 5px;
+    margin: 0.25rem 10px 0 10px;
   }
   html.keyboard-visible .footer-nav-ipad & {
     margin: 0.25rem 10px 1rem 10px;

plugins/chat/assets/stylesheets/desktop/desktop.scss

@@ -53,25 +53,6 @@
 
 .chat-message.user-info-hidden {
   padding: 0.15em 1em;
-
-  .chat-time {
-    color: var(--secondary-medium);
-    flex-shrink: 0;
-    font-size: var(--font-down-2);
-    margin-top: 0.4em;
-    display: none;
-    width: var(--message-left-width);
-  }
-
-  &:hover {
-    .chat-message-left-gutter__bookmark {
-      display: none;
-    }
-
-    .chat-time {
-      display: block;
-    }
-  }
 }
 
 // Full Page Styling in Core

plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss

@@ -22,8 +22,6 @@
     border-radius: 8px;
 
     .selected-message-reply {
-      margin-left: 5px;
-
       &:not(.is-expanded) {
         @include ellipsis;
       }

plugins/chat/assets/stylesheets/mobile/chat-message.scss

@@ -4,3 +4,7 @@
 .replying-text {
   @include unselectable;
 }
+
+.chat-message-container {
+  transform: translateZ(0);
+}

plugins/chat/config/locales/client.en.yml

@@ -108,7 +108,7 @@ en:
       in_reply_to: "In reply to"
       heading: "Chat"
       join: "Join"
-      last_visit: "last visit"
+      new_messages: "new messages"
       mention_warning:
         dismiss: "dismiss"
         cannot_see: "%{username} can't access this channel and was not notified."

plugins/chat/plugin.rb

@@ -247,7 +247,6 @@ after_initialize do
   load File.expand_path("../app/controllers/api/hints_controller.rb", __FILE__)
   load File.expand_path("../app/controllers/api/chat_channel_threads_controller.rb", __FILE__)
   load File.expand_path("../app/controllers/api/chat_chatables_controller.rb", __FILE__)
-  load File.expand_path("../app/queries/chat_channel_unreads_query.rb", __FILE__)
   load File.expand_path("../app/queries/chat_channel_memberships_query.rb", __FILE__)
 
   if Discourse.allow_dev_populate?

plugins/chat/spec/queries/chat_channel_memberships_query_spec.rb

@@ -17,7 +17,7 @@ describe ChatChannelMembershipsQuery do
 
       context "when no memberships exists" do
         it "returns an empty array" do
-          expect(described_class.call(channel: channel_1)).to eq([])
+          expect(described_class.call(channel_1)).to eq([])
         end
       end
 
@@ -28,7 +28,7 @@ describe ChatChannelMembershipsQuery do
         end
 
         it "returns the memberships" do
-          memberships = described_class.call(channel: channel_1)
+          memberships = described_class.call(channel_1)
 
           expect(memberships.pluck(:user_id)).to contain_exactly(user_1.id, user_2.id)
         end
@@ -49,7 +49,7 @@ describe ChatChannelMembershipsQuery do
           end
 
           it "lists the user" do
-            memberships = described_class.call(channel: channel_1)
+            memberships = described_class.call(channel_1)
 
             expect(memberships.pluck(:user_id)).to include(user_1.id)
           end
@@ -62,16 +62,14 @@ describe ChatChannelMembershipsQuery do
               permission_type: CategoryGroup.permission_types[:full],
             )
 
-            expect(described_class.call(channel: channel_1).pluck(:user_id)).to contain_exactly(
+            expect(described_class.call(channel_1).pluck(:user_id)).to contain_exactly(user_1.id)
-              user_1.id,
-            )
           end
 
           it "returns the membership if the user still has access through a staff group" do
             chatters_group.remove(user_1)
             Group.find_by(id: Group::AUTO_GROUPS[:staff]).add(user_1)
 
-            memberships = described_class.call(channel: channel_1)
+            memberships = described_class.call(channel_1)
 
             expect(memberships.pluck(:user_id)).to include(user_1.id)
           end
@@ -79,7 +77,7 @@ describe ChatChannelMembershipsQuery do
 
         context "when membership doesn’t exist" do
           it "doesn’t list the user" do
-            memberships = described_class.call(channel: channel_1)
+            memberships = described_class.call(channel_1)
 
             expect(memberships.pluck(:user_id)).to be_empty
           end
@@ -93,7 +91,7 @@ describe ChatChannelMembershipsQuery do
           end
 
           it "doesn’t list the user" do
-            memberships = described_class.call(channel: channel_1)
+            memberships = described_class.call(channel_1)
 
             expect(memberships).to be_empty
           end
@@ -101,7 +99,7 @@ describe ChatChannelMembershipsQuery do
 
         context "when membership doesn’t exist" do
           it "doesn’t list the user" do
-            memberships = described_class.call(channel: channel_1)
+            memberships = described_class.call(channel_1)
 
             expect(memberships).to be_empty
           end
@@ -116,7 +114,7 @@ describe ChatChannelMembershipsQuery do
         end
 
         it "returns an empty array" do
-          expect(described_class.call(channel: channel_1)).to eq([])
+          expect(described_class.call(channel_1)).to eq([])
         end
       end
 
@@ -124,7 +122,7 @@ describe ChatChannelMembershipsQuery do
         fab!(:channel_1) { Fabricate(:direct_message_channel, users: [user_1, user_2]) }
 
         it "returns the memberships" do
-          memberships = described_class.call(channel: channel_1)
+          memberships = described_class.call(channel_1)
 
           expect(memberships.pluck(:user_id)).to contain_exactly(user_1.id, user_2.id)
         end
@@ -141,7 +139,7 @@ describe ChatChannelMembershipsQuery do
 
       describe "offset param" do
         it "offsets the results" do
-          memberships = described_class.call(channel: channel_1, offset: 1)
+          memberships = described_class.call(channel_1, offset: 1)
 
           expect(memberships.length).to eq(1)
         end
@@ -149,7 +147,7 @@ describe ChatChannelMembershipsQuery do
 
       describe "limit param" do
         it "limits the results" do
-          memberships = described_class.call(channel: channel_1, limit: 1)
+          memberships = described_class.call(channel_1, limit: 1)
 
           expect(memberships.length).to eq(1)
         end
@@ -165,7 +163,7 @@ describe ChatChannelMembershipsQuery do
       end
 
       it "filters the results" do
-        memberships = described_class.call(channel: channel_1, username: user_1.username)
+        memberships = described_class.call(channel_1, username: user_1.username)
 
         expect(memberships.length).to eq(1)
         expect(memberships[0].user).to eq(user_1)
@@ -184,7 +182,7 @@ describe ChatChannelMembershipsQuery do
         before { SiteSetting.prioritize_username_in_ux = true }
 
         it "is using ascending order on username" do
-          memberships = described_class.call(channel: channel_1)
+          memberships = described_class.call(channel_1)
 
           expect(memberships[0].user).to eq(user_1)
           expect(memberships[1].user).to eq(user_2)
@@ -195,7 +193,7 @@ describe ChatChannelMembershipsQuery do
         before { SiteSetting.prioritize_username_in_ux = false }
 
         it "is using ascending order on name" do
-          memberships = described_class.call(channel: channel_1)
+          memberships = described_class.call(channel_1)
 
           expect(memberships[0].user).to eq(user_2)
           expect(memberships[1].user).to eq(user_1)
@@ -205,7 +203,7 @@ describe ChatChannelMembershipsQuery do
           before { SiteSetting.enable_names = false }
 
           it "is using ascending order on username" do
-            memberships = described_class.call(channel: channel_1)
+            memberships = described_class.call(channel_1)
 
             expect(memberships[0].user).to eq(user_1)
             expect(memberships[1].user).to eq(user_2)
@@ -224,7 +222,7 @@ describe ChatChannelMembershipsQuery do
     end
 
     it "doesn’t list staged users" do
-      memberships = described_class.call(channel: channel_1)
+      memberships = described_class.call(channel_1)
       expect(memberships).to be_blank
     end
   end
@@ -244,7 +242,7 @@ describe ChatChannelMembershipsQuery do
     end
 
     it "doesn’t list suspended users" do
-      memberships = described_class.call(channel: channel_1)
+      memberships = described_class.call(channel_1)
       expect(memberships).to be_blank
     end
   end
@@ -262,7 +260,7 @@ describe ChatChannelMembershipsQuery do
     end
 
     it "doesn’t list inactive users" do
-      memberships = described_class.call(channel: channel_1)
+      memberships = described_class.call(channel_1)
       expect(memberships).to be_blank
     end
   end

plugins/chat/spec/queries/chat_channel_unreads_query_spec.rb

@@ -1,51 +0,0 @@
-# frozen_string_literal: true
-
-require "rails_helper"
-
-describe ChatChannelUnreadsQuery do
-  fab!(:channel_1) { Fabricate(:category_channel) }
-  fab!(:current_user) { Fabricate(:user) }
-
-  before do
-    SiteSetting.chat_enabled = true
-    SiteSetting.chat_allowed_groups = Group::AUTO_GROUPS[:everyone]
-    channel_1.add(current_user)
-  end
-
-  context "with unread message" do
-    it "returns a correct unread count" do
-      Fabricate(:chat_message, chat_channel: channel_1)
-
-      expect(described_class.call(channel_id: channel_1.id, user_id: current_user.id)).to eq(
-        { mention_count: 0, unread_count: 1 },
-      )
-    end
-  end
-
-  context "with unread mentions" do
-    before { Jobs.run_immediately! }
-
-    it "returns a correct unread mention" do
-      message = Fabricate(:chat_message)
-      notification =
-        Notification.create!(
-          notification_type: Notification.types[:chat_mention],
-          user_id: current_user.id,
-          data: { chat_message_id: message.id, chat_channel_id: channel_1.id }.to_json,
-        )
-      ChatMention.create!(notification: notification, user: current_user, chat_message: message)
-
-      expect(described_class.call(channel_id: channel_1.id, user_id: current_user.id)).to eq(
-        { mention_count: 1, unread_count: 0 },
-      )
-    end
-  end
-
-  context "with nothing unread" do
-    it "returns a correct state" do
-      expect(described_class.call(channel_id: channel_1.id, user_id: current_user.id)).to eq(
-        { mention_count: 0, unread_count: 0 },
-      )
-    end
-  end
-end

plugins/chat/spec/requests/chat_controller_spec.rb

@@ -126,17 +126,15 @@ RSpec.describe Chat::ChatController do
     it "correctly marks reactions as 'reacted' for the current_user" do
       heart_emoji = ":heart:"
       smile_emoji = ":smile"
+
       last_message = chat_channel.chat_messages.last
       last_message.reactions.create(user: user, emoji: heart_emoji)
       last_message.reactions.create(user: admin, emoji: smile_emoji)
 
       get "/chat/#{chat_channel.id}/messages.json", params: { page_size: page_size }
-
       reactions = response.parsed_body["chat_messages"].last["reactions"]
-      heart_reaction = reactions.find { |r| r["emoji"] == heart_emoji }
+      expect(reactions[heart_emoji]["reacted"]).to be true
-      expect(heart_reaction["reacted"]).to be true
+      expect(reactions[smile_emoji]["reacted"]).to be false
-      smile_reaction = reactions.find { |r| r["emoji"] == smile_emoji }
-      expect(smile_reaction["reacted"]).to be false
     end
 
     it "sends the last message bus id for the channel" do

plugins/chat/spec/serializer/chat_message_serializer_spec.rb

@@ -21,14 +21,12 @@ describe ChatMessageSerializer do
       it "doesn’t return the reaction" do
         Emoji.clear_cache
 
-        trout_reaction = subject.as_json[:reactions].find { |r| r[:emoji] == "trout" }
+        expect(subject.as_json[:reactions]["trout"]).to be_present
-        expect(trout_reaction).to be_present
 
         custom_emoji.destroy!
         Emoji.clear_cache
 
-        trout_reaction = subject.as_json[:reactions].find { |r| r[:emoji] == "trout" }
+        expect(subject.as_json[:reactions]["trout"]).to_not be_present
-        expect(trout_reaction).to_not be_present
       end
     end
   end

plugins/chat/spec/system/chat_channel_spec.rb

@@ -183,7 +183,7 @@ RSpec.describe "Chat channel", type: :system, js: true do
     it "shows a date separator" do
       chat.visit_channel(channel_1)
 
-      expect(page).to have_selector(".chat-message-separator__text", text: "Today")
+      expect(page).to have_selector(".first-daily-message", text: "Today")
     end
   end
 

plugins/chat/spec/system/create_channel_spec.rb

@@ -81,7 +81,6 @@ RSpec.describe "Create channel", type: :system, js: true do
         chat_page.visit_browse
         chat_page.new_channel_button.click
         channel_modal.select_category(private_category_1)
-        expect(page).to have_no_css(".loading-permissions")
 
         expect(channel_modal.create_channel_hint["innerHTML"].strip).to include(
           "<script>e</script>",

plugins/chat/spec/system/flag_message_spec.rb

@@ -32,7 +32,7 @@ RSpec.describe "Flag message", type: :system, js: true do
 
   context "when direct message channel" do
     fab!(:dm_channel_1) { Fabricate(:direct_message_channel, users: [current_user]) }
-    fab!(:message_1) { Fabricate(:chat_message, chat_channel: dm_channel_1) }
+    fab!(:message_1) { Fabricate(:chat_message, chat_channel: dm_channel_1, user: current_user) }
 
     it "doesn’t allow to flag a message" do
       chat.visit_channel(dm_channel_1)

plugins/chat/spec/system/message_user_info.rb

@@ -1,60 +0,0 @@
-# frozen_string_literal: true
-
-RSpec.describe "Sticky date", type: :system, js: true do
-  fab!(:current_user) { Fabricate(:user) }
-  fab!(:channel_1) { Fabricate(:category_channel) }
-
-  let(:chat_page) { PageObjects::Pages::Chat.new }
-
-  before do
-    chat_system_bootstrap
-    sign_in(current_user)
-  end
-
-  context "when previous message is from a different user" do
-    fab!(:message_1) { Fabricate(:chat_message, chat_channel: channel_1) }
-    fab!(:message_2) { Fabricate(:chat_message, chat_channel: channel_1) }
-
-    it "shows user info on the message" do
-      chat_page.visit_channel(channel_1)
-
-      expect(page.find("[data-id='#{message_2.id}']")).to have_css(".chat-message-avatar")
-    end
-  end
-
-  context "when previous message is from the same user" do
-    fab!(:message_1) { Fabricate(:chat_message, chat_channel: channel_1, user: current_user) }
-    fab!(:message_2) { Fabricate(:chat_message, chat_channel: channel_1, user: current_user) }
-
-    it "doesn’t show user info on the message" do
-      chat_page.visit_channel(channel_1)
-
-      expect(page.find("[data-id='#{message_2.id}']")).to have_no_css(".chat-message-avatar")
-    end
-
-    context "when previous message is old" do
-      fab!(:message_1) do
-        Fabricate(
-          :chat_message,
-          chat_channel: channel_1,
-          user: current_user,
-          created_at: DateTime.parse("2018-11-10 17:00"),
-        )
-      end
-      fab!(:message_2) do
-        Fabricate(
-          :chat_message,
-          chat_channel: channel_1,
-          user: current_user,
-          created_at: DateTime.parse("2018-11-10 17:30"),
-        )
-      end
-
-      it "shows user info on the message" do
-        chat_page.visit_channel(channel_1)
-
-        expect(page.find("[data-id='#{message_2.id}']")).to have_no_css(".chat-message-avatar")
-      end
-    end
-  end
-end

plugins/chat/spec/system/navigating_to_message_spec.rb

@@ -60,9 +60,8 @@ RSpec.describe "Navigating to message", type: :system, js: true do
 
       it "highlights the correct message after using the bottom arrow" do
         chat_page.visit_channel(channel_1)
-
         click_link(link)
-        click_button(class: "chat-scroll-to-bottom")
+        click_link(I18n.t("js.chat.scroll_to_bottom"))
         click_link(link)
 
         expect(page).to have_css(
@@ -150,9 +149,8 @@ RSpec.describe "Navigating to message", type: :system, js: true do
         visit("/")
         chat_page.open_from_header
         chat_drawer_page.open_channel(channel_1)
-
         click_link(link)
-        click_button(class: "chat-scroll-to-bottom")
+        click_link(I18n.t("js.chat.scroll_to_bottom"))
         click_link(link)
 
         expect(page).to have_css(