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

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

@@ -247,33 +247,6 @@ 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-[#1e2330] text-white',
-  receiver: 'bg-[#f2f1ef] text-[#000000]',
+  sender: 'bg-[#121110] text-white',
+  receiver: 'bg-[#e9eaed] text-[#080707]',
 }
 
 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-[#1e2330] rounded-[24px] px-4 py-3 w-[280px]">
+      <div className="bg-[#121110] 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-[#1e2330] rounded-[24px] px-4 py-3 w-[280px]">
+        <div className="bg-[#121110] rounded-[24px] px-4 py-3 w-[280px]">
           <MessageTag
             message={createMockMessage({
               metadata: { custom_type: 'MESSAGE_CHATBOT' },

package/src/components/CustomMessageInput/index.tsx

@@ -61,14 +61,22 @@ 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 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)]"
+      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)]"
       data-dd-privacy="mask"
     >
       <QuotedMessagePreview />
       <CustomLinkPreviewList />
       <AttachmentPreviewList />
-      <div className="flex">
+      <div className="flex shrink-0">
         <div className="w-full ml-2 mr-4 self-center leading-[0]">
           <TextareaComposer
             aria-disabled={disabled || undefined}
@@ -155,12 +163,12 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   }
 
   return (
-    <div className="flex flex-col gap-4 p-4">
+    <div className="flex min-h-0 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 items-end gap-4 aria-disabled:opacity-40"
+        className="message-input flex min-h-0 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-[#1e2330]' : 'bg-white'),
+    bgClassName ?? (variant === 'dark' ? 'bg-[#121110]' : '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-[#1e2330]' : 'bg-white'
+      variant === 'dark' ? 'bg-[#121110]' : '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-[#1e2330]' : 'bg-[#F3F3F1]'
+  const bg = isMyMessage ? 'bg-[#121110]' : '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,13 +318,6 @@ 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__message-bubble-background-color` in `styles.css` (#f2f1ef)
-//   - dark   → `.str-chat__message--me` override in `styles.css` (#1e2330)
+//   - light  → `--str-chat__secondary-surface-color` = grey200 (#e9eaed)
+//   - dark   → `.str-chat__message--me` override in `styles.css` (#121110)
 //   - 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-[#1e2330]',
-  light: 'bg-[#f2f1ef]',
+  dark: 'bg-[#121110]',
+  light: 'bg-[#e9eaed]',
 }
 
 const BUBBLE_TEXT_BY_VARIANT: Record<BubbleVariant, string> = {
   dark: 'text-white',
-  light: 'text-[#000000]',
+  light: 'text-[#080707]',
 }
 
 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 `#1e2330`.
- *   - `light` — recipient-side (Received), dark text on `#f2f1ef`.
+ *   - `dark` — sender-side (Composer / Sent), white text on `#121110`.
+ *   - `light` — recipient-side (Received), dark text on `#e9eaed`.
  *
  * 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 `#f2f1ef` light bubble lands right at the
+// `text-black/55` on the `#e9eaed` 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 `#1e2330`) already passes AA,
-// so we leave it alone.
+// dark variant (`text-white/55` on `#121110`) already passes AA at
+// ~6:1, so we leave it alone.
 const META_CLASS_BY_VARIANT: Record<BubbleVariant, string> = {
   dark: 'text-white/55',
   light: 'text-black/65',

package/src/styles.css

@@ -8,10 +8,10 @@
   --str-chat__font-family: inherit;
 
   --str-chat__message-bubble-border-radius: 1.5rem;
-  --str-chat__message-bubble-background-color: #f2f1ef;
-  --str-chat__message-bubble-color: #000000;
+  --str-chat__message-bubble-background-color: #f1f0ee;
+  --str-chat__message-bubble-color: #181818;
 
-  --str-chat__own-message-bubble-background-color: #1e2330;
+  --str-chat__own-message-bubble-background-color: #121110;
   --str-chat__own-message-bubble-color: #fff;
 }
 
@@ -560,36 +560,7 @@
 
 .str-chat__message .str-chat__message-bubble {
   font-size: 0.875rem;
-  line-height: 1.3125rem;
-  letter-spacing: 0.14px;
-}
-
-/* Keep every bubble a full pill regardless of its position in a same-author
-   run. stream-chat-react's default theme flattens the inner corners of
-   grouped bubbles (bottom-/top-inline-end for `--me`, inline-start for
-   `--other`) via `.str-chat__li--{top,middle,bottom} .str-chat__message--{me,other}
-   .str-chat__message-bubble` rules at specificity (0,3,0). We prepend the
-   `.str-chat` root class to reach (0,4,0) so this wins independently of
-   stylesheet load order and restores the fully-rounded pill from the Figma
-   spec — only the trailing bubble's tail (`::after`, below) breaks the pill. */
-.str-chat .str-chat__li--single .str-chat__message--me .str-chat__message-bubble,
-.str-chat .str-chat__li--top .str-chat__message--me .str-chat__message-bubble,
-.str-chat .str-chat__li--middle .str-chat__message--me .str-chat__message-bubble,
-.str-chat .str-chat__li--bottom .str-chat__message--me .str-chat__message-bubble,
-.str-chat
-  .str-chat__li--single
-  .str-chat__message--other
-  .str-chat__message-bubble,
-.str-chat .str-chat__li--top .str-chat__message--other .str-chat__message-bubble,
-.str-chat
-  .str-chat__li--middle
-  .str-chat__message--other
-  .str-chat__message-bubble,
-.str-chat
-  .str-chat__li--bottom
-  .str-chat__message--other
-  .str-chat__message-bubble {
-  border-radius: var(--str-chat__message-bubble-border-radius);
+  line-height: 1.25rem;
 }
 
 /* Chatbot reply markdown — restore semantics that consumer Tailwind preflight
@@ -702,71 +673,15 @@
     margin-block-end: 0.875rem;
   }
 
-  /* `:not([data-attachment-bubble])` keeps the tail off self-contained
-     attachment/media cards (see `MediaMessage`): those render their own
-     shadowed card inside a transparent bubble, so a tail tinted from the
-     text-bubble surface would hang off the card rather than read as part
-     of it. Only genuine text/message bubbles get a tail. */
-  .str-chat__message--other
-    .str-chat__message-bubble-wrapper
-    > .str-chat__message-bubble:last-child:not([data-attachment-bubble]) {
-    position: relative;
-    /* Form a stacking context so the `z-index: -1` tail below paints
-       *after* this bubble's own (opaque, same-color) background but
-       *behind* its in-flow content. Without this the tail would either
-       sit on top of content (a positioned pseudo-element paints above
-       in-flow siblings — switching to `::before` would NOT change that)
-       or drop behind the whole bubble. This matters most for the
-       zero-padding `MediaMessageRoot` bubble, whose media card reaches
-       the corner: the tail must tuck behind the card, not cover it. */
-    isolation: isolate;
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset-block-end: 0;
-      inset-inline-start: calc(-1 * 0.25rem);
-      z-index: -1;
-      width: 1.25rem;
-      height: 1.4375rem;
-      background-color: var(--str-chat__message-bubble-background-color);
-      pointer-events: none;
-      transform: scaleX(-1);
-      transform-origin: center;
-      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E")
-        no-repeat center / 100% 100%;
-      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E")
-        no-repeat center / 100% 100%;
-    }
+  .str-chat__message--other .str-chat__message-bubble {
+    border-end-start-radius: var(--str-chat__message-bubble-border-radius);
   }
 
-  .str-chat__message--me
-    .str-chat__message-bubble-wrapper
-    > .str-chat__message-bubble:last-child:not([data-attachment-bubble]) {
-    position: relative;
-    /* See the `--other` rule above: stacking context so the tail tucks
-       behind in-flow content (e.g. the corner of a zero-padding
-       `MediaMessageRoot` card) instead of painting over it. */
-    isolation: isolate;
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset-block-end: 0;
-      inset-inline-end: calc(-1 * 0.25rem);
-      z-index: -1;
-      width: 1.25rem;
-      height: 1.4375rem;
-      background-color: var(--str-chat__own-message-bubble-background-color);
-      pointer-events: none;
-      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E")
-        no-repeat center / 100% 100%;
-      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E")
-        no-repeat center / 100% 100%;
-    }
+  .str-chat__message--me .str-chat__message-bubble {
+    border-end-end-radius: var(--str-chat__message-bubble-border-radius);
   }
-
 }
+
 /* Locked attachment wrapper: stack card + text bubble in the correct direction */
 .str-chat__li .str-chat__message--me .str-chat__message-bubble-wrapper {
   display: flex;