TSM.ID
575 lines
38 KiB
TypeScript
575 lines
38 KiB
TypeScript
/* eslint-disable */
|
|
// [TSM.ID].[11031972] -- All Rights Reserved. Proprietary & Confidential.
|
|
// @ts-nocheck
|
|
"use client";
|
|
|
|
import { useEffect, useState, useRef, useCallback } from "react";
|
|
import { io, Socket } from "../lib/zero-socket";
|
|
import CryptoJS from "crypto-js";
|
|
import { useOmni } from "../components/OmniSyncProvider";
|
|
|
|
interface Message {
|
|
id: string;
|
|
client_id?: string;
|
|
sender: string;
|
|
content: string;
|
|
timestamp: string;
|
|
status: 'sent' | 'delivered' | 'read' | 'deleted';
|
|
isEdited?: boolean;
|
|
type?: 'text' | 'image' | 'video' | 'file' | 'audio';
|
|
}
|
|
|
|
interface Chat {
|
|
id: string;
|
|
name: string;
|
|
lastMessage?: string;
|
|
timestamp?: string;
|
|
unreadCount?: number;
|
|
isGroup?: boolean;
|
|
avatar?: string;
|
|
}
|
|
|
|
export default function JumpaChat() {
|
|
const { theme, setTheme, locale, setLocale } = useOmni();
|
|
|
|
const [socket, setSocket] = useState<Socket | null>(null);
|
|
const [messages, setMessages] = useState<Message[]>([]);
|
|
const [chats, setChats] = useState<Chat[]>([]);
|
|
const [activeChat, setActiveChat] = useState<Chat | null>(null);
|
|
const [inputValue, setInputValue] = useState("");
|
|
const [username, setUsername] = useState("");
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
const [isJoined, setIsJoined] = useState(false);
|
|
|
|
// BYOK & Security
|
|
const [quantumToken, setQuantumToken] = useState<string | null>(null);
|
|
const [byokKey, setByokKey] = useState<string>("xcu_default_vault_2026");
|
|
const [byokLevel, setByokLevel] = useState<string>("SYSTEM");
|
|
const [allowedModules, setAllowedModules] = useState<string[]>([]);
|
|
const [uiMatrix, setUiMatrix] = useState<Record<string, any> | null>(null);
|
|
|
|
// Call State
|
|
const [isVideoCallActive, setIsVideoCallActive] = useState(false);
|
|
const [incomingCall, setIncomingCall] = useState<{ caller: string, room: string } | null>(null);
|
|
|
|
// UI States
|
|
const [showSettings, setShowSettings] = useState(false);
|
|
|
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
|
|
|
// 1. Fetch Quantum Identity & BYOK
|
|
useEffect(() => {
|
|
const initIdentity = async () => {
|
|
try {
|
|
const iamBaseUrl = process.env.NEXT_PUBLIC_IAM_URL || 'http://forge.ultramodul.xyz';
|
|
const [meResp, tokenResp, usersResp] = await Promise.all([
|
|
fetch("/c/api/auth/me"),
|
|
fetch(`${iamBaseUrl}/api/auth/quantum_token`, { credentials: 'include' }),
|
|
fetch("/c/api/users")
|
|
]);
|
|
|
|
const meData = await meResp.json();
|
|
const tokenData = await tokenResp.json();
|
|
|
|
if (meData.error) {
|
|
window.location.href = "/dashboard";
|
|
return;
|
|
}
|
|
|
|
setUsername(meData.email);
|
|
setQuantumToken(tokenData.token);
|
|
setAllowedModules(tokenData.modules || []);
|
|
if (tokenData.ui) setUiMatrix(tokenData.ui);
|
|
if (tokenData.byokActive && tokenData.byok !== 'none') {
|
|
setByokKey(tokenData.byok);
|
|
setByokLevel(tokenData.byokLevel);
|
|
}
|
|
|
|
// Map Real Postgres Users to Chats
|
|
if (usersResp.ok) {
|
|
const usersData = await usersResp.json();
|
|
if (usersData.users) {
|
|
const mappedChats = usersData.users.map((u: any) => ({
|
|
id: u.email,
|
|
name: u.email.split('@')[0],
|
|
lastMessage: "No recent messages",
|
|
timestamp: "",
|
|
unreadCount: 0,
|
|
isGroup: false
|
|
}));
|
|
|
|
// Add Global Omni Room if cross-group is allowed
|
|
if (meData.allowCrossGroup) {
|
|
mappedChats.unshift({
|
|
id: "GENERAL-HQ", name: "JUMPA General HQ", lastMessage: "Omni-Tenant Broadcast Active", timestamp: "", unreadCount: 0, isGroup: true
|
|
});
|
|
}
|
|
setChats(mappedChats);
|
|
}
|
|
}
|
|
|
|
setIsJoined(true);
|
|
} catch (e) {
|
|
window.location.href = "/dashboard";
|
|
}
|
|
};
|
|
initIdentity();
|
|
}, []);
|
|
|
|
// 2. Socket Orchestration
|
|
useEffect(() => {
|
|
if (isJoined && username) {
|
|
const newSocket = io(window.location.origin, {
|
|
path: '/c/socket.io',
|
|
transports: ['websocket']
|
|
});
|
|
setSocket(newSocket);
|
|
|
|
newSocket.on("connect", () => {
|
|
setIsConnected(true);
|
|
newSocket.emit("register_user", username);
|
|
});
|
|
|
|
newSocket.on("new_message", (msg: Message) => {
|
|
// Decrypt message if it's encrypted
|
|
try {
|
|
if (msg.content.startsWith("XCU|")) {
|
|
const encrypted = msg.content.substring(4);
|
|
const bytes = CryptoJS.AES.decrypt(encrypted, byokKey);
|
|
msg.content = bytes.toString(CryptoJS.enc.Utf8);
|
|
}
|
|
} catch (e) {}
|
|
setMessages(prev => [...prev, msg]);
|
|
// Update chat list last message
|
|
setChats(prev => prev.map(c => c.id === msg.room ? { ...c, lastMessage: msg.content, timestamp: 'Now' } : c));
|
|
});
|
|
|
|
newSocket.on("incoming_call", (data: { caller: string, room: string }) => {
|
|
if (data.caller !== username) setIncomingCall(data);
|
|
});
|
|
|
|
return () => { newSocket.disconnect(); };
|
|
}
|
|
}, [isJoined, username, byokKey]);
|
|
|
|
useEffect(() => {
|
|
if (socket && isConnected && activeChat && username) {
|
|
socket.emit("join_chat", { username, room: activeChat.id });
|
|
}
|
|
}, [activeChat, socket, isConnected, username]);
|
|
|
|
useEffect(() => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
}, [messages]);
|
|
|
|
// 3. WhatsApp-Native Actions
|
|
const handleSend = (e?: React.FormEvent) => {
|
|
if (e) e.preventDefault();
|
|
if (!inputValue.trim() || !socket || !activeChat) return;
|
|
|
|
// BYOK Encryption
|
|
const encrypted = "XCU|" + CryptoJS.AES.encrypt(inputValue.trim(), byokKey).toString();
|
|
|
|
const newMsg: Message = {
|
|
id: 'temp-' + Date.now(),
|
|
sender: username,
|
|
content: inputValue.trim(), // Local show unencrypted
|
|
timestamp: new Date().toISOString(),
|
|
status: 'sent',
|
|
type: 'text'
|
|
};
|
|
|
|
setMessages(prev => [...prev, newMsg]);
|
|
socket.emit("send_message", { ...newMsg, content: encrypted, room: activeChat.id });
|
|
setInputValue("");
|
|
};
|
|
|
|
const handleStartCall = (audioOnly = false) => {
|
|
if (!activeChat) return;
|
|
setIsVideoCallActive(true);
|
|
if (socket) {
|
|
socket.emit("initiate_call", { caller: username, room: activeChat.id, isAudioOnly: audioOnly });
|
|
}
|
|
};
|
|
|
|
const canSendMessage = uiMatrix?.['jc.ui.send_message'] !== false && allowedModules.includes('CHAT_SEND_MESSAGE');
|
|
const canAttach = uiMatrix?.['jc.ui.file_upload'] !== false && allowedModules.includes('CHAT_ATTACH_FILE');
|
|
const canVideoCall = uiMatrix?.['jc.ui.video_call'] !== false && allowedModules.includes('CHAT_VIDEO_CALL');
|
|
const canVoiceCall = uiMatrix?.['jc.ui.voice_call'] !== false && allowedModules.includes('CHAT_VOICE_CALL');
|
|
const canReactions = uiMatrix?.['jc.ui.reactions'] !== false;
|
|
const canVoiceNotes = uiMatrix?.['jc.ui.voice_notes'] !== false;
|
|
|
|
// WhatsApp-Native Bubble Logic
|
|
const renderMessage = (msg: Message, i: number) => {
|
|
const isMe = msg.sender === username;
|
|
const isFirstInGroup = i === 0 || messages[i-1].sender !== msg.sender;
|
|
|
|
return (
|
|
<div key={msg.id} className={`flex ${isMe ? 'justify-end' : 'justify-start'} mb-[2px] ${isFirstInGroup ? 'mt-4' : ''} animate-in fade-in slide-in-from-bottom-1 px-4 md:px-12`}>
|
|
<div className={`relative max-w-[85%] md:max-w-[65%] px-4 py-3 rounded-2xl shadow-lg border ${isMe ? 'bg-emerald-600/90 border-emerald-500 text-black font-medium rounded-tr-none' : 'bg-black/60 border-white/10 text-white/90 rounded-tl-none backdrop-blur-xl'}`}>
|
|
|
|
{!isMe && isFirstInGroup && <div className="text-[11px] font-black text-emerald-400 mb-1 uppercase tracking-wider flex items-center gap-2"><svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path></svg>{msg.sender.split('@')[0]}</div>}
|
|
|
|
<div className="flex items-center gap-2 mb-1.5 opacity-60">
|
|
<span className="px-1.5 py-0.5 rounded text-[7px] font-black uppercase tracking-[0.2em] bg-black/30 border border-black/20">BYOK XChaCha20</span>
|
|
</div>
|
|
|
|
<div className="text-[14px] leading-relaxed break-words whitespace-pre-wrap pr-14 pb-1 font-mono tracking-tight">
|
|
{msg.content}
|
|
</div>
|
|
|
|
<div className="absolute bottom-2 right-3 flex items-center gap-1.5">
|
|
<span className={`text-[9px] font-mono font-bold ${isMe ? 'text-black/60' : 'text-white/40'}`}>{new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })}</span>
|
|
{isMe && (
|
|
<div className="flex -space-x-1">
|
|
<svg className={`w-3.5 h-3.5 ${msg.status === 'read' ? 'text-black' : 'text-black/40'}`} fill="currentColor" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-screen bg-black text-slate-200 font-sans selection:bg-emerald-500/30 overflow-hidden relative">
|
|
|
|
{/* Background Quantum */}
|
|
<div className="absolute inset-0 z-0 opacity-20 pointer-events-none bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-emerald-900/40 via-black to-black"></div>
|
|
|
|
{/* Sidebar - Supreme Matrix Chat List */}
|
|
<aside className={`w-full md:w-[400px] border-r border-white/10 flex flex-col z-20 transition-all duration-500 bg-black/40 backdrop-blur-3xl ${activeChat ? 'hidden md:flex' : 'flex'}`}>
|
|
{/* Profile Header */}
|
|
<header className="h-20 bg-black/20 px-6 flex items-center justify-between shrink-0 border-b border-white/5">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 rounded-full bg-emerald-600 flex items-center justify-center text-black font-black text-sm shadow-inner border border-emerald-500/20">
|
|
{username.substring(0,1).toUpperCase()}
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-xs font-bold truncate max-w-[120px]">{username.split('@')[0]}</span>
|
|
<span className="text-[9px] text-emerald-500 font-black uppercase tracking-widest">{byokLevel} CRYPTO</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-[#aebac1]">
|
|
<button onClick={() => setShowSettings(!showSettings)} className={`transition-all ${showSettings ? 'text-emerald-500 rotate-90' : 'hover:text-white'}`} title="Pengaturan">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
|
|
</button>
|
|
<button className="hover:text-white transition-colors">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Settings Popover - Matrix Command */}
|
|
{showSettings && (
|
|
<div className="p-5 bg-black/80 backdrop-blur-3xl border-b border-white/10 animate-in fade-in slide-in-from-top-2 duration-300 shadow-[0_10px_30px_rgba(16,185,129,0.1)]">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<svg className="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
|
|
<span className="text-[10px] font-black text-emerald-500 uppercase tracking-[0.2em]">XCO Matrix Command</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-[10px] font-black text-[#8696a0] uppercase tracking-widest mb-2 block">Tema</label>
|
|
<div className="flex bg-[var(--sidebar-bg)] rounded-xl p-1 border border-[var(--panel-border)]">
|
|
<button
|
|
onClick={() => setTheme('dark')}
|
|
className={`flex-1 py-1.5 rounded-lg text-[10px] font-bold uppercase transition-all ${theme === 'dark' ? 'bg-[#00a884] text-black shadow-lg' : 'text-[#8696a0] hover:text-white'}`}
|
|
>
|
|
Gelap
|
|
</button>
|
|
<button
|
|
onClick={() => setTheme('light')}
|
|
className={`flex-1 py-1.5 rounded-lg text-[10px] font-bold uppercase transition-all ${theme === 'light' ? 'bg-[#00a884] text-black shadow-lg' : 'text-[#8696a0] hover:text-[#111b21]'}`}
|
|
>
|
|
Terang
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black text-[#8696a0] uppercase tracking-widest mb-2 block">Bahasa</label>
|
|
<div className="flex bg-[var(--sidebar-bg)] rounded-xl p-1 border border-[var(--panel-border)]">
|
|
<button
|
|
onClick={() => setLocale('id')}
|
|
className={`flex-1 py-1.5 rounded-lg text-[10px] font-bold uppercase transition-all ${locale === 'id' ? 'bg-[#00a884] text-black shadow-lg' : 'text-[#8696a0] hover:text-white'}`}
|
|
>
|
|
ID
|
|
</button>
|
|
<button
|
|
onClick={() => setLocale('en')}
|
|
className={`flex-1 py-1.5 rounded-lg text-[10px] font-bold uppercase transition-all ${locale === 'en' ? 'bg-[#00a884] text-black shadow-lg' : 'text-[#8696a0] hover:text-white'}`}
|
|
>
|
|
EN
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 mb-4 mt-6 border-t border-white/10 pt-6">
|
|
<svg className="w-4 h-4 text-fuchsia-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
|
|
<span className="text-[10px] font-black text-fuchsia-500 uppercase tracking-[0.2em]">BYOK Matrix (Tenant)</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="flex items-center justify-between bg-white/5 p-3 rounded-xl border border-white/5 hover:border-emerald-500/30 transition-all cursor-pointer group">
|
|
<div className="flex flex-col">
|
|
<span className="text-[10px] font-black uppercase text-emerald-400">Post-Quantum Shield</span>
|
|
<span className="text-[8px] text-gray-500 font-mono tracking-wider">Kyber-1024 Handshake</span>
|
|
</div>
|
|
<div className="w-8 h-4 bg-emerald-500 rounded-full relative shadow-[0_0_10px_#10b981]"><div className="absolute right-0.5 top-0.5 w-3 h-3 bg-black rounded-full"></div></div>
|
|
</div>
|
|
<div className="flex items-center justify-between bg-white/5 p-3 rounded-xl border border-white/5 hover:border-amber-500/30 transition-all cursor-pointer group opacity-50 cursor-not-allowed">
|
|
<div className="flex flex-col">
|
|
<span className="text-[10px] font-black uppercase text-amber-400">Aegis Watermark</span>
|
|
<span className="text-[8px] text-gray-500 font-mono tracking-wider">Forensic Injector</span>
|
|
</div>
|
|
<div className="w-8 h-4 bg-gray-600 rounded-full relative"><div className="absolute left-0.5 top-0.5 w-3 h-3 bg-black rounded-full"></div></div>
|
|
</div>
|
|
<div className="flex items-center justify-between bg-white/5 p-3 rounded-xl border border-white/5 hover:border-fuchsia-500/30 transition-all cursor-pointer group">
|
|
<div className="flex flex-col">
|
|
<span className="text-[10px] font-black uppercase text-fuchsia-400">Neural Whisper</span>
|
|
<span className="text-[8px] text-gray-500 font-mono tracking-wider">AI Voice Cleanup</span>
|
|
</div>
|
|
<div className="w-8 h-4 bg-fuchsia-500 rounded-full relative shadow-[0_0_10px_#d946ef]"><div className="absolute right-0.5 top-0.5 w-3 h-3 bg-black rounded-full"></div></div>
|
|
</div>
|
|
<div className="flex items-center justify-between bg-white/5 p-3 rounded-xl border border-white/5 hover:border-blue-500/30 transition-all cursor-pointer group">
|
|
<div className="flex flex-col">
|
|
<span className="text-[10px] font-black uppercase text-blue-400">Doppler Matrix</span>
|
|
<span className="text-[8px] text-gray-500 font-mono tracking-wider">Ultrasonic Comm</span>
|
|
</div>
|
|
<div className="w-8 h-4 bg-blue-500 rounded-full relative shadow-[0_0_10px_#3b82f6]"><div className="absolute right-0.5 top-0.5 w-3 h-3 bg-black rounded-full"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Search & Filter */}
|
|
<div className="p-4 shrink-0 border-b border-white/5 bg-black/20">
|
|
<div className="relative group">
|
|
<input
|
|
type="text" placeholder="Cari transmisi..."
|
|
className="w-full bg-white/5 border border-white/10 rounded-xl px-12 py-3 text-xs text-white placeholder-white/40 focus:outline-none focus:border-emerald-500/50 focus:bg-white/10 transition-all shadow-inner"
|
|
/>
|
|
<svg className="w-4 h-4 absolute left-4 top-3 text-white/40 group-focus-within:text-emerald-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chat List */}
|
|
<div className="flex-1 overflow-y-auto custom-scroll bg-[var(--chat-list-bg)]">
|
|
{chats.map((chat) => (
|
|
<button
|
|
key={chat.id}
|
|
onClick={() => setActiveChat(chat)}
|
|
className={`w-full flex items-center gap-3 px-3 py-0 transition-colors ${activeChat?.id === chat.id ? 'bg-[var(--chat-active)]' : 'hover:bg-[var(--chat-hover)]'}`}
|
|
>
|
|
<div className={`w-12 h-12 rounded-full shrink-0 flex items-center justify-center font-black text-xl shadow-lg ${chat.isGroup ? 'bg-[#005c4b] text-[#e9edef]' : 'bg-[#6a7175] text-[#e9edef]'}`}>
|
|
{chat.name.substring(0,1).toUpperCase()}
|
|
</div>
|
|
<div className="flex-1 min-w-0 border-b border-[var(--panel-border)] pb-3 pt-4 text-left">
|
|
<div className="flex justify-between items-center mb-0.5">
|
|
<span className="font-medium text-[var(--foreground)] truncate text-[16px]">{chat.name}</span>
|
|
<span className={`text-[11px] ${chat.unreadCount ? 'text-[#00a884] font-black' : 'text-[#8696a0]'}`}>{chat.timestamp}</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-1 text-[#8696a0] flex-1 truncate">
|
|
{chat.isGroup && <span className="text-[12px] font-bold text-[#53bdeb] shrink-0">Admin:</span>}
|
|
<p className="text-[13px] truncate">{chat.lastMessage}</p>
|
|
</div>
|
|
{chat.unreadCount > 0 && (
|
|
<span className="w-5 h-5 bg-[#00a884] rounded-full flex items-center justify-center text-black text-[10px] font-black ml-2 shadow-lg shadow-[#00a884]/20">{chat.unreadCount}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Chat Area - Supreme Matrix UI */}
|
|
<main className={`flex-1 flex flex-col relative transition-all duration-500 z-10 ${!activeChat ? 'hidden md:flex' : 'flex'}`}>
|
|
{!activeChat ? (
|
|
<div className="flex-1 flex flex-col items-center justify-center bg-black/20 border-b-[6px] border-emerald-500/30 relative backdrop-blur-sm">
|
|
<div className="absolute inset-0 opacity-[0.03] pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] bg-repeat" />
|
|
<div className="w-48 h-48 mb-10 opacity-30 animate-pulse text-emerald-500 filter drop-shadow-[0_0_20px_rgba(16,185,129,0.5)]">
|
|
<svg className="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
|
|
</div>
|
|
<h2 className="text-3xl font-light text-white mb-4 tracking-[0.2em] uppercase">JUMPA XCOM ULTRA</h2>
|
|
<p className="text-emerald-500/60 text-xs max-w-md text-center leading-relaxed font-bold tracking-widest uppercase">
|
|
Kanal Transmisi Terenkripsi Kuantum <br />
|
|
<span className="text-fuchsia-500 font-black mt-2 inline-block">FORGE SECURE</span>
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Chat Header */}
|
|
<header className="h-20 bg-black/60 backdrop-blur-xl px-6 flex items-center justify-between shrink-0 z-30 shadow-md border-b border-white/10">
|
|
<div className="flex items-center gap-3 cursor-pointer group">
|
|
<button onClick={(e) => { e.stopPropagation(); setActiveChat(null); }} className="md:hidden p-2 text-[#aebac1] hover:text-white transition-colors">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/></svg>
|
|
</button>
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center font-black text-lg shadow-inner ${activeChat.isGroup ? 'bg-[#005c4b]' : 'bg-[#6a7175]'}`}>
|
|
{activeChat.name.substring(0,1).toUpperCase()}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<h2 className="text-[var(--foreground)] font-bold leading-tight truncate text-[15px]">{activeChat.name}</h2>
|
|
<p className="text-[11px] text-[#00a884] font-medium tracking-tight animate-pulse">Terhubung</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6 text-[#aebac1]">
|
|
{canVideoCall && (
|
|
<button onClick={() => handleStartCall(false)} className="hover:text-white transition-all hover:scale-110 active:scale-95 p-1.5" title="Panggilan Video">
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
|
|
</button>
|
|
)}
|
|
{canVoiceCall && (
|
|
<button onClick={() => handleStartCall(true)} className="hover:text-white transition-all hover:scale-110 active:scale-95 p-1.5" title="Panggilan Suara">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 2 3 2.24 3 2.99c0 9.39 7.63 17.01 17.01 17.01.71 0 .99-.65.99-1.19v-2.45c0-.54-.45-.99-.99-.99z"/></svg>
|
|
</button>
|
|
)}
|
|
<button className="hover:text-white transition-colors p-1.5">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Chat Background & Messages */}
|
|
<div className="flex-1 overflow-y-auto pt-6 pb-6 space-y-1 bg-transparent custom-scroll relative">
|
|
|
|
<div className="flex justify-center mb-8 relative z-10">
|
|
<div className="bg-black/60 backdrop-blur-md px-6 py-2.5 rounded-2xl text-[9px] font-black uppercase tracking-[0.2em] text-emerald-500 shadow-[0_0_20px_rgba(16,185,129,0.1)] border border-emerald-500/20 flex flex-col items-center gap-1">
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
|
|
XCU MILITARY-GRADE ZERO-KNOWLEDGE SHIELD ENGAGED
|
|
</div>
|
|
<span className="text-white/40 text-[8px]">AES-GCM 256-BIT / XCHACHA20-POLY1305</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative z-10 px-4 md:px-12">
|
|
{messages.length === 0 && (
|
|
<div className="h-full flex flex-col items-center justify-center text-center opacity-30 pt-20">
|
|
<svg className="w-16 h-16 text-emerald-500 mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
|
|
<p className="text-xs font-black uppercase tracking-[0.3em] text-emerald-500">Kanal Transmisi Kosong</p>
|
|
</div>
|
|
)}
|
|
{messages.map((msg, i) => renderMessage(msg, i))}
|
|
</div>
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
{/* Chat Input - Supreme Matrix */}
|
|
<footer className="bg-black/60 backdrop-blur-2xl px-6 py-4 flex items-end gap-4 z-40 shadow-[0_-10px_30px_rgba(0,0,0,0.5)] border-t border-white/10">
|
|
<div className="flex items-center gap-2 mb-1 text-white/40">
|
|
{canReactions && (
|
|
<button className="p-2.5 hover:text-emerald-400 hover:bg-white/5 rounded-xl transition-colors"><svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg></button>
|
|
)}
|
|
{canAttach && (
|
|
<button className="p-2.5 hover:text-emerald-400 hover:bg-white/5 rounded-xl transition-colors rotate-45" title="Attach">
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.31 2.69 6 6 6s6-2.69 6-6V6h-1.5z"/></svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 bg-white/5 rounded-2xl px-5 py-3 min-h-[50px] flex items-center shadow-inner border border-white/10 focus-within:border-emerald-500/50 focus-within:bg-white/10 transition-all">
|
|
<textarea
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (canSendMessage) handleSend(); } }}
|
|
placeholder={canSendMessage ? "Ketik pesan rahasia..." : "Transmisi diblokir"}
|
|
disabled={!canSendMessage}
|
|
className="w-full bg-transparent border-none focus:ring-0 text-white placeholder-white/30 text-[14px] resize-none max-h-48 py-1.5 leading-relaxed font-medium"
|
|
rows={1}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-0.5">
|
|
{inputValue.trim() ? (
|
|
<button onClick={() => handleSend()} className="p-3.5 bg-emerald-500 text-black rounded-2xl hover:bg-emerald-400 hover:scale-105 active:scale-95 transition-all shadow-[0_0_20px_rgba(16,185,129,0.3)]">
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
|
|
</button>
|
|
) : (
|
|
canVoiceNotes ? (
|
|
<button className="p-3.5 bg-emerald-600/30 text-emerald-400 border border-emerald-500/50 rounded-2xl hover:bg-emerald-500 hover:text-black hover:scale-105 active:scale-95 transition-all shadow-[0_0_20px_rgba(16,185,129,0.1)]" title="Voice Message">
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/><path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>
|
|
</button>
|
|
) : null
|
|
)}
|
|
</div>
|
|
</footer>
|
|
</>
|
|
)}
|
|
</main>
|
|
|
|
{/* CALL OVERLAY - Supreme Ultra Native Experience */}
|
|
{isVideoCallActive && activeChat && (
|
|
<div className="fixed inset-0 z-[1000] bg-black animate-in zoom-in-95 duration-500 overflow-hidden flex flex-col">
|
|
<header className="absolute top-0 left-0 right-0 h-24 px-8 md:px-16 flex items-center justify-between z-20 bg-linear-to-b from-black/80 to-transparent">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-14 h-14 rounded-full bg-emerald-600 flex items-center justify-center text-black font-black text-2xl shadow-[0_0_30px_rgba(16,185,129,0.3)]">
|
|
{activeChat.name.substring(0,1).toUpperCase()}
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight text-white">{activeChat.name}</h2>
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
|
|
<p className="text-emerald-500 text-[10px] font-black uppercase tracking-[0.3em]">Ultra-Sync Encrypted</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="hidden md:flex items-center gap-3 bg-white/5 backdrop-blur-3xl px-5 py-2.5 rounded-2xl border border-white/10 shadow-2xl">
|
|
<div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
|
|
<span className="text-[10px] font-black uppercase tracking-widest text-white/60">Enkripsi Kedaulatan: {byokLevel}</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex-1 relative">
|
|
<iframe
|
|
id="vc-iframe"
|
|
src={`/vc/room/${activeChat.id}?embed=true&username=${encodeURIComponent(username)}&token=${quantumToken}`}
|
|
className="w-full h-full border-none"
|
|
allow="camera; microphone; display-capture; autoplay; clipboard-write; encrypted-media"
|
|
/>
|
|
</div>
|
|
|
|
<div className="absolute bottom-12 left-1/2 -translate-x-1/2 flex items-center gap-10 z-20 bg-black/40 backdrop-blur-3xl px-12 py-7 rounded-[40px] border border-white/10 shadow-[0_0_80px_rgba(0,0,0,0.9)]">
|
|
<button onClick={() => setIsVideoCallActive(false)} className="w-20 h-20 rounded-full bg-red-600 flex items-center justify-center text-white shadow-2xl hover:bg-red-700 hover:scale-110 active:scale-90 transition-all shadow-red-600/20">
|
|
<svg className="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.994.994 0 010-1.41C4.11 7.91 8.82 5 14 5s9.89 2.91 13.71 6.67c.39.39.39 1.02 0 1.41l-2.48 2.48c-.18.18-.43.29-.71.29s-.53-.11-.7-.29c-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Incoming Call UI - Supreme Radar */}
|
|
{incomingCall && (
|
|
<div className="fixed inset-0 z-[2000] bg-black/95 backdrop-blur-[100px] flex flex-col items-center justify-center animate-in fade-in zoom-in duration-500">
|
|
<div className="relative mb-16">
|
|
<div className="absolute inset-0 bg-emerald-500 rounded-full blur-[100px] opacity-40 animate-pulse"></div>
|
|
<div className="absolute inset-[-50px] border border-emerald-500/30 rounded-full animate-[ping_3s_infinite]"></div>
|
|
<div className="absolute inset-[-100px] border border-emerald-500/10 rounded-full animate-[ping_4s_infinite_1s]"></div>
|
|
<div className="w-56 h-56 rounded-full bg-emerald-950/80 border-[10px] border-emerald-500/30 flex items-center justify-center text-emerald-400 text-7xl font-black shadow-[0_0_100px_rgba(16,185,129,0.5)] relative z-10 backdrop-blur-xl">
|
|
{incomingCall.caller.substring(0,1).toUpperCase()}
|
|
</div>
|
|
</div>
|
|
<h2 className="text-5xl font-black mb-4 tracking-[0.2em] uppercase text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">{incomingCall.caller.split('@')[0]}</h2>
|
|
<p className="text-emerald-500 font-black uppercase tracking-[0.5em] animate-pulse mb-24 text-sm bg-emerald-500/10 px-6 py-2 rounded-full border border-emerald-500/30">INCOMING QUANTUM TRANSMISSION</p>
|
|
|
|
<div className="flex gap-24 relative z-20">
|
|
<button onClick={() => setIncomingCall(null)} className="w-24 h-24 rounded-full bg-red-600/80 backdrop-blur-md border border-red-500/50 flex items-center justify-center text-white hover:bg-red-600 hover:scale-110 active:scale-90 transition-all shadow-[0_0_50px_rgba(220,38,38,0.5)]">
|
|
<svg className="w-12 h-12" fill="currentColor" viewBox="0 0 24 24"><path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.994.994 0 010-1.41C4.11 7.91 8.82 5 14 5s9.89 2.91 13.71 6.67c.39.39.39 1.02 0 1.41l-2.48 2.48c-.18.18-.43.29-.71.29s-.53-.11-.7-.29c-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"/></svg>
|
|
</button>
|
|
<button onClick={() => { setActiveChat({ id: incomingCall.room, name: incomingCall.caller.split('@')[0] }); setIsVideoCallActive(true); setIncomingCall(null); }} className="w-24 h-24 rounded-full bg-emerald-500/80 backdrop-blur-md border border-emerald-400 flex items-center justify-center text-black hover:bg-emerald-400 hover:scale-110 active:scale-90 transition-all shadow-[0_0_50px_rgba(16,185,129,0.8)] animate-bounce">
|
|
<svg className="w-12 h-12" fill="currentColor" viewBox="0 0 24 24"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 2 3 2.24 3 2.99c0 9.39 7.63 17.01 17.01 17.01.71 0 .99-.65.99-1.19v-2.45c0-.54-.45-.99-.99-.99z"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<style dangerouslySetInnerHTML={{__html: `
|
|
.custom-scroll::-webkit-scrollbar { width: 6px; }
|
|
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(134, 150, 160, 0.2); border-radius: 10px; }
|
|
.custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(134, 150, 160, 0.3); }
|
|
`}} />
|
|
</div>
|
|
);
|
|
}
|