`;
});
// Unicode emoji (keep as-is, they render natively)
// Masked/Markdown links [text](url) or [text](url "title") - process before bare URL detection
parsed = parsed.replace(
/\[([^\]]+)\]\((https?:\/\/[^\s)"]+)(?:\s+"([^"]+)")?\)/g,
(_, text, url, title) => {
const titleAttr = title ? ` title="${title}"` : '';
return `${text}`;
}
);
// Links (URLs) - use negative lookbehind to skip URLs in HTML attributes (src=", href=")
// Match URLs that are NOT preceded by =" or ='
parsed = parsed.replace(
/(?"']+)/g,
'$1'
);
// Newlines
parsed = parsed.replace(/\n/g, ''); // Unescape Discord markdown escape sequences (\_ \* \~ \` \| \\) // Must be done after all markdown processing parsed = parsed.replace(/\\([_*~`|\\])/g, '$1'); return parsed; } /** * Extract URLs from text */ function extractUrls(text) { if (!text) return []; const urlRegex = /(https?:\/\/[^\s<]+)/g; const matches = text.match(urlRegex); return matches || []; } // ============================================================================ // Link Preview Component // ============================================================================ const LinkPreview = memo(function LinkPreview({ url, cachedPreview, onPreviewLoad }) { const [preview, setPreview] = useState(cachedPreview || null); const [loading, setLoading] = useState(!cachedPreview); const [error, setError] = useState(false); const [imageError, setImageError] = useState(false); useEffect(() => { if (cachedPreview) { setPreview(cachedPreview); setLoading(false); return; } // For direct media URLs, only allow trusted domains if (IMAGE_EXTENSIONS.test(url)) { if (isTrustedDomain(url)) { const previewData = { url, type: 'image', image: url, trusted: true }; setPreview(previewData); setLoading(false); onPreviewLoad?.(url, previewData); } else { // Fetch through server to get metadata without exposing user IP fetchPreviewFromServer(); } return; } if (VIDEO_EXTENSIONS.test(url)) { if (isTrustedDomain(url)) { const previewData = { url, type: 'video', video: url, trusted: true }; setPreview(previewData); setLoading(false); onPreviewLoad?.(url, previewData); } else { // Don't show untrusted video embeds - too risky setError(true); setLoading(false); } return; } // Check for YouTube - trusted domain, can embed directly const ytId = getYouTubeId(url); if (ytId) { const previewData = { url, type: 'youtube', videoId: ytId, title: 'YouTube Video', siteName: 'YouTube', themeColor: '#FF0000', trusted: true, }; setPreview(previewData); setLoading(false); onPreviewLoad?.(url, previewData); return; } // All other URLs: fetch preview from server fetchPreviewFromServer(); async function fetchPreviewFromServer() { try { const response = await authFetch(`/api/link-preview?url=${encodeURIComponent(url)}`); if (!response.ok) throw new Error('Failed to fetch'); const data = await response.json(); if (data.error) throw new Error(data.error); setPreview(data); onPreviewLoad?.(url, data); } catch (err) { console.warn('Failed to fetch link preview:', url, err); setError(true); } finally { setLoading(false); } } }, [url, cachedPreview, onPreviewLoad]); if (loading) { return (
YouTube
{preview.title && (
{decodeHtmlEntities(preview.title)}
)}
{preview.siteName && (
{preview.image && !hasLargeImage && !imageError && (
{decodeHtmlEntities(preview.siteName)}
)}
{preview.title && (
{decodeHtmlEntities(preview.title)}
)}
{preview.description && (
{(() => {
const d = decodeHtmlEntities(preview.description);
return d.length > 300 ? d.slice(0, 300) + '...' : d;
})()}
)}
{filename || 'Audio file'}
{size &&
{formatFileSize(size)}
}
{filename || 'File'}
{size &&
{formatFileSize(size)}
}
{pollAuthor?.displayName || pollAuthor?.username || 'Unknown'}
’s poll {pollTitle} has closed
{winnerEmoji}
{winnerText}
{percent}%
{totalVotes} vote{totalVotes !== 1 ? 's' : ''}
onContextMenu?.(e, id, content)}
>
{isFirstInGroup ? (
);
});
// ============================================================================
// Main DiscordLogs Component
// ============================================================================
export default function DiscordLogs() {
const messagesContainerRef = useRef(null);
const pendingTargetMessageRef = useRef(null); // For deep-linking - used in fetch, cleared after scroll
const scrollToBottomRef = useRef(false); // Flag to trigger scroll to bottom after initial load
const [channels, setChannels] = useState([]);
const [channelsByGuild, setChannelsByGuild] = useState({});
const [guilds, setGuilds] = useState([]);
const [selectedGuild, setSelectedGuild] = useState(null);
const [selectedChannel, setSelectedChannel] = useState(null);
const [messages, setMessages] = useState([]);
const [usersMap, setUsersMap] = useState({}); // Map of user ID -> { displayName, username, color }
const [members, setMembers] = useState(null); // { groups: [...], roles: [...] }
const [loadingMembers, setLoadingMembers] = useState(false);
const [memberListExpanded, setMemberListExpanded] = useState(false); // Default to collapsed
const [linkCopied, setLinkCopied] = useState(false);
const [loading, setLoading] = useState(true);
const [loadingMessages, setLoadingMessages] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
const [hasMoreMessages, setHasMoreMessages] = useState(true);
const [error, setError] = useState(null);
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState(null); // Server-side search results
const [searchLoading, setSearchLoading] = useState(false);
const [previewCache, setPreviewCache] = useState({});
const [imageModal, setImageModal] = useState(null); // { url, alt }
const [reactionPopup, setReactionPopup] = useState(null); // { x, y, emoji, users, loading }
const [pollVoterPopup, setPollVoterPopup] = useState(null); // { x, y, answer, voters }
const [contextMenu, setContextMenu] = useState(null); // { x, y, messageId, content }
const [channelContextMenu, setChannelContextMenu] = useState(null); // { x, y, channel }
const [topicExpanded, setTopicExpanded] = useState(false); // Show full channel topic
const [refetchCounter, setRefetchCounter] = useState(0); // Counter to force re-fetch messages
const lastPollTimeRef = useRef(new Date().toISOString()); // Track last poll time for edit detection
// Collapsible categories in sidebar
const [collapsedCategories, setCollapsedCategories] = useState({});
const handleCategoryToggle = useCallback((catName) => {
setCollapsedCategories(prev => ({ ...prev, [catName]: !prev[catName] }));
}, []);
// Debounced server-side search
useEffect(() => {
if (!searchQuery.trim() || searchQuery.length < 2 || !selectedChannel) {
setSearchResults(null);
return;
}
const timeoutId = setTimeout(async () => {
setSearchLoading(true);
try {
const response = await authFetch(
`/api/discord/search?channelId=${selectedChannel.id}&q=${encodeURIComponent(searchQuery)}&limit=50`
);
if (response.ok) {
const data = await response.json();
// Normalize the search results
const normalizedMessages = (data.messages || []).map(msg => ({
...msg,
referenced_message: msg.referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({
...att,
content_type: att.contentType || att.content_type,
})),
}));
setSearchResults(normalizedMessages);
}
} catch (err) {
console.error('Search failed:', err);
} finally {
setSearchLoading(false);
}
}, 300); // 300ms debounce
return () => clearTimeout(timeoutId);
}, [searchQuery, selectedChannel]);
// Open image modal
const openImageModal = useCallback((imageData) => {
setImageModal(imageData);
}, []);
// Close image modal
const closeImageModal = useCallback(() => {
setImageModal(null);
}, []);
// Handle reaction click - fetch users who reacted
const handleReactionClick = useCallback(async (e, messageId, reaction) => {
const rect = e.target.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top;
// Show loading state
setReactionPopup({
x,
y,
emoji: reaction.emoji,
users: [],
loading: true,
});
try {
const params = new URLSearchParams({
messageId,
emojiName: reaction.emoji.name,
});
if (reaction.emoji.id) {
params.append('emojiId', reaction.emoji.id);
}
const response = await authFetch(`/api/discord/reaction-users?${params}`);
if (!response.ok) throw new Error('Failed to fetch');
const users = await response.json();
setReactionPopup(prev => prev ? {
...prev,
users,
loading: false,
} : null);
} catch (err) {
console.error('Failed to fetch reaction users:', err);
setReactionPopup(null);
}
}, []);
// Close reaction popup
const closeReactionPopup = useCallback(() => {
setReactionPopup(null);
}, []);
// Handle poll voter click - show voters popup
const handlePollVoterClick = useCallback((e, answer) => {
e.stopPropagation(); // Prevent click from bubbling up to handleClickOutside
if (!answer?.voters?.length) return;
const rect = e.currentTarget.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top;
setPollVoterPopup({
x,
y,
answer,
voters: answer.voters,
});
}, []);
// Close poll voter popup
const closePollVoterPopup = useCallback(() => {
setPollVoterPopup(null);
}, []);
// Handle message context menu (right-click)
const handleMessageContextMenu = useCallback((e, messageId, content) => {
e.preventDefault();
setContextMenu({
x: e.clientX,
y: e.clientY,
messageId,
content,
});
}, []);
// Copy message link to clipboard
const copyMessageLink = useCallback(() => {
if (!contextMenu || !selectedGuild || !selectedChannel) return;
const url = `${window.location.origin}${window.location.pathname}#${selectedGuild.id}/${selectedChannel.id}/${contextMenu.messageId}`;
navigator.clipboard.writeText(url);
setContextMenu(null);
}, [contextMenu, selectedGuild, selectedChannel]);
// Copy message content to clipboard
const copyMessageContent = useCallback(() => {
if (!contextMenu?.content) return;
navigator.clipboard.writeText(contextMenu.content);
setContextMenu(null);
}, [contextMenu]);
// Copy message ID to clipboard
const copyMessageId = useCallback(() => {
if (!contextMenu?.messageId) return;
navigator.clipboard.writeText(contextMenu.messageId);
setContextMenu(null);
}, [contextMenu]);
// Jump to a specific message (used from search results and poll result view)
const jumpToMessage = useCallback((messageId) => {
if (!messageId) return;
// First check if the message is already loaded
const existingMessage = messages.find(m => m.id === messageId);
if (existingMessage) {
// Message is already loaded, just scroll to it
const element = document.getElementById(`message-${messageId}`);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Add a brief highlight effect
element.classList.add('discord-message-highlight');
setTimeout(() => element.classList.remove('discord-message-highlight'), 2000);
return;
}
}
// Message not loaded, need to fetch around it
// Clear search to exit search mode
setSearchQuery('');
setSearchResults(null);
// Set the target message ID for the fetch effect
pendingTargetMessageRef.current = messageId;
// Trigger a re-fetch by incrementing the counter
setRefetchCounter(c => c + 1);
setLoadingMessages(true);
}, [messages]);
// Handle channel context menu (right-click)
const handleChannelContextMenu = useCallback((e, channel) => {
e.preventDefault();
setChannelContextMenu({
x: e.clientX,
y: e.clientY,
channel,
});
}, []);
// Copy channel link to clipboard
const copyChannelLink = useCallback(() => {
if (!channelContextMenu?.channel || !selectedGuild) return;
const url = `${window.location.origin}${window.location.pathname}#${selectedGuild.id}/${channelContextMenu.channel.id}`;
navigator.clipboard.writeText(url);
setChannelContextMenu(null);
}, [channelContextMenu, selectedGuild]);
// Copy channel ID to clipboard
const copyChannelId = useCallback(() => {
if (!channelContextMenu?.channel) return;
navigator.clipboard.writeText(channelContextMenu.channel.id);
setChannelContextMenu(null);
}, [channelContextMenu]);
// Copy channel name to clipboard
const copyChannelName = useCallback(() => {
if (!channelContextMenu?.channel) return;
navigator.clipboard.writeText(channelContextMenu.channel.name);
setChannelContextMenu(null);
}, [channelContextMenu]);
// Handle escape key to close modal
useEffect(() => {
const handleKeyDown = (e) => {
if (e.key === 'Escape') {
if (imageModal) closeImageModal();
if (reactionPopup) closeReactionPopup();
if (pollVoterPopup) closePollVoterPopup();
if (contextMenu) setContextMenu(null);
if (channelContextMenu) setChannelContextMenu(null);
}
};
const handleClickOutside = (e) => {
if (reactionPopup && !e.target.closest('.discord-reaction-popup')) {
closeReactionPopup();
}
if (pollVoterPopup && !e.target.closest('.discord-reaction-popup')) {
closePollVoterPopup();
}
if (contextMenu && !e.target.closest('.discord-context-menu')) {
setContextMenu(null);
}
if (channelContextMenu && !e.target.closest('.discord-context-menu')) {
setChannelContextMenu(null);
}
};
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('click', handleClickOutside);
return () => {
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('click', handleClickOutside);
};
}, [imageModal, reactionPopup, pollVoterPopup, contextMenu, channelContextMenu, closeImageModal, closeReactionPopup, closePollVoterPopup]);
// Update URL hash when guild/channel changes
useEffect(() => {
if (selectedGuild && selectedChannel) {
const newHash = `#${selectedGuild.id}/${selectedChannel.id}`;
if (window.location.hash !== newHash) {
window.history.replaceState(null, '', newHash);
}
}
}, [selectedGuild, selectedChannel]);
// Copy shareable link to clipboard
const copyShareLink = useCallback((messageId = null) => {
let url = window.location.origin + window.location.pathname;
if (selectedGuild && selectedChannel) {
url += `#${selectedGuild.id}/${selectedChannel.id}`;
if (messageId) {
url += `/${messageId}`;
}
}
navigator.clipboard.writeText(url).then(() => {
setLinkCopied(true);
setTimeout(() => setLinkCopied(false), 2000);
});
}, [selectedGuild, selectedChannel]);
// Create channel lookup map for mentions
const channelMap = useMemo(() => {
const map = new Map();
channels.forEach(channel => {
map.set(channel.id, {
id: channel.id,
name: channel.name,
guildId: channel.guildId,
guildName: channel.guildName,
guildIcon: channel.guildIcon,
});
});
return map;
}, [channels]);
// Create roles lookup map for role mentions
const rolesMap = useMemo(() => {
const map = new Map();
members?.roles?.forEach(role => map.set(role.id, role));
return map;
}, [members?.roles]);
// Handle channel selection from mentions
const handleChannelSelect = useCallback((channel) => {
// Find the full channel object with guild info
const guildId = channel.guildId || channelMap.get(channel.id)?.guildId;
if (guildId) {
const guild = guilds.find(g => g.id === guildId);
if (guild) {
setSelectedGuild(guild);
}
const channelList = channelsByGuild[guildId];
const fullChannel = channelList?.find(c => c.id === channel.id);
if (fullChannel) {
setSelectedChannel(fullChannel);
}
}
}, [guilds, channelsByGuild, channelMap]);
// Load channels from API
useEffect(() => {
async function fetchChannels() {
try {
const response = await authFetch('/api/discord/channels');
if (!response.ok) throw new Error('Failed to fetch channels');
const data = await response.json();
// Separate categories (type 4), text channels (type 0), and threads (types 10, 11, 12)
const categories = {};
const textChannels = [];
const threads = [];
data.forEach(channel => {
if (channel.type === 4) {
categories[channel.id] = {
id: channel.id,
name: channel.name,
position: channel.position,
guildId: channel.guildId,
};
} else if (channel.type === 10 || channel.type === 11 || channel.type === 12) {
threads.push(channel);
} else {
textChannels.push(channel);
}
});
// Create a map of parent channel ID to threads
const threadsByParent = {};
threads.forEach(thread => {
if (thread.parentId) {
if (!threadsByParent[thread.parentId]) {
threadsByParent[thread.parentId] = [];
}
threadsByParent[thread.parentId].push(thread);
}
});
// Group channels by guild
const byGuild = {};
const guildMap = {};
textChannels.forEach(channel => {
const guildId = channel.guildId || 'unknown';
if (!byGuild[guildId]) {
byGuild[guildId] = [];
guildMap[guildId] = {
id: guildId,
name: channel.guildName || 'Discord Archive',
icon: channel.guildIcon || null,
};
}
const categoryName = channel.parentId ? categories[channel.parentId]?.name : null;
const categoryPosition = channel.parentId ? categories[channel.parentId]?.position : -1;
// Get threads for this channel
const channelThreads = threadsByParent[channel.id] || [];
byGuild[guildId].push({
id: channel.id,
name: channel.name,
type: channel.type,
position: channel.position,
topic: channel.topic,
parentId: channel.parentId,
categoryName,
categoryPosition,
guild: guildMap[guildId],
messageCount: channel.messageCount || 0,
threads: channelThreads.map(t => ({
id: t.id,
name: t.name,
type: t.type,
messageCount: t.messageCount || 0,
parentId: t.parentId,
guildId: t.guildId,
guildName: t.guildName,
guildIcon: t.guildIcon,
})),
});
});
// Sort guilds - put "no place like ::1" first
const guildList = Object.values(guildMap).sort((a, b) => {
if (a.name === 'no place like ::1') return -1;
if (b.name === 'no place like ::1') return 1;
return a.name.localeCompare(b.name);
});
// Sort channels within each guild by category position, then channel position
Object.keys(byGuild).forEach(guildId => {
byGuild[guildId].sort((a, b) => {
// First sort by category position (no category = -1, comes first)
if (a.categoryPosition !== b.categoryPosition) {
return a.categoryPosition - b.categoryPosition;
}
// Then by channel position within category
return (a.position || 0) - (b.position || 0);
});
});
setGuilds(guildList);
setChannelsByGuild(byGuild);
setChannels(data);
// Check URL hash for deep linking
const hash = window.location.hash.slice(1); // Remove #
const [hashGuildId, hashChannelId, hashMessageId] = hash.split('/');
let initialGuild = null;
let initialChannel = null;
// Set target message ID for scrolling after messages load
if (hashMessageId) {
pendingTargetMessageRef.current = hashMessageId;
}
// Try to find guild/channel from hash
if (hashGuildId && guildMap[hashGuildId]) {
initialGuild = guildMap[hashGuildId];
if (hashChannelId && byGuild[hashGuildId]) {
initialChannel = byGuild[hashGuildId].find(c => c.id === hashChannelId && c.messageCount > 0);
}
}
// Fall back to first guild/channel if hash doesn't match
if (!initialGuild && guildList.length > 0) {
initialGuild = guildList[0];
}
if (!initialChannel && initialGuild && byGuild[initialGuild.id]?.length > 0) {
// Pick first channel with messages
initialChannel = byGuild[initialGuild.id].find(c => c.type !== 4 && c.messageCount > 0);
}
if (initialGuild) {
setSelectedGuild(initialGuild);
}
if (initialChannel) {
setSelectedChannel(initialChannel);
}
} catch (err) {
console.error('Failed to fetch channels:', err);
setError('Failed to load channels');
} finally {
setLoading(false);
}
}
// Wait for auth to be ready before fetching
fetchChannels();
}, []);
// Load members when guild or channel changes
useEffect(() => {
if (!selectedGuild) return;
async function fetchMembers() {
setLoadingMembers(true);
try {
// Include channelId to filter members by channel visibility
let url = `/api/discord/members?guildId=${selectedGuild.id}`;
if (selectedChannel?.id) {
url += `&channelId=${selectedChannel.id}`;
}
const response = await authFetch(url);
if (!response.ok) throw new Error('Failed to fetch members');
const data = await response.json();
setMembers(data);
} catch (err) {
console.error('Failed to fetch members:', err);
setMembers(null);
} finally {
setLoadingMembers(false);
}
}
fetchMembers();
}, [selectedGuild, selectedChannel]);
// Load messages from API when channel changes
useEffect(() => {
if (!selectedChannel) return;
// Reset topic expanded state when channel changes
setTopicExpanded(false);
// Set loading immediately to prevent flash of "no messages" state
setLoadingMessages(true);
async function fetchMessages() {
setMessages([]);
setUsersMap({});
setHasMoreMessages(true);
// Capture target message ID from ref (for deep-linking)
const targetMessageId = pendingTargetMessageRef.current;
try {
// If we have a target message ID, use 'around' to fetch messages centered on it
let url = `/api/discord/messages?channelId=${selectedChannel.id}&limit=50`;
if (targetMessageId) {
url += `&around=${targetMessageId}`;
}
const response = await authFetch(url);
if (!response.ok) throw new Error('Failed to fetch messages');
const data = await response.json();
// Handle new response format { messages, users }
const messagesData = data.messages || data;
const usersData = data.users || {};
// If we were looking for a specific message but got no results,
// fall back to loading the latest messages
if (targetMessageId && messagesData.length === 0) {
console.warn(`Target message ${targetMessageId} not found, loading latest messages`);
pendingTargetMessageRef.current = null;
const fallbackResponse = await authFetch(`/api/discord/messages?channelId=${selectedChannel.id}&limit=50`);
if (fallbackResponse.ok) {
const fallbackData = await fallbackResponse.json();
const fallbackMessages = fallbackData.messages || fallbackData;
const fallbackUsers = fallbackData.users || {};
const normalizedFallback = fallbackMessages.map(msg => ({
...msg,
referenced_message: msg.referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({
...att,
content_type: att.contentType || att.content_type,
})),
}));
setMessages(normalizedFallback.reverse());
setUsersMap(fallbackUsers);
setHasMoreMessages(fallbackMessages.length === 50);
scrollToBottomRef.current = true;
lastPollTimeRef.current = new Date().toISOString();
return;
}
}
// Normalize field names from API to component expectations
const normalizedMessages = messagesData.map(msg => ({
...msg,
referenced_message: msg.referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({
...att,
content_type: att.contentType || att.content_type,
})),
}));
// When using 'around', messages come back in ASC order already
// When using default (no around), they come DESC so reverse them
const orderedMessages = targetMessageId
? normalizedMessages
: normalizedMessages.reverse();
setMessages(orderedMessages);
setUsersMap(usersData);
setHasMoreMessages(messagesData.length === 50);
// Reset poll time for edit detection
lastPollTimeRef.current = new Date().toISOString();
// Set flag to scroll after render (handled by useLayoutEffect)
if (targetMessageId) {
// Keep the target in pendingTargetMessageRef for useLayoutEffect
} else {
scrollToBottomRef.current = true;
}
} catch (err) {
console.error('Failed to fetch messages:', err);
setMessages([]);
} finally {
setLoadingMessages(false);
}
}
fetchMessages();
// Re-fetch when channel ID changes or refetchCounter is incremented (for jump-to-message)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedChannel?.id, refetchCounter]);
// Handle scroll positioning after messages are rendered
useLayoutEffect(() => {
if (messages.length === 0) return;
const container = messagesContainerRef.current;
if (!container) return;
// Handle target message (deep-linking)
const targetMessageId = pendingTargetMessageRef.current;
if (targetMessageId) {
// Use requestAnimationFrame to ensure DOM is fully painted
requestAnimationFrame(() => {
const targetElement = document.getElementById(`message-${targetMessageId}`);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Highlight the message with pulse + fade animation
targetElement.classList.add('discord-message-highlight');
setTimeout(() => {
targetElement.classList.remove('discord-message-highlight');
}, 5000); // 3 pulses (1.5s) + 3s fade
}
pendingTargetMessageRef.current = null;
});
return;
}
// Handle scroll to bottom on initial channel load
if (scrollToBottomRef.current) {
scrollToBottomRef.current = false;
container.scrollTop = container.scrollHeight;
}
}, [messages]);
// Load more messages (pagination)
const loadMoreMessages = useCallback(async () => {
if (loadingMore || !hasMoreMessages || messages.length === 0) return;
setLoadingMore(true);
try {
// Get the oldest message ID for pagination (messages are in ASC order, so first = oldest)
const oldestMessage = messages[0];
const response = await authFetch(
`/api/discord/messages?channelId=${selectedChannel.id}&limit=50&before=${oldestMessage.id}`
);
if (!response.ok) throw new Error('Failed to fetch more messages');
const data = await response.json();
// Handle new response format { messages, users }
const messagesData = data.messages || data;
const usersData = data.users || {};
const normalizedMessages = messagesData.map(msg => ({
...msg,
referenced_message: msg.referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({
...att,
content_type: att.contentType || att.content_type,
})),
}));
// Prepend older messages (reversed to maintain ASC order)
setMessages(prev => [...normalizedMessages.reverse(), ...prev]);
// Merge new users into existing usersMap
setUsersMap(prev => ({ ...prev, ...usersData }));
setHasMoreMessages(messagesData.length === 50);
} catch (err) {
console.error('Failed to load more messages:', err);
} finally {
setLoadingMore(false);
}
}, [loadingMore, hasMoreMessages, messages, selectedChannel]);
// Infinite scroll: load more when scrolling near the top
useEffect(() => {
const container = messagesContainerRef.current;
if (!container) return;
const handleScroll = () => {
// Don't load more when viewing search results
if (searchQuery.trim().length >= 2 && searchResults !== null) return;
// Load more when within 200px of the top
if (container.scrollTop < 200 && hasMoreMessages && !loadingMore) {
// Save scroll position before loading
const scrollHeightBefore = container.scrollHeight;
loadMoreMessages().then(() => {
// Restore scroll position after new messages are prepended
requestAnimationFrame(() => {
const scrollHeightAfter = container.scrollHeight;
container.scrollTop = scrollHeightAfter - scrollHeightBefore;
});
});
}
};
container.addEventListener('scroll', handleScroll);
return () => container.removeEventListener('scroll', handleScroll);
}, [hasMoreMessages, loadingMore, loadMoreMessages, searchQuery, searchResults]);
// Poll for new messages and edits every 5 seconds
useEffect(() => {
if (!selectedChannel || loadingMessages || messages.length === 0) return;
// Don't poll when viewing search results - it would add messages that aren't in search
if (searchQuery.trim().length >= 2 && searchResults !== null) return;
const pollInterval = setInterval(async () => {
try {
const pollStartTime = new Date().toISOString();
// Get the newest message ID (messages are in ASC order, so last = newest)
const newestMessage = messages[messages.length - 1];
// Fetch new messages after newest
const newMsgsResponse = await authFetch(
`/api/discord/messages?channelId=${selectedChannel.id}&limit=50&after=${newestMessage.id}`
);
let newMessages = [];
let newUsersData = {};
if (newMsgsResponse.ok) {
const data = await newMsgsResponse.json();
const messagesData = data.messages || data;
newUsersData = data.users || {};
if (messagesData.length > 0) {
newMessages = messagesData.map(msg => ({
...msg,
referenced_message: msg.referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({
...att,
content_type: att.contentType || att.content_type,
})),
}));
}
}
// Fetch messages edited since last poll
const editedResponse = await authFetch(
`/api/discord/messages?channelId=${selectedChannel.id}&limit=100&editedSince=${encodeURIComponent(lastPollTimeRef.current)}`
);
let editedMessages = [];
if (editedResponse.ok) {
const editedData = await editedResponse.json();
const editedMessagesData = editedData.messages || editedData;
const editedUsersData = editedData.users || {};
newUsersData = { ...newUsersData, ...editedUsersData };
editedMessages = editedMessagesData.map(msg => ({
...msg,
referenced_message: msg.referencedMessage || msg.referenced_message,
attachments: (msg.attachments || []).map(att => ({
...att,
content_type: att.contentType || att.content_type,
})),
}));
}
// Update last poll time for next iteration
lastPollTimeRef.current = pollStartTime;
// Check if user is scrolled near bottom before adding new messages
const container = messagesContainerRef.current;
const isNearBottom = container &&
(container.scrollHeight - container.scrollTop - container.clientHeight < 100);
// Only update state if there are changes
if (newMessages.length > 0 || editedMessages.length > 0) {
setMessages(prev => {
// Create a map of existing messages by ID
const msgMap = new Map(prev.map(m => [m.id, m]));
// Update with edited messages (overwrite existing)
for (const msg of editedMessages) {
if (msgMap.has(msg.id)) {
msgMap.set(msg.id, msg);
}
}
// Append new messages
for (const msg of newMessages) {
if (!msgMap.has(msg.id)) {
msgMap.set(msg.id, msg);
}
}
// Convert back to array and sort by ID (snowflake = timestamp order)
return Array.from(msgMap.values()).sort((a, b) => {
if (a.id < b.id) return -1;
if (a.id > b.id) return 1;
return 0;
});
});
setUsersMap(prev => ({ ...prev, ...newUsersData }));
}
// Auto-scroll to bottom if user was already near bottom and there are new messages
if (isNearBottom && container && newMessages.length > 0) {
setTimeout(() => {
container.scrollTop = container.scrollHeight;
}, 50);
}
} catch (err) {
console.error('Polling failed:', err);
}
}, 5000);
return () => clearInterval(pollInterval);
}, [selectedChannel, loadingMessages, messages, searchQuery, searchResults]); // Poll for channel/guild updates every 5 seconds
useEffect(() => {
if (loading) return; // Don't poll during initial load
const pollInterval = setInterval(async () => {
try {
const response = await authFetch('/api/discord/channels');
if (!response.ok) return;
const data = await response.json();
// Separate categories (type 4), text channels (type 0), and threads (types 10, 11, 12)
const categories = {};
const textChannels = [];
const threads = [];
data.forEach(channel => {
if (channel.type === 4) {
categories[channel.id] = {
id: channel.id,
name: channel.name,
position: channel.position,
guildId: channel.guildId,
};
} else if (channel.type === 10 || channel.type === 11 || channel.type === 12) {
threads.push(channel);
} else {
textChannels.push(channel);
}
});
// Create a map of parent channel ID to threads
const threadsByParent = {};
threads.forEach(thread => {
if (thread.parentId) {
if (!threadsByParent[thread.parentId]) {
threadsByParent[thread.parentId] = [];
}
threadsByParent[thread.parentId].push(thread);
}
});
// Rebuild guild/channel maps
const byGuild = {};
const guildMap = {};
textChannels.forEach(channel => {
const guildId = channel.guildId || 'unknown';
if (!byGuild[guildId]) {
byGuild[guildId] = [];
guildMap[guildId] = {
id: guildId,
name: channel.guildName || 'Discord Archive',
icon: channel.guildIcon || null,
};
}
const categoryName = channel.parentId ? categories[channel.parentId]?.name : null;
const categoryPosition = channel.parentId ? categories[channel.parentId]?.position : -1;
// Get threads for this channel
const channelThreads = threadsByParent[channel.id] || [];
byGuild[guildId].push({
id: channel.id,
name: channel.name,
type: channel.type,
position: channel.position,
topic: channel.topic,
parentId: channel.parentId,
categoryName,
categoryPosition,
guild: guildMap[guildId],
messageCount: channel.messageCount || 0,
threads: channelThreads.map(t => ({
id: t.id,
name: t.name,
type: t.type,
messageCount: t.messageCount || 0,
parentId: t.parentId,
guildId: t.guildId,
guildName: t.guildName,
guildIcon: t.guildIcon,
})),
});
});
// Sort guilds
const guildList = Object.values(guildMap).sort((a, b) => {
if (a.name === 'no place like ::1') return -1;
if (b.name === 'no place like ::1') return 1;
return a.name.localeCompare(b.name);
});
// Sort channels within each guild
Object.keys(byGuild).forEach(guildId => {
byGuild[guildId].sort((a, b) => {
if (a.categoryPosition !== b.categoryPosition) {
return a.categoryPosition - b.categoryPosition;
}
return (a.position || 0) - (b.position || 0);
});
});
setGuilds(guildList);
setChannelsByGuild(byGuild);
setChannels(data);
// Note: We don't update selectedChannel here to avoid triggering message reload
// The channel list will show updated message counts from channelsByGuild
} catch (err) {
console.error('Channel polling failed:', err);
}
}, 5000);
return () => clearInterval(pollInterval);
}, [loading]);
// Poll for member updates every 5 seconds
useEffect(() => {
if (!selectedGuild) return;
const pollInterval = setInterval(async () => {
try {
// Include channelId to filter members by channel visibility
let url = `/api/discord/members?guildId=${selectedGuild.id}`;
if (selectedChannel?.id) {
url += `&channelId=${selectedChannel.id}`;
}
const response = await authFetch(url);
if (!response.ok) return;
const data = await response.json();
setMembers(data);
} catch (err) {
console.error('Member polling failed:', err);
}
}, 5000);
return () => clearInterval(pollInterval);
}, [selectedGuild?.id, selectedChannel?.id]);
// Handle preview cache updates
const handlePreviewLoad = useCallback((url, preview) => {
setPreviewCache(prev => ({ ...prev, [url]: preview }));
}, []);
// Filter messages by search - use server results if available, otherwise filter locally
const filteredMessages = useMemo(() => {
// If we have server-side search results, use those
if (searchQuery.trim().length >= 2 && searchResults !== null) {
return searchResults;
}
// No search query - return all messages
if (!searchQuery.trim()) return messages;
// Local filtering for short queries or while waiting for server results
const query = searchQuery.toLowerCase();
return messages.filter(msg => {
// Check message content
if (msg.content?.toLowerCase().includes(query)) return true;
// Check author username/displayName
if (msg.author?.username?.toLowerCase().includes(query)) return true;
if (msg.author?.displayName?.toLowerCase().includes(query)) return true;
// Check embed content
if (msg.embeds?.length > 0) {
for (const embed of msg.embeds) {
if (embed.title?.toLowerCase().includes(query)) return true;
if (embed.description?.toLowerCase().includes(query)) return true;
if (embed.author?.name?.toLowerCase().includes(query)) return true;
if (embed.footer?.text?.toLowerCase().includes(query)) return true;
// Check embed fields
if (embed.fields?.length > 0) {
for (const field of embed.fields) {
if (field.name?.toLowerCase().includes(query)) return true;
if (field.value?.toLowerCase().includes(query)) return true;
}
}
}
}
return false;
});
}, [messages, searchQuery, searchResults]);
// Check if current channel is dds-archive
const isArchiveChannel = selectedChannel?.name === 'dds-archive';
// Group messages by author and time window (5 minutes)
// Messages are in ASC order (oldest first, newest at bottom), so we group accordingly
// For archive channel, parse messages to get real author/timestamp for grouping
const groupedMessages = useMemo(() => {
const groups = [];
let currentGroup = null;
let lastDate = null;
filteredMessages.forEach((message) => {
// For archive channel, parse to get real author and timestamp
let effectiveAuthor = message.author;
let effectiveTimestamp = message.timestamp;
if (isArchiveChannel) {
const parsed = parseArchivedMessage(message.content);
if (parsed) {
// Use resolved user for proper grouping by real user ID
const resolvedUser = resolveArchivedUser(parsed.originalAuthor, usersMap, members);
effectiveAuthor = resolvedUser;
effectiveTimestamp = parsed.originalTimestamp;
}
}
const messageDate = new Date(effectiveTimestamp).toDateString();
// Check if we need a date divider (date changed from previous message)
if (messageDate !== lastDate) {
if (currentGroup) groups.push(currentGroup);
groups.push({ type: 'divider', date: effectiveTimestamp });
currentGroup = null;
lastDate = messageDate;
}
// For ASC order: check time diff from the LAST message in current group
// (which is the most recent since we're iterating oldest to newest)
const shouldStartNewGroup = !currentGroup ||
currentGroup.effectiveAuthor?.id !== effectiveAuthor?.id ||
Math.abs(new Date(currentGroup.messages[currentGroup.messages.length - 1].effectiveTimestamp) - new Date(effectiveTimestamp)) > 5 * 60 * 1000;
if (shouldStartNewGroup) {
if (currentGroup) groups.push(currentGroup);
currentGroup = {
type: 'messages',
author: effectiveAuthor,
effectiveAuthor,
messages: [{ ...message, effectiveTimestamp }],
};
} else {
currentGroup.messages.push({ ...message, effectiveTimestamp });
}
});
if (currentGroup) groups.push(currentGroup);
return groups;
}, [filteredMessages, isArchiveChannel, usersMap, members]);
if (loading) {
return (
{avatarUrl ? (
) : (
) : (
{getInitial(displayAuthor?.username)}
)}
{formatTimestamp(displayTimestamp, 'time')}
)}
{isFirstInGroup && (
)}
{/* Original embeds from Discord */}
{embeds?.map((embed, idx) => (
e.target.style.display = 'none'}
/>
)}
{embed.image?.url && (
)}
{embed.video?.url && (
// Check if it's a YouTube embed URL - use iframe instead of video
embed.video.url.includes('youtube.com/embed/') || embed.video.url.includes('youtu.be') ? (
) : (
)
)}
{embed.footer && (
))}
{/* Link previews for URLs in content */}
{urlsToPreview.map((url) => (
{/* Tags appear BEFORE the name */}
{displayAuthor?.isServerForwarded && (
SERVER
)}
{(displayAuthor?.bot || displayAuthor?.isWebhook) && !displayAuthor?.isServerForwarded && (
APP
)}
{archivedMessage && (
ARCHIVED
)}
{displayAuthor?.displayName || displayAuthor?.username || 'Unknown User'}
{formatTimestamp(displayTimestamp)}
{isSearchResult && onJumpToMessage && (
)}
)}
{displayContent && (
)}
{/* Attachments */}
{attachments?.length > 0 && (
{attachments.map((att, idx) => (
)}
{/* Stickers */}
{stickers?.length > 0 && (
{stickers.map((sticker) => (
)}
{/* Poll */}
{poll && (
{sticker.formatType === 3 ? (
// Lottie stickers - show placeholder or name
)}
))}
{sticker.name}
) : (
{poll.question.emoji && (
poll.question.emoji.id ? (
) : (
{poll.question.emoji.name}
)
)}
{poll.question.text}
{poll.allowMultiselect && (
Select multiple
)}
) : (
{poll.question.emoji.name}
)
)}
{poll.question.text}
{poll.allowMultiselect && (
Select multiple
)}
{poll.answers.map((answer) => {
const percentage = poll.totalVotes > 0
? Math.round((answer.voteCount / poll.totalVotes) * 100)
: 0;
return (
onPollVoterClick?.(e, answer)} style={{ cursor: answer.voters?.length ? 'pointer' : 'default' }}>
);
})}
{answer.emoji && (
answer.emoji.id ? (
) : (
{answer.emoji.name}
)
)}
{answer.text}
{answer.voteCount} ({percentage}%)
{answer.voters?.length > 0 && (
) : (
{answer.emoji.name}
)
)}
{answer.text}
{answer.voteCount} ({percentage}%)
{answer.voters.slice(0, 10).map((voter) => (
)}
{voter.avatar ? (
) : (
{(voter.displayName || voter.username || 'U')[0].toUpperCase()}
)}
))}
{answer.voters.length > 10 && (
+{answer.voters.length - 10}
)}
{poll.totalVotes} {poll.totalVotes === 1 ? 'vote' : 'votes'}
{poll.isFinalized && (
Poll ended
)}
{!poll.isFinalized && poll.expiry && (
Ends {new Date(poll.expiry).toLocaleDateString()}
)}
{embed.author && (
{embed.thumbnail?.url && embed.thumbnail.url.trim() && (
{embed.author.icon_url && (
)}
{embed.author.name}
)}
{embed.title && (
embed.url ? (
{decodeHtmlEntities(embed.title)}
) : (
{decodeHtmlEntities(embed.title)}
)
)}
{embed.description && (
)}
{/* Embed fields */}
{embed.fields?.length > 0 && (
{embed.fields.map((field, fieldIdx) => (
)}
{field.name && (
))}
{field.name}
)}
{field.value && (
)}
)}
{embed.video?.url && (
// Check if it's a YouTube embed URL - use iframe instead of video
embed.video.url.includes('youtube.com/embed/') || embed.video.url.includes('youtu.be') ? (
) : (
)
)}
{embed.footer && (
{embed.footer.icon_url && (
)}
{decodeHtmlEntities(embed.footer.text)}
{embed.timestamp && (
<>
•
{formatTimestamp(embed.timestamp, 'short')}
)}
)}
{reactions.map((reaction, idx) => (
))}
)}
Error
{error}
{/* Header */}
{selectedChannel && (
{/* Image Modal */}
{imageModal && (
{selectedChannel.guild?.icon && (
)}
)}
{/* Main layout: sidebar + content */}
{selectedChannel.guild?.name || 'Discord Archive'}
{/* Show thread icon for thread types (10, 11, 12), otherwise channel hash */}
{selectedChannel.type === 10 || selectedChannel.type === 11 || selectedChannel.type === 12 ? (
) : (
)}
{selectedChannel.name}
{selectedChannel.topic && (
<>
|
setTopicExpanded(!topicExpanded)}
title={topicExpanded ? 'Click to collapse' : 'Click to expand'}
dangerouslySetInnerHTML={{
__html: parseDiscordMarkdown(selectedChannel.topic, { channelMap, usersMap, rolesMap })
}}
/>
)}
{selectedChannel.messageCount?.toLocaleString() || messages.length} messages
{/* Sidebar with Guild and Channel selector */}
{/* Guild tabs - compact vertical strip */}
{guilds.length > 1 && (
{/* Content area: search + messages */}
{guilds.map((guild) => (
))}
)}
{/* Channel list for selected guild */}
{selectedGuild && channelsByGuild[selectedGuild.id]?.length > 0 && (
{showCategoryHeader && channel.categoryName && (
);
});
})()}
)}
{selectedGuild.name}
{/* Collapsible categories state and handler at top level */}
{/* ...existing code... */}
{(() => {
let lastCategory = null;
// Filter out channels with no messages (no access), but include if they have threads with messages
const accessibleChannels = channelsByGuild[selectedGuild.id].filter(c =>
c.messageCount > 0 || c.threads?.some(t => t.messageCount > 0)
);
return accessibleChannels.map((channel) => {
const showCategoryHeader = channel.categoryName !== lastCategory;
lastCategory = channel.categoryName;
// Filter threads that have messages
const accessibleThreads = channel.threads?.filter(t => t.messageCount > 0) || [];
const isCollapsed = channel.categoryName && collapsedCategories[channel.categoryName];
return (
handleCategoryToggle(channel.categoryName)} style={{ cursor: 'pointer', userSelect: 'none' }}>
{channel.categoryName}
)}
{!isCollapsed && channel.messageCount > 0 && (
)}
{/* Threads under this channel */}
{!isCollapsed && accessibleThreads.map((thread) => (
))}
{/* Search bar */}
{/* Member list panel */}
{memberListExpanded && (
setSearchQuery(e.target.value)}
/>
{searchLoading && (
{/* Search info banner */}
{searchQuery.trim().length >= 2 && searchResults !== null && (
Found {searchResults.length} result{searchResults.length !== 1 ? 's' : ''} across all messages
)}
{/* Messages */}
{loadingMessages ? (
No messages found
{searchQuery ? 'No messages match your search. Try different keywords.' : 'This channel has no archived messages'}
{/* Loading indicator at top when fetching older messages */}
{loadingMore && (
)}
{formatDateDivider(group.date)}
);
}
// Check if we're showing search results
const isSearchMode = searchQuery.trim().length >= 2 && searchResults !== null;
return (
{group.messages.map((message, msgIdx) => (
);
})}
{loadingMembers ? (
)}
{group.role.name} — {group.members.length}
{group.members.map((member) => (
{member.avatar ? (
) : (
))}
{(member.displayName || member.username || 'U')[0].toUpperCase()}
)}
{member.displayName || member.username}
{member.isBot && APP}
No members found
)}
e.stopPropagation()}>
Open original
e.stopPropagation()}
>
)}
{/* Poll Voter Popup - same style as reaction popup */}
{pollVoterPopup && (
{reactionPopup.emoji.id ? (
) : (
{reactionPopup.emoji.name}
)}
{reactionPopup.users?.length || 0}
) : (
{reactionPopup.emoji.name}
)}
{reactionPopup.users?.length || 0}
{reactionPopup.loading ? (
{user.displayName}
))
) : (
No users found
)}
e.stopPropagation()}
>
)}
{/* Message Context Menu */}
{contextMenu && (
{pollVoterPopup.voters?.length || 0}
{pollVoterPopup.voters?.length > 0 ? (
pollVoterPopup.voters.map((voter) => (
{voter.displayName || voter.username}
))
) : (
No voters found
)}
e.stopPropagation()}
>
)}
{/* Channel Context Menu */}
{channelContextMenu && (
e.stopPropagation()}
>
)}