messages implemented
This commit is contained in:
587
resources/js/components/messaging/ConversationThread.jsx
Normal file
587
resources/js/components/messaging/ConversationThread.jsx
Normal file
@@ -0,0 +1,587 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import MessageBubble from './MessageBubble'
|
||||
|
||||
/**
|
||||
* Right panel: scrollable thread of messages with send form.
|
||||
*/
|
||||
export default function ConversationThread({
|
||||
conversationId,
|
||||
conversation,
|
||||
currentUserId,
|
||||
currentUsername,
|
||||
apiFetch,
|
||||
onBack,
|
||||
onMarkRead,
|
||||
onConversationUpdated,
|
||||
}) {
|
||||
const [messages, setMessages] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [sending, setSending] = useState(false)
|
||||
const [body, setBody] = useState('')
|
||||
const [nextCursor, setNextCursor] = useState(null)
|
||||
const [loadingMore, setLoadingMore] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
const [attachments, setAttachments] = useState([])
|
||||
const [typingUsers, setTypingUsers] = useState([])
|
||||
const [threadSearch, setThreadSearch] = useState('')
|
||||
const [threadSearchResults, setThreadSearchResults] = useState([])
|
||||
const fileInputRef = useRef(null)
|
||||
const bottomRef = useRef(null)
|
||||
const threadRef = useRef(null)
|
||||
const pollRef = useRef(null)
|
||||
const typingPollRef = useRef(null)
|
||||
const typingStopTimerRef = useRef(null)
|
||||
const latestIdRef = useRef(null)
|
||||
const shouldAutoScrollRef = useRef(true)
|
||||
const draftKey = `nova_draft_${conversationId}`
|
||||
|
||||
// ── Initial load ─────────────────────────────────────────────────────────
|
||||
const loadMessages = useCallback(async () => {
|
||||
try {
|
||||
const data = await apiFetch(`/api/messages/${conversationId}`)
|
||||
const msgs = [...(data.data ?? [])].map(m => tagReactions(m, currentUserId))
|
||||
setMessages(msgs)
|
||||
setNextCursor(data.next_cursor ?? null)
|
||||
setLoading(false)
|
||||
if (msgs.length) latestIdRef.current = msgs[msgs.length - 1].id
|
||||
shouldAutoScrollRef.current = true
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
setLoading(false)
|
||||
}
|
||||
}, [conversationId, currentUserId, apiFetch])
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
setMessages([])
|
||||
const storedDraft = window.localStorage.getItem(draftKey)
|
||||
setBody(storedDraft ?? '')
|
||||
loadMessages()
|
||||
|
||||
// Phase 1 polling: check new messages every 10 seconds
|
||||
pollRef.current = setInterval(async () => {
|
||||
try {
|
||||
const data = await apiFetch(`/api/messages/${conversationId}`)
|
||||
const latestChunk = [...(data.data ?? [])].map(m => tagReactions(m, currentUserId))
|
||||
if (latestChunk.length && latestChunk[latestChunk.length - 1].id !== latestIdRef.current) {
|
||||
shouldAutoScrollRef.current = true
|
||||
setMessages(prev => mergeMessageLists(prev, latestChunk))
|
||||
latestIdRef.current = latestChunk[latestChunk.length - 1].id
|
||||
onConversationUpdated()
|
||||
}
|
||||
} catch (_) {}
|
||||
}, 10_000)
|
||||
|
||||
return () => clearInterval(pollRef.current)
|
||||
}, [conversationId, draftKey])
|
||||
|
||||
useEffect(() => {
|
||||
typingPollRef.current = setInterval(async () => {
|
||||
try {
|
||||
const data = await apiFetch(`/api/messages/${conversationId}/typing`)
|
||||
setTypingUsers(data.typing ?? [])
|
||||
} catch (_) {}
|
||||
}, 2_000)
|
||||
|
||||
return () => {
|
||||
clearInterval(typingPollRef.current)
|
||||
clearTimeout(typingStopTimerRef.current)
|
||||
apiFetch(`/api/messages/${conversationId}/typing/stop`, { method: 'POST' }).catch(() => {})
|
||||
}
|
||||
}, [conversationId, apiFetch])
|
||||
|
||||
useEffect(() => {
|
||||
const content = body.trim()
|
||||
if (!content) {
|
||||
clearTimeout(typingStopTimerRef.current)
|
||||
apiFetch(`/api/messages/${conversationId}/typing/stop`, { method: 'POST' }).catch(() => {})
|
||||
return
|
||||
}
|
||||
|
||||
apiFetch(`/api/messages/${conversationId}/typing`, { method: 'POST' }).catch(() => {})
|
||||
clearTimeout(typingStopTimerRef.current)
|
||||
typingStopTimerRef.current = setTimeout(() => {
|
||||
apiFetch(`/api/messages/${conversationId}/typing/stop`, { method: 'POST' }).catch(() => {})
|
||||
}, 2500)
|
||||
}, [body, conversationId, apiFetch])
|
||||
|
||||
useEffect(() => {
|
||||
if (body.trim()) {
|
||||
window.localStorage.setItem(draftKey, body)
|
||||
return
|
||||
}
|
||||
|
||||
window.localStorage.removeItem(draftKey)
|
||||
}, [body, draftKey])
|
||||
|
||||
// ── Scroll to bottom on first load and new messages ───────────────────────
|
||||
useEffect(() => {
|
||||
if (!loading && shouldAutoScrollRef.current) {
|
||||
bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
shouldAutoScrollRef.current = false
|
||||
}
|
||||
}, [loading, messages.length])
|
||||
|
||||
// ── Mark as read when thread is viewed ────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!loading) {
|
||||
apiFetch(`/api/messages/${conversationId}/read`, { method: 'POST' })
|
||||
.then(() => onMarkRead(conversationId))
|
||||
.catch(() => {})
|
||||
}
|
||||
}, [loading, conversationId])
|
||||
|
||||
// ── Load older messages ───────────────────────────────────────────────────
|
||||
const loadMore = useCallback(async () => {
|
||||
if (!nextCursor || loadingMore) return
|
||||
setLoadingMore(true)
|
||||
const container = threadRef.current
|
||||
const prevHeight = container?.scrollHeight ?? 0
|
||||
|
||||
try {
|
||||
const data = await apiFetch(`/api/messages/${conversationId}?cursor=${nextCursor}`)
|
||||
const older = [...(data.data ?? [])].map(m => tagReactions(m, currentUserId))
|
||||
shouldAutoScrollRef.current = false
|
||||
setMessages(prev => [...older, ...prev])
|
||||
setNextCursor(data.next_cursor ?? null)
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (!container) return
|
||||
const newHeight = container.scrollHeight
|
||||
container.scrollTop = Math.max(0, newHeight - prevHeight + container.scrollTop)
|
||||
})
|
||||
} catch (_) {}
|
||||
setLoadingMore(false)
|
||||
}, [nextCursor, loadingMore, apiFetch, conversationId, currentUserId])
|
||||
|
||||
const handleThreadScroll = useCallback((e) => {
|
||||
if (e.currentTarget.scrollTop < 120) {
|
||||
loadMore()
|
||||
}
|
||||
}, [loadMore])
|
||||
|
||||
// ── Send message ──────────────────────────────────────────────────────────
|
||||
const handleSend = useCallback(async (e) => {
|
||||
e.preventDefault()
|
||||
const text = body.trim()
|
||||
if ((!text && attachments.length === 0) || sending) return
|
||||
|
||||
setSending(true)
|
||||
const optimistic = {
|
||||
id: `opt-${Date.now()}`,
|
||||
sender_id: currentUserId,
|
||||
sender: { id: currentUserId, username: currentUsername },
|
||||
body: text,
|
||||
created_at: new Date().toISOString(),
|
||||
_optimistic: true,
|
||||
attachments: attachments.map((file, index) => ({
|
||||
id: `tmp-${Date.now()}-${index}`,
|
||||
type: file.type.startsWith('image/') ? 'image' : 'file',
|
||||
original_name: file.name,
|
||||
})),
|
||||
}
|
||||
setMessages(prev => [...prev, optimistic])
|
||||
setBody('')
|
||||
window.localStorage.removeItem(draftKey)
|
||||
shouldAutoScrollRef.current = true
|
||||
bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('body', text)
|
||||
attachments.forEach(file => formData.append('attachments[]', file))
|
||||
|
||||
const msg = await apiFetch(`/api/messages/${conversationId}`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
setMessages(prev => prev.map(m => m.id === optimistic.id ? msg : m))
|
||||
latestIdRef.current = msg.id
|
||||
onConversationUpdated()
|
||||
setAttachments([])
|
||||
} catch (e) {
|
||||
setMessages(prev => prev.filter(m => m.id !== optimistic.id))
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setSending(false)
|
||||
}
|
||||
}, [body, attachments, sending, conversationId, currentUserId, currentUsername, apiFetch, onConversationUpdated, draftKey])
|
||||
|
||||
const handleKeyDown = useCallback((e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSend(e)
|
||||
}
|
||||
}, [handleSend])
|
||||
|
||||
// ── Reaction ──────────────────────────────────────────────────────────────
|
||||
const handleReact = useCallback(async (messageId, emoji) => {
|
||||
try {
|
||||
await apiFetch(`/api/messages/${messageId}/reactions`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ reaction: emoji }),
|
||||
})
|
||||
// Optimistically add reaction with _iMine flag
|
||||
setMessages(prev => prev.map(m => {
|
||||
if (m.id !== messageId) return m
|
||||
const existing = (m.reactions ?? []).some(r => r._iMine && r.reaction === emoji)
|
||||
if (existing) return m
|
||||
return { ...m, reactions: [...(m.reactions ?? []), { reaction: emoji, user_id: currentUserId, _iMine: true }] }
|
||||
}))
|
||||
} catch (_) {}
|
||||
}, [currentUserId, apiFetch])
|
||||
|
||||
const handleUnreact = useCallback(async (messageId, emoji) => {
|
||||
try {
|
||||
await apiFetch(`/api/messages/${messageId}/reactions`, {
|
||||
method: 'DELETE',
|
||||
body: JSON.stringify({ reaction: emoji }),
|
||||
})
|
||||
// Optimistically remove reaction
|
||||
setMessages(prev => prev.map(m => {
|
||||
if (m.id !== messageId) return m
|
||||
return { ...m, reactions: (m.reactions ?? []).filter(r => !(r._iMine && r.reaction === emoji)) }
|
||||
}))
|
||||
} catch (_) {}
|
||||
}, [apiFetch])
|
||||
|
||||
const handleEdit = useCallback(async (messageId, newBody) => {
|
||||
const updated = await apiFetch(`/api/messages/message/${messageId}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({ body: newBody }),
|
||||
})
|
||||
setMessages(prev => prev.map(m => m.id === messageId ? { ...m, body: updated.body, edited_at: updated.edited_at } : m))
|
||||
}, [apiFetch])
|
||||
|
||||
const handleReportMessage = useCallback(async (messageId) => {
|
||||
try {
|
||||
await apiFetch('/api/reports', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
target_type: 'message',
|
||||
target_id: messageId,
|
||||
reason: 'inappropriate',
|
||||
details: '',
|
||||
}),
|
||||
})
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
}
|
||||
}, [apiFetch])
|
||||
|
||||
const handlePickAttachments = useCallback((e) => {
|
||||
const next = Array.from(e.target.files ?? [])
|
||||
if (!next.length) return
|
||||
setAttachments(prev => [...prev, ...next].slice(0, 5))
|
||||
e.target.value = ''
|
||||
}, [])
|
||||
|
||||
const removeAttachment = useCallback((index) => {
|
||||
setAttachments(prev => prev.filter((_, i) => i !== index))
|
||||
}, [])
|
||||
|
||||
const togglePin = useCallback(async () => {
|
||||
const me = conversation?.all_participants?.find(p => p.user_id === currentUserId)
|
||||
const isPinned = !!me?.is_pinned
|
||||
const endpoint = isPinned ? 'unpin' : 'pin'
|
||||
try {
|
||||
await apiFetch(`/api/messages/${conversationId}/${endpoint}`, { method: 'POST' })
|
||||
onConversationUpdated()
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
}
|
||||
}, [conversation, currentUserId, apiFetch, conversationId, onConversationUpdated])
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
const q = threadSearch.trim()
|
||||
if (q.length < 2) {
|
||||
setThreadSearchResults([])
|
||||
return
|
||||
}
|
||||
|
||||
const timer = setTimeout(async () => {
|
||||
try {
|
||||
const data = await apiFetch(`/api/messages/search?q=${encodeURIComponent(q)}&conversation_id=${conversationId}`)
|
||||
if (!cancelled) {
|
||||
setThreadSearchResults(data.data ?? [])
|
||||
}
|
||||
} catch (_) {
|
||||
if (!cancelled) {
|
||||
setThreadSearchResults([])
|
||||
}
|
||||
}
|
||||
}, 250)
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
clearTimeout(timer)
|
||||
}
|
||||
}, [threadSearch, conversationId, apiFetch])
|
||||
|
||||
const jumpToMessage = useCallback((messageId) => {
|
||||
const target = document.getElementById(`message-${messageId}`)
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
}, [])
|
||||
|
||||
// ── Thread header label ───────────────────────────────────────────────────
|
||||
const threadLabel = conversation?.type === 'group'
|
||||
? (conversation?.title ?? 'Group conversation')
|
||||
: (conversation?.all_participants?.find(p => p.user_id !== currentUserId)?.user?.username ?? 'Direct message')
|
||||
const otherParticipant = conversation?.all_participants?.find(p => p.user_id !== currentUserId)
|
||||
const otherLastReadAt = otherParticipant?.last_read_at ?? null
|
||||
const lastMessageId = messages[messages.length - 1]?.id ?? null
|
||||
|
||||
// ── Group date separators from messages ──────────────────────────────────
|
||||
const grouped = groupByDate(messages)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="sm:hidden p-1 text-gray-500 hover:text-gray-900 dark:hover:text-gray-100"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<div>
|
||||
<p className="font-medium text-sm text-gray-900 dark:text-gray-100">{threadLabel}</p>
|
||||
{conversation?.type === 'group' && (
|
||||
<p className="text-xs text-gray-400">
|
||||
{conversation.all_participants?.filter(p => !p.left_at).length ?? 0} members
|
||||
</p>
|
||||
)}
|
||||
{typingUsers.length > 0 && (
|
||||
<p className="text-xs text-blue-400">{typingUsers.map(u => u.username).join(', ')} typing…</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={togglePin}
|
||||
className="ml-auto text-xs px-2 py-1 rounded border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
{conversation?.my_participant?.is_pinned ? 'Unpin' : 'Pin'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<input
|
||||
type="search"
|
||||
value={threadSearch}
|
||||
onChange={e => setThreadSearch(e.target.value)}
|
||||
placeholder="Search in this conversation…"
|
||||
className="w-full rounded-lg bg-gray-100 dark:bg-gray-800 px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
{threadSearch.trim().length >= 2 && (
|
||||
<div className="mt-2 max-h-28 overflow-y-auto rounded border border-gray-200 dark:border-gray-700">
|
||||
{threadSearchResults.length === 0 && (
|
||||
<p className="px-2 py-1 text-xs text-gray-400">No matches</p>
|
||||
)}
|
||||
{threadSearchResults.map(item => (
|
||||
<button
|
||||
key={`thread-search-${item.id}`}
|
||||
onClick={() => jumpToMessage(item.id)}
|
||||
className="w-full text-left px-2 py-1 text-xs hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
<span className="text-gray-500">@{item.sender?.username ?? 'unknown'}: </span>
|
||||
<span className="text-gray-800 dark:text-gray-200">{item.body || '(attachment)'}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div ref={threadRef} onScroll={handleThreadScroll} className="flex-1 overflow-y-auto px-4 py-4 space-y-1">
|
||||
{loadingMore && (
|
||||
<div className="text-center py-2 text-xs text-gray-400">Loading older messages…</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="text-center text-sm text-gray-400 py-12">Loading messages…</div>
|
||||
)}
|
||||
|
||||
{!loading && messages.length === 0 && (
|
||||
<div className="text-center text-sm text-gray-400 py-12">
|
||||
No messages yet. Say hello!
|
||||
</div>
|
||||
)}
|
||||
|
||||
{grouped.map(({ date, messages: dayMessages }) => (
|
||||
<React.Fragment key={date}>
|
||||
<div className="flex items-center gap-3 my-4">
|
||||
<hr className="flex-1 border-gray-200 dark:border-gray-700" />
|
||||
<span className="text-xs text-gray-400 flex-shrink-0">{date}</span>
|
||||
<hr className="flex-1 border-gray-200 dark:border-gray-700" />
|
||||
</div>
|
||||
{dayMessages.map((msg, idx) => (
|
||||
<div key={msg.id} id={`message-${msg.id}`}>
|
||||
<MessageBubble
|
||||
message={msg}
|
||||
isMine={msg.sender_id === currentUserId}
|
||||
showAvatar={idx === 0 || dayMessages[idx - 1]?.sender_id !== msg.sender_id}
|
||||
onReact={handleReact}
|
||||
onUnreact={handleUnreact}
|
||||
onEdit={handleEdit}
|
||||
onReport={handleReportMessage}
|
||||
seenText={buildSeenText({
|
||||
message: msg,
|
||||
isMine: msg.sender_id === currentUserId,
|
||||
isDirect: conversation?.type === 'direct',
|
||||
isLastMessage: msg.id === lastMessageId,
|
||||
otherLastReadAt,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="mx-4 mb-2 px-3 py-2 text-xs text-red-600 bg-red-50 dark:bg-red-900/30 rounded-lg">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Compose */}
|
||||
<form onSubmit={handleSend} className="flex gap-2 px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={handlePickAttachments}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex-shrink-0 rounded-xl border border-gray-200 dark:border-gray-700 px-3 py-2 text-sm text-gray-600 dark:text-gray-300"
|
||||
title="Attach files"
|
||||
>
|
||||
📎
|
||||
</button>
|
||||
<textarea
|
||||
value={body}
|
||||
onChange={e => setBody(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Write a message… (Enter to send, Shift+Enter for new line)"
|
||||
rows={1}
|
||||
maxLength={5000}
|
||||
className="flex-1 resize-none rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500 max-h-32 overflow-y-auto"
|
||||
style={{ minHeight: '2.5rem' }}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={(!body.trim() && attachments.length === 0) || sending}
|
||||
className="flex-shrink-0 rounded-xl bg-blue-500 hover:bg-blue-600 disabled:opacity-40 text-white px-4 py-2 text-sm font-medium transition-colors"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{attachments.length > 0 && (
|
||||
<div className="px-4 pb-3 flex flex-wrap gap-2">
|
||||
{attachments.map((file, idx) => (
|
||||
<div key={`${file.name}-${idx}`} className="inline-flex items-center gap-2 rounded-lg bg-gray-100 dark:bg-gray-800 px-2 py-1 text-xs text-gray-700 dark:text-gray-300">
|
||||
<span className="truncate max-w-[220px]">{file.name}</span>
|
||||
<button type="button" onClick={() => removeAttachment(idx)} className="text-red-500">✕</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Helpers ──────────────────────────────────────────────────────────────────
|
||||
|
||||
function tagReactions(msg, currentUserId) {
|
||||
if (!msg.reactions?.length) return msg
|
||||
return {
|
||||
...msg,
|
||||
reactions: msg.reactions.map(r => ({ ...r, _iMine: r.user_id === currentUserId })),
|
||||
}
|
||||
}
|
||||
|
||||
function groupByDate(messages) {
|
||||
const map = new Map()
|
||||
for (const msg of messages) {
|
||||
const date = formatDate(msg.created_at)
|
||||
if (!map.has(date)) map.set(date, [])
|
||||
map.get(date).push(msg)
|
||||
}
|
||||
return Array.from(map.entries()).map(([date, messages]) => ({ date, messages }))
|
||||
}
|
||||
|
||||
function mergeMessageLists(existing, incoming) {
|
||||
const byId = new Map()
|
||||
|
||||
for (const msg of existing) {
|
||||
byId.set(String(msg.id), msg)
|
||||
}
|
||||
|
||||
for (const msg of incoming) {
|
||||
byId.set(String(msg.id), msg)
|
||||
}
|
||||
|
||||
return Array.from(byId.values()).sort((a, b) => {
|
||||
const at = new Date(a.created_at).getTime()
|
||||
const bt = new Date(b.created_at).getTime()
|
||||
if (at !== bt) return at - bt
|
||||
const aid = Number(a.id)
|
||||
const bid = Number(b.id)
|
||||
if (!Number.isNaN(aid) && !Number.isNaN(bid)) {
|
||||
return aid - bid
|
||||
}
|
||||
return String(a.id).localeCompare(String(b.id))
|
||||
})
|
||||
}
|
||||
|
||||
function buildSeenText({ message, isMine, isDirect, isLastMessage, otherLastReadAt }) {
|
||||
if (!isDirect || !isMine || !isLastMessage || !otherLastReadAt || !message?.created_at) {
|
||||
return null
|
||||
}
|
||||
|
||||
const seenAt = new Date(otherLastReadAt)
|
||||
const sentAt = new Date(message.created_at)
|
||||
|
||||
if (Number.isNaN(seenAt.getTime()) || Number.isNaN(sentAt.getTime()) || seenAt < sentAt) {
|
||||
return null
|
||||
}
|
||||
|
||||
return `Seen ${relativeTimeFromNow(otherLastReadAt)} ago`
|
||||
}
|
||||
|
||||
function relativeTimeFromNow(iso) {
|
||||
const seconds = Math.max(0, Math.floor((Date.now() - new Date(iso).getTime()) / 1000))
|
||||
if (seconds < 60) return `${seconds}s`
|
||||
if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
|
||||
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`
|
||||
return `${Math.floor(seconds / 86400)}d`
|
||||
}
|
||||
|
||||
function formatDate(iso) {
|
||||
const d = new Date(iso)
|
||||
const today = new Date()
|
||||
const yesterday = new Date(today)
|
||||
yesterday.setDate(today.getDate() - 1)
|
||||
|
||||
if (isSameDay(d, today)) return 'Today'
|
||||
if (isSameDay(d, yesterday)) return 'Yesterday'
|
||||
return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
|
||||
}
|
||||
|
||||
function isSameDay(a, b) {
|
||||
return a.getFullYear() === b.getFullYear() &&
|
||||
a.getMonth() === b.getMonth() &&
|
||||
a.getDate() === b.getDate()
|
||||
}
|
||||
Reference in New Issue
Block a user