@linktr.ee/messaging-react 3.9.2 → 3.10.0-rc-1783605409

package/dist/index.cjs

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

@@ -1166,6 +1166,50 @@ export declare type MessageAttachmentVideoReceivedProps = VideoAttachmentSharedP
 
 export declare type MessageAttachmentVideoSentProps = VideoAttachmentSharedProps;
 
+/**
+ * A dumb, context-free chat message bubble for rendering a single message row
+ * *outside* a live channel — previews, digests, confirmation dialogs, the
+ * Stacks "responded" summary, etc. Unlike `ChannelView`, it needs no Stream
+ * client or provider.
+ *
+ * Render `MessageBubble.Sent` for the sender's own treatment (dark, right
+ * tail) and `MessageBubble.Received` for the recipient's (light, left tail,
+ * optional header). Surface colours, radius, typography, and the tail
+ * silhouette are shared with the in-channel bubble drawn by `CustomMessage`,
+ * so previews stay pixel-identical and re-theme from one source of truth.
+ *
+ * The variant is a **visual treatment, not an authorship claim**: to preview
+ * an outgoing message as the recipient will see it, render
+ * `MessageBubble.Received` with your own text.
+ */
+export declare const MessageBubble: {
+    Sent: FC<SentBubbleProps>;
+    Received: FC<ReceivedBubbleProps>;
+};
+
+export declare interface MessageBubbleBaseProps {
+    /**
+     * Message body. Rendered verbatim with `whitespace-pre-wrap` (newlines
+     * preserved); this is a dumb component, so no markdown / link parsing.
+     */
+    text: string;
+    /**
+     * Draw the bubble tail at the bottom corner. `sent` tails point
+     * bottom-right, `received` bottom-left. Defaults to `true`.
+     */
+    tail?: boolean;
+    /** Extra classes on the outer bubble (e.g. `max-w-[520px]`). */
+    className?: string;
+}
+
+/**
+ * Which visual treatment the bubble paints. This is decoupled from message
+ * *authorship*: it selects a side + colour, not who wrote the text. To preview
+ * an outgoing message as the recipient will see it (e.g. a bulk-reply
+ * confirmation), render the `received` treatment with your own text.
+ */
+export declare type MessageBubbleVariant = 'sent' | 'received';
+
 declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | 'MESSAGE_ATTACHMENT' | AgeSafetySystemType | DmAgentSystemType;
 
 /**
@@ -1396,6 +1440,14 @@ declare interface PdfAttachmentSharedProps extends MessageAttachmentBaseProps {
     onClick?: (index: number) => boolean | void;
 }
 
+export declare interface ReceivedBubbleProps extends MessageBubbleBaseProps {
+    /**
+     * Optional header rendered above the text inside the bubble — used by the
+     * Stacks message list to show the sender's name. Omit for a plain bubble.
+     */
+    header?: default_2.ReactNode;
+}
+
 export declare interface ReceivedCardProps extends LockedAttachmentBaseProps {
     /**
      * Called when the recipient clicks Unlock on an unpaid attachment.
@@ -1443,6 +1495,9 @@ export declare function resolveMediaFromMessage(message: LocalMessage): MediaMes
  */
 export declare function resolveParticipantDisplayName(user?: ParticipantDisplayUser | null): string;
 
+export declare interface SentBubbleProps extends MessageBubbleBaseProps {
+}
+
 export declare interface SentCardProps extends LockedAttachmentBaseProps {
     /** Placeholder shown in the title slot when no title is set. */
     placeholderTitle?: string;

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-CPbf44kW.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-DSY7bIL-.js";
 export {
   e as ActionButton,
   t as Avatar,
@@ -10,27 +10,28 @@ export {
   g as FaqListItem,
   l as LinkAttachment,
   M as LockedAttachment,
-  c as MediaMessage,
-  u as MessageAttachment,
-  L as MessageVoteButtons,
-  h as MessagingProvider,
-  d as MessagingShell,
-  p as buildCompactMetaLabel,
-  v as formatFileSize,
-  C as formatRelativeTime,
-  A as getFileExtensionLabel,
-  k as getMessageDisplayText,
-  F as isLinkAttachment,
+  u as MediaMessage,
+  c as MessageAttachment,
+  L as MessageBubble,
+  h as MessageVoteButtons,
+  d as MessagingProvider,
+  p as MessagingShell,
+  v as buildCompactMetaLabel,
+  C as formatFileSize,
+  A as formatRelativeTime,
+  k as getFileExtensionLabel,
+  F as getMessageDisplayText,
+  b as isLinkAttachment,
   P as isUuidLike,
-  b as messageAttachmentGroupPositionFromStream,
-  f as normalizeLanguageCode,
-  x as resolveConversationParticipant,
-  y as resolveLinkAttachment,
+  f as messageAttachmentGroupPositionFromStream,
+  x as normalizeLanguageCode,
+  y as resolveConversationParticipant,
+  B as resolveLinkAttachment,
   S as resolveMediaFromMessage,
   q as resolveParticipantDisplayName,
   z as useComposerLocked,
-  B as useCustomMessage,
-  D as useMessageVote,
-  E as useMessaging
+  D as useCustomMessage,
+  E as useMessageVote,
+  V as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.9.2",
+  "version": "3.10.0-rc-1783605409",
   "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-1783605409",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/MessageBubble/MessageBubble.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import MessageBubble from '.'
+
+const meta: Meta = {
+  title: 'MessageBubble',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const Canvas = ({ children }: { children: React.ReactNode }) => (
+  <div className="min-h-screen w-full space-y-6 bg-[#F9F7F4] p-12">
+    {children}
+  </div>
+)
+
+const Row = ({
+  label,
+  align = 'start',
+  children,
+}: {
+  label: string
+  align?: 'start' | 'end'
+  children: React.ReactNode
+}) => (
+  <div>
+    <p className="mb-2 text-xs font-medium text-black/40">{label}</p>
+    <div
+      className={`flex ${align === 'end' ? 'justify-end' : 'justify-start'}`}
+    >
+      {children}
+    </div>
+  </div>
+)
+
+const SHORT = 'Hey! Thanks for reaching out 👋'
+const LONG =
+  'Absolutely — I have a couple of slots free next week. Happy to send over the full brief and pricing so you can take a look before we lock anything in.'
+const MULTILINE = 'Line one\nLine two\nLine three'
+
+/** Design-review matrix: both variants across tail, length, and header. */
+export const Gallery: StoryFn = () => (
+  <Canvas>
+    <Row label="Received — short" align="start">
+      <MessageBubble.Received text={SHORT} />
+    </Row>
+    <Row label="Received — with header (sender name)" align="start">
+      <MessageBubble.Received header="Brie" text={LONG} className="max-w-[520px]" />
+    </Row>
+    <Row label="Received — no tail" align="start">
+      <MessageBubble.Received text={SHORT} tail={false} />
+    </Row>
+    <Row label="Sent — short" align="end">
+      <MessageBubble.Sent text={SHORT} />
+    </Row>
+    <Row label="Sent — long" align="end">
+      <MessageBubble.Sent text={LONG} className="max-w-[520px]" />
+    </Row>
+    <Row label="Sent — multiline" align="end">
+      <MessageBubble.Sent text={MULTILINE} />
+    </Row>
+    <Row label="Sent — no tail" align="end">
+      <MessageBubble.Sent text={SHORT} tail={false} />
+    </Row>
+  </Canvas>
+)
+
+/**
+ * Stacks bulk-reply confirmation: preview an outgoing message as the *visitor*
+ * will receive it — the recipient (grey, left) treatment despite being your
+ * own text.
+ */
+export const PreviewToRecipient: StoryFn = () => (
+  <Canvas>
+    <Row label="How your reply will look to the visitor" align="start">
+      <MessageBubble.Received
+        text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶"
+        className="max-w-[520px]"
+      />
+    </Row>
+  </Canvas>
+)
+
+/**
+ * Stacks responded-summary: preview a sent reply as it looks *to you in the
+ * channel* — the sender (dark, right) treatment.
+ */
+export const PreviewInChannel: StoryFn = () => (
+  <Canvas>
+    <Row label="How your reply looks to you in the channel" align="end">
+      <MessageBubble.Sent
+        text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶"
+        className="max-w-[520px]"
+      />
+    </Row>
+  </Canvas>
+)

package/src/components/MessageBubble/MessageBubble.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import MessageBubble from '.'
+
+describe('MessageBubble', () => {
+  it('renders the message text', () => {
+    renderWithProviders(<MessageBubble.Sent text="Hello there" />)
+    expect(screen.getByText('Hello there')).toBeInTheDocument()
+  })
+
+  it('preserves newlines with whitespace-pre-wrap', () => {
+    renderWithProviders(<MessageBubble.Sent text={'line one\nline two'} />)
+    const paragraph = screen.getByText(/line one/)
+    expect(paragraph.textContent).toBe('line one\nline two')
+    expect(paragraph.className).toContain('whitespace-pre-wrap')
+  })
+
+  it('draws the tail by default and omits it when tail is false', () => {
+    const { rerender } = renderWithProviders(
+      <MessageBubble.Sent text="tailed" />
+    )
+    // The bubble box wraps the text; its last child is the tail <span>.
+    const bubble = screen.getByText('tailed').parentElement as HTMLElement
+    expect(bubble.querySelector('span[aria-hidden="true"]')).not.toBeNull()
+
+    rerender(<MessageBubble.Sent text="tailed" tail={false} />)
+    const bubbleNoTail = screen.getByText('tailed').parentElement as HTMLElement
+    expect(bubbleNoTail.querySelector('span[aria-hidden="true"]')).toBeNull()
+  })
+
+  it('renders the optional header on the received variant', () => {
+    renderWithProviders(
+      <MessageBubble.Received header="Brie" text="How much for a feature?" />
+    )
+    expect(screen.getByTestId('message-bubble-header')).toHaveTextContent(
+      'Brie'
+    )
+  })
+
+  it('does not render a header slot when no header is provided', () => {
+    renderWithProviders(<MessageBubble.Received text="no header" />)
+    expect(screen.queryByTestId('message-bubble-header')).toBeNull()
+  })
+
+  it('applies the sent and received surface treatments from theme vars', () => {
+    const { rerender } = renderWithProviders(
+      <MessageBubble.Sent text="mine" />
+    )
+    const sent = screen.getByText('mine').parentElement as HTMLElement
+    expect(sent.style.backgroundColor).toBe(
+      'var(--str-chat__own-message-bubble-background-color, #1e2330)'
+    )
+
+    rerender(<MessageBubble.Received text="theirs" />)
+    const received = screen.getByText('theirs').parentElement as HTMLElement
+    expect(received.style.backgroundColor).toBe(
+      'var(--str-chat__message-bubble-background-color, #f1f0ee)'
+    )
+  })
+
+  it('forwards className onto the bubble box', () => {
+    renderWithProviders(
+      <MessageBubble.Sent text="wide" className="max-w-[520px]" />
+    )
+    const bubble = screen.getByText('wide').parentElement as HTMLElement
+    expect(bubble.className).toContain('max-w-[520px]')
+  })
+})

package/src/components/MessageBubble/components/Received/Card.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import type { ReceivedBubbleProps } from '../../types'
+import BubbleShell from '../_shared/BubbleShell'
+
+/**
+ * A message bubble in the recipient's treatment — light surface, left-side
+ * tail, with an optional header (e.g. sender name). Use to preview how a
+ * message looks *to the visitor* — including a preview of your own outgoing
+ * message as the recipient will receive it (e.g. a bulk-reply confirmation).
+ */
+const ReceivedCard: React.FC<ReceivedBubbleProps> = ({
+  text,
+  tail,
+  header,
+  className,
+}) => (
+  <BubbleShell
+    variant="received"
+    text={text}
+    tail={tail}
+    header={header}
+    className={className}
+  />
+)
+
+export default ReceivedCard

package/src/components/MessageBubble/components/Received/index.ts

@@ -0,0 +1 @@
+export { default } from './Card'

package/src/components/MessageBubble/components/Sent/Card.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import type { SentBubbleProps } from '../../types'
+import BubbleShell from '../_shared/BubbleShell'
+
+/**
+ * A message bubble in the sender's own treatment — dark surface, right-side
+ * tail. Use to preview how a message looks *to you in the channel*.
+ *
+ * Note: the variant is a visual treatment, not an authorship claim. To preview
+ * an outgoing message as the *recipient* will see it, use
+ * `MessageBubble.Received` instead.
+ */
+const SentCard: React.FC<SentBubbleProps> = ({ text, tail, className }) => (
+  <BubbleShell
+    variant="sent"
+    text={text}
+    tail={tail}
+    className={className}
+  />
+)
+
+export default SentCard

package/src/components/MessageBubble/components/Sent/index.ts

@@ -0,0 +1 @@
+export { default } from './Card'

package/src/components/MessageBubble/components/_shared/BubbleShell.tsx

@@ -0,0 +1,77 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import type { MessageBubbleVariant } from '../../types'
+
+import { BubbleTail } from './bubbleTail'
+
+export interface BubbleShellProps {
+  variant: MessageBubbleVariant
+  text: string
+  /** Draw the bubble tail. Defaults to `true`. */
+  tail?: boolean
+  /** Optional header rendered above the text (e.g. sender name). */
+  header?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Surface colours and metrics are pulled from the toolkit's Stream theme vars
+ * (see `styles.css`) so a standalone bubble is pixel-identical to the
+ * in-channel one and re-themes from the same single source of truth.
+ */
+const SURFACE_STYLE_BY_VARIANT: Record<
+  MessageBubbleVariant,
+  React.CSSProperties
+> = {
+  sent: {
+    backgroundColor:
+      'var(--str-chat__own-message-bubble-background-color, #1e2330)',
+    color: 'var(--str-chat__own-message-bubble-color, #fff)',
+  },
+  received: {
+    backgroundColor:
+      'var(--str-chat__message-bubble-background-color, #f1f0ee)',
+    color: 'var(--str-chat__message-bubble-color, #000000)',
+  },
+}
+
+/**
+ * The rounded bubble box: theme-driven surface, channel-matched typography
+ * (`0.875rem / 1.3125rem`, `0.14px` tracking, `0.75rem 1rem` padding), an
+ * optional header slot, and an optional tail.
+ *
+ * `isolation: isolate` forms a stacking context so the `z-index: -1` tail
+ * paints behind the bubble's own opaque, same-colour background but in front
+ * of the surrounding page — matching the in-channel `::after` tail.
+ */
+const BubbleShell: React.FC<BubbleShellProps> = ({
+  variant,
+  text,
+  tail = true,
+  header,
+  className,
+}) => (
+  <div
+    className={classNames(
+      'relative w-fit max-w-full px-4 py-3',
+      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
+      className
+    )}
+    style={{
+      ...SURFACE_STYLE_BY_VARIANT[variant],
+      borderRadius: 'var(--str-chat__message-bubble-border-radius, 1.5rem)',
+      isolation: 'isolate',
+    }}
+  >
+    {header != null && (
+      <div className="mb-1 font-medium" data-testid="message-bubble-header">
+        {header}
+      </div>
+    )}
+    <p className="m-0 whitespace-pre-wrap break-words">{text}</p>
+    {tail && <BubbleTail variant={variant} />}
+  </div>
+)
+
+export default BubbleShell

package/src/components/MessageBubble/components/_shared/bubbleTail.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import type { MessageBubbleVariant } from '../../types'
+
+/**
+ * Canonical chat-bubble tail (20×23). Kept identical to the in-channel tail
+ * drawn by `CustomMessage` in `styles.css` so standalone previews and real
+ * messages share one silhouette — the single source of truth for the shape.
+ *
+ * The path points to the bottom-*right*; the `received` variant mirrors it
+ * with `scaleX(-1)`, matching the in-channel convention.
+ */
+const TAIL_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%"
+
+/**
+ * Bubble surface colours, reused from the toolkit's Stream theme vars so the
+ * tail is always tinted the same colour as its bubble. Those vars are declared
+ * on `.str-chat`, so we supply the canonical values as `var()` fallbacks —
+ * that keeps the tail correct when rendered *outside* a channel (e.g. a
+ * standalone preview) while still honouring the var (or a consumer override)
+ * wherever it's defined.
+ */
+const BG_VAR_BY_VARIANT: Record<MessageBubbleVariant, string> = {
+  sent: 'var(--str-chat__own-message-bubble-background-color, #1e2330)',
+  received: 'var(--str-chat__message-bubble-background-color, #f1f0ee)',
+}
+
+/**
+ * The tail element. Absolutely positioned at the bubble's bottom corner and
+ * painted behind the bubble body (`z-index: -1`), so the parent bubble must be
+ * `position: relative` with `isolation: isolate` (see {@link BubbleShell}).
+ */
+export const BubbleTail = ({ variant }: { variant: MessageBubbleVariant }) => (
+  <span
+    aria-hidden="true"
+    className="pointer-events-none absolute bottom-0 z-[-1] h-[1.4375rem] w-5"
+    style={{
+      insetInlineEnd: variant === 'sent' ? 'calc(-1 * 0.25rem)' : undefined,
+      insetInlineStart: variant === 'received' ? 'calc(-1 * 0.25rem)' : undefined,
+      transform: variant === 'received' ? 'scaleX(-1)' : undefined,
+      transformOrigin: 'center',
+      backgroundColor: BG_VAR_BY_VARIANT[variant],
+      WebkitMask: TAIL_MASK,
+      mask: TAIL_MASK,
+    }}
+  />
+)

package/src/components/MessageBubble/index.tsx

@@ -0,0 +1,31 @@
+import ReceivedCard from './components/Received/Card'
+import SentCard from './components/Sent/Card'
+
+/**
+ * A dumb, context-free chat message bubble for rendering a single message row
+ * *outside* a live channel — previews, digests, confirmation dialogs, the
+ * Stacks "responded" summary, etc. Unlike `ChannelView`, it needs no Stream
+ * client or provider.
+ *
+ * Render `MessageBubble.Sent` for the sender's own treatment (dark, right
+ * tail) and `MessageBubble.Received` for the recipient's (light, left tail,
+ * optional header). Surface colours, radius, typography, and the tail
+ * silhouette are shared with the in-channel bubble drawn by `CustomMessage`,
+ * so previews stay pixel-identical and re-theme from one source of truth.
+ *
+ * The variant is a **visual treatment, not an authorship claim**: to preview
+ * an outgoing message as the recipient will see it, render
+ * `MessageBubble.Received` with your own text.
+ */
+const MessageBubble = {
+  Sent: SentCard,
+  Received: ReceivedCard,
+}
+
+export default MessageBubble
+export type {
+  MessageBubbleBaseProps,
+  MessageBubbleVariant,
+  SentBubbleProps,
+  ReceivedBubbleProps,
+} from './types'

package/src/components/MessageBubble/types.ts

@@ -0,0 +1,34 @@
+import type React from 'react'
+
+/**
+ * Which visual treatment the bubble paints. This is decoupled from message
+ * *authorship*: it selects a side + colour, not who wrote the text. To preview
+ * an outgoing message as the recipient will see it (e.g. a bulk-reply
+ * confirmation), render the `received` treatment with your own text.
+ */
+export type MessageBubbleVariant = 'sent' | 'received'
+
+export interface MessageBubbleBaseProps {
+  /**
+   * Message body. Rendered verbatim with `whitespace-pre-wrap` (newlines
+   * preserved); this is a dumb component, so no markdown / link parsing.
+   */
+  text: string
+  /**
+   * Draw the bubble tail at the bottom corner. `sent` tails point
+   * bottom-right, `received` bottom-left. Defaults to `true`.
+   */
+  tail?: boolean
+  /** Extra classes on the outer bubble (e.g. `max-w-[520px]`). */
+  className?: string
+}
+
+export interface SentBubbleProps extends MessageBubbleBaseProps {}
+
+export interface ReceivedBubbleProps extends MessageBubbleBaseProps {
+  /**
+   * Optional header rendered above the text inside the bubble — used by the
+   * Stacks message list to show the sender's name. Omit for a plain bubble.
+   */
+  header?: React.ReactNode
+}

package/src/index.ts

@@ -10,6 +10,7 @@ export { default as LockedAttachment } from './components/LockedAttachment'
 export { default as LinkAttachment } from './components/LinkAttachment'
 export { default as MessageAttachment } from './components/MessageAttachment'
 export { Avatar } from './components/Avatar'
+export { default as MessageBubble } from './components/MessageBubble'
 export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
 export { ChannelEmptyState } from './components/MessagingShell/ChannelEmptyState'
@@ -67,6 +68,12 @@ export type {
   OfficialCtaAttachment,
 } from './stream-custom-data'
 export type { AvatarProps } from './components/Avatar'
+export type {
+  MessageBubbleBaseProps,
+  MessageBubbleVariant,
+  SentBubbleProps,
+  ReceivedBubbleProps,
+} from './components/MessageBubble'
 export type { ActionButtonProps } from './components/ActionButton'
 export type {
   ComposerCardProps,

package/src/styles.css

@@ -8,7 +8,7 @@
   --str-chat__font-family: inherit;
 
   --str-chat__message-bubble-border-radius: 1.5rem;
-  --str-chat__message-bubble-background-color: #f2f1ef;
+  --str-chat__message-bubble-background-color: #f1f0ee;
   --str-chat__message-bubble-color: #000000;
 
   --str-chat__own-message-bubble-background-color: #1e2330;