@linktr.ee/messaging-react 1.7.0 → 1.7.2-rc-1763202567

package/package.json

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

package/src/components/Avatar/index.tsx

@@ -22,7 +22,6 @@ export const Avatar: React.FC<AvatarProps> = ({
 }) => {
   const emoji = getAvatarEmoji(id)
 
-  const DEFAULT_COLOR = '#FBFAF9'
   // Determine font size based on avatar size
   const getFontSizeClass = () => {
     if (size < 32) return 'text-xs'
@@ -50,13 +49,9 @@ export const Avatar: React.FC<AvatarProps> = ({
         <div
           aria-hidden="true"
           className={classNames(
-            'flex h-full w-full items-center justify-center font-semibold rounded-sm',
+            'flex h-full w-full items-center justify-center font-semibold rounded-sm bg-[#FBFAF9]/60',
             fontSizeClass
           )}
-          style={{
-            color: DEFAULT_COLOR,
-            backgroundColor: `color-mix(in srgb, ${DEFAULT_COLOR} 60%, solid)`,
-          }}
         >
           {emoji}
         </div>

package/src/components/ChannelList/index.tsx

@@ -1,33 +1,21 @@
-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 React from 'react'
 import {
   ChannelList as StreamChannelList,
-  useChatContext,
 } 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 +29,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 +40,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,8 +47,6 @@ export const ChannelList: React.FC<ChannelListProps> = ({
             console.log('📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST', {
               renderCount: renderCountRef.current,
               filters,
-              hasClient: !!client,
-              clientUserId: client?.userID,
             })
           }
 

package/src/components/ChannelView.tsx

@@ -287,7 +287,10 @@ const ChannelInfoDialog: React.FC<{
         </div>
 
         <div className="flex-1 px-2 overflow-y-auto w-full">
-          <div className="flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]" style={{ backgroundColor: '#FBFAF9' }}>
+          <div
+            className="flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]"
+            style={{ backgroundColor: '#FBFAF9' }}
+          >
             <div className="flex items-center gap-3 w-full">
               <Avatar
                 id={participantId}
@@ -310,8 +313,14 @@ const ChannelInfoDialog: React.FC<{
                     className="mt-1 rounded-full text-xs font-normal w-fit"
                     style={{
                       padding: '4px 8px',
-                      backgroundColor: followerStatusLabel === 'Subscribed to you' ? '#DCFCE7' : '#F5F5F4',
-                      color: followerStatusLabel === 'Subscribed to you' ? '#008236' : '#78716C',
+                      backgroundColor:
+                        followerStatusLabel === 'Subscribed to you'
+                          ? '#DCFCE7'
+                          : '#F5F5F4',
+                      color:
+                        followerStatusLabel === 'Subscribed to you'
+                          ? '#008236'
+                          : '#78716C',
                       lineHeight: '133.333%',
                       letterSpacing: '0.21px',
                     }}
@@ -335,7 +344,7 @@ const ChannelInfoDialog: React.FC<{
                 ) : (
                   <SignOutIcon className="h-5 w-5" />
                 )}
-                <span>Leave Conversation</span>
+                <span>Delete Conversation</span>
               </ActionButton>
             </li>
             <li>
@@ -418,14 +427,16 @@ const ChannelViewInner: React.FC<{
       followerStatus?: string
       isFollower?: boolean
     }
-    
+
     // If explicit followerStatus is provided, use it
     if (channelExtraData.followerStatus) {
       return String(channelExtraData.followerStatus)
     }
     // If isFollower is explicitly defined, use it to determine status
     if (channelExtraData.isFollower !== undefined) {
-      return channelExtraData.isFollower ? 'Subscribed to you' : 'Not subscribed'
+      return channelExtraData.isFollower
+        ? 'Subscribed to you'
+        : 'Not subscribed'
     }
     // Otherwise, don't show any status
     return undefined

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/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
 }
 
 /**