@linktr.ee/messaging-react 1.8.2 → 1.8.4

package/package.json

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

package/src/components/Avatar/index.tsx

@@ -33,11 +33,14 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <div
-      className={classNames(
-        'flex-shrink-0 overflow-hidden rounded-[1rem]',
-        className
-      )}
-      style={{ width: `${size}px`, height: `${size}px` }}
+      className={classNames('flex-shrink-0 overflow-hidden', className)}
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: '33%',
+        // @ts-expect-error - corner-shape is not recognized by react types
+        'corner-shape': 'superellipse(1.3)',
+      }}
     >
       {image ? (
         <img
@@ -49,7 +52,7 @@ export const Avatar: React.FC<AvatarProps> = ({
         <div
           aria-hidden="true"
           className={classNames(
-            'flex h-full w-full items-center justify-center font-semibold rounded-sm bg-[#E6E5E3]',
+            'avatar-fallback flex h-full w-full items-center justify-center font-semibold bg-[#E6E5E3] select-none transition-colors',
             fontSizeClass
           )}
         >

package/src/components/ChannelList/CustomChannelPreview.stories.tsx

@@ -305,3 +305,219 @@ WithVeryLongUrl.args = {
   }),
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
+
+// Time-based stories
+export const JustNow: StoryFn<ComponentProps> = Template.bind({})
+JustNow.args = {
+  channel: createMockChannel({
+    id: 'channel-just-now',
+    participantName: 'Kevin Chen',
+    participantId: 'participant-just-now',
+    participantImage: 'https://i.pravatar.cc/150?img=12',
+    lastMessageText: 'I just sent this!',
+    lastMessageTime: new Date(Date.now() - 1000 * 30), // 30 seconds ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const FiveMinutesAgo: StoryFn<ComponentProps> = Template.bind({})
+FiveMinutesAgo.args = {
+  channel: createMockChannel({
+    id: 'channel-5m',
+    participantName: 'Laura Thompson',
+    participantId: 'participant-5m',
+    participantImage: 'https://i.pravatar.cc/150?img=13',
+    lastMessageText: 'Be right back',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const ThreeHoursAgo: StoryFn<ComponentProps> = Template.bind({})
+ThreeHoursAgo.args = {
+  channel: createMockChannel({
+    id: 'channel-3h',
+    participantName: 'Michael Yang',
+    participantId: 'participant-3h',
+    participantImage: 'https://i.pravatar.cc/150?img=14',
+    lastMessageText: 'Got it, thanks!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 3), // 3 hours ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const Yesterday: StoryFn<ComponentProps> = Template.bind({})
+Yesterday.args = {
+  channel: createMockChannel({
+    id: 'channel-yesterday',
+    participantName: 'Nancy Wilson',
+    participantId: 'participant-yesterday',
+    participantImage: 'https://i.pravatar.cc/150?img=15',
+    lastMessageText: 'See you tomorrow',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 30), // 30 hours ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const ThreeDaysAgo: StoryFn<ComponentProps> = Template.bind({})
+ThreeDaysAgo.args = {
+  channel: createMockChannel({
+    id: 'channel-3d',
+    participantName: 'Oscar Martinez',
+    participantId: 'participant-3d',
+    participantImage: 'https://i.pravatar.cc/150?img=16',
+    lastMessageText: 'Have a great weekend!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3), // 3 days ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const LastWeek: StoryFn<ComponentProps> = Template.bind({})
+LastWeek.args = {
+  channel: createMockChannel({
+    id: 'channel-1w',
+    participantName: 'Patricia Brown',
+    participantId: 'participant-1w',
+    participantImage: 'https://i.pravatar.cc/150?img=17',
+    lastMessageText: 'Talk to you next week',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7), // 1 week ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const TwoWeeksAgo: StoryFn<ComponentProps> = Template.bind({})
+TwoWeeksAgo.args = {
+  channel: createMockChannel({
+    id: 'channel-2w',
+    participantName: 'Quinn Anderson',
+    participantId: 'participant-2w',
+    participantImage: 'https://i.pravatar.cc/150?img=18',
+    lastMessageText: 'Sounds good',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 14), // 2 weeks ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const OneMonthAgo: StoryFn<ComponentProps> = Template.bind({})
+OneMonthAgo.args = {
+  channel: createMockChannel({
+    id: 'channel-1m',
+    participantName: 'Rachel Green',
+    participantId: 'participant-1m',
+    participantImage: 'https://i.pravatar.cc/150?img=19',
+    lastMessageText: 'Happy New Year!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30), // 1 month ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const SixMonthsAgo: StoryFn<ComponentProps> = Template.bind({})
+SixMonthsAgo.args = {
+  channel: createMockChannel({
+    id: 'channel-6m',
+    participantName: 'Sam Taylor',
+    participantId: 'participant-6m',
+    participantImage: 'https://i.pravatar.cc/150?img=20',
+    lastMessageText: 'Long time no talk!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 180), // 6 months ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const TimeVariations: StoryFn = () => {
+  const [selectedChannelId, _setSelectedChannelId] = React.useState<
+    string | null
+  >(null)
+
+  const timeVariations = [
+    {
+      id: 'time-just-now',
+      name: 'Just Now',
+      time: new Date(Date.now() - 1000 * 30), // 30 seconds
+      message: 'Just sent',
+    },
+    {
+      id: 'time-5m',
+      name: '5 Minutes',
+      time: new Date(Date.now() - 1000 * 60 * 5),
+      message: '5 minutes ago',
+    },
+    {
+      id: 'time-30m',
+      name: '30 Minutes',
+      time: new Date(Date.now() - 1000 * 60 * 30),
+      message: '30 minutes ago',
+    },
+    {
+      id: 'time-3h',
+      name: '3 Hours',
+      time: new Date(Date.now() - 1000 * 60 * 60 * 3),
+      message: '3 hours ago',
+    },
+    {
+      id: 'time-yesterday',
+      name: 'Yesterday',
+      time: new Date(Date.now() - 1000 * 60 * 60 * 30),
+      message: 'Yesterday',
+    },
+    {
+      id: 'time-3d',
+      name: '3 Days',
+      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3),
+      message: '3 days ago',
+    },
+    {
+      id: 'time-1w',
+      name: '1 Week',
+      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7),
+      message: '1 week ago',
+    },
+    {
+      id: 'time-2w',
+      name: '2 Weeks',
+      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 14),
+      message: '2 weeks ago',
+    },
+    {
+      id: 'time-1m',
+      name: '1 Month',
+      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30),
+      message: '1 month ago',
+    },
+    {
+      id: 'time-6m',
+      name: '6 Months',
+      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 180),
+      message: '6 months ago',
+    },
+  ]
+
+  const channels = timeVariations.map((variation, index) =>
+    createMockChannel({
+      id: variation.id,
+      participantName: variation.name,
+      participantId: `participant-${variation.id}`,
+      participantImage: `https://i.pravatar.cc/150?img=${21 + index}`,
+      lastMessageText: variation.message,
+      lastMessageTime: variation.time,
+    })
+  )
+
+  const selectedChannel =
+    channels.find((c) => c.id === selectedChannelId) || null
+
+  return (
+    <div className="w-[360px] bg-chalk border border-sand rounded-lg overflow-hidden">
+      {channels.map((channel) => (
+        <CustomChannelPreview
+          key={channel.id}
+          channel={channel}
+          selectedChannel={selectedChannel}
+          onChannelSelect={(channel) => {
+            console.log('Channel selected:', channel.id)
+          }}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { Channel } from 'stream-chat'
 import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
+import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { Avatar } from '../Avatar'
 
 /**
@@ -36,10 +37,7 @@ const CustomChannelPreview: React.FC<
     channel?.state?.messages?.[channel.state.messages.length - 1]
   const lastMessageText = lastMessage?.text || 'No messages yet'
   const lastMessageTime = lastMessage?.created_at
-    ? new Date(lastMessage.created_at).toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit',
-      })
+    ? formatRelativeTime(new Date(lastMessage.created_at))
     : ''
 
   // Use the unread prop passed by Stream Chat (reactive and updates automatically)
@@ -60,7 +58,7 @@ const CustomChannelPreview: React.FC<
       type="button"
       onClick={handleClick}
       className={classNames(
-        'w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring',
+        'group w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring',
         {
           'bg-primary-alt/10 border-l-4 border-l-primary': isSelected,
           'hover:bg-sand': !isSelected,
@@ -74,6 +72,7 @@ const CustomChannelPreview: React.FC<
           name={participantName}
           image={participantImage}
           size={44}
+          className="[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
         />
 
         {/* Content column */}

package/src/index.ts

@@ -18,6 +18,9 @@ export { MessagingProvider } from './providers/MessagingProvider'
 export { useMessaging } from './hooks/useMessaging'
 export { useParticipants } from './hooks/useParticipants'
 
+// Utils
+export { formatRelativeTime } from './utils/formatRelativeTime'
+
 // Types
 export type {
   MessagingShellProps,

package/src/styles.css

@@ -94,3 +94,7 @@
 .str-chat__date-separator-line {
   background-color: transparent;
 }
+
+.str-chat__list {
+  background: transparent;
+}

package/src/utils/formatRelativeTime.test.ts

@@ -0,0 +1,161 @@
+import { formatRelativeTime } from './formatRelativeTime'
+
+describe('formatRelativeTime', () => {
+  let originalDate: typeof Date
+
+  beforeEach(() => {
+    // Save the original Date
+    originalDate = global.Date
+  })
+
+  afterEach(() => {
+    // Restore the original Date
+    global.Date = originalDate
+  })
+
+  const mockDate = (isoString: string) => {
+    const mockNow = new Date(isoString)
+    // @ts-expect-error - need to override Date constructor for testing
+    global.Date = class extends originalDate {
+      // @ts-expect-error - need to override Date constructor for testing
+      constructor(...args) {
+        if (args.length === 0) {
+          super(isoString)
+        } else {
+          // @ts-expect-error - need to override Date constructor for testing
+          super(...args)
+        }
+      }
+
+      static now() {
+        return mockNow.getTime()
+      }
+    }
+  }
+
+  describe('Just now', () => {
+    it('should return "Just now" for messages less than 1 minute ago', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2024-01-15T11:59:30Z') // 30 seconds ago
+      expect(formatRelativeTime(date)).toBe('Just now')
+    })
+
+    it('should return "Just now" for messages 0 seconds ago', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2024-01-15T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('Just now')
+    })
+  })
+
+  describe('Today', () => {
+    it('should return time for messages from earlier today', () => {
+      mockDate('2024-01-15T14:08:00Z')
+      const date = new Date('2024-01-15T09:30:00Z')
+      const result = formatRelativeTime(date)
+      // Should be a time like "9:30 AM" (exact format depends on locale)
+      expect(result).toMatch(/\d{1,2}:\d{2}/)
+    })
+
+    it('should return time for messages from late last night (same day)', () => {
+      mockDate('2024-01-15T23:59:00Z')
+      const date = new Date('2024-01-15T00:01:00Z')
+      const result = formatRelativeTime(date)
+      expect(result).toMatch(/\d{1,2}:\d{2}/)
+    })
+  })
+
+  describe('Yesterday', () => {
+    it('should return "Yesterday" for messages from the previous calendar day', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2024-01-14T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('Yesterday')
+    })
+
+    it('should return "Yesterday" even if less than 24 hours ago but previous day', () => {
+      mockDate('2024-01-15T01:00:00Z')
+      const date = new Date('2024-01-14T23:00:00Z') // Only 2 hours ago
+      expect(formatRelativeTime(date)).toBe('Yesterday')
+    })
+
+    it('should NOT return "Yesterday" for messages from 2 days ago', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2024-01-13T12:00:00Z')
+      expect(formatRelativeTime(date)).not.toBe('Yesterday')
+      expect(formatRelativeTime(date)).toBe('2d')
+    })
+  })
+
+  describe('Days ago', () => {
+    it('should return "2d" for messages 2 days ago', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2024-01-13T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('2d')
+    })
+
+    it('should return "3d" for messages 3 days ago', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2024-01-12T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('3d')
+    })
+
+    it('should return "6d" for messages 6 days ago', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2024-01-09T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('6d')
+    })
+  })
+
+  describe('Weeks ago', () => {
+    it('should return "1w" for messages 1 week ago', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2024-01-08T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('1w')
+    })
+
+    it('should return "2w" for messages 2 weeks ago', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2024-01-01T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('2w')
+    })
+
+    it('should return "3w" for messages 3 weeks ago', () => {
+      mockDate('2024-01-29T12:00:00Z')
+      const date = new Date('2024-01-08T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('3w')
+    })
+  })
+
+  describe('Date format', () => {
+    it('should return MM/DD/YY format for messages more than 4 weeks ago', () => {
+      mockDate('2024-02-15T12:00:00Z')
+      const date = new Date('2024-01-01T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('1/1/24')
+    })
+
+    it('should return MM/DD/YY format for messages from last year', () => {
+      mockDate('2024-01-15T12:00:00Z')
+      const date = new Date('2023-12-01T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('12/1/23')
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('should handle month boundaries correctly', () => {
+      mockDate('2024-02-01T12:00:00Z')
+      const date = new Date('2024-01-31T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('Yesterday')
+    })
+
+    it('should handle year boundaries correctly', () => {
+      mockDate('2024-01-01T12:00:00Z')
+      const date = new Date('2023-12-31T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('Yesterday')
+    })
+
+    it('should handle leap year correctly', () => {
+      mockDate('2024-03-01T12:00:00Z')
+      const date = new Date('2024-02-29T12:00:00Z')
+      expect(formatRelativeTime(date)).toBe('Yesterday')
+    })
+  })
+})

package/src/utils/formatRelativeTime.ts

@@ -0,0 +1,62 @@
+/**
+ * Get the number of days between two dates (calendar days in UTC, not 24-hour periods)
+ * Uses UTC to ensure consistent day calculations globally since messages are stored in UTC
+ */
+const getDaysDifference = (date1: Date, date2: Date): number => {
+  const d1 = new Date(
+    Date.UTC(date1.getUTCFullYear(), date1.getUTCMonth(), date1.getUTCDate())
+  )
+  const d2 = new Date(
+    Date.UTC(date2.getUTCFullYear(), date2.getUTCMonth(), date2.getUTCDate())
+  )
+  const diffTime = d2.getTime() - d1.getTime()
+  return Math.floor(diffTime / (1000 * 60 * 60 * 24))
+}
+
+/**
+ * Format a date - shows time for today, relative time for older messages
+ * (e.g., "Just now", "2:08 PM" for today, "Yesterday" for yesterday, "2d" for 2 days ago)
+ */
+export const formatRelativeTime = (date: Date): string => {
+  const now = new Date()
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+  // Less than 1 minute
+  if (diffInSeconds < 60) {
+    return 'Just now'
+  }
+
+  // Check if it's today (same calendar day)
+  const daysDiff = getDaysDifference(date, now)
+
+  // If today, show the time (e.g., "2:08 PM")
+  if (daysDiff === 0) {
+    return date.toLocaleTimeString([], {
+      hour: 'numeric',
+      minute: '2-digit',
+    })
+  }
+
+  // Yesterday
+  if (daysDiff === 1) {
+    return 'Yesterday'
+  }
+
+  // Less than 7 days - show days
+  if (daysDiff < 7) {
+    return `${daysDiff}d`
+  }
+
+  // Less than 4 weeks - show weeks
+  if (daysDiff < 28) {
+    const weeks = Math.floor(daysDiff / 7)
+    return `${weeks}w`
+  }
+
+  // More than 4 weeks - show date as MM/DD/YY
+  return date.toLocaleDateString('en-US', {
+    month: 'numeric',
+    day: 'numeric',
+    year: '2-digit',
+  })
+}