@linktr.ee/messaging-react 1.6.0 → 1.6.1

package/dist/providers/MessagingProvider.d.ts

@@ -0,0 +1,27 @@
+import { StreamChatService } from '@linktr.ee/messaging-core';
+import React from 'react';
+import type { StreamChat } from 'stream-chat';
+import type { MessagingProviderProps, MessagingCapabilities, MessagingCustomization } from '../types';
+/**
+ * Context value for messaging state and service
+ */
+export interface MessagingContextValue {
+    service: StreamChatService | null;
+    client: StreamChat | null;
+    isConnected: boolean;
+    isLoading: boolean;
+    error: string | null;
+    capabilities: MessagingCapabilities;
+    customization: MessagingCustomization;
+    refreshConnection: () => Promise<void>;
+    debug: boolean;
+}
+/**
+ * Hook to access messaging context
+ */
+export declare const useMessagingContext: () => MessagingContextValue;
+/**
+ * Provider component that wraps messaging-core with React state management
+ */
+export declare const MessagingProvider: React.FC<MessagingProviderProps>;
+//# sourceMappingURL=MessagingProvider.d.ts.map

package/dist/providers/MessagingProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagingProvider.d.ts","sourceRoot":"","sources":["../../src/providers/MessagingProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAON,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAG7C,OAAO,KAAK,EACV,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,UAAU,CAAA;AAEjB;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAAA;IACjC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAA;IACzB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,YAAY,EAAE,qBAAqB,CAAA;IACnC,aAAa,EAAE,sBAAsB,CAAA;IACrC,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,KAAK,EAAE,OAAO,CAAA;CACf;AAcD;;GAEG;AACH,eAAO,MAAM,mBAAmB,6BAAqC,CAAA;AAErE;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkT9D,CAAA"}

package/dist/stories/mocks.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export declare const MockChatProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const MockChatProviderWithChannels: React.FC<{
+    children: React.ReactNode;
+    channelCount?: number;
+}>;
+export declare const mockParticipants: {
+    id: string;
+    name: string;
+    email: string;
+    image: string;
+}[];
+export declare const mockParticipantSource: {
+    loadParticipants: (options?: {
+        search?: string;
+        limit?: number;
+    }) => Promise<{
+        participants: {
+            id: string;
+            name: string;
+            email: string;
+            image: string;
+        }[];
+        hasMore: boolean;
+    }>;
+};
+//# sourceMappingURL=mocks.d.ts.map

package/dist/stories/mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/stories/mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AA+BzB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAYpE,CAAA;AAGD,eAAO,MAAM,4BAA4B,EAAE,KAAK,CAAC,EAAE,CAAC;IAClD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAwDA,CAAA;AAGD,eAAO,MAAM,gBAAgB;;;;;GA+B5B,CAAA;AAGD,eAAO,MAAM,qBAAqB;iCACG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE;;;;;;;;;CAYvE,CAAA"}

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA"}

package/dist/test/utils.d.ts

@@ -0,0 +1,12 @@
+import { RenderOptions, RenderResult } from '@testing-library/react';
+import { ReactElement } from 'react';
+/**
+ * Custom render function that wraps components with common providers
+ */
+export declare function renderWithProviders(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>): RenderResult;
+/**
+ * Re-export everything from React Testing Library
+ */
+export * from '@testing-library/react';
+export { default as userEvent } from '@testing-library/user-event';
+//# sourceMappingURL=utils.d.ts.map

package/dist/test/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/test/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAE,YAAY,EAAa,MAAM,OAAO,CAAA;AAE/C;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,EAAE,EAAE,YAAY,EAChB,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GACvC,YAAY,CAMd;AAED;;GAEG;AACH,cAAc,wBAAwB,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/types.d.ts

@@ -0,0 +1,134 @@
+import type { MessagingUser, StreamChatServiceConfig } from '@linktr.ee/messaging-core';
+import type { Channel } from 'stream-chat';
+/**
+ * Generic participant interface for different host environments
+ */
+export interface Participant {
+    id: string;
+    name: string;
+    email?: string;
+    image?: string;
+    username?: string;
+    phone?: string;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Source for loading participants (followers, team members, etc.)
+ */
+export interface ParticipantSource {
+    loadParticipants: (options?: {
+        search?: string;
+        limit?: number;
+        cursor?: string;
+    }) => Promise<{
+        participants: Participant[];
+        hasMore: boolean;
+        nextCursor?: string;
+    }>;
+    totalCount?: number;
+    loading?: boolean;
+}
+/**
+ * Messaging capabilities configuration
+ */
+export interface MessagingCapabilities {
+    showStartConversation?: boolean;
+    participantSource?: ParticipantSource;
+    participantLabel?: string;
+}
+/**
+ * Customization options
+ */
+export interface MessagingCustomization {
+    theme?: 'light' | 'dark' | 'auto';
+    accentColor?: string;
+    showParticipantStatus?: boolean;
+}
+/**
+ * Main MessagingShell component props
+ */
+export interface MessagingShellProps {
+    capabilities?: MessagingCapabilities;
+    customization?: MessagingCustomization;
+    className?: string;
+    renderMessageInputActions?: (channel: Channel) => React.ReactNode;
+    onChannelSelect?: (channel: Channel) => void;
+    onParticipantSelect?: (participant: Participant) => void;
+    /**
+     * Auto-select a conversation with this participant on mount.
+     * Useful for deep-linking to a specific conversation (e.g., /messages/[accountUuid])
+     *
+     * If a channel with this participant exists, it will be auto-selected.
+     * If no channel exists, you can provide initialParticipantData to automatically
+     * create the channel using the existing ChannelCreator.
+     */
+    initialParticipantFilter?: string;
+    /**
+     * Participant data for auto-creating a channel when initialParticipantFilter
+     * is provided but no channel exists. If this is provided, MessagingShell will
+     * automatically call service.startChannelWithParticipant() to create the channel.
+     *
+     * This reuses the existing ChannelCreator from StreamChatServiceConfig.
+     */
+    initialParticipantData?: Participant;
+    /**
+     * Custom empty state component to render when a channel has no messages.
+     * Useful for showing FAQs or other contextual information in empty channels.
+     */
+    CustomChannelEmptyState?: React.ComponentType;
+    /**
+     * Controls whether the channel list is shown. When false, the channel list
+     * is immediately hidden. Useful for direct conversation mode where you want
+     * to show only the channel view without the list.
+     */
+    showChannelList?: boolean;
+}
+/**
+ * ChannelList component props
+ */
+export interface ChannelListProps {
+    onChannelSelect: (channel: Channel) => void;
+    selectedChannel?: Channel;
+    showStartConversation?: boolean;
+    onStartConversation?: () => void;
+    participantLabel?: string;
+    className?: string;
+}
+/**
+ * ChannelView component props
+ */
+export interface ChannelViewProps {
+    channel: Channel;
+    onBack?: () => void;
+    showBackButton?: boolean;
+    renderMessageInputActions?: (channel: Channel) => React.ReactNode;
+    onLeaveConversation?: (channel: Channel) => void;
+    onBlockParticipant?: (participantId?: string) => void;
+    className?: string;
+    CustomChannelEmptyState?: React.ComponentType;
+}
+/**
+ * ParticipantPicker component props
+ */
+export interface ParticipantPickerProps {
+    participantSource: ParticipantSource;
+    onSelectParticipant: (participant: Participant) => void;
+    onClose: () => void;
+    existingParticipantIds?: Set<string>;
+    participantLabel?: string;
+    searchPlaceholder?: string;
+    className?: string;
+}
+/**
+ * MessagingProvider component props
+ */
+export interface MessagingProviderProps {
+    children: React.ReactNode;
+    user: MessagingUser | null;
+    serviceConfig: Omit<StreamChatServiceConfig, 'apiKey'>;
+    apiKey: string;
+    capabilities?: MessagingCapabilities;
+    customization?: MessagingCustomization;
+    debug?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -14,7 +14,7 @@ const CustomChannelPreview: React.FC<
     onChannelSelect: (channel: Channel) => void
     debug?: boolean
   }
-> = ({ channel, selectedChannel, onChannelSelect, debug = false }) => {
+> = ({ channel, selectedChannel, onChannelSelect, debug = false, unread }) => {
   const isSelected = selectedChannel?.id === channel?.id
 
   const handleClick = () => {
@@ -42,15 +42,15 @@ const CustomChannelPreview: React.FC<
       })
     : ''
 
-  // Get unread count from channel state
-  const unread = channel?.state?.unreadCount || 0
+  // Use the unread prop passed by Stream Chat (reactive and updates automatically)
+  const unreadCount = unread ?? 0
 
   if (debug) {
     console.log('📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER', {
       channelId: channel?.id,
       isSelected,
       participantName,
-      unread,
+      unreadCount,
       hasTimestamp: !!lastMessageTime,
     })
   }
@@ -100,9 +100,9 @@ const CustomChannelPreview: React.FC<
             <p className="text-xs text-stone mr-2 flex-1 line-clamp-2">
               {lastMessageText}
             </p>
-            {unread > 0 && (
+            {unreadCount > 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}
+                {unreadCount > 99 ? '99+' : unreadCount}
               </span>
             )}
           </div>