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

package/src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx

@@ -0,0 +1,178 @@
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useState } from 'react'
+
+import { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'
+import type {
+  LockedAttachmentGalleryItem,
+  PaymentStatus,
+} from '../../types'
+
+import type { LockedCardVariant } from './LockedCardShell'
+
+export interface GalleryThumbnailProps {
+  variant: LockedCardVariant
+  gallery: LockedAttachmentGalleryItem[]
+  title?: string
+  /** When true, all items are shown blurred + the locked/play badge is overlaid. */
+  showLocked: boolean
+  paymentStatus?: PaymentStatus
+  /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */
+  topRight?: React.ReactNode
+}
+
+function isPlayableItem(item: LockedAttachmentGalleryItem): boolean {
+  const sourceType = getSourceType(item.mimeType)
+  return sourceType === 'video' || sourceType === 'audio'
+}
+
+/**
+ * Mixed-media carousel used by every LockedAttachment card when its `gallery`
+ * prop has 2+ items. Matches the "Gallery" frames in the Figma design system:
+ * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center
+ * lock / play indicator that swaps based on the current item.
+ */
+const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
+  variant,
+  gallery,
+  title,
+  showLocked,
+  paymentStatus,
+  topRight,
+}) => {
+  const [index, setIndex] = useState(0)
+  const total = gallery.length
+  const safeIndex = Math.min(index, total - 1)
+  const current = gallery[safeIndex]
+  const isVideoItem = isPlayableItem(current)
+
+  // Center badge: PLAY for video items, LOCK for non-video locked items.
+  // Unlocked image items show no center badge — the image is the content.
+  const centerBadge = (() => {
+    if (isVideoItem) {
+      return <PlayIcon className="size-6" weight="fill" />
+    }
+    if (showLocked) {
+      return paymentStatus === 'paid' ? (
+        <LockOpenIcon className="size-6" weight="fill" />
+      ) : (
+        <LockSimpleIcon className="size-6" weight="fill" />
+      )
+    }
+    return null
+  })()
+
+  // Stop propagation so arrow taps don't bubble up to the outer preview-toggle
+  // wrapper on ComposerCard / SentCard.
+  const goPrev = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIndex((i) => Math.max(0, i - 1))
+  }
+  const goNext = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIndex((i) => Math.min(total - 1, i + 1))
+  }
+  const atStart = safeIndex === 0
+  const atEnd = safeIndex === total - 1
+
+  const isDark = variant === 'dark'
+
+  // Locked + unlocked render entirely separate trees so the locked state
+  // doesn't end up stacking a blurred `<img>` on top of an underlying
+  // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise
+  // shows through as a visible horizontal seam at the 16:9 boundary
+  // inside the taller 337/386 gallery aspect).
+  //
+  // The locked branch uses `filter: blur` on a single full-size `<img>`
+  // — not `backdrop-filter` — so the rounded corners are clipped
+  // normally without any clip-path workarounds (see LockedThumbnail).
+  return (
+    <div className="relative aspect-[337/386] overflow-hidden rounded-t-2xl">
+      {showLocked ? (
+        <div
+          className={classNames(
+            'absolute inset-0',
+            isDark ? 'bg-white/10' : 'bg-black/5'
+          )}
+        >
+          {current.thumbnailUrl && (
+            <img
+              src={current.thumbnailUrl}
+              alt=""
+              aria-hidden
+              draggable={false}
+              // `scale-110` hides the fuzzy edge that `filter: blur` leaves
+              // around the image bounds.
+              className="absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            />
+          )}
+        </div>
+      ) : (
+        <AttachmentThumbnail
+          mimeType={current.mimeType}
+          sourceUrl={current.sourceUrl}
+          thumbnailUrl={current.thumbnailUrl}
+          title={title}
+          variant={variant}
+        />
+      )}
+
+      {centerBadge && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+            {centerBadge}
+          </div>
+        </div>
+      )}
+
+      {total > 1 && (
+        <React.Fragment>
+          <button
+            type="button"
+            onClick={goPrev}
+            disabled={atStart}
+            aria-label="Previous item"
+            className={classNames(
+              'absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',
+              atStart ? 'opacity-40' : 'hover:bg-black/40'
+            )}
+          >
+            <CaretLeftIcon className="size-5" weight="bold" />
+          </button>
+          <button
+            type="button"
+            onClick={goNext}
+            disabled={atEnd}
+            aria-label="Next item"
+            className={classNames(
+              'absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',
+              atEnd ? 'opacity-40' : 'hover:bg-black/40'
+            )}
+          >
+            <CaretRightIcon className="size-5" weight="bold" />
+          </button>
+
+          <div className="pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1">
+            <span className="text-xs font-medium leading-4 text-white">
+              {safeIndex + 1}/{total}
+            </span>
+          </div>
+        </React.Fragment>
+      )}
+
+      {topRight && (
+        <div className="pointer-events-auto absolute right-3 top-3 z-10">
+          {topRight}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default GalleryThumbnail

package/src/components/LockedAttachment/components/_shared/LockBadge.tsx

@@ -0,0 +1,39 @@
+import {
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
+import React from 'react'
+
+import { getSourceType } from '../../../AttachmentCard'
+import type { PaymentStatus } from '../../types'
+
+/**
+ * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.
+ * Uses `bg-black/25` from the design system's `alpha-black-25` token.
+ *
+ * For playable media (video/audio), the badge shows a play icon instead of a
+ * lock — matching the convention used by `GalleryThumbnail`.
+ */
+export const LockBadge: React.FC<{
+  paymentStatus?: PaymentStatus
+  mimeType?: string
+}> = ({ paymentStatus, mimeType }) => {
+  const sourceType = mimeType ? getSourceType(mimeType) : undefined
+  const isPlayable = sourceType === 'video' || sourceType === 'audio'
+
+  const Icon = isPlayable
+    ? PlayIcon
+    : paymentStatus === 'paid'
+      ? LockOpenIcon
+      : LockSimpleIcon
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+        <Icon className="size-6" weight="fill" />
+      </div>
+    </div>
+  )
+}
+
+export default LockBadge

package/src/components/LockedAttachment/components/_shared/LockedCardShell.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames'
+import React from 'react'
+
+export type LockedCardVariant = 'dark' | 'light'
+
+export interface LockedCardShellProps {
+  variant: LockedCardVariant
+  children: React.ReactNode
+  rootRef?: React.Ref<HTMLDivElement>
+  'data-testid'?: string
+}
+
+/**
+ * Outer chrome for every LockedAttachment card.
+ * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.
+ */
+const LockedCardShell: React.FC<LockedCardShellProps> = ({
+  variant,
+  children,
+  rootRef,
+  'data-testid': dataTestId,
+}) => (
+  <div
+    ref={rootRef}
+    data-testid={dataTestId}
+    className={classNames(
+      'relative w-[280px] select-none overflow-hidden rounded-2xl',
+      'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',
+      variant === 'dark' ? 'bg-[#121110]' : 'bg-white'
+    )}
+  >
+    {children}
+  </div>
+)
+
+export default LockedCardShell

package/src/components/LockedAttachment/components/_shared/LockedThumbnail.tsx

@@ -0,0 +1,128 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import {
+  AttachmentThumbnail,
+  renderTypeIcon,
+} from '../../../AttachmentCard'
+import type { LockedAttachmentSource, PaymentStatus } from '../../types'
+
+import { LockBadge } from './LockBadge'
+import type { LockedCardVariant } from './LockedCardShell'
+
+export interface LockedThumbnailProps {
+  variant: LockedCardVariant
+  mimeType: string
+  thumbnailUrl?: string
+  title?: string
+  /**
+   * When provided, the underlying source is shown unblurred (preview / unlocked state).
+   * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.
+   */
+  source?: LockedAttachmentSource
+  /**
+   * Forces the locked appearance even when a source is provided. Used for the
+   * Composer card where the locked treatment is the default and the user toggles
+   * a preview in place.
+   */
+  showLocked: boolean
+  paymentStatus?: PaymentStatus
+  /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */
+  topRight?: React.ReactNode
+  /** When true, renders the unlocked image with aspect-video + object-contain. */
+  containedImage?: boolean
+}
+
+/**
+ * Renders the 180px-tall media area for a LockedAttachment card.
+ * Handles three visual states:
+ *   - locked:       blurred thumbnail + centered 48px lock badge
+ *   - preview/paid: clear thumbnail (the underlying source)
+ *   - empty:        type-icon placeholder
+ */
+const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
+  variant,
+  mimeType,
+  thumbnailUrl,
+  title,
+  source,
+  showLocked,
+  paymentStatus,
+  topRight,
+  containedImage = false,
+}) => {
+  const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl
+  const effectiveThumbnailUrl = showLocked
+    ? thumbnailUrl
+    : (source?.thumbnailUrl ?? thumbnailUrl)
+
+  const isDark = variant === 'dark'
+
+  // Locked + unlocked render entirely separate trees so the locked state
+  // doesn't end up stacking a blurred `<img>` on top of an underlying
+  // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise
+  // shows through as a visible horizontal seam at the 16:9 boundary).
+  //
+  // The locked branch uses `filter: blur` on a single full-size `<img>`
+  // — not `backdrop-filter` — because `backdrop-filter` paints in its
+  // own compositing layer that escapes ancestor `overflow: hidden` on
+  // Chrome/Safari and flattens the card's top corners. `filter` is
+  // clipped normally, so the rounded corners stay round without any
+  // clip-path workarounds.
+  return (
+    <div className="relative overflow-hidden rounded-t-2xl">
+      {showLocked ? (
+        <div
+          className={classNames(
+            'relative aspect-video overflow-hidden',
+            isDark ? 'bg-white/10' : 'bg-black/5'
+          )}
+        >
+          {effectiveThumbnailUrl ? (
+            <img
+              src={effectiveThumbnailUrl}
+              alt=""
+              aria-hidden
+              draggable={false}
+              // `scale-110` hides the fuzzy semi-transparent edge that
+              // `filter: blur` leaves around the image bounds.
+              className="absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center">
+              {renderTypeIcon(mimeType, {
+                className: isDark
+                  ? 'size-12 text-white/20'
+                  : 'size-12 text-black/20',
+                weight: 'regular',
+              })}
+            </div>
+          )}
+          <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />
+        </div>
+      ) : (
+        <AttachmentThumbnail
+          mimeType={mimeType}
+          sourceUrl={effectiveSourceUrl}
+          thumbnailUrl={effectiveThumbnailUrl}
+          title={title}
+          variant={variant}
+          containedImage={containedImage}
+          mediaPlayerProps={
+            effectiveSourceUrl
+              ? { autoPlay: true, loop: true, controls: true, muted: false }
+              : undefined
+          }
+        />
+      )}
+
+      {topRight && (
+        <div className="pointer-events-auto absolute right-3 top-3 z-10">
+          {topRight}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LockedThumbnail

package/src/components/LockedAttachment/index.tsx

@@ -1,32 +1,63 @@
 import React, { Suspense } from 'react'
 
-import type { CreatorCardProps } from './components/Creator/Card'
-import type { VisitorCardProps } from './components/Visitor/Card'
+import type { ComposerCardProps } from './components/Composer/Card'
+import type { ReceivedCardProps } from './components/Received/Card'
+import type { SentCardProps } from './components/Sent/Card'
 
-const CreatorCardLazy = React.lazy(() => import('./components/Creator/Card'))
-const VisitorCardLazy = React.lazy(() => import('./components/Visitor/Card'))
+const ComposerCardLazy = React.lazy(() => import('./components/Composer/Card'))
+const SentCardLazy = React.lazy(() => import('./components/Sent/Card'))
+const ReceivedCardLazy = React.lazy(() => import('./components/Received/Card'))
 
 const LockedAttachmentFallback = () => (
   <div
-    className="w-[280px] min-h-[200px] animate-pulse rounded-[24px] bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]"
+    className="w-[280px] min-h-[200px] animate-pulse rounded-2xl bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
     aria-hidden
   />
 )
 
-const Creator = (props: CreatorCardProps) => (
+const Composer = (props: ComposerCardProps) => (
   <Suspense fallback={<LockedAttachmentFallback />}>
-    <CreatorCardLazy {...props} />
+    <ComposerCardLazy {...props} />
   </Suspense>
 )
 
-const Visitor = (props: VisitorCardProps) => (
+const Sent = (props: SentCardProps) => (
   <Suspense fallback={<LockedAttachmentFallback />}>
-    <VisitorCardLazy {...props} />
+    <SentCardLazy {...props} />
   </Suspense>
 )
 
-const LockedAttachment = { Creator, Visitor }
+const Received = (props: ReceivedCardProps) => (
+  <Suspense fallback={<LockedAttachmentFallback />}>
+    <ReceivedCardLazy {...props} />
+  </Suspense>
+)
+
+/**
+ * @deprecated Renamed to `LockedAttachment.Sent` (post-send sender card) or
+ * `LockedAttachment.Composer` (drafting state). This alias maps to `Sent`
+ * because that matches the previous in-thread usage; pre-send / drafting
+ * usages (e.g. with `onDismiss`) should migrate to `LockedAttachment.Composer`.
+ */
+const Creator = Sent
+
+/** @deprecated Renamed to `LockedAttachment.Received`. */
+const Visitor = Received
+
+const LockedAttachment = { Composer, Sent, Received, Creator, Visitor }
 
 export default LockedAttachment
-export type { CreatorCardProps, VisitorCardProps }
-export type { PaymentStatus, LockedAttachmentSource, LockedAttachmentContextValue } from './types'
+export type { ComposerCardProps, SentCardProps, ReceivedCardProps }
+/**
+ * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
+ * should migrate to `ComposerCardProps`.
+ */
+export type CreatorCardProps = SentCardProps
+/** @deprecated Renamed to `ReceivedCardProps`. */
+export type VisitorCardProps = ReceivedCardProps
+export type {
+  PaymentStatus,
+  LockedAttachmentSource,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+} from './types'

package/src/components/LockedAttachment/types.ts

@@ -9,6 +9,23 @@ export 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 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 interface LockedAttachmentSource {

package/src/components/MediaMessage/index.tsx

@@ -216,7 +216,7 @@ export function resolveMediaFromMessage(
   }
 }
 
-/** Dark card (sent / own message) — matches LockedAttachment.Creator preview without toggle. */
+/** Dark card (sent / own message) — matches LockedAttachment.Sent preview without toggle. */
 const Creator: React.FC<MediaMessageResolved> = ({
   resolvedUrl,
   resolvedType,
@@ -246,7 +246,7 @@ const Creator: React.FC<MediaMessageResolved> = ({
   )
 }
 
-/** Light card (received) — matches LockedAttachment.Visitor unlocked without Purchased copy. */
+/** Light card (received) — matches LockedAttachment.Received unlocked without Purchased copy. */
 const Visitor: React.FC<MediaMessageResolved> = ({
   resolvedUrl,
   resolvedType,

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,16 @@ 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 {
+  ComposerCardProps,
+  SentCardProps,
+  ReceivedCardProps,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+  // Deprecated aliases preserved for backwards compatibility:
+  CreatorCardProps,
+  VisitorCardProps,
+} 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/styles.css

@@ -1,6 +1,13 @@
 /* Stream Chat base styles */
 @import 'stream-chat-react/dist/css/v2/index.css';
 
+/* 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;
+}
+
 /* Dialog component styles - used by messaging components */
 /* Note: Dialogs get moved to the top layer when opened with .showModal() */
 .mes-dialog {

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'