@linktr.ee/messaging-react 3.5.6-rc-1783064039 → 3.5.6-rc-1783097662

package/dist/index.cjs

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

package/package.json

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

package/src/components/AttachmentCard/index.tsx

@@ -57,7 +57,7 @@ const AttachmentCard: React.FC<AttachmentCardProps> = ({
       data-testid={dataTestId}
       className={classNames(
         'relative w-[280px] select-none overflow-hidden rounded-[24px] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]',
-        isDark ? 'bg-[#121110]' : 'bg-white'
+        isDark ? 'bg-[#1e2330]' : 'bg-white'
       )}
     >
       {topLeft ? (

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 {
@@ -212,16 +176,12 @@ type TemplateProps = ComponentProps & {
     name?: string
     image?: string
   }
-  participantCustomerTag?: string
-  hasScrollableMessages?: boolean
 }
 
 const Template: StoryFn<TemplateProps> = (args) => {
   const {
     followerStatus,
     isFrozen = false,
-    participantCustomerTag,
-    hasScrollableMessages,
     typingUser,
     ...channelViewProps
   } = args
@@ -233,27 +193,16 @@ const Template: StoryFn<TemplateProps> = (args) => {
     client.user = mockUser
     return client
   })
-
+  
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {
-    createMockChannel(
-      client,
-      true,
-      followerStatus,
-      isFrozen,
-      participantCustomerTag,
-      hasScrollableMessages
-    ).then((mockChannel) => {
-      setChannel(mockChannel)
-    })
-  }, [
-    client,
-    followerStatus,
-    isFrozen,
-    participantCustomerTag,
-    hasScrollableMessages,
-  ])
+    createMockChannel(client, true, followerStatus, isFrozen).then(
+      (mockChannel) => {
+        setChannel(mockChannel)
+      }
+    )
+  }, [client, followerStatus, isFrozen])
 
   useEffect(() => {
     if (!channel || !typingUser) {
@@ -307,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'),
@@ -318,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.',
     },
   },
 }
@@ -596,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}</>
   ),
@@ -102,11 +100,9 @@ const createChannel = ({
     username: undefined as string | undefined,
     is_account: true,
   },
-  otherMemberCustomerTag,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
   currentUserRole?: 'owner' | 'member'
-  otherMemberCustomerTag?: string
   otherUser?: {
     id: string
     name?: string
@@ -138,7 +134,6 @@ const createChannel = ({
             is_account:
               otherUser.is_account ?? currentUserId === 'visitor-1',
           },
-          customerTag: otherMemberCustomerTag,
           role: currentUserRole === 'owner' ? 'member' : 'owner',
         },
       },
@@ -208,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
@@ -217,42 +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 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'
@@ -498,28 +497,27 @@ 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>
-          )}
+          <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>
 
           {/* Custom Banner/Summary */}
           {renderChannelBanner ? (
@@ -533,33 +531,7 @@ const ChannelViewInner: React.FC<{
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
-            <MessageList
-              head={
-                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}
-                    renderHeaderTitleBadges={renderHeaderTitleBadges}
-                  />
-                ) : undefined
-              }
-              hideDeletedMessages
-              hideNewMessageSeparator={false}
-            />
+            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
           </div>
 
           {renderConversationFooter ? (

package/src/components/CustomLinkPreviewList/CustomLinkPreviewCard.tsx

@@ -23,7 +23,7 @@ const CustomLinkPreviewCard: React.FC<CustomLinkPreviewCardProps> = ({
       href={og_scrape_url}
       target="_blank"
       rel="noopener noreferrer"
-      className="relative block w-full rounded-[24px] bg-[#121110] p-2 no-underline transition-opacity hover:opacity-90"
+      className="relative block w-full rounded-[24px] bg-[#1e2330] p-2 no-underline transition-opacity hover:opacity-90"
     >
       {image_url && (
         <img

package/src/components/CustomLinkPreviewList/index.tsx

@@ -32,19 +32,13 @@ export const CustomLinkPreviewList = () => {
   if (!showLinkPreviews) return null
 
   return (
-    // Layout contract: this list is the composer's *shrinkable* region. The
-    // mobile visitor surface sizes itself to the keyboard-shrunk
-    // visualViewport, so when vertical space runs out this container gives
-    // way (min-h-0) and scrolls, while the textarea + send row stays visible
-    // (shrink-0 in CustomMessageInput). Each card is wrapped in a shrink-0
-    // block so it keeps its intrinsic height and the container scrolls — a
-    // bare flex-column child would be shrunk on the column axis and its
-    // fixed-height hero would spill out of the collapsed card box.
-    <div className="messaging-link-preview-list flex min-h-0 flex-col items-stretch w-full gap-2 mb-4 overflow-y-auto overscroll-contain">
+    <div className="flex flex-col items-stretch w-full gap-2 mb-4">
       {stateLinkPreviews.map((linkPreview) => (
-        <div key={linkPreview.og_scrape_url} className="w-full shrink-0">
-          <CustomLinkPreviewCard link={linkPreview} onDismiss={handleDismiss} />
-        </div>
+        <CustomLinkPreviewCard
+          key={linkPreview.og_scrape_url}
+          link={linkPreview}
+          onDismiss={handleDismiss}
+        />
       ))}
     </div>
   )

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

@@ -247,6 +247,33 @@ WithTipTag.args = {
   ],
 }
 
+export const ThreeConsecutiveSentMessages: StoryFn<TemplateProps> =
+  Template.bind({})
+ThreeConsecutiveSentMessages.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'why is it that the sun',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      text: 'has rays',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-3',
+      text: 'how how how',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-4',
+      text: 'thanks for the note',
+      user: storyUsers.visitor,
+    },
+  ],
+}
+
 export const TipOnly: StoryFn<TemplateProps> = Template.bind({})
 TipOnly.args = {
   messages: [

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

@@ -42,8 +42,8 @@ interface ChatNode {
 }
 
 const TEXT_BG_BY_ROLE: Record<ChatRole, string> = {
-  sender: 'bg-[#121110] text-white',
-  receiver: 'bg-[#e9eaed] text-[#080707]',
+  sender: 'bg-[#1e2330] text-white',
+  receiver: 'bg-[#f2f1ef] text-[#000000]',
 }
 
 const TextBubble: React.FC<{ role: ChatRole; children: React.ReactNode }> = ({

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

@@ -83,7 +83,7 @@ ChatbotReceiverText.parameters = skipInChromatic
 export const ChatbotSenderText: StoryFn<ComponentProps> = (args) => {
   return (
     <div className="p-12">
-      <div className="bg-[#121110] rounded-[24px] px-4 py-3 w-[280px]">
+      <div className="bg-[#1e2330] rounded-[24px] px-4 py-3 w-[280px]">
         <MessageTag {...args} />
       </div>
     </div>
@@ -150,7 +150,7 @@ export const AllVariants: StoryFn = () => {
       </div>
       <div className="flex items-center gap-4">
         <span className="text-sm w-32">Chatbot (sender):</span>
-        <div className="bg-[#121110] rounded-[24px] px-4 py-3 w-[280px]">
+        <div className="bg-[#1e2330] rounded-[24px] px-4 py-3 w-[280px]">
           <MessageTag
             message={createMockMessage({
               metadata: { custom_type: 'MESSAGE_CHATBOT' },

package/src/components/CustomMessageInput/index.tsx

@@ -61,22 +61,14 @@ const CustomMessageInputInner: React.FC = () => {
   } = useComponentContext('CustomMessageInput')
 
   return (
-    // min-h-0 lets the composer shrink under keyboard squeeze (the link
-    // preview list inside is the scrollable region); the textarea + send row
-    // is shrink-0 so it can never be pushed out of view. self-stretch matters
-    // because the parent `.message-input` row uses items-end, which suppresses
-    // the default cross-axis stretch — without it this container keeps its
-    // content height and the squeeze never reaches the preview list. Stream's
-    // <MessageInput> renders its Input directly (context providers only, no
-    // wrapper element), so this is a direct flex item of that row.
     <div
-      className="central-container flex min-h-0 flex-col gap-2 min-w-0 w-full self-stretch p-2 bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]"
+      className="central-container flex flex-col gap-2 min-w-0 w-full p-2 bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]"
       data-dd-privacy="mask"
     >
       <QuotedMessagePreview />
       <CustomLinkPreviewList />
       <AttachmentPreviewList />
-      <div className="flex shrink-0">
+      <div className="flex">
         <div className="w-full ml-2 mr-4 self-center leading-[0]">
           <TextareaComposer
             aria-disabled={disabled || undefined}
@@ -163,12 +155,12 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   }
 
   return (
-    <div className="flex min-h-0 flex-col gap-4 p-4">
+    <div className="flex flex-col gap-4 p-4">
       <div
         // @ts-expect-error Only React 19 onwards has `inert` in its types.
         inert={isFrozen ? '' : undefined}
         aria-disabled={isFrozen || undefined}
-        className="message-input flex min-h-0 items-end gap-4 aria-disabled:opacity-40"
+        className="message-input flex items-end gap-4 aria-disabled:opacity-40"
       >
         {renderActions && (
           <div className="flex h-12 shrink-0 items-center justify-center">

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

@@ -64,7 +64,7 @@ const CardShell: React.FC<CardShellProps> = ({
   const isInteractive = href != null || onClick != null
   const className = classNames(
     SHELL_CLASS,
-    bgClassName ?? (variant === 'dark' ? 'bg-[#121110]' : 'bg-white'),
+    bgClassName ?? (variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white'),
     // `focus-ring` is a design-system utility from the component-library
     // tailwind preset — outline-none + a black 2px focus-visible ring
     // with offset, so keyboard users can see the focused card.

package/src/components/LockedAttachment/components/_shared/LockedCardShell.tsx

@@ -26,7 +26,7 @@ const LockedCardShell: React.FC<LockedCardShellProps> = ({
     className={classNames(
       'relative w-[280px] select-none overflow-hidden rounded-md',
       'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',
-      variant === 'dark' ? 'bg-[#121110]' : 'bg-white'
+      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white'
     )}
   >
     {children}

package/src/components/MediaMessage/index.tsx

@@ -15,7 +15,7 @@ function formatBytes(bytes: number): string {
 }
 
 function linkCardShellClass(isMyMessage: boolean) {
-  const bg = isMyMessage ? 'bg-[#121110]' : 'bg-[#F3F3F1]'
+  const bg = isMyMessage ? 'bg-[#1e2330]' : 'bg-[#F3F3F1]'
   return `w-[280px] select-none overflow-hidden rounded-[24px] ${bg} shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]`
 }
 
@@ -318,6 +318,13 @@ const MediaMessageRoot: React.FC<MediaMessageProps> = ({
         <div className="str-chat__message-bubble-wrapper">
           <div
             className="str-chat__message-bubble"
+            // The visible child is a self-contained AttachmentCard (white /
+            // #1e2330 card with its own shadow + radius), not a speech
+            // bubble, and this wrapper is transparent. Mark it so the
+            // received/sent tail in `styles.css` skips it — otherwise a
+            // tail tinted from the text-bubble surface (#f2f1ef) hangs off
+            // a white card and reads as a detached grey nub.
+            data-attachment-bubble="true"
             style={{ padding: 0, borderRadius: 0, overflow: 'visible', background: 'transparent' }}
           >
             {linkAttachment ? (

package/src/components/MessageAttachment/_shared/Bubble.tsx

@@ -29,8 +29,8 @@ export interface BubbleProps {
 // Colors and metrics tracked from `stream-chat-react`'s default
 // `.str-chat__message-bubble` token set so attachments visually drop
 // into a normal `CustomMessage` thread without any seams:
-//   - light  → `--str-chat__secondary-surface-color` = grey200 (#e9eaed)
-//   - dark   → `.str-chat__message--me` override in `styles.css` (#121110)
+//   - light  → `--str-chat__message-bubble-background-color` in `styles.css` (#f2f1ef)
+//   - dark   → `.str-chat__message--me` override in `styles.css` (#1e2330)
 //   - text padding → `--str-chat__spacing-2 --str-chat__spacing-4` = 8px 16px
 //   - border-radius → `--str-chat__border-radius-md` = 18px
 //
@@ -41,13 +41,13 @@ export interface BubbleProps {
 // rebrand would need to touch every site. A central token would
 // collapse the migration to one definition.
 const BUBBLE_BG_BY_VARIANT: Record<BubbleVariant, string> = {
-  dark: 'bg-[#121110]',
-  light: 'bg-[#e9eaed]',
+  dark: 'bg-[#1e2330]',
+  light: 'bg-[#f2f1ef]',
 }
 
 const BUBBLE_TEXT_BY_VARIANT: Record<BubbleVariant, string> = {
   dark: 'text-white',
-  light: 'text-[#080707]',
+  light: 'text-[#000000]',
 }
 
 const BUBBLE_BORDER_BY_VARIANT: Record<BubbleVariant, string> = {
@@ -104,8 +104,8 @@ const CORNER_CLASSES_BY_SIDE_AND_POSITION: Record<
  * is the file', 'Here is the image').
  *
  * Two visual variants:
- *   - `dark` — sender-side (Composer / Sent), white text on `#121110`.
- *   - `light` — recipient-side (Received), dark text on `#e9eaed`.
+ *   - `dark` — sender-side (Composer / Sent), white text on `#1e2330`.
+ *   - `light` — recipient-side (Received), dark text on `#f2f1ef`.
  *
  * Background colors, padding, border-radius, and inherited font come
  * from the stream-chat-react `.str-chat__message-bubble` token set so

package/src/components/MessageAttachment/_shared/CompactDocumentRow.tsx

@@ -41,11 +41,11 @@ export interface CompactDocumentRowProps {
 // so they stay variant-aware. The title inherits the bubble's text
 // color (set on the parent `Bubble`).
 //
-// `text-black/55` on the `#e9eaed` light bubble lands right at the
+// `text-black/55` on the `#f2f1ef` light bubble lands right at the
 // WCAG AA 4.5:1 small-text threshold (≈4.5:1) — bump to `/65` so
 // the meta line has a comfortable margin on the light bubble. The
-// dark variant (`text-white/55` on `#121110`) already passes AA at
-// ~6:1, so we leave it alone.
+// dark variant (`text-white/55` on `#1e2330`) already passes AA,
+// so we leave it alone.
 const META_CLASS_BY_VARIANT: Record<BubbleVariant, string> = {
   dark: 'text-white/55',
   light: 'text-black/65',