@linktr.ee/messaging-react 3.1.0 → 3.1.2-rc-1780563075

package/dist/index.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.1.0",
+  "version": "3.1.2-rc-1780563075",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -60,6 +60,7 @@
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "sass-embedded": "^1.100.0",
     "storybook": "^8.5.0",
     "stream-chat": "^9.41.1",
     "stream-chat-react": "^13.14.5",

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,16 +112,15 @@ const CustomChannelHeader: React.FC<{
             image={participantImage}
             starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
-            size={40}
+            size={48}
           />
           <button
             type="button"
             onClick={onShowInfo}
-            className="flex items-center gap-0.5 rounded-full bg-black/[0.05] px-3 py-1 text-xs font-medium text-black/90 hover:bg-black/[0.08] transition-colors"
+            className="flex items-center gap-0.5 rounded-full px-3 py-1 text-xs font-medium text-black/90 hover:bg-black/[0.08] transition-colors"
             aria-label={`View info for ${participantName}`}
           >
             {participantName}
-            <CaretRightIcon className="size-3 shrink-0" />
           </button>
           {dmAgentEnabled && (
             <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
@@ -151,7 +149,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"
@@ -160,7 +158,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
@@ -182,7 +180,7 @@ const CustomChannelHeader: React.FC<{
             image={participantImage}
             starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
-            size={40}
+            size={48}
           />
           <div className="min-w-0">
             {canShowInfo ? (
@@ -193,7 +191,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">
@@ -219,7 +216,7 @@ const CustomChannelHeader: React.FC<{
               }
             >
               <StarIcon
-                className={classNames('size-5', {
+                className={classNames('size-6', {
                   'text-yellow-600': isStarred,
                   'text-black/90': !isStarred,
                 })}
@@ -234,7 +231,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>
@@ -398,7 +395,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}
@@ -436,7 +433,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}

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/components/MessagingShell/MessagingShell.test.tsx

@@ -168,4 +168,97 @@ describe('MessagingShell', () => {
       'Conversation ended'
     )
   })
+
+  it('does not create the channel again when the load effect re-runs for the same pair (e.g. service identity settles during connect)', async () => {
+    queryChannelsMock.mockResolvedValue([])
+    startChannelWithParticipantMock.mockResolvedValue(makeChannel('created-1'))
+
+    const { rerender } = renderWithProviders(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        initialParticipantData={{ id: 'other-1', name: 'Other Person' }}
+      />
+    )
+
+    await waitFor(() =>
+      expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+    )
+
+    // A fresh `service` reference (as happens while the connection settles)
+    // re-runs the load effect. The once-per-pair guard must prevent a second
+    // create for the same viewer/participant pair before the new channel is
+    // indexed by queryChannels.
+    useMessagingReturn = {
+      ...useMessagingReturn,
+      service: { startChannelWithParticipant: startChannelWithParticipantMock },
+    }
+    rerender(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        initialParticipantData={{ id: 'other-1', name: 'Other Person' }}
+      />
+    )
+
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not wipe a newer pair load guard when an earlier in-flight load fails', async () => {
+    const PAIR_A = 'pair-A'
+    const PAIR_B = 'pair-B'
+
+    // Pair A's query stays pending until we reject it, simulating a load still
+    // in flight when the participant changes. Pair B resolves with no channel.
+    let rejectA: (reason?: unknown) => void = () => {}
+    queryChannelsMock.mockImplementation(
+      (query: { members?: { $eq?: string[] } }) => {
+        if (query?.members?.$eq?.includes(PAIR_A)) {
+          return new Promise((_resolve, reject) => {
+            rejectA = reject
+          })
+        }
+        return Promise.resolve([])
+      }
+    )
+    startChannelWithParticipantMock.mockResolvedValue(makeChannel('created-b'))
+
+    const { rerender } = renderWithProviders(
+      <MessagingShell
+        initialParticipantFilter={PAIR_A}
+        initialParticipantData={{ id: PAIR_A, name: 'A' }}
+      />
+    )
+
+    // Switch to pair B while A's load is still pending; B creates its channel.
+    rerender(
+      <MessagingShell
+        initialParticipantFilter={PAIR_B}
+        initialParticipantData={{ id: PAIR_B, name: 'B' }}
+      />
+    )
+
+    await waitFor(() =>
+      expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+    )
+
+    // A's stale load now fails. Its catch must not clear pair B's guard.
+    rejectA(new Error('transient'))
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    // Re-run the load effect for pair B (a fresh `service` reference). With B's
+    // guard intact this must not create a second channel.
+    useMessagingReturn = {
+      ...useMessagingReturn,
+      service: { startChannelWithParticipant: startChannelWithParticipantMock },
+    }
+    rerender(
+      <MessagingShell
+        initialParticipantFilter={PAIR_B}
+        initialParticipantData={{ id: PAIR_B, name: 'B' }}
+      />
+    )
+
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+  })
 })

package/src/components/MessagingShell/index.tsx

@@ -65,13 +65,44 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   const onChannelSelectRef = useRef(onChannelSelect)
   onChannelSelectRef.current = onChannelSelect
 
+  // Track the direct-conversation load to prevent repeated/concurrent loads.
+  // Identity-stable deps (above) stop the common re-fire, but legitimate dep
+  // changes (e.g. `service`/`client` settling during connect) can still re-run
+  // this effect before the just-created channel is indexed, each firing another
+  // startChannelWithParticipant call and creating duplicate welcome messages.
+  const directConversationLoadRef = useRef<string | null>(null)
+
+  // Mirror the currently-selected channel into a ref so the async load can read
+  // the latest value rather than the (possibly stale) effect-closure value.
+  const selectedChannelRef = useRef<Channel | null>(null)
+  useEffect(() => {
+    selectedChannelRef.current = selectedChannel
+  }, [selectedChannel])
+
   useEffect(() => {
     if (!client || !isConnected) return
 
-    const loadInitialChannel = async () => {
-      const userId = client.userID
-      if (!userId) return
+    const userId = client.userID
+    if (!userId) return
+
+    // Only load once per viewer ↔ participant pair. Set synchronously (before
+    // the async work) so re-runs triggered by changing dependency identities
+    // bail out instead of issuing another channel-create request.
+    const loadKey = `${userId}::${initialParticipantFilter}`
+    if (directConversationLoadRef.current === loadKey) return
+    directConversationLoadRef.current = loadKey
 
+    // Release the guard only if it still belongs to this load. A newer load for
+    // a different pair may have taken ownership while this one was in flight, so
+    // clearing unconditionally could wipe the newer guard and let a duplicate
+    // load/create slip through.
+    const releaseLoadGuard = () => {
+      if (directConversationLoadRef.current === loadKey) {
+        directConversationLoadRef.current = null
+      }
+    }
+
+    const loadInitialChannel = async () => {
       try {
         if (debug) {
           console.log(
@@ -105,6 +136,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
         const participantData = initialParticipantDataRef.current
         if (!participantData || !service) {
+          // Allow a retry once participant data / service become available.
+          releaseLoadGuard()
           setDirectConversationError('No conversation found with this account')
           if (debug) {
             console.log(
@@ -136,6 +169,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
             '[MessagingShell] Failed to create conversation:',
             createErr
           )
+          // Allow a retry for this pair after a transient failure.
+          releaseLoadGuard()
           setDirectConversationError('Failed to create conversation')
         }
       } catch (err) {
@@ -143,7 +178,14 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           '[MessagingShell] Failed to load initial conversation:',
           err
         )
-        setDirectConversationError('Failed to load conversation')
+        // Allow a retry for this pair after a transient failure.
+        releaseLoadGuard()
+        // Don't replace an already-loaded conversation with an error screen.
+        // Read the latest selected channel via ref to avoid acting on a stale
+        // closure value when the channel was selected mid-flight.
+        if (!selectedChannelRef.current) {
+          setDirectConversationError('Failed to load conversation')
+        }
       }
     }
 

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,59 @@
+@layer stream, stream-overrides;
+
 /* Stream Chat base styles */
-@import 'stream-chat-react/dist/css/v2/index.css';
+@import 'stream-chat-react/dist/scss/v2/index.scss' layer(stream);
 
-/* Inherit the host's font instead of stream-chat-react's hardcoded system stack.
+@layer stream-overrides {
+  .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__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;
+  }
+
+  .str-chat__message.str-chat__message--other {
+    column-gap: 0.25rem;
+  }
+
+  .str-chat__message-text {
+    padding: 0.75rem 1rem;
+  }
+
+  .str-chat__message-bubble {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .str-chat__li--single,
+  .str-chat__li--bottom {
+    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);
+    }
+  }
+
+  .str-chat__date-separator {
+    .str-chat__date-separator-line {
+      display: none;
+    }
+
+    .str-chat__date-separator-date {
+      margin: 0 auto;
+      font-size: 0.75rem;
+    }
+  }
 }
 
 /* Dialog component styles - used by messaging components */
@@ -293,11 +341,6 @@
 }
 
 .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;
   }
@@ -594,7 +637,7 @@
   .str-chat__message-text
   .str-chat__message-text-inner
   p {
-  margin: 0.25rem 0;
+  margin: 0;
 }
 
 .str-chat__message