@linktr.ee/messaging-react 3.37.1 → 3.38.0-rc-1786342246

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-D7A8U8GQ.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.RichCard=e.RichCard;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;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-Byt_hX2r.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.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;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.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -215,7 +215,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onBroadcastClick' | 'resolveBroadcastName' | 'showChannelInfo' | 'composerInput'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderChannelActions' | 'onParticipantNameClick' | 'renderMessage' | 'onMessageLinkClick' | 'onBroadcastClick' | 'resolveBroadcastName' | 'showChannelInfo' | 'composerInput'>;
 
 /**
  * ChannelView component props
@@ -337,13 +337,6 @@ export declare interface ChannelViewProps {
      * participant name; it now solely gates the actions menu.
      */
     showChannelInfo?: boolean;
-    /**
-     * Enable thumbs up/down voting on chatbot messages.
-     * When true, vote buttons render below chatbot (DM Agent) messages.
-     * Votes are persisted as Stream Chat reactions (vote_up / vote_down).
-     * Defaults to false.
-     */
-    chatbotVotingEnabled?: boolean;
     /**
      * Language code used to pick translated message text from Stream Chat i18n.
      * Falls back to message.text when no matching translation exists.
@@ -1420,14 +1413,6 @@ export declare interface MessageMetadata {
     broadcast_name?: string;
 }
 
-export declare const MessageVoteButtons: default_2.FC<MessageVoteButtonsProps>;
-
-declare interface MessageVoteButtonsProps {
-    selected: VoteSelection;
-    onVoteUp: () => void;
-    onVoteDown: () => void;
-}
-
 declare type MessageWithI18n = Pick<LocalMessage, 'text'> & {
     i18n?: Record<string, string> | null;
 };
@@ -1820,22 +1805,6 @@ export declare const useComposerLocked: () => boolean;
 
 export declare function useCustomMessage<K extends keyof CustomMessageRegistry>(key: K): CustomMessageRegistry[K];
 
-/**
- * Hook that wraps Stream Chat reactions to provide toggle-style
- * upvote/downvote behavior on a message.
- *
- * Uses enforce_unique so sending a new reaction type automatically
- * removes the previous one. Uses skip_push to avoid notifying the
- * Linker on every vote.
- */
-export declare function useMessageVote(message: LocalMessage): UseMessageVoteResult;
-
-declare interface UseMessageVoteResult {
-    selected: VoteSelection;
-    voteUp: () => void;
-    voteDown: () => void;
-}
-
 /**
  * Hook to access messaging service and state
  */
@@ -1878,8 +1847,6 @@ declare interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps
     onClick?: (index: number) => boolean | void;
 }
 
-export declare type VoteSelection = 'up' | 'down' | null;
-
 export { }
 
 

package/dist/index.js

@@ -1,39 +1,37 @@
-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 h, k as L, l as d, m as p, R as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-BOBIiAuD.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as r, f as l, L as g, h as c, M, i as h, j as L, k as u, l as d, R as p, m as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, o as y, x as z, y as S, z as q, B, D, E, G as R } from "./index-fk5ihkQY.js";
 export {
   e as ActionButton,
   t as Avatar,
   i as ChannelEmptyState,
-  o as ChannelList,
-  n as ChannelView,
+  n as ChannelList,
+  o as ChannelView,
   m as CustomMessageProvider,
   r as FaqList,
-  g as FaqListItem,
-  l as LinkAttachment,
-  M as LockedAttachment,
-  c as MediaMessage,
-  u as MessageAttachment,
-  h as MessageBubble,
-  L as MessageVoteButtons,
-  d as MessagingProvider,
-  p as MessagingShell,
-  C as RichCard,
-  v as buildCompactMetaLabel,
-  A as formatFileSize,
-  k as formatRelativeTime,
-  F as getFileExtensionLabel,
-  b as getMessageDisplayText,
-  P as isLinkAttachment,
-  f as isUuidLike,
-  x as messageAttachmentGroupPositionFromStream,
-  y as normalizeLanguageCode,
-  z as optimizeMessagingAttachmentUrl,
-  B as resolveConversationParticipant,
+  l as FaqListItem,
+  g as LinkAttachment,
+  c as LockedAttachment,
+  M as MediaMessage,
+  h as MessageAttachment,
+  L as MessageBubble,
+  u as MessagingProvider,
+  d as MessagingShell,
+  p as RichCard,
+  C as buildCompactMetaLabel,
+  v as formatFileSize,
+  A as formatRelativeTime,
+  k as getFileExtensionLabel,
+  F as getMessageDisplayText,
+  b as isLinkAttachment,
+  P as isUuidLike,
+  f as messageAttachmentGroupPositionFromStream,
+  x as normalizeLanguageCode,
+  y as optimizeMessagingAttachmentUrl,
+  z as resolveConversationParticipant,
   S as resolveLinkAttachment,
   q as resolveMediaFromMessage,
-  D as resolveParticipantDisplayName,
-  E as useComposerLocked,
-  R as useCustomMessage,
-  V as useMessageVote,
-  w as useMessaging
+  B as resolveParticipantDisplayName,
+  D as useComposerLocked,
+  E as useCustomMessage,
+  R as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.37.1",
+  "version": "3.38.0-rc-1786342246",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -46,10 +46,11 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build --stats-json",
     "chromatic:ci:feature": "chromatic --ci --exit-zero-on-changes --exit-once-uploaded",
-    "chromatic:ci:main": "chromatic --ci --auto-accept-changes"
+    "chromatic:ci:main": "chromatic --ci --auto-accept-changes",
+    "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.4.0",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1786342246",
     "@linktr.ee/messaging-taxonomy": "^0.9.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/ChannelView.tsx

@@ -49,7 +49,6 @@ const ChannelViewInner: React.FC<{
   composerDisabled?: boolean
   composerDisabledReason?: string
   showStarButton?: boolean
-  chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
@@ -80,7 +79,6 @@ const ChannelViewInner: React.FC<{
   composerDisabled = false,
   composerDisabledReason,
   showStarButton = false,
-  chatbotVotingEnabled = false,
   renderChannelBanner,
   customChannelActions,
   renderChannelActions,
@@ -149,7 +147,6 @@ const ChannelViewInner: React.FC<{
       const messageNode = (
         <CustomMessage
           {...props}
-          chatbotVotingEnabled={chatbotVotingEnabled}
           viewerLanguage={viewerLanguage}
           onBroadcastClick={messageBroadcastClick}
         />
@@ -161,7 +158,7 @@ const ChannelViewInner: React.FC<{
 
       return renderMessage(messageNode, message)
     },
-    [chatbotVotingEnabled, messageBroadcastClick, renderMessage, viewerLanguage]
+    [messageBroadcastClick, renderMessage, viewerLanguage]
   )
 
   return (
@@ -308,7 +305,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
     messageMetadata,
     onMessageSent,
     showStarButton = false,
-    chatbotVotingEnabled = false,
     renderChannelBanner,
     customChannelActions,
     renderChannelActions,
@@ -426,7 +422,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
               composerDisabled={composerDisabled}
               composerDisabledReason={composerDisabledReason}
               showStarButton={showStarButton}
-              chatbotVotingEnabled={chatbotVotingEnabled}
               renderChannelBanner={renderChannelBanner}
               customChannelActions={customChannelActions}
               renderChannelActions={renderChannelActions}

package/src/components/CustomMessage/CustomMessage.test.tsx

@@ -43,14 +43,6 @@ vi.mock('stream-chat-react', () => ({
   useMessageReminder: () => undefined,
 }))
 
-vi.mock('../../hooks/useMessageVote', () => ({
-  useMessageVote: () => ({
-    selected: undefined,
-    voteUp: vi.fn(),
-    voteDown: vi.fn(),
-  }),
-}))
-
 vi.mock('./context', () => ({
   useCustomMessage: () => ({
     isUnlocking: () => false,
@@ -70,10 +62,6 @@ vi.mock('./MessageTag', () => ({
   isTipOnlyMessage: () => false,
 }))
 
-vi.mock('./MessageVoteButtons', () => ({
-  MessageVoteButtons: () => null,
-}))
-
 vi.mock('./LockedAttachment', () => ({
   default: () => null,
 }))

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

@@ -35,13 +35,10 @@ describe('MessageTag', () => {
 
     const indicator = screen.getByTestId('message-chatbot-indicator')
     expect(indicator).toHaveTextContent('Sent by AI Assistant')
-    expect(indicator).toHaveClass('message-chatbot-indicator--receiver')
-    expect(indicator).toHaveClass('message-chatbot-indicator--text')
 
-    expect(indicator.children[0]).toHaveClass('message-chatbot-indicator__icon')
-    expect(indicator.children[1]).toHaveClass(
-      'message-chatbot-indicator__label'
-    )
+    // icon first, then label
+    expect(indicator.children[0].querySelector('svg')).not.toBeNull()
+    expect(indicator.children[1]).toHaveTextContent('Sent by AI Assistant')
   })
 
   it('renders sender chatbot text variant with mirrored order', () => {
@@ -56,13 +53,10 @@ describe('MessageTag', () => {
 
     const indicator = screen.getByTestId('message-chatbot-indicator')
     expect(indicator).toHaveTextContent('Sent by AI Assistant')
-    expect(indicator).toHaveClass('message-chatbot-indicator--sender')
-    expect(indicator).toHaveClass('message-chatbot-indicator--text')
 
-    expect(indicator.children[0]).toHaveClass(
-      'message-chatbot-indicator__label'
-    )
-    expect(indicator.children[1]).toHaveClass('message-chatbot-indicator__icon')
+    // label first, then icon (mirrored)
+    expect(indicator.children[0]).toHaveTextContent('Sent by AI Assistant')
+    expect(indicator.children[1].querySelector('svg')).not.toBeNull()
   })
 
   it('renders sender attachment chatbot variant outside-footer copy', () => {
@@ -78,13 +72,10 @@ describe('MessageTag', () => {
 
     const indicator = screen.getByTestId('message-chatbot-indicator')
     expect(indicator).toHaveTextContent('Sent with AI')
-    expect(indicator).toHaveClass('message-chatbot-indicator--sender')
-    expect(indicator).toHaveClass('message-chatbot-indicator--attachment')
 
-    expect(indicator.children[0]).toHaveClass('message-chatbot-indicator__icon')
-    expect(indicator.children[1]).toHaveClass(
-      'message-chatbot-indicator__label'
-    )
+    // icon first, then label
+    expect(indicator.children[0].querySelector('svg')).not.toBeNull()
+    expect(indicator.children[1]).toHaveTextContent('Sent with AI')
   })
 
   it('keeps tip tag behavior unchanged', () => {

package/src/components/CustomMessage/MessageTag.tsx

@@ -90,8 +90,8 @@ export const MessageTag = ({
     if (!amountText) return null
 
     const className = standalone
-      ? 'message-tip-standalone'
-      : 'message-tag message-tag--tip'
+      ? 'message-tip-standalone inline-flex items-center gap-1.5 px-3.5 py-2.5 rounded-[18px] text-[14px] font-medium text-[#016e1a] bg-[#dbf0e0]'
+      : 'message-tag--tip inline-flex items-center gap-1 text-[12px] leading-[2] font-medium text-[#016630]'
 
     const amountLabel = isPaidMessage(message) ? 'message' : 'tip'
     const label = standalone
@@ -111,28 +111,27 @@ export const MessageTag = ({
     ? 'Sent with AI'
     : 'Sent by AI Assistant'
 
-  const chatbotClassName = [
-    'message-chatbot-indicator',
-    isMyMessage
-      ? 'message-chatbot-indicator--sender'
-      : 'message-chatbot-indicator--receiver',
-    isSenderAttachmentVariant
-      ? 'message-chatbot-indicator--attachment'
-      : 'message-chatbot-indicator--text',
-  ].join(' ')
-
-  const label = (
-    <span className="message-chatbot-indicator__label">{chatbotLabel}</span>
-  )
+  const chatbotBase =
+    'inline-flex items-center text-[10px] font-normal leading-4 tracking-[0.2px]'
+  const chatbotVariant = isSenderAttachmentVariant
+    ? 'justify-end gap-2 text-black/30'
+    : isMyMessage
+      ? 'w-full justify-start gap-1.5 mt-3 px-4 text-white/55'
+      : 'w-full justify-start gap-1.5 mt-3 px-4 text-black/30'
+
+  const label = <span className="text-left">{chatbotLabel}</span>
   const icon = (
-    <span className="message-chatbot-indicator__icon">
+    <span className="inline-flex items-center leading-none">
       <SparkleIcon size={isSenderAttachmentVariant ? 12 : 15} />
     </span>
   )
 
   // Chatbot indicator variant
   return (
-    <div className={chatbotClassName} data-testid="message-chatbot-indicator">
+    <div
+      className={`${chatbotBase} ${chatbotVariant}`}
+      data-testid="message-chatbot-indicator"
+    >
       {isMyMessage && !isSenderAttachmentVariant ? (
         <>
           {label}

package/src/components/CustomMessage/MessageTail.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+/**
+ * In-channel chat-bubble tail (20×23), rendered as a real element at the last
+ * bubble's bottom corner. Painted behind the bubble body (`z-index: -1`), so the
+ * host bubble must be `relative` with `isolation: isolate`.
+ *
+ * The silhouette is the same 20×23 mask path shared by the card tails
+ * (`.messaging-link-card-tail` in styles.css) and the standalone `MessageBubble`
+ * preview — one source of truth for the shape. It stays a CSS `mask` because the
+ * fill comes from the bubble-surface colour (so a plain `background-color` shows
+ * through the shape), and the data-URI path isn't expressible in Tailwind.
+ */
+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 tinted the same as its bubble. Those vars live on `.str-chat`; the `var()`
+ * fallbacks keep the tail correct if it ever renders outside a channel.
+ */
+const BG_BY_SIDE = {
+  me: 'var(--str-chat__own-message-bubble-background-color, #1e2330)',
+  other: 'var(--str-chat__message-bubble-background-color, #f1f0ee)',
+} as const
+
+/**
+ * `me` tails hang off the right edge; `other` tails mirror to the left with
+ * `scaleX(-1)`, matching the in-channel convention.
+ */
+export const MessageTail = ({ side }: { side: 'me' | 'other' }) => (
+  <span
+    aria-hidden="true"
+    className="pointer-events-none absolute bottom-0 z-[-1] h-[1.4375rem] w-5"
+    style={{
+      insetInlineEnd: side === 'me' ? 'calc(-1 * 0.3125rem)' : undefined,
+      insetInlineStart: side === 'other' ? 'calc(-1 * 0.3125rem)' : undefined,
+      transform: side === 'other' ? 'scaleX(-1)' : undefined,
+      transformOrigin: 'center',
+      backgroundColor: BG_BY_SIDE[side],
+      WebkitMask: TAIL_MASK,
+      mask: TAIL_MASK,
+    }}
+  />
+)

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -4,6 +4,7 @@ import {
   MegaphoneIcon,
   WarningCircleIcon,
 } from '@phosphor-icons/react'
+import classNames from 'classnames'
 import {
   MessageStatus,
   useChannelStateContext,
@@ -107,13 +108,19 @@ const BroadcastStatus = ({
 }) => {
   const campaignName = resolvedBroadcastName || broadcastName
   const name = campaignName || 'Broadcast'
+  // Underline the name only in the clickable variant (it reads as a link).
+  // The name's colour still comes from the `.str-chat`-scoped grid rule in
+  // styles.css; we only add the underline here.
+  const isLink = Boolean(onBroadcastClick)
   const content = (
     <>
       <span className="sent-message-broadcast-badge" aria-hidden="true">
         <MegaphoneIcon weight="fill" />
       </span>
       <span
-        className="sent-message-broadcast-name"
+        className={classNames('sent-message-broadcast-name', {
+          'underline [text-decoration-skip-ink:auto]': isLink,
+        })}
         data-testid="sent-message-broadcast-status"
       >
         {name}
@@ -124,7 +131,7 @@ const BroadcastStatus = ({
   return onBroadcastClick ? (
     <button
       type="button"
-      className="sent-message-broadcast-link"
+      className="inline-flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-inherit [font:inherit]"
       aria-label={`View broadcast ${name}`}
       onClick={() =>
         onBroadcastClick({

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import React from 'react'
 import type { Attachment, LocalMessage } from 'stream-chat'
 import {
@@ -12,6 +13,8 @@ import { isPlayableMedia } from '../LinkAttachment/components/_shared/CardThumbn
 import MessageAttachment from '../MessageAttachment'
 import type { BubbleGroupPosition } from '../MessageAttachment/types'
 
+import { MessageTail } from './MessageTail'
+
 type StreamMediaKind = 'image' | 'video' | 'audio' | 'pdf' | 'file'
 
 export type AttachmentSegment =
@@ -344,12 +347,16 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
 
   // A link card paints its own accent-coloured tail only when it is the very
   // last thing this message renders. A caption bubble follows when there is
-  // one, and that bubble already owns the tail via `styles.css`; and a message
-  // mid-run has its tail on a later message. Anything else is a mid-run card,
-  // which must stay tail-less.
+  // one, and that bubble owns the tail (rendered below via `MessageTail`); and a
+  // message mid-run has its tail on a later message. Anything else is a mid-run
+  // card, which must stay tail-less.
   const linkTailPosition: BubbleGroupPosition = caption
     ? 'middle'
     : groupPosition
+  // The trailing caption bubble carries the tail on single / last-in-run
+  // messages, matching the in-channel text bubbles.
+  const captionShowsTail =
+    groupPosition === 'single' || groupPosition === 'end'
 
   const pushLinkRow = (
     attachment: Attachment,
@@ -422,9 +429,16 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
         {!caption && <MessageErrorIcon />}
       </div>
       {caption ? (
-        <div className="str-chat__message-bubble">
+        <div
+          className={classNames('str-chat__message-bubble', {
+            'relative isolate': captionShowsTail,
+          })}
+        >
           <MessageText message={message} renderText={renderText} />
           <MessageErrorIcon />
+          {captionShowsTail && (
+            <MessageTail side={isMyMessage ? 'me' : 'other'} />
+          )}
         </div>
       ) : null}
     </div>

package/src/components/CustomMessage/index.tsx

@@ -29,7 +29,6 @@ import {
   type MessageUIComponentProps,
 } from 'stream-chat-react'
 
-import { useMessageVote } from '../../hooks/useMessageVote'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import { isLinkAttachment } from '../MediaMessage'
@@ -46,20 +45,18 @@ import {
   isTextAttachmentMessage,
   isTipOnlyMessage,
 } from './MessageTag'
-import { MessageVoteButtons } from './MessageVoteButtons'
+import { MessageTail } from './MessageTail'
 import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
 import StreamAttachmentMessage, {
   buildOrderedAttachmentSegments,
 } from './StreamAttachmentMessage'
 
 type CustomMessageUIComponentProps = MessageUIComponentProps & {
-  chatbotVotingEnabled?: boolean
   viewerLanguage?: string
   onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
 }
 
 type CustomMessageWithContextProps = MessageContextValue & {
-  chatbotVotingEnabled?: boolean
   viewerLanguage?: string
   onBroadcastClick?: (broadcast: { id: string; name?: string }) => void
   resolvedBroadcastName?: string
@@ -68,7 +65,6 @@ type CustomMessageWithContextProps = MessageContextValue & {
 const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const {
     additionalMessageInputProps,
-    chatbotVotingEnabled,
     editing,
     endOfGroup,
     firstOfGroup,
@@ -93,7 +89,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     useCustomMessage('LockedAttachment')
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false)
   const reminder = useMessageReminder(message.id)
-  const { selected: voteState, voteUp, voteDown } = useMessageVote(message)
 
   const {
     Attachment = DefaultAttachment,
@@ -151,12 +146,15 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
       (total, segment) => total + segment.attachments.length,
       0
     ) === (finalAttachments?.length ?? 0)
-  const streamAttachmentGroupPosition =
-    messageAttachmentGroupPositionFromStream({
-      endOfGroup,
-      firstOfGroup,
-      groupedByUser,
-    })
+  const bubbleGroupPosition = messageAttachmentGroupPositionFromStream({
+    endOfGroup,
+    firstOfGroup,
+    groupedByUser,
+  })
+  // The trailing bubble of a same-author run carries the tail (matches Stream's
+  // `--single`/`--bottom` grouping the card tails already key off).
+  const showTail =
+    bubbleGroupPosition === 'single' || bubbleGroupPosition === 'end'
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -353,17 +351,22 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 {!isMine && MessageActions && <MessageActions />}
               </div>
               {message.text && (
-                <div className="str-chat__message-bubble">
+                <div
+                  className={classNames('str-chat__message-bubble', {
+                    'relative isolate': showTail,
+                  })}
+                >
                   <MessageText
                     message={displayMessage}
                     renderText={renderText}
                   />
+                  {showTail && <MessageTail side={isMine ? 'me' : 'other'} />}
                 </div>
               )}
             </div>
           ) : canRenderAttachmentsInToolkit ? (
             <StreamAttachmentMessage
-              groupPosition={streamAttachmentGroupPosition}
+              groupPosition={bubbleGroupPosition}
               isMyMessage={isMine}
               message={{
                 ...displayMessage,
@@ -377,7 +380,11 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             />
           ) : (
             <div className="str-chat__message-bubble-wrapper">
-              <div className="str-chat__message-bubble">
+              <div
+                className={classNames('str-chat__message-bubble', {
+                  'relative isolate': showTail,
+                })}
+              >
                 {isChatbot && !useAttachmentFooterChatbotTag && (
                   <MessageTag
                     message={message}
@@ -404,6 +411,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                   />
                 )}
                 <MessageErrorIcon />
+                {showTail && <MessageTail side={isMine ? 'me' : 'other'} />}
               </div>
             </div>
           )}
@@ -417,13 +425,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 isMyMessage={isMine}
               />
             )}
-            {chatbotVotingEnabled && isChatbot && (
-              <MessageVoteButtons
-                selected={voteState}
-                onVoteUp={voteUp}
-                onVoteDown={voteDown}
-              />
-            )}
           </div>
         )}
         <SentMessageDeliveryStatus
@@ -447,7 +448,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
 const MemoizedCustomMessage = React.memo(
   CustomMessageWithContext,
   (prev, next) => {
-    if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
     if (prev.viewerLanguage !== next.viewerLanguage) return false
     if (prev.onBroadcastClick !== next.onBroadcastClick) return false
     if (prev.resolvedBroadcastName !== next.resolvedBroadcastName) return false

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

@@ -24,12 +24,11 @@ export interface BubbleTailProps {
  * Wraps a `LinkAttachment` card in the chat bubble tail from the messaging
  * design system, painted to match the card's own bottom edge.
  *
- * The geometry and mask live in `styles.css` alongside the text-bubble tails
- * they mirror. They cannot be reused directly: those rules key off
- * `.str-chat__message-bubble:last-child`, which only exists when the card is
- * rendered inside a Stream thread — and `StreamAttachmentMessage` marks that
- * bubble `data-attachment-bubble` precisely to opt out of them, since a tail
- * tinted from the text-bubble surface would clash with a coloured card.
+ * The geometry and mask live in `styles.css` (`.messaging-link-card-tail`),
+ * mirroring the text-bubble tail (`MessageTail`) they share a silhouette with.
+ * A card carries its own accent-tinted tail rather than the surface-tinted
+ * `MessageTail`, so `StreamAttachmentMessage` renders `MessageTail` only on the
+ * trailing caption bubble, never on the card bubble itself.
  */
 const BubbleTail: React.FC<BubbleTailProps> = ({
   accentHex,