@ermis-network/ermis-chat-react 1.0.1 → 1.0.3

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React$1 from 'react';
-import { Channel as Channel$1, Attachment, FormatMessageResponse, ChannelFilters, ChannelSort, ChannelQueryOptions, ErmisChat, MessageLabel } from '@ermis-network/ermis-chat-sdk';
+import { Channel as Channel$1, Attachment, FormatMessageResponse, ChannelFilters, ChannelSort, ChannelQueryOptions, ErmisChat, UserCallInfo, MessageLabel, ErmisCallNode, CallStatus } from '@ermis-network/ermis-chat-sdk';
 import { VListHandle } from 'virtua';
 
 type Theme = 'dark' | 'light';
@@ -39,12 +39,176 @@ type ChatContextValue = {
     /** Message ID to jump/scroll to (set by search, cleared after scroll) */
     jumpToMessageId: string | null;
     setJumpToMessageId: (id: string | null) => void;
+    /** Indicates whether the direct call feature is enabled */
+    enableCall?: boolean;
 };
 type ChatProviderProps = {
     client: ErmisChat;
     children: React.ReactNode;
     /** Initial theme, defaults to 'dark' */
     initialTheme?: Theme;
+    /** Enable direct call feature (Audio/Video). If enabled, configures internal CallProvider */
+    enableCall?: boolean;
+    /** Provide session ID to be used for call nodes */
+    callSessionId?: string;
+    /** Override the WebAssembly module path for Call Nodes */
+    callWasmPath?: string;
+    /** Override the relay URL for Call Nodes */
+    callRelayUrl?: string;
+    /** Custom Component to completely replace the default Call UI */
+    CallUIComponent?: React.ComponentType;
+    /** Path to the mp3 file for incoming call ringing */
+    incomingCallAudioPath?: string;
+    /** Path to the mp3 file for outgoing call ringing */
+    outgoingCallAudioPath?: string;
+    /** Called when a call is initiated by the local user */
+    onCallStart?: (callType: 'audio' | 'video', cid: string) => void;
+    /** Called when a call ends (includes duration in seconds) */
+    onCallEnd?: (duration: number) => void;
+    /** Called when a call error occurs */
+    onCallError?: (error: string) => void;
+    /** Called when an incoming call is received */
+    onIncomingCall?: (callerInfo: UserCallInfo) => void;
+    /** Called when the local user accepts an incoming call */
+    onCallAccepted?: () => void;
+    /** Called when the local user rejects an incoming call */
+    onCallRejected?: () => void;
+};
+interface ErmisCallProviderProps {
+    children: React.ReactNode;
+    client: ErmisChat;
+    sessionId: string;
+    wasmPath?: string;
+    relayUrl?: string;
+    /** Called when a call is initiated by the local user */
+    onCallStart?: (callType: 'audio' | 'video', cid: string) => void;
+    /** Called when a call ends (includes duration in seconds) */
+    onCallEnd?: (duration: number) => void;
+    /** Called when a call error occurs */
+    onCallError?: (error: string) => void;
+    /** Called when an incoming call is received */
+    onIncomingCall?: (callerInfo: UserCallInfo) => void;
+    /** Called when the local user accepts an incoming call */
+    onCallAccepted?: () => void;
+    /** Called when the local user rejects an incoming call */
+    onCallRejected?: () => void;
+}
+type ErmisCallUIProps = {
+    /** Additional CSS class name */
+    className?: string;
+    incomingCallTitle?: (callType: string) => string;
+    outgoingCallTitle?: (callType: string) => string;
+    ongoingCallTitle?: (callType: string) => string;
+    isCallingYouLabel?: string;
+    ringingLabel?: string;
+    rejectCallLabel?: string;
+    acceptCallLabel?: string;
+    endCallLabel?: string;
+    cancelLabel?: string;
+    toggleMicTitle?: string;
+    toggleVideoTitle?: string;
+    shareScreenTitle?: string;
+    stopScreenShareTitle?: string;
+    /** Label shown during an active call (default: "Connected") */
+    connectedLabel?: string;
+    /** Label for the audio call type badge (default: "Audio Call") */
+    audioCallBadgeLabel?: string;
+    /** Label for the video call type badge (default: "Video Call") */
+    videoCallBadgeLabel?: string;
+    /** Tooltip for the fullscreen button (default: "Fullscreen") */
+    fullscreenTitle?: string;
+    /** Tooltip for the exit fullscreen button (default: "Exit Fullscreen") */
+    exitFullscreenTitle?: string;
+    /** Tooltip for the upgrade call button (default: "Request Video Upgrade") */
+    upgradeCallTitle?: string;
+    /** If true, suppress incoming call UI — useful for "Do Not Disturb" mode */
+    suppressIncomingCalls?: boolean;
+    /** Called on each second tick of the call duration timer */
+    onCallDurationChange?: (seconds: number) => void;
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    MicIcon?: React.ComponentType;
+    MicOffIcon?: React.ComponentType;
+    VideoIcon?: React.ComponentType;
+    VideoOffIcon?: React.ComponentType;
+    PhoneIcon?: React.ComponentType;
+    ScreenShareIcon?: React.ComponentType;
+    ScreenShareOffIcon?: React.ComponentType;
+    FullscreenIcon?: React.ComponentType;
+    ExitFullscreenIcon?: React.ComponentType;
+    /** Custom icon for the upgrade call button (audio → video) */
+    UpgradeCallIcon?: React.ComponentType;
+    incomingCallAudioPath?: string;
+    outgoingCallAudioPath?: string;
+    /** Replace the entire Ringing state view */
+    RingingComponent?: React.ComponentType<ErmisCallRingingProps>;
+    /** Replace the entire Connected Audio state view */
+    ConnectedAudioComponent?: React.ComponentType<ErmisCallConnectedAudioProps>;
+    /** Replace the entire Connected Video state view */
+    ConnectedVideoComponent?: React.ComponentType<ErmisCallConnectedVideoProps>;
+    /** Replace the entire Error state view */
+    ErrorComponent?: React.ComponentType<ErmisCallErrorProps>;
+    /** Replace the controls bar */
+    ControlsBarComponent?: React.ComponentType<ErmisCallControlsBarProps>;
+};
+/** Props for the Ringing state view */
+type ErmisCallRingingProps = {
+    peerInfo?: UserCallInfo;
+    callType: string;
+    isIncoming: boolean;
+    acceptCall: () => Promise<void>;
+    rejectCall: () => Promise<void>;
+    endCall: () => Promise<void>;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    isCallingYouLabel: string;
+    ringingLabel: string;
+    rejectCallLabel: string;
+    acceptCallLabel: string;
+    endCallLabel: string;
+    audioCallBadgeLabel: string;
+    videoCallBadgeLabel: string;
+};
+/** Props for the Connected Audio state view */
+type ErmisCallConnectedAudioProps = {
+    peerInfo?: UserCallInfo;
+    callDuration: number;
+    isRemoteMicMuted: boolean;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    connectedLabel: string;
+    renderControls: () => React.ReactNode;
+};
+/** Props for the Connected Video state view */
+type ErmisCallConnectedVideoProps = {
+    localVideoRef: React.RefObject<HTMLVideoElement | null>;
+    remoteVideoRef: React.RefObject<HTMLVideoElement | null>;
+    isRemoteMicMuted: boolean;
+    renderControls: () => React.ReactNode;
+};
+/** Props for the Error state view */
+type ErmisCallErrorProps = {
+    errorMessage: string;
+    clearError: () => void;
+    cancelLabel: string;
+    PhoneIcon: React.ComponentType;
+};
+/** Props for the Controls bar */
+type ErmisCallControlsBarProps = {
+    callType: string;
+    toggleMic: () => void;
+    toggleVideo: () => void;
+    toggleScreenShare: () => Promise<void>;
+    toggleFullscreen: () => void;
+    upgradeCall: () => Promise<void>;
+    endCall: () => Promise<void>;
+    isMicMuted: boolean;
+    isVideoMuted: boolean;
+    isScreenSharing: boolean;
+    isFullscreen: boolean;
+    audioDevices: MediaDeviceInfo[];
+    videoDevices: MediaDeviceInfo[];
+    selectedAudioDeviceId: string;
+    selectedVideoDeviceId: string;
+    switchAudioDevice: (id: string) => Promise<void>;
+    switchVideoDevice: (id: string) => Promise<void>;
 };
 type AvatarProps = {
     /** Image URL */
@@ -82,6 +246,18 @@ type ChannelHeaderProps = {
     renderRight?: (channel: Channel$1, actionDisabled?: boolean) => React.ReactNode;
     /** Override default title rendering */
     renderTitle?: (channel: Channel$1) => React.ReactNode;
+    /** Custom renderer for Audio Call button */
+    renderAudioCallButton?: (onClick: () => void, disabled: boolean) => React.ReactNode;
+    /** Custom renderer for Video Call button */
+    renderVideoCallButton?: (onClick: () => void, disabled: boolean) => React.ReactNode;
+    /** I18n label for the audio call button tooltip (default: "Audio Call") */
+    audioCallTitle?: string;
+    /** I18n label for the video call button tooltip (default: "Video Call") */
+    videoCallTitle?: string;
+    /** Custom component to show when a call is active (e.g. "Call in progress" badge) */
+    CallBadgeComponent?: React.ComponentType<{
+        callType: string;
+    }>;
 };
 /** Data passed to a fully custom HeaderComponent */
 type ChannelHeaderData = {
@@ -513,6 +689,7 @@ interface ModalProps {
     footer?: React.ReactNode;
     maxWidth?: string;
     hideCloseButton?: boolean;
+    closeOnOutsideClick?: boolean;
 }
 /** Attachment item from the channel attachment query API */
 type AttachmentItem = {
@@ -800,6 +977,89 @@ type ChannelInfoProps = {
     actionsBlockLabel?: string;
     actionsUnblockLabel?: string;
 };
+/** Individual user item in UserPicker */
+type UserPickerUser = {
+    id: string;
+    name?: string;
+    email?: string;
+    phone?: string;
+    avatar?: string;
+    [key: string]: any;
+};
+/** Props for each user row in UserPicker */
+type UserPickerItemProps = {
+    user: UserPickerUser;
+    selected: boolean;
+    disabled: boolean;
+    mode: 'radio' | 'checkbox';
+    onToggle: (user: UserPickerUser) => void;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+};
+/** Props for the selected users chip box */
+type UserPickerSelectedBoxProps = {
+    users: UserPickerUser[];
+    onRemove: (userId: string) => void;
+    AvatarComponent: React.ComponentType<AvatarProps>;
+    /** Label when no users selected */
+    emptyLabel?: string;
+};
+/** Main UserPicker props */
+type UserPickerProps = {
+    /** Selection mode: 'radio' for single, 'checkbox' for multi */
+    mode: 'radio' | 'checkbox';
+    /** Called whenever selection changes */
+    onSelectionChange?: (users: UserPickerUser[]) => void;
+    /** User IDs to exclude from the list (e.g. existing members) */
+    excludeUserIds?: string[];
+    /** Users that are pre-selected on mount */
+    initialSelectedUsers?: UserPickerUser[];
+    /** Page size for queryUsers (default: 30) */
+    pageSize?: number;
+    /** Custom avatar component */
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    /** Custom user item component (replaces the default row) */
+    UserItemComponent?: React.ComponentType<UserPickerItemProps>;
+    /** Custom selected box component (checkbox mode only) */
+    SelectedBoxComponent?: React.ComponentType<UserPickerSelectedBoxProps>;
+    /** Custom search input component */
+    SearchInputComponent?: React.ComponentType<{
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        placeholder: string;
+    }>;
+    /** I18n labels */
+    searchPlaceholder?: string;
+    loadingText?: string;
+    emptyText?: string;
+    loadingMoreText?: string;
+    selectedEmptyLabel?: string;
+};
+type CreateChannelModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess?: (channel: any) => void;
+    /** Override visual components */
+    AvatarComponent?: React.ComponentType<AvatarProps>;
+    UserItemComponent?: React.ComponentType<UserPickerItemProps>;
+    /** i18n labels */
+    title?: string;
+    directTabLabel?: string;
+    groupTabLabel?: string;
+    groupNameLabel?: string;
+    groupNamePlaceholder?: string;
+    groupDescriptionLabel?: string;
+    groupDescriptionPlaceholder?: string;
+    groupPublicLabel?: string;
+    groupAvatarLabel?: string;
+    userSearchPlaceholder?: string;
+    cancelButtonLabel?: string;
+    createButtonLabel?: string;
+    creatingButtonLabel?: string;
+    /** File upload configuration for group channel images */
+    imageAccept?: string;
+    maxImageSize?: number;
+    maxImageSizeError?: string;
+};
 
 declare const ChatProvider: React$1.FC<ChatProviderProps>;
 
@@ -1135,4 +1395,48 @@ type PanelProps = {
  */
 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 };
+declare const UserPicker: React$1.FC<UserPickerProps>;
+
+declare const CreateChannelModal: React$1.FC<CreateChannelModalProps>;
+
+type CallContextValue = {
+    callNode: ErmisCallNode | null;
+    callStatus: CallStatus | '';
+    localStream: MediaStream | null;
+    remoteStream: MediaStream | null;
+    callType: string;
+    callerInfo?: UserCallInfo | undefined;
+    receiverInfo?: UserCallInfo | undefined;
+    isIncoming: boolean;
+    createCall: (type: 'audio' | 'video', cid: string) => Promise<void>;
+    acceptCall: () => Promise<void>;
+    rejectCall: () => Promise<void>;
+    endCall: () => Promise<void>;
+    toggleMic: () => void;
+    toggleVideo: () => void;
+    isMicMuted: boolean;
+    isVideoMuted: boolean;
+    audioDevices: MediaDeviceInfo[];
+    videoDevices: MediaDeviceInfo[];
+    selectedAudioDeviceId: string;
+    selectedVideoDeviceId: string;
+    isScreenSharing: boolean;
+    errorMessage: string | null;
+    toggleScreenShare: () => Promise<void>;
+    switchAudioDevice: (id: string) => Promise<void>;
+    switchVideoDevice: (id: string) => Promise<void>;
+    clearError: () => void;
+    isRemoteMicMuted: boolean;
+    isRemoteVideoMuted: boolean;
+    upgradeCall: () => Promise<void>;
+    callDuration: number;
+};
+declare const ErmisCallContext: React$1.Context<CallContextValue | undefined>;
+
+declare const useCallContext: () => CallContextValue;
+
+declare const ErmisCallProvider: React$1.FC<ErmisCallProviderProps>;
+
+declare const ErmisCallUI: React$1.FC<ErmisCallUIProps>;
+
+export { type AddMemberButtonProps, type AddMemberModalProps, type AddMemberUserItemProps, type AttachButtonProps, type AttachmentItem, AttachmentList, type AttachmentProps, Avatar, type AvatarProps, type CallContextValue, 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, CreateChannelModal, type CreateChannelModalProps, type DateSeparatorProps, 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, 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, UserPicker, type UserPickerItemProps, type UserPickerProps, type UserPickerSelectedBoxProps, type UserPickerUser, VirtualMessageList, closeAllDropdowns, dedupMessages, defaultMessageRenderers, formatDateLabel, formatTime, getDateKey, getMessageUserId, replaceMentionsForPreview, useBannedState, useBlockedState, useCallContext, useChannel, useChannelListUpdates, useChannelMessages, useChannelRowUpdates, useChatClient, useLoadMessages, useMentions, useMessageActions, usePendingState, useScrollToMessage, useTypingIndicator };