@linktr.ee/messaging-react 1.12.7 → 1.12.8-rc-1765974383

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.12.7",
+  "version": "1.12.8-rc-1765974383",
   "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'
@@ -22,6 +24,7 @@ import type { ChannelViewProps } from '../types'
 import ActionButton from './ActionButton'
 import { Avatar } from './Avatar'
 import { CloseButton } from './CloseButton'
+import { CustomMessage } from './CustomMessage'
 import { CustomMessageInput } from './CustomMessageInput'
 import { CustomSystemMessage } from './CustomSystemMessage'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
@@ -487,31 +490,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,220 @@
+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 { CustomSystemMessage } from '../CustomSystemMessage'
+
+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'
+    tag_type?: 'paid-priority' | 'tip'
+    amount?: number
+    currency?: string
+    hide_date?: boolean
+    system_type?: 'priority'
+  }>
+}
+
+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}
+          MessageSystem={CustomSystemMessage}
+        >
+          <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,
+      tag_type: 'tip',
+      amount: 5.5,
+      currency: 'USD',
+    },
+    { id: 'msg-3', text: 'Thank you so much! 🙏', user: mockUser },
+  ],
+}
+
+export const WithPriorityTag: StoryFn<TemplateProps> = Template.bind({})
+WithPriorityTag.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'This is a priority message that should stand out!',
+      user: participant,
+      tag_type: 'paid-priority',
+    },
+    { id: 'msg-2', text: 'Thanks for the priority message!', 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,
+      custom_data: { tag_type: 'tip', amount: 5.5, currency: 'USD' },
+    },
+    { id: 'msg-3', text: 'Thank you!', user: mockUser },
+    {
+      id: 'msg-4',
+      text: 'Please check this priority question ASAP!',
+      user: participant,
+      custom_data: { tag_type: 'paid-priority' },
+    },
+    { id: 'msg-5', text: 'Sure, let me look into that.', user: mockUser },
+    { id: 'msg-6', text: 'Another regular follow-up.', user: participant },
+  ],
+}
+
+export const WithSystemMessage: StoryFn<TemplateProps> = Template.bind({})
+WithSystemMessage.args = {
+  messages: [
+    { id: 'msg-1', text: 'Hey there!', user: participant },
+    { id: 'msg-2', text: 'Hi! How can I help?', user: mockUser },
+    {
+      id: 'msg-3',
+      text: 'I have an urgent question about my order!',
+      user: participant,
+      custom_data: { tag_type: 'paid-priority' },
+    },
+    {
+      id: 'msg-4',
+      text: 'Storybook User will respond to your priority message within 24 hours.',
+      user: { id: 'system', name: 'System' },
+      type: 'system',
+      system_type: 'priority',
+      hide_date: true,
+    },
+  ],
+}

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

@@ -0,0 +1,80 @@
+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
+
+const createMockMessage = (
+  tagType?: 'tip' | 'paid-priority',
+  options?: { amount?: number; currency?: string }
+): LocalMessage =>
+  ({
+    id: 'msg-1',
+    text: 'Hello world',
+    type: 'regular',
+    created_at: new Date(),
+    updated_at: new Date(),
+    tag_type: tagType,
+    ...options,
+  }) 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('tip', { amount: 5.5, currency: 'USD' }),
+}
+
+export const TipWholeUnit: StoryFn<ComponentProps> = Template.bind({})
+TipWholeUnit.args = {
+  message: createMockMessage('tip', { amount: 5, currency: 'USD' }),
+}
+
+export const PaidPriority: StoryFn<ComponentProps> = Template.bind({})
+PaidPriority.args = {
+  message: createMockMessage('paid-priority'),
+}
+
+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-24">Tip:</span>
+        <MessageTag
+          message={createMockMessage('tip', { amount: 10.5, currency: 'USD' })}
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-24">Priority:</span>
+        <MessageTag message={createMockMessage('paid-priority')} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-24">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,68 @@
+import { CoinVerticalIcon } from '@phosphor-icons/react'
+import { LocalMessage } from 'stream-chat'
+
+interface MessageTagProps {
+  message: LocalMessage
+}
+
+const SparkleIcon = () => (
+  <svg width="10" height="10" 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>
+)
+
+const formatCurrency = (amount: number, currency: string): string => {
+  try {
+    const hasDecimals = amount % 1 !== 0
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: currency || 'USD',
+      minimumFractionDigits: hasDecimals ? 2 : 0,
+      maximumFractionDigits: 2,
+      currencyDisplay: 'narrowSymbol',
+    }).format(amount)
+  } catch {
+    return `${amount} ${currency}`
+  }
+}
+
+const TAG_CONFIG: Record<
+  string,
+  { label: (amount: number, currency: string) => string; icon: React.ReactNode }
+> = {
+  tip: {
+    label: (amount: number, currency: string) =>
+      `Sent with ${formatCurrency(amount, currency)} tip`,
+    icon: <CoinVerticalIcon size={12} />,
+  },
+  'paid-priority': {
+    label: () => 'Priority',
+    icon: <SparkleIcon />,
+  },
+}
+
+export const MessageTag = ({ message }: MessageTagProps) => {
+  const tagType = message.tag_type
+
+  if (!tagType) {
+    return null
+  }
+
+  if (tagType === 'tip' && !message.amount) {
+    return null
+  }
+
+  const config = TAG_CONFIG[tagType]
+
+  return (
+    <div className={`message-tag message-tag--${tagType}`}>
+      <span className="message-tag__icon">{config.icon}</span>
+      <span className="message-tag__label">
+        {config.label(message.amount ?? 0, message.currency ?? '')}
+      </span>
+    </div>
+  )
+}