DEV: rework the chat-live-pane

This PR is introducing glimmer usage in the chat-live-pane, for components but also for models. RestModel usage has been dropped in favor of native classes.

Other changes/additions in this PR:

- sticky dates, scrolling will now keep the date separator of the current section at the top of the screen
- better unread management, marking a channel as unread will correctly mark the correct message and not mark the whole channel as read. Tracking state will also now correctly return unread count and unread mentions.
- adds an animation on bottom arrow
- better scrolling behavior, we should now always correctly keep the scroll position while loading more
- reactions are now more reactive, and will update their tooltip without needed to close/reopen it
- skeleton has been improved with placeholder images and reactions
- when making a reaction on the desktop message actions, the menu won't move anymore
- simplify logic and stop maintaining a list of unloaded messages

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_from_params,
+        channel: 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/message/#{self.id}"
+    "/chat/c/-/#{self.chat_channel_id}/#{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, count_only: true)
+    call(channel: channel, count_only: true)
   end
 end

plugins/chat/app/queries/chat_channel_unreads_query.rb

@@ -0,0 +1,40 @@
+# 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,6 +110,7 @@ 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)
-      .each do |emoji, reactions|
+      .map do |emoji, reactions|
-        users = reactions[0..5].map(&:user).filter { |user| user.id != scope&.user&.id }[0..4]
-
         next unless Emoji.exists?(emoji)
 
-        reactions_hash[emoji] = {
+        users = reactions.take(5).map(&:user)
+
+        {
+          emoji: emoji,
           count: reactions.count,
           users:
             ActiveModel::ArraySerializer.new(users, each_serializer: BasicUserSerializer).as_json,
           reacted: users_reactions.include?(emoji),
         }
       end
-    reactions_hash
+      .compact
   end
 
   def include_reactions?

plugins/chat/app/serializers/chat_view_serializer.rb

@@ -16,6 +16,7 @@ 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[:stagedId] = staged_id
+    content[:staged_id] = staged_id
     permissions = permissions(chat_channel)
 
     MessageBus.publish("/chat/#{chat_channel.id}", content.as_json, permissions)
@@ -133,9 +133,13 @@ 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),
-      { chat_channel_id: chat_channel_id, chat_message_id: chat_message_id.to_i }.as_json,
+      data.as_json,
       user_ids: [user.id],
     )
   end

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

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

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

@@ -3,7 +3,7 @@
     {{this.lastMessageFormatedDate}}
   </div>
 
-  {{#if @unreadIndicator}}
+  {{#if this.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 {
-  unreadIndicator = false;
+  get unreadIndicator() {
+    return this.args.unreadIndicator ?? false;
+  }
 
   get lastMessageFormatedDate() {
-    return moment(this.args.channel.get("last_message_sent_at")).calendar(
+    return moment(this.args.channel.lastMessageSentAt).calendar(null, {
-      null,
+      sameDay: "LT",
-      {
+      nextDay: "[Tomorrow]",
-        sameDay: "LT",
+      nextWeek: "dddd",
-        nextDay: "[Tomorrow]",
+      lastDay: "[Yesterday]",
-        nextWeek: "dddd",
+      lastWeek: "dddd",
-        lastDay: "[Yesterday]",
+      sameElse: "l",
-        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={{this.channel}} />
+  <ChatChannelTitle @channel={{@channel}} />
   {{#if this.hasDescription}}
     <p class="chat-channel-preview-card__description">
-      {{this.channel.description}}
+      {{@channel.description}}
     </p>
   {{/if}}
   {{#if this.showJoinButton}}
     <ToggleChannelMembershipButton
-      @channel={{this.channel}}
+      @channel={{@channel}}
       @options={{hash joinClass="btn-primary"}}
     />
   {{/if}}

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

@@ -1,19 +1,15 @@
-import Component from "@ember/component";
+import Component from "@glimmer/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 = "";
 
-  channel = null;
+  get showJoinButton() {
+    return this.args.channel?.isOpen;
+  }
 
-  @readOnly("channel.isOpen") showJoinButton;
-
-  @computed("channel.description")
   get hasDescription() {
-    return !isEmpty(this.channel.description);
+    return !isEmpty(this.args.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.last_message_sent_at) > new Date(b.last_message_sent_at)
+      return new Date(a.lastMessageSentAt) > new Date(b.lastMessageSentAt)
         ? -1
         : 1;
     });

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

@@ -1,17 +1,17 @@
-{{#if this.buttons.length}}
+{{#if @buttons.length}}
   <DPopover
     @class="chat-composer-dropdown"
     @options={{hash arrow=null}}
     as |state|
   >
     <FlatButton
-      @disabled={{this.isDisabled}}
+      @disabled={{@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 this.buttons as |button|}}
+      {{#each @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

@@ -1,7 +0,0 @@
-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,6 +5,7 @@ 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"],
@@ -12,16 +13,25 @@ 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() {
@@ -32,7 +42,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
@@ -81,11 +91,6 @@ 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,7 +79,11 @@
 {{#if this.canAttachUploads}}
   <ChatComposerUploads
     @fileUploadElementId={{this.fileUploadElementId}}
-    @onUploadChanged={{action "uploadsChanged"}}
+    @onUploadChanged={{this.uploadsChanged}}
+    @existingUploads={{or
+      this.chatChannel.draft.uploads
+      this.editingMessage.uploads
+    }}
   />
 {{/if}}
 

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

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

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

@@ -19,9 +19,6 @@
   />
 
   {{#if this.previewedChannel}}
-    <ChatLivePane
+    <ChatLivePane @channel={{this.previewedChannel}} @includeHeader={{false}} />
-      @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}}
-        @chatChannel={{this.chat.activeChannel}}
+        @channel={{this.chat.activeChannel}}
       />
     {{/if}}
   </div>

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

@@ -65,6 +65,10 @@ 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

@@ -0,0 +1,46 @@
+{{#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

@@ -0,0 +1,11 @@
+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,148 +1,115 @@
-{{#if (and this.chatStateManager.isFullPageActive this.includeHeader)}}
-  <div
-    class="chat-full-page-header
-      {{unless this.chatChannel.isFollowing '-not-following'}}"
-  >
-    <div class="chat-channel-header-details">
-      {{#if this.site.mobileView}}
-        <div class="chat-full-page-header__left-actions">
-          <DButton
-            @class="chat-full-page-header__back-btn no-text btn-flat"
-            @icon="chevron-left"
-            @action={{this.onBackClick}}
-          />
-        </div>
-      {{/if}}
-
-      <LinkTo
-        @route="chat.channel.info"
-        @models={{this.chatChannel.routeModels}}
-        class="chat-channel-title-wrapper"
-      >
-        <ChatChannelTitle @channel={{this.chatChannel}} />
-      </LinkTo>
-
-      {{#if this.showCloseFullScreenBtn}}
-        <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>
-
-  <ChatChannelStatus @channel={{this.chatChannel}} />
-{{/if}}
-
-<ChatRetentionReminder @chatChannel={{this.chatChannel}} />
-
-<ChatMentionWarnings />
-
-<div class="chat-message-actions-mobile-anchor"></div>
 <div
   class={{concat-class
-    "chat-message-emoji-picker-anchor"
+    "chat-live-pane"
-    (if
+    (if this.loading "loading")
-      (and
+    (if this.sendingLoading "sending-loading")
-        this.chatEmojiPickerManager.opened
-        (eq this.chatEmojiPickerManager.context "chat-message")
-      )
-      "-opened"
-    )
   }}
+  {{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}}
 >
-</div>
+  <ChatFullPageHeader
-
+    @channel={{@channel}}
-<div class="chat-messages-scroll chat-messages-container">
+    @onCloseFullScreen={{this.onCloseFullScreen}}
-  <div class="chat-message-actions-desktop-anchor"></div>
+    @displayed={{this.includeHeader}}
-  <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>
-
-  {{#if this.allPastMessagesLoaded}}
-    <div class="all-loaded-message">
-      {{i18n "chat.all_loaded"}}
-    </div>
-  {{/if}}
-</div>
-
-{{#if this.showScrollToBottomBtn}}
-  <div class="scroll-stick-wrap">
-    <a
-      href
-      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)}}
+  <ChatRetentionReminder @channel={{@channel}} />
-    <ChatComposer
+
-      @draft={{this.draft}}
+  <ChatMentionWarnings />
-      @details={{this.details}}
+
-      @canInteractWithChat={{this.canInteractWithChat}}
+  <div class="chat-message-actions-mobile-anchor"></div>
-      @sendMessage={{action "sendMessage"}}
+
-      @editMessage={{action "editMessage"}}
+  <div
-      @setReplyTo={{action "setReplyTo"}}
+    class={{concat-class
-      @loading={{this.sendingLoading}}
+      "chat-message-emoji-picker-anchor"
-      @editingMessage={{readonly this.editingMessage}}
+      (if
-      @onCancelEditing={{this.cancelEditing}}
+        (and
-      @setInReplyToMsg={{this.setInReplyToMsg}}
+          this.chatEmojiPickerManager.opened
-      @onEditLastMessageRequested={{this.editLastMessageRequested}}
+          (eq this.chatEmojiPickerManager.context "chat-message")
-      @onValueChange={{action "composerValueChanged"}}
+        )
-      @chatChannel={{this.chatChannel}}
+        "-opened"
+      )
+    }}
+  ></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|}}
+        <ChatMessage
+          @message={{message}}
+          @canInteractWithChat={{this.canInteractWithChat}}
+          @channel={{@channel}}
+          @setReplyTo={{this.setReplyTo}}
+          @replyMessageClicked={{this.replyMessageClicked}}
+          @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)}}
+        <ChatSkeleton @onDestroy={{this.onDestroySkeleton}} />
+      {{/if}}
+    </div>
+
+    {{#if (and this.loadedOnce (not @channel.canLoadMorePast))}}
+      <div class="all-loaded-message">
+        {{i18n "chat.all_loaded"}}
+      </div>
+    {{/if}}
+  </div>
+
+  <ChatScrollToBottomArrow
+    @scrollToBottom={{this.scrollToBottom}}
+    @hasNewMessages={{this.hasNewMessages}}
+    @isAlmostDocked={{this.isAlmostDocked}}
+    @channel={{@channel}}
+  />
+
+  {{#if this.selectingMessages}}
+    <ChatSelectionManager
+      @selectedMessageIds={{this.selectedMessageIds}}
+      @chatChannel={{@channel}}
+      @cancelSelecting={{this.cancelSelecting}}
     />
   {{else}}
-    <ChatChannelPreviewCard @channel={{this.chatChannel}} />
+    {{#if (or @channel.isDraft @channel.isFollowing)}}
+      <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}}
-{{/if}}
+</div>

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 as |reaction|}}
+      {{#each @emojiReactions key="emoji" as |reaction|}}
         <ChatMessageReaction
           @reaction={{reaction}}
           @react={{@messageActions.react}}
-          @class="show"
+          @showCount={{false}}
         />
       {{/each}}
     {{/if}}

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

@@ -31,6 +31,7 @@ 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}}
-              @class="show"
+              @showCount={{false}}
             />
           {{/each}}
 

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

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

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

@@ -1,5 +0,0 @@
-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 this.cooked}}
+    {{html-safe @cooked}}
 
     <Collapser @header={{this.uploadsHeader}}>
       <div class="chat-uploads">
-        {{#each this.uploads as |upload|}}
+        {{#each @uploads as |upload|}}
           <ChatUpload @upload={{upload}} />
         {{/each}}
       </div>

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

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

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

@@ -0,0 +1,19 @@
+{{#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

@@ -0,0 +1,32 @@
+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.chat_webhook_event}}
+  {{#if @message.chatWebhookEvent}}
-    {{#if @message.chat_webhook_event.username}}
+    {{#if @message.chatWebhookEvent.username}}
       <span
         class={{concat-class
           "chat-message-info__username"
           this.usernameClasses
         }}
       >
-        {{@message.chat_webhook_event.username}}
+        {{@message.chatWebhookEvent.username}}
       </span>
     {{/if}}
 
@@ -49,8 +49,8 @@
 
   {{#if this.isFlagged}}
     <span class="chat-message-info__flag">
-      {{#if @message.reviewable_id}}
+      {{#if @message.reviewableId}}
-        <LinkTo @route="review.show" @model={{@message.reviewable_id}}>
+        <LinkTo @route="review.show" @model={{@message.reviewableId}}>
           {{d-icon "flag" title="chat.flagged"}}
         </LinkTo>
       {{else}}

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

@@ -48,10 +48,7 @@ export default class ChatMessageInfo extends Component {
   }
 
   get isFlagged() {
-    return (
+    return this.#message?.reviewableId || this.#message?.userFlagStatus === 0;
-      this.#message?.get("reviewable_id") ||
-      this.#message?.get("user_flag_status") === 0
-    );
   }
 
   get prioritizeName() {
@@ -66,7 +63,7 @@ export default class ChatMessageInfo extends Component {
   }
 
   get #user() {
-    return this.#message?.get("user");
+    return this.#message?.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.reviewable_id}}
+  {{#if @message.reviewableId}}
     <LinkTo
       @route="review.show"
-      @model={{@message.reviewable_id}}
+      @model={{@message.reviewableId}}
       class="chat-message-left-gutter__flag"
     >
       {{d-icon "flag" title="chat.flagged"}}
     </LinkTo>
-  {{else if (eq @message.user_flag_status 0)}}
+  {{else if (eq @message.userFlagStatus 0)}}
     <div class="chat-message-left-gutter__flag">
       {{d-icon "flag" title="chat.you_flagged"}}
     </div>
-  {{else}}
+  {{else if this.site.desktopView}}
     <span class="chat-message-left-gutter__date">
       {{format-chat-date @message "tiny"}}
     </span>

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

@@ -0,0 +1,6 @@
+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={{action "moveMessages"}}
+    @action={{this.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,17 +1,18 @@
-{{#if (and this.reaction this.emojiUrl)}}
+{{#if (and @reaction this.emojiUrl)}}
   <button
-    id={{this.componentId}}
     type="button"
-    {{on "click" (action "handleClick")}}
+    {{on "click" this.handleClick}}
     tabindex="0"
     class={{concat-class
-      this.class
       "chat-message-reaction"
-      (if this.reaction.reacted "reacted")
+      (if @reaction.reacted "reacted")
-      (if this.reaction.count "show")
     }}
-    data-emoji-name={{this.reaction.emoji}}
+    data-emoji-name={{@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"
@@ -22,8 +23,8 @@
       src={{this.emojiUrl}}
     />
 
-    {{#if this.reaction.count}}
+    {{#if (and this.showCount @reaction.count)}}
-      <span class="count">{{this.reaction.count}}</span>
+      <span class="count">{{@reaction.count}}</span>
     {{/if}}
   </button>
 {{/if}}

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

@@ -1,95 +1,73 @@
-import { guidFor } from "@ember/object/internals";
+import Component from "@glimmer/component";
-import Component from "@ember/component";
+import { action } from "@ember/object";
-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 {
-  reaction = null;
+  @service currentUser;
-  showUsersList = false;
-  tagName = "";
-  react = null;
-  class = null;
 
-  didReceiveAttrs() {
+  get showCount() {
-    this._super(...arguments);
+    return this.args.showCount ?? true;
+  }
 
-    if (this.showUsersList) {
+  @action
+  setupTooltip(element) {
+    if (this.args.showTooltip) {
       schedule("afterRender", () => {
-        this._popover?.destroy();
+        this._tippyInstance?.destroy();
-        this._popover = this._setupPopover();
+        this._tippyInstance = setupPopover(element, {
+          interactive: false,
+          allowHTML: true,
+          delay: 250,
+        });
       });
     }
   }
 
-  willDestroyElement() {
+  @action
-    this._super(...arguments);
+  teardownTooltip() {
-
+    this._tippyInstance?.destroy();
-    this._popover?.destroy();
   }
 
-  @computed
+  @action
-  get componentId() {
+  refreshTooltip() {
-    return guidFor(this);
+    this._tippyInstance?.setContent(this.popoverContent);
   }
 
-  @computed("reaction.emoji")
   get emojiString() {
-    return `:${this.reaction.emoji}:`;
+    return `:${this.args.reaction.emoji}:`;
   }
 
-  @computed("reaction.emoji")
   get emojiUrl() {
-    return emojiUrlFor(this.reaction.emoji);
+    return emojiUrlFor(this.args.reaction.emoji);
   }
 
   @action
   handleClick() {
-    this?.react(this.reaction.emoji, this.reaction.reacted ? "remove" : "add");
+    this.args.react?.(
+      this.args.reaction.emoji,
+      this.args.reaction.reacted ? "remove" : "add"
+    );
     return false;
   }
 
-  _setupPopover() {
+  get popoverContent() {
-    const target = document.getElementById(this.componentId);
+    if (!this.args.reaction.count || !this.args.reaction.users?.length) {
-
-    if (!target) {
       return;
     }
 
-    const popover = setupPopover(target, {
+    return emojiUnescape(
-      interactive: false,
+      this.args.reaction.reacted
-      allowHTML: true,
+        ? this.#reactionTextWithSelf
-      delay: 250,
+        : this.#reactionText
-      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;
   }
 
-  @computed("reaction")
+  get #reactionTextWithSelf() {
-  get popoverContent() {
+    const reactionCount = this.args.reaction.count;
-    return this.reaction.reacted
-      ? this._reactionTextWithSelf()
-      : this._reactionText();
-  }
-
-  _reactionTextWithSelf() {
-    const reactionCount = this.reaction.count;
 
     if (reactionCount === 0) {
       return;
@@ -97,55 +75,55 @@ export default class ChatMessageReaction extends Component {
 
     if (reactionCount === 1) {
       return I18n.t("chat.reactions.only_you", {
-        emoji: this.reaction.emoji,
+        emoji: this.args.reaction.emoji,
       });
     }
 
-    const maxUsernames = 4;
+    const maxUsernames = 5;
-    const usernames = this.reaction.users
+    const usernames = this.args.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.reaction.emoji,
+        emoji: this.args.reaction.emoji,
         username: usernames.pop(),
       });
     }
 
-    // `-1` because the current user ("you") isn't included in `usernames`
+    const unnamedUserCount = reactionCount - usernames.length;
-    const unnamedUserCount = reactionCount - usernames.length - 1;
-
     if (unnamedUserCount > 0) {
       return I18n.t("chat.reactions.you_multiple_users_and_more", {
-        emoji: this.reaction.emoji,
+        emoji: this.args.reaction.emoji,
         commaSeparatedUsernames: this._joinUsernames(usernames),
         count: unnamedUserCount,
       });
     }
 
     return I18n.t("chat.reactions.you_and_multiple_users", {
-      emoji: this.reaction.emoji,
+      emoji: this.args.reaction.emoji,
       username: usernames.pop(),
       commaSeparatedUsernames: this._joinUsernames(usernames),
     });
   }
 
-  _reactionText() {
+  get #reactionText() {
-    const reactionCount = this.reaction.count;
+    const reactionCount = this.args.reaction.count;
 
     if (reactionCount === 0) {
       return;
     }
 
     const maxUsernames = 5;
-    const usernames = this.reaction.users
+    const usernames = this.args.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.reaction.emoji,
+        emoji: this.args.reaction.emoji,
         username: usernames.pop(),
       });
     }
@@ -154,14 +132,14 @@ export default class ChatMessageReaction extends Component {
 
     if (unnamedUserCount > 0) {
       return I18n.t("chat.reactions.multiple_users_and_more", {
-        emoji: this.reaction.emoji,
+        emoji: this.args.reaction.emoji,
         commaSeparatedUsernames: this._joinUsernames(usernames),
         count: unnamedUserCount,
       });
     }
 
     return I18n.t("chat.reactions.multiple_users", {
-      emoji: this.reaction.emoji,
+      emoji: this.args.reaction.emoji,
       username: usernames.pop(),
       commaSeparatedUsernames: this._joinUsernames(usernames),
     });

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

@@ -0,0 +1,26 @@
+{{#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

@@ -0,0 +1,13 @@
+{{#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

@@ -1,15 +0,0 @@
-{{#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

@@ -1,5 +0,0 @@
-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={{this.cooked}} @uploads={{this.uploads}} />
+    <ChatMessageCollapser @cooked={{@cooked}} @uploads={{@uploads}} />
   {{else}}
-    {{html-safe this.cooked}}
+    {{html-safe @cooked}}
   {{/if}}
 
-  {{#if this.edited}}
+  {{#if this.isEdited}}
     <span class="chat-message-edited">({{i18n "chat.edited"}})</span>
   {{/if}}
 

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

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

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

@@ -1,6 +1,7 @@
 {{! template-lint-disable no-invalid-interactive }}
 
-<ChatMessageSeparator @message={{@message}} />
+<ChatMessageSeparatorDate @message={{@message}} />
+<ChatMessageSeparatorNew @message={{@message}} />
 
 {{#if
   (and
@@ -40,19 +41,22 @@
   {{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={{or @message.id @message.stagedId}}
+  data-id={{@message.id}}
   data-staged-id={{if @message.staged @message.stagedId}}
+  {{chat/track-message
+    (fn @didShowMessage @message)
+    (fn @didHideMessage @message)
+  }}
 >
   {{#if this.show}}
     {{#if @selectingMessages}}
@@ -85,35 +89,17 @@
         class={{concat-class
           "chat-message"
           (if @message.staged "chat-message-staged")
-          (if @message.deleted_at "deleted")
+          (if @message.deletedAt "deleted")
-          (if @message.in_reply_to "is-reply")
+          (if (and @message.inReplyTo (not this.hideReplyToInfo)) "is-reply")
           (if this.hideUserInfo "user-info-hidden")
           (if @message.error "errored")
           (if @message.bookmark "chat-message-bookmarked")
           (if @isHovered "chat-message-selected")
         }}
       >
-        {{#if @message.in_reply_to}}
+        {{#unless this.hideReplyToInfo}}
-          <div
+          <ChatMessageInReplyToIndicator @message={{@message}} />
-            role="button"
+        {{/unless}}
-            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}} />
@@ -131,7 +117,7 @@
             @uploads={{@message.uploads}}
             @edited={{@message.edited}}
           >
-            {{#if this.hasReactions}}
+            {{#if @message.reactions.length}}
               <div class="chat-message-reaction-list">
                 {{#if this.reactionLabel}}
                   <div class="reaction-users-list">
@@ -139,18 +125,13 @@
                   </div>
                 {{/if}}
 
-                {{#each-in @message.reactions as |emoji reactionAttrs|}}
+                {{#each @message.reactions as |reaction|}}
                   <ChatMessageReaction
-                    @reaction={{hash
+                    @reaction={{reaction}}
-                      emoji=emoji
-                      users=reactionAttrs.users
-                      count=reactionAttrs.count
-                      reacted=reactionAttrs.reacted
-                    }}
                     @react={{this.react}}
-                    @showUsersList={{true}}
+                    @showTooltip={{true}}
                   />
-                {{/each-in}}
+                {{/each}}
 
                 {{#if @canInteractWithChat}}
                   {{#unless this.site.mobileView}}
@@ -189,7 +170,7 @@
 
           {{#if this.mentionWarning}}
             <div class="alert alert-info chat-message-mention-warning">
-              {{#if this.mentionWarning.invitationSent}}
+              {{#if this.mentionWarning.invitation_sent}}
                 {{d-icon "check"}}
                 <span>
                   {{i18n

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

@@ -5,8 +5,7 @@ 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 { bind } from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
-import EmberObject, { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import { cancel, schedule } from "@ember/runloop";
 import { clipboardCopy } from "discourse/lib/utilities";
@@ -18,6 +17,7 @@ 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,37 +50,24 @@ 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?.get("deleted_at") && this.collapsed;
+    return this.args.message?.deletedAt && this.collapsed;
   }
 
   get hiddenAndCollapsed() {
-    return this.args.message?.get("hidden") && this.collapsed;
+    return this.args.message?.hidden && this.collapsed;
   }
 
   get collapsed() {
-    return !this.args.message?.get("expanded");
+    return !this.args.message?.expanded;
   }
 
   @action
@@ -97,32 +84,9 @@ 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", () => {
@@ -131,45 +95,29 @@ export default class ChatMessage extends Component {
       }
 
       _chatMessageDecorators.forEach((decorator) => {
-        decorator.call(this, this.messageContainer, this.args.chatChannel);
+        decorator.call(this, this.messageContainer, this.args.channel);
       });
     });
   }
 
   get messageContainer() {
-    const id = this.args.message?.id || this.args.message?.stagedId;
+    const id = this.args.message?.id;
-    return (
+    if (id) {
-      id && document.querySelector(`.chat-message-container[data-id='${id}']`)
+      return document.querySelector(`.chat-message-container[data-id='${id}']`);
-    );
-  }
-
-  _subscribeToAppEvents() {
-    if (!this.args.message.id || this._hasSubscribedToAppEvents) {
-      return;
     }
 
-    this.appEvents.on("chat:refresh-message", this, "_refreshedMessage");
+    const stagedId = this.args.message?.stagedId;
-
+    if (stagedId) {
-    this.appEvents.on(
+      return document.querySelector(
-      `chat-message-${this.args.message.id}:reaction`,
+        `.chat-message-container[data-staged-id='${stagedId}']`
-      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?.get("staged") &&
+      !this.args.message?.staged &&
       this.args.isHovered
     );
   }
@@ -270,17 +218,16 @@ export default class ChatMessage extends Component {
 
   get hasThread() {
     return (
-      this.args.chatChannel?.get("threading_enabled") &&
+      this.args.channel?.get("threading_enabled") && this.args.message?.threadId
-      this.args.message?.get("thread_id")
     );
   }
 
   get show() {
     return (
-      !this.args.message?.get("deleted_at") ||
+      !this.args.message?.deletedAt ||
-      this.currentUser.id === this.args.message?.get("user.id") ||
+      this.currentUser.id === this.args.message?.user?.id ||
       this.currentUser.staff ||
-      this.args.details?.can_moderate
+      this.args.channel?.canModerate
     );
   }
 
@@ -331,83 +278,97 @@ export default class ChatMessage extends Component {
 
   get hideUserInfo() {
     return (
-      this.args.message?.get("hideUserInfo") &&
+      !this.args.message?.chatWebhookEvent &&
-      !this.args.message?.get("chat_webhook_event")
+      !this.args.message?.inReplyTo &&
+      !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?.get("deleted_at") &&
+      !this.args.message?.deletedAt &&
-      this.currentUser?.id === this.args.message?.get("user.id") &&
+      this.currentUser?.id === this.args.message?.user?.id &&
-      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
+      this.args.channel?.canModifyMessages?.(this.currentUser)
     );
   }
+
   get canFlagMessage() {
     return (
-      this.currentUser?.id !== this.args.message?.get("user.id") &&
+      this.currentUser?.id !== this.args.message?.user?.id &&
-      this.args.message?.get("user_flag_status") === undefined &&
+      !this.args.channel?.isDirectMessageChannel &&
-      this.args.details?.can_flag &&
+      this.args.message?.userFlagStatus === undefined &&
-      !this.args.message?.get("chat_webhook_event") &&
+      this.args.channel?.canFlag &&
-      !this.args.message?.get("deleted_at")
+      !this.args.message?.chatWebhookEvent &&
+      !this.args.message?.deletedAt
     );
   }
 
   get canManageDeletion() {
-    return this.currentUser?.id === this.args.message.get("user.id")
+    return this.currentUser?.id === this.args.message.user.id
-      ? this.args.details?.can_delete_self
+      ? this.args.channel?.canDeleteSelf
-      : this.args.details?.can_delete_others;
+      : this.args.channel?.canDeleteOthers;
   }
 
   get canReply() {
     return (
-      !this.args.message?.get("deleted_at") &&
+      !this.args.message?.deletedAt &&
-      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
+      this.args.channel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get canReact() {
     return (
-      !this.args.message?.get("deleted_at") &&
+      !this.args.message?.deletedAt &&
-      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
+      this.args.channel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get showDeleteButton() {
     return (
       this.canManageDeletion &&
-      !this.args.message?.get("deleted_at") &&
+      !this.args.message?.deletedAt &&
-      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
+      this.args.channel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get showRestoreButton() {
     return (
       this.canManageDeletion &&
-      this.args.message?.get("deleted_at") &&
+      this.args.message?.deletedAt &&
-      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
+      this.args.channel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get showBookmarkButton() {
-    return this.args.chatChannel?.canModifyMessages?.(this.currentUser);
+    return this.args.channel?.canModifyMessages?.(this.currentUser);
   }
 
   get showRebakeButton() {
     return (
       this.currentUser?.staff &&
-      this.args.chatChannel?.canModifyMessages?.(this.currentUser)
+      this.args.channel?.canModifyMessages?.(this.currentUser)
     );
   }
 
   get hasReactions() {
-    return Object.values(this.args.message.get("reactions")).some(
+    return Object.values(this.args.message.reactions).some((r) => r.count > 0);
-      (r) => r.count > 0
-    );
   }
 
   get mentionWarning() {
-    return this.args.message.get("mentionWarning");
+    return this.args.message.mentionWarning;
   }
 
   get mentionedCannotSeeText() {
@@ -464,13 +425,13 @@ export default class ChatMessage extends Component {
   inviteMentioned() {
     const userIds = this.mentionWarning.without_membership.mapBy("id");
 
-    ajax(`/chat/${this.args.message.chat_channel_id}/invite`, {
+    ajax(`/chat/${this.args.message.channelId}/invite`, {
       method: "PUT",
       data: { user_ids: userIds, chat_message_id: this.args.message.id },
     }).then(() => {
-      this.args.message.set("mentionWarning.invitationSent", true);
+      this.args.message.mentionWarning.set("invitationSent", true);
       this._invitationSentTimer = discourseLater(() => {
-        this.args.message.set("mentionWarning", null);
+        this.dismissMentionWarning();
       }, 3000);
     });
 
@@ -479,7 +440,7 @@ export default class ChatMessage extends Component {
 
   @action
   dismissMentionWarning() {
-    this.args.message.set("mentionWarning", null);
+    this.args.message.mentionWarning = null;
   }
 
   @action
@@ -517,27 +478,17 @@ 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 (
+    if (!this.args.canInteractWithChat) {
-      !this.args.canInteractWithChat ||
+      return;
-      this._loadingReactions.includes(emoji)
+    }
-    ) {
+
+    if (this.reacting) {
       return;
     }
 
@@ -549,71 +500,21 @@ 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}:`);
     }
 
-    return this._publishReaction(emoji, reactAction).then(() => {
+    this.reacting = true;
-      // 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);
-          });
-      }
-    });
-  }
 
-  _updateReactionsList(emoji, reactAction, user) {
+    this.args.message.react(
-    const selfReacted = this.currentUser.id === user.id;
+      emoji,
-    if (this.args.message.reactions[emoji]) {
+      reactAction,
-      if (
+      this.currentUser,
-        selfReacted &&
+      this.currentUser.id
-        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.chat_channel_id}/react/${this.args.message.id}`,
+      `/chat/${this.args.message.channelId}/react/${this.args.message.id}`,
       {
         type: "PUT",
         data: {
@@ -621,10 +522,19 @@ export default class ChatMessage extends Component {
           emoji,
         },
       }
-    ).catch((errResult) => {
+    )
-      popupAjaxError(errResult);
+      .catch((errResult) => {
-      this._updateReactionsList(emoji, REACTIONS.remove, this.currentUser);
+        popupAjaxError(errResult);
-    });
+        this.args.message.react(
+          emoji,
+          REACTIONS.remove,
+          this.currentUser,
+          this.currentUser.id
+        );
+      })
+      .finally(() => {
+        this.reacting = false;
+      });
   }
 
   // TODO(roman): For backwards-compatibility.
@@ -651,17 +561,6 @@ 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);
@@ -673,12 +572,11 @@ export default class ChatMessage extends Component {
       requirejs.entries["discourse/lib/flag-targets/flag"];
 
     if (targetFlagSupported) {
-      const model = EmberObject.create(this.args.message);
+      const model = this.args.message;
-      model.set("username", model.get("user.username"));
+      model.username = model.user?.username;
-      model.set("user_id", model.get("user.id"));
+      model.user_id = model.user?.id;
       let controller = showModal("flag", { model });
-
+      controller.set("flagTarget", new ChatMessageFlag());
-      controller.setProperties({ flagTarget: new ChatMessageFlag() });
     } else {
       this._legacyFlag();
     }
@@ -686,13 +584,13 @@ export default class ChatMessage extends Component {
 
   @action
   expand() {
-    this.args.message.set("expanded", true);
+    this.args.message.expanded = true;
   }
 
   @action
   restore() {
     return ajax(
-      `/chat/${this.args.message.chat_channel_id}/restore/${this.args.message.id}`,
+      `/chat/${this.args.message.channelId}/restore/${this.args.message.id}`,
       {
         type: "PUT",
       }
@@ -701,10 +599,7 @@ export default class ChatMessage extends Component {
 
   @action
   openThread() {
-    this.router.transitionTo(
+    this.router.transitionTo("chat.channel.thread", this.args.message.threadId);
-      "chat.channel.thread",
-      this.args.message.thread_id
-    );
   }
 
   @action
@@ -719,7 +614,7 @@ export default class ChatMessage extends Component {
       {
         onAfterSave: (savedData) => {
           const bookmark = Bookmark.create(savedData);
-          this.args.message.set("bookmark", bookmark);
+          this.args.message.bookmark = bookmark;
           this.appEvents.trigger(
             "bookmarks:changed",
             savedData,
@@ -727,7 +622,7 @@ export default class ChatMessage extends Component {
           );
         },
         onAfterDelete: () => {
-          this.args.message.set("bookmark", null);
+          this.args.message.bookmark = null;
         },
       }
     );
@@ -736,7 +631,7 @@ export default class ChatMessage extends Component {
   @action
   rebakeMessage() {
     return ajax(
-      `/chat/${this.args.message.chat_channel_id}/${this.args.message.id}/rebake`,
+      `/chat/${this.args.message.channelId}/${this.args.message.id}/rebake`,
       {
         type: "PUT",
       }
@@ -746,7 +641,7 @@ export default class ChatMessage extends Component {
   @action
   deleteMessage() {
     return ajax(
-      `/chat/${this.args.message.chat_channel_id}/${this.args.message.id}`,
+      `/chat/${this.args.message.channelId}/${this.args.message.id}`,
       {
         type: "DELETE",
       }
@@ -755,7 +650,7 @@ export default class ChatMessage extends Component {
 
   @action
   selectMessage() {
-    this.args.message.set("selected", true);
+    this.args.message.selected = true;
     this.args.onStartSelectingMessages(this.args.message);
   }
 
@@ -780,7 +675,7 @@ export default class ChatMessage extends Component {
 
     const { protocol, host } = window.location;
     let url = getURL(
-      `/chat/c/-/${this.args.message.chat_channel_id}/${this.args.message.id}`
+      `/chat/c/-/${this.args.message.channelId}/${this.args.message.id}`
     );
     url = url.indexOf("/") === 0 ? protocol + "//" + host + url : url;
     clipboardCopy(url);
@@ -793,25 +688,22 @@ export default class ChatMessage extends Component {
   }
 
   get emojiReactions() {
-    const favorites = this.cachedFavoritesReactions;
+    let 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) => {
-      if (userReactions.includes(emoji)) {
+      return (
-        return { emoji, reacted: true };
+        this.args.message.reactions.find(
-      } else {
+          (reaction) => reaction.emoji === emoji
-        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={{this.chatChannel}} />
+    <ChatRetentionReminderText @channel={{@channel}} />
     <DButton
       @class="btn-flat dismiss-btn"
       @action={{this.dismiss}}

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

@@ -1,39 +1,34 @@
-import Component from "@ember/component";
+import Component from "@glimmer/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 Component.extend({
+export default class ChatRetentionReminder extends Component {
-  tagName: "",
+  @service currentUser;
-  loading: false,
 
-  @discourseComputed(
+  get show() {
-    "chatChannel.chatable_type",
-    "currentUser.{needs_dm_retention_reminder,needs_channel_retention_reminder}"
-  )
-  show() {
     return (
-      !this.chatChannel.isDraft &&
+      !this.args.channel?.isDraft &&
-      ((this.chatChannel.isDirectMessageChannel &&
+      ((this.args.channel?.isDirectMessageChannel &&
-        this.currentUser.needs_dm_retention_reminder) ||
+        this.currentUser?.needs_dm_retention_reminder) ||
-        (this.chatChannel.isCategoryChannel &&
+        (this.args.channel?.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.chatChannel.chatable_type },
+      data: { chatable_type: this.args.channel.chatableType },
     })
       .then(() => {
-        const field = this.chatChannel.isDirectMessageChannel
+        const field = this.args.channel.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

@@ -0,0 +1,23 @@
+<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,16 +19,17 @@ 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", "canModerate")
+  @computed("chatChannel.isDirectMessageChannel", "chatChannel.canModerate")
   get showMoveMessageButton() {
-    return !this.chatChannel.isDirectMessageChannel && this.canModerate;
+    return (
+      !this.chatChannel.isDirectMessageChannel && this.chatChannel.canModerate
+    );
   }
 
   @bind

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

@@ -1,13 +1,31 @@
-<div class="chat-skeleton -animation">
+<div
-  {{#each this.placeholders as |rows|}}
+  class="chat-skeleton -animation"
+  {{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">
-          {{#each rows as |row|}}
+          {{#if placeholder.image}}
-            <div class="chat-skeleton__message-msg" style={{row}}></div>
+            <div class="chat-skeleton__message-img"></div>
-          {{/each}}
+          {{/if}}
+
+          <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,9 +4,13 @@ import { htmlSafe } from "@ember/template";
 export default class ChatSkeleton extends Component {
   get placeholders() {
     return Array.from({ length: 15 }, () => {
-      return Array.from({ length: this.#randomIntFromInterval(1, 5) }, () => {
+      return {
-        return htmlSafe(`width: ${this.#randomIntFromInterval(20, 95)}%`);
+        image: this.#randomIntFromInterval(1, 10) === 5,
-      });
+        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,7 +1,6 @@
 {{#if this.chat.activeChannel}}
   <ChatLivePane
-    @chatChannel={{this.chat.activeChannel}}
+    @channel={{this.chat.activeChannel}}
-    @onBackClick={{action "navigateToIndex"}}
     @targetMessageId={{readonly @targetMessageId}}
   />
 {{/if}}

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

@@ -1,79 +1,6 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
-import { bind } from "discourse-common/utils/decorators";
-import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 
-export default Component.extend({
+export default class FullPageChat extends Component {
-  tagName: "",
+  @service chat;
-  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,10 +1,11 @@
 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;
 
-  targetMessageId = null;
+  @tracked targetMessageId = null;
 
   // Backwards-compatibility
   queryParams = ["messageId"];

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

@@ -36,6 +36,7 @@ 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;
@@ -153,6 +154,8 @@ 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) => {
@@ -194,6 +197,9 @@ 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.created_at), tz);
+  const date = moment(new Date(message.createdAt), tz);
-  const url = getURL(`/chat/c/-/${message.chat_channel_id}/${message.id}`);
+  const url = getURL(`/chat/c/-/${message.channelId}/${message.id}`);
   const title = date.format(I18n.t("dates.long_with_year"));
 
   const display =

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

@@ -0,0 +1,32 @@
+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,6 +10,7 @@ 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");
@@ -19,6 +20,7 @@ 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.available_flags.includes(flag.name_key);
+      return model.availableFlags.includes(flag.name_key);
     });
 
     // "message user" option should be at the top

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

@@ -7,6 +7,7 @@ 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",
@@ -54,6 +55,16 @@ 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));
 
@@ -74,11 +85,11 @@ export default class ChatChannel extends RestModel {
   }
 
   get isDirectMessageChannel() {
-    return this.chatable_type === CHATABLE_TYPES.directMessageChannel;
+    return this.chatableType === CHATABLE_TYPES.directMessageChannel;
   }
 
   get isCategoryChannel() {
-    return this.chatable_type === CHATABLE_TYPES.categoryChannel;
+    return this.chatableType === CHATABLE_TYPES.categoryChannel;
   }
 
   get isOpen() {
@@ -105,6 +116,57 @@ 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);
@@ -127,6 +189,10 @@ 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(() => {
@@ -142,12 +208,17 @@ ChatChannel.reopenClass({
     this._initUserModels(args);
     this._initUserMembership(args);
 
-    args.chatableType = args.chatable_type;
+    this._remapKey(args, "chatable_type", "chatableType");
-    args.membershipsCount = args.memberships_count;
+    this._remapKey(args, "memberships_count", "membershipsCount");
+    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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,33 @@
+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,26 +1,193 @@
-import RestModel from "discourse/models/rest";
 import User from "discourse/models/user";
-import EmberObject from "@ember/object";
+import { cached, tracked } from "@glimmer/tracking";
+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 extends RestModel {}
+export default class ChatMessage {
+  static cookFunction = null;
 
-ChatMessage.reopenClass({
+  static create(channel, args = {}) {
-  create(args = {}) {
+    return new ChatMessage(channel, args);
-    this._initReactions(args);
+  }
-    this._initUserModel(args);
 
-    return this._super(args);
+  static createStagedMessage(channel, args = {}) {
-  },
+    args.staged_id = guid();
+    return new ChatMessage(channel, args);
+  }
 
-  _initReactions(args) {
+  @tracked id;
-    args.reactions = EmberObject.create(args.reactions || {});
+  @tracked error;
-  },
+  @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;
 
-  _initUserModel(args) {
+  constructor(channel, args = {}) {
-    if (!args.user || args.user instanceof User) {
+    this.channel = channel;
-      return;
+    this.id = args.id;
+    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);
     }
 
-    args.user = User.create(args.user);
+    if (
-  },
+      !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

@@ -0,0 +1,35 @@
+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

@@ -1,23 +0,0 @@
-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

@@ -0,0 +1,43 @@
+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,6 +10,10 @@ 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,6 +233,39 @@ 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,6 +42,14 @@ 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;
   }
 
@@ -138,8 +146,7 @@ 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.get("last_message_sent_at")) >
+        return new Date(a.lastMessageSentAt) > new Date(b.lastMessageSentAt)
-          new Date(b.get("last_message_sent_at"))
           ? -1
           : 1;
       } else {

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

@@ -1,63 +0,0 @@
-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.set("last_message_sent_at", new Date());
+      channel.lastMessageSentAt = new Date();
     });
   }
 
@@ -185,13 +185,14 @@ 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 ||
-        busData.chat_message_id
+        parseInt(channel?.currentUserMembership?.last_read_message_id, 10) <=
+          busData.chat_message_id
       ) {
         channel.currentUserMembership.last_read_message_id =
           busData.chat_message_id;
-        channel.currentUserMembership.unread_count = 0;
+        channel.currentUserMembership.unread_count = busData.unread_count;
-        channel.currentUserMembership.unread_mentions = 0;
+        channel.currentUserMembership.unread_mentions = busData.unread_mentions;
       }
     });
   }

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

@@ -3,29 +3,18 @@ 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 userPresent from "discourse/lib/user-presence";
+import ChatMessageDraft from "discourse/plugins/chat/discourse/models/chat-message-draft";
-
-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;
@@ -64,13 +53,6 @@ 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);
-        });
-      }
     }
   }
 
@@ -103,6 +85,16 @@ 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);
       }
     );
@@ -116,33 +108,6 @@ 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) {
@@ -277,10 +242,6 @@ 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);
   }
@@ -327,84 +288,6 @@ 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,7 +54,12 @@
     />
 
     {{#if this.categoryPermissionsHint}}
-      <div class="create-channel-hint">
+      <div
+        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,6 +5,7 @@
   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,6 +1,8 @@
 .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,10 +6,6 @@
 .chat-message-actions {
   .chat-message-reaction {
     @include chat-reaction;
-
-    &:not(.show) {
-      display: none;
-    }
   }
 }
 

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

@@ -1,42 +1,96 @@
 .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-message {
+  &-new {
-    color: var(--danger-medium);
+    position: relative;
+    padding: 20px 0;
 
-    .divider {
+    .chat-message-separator__text-container {
-      background-color: var(--danger-medium);
+      text-align: center;
+      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);
+      }
     }
   }
 
-  &.first-daily-message {
+  &-date {
-    .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%;
-    height: 1px;
+    z-index: 1;
-    top: 50%;
+    display: flex;
+    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,6 +42,10 @@
       background: var(--primary-low);
       border-color: var(--primary-low-mid);
     }
+
+    &:focus {
+      background: none;
+    }
   }
 
   .emoji {
@@ -57,13 +61,11 @@
   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 {
@@ -86,17 +88,6 @@
     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;
@@ -254,6 +245,10 @@
 
   .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 {
@@ -284,7 +279,6 @@
   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: 10px;
+$radius: 3px;
 
 .chat-skeleton {
   height: auto;
@@ -55,11 +55,35 @@ $radius: 10px;
   &__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: 5px 0;
+    margin: 2px 0;
 
     .chat-skeleton__body:nth-of-type(odd) & {
       background-color: var(--primary-100);
@@ -69,6 +93,14 @@ $radius: 10px;
     }
   }
 
+  &__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;
@@ -78,7 +110,7 @@ $radius: 10px;
     position: relative;
     overflow: hidden;
 
-    *[class^="chat-skeleton__message-"]:not(.chat-skeleton__message-content):after {
+    *[class^="chat-skeleton__message-"]:not(.chat-skeleton__message-content):not(.chat-skeleton__message-text):not(.chat-skeleton__message-reactions):after {
       position: absolute;
       top: 0;
       right: 0;

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

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

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

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

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

@@ -53,6 +53,25 @@
 
 .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,6 +22,8 @@
     border-radius: 8px;
 
     .selected-message-reply {
+      margin-left: 5px;
+
       &:not(.is-expanded) {
         @include ellipsis;
       }

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

@@ -4,7 +4,3 @@
 .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"
-      new_messages: "new messages"
+      last_visit: "last visit"
       mention_warning:
         dismiss: "dismiss"
         cannot_see: "%{username} can't access this channel and was not notified."

plugins/chat/plugin.rb

@@ -247,6 +247,7 @@ 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_1)).to eq([])
+          expect(described_class.call(channel: channel_1)).to eq([])
         end
       end
 
@@ -28,7 +28,7 @@ describe ChatChannelMembershipsQuery do
         end
 
         it "returns the memberships" do
-          memberships = described_class.call(channel_1)
+          memberships = described_class.call(channel: 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_1)
+            memberships = described_class.call(channel: channel_1)
 
             expect(memberships.pluck(:user_id)).to include(user_1.id)
           end
@@ -62,14 +62,16 @@ describe ChatChannelMembershipsQuery do
               permission_type: CategoryGroup.permission_types[:full],
             )
 
-            expect(described_class.call(channel_1).pluck(:user_id)).to contain_exactly(user_1.id)
+            expect(described_class.call(channel: channel_1).pluck(:user_id)).to contain_exactly(
+              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_1)
+            memberships = described_class.call(channel: channel_1)
 
             expect(memberships.pluck(:user_id)).to include(user_1.id)
           end
@@ -77,7 +79,7 @@ describe ChatChannelMembershipsQuery do
 
         context "when membership doesn’t exist" do
           it "doesn’t list the user" do
-            memberships = described_class.call(channel_1)
+            memberships = described_class.call(channel: channel_1)
 
             expect(memberships.pluck(:user_id)).to be_empty
           end
@@ -91,7 +93,7 @@ describe ChatChannelMembershipsQuery do
           end
 
           it "doesn’t list the user" do
-            memberships = described_class.call(channel_1)
+            memberships = described_class.call(channel: channel_1)
 
             expect(memberships).to be_empty
           end
@@ -99,7 +101,7 @@ describe ChatChannelMembershipsQuery do
 
         context "when membership doesn’t exist" do
           it "doesn’t list the user" do
-            memberships = described_class.call(channel_1)
+            memberships = described_class.call(channel: channel_1)
 
             expect(memberships).to be_empty
           end
@@ -114,7 +116,7 @@ describe ChatChannelMembershipsQuery do
         end
 
         it "returns an empty array" do
-          expect(described_class.call(channel_1)).to eq([])
+          expect(described_class.call(channel: channel_1)).to eq([])
         end
       end
 
@@ -122,7 +124,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_1)
+          memberships = described_class.call(channel: channel_1)
 
           expect(memberships.pluck(:user_id)).to contain_exactly(user_1.id, user_2.id)
         end
@@ -139,7 +141,7 @@ describe ChatChannelMembershipsQuery do
 
       describe "offset param" do
         it "offsets the results" do
-          memberships = described_class.call(channel_1, offset: 1)
+          memberships = described_class.call(channel: channel_1, offset: 1)
 
           expect(memberships.length).to eq(1)
         end
@@ -147,7 +149,7 @@ describe ChatChannelMembershipsQuery do
 
       describe "limit param" do
         it "limits the results" do
-          memberships = described_class.call(channel_1, limit: 1)
+          memberships = described_class.call(channel: channel_1, limit: 1)
 
           expect(memberships.length).to eq(1)
         end
@@ -163,7 +165,7 @@ describe ChatChannelMembershipsQuery do
       end
 
       it "filters the results" do
-        memberships = described_class.call(channel_1, username: user_1.username)
+        memberships = described_class.call(channel: channel_1, username: user_1.username)
 
         expect(memberships.length).to eq(1)
         expect(memberships[0].user).to eq(user_1)
@@ -182,7 +184,7 @@ describe ChatChannelMembershipsQuery do
         before { SiteSetting.prioritize_username_in_ux = true }
 
         it "is using ascending order on username" do
-          memberships = described_class.call(channel_1)
+          memberships = described_class.call(channel: channel_1)
 
           expect(memberships[0].user).to eq(user_1)
           expect(memberships[1].user).to eq(user_2)
@@ -193,7 +195,7 @@ describe ChatChannelMembershipsQuery do
         before { SiteSetting.prioritize_username_in_ux = false }
 
         it "is using ascending order on name" do
-          memberships = described_class.call(channel_1)
+          memberships = described_class.call(channel: channel_1)
 
           expect(memberships[0].user).to eq(user_2)
           expect(memberships[1].user).to eq(user_1)
@@ -203,7 +205,7 @@ describe ChatChannelMembershipsQuery do
           before { SiteSetting.enable_names = false }
 
           it "is using ascending order on username" do
-            memberships = described_class.call(channel_1)
+            memberships = described_class.call(channel: channel_1)
 
             expect(memberships[0].user).to eq(user_1)
             expect(memberships[1].user).to eq(user_2)
@@ -222,7 +224,7 @@ describe ChatChannelMembershipsQuery do
     end
 
     it "doesn’t list staged users" do
-      memberships = described_class.call(channel_1)
+      memberships = described_class.call(channel: channel_1)
       expect(memberships).to be_blank
     end
   end
@@ -242,7 +244,7 @@ describe ChatChannelMembershipsQuery do
     end
 
     it "doesn’t list suspended users" do
-      memberships = described_class.call(channel_1)
+      memberships = described_class.call(channel: channel_1)
       expect(memberships).to be_blank
     end
   end
@@ -260,7 +262,7 @@ describe ChatChannelMembershipsQuery do
     end
 
     it "doesn’t list inactive users" do
-      memberships = described_class.call(channel_1)
+      memberships = described_class.call(channel: channel_1)
       expect(memberships).to be_blank
     end
   end

plugins/chat/spec/queries/chat_channel_unreads_query_spec.rb

@@ -0,0 +1,51 @@
+# 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,15 +126,17 @@ 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"]
-      expect(reactions[heart_emoji]["reacted"]).to be true
+      heart_reaction = reactions.find { |r| r["emoji"] == heart_emoji }
-      expect(reactions[smile_emoji]["reacted"]).to be false
+      expect(heart_reaction["reacted"]).to be true
+      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,12 +21,14 @@ describe ChatMessageSerializer do
       it "doesn’t return the reaction" do
         Emoji.clear_cache
 
-        expect(subject.as_json[:reactions]["trout"]).to be_present
+        trout_reaction = subject.as_json[:reactions].find { |r| r[:emoji] == "trout" }
+        expect(trout_reaction).to be_present
 
         custom_emoji.destroy!
         Emoji.clear_cache
 
-        expect(subject.as_json[:reactions]["trout"]).to_not be_present
+        trout_reaction = subject.as_json[:reactions].find { |r| r[:emoji] == "trout" }
+        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(".first-daily-message", text: "Today")
+      expect(page).to have_selector(".chat-message-separator__text", text: "Today")
     end
   end
 

plugins/chat/spec/system/create_channel_spec.rb

@@ -81,6 +81,7 @@ 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, user: current_user) }
+    fab!(:message_1) { Fabricate(:chat_message, chat_channel: dm_channel_1) }
 
     it "doesn’t allow to flag a message" do
       chat.visit_channel(dm_channel_1)

plugins/chat/spec/system/message_user_info.rb

@@ -0,0 +1,60 @@
+# 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,8 +60,9 @@ 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_link(I18n.t("js.chat.scroll_to_bottom"))
+        click_button(class: "chat-scroll-to-bottom")
         click_link(link)
 
         expect(page).to have_css(
@@ -149,8 +150,9 @@ 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_link(I18n.t("js.chat.scroll_to_bottom"))
+        click_button(class: "chat-scroll-to-bottom")
         click_link(link)
 
         expect(page).to have_css(