IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-01 21:19:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit 67c0498f64.
This commit is contained in:
Joffrey JAFFEUX 2023-03-02 16:59:11 +01:00 committed by GitHub
parent e52bbc1230
commit 31480bde92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
118 changed files with 2329 additions and 2590 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/chat/app/controllers/api/chat_channels_memberships_controller.rb
View File

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

2
plugins/chat/app/models/chat_message.rb
View File

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

4
plugins/chat/app/queries/chat_channel_memberships_query.rb
View File

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

40
plugins/chat/app/queries/chat_channel_unreads_query.rb
View File

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

1
plugins/chat/app/serializers/chat_channel_serializer.rb
View File

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

12
plugins/chat/app/serializers/chat_message_serializer.rb
View File

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

1
plugins/chat/app/serializers/chat_view_serializer.rb
View File

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

8
plugins/chat/app/services/chat_publisher.rb
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7
plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.js Normal file
View File

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

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

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

6
plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
View File

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

17
plugins/chat/assets/javascripts/discourse/components/chat-composer.js
View File

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,30 +1,49 @@
<div
class={{concat-class
"chat-live-pane"
(if this.loading "loading")
(if this.sendingLoading "sending-loading")
}}
{{did-insert this.setupListeners}}
{{will-destroy this.teardownListeners}}
{{did-insert this.updateChannel}}
{{did-update this.loadMessages @targetMessageId}}
{{did-update this.updateChannel @channel.id}}
{{did-insert this.addAutoFocusEventListener}}
{{will-destroy this.removeAutoFocusEventListener}}
>
<ChatFullPageHeader
@channel={{@channel}}
@onCloseFullScreen={{this.onCloseFullScreen}}
@displayed={{this.includeHeader}}
/>
<ChatRetentionReminder @channel={{@channel}} />
<ChatMentionWarnings />
<div class="chat-message-actions-mobile-anchor"></div>
{{#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"
(if
@ -35,81 +54,95 @@
"-opened"
)
}}
></div>
>
</div>
<div class="chat-messages-scroll chat-messages-container">
<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 (or this.loading this.loadingMorePast)}}
<ChatSkeleton @tagName="" />
{{/if}}
{{#each @channel.messages key="id" as |message|}}
{{#each this.messages as |message|}}
<ChatMessage
@message={{message}}
@canInteractWithChat={{this.canInteractWithChat}}
@channel={{@channel}}
@setReplyTo={{this.setReplyTo}}
@replyMessageClicked={{this.replyMessageClicked}}
@editButtonClicked={{this.editButtonClicked}}
@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}}
@didShowMessage={{this.didShowMessage}}
@didHideMessage={{this.didHideMessage}}
/>
{{/each}}
{{#if (or this.loadingMoreFuture)}}
<ChatSkeleton @onDestroy={{this.onDestroySkeleton}} />
{{#if this.loadingMoreFuture}}
<ChatSkeleton @tagName="" />
{{/if}}
</div>
{{#if (and this.loadedOnce (not @channel.canLoadMorePast))}}
{{#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}}
<ChatScrollToBottomArrow
@scrollToBottom={{this.scrollToBottom}}
@hasNewMessages={{this.hasNewMessages}}
@isAlmostDocked={{this.isAlmostDocked}}
@channel={{@channel}}
/>
{{#if this.selectingMessages}}
{{#if this.selectingMessages}}
<ChatSelectionManager
@selectedMessageIds={{this.selectedMessageIds}}
@chatChannel={{@channel}}
@cancelSelecting={{this.cancelSelecting}}
@chatChannel={{this.chatChannel}}
@canModerate={{this.details.can_moderate}}
@cancelSelecting={{action "cancelSelecting"}}
/>
{{else}}
{{#if (or @channel.isDraft @channel.isFollowing)}}
{{else}}
{{#if (or this.chatChannel.isDraft this.chatChannel.isFollowing)}}
<ChatComposer
@draft={{this.draft}}
@details={{this.details}}
@canInteractWithChat={{this.canInteractWithChat}}
@sendMessage={{this.sendMessage}}
@editMessage={{this.editMessage}}
@setReplyTo={{this.setReplyTo}}
@sendMessage={{action "sendMessage"}}
@editMessage={{action "editMessage"}}
@setReplyTo={{action "setReplyTo"}}
@loading={{this.sendingLoading}}
@editingMessage={{readonly this.editingMessage}}
@onCancelEditing={{this.cancelEditing}}
@setInReplyToMsg={{this.setInReplyToMsg}}
@onEditLastMessageRequested={{this.editLastMessageRequested}}
@onValueChange={{this.composerValueChanged}}
@chatChannel={{@channel}}
@onValueChange={{action "composerValueChanged"}}
@chatChannel={{this.chatChannel}}
/>
{{else}}
<ChatChannelPreviewCard @channel={{@channel}} />
<ChatChannelPreviewCard @channel={{this.chatChannel}} />
{{/if}}
{{/if}}
</div>
{{/if}}

1555
plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js
View File

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

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

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

5
plugins/chat/assets/javascripts/discourse/components/chat-message-avatar.js Normal file
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15
plugins/chat/assets/javascripts/discourse/components/chat-message-separator.hbs Normal file
View File

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

5
plugins/chat/assets/javascripts/discourse/components/chat-message-separator.js Normal file
View File

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

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

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

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

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

57
plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
View File

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

330
plugins/chat/assets/javascripts/discourse/components/chat-message.js
View File

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

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

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

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

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

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

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

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

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

24
plugins/chat/assets/javascripts/discourse/components/chat-skeleton.hbs
View File

@ -1,32 +1,14 @@
<div
class="chat-skeleton -animation"
{{did-insert @onInsert}}
{{will-destroy @onDestroy}}
>
{{#each this.placeholders as |placeholder|}}
<div class="chat-skeleton -animation">
{{#each this.placeholders as |rows|}}
<div class="chat-skeleton__body">
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
{{#if placeholder.image}}
<div class="chat-skeleton__message-img"></div>
{{/if}}
<div class="chat-skeleton__message-text">
{{#each placeholder.rows as |row|}}
{{#each 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>
{{/each}}

8
plugins/chat/assets/javascripts/discourse/components/chat-skeleton.js
View File

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

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

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

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

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

3
plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js
View File

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

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

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

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

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

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

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

2
plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js
View File

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

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

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

79
plugins/chat/assets/javascripts/discourse/models/chat-channel.js
View File

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

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

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

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

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

209
plugins/chat/assets/javascripts/discourse/models/chat-message.js
View File

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

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

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

23
plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-visibility.js Normal file
View File

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

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

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

4
plugins/chat/assets/javascripts/discourse/routes/chat-channel.js
View File

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

33
plugins/chat/assets/javascripts/discourse/services/chat-api.js
View File

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

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

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

63
plugins/chat/assets/javascripts/discourse/services/chat-message-visibility-observer.js Normal file
View File

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

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

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

139
plugins/chat/assets/javascripts/discourse/services/chat.js
View File

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

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

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

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

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

2
plugins/chat/assets/stylesheets/common/chat-composer.scss
View File

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

4
plugins/chat/assets/stylesheets/common/chat-message-actions.scss
View File

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

104
plugins/chat/assets/stylesheets/common/chat-message-separator.scss
View File

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

26
plugins/chat/assets/stylesheets/common/chat-message.scss
View File

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

38
plugins/chat/assets/stylesheets/common/chat-skeleton.scss
View File

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

83
plugins/chat/assets/stylesheets/common/common.scss
View File

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

2
plugins/chat/assets/stylesheets/desktop/chat-composer.scss
View File

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

19
plugins/chat/assets/stylesheets/desktop/desktop.scss
View File

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

2
plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss
View File

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

4
plugins/chat/assets/stylesheets/mobile/chat-message.scss
View File

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

2
plugins/chat/config/locales/client.en.yml
View File

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

1
plugins/chat/plugin.rb
View File

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

40
plugins/chat/spec/queries/chat_channel_memberships_query_spec.rb
View File

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

51
plugins/chat/spec/queries/chat_channel_unreads_query_spec.rb
View File

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

8
plugins/chat/spec/requests/chat_controller_spec.rb
View File

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

6
plugins/chat/spec/serializer/chat_message_serializer_spec.rb
View File

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

2
plugins/chat/spec/system/chat_channel_spec.rb
View File

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

1
plugins/chat/spec/system/create_channel_spec.rb
View File

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

2
plugins/chat/spec/system/flag_message_spec.rb
View File

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

60
plugins/chat/spec/system/message_user_info.rb
View File

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

6
plugins/chat/spec/system/navigating_to_message_spec.rb
View File

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

Some files were not shown because too many files have changed in this diff Show More