@cloudflare/realtimekit-ui 1.1.0-staging.1 → 1.1.0-staging.10

package/dist/collection/components/rtk-audio-grid/rtk-audio-grid.js

@@ -80,7 +80,7 @@ export class RtkAudioGrid {
     }
     render() {
         const onStage = this.activeParticipants.concat(this.onStageParticipants);
-        return (h(Host, { key: '545ff0d94e5d8cb5604279fd22b47d2c9c30ff96' }, h("div", { key: 'cbf5012d5087b84eddfad9e17fad50e3470ebb47', class: "content scrollbar" }, h("div", { key: '2a513b6542719648450701770638cba13700b8bb', class: "stage grid" }, this.renderGrid(onStage)), this.offStageParticipants.length > 0 && (h("div", { key: '1ac6c830743816da172504c156492a0b834cdb7b', class: "waitlist-area" }, h("div", { key: 'dfff80aece14434a905e16c28df55c91a865481e', class: "listening-title" }, this.offStageParticipants.length, " ", this.t('grid.listening')), h("div", { key: 'e0e6c644fb313b688b5e3cb77082ac29ae54b1d0', class: "waitlist-grid grid" }, this.renderGrid(this.offStageParticipants))))), h("slot", { key: 'fd4bab6e6ceeb733e1aa10d7e2f5388fa67a097f' })));
+        return (h(Host, { key: '1fe3a85bc93c05e225d68f21055e1017a7f70d58' }, h("div", { key: 'af48ec158bcd5b6a9c2326703aac739643053c05', class: "content scrollbar" }, h("div", { key: 'c8141f9cb9f9eee023419c3c99cc98098907208b', class: "stage grid" }, this.renderGrid(onStage)), this.offStageParticipants.length > 0 && (h("div", { key: '43bc09bdf14e0faac406f8f5f0f0a244ec95624a', class: "waitlist-area" }, h("div", { key: '609530579f746d37e16839dd82afd8f04c183101', class: "listening-title" }, this.offStageParticipants.length, " ", this.t('grid.listening')), h("div", { key: '410f40724a1816bd12e925e5de5a2212f0202c6a', class: "waitlist-grid grid" }, this.renderGrid(this.offStageParticipants))))), h("slot", { key: 'f3ecc1e452e89239e3cb3327b597805fd01b6a1b' })));
     }
     static get is() { return "rtk-audio-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-avatar/rtk-avatar.js

@@ -40,7 +40,7 @@ export class RtkAvatar {
         };
     }
     render() {
-        return (h(Host, { key: 'c1a0be37edb75c40b275ad59af85cee7df3f1cdf' }, this.getAvatar(), h("slot", { key: '1cd71e7494a09d68a52051edc279911dc3168515' })));
+        return (h(Host, { key: 'd7d3a7b03a3807984dc6798b5e35cec4418e06e7' }, this.getAvatar(), h("slot", { key: '25aa9fe632a132c1e2f8ef88ac98043bb8ef085a' })));
     }
     static get is() { return "rtk-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-breakout-room-participants/rtk-breakout-room-participants.js

@@ -99,9 +99,9 @@ export class RtkBreakoutRoomParticipants {
             }, size: "sm" }), h("p", { class: "name", title: name }, shorten(name, 16), this.meeting.self.userId === participant.id && ` (${this.t('you')})`)));
     }
     render() {
-        return (h(Host, { key: '2df7ce2cbfbdfea7d739e2d9ba39e029e650813a' }, h("div", { key: '22e9786b7ce49b59c19f6dacd74aab60150a5ac1', class: "search-wrapper" }, h("div", { key: '66dbf04424c21717663bc72c2d005ea1ca3c7b0b', class: "search", part: "search" }, h("rtk-icon", { key: 'c6ea14f0ea2c2b4833a3c6eca076a20e876bf16a', icon: this.iconPack.search, part: "search-icon", class: "search-icon" }), h("input", { key: '506a501cbbb0d5ac9ab18d727a5878452a1ddb94', type: "search", autocomplete: "off", placeholder: this.t('search'), onInput: this.onSearchInput, part: "search-input" })), h("slot", { key: '7811caee1f0abb42effdb9f1d5cd962b1d74f378', name: "shuffle-button" })), h("div", { key: '31343e56d0109cd9a43e6baf0ecccc41e67aca0e', class: "header" }, h("div", { key: '6a534ac1cb33e0cb9b2a8edbbf8933aa87e6e679', class: "title-wrapper" }, h("span", { key: '3ce597924d2132e5b9ebacfb3d4078cff50a619b' }, this.t('breakout_rooms.main_room')), h("span", { key: '1033023b38905b1a5ef7ebfd7be025dfdedb4f61', class: "participant-count" }, "(", h("rtk-icon", { key: '5eed0bebdeb203efb34893e4e5790f8f4ff699e7', icon: this.iconPack.people }), this.participantsToShow.length, ")")), this.selectedParticipantIds.length !== 0 && (h("rtk-tooltip", { key: 'cbb49326b124b9fc085e9647fa00f0b9132b11e3', label: this.t('breakout_rooms.select_all') }, h("input", { key: '049b49f2171d40908855f156bc12e714e5cdb3d9', type: "checkbox", checked: this.selectedParticipantIds.length === this.participantsToShow.length, onChange: (e) => this.onToggleAll(!!e.target.checked) })))), h("div", { key: '0f0f58ee1e6743b40c955c8b7103d2ec73de8f9c', class: "ctr scrollbar", part: "container" }, this.participantsToShow.length > 0 && (h("ul", { key: '7ecb78de6863bb8792e69b7bdff5cc94b95050e8', class: "participants", part: "participants" }, this.participantsToShow.map((participant) => (h("li", { class: { 'participant-item': true, dragging: this.isDragging }, onClick: () => this.onClick(participant), onDragStart: () => this.onDragStart(participant), onDragEnd: () => this.onDragEnd(participant), draggable: this.selectedParticipantIds.length === 0, role: "listitem", key: participant.id }, this.renderPeer(participant), !this.isDragging && (h("input", { type: "checkbox", class: {
+        return (h(Host, { key: '01a707fa50950501d11428747783c1e9828e6572' }, h("div", { key: '535f80747ddc6b0d7b4c2d3d3bd82464284db304', class: "search-wrapper" }, h("div", { key: '14b0ae5148bc13345df0732eeb299354ce7e3ae4', class: "search", part: "search" }, h("rtk-icon", { key: 'c2eda4fadab2d20b16a95786a763748ee5a5e123', icon: this.iconPack.search, part: "search-icon", class: "search-icon" }), h("input", { key: '71b153979188a4eca0368faad5afe22ad4a65d84', type: "search", autocomplete: "off", placeholder: this.t('search'), onInput: this.onSearchInput, part: "search-input" })), h("slot", { key: '3ce56a86dfa9063150ff586f3333ad1a1e363219', name: "shuffle-button" })), h("div", { key: '2eed52da4d3e61f65b69c5dda8054891182615ac', class: "header" }, h("div", { key: 'c661c77b3fcfaea354456f741d2d816666bf4b68', class: "title-wrapper" }, h("span", { key: 'bc52e54641259a5c8f7eb0c749117444594a2f24' }, this.t('breakout_rooms.main_room')), h("span", { key: '9f84a8c77c7af6df6849103235927c68cafda518', class: "participant-count" }, "(", h("rtk-icon", { key: '34d4139b8fa98d3a1594a34a90774cf3bf5dc589', icon: this.iconPack.people }), this.participantsToShow.length, ")")), this.selectedParticipantIds.length !== 0 && (h("rtk-tooltip", { key: '866cf16aa1666a3cbc6521fadee36a50b168cf21', label: this.t('breakout_rooms.select_all') }, h("input", { key: 'd60fc5c1ee7a8e7b63ed7a9fd804f86bb7c945ed', type: "checkbox", checked: this.selectedParticipantIds.length === this.participantsToShow.length, onChange: (e) => this.onToggleAll(!!e.target.checked) })))), h("div", { key: 'fc8b60be1e14fd6fe92276fae65b357a998ae80a', class: "ctr scrollbar", part: "container" }, this.participantsToShow.length > 0 && (h("ul", { key: '9e76ca169c9c3a3fd3796f8e6f20a7ba19906c8f', class: "participants", part: "participants" }, this.participantsToShow.map((participant) => (h("li", { class: { 'participant-item': true, dragging: this.isDragging }, onClick: () => this.onClick(participant), onDragStart: () => this.onDragStart(participant), onDragEnd: () => this.onDragEnd(participant), draggable: this.selectedParticipantIds.length === 0, role: "listitem", key: participant.id }, this.renderPeer(participant), !this.isDragging && (h("input", { type: "checkbox", class: {
                 'hide-checkbox': this.selectedParticipantIds.length === 0,
-            }, checked: this.selectedParticipantIds.includes(participantIdentifier(participant)) }))))))), this.participantsToShow.length === 0 && this.search.length > 0 && (h("div", { key: 'bbe867d1f141f2c72d7f801d0eaedd5a0fc484b7', class: "empty-message" }, this.t('participants.errors.empty_results'))), this.participantsToShow.length === 0 && this.search.length === 0 && (h("div", { key: '84864749f6c582214a03ef21f027a9977d979785', class: "empty-room" }, h("rtk-icon", { key: '31353ae4541b5d32d402c77838955f263a02c75f', icon: this.iconPack.people_checked, part: "search-icon", class: "search-icon" }), h("p", { key: '4201bc2d18b32a3e96fee9fe6f8fdb4f75464cb1' }, this.t('breakout_rooms.all_assigned')), h("span", { key: 'e5245caf044fd96b17c41851dce8d22e1c6a083e' }, this.t('breakout_rooms.empty_main_room')))))));
+            }, checked: this.selectedParticipantIds.includes(participantIdentifier(participant)) }))))))), this.participantsToShow.length === 0 && this.search.length > 0 && (h("div", { key: '179104c8fd8bfe2692147a23d3520ba51f830721', class: "empty-message" }, this.t('participants.errors.empty_results'))), this.participantsToShow.length === 0 && this.search.length === 0 && (h("div", { key: 'c50a8a4ae9863d918108430ffbe61721fd155847', class: "empty-room" }, h("rtk-icon", { key: 'afa0afc1ecda667d26fd921438f9369549c5463b', icon: this.iconPack.people_checked, part: "search-icon", class: "search-icon" }), h("p", { key: 'be9fe2e7d745f88228ecd5053b129b344a626eb6' }, this.t('breakout_rooms.all_assigned')), h("span", { key: 'e16a34744352686361f4a2aff6e90bba44ae3a15' }, this.t('breakout_rooms.empty_main_room')))))));
     }
     static get is() { return "rtk-breakout-room-participants"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-broadcast-message-modal/rtk-broadcast-message-modal.js

@@ -37,9 +37,9 @@ export class RtkBroadcastMessageModal {
         }, 2000);
     }
     render() {
-        return (h(Host, { key: 'dafb5f8358be8db735eca75ae4f1cd887267e74a' }, h("div", { key: 'e5990f3fd2c371dc8c989ec8639f0fe1c23cbde4', class: "content-col" }, h("h2", { key: '3c6362b764c6ee53b841ab2278939815de33a0c0' }, "Broadcast message to"), h("select", { key: '9f96c461261583d32197f9a8ffaf0c73cdb2404f', onChange: (e) => {
+        return (h(Host, { key: '6fbeed26fe6bd27b9f0fb5d574437db002931560' }, h("div", { key: '539893028570a33bae6e10dfbbf30a9872660cc9', class: "content-col" }, h("h2", { key: '066aaa4541f135cd6d8d424395cf449f79c61caa' }, "Broadcast message to"), h("select", { key: '413dea8a9bd7a1efbf17948cfb45b655ddb79b71', onChange: (e) => {
                 this.messagePayload = Object.assign(Object.assign({}, this.messagePayload), { to: e.target.value });
-            } }, h("option", { key: '780592e2af423343df3dce1f0da05fbfb2676691' }, "Everyone"), h("option", { key: '7874876c9354347c9ad5365128dcf419c678b801' }, "List of rooms")), h("textarea", { key: 'e0bb3a3146e6a9c38374bed1eb78429ee4478d2c', placeholder: "Type message here...", onInput: (e) => {
+            } }, h("option", { key: '72df6790e57bdd905ad96d62c9d6fa57e4a3a41c' }, "Everyone"), h("option", { key: '82650452bb4de2b6d382a14dab3e901d62ca3b13' }, "List of rooms")), h("textarea", { key: '2be2bad10700c89162a06d662198b4eaadd96027', placeholder: "Type message here...", onInput: (e) => {
                 this.messagePayload = Object.assign(Object.assign({}, this.messagePayload), { message: e.target.value });
             } }), this.successMessage ? (h("p", null, "Message sent to ", this.messagePayload.to, h("rtk-icon", { icon: this.iconPack.checkmark }))) : (h("div", { class: "content-row" }, h("rtk-button", { onClick: () => this.close(), variant: "secondary" }, "Cancel"), "\u2002", h("rtk-button", { variant: "primary", onClick: () => this.sendMessage() }, "Send"))))));
     }

package/dist/collection/components/rtk-channel-creator/rtk-channel-creator.js

@@ -136,9 +136,9 @@ export class RtkChannelCreator {
         (_a = this.inputTextRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '5d65768a72c0769857b7d817d0b555d50a5645a5' }, h("header", { key: 'f8826c58072d2ddb73ed61a1813bf62b85cb9bc8' }, this.step === 1 ? this.t('chat.new_channel') : this.t('chat.add_members')), this.step === 1 && (h("input", { key: '2bad468b946a896cb28a6206d5650c1b0192f9f9', class: "channel-name-input", type: "text", placeholder: this.t('chat.channel_name'), ref: (el) => (this.inputTextRef = el), onInput: (e) => {
+        return (h(Host, { key: '0e938e24a3838a8b3cff8be5f8f56e0e828a656a' }, h("header", { key: 'b0aed03cea09e2105feee1bbfd1acad453cc924e' }, this.step === 1 ? this.t('chat.new_channel') : this.t('chat.add_members')), this.step === 1 && (h("input", { key: 'f252b9a1d899fa189837d6dd44097ee3e132907b', class: "channel-name-input", type: "text", placeholder: this.t('chat.channel_name'), ref: (el) => (this.inputTextRef = el), onInput: (e) => {
                 this.channelName = e.target.value.trim();
-            } })), this.step === 2 && this.renderMemberSelector(), h("footer", { key: 'd23db51c427fa67f67cc11514e241d052eb376fe' }, h("rtk-button", { key: '5031f53ed0dc632d3e778f0ecaefb0165b74d74d', kind: "button", size: "lg", disabled: this.channelName.length === 0, onClick: this.onClickHandler }, this.step === 1 ? this.t('chat.add_members') : this.t('create')))));
+            } })), this.step === 2 && this.renderMemberSelector(), h("footer", { key: '4dc3bc442c35be9c21d5c0a510aac74f8f94bc6a' }, h("rtk-button", { key: 'de530ede30a33ae9cf14c155cbf3b53d25d434ae', kind: "button", size: "lg", disabled: this.channelName.length === 0, onClick: this.onClickHandler }, this.step === 1 ? this.t('chat.add_members') : this.t('create')))));
     }
     static get is() { return "rtk-channel-creator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-channel-details/rtk-channel-details.js

@@ -27,7 +27,7 @@ export class RtkChannelDetails {
         })));
     }
     render() {
-        return (h(Host, { key: 'fd16feaf7e6dff4fbf038073e953c25d3f7b4822' }, h("header", { key: 'acb5029883e4bd77eadd22d1024cb5a9dfd8247a' }, this.t('chat.channel_members')), this.renderMembers()));
+        return (h(Host, { key: '0d50bc8ecef99900be123c21754cc7e865425c65' }, h("header", { key: '4b595171c0c7f10835230d7ed66508d5b2412ac4' }, this.t('chat.channel_members')), this.renderMembers()));
     }
     static get is() { return "rtk-channel-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-channel-selector-ui/rtk-channel-selector-ui.js

@@ -115,7 +115,7 @@ export class RtkChannelSelectorUi {
         }
     }
     render() {
-        return (h(Host, { key: 'd4565e4906338b20c51ca9559f9aabcf6a54382a' }, h("div", { key: '3e196d8746296f4d8f118c5218b9c1c9818fd7c3', class: "container", ref: (el) => (this.$el = el) }, this.isHidden && (h("rtk-button", { key: 'a771768f868b0e1281281ff8dc721f8a3cb2c201', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: 'b6e75a2486cef93ad99e9e173258256ab048198b', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))), h("slot", { key: 'fd02665a1f80a946e9f6c2b642b80edc6f978a65', name: "header" }), h("div", { key: 'd24ad0988ef95f0ddabb8ff1c33f3740f8af4f76', class: "search-wrapper" }, h("div", { key: '1bb2aec77e2d1d6500709566a0bd1d9a8246ecc8', class: "search" }, h("input", { key: '10a989ac0e55bd37f67359e9ca14ea9e79edeb88', type: "search", autocomplete: "off", placeholder: this.t('chat.search_conversations'), onInput: this.onSearchInput }), h("rtk-icon", { key: 'ffaeb2e88ffc571a6271fafd9b9ef1c7f105803b', icon: this.iconPack.search, class: "search-icon" }))), h("div", { key: '9612379eb95b5d4fae3a4fa6db05660bfc92b6e8', class: "channel-container scrollbar", role: "list" }, this.channels
+        return (h(Host, { key: '8c0e21c2edeb6cedf5e4332d361dd06fef80e2c3' }, h("div", { key: 'b4f0bdc102cf4a6bdaafe945ccacc65691cda6c8', class: "container", ref: (el) => (this.$el = el) }, this.isHidden && (h("rtk-button", { key: 'c0a4ffa6a83074b59d39827dd0d49db89d0bbe86', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: '51316a7127bc3f780d4110fe62a6114156859fef', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))), h("slot", { key: '9f62d231516e418d40e73ff4e7128c3df93fa516', name: "header" }), h("div", { key: 'e337d9c1c2599b894812d1f9d68740ddff45a417', class: "search-wrapper" }, h("div", { key: 'a4e60014174739d658cac4a8a2b4cc6170a718c3', class: "search" }, h("input", { key: 'e4b02408f7893c2ac6dc4d7f52dbafbd6acba59b', type: "search", autocomplete: "off", placeholder: this.t('chat.search_conversations'), onInput: this.onSearchInput }), h("rtk-icon", { key: 'ab9fd67f26aebf1062ed89d0411f00cd3a1ce30b', icon: this.iconPack.search, class: "search-icon" }))), h("div", { key: 'ac46c45d8f8ee6a93c04748e8eae278fecc9d2a9', class: "channel-container scrollbar", role: "list" }, this.channels
             .filter((channel) => this.searchQuery === '' || channel.displayName.includes(this.searchQuery))
             .map((channel) => {
             return (h("div", { class: {
@@ -125,7 +125,7 @@ export class RtkChannelSelectorUi {
                 }, role: "listitem", onClick: () => {
                     this.channelSelected(channel.id);
                 } }, this.renderChannelDisplayPic(channel), h("div", { class: "channel-card", "is-direct-message": channel.isDirectMessage }, h("div", { class: 'recent-message-row' }, h("span", { class: "channel-name" }, channel.displayName), channel.latestMessage && (h("span", { class: "latest-msg-time" }, this.getTimeLabel(channel.latestMessage)))), h("div", { class: 'recent-message-row' }, this.renderRecentMessage(channel), channel.unreadCount > 0 && channel.id !== this.selectedChannelId ? (h("span", { class: "new-msgs-count" }, channel.unreadCount < 99 ? channel.unreadCount : '99+')) : null))));
-        }))), !this.isHidden && (h("div", { key: '84b18823c07fc0dba89b8e11fb36044d36c4e9d3', class: "overlay-container" }, h("rtk-button", { key: '7aecee5541f731e264a5f12d10e7f7b07ce647ef', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: '924fa966910f056fbe0e7ee57de122fcb7d6311c', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))))));
+        }))), !this.isHidden && (h("div", { key: '7c886fbae80b1248db515317cfcf525eb74ffa6b', class: "overlay-container" }, h("rtk-button", { key: 'f48116160f38d361ec4842dbe2a550a1154d0b00', kind: "icon", variant: "ghost", size: "md", onClick: this.onRevealClicked, class: "sidebar-btn" }, h("rtk-icon", { key: '29f1f41eb90dddacf0ef6a42479d7468a03ee005', icon: this.isHidden ? this.iconPack.chevron_left : this.iconPack.dismiss }))))));
     }
     static get is() { return "rtk-channel-selector-ui"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-channel-selector-view/rtk-channel-selector-view.css

@@ -24,7 +24,7 @@
   flex-direction: column;
   width: 100%;
   --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));
+  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));
   position: relative;
   z-index: 10;
   height: var(--rtk-space-12, 48px);
@@ -37,6 +37,8 @@
   border-width: var(--rtk-border-width-none, 0);
   border-style: none;
   padding: var(--rtk-space-4, 16px);
+  padding-left: var(--rtk-space-3, 12px);
+  padding-right: var(--rtk-space-3, 12px);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -53,13 +55,14 @@
   display: flex;
   flex: 1 1 0%;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: var(--rtk-space-2, 8px);
 }
 
 .dropdown-trigger rtk-icon {
   margin-left: var(--rtk-space-1, 4px);
-  height: var(--rtk-space-5, 20px);
-  width: var(--rtk-space-5, 20px);
+  height: var(--rtk-space-4, 16px);
+  width: var(--rtk-space-4, 16px);
   flex-shrink: 0;
 }
 
@@ -80,27 +83,25 @@
     height: var(--rtk-space-8, 32px) !important;
     border-radius: var(--rtk-border-radius-none, 0) !important;
   }
-  .channel {
-    height: var(--rtk-space-8, 32px) !important;
-    border-radius: var(--rtk-border-radius-sm, 4px) !important;
-  }
   .avatar-icon {
     height: var(--rtk-space-3, 12px) !important;
     width: var(--rtk-space-3, 12px) !important;
     padding: var(--rtk-space-1, 4px) !important;
   }
-
-  rtk-avatar {
-    height: var(--rtk-space-5, 20px) !important;
-    width: var(--rtk-space-5, 20px) !important;
-  }
 }
 
 .dropdown {
   position: absolute;
   width: 100%;
   --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));
+  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));
+  border-bottom-width: var(--rtk-border-width-sm, 1px);
+  border-right-width: var(--rtk-border-width-none, 0);
+  border-left-width: var(--rtk-border-width-none, 0);
+  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));
   top: var(--rtk-space-12, 48px);
   z-index: 10;
   animation: 0.3s slide-down ease;
@@ -173,14 +174,23 @@ input {
 .channels-container {
   display: flex;
   flex-direction: column;
-  gap: var(--rtk-space-1, 4px);
-  padding: var(--rtk-space-2, 8px);
   flex: 1 1 auto;
   overflow-y: auto;
 }
 
+rtk-avatar {
+  height: var(--rtk-space-4, 16px) !important;
+  width: var(--rtk-space-4, 16px) !important;
+  overflow: clip;
+  border-radius: 9999px;
+  padding: var(--rtk-space-2, 8px);
+  font-size: 12px;
+}
+
 .channel {
   flex-shrink: 0;
+  padding-top: var(--rtk-space-2, 8px);
+  padding-bottom: var(--rtk-space-2, 8px);
   box-sizing: border-box;
   border-width: var(--rtk-border-width-none, 0);
   border-style: none;
@@ -188,12 +198,10 @@ input {
   outline: 2px solid transparent;
   outline-offset: 2px;
   cursor: pointer;
-  border-radius: var(--rtk-border-radius-md, 8px);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--rtk-space-2, 8px);
-  height: var(--rtk-space-16, 64px);
   width: 100%;
   padding-left: var(--rtk-space-2, 8px);
   padding-right: var(--rtk-space-3, 12px);
@@ -234,18 +242,10 @@ input {
   font-style: italic;
 }
 
-.channel rtk-avatar {
-  height: var(--rtk-space-12, 48px);
-  width: var(--rtk-space-12, 48px);
-  overflow: clip;
-  border-radius: 9999px;
-  font-size: 14px;
-}
-
 .channel .avatar-icon {
-  height: var(--rtk-space-6, 24px);
-  width: var(--rtk-space-6, 24px);
-  padding: var(--rtk-space-3, 12px);
+  height: var(--rtk-space-4, 16px);
+  width: var(--rtk-space-4, 16px);
+  padding: var(--rtk-space-2, 8px);
   color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));
   overflow: clip;
   border-radius: 9999px;

package/dist/collection/components/rtk-channel-selector-view/rtk-channel-selector-view.js

@@ -112,11 +112,11 @@ export class RtkChannelSelectorView {
     render() {
         const filteredChannels = this.getFilteredChannels();
         const shouldShowDropdown = this.viewAs === 'list' || (this.viewAs === 'dropdown' && this.showDropdown);
-        return (h(Host, { key: 'adc8ab4b9c8c865998588fbd9766296f18b3e48e' }, this.viewAs === 'list' && h("slot", { key: 'e5740725a4349472ca2eb1fb0816eb2311a99838', name: "header" }), shouldShowDropdown && (h("div", { key: '425adc920c28e0421e07bb0bd9f61b31c42fcda9', class: {
+        return (h(Host, { key: '2c491dbe0ac19cb386f0880fff81f4501648a6ae' }, this.viewAs === 'list' && h("slot", { key: '0e87d59c7522543b19711813474738f75a0e02fe', name: "header" }), shouldShowDropdown && (h("div", { key: 'c60692c7f75aa9febd73c134cd79aab020f7c2a5', class: {
                 dropdown: this.viewAs === 'dropdown',
                 scrollbar: this.viewAs === 'dropdown',
                 list: this.viewAs === 'list',
-            } }, !this.disableSearch && (h("div", { key: '9fbbc48d8489f2a6490729fac1fecdef1838e84a', class: "search-container", ref: (el) => (this.$searchEl = el) }, h("input", { key: 'f7fb43662d50274f80380b735ef9f5fc0b215442', type: "text", placeholder: this.t('chat.search_conversations'), value: this.searchQuery, onInput: (e) => (this.searchQuery = e.target.value) }), h("rtk-icon", { key: 'af76e65a1397d2a6e557a28b687e26aef641c568', icon: this.iconPack.search }))), h("div", { key: '0711a9cfcc811269a5020dc41030c0daee5cc8bf', class: "channels-container scrollbar", ref: (el) => (this.$listEl = el) }, filteredChannels.map((channel) => {
+            } }, !this.disableSearch && (h("div", { key: '74c50b2fad4cba26a20278f87c77a1672a1d748d', class: "search-container", ref: (el) => (this.$searchEl = el) }, h("input", { key: 'ff22698874ed7df9d91e72cb485ec2901ddf2b3b', type: "text", placeholder: this.t('chat.search_conversations'), value: this.searchQuery, onInput: (e) => (this.searchQuery = e.target.value) }), h("rtk-icon", { key: '9c8a9dffc0cea5e56aeb828ee198d0582024f1fa', icon: this.iconPack.search }))), h("div", { key: '04607e8d3cd62f4e6ca10c2748d6e100a4df4039', class: "channels-container scrollbar", ref: (el) => (this.$listEl = el) }, filteredChannels.map((channel) => {
             return (h("button", { class: { channel: true, active: this.selectedChannelId === channel.id }, onClick: () => this.onChannelClickHandler(channel) }, !this.hideAvatar && (h("div", null, channel.icon ? (h("rtk-icon", { class: "avatar-icon", icon: this.iconPack[channel.icon] })) : (h("rtk-avatar", { participant: {
                     name: channel.name,
                     picture: channel.avatarUrl,
@@ -124,8 +124,8 @@ export class RtkChannelSelectorView {
                     'last-message': true,
                     'no-message': !channel.latestMessage,
                 } }, h("rtk-text-message-view", { isMarkdown: true, text: channel.latestMessage })))), h("div", { class: "col channel-meta" }, channel.latestMessageTime && (h("time", { class: "time" }, this.getTimeLabel(channel.latestMessageTime))), channel.unreadCount > 0 && (h("div", { class: "unread-count" }, channel.unreadCount))))));
-        })))), this.viewAs === 'dropdown' && (h("button", { key: '0c87f90d6d0fe22284995ab7259689f80a862829', class: "dropdown-trigger", onClick: this.toggleDropdown }, h("span", { key: 'd1a364f2c5c57d19702d0b8707ca661c1dc4c14f' }, this.selectedChannelId &&
-            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (h("div", { key: 'bf789f9df82851825bc6ea12a19a5f37ab74aefe', class: "unread-count" }, this.getTotalUnreads()))), h("rtk-icon", { key: 'c0d03f883f4c46b2698be0f197751fc0470717ea', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
+        })))), this.viewAs === 'dropdown' && (h("button", { key: 'f710577dda08fe51f169c85318b9c51b89e765bb', class: "dropdown-trigger", onClick: this.toggleDropdown }, h("span", { key: '9bebec13a0bacb5651ef598ff47b96a2903ccf0f' }, h("rtk-icon", { key: '0ec4a41bcb7fa3086cdeacc0d6671c23c43a857f', icon: this.iconPack.participants }), this.selectedChannelId &&
+            `${this.t('to')} ${this.getChannelById(this.selectedChannelId).name}`, this.getTotalUnreads() > 0 && (h("div", { key: '043033c796d39c07a290350c5b7f92eafe03bbd2', class: "unread-count" }, this.getTotalUnreads()))), h("rtk-icon", { key: '12a2a92172d5741ac6ee99a39ee83158b98a8745', icon: this.showDropdown ? this.iconPack.chevron_up : this.iconPack.chevron_down })))));
     }
     static get is() { return "rtk-channel-selector-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-chat/rtk-chat.css

@@ -188,30 +188,69 @@ rtk-chat-composer-view {
   display: block;
 }
 
+.pinned-messages {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
 .pinned-messages-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--rtk-space-2, 8px);
-  padding: var(--rtk-space-2, 8px);
+  padding: var(--rtk-space-4, 16px);
   --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
-  font-size: 12px;
+  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));
+  font-size: 14px;
   cursor: pointer;
 }
 
+.pinned-messages-header div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--rtk-space-2, 8px);
+}
+
 .pinned-messages-header rtk-icon {
   height: var(--rtk-space-3, 12px);
   width: var(--rtk-space-3, 12px);
 }
 
-.pinned-messages-header:hover {
+.pinned-messages-content {
+  --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-brand-500, 33 96 253) / var(--tw-bg-opacity));
+  background-color: rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));
+  position: absolute;
+  left: var(--rtk-space-0, 0px);
+  top: 100%;
+  z-index: 50;
+  max-height: 30vh;
+  width: 100%;
+  overflow: auto;
 }
 
-.pinned-messages-header.active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
+.pinned-message {
+  display: flex;
+  cursor: pointer;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--rtk-space-2, 8px);
+  --tw-border-opacity: 1;
+  border-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));
+  padding: var(--rtk-space-4, 16px);
+  border-bottom-width: var(--rtk-border-width-sm, 1px);
+  border-right-width: var(--rtk-border-width-none, 0);
+  border-left-width: var(--rtk-border-width-none, 0);
+  border-top-width: var(--rtk-border-width-none, 0);
+  border-style: solid;
+}
+
+.pinned-message-avatar {
+  height: var(--rtk-space-6, 24px) !important;
+  width: var(--rtk-space-6, 24px) !important;
 }
 
 @keyframes swipe-in {

package/dist/collection/components/rtk-chat/rtk-chat.js

@@ -16,6 +16,7 @@ import { chatUnreadTimestamps } from "../../utils/user-prefs";
 import { FlagsmithFeatureFlags } from "../../utils/flags";
 import { createDefaultConfig } from "../../exports";
 import { SyncWithStore } from "../../utils/sync-with-store";
+import { defaultOverrides } from "../../lib/overrides";
 /**
  * Fully featured chat component with image & file upload, emoji picker and auto-scroll.
  */
@@ -41,6 +42,8 @@ export class RtkChat {
         this.iconPack = defaultIconPack;
         /** Language */
         this.t = useLanguage();
+        /** UI Overrides */
+        this.overrides = defaultOverrides;
         /** disables private chat */
         this.disablePrivateChat = false;
         /** Can current user pin/unpin messages */
@@ -78,6 +81,7 @@ export class RtkChat {
         this.searchQuery = '';
         this.selectorState = 'hide';
         this.creatingChannel = false;
+        this.isSendingMessage = false;
         this.showPinnedMessages = false;
         this.channelMap = new Map();
         this.onDragOver = (e) => {
@@ -257,12 +261,24 @@ export class RtkChat {
         };
         this.onNewMessageHandler = async (e) => {
             const message = e.detail;
-            this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
+            this.isSendingMessage = true;
+            try {
+                await this.meeting.chat.sendMessage(message, this.getRecipientPeerIds());
+            }
+            finally {
+                this.isSendingMessage = false;
+            }
         };
         this.onEditMessageHandler = async (e) => {
             var _a, _b;
-            await ((_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.editTextMessage(this.editingMessage.id, e.detail, this.editingMessage.channelId));
-            this.editingMessage = null;
+            this.isSendingMessage = true;
+            try {
+                await ((_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.chat) === null || _b === void 0 ? void 0 : _b.editTextMessage(this.editingMessage.id, e.detail, this.editingMessage.channelId));
+            }
+            finally {
+                this.isSendingMessage = false;
+                this.editingMessage = null;
+            }
         };
         this.onEditCancel = () => {
             this.editingMessage = null;
@@ -277,9 +293,35 @@ export class RtkChat {
             }
         };
         this.onDeleteMessage = (event) => {
+            var _a;
             const message = event.detail;
+            if (((_a = this.editingMessage) === null || _a === void 0 ? void 0 : _a.id) === message.id) {
+                this.editingMessage = null;
+            }
+            try {
+                if (typeof localStorage !== 'undefined') {
+                    const keysToRemove = [];
+                    for (let i = 0; i < localStorage.length; i++) {
+                        const key = localStorage.key(i);
+                        if (key && key.startsWith('rtk-chat-edit-') && key.endsWith(`-${message.id}`)) {
+                            keysToRemove.push(key);
+                        }
+                    }
+                    keysToRemove.forEach((key) => localStorage.removeItem(key));
+                }
+            }
+            catch (_b) {
+                // ignore storage access errors
+            }
             this.meeting.chat.deleteMessage(message.id);
         };
+        this.onMessageEdit = (event) => {
+            const message = event.detail;
+            if (message.type !== 'text')
+                return;
+            this.replyMessage = null;
+            this.editingMessage = message;
+        };
         this.getPrivateChatRecipients = () => {
             const participants = this.getFilteredParticipants().map((participant) => {
                 const key = generateChatGroupKey([participant.userId, this.meeting.self.userId]);
@@ -299,13 +341,25 @@ export class RtkChat {
             };
             return [everyone, ...participants];
         };
-        this.onTogglePinnedMessages = () => {
-            this.showPinnedMessages = !this.showPinnedMessages;
+        this.getPinnedMessageLabel = (message) => {
+            if (message.type === 'text')
+                return message.message;
+            if (message.type === 'image')
+                return 'Image';
+            if (message.type === 'file')
+                return 'File';
+            return '';
         };
         this.renderPinnedMessagesHeader = () => {
             if (this.meeting.chat.pinned.length === 0)
                 return null;
-            return (h("rtk-tooltip", { label: this.t('chat.toggle_pinned_msgs') }, h("div", { class: { 'pinned-messages-header': true, active: this.showPinnedMessages }, onClick: this.onTogglePinnedMessages }, h("rtk-icon", { icon: this.iconPack.pin }), this.t('chat.pinned_msgs'), ` (${this.meeting.chat.pinned.length})`)));
+            /**
+             * We do not display a picture against the avatar because the chatMessage API does not provide it.
+             */
+            return (h("div", { class: "pinned-messages" }, h("div", { class: "pinned-messages-header", onClick: () => (this.showPinnedMessages = !this.showPinnedMessages) }, h("div", null, h("rtk-icon", { icon: this.iconPack.pin, size: "sm" }), this.t('chat.pinned_msgs'), ` (${this.meeting.chat.pinned.length})`), h("rtk-icon", { icon: this.showPinnedMessages ? this.iconPack.chevron_up : this.iconPack.chevron_down, size: "sm" })), this.showPinnedMessages && (h("div", { class: "pinned-messages-content scrollbar" }, this.meeting.chat.pinned.map((message) => {
+                const label = this.getPinnedMessageLabel(message);
+                return (h("div", { class: "pinned-message" }, h("rtk-avatar", { class: "pinned-message-avatar", participant: { name: message.displayName, picture: '' }, size: "sm" }), h("span", null, label.length > 20 ? `${label.substring(0, 20)}...` : label)));
+            })))));
         };
     }
     connectedCallback() {
@@ -440,7 +494,7 @@ export class RtkChat {
         this.onChannelChanged(e);
     }
     renderComposerUI() {
-        var _a, _b, _c;
+        var _a;
         if (this.chatRecipientId === 'everyone') {
             if (!this.canSendTextMessage && !this.canSendFiles)
                 return null;
@@ -452,18 +506,21 @@ export class RtkChat {
         const uiProps = { iconPack: this.iconPack, t: this.t, size: this.size };
         const message = this.editingMessage ? this.editingMessage.message : '';
         const quotedMessage = this.replyMessage ? this.replyMessage.message : '';
-        return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: (_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : `draft-${this.selectedChannelId}`, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, canSendTextMessage: this.isTextMessagingAllowed(), canSendFiles: this.isFileMessagingAllowed(), disableEmojiPicker: !!((_c = (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.__internals__) === null || _c === void 0 ? void 0 : _c.features.hasFeature(FlagsmithFeatureFlags.DISABLE_EMOJI_PICKER)), 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" })));
+        const draftStorageKey = this.selectedChannelId
+            ? `rtk-chat-draft-${this.selectedChannelId}`
+            : 'rtk-chat-draft';
+        const editStorageKey = this.editingMessage
+            ? `rtk-chat-edit-${(_a = this.selectedChannelId) !== null && _a !== void 0 ? _a : 'no-channel'}-${this.editingMessage.id}`
+            : 'rtk-chat-edit';
+        const storageKey = this.editingMessage ? editStorageKey : draftStorageKey;
+        return (h("rtk-chat-composer-view", Object.assign({ message: message, storageKey: storageKey, quotedMessage: quotedMessage, isEditing: !!this.editingMessage, isSending: this.isSendingMessage, 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" })));
     }
     render() {
         var _a;
         if (!this.meeting) {
             return null;
         }
-        let chatMessages = this.chatGroups[this.selectedGroup] || [];
-        if (this.showPinnedMessages && this.meeting.chat.pinned.length !== 0) {
-            chatMessages = chatMessages.filter((chat) => chat.type === 'chat' && chat.message.pinned);
-        }
-        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()))));
+        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()))));
     }
     static get is() { return "rtk-chat"; }
     static get encapsulation() { return "shadow"; }
@@ -599,6 +656,30 @@ export class RtkChat {
                 "setter": false,
                 "defaultValue": "useLanguage()"
             },
+            "overrides": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Overrides",
+                    "resolved": "Overrides",
+                    "references": {
+                        "Overrides": {
+                            "location": "import",
+                            "path": "../../lib/overrides",
+                            "id": "src/lib/overrides.ts::Overrides"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "UI Overrides"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultOverrides"
+            },
             "disablePrivateChat": {
                 "type": "boolean",
                 "mutable": false,
@@ -700,6 +781,7 @@ export class RtkChat {
             "searchQuery": {},
             "selectorState": {},
             "creatingChannel": {},
+            "isSendingMessage": {},
             "showPinnedMessages": {}
         };
     }
@@ -768,3 +850,6 @@ __decorate([
 __decorate([
     SyncWithStore()
 ], RtkChat.prototype, "t", void 0);
+__decorate([
+    SyncWithStore()
+], RtkChat.prototype, "overrides", void 0);