+ {/* Room Header */}
+
+
+
+ {/* Messages Body */}
+
+ ) : (
+
+ {activeChat.isGroup ?
+
+
+ {activeChat.name || activeChat.id.split('@')[0]}
+ {activeChat.id} +
+ {loadingMessages ? (
+
+
+ {/* Attachment Preview Banner */}
+ {attachment && (
+
+
+ ) : messages.length === 0 ? (
+
+
+ ) : (
+ messages.map(msg => {
+ const isMe = msg.direction === 'outgoing';
+ const formattedTime = formatTime(msg.timestamp || Math.floor(new Date(msg.createdAt).getTime() / 1000));
+
+ // Highlight media messages differently if desired
+ const isMediaMessage = msg.type !== 'text';
+
+ const mediaInfo = msg.metadata?.media || (msg as any).media;
+
+ const renderMedia = () => {
+ if (msg.type === 'revoked') return null;
+ if (!mediaInfo) return null;
+ const mediaSrc = getMediaSrc(mediaInfo);
+ if (!mediaSrc) return null;
+
+ switch (msg.type) {
+ case 'image':
+ case 'sticker':
+ return (
+
+ 
+
+ );
+ case 'video':
+ return (
+
+
+
+ );
+ case 'audio':
+ case 'voice':
+ case 'ptt':
+ return (
+
+
+
+ );
+ case 'document':
+ default:
+ return (
+
+ );
+ }
+ };
+
+ const reactions = msg.metadata?.reactions || {};
+ const hasReactions = Object.keys(reactions).length > 0;
+
+ return (
+
+
+ );
+ })
+ )}
+
+
+
+
+ {/* Quoted message display */}
+ {msg.metadata?.quotedMessage && (
+
+
+ {/* Message actions menu (hover) */}
+ {msg.type !== 'revoked' && (
+
+
+ )}
+
+ {renderMedia()}
+
+ {msg.body && (!mediaInfo || msg.body !== mediaInfo.filename) && (
+
+ {msg.metadata.quotedMessage.body}
+
+ {msg.body}
+ )}
+
+
+ {formattedTime}
+ {isMe && (
+
+ {msg.status === 'pending' && '🕒'}
+ {msg.status === 'sent' && '✓'}
+ {msg.status === 'delivered' && '✓✓'}
+ {msg.status === 'read' && '✓✓'}
+ {msg.status === 'failed' && '⚠️'}
+
+ )}
+
+
+ {/* Reactions display */}
+ {hasReactions && (
+
+ {Object.values(reactions).slice(0, 3).map((emoji, idx) => (
+ {emoji as string}
+ ))}
+ {Object.keys(reactions).length > 1 && (
+ {Object.keys(reactions).length}
+ )}
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+ {isMe && msg.status !== 'pending' && (
+
+ )}
+
+ {['👍', '❤️', '😂', '😮', '😢', '🙏'].map(emoji => (
+
+ ))}
+
+
+ {previewUrl ? (
+ 
+ ) : (
+
+ )}
+
+ {/* Popular Emojis panel */}
+ {showEmojiPicker && (
+ 📎
+ )}
+
+ {attachment.filename}
+ ({(attachment.file.size / 1024).toFixed(1)} KB)
+
+
+
+
+ )}
+
+ {/* Replying preview banner */}
+ {replyingTo && (
+
+ {popularEmojis.map(emoji => (
+
+ ))}
+
+
+
+ )}
+
+ {/* Message Input bar */}
+
+
+
+
+
+ Membalas ke {replyingTo.direction === 'outgoing' ? 'Anda' : (activeChat.name || activeChat.id.split('@')[0])}
+
+
+ {replyingTo.type !== 'text' ? `[${replyingTo.type}]` : replyingTo.body}
+
+
+
+ )}
+ Mulai Mengirim Pesan
+Pilih salah satu obrolan aktif dari sidebar kiri untuk mulai membaca dan mengirim pesan WhatsApp.
+