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

package/src/types.ts

@@ -6,7 +6,11 @@ import type {
   ChannelFilters,
   ChannelSort,
   ChannelQueryOptions,
+  E2eeRecoveryPolicy,
+  E2eeAttachmentManifest,
   UserCallInfo,
+  SystemMessageTranslations,
+  SignalMessageTranslations,
 } from '@ermis-network/ermis-chat-sdk';
 import type { ErmisChat } from '@ermis-network/ermis-chat-sdk';
 
@@ -54,11 +58,21 @@ export type ChatContextValue = {
   setJumpToMessageId: (id: string | null) => void;
   /** Indicates whether the direct call feature is enabled */
   enableCall?: boolean;
+  /** Save a draft message (innerHTML and files) for a specific channel */
+  setDraft: (cid: string, draft: { html: string; files: any[] }) => void;
+  /** Retrieve the saved draft for a specific channel */
+  getDraft: (cid: string) => { html: string; files: any[] } | undefined;
+  /** Clear all saved drafts (e.g. on logout) */
+  clearAllDrafts: () => void;
 };
 
+import type { ChatComponentsContextValue } from './context/ChatComponentsContext';
+
 export 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 */
@@ -193,6 +207,9 @@ export type ErmisCallRingingProps = {
   endCallLabel: string;
   audioCallBadgeLabel: string;
   videoCallBadgeLabel: string;
+  isAccepting?: boolean;
+  isRejecting?: boolean;
+  isEnding?: boolean;
 };
 
 /** Props for the Connected Audio state view */
@@ -240,6 +257,7 @@ export type ErmisCallControlsBarProps = {
   selectedVideoDeviceId: string;
   switchAudioDevice: (id: string) => Promise<void>;
   switchVideoDevice: (id: string) => Promise<void>;
+  isEnding?: boolean;
 };
 
 /* ----------------------------------------------------------
@@ -337,8 +355,10 @@ export type ChannelActionLabels = {
   closeTopic?: string;
   reopenTopic?: string;
   createTopic?: string;
+  deleteTopic?: string;
   deleteChannel?: string;
   leaveChannel?: string;
+  truncateChannel?: string;
 };
 
 export type ChannelActionIcons = {
@@ -350,8 +370,10 @@ export type ChannelActionIcons = {
   CloseTopicIcon?: React.ReactNode;
   ReopenTopicIcon?: React.ReactNode;
   CreateTopicIcon?: React.ReactNode;
+  DeleteTopicIcon?: React.ReactNode;
   DeleteChannelIcon?: React.ReactNode;
   LeaveChannelIcon?: React.ReactNode;
+  TruncateChannelIcon?: React.ReactNode;
 };
 
 export type ChannelActionsProps = {
@@ -365,7 +387,7 @@ export type ChannelItemProps = {
   isActive: boolean;
   hasUnread: boolean;
   unreadCount: number;
-  lastMessageText: string;
+  lastMessageText: React.ReactNode;
   lastMessageUser: string;
   lastMessageTimestamp?: Date | string | null;
   onSelect: (channel: Channel) => void;
@@ -388,6 +410,10 @@ export type ChannelItemProps = {
   onEditTopic?: (channel: Channel) => void;
   /** Handler when Close/Reopen Topic action is triggered */
   onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => void;
+  /** Handler when Delete Topic action is triggered */
+  onDeleteTopic?: (channel: Channel) => void;
+  /** Handler when Truncate Channel action is triggered */
+  onTruncateChannel?: (channel: Channel) => void;
   /** Array of action IDs to hide from the actions dropdown */
   hiddenActions?: string[];
   /** Custom labels for default channel actions */
@@ -398,6 +424,70 @@ export type ChannelItemProps = {
   isOnline?: boolean;
 };
 
+/* ----------------------------------------------------------
+   TopicPill types (for FlatTopicGroupItem)
+   ---------------------------------------------------------- */
+export type TopicPillProps = {
+  /** The topic channel to display as a pill */
+  topic: Channel;
+  /** Size of the topic avatar in pixels (default: 16) */
+  avatarSize?: number;
+};
+
+/* ----------------------------------------------------------
+   TopicList types
+   ---------------------------------------------------------- */
+export type TopicListProps = {
+  /** Parent channel that has topics enabled */
+  channel: Channel;
+  /** 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) => void;
+  /** Handler for Edit Topic action */
+  onEditTopic?: (channel: Channel) => void;
+  /** Handler for Close/Reopen Topic action */
+  onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => void;
+  /** Handler for Delete Topic action */
+  onDeleteTopic?: (channel: Channel) => 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;
+  encryptedMessageLabel?: React.ReactNode;
+  encryptedMessageUnavailableLabel?: React.ReactNode;
+  systemMessageTranslations?: SystemMessageTranslations;
+  signalMessageTranslations?: SignalMessageTranslations;
+};
+
 export type ChannelListProps = {
   filters?: ChannelFilters;
   sort?: ChannelSort;
@@ -405,6 +495,8 @@ export type ChannelListProps = {
   renderChannel?: (channel: Channel, isActive: boolean) => React.ReactNode;
   onChannelSelect?: (channel: Channel) => 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<{ text?: string }>;
@@ -420,18 +512,34 @@ export 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;
+  /** Label for encrypted messages in the preview strip (default: 'Encrypted message') */
+  encryptedMessageLabel?: React.ReactNode;
+  /** Label for encrypted messages that failed in the preview strip (default: 'Encrypted message unavailable') */
+  encryptedMessageUnavailableLabel?: 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) => void;
   /** Optional custom emoji picker for TopicModal */
@@ -444,12 +552,32 @@ export type ChannelListProps = {
   onEditTopic?: (channel: Channel) => void;
   /** Handler when Close/Reopen Topic action is triggered */
   onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => void;
+  /** Handler when Delete Topic action is triggered */
+  onDeleteTopic?: (channel: Channel) => void;
+  /** Handler when Truncate action is triggered */
+  onTruncateChannel?: (channel: Channel) => 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) => 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;
+  /** Whether to show topic pills on team channels (default: false) */
+  showTopicPills?: boolean;
 };
 
 /* ----------------------------------------------------------
@@ -464,6 +592,15 @@ export type AttachmentProps = {
 export type MessageRendererProps = {
   message: FormatMessageResponse;
   isOwnMessage: boolean;
+  systemMessageTranslations?: SystemMessageTranslations;
+  signalMessageTranslations?: SignalMessageTranslations;
+  onMentionClick?: (userId: string) => void;
+  /** I18n Label for encrypted messages (default: 'Encrypted message') */
+  encryptedMessageLabel?: string;
+  /** I18n Label for encrypted messages that failed to decrypt (default: 'Encrypted message could not be decrypted') */
+  encryptedMessageFailedLabel?: string;
+  /** I18n Label for encrypted messages being decrypted (default: 'Decrypting encrypted message...') */
+  encryptedMessageDecryptingLabel?: string;
 };
 
 export type MessageBubbleProps = {
@@ -485,9 +622,14 @@ export type JumpToLatestProps = {
    ---------------------------------------------------------- */
 export type MediaLightboxItem = {
   type: 'image' | 'video';
-  src: string;
+  src?: string;
   alt?: string;
   posterSrc?: string;
+  loading?: boolean;
+  progressLabel?: string;
+  download?: () => Promise<void> | void;
+  onPlaybackError?: (context?: { currentTime?: number }) => Promise<void> | void;
+  onDispose?: () => Promise<void> | void;
 };
 
 export type MediaLightboxProps = {
@@ -503,6 +645,12 @@ export type MediaLightboxProps = {
 export 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 */
@@ -517,6 +665,8 @@ export 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 */
@@ -572,9 +722,42 @@ export type MessageListProps = {
   closedTopicReopenLabel?: string;
 
   /** Custom component for pending invitee notification in direct channels */
-  PendingInviteeNotificationComponent?: React.ComponentType<{ inviteeName?: string, label?: string }>;
+  PendingInviteeNotificationComponent?: React.ComponentType<{ inviteeName?: string; label?: string }>;
   /** 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;
+  /** I18n Label for attachment-only previews */
+  attachmentLabel?: string;
+  /** I18n Label for messages whose contents are unavailable */
+  unavailableMessageLabel?: string;
+  /** I18n Label for encrypted messages (default: 'Encrypted message') */
+  encryptedMessageLabel?: string;
+  /** I18n Label for encrypted messages that failed to decrypt (default: 'Encrypted message could not be decrypted') */
+  encryptedMessageFailedLabel?: string;
+  /** I18n Label for encrypted messages being decrypted (default: 'Decrypting encrypted message...') */
+  encryptedMessageDecryptingLabel?: string;
+  /** I18n Label for encrypted messages unavailable in sidebar preview (default: 'Encrypted message unavailable') */
+  encryptedMessageUnavailableLabel?: 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;
 };
 
 /* ----------------------------------------------------------
@@ -604,6 +787,8 @@ export type MessageReactionsProps = {
   onClickReaction?: (type: string) => void;
   /** Whether interactions are disabled */
   disabled?: boolean;
+  /** Whether the message is from the current user */
+  isOwnMessage?: boolean;
 };
 
 /* ----------------------------------------------------------
@@ -667,16 +852,44 @@ export type MessageItemProps = {
   forwardedLabel?: string;
   /** I18n Label for edited state */
   editedLabel?: string;
+  /** I18n Label for deleted display messages (display_type === 'deleted') */
+  deletedMessageLabel?: React.ReactNode;
+  /** I18n Label for attachment-only previews */
+  attachmentLabel?: string;
+  /** I18n Label for messages whose contents are unavailable */
+  unavailableMessageLabel?: string;
+  /** I18n Label for sticker message previews */
+  stickerLabel?: string;
+  /** I18n Label for encrypted messages (default: 'Encrypted message') */
+  encryptedMessageLabel?: string;
+  /** I18n Label for encrypted messages that failed to decrypt (default: 'Encrypted message could not be decrypted') */
+  encryptedMessageFailedLabel?: string;
+  /** I18n Label for encrypted messages being decrypted (default: 'Decrypting encrypted message...') */
+  encryptedMessageDecryptingLabel?: string;
+  /** 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;
+  /** When true, the avatar column is not rendered (handled by group wrapper) */
+  hideAvatar?: boolean;
 };
 
 export type SystemMessageItemProps = {
   message: FormatMessageResponse;
   isOwnMessage: boolean;
   SystemRenderer: React.ComponentType<MessageRendererProps>;
+  systemMessageTranslations?: SystemMessageTranslations;
 };
 
 export type SendButtonProps = { disabled: boolean; onClick: () => void };
 export type AttachButtonProps = { disabled: boolean; onClick: () => void };
+export type VoiceRecordButtonProps = { disabled: boolean; onRecordComplete: (file: File) => void };
 
 /** Props passed to a consumer-provided emoji picker component */
 export type EmojiPickerProps = {
@@ -686,6 +899,18 @@ export type EmojiPickerProps = {
   onClose: () => void;
 };
 
+/** Props for the preview overlay when a user has not joined a public channel */
+export 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 */
 export type EmojiButtonProps = {
   /** Whether the picker is currently open */
@@ -705,6 +930,8 @@ export 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 */
@@ -743,6 +970,32 @@ export 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;
 };
 
 /* ----------------------------------------------------------
@@ -805,6 +1058,10 @@ export type PinnedMessageItemProps = {
   onClickMessage?: (messageId: string) => void;
   onUnpin?: (messageId: string) => void;
   AvatarComponent: React.ComponentType<AvatarProps>;
+  unpinLabel?: string;
+  stickerLabel?: string;
+  attachmentLabel?: string;
+  unavailableMessageLabel?: string;
 };
 
 export type PinnedMessagesProps = {
@@ -818,6 +1075,14 @@ export 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;
+  attachmentLabel?: string;
+  unavailableMessageLabel?: string;
 };
 
 /* ----------------------------------------------------------
@@ -829,11 +1094,28 @@ export type QuotedMessagePreviewProps = {
     id: string;
     text?: string;
     user?: { id?: string; name?: string };
+    attachments?: Attachment[];
+    content_type?: string;
+    mls_ciphertext?: unknown;
+    e2ee_status?: string;
+    sticker_url?: string;
+    type?: string;
+    display_type?: string;
+    mentioned_users?: string[];
+    mentioned_all?: boolean;
   };
   /** Whether the parent message is from the current user */
   isOwnMessage: boolean;
   /** Callback when the quote box is clicked */
   onClick: (messageId: string) => void;
+  /** I18n Label for attachment-only quoted messages */
+  attachmentLabel?: string;
+  /** I18n Label for quoted messages whose contents are unavailable */
+  unavailableMessageLabel?: string;
+  /** I18n Label for sticker quoted messages */
+  stickerLabel?: string;
+  /** I18n Label for deleted messages */
+  deletedMessageLabel?: string;
 };
 
 /* ----------------------------------------------------------
@@ -903,6 +1185,10 @@ export type FilePreviewItem = {
   previewUrl?: string;
   /** Upload status */
   status: 'pending' | 'uploading' | 'done' | 'error';
+  /** E2EE upload phase when the file is handled by MLS attachment flow */
+  e2eePhase?: 'generating_preview' | 'encrypting' | 'uploading' | 'completing' | 'sending' | 'retrying' | 'failed';
+  /** Upload progress percentage (0-100) */
+  progress?: number;
   /** Error message if upload failed */
   error?: string;
   /** URL returned after successful upload */
@@ -921,7 +1207,7 @@ export type FilesPreviewProps = {
 };
 
 /* --------------------------------------------------------------------------
- * Modal Components
+ * Primitive Components Props
  * -------------------------------------------------------------------------- */
 
 export interface ModalProps {
@@ -935,6 +1221,38 @@ export interface ModalProps {
   closeOnOutsideClick?: boolean;
 }
 
+export 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;
+}
+
+export 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;
+};
+
 /* ----------------------------------------------------------
    Channel Info types
    ---------------------------------------------------------- */
@@ -960,10 +1278,19 @@ export type AttachmentItem = {
   og_scrape_url?: string;
   image_url?: string;
   text?: string;
+  e2ee_manifest?: E2eeAttachmentManifest;
+  e2ee_manifest_missing?: boolean;
 };
 
 export type MediaTab = 'members' | 'media' | 'links' | 'files';
 
+export type ChannelInfoTabHeaderProps = {
+  activeTab: MediaTab;
+  onTabChange: (tab: MediaTab) => void;
+  availableTabs: MediaTab[];
+  tabCounts: Record<MediaTab, number>;
+};
+
 /* Sub-component prop types for consumer customization */
 
 export type ChannelInfoMemberItemProps = {
@@ -979,6 +1306,8 @@ export type ChannelInfoMemberItemProps = {
   canPromote?: boolean;
   onDemote?: (id: string) => void;
   canDemote?: boolean;
+  /** Custom labels for member roles (owner, moder, member, pending) */
+  roleLabels?: Record<string, string>;
 };
 
 export type ChannelInfoMediaItemProps = {
@@ -1023,30 +1352,56 @@ export type ChannelInfoCoverProps = {
   isTopic?: boolean;
   /** Whether the channel is a team channel */
   isTeamChannel?: boolean;
+  /** Whether this channel or inherited parent topic is E2EE enabled */
+  isE2ee?: boolean;
+  /** Current encryption epoch, if available */
+  encryptionEpoch?: number;
 };
 
 export type ChannelInfoActionsProps = {
+  channel?: Channel;
   onSearchClick?: () => void;
   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;
+  isE2ee?: boolean;
+  encryptionInitialized?: boolean;
+  encryptionEpoch?: number;
+  onRotateKey?: () => void;
+  rotateKeyLabel?: string;
+  rotateKeyDisabled?: boolean;
+  onEnableE2ee?: () => void;
+  enableE2eeLabel?: string;
+  enableE2eeDisabled?: boolean;
 };
 
 export type ChannelInfoMember = {
@@ -1060,6 +1415,7 @@ export type ChannelInfoMember = {
 export type EditChannelData = {
   name?: string;
   image?: string;
+  banner?: string;
   description?: string;
   public?: boolean;
 };
@@ -1167,6 +1523,7 @@ export 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;
@@ -1179,7 +1536,14 @@ export 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;
 };
 
 export type ChannelInfoProps = {
@@ -1193,6 +1557,8 @@ export 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>;
@@ -1203,6 +1569,8 @@ export 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>;
@@ -1210,7 +1578,9 @@ export type ChannelInfoProps = {
   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;
@@ -1243,15 +1613,27 @@ export type ChannelInfoProps = {
   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) => void;
+  onPinChannel?: () => void;
+  onUnpinChannel?: () => void;
   onAddMemberClick?: () => void;
   onRemoveMember?: (id: string) => void;
   onBanMember?: (id: string) => void;
@@ -1267,11 +1649,17 @@ export type ChannelInfoProps = {
   actionsUnblockLabel?: string;
   actionsCloseTopicLabel?: string;
   actionsReopenTopicLabel?: string;
+  actionsDeleteTopicLabel?: string;
+  actionsCreateTopicLabel?: string;
+  onDeleteTopic?: (channel: Channel) => void;
+  onCreateTopic?: (channel: Channel) => void;
 
   /** Settings Panel Topics Labels */
   settingsWorkspaceTopicsTitle?: string;
   settingsTopicsFeatureName?: string;
   settingsTopicsFeatureDescription?: string;
+  /** Custom labels for member roles (owner, moder, member, pending) */
+  roleLabels?: Record<string, string>;
 };
 
 /* ----------------------------------------------------------
@@ -1385,20 +1773,88 @@ export type UserPickerProps = {
   emptyText?: string;
   loadingMoreText?: string;
   selectedEmptyLabel?: string;
+  friendsOnly?: boolean;
 };
 
 /* ----------------------------------------------------------
    Create Channel Modal Props
    ---------------------------------------------------------- */
 
+export type CreateChannelTabsProps = {
+  activeTab: 'messaging' | 'team';
+  onTabChange: (tab: 'messaging' | 'team') => void;
+  disabled?: boolean;
+  directTabLabel?: string;
+  groupTabLabel?: string;
+};
+
+export 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;
+  e2eeEnabled?: boolean;
+};
+
+export 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;
+  e2eeEnabled?: boolean;
+  onE2eeChange?: (enabled: boolean) => void;
+  e2eeLabel?: string;
+  e2eeDescription?: string;
+  e2eeDisabled?: boolean;
+};
+
+export type CreateChannelE2eeToggleProps = {
+  enabled: boolean;
+  onChange: (enabled: boolean) => void;
+  disabled?: boolean;
+  label?: string;
+  description?: string;
+};
+
 export type CreateChannelModalProps = {
   isOpen: boolean;
   onClose: () => void;
   onSuccess?: (channel: any) => void; // Uses 'any' or 'Channel' based on context
+  /** Recovery coverage policy for newly created E2EE channels. Defaults to member_assisted. */
+  e2eeRecoveryPolicy?: E2eeRecoveryPolicy;
 
   /** 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>;
+  E2eeToggleComponent?: React.ComponentType<CreateChannelE2eeToggleProps>;
 
   /** i18n labels */
   title?: string;
@@ -1415,6 +1871,12 @@ export type CreateChannelModalProps = {
   createButtonLabel?: string;
   creatingButtonLabel?: string;
   messageButtonLabel?: string;
+  nextButtonLabel?: string;
+  backButtonLabel?: string;
+  emptyStateLabel?: string;
+  e2eeLabel?: string;
+  e2eeDescription?: string;
+  e2eeUnavailableLabel?: string;
 
   /** File upload configuration for group channel images */
   imageAccept?: string;