@linktr.ee/messaging-react 1.13.1 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelView.tsx

@@ -14,6 +14,8 @@ import {
   Window,
   MessageList,
   useChannelStateContext,
+  WithComponents,
+  MessageUIComponentProps,
 } from 'stream-chat-react'
 
 import { useMessagingContext } from '../providers/MessagingProvider'
@@ -23,6 +25,7 @@ import ActionButton from './ActionButton'
 import { Avatar } from './Avatar'
 import { CloseButton } from './CloseButton'
 import { CustomDateSeparator } from './CustomDateSeparator'
+import { CustomMessage } from './CustomMessage'
 import { CustomMessageInput } from './CustomMessageInput'
 import { CustomSystemMessage } from './CustomSystemMessage'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
@@ -488,31 +491,39 @@ const ChannelViewInner: React.FC<{
 
   return (
     <>
-      <Window>
-        {/* Custom Channel Header */}
-        <div className="p-4">
-          <CustomChannelHeader
-            onBack={onBack}
-            showBackButton={showBackButton}
-            onShowInfo={handleShowInfo}
-            canShowInfo={Boolean(participant)}
-          />
-        </div>
+      <WithComponents
+        overrides={{
+          Message: (props: MessageUIComponentProps) => (
+            <CustomMessage {...props} />
+          ),
+        }}
+      >
+        <Window>
+          {/* Custom Channel Header */}
+          <div className="p-4">
+            <CustomChannelHeader
+              onBack={onBack}
+              showBackButton={showBackButton}
+              onShowInfo={handleShowInfo}
+              canShowInfo={Boolean(participant)}
+            />
+          </div>
 
-        {/* Message List */}
-        <div className="flex-1 overflow-hidden relative">
-          <MessageList
-            hideDeletedMessages
-            hideNewMessageSeparator={false}
-            messageActions={[]}
-          />
-        </div>
+          {/* Message List */}
+          <div className="flex-1 overflow-hidden relative">
+            <MessageList
+              hideDeletedMessages
+              hideNewMessageSeparator={false}
+              messageActions={undefined}
+            />
+          </div>
 
-        {/* Message Input */}
-        <CustomMessageInput
-          renderActions={() => renderMessageInputActions?.(channel)}
-        />
-      </Window>
+          {/* Message Input */}
+          <CustomMessageInput
+            renderActions={() => renderMessageInputActions?.(channel)}
+          />
+        </Window>
+      </WithComponents>
 
       {/* Channel Info Dialog */}
       <ChannelInfoDialog

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

@@ -0,0 +1,208 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React, { useEffect } from 'react'
+import {
+  Channel as ChannelType,
+  QueryChannelAPIResponse,
+  StreamChat,
+} from 'stream-chat'
+import { Channel, Chat, MessageList, Window } from 'stream-chat-react'
+
+import { mockParticipants } from '../../stories/mocks'
+
+import { CustomMessage } from './index'
+
+const meta: Meta = {
+  title: 'Components/CustomMessage',
+  component: CustomMessage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+export default meta
+
+const mockUser = {
+  id: 'storybook-user',
+  name: 'Storybook User',
+  image: 'https://i.pravatar.cc/150?img=1',
+}
+
+const createMockChannel = async (
+  client: StreamChat,
+  messages: TemplateProps['messages']
+) => {
+  const participant = mockParticipants[0]
+
+  const mockMessages = messages.map((msg, index) => ({
+    ...msg,
+    type: msg.type ?? ('regular' as const),
+    created_at: new Date(Date.now() - 1000 * 60 * (messages.length - index)),
+    updated_at: new Date(Date.now() - 1000 * 60 * (messages.length - index)),
+    html: `<p>${msg.text}</p>`,
+    attachments: [],
+    latest_reactions: [],
+    own_reactions: [],
+    reaction_counts: {},
+    reaction_scores: {},
+    reply_count: 0,
+    status: 'received',
+    cid: 'messaging:storybook-channel-1',
+    mentioned_users: [],
+  }))
+
+  const channelData = {
+    members: [mockUser.id, participant.id],
+  }
+
+  const channel = client.channel(
+    'messaging',
+    'storybook-channel-1',
+    channelData
+  )
+
+  channel.watch = async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    channel.state.messages = mockMessages as unknown as any[]
+    channel.state.members = {
+      [mockUser.id]: { user: mockUser, user_id: mockUser.id },
+      [participant.id]: { user: participant, user_id: participant.id },
+    }
+    return {
+      channel: channelData,
+      members: [],
+      messages: mockMessages,
+      watchers: [],
+      pinned_messages: [],
+      duration: '0ms',
+    } as unknown as QueryChannelAPIResponse
+  }
+
+  try {
+    await channel.watch()
+  } catch {
+    // Ignore errors in mock mode
+  }
+
+  return channel
+}
+
+interface TemplateProps {
+  messages: Array<{
+    id: string
+    text: string
+    user: typeof mockUser | { id: string; name: string }
+    type?: 'regular' | 'system'
+    metadata?: {
+      custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+      amount_text?: string
+    }
+  }>
+}
+
+const Template: StoryFn<TemplateProps> = ({ messages }) => {
+  const [client] = React.useState(() => {
+    const c = new StreamChat('mock-api-key', { allowServerSideConnect: true })
+    c.userID = mockUser.id
+    c.user = mockUser
+    return c
+  })
+
+  const [channel, setChannel] = React.useState<ChannelType | null>(null)
+
+  useEffect(() => {
+    createMockChannel(client, messages).then(setChannel)
+  }, [client, messages])
+
+  if (!channel) {
+    return <div className="p-4">Loading...</div>
+  }
+
+  return (
+    <Chat client={client}>
+      <div className="h-screen w-full bg-white">
+        <Channel channel={channel} Message={CustomMessage}>
+          <Window>
+            <MessageList />
+          </Window>
+        </Channel>
+      </div>
+    </Chat>
+  )
+}
+
+const participant = mockParticipants[0]
+
+export const Default: StoryFn<TemplateProps> = Template.bind({})
+Default.args = {
+  messages: [
+    { id: 'msg-1', text: 'Hey, how are you?', user: participant },
+    { id: 'msg-2', text: "I'm doing great, thanks!", user: mockUser },
+    { id: 'msg-3', text: 'Awesome! Have a good day.', user: participant },
+  ],
+}
+
+export const WithTipTag: StoryFn<TemplateProps> = Template.bind({})
+WithTipTag.args = {
+  messages: [
+    { id: 'msg-1', text: 'Love your content!', user: participant },
+    {
+      id: 'msg-2',
+      text: "Here's a tip for you! Keep up the great work.",
+      user: participant,
+      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
+    },
+    { id: 'msg-3', text: 'Thank you so much! 🙏', user: mockUser },
+  ],
+}
+
+export const TipOnly: StoryFn<TemplateProps> = Template.bind({})
+TipOnly.args = {
+  messages: [
+    { id: 'msg-1', text: 'Hello!', user: participant },
+    {
+      id: 'msg-2',
+      text: '',
+      user: participant,
+      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
+    },
+    { id: 'msg-3', text: 'Wow, thank you for the tip!', user: mockUser },
+  ],
+}
+
+export const MixedTags: StoryFn<TemplateProps> = Template.bind({})
+MixedTags.args = {
+  messages: [
+    { id: 'msg-1', text: 'Regular message from a fan', user: participant },
+    {
+      id: 'msg-2',
+      text: 'I wanted to tip you for your amazing work!',
+      user: participant,
+      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
+    },
+    { id: 'msg-3', text: 'Thank you!', user: mockUser },
+    {
+      id: 'msg-4',
+      text: '',
+      user: participant,
+      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$25.00' },
+    },
+    {
+      id: 'msg-5',
+      text: 'Wow, a tip with no message! Thanks!',
+      user: mockUser,
+    },
+    {
+      id: 'msg-6',
+      text: 'This is a paid message!',
+      user: participant,
+      metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
+    },
+    { id: 'msg-7', text: 'Got it, thanks!', user: mockUser },
+    {
+      id: 'msg-8',
+      text: 'This is from a chatbot!',
+      user: participant,
+      metadata: { custom_type: 'MESSAGE_CHATBOT' },
+    },
+    { id: 'msg-9', text: 'Thanks for letting me know.', user: mockUser },
+  ],
+}

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

@@ -0,0 +1,119 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import { LocalMessage } from 'stream-chat'
+
+import { MessageTag } from './MessageTag'
+
+type ComponentProps = React.ComponentProps<typeof MessageTag>
+
+const meta: Meta<ComponentProps> = {
+  title: 'Components/MessageTag',
+  component: MessageTag,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+interface MockMessageOptions {
+  metadata?: {
+    custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+    amount_text?: string
+  }
+  text?: string
+}
+
+const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
+  ({
+    id: 'msg-1',
+    text: options?.text ?? 'Hello world',
+    type: 'regular',
+    created_at: new Date(),
+    updated_at: new Date(),
+    metadata: options?.metadata,
+  }) as LocalMessage
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="p-12">
+      <MessageTag {...args} />
+    </div>
+  )
+}
+
+export const Tip: StoryFn<ComponentProps> = Template.bind({})
+Tip.args = {
+  message: createMockMessage({
+    metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
+  }),
+}
+
+export const TipStandalone: StoryFn<ComponentProps> = Template.bind({})
+TipStandalone.args = {
+  message: createMockMessage({
+    text: '',
+    metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
+  }),
+  standalone: true,
+}
+
+export const Paid: StoryFn<ComponentProps> = Template.bind({})
+Paid.args = {
+  message: createMockMessage({
+    metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$25.00' },
+  }),
+}
+
+export const Chatbot: StoryFn<ComponentProps> = Template.bind({})
+Chatbot.args = {
+  message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
+}
+
+export const NoTag: StoryFn<ComponentProps> = Template.bind({})
+NoTag.args = {
+  message: createMockMessage(),
+}
+
+export const AllVariants: StoryFn = () => {
+  return (
+    <div className="p-12 flex flex-col gap-4">
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">Tip:</span>
+        <MessageTag
+          message={createMockMessage({
+            metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$10.50' },
+          })}
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">Paid:</span>
+        <MessageTag
+          message={createMockMessage({
+            metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$25.00' },
+          })}
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">Tip (standalone):</span>
+        <MessageTag
+          message={createMockMessage({
+            text: '',
+            metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
+          })}
+          standalone
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">Chatbot:</span>
+        <MessageTag
+          message={createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } })}
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">No tag:</span>
+        <MessageTag message={createMockMessage()} />
+        <span className="text-xs text-stone">(renders nothing)</span>
+      </div>
+    </div>
+  )
+}

package/src/components/CustomMessage/MessageTag.tsx

@@ -0,0 +1,84 @@
+import { GiftIcon } from '@phosphor-icons/react'
+import { LocalMessage } from 'stream-chat'
+
+interface MessageTagProps {
+  message: LocalMessage
+  /** When true, renders as a standalone bubble instead of a small tag */
+  standalone?: boolean
+}
+
+const SparkleIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 10 10" fill="none">
+    <path
+      d="M10.003 5a.705.705 0 0 1-.469.67L6.7 6.7 5.67 9.535a.715.715 0 0 1-1.34 0L3.3 6.7.466 5.67a.715.715 0 0 1 0-1.34L3.3 3.3 4.33.466a.715.715 0 0 1 1.34 0L6.7 3.3l2.834 1.03a.705.705 0 0 1 .469.67"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+/** Check if a message is a tip based on metadata */
+export const isTipMessage = (message: LocalMessage): boolean => {
+  return message.metadata?.custom_type === 'MESSAGE_TIP'
+}
+
+/** Check if a message is a paid message based on metadata */
+export const isPaidMessage = (message: LocalMessage): boolean => {
+  return message.metadata?.custom_type === 'MESSAGE_PAID'
+}
+
+/** Check if a message is a chatbot message based on metadata */
+export const isChatbotMessage = (message: LocalMessage): boolean => {
+  return message.metadata?.custom_type === 'MESSAGE_CHATBOT'
+}
+
+/** Check if a message has a tip/paid tag (both render the same) */
+export const isTipOrPaidMessage = (message: LocalMessage): boolean => {
+  return isTipMessage(message) || isPaidMessage(message)
+}
+
+/** Check if a message is a tip/paid-only message (no text) */
+export const isTipOnlyMessage = (message: LocalMessage): boolean => {
+  return isTipOrPaidMessage(message) && !message.text?.trim()
+}
+
+export const MessageTag = ({
+  message,
+  standalone = false,
+}: MessageTagProps) => {
+  const isTipOrPaid = isTipOrPaidMessage(message)
+  const isChatbot = isChatbotMessage(message)
+
+  if (!isTipOrPaid && !isChatbot) {
+    return null
+  }
+
+  if (isTipOrPaid) {
+    const amountText = message.metadata?.amount_text
+    if (!amountText) return null
+
+    const className = standalone
+      ? 'message-tip-standalone'
+      : 'message-tag message-tag--tip'
+
+    const label = standalone
+      ? `${amountText} tip`
+      : `Delivered with ${amountText} tip`
+
+    return (
+      <div className={className}>
+        <GiftIcon size={standalone ? 14 : 12} />
+        <span>{label}</span>
+      </div>
+    )
+  }
+
+  // Chatbot tag
+  return (
+    <div className="message-tag message-tag--chatbot">
+      <span className="message-tag__icon" style={{ marginTop: -1 }}>
+        <SparkleIcon />
+      </span>
+      <span className="message-tag__label">Chatbot</span>
+    </div>
+  )
+}