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

package/src/types.ts

@@ -7,6 +7,8 @@ import type {
   ChannelSort,
   ChannelQueryOptions,
   UserCallInfo,
+  SystemMessageTranslations,
+  SignalMessageTranslations,
 } from '@ermis-network/ermis-chat-sdk';
 import type { ErmisChat } from '@ermis-network/ermis-chat-sdk';
 
@@ -56,9 +58,13 @@ export type ChatContextValue = {
   enableCall?: boolean;
 };
 
+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 +199,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 +249,7 @@ export type ErmisCallControlsBarProps = {
   selectedVideoDeviceId: string;
   switchAudioDevice: (id: string) => Promise<void>;
   switchVideoDevice: (id: string) => Promise<void>;
+  isEnding?: boolean;
 };
 
 /* ----------------------------------------------------------
@@ -337,8 +347,10 @@ export type ChannelActionLabels = {
   closeTopic?: string;
   reopenTopic?: string;
   createTopic?: string;
+  deleteTopic?: string;
   deleteChannel?: string;
   leaveChannel?: string;
+  truncateChannel?: string;
 };
 
 export type ChannelActionIcons = {
@@ -350,8 +362,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 +379,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 +402,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 +416,68 @@ 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;
+  systemMessageTranslations?: SystemMessageTranslations;
+  signalMessageTranslations?: SignalMessageTranslations;
+};
+
 export type ChannelListProps = {
   filters?: ChannelFilters;
   sort?: ChannelSort;
@@ -405,6 +485,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 +502,30 @@ 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;
+  /** 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 +538,30 @@ 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;
 };
 
 /* ----------------------------------------------------------
@@ -464,6 +576,9 @@ export type AttachmentProps = {
 export type MessageRendererProps = {
   message: FormatMessageResponse;
   isOwnMessage: boolean;
+  systemMessageTranslations?: SystemMessageTranslations;
+  signalMessageTranslations?: SignalMessageTranslations;
+  onMentionClick?: (userId: string) => void;
 };
 
 export type MessageBubbleProps = {
@@ -503,6 +618,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 +638,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 +695,30 @@ 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;
+  /** 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 +748,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 +813,30 @@ export 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;
 };
 
 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 +846,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 +877,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 +917,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 +1005,8 @@ export type PinnedMessageItemProps = {
   onClickMessage?: (messageId: string) => void;
   onUnpin?: (messageId: string) => void;
   AvatarComponent: React.ComponentType<AvatarProps>;
+  unpinLabel?: string;
+  stickerLabel?: string;
 };
 
 export type PinnedMessagesProps = {
@@ -818,6 +1020,12 @@ 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;
 };
 
 /* ----------------------------------------------------------
@@ -921,7 +1129,7 @@ export type FilesPreviewProps = {
 };
 
 /* --------------------------------------------------------------------------
- * Modal Components
+ * Primitive Components Props
  * -------------------------------------------------------------------------- */
 
 export interface ModalProps {
@@ -935,6 +1143,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
    ---------------------------------------------------------- */
@@ -964,6 +1204,13 @@ export type AttachmentItem = {
 
 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 +1226,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 = {
@@ -1030,23 +1279,35 @@ export 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;
 };
 
 export type ChannelInfoMember = {
@@ -1060,6 +1321,7 @@ export type ChannelInfoMember = {
 export type EditChannelData = {
   name?: string;
   image?: string;
+  banner?: string;
   description?: string;
   public?: boolean;
 };
@@ -1167,6 +1429,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 +1442,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 +1463,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 +1475,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 +1484,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 +1519,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 +1555,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,12 +1679,54 @@ 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;
+};
+
+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;
+};
+
 export type CreateChannelModalProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -1399,6 +1735,15 @@ export 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;
@@ -1415,6 +1760,9 @@ export type CreateChannelModalProps = {
   createButtonLabel?: string;
   creatingButtonLabel?: string;
   messageButtonLabel?: string;
+  nextButtonLabel?: string;
+  backButtonLabel?: string;
+  emptyStateLabel?: string;
 
   /** File upload configuration for group channel images */
   imageAccept?: string;