@linktr.ee/messaging-react 1.40.2 → 2.0.0

package/dist/index.d.ts

@@ -101,6 +101,11 @@ export declare interface ChannelListProps {
     sort?: ChannelSort;
     customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
     renderMessagePreview?: (message: LocalMessage | undefined, defaultPreview?: string) => React.ReactNode;
+    /**
+     * Language code used to pick translated message text from Stream Chat i18n.
+     * Falls back to message.text when no matching translation exists.
+     */
+    viewerLanguage?: string;
 }
 
 /**
@@ -112,7 +117,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'sendButton'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'sendButton'>;
 
 /**
  * ChannelView component props
@@ -185,6 +190,11 @@ export declare interface ChannelViewProps {
      * Defaults to false.
      */
     chatbotVotingEnabled?: boolean;
+    /**
+     * Language code used to pick translated message text from Stream Chat i18n.
+     * Falls back to message.text when no matching translation exists.
+     */
+    viewerLanguage?: string;
     /**
      * Custom render function for a banner/card component that renders
      * between the channel header and message list.
@@ -283,6 +293,11 @@ export declare interface FaqListProps {
  */
 export declare const formatRelativeTime: (date: Date) => string;
 
+export declare function getMessageDisplayText({ message, viewerLanguage, }: {
+    message?: MessageWithI18n | null;
+    viewerLanguage?: string;
+}): string | undefined;
+
 export declare function isLinkAttachment(a: Attachment): boolean;
 
 export declare const LockedAttachment: {
@@ -358,6 +373,10 @@ declare interface MessageVoteButtonsProps {
     onVoteDown: () => void;
 }
 
+declare type MessageWithI18n = Pick<LocalMessage, 'text'> & {
+    i18n?: Record<string, string> | null;
+};
+
 /**
  * Messaging capabilities configuration
  */
@@ -462,13 +481,14 @@ export declare interface MessagingShellProps extends ChannelViewPassthroughProps
     renderMessagePreview?: (message: LocalMessage | undefined, defaultPreview?: string) => React.ReactNode;
 }
 
+export declare function normalizeLanguageCode(language?: string): string | undefined;
+
 /**
  * Generic participant interface for different host environments
  */
 export declare interface Participant {
     id: string;
     name: string;
-    email?: string;
     image?: string;
     username?: string;
     phone?: string;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b as e, c as t, C as i, d as n, e as o, f as g, F as m, g as r, L as M, M as l, h, i as u, j as L, k as c, l as d, r as v, m as C, u as A, n as k, o as F } from "./index-B_PLgcDi.js";
+import { b as e, c as t, C as i, d as n, e as o, f as g, F as m, g as r, L as M, M as l, h as u, i as h, j as L, k as d, l as C, m as c, n as v, r as A, o as k, u as p, p as F, q as f } from "./index-Brz9orsI.js";
 export {
   e as ActionButton,
   t as Avatar,
@@ -10,15 +10,17 @@ export {
   r as FaqListItem,
   M as LockedAttachment,
   l as MediaMessage,
-  h as MessageVoteButtons,
-  u as MessagingProvider,
+  u as MessageVoteButtons,
+  h as MessagingProvider,
   L as MessagingShell,
-  c as formatRelativeTime,
-  d as isLinkAttachment,
-  v as resolveLinkAttachment,
-  C as resolveMediaFromMessage,
-  A as useCustomMessage,
-  k as useMessageVote,
-  F as useMessaging
+  d as formatRelativeTime,
+  C as getMessageDisplayText,
+  c as isLinkAttachment,
+  v as normalizeLanguageCode,
+  A as resolveLinkAttachment,
+  k as resolveMediaFromMessage,
+  p as useCustomMessage,
+  F as useMessageVote,
+  f as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.40.2",
+  "version": "2.0.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^1.8.0",
+    "@linktr.ee/messaging-core": "^2.0.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelInfoDialog/ChannelInfoDialog.test.tsx

@@ -65,14 +65,13 @@ const createChannel = () =>
   }) as unknown as Channel
 
 const createParticipant = (
-  overrides: Partial<{ name: string; email: string; username: string }> = {}
+  overrides: Partial<{ name: string; username: string }> = {}
 ) =>
   ({
     user: {
       id: 'linker-1',
       name: overrides.name ?? 'Linker',
       image: undefined,
-      email: overrides.email,
       username: overrides.username,
     },
     role: 'member',
@@ -99,18 +98,7 @@ describe('ChannelInfoDialog', () => {
     expect(nameEl).toBeInTheDocument()
   })
 
-  it('renders participant email as secondary info', () => {
-    renderWithProviders(
-      <ChannelInfoDialog
-        {...defaultProps()}
-        participant={createParticipant({ email: 'linker@example.com' })}
-      />
-    )
-
-    expect(screen.getByText('linker@example.com')).toBeInTheDocument()
-  })
-
-  it('renders participant username as secondary info when no email', () => {
+  it('renders participant username as secondary info', () => {
     renderWithProviders(
       <ChannelInfoDialog
         {...defaultProps()}

package/src/components/ChannelInfoDialog/index.tsx

@@ -12,9 +12,8 @@ import ActionButton from '../ActionButton'
 import { Avatar } from '../Avatar'
 import { CloseButton } from '../CloseButton'
 
-// Custom user type with email and username
+// Custom user type with username
 type CustomUser = {
-  email?: string
   username?: string
 }
 
@@ -180,13 +179,10 @@ export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
   const participantName =
     participant.user?.name || participant.user?.id || 'Unknown member'
   const participantImage = participant.user?.image
-  const participantEmail = (participant.user as CustomUser)?.email
   const participantUsername = (participant.user as CustomUser)?.username
-  const participantSecondary = participantEmail
-    ? participantEmail
-    : participantUsername
-      ? `linktr.ee/${participantUsername}`
-      : undefined
+  const participantSecondary = participantUsername
+    ? `linktr.ee/${participantUsername}`
+    : undefined
   const participantId = participant.user?.id || 'unknown'
 
   return (

package/src/components/ChannelList/ChannelListContext.tsx

@@ -9,6 +9,7 @@ type ChannelListContextValue = {
     message: LocalMessage | undefined,
     defaultPreview?: string
   ) => React.ReactNode
+  viewerLanguage?: string
 }
 
 const ChannelListContext = React.createContext<ChannelListContextValue>({
@@ -16,6 +17,7 @@ const ChannelListContext = React.createContext<ChannelListContextValue>({
   onChannelSelect: () => {},
   debug: false,
   renderMessagePreview: undefined,
+  viewerLanguage: undefined,
 })
 
 export const ChannelListProvider = ChannelListContext.Provider

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -4,6 +4,7 @@ import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import { useChannelStar } from '../../hooks/useChannelStar'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
+import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import { isChatbotMessage } from '../CustomMessage/MessageTag'
 
@@ -14,8 +15,13 @@ import { useChannelListContext } from './ChannelListContext'
  */
 const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
   ({ channel, unread }) => {
-    const { selectedChannel, onChannelSelect, debug, renderMessagePreview } =
-      useChannelListContext()
+    const {
+      selectedChannel,
+      onChannelSelect,
+      debug,
+      renderMessagePreview,
+      viewerLanguage,
+    } = useChannelListContext()
 
     const isSelected = selectedChannel?.id === channel?.id
 
@@ -53,7 +59,12 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
     })()
 
     const getLastMessageText = () => {
-      if (lastMessage?.text) return lastMessage.text
+      const displayText = getMessageDisplayText({
+        message: lastMessage,
+        viewerLanguage,
+      })
+      if (displayText) return displayText
+
       const isTip = lastMessage?.metadata?.custom_type === 'MESSAGE_TIP'
       if (isTip) return '💵 Sent a tip'
 

package/src/components/ChannelList/index.tsx

@@ -28,6 +28,7 @@ export const ChannelList = React.memo<ChannelListProps>(
     className,
     customEmptyStateIndicator,
     renderMessagePreview,
+    viewerLanguage,
   }) => {
     // Track renders
     const renderCountRef = React.useRef(0)
@@ -64,8 +65,15 @@ export const ChannelList = React.memo<ChannelListProps>(
         onChannelSelect,
         debug,
         renderMessagePreview,
+        viewerLanguage,
       }),
-      [selectedChannel, onChannelSelect, debug, renderMessagePreview]
+      [
+        selectedChannel,
+        onChannelSelect,
+        debug,
+        renderMessagePreview,
+        viewerLanguage,
+      ]
     )
 
     return (

package/src/components/ChannelView.tsx

@@ -257,6 +257,7 @@ const ChannelViewInner: React.FC<{
     message: NonNullable<MessageUIComponentProps['message']>
   ) => React.ReactNode
   dmAgentEnabled?: boolean
+  viewerLanguage?: string
 }> = ({
   onBack,
   showBackButton,
@@ -275,6 +276,7 @@ const ChannelViewInner: React.FC<{
   customChannelActions,
   renderMessage,
   dmAgentEnabled = false,
+  viewerLanguage,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
@@ -339,7 +341,11 @@ const ChannelViewInner: React.FC<{
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const { message } = useMessageContext('ChannelView')
       const messageNode = (
-        <CustomMessage {...props} chatbotVotingEnabled={chatbotVotingEnabled} />
+        <CustomMessage
+          {...props}
+          chatbotVotingEnabled={chatbotVotingEnabled}
+          viewerLanguage={viewerLanguage}
+        />
       )
 
       if (!renderMessage || !message) {
@@ -348,7 +354,7 @@ const ChannelViewInner: React.FC<{
 
       return renderMessage(messageNode, message)
     },
-    [chatbotVotingEnabled, renderMessage]
+    [chatbotVotingEnabled, renderMessage, viewerLanguage]
   )
 
   return (
@@ -436,6 +442,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     customChannelActions,
     renderMessage,
     sendButton,
+    viewerLanguage,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -517,6 +524,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
             customProfileContent={customProfileContent}
             customChannelActions={customChannelActions}
             renderMessage={renderMessage}
+            viewerLanguage={viewerLanguage}
           />
         </Channel>
       </div>

package/src/components/CustomMessage/index.tsx

@@ -30,6 +30,7 @@ import {
 } from 'stream-chat-react'
 
 import { useMessageVote } from '../../hooks/useMessageVote'
+import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
@@ -45,10 +46,12 @@ import { MessageVoteButtons } from './MessageVoteButtons'
 
 type CustomMessageUIComponentProps = MessageUIComponentProps & {
   chatbotVotingEnabled?: boolean
+  viewerLanguage?: string
 }
 
 type CustomMessageWithContextProps = MessageContextValue & {
   chatbotVotingEnabled?: boolean
+  viewerLanguage?: string
 }
 
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
@@ -68,11 +71,13 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     message,
     renderText,
     threadList,
+    viewerLanguage,
   } = props
 
   const { client } = useChatContext('CustomMessage')
   const { channel } = useChannelStateContext('CustomMessage')
-  const { isUnlocking, onUnlockClick, onFetchSource, onDownloadClick } = useCustomMessage('LockedAttachment')
+  const { isUnlocking, onUnlockClick, onFetchSource, onDownloadClick } =
+    useCustomMessage('LockedAttachment')
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false)
   const reminder = useMessageReminder(message.id)
   const { selected: voteState, voteUp, voteDown } = useMessageVote(message)
@@ -107,6 +112,12 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     const filtered = raw.filter((a) => !('type' in a) || !isLinkAttachment(a))
     return filtered.length === raw.length ? raw : filtered
   }, [message])
+  const displayMessage = useMemo(() => {
+    const displayText = getMessageDisplayText({ message, viewerLanguage })
+    return displayText === message.text
+      ? message
+      : { ...message, text: displayText }
+  }, [message, viewerLanguage])
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -247,7 +258,10 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               )}
               {message.text && (
                 <div className="str-chat__message-bubble">
-                  <MessageText message={message} renderText={renderText} />
+                  <MessageText
+                    message={displayMessage}
+                    renderText={renderText}
+                  />
                 </div>
               )}
             </div>
@@ -273,11 +287,14 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 ) : null}
                 {isAIGenerated ? (
                   <StreamedMessageText
-                    message={message}
+                    message={displayMessage}
                     renderText={renderText}
                   />
                 ) : (
-                  <MessageText message={message} renderText={renderText} />
+                  <MessageText
+                    message={displayMessage}
+                    renderText={renderText}
+                  />
                 )}
                 <MessageErrorIcon />
               </div>
@@ -317,6 +334,7 @@ const MemoizedCustomMessage = React.memo(
   CustomMessageWithContext,
   (prev, next) => {
     if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
+    if (prev.viewerLanguage !== next.viewerLanguage) return false
     return areMessageUIPropsEqual(prev, next)
   }
 ) as typeof CustomMessageWithContext

package/src/components/MessagingShell/index.tsx

@@ -35,6 +35,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onMessageSent,
   showStarButton = false,
   chatbotVotingEnabled = false,
+  viewerLanguage,
   renderMessagePreview,
   renderChannelBanner,
   customProfileContent,
@@ -60,9 +61,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     string | null
   >(null)
 
-  const {
-    showDeleteConversation = true,
-  } = capabilities
+  const { showDeleteConversation = true } = capabilities
 
   // Create default filters and merge with provided filters
   const channelFilters = React.useMemo(() => {
@@ -194,7 +193,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
               const channel = await service.startChannelWithParticipant({
                 id: initialParticipantData.id,
                 name: initialParticipantData.name,
-                email: initialParticipantData.email,
                 phone: initialParticipantData.phone,
               })
 
@@ -375,6 +373,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
             channelRenderFilterFn={channelRenderFilterFn}
             customEmptyStateIndicator={channelListCustomEmptyStateIndicator}
             renderMessagePreview={renderMessagePreview}
+            viewerLanguage={viewerLanguage}
           />
         </div>
 
@@ -418,6 +417,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 onMessageSent={onMessageSent}
                 showStarButton={showStarButton}
                 chatbotVotingEnabled={chatbotVotingEnabled}
+                viewerLanguage={viewerLanguage}
                 customProfileContent={customProfileContent}
                 customChannelActions={customChannelActions}
                 renderMessage={renderMessage}

package/src/index.ts

@@ -18,7 +18,10 @@ export {
   resolveLinkAttachment,
   resolveMediaFromMessage,
 } from './components/MediaMessage'
-export type { MediaMessageProps, MediaMessageResolved } from './components/MediaMessage'
+export type {
+  MediaMessageProps,
+  MediaMessageResolved,
+} from './components/MediaMessage'
 
 // Providers
 export { MessagingProvider } from './providers/MessagingProvider'
@@ -31,6 +34,10 @@ export { useCustomMessage } from './components/CustomMessage/context'
 
 // Utils
 export { formatRelativeTime } from './utils/formatRelativeTime'
+export {
+  getMessageDisplayText,
+  normalizeLanguageCode,
+} from './utils/getMessageDisplayText'
 
 // Types
 export type {
@@ -45,7 +52,11 @@ export type {
 export type { MessageMetadata } from './stream-custom-data'
 export type { AvatarProps } from './components/Avatar'
 export type { ActionButtonProps } from './components/ActionButton'
-export type { CreatorCardProps, VisitorCardProps, LockedAttachmentContextValue } from './components/LockedAttachment'
+export type {
+  CreatorCardProps,
+  VisitorCardProps,
+  LockedAttachmentContextValue,
+} from './components/LockedAttachment'
 export type { CustomMessageRegistry } from './components/CustomMessage/context'
 export type { AttachmentSourceType } from './components/AttachmentCard/utils/mimeType'
 export type { Faq, FaqListProps } from './components/FaqList'

package/src/stories/mocks.tsx

@@ -110,31 +110,26 @@ export const mockParticipants = [
   {
     id: 'participant-1',
     name: 'Alice Johnson',
-    email: 'alice@example.com',
     image: 'https://i.pravatar.cc/150?img=2',
   },
   {
     id: 'participant-2',
     name: 'Bob Smith',
-    email: 'bob@example.com',
     image: 'https://i.pravatar.cc/150?img=3',
   },
   {
     id: 'participant-3',
     name: 'Carol Williams',
-    email: 'carol@example.com',
     image: 'https://i.pravatar.cc/150?img=4',
   },
   {
     id: 'participant-4',
     name: 'David Brown',
-    email: 'david@example.com',
     image: 'https://i.pravatar.cc/150?img=5',
   },
   {
     id: 'participant-5',
     name: 'Emma Davis',
-    email: 'emma@example.com',
     image: 'https://i.pravatar.cc/150?img=6',
   },
 ]
@@ -143,10 +138,8 @@ export const mockParticipants = [
 export const mockParticipantSource = {
   loadParticipants: async (options?: { search?: string; limit?: number }) => {
     const searchTerm = options?.search || ''
-    const filtered = mockParticipants.filter(
-      (p) =>
-        p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        p.email.toLowerCase().includes(searchTerm.toLowerCase())
+    const filtered = mockParticipants.filter((p) =>
+      p.name.toLowerCase().includes(searchTerm.toLowerCase())
     )
     return {
       participants: filtered,

package/src/types.ts

@@ -25,7 +25,6 @@ export type { LockedAttachmentSource } from './components/LockedAttachment'
 export interface Participant {
   id: string
   name: string
-  email?: string
   image?: string
   username?: string
   phone?: string
@@ -95,6 +94,11 @@ export interface ChannelListProps {
     message: LocalMessage | undefined,
     defaultPreview?: string
   ) => React.ReactNode
+  /**
+   * Language code used to pick translated message text from Stream Chat i18n.
+   * Falls back to message.text when no matching translation exists.
+   */
+  viewerLanguage?: string
 }
 
 /**
@@ -173,6 +177,11 @@ export interface ChannelViewProps {
    * Defaults to false.
    */
   chatbotVotingEnabled?: boolean
+  /**
+   * Language code used to pick translated message text from Stream Chat i18n.
+   * Falls back to message.text when no matching translation exists.
+   */
+  viewerLanguage?: string
 
   /**
    * Custom render function for a banner/card component that renders
@@ -244,6 +253,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'onMessageSent'
   | 'showStarButton'
   | 'chatbotVotingEnabled'
+  | 'viewerLanguage'
   | 'renderChannelBanner'
   | 'customProfileContent'
   | 'customChannelActions'

package/src/utils/getMessageDisplayText.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  getMessageDisplayText,
+  normalizeLanguageCode,
+} from './getMessageDisplayText'
+
+describe('getMessageDisplayText', () => {
+  it('returns translated text for the viewer language', () => {
+    expect(
+      getMessageDisplayText({
+        message: {
+          text: 'Bonjour',
+          i18n: {
+            language: 'fr',
+            en_text: 'Hello',
+          },
+        },
+        viewerLanguage: 'en-US',
+      })
+    ).toBe('Hello')
+  })
+
+  it('falls back to the original message text when no translation exists', () => {
+    expect(
+      getMessageDisplayText({
+        message: {
+          text: 'Bonjour',
+          i18n: {
+            language: 'fr',
+          },
+        },
+        viewerLanguage: 'es',
+      })
+    ).toBe('Bonjour')
+  })
+})
+
+describe('normalizeLanguageCode', () => {
+  it('normalizes locale-style language codes to their primary subtag', () => {
+    expect(normalizeLanguageCode('fr-FR')).toBe('fr')
+    expect(normalizeLanguageCode('en_US')).toBe('en')
+  })
+})

package/src/utils/getMessageDisplayText.ts

@@ -0,0 +1,27 @@
+import type { LocalMessage } from 'stream-chat'
+
+type MessageWithI18n = Pick<LocalMessage, 'text'> & {
+  i18n?: Record<string, string> | null
+}
+
+export function normalizeLanguageCode(language?: string): string | undefined {
+  const normalized = language?.trim().toLowerCase().split(/[-_]/)[0]
+  return normalized || undefined
+}
+
+export function getMessageDisplayText({
+  message,
+  viewerLanguage,
+}: {
+  message?: MessageWithI18n | null
+  viewerLanguage?: string
+}): string | undefined {
+  const fallbackText = message?.text
+  const normalizedLanguage = normalizeLanguageCode(viewerLanguage)
+
+  if (!normalizedLanguage) {
+    return fallbackText
+  }
+
+  return message?.i18n?.[`${normalizedLanguage}_text`] ?? fallbackText
+}