@ni/ok-components 1.9.5 → 1.9.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -103909,8 +103909,30 @@ focus outline in that case.
|
|
|
103909
103909
|
this.onMessagesChanged();
|
|
103910
103910
|
}
|
|
103911
103911
|
}
|
|
103912
|
+
/** @internal */
|
|
103913
|
+
smoothScrollTo(scrollTop) {
|
|
103914
|
+
const container = this.conversation.messagesContainer;
|
|
103915
|
+
if (Math.abs(container.scrollTop - scrollTop) <= 1) {
|
|
103916
|
+
// No movement is needed, so `scrollTo` would not emit a scroll event
|
|
103917
|
+
// to clear the programmatic guard. Snap to the exact target and
|
|
103918
|
+
// leave the guard clear so streamed content keeps being followed.
|
|
103919
|
+
this.programmaticScrollTarget = undefined;
|
|
103920
|
+
container.scrollTop = scrollTop;
|
|
103921
|
+
return;
|
|
103922
|
+
}
|
|
103923
|
+
this.programmaticScrollTarget = scrollTop;
|
|
103924
|
+
container.scrollTo({
|
|
103925
|
+
top: scrollTop,
|
|
103926
|
+
behavior: 'smooth'
|
|
103927
|
+
});
|
|
103928
|
+
}
|
|
103929
|
+
/** @internal */
|
|
103930
|
+
instantScrollTo(scrollTop) {
|
|
103931
|
+
this.conversation.messagesContainer.scrollTop = scrollTop;
|
|
103932
|
+
}
|
|
103912
103933
|
onMessagesChanged() {
|
|
103913
103934
|
const current = this.getOrderedMessages();
|
|
103935
|
+
const isInitialContent = this.previousMessages.length === 0;
|
|
103914
103936
|
const previousSet = new Set(this.previousMessages);
|
|
103915
103937
|
const addedMessages = current.filter(message => !previousSet.has(message));
|
|
103916
103938
|
this.previousMessages = current;
|
|
@@ -103919,7 +103941,7 @@ focus outline in that case.
|
|
|
103919
103941
|
return;
|
|
103920
103942
|
}
|
|
103921
103943
|
const hasAnchorMessage = addedMessages.some(message => message.messageInternals.anchorOnInsert);
|
|
103922
|
-
this.scheduleScrollUpdate(hasAnchorMessage);
|
|
103944
|
+
this.scheduleScrollUpdate(hasAnchorMessage, isInitialContent);
|
|
103923
103945
|
}
|
|
103924
103946
|
repartition(messages) {
|
|
103925
103947
|
const anchorIndex = this.findLatestAnchorIndex(messages);
|
|
@@ -103935,18 +103957,19 @@ focus outline in that case.
|
|
|
103935
103957
|
message.messageInternals.slot = undefined;
|
|
103936
103958
|
}
|
|
103937
103959
|
}
|
|
103938
|
-
scheduleScrollUpdate(hasAnchorMessage) {
|
|
103960
|
+
scheduleScrollUpdate(hasAnchorMessage, isInitialContent) {
|
|
103939
103961
|
this.pendingAnchorInsert = this.pendingAnchorInsert || hasAnchorMessage;
|
|
103940
103962
|
if (this.scrollUpdatePending) {
|
|
103941
103963
|
return;
|
|
103942
103964
|
}
|
|
103965
|
+
const shouldAnimate = !isInitialContent;
|
|
103943
103966
|
this.scrollUpdatePending = true;
|
|
103944
103967
|
requestAnimationFrame(() => {
|
|
103945
103968
|
this.scrollUpdatePending = false;
|
|
103946
103969
|
const anchorInsert = this.pendingAnchorInsert;
|
|
103947
103970
|
this.pendingAnchorInsert = false;
|
|
103948
103971
|
if (anchorInsert) {
|
|
103949
|
-
this.anchorToLastInsertedMessage();
|
|
103972
|
+
this.anchorToLastInsertedMessage(shouldAnimate);
|
|
103950
103973
|
}
|
|
103951
103974
|
else if (this.autoScrollEngaged) {
|
|
103952
103975
|
this.followContent();
|
|
@@ -103957,14 +103980,19 @@ focus outline in that case.
|
|
|
103957
103980
|
* Pins the most recently inserted anchor message near the top of the
|
|
103958
103981
|
* viewport.
|
|
103959
103982
|
*/
|
|
103960
|
-
anchorToLastInsertedMessage() {
|
|
103983
|
+
anchorToLastInsertedMessage(animate) {
|
|
103961
103984
|
const message = this.getLastAnchorMessage();
|
|
103962
103985
|
if (message === undefined) {
|
|
103963
103986
|
return;
|
|
103964
103987
|
}
|
|
103965
103988
|
this.setScrollAnchorMessage(message);
|
|
103966
103989
|
this.autoScrollEngaged = true;
|
|
103967
|
-
|
|
103990
|
+
if (animate) {
|
|
103991
|
+
this.smoothScrollTo(this.getMaxScrollTop());
|
|
103992
|
+
}
|
|
103993
|
+
else {
|
|
103994
|
+
this.instantScrollTo(this.getMaxScrollTop());
|
|
103995
|
+
}
|
|
103968
103996
|
}
|
|
103969
103997
|
followContent() {
|
|
103970
103998
|
this.instantScrollTo(this.getMaxScrollTop());
|
|
@@ -103989,25 +104017,6 @@ focus outline in that case.
|
|
|
103989
104017
|
const { scrollHeight, clientHeight } = this.conversation.messagesContainer;
|
|
103990
104018
|
return Math.max(0, scrollHeight - clientHeight);
|
|
103991
104019
|
}
|
|
103992
|
-
smoothScrollTo(scrollTop) {
|
|
103993
|
-
const container = this.conversation.messagesContainer;
|
|
103994
|
-
if (Math.abs(container.scrollTop - scrollTop) <= 1) {
|
|
103995
|
-
// No movement is needed, so `scrollTo` would not emit a scroll event
|
|
103996
|
-
// to clear the programmatic guard. Snap to the exact target and
|
|
103997
|
-
// leave the guard clear so streamed content keeps being followed.
|
|
103998
|
-
this.programmaticScrollTarget = undefined;
|
|
103999
|
-
container.scrollTop = scrollTop;
|
|
104000
|
-
return;
|
|
104001
|
-
}
|
|
104002
|
-
this.programmaticScrollTarget = scrollTop;
|
|
104003
|
-
container.scrollTo({
|
|
104004
|
-
top: scrollTop,
|
|
104005
|
-
behavior: 'smooth'
|
|
104006
|
-
});
|
|
104007
|
-
}
|
|
104008
|
-
instantScrollTo(scrollTop) {
|
|
104009
|
-
this.conversation.messagesContainer.scrollTop = scrollTop;
|
|
104010
|
-
}
|
|
104011
104020
|
setScrollAnchorMessage(message) {
|
|
104012
104021
|
if (this.scrollAnchorMessage === message) {
|
|
104013
104022
|
return;
|