@linktr.ee/messaging-react 3.3.4 → 3.3.5

package/src/components/CustomDateSeparator/CustomDateSeparator.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { daysAgo, hoursAgo, now } from '../../stories/decorators/storyTime'
+
+import { CustomDateSeparator } from '.'
+
+type ComponentProps = React.ComponentProps<typeof CustomDateSeparator>
+
+const meta: Meta<ComponentProps> = {
+  title: 'CustomDateSeparator',
+  component: CustomDateSeparator,
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => (
+  <div className="w-[640px] bg-background-primary p-6">
+    <CustomDateSeparator {...args} />
+  </div>
+)
+
+export const Today: StoryFn<ComponentProps> = Template.bind({})
+Today.args = { date: hoursAgo(2) }
+
+export const Yesterday: StoryFn<ComponentProps> = Template.bind({})
+Yesterday.args = { date: hoursAgo(30) }
+
+export const LastWeek: StoryFn<ComponentProps> = Template.bind({})
+LastWeek.args = { date: daysAgo(6) }
+
+export const Unread: StoryFn<ComponentProps> = Template.bind({})
+Unread.args = { date: now(), unread: true }

package/src/components/CustomLinkPreviewList/CustomLinkPreviewCard.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import { LinkPreview, LinkPreviewStatus } from 'stream-chat'
+
+import CustomLinkPreviewCard from './CustomLinkPreviewCard'
+
+type ComponentProps = React.ComponentProps<typeof CustomLinkPreviewCard>
+
+const meta: Meta<ComponentProps> = {
+  title: 'CustomLinkPreviewCard',
+  component: CustomLinkPreviewCard,
+  parameters: { layout: 'centered' },
+  argTypes: {
+    onDismiss: { action: 'dismissed' },
+  },
+}
+export default meta
+
+const makePreview = (overrides: Partial<LinkPreview>): LinkPreview => ({
+  og_scrape_url: 'https://example.com',
+  status: LinkPreviewStatus.LOADED,
+  ...overrides,
+})
+
+const Template: StoryFn<ComponentProps> = (args) => (
+  <div className="p-12">
+    <CustomLinkPreviewCard {...args} />
+  </div>
+)
+
+export const WithTitleAndImage: StoryFn<ComponentProps> = Template.bind({})
+WithTitleAndImage.args = {
+  link: makePreview({
+    og_scrape_url: 'https://linktr.ee/example',
+    title: 'Linktree — the link in your bio',
+    image_url: '/image-thumbnail.jpg',
+  }),
+}
+
+export const TitleOnly: StoryFn<ComponentProps> = Template.bind({})
+TitleOnly.args = {
+  link: makePreview({
+    og_scrape_url: 'https://example.com/blog/post',
+    title: 'A long article title that explains why widgets are important',
+  }),
+}
+
+export const UrlOnly: StoryFn<ComponentProps> = Template.bind({})
+UrlOnly.args = {
+  link: makePreview({
+    og_scrape_url: 'https://example.com/raw',
+  }),
+}
+
+export const VeryLongUrl: StoryFn<ComponentProps> = Template.bind({})
+VeryLongUrl.args = {
+  link: makePreview({
+    og_scrape_url:
+      'https://example.com/very/long/path/with/many/segments/and/query/parameters?param1=value1&param2=value2',
+    title: 'Page with an extremely long URL',
+    image_url: '/image-thumbnail.jpg',
+  }),
+}

package/src/components/CustomLinkPreviewList/CustomLinkPreviewCard.tsx

@@ -0,0 +1,57 @@
+import { XIcon } from '@phosphor-icons/react'
+import React from 'react'
+import { LinkPreview } from 'stream-chat'
+
+interface CustomLinkPreviewCardProps {
+  link: LinkPreview
+  onDismiss: (url: string) => void
+}
+
+const CustomLinkPreviewCard: React.FC<CustomLinkPreviewCardProps> = ({
+  link,
+  onDismiss,
+}) => {
+  const { og_scrape_url, title, image_url } = link
+
+  const handleDismissLink = (e: React.MouseEvent) => {
+    e.preventDefault()
+    onDismiss(og_scrape_url)
+  }
+
+  return (
+    <a
+      href={og_scrape_url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="relative block w-[280px] max-w-full rounded-[24px] bg-[#121110] p-2 no-underline transition-opacity hover:opacity-90"
+    >
+      {image_url && (
+        <img
+          src={image_url}
+          alt={title || ''}
+          className="h-[180px] w-full rounded-[20px] object-cover"
+        />
+      )}
+      <button
+        type="button"
+        onClick={handleDismissLink}
+        className="absolute right-4 top-4 flex size-6 items-center justify-center rounded-full border border-white/40 bg-white/70 backdrop-blur-2xl focus-ring"
+        aria-label="Close link preview"
+      >
+        <XIcon className="size-4 text-black/90" />
+      </button>
+      <div className="p-2">
+        {title && (
+          <div className="text-[14px] font-medium leading-5 text-white">
+            {title}
+          </div>
+        )}
+        <div className="text-[12px] leading-4 text-white/55">
+          {og_scrape_url}
+        </div>
+      </div>
+    </a>
+  )
+}
+
+export default CustomLinkPreviewCard

package/src/components/CustomLinkPreviewList/index.tsx

@@ -1,12 +1,12 @@
-import { XIcon } from '@phosphor-icons/react'
 import React from 'react'
 import {
-  LinkPreview,
   LinkPreviewsManager,
   LinkPreviewsManagerState,
 } from 'stream-chat'
 import { useMessageComposer, useStateStore } from 'stream-chat-react'
 
+import CustomLinkPreviewCard from './CustomLinkPreviewCard'
+
 const linkPreviewsManagerStateSelector = (state: LinkPreviewsManagerState) => ({
   linkPreviews: Array.from(state.previews.values()).filter(
     (preview) =>
@@ -15,58 +15,6 @@ const linkPreviewsManagerStateSelector = (state: LinkPreviewsManagerState) => ({
   ),
 })
 
-interface CustomLinkPreviewCardProps {
-  link: LinkPreview
-  onDismiss: (url: string) => void
-}
-
-const CustomLinkPreviewCard: React.FC<CustomLinkPreviewCardProps> = ({
-  link,
-  onDismiss,
-}) => {
-  const { og_scrape_url, title, image_url } = link
-
-  const handleDismissLink = (e: React.MouseEvent) => {
-    e.preventDefault()
-    onDismiss(og_scrape_url)
-  }
-
-  return (
-    <a
-      href={og_scrape_url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="relative block w-[280px] max-w-full rounded-[24px] bg-[#121110] p-2 no-underline transition-opacity hover:opacity-90"
-    >
-      {image_url && (
-        <img
-          src={image_url}
-          alt={title || ''}
-          className="h-[180px] w-full rounded-[20px] object-cover"
-        />
-      )}
-      <button
-        type="button"
-        onClick={handleDismissLink}
-        className="absolute right-4 top-4 flex size-6 items-center justify-center rounded-full border border-white/40 bg-white/70 backdrop-blur-2xl focus-ring"
-        aria-label="Close link preview"
-      >
-        <XIcon className="size-4 text-black/90" />
-      </button>
-      <div className="p-2">
-        {title && (
-          <div className="text-[14px] font-medium leading-5 text-white">
-            {title}
-          </div>
-        )}
-        <div className="text-[12px] leading-4 text-white/55">
-          {og_scrape_url}
-        </div>
-      </div>
-    </a>
-  )
-}
-
 export const CustomLinkPreviewList = () => {
   const { linkPreviewsManager } = useMessageComposer()
 

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

@@ -17,6 +17,7 @@ import {
   WithComponents,
 } from 'stream-chat-react'
 
+import { minutesAgo } from '../../stories/decorators/storyTime'
 import {
   currentUserArgType,
   StoryUser,
@@ -46,8 +47,8 @@ const createMockChannel = async (
   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)),
+    created_at: minutesAgo(messages.length - index),
+    updated_at: minutesAgo(messages.length - index),
     html: `<p>${msg.text}</p>`,
     attachments: msg.attachments ?? [],
     latest_reactions: [],

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

@@ -2,6 +2,8 @@ import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { LocalMessage } from 'stream-chat'
 
+import { now } from '../../stories/decorators/storyTime'
+
 import { MessageTag } from './MessageTag'
 
 type ComponentProps = React.ComponentProps<typeof MessageTag>
@@ -28,8 +30,8 @@ const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
     id: 'msg-1',
     text: options?.text ?? 'Hello world',
     type: 'regular',
-    created_at: new Date(),
-    updated_at: new Date(),
+    created_at: now(),
+    updated_at: now(),
     metadata: options?.metadata,
   }) as LocalMessage
 

package/src/components/MediaMessage/MediaMessage.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import type { LocalMessage } from 'stream-chat'
 
+import { now } from '../../stories/decorators/storyTime'
+
 import { MediaMessage } from '.'
 
 const meta: Meta<typeof MediaMessage> = {
@@ -20,8 +22,8 @@ const base = (overrides: Partial<LocalMessage> = {}): LocalMessage => {
     id: 'msg-1',
     text: '',
     type: 'regular',
-    created_at: new Date(),
-    updated_at: new Date(),
+    created_at: now(),
+    updated_at: now(),
     deleted_at: null,
     pinned_at: null,
     status: 'received',

package/src/hooks/useChannelModerationActions.ts

@@ -75,33 +75,46 @@ export const useChannelModerationActions = ({
   logLabel = 'useChannelModerationActions',
 }: UseChannelModerationActionsParams): ChannelModerationActions => {
   const { service, debug } = useMessagingContext()
+  const participantId = participant?.user?.id
+  const willLookup = Boolean(
+    enabled && showBlockParticipant && service && participantId
+  )
+
   const [isParticipantBlocked, setIsParticipantBlocked] = useState(false)
-  const [isCheckingBlockedStatus, setIsCheckingBlockedStatus] =
-    useState(false)
+  // Tracks the participant + service the most recent lookup has completed
+  // for. Keying on both so a service swap (e.g. MessagingProvider rebuilding
+  // its StreamChatService when config/apiKey/debug changes) re-triggers the
+  // loading state for the same participant — otherwise the menu would
+  // briefly show actionable Block/Unblock against the new service with the
+  // old service's blocked result. Computing the flag at render time — rather
+  // than from a useState updated inside useEffect — also closes the brief
+  // window where the menu would render the regular (enabled) Block button
+  // before the effect flipped the disabled placeholder on.
+  const [resolvedFor, setResolvedFor] = useState<{
+    participantId: string
+    service: unknown
+  } | null>(null)
   const [isLeaving, setIsLeaving] = useState(false)
   const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false)
 
+  const isCheckingBlockedStatus =
+    willLookup &&
+    (resolvedFor?.participantId !== participantId ||
+      resolvedFor?.service !== service)
+
   // Resolve whether the participant is blocked whenever the participant or
   // surface visibility changes.
   useEffect(() => {
     // When the lookup is skipped (Block action hidden, surface disabled, or no
     // participant), clear any stale blocked state so a previous participant's
     // value can't leak into the next conversation.
-    if (
-      !enabled ||
-      !showBlockParticipant ||
-      !service ||
-      !participant?.user?.id
-    ) {
+    if (!willLookup || !service || !participantId) {
       setIsParticipantBlocked(false)
-      setIsCheckingBlockedStatus(false)
+      setResolvedFor(null)
       return
     }
 
     let cancelled = false
-    const participantId = participant.user.id
-
-    setIsCheckingBlockedStatus(true)
 
     void (async () => {
       try {
@@ -117,7 +130,12 @@ export const useChannelModerationActions = ({
           console.error(`[${logLabel}] Failed to check blocked status:`, error)
         }
       } finally {
-        if (!cancelled) setIsCheckingBlockedStatus(false)
+        // Mark the lookup as resolved regardless of success/failure so a
+        // rejected `getBlockedUsers()` doesn't leave the menu stuck in the
+        // disabled-spinner state. On failure the blocked flag stays at its
+        // default (false), matching the prior behavior — the user can attempt
+        // to block/unblock and the server rejects if the state is wrong.
+        if (!cancelled) setResolvedFor({ participantId, service })
       }
     })()
 
@@ -125,7 +143,7 @@ export const useChannelModerationActions = ({
     return () => {
       cancelled = true
     }
-  }, [enabled, service, participant?.user?.id, showBlockParticipant, logLabel])
+  }, [willLookup, service, participantId, logLabel])
 
   const handleLeaveConversation = async () => {
     if (isLeaving) return

package/src/stories/decorators/storyTime.ts

@@ -0,0 +1,31 @@
+/**
+ * Deterministic clock for Storybook stories.
+ *
+ * Stories that render relative timestamps ("3m ago", "yesterday") must use these
+ * helpers instead of `new Date()` / `Date.now()`, or visual diffs in Chromatic
+ * will drift on every run.
+ *
+ * FROZEN_NOW is the reference instant. Helpers below produce timestamps relative
+ * to it so the rendered output is identical regardless of when the build runs.
+ */
+
+export const FROZEN_NOW = new Date('2026-01-15T12:00:00.000Z')
+
+const MS_PER_SEC = 1000
+const MS_PER_MIN = 60 * MS_PER_SEC
+const MS_PER_HOUR = 60 * MS_PER_MIN
+const MS_PER_DAY = 24 * MS_PER_HOUR
+
+export const now = (): Date => new Date(FROZEN_NOW)
+
+export const secondsAgo = (n: number): Date =>
+  new Date(FROZEN_NOW.getTime() - n * MS_PER_SEC)
+
+export const minutesAgo = (n: number): Date =>
+  new Date(FROZEN_NOW.getTime() - n * MS_PER_MIN)
+
+export const hoursAgo = (n: number): Date =>
+  new Date(FROZEN_NOW.getTime() - n * MS_PER_HOUR)
+
+export const daysAgo = (n: number): Date =>
+  new Date(FROZEN_NOW.getTime() - n * MS_PER_DAY)