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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.12.7",
+  "version": "1.12.8-rc-1765966726",
   "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/index.tsx

@@ -0,0 +1,9 @@
+import { MessageSimple, type MessageUIComponentProps } from 'stream-chat-react'
+
+export const CustomMessage = (props: MessageUIComponentProps) => {
+  return (
+    <div className="custom-message">
+      <MessageSimple {...props} />
+    </div>
+  )
+}