@linktr.ee/messaging-react 1.7.2 → 1.8.1-rc-1763343277

package/package.json

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

package/src/components/ChannelList/index.tsx

@@ -1,33 +1,19 @@
-import SelectPill from '@linktr.ee/component-library/InputSelectPill'
-import SelectPillGroup from '@linktr.ee/component-library/InputSelectPillGroup'
-import { NotePencilIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
-import React, { useState } from 'react'
-import {
-  ChannelList as StreamChannelList,
-  useChatContext,
-} from 'stream-chat-react'
+import React from 'react'
+import { ChannelList as StreamChannelList } from 'stream-chat-react'
 
 import { useMessagingContext } from '../../providers/MessagingProvider'
 import type { ChannelListProps } from '../../types'
-import { IconButton } from '../IconButton'
 
 import CustomChannelPreview from './CustomChannelPreview'
 
-enum ChannelFilter {
-  All,
-  Unread,
-}
-
 /**
  * Channel list component with customizable header and actions
  */
 export const ChannelList: React.FC<ChannelListProps> = ({
   onChannelSelect,
   selectedChannel,
-  showStartConversation = false,
-  onStartConversation,
-  participantLabel = 'participants',
+  filters,
   className,
 }) => {
   // Track renders
@@ -41,55 +27,10 @@ export const ChannelList: React.FC<ChannelListProps> = ({
     console.log('📺 [ChannelList] 🔄 RENDER START', {
       renderCount: renderCountRef.current,
       selectedChannelId: selectedChannel?.id,
-      showStartConversation,
-      participantLabel,
+      filters,
     })
   }
 
-  const { client } = useChatContext()
-
-  if (debug) {
-    console.log('📺 [ChannelList] 📡 CHAT CONTEXT', {
-      renderCount: renderCountRef.current,
-      hasClient: !!client,
-      clientUserId: client?.userID,
-      clientConnected: client?.wsConnection?.isHealthy,
-    })
-  }
-
-  const [staticFilters, setStaticFilters] = useState<{
-    type: string
-    last_message_at: { $exists: boolean }
-    has_unread: boolean | undefined
-  }>({
-    type: 'messaging',
-    last_message_at: { $exists: true },
-    has_unread: undefined,
-  })
-
-  // Filter for messaging channels
-  const filters = React.useMemo(() => {
-    const userId = client.userID
-
-    const newFilters = {
-      ...staticFilters,
-      ...(userId && {
-        members: { $in: [userId] },
-        hidden: false,
-      }),
-    }
-
-    if (debug) {
-      console.log('📺 [ChannelList] 🔍 FILTERS MEMOIZED', {
-        renderCount: renderCountRef.current,
-        userId,
-        filters: newFilters,
-      })
-    }
-
-    return newFilters
-  }, [client.userID, debug, staticFilters])
-
   return (
     <div
       className={classNames(
@@ -97,49 +38,6 @@ export const ChannelList: React.FC<ChannelListProps> = ({
         className
       )}
     >
-      {/* Header */}
-      <div className="px-4 py-4 border-b border-sand bg-chalk">
-        <div className="flex items-center justify-between gap-3 min-h-10 min-w-0">
-          <div>
-            <h2 className="text-lg font-semibold text-charcoal">
-              Conversations
-            </h2>
-            <SelectPillGroup>
-              <SelectPill
-                checked={!filters.has_unread}
-                name="All"
-                onChange={() =>
-                  setStaticFilters((state) => ({
-                    ...state,
-                    has_unread: undefined,
-                  }))
-                }
-                value={ChannelFilter.All}
-              />
-              <SelectPill
-                checked={filters.has_unread}
-                name="Unread"
-                onChange={() =>
-                  setStaticFilters((state) => ({ ...state, has_unread: true }))
-                }
-                value={ChannelFilter.Unread}
-              />
-            </SelectPillGroup>
-          </div>
-          <div className="flex items-center gap-2">
-            {showStartConversation && onStartConversation && (
-              <IconButton
-                label="Start a new conversation"
-                onClick={onStartConversation}
-                className="inline-flex size-10 items-center justify-center"
-              >
-                <NotePencilIcon className="h-5 w-5" />
-              </IconButton>
-            )}
-          </div>
-        </div>
-      </div>
-
       {/* Channel List */}
       <div className="flex-1 overflow-hidden min-w-0">
         {(() => {
@@ -147,13 +45,12 @@ export const ChannelList: React.FC<ChannelListProps> = ({
             console.log('📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST', {
               renderCount: renderCountRef.current,
               filters,
-              hasClient: !!client,
-              clientUserId: client?.userID,
             })
           }
 
           return (
             <StreamChannelList
+              key={JSON.stringify(filters)}
               filters={filters}
               sort={{ last_message_at: -1 }}
               options={{ limit: 30 }}

package/src/components/FaqList/FaqListItem.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames'
 import React from 'react'
-
 export interface FaqListItemProps {
   question: string
   onClick: () => void

package/src/components/MessagingShell/index.tsx

@@ -25,6 +25,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   initialParticipantData,
   CustomChannelEmptyState,
   showChannelList = true,
+  filters,
 }) => {
   const {
     service,
@@ -56,6 +57,28 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
     participantLabel = 'participants',
   } = capabilities
 
+  // Create default filters and merge with provided filters
+  const channelFilters = React.useMemo(() => {
+    const userId = client?.userID
+
+    // Base filters that should always be present
+    const baseFilters = {
+      type: 'messaging',
+      last_message_at: { $exists: true },
+      ...(userId && {
+        members: { $in: [userId] },
+        hidden: false,
+      }),
+    }
+
+    // Merge provided filters with base filters
+    // Provided filters can override base filters if needed
+    return {
+      ...baseFilters,
+      ...filters,
+    }
+  }, [filters, client?.userID])
+
   // Track if we've already synced channels to prevent repeated API calls
   const syncedRef = useRef<string | null>(null)
 
@@ -405,11 +428,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           <ChannelList
             onChannelSelect={handleChannelSelect}
             selectedChannel={selectedChannel || undefined}
-            showStartConversation={
-              showStartConversation && Boolean(participantSource)
-            }
-            onStartConversation={handleStartConversation}
-            participantLabel={participantLabel}
+            filters={channelFilters}
           />
         </div>
 

package/src/styles.css

@@ -72,3 +72,14 @@
     outline: none;
   }
 }
+
+/* Custom Stream Chat message bubble styles */
+.str-chat {
+  /* Incoming messages - light grey bg with dark text */
+  --str-chat__message-bubble-background-color: #F1F0EE;
+  --str-chat__message-bubble-color: color-mix(in srgb, #000000 90%, transparent);
+  
+  /* Own messages - dark bg with white text */
+  --str-chat__own-message-bubble-background-color: #121110;
+  --str-chat__own-message-bubble-color: #fff;
+}

package/src/types.ts

@@ -2,7 +2,7 @@ import type {
   MessagingUser,
   StreamChatServiceConfig,
 } from '@linktr.ee/messaging-core'
-import type { Channel } from 'stream-chat'
+import type { Channel, ChannelFilters } from 'stream-chat'
 
 /**
  * Generic participant interface for different host environments
@@ -49,7 +49,6 @@ export interface MessagingCapabilities {
 export interface MessagingCustomization {
   theme?: 'light' | 'dark' | 'auto'
   accentColor?: string
-  showParticipantStatus?: boolean
 }
 
 /**
@@ -94,6 +93,11 @@ export interface MessagingShellProps {
    * to show only the channel view without the list.
    */
   showChannelList?: boolean
+
+  /**
+   * Filters for channel list. Passed through to StreamChat ChannelList.
+   */
+  filters?: ChannelFilters
 }
 
 /**
@@ -106,6 +110,7 @@ export interface ChannelListProps {
   onStartConversation?: () => void
   participantLabel?: string
   className?: string
+  filters: ChannelFilters
 }
 
 /**