osr-plastic/osr-discourse-src
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
This reverts commit 10e1831139.
This commit is contained in:
Joffrey JAFFEUX
2023-03-02 20:20:39 +01:00
committed by GitHub
parent 10e1831139
commit 435761ef58
119 changed files with 2327 additions and 2632 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/chat/assets/javascripts/discourse/components/channels-list.js
+22 -18
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() {
plugins/chat/assets/javascripts/discourse/components/chat-channel-metadata.hbs
+1 -1
View File
@@ -3,7 +3,7 @@
{{this.lastMessageFormatedDate}}
</div>
{{#if this.unreadIndicator}}
{{#if @unreadIndicator}}
<ChatChannelUnreadIndicator @channel={{@channel}} />
{{/if}}
</div>
plugins/chat/assets/javascripts/discourse/components/chat-channel-metadata.js
+12 -12
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, {
sameDay: "LT",
nextDay: "[Tomorrow]",
nextWeek: "dddd",
lastDay: "[Yesterday]",
lastWeek: "dddd",
sameElse: "l",
});
return moment(this.args.channel.get("last_message_sent_at")).calendar(
null,
{
sameDay: "LT",
nextDay: "[Tomorrow]",
nextWeek: "dddd",
lastDay: "[Yesterday]",
lastWeek: "dddd",
sameElse: "l",
}
);
}
}
plugins/chat/assets/javascripts/discourse/components/chat-channel-preview-card.hbs
+3 -3
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}}
plugins/chat/assets/javascripts/discourse/components/chat-channel-preview-card.js
+9 -5
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);
}
}
plugins/chat/assets/javascripts/discourse/components/chat-channel-selector-modal-inner.js
+1 -1
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;
});
plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
+3 -3
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}}
plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.js
+7
View File
@@ -0,0 +1,7 @@
import Component from "@ember/component";
export default class ChatComposerDropdown extends Component {
tagName = "";
buttons = null;
isDisabled = false;
}
plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js
+8 -13
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, {
plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
+1 -5
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}}
plugins/chat/assets/javascripts/discourse/components/chat-composer.js
+10 -9
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);
}
this.chatComposerWarningsTracker.trackMentions(this.value);
},
@bind
plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.hbs
+4 -1
View File
@@ -19,6 +19,9 @@
/>
{{#if this.previewedChannel}}
<ChatLivePane @channel={{this.previewedChannel}} @includeHeader={{false}} />
<ChatLivePane
@chatChannel={{this.previewedChannel}}
@includeHeader={{false}}
/>
{{/if}}
</div>
plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.hbs
+1 -1
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>
plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js
-4
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();
plugins/chat/assets/javascripts/discourse/components/chat-full-page-header.hbs
-46
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}}
plugins/chat/assets/javascripts/discourse/components/chat-full-page-header.js
-11
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;
}
}
plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
+134 -101
View File
@@ -1,115 +1,148 @@
<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={{concat-class
"chat-message-emoji-picker-anchor"
(if
(and
this.chatEmojiPickerManager.opened
(eq this.chatEmojiPickerManager.context "chat-message")
)
"-opened"
)
}}
></div>
<div class="chat-messages-scroll chat-messages-container">
<div class="chat-message-actions-desktop-anchor"></div>
<div class="chat-messages-container">
{{#if this.loadingMorePast}}
<ChatSkeleton
@onInsert={{this.onDidInsertSkeleton}}
@onDestroy={{this.onDestroySkeleton}}
/>
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}}
{{#each @channel.messages key="id" as |message|}}
<ChatMessage
@message={{message}}
@canInteractWithChat={{this.canInteractWithChat}}
@channel={{@channel}}
@setReplyTo={{this.setReplyTo}}
@replyMessageClicked={{this.replyMessageClicked}}
@editButtonClicked={{this.editButtonClicked}}
@selectingMessages={{this.selectingMessages}}
@onStartSelectingMessages={{this.onStartSelectingMessages}}
@onSelectMessage={{this.onSelectMessage}}
@bulkSelectMessages={{this.bulkSelectMessages}}
@isHovered={{eq message.id this.hoveredMessageId}}
@onHoverMessage={{this.onHoverMessage}}
@resendStagedMessage={{this.resendStagedMessage}}
@didShowMessage={{this.didShowMessage}}
@didHideMessage={{this.didHideMessage}}
/>
{{/each}}
<LinkTo
@route="chat.channel.info"
@models={{this.chatChannel.routeModels}}
class="chat-channel-title-wrapper"
>
<ChatChannelTitle @channel={{this.chatChannel}} />
</LinkTo>
{{#if (or this.loadingMoreFuture)}}
<ChatSkeleton @onDestroy={{this.onDestroySkeleton}} />
{{#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>
{{#if (and this.loadedOnce (not @channel.canLoadMorePast))}}
<div class="all-loaded-message">
{{i18n "chat.all_loaded"}}
</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
(and
this.chatEmojiPickerManager.opened
(eq this.chatEmojiPickerManager.context "chat-message")
)
"-opened"
)
}}
>
</div>
<div class="chat-messages-scroll chat-messages-container">
<div class="chat-message-actions-desktop-anchor"></div>
<div class="chat-messages-container">
{{#if (or this.loading this.loadingMorePast)}}
<ChatSkeleton @tagName="" />
{{/if}}
{{#each this.messages as |message|}}
<ChatMessage
@message={{message}}
@canInteractWithChat={{this.canInteractWithChat}}
@details={{this.details}}
@chatChannel={{this.chatChannel}}
@setReplyTo={{action "setReplyTo"}}
@replyMessageClicked={{action "replyMessageClicked"}}
@editButtonClicked={{action "editButtonClicked"}}
@selectingMessages={{this.selectingMessages}}
@onStartSelectingMessages={{this.onStartSelectingMessages}}
@onSelectMessage={{this.onSelectMessage}}
@bulkSelectMessages={{this.bulkSelectMessages}}
@fullPage={{this.fullPage}}
@afterReactionAdded={{action "reStickScrollIfNeeded"}}
@isHovered={{eq message.id this.hoveredMessageId}}
@onHoverMessage={{this.onHoverMessage}}
@resendStagedMessage={{this.resendStagedMessage}}
/>
{{/each}}
{{#if this.loadingMoreFuture}}
<ChatSkeleton @tagName="" />
{{/if}}
</div>
<ChatScrollToBottomArrow
@scrollToBottom={{this.scrollToBottom}}
@hasNewMessages={{this.hasNewMessages}}
@isAlmostDocked={{this.isAlmostDocked}}
@channel={{@channel}}
/>
{{#if this.allPastMessagesLoaded}}
<div class="all-loaded-message">
{{i18n "chat.all_loaded"}}
</div>
{{/if}}
</div>
{{#if this.selectingMessages}}
<ChatSelectionManager
@selectedMessageIds={{this.selectedMessageIds}}
@chatChannel={{@channel}}
@cancelSelecting={{this.cancelSelecting}}
{{#if this.showScrollToBottomBtn}}
<div class="scroll-stick-wrap">
<a
href
title={{i18n "chat.scroll_to_bottom"}}
class={{concat-class
"btn"
"btn-flat"
"chat-scroll-to-bottom"
(if this.hasNewMessages "unread-messages")
}}
{{on "click" (action "restickScrolling")}}
>
{{#if this.hasNewMessages}}
{{i18n "chat.scroll_to_new_messages"}}
{{/if}}
{{d-icon "arrow-down"}}
</a>
</div>
{{/if}}
{{#if this.selectingMessages}}
<ChatSelectionManager
@selectedMessageIds={{this.selectedMessageIds}}
@chatChannel={{this.chatChannel}}
@canModerate={{this.details.can_moderate}}
@cancelSelecting={{action "cancelSelecting"}}
/>
{{else}}
{{#if (or this.chatChannel.isDraft this.chatChannel.isFollowing)}}
<ChatComposer
@draft={{this.draft}}
@details={{this.details}}
@canInteractWithChat={{this.canInteractWithChat}}
@sendMessage={{action "sendMessage"}}
@editMessage={{action "editMessage"}}
@setReplyTo={{action "setReplyTo"}}
@loading={{this.sendingLoading}}
@editingMessage={{readonly this.editingMessage}}
@onCancelEditing={{this.cancelEditing}}
@setInReplyToMsg={{this.setInReplyToMsg}}
@onEditLastMessageRequested={{this.editLastMessageRequested}}
@onValueChange={{action "composerValueChanged"}}
@chatChannel={{this.chatChannel}}
/>
{{else}}
{{#if (or @channel.isDraft @channel.isFollowing)}}
<ChatComposer
@canInteractWithChat={{this.canInteractWithChat}}
@sendMessage={{this.sendMessage}}
@editMessage={{this.editMessage}}
@setReplyTo={{this.setReplyTo}}
@loading={{this.sendingLoading}}
@editingMessage={{readonly this.editingMessage}}
@onCancelEditing={{this.cancelEditing}}
@setInReplyToMsg={{this.setInReplyToMsg}}
@onEditLastMessageRequested={{this.editLastMessageRequested}}
@onValueChange={{this.composerValueChanged}}
@chatChannel={{@channel}}
/>
{{else}}
<ChatChannelPreviewCard @channel={{@channel}} />
{{/if}}
<ChatChannelPreviewCard @channel={{this.chatChannel}} />
{{/if}}
</div>
{{/if}}
plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js
+953 -796
View File
File diff suppressed because it is too large Load Diff
plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.hbs
+2 -2
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}}
plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js
-1
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 } },
plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.hbs
+1 -1
View File
@@ -53,7 +53,7 @@
<ChatMessageReaction
@reaction={{reaction}}
@react={{@messageActions.react}}
@showCount={{false}}
@class="show"
/>
{{/each}}
plugins/chat/assets/javascripts/discourse/components/chat-message-avatar.hbs
+2 -2
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}}
plugins/chat/assets/javascripts/discourse/components/chat-message-avatar.js
+5
View File
@@ -0,0 +1,5 @@
import Component from "@ember/component";
export default class ChatMessageAvatar extends Component {
tagName = "";
}
plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.hbs
+2 -2
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>
plugins/chat/assets/javascripts/discourse/components/chat-message-collapser.js
+15 -8
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);
plugins/chat/assets/javascripts/discourse/components/chat-message-in-reply-to-indicator.hbs
-19
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}}
plugins/chat/assets/javascripts/discourse/components/chat-message-in-reply-to-indicator.js
-32
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
);
}
}
plugins/chat/assets/javascripts/discourse/components/chat-message-info.hbs
+5 -5
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}}
plugins/chat/assets/javascripts/discourse/components/chat-message-info.js
+5 -2
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() {
plugins/chat/assets/javascripts/discourse/components/chat-message-left-gutter.hbs
+4 -4
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>
plugins/chat/assets/javascripts/discourse/components/chat-message-left-gutter.js
-6
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;
}
plugins/chat/assets/javascripts/discourse/components/chat-message-move-to-channel-modal-inner.hbs
+1 -1
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"
/>
plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.hbs
+9 -10
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}}
plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.js
+75 -53
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),
});
plugins/chat/assets/javascripts/discourse/components/chat-message-separator-date.hbs
-26
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}}
plugins/chat/assets/javascripts/discourse/components/chat-message-separator-new.hbs
-13
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}}
plugins/chat/assets/javascripts/discourse/components/chat-message-separator.hbs
+15
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}}
plugins/chat/assets/javascripts/discourse/components/chat-message-separator.js
+5
View File
@@ -0,0 +1,5 @@
import Component from "@ember/component";
export default Component.extend({
tagName: "",
});
plugins/chat/assets/javascripts/discourse/components/chat-message-text.hbs
+3 -3
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}}
plugins/chat/assets/javascripts/discourse/components/chat-message-text.js
+8 -5
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);
}
}
plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
+38 -19
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
plugins/chat/assets/javascripts/discourse/components/chat-message.js
+222 -114
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 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;
}
const stagedId = this.args.message?.stagedId;
if (stagedId) {
return document.querySelector(
`.chat-message-container[data-staged-id='${stagedId}']`
);
}
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,19 +621,10 @@ export default class ChatMessage extends Component {
emoji,
},
}
)
.catch((errResult) => {
popupAjaxError(errResult);
this.args.message.react(
emoji,
REACTIONS.remove,
this.currentUser,
this.currentUser.id
);
})
.finally(() => {
this.reacting = false;
});
).catch((errResult) => {
popupAjaxError(errResult);
this._updateReactionsList(emoji, REACTIONS.remove, this.currentUser);
});
}
// TODO(roman): For backwards-compatibility.
@@ -561,6 +651,17 @@ export default class ChatMessage extends Component {
this.args.setReplyTo(this.args.message.id);
}
viewReplyOrThread() {
if (this.hasThread) {
this.router.transitionTo(
"chat.channel.thread",
this.args.message.thread_id
);
} else {
this.args.replyMessageClicked(this.args.message.in_reply_to);
}
}
@action
edit() {
this.args.editButtonClicked(this.args.message.id);
@@ -572,11 +673,12 @@ export default class ChatMessage extends Component {
requirejs.entries["discourse/lib/flag-targets/flag"];
if (targetFlagSupported) {
const model = this.args.message;
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 [];
}
const userReactions = Object.keys(this.args.message.reactions || {}).filter(
(key) => {
return this.args.message.reactions[key].reacted;
}
);
return favorites.slice(0, 3).map((emoji) => {
return (
this.args.message.reactions.find(
(reaction) => reaction.emoji === emoji
) ||
ChatMessageReaction.create({
emoji,
})
);
if (userReactions.includes(emoji)) {
return { emoji, reacted: true };
} else {
return { emoji, reacted: false };
}
});
}
}
plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.hbs
+1 -1
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}}
plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.js
+20 -15
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);
}
}
},
});
plugins/chat/assets/javascripts/discourse/components/chat-scroll-to-bottom-arrow.hbs
-23
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}}
>
<span class="chat-scroll-to-bottom__arrow">
{{d-icon "arrow-down"}}
{{#if @hasNewMessages}}
<span class="chat-scroll-to-bottom__text">
{{i18n "chat.scroll_to_new_messages"}}
</span>
{{/if}}
</span>
</DButton>
</div>
plugins/chat/assets/javascripts/discourse/components/chat-selection-manager.js
+3 -4
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
plugins/chat/assets/javascripts/discourse/components/chat-skeleton.hbs
+5 -23
View File
@@ -1,31 +1,13 @@
<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|}}
<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}}
{{#each rows as |row|}}
<div class="chat-skeleton__message-msg" style={{row}}></div>
{{/each}}
</div>
</div>
</div>
plugins/chat/assets/javascripts/discourse/components/chat-skeleton.js
+3 -7
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 htmlSafe(`width: ${this.#randomIntFromInterval(20, 95)}%`);
}),
reactions: Array.from({ length: this.#randomIntFromInterval(0, 3) }),
};
return Array.from({ length: this.#randomIntFromInterval(1, 5) }, () => {
return htmlSafe(`width: ${this.#randomIntFromInterval(20, 95)}%`);
});
});
}
plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs
+2 -1
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}}
plugins/chat/assets/javascripts/discourse/components/full-page-chat.js
+77 -4
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");
},
});
plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js
+1 -2
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"];
plugins/chat/assets/javascripts/discourse/controllers/create-channel.js
-6
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);
plugins/chat/assets/javascripts/discourse/helpers/format-chat-date.js
+2 -2
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 =
plugins/chat/assets/javascripts/discourse/initializers/chat-cook-function.js
-32
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
);
};
});
},
};
plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js
-2
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",
plugins/chat/assets/javascripts/discourse/lib/chat-message-flag.js
+1 -1
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
plugins/chat/assets/javascripts/discourse/models/chat-channel.js
+4 -75
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++) {
plugins/chat/assets/javascripts/discourse/models/chat-message-draft.js
-62
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);
}
}
plugins/chat/assets/javascripts/discourse/models/chat-message-reaction.js
-33
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);
})
);
}
}
plugins/chat/assets/javascripts/discourse/models/chat-message.js
+18 -185
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);
static createStagedMessage(channel, args = {}) {
args.staged_id = guid();
return new ChatMessage(channel, args);
}
return this._super(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;
_initReactions(args) {
args.reactions = EmberObject.create(args.reactions || {});
},
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);
_initUserModel(args) {
if (!args.user || args.user instanceof User) {
return;
}
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);
},
});
plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-separator-date.js
-35
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();
}
}
plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-visibility.js
+23
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);
}
}
plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message.js
-43
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?.();
}
});
}
}
plugins/chat/assets/javascripts/discourse/routes/chat-channel.js
-4
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();
plugins/chat/assets/javascripts/discourse/services/chat-api.js
-33
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.
plugins/chat/assets/javascripts/discourse/services/chat-channels-manager.js
+2 -9
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 {
plugins/chat/assets/javascripts/discourse/services/chat-message-visibility-observer.js
+63
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);
}
}
plugins/chat/assets/javascripts/discourse/services/chat-subscriptions-manager.js
+5 -6
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) <=
busData.chat_message_id
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;
}
});
}
plugins/chat/assets/javascripts/discourse/services/chat.js
+128 -11
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`"
plugins/chat/assets/javascripts/discourse/templates/modal/create-channel.hbs
+1 -6
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}}