@linktr.ee/messaging-react 1.33.2 → 1.33.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as e, a as t, C as i, b as n, c as o, d as g, F as r, e as m, L as u, f as M, h as c, i as l, j as h, P as C, k as P, u as d, l as L, m as p, n as v } from "./index-BePLvyvi.js";
+import { A as e, a as t, C as i, b as n, c as o, d as g, F as r, e as m, L as u, f as M, h as c, i as l, j as h, P as C, k as P, u as d, l as L, m as p, n as v } from "./index-Ydi1pTAi.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.33.2",
+  "version": "1.33.3",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelInfoDialog/index.tsx

@@ -250,9 +250,11 @@ export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
                     {followerStatusLabel}
                   </span>
                 )}
-                {customProfileContent}
               </div>
             </div>
+            {customProfileContent && (
+              <div className="w-full">{customProfileContent}</div>
+            )}
           </div>
 
           <ul className="flex flex-col gap-2 mt-2">

package/src/components/ChannelView.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeftIcon, DotsThreeIcon, StarIcon } from '@phosphor-icons/react'
+import { ArrowLeftIcon, CaretRightIcon, DotsThreeIcon, StarIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useRef } from 'react'
 import { Channel as ChannelType } from 'stream-chat'
@@ -96,9 +96,15 @@ const CustomChannelHeader: React.FC<{
             starred={showStarButton && isStarred}
             size={40}
           />
-          <h1 className="text-xs font-medium text-black/90">
+          <button
+            type="button"
+            onClick={onShowInfo}
+            className="flex items-center gap-0.5 rounded-full bg-black/[0.05] px-3 py-1 text-xs font-medium text-black/90 hover:bg-black/[0.08] transition-colors"
+            aria-label={`View info for ${participantName}`}
+          >
             {participantName}
-          </h1>
+            <CaretRightIcon className="size-3 shrink-0" />
+          </button>
         </div>
         <div className="flex justify-end items-center gap-2">
           {showStarButton && (
@@ -150,9 +156,21 @@ const CustomChannelHeader: React.FC<{
             size={40}
           />
           <div className="min-w-0">
-            <h1 className="font-medium text-black/90 truncate">
-              {participantName}
-            </h1>
+            {canShowInfo ? (
+              <button
+                type="button"
+                onClick={onShowInfo}
+                className="flex items-center gap-1 font-medium text-black/90 truncate hover:text-black/70 transition-colors"
+                aria-label={`View info for ${participantName}`}
+              >
+                <span className="truncate">{participantName}</span>
+                <CaretRightIcon className="size-4 shrink-0" />
+              </button>
+            ) : (
+              <h1 className="font-medium text-black/90 truncate">
+                {participantName}
+              </h1>
+            )}
           </div>
         </div>
         <div className="flex items-center gap-2">

package/src/components/LockedAttachment/components/Creator/Card.tsx

@@ -54,8 +54,8 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
     <div className="relative 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)]">
       <CardHeader
         onDismiss={onDismiss}
-        onPreviewClick={onPreviewClick}
-        sourceUrl={source?.sourceUrl}
+        onToggle={onPreviewClick ? handleToggle : undefined}
+        isExpanded={!!source}
         paymentStatus={paymentStatus}
       />
 
@@ -67,11 +67,11 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
         onToggle={onPreviewClick ? handleToggle : undefined}
       />
 
-      <div className="px-4 pb-3 pt-3">
+      <div className="px-4 pb-3 pt-3 bg-black">
         <p
           className={classNames('mb-1.5 truncate text-base font-medium', {
-            'text-black/30': !title,
-            'text-black': !!title,
+            'text-white/30': !title,
+            'text-white': !!title,
           })}
         >
           {title || placeholderTitle}
@@ -79,30 +79,30 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
 
         <div className="flex items-center gap-1">
           {renderTypeIcon(mimeType, {
-            className: 'size-5 shrink-0 text-black/55',
+            className: 'size-5 shrink-0 text-white/55',
             weight: 'regular',
           })}
 
           {detail && (
-            <span className="text-xs font-medium text-black/55">{detail}</span>
+            <span className="text-xs font-medium text-white/55">{detail}</span>
           )}
 
           {paymentStatus === 'paid' ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-black/55">&bull;</span>
-              <span className="text-xs font-medium text-[#008236]">Sold</span>
+              <span className="text-xs font-medium text-white/55">&bull;</span>
+              <span className="text-xs font-medium text-[#4ade80]">Sold</span>
               <CheckCircleIcon
-                className="size-4 text-[#008236]"
+                className="size-4 text-[#4ade80]"
                 weight="bold"
               />
             </React.Fragment>
           ) : (
             <React.Fragment>
-              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span className="text-xs font-medium text-white/55">&bull;</span>
               <span
                 className={classNames('text-xs font-medium', {
-                  'text-black/30': !amountText,
-                  'text-black/55': !!amountText,
+                  'text-white/30': !amountText,
+                  'text-white/55': !!amountText,
                 })}
               >
                 {amountText || placeholderAmountText}
@@ -117,15 +117,15 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
 
 interface CardHeaderProps {
   onDismiss?: () => void
-  onPreviewClick?: () => void
-  sourceUrl?: string
+  onToggle?: () => void
+  isExpanded?: boolean
   paymentStatus?: PaymentStatus
 }
 
 const CardHeader: React.FC<CardHeaderProps> = ({
   onDismiss,
-  onPreviewClick,
-  sourceUrl,
+  onToggle,
+  isExpanded,
   paymentStatus,
 }) => {
   if (onDismiss) {
@@ -141,13 +141,22 @@ const CardHeader: React.FC<CardHeaderProps> = ({
     )
   }
 
-  const Icon = onPreviewClick
-    ? sourceUrl
-      ? EyeIcon
-      : EyeSlashIcon
-    : paymentStatus === 'paid'
-      ? LockOpenIcon
-      : LockIcon
+  if (onToggle) {
+    const Icon = isExpanded ? EyeIcon : EyeSlashIcon
+    return (
+      <button
+        type="button"
+        onClick={onToggle}
+        className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3"
+        aria-label={isExpanded ? 'Hide preview' : 'Show preview'}
+        aria-pressed={isExpanded}
+      >
+        <Icon className="size-4" weight="fill" />
+      </button>
+    )
+  }
+
+  const Icon = paymentStatus === 'paid' ? LockOpenIcon : LockIcon
 
   return (
     <div className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3">

package/src/components/LockedAttachment/components/MediaPlayer.tsx

@@ -31,6 +31,12 @@ export interface MediaPlayerProps {
   showProgress?: boolean
   /** When true, requests muted playback (helps autoplay policies on video). */
   muted?: boolean
+  /**
+   * When provided, overrides the default click-to-play-toggle behaviour on the
+   * player container. The play/pause button (which calls stopPropagation) is
+   * unaffected, so inline playback still works.
+   */
+  onContainerClick?: (e: React.MouseEvent) => void
 }
 
 const MediaPlayer: React.FC<MediaPlayerProps> = ({
@@ -43,6 +49,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   controls = true,
   showProgress = false,
   muted = false,
+  onContainerClick,
 }) => {
   // --- Derived ---
   const sourceType = getSourceType(mimeType)
@@ -185,13 +192,15 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       tabIndex={0}
       className={`relative cursor-pointer overflow-hidden bg-black ${aspectClass}`}
       style={aspectStyle}
-      onClick={() => {
+      onClick={(e) => {
+        if (onContainerClick) { onContainerClick(e); return }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}
       onKeyDown={(e) => {
         if (e.key !== 'Enter' && e.key !== ' ') return
         e.preventDefault()
+        if (onContainerClick) { onContainerClick(e as unknown as React.MouseEvent); return }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}

package/src/components/LockedAttachment/components/Visitor/Card.tsx

@@ -111,35 +111,35 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
         paymentStatus={paymentStatus}
       />
 
-      <div className="px-4 pb-3 pt-3">
-        <p className="mb-1.5 truncate text-base font-medium text-black">
+      <div className="px-4 pb-3 pt-3 bg-black">
+        <p className="mb-1.5 truncate text-base font-medium text-white">
           {title}
         </p>
         <div className="flex items-center gap-1">
           {renderTypeIcon(mimeType, {
-            className: 'size-5 shrink-0 text-black/55',
+            className: 'size-5 shrink-0 text-white/55',
             weight: 'regular',
           })}
 
           {detail && (
-            <span className="text-xs font-medium text-black/55">{detail}</span>
+            <span className="text-xs font-medium text-white/55">{detail}</span>
           )}
 
           {paymentStatus === 'paid' ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-black/55">&bull;</span>
-              <span className="text-xs font-medium text-[#008236]">
+              <span className="text-xs font-medium text-white/55">&bull;</span>
+              <span className="text-xs font-medium text-[#4ade80]">
                 Purchased
               </span>
               <CheckCircleIcon
-                className="size-4 text-[#008236]"
+                className="size-4 text-[#4ade80]"
                 weight="bold"
               />
             </React.Fragment>
           ) : amountText != null ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-black/55">&bull;</span>
-              <span className="text-xs font-medium text-black/55">
+              <span className="text-xs font-medium text-white/55">&bull;</span>
+              <span className="text-xs font-medium text-white/55">
                 {amountText}
               </span>
             </React.Fragment>

package/src/components/LockedAttachment/components/Visitor/CardActions.tsx

@@ -26,7 +26,7 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
         type="button"
         onClick={onUnlockClicked}
         disabled={isUnlocking}
-        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70"
+        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none text-[#121110] hover:bg-white/90 disabled:opacity-70"
       >
         {isUnlocking ? (
           <LoadingDots />
@@ -47,7 +47,7 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
         target="_blank"
         rel="noopener noreferrer"
         onClick={onDownloadClicked}
-        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none !text-white hover:bg-[#2a2928]"
+        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none !text-[#121110] hover:bg-white/90"
       >
         <DownloadSimpleIcon className="size-4" weight="bold" />
         Download

package/src/components/MediaMessage/MediaMessage.stories.tsx

@@ -84,6 +84,43 @@ const VARIANTS = [
   },
 ] as const
 
+const LINK_VARIANTS = [
+  {
+    label: 'With image',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/brieparsons',
+      title: 'World Famous 3 Bottle Grey Wash Set',
+      text: 'When its time to shade, the World Famous Grey Wash set has you covered.',
+      image_url: 'https://picsum.photos/seed/linkcard/560/315',
+    },
+  },
+  {
+    label: 'No image',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/brieparsons',
+      title: 'World Famous 3 Bottle Grey Wash Set',
+      text: 'When its time to shade, the World Famous Grey Wash set has you covered.',
+    },
+  },
+  {
+    label: 'Title only',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/someone',
+      title: 'Check out my Linktree',
+    },
+  },
+  {
+    label: 'URL only',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/someone',
+    },
+  },
+] as const
+
 // ---------------------------------------------------------------------------
 // Layout primitives
 // ---------------------------------------------------------------------------
@@ -94,11 +131,10 @@ const GridTable: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   </div>
 )
 
-const GridHead = () => (
+const GridHead: React.FC<{ labels: readonly string[] }> = ({ labels }) => (
   <thead>
     <tr>
-      <th className="text-left text-xs font-medium text-black/40 pb-2 w-16" />
-      {VARIANTS.map(({ label }) => (
+      {labels.map((label) => (
         <th key={label} className="text-left text-xs font-medium text-black/40 pb-2">
           {label}
         </th>
@@ -107,22 +143,15 @@ const GridHead = () => (
   </thead>
 )
 
-const RowLabel: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-    {children}
-  </td>
-)
-
 // ---------------------------------------------------------------------------
 // Stories
 // ---------------------------------------------------------------------------
 
-export const Visitor: StoryFn = () => (
+export const Received: StoryFn = () => (
   <GridTable>
-    <GridHead />
+    <GridHead labels={VARIANTS.map((v) => v.label)} />
     <tbody>
       <tr>
-        <RowLabel>Sent</RowLabel>
         {VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
             <MediaMessage
@@ -135,20 +164,19 @@ export const Visitor: StoryFn = () => (
     </tbody>
   </GridTable>
 )
-Visitor.parameters = {
+Received.parameters = {
   docs: {
     description: {
-      story: 'Visitor perspective — messages from the creator, left-aligned with avatar.',
+      story: 'Received messages — left-aligned with avatar, light gray card background.',
     },
   },
 }
 
-export const Creator: StoryFn = () => (
+export const Sent: StoryFn = () => (
   <GridTable>
-    <GridHead />
+    <GridHead labels={VARIANTS.map((v) => v.label)} />
     <tbody>
       <tr>
-        <RowLabel>Sent</RowLabel>
         {VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
             <MediaMessage
@@ -161,10 +189,45 @@ export const Creator: StoryFn = () => (
     </tbody>
   </GridTable>
 )
-Creator.parameters = {
+Sent.parameters = {
+  docs: {
+    description: {
+      story: 'Sent messages — right-aligned, no avatar, black card background.',
+    },
+  },
+}
+
+export const Links: StoryFn = () => (
+  <GridTable>
+    <GridHead labels={LINK_VARIANTS.map((v) => v.label)} />
+    <tbody>
+      <tr>
+        {LINK_VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={false}
+              message={base({ user: SENDER, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        {LINK_VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={true}
+              message={base({ user: ME, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </GridTable>
+)
+Links.parameters = {
   docs: {
     description: {
-      story: 'Creator perspective — own messages, right-aligned, no avatar.',
+      story: 'Link preview cards — top row received, bottom row sent. Shows thumbnail, title, description, and URL with image fallback.',
     },
   },
 }