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

package/src/components/MessageRenderers.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { preloadImage, isImagePreloaded } from '../utils';
 import type { FormatMessageResponse, Attachment, MessageLabel } from '@ermis-network/ermis-chat-sdk';
-import { parseSystemMessage, parseSignalMessage } from '@ermis-network/ermis-chat-sdk';
+import { parseSystemMessage, parseSignalMessage, CallType } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 import { buildUserMap } from '../utils';
 import type { AttachmentProps, MessageRendererProps, MessageBubbleProps } from '../types';
@@ -482,19 +482,46 @@ export const SystemMessage: React.FC<MessageRendererProps> = ({ message }) => {
 
 /** Signal message: call events */
 export const SignalMessage: React.FC<MessageRendererProps> = ({ message }) => {
-  const { activeChannel } = useChatClient();
-
-  const userMap = useMemo<Record<string, string>>(() => {
-    return buildUserMap(activeChannel?.state);
-  }, [activeChannel?.state]);
+  const { client } = useChatClient();
 
   const rawText = message.text ?? '';
-  const parsedText = rawText ? parseSignalMessage(rawText, userMap) : '';
+  const result = rawText ? parseSignalMessage(rawText, client.userID || '') : null;
+
+  if (!result) {
+    return (
+      <span className="ermis-message-list__signal-text">
+        {rawText}
+      </span>
+    );
+  }
+
+  const isSuccess = !!result.duration;
+  const colorModifier = isSuccess ? 'success' : 'missed';
+  const isAudio = result.callType === CallType.AUDIO;
 
   return (
-    <span className="ermis-message-list__signal-text">
-      {parsedText || rawText}
-    </span>
+    <div className="ermis-signal-message">
+      <div className={`ermis-signal-message__icon ermis-signal-message__icon--${colorModifier}`}>
+        {isAudio ? (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+          </svg>
+        ) : (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polygon points="23 7 16 12 23 17 23 7" />
+            <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+          </svg>
+        )}
+      </div>
+      <div className="ermis-signal-message__body">
+        <span className={`ermis-signal-message__text ermis-signal-message__text--${colorModifier}`}>
+          {result.text}
+        </span>
+        {result.duration && (
+          <span className="ermis-signal-message__duration">{result.duration}</span>
+        )}
+      </div>
+    </div>
   );
 };
 

package/src/components/Modal.tsx

@@ -9,6 +9,7 @@ export const Modal: React.FC<ModalProps> = ({
   footer,
   maxWidth = '480px',
   hideCloseButton = false,
+  closeOnOutsideClick = true,
 }) => {
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
@@ -21,7 +22,7 @@ export const Modal: React.FC<ModalProps> = ({
   if (!isOpen) return null;
 
   return (
-    <div className="ermis-modal-overlay" onClick={onClose}>
+    <div className="ermis-modal-overlay" onClick={closeOnOutsideClick ? onClose : undefined}>
       <div 
         className="ermis-modal-content" 
         style={{ maxWidth }} 

package/src/components/UserPicker.tsx

@@ -0,0 +1,377 @@
+import React, { useState, useEffect, useMemo, useCallback, useRef, useTransition } from 'react';
+import { useChatClient } from '../hooks/useChatClient';
+import { Avatar } from './Avatar';
+import { VList, type VListHandle } from 'virtua';
+import type {
+  UserPickerProps,
+  UserPickerItemProps,
+  UserPickerSelectedBoxProps,
+  UserPickerUser,
+} from '../types';
+
+/* ---------- Constants ---------- */
+const DEFAULT_PAGE_SIZE = 30;
+const SEARCH_DEBOUNCE_MS = 500;
+
+/* ---------- Static styles ---------- */
+const LIST_STYLE: React.CSSProperties = { height: '100%' };
+
+/* ==========================================================
+   Default Sub-Components
+   ========================================================== */
+
+/** Check icon for selected state */
+const CheckIcon: React.FC = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+/** Default user row */
+const DefaultUserItem: React.FC<UserPickerItemProps> = React.memo(({
+  user, selected, disabled, mode, onToggle, AvatarComponent,
+}) => {
+  const handleClick = useCallback(() => {
+    if (!disabled) onToggle(user);
+  }, [disabled, onToggle, user]);
+
+  const inputClass = [
+    'ermis-user-picker__input',
+    mode === 'radio' ? 'ermis-user-picker__input--radio' : 'ermis-user-picker__input--checkbox',
+    selected ? 'ermis-user-picker__input--checked' : '',
+  ].join(' ');
+
+  const itemClass = [
+    'ermis-user-picker__item',
+    selected ? 'ermis-user-picker__item--selected' : '',
+    disabled ? 'ermis-user-picker__item--disabled' : '',
+  ].join(' ');
+
+  const detail = user.email || user.phone || '';
+
+  return (
+    <div className={itemClass} onClick={handleClick} role="option" aria-selected={selected}>
+      <div className={inputClass}>
+        {selected && <CheckIcon />}
+      </div>
+      <AvatarComponent image={user.avatar} name={user.name || user.id} size={36} />
+      <div className="ermis-user-picker__info">
+        <span className="ermis-user-picker__name">{user.name || user.id}</span>
+        {detail && <span className="ermis-user-picker__detail">{detail}</span>}
+      </div>
+    </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-user-picker__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" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <input
+      type="text"
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      autoFocus
+    />
+  </div>
+);
+
+/** Default selected users chip box */
+const DefaultSelectedBox: React.FC<UserPickerSelectedBoxProps> = React.memo(({
+  users, onRemove, AvatarComponent, emptyLabel,
+}) => (
+  <div className="ermis-user-picker__selected-box">
+    {users.length === 0 && emptyLabel && (
+      <span className="ermis-user-picker__selected-empty">{emptyLabel}</span>
+    )}
+    {users.map(u => (
+      <div key={u.id} className="ermis-user-picker__chip">
+        <AvatarComponent image={u.avatar} name={u.name || u.id} size={20} />
+        <span className="ermis-user-picker__chip-name">{u.name || u.id}</span>
+        <button
+          className="ermis-user-picker__chip-remove"
+          onClick={() => onRemove(u.id)}
+          aria-label={`Remove ${u.name || u.id}`}
+        >
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+    ))}
+  </div>
+));
+DefaultSelectedBox.displayName = 'DefaultSelectedBox';
+
+/* ==========================================================
+   UserPicker Component
+   ========================================================== */
+
+export const UserPicker: React.FC<UserPickerProps> = ({
+  mode,
+  onSelectionChange,
+  excludeUserIds,
+  initialSelectedUsers,
+  pageSize = DEFAULT_PAGE_SIZE,
+  AvatarComponent = Avatar,
+  UserItemComponent,
+  SelectedBoxComponent,
+  SearchInputComponent,
+  searchPlaceholder = 'Search by name, email or phone...',
+  loadingText = 'Loading users...',
+  emptyText = 'No users found.',
+  loadingMoreText = 'Loading more...',
+  selectedEmptyLabel,
+}) => {
+  const { client } = useChatClient();
+  const currentUserId = client?.userID;
+
+  /* ---------- State ---------- */
+  const [allUsers, setAllUsers] = useState<UserPickerUser[]>([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const [remoteUsers, setRemoteUsers] = useState<UserPickerUser[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [isPendingFilter, startTransition] = useTransition();
+
+  const [selectedMap, setSelectedMap] = useState<Map<string, UserPickerUser>>(() => {
+    const map = new Map<string, UserPickerUser>();
+    initialSelectedUsers?.forEach(u => map.set(u.id, u));
+    return map;
+  });
+
+  const vlistRef = useRef<VListHandle>(null);
+
+  /* ---------- Resolved sub-components ---------- */
+  const UserRow = UserItemComponent || DefaultUserItem;
+  const SearchInput = SearchInputComponent || DefaultSearchInput;
+  const SelectedBox = SelectedBoxComponent || DefaultSelectedBox;
+
+  /* ---------- Excluded IDs set ---------- */
+  const excludeSet = useMemo(() => new Set(excludeUserIds || []), [excludeUserIds]);
+
+  /* ---------- Search handler ---------- */
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setSearchInput(val);
+    startTransition(() => {
+      setSearch(val);
+    });
+  }, [startTransition]);
+
+  /* ---------- 1. Fetch initial page ---------- */
+  useEffect(() => {
+    let active = true;
+    const fetchUsers = async () => {
+      if (!client) return;
+      try {
+        setLoading(true);
+        const response = await client.queryUsers(String(pageSize), 1);
+        if (active && response.data) {
+          setAllUsers(response.data);
+          setHasMore(response.data.length >= pageSize);
+          setPage(1);
+        }
+      } catch (err) {
+        console.error('[UserPicker] Error fetching users:', err);
+      } finally {
+        if (active) setLoading(false);
+      }
+    };
+    fetchUsers();
+    return () => { active = false; };
+  }, [client, pageSize]);
+
+  /* ---------- 2. Load more (infinite scroll) ---------- */
+  const loadMore = useCallback(async () => {
+    if (!client || loadingMore || !hasMore || search.trim()) return;
+    const nextPage = page + 1;
+    setLoadingMore(true);
+    try {
+      const response = await client.queryUsers(String(pageSize), nextPage);
+      if (response.data) {
+        setAllUsers(prev => {
+          const existingIds = new Set(prev.map(u => u.id));
+          const newUsers = response.data.filter((u: UserPickerUser) => !existingIds.has(u.id));
+          return [...prev, ...newUsers];
+        });
+        setHasMore(response.data.length >= pageSize);
+        setPage(nextPage);
+      }
+    } catch (err) {
+      console.error('[UserPicker] Error loading more users:', err);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [client, loadingMore, hasMore, page, pageSize, search]);
+
+  /* ---------- 3. Local filter ---------- */
+  const localFilteredUsers = useMemo(() => {
+    const term = search.toLowerCase().trim();
+    if (!term) return allUsers;
+    return allUsers.filter(u => {
+      const name = (u.name || '').toLowerCase();
+      const email = (u.email || '').toLowerCase();
+      const phone = (u.phone || '').toLowerCase();
+      return name.includes(term) || email.includes(term) || phone.includes(term);
+    });
+  }, [search, allUsers]);
+
+  /* ---------- 4. Remote search fallback ---------- */
+  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('[UserPicker] Error searching remote users:', err);
+      } finally {
+        if (!cancelled) setIsSearching(false);
+      }
+    }, SEARCH_DEBOUNCE_MS);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [search, localFilteredUsers.length, client, excludeSet]);
+
+  /* ---------- 5. Derived display list ---------- */
+  const usersToDisplay = (search.trim() && localFilteredUsers.length === 0)
+    ? remoteUsers
+    : localFilteredUsers;
+  const isListLoading = loading || isSearching || isPendingFilter;
+
+  /* ---------- 6. Selection handlers ---------- */
+  const handleToggle = useCallback((user: UserPickerUser) => {
+    // Don't allow toggling disabled users (current user or excluded)
+    if (user.id === currentUserId || excludeSet.has(user.id)) return;
+
+    setSelectedMap(prev => {
+      const next = new Map(prev);
+      if (mode === 'radio') {
+        // Radio: clear all, set this one (or deselect if same)
+        if (next.has(user.id)) {
+          next.clear();
+        } else {
+          next.clear();
+          next.set(user.id, user);
+        }
+      } else {
+        // Checkbox: toggle
+        if (next.has(user.id)) {
+          next.delete(user.id);
+        } else {
+          next.set(user.id, user);
+        }
+      }
+      return next;
+    });
+  }, [mode, currentUserId, excludeSet]);
+
+  // Notify parent of selection changes
+  useEffect(() => {
+    onSelectionChange?.(Array.from(selectedMap.values()));
+  }, [selectedMap, onSelectionChange]);
+
+  const handleRemoveSelected = useCallback((userId: string) => {
+    setSelectedMap(prev => {
+      const next = new Map(prev);
+      next.delete(userId);
+      return next;
+    });
+  }, []);
+
+  /* ---------- 7. Scroll handler for infinite scroll ---------- */
+  const handleScroll = useCallback((offset: number) => {
+    // VList provides scroll offset. We detect near-bottom using the ref
+    const el = vlistRef.current;
+    if (!el) return;
+    // scrollSize = total scroll height, viewportSize = visible height
+    const scrollSize = (el as any).scrollSize ?? 0;
+    const viewportSize = (el as any).viewportSize ?? 0;
+    if (scrollSize > 0 && offset + viewportSize >= scrollSize - 50) {
+      loadMore();
+    }
+  }, [loadMore]);
+
+  /* ---------- Render ---------- */
+  const selectedArr = useMemo(() => Array.from(selectedMap.values()), [selectedMap]);
+
+  return (
+    <div className="ermis-user-picker" role="listbox" aria-multiselectable={mode === 'checkbox'}>
+      {/* Selected Users Box (checkbox mode only) */}
+      {mode === 'checkbox' && (
+        <SelectedBox
+          users={selectedArr}
+          onRemove={handleRemoveSelected}
+          AvatarComponent={AvatarComponent}
+          emptyLabel={selectedEmptyLabel}
+        />
+      )}
+
+      {/* Search Input */}
+      <SearchInput
+        value={searchInput}
+        onChange={handleSearchChange}
+        placeholder={searchPlaceholder}
+      />
+
+      {/* User List */}
+      <div className="ermis-user-picker__list">
+        {isListLoading ? (
+          <div className="ermis-user-picker__loading">
+            <span className="ermis-user-picker__spinner" />
+            {loadingText}
+          </div>
+        ) : usersToDisplay.length === 0 ? (
+          <div className="ermis-user-picker__empty">{emptyText}</div>
+        ) : (
+          <VList ref={vlistRef} style={LIST_STYLE} onScroll={handleScroll}>
+            {usersToDisplay.map(user => (
+              <UserRow
+                key={user.id}
+                user={user}
+                selected={selectedMap.has(user.id)}
+                disabled={user.id === currentUserId || excludeSet.has(user.id)}
+                mode={mode}
+                onToggle={handleToggle}
+                AvatarComponent={AvatarComponent}
+              />
+            ))}
+            {loadingMore && (
+              <div className="ermis-user-picker__load-more">
+                <span className="ermis-user-picker__spinner" />
+                {loadingMoreText}
+              </div>
+            )}
+          </VList>
+        )}
+      </div>
+    </div>
+  );
+};
+
+UserPicker.displayName = 'UserPicker';

package/src/context/ChatProvider.tsx

@@ -1,6 +1,8 @@
 import React, { createContext, useState, useCallback } from 'react';
 import type { Channel, FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import type { Theme, ChatContextValue, ChatProviderProps, ReadStateEntry } from '../types';
+import { ErmisCallProvider } from '../components/ErmisCallProvider';
+import { ErmisCallUI } from '../components/ErmisCallUI';
 
 export type { Theme, ChatContextValue, ChatProviderProps } from '../types';
 
@@ -10,6 +12,19 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   client,
   children,
   initialTheme = 'light',
+  enableCall = false,
+  callSessionId,
+  callWasmPath,
+  callRelayUrl,
+  CallUIComponent,
+  incomingCallAudioPath,
+  outgoingCallAudioPath,
+  onCallStart,
+  onCallEnd,
+  onCallError,
+  onIncomingCall,
+  onCallAccepted,
+  onCallRejected,
 }) => {
   const [activeChannelRaw, setActiveChannelRaw] = useState<Channel | null>(null);
   const [theme, setTheme] = useState<Theme>(initialTheme);
@@ -61,13 +76,46 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     setForwardingMessage,
     jumpToMessageId,
     setJumpToMessageId,
+    enableCall,
   };
 
-  return (
+  const CallUIView = CallUIComponent ? <CallUIComponent /> : (
+    <ErmisCallUI
+      incomingCallAudioPath={incomingCallAudioPath}
+      outgoingCallAudioPath={outgoingCallAudioPath}
+    />
+  );
+
+  const content = (
     <ChatContext.Provider value={value}>
       <div className={`ermis-chat ermis-chat--${theme}`}>
         {children}
+        {enableCall && CallUIView}
       </div>
     </ChatContext.Provider>
   );
+
+  if (enableCall) {
+    if (!callSessionId) {
+      console.warn('ErmisChat React: enableCall is true but callSessionId is missing.');
+    }
+    return (
+      <ErmisCallProvider
+        client={client}
+        sessionId={callSessionId || ''}
+        wasmPath={callWasmPath}
+        relayUrl={callRelayUrl}
+        onCallStart={onCallStart}
+        onCallEnd={onCallEnd}
+        onCallError={onCallError}
+        onIncomingCall={onIncomingCall}
+        onCallAccepted={onCallAccepted}
+        onCallRejected={onCallRejected}
+      >
+        {content}
+      </ErmisCallProvider>
+    );
+  }
+
+  return content;
 };

package/src/context/ErmisCallContext.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { CallStatus, type ErmisCallNode, type UserCallInfo } from '@ermis-network/ermis-chat-sdk';
+
+export type CallContextValue = {
+  callNode: ErmisCallNode | null;
+  callStatus: CallStatus | '';
+  localStream: MediaStream | null;
+  remoteStream: MediaStream | null;
+  callType: string;
+  callerInfo?: UserCallInfo | undefined;
+  receiverInfo?: UserCallInfo | undefined;
+  isIncoming: boolean;
+  createCall: (type: 'audio' | 'video', cid: string) => Promise<void>;
+  acceptCall: () => Promise<void>;
+  rejectCall: () => Promise<void>;
+  endCall: () => Promise<void>;
+  toggleMic: () => void;
+  toggleVideo: () => void;
+  isMicMuted: boolean;
+  isVideoMuted: boolean;
+  audioDevices: MediaDeviceInfo[];
+  videoDevices: MediaDeviceInfo[];
+  selectedAudioDeviceId: string;
+  selectedVideoDeviceId: string;
+  isScreenSharing: boolean;
+  errorMessage: string | null;
+  toggleScreenShare: () => Promise<void>;
+  switchAudioDevice: (id: string) => Promise<void>;
+  switchVideoDevice: (id: string) => Promise<void>;
+  clearError: () => void;
+  isRemoteMicMuted: boolean;
+  isRemoteVideoMuted: boolean;
+  upgradeCall: () => Promise<void>;
+  callDuration: number;
+};
+
+export const ErmisCallContext = React.createContext<CallContextValue | undefined>(undefined);

package/src/hooks/useCallContext.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ErmisCallContext } from '../context/ErmisCallContext';
+
+export const useCallContext = () => {
+  const context = useContext(ErmisCallContext);
+  if (context === undefined) {
+    throw new Error('useCallContext must be used within an ErmisCallProvider');
+  }
+  return context;
+};

package/src/index.ts

@@ -127,3 +127,30 @@ export type {
   AddMemberUserItemProps,
   AddMemberButtonProps,
 } from './types';
+
+export { UserPicker } from './components/UserPicker';
+export type {
+  UserPickerProps,
+  UserPickerUser,
+  UserPickerItemProps,
+  UserPickerSelectedBoxProps,
+} from './types';
+
+export { CreateChannelModal } from './components/CreateChannelModal';
+export type { CreateChannelModalProps } from './types';
+
+// Call Components
+export { ErmisCallContext } from './context/ErmisCallContext';
+export type { CallContextValue } from './context/ErmisCallContext';
+export { useCallContext } from './hooks/useCallContext';
+export { ErmisCallProvider } from './components/ErmisCallProvider';
+export type { ErmisCallProviderProps } from './components/ErmisCallProvider';
+export { ErmisCallUI } from './components/ErmisCallUI';
+export type {
+  ErmisCallUIProps,
+  ErmisCallRingingProps,
+  ErmisCallConnectedAudioProps,
+  ErmisCallConnectedVideoProps,
+  ErmisCallErrorProps,
+  ErmisCallControlsBarProps,
+} from './types';