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

package/src/components/ChannelInfo/ChannelInfoTabs.tsx

@@ -8,7 +8,16 @@ import { LinkListItem } from './LinkListItem';
 import { FileListItem } from './FileListItem';
 import { MemberListItem } from './MemberListItem';
 import { TabEmptyState, TabLoadingState } from './States';
-import type { ChannelInfoTabsProps, MediaTab, AttachmentItem } from '../../types';
+import { MediaLightbox } from '../MediaLightbox';
+import type { ChannelInfoTabsProps, MediaTab, AttachmentItem, MediaLightboxItem } from '../../types';
+import { isDirectChannel } from '../../channelTypeUtils';
+import {
+  CHANNEL_ROLES,
+  canRemoveTargetMember,
+  canBanTargetMember,
+  canPromoteTargetMember,
+  canDemoteTargetMember
+} from '../../channelRoleUtils';
 
 export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo(({
   channel,
@@ -31,7 +40,7 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
   EmptyStateComponent,
   LoadingComponent,
 }) => {
-  const isMessaging = channel?.type === 'messaging';
+  const isMessaging = isDirectChannel(channel);
   const isTopic = Boolean(channel?.data?.parent_cid);
   
   const { isBanned } = useBannedState(channel, currentUserId);
@@ -68,8 +77,8 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
 
   const sortedMembers = useMemo(() => {
     return [...members].sort((a, b) => {
-      const aWeight = ROLE_WEIGHTS[a.channel_role || 'member'] || 0;
-      const bWeight = ROLE_WEIGHTS[b.channel_role || 'member'] || 0;
+      const aWeight = ROLE_WEIGHTS[a.channel_role || CHANNEL_ROLES.MEMBER] || 0;
+      const bWeight = ROLE_WEIGHTS[b.channel_role || CHANNEL_ROLES.MEMBER] || 0;
       return bWeight - aWeight;
     });
   }, [members]);
@@ -133,6 +142,31 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
     window.open(url, '_blank', 'noopener,noreferrer');
   }, []);
 
+  // Lightbox state for media tab
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  const lightboxItems = useMemo<MediaLightboxItem[]>(() => {
+    return mediaItems.map(item => ({
+      type: (item.attachment_type === 'video' ? 'video' : 'image') as 'image' | 'video',
+      src: item.url,
+      alt: item.file_name,
+      posterSrc: item.thumb_url || undefined,
+    }));
+  }, [mediaItems]);
+
+  const handleMediaClick = useCallback((url: string) => {
+    const idx = mediaItems.findIndex(item => item.url === url);
+    if (idx >= 0) {
+      setLightboxIndex(idx);
+      setLightboxOpen(true);
+    }
+  }, [mediaItems]);
+
+  const closeLightbox = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+
   // Group media into rows of 3 for grid layout inside VList
   const mediaRows = useMemo(() => {
     const rows: AttachmentItem[][] = [];
@@ -171,42 +205,29 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
           }
         }
         sortedMembers.forEach(member => {
-          const role = member.channel_role || 'member';
-          const isTargetRemovable = role === 'member' || role === 'pending' || (currentUserRole === 'owner' && role === 'moder');
+          const role = member.channel_role || CHANNEL_ROLES.MEMBER;
+          const isTargetRemovable = canRemoveTargetMember(currentUserRole, role);
 
           const canRemove = Boolean(
-            (currentUserRole === 'owner' || currentUserRole === 'moder') &&
             isTargetRemovable &&
             member.user_id !== currentUserId
           );
 
           const canBan = Boolean(
-            (currentUserRole === 'owner' || currentUserRole === 'moder') &&
-            isTargetRemovable &&
-            role !== 'pending' &&
+            canBanTargetMember(currentUserRole, role) &&
             member.user_id !== currentUserId &&
             !member.banned
           );
 
           const canUnban = Boolean(
-            (currentUserRole === 'owner' || currentUserRole === 'moder') &&
-            isTargetRemovable &&
-            role !== 'pending' &&
+            canBanTargetMember(currentUserRole, role) &&
             member.user_id !== currentUserId &&
             member.banned
           );
 
-          const canPromote = Boolean(
-            currentUserRole === 'owner' &&
-            role === 'member' &&
-            member.user_id !== currentUserId
-          );
+          const canPromote = canPromoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
 
-          const canDemote = Boolean(
-            currentUserRole === 'owner' &&
-            role === 'moder' &&
-            member.user_id !== currentUserId
-          );
+          const canDemote = canDemoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
 
           items.push(
             <MemberItem
@@ -232,12 +253,12 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
         if (MediaItem === MediaGridItem) {
           // Default: use grid rows
           return mediaRows.map((row, rowIdx) => (
-            <MediaRow key={row[0]?.id || rowIdx} row={row} onClick={handleOpenUrl} />
+            <MediaRow key={row[0]?.id || rowIdx} row={row} onClick={handleMediaClick} />
           ));
         }
         // Custom: render each item individually
         return mediaItems.map((item, idx) => (
-          <MediaItem key={item.id || idx} item={item} onClick={handleOpenUrl} />
+          <MediaItem key={item.id || idx} item={item} onClick={handleMediaClick} />
         ));
       case 'links':
         return linkItems.map((item, idx) => (
@@ -250,7 +271,7 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
       default:
         return [];
     }
-  }, [contentTab, sortedMembers, mediaRows, mediaItems, linkItems, fileItems, onAddMemberClick, AvatarComponent, handleOpenUrl, MemberItem, MediaItem, LinkItem, FileItem]);
+  }, [contentTab, sortedMembers, mediaRows, mediaItems, linkItems, fileItems, onAddMemberClick, AvatarComponent, handleMediaClick, handleOpenUrl, MemberItem, MediaItem, LinkItem, FileItem]);
 
   // Check if content is empty for the content tab (deferred)
   const isTabEmpty = vlistChildren.length === 0 && !(loading && contentTab !== 'members');
@@ -285,6 +306,16 @@ export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo
           </VList>
         )}
       </div>
+
+      {/* Media Lightbox */}
+      {lightboxItems.length > 0 && (
+        <MediaLightbox
+          items={lightboxItems}
+          initialIndex={lightboxIndex}
+          isOpen={lightboxOpen}
+          onClose={closeLightbox}
+        />
+      )}
     </div>
   );
 });

package/src/components/ChannelInfo/ChannelSettingsPanel.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { Panel } from '../Panel';
 import { useChatClient } from '../../hooks/useChatClient';
 import type { ChannelSettingsPanelProps } from '../../types';
+import { isGroupChannel } from '../../channelTypeUtils';
+import { CHANNEL_ROLES } from '../../channelRoleUtils';
 
 export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.memo(({
   isOpen,
@@ -25,7 +27,7 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
   const { client } = useChatClient();
   const currentUserId = client?.userID;
   const currentUserRole = currentUserId ? channel?.state?.members?.[currentUserId]?.channel_role : undefined;
-  const isOwner = currentUserRole === 'owner';
+  const isOwner = currentUserRole === CHANNEL_ROLES.OWNER;
 
   const [slowMode, setSlowMode] = useState<number>(0);
   const [topicsEnabled, setTopicsEnabled] = useState<boolean>(false);
@@ -444,7 +446,7 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
         </section>
 
         {/* Section 3: Features */}
-        {(channel?.type === 'team' || channel?.type === 'meeting') && (
+        {isGroupChannel(channel) && (
           <section
             className="ermis-settings-panel__section"
             style={{

package/src/components/ChannelInfo/EditChannelModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { Modal } from '../Modal';
 import type { EditChannelModalProps, EditChannelData } from '../../types';
+import { isGroupChannel } from '../../channelTypeUtils';
 
 const DEFAULT_MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5MB
 
@@ -28,7 +29,7 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
   const originalImage = (channel.data?.image as string) || '';
   const originalDescription = (channel.data?.description as string) || '';
   const originalPublic = Boolean(channel.data?.public);
-  const isTeamOrMeetingChannel = channel.type === 'team' || channel.type === 'meeting';
+  const isTeamOrMeetingChannel = isGroupChannel(channel);
 
   // Form state
   const [name, setName] = useState(originalName);

package/src/components/ChannelInfo/MemberListItem.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Dropdown } from '../Dropdown';
 import type { ChannelInfoMemberItemProps } from '../../types';
+import { CHANNEL_ROLES } from '../../channelRoleUtils';
 
 export const MemberListItem = React.memo(({
   member, AvatarComponent, 
@@ -14,7 +15,7 @@ export const MemberListItem = React.memo(({
   const isOpen = anchorRect !== null;
 
   if (!member) return null;
-  const role = member.channel_role || 'member';
+  const role = member.channel_role || CHANNEL_ROLES.MEMBER;
   const hasActions = canRemove || canBan || canUnban || canPromote || canDemote;
 
   return (

package/src/components/ChannelList.tsx

@@ -4,6 +4,7 @@ import type { Channel, Event, ChannelFilters } from '@ermis-network/ermis-chat-s
 import { parseSystemMessage, parseSignalMessage } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 import { useChannelListUpdates } from '../hooks/useChannelListUpdates';
+import { useOnlineUsers } from '../hooks/useOnlineUsers';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
 import { useChannelRowUpdates } from '../hooks/useChannelRowUpdates';
 import { usePendingState } from '../hooks/usePendingState';
@@ -14,6 +15,8 @@ export type { ChannelListProps, ChannelItemProps } from '../types';
 import type { ChannelActionsProps } from '../types';
 import { TopicModal } from './TopicModal';
 import { DefaultChannelActions, computeDefaultActions } from './ChannelActions';
+import { isDirectChannel, hasTopicsEnabled } from '../channelTypeUtils';
+import { canManageChannel, isPendingMember, isSkippedMember, isFriendChannel } from '../channelRoleUtils';
 
 export { DefaultChannelActions } from './ChannelActions';
 export type { ChannelAction, ChannelActionsProps } from '../types';
@@ -117,6 +120,7 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
   hiddenActions,
   actionLabels,
   actionIcons,
+  isOnline,
 }) => {
   const { client } = useChatClient();
   const currentUserId = client.userID;
@@ -175,7 +179,12 @@ export const ChannelItem: React.FC<ChannelItemProps> = React.memo(({
 
   return (
     <div className={itemClass} onClick={handleClick}>
-      <AvatarComponent image={image} name={name} size={40} />
+      <div className="ermis-channel-list__item-avatar-wrapper">
+        <AvatarComponent image={image} name={name} size={40} disableLightbox />
+        {isOnline !== undefined && (
+          <span className={`ermis-channel-list__online-dot ermis-channel-list__online-dot--${isOnline ? 'online' : 'offline'}`} />
+        )}
+      </div>
       <div className="ermis-channel-list__item-content">
         <div className="ermis-channel-list__item-top-row">
           <div className="ermis-channel-list__item-name">{name}</div>
@@ -281,6 +290,7 @@ type ChannelRowProps = {
   hiddenActions?: string[];
   actionLabels?: import('../types').ChannelActionLabels;
   actionIcons?: import('../types').ChannelActionIcons;
+  isOnline?: boolean;
 };
 
 const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
@@ -302,10 +312,12 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
   hiddenActions,
   actionLabels,
   actionIcons,
+  isOnline,
 }) => {
   // Use the new custom hook to handle all row-level realtime updates
   const { isBannedInChannel, isBlockedInChannel, updateCount } = useChannelRowUpdates(channel, currentUserId);
   const { isPending } = usePendingState(channel, currentUserId);
+  const isSkipped = isSkippedMember(channel.state?.membership?.channel_role as string);
 
   const channelState = channel.state as unknown as Record<string, unknown> | undefined;
   const rawUnreadCount = (channelState?.unreadCount as number) ?? 0;
@@ -313,7 +325,7 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
   const isClosedTopic = channel.data?.is_closed_topic === true;
 
   // Render logic continues...
-  const unreadCount = (isBannedInChannel || isBlockedInChannel || isPending) ? 0 : rawUnreadCount;
+  const unreadCount = (isBannedInChannel || isBlockedInChannel || isPending || isSkipped) ? 0 : rawUnreadCount;
   const hasUnread = unreadCount > 0;
 
   // Derive last message preview computation
@@ -324,10 +336,10 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
     [channel, channel.state?.latestMessages, updateCount]
   );
 
-  // Hide last message preview when banned, blocked, or pending
-  const lastMessageText = (isBannedInChannel || isBlockedInChannel || isPending) ? '' : rawLastMessageText;
-  const lastMessageUser = (isBannedInChannel || isBlockedInChannel || isPending) ? '' : rawLastMessageUser;
-  const lastMessageTimestamp = (isBannedInChannel || isBlockedInChannel || isPending) ? null : rawLastMessageTimestamp;
+  // Hide last message preview when banned, blocked, pending or skipped
+  const lastMessageText = (isBannedInChannel || isBlockedInChannel || isPending || isSkipped) ? '' : rawLastMessageText;
+  const lastMessageUser = (isBannedInChannel || isBlockedInChannel || isPending || isSkipped) ? '' : rawLastMessageUser;
+  const lastMessageTimestamp = (isBannedInChannel || isBlockedInChannel || isPending || isSkipped) ? null : rawLastMessageTimestamp;
 
   if (renderChannel) {
     return (
@@ -362,6 +374,7 @@ const ChannelRow: React.FC<ChannelRowProps> = React.memo(({
       hiddenActions={hiddenActions}
       actionLabels={actionLabels}
       actionIcons={actionIcons}
+      isOnline={isOnline}
     />
   );
 });
@@ -412,7 +425,7 @@ export const ChannelTopicGroup = React.memo(({
   const handleToggle = useCallback(() => setIsExpanded((prev) => !prev), []);
 
   const userRole = channel.state?.members?.[currentUserId]?.channel_role;
-  const hasTopicAddPermission = Boolean(userRole === 'owner' || userRole === 'moder');
+  const hasTopicAddPermission = canManageChannel(userRole);
 
   const getTopicTime = (t: Channel) => {
     const lastMsg = t.state?.latestMessages?.slice(-1)[0];
@@ -429,7 +442,7 @@ export const ChannelTopicGroup = React.memo(({
       const bPinned = b.data?.is_pinned === true;
       if (aPinned && !bPinned) return -1;
       if (!aPinned && bPinned) return 1;
-      
+
       return getTopicTime(b) - getTopicTime(a);
     });
   }, [channel.state?.topics, topicUpdateCount]);
@@ -477,7 +490,7 @@ export const ChannelTopicGroup = React.memo(({
         className={`ermis-channel-list__topic-header ${isExpanded ? 'ermis-channel-list__topic-header--expanded' : ''}`}
         onClick={handleToggle}
       >
-        <AvatarComponent image={image} name={name} size={40} />
+        <AvatarComponent image={image} name={name} size={40} disableLightbox />
         <div className="ermis-channel-list__topic-header-name">{name}</div>
 
         {channel.data?.is_pinned === true && PinnedIconComponent && (
@@ -577,6 +590,7 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
   hiddenActions,
   actionLabels,
   actionIcons,
+  showOnlineStatus = true,
 }) => {
   const { client, activeChannel, setActiveChannel } = useChatClient();
   const [channels, setChannels] = useState<Channel[]>([]);
@@ -632,7 +646,13 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
 
     channels.forEach(ch => {
       const ms = ch.state?.membership as Record<string, unknown> | undefined;
-      const isPending = ms?.channel_role === 'pending' || ms?.role === 'pending';
+      const isPending = isPendingMember(ms?.channel_role as string);
+      const isSkipped = isSkippedMember(ms?.channel_role as string);
+      
+      if (isSkipped) {
+        return; // Filter out completely
+      }
+
       if (isPending) {
         pending.push(ch);
       } else if (ch.data?.is_pinned) {
@@ -666,6 +686,28 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
   // Real-time: List manipulation (move to top, add, delete)
   useChannelListUpdates(channels, setChannels);
 
+  // Online status: compute set of online friend user IDs (skip if disabled)
+  const onlineUsers = useOnlineUsers(showOnlineStatus ? channels : []);
+
+  // Helper: get the "other" user ID from a direct channel
+  const getOtherUserId = useCallback((channel: Channel): string | undefined => {
+    if (!isDirectChannel(channel) || !client.userID) return undefined;
+    const members = channel.state?.members;
+    if (!members) return undefined;
+    for (const memberId of Object.keys(members)) {
+      if (memberId !== client.userID) return memberId;
+    }
+    return undefined;
+  }, [client.userID]);
+
+  // Helper: compute isOnline for a channel (undefined for non-friend channels)
+  const getIsOnline = useCallback((channel: Channel): boolean | undefined => {
+    const otherUserId = getOtherUserId(channel);
+    if (!otherUserId || !client.userID) return undefined;
+    if (!isFriendChannel(channel, otherUserId, client.userID)) return undefined;
+    return onlineUsers.has(otherUserId);
+  }, [getOtherUserId, onlineUsers, client.userID]);
+
   const handleSelect = useCallback(
     (channel: Channel) => {
       setActiveChannel(channel);
@@ -675,10 +717,11 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
       const ms = channel.state?.membership as Record<string, unknown> | undefined;
       const chState = channel.state as unknown as Record<string, unknown> | undefined;
       const isBannedInChannel = Boolean(ms?.banned);
-      const isBlockedInChannel = channel.type === 'messaging' && Boolean(ms?.blocked);
-      const isPending = ms?.channel_role === 'pending' || ms?.role === 'pending';
+      const isBlockedInChannel = isDirectChannel(channel) && Boolean(ms?.blocked);
+      const isPending = isPendingMember(ms?.channel_role as string);
+      const isSkipped = isSkippedMember(ms?.channel_role as string);
 
-      if (!isBannedInChannel && !isBlockedInChannel && !isPending && (chState?.unreadCount as number) > 0) {
+      if (!isBannedInChannel && !isBlockedInChannel && !isPending && !isSkipped && (chState?.unreadCount as number) > 0) {
         channel.markRead().catch(() => { });
         // Optimistically reset unread to update UI immediately
         if (chState) chState.unreadCount = 0;
@@ -733,6 +776,7 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
               hiddenActions={hiddenActions}
               actionLabels={actionLabels}
               actionIcons={actionIcons}
+              isOnline={getIsOnline(channel)}
             />
           );
         })}
@@ -743,7 +787,7 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
         )}
         {regularChannels.map((channel: Channel) => {
           const isActive = activeChannel?.cid === channel.cid;
-          const isTeamWithTopics = (channel.type === 'team' || channel.type === 'meeting') && channel.data?.topics_enabled;
+          const isTeamWithTopics = hasTopicsEnabled(channel);
 
           if (isTeamWithTopics) {
             const GroupComponent = ChannelTopicGroupComponent || ChannelTopicGroup;
@@ -796,6 +840,7 @@ export const ChannelList: React.FC<ChannelListProps> = React.memo(({
               hiddenActions={hiddenActions}
               actionLabels={actionLabels}
               actionIcons={actionIcons}
+              isOnline={getIsOnline(channel)}
             />
           );
         })}

package/src/components/CreateChannelModal.tsx

@@ -4,6 +4,7 @@ import { UserPicker } from './UserPicker';
 import { Avatar } from './Avatar';
 import { useChatClient } from '../hooks/useChatClient';
 import type { CreateChannelModalProps, UserPickerUser } from '../types';
+import { isDirectChannel } from '../channelTypeUtils';
 
 
 export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
@@ -24,8 +25,9 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   cancelButtonLabel = 'Cancel',
   createButtonLabel = 'Create',
   creatingButtonLabel = 'Creating...',
+  messageButtonLabel = 'Message',
 }) => {
-  const { client } = useChatClient();
+  const { client, setActiveChannel } = useChatClient();
   const currentUserId = client?.userID;
 
   /* ---------- State ---------- */
@@ -45,19 +47,20 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   const [error, setError] = useState<string | null>(null);
 
   /* ---------- Exclude IDs for Direct ---------- */
-  const existingDirectUserIds = useMemo(() => {
-    if (!client || !currentUserId || tab !== 'messaging') return [];
-
-    const ids = new Set<string>();
-    Object.values(client.activeChannels).forEach((channel: any) => {
-      if (channel.type === 'messaging' && channel.state?.members) {
-        Object.keys(channel.state.members).forEach(uid => {
-          if (uid !== currentUserId) ids.add(uid);
-        });
+  const hasExistingDirectChannel = useMemo(() => {
+    if (!client || !currentUserId || tab !== 'messaging' || selectedUsers.length === 0) return false;
+    const targetUserId = selectedUsers[0].id;
+
+    return Object.values(client.activeChannels).some((ch: any) => {
+      if (isDirectChannel(ch) && ch.state?.members) {
+        const membersList = Object.keys(ch.state.members);
+        return membersList.length === 2 && 
+               membersList.includes(currentUserId) && 
+               membersList.includes(targetUserId);
       }
+      return false;
     });
-    return Array.from(ids);
-  }, [client, currentUserId, tab]);
+  }, [client, currentUserId, tab, selectedUsers]);
 
   /* ---------- Handlers ---------- */
   const handleCreate = useCallback(async () => {
@@ -82,10 +85,37 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
 
       if (tab === 'messaging') {
         const targetUserId = selectedUsers[0].id;
+
+        // Try to find an existing direct channel locally
+        const existingChannel = Object.values(client.activeChannels).find((ch: any) => {
+          if (isDirectChannel(ch) && ch.state?.members) {
+            const membersList = Object.keys(ch.state.members);
+            return membersList.length === 2 && 
+                   membersList.includes(currentUserId) && 
+                   membersList.includes(targetUserId);
+          }
+          return false;
+        });
+
+        if (existingChannel) {
+          if (setActiveChannel) setActiveChannel(existingChannel as any);
+          if (onSuccess) {
+            onSuccess(existingChannel as any);
+          } else {
+            onClose();
+          }
+          setIsCreating(false);
+          return;
+        }
+
         createdChannel = client.channel('messaging', {
           members: [currentUserId, targetUserId],
         } as any);
-        await createdChannel.create();
+        const response = (await createdChannel.create()) as any;
+        if (response?.channel?.id) {
+          createdChannel = client.channel('messaging', response.channel.id);
+          await createdChannel.watch();
+        }
       } else {
         // Group Channel
         const memberIds = selectedUsers.map(member => member.id);
@@ -105,7 +135,15 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         }
 
         createdChannel = client.channel('team', payload);
-        await createdChannel.create();
+        const response = (await createdChannel.create()) as any;
+        if (response?.channel?.id) {
+          createdChannel = client.channel('team', response.channel.id);
+          await createdChannel.watch();
+        }
+      }
+
+      if (setActiveChannel) {
+        setActiveChannel(createdChannel);
       }
 
       // Cleanup and execute callback
@@ -136,7 +174,7 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
       <div className="ermis-create-channel__footer">
         <button className="ermis-create-channel__btn ermis-create-channel__btn--cancel" onClick={onClose} disabled={isCreating}>{cancelButtonLabel}</button>
         <button className="ermis-create-channel__btn ermis-create-channel__btn--create" onClick={handleCreate} disabled={isCreating || !isValid}>
-          {isCreating ? creatingButtonLabel : createButtonLabel}
+          {isCreating ? creatingButtonLabel : (hasExistingDirectChannel ? messageButtonLabel : createButtonLabel)}
         </button>
       </div>
     );
@@ -247,7 +285,6 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
               <UserPicker
                 mode={tab === 'messaging' ? 'radio' : 'checkbox'}
                 onSelectionChange={setSelectedUsers}
-                excludeUserIds={tab === 'messaging' ? existingDirectUserIds : []}
                 initialSelectedUsers={selectedUsers}
                 AvatarComponent={AvatarComponent}
                 UserItemComponent={UserItemComponent as any}

package/src/components/EditPreview.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
+import { isStickerMessage } from '../messageTypeUtils';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 
 const MAX_PREVIEW_LENGTH = 120;
@@ -57,7 +58,7 @@ export const EditPreview: React.FC<{
   const formattedText = useMemo(() => replaceMentionsForPreview(rawText, message, userMap), [rawText, message, userMap]);
   const hasText = !!formattedText.trim();
   const hasAttachments = message.attachments && message.attachments.length > 0;
-  const isSticker = message.type === 'sticker';
+  const isSticker = isStickerMessage(message);
   const attachmentSummary = hasAttachments ? getAttachmentSummary(message.attachments!) : '';
 
   // Build preview content

package/src/components/ForwardMessageModal.tsx

@@ -5,6 +5,7 @@ import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
 import { Modal } from './Modal';
 import type { ForwardMessageModalProps, ForwardChannelItemProps, AvatarProps } from '../types';
+import { isTopicChannel } from '../channelTypeUtils';
 
 export type { ForwardMessageModalProps, ForwardChannelItemProps } from '../types';
 
@@ -66,7 +67,7 @@ export const ForwardMessageModal: React.FC<ForwardMessageModalProps> = ({
   /* ---------- Get channels from client state (exclude topics) ---------- */
   const channels = useMemo(() => {
     return (Object.values(client.activeChannels) as Channel[]).filter(
-      (ch) => ch.type !== 'topic',
+      (ch) => !isTopicChannel(ch),
     );
   }, [client.activeChannels]);