@linktr.ee/messaging-react 4.1.0-rc-1786608731 → 4.1.0

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D1x28quP.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.MessageBubble=e.MessageBubble;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;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.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-B88BeZjY.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.MessageBubble=e.MessageBubble;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;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.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -208,7 +208,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderMessageInputFooter' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onOutboundClick' | 'resolveOutbound' | 'showChannelInfo' | 'composerInput'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onOutboundClick' | 'resolveOutbound' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.0-rc-1786608731",
+  "version": "4.1.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.4.0-rc-1786608731",
+    "@linktr.ee/messaging-core": "^2.4.0",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/ChannelView.test.tsx

@@ -1,3 +1,4 @@
+import { OFFICIAL_CHANNEL_TYPE } from '@linktr.ee/messaging-taxonomy'
 import React from 'react'
 import type { Channel } from 'stream-chat'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
@@ -131,6 +132,7 @@ vi.mock('../hooks/useChannelStar', () => ({
 const createChannel = ({
   currentUserId = 'visitor-1',
   currentUserRole = 'owner',
+  channelType,
   messages = [],
   otherUser = {
     id: 'linker-1' as const,
@@ -143,6 +145,7 @@ const createChannel = ({
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
   currentUserRole?: 'owner' | 'member'
+  channelType?: string
   messages?: Channel['state']['messages']
   channelCustomerTag?: string
   otherMemberIsFollower?: boolean
@@ -156,6 +159,7 @@ const createChannel = ({
   ({
     id: 'channel-1',
     cid: 'messaging:channel-1',
+    type: channelType,
     data: {
       customer_tag: channelCustomerTag,
     },
@@ -217,6 +221,24 @@ describe('ChannelView', () => {
     expect(lastActionsMenuProps().showReportParticipant).not.toBe(false)
   })
 
+  it('widens the content column in the official (read-only) channel via the width var', () => {
+    const { container } = renderWithProviders(
+      <ChannelView channel={createChannel({ channelType: OFFICIAL_CHANNEL_TYPE })} />
+    )
+
+    const root = container.querySelector('.messaging-channel-view') as HTMLElement
+    expect(root.style.getPropertyValue('--lt-msg-card-width')).toBe('368px')
+  })
+
+  it('leaves the card-width var unset in a regular channel (default widths)', () => {
+    const { container } = renderWithProviders(
+      <ChannelView channel={createChannel({ channelType: 'messaging' })} />
+    )
+
+    const root = container.querySelector('.messaging-channel-view') as HTMLElement
+    expect(root.style.getPropertyValue('--lt-msg-card-width')).toBe('')
+  })
+
   it('hides block and report in the actions menu when restricted', () => {
     renderWithProviders(
       <ChannelView

package/src/components/ChannelView.tsx

@@ -1,3 +1,4 @@
+import { isOfficialChannel } from '@linktr.ee/messaging-taxonomy'
 import classNames from 'classnames'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { Channel as ChannelType } from 'stream-chat'
@@ -379,6 +380,14 @@ export const ChannelView = React.memo<ChannelViewProps>(
       return () => container.removeEventListener('click', handler)
     }, [onMessageLinkClick, channel])
 
+    // The official channel is read-only (no composer), so the design gives its content a
+    // wider column. Publish the width as a CSS var on the channel root; every card/bubble
+    // inside reads `w-[var(--lt-msg-card-width,…)]` and widens. Other channels leave the var
+    // unset and keep their default widths.
+    const messageCardWidthStyle = isOfficialChannel(channel.type)
+      ? ({ '--lt-msg-card-width': '368px' } as React.CSSProperties)
+      : undefined
+
     return (
       <div
         ref={containerRef}
@@ -386,6 +395,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
           'messaging-channel-view h-full flex flex-col',
           className
         )}
+        style={messageCardWidthStyle}
       >
         <DmAgentEnabledContext.Provider value={dmAgentEnabled ?? false}>
           <Channel

package/src/components/LinkAttachment/components/_shared/CardShell.tsx

@@ -65,7 +65,12 @@ export interface CardShellProps {
 export const LOADING_LABEL = 'Loading link preview'
 
 const SHELL_CLASS = classNames(
-  'relative w-[290px] select-none overflow-hidden',
+  // Width is a channel-scoped token: default 290px, but a read-only surface with no
+  // composer (the official channel) sets `--lt-msg-card-width` on its root to widen the
+  // content column (see ChannelView). Consumers that don't set the var keep 290px.
+  // `max-w-full` caps the card to its container so a widened value can never overflow
+  // horizontally on a narrow (sub-393px) viewport — it shrinks to fit instead.
+  'relative w-[var(--lt-msg-card-width,290px)] max-w-full select-none overflow-hidden',
   // 20px corners — no token exists for it in the component-library preset,
   // whose radius scale is sm .5rem / md 1rem / lg 1.5rem / xl 4rem.
   'rounded-[20px]'

package/src/components/MessagingShell/MessagingShell.test.tsx

@@ -169,26 +169,6 @@ describe('MessagingShell', () => {
     )
   })
 
-  it('forwards renderMessageInputFooter through to ChannelView', async () => {
-    queryChannelsMock.mockResolvedValue([makeChannel('existing-1')])
-    const renderMessageInputFooter = vi.fn()
-
-    renderWithProviders(
-      <MessagingShell
-        initialParticipantFilter="other-1"
-        renderMessageInputFooter={renderMessageInputFooter}
-      />
-    )
-
-    await waitFor(() => {
-      expect(screen.getByTestId('channel-view')).toBeInTheDocument()
-    })
-
-    expect(capturedChannelViewProps.renderMessageInputFooter).toBe(
-      renderMessageInputFooter
-    )
-  })
-
   it('does not create the channel again when the load effect re-runs for the same pair (e.g. service identity settles during connect)', async () => {
     queryChannelsMock.mockResolvedValue([])
     startChannelWithParticipantMock.mockResolvedValue(makeChannel('created-1'))

package/src/components/MessagingShell/index.tsx

@@ -22,7 +22,6 @@ import { LoadingState } from './LoadingState'
 export const MessagingShell: React.FC<MessagingShellProps> = ({
   capabilities = {},
   renderMessageInputActions,
-  renderMessageInputFooter,
   renderConversationFooter,
   onChannelSelect,
   onExitConversation,
@@ -250,7 +249,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           channel={selectedChannel}
           key={selectedChannel.id}
           renderMessageInputActions={renderMessageInputActions}
-          renderMessageInputFooter={renderMessageInputFooter}
           renderConversationFooter={renderConversationFooter}
           renderChannelBanner={renderChannelBanner}
           onLeaveConversation={handleExitConversation}

package/src/components/RichCard/RichCard.test.tsx

@@ -25,6 +25,22 @@ describe('RichCard', () => {
     ).toBeInTheDocument()
   })
 
+  it('renders multiline bullet copy as separate lines', async () => {
+    renderWithProviders(
+      <RichCard.Received
+        title="Welcome"
+        subtitle={'👋 Say hello as people arrive\n✨ Spark conversations\n💬 Add automated FAQs'}
+        subtitleLines={6}
+        images={[HERO]}
+      />
+    )
+
+    const card = await screen.findByTestId('rich-card')
+    expect(card).toHaveTextContent('👋 Say hello as people arrive')
+    expect(card).toHaveTextContent('✨ Spark conversations')
+    expect(card).toHaveTextContent('💬 Add automated FAQs')
+  })
+
   it('renders a single hero image for the hero presentation', async () => {
     renderWithProviders(
       <RichCard.Received

package/src/components/RichCard/RichCardBody.tsx

@@ -128,6 +128,7 @@ const RichCardBody: React.FC<RichCardBodyProps> = ({
         <p
           className={classNames(
             SUBTITLE_CLASS,
+            subtitleLines > 1 && 'whitespace-pre-line',
             subtitleLines <= 1 && 'truncate'
           )}
           style={subtitleStyle}

package/src/types.ts

@@ -436,7 +436,6 @@ export interface ChannelViewProps {
 export type ChannelViewPassthroughProps = Pick<
   ChannelViewProps,
   | 'renderMessageInputActions'
-  | 'renderMessageInputFooter'
   | 'renderConversationFooter'
   | 'CustomChannelEmptyState'
   | 'onBlockParticipantClick'