@linktr.ee/messaging-react 3.6.2-rc-1783304704 → 3.6.2

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-ClREqfMm.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CPCX_7gP.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-CxGOKFnx.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-bPlX3Oo5.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.6.2-rc-1783304704",
+  "version": "3.6.2",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1783304704",
+    "@linktr.ee/messaging-core": "^2.2.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomMessage/StreamAttachmentMessage.stories.tsx

@@ -0,0 +1,178 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import classNames from 'classnames'
+import React from 'react'
+import type { Attachment } from 'stream-chat'
+
+import {
+  currentUserArgType,
+  storyUsers,
+  type StoryUser,
+} from '../../stories/decorators/storyUser'
+
+import StreamAttachmentMessage from './StreamAttachmentMessage'
+
+/* ──────────────────────────────────────────────────────────────────
+ * Stories for `StreamAttachmentMessage` — the toolkit-owned renderer
+ * that `CustomMessage` uses for every generic Stream-attachment message
+ * (link OG previews + image / video / audio / pdf / file media).
+ *
+ * Unlike `MessageAttachmentConversations.stories.tsx` — which hand-builds
+ * `MessageAttachment.*` JSX directly — these stories feed raw Stream
+ * `Attachment[]` shapes through `StreamAttachmentMessage` so they exercise
+ * the mapping the component actually owns: ordered segment building,
+ * Stream-attachment → `LinkAttachment` prop mapping, caption
+ * de-duplication (including emoji preservation), and media clustering.
+ *
+ * The component renders bare rows; this wrapper just anchors the run to
+ * the correct chat edge so sent/received read the way they do in-app.
+ * ────────────────────────────────────────────────────────────────── */
+
+const Bubbles: React.FC<{ isMyMessage: boolean; children: React.ReactNode }> = ({
+  isMyMessage,
+  children,
+}) => (
+  <div className="mx-auto max-w-2xl p-12">
+    <div
+      className={classNames(
+        'flex flex-col gap-[2px]',
+        isMyMessage ? 'items-end' : 'items-start'
+      )}
+    >
+      {children}
+    </div>
+  </div>
+)
+
+const Render = (attachments: Attachment[], text?: string): StoryFn<StoryArgs> =>
+  function StreamAttachmentStory({ currentUser }) {
+    const isMyMessage = currentUser.id === storyUsers.creator.id
+    return (
+      <Bubbles isMyMessage={isMyMessage}>
+        <StreamAttachmentMessage
+          groupPosition="single"
+          isMyMessage={isMyMessage}
+          message={{ attachments, text }}
+        />
+      </Bubbles>
+    )
+  }
+
+const HERO = 'https://picsum.photos/seed/og-hero/1200/630'
+const PHOTO = (seed: string) => `https://picsum.photos/seed/${seed}/720/720`
+const VIDEO_SRC = '/video-source.mp4'
+const VIDEO_POSTER = '/video-thumbnail.jpg'
+const PDF_SRC = 'https://www.w3.org/WAI/WCAG21/wcag21.pdf'
+
+const linkAttachment = (overrides: Partial<Attachment> = {}): Attachment => ({
+  type: 'link',
+  og_scrape_url: 'https://linktr.ee/marketplace',
+  title: 'Linktree Marketplace',
+  text: 'Browse the best apps to customize your link in bio.',
+  image_url: HERO,
+  ...overrides,
+})
+
+const imageAttachment = (seed: string): Attachment => ({
+  type: 'image',
+  image_url: PHOTO(seed),
+})
+
+interface StoryArgs {
+  currentUser: StoryUser
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'CustomMessage/StreamAttachmentMessage',
+  argTypes: currentUserArgType,
+  args: { currentUser: storyUsers.creator },
+  parameters: {
+    layout: 'fullscreen',
+    // Story render output embeds live React elements; pin source generation
+    // to the static story code (matches MessageAttachmentConversations).
+    docs: { source: { type: 'code' } },
+  },
+}
+export default meta
+
+/** Link share with an OG image → the featured card layout. */
+export const LinkFeatured = Render([linkAttachment()])
+
+/** Link share with no thumbnail → the classic (compact) card layout. */
+export const LinkClassic = Render([
+  linkAttachment({ image_url: undefined, thumb_url: undefined }),
+])
+
+/**
+ * Link share with an emoji-only caption alongside the URL. The emoji is
+ * real content, so the caption is preserved as a separate bubble beneath
+ * the card (regression guard for the caption-dedup predicate).
+ */
+export const LinkWithEmojiCaption = Render(
+  [linkAttachment({ og_scrape_url: 'https://mrdrnose.itch.io/votv' })],
+  'https://mrdrnose.itch.io/votv 👽'
+)
+
+/**
+ * Caption that is just the link URL → suppressed (the card already shows
+ * the URL, so no duplicate text bubble).
+ */
+export const LinkWithUrlOnlyCaption = Render(
+  [linkAttachment()],
+  'https://linktr.ee/marketplace'
+)
+
+/** Single image attachment. */
+export const SingleImage = Render([imageAttachment('single')])
+
+/** Several images in one message → a clustered image bubble. */
+export const ImageCluster = Render([
+  imageAttachment('cluster-1'),
+  imageAttachment('cluster-2'),
+  imageAttachment('cluster-3'),
+])
+
+/** Video attachment (poster + play affordance). */
+export const Video = Render([
+  {
+    type: 'video',
+    asset_url: VIDEO_SRC,
+    thumb_url: VIDEO_POSTER,
+    mime_type: 'video/mp4',
+    title: 'trailer.mp4',
+  },
+])
+
+/** PDF document attachment with a caption. */
+export const Pdf = Render(
+  [
+    {
+      type: 'file',
+      asset_url: PDF_SRC,
+      mime_type: 'application/pdf',
+      title: 'launch-checklist.pdf',
+      file_size: 142_336,
+    },
+  ],
+  'Section 4 has the details.'
+)
+
+/** Generic (non-PDF) file attachment with a download affordance. */
+export const GenericFile = Render([
+  {
+    type: 'file',
+    asset_url: 'https://cdn.example.com/brand-kit.zip',
+    mime_type: 'application/zip',
+    title: 'brand-kit.zip',
+    file_size: 11_500_000,
+  },
+])
+
+/**
+ * Mixed message — media followed by a link share with a caption. Exercises
+ * ordered-segment building across kinds: the image cluster renders first,
+ * the link card second, and the caption attaches to the last bubble.
+ */
+export const MixedMediaAndLink = Render(
+  [imageAttachment('mixed-1'), imageAttachment('mixed-2'), linkAttachment()],
+  'Check these out 🔥'
+)

package/src/components/CustomMessage/StreamAttachmentMessage.test.tsx

@@ -0,0 +1,186 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import StreamAttachmentMessage, {
+  linkCaptionDuplicatesAttachmentUrl,
+  linkCardPropsFromStreamAttachment,
+} from './StreamAttachmentMessage'
+
+describe('linkCardPropsFromStreamAttachment', () => {
+  it('uses the featured layout when a thumbnail is present', () => {
+    expect(
+      linkCardPropsFromStreamAttachment({
+        type: 'link',
+        og_scrape_url: 'https://linktr.ee/someone',
+        image_url: 'https://cdn.example.com/thumb.jpg',
+      }).layout
+    ).toBe('featured')
+  })
+
+  it('uses the classic layout for a plain link with no thumbnail', () => {
+    expect(
+      linkCardPropsFromStreamAttachment({
+        type: 'link',
+        og_scrape_url: 'https://linktr.ee/someone',
+      }).layout
+    ).toBe('classic')
+  })
+
+  it('keeps the featured layout for a playable clip with no thumbnail so the player renders', () => {
+    expect(
+      linkCardPropsFromStreamAttachment({
+        type: 'link',
+        og_scrape_url: 'https://linktr.ee/someone',
+        asset_url: 'https://cdn.example.com/clip.mp3',
+        mime_type: 'audio/mpeg',
+      }).layout
+    ).toBe('featured')
+  })
+})
+
+describe('linkCaptionDuplicatesAttachmentUrl', () => {
+  it('suppresses captions that are just the link plus punctuation', () => {
+    expect(
+      linkCaptionDuplicatesAttachmentUrl(
+        'https://tr.ee/abc !',
+        'https://tr.ee/abc'
+      )
+    ).toBe(true)
+  })
+
+  it('keeps captions that add emoji after the link', () => {
+    expect(
+      linkCaptionDuplicatesAttachmentUrl(
+        'https://tr.ee/abc 😎',
+        'https://tr.ee/abc'
+      )
+    ).toBe(false)
+  })
+})
+
+describe('StreamAttachmentMessage', () => {
+  it('renders a sent link card and suppresses a URL-only caption', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={true}
+        message={{
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+              text: 'Check out my links',
+              image_url: 'https://cdn.example.com/thumb.jpg',
+            },
+          ],
+          text: 'https://linktr.ee/someone !',
+        }}
+      />
+    )
+
+    expect(
+      screen.getByRole('link', { name: /my linktree/i })
+    ).toHaveAttribute('href', 'https://linktr.ee/someone')
+    expect(screen.queryByText('https://linktr.ee/someone !')).toBeNull()
+  })
+
+  it('keeps an emoji-only caption instead of dropping it', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={false}
+        message={{
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+            },
+          ],
+          text: 'https://linktr.ee/someone 😎',
+        }}
+      />
+    )
+
+    expect(screen.getByText('https://linktr.ee/someone 😎')).toBeInTheDocument()
+  })
+
+  it('renders mixed link and media attachments in order', () => {
+    const { container } = renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={true}
+        message={{
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+            },
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              title: 'Vacation',
+            },
+          ],
+          text: 'caption',
+        }}
+      />
+    )
+
+    const link = screen.getByRole('link', { name: /my linktree/i })
+    const imageBubble = screen.getByTestId('image-attachment')
+
+    expect(link.compareDocumentPosition(imageBubble)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    )
+    expect(container).toHaveTextContent('caption')
+  })
+
+  // The message text must never be dropped when a message carries an
+  // attachment — only genuine URL-only captions are suppressed.
+  it('renders the accompanying message text next to a link attachment', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={true}
+        message={{
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+            },
+          ],
+          text: 'you have to see this',
+        }}
+      />
+    )
+
+    expect(screen.getByText('you have to see this')).toBeInTheDocument()
+  })
+
+  it('renders the accompanying message text next to a media attachment', () => {
+    const { container } = renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={false}
+        message={{
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              title: 'Vacation',
+            },
+          ],
+          text: 'from the trip',
+        }}
+      />
+    )
+
+    expect(container).toHaveTextContent('from the trip')
+  })
+})