@linktr.ee/messaging-react 3.1.2 → 3.1.3-rc-1780626183

package/dist/index.cjs

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

package/package.json

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

package/src/components/Avatar/index.tsx

@@ -43,10 +43,7 @@ export const Avatar = ({
   const borderStyle =
     shape === 'circle'
       ? { borderRadius: '50%' }
-      : {
-          borderRadius: '33%',
-          cornerShape: 'superellipse(1.3)',
-        }
+      : { borderRadius: '1rem' }
 
   const avatarInner = (
     <div className="h-full w-full overflow-hidden" style={borderStyle}>

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -125,22 +125,21 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         className={classNames(
-          'group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring',
+          'group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring rounded-[12px] [&+&]:mt-2',
           {
-            'bg-primary-alt/10 border-l-4 border-l-primary': isSelected,
-            'hover:bg-sand': !isSelected,
+            'bg-black/[0.04]': isSelected,
+            'hover:bg-black/[0.02]': !isSelected,
           }
         )}
       >
-        <div className="flex items-start gap-3">
+        <div className="flex items-start gap-4">
           {/* Avatar */}
           <Avatar
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
-            size={44}
+            size={48}
             starred={isChannelStarred}
-            className="[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
           />
 
           {/* Content column */}
@@ -149,8 +148,7 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
             <div className="flex items-center justify-between gap-2">
               <h3
                 className={classNames(
-                  'text-sm font-medium truncate',
-                  isSelected ? 'text-primary' : 'text-charcoal'
+                  'text-sm font-medium truncate text-[#191918]'
                 )}
               >
                 {isChannelStarred && (
@@ -159,7 +157,7 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
                 {participantName}
               </h3>
               {lastMessageTime && (
-                <span className="text-xs text-stone flex-shrink-0">
+                <span className="text-xs text-[#717070] flex-shrink-0">
                   {lastMessageTime}
                 </span>
               )}
@@ -167,11 +165,11 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
 
             {/* Message and unread badge row */}
             <div className="flex items-center justify-between gap-2 min-w-0">
-              <p className="text-xs text-stone flex-1 line-clamp-1">
+              <p className="text-sm text-[#717070] flex-1 line-clamp-1">
                 {messagePreview}
               </p>
               {unreadCount > 0 && (
-                <span className="bg-[#7f22fe] text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0">
+                <span className="bg-[#7f22fe] text-white text-[10px] rounded-full h-4 flex items-center justify-center p-1 min-w-4 text-center flex-shrink-0">
                   {unreadCount > 99 ? '99+' : unreadCount}
                 </span>
               )}

package/src/components/ChannelView.tsx

@@ -1,6 +1,5 @@
 import {
   ArrowLeftIcon,
-  CaretRightIcon,
   DotsThreeIcon,
   SparkleIcon,
   StarIcon,
@@ -35,7 +34,7 @@ import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
 
 const ICON_BTN_CLASS =
-  'size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
+  'size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
 
 const DM_AGENT_HEADER_HELPER_TEXT = 'Replies instantly with AI assistant'
 
@@ -90,13 +89,13 @@ const CustomChannelHeader: React.FC<{
 
   return (
     <div className="@container">
-      <div className="grid grid-cols-[1fr_auto_1fr] w-full items-center @lg:hidden">
+      <div className="grid grid-cols-[1fr_auto_1fr] w-full items-center @lg:hidden px-6 py-3">
         <div className="flex items-center gap-2">
           {showBackButton && (
             <button
               className={classNames(
                 ICON_BTN_CLASS,
-                'messaging-channel-view-back-button-mobile'
+                'messaging-channel-view-back-button-mobile bg-[#F1F0EE]'
               )}
               onClick={onBack || (() => {})}
               type="button"
@@ -113,7 +112,7 @@ const CustomChannelHeader: React.FC<{
             image={participantImage}
             starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
-            size={40}
+            size={48}
           />
           <p className="text-center text-xs font-medium text-black/90">
             {participantName}
@@ -145,7 +144,7 @@ const CustomChannelHeader: React.FC<{
             </button>
           )}
           <button
-            className={ICON_BTN_CLASS}
+            className={classNames(ICON_BTN_CLASS, 'bg-[#F1F0EE]')}
             onClick={onShowInfo}
             type="button"
             aria-label="Show info"
@@ -154,7 +153,7 @@ const CustomChannelHeader: React.FC<{
           </button>
         </div>
       </div>
-      <div className="hidden @lg:flex items-center justify-between gap-3 min-h-12">
+      <div className="px-6 py-3 hidden @lg:flex items-center justify-between gap-3 min-h-12 border-b border-b-black/[0.08]">
         <div className="flex items-center gap-4 min-w-0">
           {showBackButton && onBack && (
             <button
@@ -176,7 +175,7 @@ const CustomChannelHeader: React.FC<{
             image={participantImage}
             starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
-            size={40}
+            size={48}
           />
           <div className="min-w-0">
             {canShowInfo ? (
@@ -187,7 +186,6 @@ const CustomChannelHeader: React.FC<{
                 aria-label={`View info for ${participantName}`}
               >
                 <span className="truncate">{participantName}</span>
-                <CaretRightIcon className="size-4 shrink-0" />
               </button>
             ) : (
               <h1 className="font-medium text-black/90 truncate">
@@ -213,7 +211,7 @@ const CustomChannelHeader: React.FC<{
               }
             >
               <StarIcon
-                className={classNames('size-5', {
+                className={classNames('size-6', {
                   'text-yellow-600': isStarred,
                   'text-black/90': !isStarred,
                 })}
@@ -228,7 +226,7 @@ const CustomChannelHeader: React.FC<{
               type="button"
               aria-label="Show info"
             >
-              <DotsThreeIcon className="size-5 text-black/90" />
+              <DotsThreeIcon className="size-6 text-black/90" />
             </button>
           )}
         </div>
@@ -392,7 +390,7 @@ const ChannelViewInner: React.FC<{
       >
         <Window>
           {/* Custom Channel Header */}
-          <div key="lt-channel-header" className="p-4">
+          <div key="lt-channel-header">
             <CustomChannelHeader
               onBack={onBack}
               showBackButton={showBackButton}
@@ -415,10 +413,7 @@ const ChannelViewInner: React.FC<{
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
-            <MessageList
-              hideDeletedMessages
-              hideNewMessageSeparator={false}
-            />
+            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
           </div>
 
           {renderConversationFooter ? (
@@ -430,7 +425,9 @@ const ChannelViewInner: React.FC<{
           {/* Message Input */}
           <CustomMessageInput
             key="lt-channel-message-input"
-            renderActions={() => renderMessageInputActions?.(channel)}
+            {...(renderMessageInputActions && {
+              renderActions: () => renderMessageInputActions?.(channel),
+            })}
             renderFooter={() => renderMessageInputFooter?.(channel)}
             disabled={composerDisabled}
             disabledReason={composerDisabledReason}
@@ -443,7 +440,9 @@ const ChannelViewInner: React.FC<{
         dialogRef={infoDialogRef}
         onClose={handleCloseInfo}
         participant={participant}
-        participantDisplayName={resolveParticipantDisplayName(participant?.user)}
+        participantDisplayName={resolveParticipantDisplayName(
+          participant?.user
+        )}
         channel={channel}
         followerStatusLabel={followerStatusLabel}
         onLeaveConversation={onLeaveConversation}
@@ -582,7 +581,9 @@ export const ChannelView = React.memo<ChannelViewProps>(
             TypingIndicator={CustomTypingIndicator}
             doSendMessageRequest={doSendMessageRequest}
             {...(sendButton ? { SendButton: sendButton } : {})}
-            {...(attachmentPreviewList ? { AttachmentPreviewList: attachmentPreviewList } : {})}
+            {...(attachmentPreviewList
+              ? { AttachmentPreviewList: attachmentPreviewList }
+              : {})}
           >
             <ChannelViewInner
               onBack={onBack}

package/src/components/CustomMessage/index.tsx

@@ -207,7 +207,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             id={message.user.id}
             image={message.user.image}
             name={message.user.name || message.user.id}
-            size={isChatbot ? 24 : 28}
+            size={24}
             shape="circle"
             dmAgentEnabled={isChatbot}
           />

package/src/components/CustomMessageInput/index.tsx

@@ -60,7 +60,7 @@ const CustomMessageInputInner: React.FC = () => {
         <div className="w-full ml-2 mr-4 self-center leading-[0]">
           <TextareaComposer
             aria-disabled={disabled || undefined}
-            className="w-full resize-none outline-none leading-6"
+            className="w-full resize-none outline-none leading-5 placeholder:text-black/30 text-sm"
             // While this might usually be considered an anti-pattern, in most
             // cases, when a message thread is rendered, we want the input to
             // gain focus automatically.

package/src/providers/MessagingProvider.tsx

@@ -340,7 +340,7 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
           client={client}
           customClasses={{
             channelList:
-              'str-chat__channel-list str-chat__channel-list-react bg-transparent lg:border-r-2 border-r-0 border-[#0000000A]',
+              'str-chat__channel-list str-chat__channel-list-react bg-transparent lg:border-r-2 border-r-0 border-[#0000000A] p-4',
           }}
         >
           {children}

package/src/styles.css

@@ -1,11 +1,18 @@
 /* Stream Chat base styles */
 @import 'stream-chat-react/dist/css/v2/index.css';
 
-/* Inherit the host's font instead of stream-chat-react's hardcoded system stack.
+.str-chat {
+  /* Inherit the host's font instead of stream-chat-react's hardcoded system stack.
    In admin (federation host) this resolves to Link Sans; on linktr.ee profile
    pages it resolves to the creator's profile font. */
-.str-chat {
   --str-chat__font-family: inherit;
+
+  --str-chat__message-bubble-border-radius: 1.5rem;
+  --str-chat__message-bubble-background-color: #f1f0ee;
+  --str-chat__message-bubble-color: #181818;
+
+  --str-chat__own-message-bubble-background-color: #121110;
+  --str-chat__own-message-bubble-color: #fff;
 }
 
 /* Dialog component styles - used by messaging components */
@@ -293,21 +300,24 @@
 }
 
 .str-chat__message.str-chat__message--me {
-  .str-chat__message-bubble {
-    background-color: #121110;
-    color: white;
-  }
-
   .str-chat__attachment-list .str-chat__message-attachment--card {
     color: white;
   }
 }
 
-.str-chat__unread-messages-separator,
-.str-chat__date-separator-line {
+.str-chat__unread-messages-separator {
   background-color: transparent;
 }
 
+.str-chat__date-separator-line {
+  display: none;
+}
+
+.str-chat__date-separator-date {
+  margin: 0 auto;
+  font-size: 0.75rem;
+}
+
 .str-chat__list {
   background: transparent;
 }
@@ -334,6 +344,10 @@
   justify-items: flex-start;
 }
 
+.str-chat__message.str-chat__message--other {
+  column-gap: 0.25rem;
+}
+
 /* Outer grid for me (outgoing) messages — add footer row after message */
 .str-chat__li .str-chat__message--me {
   grid-template-areas:
@@ -533,6 +547,18 @@
   transition-delay: 300ms;
 }
 
+.str-chat__message
+  .str-chat__message-inner
+  .str-chat__message-bubble
+  .str-chat__message-text {
+  padding: 0.75rem 1rem;
+}
+
+.str-chat__message .str-chat__message-bubble {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 /* Chatbot reply markdown — restore semantics that consumer Tailwind preflight
    (or other resets) strip from the body of `.str-chat__message-text-inner`. */
 .str-chat__message-text-inner :where(h1, h2, h3, h4, h5, h6) {
@@ -594,7 +620,7 @@
   .str-chat__message-text
   .str-chat__message-text-inner
   p {
-  margin: 0.25rem 0;
+  margin: 0;
 }
 
 .str-chat__message
@@ -637,6 +663,21 @@
   margin-bottom: 0;
 }
 
+.str-chat__li--single,
+.str-chat__li--bottom {
+  .str-chat__message {
+    margin-block-end: 0.875rem;
+  }
+
+  .str-chat__message--other .str-chat__message-bubble {
+    border-end-start-radius: var(--str-chat__message-bubble-border-radius);
+  }
+
+  .str-chat__message--me .str-chat__message-bubble {
+    border-end-end-radius: var(--str-chat__message-bubble-border-radius);
+  }
+}
+
 /* 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;