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

package/src/components/CreateChannelModal.tsx

@@ -1,11 +1,37 @@
 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 { useChatClient } from '../hooks/useChatClient';
-import type { CreateChannelModalProps, UserPickerUser } from '../types';
+import { useChatComponents } from '../context/ChatComponentsContext';
+import { markChannelAsFullyQueried } from '../hooks/useChannelMessages';
+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,
@@ -26,8 +52,23 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   createButtonLabel = 'Create',
   creatingButtonLabel = 'Creating...',
   messageButtonLabel = 'Message',
+  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();
+  const Modal = ModalComponent || DefaultModal;
   const currentUserId = client?.userID;
 
   /* ---------- State ---------- */
@@ -38,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[]>([]);
@@ -45,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(() => {
@@ -54,9 +101,9 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
     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 membersList.length === 2 &&
+          membersList.includes(currentUserId) &&
+          membersList.includes(targetUserId);
       }
       return false;
     });
@@ -90,9 +137,9 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
         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 membersList.length === 2 &&
+              membersList.includes(currentUserId) &&
+              membersList.includes(targetUserId);
           }
           return false;
         });
@@ -108,13 +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();
+          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
@@ -134,11 +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();
+          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));
+          }
         }
       }
 
@@ -158,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(() => {
@@ -169,7 +275,41 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
   }, [selectedUsers, tab, name, step]);
 
   let footer;
-  if (tab === 'messaging') {
+  if (FooterComponent) {
+    footer = (
+      <FooterComponent
+        tab={tab}
+        step={step}
+        onCancel={() => {
+          if (tab === 'team' && step === 2) {
+            setError(null);
+            setStep(1);
+          } else {
+            onClose();
+          }
+        }}
+        onNext={() => {
+          setError(null);
+          setStep(2);
+        }}
+        onBack={() => {
+          setError(null);
+          setStep(1);
+        }}
+        onCreate={handleCreate}
+        isCreating={isCreating}
+        isValid={isValid}
+        hasExistingDirectChannel={hasExistingDirectChannel}
+        cancelButtonLabel={cancelButtonLabel}
+        createButtonLabel={createButtonLabel}
+        creatingButtonLabel={creatingButtonLabel}
+        messageButtonLabel={messageButtonLabel}
+        nextButtonLabel={nextButtonLabel}
+        backButtonLabel={backButtonLabel}
+        e2eeEnabled={e2eeEnabled}
+      />
+    );
+  } else if (tab === 'messaging') {
     footer = (
       <div className="ermis-create-channel__footer">
         <button className="ermis-create-channel__btn ermis-create-channel__btn--cancel" onClick={onClose} disabled={isCreating}>{cancelButtonLabel}</button>
@@ -183,14 +323,14 @@ 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={() => { setError(null); setStep(2); }} disabled={isCreating || !isValid}>
-          Next
+          {nextButtonLabel}
         </button>
       </div>
     );
   } else if (tab === 'team' && step === 2) {
     footer = (
       <div className="ermis-create-channel__footer">
-        <button className="ermis-create-channel__btn ermis-create-channel__btn--cancel" onClick={() => { setError(null); setStep(1); }} disabled={isCreating}>Back</button>
+        <button className="ermis-create-channel__btn ermis-create-channel__btn--cancel" onClick={() => { setError(null); setStep(1); }} disabled={isCreating}>{backButtonLabel}</button>
         <button className="ermis-create-channel__btn ermis-create-channel__btn--create" onClick={handleCreate} disabled={isCreating || !isValid}>
           {isCreating ? creatingButtonLabel : createButtonLabel}
         </button>
@@ -203,94 +343,151 @@ export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
       <div className="ermis-create-channel__body">
 
         {/* Type Toggle */}
-        <div className="ermis-create-channel__tabs">
-          <button
-            className={`ermis-create-channel__tab ${tab === 'messaging' ? 'ermis-create-channel__tab--active' : ''}`}
-            onClick={() => {
-              setTab('messaging');
+        {TabsComponent ? (
+          <TabsComponent
+            activeTab={tab}
+            onTabChange={(t) => {
+              setTab(t);
               setStep(1);
-              setSelectedUsers([]);
-              setError(null);
+            setSelectedUsers([]);
+            setE2eeEnabled(false);
+            setError(null);
             }}
             disabled={isCreating}
-          >
-            {directTabLabel}
-          </button>
-          <button
-            className={`ermis-create-channel__tab ${tab === 'team' ? 'ermis-create-channel__tab--active' : ''}`}
-            onClick={() => {
-              setTab('team');
-              setStep(1);
+            directTabLabel={directTabLabel}
+            groupTabLabel={groupTabLabel}
+          />
+        ) : (
+          <div className="ermis-create-channel__tabs">
+            <button
+              className={`ermis-create-channel__tab ${tab === 'messaging' ? 'ermis-create-channel__tab--active' : ''}`}
+              onClick={() => {
+                setTab('messaging');
+                setStep(1);
               setSelectedUsers([]);
+              setE2eeEnabled(false);
               setError(null);
-            }}
-            disabled={isCreating}
-          >
-            {groupTabLabel}
-          </button>
-        </div>
+              }}
+              disabled={isCreating}
+            >
+              {directTabLabel}
+            </button>
+            <button
+              className={`ermis-create-channel__tab ${tab === 'team' ? 'ermis-create-channel__tab--active' : ''}`}
+              onClick={() => {
+                setTab('team');
+                setStep(1);
+              setSelectedUsers([]);
+              setE2eeEnabled(false);
+              setError(null);
+              }}
+              disabled={isCreating}
+            >
+              {groupTabLabel}
+            </button>
+          </div>
+        )}
 
         {/* Group Specific Fields - Step 1 */}
         {tab === 'team' && step === 1 && (
-          <>
-
-            <div className="ermis-create-channel__field">
-              <label className="ermis-create-channel__label">{groupNameLabel} <span style={{ color: 'var(--ermis-error)' }}>*</span></label>
-              <input
-                className="ermis-create-channel__input"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder={groupNamePlaceholder}
-                disabled={isCreating}
-                maxLength={100}
-              />
-            </div>
-
-            <div className="ermis-create-channel__field">
-              <label className="ermis-create-channel__label">{groupDescriptionLabel}</label>
-              <textarea
-                className="ermis-create-channel__textarea"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                placeholder={groupDescriptionPlaceholder}
-                disabled={isCreating}
-                maxLength={500}
-                rows={2}
+          GroupFieldsComponent ? (
+            <GroupFieldsComponent
+              name={name}
+              onNameChange={setName}
+              description={description}
+              onDescriptionChange={setDescription}
+              isPublic={isPublic}
+              onPublicChange={setIsPublic}
+              disabled={isCreating}
+              groupNameLabel={groupNameLabel}
+              groupNamePlaceholder={groupNamePlaceholder}
+              groupDescriptionLabel={groupDescriptionLabel}
+              groupDescriptionPlaceholder={groupDescriptionPlaceholder}
+              groupPublicLabel={groupPublicLabel}
+              e2eeEnabled={e2eeEnabled}
+              onE2eeChange={handleE2eeChange}
+              e2eeLabel={e2eeLabel}
+              e2eeDescription={e2eeDescription}
+              e2eeDisabled={!e2eeAvailable || isCreating}
+            />
+          ) : (
+            <>
+              <div className="ermis-create-channel__field">
+                <label className="ermis-create-channel__label">{groupNameLabel} <span style={{ color: 'var(--ermis-error)' }}>*</span></label>
+                <input
+                  className="ermis-create-channel__input"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder={groupNamePlaceholder}
+                  disabled={isCreating}
+                  maxLength={100}
+                />
+              </div>
+
+              <div className="ermis-create-channel__field">
+                <label className="ermis-create-channel__label">{groupDescriptionLabel}</label>
+                <textarea
+                  className="ermis-create-channel__textarea"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder={groupDescriptionPlaceholder}
+                  disabled={isCreating}
+                  maxLength={500}
+                  rows={2}
+                />
+              </div>
+
+              <div className="ermis-create-channel__field ermis-create-channel__field--toggle">
+                <label className="ermis-create-channel__label">{groupPublicLabel}</label>
+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={isPublic}
+                  className={`ermis-create-channel__toggle ${isPublic ? 'ermis-create-channel__toggle--on' : ''}`}
+                  onClick={() => setIsPublic(v => !v)}
+                  disabled={isCreating}
+                >
+                  <span className="ermis-create-channel__toggle-thumb" />
+                </button>
+              </div>
+
+              <DefaultE2eeToggle
+                enabled={e2eeEnabled}
+                onChange={handleE2eeChange}
+                disabled={!e2eeAvailable || isCreating}
+                label={e2eeLabel}
+                description={e2eeAvailable ? e2eeDescription : e2eeUnavailableLabel}
               />
-            </div>
-
-            <div className="ermis-create-channel__field ermis-create-channel__field--toggle">
-              <label className="ermis-create-channel__label">{groupPublicLabel}</label>
-              <button
-                type="button"
-                role="switch"
-                aria-checked={isPublic}
-                className={`ermis-create-channel__toggle ${isPublic ? 'ermis-create-channel__toggle--on' : ''}`}
-                onClick={() => setIsPublic(v => !v)}
-                disabled={isCreating}
-              >
-                <span className="ermis-create-channel__toggle-thumb" />
-              </button>
-            </div>
-          </>
+            </>
+          )
+        )}
+
+        {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">
-            <div className="ermis-create-channel__users-title">
-              Members <span style={{ color: 'var(--ermis-error)' }}>*</span>
-            </div>
-            <div style={{ height: tab === 'team' ? '280px' : '400px', display: 'flex', flexDirection: 'column' }}>
-              <UserPicker
-                mode={tab === 'messaging' ? 'radio' : 'checkbox'}
-                onSelectionChange={setSelectedUsers}
-                initialSelectedUsers={selectedUsers}
-                AvatarComponent={AvatarComponent}
-                UserItemComponent={UserItemComponent as any}
-                searchPlaceholder={userSearchPlaceholder}
-              />
-            </div>
+          <div className={`ermis-create-channel__users ermis-create-channel__users--${tab}`}>
+            <UserPicker
+              key={tab}
+              mode={tab === 'messaging' ? 'radio' : 'checkbox'}
+              friendsOnly={tab === 'team'}
+              onSelectionChange={setSelectedUsers}
+              initialSelectedUsers={selectedUsers}
+              emptyText={emptyStateLabel}
+              AvatarComponent={AvatarComponent}
+              UserItemComponent={UserItemComponent as any}
+              SearchInputComponent={SearchInputComponent as any}
+              SelectedBoxComponent={SelectedBoxComponent as any}
+              searchPlaceholder={userSearchPlaceholder}
+            />
           </div>
         )}
 

package/src/components/Dropdown.tsx

@@ -9,22 +9,7 @@ export const closeAllDropdowns = () => {
   document.dispatchEvent(new CustomEvent(CLOSE_ALL_EVENT));
 };
 
-export interface DropdownProps {
-  /** Whether the dropdown is open */
-  isOpen: boolean;
-  /** Rect from getBoundingClientRect() of the anchor element */
-  anchorRect: DOMRect | null;
-  /** Callback when dropdown requests to close (e.g., click outside, scroll, Escape) */
-  onClose: () => void;
-  /** Dropdown menu content */
-  children: React.ReactNode;
-  /** Horizontal alignment relative to the anchor. Default: 'left' */
-  align?: 'left' | 'right';
-  /** Optional custom CSS class for the container */
-  className?: string;
-  /** Optional custom CSS style for the container */
-  style?: React.CSSProperties;
-}
+import type { DropdownProps } from '../types';
 
 export const Dropdown: React.FC<DropdownProps> = ({
   isOpen,

package/src/components/EditPreview.tsx

@@ -40,6 +40,7 @@ function getAttachmentSummary(attachments: any[]): string {
 export const EditPreview: React.FC<{
   message: FormatMessageResponse;
   onDismiss: () => void;
+  editingMessageLabel?: string;
 }> = React.memo(({
   message,
   onDismiss,