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

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/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

@@ -138,3 +138,19 @@ export type {
 
 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';

package/src/styles/_add-member-modal.css

@@ -8,7 +8,7 @@
 .ermis-modal-search svg {
   position: absolute;
   left: 12px;
-  color: var(--ermis-text-secondary, #666666);
+  color: var(--ermis-text-secondary);
   pointer-events: none;
 }
 
@@ -16,23 +16,17 @@
   width: 100%;
   padding: 10px 12px 10px 36px;
   border-radius: 8px;
-  border: 1px solid var(--ermis-border-color, #cccccc);
-  background-color: var(--ermis-bg-base, #f9f9f9);
-  color: var(--ermis-text-primary, #000000);
+  border: 1px solid var(--ermis-border);
+  background-color: var(--ermis-bg-secondary);
+  color: var(--ermis-text-primary);
   font-size: 14px;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   outline: none;
 }
 
-[data-theme='dark'] .ermis-modal-search input {
-  background-color: var(--ermis-bg-base, #121212);
-  border: 1px solid var(--ermis-border-color, #444444);
-  color: var(--ermis-text-primary, #ffffff);
-}
-
 .ermis-modal-search input:focus {
-  border-color: var(--ermis-primary-color, #005fff);
-  box-shadow: 0 0 0 2px rgba(0, 95, 255, 0.2);
+  border-color: var(--ermis-accent);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
 }
 
 .ermis-modal-user-list {
@@ -52,17 +46,14 @@
   background: transparent;
 }
 .ermis-modal-user-list::-webkit-scrollbar-thumb {
-  background-color: var(--ermis-border-color, #cccccc);
+  background-color: var(--ermis-border);
   border-radius: 3px;
 }
-[data-theme='dark'] .ermis-modal-user-list::-webkit-scrollbar-thumb {
-  background-color: var(--ermis-border-color, #444444);
-}
 
 .ermis-modal-loading,
 .ermis-modal-empty {
   text-align: center;
-  color: var(--ermis-text-secondary, #666666);
+  color: var(--ermis-text-secondary);
   padding: 32px 0;
   font-size: 14px;
 }
@@ -76,11 +67,7 @@
 }
 
 .ermis-modal-user-item:hover {
-  background-color: var(--ermis-bg-hover, #f0f0f0);
-}
-
-[data-theme='dark'] .ermis-modal-user-item:hover {
-  background-color: var(--ermis-bg-hover, #2a2a2a);
+  background-color: var(--ermis-bg-hover);
 }
 
 .ermis-modal-user-info {
@@ -93,15 +80,11 @@
 .ermis-modal-user-name {
   font-size: 14px;
   font-weight: 500;
-  color: var(--ermis-text-primary, #000000);
-}
-
-[data-theme='dark'] .ermis-modal-user-name {
-  color: var(--ermis-text-primary, #ffffff);
+  color: var(--ermis-text-primary);
 }
 
 .ermis-modal-add-btn {
-  background-color: var(--ermis-primary-color, #005fff);
+  background-color: var(--ermis-accent);
   color: #ffffff;
   border: none;
   border-radius: 6px;
@@ -113,7 +96,7 @@
 }
 
 .ermis-modal-add-btn:hover:not(:disabled) {
-  background-color: var(--ermis-primary-hover, #004ecc);
+  background-color: var(--ermis-accent-hover);
 }
 
 .ermis-modal-add-btn:disabled {