@ermis-network/ermis-chat-react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,1138 @@
+import React$1 from 'react';
+import { Channel as Channel$1, Attachment, FormatMessageResponse, ChannelFilters, ChannelSort, ChannelQueryOptions, ErmisChat, MessageLabel } from '@ermis-network/ermis-chat-sdk';
+import { VListHandle } from 'virtua';
+
+type Theme = 'dark' | 'light';
+type ReadStateEntry = {
+    last_read: Date | string;
+    last_read_message_id?: string;
+    unread_messages: number;
+    user: {
+        id: string;
+        name?: string;
+        avatar?: string;
+    };
+    last_send?: string;
+};
+type ChatContextValue = {
+    client: ErmisChat;
+    activeChannel: Channel$1 | null;
+    setActiveChannel: (channel: Channel$1 | null) => void;
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    messages: FormatMessageResponse[];
+    setMessages: React.Dispatch<React.SetStateAction<FormatMessageResponse[]>>;
+    /** Re-read messages from SDK state into React state */
+    syncMessages: () => void;
+    /** Message being replied to (shown as preview in MessageInput) */
+    quotedMessage: FormatMessageResponse | null;
+    setQuotedMessage: (message: FormatMessageResponse | null) => void;
+    /** Message being edited (shown as preview in MessageInput and alters send behavior) */
+    editingMessage: FormatMessageResponse | null;
+    setEditingMessage: (message: FormatMessageResponse | null) => void;
+    /** Read state per user — maps userId to their read status */
+    readState: Record<string, ReadStateEntry>;
+    setReadState: React.Dispatch<React.SetStateAction<Record<string, ReadStateEntry>>>;
+    /** Message being forwarded (triggers ForwardMessageModal) */
+    forwardingMessage: FormatMessageResponse | null;
+    setForwardingMessage: (message: FormatMessageResponse | null) => void;
+    /** Message ID to jump/scroll to (set by search, cleared after scroll) */
+    jumpToMessageId: string | null;
+    setJumpToMessageId: (id: string | null) => void;
+};
+type ChatProviderProps = {
+    client: ErmisChat;
+    children: React.ReactNode;
+    /** Initial theme, defaults to 'dark' */
+    initialTheme?: Theme;
+};
+type AvatarProps = {
+    /** Image URL */
+    image?: string | null;
+    /** Name used for fallback initials */
+    name?: string;
+    /** Size in pixels (default: 36) */
+    size?: number;
+    /** Additional CSS class name */
+    className?: string;
+};
+type ChannelProps = {
+    children: React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+    /** Custom component shown when no channel is selected */
+    EmptyStateIndicator?: React.ComponentType;
+    /** Replace the default ChannelHeader entirely */
+    HeaderComponent?: React.ComponentType<ChannelHeaderData>;
+    /** Replace the default ForwardMessageModal entirely */
+    ForwardMessageModalComponent?: React.ComponentType<ForwardMessageModalProps>;
+};
+type ChannelHeaderProps = {
+    /** Additional CSS class name */
+    className?: string;
+    /** Custom avatar component */
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Override channel name */
+    title?: string;
+    /** Override channel image */
+    image?: string;
+    /** Subtitle text (e.g. member count, online status) */
+    subtitle?: string;
+    /** Render custom content on the right side */
+    renderRight?: (channel: Channel$1, actionDisabled?: boolean) => React.ReactNode;
+    /** Override default title rendering */
+    renderTitle?: (channel: Channel$1) => React.ReactNode;
+};
+/** Data passed to a fully custom HeaderComponent */
+type ChannelHeaderData = {
+    channel: Channel$1;
+    name: string;
+    image?: string;
+};
+type ChannelItemProps = {
+    channel: Channel$1;
+    isActive: boolean;
+    hasUnread: boolean;
+    unreadCount: number;
+    lastMessageText: string;
+    lastMessageUser: string;
+    onSelect: (channel: Channel$1) => void;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    /** Whether the current user has blocked this channel (messaging only) */
+    isBlocked?: boolean;
+    /** Whether the current user is pending an invitation for this channel */
+    isPending?: boolean;
+    /** Label for the pending channel badge indicator */
+    pendingBadgeLabel?: string;
+    /** Label for the blocked channel badge indicator */
+    blockedBadgeLabel?: string;
+};
+type ChannelListProps = {
+    filters?: ChannelFilters;
+    sort?: ChannelSort;
+    options?: ChannelQueryOptions;
+    renderChannel?: (channel: Channel$1, isActive: boolean) => React.ReactNode;
+    onChannelSelect?: (channel: Channel$1) => void;
+    className?: string;
+    LoadingIndicator?: React.ComponentType<{
+        text?: string;
+    }>;
+    EmptyStateIndicator?: React.ComponentType<{
+        text?: string;
+    }>;
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Replace the default channel list item component */
+    ChannelItemComponent?: React.ComponentType<ChannelItemProps>;
+    /** Label for the pending invites accordion header */
+    pendingInvitesLabel?: string | ((count: number) => string);
+    /** Label for the regular channels section header */
+    channelsLabel?: string;
+    /** Label for the pending channel badge indicator */
+    pendingBadgeLabel?: string;
+    /** Label for the loading indicator */
+    loadingLabel?: string;
+    /** Label for the empty state indicator */
+    emptyStateLabel?: string;
+    /** Label for the blocked channel badge hover */
+    blockedBadgeLabel?: string;
+};
+type AttachmentProps = {
+    attachment: Attachment;
+};
+type MessageRendererProps = {
+    message: FormatMessageResponse;
+    isOwnMessage: boolean;
+};
+type MessageBubbleProps = {
+    message: FormatMessageResponse;
+    isOwnMessage: boolean;
+    children: React.ReactNode;
+};
+type DateSeparatorProps = {
+    label: string;
+};
+type JumpToLatestProps = {
+    onClick: () => void;
+};
+type MessageListProps = {
+    /** Fully custom render for each message */
+    renderMessage?: (message: FormatMessageResponse, isOwnMessage: boolean) => React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+    /** Custom empty state component */
+    EmptyStateIndicator?: React.ComponentType;
+    /** Custom avatar component */
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Custom message bubble wrapper */
+    MessageBubble?: React.ComponentType<MessageBubbleProps>;
+    /** Custom renderers per message type */
+    messageRenderers?: Partial<Record<MessageLabel, React.ComponentType<MessageRendererProps>>>;
+    /** Number of older messages to load per page (default: 25) */
+    loadMoreLimit?: number;
+    /** Custom date separator component */
+    DateSeparatorComponent?: React.ComponentType<DateSeparatorProps>;
+    /** Custom message item component (replaces the entire row) */
+    MessageItemComponent?: React.ComponentType<MessageItemProps>;
+    /** Custom system message item component */
+    SystemMessageItemComponent?: React.ComponentType<SystemMessageItemProps>;
+    /** Custom "Jump to latest" button */
+    JumpToLatestButton?: React.ComponentType<JumpToLatestProps>;
+    /** Custom quoted message preview inside message items */
+    QuotedMessagePreviewComponent?: React.ComponentType<QuotedMessagePreviewProps>;
+    /** Custom message actions component (hover buttons + dropdown) */
+    MessageActionsBoxComponent?: React.ComponentType<MessageActionsBoxProps>;
+    /** Show pinned messages bar (default: true) */
+    showPinnedMessages?: boolean;
+    /** Custom pinned messages component */
+    PinnedMessagesComponent?: React.ComponentType<any>;
+    /** Custom reply preview component in MessageInput */
+    ReplyPreviewComponent?: React.ComponentType<ReplyPreviewProps>;
+    /** Show read receipts (default: true) */
+    showReadReceipts?: boolean;
+    /** Custom read receipts component (replaces the entire read-receipts row) */
+    ReadReceiptsComponent?: React.ComponentType<ReadReceiptsProps>;
+    /** Custom read receipts tooltip component */
+    ReadReceiptsTooltipComponent?: React.ComponentType<ReadReceiptsTooltipProps>;
+    /** Max visible avatars in read receipts before showing +N (default: 5) */
+    readReceiptsMaxAvatars?: number;
+    /** Show typing indicator (default: true) */
+    showTypingIndicator?: boolean;
+    /** Custom typing indicator component */
+    TypingIndicatorComponent?: React.ComponentType;
+    /** Custom component for message reactions */
+    MessageReactionsComponent?: React.ComponentType<MessageReactionsProps>;
+    /** I18n Labels */
+    emptyTitle?: string;
+    emptySubtitle?: string;
+    jumpToLatestLabel?: string;
+    bannedOverlayTitle?: string;
+    bannedOverlaySubtitle?: string;
+    blockedOverlayTitle?: string;
+    blockedOverlaySubtitle?: string;
+    pendingOverlayTitle?: string;
+    pendingOverlaySubtitle?: string;
+    pendingAcceptLabel?: string;
+    pendingRejectLabel?: string;
+};
+type ReactionUser = {
+    id: string;
+    name?: string;
+    avatar?: string;
+};
+type LatestReaction = {
+    user: ReactionUser;
+    type: string;
+};
+type MessageReactionsProps = {
+    /** Map of reaction type to count */
+    reactionCounts?: Record<string, number>;
+    /** Array of current user's reactions */
+    ownReactions?: LatestReaction[];
+    /** Array of latest reactions to show in tooltip/hover */
+    latestReactions?: LatestReaction[];
+    /** Avatar Component if consumer wants to use it in tooltips */
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Callback when clicking a reaction */
+    onClickReaction?: (type: string) => void;
+};
+type ReadReceiptUser = {
+    id: string;
+    name?: string;
+    avatar?: string;
+    last_read?: Date | string;
+};
+type ReadReceiptsTooltipProps = {
+    /** All users who have read this message */
+    readers: ReadReceiptUser[];
+    /** Avatar component for rendering user avatars */
+    AvatarComponent: React.ComponentType<AvatarProps>;
+};
+type ReadReceiptsProps = {
+    /** Users who have read the message */
+    readers: ReadReceiptUser[];
+    /** Max number of visible avatars before showing +N overflow (default: 5) */
+    maxAvatars?: number;
+    /** Avatar component for rendering user avatars */
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    /** Custom tooltip component */
+    TooltipComponent?: React.ComponentType<ReadReceiptsTooltipProps>;
+    /** Whether to show the tooltip on hover (default: true) */
+    showTooltip?: boolean;
+    /** Whether the message belongs to the current user (used to show 'Sent/Delivered' status when nobody has read it) */
+    isOwnMessage?: boolean;
+    /** Whether the message is the last in a group of consecutive messages by the same user */
+    isLastInGroup?: boolean;
+    /** The message status (e.g., 'sending', 'failed', 'sent') */
+    status?: string;
+};
+type MessageItemProps = {
+    message: FormatMessageResponse;
+    isOwnMessage: boolean;
+    isFirstInGroup: boolean;
+    isLastInGroup: boolean;
+    isHighlighted: boolean;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    MessageBubble: React.ComponentType<MessageBubbleProps>;
+    MessageRenderer: React.ComponentType<MessageRendererProps>;
+    onClickQuote?: (messageId: string) => void;
+    /** Custom quoted message preview component */
+    QuotedMessagePreviewComponent?: React.ComponentType<QuotedMessagePreviewProps>;
+    /** Custom message actions component (hover buttons + dropdown) */
+    MessageActionsBoxComponent?: React.ComponentType<MessageActionsBoxProps>;
+    /** Users who have read up to this message */
+    readBy?: Array<{
+        id: string;
+        name?: string;
+        avatar?: string;
+    }>;
+    /** Custom component for message reactions */
+    MessageReactionsComponent?: React.ComponentType<MessageReactionsProps>;
+    /** I18n Label for forwarded message */
+    forwardedLabel?: string;
+    /** I18n Label for edited state */
+    editedLabel?: string;
+};
+type SystemMessageItemProps = {
+    message: FormatMessageResponse;
+    isOwnMessage: boolean;
+    SystemRenderer: React.ComponentType<MessageRendererProps>;
+};
+type SendButtonProps = {
+    disabled: boolean;
+    onClick: () => void;
+};
+type AttachButtonProps = {
+    disabled: boolean;
+    onClick: () => void;
+};
+/** Props passed to a consumer-provided emoji picker component */
+type EmojiPickerProps = {
+    /** Called when user selects an emoji — insert the emoji string into the input */
+    onSelect: (emoji: string) => void;
+    /** Called when the picker should close (e.g. click outside) */
+    onClose: () => void;
+};
+/** Props passed to the emoji button component */
+type EmojiButtonProps = {
+    /** Whether the picker is currently open */
+    active: boolean;
+    /** Toggle the picker */
+    onClick: () => void;
+};
+type MessageInputProps = {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Callback after message is sent */
+    onSend?: (text: string) => void;
+    /** Additional CSS class name */
+    className?: string;
+    /** Custom send button component */
+    SendButton?: React.ComponentType<SendButtonProps>;
+    /** Custom attach button component */
+    AttachButton?: React.ComponentType<AttachButtonProps>;
+    /** Custom file preview component */
+    FilesPreviewComponent?: React.ComponentType<FilesPreviewProps>;
+    /** Custom mention suggestions component */
+    MentionSuggestionsComponent?: React.ComponentType<MentionSuggestionsProps>;
+    /** Disable file attachments entirely */
+    disableAttachments?: boolean;
+    /** Disable @mention suggestions (overrides auto-detection) */
+    disableMentions?: boolean;
+    /** Render custom content above the input row (e.g. reply preview) */
+    renderAbove?: () => React.ReactNode;
+    /** Hook called before sending — return false to cancel */
+    onBeforeSend?: (text: string, attachments: FilePreviewItem[]) => boolean | Promise<boolean>;
+    /** Consumer-provided emoji picker component (not bundled — bring your own) */
+    EmojiPickerComponent?: React.ComponentType<EmojiPickerProps>;
+    /** Custom emoji button component (defaults to 😀 toggle button) */
+    EmojiButtonComponent?: React.ComponentType<EmojiButtonProps>;
+    /** Custom reply preview component */
+    ReplyPreviewComponent?: React.ComponentType<ReplyPreviewProps>;
+    /** Custom edit preview component */
+    EditPreviewComponent?: React.ComponentType<{
+        message: FormatMessageResponse;
+        onDismiss: () => void;
+        editingMessageLabel?: string;
+    }>;
+    /** I18n Label for banned state */
+    bannedLabel?: string;
+    /** I18n Label for blocked state (messaging channels) */
+    blockedLabel?: string;
+    /** I18n Label for links disabled error */
+    linksDisabledLabel?: string;
+    /** I18n Label for keyword blocked error */
+    keywordBlockedLabel?: (match: string) => string;
+    /** I18n Label for sending capability disabled */
+    sendDisabledLabel?: string;
+    /** I18n Label for slow mode active */
+    slowModeLabel?: (cooldown: number) => React.ReactNode;
+};
+type ReplyPreviewProps = {
+    message: FormatMessageResponse;
+    onDismiss: () => void;
+    replyingToLabel?: string;
+};
+type MessageActionsBoxProps = {
+    message: FormatMessageResponse;
+    isOwnMessage: boolean;
+    onReply?: (message: FormatMessageResponse) => void;
+    onForward?: (message: FormatMessageResponse) => void;
+    onPinToggle?: (message: FormatMessageResponse, isPinned: boolean) => void;
+    onEdit?: (message: FormatMessageResponse) => void;
+    onCopy?: (message: FormatMessageResponse) => void;
+    onDelete?: (message: FormatMessageResponse) => void;
+    onDeleteForMe?: (message: FormatMessageResponse) => void;
+    /** I18n Labels */
+    pinLabel?: string;
+    unpinLabel?: string;
+    editLabel?: string;
+    copyLabel?: string;
+    deleteForMeLabel?: string;
+    deleteForEveryoneLabel?: string;
+};
+type ForwardChannelItemProps = {
+    channel: Channel$1;
+    selected: boolean;
+    onToggle: (channel: Channel$1) => void;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+};
+type ForwardMessageModalProps = {
+    message: FormatMessageResponse;
+    onDismiss: () => void;
+    /** Custom channel list item for the picker */
+    ChannelItemComponent?: React.ComponentType<ForwardChannelItemProps>;
+    /** Custom search input component */
+    SearchInputComponent?: React.ComponentType<{
+        value: string;
+        onChange: (v: string) => void;
+    }>;
+};
+type PinnedMessageItemProps = {
+    message: FormatMessageResponse;
+    isOwnMessage: boolean;
+    onClickMessage?: (messageId: string) => void;
+    onUnpin?: (messageId: string) => void;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+};
+type PinnedMessagesProps = {
+    /** Additional CSS class name */
+    className?: string;
+    /** Custom avatar component */
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Custom pinned message item component */
+    PinnedMessageItemComponent?: React.ComponentType<PinnedMessageItemProps>;
+    /** Callback when a pinned message is clicked (e.g. scroll to it) */
+    onClickMessage?: (messageId: string) => void;
+    /** Max messages to show in collapsed state (default: 1) */
+    maxCollapsed?: number;
+};
+type QuotedMessagePreviewProps = {
+    /** The quoted (replied-to) message object */
+    quotedMessage: {
+        id: string;
+        text?: string;
+        user?: {
+            id?: string;
+            name?: string;
+        };
+    };
+    /** Whether the parent message is from the current user */
+    isOwnMessage: boolean;
+    /** Callback when the quote box is clicked */
+    onClick: (messageId: string) => void;
+};
+type MentionSuggestionsProps = {
+    members: MentionMember[];
+    highlightIndex: number;
+    onSelect: (member: MentionMember) => void;
+};
+type UseChannelReturn = {
+    channel: Channel$1 | null;
+    loading: boolean;
+    error: Error | null;
+};
+type MentionMember = {
+    id: string;
+    name: string;
+    avatar?: string;
+};
+type MentionPayload = {
+    text: string;
+    mentioned_all: boolean;
+    mentioned_users: string[];
+};
+type UseMentionsOptions = {
+    members: MentionMember[];
+    currentUserId?: string;
+    editableRef: React.RefObject<HTMLDivElement | null>;
+};
+type UseMentionsReturn = {
+    showSuggestions: boolean;
+    filteredMembers: MentionMember[];
+    highlightIndex: number;
+    /** Call on each input event of the contenteditable */
+    handleInput: () => void;
+    /** Call on keydown. Returns true if the event was consumed (e.g. Enter for selection). */
+    handleKeyDown: (e: React.KeyboardEvent) => boolean;
+    /** Select a member from the suggestion list */
+    selectMention: (member: MentionMember) => void;
+    /** Build the payload from the contenteditable DOM */
+    buildPayload: () => MentionPayload;
+    /** Reset mention state (call after send) */
+    reset: () => void;
+};
+type FilePreviewItem = {
+    /** Unique ID for keying */
+    id: string;
+    /** Original File object (optional for existing server attachments) */
+    file?: File;
+    /** Blob URL for image/video preview */
+    previewUrl?: string;
+    /** Upload status */
+    status: 'pending' | 'uploading' | 'done' | 'error';
+    /** Error message if upload failed */
+    error?: string;
+    /** URL returned after successful upload */
+    uploadedUrl?: string;
+    /** Thumbnail URL (video only) */
+    thumbUrl?: string;
+    /** File with normalized name */
+    normalizedFile?: File;
+    /** Track original attachments during edits */
+    originalAttachment?: Attachment;
+};
+type FilesPreviewProps = {
+    files: FilePreviewItem[];
+    onRemove: (id: string) => void;
+};
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    maxWidth?: string;
+    hideCloseButton?: boolean;
+}
+/** Attachment item from the channel attachment query API */
+type AttachmentItem = {
+    id: string;
+    attachment_type: string;
+    user_id: string;
+    cid: string;
+    url: string;
+    thumb_url: string;
+    file_name: string;
+    content_type: string;
+    content_length: number;
+    content_disposition: string;
+    message_id: string;
+    created_at: string;
+    updated_at: string;
+    title?: string;
+    title_link?: string;
+    og_scrape_url?: string;
+    image_url?: string;
+    text?: string;
+};
+type MediaTab = 'members' | 'media' | 'links' | 'files';
+type ChannelInfoMemberItemProps = {
+    member: ChannelInfoMember;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    onRemove?: (id: string) => void;
+    canRemove?: boolean;
+    onBan?: (id: string) => void;
+    canBan?: boolean;
+    onUnban?: (id: string) => void;
+    canUnban?: boolean;
+    onPromote?: (id: string) => void;
+    canPromote?: boolean;
+    onDemote?: (id: string) => void;
+    canDemote?: boolean;
+};
+type ChannelInfoMediaItemProps = {
+    item: AttachmentItem;
+    onClick: (url: string) => void;
+};
+type ChannelInfoLinkItemProps = {
+    item: AttachmentItem;
+};
+type ChannelInfoFileItemProps = {
+    item: AttachmentItem;
+    onClick: (url: string) => void;
+};
+type ChannelInfoEmptyStateProps = {
+    label: string;
+};
+type ChannelInfoHeaderProps = {
+    title: string;
+    onClose?: () => void;
+};
+type ChannelInfoCoverProps = {
+    channelName: string;
+    channelImage?: string;
+    channelDescription?: string;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    /** Whether the current user can edit channel info */
+    canEdit?: boolean;
+    /** Callback when the edit button is clicked */
+    onEditClick?: () => void;
+    /** Whether the channel is public */
+    isPublic?: boolean;
+    /** Whether the channel is a team channel */
+    isTeamChannel?: boolean;
+};
+type ChannelInfoActionsProps = {
+    onSearchClick?: () => void;
+    onSettingsClick?: () => void;
+    onLeaveChannel?: () => void;
+    onDeleteChannel?: () => void;
+    onBlockUser?: () => void;
+    onUnblockUser?: () => void;
+    isTeamChannel?: boolean;
+    isBlocked?: boolean;
+    currentUserRole?: string;
+    searchLabel?: string;
+    settingsLabel?: string;
+    deleteLabel?: string;
+    leaveLabel?: string;
+    blockLabel?: string;
+    unblockLabel?: string;
+};
+type ChannelInfoMember = {
+    id: string;
+    name?: string;
+    avatar?: string;
+    [key: string]: any;
+};
+/** Payload for updating channel profile */
+type EditChannelData = {
+    name?: string;
+    image?: string;
+    description?: string;
+    public?: boolean;
+};
+/** Props for the EditChannelModal */
+type EditChannelModalProps = {
+    channel: Channel$1;
+    onClose: () => void;
+    /** Override the default save logic entirely */
+    onSave?: (data: EditChannelData) => Promise<void>;
+    /** Custom avatar component */
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    /** Modal title (default: 'Edit Channel') */
+    title?: string;
+    /** Label for the name input (default: 'Channel Name') */
+    nameLabel?: string;
+    /** Label for the description input (default: 'Description') */
+    descriptionLabel?: string;
+    /** Placeholder for name input */
+    namePlaceholder?: string;
+    /** Placeholder for description input */
+    descriptionPlaceholder?: string;
+    /** Label for the public toggle (default: 'Public Channel') */
+    publicLabel?: string;
+    /** Label for the save button (default: 'Save') */
+    saveLabel?: string;
+    /** Label for the cancel button (default: 'Cancel') */
+    cancelLabel?: string;
+    /** Label shown while saving (default: 'Saving...') */
+    savingLabel?: string;
+    /** Label for the change avatar button (default: 'Change Avatar') */
+    changeAvatarLabel?: string;
+    /** Accept attribute for the file input (default: 'image/*') */
+    imageAccept?: string;
+    /** Max file size in bytes (default: 5MB = 5242880) */
+    maxImageSize?: number;
+    /** Error text for exceeding max size (default: 'Image must be less than 5MB') */
+    maxImageSizeError?: string;
+};
+/** Props for the Add Member button rendered at the top of the Members tab */
+type AddMemberButtonProps = {
+    onClick: () => void;
+    /** Label text for the button (default: 'Add Member') */
+    label?: string;
+};
+/** Props for individual user items inside the AddMemberModal */
+type AddMemberUserItemProps = {
+    user: any;
+    /** Whether the user already belongs to the channel */
+    isExisting: boolean;
+    /** Whether the user is currently being added */
+    isAdding: boolean;
+    /** Callback to add the user */
+    onAdd: (userId: string) => void;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    /** Label shown when the user is already in the channel (default: 'Added') */
+    addedLabel?: string;
+    /** Label shown while adding (default: 'Adding...') */
+    addingLabel?: string;
+    /** Label for the add button (default: 'Add') */
+    addLabel?: string;
+};
+/** Props for the AddMemberModal */
+type AddMemberModalProps = {
+    channel: Channel$1;
+    currentMembers: any[];
+    onClose: () => void;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    /** Modal title (default: 'Add Member') */
+    title?: string;
+    /** Search input placeholder (default: 'Search by name, email or phone...') */
+    searchPlaceholder?: string;
+    /** Text shown while loading users (default: 'Loading users...') */
+    loadingText?: string;
+    /** Text shown when no users match the search (default: 'No users found.') */
+    emptyText?: string;
+    /** Label for the add button on each user row (default: 'Add') */
+    addLabel?: string;
+    /** Label shown while a user is being added (default: 'Adding...') */
+    addingLabel?: string;
+    /** Label shown when a user already belongs to the channel (default: 'Added') */
+    addedLabel?: string;
+    /** Custom user item component (replaces the default row) */
+    UserItemComponent?: React.ComponentType<AddMemberUserItemProps>;
+    /** Custom search input component */
+    SearchInputComponent?: React.ComponentType<{
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        placeholder: string;
+    }>;
+};
+type ChannelInfoTabsProps = {
+    channel: Channel$1;
+    members: ChannelInfoMember[];
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    currentUserId?: string;
+    currentUserRole?: string;
+    onAddMemberClick?: () => void;
+    onRemoveMember?: (id: string) => void;
+    onBanMember?: (id: string) => void;
+    onUnbanMember?: (id: string) => void;
+    onPromoteMember?: (id: string) => void;
+    onDemoteMember?: (id: string) => void;
+    /** Label for the 'Add Member' button in the Members tab (default: 'Add Member') */
+    addMemberButtonLabel?: string;
+    /** Custom component for the 'Add Member' button */
+    AddMemberButtonComponent?: React.ComponentType<AddMemberButtonProps>;
+    /** Custom sub-component overrides */
+    MemberItemComponent?: React.ComponentType<ChannelInfoMemberItemProps>;
+    MediaItemComponent?: React.ComponentType<ChannelInfoMediaItemProps>;
+    LinkItemComponent?: React.ComponentType<ChannelInfoLinkItemProps>;
+    FileItemComponent?: React.ComponentType<ChannelInfoFileItemProps>;
+    EmptyStateComponent?: React.ComponentType<ChannelInfoEmptyStateProps>;
+    LoadingComponent?: React.ComponentType;
+};
+type ChannelInfoProps = {
+    /** Optional channel override. Defaults to activeChannel from context */
+    channel?: Channel$1;
+    /** Additional CSS class */
+    className?: string;
+    /** Custom avatar component */
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Optional callback when the user clicks a close button */
+    onClose?: () => void;
+    /** Custom Title String for the banner */
+    title?: string;
+    /** Custom components to replace internal sections */
+    HeaderComponent?: React.ComponentType<ChannelInfoHeaderProps>;
+    CoverComponent?: React.ComponentType<ChannelInfoCoverProps>;
+    ActionsComponent?: React.ComponentType<ChannelInfoActionsProps>;
+    TabsComponent?: React.ComponentType<ChannelInfoTabsProps>;
+    /** Custom component replacing the entire AddMemberModal */
+    AddMemberModalComponent?: React.ComponentType<AddMemberModalProps>;
+    /** Custom component replacing the entire EditChannelModal */
+    EditChannelModalComponent?: React.ComponentType<EditChannelModalProps>;
+    /** Custom sub-component overrides (passed through to TabsComponent) */
+    MemberItemComponent?: React.ComponentType<ChannelInfoMemberItemProps>;
+    MediaItemComponent?: React.ComponentType<ChannelInfoMediaItemProps>;
+    LinkItemComponent?: React.ComponentType<ChannelInfoLinkItemProps>;
+    FileItemComponent?: React.ComponentType<ChannelInfoFileItemProps>;
+    EmptyStateComponent?: React.ComponentType<ChannelInfoEmptyStateProps>;
+    LoadingComponent?: React.ComponentType;
+    /** Add Member customization (passed through to AddMemberModal) */
+    addMemberModalTitle?: string;
+    addMemberSearchPlaceholder?: string;
+    addMemberLoadingText?: string;
+    addMemberEmptyText?: string;
+    addMemberAddLabel?: string;
+    addMemberAddingLabel?: string;
+    addMemberAddedLabel?: string;
+    /** Label for the 'Add Member' button in Members tab */
+    addMemberButtonLabel?: string;
+    /** Custom component for the 'Add Member' button */
+    AddMemberButtonComponent?: React.ComponentType<AddMemberButtonProps>;
+    /** Edit Channel customization (passed through to EditChannelModal) */
+    /** Override edit channel save logic */
+    onEditChannel?: (data: EditChannelData) => Promise<void>;
+    editChannelModalTitle?: string;
+    editChannelNameLabel?: string;
+    editChannelDescriptionLabel?: string;
+    editChannelNamePlaceholder?: string;
+    editChannelDescriptionPlaceholder?: string;
+    editChannelPublicLabel?: string;
+    editChannelSaveLabel?: string;
+    editChannelCancelLabel?: string;
+    editChannelSavingLabel?: string;
+    editChannelChangeAvatarLabel?: string;
+    editChannelImageAccept?: string;
+    editChannelMaxImageSize?: number;
+    editChannelMaxImageSizeError?: string;
+    /** Action Labels */
+    actionsSearchLabel?: string;
+    actionsSettingsLabel?: string;
+    actionsDeleteLabel?: string;
+    actionsLeaveLabel?: string;
+    /** Action callbacks */
+    onSearchClick?: () => void;
+    onLeaveChannel?: () => void;
+    onDeleteChannel?: () => void;
+    onAddMemberClick?: () => void;
+    onRemoveMember?: (id: string) => void;
+    onBanMember?: (id: string) => void;
+    onUnbanMember?: (id: string) => void;
+    onPromoteMember?: (id: string) => void;
+    onDemoteMember?: (id: string) => void;
+    /** Block/Unblock callbacks (messaging channels only) */
+    onBlockUser?: () => void;
+    onUnblockUser?: () => void;
+    /** I18n labels for block/unblock actions */
+    actionsBlockLabel?: string;
+    actionsUnblockLabel?: string;
+};
+
+declare const ChatProvider: React$1.FC<ChatProviderProps>;
+
+declare const useChatClient: () => ChatContextValue;
+
+declare const useChannel: () => UseChannelReturn;
+
+/**
+ * Subscribes to real-time events and keeps the channel list in sync:
+ *
+ *  1. `message.new`  → moves channel to top, auto-calls `markRead()` if
+ *                       the channel is currently active
+ *  2. `message.read`  → triggers re-render so the unread badge disappears
+ *
+ * The SDK already mutates `channel.state.latestMessages` and
+ * `channel.state.unreadCount` before our listener fires, so we only
+ * need to re-order / flush the React state.
+ */
+declare function useChannelListUpdates(channels: Channel$1[], setChannels: React.Dispatch<React.SetStateAction<Channel$1[]>>): void;
+
+/**
+ * Custom hook to abstract real-time row-level updates for a single channel.
+ * Manages the local unread count, last message preview, and banned status for the channel row in the list.
+ */
+declare function useChannelRowUpdates(channel: Channel$1, currentUserId?: string): {
+    isBannedInChannel: boolean;
+    isBlockedInChannel: boolean;
+    updateCount: number;
+};
+
+/**
+ * Hook that tracks whether the current user is banned in the given channel.
+ *
+ * Reads the initial value from `channel.state.membership.banned` and subscribes
+ * to `member.banned` / `member.unbanned` WebSocket events for real-time updates.
+ *
+ * Only triggers a re-render when the *current user* is the target of the event.
+ */
+declare function useBannedState(channel: Channel$1 | null | undefined, currentUserId?: string): {
+    isBanned: boolean;
+};
+
+/**
+ * Hook that tracks whether the current user has blocked the other party
+ * in a messaging (1-1) channel.
+ *
+ * Reads the initial value from `channel.state.membership.blocked` and subscribes
+ * to `member.blocked` / `member.unblocked` WebSocket events for real-time updates.
+ *
+ * Only triggers a re-render when the *current user* is the target of the event
+ * (i.e., the blocker). When user A blocks user B, only A's membership has
+ * `blocked: true`. B is unaffected.
+ *
+ * This hook is only meaningful for `messaging` channels. For `team` channels,
+ * use `useBannedState` instead.
+ */
+declare function useBlockedState(channel: Channel$1 | null | undefined, currentUserId?: string): {
+    isBlocked: boolean;
+};
+
+/**
+ * Hook that tracks whether the current user is in a 'pending' state for the given channel.
+ */
+declare function usePendingState(channel: Channel$1 | null | undefined, currentUserId?: string): {
+    isPending: boolean;
+};
+
+/**
+ * Avatar component with image or initial fallback.
+ */
+declare const Avatar: React$1.FC<AvatarProps>;
+
+declare const ChannelItem: React$1.FC<ChannelItemProps>;
+declare const ChannelList: React$1.FC<ChannelListProps>;
+
+/**
+ * Channel wrapper component.
+ *
+ * Customization:
+ * - `HeaderComponent` — replace default ChannelHeader with a fully custom component.
+ *   Receives `{ channel, name, image }` as props.
+ * - `EmptyStateIndicator` — custom component when no channel is selected.
+ */
+declare const Channel: React$1.FC<ChannelProps>;
+
+/**
+ * ChannelHeader displays the active channel's avatar and name.
+ *
+ * Customization:
+ * - `title` / `image` — override the channel name and avatar
+ * - `subtitle` — add a subtitle line (e.g. member count)
+ * - `AvatarComponent` — replace the avatar
+ * - `renderTitle(channel)` — fully custom title rendering
+ * - `renderRight(channel)` — render content on the right side
+ *
+ * For a fully custom header, use `Channel`'s `HeaderComponent` prop instead.
+ */
+declare const ChannelHeader: React$1.FC<ChannelHeaderProps>;
+
+declare const VirtualMessageList: React$1.FC<MessageListProps>;
+
+declare const PinnedMessages: React$1.FC<PinnedMessagesProps>;
+
+declare const MessageItem: React$1.FC<MessageItemProps>;
+declare const SystemMessageItem: React$1.FC<SystemMessageItemProps>;
+
+declare const MessageActionsBox: React$1.FC<MessageActionsBoxProps>;
+
+/** Dispatch a global event to close all open dropdowns */
+declare const closeAllDropdowns: () => void;
+interface DropdownProps {
+    /** Whether the dropdown is open */
+    isOpen: boolean;
+    /** Rect from getBoundingClientRect() of the anchor element */
+    anchorRect: DOMRect | null;
+    /** Callback when dropdown requests to close (e.g., click outside, scroll, Escape) */
+    onClose: () => void;
+    /** Dropdown menu content */
+    children: React$1.ReactNode;
+    /** Horizontal alignment relative to the anchor. Default: 'left' */
+    align?: 'left' | 'right';
+    /** Optional custom CSS class for the container */
+    className?: string;
+    /** Optional custom CSS style for the container */
+    style?: React$1.CSSProperties;
+}
+declare const Dropdown: React$1.FC<DropdownProps>;
+
+declare const MessageReactions: React$1.FC<MessageReactionsProps>;
+
+declare const MessageQuickReactions: React$1.FC<{
+    message: FormatMessageResponse;
+    isOwnMessage: boolean;
+}>;
+
+type MessageActionList = {
+    canEdit: boolean;
+    canDelete: boolean;
+    canDeleteForMe: boolean;
+    canReply: boolean;
+    canQuote: boolean;
+    canForward: boolean;
+    canPin: boolean;
+    canCopy: boolean;
+    isPinned: boolean;
+    hasCapEdit: boolean;
+    hasCapDelete: boolean;
+    hasCapDeleteForMe: boolean;
+    hasCapPin: boolean;
+    hasCapReply: boolean;
+    hasCapQuote: boolean;
+};
+declare const useMessageActions: (message: FormatMessageResponse, isOwnMessage: boolean) => MessageActionList;
+
+/**
+ * Format a Date or date-string to a short time string (HH:MM).
+ */
+declare function formatTime(date: Date | string | undefined): string;
+/**
+ * Return a YYYY-M-D key for date comparison (used by date separators).
+ */
+declare function getDateKey(date: Date | string | undefined): string;
+/**
+ * Format a date into a human-friendly label (Today / Yesterday / full date).
+ */
+declare function formatDateLabel(date: Date | string | undefined): string;
+/**
+ * Get the user id from a message, checking multiple possible sources.
+ */
+declare function getMessageUserId(message: FormatMessageResponse): string;
+/**
+ * Replace @user_id with @UserName for plain text previews.
+ * Returns the formatted string.
+ */
+declare function replaceMentionsForPreview(text: string, message: FormatMessageResponse | {
+    mentioned_users?: string[];
+    mentioned_all?: boolean;
+}, userMap: Record<string, string>, renderWrapper?: (userId: string, name: string) => string): string;
+
+declare const MessageAttachment: React$1.FC<AttachmentProps>;
+declare const AttachmentList: React$1.FC<{
+    attachments?: Attachment[];
+}>;
+/** Regular message: text with @mentions + attachments */
+declare const RegularMessage: React$1.FC<MessageRendererProps>;
+/** System message: centered info text, parsed from raw format */
+declare const SystemMessage: React$1.FC<MessageRendererProps>;
+/** Signal message: call events */
+declare const SignalMessage: React$1.FC<MessageRendererProps>;
+/** Poll message */
+declare const PollMessage: React$1.FC<MessageRendererProps>;
+/** Sticker message */
+declare const StickerMessage: React$1.FC<MessageRendererProps>;
+/** Error message */
+declare const ErrorMessage: React$1.FC<MessageRendererProps>;
+/**
+ * Map from MessageLabel → component.
+ * Consumer can override individual renderers via the `messageRenderers` prop.
+ */
+declare const defaultMessageRenderers: Record<MessageLabel, React$1.ComponentType<MessageRendererProps>>;
+
+declare const MessageInput: React$1.FC<MessageInputProps>;
+
+/**
+ * FilesPreview — renders selected files with thumbnails and remove buttons.
+ * Shown above the text input area in MessageInput.
+ */
+declare const FilesPreview: React$1.FC<FilesPreviewProps>;
+
+declare const MentionSuggestions: React$1.FC<MentionSuggestionsProps>;
+
+declare function useMentions({ members, currentUserId, editableRef, }: UseMentionsOptions): UseMentionsReturn;
+
+type UseScrollToMessageOptions = {
+    vlistRef: React.RefObject<VListHandle | null>;
+    messagesRef: React.MutableRefObject<FormatMessageResponse[]>;
+    setHasMore: React.Dispatch<React.SetStateAction<boolean>>;
+    setHasNewer: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Getter to access the VList DOM element (scoped to container) */
+    getVListElement: () => HTMLElement | null;
+    scrollToBottom: (smooth: boolean) => void;
+    /** Shared guard ref — blocks scroll-triggered loads during jumps */
+    jumpingRef: React.MutableRefObject<boolean>;
+};
+type UseScrollToMessageReturn = {
+    highlightedId: string | null;
+    scrollToMessage: (messageId: string) => void;
+    jumpToLatest: () => void;
+};
+declare function useScrollToMessage({ vlistRef, messagesRef, setHasMore, setHasNewer, getVListElement, scrollToBottom, jumpingRef, }: UseScrollToMessageOptions): UseScrollToMessageReturn;
+
+/** Filter out messages whose id already exists in `existing` (or self-dedup if omitted). */
+declare const dedupMessages: (incoming: any[], existing?: any[]) => any[];
+type UseLoadMessagesOptions = {
+    vlistRef: React.RefObject<VListHandle | null>;
+    messagesRef: React.MutableRefObject<FormatMessageResponse[]>;
+    /** Shared guard ref — skip scroll-triggered loads during jump transitions */
+    jumpingRef: React.MutableRefObject<boolean>;
+    loadMoreLimit?: number;
+};
+type UseLoadMessagesReturn = {
+    /** VList shift mode — true during prepend, auto-resets to false */
+    shiftMode: boolean;
+    hasMore: boolean;
+    setHasMore: React.Dispatch<React.SetStateAction<boolean>>;
+    hasNewer: boolean;
+    setHasNewer: React.Dispatch<React.SetStateAction<boolean>>;
+    hasMoreRef: React.RefObject<boolean>;
+    hasNewerRef: React.RefObject<boolean>;
+    loadingMoreRef: React.MutableRefObject<boolean>;
+    loadingNewerRef: React.MutableRefObject<boolean>;
+    loadMore: () => Promise<void>;
+    loadNewer: () => Promise<void>;
+    handleScroll: (offset: number) => void;
+    isAtBottomRef: React.MutableRefObject<boolean>;
+};
+declare function useLoadMessages({ vlistRef, messagesRef, jumpingRef, loadMoreLimit, }: UseLoadMessagesOptions): UseLoadMessagesReturn;
+
+type UseChannelMessagesOptions = {
+    scrollToBottom: (smooth: boolean) => void;
+    /** Shared guard ref — blocks scroll-triggered loads during channel switch */
+    jumpingRef: React.MutableRefObject<boolean>;
+    isAtBottomRef: React.MutableRefObject<boolean>;
+    /** Called to reset load-more state when channel switches */
+    onChannelSwitch?: () => void;
+};
+/**
+ * Subscribes to channel message events and handles:
+ * - message.new → sync + scroll to bottom
+ * - message.updated / message.deleted → sync only
+ * - Channel switch → reset state + scroll to bottom
+ */
+declare function useChannelMessages({ scrollToBottom, jumpingRef, isAtBottomRef, onChannelSwitch, }: UseChannelMessagesOptions): void;
+
+declare const QuotedMessagePreview: React$1.FC<QuotedMessagePreviewProps>;
+
+declare const ReplyPreview: React$1.FC<ReplyPreviewProps>;
+
+declare const ForwardMessageModal: React$1.FC<ForwardMessageModalProps>;
+
+type TypingUser = {
+    id: string;
+    name?: string;
+};
+/**
+ * Hook that subscribes to typing events on the active channel
+ * and returns the list of currently‑typing users (excluding the current user).
+ *
+ * Stale entries are auto‑cleaned every 7 seconds, consistent with
+ * the SDK's `channel.state.clean()` behaviour.
+ */
+declare function useTypingIndicator(): {
+    typingUsers: TypingUser[];
+};
+
+type TypingIndicatorProps = {
+    /** Custom render function for the typing text */
+    renderText?: (users: TypingUser[]) => React$1.ReactNode;
+};
+/**
+ * Displays a "X is typing..." indicator below the message list.
+ * Automatically subscribes to typing events via the useTypingIndicator hook.
+ */
+declare const TypingIndicator: React$1.FC<TypingIndicatorProps>;
+
+declare const DefaultChannelInfoHeader: React$1.FC<ChannelInfoHeaderProps>;
+declare const DefaultChannelInfoCover: React$1.FC<ChannelInfoCoverProps>;
+declare const DefaultChannelInfoActions: React$1.FC<ChannelInfoActionsProps>;
+declare const ChannelInfo: React$1.FC<ChannelInfoProps>;
+
+declare const DefaultChannelInfoTabs: React$1.FC<ChannelInfoTabsProps>;
+
+declare const Modal: React$1.FC<ModalProps>;
+
+type PanelProps = {
+    /** Whether the panel is visible */
+    isOpen: boolean;
+    /** Called when user clicks the back button */
+    onClose: () => void;
+    /** Panel title shown in the header */
+    title?: string;
+    /** Panel body content */
+    children: React$1.ReactNode;
+    /** Optional header content (replaces default title + back button) */
+    headerContent?: React$1.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+};
+/**
+ * Reusable sliding panel component.
+ * Slides in from the right to overlay itself on whatever container it's placed in.
+ * Use it like a Modal but inside a sidebar — call `isOpen` to show/hide.
+ */
+declare const Panel: React$1.FC<PanelProps>;
+
+export { type AddMemberButtonProps, type AddMemberModalProps, type AddMemberUserItemProps, type AttachButtonProps, type AttachmentItem, AttachmentList, type AttachmentProps, Avatar, type AvatarProps, Channel, ChannelHeader, type ChannelHeaderData, type ChannelHeaderProps, ChannelInfo, type ChannelInfoActionsProps, type ChannelInfoCoverProps, type ChannelInfoEmptyStateProps, type ChannelInfoFileItemProps, type ChannelInfoHeaderProps, type ChannelInfoLinkItemProps, type ChannelInfoMediaItemProps, type ChannelInfoMemberItemProps, type ChannelInfoProps, type ChannelInfoTabsProps, ChannelItem, type ChannelItemProps, ChannelList, type ChannelListProps, type ChannelProps, type ChatContextValue, ChatProvider, type ChatProviderProps, type DateSeparatorProps, DefaultChannelInfoActions, DefaultChannelInfoCover, DefaultChannelInfoHeader, DefaultChannelInfoTabs, Dropdown, type DropdownProps, type EmojiButtonProps, type EmojiPickerProps, ErrorMessage, type FilePreviewItem, FilesPreview, type FilesPreviewProps, type ForwardChannelItemProps, ForwardMessageModal, type ForwardMessageModalProps, type JumpToLatestProps, type LatestReaction, type MediaTab, type MentionMember, type MentionPayload, MentionSuggestions, type MentionSuggestionsProps, MessageActionsBox, type MessageActionsBoxProps, MessageAttachment, type MessageBubbleProps, MessageInput, type MessageInputProps, MessageItem, type MessageItemProps, type MessageListProps, MessageQuickReactions, MessageReactions, type MessageReactionsProps, type MessageRendererProps, Modal, type ModalProps, Panel, type PinnedMessageItemProps, PinnedMessages, type PinnedMessagesProps, PollMessage, QuotedMessagePreview, type QuotedMessagePreviewProps, type ReactionUser, RegularMessage, ReplyPreview, type ReplyPreviewProps, type SendButtonProps, SignalMessage, StickerMessage, SystemMessage, SystemMessageItem, type SystemMessageItemProps, type Theme, TypingIndicator, type TypingIndicatorProps, type TypingUser, type UseChannelMessagesOptions, type UseChannelReturn, type UseLoadMessagesOptions, type UseLoadMessagesReturn, type UseMentionsOptions, type UseMentionsReturn, type UseScrollToMessageOptions, type UseScrollToMessageReturn, VirtualMessageList, closeAllDropdowns, dedupMessages, defaultMessageRenderers, formatDateLabel, formatTime, getDateKey, getMessageUserId, replaceMentionsForPreview, useBannedState, useBlockedState, useChannel, useChannelListUpdates, useChannelMessages, useChannelRowUpdates, useChatClient, useLoadMessages, useMentions, useMessageActions, usePendingState, useScrollToMessage, useTypingIndicator };