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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ermis-network/ermis-chat-react",
-  "version": "1.0.8",
+  "version": "2.0.0",
   "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.8",
-    "virtua": "^0.48.8"
+    "@ermis-network/ermis-chat-sdk": "*",
+    "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,9 +26,12 @@ 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);
 
@@ -64,7 +68,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);
+          }
         },
       });
     }

package/src/components/ChannelHeader.tsx

@@ -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(() =>
@@ -108,13 +122,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');

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);
 
@@ -62,6 +65,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}