@linktr.ee/messaging-react 3.3.6-rc-1780987607 → 3.3.6-rc-1781077089

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-nanry0Io.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.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.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;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-CtuiVyk1.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.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.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;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 n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-C2wfgpUU.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-BpkIKkeQ.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.3.6-rc-1780987607",
+  "version": "3.3.6-rc-1781077089",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/ChannelView.tsx

@@ -10,7 +10,6 @@ import {
   useChannelStateContext,
   WithComponents,
   MessageUIComponentProps,
-  defaultRenderMessages,
 } from 'stream-chat-react'
 
 import { useChannelStar } from '../hooks/useChannelStar'
@@ -337,6 +336,8 @@ const ChannelViewInner: React.FC<{
     currentUserIsAccount === false &&
     participantIsAccount === true
 
+  const messageListContainerRef = useRef<HTMLDivElement>(null)
+
   // Prevents all message instances from unmounting when ChannelViewInner re-renders
   const MessageOverride = useCallback(
     (props: MessageUIComponentProps) => {
@@ -398,41 +399,31 @@ const ChannelViewInner: React.FC<{
           {/* Message List */}
           <div
             key="lt-channel-message-list"
+            ref={messageListContainerRef}
             className="flex-1 overflow-hidden relative"
           >
             <MessageList
               hideDeletedMessages
               hideNewMessageSeparator={false}
-              renderMessages={(options) => {
-                const elements = defaultRenderMessages(options)
-
-                if (renderConversationFooter) {
-                  elements.push(
-                    <li key="lt-channel-conversation-footer">
-                      {renderConversationFooter(channel)}
-                    </li>
-                  )
-                }
+            />
+          </div>
 
-                elements.push(
-                  // Message Input
-                  <li
-                    key="lt-channel-message-input"
-                    className="flex sticky bottom-0 p-4 pt-1 inset-x-0 mx-[calc(-1*var(--str-chat\_\_spacing-2))] md:mx-[calc(-1*min(var(--str-chat\_\_spacing-10),4%))]"
-                  >
-                    <div className="absolute bottom-0 inset-x-0 w-full h-4/5 backdrop-blur-[16px] [mask-image:linear-gradient(to_top,black_0%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_top,black_0%,transparent_100%)]" />
-                    <CustomMessageInput
-                      className="isolate w-full"
-                      renderActions={() => renderMessageInputActions?.(channel)}
-                      renderFooter={() => renderMessageInputFooter?.(channel)}
-                      disabled={composerDisabled}
-                      disabledReason={composerDisabledReason}
-                    />
-                  </li>
-                )
+          {renderConversationFooter ? (
+            <React.Fragment key="lt-channel-conversation-footer">
+              {renderConversationFooter(channel)}
+            </React.Fragment>
+          ) : null}
 
-                return elements
-              }}
+          <div className="absolute bottom-0 inset-x-0 flex w-full">
+            <div className="absolute bottom-0 inset-x-0 w-full h-4/5 backdrop-blur-[16px] [mask-image:linear-gradient(to_top,black_0%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_top,black_0%,transparent_100%)]" />
+            <CustomMessageInput
+              key="lt-channel-message-input"
+              className="isolate w-full p-4 pt-1"
+              spacerTargetRef={messageListContainerRef}
+              renderActions={() => renderMessageInputActions?.(channel)}
+              renderFooter={() => renderMessageInputFooter?.(channel)}
+              disabled={composerDisabled}
+              disabledReason={composerDisabledReason}
             />
           </div>
         </Window>

package/src/components/CustomMessageInput/index.tsx

@@ -1,6 +1,6 @@
 import { ArrowUpIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react'
 import {
   AttachmentPreviewList as DefaultAttachmentPreviewList,
   MessageInput,
@@ -14,6 +14,10 @@ import {
 
 import { CustomLinkPreviewList } from '../CustomLinkPreviewList'
 
+const INPUT_SPACER_HEIGHT_VAR = '--messaging-channel-input-spacer-height'
+const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect
+
 /**
  * Carries the channel's `frozen` state down to CustomMessageInputInner, which
  * renders the composer as a read-only/disabled input. Using a context — rather
@@ -103,6 +107,7 @@ export interface CustomMessageInputProps {
    */
   disabledReason?: string
   className?: string
+  spacerTargetRef?: React.RefObject<HTMLElement>
 }
 
 export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
@@ -111,9 +116,46 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   renderFooter,
   disabled = false,
   disabledReason,
+  spacerTargetRef,
 }) => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useIsomorphicLayoutEffect(() => {
+    if (disabled) {
+      return
+    }
+
+    const container = containerRef.current
+    const spacerTarget = spacerTargetRef?.current
+
+    if (!container || !spacerTarget) {
+      return
+    }
+
+    const updateSpacerHeight = () => {
+      spacerTarget.style.setProperty(
+        INPUT_SPACER_HEIGHT_VAR,
+        `${container.offsetHeight}px`
+      )
+    }
+
+    updateSpacerHeight()
+    window.addEventListener('resize', updateSpacerHeight)
+
+    if (typeof ResizeObserver === 'undefined') {
+      return () => window.removeEventListener('resize', updateSpacerHeight)
+    }
+
+    const resizeObserver = new ResizeObserver(updateSpacerHeight)
+    resizeObserver.observe(container)
+
+    return () => {
+      resizeObserver.disconnect()
+      window.removeEventListener('resize', updateSpacerHeight)
+    }
+  }, [disabled, spacerTargetRef])
 
   // Linktree official channel: the composer is replaced by an info panel
   // explaining the linker cannot send messages on this thread.
@@ -140,7 +182,10 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   const actions = renderActions?.()
 
   return (
-    <div className={classNames('flex flex-col gap-4', className)}>
+    <div
+      ref={containerRef}
+      className={classNames('flex flex-col gap-4', className)}
+    >
       <div
         // @ts-expect-error Only React 19 onwards has `inert` in its types.
         inert={isFrozen ? '' : undefined}

package/src/styles.css

@@ -299,6 +299,13 @@
   background-color: transparent;
 }
 
+.str-chat__ul::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: var(--messaging-channel-input-spacer-height, 80px);
+}
+
 .str-chat__message.str-chat__message--me {
   .str-chat__attachment-list .str-chat__message-attachment--card {
     color: white;