@linktr.ee/messaging-react 1.26.1 → 1.28.0-rc-1776225927

package/src/components/LockedAttachment/index.tsx

@@ -0,0 +1,39 @@
+import React, { Suspense } from 'react'
+
+import type { CreatorCardProps } from './components/Creator'
+import type { VisitorCardProps } from './components/Visitor'
+
+const CreatorCardLazy = React.lazy(() => import('./components/Creator'))
+const VisitorCardLazy = React.lazy(() => import('./components/Visitor'))
+
+const LockedAttachmentFallback = () => (
+  <div
+    className="w-[280px] min-h-[200px] animate-pulse rounded-3xl bg-black/[0.06] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04)]"
+    aria-hidden
+  />
+)
+
+export type LockedAttachmentProps =
+  | ({ isCreator: true } & CreatorCardProps)
+  | ({ isCreator?: false } & VisitorCardProps)
+
+const LockedAttachment = (props: LockedAttachmentProps) => {
+  if (props.isCreator) {
+    const { isCreator: _, ...rest } = props
+    return (
+      <Suspense fallback={<LockedAttachmentFallback />}>
+        <CreatorCardLazy {...rest} />
+      </Suspense>
+    )
+  }
+  const { isCreator: _, ...rest } = props
+  return (
+    <Suspense fallback={<LockedAttachmentFallback />}>
+      <VisitorCardLazy {...rest} />
+    </Suspense>
+  )
+}
+
+export default LockedAttachment
+export type { CreatorCardProps, VisitorCardProps }
+export type { PaymentStatus, LockedAttachmentSource } from './types'

package/src/components/LockedAttachment/types.ts

@@ -0,0 +1,17 @@
+import type { PaymentStatus } from '../../stream-custom-data'
+
+/** Shared fields for creator and visitor locked-attachment cards (internal). */
+export interface LockedAttachmentBaseProps {
+  title?: string
+  mimeType?: string
+  /** Preview image. Video/image: pass blurred version. Audio/document: pass unblurred version. */
+  thumbnail?: string
+  /** Unlocked media URL. Undefined while locked or pending unlock. */
+  source?: string
+  detail?: string
+  amountText?: string
+  paymentStatus?: PaymentStatus
+}
+
+export type { PaymentStatus }
+export type { LockedAttachmentSource } from '../../types'

package/src/components/LockedAttachment/utils/icons.ts

@@ -0,0 +1,53 @@
+import {
+  FileIcon,
+  FileCsvIcon,
+  FileDocIcon,
+  FileMdIcon,
+  FilePdfIcon,
+  FilePptIcon,
+  FileTextIcon,
+  FileXlsIcon,
+  FileZipIcon,
+  ImageIcon,
+  SpeakerHighIcon,
+  VideoCameraIcon,
+  IconProps,
+} from '@phosphor-icons/react'
+import React from 'react'
+
+import { getDocumentIconType, getSourceType } from './mimeType'
+import type { AttachmentSourceType } from './mimeType'
+
+export const MEDIA_TYPE_ICON: Record<AttachmentSourceType, React.ElementType> =
+  {
+    video: VideoCameraIcon,
+    audio: SpeakerHighIcon,
+    image: ImageIcon,
+    document: FileIcon,
+  }
+
+const DOCUMENT_ICON_COMPONENT = {
+  pdf: FilePdfIcon,
+  doc: FileDocIcon,
+  xls: FileXlsIcon,
+  csv: FileCsvIcon,
+  ppt: FilePptIcon,
+  zip: FileZipIcon,
+  text: FileTextIcon,
+  markdown: FileMdIcon,
+  generic: FileIcon,
+} as const
+
+export function getTypeIcon(mimeType: string): React.ElementType {
+  const sourceType = getSourceType(mimeType)
+  if (sourceType !== 'document') return MEDIA_TYPE_ICON[sourceType]
+  return DOCUMENT_ICON_COMPONENT[getDocumentIconType(mimeType)]
+}
+
+/** Use instead of `<TypeIcon />` where TypeIcon = getTypeIcon(mime) to satisfy react-hooks/static-components. */
+export function renderTypeIcon(
+  mimeType: string,
+  props: IconProps
+): React.ReactElement {
+  return React.createElement(getTypeIcon(mimeType), props)
+}

package/src/components/LockedAttachment/utils/mimeType.test.ts

@@ -0,0 +1,119 @@
+import { getDocumentIconType, getSourceType } from './mimeType'
+
+describe('getSourceType', () => {
+  it('returns video for video/* types', () => {
+    expect(getSourceType('video/mp4')).toBe('video')
+    expect(getSourceType('video/webm')).toBe('video')
+    expect(getSourceType('video/quicktime')).toBe('video')
+  })
+
+  it('returns audio for audio/* types', () => {
+    expect(getSourceType('audio/mpeg')).toBe('audio')
+    expect(getSourceType('audio/mp4')).toBe('audio')
+    expect(getSourceType('audio/ogg')).toBe('audio')
+  })
+
+  it('returns image for image/* types', () => {
+    expect(getSourceType('image/jpeg')).toBe('image')
+    expect(getSourceType('image/png')).toBe('image')
+    expect(getSourceType('image/webp')).toBe('image')
+  })
+
+  it('returns document for application/* types', () => {
+    expect(getSourceType('application/pdf')).toBe('document')
+    expect(getSourceType('application/msword')).toBe('document')
+    expect(getSourceType('application/zip')).toBe('document')
+  })
+
+  it('returns document for text/* types', () => {
+    expect(getSourceType('text/plain')).toBe('document')
+    expect(getSourceType('text/csv')).toBe('document')
+    expect(getSourceType('text/markdown')).toBe('document')
+  })
+})
+
+describe('getDocumentIconType', () => {
+  it('returns pdf for application/pdf', () => {
+    expect(getDocumentIconType('application/pdf')).toBe('pdf')
+  })
+
+  it('returns doc for Word types', () => {
+    expect(getDocumentIconType('application/msword')).toBe('doc')
+    expect(
+      getDocumentIconType(
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+      )
+    ).toBe('doc')
+  })
+
+  it('returns xls for Excel types', () => {
+    expect(getDocumentIconType('application/vnd.ms-excel')).toBe('xls')
+    expect(
+      getDocumentIconType(
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      )
+    ).toBe('xls')
+  })
+
+  it('returns csv for text/csv', () => {
+    expect(getDocumentIconType('text/csv')).toBe('csv')
+  })
+
+  it('returns ppt for PowerPoint types', () => {
+    expect(getDocumentIconType('application/vnd.ms-powerpoint')).toBe('ppt')
+    expect(
+      getDocumentIconType(
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+      )
+    ).toBe('ppt')
+  })
+
+  it('returns zip for archive types', () => {
+    expect(getDocumentIconType('application/zip')).toBe('zip')
+    expect(getDocumentIconType('application/x-zip-compressed')).toBe('zip')
+    expect(getDocumentIconType('application/gzip')).toBe('zip')
+    expect(getDocumentIconType('application/x-gzip')).toBe('zip')
+    expect(getDocumentIconType('application/x-rar-compressed')).toBe('zip')
+    expect(getDocumentIconType('application/x-7z-compressed')).toBe('zip')
+    expect(getDocumentIconType('application/x-tar')).toBe('zip')
+  })
+
+  it('returns text for plain text and rtf', () => {
+    expect(getDocumentIconType('text/plain')).toBe('text')
+    expect(getDocumentIconType('text/rtf')).toBe('text')
+    expect(getDocumentIconType('application/rtf')).toBe('text')
+    expect(getDocumentIconType('application/x-rtf')).toBe('text')
+  })
+
+  it('returns markdown for markdown types', () => {
+    expect(getDocumentIconType('text/markdown')).toBe('markdown')
+    expect(getDocumentIconType('text/x-markdown')).toBe('markdown')
+  })
+
+  it('returns xls for macro-enabled Excel', () => {
+    expect(
+      getDocumentIconType('application/vnd.ms-excel.sheet.macroEnabled.12')
+    ).toBe('xls')
+  })
+
+  it('returns ppt for macro-enabled PowerPoint', () => {
+    expect(
+      getDocumentIconType(
+        'application/vnd.ms-powerpoint.presentation.macroEnabled.12'
+      )
+    ).toBe('ppt')
+  })
+
+  it('returns generic for unknown types', () => {
+    expect(getDocumentIconType('application/octet-stream')).toBe('generic')
+    expect(getDocumentIconType('application/json')).toBe('generic')
+    expect(getDocumentIconType('text/html')).toBe('generic')
+    expect(getDocumentIconType('application/vnd.rar')).toBe('generic')
+    expect(getDocumentIconType('application/vnd.oasis.opendocument.text')).toBe(
+      'generic'
+    )
+    expect(
+      getDocumentIconType('application/vnd.oasis.opendocument.spreadsheet')
+    ).toBe('generic')
+  })
+})

package/src/components/LockedAttachment/utils/mimeType.ts

@@ -0,0 +1,37 @@
+export type AttachmentSourceType = 'image' | 'audio' | 'video' | 'document'
+
+export type DocumentIconType =
+  | 'pdf'
+  | 'doc'
+  | 'xls'
+  | 'csv'
+  | 'ppt'
+  | 'zip'
+  | 'text'
+  | 'markdown'
+  | 'generic'
+
+const DOCUMENT_ICON_PATTERNS: Array<[RegExp, DocumentIconType]> = [
+  [/pdf/, 'pdf'],
+  [/wordprocessingml|msword|\.doc/, 'doc'],
+  [/spreadsheetml|ms-excel|\.xls/, 'xls'],
+  [/csv/, 'csv'],
+  [/presentationml|ms-powerpoint|\.ppt/, 'ppt'],
+  [/zip|x-rar|x-7z|x-tar|x-gzip/, 'zip'],
+  [/plain|rtf/, 'text'],
+  [/markdown/, 'markdown'],
+]
+
+export function getSourceType(mimeType: string): AttachmentSourceType {
+  if (mimeType.startsWith('video/')) return 'video'
+  if (mimeType.startsWith('audio/')) return 'audio'
+  if (mimeType.startsWith('image/')) return 'image'
+  return 'document'
+}
+
+export function getDocumentIconType(mimeType: string): DocumentIconType {
+  const match = DOCUMENT_ICON_PATTERNS.find(([pattern]) =>
+    pattern.test(mimeType)
+  )
+  return match ? match[1] : 'generic'
+}

package/src/components/ParticipantPicker/index.tsx

@@ -32,6 +32,12 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
   // Track if we've already loaded participants to prevent repeated loading
   const loadedRef = useRef(false)
 
+  // New source instance should be allowed to load again
+  useEffect(() => {
+    loadedRef.current = false
+  }, [participantSource])
+
+  /* eslint-disable react-hooks/exhaustive-deps -- syncs with participantSource + debug; inner async uses participantSource.loadParticipants */
   // Load participants initially - wait for participantSource to finish loading first
   useEffect(() => {
     // Wait for the participantSource to finish loading before we try to load participants
@@ -78,7 +84,8 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
     }
 
     loadInitialParticipants()
-  }, [participantSource.loading, debug]) // Re-run when loading state changes
+  }, [participantSource, debug])
+  /* eslint-enable react-hooks/exhaustive-deps */
 
   // Filter participants by search query and existing participants
   const availableParticipants = participants

package/src/hooks/useParticipants.ts

@@ -74,10 +74,11 @@ export const useParticipants = (
     loadParticipants(true);
   }, [loadParticipants]);
 
-  // Initial load - only run once when participantSource changes
+  /* eslint-disable react-hooks/exhaustive-deps -- initial load only; `loadParticipants` changes whenever `loading` flips */
   useEffect(() => {
     loadParticipants(true);
-  }, [participantSource.loadParticipants]); // Only depend on the function to avoid loops
+  }, [participantSource.loadParticipants]);
+  /* eslint-enable react-hooks/exhaustive-deps */
 
   return {
     participants,

package/src/index.ts

@@ -6,6 +6,7 @@ export { MessagingShell } from './components/MessagingShell'
 export { ChannelList } from './components/ChannelList'
 export { ChannelView } from './components/ChannelView'
 export { default as ActionButton } from './components/ActionButton'
+export { default as LockedAttachment } from './components/LockedAttachment'
 export { ParticipantPicker } from './components/ParticipantPicker'
 export { Avatar } from './components/Avatar'
 export { FaqList } from './components/FaqList'
@@ -34,10 +35,13 @@ export type {
   MessagingCapabilities,
   ParticipantSource,
   Participant,
+  LockedAttachmentSource,
 } from './types'
 export type { MessageMetadata } from './stream-custom-data'
 export type { AvatarProps } from './components/Avatar'
 export type { ActionButtonProps } from './components/ActionButton'
+export type { LockedAttachmentProps } from './components/LockedAttachment'
+export type { AttachmentSourceType } from './components/LockedAttachment/utils/mimeType'
 export type { Faq, FaqListProps } from './components/FaqList'
 export type { FaqListItemProps } from './components/FaqList/FaqListItem'
 export type { VoteSelection } from './hooks/useMessageVote'

package/src/stories/decorators/storyUser.tsx

@@ -0,0 +1,37 @@
+import type { ArgTypes } from '@storybook/react'
+
+export const storyUsers = {
+  creator: {
+    id: 'creator-user',
+    name: 'Creator',
+    image: 'https://i.pravatar.cc/150?img=1',
+  },
+  visitor: {
+    id: 'visitor-user',
+    name: 'Visitor',
+    image: 'https://i.pravatar.cc/150?img=5',
+  },
+} as const
+
+export type StoryRole = keyof typeof storyUsers
+
+export type StoryUser = typeof storyUsers[keyof typeof storyUsers]
+
+const DEFAULT_ROLE: StoryRole = 'creator'
+
+/**
+ * Storybook control: pick viewer identity; `args.currentUser` is the full user object.
+ * Use with `key={currentUser.id}` on the story root so Stream client remounts when it changes.
+ */
+export const currentUserArgType: ArgTypes<{ currentUser?: StoryUser }> = {
+  currentUser: {
+    name: 'participant',
+    control: { type: 'inline-radio' as const },
+    options: ['creator', 'visitor'] as StoryRole[],
+    mapping: {
+      creator: storyUsers.creator,
+      visitor: storyUsers.visitor,
+    },
+    table: { defaultValue: { summary: DEFAULT_ROLE } },
+  },
+} satisfies ArgTypes<{ currentUser?: StoryUser }>

package/src/stream-custom-data.ts

@@ -24,6 +24,7 @@ export type MessageCustomType =
   | 'MESSAGE_TIP'
   | 'MESSAGE_PAID'
   | 'MESSAGE_CHATBOT'
+  | 'MESSAGE_ATTACHMENT'
   | AgeSafetySystemType
   | DmAgentSystemType
 
@@ -31,12 +32,17 @@ export type MessageCustomType =
  * Message metadata for paid messaging and chatbot flows.
  * Used to identify message types and payment status.
  */
+export type PaymentStatus = 'pending' | 'paid' | 'failed' | 'refunded'
+
 export interface MessageMetadata {
   custom_type?: MessageCustomType
-  amount_text?: string
-  payment_status?: string
-  payment_intent_id?: string
   listing_id?: string
+  amount_text?: string
+  payment_status?: PaymentStatus
+  attachment_title?: string
+  attachment_mime_type?: string
+  attachment_thumbnail?: string
+  attachment_detail?: string
 }
 
 declare module 'stream-chat' {

package/src/types.ts

@@ -117,6 +117,10 @@ export interface ChannelListProps {
   ) => React.ReactNode
 }
 
+export interface LockedAttachmentSource {
+  source: string
+}
+
 /**
  * ChannelView component props
  */
@@ -163,7 +167,7 @@ export interface ChannelViewProps {
    * @example
    * messageMetadata={{ custom_type: 'MESSAGE_PAID', listing_id: '...' }}
    */
-  messageMetadata?: Pick<MessageMetadata, 'custom_type' | 'listing_id'>
+  messageMetadata?: Partial<MessageMetadata>
 
   /**
    * Callback fired after a message is successfully sent.
@@ -231,6 +235,19 @@ export interface ChannelViewProps {
     messageNode: React.ReactElement,
     message: LocalMessage
   ) => React.ReactNode
+
+  /**
+   * Called when the visitor clicks Unlock on a locked attachment message.
+   * Receives the message and channel. Show checkout, confirm payment, fetch
+   * the unlocked URL. `attachment_source` must NOT be stored on the Stream message metadata.
+   * The card shows a loading state for the full duration of the promise.
+   */
+  onAttachmentUnlock?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource>
+
+  /**
+   * Called when the visitor clicks Download on an unlocked attachment message.
+   */
+  onAttachmentDownload?: (message: LocalMessage, channel: Channel) => void
 }
 
 /**
@@ -254,6 +271,8 @@ export type ChannelViewPassthroughProps = Pick<
   | 'customProfileContent'
   | 'customChannelActions'
   | 'renderMessage'
+  | 'onAttachmentUnlock'
+  | 'onAttachmentDownload'
 >
 
 /**

package/src/utils/isDevBuild.ts

@@ -0,0 +1,10 @@
+/**
+ * True in Vite dev builds (`import.meta.env.DEV`). Uses a type assertion so
+ * `tsc` does not rely on ambient `ImportMeta` merging (vite/client).
+ */
+export function isDevBuild(): boolean {
+  return (
+    typeof import.meta !== 'undefined' &&
+    (import.meta as unknown as { env?: { DEV?: boolean } }).env?.DEV === true
+  )
+}