@ermis-network/ermis-chat-react 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ermis-network/ermis-chat-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React UI components for Ermis Chat",
   "author": "Ermis",
   "homepage": "https://ermis.network/",

package/src/components/ChannelInfo/AddMemberModal.tsx

@@ -1,58 +1,14 @@
-import React, { useState, useEffect, useMemo, useCallback, useTransition } from 'react';
-import { useChatClient } from '../../hooks/useChatClient';
+import React, { useState, useMemo, useCallback } from 'react';
 import { Modal } from '../Modal';
-import { VList } from 'virtua';
-import type { AddMemberModalProps, AddMemberUserItemProps } from '../../types';
-
-/* ---------- Static styles hoisted outside render ---------- */
-const LIST_CONTAINER_STYLE: React.CSSProperties = { overflow: 'hidden', height: '400px' };
-const VLIST_STYLE: React.CSSProperties = { height: '100%' };
-const DISABLED_BTN_STYLE: React.CSSProperties = { opacity: 0.5, cursor: 'not-allowed' };
-
-/* ---------- Default user row ---------- */
-const DefaultUserItem: React.FC<AddMemberUserItemProps> = React.memo(({
-  user, isExisting, isAdding, onAdd, AvatarComponent,
-  addedLabel = 'Added', addingLabel = 'Adding...', addLabel = 'Add',
-}) => (
-  <div className="ermis-modal-user-item">
-    <AvatarComponent image={user.avatar} name={user.name || user.id} size={36} />
-    <div className="ermis-modal-user-info">
-      <span className="ermis-modal-user-name">{user.name || user.id}</span>
-    </div>
-    <button
-      className={`ermis-modal-add-btn ${isExisting ? 'ermis-modal-add-btn--disabled' : ''}`}
-      onClick={() => onAdd(user.id)}
-      disabled={isAdding || isExisting}
-      style={isExisting ? DISABLED_BTN_STYLE : undefined}
-    >
-      {isExisting ? addedLabel : (isAdding ? addingLabel : addLabel)}
-    </button>
-  </div>
-));
-DefaultUserItem.displayName = 'DefaultUserItem';
-
-/* ---------- Default search input ---------- */
-const DefaultSearchInput: React.FC<{ value: string; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; placeholder: string }> = ({ value, onChange, placeholder }) => (
-  <div className="ermis-modal-search">
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="11" cy="11" r="8"></circle>
-      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-    </svg>
-    <input
-      type="text"
-      placeholder={placeholder}
-      value={value}
-      onChange={onChange}
-      autoFocus
-    />
-  </div>
-);
+import { UserPicker } from '../UserPicker';
+import { Avatar } from '../Avatar';
+import type { AddMemberModalProps, UserPickerUser } from '../../types';
 
 export const AddMemberModal: React.FC<AddMemberModalProps> = ({
   channel,
   currentMembers,
   onClose,
-  AvatarComponent,
+  AvatarComponent = Avatar,
   title = 'Add Member',
   searchPlaceholder = 'Search by name, email or phone...',
   loadingText = 'Loading users...',
@@ -63,142 +19,60 @@ export const AddMemberModal: React.FC<AddMemberModalProps> = ({
   UserItemComponent,
   SearchInputComponent,
 }) => {
-  const { client } = useChatClient();
-  const [initialUsers, setInitialUsers] = useState<any[]>([]);
-  const [remoteUsers, setRemoteUsers] = useState<any[]>([]);
-  const [searchInput, setSearchInput] = useState('');
-  const [search, setSearch] = useState('');
-  const [isPendingFilter, startTransition] = useTransition();
-
-  const [loading, setLoading] = useState(true);
-  const [isSearching, setIsSearching] = useState(false);
-  const [addingUser, setAddingUser] = useState<string | null>(null);
-  const [justAdded, setJustAdded] = useState<Set<string>>(new Set());
-
-  const UserRow = UserItemComponent || DefaultUserItem;
-  const SearchInput = SearchInputComponent || DefaultSearchInput;
-
-  // Handle immediate input + deferred filter via transition
-  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    setSearchInput(val);
-    startTransition(() => {
-      setSearch(val);
-    });
-  }, [startTransition]);
-
-  // 1. Fetch initial 100 users
-  useEffect(() => {
-    let active = true;
-    const fetchUsers = async () => {
-      if (!client) return;
-      try {
-        const response = await client.queryUsers('100', 1);
-        if (active && response.data) {
-          setInitialUsers(response.data);
-        }
-      } catch (err) {
-        console.error('Error fetching users:', err);
-      } finally {
-        if (active) setLoading(false);
-      }
-    };
-    fetchUsers();
-    return () => { active = false; };
-  }, [client]);
-
-  // 2. Local filter by name/email/phone
-  const localFilteredUsers = useMemo(() => {
-    if (!search.trim()) return initialUsers;
-    const term = search.toLowerCase().trim();
-    return initialUsers.filter(u => {
-      const email = (u.email || '').toLowerCase();
-      const phone = (u.phone || '').toLowerCase();
-      const name = (u.name || '').toLowerCase();
-      return email.includes(term) || phone.includes(term) || name.includes(term);
-    });
-  }, [search, initialUsers]);
+  const [selectedUsers, setSelectedUsers] = useState<UserPickerUser[]>([]);
+  const [isAdding, setIsAdding] = useState(false);
 
-  // 3. Remote search fallback (with race-condition guard)
-  useEffect(() => {
-    if (!search.trim() || localFilteredUsers.length > 0) {
-      setRemoteUsers([]);
-      setIsSearching(false);
-      return;
-    }
-
-    let cancelled = false;
-    const timer = setTimeout(async () => {
-      setIsSearching(true);
-      try {
-        const response = await client.searchUsers(1, 25, search.trim());
-        if (!cancelled && response.data) {
-          setRemoteUsers(response.data);
-        }
-      } catch (err) {
-        console.error('Error searching remote users:', err);
-      } finally {
-        if (!cancelled) setIsSearching(false);
-      }
-    }, 500);
-
-    return () => {
-      cancelled = true;
-      clearTimeout(timer);
-    };
-  }, [search, localFilteredUsers.length, client]);
+  // Exclude existing members from the picker
+  const excludeUserIds = useMemo(
+    () => currentMembers.map((m: any) => m.user_id),
+    [currentMembers],
+  );
 
-  // 4. Derived state
-  const usersToDisplay = (search.trim() && localFilteredUsers.length === 0) ? remoteUsers : localFilteredUsers;
-  const isListLoading = loading || isSearching || isPendingFilter;
 
-  const existingMemberIds = useMemo(() => {
-    return new Set(currentMembers.map((m: any) => m.user_id));
-  }, [currentMembers]);
+  const handleSelectionChange = useCallback((users: UserPickerUser[]) => {
+    setSelectedUsers(users);
+  }, []);
 
-  const handleAdd = useCallback(async (userId: string) => {
+  const handleAdd = useCallback(async () => {
+    if (selectedUsers.length === 0 || isAdding) return;
     try {
-      setAddingUser(userId);
-      await channel.addMembers([userId]);
-      setJustAdded(prev => new Set(prev).add(userId));
+      setIsAdding(true);
+      await channel.addMembers(selectedUsers.map(u => u.id));
+      onClose();
     } catch (err) {
-      console.error('Failed to add member:', err);
+      console.error('Failed to add members:', err);
     } finally {
-      setAddingUser(null);
+      setIsAdding(false);
     }
-  }, [channel]);
+  }, [selectedUsers, isAdding, channel, onClose]);
+
+  const footer = (
+    <button
+      className="ermis-modal-add-btn"
+      onClick={handleAdd}
+      disabled={selectedUsers.length === 0 || isAdding}
+    >
+      {isAdding
+        ? addingLabel
+        : `${addLabel} ${selectedUsers.length > 0 ? `(${selectedUsers.length})` : ''}`}
+    </button>
+  );
 
   return (
-    <Modal isOpen onClose={onClose} title={title} maxWidth="480px">
-      <SearchInput
-        value={searchInput}
-        onChange={handleSearchChange}
-        placeholder={searchPlaceholder}
+    <Modal isOpen onClose={onClose} title={title} maxWidth="480px" footer={footer}>
+      <UserPicker
+        mode="checkbox"
+        onSelectionChange={handleSelectionChange}
+        excludeUserIds={excludeUserIds}
+        pageSize={30}
+        AvatarComponent={AvatarComponent}
+        UserItemComponent={UserItemComponent as any}
+        SearchInputComponent={SearchInputComponent}
+        searchPlaceholder={searchPlaceholder}
+        loadingText={loadingText}
+        emptyText={emptyText}
+        selectedEmptyLabel="Select users to add..."
       />
-
-      <div className="ermis-modal-user-list" style={LIST_CONTAINER_STYLE}>
-        {isListLoading ? (
-          <div className="ermis-modal-loading">{loadingText}</div>
-        ) : usersToDisplay.length === 0 ? (
-          <div className="ermis-modal-empty">{emptyText}</div>
-        ) : (
-          <VList style={VLIST_STYLE}>
-            {usersToDisplay.map(user => (
-              <UserRow
-                key={user.id}
-                user={user}
-                isExisting={existingMemberIds.has(user.id) || justAdded.has(user.id)}
-                isAdding={addingUser === user.id}
-                onAdd={handleAdd}
-                AvatarComponent={AvatarComponent}
-                addedLabel={addedLabel}
-                addingLabel={addingLabel}
-                addLabel={addLabel}
-              />
-            ))}
-          </VList>
-        )}
-      </div>
     </Modal>
   );
 };

package/src/components/ChannelList.tsx

@@ -35,6 +35,11 @@ function getLastMessagePreview(
     return { text: parseSignalMessage(rawText, userMap), user: '' };
   }
 
+  // Display 'Sticker' if message is a sticker
+  if (msgType === 'sticker' || (lastMsg as Record<string, unknown>).sticker_url) {
+    return { text: 'Sticker', user: lastMsg.user?.name || lastMsg.user_id || '' };
+  }
+
   // Regular / other
   let displayText = rawText;
   if (!displayText && lastMsg.attachments && lastMsg.attachments.length > 0) {

package/src/components/CreateChannelModal.tsx

@@ -0,0 +1,274 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { Modal } from './Modal';
+import { UserPicker } from './UserPicker';
+import { Avatar } from './Avatar';
+import { useChatClient } from '../hooks/useChatClient';
+import type { CreateChannelModalProps, UserPickerUser } from '../types';
+
+
+export const CreateChannelModal: React.FC<CreateChannelModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess,
+  AvatarComponent = Avatar,
+  UserItemComponent,
+  title = 'New Message',
+  directTabLabel = 'Direct',
+  groupTabLabel = 'Group',
+  groupNameLabel = 'Channel Name',
+  groupNamePlaceholder = 'Enter channel name (required)',
+  groupDescriptionLabel = 'Description',
+  groupDescriptionPlaceholder = 'Optional description',
+  groupPublicLabel = 'Public Channel',
+  userSearchPlaceholder = 'Search users...',
+  cancelButtonLabel = 'Cancel',
+  createButtonLabel = 'Create',
+  creatingButtonLabel = 'Creating...',
+}) => {
+  const { client } = useChatClient();
+  const currentUserId = client?.userID;
+
+  /* ---------- State ---------- */
+  const [tab, setTab] = useState<'messaging' | 'team'>('messaging');
+  const [step, setStep] = useState<1 | 2>(1); // Only for team channel
+
+  // Group specific
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [isPublic, setIsPublic] = useState(false);
+
+  // Users
+  const [selectedUsers, setSelectedUsers] = useState<UserPickerUser[]>([]);
+
+  // Progress/Error
+  const [isCreating, setIsCreating] = useState(false);
+  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);
+        });
+      }
+    });
+    return Array.from(ids);
+  }, [client, currentUserId, tab]);
+
+  /* ---------- Handlers ---------- */
+  const handleCreate = useCallback(async () => {
+    if (!client || !currentUserId || isCreating) return;
+
+    // Validations
+    if (selectedUsers.length === 0) {
+      setError('Please select at least one user.');
+      return;
+    }
+
+    if (tab === 'team' && !name.trim()) {
+      setError('Group name is required.');
+      return;
+    }
+
+    setIsCreating(true);
+    setError(null);
+
+    try {
+      let createdChannel;
+
+      if (tab === 'messaging') {
+        const targetUserId = selectedUsers[0].id;
+        createdChannel = client.channel('messaging', {
+          members: [currentUserId, targetUserId],
+        } as any);
+        await createdChannel.create();
+      } else {
+        // Group Channel
+        const memberIds = selectedUsers.map(member => member.id);
+        // Ensure current user is in the group members
+        if (!memberIds.includes(currentUserId)) {
+          memberIds.push(currentUserId);
+        }
+
+        const payload: any = {
+          name: name.trim(),
+          members: memberIds,
+          public: isPublic,
+        };
+
+        if (description.trim()) {
+          payload.description = description.trim();
+        }
+
+        createdChannel = client.channel('team', payload);
+        await createdChannel.create();
+      }
+
+      // Cleanup and execute callback
+      if (onSuccess) {
+        onSuccess(createdChannel);
+      } else {
+        onClose();
+      }
+
+    } catch (err: any) {
+      setError(err?.message || 'Failed to create channel');
+    } finally {
+      setIsCreating(false);
+    }
+  }, [client, currentUserId, isCreating, selectedUsers, tab, name, isPublic, description, onSuccess, onClose]);
+
+
+  const isValid = useMemo(() => {
+    if (tab === 'messaging' && selectedUsers.length === 0) return false;
+    if (tab === 'team' && step === 1 && !name.trim()) return false;
+    if (tab === 'team' && step === 2 && selectedUsers.length === 0) return false;
+    return true;
+  }, [selectedUsers, tab, name, step]);
+
+  let footer;
+  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>
+        <button className="ermis-create-channel__btn ermis-create-channel__btn--create" onClick={handleCreate} disabled={isCreating || !isValid}>
+          {isCreating ? creatingButtonLabel : createButtonLabel}
+        </button>
+      </div>
+    );
+  } else if (tab === 'team' && step === 1) {
+    footer = (
+      <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
+        </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--create" onClick={handleCreate} disabled={isCreating || !isValid}>
+          {isCreating ? creatingButtonLabel : createButtonLabel}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={isCreating ? () => { } : onClose} title={title} maxWidth="480px" footer={footer}>
+      <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');
+              setStep(1);
+              setSelectedUsers([]);
+              setError(null);
+            }}
+            disabled={isCreating}
+          >
+            {directTabLabel}
+          </button>
+          <button
+            className={`ermis-create-channel__tab ${tab === 'team' ? 'ermis-create-channel__tab--active' : ''}`}
+            onClick={() => {
+              setTab('team');
+              setStep(1);
+              setSelectedUsers([]);
+              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}
+              />
+            </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>
+          </>
+        )}
+
+        {/* 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}
+                excludeUserIds={tab === 'messaging' ? existingDirectUserIds : []}
+                initialSelectedUsers={selectedUsers}
+                AvatarComponent={AvatarComponent}
+                UserItemComponent={UserItemComponent as any}
+                searchPlaceholder={userSearchPlaceholder}
+              />
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="ermis-create-channel__error">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            {error}
+          </div>
+        )}
+
+      </div>
+    </Modal>
+  );
+};