@ermis-network/ermis-chat-react 1.0.6 → 1.0.8

package/src/types.ts

@@ -1,4 +1,13 @@
-import type { FormatMessageResponse, MessageLabel, Attachment, Channel, ChannelFilters, ChannelSort, ChannelQueryOptions, UserCallInfo } 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';
 
 /* ----------------------------------------------------------
@@ -245,6 +254,8 @@ export type AvatarProps = {
   size?: number;
   /** Additional CSS class name */
   className?: string;
+  /** Disable opening the lightbox on click */
+  disableLightbox?: boolean;
 };
 
 /* ----------------------------------------------------------
@@ -287,6 +298,14 @@ export type ChannelHeaderProps = {
   videoCallTitle?: string;
   /** Custom component to show when a call is active (e.g. "Call in progress" badge) */
   CallBadgeComponent?: React.ComponentType<{ callType: string }>;
+  /** Show online/offline indicator for direct friend channels (default: true) */
+  showOnlineStatus?: boolean;
+  /** I18n label for "Online" subtitle (default: "Online") */
+  onlineLabel?: string;
+  /** I18n label for "Offline" subtitle (default: "Offline") */
+  offlineLabel?: string;
+  /** Custom online indicator component (replaces the default dot + label) */
+  OnlineIndicatorComponent?: React.ComponentType<{ isOnline: boolean }>;
 };
 
 /** Data passed to a fully custom HeaderComponent */
@@ -299,6 +318,48 @@ export type ChannelHeaderData = {
 /* ----------------------------------------------------------
    ChannelList types
    ---------------------------------------------------------- */
+export type ChannelAction = {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick: (channel: Channel, e: React.MouseEvent) => void;
+  isDanger?: boolean;
+};
+
+export type ChannelActionLabels = {
+  pinChannel?: string;
+  unpinChannel?: string;
+  pinTopic?: string;
+  unpinTopic?: string;
+  blockUser?: string;
+  unblockUser?: string;
+  editTopic?: string;
+  closeTopic?: string;
+  reopenTopic?: string;
+  createTopic?: string;
+  deleteChannel?: string;
+  leaveChannel?: string;
+};
+
+export type ChannelActionIcons = {
+  PinIcon?: React.ReactNode;
+  UnpinIcon?: React.ReactNode;
+  BlockIcon?: React.ReactNode;
+  UnblockIcon?: React.ReactNode;
+  EditTopicIcon?: React.ReactNode;
+  CloseTopicIcon?: React.ReactNode;
+  ReopenTopicIcon?: React.ReactNode;
+  CreateTopicIcon?: React.ReactNode;
+  DeleteChannelIcon?: React.ReactNode;
+  LeaveChannelIcon?: React.ReactNode;
+};
+
+export type ChannelActionsProps = {
+  channel: Channel;
+  actions: ChannelAction[];
+  onClose: () => void;
+};
+
 export type ChannelItemProps = {
   channel: Channel;
   isActive: boolean;
@@ -306,6 +367,7 @@ export type ChannelItemProps = {
   unreadCount: number;
   lastMessageText: string;
   lastMessageUser: string;
+  lastMessageTimestamp?: Date | string | null;
   onSelect: (channel: Channel) => void;
   AvatarComponent: React.ComponentType<AvatarProps>;
   /** Whether the current user has blocked this channel (messaging only) */
@@ -316,6 +378,24 @@ export type ChannelItemProps = {
   pendingBadgeLabel?: string;
   /** Label for the blocked channel badge indicator */
   blockedBadgeLabel?: string;
+  isClosedTopic?: boolean;
+  closedTopicIcon?: React.ReactNode;
+  PinnedIconComponent?: React.ComponentType;
+  ChannelActionsComponent?: React.ComponentType<ChannelActionsProps>;
+  /** Handler when Create Topic action is triggered */
+  onAddTopic?: (channel: Channel) => void;
+  /** Handler when Edit Topic action is triggered */
+  onEditTopic?: (channel: Channel) => void;
+  /** Handler when Close/Reopen Topic action is triggered */
+  onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => void;
+  /** Array of action IDs to hide from the actions dropdown */
+  hiddenActions?: string[];
+  /** Custom labels for default channel actions */
+  actionLabels?: ChannelActionLabels;
+  /** Custom icons for default channel actions */
+  actionIcons?: ChannelActionIcons;
+  /** Whether the other user in this direct channel is online (friend channels only) */
+  isOnline?: boolean;
 };
 
 export type ChannelListProps = {
@@ -325,6 +405,8 @@ export type ChannelListProps = {
   renderChannel?: (channel: Channel, isActive: boolean) => React.ReactNode;
   onChannelSelect?: (channel: Channel) => void;
   className?: string;
+  /** Array of action IDs to hide from the actions dropdown */
+  hiddenActions?: string[];
   LoadingIndicator?: React.ComponentType<{ text?: string }>;
   EmptyStateIndicator?: React.ComponentType<{ text?: string }>;
   AvatarComponent?: React.ComponentType<AvatarProps>;
@@ -342,6 +424,32 @@ export type ChannelListProps = {
   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;
+  /** Handler when Add Topic button is clicked on a team channel */
+  onAddTopic?: (channel: Channel) => void;
+  /** Optional custom emoji picker for TopicModal */
+  TopicEmojiPickerComponent?: React.ComponentType<any>;
+  closedTopicIcon?: React.ReactNode;
+  PinnedIconComponent?: React.ComponentType;
+  /** Custom component for channel actions dropdown */
+  ChannelActionsComponent?: React.ComponentType<ChannelActionsProps>;
+  /** Handler when Edit Topic action is triggered */
+  onEditTopic?: (channel: Channel) => void;
+  /** Handler when Close/Reopen Topic action is triggered */
+  onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => 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;
 };
 
 /* ----------------------------------------------------------
@@ -349,6 +457,8 @@ export type ChannelListProps = {
    ---------------------------------------------------------- */
 export type AttachmentProps = {
   attachment: Attachment;
+  /** Click handler — when provided, attachment becomes clickable (opens lightbox) */
+  onClick?: () => void;
 };
 
 export type MessageRendererProps = {
@@ -370,6 +480,23 @@ export type JumpToLatestProps = {
   onClick: () => void;
 };
 
+/* ----------------------------------------------------------
+   MediaLightbox types
+   ---------------------------------------------------------- */
+export type MediaLightboxItem = {
+  type: 'image' | 'video';
+  src: string;
+  alt?: string;
+  posterSrc?: string;
+};
+
+export type MediaLightboxProps = {
+  items: MediaLightboxItem[];
+  initialIndex?: number;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
 /* ----------------------------------------------------------
    MessageList types
    ---------------------------------------------------------- */
@@ -420,6 +547,8 @@ export type MessageListProps = {
   TypingIndicatorComponent?: React.ComponentType;
   /** Custom component for message reactions */
   MessageReactionsComponent?: React.ComponentType<MessageReactionsProps>;
+  /** Custom media lightbox component (replaces the default lightbox entirely) */
+  MediaLightboxComponent?: React.ComponentType<MediaLightboxProps>;
 
   /** I18n Labels */
   emptyTitle?: string;
@@ -433,6 +562,19 @@ export type MessageListProps = {
   pendingOverlaySubtitle?: string;
   pendingAcceptLabel?: string;
   pendingRejectLabel?: string;
+  /** I18n Label for skip button on direct messaging channels (default: "Skip") */
+  pendingSkipLabel?: string;
+  skippedOverlayTitle?: string;
+  skippedOverlaySubtitle?: string;
+  skippedAcceptLabel?: string;
+  closedTopicOverlayTitle?: string;
+  closedTopicOverlaySubtitle?: string;
+  closedTopicReopenLabel?: string;
+
+  /** Custom component for pending invitee notification in direct channels */
+  PendingInviteeNotificationComponent?: React.ComponentType<{ inviteeName?: string, label?: string }>;
+  /** I18n Label for pending invitee notification */
+  pendingInviteeLabel?: string | ((inviteeName?: string) => string);
 };
 
 /* ----------------------------------------------------------
@@ -460,6 +602,8 @@ export type MessageReactionsProps = {
   AvatarComponent?: React.ComponentType<AvatarProps>;
   /** Callback when clicking a reaction */
   onClickReaction?: (type: string) => void;
+  /** Whether interactions are disabled */
+  disabled?: boolean;
 };
 
 /* ----------------------------------------------------------
@@ -580,7 +724,11 @@ export type MessageInputProps = {
   /** Custom reply preview component */
   ReplyPreviewComponent?: React.ComponentType<ReplyPreviewProps>;
   /** Custom edit preview component */
-  EditPreviewComponent?: React.ComponentType<{ message: FormatMessageResponse; onDismiss: () => void; editingMessageLabel?: string }>;
+  EditPreviewComponent?: React.ComponentType<{
+    message: FormatMessageResponse;
+    onDismiss: () => void;
+    editingMessageLabel?: string;
+  }>;
   /** I18n Label for banned state */
   bannedLabel?: string;
   /** I18n Label for blocked state (messaging channels) */
@@ -593,6 +741,8 @@ export type MessageInputProps = {
   sendDisabledLabel?: string;
   /** I18n Label for slow mode active */
   slowModeLabel?: (cooldown: number) => React.ReactNode;
+  /** I18n Label for closed topic */
+  closedTopicLabel?: string;
 };
 
 /* ----------------------------------------------------------
@@ -867,6 +1017,10 @@ export type ChannelInfoCoverProps = {
   onEditClick?: () => void;
   /** Whether the channel is public */
   isPublic?: boolean;
+  /** Name of the parent channel (if this is a topic) */
+  parentChannelName?: string;
+  /** Whether the channel is a topic */
+  isTopic?: boolean;
   /** Whether the channel is a team channel */
   isTeamChannel?: boolean;
 };
@@ -879,6 +1033,8 @@ export type ChannelInfoActionsProps = {
   onBlockUser?: () => void;
   onUnblockUser?: () => void;
   isTeamChannel?: boolean;
+  isTopic?: boolean;
+  isClosedTopic?: boolean;
   isBlocked?: boolean;
   currentUserRole?: string;
   searchLabel?: string;
@@ -887,6 +1043,10 @@ export type ChannelInfoActionsProps = {
   leaveLabel?: string;
   blockLabel?: string;
   unblockLabel?: string;
+  onCloseTopic?: () => void;
+  onReopenTopic?: () => void;
+  closeTopicLabel?: string;
+  reopenTopicLabel?: string;
 };
 
 export type ChannelInfoMember = {
@@ -988,7 +1148,11 @@ export type AddMemberModalProps = {
   /** Custom user item component (replaces the default row) */
   UserItemComponent?: React.ComponentType<AddMemberUserItemProps>;
   /** Custom search input component */
-  SearchInputComponent?: React.ComponentType<{ value: string; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; placeholder: string }>;
+  SearchInputComponent?: React.ComponentType<{
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder: string;
+  }>;
 };
 
 export type ChannelInfoTabsProps = {
@@ -1101,6 +1265,13 @@ export type ChannelInfoProps = {
   /** I18n labels for block/unblock actions */
   actionsBlockLabel?: string;
   actionsUnblockLabel?: string;
+  actionsCloseTopicLabel?: string;
+  actionsReopenTopicLabel?: string;
+
+  /** Settings Panel Topics Labels */
+  settingsWorkspaceTopicsTitle?: string;
+  settingsTopicsFeatureName?: string;
+  settingsTopicsFeatureDescription?: string;
 };
 
 /* ----------------------------------------------------------
@@ -1144,6 +1315,10 @@ export type ChannelSettingsPanelProps = {
   title?: string;
   /** Custom slow mode options */
   slowModeOptions?: { label: string; value: number }[];
+  /** I18n labels for Topics settings */
+  workspaceTopicsTitle?: string;
+  topicsFeatureName?: string;
+  topicsFeatureDescription?: string;
 };
 
 /* ----------------------------------------------------------
@@ -1239,9 +1414,34 @@ export type CreateChannelModalProps = {
   cancelButtonLabel?: string;
   createButtonLabel?: string;
   creatingButtonLabel?: string;
+  messageButtonLabel?: string;
 
   /** File upload configuration for group channel images */
   imageAccept?: string;
   maxImageSize?: number; // bytes
   maxImageSizeError?: string;
 };
+
+export type TopicModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: (channel: Channel) => void;
+  /** Inject external emoji picker component */
+  EmojiPickerComponent?: React.ComponentType<{ onSelect: (emoji: any) => void; [key: string]: any }>;
+  /** Parent team channel to create topic under, will use activeChannel if not provided */
+  parentChannel?: Channel;
+
+  /** If provided, operates in edit mode for this topic */
+  topic?: Channel;
+
+  /** i18n labels */
+  title?: string;
+  nameLabel?: string;
+  namePlaceholder?: string;
+  emojiLabel?: string;
+  descriptionLabel?: string;
+  descriptionPlaceholder?: string;
+  cancelButtonLabel?: string;
+  saveButtonLabel?: string;
+  savingButtonLabel?: string;
+};