@linktr.ee/messaging-react 3.5.7-rc-1783068568 → 3.5.7-rc-1783071111

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-BflWZq0e.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-BXzwYXLT.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

package/src/components/ChannelView.stories.tsx

@@ -16,7 +16,6 @@ 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',
@@ -42,9 +41,7 @@ const createMockChannel = async (
   client: StreamChat,
   hasMessages = true,
   followerStatus?: string | boolean,
-  isFrozen = false,
-  participantCustomerTag?: string,
-  hasScrollableMessages = false
+  isFrozen = false
 ) => {
   const participant = mockParticipants[0]
 
@@ -104,34 +101,6 @@ 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: [],
-              }
-            })
-          : []),
       ]
     : []
 
@@ -149,11 +118,7 @@ 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 () => {
@@ -177,7 +142,6 @@ const createMockChannel = async (
         user_id: participant.id,
         role: 'member',
         is_account: true,
-        customerTag: participantCustomerTag,
       },
     }
     return {
@@ -205,7 +169,6 @@ const createMockChannel = async (
 }
 
 type TemplateProps = ComponentProps & {
-  hasMessages?: boolean
   followerStatus?: string | boolean
   isFrozen?: boolean
   typingUser?: {
@@ -213,17 +176,12 @@ 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
@@ -235,28 +193,16 @@ const Template: StoryFn<TemplateProps> = (args) => {
     client.user = mockUser
     return client
   })
-
+  
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {
-    createMockChannel(
-      client,
-      hasMessages,
-      followerStatus,
-      isFrozen,
-      participantCustomerTag,
-      hasScrollableMessages
-    ).then((mockChannel) => {
-      setChannel(mockChannel)
-    })
-  }, [
-    client,
-    hasMessages,
-    followerStatus,
-    isFrozen,
-    participantCustomerTag,
-    hasScrollableMessages,
-  ])
+    createMockChannel(client, true, followerStatus, isFrozen).then(
+      (mockChannel) => {
+        setChannel(mockChannel)
+      }
+    )
+  }, [client, followerStatus, isFrozen])
 
   useEffect(() => {
     if (!channel || !typingUser) {
@@ -310,9 +256,6 @@ 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'),
@@ -321,7 +264,7 @@ 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 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.',
     },
   },
 }
@@ -599,7 +542,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,9 +22,7 @@ vi.mock('stream-chat-react', () => ({
   Window: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="window">{children}</div>
   ),
-  MessageList: ({ head }: { head?: React.ReactElement }) => (
-    <div data-testid="message-list">{head}</div>
-  ),
+  MessageList: () => <div data-testid="message-list" />,
   WithComponents: ({ children }: { children: React.ReactNode }) => (
     <>{children}</>
   ),
@@ -96,19 +94,15 @@ 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
@@ -140,12 +134,11 @@ 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(),
@@ -210,7 +203,7 @@ describe('ChannelView', () => {
     )
   })
 
-  it('renders the redesigned header button when onParticipantNameClick is provided', () => {
+  it('renders the participant name as a button that fires onParticipantNameClick', () => {
     const onParticipantNameClick = vi.fn()
     renderWithProviders(
       <ChannelView
@@ -219,63 +212,29 @@ describe('ChannelView', () => {
       />
     )
 
-    const button = screen.getByRole('button', {
+    // 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', {
       name: /view details for linker/i,
     })
-    expect(button).toHaveClass(
+    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(buttons[0]).toHaveClass(
       'appearance-none',
       'border-0',
       'bg-transparent',
-      'flex-col'
+      'rounded-[12px]',
+      'px-1',
+      'py-0.5'
     )
 
     const avatars = screen.getAllByTestId('avatar')
     expect(avatars.length).toBeGreaterThanOrEqual(1)
-    expect(avatars[0].closest('button')).toBe(button)
-    expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
+    expect(avatars[0].closest('button')).toBe(buttons[0])
 
-    button.click()
+    buttons[0].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()} />)
 

package/src/components/ChannelView.tsx

@@ -25,7 +25,6 @@ import { resolveParticipantDisplayName } from '../utils/resolveParticipantDispla
 
 import { Avatar } from './Avatar'
 import { ChannelActionsMenu } from './ChannelActionsMenu'
-import { ChannelHeaderRedesign } from './ChannelHeaderRedesign'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
 import { CustomMessageActions } from './CustomMessage/CustomMessageActions'
@@ -465,34 +464,6 @@ const ChannelViewInner: React.FC<{
     dmAgentEnabled &&
     currentUserIsAccount === false &&
     participantIsAccount === true
-  const hasVisibleMessages = channel.state.messages.some(
-    (message) => message.type !== 'deleted'
-  )
-  const channelBanner = renderChannelBanner ? (
-    <React.Fragment key="lt-channel-banner">
-      {renderChannelBanner()}
-    </React.Fragment>
-  ) : null
-  const redesignedHeader = onParticipantNameClick ? (
-    <ChannelHeaderRedesign
-      onBack={onBack}
-      showBackButton={showBackButton}
-      showChannelInfo={showChannelInfo}
-      showStarButton={showStarButton}
-      dmAgentEnabled={showDmAgentHeader}
-      onLeaveConversation={onLeaveConversation}
-      onBlockParticipant={onBlockParticipant}
-      showDeleteConversation={showDeleteConversation}
-      showBlockParticipant={showBlockParticipant}
-      showReportParticipant={showReportParticipant}
-      onDeleteConversationClick={onDeleteConversationClick}
-      onBlockParticipantClick={onBlockParticipantClick}
-      onReportParticipantClick={onReportParticipantClick}
-      customChannelActions={customChannelActions}
-      renderChannelActions={renderChannelActions}
-      onParticipantNameClick={onParticipantNameClick}
-    />
-  ) : null
 
   // Prevents all message instances from unmounting when ChannelViewInner re-renders
   const MessageOverride = useCallback(
@@ -526,58 +497,41 @@ const ChannelViewInner: React.FC<{
       >
         <Window>
           {/* Custom Channel Header */}
-          {!onParticipantNameClick && (
-            <>
-              <div key="lt-channel-header">
-                <CustomChannelHeader
-                  onBack={onBack}
-                  showBackButton={showBackButton}
-                  showChannelInfo={showChannelInfo}
-                  showStarButton={showStarButton}
-                  dmAgentEnabled={showDmAgentHeader}
-                  onLeaveConversation={onLeaveConversation}
-                  onBlockParticipant={onBlockParticipant}
-                  showDeleteConversation={showDeleteConversation}
-                  showBlockParticipant={showBlockParticipant}
-                  showReportParticipant={showReportParticipant}
-                  onDeleteConversationClick={onDeleteConversationClick}
-                  onBlockParticipantClick={onBlockParticipantClick}
-                  onReportParticipantClick={onReportParticipantClick}
-                  customChannelActions={customChannelActions}
-                  renderChannelActions={renderChannelActions}
-                  renderHeaderTitleBadges={renderHeaderTitleBadges}
-                />
-              </div>
-              {channelBanner}
-            </>
-          )}
+          <div key="lt-channel-header">
+            <CustomChannelHeader
+              onBack={onBack}
+              showBackButton={showBackButton}
+              showChannelInfo={showChannelInfo}
+              showStarButton={showStarButton}
+              dmAgentEnabled={showDmAgentHeader}
+              onLeaveConversation={onLeaveConversation}
+              onBlockParticipant={onBlockParticipant}
+              showDeleteConversation={showDeleteConversation}
+              showBlockParticipant={showBlockParticipant}
+              showReportParticipant={showReportParticipant}
+              onDeleteConversationClick={onDeleteConversationClick}
+              onBlockParticipantClick={onBlockParticipantClick}
+              onReportParticipantClick={onReportParticipantClick}
+              customChannelActions={customChannelActions}
+              renderChannelActions={renderChannelActions}
+              onParticipantNameClick={onParticipantNameClick}
+              renderHeaderTitleBadges={renderHeaderTitleBadges}
+            />
+          </div>
 
-          {/* Stream only renders MessageList.head when there are messages, so
-              empty redesigned channels need the header and banner in normal flow. */}
-          {onParticipantNameClick && !hasVisibleMessages && (
-            <div className="px-4 @lg:px-6">
-              {redesignedHeader}
-              {channelBanner}
-            </div>
-          )}
+          {/* Custom Banner/Summary */}
+          {renderChannelBanner ? (
+            <React.Fragment key="lt-channel-banner">
+              {renderChannelBanner()}
+            </React.Fragment>
+          ) : null}
 
           {/* Message List */}
           <div
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
-            <MessageList
-              head={
-                onParticipantNameClick && hasVisibleMessages ? (
-                  <div className="sticky top-0 z-10">
-                    {redesignedHeader}
-                    {channelBanner}
-                  </div>
-                ) : undefined
-              }
-              hideDeletedMessages
-              hideNewMessageSeparator={false}
-            />
+            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
           </div>
 
           {renderConversationFooter ? (

package/src/styles.css

@@ -299,6 +299,24 @@
   background-color: transparent;
 }
 
+/* iOS/WebKit soft-keyboard safety: complete the flex-column min-height chain.
+   WebKit (every iOS browser — Safari and in-app browsers alike) won't shrink a
+   flex child below its content height unless each ancestor in the column opts
+   out of the default `min-height: auto`. Stream sets `height: 100%` on this
+   container chain but no `min-height`, and only `.str-chat__main-panel-inner`
+   ships `min-height: 0`. Without completing the chain above it, a keyboard-
+   shrunk surface can't squeeze `main-panel`, so the composer's link-preview
+   list keeps its full height and pushes the textarea + send button below the
+   keyboard (the composer internals already handle their own squeeze via
+   `min-h-0` in CustomMessageInput — this lets that squeeze actually reach them).
+   Chromium is lenient here, so this only manifests on-device. */
+.str-chat,
+.str-chat__channel,
+.str-chat__channel .str-chat__container,
+.str-chat__channel .str-chat__container .str-chat__main-panel {
+  min-height: 0;
+}
+
 .str-chat__message.str-chat__message--me {
   .str-chat__attachment-list .str-chat__message-attachment--card {
     color: white;