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

package/src/styles/_message-input.css

@@ -355,6 +355,30 @@
   flex-shrink: 0;
 }
 
+/* ----------------------------------------------------------
+   Closed Topic State
+   ---------------------------------------------------------- */
+.ermis-message-input--closed {
+  pointer-events: none;
+}
+
+.ermis-message-input__closed-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ermis-spacing-sm);
+  padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
+  color: var(--ermis-color-danger);
+  font-size: var(--ermis-font-size-sm);
+  font-weight: 500;
+  user-select: none;
+  opacity: 0.8;
+}
+
+.ermis-message-input__closed-banner svg {
+  flex-shrink: 0;
+}
+
 /* ----------------------------------------------------------
    Banners
    ---------------------------------------------------------- */

package/src/styles/_message-list.css

@@ -275,17 +275,62 @@
 }
 
 /* ----------------------------------------------------------
-   Blocked State (messaging channels — user-initiated block)
-   Messages remain visible but actions are disabled.
+   Closed Topic State
    ---------------------------------------------------------- */
-.ermis-message-list--blocked .ermis-message-actions {
-  display: none;
+
+.ermis-message-list__closed-overlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100dvh - 8rem);
+  gap: var(--ermis-spacing-md);
+  user-select: none;
 }
 
-.ermis-message-list--blocked .ermis-message-reactions__add-btn {
-  display: none;
+.ermis-message-list__closed-overlay-icon {
+  color: var(--ermis-color-danger);
+  opacity: 0.8;
 }
 
+.ermis-message-list__closed-overlay-title {
+  font-size: var(--ermis-font-size-base);
+  font-weight: 600;
+  color: var(--ermis-text-primary);
+}
+
+.ermis-message-list__closed-overlay-subtitle {
+  font-size: var(--ermis-font-size-sm);
+  color: var(--ermis-text-muted);
+  text-align: center;
+  max-width: 80%;
+}
+
+.ermis-message-list__reopen-btn {
+  margin-top: var(--ermis-spacing-md);
+  padding: var(--ermis-spacing-sm) var(--ermis-spacing-xl, 24px);
+  border: none;
+  border-radius: var(--ermis-radius-md, 8px);
+  background-color: var(--ermis-accent);
+  color: #fff;
+  font-size: var(--ermis-font-size-sm);
+  font-weight: 600;
+  font-family: var(--ermis-font-family);
+  cursor: pointer;
+  transition: background-color var(--ermis-transition), transform var(--ermis-transition);
+}
+
+.ermis-message-list__reopen-btn:hover {
+  background-color: var(--ermis-accent-hover);
+  transform: translateY(-1px);
+}
+
+.ermis-message-list__reopen-btn:active {
+  transform: translateY(0);
+}
+
+
+
 /* Unblock button inside blocked overlay */
 .ermis-message-list__unblock-btn {
   margin-top: var(--ermis-spacing-md);

package/src/styles/_message-quick-reactions.css

@@ -37,6 +37,11 @@
   transform: translateY(0);
 }
 
+.ermis-message-list__bubble-wrapper:hover .ermis-message-quick-reactions--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .ermis-message-quick-reactions__btn {
   display: flex;
   align-items: center;

package/src/styles/_message-reactions.css

@@ -6,6 +6,13 @@
   flex-wrap: wrap;
   gap: 4px;
   margin-bottom: 2px;
+  margin-top: 2px;
+  width: 100%;
+}
+
+.ermis-message-reactions--disabled {
+  opacity: 0.8;
+  pointer-events: none;
 }
 
 .ermis-message-reactions__item {

package/src/styles/_topic-modal.css

@@ -0,0 +1,154 @@
+/* ----------------------------------------------------------
+   CreateTopicModal
+   ---------------------------------------------------------- */
+.ermis-create-topic__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ermis-spacing-lg);
+  padding: 0 var(--ermis-spacing-xs);
+}
+
+.ermis-create-topic__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ermis-spacing-xs);
+}
+
+.ermis-create-topic__label {
+  font-size: var(--ermis-font-size-sm);
+  font-weight: 500;
+  color: var(--ermis-text-primary);
+}
+
+.ermis-create-topic__required {
+  color: var(--ermis-error);
+}
+
+.ermis-create-topic__input {
+  padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
+  border: 1px solid var(--ermis-border);
+  border-radius: var(--ermis-radius-md);
+  font-size: var(--ermis-font-size-base);
+  color: var(--ermis-text-primary);
+  background-color: var(--ermis-bg-primary);
+  transition: border-color var(--ermis-transition);
+}
+
+.ermis-create-topic__input:focus {
+  outline: none;
+  border-color: var(--ermis-accent);
+}
+
+.ermis-create-topic__live-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--ermis-spacing-sm);
+  padding: var(--ermis-spacing-md);
+  background-color: var(--ermis-bg-secondary);
+  border-radius: var(--ermis-radius-md);
+  border: 1px dashed var(--ermis-border);
+}
+
+.ermis-create-topic__live-preview-emoji {
+  font-size: 20px;
+}
+
+.ermis-create-topic__live-preview-name {
+  font-size: var(--ermis-font-size-base);
+  font-weight: 600;
+  color: var(--ermis-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ermis-create-topic__emoji-picker {
+  margin-top: var(--ermis-spacing-sm);
+}
+
+.ermis-create-topic__default-icons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--ermis-spacing-sm);
+}
+
+.ermis-create-topic__default-icon {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  background-color: var(--ermis-bg-secondary);
+  border: 1px solid var(--ermis-border);
+  border-radius: var(--ermis-radius-md);
+  cursor: pointer;
+  transition: all var(--ermis-transition);
+}
+
+.ermis-create-topic__default-icon:hover:not(:disabled) {
+  background-color: var(--ermis-bg-hover);
+  border-color: var(--ermis-border-hover);
+}
+
+.ermis-create-topic__default-icon--active {
+  border-color: var(--ermis-accent);
+  background-color: var(--ermis-bg-primary);
+}
+
+.ermis-create-topic__default-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+.ermis-create-topic__error {
+  display: flex;
+  align-items: center;
+  gap: var(--ermis-spacing-sm);
+  padding: var(--ermis-spacing-sm);
+  border-radius: var(--ermis-radius-md);
+  background-color: rgba(239, 68, 68, 0.1);
+  color: var(--ermis-error);
+  font-size: var(--ermis-font-size-sm);
+}
+
+.ermis-create-topic__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ermis-spacing-sm);
+  margin-top: var(--ermis-spacing-lg);
+}
+
+.ermis-create-topic__btn {
+  padding: var(--ermis-spacing-sm) var(--ermis-spacing-lg);
+  border-radius: var(--ermis-radius-md);
+  font-size: var(--ermis-font-size-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--ermis-transition);
+  border: none;
+}
+
+.ermis-create-topic__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ermis-create-topic__btn--cancel {
+  background-color: transparent;
+  color: var(--ermis-text-primary);
+}
+
+.ermis-create-topic__btn--cancel:hover:not(:disabled) {
+  background-color: var(--ermis-bg-hover);
+}
+
+.ermis-create-topic__btn--create {
+  background-color: var(--ermis-accent);
+  color: white;
+}
+
+.ermis-create-topic__btn--create:hover:not(:disabled) {
+  background-color: var(--ermis-accent-hover);
+}

package/src/styles/index.css

@@ -25,3 +25,4 @@
 @import './_user-picker.css';
 @import './_create-channel-modal.css';
 @import './_call-ui.css';
+@import './_topic-modal.css';

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';
 
 /* ----------------------------------------------------------
@@ -299,6 +308,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 +357,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 +368,22 @@ 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;
 };
 
 export type ChannelListProps = {
@@ -325,6 +393,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 +412,30 @@ 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;
 };
 
 /* ----------------------------------------------------------
@@ -433,6 +527,9 @@ export type MessageListProps = {
   pendingOverlaySubtitle?: string;
   pendingAcceptLabel?: string;
   pendingRejectLabel?: string;
+  closedTopicOverlayTitle?: string;
+  closedTopicOverlaySubtitle?: string;
+  closedTopicReopenLabel?: string;
 };
 
 /* ----------------------------------------------------------
@@ -460,6 +557,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 +679,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 +696,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 +972,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 +988,8 @@ export type ChannelInfoActionsProps = {
   onBlockUser?: () => void;
   onUnblockUser?: () => void;
   isTeamChannel?: boolean;
+  isTopic?: boolean;
+  isClosedTopic?: boolean;
   isBlocked?: boolean;
   currentUserRole?: string;
   searchLabel?: string;
@@ -887,6 +998,10 @@ export type ChannelInfoActionsProps = {
   leaveLabel?: string;
   blockLabel?: string;
   unblockLabel?: string;
+  onCloseTopic?: () => void;
+  onReopenTopic?: () => void;
+  closeTopicLabel?: string;
+  reopenTopicLabel?: string;
 };
 
 export type ChannelInfoMember = {
@@ -988,7 +1103,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 +1220,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 +1270,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;
 };
 
 /* ----------------------------------------------------------
@@ -1245,3 +1375,27 @@ export type CreateChannelModalProps = {
   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;
+};