@linktr.ee/messaging-react 1.0.0 → 1.0.2

package/src/components/ChannelList/CustomChannelPreview.stories.tsx

@@ -0,0 +1,303 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import CustomChannelPreview from './CustomChannelPreview'
+import React from 'react'
+
+type ComponentProps = React.ComponentProps<typeof CustomChannelPreview>
+
+const meta: Meta<ComponentProps> = {
+  title: 'ChannelList/CustomChannelPreview',
+  component: CustomChannelPreview,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    (Story) => (
+        <Story />
+    )
+  ]
+}
+export default meta
+
+// Mock user for the client
+const mockUser = {
+  id: 'current-user',
+  name: 'Current User',
+  image: 'https://i.pravatar.cc/150?img=1',
+}
+
+// Helper to create a mock channel
+const createMockChannel = (options: {
+  id: string
+  participantName: string
+  participantId: string
+  participantImage?: string
+  lastMessageText?: string
+  lastMessageTime?: Date
+  unreadCount?: number
+}): any => {
+  const {
+    id,
+    participantName,
+    participantId,
+    participantImage,
+    lastMessageText = 'Hey! How are you doing?',
+    lastMessageTime = new Date(),
+    unreadCount = 0,
+  } = options
+
+  return {
+    id,
+    cid: `messaging:${id}`,
+    _client: {
+      userID: mockUser.id,
+    },
+    state: {
+      members: {
+        [mockUser.id]: {
+          user: mockUser,
+          user_id: mockUser.id,
+        },
+        [participantId]: {
+          user: {
+            id: participantId,
+            name: participantName,
+            image: participantImage,
+          },
+          user_id: participantId,
+        },
+      },
+      messages: lastMessageText ? [
+        {
+          id: `msg-${id}-1`,
+          text: lastMessageText,
+          created_at: lastMessageTime.toISOString(),
+          user: {
+            id: participantId,
+            name: participantName,
+          },
+        },
+      ] : [],
+      unreadCount,
+    },
+  }
+}
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="w-[360px]">
+      <CustomChannelPreview {...args} />
+    </div>
+  )
+}
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {
+  channel: createMockChannel({
+    id: 'channel-1',
+    participantName: 'Alice Johnson',
+    participantId: 'participant-1',
+    participantImage: 'https://i.pravatar.cc/150?img=2',
+    lastMessageText: 'Hey! How are you doing?',
+    lastMessageTime: new Date(),
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const Selected: StoryFn<ComponentProps> = Template.bind({})
+Selected.args = {
+  channel: createMockChannel({
+    id: 'channel-2',
+    participantName: 'Bob Smith',
+    participantId: 'participant-2',
+    participantImage: 'https://i.pravatar.cc/150?img=3',
+    lastMessageText: 'That sounds great!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+  }),
+  selectedChannel: createMockChannel({
+    id: 'channel-2',
+    participantName: 'Bob Smith',
+    participantId: 'participant-2',
+    participantImage: 'https://i.pravatar.cc/150?img=3',
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const WithUnreadMessages: StoryFn<ComponentProps> = Template.bind({})
+WithUnreadMessages.args = {
+  channel: createMockChannel({
+    id: 'channel-3',
+    participantName: 'Carol Williams',
+    participantId: 'participant-3',
+    participantImage: 'https://i.pravatar.cc/150?img=4',
+    lastMessageText: 'Did you see my last message?',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
+    unreadCount: 3,
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const ManyUnreadMessages: StoryFn<ComponentProps> = Template.bind({})
+ManyUnreadMessages.args = {
+  channel: createMockChannel({
+    id: 'channel-4',
+    participantName: 'David Brown',
+    participantId: 'participant-4',
+    participantImage: 'https://i.pravatar.cc/150?img=5',
+    lastMessageText: 'Please check this out!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60), // 1 hour ago
+    unreadCount: 127,
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const NoAvatar: StoryFn<ComponentProps> = Template.bind({})
+NoAvatar.args = {
+  channel: createMockChannel({
+    id: 'channel-5',
+    participantName: 'Emma Davis',
+    participantId: 'participant-5',
+    lastMessageText: 'Thanks for your help!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 30), // 30 minutes ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const NoMessages: StoryFn<ComponentProps> = Template.bind({})
+NoMessages.args = {
+  channel: createMockChannel({
+    id: 'channel-6',
+    participantName: 'Frank Miller',
+    participantId: 'participant-6',
+    participantImage: 'https://i.pravatar.cc/150?img=6',
+    lastMessageText: '',
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const LongMessage: StoryFn<ComponentProps> = Template.bind({})
+LongMessage.args = {
+  channel: createMockChannel({
+    id: 'channel-7',
+    participantName: 'Grace Lee',
+    participantId: 'participant-7',
+    participantImage: 'https://i.pravatar.cc/150?img=7',
+    lastMessageText: 'This is a very long message that should be truncated because it contains way too much text to display in the preview. We want to make sure the component handles this gracefully.',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const LongName: StoryFn<ComponentProps> = Template.bind({})
+LongName.args = {
+  channel: createMockChannel({
+    id: 'channel-8',
+    participantName: 'Alexander Christopher Wellington-Montgomery III',
+    participantId: 'participant-8',
+    lastMessageText: 'Nice to meet you!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 45), // 45 minutes ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const SelectedWithUnread: StoryFn<ComponentProps> = Template.bind({})
+SelectedWithUnread.args = {
+  channel: createMockChannel({
+    id: 'channel-9',
+    participantName: 'Helen Park',
+    participantId: 'participant-9',
+    participantImage: 'https://i.pravatar.cc/150?img=8',
+    lastMessageText: 'Important update!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 10), // 10 minutes ago
+    unreadCount: 5,
+  }),
+  selectedChannel: createMockChannel({
+    id: 'channel-9',
+    participantName: 'Helen Park',
+    participantId: 'participant-9',
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const MultipleChannels: StoryFn = () => {
+  const [selectedChannelId, setSelectedChannelId] = React.useState<string | null>('channel-2')
+
+  const channels = [
+    createMockChannel({
+      id: 'channel-1',
+      participantName: 'Alice Johnson',
+      participantId: 'participant-1',
+      participantImage: 'https://i.pravatar.cc/150?img=2',
+      lastMessageText: 'Hey! How are you doing?',
+      lastMessageTime: new Date(),
+      unreadCount: 2,
+    }),
+    createMockChannel({
+      id: 'channel-2',
+      participantName: 'Bob Smith',
+      participantId: 'participant-2',
+      participantImage: 'https://i.pravatar.cc/150?img=3',
+      lastMessageText: 'That sounds great!',
+      lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+    }),
+    createMockChannel({
+      id: 'channel-3',
+      participantName: 'Carol Williams',
+      participantId: 'participant-3',
+      participantImage: 'https://i.pravatar.cc/150?img=4',
+      lastMessageText: 'See you tomorrow',
+      lastMessageTime: new Date(Date.now() - 1000 * 60 * 60), // 1 hour ago
+      unreadCount: 15,
+    }),
+    createMockChannel({
+      id: 'channel-4',
+      participantName: 'David Brown',
+      participantId: 'participant-4',
+      lastMessageText: 'Thanks!',
+      lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
+    }),
+  ]
+
+  const selectedChannel = channels.find(c => c.id === selectedChannelId) || null
+
+  return (
+    <div className="w-[360px] bg-chalk border border-sand rounded-lg overflow-hidden">
+      {channels.map(channel => (
+        <CustomChannelPreview
+          key={channel.id}
+          channel={channel}
+          selectedChannel={selectedChannel}
+          onChannelSelect={(channel) => {
+            console.log('Channel selected:', channel.id)
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export const WithUrl: StoryFn<ComponentProps> = Template.bind({})
+WithUrl.args = {
+  channel: createMockChannel({
+    id: 'channel-url',
+    participantName: 'Ivan Rodriguez',
+    participantId: 'participant-url',
+    participantImage: 'https://i.pravatar.cc/150?img=10',
+    lastMessageText: 'https://example.com/page',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 8), // 8 minutes ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+
+export const WithVeryLongUrl: StoryFn<ComponentProps> = Template.bind({})
+WithVeryLongUrl.args = {
+  channel: createMockChannel({
+    id: 'channel-long-url',
+    participantName: 'Julia Martinez',
+    participantId: 'participant-long-url',
+    participantImage: 'https://i.pravatar.cc/150?img=11',
+    lastMessageText: 'https://example.com/very/long/path/with/many/segments/and/query/parameters?param1=value1&param2=value2&param3=value3&param4=value4&param5=very-long-value-that-makes-the-url-extremely-long',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 20), // 20 minutes ago
+  }),
+  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+}
+

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
+import { Channel } from 'stream-chat'
+import classNames from 'classnames'
+import { Avatar } from '../Avatar'
+
+/**
+ * Custom channel preview that handles selection
+ */
+const CustomChannelPreview: React.FC<
+  ChannelPreviewUIComponentProps & {
+    selectedChannel?: Channel
+    onChannelSelect: (channel: Channel) => void
+    debug?: boolean
+  }
+> = ({
+  channel,
+  selectedChannel,
+  onChannelSelect,
+  debug = false,
+  ...props
+}) => {
+  const isSelected = selectedChannel?.id === channel?.id
+
+  const handleClick = () => {
+    if (channel) {
+      onChannelSelect(channel)
+    }
+  }
+
+  // Get participant info
+  const members = Object.values(channel?.state?.members || {})
+  const participant = members.find(
+    (member) => member.user?.id && member.user.id !== channel?._client?.userID
+  )
+  const participantName = participant?.user?.name || 'Conversation'
+  const participantImage = participant?.user?.image
+  const participantInitial = participantName.charAt(0).toUpperCase()
+
+  // Get last message and format timestamp
+  const lastMessage =
+    channel?.state?.messages?.[channel.state.messages.length - 1]
+  const lastMessageText = lastMessage?.text || 'No messages yet'
+  const lastMessageTime = lastMessage?.created_at
+    ? new Date(lastMessage.created_at).toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+      })
+    : ''
+
+  // Get unread count from channel state
+  const unread = channel?.state?.unreadCount || 0
+
+  if (debug) {
+    console.log('📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER', {
+      channelId: channel?.id,
+      isSelected,
+      participantName,
+      unread,
+      hasTimestamp: !!lastMessageTime,
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={classNames(
+        'w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring',
+        {
+          'bg-primary-alt/10 border-l-4 border-l-primary': isSelected,
+          'hover:bg-sand': !isSelected,
+        }
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {/* Avatar */}
+        <Avatar
+          id={participant?.user?.id || channel.id || 'unknown'}
+          name={participantName}
+          image={participantImage}
+          size={44}
+        />
+
+        {/* Content column */}
+        <div className="flex-1 min-w-0 flex flex-col gap-1">
+          {/* Name and timestamp row */}
+          <div className="flex items-center justify-between gap-2">
+            <h3
+              className={classNames(
+                'text-sm font-medium truncate',
+                isSelected ? 'text-primary' : 'text-charcoal'
+              )}
+            >
+              {participantName}
+            </h3>
+            {lastMessageTime && (
+              <span className="text-xs text-stone flex-shrink-0">
+                {lastMessageTime}
+              </span>
+            )}
+          </div>
+
+          {/* Message and unread badge row */}
+          <div className="flex items-center justify-between gap-2 min-w-0">
+            <p className="text-xs text-stone mr-2 flex-1 line-clamp-2">
+              {lastMessageText}
+            </p>
+            {unread > 0 && (
+              <span className="bg-primary text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0">
+                {unread > 99 ? '99+' : unread}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </button>
+  )
+}
+
+export default CustomChannelPreview

package/src/components/ChannelList/index.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { NotePencilIcon } from "@phosphor-icons/react/dist/csr/NotePencil";
+
+import classNames from 'classnames';
+import { ChannelList as StreamChannelList, useChatContext } from 'stream-chat-react';
+import type { ChannelListProps } from '../../types';
+import { IconButton } from '../IconButton';
+import { useMessagingContext } from '../../providers/MessagingProvider';
+import CustomChannelPreview from './CustomChannelPreview';
+
+
+/**
+ * Channel list component with customizable header and actions
+ */
+export const ChannelList: React.FC<ChannelListProps> = ({
+  onChannelSelect,
+  selectedChannel,
+  showStartConversation = false,
+  onStartConversation,
+  participantLabel = 'participants',
+  className,
+}) => {
+  // Track renders
+  const renderCountRef = React.useRef(0);
+  renderCountRef.current++;
+
+  // Get debug flag from context
+  const { debug = false } = useMessagingContext();
+
+  if (debug) {
+    console.log('📺 [ChannelList] 🔄 RENDER START', {
+      renderCount: renderCountRef.current,
+      selectedChannelId: selectedChannel?.id,
+      showStartConversation,
+      participantLabel
+    });
+  }
+
+  const { client } = useChatContext();
+
+  if (debug) {
+    console.log('📺 [ChannelList] 📡 CHAT CONTEXT', {
+      renderCount: renderCountRef.current,
+      hasClient: !!client,
+      clientUserId: client?.userID,
+      clientConnected: client?.wsConnection?.isHealthy
+    });
+  }
+
+  // Filter for messaging channels
+  const filters = React.useMemo(() => {
+    const userId = client.userID;
+    const newFilters = userId
+      ? { type: 'messaging', members: { $in: [userId] }, hidden: false }
+      : { type: 'messaging' };
+    
+    if (debug) {
+      console.log('📺 [ChannelList] 🔍 FILTERS MEMOIZED', {
+        renderCount: renderCountRef.current,
+        userId,
+        filters: newFilters
+      });
+    }
+    
+    return newFilters;
+  }, [client.userID, debug]);
+
+  return (
+    <div className={classNames('h-full flex flex-col min-w-0 overflow-hidden', 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">
+          <h2 className="text-lg font-semibold text-charcoal">Conversations</h2>
+          <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">
+        {(() => {
+          if (debug) {
+            console.log('📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST', {
+              renderCount: renderCountRef.current,
+              filters,
+              hasClient: !!client,
+              clientUserId: client?.userID
+            });
+          }
+          
+          return (
+            <StreamChannelList
+              filters={filters}
+              sort={{ last_message_at: -1 }}
+              options={{ limit: 30 }}
+              Preview={(props) => {
+                if (debug) {
+                  console.log('📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER', {
+                    channelId: props.channel?.id,
+                    selectedChannelId: selectedChannel?.id,
+                    isSelected: selectedChannel?.id === props.channel?.id
+                  });
+                }
+                
+                return (
+                  <CustomChannelPreview
+                    {...props}
+                    selectedChannel={selectedChannel}
+                    onChannelSelect={onChannelSelect}
+                    debug={debug}
+                  />
+                );
+              }}
+            />
+          );
+        })()}
+      </div>
+    </div>
+  );
+};