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

package/dist/collection/components/rtk-mute-all-confirmation/rtk-mute-all-confirmation.js

@@ -29,7 +29,7 @@ export class RtkMuteAllConfirmation {
         };
     }
     render() {
-        return (h(Host, { key: '012843e04afc91b7a9b8bca01d5d44ad8eb21988' }, h("div", { key: '82d246a5339936460435c45122ee9979c6f96ec4', class: "leave-modal" }, h("div", { key: '93a9cb57cc106f4dadbb3bac2dc194dc506d8926', class: "header" }, h("h2", { key: '26535ce68bae0d140ad626cfef61f7f753892404', class: "title" }, this.t('mute_all.header'))), h("p", { key: 'adf32771ba089b2b07022faa581a152495faafbc', class: "message" }, this.t('mute_all.description')), h("div", { key: '8f15b4433aa6483d968f435ce413ebe64077aee4', class: "content" }, h("div", { key: '5d9781ebe01b4085f4c5a9917a09b5b32e418c72', class: "leave-meeting" }, h("rtk-button", { key: 'bb8718e4548662d15ea67cb5a432e195c5f5f965', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: '0efaee116b9361826fc94a41e4727115a08100cb', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
+        return (h(Host, { key: 'd7439c9c3ffd1a79974ed8f8a0081aa807a2b103' }, h("div", { key: 'f11f6d201c843384f3e173cf611ea6b26fcfe620', class: "leave-modal" }, h("div", { key: '8475acebc7a3abd14a4d0716b6dbdeabb0f1896e', class: "header" }, h("h2", { key: 'fe5cfaa40eccca120a696555456acd59610bd5f0', class: "title" }, this.t('mute_all.header'))), h("p", { key: '88b6d8faf23e5780d632f9bac0077751bb9db554', class: "message" }, this.t('mute_all.description')), h("div", { key: 'b901ffb7714dbcf5bbda907df1f44214672ded17', class: "content" }, h("div", { key: 'f554e5829ff3250400307f139661a0fe426ee22c', class: "leave-meeting" }, h("rtk-button", { key: 'c300ddc6c3ae02266d4769a964eb3fb246aa7dbd', variant: "secondary", title: this.t('close'), onClick: this.onClose }, this.t('cancel')), h("rtk-button", { key: '897d7d2639a6c51c5fb0ae1b51a111fbba5431c9', variant: "danger", title: this.t('mute_all'), onClick: this.onMuteAll }, this.t('mute_all')))))));
     }
     static get is() { return "rtk-mute-all-confirmation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-name-tag/rtk-name-tag.js

@@ -44,7 +44,7 @@ export class RtkNameTag {
         var _a, _b, _c;
         const name = formatName(((_a = this.participant) === null || _a === void 0 ? void 0 : _a.name) || '');
         const isSelf = ((_b = this.participant) === null || _b === void 0 ? void 0 : _b.id) === ((_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self.id);
-        return (h(Host, { key: 'd42b26fe39b4a8643e32b420ec6cded7450dde20', title: name }, h("slot", { key: '5235adedfaef8eb0b99d46f9b6e89efe40e53f68', name: "start" }), h("span", { key: 'bd15296809e2caf334c6786e45e3b751633ff001', class: "name" }, this.formatNameTag(name, isSelf)), h("slot", { key: '6f5a39cfecf90b9d449b08274eb20b450bcba196', name: "end" })));
+        return (h(Host, { key: '2d54963d300fcdd14790f326ef3bf708fe582723', title: name }, h("slot", { key: '9ccf8120cf46e094e03430364b02319e52e266c7', name: "start" }), h("span", { key: '62d0ecb3c315b88c63335fd576bcd33ba95a801d', class: "name" }, this.formatNameTag(name, isSelf)), h("slot", { key: '7e6b60ee3b99a4969d701ceb9cc96e27f8d3d4b8', name: "end" })));
     }
     static get is() { return "rtk-name-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,9 +47,9 @@ export class RtkNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8c854ce9c1fbed1d0078e37ddfe731bd09f60217' }, h("div", { key: 'e5110dfac0052c151ad0f0c702fd2183639c160c', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: '34c84299f20115d1576606443fd28035d604a282', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
+        return (h(Host, { key: '1e728f896ce0212c990677528187929c53e70b87' }, h("div", { key: '1855671fbe703e142f873aff2492f7c2190671ed', class: "ctr" }, this.notification.icon != null && (h("rtk-icon", { key: 'b79f092b899ffe893473571ba735fbb0926901d8', class: "icon", icon: this.notification.icon, variant: (_a = this.notification.iconVariant) !== null && _a !== void 0 ? _a : 'primary' })), this.notification.image != null &&
             this.notification.icon == null &&
-            this.imageState !== 'errored' && (h("img", { key: 'f8c7d6de5740e5e94be8b0bec312b44157c9999a', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: 'cf22e099409eda906611ad43bb92192512c3b3f0', class: "message" }, h(TextMessageView, { key: '87e52e92ffa9d86b4ddc6a1c61b5bbb6a9f6c1d1', message: this.notification.message })), h("div", { key: '06195e55729bbc11fc48b188df7ee5f8a7b111d6', class: "right" }, this.notification.button != null && (h("rtk-button", { key: 'b1a8e8f05587fa9eaf66e9d8932dee6d4fc57e67', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: '102260442e93358e972d72dbcfe2cc90f68523d9', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: 'f585bf6153a7c34528bd46af850db3f8511805ff', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
+            this.imageState !== 'errored' && (h("img", { key: '48b6d72eceb2414e5f045f5f311ed15ebff6ddb7', src: this.notification.image, class: { loaded: this.imageState === 'loaded' }, onLoad: () => (this.imageState = 'loaded'), onError: () => (this.imageState = 'errored') })), h("p", { key: 'c78fd59b339d0f1b91cb168a42d1c44bfdbcad77', class: "message" }, h(TextMessageView, { key: '3ddd5d840631752b6369b3361f71f655ddf814d5', message: this.notification.message })), h("div", { key: 'd160cc17361b7183baf08170bdd79d086584de94', class: "right" }, this.notification.button != null && (h("rtk-button", { key: 'e08976222e6e410cc1cd4d38bfd448f830b48044', size: "sm", variant: this.notification.button.variant, onClick: () => this.notification.button.onClick() }, this.notification.button.text)), h("button", { key: '23b0f91a687d3193df1d26e5e0fdc055f10a385b', onClick: () => this.dismiss.emit(this.notification.id), class: "dismiss" }, h("rtk-icon", { key: 'e055d3607a74898d70905da7720005158d403826', "aria-label": this.t('dismiss'), icon: this.iconPack.dismiss }))))));
     }
     static get is() { return "rtk-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -197,7 +197,10 @@ export class RtkNotifications {
         this.waitlistedParticipantLeftListener = (participant) => {
             this.remove(`${participant.id}-joined-waitlist`);
         };
-        this.chatUpdateListener = ({ message }) => {
+        this.chatUpdateListener = ({ message, action }) => {
+            // NOTE(ikabra): we only want notifications for new messages
+            if (action !== 'add')
+                return;
             const parsedMessage = parseMessageForTarget(message);
             if (parsedMessage != null) {
                 if (parsedMessage.userId === meeting.self.userId) {

package/dist/collection/components/rtk-overlay-modal/rtk-overlay-modal.js

@@ -30,7 +30,7 @@ export class RtkOverlayModal {
         }
     }
     render() {
-        return (h(Host, { key: '3c4b052af95eb7fd181d940b671b1d8105c568bb' }, h("rtk-icon", { key: 'a279a00bc270b2aa5bc1b867753bb10fbb13dfba', icon: this.states.activeOverlayModal.icon }), h("h2", { key: '283ade7b8c7f340e6931330a923df6d7457902e7' }, this.states.activeOverlayModal.title), h("p", { key: '16a8497d0940fa3354530555ab523e4d7236bbc0' }, this.states.activeOverlayModal.description)));
+        return (h(Host, { key: 'd2837e184517e21a048bf3c0132db866e76df98e' }, h("rtk-icon", { key: '986632806311740b097ef99ad2cefc286f54b7d4', icon: this.states.activeOverlayModal.icon }), h("h2", { key: 'f7c985545abeefcf0dccd10744c70e84b14c0f1d' }, this.states.activeOverlayModal.title), h("p", { key: '43ab2a1bde3c41732d3e159c493a799f68bcd0c7' }, this.states.activeOverlayModal.description)));
     }
     static get is() { return "rtk-overlay-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/rtk-paginated-list/rtk-paginated-list.css

@@ -250,9 +250,7 @@ rtk-text-message[is-continued] {
 
 #top-scroll {
   transform: translateY(20vh);
-}
-#bottom-scroll {
-  transform: translateY(-20vh);
+  transform: translateY(20px);
 }
 
 a {
@@ -266,9 +264,8 @@ a:hover {
 }
 
 .show-new-messages-ctr {
-  pointer-events: none;
   position: absolute;
-  bottom: var(--rtk-space-2, 8px);
+  bottom: var(--rtk-space-4, 16px);
   right: var(--rtk-space-4, 16px);
   z-index: 10;
   margin-top: calc(var(--rtk-space-14, 56px) * -1);
@@ -285,6 +282,7 @@ a:hover {
 .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;
 }
 
@@ -312,6 +310,8 @@ rtk-spinner,
 .page-wrapper {
   margin-left: var(--rtk-space-1, 4px);
   margin-right: var(--rtk-space-1, 4px);
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 .message-wrapper {