lockbitchat
0e3e3a2974
Each conversation now runs its own WebRTC session with separate keys and SAS verification, so chats never mix. Adds a side panel to switch between open chats with unread badges, a New chat action that leaves existing chats connected, per-chat local labels stored only on this device, and an availability status (Available, Away, Busy, Invisible) shared end-to-end with connected peers. Also includes vendored Prism syntax highlighting, more reliable PWA update handling, and offline send queueing fixes. Version 4.10.0.
4845 lines
246 KiB
JavaScript
4845 lines
246 KiB
JavaScript
// src/utils/debugWindowHooks.js
|
|
function isSecureBitDebugEnabled(targetWindow = globalThis.window) {
|
|
return targetWindow?.SECUREBIT_DEBUG === true;
|
|
}
|
|
function installDebugWindowHooks({
|
|
targetWindow = globalThis.window,
|
|
webrtcManagerRef,
|
|
onClearData,
|
|
clearConsole = () => {
|
|
if (typeof console.clear === "function") {
|
|
console.clear();
|
|
}
|
|
}
|
|
}) {
|
|
if (!isSecureBitDebugEnabled(targetWindow)) {
|
|
return () => {
|
|
};
|
|
}
|
|
targetWindow.forceCleanup = () => {
|
|
onClearData();
|
|
if (webrtcManagerRef.current) {
|
|
webrtcManagerRef.current.disconnect();
|
|
}
|
|
};
|
|
targetWindow.clearLogs = clearConsole;
|
|
targetWindow.webrtcManagerRef = webrtcManagerRef;
|
|
return () => {
|
|
delete targetWindow.forceCleanup;
|
|
delete targetWindow.clearLogs;
|
|
delete targetWindow.webrtcManagerRef;
|
|
};
|
|
}
|
|
|
|
// src/network/iceSettingsStore.js
|
|
var DB_NAME = "securebit-net";
|
|
var DB_VERSION = 1;
|
|
var STORE = "kv";
|
|
var KEY_RECORD = "ice-device-key";
|
|
var SETTINGS_RECORD = "ice-settings";
|
|
var SETTINGS_VERSION = 1;
|
|
function isSupported() {
|
|
return typeof indexedDB !== "undefined" && typeof crypto !== "undefined" && !!crypto.subtle;
|
|
}
|
|
function openDb() {
|
|
return new Promise((resolve, reject) => {
|
|
let request;
|
|
try {
|
|
request = indexedDB.open(DB_NAME, DB_VERSION);
|
|
} catch (error) {
|
|
reject(error);
|
|
return;
|
|
}
|
|
request.onupgradeneeded = () => {
|
|
const db = request.result;
|
|
if (!db.objectStoreNames.contains(STORE)) {
|
|
db.createObjectStore(STORE);
|
|
}
|
|
};
|
|
request.onsuccess = () => resolve(request.result);
|
|
request.onerror = () => reject(request.error);
|
|
});
|
|
}
|
|
function idbGet(db, key) {
|
|
return new Promise((resolve, reject) => {
|
|
const tx = db.transaction(STORE, "readonly");
|
|
const req = tx.objectStore(STORE).get(key);
|
|
req.onsuccess = () => resolve(req.result);
|
|
req.onerror = () => reject(req.error);
|
|
});
|
|
}
|
|
function idbPut(db, key, value) {
|
|
return new Promise((resolve, reject) => {
|
|
const tx = db.transaction(STORE, "readwrite");
|
|
tx.objectStore(STORE).put(value, key);
|
|
tx.oncomplete = () => resolve();
|
|
tx.onerror = () => reject(tx.error);
|
|
});
|
|
}
|
|
function idbDelete(db, key) {
|
|
return new Promise((resolve, reject) => {
|
|
const tx = db.transaction(STORE, "readwrite");
|
|
tx.objectStore(STORE).delete(key);
|
|
tx.oncomplete = () => resolve();
|
|
tx.onerror = () => reject(tx.error);
|
|
});
|
|
}
|
|
async function getOrCreateDeviceKey(db) {
|
|
const existing = await idbGet(db, KEY_RECORD);
|
|
if (existing instanceof CryptoKey) {
|
|
return existing;
|
|
}
|
|
const key = await crypto.subtle.generateKey(
|
|
{ name: "AES-GCM", length: 256 },
|
|
false,
|
|
// non-extractable
|
|
["encrypt", "decrypt"]
|
|
);
|
|
await idbPut(db, KEY_RECORD, key);
|
|
return key;
|
|
}
|
|
async function saveIceSettings(settings) {
|
|
if (!isSupported()) throw new Error("Persistent storage is not available in this browser");
|
|
const db = await openDb();
|
|
const key = await getOrCreateDeviceKey(db);
|
|
const payload = JSON.stringify({
|
|
version: SETTINGS_VERSION,
|
|
servers: Array.isArray(settings?.servers) ? settings.servers : [],
|
|
privacyMode: settings?.privacyMode === "relay-only" ? "relay-only" : "standard"
|
|
});
|
|
const iv = crypto.getRandomValues(new Uint8Array(12));
|
|
const ciphertext = await crypto.subtle.encrypt(
|
|
{ name: "AES-GCM", iv },
|
|
key,
|
|
new TextEncoder().encode(payload)
|
|
);
|
|
await idbPut(db, SETTINGS_RECORD, {
|
|
iv: Array.from(iv),
|
|
data: Array.from(new Uint8Array(ciphertext))
|
|
});
|
|
}
|
|
async function loadIceSettings() {
|
|
if (!isSupported()) return null;
|
|
try {
|
|
const db = await openDb();
|
|
const record = await idbGet(db, SETTINGS_RECORD);
|
|
if (!record || !Array.isArray(record.iv) || !Array.isArray(record.data)) {
|
|
return null;
|
|
}
|
|
const key = await idbGet(db, KEY_RECORD);
|
|
if (!(key instanceof CryptoKey)) return null;
|
|
const plaintext = await crypto.subtle.decrypt(
|
|
{ name: "AES-GCM", iv: new Uint8Array(record.iv) },
|
|
key,
|
|
new Uint8Array(record.data)
|
|
);
|
|
const parsed = JSON.parse(new TextDecoder().decode(plaintext));
|
|
return {
|
|
servers: Array.isArray(parsed.servers) ? parsed.servers : [],
|
|
privacyMode: parsed.privacyMode === "relay-only" ? "relay-only" : "standard"
|
|
};
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
async function clearIceSettings() {
|
|
if (!isSupported()) return;
|
|
try {
|
|
const db = await openDb();
|
|
await idbDelete(db, SETTINGS_RECORD);
|
|
} catch {
|
|
}
|
|
}
|
|
|
|
// src/state/sessionsStore.js
|
|
var SESSION_ACTIONS = Object.freeze({
|
|
CREATE_SESSION: "CREATE_SESSION",
|
|
REMOVE_SESSION: "REMOVE_SESSION",
|
|
SET_ACTIVE: "SET_ACTIVE",
|
|
SET_STATUS: "SET_STATUS",
|
|
SET_FINGERPRINT: "SET_FINGERPRINT",
|
|
SET_VERIFICATION: "SET_VERIFICATION",
|
|
SET_SAS: "SET_SAS",
|
|
ADD_MESSAGE: "ADD_MESSAGE",
|
|
SET_MESSAGES: "SET_MESSAGES",
|
|
UPDATE_MESSAGE_STATUS: "UPDATE_MESSAGE_STATUS",
|
|
DELETE_MESSAGE: "DELETE_MESSAGE",
|
|
EXPIRE_MESSAGE: "EXPIRE_MESSAGE",
|
|
INCREMENT_UNREAD: "INCREMENT_UNREAD",
|
|
CLEAR_UNREAD: "CLEAR_UNREAD",
|
|
SET_PENDING_FILES: "SET_PENDING_FILES",
|
|
PATCH_SETUP: "PATCH_SETUP",
|
|
RENAME: "RENAME",
|
|
SET_PEER_PRESENCE: "SET_PEER_PRESENCE"
|
|
});
|
|
var PRESENCE_DOT = { available: "#3ecf8e", away: "#e3b341", busy: "#e5727a", offline: "#6b6b73" };
|
|
var PRESENCE_WORD = { available: "Available", away: "Away", busy: "Busy", offline: "Offline" };
|
|
var MY_STATUS_OPTIONS = [
|
|
{ key: "available", word: "Available", desc: "Online and reachable", dot: "#3ecf8e" },
|
|
{ key: "away", word: "Away", desc: "Idle \xB7 stepped away", dot: "#e3b341" },
|
|
{ key: "busy", word: "Busy", desc: "Do not disturb", dot: "#e5727a" },
|
|
{ key: "invisible", word: "Invisible", desc: "Appear offline to peers", dot: "#6b6b73" }
|
|
];
|
|
function shortLabelFromId(id) {
|
|
const hex = String(id || "").replace(/[^a-z0-9]/gi, "");
|
|
return "Chat " + (hex.slice(0, 4) || "0000").toUpperCase();
|
|
}
|
|
function monoInitials(label) {
|
|
const words = String(label || "").trim().split(/\s+/).filter(Boolean);
|
|
const a = words[0]?.[0] || "";
|
|
const b = words[1]?.[0] || words[0]?.[1] || "";
|
|
return (a + b).toUpperCase() || "\xB7\xB7";
|
|
}
|
|
function statusSub(status) {
|
|
switch (status) {
|
|
case "connected":
|
|
case "verified":
|
|
return "P2P \xB7 connected";
|
|
case "verifying":
|
|
return "Verifying\u2026";
|
|
case "connecting":
|
|
case "new":
|
|
return "Connecting\u2026";
|
|
case "peer_disconnected":
|
|
return "Peer disconnected";
|
|
default:
|
|
return "Disconnected";
|
|
}
|
|
}
|
|
function emptySetup() {
|
|
return {
|
|
offerData: "",
|
|
answerData: "",
|
|
offerInput: "",
|
|
answerInput: "",
|
|
showOfferStep: false,
|
|
showAnswerStep: false,
|
|
showVerification: false,
|
|
showQRCode: false,
|
|
qrCodeUrl: "",
|
|
isGeneratingKeys: false,
|
|
qrFramesTotal: 0,
|
|
qrFrameIndex: 0,
|
|
qrManualMode: false
|
|
};
|
|
}
|
|
function createSessionEntry(opts = {}) {
|
|
const id = opts.id || (typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : String(Date.now()) + Math.random());
|
|
return {
|
|
id,
|
|
peerLabel: opts.peerLabel || shortLabelFromId(id),
|
|
labelIsCustom: false,
|
|
// becomes true once the user renames; blocks SAS auto-relabel
|
|
createdAt: opts.createdAt || Date.now(),
|
|
role: opts.role || "offer",
|
|
// 'offer' | 'answer'
|
|
status: opts.status || "new",
|
|
keyFingerprint: "",
|
|
verificationCode: "",
|
|
sas: { localConfirmed: false, remoteConfirmed: false, bothConfirmed: false, isVerified: false },
|
|
messages: [],
|
|
unreadCount: 0,
|
|
pendingIncomingFiles: [],
|
|
peerPresence: null,
|
|
// peer's advertised availability ('available'|'away'|'busy'|'offline'); null = unknown
|
|
setup: emptySetup()
|
|
};
|
|
}
|
|
function createInitialState() {
|
|
return { sessions: {}, order: [], activeSessionId: null };
|
|
}
|
|
function patchSession(state, id, patch) {
|
|
const session = state.sessions[id];
|
|
if (!session) return state;
|
|
return {
|
|
...state,
|
|
sessions: { ...state.sessions, [id]: { ...session, ...patch } }
|
|
};
|
|
}
|
|
function sessionsReducer(state, action) {
|
|
const A = SESSION_ACTIONS;
|
|
switch (action.type) {
|
|
case A.CREATE_SESSION: {
|
|
const entry = action.entry || createSessionEntry(action);
|
|
if (state.sessions[entry.id]) return state;
|
|
return {
|
|
sessions: { ...state.sessions, [entry.id]: entry },
|
|
order: [...state.order, entry.id],
|
|
activeSessionId: action.activate === false ? state.activeSessionId : entry.id
|
|
};
|
|
}
|
|
case A.REMOVE_SESSION: {
|
|
const { id } = action;
|
|
if (!state.sessions[id]) return state;
|
|
const sessions = { ...state.sessions };
|
|
delete sessions[id];
|
|
const order = state.order.filter((x) => x !== id);
|
|
let activeSessionId = state.activeSessionId;
|
|
if (activeSessionId === id) {
|
|
const removedIdx = state.order.indexOf(id);
|
|
activeSessionId = order[Math.max(0, removedIdx - 1)] || order[0] || null;
|
|
}
|
|
return { sessions, order, activeSessionId };
|
|
}
|
|
case A.SET_ACTIVE: {
|
|
if (!state.sessions[action.id]) return state;
|
|
if (state.activeSessionId === action.id) return state;
|
|
return { ...state, activeSessionId: action.id };
|
|
}
|
|
case A.SET_STATUS: {
|
|
const session = state.sessions[action.id];
|
|
if (!session || session.status === action.status) return state;
|
|
return patchSession(state, action.id, { status: action.status });
|
|
}
|
|
case A.SET_FINGERPRINT:
|
|
return patchSession(state, action.id, { keyFingerprint: action.fingerprint });
|
|
case A.SET_VERIFICATION:
|
|
return patchSession(state, action.id, { verificationCode: action.code });
|
|
case A.SET_SAS: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
return patchSession(state, action.id, { sas: { ...session.sas, ...action.sas } });
|
|
}
|
|
case A.ADD_MESSAGE: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
return patchSession(state, action.id, { messages: [...session.messages, action.message] });
|
|
}
|
|
case A.SET_MESSAGES: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
const next = typeof action.updater === "function" ? action.updater(session.messages) : action.messages;
|
|
return patchSession(state, action.id, { messages: Array.isArray(next) ? next : [] });
|
|
}
|
|
case A.UPDATE_MESSAGE_STATUS: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
let changed = false;
|
|
const messages = session.messages.map((m) => {
|
|
if (String(m.mid) === String(action.mid) && m.status !== action.status) {
|
|
changed = true;
|
|
return { ...m, status: action.status };
|
|
}
|
|
return m;
|
|
});
|
|
return changed ? patchSession(state, action.id, { messages }) : state;
|
|
}
|
|
case A.DELETE_MESSAGE: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
const messages = session.messages.filter((m) => String(m.mid) !== String(action.mid));
|
|
if (messages.length === session.messages.length) return state;
|
|
return patchSession(state, action.id, { messages });
|
|
}
|
|
case A.EXPIRE_MESSAGE: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
let changed = false;
|
|
const messages = session.messages.map((m) => {
|
|
if (String(m.id) === String(action.messageId) && !m.expired) {
|
|
changed = true;
|
|
return { ...m, expired: true, message: "", expiresAt: void 0 };
|
|
}
|
|
return m;
|
|
});
|
|
return changed ? patchSession(state, action.id, { messages }) : state;
|
|
}
|
|
case A.INCREMENT_UNREAD: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
return patchSession(state, action.id, { unreadCount: session.unreadCount + 1 });
|
|
}
|
|
case A.CLEAR_UNREAD: {
|
|
const session = state.sessions[action.id];
|
|
if (!session || session.unreadCount === 0) return state;
|
|
return patchSession(state, action.id, { unreadCount: 0 });
|
|
}
|
|
case A.SET_PENDING_FILES: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
const next = typeof action.updater === "function" ? action.updater(session.pendingIncomingFiles) : action.files;
|
|
return patchSession(state, action.id, { pendingIncomingFiles: Array.isArray(next) ? next : [] });
|
|
}
|
|
case A.PATCH_SETUP: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
return patchSession(state, action.id, { setup: { ...session.setup, ...action.patch } });
|
|
}
|
|
case A.RENAME: {
|
|
const session = state.sessions[action.id];
|
|
if (!session) return state;
|
|
const label = String(action.label || "").trim() || session.peerLabel;
|
|
return patchSession(state, action.id, { peerLabel: label, labelIsCustom: true });
|
|
}
|
|
case A.SET_PEER_PRESENCE: {
|
|
const session = state.sessions[action.id];
|
|
if (!session || session.peerPresence === action.presence) return state;
|
|
return patchSession(state, action.id, { peerPresence: action.presence });
|
|
}
|
|
default:
|
|
return state;
|
|
}
|
|
}
|
|
function decorateSession(session, activeSessionId) {
|
|
const lastMessage = [...session.messages].reverse().find((m) => !m.expired && typeof m.message === "string" && m.message.trim());
|
|
const s = session.status;
|
|
const isUp = s === "connected" || s === "verified";
|
|
const isPending = s === "connecting" || s === "verifying" || s === "new";
|
|
let dot, headerSub;
|
|
if (isPending) {
|
|
dot = "#e3b341";
|
|
headerSub = statusSub(s);
|
|
} else if (isUp) {
|
|
dot = session.peerPresence ? PRESENCE_DOT[session.peerPresence] || "#6b6b73" : "#3ecf8e";
|
|
headerSub = session.peerPresence ? PRESENCE_WORD[session.peerPresence] || "Online" : "P2P \xB7 connected";
|
|
} else {
|
|
dot = "#e5727a";
|
|
headerSub = statusSub(s);
|
|
}
|
|
const preview = lastMessage ? lastMessage.message : headerSub;
|
|
return {
|
|
id: session.id,
|
|
name: session.peerLabel,
|
|
mono: monoInitials(session.peerLabel),
|
|
dot,
|
|
headerSub,
|
|
status: session.status,
|
|
peerPresence: session.peerPresence,
|
|
preview,
|
|
unread: session.unreadCount > 0 ? session.unreadCount > 99 ? "99+" : String(session.unreadCount) : null,
|
|
verified: !!session.sas.isVerified,
|
|
active: session.id === activeSessionId,
|
|
inactive: session.id !== activeSessionId
|
|
};
|
|
}
|
|
function decorateSessions(state) {
|
|
return state.order.map((id) => state.sessions[id]).filter(Boolean).map((s) => decorateSession(s, state.activeSessionId));
|
|
}
|
|
|
|
// src/app.jsx
|
|
var copyToClipboardSecure = async (text, autoClearMs = 0) => {
|
|
let ok = false;
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
ok = true;
|
|
} catch (e) {
|
|
try {
|
|
const ta = document.createElement("textarea");
|
|
ta.value = text;
|
|
ta.style.position = "fixed";
|
|
ta.style.opacity = "0";
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
ok = document.execCommand("copy");
|
|
document.body.removeChild(ta);
|
|
} catch (_) {
|
|
ok = false;
|
|
}
|
|
}
|
|
if (ok && autoClearMs > 0 && navigator.clipboard && navigator.clipboard.writeText) {
|
|
setTimeout(async () => {
|
|
let current = null;
|
|
let readable = true;
|
|
try {
|
|
current = await navigator.clipboard.readText();
|
|
} catch (_) {
|
|
readable = false;
|
|
}
|
|
if (!readable || current === text) {
|
|
try {
|
|
await navigator.clipboard.writeText("");
|
|
} catch (_) {
|
|
}
|
|
}
|
|
}, autoClearMs);
|
|
}
|
|
return ok;
|
|
};
|
|
var parseMessageSegments = (text) => {
|
|
if (typeof text !== "string" || text.indexOf("```") === -1) return null;
|
|
const segments = [];
|
|
const re = /```([a-zA-Z0-9_+#.-]*)\n?([\s\S]*?)```/g;
|
|
let last = 0;
|
|
let m;
|
|
while ((m = re.exec(text)) !== null) {
|
|
if (m.index > last) segments.push({ kind: "text", content: text.slice(last, m.index) });
|
|
segments.push({ kind: "code", lang: (m[1] || "").toLowerCase(), content: m[2].replace(/\n$/, "") });
|
|
last = re.lastIndex;
|
|
}
|
|
if (last < text.length) segments.push({ kind: "text", content: text.slice(last) });
|
|
return segments.some((s) => s.kind === "code") ? segments : null;
|
|
};
|
|
var HL_KEYWORDS = /* @__PURE__ */ new Set([
|
|
"const",
|
|
"let",
|
|
"var",
|
|
"function",
|
|
"return",
|
|
"if",
|
|
"else",
|
|
"for",
|
|
"while",
|
|
"do",
|
|
"switch",
|
|
"case",
|
|
"break",
|
|
"continue",
|
|
"class",
|
|
"extends",
|
|
"new",
|
|
"this",
|
|
"super",
|
|
"import",
|
|
"export",
|
|
"from",
|
|
"as",
|
|
"default",
|
|
"async",
|
|
"await",
|
|
"try",
|
|
"catch",
|
|
"finally",
|
|
"throw",
|
|
"typeof",
|
|
"instanceof",
|
|
"delete",
|
|
"yield",
|
|
"in",
|
|
"of",
|
|
"def",
|
|
"elif",
|
|
"lambda",
|
|
"pass",
|
|
"with",
|
|
"global",
|
|
"public",
|
|
"private",
|
|
"protected",
|
|
"static",
|
|
"final",
|
|
"void",
|
|
"int",
|
|
"long",
|
|
"float",
|
|
"double",
|
|
"char",
|
|
"bool",
|
|
"boolean",
|
|
"string",
|
|
"struct",
|
|
"enum",
|
|
"interface",
|
|
"package",
|
|
"func",
|
|
"fn",
|
|
"type",
|
|
"where",
|
|
"select",
|
|
"update",
|
|
"insert",
|
|
"delete",
|
|
"where",
|
|
"and",
|
|
"or",
|
|
"not",
|
|
"end",
|
|
"then",
|
|
"fi",
|
|
"done",
|
|
"echo",
|
|
"use",
|
|
"mut",
|
|
"impl",
|
|
"trait",
|
|
"match",
|
|
"module",
|
|
"require"
|
|
]);
|
|
var HL_LITERALS = /* @__PURE__ */ new Set(["true", "false", "null", "undefined", "None", "True", "False", "nil", "NaN", "Infinity"]);
|
|
var highlightCode = (code) => {
|
|
const re = /(\/\/[^\n]*|#[^\n]*|\/\*[\s\S]*?\*\/|--[^\n]*)|(`(?:\\.|[^`\\])*`|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|(\b\d[\d_.]*(?:[eE][+-]?\d+)?\b|\b0[xX][0-9a-fA-F]+\b)|([A-Za-z_$][A-Za-z0-9_$]*)/g;
|
|
const nodes = [];
|
|
let buffer = "";
|
|
let last = 0;
|
|
let key = 0;
|
|
const flush = () => {
|
|
if (buffer) {
|
|
nodes.push(buffer);
|
|
buffer = "";
|
|
}
|
|
};
|
|
let m;
|
|
while ((m = re.exec(code)) !== null) {
|
|
if (m.index > last) buffer += code.slice(last, m.index);
|
|
last = re.lastIndex;
|
|
let cls = null;
|
|
if (m[1]) cls = "text-gray-500 italic";
|
|
else if (m[2]) cls = "text-amber-300";
|
|
else if (m[3]) cls = "text-sky-300";
|
|
else if (m[4]) {
|
|
if (HL_KEYWORDS.has(m[4])) cls = "text-purple-300";
|
|
else if (HL_LITERALS.has(m[4])) cls = "text-sky-300";
|
|
}
|
|
if (cls) {
|
|
flush();
|
|
nodes.push(React.createElement("span", { key: `h${key++}`, className: cls }, m[0]));
|
|
} else {
|
|
buffer += m[0];
|
|
}
|
|
}
|
|
if (last < code.length) buffer += code.slice(last);
|
|
flush();
|
|
return nodes;
|
|
};
|
|
var PRISM_ALIAS = {
|
|
js: "javascript",
|
|
mjs: "javascript",
|
|
javascript: "javascript",
|
|
node: "javascript",
|
|
ts: "typescript",
|
|
typescript: "typescript",
|
|
jsx: "jsx",
|
|
tsx: "tsx",
|
|
py: "python",
|
|
python: "python",
|
|
sh: "bash",
|
|
shell: "bash",
|
|
zsh: "bash",
|
|
bash: "bash",
|
|
"c++": "cpp",
|
|
cpp: "cpp",
|
|
cc: "cpp",
|
|
cxx: "cpp",
|
|
c: "c",
|
|
h: "c",
|
|
cs: "csharp",
|
|
csharp: "csharp",
|
|
java: "java",
|
|
go: "go",
|
|
golang: "go",
|
|
rs: "rust",
|
|
rust: "rust",
|
|
json: "json",
|
|
yml: "yaml",
|
|
yaml: "yaml",
|
|
sql: "sql",
|
|
md: "markdown",
|
|
markdown: "markdown",
|
|
html: "markup",
|
|
xml: "markup",
|
|
svg: "markup",
|
|
css: "css"
|
|
};
|
|
var CodeBlock = ({ code, lang }) => {
|
|
const [copied, setCopied] = React.useState(false);
|
|
const handleCopy = async () => {
|
|
const ok = await copyToClipboardSecure(code, 3e4);
|
|
if (ok) {
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2e3);
|
|
}
|
|
};
|
|
const norm = PRISM_ALIAS[(lang || "").toLowerCase()] || (lang || "").toLowerCase();
|
|
const prism = typeof window !== "undefined" ? window.Prism : null;
|
|
const grammar = prism && prism.languages ? prism.languages[norm] : null;
|
|
const usePrism = !!(prism && grammar && typeof prism.highlight === "function");
|
|
let highlightedHtml = null;
|
|
if (usePrism) {
|
|
try {
|
|
highlightedHtml = prism.highlight(code, grammar, norm);
|
|
} catch (_) {
|
|
highlightedHtml = null;
|
|
}
|
|
}
|
|
const displayLang = usePrism ? norm : lang || "code";
|
|
const codeEl = usePrism && highlightedHtml != null ? React.createElement("code", { className: "language-" + norm, dangerouslySetInnerHTML: { __html: highlightedHtml } }) : React.createElement("code", null, highlightCode(code));
|
|
return React.createElement("div", {
|
|
className: "my-1 rounded-lg overflow-hidden",
|
|
style: { backgroundColor: "#1b1c1b", border: "0 solid #e5e7eb" }
|
|
}, [
|
|
React.createElement("div", {
|
|
key: "hdr",
|
|
className: "flex items-center justify-between px-3 py-1.5",
|
|
style: { backgroundColor: "#222322", border: "0 solid #e5e7eb" }
|
|
}, [
|
|
React.createElement("span", {
|
|
key: "lang",
|
|
className: "text-[11px] uppercase tracking-wide text-gray-500 font-mono"
|
|
}, displayLang),
|
|
React.createElement("button", {
|
|
key: "copy",
|
|
onClick: handleCopy,
|
|
title: "Copy \u2014 clipboard auto-clears in 30s",
|
|
className: "flex items-center text-[11px] text-gray-400 hover:text-green-400 transition-colors"
|
|
}, [
|
|
React.createElement("i", {
|
|
key: "ic",
|
|
className: `${copied ? "fas fa-check text-green-400" : "far fa-copy"} mr-1`
|
|
}),
|
|
copied ? "Copied" : "Copy"
|
|
])
|
|
]),
|
|
React.createElement("pre", {
|
|
key: "pre",
|
|
className: "px-3 py-2 overflow-x-auto text-xs leading-relaxed text-gray-200 custom-scrollbar",
|
|
style: { whiteSpace: "pre", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", margin: 0 }
|
|
}, codeEl)
|
|
]);
|
|
};
|
|
var MessageBody = ({ text }) => {
|
|
const segments = parseMessageSegments(text);
|
|
if (!segments) {
|
|
return React.createElement("div", {
|
|
className: "text-sm break-words",
|
|
style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }
|
|
}, text);
|
|
}
|
|
return React.createElement(
|
|
"div",
|
|
{ className: "text-sm" },
|
|
segments.map(
|
|
(seg, i) => seg.kind === "code" ? React.createElement(CodeBlock, { key: i, code: seg.content, lang: seg.lang }) : seg.content.trim() ? React.createElement("div", {
|
|
key: i,
|
|
className: "break-words",
|
|
style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }
|
|
}, seg.content) : null
|
|
)
|
|
);
|
|
};
|
|
var GRAIN_URL = `url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E")`;
|
|
var SB_MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
var EnhancedChatMessage = ({ message, type, timestamp, mid, status, viewOnce, viewOnceTtl, expiresAt, expired, nowTick, canUnsend, onUnsend, onExpire }) => {
|
|
const [revealed, setRevealed] = React.useState(false);
|
|
const revealTimerRef = React.useRef(null);
|
|
const formatTime = (ts) => new Date(ts).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
|
React.useEffect(() => () => {
|
|
if (revealTimerRef.current) clearTimeout(revealTimerRef.current);
|
|
}, []);
|
|
if (type === "system" || type === "notice") {
|
|
const isNotice = type === "notice";
|
|
return React.createElement(
|
|
"div",
|
|
{ className: "message-slide", style: { display: "flex", justifyContent: "center", margin: "4px 0" } },
|
|
React.createElement("div", {
|
|
style: { maxWidth: "80%", padding: "8px 14px", borderRadius: "10px", border: "1px solid " + (isNotice ? "rgba(62,207,142,0.25)" : "rgba(240,137,42,0.22)"), background: isNotice ? "rgba(62,207,142,0.08)" : "rgba(240,137,42,0.08)", color: isNotice ? "#8fe0bb" : "#e8b27a", fontSize: "12.5px", textAlign: "center", lineHeight: 1.5 }
|
|
}, message)
|
|
);
|
|
}
|
|
const isMe = type === "sent";
|
|
const encrypted = isMe;
|
|
const isViewOnce = type === "received" && viewOnce === true;
|
|
const remaining = typeof expiresAt === "number" ? Math.max(0, Math.ceil((expiresAt - (nowTick || Date.now())) / 1e3)) : null;
|
|
const fmtRemaining = (sec) => {
|
|
if (sec == null) return "";
|
|
const h = Math.floor(sec / 3600), m = Math.floor(sec % 3600 / 60), s = sec % 60;
|
|
const pad = (n) => String(n).padStart(2, "0");
|
|
return h > 0 ? h + ":" + pad(m) + ":" + pad(s) : m + ":" + pad(s);
|
|
};
|
|
const handleReveal = () => {
|
|
if (revealed) return;
|
|
setRevealed(true);
|
|
const ms = Math.max(1, typeof viewOnceTtl === "number" ? viewOnceTtl : 15) * 1e3;
|
|
revealTimerRef.current = setTimeout(() => {
|
|
onExpire && onExpire();
|
|
}, ms);
|
|
};
|
|
const radius = isMe ? "14px 14px 4px 14px" : "14px 14px 14px 4px";
|
|
const border = isMe ? "1px solid rgba(255,255,255,0.10)" : "1px solid rgba(255,255,255,0.06)";
|
|
const bg = isMe ? "#26262b" : "#161618";
|
|
const isExpired = expired === true || typeof expiresAt === "number" && (nowTick || Date.now()) >= expiresAt;
|
|
if (isExpired) {
|
|
return React.createElement("div", {
|
|
className: "message-slide",
|
|
style: { display: "flex", width: "100%", justifyContent: isMe ? "flex-end" : "flex-start" }
|
|
}, React.createElement(
|
|
"div",
|
|
{ style: { maxWidth: "74%", minWidth: "170px" } },
|
|
React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "9px", padding: "12px 15px", borderRadius: radius, border: "1px dashed rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.018)" } }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-clock", style: { color: "#6b6b73", fontSize: "13px" } }),
|
|
React.createElement("span", { key: "t", style: { fontSize: "13px", color: "#6b6b73", fontStyle: "italic" } }, "This message has expired")
|
|
])
|
|
));
|
|
}
|
|
let body;
|
|
if (isViewOnce && !revealed) {
|
|
body = React.createElement("div", {
|
|
key: "cover",
|
|
onClick: handleReveal,
|
|
style: { position: "relative", cursor: "pointer", padding: "12px 15px 10px", overflow: "hidden" }
|
|
}, [
|
|
React.createElement("div", { key: "blur", style: { fontSize: "14.5px", lineHeight: 1.55, color: "#b3b3ba", filter: "blur(7px)", userSelect: "none", pointerEvents: "none", wordBreak: "break-word", minHeight: "22px" } }, message),
|
|
React.createElement("div", { key: "grain", style: { position: "absolute", inset: 0, backgroundImage: GRAIN_URL, backgroundSize: "90px", opacity: 0.18, mixBlendMode: "screen", pointerEvents: "none" } }),
|
|
React.createElement("div", { key: "lbl", style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", gap: "7px", pointerEvents: "none" } }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-eye-slash", style: { color: "#e8e8eb", fontSize: "13px" } }),
|
|
React.createElement("span", { key: "t", style: { fontSize: "12px", fontWeight: 600, color: "#e8e8eb", textShadow: "0 1px 5px rgba(0,0,0,0.75)" } }, "View once \xB7 tap to reveal")
|
|
])
|
|
]);
|
|
} else {
|
|
body = React.createElement(
|
|
"div",
|
|
{ key: "body", style: { padding: "12px 15px 10px", color: "#e9e9ec" } },
|
|
React.createElement(MessageBody, { text: message })
|
|
);
|
|
}
|
|
const metaLeft = [
|
|
React.createElement("span", { key: "time", style: { fontFamily: SB_MONO, fontSize: "10.5px", color: "#6b6b73" } }, formatTime(timestamp))
|
|
];
|
|
if (isMe) {
|
|
const stCfg = {
|
|
sending: { icon: "fa-clock", color: "#6b6b73", label: "Sending" },
|
|
sent: { icon: "fa-check", color: "#8a8a92", label: "Sent" },
|
|
// Two GREY ticks = delivered to the peer's device but not yet read.
|
|
delivered: { icon: "fa-check-double", color: "#8a8a92", label: "Delivered" },
|
|
// Two GREEN ticks = the peer actually opened the chat and read it.
|
|
read: { icon: "fa-check-double", color: "#3ecf8e", label: "Read" },
|
|
failed: { icon: "fa-triangle-exclamation", color: "#e5727a", label: "Not sent" }
|
|
}[status || "sent"] || { icon: "fa-check", color: "#8a8a92", label: "Sent" };
|
|
metaLeft.push(React.createElement("span", {
|
|
key: "dlv",
|
|
title: stCfg.label,
|
|
style: { display: "inline-flex", alignItems: "center", color: stCfg.color }
|
|
}, React.createElement("i", { className: "fas " + stCfg.icon, style: { fontSize: "10.5px" } })));
|
|
}
|
|
if (isViewOnce && revealed) {
|
|
metaLeft.push(React.createElement("span", { key: "vo", style: { display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "10px", fontWeight: 600, color: "#8a8a92" } }, [
|
|
React.createElement("span", { key: "d", style: { width: "4px", height: "4px", borderRadius: "50%", background: "#8a8a92" } }),
|
|
"Viewed once"
|
|
]));
|
|
} else if (remaining !== null) {
|
|
metaLeft.push(React.createElement("span", { key: "ttl", style: { display: "inline-flex", alignItems: "center", gap: "4px", fontFamily: SB_MONO, fontSize: "10.5px", fontWeight: 500, color: "#f0892a" } }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-clock", style: { fontSize: "10px" } }),
|
|
fmtRemaining(remaining)
|
|
]));
|
|
}
|
|
const metaRight = [];
|
|
metaRight.push(React.createElement("span", { key: "status", style: { display: "inline-flex", alignItems: "center", gap: "5px", fontSize: "10.5px", fontWeight: 600, color: "#3ecf8e", flex: "none" } }, [
|
|
React.createElement("i", { key: "i", className: encrypted ? "fas fa-lock" : "fas fa-lock-open", style: { fontSize: "10px" } }),
|
|
encrypted ? "Encrypted" : "Decrypted"
|
|
]));
|
|
if (canUnsend && isMe && mid) {
|
|
metaRight.push(React.createElement("button", {
|
|
key: "unsend",
|
|
onClick: () => onUnsend && onUnsend(mid),
|
|
title: "Delete for everyone",
|
|
className: "sb-unsend",
|
|
style: { background: "none", border: "none", cursor: "pointer", color: "#56565e", fontSize: "11px", padding: 0, lineHeight: 1 }
|
|
}, React.createElement("i", { className: "fas fa-trash-can" })));
|
|
}
|
|
const meta = React.createElement("div", {
|
|
key: "meta",
|
|
style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "14px", padding: "0 15px 10px" }
|
|
}, [
|
|
React.createElement("div", { key: "l", style: { display: "flex", alignItems: "center", gap: "9px", minWidth: 0 } }, metaLeft),
|
|
React.createElement("div", { key: "r", style: { display: "flex", alignItems: "center", gap: "9px", flex: "none" } }, metaRight)
|
|
]);
|
|
return React.createElement("div", {
|
|
className: "message-slide",
|
|
style: { display: "flex", width: "100%", justifyContent: isMe ? "flex-end" : "flex-start" }
|
|
}, [
|
|
React.createElement(
|
|
"div",
|
|
{ key: "wrap", style: { maxWidth: "74%", minWidth: "170px" } },
|
|
React.createElement("div", { style: { borderRadius: radius, border, background: bg, overflow: "hidden" } }, [body, meta])
|
|
)
|
|
]);
|
|
};
|
|
var EnhancedConnectionSetup = ({
|
|
messages,
|
|
onCreateOffer,
|
|
onCreateAnswer,
|
|
onConnect,
|
|
onClearData,
|
|
onVerifyConnection,
|
|
connectionStatus,
|
|
offerData,
|
|
answerData,
|
|
offerInput,
|
|
setOfferInput,
|
|
answerInput,
|
|
setAnswerInput,
|
|
showOfferStep,
|
|
showAnswerStep,
|
|
verificationCode,
|
|
showVerification,
|
|
showQRCode,
|
|
qrCodeUrl,
|
|
showQRScanner,
|
|
setShowQRCode,
|
|
setShowQRScanner,
|
|
setShowQRScannerModal,
|
|
offerPassword,
|
|
answerPassword,
|
|
localVerificationConfirmed,
|
|
remoteVerificationConfirmed,
|
|
bothVerificationsConfirmed,
|
|
// QR control props
|
|
qrFramesTotal,
|
|
qrFrameIndex,
|
|
qrManualMode,
|
|
toggleQrManualMode,
|
|
nextQrFrame,
|
|
prevQrFrame,
|
|
markAnswerCreated,
|
|
notificationIntegrationRef,
|
|
isGeneratingKeys,
|
|
setIsGeneratingKeys,
|
|
handleCreateOffer,
|
|
relayOnlyMode,
|
|
setRelayOnlyMode,
|
|
webrtcManagerRef,
|
|
showIceSettings,
|
|
setShowIceSettings,
|
|
iceServersText,
|
|
iceSettingsPersisted,
|
|
customIceServers,
|
|
handleApplyIceSettings,
|
|
handleForgetIceSettings,
|
|
// When true, render ONLY the create/connect card (no marketing landing,
|
|
// no hero) so it slots into the chat column for an additional session.
|
|
compact = false
|
|
}) => {
|
|
const [mode, setMode] = React.useState("create");
|
|
const [notificationPermissionRequested, setNotificationPermissionRequested] = React.useState(false);
|
|
const [qrModalOpen, setQrModalOpen] = React.useState(false);
|
|
const [copied, setCopied] = React.useState(false);
|
|
const [sasInput, setSasInput] = React.useState("");
|
|
const [sasError, setSasError] = React.useState("");
|
|
const [platformsOpen, setPlatformsOpen] = React.useState(false);
|
|
const [codeRevealed, setCodeRevealed] = React.useState(false);
|
|
const [genProgress, setGenProgress] = React.useState(0);
|
|
React.useEffect(() => {
|
|
setSasInput("");
|
|
setSasError("");
|
|
}, [verificationCode]);
|
|
React.useEffect(() => {
|
|
if (!showOfferStep && !showAnswerStep) setQrModalOpen(false);
|
|
setCodeRevealed(false);
|
|
}, [showOfferStep, showAnswerStep]);
|
|
React.useEffect(() => {
|
|
const generating = isGeneratingKeys && !showOfferStep && !showAnswerStep && !showVerification;
|
|
if (!generating) {
|
|
setGenProgress(0);
|
|
return;
|
|
}
|
|
setGenProgress(0);
|
|
let p = 0;
|
|
const id = setInterval(() => {
|
|
p += 1;
|
|
setGenProgress(p);
|
|
if (p >= 3) clearInterval(id);
|
|
}, 520);
|
|
return () => clearInterval(id);
|
|
}, [isGeneratingKeys, showOfferStep, showAnswerStep, showVerification]);
|
|
React.useEffect(() => {
|
|
if (!platformsOpen) return;
|
|
const onDoc = () => setPlatformsOpen(false);
|
|
const id = setTimeout(() => document.addEventListener("click", onDoc), 0);
|
|
return () => {
|
|
clearTimeout(id);
|
|
document.removeEventListener("click", onDoc);
|
|
};
|
|
}, [platformsOpen]);
|
|
const resetToSelect = () => {
|
|
setIsGeneratingKeys(false);
|
|
setQrModalOpen(false);
|
|
onClearData();
|
|
};
|
|
const handleVerificationConfirm = (userCode) => {
|
|
return onVerifyConnection(userCode);
|
|
};
|
|
const handleVerificationReject = () => {
|
|
onVerifyConnection(null, false);
|
|
};
|
|
const requestNotificationPermissionOnInteraction = async () => {
|
|
if (notificationPermissionRequested) {
|
|
return;
|
|
}
|
|
try {
|
|
if (!("Notification" in window)) {
|
|
return;
|
|
}
|
|
if (!window.isSecureContext && window.location.protocol !== "https:" && window.location.hostname !== "localhost") {
|
|
return;
|
|
}
|
|
const currentPermission = typeof Notification !== "undefined" && Notification ? Notification.permission : "denied";
|
|
if (currentPermission === "default" && typeof Notification !== "undefined" && Notification) {
|
|
const permission = await Notification.requestPermission();
|
|
if (permission === "granted") {
|
|
try {
|
|
if (window.NotificationIntegration && webrtcManagerRef.current) {
|
|
const integration = new window.NotificationIntegration(webrtcManagerRef.current);
|
|
await integration.init();
|
|
notificationIntegrationRef.current = integration;
|
|
}
|
|
} catch (error) {
|
|
}
|
|
setTimeout(() => {
|
|
try {
|
|
const welcomeNotification = new Notification("SecureBit Chat", {
|
|
body: "Notifications enabled! You will receive alerts for new messages.",
|
|
icon: "/logo/icon-192x192.png",
|
|
tag: "welcome-notification"
|
|
});
|
|
welcomeNotification.onclick = () => {
|
|
welcomeNotification.close();
|
|
};
|
|
setTimeout(() => {
|
|
welcomeNotification.close();
|
|
}, 5e3);
|
|
} catch (error) {
|
|
}
|
|
}, 1e3);
|
|
}
|
|
} else if (currentPermission === "granted") {
|
|
try {
|
|
if (window.NotificationIntegration && webrtcManagerRef.current && !notificationIntegrationRef.current) {
|
|
const integration = new window.NotificationIntegration(webrtcManagerRef.current);
|
|
await integration.init();
|
|
notificationIntegrationRef.current = integration;
|
|
}
|
|
} catch (error) {
|
|
}
|
|
setTimeout(() => {
|
|
try {
|
|
const testNotification = new Notification("SecureBit Chat", {
|
|
body: "Notifications are working! You will receive alerts for new messages.",
|
|
icon: "/logo/icon-192x192.png",
|
|
tag: "test-notification"
|
|
});
|
|
testNotification.onclick = () => {
|
|
testNotification.close();
|
|
};
|
|
setTimeout(() => {
|
|
testNotification.close();
|
|
}, 5e3);
|
|
} catch (error) {
|
|
}
|
|
}, 1e3);
|
|
}
|
|
setNotificationPermissionRequested(true);
|
|
} catch (error) {
|
|
}
|
|
};
|
|
const h = React.createElement;
|
|
const C_ORANGE = "#f0892a";
|
|
const C_GREEN = "#3ecf8e";
|
|
const MONO = SB_MONO;
|
|
const encode = (data) => {
|
|
try {
|
|
const min = typeof data === "object" ? JSON.stringify(data) : data || "";
|
|
if (!min) return "";
|
|
if (typeof window.encodeBinaryToPrefixed === "function") return window.encodeBinaryToPrefixed(min);
|
|
if (typeof window.compressToPrefixedGzip === "function") return window.compressToPrefixedGzip(min);
|
|
return min;
|
|
} catch {
|
|
return typeof data === "object" ? JSON.stringify(data) : data || "";
|
|
}
|
|
};
|
|
const isCreate = mode === "create";
|
|
const isGenerating = isGeneratingKeys && !showOfferStep && !showAnswerStep && !showVerification;
|
|
const isOfferCred = isCreate && showOfferStep && !showVerification;
|
|
const isAnswerCred = !isCreate && showAnswerStep && !showVerification;
|
|
const atIntro = !showVerification && !isGenerating && !isOfferCred && !isAnswerCred;
|
|
const accent = isCreate ? C_ORANGE : C_GREEN;
|
|
const kicker = showVerification ? "Step 3 \xB7 verification" : isOfferCred || isAnswerCred ? "Step 2 \xB7 exchange" : "Step 1 \xB7 open a channel";
|
|
const credCode = isCreate ? encode(offerData) : encode(answerData);
|
|
const hasInvite = (offerInput || "").trim().length > 0;
|
|
const hasAnswer = (answerInput || "").trim().length > 0;
|
|
const copyCred = async () => {
|
|
try {
|
|
if (typeof copyToClipboardSecure === "function") await copyToClipboardSecure(credCode);
|
|
else await navigator.clipboard.writeText(credCode);
|
|
} catch (e) {
|
|
}
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1600);
|
|
};
|
|
const normExpected = (verificationCode || "").replace(/[-\s]/g, "").length;
|
|
const normInput = sasInput.replace(/[-\s]/g, "").length;
|
|
const canConfirm = !localVerificationConfirmed && normExpected > 0 && normInput === normExpected;
|
|
const handleSasConfirm = async () => {
|
|
try {
|
|
setSasError("");
|
|
await onVerifyConnection(sasInput);
|
|
} catch (err) {
|
|
setSasInput("");
|
|
setSasError(err?.message === "SAS_MAX_ATTEMPTS" ? "Too many incorrect attempts. Session reset for safety." : "Incorrect code. Check it with your peer and try again.");
|
|
}
|
|
};
|
|
const ICON_DEFS = {
|
|
"fa-user": { sw: 1.9, e: [["circle", { cx: 12, cy: 8, r: 3.6 }], ["path", { d: "M5 20c0-3.5 3-5.5 7-5.5s7 2 7 5.5" }]] },
|
|
"fa-lock": { sw: 2, e: [["path", { d: "M7 11V7a5 5 0 0 1 10 0v4" }], ["rect", { x: 4.5, y: 11, width: 15, height: 9, rx: 2.2 }]] },
|
|
"fa-plus": { sw: 2.1, e: [["path", { d: "M12 5v14M5 12h14" }]] },
|
|
"fa-link": { sw: 2, e: [["path", { d: "M9.5 14.5l5-5M8 11l-2.2 2.2a3.5 3.5 0 0 0 4.95 4.95L13 16M16 13l2.2-2.2a3.5 3.5 0 0 0-4.95-4.95L11 8" }]] },
|
|
"fa-bolt": { sw: 2.1, e: [["path", { d: "M13 2L4.5 13H11l-1 9 8.5-11H12l1-9z" }]] },
|
|
"fa-camera": { sw: 1.8, e: [["path", { d: "M2 8.5V6.5A2.5 2.5 0 0 1 4.5 4h2M17.5 4h2A2.5 2.5 0 0 1 22 6.5v2M22 15.5v2a2.5 2.5 0 0 1-2.5 2.5h-2M6.5 20h-2A2.5 2.5 0 0 1 2 17.5v-2" }], ["circle", { cx: 12, cy: 12, r: 3.2 }]] },
|
|
"fa-qrcode": { sw: 1.9, e: [["rect", { x: 3, y: 3, width: 7, height: 7, rx: 1.3 }], ["rect", { x: 14, y: 3, width: 7, height: 7, rx: 1.3 }], ["rect", { x: 3, y: 14, width: 7, height: 7, rx: 1.3 }], ["path", { d: "M14 14h3v3M21 14v.01M14 21h.01M21 21v-4M17.5 21H21" }]] },
|
|
"fa-chevron-right": { sw: 2, e: [["path", { d: "M9 6l6 6-6 6" }]] },
|
|
"fa-chevron-left": { sw: 2, e: [["path", { d: "M15 6l-6 6 6 6" }]] },
|
|
"fa-chevron-down": { sw: 2, e: [["path", { d: "M6 9l6 6 6-6" }]] },
|
|
"fa-circle-notch": { sw: 2, e: [["path", { d: "M21 12a9 9 0 1 1-6.2-8.6" }]] },
|
|
"fa-check": { sw: 2.4, e: [["path", { d: "M20 6L9 17l-5-5" }]] },
|
|
"fa-check-circle": { sw: 2, e: [["circle", { cx: 12, cy: 12, r: 9 }], ["path", { d: "M8.5 12.4l2.4 2.4 4.6-5" }]] },
|
|
"fa-shield-alt": { sw: 1.9, e: [["path", { d: "M12 2.6l7 3v5.1c0 4.5-3 8.3-7 10.2-4-1.9-7-5.7-7-10.2V5.6l7-3z" }], ["path", { d: "M9 12l2 2 4-4.1" }]] },
|
|
"fa-download": { sw: 2, e: [["path", { d: "M12 3v12M12 15l-4.5-4.5M12 15l4.5-4.5" }], ["path", { d: "M4 20h16" }]] },
|
|
"fa-clock": { sw: 1.8, e: [["circle", { cx: 12, cy: 13, r: 8 }], ["path", { d: "M12 9v4l2.5 2M9 2h6" }]] },
|
|
"fa-times": { sw: 2.2, e: [["path", { d: "M18 6L6 18M6 6l12 12" }]] },
|
|
"fa-eye": { sw: 1.9, e: [["path", { d: "M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" }], ["circle", { cx: 12, cy: 12, r: 3 }]] }
|
|
};
|
|
const fa = (name, opts) => {
|
|
opts = opts || {};
|
|
const def = ICON_DEFS[name];
|
|
if (!def) {
|
|
const st = {};
|
|
if (opts.color) st.color = opts.color;
|
|
if (opts.fontSize) st.fontSize = opts.fontSize;
|
|
if (opts.animation) st.animation = opts.animation;
|
|
if (opts.style) Object.assign(st, opts.style);
|
|
return h("i", { key: opts.key, className: `fas ${name}`, style: st });
|
|
}
|
|
const size = opts.fontSize ? parseFloat(opts.fontSize) : 16;
|
|
const svgStyle = {};
|
|
if (opts.animation) {
|
|
svgStyle.animation = opts.animation;
|
|
svgStyle.transformOrigin = "center";
|
|
svgStyle.transformBox = "fill-box";
|
|
}
|
|
if (opts.style) Object.assign(svgStyle, opts.style);
|
|
return h("svg", {
|
|
key: opts.key,
|
|
width: size,
|
|
height: size,
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
stroke: opts.color || "currentColor",
|
|
strokeWidth: def.sw || 2,
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
style: svgStyle
|
|
}, def.e.map((el, i) => h(el[0], Object.assign({ key: i }, el[1]))));
|
|
};
|
|
const leftPanel = h("div", {
|
|
key: "left",
|
|
className: "sb-start-left",
|
|
style: {
|
|
flex: "1.05 1 380px",
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
// Full viewport height even when the panels stack on mobile, so the
|
|
// branding column isn't collapsed/cramped (looked broken otherwise).
|
|
minHeight: "100vh",
|
|
boxSizing: "border-box",
|
|
padding: "46px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
gap: "36px",
|
|
borderRight: "1px solid rgba(255,255,255,0.06)",
|
|
background: "radial-gradient(900px 600px at 25% 18%, rgba(240,137,42,0.07), transparent 62%), radial-gradient(800px 700px at 80% 92%, rgba(62,207,142,0.06), transparent 60%), #0c0c0e"
|
|
}
|
|
}, [
|
|
h(
|
|
"div",
|
|
{ key: "herowrap", style: { flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", position: "relative", zIndex: 2 } },
|
|
h("div", { key: "hero", style: { maxWidth: "470px" } }, [
|
|
h("h1", { key: "h1", style: { margin: "0 0 14px", fontSize: "34px", fontWeight: 800, letterSpacing: "-1.1px", lineHeight: 1.1, color: "#f4f4f6" } }, [
|
|
"A direct line",
|
|
h("br", { key: "br" }),
|
|
"only you two can read."
|
|
]),
|
|
h(
|
|
"p",
|
|
{ key: "p", style: { margin: "0 0 38px", fontSize: "14.5px", lineHeight: 1.6, color: "#8a8a92", maxWidth: "390px" } },
|
|
"Keys are generated on your device and exchanged peer-to-peer. No accounts, no servers storing your messages."
|
|
),
|
|
// animated channel
|
|
h("div", { key: "channel", style: { display: "flex", alignItems: "center", height: "74px" } }, [
|
|
h("div", { key: "you", style: { flex: "none", display: "flex", flexDirection: "column", alignItems: "center", gap: "8px", width: "74px" } }, [
|
|
h("div", { key: "n", style: { width: "50px", height: "50px", borderRadius: "15px", display: "grid", placeItems: "center", background: "rgba(240,137,42,0.13)", border: "1px solid rgba(240,137,42,0.3)", animation: "sbNode 3s ease-in-out infinite" } }, fa("fa-user", { color: C_ORANGE, fontSize: "20px" })),
|
|
h("span", { key: "l", style: { fontSize: "11px", fontWeight: 600, color: "#9a9aa2" } }, "You")
|
|
]),
|
|
h("div", { key: "wire", style: { flex: 1, position: "relative", height: "52px", margin: "0 -6px" } }, [
|
|
h("div", { key: "line", style: { position: "absolute", top: "50%", left: 0, right: 0, height: "2px", transform: "translateY(-50%)", background: "linear-gradient(90deg, rgba(240,137,42,0.45), rgba(62,207,142,0.45))" } }),
|
|
h("span", { key: "d1", style: { position: "absolute", top: "50%", transform: "translateY(-50%)", width: "6px", height: "6px", borderRadius: "50%", background: C_ORANGE, boxShadow: `0 0 8px ${C_ORANGE}`, animation: "sbFlowR 2.6s linear infinite" } }),
|
|
h("span", { key: "d2", style: { position: "absolute", top: "50%", transform: "translateY(-50%)", width: "6px", height: "6px", borderRadius: "50%", background: C_GREEN, boxShadow: `0 0 8px ${C_GREEN}`, animation: "sbFlowL 2.6s linear infinite", animationDelay: "0.6s" } }),
|
|
h("div", { key: "hub", style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: "38px", height: "38px" } }, [
|
|
h("span", { key: "pulse", style: { position: "absolute", top: "50%", left: "50%", width: "38px", height: "38px", borderRadius: "50%", border: "1.5px solid rgba(62,207,142,0.5)", animation: "sbPulse 2.4s ease-out infinite" } }),
|
|
h("div", { key: "core", style: { position: "relative", width: "38px", height: "38px", borderRadius: "50%", display: "grid", placeItems: "center", background: "#121214", border: "1px solid rgba(62,207,142,0.45)", boxShadow: "0 0 18px rgba(62,207,142,0.25)" } }, fa("fa-lock", { color: C_GREEN, fontSize: "14px" }))
|
|
])
|
|
]),
|
|
h("div", { key: "peer", style: { flex: "none", display: "flex", flexDirection: "column", alignItems: "center", gap: "8px", width: "74px" } }, [
|
|
h("div", { key: "n", style: { width: "50px", height: "50px", borderRadius: "15px", display: "grid", placeItems: "center", background: "rgba(62,207,142,0.1)", border: "1px solid rgba(62,207,142,0.3)", animation: "sbNode 3s ease-in-out infinite", animationDelay: "1.5s" } }, fa("fa-user", { color: C_GREEN, fontSize: "20px" })),
|
|
h("span", { key: "l", style: { fontSize: "11px", fontWeight: 600, color: "#9a9aa2" } }, "Peer")
|
|
])
|
|
])
|
|
])
|
|
),
|
|
h(
|
|
"div",
|
|
{ key: "badges", style: { position: "relative", zIndex: 2, display: "flex", flexWrap: "wrap", gap: "8px" } },
|
|
["ECDH P-384", "AES-256-GCM", "Perfect Forward Secrecy"].map(
|
|
(label) => h("span", { key: label, style: { display: "inline-flex", alignItems: "center", gap: "6px", padding: "6px 11px", borderRadius: "8px", border: "1px solid rgba(255,255,255,0.07)", background: "rgba(255,255,255,0.025)", fontFamily: MONO, fontSize: "11px", fontWeight: 500, color: "#9a9aa2" } }, [
|
|
h("span", { key: "dot", style: { width: "5px", height: "5px", borderRadius: "50%", background: C_GREEN } }),
|
|
label
|
|
])
|
|
)
|
|
)
|
|
]);
|
|
const segToggle = atIntro && h("div", { key: "seg", style: { position: "relative", display: "flex", padding: "4px", borderRadius: "12px", border: "1px solid rgba(255,255,255,0.07)", background: "#141416", marginBottom: "26px" } }, [
|
|
h("div", { key: "ind", style: { position: "absolute", top: "4px", bottom: "4px", left: "4px", width: "calc(50% - 4px)", borderRadius: "9px", background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.08)", transform: isCreate ? "translateX(0%)" : "translateX(100%)", transition: "transform .26s cubic-bezier(.3,.8,.3,1)" } }),
|
|
h("button", { key: "c", className: "sb-seg-btn", onClick: () => setMode("create"), style: { position: "relative", zIndex: 1, flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", padding: "11px", border: "none", background: "transparent", color: isCreate ? "#f4f4f6" : "#7b7b83", fontFamily: "inherit", fontSize: "14px", fontWeight: 700, cursor: "pointer" } }, [fa("fa-plus", { key: "i" }), "Create"]),
|
|
h("button", { key: "j", className: "sb-seg-btn", onClick: () => setMode("join"), style: { position: "relative", zIndex: 1, flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", padding: "11px", border: "none", background: "transparent", color: !isCreate ? "#f4f4f6" : "#7b7b83", fontFamily: "inherit", fontSize: "14px", fontWeight: 700, cursor: "pointer" } }, [fa("fa-link", { key: "i" }), "Join"])
|
|
]);
|
|
const backButton = (key) => h("button", { key: key || "back", className: "sb-soft-btn", onClick: resetToSelect, style: { display: "inline-flex", alignItems: "center", gap: "6px", marginBottom: "14px", padding: "6px 11px 6px 8px", borderRadius: "8px", border: "1px solid rgba(255,255,255,0.08)", background: "transparent", color: "#9a9aa2", fontFamily: "inherit", fontSize: "12.5px", fontWeight: 600, cursor: "pointer" } }, [fa("fa-chevron-left", { key: "i" }), "Back"]);
|
|
const credBlock = h("div", { key: "codeblock", style: { borderRadius: "13px", border: "1px solid rgba(255,255,255,0.08)", background: "#141416", overflow: "hidden", marginBottom: "16px" } }, [
|
|
h("div", { key: "bar", style: { display: "flex", alignItems: "center", gap: "8px", padding: "9px 12px", borderBottom: "1px solid rgba(255,255,255,0.06)", background: "rgba(0,0,0,0.2)" } }, [
|
|
h("span", { key: "dot", style: { width: "7px", height: "7px", borderRadius: "50%", background: accent } }),
|
|
h("span", { key: "tag", style: { fontFamily: MONO, fontSize: "10.5px", fontWeight: 600, color: "#8a8a92" } }, `${isCreate ? "offer" : "answer"} \xB7 or copy text`),
|
|
h("button", { key: "copy", onClick: copyCred, style: { marginLeft: "auto", padding: "4px 9px", borderRadius: "6px", border: `1px solid ${copied ? "rgba(62,207,142,0.4)" : "rgba(255,255,255,0.1)"}`, background: copied ? "rgba(62,207,142,0.1)" : "rgba(255,255,255,0.04)", color: copied ? C_GREEN : "#b3b3ba", fontFamily: "inherit", fontSize: "11px", fontWeight: 600, cursor: "pointer", transition: "all .14s" } }, copied ? "Copied" : "Copy")
|
|
]),
|
|
// The handshake code is sensitive — keep it blurred until the
|
|
// user deliberately reveals it, underscoring that it must be
|
|
// shared only over a channel they trust.
|
|
h("div", { key: "codewrap", style: { position: "relative" } }, [
|
|
h("div", { key: "code", className: "sb-sc", style: { fontFamily: MONO, fontSize: "11px", lineHeight: 1.55, color: "#c9ccd8", wordBreak: "break-all", padding: "11px 12px", maxHeight: "72px", overflowY: "auto", filter: codeRevealed ? "none" : "blur(6px)", userSelect: codeRevealed ? "text" : "none", transition: "filter .2s" } }, credCode),
|
|
!codeRevealed && h("button", { key: "reveal", onClick: () => setCodeRevealed(true), style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", border: "none", background: "rgba(20,20,22,0.25)", color: "#cfcfd4", fontFamily: "inherit", fontSize: "12px", fontWeight: 600, cursor: "pointer" } }, [
|
|
fa("fa-eye", { key: "i", fontSize: "15px" }),
|
|
"Click to reveal \u2014 keep this code private"
|
|
])
|
|
])
|
|
]);
|
|
const showQrButton = qrCodeUrl && h("button", { key: "showqr", onClick: () => setQrModalOpen(true), style: { width: "100%", display: "flex", alignItems: "center", gap: "13px", padding: "15px 16px", borderRadius: "14px", border: `1px solid ${isCreate ? "rgba(240,137,42,0.3)" : "rgba(62,207,142,0.3)"}`, background: isCreate ? "rgba(240,137,42,0.06)" : "rgba(62,207,142,0.06)", color: "inherit", fontFamily: "inherit", cursor: "pointer", textAlign: "left", marginBottom: "14px" } }, [
|
|
h("span", { key: "ic", style: { flex: "none", width: "42px", height: "42px", borderRadius: "12px", display: "grid", placeItems: "center", background: isCreate ? "rgba(240,137,42,0.12)" : "rgba(62,207,142,0.12)", border: `1px solid ${isCreate ? "rgba(240,137,42,0.28)" : "rgba(62,207,142,0.28)"}` } }, fa("fa-qrcode", { color: accent, fontSize: "18px" })),
|
|
h("span", { key: "tx", style: { flex: 1 } }, [
|
|
h("span", { key: "t", style: { display: "block", fontSize: "14.5px", fontWeight: 700, color: "#f4f4f6" } }, "Show QR code"),
|
|
h("span", { key: "s", style: { display: "block", fontSize: "12.5px", color: "#8a8a92", marginTop: "1px" } }, `Full-screen \xB7 let your peer scan${(qrFramesTotal || 0) > 1 ? ` all ${qrFramesTotal} frames` : ""}`)
|
|
]),
|
|
fa("fa-chevron-right", { color: "#6b6b73" })
|
|
]);
|
|
let inner;
|
|
if (showVerification) {
|
|
const verified = bothVerificationsConfirmed;
|
|
const cells = (verificationCode || "").split("").map((ch, i) => h("div", { key: i, style: { flex: 1, maxWidth: "46px", aspectRatio: "0.82", display: "grid", placeItems: "center", borderRadius: "10px", border: "1px solid rgba(62,207,142,0.25)", background: "rgba(62,207,142,0.05)", fontFamily: MONO, fontSize: "22px", fontWeight: 700, color: C_GREEN } }, ch));
|
|
inner = h("div", { key: "verify", style: { animation: "sbUp .3s ease" } }, [
|
|
!verified && backButton("vback"),
|
|
h("div", { key: "head", style: { display: "flex", alignItems: "center", gap: "11px", marginBottom: "8px" } }, [
|
|
h("div", { key: "i", style: { width: "34px", height: "34px", flex: "none", borderRadius: "10px", display: "grid", placeItems: "center", background: "rgba(62,207,142,0.1)", border: "1px solid rgba(62,207,142,0.25)" } }, fa("fa-shield-alt", { color: C_GREEN })),
|
|
h("h2", { key: "t", style: { margin: 0, fontSize: "21px", fontWeight: 800, letterSpacing: "-0.4px", color: "#f4f4f6" } }, "Security verification")
|
|
]),
|
|
h("p", { key: "sub", style: { margin: "0 0 18px", fontSize: "13.5px", lineHeight: 1.55, color: "#8a8a92" } }, "Compare this safety code with your peer over a separate channel (voice / in person), then type it to unlock the chat."),
|
|
h("div", { key: "cells", style: { display: "flex", gap: "6px", justifyContent: "center", marginBottom: "20px", flexWrap: "wrap" } }, cells),
|
|
verified ? h("div", { key: "ok", style: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", padding: "24px 16px", borderRadius: "16px", border: "1px solid rgba(62,207,142,0.25)", background: "rgba(62,207,142,0.06)", animation: "sbUp .3s ease" } }, [
|
|
h("div", { key: "i", style: { width: "54px", height: "54px", borderRadius: "16px", display: "grid", placeItems: "center", background: "rgba(62,207,142,0.14)", border: "1px solid rgba(62,207,142,0.35)", marginBottom: "14px" } }, fa("fa-check", { color: C_GREEN, fontSize: "24px" })),
|
|
h("div", { key: "t", style: { fontSize: "18px", fontWeight: 800, color: "#f4f4f6" } }, "Channel verified"),
|
|
h("div", { key: "s", style: { fontSize: "13.5px", color: "#8a8a92", marginTop: "5px" } }, "Both parties confirmed. Opening the secure chat\u2026")
|
|
]) : h("div", { key: "form" }, [
|
|
h("div", { key: "lbl", style: { fontSize: "12.5px", fontWeight: 600, color: "#9a9aa2", marginBottom: "8px" } }, "Enter the verified code"),
|
|
h("input", { key: "in", value: sasInput, onChange: (e) => {
|
|
setSasInput(e.target.value.toUpperCase());
|
|
if (sasError) setSasError("");
|
|
}, disabled: localVerificationConfirmed, autoFocus: true, autoComplete: "off", spellCheck: false, placeholder: verificationCode ? "Type code here" : "Waiting for code\u2026", style: { width: "100%", textAlign: "center", letterSpacing: "6px", borderRadius: "12px", border: `1px solid ${sasInput.length ? canConfirm || localVerificationConfirmed ? "rgba(62,207,142,0.5)" : "rgba(255,255,255,0.14)" : "rgba(255,255,255,0.08)"}`, background: "#141416", color: "#f4f4f6", fontFamily: MONO, fontSize: "20px", fontWeight: 700, padding: "14px", outline: "none", textTransform: "uppercase", marginBottom: sasError ? "8px" : "16px" } }),
|
|
sasError && h("p", { key: "err", style: { color: "#e5727a", fontSize: "12.5px", margin: "0 0 16px" } }, sasError),
|
|
h("div", { key: "status", style: { display: "flex", flexDirection: "column", gap: "8px", marginBottom: "16px" } }, [
|
|
h("div", { key: "you", style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "11px 14px", borderRadius: "11px", border: "1px solid rgba(255,255,255,0.06)", background: "#141416" } }, [
|
|
h("span", { key: "l", style: { fontSize: "13px", color: "#cfcfd4", fontWeight: 600 } }, "Your confirmation"),
|
|
h("span", { key: "v", style: { display: "inline-flex", alignItems: "center", gap: "6px", fontSize: "12.5px", fontWeight: 600, color: localVerificationConfirmed ? C_GREEN : "#7b7b83" } }, [fa(localVerificationConfirmed ? "fa-check-circle" : "fa-clock", { key: "i" }), localVerificationConfirmed ? "Confirmed" : "Pending"])
|
|
]),
|
|
h("div", { key: "peer", style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "11px 14px", borderRadius: "11px", border: "1px solid rgba(255,255,255,0.06)", background: "#141416" } }, [
|
|
h("span", { key: "l", style: { fontSize: "13px", color: "#cfcfd4", fontWeight: 600 } }, "Peer confirmation"),
|
|
h("span", { key: "v", style: { display: "inline-flex", alignItems: "center", gap: "6px", fontSize: "12.5px", fontWeight: 600, color: remoteVerificationConfirmed ? C_GREEN : "#7b7b83" } }, [fa(remoteVerificationConfirmed ? "fa-check-circle" : "fa-clock", { key: "i" }), remoteVerificationConfirmed ? "Confirmed" : "Pending"])
|
|
])
|
|
]),
|
|
h("div", { key: "btns", style: { display: "flex", gap: "10px" } }, [
|
|
h("button", { key: "ok", onClick: handleSasConfirm, disabled: !canConfirm, style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", padding: "14px", borderRadius: "13px", border: "none", background: canConfirm ? C_GREEN : "rgba(255,255,255,0.05)", color: canConfirm ? "#08160e" : "#56565e", fontFamily: "inherit", fontSize: "14.5px", fontWeight: 700, cursor: canConfirm ? "pointer" : "not-allowed", boxShadow: canConfirm ? "0 8px 24px rgba(62,207,142,0.25)" : "none" } }, [fa(localVerificationConfirmed ? "fa-check-circle" : "fa-check", { key: "i" }), localVerificationConfirmed ? "Confirmed" : "Confirm code"]),
|
|
h("button", { key: "no", onClick: handleVerificationReject, style: { flex: "none", display: "flex", alignItems: "center", justifyContent: "center", gap: "7px", padding: "14px 16px", borderRadius: "13px", border: "1px solid rgba(229,114,122,0.3)", background: "transparent", color: "#e5727a", fontFamily: "inherit", fontSize: "13.5px", fontWeight: 600, cursor: "pointer" } }, [fa("fa-times", { key: "i" }), "Don't match"])
|
|
])
|
|
])
|
|
]);
|
|
} else if (isGenerating) {
|
|
const genSteps = ["Generating ECDH P-384 key pair", "Deriving verification code", "Pinning Perfect Forward Secrecy"];
|
|
inner = h("div", { key: "gen", style: { animation: "sbUp .28s ease" } }, [
|
|
h("div", { key: "head", style: { display: "flex", alignItems: "center", gap: "13px", marginBottom: "22px" } }, [
|
|
h("div", { key: "sp", style: { width: "44px", height: "44px", flex: "none", display: "grid", placeItems: "center" } }, fa("fa-circle-notch", { color: C_ORANGE, fontSize: "32px", animation: "sbSpin 1s linear infinite" })),
|
|
h("div", { key: "tx" }, [
|
|
h("h2", { key: "t", style: { margin: 0, fontSize: "20px", fontWeight: 800, letterSpacing: "-0.4px", color: "#f4f4f6" } }, isCreate ? "Securing your channel" : "Building your answer"),
|
|
h("p", { key: "s", style: { margin: "3px 0 0", fontSize: "13px", color: "#8a8a92" } }, "Forging keys strong enough to resist tampering.")
|
|
])
|
|
]),
|
|
h(
|
|
"div",
|
|
{ key: "steps", style: { display: "flex", flexDirection: "column", borderRadius: "13px", border: "1px solid rgba(255,255,255,0.07)", background: "#141416", overflow: "hidden" } },
|
|
genSteps.map((label, i) => {
|
|
const done = genProgress > i;
|
|
const active = genProgress === i;
|
|
return h("div", { key: i, style: { display: "flex", alignItems: "center", gap: "12px", padding: "13px 15px", borderTop: i ? "1px solid rgba(255,255,255,0.05)" : "none", transition: "background .3s", background: done ? "rgba(62,207,142,0.04)" : "transparent" } }, [
|
|
h(
|
|
"div",
|
|
{ key: "d", style: { flex: "none", width: "20px", height: "20px", borderRadius: "50%", display: "grid", placeItems: "center", background: done ? "rgba(62,207,142,0.12)" : active ? "rgba(240,137,42,0.12)" : "rgba(255,255,255,0.04)", border: `1px solid ${done ? "rgba(62,207,142,0.3)" : active ? "rgba(240,137,42,0.3)" : "rgba(255,255,255,0.1)"}`, transition: "all .3s" } },
|
|
done ? fa("fa-check", { color: C_GREEN, fontSize: "11px" }) : h("span", { style: { width: "6px", height: "6px", borderRadius: "50%", background: active ? C_ORANGE : "#56565e", animation: active ? "sbBlink 1s ease-in-out infinite" : "none" } })
|
|
),
|
|
h("span", { key: "l", style: { fontSize: "13.5px", color: done ? "#cfcfd4" : active ? "#e8e8eb" : "#6b6b73", transition: "color .3s" } }, label)
|
|
]);
|
|
})
|
|
)
|
|
]);
|
|
} else if (isOfferCred || isAnswerCred) {
|
|
inner = h("div", { key: "cred", style: { animation: "sbUp .3s ease" } }, [
|
|
backButton("cback"),
|
|
h("h2", { key: "h", style: { margin: "0 0 6px", fontSize: "23px", fontWeight: 800, letterSpacing: "-0.5px", color: "#f4f4f6" } }, isCreate ? "Share your invitation" : "Send back your answer"),
|
|
h("p", { key: "p", style: { margin: "0 0 18px", fontSize: "14px", lineHeight: 1.55, color: "#8a8a92" } }, isCreate ? "Show the QR or send the code to your peer. It is one-time and expires shortly." : "Give this answer to the channel creator so they can finish the handshake."),
|
|
showQrButton,
|
|
credBlock,
|
|
isOfferCred && h("div", { key: "offerextra", style: { marginTop: "4px" } }, [
|
|
h("div", { key: "lbl", style: { fontSize: "12.5px", fontWeight: 600, color: "#9a9aa2", marginBottom: "8px" } }, "Then receive the answer your peer sends back"),
|
|
h(
|
|
"div",
|
|
{ key: "ta", style: { borderRadius: "12px", border: `1px solid ${hasAnswer ? "rgba(255,255,255,0.18)" : "rgba(255,255,255,0.07)"}`, background: "#141416", padding: "11px 14px", marginBottom: "10px" } },
|
|
h("textarea", { value: answerInput, onChange: (e) => {
|
|
setAnswerInput(e.target.value);
|
|
if (e.target.value.trim().length > 0 && typeof markAnswerCreated === "function") markAnswerCreated();
|
|
}, rows: 2, placeholder: "Paste peer's answer code\u2026", style: { width: "100%", resize: "none", border: "none", outline: "none", background: "transparent", color: "#d7d7db", fontFamily: MONO, fontSize: "12px", lineHeight: 1.55, minHeight: "44px" } })
|
|
),
|
|
h("div", { key: "btns", style: { display: "flex", gap: "10px" } }, [
|
|
h("button", { key: "scan", className: "sb-scan-btn", onClick: () => setShowQRScannerModal(true), style: { flex: "none", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "8px", padding: "14px 16px", borderRadius: "13px", border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.04)", color: "#cfcfd4", fontFamily: "inherit", fontSize: "14px", fontWeight: 700, cursor: "pointer" } }, [fa("fa-camera", { key: "i" }), "Scan"]),
|
|
h("button", { key: "est", onClick: onConnect, disabled: !hasAnswer, style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: "9px", padding: "14px", borderRadius: "13px", border: "none", background: hasAnswer ? C_ORANGE : "rgba(255,255,255,0.05)", color: hasAnswer ? "#1a0f04" : "#56565e", fontFamily: "inherit", fontSize: "14.5px", fontWeight: 700, cursor: hasAnswer ? "pointer" : "not-allowed", boxShadow: hasAnswer ? "0 8px 24px rgba(240,137,42,0.28)" : "none" } }, "Establish connection")
|
|
])
|
|
]),
|
|
isAnswerCred && h("div", { key: "answerextra", style: { marginTop: "4px", display: "flex", alignItems: "center", gap: "10px", padding: "12px 14px", borderRadius: "12px", border: "1px solid rgba(62,207,142,0.18)", background: "rgba(62,207,142,0.05)" } }, [
|
|
fa("fa-circle-notch", { key: "i", color: C_GREEN, animation: "sbSpin 1.4s linear infinite" }),
|
|
h("span", { key: "t", style: { fontSize: "13px", color: "#cfcfd4", fontWeight: 500 } }, "Send this answer to the creator, then wait \u2014 the chat opens once they connect.")
|
|
])
|
|
]);
|
|
} else if (isCreate) {
|
|
inner = h("div", { key: "introC", style: { animation: "sbUp .28s ease" } }, [
|
|
h("h2", { key: "h", style: { margin: "0 0 6px", fontSize: "23px", fontWeight: 800, letterSpacing: "-0.5px", color: "#f4f4f6" } }, "Create a new channel"),
|
|
h("p", { key: "p", style: { margin: "0 0 22px", fontSize: "14px", lineHeight: 1.55, color: "#8a8a92" } }, "Your device generates the keys and a one-time invitation. Nothing touches a server."),
|
|
h("button", { key: "gen", className: "sb-gen-btn", onClick: () => {
|
|
requestNotificationPermissionOnInteraction();
|
|
if (webrtcManagerRef.current) handleCreateOffer();
|
|
}, style: { width: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: "9px", padding: "15px", borderRadius: "13px", border: "none", background: C_ORANGE, color: "#1a0f04", fontFamily: "inherit", fontSize: "15px", fontWeight: 700, cursor: "pointer", boxShadow: "0 8px 24px rgba(240,137,42,0.28)" } }, [fa("fa-bolt", { key: "i" }), "Generate keys & invitation"])
|
|
]);
|
|
} else {
|
|
inner = h("div", { key: "introJ", style: { animation: "sbUp .28s ease" } }, [
|
|
h("h2", { key: "h", style: { margin: "0 0 6px", fontSize: "23px", fontWeight: 800, letterSpacing: "-0.5px", color: "#f4f4f6" } }, "Join a channel"),
|
|
h("p", { key: "p", style: { margin: "0 0 16px", fontSize: "14px", lineHeight: 1.55, color: "#8a8a92" } }, "Scan your peer's QR with your camera, or paste their invitation code."),
|
|
h("button", { key: "scan", className: "sb-scan-btn", onClick: () => {
|
|
requestNotificationPermissionOnInteraction();
|
|
setShowQRScannerModal(true);
|
|
}, style: { width: "100%", display: "flex", alignItems: "center", gap: "13px", padding: "15px 16px", borderRadius: "14px", border: "1px solid rgba(62,207,142,0.3)", background: "rgba(62,207,142,0.06)", color: "inherit", fontFamily: "inherit", cursor: "pointer", textAlign: "left", marginBottom: "14px" } }, [
|
|
h("span", { key: "ic", style: { flex: "none", width: "42px", height: "42px", borderRadius: "12px", display: "grid", placeItems: "center", background: "rgba(62,207,142,0.12)", border: "1px solid rgba(62,207,142,0.28)" } }, fa("fa-camera", { color: C_GREEN, fontSize: "18px" })),
|
|
h("span", { key: "tx", style: { flex: 1 } }, [
|
|
h("span", { key: "t", style: { display: "block", fontSize: "14.5px", fontWeight: 700, color: "#f4f4f6" } }, "Scan QR with camera"),
|
|
h("span", { key: "s", style: { display: "block", fontSize: "12.5px", color: "#8a8a92", marginTop: "1px" } }, "Fastest \u2014 point at your peer's screen")
|
|
]),
|
|
fa("fa-chevron-right", { color: "#6b6b73" })
|
|
]),
|
|
h("div", { key: "or", style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "14px" } }, [
|
|
h("span", { key: "a", style: { flex: 1, height: "1px", background: "rgba(255,255,255,0.07)" } }),
|
|
h("span", { key: "m", style: { fontSize: "11px", fontWeight: 600, color: "#56565e", textTransform: "uppercase", letterSpacing: "0.7px" } }, "or paste code"),
|
|
h("span", { key: "b", style: { flex: 1, height: "1px", background: "rgba(255,255,255,0.07)" } })
|
|
]),
|
|
h(
|
|
"div",
|
|
{ key: "ta", style: { borderRadius: "13px", border: `1px solid ${hasInvite ? "rgba(255,255,255,0.18)" : "rgba(255,255,255,0.07)"}`, background: "#141416", padding: "13px 15px", marginBottom: "12px" } },
|
|
h("textarea", { value: offerInput, onChange: (e) => {
|
|
setOfferInput(e.target.value);
|
|
if (e.target.value.trim().length > 0 && typeof markAnswerCreated === "function") markAnswerCreated();
|
|
}, rows: 3, placeholder: "Paste invitation code here\u2026", style: { width: "100%", resize: "none", border: "none", outline: "none", background: "transparent", color: "#d7d7db", fontFamily: MONO, fontSize: "12.5px", lineHeight: 1.6, minHeight: "66px" } })
|
|
),
|
|
h("button", { key: "connect", onClick: () => {
|
|
requestNotificationPermissionOnInteraction();
|
|
onCreateAnswer();
|
|
}, disabled: !hasInvite || connectionStatus === "connecting", style: { width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "9px", padding: "14px", borderRadius: "13px", border: "none", background: hasInvite && connectionStatus !== "connecting" ? C_ORANGE : "rgba(255,255,255,0.05)", color: hasInvite && connectionStatus !== "connecting" ? "#1a0f04" : "#56565e", fontFamily: "inherit", fontSize: "15px", fontWeight: 700, cursor: hasInvite && connectionStatus !== "connecting" ? "pointer" : "not-allowed", boxShadow: hasInvite && connectionStatus !== "connecting" ? "0 8px 24px rgba(240,137,42,0.28)" : "none" } }, connectionStatus === "connecting" ? "Processing\u2026" : "Connect")
|
|
]);
|
|
}
|
|
const DOWNLOADS = {
|
|
mac: { name: "macOS", format: ".dmg \xB7 Apple Silicon & Intel", icon: "fab fa-apple", url: "https://github.com/SecureBitChat/securebit-desktop/releases/download/v0.1.0/SecureBit.Chat_0.1.0_x64.dmg" },
|
|
win: { name: "Windows", format: ".exe \xB7 64-bit installer", icon: "fab fa-windows", url: "https://github.com/SecureBitChat/securebit-desktop/releases/latest/download/SecureBit.Chat_0.1.0_x64-setup.exe" },
|
|
linux: { name: "Linux", format: ".AppImage", icon: "fab fa-linux", url: "https://github.com/SecureBitChat/securebit-desktop/releases/latest/download/SecureBit.Chat_0.1.0_amd64.AppImage" }
|
|
};
|
|
const detectOS = () => {
|
|
const ua = (navigator.userAgent || "") + " " + (navigator.platform || "");
|
|
if (/Mac|iPhone|iPad|iPod/i.test(ua) && !/Android/i.test(ua)) return "mac";
|
|
if (/Win/i.test(ua)) return "win";
|
|
if (/Linux/i.test(ua) && !/Android/i.test(ua)) return "linux";
|
|
return "win";
|
|
};
|
|
const detectedOS = detectOS();
|
|
const otherOS = ["mac", "win", "linux"].filter((k) => k !== detectedOS);
|
|
const dlLink = (url) => {
|
|
try {
|
|
window.open(url, "_blank", "noopener");
|
|
} catch (e) {
|
|
}
|
|
};
|
|
const platformsMenu = platformsOpen && h("div", { key: "platmenu", className: "sb-platforms-menu", style: { position: "absolute", left: 0, bottom: "calc(100% + 10px)", width: "344px", maxWidth: "100%", borderRadius: "16px", border: "1px solid rgba(255,255,255,0.1)", background: "#161618", boxShadow: "0 24px 60px rgba(0,0,0,0.55)", overflow: "hidden", zIndex: 25, animation: "sbUp .2s ease" } }, [
|
|
h("div", { key: "mh", style: { display: "flex", alignItems: "center", gap: "10px", padding: "14px 16px", borderBottom: "1px solid rgba(255,255,255,0.06)" } }, [
|
|
h("div", { key: "t", style: { flex: 1, lineHeight: 1.2 } }, [
|
|
h("div", { key: "a", style: { fontSize: "14px", fontWeight: 800, color: "#f4f4f6" } }, "Download SecureBit"),
|
|
h("div", { key: "b", style: { fontSize: "11.5px", color: "#7b7b83" } }, "Free \xB7 open source")
|
|
]),
|
|
h("span", { key: "pill", style: { fontFamily: MONO, fontSize: "10px", fontWeight: 600, color: C_GREEN, padding: "3px 8px", borderRadius: "6px", background: "rgba(62,207,142,0.1)", border: "1px solid rgba(62,207,142,0.22)" } }, "You're on Web")
|
|
]),
|
|
h(
|
|
"div",
|
|
{ key: "rec", style: { padding: "12px 12px 6px" } },
|
|
h("button", { key: "b", onClick: () => dlLink(DOWNLOADS[detectedOS].url), style: { width: "100%", display: "flex", alignItems: "center", gap: "12px", padding: "13px 14px", borderRadius: "12px", border: "1px solid rgba(240,137,42,0.4)", background: "rgba(240,137,42,0.08)", color: "inherit", fontFamily: "inherit", cursor: "pointer", textAlign: "left" } }, [
|
|
h("span", { key: "ic", style: { flex: "none", display: "grid", placeItems: "center", width: "38px", height: "38px", borderRadius: "11px", background: "rgba(240,137,42,0.14)", border: "1px solid rgba(240,137,42,0.3)", color: C_ORANGE } }, h("i", { className: DOWNLOADS[detectedOS].icon, style: { fontSize: "17px" } })),
|
|
h("span", { key: "tx", style: { flex: 1, minWidth: 0 } }, [
|
|
h("span", { key: "n", style: { display: "block", fontSize: "13.5px", fontWeight: 700, color: "#f4f4f6" } }, DOWNLOADS[detectedOS].name),
|
|
h("span", { key: "f", style: { display: "block", fontSize: "11px", color: "#f0b072", marginTop: "1px" } }, `Recommended for this device \xB7 ${DOWNLOADS[detectedOS].format}`)
|
|
]),
|
|
fa("fa-download", { color: C_ORANGE })
|
|
])
|
|
),
|
|
h(
|
|
"div",
|
|
{ key: "others", style: { padding: "0 12px 8px", display: "flex", flexDirection: "column", gap: "2px" } },
|
|
otherOS.map((k) => h("button", { key: k, onClick: () => dlLink(DOWNLOADS[k].url), style: { width: "100%", display: "flex", alignItems: "center", gap: "12px", padding: "11px 14px", borderRadius: "11px", border: "none", background: "transparent", color: "inherit", fontFamily: "inherit", cursor: "pointer", textAlign: "left" } }, [
|
|
h("span", { key: "ic", style: { flex: "none", display: "grid", placeItems: "center", width: "34px", height: "34px", borderRadius: "10px", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", color: "#cfcfd4" } }, h("i", { className: DOWNLOADS[k].icon, style: { fontSize: "15px" } })),
|
|
h("span", { key: "tx", style: { flex: 1, minWidth: 0 } }, [
|
|
h("span", { key: "n", style: { display: "block", fontSize: "13px", fontWeight: 600, color: "#e8e8eb" } }, DOWNLOADS[k].name),
|
|
h("span", { key: "f", style: { display: "block", fontSize: "11px", color: "#7b7b83", marginTop: "1px" } }, DOWNLOADS[k].format)
|
|
]),
|
|
fa("fa-download", { color: "#8a8a92" })
|
|
]))
|
|
),
|
|
h("div", { key: "soon", style: { display: "flex", alignItems: "center", gap: "9px", padding: "12px 16px", borderTop: "1px solid rgba(255,255,255,0.06)", background: "rgba(255,255,255,0.015)" } }, [
|
|
fa("fa-clock", { key: "i", color: "#6b6b73" }),
|
|
h("span", { key: "t", style: { fontSize: "11.5px", lineHeight: 1.45, color: "#7b7b83" } }, "Mobile (iOS, Android) and browser extensions (Chrome, Firefox, Opera) are coming soon.")
|
|
])
|
|
]);
|
|
const footer = h("div", { key: "footer", className: "sb-conn-footer", style: { position: "relative", marginTop: "30px", paddingTop: "18px", borderTop: "1px solid rgba(255,255,255,0.06)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", flexWrap: "wrap" } }, [
|
|
h("button", { key: "dl", onClick: () => setPlatformsOpen((v) => !v), style: { display: "inline-flex", alignItems: "center", gap: "9px", padding: "8px 13px 8px 9px", borderRadius: "10px", border: `1px solid ${platformsOpen ? "rgba(240,137,42,0.4)" : "rgba(255,255,255,0.08)"}`, background: platformsOpen ? "rgba(240,137,42,0.06)" : "rgba(255,255,255,0.02)", color: "inherit", fontFamily: "inherit", cursor: "pointer", transition: "all .15s" } }, [
|
|
fa("fa-download", { key: "i", color: C_ORANGE }),
|
|
h("span", { key: "t", style: { fontSize: "12.5px", fontWeight: 700, color: "#e8e8eb" } }, "Download desktop app"),
|
|
fa("fa-chevron-down", { key: "c", color: "#6b6b73", style: { fontSize: "11px", transform: platformsOpen ? "rotate(180deg)" : "rotate(0deg)", transition: "transform .2s" } })
|
|
]),
|
|
h("button", { key: "settings", className: "sb-link", onClick: () => setShowIceSettings && setShowIceSettings(true), style: { display: "inline-flex", alignItems: "center", gap: "7px", background: "none", border: "none", color: "#8a8a92", fontFamily: "inherit", fontSize: "12.5px", fontWeight: 600, cursor: "pointer" } }, [fa("fa-sliders-h", { key: "i" }), "Advanced settings"]),
|
|
platformsMenu
|
|
]);
|
|
const settingsOverlay = showIceSettings && typeof window !== "undefined" && window.IceServerSettings ? h(window.IceServerSettings, {
|
|
key: "ice-settings",
|
|
isOpen: true,
|
|
embedded: true,
|
|
onClose: () => setShowIceSettings(false),
|
|
initial: {
|
|
useCustom: Array.isArray(customIceServers) && customIceServers.length > 0,
|
|
serversText: iceServersText,
|
|
privacyMode: relayOnlyMode ? "relay-only" : "standard",
|
|
persisted: iceSettingsPersisted
|
|
},
|
|
hasSaved: iceSettingsPersisted,
|
|
onApply: handleApplyIceSettings,
|
|
onForget: handleForgetIceSettings
|
|
}) : null;
|
|
const rightPanel = h("div", { key: "right", style: compact ? { flex: 1, minWidth: 0, width: "100%", position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", height: "100%" } : { flex: "0.95 1 460px", minWidth: "min(100%, 320px)", position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", height: "100vh" } }, [
|
|
h(
|
|
"div",
|
|
{ key: "scroll", className: "custom-scrollbar", style: { flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", padding: "42px 44px" } },
|
|
h("div", { style: { maxWidth: "430px", width: "100%", margin: "auto" } }, [
|
|
h("div", { key: "kicker", style: { fontFamily: MONO, fontSize: "11px", fontWeight: 600, color: "#6b6b73", textTransform: "uppercase", letterSpacing: "1px", marginBottom: "10px" } }, kicker),
|
|
segToggle,
|
|
inner,
|
|
footer
|
|
])
|
|
),
|
|
settingsOverlay
|
|
]);
|
|
const qrModal = qrModalOpen && qrCodeUrl && h(
|
|
"div",
|
|
{ key: "qrmodal", onClick: () => setQrModalOpen(false), style: { position: "fixed", inset: 0, zIndex: 50, display: "flex", alignItems: "center", justifyContent: "center", padding: "32px", background: "rgba(6,6,8,0.82)", backdropFilter: "blur(10px)", animation: "sbUp .2s ease" } },
|
|
h("div", { onClick: (e) => e.stopPropagation(), style: { width: "100%", maxWidth: "460px", borderRadius: "22px", border: "1px solid rgba(255,255,255,0.1)", background: "#111113", boxShadow: "0 30px 90px rgba(0,0,0,0.6)", overflow: "hidden" } }, [
|
|
h("div", { key: "head", style: { display: "flex", alignItems: "center", gap: "11px", padding: "18px 20px", borderBottom: "1px solid rgba(255,255,255,0.06)" } }, [
|
|
h("span", { key: "d", style: { width: "9px", height: "9px", borderRadius: "50%", background: accent } }),
|
|
h("div", { key: "tx", style: { flex: 1, lineHeight: 1.2 } }, [
|
|
h("div", { key: "t", style: { fontSize: "15.5px", fontWeight: 800, color: "#f4f4f6" } }, isCreate ? "Share your invitation" : "Send back your answer"),
|
|
h("div", { key: "s", style: { fontSize: "12px", color: "#7b7b83" } }, `${isCreate ? "offer" : "answer"} \xB7 one-time`)
|
|
]),
|
|
h("button", { key: "x", onClick: () => setQrModalOpen(false), style: { width: "32px", height: "32px", display: "grid", placeItems: "center", borderRadius: "9px", border: "none", background: "rgba(255,255,255,0.05)", color: "#9a9aa2", cursor: "pointer" } }, fa("fa-times"))
|
|
]),
|
|
h("div", { key: "body", style: { padding: "22px 24px 24px" } }, [
|
|
h(
|
|
"div",
|
|
{ key: "qr", style: { position: "relative", width: "100%", aspectRatio: "1", borderRadius: "18px", overflow: "hidden", background: "#fff", padding: "18px", display: "grid", placeItems: "center" } },
|
|
h("img", { src: qrCodeUrl, alt: "QR code", style: { width: "100%", height: "100%", objectFit: "contain", display: "block" } })
|
|
),
|
|
h("div", { key: "ctrls", style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px", marginTop: "18px" } }, [
|
|
(qrFramesTotal || 0) >= 1 && h("div", { key: "frame", style: { display: "flex", alignItems: "center", gap: "9px" } }, [
|
|
h("span", { key: "l", style: { fontFamily: MONO, fontSize: "12px", fontWeight: 600, color: "#9a9aa2" } }, `Frame ${Math.max(1, qrFrameIndex || 1)} / ${qrFramesTotal || 1}`),
|
|
h("div", { key: "dots", style: { display: "flex", gap: "5px" } }, Array.from({ length: qrFramesTotal || 1 }, (_, i) => h("span", { key: i, style: { width: "7px", height: "7px", borderRadius: "50%", background: i + 1 === (qrFrameIndex || 1) ? accent : "rgba(255,255,255,0.14)", transition: "background .25s" } })))
|
|
]),
|
|
(qrFramesTotal || 0) > 1 && h("div", { key: "nav", style: { display: "flex", alignItems: "center", gap: "6px" } }, [
|
|
h("button", { key: "prev", onClick: prevQrFrame, style: { width: "40px", height: "36px", display: "grid", placeItems: "center", borderRadius: "10px", border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.04)", color: "#cfcfd4", cursor: "pointer" } }, fa("fa-chevron-left")),
|
|
h("button", { key: "auto", onClick: toggleQrManualMode, style: { display: "inline-flex", alignItems: "center", gap: "7px", padding: "9px 18px", borderRadius: "10px", border: `1px solid ${qrManualMode ? "rgba(255,255,255,0.1)" : "rgba(240,137,42,0.45)"}`, background: qrManualMode ? "rgba(255,255,255,0.04)" : "rgba(240,137,42,0.08)", color: qrManualMode ? "#9a9aa2" : C_ORANGE, fontFamily: "inherit", fontSize: "13px", fontWeight: 600, cursor: "pointer" } }, qrManualMode ? "Manual" : "Auto"),
|
|
h("button", { key: "next", onClick: nextQrFrame, style: { width: "40px", height: "36px", display: "grid", placeItems: "center", borderRadius: "10px", border: "1px solid rgba(255,255,255,0.1)", background: "rgba(255,255,255,0.04)", color: "#cfcfd4", cursor: "pointer" } }, fa("fa-chevron-right"))
|
|
]),
|
|
h("p", { key: "hint", style: { margin: "2px 0 0", textAlign: "center", fontSize: "12px", lineHeight: 1.5, color: "#6b6b73" } }, (qrFramesTotal || 0) > 1 ? `The handshake is split across ${qrFramesTotal} frames \u2014 keep this open until your peer captures all of them.` : "Keep this open until your peer captures the code.")
|
|
])
|
|
])
|
|
])
|
|
);
|
|
const hero = h("div", { key: "hero", style: { display: "flex", flexWrap: "wrap", minHeight: "100vh", width: "100%", background: "#0f0f11", color: "#e8e8eb" } }, [leftPanel, rightPanel]);
|
|
const uniqueSection = atIntro && h(UniqueFeatureSlider, { key: "unique-features-slider" });
|
|
const partnersSection = atIntro && h(BecomePartner, { key: "become-partner" });
|
|
const roadmapSection = atIntro && h(Roadmap, { key: "roadmap" });
|
|
const communitySection = atIntro && h(CommunityCTA, { key: "community-cta" });
|
|
const keyframeStyle = h("style", { key: "kf", dangerouslySetInnerHTML: {
|
|
__html: "@keyframes sbFlowR{0%{left:4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:96%;opacity:0}}@keyframes sbFlowL{0%{left:96%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:4%;opacity:0}}@keyframes sbPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}@keyframes sbSpin{to{transform:rotate(360deg)}}@keyframes sbUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes sbNode{0%,100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}50%{box-shadow:0 0 0 6px rgba(62,207,142,.06)}}@keyframes sbScan{0%{top:8%}100%{top:88%}}@keyframes sbBlink{0%,100%{opacity:1}50%{opacity:.35}}"
|
|
} });
|
|
if (compact) {
|
|
return h("div", { className: "sb-start", style: { flex: 1, minHeight: 0, width: "100%", display: "flex", flexDirection: "column", background: "#0f0f11", color: "#e8e8eb" } }, [keyframeStyle, rightPanel, qrModal]);
|
|
}
|
|
return h("div", { className: "sb-start", style: { width: "100%" } }, [keyframeStyle, hero, uniqueSection, partnersSection, roadmapSection, communitySection, qrModal]);
|
|
};
|
|
var createScrollToBottomFunction = (chatMessagesRef) => {
|
|
return () => {
|
|
if (chatMessagesRef && chatMessagesRef.current) {
|
|
const scrollAttempt = () => {
|
|
if (chatMessagesRef.current) {
|
|
chatMessagesRef.current.scrollTo({
|
|
top: chatMessagesRef.current.scrollHeight,
|
|
behavior: "smooth"
|
|
});
|
|
}
|
|
};
|
|
scrollAttempt();
|
|
setTimeout(scrollAttempt, 50);
|
|
setTimeout(scrollAttempt, 150);
|
|
setTimeout(scrollAttempt, 300);
|
|
requestAnimationFrame(() => {
|
|
setTimeout(scrollAttempt, 100);
|
|
});
|
|
}
|
|
};
|
|
};
|
|
var runSecurityReport = async (webrtcManager) => {
|
|
let securityData = null;
|
|
try {
|
|
if (webrtcManager && window.EnhancedSecureCryptoUtils) {
|
|
securityData = await window.EnhancedSecureCryptoUtils.calculateSecurityLevel(webrtcManager);
|
|
}
|
|
} catch (e) {
|
|
}
|
|
if (!securityData) {
|
|
alert("Security verification in progress\u2026\nPlease wait for real-time cryptographic verification to complete.");
|
|
return;
|
|
}
|
|
const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """ })[c]);
|
|
const accent = securityData.color === "orange" ? "#f0892a" : securityData.color === "yellow" ? "#e3c84e" : securityData.color === "red" ? "#e5727a" : "#3ecf8e";
|
|
const accentRGB = securityData.color === "orange" ? "240,137,42" : securityData.color === "yellow" ? "227,200,78" : securityData.color === "red" ? "229,114,122" : "62,207,142";
|
|
const score = Math.max(0, Math.min(100, Math.round(securityData.score || 0)));
|
|
const circ = 2 * Math.PI * 56;
|
|
const dashArray = `${(circ * Math.min(1, score / 100)).toFixed(1)} ${circ.toFixed(1)}`;
|
|
const level = String(securityData.level || "SECURE").toUpperCase();
|
|
const isReal = securityData.isRealData !== false;
|
|
const entries = securityData.verificationResults ? Object.entries(securityData.verificationResults) : [];
|
|
const passedCount = Number.isFinite(securityData.passedChecks) ? securityData.passedChecks : entries.filter(([, r]) => r && r.passed).length;
|
|
const totalCount = Number.isFinite(securityData.totalChecks) ? securityData.totalChecks : entries.length;
|
|
const verifiedAt = new Date(securityData.timestamp || Date.now()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
|
|
const pretty = (k) => {
|
|
let s = String(k).replace(/^verify/i, "").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").trim();
|
|
s = s.replace(/\b(ecdh|ecdsa|aes|gcm|hmac|pfs|sas|mitm|asn|dtls|hkdf|spki|oid|p384)\b/gi, (m) => m.toUpperCase());
|
|
return s.charAt(0).toUpperCase() + s.slice(1);
|
|
};
|
|
const checkIcon = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#3ecf8e" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-11"/></svg>`;
|
|
const xIcon = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#e5727a" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>`;
|
|
const testsHTML = entries.map(([k, r], i) => {
|
|
const passed = !!(r && r.passed);
|
|
const desc = r && r.details || (passed ? "Test passed" : "Test failed or unavailable");
|
|
const bg = passed ? "#161618" : "#121214";
|
|
const border = passed ? "rgba(62,207,142,0.16)" : "rgba(229,114,122,0.18)";
|
|
const iconBg = passed ? "rgba(62,207,142,0.12)" : "rgba(229,114,122,0.1)";
|
|
const iconBorder = passed ? "rgba(62,207,142,0.26)" : "rgba(229,114,122,0.24)";
|
|
const titleColor = passed ? "#f4f4f6" : "#cfcfd4";
|
|
return `<div style="display:flex; align-items:flex-start; gap:13px; padding:16px 18px; border-radius:14px; background:${bg}; border:1px solid ${border}; animation:svIn .3s cubic-bezier(.2,.7,.3,1) both; animation-delay:${(i * 0.04).toFixed(2)}s;">
|
|
<span style="flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:${iconBg}; border:1px solid ${iconBorder};">${passed ? checkIcon : xIcon}</span>
|
|
<div style="flex:1; min-width:0;">
|
|
<div style="font-size:14.5px; font-weight:700; letter-spacing:-0.2px; color:${titleColor}; margin-bottom:3px;">${esc(pretty(k))}</div>
|
|
<div style="font-family:${MONO}; font-size:11.5px; line-height:1.45; color:#8a8a92;">${esc(desc)}</div>
|
|
</div>
|
|
</div>`;
|
|
}).join("");
|
|
const modal = document.createElement("div");
|
|
modal.id = "sb-security-report";
|
|
modal.style.cssText = "position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(8,8,10,0.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); font-family:'Manrope',system-ui,-apple-system,sans-serif; overflow:auto;";
|
|
modal.innerHTML = `
|
|
<style>@keyframes svIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes svPulse{0%,100%{opacity:1}50%{opacity:.4}}</style>
|
|
<div style="position:relative; max-width:960px; width:100%; border-radius:20px; background:radial-gradient(1100px 640px at 50% -6%, rgba(${accentRGB},0.05), transparent 62%), #0f0f11; border:1px solid rgba(255,255,255,0.08); color:#e8e8eb; padding:30px; box-shadow:0 30px 70px rgba(0,0,0,0.55); animation:svIn .3s cubic-bezier(.2,.7,.3,1); max-height:calc(100vh - 48px); overflow:auto;">
|
|
<button class="sv-close" type="button" title="Close" style="position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); color:#8a8a92; cursor:pointer; z-index:2;">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" style="pointer-events:none;"><path d="M6 6l12 12M18 6L6 18"/></svg>
|
|
</button>
|
|
<div style="position:relative; overflow:hidden; border-radius:18px; background:#141416; border:1px solid rgba(255,255,255,0.07); padding:28px 30px; display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin-bottom:20px;">
|
|
<div style="position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(${accentRGB},0.6), transparent);"></div>
|
|
<div style="position:relative; flex:none; width:128px; height:128px;">
|
|
<svg width="128" height="128" viewBox="0 0 128 128" style="transform:rotate(-90deg);">
|
|
<circle cx="64" cy="64" r="56" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="9"/>
|
|
<circle cx="64" cy="64" r="56" fill="none" stroke="${accent}" stroke-width="9" stroke-linecap="round" stroke-dasharray="${dashArray}"/>
|
|
</svg>
|
|
<div style="position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;">
|
|
<span style="font-size:30px; font-weight:800; letter-spacing:-1px; color:#f4f4f6; line-height:1;">${score}</span>
|
|
<span style="font-family:${MONO}; font-size:10px; font-weight:600; color:#6b6b73; text-transform:uppercase; letter-spacing:1px; margin-top:4px;">/ 100 pts</span>
|
|
</div>
|
|
</div>
|
|
<div style="flex:1; min-width:240px;">
|
|
<div style="font-family:${MONO}; font-size:11px; font-weight:600; color:#6b6b73; text-transform:uppercase; letter-spacing:1.6px; margin-bottom:10px;">Real-time security verification</div>
|
|
<div style="display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;">
|
|
<h2 style="margin:0; font-size:26px; font-weight:800; letter-spacing:-0.7px; color:#f4f4f6;">Security level: ${esc(level)}</h2>
|
|
<span style="display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:9px; background:rgba(${accentRGB},0.12); border:1px solid rgba(${accentRGB},0.3); font-family:${MONO}; font-size:11px; font-weight:700; color:${accent}; text-transform:uppercase; letter-spacing:0.6px;"><span style="width:7px; height:7px; border-radius:50%; background:${accent}; animation:svPulse 2s ease-in-out infinite;"></span>Active</span>
|
|
</div>
|
|
<div style="display:flex; gap:28px; flex-wrap:wrap;">
|
|
<div><div style="font-family:${MONO}; font-size:10px; font-weight:600; color:#56565e; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;">Tests passed</div><div style="font-size:15px; font-weight:700; color:#e8e8eb;"><span style="color:${accent};">${passedCount}</span> / ${totalCount}</div></div>
|
|
<div><div style="font-family:${MONO}; font-size:10px; font-weight:600; color:#56565e; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;">Verified at</div><div style="font-family:${MONO}; font-size:15px; font-weight:600; color:#e8e8eb;">${esc(verifiedAt)}</div></div>
|
|
<div><div style="font-family:${MONO}; font-size:10px; font-weight:600; color:#56565e; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;">Source</div><div style="font-size:15px; font-weight:600; color:#e8e8eb;">${isReal ? "Real cryptographic tests" : "Simulated data"}</div></div>
|
|
</div>
|
|
</div>
|
|
<button class="sv-rerun" type="button" style="flex:none; display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:11px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.025); color:#cfcfd4; font-family:'Manrope',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="pointer-events:none;"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
|
|
Re-run
|
|
</button>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(248px, 1fr)); gap:12px;">${testsHTML}</div>
|
|
<div style="display:flex; align-items:center; gap:12px; margin-top:18px; padding:16px 20px; border-radius:14px; background:rgba(${accentRGB},0.06); border:1px solid rgba(${accentRGB},0.18);">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="${accent}" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="flex:none;"><path d="M12 3l8 4v5c0 4.5-3.2 7.8-8 9-4.8-1.2-8-4.5-8-9V7l8-4z"/><path d="M9.2 12.2l2 2 3.6-3.8"/></svg>
|
|
<span style="font-size:14px; font-weight:600; color:#e8e8eb;">${isReal ? "Real-time verification using actual cryptographic functions \u2014 no mock data." : "Warning: connection may not be fully established \u2014 values may be simulated."}</span>
|
|
</div>
|
|
</div>`;
|
|
const onKey = (e) => {
|
|
if (e.key === "Escape") close();
|
|
};
|
|
const close = () => {
|
|
if (modal.parentNode) modal.remove();
|
|
document.removeEventListener("keydown", onKey);
|
|
};
|
|
modal.querySelector(".sv-close").addEventListener("click", close);
|
|
modal.addEventListener("click", (e) => {
|
|
if (e.target === modal) close();
|
|
});
|
|
document.addEventListener("keydown", onKey);
|
|
const rerun = modal.querySelector(".sv-rerun");
|
|
rerun.addEventListener("mouseenter", () => {
|
|
rerun.style.borderColor = "rgba(240,137,42,0.45)";
|
|
rerun.style.color = "#f0892a";
|
|
});
|
|
rerun.addEventListener("mouseleave", () => {
|
|
rerun.style.borderColor = "rgba(255,255,255,0.1)";
|
|
rerun.style.color = "#cfcfd4";
|
|
});
|
|
rerun.addEventListener("click", () => {
|
|
close();
|
|
runSecurityReport(webrtcManager);
|
|
});
|
|
document.body.appendChild(modal);
|
|
};
|
|
var SecureBitChatHeader = ({ status, onDisconnect, webrtcManager, title, isOffline, peerPresence, onRenameTitle }) => {
|
|
const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
const [showNetwork, setShowNetwork] = React.useState(false);
|
|
const [sec, setSec] = React.useState(null);
|
|
const [editingName, setEditingName] = React.useState(false);
|
|
const [nameDraft, setNameDraft] = React.useState("");
|
|
React.useEffect(() => {
|
|
let alive = true;
|
|
const fetchSec = async () => {
|
|
try {
|
|
if (!webrtcManager) return;
|
|
let data = null;
|
|
if (typeof webrtcManager.getRealSecurityLevel === "function") data = await webrtcManager.getRealSecurityLevel();
|
|
else if (typeof webrtcManager.calculateAndReportSecurityLevel === "function") data = await webrtcManager.calculateAndReportSecurityLevel();
|
|
else if (window.EnhancedSecureCryptoUtils) data = await window.EnhancedSecureCryptoUtils.calculateSecurityLevel(webrtcManager);
|
|
if (alive && data && data.isRealData !== false) setSec(data);
|
|
} catch (e) {
|
|
}
|
|
};
|
|
fetchSec();
|
|
const onCalc = (e) => {
|
|
if (alive && e.detail && e.detail.securityData) setSec(e.detail.securityData);
|
|
};
|
|
document.addEventListener("real-security-calculated", onCalc);
|
|
const iv = setInterval(fetchSec, 15e3);
|
|
return () => {
|
|
alive = false;
|
|
clearInterval(iv);
|
|
document.removeEventListener("real-security-calculated", onCalc);
|
|
};
|
|
}, [webrtcManager]);
|
|
const onlineConnected = status === "connected" || status === "verified";
|
|
const dropped = status === "disconnected" || status === "peer_disconnected";
|
|
const connected = onlineConnected && !isOffline;
|
|
const connDot = isOffline || dropped ? "#e5727a" : onlineConnected ? "#3ecf8e" : "#e3c84e";
|
|
const connLabel = isOffline ? "Offline" : onlineConnected ? "Connected" : status === "peer_disconnected" ? "Peer disconnected" : status === "disconnected" ? "Disconnected" : "Connecting\u2026";
|
|
const connGlow = isOffline || dropped ? "0 0 0 3px rgba(229,114,122,0.16)" : onlineConnected ? "0 0 0 3px rgba(62,207,142,0.16)" : "0 0 0 3px rgba(227,200,78,0.16)";
|
|
const peerDot = onlineConnected && !isOffline ? PRESENCE_DOT[peerPresence] || "#3ecf8e" : connDot;
|
|
const peerPresenceWord = onlineConnected && !isOffline && peerPresence ? PRESENCE_WORD[peerPresence] || null : null;
|
|
const startRename = () => {
|
|
setNameDraft(title || "");
|
|
setEditingName(true);
|
|
};
|
|
const commitRename = () => {
|
|
if (typeof onRenameTitle === "function") onRenameTitle(nameDraft);
|
|
setEditingName(false);
|
|
};
|
|
const renameKey = (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
commitRename();
|
|
} else if (e.key === "Escape") {
|
|
setEditingName(false);
|
|
}
|
|
};
|
|
const passed = sec && Number.isFinite(sec.passedChecks) ? sec.passedChecks : null;
|
|
const total = sec && Number.isFinite(sec.totalChecks) ? sec.totalChecks : null;
|
|
const scoreLabel = passed != null && total ? passed + "/" + total : sec ? sec.score + "%" : "\u2014";
|
|
const accent = sec ? sec.color === "green" ? "#3ecf8e" : sec.color === "orange" ? "#f0892a" : sec.color === "yellow" ? "#e3c84e" : "#e5727a" : "#3ecf8e";
|
|
const secBtn = React.createElement("div", {
|
|
key: "sec",
|
|
title: "Run security verification",
|
|
onClick: () => runSecurityReport(webrtcManager),
|
|
className: "sb-secpill",
|
|
style: { display: "flex", alignItems: "center", gap: "9px", padding: "7px 13px", borderRadius: "9px", border: "1px solid " + (showNetwork ? "rgba(255,255,255,0.16)" : "rgba(255,255,255,0.07)"), background: showNetwork ? "rgba(255,255,255,0.05)" : "rgba(255,255,255,0.02)", cursor: "pointer", fontFamily: "inherit", transition: "all .15s" }
|
|
}, [
|
|
React.createElement("i", { key: "i", className: "fas fa-shield-halved", style: { color: accent, fontSize: "13px" } }),
|
|
React.createElement("span", { key: "l", className: "sb-sec-label", style: { fontSize: "13px", fontWeight: 600, color: "#e8e8eb" } }, sec ? sec.level || "Secure" : "Secure"),
|
|
React.createElement("span", { key: "d", className: "sb-sec-div", style: { width: "1px", height: "13px", background: "rgba(255,255,255,0.12)" } }),
|
|
React.createElement("span", { key: "s", className: "sb-sec-score", style: { fontFamily: MONO, fontSize: "11.5px", fontWeight: 500, color: "#8a8a92" } }, scoreLabel),
|
|
React.createElement("button", {
|
|
key: "c",
|
|
type: "button",
|
|
title: "Network & crypto details",
|
|
onClick: (e) => {
|
|
e.stopPropagation();
|
|
setShowNetwork((v) => !v);
|
|
},
|
|
style: { background: "none", border: "none", padding: 0, margin: 0, cursor: "pointer", display: "grid", placeItems: "center" }
|
|
}, React.createElement("i", { className: "fas fa-chevron-down", style: { color: "#6b6b73", fontSize: "11px", transform: showNetwork ? "rotate(180deg)" : "rotate(0deg)", transition: "transform .2s" } }))
|
|
]);
|
|
const headerResponsiveCss = React.createElement("style", { key: "hdr-css", dangerouslySetInnerHTML: {
|
|
__html: (
|
|
// Mobile: leave room for the drawer hamburger and shed non-essential header
|
|
// chrome so avatar + name + status + Disconnect fit a narrow screen.
|
|
"@media (max-width:768px){.sb-chat-header{padding-left:60px !important;gap:10px !important;}.sb-chat-header .sb-sec-score,.sb-chat-header .sb-sec-label,.sb-chat-header .sb-sec-div{display:none !important;}.sb-chat-header .sb-secpill{padding:8px !important;gap:6px !important;}.sb-chat-header .sb-conn-text{display:none !important;}.sb-chat-header .sb-conn{padding:9px !important;}.sb-chat-header .sb-hdr-sub{display:none !important;}}@media (max-width:480px){.sb-chat-header{padding-right:12px !important;gap:8px !important;}}"
|
|
)
|
|
} });
|
|
const header = React.createElement("header", {
|
|
key: "hdr",
|
|
className: "sb-chat-header",
|
|
style: { flex: "none", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "24px", padding: "0 20px", height: "64px", borderBottom: "1px solid rgba(255,255,255,0.06)", background: "rgba(18,18,20,0.72)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)" }
|
|
}, [
|
|
headerResponsiveCss,
|
|
// The SecureBit brand/logo lives in the left rail; this header identifies the
|
|
// ACTIVE conversation — avatar monogram + local label + connection status.
|
|
React.createElement("div", { key: "left", style: { display: "flex", alignItems: "center", gap: "12px", minWidth: 0 } }, [
|
|
React.createElement("div", { key: "avatar", style: { position: "relative", flex: "none", width: "36px", height: "36px", borderRadius: "10px", display: "grid", placeItems: "center", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.09)", fontSize: "13px", fontWeight: 700, letterSpacing: "-0.3px", color: "#e8e8eb" } }, [
|
|
monoInitials(title || "Chat"),
|
|
React.createElement("span", { key: "dot", style: { position: "absolute", right: "-2px", bottom: "-2px", width: "11px", height: "11px", borderRadius: "50%", background: peerDot, border: "2px solid #121214" } })
|
|
]),
|
|
editingName ? React.createElement("div", { key: "edit", style: { display: "flex", flexDirection: "column", gap: "4px", minWidth: 0 } }, [
|
|
React.createElement("div", { key: "row", style: { display: "flex", alignItems: "center", gap: "6px" } }, [
|
|
React.createElement("input", { key: "in", autoFocus: true, value: nameDraft, maxLength: 32, placeholder: "Name this chat", onChange: (e) => setNameDraft(e.target.value), onKeyDown: renameKey, onBlur: commitRename, style: { width: "210px", padding: "5px 10px", borderRadius: "8px", border: "1px solid rgba(240,137,42,0.55)", background: "#0f0f11", color: "#f4f4f6", fontFamily: "inherit", fontSize: "14px", fontWeight: 700, outline: "none" } }),
|
|
React.createElement("button", { key: "ok", onMouseDown: (e) => e.preventDefault(), onClick: commitRename, title: "Save", style: { flex: "none", width: "28px", height: "28px", borderRadius: "8px", display: "grid", placeItems: "center", border: "none", background: "#f0892a", color: "#1a0f04", cursor: "pointer" } }, React.createElement("i", { className: "fas fa-check", style: { fontSize: "12px" } }))
|
|
]),
|
|
React.createElement("div", { key: "hint", style: { fontSize: "11px", color: "#56565e" } }, "Local label \xB7 stored only on this device")
|
|
]) : React.createElement("div", { key: "txt", style: { lineHeight: 1.2, minWidth: 0 } }, [
|
|
React.createElement("div", { key: "r1", style: { display: "flex", alignItems: "center", gap: "7px" } }, [
|
|
React.createElement("span", { key: "n", style: { fontSize: "15px", fontWeight: 800, letterSpacing: "-0.3px", color: "#f4f4f6", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, title || "Secure chat"),
|
|
React.createElement("button", { key: "edit", onClick: startRename, title: "Rename chat (local only)", style: { flex: "none", width: "24px", height: "24px", borderRadius: "7px", display: "grid", placeItems: "center", border: "none", background: "transparent", color: "#56565e", cursor: "pointer" } }, React.createElement("i", { className: "fas fa-pen", style: { fontSize: "11px" } }))
|
|
]),
|
|
React.createElement("div", { key: "r2", className: "sb-hdr-sub", style: { fontSize: "11px", color: "#6b6b73", fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, isOffline ? "No network \xB7 reconnecting" : peerPresenceWord || (onlineConnected ? "P2P \xB7 end-to-end encrypted" : status === "peer_disconnected" ? "Peer disconnected" : status === "disconnected" ? "Disconnected" : "Connecting\u2026"))
|
|
])
|
|
]),
|
|
secBtn,
|
|
React.createElement("div", { key: "right", className: "sb-hdr-right", style: { display: "flex", alignItems: "center", gap: "9px" } }, [
|
|
React.createElement("div", { key: "conn", className: "sb-conn", style: { display: "flex", alignItems: "center", gap: "8px", padding: "8px 13px", borderRadius: "9px", border: "1px solid rgba(255,255,255,0.07)", background: "rgba(255,255,255,0.02)" } }, [
|
|
React.createElement("span", { key: "dot", style: { flex: "none", width: "7px", height: "7px", borderRadius: "50%", background: connDot, boxShadow: connGlow } }),
|
|
React.createElement("span", { key: "t", className: "sb-conn-text", style: { fontSize: "13px", fontWeight: 600, color: "#cfcfd4" } }, connLabel)
|
|
]),
|
|
React.createElement("button", { key: "dc", onClick: onDisconnect, className: "sb-disconnect", style: { display: "flex", alignItems: "center", gap: "7px", padding: "8px 14px", borderRadius: "9px", border: "1px solid rgba(255,255,255,0.08)", background: "transparent", color: "#9a9aa2", fontFamily: "inherit", fontSize: "13px", fontWeight: 600, cursor: "pointer", transition: "all .15s" } }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-power-off", style: { fontSize: "12px" } }),
|
|
React.createElement("span", { key: "t", className: "sb-hide-sm" }, "Disconnect")
|
|
])
|
|
])
|
|
]);
|
|
const netPanel = showNetwork && React.createElement("div", {
|
|
key: "net",
|
|
style: { flex: "none", padding: "13px 20px", borderBottom: "1px solid rgba(255,255,255,0.06)", background: "rgba(18,18,20,0.72)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)" }
|
|
}, React.createElement(
|
|
"div",
|
|
{ style: { maxWidth: "1000px", margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(140px,1fr))", gap: "14px", fontFamily: MONO } },
|
|
[
|
|
["Transport", "WebRTC \xB7 DTLS"],
|
|
["Cipher", "AES-256-GCM"],
|
|
["Key exchange", "ECDH P-384"],
|
|
["Security", scoreLabel + (sec ? " \xB7 " + sec.score + "%" : "")]
|
|
].map(([k, v], i) => React.createElement("div", { key: "nf" + i }, [
|
|
React.createElement("div", { key: "k", style: { fontSize: "10px", color: "#6b6b73", textTransform: "uppercase", letterSpacing: "0.6px", marginBottom: "4px" } }, k),
|
|
React.createElement("div", { key: "v", style: { fontSize: "12.5px", color: i === 3 ? accent : "#cfcfd4", fontWeight: 500 } }, v)
|
|
]))
|
|
));
|
|
return React.createElement("div", { style: { flex: "none" } }, [header, netPanel]);
|
|
};
|
|
var EnhancedChatInterface = ({
|
|
title,
|
|
isOffline,
|
|
peerPresence,
|
|
onRenameTitle,
|
|
messages,
|
|
messageInput,
|
|
setMessageInput,
|
|
onSendMessage,
|
|
onDisconnect,
|
|
keyFingerprint,
|
|
isVerified,
|
|
chatMessagesRef,
|
|
scrollToBottom,
|
|
webrtcManager,
|
|
status,
|
|
pendingIncomingFiles = [],
|
|
onIncomingDecision,
|
|
// Secure chat extras
|
|
codeMode,
|
|
setCodeMode,
|
|
viewOnceMode,
|
|
setViewOnceMode,
|
|
viewOnceTtl,
|
|
setViewOnceTtl,
|
|
disappearTtl,
|
|
setDisappearTtl,
|
|
nowTick,
|
|
onUnsendMessage,
|
|
onMessageExpire
|
|
}) => {
|
|
const [showScrollButton, setShowScrollButton] = React.useState(false);
|
|
const [showFileTransfer, setShowFileTransfer] = React.useState(false);
|
|
const [fileSendMode, setFileSendMode] = React.useState(false);
|
|
const [showTimer, setShowTimer] = React.useState(false);
|
|
const [showOnce, setShowOnce] = React.useState(false);
|
|
const [showHandshake, setShowHandshake] = React.useState(false);
|
|
const taRef = React.useRef(null);
|
|
React.useEffect(() => {
|
|
const el = taRef.current;
|
|
if (!el || codeMode) return;
|
|
el.style.height = "auto";
|
|
el.style.height = Math.min(el.scrollHeight, 240) + "px";
|
|
}, [messageInput, codeMode]);
|
|
React.useEffect(() => {
|
|
if (pendingIncomingFiles.length > 0) {
|
|
setShowFileTransfer(true);
|
|
}
|
|
}, [pendingIncomingFiles.length]);
|
|
React.useEffect(() => {
|
|
if (chatMessagesRef.current && messages.length > 0) {
|
|
const { scrollTop, scrollHeight, clientHeight } = chatMessagesRef.current;
|
|
const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
|
|
if (isNearBottom) {
|
|
const smoothScroll = () => {
|
|
if (chatMessagesRef.current) {
|
|
chatMessagesRef.current.scrollTo({
|
|
top: chatMessagesRef.current.scrollHeight,
|
|
behavior: "smooth"
|
|
});
|
|
}
|
|
};
|
|
smoothScroll();
|
|
setTimeout(smoothScroll, 50);
|
|
setTimeout(smoothScroll, 150);
|
|
}
|
|
}
|
|
}, [messages, chatMessagesRef]);
|
|
const handleScroll = () => {
|
|
if (chatMessagesRef.current) {
|
|
const { scrollTop, scrollHeight, clientHeight } = chatMessagesRef.current;
|
|
const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
|
|
setShowScrollButton(!isNearBottom);
|
|
}
|
|
};
|
|
const handleScrollToBottom = () => {
|
|
if (typeof scrollToBottom === "function") {
|
|
scrollToBottom();
|
|
setShowScrollButton(false);
|
|
} else if (chatMessagesRef.current) {
|
|
chatMessagesRef.current.scrollTo({ top: chatMessagesRef.current.scrollHeight, behavior: "smooth" });
|
|
setShowScrollButton(false);
|
|
}
|
|
};
|
|
const handleKeyPress = (e) => {
|
|
if (e.key !== "Enter") return;
|
|
if (codeMode) {
|
|
if (e.metaKey || e.ctrlKey) {
|
|
e.preventDefault();
|
|
onSendMessage();
|
|
}
|
|
} else if (!e.shiftKey) {
|
|
e.preventDefault();
|
|
onSendMessage();
|
|
}
|
|
};
|
|
const isFileTransferReady = () => {
|
|
if (!webrtcManager) return false;
|
|
const connected = webrtcManager.isConnected ? webrtcManager.isConnected() : false;
|
|
const verified = webrtcManager.isVerified || false;
|
|
const hasDataChannel = webrtcManager.dataChannel && webrtcManager.dataChannel.readyState === "open";
|
|
return connected && verified && hasDataChannel;
|
|
};
|
|
const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
const fmtShort = (s) => {
|
|
if (!s) return "";
|
|
if (s >= 86400 && s % 86400 === 0) return s / 86400 + "d";
|
|
if (s >= 3600 && s % 3600 === 0) return s / 3600 + "h";
|
|
if (s >= 60) return Math.round(s / 60) + "m";
|
|
return s + "s";
|
|
};
|
|
const chipStyle = (active) => ({
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "6px",
|
|
padding: "7px 11px",
|
|
borderRadius: "8px",
|
|
border: "1px solid " + (active ? "rgba(255,255,255,0.18)" : "rgba(255,255,255,0.07)"),
|
|
background: active ? "rgba(255,255,255,0.06)" : "transparent",
|
|
color: active ? "#fff" : "#9a9aa2",
|
|
fontFamily: "inherit",
|
|
fontSize: "12.5px",
|
|
fontWeight: 600,
|
|
cursor: "pointer",
|
|
transition: "all .15s"
|
|
});
|
|
const optStyle = (sel) => ({
|
|
padding: "6px 12px",
|
|
borderRadius: "8px",
|
|
border: "1px solid " + (sel ? "rgba(255,255,255,0.22)" : "rgba(255,255,255,0.07)"),
|
|
background: sel ? "rgba(255,255,255,0.07)" : "transparent",
|
|
color: sel ? "#fff" : "#8a8a92",
|
|
fontFamily: MONO,
|
|
fontSize: "12px",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
transition: "all .14s"
|
|
});
|
|
const timerDefs = [
|
|
{ label: "Off", v: 0 },
|
|
{ label: "5s", v: 5 },
|
|
{ label: "30s", v: 30 },
|
|
{ label: "1m", v: 60 },
|
|
{ label: "1h", v: 3600 },
|
|
{ label: "24h", v: 86400 }
|
|
];
|
|
const onceDefs = [
|
|
{ label: "Off", v: 0 },
|
|
{ label: "5s", v: 5 },
|
|
{ label: "10s", v: 10 },
|
|
{ label: "30s", v: 30 },
|
|
{ label: "1m", v: 60 }
|
|
];
|
|
const onceSelected = viewOnceMode ? viewOnceTtl : 0;
|
|
const pickTimer = (v) => {
|
|
setDisappearTtl(v);
|
|
setShowTimer(false);
|
|
};
|
|
const pickOnce = (v) => {
|
|
if (v === 0) setViewOnceMode(false);
|
|
else {
|
|
setViewOnceTtl(v);
|
|
setViewOnceMode(true);
|
|
}
|
|
setShowOnce(false);
|
|
};
|
|
const hasText = !!(messageInput && messageInput.trim());
|
|
const fmtT = (ts) => {
|
|
try {
|
|
return new Date(ts).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
|
} catch (e) {
|
|
return "";
|
|
}
|
|
};
|
|
const systemMessages = messages.filter((m) => m.type === "system" && typeof m.message === "string" && m.message.trim());
|
|
const chatMessages = messages.filter((m) => m.type !== "system");
|
|
const handshakeCard = (isVerified || systemMessages.length > 0) && React.createElement("div", {
|
|
key: "handshake",
|
|
style: { border: "1px solid rgba(255,255,255,0.07)", borderRadius: "12px", background: "#161618", overflow: "hidden" }
|
|
}, [
|
|
React.createElement("button", {
|
|
key: "hs-btn",
|
|
onClick: () => setShowHandshake((v) => !v),
|
|
style: { width: "100%", display: "flex", alignItems: "center", gap: "13px", padding: "14px 16px", background: "transparent", border: "none", color: "inherit", cursor: "pointer", textAlign: "left", fontFamily: "inherit" }
|
|
}, [
|
|
React.createElement(
|
|
"div",
|
|
{ key: "ic", style: { flex: "none", width: "30px", height: "30px", display: "grid", placeItems: "center" } },
|
|
React.createElement("i", { className: "fas fa-check", style: { color: "#3ecf8e", fontSize: "16px" } })
|
|
),
|
|
React.createElement("div", { key: "tx", style: { flex: 1, minWidth: 0 } }, [
|
|
React.createElement("div", { key: "t1", style: { fontSize: "13.5px", fontWeight: 600, color: "#e8e8eb", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, "Secure channel established"),
|
|
React.createElement("div", { key: "t2", style: { fontSize: "12px", color: "#7b7b83", marginTop: "1px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, "Verified \xB7 Perfect Forward Secrecy" + (systemMessages.length ? " \xB7 " + systemMessages.length + (systemMessages.length === 1 ? " event" : " events") : ""))
|
|
]),
|
|
React.createElement("i", { key: "chev", className: "fas fa-chevron-down", style: { flex: "none", color: "#6b6b73", fontSize: "13px", transform: showHandshake ? "rotate(180deg)" : "rotate(0deg)", transition: "transform .2s" } })
|
|
]),
|
|
showHandshake && React.createElement("div", { key: "hs-body", style: { padding: "2px 16px 14px 59px" } }, [
|
|
systemMessages.length > 0 && React.createElement(
|
|
"div",
|
|
{ key: "steps", className: "sb-scroll", style: { marginBottom: "12px", maxHeight: "220px", overflowY: "auto", paddingRight: "6px" } },
|
|
systemMessages.map((m, i) => React.createElement("div", { key: "s" + i, style: { display: "flex", gap: "11px", padding: "6px 0", borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,0.04)" } }, [
|
|
React.createElement("span", { key: "d", style: { flex: "none", width: "5px", height: "5px", borderRadius: "50%", background: "#3ecf8e", marginTop: "7px", opacity: 0.6 } }),
|
|
React.createElement("span", { key: "t", style: { flex: 1, fontSize: "12.5px", color: "#9a9aa2", lineHeight: 1.5, wordBreak: "break-word" } }, String(m.message || "").trim()),
|
|
React.createElement("span", { key: "tm", style: { flex: "none", fontFamily: MONO, fontSize: "10.5px", color: "#56565e" } }, fmtT(m.timestamp))
|
|
]))
|
|
),
|
|
keyFingerprint && React.createElement("div", { key: "sn", style: { display: "flex", alignItems: "center", gap: "9px", padding: "10px 12px", borderRadius: "9px", background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.06)" } }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-lock", style: { color: "#8a8a92", fontSize: "12px" } }),
|
|
React.createElement("span", { key: "l", style: { fontSize: "11.5px", color: "#8a8a92" } }, "Safety number"),
|
|
React.createElement("span", { key: "v", style: { fontFamily: MONO, fontSize: "12px", color: "#cfcfd4", letterSpacing: "0.8px", fontWeight: 500, wordBreak: "break-all" } }, keyFingerprint)
|
|
])
|
|
])
|
|
]);
|
|
const emptyState = React.createElement(
|
|
"div",
|
|
{ key: "empty", style: { display: "flex", alignItems: "center", justifyContent: "center", flex: 1, minHeight: "40vh" } },
|
|
React.createElement("div", { style: { textAlign: "center", maxWidth: "420px" } }, [
|
|
React.createElement("img", { key: "ic", src: "/logo/securebit-mark.svg", alt: "SecureBit", style: { width: "60px", height: "60px", objectFit: "contain", display: "block", margin: "0 auto 16px" } }),
|
|
React.createElement("h3", { key: "t", style: { fontSize: "17px", fontWeight: 700, color: "#e8e8eb", margin: "0 0 6px" } }, "Secure channel is ready"),
|
|
React.createElement("p", { key: "p", style: { fontSize: "13px", color: "#7b7b83", margin: 0 } }, "Every message is end-to-end encrypted on your device before it leaves.")
|
|
])
|
|
);
|
|
const messagesArea = React.createElement("main", {
|
|
key: "main",
|
|
ref: chatMessagesRef,
|
|
onScroll: handleScroll,
|
|
className: "sb-scroll",
|
|
style: { flex: 1, overflowY: "auto", padding: "20px 20px 22px" }
|
|
}, React.createElement(
|
|
"div",
|
|
{ style: { width: "100%", maxWidth: "1000px", margin: "0 auto", display: "flex", flexDirection: "column", gap: "16px", minHeight: "100%" } },
|
|
chatMessages.length === 0 ? [handshakeCard, emptyState] : [handshakeCard].concat(chatMessages.map((msg) => React.createElement(EnhancedChatMessage, {
|
|
key: msg.id,
|
|
message: msg.message,
|
|
type: msg.type,
|
|
timestamp: msg.timestamp,
|
|
mid: msg.mid,
|
|
status: msg.status,
|
|
viewOnce: msg.viewOnce,
|
|
viewOnceTtl: msg.viewOnceTtl,
|
|
expiresAt: msg.expiresAt,
|
|
expired: msg.expired,
|
|
nowTick,
|
|
canUnsend: typeof onUnsendMessage === "function",
|
|
onUnsend: onUnsendMessage,
|
|
onExpire: () => onMessageExpire && onMessageExpire(msg.id)
|
|
})))
|
|
));
|
|
const timerRow = showTimer && React.createElement(
|
|
"div",
|
|
{ key: "timer-row", style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px", padding: "10px 12px", marginBottom: "10px", borderRadius: "11px", border: "1px solid rgba(255,255,255,0.07)", background: "#161618" } },
|
|
[React.createElement("span", { key: "lbl", style: { fontSize: "12px", color: "#8a8a92", fontWeight: 600, marginRight: "4px" } }, "Disappear after")].concat(
|
|
timerDefs.map((d) => React.createElement("button", { key: "td" + d.v, onClick: () => pickTimer(d.v), style: optStyle(disappearTtl === d.v) }, d.label))
|
|
)
|
|
);
|
|
const onceRow = showOnce && React.createElement(
|
|
"div",
|
|
{ key: "once-row", style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px", padding: "10px 12px", marginBottom: "10px", borderRadius: "11px", border: "1px solid rgba(255,255,255,0.07)", background: "#161618" } },
|
|
[React.createElement("span", { key: "lbl", style: { fontSize: "12px", color: "#8a8a92", fontWeight: 600, marginRight: "4px" } }, "Visible for")].concat(
|
|
onceDefs.map((d) => React.createElement("button", { key: "od" + d.v, onClick: () => pickOnce(d.v), style: optStyle(onceSelected === d.v) }, d.label))
|
|
)
|
|
);
|
|
const filePanel = showFileTransfer && React.createElement(
|
|
"div",
|
|
{ key: "file-panel", style: { marginBottom: "10px" } },
|
|
React.createElement(window.FileTransferComponent || (() => React.createElement("div", { style: { padding: "16px", textAlign: "center", color: "#e5727a" } }, "FileTransferComponent not loaded")), {
|
|
webrtcManager,
|
|
isConnected: isFileTransferReady(),
|
|
pendingIncomingFiles,
|
|
onIncomingDecision,
|
|
showDropzone: fileSendMode
|
|
})
|
|
);
|
|
const chipsRow = React.createElement("div", { key: "chips", style: { display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "8px", marginBottom: "10px" } }, [
|
|
React.createElement("button", { key: "files", onClick: () => {
|
|
if (showFileTransfer && fileSendMode) {
|
|
setShowFileTransfer(false);
|
|
setFileSendMode(false);
|
|
} else {
|
|
setShowFileTransfer(true);
|
|
setFileSendMode(true);
|
|
}
|
|
}, className: "sb-chip", style: chipStyle(showFileTransfer && fileSendMode) }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-paperclip", style: { fontSize: "13px" } }),
|
|
showFileTransfer && fileSendMode ? "Hide files" : "Send files"
|
|
]),
|
|
React.createElement("div", { key: "right", style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" } }, [
|
|
React.createElement("button", { key: "code", onClick: () => setCodeMode((v) => !v), className: "sb-chip", style: chipStyle(codeMode) }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-code", style: { fontSize: "13px" } }),
|
|
"Code"
|
|
]),
|
|
React.createElement("button", { key: "once", onClick: () => {
|
|
setShowOnce((v) => !v);
|
|
setShowTimer(false);
|
|
}, className: "sb-chip", style: chipStyle(showOnce || viewOnceMode) }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-eye-slash", style: { fontSize: "13px" } }),
|
|
viewOnceMode ? "View once \xB7 " + fmtShort(viewOnceTtl) : "View once"
|
|
]),
|
|
React.createElement("button", { key: "timer", onClick: () => {
|
|
setShowTimer((v) => !v);
|
|
setShowOnce(false);
|
|
}, className: "sb-chip", style: chipStyle(showTimer || disappearTtl > 0) }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-stopwatch", style: { fontSize: "13px" } }),
|
|
disappearTtl > 0 ? "Timer \xB7 " + fmtShort(disappearTtl) : "Timer"
|
|
])
|
|
])
|
|
]);
|
|
const codeStrip = codeMode && React.createElement("div", { key: "code-strip", style: { display: "flex", alignItems: "center", gap: "8px", padding: "8px 14px", border: "1px solid rgba(255,255,255,0.08)", borderBottom: "none", borderRadius: "14px 14px 0 0", background: "#161618" } }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-code", style: { color: "#8a8a92", fontSize: "12px" } }),
|
|
React.createElement("span", { key: "s", style: { fontSize: "11.5px", fontWeight: 600, color: "#8a8a92" } }, "Code snippet \xB7 formatting preserved \xB7 \u2318\u21B5 to send"),
|
|
React.createElement("button", { key: "c", onClick: () => setCodeMode(false), className: "sb-link", style: { marginLeft: "auto", background: "none", border: "none", color: "#6b6b73", cursor: "pointer", fontSize: "11.5px", fontFamily: "inherit", fontWeight: 600 } }, "Close")
|
|
]);
|
|
const inputRow = React.createElement("div", {
|
|
key: "input",
|
|
style: { display: "flex", alignItems: "flex-end", gap: "11px", padding: "11px 11px 11px 16px", border: "1px solid " + (hasText ? "rgba(255,255,255,0.18)" : "rgba(255,255,255,0.08)"), background: "#161618", borderRadius: codeMode ? "0 0 14px 14px" : "14px", transition: "border .15s" }
|
|
}, [
|
|
React.createElement("div", { key: "ta-wrap", style: { flex: 1, minWidth: 0 } }, [
|
|
React.createElement("textarea", {
|
|
key: "ta",
|
|
value: messageInput,
|
|
ref: taRef,
|
|
onChange: (e) => setMessageInput(e.target.value),
|
|
onKeyDown: handleKeyPress,
|
|
rows: 1,
|
|
maxLength: 2e3,
|
|
placeholder: codeMode ? "Paste or write code\u2026" : "Type an encrypted message\u2026",
|
|
className: "sb-textarea",
|
|
style: { width: "100%", minHeight: codeMode ? "120px" : "22px", maxHeight: "240px", resize: "none", border: "none", outline: "none", background: "transparent", color: "#e8e8eb", fontFamily: codeMode ? MONO : "inherit", fontSize: codeMode ? "13px" : "14.5px", lineHeight: 1.55, padding: "6px 0" }
|
|
}),
|
|
React.createElement("div", { key: "foot", style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "3px" } }, [
|
|
React.createElement("span", { key: "enc", style: { display: "inline-flex", alignItems: "center", gap: "5px", fontSize: "11px", color: "#56565e" } }, [
|
|
React.createElement("i", { key: "i", className: "fas fa-lock", style: { color: "#3ecf8e", fontSize: "10px" } }),
|
|
"Encrypted on your device"
|
|
]),
|
|
React.createElement("span", { key: "cnt", style: { fontFamily: MONO, fontSize: "10.5px", color: "#56565e", marginLeft: "auto" } }, (messageInput ? messageInput.length : 0) + "/2000")
|
|
])
|
|
]),
|
|
React.createElement("button", {
|
|
key: "send",
|
|
onClick: onSendMessage,
|
|
disabled: !hasText,
|
|
title: "Send",
|
|
className: "sb-send",
|
|
style: { flex: "none", width: "44px", height: "44px", borderRadius: "11px", border: "none", display: "grid", placeItems: "center", cursor: hasText ? "pointer" : "default", background: hasText ? "#f0892a" : "rgba(255,255,255,0.05)", color: hasText ? "#1a0f04" : "#56565e", transition: "all .15s" }
|
|
}, React.createElement("i", { className: "fas fa-paper-plane", style: { fontSize: "15px" } }))
|
|
]);
|
|
const composer = React.createElement(
|
|
"footer",
|
|
{ key: "composer", style: { flex: "none", padding: "12px 20px 18px", background: "#0f0f11", borderTop: "1px solid rgba(255,255,255,0.05)" } },
|
|
React.createElement("div", { style: { maxWidth: "1000px", margin: "0 auto" } }, [
|
|
timerRow,
|
|
onceRow,
|
|
filePanel,
|
|
chipsRow,
|
|
codeStrip,
|
|
inputRow
|
|
])
|
|
);
|
|
const scrollBtn = showScrollButton && React.createElement("button", {
|
|
key: "scrollbtn",
|
|
onClick: handleScrollToBottom,
|
|
style: { position: "fixed", right: "24px", bottom: "150px", width: "44px", height: "44px", borderRadius: "50%", border: "1px solid rgba(255,255,255,0.1)", background: "#26262b", color: "#cfcfd4", display: "grid", placeItems: "center", cursor: "pointer", zIndex: 50, boxShadow: "0 6px 20px rgba(0,0,0,0.4)" }
|
|
}, React.createElement("i", { className: "fas fa-arrow-down", style: { fontSize: "15px" } }));
|
|
const chatHeader = React.createElement(SecureBitChatHeader, {
|
|
key: "chat-header",
|
|
status,
|
|
onDisconnect,
|
|
webrtcManager,
|
|
title,
|
|
isOffline,
|
|
peerPresence,
|
|
onRenameTitle
|
|
});
|
|
return React.createElement("div", {
|
|
className: "chat-container",
|
|
style: { display: "flex", flexDirection: "column", height: "100vh", background: "#0f0f11", color: "#e8e8eb" }
|
|
}, [chatHeader, messagesArea, scrollBtn, composer]);
|
|
};
|
|
var buildSessionMessage = (message, type, opts = {}) => ({
|
|
message,
|
|
type,
|
|
id: Date.now() + Math.random(),
|
|
timestamp: typeof opts.timestamp === "number" ? opts.timestamp : Date.now(),
|
|
mid: opts.mid,
|
|
status: opts.status,
|
|
viewOnce: opts.viewOnce === true,
|
|
viewOnceTtl: typeof opts.viewOnceTtl === "number" ? opts.viewOnceTtl : 15,
|
|
expiresAt: typeof opts.expiresAt === "number" ? opts.expiresAt : void 0
|
|
});
|
|
var SB_SVG = {
|
|
chevL: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>',
|
|
chevR: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>',
|
|
plus: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>',
|
|
users: '<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 19v-1.5a3.5 3.5 0 0 0-3.5-3.5h-5A3.5 3.5 0 0 0 4 17.5V19"/><circle cx="10" cy="8" r="3.2"/><path d="M20 19v-1.5a3.5 3.5 0 0 0-2.6-3.4"/><path d="M15.5 5.3a3.2 3.2 0 0 1 0 5.4"/></svg>',
|
|
burger: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>'
|
|
};
|
|
var SessionsSidebar = ({ chats, collapsed, drawerOpen, onToggleCollapse, onSelect, onNewChat, onRename, onCloseDrawer, myStatus, onSetStatus }) => {
|
|
const h = React.createElement;
|
|
const [editingId, setEditingId] = React.useState(null);
|
|
const [draft, setDraft] = React.useState("");
|
|
const [presenceOpen, setPresenceOpen] = React.useState(false);
|
|
const startEdit = (c) => (e) => {
|
|
e.stopPropagation();
|
|
setEditingId(c.id);
|
|
setDraft(c.name);
|
|
};
|
|
const commitEdit = () => {
|
|
if (editingId) {
|
|
onRename(editingId, draft);
|
|
setEditingId(null);
|
|
}
|
|
};
|
|
const editKey = (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
commitEdit();
|
|
} else if (e.key === "Escape") {
|
|
setEditingId(null);
|
|
}
|
|
};
|
|
const renameInput = (extra = {}) => h("input", {
|
|
autoFocus: true,
|
|
value: draft,
|
|
onChange: (e) => setDraft(e.target.value),
|
|
onKeyDown: editKey,
|
|
onBlur: commitEdit,
|
|
onClick: (e) => e.stopPropagation(),
|
|
style: Object.assign({ width: "100%", background: "rgba(255,255,255,0.06)", border: "1px solid rgba(240,137,42,0.5)", borderRadius: "6px", color: "#f4f4f6", fontFamily: "inherit", fontSize: "14px", fontWeight: 700, padding: "2px 6px", outline: "none" }, extra)
|
|
});
|
|
const icon = (svg, style) => h("span", { style: Object.assign({ display: "grid", placeItems: "center" }, style || {}), dangerouslySetInnerHTML: { __html: svg } });
|
|
const avatar = (c, size, ring) => h("div", {
|
|
style: { position: "relative", flex: "none", width: size + "px", height: size + "px", borderRadius: (size >= 44 ? 12 : 11) + "px", display: "grid", placeItems: "center", background: c.active ? "rgba(255,255,255,0.06)" : "rgba(255,255,255,0.035)", border: "1px solid rgba(255,255,255," + (c.active ? "0.14" : "0.07") + ")", fontSize: "13px", fontWeight: 700, letterSpacing: "-0.3px", color: c.active ? "#f4f4f6" : "#9a9aa2" }
|
|
}, [c.mono, h("span", { key: "dot", style: { position: "absolute", right: "-2px", bottom: "-2px", width: "11px", height: "11px", borderRadius: "50%", background: c.dot, border: "2px solid " + ring } })]);
|
|
const expandedRow = (c) => h("div", {
|
|
key: c.id,
|
|
onClick: () => onSelect(c.id),
|
|
style: { position: "relative", display: "flex", alignItems: "center", gap: "12px", padding: "11px 12px", marginBottom: "4px", borderRadius: "11px", background: c.active ? "#161618" : "transparent", border: "1px solid " + (c.active ? "rgba(255,255,255,0.08)" : "transparent"), cursor: "pointer" }
|
|
}, [
|
|
c.active && h("span", { key: "bar", style: { position: "absolute", left: 0, top: "12px", bottom: "12px", width: "3px", borderRadius: "0 3px 3px 0", background: "#f0892a" } }),
|
|
avatar(c, 38, c.active ? "#161618" : "#0c0c0e"),
|
|
h("div", { key: "body", style: { flex: 1, minWidth: 0 } }, [
|
|
h("div", { key: "top", style: { display: "flex", alignItems: "center", gap: "7px" } }, [
|
|
editingId === c.id ? renameInput() : h("span", {
|
|
key: "name",
|
|
onDoubleClick: startEdit(c),
|
|
title: "Double-click to rename",
|
|
style: { flex: 1, minWidth: 0, fontSize: "14px", fontWeight: c.active ? 700 : 600, letterSpacing: "-0.2px", color: c.active ? "#f4f4f6" : "#cfcfd4", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }
|
|
}, c.name),
|
|
c.unread && editingId !== c.id && h("span", { key: "u", style: { flex: "none", minWidth: "18px", height: "18px", padding: "0 5px", borderRadius: "9px", display: "grid", placeItems: "center", background: "#f0892a", color: "#1a0f04", fontFamily: "'JetBrains Mono',monospace", fontSize: "10px", fontWeight: 700 } }, c.unread)
|
|
]),
|
|
h("div", { key: "prev", style: { fontSize: "12px", color: c.active ? "#8a8a92" : "#6b6b73", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, c.preview)
|
|
])
|
|
]);
|
|
const dockItem = (c) => h("div", { key: c.id, style: { position: "relative" } }, [
|
|
c.active && h("span", { key: "bar", style: { position: "absolute", left: "-13px", top: "9px", bottom: "9px", width: "3px", borderRadius: "0 3px 3px 0", background: "#f0892a" } }),
|
|
h("div", {
|
|
key: "tile",
|
|
onClick: () => onSelect(c.id),
|
|
title: c.name,
|
|
style: { position: "relative", width: "44px", height: "44px", borderRadius: "12px", display: "grid", placeItems: "center", cursor: "pointer", background: c.active ? "rgba(255,255,255,0.06)" : "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255," + (c.active ? "0.14" : "0.07") + ")", fontSize: "13px", fontWeight: 700, letterSpacing: "-0.3px", color: c.active ? "#f4f4f6" : "#9a9aa2" }
|
|
}, [
|
|
c.mono,
|
|
h("span", { key: "dot", style: { position: "absolute", right: "-2px", bottom: "-2px", width: "11px", height: "11px", borderRadius: "50%", background: c.dot, border: "2.5px solid #0c0c0e" } }),
|
|
c.unread && h("span", { key: "u", style: { position: "absolute", left: "-5px", top: "-5px", minWidth: "17px", height: "17px", padding: "0 4px", borderRadius: "9px", display: "grid", placeItems: "center", background: "#f0892a", color: "#1a0f04", fontFamily: "'JetBrains Mono',monospace", fontSize: "9.5px", fontWeight: 700, border: "2px solid #0c0c0e" } }, c.unread)
|
|
])
|
|
]);
|
|
const brandMark = (size) => h(
|
|
"div",
|
|
{ style: { width: size + "px", height: size + "px", flex: "none", display: "grid", placeItems: "center" } },
|
|
h("img", { src: "/logo/securebit-mark.svg", alt: "SecureBit", style: { width: "100%", height: "100%", objectFit: "contain", display: "block" } })
|
|
);
|
|
const collapseBtn = (svg, title) => h("button", { onClick: onToggleCollapse, title, style: { width: "30px", height: "30px", borderRadius: "8px", display: "grid", placeItems: "center", border: "1px solid rgba(255,255,255,0.07)", background: "transparent", color: "#8a8a92", cursor: "pointer" }, dangerouslySetInnerHTML: { __html: svg } });
|
|
const myMeta = MY_STATUS_OPTIONS.find((o) => o.key === myStatus) || MY_STATUS_OPTIONS[0];
|
|
const PRES_SVG = {
|
|
user: '<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20v-1.5a4 4 0 0 0-4-4h-4a4 4 0 0 0-4 4V20"/><circle cx="12" cy="8" r="3.6"/></svg>',
|
|
check: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#f0892a" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-11"/></svg>',
|
|
chevUp: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6b6b73" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6"/></svg>',
|
|
lock: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#3ecf8e" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M7 11V7a5 5 0 0 1 10 0v4"/><rect x="4.5" y="11" width="15" height="9" rx="2.2"/></svg>'
|
|
};
|
|
const presenceMenu = (pos) => presenceOpen ? h("div", {
|
|
key: "pmenu",
|
|
style: Object.assign({ position: "absolute", zIndex: 30, borderRadius: "14px", background: "#161618", border: "1px solid rgba(255,255,255,0.1)", boxShadow: "0 16px 40px rgba(0,0,0,0.55)", padding: "6px" }, pos)
|
|
}, [
|
|
h("div", { key: "h", style: { padding: "9px 10px 7px", fontFamily: "'JetBrains Mono',monospace", fontSize: "10px", fontWeight: 600, color: "#56565e", textTransform: "uppercase", letterSpacing: "1.2px" } }, "Set your status"),
|
|
...MY_STATUS_OPTIONS.map((o) => h("button", {
|
|
key: o.key,
|
|
onClick: () => {
|
|
onSetStatus(o.key);
|
|
setPresenceOpen(false);
|
|
},
|
|
style: { width: "100%", display: "flex", alignItems: "center", gap: "11px", padding: "9px 10px", borderRadius: "9px", border: "none", background: "transparent", cursor: "pointer", textAlign: "left" }
|
|
}, [
|
|
h("span", { key: "d", style: { flex: "none", width: "10px", height: "10px", borderRadius: "50%", background: o.dot } }),
|
|
h("span", { key: "t", style: { flex: 1, minWidth: 0 } }, [
|
|
h("span", { key: "w", style: { display: "block", fontSize: "13.5px", fontWeight: 600, color: "#e8e8eb" } }, o.word),
|
|
h("span", { key: "de", style: { display: "block", fontSize: "11.5px", color: "#6b6b73" } }, o.desc)
|
|
]),
|
|
o.key === myStatus && h("span", { key: "c", style: { flex: "none", display: "grid", placeItems: "center" }, dangerouslySetInnerHTML: { __html: PRES_SVG.check } })
|
|
])),
|
|
h("div", { key: "note", style: { display: "flex", alignItems: "flex-start", gap: "8px", margin: "6px 6px 4px", padding: "9px 10px", borderRadius: "9px", background: "rgba(62,207,142,0.06)", border: "1px solid rgba(62,207,142,0.16)" } }, [
|
|
h("span", { key: "i", style: { flex: "none", marginTop: "1px", display: "grid" }, dangerouslySetInnerHTML: { __html: PRES_SVG.lock } }),
|
|
h("span", { key: "t", style: { fontSize: "11px", lineHeight: 1.45, color: "#8a8a92" } }, "Sent end-to-end to connected peers only \u2014 never stored on a server.")
|
|
])
|
|
]) : null;
|
|
const presencePanelExpanded = h("div", { key: "you", style: { flex: "none", position: "relative", marginTop: "10px", borderTop: "1px solid rgba(255,255,255,0.06)", padding: "10px 12px 12px" } }, [
|
|
presenceMenu({ left: "12px", right: "12px", bottom: "64px" }),
|
|
h("button", { key: "btn", onClick: () => setPresenceOpen((v) => !v), style: { width: "100%", display: "flex", alignItems: "center", gap: "11px", padding: "7px 8px", borderRadius: "11px", border: "1px solid rgba(255,255,255,0.06)", background: "rgba(255,255,255,0.02)", cursor: "pointer" } }, [
|
|
h("div", { key: "av", style: { position: "relative", flex: "none", width: "36px", height: "36px", borderRadius: "10px", display: "grid", placeItems: "center", background: "rgba(240,137,42,0.12)", border: "1px solid rgba(240,137,42,0.24)", color: "#f0892a" } }, [
|
|
h("span", { key: "i", style: { display: "grid" }, dangerouslySetInnerHTML: { __html: PRES_SVG.user } }),
|
|
h("span", { key: "dot", style: { position: "absolute", right: "-2px", bottom: "-2px", width: "11px", height: "11px", borderRadius: "50%", background: myMeta.dot, border: "2px solid #0c0c0e" } })
|
|
]),
|
|
h("div", { key: "tx", style: { flex: 1, minWidth: 0, textAlign: "left" } }, [
|
|
h("div", { key: "y", style: { fontSize: "13.5px", fontWeight: 700, color: "#f4f4f6" } }, "You"),
|
|
h("div", { key: "w", style: { fontSize: "12px", color: "#8a8a92" } }, myMeta.word)
|
|
]),
|
|
h("span", { key: "ch", style: { display: "grid", placeItems: "center" }, dangerouslySetInnerHTML: { __html: PRES_SVG.chevUp } })
|
|
])
|
|
]);
|
|
const presencePanelCollapsed = h("div", { key: "you", style: { flex: "none", position: "relative", display: "flex", flexDirection: "column", alignItems: "center", padding: "0 0 13px" } }, [
|
|
presenceMenu({ left: "60px", bottom: "8px", width: "248px" }),
|
|
h("button", { key: "btn", onClick: () => setPresenceOpen((v) => !v), title: "Your status \u2014 " + myMeta.word, style: { position: "relative", width: "44px", height: "44px", borderRadius: "12px", display: "grid", placeItems: "center", cursor: "pointer", background: "rgba(240,137,42,0.12)", border: "1px solid rgba(240,137,42,0.24)", color: "#f0892a" } }, [
|
|
h("span", { key: "i", style: { display: "grid" }, dangerouslySetInnerHTML: { __html: PRES_SVG.user } }),
|
|
h("span", { key: "dot", style: { position: "absolute", right: "-2px", bottom: "-2px", width: "12px", height: "12px", borderRadius: "50%", background: myMeta.dot, border: "2.5px solid #0c0c0e" } })
|
|
])
|
|
]);
|
|
const expandedInner = [
|
|
h("div", { key: "head", style: { flex: "none", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 12px 0 16px", height: "64px", borderBottom: "1px solid rgba(255,255,255,0.06)" } }, [
|
|
h("div", { key: "brand", style: { display: "flex", alignItems: "center", gap: "10px" } }, [brandMark(30), h("span", { key: "t", style: { fontSize: "15px", fontWeight: 800, letterSpacing: "-0.3px", color: "#f4f4f6" } }, "SecureBit")]),
|
|
collapseBtn(SB_SVG.chevL, "Collapse")
|
|
]),
|
|
h("div", { key: "label", style: { flex: "none", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 16px 9px" } }, [
|
|
h("span", { key: "l", style: { fontFamily: "'JetBrains Mono',monospace", fontSize: "10px", fontWeight: 600, color: "#56565e", textTransform: "uppercase", letterSpacing: "1.3px" } }, "Chats"),
|
|
h("span", { key: "c", style: { fontFamily: "'JetBrains Mono',monospace", fontSize: "10px", fontWeight: 600, color: "#6b6b73" } }, String(chats.length))
|
|
]),
|
|
h("div", { key: "list", className: "msc-scroll", style: { flex: 1, overflowY: "auto", padding: "0 10px" } }, [
|
|
...chats.map(expandedRow),
|
|
h("div", { key: "gh", style: { marginTop: "14px", padding: "0 2px 6px" } }, h("span", { style: { fontFamily: "'JetBrains Mono',monospace", fontSize: "10px", fontWeight: 600, color: "#56565e", textTransform: "uppercase", letterSpacing: "1.3px" } }, "Group chats")),
|
|
h("div", { key: "gph", title: "Coming in v6.0", style: { display: "flex", alignItems: "center", gap: "12px", padding: "11px 12px", borderRadius: "11px", background: "transparent", border: "1px dashed rgba(255,255,255,0.09)", cursor: "not-allowed" } }, [
|
|
h("div", { key: "i", style: { flex: "none", width: "38px", height: "38px", borderRadius: "11px", display: "grid", placeItems: "center", background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.06)", color: "#56565e" }, dangerouslySetInnerHTML: { __html: SB_SVG.users } }),
|
|
h("div", { key: "b", style: { flex: 1, minWidth: 0 } }, [
|
|
h("div", { key: "t", style: { fontSize: "14px", fontWeight: 600, color: "#8a8a92" } }, "Group chats"),
|
|
h("div", { key: "s", style: { fontSize: "11.5px", color: "#56565e" } }, "Up to 8 peers \xB7 P2P mesh")
|
|
]),
|
|
h("span", { key: "soon", style: { flex: "none", padding: "4px 9px", borderRadius: "7px", background: "rgba(240,137,42,0.1)", border: "1px solid rgba(240,137,42,0.24)", fontFamily: "'JetBrains Mono',monospace", fontSize: "9.5px", fontWeight: 700, color: "#f0892a", textTransform: "uppercase", letterSpacing: "0.8px" } }, "Soon")
|
|
])
|
|
]),
|
|
h("div", { key: "new", style: { flex: "none", padding: "12px" } }, h("button", {
|
|
onClick: onNewChat,
|
|
style: { width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "9px", padding: "12px", borderRadius: "11px", border: "none", background: "#f0892a", color: "#1a0f04", fontFamily: "inherit", fontSize: "14px", fontWeight: 700, cursor: "pointer", boxShadow: "0 8px 24px rgba(240,137,42,0.28)" }
|
|
}, [icon(SB_SVG.plus, { key: "p" }), "New chat"])),
|
|
presencePanelExpanded
|
|
];
|
|
const collapsedInner = [
|
|
h("div", { key: "head", style: { flex: "none", display: "flex", flexDirection: "column", alignItems: "center", gap: "10px", padding: "13px 0", width: "100%", borderBottom: "1px solid rgba(255,255,255,0.06)" } }, [brandMark(32), collapseBtn(SB_SVG.chevR, "Expand")]),
|
|
h("div", { key: "list", className: "msc-scroll", style: { flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", alignItems: "center", gap: "10px", padding: "14px 0", width: "100%" } }, [
|
|
...chats.map(dockItem),
|
|
h("div", { key: "sep", style: { width: "30px", height: "1px", background: "rgba(255,255,255,0.07)", margin: "2px 0" } }),
|
|
h("div", { key: "gph", title: "Group chats \u2014 coming in v6.0", style: { position: "relative", width: "44px", height: "44px", borderRadius: "12px", display: "grid", placeItems: "center", cursor: "not-allowed", background: "transparent", border: "1px dashed rgba(255,255,255,0.1)", color: "#56565e" }, dangerouslySetInnerHTML: { __html: SB_SVG.users } })
|
|
]),
|
|
h("div", { key: "new", style: { flex: "none", padding: "13px 0" } }, h("button", {
|
|
onClick: onNewChat,
|
|
title: "New chat",
|
|
style: { width: "44px", height: "44px", borderRadius: "12px", display: "grid", placeItems: "center", border: "none", background: "#f0892a", color: "#1a0f04", cursor: "pointer", boxShadow: "0 8px 24px rgba(240,137,42,0.28)" },
|
|
dangerouslySetInnerHTML: { __html: SB_SVG.plus }
|
|
})),
|
|
presencePanelCollapsed
|
|
];
|
|
const railWidth = collapsed ? "72px" : "292px";
|
|
const railStyle = { flex: "none", width: railWidth, display: "flex", flexDirection: "column", alignItems: collapsed ? "center" : "stretch", background: "#0c0c0e", borderRight: "1px solid rgba(255,255,255,0.06)" };
|
|
const inner = collapsed ? collapsedInner : expandedInner;
|
|
return h(React.Fragment, null, [
|
|
// Responsive behaviour (inline styles can't express media queries).
|
|
h("style", { key: "css", dangerouslySetInnerHTML: { __html: "@media (max-width:1023px){.sb-rail{display:none !important;}.sb-burger{display:grid !important;}}@media (min-width:1024px){.sb-drawer-overlay{display:none !important;}}" } }),
|
|
// Desktop rail
|
|
h("aside", { key: "rail", className: "sb-rail", style: railStyle }, inner),
|
|
// Mobile drawer overlay
|
|
h("div", {
|
|
key: "drawer",
|
|
className: "sb-drawer-overlay",
|
|
onClick: onCloseDrawer,
|
|
style: { position: "fixed", inset: 0, zIndex: 60, background: "rgba(6,6,8,0.6)", backdropFilter: "blur(4px)", WebkitBackdropFilter: "blur(4px)", display: drawerOpen ? "block" : "none" }
|
|
}, h("aside", { onClick: (e) => e.stopPropagation(), style: { position: "absolute", left: 0, top: 0, bottom: 0, width: "292px", display: "flex", flexDirection: "column", background: "#0c0c0e", borderRight: "1px solid rgba(255,255,255,0.06)", boxShadow: "0 0 60px rgba(0,0,0,0.6)" } }, expandedInner))
|
|
]);
|
|
};
|
|
var EnhancedSecureP2PChat = () => {
|
|
const [sessionsState, dispatch] = React.useReducer(sessionsReducer, void 0, createInitialState);
|
|
const activeSessionId = sessionsState.activeSessionId;
|
|
const activeIdRef = React.useRef(null);
|
|
activeIdRef.current = activeSessionId;
|
|
const active = activeSessionId ? sessionsState.sessions[activeSessionId] : null;
|
|
const EMPTY_ARR = React.useRef([]).current;
|
|
const managersRef = React.useRef(/* @__PURE__ */ new Map());
|
|
const integrationsRef = React.useRef(/* @__PURE__ */ new Map());
|
|
const queuesRef = React.useRef(/* @__PURE__ */ new Map());
|
|
const dispatchActive = React.useCallback((build) => {
|
|
const id = activeIdRef.current;
|
|
if (!id) return;
|
|
dispatch(build(id));
|
|
}, []);
|
|
const messages = active ? active.messages : EMPTY_ARR;
|
|
const setMessages = React.useCallback((updaterOrArr) => {
|
|
const id = activeIdRef.current;
|
|
if (!id) return;
|
|
if (typeof updaterOrArr === "function") dispatch({ type: SESSION_ACTIONS.SET_MESSAGES, id, updater: updaterOrArr });
|
|
else dispatch({ type: SESSION_ACTIONS.SET_MESSAGES, id, messages: updaterOrArr });
|
|
}, []);
|
|
const connectionStatus = active ? active.status : "disconnected";
|
|
const setConnectionStatus = React.useCallback((status) => dispatchActive((id) => ({ type: SESSION_ACTIONS.SET_STATUS, id, status })), [dispatchActive]);
|
|
const keyFingerprint = active ? active.keyFingerprint : "";
|
|
const setKeyFingerprint = React.useCallback((fingerprint) => dispatchActive((id) => ({ type: SESSION_ACTIONS.SET_FINGERPRINT, id, fingerprint })), [dispatchActive]);
|
|
const verificationCode = active ? active.verificationCode : "";
|
|
const setVerificationCode = React.useCallback((code) => dispatchActive((id) => ({ type: SESSION_ACTIONS.SET_VERIFICATION, id, code })), [dispatchActive]);
|
|
const isVerified = active ? active.sas.isVerified : false;
|
|
const setIsVerified = React.useCallback((v) => dispatchActive((id) => ({ type: SESSION_ACTIONS.SET_SAS, id, sas: { isVerified: !!v } })), [dispatchActive]);
|
|
const localVerificationConfirmed = active ? active.sas.localConfirmed : false;
|
|
const setLocalVerificationConfirmed = React.useCallback((v) => dispatchActive((id) => ({ type: SESSION_ACTIONS.SET_SAS, id, sas: { localConfirmed: !!v } })), [dispatchActive]);
|
|
const remoteVerificationConfirmed = active ? active.sas.remoteConfirmed : false;
|
|
const setRemoteVerificationConfirmed = React.useCallback((v) => dispatchActive((id) => ({ type: SESSION_ACTIONS.SET_SAS, id, sas: { remoteConfirmed: !!v } })), [dispatchActive]);
|
|
const bothVerificationsConfirmed = active ? active.sas.bothConfirmed : false;
|
|
const setBothVerificationsConfirmed = React.useCallback((v) => dispatchActive((id) => ({ type: SESSION_ACTIONS.SET_SAS, id, sas: { bothConfirmed: !!v } })), [dispatchActive]);
|
|
const pendingIncomingFiles = active ? active.pendingIncomingFiles : EMPTY_ARR;
|
|
const setPendingIncomingFiles = React.useCallback((updaterOrArr) => {
|
|
const id = activeIdRef.current;
|
|
if (!id) return;
|
|
if (typeof updaterOrArr === "function") dispatch({ type: SESSION_ACTIONS.SET_PENDING_FILES, id, updater: updaterOrArr });
|
|
else dispatch({ type: SESSION_ACTIONS.SET_PENDING_FILES, id, files: updaterOrArr });
|
|
}, []);
|
|
const setupField = (name, fallback) => active ? active.setup[name] : fallback;
|
|
const setSetupField = (name) => React.useCallback((value) => dispatchActive((id) => ({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { [name]: value } })), [dispatchActive]);
|
|
const offerData = setupField("offerData", "");
|
|
const setOfferData = setSetupField("offerData");
|
|
const answerData = setupField("answerData", "");
|
|
const setAnswerData = setSetupField("answerData");
|
|
const offerInput = setupField("offerInput", "");
|
|
const setOfferInput = setSetupField("offerInput");
|
|
const answerInput = setupField("answerInput", "");
|
|
const setAnswerInput = setSetupField("answerInput");
|
|
const showOfferStep = setupField("showOfferStep", false);
|
|
const setShowOfferStep = setSetupField("showOfferStep");
|
|
const showAnswerStep = setupField("showAnswerStep", false);
|
|
const setShowAnswerStep = setSetupField("showAnswerStep");
|
|
const showVerification = setupField("showVerification", false);
|
|
const setShowVerification = setSetupField("showVerification");
|
|
const showQRCode = setupField("showQRCode", false);
|
|
const setShowQRCode = setSetupField("showQRCode");
|
|
const qrCodeUrl = setupField("qrCodeUrl", "");
|
|
const setQrCodeUrl = setSetupField("qrCodeUrl");
|
|
const isGeneratingKeys = setupField("isGeneratingKeys", false);
|
|
const setIsGeneratingKeys = setSetupField("isGeneratingKeys");
|
|
const webrtcManagerRef = React.useMemo(() => ({
|
|
get current() {
|
|
return managersRef.current.get(activeIdRef.current) || null;
|
|
},
|
|
set current(v) {
|
|
const id = activeIdRef.current;
|
|
if (!id) return;
|
|
if (v) managersRef.current.set(id, v);
|
|
else managersRef.current.delete(id);
|
|
}
|
|
}), []);
|
|
const notificationIntegrationRef = React.useMemo(() => ({
|
|
get current() {
|
|
return integrationsRef.current.get(activeIdRef.current) || null;
|
|
},
|
|
set current(v) {
|
|
const id = activeIdRef.current;
|
|
if (!id) return;
|
|
if (v) integrationsRef.current.set(id, v);
|
|
else integrationsRef.current.delete(id);
|
|
}
|
|
}), []);
|
|
const [myStatus, setMyStatusState] = React.useState(() => {
|
|
try {
|
|
return localStorage.getItem("securebit_my_status") || "available";
|
|
} catch {
|
|
return "available";
|
|
}
|
|
});
|
|
const myStatusRef = React.useRef(myStatus);
|
|
myStatusRef.current = myStatus;
|
|
const wirePresence = (s) => s === "invisible" ? "offline" : s;
|
|
const sendPresenceTo = React.useCallback((mgr, s) => {
|
|
if (!mgr || typeof mgr.sendMessage !== "function") return;
|
|
try {
|
|
if (mgr.isConnected && mgr.isConnected()) {
|
|
const p = mgr.sendMessage(JSON.stringify({ type: "presence", status: wirePresence(s) }));
|
|
if (p && typeof p.catch === "function") p.catch(() => {
|
|
});
|
|
}
|
|
} catch (_) {
|
|
}
|
|
}, []);
|
|
const setMyStatus = React.useCallback((key) => {
|
|
setMyStatusState(key);
|
|
try {
|
|
localStorage.setItem("securebit_my_status", key);
|
|
} catch {
|
|
}
|
|
for (const mgr of managersRef.current.values()) sendPresenceTo(mgr, key);
|
|
}, [sendPresenceTo]);
|
|
const [codeMode, setCodeMode] = React.useState(false);
|
|
const [viewOnceMode, setViewOnceMode] = React.useState(false);
|
|
const [viewOnceTtl, setViewOnceTtl] = React.useState(15);
|
|
const [disappearTtl, setDisappearTtl] = React.useState(0);
|
|
const [nowTick, setNowTick] = React.useState(() => Date.now());
|
|
const [isOffline, setIsOffline] = React.useState(typeof navigator !== "undefined" && navigator.onLine === false);
|
|
const offlineRef = React.useRef(isOffline);
|
|
React.useEffect(() => {
|
|
offlineRef.current = isOffline;
|
|
}, [isOffline]);
|
|
React.useEffect(() => {
|
|
const goOffline = () => setIsOffline(true);
|
|
const goOnline = () => setIsOffline(false);
|
|
window.addEventListener("offline", goOffline);
|
|
window.addEventListener("online", goOnline);
|
|
return () => {
|
|
window.removeEventListener("offline", goOffline);
|
|
window.removeEventListener("online", goOnline);
|
|
};
|
|
}, []);
|
|
const [relayOnlyMode, setRelayOnlyMode] = React.useState(() => {
|
|
try {
|
|
return localStorage.getItem("securebit_relay_only_mode") === "true";
|
|
} catch {
|
|
return false;
|
|
}
|
|
});
|
|
const [customIceServers, setCustomIceServers] = React.useState(null);
|
|
const [iceServersText, setIceServersText] = React.useState("");
|
|
const [iceSettingsPersisted, setIceSettingsPersisted] = React.useState(false);
|
|
const [showIceSettings, setShowIceSettings] = React.useState(false);
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
loadIceSettings().then((saved) => {
|
|
if (cancelled || !saved) return;
|
|
if (Array.isArray(saved.servers) && saved.servers.length > 0) {
|
|
setCustomIceServers(saved.servers);
|
|
setIceServersText(JSON.stringify(saved.servers, null, 2));
|
|
}
|
|
if (saved.privacyMode === "relay-only") {
|
|
setRelayOnlyMode(true);
|
|
}
|
|
setIceSettingsPersisted(true);
|
|
}).catch(() => {
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
React.useEffect(() => {
|
|
const open = () => setShowIceSettings(true);
|
|
window.addEventListener("securebit:open-network-settings", open);
|
|
return () => window.removeEventListener("securebit:open-network-settings", open);
|
|
}, []);
|
|
const handleApplyIceSettings = React.useCallback((next, persist) => {
|
|
const servers = next.useCustom && Array.isArray(next.servers) ? next.servers : null;
|
|
setCustomIceServers(servers && servers.length ? servers : null);
|
|
setIceServersText(next.serversText || "");
|
|
setRelayOnlyMode(next.privacyMode === "relay-only");
|
|
setShowIceSettings(false);
|
|
if (persist) {
|
|
setIceSettingsPersisted(true);
|
|
saveIceSettings({ servers: servers || [], privacyMode: next.privacyMode }).catch(() => {
|
|
});
|
|
} else if (iceSettingsPersisted) {
|
|
setIceSettingsPersisted(false);
|
|
clearIceSettings().catch(() => {
|
|
});
|
|
}
|
|
}, [iceSettingsPersisted]);
|
|
const handleForgetIceSettings = React.useCallback(async () => {
|
|
await clearIceSettings().catch(() => {
|
|
});
|
|
setIceSettingsPersisted(false);
|
|
setCustomIceServers(null);
|
|
setIceServersText("");
|
|
}, []);
|
|
const [messageInput, setMessageInput] = React.useState("");
|
|
const [showQRScanner, setShowQRScanner] = React.useState(false);
|
|
const [showQRScannerModal, setShowQRScannerModal] = React.useState(false);
|
|
const [securityLevel, setSecurityLevel] = React.useState(null);
|
|
const [sessionTimeLeft, setSessionTimeLeft] = React.useState(0);
|
|
const [pendingSession, setPendingSession] = React.useState(null);
|
|
const [connectionState, setConnectionState] = React.useState({
|
|
status: "disconnected",
|
|
hasActiveAnswer: false,
|
|
answerCreatedAt: null,
|
|
isUserInitiatedDisconnect: false
|
|
});
|
|
const updateConnectionState = (newState, options = {}) => {
|
|
const { preserveAnswer = false, isUserAction = false } = options;
|
|
setConnectionState((prev) => ({
|
|
...prev,
|
|
...newState,
|
|
isUserInitiatedDisconnect: isUserAction,
|
|
hasActiveAnswer: preserveAnswer ? prev.hasActiveAnswer : false,
|
|
answerCreatedAt: preserveAnswer ? prev.answerCreatedAt : null
|
|
}));
|
|
};
|
|
const shouldPreserveAnswerData = () => {
|
|
const hasAnswerData = !!answerData || answerInput && typeof answerInput === "string" && answerInput.trim().length > 0;
|
|
const hasAnswerQR = qrCodeUrl && typeof qrCodeUrl === "string" && qrCodeUrl.trim().length > 0;
|
|
const shouldPreserve = connectionState.hasActiveAnswer && !connectionState.isUserInitiatedDisconnect || hasAnswerData && !connectionState.isUserInitiatedDisconnect || hasAnswerQR && !connectionState.isUserInitiatedDisconnect;
|
|
return shouldPreserve;
|
|
};
|
|
const markAnswerCreated = () => {
|
|
updateConnectionState({
|
|
hasActiveAnswer: true,
|
|
answerCreatedAt: Date.now()
|
|
});
|
|
};
|
|
React.useEffect(() => {
|
|
return installDebugWindowHooks({
|
|
targetWindow: window,
|
|
webrtcManagerRef,
|
|
onClearData: handleClearData
|
|
});
|
|
}, []);
|
|
const addMessageWithAutoScroll = React.useCallback((message, type, opts = {}) => {
|
|
const newMessage = {
|
|
message,
|
|
type,
|
|
id: Date.now() + Math.random(),
|
|
timestamp: typeof opts.timestamp === "number" ? opts.timestamp : Date.now(),
|
|
mid: opts.mid,
|
|
status: opts.status,
|
|
// WhatsApp-style: sending | sent | delivered | failed
|
|
viewOnce: opts.viewOnce === true,
|
|
viewOnceTtl: typeof opts.viewOnceTtl === "number" ? opts.viewOnceTtl : 15,
|
|
expiresAt: typeof opts.expiresAt === "number" ? opts.expiresAt : void 0
|
|
};
|
|
setMessages((prev) => {
|
|
const updated = [...prev, newMessage];
|
|
setTimeout(() => {
|
|
if (chatMessagesRef?.current) {
|
|
const container = chatMessagesRef.current;
|
|
try {
|
|
const { scrollTop, scrollHeight, clientHeight } = container;
|
|
const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
|
|
if (isNearBottom || prev.length === 0) {
|
|
requestAnimationFrame(() => {
|
|
if (container && container.scrollTo) {
|
|
container.scrollTo({
|
|
top: container.scrollHeight,
|
|
behavior: "smooth"
|
|
});
|
|
}
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.warn("Scroll error:", error);
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
}
|
|
}, 50);
|
|
return updated;
|
|
});
|
|
}, []);
|
|
const updateMessageStatus = React.useCallback((mid, status) => {
|
|
if (!mid) return;
|
|
setMessages((prev) => prev.map((m) => String(m.mid) === String(mid) && m.type === "sent" ? { ...m, status } : m));
|
|
}, []);
|
|
const flushOfflineQueues = React.useCallback(() => {
|
|
for (const [id, q] of queuesRef.current.entries()) {
|
|
const mgr = managersRef.current.get(id);
|
|
const out = q.outgoing;
|
|
q.outgoing = [];
|
|
for (const item of out) {
|
|
const send = mgr?.sendMessage?.(item.outText, item.meta);
|
|
if (send && typeof send.then === "function") {
|
|
send.then(() => dispatch({ type: SESSION_ACTIONS.UPDATE_MESSAGE_STATUS, id, mid: item.mid, status: "delivered" })).catch(() => dispatch({ type: SESSION_ACTIONS.UPDATE_MESSAGE_STATUS, id, mid: item.mid, status: "failed" }));
|
|
}
|
|
}
|
|
const inc = q.incoming;
|
|
q.incoming = [];
|
|
if (inc.length > 0) {
|
|
dispatch({ type: SESSION_ACTIONS.ADD_MESSAGE, id, message: buildSessionMessage(
|
|
`Connection restored \u2014 ${inc.length} message${inc.length === 1 ? "" : "s"} received while you were offline.`,
|
|
"notice"
|
|
) });
|
|
}
|
|
const viewing = id === activeIdRef.current && (typeof document === "undefined" || document.visibilityState === "visible");
|
|
for (const item of inc) {
|
|
dispatch({ type: SESSION_ACTIONS.ADD_MESSAGE, id, message: buildSessionMessage(item.message, item.type, item.opts) });
|
|
if (item.opts && item.opts.mid && item.type === "received") {
|
|
if (viewing) {
|
|
try {
|
|
mgr?.sendDeliveryReceipt?.(item.opts.mid);
|
|
} catch (_) {
|
|
}
|
|
} else if (q.pendingReadAcks) q.pendingReadAcks.push(item.opts.mid);
|
|
}
|
|
}
|
|
}
|
|
}, []);
|
|
React.useEffect(() => {
|
|
if (isOffline) return;
|
|
flushOfflineQueues();
|
|
}, [isOffline, flushOfflineQueues]);
|
|
const updateSecurityLevel = React.useCallback(async () => {
|
|
if (window.isUpdatingSecurity) {
|
|
return;
|
|
}
|
|
window.isUpdatingSecurity = true;
|
|
try {
|
|
if (webrtcManagerRef.current) {
|
|
setSecurityLevel({
|
|
level: "MAXIMUM",
|
|
score: 100,
|
|
color: "green",
|
|
details: "All security features enabled by default",
|
|
passedChecks: 10,
|
|
totalChecks: 10,
|
|
isRealData: true
|
|
});
|
|
if (window.DEBUG_MODE) {
|
|
const currentLevel = webrtcManagerRef.current.ecdhKeyPair && webrtcManagerRef.current.ecdsaKeyPair ? await webrtcManagerRef.current.calculateSecurityLevel() : {
|
|
level: "MAXIMUM",
|
|
score: 100,
|
|
sessionType: "premium",
|
|
passedChecks: 10,
|
|
totalChecks: 10
|
|
};
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to update security level:", error);
|
|
setSecurityLevel({
|
|
level: "ERROR",
|
|
score: 0,
|
|
color: "red",
|
|
details: "Verification failed"
|
|
});
|
|
} finally {
|
|
setTimeout(() => {
|
|
window.isUpdatingSecurity = false;
|
|
}, 2e3);
|
|
}
|
|
}, []);
|
|
const chatMessagesRef = React.useRef(null);
|
|
const scrollToBottom = createScrollToBottomFunction(chatMessagesRef);
|
|
React.useEffect(() => {
|
|
try {
|
|
localStorage.setItem("securebit_relay_only_mode", String(relayOnlyMode));
|
|
} catch {
|
|
}
|
|
if (webrtcManagerRef.current?._config?.webrtc) {
|
|
webrtcManagerRef.current._setRelayOnlyMode(relayOnlyMode);
|
|
}
|
|
}, [relayOnlyMode]);
|
|
React.useEffect(() => {
|
|
if (messages.length > 0 && chatMessagesRef.current) {
|
|
scrollToBottom();
|
|
setTimeout(scrollToBottom, 50);
|
|
setTimeout(scrollToBottom, 150);
|
|
}
|
|
}, [messages]);
|
|
const anyExpiring = sessionsState.order.some((id) => (sessionsState.sessions[id]?.messages || []).some((m) => typeof m.expiresAt === "number"));
|
|
const sessionsStateRef = React.useRef(sessionsState);
|
|
sessionsStateRef.current = sessionsState;
|
|
React.useEffect(() => {
|
|
if (!anyExpiring) return;
|
|
const expireFn = (prev) => {
|
|
const now = Date.now();
|
|
let changed = false;
|
|
const next = prev.map((m) => {
|
|
if (typeof m.expiresAt === "number" && m.expiresAt <= now && !m.expired) {
|
|
changed = true;
|
|
return { ...m, expired: true, message: "", expiresAt: void 0 };
|
|
}
|
|
return m;
|
|
});
|
|
return changed ? next : prev;
|
|
};
|
|
const interval = setInterval(() => {
|
|
const now = Date.now();
|
|
setNowTick(now);
|
|
const st = sessionsStateRef.current;
|
|
for (const id of st.order) {
|
|
const msgs = st.sessions[id]?.messages || [];
|
|
if (msgs.some((m) => typeof m.expiresAt === "number" && m.expiresAt <= now && !m.expired)) {
|
|
dispatch({ type: SESSION_ACTIONS.SET_MESSAGES, id, updater: expireFn });
|
|
}
|
|
}
|
|
}, 1e3);
|
|
return () => clearInterval(interval);
|
|
}, [anyExpiring]);
|
|
const createSession = (opts = {}) => {
|
|
const role = opts.role || "offer";
|
|
const entry = createSessionEntry({ role });
|
|
const id = entry.id;
|
|
dispatch({ type: SESSION_ACTIONS.CREATE_SESSION, entry, activate: opts.activate !== false });
|
|
queuesRef.current.set(id, { incoming: [], outgoing: [], pendingReadAcks: [] });
|
|
const setMessages2 = (u) => {
|
|
if (typeof u === "function") dispatch({ type: SESSION_ACTIONS.SET_MESSAGES, id, updater: u });
|
|
else dispatch({ type: SESSION_ACTIONS.SET_MESSAGES, id, messages: u });
|
|
};
|
|
const addMessageWithAutoScroll2 = (message, type, opts2 = {}) => {
|
|
dispatch({ type: SESSION_ACTIONS.ADD_MESSAGE, id, message: buildSessionMessage(message, type, opts2) });
|
|
if (type === "received" && id !== activeIdRef.current) {
|
|
dispatch({ type: SESSION_ACTIONS.INCREMENT_UNREAD, id });
|
|
}
|
|
};
|
|
const updateMessageStatus2 = (mid, status) => {
|
|
if (mid) dispatch({ type: SESSION_ACTIONS.UPDATE_MESSAGE_STATUS, id, mid, status });
|
|
};
|
|
const setConnectionStatus2 = (status) => dispatch({ type: SESSION_ACTIONS.SET_STATUS, id, status });
|
|
const setKeyFingerprint2 = (fingerprint) => dispatch({ type: SESSION_ACTIONS.SET_FINGERPRINT, id, fingerprint });
|
|
const setVerificationCode2 = (code) => dispatch({ type: SESSION_ACTIONS.SET_VERIFICATION, id, code });
|
|
const setIsVerified2 = (v) => dispatch({ type: SESSION_ACTIONS.SET_SAS, id, sas: { isVerified: !!v } });
|
|
const setLocalVerificationConfirmed2 = (v) => dispatch({ type: SESSION_ACTIONS.SET_SAS, id, sas: { localConfirmed: !!v } });
|
|
const setRemoteVerificationConfirmed2 = (v) => dispatch({ type: SESSION_ACTIONS.SET_SAS, id, sas: { remoteConfirmed: !!v } });
|
|
const setBothVerificationsConfirmed2 = (v) => dispatch({ type: SESSION_ACTIONS.SET_SAS, id, sas: { bothConfirmed: !!v } });
|
|
const setShowVerification2 = (v) => dispatch({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { showVerification: !!v } });
|
|
const setShowOfferStep2 = (v) => dispatch({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { showOfferStep: !!v } });
|
|
const setShowAnswerStep2 = (v) => dispatch({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { showAnswerStep: !!v } });
|
|
const setShowQRCode2 = (v) => dispatch({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { showQRCode: !!v } });
|
|
const setQrCodeUrl2 = (v) => dispatch({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { qrCodeUrl: v } });
|
|
const setOfferData2 = (v) => dispatch({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { offerData: v } });
|
|
const setAnswerData2 = (v) => dispatch({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { answerData: v } });
|
|
const setOfferInput2 = (v) => dispatch({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { offerInput: v } });
|
|
const setAnswerInput2 = (v) => dispatch({ type: SESSION_ACTIONS.PATCH_SETUP, id, patch: { answerInput: v } });
|
|
const setPendingIncomingFiles2 = (u) => {
|
|
if (typeof u === "function") dispatch({ type: SESSION_ACTIONS.SET_PENDING_FILES, id, updater: u });
|
|
else dispatch({ type: SESSION_ACTIONS.SET_PENDING_FILES, id, files: u });
|
|
};
|
|
const sessionQueues = () => queuesRef.current.get(id) || { incoming: [], outgoing: [] };
|
|
const handleMessage = (message, type, meta) => {
|
|
if (typeof message === "string" && message.trim().startsWith("{")) {
|
|
try {
|
|
const parsedMessage = JSON.parse(message);
|
|
if (parsedMessage.type === "presence") {
|
|
const st = parsedMessage.data && parsedMessage.data.status || parsedMessage.status;
|
|
if (st) dispatch({ type: SESSION_ACTIONS.SET_PEER_PRESENCE, id, presence: st });
|
|
return;
|
|
}
|
|
const blockedTypes = [
|
|
"file_transfer_start",
|
|
"file_transfer_response",
|
|
"file_chunk",
|
|
"chunk_confirmation",
|
|
"file_transfer_complete",
|
|
"file_transfer_error",
|
|
"heartbeat",
|
|
"verification",
|
|
"verification_response",
|
|
"verification_confirmed",
|
|
"verification_both_confirmed",
|
|
"peer_disconnect",
|
|
"key_rotation_signal",
|
|
"key_rotation_ready",
|
|
"security_upgrade",
|
|
"message_delete",
|
|
"message_receipt"
|
|
];
|
|
if (parsedMessage.type && blockedTypes.includes(parsedMessage.type)) {
|
|
console.log(`Blocked system/file message from chat: ${parsedMessage.type}`);
|
|
return;
|
|
}
|
|
if (parsedMessage.type === "message" && typeof parsedMessage.data === "string") {
|
|
message = parsedMessage.data;
|
|
if (parsedMessage.meta && typeof parsedMessage.meta === "object") meta = parsedMessage.meta;
|
|
}
|
|
} catch (parseError) {
|
|
}
|
|
}
|
|
const opts2 = {};
|
|
if (meta && typeof meta === "object") {
|
|
if (typeof meta.mid === "string") opts2.mid = meta.mid;
|
|
if (meta.once === true) {
|
|
opts2.viewOnce = true;
|
|
opts2.viewOnceTtl = Number.isFinite(meta.onceTtl) ? meta.onceTtl : 15;
|
|
}
|
|
if (Number.isFinite(meta.ttl) && meta.ttl > 0) {
|
|
opts2.expiresAt = Date.now() + meta.ttl * 1e3;
|
|
}
|
|
if (Number.isFinite(meta.ts)) opts2.timestamp = meta.ts;
|
|
}
|
|
if (offlineRef.current && type === "received") {
|
|
sessionQueues().incoming.push({ message, type, opts: opts2 });
|
|
return;
|
|
}
|
|
addMessageWithAutoScroll2(message, type, opts2);
|
|
if (opts2.mid && type === "received") {
|
|
const beingViewed = id === activeIdRef.current && (typeof document === "undefined" || document.visibilityState === "visible");
|
|
if (beingViewed) {
|
|
try {
|
|
manager?.sendDeliveryReceipt?.(opts2.mid);
|
|
} catch (_) {
|
|
}
|
|
} else {
|
|
const q = sessionQueues();
|
|
if (q.pendingReadAcks) q.pendingReadAcks.push(opts2.mid);
|
|
}
|
|
}
|
|
};
|
|
const handleStatusChange = (status) => {
|
|
setConnectionStatus2(status);
|
|
if (status === "connected") {
|
|
document.dispatchEvent(new CustomEvent("new-connection"));
|
|
if (!window.isUpdatingSecurity) {
|
|
updateSecurityLevel().catch(console.error);
|
|
}
|
|
} else if (status === "verifying") {
|
|
setShowVerification2(true);
|
|
if (!window.isUpdatingSecurity) {
|
|
updateSecurityLevel().catch(console.error);
|
|
}
|
|
} else if (status === "verified") {
|
|
setIsVerified2(true);
|
|
setShowVerification2(false);
|
|
setBothVerificationsConfirmed2(true);
|
|
setConnectionStatus2("connected");
|
|
setTimeout(() => {
|
|
setIsVerified2(true);
|
|
}, 0);
|
|
try {
|
|
const s = myStatusRef.current === "invisible" ? "offline" : myStatusRef.current;
|
|
setTimeout(() => {
|
|
try {
|
|
const p = manager.sendMessage?.(JSON.stringify({ type: "presence", status: s }));
|
|
if (p && typeof p.catch === "function") p.catch(() => {
|
|
});
|
|
} catch (_) {
|
|
}
|
|
}, 400);
|
|
} catch (_) {
|
|
}
|
|
if (!window.isUpdatingSecurity) {
|
|
updateSecurityLevel().catch(console.error);
|
|
}
|
|
} else if (status === "connecting") {
|
|
if (!window.isUpdatingSecurity) {
|
|
updateSecurityLevel().catch(console.error);
|
|
}
|
|
} else if (status === "disconnected") {
|
|
setConnectionStatus2("disconnected");
|
|
setIsVerified2(false);
|
|
setShowVerification2(false);
|
|
setLocalVerificationConfirmed2(false);
|
|
setRemoteVerificationConfirmed2(false);
|
|
setBothVerificationsConfirmed2(false);
|
|
if (id === activeIdRef.current) document.dispatchEvent(new CustomEvent("disconnected"));
|
|
} else if (status === "peer_disconnected") {
|
|
if (id === activeIdRef.current) {
|
|
setSessionTimeLeft(0);
|
|
document.dispatchEvent(new CustomEvent("peer-disconnect"));
|
|
}
|
|
setConnectionStatus2("peer_disconnected");
|
|
setIsVerified2(false);
|
|
setShowVerification2(false);
|
|
setLocalVerificationConfirmed2(false);
|
|
setRemoteVerificationConfirmed2(false);
|
|
setBothVerificationsConfirmed2(false);
|
|
}
|
|
};
|
|
const handleKeyExchange = (fingerprint) => {
|
|
if (fingerprint === "") {
|
|
setKeyFingerprint2("");
|
|
} else {
|
|
setKeyFingerprint2(fingerprint);
|
|
}
|
|
};
|
|
const handleVerificationRequired = (code) => {
|
|
if (code === "") {
|
|
setVerificationCode2("");
|
|
setShowVerification2(false);
|
|
} else {
|
|
setVerificationCode2(code);
|
|
setShowVerification2(true);
|
|
}
|
|
};
|
|
const handleVerificationStateChange = (state) => {
|
|
setLocalVerificationConfirmed2(state.localConfirmed);
|
|
setRemoteVerificationConfirmed2(state.remoteConfirmed);
|
|
setBothVerificationsConfirmed2(state.bothConfirmed);
|
|
};
|
|
const handleAnswerError = (errorType, errorMessage) => {
|
|
if (errorType === "replay_attack") {
|
|
setSessionTimeLeft(0);
|
|
setPendingSession(null);
|
|
addMessageWithAutoScroll2("\u{1F4A1} Data is outdated. Please create a new invitation or use a current response code.", "system");
|
|
if (typeof console.clear === "function") {
|
|
console.clear();
|
|
}
|
|
} else if (errorType === "security_violation") {
|
|
setSessionTimeLeft(0);
|
|
setPendingSession(null);
|
|
addMessageWithAutoScroll2(` Security breach: ${errorMessage}`, "system");
|
|
if (typeof console.clear === "function") {
|
|
console.clear();
|
|
}
|
|
}
|
|
};
|
|
if (typeof console.clear === "function") {
|
|
console.clear();
|
|
}
|
|
const manager = new EnhancedSecureWebRTCManager(
|
|
handleMessage,
|
|
handleStatusChange,
|
|
handleKeyExchange,
|
|
handleVerificationRequired,
|
|
handleAnswerError,
|
|
handleVerificationStateChange,
|
|
{
|
|
webrtc: {
|
|
relayOnly: relayOnlyMode,
|
|
// Priority: user's custom servers > operator override > built-in defaults.
|
|
iceServers: Array.isArray(customIceServers) && customIceServers.length ? customIceServers : Array.isArray(window.SECUREBIT_ICE_SERVERS) ? window.SECUREBIT_ICE_SERVERS : void 0
|
|
}
|
|
}
|
|
);
|
|
managersRef.current.set(id, manager);
|
|
manager.onMessageDelete = (mid) => {
|
|
if (!mid) return;
|
|
setMessages2((prev) => prev.filter((m) => String(m.mid) !== String(mid)));
|
|
};
|
|
manager.onMessageDelivered = (mid) => {
|
|
updateMessageStatus2(mid, "read");
|
|
};
|
|
if (typeof Notification !== "undefined" && Notification && Notification.permission === "granted" && window.NotificationIntegration && !integrationsRef.current.get(id)) {
|
|
try {
|
|
const integration = new window.NotificationIntegration(manager);
|
|
integration.init().then(() => {
|
|
integrationsRef.current.set(id, integration);
|
|
}).catch((error) => {
|
|
});
|
|
} catch (error) {
|
|
}
|
|
}
|
|
handleMessage(" SecureBit.chat Enhanced Security Edition v4.10.0 - ECDH + DTLS + SAS initialized. Ready to establish a secure connection with ECDH key exchange, DTLS fingerprint verification, and SAS authentication to prevent MITM attacks.", "system");
|
|
manager.setFileTransferCallbacks(
|
|
// Progress callback
|
|
(progress) => {
|
|
console.log("File progress:", progress);
|
|
},
|
|
// File received callback — auto-save to disk, no button press needed.
|
|
(fileData) => {
|
|
const sizeMb = Math.max(1, Math.round((fileData.fileSize || 0) / (1024 * 1024)));
|
|
const saveToDisk = async () => {
|
|
const url = await fileData.getObjectURL();
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = fileData.fileName || "file";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
setTimeout(() => fileData.revokeObjectURL(url), 15e3);
|
|
};
|
|
saveToDisk().then(() => {
|
|
addMessageWithAutoScroll2(`File received & saved: ${fileData.fileName} (${sizeMb} MB)`, "system");
|
|
}).catch((e) => {
|
|
console.error("Auto-save failed:", e);
|
|
addMessageWithAutoScroll2(`File received: ${fileData.fileName} (${sizeMb} MB). Open the file panel to download it.`, "system");
|
|
});
|
|
},
|
|
// Error callback
|
|
(error) => {
|
|
console.error("File transfer error:", error);
|
|
if (error.includes("Connection not ready")) {
|
|
addMessageWithAutoScroll2(` File transfer error: connection not ready. Try again later.`, "system");
|
|
} else if (error.includes("File too large")) {
|
|
addMessageWithAutoScroll2(` File is too big. Maximum size: 100 MB`, "system");
|
|
} else {
|
|
addMessageWithAutoScroll2(` File transfer error: ${error}`, "system");
|
|
}
|
|
},
|
|
// Incoming file request callback — receiver must explicitly accept before any data is sent
|
|
(fileRequest) => {
|
|
setPendingIncomingFiles2((prev) => {
|
|
if (prev.some((f) => f.fileId === fileRequest.fileId)) return prev;
|
|
return [...prev, fileRequest];
|
|
});
|
|
}
|
|
);
|
|
return id;
|
|
};
|
|
const createSessionRef = React.useRef(createSession);
|
|
createSessionRef.current = createSession;
|
|
const destroyingRef = React.useRef(/* @__PURE__ */ new Set());
|
|
const destroySession = React.useCallback((id) => {
|
|
if (!id || destroyingRef.current.has(id)) return;
|
|
destroyingRef.current.add(id);
|
|
try {
|
|
const mgr = managersRef.current.get(id);
|
|
if (mgr) {
|
|
try {
|
|
mgr.disconnect();
|
|
} catch (_) {
|
|
}
|
|
managersRef.current.delete(id);
|
|
}
|
|
const integ = integrationsRef.current.get(id);
|
|
if (integ) {
|
|
try {
|
|
integ.cleanup?.();
|
|
} catch (_) {
|
|
}
|
|
integrationsRef.current.delete(id);
|
|
}
|
|
queuesRef.current.delete(id);
|
|
dispatch({ type: SESSION_ACTIONS.REMOVE_SESSION, id });
|
|
} finally {
|
|
destroyingRef.current.delete(id);
|
|
}
|
|
}, []);
|
|
React.useEffect(() => {
|
|
if (sessionsState.order.length === 0) createSessionRef.current({ role: "offer" });
|
|
}, [sessionsState.order.length]);
|
|
const [sidebarCollapsed, setSidebarCollapsed] = React.useState(() => {
|
|
try {
|
|
return localStorage.getItem("securebit_sidebar_collapsed") === "true";
|
|
} catch {
|
|
return false;
|
|
}
|
|
});
|
|
React.useEffect(() => {
|
|
try {
|
|
localStorage.setItem("securebit_sidebar_collapsed", String(sidebarCollapsed));
|
|
} catch {
|
|
}
|
|
}, [sidebarCollapsed]);
|
|
const [sidebarDrawerOpen, setSidebarDrawerOpen] = React.useState(false);
|
|
const handleSelectSession = React.useCallback((id) => {
|
|
dispatch({ type: SESSION_ACTIONS.SET_ACTIVE, id });
|
|
dispatch({ type: SESSION_ACTIONS.CLEAR_UNREAD, id });
|
|
setSidebarDrawerOpen(false);
|
|
}, []);
|
|
const handleNewChat = React.useCallback(() => {
|
|
createSessionRef.current({ role: "offer" });
|
|
setSidebarDrawerOpen(false);
|
|
}, []);
|
|
const handleRenameSession = React.useCallback((id, label) => {
|
|
dispatch({ type: SESSION_ACTIONS.RENAME, id, label });
|
|
}, []);
|
|
const flushReadAcks = React.useCallback((id) => {
|
|
if (!id) return;
|
|
const q = queuesRef.current.get(id);
|
|
const mgr = managersRef.current.get(id);
|
|
if (!q || !mgr || !q.pendingReadAcks || q.pendingReadAcks.length === 0) return;
|
|
const acks = q.pendingReadAcks;
|
|
q.pendingReadAcks = [];
|
|
for (const mid of acks) {
|
|
try {
|
|
mgr.sendDeliveryReceipt?.(mid);
|
|
} catch (_) {
|
|
}
|
|
}
|
|
}, []);
|
|
React.useEffect(() => {
|
|
if (!activeSessionId) return;
|
|
dispatch({ type: SESSION_ACTIONS.CLEAR_UNREAD, id: activeSessionId });
|
|
if (typeof document === "undefined" || document.visibilityState === "visible") flushReadAcks(activeSessionId);
|
|
}, [activeSessionId, flushReadAcks]);
|
|
const didInitRef = React.useRef(false);
|
|
React.useEffect(() => {
|
|
if (didInitRef.current) return;
|
|
didInitRef.current = true;
|
|
let isTabSwitching = false;
|
|
let tabSwitchTimeout = null;
|
|
const handleBeforeUnload = (event) => {
|
|
if (event.type === "beforeunload" && !isTabSwitching) {
|
|
for (const mgr of managersRef.current.values()) {
|
|
try {
|
|
if (mgr.isConnected && mgr.isConnected()) {
|
|
try {
|
|
mgr.sendSystemMessage({ type: "peer_disconnect", reason: "user_disconnect", timestamp: Date.now() });
|
|
} catch (_) {
|
|
}
|
|
setTimeout(() => {
|
|
try {
|
|
mgr.disconnect();
|
|
} catch (_) {
|
|
}
|
|
}, 100);
|
|
} else {
|
|
mgr.disconnect();
|
|
}
|
|
} catch (_) {
|
|
}
|
|
}
|
|
} else if (isTabSwitching) {
|
|
event.preventDefault();
|
|
event.returnValue = "";
|
|
}
|
|
};
|
|
const handleVisibilityChange = () => {
|
|
if (document.visibilityState === "hidden") {
|
|
isTabSwitching = true;
|
|
if (tabSwitchTimeout) clearTimeout(tabSwitchTimeout);
|
|
tabSwitchTimeout = setTimeout(() => {
|
|
isTabSwitching = false;
|
|
}, 5e3);
|
|
} else if (document.visibilityState === "visible") {
|
|
isTabSwitching = false;
|
|
if (tabSwitchTimeout) {
|
|
clearTimeout(tabSwitchTimeout);
|
|
tabSwitchTimeout = null;
|
|
}
|
|
flushReadAcks(activeIdRef.current);
|
|
}
|
|
};
|
|
window.addEventListener("beforeunload", handleBeforeUnload);
|
|
document.addEventListener("visibilitychange", handleVisibilityChange);
|
|
return () => {
|
|
window.removeEventListener("beforeunload", handleBeforeUnload);
|
|
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
|
if (tabSwitchTimeout) {
|
|
clearTimeout(tabSwitchTimeout);
|
|
tabSwitchTimeout = null;
|
|
}
|
|
for (const mgr of managersRef.current.values()) {
|
|
try {
|
|
mgr.disconnect();
|
|
} catch (_) {
|
|
}
|
|
}
|
|
managersRef.current.clear();
|
|
for (const integ of integrationsRef.current.values()) {
|
|
try {
|
|
integ.cleanup?.();
|
|
} catch (_) {
|
|
}
|
|
}
|
|
integrationsRef.current.clear();
|
|
queuesRef.current.clear();
|
|
};
|
|
}, []);
|
|
const compressOfferData = (offerData2) => {
|
|
try {
|
|
const offer = typeof offerData2 === "string" ? JSON.parse(offerData2) : offerData2;
|
|
const minimalOffer = {
|
|
type: offer.type,
|
|
version: offer.version,
|
|
timestamp: offer.timestamp,
|
|
sessionId: offer.sessionId,
|
|
connectionId: offer.connectionId,
|
|
verificationCode: offer.verificationCode,
|
|
salt: offer.salt,
|
|
// Use only key fingerprints instead of full keys
|
|
keyFingerprints: offer.keyFingerprints,
|
|
// Add a reference to get full data
|
|
fullDataAvailable: true,
|
|
compressionLevel: "minimal"
|
|
};
|
|
return JSON.stringify(minimalOffer);
|
|
} catch (error) {
|
|
console.error("Error compressing offer data:", error);
|
|
return offerData2;
|
|
}
|
|
};
|
|
const createQRReference = (offerData2) => {
|
|
try {
|
|
const referenceId = `offer_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|
localStorage.setItem(`qr_offer_${referenceId}`, JSON.stringify(offerData2));
|
|
const qrReference = {
|
|
type: "secure_offer_reference",
|
|
referenceId,
|
|
timestamp: Date.now(),
|
|
message: "Scan this QR code and use the reference ID to get full offer data"
|
|
};
|
|
return JSON.stringify(qrReference);
|
|
} catch (error) {
|
|
console.error("Error creating QR reference:", error);
|
|
return null;
|
|
}
|
|
};
|
|
const createTemplateOffer = (offer) => {
|
|
const templateOffer = {
|
|
type: "enhanced_secure_offer_template",
|
|
version: "4.0",
|
|
sessionId: offer.sessionId,
|
|
connectionId: offer.connectionId,
|
|
verificationCode: offer.verificationCode,
|
|
timestamp: offer.timestamp,
|
|
// Avoid bulky fields (SDP, raw keys); keep only fingerprints and essentials
|
|
keyFingerprints: offer.keyFingerprints,
|
|
// Keep concise auth hints (omit large nonces)
|
|
authChallenge: offer?.authChallenge?.challenge,
|
|
// Optionally include a compact capability hint if small
|
|
capabilities: Array.isArray(offer.capabilities) && offer.capabilities.length <= 5 ? offer.capabilities : void 0
|
|
};
|
|
return templateOffer;
|
|
};
|
|
const MAX_QR_LEN = 800;
|
|
const BIN_MAX_QR_LEN = 400;
|
|
const [qrFramesTotal, setQrFramesTotal] = React.useState(0);
|
|
const [qrFrameIndex, setQrFrameIndex] = React.useState(0);
|
|
const [qrManualMode, setQrManualMode] = React.useState(false);
|
|
const qrAnimationRef = React.useRef({ timer: null, chunks: [], idx: 0, active: false });
|
|
React.useEffect(() => () => {
|
|
try {
|
|
if (qrAnimationRef.current && qrAnimationRef.current.timer) {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
qrAnimationRef.current.timer = null;
|
|
}
|
|
} catch {
|
|
}
|
|
}, [activeSessionId]);
|
|
const stopQrAnimation = () => {
|
|
try {
|
|
if (qrAnimationRef.current.timer) {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
}
|
|
} catch {
|
|
}
|
|
qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
|
|
setQrFrameIndex(0);
|
|
setQrFramesTotal(0);
|
|
setQrManualMode(false);
|
|
};
|
|
const renderCurrent = async () => {
|
|
const { chunks, idx } = qrAnimationRef.current || {};
|
|
if (!chunks || !chunks.length) return;
|
|
const current = chunks[idx % chunks.length];
|
|
try {
|
|
const isDesktop = typeof window !== "undefined" && (window.innerWidth || 0) >= 1024;
|
|
const QR_SIZE = isDesktop ? 720 : 512;
|
|
const url = await (window.generateQRCode ? window.generateQRCode(current, { errorCorrectionLevel: "M", margin: 2, size: QR_SIZE }) : Promise.resolve(""));
|
|
if (url) setQrCodeUrl(url);
|
|
} catch (e) {
|
|
console.warn("Animated QR render error (current):", e);
|
|
}
|
|
setQrFrameIndex((qrAnimationRef.current?.idx || 0) % (qrAnimationRef.current?.chunks?.length || 1) + 1);
|
|
};
|
|
const renderAndAdvance = async () => {
|
|
await renderCurrent();
|
|
const len = qrAnimationRef.current?.chunks?.length || 0;
|
|
if (len > 0) {
|
|
const nextIdx = ((qrAnimationRef.current?.idx || 0) + 1) % len;
|
|
qrAnimationRef.current.idx = nextIdx;
|
|
setQrFrameIndex(nextIdx + 1);
|
|
}
|
|
};
|
|
const toggleQrManualMode = () => {
|
|
const newManualMode = !qrManualMode;
|
|
setQrManualMode(newManualMode);
|
|
if (newManualMode) {
|
|
if (qrAnimationRef.current.timer) {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
qrAnimationRef.current.timer = null;
|
|
}
|
|
console.log("QR Manual mode enabled - auto-scroll stopped");
|
|
} else {
|
|
if (qrAnimationRef.current.chunks.length > 1) {
|
|
const intervalMs = 3e3;
|
|
qrAnimationRef.current.active = true;
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
|
|
}
|
|
console.log("QR Manual mode disabled - auto-scroll resumed");
|
|
}
|
|
};
|
|
const nextQrFrame = async () => {
|
|
console.log("\u{1F3AE} nextQrFrame called, qrFramesTotal:", qrFramesTotal, "qrAnimationRef.current:", qrAnimationRef.current);
|
|
if (qrAnimationRef.current.chunks.length > 1) {
|
|
const nextIdx = (qrAnimationRef.current.idx + 1) % qrAnimationRef.current.chunks.length;
|
|
qrAnimationRef.current.idx = nextIdx;
|
|
setQrFrameIndex(nextIdx + 1);
|
|
console.log("\u{1F3AE} Next frame index:", nextIdx + 1);
|
|
try {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
} catch {
|
|
}
|
|
qrAnimationRef.current.timer = null;
|
|
await renderCurrent();
|
|
if (!qrManualMode && qrAnimationRef.current.chunks.length > 1) {
|
|
const intervalMs = 3e3;
|
|
qrAnimationRef.current.active = true;
|
|
qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
|
|
} else {
|
|
qrAnimationRef.current.active = false;
|
|
}
|
|
} else {
|
|
console.log("\u{1F3AE} No multiple frames to navigate");
|
|
}
|
|
};
|
|
const prevQrFrame = async () => {
|
|
console.log("\u{1F3AE} prevQrFrame called, qrFramesTotal:", qrFramesTotal, "qrAnimationRef.current:", qrAnimationRef.current);
|
|
if (qrAnimationRef.current.chunks.length > 1) {
|
|
const prevIdx = (qrAnimationRef.current.idx - 1 + qrAnimationRef.current.chunks.length) % qrAnimationRef.current.chunks.length;
|
|
qrAnimationRef.current.idx = prevIdx;
|
|
setQrFrameIndex(prevIdx + 1);
|
|
console.log("\u{1F3AE} Previous frame index:", prevIdx + 1);
|
|
try {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
} catch {
|
|
}
|
|
qrAnimationRef.current.timer = null;
|
|
await renderCurrent();
|
|
if (!qrManualMode && qrAnimationRef.current.chunks.length > 1) {
|
|
const intervalMs = 3e3;
|
|
qrAnimationRef.current.active = true;
|
|
qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
|
|
} else {
|
|
qrAnimationRef.current.active = false;
|
|
}
|
|
} else {
|
|
console.log("\u{1F3AE} No multiple frames to navigate");
|
|
}
|
|
};
|
|
const qrChunksBufferRef = React.useRef({ id: null, total: 0, seen: /* @__PURE__ */ new Set(), items: [] });
|
|
const generateQRCode = async (data) => {
|
|
try {
|
|
const originalSize = typeof data === "string" ? data.length : JSON.stringify(data).length;
|
|
const isDesktop = typeof window !== "undefined" && (window.innerWidth || 0) >= 1024;
|
|
const QR_SIZE = isDesktop ? 720 : 512;
|
|
if (typeof window.generateBinaryQRCodeFromObject === "function") {
|
|
try {
|
|
const obj = typeof data === "string" ? JSON.parse(data) : data;
|
|
const qrDataUrl = await window.generateBinaryQRCodeFromObject(obj, { errorCorrectionLevel: "M", size: QR_SIZE, margin: 2 });
|
|
if (qrDataUrl) {
|
|
try {
|
|
if (qrAnimationRef.current && qrAnimationRef.current.timer) {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
}
|
|
} catch {
|
|
}
|
|
qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
|
|
setQrFrameIndex(0);
|
|
setQrFramesTotal(0);
|
|
setQrManualMode(false);
|
|
setQrCodeUrl(qrDataUrl);
|
|
setQrFramesTotal(1);
|
|
setQrFrameIndex(1);
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
console.warn("Binary QR generation failed, falling back to compressed:", e?.message || e);
|
|
}
|
|
}
|
|
if (typeof window.generateCompressedQRCode === "function") {
|
|
try {
|
|
const payload2 = typeof data === "string" ? data : JSON.stringify(data);
|
|
const qrDataUrl = await window.generateCompressedQRCode(payload2, { errorCorrectionLevel: "M", size: QR_SIZE, margin: 2 });
|
|
if (qrDataUrl) {
|
|
try {
|
|
if (qrAnimationRef.current && qrAnimationRef.current.timer) {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
}
|
|
} catch {
|
|
}
|
|
qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
|
|
setQrFrameIndex(0);
|
|
setQrFramesTotal(0);
|
|
setQrManualMode(false);
|
|
setQrCodeUrl(qrDataUrl);
|
|
setQrFramesTotal(1);
|
|
setQrFrameIndex(1);
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
console.warn("Compressed QR generation failed, falling back to plain:", e?.message || e);
|
|
}
|
|
}
|
|
const payload = typeof data === "string" ? data : JSON.stringify(data);
|
|
if (payload.length <= MAX_QR_LEN) {
|
|
if (!window.generateQRCode) throw new Error("QR code generator unavailable");
|
|
try {
|
|
if (qrAnimationRef.current && qrAnimationRef.current.timer) {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
}
|
|
} catch {
|
|
}
|
|
qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
|
|
setQrFrameIndex(0);
|
|
setQrFramesTotal(0);
|
|
setQrManualMode(false);
|
|
const qrDataUrl = await window.generateQRCode(payload, { errorCorrectionLevel: "M", size: QR_SIZE, margin: 2 });
|
|
setQrCodeUrl(qrDataUrl);
|
|
setQrFramesTotal(1);
|
|
setQrFrameIndex(1);
|
|
return;
|
|
}
|
|
try {
|
|
if (qrAnimationRef.current && qrAnimationRef.current.timer) {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
}
|
|
} catch {
|
|
}
|
|
qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
|
|
setQrFrameIndex(0);
|
|
setQrFramesTotal(0);
|
|
setQrManualMode(false);
|
|
const id = `raw_${Date.now()}_${Math.random().toString(36).slice(2)}`;
|
|
const TARGET_CHUNKS = 10;
|
|
const FRAME_MAX = Math.max(200, Math.floor(payload.length / TARGET_CHUNKS));
|
|
const total = Math.ceil(payload.length / FRAME_MAX);
|
|
const rawChunks = [];
|
|
for (let i = 0; i < total; i++) {
|
|
const seq = i + 1;
|
|
const part = payload.slice(i * FRAME_MAX, (i + 1) * FRAME_MAX);
|
|
rawChunks.push(JSON.stringify({ hdr: { v: 1, id, seq, total, rt: "raw" }, body: part }));
|
|
}
|
|
if (!window.generateQRCode) throw new Error("QR code generator unavailable");
|
|
if (rawChunks.length === 1) {
|
|
const url = await window.generateQRCode(rawChunks[0], { errorCorrectionLevel: "M", margin: 2, size: QR_SIZE });
|
|
setQrCodeUrl(url);
|
|
setQrFramesTotal(1);
|
|
setQrFrameIndex(1);
|
|
return;
|
|
}
|
|
qrAnimationRef.current.chunks = rawChunks;
|
|
qrAnimationRef.current.idx = 0;
|
|
qrAnimationRef.current.active = true;
|
|
setQrFramesTotal(rawChunks.length);
|
|
setQrFrameIndex(1);
|
|
const EC_OPTS = { errorCorrectionLevel: "M", margin: 2, size: QR_SIZE };
|
|
await renderNext();
|
|
if (!qrManualMode) {
|
|
const intervalMs = 4e3;
|
|
qrAnimationRef.current.active = true;
|
|
qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
|
|
}
|
|
return;
|
|
} catch (error) {
|
|
console.error("QR code generation failed:", error);
|
|
setMessages((prev) => [...prev, {
|
|
message: ` QR code generation failed: ${error.message}`,
|
|
type: "error"
|
|
}]);
|
|
}
|
|
};
|
|
const reconstructFromTemplate = (templateData) => {
|
|
const fullOffer = {
|
|
type: "enhanced_secure_offer",
|
|
version: templateData.version,
|
|
timestamp: templateData.timestamp,
|
|
sessionId: templateData.sessionId,
|
|
connectionId: templateData.connectionId,
|
|
verificationCode: templateData.verificationCode,
|
|
salt: templateData.salt,
|
|
sdp: templateData.sdp,
|
|
keyFingerprints: templateData.keyFingerprints,
|
|
capabilities: templateData.capabilities,
|
|
// Reconstruct ECDH key object
|
|
ecdhPublicKey: {
|
|
keyType: "ECDH",
|
|
keyData: templateData.ecdhKeyData,
|
|
timestamp: templateData.timestamp - 1e3,
|
|
// Approximate
|
|
version: templateData.version,
|
|
signature: templateData.ecdhSignature
|
|
},
|
|
// Reconstruct ECDSA key object
|
|
ecdsaPublicKey: {
|
|
keyType: "ECDSA",
|
|
keyData: templateData.ecdsaKeyData,
|
|
timestamp: templateData.timestamp - 999,
|
|
// Approximate
|
|
version: templateData.version,
|
|
signature: templateData.ecdsaSignature
|
|
},
|
|
// Reconstruct auth challenge
|
|
authChallenge: {
|
|
challenge: templateData.authChallenge,
|
|
timestamp: templateData.timestamp,
|
|
nonce: templateData.authNonce,
|
|
version: templateData.version
|
|
},
|
|
// Generate security level (can be recalculated)
|
|
securityLevel: {
|
|
level: "CRITICAL",
|
|
score: 20,
|
|
color: "red",
|
|
verificationResults: {
|
|
encryption: { passed: false, details: "Encryption not working", points: 0 },
|
|
keyExchange: { passed: true, details: "Simple key exchange verified", points: 15 },
|
|
messageIntegrity: { passed: false, details: "Message integrity failed", points: 0 },
|
|
rateLimiting: { passed: true, details: "Rate limiting active", points: 5 },
|
|
ecdsa: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
|
|
metadataProtection: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
|
|
pfs: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
|
|
nestedEncryption: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
|
|
packetPadding: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
|
|
advancedFeatures: { passed: false, details: "Premium session required - feature not available", points: 0 }
|
|
},
|
|
timestamp: templateData.timestamp,
|
|
details: "Real verification: 20/100 security checks passed (2/4 available)",
|
|
isRealData: true,
|
|
passedChecks: 2,
|
|
totalChecks: 4,
|
|
sessionType: "demo",
|
|
maxPossibleScore: 50
|
|
}
|
|
};
|
|
return fullOffer;
|
|
};
|
|
const handleQRScan = async (scannedData) => {
|
|
try {
|
|
console.log("QR Code scanned:", scannedData.substring(0, 100) + "...");
|
|
console.log("Current buffer state:", qrChunksBufferRef.current);
|
|
if (scannedData.startsWith("SB1:bin:") || qrChunksBufferRef.current && qrChunksBufferRef.current.id) {
|
|
console.log("Binary chunk detected:", scannedData.substring(0, 50) + "...");
|
|
if (!qrChunksBufferRef.current.id) {
|
|
console.log("Initializing buffer for binary chunks");
|
|
qrChunksBufferRef.current = {
|
|
id: `bin_${Date.now()}`,
|
|
total: 4,
|
|
// We expect 4 chunks
|
|
seen: /* @__PURE__ */ new Set(),
|
|
items: [],
|
|
lastUpdateMs: Date.now()
|
|
};
|
|
}
|
|
const chunkHash = scannedData.substring(0, 50);
|
|
if (qrChunksBufferRef.current.seen.has(chunkHash)) {
|
|
console.log(`Chunk already scanned, ignoring...`);
|
|
return Promise.resolve(false);
|
|
}
|
|
qrChunksBufferRef.current.seen.add(chunkHash);
|
|
qrChunksBufferRef.current.items.push(scannedData);
|
|
qrChunksBufferRef.current.lastUpdateMs = Date.now();
|
|
try {
|
|
const uniqueCount = qrChunksBufferRef.current.seen.size;
|
|
document.dispatchEvent(new CustomEvent("qr-scan-progress", {
|
|
detail: {
|
|
id: qrChunksBufferRef.current.id,
|
|
seq: uniqueCount,
|
|
total: qrChunksBufferRef.current.total
|
|
}
|
|
}));
|
|
setQrFramesTotal(qrChunksBufferRef.current.total);
|
|
setQrFrameIndex(uniqueCount);
|
|
} catch {
|
|
}
|
|
const isComplete = qrChunksBufferRef.current.seen.size >= qrChunksBufferRef.current.total;
|
|
console.log(`Chunks collected: ${qrChunksBufferRef.current.seen.size}/${qrChunksBufferRef.current.total}, complete: ${isComplete}`);
|
|
if (!isComplete) {
|
|
console.log(`Scanned chunk ${qrChunksBufferRef.current.seen.size}/${qrChunksBufferRef.current.total}, waiting for more...`);
|
|
return Promise.resolve(false);
|
|
}
|
|
try {
|
|
const fullBinaryData = qrChunksBufferRef.current.items.join("");
|
|
if (showOfferStep) {
|
|
setAnswerInput(fullBinaryData);
|
|
} else {
|
|
setOfferInput(fullBinaryData);
|
|
}
|
|
setMessages((prev) => [...prev, {
|
|
message: "All binary chunks captured. Payload reconstructed.",
|
|
type: "success"
|
|
}]);
|
|
qrChunksBufferRef.current = { id: null, total: 0, seen: /* @__PURE__ */ new Set(), items: [] };
|
|
setShowQRScannerModal(false);
|
|
return Promise.resolve(true);
|
|
} catch (e) {
|
|
console.warn("Binary chunks reconstruction failed:", e);
|
|
return Promise.resolve(false);
|
|
}
|
|
}
|
|
if (scannedData.length > 100 && !scannedData.startsWith("{") && !scannedData.startsWith("[")) {
|
|
console.log("Detected potential binary chunk (long non-JSON string):", scannedData.substring(0, 50) + "...");
|
|
if (!qrChunksBufferRef.current.id) {
|
|
console.log("Initializing buffer for potential binary chunks");
|
|
qrChunksBufferRef.current = {
|
|
id: `bin_${Date.now()}`,
|
|
total: 4,
|
|
// We expect 4 chunks
|
|
seen: /* @__PURE__ */ new Set(),
|
|
items: [],
|
|
lastUpdateMs: Date.now()
|
|
};
|
|
}
|
|
const chunkHash = scannedData.substring(0, 50);
|
|
if (qrChunksBufferRef.current.seen.has(chunkHash)) {
|
|
console.log(`Chunk already scanned, ignoring...`);
|
|
return Promise.resolve(false);
|
|
}
|
|
qrChunksBufferRef.current.seen.add(chunkHash);
|
|
qrChunksBufferRef.current.items.push(scannedData);
|
|
qrChunksBufferRef.current.lastUpdateMs = Date.now();
|
|
try {
|
|
const uniqueCount = qrChunksBufferRef.current.seen.size;
|
|
document.dispatchEvent(new CustomEvent("qr-scan-progress", {
|
|
detail: {
|
|
id: qrChunksBufferRef.current.id,
|
|
seq: uniqueCount,
|
|
total: qrChunksBufferRef.current.total
|
|
}
|
|
}));
|
|
setQrFramesTotal(qrChunksBufferRef.current.total);
|
|
setQrFrameIndex(uniqueCount);
|
|
} catch {
|
|
}
|
|
const isComplete = qrChunksBufferRef.current.seen.size >= qrChunksBufferRef.current.total;
|
|
console.log(`Chunks collected: ${qrChunksBufferRef.current.seen.size}/${qrChunksBufferRef.current.total}, complete: ${isComplete}`);
|
|
if (!isComplete) {
|
|
console.log(`Scanned chunk ${qrChunksBufferRef.current.seen.size}/${qrChunksBufferRef.current.total}, waiting for more...`);
|
|
return Promise.resolve(false);
|
|
}
|
|
try {
|
|
const fullBinaryData = qrChunksBufferRef.current.items.join("");
|
|
if (showOfferStep) {
|
|
setAnswerInput(fullBinaryData);
|
|
} else {
|
|
setOfferInput(fullBinaryData);
|
|
}
|
|
setMessages((prev) => [...prev, {
|
|
message: "All binary chunks captured. Payload reconstructed.",
|
|
type: "success"
|
|
}]);
|
|
qrChunksBufferRef.current = { id: null, total: 0, seen: /* @__PURE__ */ new Set(), items: [] };
|
|
setShowQRScannerModal(false);
|
|
return Promise.resolve(true);
|
|
} catch (e) {
|
|
console.warn("Binary chunks reconstruction failed:", e);
|
|
return Promise.resolve(false);
|
|
}
|
|
}
|
|
let parsedData;
|
|
if (typeof window.decodeAnyPayload === "function") {
|
|
const any = window.decodeAnyPayload(scannedData);
|
|
if (typeof any === "string") {
|
|
parsedData = JSON.parse(any);
|
|
} else {
|
|
parsedData = any;
|
|
}
|
|
} else {
|
|
const maybeDecompressed = typeof window.decompressIfNeeded === "function" ? window.decompressIfNeeded(scannedData) : scannedData;
|
|
parsedData = JSON.parse(maybeDecompressed);
|
|
}
|
|
console.log("Decoded data:", parsedData);
|
|
if (parsedData.hdr && parsedData.body) {
|
|
const { hdr } = parsedData;
|
|
if (!qrChunksBufferRef.current.id || qrChunksBufferRef.current.id !== hdr.id) {
|
|
qrChunksBufferRef.current = { id: hdr.id, total: hdr.total || 1, seen: /* @__PURE__ */ new Set(), items: [], lastUpdateMs: Date.now() };
|
|
try {
|
|
document.dispatchEvent(new CustomEvent("qr-scan-progress", { detail: { id: hdr.id, seq: 0, total: hdr.total || 1 } }));
|
|
} catch {
|
|
}
|
|
}
|
|
if (!qrChunksBufferRef.current.seen.has(hdr.seq)) {
|
|
qrChunksBufferRef.current.seen.add(hdr.seq);
|
|
qrChunksBufferRef.current.items.push(scannedData);
|
|
qrChunksBufferRef.current.lastUpdateMs = Date.now();
|
|
}
|
|
try {
|
|
const uniqueCount = qrChunksBufferRef.current.seen.size;
|
|
document.dispatchEvent(new CustomEvent("qr-scan-progress", { detail: { id: hdr.id, seq: uniqueCount, total: qrChunksBufferRef.current.total || hdr.total || 0 } }));
|
|
} catch {
|
|
}
|
|
const isComplete = qrChunksBufferRef.current.seen.size >= (qrChunksBufferRef.current.total || 1);
|
|
if (!isComplete) {
|
|
return Promise.resolve(false);
|
|
}
|
|
if (hdr.rt === "raw") {
|
|
try {
|
|
const parts = qrChunksBufferRef.current.items.map((s) => JSON.parse(s)).sort((a, b) => (a.hdr.seq || 0) - (b.hdr.seq || 0)).map((p) => p.body || "");
|
|
const fullText = parts.join("");
|
|
const payloadObj = JSON.parse(fullText);
|
|
if (showOfferStep) {
|
|
setAnswerInput(JSON.stringify(payloadObj, null, 2));
|
|
} else {
|
|
setOfferInput(JSON.stringify(payloadObj, null, 2));
|
|
}
|
|
setMessages((prev) => [...prev, { message: "All frames captured. RAW payload reconstructed.", type: "success" }]);
|
|
try {
|
|
document.dispatchEvent(new CustomEvent("qr-scan-complete", { detail: { id: hdr.id } }));
|
|
} catch {
|
|
}
|
|
qrChunksBufferRef.current = { id: null, total: 0, seen: /* @__PURE__ */ new Set(), items: [] };
|
|
setShowQRScannerModal(false);
|
|
return Promise.resolve(true);
|
|
} catch (e) {
|
|
console.warn("RAW multi-frame reconstruction failed:", e);
|
|
return Promise.resolve(false);
|
|
}
|
|
} else if (hdr.rt === "bin") {
|
|
try {
|
|
const parts = qrChunksBufferRef.current.items.map((s) => JSON.parse(s)).sort((a, b) => (a.hdr.seq || 0) - (b.hdr.seq || 0)).map((p) => p.body || "");
|
|
const fullText = parts.join("");
|
|
let payloadObj;
|
|
if (typeof window.decodeAnyPayload === "function") {
|
|
const any = window.decodeAnyPayload(fullText);
|
|
payloadObj = typeof any === "string" ? JSON.parse(any) : any;
|
|
} else {
|
|
payloadObj = JSON.parse(fullText);
|
|
}
|
|
if (showOfferStep) {
|
|
setAnswerInput(JSON.stringify(payloadObj, null, 2));
|
|
} else {
|
|
setOfferInput(JSON.stringify(payloadObj, null, 2));
|
|
}
|
|
setMessages((prev) => [...prev, { message: "All frames captured. BIN payload reconstructed.", type: "success" }]);
|
|
try {
|
|
document.dispatchEvent(new CustomEvent("qr-scan-complete", { detail: { id: hdr.id } }));
|
|
} catch {
|
|
}
|
|
qrChunksBufferRef.current = { id: null, total: 0, seen: /* @__PURE__ */ new Set(), items: [] };
|
|
setShowQRScannerModal(false);
|
|
return Promise.resolve(true);
|
|
} catch (e) {
|
|
console.warn("BIN multi-frame reconstruction failed:", e);
|
|
return Promise.resolve(false);
|
|
}
|
|
} else if (window.receiveAndProcess) {
|
|
try {
|
|
const results = await window.receiveAndProcess(qrChunksBufferRef.current.items);
|
|
if (results.length > 0) {
|
|
const { payloadObj } = results[0];
|
|
if (showOfferStep) {
|
|
setAnswerInput(JSON.stringify(payloadObj, null, 2));
|
|
} else {
|
|
setOfferInput(JSON.stringify(payloadObj, null, 2));
|
|
}
|
|
setMessages((prev) => [...prev, { message: "All frames captured. COSE payload reconstructed.", type: "success" }]);
|
|
try {
|
|
document.dispatchEvent(new CustomEvent("qr-scan-complete", { detail: { id: hdr.id } }));
|
|
} catch {
|
|
}
|
|
qrChunksBufferRef.current = { id: null, total: 0, seen: /* @__PURE__ */ new Set(), items: [] };
|
|
setShowQRScannerModal(false);
|
|
return Promise.resolve(true);
|
|
}
|
|
} catch (e) {
|
|
console.warn("COSE multi-chunk processing failed:", e);
|
|
}
|
|
return Promise.resolve(false);
|
|
} else {
|
|
return Promise.resolve(false);
|
|
}
|
|
}
|
|
if (parsedData.type === "enhanced_secure_offer_template") {
|
|
console.log("QR scan: Template-based offer detected, reconstructing...");
|
|
const fullOffer = reconstructFromTemplate(parsedData);
|
|
if (showOfferStep) {
|
|
setAnswerInput(JSON.stringify(fullOffer, null, 2));
|
|
console.log("\u{1F4F1} Template data populated to answerInput (waiting for response mode)");
|
|
} else {
|
|
setOfferInput(JSON.stringify(fullOffer, null, 2));
|
|
console.log("\u{1F4F1} Template data populated to offerInput (paste invitation mode)");
|
|
}
|
|
setMessages((prev) => [...prev, {
|
|
message: "\u{1F4F1} QR code scanned successfully! Full offer reconstructed from template.",
|
|
type: "success"
|
|
}]);
|
|
setShowQRScannerModal(false);
|
|
return true;
|
|
} else if (parsedData.type === "secure_offer_reference" && parsedData.referenceId) {
|
|
const fullOfferData = localStorage.getItem(`qr_offer_${parsedData.referenceId}`);
|
|
if (fullOfferData) {
|
|
const fullOffer = JSON.parse(fullOfferData);
|
|
if (showOfferStep) {
|
|
setAnswerInput(JSON.stringify(fullOffer, null, 2));
|
|
} else {
|
|
setOfferInput(JSON.stringify(fullOffer, null, 2));
|
|
}
|
|
setMessages((prev) => [...prev, {
|
|
message: "\u{1F4F1} QR code scanned successfully! Full offer data retrieved.",
|
|
type: "success"
|
|
}]);
|
|
setShowQRScannerModal(false);
|
|
return true;
|
|
} else {
|
|
setMessages((prev) => [...prev, {
|
|
message: "QR code reference found but full data not available. Please use copy/paste.",
|
|
type: "error"
|
|
}]);
|
|
return false;
|
|
}
|
|
} else {
|
|
if (!parsedData.sdp && parsedData.type === "enhanced_secure_offer") {
|
|
setMessages((prev) => [...prev, {
|
|
message: "Compressed QR may omit SDP for brevity. Use copy/paste if connection fails.",
|
|
type: "warning"
|
|
}]);
|
|
}
|
|
if (showOfferStep) {
|
|
console.log("QR scan: Populating answerInput with:", parsedData);
|
|
setAnswerInput(JSON.stringify(parsedData, null, 2));
|
|
} else {
|
|
console.log("QR scan: Populating offerInput with:", parsedData);
|
|
setOfferInput(JSON.stringify(parsedData, null, 2));
|
|
}
|
|
setMessages((prev) => [...prev, {
|
|
message: "\u{1F4F1} QR code scanned successfully!",
|
|
type: "success"
|
|
}]);
|
|
setShowQRScannerModal(false);
|
|
return true;
|
|
}
|
|
} catch (error) {
|
|
if (showOfferStep) {
|
|
setAnswerInput(scannedData);
|
|
} else {
|
|
setOfferInput(scannedData);
|
|
}
|
|
setMessages((prev) => [...prev, {
|
|
message: "\u{1F4F1} QR code scanned successfully!",
|
|
type: "success"
|
|
}]);
|
|
setShowQRScannerModal(false);
|
|
return true;
|
|
}
|
|
};
|
|
const handleCreateOffer = async () => {
|
|
try {
|
|
setIsGeneratingKeys(true);
|
|
setOfferData("");
|
|
setShowOfferStep(false);
|
|
setShowQRCode(false);
|
|
setQrCodeUrl("");
|
|
const offer = await webrtcManagerRef.current.createSecureOffer();
|
|
setOfferData(offer);
|
|
setShowOfferStep(true);
|
|
const offerString = typeof offer === "object" ? JSON.stringify(offer) : offer;
|
|
try {
|
|
if (typeof window.encodeBinaryToPrefixed === "function") {
|
|
const bin = window.encodeBinaryToPrefixed(offerString);
|
|
const TARGET_CHUNKS = 4;
|
|
let total = TARGET_CHUNKS;
|
|
let FRAME_MAX = Math.max(200, Math.ceil(bin.length / TARGET_CHUNKS));
|
|
if (FRAME_MAX <= 0) FRAME_MAX = 200;
|
|
if (bin.length <= FRAME_MAX) {
|
|
total = 1;
|
|
FRAME_MAX = bin.length;
|
|
} else {
|
|
FRAME_MAX = Math.ceil(bin.length / TARGET_CHUNKS);
|
|
total = TARGET_CHUNKS;
|
|
}
|
|
const id = `bin_${Date.now()}_${Math.random().toString(36).slice(2)}`;
|
|
const chunks = [];
|
|
for (let i = 0; i < total; i++) {
|
|
const seq = i + 1;
|
|
const part = bin.slice(i * FRAME_MAX, (i + 1) * FRAME_MAX);
|
|
chunks.push(part);
|
|
}
|
|
const isDesktop = typeof window !== "undefined" && (window.innerWidth || 0) >= 1024;
|
|
const QR_SIZE = isDesktop ? 720 : 512;
|
|
if (window.generateQRCode && chunks.length > 0) {
|
|
const firstUrl = await window.generateQRCode(chunks[0], { errorCorrectionLevel: "M", size: QR_SIZE, margin: 2 });
|
|
if (firstUrl) setQrCodeUrl(firstUrl);
|
|
}
|
|
try {
|
|
if (qrAnimationRef.current && qrAnimationRef.current.timer) {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
}
|
|
} catch {
|
|
}
|
|
qrAnimationRef.current = { timer: null, chunks, idx: 0, active: true };
|
|
setQrFramesTotal(chunks.length);
|
|
setQrFrameIndex(1);
|
|
setQrManualMode(false);
|
|
const intervalMs = 3e3;
|
|
qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
|
|
try {
|
|
setShowQRCode(true);
|
|
} catch {
|
|
}
|
|
} else {
|
|
await generateQRCode(offer);
|
|
try {
|
|
setShowQRCode(true);
|
|
} catch {
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.warn("Offer QR generation failed:", e);
|
|
}
|
|
const existingMessages = messages.filter(
|
|
(m) => m.type === "system" && (m.message.includes("Secure invitation created") || m.message.includes("Send the encrypted code"))
|
|
);
|
|
if (existingMessages.length === 0) {
|
|
setMessages((prev) => [...prev, {
|
|
message: "Secure invitation created and encrypted!",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
setMessages((prev) => [...prev, {
|
|
message: "Send the invitation code to your interlocutor via a secure channel (voice call, SMS, etc.).",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
}
|
|
if (!window.isUpdatingSecurity) {
|
|
updateSecurityLevel().catch(console.error);
|
|
}
|
|
} catch (error) {
|
|
setMessages((prev) => [...prev, {
|
|
message: `Error creating invitation: ${error.message}`,
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
} finally {
|
|
setIsGeneratingKeys(false);
|
|
}
|
|
};
|
|
const handleCreateAnswer = async () => {
|
|
try {
|
|
if (!offerInput.trim()) {
|
|
setMessages((prev) => [...prev, {
|
|
message: "You need to insert the invitation code from your interlocutor.",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
return;
|
|
}
|
|
try {
|
|
setMessages((prev) => [...prev, {
|
|
message: "Processing the secure invitation...",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
let offer;
|
|
try {
|
|
if (typeof window.decodeAnyPayload === "function") {
|
|
const any = window.decodeAnyPayload(offerInput.trim());
|
|
offer = typeof any === "string" ? JSON.parse(any) : any;
|
|
} else {
|
|
const rawText = typeof window.decompressIfNeeded === "function" ? window.decompressIfNeeded(offerInput.trim()) : offerInput.trim();
|
|
offer = JSON.parse(rawText);
|
|
}
|
|
} catch (parseError) {
|
|
throw new Error(`Invalid invitation format: ${parseError.message}`);
|
|
}
|
|
if (!offer || typeof offer !== "object") {
|
|
throw new Error("The invitation must be an object");
|
|
}
|
|
const isValidOfferType = offer.t === "offer" || offer.type === "enhanced_secure_offer";
|
|
if (!isValidOfferType) {
|
|
throw new Error("Invalid invitation type. Expected offer or enhanced_secure_offer");
|
|
}
|
|
const answer = await webrtcManagerRef.current.createSecureAnswer(offer);
|
|
setAnswerData(answer);
|
|
setShowAnswerStep(true);
|
|
const answerString = typeof answer === "object" ? JSON.stringify(answer) : answer;
|
|
try {
|
|
if (typeof window.encodeBinaryToPrefixed === "function") {
|
|
const bin = window.encodeBinaryToPrefixed(answerString);
|
|
const TARGET_CHUNKS = 4;
|
|
let total = TARGET_CHUNKS;
|
|
let FRAME_MAX = Math.max(200, Math.ceil(bin.length / TARGET_CHUNKS));
|
|
if (FRAME_MAX <= 0) FRAME_MAX = 200;
|
|
if (bin.length <= FRAME_MAX) {
|
|
total = 1;
|
|
FRAME_MAX = bin.length;
|
|
} else {
|
|
FRAME_MAX = Math.ceil(bin.length / TARGET_CHUNKS);
|
|
total = TARGET_CHUNKS;
|
|
}
|
|
const id = `ans_${Date.now()}_${Math.random().toString(36).slice(2)}`;
|
|
const chunks = [];
|
|
for (let i = 0; i < total; i++) {
|
|
const seq = i + 1;
|
|
const part = bin.slice(i * FRAME_MAX, (i + 1) * FRAME_MAX);
|
|
chunks.push(part);
|
|
}
|
|
const isDesktop = typeof window !== "undefined" && (window.innerWidth || 0) >= 1024;
|
|
const QR_SIZE = isDesktop ? 720 : 512;
|
|
if (window.generateQRCode && chunks.length > 0) {
|
|
const firstUrl = await window.generateQRCode(chunks[0], { errorCorrectionLevel: "M", size: QR_SIZE, margin: 2 });
|
|
if (firstUrl) setQrCodeUrl(firstUrl);
|
|
}
|
|
try {
|
|
if (qrAnimationRef.current && qrAnimationRef.current.timer) {
|
|
clearInterval(qrAnimationRef.current.timer);
|
|
}
|
|
} catch {
|
|
}
|
|
qrAnimationRef.current = { timer: null, chunks, idx: 0, active: true };
|
|
setQrFramesTotal(chunks.length);
|
|
setQrFrameIndex(1);
|
|
setQrManualMode(false);
|
|
const intervalMs = 3e3;
|
|
qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
|
|
try {
|
|
setShowQRCode(true);
|
|
} catch {
|
|
}
|
|
} else {
|
|
await generateQRCode(answer);
|
|
try {
|
|
setShowQRCode(true);
|
|
} catch {
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.warn("Answer QR generation failed:", e);
|
|
}
|
|
if (typeof markAnswerCreated === "function") {
|
|
markAnswerCreated();
|
|
}
|
|
const existingResponseMessages = messages.filter(
|
|
(m) => m.type === "system" && (m.message.includes("Secure response created") || m.message.includes("Send the response"))
|
|
);
|
|
if (existingResponseMessages.length === 0) {
|
|
setMessages((prev) => [...prev, {
|
|
message: "Secure response created!",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
setMessages((prev) => [...prev, {
|
|
message: "Send the response code to the initiator via a secure channel or let them scan the QR code below.",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
}
|
|
if (!window.isUpdatingSecurity) {
|
|
updateSecurityLevel().catch(console.error);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error in handleCreateAnswer:", error);
|
|
setMessages((prev) => [...prev, {
|
|
message: `Error processing the invitation: ${error.message}`,
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error in handleCreateAnswer:", error);
|
|
setMessages((prev) => [...prev, {
|
|
message: `Invitation processing error: ${error.message}`,
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
}
|
|
};
|
|
const handleConnect = async () => {
|
|
try {
|
|
if (!answerInput.trim()) {
|
|
setMessages((prev) => [...prev, {
|
|
message: "You need to insert the response code from your interlocutor.",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
return;
|
|
}
|
|
try {
|
|
setMessages((prev) => [...prev, {
|
|
message: "Processing the secure response...",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
let answer;
|
|
try {
|
|
if (typeof window.decodeAnyPayload === "function") {
|
|
const anyAnswer = window.decodeAnyPayload(answerInput.trim());
|
|
answer = typeof anyAnswer === "string" ? JSON.parse(anyAnswer) : anyAnswer;
|
|
} else {
|
|
const rawText = typeof window.decompressIfNeeded === "function" ? window.decompressIfNeeded(answerInput.trim()) : answerInput.trim();
|
|
answer = JSON.parse(rawText);
|
|
}
|
|
} catch (parseError) {
|
|
throw new Error(`Invalid response format: ${parseError.message}`);
|
|
}
|
|
if (!answer || typeof answer !== "object") {
|
|
throw new Error("The response must be an object");
|
|
}
|
|
const answerType = answer.t || answer.type;
|
|
if (!answerType || answerType !== "answer" && answerType !== "enhanced_secure_answer") {
|
|
throw new Error("Invalid response type. Expected answer or enhanced_secure_answer");
|
|
}
|
|
await webrtcManagerRef.current.handleSecureAnswer(answer);
|
|
if (pendingSession) {
|
|
setPendingSession(null);
|
|
setMessages((prev) => [...prev, {
|
|
message: `All security features enabled by default`,
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
}
|
|
setMessages((prev) => [...prev, {
|
|
message: "Finalizing the secure connection...",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
if (!window.isUpdatingSecurity) {
|
|
updateSecurityLevel().catch(console.error);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error in handleConnect inner try:", error);
|
|
let errorMessage = "Connection setup error";
|
|
if (error.message.includes("CRITICAL SECURITY FAILURE")) {
|
|
if (error.message.includes("ECDH public key structure")) {
|
|
errorMessage = "Invalid response code - missing or corrupted cryptographic key. Please check the code and try again.";
|
|
} else if (error.message.includes("ECDSA public key structure")) {
|
|
errorMessage = "Invalid response code - missing signature verification key. Please check the code and try again.";
|
|
} else {
|
|
errorMessage = "Security validation failed - possible attack detected";
|
|
}
|
|
} else if (error.message.includes("too old") || error.message.includes("replay")) {
|
|
errorMessage = "Response data is outdated - please use a fresh invitation";
|
|
} else if (error.message.includes("MITM") || error.message.includes("signature")) {
|
|
errorMessage = "Security breach detected - connection rejected";
|
|
} else if (error.message.includes("Invalid") || error.message.includes("format")) {
|
|
errorMessage = "Invalid response format - please check the code";
|
|
} else {
|
|
errorMessage = ` ${error.message}`;
|
|
}
|
|
setMessages((prev) => [...prev, {
|
|
message: errorMessage,
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now(),
|
|
showRetryButton: true
|
|
}]);
|
|
if (!error.message.includes("too old") && !error.message.includes("replay")) {
|
|
setPendingSession(null);
|
|
setSessionTimeLeft(0);
|
|
}
|
|
setConnectionStatus("failed");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error in handleConnect outer try:", error);
|
|
let errorMessage = "Connection setup error";
|
|
if (error.message.includes("CRITICAL SECURITY FAILURE")) {
|
|
if (error.message.includes("ECDH public key structure")) {
|
|
errorMessage = "Invalid response code - missing or corrupted cryptographic key. Please check the code and try again.";
|
|
} else if (error.message.includes("ECDSA public key structure")) {
|
|
errorMessage = "Invalid response code - missing signature verification key. Please check the code and try again.";
|
|
} else {
|
|
errorMessage = "Security validation failed - possible attack detected";
|
|
}
|
|
} else if (error.message.includes("too old") || error.message.includes("replay")) {
|
|
errorMessage = "Response data is outdated - please use a fresh invitation";
|
|
} else if (error.message.includes("MITM") || error.message.includes("signature")) {
|
|
errorMessage = "Security breach detected - connection rejected";
|
|
} else if (error.message.includes("Invalid") || error.message.includes("format")) {
|
|
errorMessage = "Invalid response format - please check the code";
|
|
} else {
|
|
errorMessage = `${error.message}`;
|
|
}
|
|
setMessages((prev) => [...prev, {
|
|
message: errorMessage,
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now(),
|
|
showRetryButton: true
|
|
}]);
|
|
if (!error.message.includes("too old") && !error.message.includes("replay")) {
|
|
setPendingSession(null);
|
|
setSessionTimeLeft(0);
|
|
}
|
|
setConnectionStatus("failed");
|
|
}
|
|
};
|
|
const handleVerifyConnection = async (userCode, isValid = true) => {
|
|
if (isValid) {
|
|
webrtcManagerRef.current.confirmVerification(userCode);
|
|
setLocalVerificationConfirmed(true);
|
|
try {
|
|
if (window.NotificationIntegration && webrtcManagerRef.current && !notificationIntegrationRef.current) {
|
|
const integration = new window.NotificationIntegration(webrtcManagerRef.current);
|
|
await integration.init();
|
|
notificationIntegrationRef.current = integration;
|
|
const status = integration.getStatus();
|
|
if (status.permission === "granted") {
|
|
setMessages((prev) => [...prev, {
|
|
message: "\u2713 Notifications enabled - you will receive alerts when the tab is inactive",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
} else {
|
|
setMessages((prev) => [...prev, {
|
|
message: "\u2139 Notifications disabled - you can enable them using the button on the main page",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
}
|
|
} else if (notificationIntegrationRef.current) {
|
|
} else {
|
|
}
|
|
} catch (error) {
|
|
console.warn("Failed to initialize notifications:", error);
|
|
}
|
|
} else {
|
|
setMessages((prev) => [...prev, {
|
|
message: " Verification rejected. The connection is unsafe! Session reset..",
|
|
type: "system",
|
|
id: Date.now(),
|
|
timestamp: Date.now()
|
|
}]);
|
|
setLocalVerificationConfirmed(false);
|
|
setRemoteVerificationConfirmed(false);
|
|
setBothVerificationsConfirmed(false);
|
|
setShowVerification(false);
|
|
setVerificationCode("");
|
|
setConnectionStatus("disconnected");
|
|
setOfferData("");
|
|
setAnswerData("");
|
|
setOfferInput("");
|
|
setAnswerInput("");
|
|
setShowOfferStep(false);
|
|
setShowAnswerStep(false);
|
|
setKeyFingerprint("");
|
|
setSecurityLevel(null);
|
|
setIsVerified(false);
|
|
setMessages([]);
|
|
setSessionTimeLeft(0);
|
|
setPendingSession(null);
|
|
document.dispatchEvent(new CustomEvent("disconnected"));
|
|
handleDisconnect();
|
|
}
|
|
};
|
|
const handleSendMessage = async () => {
|
|
if (!messageInput.trim()) {
|
|
return;
|
|
}
|
|
if (!webrtcManagerRef.current) {
|
|
return;
|
|
}
|
|
const baseTextEarly = messageInput.trim();
|
|
const midEarly = `m_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
|
|
const offlineNow = isOffline || typeof navigator !== "undefined" && navigator.onLine === false || window.pwaOfflineManager && window.pwaOfflineManager.isOnline === false;
|
|
if (offlineNow) {
|
|
const outTextOff = codeMode ? "```\n" + baseTextEarly + "\n```" : baseTextEarly;
|
|
const tsOff = Date.now();
|
|
const metaOff = { mid: midEarly, ts: tsOff };
|
|
if (viewOnceMode) {
|
|
metaOff.once = true;
|
|
metaOff.onceTtl = viewOnceTtl;
|
|
}
|
|
if (disappearTtl > 0) metaOff.ttl = disappearTtl;
|
|
const echoOpts = { mid: midEarly, status: "sent", timestamp: tsOff };
|
|
if (disappearTtl > 0) echoOpts.expiresAt = tsOff + disappearTtl * 1e3;
|
|
addMessageWithAutoScroll(outTextOff, "sent", echoOpts);
|
|
const q = queuesRef.current.get(activeIdRef.current);
|
|
if (q) q.outgoing.push({ outText: outTextOff, meta: metaOff, mid: midEarly });
|
|
setMessageInput("");
|
|
if (codeMode) setCodeMode(false);
|
|
if (viewOnceMode) setViewOnceMode(false);
|
|
return;
|
|
}
|
|
if (!webrtcManagerRef.current.isConnected()) {
|
|
return;
|
|
}
|
|
try {
|
|
const baseText = baseTextEarly;
|
|
const outText = codeMode ? "```\n" + baseText + "\n```" : baseText;
|
|
const mid = midEarly;
|
|
const meta = { mid, ts: Date.now() };
|
|
if (viewOnceMode) {
|
|
meta.once = true;
|
|
meta.onceTtl = viewOnceTtl;
|
|
}
|
|
if (disappearTtl > 0) meta.ttl = disappearTtl;
|
|
const localOpts = { mid, status: "sending" };
|
|
if (disappearTtl > 0) localOpts.expiresAt = Date.now() + disappearTtl * 1e3;
|
|
addMessageWithAutoScroll(outText, "sent", localOpts);
|
|
try {
|
|
await webrtcManagerRef.current.sendMessage(outText, meta);
|
|
updateMessageStatus(mid, "delivered");
|
|
} catch (sendErr) {
|
|
updateMessageStatus(mid, "failed");
|
|
throw sendErr;
|
|
}
|
|
setMessageInput("");
|
|
if (codeMode) setCodeMode(false);
|
|
if (viewOnceMode) setViewOnceMode(false);
|
|
} catch (error) {
|
|
const msg = String(error?.message || error);
|
|
if (!/queued for sending|Data channel not ready/i.test(msg)) {
|
|
addMessageWithAutoScroll(`Sending error: ${msg}`, "system");
|
|
}
|
|
}
|
|
};
|
|
const handleUnsendMessage = React.useCallback((mid) => {
|
|
if (!mid) return;
|
|
setMessages((prev) => prev.filter((m) => String(m.mid) !== String(mid)));
|
|
try {
|
|
webrtcManagerRef.current?.sendMessageDelete?.(String(mid));
|
|
} catch (_) {
|
|
}
|
|
}, []);
|
|
const handleMessageExpire = React.useCallback((id) => {
|
|
setMessages((prev) => prev.map((m) => m.id === id ? { ...m, expired: true, message: "", expiresAt: void 0 } : m));
|
|
}, []);
|
|
const handleClearData = () => {
|
|
setOfferData("");
|
|
setAnswerData("");
|
|
setOfferInput("");
|
|
setAnswerInput("");
|
|
setShowOfferStep(false);
|
|
setIsGeneratingKeys(false);
|
|
if (!shouldPreserveAnswerData()) {
|
|
setShowAnswerStep(false);
|
|
}
|
|
setShowVerification(false);
|
|
setShowQRCode(false);
|
|
setShowQRScanner(false);
|
|
setShowQRScannerModal(false);
|
|
qrChunksBufferRef.current = { id: null, total: 0, seen: /* @__PURE__ */ new Set(), items: [] };
|
|
if (!shouldPreserveAnswerData()) {
|
|
setQrCodeUrl("");
|
|
}
|
|
setVerificationCode("");
|
|
setIsVerified(false);
|
|
setKeyFingerprint("");
|
|
setSecurityLevel(null);
|
|
setConnectionStatus("disconnected");
|
|
setMessages([]);
|
|
setMessageInput("");
|
|
setLocalVerificationConfirmed(false);
|
|
setRemoteVerificationConfirmed(false);
|
|
setBothVerificationsConfirmed(false);
|
|
if (typeof console.clear === "function") {
|
|
console.clear();
|
|
}
|
|
setSessionTimeLeft(0);
|
|
setPendingSession(null);
|
|
document.dispatchEvent(new CustomEvent("peer-disconnect"));
|
|
};
|
|
const handleIncomingDecision = React.useCallback(async (fileId, accepted) => {
|
|
try {
|
|
if (accepted) {
|
|
await webrtcManagerRef.current?.acceptIncomingFile(fileId);
|
|
} else {
|
|
await webrtcManagerRef.current?.rejectIncomingFile(fileId);
|
|
}
|
|
} finally {
|
|
setPendingIncomingFiles((prev) => prev.filter((f) => f.fileId !== fileId));
|
|
}
|
|
}, []);
|
|
const handleDisconnect = () => {
|
|
try {
|
|
const id = activeIdRef.current;
|
|
setSessionTimeLeft(0);
|
|
document.dispatchEvent(new CustomEvent("peer-disconnect"));
|
|
document.dispatchEvent(new CustomEvent("disconnected"));
|
|
document.dispatchEvent(new CustomEvent("session-cleanup", {
|
|
detail: { timestamp: Date.now(), reason: "manual_disconnect" }
|
|
}));
|
|
destroySession(id);
|
|
if (typeof console.clear === "function") console.clear();
|
|
} catch (error) {
|
|
console.error("Error during disconnect:", error);
|
|
}
|
|
};
|
|
const handleSessionActivated = (session) => {
|
|
let message;
|
|
if (session.type === "demo") {
|
|
message = ` Demo session activated for 6 minutes. You can create invitations!`;
|
|
} else {
|
|
message = ` All security features enabled by default. You can create invitations!`;
|
|
}
|
|
addMessageWithAutoScroll(message, "system");
|
|
};
|
|
React.useEffect(() => {
|
|
if (connectionStatus === "connected" && isVerified) {
|
|
addMessageWithAutoScroll(" Secure connection successfully established and verified! You can now communicate safely with full protection against MITM attacks and Perfect Forward Secrecy..", "system");
|
|
}
|
|
}, [connectionStatus, isVerified]);
|
|
const isConnectedAndVerified = (connectionStatus === "connected" || connectionStatus === "verified") && isVerified;
|
|
React.useEffect(() => {
|
|
document.body.classList.toggle("sb-in-chat", isConnectedAndVerified);
|
|
return () => document.body.classList.remove("sb-in-chat");
|
|
}, [isConnectedAndVerified]);
|
|
React.useEffect(() => {
|
|
if (isConnectedAndVerified && pendingSession && connectionStatus !== "failed") {
|
|
setPendingSession(null);
|
|
setSessionTimeLeft(0);
|
|
addMessageWithAutoScroll(" All security features enabled by default", "system");
|
|
}
|
|
}, [isConnectedAndVerified, pendingSession, connectionStatus]);
|
|
React.useEffect(() => {
|
|
if (showQRScannerModal && window.Html5Qrcode) {
|
|
const html5Qrcode = new window.Html5Qrcode("qr-reader");
|
|
const config = {
|
|
fps: 10
|
|
// Убираем qrbox чтобы использовать всю область
|
|
};
|
|
let isScanning = true;
|
|
html5Qrcode.start(
|
|
{ facingMode: "environment" },
|
|
// Use back camera
|
|
config,
|
|
(decodedText, decodedResult) => {
|
|
if (!isScanning) {
|
|
console.log("Scanner stopped, ignoring scan");
|
|
return;
|
|
}
|
|
console.log("QR Code scanned:", decodedText);
|
|
console.log("Current buffer state:", qrChunksBufferRef.current);
|
|
handleQRScan(decodedText).then((success) => {
|
|
console.log("QR scan result:", success);
|
|
if (success) {
|
|
console.log("Closing scanner and modal");
|
|
isScanning = false;
|
|
try {
|
|
console.log("Stopping scanner...");
|
|
html5Qrcode.stop().then(() => {
|
|
console.log("Scanner stopped, clearing...");
|
|
html5Qrcode.clear();
|
|
setShowQRScannerModal(false);
|
|
}).catch((err) => {
|
|
console.log("Error stopping scanner:", err);
|
|
try {
|
|
html5Qrcode.clear();
|
|
} catch (clearErr) {
|
|
console.log("Error clearing scanner:", clearErr);
|
|
}
|
|
setShowQRScannerModal(false);
|
|
});
|
|
} catch (err) {
|
|
console.log("Error in scanner cleanup:", err);
|
|
setShowQRScannerModal(false);
|
|
}
|
|
} else {
|
|
console.log("Continuing to scan for more chunks...");
|
|
}
|
|
}).catch((error) => {
|
|
console.error("QR scan processing error:", error);
|
|
});
|
|
},
|
|
(error) => {
|
|
if (isScanning) {
|
|
console.log("QR scan error (ignored):", error);
|
|
}
|
|
}
|
|
).catch((err) => {
|
|
console.error("QR Scanner start error:", err);
|
|
setShowQRScannerModal(false);
|
|
});
|
|
return () => {
|
|
isScanning = false;
|
|
try {
|
|
html5Qrcode.stop().then(() => {
|
|
html5Qrcode.clear();
|
|
}).catch((err) => {
|
|
console.log("Scanner already stopped or error stopping:", err);
|
|
try {
|
|
html5Qrcode.clear();
|
|
} catch (clearErr) {
|
|
console.log("Error clearing scanner in cleanup:", clearErr);
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.log("Error in cleanup:", err);
|
|
try {
|
|
html5Qrcode.clear();
|
|
} catch (clearErr) {
|
|
console.log("Error clearing scanner in cleanup:", clearErr);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
}, [showQRScannerModal]);
|
|
const sessionChats = decorateSessions(sessionsState);
|
|
const showSidebar = sessionsState.order.length > 1 || sessionsState.order.some((id) => {
|
|
const s = sessionsState.sessions[id];
|
|
return s && s.sas && s.sas.isVerified;
|
|
});
|
|
return React.createElement("div", {
|
|
className: "minimal-bg",
|
|
// With the rail visible the app is a fixed-height shell (rail + column
|
|
// fill the viewport, design-style). Otherwise it's the scrollable landing.
|
|
// flexDirection:'row' is explicit — the .minimal-bg class forces
|
|
// flex-direction:column, which would otherwise stack the rail ABOVE the chat.
|
|
style: showSidebar ? { display: "flex", flexDirection: "row", height: "100vh", width: "100%", overflow: "hidden" } : { minHeight: "100vh" }
|
|
}, [
|
|
showSidebar && React.createElement(SessionsSidebar, {
|
|
key: "sessions-sidebar",
|
|
chats: sessionChats,
|
|
collapsed: sidebarCollapsed,
|
|
drawerOpen: sidebarDrawerOpen,
|
|
onToggleCollapse: () => setSidebarCollapsed((v) => !v),
|
|
onSelect: handleSelectSession,
|
|
onNewChat: handleNewChat,
|
|
onRename: handleRenameSession,
|
|
onCloseDrawer: () => setSidebarDrawerOpen(false),
|
|
myStatus,
|
|
onSetStatus: setMyStatus
|
|
}),
|
|
// Mobile-only hamburger that opens the drawer (hidden on desktop via CSS).
|
|
showSidebar && React.createElement("button", {
|
|
key: "sb-burger",
|
|
className: "sb-burger",
|
|
onClick: () => setSidebarDrawerOpen(true),
|
|
style: { display: "none", position: "fixed", top: "13px", left: "13px", zIndex: 55, width: "38px", height: "38px", borderRadius: "10px", placeItems: "center", border: "1px solid rgba(255,255,255,0.1)", background: "rgba(18,18,20,0.9)", color: "#cfcfd4", cursor: "pointer" },
|
|
dangerouslySetInnerHTML: { __html: SB_SVG.burger }
|
|
}),
|
|
React.createElement("div", {
|
|
key: "app-column",
|
|
className: showSidebar ? "minimal-bg" : "minimal-bg min-h-screen",
|
|
style: showSidebar ? { flex: 1, minWidth: 0, height: "100vh", overflow: "hidden", display: "flex", flexDirection: "column" } : {}
|
|
}, [
|
|
// Advanced network settings now render inside the connection
|
|
// screen's right panel (see EnhancedConnectionSetup), matching
|
|
// the design's slide-up-within-the-right-column behavior.
|
|
// The verified chat renders its own in-chat header (SecureBit Chat
|
|
// design); the shared header is shown only on the landing/setup view.
|
|
!isConnectedAndVerified && !showSidebar && window.EnhancedMinimalHeader && React.createElement(window.EnhancedMinimalHeader, {
|
|
key: "header",
|
|
status: connectionStatus,
|
|
fingerprint: keyFingerprint,
|
|
verificationCode,
|
|
onDisconnect: handleDisconnect,
|
|
isConnected: isConnectedAndVerified,
|
|
securityLevel,
|
|
// sessionManager removed - all features enabled by default
|
|
webrtcManager: webrtcManagerRef.current
|
|
}),
|
|
React.createElement(
|
|
"main",
|
|
{
|
|
key: "main"
|
|
},
|
|
/* @__PURE__ */ (() => {
|
|
return isConnectedAndVerified;
|
|
})() ? (() => {
|
|
return React.createElement(EnhancedChatInterface, {
|
|
title: active ? active.peerLabel : "",
|
|
isOffline,
|
|
peerPresence: active ? active.peerPresence : null,
|
|
onRenameTitle: (label) => {
|
|
if (activeSessionId) dispatch({ type: SESSION_ACTIONS.RENAME, id: activeSessionId, label });
|
|
},
|
|
messages,
|
|
messageInput,
|
|
setMessageInput,
|
|
onSendMessage: handleSendMessage,
|
|
onDisconnect: handleDisconnect,
|
|
keyFingerprint,
|
|
isVerified,
|
|
chatMessagesRef,
|
|
scrollToBottom,
|
|
webrtcManager: webrtcManagerRef.current,
|
|
status: connectionStatus,
|
|
pendingIncomingFiles,
|
|
onIncomingDecision: handleIncomingDecision,
|
|
// Secure chat extras
|
|
codeMode,
|
|
setCodeMode,
|
|
viewOnceMode,
|
|
setViewOnceMode,
|
|
viewOnceTtl,
|
|
setViewOnceTtl,
|
|
disappearTtl,
|
|
setDisappearTtl,
|
|
nowTick,
|
|
onUnsendMessage: handleUnsendMessage,
|
|
onMessageExpire: handleMessageExpire
|
|
});
|
|
})() : React.createElement(EnhancedConnectionSetup, {
|
|
onCreateOffer: handleCreateOffer,
|
|
onCreateAnswer: handleCreateAnswer,
|
|
onConnect: handleConnect,
|
|
onClearData: handleClearData,
|
|
onVerifyConnection: handleVerifyConnection,
|
|
connectionStatus,
|
|
offerData,
|
|
answerData,
|
|
offerInput,
|
|
setOfferInput,
|
|
answerInput,
|
|
setAnswerInput,
|
|
showOfferStep,
|
|
showAnswerStep,
|
|
verificationCode,
|
|
showVerification,
|
|
showQRCode,
|
|
qrCodeUrl,
|
|
showQRScanner,
|
|
setShowQRCode,
|
|
setShowQRScanner,
|
|
setShowQRScannerModal,
|
|
messages,
|
|
localVerificationConfirmed,
|
|
remoteVerificationConfirmed,
|
|
bothVerificationsConfirmed,
|
|
// QR control props
|
|
qrFramesTotal,
|
|
qrFrameIndex,
|
|
qrManualMode,
|
|
toggleQrManualMode,
|
|
nextQrFrame,
|
|
prevQrFrame,
|
|
// PAKE passwords removed - using SAS verification instead
|
|
markAnswerCreated,
|
|
notificationIntegrationRef,
|
|
isGeneratingKeys,
|
|
setIsGeneratingKeys,
|
|
handleCreateOffer,
|
|
relayOnlyMode,
|
|
setRelayOnlyMode,
|
|
webrtcManagerRef,
|
|
showIceSettings,
|
|
setShowIceSettings,
|
|
iceServersText,
|
|
iceSettingsPersisted,
|
|
customIceServers,
|
|
handleApplyIceSettings,
|
|
handleForgetIceSettings,
|
|
// Render only the create/connect card inside the chat column
|
|
// (an additional session), instead of the full landing.
|
|
compact: showSidebar
|
|
})
|
|
),
|
|
// QR Scanner Modal — camera scan (design import: "Start Secure" / Camera scan modal)
|
|
showQRScannerModal && (() => {
|
|
const closeScanner = () => {
|
|
setShowQRScannerModal(false);
|
|
qrChunksBufferRef.current = { id: null, total: 0, seen: /* @__PURE__ */ new Set(), items: [] };
|
|
};
|
|
const buf = qrChunksBufferRef.current;
|
|
const hasParts = !!(buf && buf.id && buf.total > 1);
|
|
const framesText = hasParts ? `Scanning frames\u2026 ${buf.seen.size} / ${buf.total}` : "Scanning\u2026";
|
|
const corner = (k, st) => React.createElement("span", {
|
|
key: k,
|
|
style: Object.assign({ position: "absolute", width: "34px", height: "34px", zIndex: 3 }, st)
|
|
});
|
|
return React.createElement("div", {
|
|
key: "qr-scanner-modal",
|
|
onClick: closeScanner,
|
|
style: { position: "fixed", inset: 0, zIndex: 50, display: "flex", alignItems: "center", justifyContent: "center", padding: "32px", background: "rgba(6,6,8,0.82)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", animation: "sbUp .2s ease" }
|
|
}, [
|
|
React.createElement("div", {
|
|
key: "scanner-container",
|
|
onClick: (e) => e.stopPropagation(),
|
|
style: { width: "100%", maxWidth: "420px", borderRadius: "22px", border: "1px solid rgba(255,255,255,0.1)", background: "#111113", boxShadow: "0 30px 90px rgba(0,0,0,0.6)", overflow: "hidden" }
|
|
}, [
|
|
// Header
|
|
React.createElement("div", {
|
|
key: "scanner-header",
|
|
style: { display: "flex", alignItems: "center", gap: "11px", padding: "18px 20px", borderBottom: "1px solid rgba(255,255,255,0.06)" }
|
|
}, [
|
|
React.createElement("span", {
|
|
key: "scanner-icon",
|
|
style: { display: "flex" },
|
|
dangerouslySetInnerHTML: { __html: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#3ecf8e" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M2 8.5V6.5A2.5 2.5 0 0 1 4.5 4h2M17.5 4h2A2.5 2.5 0 0 1 22 6.5v2M22 15.5v2a2.5 2.5 0 0 1-2.5 2.5h-2M6.5 20h-2A2.5 2.5 0 0 1 2 17.5v-2"/><circle cx="12" cy="12" r="3.2"/></svg>' }
|
|
}),
|
|
React.createElement("div", {
|
|
key: "scanner-titles",
|
|
style: { flex: 1, lineHeight: 1.2 }
|
|
}, [
|
|
React.createElement("div", {
|
|
key: "scanner-title",
|
|
style: { fontSize: "15.5px", fontWeight: 800, color: "#f4f4f6" }
|
|
}, "Scan QR code"),
|
|
React.createElement("div", {
|
|
key: "scanner-hint",
|
|
style: { fontSize: "12px", color: "#7b7b83" }
|
|
}, "Point your camera at their QR")
|
|
]),
|
|
React.createElement("button", {
|
|
key: "close-btn",
|
|
onClick: closeScanner,
|
|
style: { width: "32px", height: "32px", display: "grid", placeItems: "center", borderRadius: "9px", border: "none", background: "rgba(255,255,255,0.05)", color: "#9a9aa2", cursor: "pointer" }
|
|
}, React.createElement("i", { className: "fas fa-times" }))
|
|
]),
|
|
// Body
|
|
React.createElement("div", {
|
|
key: "scanner-body",
|
|
style: { padding: "22px 24px 24px" }
|
|
}, [
|
|
React.createElement("div", {
|
|
key: "viewfinder",
|
|
style: { position: "relative", aspectRatio: "1", borderRadius: "18px", overflow: "hidden", background: "#000", border: "1px solid rgba(255,255,255,0.1)" }
|
|
}, [
|
|
React.createElement("div", {
|
|
key: "vf-bg",
|
|
style: { position: "absolute", inset: 0, background: "radial-gradient(circle at 50% 45%, #1a1a1f, #000)" }
|
|
}),
|
|
// Camera video is injected here by Html5Qrcode
|
|
React.createElement("div", {
|
|
key: "qr-reader",
|
|
id: "qr-reader",
|
|
style: { position: "absolute", inset: 0, zIndex: 1 }
|
|
}),
|
|
corner("c-tl", { top: "18px", left: "18px", borderTop: "2.5px solid #3ecf8e", borderLeft: "2.5px solid #3ecf8e", borderRadius: "8px 0 0 0" }),
|
|
corner("c-tr", { top: "18px", right: "18px", borderTop: "2.5px solid #3ecf8e", borderRight: "2.5px solid #3ecf8e", borderRadius: "0 8px 0 0" }),
|
|
corner("c-bl", { bottom: "18px", left: "18px", borderBottom: "2.5px solid #3ecf8e", borderLeft: "2.5px solid #3ecf8e", borderRadius: "0 0 0 8px" }),
|
|
corner("c-br", { bottom: "18px", right: "18px", borderBottom: "2.5px solid #3ecf8e", borderRight: "2.5px solid #3ecf8e", borderRadius: "0 0 8px 0" }),
|
|
React.createElement("span", {
|
|
key: "scan-line",
|
|
style: { position: "absolute", left: "18px", right: "18px", height: "2.5px", zIndex: 2, background: "linear-gradient(90deg, transparent, #3ecf8e, transparent)", boxShadow: "0 0 16px #3ecf8e", animation: "sbScan 1.5s ease-in-out infinite alternate" }
|
|
}),
|
|
React.createElement("div", {
|
|
key: "scan-status",
|
|
style: { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", padding: "14px", background: "linear-gradient(transparent, rgba(0,0,0,0.6))" }
|
|
}, [
|
|
React.createElement("span", {
|
|
key: "spinner",
|
|
style: { display: "flex", animation: "sbSpin 1.4s linear infinite" },
|
|
dangerouslySetInnerHTML: { __html: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#3ecf8e" stroke-width="2" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-6.2-8.6"/></svg>' }
|
|
}),
|
|
React.createElement("span", {
|
|
key: "scan-frames",
|
|
style: { fontSize: "12.5px", fontWeight: 600, color: "#cfcfd4" }
|
|
}, framesText)
|
|
])
|
|
]),
|
|
React.createElement("p", {
|
|
key: "scanner-note",
|
|
style: { margin: "16px 0 0", textAlign: "center", fontSize: "12px", lineHeight: 1.5, color: "#6b6b73" }
|
|
}, "Hold steady until all parts are captured. Camera access is local \u2014 nothing is uploaded.")
|
|
])
|
|
])
|
|
]);
|
|
})()
|
|
])
|
|
// end app-column
|
|
]);
|
|
};
|
|
var UpdateCheckerWrapper = ({ children }) => {
|
|
if (typeof window !== "undefined" && window.UpdateChecker) {
|
|
return React.createElement(window.UpdateChecker, {
|
|
debug: false
|
|
}, children);
|
|
}
|
|
return children;
|
|
};
|
|
function initializeApp() {
|
|
if (window.EnhancedSecureCryptoUtils && window.EnhancedSecureWebRTCManager) {
|
|
const AppWithUpdateChecker = React.createElement(
|
|
UpdateCheckerWrapper,
|
|
null,
|
|
React.createElement(EnhancedSecureP2PChat)
|
|
);
|
|
ReactDOM.render(AppWithUpdateChecker, document.getElementById("root"));
|
|
} else {
|
|
console.error("\u041C\u043E\u0434\u0443\u043B\u0438 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u044B:", {
|
|
hasCrypto: !!window.EnhancedSecureCryptoUtils,
|
|
hasWebRTC: !!window.EnhancedSecureWebRTCManager
|
|
});
|
|
}
|
|
}
|
|
if (typeof window !== "undefined") {
|
|
window.addEventListener("unhandledrejection", (event) => {
|
|
console.error("Unhandled promise rejection:", event.reason);
|
|
event.preventDefault();
|
|
});
|
|
window.addEventListener("error", (event) => {
|
|
console.error("Global error:", event.error);
|
|
event.preventDefault();
|
|
});
|
|
if (!window.initializeApp) {
|
|
window.initializeApp = initializeApp;
|
|
}
|
|
}
|
|
if (window.EnhancedSecureCryptoUtils && window.EnhancedSecureWebRTCManager) {
|
|
const UpdateCheckerWrapper2 = ({ children }) => {
|
|
if (typeof window !== "undefined" && window.UpdateChecker) {
|
|
return React.createElement(window.UpdateChecker, {
|
|
debug: false
|
|
}, children);
|
|
}
|
|
return children;
|
|
};
|
|
const AppWithUpdateChecker = React.createElement(
|
|
UpdateCheckerWrapper2,
|
|
null,
|
|
React.createElement(EnhancedSecureP2PChat)
|
|
);
|
|
ReactDOM.render(AppWithUpdateChecker, document.getElementById("root"));
|
|
} else {
|
|
ReactDOM.render(React.createElement(EnhancedSecureP2PChat), document.getElementById("root"));
|
|
}
|
|
//# sourceMappingURL=app.js.map
|