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

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-CBtOPvxW.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-D7eRkXoG.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",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/ChannelView.test.tsx

@@ -22,18 +22,7 @@ vi.mock('stream-chat-react', () => ({
   Window: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="window">{children}</div>
   ),
-  MessageList: ({
-    renderMessages,
-  }: {
-    renderMessages?: (options: Record<string, unknown>) => React.ReactNode[]
-  }) => (
-    <ul data-testid="message-list">
-      {renderMessages?.({ messages: [] }) ?? null}
-    </ul>
-  ),
-  defaultRenderMessages: () => [
-    <li key="message-list-item" data-testid="message-list-item" />,
-  ],
+  MessageList: () => <div data-testid="message-list" />,
   WithComponents: ({ children }: { children: React.ReactNode }) => (
     <>{children}</>
   ),

package/src/components/ChannelView.tsx

@@ -10,7 +10,6 @@ import {
   useChannelStateContext,
   WithComponents,
   MessageUIComponentProps,
-  defaultRenderMessages,
 } from 'stream-chat-react'
 
 import { useChannelStar } from '../hooks/useChannelStar'
@@ -400,41 +399,25 @@ const ChannelViewInner: React.FC<{
             key="lt-channel-message-list"
             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>
-                  )
-                }
+            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
+          </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>
+          {/* Message Input */}
+          <CustomMessageInput
+            key="lt-channel-message-input"
+            {...(renderMessageInputActions && {
+              renderActions: () => renderMessageInputActions?.(channel),
+            })}
+            renderFooter={() => renderMessageInputFooter?.(channel)}
+            disabled={composerDisabled}
+            disabledReason={composerDisabledReason}
+          />
         </Window>
       </WithComponents>
     </>

package/src/components/CustomMessageInput/index.tsx

@@ -1,5 +1,4 @@
 import { ArrowUpIcon } from '@phosphor-icons/react'
-import classNames from 'classnames'
 import React, { useContext } from 'react'
 import {
   AttachmentPreviewList as DefaultAttachmentPreviewList,
@@ -102,11 +101,9 @@ export interface CustomMessageInputProps {
    * `disabled` is true.
    */
   disabledReason?: string
-  className?: string
 }
 
 export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
-  className,
   renderActions,
   renderFooter,
   disabled = false,
@@ -120,12 +117,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   if (disabled) {
     return (
       <>
-        <div
-          className={classNames(
-            'messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3',
-            className
-          )}
-        >
+        <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}
@@ -137,19 +129,17 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
     )
   }
 
-  const actions = renderActions?.()
-
   return (
-    <div className={classNames('flex flex-col gap-4', className)}>
+    <div className="flex 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 items-end gap-4 aria-disabled:opacity-40"
       >
-        {actions && (
+        {renderActions && (
           <div className="flex h-12 shrink-0 items-center justify-center">
-            {actions}
+            {renderActions()}
           </div>
         )}
         <ComposerLockedContext.Provider value={isFrozen}>

package/src/styles.css

@@ -438,6 +438,7 @@
   gap: 4px;
   padding: 0;
   font-size: 12px;
+  line-height: 1.5;
   font-weight: 500;
 }