@linktr.ee/messaging-react 3.10.0 → 3.11.0-rc-1783661028

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/CardBody.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import { renderTypeIcon } from '../../../AttachmentCard'
+import { renderTypeIcon } from '../../../../AttachmentCard'
 
-import type { LockedCardVariant } from './LockedCardShell'
+import type { CardVariant } from './MediaShell'
 
 export interface CardBodyProps {
-  variant: LockedCardVariant
+  variant: CardVariant
   title?: string
   placeholderTitle?: string
   mimeType: string
@@ -20,7 +20,7 @@ export interface CardBodyProps {
 }
 
 /**
- * Title + status row layout shared by Composer / Sent / Received cards.
+ * Title + status row layout shared by Composer and `LockedAttachment.Media`.
  * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,
  * 4px gap between title and status row, 4px gap inside status row).
  */
@@ -36,8 +36,8 @@ const CardBody: React.FC<CardBodyProps> = ({
   trailingAction,
 }) => {
   const isDark = variant === 'dark'
-  const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')
-  const titleDimmed = isDark && !title
+  const displayTitle = title || placeholderTitle
+  const titleDimmed = !title
 
   const typeIcon =
     icon ??
@@ -56,7 +56,8 @@ const CardBody: React.FC<CardBodyProps> = ({
           {displayTitle.trim() !== '' && (
             <p
               className={classNames('truncate text-base font-medium leading-6', {
-                'text-black/90': !isDark,
+                'text-black/90': !isDark && !titleDimmed,
+                'text-black/30': !isDark && titleDimmed,
                 'text-white/30': isDark && titleDimmed,
                 'text-white': isDark && !titleDimmed,
               })}

package/src/components/CustomMessage/LockedAttachment/components/_shared/CardThumbnail.tsx

@@ -0,0 +1,92 @@
+import { ImagesIcon } from '@phosphor-icons/react'
+import type React from 'react'
+
+import type {
+  LockedAttachmentGalleryItem,
+  LockedAttachmentSource,
+  PaymentStatus,
+} from '../../types'
+
+import GalleryThumbnail from './GalleryThumbnail'
+import type { CardVariant } from './MediaShell'
+import SingleThumbnail from './SingleThumbnail'
+
+export interface CardThumbnailProps {
+  variant: CardVariant
+  gallery: LockedAttachmentGalleryItem[]
+  title?: string
+  showLocked: boolean
+  paymentStatus?: PaymentStatus
+  /** Single-asset props — ignored when the card renders as a gallery. */
+  mimeType: string
+  thumbnailUrl?: string
+  source?: LockedAttachmentSource
+  containedImage?: boolean
+  /** Top-right overlay (e.g. Composer dismiss X). Rendered inside the thumbnail. */
+  topRight?: React.ReactNode
+}
+
+/** True when the card should render as a mixed-media carousel (2+ items). */
+export const isGalleryCard = (
+  gallery: LockedAttachmentGalleryItem[]
+): boolean => gallery.length >= 2
+
+/**
+ * The body-row icon a card shows when it renders as a gallery — `CardBody`
+ * otherwise auto-detects the icon from `mimeType`. Returned as a ready node so
+ * every card shares the same size/tone treatment.
+ */
+export const galleryBodyIcon = (
+  variant: CardVariant
+): React.ReactNode => (
+  <ImagesIcon
+    className={
+      variant === 'dark'
+        ? 'size-5 shrink-0 text-white/55'
+        : 'size-5 shrink-0 text-black/55'
+    }
+  />
+)
+
+/**
+ * Owns the single-vs-gallery thumbnail decision shared by Composer /
+ * `LockedAttachment.Media` cards: renders `GalleryThumbnail` for a 2+ item `gallery`,
+ * else `SingleThumbnail` for the single asset. Callers pass the superset of
+ * props; the unused half is ignored by whichever branch renders.
+ */
+const CardThumbnail: React.FC<CardThumbnailProps> = ({
+  variant,
+  gallery,
+  title,
+  showLocked,
+  paymentStatus,
+  mimeType,
+  thumbnailUrl,
+  source,
+  containedImage,
+  topRight,
+}) =>
+  isGalleryCard(gallery) ? (
+    <GalleryThumbnail
+      variant={variant}
+      gallery={gallery}
+      title={title}
+      showLocked={showLocked}
+      paymentStatus={paymentStatus}
+      topRight={topRight}
+    />
+  ) : (
+    <SingleThumbnail
+      variant={variant}
+      mimeType={mimeType}
+      thumbnailUrl={thumbnailUrl}
+      title={title}
+      source={source}
+      showLocked={showLocked}
+      paymentStatus={paymentStatus}
+      topRight={topRight}
+      containedImage={containedImage}
+    />
+  )
+
+export default CardThumbnail

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/components/_shared/GalleryThumbnail.tsx

@@ -1,23 +1,18 @@
-import {
-  CaretLeftIcon,
-  CaretRightIcon,
-  LockOpenIcon,
-  LockSimpleIcon,
-  PlayIcon,
-} from '@phosphor-icons/react'
+import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 
-import { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'
+import { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'
 import type {
   LockedAttachmentGalleryItem,
   PaymentStatus,
 } from '../../types'
 
-import type { LockedCardVariant } from './LockedCardShell'
+import { LockBadge } from './LockBadge'
+import type { CardVariant } from './MediaShell'
 
 export interface GalleryThumbnailProps {
-  variant: LockedCardVariant
+  variant: CardVariant
   gallery: LockedAttachmentGalleryItem[]
   title?: string
   /** When true, all items are shown blurred + the locked/play badge is overlaid. */
@@ -52,24 +47,8 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   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.
+  // wrapper on PreviewMediaCard / OwnMediaCard.
   const goPrev = (e: React.MouseEvent) => {
     e.stopPropagation()
     setIndex((i) => Math.max(0, i - 1))
@@ -86,14 +65,22 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   // 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).
+  // shows through as a visible horizontal seam).
+  //
+  // The locked placeholder is absolutely positioned, so it needs the fixed
+  // 337/386 box for height; unlocked content (video, natural-sized image)
+  // manages its own height and can expand/shrink per item.
   //
   // 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).
+  // normally without any clip-path workarounds (see SingleThumbnail).
   return (
-    <div className="relative aspect-[337/386] overflow-hidden rounded-t-md">
+    <div
+      className={classNames(
+        'group relative overflow-hidden rounded-t-md',
+        showLocked ? 'aspect-[337/386]' : undefined
+      )}
+    >
       {showLocked ? (
         <div
           className={classNames(
@@ -115,20 +102,25 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
         </div>
       ) : (
         <AttachmentThumbnail
+          key={safeIndex}
           mimeType={current.mimeType}
           sourceUrl={current.sourceUrl}
           thumbnailUrl={current.thumbnailUrl}
           title={title}
           variant={variant}
+          mediaPlayerProps={{ autoPlay: true }}
         />
       )}
 
-      {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>
+      {/* LOCK while locked. Once unlocked, video/audio autoplays via
+          `mediaPlayerProps` and MediaPlayer already has its own inline
+          controls, so no separate Play affordance is shown. */}
+      {showLocked && (
+        <LockBadge
+          paymentStatus={paymentStatus}
+          isPlayable={isVideoItem}
+          isLocked={showLocked}
+        />
       )}
 
       {total > 1 && (
@@ -158,8 +150,8 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
             <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">
+          <div className="pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30">
+            <span className="text-xs font-medium leading-none text-white">
               {safeIndex + 1}/{total}
             </span>
           </div>

package/src/components/CustomMessage/LockedAttachment/components/_shared/LoadingDots.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+const Dot = ({ cx, index }: { cx: string; index: number }) => (
+  <circle cx={cx} cy="6.15" r="2.4" fill="currentColor">
+    <animateTransform
+      attributeName="transform"
+      type="translate"
+      values="0 0; 0 -2.25; 0 0;"
+      dur="900ms"
+      begin={`${120 * index}ms`}
+      repeatCount="indefinite"
+    />
+  </circle>
+)
+
+/**
+ * Three bouncing dots, inline-sized for use inside buttons/labels (e.g. the
+ * Unlock CTA while a purchase is in flight). Mirrors the typing indicator's
+ * animation but uses `currentColor` so it adopts the surrounding text color.
+ */
+const LoadingDots: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    aria-hidden="true"
+    className={className}
+    viewBox="0 0 20 12.3"
+    width="20"
+    height="13"
+    overflow="visible"
+  >
+    <Dot cx="3" index={0} />
+    <Dot cx="10" index={1} />
+    <Dot cx="17" index={2} />
+  </svg>
+)
+
+export default LoadingDots

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

@@ -0,0 +1,63 @@
+import { LockOpenIcon, LockSimpleIcon, PlayIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React from 'react'
+
+import { getSourceType } from '../../../../AttachmentCard'
+import type { PaymentStatus } from '../../types'
+
+export interface LockBadgeProps {
+  paymentStatus?: PaymentStatus
+  mimeType?: string
+  /**
+   * Overrides the `mimeType`-derived playable check. Lets a caller that
+   * already knows per-item playability (e.g. `GalleryThumbnail`, checking a
+   * carousel item's own mimeType rather than the card's single `mimeType`)
+   * skip re-deriving it.
+   */
+  isPlayable?: boolean
+  /** Whether the item is still locked. Play only ever shows once unlocked —
+   * a locked item always shows the lock, even for otherwise-playable media. */
+  isLocked: boolean
+}
+
+/**
+ * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.
+ * Uses `bg-black/30`. Stays `pointer-events-none` so clicks pass through to
+ * the underlying player/toggle; the play state highlights via `group-hover`
+ * (same `bg-black/40` as the gallery's prev/next arrows) — the ancestor
+ * providing `group` must wrap the actual clickable/hoverable player area.
+ *
+ * For playable media (video/audio) that's unlocked, the badge shows a play
+ * icon instead of a lock — matching the convention used by `GalleryThumbnail`.
+ */
+export const LockBadge: React.FC<LockBadgeProps> = ({
+  paymentStatus,
+  mimeType,
+  isPlayable,
+  isLocked,
+}) => {
+  const sourceType = mimeType ? getSourceType(mimeType) : undefined
+  const resolvedIsPlayable =
+    isPlayable ?? (sourceType === 'video' || sourceType === 'audio')
+
+  const Icon =
+    resolvedIsPlayable && !isLocked
+      ? PlayIcon
+      : paymentStatus === 'paid'
+        ? LockOpenIcon
+        : LockSimpleIcon
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div
+        className={classNames(
+          'flex size-12 items-center justify-center rounded-full bg-black/30 text-white',
+          Icon === PlayIcon && 'group-hover:bg-black/40'
+        )}
+      >
+        <Icon className="size-6" weight="fill" />
+      </div>
+    </div>
+  )
+}
+
+export default LockBadge

package/src/components/{LockedAttachment/components/_shared/LockedCardShell.tsx → CustomMessage/LockedAttachment/components/_shared/MediaShell.tsx}

@@ -1,10 +1,10 @@
 import classNames from 'classnames'
 import React from 'react'
 
-export type LockedCardVariant = 'dark' | 'light'
+export type CardVariant = 'dark' | 'light'
 
-export interface LockedCardShellProps {
-  variant: LockedCardVariant
+export interface MediaShellProps {
+  variant: CardVariant
   children: React.ReactNode
   rootRef?: React.Ref<HTMLDivElement>
   'data-testid'?: string
@@ -12,9 +12,9 @@ export interface LockedCardShellProps {
 
 /**
  * Outer chrome for every LockedAttachment card.
- * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.
+ * Mirrors the 16px radius treatment from the Figma design system.
  */
-const LockedCardShell: React.FC<LockedCardShellProps> = ({
+const MediaShell: React.FC<MediaShellProps> = ({
   variant,
   children,
   rootRef,
@@ -25,12 +25,12 @@ const LockedCardShell: React.FC<LockedCardShellProps> = ({
     data-testid={dataTestId}
     className={classNames(
       'relative w-[280px] select-none overflow-hidden rounded-md',
-      '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-[#1e2330]' : 'bg-white'
+      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white',
+      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]'
     )}
   >
     {children}
   </div>
 )
 
-export default LockedCardShell
+export default MediaShell

package/src/components/CustomMessage/LockedAttachment/components/_shared/PreviewToggle.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+export interface PreviewToggleProps {
+  /** Toggles the preview; omit to render `children` with no wrapper at all (nothing to toggle). */
+  onToggle: (() => void | Promise<void>) | undefined
+  isBusy: boolean
+  isPreviewVisible: boolean
+  children: React.ReactNode
+}
+
+/**
+ * Makes a locked thumbnail clickable to toggle its preview. Uses a
+ * `role="button"` div rather than a native `<button>` because the thumbnail
+ * it wraps can itself contain interactive children (gallery carousel arrows,
+ * a Composer dismiss X) — nesting a real `<button>` around those would
+ * produce invalid, inaccessible nested-interactive-element markup.
+ */
+const PreviewToggle: React.FC<PreviewToggleProps> = ({
+  onToggle,
+  isBusy,
+  isPreviewVisible,
+  children,
+}) => {
+  if (!onToggle) return <React.Fragment>{children}</React.Fragment>
+
+  return (
+    <div
+      role="button"
+      tabIndex={isBusy ? -1 : 0}
+      aria-label="Toggle preview"
+      aria-busy={isBusy}
+      aria-pressed={isPreviewVisible}
+      aria-disabled={isBusy || undefined}
+      onClick={isBusy ? undefined : onToggle}
+      onKeyDown={(e) => {
+        if (isBusy) return
+        // Only handle keys that originate on the wrapper itself, not on
+        // inner interactive elements (dismiss X, carousel arrows). Without
+        // this guard, pressing Enter/Space on a focused child would bubble
+        // up and toggle the preview in addition to activating the child.
+        if (e.target !== e.currentTarget) return
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          void onToggle()
+        }
+      }}
+      className={
+        !isBusy
+          ? 'block w-full cursor-pointer text-left'
+          : 'block w-full text-left'
+      }
+    >
+      {children}
+    </div>
+  )
+}
+
+export default PreviewToggle

package/src/components/CustomMessage/LockedAttachment/components/_shared/PriceLockRow.tsx

@@ -0,0 +1,21 @@
+import { LockSimpleIcon } from '@phosphor-icons/react'
+import type React from 'react'
+
+/**
+ * The lock-icon + amount/status row shared by every LockedAttachment text-mode
+ * card. Only the wrapper and the leading lock icon are shared — the amount and
+ * any trailing status live in `children`, since they genuinely differ per card
+ * (placeholder fallback vs. paid badge vs. bare amount).
+ */
+const PriceLockRow: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <div className="flex items-center gap-1 text-xs font-medium">
+    <LockSimpleIcon
+      className="size-3.5 shrink-0 opacity-55"
+      weight="fill"
+      aria-hidden
+    />
+    {children}
+  </div>
+)
+
+export default PriceLockRow

package/src/components/CustomMessage/LockedAttachment/components/_shared/PurchaseStatusBadge.tsx

@@ -0,0 +1,74 @@
+import { CheckCircleIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React from 'react'
+
+import type { PaymentStatus } from '../../types'
+
+export interface PurchaseStatusBadgeProps {
+  /** 'own' matches the sender's dark/own-message context; 'other' matches the recipient's light/other-message context. */
+  isMine: boolean
+  /** 'paid' renders the "Sold"/"Purchased" + checkmark variant; otherwise falls back to plain amount text, or nothing. */
+  paymentStatus?: PaymentStatus
+  amountText?: string
+}
+
+/**
+ * Bullet + amount/label + checkmark row for a paid attachment or message.
+ * Shared by `LockedAttachment.Media`/`.Text`'s status badges.
+ */
+const PurchaseStatusBadge: React.FC<PurchaseStatusBadgeProps> = ({
+  isMine,
+  paymentStatus,
+  amountText,
+}) => {
+  const labelColour = isMine ? 'text-white/55' : 'text-black/55'
+  const successColour = isMine ? 'text-[#34c759]' : 'text-[#008236]'
+  if (paymentStatus === 'paid') {
+    return (
+      <React.Fragment>
+        <span className={classNames('text-xs font-medium', labelColour)}>
+          &bull;
+        </span>
+        <span className={classNames('text-xs font-medium', successColour)}>
+          {isMine ? 'Sold' : 'Purchased'}
+        </span>
+        <CheckCircleIcon
+          className={classNames('shrink-0 size-3.5', successColour)}
+          weight="bold"
+          aria-hidden
+        />
+      </React.Fragment>
+    )
+  }
+
+  if (amountText != null) {
+    return (
+      <React.Fragment>
+        <span className={classNames('text-xs font-medium', labelColour)}>
+          &bull;
+        </span>
+        <span className={classNames('text-xs font-medium', labelColour)}>
+          {amountText}
+        </span>
+      </React.Fragment>
+    )
+  }
+
+
+  if (paymentStatus === 'failed' || paymentStatus === 'refunded') {
+    return (
+      <React.Fragment>
+        <span className={classNames('text-xs font-medium', labelColour)}>
+          &bull;
+        </span>
+        <span className={classNames('text-xs font-medium', labelColour)}>
+          {paymentStatus === 'failed' ? 'Payment failed' : 'Refunded'}
+        </span>
+      </React.Fragment>
+    )
+  }
+
+  return null
+}
+
+export default PurchaseStatusBadge

package/src/components/{LockedAttachment/components/_shared/LockedThumbnail.tsx → CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx}

@@ -4,14 +4,14 @@ import React from 'react'
 import {
   AttachmentThumbnail,
   renderTypeIcon,
-} from '../../../AttachmentCard'
+} from '../../../../AttachmentCard'
 import type { LockedAttachmentSource, PaymentStatus } from '../../types'
 
 import { LockBadge } from './LockBadge'
-import type { LockedCardVariant } from './LockedCardShell'
+import type { CardVariant } from './MediaShell'
 
-export interface LockedThumbnailProps {
-  variant: LockedCardVariant
+export interface SingleThumbnailProps {
+  variant: CardVariant
   mimeType: string
   thumbnailUrl?: string
   title?: string
@@ -40,7 +40,7 @@ export interface LockedThumbnailProps {
  *   - preview/paid: clear thumbnail (the underlying source)
  *   - empty:        type-icon placeholder
  */
-const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
+const SingleThumbnail: React.FC<SingleThumbnailProps> = ({
   variant,
   mimeType,
   thumbnailUrl,
@@ -98,7 +98,11 @@ const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
               })}
             </div>
           )}
-          <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />
+          <LockBadge
+            paymentStatus={paymentStatus}
+            mimeType={mimeType}
+            isLocked={showLocked}
+          />
         </div>
       ) : (
         <AttachmentThumbnail
@@ -125,4 +129,4 @@ const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
   )
 }
 
-export default LockedThumbnail
+export default SingleThumbnail

package/src/components/CustomMessage/LockedAttachment/components/_shared/SkeletonTextLines.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames'
+import React from 'react'
+
+export interface SkeletonTextLinesProps {
+  /** Matches the bubble it sits in — "dark" for the sender's own bubble. */
+  variant: 'light' | 'dark'
+}
+
+/**
+ * Two skeleton bars standing in for the redacted text of a paid text-only
+ * message — the real content is never sent to the client until purchase, so
+ * there's nothing to render yet.
+ *
+ * Uses explicit black/white (not `bg-current`) because Tailwind doesn't
+ * support opacity modifiers on the `current` color — `bg-current/30` silently
+ * produces no CSS rule at all.
+ */
+const SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({ variant = 'dark' }) => {
+  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'
+
+  return (
+    <div className="flex flex-col gap-2 str-chat__message-text my-1 animate-pulse" aria-hidden>
+      <div className={classNames('h-3 w-40 rounded-full', colour)} />
+      <div className={classNames('h-3 w-24 rounded-full', colour)} />
+    </div>
+  )
+}
+
+export default SkeletonTextLines

package/src/components/CustomMessage/LockedAttachment/components/_shared/TextShell.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames'
+import React from 'react'
+
+/**
+ * Chat-bubble chrome for a paid text-only message/preview. Deliberately
+ * doesn't lean on `.str-chat`'s CSS variables (`--str-chat__message-bubble-*`)
+ * — this renders in the Composer preview too, which sits outside any
+ * `.str-chat` ancestor, so every value here (radius, colour, type scale) is
+ * hardcoded to match the Figma spec directly.
+ */
+const TextShell: React.FC<
+  React.PropsWithChildren<{ isMine: boolean; className?: string }>
+> = ({ isMine, children, className }) => (
+  <div
+    className={classNames(
+      'message-locked-attachment-text',
+      'relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3',
+      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
+      isMine ? 'bg-[#1e2330] text-white' : 'bg-[#f2f1ef] text-black',
+      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]',
+      className
+    )}
+  >
+    {children}
+  </div>
+)
+
+export default TextShell