@linktr.ee/messaging-react 1.10.0 → 1.11.1

package/package.json

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

package/src/components/ChannelView.tsx

@@ -23,6 +23,7 @@ import ActionButton from './ActionButton'
 import { Avatar } from './Avatar'
 import { CloseButton } from './CloseButton'
 import { CustomMessageInput } from './CustomMessageInput'
+import { CustomSystemMessage } from './CustomSystemMessage'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 
 // Custom user type with email and username
@@ -529,7 +530,7 @@ export const ChannelView: React.FC<ChannelViewProps> = ({
         className
       )}
     >
-      <Channel channel={channel}>
+      <Channel channel={channel} MessageSystem={CustomSystemMessage}>
         <ChannelViewInner
           onBack={onBack}
           showBackButton={showBackButton}

package/src/components/CustomSystemMessage/index.tsx

@@ -0,0 +1,16 @@
+import { MessageTimestamp, type EventComponentProps } from 'stream-chat-react'
+
+export const CustomSystemMessage: React.FC<EventComponentProps> = (props) => {
+  const isDateHidden = props.message.hide_date === true
+
+  return (
+    <div className="str-chat__message--system" data-testid="message-system">
+      <div className="str-chat__message--system__text">
+        <div className="str-chat__message--system__line"></div>
+        <p>{props.message.text}</p>
+        <div className="str-chat__message--system__line"></div>
+      </div>
+      {!isDateHidden && <MessageTimestamp message={props.message} />}
+    </div>
+  )
+}

package/src/components/FaqList/index.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import React from 'react'
 
 import { Avatar } from '../Avatar'
@@ -41,7 +40,7 @@ export const FaqList: React.FC<FaqListProps> = ({
   }
 
   return (
-    <div className={classNames('px-4 py-6', className)}>
+    <div className={className}>
       <div className="flex gap-3 items-end">
         {/* Avatar at bottom-left, outside grey background */}
         {(avatarImage || avatarName) && (

package/src/stream-custom-data.ts

@@ -0,0 +1,28 @@
+/**
+ * Stream Chat custom data type augmentation.
+ *
+ * This file extends Stream Chat's type system by augmenting their empty
+ * CustomMessageData interface with our custom properties.
+ *
+ * @see https://getstream.io/chat/docs/sdk/react/guides/typescript_and_custom_data_types/
+ *
+ * Note: We use a .ts extension instead of .d.ts so that this file can be
+ * imported as a module and included in the build. Declaration files (.d.ts)
+ * are ambient and cannot be imported - they require manual build configuration
+ * to be included in the distributed types.
+ */
+
+import 'stream-chat'
+
+declare module 'stream-chat' {
+  interface CustomMessageData {
+    /**
+     * When true, hides the date timestamp in system messages.
+     * Used by CustomSystemMessage component.
+     */
+    hide_date?: boolean
+  }
+}
+
+// Required to make this a module (enables the module augmentation above)
+export {}

package/src/types.ts

@@ -5,6 +5,8 @@ import type {
 import type { Channel, ChannelFilters } from 'stream-chat'
 import { EmptyStateIndicatorProps } from 'stream-chat-react'
 
+import './stream-custom-data'
+
 /**
  * Generic participant interface for different host environments
  */