@cloudflare/realtimekit-ui 1.1.0-staging.12 → 1.1.0-staging.14

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.
Files changed (54) hide show
  1. package/dist/browser.js +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/realtimekit-ui.cjs.js +1 -1
  4. package/dist/cjs/rtk-avatar_26.cjs.entry.js +50 -21
  5. package/dist/cjs/rtk-chat-toggle.cjs.entry.js +5 -12
  6. package/dist/collection/components/rtk-chat-messages-ui-paginated/rtk-chat-messages-ui-paginated.js +2 -2
  7. package/dist/collection/components/rtk-chat-selector/rtk-chat-selector.css +7 -8
  8. package/dist/collection/components/rtk-chat-selector/rtk-chat-selector.js +34 -10
  9. package/dist/collection/components/rtk-chat-toggle/rtk-chat-toggle.js +5 -12
  10. package/dist/collection/components/rtk-markdown-view/rtk-markdown-view.css +6 -0
  11. package/dist/collection/components/rtk-markdown-view/rtk-markdown-view.js +1 -1
  12. package/dist/collection/components/rtk-message-view/rtk-message-view.css +11 -0
  13. package/dist/collection/components/rtk-paginated-list/rtk-paginated-list.css +20 -4
  14. package/dist/collection/components/rtk-paginated-list/rtk-paginated-list.js +25 -2
  15. package/dist/collection/components/rtk-pinned-message-selector/rtk-pinned-message-selector.css +2 -7
  16. package/dist/collection/components/rtk-pinned-message-selector/rtk-pinned-message-selector.js +2 -2
  17. package/dist/components/{p-f5aecaad.js → p-15d2291f.js} +1 -1
  18. package/dist/components/{p-90420dc5.js → p-27029836.js} +2 -2
  19. package/dist/components/{p-469f4396.js → p-298aa8be.js} +2 -2
  20. package/dist/components/{p-862ec1f9.js → p-2f68e7bb.js} +1 -1
  21. package/dist/components/{p-54e0acc1.js → p-7f71b3c7.js} +9 -9
  22. package/dist/components/{p-db5556c3.js → p-881e5548.js} +6 -6
  23. package/dist/components/{p-d9fa18db.js → p-c39c6e12.js} +4 -4
  24. package/dist/components/{p-793f074d.js → p-c3bfa8f1.js} +10 -3
  25. package/dist/components/{p-7fcbd2dd.js → p-c9ee0428.js} +35 -11
  26. package/dist/components/{p-321a4aef.js → p-e93218b8.js} +3 -3
  27. package/dist/components/rtk-chat-composer-view.js +1 -1
  28. package/dist/components/rtk-chat-header.js +1 -1
  29. package/dist/components/rtk-chat-messages-ui-paginated.js +1 -1
  30. package/dist/components/rtk-chat-messages-ui.js +3 -3
  31. package/dist/components/rtk-chat-search-results.js +1 -1
  32. package/dist/components/rtk-chat-selector.js +1 -1
  33. package/dist/components/rtk-chat-toggle.js +5 -12
  34. package/dist/components/rtk-chat.js +1 -1
  35. package/dist/components/rtk-markdown-view.js +1 -1
  36. package/dist/components/rtk-meeting.js +10 -10
  37. package/dist/components/rtk-message-view.js +1 -1
  38. package/dist/components/rtk-paginated-list.js +1 -1
  39. package/dist/components/rtk-pinned-message-selector.js +1 -1
  40. package/dist/components/rtk-text-message-view.js +1 -1
  41. package/dist/docs/docs-components.json +23 -1
  42. package/dist/esm/loader.js +56 -34
  43. package/dist/esm/realtimekit-ui.js +1 -1
  44. package/dist/esm/rtk-avatar_26.entry.js +50 -21
  45. package/dist/esm/rtk-chat-toggle.entry.js +5 -12
  46. package/dist/realtimekit-ui/p-7c6cdccf.entry.js +1 -0
  47. package/dist/realtimekit-ui/p-9e27670a.entry.js +1 -0
  48. package/dist/realtimekit-ui/realtimekit-ui.esm.js +1 -1
  49. package/dist/types/components/rtk-chat-selector/rtk-chat-selector.d.ts +2 -0
  50. package/dist/types/components/rtk-paginated-list/rtk-paginated-list.d.ts +4 -0
  51. package/dist/types/components.d.ts +4 -0
  52. package/package.json +1 -1
  53. package/dist/realtimekit-ui/p-8cc26ae0.entry.js +0 -1
  54. package/dist/realtimekit-ui/p-d1256212.entry.js +0 -1
@@ -621,7 +621,7 @@ const RtkChatMessagesUiPaginated = class {
621
621
  }
622
622
  }
623
623
  try {
624
- const messages = await this.meeting.chat.fetchMessages({
624
+ const messages = await this.meeting.chat.fetchPublicMessages({
625
625
  timestamp,
626
626
  limit: size,
627
627
  direction: reversed ? 'before' : 'after',
@@ -773,7 +773,7 @@ const RtkChatMessagesUiPaginated = class {
773
773
  this.permissionsUpdateListener();
774
774
  }
775
775
  render() {
776
- return (index$1.h(index$1.Host, { key: 'efacd583cb3477a4aa9bc305d2e2d175f1f01492' }, index$1.h("rtk-paginated-list", { key: 'c0d100b90c426f9f57840008185510db1ad769eb', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, emptyListLabel: this.t('chat.empty_chat') }, index$1.h("slot", { key: 'f587f2644be8f00c31af09d46aa6d166ae7342fd' }))));
776
+ return (index$1.h(index$1.Host, { key: '8062f966f4bc489a4fdadb2da59bb88473e45194' }, index$1.h("rtk-paginated-list", { key: '7f50458ee29cd7bd83bd123303e82db556230d67', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, emptyListLabel: this.t('chat.empty_chat') }, index$1.h("slot", { key: '69b0106558d9995b0bc24ed3d0d36f56febbf90f' }))));
777
777
  }
778
778
  get host() { return index$1.getElement(this); }
779
779
  static get watchers() { return {
@@ -792,7 +792,7 @@ __decorate$f([
792
792
  ], RtkChatMessagesUiPaginated.prototype, "t", void 0);
793
793
  RtkChatMessagesUiPaginated.style = RtkChatMessagesUiPaginatedStyle0;
794
794
 
795
- const rtkChatSelectorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;width:100%;flex-direction:column;font-size:14px;position:relative;box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.chat-header{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px);border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.chat-header-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}.dropdown{position:absolute;top:100%;z-index:10;padding:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));opacity:0;overflow:hidden;pointer-events:none;border-bottom-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);left:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);max-width:calc(100vw - var(--rtk-space-4, 16px));box-sizing:border-box}.dropdown.open{display:flex;flex-direction:column;max-height:30vh;opacity:1;overflow:hidden;pointer-events:auto;border-width:1px;border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.dropdown rtk-paginated-list{display:flex;max-height:30vh;min-height:12vh;flex-direction:column}.public-chat-group-label{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-bottom-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}.public-chat-icon{display:flex;align-items:center;justify-content:center;padding:var(--rtk-space-1, 4px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}";
795
+ const rtkChatSelectorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;width:100%;flex-direction:column;font-size:14px;position:relative;box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.chat-header{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));cursor:pointer;border-radius:var(--rtk-border-radius-sm, 4px);border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.chat-header-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}.dropdown{position:absolute;top:100%;z-index:10;padding:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));opacity:0;pointer-events:none;border-bottom-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);left:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);max-width:calc(100vw - var(--rtk-space-4, 16px));box-sizing:border-box}.dropdown.open{opacity:1;pointer-events:auto;border-width:1px;border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.dropdown rtk-paginated-list{box-sizing:border-box;display:flex;height:30vh;flex-direction:column}.public-chat-group-label{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);border-left-width:var(--rtk-border-width-none, 0);border-right-width:var(--rtk-border-width-none, 0);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-bottom-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}.public-chat-icon{display:flex;align-items:center;justify-content:center;padding:var(--rtk-space-1, 4px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}.public-chat-icon rtk-icon{color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}";
796
796
  const RtkChatSelectorStyle0 = rtkChatSelectorCss;
797
797
 
798
798
  var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -824,12 +824,14 @@ const RtkChatSelector = class {
824
824
  //NOTE(ikabra): Fix this value once backend supports pagination for participants
825
825
  this.pageSize = 100000;
826
826
  this.pagesAllowed = 3;
827
+ this.unreadMap = new Map();
827
828
  this.disconnectMeeting = (meeting) => {
828
- var _a, _b, _c;
829
+ var _a, _b, _c, _d;
829
830
  const { self, participants } = meeting || {};
830
- (_a = self === null || self === void 0 ? void 0 : self.permissions) === null || _a === void 0 ? void 0 : _a.off('*', this.chatPermissionUpdateListener);
831
- (_b = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _b === void 0 ? void 0 : _b.off('participantJoined', this.participantJoinedListener);
832
- (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantLeft', this.participantLeftListener);
831
+ (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.off('chatUpdate', this.chatUpdateListener);
832
+ (_b = self === null || self === void 0 ? void 0 : self.permissions) === null || _b === void 0 ? void 0 : _b.off('*', this.chatPermissionUpdateListener);
833
+ (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantJoined', this.participantJoinedListener);
834
+ (_d = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _d === void 0 ? void 0 : _d.off('participantLeft', this.participantLeftListener);
833
835
  };
834
836
  this.toggle = (e) => {
835
837
  e.preventDefault();
@@ -838,6 +840,10 @@ const RtkChatSelector = class {
838
840
  this.dropdownToggle.emit({ open: this.isOpen });
839
841
  };
840
842
  this.selectUser = async (user) => {
843
+ if (user === null || user === void 0 ? void 0 : user.userId) {
844
+ this.unreadMap.set(user.userId, false);
845
+ this.$paginatedListRef.rerenderList();
846
+ }
841
847
  this.selectedUser = user;
842
848
  this.chatSelectorChange.emit({ selectedUser: user });
843
849
  await this.close();
@@ -884,7 +890,23 @@ const RtkChatSelector = class {
884
890
  return participants;
885
891
  };
886
892
  this.createPaticipantNodes = (data) => {
887
- return data.map((participant) => (index$1.h("div", { class: "private-chat-label", id: participant.id, onClick: () => this.selectUser(participant) }, index$1.h("rtk-avatar", { size: "sm", participant: participant }), index$1.h("span", null, participant.name))));
893
+ return data.map((participant) => {
894
+ var _a;
895
+ return (index$1.h("div", { class: "private-chat-label", id: participant.id, onClick: () => this.selectUser(participant) }, index$1.h("rtk-avatar", { size: "sm", participant: participant }), index$1.h("span", null, (_a = participant.name) !== null && _a !== void 0 ? _a : this.t('participant')), this.unreadMap.get(participant.userId) ? (index$1.h("div", { class: "private-chat-unread-badge" })) : null));
896
+ });
897
+ };
898
+ this.chatUpdateListener = (data) => {
899
+ var _a;
900
+ if (data.action !== 'add')
901
+ return;
902
+ if (!((_a = data.message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length))
903
+ return;
904
+ const selfUserId = this.meeting.self.userId;
905
+ const otherUserId = data.message.targetUserIds.find((id) => id !== selfUserId);
906
+ if (!otherUserId)
907
+ return;
908
+ this.unreadMap.set(otherUserId, true);
909
+ this.$paginatedListRef.rerenderList();
888
910
  };
889
911
  }
890
912
  /** */
@@ -916,7 +938,7 @@ const RtkChatSelector = class {
916
938
  ((_b = this.meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !overrides.disablePrivateChat;
917
939
  }
918
940
  meetingChanged(meeting, oldMeeting) {
919
- var _a, _b, _c, _d, _e, _f;
941
+ var _a, _b, _c, _d, _e, _f, _g;
920
942
  if (oldMeeting)
921
943
  this.disconnectMeeting(oldMeeting);
922
944
  if (!meeting || !meeting.chat)
@@ -925,14 +947,15 @@ const RtkChatSelector = class {
925
947
  !!(((_a = meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
926
948
  ((_b = meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !this.overrides.disablePrivateChat;
927
949
  this.onParticipantUpdate();
950
+ (_c = meeting.chat) === null || _c === void 0 ? void 0 : _c.on('chatUpdate', this.chatUpdateListener);
928
951
  meeting.self.permissions.on('*', this.chatPermissionUpdateListener);
929
- (_d = (_c = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _c === void 0 ? void 0 : _c.joined) === null || _d === void 0 ? void 0 : _d.on('participantJoined', this.participantJoinedListener);
930
- (_f = (_e = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _e === void 0 ? void 0 : _e.joined) === null || _f === void 0 ? void 0 : _f.on('participantLeft', this.participantLeftListener);
952
+ (_e = (_d = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _d === void 0 ? void 0 : _d.joined) === null || _e === void 0 ? void 0 : _e.on('participantJoined', this.participantJoinedListener);
953
+ (_g = (_f = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _f === void 0 ? void 0 : _f.joined) === null || _g === void 0 ? void 0 : _g.on('participantLeft', this.participantLeftListener);
931
954
  }
932
955
  render() {
933
956
  if (!this.showPrivateChat)
934
957
  return null;
935
- return (index$1.h(index$1.Host, null, index$1.h("div", { class: "chat-header", onClick: this.toggle }, index$1.h("div", { class: "chat-header-label" }, index$1.h("rtk-icon", { icon: this.iconPack.participants, size: "sm" }), !this.selectedUser ? this.t('chat.everyone') : this.selectedUser.name), index$1.h("div", { class: "chevron" }, index$1.h("rtk-icon", { icon: this.isOpen ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" }))), index$1.h("div", { class: { dropdown: true, open: this.isOpen, scrollbar: true } }, index$1.h("div", { class: "public-chat-group-label", onClick: () => this.selectUser(undefined) }, index$1.h("div", { class: "public-chat-icon" }, index$1.h("rtk-icon", { icon: this.iconPack.participants, size: "sm" })), this.t('chat.everyone')), index$1.h("rtk-paginated-list", { class: "chat-selector-paginated-list", ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getParticipants, createNodes: this.createPaticipantNodes, emptyListLabel: this.t('participants.empty_list') }, index$1.h("slot", null)))));
958
+ return (index$1.h(index$1.Host, null, index$1.h("div", { class: "chat-header", onClick: this.toggle }, index$1.h("div", { class: "chat-header-label" }, this.selectedUser ? (index$1.h("rtk-icon", { icon: this.iconPack.people, size: "sm" })) : (index$1.h("rtk-icon", { icon: this.iconPack.participants, size: "sm" })), !this.selectedUser ? this.t('chat.everyone') : this.selectedUser.name), index$1.h("div", { class: "chevron" }, index$1.h("rtk-icon", { icon: this.isOpen ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" }))), index$1.h("div", { class: { dropdown: true, open: this.isOpen, scrollbar: true } }, index$1.h("div", { class: "public-chat-group-label", onClick: () => this.selectUser(undefined) }, index$1.h("div", { class: "public-chat-icon" }, index$1.h("rtk-icon", { icon: this.iconPack.participants, size: "sm" })), this.t('chat.everyone')), index$1.h("rtk-paginated-list", { class: "chat-selector-paginated-list", ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getParticipants, createNodes: this.createPaticipantNodes, emptyListLabel: this.t('participants.empty_list') }, index$1.h("slot", null)))));
936
959
  }
937
960
  static get watchers() { return {
938
961
  "overrides": ["overridesChanged"],
@@ -1299,7 +1322,7 @@ __decorate$8([
1299
1322
  ], RtkImageMessageView.prototype, "t", void 0);
1300
1323
  RtkImageMessageView.style = RtkImageMessageViewStyle0;
1301
1324
 
1302
- const rtkMarkdownViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{overflow-wrap:break-word}a{color:currentColor}.block-quote,blockquote{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px);--tw-border-spacing-x:1px;--tw-border-spacing-y:1px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-md, 2px);border-right-width:var(--rtk-border-width-none, 0);border-style:solid;padding:var(--rtk-space-0\\.5, 2px);padding-left:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);border-top-left-radius:var(--rtk-border-radius-none, 0);border-bottom-left-radius:var(--rtk-border-radius-none, 0)}pre{white-space:pre-wrap}";
1325
+ const rtkMarkdownViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{overflow-wrap:break-word}a{color:currentColor}.block-quote,blockquote{margin:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px);--tw-border-spacing-x:1px;--tw-border-spacing-y:1px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-top-width:var(--rtk-border-width-none, 0);border-bottom-width:var(--rtk-border-width-none, 0);border-left-width:var(--rtk-border-width-md, 2px);border-right-width:var(--rtk-border-width-none, 0);border-style:solid;padding:var(--rtk-space-0\\.5, 2px);padding-left:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);border-top-left-radius:var(--rtk-border-radius-none, 0);border-bottom-left-radius:var(--rtk-border-radius-none, 0)}pre{white-space:pre-wrap;width:300px;margin-right:var(--rtk-space-2, 8px)}.markdown-message{box-sizing:border-box}";
1303
1326
  const RtkMarkdownViewStyle0 = rtkMarkdownViewCss;
1304
1327
 
1305
1328
  const RtkMarkdownView = class {
@@ -1379,7 +1402,7 @@ const RtkMarkdownView = class {
1379
1402
  const slicedMessage = this.text.slice(0, this.maxLength);
1380
1403
  const withReply = chat.extractReplyBlock(slicedMessage, true);
1381
1404
  const withoutReply = chat.stripOutReplyBlock(slicedMessage);
1382
- return (index$1.h("p", { key: '8c05acbe5bf3ac4a006d572bf77739cf14bc3588' }, withReply.length !== 0 && index$1.h("blockquote", { key: '47f95aad469fd001f78dccf1caf5224f639c2d9e' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
1405
+ return (index$1.h("p", { key: '2c21b4c1dc9f18a17048f0827e552ffb8d595eee', class: "markdown-message" }, withReply.length !== 0 && index$1.h("blockquote", { key: 'f6ff3e02781136f2fb5f3e68dbbeac39430b6386' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
1383
1406
  }
1384
1407
  };
1385
1408
  RtkMarkdownView.style = RtkMarkdownViewStyle0;
@@ -1850,7 +1873,7 @@ __decorate$5([
1850
1873
  ], RtkMenuList.prototype, "t", void 0);
1851
1874
  RtkMenuList.style = RtkMenuListStyle0;
1852
1875
 
1853
- const rtkMessageViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{max-width:var(--rtk-space-96, 384px)}.message-wrapper{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column;align-items:flex-end}.incoming .message{display:flex;flex-direction:column;align-items:flex-start}.header{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:12px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.bubble{max-width:90%;padding:var(--rtk-space-2, 8px);border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.metadata{margin-top:var(--rtk-space-2, 8px);display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-1, 4px);align-self:flex-end;font-size:11px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.metadata-content{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-1, 4px)}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-1, 4px);top:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming .actions{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
1876
+ const rtkMessageViewCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{max-width:var(--rtk-space-96, 384px)}.message-wrapper{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:var(--rtk-space-2, 8px)}.message-wrapper.incoming{flex-direction:row}.message{display:flex;flex-direction:column;align-items:flex-end}.incoming .message{display:flex;flex-direction:column;align-items:flex-start}.header{margin-top:var(--rtk-space-1, 4px);margin-bottom:var(--rtk-space-1, 4px);align-self:flex-end;color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:12px;font-weight:600}.incoming .header{align-self:flex-start}.body{display:flex;flex-direction:column;min-width:var(--rtk-space-24, 96px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));font-size:14px;line-height:1.375;position:relative}.bubble{max-width:90%;padding:var(--rtk-space-2, 8px);border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:var(--rtk-border-radius-md, 8px)}.incoming .bubble{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.metadata{margin-top:var(--rtk-space-2, 8px);display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-1, 4px);align-self:flex-end;font-size:11px;color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming .metadata{margin-top:var(--rtk-space-2, 8px);display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-1, 4px);align-self:flex-end;font-size:11px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.metadata-content{display:flex;flex-direction:row;align-items:center;gap:var(--rtk-space-1, 4px)}.avatar{display:none}rtk-menu{position:absolute;right:var(--rtk-space-1, 4px);top:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-lg, 12px)}rtk-menu rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);cursor:pointer}.actions{display:flex;align-items:center;justify-content:center;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-600, 13 81 253) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));padding:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none}.actions rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}.incoming rtk-avatar{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}.incoming .actions{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}@media (min-width: 400px){.avatar{display:flex;width:var(--rtk-space-6, 24px)}.avatar rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px);font-size:10px;overflow:clip;border-radius:9999px}}@media (hover: hover){rtk-menu{visibility:hidden}.body:hover rtk-menu{visibility:visible}}";
1854
1877
  const RtkMessageViewStyle0 = rtkMessageViewCss;
1855
1878
 
1856
1879
  var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -1902,7 +1925,7 @@ __decorate$4([
1902
1925
  ], RtkMessageView.prototype, "iconPack", void 0);
1903
1926
  RtkMessageView.style = RtkMessageViewStyle0;
1904
1927
 
1905
- const rtkPaginatedListCss = ".scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{position:relative;display:flex;flex-direction:column;flex:1}:host(.chat-selector-paginated-list) .container{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}:host(.chat-selector-paginated-list) .private-chat-label{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px)}:host(.chat-selector-paginated-list) .private-chat-label rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host(.chat-selector-paginated-list) .show-new-messages-ctr.active{display:none}:host(.pinned-message-selector-paginated-list) .container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}:host(.pinned-message-selector-paginated-list) .page{position:relative;box-sizing:border-box}:host(.pinned-message-selector-paginated-list) .pinned-message{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:flex-start;gap:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);padding-top:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-2, 8px)}:host(.pinned-message-selector-paginated-list) .pinned-message:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host(.pinned-message-selector-paginated-list) .pinned-message-content{display:flex;min-width:var(--rtk-space-0, 0px);flex:1 1 0%;flex-direction:column}:host(.pinned-message-selector-paginated-list) .pinned-message-time{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}:host(.pinned-message-selector-paginated-list) .pinned-message-preview{margin-bottom:var(--rtk-space-2, 8px);word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host(.pinned-message-selector-paginated-list) rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}.file-picker{display:none}.chat *:first-child{margin-top:var(--rtk-space-0, 0px)}.chat .head{display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-4, 16px);font-size:12px;font-weight:700}.chat .head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat .body{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);overflow-wrap:break-word;font-size:14px;line-height:1.375}.chat .body .emoji{font-size:24px}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}rtk-text-message,rtk-image-message,rtk-file-message{margin-top:var(--rtk-space-4, 16px);display:block;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}*[is-continued]{margin-top:var(--rtk-space-3, 12px)}rtk-text-message[is-continued]{margin-top:var(--rtk-space-2, 8px)}.chat .image{position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.chat .image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.chat .image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.chat .image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat .image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.chat .image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}.chat .file{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1\\.5, 6px);padding-bottom:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.chat .file .file-data{flex:1 1 0%}.chat .file .file-data .name{word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.chat .file .file-data .file-data-split .ext{margin-right:var(--rtk-space-2, 8px);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split .divider{height:var(--rtk-space-4, 16px);width:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.chat .file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}.smallest-dom-element{width:1px}#top-scroll{transform:translateY(20vh);transform:translateY(20px)}a{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));text-decoration-line:none}a:hover{text-decoration-line:underline}.show-new-messages-ctr{position:absolute;bottom:var(--rtk-space-4, 16px);right:var(--rtk-space-4, 16px);z-index:10;margin-top:calc(var(--rtk-space-14, 56px) * -1);--tw-translate-y:var(--rtk-space-28, 112px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.show-new-messages-ctr.active{--tw-translate-y:var(--rtk-space-0, 0px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;opacity:1}.show-new-messages{pointer-events:auto;border-radius:9999px}.show-new-messages:hover{border-radius:9999px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}rtk-spinner,.empty-list{margin:auto}.page-wrapper{margin-left:var(--rtk-space-1, 4px);margin-right:var(--rtk-space-1, 4px);display:flex;flex-direction:column-reverse}.message-wrapper{margin-bottom:var(--rtk-space-2, 8px)}.pinned .message-wrapper{position:relative}.pinned .pin-icon{position:absolute;right:calc(var(--rtk-space-1, 4px) * -1);top:calc(var(--rtk-space-1, 4px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px)}.pinned rtk-message-view{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px)}.load-more-on-top-container{pointer-events:none;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-4, 16px);z-index:10}.load-more-icon{pointer-events:auto;border-radius:9999px}.load-more-icon:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
1928
+ const rtkPaginatedListCss = ".scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{position:relative;display:flex;flex-direction:column;flex:1}:host(.chat-selector-paginated-list) .container{box-sizing:border-box;display:flex;flex-direction:column;padding:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}:host(.chat-selector-paginated-list) .private-chat-label{display:flex;width:100%;cursor:pointer;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px)}:host(.chat-selector-paginated-list) .private-chat-label rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host(.chat-selector-paginated-list) .show-new-messages-ctr.active{display:none}.private-chat-unread-badge{height:var(--rtk-space-2, 8px);width:var(--rtk-space-2, 8px);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host(.pinned-message-selector-paginated-list) .container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}:host(.pinned-message-selector-paginated-list) .page{position:relative;box-sizing:border-box}:host(.pinned-message-selector-paginated-list) .pinned-message{box-sizing:border-box;display:flex;width:100%;cursor:pointer;flex-direction:row;overflow:hidden;border-radius:var(--rtk-border-radius-sm, 4px)}:host(.pinned-message-selector-paginated-list) .pinned-message:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}:host(.pinned-message-selector-paginated-list) .pinned-message-container{display:flex;width:100%;flex-direction:row;align-items:flex-start;padding:var(--rtk-space-2, 8px)}:host(.pinned-message-selector-paginated-list) .pinned-message-content{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);display:flex;min-width:var(--rtk-space-0, 0px);flex:1 1 0%;flex-direction:column}:host(.pinned-message-selector-paginated-list) .pinned-message-time{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}:host(.pinned-message-selector-paginated-list) .pinned-message-preview{margin-bottom:var(--rtk-space-2, 8px);word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host(.pinned-message-selector-paginated-list) rtk-avatar{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}.container{box-sizing:border-box;display:flex;flex-direction:column-reverse;padding-top:var(--rtk-space-4, 16px);padding-bottom:var(--rtk-space-4, 16px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);flex:1 0 0px;overflow-y:scroll}.file-picker{display:none}.chat *:first-child{margin-top:var(--rtk-space-0, 0px)}.chat .head{display:flex;align-items:center}.chat .head .name{margin-right:var(--rtk-space-4, 16px);font-size:12px;font-weight:700}.chat .head .time{font-size:12px;color:rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))}.chat .body{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px);overflow-wrap:break-word;font-size:14px;line-height:1.375}.chat .body .emoji{font-size:24px}p{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-3, 12px)}rtk-text-message,rtk-image-message,rtk-file-message{margin-top:var(--rtk-space-4, 16px);display:block;padding-left:var(--rtk-space-3, 12px);padding-right:var(--rtk-space-3, 12px);font-family:var(--rtk-font-family, sans-serif);color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88));box-sizing:border-box}*[is-continued]{margin-top:var(--rtk-space-3, 12px)}rtk-text-message[is-continued]{margin-top:var(--rtk-space-2, 8px)}.chat .image{position:relative;height:var(--rtk-space-40, 160px);max-width:var(--rtk-space-64, 256px);cursor:pointer}.chat .image img{display:none;height:100%;width:100%;border-radius:var(--rtk-border-radius-sm, 4px);-o-object-fit:cover;object-fit:cover}.chat .image .image-spinner{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity))}.chat .image .image-spinner rtk-spinner{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}.chat .image .image-errored{display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--rtk-border-radius-sm, 4px);background-color:rgba(var(--rtk-colors-danger, 255 45 45) / 0.1);--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}.chat .image .actions{display:none;height:var(--rtk-space-8, 32px);align-items:center;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action{height:var(--rtk-space-8, 32px);width:var(--rtk-space-8, 32px);border-radius:var(--rtk-border-radius-none, 0);border-width:var(--rtk-border-width-none, 0);border-style:none;background-color:transparent;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.chat .image .actions .action:hover{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.image.loaded img{display:block}.image.loaded .image-spinner{display:none}.image:hover .actions,.image:focus .actions{display:flex}.chat .file{display:flex;align-items:center;gap:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1\\.5, 6px);padding-bottom:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.chat .file .file-data{flex:1 1 0%}.chat .file .file-data .name{word-break:break-all;color:rgb(var(--rtk-colors-text-1000, 255 255 255));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split{margin-top:var(--rtk-space-0\\.5, 2px);display:flex;align-items:center;font-size:12px}.chat .file .file-data .file-data-split .ext{margin-right:var(--rtk-space-2, 8px);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.chat .file .file-data .file-data-split .divider{height:var(--rtk-space-4, 16px);width:var(--rtk-space-0\\.5, 2px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.chat .file .file-data .file-data-split .size{margin-left:var(--rtk-space-2, 8px)}.smallest-dom-element{width:1px}#top-scroll{transform:translateY(20vh);transform:translateY(20px)}a{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));text-decoration-line:none}a:hover{text-decoration-line:underline}.show-new-messages-ctr{position:absolute;bottom:var(--rtk-space-4, 16px);right:var(--rtk-space-4, 16px);z-index:10;margin-top:calc(var(--rtk-space-14, 56px) * -1);--tw-translate-y:var(--rtk-space-28, 112px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.show-new-messages-ctr.active{--tw-translate-y:var(--rtk-space-0, 0px);transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;opacity:1}.show-new-messages{pointer-events:auto;border-radius:9999px}.show-new-messages:hover{border-radius:9999px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}rtk-spinner,.empty-list{margin:auto}.page-wrapper{margin-left:var(--rtk-space-1, 4px);margin-right:var(--rtk-space-1, 4px);display:flex;flex-direction:column-reverse}.message-wrapper{margin-bottom:var(--rtk-space-2, 8px)}.pinned .message-wrapper{position:relative}.pinned .pin-icon{position:absolute;right:calc(var(--rtk-space-1, 4px) * -1);top:calc(var(--rtk-space-1, 4px) * -1);display:flex;border-radius:var(--rtk-border-radius-sm, 4px)}.pinned rtk-message-view{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px)}.load-more-on-top-container{pointer-events:none;position:absolute;top:var(--rtk-space-2, 8px);right:var(--rtk-space-4, 16px);z-index:10}.load-more-icon{pointer-events:auto;border-radius:9999px}.load-more-icon:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-ring-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
1906
1929
  const RtkPaginatedListStyle0 = rtkPaginatedListCss;
1907
1930
 
1908
1931
  /**
@@ -1974,6 +1997,12 @@ const RtkPaginatedList = class {
1974
1997
  return rect.top >= 0 && rect.bottom <= window.innerHeight;
1975
1998
  };
1976
1999
  }
2000
+ /**
2001
+ * Rerender paginated list
2002
+ */
2003
+ async rerenderList() {
2004
+ this.rerenderBoolean = !this.rerenderBoolean;
2005
+ }
1977
2006
  /**
1978
2007
  * Adds a new node to the beginning of the paginated list
1979
2008
  * @param {DataNode} node - The data node to add to the beginning of the list
@@ -2261,9 +2290,9 @@ const RtkPaginatedList = class {
2261
2290
  /**
2262
2291
  * div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
2263
2292
  */
2264
- return (index$1.h(index$1.Host, { key: '95cfa5ec1e7a023288f23f0c81bdf2e060198f0a' }, index$1.h("div", { key: '6ade1151ec1dd66845f96f336df2f0c5c075706f', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: 'befdd4a7c3d30089bd9b6f27dc0b71166cad812f', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: '961b397875ce257acab29cccb38c8bcbcb32a4b5', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
2293
+ return (index$1.h(index$1.Host, { key: 'bff4fc91b737334c5764e690fbf2adafa1444408' }, index$1.h("div", { key: 'f4efa98ef0bd178602ee03718d35fcb833487909', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, index$1.h("div", { key: '37403f6462812a6662efa9577ae9ed43d27f63d6', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, index$1.h("rtk-button", { key: 'ee7e04e6281370dddb1b1e10b753e96dc602d42a', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
2265
2294
  this.scrollToBottom();
2266
- } }, this.shouldScrollToBottom ? (index$1.h("rtk-spinner", { size: "sm" })) : (index$1.h("rtk-icon", { icon: this.iconPack.chevron_down })))), index$1.h("div", { key: '9ca7ccbab4fd320e028b46086a451a8205186710', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: 'c0857b46087f6ec587801eed1706c903f3376c9d', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: 'abf37d818f2d96be450e85e92b4b31e9146c4bc5', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : 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: '926124b839832299b8e8a5cb9336fa62b3a21516', size: "sm" }), index$1.h("div", { key: 'de2ecfae0a8e27c1afb0b03fe803f7bcd3b187f1', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
2295
+ } }, this.shouldScrollToBottom ? (index$1.h("rtk-spinner", { size: "sm" })) : (index$1.h("rtk-icon", { icon: this.iconPack.chevron_down })))), index$1.h("div", { key: '91bcdadd2518313fa06306a172575f5acc786596', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && index$1.h("rtk-spinner", { key: '932af19af69c3ecd5af22dd3051a5eea5cb25e7a', size: "sm" }), this.isLoading && this.pages.length < 1 && index$1.h("rtk-spinner", { key: '9fa60fb784a09800a32a3accdc81d940476330d2', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (index$1.h("div", { class: "empty-list" }, (_a = this.emptyListLabel) !== null && _a !== void 0 ? _a : 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: '73103f58338bdb89be69f9f6dc742e3cdd2c95d8', size: "sm" }), index$1.h("div", { key: '9c4c43ffb6442d58040448fe1b2d7332505fc81e', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
2267
2296
  }
2268
2297
  };
2269
2298
  __decorate$3([
@@ -2274,7 +2303,7 @@ __decorate$3([
2274
2303
  ], RtkPaginatedList.prototype, "t", void 0);
2275
2304
  RtkPaginatedList.style = RtkPaginatedListStyle0;
2276
2305
 
2277
- const rtkPinnedMessageSelectorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;width:100%;flex-direction:column;font-size:14px;position:relative;box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.chat-header{position:relative;margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);cursor:pointer;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));border-radius:var(--rtk-border-radius-sm, 4px);border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.chat-header-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}.dropdown{position:absolute;top:100%;z-index:10;padding:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));max-height:var(--rtk-space-0, 0px);opacity:0;overflow:hidden;pointer-events:none;border-bottom-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);left:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);max-width:calc(100vw - var(--rtk-space-4, 16px));box-sizing:border-box}.dropdown.open{max-height:50vh;opacity:1;overflow:auto;pointer-events:auto;border-width:1px;border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.dropdown rtk-paginated-list{box-sizing:border-box;display:flex;max-height:50vh;min-height:30vh;flex-direction:column}";
2306
+ const rtkPinnedMessageSelectorCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{display:flex;width:100%;flex-direction:column;font-size:14px;position:relative;box-sizing:border-box;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.chat-header{position:relative;margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);cursor:pointer;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px);padding-top:var(--rtk-space-3, 12px);padding-bottom:var(--rtk-space-3, 12px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));border-radius:var(--rtk-border-radius-sm, 4px);border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.chat-header-label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px)}.dropdown{position:absolute;top:100%;z-index:10;padding:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));opacity:0;pointer-events:none;border-bottom-right-radius:var(--rtk-border-radius-sm, 4px);border-bottom-left-radius:var(--rtk-border-radius-sm, 4px);left:var(--rtk-space-2, 8px);right:var(--rtk-space-2, 8px);max-width:calc(100vw - var(--rtk-space-4, 16px));box-sizing:border-box}.dropdown.open{opacity:1;pointer-events:auto;border-width:1px;border-top-width:var(--rtk-border-width-none, 0);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity))}.dropdown rtk-paginated-list{box-sizing:border-box;display:flex;height:30vh;flex-direction:column}";
2278
2307
  const RtkPinnedMessageSelectorStyle0 = rtkPinnedMessageSelectorCss;
2279
2308
 
2280
2309
  var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -2335,10 +2364,10 @@ const RtkPinnedMessageSelector = class {
2335
2364
  return (index$1.h("div", { class: "pinned-message", id: message.id, onClick: () => {
2336
2365
  this.pinnedMessageSelect.emit(message);
2337
2366
  this.close();
2338
- } }, index$1.h("rtk-avatar", { size: "sm", participant: {
2367
+ } }, index$1.h("div", { class: "pinned-message-container" }, index$1.h("rtk-avatar", { size: "sm", participant: {
2339
2368
  name: message.displayName,
2340
2369
  picture: '',
2341
- } }), index$1.h("div", { class: "pinned-message-content" }, index$1.h("div", { class: "pinned-message-preview", title: preview }, preview), index$1.h("div", { class: "pinned-message-meta" }, index$1.h("span", { class: "pinned-message-time" }, date.elapsedDuration(message.time, new Date(Date.now())))))));
2370
+ } }), index$1.h("div", { class: "pinned-message-content" }, index$1.h("div", { class: "pinned-message-preview", title: preview }, preview), index$1.h("div", { class: "pinned-message-meta" }, index$1.h("span", { class: "pinned-message-time" }, date.elapsedDuration(message.time, new Date(Date.now()))))))));
2342
2371
  });
2343
2372
  };
2344
2373
  this.pinChatListener = (data) => {
@@ -91,20 +91,13 @@ const RtkChatToggle = class {
91
91
  const chat = this.meeting.chat;
92
92
  if (!chat)
93
93
  return;
94
- const messages = await chat.fetchMessages({
95
- timestamp: new Date().getTime(),
94
+ const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
95
+ const messages = await chat.fetchPublicMessages({
96
+ timestamp: meetingStartedTimeMs,
96
97
  limit: this.pageSize,
97
- direction: 'before',
98
+ direction: 'after',
98
99
  });
99
- const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
100
- const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
101
- if (newMessages.length === this.pageSize && newMessages.length > 0) {
102
- // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
103
- this.unreadMessageCount = newMessages.length;
104
- }
105
- else {
106
- this.unreadMessageCount = newMessages.length;
107
- }
100
+ this.unreadMessageCount = messages.length;
108
101
  }
109
102
  handleChatActiveChange() {
110
103
  // Chat sidebar closed without opening a different sidebar
@@ -39,7 +39,7 @@ export class RtkChatMessagesUiPaginated {
39
39
  }
40
40
  }
41
41
  try {
42
- const messages = await this.meeting.chat.fetchMessages({
42
+ const messages = await this.meeting.chat.fetchPublicMessages({
43
43
  timestamp,
44
44
  limit: size,
45
45
  direction: reversed ? 'before' : 'after',
@@ -193,7 +193,7 @@ export class RtkChatMessagesUiPaginated {
193
193
  this.permissionsUpdateListener();
194
194
  }
195
195
  render() {
196
- return (h(Host, { key: 'efacd583cb3477a4aa9bc305d2e2d175f1f01492' }, h("rtk-paginated-list", { key: 'c0d100b90c426f9f57840008185510db1ad769eb', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, emptyListLabel: this.t('chat.empty_chat') }, h("slot", { key: 'f587f2644be8f00c31af09d46aa6d166ae7342fd' }))));
196
+ return (h(Host, { key: '8062f966f4bc489a4fdadb2da59bb88473e45194' }, h("rtk-paginated-list", { key: '7f50458ee29cd7bd83bd123303e82db556230d67', ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getChatMessages, createNodes: this.createChatNodes, emptyListLabel: this.t('chat.empty_chat') }, h("slot", { key: '69b0106558d9995b0bc24ed3d0d36f56febbf90f' }))));
197
197
  }
198
198
  static get is() { return "rtk-chat-messages-ui-paginated"; }
199
199
  static get encapsulation() { return "shadow"; }
@@ -76,9 +76,8 @@ p {
76
76
  z-index: 10;
77
77
  padding: var(--rtk-space-0, 0px);
78
78
  --tw-bg-opacity: 1;
79
- background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));
79
+ background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));
80
80
  opacity: 0;
81
- overflow: hidden;
82
81
  pointer-events: none;
83
82
  /* @apply transition-all duration-200 ease-in-out; */
84
83
  border-bottom-right-radius: var(--rtk-border-radius-sm, 4px);
@@ -90,11 +89,7 @@ p {
90
89
  }
91
90
 
92
91
  .dropdown.open {
93
- display: flex;
94
- flex-direction: column;
95
- max-height: 30vh;
96
92
  opacity: 1;
97
- overflow: hidden;
98
93
  pointer-events: auto;
99
94
  border-width: 1px;
100
95
  border-top-width: var(--rtk-border-width-none, 0);
@@ -104,9 +99,9 @@ p {
104
99
  }
105
100
 
106
101
  .dropdown rtk-paginated-list {
102
+ box-sizing: border-box;
107
103
  display: flex;
108
- max-height: 30vh;
109
- min-height: 12vh;
104
+ height: 30vh;
110
105
  flex-direction: column;
111
106
  }
112
107
 
@@ -140,3 +135,7 @@ p {
140
135
  --tw-bg-opacity: 1;
141
136
  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
142
137
  }
138
+
139
+ .public-chat-icon rtk-icon {
140
+ color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));
141
+ }
@@ -29,12 +29,14 @@ export class RtkChatSelector {
29
29
  //NOTE(ikabra): Fix this value once backend supports pagination for participants
30
30
  this.pageSize = 100000;
31
31
  this.pagesAllowed = 3;
32
+ this.unreadMap = new Map();
32
33
  this.disconnectMeeting = (meeting) => {
33
- var _a, _b, _c;
34
+ var _a, _b, _c, _d;
34
35
  const { self, participants } = meeting || {};
35
- (_a = self === null || self === void 0 ? void 0 : self.permissions) === null || _a === void 0 ? void 0 : _a.off('*', this.chatPermissionUpdateListener);
36
- (_b = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _b === void 0 ? void 0 : _b.off('participantJoined', this.participantJoinedListener);
37
- (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantLeft', this.participantLeftListener);
36
+ (_a = meeting.chat) === null || _a === void 0 ? void 0 : _a.off('chatUpdate', this.chatUpdateListener);
37
+ (_b = self === null || self === void 0 ? void 0 : self.permissions) === null || _b === void 0 ? void 0 : _b.off('*', this.chatPermissionUpdateListener);
38
+ (_c = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _c === void 0 ? void 0 : _c.off('participantJoined', this.participantJoinedListener);
39
+ (_d = participants === null || participants === void 0 ? void 0 : participants.joined) === null || _d === void 0 ? void 0 : _d.off('participantLeft', this.participantLeftListener);
38
40
  };
39
41
  this.toggle = (e) => {
40
42
  e.preventDefault();
@@ -43,6 +45,10 @@ export class RtkChatSelector {
43
45
  this.dropdownToggle.emit({ open: this.isOpen });
44
46
  };
45
47
  this.selectUser = async (user) => {
48
+ if (user === null || user === void 0 ? void 0 : user.userId) {
49
+ this.unreadMap.set(user.userId, false);
50
+ this.$paginatedListRef.rerenderList();
51
+ }
46
52
  this.selectedUser = user;
47
53
  this.chatSelectorChange.emit({ selectedUser: user });
48
54
  await this.close();
@@ -89,7 +95,23 @@ export class RtkChatSelector {
89
95
  return participants;
90
96
  };
91
97
  this.createPaticipantNodes = (data) => {
92
- return data.map((participant) => (h("div", { class: "private-chat-label", id: participant.id, onClick: () => this.selectUser(participant) }, h("rtk-avatar", { size: "sm", participant: participant }), h("span", null, participant.name))));
98
+ return data.map((participant) => {
99
+ var _a;
100
+ return (h("div", { class: "private-chat-label", id: participant.id, onClick: () => this.selectUser(participant) }, h("rtk-avatar", { size: "sm", participant: participant }), h("span", null, (_a = participant.name) !== null && _a !== void 0 ? _a : this.t('participant')), this.unreadMap.get(participant.userId) ? (h("div", { class: "private-chat-unread-badge" })) : null));
101
+ });
102
+ };
103
+ this.chatUpdateListener = (data) => {
104
+ var _a;
105
+ if (data.action !== 'add')
106
+ return;
107
+ if (!((_a = data.message.targetUserIds) === null || _a === void 0 ? void 0 : _a.length))
108
+ return;
109
+ const selfUserId = this.meeting.self.userId;
110
+ const otherUserId = data.message.targetUserIds.find((id) => id !== selfUserId);
111
+ if (!otherUserId)
112
+ return;
113
+ this.unreadMap.set(otherUserId, true);
114
+ this.$paginatedListRef.rerenderList();
93
115
  };
94
116
  }
95
117
  /** */
@@ -121,7 +143,7 @@ export class RtkChatSelector {
121
143
  ((_b = this.meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !overrides.disablePrivateChat;
122
144
  }
123
145
  meetingChanged(meeting, oldMeeting) {
124
- var _a, _b, _c, _d, _e, _f;
146
+ var _a, _b, _c, _d, _e, _f, _g;
125
147
  if (oldMeeting)
126
148
  this.disconnectMeeting(oldMeeting);
127
149
  if (!meeting || !meeting.chat)
@@ -130,14 +152,15 @@ export class RtkChatSelector {
130
152
  !!(((_a = meeting.self.permissions.chatPrivate) === null || _a === void 0 ? void 0 : _a.canSend) ||
131
153
  ((_b = meeting.self.permissions.chatPrivate) === null || _b === void 0 ? void 0 : _b.canReceive)) && !this.overrides.disablePrivateChat;
132
154
  this.onParticipantUpdate();
155
+ (_c = meeting.chat) === null || _c === void 0 ? void 0 : _c.on('chatUpdate', this.chatUpdateListener);
133
156
  meeting.self.permissions.on('*', this.chatPermissionUpdateListener);
134
- (_d = (_c = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _c === void 0 ? void 0 : _c.joined) === null || _d === void 0 ? void 0 : _d.on('participantJoined', this.participantJoinedListener);
135
- (_f = (_e = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _e === void 0 ? void 0 : _e.joined) === null || _f === void 0 ? void 0 : _f.on('participantLeft', this.participantLeftListener);
157
+ (_e = (_d = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _d === void 0 ? void 0 : _d.joined) === null || _e === void 0 ? void 0 : _e.on('participantJoined', this.participantJoinedListener);
158
+ (_g = (_f = meeting === null || meeting === void 0 ? void 0 : meeting.participants) === null || _f === void 0 ? void 0 : _f.joined) === null || _g === void 0 ? void 0 : _g.on('participantLeft', this.participantLeftListener);
136
159
  }
137
160
  render() {
138
161
  if (!this.showPrivateChat)
139
162
  return null;
140
- return (h(Host, null, h("div", { class: "chat-header", onClick: this.toggle }, h("div", { class: "chat-header-label" }, h("rtk-icon", { icon: this.iconPack.participants, size: "sm" }), !this.selectedUser ? this.t('chat.everyone') : this.selectedUser.name), h("div", { class: "chevron" }, h("rtk-icon", { icon: this.isOpen ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" }))), h("div", { class: { dropdown: true, open: this.isOpen, scrollbar: true } }, h("div", { class: "public-chat-group-label", onClick: () => this.selectUser(undefined) }, h("div", { class: "public-chat-icon" }, h("rtk-icon", { icon: this.iconPack.participants, size: "sm" })), this.t('chat.everyone')), h("rtk-paginated-list", { class: "chat-selector-paginated-list", ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getParticipants, createNodes: this.createPaticipantNodes, emptyListLabel: this.t('participants.empty_list') }, h("slot", null)))));
163
+ return (h(Host, null, h("div", { class: "chat-header", onClick: this.toggle }, h("div", { class: "chat-header-label" }, this.selectedUser ? (h("rtk-icon", { icon: this.iconPack.people, size: "sm" })) : (h("rtk-icon", { icon: this.iconPack.participants, size: "sm" })), !this.selectedUser ? this.t('chat.everyone') : this.selectedUser.name), h("div", { class: "chevron" }, h("rtk-icon", { icon: this.isOpen ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" }))), h("div", { class: { dropdown: true, open: this.isOpen, scrollbar: true } }, h("div", { class: "public-chat-group-label", onClick: () => this.selectUser(undefined) }, h("div", { class: "public-chat-icon" }, h("rtk-icon", { icon: this.iconPack.participants, size: "sm" })), this.t('chat.everyone')), h("rtk-paginated-list", { class: "chat-selector-paginated-list", ref: (el) => (this.$paginatedListRef = el), pageSize: this.pageSize, pagesAllowed: 3, fetchData: this.getParticipants, createNodes: this.createPaticipantNodes, emptyListLabel: this.t('participants.empty_list') }, h("slot", null)))));
141
164
  }
142
165
  static get is() { return "rtk-chat-selector"; }
143
166
  static get encapsulation() { return "shadow"; }
@@ -328,7 +351,8 @@ export class RtkChatSelector {
328
351
  "showPrivateChat": {},
329
352
  "selectedUser": {},
330
353
  "pageSize": {},
331
- "pagesAllowed": {}
354
+ "pagesAllowed": {},
355
+ "unreadMap": {}
332
356
  };
333
357
  }
334
358
  static get events() {
@@ -93,20 +93,13 @@ export class RtkChatToggle {
93
93
  const chat = this.meeting.chat;
94
94
  if (!chat)
95
95
  return;
96
- const messages = await chat.fetchMessages({
97
- timestamp: new Date().getTime(),
96
+ const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
97
+ const messages = await chat.fetchPublicMessages({
98
+ timestamp: meetingStartedTimeMs,
98
99
  limit: this.pageSize,
99
- direction: 'before',
100
+ direction: 'after',
100
101
  });
101
- const meetingStartedTimeMs = (_b = (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.meetingStartedTimestamp.getTime()) !== null && _b !== void 0 ? _b : 0;
102
- const newMessages = messages.filter((m) => m.timeMs > meetingStartedTimeMs);
103
- if (newMessages.length === this.pageSize && newMessages.length > 0) {
104
- // all messages are new, so we can't know the exact count, but we know there are at least pageSize - 1 new messages
105
- this.unreadMessageCount = newMessages.length;
106
- }
107
- else {
108
- this.unreadMessageCount = newMessages.length;
109
- }
102
+ this.unreadMessageCount = messages.length;
110
103
  }
111
104
  handleChatActiveChange() {
112
105
  // Chat sidebar closed without opening a different sidebar
@@ -41,4 +41,10 @@ blockquote {
41
41
 
42
42
  pre {
43
43
  white-space: pre-wrap;
44
+ width: 300px;
45
+ margin-right: var(--rtk-space-2, 8px);
46
+ }
47
+
48
+ .markdown-message {
49
+ box-sizing: border-box;
44
50
  }
@@ -76,7 +76,7 @@ export class RtkMarkdownView {
76
76
  const slicedMessage = this.text.slice(0, this.maxLength);
77
77
  const withReply = extractReplyBlock(slicedMessage, true);
78
78
  const withoutReply = stripOutReplyBlock(slicedMessage);
79
- return (h("p", { key: '8c05acbe5bf3ac4a006d572bf77739cf14bc3588' }, withReply.length !== 0 && h("blockquote", { key: '47f95aad469fd001f78dccf1caf5224f639c2d9e' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
79
+ return (h("p", { key: '2c21b4c1dc9f18a17048f0827e552ffb8d595eee', class: "markdown-message" }, withReply.length !== 0 && h("blockquote", { key: 'f6ff3e02781136f2fb5f3e68dbbeac39430b6386' }, this.renderMessage(withReply)), withoutReply.length !== 0 && this.renderMessage(withoutReply)));
80
80
  }
81
81
  static get is() { return "rtk-markdown-view"; }
82
82
  static get encapsulation() { return "shadow"; }
@@ -100,6 +100,17 @@ p {
100
100
  }
101
101
 
102
102
  .metadata {
103
+ margin-top: var(--rtk-space-2, 8px);
104
+ display: flex;
105
+ flex-direction: row;
106
+ align-items: center;
107
+ gap: var(--rtk-space-1, 4px);
108
+ align-self: flex-end;
109
+ font-size: 11px;
110
+ color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));
111
+ }
112
+
113
+ .incoming .metadata {
103
114
  margin-top: var(--rtk-space-2, 8px);
104
115
  display: flex;
105
116
  flex-direction: row;
@@ -56,6 +56,14 @@
56
56
  display: none;
57
57
  }
58
58
 
59
+ .private-chat-unread-badge {
60
+ height: var(--rtk-space-2, 8px);
61
+ width: var(--rtk-space-2, 8px);
62
+ border-radius: 9999px;
63
+ --tw-bg-opacity: 1;
64
+ background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
65
+ }
66
+
59
67
  :host(.pinned-message-selector-paginated-list) .container {
60
68
  box-sizing: border-box;
61
69
  display: flex;
@@ -71,15 +79,13 @@
71
79
  }
72
80
 
73
81
  :host(.pinned-message-selector-paginated-list) .pinned-message {
82
+ box-sizing: border-box;
74
83
  display: flex;
75
84
  width: 100%;
76
85
  cursor: pointer;
77
86
  flex-direction: row;
78
- align-items: flex-start;
79
- gap: var(--rtk-space-2, 8px);
87
+ overflow: hidden;
80
88
  border-radius: var(--rtk-border-radius-sm, 4px);
81
- padding-top: var(--rtk-space-2, 8px);
82
- padding-bottom: var(--rtk-space-2, 8px);
83
89
  }
84
90
 
85
91
  :host(.pinned-message-selector-paginated-list) .pinned-message:hover {
@@ -87,7 +93,17 @@
87
93
  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));
88
94
  }
89
95
 
96
+ :host(.pinned-message-selector-paginated-list) .pinned-message-container {
97
+ display: flex;
98
+ width: 100%;
99
+ flex-direction: row;
100
+ align-items: flex-start;
101
+ padding: var(--rtk-space-2, 8px);
102
+ }
103
+
90
104
  :host(.pinned-message-selector-paginated-list) .pinned-message-content {
105
+ margin-left: var(--rtk-space-2, 8px);
106
+ margin-right: var(--rtk-space-2, 8px);
91
107
  display: flex;
92
108
  min-width: var(--rtk-space-0, 0px);
93
109
  flex: 1 1 0%;