@linktr.ee/messaging-react 1.22.3 → 1.23.0

package/package.json

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

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

@@ -38,6 +38,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   renderMessagePreview,
   renderChannelBanner,
   customChannelActions,
+  renderMessage,
 }) => {
   const {
     service,
@@ -497,6 +498,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 showStarButton={showStarButton}
                 chatbotVotingEnabled={chatbotVotingEnabled}
                 customChannelActions={customChannelActions}
+                renderMessage={renderMessage}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/types.ts

@@ -162,6 +162,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 +197,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'chatbotVotingEnabled'
   | 'renderChannelBanner'
   | 'customChannelActions'
+  | 'renderMessage'
 >
 
 /**