@linktr.ee/messaging-react 1.32.1 → 1.33.0-rc-1777272812

package/src/components/MediaMessage/MediaMessage.test.tsx

@@ -0,0 +1,261 @@
+import React from 'react'
+import type { LocalMessage } from 'stream-chat'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import { MediaMessage } from '.'
+
+vi.mock('../Avatar', () => ({
+  Avatar: ({ id }: { id: string }) => (
+    <div data-testid="avatar" data-user-id={id} />
+  ),
+}))
+
+vi.mock('../LockedAttachment/components/MediaPlayer', () => ({
+  default: ({
+    source,
+    mimeType,
+  }: {
+    source: string
+    mimeType: string
+  }) => (
+    <div
+      data-testid="media-player"
+      data-source={source}
+      data-mime-type={mimeType}
+    />
+  ),
+}))
+
+vi.mock('../LockedAttachment/utils/icons', () => ({
+  renderTypeIcon: () => <span data-testid="type-icon" />,
+}))
+
+vi.mock('../LockedAttachment/utils/mimeType', () => ({
+  getSourceType: (mimeType: string) => {
+    if (mimeType.startsWith('video/')) return 'video'
+    if (mimeType.startsWith('image/')) return 'image'
+    if (mimeType.startsWith('audio/')) return 'audio'
+    return 'document'
+  },
+}))
+
+// Cast through unknown to avoid satisfying every optional field of LocalMessage
+const msg = (overrides: Record<string, unknown> = {}): LocalMessage =>
+  ({
+    id: 'msg-1',
+    text: '',
+    type: 'regular',
+    created_at: new Date(),
+    updated_at: new Date(),
+    deleted_at: null,
+    pinned_at: null,
+    status: 'received',
+    user: { id: 'user-1', name: 'Alice' },
+    attachments: [],
+    ...overrides,
+  }) as unknown as LocalMessage
+
+describe('MediaMessage', () => {
+  it('renders nothing when no media URL is resolvable', () => {
+    const { container } = renderWithProviders(<MediaMessage message={msg()} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders MediaPlayer for a video attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'video',
+              asset_url: 'https://cdn.example.com/clip.mp4',
+              mime_type: 'video/mp4',
+            },
+          ],
+        })}
+      />
+    )
+
+    const player = screen.getByTestId('media-player')
+    expect(player).toBeInTheDocument()
+    expect(player).toHaveAttribute(
+      'data-source',
+      'https://cdn.example.com/clip.mp4'
+    )
+    expect(player).toHaveAttribute('data-mime-type', 'video/mp4')
+  })
+
+  it('renders MediaPlayer for an audio attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'audio',
+              asset_url: 'https://cdn.example.com/track.mp3',
+              mime_type: 'audio/mpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.getByTestId('media-player')).toHaveAttribute(
+      'data-source',
+      'https://cdn.example.com/track.mp3'
+    )
+  })
+
+  it('renders an img for an image attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+              title: 'My Photo',
+            },
+          ],
+        })}
+      />
+    )
+
+    const image = screen.getByRole('img', { name: 'My Photo' })
+    expect(image).toHaveAttribute('src', 'https://cdn.example.com/photo.jpg')
+  })
+
+  it('renders a download link for a document attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'file',
+              asset_url: 'https://cdn.example.com/report.pdf',
+              mime_type: 'application/pdf',
+              title: 'Annual Report',
+            },
+          ],
+        })}
+      />
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveAttribute('href', 'https://cdn.example.com/report.pdf')
+    expect(screen.getByText('Annual Report')).toBeInTheDocument()
+    expect(screen.getByTestId('type-icon')).toBeInTheDocument()
+  })
+
+  it('shows title and file size below video', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'video',
+              asset_url: 'https://cdn.example.com/clip.mp4',
+              mime_type: 'video/mp4',
+              title: 'Clip',
+              file_size: 2048,
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.getByText('Clip')).toBeInTheDocument()
+    expect(screen.getByText('2.0 KB')).toBeInTheDocument()
+  })
+
+  it('renders Avatar for a message from another user', () => {
+    renderWithProviders(
+      <MediaMessage
+        isMyMessage={false}
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.getByTestId('avatar')).toBeInTheDocument()
+    expect(screen.getByTestId('avatar')).toHaveAttribute(
+      'data-user-id',
+      'user-1'
+    )
+  })
+
+  it('does not render Avatar for own messages', () => {
+    renderWithProviders(
+      <MediaMessage
+        isMyMessage={true}
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.queryByTestId('avatar')).not.toBeInTheDocument()
+  })
+
+  it('applies the --me class for own messages', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage
+        isMyMessage={true}
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(container.firstChild).toHaveClass('str-chat__message--me')
+  })
+
+  it('applies the --other class for messages from other users', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage
+        isMyMessage={false}
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(container.firstChild).toHaveClass('str-chat__message--other')
+  })
+
+  it('renders nothing when no attachments', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage message={msg({ attachments: [] })} />
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+})

package/src/components/MediaMessage/index.tsx

@@ -0,0 +1,165 @@
+import React from 'react'
+import type { LocalMessage } from 'stream-chat'
+
+import { Avatar } from '../Avatar'
+import MediaPlayer from '../LockedAttachment/components/MediaPlayer'
+import { renderTypeIcon } from '../LockedAttachment/utils/icons'
+import { getSourceType } from '../LockedAttachment/utils/mimeType'
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+const CARD_CLASS =
+  'w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]'
+
+const MediaMeta: React.FC<{ mimeType: string; title?: string; fileSize?: number }> = ({
+  mimeType,
+  title,
+  fileSize,
+}) => {
+  if (!title && fileSize === undefined) return null
+  return (
+    <div className="px-4 pb-3 pt-3">
+      {title && (
+        <p className="mb-1.5 truncate text-base font-medium text-black">{title}</p>
+      )}
+      {fileSize !== undefined && (
+        <div className="flex items-center gap-1">
+          {renderTypeIcon(mimeType, { className: 'size-5 shrink-0 text-black/55', weight: 'regular' })}
+          <span className="text-xs font-medium text-black/55">{formatBytes(fileSize)}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+const FileCard: React.FC<{
+  url: string
+  mimeType: string
+  title?: string
+  fileSize?: number
+}> = ({ url, mimeType, title, fileSize }) => (
+  <a href={url} target="_blank" rel="noopener noreferrer" className="block no-underline">
+    <div className="aspect-video w-full bg-black/5 flex items-center justify-center">
+      {renderTypeIcon(mimeType, { className: 'size-12 text-black/20', weight: 'regular' })}
+    </div>
+    <div className="px-4 pb-3 pt-3">
+      {title && (
+        <p className="mb-1.5 truncate text-base font-medium text-black">{title}</p>
+      )}
+      {fileSize !== undefined && (
+        <div className="flex items-center gap-1">
+          {renderTypeIcon(mimeType, { className: 'size-5 shrink-0 text-black/55', weight: 'regular' })}
+          <span className="text-xs font-medium text-black/55">{formatBytes(fileSize)}</span>
+        </div>
+      )}
+    </div>
+  </a>
+)
+
+export interface MediaMessageProps {
+  message: LocalMessage
+  isMyMessage?: boolean
+}
+
+export const MediaMessage: React.FC<MediaMessageProps> = ({
+  message,
+  isMyMessage = false,
+}) => {
+  const videoAttachment = message.attachments?.find(
+    (a) => a.type === 'video' && a.asset_url
+  )
+  const imageAttachment = message.attachments?.find(
+    (a) => a.type === 'image' && (a as { image_url?: string }).image_url
+  )
+  const audioAttachment = message.attachments?.find(
+    (a) => a.type === 'audio' && a.asset_url
+  )
+  const fileAttachment = message.attachments?.find(
+    (a) => a.type === 'file' && a.asset_url
+  )
+
+  const activeAttachment =
+    videoAttachment ?? imageAttachment ?? audioAttachment ?? fileAttachment
+
+  const resolvedUrl =
+    videoAttachment?.asset_url ??
+    (imageAttachment as { image_url?: string } | undefined)?.image_url ??
+    audioAttachment?.asset_url ??
+    fileAttachment?.asset_url
+
+  const resolvedType =
+    activeAttachment?.mime_type ??
+    (imageAttachment
+      ? 'image/jpeg'
+      : videoAttachment
+        ? 'video/mp4'
+        : audioAttachment
+          ? 'audio/mpeg'
+          : 'application/octet-stream')
+
+  if (!resolvedUrl) return null
+
+  const sourceType = getSourceType(resolvedType)
+  const title = (activeAttachment as { title?: string } | undefined)?.title
+  const fileSize = (activeAttachment as { file_size?: number } | undefined)?.file_size
+  const thumbnailUrl = (videoAttachment as { thumb_url?: string } | undefined)?.thumb_url
+
+  const messageClass = isMyMessage
+    ? 'str-chat__message str-chat__message-simple str-chat__message--me str-chat__message-simple--me'
+    : 'str-chat__message str-chat__message-simple str-chat__message--other'
+
+  return (
+    <div className={messageClass}>
+      {!isMyMessage && message.user && (
+        <Avatar
+          className="str-chat__avatar str-chat__message-sender-avatar"
+          id={message.user.id}
+          image={message.user.image}
+          name={message.user.name ?? message.user.id}
+        />
+      )}
+      <div
+        className="str-chat__message-inner"
+        style={{ marginInlineEnd: 0, marginInlineStart: 0 }}
+      >
+        <div className="str-chat__message-bubble-wrapper">
+          <div className="str-chat__message-bubble" style={{ padding: 0, borderRadius: 0, overflow: 'visible', background: 'transparent' }}>
+            <div className={CARD_CLASS}>
+              {sourceType === 'image' ? (
+                <>
+                  <img
+                    src={resolvedUrl}
+                    alt={title ?? ''}
+                    className="block w-full"
+                  />
+                  <MediaMeta mimeType={resolvedType} title={title} fileSize={fileSize} />
+                </>
+              ) : sourceType === 'document' ? (
+                <FileCard
+                  url={resolvedUrl}
+                  mimeType={resolvedType}
+                  title={title}
+                  fileSize={fileSize}
+                />
+              ) : (
+                <>
+                  <MediaPlayer
+                    source={resolvedUrl}
+                    mimeType={resolvedType}
+                    poster={thumbnailUrl}
+                    controls
+                  />
+                  <MediaMeta mimeType={resolvedType} title={title} fileSize={fileSize} />
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/MessagingShell/index.tsx

@@ -42,6 +42,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   customProfileContent,
   customChannelActions,
   renderMessage,
+  sendButton,
 }) => {
   const {
     service,
@@ -505,6 +506,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 customProfileContent={customProfileContent}
                 customChannelActions={customChannelActions}
                 renderMessage={renderMessage}
+                sendButton={sendButton}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/index.ts

@@ -13,6 +13,8 @@ export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
 export { ChannelEmptyState } from './components/MessagingShell/ChannelEmptyState'
 export { MessageVoteButtons } from './components/CustomMessage/MessageVoteButtons'
+export { MediaMessage } from './components/MediaMessage'
+export type { MediaMessageProps } from './components/MediaMessage'
 
 // Providers
 export { MessagingProvider } from './providers/MessagingProvider'

package/src/types.ts

@@ -2,6 +2,7 @@ import type {
   MessagingUser,
   StreamChatServiceConfig,
 } from '@linktr.ee/messaging-core'
+import type { ComponentType } from 'react'
 import type {
   Channel,
   ChannelFilters,
@@ -234,6 +235,17 @@ export interface ChannelViewProps {
     message: LocalMessage
   ) => React.ReactNode
 
+  /**
+   * Passed to Stream `Channel` as `SendButton`. Required for hosts that replace
+   * the send control: `Channel` merges this into `ComponentContext` and an
+   * explicit `SendButton: undefined` would otherwise override outer
+   * `WithComponents` overrides.
+   *
+   * @example
+   * sendButton={MediaSendButton}
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sendButton?: ComponentType<any>
 }
 
 /**
@@ -257,6 +269,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'customProfileContent'
   | 'customChannelActions'
   | 'renderMessage'
+  | 'sendButton'
 >
 
 /**