@linktr.ee/messaging-react 3.12.7 → 3.13.0-rc-1784206423

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-qzfxhUVd.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-BrVUDc5h.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-CQm_f20V.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-5x3u5nJw.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.12.7",
+  "version": "3.13.0-rc-1784206423",
   "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-1784206423",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelView.tsx

@@ -555,53 +555,55 @@ const ChannelViewInner: React.FC<{
             </>
           )}
 
-          {/* Message List */}
-          <div
-            key="lt-channel-message-list"
-            className="flex-1 overflow-hidden relative"
-          >
-            {/* Stream only renders MessageList.head when there are messages, so
+          <div className="messaging-channel-layout relative flex min-h-0 flex-1 flex-col">
+            {/* Message List */}
+            <div
+              key="lt-channel-message-list"
+              className="messaging-channel-message-list relative min-h-0 flex-1 overflow-hidden"
+            >
+              {/* Stream only renders MessageList.head when there are messages, so
               empty redesigned channels need the header and banner in normal flow. */}
-            {onParticipantNameClick && !hasVisibleMessages && (
-              <div className="str-chat__list">
-                <div className="str-chat__message-list-scroll">
-                  {redesignedHeader}
-                  {channelBanner}
-                </div>
-              </div>
-            )}
-
-            <MessageList
-              head={
-                onParticipantNameClick && hasVisibleMessages ? (
-                  <div className="sticky top-0 z-10">
+              {onParticipantNameClick && !hasVisibleMessages && (
+                <div className="str-chat__list">
+                  <div className="str-chat__message-list-scroll">
                     {redesignedHeader}
                     {channelBanner}
                   </div>
-                ) : undefined
-              }
-              hideDeletedMessages
-              hideNewMessageSeparator={false}
-            />
-          </div>
+                </div>
+              )}
+
+              <MessageList
+                head={
+                  onParticipantNameClick && hasVisibleMessages ? (
+                    <div className="sticky top-0 z-10">
+                      {redesignedHeader}
+                      {channelBanner}
+                    </div>
+                  ) : undefined
+                }
+                hideDeletedMessages
+                hideNewMessageSeparator={false}
+              />
+            </div>
 
-          {renderConversationFooter ? (
-            <React.Fragment key="lt-channel-conversation-footer">
-              {renderConversationFooter(channel)}
-            </React.Fragment>
-          ) : null}
+            {renderConversationFooter ? (
+              <React.Fragment key="lt-channel-conversation-footer">
+                {renderConversationFooter(channel)}
+              </React.Fragment>
+            ) : null}
 
-          {/* Message Input */}
-          <CustomMessageInput
-            key="lt-channel-message-input"
-            {...(renderMessageInputActions && {
-              renderActions: () => renderMessageInputActions?.(channel),
-            })}
-            renderFooter={() => renderMessageInputFooter?.(channel)}
-            disabled={composerDisabled}
-            disabledReason={composerDisabledReason}
-            composerInput={composerInput}
-          />
+            {/* Message Input */}
+            <CustomMessageInput
+              key="lt-channel-message-input"
+              {...(renderMessageInputActions && {
+                renderActions: () => renderMessageInputActions?.(channel),
+              })}
+              renderFooter={() => renderMessageInputFooter?.(channel)}
+              disabled={composerDisabled}
+              disabledReason={composerDisabledReason}
+              composerInput={composerInput}
+            />
+          </div>
         </Window>
       </WithComponents>
     </>

package/src/components/CustomMessageInput/index.tsx

@@ -147,42 +147,94 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
 }) => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
+  const composerRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    const composer = composerRef.current
+    const layout = composer?.parentElement
+
+    if (!composer || !layout) {
+      return
+    }
+
+    const updateComposerHeight = () => {
+      layout.style.setProperty(
+        '--messaging-composer-height',
+        `${composer.offsetHeight + 16}px`
+      )
+    }
+
+    updateComposerHeight()
+
+    if (typeof ResizeObserver === 'undefined') {
+      return
+    }
+
+    const resizeObserver = new ResizeObserver(updateComposerHeight)
+    resizeObserver.observe(composer)
+
+    return () => {
+      resizeObserver.disconnect()
+      layout.style.removeProperty('--messaging-composer-height')
+    }
+  }, [])
 
   // Linktree official channel: the composer is replaced by an info panel
   // explaining the linker cannot send messages on this thread.
   if (disabled) {
     return (
-      <>
-        <div className="messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4">
-          {disabledReason ? (
-            <p className="max-w-[345px] text-center text-xs font-normal leading-[1.3] tracking-[0.12px] text-black/40">
-              {disabledReason}
-            </p>
-          ) : null}
+      <div ref={composerRef} className="messaging-composer-chrome">
+        <div className="messaging-composer-backdrop" aria-hidden="true">
+          <div className="messaging-composer-backdrop-blur" />
+          <div className="messaging-composer-backdrop-blur" />
+          <div className="messaging-composer-backdrop-blur" />
+          <div className="messaging-composer-backdrop-blur" />
+          <div className="messaging-composer-backdrop-blur" />
+          <div className="messaging-composer-backdrop-gradient" />
         </div>
-        {renderFooter?.()}
-      </>
+        <div className="relative z-10 flex flex-col">
+          <div className="messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4">
+            {disabledReason ? (
+              <p className="max-w-[345px] text-center text-xs font-normal leading-[1.3] tracking-[0.12px] text-black/40">
+                {disabledReason}
+              </p>
+            ) : null}
+          </div>
+          {renderFooter?.()}
+        </div>
+      </div>
     )
   }
 
   return (
-    <div className="flex min-h-0 flex-col gap-4 p-4">
-      <div
-        // @ts-expect-error Only React 19 onwards has `inert` in its types.
-        inert={isFrozen ? '' : undefined}
-        aria-disabled={isFrozen || undefined}
-        className="message-input flex min-h-0 items-end gap-4 aria-disabled:opacity-40"
-      >
-        {renderActions && (
-          <div className="flex h-12 shrink-0 items-center justify-center">
-            {renderActions()}
-          </div>
-        )}
-        <ComposerLockedContext.Provider value={isFrozen}>
-          <MessageInput Input={composerInput ?? CustomMessageInputInner} />
-        </ComposerLockedContext.Provider>
+    <div ref={composerRef} className="messaging-composer-chrome">
+      <div className="messaging-composer-backdrop" aria-hidden="true">
+        <div className="messaging-composer-backdrop-blur" />
+        <div className="messaging-composer-backdrop-blur" />
+        <div className="messaging-composer-backdrop-blur" />
+        <div className="messaging-composer-backdrop-blur" />
+        <div className="messaging-composer-backdrop-blur" />
+        <div className="messaging-composer-backdrop-gradient" />
+      </div>
+
+      <div className="relative z-10 flex min-h-0 flex-col gap-4 p-4">
+        <div
+          // @ts-expect-error Only React 19 onwards has `inert` in its types.
+          inert={isFrozen ? '' : undefined}
+          aria-disabled={isFrozen || undefined}
+          className="message-input flex min-h-0 items-end gap-4 aria-disabled:opacity-40"
+        >
+          {renderActions && (
+            <div className="flex h-12 shrink-0 items-center justify-center">
+              {renderActions()}
+            </div>
+          )}
+          <ComposerLockedContext.Provider value={isFrozen}>
+            <MessageInput Input={composerInput ?? CustomMessageInputInner} />
+          </ComposerLockedContext.Provider>
+        </div>
+        {renderFooter?.()}
       </div>
-      {renderFooter?.()}
     </div>
   )
 }

package/src/styles.css

@@ -15,6 +15,131 @@
   --str-chat__own-message-bubble-color: #fff;
 }
 
+.messaging-channel-message-list .str-chat__message-list-scroll {
+  padding-bottom: var(--messaging-composer-height, 9rem);
+}
+
+.messaging-composer-chrome {
+  position: relative;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+}
+
+.messaging-channel-layout > .messaging-composer-chrome {
+  position: absolute;
+}
+
+.messaging-composer-backdrop {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  isolation: isolate;
+  pointer-events: none;
+}
+
+.messaging-composer-backdrop-blur {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.messaging-composer-backdrop-blur:nth-child(1) {
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  mask: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 12%,
+    black 28%,
+    transparent 44%
+  );
+  -webkit-mask: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 12%,
+    black 28%,
+    transparent 44%
+  );
+}
+
+.messaging-composer-backdrop-blur:nth-child(2) {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  mask: linear-gradient(
+    to bottom,
+    transparent 12%,
+    black 28%,
+    black 44%,
+    transparent 60%
+  );
+  -webkit-mask: linear-gradient(
+    to bottom,
+    transparent 12%,
+    black 28%,
+    black 44%,
+    transparent 60%
+  );
+}
+
+.messaging-composer-backdrop-blur:nth-child(3) {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  mask: linear-gradient(
+    to bottom,
+    transparent 28%,
+    black 44%,
+    black 60%,
+    transparent 76%
+  );
+  -webkit-mask: linear-gradient(
+    to bottom,
+    transparent 28%,
+    black 44%,
+    black 60%,
+    transparent 76%
+  );
+}
+
+.messaging-composer-backdrop-blur:nth-child(4) {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  mask: linear-gradient(
+    to bottom,
+    transparent 44%,
+    black 60%,
+    black 76%,
+    transparent 92%
+  );
+  -webkit-mask: linear-gradient(
+    to bottom,
+    transparent 44%,
+    black 60%,
+    black 76%,
+    transparent 92%
+  );
+}
+
+.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%);
+  -webkit-mask: linear-gradient(
+    to bottom,
+    transparent 60%,
+    black 76%,
+    black 100%
+  );
+}
+
+.messaging-composer-backdrop-gradient {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(180deg, rgba(251, 250, 249, 0) 0%, #fbfaf9 100%);
+}
+
 /* Dialog component styles - used by messaging components */
 /* Note: Dialogs get moved to the top layer when opened with .showModal() */
 .mes-dialog {
@@ -813,6 +938,7 @@
   }
 
 }
+
 /* Locked attachment wrapper: stack card + text bubble in the correct direction */
 .str-chat__li .str-chat__message--me .str-chat__message-bubble-wrapper {
   display: flex;
@@ -855,4 +981,4 @@
 
 .message-locked-attachment-text .str-chat__message-text-inner {
   color: inherit;
-}
+}