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

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { FormatMessageResponse, MessageLabel, Attachment, Channel, ChannelFilters, ChannelSort, ChannelQueryOptions } from '@ermis-network/ermis-chat-sdk';
+import type { FormatMessageResponse, MessageLabel, Attachment, Channel, ChannelFilters, ChannelSort, ChannelQueryOptions, UserCallInfo } from '@ermis-network/ermis-chat-sdk';
 import type { ErmisChat } from '@ermis-network/ermis-chat-sdk';
 
 /* ----------------------------------------------------------
@@ -43,6 +43,8 @@ export 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;
 };
 
 export type ChatProviderProps = {
@@ -50,6 +52,185 @@ export type ChatProviderProps = {
   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;
+};
+
+/* ----------------------------------------------------------
+   Call Provider types
+   ---------------------------------------------------------- */
+export 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;
+}
+
+/* ----------------------------------------------------------
+   Call UI types
+   ---------------------------------------------------------- */
+export 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>;
+};
+
+/* ----------------------------------------------------------
+   Call sub-component prop types (for component slots)
+   ---------------------------------------------------------- */
+
+/** Props for the Ringing state view */
+export 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 */
+export type ErmisCallConnectedAudioProps = {
+  peerInfo?: UserCallInfo;
+  callDuration: number;
+  isRemoteMicMuted: boolean;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+  connectedLabel: string;
+  renderControls: () => React.ReactNode;
+};
+
+/** Props for the Connected Video state view */
+export type ErmisCallConnectedVideoProps = {
+  localVideoRef: React.RefObject<HTMLVideoElement | null>;
+  remoteVideoRef: React.RefObject<HTMLVideoElement | null>;
+  isRemoteMicMuted: boolean;
+  renderControls: () => React.ReactNode;
+};
+
+/** Props for the Error state view */
+export type ErmisCallErrorProps = {
+  errorMessage: string;
+  clearError: () => void;
+  cancelLabel: string;
+  PhoneIcon: React.ComponentType;
+};
+
+/** Props for the Controls bar */
+export 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>;
 };
 
 /* ----------------------------------------------------------
@@ -96,6 +277,16 @@ export type ChannelHeaderProps = {
   renderRight?: (channel: Channel, actionDisabled?: boolean) => React.ReactNode;
   /** Override default title rendering */
   renderTitle?: (channel: Channel) => 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 */
@@ -591,6 +782,7 @@ export interface ModalProps {
   footer?: React.ReactNode;
   maxWidth?: string;
   hideCloseButton?: boolean;
+  closeOnOutsideClick?: boolean;
 }
 
 /* ----------------------------------------------------------
@@ -953,3 +1145,103 @@ export type ChannelSettingsPanelProps = {
   /** Custom slow mode options */
   slowModeOptions?: { label: string; value: number }[];
 };
+
+/* ----------------------------------------------------------
+   UserPicker types
+   ---------------------------------------------------------- */
+
+/** Individual user item in UserPicker */
+export type UserPickerUser = {
+  id: string;
+  name?: string;
+  email?: string;
+  phone?: string;
+  avatar?: string;
+  [key: string]: any;
+};
+
+/** Props for each user row in UserPicker */
+export 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 */
+export type UserPickerSelectedBoxProps = {
+  users: UserPickerUser[];
+  onRemove: (userId: string) => void;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+  /** Label when no users selected */
+  emptyLabel?: string;
+};
+
+/** Main UserPicker props */
+export 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;
+};
+
+/* ----------------------------------------------------------
+   Create Channel Modal Props
+   ---------------------------------------------------------- */
+
+export type CreateChannelModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: (channel: any) => void; // Uses 'any' or 'Channel' based on context
+
+  /** 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; // bytes
+  maxImageSizeError?: string;
+};