V0.9.23
This commit is contained in:
344
frontend/src/components/Message.jsx
Normal file
344
frontend/src/components/Message.jsx
Normal file
@@ -0,0 +1,344 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import Avatar from './Avatar.jsx';
|
||||
import UserProfilePopup from './UserProfilePopup.jsx';
|
||||
import ImageLightbox from './ImageLightbox.jsx';
|
||||
import Picker from '@emoji-mart/react';
|
||||
import data from '@emoji-mart/data';
|
||||
import { parseTS } from '../utils/api.js';
|
||||
import './Message.css';
|
||||
|
||||
const QUICK_EMOJIS = ['👍', '❤️', '😂', '😮', '😢', '🙏'];
|
||||
|
||||
function formatMsgContent(content) {
|
||||
if (!content) return '';
|
||||
// First handle @mentions
|
||||
let html = content.replace(/@\[([^\]]+)\]/g, (_, name) => `<span class="mention">@${name}</span>`);
|
||||
// Then linkify bare URLs (not already inside a tag)
|
||||
html = html.replace(/(https?:\/\/[^\s<>"]+)/g, (url) => {
|
||||
// Trim trailing punctuation that's unlikely to be part of the URL
|
||||
const trimmed = url.replace(/[.,!?;:)\]]+$/, '');
|
||||
const trailing = url.slice(trimmed.length);
|
||||
return `<a href="${trimmed}" target="_blank" rel="noopener noreferrer" class="msg-link">${trimmed}</a>${trailing}`;
|
||||
});
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
// Detect emoji-only messages for large rendering
|
||||
function isEmojiOnly(str) {
|
||||
if (!str || str.length > 12) return false;
|
||||
const emojiRegex = /^(\p{Emoji_Presentation}|\p{Extended_Pictographic}|\uFE0F|\u200D|[\u{1F1E0}-\u{1F1FF}])+$/u;
|
||||
return emojiRegex.test(str.trim());
|
||||
}
|
||||
|
||||
export default function Message({ message: msg, prevMessage, currentUser, onReply, onDelete, onReact, onDirectMessage, isDirect, onlineUserIds = new Set() }) {
|
||||
const [showActions, setShowActions] = useState(false);
|
||||
const [showOptionsMenu, setShowOptionsMenu] = useState(false);
|
||||
const longPressTimer = useRef(null);
|
||||
const optionsMenuRef = useRef(null);
|
||||
const [showEmojiPicker, setShowEmojiPicker] = useState(false);
|
||||
const wrapperRef = useRef(null);
|
||||
const pickerRef = useRef(null);
|
||||
const avatarRef = useRef(null);
|
||||
const [showProfile, setShowProfile] = useState(false);
|
||||
const [lightboxSrc, setLightboxSrc] = useState(null);
|
||||
const [pickerOpensDown, setPickerOpensDown] = useState(false);
|
||||
|
||||
const isOwn = msg.user_id === currentUser.id;
|
||||
const isDeleted = !!msg.is_deleted;
|
||||
const isSystem = msg.type === 'system';
|
||||
|
||||
// These must be computed before any early returns that reference them
|
||||
const showDateSep = !prevMessage ||
|
||||
parseTS(msg.created_at).toDateString() !== parseTS(prevMessage.created_at).toDateString();
|
||||
|
||||
const prevSameUser = !showDateSep && prevMessage &&
|
||||
prevMessage.user_id === msg.user_id &&
|
||||
prevMessage.type !== 'system' && msg.type !== 'system';
|
||||
|
||||
const canDelete = !msg.is_deleted && (
|
||||
msg.user_id === currentUser.id ||
|
||||
currentUser.role === 'admin' ||
|
||||
msg.group_owner_id === currentUser.id
|
||||
);
|
||||
|
||||
// Close emoji picker when clicking outside
|
||||
useEffect(() => {
|
||||
if (!showEmojiPicker) return;
|
||||
const handler = (e) => {
|
||||
if (pickerRef.current && !pickerRef.current.contains(e.target)) {
|
||||
setShowEmojiPicker(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, [showEmojiPicker]);
|
||||
|
||||
// Close options menu on outside click
|
||||
useEffect(() => {
|
||||
if (!showOptionsMenu) return;
|
||||
const close = (e) => {
|
||||
if (optionsMenuRef.current && !optionsMenuRef.current.contains(e.target)) {
|
||||
setShowOptionsMenu(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', close);
|
||||
document.addEventListener('touchstart', close);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', close);
|
||||
document.removeEventListener('touchstart', close);
|
||||
};
|
||||
}, [showOptionsMenu]);
|
||||
|
||||
const handleReact = (emoji) => {
|
||||
onReact(msg.id, emoji);
|
||||
setShowEmojiPicker(false);
|
||||
};
|
||||
|
||||
const handleCopy = () => {
|
||||
if (!msg.content) return;
|
||||
navigator.clipboard.writeText(msg.content).catch(() => {});
|
||||
};
|
||||
|
||||
const handleTogglePicker = () => {
|
||||
if (!showEmojiPicker && wrapperRef.current) {
|
||||
const rect = wrapperRef.current.getBoundingClientRect();
|
||||
setPickerOpensDown(rect.top < 400);
|
||||
}
|
||||
setShowEmojiPicker(p => !p);
|
||||
};
|
||||
|
||||
// Long press for mobile action menu (DMs only)
|
||||
const handleTouchStart = () => {
|
||||
if (!isDirect) return;
|
||||
longPressTimer.current = setTimeout(() => setShowOptionsMenu(true), 500);
|
||||
};
|
||||
const handleTouchEnd = () => {
|
||||
if (longPressTimer.current) clearTimeout(longPressTimer.current);
|
||||
};
|
||||
|
||||
// Deleted messages are filtered out by ChatWindow, but guard here too
|
||||
if (isDeleted) return null;
|
||||
|
||||
// System messages render as a simple centred notice
|
||||
if (isSystem) {
|
||||
return (
|
||||
<>
|
||||
{showDateSep && (
|
||||
<div className="date-separator"><span>{formatDate(msg.created_at)}</span></div>
|
||||
)}
|
||||
<div className="system-message">{msg.content}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const reactionMap = {};
|
||||
for (const r of (msg.reactions || [])) {
|
||||
if (!reactionMap[r.emoji]) reactionMap[r.emoji] = { count: 0, users: [], hasMe: false };
|
||||
reactionMap[r.emoji].count++;
|
||||
reactionMap[r.emoji].users.push(r.user_name);
|
||||
if (r.user_id === currentUser.id) reactionMap[r.emoji].hasMe = true;
|
||||
}
|
||||
|
||||
const msgUser = {
|
||||
id: msg.user_id,
|
||||
name: msg.user_name,
|
||||
display_name: msg.user_display_name,
|
||||
avatar: msg.user_avatar,
|
||||
role: msg.user_role,
|
||||
status: msg.user_status,
|
||||
hide_admin_tag: msg.user_hide_admin_tag,
|
||||
about_me: msg.user_about_me,
|
||||
allow_dm: msg.user_allow_dm,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showDateSep && (
|
||||
<div className="date-separator">
|
||||
<span>{formatDate(msg.created_at)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={wrapperRef}
|
||||
className={`message-wrapper ${isOwn ? 'own' : 'other'} ${prevSameUser ? 'grouped' : ''}`}
|
||||
>
|
||||
{!isOwn && !prevSameUser && (
|
||||
<div
|
||||
ref={avatarRef}
|
||||
style={{ position: 'relative', cursor: 'pointer', transition: 'box-shadow 0.15s', flexShrink: 0, borderRadius: '50%', display: 'inline-flex' }}
|
||||
onClick={() => setShowProfile(p => !p)}
|
||||
onMouseEnter={e => e.currentTarget.style.boxShadow = '0 0 0 2px var(--primary)'}
|
||||
onMouseLeave={e => e.currentTarget.style.boxShadow = 'none'}
|
||||
>
|
||||
<Avatar user={msgUser} size="sm" className="msg-avatar" />
|
||||
{!!(onlineUserIds instanceof Set ? onlineUserIds.has(Number(msg.user_id)) : false) && (
|
||||
<span style={{
|
||||
position: 'absolute', bottom: 0, right: 0,
|
||||
width: 9, height: 9, borderRadius: '50%',
|
||||
background: '#34a853', border: '2px solid var(--surface)',
|
||||
pointerEvents: 'none'
|
||||
}} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!isOwn && prevSameUser && <div className="avatar-spacer" />}
|
||||
|
||||
<div className="message-body">
|
||||
{!isOwn && !prevSameUser && (
|
||||
<div className="msg-name">
|
||||
{msgUser.display_name || msgUser.name}
|
||||
{msgUser.role === 'admin' && !msgUser.hide_admin_tag && <span className="role-badge role-admin" style={{ marginLeft: 6 }}>Admin</span>}
|
||||
{msgUser.status !== 'active' && <span style={{ marginLeft: 6, fontSize: 11, color: 'var(--text-tertiary)' }}>(inactive)</span>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reply preview */}
|
||||
{msg.reply_to_id && (
|
||||
<div className="reply-preview">
|
||||
<div className="reply-bar" />
|
||||
<div>
|
||||
<div className="reply-name">{msg.reply_user_display_name || msg.reply_user_name}</div>
|
||||
<div className="reply-text">
|
||||
{msg.reply_is_deleted ? <em style={{ color: 'var(--text-tertiary)' }}>Deleted message</em>
|
||||
: msg.reply_image_url ? '📷 Image'
|
||||
: msg.reply_content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bubble + actions together so actions hover above bubble */}
|
||||
<div className="msg-bubble-wrap">
|
||||
<div className="msg-bubble-with-actions"
|
||||
onMouseEnter={() => setShowActions(true)}
|
||||
onMouseLeave={() => { if (!showEmojiPicker && !showOptionsMenu) setShowActions(false); }}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onTouchMove={handleTouchEnd}
|
||||
onContextMenu={isDirect ? (e => { e.preventDefault(); setShowOptionsMenu(true); }) : undefined}
|
||||
>
|
||||
{/* Actions toolbar — floats above the bubble, aligned to correct side */}
|
||||
{!isDeleted && (showActions || showEmojiPicker) && (
|
||||
<div className={`msg-actions ${isOwn ? 'actions-left' : 'actions-right'}`}>
|
||||
{QUICK_EMOJIS.map(e => (
|
||||
<button key={e} className="quick-emoji" onClick={() => handleReact(e)} title={e}>{e}</button>
|
||||
))}
|
||||
<button className="btn-icon action-btn" onClick={handleTogglePicker} title="More reactions">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
|
||||
</button>
|
||||
<button className="btn-icon action-btn" onClick={() => onReply(msg)} title="Reply">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
|
||||
</button>
|
||||
{msg.content && (
|
||||
<button className="btn-icon action-btn" onClick={handleCopy} title="Copy text">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
</button>
|
||||
)}
|
||||
{canDelete && (
|
||||
<button className="btn-icon action-btn danger" onClick={() => onDelete(msg.id)} title="Delete">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Emoji picker anchored to the toolbar */}
|
||||
{showEmojiPicker && (
|
||||
<div
|
||||
className={`emoji-picker-wrap ${isOwn ? 'picker-left' : 'picker-right'} ${pickerOpensDown ? 'picker-down' : ''}`}
|
||||
ref={pickerRef}
|
||||
onMouseDown={e => e.stopPropagation()}
|
||||
>
|
||||
<Picker data={data} onEmojiSelect={(e) => handleReact(e.native)} theme="light" previewPosition="none" skinTonePosition="none" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`msg-bubble ${isOwn ? 'out' : 'in'}${!msg.image_url && isEmojiOnly(msg.content) ? ' emoji-only' : ''}`}>
|
||||
{msg.image_url && (
|
||||
<img
|
||||
src={msg.image_url}
|
||||
alt="attachment"
|
||||
className="msg-image"
|
||||
onClick={() => setLightboxSrc(msg.image_url)}
|
||||
/>
|
||||
)}
|
||||
{msg.content && (
|
||||
isEmojiOnly(msg.content) && !msg.image_url
|
||||
? <p className="msg-text emoji-msg">{msg.content}</p>
|
||||
: <p
|
||||
className="msg-text"
|
||||
dangerouslySetInnerHTML={{ __html: formatMsgContent(msg.content) }}
|
||||
/>
|
||||
)}
|
||||
{msg.link_preview && <LinkPreview data={msg.link_preview} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="msg-time">{formatTime(msg.created_at)}</span>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{Object.keys(reactionMap).length > 0 && (
|
||||
<div className="reactions">
|
||||
{Object.entries(reactionMap).map(([emoji, { count, users, hasMe }]) => (
|
||||
<button
|
||||
key={emoji}
|
||||
className={`reaction-btn ${hasMe ? 'active' : ''}`}
|
||||
onClick={() => onReact(msg.id, emoji)}
|
||||
title={hasMe ? `${users.join(', ')} · Click to remove` : users.join(', ')}
|
||||
>
|
||||
{emoji} <span className="reaction-count">{count}</span>
|
||||
{hasMe && <span className="reaction-remove" title="Remove reaction">×</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showProfile && (
|
||||
<UserProfilePopup
|
||||
user={msgUser}
|
||||
anchorEl={avatarRef.current}
|
||||
onClose={() => setShowProfile(false)}
|
||||
onDirectMessage={onDirectMessage}
|
||||
/>
|
||||
)}
|
||||
{lightboxSrc && (
|
||||
<ImageLightbox src={lightboxSrc} onClose={() => setLightboxSrc(null)} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function LinkPreview({ data: raw }) {
|
||||
let d;
|
||||
try { d = typeof raw === 'string' ? JSON.parse(raw) : raw; } catch { return null; }
|
||||
if (!d?.title) return null;
|
||||
|
||||
return (
|
||||
<a href={d.url} target="_blank" rel="noopener noreferrer" className="link-preview">
|
||||
{d.image && <img src={d.image} alt="" className="link-preview-img" onError={e => e.target.style.display = 'none'} />}
|
||||
<div className="link-preview-content">
|
||||
{d.siteName && <span className="link-site">{d.siteName}</span>}
|
||||
<span className="link-title">{d.title}</span>
|
||||
{d.description && <span className="link-desc">{d.description}</span>}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function formatTime(dateStr) {
|
||||
return parseTS(dateStr).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
const d = parseTS(dateStr);
|
||||
const now = new Date();
|
||||
if (d.toDateString() === now.toDateString()) return 'Today';
|
||||
const yest = new Date(now); yest.setDate(yest.getDate() - 1);
|
||||
if (d.toDateString() === yest.toDateString()) return 'Yesterday';
|
||||
return d.toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric' });
|
||||
}
|
||||
Reference in New Issue
Block a user