@linktr.ee/messaging-react 1.40.2 → 2.0.1-rc-1778656305

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.
@@ -231,15 +241,38 @@ export declare interface ChannelViewProps {
     sendButton?: ComponentType<any>;
 }
 
-export declare interface CreatorCardProps extends LockedAttachmentBaseProps {
+export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
+    /** Placeholder shown in the title slot before the composer types one. */
     placeholderTitle?: string;
+    /** Placeholder shown in the amount slot before one is configured. */
     placeholderAmountText?: string;
-    isUnlocking?: boolean;
+    /**
+     * When provided, renders a dismiss X in the thumbnail corner. Called when
+     * the composer clicks it to remove the attachment.
+     */
     onDismiss?: () => void;
+    /** Fired the first time the composer taps the thumbnail to preview. */
     onPreviewClick?: () => void;
+    /**
+     * Lazily loads the underlying source so the composer can preview the
+     * attachment they're about to send. Called the first time the thumbnail is
+     * tapped; the returned source is cached and reused on subsequent toggles.
+     */
     onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+    /**
+     * When provided, renders a pencil button in the body bottom-right that the
+     * composer can use to edit the attachment metadata (e.g. open the price /
+     * gallery editor). Matches the Composer "Button" instance in Figma.
+     */
+    onEditClick?: () => void;
 }
 
+/**
+ * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
+ * should migrate to `ComposerCardProps`.
+ */
+export declare type CreatorCardProps = SentCardProps;
+
 export declare const CustomMessageProvider: Provider<Partial<CustomMessageRegistry>>;
 
 export declare interface CustomMessageRegistry {
@@ -283,11 +316,19 @@ 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: {
-    Creator: (props: CreatorCardProps) => JSX_2.Element;
-    Visitor: (props: VisitorCardProps) => JSX_2.Element;
+    Composer: (props: ComposerCardProps) => JSX_2.Element;
+    Sent: (props: SentCardProps) => JSX_2.Element;
+    Received: (props: ReceivedCardProps) => JSX_2.Element;
+    Creator: (props: SentCardProps) => JSX_2.Element;
+    Visitor: (props: ReceivedCardProps) => JSX_2.Element;
 };
 
 declare interface LockedAttachmentBaseProps {
@@ -297,6 +338,14 @@ declare interface LockedAttachmentBaseProps {
     detail?: string;
     amountText?: string;
     paymentStatus?: PaymentStatus;
+    /**
+     * When provided with 2+ items, the card renders as a mixed-media carousel
+     * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
+     * item brings its own thumbnail and optional source so that
+     * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
+     * same carousel chrome.
+     */
+    gallery?: LockedAttachmentGalleryItem[];
 }
 
 export declare interface LockedAttachmentContextValue {
@@ -306,6 +355,15 @@ export declare interface LockedAttachmentContextValue {
     onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>;
 }
 
+export declare interface LockedAttachmentGalleryItem {
+    /** MIME type of this carousel item — drives the per-item play / lock affordance. */
+    mimeType: string;
+    /** Poster image used for both the locked (blurred) and unlocked preview state. */
+    thumbnailUrl?: string;
+    /** Underlying source (image or video URL) — shown only when unlocked. */
+    sourceUrl?: string;
+}
+
 export declare interface LockedAttachmentSource {
     /** Proxied URL used by the media player for in-app playback. */
     sourceUrl: string;
@@ -358,6 +416,10 @@ declare interface MessageVoteButtonsProps {
     onVoteDown: () => void;
 }
 
+declare type MessageWithI18n = Pick<LocalMessage, 'text'> & {
+    i18n?: Record<string, string> | null;
+};
+
 /**
  * Messaging capabilities configuration
  */
@@ -462,13 +524,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;
@@ -481,10 +544,48 @@ export declare interface Participant {
  */
 declare type PaymentStatus = 'pending' | 'paid' | 'failed' | 'refunded';
 
+export declare interface ReceivedCardProps extends LockedAttachmentBaseProps {
+    /**
+     * Called when the recipient clicks Unlock on an unpaid attachment.
+     * Use this to open a checkout flow. Omit to hide the Unlock button.
+     */
+    onUnlockClick?: () => void;
+    /**
+     * Called to fetch the attachment source — fired automatically when
+     * `paymentStatus` transitions to `'paid'`, or immediately on click when
+     * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
+     * to unlock the card.
+     */
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+    /**
+     * Called when the recipient clicks Download on an unlocked card.
+     * Omit to hide the Download button.
+     */
+    onDownloadClick?: () => void;
+    /**
+     * When true, shows a loading spinner on the Unlock button.
+     * Driven by the LockedAttachmentContext (e.g. checkout in progress).
+     */
+    isUnlocking?: boolean;
+}
+
 export declare function resolveLinkAttachment(message: LocalMessage): Attachment | undefined;
 
 export declare function resolveMediaFromMessage(message: LocalMessage): MediaMessageResolved | null;
 
+export declare interface SentCardProps extends LockedAttachmentBaseProps {
+    /** Placeholder shown in the title slot when no title is set. */
+    placeholderTitle?: string;
+    /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
+    onPreviewClick?: () => void;
+    /**
+     * Lazily loads the underlying source so the sender can preview the attachment.
+     * Called the first time the thumbnail is tapped; the returned source is cached
+     * and reused on subsequent toggles.
+     */
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+}
+
 export declare function useCustomMessage<K extends keyof CustomMessageRegistry>(key: K): CustomMessageRegistry[K];
 
 /**
@@ -508,30 +609,8 @@ declare interface UseMessageVoteResult {
  */
 export declare const useMessaging: () => MessagingContextValue;
 
-export declare interface VisitorCardProps extends LockedAttachmentBaseProps {
-    /**
-     * Called when the visitor clicks Unlock on an unpaid attachment.
-     * Use this to open a checkout flow. Omit to hide the Unlock button.
-     */
-    onUnlockClick?: () => void;
-    /**
-     * Called to fetch the attachment source — fired automatically when
-     * paymentStatus transitions to 'paid', or immediately on click when
-     * paymentStatus is already 'paid'. Return a LockedAttachmentSource to
-     * unlock the card.
-     */
-    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
-    /**
-     * Called when the visitor clicks Download on an unlocked card.
-     * Omit to hide the Download button.
-     */
-    onDownloadClick?: () => void;
-    /**
-     * When true, shows loading dots on the Unlock button.
-     * Driven by the LockedAttachmentContext (e.g. checkout in progress, payment processing).
-     */
-    isUnlocking?: boolean;
-}
+/** @deprecated Renamed to `ReceivedCardProps`. */
+export declare type VisitorCardProps = ReceivedCardProps;
 
 export declare type VoteSelection = 'up' | 'down' | null;
 

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 { a as e, b as t, C as i, c as n, d as o, e as g, F as m, f as M, L as r, M as l, h as u, i as h, j as L, k as d, l as C, m as c, n as v, o as A, p as k, u as p, q as F, s as f } from "./index-B1h46F9x.js";
 export {
   e as ActionButton,
   t as Avatar,
@@ -7,18 +7,20 @@ export {
   o as ChannelView,
   g as CustomMessageProvider,
   m as FaqList,
-  r as FaqListItem,
-  M as LockedAttachment,
+  M as FaqListItem,
+  r 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.1-rc-1778656305",
   "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.test.tsx

@@ -28,6 +28,17 @@ vi.mock('stream-chat-react', () => ({
   ),
   useMessageContext: () => ({ message: { id: 'message-1', text: 'hello' } }),
   useChannelStateContext: () => ({ channel: activeChannel }),
+  useChatContext: () => ({ client: { user: { id: 'visitor-1' } } }),
+  useTypingContext: () => ({ typing: {} }),
+  useAIState: () => ({ aiState: 'AI_STATE_IDLE' }),
+  AIStates: {
+    Error: 'AI_STATE_ERROR',
+    ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
+    Generating: 'AI_STATE_GENERATING',
+    Idle: 'AI_STATE_IDLE',
+    Stop: 'AI_STATE_STOP',
+    Thinking: 'AI_STATE_THINKING',
+  },
 }))
 
 vi.mock('../providers/MessagingProvider', () => ({

package/src/components/ChannelView.tsx

@@ -28,6 +28,7 @@ import { CustomMessage } from './CustomMessage'
 import { CustomMessageInput } from './CustomMessageInput'
 import { CustomSystemMessage } from './CustomSystemMessage'
 import CustomTypingIndicator from './CustomTypingIndicator'
+import { DmAgentEnabledContext } from './CustomTypingIndicator/DmAgentContext'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
 
@@ -257,6 +258,7 @@ const ChannelViewInner: React.FC<{
     message: NonNullable<MessageUIComponentProps['message']>
   ) => React.ReactNode
   dmAgentEnabled?: boolean
+  viewerLanguage?: string
 }> = ({
   onBack,
   showBackButton,
@@ -275,6 +277,7 @@ const ChannelViewInner: React.FC<{
   customChannelActions,
   renderMessage,
   dmAgentEnabled = false,
+  viewerLanguage,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
@@ -339,7 +342,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 +355,7 @@ const ChannelViewInner: React.FC<{
 
       return renderMessage(messageNode, message)
     },
-    [chatbotVotingEnabled, renderMessage]
+    [chatbotVotingEnabled, renderMessage, viewerLanguage]
   )
 
   return (
@@ -436,6 +443,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     customChannelActions,
     renderMessage,
     sendButton,
+    viewerLanguage,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -488,37 +496,40 @@ export const ChannelView = React.memo<ChannelViewProps>(
           className
         )}
       >
-        <Channel
-          channel={channel}
-          MessageSystem={CustomSystemMessage}
-          EmptyStateIndicator={CustomChannelEmptyState}
-          LoadingIndicator={LoadingState}
-          DateSeparator={CustomDateSeparator}
-          TypingIndicator={CustomTypingIndicator}
-          doSendMessageRequest={doSendMessageRequest}
-          {...(sendButton ? { SendButton: sendButton } : {})}
-        >
-          <ChannelViewInner
-            onBack={onBack}
-            showBackButton={showBackButton}
-            renderMessageInputActions={renderMessageInputActions}
-            renderConversationFooter={renderConversationFooter}
-            onLeaveConversation={onLeaveConversation}
-            onBlockParticipant={onBlockParticipant}
-            CustomChannelEmptyState={CustomChannelEmptyState}
-            showDeleteConversation={showDeleteConversation}
-            onDeleteConversationClick={onDeleteConversationClick}
-            onBlockParticipantClick={onBlockParticipantClick}
-            onReportParticipantClick={onReportParticipantClick}
-            showStarButton={showStarButton}
-            dmAgentEnabled={dmAgentEnabled}
-            chatbotVotingEnabled={chatbotVotingEnabled}
-            renderChannelBanner={renderChannelBanner}
-            customProfileContent={customProfileContent}
-            customChannelActions={customChannelActions}
-            renderMessage={renderMessage}
-          />
-        </Channel>
+        <DmAgentEnabledContext.Provider value={dmAgentEnabled ?? false}>
+          <Channel
+            channel={channel}
+            MessageSystem={CustomSystemMessage}
+            EmptyStateIndicator={CustomChannelEmptyState}
+            LoadingIndicator={LoadingState}
+            DateSeparator={CustomDateSeparator}
+            TypingIndicator={CustomTypingIndicator}
+            doSendMessageRequest={doSendMessageRequest}
+            {...(sendButton ? { SendButton: sendButton } : {})}
+          >
+            <ChannelViewInner
+              onBack={onBack}
+              showBackButton={showBackButton}
+              renderMessageInputActions={renderMessageInputActions}
+              renderConversationFooter={renderConversationFooter}
+              onLeaveConversation={onLeaveConversation}
+              onBlockParticipant={onBlockParticipant}
+              CustomChannelEmptyState={CustomChannelEmptyState}
+              showDeleteConversation={showDeleteConversation}
+              onDeleteConversationClick={onDeleteConversationClick}
+              onBlockParticipantClick={onBlockParticipantClick}
+              onReportParticipantClick={onReportParticipantClick}
+              showStarButton={showStarButton}
+              dmAgentEnabled={dmAgentEnabled}
+              chatbotVotingEnabled={chatbotVotingEnabled}
+              renderChannelBanner={renderChannelBanner}
+              customProfileContent={customProfileContent}
+              customChannelActions={customChannelActions}
+              renderMessage={renderMessage}
+              viewerLanguage={viewerLanguage}
+            />
+          </Channel>
+        </DmAgentEnabledContext.Provider>
       </div>
     )
   }