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

package/src/components/ErmisCallProvider.tsx

@@ -36,6 +36,9 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isRemoteMicMuted, setIsRemoteMicMuted] = useState(false);
   const [isRemoteVideoMuted, setIsRemoteVideoMuted] = useState(false);
+  const [isAccepting, setIsAccepting] = useState(false);
+  const [isRejecting, setIsRejecting] = useState(false);
+  const [isEnding, setIsEnding] = useState(false);
 
   // Call duration timer (C7 — exposed via context)
   const [callDuration, setCallDuration] = useState(0);
@@ -59,9 +62,15 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
   useEffect(() => {
     if (callStatus === CallStatus.CONNECTED) {
       startTimer();
+      setIsAccepting(false);
     } else {
       stopTimer();
     }
+    if (!callStatus) {
+      setIsAccepting(false);
+      setIsRejecting(false);
+      setIsEnding(false);
+    }
     return () => stopTimer();
   }, [callStatus, startTimer, stopTimer]);
 
@@ -92,12 +101,25 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
     node.onDeviceChange = (audio, video) => {
       setAudioDevices(audio);
       setVideoDevices(video);
+      const selected = node.getSelectedDevices();
+      if (selected.audioDevice) setSelectedAudioDeviceId(selected.audioDevice.deviceId);
+      else if (audio.length > 0) setSelectedAudioDeviceId(audio[0].deviceId);
+      
+      if (selected.videoDevice) setSelectedVideoDeviceId(selected.videoDevice.deviceId);
+      else if (video.length > 0) setSelectedVideoDeviceId(video[0].deviceId);
     };
+
     node.onScreenShareChange = (isSharing: boolean) => setIsScreenSharing(isSharing);
 
     node.getDevices().then(({ audioDevices: a, videoDevices: v }) => {
       setAudioDevices(a);
       setVideoDevices(v);
+      const selected = node.getSelectedDevices();
+      if (selected.audioDevice) setSelectedAudioDeviceId(selected.audioDevice.deviceId);
+      else if (a.length > 0) setSelectedAudioDeviceId(a[0].deviceId);
+      
+      if (selected.videoDevice) setSelectedVideoDeviceId(selected.videoDevice.deviceId);
+      else if (v.length > 0) setSelectedVideoDeviceId(v[0].deviceId);
     });
 
     node.onCallStatus = (status: string | null) => {
@@ -152,35 +174,56 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
     if (!callNode) return;
     setCallType(type);
     setIsIncoming(false);
-    setCallStatus(CallStatus.RINGING);
+    
+    // Tận dụng Local Cache: Phân giải thông tin đồng bộ ngay trước khi bật modal
+    callNode.prefillUserInfo(cid);
+    setCallerInfo(callNode.callerInfo);
+    setReceiverInfo(callNode.receiverInfo);
+
+    setCallStatus(CallStatus.PREPARING);
     await callNode.createCall(type, cid);
     // C1: Lifecycle callback — call started
     onCallStart?.(type, cid);
   }, [callNode, onCallStart]);
 
   const acceptCall = useCallback(async () => {
-    if (callNode) await callNode.acceptCall();
-    // C1: Lifecycle callback — call accepted
-    onCallAccepted?.();
+    if (!callNode) return;
+    setIsAccepting(true);
+    try {
+      await callNode.acceptCall();
+      onCallAccepted?.();
+    } catch (e) {
+      setIsAccepting(false);
+    }
   }, [callNode, onCallAccepted]);
 
   const rejectCall = useCallback(async () => {
-    if (callNode) await callNode.rejectCall();
-    setCallStatus('');
-    setIsIncoming(false);
-    // C1: Lifecycle callback — call rejected
-    onCallRejected?.();
+    if (!callNode) return;
+    setIsRejecting(true);
+    try {
+      await callNode.rejectCall();
+      setCallStatus('');
+      setIsIncoming(false);
+      onCallRejected?.();
+    } finally {
+      setIsRejecting(false);
+    }
   }, [callNode, onCallRejected]);
 
   const endCall = useCallback(async () => {
-    if (callNode) await callNode.endCall();
-    // C1: Lifecycle callback — call ended (capture duration before reset)
-    const duration = callDuration;
-    setCallStatus('');
-    setIsIncoming(false);
-    setLocalStream(null);
-    setRemoteStream(null);
-    onCallEnd?.(duration);
+    if (!callNode) return;
+    setIsEnding(true);
+    try {
+      await callNode.endCall();
+      const duration = callDuration;
+      setCallStatus('');
+      setIsIncoming(false);
+      setLocalStream(null);
+      setRemoteStream(null);
+      onCallEnd?.(duration);
+    } finally {
+      setIsEnding(false);
+    }
   }, [callNode, callDuration, onCallEnd]);
 
   const toggleScreenShare = useCallback(async () => {
@@ -205,6 +248,14 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
   }, [callNode]);
 
   const clearError = useCallback(() => setErrorMessage(null), []);
+  const resetCall = useCallback(() => {
+    if (callNode) callNode.destroy();
+    setCallStatus('');
+    setErrorMessage(null);
+    setIsIncoming(false);
+    setCallDuration(0);
+    setCallType('audio');
+  }, [callNode]);
 
   const upgradeCall = useCallback(async () => {
     if (!callNode) return;
@@ -267,6 +318,10 @@ export const ErmisCallProvider: React.FC<ErmisCallProviderProps> = ({
     isRemoteVideoMuted,
     upgradeCall,
     callDuration,
+    isAccepting,
+    isRejecting,
+    isEnding,
+    resetCall,
   };
 
   return (

package/src/components/ErmisCallUI.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useCallContext } from '../hooks/useCallContext';
-import { Modal } from './Modal';
+import { Modal as DefaultModal } from './Modal';
 import { Avatar } from './Avatar';
+import { useChatComponents } from '../context/ChatComponentsContext';
 import { CallStatus } from '@ermis-network/ermis-chat-sdk';
 import type { ErmisCallUIProps } from '../types';
 
@@ -82,8 +83,14 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
     isRemoteMicMuted,
     upgradeCall,
     callDuration,
+    isAccepting,
+    isRejecting,
+    isEnding,
   } = useCallContext();
 
+  const { ModalComponent } = useChatComponents();
+  const Modal = ModalComponent || DefaultModal;
+
   const localVideoRef = useRef<HTMLVideoElement>(null);
   const remoteVideoRef = useRef<HTMLVideoElement>(null);
   const remoteAudioRef = useRef<HTMLAudioElement>(null);
@@ -259,6 +266,7 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
           isVideoMuted={isVideoMuted}
           isScreenSharing={isScreenSharing}
           isFullscreen={isFullscreen}
+          isEnding={isEnding}
           audioDevices={audioDevices}
           videoDevices={videoDevices}
           selectedAudioDeviceId={selectedAudioDeviceId}
@@ -341,15 +349,17 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
         )}
 
         {/* Fullscreen */}
-        <div className="ermis-call-ui__action-group">
-          <button
-            onClick={toggleFullscreen}
-            className="ermis-call-ui__control-btn"
-            data-tooltip={isFullscreen ? exitFullscreenTitle : fullscreenTitle}
-          >
-            {isFullscreen ? <FinalExitFullscreenIcon /> : <FinalFullscreenIcon />}
-          </button>
-        </div>
+        {callType === 'video' && (
+          <div className="ermis-call-ui__action-group">
+            <button
+              onClick={toggleFullscreen}
+              className="ermis-call-ui__control-btn"
+              data-tooltip={isFullscreen ? exitFullscreenTitle : fullscreenTitle}
+            >
+              {isFullscreen ? <FinalExitFullscreenIcon /> : <FinalFullscreenIcon />}
+            </button>
+          </div>
+        )}
 
         {/* Separator before end call */}
         <div className="ermis-call-ui__controls-separator" />
@@ -357,10 +367,11 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
         {/* End Call */}
         <button
           onClick={endCall}
+          disabled={isEnding}
           className="ermis-call-ui__control-btn ermis-call-ui__control-btn--danger"
           data-tooltip={endCallLabel}
         >
-          <FinalPhoneIcon />
+          {isEnding ? <div className="ermis-call-ui__spinner" /> : <FinalPhoneIcon />}
         </button>
       </div>
     );
@@ -388,6 +399,9 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
           endCallLabel={endCallLabel}
           audioCallBadgeLabel={audioCallBadgeLabel}
           videoCallBadgeLabel={videoCallBadgeLabel}
+          isAccepting={isAccepting}
+          isRejecting={isRejecting}
+          isEnding={isEnding}
         />
       );
     }
@@ -425,18 +439,24 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
               <div className="ermis-call-ui__ringing-action">
                 <button
                   onClick={rejectCall}
+                  disabled={isRejecting}
                   className="ermis-call-ui__action-circle ermis-call-ui__action-circle--reject"
                 >
-                  <FinalPhoneIcon />
+                  {isRejecting ? <div className="ermis-call-ui__spinner" /> : <FinalPhoneIcon />}
                 </button>
                 <span className="ermis-call-ui__action-label">{rejectCallLabel}</span>
               </div>
               <div className="ermis-call-ui__ringing-action">
                 <button
                   onClick={acceptCall}
+                  disabled={isAccepting}
                   className="ermis-call-ui__action-circle ermis-call-ui__action-circle--accept"
                 >
-                  {callType === 'video' ? <FinalVideoIcon /> : <FinalPhoneIcon />}
+                  {isAccepting ? (
+                    <div className="ermis-call-ui__spinner" />
+                  ) : (
+                    callType === 'video' ? <FinalVideoIcon /> : <FinalPhoneIcon />
+                  )}
                 </button>
                 <span className="ermis-call-ui__action-label">{acceptCallLabel}</span>
               </div>
@@ -445,9 +465,10 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
             <div className="ermis-call-ui__ringing-action">
               <button
                 onClick={endCall}
+                disabled={isEnding}
                 className="ermis-call-ui__action-circle ermis-call-ui__action-circle--reject"
               >
-                <FinalPhoneIcon />
+                {isEnding ? <div className="ermis-call-ui__spinner" /> : <FinalPhoneIcon />}
               </button>
               <span className="ermis-call-ui__action-label">{endCallLabel}</span>
             </div>
@@ -492,12 +513,14 @@ export const ErmisCallUI: React.FC<ErmisCallUIProps> = React.memo(({
                 className="ermis-call-ui__video-local-stream"
               />
             </div>
-            {/* Remote mic muted indicator */}
-            {isRemoteMicMuted && (
-              <div className="ermis-call-ui__remote-muted-badge">
-                <FinalMicOffIcon />
-              </div>
-            )}
+            {/* Call status bar: mic-muted indicator + duration timer */}
+            <div className="ermis-call-ui__video-timer">
+              {isRemoteMicMuted && (
+                <span className="ermis-call-ui__video-timer-mic"><FinalMicOffIcon /></span>
+              )}
+              <span className="ermis-call-ui__active-status-dot" />
+              <span>{formatDuration(callDuration)}</span>
+            </div>
             {/* Glassmorphism controls overlay */}
             <div className="ermis-call-ui__video-controls-overlay">
               {renderControls()}

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

@@ -0,0 +1,243 @@
+import React, { useCallback, useMemo } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from '../hooks/useChatClient';
+import { SystemMessageTranslations, SignalMessageTranslations } from '@ermis-network/ermis-chat-sdk';
+import { useTopicGroupUpdates } from '../hooks/useTopicGroupUpdates';
+import { useChannelRowUpdates } from '../hooks/useChannelRowUpdates';
+import { DefaultChannelActions, computeDefaultActions } from './ChannelActions';
+import type { AvatarProps, ChannelActionsProps, ChannelActionLabels, ChannelActionIcons, TopicPillProps } from '../types';
+
+/* ----------------------------------------------------------
+   Default TopicPill – renders a single topic preview
+   ---------------------------------------------------------- */
+const DefaultTopicPill: React.FC<TopicPillProps> = React.memo(({ topic }) => {
+  const image = topic.data?.image as string | undefined;
+
+  let emoji = '💬';
+  if (image && typeof image === 'string' && image.startsWith('emoji://')) {
+    emoji = image.replace('emoji://', '');
+  }
+
+  const name = topic.data?.name || '';
+
+  return (
+    <span className="ermis-channel-list__topic-pill">
+      <span className="ermis-channel-list__topic-pill-avatar">{emoji}</span>
+      {name && <span className="ermis-channel-list__topic-pill-name">{name}</span>}
+    </span>
+  );
+});
+DefaultTopicPill.displayName = 'DefaultTopicPill';
+
+/* ----------------------------------------------------------
+   FlatTopicGroupItem Props
+   ---------------------------------------------------------- */
+type FlatTopicGroupItemProps = {
+  channel: Channel;
+  isActive: boolean;
+  onDrillDown?: (channel: Channel) => void;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+  maxVisibleTopics?: number;
+  moreTopicsLabel?: string;
+  /** Label for the general pill (default: 'general') */
+  generalTopicLabel?: string;
+  TopicPillComponent?: React.ComponentType<TopicPillProps>;
+  PinnedIconComponent?: React.ComponentType;
+  ChannelActionsComponent?: React.ComponentType<ChannelActionsProps>;
+  onAddTopic?: (channel: Channel) => void;
+  onTruncateChannel?: (channel: Channel) => void;
+  hiddenActions?: string[];
+  actionLabels?: ChannelActionLabels;
+  actionIcons?: ChannelActionIcons;
+  deletedMessageLabel?: React.ReactNode;
+  stickerMessageLabel?: React.ReactNode;
+  photoMessageLabel?: React.ReactNode;
+  videoMessageLabel?: React.ReactNode;
+  voiceRecordingMessageLabel?: React.ReactNode;
+  fileMessageLabel?: React.ReactNode;
+  systemMessageTranslations?: SystemMessageTranslations;
+  signalMessageTranslations?: SignalMessageTranslations;
+  showTopicPills?: boolean;
+};
+
+/* ----------------------------------------------------------
+   FlatTopicGroupItem – flat channel item with topic preview
+   Shows like a normal ChannelItem (name, last msg, timestamp,
+   unread badge) plus a row of topic pills.
+   ---------------------------------------------------------- */
+export const FlatTopicGroupItem: React.FC<FlatTopicGroupItemProps> = React.memo(({
+  channel,
+  isActive,
+  onDrillDown,
+  AvatarComponent,
+  maxVisibleTopics = 3,
+  moreTopicsLabel = '...',
+  generalTopicLabel = 'general',
+  TopicPillComponent,
+  PinnedIconComponent,
+  ChannelActionsComponent,
+  onAddTopic,
+  hiddenActions,
+  actionLabels,
+  actionIcons,
+  deletedMessageLabel,
+  stickerMessageLabel,
+  photoMessageLabel,
+  videoMessageLabel,
+  voiceRecordingMessageLabel,
+  fileMessageLabel,
+  systemMessageTranslations,
+  signalMessageTranslations,
+  showTopicPills = false,
+}) => {
+  const { client } = useChatClient();
+  const currentUserId = client.userID;
+
+  // Realtime updates for parent channel row (pin/unpin, channel.updated)
+  const { updateCount } = useChannelRowUpdates(channel, currentUserId);
+
+  // Realtime topic group data (sorted topics, aggregated unread, latest message)
+  const { topics, aggregatedUnreadCount, hasUnread, latestMessagePreview } = useTopicGroupUpdates(
+    channel,
+    currentUserId,
+    {
+      deletedMessageLabel,
+      stickerMessageLabel,
+      photoMessageLabel,
+      videoMessageLabel,
+      voiceRecordingMessageLabel,
+      fileMessageLabel,
+      systemMessageTranslations,
+      signalMessageTranslations,
+    }
+  );
+
+  const name = channel.data?.name || channel.cid;
+  const image = channel.data?.image as string | undefined;
+  const isPinned = channel.data?.is_pinned === true;
+  // 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 || '';
+  const lastMessageUser = latestMessagePreview?.user || '';
+  const lastMessageTimestamp = latestMessagePreview?.timestamp;
+  const lastMessageSourceName = latestMessagePreview?.sourceName || null;
+
+  const timestampText = useMemo(() => {
+    if (!lastMessageTimestamp) return null;
+    const d = new Date(lastMessageTimestamp);
+    if (isNaN(d.getTime())) return null;
+    const today = new Date();
+    const isToday = d.toDateString() === today.toDateString();
+    return isToday
+      ? d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+      : d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  }, [lastMessageTimestamp]);
+
+  // Visible topic pills: general pill + sub-topic pills (capped at maxVisibleTopics)
+  const visibleTopics = useMemo(
+    () => topics.slice(0, Math.max(0, maxVisibleTopics - 1)),
+    [topics, maxVisibleTopics],
+  );
+  const hasOverflow = (topics.length + 1) > maxVisibleTopics;  // +1 for general pill
+
+  // Actions menu (pin, create topic, delete, leave)
+  const defaultActions = useMemo(
+    () => computeDefaultActions(channel, currentUserId, { onAddTopic, actionLabels, actionIcons }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [channel, currentUserId, updateCount, onAddTopic, actionLabels, actionIcons],
+  );
+  const filteredActions = useMemo(() => {
+    if (!hiddenActions || hiddenActions.length === 0) return defaultActions;
+    return defaultActions.filter((a) => !hiddenActions.includes(a.id));
+  }, [defaultActions, hiddenActions]);
+  const ActionsComponent = ChannelActionsComponent || DefaultChannelActions;
+
+  const Pill = TopicPillComponent || DefaultTopicPill;
+
+  const handleClick = useCallback(() => {
+    if (onDrillDown) onDrillDown(channel);
+  }, [channel, onDrillDown]);
+
+  const itemClass = [
+    'ermis-channel-list__item',
+    'ermis-channel-list__item--topic-group',
+    isActive ? 'ermis-channel-list__item--active' : '',
+    showUnread ? 'ermis-channel-list__item--unread' : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={itemClass} onClick={handleClick}>
+      <div className="ermis-channel-list__item-avatar-wrapper">
+        <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 */}
+        <div className="ermis-channel-list__item-top-row">
+          <div className="ermis-channel-list__item-name">{name}</div>
+          {isPinned && PinnedIconComponent && (
+            <span className="ermis-channel-list__pinned-icon" title="Pinned">
+              <PinnedIconComponent />
+            </span>
+          )}
+          {timestampText && <div className="ermis-channel-list__item-timestamp">{timestampText}</div>}
+        </div>
+        {/* Row 2: last message + unread badge */}
+        <div className="ermis-channel-list__item-bottom-row">
+          {lastMessageText && (
+            <div className="ermis-channel-list__item-last-message">
+              {lastMessageSourceName && (
+                <span className="ermis-channel-list__item-last-message-source">
+                  #{lastMessageSourceName} · {' '}
+                </span>
+              )}
+              {lastMessageUser && (
+                <span className="ermis-channel-list__item-last-message-user">
+                  {lastMessageUser}:{' '}
+                </span>
+              )}
+              <span>{lastMessageText}</span>
+            </div>
+          )}
+          <div className="ermis-channel-list__item-badges">
+            {showUnread && aggregatedUnreadCount > 0 && (
+              <span className="ermis-channel-list__unread-badge">
+                {aggregatedUnreadCount > 99 ? '99+' : aggregatedUnreadCount}
+              </span>
+            )}
+          </div>
+        </div>
+        {/* Row 3: topic pills — always visible (at least general pill) */}
+        <div className="ermis-channel-list__item-topics-row">
+          {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">
+        <ActionsComponent channel={channel} actions={filteredActions} onClose={() => { }} />
+      </div>
+    </div>
+  );
+});
+FlatTopicGroupItem.displayName = 'FlatTopicGroupItem';