@linktr.ee/messaging-react 1.23.0-rc-1772427007 → 1.24.0

package/package.json

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

package/src/components/ChannelList/ChannelListContext.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import type { Channel, LocalMessage } from 'stream-chat'
+
+type ChannelListContextValue = {
+  selectedChannel?: Channel | null
+  onChannelSelect: (channel: Channel) => void
+  debug: boolean
+  renderMessagePreview?: (
+    message: LocalMessage | undefined,
+    defaultPreview?: string
+  ) => React.ReactNode
+}
+
+const ChannelListContext = React.createContext<ChannelListContextValue>({
+  selectedChannel: undefined,
+  onChannelSelect: () => {},
+  debug: false,
+  renderMessagePreview: undefined,
+})
+
+export const ChannelListProvider = ChannelListContext.Provider
+
+export const useChannelListContext = () => React.useContext(ChannelListContext)

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -1,34 +1,21 @@
 import classNames from 'classnames'
 import React from 'react'
-import { Channel, LocalMessage } from 'stream-chat'
 import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { Avatar } from '../Avatar'
 import { isChatbotMessage } from '../CustomMessage/MessageTag'
 
-type CustomChannelPreviewProps = ChannelPreviewUIComponentProps & {
-  selectedChannel?: Channel | null
-  onChannelSelect: (channel: Channel) => void
-  debug?: boolean
-  renderMessagePreview?: (
-    message: LocalMessage | undefined,
-    defaultPreview?: string
-  ) => React.ReactNode
-}
+import { useChannelListContext } from './ChannelListContext'
 
 /**
  * Custom channel preview that handles selection
  */
-const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
-  ({
-    channel,
-    selectedChannel,
-    onChannelSelect,
-    debug = false,
-    unread,
-    renderMessagePreview,
-  }) => {
+const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
+  ({ channel, unread }) => {
+    const { selectedChannel, onChannelSelect, debug, renderMessagePreview } =
+      useChannelListContext()
+
     const isSelected = selectedChannel?.id === channel?.id
 
     const handleClick = () => {

package/src/components/ChannelList/index.tsx

@@ -1,13 +1,15 @@
 import classNames from 'classnames'
 import React from 'react'
-import type { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 import { ChannelList as StreamChannelList } from 'stream-chat-react'
 
 import { useMessagingContext } from '../../providers/MessagingProvider'
 import type { ChannelListProps } from '../../types'
 
+import { ChannelListProvider } from './ChannelListContext'
 import CustomChannelPreview from './CustomChannelPreview'
 
+const DEFAULT_SORT = { last_message_at: -1 } as const
+
 /**
  * Channel list component with customizable header and actions
  */
@@ -16,6 +18,7 @@ export const ChannelList = React.memo<ChannelListProps>(
     onChannelSelect,
     selectedChannel,
     filters,
+    sort = DEFAULT_SORT,
     className,
     customEmptyStateIndicator,
     renderMessagePreview,
@@ -35,19 +38,15 @@ export const ChannelList = React.memo<ChannelListProps>(
       })
     }
 
-    // Memoize Preview component to prevent re-renders
-    const PreviewComponent = React.useMemo(() => {
-      const Preview = (props: ChannelPreviewUIComponentProps) => (
-        <CustomChannelPreview
-          {...props}
-          selectedChannel={selectedChannel}
-          onChannelSelect={onChannelSelect}
-          debug={debug}
-          renderMessagePreview={renderMessagePreview}
-        />
-      )
-      return Preview
-    }, [selectedChannel, onChannelSelect, debug, renderMessagePreview])
+    const contextValue = React.useMemo(
+      () => ({
+        selectedChannel,
+        onChannelSelect,
+        debug,
+        renderMessagePreview,
+      }),
+      [selectedChannel, onChannelSelect, debug, renderMessagePreview]
+    )
 
     return (
       <div
@@ -58,14 +57,16 @@ export const ChannelList = React.memo<ChannelListProps>(
       >
         {/* Channel List */}
         <div className="flex-1 overflow-hidden min-w-0">
-          <StreamChannelList
-            key={JSON.stringify(filters)}
-            filters={filters}
-            sort={{ last_message_at: -1 }}
-            options={{ limit: 30 }}
-            Preview={PreviewComponent}
-            EmptyStateIndicator={customEmptyStateIndicator}
-          />
+          <ChannelListProvider value={contextValue}>
+            <StreamChannelList
+              key={`${JSON.stringify(filters)}:${JSON.stringify(sort)}`}
+              filters={filters}
+              sort={sort}
+              options={{ limit: 30 }}
+              Preview={CustomChannelPreview}
+              EmptyStateIndicator={customEmptyStateIndicator}
+            />
+          </ChannelListProvider>
         </div>
       </div>
     )

package/src/components/ChannelView.stories.tsx

@@ -1,6 +1,12 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import React, { useEffect } from 'react'
-import { Channel as ChannelType, QueryChannelAPIResponse, StreamChat } from 'stream-chat'
+import {
+  Channel as ChannelType,
+  ChannelMemberResponse,
+  Event,
+  QueryChannelAPIResponse,
+  StreamChat,
+} from 'stream-chat'
 import { Chat } from 'stream-chat-react'
 
 import { mockParticipants } from '../stories/mocks'
@@ -248,6 +254,52 @@ WithMessageActions.parameters = {
   },
 }
 
+export const WithMessageDecoration: StoryFn<TemplateProps> = Template.bind({})
+WithMessageDecoration.args = {
+  showBackButton: false,
+  renderMessage: (messageNode, message) => {
+    const isPriorityMessage = message.id === 'msg-3'
+
+    if (!isPriorityMessage) {
+      return messageNode
+    }
+
+    return (
+      <section className="bg-[#F6F2FF] px-4 py-3 my-4 [&_.str-chat\_\_message-bubble]:bg-white">
+        <header className="mb-3 flex items-center justify-between gap-3">
+          <span className="text-sm font-semibold text-[#6D28D9]">
+            ✧ Marked as a priority by AI
+          </span>
+          <span className="flex items-center gap-3">
+            <button
+              className="text-sm text-[#5B5662] underline underline-offset-2 hover:text-[#2E2A34]"
+              type="button"
+            >
+              Not a priority
+            </button>
+            <button
+              aria-label="Dismiss priority banner"
+              className="text-base text-[#5B5662] hover:text-[#2E2A34]"
+              type="button"
+            >
+              ×
+            </button>
+          </span>
+        </header>
+        {messageNode}
+      </section>
+    )
+  },
+}
+WithMessageDecoration.parameters = {
+  docs: {
+    description: {
+      story:
+        'Decorates one message with a priority treatment using ChannelView renderMessage(messageNode, message).',
+    },
+  },
+}
+
 const WithStarButtonTemplate: StoryFn<ComponentProps> = (args) => {
   const [client] = React.useState(() => {
     const client = new StreamChat('mock-api-key', {

package/src/components/ChannelView.tsx

@@ -18,6 +18,7 @@ import {
   Channel,
   Window,
   MessageList,
+  useMessageContext,
   useChannelStateContext,
   WithComponents,
   MessageUIComponentProps,
@@ -534,6 +535,10 @@ const ChannelViewInner: React.FC<{
   chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
   customChannelActions?: React.ReactNode
+  renderMessage?: (
+    messageNode: React.ReactElement,
+    message: NonNullable<MessageUIComponentProps['message']>
+  ) => React.ReactNode
 }> = ({
   onBack,
   showBackButton,
@@ -548,6 +553,7 @@ const ChannelViewInner: React.FC<{
   chatbotVotingEnabled = false,
   renderChannelBanner,
   customChannelActions,
+  renderMessage,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
@@ -593,9 +599,21 @@ const ChannelViewInner: React.FC<{
     <>
       <WithComponents
         overrides={{
-          Message: (props: MessageUIComponentProps) => (
-            <CustomMessage {...props} chatbotVotingEnabled={chatbotVotingEnabled} />
-          ),
+          Message: (props: MessageUIComponentProps) => {
+            const { message } = useMessageContext('ChannelView')
+            const messageNode = (
+              <CustomMessage
+                {...props}
+                chatbotVotingEnabled={chatbotVotingEnabled}
+              />
+            )
+
+            if (!renderMessage || !message) {
+              return messageNode
+            }
+
+            return renderMessage(messageNode, message)
+          },
         }}
       >
         <Window>
@@ -672,6 +690,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     chatbotVotingEnabled = false,
     renderChannelBanner,
     customChannelActions,
+    renderMessage,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -747,6 +766,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
             chatbotVotingEnabled={chatbotVotingEnabled}
             renderChannelBanner={renderChannelBanner}
             customChannelActions={customChannelActions}
+            renderMessage={renderMessage}
           />
         </Channel>
       </div>

package/src/components/MessagingShell/index.tsx

@@ -11,7 +11,6 @@ import { ParticipantPicker } from '../ParticipantPicker'
 import { EmptyState } from './EmptyState'
 import { ErrorState } from './ErrorState'
 import { LoadingState } from './LoadingState'
-import { createQueryChannelsManager } from './queryChannelsManager'
 
 /**
  * Main messaging interface component that combines channel list and channel view
@@ -39,6 +38,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   renderMessagePreview,
   renderChannelBanner,
   customChannelActions,
+  renderMessage,
 }) => {
   const {
     service,
@@ -95,96 +95,64 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
   // Track if we've already synced channels to prevent repeated API calls
   const syncedRef = useRef<string | null>(null)
-  const syncRequestNonceRef = useRef(0)
-  const onChannelSelectRef = useRef(onChannelSelect)
-  const debugEnabledRef = useRef(debug)
-
-  useEffect(() => {
-    onChannelSelectRef.current = onChannelSelect
-  }, [onChannelSelect])
-
-  const queryChannelsManager = React.useMemo(() => {
-    if (!client) return null
-
-    return createQueryChannelsManager({
-      client,
-      onRetry: ({ requestKey, attempt, delayMs, error }) => {
-        if (!debugEnabledRef.current) return
-
-        console.warn('[MessagingShell] queryChannels rate limited; retrying', {
-          requestKey,
-          attempt,
-          delayMs,
-          error,
-        })
-      },
-    })
-  }, [client])
 
   // Function to sync channels (extracted for reuse)
-  const syncChannels = useCallback(
-    async ({ forceFresh = false }: { forceFresh?: boolean } = {}) => {
-      if (!client || !isConnected || !queryChannelsManager) return
-
-      const userId = client.userID
-      if (!userId) return
-
-      try {
-        if (debug) {
-          console.log('[MessagingShell] Syncing channels for user:', userId)
-        }
-
-        const requestKey = forceFresh
-          ? `sync:${userId}:refresh:${syncRequestNonceRef.current++}`
-          : `sync:${userId}`
+  const syncChannels = useCallback(async () => {
+    if (!client || !isConnected) return
 
-        const channels = await queryChannelsManager.query({
-          requestKey,
-          filters: {
-            type: 'messaging',
-            members: { $in: [userId] },
-          },
-          options: { limit: 100 },
-        })
+    const userId = client.userID
+    if (!userId) return
 
-        const memberIds = new Set<string>()
-        channels.forEach((channel: Channel) => {
-          const members = channel.state.members
-          Object.values(members).forEach((member) => {
-            const memberId = member.user?.id
-            if (memberId && memberId !== userId) {
-              memberIds.add(memberId)
-            }
-          })
-        })
+    try {
+      if (debug) {
+        console.log('[MessagingShell] Syncing channels for user:', userId)
+      }
 
-        // Only update if the set contents have changed to prevent re-renders
-        setExistingParticipantIds((prev) => {
-          if (
-            prev.size === memberIds.size &&
-            [...prev].every((id) => memberIds.has(id))
-          ) {
-            return prev
+      const channels = await client.queryChannels(
+        {
+          type: 'messaging',
+          members: { $in: [userId] },
+        },
+        {},
+        { limit: 100 }
+      )
+
+      const memberIds = new Set<string>()
+      channels.forEach((channel: Channel) => {
+        const members = channel.state.members
+        Object.values(members).forEach((member) => {
+          const memberId = member.user?.id
+          if (memberId && memberId !== userId) {
+            memberIds.add(memberId)
           }
-          return memberIds
         })
-        setHasChannels(channels.length > 0)
-        setChannelsLoaded(true)
-        syncedRef.current = userId // Mark as synced for this user
-
-        if (debug) {
-          console.log('[MessagingShell] Channels synced successfully:', {
-            channelCount: channels.length,
-            memberCount: memberIds.size,
-          })
+      })
+
+      // Only update if the set contents have changed to prevent re-renders
+      setExistingParticipantIds((prev) => {
+        if (
+          prev.size === memberIds.size &&
+          [...prev].every((id) => memberIds.has(id))
+        ) {
+          return prev
         }
-      } catch (error) {
-        console.error('[MessagingShell] Failed to sync channels:', error)
-        // Don't mark as synced on error, allow retry
+        return memberIds
+      })
+      setHasChannels(channels.length > 0)
+      setChannelsLoaded(true)
+      syncedRef.current = userId // Mark as synced for this user
+
+      if (debug) {
+        console.log('[MessagingShell] Channels synced successfully:', {
+          channelCount: channels.length,
+          memberCount: memberIds.size,
+        })
       }
-    },
-    [client, isConnected, debug, queryChannelsManager]
-  )
+    } catch (error) {
+      console.error('[MessagingShell] Failed to sync channels:', error)
+      // Don't mark as synced on error, allow retry
+    }
+  }, [client, isConnected, debug])
 
   // Sync existing channels to track which participants we can already message
   useEffect(() => {
@@ -196,19 +164,12 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     // Prevent repeated sync for the same user
     if (syncedRef.current === userId) return
 
-    void syncChannels()
+    syncChannels()
   }, [client, isConnected, syncChannels])
 
   // Load initial channel for direct conversation mode
   useEffect(() => {
-    if (
-      !initialParticipantFilter ||
-      !client ||
-      !isConnected ||
-      !queryChannelsManager
-    ) {
-      return
-    }
+    if (!initialParticipantFilter || !client || !isConnected) return
 
     const loadInitialChannel = async () => {
       const userId = client.userID
@@ -222,14 +183,14 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           )
         }
 
-        const channels = await queryChannelsManager.query({
-          requestKey: `direct:${userId}:${initialParticipantFilter}`,
-          filters: {
+        const channels = await client.queryChannels(
+          {
             type: 'messaging',
             members: { $eq: [userId, initialParticipantFilter] },
           },
-          options: { limit: 1 },
-        })
+          {},
+          { limit: 1 }
+        )
 
         if (channels.length > 0) {
           setSelectedChannel(channels[0])
@@ -237,7 +198,9 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           setDirectConversationError(null)
 
           // Notify parent component of channel selection
-          onChannelSelectRef.current?.(channels[0])
+          if (onChannelSelect) {
+            onChannelSelect(channels[0])
+          }
 
           if (debug) {
             console.log(
@@ -269,7 +232,9 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
               setDirectConversationError(null)
 
               // Notify parent component of channel selection
-              onChannelSelectRef.current?.(channel)
+              if (onChannelSelect) {
+                onChannelSelect(channel)
+              }
 
               if (debug) {
                 console.log(
@@ -307,7 +272,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
       }
     }
 
-    void loadInitialChannel()
+    loadInitialChannel()
   }, [
     initialParticipantFilter,
     initialParticipantData,
@@ -315,7 +280,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     isConnected,
     service,
     debug,
-    queryChannelsManager,
+    onChannelSelect,
   ])
 
   const handleChannelSelect = useCallback(
@@ -396,7 +361,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
       // Force re-sync to update the existing participants list
       syncedRef.current = null
-      await syncChannels({ forceFresh: true })
+      await syncChannels()
     },
     [syncChannels, debug]
   )
@@ -411,7 +376,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
       // Force re-sync to update the existing participants list
       syncedRef.current = null
-      await syncChannels({ forceFresh: true })
+      await syncChannels()
     },
     [syncChannels, debug]
   )
@@ -533,6 +498,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 showStarButton={showStarButton}
                 chatbotVotingEnabled={chatbotVotingEnabled}
                 customChannelActions={customChannelActions}
+                renderMessage={renderMessage}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/types.ts

@@ -5,6 +5,7 @@ import type {
 import type {
   Channel,
   ChannelFilters,
+  ChannelSort,
   LocalMessage,
   SendMessageAPIResponse,
 } from 'stream-chat'
@@ -67,6 +68,11 @@ export interface ChannelListProps {
   participantLabel?: string
   className?: string
   filters: ChannelFilters
+  /**
+   * Sort order for the channel list query.
+   * Defaults to `{ last_message_at: -1 }` (most recent first).
+   */
+  sort?: ChannelSort
   customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>
   renderMessagePreview?: (
     message: LocalMessage | undefined,
@@ -162,6 +168,21 @@ export interface ChannelViewProps {
    * Use the exported ActionButton for consistent styling.
    */
   customChannelActions?: React.ReactNode
+  /**
+   * Custom render function for decorating each message in the message list.
+   * Receives the default message node and the message object.
+   *
+   * @example
+   * renderMessage={(messageNode, message) => (
+   *   <MessageDecorator isStarred={Boolean(message.pinned)}>
+   *     {messageNode}
+   *   </MessageDecorator>
+   * )}
+   */
+  renderMessage?: (
+    messageNode: React.ReactElement,
+    message: LocalMessage
+  ) => React.ReactNode
 }
 
 /**
@@ -182,6 +203,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'chatbotVotingEnabled'
   | 'renderChannelBanner'
   | 'customChannelActions'
+  | 'renderMessage'
 >
 
 /**