{{#if @includeHeader}}
{{/if}}
- {{#each @thread.messages key="id" as |message|}}
+ {{#each this.messagesManager.messages key="id" as |message|}}
{{/each}}
- {{#if this.loading}}
-
- {{/if}}
+
+ {{#unless this.messagesLoader.fetchedOnce}}
+ {{#if this.messagesLoader.loading}}
+
+ {{/if}}
+ {{/unless}}
+
+
{{#if this.chatThreadPane.selectingMessages}}
{{else}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-thread.js b/plugins/chat/assets/javascripts/discourse/components/chat-thread.js
index bada1f9a9fb..98261307bcb 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-thread.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-thread.js
@@ -1,39 +1,67 @@
import Component from "@glimmer/component";
import { NotificationLevels } from "discourse/lib/notification-levels";
import UserChatThreadMembership from "discourse/plugins/chat/discourse/models/user-chat-thread-membership";
-import { Promise } from "rsvp";
-import { tracked } from "@glimmer/tracking";
+import { cached, tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
import { popupAjaxError } from "discourse/lib/ajax-error";
-import { bind, debounce } from "discourse-common/utils/decorators";
+import { bind } from "discourse-common/utils/decorators";
import { inject as service } from "@ember/service";
-import { cancel, next, schedule } from "@ember/runloop";
-import discourseLater from "discourse-common/lib/later";
+import { cancel, next } from "@ember/runloop";
import { resetIdle } from "discourse/lib/desktop-notifications";
+import ChatMessagesLoader from "discourse/plugins/chat/discourse/lib/chat-messages-loader";
+import { getOwner } from "discourse-common/lib/get-owner";
+import {
+ FUTURE,
+ PAST,
+ READ_INTERVAL_MS,
+} from "discourse/plugins/chat/discourse/lib/chat-constants";
+import discourseDebounce from "discourse-common/lib/debounce";
+import {
+ bodyScrollFix,
+ stackingContextFix,
+} from "discourse/plugins/chat/discourse/lib/chat-ios-hacks";
+import {
+ scrollListToBottom,
+ scrollListToMessage,
+ scrollListToTop,
+} from "discourse/plugins/chat/discourse/lib/scroll-helpers";
-const PAGE_SIZE = 100;
-const READ_INTERVAL_MS = 1000;
-
-export default class ChatThreadPanel extends Component {
- @service siteSettings;
- @service currentUser;
+export default class ChatThread extends Component {
+ @service appEvents;
+ @service capabilities;
@service chat;
- @service router;
@service chatApi;
@service chatComposerPresenceManager;
+ @service chatHistory;
@service chatThreadComposer;
@service chatThreadPane;
@service chatThreadPaneSubscriptionsManager;
- @service appEvents;
- @service capabilities;
- @service chatHistory;
+ @service currentUser;
+ @service router;
+ @service siteSettings;
- @tracked loading;
+ @tracked isAtBottom = true;
+ @tracked isScrolling = false;
+ @tracked needsArrow = false;
@tracked uploadDropZone;
scrollable = null;
+ @action
+ resetIdle() {
+ resetIdle();
+ }
+
+ @cached
+ get messagesLoader() {
+ return new ChatMessagesLoader(getOwner(this), this.args.thread);
+ }
+
+ get messagesManager() {
+ return this.args.thread.messagesManager;
+ }
+
@action
handleKeydown(event) {
if (event.key === "Escape") {
@@ -46,7 +74,7 @@ export default class ChatThreadPanel extends Component {
@action
didUpdateThread() {
- this.subscribeToUpdates();
+ this.messagesManager.clear();
this.chatThreadComposer.focus();
this.loadMessages();
this.resetComposerMessage();
@@ -63,66 +91,71 @@ export default class ChatThreadPanel extends Component {
}
@action
- unsubscribeFromUpdates() {
+ teardown() {
this.chatThreadPaneSubscriptionsManager.unsubscribe();
+ cancel(this._debouncedFillPaneAttemptHandler);
+ cancel(this._debounceUpdateLastReadMessageHandler);
}
@action
- computeScrollState() {
- cancel(this.onScrollEndedHandler);
+ onScroll(state) {
+ next(() => {
+ if (this.#flushIgnoreNextScroll()) {
+ return;
+ }
- if (!this.scrollable) {
- return;
- }
+ bodyScrollFix();
- this.chat.activeMessage = null;
-
- if (this.#isAtBottom()) {
- this.updateLastReadMessage();
- this.onScrollEnded();
- } else {
+ this.needsArrow =
+ (this.messagesLoader.fetchedOnce &&
+ this.messagesLoader.canLoadMoreFuture) ||
+ (state.distanceToBottom.pixels > 250 && !state.atBottom);
this.isScrolling = true;
- this.onScrollEndedHandler = discourseLater(this, this.onScrollEnded, 150);
+ this.debounceUpdateLastReadMessage();
+
+ if (
+ state.atTop ||
+ (!this.capabilities.isIOS &&
+ state.up &&
+ state.distanceToTop.percentage < 40)
+ ) {
+ this.fetchMoreMessages({ direction: PAST });
+ } else if (state.atBottom) {
+ this.fetchMoreMessages({ direction: FUTURE });
+ }
+ });
+ }
+
+ @action
+ onScrollEnd(state) {
+ this.needsArrow =
+ (this.messagesLoader.fetchedOnce &&
+ this.messagesLoader.canLoadMoreFuture) ||
+ (state.distanceToBottom.pixels > 250 && !state.atBottom);
+ this.isScrolling = false;
+ this.resetIdle();
+ this.atBottom = state.atBottom;
+
+ if (state.atBottom) {
+ this.fetchMoreMessages({ direction: FUTURE });
}
}
- #isAtBottom() {
- if (!this.scrollable) {
- return false;
- }
-
- // This is different from the channel scrolling because the scrolling here
- // is inverted -- in the channel's case scrollTop is 0 when scrolled to the
- // bottom of the channel, but in the negatives when scrolling up to past messages.
- //
- // c.f. https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
- return (
- Math.abs(
- this.scrollable.scrollHeight -
- this.scrollable.clientHeight -
- this.scrollable.scrollTop
- ) <= 2
+ debounceUpdateLastReadMessage() {
+ this._debounceUpdateLastReadMessageHandler = discourseDebounce(
+ this,
+ this.updateLastReadMessage,
+ READ_INTERVAL_MS
);
}
@bind
- onScrollEnded() {
- this.isScrolling = false;
- }
-
- @debounce(READ_INTERVAL_MS)
updateLastReadMessage() {
- schedule("afterRender", () => {
- if (this._selfDeleted) {
- return;
- }
-
- // HACK: We don't have proper scroll visibility over
- // what message we are looking at, don't have the lastReadMessageId
- // for the thread, and this updateLastReadMessage function is only
- // called when scrolling all the way to the bottom.
- this.markThreadAsRead();
- });
+ // HACK: We don't have proper scroll visibility over
+ // what message we are looking at, don't have the lastReadMessageId
+ // for the thread, and this updateLastReadMessage function is only
+ // called when scrolling all the way to the bottom.
+ this.markThreadAsRead();
}
@action
@@ -132,94 +165,158 @@ export default class ChatThreadPanel extends Component {
@action
loadMessages() {
- this.args.thread.messagesManager.clearMessages();
this.fetchMessages();
+ this.subscribeToUpdates();
}
@action
didResizePane() {
- this.forceRendering();
+ this._ignoreNextScroll = true;
+ this.debounceFillPaneAttempt();
+ this.debounceUpdateLastReadMessage();
}
- get _selfDeleted() {
- return this.isDestroying || this.isDestroyed;
- }
-
- @debounce(100)
- fetchMessages() {
- if (this._selfDeleted) {
- return Promise.resolve();
- }
-
+ async fetchMessages(findArgs = {}) {
if (this.args.thread.staged) {
const message = this.args.thread.originalMessage;
message.thread = this.args.thread;
- this.args.thread.messagesManager.addMessages([message]);
- return Promise.resolve();
+ message.manager = this.messagesManager;
+ this.messagesManager.addMessages([message]);
+ return;
}
- this.loading = true;
+ if (this.messagesLoader.loading) {
+ return;
+ }
- const findArgs = {
- pageSize: PAGE_SIZE,
- threadId: this.args.thread.id,
- includeMessages: true,
- };
- return this.chatApi
- .channel(this.args.thread.channel.id, findArgs)
- .then((result) => {
- if (this._selfDeleted) {
- return;
- }
+ this.messagesManager.clear();
- if (this.args.thread.channel.id !== result.meta.channel_id) {
- if (this.chatHistory.previousRoute?.name === "chat.channel.index") {
- this.router.transitionTo(
- "chat.channel",
- "-",
- result.meta.channel_id
- );
- } else {
- this.router.transitionTo("chat.channel.threads");
- }
- }
+ findArgs.targetMessageId ??=
+ this.args.targetMessageId ||
+ this.args.thread.currentUserMembership?.lastReadMessageId;
- const [messages, meta] = this.afterFetchCallback(
- this.args.thread,
- result
- );
- this.args.thread.messagesManager.addMessages(messages);
- this.args.thread.details = meta;
- this.markThreadAsRead();
- })
- .catch(this.#handleErrors)
- .finally(() => {
- if (this._selfDeleted) {
- return;
- }
+ if (!findArgs.targetMessageId) {
+ findArgs.direction = FUTURE;
+ }
- this.loading = false;
+ const result = await this.messagesLoader.load(findArgs);
+ if (!result) {
+ return;
+ }
+
+ const [messages, meta] = this.processMessages(this.args.thread, result);
+ stackingContextFix(this.scrollable, () => {
+ this.messagesManager.addMessages(messages);
+ });
+ this.args.thread.details = meta;
+
+ if (this.args.targetMessageId) {
+ this.scrollToMessageId(this.args.targetMessageId, { highlight: true });
+ } else if (this.args.thread.currentUserMembership?.lastReadMessageId) {
+ this.scrollToMessageId(
+ this.args.thread.currentUserMembership?.lastReadMessageId
+ );
+ } else {
+ this.scrollToTop();
+ }
+
+ this.debounceFillPaneAttempt();
+ }
+
+ @action
+ async fetchMoreMessages({ direction }) {
+ if (this.messagesLoader.loading) {
+ return;
+ }
+
+ const result = await this.messagesLoader.loadMore({ direction });
+ if (!result) {
+ return;
+ }
+
+ const [messages, meta] = this.processMessages(this.args.thread, result);
+ if (!messages?.length) {
+ return;
+ }
+
+ stackingContextFix(this.scrollable, () => {
+ this.messagesManager.addMessages(messages);
+ });
+ this.args.thread.details = meta;
+
+ if (direction === FUTURE) {
+ this.scrollToMessageId(messages.firstObject.id, {
+ position: "end",
+ behavior: "auto",
});
+ } else if (direction === PAST) {
+ this.scrollToMessageId(messages.lastObject.id);
+ }
+
+ this.debounceFillPaneAttempt();
+ }
+
+ @action
+ scrollToLatestMessage() {
+ if (this.messagesLoader.canLoadMoreFuture) {
+ this.fetchMessages();
+ } else if (this.messagesManager.messages.length > 0) {
+ this.scrollToBottom();
+ }
+ }
+
+ debounceFillPaneAttempt() {
+ if (!this.messagesLoader.fetchedOnce) {
+ return;
+ }
+
+ this._debouncedFillPaneAttemptHandler = discourseDebounce(
+ this,
+ this.fillPaneAttempt,
+ 500
+ );
+ }
+
+ async fillPaneAttempt() {
+ // safeguard
+ if (this.messagesManager.messages.length > 200) {
+ return;
+ }
+
+ if (!this.messagesLoader.canLoadMorePast) {
+ return;
+ }
+
+ const firstMessage = this.messagesManager.messages.firstObject;
+ if (!firstMessage?.visible) {
+ return;
+ }
+
+ await this.fetchMoreMessages({ direction: PAST });
+ }
+
+ scrollToMessageId(
+ messageId,
+ opts = { highlight: false, position: "start", autoExpand: false }
+ ) {
+ this._ignoreNextScroll = true;
+ const message = this.messagesManager.findMessage(messageId);
+ scrollListToMessage(this.scrollable, message, opts);
}
@bind
- afterFetchCallback(thread, result) {
- const messages = [];
+ processMessages(thread, result) {
+ const messages = result.messages.map((messageData) => {
+ const ignored = this.currentUser.ignored_users || [];
+ const hidden = ignored.includes(messageData.user.username);
- result.chat_messages.forEach((messageData) => {
- // If a message has been hidden it is because the current user is ignoring
- // the user who sent it, so we want to unconditionally hide it, even if
- // we are going directly to the target
- if (this.currentUser.ignored_users) {
- messageData.hidden = this.currentUser.ignored_users.includes(
- messageData.user.username
- );
- }
-
- messageData.expanded = !(messageData.hidden || messageData.deleted_at);
- const message = ChatMessage.create(thread.channel, messageData);
- message.thread = thread;
- messages.push(message);
+ return ChatMessage.create(thread.channel, {
+ ...messageData,
+ hidden,
+ expanded: !(hidden || messageData.deleted_at),
+ manager: this.messagesManager,
+ thread,
+ });
});
return [messages, result.meta];
@@ -229,6 +326,10 @@ export default class ChatThreadPanel extends Component {
// and scrolling; for now it's enough to do it when the thread panel
// opens/messages are loaded since we have no pagination for threads.
markThreadAsRead() {
+ if (!this.args.thread || this.args.thread.staged) {
+ return;
+ }
+
return this.chatApi.markThreadAsRead(
this.args.thread.channel.id,
this.args.thread.id
@@ -258,44 +359,42 @@ export default class ChatThreadPanel extends Component {
}
this.chatThreadPane.sending = true;
- await this.args.thread.stageMessage(message);
+ this._ignoreNextScroll = true;
+ stackingContextFix(this.scrollable, async () => {
+ await this.args.thread.stageMessage(message);
+ });
this.resetComposerMessage();
- this.scrollToBottom();
+
+ if (!this.messagesLoader.canLoadMoreFuture) {
+ this.scrollToLatestMessage();
+ }
try {
- await this.chatApi
- .sendMessage(this.args.thread.channel.id, {
+ const response = await this.chatApi.sendMessage(
+ this.args.thread.channel.id,
+ {
message: message.message,
in_reply_to_id: message.thread.staged
- ? message.thread.originalMessage.id
+ ? message.thread.originalMessage?.id
: null,
staged_id: message.id,
upload_ids: message.uploads.map((upload) => upload.id),
thread_id: message.thread.staged ? null : message.thread.id,
staged_thread_id: message.thread.staged ? message.thread.id : null,
- })
- .then((response) => {
- this.args.thread.currentUserMembership ??=
- UserChatThreadMembership.create({
- notification_level: NotificationLevels.TRACKING,
- last_read_message_id: response.message_id,
- });
- })
- .catch((error) => {
- this.#onSendError(message.id, error);
- })
- .finally(() => {
- if (this._selfDeleted) {
- return;
- }
- this.chatThreadPane.sending = false;
+ }
+ );
+
+ this.args.thread.currentUserMembership ??=
+ UserChatThreadMembership.create({
+ notification_level: NotificationLevels.TRACKING,
+ last_read_message_id: response.message_id,
});
+
+ this.scrollToLatestMessage();
} catch (error) {
this.#onSendError(message.id, error);
} finally {
- if (!this._selfDeleted) {
- this.chatThreadPane.sending = false;
- }
+ this.chatThreadPane.sending = false;
}
}
@@ -322,61 +421,21 @@ export default class ChatThreadPanel extends Component {
}
}
- // A more consistent way to scroll to the bottom when we are sure this is our goal
- // it will also limit issues with any element changing the height while we are scrolling
- // to the bottom
@action
scrollToBottom() {
- next(() => {
- schedule("afterRender", () => {
- if (!this.scrollable) {
- return;
- }
-
- this.scrollable.scrollTop = this.scrollable.scrollHeight + 1;
- this.forceRendering(() => {
- this.scrollable.scrollTop = this.scrollable.scrollHeight;
- });
- });
- });
+ this._ignoreNextScroll = true;
+ scrollListToBottom(this.scrollable);
}
- // since -webkit-overflow-scrolling: touch can't be used anymore to disable momentum scrolling
- // we now use this hack to disable it
- @bind
- forceRendering(callback) {
- if (this.capabilities.isIOS) {
- this.scrollable.style.overflow = "hidden";
- }
-
- callback?.();
-
- if (this.capabilities.isIOS) {
- next(() => {
- schedule("afterRender", () => {
- if (this._selfDeleted || !this.scrollable) {
- return;
- }
- this.scrollable.style.overflow = "auto";
- });
- });
- }
+ @action
+ scrollToTop() {
+ this._ignoreNextScroll = true;
+ scrollListToTop(this.scrollable);
}
@action
resendStagedMessage() {}
- #handleErrors(error) {
- switch (error?.jqXHR?.status) {
- case 429:
- case 404:
- popupAjaxError(error);
- break;
- default:
- throw error;
- }
- }
-
#onSendError(stagedId, error) {
const stagedMessage =
this.args.thread.messagesManager.findStagedMessage(stagedId);
@@ -391,4 +450,10 @@ export default class ChatThreadPanel extends Component {
this.resetComposerMessage();
}
+
+ #flushIgnoreNextScroll() {
+ const prev = this._ignoreNextScroll;
+ this._ignoreNextScroll = false;
+ return prev;
+ }
}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/composer/channel.js b/plugins/chat/assets/javascripts/discourse/components/chat/composer/channel.js
index d8b406aef43..ed67eede4c9 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/composer/channel.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/composer/channel.js
@@ -62,7 +62,7 @@ export default class ChatComposerChannel extends ChatComposer {
}
lastUserMessage(user) {
- return this.args.channel.lastUserMessage(user);
+ return this.args.channel.messagesManager.findLastUserMessage(user);
}
get placeholder() {
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/composer/thread.js b/plugins/chat/assets/javascripts/discourse/components/chat/composer/thread.js
index 5bca803ae5a..dd061e33b0c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/composer/thread.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/composer/thread.js
@@ -39,7 +39,7 @@ export default class ChatComposerThread extends ChatComposer {
}
lastUserMessage(user) {
- return this.args.thread.lastUserMessage(user);
+ return this.args.thread.messagesManager.findLastUserMessage(user);
}
handleEscape(event) {
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-scroll-to-bottom-arrow.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/scroll-to-bottom-arrow.hbs
similarity index 55%
rename from plugins/chat/assets/javascripts/discourse/components/chat-scroll-to-bottom-arrow.hbs
rename to plugins/chat/assets/javascripts/discourse/components/chat/scroll-to-bottom-arrow.hbs
index 5b660d2fd55..93d5f270a2d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-scroll-to-bottom-arrow.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/scroll-to-bottom-arrow.hbs
@@ -1,11 +1,11 @@
-