@cloudflare/realtimekit-ui 1.1.0-staging.5 → 1.1.0-staging.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.
@@ -2147,15 +2147,23 @@ const RtkPaginatedList = class {
2147
2147
  this.maxTS = Math.max(this.maxTS, node.timeMs);
2148
2148
  // if we are at the bottom of the page
2149
2149
  if (this.firstEmptyIndex === -1) {
2150
- // append messages to the page if page has not reached full capacity
2151
- if (this.pages[0].length < this.pageSize) {
2152
- this.pages[0].unshift(node);
2153
- this.newTS = node.timeMs;
2154
- this.rerender();
2150
+ // if there are no pages, load the first page
2151
+ if (this.pages.length < 1) {
2152
+ // update old timer to 1ms ahead of the latest message as we subtract this value to avoid loading duplicate messages when scrolling
2153
+ this.oldTS = node.timeMs + 1;
2154
+ this.loadPrevPage();
2155
2155
  }
2156
2156
  else {
2157
- // if page is at full capacity, load next page
2158
- this.loadNextPage();
2157
+ // append messages to the page if page has not reached full capacity
2158
+ if (this.pages[0].length < this.pageSize) {
2159
+ this.pages[0].unshift(node);
2160
+ this.newTS = node.timeMs;
2161
+ this.rerender();
2162
+ }
2163
+ else {
2164
+ // if page is at full capacity, load next page
2165
+ this.loadNextPage();
2166
+ }
2159
2167
  }
2160
2168
  }
2161
2169
  // If autoscroll is enabled, this method will scroll to the bottom
@@ -2183,7 +2191,12 @@ const RtkPaginatedList = class {
2183
2191
  if (index !== -1) {
2184
2192
  // delete message
2185
2193
  this.pages[i].splice(index, 1);
2186
- if (i === this.firstEmptyIndex + 1) {
2194
+ // if we are on the first page and it's now empty, we need to go back to initial state
2195
+ if (i === 0 && this.pages[i].length === 0) {
2196
+ this.pages.shift();
2197
+ this.firstEmptyIndex = -1;
2198
+ }
2199
+ else if (i === this.firstEmptyIndex + 1) {
2187
2200
  // if newest page is empty, update first empty index
2188
2201
  if (this.pages[i].length === 0)
2189
2202
  this.firstEmptyIndex++;
@@ -2344,10 +2357,10 @@ const RtkPaginatedList = class {
2344
2357
  * div.container is flex=column-reverse
2345
2358
  * which is why div#bottom-scroll comes before div#top-scroll
2346
2359
  */
2347
- return (index$1.h(index$1.Host, { key: '91ac7d0ca3fb720259945ffaa97f465b34c694fa' }, index$1.h("div", { key: '33896c19ecc4359ae163c65b5c71b9f17673e765', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: 'e26a5ef3979ec132277b9598afc17ea65683f6c8', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: 'e769a8f54a298af456552733dc9de27d059e5138', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
2360
+ return (index$1.h(index$1.Host, { key: '9bf695bccf42f2dd43b04725a855b6b77a4062fd' }, index$1.h("div", { key: '7c6805ed8b5e831ea6d932cfb5dc3ecf3d312775', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: 'eb6c68f97385b5a14a94ab2dc0abff4836f016f3', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: 'd1f04db290a9e4128ca58c9bd20b2146a7fc8f12', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
2348
2361
  this.shouldScrollToBottom = true;
2349
2362
  this.scrollToBottom();
2350
- } }, index$1.h("rtk-icon", { key: '6fb4cbc2247eb971004a94926b95ebd0f90ab0fd', icon: this.iconPack.chevron_down }))), index$1.h("div", { key: 'e91dd8f25012e4509e0ff3cb4d6b65aa9467d427', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '199c0ccffd57716bd5a05dcef8610113d3c58d3d', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: 'b8a3e08a25b2bc1d50b5a9b1b2deda802ae5eb28', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, this.t('list.empty'))) : (index$1.h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (index$1.h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '2cb56b4f70d37548fd9aa71b961559b43c54a922', size: "sm" }), index$1.h("div", { key: '4b183c49bfe60fd63af40e02b9b46215c08bb484', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
2363
+ } }, index$1.h("rtk-icon", { key: '71d8a85911513bb4069578a63ae45f21ac53554c', icon: this.iconPack.chevron_down }))), index$1.h("div", { key: 'b1aa46b8163431df6060163d7c5a87eb1ebcffa3', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: 'a3de0e7b8ca1ac505a596d86c0b8ecafee5fabba', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: '21fa3a4091d3f1311f5d575c277859602718338c', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, this.t('list.empty'))) : (index$1.h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (index$1.h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '7e018af534e7cd0be3345ca9ad9c8f0a7ab7cc3f', size: "sm" }), index$1.h("div", { key: '6c877368fc03c884338402bbcd878929cd4034fb', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
2351
2364
  }
2352
2365
  };
2353
2366
  __decorate$2([
@@ -94,7 +94,7 @@ const RtkChatToggle = class {
94
94
  const { messages } = await chat.getMessages(new Date().getTime(), this.pageSize, true);
95
95
  const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
96
96
  const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
97
- if (newMessages.length === messages.length && messages.length > 0) {
97
+ if (newMessages.length === this.pageSize && newMessages.length > 0) {
98
98
  // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
99
99
  this.unreadMessageCount = this.pageSize - 1;
100
100
  }
@@ -96,7 +96,7 @@ export class RtkChatToggle {
96
96
  const { messages } = await chat.getMessages(new Date().getTime(), this.pageSize, true);
97
97
  const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
98
98
  const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
99
- if (newMessages.length === messages.length && messages.length > 0) {
99
+ if (newMessages.length === this.pageSize && newMessages.length > 0) {
100
100
  // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
101
101
  this.unreadMessageCount = this.pageSize - 1;
102
102
  }
@@ -92,15 +92,23 @@ export class RtkPaginatedList {
92
92
  this.maxTS = Math.max(this.maxTS, node.timeMs);
93
93
  // if we are at the bottom of the page
94
94
  if (this.firstEmptyIndex === -1) {
95
- // append messages to the page if page has not reached full capacity
96
- if (this.pages[0].length < this.pageSize) {
97
- this.pages[0].unshift(node);
98
- this.newTS = node.timeMs;
99
- this.rerender();
95
+ // if there are no pages, load the first page
96
+ if (this.pages.length < 1) {
97
+ // update old timer to 1ms ahead of the latest message as we subtract this value to avoid loading duplicate messages when scrolling
98
+ this.oldTS = node.timeMs + 1;
99
+ this.loadPrevPage();
100
100
  }
101
101
  else {
102
- // if page is at full capacity, load next page
103
- this.loadNextPage();
102
+ // append messages to the page if page has not reached full capacity
103
+ if (this.pages[0].length < this.pageSize) {
104
+ this.pages[0].unshift(node);
105
+ this.newTS = node.timeMs;
106
+ this.rerender();
107
+ }
108
+ else {
109
+ // if page is at full capacity, load next page
110
+ this.loadNextPage();
111
+ }
104
112
  }
105
113
  }
106
114
  // If autoscroll is enabled, this method will scroll to the bottom
@@ -128,7 +136,12 @@ export class RtkPaginatedList {
128
136
  if (index !== -1) {
129
137
  // delete message
130
138
  this.pages[i].splice(index, 1);
131
- if (i === this.firstEmptyIndex + 1) {
139
+ // if we are on the first page and it's now empty, we need to go back to initial state
140
+ if (i === 0 && this.pages[i].length === 0) {
141
+ this.pages.shift();
142
+ this.firstEmptyIndex = -1;
143
+ }
144
+ else if (i === this.firstEmptyIndex + 1) {
132
145
  // if newest page is empty, update first empty index
133
146
  if (this.pages[i].length === 0)
134
147
  this.firstEmptyIndex++;
@@ -289,10 +302,10 @@ export class RtkPaginatedList {
289
302
  * div.container is flex=column-reverse
290
303
  * which is why div#bottom-scroll comes before div#top-scroll
291
304
  */
292
- return (h(Host, { key: '91ac7d0ca3fb720259945ffaa97f465b34c694fa' }, h("div", { key: '33896c19ecc4359ae163c65b5c71b9f17673e765', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'e26a5ef3979ec132277b9598afc17ea65683f6c8', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'e769a8f54a298af456552733dc9de27d059e5138', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
305
+ return (h(Host, { key: '9bf695bccf42f2dd43b04725a855b6b77a4062fd' }, h("div", { key: '7c6805ed8b5e831ea6d932cfb5dc3ecf3d312775', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'eb6c68f97385b5a14a94ab2dc0abff4836f016f3', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'd1f04db290a9e4128ca58c9bd20b2146a7fc8f12', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
293
306
  this.shouldScrollToBottom = true;
294
307
  this.scrollToBottom();
295
- } }, h("rtk-icon", { key: '6fb4cbc2247eb971004a94926b95ebd0f90ab0fd', icon: this.iconPack.chevron_down }))), h("div", { key: 'e91dd8f25012e4509e0ff3cb4d6b65aa9467d427', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '199c0ccffd57716bd5a05dcef8610113d3c58d3d', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: 'b8a3e08a25b2bc1d50b5a9b1b2deda802ae5eb28', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '2cb56b4f70d37548fd9aa71b961559b43c54a922', size: "sm" }), h("div", { key: '4b183c49bfe60fd63af40e02b9b46215c08bb484', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
308
+ } }, h("rtk-icon", { key: '71d8a85911513bb4069578a63ae45f21ac53554c', icon: this.iconPack.chevron_down }))), h("div", { key: 'b1aa46b8163431df6060163d7c5a87eb1ebcffa3', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'a3de0e7b8ca1ac505a596d86c0b8ecafee5fabba', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '21fa3a4091d3f1311f5d575c277859602718338c', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '7e018af534e7cd0be3345ca9ad9c8f0a7ab7cc3f', size: "sm" }), h("div", { key: '6c877368fc03c884338402bbcd878929cd4034fb', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
296
309
  }
297
310
  static get is() { return "rtk-paginated-list"; }
298
311
  static get encapsulation() { return "shadow"; }
@@ -7,7 +7,7 @@ import { d as defineCustomElement$m } from './p-241a8245.js';
7
7
  import { d as defineCustomElement$l } from './p-1391bef0.js';
8
8
  import { d as defineCustomElement$k } from './p-a73665b4.js';
9
9
  import { d as defineCustomElement$j } from './p-28170a8d.js';
10
- import { d as defineCustomElement$i } from './p-ae376177.js';
10
+ import { d as defineCustomElement$i } from './p-b6781e91.js';
11
11
  import { d as defineCustomElement$h } from './p-1f5a4682.js';
12
12
  import { d as defineCustomElement$g } from './p-598dc3f2.js';
13
13
  import { d as defineCustomElement$f } from './p-0e5cc539.js';
@@ -20,7 +20,7 @@ import { d as defineCustomElement$9 } from './p-2447a26f.js';
20
20
  import { d as defineCustomElement$8 } from './p-819cb785.js';
21
21
  import { d as defineCustomElement$7 } from './p-7148ec6a.js';
22
22
  import { d as defineCustomElement$6 } from './p-0f2de0f8.js';
23
- import { d as defineCustomElement$5 } from './p-0d472019.js';
23
+ import { d as defineCustomElement$5 } from './p-e7e2156a.js';
24
24
  import { d as defineCustomElement$4 } from './p-4ebf9684.js';
25
25
  import { d as defineCustomElement$3 } from './p-4902c5cf.js';
26
26
  import { d as defineCustomElement$2 } from './p-6739a399.js';
@@ -11,7 +11,7 @@ import { d as defineCustomElement$7 } from './p-2447a26f.js';
11
11
  import { d as defineCustomElement$6 } from './p-819cb785.js';
12
12
  import { d as defineCustomElement$5 } from './p-7148ec6a.js';
13
13
  import { d as defineCustomElement$4 } from './p-0f2de0f8.js';
14
- import { d as defineCustomElement$3 } from './p-0d472019.js';
14
+ import { d as defineCustomElement$3 } from './p-e7e2156a.js';
15
15
  import { d as defineCustomElement$2 } from './p-4ebf9684.js';
16
16
  import { d as defineCustomElement$1 } from './p-6739a399.js';
17
17
 
@@ -101,15 +101,23 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
101
101
  this.maxTS = Math.max(this.maxTS, node.timeMs);
102
102
  // if we are at the bottom of the page
103
103
  if (this.firstEmptyIndex === -1) {
104
- // append messages to the page if page has not reached full capacity
105
- if (this.pages[0].length < this.pageSize) {
106
- this.pages[0].unshift(node);
107
- this.newTS = node.timeMs;
108
- this.rerender();
104
+ // if there are no pages, load the first page
105
+ if (this.pages.length < 1) {
106
+ // update old timer to 1ms ahead of the latest message as we subtract this value to avoid loading duplicate messages when scrolling
107
+ this.oldTS = node.timeMs + 1;
108
+ this.loadPrevPage();
109
109
  }
110
110
  else {
111
- // if page is at full capacity, load next page
112
- this.loadNextPage();
111
+ // append messages to the page if page has not reached full capacity
112
+ if (this.pages[0].length < this.pageSize) {
113
+ this.pages[0].unshift(node);
114
+ this.newTS = node.timeMs;
115
+ this.rerender();
116
+ }
117
+ else {
118
+ // if page is at full capacity, load next page
119
+ this.loadNextPage();
120
+ }
113
121
  }
114
122
  }
115
123
  // If autoscroll is enabled, this method will scroll to the bottom
@@ -137,7 +145,12 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
137
145
  if (index !== -1) {
138
146
  // delete message
139
147
  this.pages[i].splice(index, 1);
140
- if (i === this.firstEmptyIndex + 1) {
148
+ // if we are on the first page and it's now empty, we need to go back to initial state
149
+ if (i === 0 && this.pages[i].length === 0) {
150
+ this.pages.shift();
151
+ this.firstEmptyIndex = -1;
152
+ }
153
+ else if (i === this.firstEmptyIndex + 1) {
141
154
  // if newest page is empty, update first empty index
142
155
  if (this.pages[i].length === 0)
143
156
  this.firstEmptyIndex++;
@@ -298,10 +311,10 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
298
311
  * div.container is flex=column-reverse
299
312
  * which is why div#bottom-scroll comes before div#top-scroll
300
313
  */
301
- return (h(Host, { key: '91ac7d0ca3fb720259945ffaa97f465b34c694fa' }, h("div", { key: '33896c19ecc4359ae163c65b5c71b9f17673e765', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'e26a5ef3979ec132277b9598afc17ea65683f6c8', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'e769a8f54a298af456552733dc9de27d059e5138', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
314
+ return (h(Host, { key: '9bf695bccf42f2dd43b04725a855b6b77a4062fd' }, h("div", { key: '7c6805ed8b5e831ea6d932cfb5dc3ecf3d312775', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'eb6c68f97385b5a14a94ab2dc0abff4836f016f3', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'd1f04db290a9e4128ca58c9bd20b2146a7fc8f12', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
302
315
  this.shouldScrollToBottom = true;
303
316
  this.scrollToBottom();
304
- } }, h("rtk-icon", { key: '6fb4cbc2247eb971004a94926b95ebd0f90ab0fd', icon: this.iconPack.chevron_down }))), h("div", { key: 'e91dd8f25012e4509e0ff3cb4d6b65aa9467d427', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '199c0ccffd57716bd5a05dcef8610113d3c58d3d', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: 'b8a3e08a25b2bc1d50b5a9b1b2deda802ae5eb28', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '2cb56b4f70d37548fd9aa71b961559b43c54a922', size: "sm" }), h("div", { key: '4b183c49bfe60fd63af40e02b9b46215c08bb484', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
317
+ } }, h("rtk-icon", { key: '71d8a85911513bb4069578a63ae45f21ac53554c', icon: this.iconPack.chevron_down }))), h("div", { key: 'b1aa46b8163431df6060163d7c5a87eb1ebcffa3', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'a3de0e7b8ca1ac505a596d86c0b8ecafee5fabba', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '21fa3a4091d3f1311f5d575c277859602718338c', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '7e018af534e7cd0be3345ca9ad9c8f0a7ab7cc3f', size: "sm" }), h("div", { key: '6c877368fc03c884338402bbcd878929cd4034fb', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
305
318
  }
306
319
  static get style() { return RtkPaginatedListStyle0; }
307
320
  }, [1, "rtk-paginated-list", {
@@ -1,4 +1,4 @@
1
- import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-ae376177.js';
1
+ import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-b6781e91.js';
2
2
 
3
3
  const RtkChatMessagesUiPaginated = RtkChatMessagesUiPaginated$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -11,7 +11,7 @@ import { d as defineCustomElement$8 } from './p-fa476519.js';
11
11
  import { d as defineCustomElement$7 } from './p-2447a26f.js';
12
12
  import { d as defineCustomElement$6 } from './p-819cb785.js';
13
13
  import { d as defineCustomElement$5 } from './p-7148ec6a.js';
14
- import { d as defineCustomElement$4 } from './p-0d472019.js';
14
+ import { d as defineCustomElement$4 } from './p-e7e2156a.js';
15
15
  import { d as defineCustomElement$3 } from './p-4ebf9684.js';
16
16
  import { d as defineCustomElement$2 } from './p-46d99dd9.js';
17
17
 
@@ -95,7 +95,7 @@ const RtkChatToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkChatToggle ext
95
95
  const { messages } = await chat.getMessages(new Date().getTime(), this.pageSize, true);
96
96
  const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
97
97
  const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
98
- if (newMessages.length === messages.length && messages.length > 0) {
98
+ if (newMessages.length === this.pageSize && newMessages.length > 0) {
99
99
  // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
100
100
  this.unreadMessageCount = this.pageSize - 1;
101
101
  }
@@ -1,4 +1,4 @@
1
- import { R as RtkChat$1, d as defineCustomElement$1 } from './p-32c6e86d.js';
1
+ import { R as RtkChat$1, d as defineCustomElement$1 } from './p-85872241.js';
2
2
 
3
3
  const RtkChat = RtkChat$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -8,9 +8,9 @@ import { i as index } from './p-f47d4fe8.js';
8
8
  import { d as defineCustomElement$o } from './p-241a8245.js';
9
9
  import { d as defineCustomElement$n } from './p-1391bef0.js';
10
10
  import { d as defineCustomElement$m } from './p-a73665b4.js';
11
- import { d as defineCustomElement$l } from './p-32c6e86d.js';
11
+ import { d as defineCustomElement$l } from './p-85872241.js';
12
12
  import { d as defineCustomElement$k } from './p-28170a8d.js';
13
- import { d as defineCustomElement$j } from './p-ae376177.js';
13
+ import { d as defineCustomElement$j } from './p-b6781e91.js';
14
14
  import { d as defineCustomElement$i } from './p-1f5a4682.js';
15
15
  import { d as defineCustomElement$h } from './p-598dc3f2.js';
16
16
  import { d as defineCustomElement$g } from './p-0e5cc539.js';
@@ -23,7 +23,7 @@ import { d as defineCustomElement$a } from './p-2447a26f.js';
23
23
  import { d as defineCustomElement$9 } from './p-819cb785.js';
24
24
  import { d as defineCustomElement$8 } from './p-7148ec6a.js';
25
25
  import { d as defineCustomElement$7 } from './p-0f2de0f8.js';
26
- import { d as defineCustomElement$6 } from './p-0d472019.js';
26
+ import { d as defineCustomElement$6 } from './p-e7e2156a.js';
27
27
  import { d as defineCustomElement$5 } from './p-4ebf9684.js';
28
28
  import { d as defineCustomElement$4 } from './p-4902c5cf.js';
29
29
  import { d as defineCustomElement$3 } from './p-6739a399.js';
@@ -1,4 +1,4 @@
1
- import { R as RtkPaginatedList$1, d as defineCustomElement$1 } from './p-0d472019.js';
1
+ import { R as RtkPaginatedList$1, d as defineCustomElement$1 } from './p-e7e2156a.js';
2
2
 
3
3
  const RtkPaginatedList = RtkPaginatedList$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2026-01-16T10:29:31",
2
+ "timestamp": "2026-01-16T12:23:34",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.27.2",
@@ -12679,15 +12679,23 @@ const RtkPaginatedList = class {
12679
12679
  this.maxTS = Math.max(this.maxTS, node.timeMs);
12680
12680
  // if we are at the bottom of the page
12681
12681
  if (this.firstEmptyIndex === -1) {
12682
- // append messages to the page if page has not reached full capacity
12683
- if (this.pages[0].length < this.pageSize) {
12684
- this.pages[0].unshift(node);
12685
- this.newTS = node.timeMs;
12686
- this.rerender();
12682
+ // if there are no pages, load the first page
12683
+ if (this.pages.length < 1) {
12684
+ // update old timer to 1ms ahead of the latest message as we subtract this value to avoid loading duplicate messages when scrolling
12685
+ this.oldTS = node.timeMs + 1;
12686
+ this.loadPrevPage();
12687
12687
  }
12688
12688
  else {
12689
- // if page is at full capacity, load next page
12690
- this.loadNextPage();
12689
+ // append messages to the page if page has not reached full capacity
12690
+ if (this.pages[0].length < this.pageSize) {
12691
+ this.pages[0].unshift(node);
12692
+ this.newTS = node.timeMs;
12693
+ this.rerender();
12694
+ }
12695
+ else {
12696
+ // if page is at full capacity, load next page
12697
+ this.loadNextPage();
12698
+ }
12691
12699
  }
12692
12700
  }
12693
12701
  // If autoscroll is enabled, this method will scroll to the bottom
@@ -12715,7 +12723,12 @@ const RtkPaginatedList = class {
12715
12723
  if (index !== -1) {
12716
12724
  // delete message
12717
12725
  this.pages[i].splice(index, 1);
12718
- if (i === this.firstEmptyIndex + 1) {
12726
+ // if we are on the first page and it's now empty, we need to go back to initial state
12727
+ if (i === 0 && this.pages[i].length === 0) {
12728
+ this.pages.shift();
12729
+ this.firstEmptyIndex = -1;
12730
+ }
12731
+ else if (i === this.firstEmptyIndex + 1) {
12719
12732
  // if newest page is empty, update first empty index
12720
12733
  if (this.pages[i].length === 0)
12721
12734
  this.firstEmptyIndex++;
@@ -12876,10 +12889,10 @@ const RtkPaginatedList = class {
12876
12889
  * div.container is flex=column-reverse
12877
12890
  * which is why div#bottom-scroll comes before div#top-scroll
12878
12891
  */
12879
- return (h(Host, { key: '91ac7d0ca3fb720259945ffaa97f465b34c694fa' }, h("div", { key: '33896c19ecc4359ae163c65b5c71b9f17673e765', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'e26a5ef3979ec132277b9598afc17ea65683f6c8', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'e769a8f54a298af456552733dc9de27d059e5138', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
12892
+ return (h(Host, { key: '9bf695bccf42f2dd43b04725a855b6b77a4062fd' }, h("div", { key: '7c6805ed8b5e831ea6d932cfb5dc3ecf3d312775', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'eb6c68f97385b5a14a94ab2dc0abff4836f016f3', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'd1f04db290a9e4128ca58c9bd20b2146a7fc8f12', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
12880
12893
  this.shouldScrollToBottom = true;
12881
12894
  this.scrollToBottom();
12882
- } }, h("rtk-icon", { key: '6fb4cbc2247eb971004a94926b95ebd0f90ab0fd', icon: this.iconPack.chevron_down }))), h("div", { key: 'e91dd8f25012e4509e0ff3cb4d6b65aa9467d427', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '199c0ccffd57716bd5a05dcef8610113d3c58d3d', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: 'b8a3e08a25b2bc1d50b5a9b1b2deda802ae5eb28', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '2cb56b4f70d37548fd9aa71b961559b43c54a922', size: "sm" }), h("div", { key: '4b183c49bfe60fd63af40e02b9b46215c08bb484', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
12895
+ } }, h("rtk-icon", { key: '71d8a85911513bb4069578a63ae45f21ac53554c', icon: this.iconPack.chevron_down }))), h("div", { key: 'b1aa46b8163431df6060163d7c5a87eb1ebcffa3', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'a3de0e7b8ca1ac505a596d86c0b8ecafee5fabba', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '21fa3a4091d3f1311f5d575c277859602718338c', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '7e018af534e7cd0be3345ca9ad9c8f0a7ab7cc3f', size: "sm" }), h("div", { key: '6c877368fc03c884338402bbcd878929cd4034fb', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
12883
12896
  }
12884
12897
  };
12885
12898
  __decorate$2$8([
@@ -15403,7 +15416,7 @@ const RtkChatToggle = class {
15403
15416
  const { messages } = await chat.getMessages(new Date().getTime(), this.pageSize, true);
15404
15417
  const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
15405
15418
  const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
15406
- if (newMessages.length === messages.length && messages.length > 0) {
15419
+ if (newMessages.length === this.pageSize && newMessages.length > 0) {
15407
15420
  // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
15408
15421
  this.unreadMessageCount = this.pageSize - 1;
15409
15422
  }
@@ -2143,15 +2143,23 @@ const RtkPaginatedList = class {
2143
2143
  this.maxTS = Math.max(this.maxTS, node.timeMs);
2144
2144
  // if we are at the bottom of the page
2145
2145
  if (this.firstEmptyIndex === -1) {
2146
- // append messages to the page if page has not reached full capacity
2147
- if (this.pages[0].length < this.pageSize) {
2148
- this.pages[0].unshift(node);
2149
- this.newTS = node.timeMs;
2150
- this.rerender();
2146
+ // if there are no pages, load the first page
2147
+ if (this.pages.length < 1) {
2148
+ // update old timer to 1ms ahead of the latest message as we subtract this value to avoid loading duplicate messages when scrolling
2149
+ this.oldTS = node.timeMs + 1;
2150
+ this.loadPrevPage();
2151
2151
  }
2152
2152
  else {
2153
- // if page is at full capacity, load next page
2154
- this.loadNextPage();
2153
+ // append messages to the page if page has not reached full capacity
2154
+ if (this.pages[0].length < this.pageSize) {
2155
+ this.pages[0].unshift(node);
2156
+ this.newTS = node.timeMs;
2157
+ this.rerender();
2158
+ }
2159
+ else {
2160
+ // if page is at full capacity, load next page
2161
+ this.loadNextPage();
2162
+ }
2155
2163
  }
2156
2164
  }
2157
2165
  // If autoscroll is enabled, this method will scroll to the bottom
@@ -2179,7 +2187,12 @@ const RtkPaginatedList = class {
2179
2187
  if (index !== -1) {
2180
2188
  // delete message
2181
2189
  this.pages[i].splice(index, 1);
2182
- if (i === this.firstEmptyIndex + 1) {
2190
+ // if we are on the first page and it's now empty, we need to go back to initial state
2191
+ if (i === 0 && this.pages[i].length === 0) {
2192
+ this.pages.shift();
2193
+ this.firstEmptyIndex = -1;
2194
+ }
2195
+ else if (i === this.firstEmptyIndex + 1) {
2183
2196
  // if newest page is empty, update first empty index
2184
2197
  if (this.pages[i].length === 0)
2185
2198
  this.firstEmptyIndex++;
@@ -2340,10 +2353,10 @@ const RtkPaginatedList = class {
2340
2353
  * div.container is flex=column-reverse
2341
2354
  * which is why div#bottom-scroll comes before div#top-scroll
2342
2355
  */
2343
- return (h(Host, { key: '91ac7d0ca3fb720259945ffaa97f465b34c694fa' }, h("div", { key: '33896c19ecc4359ae163c65b5c71b9f17673e765', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'e26a5ef3979ec132277b9598afc17ea65683f6c8', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'e769a8f54a298af456552733dc9de27d059e5138', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
2356
+ return (h(Host, { key: '9bf695bccf42f2dd43b04725a855b6b77a4062fd' }, h("div", { key: '7c6805ed8b5e831ea6d932cfb5dc3ecf3d312775', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: 'eb6c68f97385b5a14a94ab2dc0abff4836f016f3', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'd1f04db290a9e4128ca58c9bd20b2146a7fc8f12', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
2344
2357
  this.shouldScrollToBottom = true;
2345
2358
  this.scrollToBottom();
2346
- } }, h("rtk-icon", { key: '6fb4cbc2247eb971004a94926b95ebd0f90ab0fd', icon: this.iconPack.chevron_down }))), h("div", { key: 'e91dd8f25012e4509e0ff3cb4d6b65aa9467d427', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '199c0ccffd57716bd5a05dcef8610113d3c58d3d', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: 'b8a3e08a25b2bc1d50b5a9b1b2deda802ae5eb28', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '2cb56b4f70d37548fd9aa71b961559b43c54a922', size: "sm" }), h("div", { key: '4b183c49bfe60fd63af40e02b9b46215c08bb484', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
2359
+ } }, h("rtk-icon", { key: '71d8a85911513bb4069578a63ae45f21ac53554c', icon: this.iconPack.chevron_down }))), h("div", { key: 'b1aa46b8163431df6060163d7c5a87eb1ebcffa3', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'a3de0e7b8ca1ac505a596d86c0b8ecafee5fabba', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '21fa3a4091d3f1311f5d575c277859602718338c', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: '7e018af534e7cd0be3345ca9ad9c8f0a7ab7cc3f', size: "sm" }), h("div", { key: '6c877368fc03c884338402bbcd878929cd4034fb', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
2347
2360
  }
2348
2361
  };
2349
2362
  __decorate$2([
@@ -90,7 +90,7 @@ const RtkChatToggle = class {
90
90
  const { messages } = await chat.getMessages(new Date().getTime(), this.pageSize, true);
91
91
  const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
92
92
  const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
93
- if (newMessages.length === messages.length && messages.length > 0) {
93
+ if (newMessages.length === this.pageSize && newMessages.length > 0) {
94
94
  // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
95
95
  this.unreadMessageCount = this.pageSize - 1;
96
96
  }