@linktr.ee/messaging-react 3.12.1 → 3.13.0-rc-1783924547

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CxYkk8Bd.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.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-DJwZVg6y.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.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.d.ts

@@ -206,7 +206,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' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderHeaderTitleBadges' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo' | 'composerInput'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props
@@ -309,8 +309,8 @@ export declare interface ChannelViewProps {
      */
     showStarButton?: boolean;
     /**
-     * Custom badges rendered inline after the participant name in the channel
-     * header title.
+     * @deprecated No longer rendered. The redesigned header shows built-in paid
+     * and starred badges instead. Kept temporarily so existing call sites type-check.
      */
     renderHeaderTitleBadges?: (context: {
         channel: Channel;
@@ -425,10 +425,9 @@ export declare interface ChannelViewProps {
      */
     composerInput?: ComponentType;
     /**
-     * Fired when the participant's name in the channel header is clicked. When
-     * provided, the name renders as a button with a trailing caret (an affordance
-     * for opening participant details / thread content); when omitted, the name
-     * renders as plain text.
+     * Fired when the participant identity in the channel header is clicked. When
+     * provided, the avatar + name pill render as a button with a trailing caret;
+     * when omitted, they render as non-interactive chrome.
      *
      * @example
      * onParticipantNameClick={() => openThreadContentDialog()}

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 u, i as c, 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 b, u as P, v as f, w as x, x as y, y as B, z as S, B as q, D as z, E as D, G as E, H as V } from "./index-thS5zrVb.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 u, i as c, 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 b, u as P, v as f, w as x, x as y, y as B, z as S, B as q, D as z, E as D, G as E, H as V } from "./index-C-dn7Ime.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

package/src/components/ChannelHeaderRedesign.tsx

@@ -58,7 +58,7 @@ interface ChannelHeaderRedesignProps {
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
   showChannelInfo?: boolean
-  onParticipantNameClick: () => void
+  onParticipantNameClick?: () => void
 }
 
 export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
@@ -113,6 +113,58 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
     }
   }
 
+  const identityContent = (
+    <>
+      <Avatar
+        id={participant?.user?.id || channel.id || 'unknown'}
+        name={participantName}
+        image={participantImage}
+        dmAgentEnabled={dmAgentEnabled}
+        shape="circle"
+        size={48}
+        className="-mb-2"
+      />
+      <span className="relative z-10 flex max-w-full flex-col items-center justify-center rounded-full border border-white/10 bg-white/65 py-1.5 pl-3 pr-2 shadow-[0px_0px_0px_0px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)] backdrop-blur-[2px] transition-filter duration-150 group-hover:brightness-95">
+        <span className="flex max-w-full items-center justify-center">
+          <span className="min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90">
+            {participantName}
+          </span>
+          <span className="ml-2 flex gap-1">
+            {isPaidCustomer && (
+              <span
+                aria-label="Paid customer"
+                className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#34C759] text-white"
+              >
+                <CurrencyDollarIcon className="size-2.5" weight="bold" />
+              </span>
+            )}
+            {showStarButton && isStarred && (
+              <span
+                aria-label="Starred conversation"
+                className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#FFD60A] text-white"
+              >
+                <StarIcon className="size-2.5" weight="fill" />
+              </span>
+            )}
+            {onParticipantNameClick && (
+              <CaretRightIcon
+                aria-hidden="true"
+                className="size-4 shrink-0 text-black/65"
+                weight="bold"
+              />
+            )}
+          </span>
+        </span>
+        {dmAgentEnabled && (
+          <span className="mt-1 flex items-center gap-1 px-1 pb-0.5 text-[10px] leading-3 text-black/55">
+            <SparkleIcon className="size-3 shrink-0 text-black/55" />
+            <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
+          </span>
+        )}
+      </span>
+    </>
+  )
+
   return (
     <div
       className={classNames(
@@ -138,58 +190,20 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
         </div>
 
         <div className="flex min-w-0 justify-center" data-dd-privacy="mask">
-          <button
-            type="button"
-            onClick={onParticipantNameClick}
-            aria-label={`View details for ${participantName}`}
-            className="group flex min-w-0 max-w-full appearance-none flex-col items-center border-0 bg-transparent px-2 focus-ring focus-visible:outline-none"
-          >
-            <Avatar
-              id={participant?.user?.id || channel.id || 'unknown'}
-              name={participantName}
-              image={participantImage}
-              dmAgentEnabled={dmAgentEnabled}
-              shape="circle"
-              size={48}
-              className="-mb-2"
-            />
-            <span className="relative z-10 flex max-w-full flex-col items-center justify-center rounded-full border border-white/10 bg-white/65 py-1.5 pl-3 pr-2 shadow-[0px_0px_0px_0px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)] backdrop-blur-[2px] transition-filter duration-150 group-hover:brightness-95">
-              <span className="flex max-w-full items-center justify-center">
-                <span className="min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90">
-                  {participantName}
-                </span>
-                <span className="ml-2 flex gap-1">
-                  {isPaidCustomer && (
-                    <span
-                      aria-label="Paid customer"
-                      className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#34C759] text-white"
-                    >
-                      <CurrencyDollarIcon className="size-2.5" weight="bold" />
-                    </span>
-                  )}
-                  {showStarButton && isStarred && (
-                    <span
-                      aria-label="Starred conversation"
-                      className="flex size-4 shrink-0 items-center justify-center rounded-full bg-[#FFD60A] text-white"
-                    >
-                      <StarIcon className="size-2.5" weight="fill" />
-                    </span>
-                  )}
-                  <CaretRightIcon
-                    aria-hidden="true"
-                    className="size-4 shrink-0 text-black/65"
-                    weight="bold"
-                  />
-                </span>
-              </span>
-              {dmAgentEnabled && (
-                <span className="mt-1 flex items-center gap-1 px-1 pb-0.5 text-[10px] leading-3 text-black/55">
-                  <SparkleIcon className="size-3 shrink-0 text-black/55" />
-                  <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
-                </span>
-              )}
-            </span>
-          </button>
+          {onParticipantNameClick ? (
+            <button
+              type="button"
+              onClick={onParticipantNameClick}
+              aria-label={`View details for ${participantName}`}
+              className="group flex min-w-0 max-w-full appearance-none flex-col items-center border-0 bg-transparent px-2 focus-ring focus-visible:outline-none"
+            >
+              {identityContent}
+            </button>
+          ) : (
+            <div className="flex min-w-0 max-w-full flex-col items-center px-2">
+              {identityContent}
+            </div>
+          )}
         </div>
 
         <div className="flex items-start justify-end gap-2">

package/src/components/ChannelView.stories.tsx

@@ -215,72 +215,77 @@ type TemplateProps = ComponentProps & {
     image?: string
   }
   participantCustomerTag?: string
-  hasScrollableMessages?: boolean
-}
-
-const Template: StoryFn<TemplateProps> = (args) => {
-  const {
-    hasMessages = true,
-    followerStatus,
-    isFrozen = false,
-    participantCustomerTag,
-    hasScrollableMessages,
-    typingUser,
-    ...channelViewProps
-  } = args
-  const [client] = React.useState(() => createMockStreamChatClient(mockUser))
-
-  const [channel, setChannel] = React.useState<ChannelType | null>(null)
+}
 
-  useEffect(() => {
-    createMockChannel(
+const createTemplate = (
+  options: { hasScrollableMessages?: boolean } = {}
+): StoryFn<TemplateProps> => {
+  const Template: StoryFn<TemplateProps> = (args) => {
+    const {
+      hasMessages = true,
+      followerStatus,
+      isFrozen = false,
+      participantCustomerTag,
+      typingUser,
+      ...channelViewProps
+    } = args
+    const [client] = React.useState(() => createMockStreamChatClient(mockUser))
+
+    const [channel, setChannel] = React.useState<ChannelType | null>(null)
+
+    useEffect(() => {
+      createMockChannel(
+        client,
+        hasMessages,
+        followerStatus,
+        isFrozen,
+        participantCustomerTag,
+        options.hasScrollableMessages
+      ).then((mockChannel) => {
+        setChannel(mockChannel)
+      })
+    }, [
       client,
       hasMessages,
       followerStatus,
       isFrozen,
       participantCustomerTag,
-      hasScrollableMessages
-    ).then((mockChannel) => {
-      setChannel(mockChannel)
-    })
-  }, [
-    client,
-    hasMessages,
-    followerStatus,
-    isFrozen,
-    participantCustomerTag,
-    hasScrollableMessages,
-  ])
+    ])
 
-  useEffect(() => {
-    if (!channel || !typingUser) {
-      return
-    }
+    useEffect(() => {
+      if (!channel || !typingUser) {
+        return
+      }
 
-    const timer = setTimeout(() => {
-      client.dispatchEvent({
-        type: 'typing.start',
-        cid: channel.cid,
-        user: typingUser,
-      })
-    }, 0)
+      const timer = setTimeout(() => {
+        client.dispatchEvent({
+          type: 'typing.start',
+          cid: channel.cid,
+          user: typingUser,
+        })
+      }, 0)
 
-    return () => clearTimeout(timer)
-  }, [channel, client, typingUser])
+      return () => clearTimeout(timer)
+    }, [channel, client, typingUser])
 
-  if (!channel) {
-    return <div>Loading...</div>
+    if (!channel) {
+      return <div>Loading...</div>
+    }
+
+    return (
+      <Chat client={client}>
+        <div className="h-screen w-full bg-[#FBFAF9]">
+          <ChannelView {...channelViewProps} channel={channel} />
+        </div>
+      </Chat>
+    )
   }
 
-  return (
-    <Chat client={client}>
-      <div className="h-screen w-full bg-[#FBFAF9]">
-        <ChannelView {...channelViewProps} channel={channel} />
-      </div>
-    </Chat>
-  )
+  return Template
 }
 
+const Template = createTemplate()
+
 export const Default: StoryFn<TemplateProps> = Template.bind({})
 Default.args = {
   showBackButton: false,
@@ -294,7 +299,7 @@ Default.args = {
 Default.parameters = {
   docs: {
     description: {
-      story: 'Default channel view with messages and conversation header.',
+      story: 'Default channel view with messages and the redesigned header.',
     },
   },
 }
@@ -306,7 +311,6 @@ ParticipantIdentityTrigger.args = {
   showBackButton: false,
   showStarButton: true,
   participantCustomerTag: 'CUSTOMER_PAID',
-  hasScrollableMessages: true,
   onParticipantNameClick: () =>
     // eslint-disable-next-line no-alert
     window.alert('Participant details clicked — open Thread content'),
@@ -315,7 +319,22 @@ ParticipantIdentityTrigger.parameters = {
   docs: {
     description: {
       story:
-        'Header with `onParticipantNameClick` set: the redesigned floating header centers the avatar and name pill, shows paid/star badges when present, and fires the callback when clicked (shows an alert here). With the prop omitted (see Default) the previous header remains in use.',
+        'Header with `onParticipantNameClick` set: the avatar and name pill become a button with a trailing caret, and the callback fires on click (shows an alert here).',
+    },
+  },
+}
+
+export const WithScrollableMessageList: StoryFn<TemplateProps> = createTemplate({
+  hasScrollableMessages: true,
+}).bind({})
+WithScrollableMessageList.args = {
+  showBackButton: false,
+}
+WithScrollableMessageList.parameters = {
+  docs: {
+    description: {
+      story:
+        'Long thread that scrolls under the sticky redesigned header.',
     },
   },
 }
@@ -339,27 +358,6 @@ DmAgentHeader.parameters = {
   },
 }
 
-export const WithHeaderTitleBadges: StoryFn<TemplateProps> = Template.bind({})
-WithHeaderTitleBadges.args = {
-  showBackButton: false,
-  renderHeaderTitleBadges: ({ participant }) => (
-    <span
-      aria-label={`${participant?.user?.name ?? 'Participant'} is a customer`}
-      className="flex size-4 items-center justify-center rounded-full bg-[#E8F8EF] text-[10px] font-semibold text-[#136C3A]"
-    >
-      $
-    </span>
-  ),
-}
-WithHeaderTitleBadges.parameters = {
-  docs: {
-    description: {
-      story:
-        'Renders custom badges inline after the participant name in the channel header via renderHeaderTitleBadges.',
-    },
-  },
-}
-
 export const RestrictedOfficialChannel: StoryFn<TemplateProps> = Template.bind(
   {}
 )

package/src/components/ChannelView.test.tsx

@@ -190,24 +190,18 @@ describe('ChannelView', () => {
     expect(lastActionsMenuProps().showReportParticipant).toBe(false)
   })
 
-  it('renders the participant name without an info trigger', () => {
+  it('renders the redesigned header without a participant click trigger by default', () => {
     renderWithProviders(<ChannelView channel={createChannel()} />)
 
-    // The info sidebar was removed, so the participant name is plain text on
-    // both headers — there is no clickable affordance to open a profile
-    // dialog anymore.
     expect(
-      screen.queryByRole('button', { name: /view info for/i })
+      screen.queryByRole('button', { name: /view details for linker/i })
     ).not.toBeInTheDocument()
     expect(screen.getAllByText('Linker').length).toBeGreaterThanOrEqual(1)
 
     const avatars = screen.getAllByTestId('avatar')
     expect(avatars.length).toBeGreaterThanOrEqual(1)
-    expect(avatars[0].parentElement).toHaveClass(
-      'rounded-[12px]',
-      'px-1',
-      'py-0.5'
-    )
+    expect(avatars[0].closest('button')).toBeNull()
+    expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
   })
 
   it('renders the redesigned header button when onParticipantNameClick is provided', () => {
@@ -246,7 +240,6 @@ describe('ChannelView', () => {
         channel={createChannel({
           otherMemberCustomerTag: 'CUSTOMER_PAID',
         })}
-        onParticipantNameClick={vi.fn()}
         showStarButton={true}
       />
     )
@@ -266,14 +259,10 @@ describe('ChannelView', () => {
             } as Channel['state']['messages'][number],
           ],
         })}
-        onParticipantNameClick={vi.fn()}
       />
     )
 
-    const button = screen.getByRole('button', {
-      name: /view details for linker/i,
-    })
-    expect(button.closest('[data-testid="message-list"]')).toBeNull()
+    expect(screen.getByText('Linker').closest('[data-testid="message-list"]')).toBeNull()
   })
 
   it('renders the actions menu by default', () => {
@@ -350,38 +339,36 @@ describe('ChannelView', () => {
     expect(screen.queryByTestId('conversation-footer')).not.toBeInTheDocument()
   })
 
-  it('does not pass starred to avatar when showStarButton is false', () => {
+  it('does not show a starred badge when showStarButton is false', () => {
     mockIsStarred = true
-    const channel = createChannel()
 
     renderWithProviders(
-      <ChannelView channel={channel} showStarButton={false} />
+      <ChannelView channel={createChannel()} showStarButton={false} />
     )
 
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+    expect(
+      screen.queryByLabelText('Starred conversation')
+    ).not.toBeInTheDocument()
   })
 
-  it('passes starred to avatar when showStarButton is true and channel is starred', () => {
+  it('shows a starred badge when showStarButton is true and channel is starred', () => {
     mockIsStarred = true
-    const channel = createChannel()
 
     renderWithProviders(
-      <ChannelView channel={channel} showStarButton={true} />
+      <ChannelView channel={createChannel()} showStarButton={true} />
     )
 
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === true)).toBe(true)
+    expect(screen.getByLabelText('Starred conversation')).toBeInTheDocument()
   })
 
-  it('does not pass starred to avatar by default (showStarButton defaults to false)', () => {
+  it('does not show a starred badge by default (showStarButton defaults to false)', () => {
     mockIsStarred = true
-    const channel = createChannel()
 
-    renderWithProviders(<ChannelView channel={channel} />)
+    renderWithProviders(<ChannelView channel={createChannel()} />)
 
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+    expect(
+      screen.queryByLabelText('Starred conversation')
+    ).not.toBeInTheDocument()
   })
 
   it('passes dmAgentEnabled to avatar when dmAgentEnabled is true for visitor view', () => {