@linktr.ee/messaging-react 1.6.5 → 1.7.0

package/package.json

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

package/src/components/ChannelList/index.tsx

@@ -1,6 +1,8 @@
+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 from 'react'
+import React, { useState } from 'react'
 import {
   ChannelList as StreamChannelList,
   useChatContext,
@@ -12,6 +14,11 @@ import { IconButton } from '../IconButton'
 
 import CustomChannelPreview from './CustomChannelPreview'
 
+enum ChannelFilter {
+  All,
+  Unread,
+}
+
 /**
  * Channel list component with customizable header and actions
  */
@@ -50,17 +57,27 @@ export const ChannelList: React.FC<ChannelListProps> = ({
     })
   }
 
+  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 = userId
-      ? { 
-          type: 'messaging', 
-          members: { $in: [userId] }, 
-          hidden: false,
-          last_message_at: { $exists: true }
-        }
-      : { type: 'messaging', last_message_at: { $exists: true } }
+
+    const newFilters = {
+      ...staticFilters,
+      ...(userId && {
+        members: { $in: [userId] },
+        hidden: false,
+      }),
+    }
 
     if (debug) {
       console.log('📺 [ChannelList] 🔍 FILTERS MEMOIZED', {
@@ -71,7 +88,7 @@ export const ChannelList: React.FC<ChannelListProps> = ({
     }
 
     return newFilters
-  }, [client.userID, debug])
+  }, [client.userID, debug, staticFilters])
 
   return (
     <div
@@ -83,7 +100,32 @@ export const ChannelList: React.FC<ChannelListProps> = ({
       {/* 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">
-          <h2 className="text-lg font-semibold text-charcoal">Conversations</h2>
+          <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

package/src/components/ChannelView.stories.tsx

@@ -0,0 +1,365 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React, { useEffect } from 'react'
+import { Channel as ChannelType, QueryChannelAPIResponse, StreamChat } from 'stream-chat'
+import { Chat } from 'stream-chat-react'
+
+import { mockParticipants } from '../stories/mocks'
+
+import { ChannelView } from './ChannelView'
+import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
+
+type ComponentProps = React.ComponentProps<typeof ChannelView>
+
+const meta: Meta<ComponentProps> = {
+  title: 'ChannelView',
+  component: ChannelView,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'responsive',
+    },
+  },
+}
+export default meta
+
+// Mock user for Storybook
+const mockUser = {
+  id: 'storybook-user',
+  name: 'Storybook User',
+  image: 'https://i.pravatar.cc/150?img=1',
+}
+
+// Create a real channel using client.channel() and mock the API responses
+const createMockChannel = async (
+  client: StreamChat,
+  hasMessages = true,
+  followerStatus?: string | boolean
+) => {
+  const participant = mockParticipants[0]
+
+  const mockMessages = hasMessages
+    ? [
+        {
+          id: 'msg-1',
+          text: 'Hey! How are you doing?',
+          type: 'regular' as const,
+          created_at: new Date(Date.now() - 1000 * 60 * 60),
+          updated_at: new Date(Date.now() - 1000 * 60 * 60),
+          user: participant,
+          html: '<p>Hey! How are you doing?</p>',
+          attachments: [],
+          latest_reactions: [],
+          own_reactions: [],
+          reaction_counts: {},
+          reaction_scores: {},
+          reply_count: 0,
+          status: 'received',
+          cid: 'messaging:storybook-channel-1',
+          mentioned_users: [],
+        },
+        {
+          id: 'msg-2',
+          text: "I'm doing great, thanks! How about you?",
+          type: 'regular' as const,
+          created_at: new Date(Date.now() - 1000 * 60 * 50),
+          updated_at: new Date(Date.now() - 1000 * 60 * 50),
+          user: mockUser,
+          html: "<p>I'm doing great, thanks! How about you?</p>",
+          attachments: [],
+          latest_reactions: [],
+          own_reactions: [],
+          reaction_counts: {},
+          reaction_scores: {},
+          reply_count: 0,
+          status: 'received',
+          cid: 'messaging:storybook-channel-1',
+          mentioned_users: [],
+        },
+        {
+          id: 'msg-3',
+          text: 'Pretty good! Just working on some exciting stuff.',
+          type: 'regular' as const,
+          created_at: new Date(Date.now() - 1000 * 60 * 30),
+          updated_at: new Date(Date.now() - 1000 * 60 * 30),
+          user: participant,
+          html: '<p>Pretty good! Just working on some exciting stuff.</p>',
+          attachments: [],
+          latest_reactions: [],
+          own_reactions: [],
+          reaction_counts: {},
+          reaction_scores: {},
+          reply_count: 0,
+          status: 'received',
+          cid: 'messaging:storybook-channel-1',
+          mentioned_users: [],
+        },
+      ]
+    : []
+
+  // Prepare channel data with optional follower status
+  const channelData: Record<string, unknown> = {
+    members: [mockUser.id, participant.id],
+  }
+
+  // Add follower status if provided
+  if (typeof followerStatus === 'string') {
+    channelData.followerStatus = followerStatus
+  } else if (typeof followerStatus === 'boolean') {
+    channelData.isFollower = followerStatus
+  }
+
+  // Create a real channel using the client
+  const channel = client.channel('messaging', 'storybook-channel-1', channelData)
+
+  // Mock the watch method to return mocked data
+  channel.watch = async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    channel.state.messages = mockMessages as unknown as any[]
+    channel.state.members = {
+      [mockUser.id]: {
+        user: mockUser,
+        user_id: mockUser.id,
+      },
+      [participant.id]: {
+        user: participant,
+        user_id: participant.id,
+      },
+    }
+    return {
+      channel: channelData,
+      members: [],
+      messages: mockMessages,
+      watchers: [],
+      pinned_messages: [],
+      duration: '0ms',
+    } as unknown as QueryChannelAPIResponse
+  }
+
+  // Initialize the channel
+  try {
+    await channel.watch()
+  } catch (e) {
+    // Ignore errors - we're in mock mode
+  }
+
+  // Force set the channel data after watch
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(channel as any)._data = channelData
+
+  return channel
+}
+
+type TemplateProps = ComponentProps & { followerStatus?: string | boolean }
+
+const Template: StoryFn<TemplateProps> = (args) => {
+  const { followerStatus, ...channelViewProps } = args
+  const [client] = React.useState(() => {
+    const client = new StreamChat('mock-api-key', {
+      allowServerSideConnect: true,
+    })
+    client.userID = mockUser.id
+    client.user = mockUser
+    return client
+  })
+  
+  const [channel, setChannel] = React.useState<ChannelType | null>(null)
+
+  useEffect(() => {
+    createMockChannel(client, true, followerStatus).then((mockChannel) => {
+      setChannel(mockChannel)
+    })
+  }, [client, followerStatus])
+
+  if (!channel) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <Chat client={client}>
+      <div className="h-screen w-full bg-white">
+        <ChannelView {...channelViewProps} channel={channel} />
+      </div>
+    </Chat>
+  )
+}
+
+export const Default: StoryFn<TemplateProps> = Template.bind({})
+Default.args = {
+  showBackButton: false,
+  onBack: () => console.log('Back clicked'),
+  onLeaveConversation: (channel) =>
+    console.log('Leave conversation:', channel.id),
+  onBlockParticipant: (participantId) =>
+    console.log('Block participant:', participantId),
+  followerStatus: true, // Shows "Subscribed to you"
+}
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default channel view with messages and conversation header, showing subscriber status.',
+    },
+  },
+}
+
+export const WithBackButton: StoryFn<TemplateProps> = Template.bind({})
+WithBackButton.args = {
+  showBackButton: true,
+  onBack: () => console.log('Back clicked'),
+  onLeaveConversation: (channel) =>
+    console.log('Leave conversation:', channel.id),
+  onBlockParticipant: (participantId) =>
+    console.log('Block participant:', participantId),
+}
+WithBackButton.parameters = {
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+  docs: {
+    description: {
+      story:
+        'Channel view with back button visible on mobile (switch to mobile viewport to see the back button).',
+    },
+  },
+}
+
+export const WithMessageActions: StoryFn<TemplateProps> = Template.bind({})
+WithMessageActions.args = {
+  showBackButton: true,
+  onBack: () => console.log('Back clicked'),
+  renderMessageInputActions: (channel) => (
+    <button
+      onClick={() => console.log('Custom action clicked', channel.id)}
+      className="p-2 hover:bg-sand rounded-lg"
+      aria-label="Attach file"
+    >
+      📎
+    </button>
+  ),
+}
+WithMessageActions.parameters = {
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+  docs: {
+    description: {
+      story:
+        'Channel view with custom action buttons in the message input area (e.g., attachment button).',
+    },
+  },
+}
+
+const EmptyTemplate: StoryFn<ComponentProps> = (args) => {
+  const [client] = React.useState(() => {
+    const client = new StreamChat('mock-api-key', {
+      allowServerSideConnect: true,
+    })
+    client.userID = mockUser.id
+    client.user = mockUser
+    return client
+  })
+  
+  const [channel, setChannel] = React.useState<ChannelType | null>(null)
+
+  useEffect(() => {
+    createMockChannel(client, false).then((mockChannel) => {
+      setChannel(mockChannel)
+    })
+  }, [client])
+
+  if (!channel) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <Chat client={client}>
+      <div className="h-screen w-full bg-white">
+        <ChannelView {...args} channel={channel} />
+      </div>
+    </Chat>
+  )
+}
+
+export const EmptyChannel: StoryFn<ComponentProps> = EmptyTemplate.bind({})
+EmptyChannel.args = {
+  showBackButton: true,
+  CustomChannelEmptyState: ChannelEmptyState,
+}
+EmptyChannel.parameters = {
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+  docs: {
+    description: {
+      story:
+        'Channel view with no messages showing a custom empty state component.',
+    },
+  },
+}
+
+export const SubscriberStatus: StoryFn<TemplateProps> = Template.bind({})
+SubscriberStatus.args = {
+  showBackButton: false,
+  followerStatus: true, // Shows "Subscribed to you" in green
+  onLeaveConversation: (channel) =>
+    console.log('Leave conversation:', channel.id),
+  onBlockParticipant: (participantId) =>
+    console.log('Block participant:', participantId),
+}
+SubscriberStatus.parameters = {
+  docs: {
+    description: {
+      story: 'Channel view showing "Subscribed to you" badge in green when isFollower is true.',
+    },
+  },
+}
+
+export const NotSubscribedStatus: StoryFn<TemplateProps> = Template.bind({})
+NotSubscribedStatus.args = {
+  showBackButton: false,
+  followerStatus: false, // Shows "Not subscribed" in gray
+  onLeaveConversation: (channel) =>
+    console.log('Leave conversation:', channel.id),
+  onBlockParticipant: (participantId) =>
+    console.log('Block participant:', participantId),
+}
+NotSubscribedStatus.parameters = {
+  docs: {
+    description: {
+      story: 'Channel view showing "Not subscribed" badge in gray when isFollower is false.',
+    },
+  },
+}
+
+export const CustomFollowerStatus: StoryFn<TemplateProps> = Template.bind({})
+CustomFollowerStatus.args = {
+  showBackButton: false,
+  followerStatus: 'Mutual subscribers', // Custom status text in gray
+  onLeaveConversation: (channel) =>
+    console.log('Leave conversation:', channel.id),
+  onBlockParticipant: (participantId) =>
+    console.log('Block participant:', participantId),
+}
+CustomFollowerStatus.parameters = {
+  docs: {
+    description: {
+      story: 'Channel view with a custom follower status text (shows in gray unless text is "Subscribed to you").',
+    },
+  },
+}
+
+export const NoFollowerStatus: StoryFn<TemplateProps> = Template.bind({})
+NoFollowerStatus.args = {
+  showBackButton: false,
+  followerStatus: undefined, // No badge shown
+  onLeaveConversation: (channel) =>
+    console.log('Leave conversation:', channel.id),
+  onBlockParticipant: (participantId) =>
+    console.log('Block participant:', participantId),
+}
+NoFollowerStatus.parameters = {
+  docs: {
+    description: {
+      story: 'Channel view with no follower status badge displayed.',
+    },
+  },
+}

package/src/components/ChannelView.tsx

@@ -24,6 +24,7 @@ import ActionButton from './ActionButton'
 import { Avatar } from './Avatar'
 import { CloseButton } from './CloseButton'
 import { IconButton } from './IconButton'
+import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 
 // Custom user type with email and username
 type CustomUser = {
@@ -285,26 +286,36 @@ const ChannelInfoDialog: React.FC<{
           <CloseButton onClick={onClose} />
         </div>
 
-        <div className="flex-1 overflow-y-auto px-6 py-6">
-          <div className="rounded-2xl bg-chalk p-4">
-            <div className="flex items-center gap-4">
+        <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 items-center gap-3 w-full">
               <Avatar
                 id={participantId}
                 name={participantName}
                 image={participantImage}
-                size={64}
+                size={88}
+                className="!rounded-full"
               />
-              <div className="min-w-0 flex-1">
+              <div className="flex flex-col min-w-0 flex-1">
                 <p className="truncate text-base font-semibold text-charcoal">
                   {participantName}
                 </p>
                 {participantSecondary && (
-                  <p className="truncate text-sm text-stone">
+                  <p className="truncate text-sm text-[#00000055]">
                     {participantSecondary}
                   </p>
                 )}
                 {followerStatusLabel && (
-                  <span className="mt-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
+                  <span
+                    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',
+                      lineHeight: '133.333%',
+                      letterSpacing: '0.21px',
+                    }}
+                  >
                     {followerStatusLabel}
                   </span>
                 )}
@@ -385,7 +396,7 @@ const ChannelViewInner: React.FC<{
   renderMessageInputActions,
   onLeaveConversation,
   onBlockParticipant,
-  CustomChannelEmptyState,
+  CustomChannelEmptyState = ChannelEmptyState,
 }) => {
   const { channel } = useChannelStateContext()
   const [showInfo, setShowInfo] = useState(false)
@@ -407,11 +418,17 @@ const ChannelViewInner: React.FC<{
       followerStatus?: string
       isFollower?: boolean
     }
-    return channelExtraData.followerStatus
-      ? String(channelExtraData.followerStatus)
-      : channelExtraData.isFollower
-        ? 'Subscribed to you'
-        : undefined
+    
+    // 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'
+    }
+    // Otherwise, don't show any status
+    return undefined
   }, [channel.data])
 
   return (
@@ -433,7 +450,7 @@ const ChannelViewInner: React.FC<{
 
           {/* Show custom empty state when no messages */}
           {!hasMessages && CustomChannelEmptyState && (
-            <div className="absolute inset-0 flex bg-white">
+            <div className="absolute inset-0 w-full h-full bg-white">
               <CustomChannelEmptyState />
             </div>
           )}
@@ -470,7 +487,7 @@ export const ChannelView: React.FC<ChannelViewProps> = ({
   onLeaveConversation,
   onBlockParticipant,
   className,
-  CustomChannelEmptyState,
+  CustomChannelEmptyState = ChannelEmptyState,
 }) => {
   return (
     <div

package/src/components/MessagingShell/ChannelEmptyState.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+/**
+ * Empty state component shown when a channel has no messages
+ */
+export const ChannelEmptyState: React.FC = () => (
+  <div className="messaging-channel-empty-state flex items-center justify-center h-full p-8 text-balance">
+    <div className="text-center max-w-sm">
+      <h2 className="font-semibold text-charcoal mb-2">No messages yet 👀</h2>
+
+      <p className="text-stone text-xs">
+        Share to social media to generate more conversations
+      </p>
+    </div>
+  </div>
+)
+

package/src/index.ts

@@ -9,6 +9,7 @@ export { ParticipantPicker } from './components/ParticipantPicker'
 export { Avatar } from './components/Avatar'
 export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
+export { ChannelEmptyState } from './components/MessagingShell/ChannelEmptyState'
 
 // Providers
 export { MessagingProvider } from './providers/MessagingProvider'