@linktr.ee/messaging-react 3.15.3 → 3.16.0-rc-1785214411

package/dist/index.cjs

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

package/package.json

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

package/src/components/CustomMessage/SentMessageDeliveryStatus.test.tsx

@@ -13,8 +13,8 @@ import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
 // error, not in a thread) and only exposes a terminal state once a message is
 // stored — Stream's tested code. What this component owns is the "Delivered"
 // label wired into the terminal slots (sent/delivered/read), its "latest
-// message in the thread" gate derived from live channel state, and suppressing
-// the sending spinner. Mock `MessageStatus` to render the slots it was handed,
+// message in the thread" gate derived from live channel state. Mock
+// `MessageStatus` to render the slots it was handed,
 // and the context hooks the label reads.
 vi.mock('stream-chat-react', () => ({
   useMessageContext: vi.fn(),
@@ -135,13 +135,63 @@ describe('SentMessageDeliveryStatus', () => {
     }
   })
 
-  it('always suppresses the sending spinner', () => {
+  it('renders "Sending" in the sending slot for the latest message', () => {
     mockedUseMessageContext.mockReturnValue({
-      message: { id: 'own-2' },
+      message: { id: 'own-2', status: 'sending' },
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    expect(screen.getByTestId('sending-slot')).toHaveTextContent(/sending/i)
+  })
+
+  it('does not render "Sending" for an earlier message', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: { id: 'own-1', status: 'sending' },
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
 
     expect(screen.getByTestId('sending-slot')).toBeEmptyDOMElement()
   })
+
+  it('renders "Failed to send" for every own failed message', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: { id: 'own-1', status: 'failed', type: 'regular' },
+      isMyMessage: () => true,
+      threadList: false,
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    expect(screen.getByTestId('sent-message-failed-status')).toHaveTextContent(
+      /failed to send/i
+    )
+    expect(screen.queryByTestId('sending-slot')).not.toBeInTheDocument()
+  })
+
+  it('does not render failure status for a received message or thread message', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: { id: 'own-1', status: 'failed', type: 'regular' },
+      isMyMessage: () => false,
+      threadList: false,
+    } as never)
+
+    const { rerender } = renderWithProviders(<SentMessageDeliveryStatus />)
+
+    expect(
+      screen.queryByTestId('sent-message-failed-status')
+    ).not.toBeInTheDocument()
+
+    mockedUseMessageContext.mockReturnValue({
+      message: { id: 'own-1', status: 'failed', type: 'regular' },
+      isMyMessage: () => true,
+      threadList: true,
+    } as never)
+    rerender(<SentMessageDeliveryStatus />)
+
+    expect(
+      screen.queryByTestId('sent-message-failed-status')
+    ).not.toBeInTheDocument()
+  })
 })

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -1,4 +1,8 @@
-import { ChecksIcon } from '@phosphor-icons/react'
+import {
+  ChecksIcon,
+  CircleNotchIcon,
+  WarningCircleIcon,
+} from '@phosphor-icons/react'
 import {
   MessageStatus,
   useChannelStateContext,
@@ -6,8 +10,8 @@ import {
 } from 'stream-chat-react'
 
 /**
- * "✓✓ Delivered" label, wired into *every* terminal `MessageStatus` state
- * (sent / delivered / read).
+ * Message status stamps for sending and terminal `MessageStatus` states
+ * (sent / delivered / read), plus failed messages.
  *
  * Two reasons this is more than a static label:
  *
@@ -16,9 +20,7 @@ import {
  *    branches aren't gated to the last message. So we override all three
  *    terminal slots with this same label (never Stream's default delivered
  *    icon / read avatars — Read is out of scope) and re-apply the "latest
- *    message in the thread" gate ourselves: the label only shows beneath the
- *    viewer's sent message while it is still the last message in the channel,
- *    and disappears as soon as a reply arrives after it.
+ *    message in the thread" gate ourselves.
  *
  * 2. We derive "latest message" from **live channel state**, not the message
  *    context's `lastOwnMessage`/`lastReceivedId`. Stream's `Message` is
@@ -36,7 +38,7 @@ import {
  * Rendered inside stream's `.str-chat__message-status` span, which supplies
  * the flex layout; icon and copy are styled via that span in `styles.css`.
  */
-const DeliveredStatus = () => {
+const useIsLatestRealMessage = () => {
   const { message } = useMessageContext('SentMessageDeliveryStatus')
   const { messages } = useChannelStateContext('SentMessageDeliveryStatus')
 
@@ -62,9 +64,11 @@ const DeliveredStatus = () => {
     return undefined
   })()
 
-  if (message.id !== lastMessageId) {
-    return null
-  }
+  return message.id === lastMessageId
+}
+
+const DeliveredStatus = () => {
+  if (!useIsLatestRealMessage()) return null
 
   return (
     <>
@@ -74,8 +78,27 @@ const DeliveredStatus = () => {
   )
 }
 
-/** Suppresses a MessageStatus slot we don't want to render. */
-const NoStatus = () => null
+const SendingStatus = () => {
+  if (!useIsLatestRealMessage()) return null
+
+  return (
+    <>
+      <CircleNotchIcon
+        className="sent-message-status__spinner animate-spin"
+        weight="bold"
+        aria-hidden="true"
+      />
+      <span data-testid="sent-message-sending-status">Sending</span>
+    </>
+  )
+}
+
+const FailedStatus = () => (
+  <span className="str-chat__message-status sent-message-status--failed">
+    <WarningCircleIcon weight="bold" aria-hidden="true" />
+    <span data-testid="sent-message-failed-status">Failed to send</span>
+  </span>
+)
 
 /**
  * Delivery status beneath the viewer's most recent sent message (MES-1036):
@@ -85,16 +108,30 @@ const NoStatus = () => null
  * Built on stream-chat-react's `MessageStatus`, which owns the gating we keep
  * — own message, not an error, not inside a thread — and only surfaces a
  * terminal (sending/sent/delivered/read) state once the message is stored.
- * Scope is "Delivered" only: the sending spinner is suppressed and all
- * terminal states render {@link DeliveredStatus}, which supplies the label
- * and the latest-message-in-thread gate (see there for why the gate is
- * computed from live channel state rather than the context's props).
+ * Sending uses the same latest-message-in-thread gate, while failed messages
+ * bypass `MessageStatus` because it has no failed slot and are shown on every
+ * own, non-thread failed message.
  */
-export const SentMessageDeliveryStatus = () => (
-  <MessageStatus
-    MessageSentStatus={DeliveredStatus}
-    MessageDeliveredStatus={DeliveredStatus}
-    MessageReadStatus={DeliveredStatus}
-    MessageSendingStatus={NoStatus}
-  />
-)
+export const SentMessageDeliveryStatus = () => {
+  const { isMyMessage, message, threadList } = useMessageContext(
+    'SentMessageDeliveryStatus'
+  )
+
+  if (
+    message.status === 'failed' &&
+    isMyMessage() &&
+    message.type !== 'error' &&
+    !threadList
+  ) {
+    return <FailedStatus />
+  }
+
+  return (
+    <MessageStatus
+      MessageSentStatus={DeliveredStatus}
+      MessageDeliveredStatus={DeliveredStatus}
+      MessageReadStatus={DeliveredStatus}
+      MessageSendingStatus={SendingStatus}
+    />
+  )
+}

package/src/styles.css

@@ -583,7 +583,7 @@
   align-items: flex-end;
 }
 
-/* "✓✓ Delivered" delivery status under the last sent message (MES-1036).
+/* Message delivery status under sent messages (MES-1036/MES-1296).
    `SentMessageDeliveryStatus` renders it through stream's `MessageStatus`,
    whose `.str-chat__message-status` span is the grid item here (right-aligned
    via the outer grid's `justify-items: end`). Stream emits that span for every
@@ -595,7 +595,7 @@
   gap: 4px;
   padding-block-start: 4px;
   padding-inline-end: 16px;
-  font-size: 12px;
+  font-size: 10px;
   line-height: 1.4;
   color: var(--str-chat__text-low-emphasis-color, rgba(0, 0, 0, 0.5));
 }
@@ -611,6 +611,9 @@
 .str-chat__li .str-chat__message--me .str-chat__message-status svg path {
   fill: currentColor;
 }
+.str-chat__li .str-chat__message--me .sent-message-status--failed {
+  color: var(--str-chat__message-error-color, #d92d20);
+}
 
 /* Channel list load-more button overrides */
 .str-chat__channel-list .str-chat__load-more-button__button {