@linktr.ee/messaging-react 2.3.0 → 2.3.3-rc-1779777764

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CQ913euH.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.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;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-DuGzAVyy.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.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;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 n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-BCbVXFHI.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-v6yofqub.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "2.3.0",
+  "version": "2.3.3-rc-1779777764",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/ChannelView.tsx

@@ -26,6 +26,7 @@ import { Avatar } from './Avatar'
 import { ChannelInfoDialog } from './ChannelInfoDialog'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
+import { CustomMessageActions } from './CustomMessage/CustomMessageActions'
 import { CustomMessageInput } from './CustomMessageInput'
 import { CustomSystemMessage } from './CustomSystemMessage'
 import CustomTypingIndicator from './CustomTypingIndicator'
@@ -35,6 +36,7 @@ import { LoadingState } from './MessagingShell/LoadingState'
 
 const ICON_BTN_CLASS =
   'size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
+
 const DM_AGENT_HEADER_HELPER_TEXT = 'Replies instantly with AI assistant'
 
 /**
@@ -374,7 +376,12 @@ const ChannelViewInner: React.FC<{
 
   return (
     <>
-      <WithComponents overrides={{ Message: MessageOverride }}>
+      <WithComponents
+        overrides={{
+          Message: MessageOverride,
+          MessageActions: CustomMessageActions,
+        }}
+      >
         <Window>
           {/* Custom Channel Header */}
           <div key="lt-channel-header" className="p-4">
@@ -404,7 +411,6 @@ const ChannelViewInner: React.FC<{
             <MessageList
               hideDeletedMessages
               hideNewMessageSeparator={false}
-              messageActions={undefined}
             />
           </div>
 

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

@@ -1,6 +1,7 @@
 import '../../stream-custom-data'
 
 import type { Meta, StoryFn } from '@storybook/react'
+import { expect, userEvent, within } from '@storybook/test'
 import React, { useEffect } from 'react'
 import {
   Channel as ChannelType,
@@ -13,6 +14,7 @@ import {
   MessageList,
   MessageUIComponentProps,
   Window,
+  WithComponents,
 } from 'stream-chat-react'
 
 import {
@@ -22,6 +24,8 @@ import {
 } from '../../stories/decorators/storyUser'
 import CustomTypingIndicator from '../CustomTypingIndicator'
 
+import { CustomMessageActions } from './CustomMessageActions'
+
 import { CustomMessage } from './index'
 
 const meta: Meta = {
@@ -58,6 +62,8 @@ const createMockChannel = async (
 
   const channelData = {
     members: [storyUsers.creator.id, storyUsers.visitor.id],
+    // Required for useUserRole: canDelete needs delete-own-message, canFlag needs flag-message
+    own_capabilities: ['delete-own-message', 'flag-message'],
   }
 
   const channel = client.channel(
@@ -352,6 +358,8 @@ LockedAttachment.args = {
   ],
 }
 
+
+
 export const ChatbotVariants: StoryFn<TemplateProps> = Template.bind({})
 ChatbotVariants.args = {
   messages: [
@@ -445,3 +453,135 @@ WithTypingIndicatorComparison.parameters = {
     },
   },
 }
+
+// ─── Message Actions ──────────────────────────────────────────────────────────
+
+/**
+ * Same as TemplateInner but wraps with WithComponents so CustomMessageActions
+ * is wired in — matching what ChannelView does in production.
+ */
+const WithActionsTemplateInner: React.FC<{
+  currentUser: StoryUser
+  messages: TemplateProps['messages']
+}> = ({ currentUser, messages }) => {
+  const [client] = React.useState(() => {
+    const c = new StreamChat('mock-api-key', { allowServerSideConnect: true })
+    c.userID = currentUser.id
+    c.user = currentUser
+    return c
+  })
+
+  const [channel, setChannel] = React.useState<ChannelType | null>(null)
+
+  useEffect(() => {
+    createMockChannel(client, messages).then(setChannel)
+  }, [client, messages])
+
+  const MessageComponent = React.useMemo(() => {
+    return function CustomMessageComponent(props: MessageUIComponentProps) {
+      return <CustomMessage {...props} />
+    }
+  }, [])
+
+  if (!channel) {
+    return <div className="p-4">Loading...</div>
+  }
+
+  return (
+    <Chat client={client}>
+      <div className="h-screen w-full bg-white">
+        <Channel channel={channel} TypingIndicator={CustomTypingIndicator}>
+          <WithComponents
+            overrides={{
+              Message: MessageComponent,
+              MessageActions: CustomMessageActions,
+            }}
+          >
+            <Window>
+              <MessageList />
+            </Window>
+          </WithComponents>
+        </Channel>
+      </div>
+    </Chat>
+  )
+}
+
+const WithActionsTemplate: StoryFn<TemplateProps> = ({
+  currentUser = storyUsers.creator,
+  messages,
+}) => (
+  <WithActionsTemplateInner
+    key={currentUser.id}
+    currentUser={currentUser}
+    messages={messages}
+  />
+)
+
+export const DeleteOwnMessage: StoryFn<TemplateProps> =
+  WithActionsTemplate.bind({})
+DeleteOwnMessage.args = {
+  currentUser: storyUsers.creator,
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Hey, how are you?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      text: 'Doing great — hover me to delete!',
+      user: storyUsers.creator,
+    },
+  ],
+}
+DeleteOwnMessage.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const ownBubble = await canvas.findByText('Doing great — hover me to delete!')
+  await userEvent.hover(ownBubble)
+  const toggle = await canvas.findByTestId('message-actions-toggle-button')
+  await userEvent.click(toggle)
+  await expect(canvas.getByText('Delete')).toBeInTheDocument()
+}
+DeleteOwnMessage.parameters = {
+  docs: {
+    description: {
+      story:
+        'Current user hovers their own message. Only "Delete" is shown — "Report" is hidden.',
+    },
+  },
+}
+
+export const ReportOthersMessage: StoryFn<TemplateProps> =
+  WithActionsTemplate.bind({})
+ReportOthersMessage.args = {
+  currentUser: storyUsers.creator,
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Hover me to report!',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      text: "That's a fine message.",
+      user: storyUsers.creator,
+    },
+  ],
+}
+ReportOthersMessage.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const otherBubble = await canvas.findByText('Hover me to report!')
+  await userEvent.hover(otherBubble)
+  const toggle = await canvas.findByTestId('message-actions-toggle-button')
+  await userEvent.click(toggle)
+  await expect(canvas.getByText('Report')).toBeInTheDocument()
+}
+ReportOthersMessage.parameters = {
+  docs: {
+    description: {
+      story:
+        "Current user hovers the other participant's message. Only \"Report\" is shown — \"Delete\" is hidden.",
+    },
+  },
+}

package/src/components/CustomMessage/CustomMessageActions.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useMessageContext, useTranslationContext } from 'stream-chat-react'
+import {
+  DefaultDropdownActionButton,
+  MessageActions,
+  type MessageActionSetItem,
+} from 'stream-chat-react/experimental'
+
+const DeleteAction = () => {
+  const { handleDelete } = useMessageContext('CustomMessageActions')
+  const { t } = useTranslationContext('CustomMessageActions')
+  return (
+    <DefaultDropdownActionButton onClick={handleDelete}>
+      {t('Delete')}
+    </DefaultDropdownActionButton>
+  )
+}
+
+const ReportAction = () => {
+  const { handleFlag } = useMessageContext('CustomMessageActions')
+  return (
+    <DefaultDropdownActionButton onClick={handleFlag}>
+      Report
+    </DefaultDropdownActionButton>
+  )
+}
+
+const MESSAGE_ACTION_SET: MessageActionSetItem[] = [
+  { Component: DeleteAction, placement: 'dropdown', type: 'delete' },
+  { Component: ReportAction, placement: 'dropdown', type: 'flag' },
+]
+
+export const CustomMessageActions = () => (
+  <MessageActions messageActionSet={MESSAGE_ACTION_SET} />
+)

package/src/components/CustomMessage/index.tsx

@@ -85,6 +85,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const {
     Attachment = DefaultAttachment,
     EditMessageModal = DefaultEditMessageModal,
+    MessageActions,
     MessageBlocked = DefaultMessageBlocked,
     MessageBouncePrompt = DefaultMessageBouncePrompt,
     MessageDeleted = DefaultMessageDeleted,
@@ -297,24 +298,28 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 )}
                 <MessageErrorIcon />
               </div>
-              {/* Tip/paid tags stay outside; chatbot attachment indicator stays outside too */}
-              {(!isChatbot || useAttachmentFooterChatbotTag) && (
-                <MessageTag
-                  message={message}
-                  hasAttachment={hasRenderableAttachments}
-                  isMyMessage={isMine}
-                />
-              )}
-              {chatbotVotingEnabled && isChatbot && (
-                <MessageVoteButtons
-                  selected={voteState}
-                  onVoteUp={voteUp}
-                  onVoteDown={voteDown}
-                />
-              )}
             </div>
           )}
+          {MessageActions && <MessageActions />}
         </div>
+        {!isAttachment && !isTipOnly && (
+          <div className="str-chat__message-footer">
+            {(!isChatbot || useAttachmentFooterChatbotTag) && (
+              <MessageTag
+                message={message}
+                hasAttachment={hasRenderableAttachments}
+                isMyMessage={isMine}
+              />
+            )}
+            {chatbotVotingEnabled && isChatbot && (
+              <MessageVoteButtons
+                selected={voteState}
+                onVoteUp={voteUp}
+                onVoteDown={voteDown}
+              />
+            )}
+          </div>
+        )}
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}

package/src/components/CustomMessageInput/CustomMessageInput.test.tsx

@@ -23,11 +23,7 @@ let mockContextSendButton:
 )
 
 vi.mock('stream-chat-react', () => ({
-  MessageInput: ({
-    Input,
-  }: {
-    Input: React.ComponentType
-  }) => (
+  MessageInput: ({ Input }: { Input: React.ComponentType }) => (
     <div data-testid="stream-message-input">
       <Input />
     </div>
@@ -38,9 +34,9 @@ vi.mock('stream-chat-react', () => ({
   TextareaComposer: ({
     maxRows: _maxRows,
     ...props
-  }: React.TextareaHTMLAttributes<HTMLTextAreaElement> & { maxRows?: number }) => (
-    <textarea data-testid="textarea-composer" {...props} />
-  ),
+  }: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    maxRows?: number
+  }) => <textarea data-testid="textarea-composer" {...props} />,
   AttachmentPreviewList: () => <div data-testid="attachment-preview-list" />,
   QuotedMessagePreview: () => <div data-testid="quoted-message-preview" />,
   useChannelStateContext: () => ({
@@ -81,7 +77,6 @@ describe('CustomMessageInput', () => {
     expect(messageInput).not.toHaveAttribute('aria-disabled')
     expect(messageInput).not.toHaveAttribute('inert')
     expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
-    expect(screen.getByTestId('textarea-composer')).not.toHaveAttribute('autofocus')
   })
 
   it('renders the frozen message input when channel is frozen', () => {
@@ -159,7 +154,11 @@ describe('CustomMessageInput', () => {
   it('renders the custom SendButton from component context', () => {
     mockChannelData = {}
     mockContextSendButton = () => (
-      <button type="button" data-testid="custom-context-send-button" aria-label="Custom Send" />
+      <button
+        type="button"
+        data-testid="custom-context-send-button"
+        aria-label="Custom Send"
+      />
     )
 
     renderWithProviders(<CustomMessageInput />)
@@ -175,7 +174,9 @@ describe('CustomMessageInput', () => {
     renderWithProviders(<CustomMessageInput />)
 
     expect(screen.getByTestId('send-button')).toBeInTheDocument()
-    expect(screen.queryByTestId('custom-context-send-button')).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('custom-context-send-button')
+    ).not.toBeInTheDocument()
   })
 
   it('preserves disabled state on the send button when there is no sendable data', () => {

package/src/components/CustomMessageInput/index.tsx

@@ -34,9 +34,8 @@ const CustomMessageInputInner: React.FC = () => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
   const { handleSubmit } = useMessageInputContext()
-  const { SendButton: SendButtonFromContext } = useComponentContext(
-    'CustomMessageInput',
-  )
+  const { SendButton: SendButtonFromContext } =
+    useComponentContext('CustomMessageInput')
   const SendButton = SendButtonFromContext ?? DefaultSendButton
   const hasSendableData = useMessageComposerHasSendableData()
   const isSendDisabled = isFrozen || !hasSendableData
@@ -55,6 +54,11 @@ const CustomMessageInputInner: React.FC = () => {
             <TextareaComposer
               aria-disabled={isFrozen || undefined}
               className="w-full resize-none outline-none leading-6"
+              // While this might usually be considered an anti-pattern, in most
+              // cases, when a message thread is rendered, we want the input to
+              // gain focus automatically.
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={!isFrozen}
               maxRows={4}
               readOnly={isFrozen}
               tabIndex={isFrozen ? -1 : undefined}

package/src/styles.css

@@ -317,32 +317,82 @@
 }
 
 .str-chat__li .str-chat__message-inner {
-  grid-column-gap: 0;
-}
-
-.str-chat__li .str-chat__message--me .str-chat__message-bubble-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 2px;
+  grid-column-gap: 4px;
 }
 
+/* Outer grid for other (incoming) messages — add footer row after message */
 .str-chat__li .str-chat__message--other {
-  position: relative;
+  grid-template-areas:
+    '. message-reminder'
+    'avatar message'
+    '. footer'
+    '. replies'
+    '. translation-notice'
+    '. custom-metadata'
+    '. metadata';
   grid-template-columns: 28px 1fr;
+  justify-items: flex-start;
 }
 
-.str-chat__li .str-chat__message--other .str-chat__message-bubble-wrapper {
+/* Outer grid for me (outgoing) messages — add footer row after message */
+.str-chat__li .str-chat__message--me {
+  grid-template-areas:
+    'message-reminder'
+    'message'
+    'footer'
+    'replies'
+    'translation-notice'
+    'custom-metadata'
+    'metadata';
+  justify-items: end;
+}
+
+/* Avatar: proper grid item aligned to bottom of its row */
+.str-chat__li .str-chat__message--other .str-chat__message-sender-avatar {
+  grid-area: avatar;
+  align-self: end;
+}
+
+/* message-inner sits in the message grid area */
+.str-chat__li .str-chat__message-inner {
+  grid-area: message;
+}
+
+/* Inner grid: bubble beside options only (no footer row) */
+.str-chat__li .str-chat__message--other .str-chat__message-inner {
+  grid-template-areas: 'message-bubble options';
+  grid-template-columns: auto auto;
+}
+
+.str-chat__li .str-chat__message--me .str-chat__message-inner {
+  grid-template-areas: 'options message-bubble';
+  grid-template-columns: auto auto;
+}
+
+/* Bubble wrapper occupies the message-bubble grid area */
+.str-chat__li .str-chat__message-inner > .str-chat__message-bubble-wrapper {
+  grid-area: message-bubble;
+}
+
+/* Actions button centers vertically with the bubble */
+.str-chat__li .str-chat__message-inner .str-chat__message-options {
+  align-self: center;
+}
+
+/* Footer: tag then vote buttons stacked, in outer grid footer area */
+.str-chat__li .str-chat__message-footer {
+  grid-area: footer;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: 2px;
 }
 
-.str-chat__li .str-chat__message--other .str-chat__avatar {
-  position: absolute;
-  left: 0;
-  bottom: 0;
+.str-chat__li .str-chat__message--other .str-chat__message-footer {
+  align-items: flex-start;
+}
+
+.str-chat__li .str-chat__message--me .str-chat__message-footer {
+  align-items: flex-end;
 }
 
 /* Channel list load-more button overrides */
@@ -415,9 +465,7 @@
 }
 
 .message-chatbot-indicator--attachment {
-  width: 100%;
   gap: 8px;
-  margin-top: 4px;
   color: rgba(0, 0, 0, 0.3);
 }
 
@@ -436,7 +484,6 @@
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  margin-top: 4px;
 }
 
 .message-vote-button {
@@ -535,8 +582,52 @@
   word-break: break-word;
 }
 
-.str-chat__message-text-inner p {
+.str-chat__message
+  .str-chat__message-inner
+  .str-chat__message-bubble
+  .str-chat__message-text
+  .str-chat__message-text-inner
+  p,
+.str-chat__quoted-message-preview
+  .str-chat__message-inner
+  .str-chat__message-bubble
+  .str-chat__message-text
+  .str-chat__message-text-inner
+  p {
   margin: 0.25rem 0;
+}
+
+.str-chat__message
+  .str-chat__message-inner
+  .str-chat__message-bubble
+  .str-chat__message-text
+  .str-chat__message-text-inner
+  > p:first-child,
+.str-chat__quoted-message-preview
+  .str-chat__message-inner
+  .str-chat__message-bubble
+  .str-chat__message-text
+  .str-chat__message-text-inner
+  > p:first-child {
+  margin-top: 0;
+}
+
+.str-chat__message
+  .str-chat__message-inner
+  .str-chat__message-bubble
+  .str-chat__message-text
+  .str-chat__message-text-inner
+  > p:last-child,
+.str-chat__quoted-message-preview
+  .str-chat__message-inner
+  .str-chat__message-bubble
+  .str-chat__message-text
+  .str-chat__message-text-inner
+  > p:last-child {
+  margin-bottom: 0;
+}
+
+.str-chat__message-text-inner p {
   text-wrap: pretty;
 }
 .str-chat__message-text-inner > :first-child {
@@ -546,6 +637,25 @@
   margin-bottom: 0;
 }
 
+/* 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;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.str-chat__li .str-chat__message--other .str-chat__message-bubble-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* Gap between locked attachment card and accompanying text bubble */
+.str-chat__message-bubble-wrapper
+  > .str-chat__message-bubble:not(:first-child) {
+  margin-top: 4px;
+}
+
 /* Standalone tip message (tip without text) */
 .message-tip-standalone {
   display: inline-flex;