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

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-G4pnfm4m.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-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;
 //# 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-BPfehHDD.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-CxGOKFnx.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.6.1",
+  "version": "3.6.2-rc-1783304704",
   "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.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783304704",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelHeaderRedesign.tsx

@@ -0,0 +1,231 @@
+import {
+  ArrowLeftIcon,
+  CaretRightIcon,
+  CurrencyDollarIcon,
+  SparkleIcon,
+  StarIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React from 'react'
+import type { ChannelMemberResponse, Channel as ChannelType } from 'stream-chat'
+import { useChannelStateContext, useChatContext } from 'stream-chat-react'
+
+import { useChannelStar } from '../hooks/useChannelStar'
+import { resolveConversationParticipant } from '../utils/resolveConversationParticipant'
+import { resolveParticipantDisplayName } from '../utils/resolveParticipantDisplayName'
+
+import { Avatar } from './Avatar'
+import { ChannelActionsMenu } from './ChannelActionsMenu'
+
+const ICON_BTN_CLASS =
+  'flex size-10 flex-shrink-0 items-center justify-center rounded-full bg-white/65 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.06),0px_0px_0px_1px_rgba(0,0,0,0.04)] backdrop-blur-[40px] transition-filter duration-150 hover:brightness-95 aria-expanded:brightness-95 focus-ring'
+
+const CUSTOMER_PAID_TAG = 'CUSTOMER_PAID'
+const DM_AGENT_HEADER_HELPER_TEXT = 'Replies instantly with AI assistant'
+
+const isCustomerPaidTag = (value: unknown) =>
+  typeof value === 'string' &&
+  value
+    .trim()
+    .replace(/[\s-]+/g, '_')
+    .toUpperCase() === CUSTOMER_PAID_TAG
+
+const hasCustomerPaidTag = (participant?: ChannelMemberResponse) => {
+  const member = participant as
+    | {
+        customerTag?: unknown
+        customer_tag?: unknown
+      }
+    | undefined
+
+  return [member?.customerTag, member?.customer_tag].some(isCustomerPaidTag)
+}
+
+interface ChannelHeaderRedesignProps {
+  onBack?: () => void
+  showBackButton: boolean
+  showStarButton?: boolean
+  dmAgentEnabled?: boolean
+  onLeaveConversation?: (channel: ChannelType) => void
+  onBlockParticipant?: (participantId?: string) => void
+  showDeleteConversation?: boolean
+  showBlockParticipant?: boolean
+  showReportParticipant?: boolean
+  onDeleteConversationClick?: () => void
+  onBlockParticipantClick?: () => void
+  onReportParticipantClick?: () => void
+  customChannelActions?: React.ReactNode
+  renderChannelActions?: React.ReactNode
+  showChannelInfo?: boolean
+  onParticipantNameClick: () => void
+}
+
+export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
+  onBack,
+  showBackButton,
+  showStarButton = false,
+  dmAgentEnabled = false,
+  onLeaveConversation,
+  onBlockParticipant,
+  showDeleteConversation = true,
+  showBlockParticipant = true,
+  showReportParticipant = true,
+  onDeleteConversationClick,
+  onBlockParticipantClick,
+  onReportParticipantClick,
+  customChannelActions,
+  renderChannelActions,
+  showChannelInfo = true,
+  onParticipantNameClick,
+}) => {
+  const { channel } = useChannelStateContext()
+  const { client } = useChatContext()
+
+  const participant = React.useMemo(
+    () =>
+      resolveConversationParticipant(
+        channel.state?.members,
+        client?.userID,
+        channel.type
+      ),
+    [channel.state?.members, client?.userID, channel.type]
+  )
+
+  const participantName = resolveParticipantDisplayName(participant?.user)
+  const participantImage = participant?.user?.image
+  const isStarred = useChannelStar(channel)
+  const isPaidCustomer = hasCustomerPaidTag(participant)
+
+  const handleStarClick = async () => {
+    try {
+      if (isStarred) {
+        await (channel as ChannelType).unpin()
+      } else {
+        await (channel as ChannelType).pin()
+      }
+    } catch (error) {
+      console.error(
+        '[ChannelHeaderRedesign] Failed to update pinned status:',
+        error
+      )
+    }
+  }
+
+  return (
+    <div className="@container w-full bg-[linear-gradient(180deg,#FBFAF9_0%,rgba(251,250,249,0.92)_58%,rgba(251,250,249,0)_100%)]">
+      <div className="grid min-h-[100px] grid-cols-[minmax(40px,1fr)_auto_minmax(40px,1fr)] items-start pb-2 pt-5 @lg:min-h-[104px] @lg:pt-6">
+        <div className="flex items-start">
+          {showBackButton && (
+            <button
+              className={classNames(
+                ICON_BTN_CLASS,
+                'messaging-channel-view-back-button-mobile messaging-channel-view-back-button-desktop'
+              )}
+              onClick={onBack || (() => {})}
+              type="button"
+              aria-label="Back to conversations"
+            >
+              <ArrowLeftIcon className="size-5 text-black/90" />
+            </button>
+          )}
+        </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>
+        </div>
+
+        <div className="flex items-start justify-end gap-2">
+          {showStarButton && (
+            <button
+              className={ICON_BTN_CLASS}
+              onClick={handleStarClick}
+              type="button"
+              aria-pressed={isStarred}
+              aria-label={
+                isStarred ? 'Unstar conversation' : 'Star conversation'
+              }
+            >
+              <StarIcon
+                className={classNames('size-5', {
+                  'text-[#FFD60A]': isStarred,
+                  'text-black/90': !isStarred,
+                })}
+                weight={isStarred ? 'fill' : 'regular'}
+              />
+            </button>
+          )}
+          {showChannelInfo &&
+            (renderChannelActions !== undefined ? (
+              renderChannelActions
+            ) : (
+              <ChannelActionsMenu
+                channel={channel as ChannelType}
+                participant={participant}
+                showDeleteConversation={showDeleteConversation}
+                showBlockParticipant={showBlockParticipant}
+                showReportParticipant={showReportParticipant}
+                onLeaveConversation={onLeaveConversation}
+                onBlockParticipant={onBlockParticipant}
+                onDeleteConversationClick={onDeleteConversationClick}
+                onBlockParticipantClick={onBlockParticipantClick}
+                onReportParticipantClick={onReportParticipantClick}
+                customChannelActions={customChannelActions}
+                triggerClassName={ICON_BTN_CLASS}
+              />
+            ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ChannelView.stories.tsx

@@ -16,6 +16,7 @@ import { ChannelView } from './ChannelView'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 
 type ComponentProps = React.ComponentProps<typeof ChannelView>
+const SCROLLABLE_MESSAGE_COUNT = 10
 
 const meta: Meta<ComponentProps> = {
   title: 'ChannelView',
@@ -41,7 +42,9 @@ const createMockChannel = async (
   client: StreamChat,
   hasMessages = true,
   followerStatus?: string | boolean,
-  isFrozen = false
+  isFrozen = false,
+  participantCustomerTag?: string,
+  hasScrollableMessages = false
 ) => {
   const participant = mockParticipants[0]
 
@@ -101,6 +104,34 @@ const createMockChannel = async (
           cid: 'messaging:storybook-channel-1',
           mentioned_users: [],
         },
+        ...(hasScrollableMessages
+          ? Array.from({ length: SCROLLABLE_MESSAGE_COUNT }, (_, index) => {
+              const isParticipantMessage = index % 2 === 0
+              const user = isParticipantMessage ? participant : mockUser
+              const text = isParticipantMessage
+                ? `Here is another message to show how the redesigned header floats above the thread (${index + 1}).`
+                : `Replying so the conversation has enough content to scroll under the header (${index + 1}).`
+
+              return {
+                id: `msg-extra-${index + 1}`,
+                text,
+                type: 'regular' as const,
+                created_at: minutesAgo(Math.max(1, 25 - index)),
+                updated_at: minutesAgo(Math.max(1, 25 - index)),
+                user,
+                html: `<p>${text}</p>`,
+                attachments: [],
+                latest_reactions: [],
+                own_reactions: [],
+                reaction_counts: {},
+                reaction_scores: {},
+                reply_count: 0,
+                status: 'received',
+                cid: 'messaging:storybook-channel-1',
+                mentioned_users: [],
+              }
+            })
+          : []),
       ]
     : []
 
@@ -118,7 +149,11 @@ const createMockChannel = async (
   }
 
   // Create a real channel using the client
-  const channel = client.channel('messaging', 'storybook-channel-1', channelData)
+  const channel = client.channel(
+    'messaging',
+    'storybook-channel-1',
+    channelData
+  )
 
   // Mock the watch method to return mocked data
   channel.watch = async () => {
@@ -142,6 +177,7 @@ const createMockChannel = async (
         user_id: participant.id,
         role: 'member',
         is_account: true,
+        customerTag: participantCustomerTag,
       },
     }
     return {
@@ -169,6 +205,7 @@ const createMockChannel = async (
 }
 
 type TemplateProps = ComponentProps & {
+  hasMessages?: boolean
   followerStatus?: string | boolean
   isFrozen?: boolean
   typingUser?: {
@@ -176,12 +213,17 @@ type TemplateProps = ComponentProps & {
     name?: string
     image?: string
   }
+  participantCustomerTag?: string
+  hasScrollableMessages?: boolean
 }
 
 const Template: StoryFn<TemplateProps> = (args) => {
   const {
+    hasMessages = true,
     followerStatus,
     isFrozen = false,
+    participantCustomerTag,
+    hasScrollableMessages,
     typingUser,
     ...channelViewProps
   } = args
@@ -193,16 +235,28 @@ const Template: StoryFn<TemplateProps> = (args) => {
     client.user = mockUser
     return client
   })
-  
+
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {
-    createMockChannel(client, true, followerStatus, isFrozen).then(
-      (mockChannel) => {
-        setChannel(mockChannel)
-      }
-    )
-  }, [client, followerStatus, isFrozen])
+    createMockChannel(
+      client,
+      hasMessages,
+      followerStatus,
+      isFrozen,
+      participantCustomerTag,
+      hasScrollableMessages
+    ).then((mockChannel) => {
+      setChannel(mockChannel)
+    })
+  }, [
+    client,
+    hasMessages,
+    followerStatus,
+    isFrozen,
+    participantCustomerTag,
+    hasScrollableMessages,
+  ])
 
   useEffect(() => {
     if (!channel || !typingUser) {
@@ -256,6 +310,9 @@ export const ParticipantIdentityTrigger: StoryFn<TemplateProps> = Template.bind(
 )
 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'),
@@ -264,7 +321,7 @@ ParticipantIdentityTrigger.parameters = {
   docs: {
     description: {
       story:
-        'Header with `onParticipantNameClick` set: the participant avatar and name render as one button with a trailing caret in both the mobile and desktop header layouts. Click the identity block to fire the callback (shows an alert here). With the prop omitted (see Default) the header remains non-interactive.',
+        '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.',
     },
   },
 }
@@ -542,7 +599,7 @@ const EmptyTemplate: StoryFn<ComponentProps> = (args) => {
     client.user = mockUser
     return client
   })
-  
+
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {

package/src/components/ChannelView.test.tsx

@@ -22,7 +22,9 @@ vi.mock('stream-chat-react', () => ({
   Window: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="window">{children}</div>
   ),
-  MessageList: () => <div data-testid="message-list" />,
+  MessageList: ({ head }: { head?: React.ReactElement }) => (
+    <div data-testid="message-list">{head}</div>
+  ),
   WithComponents: ({ children }: { children: React.ReactNode }) => (
     <>{children}</>
   ),
@@ -94,15 +96,19 @@ vi.mock('../hooks/useChannelStar', () => ({
 const createChannel = ({
   currentUserId = 'visitor-1',
   currentUserRole = 'owner',
+  messages = [],
   otherUser = {
     id: 'linker-1' as const,
     name: 'Linker' as string | undefined,
     username: undefined as string | undefined,
     is_account: true,
   },
+  otherMemberCustomerTag,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
   currentUserRole?: 'owner' | 'member'
+  messages?: Channel['state']['messages']
+  otherMemberCustomerTag?: string
   otherUser?: {
     id: string
     name?: string
@@ -134,11 +140,12 @@ const createChannel = ({
             is_account:
               otherUser.is_account ?? currentUserId === 'visitor-1',
           },
+          customerTag: otherMemberCustomerTag,
           role: currentUserRole === 'owner' ? 'member' : 'owner',
         },
       },
       membership: {},
-      messages: [],
+      messages,
     },
     on: vi.fn(),
     off: vi.fn(),
@@ -203,7 +210,7 @@ describe('ChannelView', () => {
     )
   })
 
-  it('renders the participant name as a button that fires onParticipantNameClick', () => {
+  it('renders the redesigned header button when onParticipantNameClick is provided', () => {
     const onParticipantNameClick = vi.fn()
     renderWithProviders(
       <ChannelView
@@ -212,29 +219,63 @@ describe('ChannelView', () => {
       />
     )
 
-    // Both the mobile and desktop header layouts render the button (one is
-    // hidden via CSS), so there is at least one match.
-    const buttons = screen.getAllByRole('button', {
+    const button = screen.getByRole('button', {
       name: /view details for linker/i,
     })
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
-    expect(buttons[0]).toHaveClass(
+    expect(button).toHaveClass(
       'appearance-none',
       'border-0',
       'bg-transparent',
-      'rounded-[12px]',
-      'px-1',
-      'py-0.5'
+      'flex-col'
     )
 
     const avatars = screen.getAllByTestId('avatar')
     expect(avatars.length).toBeGreaterThanOrEqual(1)
-    expect(avatars[0].closest('button')).toBe(buttons[0])
+    expect(avatars[0].closest('button')).toBe(button)
+    expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
 
-    buttons[0].click()
+    button.click()
     expect(onParticipantNameClick).toHaveBeenCalledTimes(1)
   })
 
+  it('renders redesigned header badges for paid and starred conversations', () => {
+    mockIsStarred = true
+
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel({
+          otherMemberCustomerTag: 'CUSTOMER_PAID',
+        })}
+        onParticipantNameClick={vi.fn()}
+        showStarButton={true}
+      />
+    )
+
+    expect(screen.getByLabelText('Paid customer')).toBeInTheDocument()
+    expect(screen.getByLabelText('Starred conversation')).toBeInTheDocument()
+  })
+
+  it('renders the redesigned header outside MessageList head when all messages are deleted', () => {
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel({
+          messages: [
+            {
+              id: 'deleted-message-1',
+              type: 'deleted',
+            } 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()
+  })
+
   it('renders the actions menu by default', () => {
     renderWithProviders(<ChannelView channel={createChannel()} />)