598 lines
25 KiB
TypeScript
598 lines
25 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { deleteMessage, forwardMessageBulk, listMessageReactions, pinMessage, toggleMessageReaction } from "../api/chats";
|
|
import type { Message, MessageReaction } from "../chat/types";
|
|
import { useAuthStore } from "../store/authStore";
|
|
import { useChatStore } from "../store/chatStore";
|
|
import { formatTime } from "../utils/format";
|
|
import { formatMessageHtml } from "../utils/formatMessage";
|
|
|
|
type ContextMenuState = {
|
|
x: number;
|
|
y: number;
|
|
messageId: number;
|
|
} | null;
|
|
|
|
type PendingDeleteState = {
|
|
chatId: number;
|
|
messages: Message[];
|
|
expiresAt: number;
|
|
timerId: number;
|
|
} | null;
|
|
|
|
export function MessageList() {
|
|
const me = useAuthStore((s) => s.me);
|
|
const activeChatId = useChatStore((s) => s.activeChatId);
|
|
const messagesByChat = useChatStore((s) => s.messagesByChat);
|
|
const typingByChat = useChatStore((s) => s.typingByChat);
|
|
const hasMoreByChat = useChatStore((s) => s.hasMoreByChat);
|
|
const loadingMoreByChat = useChatStore((s) => s.loadingMoreByChat);
|
|
const loadMoreMessages = useChatStore((s) => s.loadMoreMessages);
|
|
const unreadBoundaryByChat = useChatStore((s) => s.unreadBoundaryByChat);
|
|
const focusedMessageIdByChat = useChatStore((s) => s.focusedMessageIdByChat);
|
|
const setFocusedMessage = useChatStore((s) => s.setFocusedMessage);
|
|
const chats = useChatStore((s) => s.chats);
|
|
const setReplyToMessage = useChatStore((s) => s.setReplyToMessage);
|
|
const updateChatPinnedMessage = useChatStore((s) => s.updateChatPinnedMessage);
|
|
const removeMessage = useChatStore((s) => s.removeMessage);
|
|
const restoreMessages = useChatStore((s) => s.restoreMessages);
|
|
const [ctx, setCtx] = useState<ContextMenuState>(null);
|
|
const [forwardMessageId, setForwardMessageId] = useState<number | null>(null);
|
|
const [forwardQuery, setForwardQuery] = useState("");
|
|
const [forwardError, setForwardError] = useState<string | null>(null);
|
|
const [isForwarding, setIsForwarding] = useState(false);
|
|
const [forwardSelectedChatIds, setForwardSelectedChatIds] = useState<Set<number>>(new Set());
|
|
const [deleteMessageId, setDeleteMessageId] = useState<number | null>(null);
|
|
const [deleteError, setDeleteError] = useState<string | null>(null);
|
|
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
|
|
const [pendingDelete, setPendingDelete] = useState<PendingDeleteState>(null);
|
|
const [undoTick, setUndoTick] = useState(0);
|
|
const [reactionsByMessage, setReactionsByMessage] = useState<Record<number, MessageReaction[]>>({});
|
|
|
|
const messages = useMemo(() => {
|
|
if (!activeChatId) {
|
|
return [];
|
|
}
|
|
return messagesByChat[activeChatId] ?? [];
|
|
}, [activeChatId, messagesByChat]);
|
|
|
|
const messagesMap = useMemo(() => new Map(messages.map((m) => [m.id, m])), [messages]);
|
|
const activeChat = chats.find((chat) => chat.id === activeChatId);
|
|
const forwardTargets = useMemo(() => {
|
|
const q = forwardQuery.trim().toLowerCase();
|
|
if (!q) return chats;
|
|
return chats.filter((chat) => {
|
|
const label = chatLabel(chat).toLowerCase();
|
|
const handle = (chat.handle || "").toLowerCase();
|
|
return label.includes(q) || handle.includes(q);
|
|
});
|
|
}, [chats, forwardQuery]);
|
|
const unreadBoundaryCount = activeChatId ? (unreadBoundaryByChat[activeChatId] ?? 0) : 0;
|
|
const unreadBoundaryIndex = unreadBoundaryCount > 0 ? Math.max(0, messages.length - unreadBoundaryCount) : -1;
|
|
const focusedMessageId = activeChatId ? (focusedMessageIdByChat[activeChatId] ?? null) : null;
|
|
const hasMore = Boolean(activeChatId && hasMoreByChat[activeChatId]);
|
|
const isLoadingMore = Boolean(activeChatId && loadingMoreByChat[activeChatId]);
|
|
const selectedMessages = useMemo(
|
|
() => messages.filter((m) => selectedIds.has(m.id)),
|
|
[messages, selectedIds]
|
|
);
|
|
const canDeleteAllForSelection = useMemo(
|
|
() => selectedMessages.length > 0 && selectedMessages.every((m) => canDeleteForEveryone(m, activeChat, me?.id)),
|
|
[selectedMessages, activeChat, me?.id]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const onKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key !== "Escape") {
|
|
return;
|
|
}
|
|
setCtx(null);
|
|
setForwardMessageId(null);
|
|
setForwardSelectedChatIds(new Set());
|
|
setDeleteMessageId(null);
|
|
setSelectedIds(new Set());
|
|
};
|
|
window.addEventListener("keydown", onKeyDown);
|
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setSelectedIds(new Set());
|
|
setCtx(null);
|
|
setDeleteMessageId(null);
|
|
setForwardMessageId(null);
|
|
setForwardSelectedChatIds(new Set());
|
|
setReactionsByMessage({});
|
|
}, [activeChatId]);
|
|
|
|
useEffect(() => {
|
|
if (!pendingDelete) {
|
|
return;
|
|
}
|
|
const interval = window.setInterval(() => setUndoTick((v) => v + 1), 250);
|
|
return () => window.clearInterval(interval);
|
|
}, [pendingDelete]);
|
|
|
|
useEffect(() => {
|
|
if (!activeChatId || !focusedMessageId) {
|
|
return;
|
|
}
|
|
const element = document.getElementById(`message-${focusedMessageId}`);
|
|
if (!element) {
|
|
return;
|
|
}
|
|
element.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
const timer = window.setTimeout(() => setFocusedMessage(activeChatId, null), 2500);
|
|
return () => window.clearTimeout(timer);
|
|
}, [activeChatId, focusedMessageId, messages.length, setFocusedMessage]);
|
|
|
|
if (!activeChatId) {
|
|
return <div className="flex h-full items-center justify-center text-slate-300/80">Select a chat</div>;
|
|
}
|
|
const chatId = activeChatId;
|
|
|
|
async function handleForwardSubmit() {
|
|
if (!forwardMessageId) return;
|
|
const targetChatIds = [...forwardSelectedChatIds];
|
|
if (!targetChatIds.length) {
|
|
setForwardError("Select at least one chat");
|
|
return;
|
|
}
|
|
setIsForwarding(true);
|
|
setForwardError(null);
|
|
try {
|
|
await forwardMessageBulk(forwardMessageId, targetChatIds);
|
|
setForwardMessageId(null);
|
|
setForwardSelectedChatIds(new Set());
|
|
setForwardQuery("");
|
|
} catch {
|
|
setForwardError("Failed to forward message");
|
|
} finally {
|
|
setIsForwarding(false);
|
|
}
|
|
setCtx(null);
|
|
}
|
|
|
|
async function handlePin(messageId: number) {
|
|
const nextPinned = activeChat?.pinned_message_id === messageId ? null : messageId;
|
|
const chat = await pinMessage(chatId, nextPinned);
|
|
updateChatPinnedMessage(chatId, chat.pinned_message_id ?? null);
|
|
setCtx(null);
|
|
}
|
|
|
|
async function handleDelete(forAll: boolean) {
|
|
if (!deleteMessageId) {
|
|
return;
|
|
}
|
|
try {
|
|
await deleteMessage(deleteMessageId, forAll);
|
|
removeMessage(chatId, deleteMessageId);
|
|
setDeleteMessageId(null);
|
|
setDeleteError(null);
|
|
} catch {
|
|
setDeleteError("Failed to delete message");
|
|
}
|
|
}
|
|
|
|
async function ensureReactionsLoaded(messageId: number) {
|
|
if (reactionsByMessage[messageId]) {
|
|
return;
|
|
}
|
|
try {
|
|
const rows = await listMessageReactions(messageId);
|
|
setReactionsByMessage((state) => ({ ...state, [messageId]: rows }));
|
|
} catch {
|
|
return;
|
|
}
|
|
}
|
|
|
|
async function handleToggleReaction(messageId: number, emoji: string) {
|
|
try {
|
|
const rows = await toggleMessageReaction(messageId, emoji);
|
|
setReactionsByMessage((state) => ({ ...state, [messageId]: rows }));
|
|
} catch {
|
|
return;
|
|
}
|
|
}
|
|
|
|
function toggleSelected(messageId: number) {
|
|
setSelectedIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(messageId)) {
|
|
next.delete(messageId);
|
|
} else {
|
|
next.add(messageId);
|
|
}
|
|
return next;
|
|
});
|
|
}
|
|
|
|
async function commitPendingDelete(state: PendingDeleteState) {
|
|
if (!state) {
|
|
return;
|
|
}
|
|
await Promise.allSettled(state.messages.map((message) => deleteMessage(message.id, false)));
|
|
setPendingDelete((current) => {
|
|
if (!current || current.timerId !== state.timerId) {
|
|
return current;
|
|
}
|
|
return null;
|
|
});
|
|
}
|
|
|
|
async function deleteSelectedForMe() {
|
|
if (!selectedMessages.length) {
|
|
return;
|
|
}
|
|
if (pendingDelete) {
|
|
window.clearTimeout(pendingDelete.timerId);
|
|
await commitPendingDelete(pendingDelete);
|
|
}
|
|
for (const message of selectedMessages) {
|
|
removeMessage(chatId, message.id);
|
|
}
|
|
const timeoutMs = 6000;
|
|
const timerId = window.setTimeout(() => {
|
|
void commitPendingDelete({
|
|
chatId,
|
|
messages: selectedMessages,
|
|
expiresAt: Date.now() + timeoutMs,
|
|
timerId
|
|
});
|
|
}, timeoutMs);
|
|
setPendingDelete({
|
|
chatId,
|
|
messages: selectedMessages,
|
|
expiresAt: Date.now() + timeoutMs,
|
|
timerId
|
|
});
|
|
setSelectedIds(new Set());
|
|
}
|
|
|
|
async function deleteSelectedForEveryone() {
|
|
if (!selectedMessages.length) {
|
|
return;
|
|
}
|
|
const results = await Promise.allSettled(
|
|
selectedMessages.map(async (message) => {
|
|
await deleteMessage(message.id, true);
|
|
return message.id;
|
|
})
|
|
);
|
|
for (const result of results) {
|
|
if (result.status === "fulfilled") {
|
|
removeMessage(chatId, result.value);
|
|
}
|
|
}
|
|
if (results.some((r) => r.status === "rejected")) {
|
|
setDeleteError("Some messages could not be deleted for everyone");
|
|
} else {
|
|
setDeleteError(null);
|
|
}
|
|
setSelectedIds(new Set());
|
|
}
|
|
|
|
function undoDeleteForMe() {
|
|
if (!pendingDelete || pendingDelete.chatId !== chatId) {
|
|
setPendingDelete(null);
|
|
return;
|
|
}
|
|
window.clearTimeout(pendingDelete.timerId);
|
|
restoreMessages(chatId, pendingDelete.messages);
|
|
setPendingDelete(null);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full flex-col" onClick={() => setCtx(null)}>
|
|
{activeChat?.pinned_message_id ? (
|
|
<div className="border-b border-slate-700/50 bg-slate-900/60 px-4 py-2 text-xs text-sky-300">
|
|
📌 {messagesMap.get(activeChat.pinned_message_id)?.text || "Pinned message"}
|
|
</div>
|
|
) : null}
|
|
{selectedIds.size > 0 ? (
|
|
<div className="flex items-center justify-between border-b border-slate-700/50 bg-slate-900/80 px-3 py-2 text-xs">
|
|
<span className="font-semibold text-slate-200">{selectedIds.size} selected</span>
|
|
<div className="flex items-center gap-2">
|
|
<button className="rounded bg-red-500 px-2 py-1 font-semibold text-white" onClick={() => void deleteSelectedForMe()}>
|
|
Delete for me
|
|
</button>
|
|
{canDeleteAllForSelection ? (
|
|
<button className="rounded bg-red-600 px-2 py-1 font-semibold text-white" onClick={() => void deleteSelectedForEveryone()}>
|
|
Delete for everyone
|
|
</button>
|
|
) : null}
|
|
<button className="rounded bg-slate-700 px-2 py-1 text-slate-200" onClick={() => setSelectedIds(new Set())}>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="tg-scrollbar flex-1 overflow-auto px-3 py-4 md:px-6">
|
|
{hasMore ? (
|
|
<div className="mb-3 flex justify-center">
|
|
<button
|
|
className="rounded-full border border-slate-700/80 bg-slate-900/70 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 disabled:opacity-60"
|
|
disabled={isLoadingMore}
|
|
onClick={() => void loadMoreMessages(chatId)}
|
|
>
|
|
{isLoadingMore ? "Loading..." : "Load older messages"}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
{messages.map((message, messageIndex) => {
|
|
const own = message.sender_id === me?.id;
|
|
const replySource = message.reply_to_message_id ? messagesMap.get(message.reply_to_message_id) : null;
|
|
const isSelected = selectedIds.has(message.id);
|
|
return (
|
|
<div key={`${message.id}-${message.client_message_id ?? ""}`}>
|
|
{unreadBoundaryIndex === messageIndex ? (
|
|
<div className="mb-2 mt-1 flex items-center gap-2 px-1">
|
|
<span className="h-px flex-1 bg-slate-700/60" />
|
|
<span className="rounded-full border border-slate-700/70 bg-slate-900/80 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-sky-300">
|
|
New messages
|
|
</span>
|
|
<span className="h-px flex-1 bg-slate-700/60" />
|
|
</div>
|
|
) : null}
|
|
<div className={`mb-2 flex ${own ? "justify-end" : "justify-start"}`}>
|
|
<div
|
|
id={`message-${message.id}`}
|
|
className={`max-w-[86%] rounded-2xl px-3 py-2 shadow-sm md:max-w-[72%] ${
|
|
own ? "rounded-br-md bg-sky-500/90 text-slate-950" : "rounded-bl-md border border-slate-700/60 bg-slate-900/80 text-slate-100"
|
|
} ${isSelected ? "ring-2 ring-sky-400/80" : ""} ${focusedMessageId === message.id ? "ring-2 ring-amber-300" : ""}`}
|
|
onClick={() => {
|
|
if (selectedIds.size > 0) {
|
|
toggleSelected(message.id);
|
|
}
|
|
}}
|
|
onContextMenu={(e) => {
|
|
e.preventDefault();
|
|
void ensureReactionsLoaded(message.id);
|
|
const pos = getSafeContextPosition(e.clientX, e.clientY, 160, 108);
|
|
setCtx({ x: pos.x, y: pos.y, messageId: message.id });
|
|
}}
|
|
>
|
|
{selectedIds.size > 0 ? (
|
|
<div className={`mb-1 inline-flex h-4 w-4 items-center justify-center rounded-full border text-[10px] ${isSelected ? "border-sky-300 bg-sky-300 text-slate-900" : "border-slate-400 text-slate-300"}`}>
|
|
{isSelected ? "✓" : ""}
|
|
</div>
|
|
) : null}
|
|
{message.forwarded_from_message_id ? (
|
|
<div className={`mb-1 rounded-md border-l-2 px-2 py-1 text-[11px] ${own ? "border-slate-900/60 bg-slate-900/10 text-slate-900/75" : "border-sky-400 bg-slate-800/60 text-sky-300"}`}>
|
|
↪ Forwarded message
|
|
</div>
|
|
) : null}
|
|
{replySource ? (
|
|
<div className={`mb-1 rounded-md border-l-2 px-2 py-1 text-[11px] ${own ? "border-slate-900/60 bg-slate-900/10 text-slate-900/75" : "border-sky-400 bg-slate-800/60 text-slate-300"}`}>
|
|
<p className="truncate font-semibold">{replySource.sender_id === me?.id ? "You" : "Reply"}</p>
|
|
<p className="truncate">{replySource.text || "[media]"}</p>
|
|
</div>
|
|
) : null}
|
|
{renderContent(message.type, message.text)}
|
|
<div className="mt-1 flex flex-wrap gap-1">
|
|
{["👍", "❤️", "🔥"].map((emoji) => {
|
|
const items = reactionsByMessage[message.id] ?? [];
|
|
const item = items.find((reaction) => reaction.emoji === emoji);
|
|
return (
|
|
<button
|
|
className={`rounded-full border px-2 py-0.5 text-[11px] ${
|
|
item?.reacted ? "border-sky-300 bg-sky-500/30" : "border-slate-500/60 bg-slate-700/40"
|
|
}`}
|
|
key={`${message.id}-${emoji}`}
|
|
onClick={() => void handleToggleReaction(message.id, emoji)}
|
|
type="button"
|
|
>
|
|
{emoji}{item ? ` ${item.count}` : ""}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<p className={`mt-1 flex items-center justify-end gap-1 text-[11px] ${own ? "text-slate-900/85" : "text-slate-400"}`}>
|
|
<span>{formatTime(message.created_at)}</span>
|
|
{own ? <span className={message.delivery_status === "read" ? "text-cyan-900" : ""}>{renderStatus(message.delivery_status)}</span> : null}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="px-5 pb-2 text-xs text-slate-300/80">{(typingByChat[activeChatId] ?? []).length > 0 ? "typing..." : ""}</div>
|
|
|
|
{ctx
|
|
? createPortal(
|
|
<div
|
|
className="fixed z-[100] w-40 rounded-lg border border-slate-700/80 bg-slate-900/95 p-1 shadow-2xl"
|
|
style={{ left: ctx.x, top: ctx.y }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<button
|
|
className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
|
|
onClick={() => {
|
|
const msg = messagesMap.get(ctx.messageId);
|
|
if (msg) {
|
|
setReplyToMessage(chatId, msg);
|
|
}
|
|
setCtx(null);
|
|
}}
|
|
>
|
|
Reply
|
|
</button>
|
|
<button
|
|
className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
|
|
onClick={() => {
|
|
setForwardMessageId(ctx.messageId);
|
|
setForwardQuery("");
|
|
setForwardError(null);
|
|
setForwardSelectedChatIds(new Set());
|
|
setCtx(null);
|
|
}}
|
|
>
|
|
Forward
|
|
</button>
|
|
<button
|
|
className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
|
|
onClick={() => {
|
|
setSelectedIds(new Set([ctx.messageId]));
|
|
setCtx(null);
|
|
}}
|
|
>
|
|
Select
|
|
</button>
|
|
<button
|
|
className="block w-full rounded px-2 py-1.5 text-left text-sm text-red-300 hover:bg-slate-800"
|
|
onClick={() => {
|
|
setDeleteMessageId(ctx.messageId);
|
|
setDeleteError(null);
|
|
setCtx(null);
|
|
}}
|
|
>
|
|
Delete
|
|
</button>
|
|
<button className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800" onClick={() => void handlePin(ctx.messageId)}>
|
|
Pin / Unpin
|
|
</button>
|
|
</div>,
|
|
document.body
|
|
)
|
|
: null}
|
|
|
|
{forwardMessageId ? (
|
|
<div className="absolute inset-0 z-50 flex items-end justify-center bg-slate-950/55 p-3" onClick={() => setForwardMessageId(null)}>
|
|
<div className="w-full rounded-xl border border-slate-700/80 bg-slate-900 p-3" onClick={(e) => e.stopPropagation()}>
|
|
<p className="mb-2 text-sm font-semibold">Forward message</p>
|
|
<input
|
|
className="mb-2 w-full rounded-lg border border-slate-700/80 bg-slate-800/80 px-3 py-2 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
|
|
placeholder="Search chats"
|
|
value={forwardQuery}
|
|
onChange={(e) => setForwardQuery(e.target.value)}
|
|
/>
|
|
<div className="tg-scrollbar max-h-56 space-y-1 overflow-auto">
|
|
{forwardTargets.map((chat) => (
|
|
<button
|
|
className={`block w-full rounded-lg px-3 py-2 text-left text-sm disabled:opacity-60 ${forwardSelectedChatIds.has(chat.id) ? "bg-sky-500/30" : "bg-slate-800 hover:bg-slate-700"}`}
|
|
disabled={isForwarding}
|
|
key={chat.id}
|
|
onClick={() => {
|
|
setForwardSelectedChatIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(chat.id)) {
|
|
next.delete(chat.id);
|
|
} else {
|
|
next.add(chat.id);
|
|
}
|
|
return next;
|
|
});
|
|
}}
|
|
>
|
|
<p className="truncate font-semibold">{chatLabel(chat)}</p>
|
|
<p className="truncate text-xs text-slate-400">{chat.handle ? `@${chat.handle}` : chat.type}</p>
|
|
</button>
|
|
))}
|
|
{forwardTargets.length === 0 ? <p className="px-1 py-2 text-xs text-slate-400">No chats found</p> : null}
|
|
</div>
|
|
{forwardError ? <p className="mt-2 text-xs text-red-400">{forwardError}</p> : null}
|
|
<div className="mt-3 flex gap-2">
|
|
<button className="w-full rounded bg-sky-500 px-3 py-2 text-sm font-semibold text-slate-950" onClick={() => void handleForwardSubmit()}>
|
|
Forward ({forwardSelectedChatIds.size})
|
|
</button>
|
|
<button className="w-full rounded bg-slate-700 px-3 py-2 text-sm" onClick={() => setForwardMessageId(null)}>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{deleteMessageId ? (
|
|
<div className="absolute inset-0 z-50 flex items-end justify-center bg-slate-950/55 p-3" onClick={() => setDeleteMessageId(null)}>
|
|
<div className="w-full rounded-xl border border-slate-700/80 bg-slate-900 p-3" onClick={(e) => e.stopPropagation()}>
|
|
<p className="mb-2 text-sm font-semibold">Delete message</p>
|
|
<p className="mb-3 text-xs text-slate-400">Choose how to delete this message.</p>
|
|
<div className="space-y-2">
|
|
<button className="w-full rounded bg-red-500 px-3 py-2 text-sm font-semibold text-white" onClick={() => void handleDelete(false)}>
|
|
Delete for me
|
|
</button>
|
|
{canDeleteForEveryone(messagesMap.get(deleteMessageId), activeChat, me?.id) ? (
|
|
<button className="w-full rounded bg-red-600 px-3 py-2 text-sm font-semibold text-white" onClick={() => void handleDelete(true)}>
|
|
Delete for everyone
|
|
</button>
|
|
) : null}
|
|
<button className="w-full rounded bg-slate-700 px-3 py-2 text-sm" onClick={() => setDeleteMessageId(null)}>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
{deleteError ? <p className="mt-2 text-xs text-red-400">{deleteError}</p> : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{pendingDelete && pendingDelete.chatId === chatId ? (
|
|
<div className="pointer-events-none absolute bottom-3 left-0 right-0 z-50 flex justify-center px-3" data-tick={undoTick}>
|
|
<div className="pointer-events-auto flex w-full max-w-sm items-center justify-between rounded-lg border border-slate-700/80 bg-slate-900/95 px-3 py-2 text-xs shadow-xl">
|
|
<span className="text-slate-200">
|
|
Messages deleted
|
|
{` (${Math.max(0, Math.ceil((pendingDelete.expiresAt - Date.now()) / 1000))}s)`}
|
|
</span>
|
|
<button className="rounded bg-sky-500 px-2 py-1 font-semibold text-slate-950" onClick={undoDeleteForMe} type="button">
|
|
Undo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function renderContent(messageType: string, text: string | null) {
|
|
if (!text) return <p className="opacity-80">[empty]</p>;
|
|
if (messageType === "image") return <img alt="attachment" className="max-h-72 rounded-lg object-cover" src={text} />;
|
|
if (messageType === "video" || messageType === "circle_video") return <video className="max-h-72 rounded-lg" controls src={text} />;
|
|
if (messageType === "audio" || messageType === "voice") return <audio controls src={text} />;
|
|
if (messageType === "file") {
|
|
return (
|
|
<a className="underline" href={text} rel="noreferrer" target="_blank">
|
|
Open file
|
|
</a>
|
|
);
|
|
}
|
|
return <p className="whitespace-pre-wrap break-words" dangerouslySetInnerHTML={{ __html: formatMessageHtml(text) }} />;
|
|
}
|
|
|
|
function renderStatus(status: string | undefined): string {
|
|
if (status === "sending") return "⌛";
|
|
if (status === "delivered") return "✓✓";
|
|
if (status === "read") return "✓✓";
|
|
return "✓";
|
|
}
|
|
|
|
function getSafeContextPosition(x: number, y: number, menuWidth: number, menuHeight: number): { x: number; y: number } {
|
|
const pad = 8;
|
|
const cursorOffset = 4;
|
|
const wantedX = x + cursorOffset;
|
|
const wantedY = y + cursorOffset;
|
|
const safeX = Math.min(Math.max(pad, wantedX), window.innerWidth - menuWidth - pad);
|
|
const safeY = Math.min(Math.max(pad, wantedY), window.innerHeight - menuHeight - pad);
|
|
return { x: safeX, y: safeY };
|
|
}
|
|
|
|
function chatLabel(chat: { display_title?: string | null; title: string | null; type: "private" | "group" | "channel"; is_saved?: boolean }): string {
|
|
if (chat.display_title?.trim()) return chat.display_title;
|
|
if (chat.title?.trim()) return chat.title;
|
|
if (chat.is_saved) return "Saved Messages";
|
|
if (chat.type === "private") return "Direct chat";
|
|
if (chat.type === "group") return "Group";
|
|
return "Channel";
|
|
}
|
|
|
|
function canDeleteForEveryone(
|
|
message: { sender_id: number } | undefined,
|
|
chat: { type: "private" | "group" | "channel"; is_saved?: boolean } | undefined,
|
|
meId: number | undefined
|
|
): boolean {
|
|
if (!message || !chat || !meId) return false;
|
|
if (chat.is_saved) return false;
|
|
if (chat.type === "private") return true;
|
|
return message.sender_id === meId;
|
|
}
|