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

package/dist/index.d.ts

@@ -1,17 +1,263 @@
-import './styles.css';
-export { MessagingShell } from './components/MessagingShell';
-export { ChannelList } from './components/ChannelList';
-export { ChannelView } from './components/ChannelView';
-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';
-export { MessagingProvider } from './providers/MessagingProvider';
-export { useMessaging } from './hooks/useMessaging';
-export { useParticipants } from './hooks/useParticipants';
-export type { MessagingShellProps, ChannelListProps, ChannelViewProps, ParticipantPickerProps, MessagingProviderProps, MessagingCapabilities, ParticipantSource, Participant, } from './types';
-export type { AvatarProps } from './components/Avatar';
-export type { Faq, FaqListProps } from './components/FaqList';
-export type { FaqListItemProps } from './components/FaqList/FaqListItem';
-//# sourceMappingURL=index.d.ts.map
+import { Channel } from 'stream-chat';
+import { ChannelFilters } from 'stream-chat';
+import { default as default_2 } from 'react';
+import { MessagingUser } from '@linktr.ee/messaging-core';
+import { StreamChat } from 'stream-chat';
+import { StreamChatService } from '@linktr.ee/messaging-core';
+import { StreamChatServiceConfig } from '@linktr.ee/messaging-core';
+
+/**
+ * Avatar component that displays a user image or colored initial fallback
+ */
+export declare const Avatar: default_2.FC<AvatarProps>;
+
+export declare interface AvatarProps {
+    id: string;
+    name: string;
+    image?: string;
+    size?: number;
+    className?: string;
+}
+
+/**
+ * Empty state component shown when a channel has no messages
+ */
+export declare const ChannelEmptyState: default_2.FC;
+
+/**
+ * Channel list component with customizable header and actions
+ */
+export declare const ChannelList: default_2.FC<ChannelListProps>;
+
+/**
+ * ChannelList component props
+ */
+export declare interface ChannelListProps {
+    onChannelSelect: (channel: Channel) => void;
+    selectedChannel?: Channel;
+    showStartConversation?: boolean;
+    onStartConversation?: () => void;
+    participantLabel?: string;
+    className?: string;
+    filters: ChannelFilters;
+}
+
+/**
+ * Channel view component with message list and input
+ */
+export declare const ChannelView: default_2.FC<ChannelViewProps>;
+
+/**
+ * ChannelView component props
+ */
+export declare 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;
+}
+
+export declare interface Faq {
+    id: string;
+    question: string;
+    answer: string;
+    enabled: boolean;
+    order?: number | null;
+}
+
+export declare const FaqList: default_2.FC<FaqListProps>;
+
+export declare const FaqListItem: default_2.FC<FaqListItemProps>;
+
+export declare interface FaqListItemProps {
+    question: string;
+    onClick: () => void;
+    loading?: boolean;
+    className?: string;
+}
+
+export declare interface FaqListProps {
+    faqs: Faq[];
+    onFaqClick: (faqId: string) => void;
+    loadingFaqId?: string | null;
+    headerText?: string;
+    className?: string;
+    avatarImage?: string;
+    avatarName?: string;
+}
+
+/**
+ * Messaging capabilities configuration
+ */
+export declare interface MessagingCapabilities {
+    showStartConversation?: boolean;
+    participantSource?: ParticipantSource;
+    participantLabel?: string;
+}
+
+/**
+ * Context value for messaging state and service
+ */
+declare interface MessagingContextValue {
+    service: StreamChatService | null;
+    client: StreamChat | null;
+    isConnected: boolean;
+    isLoading: boolean;
+    error: string | null;
+    capabilities: MessagingCapabilities;
+    customization: MessagingCustomization;
+    refreshConnection: () => Promise<void>;
+    debug: boolean;
+}
+
+/**
+ * Customization options
+ */
+declare interface MessagingCustomization {
+    theme?: 'light' | 'dark' | 'auto';
+    accentColor?: string;
+}
+
+/**
+ * Provider component that wraps messaging-core with React state management
+ */
+export declare const MessagingProvider: default_2.FC<MessagingProviderProps>;
+
+/**
+ * MessagingProvider component props
+ */
+export declare interface MessagingProviderProps {
+    children: React.ReactNode;
+    user: MessagingUser | null;
+    serviceConfig: Omit<StreamChatServiceConfig, 'apiKey'>;
+    apiKey: string;
+    capabilities?: MessagingCapabilities;
+    customization?: MessagingCustomization;
+    debug?: boolean;
+}
+
+/**
+ * Main messaging interface component that combines channel list and channel view
+ */
+export declare const MessagingShell: default_2.FC<MessagingShellProps>;
+
+/**
+ * Main MessagingShell component props
+ */
+export declare 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;
+    /**
+     * Filters for channel list. Passed through to StreamChat ChannelList.
+     */
+    filters?: ChannelFilters;
+}
+
+/**
+ * Generic participant interface for different host environments
+ */
+export declare interface Participant {
+    id: string;
+    name: string;
+    email?: string;
+    image?: string;
+    username?: string;
+    phone?: string;
+    metadata?: Record<string, unknown>;
+}
+
+/**
+ * Generic participant picker component for starting conversations
+ */
+export declare const ParticipantPicker: default_2.FC<ParticipantPickerProps>;
+
+/**
+ * ParticipantPicker component props
+ */
+export declare interface ParticipantPickerProps {
+    participantSource: ParticipantSource;
+    onSelectParticipant: (participant: Participant) => void;
+    onClose: () => void;
+    existingParticipantIds?: Set<string>;
+    participantLabel?: string;
+    searchPlaceholder?: string;
+    className?: string;
+}
+
+/**
+ * Source for loading participants (followers, team members, etc.)
+ */
+export declare interface ParticipantSource {
+    loadParticipants: (options?: {
+        search?: string;
+        limit?: number;
+        cursor?: string;
+    }) => Promise<{
+        participants: Participant[];
+        hasMore: boolean;
+        nextCursor?: string;
+    }>;
+    totalCount?: number;
+    loading?: boolean;
+}
+
+/**
+ * Hook to access messaging service and state
+ */
+export declare const useMessaging: () => MessagingContextValue;
+
+/**
+ * Hook for managing participant loading with search and pagination
+ */
+export declare const useParticipants: (participantSource: ParticipantSource, options?: {
+    initialSearch?: string;
+    pageSize?: number;
+}) => {
+    participants: Participant[];
+    loading: boolean;
+    error: string | null;
+    searchQuery: string;
+    hasMore: boolean;
+    totalCount: number | undefined;
+    loadMore: () => void;
+    search: (query: string) => void;
+    refresh: () => void;
+};
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.8.0",
+  "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/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;
+}