@cloudflare/realtimekit-ui 1.1.0-staging.7 → 1.1.0-staging.8
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.
- package/dist/browser.js +1 -1
- package/dist/cjs/rtk-avatar_24.cjs.entry.js +52 -23
- package/dist/collection/components/rtk-chat/rtk-chat.js +16 -2
- package/dist/collection/components/rtk-chat-messages-ui-paginated/rtk-chat-messages-ui-paginated.js +35 -15
- package/dist/collection/components/rtk-paginated-list/rtk-paginated-list.js +26 -11
- package/dist/components/{p-1d16490e.js → p-7e90e964.js} +18 -4
- package/dist/components/{p-7be71567.js → p-9213c3fc.js} +16 -16
- package/dist/components/{p-7f8d9afc.js → p-ad8282dc.js} +21 -6
- package/dist/components/rtk-chat-messages-ui-paginated.js +1 -1
- package/dist/components/rtk-chat-search-results.js +1 -1
- package/dist/components/rtk-chat.js +1 -1
- package/dist/components/rtk-meeting.js +3 -3
- package/dist/components/rtk-paginated-list.js +1 -1
- package/dist/docs/docs-components.json +29 -9
- package/dist/esm/loader.js +52 -23
- package/dist/esm/rtk-avatar_24.entry.js +52 -23
- package/dist/realtimekit-ui/p-8f4f3160.entry.js +1 -0
- package/dist/realtimekit-ui/realtimekit-ui.esm.js +1 -1
- package/dist/types/components/rtk-chat/rtk-chat.d.ts +1 -0
- package/dist/types/components/rtk-chat-messages-ui-paginated/rtk-chat-messages-ui-paginated.d.ts +2 -0
- package/dist/types/components/rtk-paginated-list/rtk-paginated-list.d.ts +4 -3
- package/dist/types/components.d.ts +8 -3
- package/package.json +1 -1
- package/dist/realtimekit-ui/p-25c13ff8.entry.js +0 -1
|
@@ -507,6 +507,13 @@ const RtkChat = class {
|
|
|
507
507
|
const message = event.detail;
|
|
508
508
|
this.meeting.chat.deleteMessage(message.id);
|
|
509
509
|
};
|
|
510
|
+
this.onMessageEdit = (event) => {
|
|
511
|
+
const message = event.detail;
|
|
512
|
+
if (message.type !== 'text')
|
|
513
|
+
return;
|
|
514
|
+
this.replyMessage = null;
|
|
515
|
+
this.editingMessage = message;
|
|
516
|
+
};
|
|
510
517
|
this.getPrivateChatRecipients = () => {
|
|
511
518
|
const participants = this.getFilteredParticipants().map((participant) => {
|
|
512
519
|
const key = chat.generateChatGroupKey([participant.userId, this.meeting.self.userId]);
|
|
@@ -691,14 +698,21 @@ const RtkChat = class {
|
|
|
691
698
|
const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
|
|
692
699
|
const message = this.editingMessage ? this.editingMessage.message : '';
|
|
693
700
|
const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
|
|
694
|
-
|
|
701
|
+
const draftStorageKey = this.selectedChannelId
|
|
702
|
+
? `rtk-chat-draft-${this.selectedChannelId}`
|
|
703
|
+
: 'rtk-chat-draft';
|
|
704
|
+
const editStorageKey = this.editingMessage
|
|
705
|
+
? `rtk-chat-edit-${(_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : 'no-channel'}-${this.editingMessage.id}`
|
|
706
|
+
: 'rtk-chat-edit';
|
|
707
|
+
const storageKey = this.editingMessage ? editStorageKey : draftStorageKey;
|
|
708
|
+
return (index$1.h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: storageKey, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: this.overrides.disableEmojiPicker, maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), index$1.h("slot", { name: "chat-addon", slot: "chat-addon" })));
|
|
695
709
|
}
|
|
696
710
|
render() {
|
|
697
711
|
var _a;
|
|
698
712
|
if (!this.meeting) {
|
|
699
713
|
return null;
|
|
700
714
|
}
|
|
701
|
-
return (index$1.h(index$1.Host, null, index$1.h("div", { class: "chat-container" }, index$1.h("div", { class: "chat" }, this.isFileMessagingAllowed() && (index$1.h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, index$1.h("rtk-icon", { icon: this.iconPack.attach }), index$1.h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (index$1.h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), index$1.h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
|
|
715
|
+
return (index$1.h(index$1.Host, null, index$1.h("div", { class: "chat-container" }, index$1.h("div", { class: "chat" }, this.isFileMessagingAllowed() && (index$1.h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, index$1.h("rtk-icon", { icon: this.iconPack.attach }), index$1.h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (index$1.h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), index$1.h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onEditMessage: this.onMessageEdit, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
|
|
702
716
|
}
|
|
703
717
|
get host() { return index$1.getElement(this); }
|
|
704
718
|
static get watchers() { return {
|
|
@@ -941,6 +955,7 @@ const RtkChatMessagesUiPaginated = class {
|
|
|
941
955
|
index$1.registerInstance(this, hostRef);
|
|
942
956
|
this.editMessageInit = index$1.createEvent(this, "editMessageInit", 7);
|
|
943
957
|
this.onPinMessage = index$1.createEvent(this, "pinMessage", 7);
|
|
958
|
+
this.onEditMessage = index$1.createEvent(this, "editMessage", 7);
|
|
944
959
|
this.onDeleteMessage = index$1.createEvent(this, "deleteMessage", 7);
|
|
945
960
|
this.stateUpdate = index$1.createEvent(this, "rtkStateUpdate", 7);
|
|
946
961
|
/** Icon pack */
|
|
@@ -991,22 +1006,18 @@ const RtkChatMessagesUiPaginated = class {
|
|
|
991
1006
|
};
|
|
992
1007
|
this.getMessageActions = (message) => {
|
|
993
1008
|
const actions = [];
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
const canDelete = message.userId === this.meeting.self.userId;
|
|
1002
|
-
if (this.meeting.self.permissions.pinParticipant) {
|
|
1009
|
+
const messageBelongsToSelf = message.userId === this.meeting.self.userId;
|
|
1010
|
+
actions.push({
|
|
1011
|
+
id: 'pin_message',
|
|
1012
|
+
label: message.pinned ? this.t('unpin') : this.t('pin'),
|
|
1013
|
+
icon: this.iconPack.pin,
|
|
1014
|
+
});
|
|
1015
|
+
if (messageBelongsToSelf) {
|
|
1003
1016
|
actions.push({
|
|
1004
|
-
id: '
|
|
1005
|
-
label:
|
|
1006
|
-
icon: this.iconPack.
|
|
1017
|
+
id: 'edit_message',
|
|
1018
|
+
label: this.t('chat.edit_msg'),
|
|
1019
|
+
icon: this.iconPack.edit,
|
|
1007
1020
|
});
|
|
1008
|
-
}
|
|
1009
|
-
if (canDelete) {
|
|
1010
1021
|
actions.push({
|
|
1011
1022
|
id: 'delete_message',
|
|
1012
1023
|
label: this.t('chat.delete_msg'),
|
|
@@ -1020,6 +1031,9 @@ const RtkChatMessagesUiPaginated = class {
|
|
|
1020
1031
|
case 'pin_message':
|
|
1021
1032
|
this.onPinMessage.emit(message);
|
|
1022
1033
|
break;
|
|
1034
|
+
case 'edit_message':
|
|
1035
|
+
this.onEditMessage.emit(message);
|
|
1036
|
+
break;
|
|
1023
1037
|
case 'delete_message':
|
|
1024
1038
|
this.onDeleteMessage.emit(message);
|
|
1025
1039
|
break;
|
|
@@ -1096,7 +1110,7 @@ const RtkChatMessagesUiPaginated = class {
|
|
|
1096
1110
|
this.lastReadMessageIndex = -1;
|
|
1097
1111
|
}
|
|
1098
1112
|
render() {
|
|
1099
|
-
return (index$1.h(index$1.Host, { key: '
|
|
1113
|
+
return (index$1.h(index$1.Host, { key: '55b594d1fad2c164a70b71e297f63273ece0bc4f' }, index$1.h("rtk-paginated-list", { key: '1554ee896643feec72a02672f156f95c988813ce', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, index$1.h("slot", { key: '03aeb2069b87cb217b9759cabd3835c9bac81f11' }))));
|
|
1100
1114
|
}
|
|
1101
1115
|
get host() { return index$1.getElement(this); }
|
|
1102
1116
|
static get watchers() { return {
|
|
@@ -2130,7 +2144,8 @@ const RtkPaginatedList = class {
|
|
|
2130
2144
|
this.oldTS = node.timeMs + 1;
|
|
2131
2145
|
this.loadPrevPage();
|
|
2132
2146
|
}
|
|
2133
|
-
else {
|
|
2147
|
+
else if (this.maxTS === this.newTS) {
|
|
2148
|
+
this.maxTS = node.timeMs;
|
|
2134
2149
|
// append messages to the page if page has not reached full capacity
|
|
2135
2150
|
if (this.pages[0].length < this.pageSize) {
|
|
2136
2151
|
this.pages[0].unshift(node);
|
|
@@ -2179,10 +2194,21 @@ const RtkPaginatedList = class {
|
|
|
2179
2194
|
}
|
|
2180
2195
|
/**
|
|
2181
2196
|
* Updates a new node anywhere in the list
|
|
2182
|
-
* @param {string}
|
|
2183
|
-
* @param {DataNode}
|
|
2197
|
+
* @param {string} id - The id of the node to update
|
|
2198
|
+
* @param {DataNode} node - The updated data node
|
|
2184
2199
|
* */
|
|
2185
|
-
async onNodeUpdate(
|
|
2200
|
+
async onNodeUpdate(id, node) {
|
|
2201
|
+
for (let i = this.pages.length - 1; i >= 0; i--) {
|
|
2202
|
+
const index = this.pages[i].findIndex((node) => node.id === id);
|
|
2203
|
+
// if message not found, move on
|
|
2204
|
+
if (index === -1)
|
|
2205
|
+
continue;
|
|
2206
|
+
// edit message
|
|
2207
|
+
this.pages[i][index] = node;
|
|
2208
|
+
this.rerender();
|
|
2209
|
+
break;
|
|
2210
|
+
}
|
|
2211
|
+
}
|
|
2186
2212
|
connectedCallback() {
|
|
2187
2213
|
this.rerender = debounce.debounce(this.rerender.bind(this), 50, { maxWait: 200 });
|
|
2188
2214
|
}
|
|
@@ -2233,6 +2259,8 @@ const RtkPaginatedList = class {
|
|
|
2233
2259
|
const lastPage = this.pages[this.pages.length - 1];
|
|
2234
2260
|
this.oldTS = lastPage[lastPage.length - 1].timeMs;
|
|
2235
2261
|
this.newTS = this.pages[0][0].timeMs;
|
|
2262
|
+
if (!this.maxTS)
|
|
2263
|
+
this.maxTS = this.newTS;
|
|
2236
2264
|
this.rerender();
|
|
2237
2265
|
// fix scroll position
|
|
2238
2266
|
if (scrollAnchor)
|
|
@@ -2260,6 +2288,7 @@ const RtkPaginatedList = class {
|
|
|
2260
2288
|
this.isLoadingBottom = false;
|
|
2261
2289
|
// no more new messages to load
|
|
2262
2290
|
if (!data.length) {
|
|
2291
|
+
this.maxTS = this.newTS;
|
|
2263
2292
|
this.showNewMessagesCTR = false;
|
|
2264
2293
|
this.shouldScrollToBottom = false;
|
|
2265
2294
|
break;
|
|
@@ -2355,10 +2384,10 @@ const RtkPaginatedList = class {
|
|
|
2355
2384
|
/**
|
|
2356
2385
|
* div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
|
|
2357
2386
|
*/
|
|
2358
|
-
return (index$1.h(index$1.Host, { key: '
|
|
2387
|
+
return (index$1.h(index$1.Host, { key: '5f036ac16ace127734d5ee172d537c64baeab415' }, index$1.h("div", { key: 'b6d8cf3019a72350f7a3a5b4d020b6ab39793f53', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: '5c63462ffd995a3e266652bba4e3377636c5f9ca', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: 'c1fc4f2759d5be662047245b0dae3eb6f65a9b50', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
|
|
2359
2388
|
this.shouldScrollToBottom = true;
|
|
2360
2389
|
this.scrollToBottom();
|
|
2361
|
-
} }, index$1.h("rtk-icon", { key: '
|
|
2390
|
+
} }, index$1.h("rtk-icon", { key: '96b19395a2ca8e87ca5004f675cf79f8d58f036c', icon: this.iconPack.chevron_down }))), index$1.h("div", { key: '84789a3d0fa4645be711a87cda1e109e4f7d0db2', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: 'd17f28cc01695220ed6e705d528e8f555b77e8ea', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: '4ee308d335cdc1f86e2bfdcc20611f50a51ef816', 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: 'c07c4dd4c4ed0adf01d2fc224b7196a0f86243fd', size: "sm" }), index$1.h("div", { key: '52161ac30062c2262f1cdbcded50f2716f6ed20e', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
|
|
2362
2391
|
}
|
|
2363
2392
|
};
|
|
2364
2393
|
__decorate$2([
|
|
@@ -283,6 +283,13 @@ export class RtkChat {
|
|
|
283
283
|
const message = event.detail;
|
|
284
284
|
this.meeting.chat.deleteMessage(message.id);
|
|
285
285
|
};
|
|
286
|
+
this.onMessageEdit = (event) => {
|
|
287
|
+
const message = event.detail;
|
|
288
|
+
if (message.type !== 'text')
|
|
289
|
+
return;
|
|
290
|
+
this.replyMessage = null;
|
|
291
|
+
this.editingMessage = message;
|
|
292
|
+
};
|
|
286
293
|
this.getPrivateChatRecipients = () => {
|
|
287
294
|
const participants = this.getFilteredParticipants().map((participant) => {
|
|
288
295
|
const key = generateChatGroupKey([participant.userId, this.meeting.self.userId]);
|
|
@@ -467,14 +474,21 @@ export class RtkChat {
|
|
|
467
474
|
const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
|
|
468
475
|
const message = this.editingMessage ? this.editingMessage.message : '';
|
|
469
476
|
const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
|
|
470
|
-
|
|
477
|
+
const draftStorageKey = this.selectedChannelId
|
|
478
|
+
? `rtk-chat-draft-${this.selectedChannelId}`
|
|
479
|
+
: 'rtk-chat-draft';
|
|
480
|
+
const editStorageKey = this.editingMessage
|
|
481
|
+
? `rtk-chat-edit-${(_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : 'no-channel'}-${this.editingMessage.id}`
|
|
482
|
+
: 'rtk-chat-edit';
|
|
483
|
+
const storageKey = this.editingMessage ? editStorageKey : draftStorageKey;
|
|
484
|
+
return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: storageKey, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: this.overrides.disableEmojiPicker, maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), h("slot", { name: "chat-addon", slot: "chat-addon" })));
|
|
471
485
|
}
|
|
472
486
|
render() {
|
|
473
487
|
var _a;
|
|
474
488
|
if (!this.meeting) {
|
|
475
489
|
return null;
|
|
476
490
|
}
|
|
477
|
-
return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
|
|
491
|
+
return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onEditMessage: this.onMessageEdit, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
|
|
478
492
|
}
|
|
479
493
|
static get is() { return "rtk-chat"; }
|
|
480
494
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/rtk-chat-messages-ui-paginated/rtk-chat-messages-ui-paginated.js
CHANGED
|
@@ -62,22 +62,18 @@ export class RtkChatMessagesUiPaginated {
|
|
|
62
62
|
};
|
|
63
63
|
this.getMessageActions = (message) => {
|
|
64
64
|
const actions = [];
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
const canDelete = message.userId === this.meeting.self.userId;
|
|
73
|
-
if (this.meeting.self.permissions.pinParticipant) {
|
|
65
|
+
const messageBelongsToSelf = message.userId === this.meeting.self.userId;
|
|
66
|
+
actions.push({
|
|
67
|
+
id: 'pin_message',
|
|
68
|
+
label: message.pinned ? this.t('unpin') : this.t('pin'),
|
|
69
|
+
icon: this.iconPack.pin,
|
|
70
|
+
});
|
|
71
|
+
if (messageBelongsToSelf) {
|
|
74
72
|
actions.push({
|
|
75
|
-
id: '
|
|
76
|
-
label:
|
|
77
|
-
icon: this.iconPack.
|
|
73
|
+
id: 'edit_message',
|
|
74
|
+
label: this.t('chat.edit_msg'),
|
|
75
|
+
icon: this.iconPack.edit,
|
|
78
76
|
});
|
|
79
|
-
}
|
|
80
|
-
if (canDelete) {
|
|
81
77
|
actions.push({
|
|
82
78
|
id: 'delete_message',
|
|
83
79
|
label: this.t('chat.delete_msg'),
|
|
@@ -91,6 +87,9 @@ export class RtkChatMessagesUiPaginated {
|
|
|
91
87
|
case 'pin_message':
|
|
92
88
|
this.onPinMessage.emit(message);
|
|
93
89
|
break;
|
|
90
|
+
case 'edit_message':
|
|
91
|
+
this.onEditMessage.emit(message);
|
|
92
|
+
break;
|
|
94
93
|
case 'delete_message':
|
|
95
94
|
this.onDeleteMessage.emit(message);
|
|
96
95
|
break;
|
|
@@ -169,7 +168,7 @@ export class RtkChatMessagesUiPaginated {
|
|
|
169
168
|
this.lastReadMessageIndex = -1;
|
|
170
169
|
}
|
|
171
170
|
render() {
|
|
172
|
-
return (h(Host, { key: '
|
|
171
|
+
return (h(Host, { key: '55b594d1fad2c164a70b71e297f63273ece0bc4f' }, h("rtk-paginated-list", { key: '1554ee896643feec72a02672f156f95c988813ce', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: '03aeb2069b87cb217b9759cabd3835c9bac81f11' }))));
|
|
173
172
|
}
|
|
174
173
|
static get is() { return "rtk-chat-messages-ui-paginated"; }
|
|
175
174
|
static get encapsulation() { return "shadow"; }
|
|
@@ -394,6 +393,27 @@ export class RtkChatMessagesUiPaginated {
|
|
|
394
393
|
}
|
|
395
394
|
}
|
|
396
395
|
}
|
|
396
|
+
}, {
|
|
397
|
+
"method": "onEditMessage",
|
|
398
|
+
"name": "editMessage",
|
|
399
|
+
"bubbles": true,
|
|
400
|
+
"cancelable": true,
|
|
401
|
+
"composed": true,
|
|
402
|
+
"docs": {
|
|
403
|
+
"tags": [],
|
|
404
|
+
"text": "Event emitted when a message is edited"
|
|
405
|
+
},
|
|
406
|
+
"complexType": {
|
|
407
|
+
"original": "Message",
|
|
408
|
+
"resolved": "CustomMessage | FileMessage | ImageMessage | TextMessage",
|
|
409
|
+
"references": {
|
|
410
|
+
"Message": {
|
|
411
|
+
"location": "import",
|
|
412
|
+
"path": "@cloudflare/realtimekit",
|
|
413
|
+
"id": "node_modules::Message"
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
}
|
|
397
417
|
}, {
|
|
398
418
|
"method": "onDeleteMessage",
|
|
399
419
|
"name": "deleteMessage",
|
|
@@ -75,7 +75,8 @@ export class RtkPaginatedList {
|
|
|
75
75
|
this.oldTS = node.timeMs + 1;
|
|
76
76
|
this.loadPrevPage();
|
|
77
77
|
}
|
|
78
|
-
else {
|
|
78
|
+
else if (this.maxTS === this.newTS) {
|
|
79
|
+
this.maxTS = node.timeMs;
|
|
79
80
|
// append messages to the page if page has not reached full capacity
|
|
80
81
|
if (this.pages[0].length < this.pageSize) {
|
|
81
82
|
this.pages[0].unshift(node);
|
|
@@ -124,10 +125,21 @@ export class RtkPaginatedList {
|
|
|
124
125
|
}
|
|
125
126
|
/**
|
|
126
127
|
* Updates a new node anywhere in the list
|
|
127
|
-
* @param {string}
|
|
128
|
-
* @param {DataNode}
|
|
128
|
+
* @param {string} id - The id of the node to update
|
|
129
|
+
* @param {DataNode} node - The updated data node
|
|
129
130
|
* */
|
|
130
|
-
async onNodeUpdate(
|
|
131
|
+
async onNodeUpdate(id, node) {
|
|
132
|
+
for (let i = this.pages.length - 1; i >= 0; i--) {
|
|
133
|
+
const index = this.pages[i].findIndex((node) => node.id === id);
|
|
134
|
+
// if message not found, move on
|
|
135
|
+
if (index === -1)
|
|
136
|
+
continue;
|
|
137
|
+
// edit message
|
|
138
|
+
this.pages[i][index] = node;
|
|
139
|
+
this.rerender();
|
|
140
|
+
break;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
131
143
|
connectedCallback() {
|
|
132
144
|
this.rerender = debounce(this.rerender.bind(this), 50, { maxWait: 200 });
|
|
133
145
|
}
|
|
@@ -178,6 +190,8 @@ export class RtkPaginatedList {
|
|
|
178
190
|
const lastPage = this.pages[this.pages.length - 1];
|
|
179
191
|
this.oldTS = lastPage[lastPage.length - 1].timeMs;
|
|
180
192
|
this.newTS = this.pages[0][0].timeMs;
|
|
193
|
+
if (!this.maxTS)
|
|
194
|
+
this.maxTS = this.newTS;
|
|
181
195
|
this.rerender();
|
|
182
196
|
// fix scroll position
|
|
183
197
|
if (scrollAnchor)
|
|
@@ -205,6 +219,7 @@ export class RtkPaginatedList {
|
|
|
205
219
|
this.isLoadingBottom = false;
|
|
206
220
|
// no more new messages to load
|
|
207
221
|
if (!data.length) {
|
|
222
|
+
this.maxTS = this.newTS;
|
|
208
223
|
this.showNewMessagesCTR = false;
|
|
209
224
|
this.shouldScrollToBottom = false;
|
|
210
225
|
break;
|
|
@@ -300,10 +315,10 @@ export class RtkPaginatedList {
|
|
|
300
315
|
/**
|
|
301
316
|
* div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
|
|
302
317
|
*/
|
|
303
|
-
return (h(Host, { key: '
|
|
318
|
+
return (h(Host, { key: '5f036ac16ace127734d5ee172d537c64baeab415' }, h("div", { key: 'b6d8cf3019a72350f7a3a5b4d020b6ab39793f53', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '5c63462ffd995a3e266652bba4e3377636c5f9ca', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'c1fc4f2759d5be662047245b0dae3eb6f65a9b50', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
|
|
304
319
|
this.shouldScrollToBottom = true;
|
|
305
320
|
this.scrollToBottom();
|
|
306
|
-
} }, h("rtk-icon", { key: '
|
|
321
|
+
} }, h("rtk-icon", { key: '96b19395a2ca8e87ca5004f675cf79f8d58f036c', icon: this.iconPack.chevron_down }))), h("div", { key: '84789a3d0fa4645be711a87cda1e109e4f7d0db2', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'd17f28cc01695220ed6e705d528e8f555b77e8ea', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '4ee308d335cdc1f86e2bfdcc20611f50a51ef816', 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: 'c07c4dd4c4ed0adf01d2fc224b7196a0f86243fd', size: "sm" }), h("div", { key: '52161ac30062c2262f1cdbcded50f2716f6ed20e', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
|
|
307
322
|
}
|
|
308
323
|
static get is() { return "rtk-paginated-list"; }
|
|
309
324
|
static get encapsulation() { return "shadow"; }
|
|
@@ -576,13 +591,13 @@ export class RtkPaginatedList {
|
|
|
576
591
|
},
|
|
577
592
|
"onNodeUpdate": {
|
|
578
593
|
"complexType": {
|
|
579
|
-
"signature": "(
|
|
594
|
+
"signature": "(id: string, node: DataNode) => Promise<void>",
|
|
580
595
|
"parameters": [{
|
|
581
|
-
"name": "
|
|
596
|
+
"name": "id",
|
|
582
597
|
"type": "string",
|
|
583
598
|
"docs": "- The id of the node to update"
|
|
584
599
|
}, {
|
|
585
|
-
"name": "
|
|
600
|
+
"name": "node",
|
|
586
601
|
"type": "DataNode",
|
|
587
602
|
"docs": "- The updated data node"
|
|
588
603
|
}],
|
|
@@ -603,10 +618,10 @@ export class RtkPaginatedList {
|
|
|
603
618
|
"text": "Updates a new node anywhere in the list",
|
|
604
619
|
"tags": [{
|
|
605
620
|
"name": "param",
|
|
606
|
-
"text": "
|
|
621
|
+
"text": "id - The id of the node to update"
|
|
607
622
|
}, {
|
|
608
623
|
"name": "param",
|
|
609
|
-
"text": "
|
|
624
|
+
"text": "node - The updated data node"
|
|
610
625
|
}]
|
|
611
626
|
}
|
|
612
627
|
}
|
|
@@ -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-
|
|
10
|
+
import { d as defineCustomElement$i } from './p-9213c3fc.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-
|
|
23
|
+
import { d as defineCustomElement$5 } from './p-ad8282dc.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';
|
|
@@ -306,6 +306,13 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
|
|
|
306
306
|
const message = event.detail;
|
|
307
307
|
this.meeting.chat.deleteMessage(message.id);
|
|
308
308
|
};
|
|
309
|
+
this.onMessageEdit = (event) => {
|
|
310
|
+
const message = event.detail;
|
|
311
|
+
if (message.type !== 'text')
|
|
312
|
+
return;
|
|
313
|
+
this.replyMessage = null;
|
|
314
|
+
this.editingMessage = message;
|
|
315
|
+
};
|
|
309
316
|
this.getPrivateChatRecipients = () => {
|
|
310
317
|
const participants = this.getFilteredParticipants().map((participant) => {
|
|
311
318
|
const key = generateChatGroupKey([participant.userId, this.meeting.self.userId]);
|
|
@@ -490,14 +497,21 @@ const RtkChat = /*@__PURE__*/ proxyCustomElement(class RtkChat extends H {
|
|
|
490
497
|
const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
|
|
491
498
|
const message = this.editingMessage ? this.editingMessage.message : '';
|
|
492
499
|
const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
|
|
493
|
-
|
|
500
|
+
const draftStorageKey = this.selectedChannelId
|
|
501
|
+
? `rtk-chat-draft-${this.selectedChannelId}`
|
|
502
|
+
: 'rtk-chat-draft';
|
|
503
|
+
const editStorageKey = this.editingMessage
|
|
504
|
+
? `rtk-chat-edit-${(_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : 'no-channel'}-${this.editingMessage.id}`
|
|
505
|
+
: 'rtk-chat-edit';
|
|
506
|
+
const storageKey = this.editingMessage ? editStorageKey : draftStorageKey;
|
|
507
|
+
return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: storageKey, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: this.overrides.disableEmojiPicker, maxLength: this.meeting.chat.maxTextLimit, rateLimits: this.meeting.chat.rateLimits, inputTextPlaceholder: this.t('chat.message_placeholder'), onNewMessage: this.onNewMessageHandler, onEditMessage: this.onEditMessageHandler, onEditCancel: this.onEditCancel, onQuotedMessageDismiss: this.onQuotedMessageDismiss }, uiProps), h("slot", { name: "chat-addon", slot: "chat-addon" })));
|
|
494
508
|
}
|
|
495
509
|
render() {
|
|
496
510
|
var _a;
|
|
497
511
|
if (!this.meeting) {
|
|
498
512
|
return null;
|
|
499
513
|
}
|
|
500
|
-
return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
|
|
514
|
+
return (h(Host, null, h("div", { class: "chat-container" }, h("div", { class: "chat" }, this.isFileMessagingAllowed() && (h("div", { id: "dropzone", class: { active: this.dropzoneActivated }, part: "dropzone" }, h("rtk-icon", { icon: this.iconPack.attach }), h("p", null, this.t('chat.send_attachment')))), this.renderPinnedMessagesHeader(), this.isPrivateChatSupported() && (h("rtk-channel-selector-view", { channels: this.getPrivateChatRecipients(), selectedChannelId: ((_a = this.selectedParticipant) === null || _a === void 0 ? void 0 : _a.userId) || 'everyone', onChannelChange: this.updateRecipients, t: this.t, viewAs: "dropdown" })), h("rtk-chat-messages-ui-paginated", { meeting: this.meeting, onPinMessage: this.onPinMessage, onEditMessage: this.onMessageEdit, onDeleteMessage: this.onDeleteMessage, size: this.size, iconPack: this.iconPack, t: this.t }), this.renderComposerUI()))));
|
|
501
515
|
}
|
|
502
516
|
get host() { return this; }
|
|
503
517
|
static get watchers() { return {
|
|
@@ -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-
|
|
14
|
+
import { d as defineCustomElement$3 } from './p-ad8282dc.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
|
|
|
@@ -35,6 +35,7 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
|
|
|
35
35
|
this.__attachShadow();
|
|
36
36
|
this.editMessageInit = createEvent(this, "editMessageInit", 7);
|
|
37
37
|
this.onPinMessage = createEvent(this, "pinMessage", 7);
|
|
38
|
+
this.onEditMessage = createEvent(this, "editMessage", 7);
|
|
38
39
|
this.onDeleteMessage = createEvent(this, "deleteMessage", 7);
|
|
39
40
|
this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
|
|
40
41
|
/** Icon pack */
|
|
@@ -85,22 +86,18 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
|
|
|
85
86
|
};
|
|
86
87
|
this.getMessageActions = (message) => {
|
|
87
88
|
const actions = [];
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
const canDelete = message.userId === this.meeting.self.userId;
|
|
96
|
-
if (this.meeting.self.permissions.pinParticipant) {
|
|
89
|
+
const messageBelongsToSelf = message.userId === this.meeting.self.userId;
|
|
90
|
+
actions.push({
|
|
91
|
+
id: 'pin_message',
|
|
92
|
+
label: message.pinned ? this.t('unpin') : this.t('pin'),
|
|
93
|
+
icon: this.iconPack.pin,
|
|
94
|
+
});
|
|
95
|
+
if (messageBelongsToSelf) {
|
|
97
96
|
actions.push({
|
|
98
|
-
id: '
|
|
99
|
-
label:
|
|
100
|
-
icon: this.iconPack.
|
|
97
|
+
id: 'edit_message',
|
|
98
|
+
label: this.t('chat.edit_msg'),
|
|
99
|
+
icon: this.iconPack.edit,
|
|
101
100
|
});
|
|
102
|
-
}
|
|
103
|
-
if (canDelete) {
|
|
104
101
|
actions.push({
|
|
105
102
|
id: 'delete_message',
|
|
106
103
|
label: this.t('chat.delete_msg'),
|
|
@@ -114,6 +111,9 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
|
|
|
114
111
|
case 'pin_message':
|
|
115
112
|
this.onPinMessage.emit(message);
|
|
116
113
|
break;
|
|
114
|
+
case 'edit_message':
|
|
115
|
+
this.onEditMessage.emit(message);
|
|
116
|
+
break;
|
|
117
117
|
case 'delete_message':
|
|
118
118
|
this.onDeleteMessage.emit(message);
|
|
119
119
|
break;
|
|
@@ -190,7 +190,7 @@ const RtkChatMessagesUiPaginated = /*@__PURE__*/ proxyCustomElement(class RtkCha
|
|
|
190
190
|
this.lastReadMessageIndex = -1;
|
|
191
191
|
}
|
|
192
192
|
render() {
|
|
193
|
-
return (h(Host, { key: '
|
|
193
|
+
return (h(Host, { key: '55b594d1fad2c164a70b71e297f63273ece0bc4f' }, h("rtk-paginated-list", { key: '1554ee896643feec72a02672f156f95c988813ce', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, selectedItemId: this.selectedChannelId, emptyListLabel: this.t('chat.empty_channel') }, h("slot", { key: '03aeb2069b87cb217b9759cabd3835c9bac81f11' }))));
|
|
194
194
|
}
|
|
195
195
|
get host() { return this; }
|
|
196
196
|
static get watchers() { return {
|
|
@@ -84,7 +84,8 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
|
|
|
84
84
|
this.oldTS = node.timeMs + 1;
|
|
85
85
|
this.loadPrevPage();
|
|
86
86
|
}
|
|
87
|
-
else {
|
|
87
|
+
else if (this.maxTS === this.newTS) {
|
|
88
|
+
this.maxTS = node.timeMs;
|
|
88
89
|
// append messages to the page if page has not reached full capacity
|
|
89
90
|
if (this.pages[0].length < this.pageSize) {
|
|
90
91
|
this.pages[0].unshift(node);
|
|
@@ -133,10 +134,21 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
|
|
|
133
134
|
}
|
|
134
135
|
/**
|
|
135
136
|
* Updates a new node anywhere in the list
|
|
136
|
-
* @param {string}
|
|
137
|
-
* @param {DataNode}
|
|
137
|
+
* @param {string} id - The id of the node to update
|
|
138
|
+
* @param {DataNode} node - The updated data node
|
|
138
139
|
* */
|
|
139
|
-
async onNodeUpdate(
|
|
140
|
+
async onNodeUpdate(id, node) {
|
|
141
|
+
for (let i = this.pages.length - 1; i >= 0; i--) {
|
|
142
|
+
const index = this.pages[i].findIndex((node) => node.id === id);
|
|
143
|
+
// if message not found, move on
|
|
144
|
+
if (index === -1)
|
|
145
|
+
continue;
|
|
146
|
+
// edit message
|
|
147
|
+
this.pages[i][index] = node;
|
|
148
|
+
this.rerender();
|
|
149
|
+
break;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
140
152
|
connectedCallback() {
|
|
141
153
|
this.rerender = debounce(this.rerender.bind(this), 50, { maxWait: 200 });
|
|
142
154
|
}
|
|
@@ -187,6 +199,8 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
|
|
|
187
199
|
const lastPage = this.pages[this.pages.length - 1];
|
|
188
200
|
this.oldTS = lastPage[lastPage.length - 1].timeMs;
|
|
189
201
|
this.newTS = this.pages[0][0].timeMs;
|
|
202
|
+
if (!this.maxTS)
|
|
203
|
+
this.maxTS = this.newTS;
|
|
190
204
|
this.rerender();
|
|
191
205
|
// fix scroll position
|
|
192
206
|
if (scrollAnchor)
|
|
@@ -214,6 +228,7 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
|
|
|
214
228
|
this.isLoadingBottom = false;
|
|
215
229
|
// no more new messages to load
|
|
216
230
|
if (!data.length) {
|
|
231
|
+
this.maxTS = this.newTS;
|
|
217
232
|
this.showNewMessagesCTR = false;
|
|
218
233
|
this.shouldScrollToBottom = false;
|
|
219
234
|
break;
|
|
@@ -309,10 +324,10 @@ const RtkPaginatedList = /*@__PURE__*/ proxyCustomElement(class RtkPaginatedList
|
|
|
309
324
|
/**
|
|
310
325
|
* div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
|
|
311
326
|
*/
|
|
312
|
-
return (h(Host, { key: '
|
|
327
|
+
return (h(Host, { key: '5f036ac16ace127734d5ee172d537c64baeab415' }, h("div", { key: 'b6d8cf3019a72350f7a3a5b4d020b6ab39793f53', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '5c63462ffd995a3e266652bba4e3377636c5f9ca', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'c1fc4f2759d5be662047245b0dae3eb6f65a9b50', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
|
|
313
328
|
this.shouldScrollToBottom = true;
|
|
314
329
|
this.scrollToBottom();
|
|
315
|
-
} }, h("rtk-icon", { key: '
|
|
330
|
+
} }, h("rtk-icon", { key: '96b19395a2ca8e87ca5004f675cf79f8d58f036c', icon: this.iconPack.chevron_down }))), h("div", { key: '84789a3d0fa4645be711a87cda1e109e4f7d0db2', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'd17f28cc01695220ed6e705d528e8f555b77e8ea', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '4ee308d335cdc1f86e2bfdcc20611f50a51ef816', 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: 'c07c4dd4c4ed0adf01d2fc224b7196a0f86243fd', size: "sm" }), h("div", { key: '52161ac30062c2262f1cdbcded50f2716f6ed20e', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
|
|
316
331
|
}
|
|
317
332
|
static get style() { return RtkPaginatedListStyle0; }
|
|
318
333
|
}, [1, "rtk-paginated-list", {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { R as RtkChatMessagesUiPaginated$1, d as defineCustomElement$1 } from './p-9213c3fc.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-
|
|
14
|
+
import { d as defineCustomElement$4 } from './p-ad8282dc.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
|
|