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

package/src/components/CreateChannelModal.tsx

@@ -5,9 +5,33 @@ import { Avatar } from './Avatar';
 import { useChatClient } from '../hooks/useChatClient';
 import { useChatComponents } from '../context/ChatComponentsContext';
 import { markChannelAsFullyQueried } from '../hooks/useChannelMessages';
-import type { CreateChannelModalProps, UserPickerUser } from '../types';
+import type { CreateChannelE2eeToggleProps, CreateChannelModalProps, UserPickerUser } from '../types';
 import { isDirectChannel } from '../channelTypeUtils';
 
+const DefaultE2eeToggle: React.FC<CreateChannelE2eeToggleProps> = ({
+  enabled,
+  onChange,
+  disabled,
+  label = 'End-to-end encrypted',
+  description,
+}) => (
+  <div className="ermis-create-channel__field ermis-create-channel__field--toggle">
+    <div>
+      <label className="ermis-create-channel__label">{label}</label>
+      {description && <div className="ermis-create-channel__hint">{description}</div>}
+    </div>
+    <button
+      type="button"
+      role="switch"
+      aria-checked={enabled}
+      className={`ermis-create-channel__toggle ${enabled ? 'ermis-create-channel__toggle--on' : ''}`}
+      onClick={() => onChange(!enabled)}
+      disabled={disabled}
+    >
+      <span className="ermis-create-channel__toggle-thumb" />
+    </button>
+  </div>
+);
 
 export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   isOpen,
@@ -31,11 +55,16 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   nextButtonLabel = 'Next',
   backButtonLabel = 'Back',
   emptyStateLabel = 'No users found',
+  e2eeLabel = 'End-to-end encrypted',
+  e2eeDescription = 'Only channel members can read encrypted messages.',
+  e2eeUnavailableLabel = 'E2EE is unavailable on this device.',
+  e2eeRecoveryPolicy = 'member_assisted',
   TabsComponent,
   FooterComponent,
   GroupFieldsComponent,
   SearchInputComponent,
   SelectedBoxComponent,
+  E2eeToggleComponent = DefaultE2eeToggle,
 }) => {
   const { client, setActiveChannel } = useChatClient();
   const { ModalComponent } = useChatComponents();
@@ -50,6 +79,7 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [isPublic, setIsPublic] = useState(false);
+  const [e2eeEnabled, setE2eeEnabled] = useState(false);
 
   // Users
   const [selectedUsers, setSelectedUsers] = useState<UserPickerUser[]>([]);
@@ -57,6 +87,11 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   // Progress/Error
   const [isCreating, setIsCreating] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const e2eeAvailable = Boolean(client?.encryptionManager?.initialized);
+
+  const handleE2eeChange = useCallback((enabled: boolean) => {
+    setE2eeEnabled(enabled);
+  }, []);
 
   /* ---------- Exclude IDs for Direct ---------- */
   const hasExistingDirectChannel = useMemo(() => {
@@ -120,14 +155,33 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
           return;
         }
 
-        createdChannel = client.channel('messaging', {
-          members: [currentUserId, targetUserId],
-        } as any);
+        const members = [currentUserId, targetUserId];
+        const payload: Record<string, any> = { members };
+
+        if (e2eeEnabled) {
+          const encryptionManager = client.encryptionManager;
+          if (!encryptionManager?.initialized) {
+            throw new Error(e2eeUnavailableLabel);
+          }
+          const bundle = await encryptionManager.createE2eeChannel('messaging', null, null, members);
+          Object.assign(payload, {
+            mls_enabled: true,
+            e2ee_recovery_policy: e2eeRecoveryPolicy,
+            channel_id: bundle.channel_id,
+            ...bundle,
+          });
+        }
+
+        createdChannel = client.channel('messaging', payload as any);
         const response = (await createdChannel.create()) as any;
         if (response?.channel?.id) {
           createdChannel = client.channel('messaging', response.channel.id);
           await createdChannel.watch({ messages: { limit: 25, include_hidden_messages: true } });
           markChannelAsFullyQueried(createdChannel.cid);
+          if (e2eeEnabled && client.encryptionManager?.initialized && createdChannel.id) {
+            client.encryptionManager.archiveCurrentEpoch(createdChannel.type, createdChannel.id)
+              .catch((err: unknown) => console.warn('[E2EE] Initial epoch archive failed:', err));
+          }
         }
       } else {
         // Group Channel
@@ -147,12 +201,36 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
           payload.description = description.trim();
         }
 
-        createdChannel = client.channel('team', payload);
+        if (e2eeEnabled) {
+          const encryptionManager = client.encryptionManager;
+          if (!encryptionManager?.initialized) {
+            throw new Error(e2eeUnavailableLabel);
+          }
+          const uuid =
+            typeof crypto !== 'undefined' && 'randomUUID' in crypto
+              ? crypto.randomUUID()
+              : Math.random().toString(36).slice(2);
+          const channelId = `${client.projectId}:${uuid}`;
+          const cid = `team:${channelId}`;
+          const bundle = await encryptionManager.createE2eeChannel('team', channelId, cid, memberIds);
+          Object.assign(payload, {
+            mls_enabled: true,
+            e2ee_recovery_policy: e2eeRecoveryPolicy,
+            ...bundle,
+          });
+          createdChannel = client.channel('team', channelId, payload);
+        } else {
+          createdChannel = client.channel('team', payload);
+        }
         const response = (await createdChannel.create()) as any;
         if (response?.channel?.id) {
           createdChannel = client.channel('team', response.channel.id);
           await createdChannel.watch({ messages: { limit: 25, include_hidden_messages: true } });
           markChannelAsFullyQueried(createdChannel.cid);
+          if (e2eeEnabled && client.encryptionManager?.initialized && createdChannel.id) {
+            client.encryptionManager.archiveCurrentEpoch(createdChannel.type, createdChannel.id)
+              .catch((err: unknown) => console.warn('[E2EE] Initial epoch archive failed:', err));
+          }
         }
       }
 
@@ -172,7 +250,21 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
     } finally {
       setIsCreating(false);
     }
-  }, [client, currentUserId, isCreating, selectedUsers, tab, name, isPublic, description, onSuccess, onClose]);
+  }, [
+    client,
+    currentUserId,
+    isCreating,
+    selectedUsers,
+    tab,
+    name,
+    isPublic,
+    description,
+    e2eeEnabled,
+    e2eeRecoveryPolicy,
+    e2eeUnavailableLabel,
+    onSuccess,
+    onClose,
+  ]);
 
 
   const isValid = useMemo(() => {
@@ -214,6 +306,7 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         messageButtonLabel={messageButtonLabel}
         nextButtonLabel={nextButtonLabel}
         backButtonLabel={backButtonLabel}
+        e2eeEnabled={e2eeEnabled}
       />
     );
   } else if (tab === 'messaging') {
@@ -256,8 +349,9 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
             onTabChange={(t) => {
               setTab(t);
               setStep(1);
-              setSelectedUsers([]);
-              setError(null);
+            setSelectedUsers([]);
+            setE2eeEnabled(false);
+            setError(null);
             }}
             disabled={isCreating}
             directTabLabel={directTabLabel}
@@ -270,8 +364,9 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
               onClick={() => {
                 setTab('messaging');
                 setStep(1);
-                setSelectedUsers([]);
-                setError(null);
+              setSelectedUsers([]);
+              setE2eeEnabled(false);
+              setError(null);
               }}
               disabled={isCreating}
             >
@@ -282,8 +377,9 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
               onClick={() => {
                 setTab('team');
                 setStep(1);
-                setSelectedUsers([]);
-                setError(null);
+              setSelectedUsers([]);
+              setE2eeEnabled(false);
+              setError(null);
               }}
               disabled={isCreating}
             >
@@ -308,6 +404,11 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
               groupDescriptionLabel={groupDescriptionLabel}
               groupDescriptionPlaceholder={groupDescriptionPlaceholder}
               groupPublicLabel={groupPublicLabel}
+              e2eeEnabled={e2eeEnabled}
+              onE2eeChange={handleE2eeChange}
+              e2eeLabel={e2eeLabel}
+              e2eeDescription={e2eeDescription}
+              e2eeDisabled={!e2eeAvailable || isCreating}
             />
           ) : (
             <>
@@ -349,10 +450,28 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
                   <span className="ermis-create-channel__toggle-thumb" />
                 </button>
               </div>
+
+              <DefaultE2eeToggle
+                enabled={e2eeEnabled}
+                onChange={handleE2eeChange}
+                disabled={!e2eeAvailable || isCreating}
+                label={e2eeLabel}
+                description={e2eeAvailable ? e2eeDescription : e2eeUnavailableLabel}
+              />
             </>
           )
         )}
 
+        {tab === 'messaging' && (
+          <E2eeToggleComponent
+            enabled={e2eeEnabled}
+            onChange={handleE2eeChange}
+            disabled={!e2eeAvailable || isCreating}
+            label={e2eeLabel}
+            description={e2eeAvailable ? e2eeDescription : e2eeUnavailableLabel}
+          />
+        )}
+
         {/* User Selection - Step 2 (Group) or Step 1 (Messaging) */}
         {((tab === 'team' && step === 2) || tab === 'messaging') && (
           <div className={`ermis-create-channel__users ermis-create-channel__users--${tab}`}>

package/src/components/FilesPreview.tsx

@@ -37,7 +37,7 @@ export const FilesPreview: React.FC<FilesPreviewProps> = React.memo(({ files, on
         const fileName = item.file?.name || item.originalAttachment?.title || 'Unknown file';
         const fileSize = item.file?.size || item.originalAttachment?.file_size || 0;
 
-        const isHeic = item.file ? isHeicFile(item.file) : (fileType === 'image/heic' || fileType === 'image/heif');
+        const isHeic = item.file ? isHeicFile(item.file) : fileType === 'image/heic' || fileType === 'image/heif';
         const isImage = fileType.startsWith('image/') && !isHeic;
         const isVideo = fileType.startsWith('video/');
         const isUploading = item.status === 'uploading';
@@ -62,17 +62,9 @@ export const FilesPreview: React.FC<FilesPreviewProps> = React.memo(({ files, on
 
             {/* Preview content */}
             {isImage && previewUrl ? (
-              <img
-                className="ermis-files-preview__thumb"
-                src={previewUrl}
-                alt={fileName}
-              />
+              <img className="ermis-files-preview__thumb" src={previewUrl} alt={fileName} />
             ) : isVideo && previewUrl ? (
-              <video
-                className="ermis-files-preview__thumb"
-                src={previewUrl}
-                muted
-              />
+              <video className="ermis-files-preview__thumb" src={previewUrl} muted />
             ) : (
               <div className="ermis-files-preview__file-icon">
                 <span>{getFileIcon(fileType)}</span>
@@ -88,7 +80,11 @@ export const FilesPreview: React.FC<FilesPreviewProps> = React.memo(({ files, on
             {/* Upload status overlay */}
             {isUploading && (
               <div className="ermis-files-preview__uploading">
-                <span className="ermis-files-preview__spinner" />
+                {item.progress !== undefined ? (
+                  <span className="ermis-files-preview__progress">{item.progress}%</span>
+                ) : (
+                  <span className="ermis-files-preview__spinner" />
+                )}
               </div>
             )}
 

package/src/components/FlatTopicGroupItem.tsx

@@ -57,6 +57,7 @@ type FlatTopicGroupItemProps = {
   fileMessageLabel?: React.ReactNode;
   systemMessageTranslations?: SystemMessageTranslations;
   signalMessageTranslations?: SignalMessageTranslations;
+  showTopicPills?: boolean;
 };
 
 /* ----------------------------------------------------------
@@ -87,6 +88,7 @@ export const FlatTopicGroupItem: React.FC<FlatTopicGroupItemProps> = React.memo(
   fileMessageLabel,
   systemMessageTranslations,
   signalMessageTranslations,
+  showTopicPills = false,
 }) => {
   const { client } = useChatClient();
   const currentUserId = client.userID;
@@ -113,7 +115,11 @@ export const FlatTopicGroupItem: React.FC<FlatTopicGroupItemProps> = React.memo(
   const name = channel.data?.name || channel.cid;
   const image = channel.data?.image as string | undefined;
   const isPinned = channel.data?.is_pinned === true;
-  const showUnread = hasUnread && !isActive;
+  // For topic groups, always show the unread badge if there are unreads.
+  // Unlike normal channels, isActive only means the user is viewing ONE topic,
+  // not that they've read ALL topics. The aggregatedUnreadCount already correctly
+  // reflects only the truly unread topics.
+  const showUnread = hasUnread;
 
   // Latest message data from the aggregated preview
   const lastMessageText = latestMessagePreview?.text || '';
@@ -167,7 +173,12 @@ export const FlatTopicGroupItem: React.FC<FlatTopicGroupItemProps> = React.memo(
   return (
     <div className={itemClass} onClick={handleClick}>
       <div className="ermis-channel-list__item-avatar-wrapper">
-        <AvatarComponent image={image} name={name} size={40} disableLightbox className="ermis-avatar-wrapper--group" />
+        <AvatarComponent image={image} name={name} size={45} disableLightbox className="ermis-avatar-wrapper--group" />
+        {showUnread && aggregatedUnreadCount > 0 && (
+          <span className="ermis-channel-list__avatar-unread-badge">
+            {aggregatedUnreadCount > 99 ? '99+' : aggregatedUnreadCount}
+          </span>
+        )}
       </div>
       <div className="ermis-channel-list__item-content">
         {/* Row 1: name + pinned + timestamp */}
@@ -207,20 +218,20 @@ export const FlatTopicGroupItem: React.FC<FlatTopicGroupItemProps> = React.memo(
         </div>
         {/* Row 3: topic pills — always visible (at least general pill) */}
         <div className="ermis-channel-list__item-topics-row">
-          <div className="ermis-channel-list__topic-pills">
-            {/* General pill — always first */}
-            <span className="ermis-channel-list__topic-pill">
-              <span className="ermis-channel-list__topic-pill-avatar">#</span>
-              <span className="ermis-channel-list__topic-pill-name">{generalTopicLabel}</span>
-            </span>
-            {/* Sub-topic pills */}
-            {visibleTopics.map((topic: Channel) => (
-              <Pill key={topic.cid} topic={topic} />
-            ))}
-            {hasOverflow && (
-              <span className="ermis-channel-list__topic-overflow">{moreTopicsLabel}</span>
-            )}
-          </div>
+          {showTopicPills && (
+            <div className="ermis-channel-list__topic-pills">
+              <span className="ermis-channel-list__topic-pill">
+                <span className="ermis-channel-list__topic-pill-avatar">#</span>
+                <span className="ermis-channel-list__topic-pill-name">{generalTopicLabel}</span>
+              </span>
+              {visibleTopics.map((topic: Channel) => (
+                <Pill key={topic.cid} topic={topic} />
+              ))}
+              {hasOverflow && (
+                <span className="ermis-channel-list__topic-overflow">{moreTopicsLabel}</span>
+              )}
+            </div>
+          )}
         </div>
       </div>
       <div className="ermis-channel-list__item-actions-wrapper">

package/src/components/ForwardMessageModal.tsx

@@ -73,6 +73,7 @@ export const ForwardMessageModal: React.FC<ForwardMessageModalProps> = ({
   const { ModalComponent } = useChatComponents();
   const Modal = ModalComponent || DefaultModal;
   const backdropRef = useRef<HTMLDivElement>(null);
+  const { client } = useChatClient();
 
   const {
     search,
@@ -99,9 +100,16 @@ export const ForwardMessageModal: React.FC<ForwardMessageModalProps> = ({
   }, [onDismiss]);
 
   /* ---------- Message preview ---------- */
-  const previewText = message.text
-    ? (message.text.length > 120 ? message.text.slice(0, 120) + '…' : message.text)
-    : '';
+  let previewText = message.text || '';
+  
+  if (previewText && message.mentioned_users && message.mentioned_users.length > 0) {
+    message.mentioned_users.forEach((userId) => {
+      const name = client.state.users[userId]?.name || userId;
+      previewText = previewText.replace(new RegExp(`@${userId}`, 'g'), `@${name}`);
+    });
+  }
+
+  previewText = previewText.length > 120 ? previewText.slice(0, 120) + '…' : previewText;
   const attachmentCount = message.attachments?.length ?? 0;
 
   const footer = (