@linktr.ee/messaging-react 2.6.0 → 2.6.2-rc-1780478292

package/dist/index.cjs

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

package/package.json

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

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

@@ -0,0 +1,191 @@
+import '../../stream-custom-data'
+
+import React, { useEffect } from 'react'
+import {
+  Channel as ChannelType,
+  QueryChannelAPIResponse,
+  StreamChat,
+} from 'stream-chat'
+import {
+  Channel,
+  Chat,
+  MessageList,
+  MessageUIComponentProps,
+  Window,
+} from 'stream-chat-react'
+import { describe, expect, it } from 'vitest'
+
+import { storyUsers } from '../../stories/decorators/storyUser'
+import { renderWithProviders, screen, waitFor } from '../../test/utils'
+
+import { CustomMessage } from './index'
+
+type ReproMessage = {
+  id: string
+  text: string
+  user: (typeof storyUsers)['visitor']
+  attachments?: Array<Record<string, unknown>>
+  i18n?: Record<string, string>
+}
+
+const createMockChannel = async (
+  client: StreamChat,
+  messages: ReproMessage[]
+) => {
+  const mockMessages = messages.map((msg, index) => ({
+    ...msg,
+    type: 'regular' as const,
+    created_at: new Date(Date.now() - 1000 * 60 * (messages.length - index)),
+    updated_at: new Date(Date.now() - 1000 * 60 * (messages.length - index)),
+    html: `<p>${msg.text}</p>`,
+    attachments: msg.attachments ?? [],
+    latest_reactions: [],
+    own_reactions: [],
+    reaction_counts: {},
+    reaction_scores: {},
+    reply_count: 0,
+    status: 'received',
+    cid: 'messaging:mes-789',
+    mentioned_users: [],
+  }))
+
+  const channelData = {
+    members: [storyUsers.creator.id, storyUsers.visitor.id],
+    own_capabilities: ['delete-own-message', 'flag-message'],
+  }
+
+  const channel = client.channel('messaging', 'mes-789', channelData)
+
+  channel.watch = async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    channel.state.messages = mockMessages as unknown as any[]
+    channel.state.members = {
+      [storyUsers.creator.id]: {
+        user: storyUsers.creator,
+        user_id: storyUsers.creator.id,
+      },
+      [storyUsers.visitor.id]: {
+        user: storyUsers.visitor,
+        user_id: storyUsers.visitor.id,
+      },
+    }
+    return {
+      channel: channelData,
+      members: [],
+      messages: mockMessages,
+      watchers: [],
+      pinned_messages: [],
+      duration: '0ms',
+    } as unknown as QueryChannelAPIResponse
+  }
+
+  await channel.watch()
+  return channel
+}
+
+const Harness: React.FC<{
+  message: ReproMessage
+  viewerLanguage?: string
+}> = ({ message, viewerLanguage }) => {
+  const [client] = React.useState(() => {
+    const c = new StreamChat('mock-api-key', { allowServerSideConnect: true })
+    c.userID = storyUsers.creator.id
+    c.user = storyUsers.creator
+    return c
+  })
+  const [channel, setChannel] = React.useState<ChannelType | null>(null)
+
+  useEffect(() => {
+    createMockChannel(client, [message]).then(setChannel)
+  }, [client, message])
+
+  const MessageComponent = React.useMemo(() => {
+    return function CustomMessageComponent(props: MessageUIComponentProps) {
+      return <CustomMessage {...props} viewerLanguage={viewerLanguage} />
+    }
+  }, [viewerLanguage])
+
+  if (!channel) {
+    return <div>loading</div>
+  }
+
+  return (
+    <Chat client={client}>
+      <Channel channel={channel} Message={MessageComponent}>
+        <Window>
+          <MessageList />
+        </Window>
+      </Channel>
+    </Chat>
+  )
+}
+
+const BODY = 'Hey Alex - Im buddies with Hamish @substack'
+const linkAttachment = {
+  type: 'og_scrape',
+  og_scrape_url: 'https://getsewn.com/',
+  image_url: 'https://getsewn.com/og.png',
+  title: 'SEWN',
+  text: 'SEWN — Turn your audience into drops',
+  title_link: 'https://getsewn.com/',
+}
+
+const renderBubble = async () =>
+  waitFor(() => {
+    expect(document.querySelector('.str-chat__message-bubble')).toBeTruthy()
+  })
+
+/**
+ * MES-789: a received message that carries both a body and a link attachment
+ * rendered only the attachment card — the text body disappeared — when the
+ * viewer's language had an empty translation entry (`en_text: ''`).
+ */
+describe('CustomMessage translated text body (MES-789)', () => {
+  it('renders the body for a link-attachment message without translations', async () => {
+    renderWithProviders(
+      <Harness
+        message={{
+          id: 'm1',
+          text: BODY,
+          user: storyUsers.visitor,
+          attachments: [linkAttachment],
+        }}
+      />
+    )
+    await renderBubble()
+    expect(screen.getByText(/Im buddies with Hamish/i)).toBeInTheDocument()
+  })
+
+  it('renders the body when the viewer-language translation is an empty string', async () => {
+    renderWithProviders(
+      <Harness
+        viewerLanguage="en-US"
+        message={{
+          id: 'm2',
+          text: BODY,
+          user: storyUsers.visitor,
+          attachments: [linkAttachment],
+          i18n: { language: 'en', en_text: '' },
+        }}
+      />
+    )
+    await renderBubble()
+    expect(screen.getByText(/Im buddies with Hamish/i)).toBeInTheDocument()
+  })
+
+  it('still shows a real translation when one is present', async () => {
+    renderWithProviders(
+      <Harness
+        viewerLanguage="en-US"
+        message={{
+          id: 'm3',
+          text: 'Bonjour Alex',
+          user: storyUsers.visitor,
+          i18n: { language: 'fr', en_text: 'Hello Alex' },
+        }}
+      />
+    )
+    await renderBubble()
+    expect(screen.getByText('Hello Alex')).toBeInTheDocument()
+  })
+})

package/src/components/CustomMessage/CustomMessageActions.tsx

@@ -8,7 +8,7 @@ import {
 
 const DeleteAction = () => {
   const { handleDelete, message } = useMessageContext('CustomMessageActions')
-  if (message.metadata?.payment_status !== 'paid') return null
+  if (message.metadata?.payment_status === 'paid') return null
   return (
     <DefaultDropdownActionButton
       onClick={handleDelete}

package/src/utils/getMessageDisplayText.test.ts

@@ -34,6 +34,38 @@ describe('getMessageDisplayText', () => {
       })
     ).toBe('Bonjour')
   })
+
+  it('falls back to the original message text when the translation is an empty string', () => {
+    // Regression test for MES-789: an empty `<lang>_text` entry must not
+    // blank the message body. `??` would surface the empty string here.
+    expect(
+      getMessageDisplayText({
+        message: {
+          text: 'Hey Alex',
+          i18n: {
+            language: 'en',
+            en_text: '',
+          },
+        },
+        viewerLanguage: 'en-US',
+      })
+    ).toBe('Hey Alex')
+  })
+
+  it('falls back to the original message text when the translation is whitespace only', () => {
+    expect(
+      getMessageDisplayText({
+        message: {
+          text: 'Hey Alex',
+          i18n: {
+            language: 'en',
+            en_text: '   ',
+          },
+        },
+        viewerLanguage: 'en',
+      })
+    ).toBe('Hey Alex')
+  })
 })
 
 describe('normalizeLanguageCode', () => {

package/src/utils/getMessageDisplayText.ts

@@ -23,5 +23,10 @@ export function getMessageDisplayText({
     return fallbackText
   }
 
-  return message?.i18n?.[`${normalizedLanguage}_text`] ?? fallbackText
+  const translated = message?.i18n?.[`${normalizedLanguage}_text`]
+
+  // Fall back to the original text when the translation entry is missing or
+  // empty/whitespace-only. Using `??` here would surface an empty string and
+  // hide the message body in the UI.
+  return translated && translated.trim() !== '' ? translated : fallbackText
 }