@ermis-network/ermis-chat-react 1.0.9 → 2.0.0

package/dist/index.d.ts

@@ -1,8 +1,21 @@
-import React$1 from 'react';
-import { Channel as Channel$1, Attachment, FormatMessageResponse, ChannelFilters, ChannelSort, ChannelQueryOptions, ErmisChat, UserCallInfo, MessageLabel, ErmisCallNode, CallStatus } from '@ermis-network/ermis-chat-sdk';
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as _ermis_network_ermis_chat_sdk from '@ermis-network/ermis-chat-sdk';
+import { Channel as Channel$1, Attachment, FormatMessageResponse, ChannelFilters, ChannelSort, ChannelQueryOptions, SystemMessageTranslations, SignalMessageTranslations, ErmisChat, UserCallInfo, MessageLabel, ExtendableGenerics, DefaultGenerics, UserResponse, ErmisCallNode, CallStatus } from '@ermis-network/ermis-chat-sdk';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { VListHandle } from 'virtua';
 
+type ChatComponentsContextValue = {
+    ModalComponent?: React__default.ComponentType<ModalProps>;
+    DropdownComponent?: React__default.ComponentType<DropdownProps>;
+    PanelComponent?: React__default.ComponentType<PanelProps>;
+    ForwardMessageModalComponent?: React__default.ComponentType<ForwardMessageModalProps>;
+    ChannelListErrorIndicator?: React__default.ComponentType<{
+        text?: string;
+        onRetry?: () => void;
+    }>;
+};
+
 type Theme = 'dark' | 'light';
 type ReadStateEntry = {
     last_read: Date | string;
@@ -43,9 +56,12 @@ type ChatContextValue = {
     /** Indicates whether the direct call feature is enabled */
     enableCall?: boolean;
 };
+
 type ChatProviderProps = {
     client: ErmisChat;
     children: React.ReactNode;
+    /** Global UI primitive components registry */
+    components?: ChatComponentsContextValue;
     /** Initial theme, defaults to 'dark' */
     initialTheme?: Theme;
     /** Enable direct call feature (Audio/Video). If enabled, configures internal CallProvider */
@@ -167,6 +183,9 @@ type ErmisCallRingingProps = {
     endCallLabel: string;
     audioCallBadgeLabel: string;
     videoCallBadgeLabel: string;
+    isAccepting?: boolean;
+    isRejecting?: boolean;
+    isEnding?: boolean;
 };
 /** Props for the Connected Audio state view */
 type ErmisCallConnectedAudioProps = {
@@ -210,6 +229,7 @@ type ErmisCallControlsBarProps = {
     selectedVideoDeviceId: string;
     switchAudioDevice: (id: string) => Promise<void>;
     switchVideoDevice: (id: string) => Promise<void>;
+    isEnding?: boolean;
 };
 type AvatarProps = {
     /** Image URL */
@@ -296,8 +316,10 @@ type ChannelActionLabels = {
     closeTopic?: string;
     reopenTopic?: string;
     createTopic?: string;
+    deleteTopic?: string;
     deleteChannel?: string;
     leaveChannel?: string;
+    truncateChannel?: string;
 };
 type ChannelActionIcons = {
     PinIcon?: React.ReactNode;
@@ -308,8 +330,10 @@ type ChannelActionIcons = {
     CloseTopicIcon?: React.ReactNode;
     ReopenTopicIcon?: React.ReactNode;
     CreateTopicIcon?: React.ReactNode;
+    DeleteTopicIcon?: React.ReactNode;
     DeleteChannelIcon?: React.ReactNode;
     LeaveChannelIcon?: React.ReactNode;
+    TruncateChannelIcon?: React.ReactNode;
 };
 type ChannelActionsProps = {
     channel: Channel$1;
@@ -321,7 +345,7 @@ type ChannelItemProps = {
     isActive: boolean;
     hasUnread: boolean;
     unreadCount: number;
-    lastMessageText: string;
+    lastMessageText: React.ReactNode;
     lastMessageUser: string;
     lastMessageTimestamp?: Date | string | null;
     onSelect: (channel: Channel$1) => void;
@@ -344,6 +368,10 @@ type ChannelItemProps = {
     onEditTopic?: (channel: Channel$1) => void;
     /** Handler when Close/Reopen Topic action is triggered */
     onToggleCloseTopic?: (channel: Channel$1, isClosed: boolean) => void;
+    /** Handler when Delete Topic action is triggered */
+    onDeleteTopic?: (channel: Channel$1) => void;
+    /** Handler when Truncate Channel action is triggered */
+    onTruncateChannel?: (channel: Channel$1) => void;
     /** Array of action IDs to hide from the actions dropdown */
     hiddenActions?: string[];
     /** Custom labels for default channel actions */
@@ -353,6 +381,60 @@ type ChannelItemProps = {
     /** Whether the other user in this direct channel is online (friend channels only) */
     isOnline?: boolean;
 };
+type TopicPillProps = {
+    /** The topic channel to display as a pill */
+    topic: Channel$1;
+    /** Size of the topic avatar in pixels (default: 16) */
+    avatarSize?: number;
+};
+type TopicListProps = {
+    /** Parent channel that has topics enabled */
+    channel: Channel$1;
+    /** Custom channel item component for each topic row */
+    ChannelItemComponent?: React.ComponentType<ChannelItemProps>;
+    /** Custom avatar for the general (parent) topic */
+    GeneralAvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Custom avatar for sub-topic items */
+    TopicAvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Custom avatar component (fallback) */
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Label for the general topic (default: 'general') */
+    generalTopicLabel?: string;
+    /** Pinned icon component */
+    PinnedIconComponent?: React.ComponentType;
+    /** Custom channel actions component */
+    ChannelActionsComponent?: React.ComponentType<ChannelActionsProps>;
+    /** Called when a topic is selected */
+    onSelectTopic?: (topic: Channel$1) => void;
+    /** Handler for Edit Topic action */
+    onEditTopic?: (channel: Channel$1) => void;
+    /** Handler for Close/Reopen Topic action */
+    onToggleCloseTopic?: (channel: Channel$1, isClosed: boolean) => void;
+    /** Handler for Delete Topic action */
+    onDeleteTopic?: (channel: Channel$1) => void;
+    /** Actions to hide */
+    hiddenActions?: string[];
+    /** Custom action labels */
+    actionLabels?: ChannelActionLabels;
+    /** Custom action icons */
+    actionIcons?: ChannelActionIcons;
+    /** Icon for closed topics */
+    closedTopicIcon?: React.ReactNode;
+    /** Badge label for pending members */
+    pendingBadgeLabel?: string;
+    /** Badge label for blocked members */
+    blockedBadgeLabel?: string;
+    /** Auto-scroll the topic list to the top when the current user sends a message (default: true) */
+    scrollToTopOnOwnMessage?: boolean;
+    deletedMessageLabel?: React.ReactNode;
+    stickerMessageLabel?: React.ReactNode;
+    photoMessageLabel?: React.ReactNode;
+    videoMessageLabel?: React.ReactNode;
+    voiceRecordingMessageLabel?: React.ReactNode;
+    fileMessageLabel?: React.ReactNode;
+    systemMessageTranslations?: SystemMessageTranslations;
+    signalMessageTranslations?: SignalMessageTranslations;
+};
 type ChannelListProps = {
     filters?: ChannelFilters;
     sort?: ChannelSort;
@@ -360,6 +442,8 @@ type ChannelListProps = {
     renderChannel?: (channel: Channel$1, isActive: boolean) => React.ReactNode;
     onChannelSelect?: (channel: Channel$1) => void;
     className?: string;
+    /** Whether to show pending invites visually in the main list (default: true) */
+    showPendingInvites?: boolean;
     /** Array of action IDs to hide from the actions dropdown */
     hiddenActions?: string[];
     LoadingIndicator?: React.ComponentType<{
@@ -379,18 +463,33 @@ type ChannelListProps = {
     pendingBadgeLabel?: string;
     /** Label for the loading indicator */
     loadingLabel?: string;
-    /** Label for the empty state indicator */
+    /** Component to display when there is an error loading channels */
+    ErrorIndicator?: React.ComponentType<{
+        text?: string;
+        onRetry?: () => void;
+    }>;
+    /** Label to display in the error indicator */
+    errorLabel?: string;
+    /** Label to display in the empty state indicator */
     emptyStateLabel?: string;
     /** Label for the blocked channel badge hover */
     blockedBadgeLabel?: string;
-    /** Custom component for rendering topic group */
-    ChannelTopicGroupComponent?: React.ComponentType<any>;
-    /** Custom avatar component for general topic */
-    GeneralTopicAvatarComponent?: React.ComponentType<any>;
-    /** Custom avatar component for other topics */
-    TopicAvatarComponent?: React.ComponentType<any>;
-    /** Name for the general topic (default: "general") */
-    generalTopicLabel?: string;
+    /** Label for deleted messages in the preview strip (default: 'This message was deleted') */
+    deletedMessageLabel?: React.ReactNode;
+    /** Label for sticker messages in the preview strip (default: 'Sticker') */
+    stickerMessageLabel?: React.ReactNode;
+    /** Label for photo messages in the preview strip (default: '📷 Photo') */
+    photoMessageLabel?: React.ReactNode;
+    /** Label for video messages in the preview strip (default: '🎬 Video') */
+    videoMessageLabel?: React.ReactNode;
+    /** Label for voice message in the preview strip (default: '🎤 Voice message') */
+    voiceRecordingMessageLabel?: React.ReactNode;
+    /** Label for file messages in the preview strip (default: '📎 File') */
+    fileMessageLabel?: React.ReactNode;
+    /** Custom translation templates for system messages in the preview strip */
+    systemMessageTranslations?: SystemMessageTranslations;
+    /** Custom translation templates for signal (call) messages in the preview strip */
+    signalMessageTranslations?: SignalMessageTranslations;
     /** Handler when Add Topic button is clicked on a team channel */
     onAddTopic?: (channel: Channel$1) => void;
     /** Optional custom emoji picker for TopicModal */
@@ -403,12 +502,30 @@ type ChannelListProps = {
     onEditTopic?: (channel: Channel$1) => void;
     /** Handler when Close/Reopen Topic action is triggered */
     onToggleCloseTopic?: (channel: Channel$1, isClosed: boolean) => void;
+    /** Handler when Delete Topic action is triggered */
+    onDeleteTopic?: (channel: Channel$1) => void;
+    /** Handler when Truncate action is triggered */
+    onTruncateChannel?: (channel: Channel$1) => void;
     /** Custom labels for default channel actions */
     actionLabels?: ChannelActionLabels;
     /** Custom icons for default channel actions */
     actionIcons?: ChannelActionIcons;
     /** Show online/offline indicator dots on channel item avatars for friend channels (default: true) */
     showOnlineStatus?: boolean;
+    /** Handler when a topic-enabled channel is clicked — enables drill-down mode */
+    onTopicDrillDown?: (channel: Channel$1) => void;
+    /** Max number of topic pills shown in the preview strip (default: 3) */
+    maxVisibleTopics?: number;
+    /** Label for the overflow indicator when topics exceed maxVisibleTopics (default: '...') */
+    moreTopicsLabel?: string;
+    /** Label for the general topic pill (default: 'general') */
+    generalTopicLabel?: string;
+    /** Custom component for rendering each topic pill in the preview strip */
+    TopicPillComponent?: React.ComponentType<TopicPillProps>;
+    /** Custom component to replace the entire flat topic group item */
+    FlatTopicGroupItemComponent?: React.ComponentType<any>;
+    /** Auto-scroll the channel list to the top when the current user sends a message (default: true) */
+    scrollToTopOnOwnMessage?: boolean;
 };
 type AttachmentProps = {
     attachment: Attachment;
@@ -418,6 +535,9 @@ type AttachmentProps = {
 type MessageRendererProps = {
     message: FormatMessageResponse;
     isOwnMessage: boolean;
+    systemMessageTranslations?: SystemMessageTranslations;
+    signalMessageTranslations?: SignalMessageTranslations;
+    onMentionClick?: (userId: string) => void;
 };
 type MessageBubbleProps = {
     message: FormatMessageResponse;
@@ -445,6 +565,12 @@ type MediaLightboxProps = {
 type MessageListProps = {
     /** Fully custom render for each message */
     renderMessage?: (message: FormatMessageResponse, isOwnMessage: boolean) => React.ReactNode;
+    /** Handler when a mention is clicked */
+    onMentionClick?: (userId: string) => void;
+    /** Handler when a sender's username is clicked in the message list */
+    onUserNameClick?: (userId: string) => void;
+    /** Handler when clicking to add a custom reaction */
+    onAddReactionClick?: (e: React.MouseEvent, messageId: string) => void;
     /** Additional CSS class name */
     className?: string;
     /** Custom empty state component */
@@ -459,6 +585,8 @@ type MessageListProps = {
     loadMoreLimit?: number;
     /** Custom date separator component */
     DateSeparatorComponent?: React.ComponentType<DateSeparatorProps>;
+    /** Locale string for date separator labels (e.g. 'vi', 'en-US'). Falls back to browser default. */
+    dateLocale?: string;
     /** Custom message item component (replaces the entire row) */
     MessageItemComponent?: React.ComponentType<MessageItemProps>;
     /** Custom system message item component */
@@ -518,6 +646,29 @@ type MessageListProps = {
     }>;
     /** I18n Label for pending invitee notification */
     pendingInviteeLabel?: string | ((inviteeName?: string) => string);
+    /** I18n Label for pinned messages header */
+    pinnedMessagesLabel?: string | ((count: number) => string);
+    /** I18n Label for seeing all pinned messages */
+    seeAllLabel?: string;
+    /** I18n Label for collapsing pinned messages */
+    collapseLabel?: string;
+    /** I18n Label for unpinning a message */
+    unpinLabel?: string;
+    /** I18n Label for sticker message preview */
+    stickerLabel?: string;
+    /** I18n Label for typing indicator */
+    typingIndicatorLabel?: (users: Array<{
+        id: string;
+        name?: string;
+    }>) => string;
+    /** I18n Label for deleted display messages (display_type === 'deleted') */
+    deletedMessageLabel?: string;
+    /** Custom translation templates for system messages */
+    systemMessageTranslations?: SystemMessageTranslations;
+    /** Custom translation templates for signal (call) messages */
+    signalMessageTranslations?: SignalMessageTranslations;
+    /** Whether to include hidden (deleted) messages in the initial channel query. Defaults to true. */
+    includeHiddenMessages?: boolean;
 };
 type ReactionUser = {
     id: string;
@@ -541,6 +692,8 @@ type MessageReactionsProps = {
     onClickReaction?: (type: string) => void;
     /** Whether interactions are disabled */
     disabled?: boolean;
+    /** Whether the message is from the current user */
+    isOwnMessage?: boolean;
 };
 type ReadReceiptUser = {
     id: string;
@@ -598,11 +751,24 @@ type MessageItemProps = {
     forwardedLabel?: string;
     /** I18n Label for edited state */
     editedLabel?: string;
+    /** I18n Label for deleted display messages (display_type === 'deleted') */
+    deletedMessageLabel?: React.ReactNode;
+    /** Custom translation templates for system messages */
+    systemMessageTranslations?: SystemMessageTranslations;
+    /** Custom translation templates for signal (call) messages */
+    signalMessageTranslations?: SignalMessageTranslations;
+    /** Handler when a mention is clicked */
+    onMentionClick?: (userId: string) => void;
+    /** Handler when a sender's username is clicked in the message list */
+    onUserNameClick?: (userId: string) => void;
+    /** Handler when clicking to add a custom reaction */
+    onAddReactionClick?: (e: React.MouseEvent, messageId: string) => void;
 };
 type SystemMessageItemProps = {
     message: FormatMessageResponse;
     isOwnMessage: boolean;
     SystemRenderer: React.ComponentType<MessageRendererProps>;
+    systemMessageTranslations?: SystemMessageTranslations;
 };
 type SendButtonProps = {
     disabled: boolean;
@@ -612,6 +778,10 @@ type AttachButtonProps = {
     disabled: boolean;
     onClick: () => void;
 };
+type VoiceRecordButtonProps = {
+    disabled: boolean;
+    onRecordComplete: (file: File) => 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 */
@@ -619,6 +789,17 @@ type EmojiPickerProps = {
     /** Called when the picker should close (e.g. click outside) */
     onClose: () => void;
 };
+/** Props for the preview overlay when a user has not joined a public channel */
+type PreviewOverlayProps = {
+    /** Title shown in the preview overlay */
+    title?: string;
+    /** Label for the join button */
+    buttonLabel?: string;
+    /** Action when the join button is clicked */
+    onJoin?: () => void;
+    /** Custom class name */
+    className?: string;
+};
 /** Props passed to the emoji button component */
 type EmojiButtonProps = {
     /** Whether the picker is currently open */
@@ -637,6 +818,8 @@ type MessageInputProps = {
     SendButton?: React.ComponentType<SendButtonProps>;
     /** Custom attach button component */
     AttachButton?: React.ComponentType<AttachButtonProps>;
+    /** Custom voice record button component */
+    VoiceRecordButtonComponent?: React.ComponentType<VoiceRecordButtonProps>;
     /** Custom file preview component */
     FilesPreviewComponent?: React.ComponentType<FilesPreviewProps>;
     /** Custom mention suggestions component */
@@ -675,6 +858,38 @@ type MessageInputProps = {
     slowModeLabel?: (cooldown: number) => React.ReactNode;
     /** I18n Label for closed topic */
     closedTopicLabel?: string;
+    /** I18n Label for replying state */
+    replyingToLabel?: string;
+    /** I18n Label for editing state */
+    editingMessageLabel?: string;
+    /** I18n Label for Drag and Drop overlay */
+    dragAndDropLabel?: string;
+    /** Custom component for Drag and Drop overlay */
+    DragAndDropOverlayComponent?: React.ComponentType<{
+        dragAndDropLabel: string;
+    }>;
+    /** Custom component for the Preview Overlay (shown instead of input in unjoined public channels) */
+    PreviewOverlayComponent?: React.ComponentType<PreviewOverlayProps>;
+    /** I18n Title for Preview Overlay */
+    previewOverlayTitle?: string;
+    /** I18n Label for Join Button in Preview Overlay */
+    joinChannelLabel?: string;
+    /** Disable stickers entirely */
+    disableStickers?: boolean;
+    /** URL for the sticker picker iframe (default: https://sticker.ermis.network) */
+    stickerIframeUrl?: string;
+    /** Custom sticker picker component */
+    StickerPickerComponent?: React.ComponentType<{
+        stickerIframeUrl: string;
+        onClose: () => void;
+    }>;
+    /** Custom sticker button component */
+    StickerButtonComponent?: React.ComponentType<{
+        active: boolean;
+        onClick: () => void;
+    }>;
+    /** I18n Label for maximum characters exceeded error */
+    maxCharsLabel?: string;
 };
 type ReplyPreviewProps = {
     message: FormatMessageResponse;
@@ -722,6 +937,8 @@ type PinnedMessageItemProps = {
     onClickMessage?: (messageId: string) => void;
     onUnpin?: (messageId: string) => void;
     AvatarComponent: React.ComponentType<AvatarProps>;
+    unpinLabel?: string;
+    stickerLabel?: string;
 };
 type PinnedMessagesProps = {
     /** Additional CSS class name */
@@ -734,6 +951,12 @@ type PinnedMessagesProps = {
     onClickMessage?: (messageId: string) => void;
     /** Max messages to show in collapsed state (default: 1) */
     maxCollapsed?: number;
+    /** I18n Labels */
+    pinnedMessagesLabel?: string | ((count: number) => string);
+    seeAllLabel?: string;
+    collapseLabel?: string;
+    unpinLabel?: string;
+    stickerLabel?: string;
 };
 type QuotedMessagePreviewProps = {
     /** The quoted (replied-to) message object */
@@ -824,6 +1047,36 @@ interface ModalProps {
     hideCloseButton?: boolean;
     closeOnOutsideClick?: boolean;
 }
+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.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.CSSProperties;
+}
+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.ReactNode;
+    /** Optional header content (replaces default title + back button) */
+    headerContent?: React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+};
 /** Attachment item from the channel attachment query API */
 type AttachmentItem = {
     id: string;
@@ -846,6 +1099,12 @@ type AttachmentItem = {
     text?: string;
 };
 type MediaTab = 'members' | 'media' | 'links' | 'files';
+type ChannelInfoTabHeaderProps = {
+    activeTab: MediaTab;
+    onTabChange: (tab: MediaTab) => void;
+    availableTabs: MediaTab[];
+    tabCounts: Record<MediaTab, number>;
+};
 type ChannelInfoMemberItemProps = {
     member: ChannelInfoMember;
     AvatarComponent: React.ComponentType<AvatarProps>;
@@ -859,6 +1118,8 @@ type ChannelInfoMemberItemProps = {
     canPromote?: boolean;
     onDemote?: (id: string) => void;
     canDemote?: boolean;
+    /** Custom labels for member roles (owner, moder, member, pending) */
+    roleLabels?: Record<string, string>;
 };
 type ChannelInfoMediaItemProps = {
     item: AttachmentItem;
@@ -901,23 +1162,35 @@ type ChannelInfoActionsProps = {
     onSettingsClick?: () => void;
     onLeaveChannel?: () => void;
     onDeleteChannel?: () => void;
+    onTruncateChannel?: () => void;
     onBlockUser?: () => void;
     onUnblockUser?: () => void;
+    onPin?: () => void;
+    onUnpin?: () => void;
     isTeamChannel?: boolean;
     isTopic?: boolean;
     isClosedTopic?: boolean;
     isBlocked?: boolean;
+    isPinned?: boolean;
     currentUserRole?: string;
     searchLabel?: string;
     settingsLabel?: string;
     deleteLabel?: string;
+    truncateLabel?: string;
     leaveLabel?: string;
     blockLabel?: string;
     unblockLabel?: string;
+    pinLabel?: string;
+    unpinLabel?: string;
     onCloseTopic?: () => void;
     onReopenTopic?: () => void;
     closeTopicLabel?: string;
     reopenTopicLabel?: string;
+    onDeleteTopic?: () => void;
+    deleteTopicLabel?: string;
+    onCreateTopic?: () => void;
+    createTopicLabel?: string;
+    topicsEnabled?: boolean;
 };
 type ChannelInfoMember = {
     id: string;
@@ -929,6 +1202,7 @@ type ChannelInfoMember = {
 type EditChannelData = {
     name?: string;
     image?: string;
+    banner?: string;
     description?: string;
     public?: boolean;
 };
@@ -1031,6 +1305,7 @@ type ChannelInfoTabsProps = {
     onUnbanMember?: (id: string) => void;
     onPromoteMember?: (id: string) => void;
     onDemoteMember?: (id: string) => void;
+    isPreviewMode?: boolean;
     /** Label for the 'Add Member' button in the Members tab (default: 'Add Member') */
     addMemberButtonLabel?: string;
     /** Custom component for the 'Add Member' button */
@@ -1041,7 +1316,16 @@ type ChannelInfoTabsProps = {
     LinkItemComponent?: React.ComponentType<ChannelInfoLinkItemProps>;
     FileItemComponent?: React.ComponentType<ChannelInfoFileItemProps>;
     EmptyStateComponent?: React.ComponentType<ChannelInfoEmptyStateProps>;
-    LoadingComponent?: React.ComponentType;
+    LoadingComponent?: React.ComponentType<{
+        tab?: string;
+    }>;
+    /** Custom component for the tab header buttons */
+    TabHeaderComponent?: React.ComponentType<ChannelInfoTabHeaderProps>;
+    /** Whether the tabs panel is currently visible — controls data fetching (default: true) */
+    isVisible?: boolean;
+    roleLabels?: Record<string, string>;
+    /** Ref or Element of the parent scrollable container — used for virtualization sync (default: undefined) */
+    scrollContainerRef?: React.RefObject<HTMLDivElement | null> | HTMLDivElement | null;
 };
 type ChannelInfoProps = {
     /** Optional channel override. Defaults to activeChannel from context */
@@ -1054,6 +1338,8 @@ type ChannelInfoProps = {
     onClose?: () => void;
     /** Custom Title String for the banner */
     title?: string;
+    /** Whether the panel is visible — controls data fetching timing (default: true) */
+    isVisible?: boolean;
     /** Custom components to replace internal sections */
     HeaderComponent?: React.ComponentType<ChannelInfoHeaderProps>;
     CoverComponent?: React.ComponentType<ChannelInfoCoverProps>;
@@ -1063,13 +1349,19 @@ type ChannelInfoProps = {
     AddMemberModalComponent?: React.ComponentType<AddMemberModalProps>;
     /** Custom component replacing the entire EditChannelModal */
     EditChannelModalComponent?: React.ComponentType<EditChannelModalProps>;
+    /** Custom component replacing the entire EditTopicModal */
+    EditTopicModalComponent?: React.ComponentType<TopicModalProps>;
     /** 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;
+    LoadingComponent?: React.ComponentType<{
+        tab?: string;
+    }>;
+    /** Custom component for the tab header buttons (passed through to TabsComponent) */
+    TabHeaderComponent?: React.ComponentType<ChannelInfoTabHeaderProps>;
     /** Add Member customization (passed through to AddMemberModal) */
     addMemberModalTitle?: string;
     addMemberSearchPlaceholder?: string;
@@ -1099,14 +1391,26 @@ type ChannelInfoProps = {
     editChannelMaxImageSize?: number;
     editChannelMaxImageSizeError?: string;
     /** Action Labels */
+    /** Custom component for the search panel */
+    MessageSearchPanelComponent?: React.ComponentType<MessageSearchPanelProps>;
+    /** Custom component for the channel settings panel */
+    ChannelSettingsPanelComponent?: React.ComponentType<ChannelSettingsPanelProps>;
     actionsSearchLabel?: string;
     actionsSettingsLabel?: string;
     actionsDeleteLabel?: string;
+    actionsTruncateLabel?: string;
     actionsLeaveLabel?: string;
+    actionsPinLabel?: string;
+    actionsUnpinLabel?: string;
+    actionsPinTopicLabel?: string;
+    actionsUnpinTopicLabel?: string;
     /** Action callbacks */
     onSearchClick?: () => void;
     onLeaveChannel?: () => void;
     onDeleteChannel?: () => void;
+    onTruncateChannel?: (channel: Channel$1) => void;
+    onPinChannel?: () => void;
+    onUnpinChannel?: () => void;
     onAddMemberClick?: () => void;
     onRemoveMember?: (id: string) => void;
     onBanMember?: (id: string) => void;
@@ -1121,10 +1425,63 @@ type ChannelInfoProps = {
     actionsUnblockLabel?: string;
     actionsCloseTopicLabel?: string;
     actionsReopenTopicLabel?: string;
+    actionsDeleteTopicLabel?: string;
+    actionsCreateTopicLabel?: string;
+    onDeleteTopic?: (channel: Channel$1) => void;
+    onCreateTopic?: (channel: Channel$1) => void;
     /** Settings Panel Topics Labels */
     settingsWorkspaceTopicsTitle?: string;
     settingsTopicsFeatureName?: string;
     settingsTopicsFeatureDescription?: string;
+    /** Custom labels for member roles (owner, moder, member, pending) */
+    roleLabels?: Record<string, string>;
+};
+type SearchResultMessage = {
+    id: string;
+    text?: string;
+    user_id?: string;
+    user?: {
+        id?: string;
+        name?: string;
+        avatar?: string;
+        image?: string;
+        avatar_url?: string;
+    };
+    created_at?: string;
+    [key: string]: any;
+};
+type MessageSearchPanelProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    channel: Channel$1;
+    /** Custom avatar component */
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Title for the panel */
+    title?: string;
+    /** Search input placeholder */
+    placeholder?: string;
+    /** Text shown when loading */
+    loadingText?: string;
+    /** Text shown when no more messages or no results */
+    emptyText?: string;
+    /** Debounce wait time in ms (default: 500) */
+    debounceMs?: number;
+};
+type ChannelSettingsPanelProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    channel: Channel$1;
+    /** Title for the settings panel */
+    title?: string;
+    /** Custom slow mode options */
+    slowModeOptions?: {
+        label: string;
+        value: number;
+    }[];
+    /** I18n labels for Topics settings */
+    workspaceTopicsTitle?: string;
+    topicsFeatureName?: string;
+    topicsFeatureDescription?: string;
 };
 /** Individual user item in UserPicker */
 type UserPickerUser = {
@@ -1182,6 +1539,45 @@ type UserPickerProps = {
     emptyText?: string;
     loadingMoreText?: string;
     selectedEmptyLabel?: string;
+    friendsOnly?: boolean;
+};
+type CreateChannelTabsProps = {
+    activeTab: 'messaging' | 'team';
+    onTabChange: (tab: 'messaging' | 'team') => void;
+    disabled?: boolean;
+    directTabLabel?: string;
+    groupTabLabel?: string;
+};
+type CreateChannelFooterProps = {
+    tab: 'messaging' | 'team';
+    step: 1 | 2;
+    onCancel: () => void;
+    onNext: () => void;
+    onBack: () => void;
+    onCreate: () => void;
+    isCreating: boolean;
+    isValid: boolean;
+    hasExistingDirectChannel?: boolean;
+    cancelButtonLabel?: string;
+    createButtonLabel?: string;
+    creatingButtonLabel?: string;
+    messageButtonLabel?: string;
+    nextButtonLabel?: string;
+    backButtonLabel?: string;
+};
+type CreateChannelGroupFieldsProps = {
+    name: string;
+    onNameChange: (name: string) => void;
+    description: string;
+    onDescriptionChange: (desc: string) => void;
+    isPublic: boolean;
+    onPublicChange: (isPublic: boolean) => void;
+    disabled?: boolean;
+    groupNameLabel?: string;
+    groupNamePlaceholder?: string;
+    groupDescriptionLabel?: string;
+    groupDescriptionPlaceholder?: string;
+    groupPublicLabel?: string;
 };
 type CreateChannelModalProps = {
     isOpen: boolean;
@@ -1190,6 +1586,15 @@ type CreateChannelModalProps = {
     /** Override visual components */
     AvatarComponent?: React.ComponentType<AvatarProps>;
     UserItemComponent?: React.ComponentType<UserPickerItemProps>;
+    TabsComponent?: React.ComponentType<CreateChannelTabsProps>;
+    FooterComponent?: React.ComponentType<CreateChannelFooterProps>;
+    GroupFieldsComponent?: React.ComponentType<CreateChannelGroupFieldsProps>;
+    SearchInputComponent?: React.ComponentType<{
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        placeholder: string;
+    }>;
+    SelectedBoxComponent?: React.ComponentType<UserPickerSelectedBoxProps>;
     /** i18n labels */
     title?: string;
     directTabLabel?: string;
@@ -1205,6 +1610,9 @@ type CreateChannelModalProps = {
     createButtonLabel?: string;
     creatingButtonLabel?: string;
     messageButtonLabel?: string;
+    nextButtonLabel?: string;
+    backButtonLabel?: string;
+    emptyStateLabel?: string;
     /** File upload configuration for group channel images */
     imageAccept?: string;
     maxImageSize?: number;
@@ -1235,10 +1643,41 @@ type TopicModalProps = {
     savingButtonLabel?: string;
 };
 
-declare const ChatProvider: React$1.FC<ChatProviderProps>;
+declare const ChatProvider: React__default.FC<ChatProviderProps>;
 
 declare const useChatClient: () => ChatContextValue;
 
+declare const useChatUser: <ErmisChatGenerics extends ExtendableGenerics = DefaultGenerics>() => {
+    user: UserResponse<ErmisChatGenerics> | undefined;
+};
+
+/**
+ * A hook that retrieves all pending invite channels from the SDK's local cache
+ * without triggering an extra API network query.
+ *
+ * Re-renders automatically when related events (e.g., invites, accepts, deletes) arrive.
+ */
+declare function useInviteChannels(): Channel$1[];
+
+/**
+ * A hook that retrieves all friend (contact) channels from the SDK's local cache
+ * without triggering an extra API network query.
+ *
+ * A contact is defined as a direct (1-1) channel where both members
+ * hold the 'owner' channel_role.
+ *
+ * Re-renders automatically when related events arrive.
+ */
+declare function useContactChannels(): Channel$1[];
+
+declare const useInviteCount: () => {
+    inviteCount: number;
+};
+
+declare const useContactCount: () => {
+    contactCount: number;
+};
+
 declare const useChannel: () => UseChannelReturn;
 
 /**
@@ -1252,7 +1691,7 @@ declare const useChannel: () => UseChannelReturn;
  * `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;
+declare function useChannelListUpdates(channels: Channel$1[], setChannels: React.Dispatch<React.SetStateAction<Channel$1[]>>, onOwnMessageNew?: () => void): void;
 
 /**
  * Custom hook to abstract real-time row-level updates for a single channel.
@@ -1332,26 +1771,228 @@ declare function useOnlineUsers(channels: Channel$1[]): Set<string>;
  */
 declare function usePendingState(channel: Channel$1 | null | undefined, currentUserId?: string): {
     isPending: boolean;
+    inviteUpdateCount: number;
+};
+
+/**
+ * Hook that tracks whether the current user is previewing a public channel
+ * without being a member.
+ */
+declare function usePreviewState(channel: Channel$1 | null | undefined, currentUserId?: string): {
+    isPreviewMode: boolean;
+};
+
+/** Preview data for the most recent message across the topic group */
+type LatestMessagePreview = {
+    text: React__default.ReactNode;
+    user: string;
+    timestamp?: string | Date;
+    /** Topic name if the message came from a sub-topic, null if from general/parent */
+    sourceName: string | null;
+};
+type TopicGroupUpdatesOptions = {
+    deletedMessageLabel?: React__default.ReactNode;
+    stickerMessageLabel?: React__default.ReactNode;
+    photoMessageLabel?: React__default.ReactNode;
+    videoMessageLabel?: React__default.ReactNode;
+    voiceRecordingMessageLabel?: React__default.ReactNode;
+    fileMessageLabel?: React__default.ReactNode;
+    systemMessageTranslations?: SystemMessageTranslations;
+    signalMessageTranslations?: SignalMessageTranslations;
+};
+/**
+ * Hook encapsulating realtime logic for a topic-enabled channel group.
+ *
+ * Subscribes to message and pin events on the parent channel AND all its
+ * topics to compute:
+ * - sorted topics list (pinned first, then by last activity)
+ * - aggregated unread count across parent + all topics
+ * - boolean flag indicating if any unread exists
+ * - latest message preview across parent + all topics
+ */
+declare function useTopicGroupUpdates(channel: Channel$1, currentUserId?: string, options?: TopicGroupUpdatesOptions): {
+    topics: Channel$1[];
+    aggregatedUnreadCount: number;
+    hasUnread: boolean;
+    updateCount: number;
+    latestMessagePreview: LatestMessagePreview | null;
+};
+
+declare function useDragAndDrop(onFilesDrop: (files: FileList) => void, disabled?: boolean): {
+    isDragging: boolean;
+};
+
+type UseMessageSendOptions = {
+    activeChannel: Channel$1 | null;
+    editableRef: React.RefObject<HTMLDivElement | null>;
+    files: FilePreviewItem[];
+    setFiles: React.Dispatch<React.SetStateAction<FilePreviewItem[]>>;
+    hasContent: boolean;
+    setHasContent: (value: boolean) => void;
+    isTeamChannel: boolean;
+    buildPayload: () => {
+        text: string;
+        mentioned_all: boolean;
+        mentioned_users: string[];
+    };
+    reset: () => void;
+    syncMessages: () => void;
+    onSend?: (text: string) => void;
+    onBeforeSend?: (text: string, attachments: FilePreviewItem[]) => boolean | Promise<boolean>;
+    /** Message being replied to */
+    quotedMessage?: FormatMessageResponse | null;
+    /** Clear quoted message after send */
+    clearQuotedMessage?: () => void;
+    /** Message being edited */
+    editingMessage?: FormatMessageResponse | null;
+    /** Clear edited message after send */
+    clearEditingMessage?: () => void;
+};
+declare function useMessageSend({ activeChannel, editableRef, files, setFiles, hasContent, setHasContent, isTeamChannel, buildPayload, reset, syncMessages, onSend, onBeforeSend, quotedMessage, clearQuotedMessage, editingMessage, clearEditingMessage, }: UseMessageSendOptions): {
+    sending: boolean;
+    handleSend: () => Promise<void>;
+};
+
+type UseFileUploadOptions = {
+    activeChannel: Channel$1 | null;
+    editableRef: React.RefObject<HTMLDivElement | null>;
+    setHasContent: (value: boolean) => void;
+};
+declare function useFileUpload({ activeChannel, editableRef, setHasContent }: UseFileUploadOptions): {
+    files: FilePreviewItem[];
+    setFiles: React$1.Dispatch<React$1.SetStateAction<FilePreviewItem[]>>;
+    fileInputRef: React$1.RefObject<HTMLInputElement>;
+    handleFilesSelected: (selectedFiles: FileList | null) => void;
+    handleRemoveFile: (id: string) => void;
+    handleAttachClick: () => void;
+    cleanupFiles: () => void;
+};
+
+type UseEmojiPickerOptions = {
+    editableRef: React.RefObject<HTMLDivElement | null>;
+    setHasContent: (value: boolean) => void;
+};
+declare function useEmojiPicker({ editableRef, setHasContent }: UseEmojiPickerOptions): {
+    emojiPickerOpen: boolean;
+    handleEmojiSelect: (emoji: string) => void;
+    handleEmojiClose: () => void;
+    toggleEmojiPicker: () => void;
+};
+
+type UseStickerPickerOptions = {
+    activeChannel?: Channel$1 | null;
+    stickerIframeUrl?: string;
+};
+declare function useStickerPicker({ activeChannel, stickerIframeUrl, }: UseStickerPickerOptions): {
+    stickerPickerOpen: boolean;
+    toggleStickerPicker: () => void;
+    closeStickerPicker: () => void;
+    handleStickerSend: (stickerUrl: string) => Promise<void>;
+};
+
+declare const useChannelCapabilities: () => {
+    isGroupChannel: boolean;
+    isOwner: boolean;
+    isModerator: boolean;
+    isOwnerOrModerator: boolean;
+    hasCapability: (cap: string) => boolean;
+    role: any;
+    capabilities: string[];
+};
+
+declare const useChannelMembers: (channel: Channel$1 | null | undefined) => {
+    members: Record<string, unknown>[];
+    memberUpdateCount: number;
+};
+declare const useChannelProfile: (channel: Channel$1 | null | undefined) => {
+    channelName: string;
+    channelImage: string | undefined;
+    channelDescription: string | undefined;
+    isPinned: boolean;
 };
 
 /**
  * Avatar component with image or initial fallback.
  */
-declare const Avatar: React$1.FC<AvatarProps>;
+declare const Avatar: React__default.FC<AvatarProps>;
 
 declare function computeDefaultActions(channel: Channel$1, currentUserId?: string, options?: {
     onAddTopic?: (channel: Channel$1) => void;
     onEditTopic?: (channel: Channel$1) => void;
     onToggleCloseTopic?: (channel: Channel$1, isClosed: boolean) => void;
+    onDeleteTopic?: (channel: Channel$1) => void;
+    onTruncateChannel?: (channel: Channel$1) => void;
     isBlocked?: boolean;
     actionLabels?: ChannelActionLabels;
     actionIcons?: ChannelActionIcons;
 }): ChannelAction[];
-declare const DefaultChannelActions: React$1.FC<ChannelActionsProps>;
+declare const DefaultChannelActions: React__default.FC<ChannelActionsProps>;
 
-declare const ChannelItem: React$1.FC<ChannelItemProps>;
-declare const ChannelTopicGroup: React$1.MemoExoticComponent<({ channel, activeChannel, handleSelect, renderChannel, ChannelItemComponent, AvatarComponent, GeneralTopicAvatarComponent, TopicAvatarComponent, currentUserId, pendingBadgeLabel, blockedBadgeLabel, generalTopicLabel, closedTopicIcon, PinnedIconComponent, ChannelActionsComponent, onAddTopic, onEditTopic, onToggleCloseTopic, hiddenActions, actionLabels, actionIcons, }: any) => react_jsx_runtime.JSX.Element>;
-declare const ChannelList: React$1.FC<ChannelListProps>;
+declare const ChannelItem: React__default.FC<ChannelItemProps>;
+declare const DefaultPinnedIcon: React__default.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
+type ChannelRowProps = {
+    channel: Channel$1;
+    isActive: boolean;
+    handleSelect: (c: Channel$1) => void;
+    renderChannel?: (c: Channel$1, active: boolean) => React__default.ReactNode;
+    ChannelItemComponent: React__default.ComponentType<ChannelItemProps>;
+    AvatarComponent: React__default.ComponentType<any>;
+    currentUserId?: string;
+    pendingBadgeLabel?: string;
+    blockedBadgeLabel?: string;
+    closedTopicIcon?: React__default.ReactNode;
+    PinnedIconComponent?: React__default.ComponentType;
+    ChannelActionsComponent?: React__default.ComponentType<ChannelActionsProps>;
+    onAddTopic?: (channel: Channel$1) => void;
+    onEditTopic?: (channel: Channel$1) => void;
+    onToggleCloseTopic?: (channel: Channel$1, isClosed: boolean) => void;
+    onDeleteTopic?: (channel: Channel$1) => void;
+    onTruncateChannel?: (channel: Channel$1) => void;
+    hiddenActions?: string[];
+    actionLabels?: ChannelActionLabels;
+    actionIcons?: ChannelActionIcons;
+    isOnline?: boolean;
+    deletedMessageLabel?: React__default.ReactNode;
+    stickerMessageLabel?: React__default.ReactNode;
+    photoMessageLabel?: React__default.ReactNode;
+    videoMessageLabel?: React__default.ReactNode;
+    voiceRecordingMessageLabel?: React__default.ReactNode;
+    fileMessageLabel?: React__default.ReactNode;
+    systemMessageTranslations?: SystemMessageTranslations;
+    signalMessageTranslations?: SignalMessageTranslations;
+};
+declare const ChannelRow: React__default.FC<ChannelRowProps>;
+declare const ChannelList: React__default.FC<ChannelListProps>;
+
+type FlatTopicGroupItemProps = {
+    channel: Channel$1;
+    isActive: boolean;
+    onDrillDown?: (channel: Channel$1) => void;
+    AvatarComponent: React__default.ComponentType<AvatarProps>;
+    maxVisibleTopics?: number;
+    moreTopicsLabel?: string;
+    /** Label for the general pill (default: 'general') */
+    generalTopicLabel?: string;
+    TopicPillComponent?: React__default.ComponentType<TopicPillProps>;
+    PinnedIconComponent?: React__default.ComponentType;
+    ChannelActionsComponent?: React__default.ComponentType<ChannelActionsProps>;
+    onAddTopic?: (channel: Channel$1) => void;
+    onTruncateChannel?: (channel: Channel$1) => void;
+    hiddenActions?: string[];
+    actionLabels?: ChannelActionLabels;
+    actionIcons?: ChannelActionIcons;
+    deletedMessageLabel?: React__default.ReactNode;
+    stickerMessageLabel?: React__default.ReactNode;
+    photoMessageLabel?: React__default.ReactNode;
+    videoMessageLabel?: React__default.ReactNode;
+    voiceRecordingMessageLabel?: React__default.ReactNode;
+    fileMessageLabel?: React__default.ReactNode;
+    systemMessageTranslations?: SystemMessageTranslations;
+    signalMessageTranslations?: SignalMessageTranslations;
+};
+declare const FlatTopicGroupItem: React__default.FC<FlatTopicGroupItemProps>;
+
+declare const TopicList: React__default.FC<TopicListProps>;
 
 /**
  * Channel wrapper component.
@@ -1361,7 +2002,7 @@ declare const ChannelList: React$1.FC<ChannelListProps>;
  *   Receives `{ channel, name, image }` as props.
  * - `EmptyStateIndicator` — custom component when no channel is selected.
  */
-declare const Channel: React$1.FC<ChannelProps>;
+declare const Channel: React__default.FC<ChannelProps>;
 
 /**
  * ChannelHeader displays the active channel's avatar and name.
@@ -1377,43 +2018,29 @@ declare const Channel: React$1.FC<ChannelProps>;
  *
  * For a fully custom header, use `Channel`'s `HeaderComponent` prop instead.
  */
-declare const ChannelHeader: React$1.FC<ChannelHeaderProps>;
+declare const ChannelHeader: React__default.FC<ChannelHeaderProps>;
 
-declare const VirtualMessageList: React$1.FC<MessageListProps>;
+declare const VirtualMessageList: React__default.FC<MessageListProps>;
 
-declare const PinnedMessages: React$1.FC<PinnedMessagesProps>;
+declare const PinnedMessages: React__default.FC<PinnedMessagesProps>;
 
-declare const MessageItem: React$1.FC<MessageItemProps>;
-declare const SystemMessageItem: React$1.FC<SystemMessageItemProps>;
+declare const MessageItem: React__default.FC<MessageItemProps>;
+declare const SystemMessageItem: React__default.FC<SystemMessageItemProps>;
 
-declare const MessageActionsBox: React$1.FC<MessageActionsBoxProps>;
+declare const MessageActionsBox: React__default.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 Dropdown: React__default.FC<DropdownProps>;
 
-declare const MessageQuickReactions: React$1.FC<{
+declare const MessageReactions: React__default.FC<MessageReactionsProps>;
+
+declare const MessageQuickReactions: React__default.FC<{
     message: FormatMessageResponse;
     isOwnMessage: boolean;
     disabled?: boolean;
+    onAddReactionClick?: (e: React__default.MouseEvent, messageId: string) => void;
 }>;
 
 type MessageActionList = {
@@ -1435,6 +2062,10 @@ type MessageActionList = {
 };
 declare const useMessageActions: (message: FormatMessageResponse, isOwnMessage: boolean) => MessageActionList;
 
+/**
+ * Remove Vietnamese diacritics (accents) from a string.
+ */
+declare function removeAccents(str: string): string;
 /**
  * Format a Date or date-string to a short time string (HH:MM).
  */
@@ -1445,8 +2076,10 @@ declare function formatTime(date: Date | string | undefined): string;
 declare function getDateKey(date: Date | string | undefined): string;
 /**
  * Format a date into a human-friendly label (Today / Yesterday / full date).
+ * When `locale` is provided, "Today" / "Yesterday" are localised via
+ * `Intl.RelativeTimeFormat` and the full date uses that locale for formatting.
  */
-declare function formatDateLabel(date: Date | string | undefined): string;
+declare function formatDateLabel(date: Date | string | undefined, locale?: string): string;
 /**
  * Get the user id from a message, checking multiple possible sources.
  */
@@ -1459,6 +2092,53 @@ declare function replaceMentionsForPreview(text: string, message: FormatMessageR
     mentioned_users?: string[];
     mentioned_all?: boolean;
 }, userMap: Record<string, string>, renderWrapper?: (userId: string, name: string) => string): string;
+/**
+ * Common helper to build a dictionary of User ID -> Display Name
+ * from the channel state, used for rendering Mentions and System logs.
+ */
+declare function buildUserMap(channelState: any, extraUsers?: Record<string, any>): Record<string, string>;
+/**
+ * Format a date string into a relative label:
+ * "Today", "Yesterday", "Xd ago", or "Mon DD" / "Mon DD, YYYY".
+ */
+declare function formatRelativeDate(dateStr: string): string;
+/**
+ * Get a human-readable preview string for the last message,
+ * handling regular, system, and signal message types.
+ */
+declare function getLastMessagePreview(channel: Channel$1, myUserId?: string, options?: {
+    deletedMessageLabel?: React__default.ReactNode;
+    stickerMessageLabel?: React__default.ReactNode;
+    photoMessageLabel?: React__default.ReactNode;
+    videoMessageLabel?: React__default.ReactNode;
+    voiceRecordingMessageLabel?: React__default.ReactNode;
+    fileMessageLabel?: React__default.ReactNode;
+    systemMessageTranslations?: SystemMessageTranslations;
+    signalMessageTranslations?: SignalMessageTranslations;
+}): {
+    text: React__default.ReactNode;
+    user: string;
+    timestamp?: string | Date;
+};
+/**
+ * Count the number of words in a string.
+ * A word is defined as a non-empty sequence of characters separated by whitespace.
+ */
+declare function countWords(str: string): number;
+
+/**
+ * Hash-based avatar color palette.
+ *
+ * Each user/channel is assigned a deterministic gradient based on
+ * the hash of their name. This provides visual variety in the
+ * channel list and improves readability over a single brand-color
+ * fallback.
+ */
+/**
+ * Returns a CSS `linear-gradient(...)` string for a given name.
+ * The same name always produces the same gradient (deterministic).
+ */
+declare function getAvatarGradient(name?: string): string;
 
 /** Channel supports group features: roles, capabilities, settings, topics, edit, delete */
 declare function isGroupChannel(channel: Channel$1 | null | undefined): boolean;
@@ -1532,46 +2212,65 @@ declare function isVoiceRecordingAttachment(attachment: any): boolean;
 declare function isLinkPreviewAttachment(attachment: any): boolean;
 declare function isImage(attachment: any): boolean;
 declare function isVideo(attachment: any): boolean;
+declare const MESSAGE_DISPLAY_TYPES: {
+    readonly NORMAL: "normal";
+    readonly DELETED: "deleted";
+};
+type MessageDisplayType = (typeof MESSAGE_DISPLAY_TYPES)[keyof typeof MESSAGE_DISPLAY_TYPES] | string;
+/** Check if a message was deleted for current user (display_type === 'deleted') */
+declare function isDeletedDisplayMessage(message: any): boolean;
 
-declare const MessageAttachment: React$1.FC<AttachmentProps>;
-declare const AttachmentList: React$1.FC<{
+declare const MessageAttachment: React__default.FC<AttachmentProps>;
+declare const AttachmentList: React__default.FC<{
     attachments?: Attachment[];
 }>;
 /** Regular message: text with @mentions + attachments */
-declare const RegularMessage: React$1.FC<MessageRendererProps>;
+declare const RegularMessage: React__default.FC<MessageRendererProps>;
 /** System message: centered info text, parsed from raw format */
-declare const SystemMessage: React$1.FC<MessageRendererProps>;
+declare const SystemMessage: React__default.FC<MessageRendererProps>;
 /** Signal message: call events */
-declare const SignalMessage: React$1.FC<MessageRendererProps>;
+declare const SignalMessage: React__default.FC<MessageRendererProps>;
 /** Poll message */
-declare const PollMessage: React$1.FC<MessageRendererProps>;
+declare const PollMessage: React__default.FC<MessageRendererProps>;
 /** Sticker message */
-declare const StickerMessage: React$1.FC<MessageRendererProps>;
+declare const StickerMessage: React__default.FC<MessageRendererProps>;
 /** Error message */
-declare const ErrorMessage: React$1.FC<MessageRendererProps>;
+declare const ErrorMessage: React__default.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 defaultMessageRenderers: Record<MessageLabel, React__default.ComponentType<MessageRendererProps>>;
 
 /**
  * MediaLightbox – full-screen overlay for viewing images & videos.
  * Supports prev/next navigation, keyboard controls, and image zoom.
  * Renders via React portal into document.body.
  */
-declare const MediaLightbox: React$1.FC<MediaLightboxProps>;
+declare const MediaLightbox: React__default.FC<MediaLightboxProps>;
 
-declare const MessageInput: React$1.FC<MessageInputProps>;
+declare const MessageInput: React__default.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 FilesPreview: React__default.FC<FilesPreviewProps>;
+
+declare const MentionSuggestions: React__default.FC<MentionSuggestionsProps>;
 
-declare const MentionSuggestions: React$1.FC<MentionSuggestionsProps>;
+declare const EditPreview: React__default.FC<{
+    message: FormatMessageResponse;
+    onDismiss: () => void;
+    editingMessageLabel?: string;
+}>;
 
+declare const PreviewOverlay: React__default.FC<PreviewOverlayProps>;
+
+/**
+ * Returns the raw HTML string for a mention span, useful for initializing contenteditable divs.
+ */
+declare function getMentionHtml(userId: string, displayName: string): string;
 declare function useMentions({ members, currentUserId, editableRef, }: UseMentionsOptions): UseMentionsReturn;
 
 type UseScrollToMessageOptions = {
@@ -1626,22 +2325,45 @@ type UseChannelMessagesOptions = {
     isAtBottomRef: React.MutableRefObject<boolean>;
     /** Called to reset load-more state when channel switches */
     onChannelSwitch?: () => void;
+    /** Whether to include hidden (deleted) messages in the initial channel query */
+    includeHiddenMessages?: boolean;
+    /** Ref to the message list container for smooth opacity transitions */
+    containerRef?: React.RefObject<HTMLDivElement>;
 };
+declare const markChannelAsFullyQueried: (cid: string) => Set<string>;
 /**
  * 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 function useChannelMessages({ scrollToBottom, jumpingRef, isAtBottomRef, onChannelSwitch, includeHiddenMessages, containerRef, }: UseChannelMessagesOptions): void;
+
+declare function useForwardMessage(message: FormatMessageResponse, onDismiss: () => void): {
+    search: string;
+    setSearch: React$1.Dispatch<React$1.SetStateAction<string>>;
+    selectedChannels: Set<string>;
+    toggleChannel: (channel: Channel$1) => void;
+    sending: boolean;
+    results: {
+        success: string[];
+        failed: string[];
+    } | null;
+    setResults: React$1.Dispatch<React$1.SetStateAction<{
+        success: string[];
+        failed: string[];
+    } | null>>;
+    filteredChannels: Channel$1<_ermis_network_ermis_chat_sdk.DefaultGenerics>[];
+    handleSend: () => Promise<void>;
+};
 
-declare const QuotedMessagePreview: React$1.FC<QuotedMessagePreviewProps>;
+declare const QuotedMessagePreview: React__default.FC<QuotedMessagePreviewProps>;
 
-declare const ReplyPreview: React$1.FC<ReplyPreviewProps>;
+declare const ReplyPreview: React__default.FC<ReplyPreviewProps>;
 
-declare const ForwardMessageModal: React$1.FC<ForwardMessageModalProps>;
+declare const ForwardMessageModal: React__default.FC<ForwardMessageModalProps>;
 
-declare const TopicModal: React$1.FC<TopicModalProps>;
+declare const TopicModal: React__default.FC<TopicModalProps>;
 
 type TypingUser = {
     id: string;
@@ -1659,48 +2381,90 @@ declare function useTypingIndicator(): {
 };
 
 type TypingIndicatorProps = {
-    /** Custom render function for the typing text */
-    renderText?: (users: TypingUser[]) => React$1.ReactNode;
+    /** Custom render function for the typing text (I18n) */
+    typingIndicatorLabel?: (users: TypingUser[]) => string;
+    /** Custom render function for the typing text (JSX) */
+    renderText?: (users: TypingUser[]) => React__default.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 TypingIndicator: React__default.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 DefaultChannelInfoHeader: React__default.FC<ChannelInfoHeaderProps>;
+declare const DefaultChannelInfoCover: React__default.FC<ChannelInfoCoverProps>;
+declare const DefaultChannelInfoActions: React__default.FC<ChannelInfoActionsProps>;
+declare const ChannelInfo: React__default.FC<ChannelInfoProps>;
 
-declare const DefaultChannelInfoTabs: React$1.FC<ChannelInfoTabsProps>;
+declare const DefaultChannelInfoTabs: React__default.FC<ChannelInfoTabsProps>;
 
-declare const Modal: React$1.FC<ModalProps>;
+declare const HighlightedText: React__default.FC<{
+    text: string;
+    term: string;
+}>;
+declare const MessageSearchPanel: React__default.FC<MessageSearchPanelProps>;
 
-type PanelProps = {
-    /** Whether the panel is visible */
+type UseMessageSearchProps = {
+    channel: Channel$1;
     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;
+    debounceMs?: number;
+};
+declare const useMessageSearch: ({ channel, isOpen, debounceMs }: UseMessageSearchProps) => {
+    query: string;
+    setQuery: React$1.Dispatch<React$1.SetStateAction<string>>;
+    results: SearchResultMessage[];
+    loading: boolean;
+    hasMore: boolean;
+    loadingMore: boolean;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleScroll: (e: React.UIEvent<HTMLElement>) => void;
+    resetSearch: () => void;
+    userMaps: {
+        original: Record<string, string>;
+        lower: Record<string, string>;
+    };
 };
+
+declare const ChannelSettingsPanel: React__default.FC<ChannelSettingsPanelProps>;
+
+interface UseChannelSettingsOptions {
+    channel: Channel$1 | undefined;
+    isOpen?: boolean;
+    onClose?: () => void;
+    currentUserRole?: string;
+}
+declare const useChannelSettings: ({ channel, isOpen, onClose, currentUserRole }: UseChannelSettingsOptions) => {
+    slowMode: number;
+    setSlowMode: React$1.Dispatch<React$1.SetStateAction<number>>;
+    topicsEnabled: boolean;
+    setTopicsEnabled: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+    capabilities: Record<string, boolean>;
+    toggleCapability: (key: string) => void;
+    keywords: string[];
+    newKeyword: string;
+    setNewKeyword: React$1.Dispatch<React$1.SetStateAction<string>>;
+    handleAddNewKeyword: () => void;
+    handleRemoveKeyword: (kw: string) => void;
+    isSaving: boolean;
+    error: string | null;
+    isDirty: boolean;
+    isOwner: boolean;
+    handleSave: () => Promise<void>;
+};
+
+declare const Modal: React__default.FC<ModalProps>;
+
 /**
  * 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>;
+declare const Panel: React__default.FC<PanelProps>;
 
-declare const UserPicker: React$1.FC<UserPickerProps>;
+declare const UserPicker: React__default.FC<UserPickerProps>;
 
-declare const CreateChannelModal: React$1.FC<CreateChannelModalProps>;
+declare const CreateChannelModal: React__default.FC<CreateChannelModalProps>;
 
 type CallContextValue = {
     callNode: ErmisCallNode | null;
@@ -1733,13 +2497,17 @@ type CallContextValue = {
     isRemoteVideoMuted: boolean;
     upgradeCall: () => Promise<void>;
     callDuration: number;
+    isAccepting: boolean;
+    isRejecting: boolean;
+    isEnding: boolean;
+    resetCall: () => void;
 };
-declare const ErmisCallContext: React$1.Context<CallContextValue | undefined>;
+declare const ErmisCallContext: React__default.Context<CallContextValue | undefined>;
 
 declare const useCallContext: () => CallContextValue;
 
-declare const ErmisCallProvider: React$1.FC<ErmisCallProviderProps>;
+declare const ErmisCallProvider: React__default.FC<ErmisCallProviderProps>;
 
-declare const ErmisCallUI: React$1.FC<ErmisCallUIProps>;
+declare const ErmisCallUI: React__default.FC<ErmisCallUIProps>;
 
-export { ATTACHMENT_TYPES, type AddMemberButtonProps, type AddMemberModalProps, type AddMemberUserItemProps, type AttachButtonProps, type AttachmentItem, AttachmentList, type AttachmentProps, type AttachmentType, Avatar, type AvatarProps, CHANNEL_ROLES, type CallContextValue, Channel, type ChannelAction, type ChannelActionsProps, 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 ChannelRole, ChannelTopicGroup, type ChatContextValue, ChatProvider, type ChatProviderProps, CreateChannelModal, type CreateChannelModalProps, type DateSeparatorProps, DefaultChannelActions, DefaultChannelInfoActions, DefaultChannelInfoCover, DefaultChannelInfoHeader, DefaultChannelInfoTabs, Dropdown, type DropdownProps, type EmojiButtonProps, type EmojiPickerProps, type ErmisCallConnectedAudioProps, type ErmisCallConnectedVideoProps, ErmisCallContext, type ErmisCallControlsBarProps, type ErmisCallErrorProps, ErmisCallProvider, type ErmisCallProviderProps, type ErmisCallRingingProps, ErmisCallUI, type ErmisCallUIProps, ErrorMessage, type FilePreviewItem, FilesPreview, type FilesPreviewProps, type ForwardChannelItemProps, ForwardMessageModal, type ForwardMessageModalProps, type JumpToLatestProps, type LatestReaction, MESSAGE_TYPES, MediaLightbox, type MediaLightboxItem, type MediaLightboxProps, 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, type MessageType, Modal, type ModalProps, type OnlineStatus, 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, TopicModal, TypingIndicator, type TypingIndicatorProps, type TypingUser, type UseChannelMessagesOptions, type UseChannelReturn, type UseLoadMessagesOptions, type UseLoadMessagesReturn, type UseMentionsOptions, type UseMentionsReturn, type UseScrollToMessageOptions, type UseScrollToMessageReturn, UserPicker, type UserPickerItemProps, type UserPickerProps, type UserPickerSelectedBoxProps, type UserPickerUser, VirtualMessageList, canBanTargetMember, canDemoteTargetMember, canManageChannel, canPromoteTargetMember, canRemoveTargetMember, closeAllDropdowns, computeDefaultActions, dedupMessages, defaultMessageRenderers, formatDateLabel, formatTime, getDateKey, getMessageUserId, hasTopicsEnabled, isDirectChannel, isFriendChannel, isGeneralProxy, isGroupChannel, isImage, isImageAttachment, isLinkPreviewAttachment, isOwnerMember, isPendingMember, isPublicGroupChannel, isRegularMessage, isSignalMessage, isSkippedMember, isStickerMessage, isSystemMessage, isTopicChannel, isVideo, isVideoAttachment, isVoiceRecordingAttachment, replaceMentionsForPreview, supportsBlocking, useBannedState, useBlockedState, useCallContext, useChannel, useChannelListUpdates, useChannelMessages, useChannelRowUpdates, useChatClient, useLoadMessages, useMentions, useMessageActions, useOnlineStatus, useOnlineUsers, usePendingState, useScrollToMessage, useTypingIndicator };
+export { ATTACHMENT_TYPES, type AddMemberButtonProps, type AddMemberModalProps, type AddMemberUserItemProps, type AttachButtonProps, type AttachmentItem, AttachmentList, type AttachmentProps, type AttachmentType, Avatar, type AvatarProps, CHANNEL_ROLES, type CallContextValue, Channel, type ChannelAction, type ChannelActionsProps, 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 ChannelInfoTabHeaderProps, type ChannelInfoTabsProps, ChannelItem, type ChannelItemProps, ChannelList, type ChannelListProps, type ChannelProps, type ChannelRole, ChannelRow, ChannelSettingsPanel, type ChannelSettingsPanelProps, type ChatContextValue, ChatProvider, type ChatProviderProps, CreateChannelModal, type CreateChannelModalProps, type DateSeparatorProps, DefaultChannelActions, DefaultChannelInfoActions, DefaultChannelInfoCover, DefaultChannelInfoHeader, DefaultChannelInfoTabs, DefaultPinnedIcon, Dropdown, type DropdownProps, type EditChannelData, type EditChannelModalProps, EditPreview, type EmojiButtonProps, type EmojiPickerProps, type ErmisCallConnectedAudioProps, type ErmisCallConnectedVideoProps, ErmisCallContext, type ErmisCallControlsBarProps, type ErmisCallErrorProps, ErmisCallProvider, type ErmisCallProviderProps, type ErmisCallRingingProps, ErmisCallUI, type ErmisCallUIProps, ErrorMessage, type FilePreviewItem, FilesPreview, type FilesPreviewProps, FlatTopicGroupItem, type ForwardChannelItemProps, ForwardMessageModal, type ForwardMessageModalProps, HighlightedText, type JumpToLatestProps, type LatestReaction, MESSAGE_DISPLAY_TYPES, MESSAGE_TYPES, MediaLightbox, type MediaLightboxItem, type MediaLightboxProps, type MediaTab, type MentionMember, type MentionPayload, MentionSuggestions, type MentionSuggestionsProps, MessageActionsBox, type MessageActionsBoxProps, MessageAttachment, type MessageBubbleProps, type MessageDisplayType, MessageInput, type MessageInputProps, MessageItem, type MessageItemProps, type MessageListProps, MessageQuickReactions, MessageReactions, type MessageReactionsProps, type MessageRendererProps, MessageSearchPanel, type MessageSearchPanelProps, type MessageType, Modal, type ModalProps, type OnlineStatus, Panel, type PinnedMessageItemProps, PinnedMessages, type PinnedMessagesProps, PollMessage, PreviewOverlay, QuotedMessagePreview, type QuotedMessagePreviewProps, type ReactionUser, RegularMessage, ReplyPreview, type ReplyPreviewProps, type SendButtonProps, SignalMessage, StickerMessage, SystemMessage, SystemMessageItem, type SystemMessageItemProps, type Theme, TopicList, type TopicListProps, TopicModal, type TopicModalProps, type TopicPillProps, TypingIndicator, type TypingIndicatorProps, type TypingUser, type UseChannelMessagesOptions, type UseChannelReturn, type UseLoadMessagesOptions, type UseLoadMessagesReturn, type UseMentionsOptions, type UseMentionsReturn, type UseScrollToMessageOptions, type UseScrollToMessageReturn, type UseStickerPickerOptions, UserPicker, type UserPickerItemProps, type UserPickerProps, type UserPickerSelectedBoxProps, type UserPickerUser, VirtualMessageList, buildUserMap, canBanTargetMember, canDemoteTargetMember, canManageChannel, canPromoteTargetMember, canRemoveTargetMember, closeAllDropdowns, computeDefaultActions, countWords, dedupMessages, defaultMessageRenderers, formatDateLabel, formatRelativeDate, formatTime, getAvatarGradient, getDateKey, getLastMessagePreview, getMentionHtml, getMessageUserId, hasTopicsEnabled, isDeletedDisplayMessage, isDirectChannel, isFriendChannel, isGeneralProxy, isGroupChannel, isImage, isImageAttachment, isLinkPreviewAttachment, isOwnerMember, isPendingMember, isPublicGroupChannel, isRegularMessage, isSignalMessage, isSkippedMember, isStickerMessage, isSystemMessage, isTopicChannel, isVideo, isVideoAttachment, isVoiceRecordingAttachment, markChannelAsFullyQueried, removeAccents, replaceMentionsForPreview, supportsBlocking, useBannedState, useBlockedState, useCallContext, useChannel, useChannelCapabilities, useChannelListUpdates, useChannelMembers, useChannelMessages, useChannelProfile, useChannelRowUpdates, useChannelSettings, useChatClient, useChatUser, useContactChannels, useContactCount, useDragAndDrop, useEmojiPicker, useFileUpload, useForwardMessage, useInviteChannels, useInviteCount, useLoadMessages, useMentions, useMessageActions, useMessageSearch, useMessageSend, useOnlineStatus, useOnlineUsers, usePendingState, usePreviewState, useScrollToMessage, useStickerPicker, useTopicGroupUpdates, useTypingIndicator };