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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.12.6",
+  "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/ChannelList/CustomChannelPreview.tsx

@@ -37,15 +37,23 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
     const lastMessage =
       channel?.state?.messages?.[channel.state.messages.length - 1]
 
-    // Fallback order: text -> attachment URL -> "No messages yet"
     const getLastMessageText = () => {
       if (lastMessage?.text) return lastMessage.text
 
       const attachment = lastMessage?.attachments?.[0]
-      if (attachment?.asset_url) return attachment.asset_url
-      if (attachment?.image_url) return attachment.image_url
-      if (attachment?.og_scrape_url) return attachment.og_scrape_url
-      if (attachment?.thumb_url) return attachment.thumb_url
+      if (attachment) {
+        // Link previews - show the actual URL
+        if (attachment.og_scrape_url) return attachment.og_scrape_url
+
+        // Type-based detection
+        if (attachment.type === 'image') return '📷 Sent an image'
+        if (attachment.type === 'video') return '🎥 Sent a video'
+        if (attachment.type === 'audio') return '🎵 Sent audio'
+        if (attachment.type === 'file') return '📎 Sent a file'
+
+        // Fallback
+        return '📎 Sent an attachment'
+      }
 
       return 'No messages yet'
     }

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>
+  )
+}