421 lines
14 KiB
TypeScript
421 lines
14 KiB
TypeScript
import { loadDevicePrivateKey } from '@chat-app/shared/auth';
|
|
import {
|
|
type DecryptedMessage,
|
|
editEncryptedMessage,
|
|
parseMessagePayload,
|
|
softDeleteMessage,
|
|
} from '@chat-app/shared/chat';
|
|
import { extractErrorCode } from '@chat-app/shared/i18n';
|
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { devLocalSecretStore } from '../lib/secretStore';
|
|
import { supabase } from '../lib/supabase';
|
|
import type { AggregatedReaction } from '../lib/useMessageReactions';
|
|
import { AttachmentImage } from './AttachmentImage';
|
|
import { PencilIcon, PhoneIcon, PhoneOffIcon, SmileIcon, SpinnerIcon, TrashIcon, XIcon } from './icons';
|
|
|
|
const EMOJI_CHOICES = ['👍', '❤️', '😂', '🎉', '🔥', '😮', '😢', '🙏'];
|
|
const EDIT_WINDOW_MS = 24 * 60 * 60 * 1000;
|
|
|
|
interface Props {
|
|
message: DecryptedMessage;
|
|
mine: boolean;
|
|
groupedWithPrev: boolean;
|
|
conversationId: string;
|
|
reactions: AggregatedReaction[];
|
|
onToggleReaction: (emoji: string) => Promise<void>;
|
|
showSeen?: boolean;
|
|
}
|
|
|
|
export function MessageBubble({
|
|
message,
|
|
mine,
|
|
groupedWithPrev,
|
|
conversationId,
|
|
reactions,
|
|
onToggleReaction,
|
|
showSeen = false,
|
|
}: Props) {
|
|
const { t } = useTranslation(['app']);
|
|
const { session, device } = useAuth();
|
|
|
|
const parsed = parseMessagePayload(message.plaintext);
|
|
const initialText = parsed.kind === 'text' ? parsed.text : '';
|
|
const initialAttachments = parsed.kind === 'text' ? parsed.attachments : [];
|
|
|
|
const [editing, setEditing] = useState(false);
|
|
const [editText, setEditText] = useState(initialText);
|
|
const [busy, setBusy] = useState(false);
|
|
const [editError, setEditError] = useState<string | null>(null);
|
|
const [pickerOpen, setPickerOpen] = useState(false);
|
|
const pickerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const createdAt = new Date(message.createdAt);
|
|
const age = Date.now() - createdAt.getTime();
|
|
const withinEditWindow = age < EDIT_WINDOW_MS;
|
|
const bodyText = initialText;
|
|
const attachments = initialAttachments;
|
|
const canEdit =
|
|
parsed.kind === 'text' &&
|
|
mine &&
|
|
withinEditWindow &&
|
|
!message.deletedAt &&
|
|
attachments.length === 0;
|
|
const canDelete = parsed.kind === 'text' && mine && !message.deletedAt;
|
|
|
|
const time = new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit' }).format(
|
|
createdAt,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!pickerOpen) return;
|
|
function onClickOutside(e: MouseEvent) {
|
|
if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
|
|
setPickerOpen(false);
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', onClickOutside);
|
|
return () => document.removeEventListener('mousedown', onClickOutside);
|
|
}, [pickerOpen]);
|
|
|
|
const handleEditSave = useCallback(async () => {
|
|
if (!session || !device) return;
|
|
const trimmed = editText.trim();
|
|
if (!trimmed || trimmed === bodyText) {
|
|
setEditing(false);
|
|
setEditError(null);
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
setEditError(null);
|
|
try {
|
|
const priv = await loadDevicePrivateKey(devLocalSecretStore, session.user.id, device.id);
|
|
if (!priv) throw new Error('private key not loaded');
|
|
await editEncryptedMessage({
|
|
client: supabase,
|
|
messageId: message.id,
|
|
conversationId,
|
|
newPlaintext: trimmed,
|
|
senderUserId: session.user.id,
|
|
senderDeviceId: device.id,
|
|
senderPrivateKey: priv,
|
|
});
|
|
setEditing(false);
|
|
} catch (err: unknown) {
|
|
const code = extractErrorCode(err);
|
|
setEditError(
|
|
code
|
|
? t('errors:' + code, { defaultValue: t('errors:generic') })
|
|
: err instanceof Error
|
|
? err.message
|
|
: t('errors:generic'),
|
|
);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}, [editText, message.id, message.plaintext, conversationId, session, device, t]);
|
|
|
|
const handleDelete = useCallback(async () => {
|
|
if (busy) return;
|
|
setBusy(true);
|
|
try {
|
|
await softDeleteMessage(supabase, message.id);
|
|
} catch (err: unknown) {
|
|
console.error('delete failed', err);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}, [busy, message.id]);
|
|
|
|
const handlePickEmoji = useCallback(
|
|
async (emoji: string) => {
|
|
setPickerOpen(false);
|
|
try {
|
|
await onToggleReaction(emoji);
|
|
} catch (err: unknown) {
|
|
console.error('toggleReaction failed', err);
|
|
}
|
|
},
|
|
[onToggleReaction],
|
|
);
|
|
|
|
if (message.deletedAt) {
|
|
return (
|
|
<div className={'flex ' + (mine ? 'justify-end' : 'justify-start')}>
|
|
<div className="max-w-[70%] rounded-2xl border border-white/5 bg-white/5 px-3.5 py-1.5 text-xs italic text-neutral-500">
|
|
{t('app:chats.deleted')}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (parsed.kind === 'call_event') {
|
|
return <CallEventRow parsed={parsed} mine={mine} time={time} />;
|
|
}
|
|
|
|
return (
|
|
<div className={'flex ' + (mine ? 'justify-end' : 'justify-start')}>
|
|
<div
|
|
className={
|
|
'group relative max-w-[70%] ' + (groupedWithPrev ? 'mt-0.5' : 'mt-2')
|
|
}
|
|
>
|
|
{editing ? (
|
|
<div className="rounded-2xl border border-brand-400/40 bg-ink-900/80 p-2 backdrop-blur-xl">
|
|
<textarea
|
|
value={editText}
|
|
onChange={(e) => setEditText(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
void handleEditSave();
|
|
}
|
|
if (e.key === 'Escape') {
|
|
setEditing(false);
|
|
setEditError(null);
|
|
}
|
|
}}
|
|
rows={2}
|
|
autoFocus
|
|
className="w-full resize-none rounded-md bg-ink-800 px-3 py-2 text-sm text-white outline-none focus:ring-2 focus:ring-brand-400/60"
|
|
/>
|
|
{editError && (
|
|
<p className="mt-1.5 break-words rounded-md border border-rose-500/20 bg-rose-500/10 px-2 py-1 text-[11px] text-rose-200">
|
|
{editError}
|
|
</p>
|
|
)}
|
|
<div className="mt-1.5 flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setEditing(false);
|
|
setEditError(null);
|
|
}}
|
|
className="cursor-pointer rounded-md border border-white/10 bg-white/5 px-3 py-1 text-xs text-neutral-200 hover:bg-white/10"
|
|
>
|
|
{t('app:friends.action_cancel')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={busy}
|
|
onClick={() => void handleEditSave()}
|
|
className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-brand-500/90 px-3 py-1 text-xs font-semibold text-white hover:bg-brand-400 disabled:opacity-60"
|
|
>
|
|
{busy && <SpinnerIcon className="h-3.5 w-3.5" />}
|
|
<span>{t('common:save', { defaultValue: 'Save' })}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className={
|
|
'break-words rounded-2xl px-3.5 py-2 text-sm ' +
|
|
(mine
|
|
? 'bg-brand-500/85 text-white'
|
|
: 'border border-white/5 bg-ink-900/70 text-neutral-100')
|
|
}
|
|
>
|
|
{message.plaintext === null ? (
|
|
<span className="italic text-neutral-400">…cannot decrypt</span>
|
|
) : (
|
|
<>
|
|
{bodyText.length > 0 && <div>{bodyText}</div>}
|
|
{attachments.map((a) => (
|
|
<AttachmentImage key={a.id} handle={a} />
|
|
))}
|
|
</>
|
|
)}
|
|
<div
|
|
className={
|
|
'mt-1 flex items-center gap-1.5 text-[10px] ' +
|
|
(mine ? 'text-brand-100/70' : 'text-neutral-500')
|
|
}
|
|
>
|
|
<span>{time}</span>
|
|
{message.editedAt && !message.deletedAt && (
|
|
<span className="italic">· {t('app:chats.edited')}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showSeen && mine && !editing && !message.deletedAt && (
|
|
<p className="mt-0.5 text-right text-[10px] text-neutral-500">
|
|
{t('app:chats.seen')}
|
|
</p>
|
|
)}
|
|
|
|
{reactions.length > 0 && !editing && (
|
|
<div className={'mt-1 flex flex-wrap gap-1 ' + (mine ? 'justify-end' : 'justify-start')}>
|
|
{reactions.map((r) => (
|
|
<button
|
|
key={r.emoji}
|
|
type="button"
|
|
onClick={() => void onToggleReaction(r.emoji)}
|
|
className={
|
|
'inline-flex cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
|
|
(r.mine
|
|
? 'border-brand-400/40 bg-brand-500/20 text-brand-100'
|
|
: 'border-white/10 bg-white/5 text-neutral-200 hover:bg-white/10')
|
|
}
|
|
>
|
|
<span>{r.emoji}</span>
|
|
<span className="text-[10px] font-medium">{r.count}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{!editing && (
|
|
<div
|
|
className={
|
|
'pointer-events-none absolute top-0 z-20 opacity-0 transition group-hover:pointer-events-auto group-hover:opacity-100 ' +
|
|
(mine ? 'right-full pr-2' : 'left-full pl-2')
|
|
}
|
|
>
|
|
<div className="flex items-center gap-0.5 rounded-lg border border-white/10 bg-ink-900/90 p-1 shadow-lg backdrop-blur-xl">
|
|
<ActionButton
|
|
label={t('app:friends.action_accept', { defaultValue: 'React' })}
|
|
onClick={() => setPickerOpen((v) => !v)}
|
|
icon={<SmileIcon className="h-4 w-4" />}
|
|
/>
|
|
{canEdit && (
|
|
<ActionButton
|
|
label="Edit"
|
|
onClick={() => {
|
|
setEditText(message.plaintext ?? '');
|
|
setEditing(true);
|
|
}}
|
|
icon={<PencilIcon className="h-4 w-4" />}
|
|
/>
|
|
)}
|
|
{canDelete && (
|
|
<ActionButton
|
|
label="Delete"
|
|
onClick={() => void handleDelete()}
|
|
icon={<TrashIcon className="h-4 w-4" />}
|
|
tone="danger"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{pickerOpen && (
|
|
<div
|
|
ref={pickerRef}
|
|
role="menu"
|
|
className={
|
|
'absolute z-30 mt-1 flex gap-1 rounded-lg border border-white/10 bg-ink-900/95 p-1.5 shadow-xl backdrop-blur-xl ' +
|
|
(mine ? 'right-0' : 'left-0')
|
|
}
|
|
>
|
|
{EMOJI_CHOICES.map((e) => (
|
|
<button
|
|
key={e}
|
|
type="button"
|
|
onClick={() => void handlePickEmoji(e)}
|
|
className="cursor-pointer rounded-md px-2 py-1 text-lg transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
|
|
>
|
|
{e}
|
|
</button>
|
|
))}
|
|
<button
|
|
type="button"
|
|
onClick={() => setPickerOpen(false)}
|
|
className="cursor-pointer rounded-md px-1.5 py-1 text-neutral-500 transition hover:bg-white/10"
|
|
>
|
|
<XIcon className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CallEventRow({
|
|
parsed,
|
|
mine,
|
|
time,
|
|
}: {
|
|
parsed: { status: string; mediaKind: string; durationSec: number };
|
|
mine: boolean;
|
|
time: string;
|
|
}) {
|
|
const { t } = useTranslation(['app']);
|
|
const status = parsed.status;
|
|
const isMissed = status === 'missed' || status === 'declined';
|
|
|
|
const Icon = isMissed ? PhoneOffIcon : PhoneIcon;
|
|
const tone = isMissed
|
|
? 'border-rose-500/20 bg-rose-500/10 text-rose-200'
|
|
: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-200';
|
|
|
|
const label =
|
|
status === 'ended'
|
|
? mine
|
|
? t('app:chats.call_outgoing', { defaultValue: 'Outgoing call' })
|
|
: t('app:chats.call_incoming', { defaultValue: 'Incoming call' })
|
|
: status === 'missed'
|
|
? mine
|
|
? t('app:chats.call_no_answer', { defaultValue: 'No answer' })
|
|
: t('app:chats.call_missed', { defaultValue: 'Missed call' })
|
|
: t('app:chats.call_declined', { defaultValue: 'Call declined' });
|
|
|
|
const duration = parsed.durationSec > 0 ? formatDuration(parsed.durationSec) : null;
|
|
|
|
return (
|
|
<div className="my-2 flex justify-center">
|
|
<div
|
|
className={
|
|
'inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium ' + tone
|
|
}
|
|
>
|
|
<Icon className="h-3.5 w-3.5" />
|
|
<span>{label}</span>
|
|
{duration && <span className="font-mono text-[11px] opacity-80">· {duration}</span>}
|
|
<span className="text-[10px] opacity-60">· {time}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatDuration(totalSec: number): string {
|
|
const m = Math.floor(totalSec / 60);
|
|
const s = totalSec % 60;
|
|
if (m === 0) return s + 's';
|
|
return m + ':' + s.toString().padStart(2, '0');
|
|
}
|
|
|
|
function ActionButton({
|
|
label,
|
|
onClick,
|
|
icon,
|
|
tone,
|
|
}: {
|
|
label: string;
|
|
onClick: () => void;
|
|
icon: React.ReactNode;
|
|
tone?: 'danger';
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-label={label}
|
|
title={label}
|
|
onClick={onClick}
|
|
className={
|
|
'flex h-7 w-7 cursor-pointer items-center justify-center rounded-md transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
|
|
(tone === 'danger'
|
|
? 'text-neutral-400 hover:bg-rose-500/20 hover:text-rose-200'
|
|
: 'text-neutral-400 hover:bg-white/10 hover:text-neutral-100')
|
|
}
|
|
>
|
|
{icon}
|
|
</button>
|
|
);
|
|
}
|