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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ermis-network/ermis-chat-react",
-  "version": "1.0.9",
+  "version": "2.0.1",
   "description": "React UI components for Ermis Chat",
   "author": "Ermis",
   "homepage": "https://ermis.network/",
@@ -20,8 +20,10 @@
     "/src"
   ],
   "dependencies": {
-    "@ermis-network/ermis-chat-sdk": "1.0.9",
-    "virtua": "^0.48.8"
+    "@ermis-network/ermis-chat-sdk": "2.0.1",
+    "react-ts-audio-recorder": "^1.1.4",
+    "virtua": "^0.48.8",
+    "frimousse": "^0.3.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -30,13 +32,16 @@
   "devDependencies": {
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "lucide-react": "^0.474.0",
+    "motion": "^12.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-virtuoso": "^4.12.5",
     "tsup": "^8.0.0",
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "build": "rm -rf dist && tsup",
+    "build": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\" && tsup",
     "dev": "tsup --watch"
   }
 }

package/src/channelTypeUtils.ts

@@ -22,7 +22,7 @@ export function isDirectChannel(channel: Channel | null | undefined): boolean {
 
 /** Channel is a topic (sub-channel of a group channel) */
 export function isTopicChannel(channel: Channel | null | undefined): boolean {
-  return channel ? (channel.type === 'topic' || Boolean(channel.data?.parent_cid)) : false;
+  return channel ? channel.type === 'topic' || Boolean(channel.data?.parent_cid) : false;
 }
 
 /** Channel is a public group that users can join without invite */

package/src/components/Avatar.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { MediaLightbox } from './MediaLightbox';
+import { getAvatarGradient } from '../utils/avatarColors';
 import type { AvatarProps } from '../types';
 
 export type { AvatarProps } from '../types';
@@ -85,7 +86,7 @@ export const Avatar: React.FC<AvatarProps> = React.memo(({
         {/* 1. Underlying Fallback (Placeholder) */}
         <div
           className="ermis-avatar ermis-avatar--fallback"
-          style={contentStyle}
+          style={{ ...contentStyle, background: getAvatarGradient(name) }}
           title={name}
         >
           {initials}

package/src/components/Channel.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
+import { useChatComponents } from '../context/ChatComponentsContext';
 import { useBannedState } from '../hooks/useBannedState';
 import { useBlockedState } from '../hooks/useBlockedState';
 import { ForwardMessageModal } from './ForwardMessageModal';
@@ -25,18 +26,18 @@ export const Channel: React.FC<ChannelProps> = React.memo(({
   className,
   EmptyStateIndicator = DefaultEmpty,
   HeaderComponent,
-  ForwardMessageModalComponent = ForwardMessageModal,
+  ForwardMessageModalComponent: ForwardMessageModalProp,
 }) => {
   const { activeChannel, client, forwardingMessage, setForwardingMessage } = useChatClient();
+  const { ForwardMessageModalComponent: ForwardMessageModalContext } = useChatComponents();
+
+  const ForwardMessageModalView = ForwardMessageModalProp || ForwardMessageModalContext || ForwardMessageModal;
   const { isBanned } = useBannedState(activeChannel, client.userID);
   const { isBlocked } = useBlockedState(activeChannel, client.userID);
 
   // Force re-render when channel info is updated via WS
   const [channelUpdateCount, setChannelUpdateCount] = useState(0);
   useEffect(() => {
-
-    console.log('---activeChannel--', activeChannel)
-
     if (!activeChannel) return;
     const sub = activeChannel.on('channel.updated', () => setChannelUpdateCount((c) => c + 1));
     return () => sub.unsubscribe();
@@ -64,7 +65,7 @@ export const Channel: React.FC<ChannelProps> = React.memo(({
       {HeaderComponent && headerData && <HeaderComponent {...headerData} />}
       {children}
       {forwardingMessage && (
-        <ForwardMessageModalComponent
+        <ForwardMessageModalView
           message={forwardingMessage}
           onDismiss={() => setForwardingMessage(null)}
         />

package/src/components/ChannelActions.tsx

@@ -32,6 +32,8 @@ export function computeDefaultActions(
     onAddTopic?: (channel: Channel) => void;
     onEditTopic?: (channel: Channel) => void;
     onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => void;
+    onDeleteTopic?: (channel: Channel) => void;
+    onTruncateChannel?: (channel: Channel) => void;
     isBlocked?: boolean;
     actionLabels?: ChannelActionLabels;
     actionIcons?: ChannelActionIcons;
@@ -99,6 +101,25 @@ export function computeDefaultActions(
         }
       },
     });
+
+    // Direct channel: Truncate / Clear history
+    actions.push({
+      id: 'truncate',
+      label: actionLabels?.truncateChannel || 'Clear history',
+      icon: actionIcons?.TruncateChannelIcon || <TrashIcon />,
+      isDanger: true,
+      onClick: async (ch) => {
+        if (options?.onTruncateChannel) {
+          await options.onTruncateChannel(ch);
+        } else {
+          try {
+            await ch.truncate();
+          } catch (e) {
+            console.error('Error clearing channel history', e);
+          }
+        }
+      },
+    });
   } else if (isTopic) {
     // Topic: Edit topic (owner & moder only)
     if (canManageChannel(role)) {
@@ -118,8 +139,46 @@ export function computeDefaultActions(
         label: isClosed ? (actionLabels?.reopenTopic || 'Reopen topic') : (actionLabels?.closeTopic || 'Close topic'),
         icon: isClosed ? (actionIcons?.ReopenTopicIcon || <UnlockIcon />) : (actionIcons?.CloseTopicIcon || <LockIcon />),
         isDanger: !isClosed,
-        onClick: (ch) => {
-          options?.onToggleCloseTopic?.(ch, isClosed);
+        onClick: async (ch) => {
+          if (options?.onToggleCloseTopic) {
+            await options.onToggleCloseTopic(ch, isClosed);
+            return;
+          }
+          // Default behavior: call SDK API directly
+          const parentCid = ch.data?.parent_cid as string | undefined;
+          if (!parentCid) return;
+          try {
+            const client = ch.getClient();
+            const parentChannel = client.activeChannels[parentCid];
+            if (!parentChannel) return;
+            if (isClosed) {
+              await parentChannel.reopenTopic(ch.cid);
+            } else {
+              await parentChannel.closeTopic(ch.cid);
+            }
+          } catch (err) {
+            console.error('Failed to toggle topic close state', err);
+          }
+        },
+      });
+    }
+    // Topic: Delete (owner only)
+    if (role === CHANNEL_ROLES.OWNER) {
+      actions.push({
+        id: 'delete_topic',
+        label: actionLabels?.deleteTopic || 'Delete topic',
+        icon: actionIcons?.DeleteTopicIcon || <TrashIcon />,
+        isDanger: true,
+        onClick: async (ch) => {
+          if (options?.onDeleteTopic) {
+            await options.onDeleteTopic(ch);
+            return;
+          }
+          try {
+            await ch.delete();
+          } catch (err) {
+            console.error('Failed to delete topic', err);
+          }
         },
       });
     }
@@ -157,9 +216,14 @@ export function computeDefaultActions(
         isDanger: true,
         onClick: async (ch) => {
           try {
-            await ch.removeMembers([currentUserId]);
+            if (ch.data?.mls_enabled) {
+              await ch.leaveChannelE2ee(currentUserId);
+            } else {
+              await ch.removeMembers([currentUserId]);
+            }
           } catch (e) {
             console.error('Error leaving channel', e);
+            throw e;
           }
         },
       });

package/src/components/ChannelHeader.tsx

@@ -47,9 +47,9 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
   const { isPending } = usePendingState(activeChannel, client.userID);
   const callContext = useContext(ErmisCallContext);
 
-  const isSkipped = client.userID 
-    ? isSkippedMember(activeChannel?.state?.members?.[client.userID]?.channel_role as string) || 
-      isSkippedMember(activeChannel?.state?.membership?.channel_role as string)
+  const isSkipped = client.userID
+    ? isSkippedMember(activeChannel?.state?.members?.[client.userID]?.channel_role as string) ||
+    isSkippedMember(activeChannel?.state?.membership?.channel_role as string)
     : false;
 
   const actionDisabled = isPending || isSkipped;
@@ -59,9 +59,23 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
 
   useEffect(() => {
     if (!activeChannel) return;
-    const sub = activeChannel.on('channel.updated', () => setChannelUpdateCount(c => c + 1));
-    return () => sub.unsubscribe();
-  }, [activeChannel]);
+    const handleUpdate = () => setChannelUpdateCount((c) => c + 1);
+
+    const sub1 = activeChannel.on('channel.updated', handleUpdate);
+
+    // Also listen for client-level notifications that might affect this channel's roles/members
+    // We only care about this for messaging (direct) channels to update online status
+    const sub2 = client.on('notification.invite_accepted', (event) => {
+      if (event.cid === activeChannel.cid && isDirectChannel(activeChannel)) {
+        handleUpdate();
+      }
+    });
+
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+    };
+  }, [activeChannel, client]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const channelName = useMemo(() =>
@@ -75,26 +89,7 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
     [image, activeChannel?.data?.image, channelUpdateCount],
   );
 
-  const teamName = useMemo(() => {
-    if (!activeChannel) return undefined;
-    
-    // If it's a topic, derive from parent_cid
-    const parentCid = activeChannel.data?.parent_cid as string | undefined;
-    if (parentCid && client.activeChannels[parentCid]) {
-      return client.activeChannels[parentCid].data?.name || client.activeChannels[parentCid].cid;
-    }
-
-    // If it's a topics-enabled team channel (the general proxy), the proxy overrides data.name.
-    // We can pull the original name from the SDK cache.
-    if (hasTopicsEnabled(activeChannel)) {
-      const rawChannel = client.activeChannels[activeChannel.cid];
-      if (rawChannel && rawChannel.data?.name && rawChannel.data.name !== activeChannel.data?.name) {
-        return rawChannel.data.name;
-      }
-    }
-    
-    return undefined;
-  }, [activeChannel, client.activeChannels]);
+  const teamName = undefined;
 
   // ── Online Status (direct friend channels only) ──
   const currentUserId = client.userID;
@@ -108,13 +103,13 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
       if (memberId !== currentUserId) return memberId;
     }
     return undefined;
-  }, [activeChannel, currentUserId]);
+  }, [activeChannel, currentUserId, channelUpdateCount]);
 
   // Check if this is a friend channel (both members are owner).
   const isFriend = useMemo(() => {
     if (!otherUserId || !currentUserId || !activeChannel) return false;
     return isFriendChannel(activeChannel, otherUserId, currentUserId);
-  }, [activeChannel, otherUserId, currentUserId]);
+  }, [activeChannel, otherUserId, currentUserId, channelUpdateCount]);
 
   // Derive online status from watchers + subscribe to realtime events.
   const [onlineStatus, setOnlineStatus] = useState<OnlineStatus>('unknown');
@@ -158,12 +153,12 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
     <div className={`ermis-channel-header${className ? ` ${className}` : ''}`}>
       {activeChannel.data?.parent_cid ? (
         <div className="ermis-channel-header__topic-avatar">
-          {channelImage && typeof channelImage === 'string' && channelImage.startsWith('emoji://') 
-            ? channelImage.replace('emoji://', '') 
+          {channelImage && typeof channelImage === 'string' && channelImage.startsWith('emoji://')
+            ? channelImage.replace('emoji://', '')
             : '#'}
         </div>
       ) : (
-        <AvatarComponent image={channelImage} name={teamName || channelName} size={32} />
+        <AvatarComponent image={channelImage} name={teamName || channelName} size={44} />
       )}
 
       <div className="ermis-channel-header__info">
@@ -171,11 +166,6 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
           renderTitle(activeChannel)
         ) : (
           <div className="ermis-channel-header__title-container">
-            {teamName && (
-              <div className="ermis-channel-header__team-name">
-                {teamName}
-              </div>
-            )}
             <div className="ermis-channel-header__name">{channelName}</div>
           </div>
         )}
@@ -216,7 +206,7 @@ export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
                 </svg>
               </button>
             )}
-            
+
             {renderVideoCallButton ? (
               renderVideoCallButton(() => callContext.createCall('video', activeChannel.cid || ''), actionDisabled)
             ) : (

package/src/components/ChannelInfo/AddMemberModal.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import { UserPicker } from '../UserPicker';
 import { Avatar } from '../Avatar';
+import { useChatComponents } from '../../context/ChatComponentsContext';
 import type { AddMemberModalProps, UserPickerUser } from '../../types';
 
 export const AddMemberModal: React.FC<AddMemberModalProps> = ({
@@ -19,6 +20,8 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({
   UserItemComponent,
   SearchInputComponent,
 }) => {
+  const { ModalComponent } = useChatComponents();
+  const Modal = ModalComponent || DefaultModal;
   const [selectedUsers, setSelectedUsers] = useState<UserPickerUser[]>([]);
   const [isAdding, setIsAdding] = useState(false);
 
@@ -37,7 +40,13 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({
     if (selectedUsers.length === 0 || isAdding) return;
     try {
       setIsAdding(true);
-      await channel.addMembers(selectedUsers.map(u => u.id));
+      const memberIds = selectedUsers.map(u => u.id);
+      const encryptionManager = channel.getClient().encryptionManager;
+      if (channel.data?.mls_enabled && encryptionManager?.initialized && channel.id && channel.cid) {
+        await encryptionManager.addMembers(channel.type, channel.id, channel.cid, memberIds);
+      } else {
+        await channel.addMembers(memberIds);
+      }
       onClose();
     } catch (err) {
       console.error('Failed to add members:', err);
@@ -62,6 +71,7 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({
     <Modal isOpen onClose={onClose} title={title} maxWidth="480px" footer={footer}>
       <UserPicker
         mode="checkbox"
+        friendsOnly={true}
         onSelectionChange={handleSelectionChange}
         excludeUserIds={excludeUserIds}
         pageSize={30}