@linktr.ee/messaging-react 3.14.2 → 3.14.3-rc-1784684267

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BOh2WCXX.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-C-kQCN-o.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-4OY62Yxz.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-BedgUyfu.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.14.2",
+  "version": "3.14.3-rc-1784684267",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1784684267",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomMessageInput/index.tsx

@@ -214,7 +214,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
 
       layout.style.setProperty(
         '--messaging-composer-height',
-        `${nextComposerHeight + 16}px`
+        `${nextComposerHeight}px`
       )
 
       // Reading scrollHeight forces a synchronous reflow, so it reflects the

package/src/styles.css

@@ -18,12 +18,12 @@
 .messaging-channel-message-list--floating .str-chat__message-list-scroll {
   padding-bottom: calc(
     var(--messaging-composer-height, 9rem) +
-      2rem
+      1.25rem
   );
 }
 
 .messaging-channel-layout {
-  --messaging-composer-fade-height: 1.25rem;
+  --messaging-composer-fade-height: 2rem;
 }
 
 .messaging-composer-chrome--floating {
@@ -47,6 +47,14 @@
   overflow: hidden;
   isolation: isolate;
   pointer-events: none;
+  /* Frosted band height, from the backdrop's top edge down to the composer
+     pill: the fade-height above the chrome plus the chrome's own top padding
+     (p-4 = 1rem). Blur/gradient stops are anchored to this fixed band so the
+     frosting stays in the gap above the composer and does not scale with the
+     (opaque) composer height. */
+  --messaging-composer-fade-band: calc(
+    var(--messaging-composer-fade-height) + 1rem
+  );
 }
 
 .messaging-composer-backdrop-blur {
@@ -60,17 +68,17 @@
   -webkit-backdrop-filter: blur(2px);
   mask: linear-gradient(
     to bottom,
-    transparent 0%,
-    black 12%,
-    black 28%,
-    transparent 44%
+    transparent 0,
+    black calc(var(--messaging-composer-fade-band) * 0.12),
+    black calc(var(--messaging-composer-fade-band) * 0.32),
+    transparent calc(var(--messaging-composer-fade-band) * 0.5)
   );
   -webkit-mask: linear-gradient(
     to bottom,
-    transparent 0%,
-    black 12%,
-    black 28%,
-    transparent 44%
+    transparent 0,
+    black calc(var(--messaging-composer-fade-band) * 0.12),
+    black calc(var(--messaging-composer-fade-band) * 0.32),
+    transparent calc(var(--messaging-composer-fade-band) * 0.5)
   );
 }
 
@@ -79,17 +87,17 @@
   -webkit-backdrop-filter: blur(4px);
   mask: linear-gradient(
     to bottom,
-    transparent 12%,
-    black 28%,
-    black 44%,
-    transparent 60%
+    transparent calc(var(--messaging-composer-fade-band) * 0.2),
+    black calc(var(--messaging-composer-fade-band) * 0.38),
+    black calc(var(--messaging-composer-fade-band) * 0.55),
+    transparent calc(var(--messaging-composer-fade-band) * 0.7)
   );
   -webkit-mask: linear-gradient(
     to bottom,
-    transparent 12%,
-    black 28%,
-    black 44%,
-    transparent 60%
+    transparent calc(var(--messaging-composer-fade-band) * 0.2),
+    black calc(var(--messaging-composer-fade-band) * 0.38),
+    black calc(var(--messaging-composer-fade-band) * 0.55),
+    transparent calc(var(--messaging-composer-fade-band) * 0.7)
   );
 }
 
@@ -98,17 +106,17 @@
   -webkit-backdrop-filter: blur(8px);
   mask: linear-gradient(
     to bottom,
-    transparent 28%,
-    black 44%,
-    black 60%,
-    transparent 76%
+    transparent calc(var(--messaging-composer-fade-band) * 0.4),
+    black calc(var(--messaging-composer-fade-band) * 0.58),
+    black calc(var(--messaging-composer-fade-band) * 0.72),
+    transparent calc(var(--messaging-composer-fade-band) * 0.85)
   );
   -webkit-mask: linear-gradient(
     to bottom,
-    transparent 28%,
-    black 44%,
-    black 60%,
-    transparent 76%
+    transparent calc(var(--messaging-composer-fade-band) * 0.4),
+    black calc(var(--messaging-composer-fade-band) * 0.58),
+    black calc(var(--messaging-composer-fade-band) * 0.72),
+    transparent calc(var(--messaging-composer-fade-band) * 0.85)
   );
 }
 
@@ -117,29 +125,36 @@
   -webkit-backdrop-filter: blur(12px);
   mask: linear-gradient(
     to bottom,
-    transparent 44%,
-    black 60%,
-    black 76%,
-    transparent 92%
+    transparent calc(var(--messaging-composer-fade-band) * 0.55),
+    black calc(var(--messaging-composer-fade-band) * 0.72),
+    black calc(var(--messaging-composer-fade-band) * 0.88),
+    transparent var(--messaging-composer-fade-band)
   );
   -webkit-mask: linear-gradient(
     to bottom,
-    transparent 44%,
-    black 60%,
-    black 76%,
-    transparent 92%
+    transparent calc(var(--messaging-composer-fade-band) * 0.55),
+    black calc(var(--messaging-composer-fade-band) * 0.72),
+    black calc(var(--messaging-composer-fade-band) * 0.88),
+    transparent var(--messaging-composer-fade-band)
   );
 }
 
 .messaging-composer-backdrop-blur:nth-child(5) {
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  mask: linear-gradient(to bottom, transparent 60%, black 76%, black 100%);
+  mask: linear-gradient(
+    to bottom,
+    transparent calc(var(--messaging-composer-fade-band) * 0.7),
+    black calc(var(--messaging-composer-fade-band) * 0.9),
+    black var(--messaging-composer-fade-band),
+    transparent var(--messaging-composer-fade-band)
+  );
   -webkit-mask: linear-gradient(
     to bottom,
-    transparent 60%,
-    black 76%,
-    black 100%
+    transparent calc(var(--messaging-composer-fade-band) * 0.7),
+    black calc(var(--messaging-composer-fade-band) * 0.9),
+    black var(--messaging-composer-fade-band),
+    transparent var(--messaging-composer-fade-band)
   );
 }
 
@@ -147,7 +162,11 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background: linear-gradient(180deg, rgba(251, 250, 249, 0) 0%, #fbfaf9 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(251, 250, 249, 0) 0,
+    #fbfaf9 var(--messaging-composer-fade-band)
+  );
 }
 
 /* Dialog component styles - used by messaging components */